fix(frontend): 调整工作台文件总览与快捷指令菜单

将文件管理区从单目录文件表格修正为多根目录常驻的文件夹总览,
点击目录时仅展开和聚焦,不再切换为单独目录列表。

同时修复快捷指令右键菜单的透明背景与粘贴语义,
统一为“粘贴到命令输入框”且不自动发送,并同步多语言文案。

顺带收紧快捷指令编辑弹窗的最小尺寸、初始尺寸与视口上限,
降低小分辨率下的弹窗溢出概率。
This commit is contained in:
yinjianm
2026-03-26 02:04:07 +08:00
parent 3f6e2bffc6
commit b1f036fdc6
15 changed files with 517 additions and 208 deletions
@@ -0,0 +1 @@
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"工作台文件区已改成多根目录常驻的文件夹总览视图","updated_at":"2026-03-26 02:02:00"}
@@ -0,0 +1,58 @@
# 变更提案: workbench-file-folder-overview
## 元信息
```yaml
类型: 功能调整
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已改成多根目录常驻的文件夹总览视图,并通过前端构建验证
创建: 2026-03-26
```
---
## 1. 需求
### 背景
上一轮把工作台文件区改成了“左侧多根目录树 + 右侧当前目录文件表格”,但实际使用上仍然是点击目录后切成某一个目录的单独视图,不符合参考图想要的“多根目录持续保留、同时浏览多个文件夹层级”的交互。
### 目标
- 保留多根目录作为长期可见的浏览主体。
- 点击文件夹时不再把界面切成单目录文件表格。
- 右侧改成多根目录下的文件夹总览,持续显示不同目录层级。
### 约束条件
```yaml
范围约束: 优先只改 FileManager.vue,不改后端接口与 SFTP 协议
状态约束: 继续复用 favoritePaths 与 useSftpActions 的 fileTree/loadDirectory
交互约束: 文件区以目录浏览为主,不再横向展示当前目录下的具体文件列表
兼容约束: 路径输入、收藏路径、上传和新建动作仍依赖 currentPath 保持可用
```
### 验收标准
- [x] 左侧多根目录树持续可见
- [x] 点击文件夹后右侧不再变成单目录文件表格
- [x] 右侧改为多根目录下的文件夹总览,能同时显示不同目录层级
- [x] 前端构建通过
---
## 2. 方案
### 技术方案
继续以 `FileManager.vue` 为核心,保留左侧多根目录树,但树和右侧总览都只展示目录节点,不再渲染具体文件。右侧使用 `fileTree` 缓存派生出按根目录分组的文件夹总览卡片,点击目录只触发展开与目录聚焦,不再切换成单个目录的文件表格视图。
### 影响范围
```yaml
涉及模块:
- frontend: FileManager.vue
预计变更文件: 1-4
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| `loadDirectory(path)` 仍会更新 currentPath,导致操作目录与浏览目录耦合 | 中 | 将 currentPath 明确视为“当前操作目录”,界面主体不再依赖它切换视图 |
| 去掉文件表格后,部分基于当前目录文件列表的交互入口暂时只剩路径输入和上传/新建 | 中 | 本轮先满足目录总览需求,不扩展新的文件级操作入口 |
| 收藏路径存在父子重叠时,不同根目录区块会重复展示部分目录 | 低 | 保留重复,维持“每个根目录独立浏览”的用户心智 |
@@ -0,0 +1,42 @@
# 任务清单: workbench-file-folder-overview
```yaml
@feature: workbench-file-folder-overview
@created: 2026-03-26
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
### 1. 方案与范围确认
- [√] 1.1 创建工作台文件夹总览方案包并锁定范围到 `FileManager.vue` | depends_on: []
### 2. 交互调整实现
- [√] 2.1 将多根目录树调整为仅展示目录节点并保持根目录常驻 | depends_on: [1.1]
- [√] 2.2 将右侧区域改成多根目录文件夹总览,不再渲染单目录文件表格 | depends_on: [2.1]
### 3. 验证与同步
- [√] 3.1 运行前端构建验证并同步 `.helloagents` 文档与归档记录 | depends_on: [2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-03-26 01:50 | 1.1 | 完成 | 创建 implementation 方案包,范围锁定为工作台文件区多根目录常驻与文件夹总览调整 |
| 2026-03-26 01:57 | 2.1 | 完成 | 多根目录树改为仅展示目录节点,点击目录后不再依赖单目录文件表格切换 |
| 2026-03-26 02:00 | 2.2 | 完成 | 右侧区域改成按根目录分组的文件夹总览卡片,并保留当前操作目录提示 |
| 2026-03-26 02:02 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过,准备同步知识库与归档 |
@@ -0,0 +1 @@
{"status":"in_progress","completed":0,"failed":0,"pending":4,"total":4,"done":0,"percent":0,"current":"准备进入开发实施:修正快捷命令右键菜单透明与粘贴动作","updated_at":"2026-03-26 01:56:00"}
@@ -0,0 +1,132 @@
# 变更提案: quickcommands-context-menu-polish
## 元信息
```yaml
类型: 优化
方案类型: implementation
优先级: P1
状态: 草稿
创建: 2026-03-26
```
---
## 1. 需求
### 背景
上一轮已经为快捷命令补上右键菜单,但用户进一步确认了三个运行态问题:菜单背景出现透明效果;不再需要“粘贴到终端”单独菜单项;原“粘贴到快捷输入框”应改成“粘贴到命令输入框”的语义和位置,即点击后写入底部终端命令输入框但不发送。
### 目标
- 将快捷命令右键菜单改为实底不透明菜单。
- 移除“粘贴到终端”菜单项。
- 将原“粘贴到快捷输入框”改为“粘贴到命令输入框”,并执行写入底部命令输入框但不发送的行为。
### 约束条件
```yaml
时间约束: 本轮内完成右键菜单修正与前端验证
性能约束: 不新增依赖,仅调整现有菜单结构和前端逻辑
兼容性约束: 保留立即执行、复制命令、发送到全部服务器、编辑、删除等动作
业务约束: 粘贴到命令输入框必须只写入底部命令输入框,不自动发送
```
### 验收标准
- [ ] 右键菜单背景为实底不透明,不再出现透明感
- [ ] 菜单中不再显示“粘贴到终端”
- [ ] “粘贴到命令输入框”点击后写入底部命令输入框,但不发送
- [ ] locale 文案同步更新
- [ ] `packages/frontend` 构建通过
---
## 2. 方案
### 技术方案
继续在 `QuickCommandsView.vue` 上做最小修正。菜单容器改为显式深色背景与更强边框/阴影;删除“粘贴到终端” DOM 项与对应 action;把原 `pasteToQuickInput` 动作重命名并直接复用现有“写入底部命令输入框”的逻辑。同步三套 locale 文案与成功提示。
### 影响范围
```yaml
涉及模块:
- frontend: `QuickCommandsView.vue` 右键菜单结构、样式和动作映射
- frontend: 快捷命令相关 locale 文案
预计变更文件: 3-4
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 菜单背景样式修正后与现有主题变量冲突 | 低 | 使用更明确的深色背景与现有边框/阴影组合,避免透明变量色 |
| 删除菜单项后动作顺序与用户预期不一致 | 低 | 让“粘贴到命令输入框”顶替原位置 |
| 文案与实际行为再次不一致 | 中 | 同时修改菜单文案、动作枚举和成功提示 |
---
## 3. 技术设计(可选)
### 架构设计
```mermaid
flowchart LR
A[QuickCommandsView menu] --> B[runNow]
A --> C[pasteToCommandInput]
A --> D[copy/edit/delete]
A --> E[sendToAllSessions]
```
### 数据模型
| 字段 | 类型 | 说明 |
|------|------|------|
| `quickCommandContextMenuVisible` | `boolean` | 右键菜单显示状态 |
| `quickCommandContextTargetCommand` | `QuickCommandFE \| null` | 当前菜单目标命令 |
| `activeSessionId` | `string \| undefined` | 当前活动会话,用于写入底部命令输入框 |
---
## 4. 核心场景
### 场景: 从右键菜单回填到底部命令输入框
**模块**: frontend
**条件**: 用户右键某条快捷命令,当前存在活动 SSH 会话。
**行为**: 点击“粘贴到命令输入框”后,把处理后的命令写入底部终端输入框,但不触发发送。
**结果**: 用户可以继续手改命令,再决定是否发送。
### 场景: 右键菜单视觉贴近普通实底菜单
**模块**: frontend
**条件**: 用户在快捷命令列表中打开右键菜单。
**行为**: 菜单以实底、边框和阴影显示,不透出底层列表内容。
**结果**: 菜单可读性和层级感更接近常规上下文菜单。
---
## 5. 技术决策
### quickcommands-context-menu-polish#D001: 让“粘贴到命令输入框”直接复用已有底部命令输入框写入逻辑
**日期**: 2026-03-26
**状态**: ✅采纳
**背景**: 用户明确要求去掉“粘贴到终端”,并让替代项承担“写入底部命令输入框但不发送”的职责。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 复用现有写入底部命令输入框逻辑 | 最小改动,行为清晰,和现有命令输入条一致 | 需要同步改菜单文案 |
| B: 保留原搜索框回填逻辑,只改文案 | 代码更少 | 行为与用户要求不符 |
**决策**: 选择方案A
**理由**: 用户语义已经非常明确,应以实际行为一致性优先,而不是保留旧实现。
**影响**: frontend
---
## 6. 成果设计
### 设计方向
- **美学基调**: 延续深色工具菜单,但强调实底层级感
- **记忆点**: 菜单不再发虚透底,操作文案与行为完全一致
- **参考**: 用户上一轮反馈的运行态问题
### 视觉要素
- **配色**: 使用稳定深色背景 + 边框 + 阴影,删除项继续使用错误色
- **字体**: 沿用现有菜单字体体系
- **布局**: 删除一项后保持紧凑垂直列表
- **动效**: 保留现有 hover 过渡
- **氛围**: 以可读性和稳定感为主,不做多余装饰
### 技术约束
- **可访问性**: 文案必须直接说明“命令输入框”,避免再混淆
- **响应式**: 保持现有防越界定位逻辑
@@ -0,0 +1,42 @@
# 任务清单: quickcommands-context-menu-polish
```yaml
@feature: quickcommands-context-menu-polish
@created: 2026-03-26
@status: pending
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 0 | 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 01:56 | DESIGN | completed | 已确认删除“粘贴到终端”,并将替代项改为“粘贴到命令输入框”且只回填不发送 |
---
## 执行备注
> 当前环境缺少可直接调用的 `python/py`,方案包通过模板降级方式手工创建。
+4
View File
@@ -7,6 +7,8 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202603260156 | quickcommands-context-menu-polish | implementation | frontend | quickcommands-context-menu-polish#D001 | ✅完成 |
| 202603260150 | workbench-file-folder-overview | implementation | frontend | - | ✅完成 |
| 202603260041 | workbench-file-multi-root-explorer | implementation | frontend | - | ✅完成 |
| 202603260042 | quickcommands-dynamic-variables | implementation | frontend | quickcommands-dynamic-variables#D001 | ✅完成 |
| 202603260038 | quickcommands-context-menu-actions | implementation | frontend | quickcommands-context-menu-actions#D001 | ✅完成 |
@@ -32,6 +34,8 @@
## 按月归档
### 2026-03
- [202603260156_quickcommands-context-menu-polish](./2026-03/202603260156_quickcommands-context-menu-polish/) - 修正快捷命令右键菜单透明背景,并将粘贴动作统一为“粘贴到命令输入框(不发送)”
- [202603260150_workbench-file-folder-overview](./2026-03/202603260150_workbench-file-folder-overview/) - 将工作台文件区调整为多根目录常驻的文件夹总览,不再点击目录后切成单独文件表格
- [202603260041_workbench-file-multi-root-explorer](./2026-03/202603260041_workbench-file-multi-root-explorer/) - 为工作台文件面板补齐左侧多根目录资源管理器,并允许收藏路径与当前路径同屏作为多个根目录展开浏览
- [202603260042_quickcommands-dynamic-variables](./2026-03/202603260042_quickcommands-dynamic-variables/) - 为快捷指令编辑弹窗补充动态变量清单、一键插入,并统一列表执行与弹窗执行的动态变量解析
- [202603260038_quickcommands-context-menu-actions](./2026-03/202603260038_quickcommands-context-menu-actions/) - 为快捷命令列表补齐图标化右键菜单,并区分立即执行、粘贴到终端输入框和粘贴到快捷输入框