Initial commit: SSH Manager (backend + frontend)

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/layouts/MainLayout.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import { useConnectionsStore } from '../stores/connections'
+import { Server, LogOut, Menu, X } from 'lucide-vue-next'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const connectionsStore = useConnectionsStore()
+const sidebarOpen = ref(false)
+
+connectionsStore.fetchConnections().catch(() => {})
+
+function closeSidebar() {
+  sidebarOpen.value = false
+}
+</script>
+
+<template>
+  <div class="flex h-screen bg-slate-900">
+    <button
+      @click="sidebarOpen = !sidebarOpen"
+      class="lg:hidden fixed top-4 left-4 z-30 p-2 rounded-lg bg-slate-800 border border-slate-700 text-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 cursor-pointer"
+      aria-label="切换侧边栏"
+    >
+      <Menu v-if="!sidebarOpen" class="w-6 h-6" aria-hidden="true" />
+      <X v-else class="w-6 h-6" aria-hidden="true" />
+    </button>
+    <aside
+      :class="[
+        'w-64 bg-slate-800 border-r border-slate-700 flex flex-col transition-transform duration-200 z-20',
+        'fixed lg:static inset-y-0 left-0',
+        sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+      ]"
+    >
+      <div class="p-4 border-b border-slate-700">
+        <h1 class="text-lg font-semibold text-slate-100">SSH 管理器</h1>
+        <p class="text-sm text-slate-400">{{ authStore.displayName || authStore.username }}</p>
+      </div>
+      <nav class="flex-1 p-4 space-y-1 pt-16 lg:pt-4">
+        <RouterLink
+          to="/connections"
+          @click="closeSidebar"
+          class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-slate-700 hover:text-slate-100 transition-colors duration-200 cursor-pointer min-h-[44px] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-inset"
+          :class="{ 'bg-slate-700 text-cyan-400': route.path === '/connections' }"
+          aria-label="连接列表"
+        >
+          <Server class="w-5 h-5 flex-shrink-0" aria-hidden="true" />
+          <span>连接列表</span>
+        </RouterLink>
+      </nav>
+      <div class="p-4 border-t border-slate-700">
+        <button
+          @click="authStore.logout(); $router.push('/login')"
+          class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:bg-slate-700 hover:text-slate-100 transition-colors duration-200 cursor-pointer w-full min-h-[44px] focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-inset"
+          aria-label="退出登录"
+        >
+          <LogOut class="w-5 h-5" aria-hidden="true" />
+          <span>退出登录</span>
+        </button>
+      </div>
+    </aside>
+    <div
+      v-if="sidebarOpen"
+      class="lg:hidden fixed inset-0 bg-black/50 z-10"
+      aria-hidden="true"
+      @click="sidebarOpen = false"
+    />
+    <main class="flex-1 overflow-auto min-w-0">
+      <RouterView />
+    </main>
+  </div>
+</template>