From fbe85702a9239085bd9ec123422d92275b45edef Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 24 Aug 2025 18:54:54 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AgentChatComponent.vue     |   4 +-
 web/src/components/AgentMessageComponent.vue  |   2 +-
 .../components/ModelProvidersComponent.vue    |  36 ++-
 web/src/components/ModelSelectorComponent.vue |   6 +-
 web/src/components/TableConfigComponent.vue   | 212 ------------------
 .../components/UserManagementComponent.vue    |   2 +-
 web/src/views/SettingView.vue                 |  11 +-
 7 files changed, 28 insertions(+), 245 deletions(-)
 delete mode 100644 web/src/components/TableConfigComponent.vue

diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 0b42a3bb..7198e3f8 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -178,7 +178,7 @@ const emit = defineEmits(['open-config', 'open-agent-modal']);
 const state = reactive({
   ...props.state,
   debug_mode: computed(() => props.state.debug_mode ?? false),
-  isSidebarOpen: localStorage.getItem('chat_sidebar_open') === 'true' || true,
+  isSidebarOpen: localStorage.getItem('chat_sidebar_open', 'true') === 'true',
   waitingServerResponse: false,
   isProcessingRequest: false,
   creatingNewChat: false,
@@ -226,7 +226,7 @@ onMounted(() => {
 
   // 延迟移除初始渲染标记，防止切换动画
   setTimeout(() => {
-    state.isInitialRender = false;
+  state.isInitialRender = false;
   }, 300);
 });
 
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 5a76542b..6897f6cd 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -527,7 +527,7 @@ const toggleToolCall = (toolCallId) => {
   }
 
   ol, ul {
-    padding-left: 1rem;
+    padding-left: 1.2rem;
   }
 
   cite {
diff --git a/web/src/components/ModelProvidersComponent.vue b/web/src/components/ModelProvidersComponent.vue
index ce22939b..86fd8506 100644
--- a/web/src/components/ModelProvidersComponent.vue
+++ b/web/src/components/ModelProvidersComponent.vue
@@ -178,8 +178,8 @@
           <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 中添加。" />
-              <img src="@/assets/pics/guides/how-to-add-models.png" alt="添加模型指引" style="width: 100%; height: 100%;">
+              <a-alert type="warning" message="该提供商暂未适配获取模型列表的方法，如果需要添加模型，请在 src/static/models.private.yml 中添加。（如没有此文件，则需要手动创建一个）" />
+              <img src="@/assets/pics/guides/how-to-add-models.png" alt="添加模型指引" style="width: 100%; height: 100%; margin-top: 16px;">
             </div>
           </div>
         </div>
@@ -450,14 +450,12 @@ const filteredModels = computed(() => {
   border: 1px solid var(--gray-200);
   background-color: white;
   border-radius: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   padding: 0;
-  // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   overflow: hidden;
 
   &:hover {
-    // box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
     border-color: var(--gray-300);
   }
 
@@ -511,11 +509,11 @@ const filteredModels = computed(() => {
   .card-header {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     cursor: pointer;
-    padding: 12px 14px;
+    padding: 16px 20px;
     background: white;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
 
     &:hover {
       background: var(--gray-50);
@@ -644,8 +642,8 @@ const filteredModels = computed(() => {
   .card-body {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 10px;
-    padding: 12px;
+    gap: 12px;
+    padding: 16px;
     background: #fafafa;
 
     // 普通模型卡片样式
@@ -653,17 +651,17 @@ const filteredModels = computed(() => {
       width: 100%;
       border-radius: 6px;
       border: 1px solid var(--gray-200);
-      padding: 10px 12px;
+      padding: 12px 16px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       box-sizing: border-box;
       background: white;
-      transition: all 0.2s ease;
-      min-height: 42px;
+      transition: all 0.3s ease;
+      min-height: 48px;
 
       &:hover {
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         border-color: var(--gray-400);
       }
 
@@ -697,17 +695,17 @@ const filteredModels = computed(() => {
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      padding: 10px 12px;
+      padding: 12px 16px;
       gap: 8px;
       cursor: pointer;
-      min-height: 64px;
+      min-height: 72px;
       background: white;
       border-radius: 6px;
       border: 1px solid var(--gray-200);
-      transition: all 0.2s ease;
+      transition: all 0.3s ease;
 
       &:hover {
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
         border-color: var(--gray-400);
 
         .card-models__header .action {
diff --git a/web/src/components/ModelSelectorComponent.vue b/web/src/components/ModelSelectorComponent.vue
index 71565069..54e4b10c 100644
--- a/web/src/components/ModelSelectorComponent.vue
+++ b/web/src/components/ModelSelectorComponent.vue
@@ -135,9 +135,9 @@ const handleSelectModel = (provider, name) => {
 }
 </style>
 
-<style lang="less">
-// 添加全局样式以确保滚动功能在dropdown内正常工作
-.ant-dropdown-menu {
+<style lang="less" scoped>
+// 将全局样式移到scoped中以避免样式污染
+:deep(.ant-dropdown-menu) {
   &.scrollable-menu {
     max-height: 300px;
     overflow-y: auto;
diff --git a/web/src/components/TableConfigComponent.vue b/web/src/components/TableConfigComponent.vue
deleted file mode 100644
index a08f4bd2..00000000
--- a/web/src/components/TableConfigComponent.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-  <a-card class="config-card" style="max-width: 960px">
-    <a-form layout="vertical">
-      <div
-        v-for="(item, index) in configList"
-        :key="index"
-        class="config-item"
-      >
-        <a-row :gutter="[16, 8]" align="middle">
-          <a-col :span="8">
-            <a-input
-              v-model:value="item.key"
-              placeholder="模型名称"
-              readonly
-              class="key-input"
-            />
-          </a-col>
-          <a-col :span="14">
-            <a-input
-              v-model:value="item.value"
-              @change="updateValue(index)"
-              placeholder="模型本地路径"
-              class="value-input"
-            />
-          </a-col>
-          <a-col :span="2" class="delete-btn-col">
-            <a-button
-              type="link"
-              danger
-              class="delete-btn"
-              @click="deleteConfig(index)"
-            >
-              <DeleteOutlined />
-            </a-button>
-          </a-col>
-        </a-row>
-      </div>
-
-      <a-button block @click="addConfig" class="add-btn" :disabled="isAdding">
-        <PlusOutlined /> 添加路径映射
-      </a-button>
-    </a-form>
-
-    <a-modal
-      title="添加路径映射"
-      v-model:open="addConfigModalVisible"
-      @ok="confirmAddConfig"
-      class="config-modal"
-    >
-      <a-form layout="vertical">
-        <a-form-item label="模型名称（与Huggingface名称一致，比如 BAAI/bge-large-zh-v1.5" required>
-          <a-input
-            v-model:value="newConfig.key"
-            placeholder="请输入模型名称"
-            class="modal-input"
-          />
-        </a-form-item>
-        <a-form-item label="模型本地路径（绝对路径，比如 /hdd/models/BAAI/bge-large-zh-v1.5）" required>
-          <a-input
-            v-model:value="newConfig.value"
-            placeholder="请输入模型本地路径"
-            class="modal-input"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </a-card>
-</template>
-
-<script setup>
-import { ref, reactive, computed, watch } from 'vue';
-import { message } from 'ant-design-vue';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
-
-const props = defineProps({
-  config: {
-    type: Object,
-    default: () => ({})
-  }
-});
-
-const emit = defineEmits(['update:config']);
-
-// 配置列表
-const configList = reactive([]);
-
-// 初始化配置列表
-props.config && Object.entries(props.config).forEach(([key, value]) => {
-  configList.push({ key, value });
-});
-
-// 控制模态框显示
-const addConfigModalVisible = ref(false);
-const isAdding = ref(false); // 添加新的ref变量
-
-// 新增配置项数据
-const newConfig = ref({ key: '', value: '' });
-
-// 添加配置
-const addConfig = () => {
-  isAdding.value = true;  // 设置添加状态
-  addConfigModalVisible.value = true;
-};
-
-// 确认添加配置
-const confirmAddConfig = () => {
-  if (newConfig.value.key === '' || newConfig.value.value === '') {
-    message.warning('键或值不能为空');
-    return;
-  }
-  if (configList.some(item => item.key === newConfig.value.key)) {
-    message.warning('键已存在');
-    return;
-  }
-  configList.push({ key: newConfig.value.key, value: newConfig.value.value });
-  addConfigModalVisible.value = false;
-  newConfig.value = { key: '', value: '' };
-  isAdding.value = false;  // 重置添加状态
-};
-
-// 删除配置
-const deleteConfig = (index) => {
-  configList.splice(index, 1);
-};
-
-// 更新值
-const updateValue = (index) => {
-  // 值的更新实时反映在 configList 中，无需额外处理
-};
-
-// 将配置列表转换为对象
-const configObject = computed(() => {
-  return configList.reduce((acc, item) => {
-    acc[item.key] = item.value;
-    return acc;
-  }, {});
-});
-
-// 监听配置变化并传递回父组件
-watch(configObject, (newValue) => {
-  emit('update:config', newValue);
-}, { deep: true });
-
-// 监听模态框关闭
-watch(addConfigModalVisible, (newValue) => {
-  if (!newValue) {
-    isAdding.value = false;  // 当模态框关闭时重置添加状态
-  }
-});
-</script>
-
-<style scoped>
-.config-card {
-  background-color: var(--gray-10);
-  border-radius: 8px;
-  border: 1px solid var(--gray-300);
-}
-
-.config-item {
-  border-bottom: 1px solid #f0f0f0;
-  padding: 12px 0;
-  transition: background-color 0.3s ease;
-}
-
-.config-item:hover {
-  background-color: #fafafa;
-}
-
-.config-item:last-child {
-  border-bottom: none;
-}
-
-.key-input {
-  background-color: #f8f8f8;
-  border-color: #e8e8e8;
-}
-
-.delete-btn-col {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.delete-btn {
-  opacity: 0.6;
-  transition: opacity 0.3s ease;
-}
-
-.delete-btn:hover {
-  opacity: 1;
-}
-
-.add-btn {
-  margin-top: 16px;
-  height: 40px;
-  transition: all 0.3s ease;
-  width: auto;
-}
-
-.modal-input {
-  margin-bottom: 8px;
-}
-
-:deep(.ant-modal-content) {
-  border-radius: 8px;
-}
-
-:deep(.ant-card-body) {
-  padding: 16px;
-}
-</style>
-
diff --git a/web/src/components/UserManagementComponent.vue b/web/src/components/UserManagementComponent.vue
index 91c02d38..e1352cae 100644
--- a/web/src/components/UserManagementComponent.vue
+++ b/web/src/components/UserManagementComponent.vue
@@ -76,7 +76,7 @@
 
     <!-- 用户表单模态框 -->
     <a-modal
-      v-model:visible="userManagement.modalVisible"
+      v-model:open="userManagement.modalVisible"
       :title="userManagement.modalTitle"
       @ok="handleUserFormSubmit"
       :confirmLoading="userManagement.loading"
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index d592e388..24da3450 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -126,7 +126,6 @@ import {
   GlobalOutlined
 } from '@ant-design/icons-vue';
 import HeaderComponent from '@/components/HeaderComponent.vue';
-import TableConfigComponent from '@/components/TableConfigComponent.vue';
 import ModelProvidersComponent from '@/components/ModelProvidersComponent.vue';
 import UserManagementComponent from '@/components/UserManagementComponent.vue';
 import { notification, Button } from 'ant-design-vue';
@@ -302,7 +301,6 @@ const openLink = (url) => {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--gray-200);
   }
 
@@ -310,9 +308,12 @@ const openLink = (url) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    // padding: 12px 0;
 
     .label {
       margin-right: 20px;
+      font-weight: 500;
+      color: var(--gray-800);
 
       button {
         margin-left: 10px;
@@ -325,13 +326,9 @@ const openLink = (url) => {
 
   .services-grid {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 16px;
     margin-top: 20px;
-
-    @media (min-width: 768px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
   }
 
     .service-link-card {