feat: opsx-loki 全面升级 — 前端重构/用户与LDAP/部署向导/日志查询

基于 WEB-UI-Development-Guide 标准的整体升级,并更名 LokiDeploy → opsx-loki。前端(Gin+React+shadcn/ui): - 按 02/07 章重构:页面域化拆分(无超 400 行文件)、PageContainer/ListQuery、反馈分级(成功静默/失败 toast/危险确认)、401 单飞刷新+队列重放 - 暗色模式(next-themes)+ 语义 Token(--primary 品牌色/success/warning/info) - 部署向导(状态推导四步:环境→存储→Loki→采集,内嵌表单闭环) - 日志查询页:LogQL 标签构建器/拖拽直方图/日志上下文/Live Tail/查询历史 - 按用户+标签策略的查询授权(服务端强制合并策略) 后端(Go+Gin+JSON DB): - 简单用户管理(仅 admin,无 RBAC)+ TokenVersion 会话吊销 + 登录 IP 限流 - LDAP 接入:配置(AES 加密存储/hasPassword 脱敏)/测试连接/批量导入/登录 - 存储配置测试连接(SigV4 零依赖)+ 桶不存在自动创建 - Loki 三模式部署修复:SSH 密钥认证、3.x 配置模板、ruler 对象存储嵌套块、凭证解密、孤儿 deploying 状态恢复、Grafana 部署(可选默认关)+面板导入 - DaemonSet 采集纯 YAML(去 helm 依赖)+ DNS 自愈回退 ClusterIP + 集群名标签 - 日志查询代理:cluster-svc 经 kube-apiserver proxy/url 直连 + cursor 翻页 - 统一 log 命名空间;部署就绪探活;Grafana 访问地址自动记录修复:run.sh 增量编译检测、Sanitized 脱敏补全、LokiDeployment Update 白名单、健康检查 CreatedAt 零值等 10+ 存量 bug。数据兼容:DB 沿用旧 lokideploy.json(新名优先);localStorage 一次性迁移; HKDF 加密前缀保留(已加密凭证不受影响)。
2026-10-24 13:20:12 +08:00
1 parent 327e282356
commit f9c6c1d826
@@ -3,198 +3,249 @@ import {
  useState,
  useEffect,
  useCallback,
-  useMemo,
+  Suspense,
 } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router'
 import {
-  LayoutDashboard,
-  Server,
-  Monitor,
-  HardDrive,
-  Rocket,
-  RadioTower,
-  Settings,
  LogOut,
  PanelLeftClose,
  PanelLeftOpen,
  Shield,
  ChevronRight,
  Activity,
+  Menu,
+  Sun,
+  Moon,
+  Monitor,
 } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import { cn } from '@/lib/utils'
 import { useIsMobile } from '@/hooks/use-mobile'
+import { menuItems, findRouteMeta } from '@/router/routes'
+import { getUser, clearAuth } from '@/lib/auth-storage'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'

