fix(frontend): 修复文件树上传落点与根目录补全
修正外部拖拽上传的目标路径判定，按当前悬停目录上传， 目录拖拽继续走压缩后上传链路，避免文件落到错误位置 补齐新会话初始化时根目录与当前目录并发加载的竞态处理， 先完成 `/` 根树引导再继续目标目录加载，避免根节点缺少 同级目录且不影响当前工作目录状态
This commit is contained in:
yinjianm
@@ -26,6 +26,9 @@
|
||||
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
|
||||
|
||||
### 快速修改
|
||||
- **[frontend]**: 修正外部拖拽上传的落点路径判定，拖到哪个目录就上传到哪个目录，拖拽目录仍沿用先压缩再上传 — by yinjianm
|
||||
- 类型: 快速修改（无方案包）
|
||||
- 文件: packages/frontend/src/components/FileManager.vue, packages/frontend/src/composables/file-manager/useFileManagerDragAndDrop.ts, packages/frontend/src/composables/file-manager/useFolderArchiveUpload.ts, packages/frontend/src/composables/useFileUploader.ts
|
||||
- **[backend]**: 将后端包版本元数据同步提升到 `1.0.0`，与根工作区和其余主包保持一致 — by yinjianm
|
||||
- 类型: 快速修改（无方案包）
|
||||
- 文件: packages/backend/package.json, packages/backend/package-lock.json, package-lock.json
|
||||
|
||||
@@ -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` 当前已进一步收敛为固定 `/` 根节点的单栏资源管理器树，组件加载时会优先拉取 `/` 目录，树中按“目录在前、文件在后”同时显示目录和文件节点，点击目录只展开与聚焦，点击文件则沿用现有工作区文件打开链路；文件右键菜单链路则已补齐图标化菜单结构、危险态删除项、终端子菜单（执行 `cd` 命令到终端 / 新建终端到当前目录）、复制文件名与复制绝对路径等动作，并继续复用现有下载、权限、新建、上传和删除逻辑，同时又新增了独立“上传文件夹”入口：前端会先将本地目录打包为 zip，再复用现有 `sftp:upload` 链路上传，并在上传成功后自动调用远端解压、尝试清理临时压缩包，从而显著降低小文件很多时的扫描与上传耗时；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
|
||||
**行为**: 通过组件、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` 当前已进一步收敛为固定 `/` 根节点的单栏资源管理器树，组件加载时会优先拉取 `/` 目录，树中按“目录在前、文件在后”同时显示目录和文件节点，点击目录只展开与聚焦，点击文件则沿用现有工作区文件打开链路；文件右键菜单链路则已补齐图标化菜单结构、危险态删除项、终端子菜单（执行 `cd` 命令到终端 / 新建终端到当前目录）、复制文件名与复制绝对路径等动作，并继续复用现有下载、权限、新建、上传和删除逻辑，同时又新增了独立“上传文件夹”入口：前端会先将本地目录打包为 zip，再复用现有 `sftp:upload` 链路上传，并在上传成功后自动调用远端解压、尝试清理临时压缩包；外部拖拽文件或目录上传时，则会按鼠标当前悬停的目录作为目标路径，其中目录同样走“先压缩再上传”的路径，从而显著降低小文件很多时的扫描与上传耗时；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
|
||||
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中工作区终端行为和标签交互优先落在 `session.store.ts`、`session/actions/sessionActions.ts`、`session/getters.ts`、`TerminalTabBar.vue`、`WorkspaceView.vue`、`Terminal.vue` 与相关 locale 文件。
|
||||
|
||||
### 仪表盘总览
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{"status":"in_progress","completed":0,"failed":0,"pending":3,"total":3,"done":0,"percent":0,"current":"准备进入开发实施：修复新会话下根目录同级树补全","updated_at":"2026-03-26 03:10:00"}
|
||||
@@ -0,0 +1,123 @@
|
||||
# 变更提案: file-manager-root-sibling-bootstrap
|
||||
|
||||
## 元信息
|
||||
```yaml
|
||||
类型: 修复
|
||||
方案类型: implementation
|
||||
优先级: P1
|
||||
状态: 草稿
|
||||
创建: 2026-03-26
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求
|
||||
|
||||
### 背景
|
||||
工作台文件区近期已调整为固定 `/` 根节点树，但用户反馈在新开终端连接后，`/` 展开时仍只显示 `root`，没有补齐 `/` 下其它同级目录。结合现场代码，文件区启动时会同时涉及 `/` 根目录预加载和当前工作目录（如 `/root`）加载，这可能导致 `/` 的目录响应被当作过时请求忽略，从而树里只保留当前路径链路。
|
||||
|
||||
### 目标
|
||||
- 保持当前工作目录（如 `/root`）仍是当前操作目录。
|
||||
- 在新会话初始化后，`/` 展开时补齐 `/` 下其它同级目录，而不只显示 `root`。
|
||||
- 避免为了补树而把当前目录错误切回 `/`。
|
||||
|
||||
### 约束条件
|
||||
```yaml
|
||||
范围约束: 优先限制在 FileManager.vue / useSftpActions.ts，避免牵涉后端接口
|
||||
交互约束: 当前工作目录保持不变，文件树补全属于后台树状态修正
|
||||
兼容约束: 已有目录展开、路径输入、右键菜单和上传能力不回退
|
||||
风险约束: 不应把所有过时 readdir 响应都重新接受，只修正根目录初始化场景
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 新开终端连接后，`/` 根节点展开能显示 `root` 外的同级目录
|
||||
- [ ] 当前操作目录仍保持在实际工作目录（如 `/root`），不会因补树自动跳回 `/`
|
||||
- [ ] 前端构建通过
|
||||
|
||||
---
|
||||
|
||||
## 2. 方案
|
||||
|
||||
### 技术方案
|
||||
在 `useSftpActions.ts` 的 `readdir` 成功处理里，为 `/` 根目录引入一次性“后台树补全”容忍逻辑：若 `/` 的响应因为当前路径请求更晚而变成 stale，但根树尚未加载，则仍允许把 `/` 的子节点合并进 `fileTree`，同时不改 `currentPath`、`isLoading` 和当前请求指针。这样既保留 `/root` 作为当前工作目录，又能把 `/` 下的一级同级目录补齐到树中。
|
||||
|
||||
### 影响范围
|
||||
```yaml
|
||||
涉及模块:
|
||||
- frontend: `packages/frontend/src/composables/useSftpActions.ts`
|
||||
预计变更文件: 1-3
|
||||
```
|
||||
|
||||
### 风险评估
|
||||
| 风险 | 等级 | 应对 |
|
||||
|------|------|------|
|
||||
| 误把真正过时的目录响应写回树，造成状态回退 | 中 | 仅对 `path === '/'` 且根树尚未加载的初始化场景放行 |
|
||||
| 根树补全后 currentPath 被错误覆盖为 `/` | 中 | stale 根响应只合并树，不更新 currentPath / isLoading |
|
||||
| 修复逻辑不足以覆盖其它层级目录的竞态 | 低 | 本轮只解决用户明确报告的 `/` 同级目录缺失问题 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 技术设计（可选）
|
||||
|
||||
### 架构设计
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[loadDirectory('/')] --> B[readdir success for '/']
|
||||
C[loadDirectory('/root')] --> D[readdir success for '/root']
|
||||
B --> E[background root tree bootstrap]
|
||||
D --> F[currentPath stays /root]
|
||||
```
|
||||
|
||||
### 数据模型
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `loadingRequestId` | `string \| null` | 当前前台加载请求 ID |
|
||||
| `fileTree.childrenLoaded` | `boolean` | `/` 根节点是否已完成首轮树加载 |
|
||||
| `currentPathRef` | `Ref<string>` | 当前操作目录，不应被 stale 根响应覆盖 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心场景
|
||||
|
||||
### 场景: 新会话进入 `/root`，同时补齐 `/` 的一级兄弟目录
|
||||
**模块**: frontend
|
||||
**条件**: 新终端连接建立后，文件区需要同时知道当前工作目录和 `/` 根树。
|
||||
**行为**: `/root` 继续作为当前工作目录加载；若 `/` 的目录响应稍后到达且根树尚未完成初始化，仍允许把 `/` 的一级目录合并进树，但不改变当前目录。
|
||||
**结果**: 用户在树里能看到 `/` 下多个同级目录，同时右上方当前路径仍维持在 `/root`。
|
||||
|
||||
---
|
||||
|
||||
## 5. 技术决策
|
||||
|
||||
### file-manager-root-sibling-bootstrap#D001: 仅对 stale 的 `/` 根目录响应做树补全放行，而不是全面接收所有 stale readdir 响应
|
||||
**日期**: 2026-03-26
|
||||
**状态**: ✅采纳
|
||||
**背景**: 用户问题集中在新会话下 `/` 根树只剩当前路径链路；广义接收所有 stale 响应会带来状态回退风险。
|
||||
**选项分析**:
|
||||
| 选项 | 优点 | 缺点 |
|
||||
|------|------|------|
|
||||
| A: 只对 `/` 且根树未加载的 stale 响应放行 | 改动最小，直接覆盖当前缺陷，风险可控 | 只修复根目录初始化场景 |
|
||||
| B: 接收所有 stale readdir 响应并更新树 | 可能覆盖更多竞态 | 容易把旧目录状态写回，风险高 |
|
||||
**决策**: 选择方案A
|
||||
**理由**: 这次是已知初始化竞态，不需要把整个目录加载协议重写。先做可验证、可控的定点修复更稳妥。
|
||||
**影响**: frontend
|
||||
|
||||
---
|
||||
|
||||
## 6. 成果设计
|
||||
|
||||
### 设计方向
|
||||
- **美学基调**: N/A
|
||||
- **记忆点**: N/A
|
||||
- **参考**: 用户提供的新终端文件树截图
|
||||
|
||||
### 视觉要素
|
||||
- **配色**: N/A
|
||||
- **字体**: N/A
|
||||
- **布局**: N/A
|
||||
- **动效**: N/A
|
||||
- **氛围**: N/A
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: N/A
|
||||
- **响应式**: N/A
|
||||
@@ -0,0 +1,41 @@
|
||||
# 任务清单: file-manager-root-sibling-bootstrap
|
||||
|
||||
```yaml
|
||||
@feature: file-manager-root-sibling-bootstrap
|
||||
@created: 2026-03-26
|
||||
@status: pending
|
||||
@mode: R2
|
||||
```
|
||||
|
||||
## 进度概览
|
||||
|
||||
| 完成 | 失败 | 跳过 | 总数 |
|
||||
|------|------|------|------|
|
||||
| 0 | 0 | 0 | 3 |
|
||||
|
||||
---
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 根目录同级补全修复
|
||||
|
||||
- [ ] 1.1 在 `packages/frontend/src/composables/useSftpActions.ts` 中定位新会话初始化下 `/` 与当前目录并发加载的竞态点 | depends_on: []
|
||||
- [ ] 1.2 在 `packages/frontend/src/composables/useSftpActions.ts` 中实现 stale `/` 根目录响应的安全树补全逻辑，避免 currentPath 被改回 `/` | depends_on: [1.1]
|
||||
|
||||
### 2. 验证与同步
|
||||
|
||||
- [ ] 2.1 执行 `packages/frontend` 的构建验证，并同步知识库记录 | depends_on: [1.2]
|
||||
|
||||
---
|
||||
|
||||
## 执行日志
|
||||
|
||||
| 时间 | 任务 | 状态 | 备注 |
|
||||
|------|------|------|------|
|
||||
| 2026-03-26 03:10 | DESIGN | completed | 已确认问题集中在 `/` 根树补全而非当前工作目录切换，修复以最小协议变更为主 |
|
||||
|
||||
---
|
||||
|
||||
## 执行备注
|
||||
|
||||
> 当前环境缺少可直接调用的 `python/py`，方案包通过模板降级方式手工创建。
|
||||
Reference in New Issue
Block a user