feat: 品牌统一 LokiStack + 全站中英 i18n + 用户批量删除 + 主题定时切换与浅色侧栏

- 品牌: 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 未翻译、词典双逗号等

frontend/src/components/CardActionButton.tsx

@@ -0,0 +1,53 @@
+import { memo } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+type CardActionButtonProps = {
+  /** 图标 */
+  icon: LucideIcon
+  /** 危险操作（删除）语义色 */
+  destructive?: boolean
+  /** 图标旋转（验证/部署等进行中态） */
+  spinning?: boolean
+  disabled?: boolean
+  onClick?: () => void
+  /** 追加样式（如部署钮的 success 底色） */
+  className?: string
+} & (
+  /** 文字钮：图标 + 文案，内容宽度，不拉伸 */
+  | { label: string; ariaLabel?: undefined }
+  /** 纯图标钮：必须提供可访问名，同时作为 title 悬浮提示 */
+  | { label?: undefined; ariaLabel: string }
+)
+
+/**
+ * 资源卡片操作钮 — 五大资源页（集群/主机/存储/部署/采集）统一形式：
+ * outline + sm + 内容宽度（不用 flex-1，换行交给 ResourceCard 操作区的 flex-wrap）。
+ */
+export const CardActionButton = memo(function CardActionButton({
+  icon: Icon,
+  destructive = false,
+  spinning = false,
+  disabled = false,
+  onClick,
+  className,
+  label,
+  ariaLabel,
+}: CardActionButtonProps) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      className={cn('text-xs', destructive && 'text-destructive hover:text-destructive hover:bg-destructive/10', className)}
+      aria-label={label ? undefined : ariaLabel}
+      title={label ? undefined : ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className={cn(label ? 'size-3 mr-1' : 'size-3.5', spinning && 'animate-spin')} />
+      {label}
+    </Button>
+  )
+})

