From bc26024bcc41d815eb00d2f5e5244bbef83665b3 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 29 Aug 2025 17:55:56 +0800
Subject: [PATCH] perf: style

---
 ui/src/layout/components/breadcrumb/index.vue |  2 +-
 ui/src/styles/element-plus.scss               | 23 +++++++++++++++++++
 ui/src/styles/md-editor.scss                  |  6 +++++
 ui/src/views/application/index.vue            |  2 +-
 ui/src/views/document/component/Status.vue    | 10 ++++----
 .../views/document/component/StatusTable.vue  | 21 +++++++++--------
 ui/src/views/document/index.vue               |  4 ++--
 .../component/KnowledgeListContainer.vue      |  2 +-
 .../chat-user/component/UserDrawer.vue        |  4 +---
 .../system-chat-user/chat-user/index.vue      |  4 ++--
 .../ApplicationResourceIndex.vue              |  4 ++--
 .../ToolResourceIndex.vue                     |  4 ++--
 ui/src/views/system/user-manage/index.vue     |  4 ++--
 13 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index 73698ce34..019066168 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumb ml-4 mt-4 mb-12 flex">
+  <div class="breadcrumb ml-4 mt-4 mb-12 flex align-center">
     <back-button  @click="toBack"></back-button>
     <div class="flex align-center">
       <el-avatar
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 56da129e3..f5df414ee 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -248,6 +248,11 @@
   color: var(--el-text-color-primary);
 }
 
+.el-form-item__content {
+  font-weight: 400 !important;
+  color: var(--el-text-color-primary);
+}
+
 .el-form-item__error {
   position: unset;
   font-size: 14px;
@@ -285,6 +290,20 @@
   font-weight: 400;
 }
 
