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/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>
             )}