feat: prepare sellable source delivery edition

2026-04-16 23:28:26 +08:00
parent f606d20000
commit 37dc4d8216
93 changed files with 7649 additions and 3096 deletions
--- a/MOBA_IMPLEMENTATION_STATUS.md
+++ b/MOBA_IMPLEMENTATION_STATUS.md
@@ -1,204 +1,49 @@
-# MobaXterm 风格重构实施状态
+# Moba Workspace 实施状态

-## 已完成 ✅
+## 当前结论
+- `/moba` 是当前唯一主工作区入口。
+- 历史路径 `/connections`、`/terminal` 仅保留兼容跳转；`/terminal/:id`、`/sftp/:id` 会打开对应工作区后进入 `/moba`，不再维护旧布局并行能力。
+- 本轮已补齐多实例工作区、嵌入式 SFTP 主要能力、移动端侧边栏抽屉和顶部面板控制。

-### Phase 1: 基础架构 (100%)
- ✅ 安装依赖 @vueuse/core
- ✅ 创建类型定义
-  - `frontend/src/types/sessionTree.ts`
-  - `frontend/src/types/workspace.ts`
- ✅ 实现 Pinia stores
-  - `frontend/src/stores/sessionTree.ts`
-  - `frontend/src/stores/workspace.ts`
+## 已落地能力

-### Phase 2: 核心组件开发 (100%)
- ✅ `SplitPane.vue` - 可拖拽分割面板
- ✅ `TopToolbar.vue` - 顶部工具栏(样式占位)
- ✅ `SessionTreeNode.vue` - 递归树节点组件
- ✅ `SessionTree.vue` - 会话树主组件
- ✅ `SftpPanel.vue` - SFTP 面板(props 驱动)
- ✅ `WorkspacePanel.vue` - 工作区面板
+### 工作区
+- 支持同一连接打开多个独立工作区实例
+- 顶部标签按实例显示，并支持关闭当前 / 关闭其他 / 关闭右侧 / 全部关闭
+- 支持终端面板显隐、SFTP 面板显隐、分屏比例重置
+- 分屏比例、活动工作区、SFTP 路径仍会持久化到本地

-### Phase 3: 拖拽功能 (100%)
- ✅ `useTreeDragDrop` composable 实现
- ✅ SessionTreeNode 集成拖拽事件
- ✅ 拖拽约束(不能拖到自己/子节点)
- ✅ 拖拽视觉反馈(半透明、指示线、高亮)
- ✅ 支持 before/after/inside 放置位置
+### 会话树
+- 创建文件夹、重命名、删除、拖拽排序
+- 搜索、展开/折叠全部、右键菜单
+- 支持手动排序和名称排序切换
+- 会话树变更会同步到服务端，失败时显示可重试提示

-### Phase 4: 布局集成 (100%)
- ✅ `MobaLayout.vue` - 主布局
- ✅ 路由配置更新
-  - 新增 `/moba` 路由
-  - 默认首页重定向到 `/moba`
- ✅ 构建测试通过
+### 嵌入式 SFTP
+- 文件浏览、上传、下载、删除、创建目录
+- 搜索、隐藏文件切换、路径直达
+- 上传进度面板
+- 远程传输弹窗、进度轮询、取消传输
+- 删除和新建目录已改为弹窗交互，不再使用浏览器阻塞式对话框

-### Phase 5: 数据迁移和同步 (100%)
- ✅ `MigrationPrompt.vue` - 迁移提示组件
- ✅ `useConnectionSync` composable - 双向同步
- ✅ syncNewConnections/syncDeletedConnections 方法
- ✅ syncConnectionName 方法
- ✅ 首次使用迁移提示
- ✅ 自动同步新增/删除的连接
+### 响应式
+- 小屏下会话树改为抽屉
+- 顶部工具栏和工作区按钮支持折行
+- Transfers 弹层和工作区布局支持窄屏访问

-### Phase 6: 优化完善 (100%)
- ✅ `useKeyboardShortcuts` composable
- ✅ 键盘快捷键: F2(重命名), Delete(删除), Ctrl+N(新建文件夹), Ctrl+F(搜索)
- ✅ `ContextMenu.vue` - 右键菜单组件
- ✅ 右键菜单: 重命名、删除、新建子文件夹
- ✅ 重命名对话框
- ✅ 删除确认提示
- ✅ `useTreeSearch` - 搜索功能
- ✅ 搜索高亮和结果过滤
- ✅ 展开/折叠全部功能
- ⏳ 响应式设计(移动端适配)
- ⏳ 性能优化(虚拟滚动)
+## 仍建议继续优化
+- 会话树大数据量场景的计算优化，目前虚拟滚动已做，但 flatten/sort 仍是计算热点
+- `/terminal/:id` 与 `/sftp/:id` 仍保留轻量兼容入口，用于承接旧深链接
+- Transfers 页面本身仍偏桌面布局，可继续细化移动端交互

