feat(frontend): 增强工作台快捷指令与仪表盘能力
补充快捷指令动态变量解析与编辑弹窗一键插入, 统一列表执行、粘贴到终端和批量发送的处理链路 扩展快捷命令右键菜单动作,并为文件面板新增 多根目录资源管理器式侧栏浏览体验 为首页 dashboard 增加当前用户与系统总览双视角的 实时会话指标展示,并同步更新相关知识库记录
This commit is contained in:
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"已完成:快捷命令右键菜单动作扩展","updated_at":"2026-03-26 00:43:00"}
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
# 变更提案: quickcommands-context-menu-actions
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 优化
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 已完成
|
||||
创建: 2026-03-26
|
||||
完成: 2026-03-26
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前快捷命令列表项虽然支持右键菜单,但菜单中只有“发送到全部会话”一个动作,和用户提供的参考图不一致。用户希望在快捷命令部分的右键菜单中补齐常用动作,包括立即执行、粘贴到终端输入框、复制命令、粘贴到快捷输入框、编辑和删除。
|
||||
|
||||
### 目标
|
||||
- 将快捷命令右键菜单扩展为与参考图接近的多动作菜单。
|
||||
- 保持“立即执行”为对当前活动 SSH 会话直接发送命令。
|
||||
- 将“粘贴到终端”实现为写入底部命令输入框但不发送。
|
||||
- 将“粘贴到快捷输入框”实现为写入快捷命令顶部搜索输入框,便于二次筛选或编辑。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
时间约束: 本轮内完成前端菜单扩展与基础验证
|
||||
性能约束: 不引入新依赖,沿用现有视图、store 和事件总线
|
||||
兼容性约束: 保持现有快捷命令执行、复制、编辑、删除和“发送到全部会话”能力不回退
|
||||
业务约束: “粘贴到终端”必须只写入命令输入框,不回车发送;菜单样式尽量贴近参考图
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 快捷命令右键菜单包含“立即执行 / 粘贴到终端 / 复制命令 / 粘贴到快捷输入框 / 编辑 / 删除”
|
||||
- [ ] “立即执行”继续向当前活动 SSH 会话发送处理后的命令
|
||||
- [ ] “粘贴到终端”仅写入底部命令输入框,不自动发送
|
||||
- [ ] “粘贴到快捷输入框”写入快捷命令顶部搜索输入框并刷新筛选
|
||||
- [ ] `packages/frontend` 的构建验证通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
继续在 `QuickCommandsView.vue` 内扩展现有右键菜单,不新拆组件。将快捷命令处理逻辑抽成“解析命令内容”和“执行菜单动作”两个层级:命令变量替换等公共处理复用给“立即执行”和“粘贴到终端”,复制/编辑/删除则复用现有函数。菜单模板改为图标 + 文案列表,并保留“发送到全部会话”作为扩展动作。文案统一写入 locale。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: `QuickCommandsView.vue` 的右键菜单结构与动作逻辑
|
||||
- frontend: 快捷命令 locale 文案
|
||||
预计变更文件: 3-4
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 右键菜单新增动作后与现有点击、hover 按钮行为冲突 | 中 | 仅在现有 context menu 状态机上扩展,不改列表项主点击路径 |
|
||||
| “粘贴到终端”与“立即执行”语义混淆,导致误发送 | 中 | 将终端输入框写入逻辑单独封装,明确不触发 `terminal:sendCommand` |
|
||||
| locale 文案分散,容易遗漏多语言同步 | 低 | 同轮同步 zh-CN / en-US / ja-JP |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计(可选)
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[QuickCommandsView context menu] --> B[resolveProcessedCommand]
|
||||
A --> C[executeCommand]
|
||||
A --> D[pasteToTerminalInput]
|
||||
A --> E[pasteToQuickCommandsSearch]
|
||||
A --> F[copy/edit/delete]
|
||||
```
|
||||
|
||||
### 数据模型
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `quickCommandContextTargetCommand` | `QuickCommandFE \| null` | 当前右键命中的快捷命令 |
|
||||
| `quickCommandContextMenuVisible` | `boolean` | 右键菜单显示状态 |
|
||||
| `activeSessionId` | `string \| undefined` | 当前活动 SSH 会话,用于“立即执行”和“粘贴到终端” |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 右键快捷命令后立即执行
|
||||
**模块**: frontend
|
||||
**条件**: 用户在快捷命令列表中右键某条命令,且当前存在活动 SSH 会话。
|
||||
**行为**: 点击“立即执行”后,对命令完成变量替换并发送到当前活动会话。
|
||||
**结果**: 用户无需左键执行即可从右键菜单直接运行命令。
|
||||
|
||||
### 场景: 右键快捷命令后粘贴到终端输入框
|
||||
**模块**: frontend
|
||||
**条件**: 用户在快捷命令列表中右键某条命令,且当前存在活动 SSH 会话。
|
||||
**行为**: 点击“粘贴到终端”后,将处理后的命令写入底部命令输入框,但不触发发送。
|
||||
**结果**: 用户可以继续手动修改命令,再自行决定何时发送。
|
||||
|
||||
### 场景: 右键快捷命令后回填到快捷输入框
|
||||
**模块**: frontend
|
||||
**条件**: 用户在快捷命令列表中右键某条命令。
|
||||
**行为**: 点击“粘贴到快捷输入框”后,将命令内容写入快捷命令顶部搜索框,并触发筛选。
|
||||
**结果**: 用户可基于命令内容快速筛选、比对或继续编辑快捷命令。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### quickcommands-context-menu-actions#D001: 继续在 `QuickCommandsView.vue` 内扩展菜单逻辑,而不是新建独立上下文菜单组件
|
||||
**日期**: 2026-03-26
|
||||
**状态**: ✅采纳
|
||||
**背景**: 当前右键菜单已经在 `QuickCommandsView.vue` 内实现了显示、定位和关闭逻辑,只是动作过少。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 直接扩展现有右键菜单 | 改动集中,复用现有状态和依赖,交付速度快 | 菜单逻辑继续留在单文件内 |
|
||||
| B: 抽离独立菜单组件 | 结构更分明 | 需要额外抽 props / emits,当前收益不高 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: 这是一次局部交互增强,现有右键菜单基础已经足够,直接扩展更符合最小改动原则。
|
||||
**影响**: frontend
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: 延续当前深色工作台菜单风格,接近参考图的紧凑右键菜单
|
||||
- **记忆点**: 图标与文案并列的多动作菜单,删除项保留危险色强调
|
||||
- **参考**: 用户提供的右键菜单截图
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 常规动作使用前景色与 hover 高亮,删除项使用错误色
|
||||
- **字体**: 沿用当前界面菜单字号和字体体系
|
||||
- **布局**: 单列垂直菜单项,图标左对齐,文字紧凑排列
|
||||
- **动效**: 保持现有 hover 颜色过渡
|
||||
- **氛围**: 保持工具型菜单克制感,不过度装饰
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 菜单项文案明确区分“立即执行”和“粘贴到终端”
|
||||
- **响应式**: 保持现有防越界定位逻辑
|
||||
@@ -0,0 +1,45 @@
|
||||
# 任务清单: quickcommands-context-menu-actions
|
||||
|
||||
```yaml
|
||||
@feature: quickcommands-context-menu-actions
|
||||
@created: 2026-03-26
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 快捷命令右键菜单扩展
|
||||
|
||||
- [√] 1.1 在 `packages/frontend/src/views/QuickCommandsView.vue` 中补齐右键菜单动作与样式,加入立即执行、粘贴到终端、复制命令、粘贴到快捷输入框、编辑、删除,并保留现有扩展动作 | depends_on: []
|
||||
- [√] 1.2 在 `packages/frontend/src/views/QuickCommandsView.vue` 中补齐命令处理与联动逻辑,确保“粘贴到终端”只写入底部命令输入框、不发送 | depends_on: [1.1]
|
||||
|
||||
### 2. 文案与验证
|
||||
|
||||
- [√] 2.1 更新 `packages/frontend/src/locales/zh-CN.json`、`packages/frontend/src/locales/en-US.json`、`packages/frontend/src/locales/ja-JP.json` 中的快捷命令右键菜单文案和提示信息 | depends_on: [1.2]
|
||||
- [√] 2.2 执行 `packages/frontend` 的构建验证,确认类型检查与打包通过 | depends_on: [2.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-26 00:38 | DESIGN | completed | 已确认右键菜单需扩展为 5 个主动作,“粘贴到终端”只写入底部命令输入框不发送 |
|
||||
| 2026-03-26 00:42 | 1.1 / 1.2 | 完成 | `QuickCommandsView.vue` 已补齐多动作右键菜单,并区分立即执行、粘贴到终端输入框和粘贴到快捷输入框三种语义 |
|
||||
| 2026-03-26 00:42 | 2.1 | 完成 | 已同步中文、英文、日文快捷命令右键菜单文案与提示信息 |
|
||||
| 2026-03-26 00:43 | 2.2 | 完成 | `packages/frontend` 执行 `npm run build` 通过,仅保留既有 Vite 动态导入与 chunk 警告 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 当前环境缺少可直接调用的 `python/py`,方案包通过模板降级方式手工创建。本轮未做浏览器内真实右键交互截图对照,运行态确认以代码审查和前端构建通过为主。
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"工作台文件多根目录树已完成并通过前端构建验证","updated_at":"2026-03-26 00:56:00"}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
# 变更提案: workbench-file-multi-root-explorer
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 功能增强
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 进行中
|
||||
状态说明: 已完成工作台文件多根目录树侧栏,保留右侧现有文件表格并通过前端构建验证
|
||||
创建: 2026-03-26
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前工作台文件页仍是单一路径的文件表格,虽然可以通过路径栏和收藏路径跳转,但无法像参考图那样在同一侧栏里同时展示多个目录根并独立展开浏览。
|
||||
|
||||
### 目标
|
||||
- 在工作台文件面板中支持同屏显示多个目录根。
|
||||
- 各目录根可独立展开/折叠,交互接近资源管理器。
|
||||
- 保留现有文件表格与操作能力,不回退上传、重命名、删除、编辑等已有功能。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 优先限制在 FileManager.vue,不改后端接口和 SFTP 协议
|
||||
状态约束: 优先复用现有 favoritePaths 与 SFTP fileTree,不新建第二套远端文件状态链
|
||||
交互约束: 左侧树作为目录浏览入口,右侧继续保留当前目录表格
|
||||
兼容约束: 现有路径输入、收藏路径弹窗、上传与上下文菜单行为保持可用
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [x] 文件面板出现多根目录树侧栏
|
||||
- [x] 收藏路径与当前路径可作为多个根目录同时展示
|
||||
- [x] 点击树节点可切换右侧当前目录或打开文件
|
||||
- [x] 前端构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
在 `FileManager.vue` 内复用 `favoritePaths.store` 作为多根目录来源,并结合当前 `currentPath` 动态补入当前目录根;树数据直接从 `createSftpActionsManager` 暴露的 `fileTree` 中派生,按目录层级递归展开,左侧渲染资源管理器式树,右侧继续保留现有文件表格与所有文件操作。对尚未加载的目录,点击时复用现有 `loadDirectory(path)` 触发懒加载。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: FileManager.vue
|
||||
预计变更文件: 1-4
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| `loadDirectory` 会更新当前路径,树懒加载与右侧表格联动可能显得过于激进 | 中 | 将树节点点击定义为“聚焦该目录”,允许目录切换驱动右侧同步更新 |
|
||||
| 收藏路径之间存在父子重叠,侧栏可能出现重复层级 | 中 | 保留多根并明确标识根目录,避免擅自折叠合并破坏用户心智 |
|
||||
| `fileTree` 仅缓存已访问目录,初始树可能不完整 | 低 | 根节点默认可见,展开时按现有 SFTP 请求链路懒加载 |
|
||||
@@ -0,0 +1,42 @@
|
||||
# 任务清单: workbench-file-multi-root-explorer
|
||||
|
||||
```yaml
|
||||
@feature: workbench-file-multi-root-explorer
|
||||
@created: 2026-03-26
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 4 | 0 | 0 | 4 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 方案与范围确认
|
||||
|
||||
- [√] 1.1 创建工作台文件多根目录树方案包 | depends_on: []
|
||||
|
||||
### 2. 交互增强实现
|
||||
|
||||
- [√] 2.1 在 `FileManager.vue` 中实现多根目录树状态与节点交互 | depends_on: [1.1]
|
||||
- [√] 2.2 将文件面板改成左侧多根目录树加右侧现有表格布局 | depends_on: [2.1]
|
||||
|
||||
### 3. 验证与同步
|
||||
|
||||
- [√] 3.1 运行前端构建验证并同步 `.helloagents` 文档与归档记录 | depends_on: [2.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-26 00:41 | 1.1 | 完成 | 创建 implementation 方案包,范围锁定为工作台文件面板多根目录树增强 |
|
||||
| 2026-03-26 00:52 | 2.1 | 完成 | 复用 favoritePaths 与 SFTP fileTree,为 FileManager 补齐多根目录树状态、懒加载展开和目录/文件打开逻辑 |
|
||||
| 2026-03-26 00:55 | 2.2 | 完成 | 将文件面板改成左侧资源管理器式多根目录树 + 右侧现有文件表格布局 |
|
||||
| 2026-03-26 00:56 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过,准备同步知识库并归档方案包 |
|
||||
@@ -0,0 +1 @@
|
||||
{"status":"completed","completed":6,"failed":0,"pending":0,"total":6,"done":6,"percent":100,"current":"已完成快捷指令动态变量解析、编辑弹窗插入与前端构建验证,待归档","updated_at":"2026-03-26 01:08:00"}
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
# 变更提案: quickcommands-dynamic-variables
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 新功能
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 草稿
|
||||
创建: 2026-03-26
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
当前快捷指令仅支持用户手动维护的 `${变量名}` 替换,编辑弹窗左侧也只有“变量管理”区。用户希望在“编辑快捷指令”部分直接看到一组可点击插入的动态变量,例如日期、时间、UUID、随机串、剪贴板和 SSH 登录密码,并在真正执行快捷指令时自动填充这些值。
|
||||
|
||||
### 目标
|
||||
- 在编辑快捷指令弹窗中新增“动态变量”说明与点击插入能力。
|
||||
- 支持 `${{date}}`、`${{date:YYYYMMDD}}` 这类动态变量写法,并保留现有 `${NAME}` 自定义变量能力。
|
||||
- 统一“编辑弹窗内执行”和“快捷指令列表直接执行”两条链路的变量解析逻辑,避免一处支持、一处失效。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
时间约束: 本轮内完成前端实现与构建验证
|
||||
性能约束: 不引入新依赖,优先复用现有 Vue/Pinia 与浏览器原生能力
|
||||
兼容性约束: 现有 `${变量名}` 自定义变量保存、编辑、执行行为不得回退
|
||||
业务约束:
|
||||
- 动态变量点击后应插入到当前指令文本中,而不是只做展示
|
||||
- 自动填充必须同时覆盖“编辑弹窗执行”和“列表直接执行”
|
||||
- 剪贴板类变量取值失败时不能导致整个执行链路崩溃
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 编辑快捷指令弹窗中出现“动态变量”区,至少覆盖日期时间、唯一标识和系统三类变量
|
||||
- [ ] 点击动态变量项后,指令文本区域会插入对应占位符
|
||||
- [ ] `${{date}}`、`${{time}}`、`${{timestamp}}`、`${{week}}`、`${{uuid}}`、`${{random}}`、`${{random:8}}`、`${{clipboard}}`、`${{password}}` 在执行时会被自动填充
|
||||
- [ ] `${{date:YYYYMMDD}}`、`${{time:HHmmss}}` 这类带格式参数的变量可正确生效
|
||||
- [ ] 现有 `${变量名}` 自定义变量替换继续生效
|
||||
- [ ] `packages/frontend` 构建验证通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
新增一个前端快捷指令变量解析工具,将“自定义变量替换 + 动态变量填充 + 未定义变量检查”收敛到同一处。`AddEditQuickCommandForm.vue` 负责提供动态变量清单、说明文案和点击插入;`QuickCommandsView.vue` 与表单内“执行”按钮都改为调用同一套解析函数。动态变量按运行时来源分层实现:
|
||||
|
||||
- 时间类变量通过前端当前时间即时生成;
|
||||
- `uuid` 使用浏览器 `crypto.randomUUID()`,必要时做降级;
|
||||
- `random[:len]` 由本地字符集生成;
|
||||
- `clipboard` 使用浏览器 Clipboard API 读取;
|
||||
- `password` 优先从当前活动会话关联的连接信息中读取保存的登录密码字段,取不到时按空串处理并给出提示。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: 快捷指令编辑弹窗 UI
|
||||
- frontend: 快捷指令执行链路
|
||||
- frontend: locale 文案
|
||||
预计变更文件: 5-6
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 两条执行链路继续复制解析逻辑,后续容易再次偏离 | 中 | 抽出共享解析工具,只保留调用层差异 |
|
||||
| `clipboard` 读取受浏览器权限或交互上下文限制 | 中 | 读取失败时返回空串并给出非阻断提示 |
|
||||
| `password` 来源不稳定,不同连接类型字段可能不完全一致 | 中 | 先基于当前 SSH 连接常规密码字段取值,取不到时保持空串并避免抛错 |
|
||||
| locale 文案遗漏导致编辑区出现回退文案 | 低 | 同轮同步 zh-CN / en-US / ja-JP |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计(可选)
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[AddEditQuickCommandForm] --> B[insertDynamicVariable]
|
||||
A --> C[resolveQuickCommandTemplate]
|
||||
D[QuickCommandsView] --> C
|
||||
C --> E[自定义变量替换]
|
||||
C --> F[动态变量解析]
|
||||
F --> G[time/date helpers]
|
||||
F --> H[clipboard/password providers]
|
||||
```
|
||||
|
||||
### 数据模型
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `QuickCommandVariableContext` | object | 执行时上下文,包含自定义变量、活动会话和连接信息 |
|
||||
| `DynamicVariableDefinition` | object | 动态变量展示项定义,包含 key、label、description、example |
|
||||
| `ResolveQuickCommandResult` | object | 返回处理后命令、未定义变量、动态变量告警 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 在编辑快捷指令时点击插入动态变量
|
||||
**模块**: frontend
|
||||
**条件**: 用户打开“编辑快捷指令”弹窗。
|
||||
**行为**: 用户点击动态变量卡片后,将对应 `${{...}}` 占位符插入到指令文本中。
|
||||
**结果**: 用户不需要手写复杂占位符格式。
|
||||
|
||||
### 场景: 在编辑弹窗内执行带动态变量的快捷指令
|
||||
**模块**: frontend
|
||||
**条件**: 当前存在活动 SSH 会话,指令中包含动态变量或自定义变量。
|
||||
**行为**: 点击“执行”后统一解析模板,再发送处理后的命令。
|
||||
**结果**: 编辑态预执行与保存后执行行为一致。
|
||||
|
||||
### 场景: 直接从快捷指令列表执行带动态变量的命令
|
||||
**模块**: frontend
|
||||
**条件**: 用户在工作台快捷指令列表中点击某条命令。
|
||||
**行为**: 列表执行逻辑复用共享解析器,自动填充动态变量后发送。
|
||||
**结果**: 保存后的快捷指令在运行态自动得到真实值。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### quickcommands-dynamic-variables#D001: 用共享解析工具统一快捷指令变量处理,而不是在两个视图内各自扩展
|
||||
**日期**: 2026-03-26
|
||||
**状态**: ✅采纳
|
||||
**背景**: 当前 `AddEditQuickCommandForm.vue` 和 `QuickCommandsView.vue` 已各自实现一份 `${变量名}` 替换逻辑,继续在两个位置分别补动态变量会放大分叉风险。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 抽共享解析工具 | 规则唯一、两条执行链一致、后续容易扩展更多变量 | 需要多一个工具文件 |
|
||||
| B: 原位各自扩展 | 改动表面更直接 | 逻辑重复,后续维护成本更高 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: 本次需求的核心不是单纯加一块 UI,而是让“编辑态执行”和“列表态执行”共享同一套变量解析语义。
|
||||
**影响**: frontend
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: 延续当前快捷指令编辑弹窗的工具型深色界面,在左侧变量区域内加入结构清晰的动态变量分组
|
||||
- **记忆点**: 每个动态变量同时展示名称、说明、示例,占位符可以一键插入
|
||||
- **参考**: 用户提供的动态变量列表说明
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 复用现有输入区与边框体系,用主色 hover 强调“可点击插入”
|
||||
- **字体**: 标题沿用当前界面字体,变量占位符和示例使用等宽字体
|
||||
- **布局**: 左侧分组列表纵向展开,变量项内部保持“名称 + 描述 + 示例”三段式
|
||||
- **动效**: 沿用当前按钮 hover 过渡,不额外加入复杂动画
|
||||
- **氛围**: 以“清楚可用”为主,避免文档墙式堆砌
|
||||
|
||||
### 技术约束
|
||||
- **响应式**: 在当前弹窗可调整宽高前提下保持左右栏可滚动
|
||||
- **可访问性**: 动态变量项需有明确 hover/click 反馈,示例文本可复制识别
|
||||
@@ -0,0 +1,55 @@
|
||||
# 任务清单: quickcommands-dynamic-variables
|
||||
|
||||
```yaml
|
||||
@feature: quickcommands-dynamic-variables
|
||||
@created: 2026-03-26
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 6 | 0 | 0 | 6 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 共享解析能力
|
||||
|
||||
- [√] 1.1 新增快捷指令变量解析工具,统一处理自定义变量替换、动态变量解析与告警收集 | depends_on: []
|
||||
|
||||
### 2. 编辑弹窗动态变量区
|
||||
|
||||
- [√] 2.1 在 `packages/frontend/src/components/AddEditQuickCommandForm.vue` 中加入动态变量分组展示与点击插入能力 | depends_on: [1.1]
|
||||
- [√] 2.2 将编辑弹窗内“执行”逻辑改为复用共享解析工具,并处理剪贴板/密码类变量告警 | depends_on: [2.1]
|
||||
|
||||
### 3. 列表执行链路统一
|
||||
|
||||
- [√] 3.1 在 `packages/frontend/src/views/QuickCommandsView.vue` 中改为复用共享解析工具,保证列表直接执行支持动态变量 | depends_on: [1.1]
|
||||
|
||||
### 4. 文案与验证
|
||||
|
||||
- [√] 4.1 更新 `packages/frontend/src/locales/zh-CN.json`、`packages/frontend/src/locales/en-US.json`、`packages/frontend/src/locales/ja-JP.json` 的动态变量说明文案 | depends_on: [2.2, 3.1]
|
||||
- [√] 4.2 执行 `packages/frontend` 构建验证,确认类型检查与打包通过 | depends_on: [4.1]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-26 00:42 | DESIGN | completed | 已确认动态变量需同时覆盖编辑弹窗执行与快捷指令列表直接执行 |
|
||||
| 2026-03-26 01:05 | 1.1 | completed | 新增 `quickCommandTemplate.ts`,统一自定义变量与动态变量解析 |
|
||||
| 2026-03-26 01:05 | 2.1/2.2 | completed | 编辑快捷指令弹窗新增动态变量区,并改为复用共享解析器 |
|
||||
| 2026-03-26 01:06 | 3.1 | completed | 快捷指令列表执行、粘贴到终端和发送到全部服务器接入动态变量解析 |
|
||||
| 2026-03-26 01:07 | 4.1 | completed | 已补齐 zh-CN / en-US / ja-JP 动态变量文案 |
|
||||
| 2026-03-26 01:08 | 4.2 | completed | `npm run build` 通过,仅保留既有 chunk 体积告警 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> `create_package.py` 在当前环境执行失败且无可用输出,本方案包按模板结构手工创建。`${{password}}` 当前优先从活动 SSH 会话关联的已保存登录凭证解析;若前端运行态取不到明文密码,则回退为空串并给出警告,不阻断命令执行。
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"status": "completed",
|
||||
"completed": 5,
|
||||
"failed": 0,
|
||||
"pending": 0,
|
||||
"total": 5,
|
||||
"percent": 100,
|
||||
"current": "全部任务完成,等待知识库归档",
|
||||
"updated_at": "2026-03-26 00:50:00"
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
# 变更提案: dashboard-live-session-metrics
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 新功能
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 草稿
|
||||
创建: 2026-03-26
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
首页 dashboard 已经具备稳定统计能力,但仍缺少运行态视角。用户继续要求补“在线会话数/实时指标”,并明确选择“混合视角”,意味着首页同时需要展示当前登录用户的运行态会话信息,以及整个系统范围内的总在线会话概况。
|
||||
|
||||
### 目标
|
||||
- 在现有 dashboard summary 基础上补充运行态指标,而不是另起一套接口。
|
||||
- 同时展示“当前用户视角”和“系统总览视角”的在线 SSH / 挂起会话指标。
|
||||
- 补充能体现实时性的附加指标,例如被监控中的活跃状态流数量,让首页更接近真实运维总控台。
|
||||
- 保持首页首屏仍为单次 summary 请求,不要求前端直接订阅 WebSocket 状态。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
时间约束: 本轮内完成前后端联动与基础构建验证
|
||||
性能约束: 运行态统计应在现有 dashboard summary 接口内组合返回,避免首页新增额外请求
|
||||
兼容性约束: 不改变现有 workspace WebSocket 协议与挂起会话 API 语义
|
||||
业务约束: 当前用户口径必须与后端登录态一致;系统口径必须来自后端共享运行态,而不是浏览器本地 session store 猜测
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] `GET /api/v1/dashboard/summary` 返回新增的 live metrics 字段
|
||||
- [ ] 首页同时展示当前用户在线 SSH / 挂起会话数与系统总在线 SSH / 挂起会话数
|
||||
- [ ] 首页补充至少一个与实时运行态有关的附加指标,例如当前活跃状态监控流数量
|
||||
- [ ] 前端 UI 对新增实时指标完成中英日文案适配
|
||||
- [ ] `packages/backend` 与 `packages/frontend` 构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
延续现有 `dashboard` 业务域,但把运行态统计从纯数据库聚合扩展为“数据库统计 + 内存运行态组合”。数据库部分继续由 `dashboard.repository.ts` 提供稳定统计;运行态部分由 `dashboard.service.ts` 直接组合后端共享的 `clientStates` 与 `sshSuspendService`:前者提供系统范围和按当前 `req.session.userId` 过滤的在线 SSH 会话数量,并进一步统计处于状态监控中的会话数量;后者补充当前用户与系统范围的挂起会话数。前端沿用现有 `dashboard.store.ts`,在 `DashboardOverviewPanel.vue` 中新增“实时会话”板块,使用清晰的双列卡片同时呈现“我的会话”和“系统会话”。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- backend: 扩展 dashboard summary 组合逻辑,补运行态统计
|
||||
- backend: 为 sshSuspendService 暴露系统级计数方法
|
||||
- frontend: 扩展 summary 类型与总览组件
|
||||
- frontend: 更新 dashboard 文案
|
||||
预计变更文件: 6-9
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 前端本地 session store 与后端真实在线会话不一致 | 中 | 在线/挂起口径统一以后端运行态为准,只在首页展示后端汇总结果 |
|
||||
| `clientStates` 中可能包含正在恢复、挂起标记中或半断开的会话 | 中 | 统计时显式按状态字段过滤,优先统计未被服务接管的可用活跃会话 |
|
||||
| `sshSuspendService` 目前只有按用户列出接口,没有系统汇总接口 | 低 | 为服务补一个只读统计方法,不改现有对外 API |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[DashboardController] --> B[DashboardService]
|
||||
B --> C[dashboard.repository.ts]
|
||||
B --> D[clientStates]
|
||||
B --> E[sshSuspendService]
|
||||
B --> F[req.session.userId]
|
||||
```
|
||||
|
||||
### API设计
|
||||
#### GET /api/v1/dashboard/summary
|
||||
- **新增响应字段**:
|
||||
```json
|
||||
{
|
||||
"liveMetrics": {
|
||||
"currentUser": {
|
||||
"activeSshSessions": 0,
|
||||
"suspendedSessions": 0
|
||||
},
|
||||
"system": {
|
||||
"activeSshSessions": 0,
|
||||
"suspendedSessions": 0,
|
||||
"statusStreams": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 数据模型
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `liveMetrics.currentUser.activeSshSessions` | `number` | 当前登录用户的活跃 SSH 会话数 |
|
||||
| `liveMetrics.currentUser.suspendedSessions` | `number` | 当前登录用户的挂起会话数 |
|
||||
| `liveMetrics.system.activeSshSessions` | `number` | 系统范围的活跃 SSH 会话数 |
|
||||
| `liveMetrics.system.suspendedSessions` | `number` | 系统范围的挂起会话数 |
|
||||
| `liveMetrics.system.statusStreams` | `number` | 当前处于状态轮询中的活跃会话数 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 当前用户查看自己的在线与挂起会话
|
||||
**模块**: frontend / backend
|
||||
**条件**: 用户已登录并打开首页 dashboard。
|
||||
**行为**: 后端基于当前 session 的 `userId` 统计用户活跃 SSH 会话和挂起会话,并在首页实时会话面板中显示。
|
||||
**结果**: 用户能快速判断“我当前开了多少会话、还有多少挂起会话待恢复”。
|
||||
|
||||
### 场景: 管理员查看系统整体运行态
|
||||
**模块**: frontend / backend
|
||||
**条件**: 首页 dashboard 已完成 summary 拉取。
|
||||
**行为**: 后端同时返回系统总活跃 SSH 会话数、总挂起会话数和状态监控流数量。
|
||||
**结果**: 首页能同时表达“我的视角”和“系统视角”,满足混合视角需求。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### dashboard-live-session-metrics#D001: 运行态指标继续并入 summary 接口,而不是前端再建额外实时 API
|
||||
**日期**: 2026-03-26
|
||||
**状态**: ✅采纳
|
||||
**背景**: 现有 dashboard 已经是单接口驱动。继续拆新接口只会增加首页请求数和前端状态拼装复杂度。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 扩展现有 `/api/v1/dashboard/summary` | 首页保持单请求,口径集中,最适合当前仪表盘架构 | service 层需同时组合数据库与运行态来源 |
|
||||
| B: 新增独立 `/api/v1/dashboard/live` | 可把稳定统计和实时统计分离 | 首页需要二次请求和额外错误处理,前端复杂度上升 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: 这轮增强是现有 dashboard 的自然延展,不值得拆出第二条首页专用链路。
|
||||
**影响**: backend, frontend
|
||||
|
||||
### dashboard-live-session-metrics#D002: 在线/挂起统计口径以后端运行态为准,不使用浏览器本地 session store 作为首页事实来源
|
||||
**日期**: 2026-03-26
|
||||
**状态**: ✅采纳
|
||||
**背景**: 前端 session store 只能反映当前浏览器标签页,无法代表同一用户其他浏览器窗口、恢复中的会话或后端已接管的挂起状态。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 后端 `clientStates + sshSuspendService` 统一统计 | 口径统一,能同时覆盖系统和当前用户 | 需要后端 service 增加只读组合逻辑 |
|
||||
| B: 首页直接读前端 `session.store` | 实现快 | 只能看到当前浏览器局部状态,无法满足混合视角 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: 用户明确要“当前用户 + 系统总览”混合视角,只能以后端运行态作为事实源。
|
||||
**影响**: backend, frontend
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: 保持现有 dashboard 驾驶舱风格,但把运行态指标做成更“控制台式”的双层面板
|
||||
- **记忆点**: 首页同时出现“我的会话 / 系统会话”两组清晰分栏,不再只有静态总量
|
||||
- **参考**: 当前 dashboard 卡片体系 + 运维控制台常见的 live session summary
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: 当前用户指标偏主色和绿色,系统总览指标偏青蓝和琥珀,避免与稳定总量卡片混淆
|
||||
- **字体**: 沿用现有项目后台字体体系
|
||||
- **布局**: 运行态指标独立为一块 summary panel,位于统计卡片区之后、图表区之前
|
||||
- **动效**: 只保留轻量 hover 和数字层级,不增加复杂动画
|
||||
- **氛围**: 强调“控制面板”而非“报表页”,以密度和清晰分组为主
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 每个实时指标必须带文字标签,不用纯 icon 表达
|
||||
- **响应式**: 窄屏下“当前用户 / 系统总览”两组指标要能自然折叠为单栏
|
||||
@@ -0,0 +1,49 @@
|
||||
# 任务清单: dashboard-live-session-metrics
|
||||
|
||||
```yaml
|
||||
@feature: dashboard-live-session-metrics
|
||||
@created: 2026-03-26
|
||||
@status: completed
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 5 | 0 | 0 | 5 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 后端运行态统计扩展
|
||||
|
||||
- [√] 1.1 在 `packages/backend/src/ssh-suspend/ssh-suspend.service.ts` 中补充系统级挂起会话汇总能力,并在 `packages/backend/src/dashboard/` 中扩展 live metrics 结构与 service 组合逻辑 | depends_on: []
|
||||
- [√] 1.2 调整 `packages/backend/src/dashboard/dashboard.controller.ts` / `dashboard.service.ts` / `dashboard.types.ts`,让 summary 响应同时包含当前用户和系统总览的实时指标 | depends_on: [1.1]
|
||||
|
||||
### 2. 前端展示扩展
|
||||
|
||||
- [√] 2.1 更新 `packages/frontend/src/types/server.types.ts` 与 `packages/frontend/src/components/DashboardOverviewPanel.vue`,新增“当前用户 / 系统总览”实时会话指标展示 | depends_on: [1.2]
|
||||
- [√] 2.2 更新 `packages/frontend/src/locales/zh-CN.json`、`packages/frontend/src/locales/en-US.json`、`packages/frontend/src/locales/ja-JP.json` 的实时指标文案 | depends_on: [2.1]
|
||||
|
||||
### 3. 验证
|
||||
|
||||
- [√] 3.1 执行 `packages/backend` 与 `packages/frontend` 的构建校验,确认新增实时指标链路通过 | depends_on: [2.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-26 00:43 | DESIGN | completed | 已确定采用“数据库统计继续走 repository + 运行态统计走 clientStates/sshSuspendService 组合”的实现路径 |
|
||||
| 2026-03-26 00:47 | 1.1 | completed | 为 sshSuspendService 增加系统级/当前用户挂起会话计数,并将 clientStates 运行态接入 dashboard service |
|
||||
| 2026-03-26 00:49 | 2.1 | completed | 首页 summary 类型与总览组件已扩展为混合视角实时会话面板,并拆出 DashboardLiveMetricsPanel 保持单文件约束 |
|
||||
| 2026-03-26 00:50 | 3.1 | completed | `packages/frontend` 构建通过;`packages/backend` 类型校验问题已修正后再次通过 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> `create_package.py` 在当前环境未返回有效执行报告,本方案包按模板规则手工创建。当前仓库存在其他并行中的方案包和未提交改动,本轮仅处理 dashboard 实时指标相关范围。
|
||||
Reference in New Issue
Block a user