refactor(web): 重构代理配置侧边栏和输入组件

- 更新了 AgentConfigSidebar.vue 以增强配置管理界面，包括添加用于创建新配置的模态框和改进只读状态的处理。
- 重构了 AgentInputArea.vue 以简化操作按钮并提高响应性。
- 简化了 AgentView.vue 中选择代理配置的下拉菜单，将其替换为切换侧边栏的按钮。
- 增强了 agent.js 中数值的处理，确保正确的类型转换。
- 清理了多个组件中的 CSS 样式，以获得更好的一致性和响应性。
- 删除了不必要的代码并提高了各种组件的可读性。

backend/package/yuxi/knowledge/__init__.py

@@ -14,7 +14,7 @@ if not _LITE_MODE:
 
     # 注册知识库类型
     KnowledgeBaseFactory.register("milvus", MilvusKB, {"description": "基于 Milvus 的生产级向量知识库，适合高性能部署"})
-    KnowledgeBaseFactory.register("lightrag", LightRagKB, {"description": "基于图检索的知识库，支持实体关系构建和复杂查询"})
+    KnowledgeBaseFactory.register("lightrag", LightRagKB, {"description": "基于图的知识库，支持实体关系构建和复杂查询"})
 
 KnowledgeBaseFactory.register("dify", DifyKB, {"description": "连接 Dify Dataset 的只读检索知识库"})
 

backend/package/yuxi/repositories/subagent_repository.py

@@ -30,10 +30,9 @@ class SubAgentRepository:
 
     async def exists_name(self, name: str) -> bool:
         """检查名称是否存在（仅查询计数，不获取完整数据）"""
