fix(frontend): 调整工作台文件总览与快捷指令菜单
将文件管理区从单目录文件表格修正为多根目录常驻的文件夹总览, 点击目录时仅展开和聚焦,不再切换为单独目录列表。 同时修复快捷指令右键菜单的透明背景与粘贴语义, 统一为“粘贴到命令输入框”且不自动发送,并同步多语言文案。 顺带收紧快捷指令编辑弹窗的最小尺寸、初始尺寸与视口上限, 降低小分辨率下的弹窗溢出概率。
This commit is contained in:
@@ -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` 通过,准备同步知识库与归档 |
|
||||
+1
@@ -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"}
|
||||
+132
@@ -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`,方案包通过模板降级方式手工创建。
|
||||
@@ -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/) - 为快捷命令列表补齐图标化右键菜单,并区分立即执行、粘贴到终端输入框和粘贴到快捷输入框
|
||||
|
||||
Reference in New Issue
Block a user