feat(web): 合并知识库导航入口并调整视觉细节

Author: xerrors

docs/develop-guides/roadmap.md

@@ -31,6 +31,9 @@
 ### 0.6.1
 
 <!-- 0.6.1 的内容请放在这里 -->
+- 合并知识库导航入口：左侧导航仅保留“知识库”，文档知识库与图知识库在页面 header 中通过同一组轻量切换入口切换，保留原有列表与图谱内容区交互。
+- 抽象页面轻量切换 header：知识库与扩展管理页直接共用 `ViewSwitchHeader`，通过统一切换样式和 actions slot 收敛文档知识库、知识图谱、Tools、MCP、Subagents、Skills 等入口的信息层级；扩展管理各列表的刷新入口下沉到搜索框右侧，并统一搜索框与工具按钮的边框和圆角。
+- 调整任务中心交互：入口移动到 GitHub 按钮下方，并将右侧抽屉展示改为居中弹窗，减少对主页面布局的占用。
 - 调整 backend Python 工作区依赖边界：将 `backend/package/yuxi` 明确为承载核心运行依赖的业务包，根 `backend/pyproject.toml` 仅保留工作区入口与开发/测试配置，减少依赖职责混淆。
 - 将 `yuxi` 从 uv workspace 成员调整为 `backend/package` 下可独立构建的本地 Python 包，backend 通过 path dependency 以已安装包形式发现依赖，移除对 `PYTHONPATH=/app/package` 的运行时耦合。
 - 修复沙盒 `workspace` 隔离粒度：宿主机目录从共享 `saves/threads/shared/workspace` 收敛为用户级 `saves/threads/shared/<user_id>/workspace`，并同步传递 `user_id` 到 sandbox 路径解析、provisioner 挂载与 viewer/chat 测试，保证同用户跨线程共享、不同用户隔离。

web/src/assets/css/extensions.less

@@ -41,23 +41,39 @@
       min-width: 0;
       padding: 0;
     }
+
+    .search-box :deep(.ant-input-affix-wrapper) {
+      height: 28px;
+      padding: 0 10px;
+      border: 1px solid var(--gray-150);
+      border-radius: 8px;
+      background-color: var(--gray-0);
+      box-shadow: none;
+
+      &:hover,
+      &:focus,
+      &.ant-input-affix-wrapper-focused {
+        border-color: var(--gray-200);
+        box-shadow: none;
+      }
+    }
   }
 
   .search-box {
     padding: 8px 12px 0;
 
     :deep(.ant-input-affix-wrapper) {
       height: 28px;
-      padding: 0 12px;
-      // border: none;
+      padding: 0 10px;
+      border: 1px solid var(--gray-150);
       border-radius: 8px;
       background-color: var(--gray-0);
       box-shadow: none;
 
       &:hover,
       &:focus,
       &.ant-input-affix-wrapper-focused {
-        // border: none;
+        border-color: var(--gray-200);
         box-shadow: none;
       }
     }
@@ -84,9 +100,9 @@
       color: var(--gray-500);
     }
 
