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>
37 lines
910 B
Vue
37 lines
910 B
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useSessionTreeStore } from '../stores/sessionTree'
|
|
import { useWorkspaceStore } from '../stores/workspace'
|
|
import TopToolbar from '../components/TopToolbar.vue'
|
|
import SessionTree from '../components/SessionTree.vue'
|
|
import WorkspacePanel from '../components/WorkspacePanel.vue'
|
|
|
|
const treeStore = useSessionTreeStore()
|
|
const workspaceStore = useWorkspaceStore()
|
|
|
|
onMounted(() => {
|
|
treeStore.restore()
|
|
workspaceStore.restore()
|
|
|
|
if (treeStore.nodes.length === 0) {
|
|
treeStore.initFromConnections()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen flex flex-col bg-slate-950 text-slate-100">
|
|
<TopToolbar />
|
|
|
|
<div class="flex-1 min-h-0 flex">
|
|
<div class="w-72 flex-shrink-0">
|
|
<SessionTree />
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<WorkspacePanel />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|