feat(ui): 重设计文件管理器书签与传输面板

新增书签作用域与连接关联，后端为 favorite_paths 补充 scope 和 connection_id 字段及查询写入支持前端重构书签弹窗与编辑表单，支持本地/云端筛选、作用域选择与多语言文案更新文件管理器工具栏改为紧凑图标样式，上传入口合并为下拉菜单，并新增底部传输面板统一展示上传任务同时优化 SSH 终端运行态为显式状态机，并为短命令补充最短可见时间，避免运行中标记闪烁难以感知
2026-05-01 22:54:29 +08:00
parent 96d9950c6b
commit 2233e3fa4f
33 changed files with 1868 additions and 1541 deletions
@@ -9,5 +9,5 @@
  "done": 6,
  "percent": 100,
  "current": "-",
-  "updated_at": "2026-04-21 04:28:38"
+  "updated_at": "2026-05-01 21:07:56"
 }
@@ -41,8 +41,8 @@

 | 时间 | 事件 | 详情 |
 |------|------|------|
-| 2026-03-26 04:05 | 2.2 | 完成 | 拖拽上传前新增目标目录确认，并在当前可见目录上传完成后主动刷新 |
-| 2026-03-26 04:08 | 3.1 | 完成 | 目录删除改为“仅删空目录 / 强制递归删除”双确认，后端 `sftp:rmdir` 接收 `recursive` 标志 |
-| 2026-03-26 04:10 | 3.2 | 完成 | 删除目录后若当前/待加载路径失效，前端自动回退父目录，终止持续 `No such file` 重试 |
 | 2026-03-26 04:14 | 4.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 与 `@nexus-terminal/backend` 均通过 |
 | 2026-04-21 04:28:38 | 进度快照(自动) | 完成:6 失败:0 跳过:0 待做:0 (100%) |