-    // :deep(.ant-input-outlined) {
-    //   border: none;
-    // }
+    :deep(.ant-input-outlined) {
+      border-color: var(--gray-150);
+    }
   }
 
   .sidebar-tool {
@@ -145,8 +161,7 @@
 
   &.active {
     background-color: var(--gray-0);
-    border-color: @border-color;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    border-color: var(--main-500);
   }
 
   .item-header {
@@ -212,7 +227,7 @@
 }
 
 .list-section-title {
-  padding: 10px 14px 6px;
+  padding: 0px 14px;
   color: var(--gray-500);
   font-size: 11px;
   font-weight: 600;

web/src/components/AgentConfigSidebar.vue

@@ -588,7 +588,7 @@ const configSwitchOptions = computed(() => {
 
   if (userStore.isAdmin) {
     options.push({
-      label: '新建配置',
+      label: '+ 新建配置',
       value: CREATE_CONFIG_OPTION_VALUE
     })
   }

web/src/components/AgentPanel.vue

@@ -2,12 +2,25 @@
   <div ref="panelRef" class="agent-panel" :class="{ resizing: isResizing }">
     <!-- 拖拽手柄 -->
     <div class="resize-handle" @pointerdown="startResize"></div>
-    <div class="panel-header">
-      <div class="panel-title">
-        <FolderCode :size="20" class="header-icon" />
-        <span><strong>文件系统</strong></span>
+    <div class="panel-header" :class="{ 'is-compact': isCompactHeader }">
+      <div class="panel-header-main">
+        <div class="panel-title">
+          <span><strong>文件系统</strong></span>
+        </div>
+        <div class="window-actions">
+          <button
+            class="header-action-btn"
+            :title="isExpanded ? '恢复高度' : '向上展开'"
+            @click="emit('toggle-expand')"
+          >
+            <component :is="isExpanded ? ChevronsDownUp : ChevronsUpDown" :size="15" />
+          </button>
+          <button class="close-btn" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </div>
       </div>
-      <div class="header-actions">
+      <div class="file-toolbar">
         <button
           class="header-action-btn"
           title="新建文件夹"
@@ -27,17 +40,6 @@
         <button class="header-action-btn" title="刷新" @click="emitRefresh">
           <RefreshCw :size="15" />
         </button>
-        <span class="header-divider"></span>
-        <button
-          class="header-action-btn"
-          :title="isExpanded ? '恢复高度' : '向上展开'"
-          @click="emit('toggle-expand')"
-        >
-          <component :is="isExpanded ? ChevronsDownUp : ChevronsUpDown" :size="15" />
-        </button>
-        <button class="close-btn" @click="$emit('close')">
-          <X :size="18" />
-        </button>
       </div>
     </div>
     <input
@@ -166,7 +168,6 @@ import {
   ChevronsDownUp,
   ChevronsUpDown,
   Download,
-  FolderCode,
   FolderPlus,
   RefreshCw,
   Trash2,
@@ -239,6 +240,7 @@ const expandedKeys = ref([])
 const deletingPaths = ref(new Set())
 
 const useInlinePreview = computed(() => panelWidth.value >= INLINE_PREVIEW_MIN_WIDTH)
+const isCompactHeader = computed(() => panelWidth.value > 0 && panelWidth.value < 360)
 
 const buildDisplayName = (fullPath) => {
   const normalized = String(fullPath || '').replace(/\/+$/, '')
@@ -866,10 +868,41 @@ watch(useInlinePreview, (isInline) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   padding: 4px 16px;
-  height: 56px;
+  min-height: 56px;
   background: var(--gray-25);
   flex-shrink: 0;
+
+  &.is-compact {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 12px;
+
+    .panel-header-main {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .file-toolbar {
+      order: 2;
+      width: 100%;
+      justify-content: flex-start;
+      padding: 4px;
+      border-right: none;
+      border: 1px solid var(--gray-150);
+      border-radius: 8px;
+      background: var(--gray-0);
+    }
+  }
+}
+
+.panel-header-main {
+  display: contents;
 }
 
 .header-action-btn {
@@ -902,26 +935,41 @@ watch(useInlinePreview, (isInline) => {
   display: flex;
   align-items: center;
   gap: 12px;
+  order: 1;
+  flex: 1;
+  min-width: 0;
   font-weight: 600;
   font-size: 14px;
   color: var(--gray-900);
 
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .header-icon {
+    flex-shrink: 0;
     color: var(--gray-700);
   }
 }
 
-.header-actions {
+.file-toolbar,
+.window-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.header-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--gray-300);
-  margin: 0 4px;
+.file-toolbar {
+  order: 2;
+  padding-right: 8px;
+  border-right: 1px solid var(--gray-300);
+}
+
+.window-actions {
+  order: 3;
+  flex-shrink: 0;
 }
 
 .hidden-file-input {

web/src/components/HeaderComponent.vue

@@ -43,7 +43,8 @@ defineProps({
 .header-container {
   background-color: var(--bg-sider);
   backdrop-filter: blur(10px);
-  padding: 10px 24px;
+  padding: 8px 16px;
+  height: 50px;
   border-bottom: 1px solid var(--gray-150);
   position: sticky;
   top: 0;
@@ -52,6 +53,8 @@ defineProps({
 
 .header-content {
   display: flex;
+  width: 100%;
+  height: 100%;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
@@ -71,7 +74,7 @@ defineProps({
 
   h1 {
     margin: 0;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     color: var(--gray-2000);
   }

web/src/components/McpServersComponent.vue

@@ -7,15 +7,23 @@
       <!-- 左侧：MCP 列表 -->
       <div class="sidebar-list">
         <!-- 搜索框 -->
-        <div class="search-box">
-          <a-input
-            v-model:value="searchQuery"
-            placeholder="搜索 MCP..."
-            allow-clear
-            class="search-input"
-          >
-            <template #prefix><Search :size="14" class="text-muted" /></template>
-          </a-input>
+        <div class="sidebar-toolbar">
+          <div class="search-box">
+            <a-input
+              v-model:value="searchQuery"
+              placeholder="搜索 MCP..."
+              allow-clear
+              class="search-input"
+            >
+              <template #prefix><Search :size="14" class="text-muted" /></template>
+            </a-input>
+          </div>
+
+          <a-tooltip title="刷新 MCP">
+            <a-button class="sidebar-tool" :disabled="loading" @click="fetchServers">
+              <RotateCw :size="14" />
+            </a-button>
+          </a-tooltip>
         </div>
 
         <!-- 统计信息 -->

web/src/components/SkillsManagerComponent.vue

@@ -6,15 +6,23 @@
     <div class="layout-wrapper" :class="{ 'content-loading': loading }">
       <!-- 左侧：技能列表 -->
       <div class="sidebar-list">
-        <div class="search-box">
-          <a-input
-            v-model:value="searchQuery"
-            placeholder="搜索技能..."
-            allow-clear
-            class="search-input"
-          >
-            <template #prefix><Search :size="14" class="text-muted" /></template>
-          </a-input>
+        <div class="sidebar-toolbar">
+          <div class="search-box">
+            <a-input
+              v-model:value="searchQuery"
+              placeholder="搜索技能..."
+              allow-clear
+              class="search-input"
+            >
+              <template #prefix><Search :size="14" class="text-muted" /></template>
+            </a-input>
+          </div>
+
+          <a-tooltip title="刷新 Skills">
+            <a-button class="sidebar-tool" :disabled="loading" @click="fetchSkills">
+              <RotateCw :size="14" />
+            </a-button>
+          </a-tooltip>
         </div>
 
         <div class="list-container">
@@ -1211,20 +1219,17 @@ defineExpose({
 .tree-container {
   width: 240px;
   border-right: 1px solid @border-color;
-  background-color: @bg-secondary;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 
   .tree-header {
-    padding: 10px 16px;
+    padding: 10px 12px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid @border-color;
-    background-color: var(--gray-50);
     .label {
-      font-size: 11px;
+      font-size: 12px;
       font-weight: 600;
       color: var(--gray-500);
       text-transform: uppercase;
@@ -1251,7 +1256,8 @@ defineExpose({
   .tree-content {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    height: 100%;
+    padding: 8px 0;
   }
 }
 
@@ -1264,8 +1270,7 @@ defineExpose({
   min-height: 0;
 
   .editor-header {
-    padding: 8px 16px;
-    border-bottom: 1px solid @border-color;
+    padding: 8px 16px 4px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1327,7 +1332,7 @@ defineExpose({
     height: 100%;
     border: none;
     resize: none;
-    padding: 20px;
+    padding: 16px;
     font-family: 'Fira Code', 'Monaco', monospace;
     font-size: 13px;
     line-height: 1.6;