192 lines
5.2 KiB
Markdown
192 lines
5.2 KiB
Markdown
# MobaXterm 风格重构实施状态
|
|
|
|
## 已完成 ✅
|
|
|
|
### 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` - 工作区面板
|
|
|
|
### Phase 3: 拖拽功能 (100%)
|
|
- ✅ `useTreeDragDrop` composable 实现
|
|
- ✅ SessionTreeNode 集成拖拽事件
|
|
- ✅ 拖拽约束(不能拖到自己/子节点)
|
|
- ✅ 拖拽视觉反馈(半透明、指示线、高亮)
|
|
- ✅ 支持 before/after/inside 放置位置
|
|
|
|
### Phase 4: 布局集成 (100%)
|
|
- ✅ `MobaLayout.vue` - 主布局
|
|
- ✅ 路由配置更新
|
|
- 新增 `/moba` 路由
|
|
- 默认首页重定向到 `/moba`
|
|
- ✅ 构建测试通过
|
|
|
|
### Phase 5: 数据迁移和同步 (100%)
|
|
- ✅ `MigrationPrompt.vue` - 迁移提示组件
|
|
- ✅ `useConnectionSync` composable - 双向同步
|
|
- ✅ syncNewConnections/syncDeletedConnections 方法
|
|
- ✅ syncConnectionName 方法
|
|
- ✅ 首次使用迁移提示
|
|
- ✅ 自动同步新增/删除的连接
|
|
|
|
### Phase 6: 优化完善 (80%)
|
|
- ✅ `useKeyboardShortcuts` composable
|
|
- ✅ 键盘快捷键: F2(重命名), Delete(删除), Ctrl+N(新建文件夹)
|
|
- ✅ `ContextMenu.vue` - 右键菜单组件
|
|
- ✅ 右键菜单: 重命名、删除、新建子文件夹
|
|
- ✅ 重命名对话框
|
|
- ✅ 删除确认提示
|
|
- ⏳ 搜索功能
|
|
- ⏳ 响应式设计
|
|
- ⏳ 性能优化(虚拟滚动)
|
|
|
|
## 当前状态
|
|
|
|
### 可用功能
|
|
1. **会话树管理**
|
|
- 创建文件夹(按钮 + Ctrl+N)
|
|
- 展开/折叠文件夹
|
|
- 拖拽节点重新排序
|
|
- 拖拽节点到文件夹
|
|
- 右键菜单操作
|
|
- 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
|
|
```
|
|
|
|
3. 访问新布局
|
|
```
|
|
http://localhost:5173/moba
|
|
```
|
|
|
|
4. 测试功能
|
|
- 点击"文件夹"按钮或按 Ctrl+N 创建文件夹
|
|
- 拖拽节点重新排序或移动到文件夹
|
|
- 右键点击节点查看菜单
|
|
- 按 F2 重命名选中节点
|
|
- 按 Delete 删除选中节点
|
|
- 点击连接节点打开工作区
|
|
- 拖拽分割条调整终端/SFTP 比例
|
|
- 刷新页面验证状态持久化
|
|
|
|
## 已知问题
|
|
|
|
1. **SFTP 功能简化**
|
|
- 移除了搜索和隐藏文件功能
|
|
- 移除了远程传输功能
|
|
- 上传进度显示简化
|
|
|
|
2. **性能优化待完成**
|
|
- 大量节点时可能需要虚拟滚动
|
|
- 搜索功能尚未实现
|
|
|
|
## 下一步计划
|
|
|
|
1. **短期优化**
|
|
- 添加会话树搜索功能
|
|
- 实现响应式设计(移动端适配)
|
|
- 性能优化(虚拟滚动)
|
|
|
|
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 # 键盘快捷键
|
|
├── 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 基本完成 (Phase 6 部分功能待实现)
|
|
**Git 提交**: 3 个提交
|
|
- 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)
|