+| 2026-05-01 21:01:18 | 进度快照(自动) | 完成:6 失败:0 跳过:0 待做:0 (100%) |
+| 2026-05-01 21:02:20 | 进度快照(自动) | 完成:6 失败:0 跳过:0 待做:0 (100%) |
+| 2026-05-01 21:07:56 | PreCompact快照 | 完成:6 失败:0 跳过:0 待做:0 (100%) |
@@ -0,0 +1,13 @@
+{
+  "status": "pending",
+  "completed": 0,
+  "failed": 0,
+  "skipped": 0,
+  "pending": 10,
+  "uncertain": 0,
+  "total": 10,
+  "done": 0,
+  "percent": 0,
+  "current": "重设计目录树样式 — 紧凑树视图",
+  "updated_at": "2026-05-01 21:35:15"
+}
@@ -0,0 +1,98 @@
+# 方案包: file-manager-ui-redesign
+
+- 创建日期: 2026-05-01 21:11
+- 类型: implementation
+- 决策ID: file-manager-ui-redesign#D001
+
+## 1. 需求
+
+### 背景
+用户提供了 5 张目标截图，要求重新设计工作台文件管理器的 UI，涵盖目录树、工具栏、书签系统、新增书签弹窗、传输管理面板五个区域。当前实现使用卡片式行布局和文字+图标按钮，与目标的紧凑树视图和纯图标工具栏存在较大差异。
+
+### 目标
+- 目录树：从卡片行布局转为紧凑传统文件树（黄色文件夹图标、绿色高亮活动目录、符号链接显示目标、更紧密间距、无卡片边框）
+- 工具栏：从文字+图标按钮转为紧凑纯图标工具栏（tooltip 提示），上传按钮合并为下拉菜单（"上传文件"/"上传文件夹"）
+- 书签系统：重新设计为"书签列表 N"头部、"本地"/"云端"标签切换（本地=仅当前服务器、云端=全局共享）、scope 标签、更丰富的卡片布局和操作按钮
+- 新增书签弹窗：新增"记录位置"scope 选择器（仅当前服务器/全局共享）
+- 传输管理面板：新增底部抽屉面板，含"全部/上传/下载"标签，统一展示上传和传输任务，空态"暂无传输任务"
+
+### 约束条件
+- 使用项目现有技术栈：Vue 3 + Composition API、Pinia、Tailwind CSS、vue-i18n
+- 书签 scope 功能需要后端数据库 migration（新增 scope 和 connection_id 字段）
+- 保持所有现有功能不变，仅改变 UI 呈现和增加 scope 功能
+- 遵循项目现有主题变量系统
+
+### 验收标准
+- 目录树视觉效果匹配目标截图：紧凑行高、黄色文件夹图标、绿色活动行高亮
+- 工具栏为纯图标按钮，上传按钮为下拉菜单
+- 书签支持本地/云端 scope 切换和筛选
+- 传输面板在底部以抽屉形式展开，支持三个 tab 筛选
+- 所有 i18n 键已添加（zh-CN、en-US、ja-JP）
+
+## 2. 方案
+
+### 技术方案
+
+#### 任务1：目录树 UI 重设计
+- 修改 `FileManager.vue` 模板中的 `explorerTreeRows` 渲染区域
+- 移除卡片样式（`rounded-lg border`），改为紧凑行（`py-0.5`）
+- 图标颜色：目录用 `text-yellow-500`（黄色文件夹），文件保持现有图标
+- 活动行：使用 `bg-green-600/20 text-green-400` 高亮
+- 符号链接：在文件名后显示 `→ target`
+- 调整树头部样式使其更紧凑
+
+#### 任务2：工具栏重设计
+- 将工具栏区域的文字+图标按钮改为纯图标按钮（统一 `w-7 h-7`）
+- 为每个按钮添加 `title` tooltip
+- 上传文件和上传文件夹合并为单个按钮 + 下拉菜单
+- 新增 `uploadMenuOpen` ref 控制下拉菜单显隐
+
+#### 任务3：书签系统重构
+- 后端：`favorite_paths` 表新增 `scope` (TEXT, DEFAULT 'global') 和 `connection_id` (INTEGER, NULLABLE) 字段
+- 后端：API 支持 `?scope=local&connectionId=X` 查询参数
+- 前端 store：扩展 `FavoritePathItem` 类型，添加 scope 和 connectionId 字段
+- 前端 `FavoritePathsModal.vue`：重设计为含头部计数、本地/云端 tab、scope 标签的布局
+- 前端 `AddEditFavoritePathForm.vue`：新增 scope 选择器
+
+#### 任务4：传输管理面板
+- 新建 `TransferPanel.vue` 组件：底部抽屉面板
+- 含"全部/上传/下载"标签切换
+- 统一展示 `uploads`（来自 FileUploadPopup）和 `transferTasks`（来自 TransferProgressModal）
+- 空态显示"暂无传输任务"
+- 集成到 `FileManager.vue` 底部
+
+### 影响范围
+- `packages/frontend/src/components/FileManager.vue` — 目录树+工具栏+传输面板集成
+- `packages/frontend/src/components/FavoritePathsModal.vue` — 书签列表重设计
+- `packages/frontend/src/components/AddEditFavoritePathForm.vue` — 新增 scope 选择器
+- `packages/frontend/src/components/TransferPanel.vue` — 新组件
+- `packages/frontend/src/stores/favoritePaths.store.ts` — scope 支持
+- `packages/backend/src/database/schema.ts` — 数据库 migration
+- `packages/backend/src/favorite-paths/` — API 扩展
+- `packages/frontend/src/locales/` — i18n 键
+
+### 风险评估
+- 数据库 migration 需谨慎处理现有数据兼容性（现有书签默认 scope='global'）
+- FileManager.vue 文件较大（~2570 行），修改需精确定位避免副作用
+- 传输面板需同时消费两个不同数据源（uploads + transferTasks）
+
+### 方案取舍
+- 选择在 `FileManager.vue` 内直接修改而非拆分子组件，因为目录树渲染与父组件状态紧密耦合，拆分成本高于收益
+- 书签 scope 选择直接内联到现有表单而非独立组件，保持简单
+- 传输面板选择新建独立组件，因为它的数据源和生命周期独立于文件管理器其他部分
+
+### 验证策略
+- verifyMode: review-first
+- reviewerFocus: UI 视觉匹配目标截图、样式一致性、响应式表现
+- testerFocus: 书签 CRUD 功能完整性、scope 筛选正确性、传输面板数据展示
+- 风险边界: 数据库 migration 回滚方案为手动删除新增字段
+
+## 成果设计
+
+### 美学基调
+延续项目现有的暗色终端风格，紧凑高信息密度，使用项目主题变量系统保持一致性。
+
+### 视觉要素
+- 配色：遵循项目现有 `--color-*` CSS 变量体系；目录树活动行使用绿色系，文件夹图标使用黄色系
+- 布局：紧凑垂直排列，减少 padding 和 margin，提升信息密度
+- 交互：hover 状态使用 `bg-background` 微弱高亮，保持轻量
@@ -0,0 +1,104 @@
+@feature: file-manager-ui-redesign
+@created: 2026-05-01 21:11
+@status: pending
+@mode: implementation
+
+## 进度概览
+
+- 完成: 0 / 失败: 0 / 跳过: 0 / 总数: 9
+
+## 任务列表
+
+### 阶段1: 目录树与工具栏 UI 重设计
+
+- [ ] 1.1 重设计目录树样式 — 紧凑树视图
+  - 文件: `packages/frontend/src/components/FileManager.vue` (模板 lines 2476-2530)
+  - 预期变更: 移除卡片边框和圆角，改为紧凑行布局；文件夹图标改为黄色；活动行改为绿色高亮；调整缩进和行高；优化树头部样式
+  - 完成标准: 目录树视觉匹配目标截图（紧凑行、黄色文件夹、绿色活动高亮、无卡片边框）
+  - 验证方式: 视觉对比目标截图
+  - depends_on: []
+
+- [ ] 1.2 重设计工具栏 — 紧凑纯图标按钮
+  - 文件: `packages/frontend/src/components/FileManager.vue` (模板 lines 2371-2441)
+  - 预期变更: 移除按钮文字标签，保留纯图标；统一按钮尺寸 `w-7 h-7`；上传文件和上传文件夹合并为下拉菜单按钮
+  - 完成标准: 工具栏为纯图标按钮行，上传为下拉菜单
+  - 验证方式: 视觉对比目标截图，检查 tooltip 显示
+  - depends_on: []
+
+### 阶段2: 传输管理面板
+
+- [ ] 2.1 创建 TransferPanel.vue 组件
+  - 文件: `packages/frontend/src/components/TransferPanel.vue` (新建)
+  - 预期变更: 底部抽屉面板组件，含"全部/上传/下载"tab，统一展示上传和传输任务，空态"暂无传输任务"
+  - 完成标准: 组件独立运行，支持 tab 切换和空态展示
+  - 验证方式: 组件接收 props 正确渲染
+  - depends_on: []
+
+- [ ] 2.2 集成 TransferPanel 到 FileManager
+  - 文件: `packages/frontend/src/components/FileManager.vue`
+  - 预期变更: 在文件管理器底部集成 TransferPanel，替代原 FileUploadPopup 的固定定位弹窗；添加传输面板展开/收起切换
+  - 完成标准: 传输面板在文件管理器底部正确展示，上传任务和传输任务统一显示
+  - 验证方式: 触发上传后传输面板展示任务
+  - depends_on: [2.1]
+
+### 阶段3: 书签系统重构
+
+- [ ] 3.1 后端数据库 migration — 添加 scope 字段
+  - 文件: `packages/backend/src/database/schema.ts`, `packages/backend/src/database/migrations/`
+  - 预期变更: `favorite_paths` 表新增 `scope` TEXT 字段（默认 'global'）和 `connection_id` INTEGER 字段（nullable）；编写 migration 脚本确保现有数据兼容
+  - 完成标准: 数据库表结构包含新字段，现有数据 scope 默认为 'global'
+  - 验证方式: 检查 schema 定义和 migration 逻辑
+  - depends_on: []
+
+- [ ] 3.2 后端 API 扩展 — scope 查询支持
+  - 文件: `packages/backend/src/favorite-paths/favorite-paths.routes.ts`, `packages/backend/src/favorite-paths/favorite-paths.repository.ts`
+  - 预期变更: GET /favorite-paths 支持 `?scope=local&connectionId=X` 查询参数；POST/PUT 支持 scope 和 connection_id 字段
+  - 完成标准: API 正确按 scope 和 connectionId 过滤/保存书签
+  - 验证方式: API 请求测试
+  - depends_on: [3.1]
+
+- [ ] 3.3 前端 store 扩展 — scope 支持
+  - 文件: `packages/frontend/src/stores/favoritePaths.store.ts`
+  - 预期变更: `FavoritePathItem` 类型添加 `scope` 和 `connectionId` 字段；CRUD 方法传递 scope 参数；新增 `activeTab` 状态和 `fetchByScope` 方法
+  - 完成标准: Store 支持按 scope 筛选和保存书签
+  - 验证方式: Store 方法调用正确传参
+  - depends_on: [3.2]
+
+- [ ] 3.4 重设计 FavoritePathsModal — 书签列表 UI
+  - 文件: `packages/frontend/src/components/FavoritePathsModal.vue`
+  - 预期变更: 头部显示"书签列表 N"；添加"本地"/"云端"tab 切换；每个书签卡片显示 scope 标签和操作按钮
+  - 完成标准: 书签列表 UI 匹配目标截图，支持 tab 切换筛选
+  - 验证方式: 视觉对比目标截图
+  - depends_on: [3.3]
+
+- [ ] 3.5 重设计 AddEditFavoritePathForm — 添加 scope 选择器
+  - 文件: `packages/frontend/src/components/AddEditFavoritePathForm.vue`
+  - 预期变更: 在表单中新增"记录位置"scope 选择器（仅当前服务器/全局共享），保存时传递 scope 和 connectionId
+  - 完成标准: 表单支持选择书签 scope
+  - 验证方式: 创建书签时 scope 正确保存
+  - depends_on: [3.3]
+
+### 阶段4: i18n 与收尾
+
+- [ ] 4.1 添加 i18n 键
+  - 文件: `packages/frontend/src/locales/zh-CN.json`, `en-US.json`, `ja-JP.json`
+  - 预期变更: 添加传输面板、书签 scope、工具栏 tooltip 相关的所有新 i18n 键
+  - 完成标准: 所有新增 UI 文本均使用 i18n 键，三种语言文件同步更新
+  - 验证方式: 搜索硬编码字符串
+  - depends_on: [1.1, 1.2, 2.1, 3.4, 3.5]
+
+## 执行日志
+
+| 时间 | 事件 | 详情 |
+|------|------|------|
+| 2026-05-01 21:25:50 | 进度快照(自动) | 完成:0 失败:0 跳过:0 待做:10 (0%) |
+| 2026-05-01 21:27:46 | 进度快照(自动) | 完成:0 失败:0 跳过:0 待做:10 (0%) |
+| 2026-05-01 21:28:56 | 进度快照(自动) | 完成:0 失败:0 跳过:0 待做:10 (0%) |
+| 2026-05-01 21:33:06 | 进度快照(自动) | 完成:0 失败:0 跳过:0 待做:10 (0%) |
+| 2026-05-01 21:35:15 | 进度快照(自动) | 完成:0 失败:0 跳过:0 待做:10 (0%) |
+
+## 执行备注
+
+- FileManager.vue 约 2570 行，修改时需精确定位模板区域避免副作用
+- 数据库 migration 需确保 SQLite 兼容（ALTER TABLE ADD COLUMN）
+- 传输面板需同时消费 uploads（本地 ref）和 transferTasks（API 轮询）两个数据源