frontend/src/components/ConfirmDialog.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -31,26 +32,29 @@ export const ConfirmDialog = memo(function ConfirmDialog({
   open,
   onOpenChange,
   name,
-  title = '确认删除',
+  title,
   description,
-  confirmText = '删除',
+  confirmText,
   loading = false,
   onConfirm,
 }: ConfirmDialogProps) {
+  const { t } = useTranslation()
   const desc =
     description ??
     (name
-      ? `确定要删除「${name}」吗？此操作不可恢复。`
-      : '确定要执行该操作吗？此操作不可恢复。')
+      ? t('dialog.confirmDefault', { name })
+      : t('dialog.confirmIrreversible'))
+  const resolvedTitle = title ?? t('dialog.confirmTitle')
+  const resolvedConfirmText = confirmText ?? t('dialog.confirmText')
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogTitle>{resolvedTitle}</AlertDialogTitle>
           <AlertDialogDescription>{desc}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
+          <AlertDialogCancel disabled={loading}>{t('dialog.cancel')}</AlertDialogCancel>
           <AlertDialogAction
             disabled={loading}
             onClick={(e) => {
@@ -60,7 +64,7 @@ export const ConfirmDialog = memo(function ConfirmDialog({
             }}
             className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
           >
-            {loading ? '处理中...' : confirmText}
+            {loading ? t('dialog.processing') : resolvedConfirmText}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

frontend/src/components/ErrorBoundary.tsx

@@ -1,3 +1,4 @@
+import i18n from '@/i18n'
 import { Component, type ReactNode } from 'react'
 
 interface State {
@@ -16,7 +17,7 @@ function isChunkLoadError(error: Error): boolean {
   )
 }
 
-const CHUNK_RELOADED_FLAG = 'opsxloki.chunk-reloaded'
+const CHUNK_RELOADED_FLAG = 'lokistack.chunk-reloaded'
 
 /**
  * 全局错误边界
@@ -48,25 +49,25 @@ export default class ErrorBoundary extends Component<{ children: ReactNode }, St
       return (
         <div className="min-h-screen flex items-center justify-center bg-muted dark:bg-slate-950 p-4">
           <div className="max-w-lg w-full bg-card rounded-2xl shadow-lg border border-destructive/30 p-6">
-            <h2 className="text-lg font-semibold text-destructive mb-2">页面渲染出错</h2>
+            <h2 className="text-lg font-semibold text-destructive mb-2">{i18n.t('boundary.title')}</h2>
             <p className="text-sm text-muted-foreground mb-3">
-              页面遇到异常，可尝试刷新；若持续出现请把下方信息反馈给开发者。
+              {i18n.t('boundary.hint')}
             </p>
             <pre className="text-xs bg-muted font-mono text-destructive p-3 rounded-lg overflow-auto max-h-40 font-mono whitespace-pre-wrap">
-              {this.state.message || '未知错误'}
+              {this.state.message || i18n.t('boundary.unknown')}
             </pre>
             <div className="flex gap-2 mt-4">
               <button
                 onClick={() => window.location.reload()}
                 className="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90"
               >
-                刷新页面
+                {i18n.t('boundary.reload')}
               </button>
               <button
                 onClick={this.handleReset}
                 className="px-4 py-2 bg-muted text-muted-foreground rounded-lg text-sm hover:bg-muted"
               >
-                重置组件
+                {i18n.t('boundary.reset')}
               </button>
             </div>
           </div>

frontend/src/components/ErrorState.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { AlertCircle, RotateCw } from 'lucide-react'
 import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
@@ -15,21 +16,23 @@ interface ErrorStateProps {
  * 禁止把失败吞掉后渲染成「暂无数据」（数据组件三态之一，见开发标准 07 章）。
  */
 export const ErrorState = memo(function ErrorState({
-  message = '加载失败',
+  message,
   onRetry,
   className,
 }: ErrorStateProps) {
+  const { t } = useTranslation()
+  const resolvedMessage = message ?? t('error.title')
   return (
     <Card className="border-destructive/30 border-dashed">
       <CardContent className={className ?? 'p-12 text-center'}>
         <AlertCircle className="w-12 h-12 text-destructive mx-auto mb-4" />
-        <p className="text-muted-foreground font-medium">{message}</p>
-        <p className="text-sm text-muted-foreground mt-1">请检查网络或后端服务状态后重试</p>
+        <p className="text-muted-foreground font-medium">{resolvedMessage}</p>
+        <p className="text-sm text-muted-foreground mt-1">{t('error.hint')}</p>
         {onRetry && (
           <div className="mt-4">
             <Button variant="outline" size="sm" onClick={onRetry}>
               <RotateCw className="w-3.5 h-3.5 mr-1" />
-              重试
+              {t('error.retry')}
             </Button>
           </div>
         )}

frontend/src/components/Layout.tsx

@@ -16,27 +16,30 @@ import {
   Menu,
   Sun,
   Moon,
-  Monitor,
 } from 'lucide-react'
 import { useTheme } from 'next-themes'
+import { useTranslation } from 'react-i18next'
 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 { isThemeAuto, setThemeAuto } from '@/lib/theme-schedule'
+import { useScheduledTheme } from '@/hooks/useScheduledTheme'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 
 // 侧栏折叠状态持久化 key（命名空间见开发标准 08 章）
-const LAYOUT_COLLAPSED_KEY = 'opsxloki.layout.collapsed'
+const LAYOUT_COLLAPSED_KEY = 'lokistack.layout.collapsed'
 
 // 侧栏导航 — 桌面 aside 与移动端抽屉共用；菜单数据来自路由配置单源派生
 function SidebarNav({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) {
   const location = useLocation()
+  const { t } = useTranslation()
   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="主导航">
+    <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto" aria-label={t('layout.nav')}>
       {visibleItems.map((item) => {
         const isActive = location.pathname === item.path
         return (
@@ -44,17 +47,17 @@ function SidebarNav({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?
             key={item.path}
             to={item.path}
             onClick={onNavigate}
-            aria-label={item.label}
+            aria-label={t(item.label)}
             className={cn(
               'relative flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors',
               isActive
-                ? 'bg-sidebar-primary/15 text-sidebar-primary font-semibold before:absolute before:left-0 before:h-5 before:w-0.5 before:rounded-full before:bg-sidebar-primary'
-                : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold before:absolute before:left-0 before:h-5 before:w-0.5 before:rounded-full before:bg-sidebar-accent-foreground/60'
+                : 'text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground'
             )}
-            title={!collapsed ? item.label : undefined}
+            title={!collapsed ? t(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 && <span className="text-sm font-medium">{t(item.label)}</span>}
             {!collapsed && isActive && (
               <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0" />
             )}
@@ -78,40 +81,44 @@ function SidebarLogo({ collapsed }: { collapsed: boolean }) {
           <div className="w-8 h-8 rounded-lg border border-sidebar-primary/30 bg-sidebar-primary/15 flex items-center justify-center">
             <Activity className="w-5 h-5 text-sidebar-primary" />
           </div>
-          <span className="font-bold text-lg tracking-tight">lokistack</span>
+          <span className="font-bold text-xl tracking-tight">LokiStack</span>
         </div>
       )}
     </div>
   )
 }
 
-// 主题三态切换：浅色 → 深色 → 跟随系统（key: opsxloki.theme.mode）
+// 主题二态切换：浅色 ↔ 深色（key: lokistack.theme.mode；resolvedTheme 兼容"跟随系统/定时"偏好）
+// 定时模式开启时点击 = 关闭定时并切到相反主题(用户手动覆盖调度)。
 function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'
-  const label = next === 'light' ? '切换为浅色' : next === 'dark' ? '切换为深色' : '切换为跟随系统'
+  const { resolvedTheme, setTheme } = useTheme()
+  const { t } = useTranslation()
+  const isDark = resolvedTheme === 'dark'
+  const label = isDark ? t('layout.toLight') : t('layout.toDark')
   return (
     <button
-      onClick={() => setTheme(next)}
+      onClick={() => {
+        if (isThemeAuto()) {
+          setThemeAuto(false)
+          setTheme(isDark ? 'light' : 'dark')
+          return
+        }
+        setTheme(isDark ? 'light' : 'dark')
+      }}
       aria-label={label}
       title={label}
-      className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+      className="p-2 rounded-lg text-muted-foreground hover:bg-muted"
     >
-      {theme === 'light' ? (
-        <Sun className="w-4 h-4" />
-      ) : theme === 'dark' ? (
-        <Moon className="w-4 h-4" />
-      ) : (
-        <Monitor className="w-4 h-4" />
-      )}
+      {isDark ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
     </button>
   )
 }
 
 // 页面级加载骨架（挂在 main 内，切页时布局不闪）
 function PageSkeleton() {
+  const { t } = useTranslation()
   return (
-    <div className="space-y-6" aria-busy="true" aria-label="页面加载中">
+    <div className="space-y-6" aria-busy="true" aria-label={t('layout.loading')}>
       <div className="space-y-2">
         <Skeleton className="h-7 w-48" />
         <Skeleton className="h-4 w-72" />
@@ -137,10 +144,16 @@ const Layout = memo(function Layout({ children }: { children: React.ReactNode })
   const [mobileOpen, setMobileOpen] = useState(false)
   const location = useLocation()
   const navigate = useNavigate()
+  const { t } = useTranslation()
   const user = getUser()
 
+  // 主题定时调度(「定时」模式开启时每分钟按时区解析浅/深色)
+  useScheduledTheme()
+
   // 顶栏标题来自路由 meta
-  const pageTitle = findRouteMeta(location.pathname)?.title || 'lokistack'
+  // meta.title 为 i18n key(common 命名空间),展示前翻译
+  const pageTitleKey = findRouteMeta(location.pathname)?.title
+  const pageTitle = pageTitleKey ? t(pageTitleKey) : 'LokiStack'
 
   // 折叠状态持久化（仅桌面端语义）
   useEffect(() => {
@@ -171,8 +184,8 @@ const Layout = memo(function Layout({ children }: { children: React.ReactNode })
           <div className="p-2 border-t border-sidebar-border flex-shrink-0">
             <button
               onClick={toggleSidebar}
-              aria-label={collapsed ? '展开菜单' : '收起菜单'}
-              title={collapsed ? '展开菜单' : '收起菜单'}
+              aria-label={collapsed ? t('layout.expand') : t('layout.collapse')}
+              title={collapsed ? t('layout.expand') : t('layout.collapse')}
               className="flex items-center justify-center w-full py-2.5 rounded-lg text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
             >
               {collapsed ? (
@@ -190,7 +203,7 @@ const Layout = memo(function Layout({ children }: { children: React.ReactNode })
         <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
           <SheetContent side="left" className="bg-sidebar text-sidebar-accent-foreground border-none p-0 w-72">
             <SheetHeader className="sr-only">
-              <SheetTitle className="text-white">lokistack 导航</SheetTitle>
+              <SheetTitle className="text-sidebar-accent-foreground">{t('layout.sheetTitle')}</SheetTitle>
             </SheetHeader>
             <div className="flex flex-col h-full">
               <SidebarLogo collapsed={false} />
@@ -203,40 +216,40 @@ const Layout = memo(function Layout({ children }: { children: React.ReactNode })
       {/* 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-4 md:px-6 flex-shrink-0 gap-3">
+        <header className="h-16 bg-card border-b border-border 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"
+                aria-label={t('layout.openNav')}
+                className="p-2 rounded-lg text-muted-foreground hover:bg-muted"
               >
                 <Menu className="w-5 h-5" />
               </button>
             )}
-            <h1 className="text-lg md:text-xl font-semibold text-slate-800 dark:text-white truncate">
+            <h1 className="text-lg md:text-xl font-semibold text-foreground 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-3 text-sm text-muted-foreground">
                 <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-success/10 text-success text-xs font-medium">
-                    {user.role === 'admin' ? '管理员' : user.role}
+                    {user.role === 'admin' ? t('layout.admin') : user.role}
                   </span>
                 </div>
                 <button
                   onClick={handleLogout}
-                  title="退出登录"
-                  aria-label="退出登录"
+                  title={t('layout.logout')}
+                  aria-label={t('layout.logout')}
                   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 className="hidden md:inline">退出</span>
+                  <span className="hidden md:inline">{t('layout.logoutShort')}</span>
                 </button>
               </div>
             )}

frontend/src/components/LoadingSpinner.tsx

@@ -1,3 +1,4 @@
+import i18n from '@/i18n'
 import { memo } from 'react'
 import { Activity } from 'lucide-react'
 import { cn } from '@/lib/utils'
@@ -23,12 +24,13 @@ export const LoadingSpinner = memo(function LoadingSpinner({
   className,
   text,
 }: LoadingSpinnerProps) {
+  const resolvedText = text ?? i18n.t('spinner.default')
   return (
     <div className={cn('flex flex-col items-center justify-center gap-3', className)}>
       <Activity
         className={cn('text-primary animate-spin', SIZE_MAP[size])}
       />
-      {text && <p className="text-sm text-muted-foreground">{text}</p>}
+      {resolvedText && <p className="text-sm text-muted-foreground">{resolvedText}</p>}
     </div>
   )
 })
@@ -37,7 +39,7 @@ export const LoadingSpinner = memo(function LoadingSpinner({
  * 全屏居中加载状态
  */
 export const FullScreenLoader = memo(function FullScreenLoader({
-  text = '加载中...',
+  text,
 }: Pick<LoadingSpinnerProps, 'text'>) {
   return (
     <div className="flex items-center justify-center h-64">

frontend/src/components/PageContainer.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router'
 import { cn } from '@/lib/utils'
 import { PageHeader } from '@/components/PageHeader'
@@ -26,7 +27,8 @@ export const PageContainer = memo(function PageContainer({
   children,
 }: PageContainerProps) {
   const { pathname } = useLocation()
-  const routeTitle = findRouteMeta(pathname)?.title
+  const { t } = useTranslation()
+  const routeTitle = findRouteMeta(pathname)?.title ? t(findRouteMeta(pathname)!.title) : undefined
   const repeatedTitle = Boolean(title && routeTitle && title.replace(/\s/g, '') === routeTitle.replace(/\s/g, ''))
   const showHeader = Boolean(title && (!repeatedTitle || description || action))
 

frontend/src/components/PaginationBar.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { memo, useMemo } from 'react'
 import {
   Pagination,
@@ -42,13 +43,14 @@ export const PaginationBar = memo(function PaginationBar({
   onPageChange,
   className,
 }: PaginationBarProps) {
+  const { t } = useTranslation()
   const totalPages = Math.max(1, Math.ceil(total / pageSize))
   const pages = useMemo(() => pageNumbers(page, totalPages), [page, totalPages])
 
   if (total <= pageSize) {
     return (
       <div className={className}>
-        <p className="text-xs text-muted-foreground text-center">共 {total} 条</p>
+        <p className="text-xs text-muted-foreground text-center">{t('pagination.total', { count: total })}</p>
       </div>
     )
   }
@@ -102,7 +104,7 @@ export const PaginationBar = memo(function PaginationBar({
         </PaginationContent>
       </Pagination>
       <p className="text-xs text-muted-foreground text-center mt-1">
-        共 {total} 条 · 第 {page}/{totalPages} 页
+        {t('pagination.summary', { count: total, page, pages: totalPages })}
       </p>
     </div>
   )

frontend/src/components/PasswordInput.tsx

@@ -1,5 +1,6 @@
 import { memo, useState } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
+import i18n from '@/i18n'
 import { Input } from '@/components/ui/input'
 
 interface PasswordInputProps extends Omit<React.ComponentProps<typeof Input>, 'type'> {
@@ -24,7 +25,7 @@ export const PasswordInput = memo(function PasswordInput({
         <button
           type="button"
           tabIndex={-1}
-          aria-label={visible ? '隐藏密码' : '显示密码'}
+          aria-label={visible ? i18n.t('password.hide') : i18n.t('password.show')}
           onClick={() => setVisible((prev) => !prev)}
           className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-slate-600"
         >

frontend/src/components/StatusBadge.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react'
 import { Clock } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { statusLabel } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
 import { STATUS_CONFIG } from './status-config'
 
 export type StatusSize = 'sm' | 'md'
@@ -13,16 +13,19 @@ interface StatusBadgeProps {
   className?: string
 }
 
-function getStatusConfig(status: string): { icon: typeof Clock; color: string; bg: string; label: string } {
-  const config = STATUS_CONFIG[status] || {
+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',
   }
-  return {
-    ...config,
-    label: statusLabel(status),
-  }
+}
+
+// 状态标签走 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 }> = {
@@ -41,7 +44,9 @@ export const StatusBadge = memo(function StatusBadge({
   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
 
@@ -61,7 +66,7 @@ export const StatusBadge = memo(function StatusBadge({
           status === 'deploying' && 'animate-pulse'
         )}
       />
-      {showLabel && <span>{config.label}</span>}
+      {showLabel && <span>{label}</span>}
     </span>
   )
 })

frontend/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as PageContainer } from './PageContainer';
 export { default as PageHeader } from './PageHeader';
 export { default as InfoRow } from './InfoRow';
 export { ResourceCard } from './ResourceCard';
+export { CardActionButton } from './CardActionButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as ErrorState } from './ErrorState';
 export { default as EmptyState } from './EmptyState';

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }