Initial commit: FunConnect project with server, relay, client and admin panel

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

admin-panel/src/components/Layout.tsx

@@ -0,0 +1,68 @@
+import { Outlet, NavLink, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../stores/authStore'
+import clsx from 'clsx'
+
+const navItems = [
+  { path: '/dashboard', label: '仪表盘', icon: '📊' },
+  { path: '/users', label: '用户管理', icon: '👥' },
+  { path: '/rooms', label: '房间管理', icon: '🏠' },
+  { path: '/downloads', label: '客户端下载', icon: '📥' },
+  { path: '/settings', label: '服务器设置', icon: '⚙️' },
+  { path: '/logs', label: '系统日志', icon: '📋' },
+]
+
+export default function Layout() {
+  const { logout } = useAuthStore()
+  const navigate = useNavigate()
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Sidebar */}
+      <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
+        <div className="p-6 border-b border-gray-200">
+          <h1 className="text-xl font-bold text-primary-600">FunMC</h1>
+          <p className="text-sm text-gray-500">管理面板</p>
+        </div>
+
+        <nav className="flex-1 p-4 space-y-1">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) =>
+                clsx('sidebar-link', isActive && 'active')
+              }
+            >
+              <span className="text-lg">{item.icon}</span>
+              <span>{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="p-4 border-t border-gray-200">
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-red-50 hover:text-red-600 rounded-lg transition-colors"
+          >
+            <span className="text-lg">🚪</span>
+            <span>退出登录</span>
+          </button>
+        </div>
+
+        <div className="p-4 text-center text-xs text-gray-400 border-t border-gray-200">
+          魔幻方开发
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-auto">
+        <Outlet />
+      </main>
+    </div>
+  )
+}