From 2a52b368f06fff24d38caa39b393bd46b46fce85 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Mon, 6 Apr 2026 21:04:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=90=88=E5=B9=B6=E7=9F=A5?= =?UTF-8?q?=E8=AF=86=E5=BA=93=E5=AF=BC=E8=88=AA=E5=85=A5=E5=8F=A3=E5=B9=B6?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A7=86=E8=A7=89=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/develop-guides/roadmap.md | 3 + web/src/assets/css/extensions.less | 43 ++-- web/src/components/AgentConfigSidebar.vue | 2 +- web/src/components/AgentPanel.vue | 96 +++++-- web/src/components/HeaderComponent.vue | 7 +- web/src/components/McpServersComponent.vue | 26 +- web/src/components/SkillsManagerComponent.vue | 41 +-- web/src/components/SubAgentsComponent.vue | 27 +- web/src/components/TaskCenterDrawer.vue | 31 ++- web/src/components/ToolsManagerComponent.vue | 17 +- web/src/components/ViewSwitchHeader.vue | 109 ++++++++ web/src/layouts/AppLayout.vue | 73 +++--- web/src/views/DataBaseView.vue | 34 ++- web/src/views/ExtensionsView.vue | 238 +++++------------- web/src/views/GraphView.vue | 16 +- 15 files changed, 451 insertions(+), 312 deletions(-) create mode 100644 web/src/components/ViewSwitchHeader.vue diff --git a/docs/develop-guides/roadmap.md b/docs/develop-guides/roadmap.md index 6f5daf81..922fb464 100644 --- a/docs/develop-guides/roadmap.md +++ b/docs/develop-guides/roadmap.md @@ -31,6 +31,9 @@ ### 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//workspace`，并同步传递 `user_id` 到 sandbox 路径解析、provisioner 挂载与 viewer/chat 测试，保证同用户跨线程共享、不同用户隔离。 diff --git a/web/src/assets/css/extensions.less b/web/src/assets/css/extensions.less index 948d8ddf..066deb6b 100644 --- a/web/src/assets/css/extensions.less +++ b/web/src/assets/css/extensions.less @@ -41,15 +41,11 @@ min-width: 0; padding: 0; } - } - .search-box { - padding: 8px 12px 0; - - :deep(.ant-input-affix-wrapper) { + .search-box :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; @@ -57,7 +53,27 @@ &:hover, &:focus, &.ant-input-affix-wrapper-focused { - // border: none; + border-color: var(--gray-200); + box-shadow: none; + } + } + } + + .search-box { + padding: 8px 12px 0; + + :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; } } @@ -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; diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue index ba2ba418..0d4e3553 100644 --- a/web/src/components/AgentConfigSidebar.vue +++ b/web/src/components/AgentConfigSidebar.vue @@ -588,7 +588,7 @@ const configSwitchOptions = computed(() => { if (userStore.isAdmin) { options.push({ - label: '新建配置', + label: '+ 新建配置', value: CREATE_CONFIG_OPTION_VALUE }) } diff --git a/web/src/components/AgentPanel.vue b/web/src/components/AgentPanel.vue index 61df54ca..5782cb08 100644 --- a/web/src/components/AgentPanel.vue +++ b/web/src/components/AgentPanel.vue @@ -2,12 +2,25 @@
-
-
- - 文件系统 +
+
+
+ 文件系统 +
+
+ + +
-
+
- - -
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 { diff --git a/web/src/components/HeaderComponent.vue b/web/src/components/HeaderComponent.vue index 5afc19a9..bbbd9fac 100644 --- a/web/src/components/HeaderComponent.vue +++ b/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); } diff --git a/web/src/components/McpServersComponent.vue b/web/src/components/McpServersComponent.vue index a9291be1..0e1b8194 100644 --- a/web/src/components/McpServersComponent.vue +++ b/web/src/components/McpServersComponent.vue @@ -7,15 +7,23 @@
-
- - - +
+
+ + + +
+ + + + + +
diff --git a/web/src/components/SkillsManagerComponent.vue b/web/src/components/SkillsManagerComponent.vue index cb993416..fde94556 100644 --- a/web/src/components/SkillsManagerComponent.vue +++ b/web/src/components/SkillsManagerComponent.vue @@ -6,15 +6,23 @@
-
- - - +
+
+ + + +
+ + + + + +
@@ -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; diff --git a/web/src/components/SubAgentsComponent.vue b/web/src/components/SubAgentsComponent.vue index 00891cca..a7161f18 100644 --- a/web/src/components/SubAgentsComponent.vue +++ b/web/src/components/SubAgentsComponent.vue @@ -7,15 +7,23 @@
-
- - - +
+
+ + + +
+ + + + + +
@@ -298,6 +306,7 @@ import { Bot, Pencil, Trash2, + RotateCw, Info, MessageSquare, FileText, diff --git a/web/src/components/TaskCenterDrawer.vue b/web/src/components/TaskCenterDrawer.vue index a97ce575..198383d1 100644 --- a/web/src/components/TaskCenterDrawer.vue +++ b/web/src/components/TaskCenterDrawer.vue @@ -1,5 +1,13 @@ + + diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue index 8a5c62d1..354c9a02 100644 --- a/web/src/layouts/AppLayout.vue +++ b/web/src/layouts/AppLayout.vue @@ -2,7 +2,7 @@ import { ref, reactive, onMounted, computed, provide } from 'vue' import { RouterLink, RouterView, useRoute } from 'vue-router' import { GithubOutlined } from '@ant-design/icons-vue' -import { Bot, Waypoints, LibraryBig, BarChart3, CircleCheck, Blocks } from 'lucide-vue-next' +import { Bot, LibraryBig, BarChart3, ClipboardList, Blocks } from 'lucide-vue-next' import { useConfigStore } from '@/stores/config' import { useDatabaseStore } from '@/stores/database' @@ -113,20 +113,13 @@ const mainList = computed(() => { if (userStore.isAdmin) { if (!isLiteMode) { - items.push( - { - name: '图谱', - path: '/graph', - icon: Waypoints, - activeIcon: Waypoints - }, - { - name: '知识库', - path: '/database', - icon: LibraryBig, - activeIcon: LibraryBig - } - ) + items.push({ + name: '知识库', + path: '/database', + activePaths: ['/database', '/graph'], + icon: LibraryBig, + activeIcon: LibraryBig + }) } if (userStore.isSuperAdmin) { @@ -149,6 +142,11 @@ const mainList = computed(() => { return items }) +const isNavItemActive = (item) => { + const activePaths = item.activePaths || [item.path] + return activePaths.some((path) => route.path === path || route.path.startsWith(`${path}/`)) +} + // Provide settings modal methods to child components provide('settingsModal', { openSettingsModal @@ -171,35 +169,18 @@ provide('settingsModal', { :to="item.path" v-show="!item.hidden" class="nav-item" + :class="{ active: isNavItemActive(item) }" active-class="active" > -
- - - - - - -
@@ -213,6 +194,24 @@ provide('settingsModal', {
+
+ + + + + + +