From 1ae2974fad7cf591c4186399223004c1ac9eca20 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 18 Mar 2026 20:01:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E6=8F=90=E7=A4=BA=E8=AF=8D=E7=BC=96=E8=BE=91=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=BC=B9=E7=AA=97=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=92=8C=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/server/routers/mcp_router.py       |   2 +-
 web/src/components/AgentConfigSidebar.vue  | 121 ++++++++++++++-------
 web/src/components/FileTable.vue           |   7 +-
 web/src/components/McpServersComponent.vue |   9 +-
 4 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/backend/server/routers/mcp_router.py b/backend/server/routers/mcp_router.py
index a8393318..0156b4c3 100644
--- a/backend/server/routers/mcp_router.py
+++ b/backend/server/routers/mcp_router.py
@@ -259,7 +259,7 @@ async def toggle_mcp_server_route(
         return {
             "success": True,
             "enabled": is_enabled,
-            "message": f"服务器 '{name}' 已{'启用' if is_enabled else '禁用'}",
+            "message": f"MCP '{name}' 已{'启用' if is_enabled else '禁用'}",
         }
     except ValueError as ve:
         raise HTTPException(status_code=404, detail=str(ve))
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
index 39fb987b..acd0e88c 100644
--- a/web/src/components/AgentConfigSidebar.vue
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -61,26 +61,14 @@
                   v-else-if="value.template_metadata.kind === 'prompt'"
                   class="system-prompt-container"
                 >
-                  <!-- 编辑模式 -->
-                  <a-textarea
-                    v-if="systemPromptEditMode"
-                    :value="agentConfig[key]"
-                    @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
-                    :rows="10"
-                    :placeholder="getPlaceholder(key, value)"
-                    class="system-prompt-input"
-                    @blur="systemPromptEditMode = false"
-                    ref="systemPromptTextarea"
-                  />
-                  <!-- 显示模式 -->
-                  <div v-else class="system-prompt-display" @click="enterEditMode">
+                  <div class="system-prompt-display" @click="openSystemPromptModal(key)">
                     <div
                       class="system-prompt-content"
                       :class="{ 'is-placeholder': !agentConfig[key] }"
                     >
                       {{ agentConfig[key] || getPlaceholder(key, value) }}
                     </div>
-                    <div class="edit-hint">点击编辑</div>
+                    <div class="edit-hint">点击查看并编辑</div>
                   </div>
                 </div>
 
@@ -407,11 +395,34 @@
         </div>
       </div>
     </a-modal>
+
+    <a-modal
+      v-model:open="systemPromptModalOpen"
+      :title="systemPromptModalTitle"
+      :width="620"
+      :maskClosable="false"
+      @cancel="closeSystemPromptModal"
+      class="system-prompt-modal"
+    >
+      <div class="system-prompt-modal-content">
+        <a-textarea
+          v-model:value="systemPromptDraft"
+          :rows="14"
+          :placeholder="systemPromptModalPlaceholder"
+          class="system-prompt-modal-input"
+        />
+      </div>
+
+      <template #footer>
+        <a-button @click="closeSystemPromptModal">取消</a-button>
+        <a-button type="primary" @click="saveSystemPrompt">保存</a-button>
+      </template>
+    </a-modal>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
 import { X, Trash2, Check, Plus, Search, Star, RotateCw, Settings } from 'lucide-vue-next'
@@ -480,7 +491,9 @@ const selectionModalOpen = ref(false)
 const currentConfigKey = ref(null)
 const tempSelectedValues = ref([])
 const selectionSearchText = ref('')
-const systemPromptEditMode = ref(false)
+const systemPromptModalOpen = ref(false)
+const currentSystemPromptKey = ref(null)
+const systemPromptDraft = ref('')
 const activeTab = ref('basic')
 const liveSkillOptions = ref([])
 const toolOptionsFromApi = ref([])
@@ -673,6 +686,18 @@ const currentConfigKind = computed(() => {
   return configurableItems.value[currentConfigKey.value]?.template_metadata?.kind
 })
 
+const systemPromptModalTitle = computed(() => {
+  if (!currentSystemPromptKey.value) return 'System Prompt'
+  return configurableItems.value[currentSystemPromptKey.value]?.name || currentSystemPromptKey.value
+})
+
+const systemPromptModalPlaceholder = computed(() => {
+  if (!currentSystemPromptKey.value) return '请输入系统提示词'
+  const currentItem = configurableItems.value[currentSystemPromptKey.value]
+  if (!currentItem) return '请输入系统提示词'
+  return getPlaceholder(currentSystemPromptKey.value, currentItem)
+})
+
 const filteredOptions = computed(() => {
   if (!currentConfigKey.value) return []
   const key = currentConfigKey.value
@@ -830,16 +855,25 @@ const closeSelectionModal = () => {
   selectionSearchText.value = ''
 }
 
-// 系统提示词编辑相关方法
-const enterEditMode = () => {
-  systemPromptEditMode.value = true
-  // 使用 nextTick 确保 DOM 更新后再聚焦
-  nextTick(() => {
-    const textarea = document.querySelector('.system-prompt-input')
-    if (textarea) {
-      textarea.focus()
-    }
+// 系统提示词弹窗编辑相关方法
+const openSystemPromptModal = (key) => {
+  currentSystemPromptKey.value = key
+  systemPromptDraft.value = agentConfig.value[key] || ''
+  systemPromptModalOpen.value = true
+}
+
+const closeSystemPromptModal = () => {
+  systemPromptModalOpen.value = false
+  currentSystemPromptKey.value = null
+  systemPromptDraft.value = ''
+}
+
+const saveSystemPrompt = () => {
+  if (!currentSystemPromptKey.value) return
+  agentStore.updateAgentConfig({
+    [currentSystemPromptKey.value]: systemPromptDraft.value
   })
+  closeSystemPromptModal()
 }
 
 // 验证和过滤配置项
@@ -1041,24 +1075,14 @@ const confirmDeleteConfig = async () => {
             width: 100%;
           }
 
-          .system-prompt-input {
-            resize: vertical;
-            background: var(--gray-50);
-            border: 1px solid var(--gray-200);
-            padding: 6px 10px;
-            font-size: 12px;
-
-            &:focus {
-              outline: none;
-            }
-          }
-
           .system-prompt-container {
             width: 100%;
           }
 
           .system-prompt-display {
             min-height: 60px;
+            border: 1px solid var(--gray-200);
+            padding: 10px 12px;
             border-radius: 6px;
             cursor: pointer;
             position: relative;
@@ -1074,13 +1098,16 @@ const confirmDeleteConfig = async () => {
             }
 
             .system-prompt-content {
-              white-space: pre-wrap;
+              white-space: pre-line;
               word-break: break-word;
               line-height: 1.5;
               color: var(--gray-900);
-              font-size: 12px;
-              max-height: 500px;
-              overflow: scroll;
+              font-size: 13px;
+              display: -webkit-box;
+              line-clamp: 4;
+              -webkit-line-clamp: 4;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
 
               &.is-placeholder {
                 color: var(--gray-400);
@@ -1497,6 +1524,7 @@ const confirmDeleteConfig = async () => {
             line-height: 1.4;
             margin-top: 6px;
             display: -webkit-box;
+            line-clamp: 2;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
@@ -1579,6 +1607,17 @@ const confirmDeleteConfig = async () => {
   }
 }
 
+.system-prompt-modal {
+  .system-prompt-modal-content {
+    .system-prompt-modal-input {
+      resize: vertical;
+      font-size: 13px;
+      line-height: 1.6;
+      border-radius: 8px;
+    }
+  }
+}
+
 .clear-btn {
   padding: 0;
   height: auto;
diff --git a/web/src/components/FileTable.vue b/web/src/components/FileTable.vue
index 20573c1d..38100b48 100644
--- a/web/src/components/FileTable.vue
+++ b/web/src/components/FileTable.vue
@@ -2,12 +2,7 @@
   <div class="file-table-container">
     <div class="panel-header">
       <div class="upload-btn-group">
-        <a-button
-          type="primary"
-          size="small"
-          class="upload-btn"
-          @click="showAddFilesModal()"
-        >
+        <a-button type="primary" size="small" class="upload-btn" @click="showAddFilesModal()">
           <FileUp size="14" />
           上传
         </a-button>
diff --git a/web/src/components/McpServersComponent.vue b/web/src/components/McpServersComponent.vue
index 1a4a0312..39c87a6b 100644
--- a/web/src/components/McpServersComponent.vue
+++ b/web/src/components/McpServersComponent.vue
@@ -476,7 +476,7 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { notification, Modal } from 'ant-design-vue'
+import { message, notification, Modal } from 'ant-design-vue'
 import {
   Search,
   Plug,
@@ -536,7 +536,10 @@ const form = reactive({
 // 计算属性
 const filteredServers = computed(() => {
   const sorted = [...servers.value].sort((a, b) => {
-    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+    return String(a.name || '').localeCompare(String(b.name || ''), 'zh-Hans-CN', {
+      sensitivity: 'base',
+      numeric: true
+    })
   })
   if (!searchQuery.value) return sorted
   const q = searchQuery.value.toLowerCase()
@@ -823,7 +826,7 @@ const handleToggleServer = async (server) => {
     toggleLoading.value = server.name
     const result = await mcpApi.toggleMcpServer(server.name)
     if (result.success) {
-      notification.success({ message: result.message })
+      message.success(result.message)
       await fetchServers()
     } else {
       notification.error({ message: result.message || '操作失败' })