fix: theme background blur
This commit is contained in:
parent
40717541d4
commit
49e73308f6
|
@ -29,7 +29,7 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
|
||||||
let win: BrowserWindow | null;
|
let win: BrowserWindow | null;
|
||||||
let tray: Tray | null = null;
|
let tray: Tray | null = null;
|
||||||
let pythonManager: PythonManager | null;
|
let pythonManager: PythonManager | null;
|
||||||
const theme: "dark" | "light" = "light";
|
const theme: "dark" | "light" = "dark";
|
||||||
|
|
||||||
const themeTitleBarStyles = {
|
const themeTitleBarStyles = {
|
||||||
dark: { color: "rgb(32,32,32)", symbolColor: "#fff" },
|
dark: { color: "rgb(32,32,32)", symbolColor: "#fff" },
|
||||||
|
|
|
@ -25,7 +25,7 @@ const LayoutMain = () => {
|
||||||
<LeftDocker />
|
<LeftDocker />
|
||||||
</div>
|
</div>
|
||||||
<div className="relative w-[calc(100%-80px)]">
|
<div className="relative w-[calc(100%-80px)]">
|
||||||
<div className="bg-card rounded-l-lg h-full">
|
<div className="rounded-tl-lg h-full">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,11 +6,11 @@ import {
|
||||||
IoLayersOutline,
|
IoLayersOutline,
|
||||||
IoListOutline,
|
IoListOutline,
|
||||||
IoPlayOutline,
|
IoPlayOutline,
|
||||||
IoSettingsOutline
|
IoSettingsOutline,
|
||||||
} from "react-icons/io5";
|
} from "react-icons/io5";
|
||||||
import './LeftDocker.css'
|
import "./LeftDocker.css";
|
||||||
|
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
type MenuItem = {
|
type MenuItem = {
|
||||||
to: string;
|
to: string;
|
||||||
|
@ -18,7 +18,6 @@ type MenuItem = {
|
||||||
icon: ReactNode;
|
icon: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const menuItems: MenuItem[] = [
|
const menuItems: MenuItem[] = [
|
||||||
{ to: "/", name: "一键启动", icon: <IoPlayOutline size={24} /> },
|
{ to: "/", name: "一键启动", icon: <IoPlayOutline size={24} /> },
|
||||||
{ to: "/datasource", name: "数据列表", icon: <IoListOutline size={24} /> },
|
{ to: "/datasource", name: "数据列表", icon: <IoListOutline size={24} /> },
|
||||||
|
@ -40,11 +39,17 @@ export const LeftDocker = () => {
|
||||||
{menuItems.map((item) => (
|
{menuItems.map((item) => (
|
||||||
<li
|
<li
|
||||||
key={item.name}
|
key={item.name}
|
||||||
className={`w-full flex flex-col items-center justify-center ${location.pathname === item.to ? "active text-teal-500" : ""
|
className={`w-full flex flex-col items-center justify-center ${
|
||||||
|
location.pathname === item.to
|
||||||
|
? "active text-primary bg-primary/10 rounded-r"
|
||||||
|
: ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => handleClick(item)}
|
onClick={() => handleClick(item)}
|
||||||
>
|
>
|
||||||
<Link to={item.to} className="w-[60px] h-[60px] flex items-center justify-center flex-col gap-2">
|
<Link
|
||||||
|
to={item.to}
|
||||||
|
className="w-[60px] h-[60px] flex items-center justify-center flex-col gap-2"
|
||||||
|
>
|
||||||
{item.icon}
|
{item.icon}
|
||||||
<span className="text-xs">{item.name}</span>
|
<span className="text-xs">{item.name}</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -10,16 +10,18 @@ body,
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 94.12%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 240 10% 3.9%;
|
--foreground: 240 10% 3.9%;
|
||||||
--card: 0 0% 100%;
|
--card: 0 0% 100%;
|
||||||
--card-foreground: 240 10% 3.9%;
|
--card-foreground: 240 10% 3.9%;
|
||||||
--popover: 0 0% 100%;
|
--popover: 0 0% 100%;
|
||||||
--popover-foreground: 240 10% 3.9%;
|
--popover-foreground: 240 10% 3.9%;
|
||||||
--primary: 240 5.9% 10%;
|
--primary: 142.1 76.2% 36.3%;
|
||||||
--primary-foreground: 0 0% 98%;
|
--primary-foreground: 355.7 100% 97.3%;
|
||||||
--secondary: 240 4.8% 95.9%;
|
--secondary: 240 4.8% 95.9%;
|
||||||
--secondary-foreground: 240 5.9% 10%;
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
--muted: 240 4.8% 95.9%;
|
--muted: 240 4.8% 95.9%;
|
||||||
|
@ -30,7 +32,7 @@ body,
|
||||||
--destructive-foreground: 0 0% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
--border: 240 5.9% 90%;
|
--border: 240 5.9% 90%;
|
||||||
--input: 240 5.9% 90%;
|
--input: 240 5.9% 90%;
|
||||||
--ring: 240 10% 3.9%;
|
--ring: 142.1 76.2% 36.3%;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
--chart-1: 12 76% 61%;
|
--chart-1: 12 76% 61%;
|
||||||
--chart-2: 173 58% 39%;
|
--chart-2: 173 58% 39%;
|
||||||
|
@ -40,25 +42,25 @@ body,
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 0deg 0% 12.55%;
|
--background: 20 14.3% 4.1%;
|
||||||
--foreground: 0 0% 100%;
|
--foreground: 0 0% 95%;
|
||||||
--card: 0 0% 14.9%;
|
--card: 24 9.8% 10%;
|
||||||
--card-foreground: 0 0% 98%;
|
--card-foreground: 0 0% 95%;
|
||||||
--popover: 240 10% 3.9%;
|
--popover: 0 0% 9%;
|
||||||
--popover-foreground: 0 0% 98%;
|
--popover-foreground: 0 0% 95%;
|
||||||
--primary: 0 0% 98%;
|
--primary: 142.1 70.6% 45.3%;
|
||||||
--primary-foreground: 240 5.9% 10%;
|
--primary-foreground: 144.9 80.4% 10%;
|
||||||
--secondary: 240 3.7% 15.9%;
|
--secondary: 240 3.7% 15.9%;
|
||||||
--secondary-foreground: 0 0% 98%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
--muted: 240 3.7% 15.9%;
|
--muted: 0 0% 15%;
|
||||||
--muted-foreground: 240 5% 64.9%;
|
--muted-foreground: 240 5% 64.9%;
|
||||||
--accent: 240 3.7% 15.9%;
|
--accent: 12 6.5% 15.1%;
|
||||||
--accent-foreground: 0 0% 98%;
|
--accent-foreground: 0 0% 98%;
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 0 0% 98%;
|
--destructive-foreground: 0 85.7% 97.3%;
|
||||||
--border: 240 3.7% 15.9%;
|
--border: 240 3.7% 15.9%;
|
||||||
--input: 240 3.7% 15.9%;
|
--input: 240 3.7% 15.9%;
|
||||||
--ring: 240 4.9% 83.9%;
|
--ring: 142.4 71.8% 29.2%;
|
||||||
--chart-1: 220 70% 50%;
|
--chart-1: 220 70% 50%;
|
||||||
--chart-2: 160 60% 45%;
|
--chart-2: 160 60% 45%;
|
||||||
--chart-3: 30 80% 55%;
|
--chart-3: 30 80% 55%;
|
||||||
|
@ -67,6 +69,7 @@ body,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user