refactor: 前后端目录结构模块化 + v2 优化移植与缺陷修复

前端:
- src/srv/api → src/api，按域分文件夹(auth/cluster/host/storage/deployment/collector)
- 新增 http.ts 引擎(http.get/post/put/delete)，域模块改用语义化调用
- index.html 增加 favicon(匹配应用 logo 的 emerald + Activity 脉冲)

后端分层增强(保留包名):
- 新增 repository/：从 models 拆出 JsonDB 持久化层(InitDB/GetDB/Shutdown/RequestSave)
- 新增 dto/：从 controllers 抽出各域请求契约(带 binding 校验)
- 新增 pkg/crypto、pkg/jwt：从 utils 拆出安全原语(外部 jwt 别名 jwtv5 避免冲突)
- models 只留领域实体 + sanitizer；utils 只留 gin/应用相关(response/errors)

v2 优化移植与缺陷修复:
- 移植密钥分离/SSH TOFU/并发写安全/Loki 生产级配置/Docker 加固
- 修复 deployment.go 并发丢更新、Helm values 重复键、EncryptField 哨兵、loki-gateway 端点等审计缺陷
- 实现真正的优雅关停(main.go http.Server + signal + repository.Shutdown)
- 修复登录契约:后端返回 accessToken，前端 auth.ts/Login.tsx 对齐
- 补 crypto/jwt/repository 单元测试(含并发写回归)

验证: go build/vet/test 全绿；npm run build 通过；登录→鉴权→优雅关停冒烟通过

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/Layout.tsx

@@ -1,3 +1,10 @@
+import {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react'
 import { Link, useLocation, useNavigate } from 'react-router'
 import {
   LayoutDashboard,
@@ -14,10 +21,16 @@ import {
   ChevronRight,
   Activity,
 } from 'lucide-react'
-import { useState, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import { useIsMobile } from '@/hooks/use-mobile'
 
+interface MenuItem {
+  path: string
+  icon: typeof LayoutDashboard
+  label: string
+}
 
-const menuItems = [
+const MENU_ITEMS: MenuItem[] = [
   { path: '/', icon: LayoutDashboard, label: '仪表盘' },
   { path: '/clusters', icon: Server, label: '集群管理' },
   { path: '/hosts', icon: Monitor, label: '主机管理' },
@@ -27,35 +40,70 @@ const menuItems = [
   { path: '/settings', icon: Settings, label: '系统设置' },
 ]
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+/**
+ * Layout 组件（React.memo优化）
+ * 
+ * 优化点：
+ * 1. 使用 React.memo 避免不必要的重渲染
+ * 2. menuItems 使用 useMemo 缓存
+ * 3. handleLogout 使用 useCallback 缓存
+ * 4. sidebar 状态使用 useIsMobile 自动适配移动端
+ * 5. 导航链接使用 useMemo 缓存避免重复计算
+ */
+const Layout = memo(function Layout({ children }: { children: React.ReactNode }) {
+  const isMobile = useIsMobile()
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile)
   const [user, setUser] = useState<{ username: string; role: string } | null>(null)
   const location = useLocation()
   const navigate = useNavigate()
 
+  // 当移动端状态变化时，自动调整侧边栏
+  useEffect(() => {
+    setSidebarOpen(!isMobile)
+  }, [isMobile])
+
+  // 从localStorage加载用户信息
   useEffect(() => {
     const stored = localStorage.getItem('user')
     if (stored) {
-      setUser(JSON.parse(stored))
+      try {
+        setUser(JSON.parse(stored))
+      } catch {
+        // 解析失败静默处理
+      }
     }
   }, [])
 
-  const handleLogout = () => {
+  // 缓存当前页面标题
+  const pageTitle = useMemo(
+    () => MENU_ITEMS.find((item) => item.path === location.pathname)?.label || '仪表盘',
+    [location.pathname]
+  )
+
+  // 缓存登出处理函数
+  const handleLogout = useCallback(() => {
     localStorage.removeItem('token')
+    localStorage.removeItem('refreshToken')
     localStorage.removeItem('user')
     navigate('/login')
-  }
+  }, [navigate])
+
+  // 缓存侧边栏切换函数
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((prev) => !prev)
+  }, [])
 
   return (
     <div className="flex h-screen bg-slate-50 dark:bg-slate-950">
       {/* Sidebar */}
       <aside
-        className={`${
+        className={cn(
+          'bg-slate-900 text-white transition-all duration-300 flex flex-col flex-shrink-0',
           sidebarOpen ? 'w-64' : 'w-16'
-        } bg-slate-900 text-white transition-all duration-300 flex flex-col`}
+        )}
       >
         {/* Logo */}
-        <div className="h-16 flex items-center px-4 border-b border-slate-700">
+        <div className="h-16 flex items-center px-4 border-b border-slate-700 flex-shrink-0">
           {sidebarOpen ? (
             <div className="flex items-center gap-2">
               <div className="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center">
@@ -71,48 +119,57 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 py-4 px-2 space-y-1">
-          {menuItems.map((item) => {
+        <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto">
+          {MENU_ITEMS.map((item) => {
             const isActive = location.pathname === item.path
             return (
               <Link
                 key={item.path}
                 to={item.path}
-                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all ${
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all',
                   isActive
                     ? 'bg-emerald-600 text-white'
                     : 'text-slate-400 hover:bg-slate-800 hover:text-white'
-                }`}
+                )}
                 title={!sidebarOpen ? item.label : undefined}
               >
                 <item.icon className="w-5 h-5 flex-shrink-0" />
-                {sidebarOpen && <span className="text-sm font-medium">{item.label}</span>}
-                {sidebarOpen && isActive && <ChevronRight className="w-4 h-4 ml-auto" />}
+                {sidebarOpen && (
+                  <span className="text-sm font-medium">{item.label}</span>
+                )}
+                {sidebarOpen && isActive && (
+                  <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0" />
+                )}
               </Link>
             )
           })}
         </nav>
 
         {/* Bottom Actions */}
-        <div className="p-2 border-t border-slate-700">
+        <div className="p-2 border-t border-slate-700 flex-shrink-0">
           <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
+            onClick={toggleSidebar}
             title={sidebarOpen ? '收起菜单' : '展开菜单'}
             className="flex items-center justify-center w-full py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-white transition-all"
           >
-            {sidebarOpen ? <PanelLeftClose className="w-5 h-5" /> : <PanelLeftOpen className="w-5 h-5" />}
+            {sidebarOpen ? (
+              <PanelLeftClose className="w-5 h-5" />
+            ) : (
+              <PanelLeftOpen className="w-5 h-5" />
+            )}
           </button>
         </div>
       </aside>
 
       {/* Main Content */}
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-hidden min-w-0">
         {/* Top Bar */}
-        <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-6">
-          <h1 className="text-xl font-semibold text-slate-800 dark:text-white">
-            {menuItems.find((item) => item.path === location.pathname)?.label || '仪表盘'}
+        <header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-6 flex-shrink-0">
+          <h1 className="text-xl font-semibold text-slate-800 dark:text-white truncate">
+            {pageTitle}
           </h1>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 flex-shrink-0">
             {user && (
               <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300">
                 <div className="flex items-center gap-2">
@@ -142,4 +199,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </div>
     </div>
   )
-}
+})
+
+export default Layout