+// el-select
+.el-select__selected-item {
+  color: var(--el-text-color-primary);
+  font-weight: 400;
+}
+.el-select__caret {
+  color: var(--app-text-color-secondary);
+}
+
+// el-textarea
+.el-textarea {
+  --el-input-text-color: var(--el-text-color-primary);
+}
+
 // el-input
 .el-input {
   --el-input-text-color: var(--el-text-color-primary);
@@ -304,6 +323,9 @@
 .el-pagination .el-select {
   width: 105px;
 }
+.el-pagination__total {
+  color: var(--el-text-color-primary);
+}
 
 // el-checkbox
 .el-checkbox {
@@ -317,6 +339,7 @@
 // el-radio
 .el-radio {
   --el-radio-font-weight: 400;
+  color: var(--el-text-color-primary);
 }
 .el-radio__input.is-checked + .el-radio__label {
   color: var(--el-text-color-primary);
diff --git a/ui/src/styles/md-editor.scss b/ui/src/styles/md-editor.scss
index 9a19f1fef..cea5fd07c 100644
--- a/ui/src/styles/md-editor.scss
+++ b/ui/src/styles/md-editor.scss
@@ -1,5 +1,10 @@
 .md-editor {
   font-weight: 400;
+  --md-color: var(--el-text-color-primary);
+  .cm-content {
+    font-weight: 400;
+    color: var(--el-text-color-primary);
+  }
 }
 
 .md-editor-preview {
@@ -7,6 +12,7 @@
   margin: 0;
   font-size: inherit;
   word-break: break-word;
+  color: var(--el-text-color-primary);
   table {
     display: block;
   }
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index c8b85a0d7..f8049773f 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -195,7 +195,7 @@
                     </el-avatar>
                   </template>
                   <template #subTitle>
-                    <el-text class="color-secondary" size="small">
+                    <el-text class="color-secondary lighter" size="small">
                       <auto-tooltip :content="item.username">
                         {{ $t('common.creator') }}: {{ item.nick_name }}
                       </auto-tooltip>
diff --git a/ui/src/views/document/component/Status.vue b/ui/src/views/document/component/Status.vue
index db9bc177b..c587a3935 100644
--- a/ui/src/views/document/component/Status.vue
+++ b/ui/src/views/document/component/Status.vue
@@ -15,23 +15,23 @@
       ></StatusTable>
     </template>
     <template #reference>
-      <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
+      <el-text class="color-text-primary" v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
         <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
-      <el-text v-else-if="aggStatus?.value === State.FAILURE">
+      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.FAILURE">
         <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
-      <el-text v-else-if="aggStatus?.value === State.STARTED">
+      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.STARTED">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
-      <el-text v-else-if="aggStatus?.value === State.PENDING">
+      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.PENDING">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
-      <el-text v-else-if="aggStatus?.value === State.REVOKE">
+      <el-text class="color-text-primary" v-else-if="aggStatus?.value === State.REVOKE">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
diff --git a/ui/src/views/document/component/StatusTable.vue b/ui/src/views/document/component/StatusTable.vue
index 3f9a9b4ad..c4d8fbec2 100644
--- a/ui/src/views/document/component/StatusTable.vue
+++ b/ui/src/views/document/component/StatusTable.vue
@@ -1,24 +1,27 @@
 <template>
-  <div v-for="status in statusTable" :key="status.type" >
+  <div v-for="status in statusTable" :key="status.type">
     <span> {{ taskTypeMap[status.type] }}：</span>
     <span>
-      <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED">
+      <el-text
+        class="color-text-primary"
+        v-if="status.state === State.SUCCESS || status.state === State.REVOKED"
+      >
         <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
-      <el-text v-else-if="status.state === State.FAILURE">
+      <el-text class="color-text-primary" v-else-if="status.state === State.FAILURE">
         <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
-      <el-text v-else-if="status.state === State.STARTED">
+      <el-text class="color-text-primary" v-else-if="status.state === State.STARTED">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
-      <el-text v-else-if="status.state === State.PENDING">
+      <el-text class="color-text-primary" v-else-if="status.state === State.PENDING">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
-      <el-text v-else-if="status.state === State.REVOKE">
+      <el-text class="color-text-primary" v-else-if="status.state === State.REVOKE">
         <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
@@ -27,7 +30,7 @@
       class="ml-8 lighter"
       :style="{ color: [State.FAILURE, State.REVOKED].includes(status.state) ? '#F54A45' : '' }"
     >
-    {{ $t('views.document.fileStatus.finish') }}
+      {{ $t('views.document.fileStatus.finish') }}
       {{
         Object.keys(status.aggs ? status.aggs : {})
           .filter((k) => k == State.SUCCESS)
@@ -42,7 +45,7 @@
         status.time
           ? status.time[status.state == State.REVOKED ? State.REVOKED : State.PENDING]?.substring(
               0,
-              19
+              19,
             )
           : undefined
       }}
@@ -100,7 +103,7 @@ const statusTable = computed(() => {
         type: value,
         state: parseStatus.task_status[value],
         aggs: aggs.value[value],
-        time: props.statusMeta.state_time[value]
+        time: props.statusMeta.state_time[value],
       }
     })
     .filter((item) => item.state !== State.IGNORED)
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index f97ef36df..55dc4f2c0 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -283,13 +283,13 @@
                   <el-icon class="color-success mr-8" style="font-size: 16px">
                     <SuccessFilled />
                   </el-icon>
-                  <span class="color-secondary">
+                  <span class="color-text-primary">
                     {{ $t('common.status.enabled') }}
                   </span>
                 </div>
                 <div v-else class="flex align-center">
                   <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-                  <span class="color-secondary">
+                  <span class="color-text-primary">
                     {{ $t('common.status.disabled') }}
                   </span>
                 </div>
diff --git a/ui/src/views/knowledge/component/KnowledgeListContainer.vue b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
index a12a07df3..72b6e19c3 100644
--- a/ui/src/views/knowledge/component/KnowledgeListContainer.vue
+++ b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
@@ -189,7 +189,7 @@
                   <KnowledgeIcon :type="item.type" />
                 </template>
                 <template #subTitle>
-                  <el-text class="color-secondary" size="small">
+                  <el-text class="color-secondary lighter" size="small">
                     {{ $t('common.creator') }}: {{ item.nick_name }}
                   </el-text>
                 </template>
diff --git a/ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue b/ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue
index 19d8966ea..b43f93891 100644
--- a/ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue
+++ b/ui/src/views/system-chat-user/chat-user/component/UserDrawer.vue
@@ -180,7 +180,5 @@ const submit = async (formEl: FormInstance | undefined) => {
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-:deep(.el-form-item__content) {
-  font-weight: 400
-}
+
 </style>
diff --git a/ui/src/views/system-chat-user/chat-user/index.vue b/ui/src/views/system-chat-user/chat-user/index.vue
index 83d47e979..dc8cbb580 100644
--- a/ui/src/views/system-chat-user/chat-user/index.vue
+++ b/ui/src/views/system-chat-user/chat-user/index.vue
@@ -145,13 +145,13 @@
               <el-icon class="color-success mr-8" style="font-size: 16px">
                 <SuccessFilled />
               </el-icon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.enabled') }}
               </span>
             </div>
             <div v-else class="flex align-center">
               <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.disabled') }}
               </span>
             </div>
diff --git a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
index 6f2431008..e18c008e2 100644
--- a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
@@ -130,13 +130,13 @@
               <el-icon class="color-success mr-8" style="font-size: 16px">
                 <SuccessFilled />
               </el-icon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('views.application.status.published') }}
               </span>
             </div>
             <div v-else class="flex align-center">
               <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('views.application.status.unpublished') }}
               </span>
             </div>
diff --git a/ui/src/views/system-resource-management/ToolResourceIndex.vue b/ui/src/views/system-resource-management/ToolResourceIndex.vue
index b202c707c..3ae8927c5 100644
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@@ -89,13 +89,13 @@
               <el-icon class="color-success mr-8" style="font-size: 16px">
                 <SuccessFilled />
               </el-icon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.enabled') }}
               </span>
             </div>
             <div v-else class="flex align-center">
               <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.disabled') }}
               </span>
             </div>
diff --git a/ui/src/views/system/user-manage/index.vue b/ui/src/views/system/user-manage/index.vue
index 4034b058d..11efa7189 100644
--- a/ui/src/views/system/user-manage/index.vue
+++ b/ui/src/views/system/user-manage/index.vue
@@ -106,13 +106,13 @@
               <el-icon class="color-success mr-8" style="font-size: 16px">
                 <SuccessFilled />
               </el-icon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.enabled') }}
               </span>
             </div>
             <div v-else class="flex align-center">
               <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
-              <span class="color-secondary">
+              <span class="color-text-primary">
                 {{ $t('common.status.disabled') }}
               </span>
             </div>