style:暗黑模式

dataelement · Jul 4, 2024 · 57bb9a4 · 57bb9a4
1 parent c5e577c
commit 57bb9a4
Show file tree

Hide file tree

Showing 41 changed files with 121 additions and 117 deletions.
diff --git a/src/frontend/src/components/Pro/security/AssistantSetting.tsx b/src/frontend/src/components/Pro/security/AssistantSetting.tsx
@@ -69,17 +69,18 @@ export default function AssistantSetting({ id, type }) {
                                     <QuestionMarkCircledIcon />
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                    <p>{t('build.contentSecurityDesc')}</p>
+                                    <p className="text-slate-50">{t('build.contentSecurityDesc')}</p>
                                 </TooltipContent>
                             </Tooltip>
                         </TooltipProvider>
                     </div>
                     <div className="h-[20px] flex items-center">
                         <Sheet open={open} onOpenChange={(bln) => setOpen(bln)}>
                             <SheetTrigger>
+                                {/* @ts-ignore */}
                                 {form.isCheck && <SettingIcon onClick={(e) => { e.stopPropagation(); setOpen(!open) }} className="w-[32px] h-[32px]" />}
                             </SheetTrigger>
-                            <SheetContent className="w-[500px]" onClick={(e) => e.stopPropagation()}>
+                            <SheetContent className="w-[500px] bg-background-login" onClick={(e) => e.stopPropagation()}>
                                 <SheetTitle className="font-[500] pl-3 pt-2">{t('build.contentSecuritySettings')}</SheetTitle>
                                 <FormSet data={form} onChange={handleFormChange} onSave={() => setOpen(false)} onCancel={() => setOpen(false)} />
                             </SheetContent>

diff --git a/src/frontend/src/components/Pro/security/FlowSetting.tsx b/src/frontend/src/components/Pro/security/FlowSetting.tsx
@@ -74,7 +74,7 @@ export default function FlowSetting({ id, type, isOnline, onSubTask }) {
                                 <QuestionMarkCircledIcon />
                             </TooltipTrigger>
                             <TooltipContent>
-                                <p>{t('build.contentSecurityDesc')}</p>
+                                <p className="text-[white]">{t('build.contentSecurityDesc')}</p>
                             </TooltipContent>
                         </Tooltip>
                     </TooltipProvider>
@@ -84,7 +84,7 @@ export default function FlowSetting({ id, type, isOnline, onSubTask }) {
                         <SheetTrigger>
                             {form.isCheck && <SettingIcon onClick={(e) => { e.stopPropagation(); setOpen(!open) }} className="w-[32px] h-[32px]" />}
                         </SheetTrigger>
-                        <SheetContent className="w-[500px]" onClick={(e) => e.stopPropagation()}>
+                        <SheetContent className="w-[500px] bg-background-login" onClick={(e) => e.stopPropagation()}>
                             <SheetTitle className="font-[500] pl-3 pt-2">{t('build.contentSecuritySettings')}</SheetTitle>
                             <FormSet data={form} onChange={handleFormChange} onSave={() => setOpen(false)} onCancel={() => setOpen(false)} />
                         </SheetContent>

diff --git a/src/frontend/src/components/Pro/security/FormSet.tsx b/src/frontend/src/components/Pro/security/FormSet.tsx
@@ -102,8 +102,8 @@ export default function FormSet({ data, onChange, onSave, onCancel }) {
             </div>
         </div>
         <div className="absolute bottom-10 right-4 sapce-x-10 flex space-x-8">
-            <Button onClick={onCancel} variant="outline">{t('cancel')}</Button>
-            <Button onClick={handleSave}>{t('save')}</Button>
+            <Button className="dark:bg-[#282828]" onClick={onCancel} variant="outline">{t('cancel')}</Button>
+            <Button className="text-slate-50" onClick={handleSave}>{t('save')}</Button>
         </div>
     </>
 };
diff --git a/src/frontend/src/components/Pro/security/FormView.tsx b/src/frontend/src/components/Pro/security/FormView.tsx
@@ -11,17 +11,17 @@ export default function FormView({ data }) {
         <div className="mb-4 px-6">
             <div className="flex items-center mb-4">
                 <span className="bisheng-label">{t('build.reviewType')}：</span> 
-                <span className="bg-gray-200 px-2 rounded-xl text-xs">{t('build.sensitiveWordMatch')}</span>
+                <span className="bg-gray-200 dark:bg-slate-900 px-2 rounded-xl text-xs">{t('build.sensitiveWordMatch')}</span>
             </div>
             <div className="flex items-center mb-4">
                 <span className="bisheng-label">{t('build.wordListType')}：</span>
                 <div className="inline">
-                    {data.wordsType?.map((v, index) => <span key={index} className="mr-2 bg-gray-200 px-2 rounded-xl text-xs">{map[v]}</span>)}
+                    {data.wordsType?.map((v, index) => <span key={index} className="mr-2 bg-gray-200 dark:bg-slate-900 px-2 rounded-xl text-xs">{map[v]}</span>)}
                 </div>
             </div>
             <span className="bisheng-label">{t('build.autoReplyContent')}：</span>
             <div className="flex justify-center mt-4">
-                <p className="h-[100px] w-full overflow-y-auto scrollbar-hide bg-gray-50 py-2 px-4">
+                <p className="h-[100px] w-full overflow-y-auto scrollbar-hide bg-background-login py-2 px-4">
                     {data.autoReply || t('build.defaultAutoReply')}</p>
             </div>
         </div>

diff --git a/src/frontend/src/components/bs-comp/cardComponent/index.tsx b/src/frontend/src/components/bs-comp/cardComponent/index.tsx
@@ -120,13 +120,13 @@ export default function CardComponent<T>({
       <CardDescription>{description}</CardDescription>
     </CardContent>
     <CardFooter className="flex justify-end h-10">
-      <div className="rounded cursor-pointer"><GoIcon className="group-hover:text-primary transition-none" /></div>
+      <div className="rounded cursor-pointer"><GoIcon className="group-hover:text-primary transition-none dark:text-slate-50" /></div>
     </CardFooter>
   </Card>
 
 
   // 侧边弹窗列表（sheet）
-  if (type === 'sheet') return <Card className="group w-[320px] cursor-pointer bg-[#F7F9FC] hover:bg-[#EDEFF6] hover:shadow-none relative" onClick={onClick}>
+  if (type === 'sheet') return <Card className="group w-[320px] cursor-pointer bg-[#F7F9FC] dark:bg-[#282828] dark:hover:bg-[#414141] hover:bg-[#EDEFF6] hover:shadow-none relative" onClick={onClick}>
     <CardHeader className="pb-2">
       <CardTitle className="truncate-doubleline">
         <div className="flex gap-2 pb-2 items-center">
@@ -159,6 +159,7 @@ export default function CardComponent<T>({
           <Switch
             checked={_checked}
             className="w-12"
+            // @ts-ignore
             texts={[t('skills.online'), t('skills.offline')]}
             onCheckedChange={(b) => edit && handleCheckedChange(b)}
             onClick={e => { e.stopPropagation(); onSwitchClick?.() }}

diff --git a/src/frontend/src/components/bs-comp/chatComponent/ChatInput.tsx b/src/frontend/src/components/bs-comp/chatComponent/ChatInput.tsx
@@ -272,7 +272,7 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
                     clear && <div
                         className={`w-6 h-6 rounded-sm hover:bg-gray-200 cursor-pointer flex justify-center items-center `}
                         onClick={() => { !inputLock.locked && destory() }}
-                    ><ClearIcon className={!showWhenLocked && inputLock.locked ? 'text-gray-400' : 'text-gray-950'} ></ClearIcon></div>
+                    ><ClearIcon className={`${!showWhenLocked && inputLock.locked ? 'text-gray-400' : 'text-gray-950'} dark:text-slate-50 dark:hover:bg-[#282828]`} ></ClearIcon></div>
                 }
             </div>
             {/* form switch */}
@@ -281,7 +281,7 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
                     form && <div
                         className={`w-6 h-6 rounded-sm hover:bg-gray-200 cursor-pointer flex justify-center items-center `}
                         onClick={() => (showWhenLocked || !inputLock.locked) && setFormShow(!formShow)}
-                    ><FormIcon className={!showWhenLocked && inputLock.locked ? 'text-gray-400' : 'text-gray-950'}></FormIcon></div>
+                    ><FormIcon className={!showWhenLocked && inputLock.locked ? 'text-gray-400' : 'text-gray-500'}></FormIcon></div>
                 }
             </div>
             {/* send */}
@@ -290,7 +290,7 @@ export default function ChatInput({ clear, form, stop, questions, inputForm, wsU
                     id="bs-send-btn"
                     className="w-6 h-6 rounded-sm hover:bg-gray-200 cursor-pointer flex justify-center items-center"
                     onClick={() => { !inputLock.locked && handleSendClick() }}
-                ><SendIcon className={inputLock.locked ? 'text-gray-400' : 'text-gray-950'}></SendIcon></div>
+                ><SendIcon className={`${inputLock.locked ? 'text-gray-400' : 'text-gray-950'} dark:text-slate-50 dark:hover:bg-gray-500`}></SendIcon></div>
             </div>
             {/* question */}
             <Textarea

diff --git a/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx b/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx
@@ -32,6 +32,7 @@ export default function SkillSheet({ select, children, onSelect }) {
   };
 
   const toCreateFlow = () => {
+    //@ts-ignore
     window.open(__APP_ENV__.BASE_URL + "/build/skills");
   };
 
@@ -40,7 +41,7 @@ export default function SkillSheet({ select, children, onSelect }) {
   return (
     <Sheet>
       <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="bg-gray-100 sm:min-w-[966px]">
+      <SheetContent className="bg-background-main sm:min-w-[966px]">
         <div className="flex h-full" onClick={(e) => e.stopPropagation()}>
           <div className="w-fit p-6">
             <SheetTitle>{t("build.addSkill")}</SheetTitle>
@@ -50,11 +51,11 @@ export default function SkillSheet({ select, children, onSelect }) {
               className="my-6"
               onChange={handleSearch}
             />
-            <Button className="w-full" onClick={toCreateFlow}>
+            <Button className="w-full text-slate-50" onClick={toCreateFlow}>
               {t("build.createSkill")}
             </Button>
           </div>
-          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto bg-[#fff] p-5 pt-12 scrollbar-hide">
+          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto bg-background-login p-5 pt-12 scrollbar-hide">
             {onlineFlows[0] ? (
               onlineFlows.map((flow, i) => (
                 <CardComponent
@@ -67,13 +68,13 @@ export default function SkillSheet({ select, children, onSelect }) {
                   footer={
                     <div className="flex justify-end">
                       {select.some((_) => _.id === flow.id) ? (
-                        <Button size="sm" className="h-6" disabled>
+                        <Button size="sm" className="h-6 text-slate-50" disabled>
                           {t("build.added")}
                         </Button>
                       ) : (
                         <Button
                           size="sm"
-                          className="h-6"
+                          className="h-6 text-slate-50"
                           onClick={() => onSelect(flow)}
                         >
                           {t("build.add")}
@@ -88,7 +89,7 @@ export default function SkillSheet({ select, children, onSelect }) {
                 <p className="mb-3 text-sm text-muted-foreground">
                   {t("build.empty")}
                 </p>
-                <Button className="w-[200px]" onClick={toCreateFlow}>
+                <Button className="w-[200px] text-slate-50" onClick={toCreateFlow}>
                   {t("build.createSkill")}
                 </Button>
               </div>

diff --git a/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx b/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx
@@ -35,13 +35,13 @@ export default function ToolsSheet({ select, onSelect, children }) {
             <SheetTrigger asChild>
                 {children}
             </SheetTrigger>
-            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-gray-100">
+            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-background-main">
                 <div className="flex h-full" onClick={e => e.stopPropagation()}>
                     <div className="w-fit p-6">
                         <SheetTitle>{t('build.addTool')}</SheetTitle>
                         <SearchInput placeholder={t('build.search')} className="mt-6" onChange={(e) => setKeyword(e.target.value)} />
                         <Button
-                            className="mt-4 w-full"
+                            className="mt-4 w-full text-slate-50"
                             onClick={() => window.open(__APP_ENV__.BASE_URL + "/build/tools")}
                         >
                             {t('create')}{t("tools.createCustomTool")}
@@ -63,7 +63,7 @@ export default function ToolsSheet({ select, onSelect, children }) {
                             </div>
                         </div>
                     </div>
-                    <div className="flex-1 bg-[#fff] p-5 pt-12 h-full overflow-auto scrollbar-hide">
+                    <div className="flex-1 bg-background-login p-5 pt-12 h-full overflow-auto scrollbar-hide">
                         <Accordion type="single" collapsible className="w-full">
                             {
                                 options.length ? options.map(el => (

diff --git a/src/frontend/src/components/bs-icons/down/DropDown.svg b/src/frontend/src/components/bs-icons/down/DropDown.svg
diff --git a/src/frontend/src/components/bs-icons/en/En.svg b/src/frontend/src/components/bs-icons/en/En.svg
diff --git a/src/frontend/src/components/ui/tabs.tsx b/src/frontend/src/components/ui/tabs.tsx
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "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 bg-background-main dark:text-[#ECECEC] 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/layout/BuildLayout.tsx b/src/frontend/src/layout/BuildLayout.tsx
@@ -9,20 +9,20 @@ export default function BuildLayout(params) {
     return <div className="bg-background-main">
         <div className="build-tab flex justify-center h-[60px] items-center border-b relative top-[-60px]">
             <div className="px-4">
-                <NavLink to={'assist'} className="group flex gap-2 items-center px-8 py-2 rounded-md">
-                    <TabIcon className="group-hover:text-primary"></TabIcon>
+                <NavLink to={'assist'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
+                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
                     <span className="text-sm font-bold">{t('build.assistant')}</span>
                 </NavLink>
             </div>
             <div className="px-4">
-                <NavLink to={'skills'} className="group flex gap-2 items-center px-8 py-2 rounded-md">
-                    <TabIcon className="group-hover:text-primary"></TabIcon>
+                <NavLink to={'skills'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
+                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
                     <span className="text-sm font-bold">{t('build.skill')}</span>
                 </NavLink>
             </div>
             <div className="px-4">
-                <NavLink to={'tools'} className="group flex gap-2 items-center px-8 py-2 rounded-md">
-                    <TabIcon className="group-hover:text-primary"></TabIcon>
+                <NavLink to={'tools'} className="group flex gap-2 items-center px-8 py-2 rounded-md navlink dark:hover:text-[#FFFFFF]">
+                    <TabIcon className="group-hover:text-primary dark:group-hover:text-[#FFFFFF] group-visited:text-[#666666]"></TabIcon>
                     <span className="text-sm font-bold">{t('build.tools')}</span>
                 </NavLink>
             </div>

diff --git a/src/frontend/src/layout/MainLayout.tsx b/src/frontend/src/layout/MainLayout.tsx
@@ -84,7 +84,7 @@ export default function MainLayout() {
                                 <TooltipTrigger className="h-8 w-8 bg-header-icon rounded-lg cursor-pointer my-4" onClick={() => setDark(!dark)}>
                                     <div className="">
                                         {dark ? (
-                                            <SunIcon className="side-bar-button-size mx-auto w-[13px] h-[13px]" />
+                                            <SunIcon className="side-bar-button-size dark:text-slate-50 mx-auto w-[13px] h-[13px]" />
                                         ) : (
                                             <MoonIcon className="side-bar-button-size mx-auto w-[17px] h-[17px]" />
                                         )}
@@ -99,8 +99,8 @@ export default function MainLayout() {
                                 <TooltipTrigger className="h-8 w-8 bg-header-icon rounded-lg cursor-pointer my-4" onClick={changLanguage}>
                                     <div className="">
                                         {language === 'en'
-                                            ? <EnIcon className="side-bar-button-size mx-auto w-[19px] h-[19px]" />
-                                            : <Globe className="side-bar-button-size mx-auto w-[17px] h-[17px]" />}
+                                            ? <EnIcon className="side-bar-button-size dark:text-slate-50 mx-auto w-[19px] h-[19px]" />
+                                            : <Globe className="side-bar-button-size dark:text-slate-50 mx-auto w-[17px] h-[17px]" />}
                                     </div>
                                 </TooltipTrigger>
                                 <TooltipContent><p>{options[language]}</p></TooltipContent>
@@ -109,11 +109,12 @@ export default function MainLayout() {
                         <Separator className="mx-[23px] h-6 border-l my-5 border-[#dddddd]" orientation="vertical" />
                     </div>
                     <div className="flex items-center h-7 my-4">
+                        {/* @ts-ignore */}
                         <img className="h-7 w-7 rounded-2xl mr-4" src={__APP_ENV__.BASE_URL + '/user.png'} alt="" />
                         <SelectHover
                             triagger={
                                 <span className="leading-8 text-[14px] mr-8 max-w-40 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
-                                    {user.user_name} <DropDownIcon className=" inline-block mt-[-2px]" />
+                                    {user.user_name} <DropDownIcon className="inline-block mt-[-2px] dark:text-slate-50" />
                                 </span>
                             }>
                             <SelectHoverItem onClick={JumpResetPage}><LockClosedIcon className="w-4 h-4 mr-1" /><span>{t('menu.changePwd')}</span></SelectHoverItem>