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>
This commit is contained in:
Logan.LiandClaude committed
1 parent
fb8d10231a
commit
327e282356
93 files changed
+8433
-3089
No files matched your search
@@ -0,0 +1,40 @@
|
||||
import { memo } from 'react'
|
||||
import { type LucideIcon, Inbox } from 'lucide-react'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: LucideIcon
|
||||
title: string
|
||||
description?: string
|
||||
action?: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 空状态组件
|
||||
* 图标+标题+描述+可选操作按钮
|
||||
* 替换各页面中重复的空状态展示代码
|
||||
*/
|
||||
export const EmptyState = memo(function EmptyState({
|
||||
icon: Icon = Inbox,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
className,
|
||||
}: EmptyStateProps) {
|
||||
return (
|
||||
<Card className={cn('border-dashed border-slate-300 dark:border-slate-700', className)}>
|
||||
<CardContent className="p-12 text-center">
|
||||
<Icon className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
||||
<p className="text-slate-500 font-medium">{title}</p>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-400 mt-1">{description}</p>
|
||||
)}
|
||||
{action && <div className="mt-4">{action}</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
|
||||
export default EmptyState
|
||||
@@ -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
|
||||
@@ -0,0 +1,49 @@
|
||||
import { memo } from 'react'
|
||||
import { Activity } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
text?: string
|
||||
}
|
||||
|
||||
const SIZE_MAP = {
|
||||
sm: 'w-5 h-5',
|
||||
md: 'w-8 h-8',
|
||||
lg: 'w-12 h-12',
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一加载动画组件
|
||||
* 替代各页面中重复的加载动画代码
|
||||
*/
|
||||
export const LoadingSpinner = memo(function LoadingSpinner({
|
||||
size = 'md',
|
||||
className,
|
||||
text,
|
||||
}: LoadingSpinnerProps) {
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center justify-center gap-3', className)}>
|
||||
<Activity
|
||||
className={cn('text-emerald-500 animate-spin', SIZE_MAP[size])}
|
||||
/>
|
||||
{text && <p className="text-sm text-slate-500">{text}</p>}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
/**
|
||||
* 全屏居中加载状态
|
||||
*/
|
||||
export const FullScreenLoader = memo(function FullScreenLoader({
|
||||
text = '加载中...',
|
||||
}: Pick<LoadingSpinnerProps, 'text'>) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<LoadingSpinner text={text} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default LoadingSpinner
|
||||
@@ -0,0 +1,37 @@
|
||||
import { memo } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string
|
||||
description?: string
|
||||
action?: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面头部组件
|
||||
* 标题+描述+操作按钮的统一布局
|
||||
* 替换各页面中重复的 header 结构
|
||||
*/
|
||||
export const PageHeader = memo(function PageHeader({
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
className,
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<div className={cn('flex items-center justify-between', className)}>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-800 dark:text-white">
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 mt-0.5">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div className="flex-shrink-0">{action}</div>}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default PageHeader
|
||||
@@ -0,0 +1,152 @@
|
||||
import { memo, useMemo } from 'react'
|
||||
import {
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
PauseCircle,
|
||||
Activity,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { statusLabel } from '@/lib/utils'
|
||||
|
||||
export type StatusSize = 'sm' | 'md'
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: string
|
||||
showLabel?: boolean
|
||||
size?: StatusSize
|
||||
className?: string
|
||||
}
|
||||
|
||||
interface StatusConfig {
|
||||
icon: LucideIcon
|
||||
color: string
|
||||
bg: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: Record<string, Omit<StatusConfig, 'label'>> = {
|
||||
running: {
|
||||
icon: CheckCircle,
|
||||
color: 'text-emerald-500',
|
||||
bg: 'bg-emerald-100 text-emerald-700',
|
||||
},
|
||||
active: {
|
||||
icon: CheckCircle,
|
||||
color: 'text-emerald-500',
|
||||
bg: 'bg-emerald-100 text-emerald-700',
|
||||
},
|
||||
failed: {
|
||||
icon: AlertTriangle,
|
||||
color: 'text-red-500',
|
||||
bg: 'bg-red-100 text-red-700',
|
||||
},
|
||||
error: {
|
||||
icon: AlertTriangle,
|
||||
color: 'text-red-500',
|
||||
bg: 'bg-red-100 text-red-700',
|
||||
},
|
||||
pending: {
|
||||
icon: Clock,
|
||||
color: 'text-amber-500',
|
||||
bg: 'bg-amber-100 text-amber-700',
|
||||
},
|
||||
stopped: {
|
||||
icon: PauseCircle,
|
||||
color: 'text-slate-400',
|
||||
bg: 'bg-slate-100 text-slate-600',
|
||||
},
|
||||
inactive: {
|
||||
icon: PauseCircle,
|
||||
color: 'text-slate-400',
|
||||
bg: 'bg-slate-100 text-slate-600',
|
||||
},
|
||||
deploying: {
|
||||
icon: Activity,
|
||||
color: 'text-blue-500',
|
||||
bg: 'bg-blue-100 text-blue-700',
|
||||
},
|
||||
}
|
||||
|
||||
function getStatusConfig(status: string): StatusConfig {
|
||||
const config = STATUS_CONFIG[status] || {
|
||||
icon: Clock,
|
||||
color: 'text-slate-400',
|
||||
bg: 'bg-slate-100 text-slate-600',
|
||||
}
|
||||
return {
|
||||
...config,
|
||||
label: statusLabel(status),
|
||||
}
|
||||
}
|
||||
|
||||
const SIZE_MAP: Record<StatusSize, { icon: string; badge: string }> = {
|
||||
sm: { icon: 'w-4 h-4', badge: 'px-2 py-0.5 text-xs' },
|
||||
md: { icon: 'w-5 h-5', badge: 'px-2.5 py-0.5 text-sm' },
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一状态徽章组件
|
||||
* 接收status字符串，返回对应的图标+颜色+标签
|
||||
* 替换所有页面中重复的getStatusIcon/getStatusColor
|
||||
*/
|
||||
export const StatusBadge = memo(function StatusBadge({
|
||||
status,
|
||||
showLabel = true,
|
||||
size = 'sm',
|
||||
className,
|
||||
}: StatusBadgeProps) {
|
||||
const config = useMemo(() => getStatusConfig(status), [status])
|
||||
const sizeClasses = SIZE_MAP[size]
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded-full font-medium',
|
||||
sizeClasses.badge,
|
||||
config.bg,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cn(
|
||||
sizeClasses.icon,
|
||||
config.color,
|
||||
status === 'deploying' && 'animate-pulse'
|
||||
)}
|
||||
/>
|
||||
{showLabel && <span>{config.label}</span>}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
|
||||
/** 独立状态图标组件（仅图标，无标签） */
|
||||
export const StatusIcon = memo(function StatusIcon({
|
||||
status,
|
||||
size = 'sm',
|
||||
className,
|
||||
}: Omit<StatusBadgeProps, 'showLabel'>) {
|
||||
const config = useMemo(() => getStatusConfig(status), [status])
|
||||
const sizeClasses = SIZE_MAP[size]
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<Icon
|
||||
className={cn(
|
||||
sizeClasses.icon,
|
||||
config.color,
|
||||
status === 'deploying' && 'animate-pulse',
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
/** 独立状态颜色工具函数（用于需要className的场景） */
|
||||
export function getStatusColorClass(status: string): string {
|
||||
return STATUS_CONFIG[status]?.bg || 'bg-slate-100 text-slate-600'
|
||||
}
|
||||
|
||||
export default StatusBadge
|
||||
Reference in new issue
Block a user