style:样式优化

public/i18n/lang-en.json

@@ -65,6 +65,23 @@
     "delete": "Delete",
     "online": "Online",
     "offline": "Offline",
+
+    "delete_success": "Deletion Successful",
+    "delete_fail": "Deletion Failed",
+    "create_success": "Creation Successful",
+    "create_fail": "Creation Failed",
+    "edit_success": "Edit Successful",
+    "edit_fail": "Edit Failed",
+    "no_permission": "No Permission",
+    "empty_tip": "Name cannot be empty",
+    "empty_tip_request": "Please fill in the required fields",
+    "rules": {
+      "name_rule": "Name cannot be empty",
+      "system_rule": "System cannot be empty",
+      "lim_rule": "Model cannot be empty",
+      "kb_rule": "Knowledge base cannot be empty"
+    },
+
     "createUser": "Create User",
     "addedModel": "Added Models",
     "unaddModel": "Models to be Added",
@@ -142,6 +159,12 @@
     "select_delete": "Delete",
     "tips_fresh": "Refresh",
     "tips_density": "Density",
+    "font_size": {
+      "mini": "迷你",
+      "small": "偏小",
+      "medium": "中等",
+      "large": "偏大"
+    },
     "search_placeholder": "Search",
     "create_file": "Create file",
     "upload_file": "Upload file",
@@ -216,7 +239,17 @@
     "label_parser": "Parsing Method",
     "label_layout": "Layout Recognition",
     "label_prompt_placeholder": "Please fill in the prompt",
