feat: implement MobaXterm-style layout (Phase 1-2-4)

实现 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>

MOBA_IMPLEMENTATION_STATUS.md

@@ -0,0 +1,167 @@
+# 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 4: 布局集成 (100%)
+- ✅ `MobaLayout.vue` - 主布局
+- ✅ 路由配置更新
+  - 新增 `/moba` 路由
+  - 默认首页重定向到 `/moba`
+- ✅ 构建测试通过
+
+## 当前状态
+
+### 可用功能
+1. **会话树管理**
+   - 创建文件夹
+   - 展开/折叠文件夹
+   - 点击连接打开工作区
+   - localStorage 持久化
+
+2. **工作区面板**
+   - 垂直分屏(终端 + SFTP)
+   - 可拖拽调整分割比例
+   - 分割比例持久化
+
+3. **终端集成**
+   - 复用现有 TerminalWidget
+   - 实时监控面板
+   - WebSocket 连接
+
+4. **SFTP 功能**
+   - 文件浏览
+   - 上传/下载
+   - 创建文件夹
+   - 删除文件
+
+### 访问方式
+- 新布局: http://localhost:5173/moba
+- 旧布局: http://localhost:5173/connections (保留兼容)
+
+## 待实现 🚧
+
+### Phase 3: 拖拽功能 (0%)
+- ⏳ 实现 `useTreeDragDrop` composable
+- ⏳ 在 SessionTreeNode 中集成拖拽
+- ⏳ 拖拽约束和验证
+- ⏳ 拖拽视觉反馈
+
+### Phase 5: 数据迁移 (0%)
+- ⏳ 从 connections 自动导入
+- ⏳ 迁移提示 UI
+- ⏳ 新旧布局数据同步
+
+### Phase 6: 优化完善 (0%)
+- ⏳ 快捷键支持
+- ⏳ 右键菜单
+- ⏳ 搜索功能
+- ⏳ 响应式设计
+- ⏳ 性能优化
+
+## 测试步骤
+
+1. 启动后端服务
+```bash
+cd backend
+go run main.go
+```
+
+2. 启动前端服务
+```bash
+cd frontend
+npm run dev
+```
+
+3. 访问新布局
+```
+http://localhost:5173/moba
+```
+
+4. 测试功能
+   - 点击"文件夹"按钮创建文件夹
+   - 点击连接节点打开工作区
+   - 拖拽分割条调整终端/SFTP 比例
+   - 刷新页面验证状态持久化
+
+## 已知问题
+
+1. **拖拽功能未实现**
+   - 无法拖拽节点重新排序
+   - 无法拖拽节点到文件夹
+
+2. **会话树初始化**
+   - 首次使用时会自动从 connections 导入
+   - 创建默认"我的连接"文件夹
+
+3. **SFTP 功能简化**
+   - 移除了搜索和隐藏文件功能
+   - 移除了远程传输功能
+   - 上传进度显示简化
+
+## 下一步计划
+
+1. **立即实施 (Phase 3)**
+   - 实现拖拽功能,完成会话树的核心交互
+
+2. **短期优化 (Phase 5-6)**
+   - 添加快捷键支持
+   - 实现右键菜单
+   - 添加搜索功能
+
+3. **长期扩展**
+   - 多工作区支持
+   - 会话模板
+   - 云端同步
+
+## 技术栈
+
+- 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 待实施