admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 将文件管理器改为固定根树视图

Browse Source 
文件区改为固定 `/` 根节点的单栏资源管理器树，
在同一树中同时展示目录和文件，并移除文件夹总览区块

同时收紧快捷指令编辑弹窗尺寸并优化窄屏为上下布局，
降低小分辨率下的溢出概率，并同步更新中英文 README
及 `.helloagents` 方案记录
This commit is contained in:
yinjianm
2026-03-26 02:21:06 +08:00
parent b1f036fdc6
commit dcdc8deab8
11 changed files with 284 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+6 -1
View File
@@ -8,6 +8,8 @@
- 2026-03-25：继续微调 `/workspace` Workbench，新增默认“快捷指令”标签、调整三栏宽度到更接近 xterminal 参考图，并修复终端区域鼠标悬停时指针异常消失的问题。
### 修复
- **[frontend]**: 将工作台文件区继续收敛为固定 `/` 根节点的单栏资源管理器树，并在树内同时显示目录与文件 — by yinjianm
- 方案: [202603260212_workbench-file-root-tree](archive/2026-03/202603260212_workbench-file-root-tree/)
- **[frontend]**: 修正快捷命令右键菜单的透明背景与粘贴项语义，改为实底菜单并将回填动作统一为“粘贴到命令输入框（不发送）” — by yinjianm
- 方案: [202603260156_quickcommands-context-menu-polish](archive/2026-03/202603260156_quickcommands-context-menu-polish/)
- **[frontend]**: 将工作台文件区从单目录文件表格切换修正为多根目录常驻的文件夹总览视图 — by yinjianm
@@ -22,7 +24,10 @@
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
### 快速修改
- **[frontend]**: 收紧快捷指令编辑弹窗的最小尺寸、初始尺寸和视口上限，降低小分辨率下的弹窗溢出概率 — by yinjianm
- **[workspace-root]**: 同步更新中英文 README，补充 monorepo 结构、最新功能清单与 `.helloagents/` 开发说明 — by yinjianm
- 类型: 快速修改（无方案包）
- 文件: README.md, doc/README_EN.md
- **[frontend]**: 收紧快捷指令编辑弹窗的最小尺寸、初始尺寸和视口上限，并在窄屏下切换为上下布局，降低小分辨率下的弹窗溢出概率 — by yinjianm
- 类型: 快速修改（无方案包）
- 文件: packages/frontend/src/components/AddEditQuickCommandForm.vue:9,184-185,242-245
.helloagents/INDEX.md
+1 -1
View File
@@ -31,7 +31,7 @@
```yaml
kb_version: 2.3.7
最后更新: 2026-03-26 00:43
最后更新: 2026-03-26 02:00
模块数量: 4
待执行方案: 4
```
.helloagents/archive/2026-03/202603260212_workbench-file-root-tree/.status.json
+1
View File
@@ -0,0 +1 @@
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"FileManager 已改为固定 / 根节点并显示目录和文件的单栏树","updated_at":"2026-03-26 02:21:00"}
.helloagents/archive/2026-03/202603260212_workbench-file-root-tree/proposal.md
+58
View File
@@ -0,0 +1,58 @@
# 变更提案: workbench-file-root-tree
## 元信息
```yaml
类型: 功能调整
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已改为固定 / 根节点的单栏资源管理器树，并通过前端构建验证
创建: 2026-03-26
```
---
## 1. 需求
### 背景
上一轮虽然去掉了单目录文件表格，但仍保留了“文件夹总览”区块，而且根目录会随当前路径变化，不符合实际想要的资源管理器体验。
### 目标
- 文件区只保留一个资源管理器树。
- 根节点始终固定显示 `/`。
- 目录展开时同时显示子目录和文件，文件作为叶子节点显示。
### 约束条件
```yaml
范围约束: 优先只改 FileManager.vue，不改后端接口与 SFTP 协议
状态约束: 继续复用 useSftpActions 的 fileTree 和 loadDirectory(path)
交互约束: 点击目录只展开和聚焦，点击文件按现有逻辑打开
兼容约束: 顶部工具栏、路径栏、上传与新建动作保持可用
```
### 验收标准
- [x] 文件区只保留单栏资源管理器树
- [x] 根节点始终固定显示 `/`
- [x] 目录下同时展示子目录和文件
- [x] 前端构建通过
---
## 2. 方案
### 技术方案
在 `FileManager.vue` 中去掉多根目录和文件夹总览派生结构，改为以 `/` 为唯一 explorer root，树节点直接基于 `fileTree` 递归渲染所有已加载的目录和文件，按“目录在前、文件在后”排序。主内容区改成单栏树视图，点击目录只负责展开与调用 `loadDirectory(path)` 以懒加载子节点，点击文件则继续复用现有 `openFileInWorkspace`。
### 影响范围
```yaml
涉及模块:
- frontend: FileManager.vue
预计变更文件: 1-4
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| `/` 下初次只会显示已加载到 `fileTree` 的节点 | 中 | 在组件中确保优先加载 `/`，展开目录时继续复用现有懒加载 |
| 右侧总览移除后，拖拽与右键的作用区域缩小 | 低 | 保留主容器和现有上下文菜单、上传入口，不改后端动作 |
| 树节点数量增多后单栏滚动深度增加 | 低 | 保留当前滚动容器与层级缩进，先满足准确交互 |
.helloagents/archive/2026-03/202603260212_workbench-file-root-tree/tasks.md
+42
View File
@@ -0,0 +1,42 @@
# 任务清单: workbench-file-root-tree
```yaml
@feature: workbench-file-root-tree
@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 02:12 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 FileManager 固定 / 根节点单栏资源管理器改造 |
| 2026-03-26 02:17 | 2.1 | 完成 | 文件区收敛为固定 / 根节点单栏树，并确保组件加载时优先请求 / 目录 |
| 2026-03-26 02:19 | 2.2 | 完成 | 树中同时渲染目录和文件节点，并移除文件夹总览面板 |
| 2026-03-26 02:21 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过，准备同步知识库与归档 |
.helloagents/archive/_index.md
+2
View File
@@ -7,6 +7,7 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202603260212 | workbench-file-root-tree | implementation | frontend | - | ✅完成 |
| 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 | - | ✅完成 |
@@ -34,6 +35,7 @@
## 按月归档
### 2026-03
- [202603260212_workbench-file-root-tree](./2026-03/202603260212_workbench-file-root-tree/) - 将工作台文件区收敛为固定 / 根节点的单栏资源管理器树，并在树内同时显示目录与文件
- [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/) - 为工作台文件面板补齐左侧多根目录资源管理器，并允许收藏路径与当前路径同屏作为多个根目录展开浏览
.helloagents/modules/frontend.md
+1 -1
View File
@@ -36,7 +36,7 @@
### 工作区交互
**条件**: 用户进入 `/workspace` 或相关管理页面。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`CommandInputBar.vue` 当前已将底部命令框升级为支持会话级草稿保留的多行 `textarea`：普通 `Enter` 插入换行，`Ctrl+Shift+Enter` 发送当前命令，输入框会按内容自动增高至约 6 行，超出后在输入框内部滚动，并继续兼容快捷指令/命令历史同步与选中发送逻辑。快捷指令相关能力目前由 `AddEditQuickCommandForm.vue`、`QuickCommandsView.vue` 与新增的 `utils/quickCommandTemplate.ts` 协同实现：编辑弹窗左侧既可维护自定义 `${变量名}`，也提供 `${{date}}`、`${{time}}`、`${{timestamp}}`、`${{week}}`、`${{uuid}}`、`${{random:8}}`、`${{clipboard}}`、`${{password}}` 等动态变量的一键插入；实际执行时会统一走共享解析器，覆盖编辑弹窗执行、列表直接执行、粘贴到命令输入框和发送到全部服务器等链路，并对未定义变量、无法读取的剪贴板或不可用密码给出非阻断告警。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；该视图当前还支持命令项右键菜单，并已修正为实底卡片式上下文菜单，提供立即执行、粘贴到命令输入框（不自动发送）、复制命令、发送到全部服务器、编辑和删除等动作。`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`，`TerminalTabBar.vue` 则进一步把连续同连接会话渲染成“服务器组头 + 终端子标签 + 组尾新增按钮”，全局 `+` 只负责选择其他服务器，从而让“单连接默认 1 个终端、可继续追加多个终端”的关系在顶部标签栏里更接近参考图；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复，以及树工具栏中的展开全部、收起全部和重置范围控制；近期又补上了独立的左侧树搜索、命中节点及祖先路径过滤、命中链路自动展开、节点计数高亮，以及更接近资源管理器的树头部布局；本轮继续为树节点加入 hover 工具按钮、资源管理器式分隔标题行与拖拽重排占位反馈；右侧结果列表则同时支持顶部排序控件、列头点击排序，并将行内操作整理为“连接”主按钮加“更多”菜单（编辑/测试/克隆/删除）；`FileManager.vue` 当前则改成“左侧多根目录树 + 右侧文件夹总览”的目录浏览模式，左侧和右侧都只展示目录节点，根目录来自收藏路径并自动补入当前路径，右侧按根目录分组持续展示不同层级的文件夹，不再因为点击目录而切成单个目录文件表格；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`CommandInputBar.vue` 当前已将底部命令框升级为支持会话级草稿保留的多行 `textarea`：普通 `Enter` 插入换行，`Ctrl+Shift+Enter` 发送当前命令，输入框会按内容自动增高至约 6 行，超出后在输入框内部滚动，并继续兼容快捷指令/命令历史同步与选中发送逻辑。快捷指令相关能力目前由 `AddEditQuickCommandForm.vue`、`QuickCommandsView.vue` 与新增的 `utils/quickCommandTemplate.ts` 协同实现：编辑弹窗左侧既可维护自定义 `${变量名}`，也提供 `${{date}}`、`${{time}}`、`${{timestamp}}`、`${{week}}`、`${{uuid}}`、`${{random:8}}`、`${{clipboard}}`、`${{password}}` 等动态变量的一键插入；实际执行时会统一走共享解析器，覆盖编辑弹窗执行、列表直接执行、粘贴到命令输入框和发送到全部服务器等链路，并对未定义变量、无法读取的剪贴板或不可用密码给出非阻断告警。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；该视图当前还支持命令项右键菜单，并已修正为实底卡片式上下文菜单，提供立即执行、粘贴到命令输入框（不自动发送）、复制命令、发送到全部服务器、编辑和删除等动作。`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`，`TerminalTabBar.vue` 则进一步把连续同连接会话渲染成“服务器组头 + 终端子标签 + 组尾新增按钮”，全局 `+` 只负责选择其他服务器，从而让“单连接默认 1 个终端、可继续追加多个终端”的关系在顶部标签栏里更接近参考图；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复，以及树工具栏中的展开全部、收起全部和重置范围控制；近期又补上了独立的左侧树搜索、命中节点及祖先路径过滤、命中链路自动展开、节点计数高亮，以及更接近资源管理器的树头部布局；本轮继续为树节点加入 hover 工具按钮、资源管理器式分隔标题行与拖拽重排占位反馈；右侧结果列表则同时支持顶部排序控件、列头点击排序，并将行内操作整理为“连接”主按钮加“更多”菜单（编辑/测试/克隆/删除）；`FileManager.vue` 当前已进一步收敛为固定 `/` 根节点的单栏资源管理器树，组件加载时会优先拉取 `/` 目录，树中按“目录在前、文件在后”同时显示目录和文件节点，点击目录只展开与聚焦，点击文件则沿用现有工作区文件打开链路；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中工作区终端行为和标签交互优先落在 `session.store.ts`、`session/actions/sessionActions.ts`、`session/getters.ts`、`TerminalTabBar.vue`、`WorkspaceView.vue`、`Terminal.vue` 与相关 locale 文件。
### 仪表盘总览