-        from sqlalchemy import select, func
+        from sqlalchemy import func, select
-        result = await self.db.execute(
+
-            select(func.count()).select_from(SubAgent).where(SubAgent.name == name)
+        result = await self.db.execute(select(func.count()).select_from(SubAgent).where(SubAgent.name == name))
-        )
         return result.scalar() > 0
 
     async def create(

backend/package/yuxi/services/subagent_service.py

@@ -100,6 +100,7 @@ def clear_specs_cache() -> None:
     global _subagent_specs_cache
     _subagent_specs_cache = None
 
+
 async def get_subagents_from_names(selected_names: Any, *, db: AsyncSession | None = None) -> list[dict[str, Any]]:
     """根据名称获取 subagent specs（含工具解析）。"""
     specs = await get_subagent_specs(db)
@@ -125,13 +126,12 @@ async def get_subagents_from_names(selected_names: Any, *, db: AsyncSession | No
     for spec in matched:
         resolved_spec = dict(spec)
         tool_names = spec.get("tools", [])
-        resolved_spec["tools"] = [
+        resolved_spec["tools"] = [all_tool_names[name] for name in tool_names if name in all_tool_names]
-            all_tool_names[name] for name in tool_names if name in all_tool_names
-        ]
         resolved_specs.append(resolved_spec)
 
     return resolved_specs
 
+
 async def get_all_subagents(db: AsyncSession | None = None) -> list[dict[str, Any]]:
     """获取所有 SubAgent（含禁用的）"""
     async with _get_session(db) as session:

web/src/assets/css/extensions.less

@@ -111,7 +111,6 @@
   }
 
   &.active {
-
     .item-icon,
     .server-icon {
       color: var(--main-color);

web/src/components/AgentInputArea.vue

@@ -31,18 +31,22 @@
     </template>
     <template #actions-left>
       <div class="input-actions-left">
-        <slot name="actions-left-extra"></slot>
         <!-- State Toggle Button -->
-        <div
+        <button
           v-if="hasStateContent"
-          class="state-toggle-btn"
+          class="input-action-btn"
           :class="{ active: isPanelOpen }"
           @click="$emit('toggle-panel')"
           title="查看工作状态"
         >
           <FolderCode :size="18" />
           <span>状态</span>
-        </div>
+        </button>
+      </div>
+    </template>
+    <template #actions-right>
+      <div class="input-actions-right">
+        <slot name="actions-left-extra"></slot>
       </div>
     </template>
   </MessageInputComponent>
@@ -184,12 +188,19 @@ defineExpose({
   gap: 8px;
 }
 
-.state-toggle-btn {
+.input-actions-right {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+// 输入框操作按钮通用样式（穿透到 slot 内容）
+:deep(.input-action-btn) {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 0 8px;
+  padding: 8px 8px;
-  height: 28px;
+  // height: 28px;
   border-radius: 8px;
   font-size: 14px;
   color: var(--gray-600);
@@ -200,13 +211,13 @@ defineExpose({
   border: none;
 
   &:hover {
-    color: var(--main-color);
+    color: var(--gray-900);
-    background: var(--gray-100);
+    background: var(--gray-50);
   }
 
   &.active {
-    color: var(--main-color);
+    color: var(--gray-900);
-    background: var(--main-50);
+    background: var(--gray-100);
     font-weight: 500;
   }
 
@@ -220,4 +231,11 @@ defineExpose({
     line-height: 1;
   }
 }
+
+// slot 内容的 hide-text 响应式样式
+:deep(.hide-text) {
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
 </style>

web/src/components/McpServersComponent.vue

@@ -189,9 +189,7 @@
                       v-if="currentServer.env && Object.keys(currentServer.env).length > 0"
                     >
                       <label>环境变量</label>
-                      <pre class="code-pre">{{
+                      <pre class="code-pre">{{ JSON.stringify(currentServer.env, null, 2) }}</pre>
-                        JSON.stringify(currentServer.env, null, 2)
-                      }}</pre>
                     </div>
                   </template>
 

web/src/components/SubAgentsComponent.vue

@@ -464,5 +464,4 @@ defineExpose({
     width: 100%;
   }
 }
-
 </style>

web/src/stores/agent.js

@@ -343,6 +343,18 @@ export const useAgentStore = defineStore(
               loadedConfig[key] = item.default
             }
           }
+
+          if (
+            loadedConfig[key] !== undefined &&
+            loadedConfig[key] !== null &&
+            loadedConfig[key] !== '' &&
+            (item?.type === 'number' || item?.type === 'int' || item?.type === 'float')
+          ) {
+            const numericValue = Number(loadedConfig[key])
+            if (!Number.isNaN(numericValue)) {
+              loadedConfig[key] = item.type === 'int' ? Math.trunc(numericValue) : numericValue
+            }
+          }
         })
 
         agentConfig.value = loadedConfig

web/src/views/AgentView.vue

@@ -1,17 +1,6 @@
 <template>
   <div class="agent-view">
     <div class="agent-view-body">
-      <a-modal
-        v-model:open="createConfigModalOpen"
-        title="新建配置"
-        :width="320"
-        :confirmLoading="createConfigLoading"
-        @ok="handleCreateConfig"
-        @cancel="() => (createConfigModalOpen = false)"
-      >
-        <a-input v-model:value="createConfigName" placeholder="请输入配置名称" allow-clear />
-      </a-modal>
-
       <!-- 中间内容区域 -->
       <div class="content">
         <AgentChatComponent
@@ -20,66 +9,18 @@
           @close-config-sidebar="() => (chatUIStore.isConfigSidebarOpen = false)"
         >
           <template #input-actions-left>
-            <a-dropdown
+            <button
               v-if="selectedAgentId"
-              v-model:open="configDropdownOpen"
+              class="input-action-btn"
-              :trigger="['click']"
+              :class="{ active: chatUIStore.isConfigSidebarOpen }"
+              :disabled="isLoadingConfig"
+              @click="openConfigSidebar"
             >
-              <div
+              <Settings2 size="18" />
-                type="button"
+              <span class="hide-text">
-                class="agent-nav-btn config-toggle-btn"
+                {{ isLoadingConfig ? '加载中...' : (selectedConfigSummary?.name || '配置') }}
-                :class="{ active: configDropdownOpen }"
+              </span>
-              >
+            </button>
-                <Settings2 size="18" class="nav-btn-icon" />
-                <span class="text hide-text">
-                  {{ selectedConfigSummary?.name || '配置' }}
-                </span>
-                <ChevronDown size="16" class="nav-btn-icon" />
-              </div>
-              <template #overlay>
-                <a-menu
-                  :selectedKeys="selectedAgentConfigId ? [String(selectedAgentConfigId)] : []"
-                >
-                  <a-menu-item
-                    v-for="cfg in agentConfigs[selectedAgentId] || []"
-                    :key="String(cfg.id)"
-                    @click="selectAgentConfig(cfg.id)"
-                  >
-                    <div class="menu-item-full">
-                      <Star
-                        :size="14"
-                        :fill="cfg.is_default ? 'currentColor' : 'none'"
-                        :style="{
-                          color: cfg.is_default ? 'var(--color-warning-500)' : 'var(--gray-400)'
-                        }"
-                      />
-                      <span>{{ cfg.name }}</span>
-                    </div>
-                  </a-menu-item>
-                  <a-menu-divider v-if="userStore.isAdmin" />
-                  <a-menu-item
-                    v-if="userStore.isAdmin"
-                    key="create_config"
-                    @click="openCreateConfigModal"
-                  >
-                    <div class="menu-item-layout">
-                      <CirclePlus :size="16" />
-                      <span>新建配置</span>
-                    </div>
-                  </a-menu-item>
-                  <a-menu-item
-                    v-if="userStore.isAdmin"
-                    key="open_config"
-                    @click="openConfigSidebar"
-                  >
-                    <div class="menu-item-layout">
-                      <SquarePen :size="16" />
-                      <span>编辑当前配置</span>
-                    </div>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
           </template>
 
           <template #header-right v-if="userStore.isAdmin">
@@ -140,7 +81,7 @@
 import { ref, watch } from 'vue'
 import { MessageOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
-import { Settings2, Ellipsis, ChevronDown, Star, CirclePlus, SquarePen } from 'lucide-vue-next'
+import { Settings2, Ellipsis } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import AgentChatComponent from '@/components/AgentChatComponent.vue'
 import AgentConfigSidebar from '@/components/AgentConfigSidebar.vue'
@@ -157,7 +98,6 @@ import { storeToRefs } from 'pinia'
 // 组件引用
 const feedbackModal = ref(null)
 const chatComponentRef = ref(null)
-const configDropdownOpen = ref(false)
 
 // Stores
 const userStore = useUserStore()
@@ -167,8 +107,7 @@ const route = useRoute()
 const router = useRouter()
 
 // 从 agentStore 中获取响应式状态
-const { agents, selectedAgentId, agentConfigs, selectedAgentConfigId, selectedConfigSummary } =
+const { agents, selectedAgentId, selectedConfigSummary, isLoadingConfig } = storeToRefs(agentStore)
-  storeToRefs(agentStore)
 
 const syncingRouteAgent = ref(false)
 
@@ -224,52 +163,7 @@ watch(selectedAgentId, (newAgentId) => {
 })
 
 const openConfigSidebar = () => {
-  configDropdownOpen.value = false
+  chatUIStore.isConfigSidebarOpen = !chatUIStore.isConfigSidebarOpen
-  chatUIStore.isConfigSidebarOpen = true
-}
-
-const createConfigModalOpen = ref(false)
-const createConfigLoading = ref(false)
-const createConfigName = ref('')
-
-const openCreateConfigModal = () => {
-  configDropdownOpen.value = false
-  createConfigName.value = ''
-  createConfigModalOpen.value = true
-}
-
-const handleCreateConfig = async () => {
-  if (!selectedAgentId.value) return
-  if (!createConfigName.value) {
-    message.error('请输入配置名称')
-    return
-  }
-
-  createConfigLoading.value = true
-  try {
-    await agentStore.createAgentConfigProfile({
-      name: createConfigName.value,
-      setDefault: false,
-      fromCurrent: false
-    })
-    createConfigModalOpen.value = false
-    chatUIStore.isConfigSidebarOpen = true
-    message.success('配置已创建')
-  } catch (error) {
-    console.error('创建配置出错:', error)
-    message.error(error.message || '创建配置失败')
-  } finally {
-    createConfigLoading.value = false
-  }
-}
-
-const selectAgentConfig = async (configId) => {
-  try {
-    await agentStore.selectAgentConfig(configId)
-  } catch (error) {
-    console.error('切换配置出错:', error)
-    message.error('切换配置失败')
-  }
 }
 
 // 更多菜单相关
@@ -964,40 +858,4 @@ const handleFeedback = () => {
   gap: 10px;
   width: 100%;
 }
-
-.agent-nav-btn.config-toggle-btn {
-  gap: 6px;
-  padding: 0 8px;
-  height: 28px;
-  border-radius: 8px;
-  font-size: 14px;
-  color: var(--gray-600);
-  transition: all 0.2s ease;
-  user-select: none;
-
-  .nav-btn-icon {
-    height: 16px;
-  }
-
-  .text {
-    line-height: 1;
-  }
-
-  &:hover {
-    color: var(--main-color);
-    background: var(--gray-100);
-  }
-
-  &.active {
-    color: var(--main-color);
-    background: var(--main-50);
-    font-weight: 500;
-  }
-}
-
-@media (max-width: 768px) {
-  .hide-text {
-    display: none;
-  }
-}
 </style>