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>
This commit is contained in:
49
frontend/src/components/TopToolbar.vue
Normal file
49
frontend/src/components/TopToolbar.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { Settings, HelpCircle, Bell, MonitorCog } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-12 bg-slate-900 border-b border-slate-700 px-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
|
||||
<MonitorCog class="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-slate-100">SSH Manager</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1 text-xs text-slate-400">
|
||||
<button class="px-3 py-1.5 rounded hover:bg-slate-800 hover:text-slate-200 transition-colors">
|
||||
会话
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded hover:bg-slate-800 hover:text-slate-200 transition-colors">
|
||||
工具
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded hover:bg-slate-800 hover:text-slate-200 transition-colors">
|
||||
设置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="p-2 rounded text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
|
||||
title="通知"
|
||||
>
|
||||
<Bell class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 rounded text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
|
||||
title="帮助"
|
||||
>
|
||||
<HelpCircle class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 rounded text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
|
||||
title="设置"
|
||||
>
|
||||
<Settings class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user