-    "save_btn": "Save"
+    "save_btn": "Save",
+    "config_info": {
+      "h4_1": "Block Method Description",
+      "h4_2": "Example",
+      "h4_3": "Dialogue Example",
+      "p_1_1": "Supported file formats are",
+      "p_1_2": "This method applies a simple approach to block files:",
+      "p_1_3": "The system will use a visual detection model to split continuous text into multiple segments.",
+      "p_1_4": "Next, these continuous segments are combined into blocks with a token count not exceeding 'Token Count'.",
+      "p_2_1": "The following screenshots are provided to aid understanding."
+    }
   },
   "permission": {
     "query": "Query",

public/i18n/lang-zh.json

@@ -65,6 +65,23 @@
     "delete": "删除",
     "online": "上线",
     "offline": "下线",
+
+    "delete_success": "删除成功",
+    "delete_fail": "删除失败",
+    "create_success": "创建成功",
+    "create_fail": "创建失败",
+    "edit_success": "修改成功",
+    "edit_fail": "修改失败",
+    "no_permission": "没有权限",
+    "empty_tip": "名称不能为空",
+    "empty_tip_request": "请填写必填项",
+    "rules": {
+      "name_rule": "名称不允许为空",
+      "system_rule": "系统不能为空",
+      "lim_rule": "模型不能为空",
+      "kb_rule": "知识库不能为空"
+    },
+
     "createUser": "创建用户",
     "addedModel": "添加了的模型",
     "unaddModel": "待添加的模型",
@@ -216,7 +233,17 @@
     "label_parser": "解析方法",
     "label_layout": "布局识别",
     "label_prompt_placeholder": "请填写提示词",
-    "save_btn": "保存"
+    "save_btn": "保存",
+    "config_info": {
+      "h4_1": "分块方法说明",
+      "h4_2": "示例",
+      "h4_3": "对话示例",
+      "p_1_1": "支持的文件格式为",
+      "p_1_2": "此方法将简单的方法应用于块文件：",
+      "p_1_3": "系统将使用视觉检测模型将连续文本分割成多个片段。",
+      "p_1_4": "接下来，这些连续的片段被合并成Token数不超过“Token数”的块。",
+      "p_2_1": "提出以下屏幕截图以促进理解。"
+    }
   },
   "permission": {
     "query": "查询",

src/base/theme/theme-dark.css

@@ -1,2 +1,3 @@
 html body[dmx-theme='dark'] {
+  --color-link-1: #165dff;
 }

src/base/theme/theme-light.css

@@ -10,4 +10,6 @@ html body[dmx-theme='light'] {
   --color-fill-2: #f0f2f5;
   /* --color-fill-3: #f0f2f5;
   --color-fill-4: #f0f2f5; */
+
+  --color-link-1: #165dff;
 }

src/modules/intelligent/CardDefault.vue

@@ -38,7 +38,7 @@ const props = defineProps({
 </script>
 <style scoped lang="css">
 .card-default {
-  border: 1px solid var(--color-neutral-3);
+  border: 1px solid var(--color-border-2);
   padding: 20px;
 }
 .header {
@@ -56,6 +56,6 @@ const props = defineProps({
 .section {
   margin: 20px 0;
   height: 90px;
-  color: var(--color-neutral-8);
+  color: var(-color-text-3);
 }
 </style>

src/modules/intelligent/LabelSelected.vue

@@ -48,13 +48,16 @@ const handleToAdd = (checkedList) => {
 <style scoped lang="css">
 .footer {
   display: flex;
-  border-top: 1px solid var(--color-neutral-4);
+  border-top: 1px solid var(--color-border-3);
 }
 .footer .label-manage {
   margin-top: 10px;
   cursor: pointer;
 }
 .arco-input-wrapper {
-  background-color: var(--color-neutral-2);
+  background-color: var(--color-fill-2);
+}
+.arco-input-wrapper:hover {
+  background-color: var(--color-fill-3);
 }
 </style>

src/modules/intelligent/ManageTags.vue

@@ -114,6 +114,6 @@ const handleAdd = async () => {
 </script>
 <style scoped lang="css">
 .arco-input-wrapper {
-  background-color: var(--color-neutral-2);
+  background-color: var(--color-fill-2);
 }
 </style>

src/modules/intelligent/ModalAddIntel.vue

@@ -92,6 +92,6 @@ const addNewIntelligent = (item) => {
   color: var(--color-bg-1);
 }
 .arco-form-item-content-wrapper {
-  border-color: var(--color-neutral-4);
+  border-color: var(--color-border-3);
 }
 </style>

src/modules/intelligent/ModalSelectIcon.vue

@@ -372,14 +372,14 @@ watch(
   margin-top: 10px;
 }
 .icon-border {
-  border: 1px solid var(--color-neutral-2);
+  border: 1px solid var(--color-border-1);
   border-radius: 5px;
   padding: 5px 8px 0px 8px;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .icon-border:hover {
-  border: 1px solid var(--color-neutral-4);
+  border: 1px solid var(--color-border-3);
   border-radius: 5px;
   transform: scale(1.05);
 }
@@ -388,11 +388,14 @@ watch(
   height: 44px;
 }
 .icon-border-active {
-  border: 1px solid var(--color-neutral-4);
+  border: 1px solid var(--color-border-3);
   transform: scale(1.1);
 }
 .arco-input-wrapper {
   height: 32px;
-  background-color: var(--color-neutral-3);
+  background-color: var(--color-border-2);
+}
+.arco-input-wrapper:hover {
+  background-color: var(--color-border-3);
 }
 </style>

src/modules/intelligent/ModelAddItem.vue

@@ -29,6 +29,10 @@ import { createDialog } from '../../apis/intelligent';
 import { dialogType } from '../../views/manage/common';
 import { getIconIntelligent } from '../common/icon-map.js';
 import { Message } from '@arco-design/web-vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const props = defineProps({
   show_model_item: {
     type: Boolean,
@@ -77,7 +81,8 @@ const handleOk = () => {
         }
       })
       .catch((err) => {
-        console.log('新建失败', err);
+        // 新建失败
+        console.log(t('management.create_fail'), err);
       })
       .finally(() => {});
   }
@@ -88,14 +93,15 @@ const createOwnDialog = async (data) => {
     if (res.code == 200) {
       handleCancel();
       emit('updateIntelligentList');
-      Message.success('新建成功');
+      // 新建成功
+      Message.success(t('management.create_success'));
       // 新建成功进入dify详情页
       router.push({ path: '/intelligent/detail', query: { id: data.id, name: data.name, mode: data.mode } });
     } else {
-      Message.error('新建失败');
+      Message.error(t('management.create_fail'));
     }
   } catch (err) {
-    console.log('创建失败', err);
+    console.log(t('management.create_fail'), err);
   }
 };
 const handleCancel = () => {
@@ -128,9 +134,9 @@ const handleSelectIcon = () => {
 }
 .arco-input-wrapper {
   height: 32px;
-  background-color: var(--color-neutral-2);
+  background-color: var(--color-fill-2);
 }
 .arco-input-wrapper:hover {
-  background-color: var(--color-neutral-3);
+  background-color: var(--color-fill-3);
 }
 </style>

src/modules/intelligent/TopSetting.vue

@@ -158,13 +158,13 @@ const sendIcon = (icon) => {
   updateOwnIntelligentIcon(edit_icon_data.value.id, target_icon.value)
     .then((res) => {
       if (res.code == 200) {
-        Message.success('修改成功');
+        Message.success(t('management.edit_success'));
       } else {
-        Message.error('修改失败');
+        Message.error(t('management.edit_fail'));
       }
     })
     .catch(() => {
-      Message.error('修改失败');
+      Message.error(t('management.edit_fail'));
     })
     .finally(() => {
       target_icon.value = '';

src/modules/intelligent/rgflow/AgentConfig.vue

@@ -410,32 +410,34 @@ const handleSuccess = (urls) => {
   form.icon = urls[0];
 };
 
-const rules = {
-  name: [
-    {
-      required: true,
-      message: '名称不允许为空'
-    }
-  ],
-  'prompt_config.system': [
-    {
-      required: true,
-      message: '系统不允许为空'
-    }
-  ],
-  llm_id: [
-    {
-      required: true,
-      message: '模型不能为空'
-    }
-  ],
-  kb_ids: [
-    {
-      required: true,
-      message: '知识库不能为空'
-    }
-  ]
-};
+const rules = computed(() => {
+  return {
+    name: [
+      {
+        required: true,
+        message: t('management.rules.name_rule')
+      }
+    ],
+    'prompt_config.system': [
+      {
+        required: true,
+        message: t('management.rules.system_rule')
+      }
+    ],
+    llm_id: [
+      {
+        required: true,
+        message: t('management.rules.lim_rule')
+      }
+    ],
+    kb_ids: [
+      {
+        required: true,
+        message: t('management.rules.kb_rule')
+      }
+    ]
+  };
+});
 
 const handleUploadIcon = () => {
   emit('show_select_icon');
@@ -502,7 +504,7 @@ const handleBeforeOk = async (done) => {
     // console.log('res:', res)
   });
   if (form.name && form.kb_ids.length > 0 && form.prompt_config.system && form.llm_id) {
-    let title = '创建成功';
+    let title = t('management.create_success');
     let formNew = { ...form };
     if (formNew.rerank_id) {
       delete formNew.top_k;
@@ -523,7 +525,7 @@ const handleBeforeOk = async (done) => {
       formNew.dialog_id = form.id;
       delete formNew.id;
       delete formNew.off;
-      title = '修改成功';
+      title = t('management.edit_success');
     }
 
     if (!max_tokens.value) {
@@ -552,7 +554,7 @@ const handleBeforeOk = async (done) => {
           Message.success(title);
         }
       } else {
-        Message.error('创建失败');
+        Message.error(t('management.create_fail'));
       }
       done(true);
       setLoading(false);
@@ -561,7 +563,7 @@ const handleBeforeOk = async (done) => {
       setLoading(false);
     }
   } else {
-    Message.warning('请填写必填项');
+    Message.warning(t('management.empty_tip_request'));
     done(false);
   }
 };
@@ -666,7 +668,7 @@ defineExpose({
   width: 44px;
   height: 44px;
   border-radius: 5px;
-  border: 1px dashed var(--color-neutral-6);
+  border: 1px dashed var(--color-border-4);
   cursor: pointer;
   .icon {
     color: var(--color-neutral-6);

src/modules/knowledge/MessageBody.vue

@@ -44,8 +44,10 @@ import { funcThrottle } from '../../utils/utils';
 import { getKnowledgeList, deleteOwnKnowledge } from '../../apis/knowledge';
 import { deleteKnow } from '../../apis/rgflow-dify.js';
 import { bus_knowledgeSearch, bus_knowledgeIconEdit } from '../../base/event-bus';
+import { useI18n } from 'vue-i18n';
 
 const router = useRouter();
+const { t } = useI18n();
 
 const moke_data = ref([
   // {
@@ -94,7 +96,8 @@ const toRemove = (item) => {
       if (data.retcode == 0) {
         deleteOwnKnow(item.id);
       } else {
-        Message.error('没有权限');
+        // 没有权限
+        Message.error(t('management.no_permission'));
       }
     },
     onCancel: () => {}

src/modules/knowledge/ModalCreateKb.vue

@@ -30,6 +30,9 @@ import { createKb } from '../../apis/rgflow-dify';
 import { createOwnKnowledge } from '../../apis/knowledge';
 import { dialogType } from '../../views/manage/common';
 import { getImageKnowLedge } from '../common/icon-map.js';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   visible: {
@@ -59,11 +62,13 @@ const handleOk = () => {
     // TODO：添加知识库b
     createKnowledgeBase();
   } else {
-    Message.warning('名称不能为空');
+    Message.warning(t('management.empty_tip'));
   }
 };
 const handleCancel = () => {
   form.value.name = '';
+  form.value.description = '';
+  form.value.icon = '';
   emit('update:visible', false);
 };
 const createKnowledgeBase = async () => {
@@ -87,7 +92,8 @@ const createOwnKnowledgeBase = async (data) => {
       bus_knowledgeSearch.emit('');
       form.value = Object.assign({}, formInit);
       emit('update:visible', false);
-      Message.success('创建成功');
+      // 创建成功
+      Message.success(t('management.create_success'));
       // TODO 进入知识库详情页面
       router.push({
         path: '/knowledge/detail',
@@ -99,7 +105,8 @@ const createOwnKnowledgeBase = async (data) => {
     }
   } catch (error) {
     console.log('创建知识库失败', error);
-    Message.error('创建失败');
+    // 创建失败
+    Message.error(t('management.create_fail'));
   }
 };
 const handleSelectIcon = () => {
@@ -127,9 +134,9 @@ const handleSelectIcon = () => {
 }
 .arco-input-wrapper {
   height: 32px;
-  background-color: var(--color-neutral-2);
+  background-color: var(--color-fill-2);
 }
 .arco-input-wrapper:hover {
-  background-color: var(--color-neutral-3);
+  background-color: var(--color-fill-3);
 }
 </style>

src/modules/knowledge/ModalSelectIcon.vue

@@ -66,7 +66,7 @@ const changeItem = (id) => {
 };
 const handleBeforeOk = (done) => {
   emit('sendIcon', icons.value.filter((icon) => icon.id === target_icon_id.value)[0].name);
-  handleCancel();
+  emit('update:show_select_icon', false);
   done();
 };
 const handleCancel = () => {
@@ -99,7 +99,7 @@ watch(
   margin-top: 10px;
 }
 .icon-border {
-  border: 1px solid var(--color-neutral-2);
+  border: 1px solid var(--color-border-1);
 
   border-radius: 5px;
   padding: 5px 8px 0px 8px;
@@ -107,7 +107,7 @@ watch(
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .icon-border:hover {
-  border: 1px solid var(--color-neutral-4);
+  border: 1px solid var(--color-border-3);
   border-radius: 5px;
   transform: scale(1.05);
 }
@@ -116,11 +116,11 @@ watch(
   height: 44px;
 }
 .icon-border-active {
-  border: 1px solid var(--color-neutral-4);
+  border: 1px solid var(--color-border-3);
   transform: scale(1.1);
 }
 .arco-input-wrapper {
   height: 32px;
-  background-color: var(--color-neutral-3);
+  background-color: var(--color-border-2);
 }
 </style>

src/modules/knowledge/TopSetting.vue

@@ -35,6 +35,9 @@ import ModalSelectIcon from './ModalSelectIcon.vue';
 import { funcDebounce } from '../../utils/utils';
 import { bus_knowledgeSearch, bus_knowledgeIconEdit } from '../../base/event-bus';
 import { updateOwnKnowledgeIcon } from '../../apis/knowledge';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const searchText = ref('');
 // 模态框控制
@@ -60,19 +63,21 @@ const selectIcon = () => {
   show_select_icon.value = true;
 };
 const sendIcon = (icon) => {
+  console.log(icon);
   target_icon.value = icon;
+  console.log(target_icon);
   if (!edit_icon_data.value) return;
   // 编辑
   updateOwnKnowledgeIcon(edit_icon_data.value.id, target_icon.value)
     .then((res) => {
       if (res.code == 200) {
-        Message.success('修改成功');
+        Message.success(t('management.edit_success'));
       } else {
-        Message.error('修改失败');
+        Message.error(t('management.edit_fail'));
       }
     })
     .catch(() => {
-      Message.error('修改失败');
+      Message.error(t('management.edit_fail'));
     })
     .finally(() => {
       target_icon.value = '';
@@ -83,6 +88,7 @@ const sendIcon = (icon) => {
 };
 const clearTargetIcon = () => {
   target_icon.value = '';
+  edit_icon_data.value = null;
 };
 
 bus_knowledgeIconEdit.on((item) => {

src/modules/knowledge/rgflow/knowledgeLib/config.vue

@@ -117,24 +117,29 @@
         data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
         class="categoryPanelWrapper___yI4rY"
       >
+        <!-- "General" 分块方法说明 -->
         <h4
           class="ant-typography topTitle___tNiB9 css-dev-only-do-not-override-1wxecgq"
           data-inspector-line="37"
           data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
         >
-          "General" 分块方法说明
+          "General" {{ $t('knowledgeLib.config_info.h4_1') }}
         </h4>
         <p
           data-inspector-line="40"
           data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
         ></p>
-        <p>支持的文件格式为<b>DOCX、EXCEL、PPT、IMAGE、PDF、TXT</b>。</p>
-        <p>此方法将简单的方法应用于块文件：</p>
+        <!-- 支持的文件格式为<b>DOCX、EXCEL、PPT、IMAGE、PDF、TXT</b>。 -->
+        <p>{{ $t('knowledgeLib.config_info.p_1_1') }}<b>DOCX、EXCEL、PPT、IMAGE、PDF、TXT</b>。</p>
+        <!-- 此方法将简单的方法应用于块文件： -->
+        <p>{{ $t('knowledgeLib.config_info.p_1_2') }}</p>
         <p></p>
-        <li>系统将使用视觉检测模型将连续文本分割成多个片段。</li>
-        <li>接下来，这些连续的片段被合并成Token数不超过“Token数”的块。</li>
+        <!-- 系统将使用视觉检测模型将连续文本分割成多个片段。  -->
+        <li>{{ $t('knowledgeLib.config_info.p_1_3') }}</li>
+        <!-- 接下来，这些连续的片段被合并成Token数不超过“Token数”的块。 -->
+        <li>{{ $t('knowledgeLib.config_info.p_1_4') }}</li>
         <p></p>
         <h4
           class="ant-typography css-dev-only-do-not-override-1wxecgq"
@@ -142,15 +147,18 @@
           data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
         >
-          "General" 示例
+          <!--  示例 -->
+          "General" {{ $t('knowledgeLib.config_info.h4_2') }}
         </h4>
         <span
           class="ant-typography css-dev-only-do-not-override-1wxecgq"
           data-inspector-line="48"
           data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
-          >提出以下屏幕截图以促进理解。</span
         >
+          <!-- 提出以下屏幕截图以促进理解。 -->
+          {{ $t('knowledgeLib.config_info.p_2_1') }}
+        </span>
         <div
           data-inspector-line="49"
           data-inspector-column="10"
@@ -181,7 +189,8 @@
           data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
         >
-          General 对话示例
+          <!-- General 对话示例 -->
+          General {{ $t('knowledgeLib.config_info.h4_3') }}
         </h4>
         <div
           class="ant-divider css-dev-only-do-not-override-1wxecgq ant-divider-horizontal"
@@ -481,7 +490,6 @@ export default {
       height: 40px;
       line-height: 40px;
       border-bottom: 1px solid var(--color-fill-3);
-      //background: rgb(var(--primary-6));
       color: #999999;
       text-align: center;
     }

src/modules/knowledge/rgflow/knowledgeLib/index.vue

@@ -147,7 +147,7 @@
                   @selection-change="selectTabChange"
                 >
                   <template #name="{ record }">
-                    <a-link @click="handlePreview(record.id)">
+                    <a-link @click="handlePreview(record)">
                       <icon-file style="margin-right: 4px" />
                       {{ record.name }}
                     </a-link>
@@ -474,19 +474,19 @@ const pagination = reactive({
 });
 const densityList = computed(() => [
   {
-    name: '迷你',
+    name: t('knowledgeLib.font_size.mini'),
     value: 'mini'
   },
   {
-    name: '偏小',
+    name: t('knowledgeLib.font_size.small'),
     value: 'small'
   },
   {
-    name: '中等',
+    name: t('knowledgeLib.font_size.medium'),
     value: 'medium'
   },
   {
-    name: '偏大',
+    name: t('knowledgeLib.font_size.large'),
     value: 'large'
   }
 ]);
@@ -949,8 +949,10 @@ const changeFetchData = async (row) => {
   });
 };
 
-const handlePreview = (doc_id) => {
-  window.open(`${window.RGFLOW_BASE_URL}/document/${doc_id}?ext=docx&prefix=document`);
+const handlePreview = (file) => {
+  if (file.type == 'doc') {
+    window.open(`${window.RGFLOW_BASE_URL}/document/${file.id}?ext=docx&prefix=document`);
+  }
 };
 
 watch(

src/modules/login/FormItem.vue

@@ -166,18 +166,19 @@ const changeFormType = (e, type) => {
   right: 20px;
   bottom: 70px;
   font-size: 20px;
-  color: var(--color-neutral-4);
+  color: var(--color-border-3);
 }
 .tips-login {
   position: absolute;
   right: 20px;
   bottom: 30px;
   font-size: 20px;
-  color: var(--color-neutral-4);
+  color: var(--color-border-3);
 }
 
 .reg-link {
-  color: rgb(var(--arcoblue-6));
+  color: var(--color-link-1);
+  text-decoration: underline;
 }
 .arco-form {
   margin-top: 90px;
@@ -190,7 +191,7 @@ const changeFormType = (e, type) => {
 .arco-input-wrapper {
   height: 54px;
   background-color: var(--color-bg-1);
-  border-color: var(--color-neutral-3);
+  border-color: var(--color-border-2);
 }
 
 :deep(.arco-form-item-label-col > .arco-form-item-label) {

src/modules/model/MessageBody.vue

@@ -200,6 +200,7 @@ const showMoreModel = (item) => {
 .title {
   font-size: 16px;
   font-weight: bold;
+  color: var(--color-text-1);
 }
 .card-list {
   display: grid;
@@ -207,7 +208,7 @@ const showMoreModel = (item) => {
   gap: 20px;
   transition: all 0.3s ease;
   .labels {
-    color: var(--color-neutral-6);
+    color: var(--color-text-3);
   }
   .desc {
     font-size: 14px;

src/modules/model/ModelList.vue

@@ -92,7 +92,7 @@ const showMoreModel = (item) => {
 }
 .delete-icon {
   font-size: 20px;
-  color: rgb(var(--orange-5));
+  color: var(--warning-5);
   cursor: pointer;
 }
 .list-collapse {

src/views/Login.vue

@@ -70,8 +70,8 @@ import FormItem from '../modules/login/FormItem.vue';
   gap: 20px;
   width: 500px;
   height: 512px;
-  background-color: var(--color-bg-white);
+  background-color: var(--color-bg-1);
   border-radius: 10px;
-  box-shadow: 0 0 1px var(--color-neutral-6);
+  box-shadow: 0 0 1px var(--color-border-4);
 }
 </style>

src/views/manage/CardItem.vue

@@ -57,7 +57,7 @@ const handleClickIcon = () => {
   cursor: pointer;
 }
 .card-container:hover {
-  box-shadow: 0 0 10px var(--color-neutral-4);
+  box-shadow: 0 0 10px var(--color-border-3);
 }
 .card-name .name {
   margin-top: 10px;