feat: 全站 PageShell 设计系统与专业 UI 统一

- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架
- index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩）
- 全站路由页接入 PageShell，云账单三 Tab 为标杆
- 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化
- 登录页/侧栏/顶栏去渐变光球，企业克制风
- 修复 AIAlertAnalyzer JSX 与构建依赖导入问题

frontend/src/pages/audit/terminal-audit/ActiveSessionsPanel.tsx

@@ -53,29 +53,29 @@ function ActiveSessionRow({
   const elapsed = useElapsedTimer(session.start_time);
 
   return (
-    <TableRow className="border-slate-800 hover:bg-slate-800/50">
+    <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
       <TableCell>
-        <span className="text-sm text-slate-400">{session.id}</span>
+        <span className="text-sm dg-text-secondary">{session.id}</span>
       </TableCell>
       <TableCell>
-        <span className="text-sm text-slate-200">{session.username || '--'}</span>
+        <span className="text-sm text-[var(--dg-text-primary)]">{session.username || '--'}</span>
       </TableCell>
       <TableCell>
         <div className="flex flex-col">
-          <span className="text-sm text-slate-200">{session.server_name || '--'}</span>
-          <span className="text-xs text-slate-500">{session.server_ip}</span>
+          <span className="text-sm text-[var(--dg-text-primary)]">{session.server_name || '--'}</span>
+          <span className="text-xs dg-text-muted">{session.server_ip}</span>
         </div>
       </TableCell>
       <TableCell>
-        <span className="text-sm text-slate-400">{session.server_port}</span>
+        <span className="text-sm dg-text-secondary">{session.server_port}</span>
       </TableCell>
       <TableCell>
-        <span className="text-sm text-slate-400">
+        <span className="text-sm dg-text-secondary">
           {session.start_time ? new Date(session.start_time).toLocaleString() : '--'}
         </span>
       </TableCell>
       <TableCell>
-        <span className="text-sm text-emerald-400 font-mono">{formatDuration(elapsed)}</span>
+        <span className="text-sm dg-text-green font-mono">{formatDuration(elapsed)}</span>
       </TableCell>
       <TableCell>{getStatusBadge(session.status)}</TableCell>
       <TableCell>
@@ -83,7 +83,7 @@ function ActiveSessionRow({
           <Button
             variant="ghost"
             size="icon"
-            className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800"
+            className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]"
             onClick={() => onKill(session.id, session.username)}
             title={t('audit.terminal.killTitle')}
           >
@@ -92,7 +92,7 @@ function ActiveSessionRow({
           <Button
             variant="ghost"
             size="icon"
-            className="h-8 w-8 text-slate-400 hover:text-blue-400 hover:bg-slate-800"
+            className="h-8 w-8 dg-text-secondary hover:dg-text-blue hover:bg-[var(--dg-bg-hover)]"
             onClick={() => onMonitor(session.id)}
             title={t('audit.terminal.liveMonitor')}
           >
@@ -165,17 +165,17 @@ export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: Active
     <>
       <div className="flex items-center gap-3 flex-wrap">
         <div className="relative w-64">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
           <Input
             placeholder={t('audit.terminal.searchUserServer')}
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
-            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+            className="pl-9 h-9 dg-input"
           />
         </div>
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          className="dg-btn-secondary"
           onClick={() => refetch()}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
@@ -186,7 +186,7 @@ export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: Active
           className={
             autoRefresh
               ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
-              : 'border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800'
+              : 'dg-btn-secondary'
           }
           onClick={() => {
             if (autoRefresh) onUserToggledOff();
@@ -208,30 +208,30 @@ export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: Active
         </Button>
       </div>
 
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-0">
-          <div className="border-t border-slate-800">
+          <div className="border-t border-[var(--dg-border)]">
             {isLoading ? (
               <div className="flex items-center justify-center py-16">
                 <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
               </div>
             ) : filtered.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+              <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
                 <Activity className="h-8 w-8 mb-3 opacity-40" />
                 <p className="text-sm">{t('audit.terminal.noActive')}</p>
               </div>
             ) : (
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.id')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.user')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.targetServer')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.port')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.startTime')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.duration')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.status')}</TableHead>
-                    <TableHead className="text-slate-400 text-right">{t('audit.terminal.col.actions')}</TableHead>
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.id')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.user')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.targetServer')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.port')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.startTime')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.duration')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.status')}</TableHead>
+                    <TableHead className="dg-text-secondary text-right">{t('audit.terminal.col.actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>

frontend/src/pages/audit/terminal-audit/HistorySessionsPanel.tsx

@@ -94,13 +94,13 @@ export function HistorySessionsPanel() {
       <div className="flex flex-col gap-3">
         <div className="flex items-center gap-2 flex-wrap">
           <div className="relative w-52">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
             <Input
               placeholder={t('audit.terminal.searchUserServerIp')}
               value={keyword}
               onChange={(e) => setKeyword(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
-              className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
+              className="pl-9 h-9 dg-input"
             />
           </div>
           <Input
@@ -108,39 +108,39 @@ export function HistorySessionsPanel() {
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
-            className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
+            className="w-32 h-9 dg-input"
           />
-          <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
-          <span className="text-slate-600 text-sm">—</span>
-          <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
-          <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
+          <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 dg-input" />
+          <span className="dg-text-muted text-sm">—</span>
+          <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 dg-input" />
+          <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
             {t('audit.terminal.presetToday')}
           </Button>
-          <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
             {t('audit.terminal.preset7d')}
           </Button>
-          <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
             {t('audit.terminal.preset30d')}
           </Button>
-          <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
+          <label className="flex items-center gap-1.5 text-xs dg-text-secondary cursor-pointer">
             <input type="checkbox" checked={hasRecordOnly} onChange={(e) => setHasRecordOnly(e.target.checked)} className="rounded" />
             {t('audit.terminal.hasRecordOnly')}
           </label>
           <Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
-          <Button variant="outline" size="sm" className="border-slate-700 text-slate-300 h-9" onClick={() => refetch()}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => refetch()}>
             <RefreshCw className="h-4 w-4 mr-1" />{t('common.refresh')}
           </Button>
         </div>
       </div>
 
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-0">
           {isLoading ? (
             <div className="flex items-center justify-center py-16">
               <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
             </div>
           ) : sessions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+            <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
               <Monitor className="h-8 w-8 mb-3 opacity-40" />
               <p className="text-sm">{t('audit.terminal.noHistory')}</p>
             </div>
@@ -148,47 +148,47 @@ export function HistorySessionsPanel() {
             <>
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.id')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.user')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.targetServer')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.startTime')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.duration')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.recordSize')}</TableHead>
-                    <TableHead className="text-slate-400">{t('audit.terminal.col.status')}</TableHead>
-                    <TableHead className="text-slate-400 text-right">{t('audit.terminal.col.actions')}</TableHead>
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.id')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.user')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.targetServer')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.startTime')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.duration')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.recordSize')}</TableHead>
+                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.status')}</TableHead>
+                    <TableHead className="dg-text-secondary text-right">{t('audit.terminal.col.actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {sessions.map((s) => (
-                    <TableRow key={s.id} className="border-slate-800 hover:bg-slate-800/50">
-                      <TableCell><span className="text-sm text-slate-400">{s.id}</span></TableCell>
-                      <TableCell><span className="text-sm text-slate-200">{s.username || '--'}</span></TableCell>
+                    <TableRow key={s.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                      <TableCell><span className="text-sm dg-text-secondary">{s.id}</span></TableCell>
+                      <TableCell><span className="text-sm text-[var(--dg-text-primary)]">{s.username || '--'}</span></TableCell>
                       <TableCell>
                         <div className="flex flex-col">
-                          <span className="text-sm text-slate-200">{s.server_name || '--'}</span>
-                          <span className="text-xs text-slate-500">{s.server_ip}</span>
+                          <span className="text-sm text-[var(--dg-text-primary)]">{s.server_name || '--'}</span>
+                          <span className="text-xs dg-text-muted">{s.server_ip}</span>
                         </div>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">
+                        <span className="text-sm dg-text-secondary">
                           {s.start_time ? new Date(s.start_time).toLocaleString() : '--'}
                         </span>
                       </TableCell>
-                      <TableCell><span className="text-sm text-slate-300">{formatDuration(s.duration)}</span></TableCell>
+                      <TableCell><span className="text-sm text-[var(--dg-text-secondary)]">{formatDuration(s.duration)}</span></TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">{s.record_size > 0 ? formatSize(s.record_size) : '--'}</span>
+                        <span className="text-sm dg-text-secondary">{s.record_size > 0 ? formatSize(s.record_size) : '--'}</span>
                       </TableCell>
                       <TableCell>{getStatusBadge(s.status)}</TableCell>
                       <TableCell>
                         <div className="flex items-center justify-end gap-0.5">
-                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400" onClick={() => openReplay(s.id)} disabled={!s.record_size} title={t('audit.terminal.replay')}>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-blue" onClick={() => openReplay(s.id)} disabled={!s.record_size} title={t('audit.terminal.replay')}>
                             <Play className="h-4 w-4" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-amber-400" onClick={() => handleExportReport(s.id)} title={t('audit.terminal.exportReport')}>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-yellow" onClick={() => handleExportReport(s.id)} title={t('audit.terminal.exportReport')}>
                             <FileText className="h-4 w-4" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-green-400" onClick={() => handleDownload(s.id)} disabled={!s.record_size} title={t('audit.terminal.downloadRecord')}>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-green" onClick={() => handleDownload(s.id)} disabled={!s.record_size} title={t('audit.terminal.downloadRecord')}>
                             <Download className="h-4 w-4" />
                           </Button>
                         </div>
@@ -197,13 +197,13 @@ export function HistorySessionsPanel() {
                   ))}
                 </TableBody>
               </Table>
-              <div className="flex items-center justify-between px-4 py-3 border-t border-slate-800">
-                <span className="text-xs text-slate-500">{t('audit.terminal.totalSessions', { count: total })}</span>
+              <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--dg-border)]">
+                <span className="text-xs dg-text-muted">{t('audit.terminal.totalSessions', { count: total })}</span>
                 <div className="flex items-center gap-2">
                   <Button variant="ghost" size="icon" className="h-8 w-8" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
-                  <span className="text-xs text-slate-400">{page} / {totalPages}</span>
+                  <span className="text-xs dg-text-secondary">{page} / {totalPages}</span>
                   <Button variant="ghost" size="icon" className="h-8 w-8" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
                     <ChevronRight className="h-4 w-4" />
                   </Button>

frontend/src/pages/audit/terminal-audit/SessionCommandsPanel.tsx

@@ -113,13 +113,13 @@ export function SessionCommandsPanel() {
     <>
       <div className="flex items-center gap-2 flex-wrap">
         <div className="relative w-52">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
           <Input
             placeholder={t('audit.terminal.searchUserCommand')}
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
-            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+            className="pl-9 h-9 dg-input"
           />
         </div>
         <Input
@@ -127,31 +127,31 @@ export function SessionCommandsPanel() {
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
-          className="w-28 h-9 bg-slate-800/50 border-slate-700 text-slate-200"
+          className="w-28 h-9 dg-input"
         />
         <Input
           placeholder={t('audit.terminal.sessionIdPlaceholder')}
           value={sessionIdInput}
           onChange={(e) => setSessionIdInput(e.target.value)}
           onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
-          className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+          className="w-32 h-9 dg-input"
         />
-        <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
-        <span className="text-slate-600 text-sm">—</span>
-        <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
-        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
+        <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="w-36 h-9 dg-input" />
+        <span className="dg-text-muted text-sm">—</span>
+        <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="w-36 h-9 dg-input" />
+        <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(1); setStartDate(r.start); setEndDate(r.end); }}>
           {t('audit.terminal.presetToday')}
         </Button>
-        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
+        <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(7); setStartDate(r.start); setEndDate(r.end); }}>
           {t('audit.terminal.preset7d')}
         </Button>
