From c71da4b6ae1d7228ff968d39c63db205caf61339 Mon Sep 17 00:00:00 2001 From: mesalogo Date: Sun, 13 Sep 2026 23:06:20 +0800 Subject: [PATCH] fix: browse project activity through cascading menus Replace the production activity dialog with anchored project and conversation menus, preserving exact conversation navigation and adding keyboard and narrow-window coverage. Include the interactive demo and design documentation. The demo hides idle activity and removes conversation arrows; production still retains those two elements. Validation: typecheck, lint and 11 ProjectActivity tests passed. The full suite timed out after 240 seconds with an agent-package offline inventory test failure. --- .../application-tool-navigation/README.md | 9 +- .../logic-design.md | 8 + .../navigation-demo.css | 36 +++ .../navigation-demo.html | 5 + .../navigation-demo.js | 116 ++++++++ .../application-tool-navigation/prd.md | 4 +- .../application-tool-navigation/progress.md | 29 ++ .../technical-design.md | 13 +- .../application-tool-navigation/ui-design.md | 26 +- .../user-stories.md | 29 ++ src/renderer/src/App.test.tsx | 58 ++-- src/renderer/src/App.tsx | 2 + src/renderer/src/ProjectActivity.test.tsx | 246 ++++++++++----- src/renderer/src/ProjectActivity.tsx | 281 ++++++++++++------ .../src/i18n/locales/en-US/workspace.ts | 3 + .../src/i18n/locales/zh-CN/workspace.ts | 3 + src/renderer/src/project-activity.css | 67 ++--- src/renderer/src/styles.css | 1 - 18 files changed, 675 insertions(+), 261 deletions(-) create mode 100644 docs/features/application-tool-navigation/progress.md diff --git a/docs/features/application-tool-navigation/README.md b/docs/features/application-tool-navigation/README.md index 88b9b2c0..fca4c7b4 100644 --- a/docs/features/application-tool-navigation/README.md +++ b/docs/features/application-tool-navigation/README.md @@ -8,7 +8,7 @@ 本轮更新实施计划与范围，旧版功能要求、验收和配套设计仍需按新计划同步，此项列为实现前的第一步。 项目活动汇总独立于上述应用中心计划，范围见 [FR-14](./prd.md#fr-14-项目活动汇总)。 -计数规则由[活动逻辑](./logic-design.md#9-项目活动汇总)定义，入口与弹窗见 +计数规则由[活动逻辑](./logic-design.md#9-项目活动汇总)定义，入口与级联菜单见 [活动界面](./ui-design.md#10-项目活动汇总)，数据加载与会话跳转见 [技术设计](./technical-design.md#12-项目活动汇总)。此处“活动”指当前运行或待处理会话， 与用于审计的“运行记录”不同；已完成未读面板属于后续范围，本次未实现。 @@ -22,6 +22,7 @@ | [功能逻辑设计](./logic-design.md) | 分类规则、入口状态、优先级与失败结果 | | [UI 设计](./ui-design.md) | 侧栏信息架构、控件、文案、键盘和响应式行为 | | [技术设计](./technical-design.md) | 现有模块映射、状态契约、持久化和实施顺序 | +| [实施进度](./progress.md) | 项目活动级联的生产实现与验证记录 | | [应用中心交互 Demo](./navigation-demo.html) | 对比六个候选方案；配套 CSS 和 JS 仅服务原型 | Demo 可直接在浏览器中打开，支持方案切换、浅深主题、添加、移除、排序和商店模拟。 @@ -34,6 +35,12 @@ Demo 可直接在浏览器中打开，支持方案切换、浅深主题、添加 附件、模拟语音、模板填入、原生命令选择、8 秒模拟回复、发送排队、立即插入、删除、停止， 以及上下文详情和模拟压缩。文件只读取名称，语音使用固定示例文本，不录音、不上传、不调用 AI。 这是输入区设计讨论用的原型，尚未改变正式产品或替代现有 UI 规范。 +左上角项目选择器下方仅在有运行中或待处理会话时显示活动摘要，全部空闲时隐藏。点击摘要打开项目 +列表，悬停或点击项目向右展开会话子菜单，点击会话才切换项目与对话。子菜单与项目列表 +相接，项目行保留子菜单箭头，会话行只显示名称与状态。支持上下方向键选择、右键进入、左键或 Esc 返回，顶层 Esc 关闭；窄屏在同一浮层内 +进入会话层，并提供返回按钮。页面上方可切换“有待处理、仅运行中、仅当前项目运行、全部 +空闲”四种场景。项目与会话均为演示数据；该级联交互已接入正式产品活动入口，范围与 +验证记录见[实施进度](./progress.md)。 按最新讨论，Demo 已移除左侧系统工具快捷区：文件、终端、浏览器和资源监控只在右侧 工作栏 Tab 中演示，不列入应用中心。上方正式文档仍保留原设计，待方案确定后同步。 diff --git a/docs/features/application-tool-navigation/logic-design.md b/docs/features/application-tool-navigation/logic-design.md index cb5f3d1e..9704b771 100644 --- a/docs/features/application-tool-navigation/logic-design.md +++ b/docs/features/application-tool-navigation/logic-design.md @@ -186,3 +186,11 @@ warming/loading/live/partial/error -> inactive 历史排队项、仅待调度的 Task、终态 Task 和未读标记本身不构成活动。活动结束且没有其他 运行或等待条件时移除该行，不能因历史任务或未读状态继续计数。 + +级联菜单先按项目归属聚合活动行，沿用本地、SSH Host、通道的稳定项目顺序；缺少项目 +元数据的归属组及“未归属项目”组放在已知项目之后。无归属组只用于访问这些会话，不增加 +项目计数。每个项目内先列待处理会话，再列运行中会话，同类别保留来源顺序。 + +展开项目只改变菜单层级，不导航。选中项目的活动全部结束后返回项目列表；全局活动结束后 +保留已打开的空状态和“暂无活动”入口。后台更新保留仍存在的焦点项，删除焦点项时将焦点 +移至当前层可用项或空菜单。关闭菜单后，新的活动不会自动重新打开菜单。 diff --git a/docs/features/application-tool-navigation/navigation-demo.css b/docs/features/application-tool-navigation/navigation-demo.css index 1026e2cf..1da67870 100644 --- a/docs/features/application-tool-navigation/navigation-demo.css +++ b/docs/features/application-tool-navigation/navigation-demo.css @@ -5,7 +5,43 @@ --accent: #086fc7; --accent-subtle: #e8f4ff; --accent-selected: #a7cfea; --font-family-ui: "Inter Variable", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC Variable", system-ui, sans-serif; --radius-control: 10px; --radius-card: 14px; + --warning: #865200; } +[data-theme="dark"] { --warning: #f2bd66; } +.project-lab { max-width: 1440px; margin: 0 auto 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--text-secondary); font-size: 12px; } +.project-lab select { font: inherit; color: var(--text-primary); background: var(--surface-raised); padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-control); } +.project-entry { position: relative; margin-bottom: 12px; } +#project-trigger { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--border-default); } +#project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.project-waiting { color: var(--warning); font-weight: 600; } +#activity-trigger { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -8px 0 12px; padding: 4px 8px; color: var(--text-secondary); font-size: 11px; text-align: left; } +#project-activity { position: fixed; inset: auto; margin: 0; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-primary); max-width: calc(100vw - 32px); } +#project-activity:popover-open { display: flex; align-items: stretch; } +#project-activity > section { width: 264px; max-width: calc(100vw - 34px); max-height: min(480px, calc(100dvh - 32px)); overflow: auto; padding: 8px; } +#project-activity h3 { margin: 8px; font-size: 11px; font-weight: 500; color: var(--text-secondary); overflow-wrap: anywhere; } +#activity-project-list > p { padding: 8px; } +#activity-project-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: 4px 8px; text-align: left; } +#activity-project-list button > span:first-child { overflow-wrap: anywhere; } +#activity-project-list small { grid-column: 1; font-size: 11px; color: var(--text-secondary); } +#activity-project-list button > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; } +#activity-project-list [aria-expanded="true"] { background: var(--accent-subtle); color: var(--accent); } +#activity-sessions { border-left: 1px solid var(--border-default); } +#activity-back { display: none; font-size: 12px; color: var(--accent); } +#project-activity.activity-left { flex-direction: row-reverse; } +.activity-left #activity-sessions { border-left: 0; border-right: 1px solid var(--border-default); } +.activity-compact.has-submenu #activity-projects { display: none; } +.activity-compact #activity-back { display: block; } +.activity-compact #activity-sessions { border: 0; } +#project-menu { position: fixed; inset: auto; margin: 0; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-primary); } +#project-list h3, #activity-list h3 { margin: 8px; font-size: 11px; font-weight: 500; color: var(--text-secondary); } +#project-list button { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; } +.project-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; } +#project-list [aria-current="true"] { background: var(--accent-subtle); color: var(--accent); } +#project-list small { width: 100%; display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); } +#activity-list button { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; text-align: left; padding: 12px; } +#activity-list strong { font-weight: 500; overflow-wrap: anywhere; } +#activity-list small { grid-column: 1; color: var(--text-secondary); overflow-wrap: anywhere; } +.history button small { display: block; font-size: 11px; color: var(--text-secondary); } [data-theme="dark"] { color-scheme: dark; --surface-canvas: #07131f; --surface-raised: #102335; --surface-subtle: #162c40; --text-primary: #edf7ff; --text-secondary: #b5c6d5; --border-default: #29445a; --accent: #72c5ff; --accent-subtle: #123b5b; --accent-selected: #28668f; } * { box-sizing: border-box; } body { margin: 0; padding: 24px 32px; font: 13px/1.6 var(--font-family-ui); background: var(--surface-subtle); color: var(--text-primary); } diff --git a/docs/features/application-tool-navigation/navigation-demo.html b/docs/features/application-tool-navigation/navigation-demo.html index 36e90b11..fa4acee1 100644 --- a/docs/features/application-tool-navigation/navigation-demo.html +++ b/docs/features/application-tool-navigation/navigation-demo.html @@ -21,9 +21,14 @@
A / 紧凑 Dock

交互原型 · 商店与指标均为演示数据
+
有活动时显示摘要，悬停或点击项目向右展开会话。