feat(frontend): 增强工作台快捷指令与仪表盘能力

补充快捷指令动态变量解析与编辑弹窗一键插入,
统一列表执行、粘贴到终端和批量发送的处理链路

扩展快捷命令右键菜单动作,并为文件面板新增
多根目录资源管理器式侧栏浏览体验

为首页 dashboard 增加当前用户与系统总览双视角的
实时会话指标展示,并同步更新相关知识库记录
This commit is contained in:
yinjianm
2026-03-26 01:39:42 +08:00
parent a2ac4047d9
commit 3f6e2bffc6
35 changed files with 2206 additions and 190 deletions
@@ -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"}
@@ -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` 通过,准备同步知识库并归档方案包 |