-        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
+        <Button variant="outline" size="sm" className="dg-btn-secondary h-9" onClick={() => { const r = presetAuditRange(30); setStartDate(r.start); setEndDate(r.end); }}>
           {t('audit.terminal.preset30d')}
         </Button>
         <Button size="sm" className="h-9" onClick={applyFilters}>{t('audit.terminal.applyFilter')}</Button>
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800 h-9"
+          className="dg-btn-secondary h-9"
           onClick={() => refetch()}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
@@ -159,7 +159,7 @@ export function SessionCommandsPanel() {
         </Button>
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-amber-400 h-9"
+          className="dg-btn-secondary hover:text-[var(--dg-orange)] h-9"
           onClick={handleExportCsv}
           disabled={exporting || total === 0}
           title={t('audit.terminal.exportCommandsCsv')}
@@ -169,22 +169,22 @@ export function SessionCommandsPanel() {
         </Button>
       </div>
 
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-0">
-          <div className="border-t border-slate-800">
+          <div className="border-t border-[var(--dg-border)]">
             {isLoading ? (
               <div className="flex items-center justify-center py-16">
                 <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
               </div>
             ) : commands.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+              <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
                 <Search className="h-8 w-8 mb-3 opacity-40" />
                 <p className="text-sm">{t('audit.terminal.noCommands')}</p>
               </div>
             ) : (
               <>
                 <div
-                  className="grid gap-2 px-4 py-2 border-b border-slate-800 bg-slate-900 text-xs font-medium text-slate-400"
+                  className="grid gap-2 px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-xs font-medium dg-text-secondary"
                   style={{ gridTemplateColumns: GRID_COLS }}
                 >
                   <span>{t('audit.terminal.col.startTime')}</span>
@@ -215,29 +215,29 @@ export function SessionCommandsPanel() {
                             gridTemplateColumns: GRID_COLS,
                             gap: '0.5rem',
                           }}
-                          className="px-4 py-2.5 border-b border-slate-800 hover:bg-slate-800/50"
+                          className="px-4 py-2.5 border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]"
                         >
-                          <span className="text-sm text-slate-400 truncate">
+                          <span className="text-sm dg-text-secondary truncate">
                             {c.created_at ? new Date(c.created_at).toLocaleString() : '--'}
                           </span>
-                          <span className="text-sm text-slate-200 truncate">{c.username || '--'}</span>
+                          <span className="text-sm text-[var(--dg-text-primary)] truncate">{c.username || '--'}</span>
                           <code className={cn(
-                            'text-xs bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block',
-                            isHighRiskCommand(c.command || '') ? 'text-red-400' : 'text-slate-300',
+                            'text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded max-w-[400px] truncate block',
+                            isHighRiskCommand(c.command || '') ? 'dg-text-red' : 'text-[var(--dg-text-secondary)]',
                           )}>
                             {c.command || '--'}
                           </code>
-                          <span className="text-sm text-slate-400">{formatCommandOutput(c.output_size)}</span>
+                          <span className="text-sm dg-text-secondary">{formatCommandOutput(c.output_size)}</span>
                           <span className={cn(
                             'text-xs',
-                            c.session_record_size ? 'text-slate-500' : 'text-amber-500/80',
+                            c.session_record_size ? 'dg-text-muted' : 'text-amber-500/80',
                           )} title={!c.session_record_size ? t('audit.terminal.replayPlayer.noRecord') : undefined}>
                             #{c.session_id}
                           </span>
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-7 w-7 text-slate-400 hover:text-blue-400 disabled:opacity-30"
+                            className="h-7 w-7 dg-text-secondary hover:dg-text-blue disabled:opacity-30"
                             onClick={() => openReplayAtCommand(c)}
                             disabled={!c.session_record_size}
                             title={c.session_record_size
@@ -252,7 +252,7 @@ export function SessionCommandsPanel() {
                   </div>
                 </div>
 
-                <div className="text-center py-2 text-xs text-slate-500 border-t border-slate-800">
+                <div className="text-center py-2 text-xs dg-text-muted border-t border-[var(--dg-border)]">
                   {t('audit.terminal.totalCommands', { count: total })}
                   {commands.length < total && ` · ${t('audit.terminal.showingLoaded', { loaded: commands.length })}`}
                   {commands.length > 200 && ` · ${t('audit.terminal.virtualScroll')}`}

frontend/src/pages/audit/terminal-audit/helpers.tsx

@@ -43,7 +43,7 @@ export function formatCommandOutput(bytes?: number): string {
 export function getStatusBadge(status: string) {
   if (status === 'active') {
     return (
-      <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+      <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
         <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 inline-block animate-pulse" />
         {i18n.t('audit.terminal.status.active')}
       </Badge>
@@ -51,13 +51,13 @@ export function getStatusBadge(status: string) {
   }
   if (status === 'failed') {
     return (
-      <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+      <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
         {i18n.t('audit.terminal.status.failed')}
       </Badge>
     );
   }
   return (
-    <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+    <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-tertiary)]">
       {i18n.t('audit.terminal.status.closed')}
     </Badge>
   );