-## 当前状态
-
-### 可用功能
-1. **会话树管理**
-   - 创建文件夹(按钮 + Ctrl+N)
-   - 展开/折叠文件夹
-   - 展开/折叠全部(工具栏按钮)
-   - 拖拽节点重新排序
-   - 拖拽节点到文件夹
-   - 搜索会话(Ctrl+F)
-   - 搜索结果高亮
-   - 右键菜单操作
-   - F2 重命名节点
-   - Delete 删除节点
-   - localStorage 持久化
-
-2. **工作区面板**
-   - 垂直分屏(终端 + SFTP)
-   - 可拖拽调整分割比例
-   - 分割比例持久化
-   - 每个连接独立工作区
-
-3. **终端集成**
-   - 复用现有 TerminalWidget
-   - 实时监控面板
-   - WebSocket 连接
-
-4. **SFTP 功能**
-   - 文件浏览
-   - 上传/下载
-   - 创建文件夹
-   - 删除文件
-
-5. **数据迁移**
-   - 首次使用迁移提示
-   - 自动同步连接变更
-   - 新旧布局共存
-
-### 访问方式
- 新布局: http://localhost:5173/moba
- 旧布局: http://localhost:5173/connections (保留兼容)
-
-## 测试步骤
-
-1. 启动后端服务
-```bash
-cd backend
-go run main.go
-```
-
-2. 启动前端服务
+## 验证方式
 ```bash
 cd frontend
-npm run dev
+npm run build
 ```

-3. 访问新布局
-```
-http://localhost:5173/moba
-```
+更完整的手工回归步骤见：
+- `docs/moba-regression-checklist.md`

-4. 测试功能
-   - 点击"文件夹"按钮或按 Ctrl+N 创建文件夹
-   - 使用工具栏按钮展开/折叠全部文件夹
-   - 按 Ctrl+F 或点击搜索框搜索会话
-   - 拖拽节点重新排序或移动到文件夹
-   - 右键点击节点查看菜单
-   - 按 F2 重命名选中节点
-   - 按 Delete 删除选中节点
-   - 点击连接节点打开工作区
-   - 拖拽分割条调整终端/SFTP 比例
-   - 刷新页面验证状态持久化
-
-## 已知问题
-
-1. **SFTP 功能简化**
-   - 移除了搜索和隐藏文件功能
-   - 移除了远程传输功能
-   - 上传进度显示简化
-
-2. **待优化项**
-   - 响应式设计(移动端适配)
-   - 大量节点时的虚拟滚动优化
-
-## 下一步计划
-
-1. **短期优化**
-   - 响应式设计(移动端/平板适配)
-   - 性能优化(虚拟滚动,大量节点场景)
-   - 添加更多键盘快捷键(Ctrl+C复制,Ctrl+V粘贴等)
-
-2. **长期扩展**
-   - 多工作区支持(标签页)
-   - 会话模板功能
-   - 云端同步
-   - 导入/导出配置
-   - 会话分组颜色标记
-   - 连接状态实时显示
-
-## 技术栈
-
- Vue 3.5.24 (Composition API)
- Pinia 3.0.4 (状态管理)
- Vue Router 5.0.2 (路由)
- Tailwind CSS 3.4.14 (样式)
- @vueuse/core (工具库)
- xterm.js 5.3.0 (终端)
- lucide-vue-next (图标)
-
-## 文件结构
-
-```
-frontend/src/
-├── types/
-│   ├── sessionTree.ts          # 会话树类型定义
-│   └── workspace.ts             # 工作区类型定义
-├── stores/
-│   ├── sessionTree.ts           # 会话树状态管理
-│   └── workspace.ts             # 工作区状态管理
-├── composables/
-│   ├── useTreeDragDrop.ts       # 拖拽逻辑
-│   ├── useConnectionSync.ts     # 连接同步
-│   ├── useKeyboardShortcuts.ts  # 键盘快捷键
-│   └── useTreeSearch.ts         # 会话树搜索
-├── components/
-│   ├── SessionTree.vue          # 会话树主组件
-│   ├── SessionTreeNode.vue      # 树节点组件(递归)
-│   ├── WorkspacePanel.vue       # 工作区面板
-│   ├── SplitPane.vue            # 分割面板
-│   ├── SftpPanel.vue            # SFTP 面板
-│   ├── TopToolbar.vue           # 顶部工具栏
-│   ├── ContextMenu.vue          # 右键菜单
-│   └── MigrationPrompt.vue      # 迁移提示
-└── layouts/
-    └── MobaLayout.vue           # MobaXterm 风格主布局
-```
-
---
-
-**最后更新**: 2026-04-03  
-**实施进度**: Phase 1-6 全部完成
-**Git 提交**: 6 个提交
-  - feat: implement MobaXterm-style layout (Phase 1-2-4)
-  - feat: implement drag-drop and data migration (Phase 3 & 5)
-  - feat: add keyboard shortcuts and context menu (Phase 6)
-  - feat: add session tree search functionality
-  - feat: add expand/collapse all functionality
-  - docs: update implementation status - all phases complete
+## 最近一次更新
+- 2026-04-14