From 347e7c580785e5d4a4ac98ab2e1300b5a2e204cc Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Fri, 19 Sep 2025 00:58:35 +0800
Subject: [PATCH] =?UTF-8?q?style(web):=20=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=BB=86=E8=8A=82=E5=92=8C=E8=B0=83=E6=95=B4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AgentMessageComponent.vue  | 15 +++--
 .../components/ModelProvidersComponent.vue    | 32 +++++------
 web/src/components/ModelSelectorComponent.vue | 25 +--------
 .../components/UserManagementComponent.vue    |  2 +-
 web/src/views/SettingView.vue                 | 55 ++++++++++++++++---
 5 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 4446e8a8..0968a61f 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -577,20 +577,27 @@ const toggleToolCall = (toolCallId) => {
   table {
     width: 100%;
     border-collapse: collapse;
-    margin: 1em 0;
-    font-size: 16px;
+    margin: 2em 0;
+    font-size: 15px;
     display: table;
+    outline: 1px solid var(--gray-100);
+    outline-offset: 14px;
+    border-radius: 12px;
 
+    thead tr th{
+      padding-top: 0;
+    }
 
     thead th,
     tbody th {
       border: none;
-      border-bottom: 1.5px solid var(--gray-400);
+      border-bottom: 1px solid var(--gray-200);
     }
 
     tbody tr:last-child td {
-      border-bottom: 1.5px solid var(--gray-300);
+      border-bottom: 1px solid var(--gray-200);
       border: none;
+      padding-bottom: 0;
     }
   }
 
diff --git a/web/src/components/ModelProvidersComponent.vue b/web/src/components/ModelProvidersComponent.vue
index 006ac4a5..edc9e83b 100644
--- a/web/src/components/ModelProvidersComponent.vue
+++ b/web/src/components/ModelProvidersComponent.vue
@@ -178,7 +178,7 @@
           <div v-if="providerConfig.allModels.length === 0" class="modal-no-models">
             <a-alert v-if="!modelStatus[providerConfig.provider]" type="warning" message="请在 src/.env 中配置对应的 APIKEY，并重新启动服务" />
             <div v-else>
-              <a-alert type="warning" message="该提供商暂未适配获取模型列表的方法，如果需要添加模型，请在 src/static/models.private.yml 中添加。（如没有此文件，则需要手动创建一个）" />
+              <a-alert type="warning" message="该提供商暂未适配获取模型列表的方法，如果需要添加模型，请在 src/static/models.private.yaml 中添加。（如没有此文件，则需要手动创建一个）" />
               <img src="@/assets/pics/guides/how-to-add-models.png" alt="添加模型指引" style="width: 100%; height: 100%; margin-top: 16px;">
             </div>
           </div>
@@ -447,7 +447,7 @@ const filteredModels = computed(() => {
 
 <style lang="less" scoped>
 .model-provider-card {
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-150);
   background-color: white;
   border-radius: 8px;
   margin-bottom: 16px;
@@ -456,13 +456,12 @@ const filteredModels = computed(() => {
   overflow: hidden;
 
   &:hover {
-    border-color: var(--gray-300);
+    border-color: var(--gray-200);
   }
 
   // 自定义模型容器特殊样式
   &.custom-models-card {
     .card-header {
-      border-bottom: 1px solid var(--gray-200);
 
       h3 {
         color: var(--main-color);
@@ -474,7 +473,6 @@ const filteredModels = computed(() => {
   // 已配置provider的样式
   &.configured-provider {
     .card-header {
-      border-bottom: 1px solid var(--gray-200);
 
       .model-icon {
         &.available {
@@ -490,7 +488,7 @@ const filteredModels = computed(() => {
   &.unconfigured-provider {
     .card-header {
       background: #fafafa;
-      border-bottom: 1px solid var(--gray-200);
+      border-bottom: 1px solid var(--gray-150);
 
       h3 {
         color: var(--gray-700);
@@ -511,7 +509,7 @@ const filteredModels = computed(() => {
     align-items: center;
     gap: 12px;
     cursor: pointer;
-    padding: 16px 20px;
+    padding: 8px 16px;
     background: white;
     transition: all 0.3s ease;
 
@@ -551,7 +549,7 @@ const filteredModels = computed(() => {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        border: 1px solid var(--gray-200);
+        border: 1px solid var(--gray-100);
         border-radius: 6px;
       }
 
@@ -613,7 +611,7 @@ const filteredModels = computed(() => {
       transition: all 0.2s ease;
 
       &:hover {
-        background-color: var(--gray-100);
+        background-color: var(--gray-50);
         color: var(--gray-700);
       }
 
@@ -644,13 +642,13 @@ const filteredModels = computed(() => {
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 12px;
     padding: 16px;
-    background: #fafafa;
+    background: var(--gray-10);
 
     // 普通模型卡片样式
     .card-models {
       width: 100%;
       border-radius: 6px;
-      border: 1px solid var(--gray-200);
+      border: 1px solid var(--gray-150);
       padding: 12px 16px;
       display: flex;
       justify-content: space-between;
@@ -661,8 +659,8 @@ const filteredModels = computed(() => {
       min-height: 48px;
 
       &:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        border-color: var(--gray-400);
+        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
+        border-color: var(--gray-200);
       }
 
       .model_name {
@@ -701,12 +699,12 @@ const filteredModels = computed(() => {
       min-height: 72px;
       background: white;
       border-radius: 6px;
-      border: 1px solid var(--gray-200);
+      border: 1px solid var(--gray-150);
       transition: all 0.3s ease;
 
       &:hover {
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-        border-color: var(--gray-400);
+        border-color: var(--gray-200);
 
         .card-models__header .action {
           opacity: 1;
@@ -884,7 +882,7 @@ const filteredModels = computed(() => {
             padding: 4px 6px;
             border-radius: 6px;
             background-color: white;
-            border: 1px solid var(--gray-200);
+            border: 1px solid var(--gray-150);
 
             &:hover {
               background-color: var(--gray-50);
@@ -909,7 +907,7 @@ const filteredModels = computed(() => {
 
       &:hover {
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-        border-color: var(--gray-300);
+        border-color: var(--gray-200);
       }
     }
   }
diff --git a/web/src/components/ModelSelectorComponent.vue b/web/src/components/ModelSelectorComponent.vue
index 54e4b10c..7bf67a0c 100644
--- a/web/src/components/ModelSelectorComponent.vue
+++ b/web/src/components/ModelSelectorComponent.vue
@@ -64,9 +64,9 @@ const handleSelectModel = (provider, name) => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 0.25rem 0.5rem;
+  padding: 4px 8px;
   cursor: pointer;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--gray-200);
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -90,27 +90,6 @@ const handleSelectModel = (provider, name) => {
 
 }
 
-.nav-btn {
-  height: 2.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  color: var(--gray-900);
-  cursor: pointer;
-  width: auto;
-  transition: background-color 0.3s;
-  padding: 0.5rem 0.75rem;
-
-  .text {
-    margin-left: 10px;
-  }
-
-  &:hover {
-    background-color: var(--main-20);
-  }
-}
-
 .scrollable-menu {
   max-height: 300px;
   overflow-y: auto;
diff --git a/web/src/components/UserManagementComponent.vue b/web/src/components/UserManagementComponent.vue
index e1352cae..7da26e36 100644
--- a/web/src/components/UserManagementComponent.vue
+++ b/web/src/components/UserManagementComponent.vue
@@ -6,7 +6,7 @@
         <h3 class="title">用户管理</h3>
         <p class="description">管理系统用户，请谨慎操作。删除用户后该用户将无法登录系统。</p>
       </div>
-      <a-button type="primary" size="large" @click="showAddUserModal" class="add-btn">
+      <a-button type="primary" @click="showAddUserModal" class="add-btn">
         <template #icon><PlusOutlined /></template>
         添加用户
       </a-button>
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 0b087447..6cc68b0a 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -49,6 +49,10 @@
               </a-select-option>
             </a-select>
           </div>
+        </div>
+        <h3>内容审查配置</h3>
+        <div class="section">
+          <!-- 内容审查配置 -->
           <div class="card">
             <span class="label">{{ items?.enable_content_guard.des }}</span>
             <a-switch
@@ -56,6 +60,21 @@
               @change="handleChange('enable_content_guard', $event)"
             />
           </div>
+          <div class="card" v-if="configStore.config?.enable_content_guard">
+            <span class="label">{{ items?.enable_content_guard_llm.des }}</span>
+            <a-switch
+              :checked="configStore.config?.enable_content_guard_llm"
+              @change="handleChange('enable_content_guard_llm', $event)"
+            />
+          </div>
+          <div class="card card-select" v-if="configStore.config?.enable_content_guard && configStore.config?.enable_content_guard_llm">
+            <span class="label">{{ items?.content_guard_llm_model.des }}</span>
+            <ModelSelectorComponent
+              @select-model="handleContentGuardModelSelect"
+              :model_name="configStore.config?.content_guard_llm_model?.split('/').pop()"
+              :model_provider="configStore.config?.content_guard_llm_model?.split('/')[0]"
+            />
+          </div>
         </div>
 
         <!-- 服务链接部分 -->
@@ -198,6 +217,10 @@ const handleChatModelSelect = ({ provider, name }) => {
   })
 }
 
+const handleContentGuardModelSelect = ({ provider, name }) => {
+  configStore.setConfigValue('content_guard_llm_model', `${provider}/${name}`)
+}
+
 onMounted(() => {
   updateWindowWidth()
   window.addEventListener('resize', updateWindowWidth)
@@ -297,19 +320,33 @@ const openLink = (url) => {
   padding: 0 20px;
   margin-bottom: 40px;
 
-  h3 {
+  h3:not(:first-child) {
+    margin-top: 30px;
+  }
+  h3:first-child {
     margin-top: 20px;
   }
 
   .section {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: var(--gray-0);
-    padding: 20px;
+    padding: 12px 16px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    border: 1px solid var(--gray-200);
+    border: 1px solid var(--gray-150);
+
+    .content-guard-section {
+      h4 {
+        margin: 0 0 12px 0;
+        color: var(--gray-900);
+        font-size: 16px;
+        font-weight: 600;
+        border-bottom: 1px solid var(--gray-150);
+        padding-bottom: 8px;
+      }
+    }
   }
 
   .card {
@@ -335,20 +372,20 @@ const openLink = (url) => {
   .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 16px;
+    gap: 12px;
     margin-top: 20px;
   }
 
-    .service-link-card {
+  .service-link-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px;
-    border: 1px solid var(--gray-300);
+    padding: 12px 16px;
+    border: 1px solid var(--gray-150);
     border-radius: 8px;
     background: white;
     transition: all 0.2s;
-    min-height: 80px;
+    min-height: 60px;
 
     &:hover {
       box-shadow: 0 1px 8px var(--gray-200);