opsx
f3733f0bfc
- 品牌: Go 模块/数据文件/二进制/构建部署资产全部 opsx→lokistack;前端 localStorage 命名空间迁移(读旧写新,含按用户 id 前缀迁移);修复 nginx upstream 与 Makefile 引用已改名服务的断裂 - i18n: react-i18next 落地,common + 11 个页面域命名空间全站中英(菜单/顶栏/登录/列表页/表单/确认弹窗/状态徽章);设置页语言即时切换;修复词典自注册导致的循环导入白屏 - 用户管理: 批量删除(POST /users/batch-delete,不删自己/最后管理员,部分失败不阻断)+ 行复选/全选/批量工具条 - 主题: 浅色侧栏(中性灰激活态)、四态模式(浅色/深色/跟随系统/定时切换,按时区判定)、顶栏太阳月亮二态、设置页紧凑分段选择器 - UI: 登录记住用户名、CardActionButton 统一五页卡片操作钮、shadcn Badge 替换手写徽章、语义色修正 - 清理: 移除主机 Web 终端(前后端)、k8s-helm/Helm 遗留代码与字段、README 重写精简 - 修复: 侧栏与日志告警 order 重复、路由标题 i18n key 未翻译、词典双逗号等
97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import { memo, useMemo } from 'react'
|
|
import { Clock } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { STATUS_CONFIG } from './status-config'
|
|
|
|
export type StatusSize = 'sm' | 'md'
|
|
|
|
interface StatusBadgeProps {
|
|
status: string
|
|
showLabel?: boolean
|
|
size?: StatusSize
|
|
className?: string
|
|
}
|
|
|
|
function getStatusConfig(status: string): { icon: typeof Clock; color: string; bg: string } {
|
|
return STATUS_CONFIG[status] || {
|
|
icon: Clock,
|
|
color: 'text-muted-foreground',
|
|
bg: 'bg-muted text-muted-foreground',
|
|
}
|
|
}
|
|
|
|
// 状态标签走 common.status.*;未收录的状态原样展示(数据层保留英文状态值)
|
|
function statusLabelOf(t: (k: string) => string, status: string): string {
|
|
const key = `status.${status}`
|
|
const label = t(key)
|
|
return label === key ? status : label
|
|
}
|
|
|
|
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 { t } = useTranslation()
|
|
const config = useMemo(() => getStatusConfig(status), [status])
|
|
const label = statusLabelOf(t, 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>{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
|
|
)}
|
|
/>
|
|
)
|
|
})
|
|
|
|
export default StatusBadge
|