restore color for light mode

isthaison · Nov 29, 2024 · 6e4f401 · 6e4f401
1 parent 619ee59
commit 6e4f401
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 8 deletions.
diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less
@@ -27,7 +27,7 @@
   .titleWrapper {
     margin: 16px 0;
     overflow: hidden;
-    
+
     .title {
       display: -webkit-box;
       -webkit-line-clamp: 2;
@@ -39,8 +39,8 @@
       color: rgba(0, 0, 0, 0.88);
       word-break: break-all;
     }
-    
-    .description{
+
+    .description {
       margin-top: 4px;
       display: -webkit-box;
       -webkit-line-clamp: 3;
@@ -51,6 +51,27 @@
       line-height: 20px;
       color: rgba(0, 0, 0, 0.45);
     }
+    .titledark {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      word-break: break-all;
+    }
+
+    .descriptiondark {
+      margin-top: 4px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+    }
   }
 }
 

diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
+import { useTheme } from '@/components/theme-provider';
 import { useDeleteKnowledge } from '@/hooks/knowledge-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
@@ -24,7 +25,7 @@ const KnowledgeCard = ({ item }: IProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { data: userInfo } = useFetchUserInfo();
-
+  const { theme } = useTheme();
   const { deleteKnowledge } = useDeleteKnowledge();
 
   const removeKnowledge = async () => {
@@ -52,8 +53,18 @@ const KnowledgeCard = ({ item }: IProps) => {
             <OperateDropdown deleteItem={removeKnowledge}></OperateDropdown>
           </div>
           <div className={styles.titleWrapper}>
-            <span className={styles.title}>{item.name}</span>
-            <p className={styles.description}>{item.description}</p>
+            <span
+              className={theme === 'dark' ? styles.titledark : styles.title}
+            >
+              {item.name}
+            </span>
+            <p
+              className={
+                theme === 'dark' ? styles.descriptiondark : styles.description
+              }
+            >
+              {item.description}
+            </p>
           </div>
           <div className={styles.footer}>
             <div className={styles.footerTop}>

diff --git a/web/src/pages/user-setting/setting-model/index.less b/web/src/pages/user-setting/setting-model/index.less
@@ -13,6 +13,18 @@
     padding-top: 10px;
   }
   .toBeAddedCard {
+    border-radius: 24px;
+    border: 1px solid #eaecf0;
+    background: #e3f0ff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    :global(.ant-card-body) {
+      padding: 10px 24px;
+    }
+    .addButton {
+      padding: 0;
+    }
+  }
+  .toBeAddedCardDark {
     border-radius: 24px;
     border: 1px solid #eaecf0;
     background: #e3f0ff2a;
@@ -25,6 +37,12 @@
     }
   }
   .addedCard {
+    border-radius: 18px;
+    border: 1px solid #eaecf0;
+    background: #e6e7eb;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+  .addedCardDark {
     border-radius: 18px;
     border: 1px solid #eaecf0;
     background: #e6e7eb21;

diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx
@@ -1,5 +1,6 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
 import { LlmIcon } from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
 import { CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
@@ -61,6 +62,7 @@ interface IModelCardProps {
 const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
   const { visible, switchVisible } = useSetModalState();
   const { t } = useTranslate('setting');
+  const { theme } = useTheme();
   const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
   const { handleDeleteFactory } = useHandleDeleteFactory(item.name);
 
@@ -74,7 +76,9 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
 
   return (
     <List.Item>
-      <Card className={styles.addedCard}>
+      <Card
+        className={theme == 'dark' ? styles.addedCardDark : styles.addedCard}
+      >
         <Row align={'middle'}>
           <Col span={12}>
             <Flex gap={'middle'} align="center">
@@ -139,6 +143,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
 
 const UserSettingModel = () => {
   const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
+  const { theme } = useTheme();
   const {
     saveApiKeyLoading,
     initialApiKey,
@@ -313,7 +318,13 @@ const UserSettingModel = () => {
           dataSource={factoryList}
           renderItem={(item) => (
             <List.Item>
-              <Card className={styles.toBeAddedCard}>
+              <Card
+                className={
+                  theme === 'dark'
+                    ? styles.toBeAddedCardDark
+                    : styles.toBeAddedCard
+                }
+              >
                 <Flex vertical gap={'middle'}>
                   <LlmIcon name={item.name} />
                   <Flex vertical gap={'middle'}>