-interface MenuItem {
-  path: string
-  icon: typeof LayoutDashboard
-  label: string
+// 侧栏折叠状态持久化 key（命名空间见开发标准 08 章）
+const LAYOUT_COLLAPSED_KEY = 'opsxloki.layout.collapsed'
+
+// 侧栏导航 — 桌面 aside 与移动端抽屉共用；菜单数据来自路由配置单源派生
+function SidebarNav({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) {
+  const location = useLocation()
+  const isAdmin = getUser()?.role === 'admin'
+  // adminOnly 项（用户管理）仅管理员可见；后端 AdminAuth 兜底
+  const visibleItems = menuItems.filter((item) => !item.adminOnly || isAdmin)
+  return (
+    <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto" aria-label="主导航">
+      {visibleItems.map((item) => {
+        const isActive = location.pathname === item.path
+        return (
+          <Link
+            key={item.path}
+            to={item.path}
+            onClick={onNavigate}
+            aria-label={item.label}
+            className={cn(
+              'flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all',
+              isActive
+                ? 'bg-primary text-primary-foreground'
+                : 'text-slate-400 hover:bg-slate-800 hover:text-white'
+            )}
+            title={!collapsed ? item.label : undefined}
+          >
+            {item.icon && <item.icon className="w-5 h-5 flex-shrink-0" />}
+            {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
+            {!collapsed && isActive && (
+              <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0" />
+            )}
+          </Link>
+        )
+      })}
+    </nav>
+  )
 }

-const MENU_ITEMS: MenuItem[] = [
-  { path: '/', icon: LayoutDashboard, label: '仪表盘' },
-  { path: '/clusters', icon: Server, label: '集群管理' },
-  { path: '/hosts', icon: Monitor, label: '主机管理' },
-  { path: '/storage', icon: HardDrive, label: '存储配置' },
-  { path: '/deployments', icon: Rocket, label: '部署Loki' },
-  { path: '/collectors', icon: RadioTower, label: '部署客户端' },
-  { path: '/settings', icon: Settings, label: '系统设置' },
-]
+// 侧栏 Logo 区
+function SidebarLogo({ collapsed }: { collapsed: boolean }) {
+  return (
+    <div className="h-16 flex items-center px-4 border-b border-slate-700 flex-shrink-0">
+      {collapsed ? (
+        <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center mx-auto">
+          <Activity className="w-5 h-5 text-white" />
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+            <Activity className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-lg tracking-tight">opsx-loki</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// 主题三态切换：浅色 → 深色 → 跟随系统（key: opsxloki.theme.mode）
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'
+  const label = next === 'light' ? '切换为浅色' : next === 'dark' ? '切换为深色' : '切换为跟随系统'
+  return (
+    <button
+      onClick={() => setTheme(next)}
+      aria-label={label}
+      title={label}
+      className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+    >
+      {theme === 'light' ? (
+        <Sun className="w-4 h-4" />
+      ) : theme === 'dark' ? (
+        <Moon className="w-4 h-4" />
+      ) : (
+        <Monitor className="w-4 h-4" />
+      )}
+    </button>
+  )
+}
+
+// 页面级加载骨架（挂在 main 内，切页时布局不闪）
+function PageSkeleton() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-label="页面加载中">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-40 rounded-xl" />
+        ))}
+      </div>
+    </div>
+  )
+}

 /**
- * Layout 组件（React.memo优化）
- * 
- * 优化点：
- * 1. 使用 React.memo 避免不必要的重渲染
- * 2. menuItems 使用 useMemo 缓存
- * 3. handleLogout 使用 useCallback 缓存
- * 4. sidebar 状态使用 useIsMobile 自动适配移动端
- * 5. 导航链接使用 useMemo 缓存避免重复计算
+ * Layout 组件 — 布局骨架，业务页只挂在内容区
+ * - 菜单/顶栏标题来自路由 meta 单源（router/routes.tsx）
+ * - 桌面端折叠状态持久化；移动端（<768px）侧栏为抽屉 + 遮罩
+ * - 页面懒加载的 Suspense 边界在 main 内部
 */
 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 [collapsed, setCollapsed] = useState(() => localStorage.getItem(LAYOUT_COLLAPSED_KEY) === '1')
+  const [mobileOpen, setMobileOpen] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()
+  const user = getUser()

-  // 当移动端状态变化时，自动调整侧边栏
-  useEffect(() => {
-    setSidebarOpen(!isMobile)
-  }, [isMobile])
+  // 顶栏标题来自路由 meta
+  const pageTitle = findRouteMeta(location.pathname)?.title || 'opsx-loki'

-  // 从localStorage加载用户信息
+  // 折叠状态持久化（仅桌面端语义）
  useEffect(() => {
-    const stored = localStorage.getItem('user')
-    if (stored) {
-      try {
-        setUser(JSON.parse(stored))
-      } catch {
-        // 解析失败静默处理
-      }
-    }
+    localStorage.setItem(LAYOUT_COLLAPSED_KEY, collapsed ? '1' : '0')
+  }, [collapsed])
+
+  const toggleSidebar = useCallback(() => {
+    setCollapsed((prev) => !prev)
  }, [])

-  // 缓存当前页面标题
-  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')
+    clearAuth()
+    navigate('/login', { replace: true })
  }, [navigate])

