feat: 暗黑模式

dataelement · Jul 4, 2024 · 58cd57f · 58cd57f
1 parent 4865f4b
commit 58cd57f
Show file tree

Hide file tree

Showing 22 changed files with 37 additions and 36 deletions.
diff --git a/src/frontend/public/logo-small-dark.png b/src/frontend/public/logo-small-dark.png
diff --git a/src/frontend/src/components/bs-comp/chatComponent/MessageSystem.tsx b/src/frontend/src/components/bs-comp/chatComponent/MessageSystem.tsx
@@ -38,7 +38,7 @@ export default function MessageSystem({ data }) {
     // if(data.category === 'report') return null
 
     return <div className="py-1">
-        <div className={`relative rounded-sm px-6 py-4 border text-sm ${data.category === 'guide' ? 'bg-[#EDEFF6]' : 'bg-slate-50'} ${border[data.category || 'system']}`}>
+        <div className={`relative rounded-sm px-6 py-4 border text-sm dark:bg-gray-900 ${data.category === 'guide' ? 'bg-[#EDEFF6]' : 'bg-slate-50'} ${border[data.category || 'system']}`}>
             {logMkdown}
             {/* 中英 */}
             {data.category === 'report' && <CopyIcon className=" absolute right-4 top-2 cursor-pointer" onClick={(e) => handleCopy(e.target.parentNode)}></CopyIcon>}

diff --git a/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx b/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx
@@ -36,14 +36,14 @@ export default function SkillChatSheet({ children, onSelect }) {
         <SheetTrigger asChild>
             {children}
         </SheetTrigger>
-        <SheetContent className="sm:min-w-[966px] bg-gray-100">
+        <SheetContent className="sm:min-w-[966px]">
             <div className="flex h-full" onClick={e => e.stopPropagation()}>
                 <div className="w-fit p-6">
                     <SheetTitle>{t('chat.dialogueSelection')}</SheetTitle>
                     <SheetDescription>{t('chat.chooseSkillOrAssistant')}</SheetDescription>
                     <SearchInput value={keyword} placeholder={t('chat.search')} className="my-6" onChange={(e) => setKeyword(e.target.value)} />
                 </div>
-                <div className="flex-1 min-w-[696px] bg-[#fff] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
+                <div className="flex-1 min-w-[696px] bg-[#fff] dark:bg-[#303134] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
                     {
                         options.length ? options.map((flow, i) => (
                             <CardComponent key={i}

diff --git a/src/frontend/src/components/bs-comp/sheets/SkillTempSheet.tsx b/src/frontend/src/components/bs-comp/sheets/SkillTempSheet.tsx
@@ -30,7 +30,7 @@ export default function SkillTempSheet({ children, onSelect }) {
         <SheetTrigger asChild>
             {children}
         </SheetTrigger>
-        <SheetContent className="sm:min-w-[966px] bg-gray-100">
+        <SheetContent className="sm:min-w-[966px] ">
             <div className="flex h-full" onClick={e => e.stopPropagation()}>
                 <div className="w-fit p-6">
                     <SheetTitle>{t('skills.skillTemplate')}</SheetTitle>

diff --git a/src/frontend/src/components/bs-comp/sheets/TaggingSheet.tsx b/src/frontend/src/components/bs-comp/sheets/TaggingSheet.tsx
@@ -25,7 +25,7 @@ export default function TaggingSheet({children}) {
 
     return <Sheet>
         <SheetTrigger asChild>{children}</SheetTrigger>
-        <SheetContent className="bg-gray-100 sm:min-w-[800px]">
+        <SheetContent className="sm:min-w-[800px]">
             <SheetTitle>给助手打标签</SheetTitle>
             <div className="w-full h-full grid grid-cols-[80%,20%]">
                 <div className="bg-slate-500">

diff --git a/src/frontend/src/components/bs-ui/sheet/index.tsx b/src/frontend/src/components/bs-ui/sheet/index.tsx
@@ -61,7 +61,7 @@ const SheetContent = React.forwardRef<
         <SheetOverlay />
         <SheetPrimitive.Content
             ref={ref}
-            className={cname(sheetVariants({ side }), className)}
+            className={cname(sheetVariants({ side }), 'bg-gray-100 dark:bg-gray-950', className)}
             {...props}
         >
             {children}

diff --git a/src/frontend/src/components/bs-ui/slider/index.tsx b/src/frontend/src/components/bs-ui/slider/index.tsx
@@ -20,7 +20,7 @@ const Slider = React.forwardRef<
         <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
             <SliderPrimitive.Range className="absolute h-full bg-primary" />
         </SliderPrimitive.Track>
-        <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+        <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background dark:bg-[#fff] shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
     </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName

diff --git a/src/frontend/src/components/bs-ui/switch/index.tsx b/src/frontend/src/components/bs-ui/switch/index.tsx
@@ -8,15 +8,15 @@ const Switch = React.forwardRef<
 >(({ className, texts = null, ...props }, ref) => (
     <SwitchPrimitives.Root
         className={cname(
-            "group peer relative inline-flex h-5 min-w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+            "group peer relative inline-flex h-5 min-w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-gray-950",
             className
         )}
         {...props}
         ref={ref}
     >
         <SwitchPrimitives.Thumb
             className={cname(
-                "pointer-events-none block h-3.5 min-w-3.5 w-3.5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:ml-[100%] data-[state=checked]:translate-x-[calc(-50%-8px)] data-[state=unchecked]:translate-x-0"
+                "pointer-events-none block h-3.5 min-w-3.5 w-3.5 rounded-full bg-background dark:bg-[#C0D6FF] shadow-lg ring-0 transition-transform data-[state=checked]:ml-[100%] data-[state=checked]:translate-x-[calc(-50%-8px)] data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-[#333437]"
             )}
         />
         {texts && <>

diff --git a/src/frontend/src/components/bs-ui/table/index.tsx b/src/frontend/src/components/bs-ui/table/index.tsx
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
     <td
         ref={ref}
         className={cname(
-            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] bg-[#FBFBFB] first:rounded-l-md last:rounded-r-md group-odd:bg-[#f4f5f8] group-hover:bg-[#ebf0ff]",
+            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] bg-[#FBFBFB] dark:bg-[#171717] first:rounded-l-md last:rounded-r-md group-odd:bg-[#f4f5f8] group-hover:bg-[#ebf0ff] dark:group-odd:bg-[#111] dark:group-hover:bg-[#2a2b2e]",
             className
         )}
         {...props}

diff --git a/src/frontend/src/components/bs-ui/tabs/index.tsx b/src/frontend/src/components/bs-ui/tabs/index.tsx
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cname(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background dark:data-[state=active]:bg-[#34353A] data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
       className
     )}
     {...props}

diff --git a/src/frontend/src/components/bs-ui/toast/toast.tsx b/src/frontend/src/components/bs-ui/toast/toast.tsx
@@ -26,16 +26,16 @@ const toastVariants = cva(
     {
         variants: {
             variant: {
-                info: "info border-[#024FE5] bg-[#F1F6FF] self-end",
-                success: "success border-[#0BA95D] bg-[#F2FFF9] self-end",
-                warning: "warning border-[#EA991F] bg-[#FFF7EC] self-end",
-                error: "error border-[#D8341E] bg-[#FFF2F0] self-end",
+                info: "info border-[#024FE5] bg-[#F1F6FF] dark:bg-[#1C2C24] self-end",
+                success: "success border-[#0BA95D] bg-[#F2FFF9] dark:bg-[#1A2335] self-end",
+                warning: "warning border-[#EA991F] bg-[#FFF7EC] dark:bg-[#2F2517] self-end",
+                error: "error border-[#D8341E] bg-[#FFF2F0] dark:bg-[#351F1C] self-end",
             },
             message: {
-                info: "shadow-xl bg-[#fff] self-center",
-                success: "shadow-xl bg-[#fff] self-center",
-                warning: "shadow-xl bg-[#fff] self-center",
-                error: "shadow-xl bg-[#fff] self-center",
+                info: "shadow-xl bg-[#fff] dark:bg-[#303134] self-center",
+                success: "shadow-xl bg-[#fff] dark:bg-[#303134] self-center",
+                warning: "shadow-xl bg-[#fff] dark:bg-[#303134] self-center",
+                error: "shadow-xl bg-[#fff] dark:bg-[#303134] self-center",
             }
         },
         defaultVariants: {},

diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx
@@ -7,15 +7,14 @@ type darkContextType = {
 
 const initialValue = {
   dark: {},
-  setDark: () => {},
+  setDark: () => { },
 };
 
 export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
   const [dark, setDark] = useState(
-    false
-    // JSON.parse(window.localStorage.getItem("isDark")) ?? false
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false
   );
   useEffect(() => {
     if (dark) {

diff --git a/src/frontend/src/layout/MainLayout.tsx b/src/frontend/src/layout/MainLayout.tsx
@@ -73,7 +73,8 @@ export default function MainLayout() {
             <div className="flex justify-between h-[64px]">
                 <div className="flex h-9 my-[14px]">
                     <Link className="inline-block" to='/'>
-                        <img src={__APP_ENV__.BASE_URL + '/login-logo-small.png'} className="w-[114px] h-9 ml-8 rounded dark:w-[124px] dark:pr-[10px] dark:bg-[#fff]" alt="" />
+                        <img src={__APP_ENV__.BASE_URL + '/login-logo-small.png'} className="w-[114px] h-9 ml-8 rounded dark:w-[124px] dark:pr-[10px] dark:hidden" alt="" />
+                        <img src={__APP_ENV__.BASE_URL + '/logo-small-dark.png'} className="w-[114px] h-9 ml-8 rounded dark:w-[124px] dark:pr-[10px] dark:block hidden" alt="" />
                     </Link>
                 </div>
                 <div className="flex w-fit relative z-50">

diff --git a/src/frontend/src/pages/DiffFlowPage/components/Component.tsx b/src/frontend/src/pages/DiffFlowPage/components/Component.tsx
@@ -26,7 +26,7 @@ export default function Component({ compId, options, disables, version, classNam
     }, [version, compId])
 
     // empty
-    if (!version) return <div className="bg-[#fff] rounded-md p-2 shadow-sm">
+    if (!version) return <div className="bg-[#fff] dark:bg-gray-950 rounded-md p-2 shadow-sm">
         <div className="group flex justify-center items-center pb-2 border-b relative">
             <Select onValueChange={onChangeVersion}>
                 <SelectTrigger className="w-[120px] h-6">
@@ -54,7 +54,7 @@ export default function Component({ compId, options, disables, version, classNam
     </div>
 
     // 版本信息
-    return <div className={'bg-[#fff] rounded-md p-2 shadow-sm ' + className}>
+    return <div className={'bg-[#fff] dark:bg-gray-950 rounded-md p-2 shadow-sm ' + className}>
         <div className="group flex justify-between items-center pb-2 border-b">
             <Select value={version.id} onValueChange={onChangeVersion}>
                 <SelectTrigger className="w-[120px] h-6">
@@ -90,7 +90,7 @@ export default function Component({ compId, options, disables, version, classNam
             </div>
             {
                 nodes.map(node => (
-                    <div className="flex odd:bg-gray-50 bg-[#f4f5f8] gap-1 mt-1 px-2 py-1 text-sm rounded-sm">
+                    <div className="flex odd:bg-gray-50 bg-[#f4f5f8] dark:bg-[#212121] gap-1 mt-1 px-2 py-1 text-sm rounded-sm">
                         <span className="min-w-12 w-28 break-all self-center">{node.data.type}</span>
                         <div className="flex-1 min-w-0 pointer-events-none opacity-60">
                             {

diff --git a/src/frontend/src/pages/DiffFlowPage/components/RunTest.tsx b/src/frontend/src/pages/DiffFlowPage/components/RunTest.tsx
@@ -127,7 +127,7 @@ export default function RunTest({ nodeId }) {
     const notDiffVersion = useMemo(() => !mulitVersionFlow.some((version) => version), [mulitVersionFlow])
 
     return <div className="mt-4 px-4">
-        <div className="bg-[#fff] p-2">
+        <div className="bg-[#fff] dark:bg-gray-950 p-2">
             <div className="flex items-center justify-between ">
                 <div className="flex gap-2 items-center">
                     <Button size="sm" disabled={['all', 'row', 'col'].includes(runningType)} onClick={handleUploadTxt}>{t('test.uploadTest')}</Button>

diff --git a/src/frontend/src/pages/DiffFlowPage/index.tsx b/src/frontend/src/pages/DiffFlowPage/index.tsx
@@ -35,9 +35,9 @@ export default function index(params) {
     console.log('mulitVersionFlow', mulitVersionFlow);
 
 
-    return <div className="bg-gray-100 h-full relative">
+    return <div className="bg-gray-100 dark:bg-[#111] h-full relative">
         {/* header */}
-        <div className="absolute top-0 w-full h-14 flex justify-between items-center border-b px-4 bg-[#fff]">
+        <div className="absolute top-0 w-full h-14 flex justify-between items-center border-b px-4 bg-[#fff] dark:bg-[#222]">
             <Button variant="outline" size="icon" onClick={() => navigate(-1)}><ChevronLeftIcon className="h-4 w-4" /></Button>
             <span>版本评估</span>
             <Button type="button" onClick={handleAddVersion}>

diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -13,7 +13,7 @@ export default function DisclosureComponent({
         <>
           <div className="min-w-[108px]">
             <Disclosure.Button className="components-disclosure-arrangement">
-              <div className="flex gap-2 text-[#111]">
+              <div className="flex gap-2 text-[#111] dark:text-gray-50">
                 <Icon strokeWidth={1.5} size={20} />
                 <span className="components-disclosure-title">{title}</span>
               </div>

diff --git a/src/frontend/src/pages/FlowPage/components/Header.tsx b/src/frontend/src/pages/FlowPage/components/Header.tsx
@@ -106,7 +106,7 @@ export default function Header({ flow }) {
         }))
     }
 
-    return <div className="flex justify-between items-center border-b px-4 dark:bg-gray-800">
+    return <div className="flex justify-between items-center border-b px-4 dark:bg-[#222]">
         {
             loading && <div className=" fixed left-0 top-0 w-full h-screen bg-gray-50/60 z-50 flex items-center justify-center">
                 <LoadIcon className="mr-2 text-gray-600" />
@@ -155,7 +155,7 @@ export default function Header({ flow }) {
                                 handleChangeVersion(vid)
                             }} className="gap-0">
                                 {versions.map((vers, index) => (
-                                    <div key={vers.id} className="group flex items-center gap-4 px-4 py-2 cursor-pointer hover:bg-gray-100 border-b">
+                                    <div key={vers.id} className="group flex items-center gap-4 px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 border-b">
                                         <RadioGroupItem value={vers.id + ''} />
                                         <div className="w-[198px]">
                                             <TextInput

diff --git a/src/frontend/src/pages/LoginPage/login.tsx b/src/frontend/src/pages/LoginPage/login.tsx
@@ -125,7 +125,8 @@ export const LoginPage = () => {
             <div className='absolute w-full h-full z-10 flex justify-end top-0'>
                 <div className='w-[852px] sm:px-[266px] px-[20px] pyx-[200px] bg-background-login relative'>
                     <div>
-                        <img src={__APP_ENV__.BASE_URL + '/login-logo-small.png'} alt="small_logo" className='block w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:bg-[#fff]' />
+                        <img src={__APP_ENV__.BASE_URL + '/login-logo-small.png'} className="block w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:hidden" alt="" />
+                        <img src={__APP_ENV__.BASE_URL + '/logo-small-dark.png'} className="w-[114px] h-[36px] m-auto mt-[140px] dark:w-[124px] dark:pr-[10px] dark:block hidden" alt="" />
                         <span className='block w-fit m-auto font-normal text-[14px] text-tx-color mt-[24px]'>{t('login.slogen')}</span>
                     </div>
                     <div className="grid gap-[12px] mt-[68px]">

diff --git a/src/frontend/src/pages/SystemPage/index.tsx b/src/frontend/src/pages/SystemPage/index.tsx
@@ -3,7 +3,7 @@ import {
     TabsContent,
     TabsList,
     TabsTrigger,
-} from "../../components/ui/tabs";
+} from "../../components/bs-ui/tabs";
 import Roles from "./components/Roles";
 import Config from "./components/Config";
 import Users from "./components/Users";

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
@@ -998,7 +998,7 @@
   }
 
   .bisheng-title {
-    @apply text-lg text-gray-950
+    @apply text-lg text-gray-950 dark:text-gray-50
   }
 
   .bisheng-table-footer {

diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
@@ -147,7 +147,7 @@
     --foreground: 0 0% 100%;
     /* hsl(213 31% 91%) */
 
-    --muted: 223 27% 11%;
+    --muted: 0 0% 7%;
     /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%;
     /* hsl(215 16% 56%) */