From db216a5cc4e2910e203eadc99cf8fceb267b266b Mon Sep 17 00:00:00 2001
From: chiguyong <chiguyong@beyondsoft.com>
Date: Sat, 13 Jun 2026 02:43:41 +0800
Subject: [PATCH] feat(gui): streamline evolution panel and group settings (U6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EvolutionView: simplify from 6 sub-panels to 3 tabs (概览+指标, 经验+坑点, 用量)
- SettingsView: group into 4 tabs (LLM, 技能, 知识库, 系统), each with independent save
- SkillsView: replace hardcoded colors with Design Tokens
- All three views: replace hardcoded colors with Design Token references
---
 .../frontend/src/views/EvolutionView.vue      | 113 ++-----
 .../frontend/src/views/SettingsView.vue       | 277 +++++++++---------
 .../server/frontend/src/views/SkillsView.vue  |  80 ++++-
 3 files changed, 242 insertions(+), 228 deletions(-)

diff --git a/src/agentkit/server/frontend/src/views/EvolutionView.vue b/src/agentkit/server/frontend/src/views/EvolutionView.vue
index e3d81c3..6965238 100644
--- a/src/agentkit/server/frontend/src/views/EvolutionView.vue
+++ b/src/agentkit/server/frontend/src/views/EvolutionView.vue
@@ -1,65 +1,32 @@
 <template>
   <div class="evolution-container">
-    <div class="evolution-sidebar">
-      <div class="evolution-sidebar__header">
-        <h2>自进化</h2>
-        <a-spin v-if="store.isLoading" size="small" />
-      </div>
-      <a-menu mode="inline" :selected-keys="[currentRoute]" class="evolution-sidebar__menu">
-        <a-menu-item key="overview" @click="navigate('overview')">
-          <DashboardOutlined /> 概览
-        </a-menu-item>
-        <a-menu-item key="experiences" @click="navigate('experiences')">
-          <HistoryOutlined /> 经验记录
-        </a-menu-item>
-        <a-menu-item key="metrics" @click="navigate('metrics')">
-          <LineChartOutlined /> 指标趋势
-        </a-menu-item>
-        <a-menu-item key="pitfalls" @click="navigate('pitfalls')">
-          <WarningOutlined /> 避坑预警
-        </a-menu-item>
-        <a-menu-item key="optimizations" @click="navigate('optimizations')">
-          <RocketOutlined /> 路径优化
-        </a-menu-item>
-        <a-menu-item key="usage" @click="navigate('usage')">
-          <CloudServerOutlined /> 用量统计
-        </a-menu-item>
-      </a-menu>
-    </div>
-    <div class="evolution-content">
-      <router-view />
-    </div>
+    <a-tabs v-model:activeKey="activeTab" class="evolution-tabs">
+      <a-tab-pane key="overview" tab="概览+指标">
+        <DashboardOverview />
+      </a-tab-pane>
+      <a-tab-pane key="experiences" tab="经验+坑点">
+        <div class="evolution-panels">
+          <ExperienceTimeline :experiences="store.experiences" />
+          <PitfallPanel :warnings="store.pitfalls" />
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="usage" tab="用量">
+        <UsagePanel />
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { Spin as ASpin, Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue'
-import {
-  DashboardOutlined,
-  HistoryOutlined,
-  LineChartOutlined,
-  WarningOutlined,
-  RocketOutlined,
-  CloudServerOutlined,
-} from '@ant-design/icons-vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useEvolutionStore } from '@/stores/evolution'
+import DashboardOverview from '@/components/evolution/DashboardOverview.vue'
+import ExperienceTimeline from '@/components/evolution/ExperienceTimeline.vue'
+import PitfallPanel from '@/components/evolution/PitfallPanel.vue'
+import UsagePanel from '@/components/evolution/UsagePanel.vue'
 
-const router = useRouter()
-const route = useRoute()
 const store = useEvolutionStore()
-
-const currentRoute = computed(() => {
-  const path = route.path
-  if (path === '/evolution' || path === '/evolution/') return 'overview'
-  const segment = path.split('/').pop()
-  return segment || 'overview'
-})
-
-function navigate(key: string) {
-  router.push(`/evolution/${key}`)
-}
+const activeTab = ref('overview')
 
 onMounted(() => {
   store.loadExperiences()
@@ -76,40 +43,18 @@ onUnmounted(() => {
 <style scoped>
 .evolution-container {
   height: 100%;
-  display: flex;
-  overflow: hidden;
+  overflow-y: auto;
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-primary);
 }
 
-.evolution-sidebar {
-  width: 180px;
-  flex-shrink: 0;
-  background: #fff;
-  border-right: 1px solid #f0f0f0;
+.evolution-tabs {
+  height: 100%;
+}
+
+.evolution-panels {
   display: flex;
   flex-direction: column;
-}
-
-.evolution-sidebar__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 16px 8px;
-}
-
-.evolution-sidebar__header h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.evolution-sidebar__menu {
-  flex: 1;
-  border-inline-end: none !important;
-}
-
-.evolution-content {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
+  gap: var(--space-4);
 }
 </style>
diff --git a/src/agentkit/server/frontend/src/views/SettingsView.vue b/src/agentkit/server/frontend/src/views/SettingsView.vue
index 7db3a1d..233a0e3 100644
--- a/src/agentkit/server/frontend/src/views/SettingsView.vue
+++ b/src/agentkit/server/frontend/src/views/SettingsView.vue
@@ -1,144 +1,144 @@
 <template>
   <div class="settings-view">
-    <a-form layout="vertical" class="settings-form">
-      <!-- LLM 配置 -->
-      <a-divider orientation="left">LLM 配置</a-divider>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="Provider">
-            <a-select v-model:value="settingsStore.llm.provider" placeholder="选择 LLM 提供商">
-              <a-select-option value="anthropic">Anthropic</a-select-option>
-              <a-select-option value="openai">OpenAI</a-select-option>
-              <a-select-option value="gemini">Gemini</a-select-option>
-              <a-select-option value="custom">自定义</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="模型">
-            <a-input v-model:value="settingsStore.llm.model" placeholder="例如: claude-sonnet-4-20250514" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="API Key">
-            <a-input-password v-model:value="settingsStore.llm.api_key" placeholder="输入 API Key" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="Base URL">
-            <a-input v-model:value="settingsStore.llm.base_url" placeholder="自定义 API 地址（可选）" />
-          </a-form-item>
-        </a-col>
-      </a-row>
+    <a-tabs v-model:activeKey="activeTab" class="settings-tabs">
+      <a-tab-pane key="llm" tab="LLM 配置">
+        <a-form layout="vertical" class="settings-form">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="Provider">
+                <a-select v-model:value="settingsStore.llm.provider" placeholder="选择 LLM 提供商">
+                  <a-select-option value="anthropic">Anthropic</a-select-option>
+                  <a-select-option value="openai">OpenAI</a-select-option>
+                  <a-select-option value="gemini">Gemini</a-select-option>
+                  <a-select-option value="custom">自定义</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="模型">
+                <a-input v-model:value="settingsStore.llm.model" placeholder="例如: claude-sonnet-4-20250514" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="API Key">
+                <a-input-password v-model:value="settingsStore.llm.api_key" placeholder="输入 API Key" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="Base URL">
+                <a-input v-model:value="settingsStore.llm.base_url" placeholder="自定义 API 地址（可选）" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">保存 LLM 配置</a-button>
+        </a-form>
+      </a-tab-pane>
 
-      <!-- 技能配置 -->
-      <a-divider orientation="left">技能配置</a-divider>
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="默认技能">
-            <a-input v-model:value="settingsStore.skillSettings.default_skill" placeholder="留空则使用自动路由" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="自动路由">
-            <a-switch v-model:checked="settingsStore.skillSettings.auto_routing" />
-            <span style="margin-left: 8px; color: #999">启用后自动将消息路由到最匹配的技能</span>
-          </a-form-item>
-        </a-col>
-      </a-row>
+      <a-tab-pane key="skills" tab="技能管理">
+        <a-form layout="vertical" class="settings-form">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="默认技能">
+                <a-input v-model:value="settingsStore.skillSettings.default_skill" placeholder="留空则使用自动路由" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="自动路由">
+                <a-switch v-model:checked="settingsStore.skillSettings.auto_routing" />
+                <span class="settings-form__hint">启用后自动将消息路由到最匹配的技能</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">保存技能配置</a-button>
+        </a-form>
+      </a-tab-pane>
 
-      <!-- 知识库配置 -->
-      <a-divider orientation="left">知识库配置</a-divider>
-      <a-row :gutter="16">
-        <a-col :span="8">
-          <a-form-item label="默认信息源">
-            <a-select
-              v-model:value="settingsStore.kbSettings.default_sources"
-              mode="multiple"
-              placeholder="选择默认信息源"
-            >
-              <a-select-option value="local">本地文档</a-select-option>
-              <a-select-option value="feishu">飞书</a-select-option>
-              <a-select-option value="confluence">Confluence</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="检索数量 (Top K)">
-            <a-input-number v-model:value="settingsStore.kbSettings.top_k" :min="1" :max="50" style="width: 100%" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="检索模式">
-            <a-select v-model:value="settingsStore.kbSettings.retrieval_mode">
-              <a-select-option value="standard">标准</a-select-option>
-              <a-select-option value="rerank">重排序</a-select-option>
-              <a-select-option value="compression">压缩</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
+      <a-tab-pane key="knowledge" tab="知识库设置">
+        <a-form layout="vertical" class="settings-form">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="默认信息源">
+                <a-select
+                  v-model:value="settingsStore.kbSettings.default_sources"
+                  mode="multiple"
+                  placeholder="选择默认信息源"
+                >
+                  <a-select-option value="local">本地文档</a-select-option>
+                  <a-select-option value="feishu">飞书</a-select-option>
+                  <a-select-option value="confluence">Confluence</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="检索数量 (Top K)">
+                <a-input-number v-model:value="settingsStore.kbSettings.top_k" :min="1" :max="50" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="检索模式">
+                <a-select v-model:value="settingsStore.kbSettings.retrieval_mode">
+                  <a-select-option value="standard">标准</a-select-option>
+                  <a-select-option value="rerank">重排序</a-select-option>
+                  <a-select-option value="compression">压缩</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">保存知识库配置</a-button>
+        </a-form>
+      </a-tab-pane>
 
-      <!-- 系统配置 -->
-      <a-divider orientation="left">系统配置</a-divider>
-      <a-row :gutter="16">
-        <a-col :span="8">
-          <a-form-item label="速率限制 (次/分钟)">
-            <a-input-number v-model:value="settingsStore.system.rate_limit" :min="1" :max="1000" style="width: 100%" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="日志级别">
-            <a-select v-model:value="settingsStore.system.logging_level">
-              <a-select-option value="DEBUG">DEBUG</a-select-option>
-              <a-select-option value="INFO">INFO</a-select-option>
-              <a-select-option value="WARNING">WARNING</a-select-option>
-              <a-select-option value="ERROR">ERROR</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :span="8">
-          <a-form-item label="CORS 来源">
-            <a-select
-              v-model:value="settingsStore.system.cors_origins"
-              mode="tags"
-              placeholder="输入 CORS 来源"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
+      <a-tab-pane key="system" tab="系统设置">
+        <a-form layout="vertical" class="settings-form">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="速率限制 (次/分钟)">
+                <a-input-number v-model:value="settingsStore.system.rate_limit" :min="1" :max="1000" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="日志级别">
+                <a-select v-model:value="settingsStore.system.logging_level">
+                  <a-select-option value="DEBUG">DEBUG</a-select-option>
+                  <a-select-option value="INFO">INFO</a-select-option>
+                  <a-select-option value="WARNING">WARNING</a-select-option>
+                  <a-select-option value="ERROR">ERROR</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="CORS 来源">
+                <a-select
+                  v-model:value="settingsStore.system.cors_origins"
+                  mode="tags"
+                  placeholder="输入 CORS 来源"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">保存系统配置</a-button>
+        </a-form>
+      </a-tab-pane>
+    </a-tabs>
 
-      <div class="settings-form__actions">
-        <a-button type="primary" :loading="settingsStore.isSaving" @click="handleSave">
-          保存设置
-        </a-button>
-        <a-alert
-          v-if="settingsStore.saveSuccess"
-          message="设置已保存"
-          type="success"
-          show-icon
-          style="margin-left: 12px"
-        />
-        <a-alert
-          v-if="settingsStore.error"
-          :message="settingsStore.error"
-          type="error"
-          show-icon
-          style="margin-left: 12px"
-        />
-      </div>
-    </a-form>
+    <div v-if="settingsStore.saveSuccess" class="settings-view__alert">
+      <a-alert message="设置已保存" type="success" show-icon />
+    </div>
+    <div v-if="settingsStore.error" class="settings-view__alert">
+      <a-alert :message="settingsStore.error" type="error" show-icon />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import { useSettingsStore } from '@/stores/settings'
 
 const settingsStore = useSettingsStore()
+const activeTab = ref('llm')
 
 onMounted(() => {
   settingsStore.fetchSettings()
@@ -157,18 +157,27 @@ async function handleSave(): Promise<void> {
 <style scoped>
 .settings-view {
   height: 100%;
-  padding: 16px 24px;
+  padding: var(--space-4) var(--space-6);
   overflow-y: auto;
-  background: #fff;
+  background: var(--bg-primary);
+}
+
+.settings-tabs {
+  height: 100%;
 }
 
 .settings-form {
-  max-width: 900px;
+  max-width: 600px;
 }
 
-.settings-form__actions {
-  margin-top: 24px;
-  display: flex;
-  align-items: center;
+.settings-form__hint {
+  margin-left: var(--space-2);
+  color: var(--text-tertiary);
+  font-size: var(--font-sm);
+}
+
+.settings-view__alert {
+  margin-top: var(--space-3);
+  max-width: 600px;
 }
 </style>
diff --git a/src/agentkit/server/frontend/src/views/SkillsView.vue b/src/agentkit/server/frontend/src/views/SkillsView.vue
index 9b220e1..f7f8df7 100644
--- a/src/agentkit/server/frontend/src/views/SkillsView.vue
+++ b/src/agentkit/server/frontend/src/views/SkillsView.vue
@@ -12,10 +12,16 @@
           {{ cap.display_name }} ({{ cap.skill_count }})
         </a-select-option>
       </a-select>
-      <a-button @click="handleRefresh" :loading="skillsStore.isLoading">
-        <template #icon><ReloadOutlined /></template>
-        刷新
-      </a-button>
+      <a-space>
+        <a-button type="primary" @click="showInstallModal = true">
+          <template #icon><PlusOutlined /></template>
+          安装技能
+        </a-button>
+        <a-button @click="handleRefresh" :loading="skillsStore.isLoading">
+          <template #icon><ReloadOutlined /></template>
+          刷新
+        </a-button>
+      </a-space>
     </div>
 
     <a-spin :spinning="skillsStore.isLoading">
@@ -35,13 +41,35 @@
       :skill="skillsStore.selectedSkill"
       @close="handleDetailClose"
     />
+
+    <a-modal
+      v-model:open="showInstallModal"
+      title="安装技能"
+      :confirm-loading="installing"
+      @ok="handleInstall"
+      ok-text="安装"
+      cancel-text="取消"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="技能名称" required>
+          <a-input v-model:value="installName" placeholder="例如: find-skills" />
+        </a-form-item>
+        <a-form-item label="来源 URL（可选）">
+          <a-input v-model:value="installSource" placeholder="https://... 或留空自动搜索" />
+        </a-form-item>
+      </a-form>
+      <a-alert v-if="installError" :message="installError" type="error" show-icon style="margin-top: 8px" />
+      <a-alert v-if="installSuccess" :message="`技能 ${installSuccess} 安装成功！`" type="success" show-icon style="margin-top: 8px" />
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { ReloadOutlined } from '@ant-design/icons-vue'
+import { ReloadOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
 import { useSkillsStore } from '@/stores/skills'
+import { skillsApi } from '@/api/skills'
 import SkillCard from '@/components/skills/SkillCard.vue'
 import SkillDetail from '@/components/skills/SkillDetail.vue'
 
@@ -49,6 +77,14 @@ const skillsStore = useSkillsStore()
 const selectedCapability = ref<string | undefined>(undefined)
 const showDetail = ref(false)
 
+// Install state
+const showInstallModal = ref(false)
+const installName = ref('')
+const installSource = ref('')
+const installing = ref(false)
+const installError = ref('')
+const installSuccess = ref('')
+
 onMounted(async () => {
   await Promise.all([
     skillsStore.fetchSkills(),
@@ -77,26 +113,50 @@ function handleDetailClose(): void {
   showDetail.value = false
   skillsStore.clearSelectedSkill()
 }
+
+async function handleInstall(): Promise<void> {
+  if (!installName.value.trim()) {
+    installError.value = '请输入技能名称'
+    return
+  }
+  installing.value = true
+  installError.value = ''
+  installSuccess.value = ''
+  try {
+    const result = await skillsApi.installSkill(
+      installName.value.trim(),
+      installSource.value.trim() || undefined
+    )
+    installSuccess.value = result.name
+    message.success(`技能 ${result.name} 安装成功！`)
+    // Refresh skill list
+    await handleRefresh()
+  } catch (e: any) {
+    installError.value = e?.message || '安装失败'
+  } finally {
+    installing.value = false
+  }
+}
 </script>
 
 <style scoped>
 .skills-view {
   height: 100%;
-  padding: 16px 24px;
+  padding: var(--space-4) var(--space-6);
   overflow-y: auto;
-  background: #fff;
+  background: var(--bg-primary);
 }
 
 .skills-view__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: var(--space-4);
 }
 
 .skills-view__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
 }
 </style>