-  // 缓存侧边栏切换函数
-  const toggleSidebar = useCallback(() => {
-    setSidebarOpen((prev) => !prev)
-  }, [])
-
  return (
-    <div className="flex h-screen bg-slate-50 dark:bg-slate-950">
-      {/* Sidebar */}
-      <aside
-        className={cn(
-          'bg-slate-900 text-white transition-all duration-300 flex flex-col flex-shrink-0',
-          sidebarOpen ? 'w-64' : 'w-16'
-        )}
-      >
-        {/* Logo */}
-        <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">
-                <Activity className="w-5 h-5 text-white" />
-              </div>
-              <span className="font-bold text-lg tracking-tight">LokiDeploy</span>
-            </div>
-          ) : (
-            <div className="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center mx-auto">
-              <Activity className="w-5 h-5 text-white" />
-            </div>
+    <div className="flex h-screen bg-background">
+      {/* 桌面侧栏 */}
+      {!isMobile && (
+        <aside
+          className={cn(
+            'bg-slate-900 text-white transition-all duration-300 flex flex-col flex-shrink-0',
+            collapsed ? 'w-16' : 'w-64'
          )}
-        </div>
+        >
+          <SidebarLogo collapsed={collapsed} />
+          <SidebarNav collapsed={collapsed} />
+          <div className="p-2 border-t border-slate-700 flex-shrink-0">
+            <button
+              onClick={toggleSidebar}
+              aria-label={collapsed ? '展开菜单' : '收起菜单'}
+              title={collapsed ? '展开菜单' : '收起菜单'}
+              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"
+            >
+              {collapsed ? (
+                <PanelLeftOpen className="w-5 h-5" />
+              ) : (
+                <PanelLeftClose className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+        </aside>
+      )}

-        {/* Navigation */}
-        <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={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 flex-shrink-0" />
-                )}
-              </Link>
-            )
-          })}
-        </nav>
-
-        {/* Bottom Actions */}
-        <div className="p-2 border-t border-slate-700 flex-shrink-0">
-          <button
-            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" />
-            )}
-          </button>
-        </div>
-      </aside>
+      {/* 移动端抽屉侧栏 */}
+      {isMobile && (
+        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+          <SheetContent side="left" className="bg-slate-900 text-white border-none p-0 w-72">
+            <SheetHeader className="sr-only">
+              <SheetTitle className="text-white">opsx-loki 导航</SheetTitle>
+            </SheetHeader>
+            <div className="flex flex-col h-full">
+              <SidebarLogo collapsed={false} />
+              <SidebarNav collapsed={false} onNavigate={() => setMobileOpen(false)} />
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}

      {/* Main Content */}
      <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 flex-shrink-0">
-          <h1 className="text-xl font-semibold text-slate-800 dark:text-white truncate">
-            {pageTitle}
-          </h1>
+        <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-4 md:px-6 flex-shrink-0 gap-3">
+          <div className="flex items-center gap-3 min-w-0">
+            {isMobile && (
+              <button
+                onClick={() => setMobileOpen(true)}
+                aria-label="打开导航菜单"
+                className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+              >
+                <Menu className="w-5 h-5" />
+              </button>
+            )}
+            <h1 className="text-lg md:text-xl font-semibold text-slate-800 dark:text-white truncate">
+              {pageTitle}
+            </h1>
+          </div>
          <div className="flex items-center gap-4 flex-shrink-0">
+            <ThemeToggle />
            {user && (
              <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300">
                <div className="flex items-center gap-2">
                  <Shield className="w-4 h-4" />
                  <span>{user.username}</span>
-                  <span className="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium">
+                  <span className="px-2 py-0.5 rounded-full bg-success/10 text-success text-xs font-medium">
                    {user.role === 'admin' ? '管理员' : user.role}
                  </span>
                </div>
                <button
                  onClick={handleLogout}
                  title="退出登录"
-                  className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-slate-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/30 transition-all"
+                  aria-label="退出登录"
+                  className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-all"
                >
                  <LogOut className="w-4 h-4" />
-                  <span>退出</span>
+                  <span className="hidden md:inline">退出</span>
                </button>
              </div>
            )}
          </div>
        </header>

-        {/* Page Content */}
-        <main className="flex-1 overflow-auto p-6">
-          {children}
+        {/* Page Content — 页面级 Suspense 边界，懒加载时不闪布局 */}
+        <main className="flex-1 overflow-auto p-4 md:p-6">
+          <Suspense fallback={<PageSkeleton />}>{children}</Suspense>
        </main>
      </div>
    </div>