2c06329d68
实现 MobaXterm 风格的界面重构,包含会话树、工作区面板和分屏功能。 新增功能: - 左侧会话树支持文件夹分组和展开/折叠 - 工作区垂直分屏(终端 + SFTP) - 可拖拽调整分割比例 - 状态持久化到 localStorage - 顶部工具栏(样式占位) 技术实现: - 新增 sessionTreeStore 和 workspaceStore 状态管理 - 新增 SessionTree/SessionTreeNode 递归组件 - 新增 SplitPane 可拖拽分割组件 - 重构 SftpPanel 为 props 驱动 - 新增 MobaLayout 主布局 - 路由默认重定向到 /moba 依赖更新: - 安装 @vueuse/core 用于拖拽功能 待实现: - Phase 3: 会话树拖拽排序 - Phase 5: 数据迁移 - Phase 6: 快捷键、右键菜单、搜索等优化 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.0 KiB
4.0 KiB
MobaXterm 风格重构实施状态
已完成 ✅
Phase 1: 基础架构 (100%)
- ✅ 安装依赖 @vueuse/core
- ✅ 创建类型定义
frontend/src/types/sessionTree.tsfrontend/src/types/workspace.ts
- ✅ 实现 Pinia stores
frontend/src/stores/sessionTree.tsfrontend/src/stores/workspace.ts
Phase 2: 核心组件开发 (100%)
- ✅
SplitPane.vue- 可拖拽分割面板 - ✅
TopToolbar.vue- 顶部工具栏(样式占位) - ✅
SessionTreeNode.vue- 递归树节点组件 - ✅
SessionTree.vue- 会话树主组件 - ✅
SftpPanel.vue- SFTP 面板(props 驱动) - ✅
WorkspacePanel.vue- 工作区面板
Phase 4: 布局集成 (100%)
- ✅
MobaLayout.vue- 主布局 - ✅ 路由配置更新
- 新增
/moba路由 - 默认首页重定向到
/moba
- 新增
- ✅ 构建测试通过
当前状态
可用功能
-
会话树管理
- 创建文件夹
- 展开/折叠文件夹
- 点击连接打开工作区
- localStorage 持久化
-
工作区面板
- 垂直分屏(终端 + SFTP)
- 可拖拽调整分割比例
- 分割比例持久化
-
终端集成
- 复用现有 TerminalWidget
- 实时监控面板
- WebSocket 连接
-
SFTP 功能
- 文件浏览
- 上传/下载
- 创建文件夹
- 删除文件
访问方式
- 新布局: http://localhost:5173/moba
- 旧布局: http://localhost:5173/connections (保留兼容)
待实现 🚧
Phase 3: 拖拽功能 (0%)
- ⏳ 实现
useTreeDragDropcomposable - ⏳ 在 SessionTreeNode 中集成拖拽
- ⏳ 拖拽约束和验证
- ⏳ 拖拽视觉反馈
Phase 5: 数据迁移 (0%)
- ⏳ 从 connections 自动导入
- ⏳ 迁移提示 UI
- ⏳ 新旧布局数据同步
Phase 6: 优化完善 (0%)
- ⏳ 快捷键支持
- ⏳ 右键菜单
- ⏳ 搜索功能
- ⏳ 响应式设计
- ⏳ 性能优化
测试步骤
- 启动后端服务
cd backend
go run main.go
- 启动前端服务
cd frontend
npm run dev
- 访问新布局
http://localhost:5173/moba
- 测试功能
- 点击"文件夹"按钮创建文件夹
- 点击连接节点打开工作区
- 拖拽分割条调整终端/SFTP 比例
- 刷新页面验证状态持久化
已知问题
-
拖拽功能未实现
- 无法拖拽节点重新排序
- 无法拖拽节点到文件夹
-
会话树初始化
- 首次使用时会自动从 connections 导入
- 创建默认"我的连接"文件夹
-
SFTP 功能简化
- 移除了搜索和隐藏文件功能
- 移除了远程传输功能
- 上传进度显示简化
下一步计划
-
立即实施 (Phase 3)
- 实现拖拽功能,完成会话树的核心交互
-
短期优化 (Phase 5-6)
- 添加快捷键支持
- 实现右键菜单
- 添加搜索功能
-
长期扩展
- 多工作区支持
- 会话模板
- 云端同步
技术栈
- 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 # 工作区状态管理
├── components/
│ ├── SessionTree.vue # 会话树主组件
│ ├── SessionTreeNode.vue # 树节点组件(递归)
│ ├── WorkspacePanel.vue # 工作区面板
│ ├── SplitPane.vue # 分割面板
│ ├── SftpPanel.vue # SFTP 面板
│ └── TopToolbar.vue # 顶部工具栏
└── layouts/
└── MobaLayout.vue # MobaXterm 风格主布局
最后更新: 2026-04-03
实施进度: Phase 1-2 完成, Phase 4 完成, Phase 3/5/6 待实施