diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index efb52c1..97bb4a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,6 +8,7 @@ import { Login } from '@/components/auth/Login';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 import { PageTransition } from '@/components/layout/PageTransition';
 import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
+import { Toaster } from '@/components/ui/sonner';
 
 // Lazy load page components for code splitting
 const Dashboard = lazy(() => import('@/components/dashboard/Dashboard').then(m => ({ default: m.Dashboard })));
@@ -108,6 +109,7 @@ function App() {
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
         <ConfirmProvider>
+          <Toaster position="top-right" richColors closeButton />
           <BrowserRouter>
             <Routes>
               <Route path="/login" element={<Login />} />
diff --git a/frontend/src/components/agent/AgentAlerts.tsx b/frontend/src/components/agent/AgentAlerts.tsx
index cca2ff7..7a802ff 100644
--- a/frontend/src/components/agent/AgentAlerts.tsx
+++ b/frontend/src/components/agent/AgentAlerts.tsx
@@ -112,19 +112,19 @@ export function AgentAlerts() {
       {/* 页头 */}
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-slate-100">Agent 告警</h2>
-          <p className="text-sm text-slate-400 mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
+          <h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 告警</h2>
+          <p className="text-sm dg-text-secondary mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
         </div>
-        <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700">
+        <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
           <RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
           刷新
         </Button>
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="bg-slate-800 border border-slate-700">
-          <TabsTrigger value="events" className="data-[state=active]:bg-slate-700">告警事件</TabsTrigger>
-          <TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">告警规则</TabsTrigger>
+        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
+          <TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警事件</TabsTrigger>
+          <TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警规则</TabsTrigger>
         </TabsList>
 
         {/* ========== 告警事件 ========== */}
@@ -134,7 +134,7 @@ export function AgentAlerts() {
               size="sm"
               variant={resolvedView ? 'outline' : 'default'}
               onClick={() => setResolvedView(false)}
-              className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
+              className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
             >
               未恢复
             </Button>
@@ -142,53 +142,53 @@ export function AgentAlerts() {
               size="sm"
               variant={resolvedView ? 'default' : 'outline'}
               onClick={() => setResolvedView(true)}
-              className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
+              className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
             >
               已恢复
             </Button>
           </div>
 
           {loading ? (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="flex items-center justify-center py-16">
-                <Loader2 className="h-5 w-5 animate-spin text-slate-500" />
-                <span className="ml-2 text-slate-400">加载中...</span>
+                <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
+                <span className="ml-2 dg-text-secondary">加载中...</span>
               </CardContent>
             </Card>
           ) : alerts.length === 0 ? (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="flex flex-col items-center justify-center py-16">
                 <CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
-                <p className="text-slate-400">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
+                <p className="dg-text-secondary">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
               </CardContent>
             </Card>
           ) : (
             <div className="space-y-2">
               {alerts.map((alert) => (
-                <Card key={alert.id} className="bg-slate-900 border-slate-800 py-4">
+                <Card key={alert.id} className="dg-card py-4">
                   <CardContent>
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex items-start gap-3 min-w-0 flex-1">
-                        <div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
-                          <AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'text-red-400' : (alert.severity || 'warning') === 'warning' ? 'text-amber-400' : 'text-blue-400'}`} />
+                        <div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
+                          <AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'dg-text-red' : (alert.severity || 'warning') === 'warning' ? 'dg-text-yellow' : 'dg-text-blue'}`} />
                         </div>
                         <div className="min-w-0">
                           <div className="flex items-center gap-2 flex-wrap">
                             {severityBadge(alert.severity)}
-                            <span className="font-medium text-slate-100">{alert.rule_name || alert.name || alert.title || '告警'}</span>
+                            <span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || '告警'}</span>
                           </div>
-                          <p className="text-sm text-slate-400 mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
-                          <div className="flex items-center gap-4 mt-2 text-xs text-slate-500 flex-wrap">
+                          <p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
+                          <div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap">
                             <span className="inline-flex items-center gap-1">
                               <Cpu className="h-3 w-3" />
                               {alert.hostname || '--'}
                             </span>
                             <span className="inline-flex items-center gap-1">
-                              <span className="text-slate-400">指标:</span> {getMetricLabel(alert.metric)}
+                              <span className="dg-text-secondary">指标:</span> {getMetricLabel(alert.metric)}
                             </span>
                             {alert.value != null && (
                               <span className="inline-flex items-center gap-1">
-                                <span className="text-slate-400">当前值:</span> {alert.value}
+                                <span className="dg-text-secondary">当前值:</span> {alert.value}
                               </span>
                             )}
                             <span className="inline-flex items-center gap-1">
@@ -203,7 +203,7 @@ export function AgentAlerts() {
                           size="sm"
                           variant="outline"
                           onClick={() => handleResolve(alert.id)}
-                          className="shrink-0 h-8 bg-slate-800 border-slate-700 text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-400"
+                          className="shrink-0 h-8 dg-input dg-text-green hover:bg-emerald-500/10 hover:dg-text-green"
                         >
                           <CheckCircle className="h-3.5 w-3.5 mr-1" />
                           恢复
@@ -227,17 +227,17 @@ export function AgentAlerts() {
           </div>
 
           {loading ? (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="flex items-center justify-center py-16">
-                <Loader2 className="h-5 w-5 animate-spin text-slate-500" />
-                <span className="ml-2 text-slate-400">加载中...</span>
+                <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
+                <span className="ml-2 dg-text-secondary">加载中...</span>
               </CardContent>
             </Card>
           ) : rules.length === 0 ? (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="flex flex-col items-center justify-center py-16">
-                <Bell className="h-10 w-10 text-slate-600 mb-3" />
-                <p className="text-slate-400">暂无告警规则</p>
+                <Bell className="h-10 w-10 dg-text-muted mb-3" />
+                <p className="dg-text-secondary">暂无告警规则</p>
                 <Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
                   <Plus className="h-4 w-4 mr-1.5" />
                   创建第一条规则
@@ -249,42 +249,42 @@ export function AgentAlerts() {
               {rules.map((rule) => {
                 const MetricIcon = METRIC_OPTIONS.find((m) => m.value === rule.metric)?.icon || Cpu;
                 return (
-                  <Card key={rule.id} className={`bg-slate-900 ${rule.enabled === false ? 'border-slate-800 opacity-60' : 'border-slate-800'} py-4`}>
+                  <Card key={rule.id} className={`bg-[var(--dg-bg-secondary)] ${rule.enabled === false ? 'border-[var(--dg-border)] opacity-60' : 'border-[var(--dg-border)]'} py-4`}>
                     <CardContent>
                       <div className="flex items-center justify-between gap-3">
                         <div className="flex items-center gap-3 min-w-0 flex-1">
-                          <div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
-                            <MetricIcon className="h-4 w-4 text-blue-400" />
+                          <div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
+                            <MetricIcon className="h-4 w-4 dg-text-blue" />
                           </div>
                           <div className="min-w-0">
                             <div className="flex items-center gap-2 flex-wrap">
-                              <span className="font-medium text-slate-100">{rule.name}</span>
+                              <span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
                               {severityBadge(rule.severity)}
                               {rule.enabled === false && (
-                                <Badge className="bg-slate-700 text-slate-400 border border-slate-600">已禁用</Badge>
+                                <Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]">已禁用</Badge>
                               )}
                             </div>
-                            <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 flex-wrap">
+                            <div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap">
                               <span>{getMetricLabel(rule.metric)}</span>
                               {rule.metric !== 'offline' && (
-                                <span className="text-slate-400">
+                                <span className="dg-text-secondary">
                                   {rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
                                 </span>
                               )}
                               {rule.metric === 'port_down' && rule.port ? (
-                                <span className="text-slate-400">端口 {rule.port}</span>
+                                <span className="dg-text-secondary">端口 {rule.port}</span>
                               ) : null}
-                              {rule.duration ? <span className="text-slate-400">持续 {rule.duration}s</span> : null}
+                              {rule.duration ? <span className="dg-text-secondary">持续 {rule.duration}s</span> : null}
                             </div>
                           </div>
                         </div>
 
                         <div className="flex items-center gap-2 shrink-0">
                           <Switch checked={rule.enabled !== false} onCheckedChange={() => handleToggleRule(rule)} />
-                          <Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800" onClick={() => openEditRule(rule)}>
+                          <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]" onClick={() => openEditRule(rule)}>
                             <Pencil className="h-4 w-4" />
                           </Button>
-                          <Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800" onClick={() => handleDeleteRule(rule.id)}>
+                          <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]" onClick={() => handleDeleteRule(rule.id)}>
                             <Trash2 className="h-4 w-4" />
                           </Button>
                         </div>
diff --git a/frontend/src/components/agent/AgentMonitor.tsx b/frontend/src/components/agent/AgentMonitor.tsx
index 14f6c92..34c2975 100644
--- a/frontend/src/components/agent/AgentMonitor.tsx
+++ b/frontend/src/components/agent/AgentMonitor.tsx
@@ -129,9 +129,9 @@ export function AgentMonitor() {
   const onlineCount = hosts.filter((h) => isOnline(h.last_report || h.last_reported_at || h.updated_at)).length;
 
   const stats = [
-    { label: '主机总数', value: hosts.length, icon: Server, color: 'text-blue-400' },
-    { label: '在线', value: onlineCount, icon: Wifi, color: 'text-emerald-400' },
-    { label: '离线', value: hosts.length - onlineCount, icon: WifiOff, color: 'text-red-400' },
+    { label: '主机总数', value: hosts.length, icon: Server, color: 'dg-text-blue' },
+    { label: '在线', value: onlineCount, icon: Wifi, color: 'dg-text-green' },
+    { label: '离线', value: hosts.length - onlineCount, icon: WifiOff, color: 'dg-text-red' },
   ];
 
   return (
@@ -139,8 +139,8 @@ export function AgentMonitor() {
       {/* 页头 */}
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-slate-100">Agent 监控</h2>
-          <p className="text-sm text-slate-400 mt-0.5">实时监控 Agent 上报的主机指标</p>
+          <h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 监控</h2>
+          <p className="text-sm dg-text-secondary mt-0.5">实时监控 Agent 上报的主机指标</p>
         </div>
         <div className="flex items-center gap-2">
           <Button
@@ -148,7 +148,7 @@ export function AgentMonitor() {
             size="sm"
             onClick={() => loadLatest()}
             disabled={refreshing}
-            className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700 hover:text-slate-100"
+            className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)]"
           >
             <RefreshCw className={`h-4 w-4 mr-1.5 ${refreshing ? 'animate-spin' : ''}`} />
             刷新
@@ -167,14 +167,14 @@ export function AgentMonitor() {
       {/* 统计卡片 */}
       <div className="grid grid-cols-3 gap-3">
         {stats.map((s) => (
-          <Card key={s.label} className="bg-slate-900 border-slate-800 py-4">
+          <Card key={s.label} className="dg-card py-4">
             <CardContent className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center">
+              <div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center">
                 <s.icon className={`h-5 w-5 ${s.color}`} />
               </div>
               <div>
-                <div className="text-2xl font-bold text-slate-100">{s.value}</div>
-                <div className="text-xs text-slate-400">{s.label}</div>
+                <div className="text-2xl font-bold text-[var(--dg-text-primary)]">{s.value}</div>
+                <div className="text-xs dg-text-secondary">{s.label}</div>
               </div>
             </CardContent>
           </Card>
@@ -183,17 +183,17 @@ export function AgentMonitor() {
 
       {/* 主机列表 */}
       {loading ? (
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="flex items-center justify-center py-16">
-            <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
-            <span className="ml-2 text-slate-400">加载中...</span>
+            <Loader2 className="h-6 w-6 animate-spin dg-text-muted" />
+            <span className="ml-2 dg-text-secondary">加载中...</span>
           </CardContent>
         </Card>
       ) : hosts.length === 0 ? (
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="flex flex-col items-center justify-center py-16">
-            <Server className="h-10 w-10 text-slate-600 mb-3" />
-            <p className="text-slate-400">暂无 Agent 上报数据</p>
+            <Server className="h-10 w-10 dg-text-muted mb-3" />
+            <p className="dg-text-secondary">暂无 Agent 上报数据</p>
             <Button
               size="sm"
               onClick={() => setWizardOpen(true)}
@@ -215,22 +215,22 @@ export function AgentMonitor() {
             return (
               <Card
                 key={host.hostname}
-                className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-colors cursor-pointer py-4"
+                className="dg-card hover:border-[var(--dg-border)] transition-colors cursor-pointer py-4"
                 onClick={() => setSelectedHost(host)}
               >
                 <CardContent className="space-y-3">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2 min-w-0">
-                      <Server className="h-4 w-4 text-slate-500 shrink-0" />
-                      <span className="font-medium text-slate-100 truncate">{host.hostname}</span>
+                      <Server className="h-4 w-4 dg-text-muted shrink-0" />
+                      <span className="font-medium text-[var(--dg-text-primary)] truncate">{host.hostname}</span>
                     </div>
                     {online ? (
-                      <Badge className="bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
+                      <Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">
                         <Wifi className="h-3 w-3 mr-1" />
                         在线
                       </Badge>
                     ) : (
-                      <Badge className="bg-red-500/15 text-red-400 border border-red-500/30">
+                      <Badge className="bg-red-500/15 dg-text-red border border-red-500/30">
                         <WifiOff className="h-3 w-3 mr-1" />
                         离线
                       </Badge>
@@ -245,7 +245,7 @@ export function AgentMonitor() {
                   </div>
 
                   {/* 端口 & 时间 */}
-                  <div className="flex items-center justify-between text-xs text-slate-400">
+                  <div className="flex items-center justify-between text-xs dg-text-secondary">
                     <span className="inline-flex items-center gap-1">
                       <Network className="h-3.5 w-3.5" />
                       {ports.length} 个端口
@@ -261,7 +261,7 @@ export function AgentMonitor() {
                     <Button
                       size="sm"
                       variant="outline"
-                      className="flex-1 h-8 bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"
+                      className="flex-1 h-8 dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
                       onClick={() => openCommandDialog(host.hostname)}
                     >
                       <Terminal className="h-3.5 w-3.5 mr-1" />
@@ -270,7 +270,7 @@ export function AgentMonitor() {
                     <Button
                       size="sm"
                       variant="outline"
-                      className="flex-1 h-8 bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"
+                      className="flex-1 h-8 dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
                       onClick={() => setSelectedHost(host)}
                     >
                       <Activity className="h-3.5 w-3.5 mr-1" />
@@ -293,13 +293,13 @@ export function AgentMonitor() {
 
       {/* 远程命令弹窗 */}
       <Dialog open={cmdOpen} onOpenChange={(v) => { if (!v) closeCommandDialog(); }}>
-        <DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
+        <DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]">
           <DialogHeader>
-            <DialogTitle className="text-slate-100 flex items-center gap-2">
-              <Terminal className="h-5 w-5 text-blue-400" />
+            <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Terminal className="h-5 w-5 dg-text-blue" />
               远程命令
             </DialogTitle>
-            <DialogDescription className="text-slate-400">
+            <DialogDescription className="dg-text-secondary">
               在 {cmdHost} 上执行命令
             </DialogDescription>
           </DialogHeader>
@@ -307,34 +307,34 @@ export function AgentMonitor() {
           <div className="space-y-3">
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label className="text-slate-300 text-xs">目标主机</Label>
+                <Label className="text-[var(--dg-text-secondary)] text-xs">目标主机</Label>
                 <Input
                   value={cmdHost}
                   onChange={(e) => setCmdHost(e.target.value)}
                   readOnly
-                  className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+                  className="h-9 dg-input"
                 />
               </div>
             </div>
 
             <div className="space-y-1.5">
-              <Label className="text-slate-300 text-xs">命令</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-xs">命令</Label>
               <Textarea
                 value={cmdCommand}
                 onChange={(e) => setCmdCommand(e.target.value)}
                 placeholder="例如：free -m && df -h"
                 rows={3}
-                className="bg-slate-950 border-slate-700 text-slate-200 font-mono text-sm resize-none"
+                className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm resize-none"
               />
             </div>
 
             <div className="w-40 space-y-1.5">
-              <Label className="text-slate-300 text-xs">超时(秒)</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-xs">超时(秒)</Label>
               <Input
                 type="number"
                 value={cmdTimeout}
                 onChange={(e) => setCmdTimeout(Number(e.target.value) || 30)}
-                className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+                className="h-9 dg-input"
               />
             </div>
 
@@ -342,20 +342,20 @@ export function AgentMonitor() {
             {cmdResult && (
               <div className="space-y-1.5">
                 <div className="flex items-center gap-2">
-                  <Label className="text-slate-300 text-xs">执行结果</Label>
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">执行结果</Label>
                   <Badge
                     className={
                       cmdResult.status === 'success' || cmdResult.status === 'done' || cmdResult.status === 'completed'
-                        ? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30'
+                        ? 'bg-emerald-500/15 dg-text-green border border-emerald-500/30'
                         : cmdResult.status === 'timeout'
-                        ? 'bg-amber-500/15 text-amber-400 border border-amber-500/30'
-                        : 'bg-red-500/15 text-red-400 border border-red-500/30'
+                        ? 'bg-amber-500/15 dg-text-yellow border border-amber-500/30'
+                        : 'bg-red-500/15 dg-text-red border border-red-500/30'
                     }
                   >
                     {cmdResult.status}
                   </Badge>
                 </div>
-                <pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all bg-slate-950 border border-slate-800 rounded-lg p-3 max-h-48 overflow-auto">
+                <pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg p-3 max-h-48 overflow-auto">
                   {cmdResult.result || cmdResult.output || cmdResult.error || '无输出'}
                 </pre>
               </div>
@@ -363,7 +363,7 @@ export function AgentMonitor() {
           </div>
 
           <DialogFooter className="gap-2">
-            <Button variant="outline" onClick={closeCommandDialog} className="border-slate-700 text-slate-300">
+            <Button variant="outline" onClick={closeCommandDialog} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
               关闭
             </Button>
             <Button
@@ -391,12 +391,12 @@ export function AgentMonitor() {
 function MetricBar({ icon: Icon, label, value }: { icon: ComponentType<{ className?: string }>; label: string; value: number }) {
   return (
     <div className="flex items-center gap-2">
-      <Icon className="h-3.5 w-3.5 text-slate-500 shrink-0" />
-      <span className="text-xs text-slate-400 w-8 shrink-0">{label}</span>
+      <Icon className="h-3.5 w-3.5 dg-text-muted shrink-0" />
+      <span className="text-xs dg-text-secondary w-8 shrink-0">{label}</span>
       <div className="flex-1">
         <Progress value={value} className={`h-1.5 ${value >= 90 ? '[&>[data-slot=progress-indicator]]:bg-red-500' : value >= 75 ? '[&>[data-slot=progress-indicator]]:bg-amber-500' : '[&>[data-slot=progress-indicator]]:bg-emerald-500'}`} />
       </div>
-      <span className={`text-xs font-medium w-10 text-right ${value >= 90 ? 'text-red-400' : value >= 75 ? 'text-amber-400' : 'text-slate-300'}`}>
+      <span className={`text-xs font-medium w-10 text-right ${value >= 90 ? 'dg-text-red' : value >= 75 ? 'dg-text-yellow' : 'text-[var(--dg-text-secondary)]'}`}>
         {value.toFixed(1)}%
       </span>
     </div>
diff --git a/frontend/src/components/agent/AgentRuleDialog.tsx b/frontend/src/components/agent/AgentRuleDialog.tsx
index 205fc3a..646c4be 100644
--- a/frontend/src/components/agent/AgentRuleDialog.tsx
+++ b/frontend/src/components/agent/AgentRuleDialog.tsx
@@ -104,31 +104,31 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
 
   return (
     <Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
-      <DialogContent className="max-w-md bg-slate-900 border-slate-800 text-slate-100">
+      <DialogContent className="max-w-md dg-card text-[var(--dg-text-primary)]">
         <DialogHeader>
-          <DialogTitle className="text-slate-100">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
-          <DialogDescription className="text-slate-400">配置 Agent 指标告警规则</DialogDescription>
+          <DialogTitle className="text-[var(--dg-text-primary)]">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
+          <DialogDescription className="dg-text-secondary">配置 Agent 指标告警规则</DialogDescription>
         </DialogHeader>
 
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <Label className="text-slate-300 text-xs">规则名称</Label>
+            <Label className="text-[var(--dg-text-secondary)] text-xs">规则名称</Label>
             <Input
               value={ruleForm.name}
               onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
               placeholder="例如：CPU 使用率告警"
-              className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+              className="h-9 dg-input"
             />
           </div>
 
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
-              <Label className="text-slate-300 text-xs">监控指标</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-xs">监控指标</Label>
               <Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}>
-                <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
+                <SelectTrigger className="h-9 dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                <SelectContent className="dg-input">
                   {METRIC_OPTIONS.map((m) => (
                     <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
                   ))}
@@ -136,12 +136,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-300 text-xs">严重程度</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-xs">严重程度</Label>
               <Select value={ruleForm.severity} onValueChange={(v) => setRuleForm({ ...ruleForm, severity: v })}>
-                <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
+                <SelectTrigger className="h-9 dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                <SelectContent className="dg-input">
                   {SEVERITY_OPTIONS.map((s) => (
                     <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
                   ))}
@@ -153,12 +153,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
           {ruleForm.metric !== 'offline' && (
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label className="text-slate-300 text-xs">比较运算符</Label>
+                <Label className="text-[var(--dg-text-secondary)] text-xs">比较运算符</Label>
                 <Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}>
-                  <SelectTrigger className="h-9 bg-slate-800 border-slate-700 text-slate-200">
+                  <SelectTrigger className="h-9 dg-input">
                     <SelectValue />
                   </SelectTrigger>
-                  <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                  <SelectContent className="dg-input">
                     {OPERATOR_OPTIONS.map((o) => (
                       <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                     ))}
@@ -166,12 +166,12 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
                 </Select>
               </div>
               <div className="space-y-1.5">
-                <Label className="text-slate-300 text-xs">阈值 {ruleForm.metric !== 'port_down' ? '(%)' : ''}</Label>
+                <Label className="text-[var(--dg-text-secondary)] text-xs">阈值 {ruleForm.metric !== 'port_down' ? '(%)' : ''}</Label>
                 <Input
                   type="number"
                   value={ruleForm.threshold}
                   onChange={(e) => setRuleForm({ ...ruleForm, threshold: e.target.value })}
-                  className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+                  className="h-9 dg-input"
                 />
               </div>
             </div>
@@ -179,36 +179,36 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
 
           {ruleForm.metric === 'port_down' && (
             <div className="space-y-1.5">
-              <Label className="text-slate-300 text-xs">监控端口</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-xs">监控端口</Label>
               <Input
                 type="number"
                 value={ruleForm.port}
                 onChange={(e) => setRuleForm({ ...ruleForm, port: e.target.value })}
                 placeholder="例如：8080"
-                className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+                className="h-9 dg-input"
               />
             </div>
           )}
 
           <div className="space-y-1.5">
-            <Label className="text-slate-300 text-xs">持续时间(秒)</Label>
+            <Label className="text-[var(--dg-text-secondary)] text-xs">持续时间(秒)</Label>
             <Input
               type="number"
               value={ruleForm.duration}
               onChange={(e) => setRuleForm({ ...ruleForm, duration: e.target.value })}
               placeholder="指标持续超限多久后告警"
-              className="h-9 bg-slate-800 border-slate-700 text-slate-200"
+              className="h-9 dg-input"
             />
           </div>
 
           <div className="flex items-center justify-between">
-            <Label className="text-slate-300 text-xs">启用规则</Label>
+            <Label className="text-[var(--dg-text-secondary)] text-xs">启用规则</Label>
             <Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} />
           </div>
         </div>
 
         <DialogFooter className="gap-2">
-          <Button variant="outline" onClick={() => onOpenChange(false)} className="border-slate-700 text-slate-300">取消</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">取消</Button>
           <Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-700 text-white">
             {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
             {editingRule ? '保存' : '创建'}
diff --git a/frontend/src/components/agent/AgentWizard.tsx b/frontend/src/components/agent/AgentWizard.tsx
index d6652ad..a953092 100644
--- a/frontend/src/components/agent/AgentWizard.tsx
+++ b/frontend/src/components/agent/AgentWizard.tsx
@@ -196,12 +196,12 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
+      <DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]">
         <DialogHeader>
-          <DialogTitle className="text-slate-100">
+          <DialogTitle className="text-[var(--dg-text-primary)]">
             {server ? `部署 Agent → ${server.hostname}` : '部署 Agent'}
           </DialogTitle>
-          <DialogDescription className="text-slate-400">
+          <DialogDescription className="dg-text-secondary">
             {server 
               ? `目标主机 ${server.hostname} (${server.ip})，选择安装方式：`
               : '在目标主机上执行以下命令即可完成 Agent 安装与注册'
@@ -210,63 +210,63 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
         </DialogHeader>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="bg-slate-800 border border-slate-700">
-            <TabsTrigger value="auto" className="data-[state=active]:bg-slate-700">
+          <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
+            <TabsTrigger value="auto" className="data-[state=active]:bg-[var(--dg-bg-active)]">
               <Terminal className="h-4 w-4 mr-1.5" />
               安装Agent
             </TabsTrigger>
             {server && (
-              <TabsTrigger value="ssh" className="data-[state=active]:bg-slate-700">
+              <TabsTrigger value="ssh" className="data-[state=active]:bg-[var(--dg-bg-active)]">
                 <Zap className="h-4 w-4 mr-1.5" />
                 SSH一键安装
               </TabsTrigger>
             )}
             {!server && (
-              <TabsTrigger value="ssh" className="data-[state=active]:bg-slate-700 opacity-50 cursor-not-allowed" disabled>
+              <TabsTrigger value="ssh" className="data-[state=active]:bg-[var(--dg-bg-active)] opacity-50 cursor-not-allowed" disabled>
                 <Zap className="h-4 w-4 mr-1.5" />
                 SSH一键安装
               </TabsTrigger>
             )}
-            <TabsTrigger value="manual" className="data-[state=active]:bg-slate-700">
+            <TabsTrigger value="manual" className="data-[state=active]:bg-[var(--dg-bg-active)]">
               手动安装
             </TabsTrigger>
           </TabsList>
 
           {/* 自动安装 */}
           <TabsContent value="auto" className="mt-4 space-y-3">
-            <p className="text-sm text-slate-400">
+            <p className="text-sm dg-text-secondary">
               在目标主机执行以下命令，Agent 将自动下载、安装并启动：
             </p>
-            <div className="relative rounded-lg bg-slate-950 border border-slate-800 p-4">
-              <pre className="text-xs text-emerald-400 font-mono whitespace-pre-wrap break-all pr-10">
+            <div className="relative rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-4">
+              <pre className="text-xs dg-text-green font-mono whitespace-pre-wrap break-all pr-10">
                 {installCommand}
               </pre>
               <Button
                 size="icon"
                 variant="ghost"
                 onClick={handleCopy}
-                className="absolute top-2 right-2 h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800"
+                className="absolute top-2 right-2 h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
                 title="复制到剪贴板"
               >
-                {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                {copied ? <Check className="h-4 w-4 dg-text-green" /> : <Copy className="h-4 w-4" />}
               </Button>
             </div>
 
             {/* 手动复制模式：当自动复制失败时展示可全选的文本域 */}
             {showManualInput && (
               <div className="rounded-lg bg-amber-950/30 border border-amber-800/50 p-4">
-                <p className="text-xs text-amber-400 mb-2">
+                <p className="text-xs dg-text-yellow mb-2">
                   ⚠️ 自动复制失败。请点击下方输入框全选 (Ctrl+A) 后复制 (Ctrl+C)：
                 </p>
                 <textarea
                   readOnly
                   value={installCommand}
-                  className="w-full h-24 bg-slate-950 border border-amber-800/30 text-emerald-400 font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
+                  className="w-full h-24 bg-[var(--dg-bg-primary)] border border-amber-800/30 dg-text-green font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
                   onClick={(e) => (e.target as HTMLTextAreaElement).select()}
                 />
               </div>
             )}
-            <div className="flex items-start gap-2 text-xs text-slate-500">
+            <div className="flex items-start gap-2 text-xs dg-text-muted">
               <Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
               <span>
                 服务器地址已自动检测 — 安装脚本与 Agent 上报均使用 {origin}（通过 Nginx/Vite proxy 转发到后端）。安装成功后将自动连接并开始上报指标。
@@ -277,19 +277,19 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
           {/* SSH 一键安装 */}
           <TabsContent value="ssh" className="mt-4 space-y-4">
             {!server ? (
-              <div className="text-center py-12 text-slate-400">
+              <div className="text-center py-12 dg-text-secondary">
                 <Server className="h-10 w-10 mx-auto mb-3 opacity-50" />
                 <p className="text-sm font-medium mb-1">未选择目标主机</p>
                 <p className="text-xs">请先在主机列表中勾选一台主机，再点击「安装 Agent」打开此页面</p>
               </div>
             ) : (
               <>
-                <div className="rounded-lg bg-slate-950 border border-slate-800 p-4">
+                <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-4">
                   <div className="flex items-center gap-3 mb-3">
-                    <Server className="h-5 w-5 text-blue-400" />
+                    <Server className="h-5 w-5 dg-text-blue" />
                     <div>
-                      <p className="text-sm font-medium text-slate-200">{server.hostname}</p>
-                      <code className="text-xs text-slate-400">{server.ip}</code>
+                      <p className="text-sm font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
+                      <code className="text-xs dg-text-secondary">{server.ip}</code>
                     </div>
                   </div>
 
@@ -302,49 +302,49 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
                       </div>
                       <div className="grid grid-cols-2 gap-2">
                         <div>
-                          <Label className="text-xs text-slate-400">用户名</Label>
+                          <Label className="text-xs dg-text-secondary">用户名</Label>
                           <Input
                             value={sshUsername}
                             onChange={e => setSshUsername(e.target.value)}
                             placeholder="root"
-                            className="h-8 text-sm bg-slate-900 border-slate-700 text-slate-200 mt-1"
+                            className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1"
                           />
                         </div>
                         <div className="flex items-end gap-1">
                           <div className="flex-1">
-                            <Label className="text-xs text-slate-400">密码</Label>
+                            <Label className="text-xs dg-text-secondary">密码</Label>
                             <Input
                               type="password"
                               value={sshPassword}
                               onChange={e => { setSshPassword(e.target.value); setAuthType('password'); }}
                               placeholder="******"
-                              className="h-8 text-sm bg-slate-900 border-slate-700 text-slate-200 mt-1"
+                              className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1"
                             />
                           </div>
-                          <span className="text-xs text-slate-500 px-1 pb-1">或</span>
+                          <span className="text-xs dg-text-muted px-1 pb-1">或</span>
                           <Button variant="ghost" size="sm"
                             onClick={() => { setAuthType('key'); setSshPassword(''); }}
-                            className={`text-xs h-7 px-2 ${authType==='key'?'text-blue-400':'text-slate-500'}`}>
+                            className={`text-xs h-7 px-2 ${authType==='key'?'dg-text-blue':'dg-text-muted'}`}>
                             密钥
                           </Button>
                         </div>
                       </div>
                       {authType === 'key' && (
                         <div>
-                          <Label className="text-xs text-slate-400">SSH 私钥（PEM 格式）</Label>
+                          <Label className="text-xs dg-text-secondary">SSH 私钥（PEM 格式）</Label>
                           <textarea
                             value={sshKey}
                             onChange={e => setSshKey(e.target.value)}
                             placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
                             rows={3}
-                            className="w-full mt-1 bg-slate-900 border border-slate-700 text-slate-200 font-mono text-xs p-2 rounded-md resize-none"
+                            className="w-full mt-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-xs p-2 rounded-md resize-none"
                           />
                         </div>
                       )}
                     </div>
                   )}
 
-                  <p className="text-sm text-slate-400 mb-4">
+                  <p className="text-sm dg-text-secondary mb-4">
                     通过 SSH 远程连接到目标主机，自动下载并安装 Agent，完成后立即启动运行。
                   </p>
                   <Button
@@ -365,7 +365,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
                     )}
                   </Button>
                 </div>
-                <div className="flex items-start gap-2 text-xs text-slate-500">
+                <div className="flex items-start gap-2 text-xs dg-text-muted">
                   <Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
                   <span>
                     系统将通过 SSH 连接 {server.ip}，执行安装脚本。请确保服务器 SSH 凭据已正确配置（编辑服务器可修改密码/密钥）。
@@ -379,16 +379,16 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
           <TabsContent value="manual" className="mt-4 space-y-4">
             <div className="max-h-[420px] overflow-y-auto space-y-3 pr-1">
               {manualSteps.map((step) => (
-                <div key={step.title} className="rounded-lg bg-slate-950 border border-slate-800 overflow-hidden">
-                  <div className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50">
-                    <step.icon className="h-4 w-4 text-blue-400" />
-                    <span className="text-sm font-medium text-slate-200">{step.title}</span>
+                <div key={step.title} className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] overflow-hidden">
+                  <div className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)]/50">
+                    <step.icon className="h-4 w-4 dg-text-blue" />
+                    <span className="text-sm font-medium text-[var(--dg-text-primary)]">{step.title}</span>
                   </div>
                   <div className="p-3 space-y-1">
                     {step.commands.map((cmd, idx) => (
                       <div key={idx} className="flex items-start gap-2">
-                        <span className="text-slate-600 font-mono text-xs select-none mt-0.5">$</span>
-                        <code className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all flex-1">
+                        <span className="dg-text-muted font-mono text-xs select-none mt-0.5">$</span>
+                        <code className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all flex-1">
                           {cmd}
                         </code>
                       </div>
@@ -397,7 +397,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
                 </div>
               ))}
             </div>
-            <p className="text-xs text-slate-500">
+            <p className="text-xs dg-text-muted">
               完成上述步骤后，Agent 将作为 systemd 服务运行并自动上报指标。
             </p>
           </TabsContent>
diff --git a/frontend/src/components/agent/HostDetailDialog.tsx b/frontend/src/components/agent/HostDetailDialog.tsx
index 2ad3289..1393044 100644
--- a/frontend/src/components/agent/HostDetailDialog.tsx
+++ b/frontend/src/components/agent/HostDetailDialog.tsx
@@ -72,15 +72,15 @@ export function HostDetailDialog({
 
   return (
     <Dialog open={!!host} onOpenChange={(v) => { if (!v) onClose(); }}>
-      <DialogContent className="max-w-3xl bg-slate-900 border-slate-800 text-slate-100">
+      <DialogContent className="max-w-3xl dg-card text-[var(--dg-text-primary)]">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <Server className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Server className="h-5 w-5 dg-text-blue" />
             {host.hostname}
             {online ? (
-              <Badge className="bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">在线</Badge>
+              <Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">在线</Badge>
             ) : (
-              <Badge className="bg-red-500/15 text-red-400 border border-red-500/30">离线</Badge>
+              <Badge className="bg-red-500/15 dg-text-red border border-red-500/30">离线</Badge>
             )}
           </DialogTitle>
           <DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
@@ -98,28 +98,28 @@ export function HostDetailDialog({
           {/* 趋势图 */}
           <div>
             <div className="flex items-center justify-between mb-2">
-              <span className="text-sm font-medium text-slate-200 flex items-center gap-1.5">
-                <Activity className="h-4 w-4 text-blue-400" />
+              <span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5">
+                <Activity className="h-4 w-4 dg-text-blue" />
                 指标趋势
               </span>
               <Select value={String(hours)} onValueChange={(v) => setHours(Number(v))}>
-                <SelectTrigger size="sm" className="h-7 w-28 bg-slate-800 border-slate-700 text-slate-300 text-xs">
+                <SelectTrigger size="sm" className="h-7 w-28 dg-input text-[var(--dg-text-secondary)] text-xs">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                <SelectContent className="dg-input">
                   <SelectItem value="1">最近 1 小时</SelectItem>
                   <SelectItem value="6">最近 6 小时</SelectItem>
                   <SelectItem value="24">最近 24 小时</SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div className="h-56 rounded-lg bg-slate-950 border border-slate-800 p-3">
+            <div className="h-56 rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
               {loading ? (
                 <div className="h-full flex items-center justify-center">
-                  <Loader2 className="h-5 w-5 animate-spin text-slate-500" />
+                  <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
                 </div>
               ) : chartData.length === 0 ? (
-                <div className="h-full flex items-center justify-center text-sm text-slate-500">暂无历史数据</div>
+                <div className="h-full flex items-center justify-center text-sm dg-text-muted">暂无历史数据</div>
               ) : (
                 <ResponsiveContainer width="100%" height="100%">
                   <AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
@@ -154,16 +154,16 @@ export function HostDetailDialog({
 
           {/* 端口列表 */}
           <div>
-            <span className="text-sm font-medium text-slate-200 flex items-center gap-1.5 mb-2">
-              <Network className="h-4 w-4 text-blue-400" />
+            <span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5 mb-2">
+              <Network className="h-4 w-4 dg-text-blue" />
               端口发现 ({ports.length})
             </span>
             {ports.length === 0 ? (
-              <p className="text-xs text-slate-500">暂无端口数据</p>
+              <p className="text-xs dg-text-muted">暂无端口数据</p>
             ) : (
               <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto">
                 {ports.map((p, idx) => (
-                  <Badge key={idx} className="bg-slate-800 text-slate-300 border border-slate-700">
+                  <Badge key={idx} className="bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)]">
                     <Network className="h-3 w-3 mr-1" />
                     {p.port ?? p}
                   </Badge>
@@ -181,7 +181,7 @@ export function HostDetailDialog({
             <Terminal className="h-4 w-4 mr-1.5" />
             远程命令
           </Button>
-          <Button variant="outline" onClick={onClose} className="border-slate-700 text-slate-300">
+          <Button variant="outline" onClick={onClose} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
             关闭
           </Button>
         </DialogFooter>
@@ -192,9 +192,9 @@ export function HostDetailDialog({
 
 function InfoCell({ label, value }: { label: string; value: string }) {
   return (
-    <div className="bg-slate-950 border border-slate-800 rounded-lg px-3 py-2">
-      <div className="text-xs text-slate-500">{label}</div>
-      <div className="text-sm text-slate-200 font-medium truncate">{value}</div>
+    <div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg px-3 py-2">
+      <div className="text-xs dg-text-muted">{label}</div>
+      <div className="text-sm text-[var(--dg-text-primary)] font-medium truncate">{value}</div>
     </div>
   );
 }
diff --git a/frontend/src/components/agent/agentAlertHelper.tsx b/frontend/src/components/agent/agentAlertHelper.tsx
index 01d2226..70874d8 100644
--- a/frontend/src/components/agent/agentAlertHelper.tsx
+++ b/frontend/src/components/agent/agentAlertHelper.tsx
@@ -23,9 +23,9 @@ export const OPERATOR_OPTIONS = [
 
 // 严重程度选项（含徽章配色） // Logan.Li
 export const SEVERITY_OPTIONS = [
-  { value: 'critical', label: '严重', color: 'bg-red-500/15 text-red-400 border-red-500/30' },
-  { value: 'warning', label: '警告', color: 'bg-amber-500/15 text-amber-400 border-amber-500/30' },
-  { value: 'info', label: '提示', color: 'bg-blue-500/15 text-blue-400 border-blue-500/30' },
+  { value: 'critical', label: '严重', color: 'bg-red-500/15 dg-text-red border-red-500/30' },
+  { value: 'warning', label: '警告', color: 'bg-amber-500/15 dg-text-yellow border-amber-500/30' },
+  { value: 'info', label: '提示', color: 'bg-blue-500/15 dg-text-blue border-blue-500/30' },
 ];
 
 // 获取指标中文标签 // Logan.Li
diff --git a/frontend/src/components/aiops/AIAlertAnalyzer.tsx b/frontend/src/components/aiops/AIAlertAnalyzer.tsx
index b60bb42..c3144f9 100644
--- a/frontend/src/components/aiops/AIAlertAnalyzer.tsx
+++ b/frontend/src/components/aiops/AIAlertAnalyzer.tsx
@@ -25,6 +25,8 @@ import {
 } from './analyzerHelpers';
 import { AIAnalysisResult } from './AIAnalysisResult';
 import { AutoFixDialog } from './AutoFixDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 // Parse LLM JSON response (may have markdown fences) into AIAnalysis
@@ -125,45 +127,47 @@ export function AIAlertAnalyzer() {
   const getSeverityIcon = (severity: string) => {
     switch (severity) {
       case 'critical':
-        return <XCircle className="h-4 w-4 text-red-400" />;
+        return <XCircle className="h-4 w-4 dg-text-red" />;
       case 'warning':
-        return <AlertCircle className="h-4 w-4 text-amber-400" />;
+        return <AlertCircle className="h-4 w-4 dg-text-yellow" />;
       default:
-        return <CheckCircle className="h-4 w-4 text-blue-400" />;
+        return <CheckCircle className="h-4 w-4 dg-text-blue" />;
     }
   };
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
-            <Brain className="h-5 w-5 text-white" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-slate-100">AI 告警智能分析</h1>
-            <p className="text-sm text-slate-500">基于大模型的告警根因分析和自动修复建议</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-            <Sparkles className="h-3 w-3 mr-1" />
-            AI 引擎运行中
-          </Badge>
-        </div>
-      </div>
+  const activeCount = alerts.filter(a => a.status === 'active').length;
 
-      <div className="grid grid-cols-2 gap-6 h-[calc(100vh-200px)]">
+  return (
+    <PageShell
+      variant="workspace"
+      title="AI 告警智能分析"
+      subtitle="基于大模型的告警根因分析和自动修复建议"
+      icon={<Brain className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '告警总数', value: alerts.length, color: 'blue' },
+            { label: '活跃', value: activeCount, color: 'red' },
+          ]}
+        />
+      )}
+      actions={(
+        <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
+          <Sparkles className="h-3 w-3 mr-1" />AI 引擎运行中
+        </Badge>
+      )}
+      contentClassName="grid grid-cols-2 gap-6 h-[calc(100vh-200px)]"
+    >
         {/* 告警列表（左侧） */}
-        <Card className="bg-slate-800 border-slate-700 flex flex-col">
-          <CardHeader className="border-b border-slate-700 pb-3">
+        <Card className="dg-card flex flex-col">
+          <CardHeader className="border-b border-[var(--dg-border)] pb-3">
             <div className="flex items-center justify-between">
-              <CardTitle className="text-slate-100 flex items-center gap-2">
-                <AlertTriangle className="h-5 w-5 text-amber-400" />
+              <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+                <AlertTriangle className="h-5 w-5 dg-text-yellow" />
                 活跃告警
               </CardTitle>
-              <Badge className="bg-red-500/10 text-red-400 border-red-500/30">
+              <Badge className="bg-red-500/10 dg-text-red border-red-500/30">
                 {alerts.filter(a => a.status === 'active').length} 个活跃
               </Badge>
             </div>
@@ -172,11 +176,11 @@ export function AIAlertAnalyzer() {
             <CardContent className="p-4 space-y-3">
               {loading ? (
                 <div className="flex flex-col items-center justify-center h-32">
-                  <Loader2 className="h-6 w-6 animate-spin text-slate-500 mb-2" />
-                  <p className="text-sm text-slate-500">加载告警数据...</p>
+                  <Loader2 className="h-6 w-6 animate-spin dg-text-muted mb-2" />
+                  <p className="text-sm dg-text-muted">加载告警数据...</p>
                 </div>
               ) : alerts.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-32 text-slate-500">
+                <div className="flex flex-col items-center justify-center h-32 dg-text-muted">
                   <CheckCircle className="h-8 w-8 mb-2 opacity-50" />
                   <p className="text-sm">暂无告警事件</p>
                 </div>
@@ -187,21 +191,21 @@ export function AIAlertAnalyzer() {
                   className={`p-4 rounded-lg border cursor-pointer transition-all ${
                     selectedAlert?.id === alert.id
                       ? 'border-purple-500 bg-purple-500/10'
-                      : 'border-slate-700 bg-slate-800/50 hover:border-slate-600'
+                      : 'border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50 hover:border-[var(--dg-border-hover)]'
                   }`}
                   onClick={() => handleAnalyze(alert)}
                 >
                   <div className="flex items-start justify-between mb-2">
                     <div className="flex items-center gap-2">
                       {getSeverityIcon(alert.severity)}
-                      <span className="font-medium text-slate-100">{alert.name}</span>
+                      <span className="font-medium text-[var(--dg-text-primary)]">{alert.name}</span>
                     </div>
                     <Badge variant="outline" className={getSeverityColor(alert.severity)}>
                       {alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
                     </Badge>
                   </div>
-                  <div className="text-sm text-slate-400 mb-2">{alert.description}</div>
-                  <div className="flex items-center gap-4 text-xs text-slate-500">
+                  <div className="text-sm dg-text-secondary mb-2">{alert.description}</div>
+                  <div className="flex items-center gap-4 text-xs dg-text-muted">
                     <span className="flex items-center gap-1">
                       <Server className="h-3 w-3" />
                       {alert.source}
@@ -229,7 +233,6 @@ export function AIAlertAnalyzer() {
           analysis={analysis}
           onAutoFix={handleAutoFix}
         />
-      </div>
 
       {/* 自动修复脚本确认弹窗（子组件） */}
       <AutoFixDialog
@@ -237,6 +240,6 @@ export function AIAlertAnalyzer() {
         onOpenChange={setShowScriptDialog}
         script={analysis?.autoFixScript}
       />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/aiops/AIAnalysisResult.tsx b/frontend/src/components/aiops/AIAnalysisResult.tsx
index 857a047..cb1b0da 100644
--- a/frontend/src/components/aiops/AIAnalysisResult.tsx
+++ b/frontend/src/components/aiops/AIAnalysisResult.tsx
@@ -15,105 +15,105 @@ interface AIAnalysisResultProps {
 
 export function AIAnalysisResult({ selectedAlert, isAnalyzing, analysis, onAutoFix }: AIAnalysisResultProps) {
   return (
-    <Card className="bg-slate-800 border-slate-700 flex flex-col">
-      <CardHeader className="border-b border-slate-700 pb-3">
-        <CardTitle className="text-slate-100 flex items-center gap-2">
-          <Sparkles className="h-5 w-5 text-purple-400" />
+    <Card className="dg-card flex flex-col">
+      <CardHeader className="border-b border-[var(--dg-border)] pb-3">
+        <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+          <Sparkles className="h-5 w-5 dg-text-purple" />
           AI 分析结果
         </CardTitle>
       </CardHeader>
       <ScrollArea className="flex-1">
         <CardContent className="p-4">
           {!selectedAlert ? (
-            <div className="flex flex-col items-center justify-center h-64 text-slate-500">
+            <div className="flex flex-col items-center justify-center h-64 dg-text-muted">
               <Brain className="h-16 w-16 mb-4 opacity-30" />
               <p>选择左侧告警进行AI智能分析</p>
             </div>
           ) : isAnalyzing ? (
             <div className="flex flex-col items-center justify-center h-64">
-              <Loader2 className="h-8 w-8 animate-spin text-purple-400 mb-4" />
-              <p className="text-slate-400">AI正在分析告警根因...</p>
-              <p className="text-xs text-slate-500 mt-2">正在关联日志、指标和历史案例</p>
+              <Loader2 className="h-8 w-8 animate-spin dg-text-purple mb-4" />
+              <p className="dg-text-secondary">AI正在分析告警根因...</p>
+              <p className="text-xs dg-text-muted mt-2">正在关联日志、指标和历史案例</p>
             </div>
           ) : analysis ? (
             <div className="space-y-4">
               {/* 置信度 */}
               <div className="flex items-center justify-between p-3 bg-purple-500/10 rounded-lg border border-purple-500/30">
                 <div className="flex items-center gap-2">
-                  <Brain className="h-5 w-5 text-purple-400" />
-                  <span className="text-slate-300">分析置信度</span>
+                  <Brain className="h-5 w-5 dg-text-purple" />
+                  <span className="text-[var(--dg-text-secondary)]">分析置信度</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <div className="w-32 h-2 bg-slate-700 rounded-full overflow-hidden">
+                  <div className="w-32 h-2 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
                     <div
                       className="h-full bg-gradient-to-r from-purple-500 to-pink-500"
                       style={{ width: `${analysis.confidence}%` }}
                     />
                   </div>
-                  <span className="text-purple-400 font-bold">{analysis.confidence}%</span>
+                  <span className="dg-text-purple font-bold">{analysis.confidence}%</span>
                 </div>
               </div>
 
               {/* 根因分析 */}
               <div className="space-y-2">
-                <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
-                  <AlertCircle className="h-4 w-4 text-red-400" />
+                <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
+                  <AlertCircle className="h-4 w-4 dg-text-red" />
                   根因分析
                 </h4>
-                <div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
-                  <p className="text-sm text-slate-300 leading-relaxed">{analysis.rootCause}</p>
+                <div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
+                  <p className="text-sm text-[var(--dg-text-secondary)] leading-relaxed">{analysis.rootCause}</p>
                 </div>
               </div>
 
               {/* 影响范围 */}
               <div className="space-y-2">
-                <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
-                  <TrendingUp className="h-4 w-4 text-amber-400" />
+                <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
+                  <TrendingUp className="h-4 w-4 dg-text-yellow" />
                   影响范围
                 </h4>
-                <div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
-                  <p className="text-sm text-slate-300 leading-relaxed">{analysis.impact}</p>
+                <div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
+                  <p className="text-sm text-[var(--dg-text-secondary)] leading-relaxed">{analysis.impact}</p>
                 </div>
               </div>
 
               {/* 修复建议 */}
               <div className="space-y-2">
-                <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
-                  <CheckCircle className="h-4 w-4 text-emerald-400" />
+                <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
+                  <CheckCircle className="h-4 w-4 dg-text-green" />
                   修复建议
                 </h4>
                 <div className="space-y-2">
                   {analysis.recommendations.map((rec, idx) => (
                     <div
                       key={idx}
-                      className="flex items-start gap-2 p-2 bg-slate-900 rounded-lg border border-slate-700"
+                      className="flex items-start gap-2 p-2 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]"
                     >
-                      <span className="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs">
+                      <span className="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 dg-text-green flex items-center justify-center text-xs">
                         {idx + 1}
                       </span>
-                      <span className="text-sm text-slate-300">{rec}</span>
+                      <span className="text-sm text-[var(--dg-text-secondary)]">{rec}</span>
                     </div>
                   ))}
                 </div>
               </div>
 
               {/* 相似历史案例 */}
-              <div className="flex items-center gap-2 p-3 bg-slate-900 rounded-lg border border-slate-700">
-                <FileText className="h-4 w-4 text-blue-400" />
-                <span className="text-sm text-slate-400">
-                  发现 <span className="text-blue-400 font-medium">{analysis.similarCases}</span> 个相似历史案例
+              <div className="flex items-center gap-2 p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
+                <FileText className="h-4 w-4 dg-text-blue" />
+                <span className="text-sm dg-text-secondary">
+                  发现 <span className="dg-text-blue font-medium">{analysis.similarCases}</span> 个相似历史案例
                 </span>
               </div>
 
               {/* 自动修复脚本 */}
               {analysis.autoFixScript && (
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
-                    <Terminal className="h-4 w-4 text-purple-400" />
+                  <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] flex items-center gap-2">
+                    <Terminal className="h-4 w-4 dg-text-purple" />
                     自动修复脚本
                   </h4>
-                  <div className="p-3 bg-slate-950 rounded-lg border border-slate-700">
-                    <pre className="text-xs text-slate-400 overflow-x-auto">{analysis.autoFixScript}</pre>
+                  <div className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
+                    <pre className="text-xs dg-text-secondary overflow-x-auto">{analysis.autoFixScript}</pre>
                   </div>
                   <Button
                     className="w-full bg-purple-600 hover:bg-purple-700"
diff --git a/frontend/src/components/aiops/AIOpsAssistant.tsx b/frontend/src/components/aiops/AIOpsAssistant.tsx
index 40de791..d652bfc 100644
--- a/frontend/src/components/aiops/AIOpsAssistant.tsx
+++ b/frontend/src/components/aiops/AIOpsAssistant.tsx
@@ -26,6 +26,7 @@ import {
   Square,
 } from 'lucide-react';
 import type { JsonData } from '@/types/common';
+import { PageShell } from '@/components/layout/PageShell';
 
 const defaultConfig: LLMConfigData = {
   provider: 'openai',
@@ -295,41 +296,30 @@ export function AIOpsAssistant() {
 
 
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
-            <Brain className="h-5 w-5 text-white" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-slate-100">AIOps 智能助手</h1>
-            <p className="text-sm text-slate-500">AI 驱动的智能运维助手</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-3">
-          {configReady ? (
-            <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-              <CheckCircle2 className="h-3 w-3 mr-1" />
-              {config.model}
-            </Badge>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-4 gap-6 h-[calc(100vh-200px)]">
+    <PageShell
+      variant="workspace"
+      title="AIOps 智能助手"
+      subtitle="AI 驱动的智能运维助手"
+      icon={<Brain className="h-5 w-5" />}
+      actions={configReady ? (
+        <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
+          <CheckCircle2 className="h-3 w-3 mr-1" />{config.model}
+        </Badge>
+      ) : undefined}
+      contentClassName="grid grid-cols-4 gap-6 h-[calc(100vh-200px)]"
+    >
         {/* Sidebar */}
         <div className="col-span-1 space-y-4">
-          <Card className="bg-slate-800 border-slate-700">
+          <Card className="dg-card">
             <CardHeader className="pb-3">
-              <CardTitle className="text-sm text-slate-300">快速操作</CardTitle>
+              <CardTitle className="text-sm text-[var(--dg-text-secondary)]">快速操作</CardTitle>
             </CardHeader>
             <CardContent className="space-y-2">
               {quickActions.map((action) => (
                 <Button
                   key={action.id}
                   variant="ghost"
-                  className="w-full justify-start text-slate-300 hover:text-slate-100 hover:bg-slate-700"
+                  className="w-full justify-start text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
                   disabled={isLoading || contextLoading !== null}
                   onClick={() => handleQuickAction(action)}
                 >
@@ -340,32 +330,32 @@ export function AIOpsAssistant() {
                   )}
                   <span className="text-sm">{action.name}</span>
                   {configReady && action.contextLoader && (
-                    <span className="ml-auto text-[10px] text-emerald-400/60 shrink-0">实时</span>
+                    <span className="ml-auto text-[10px] dg-text-green/60 shrink-0">实时</span>
                   )}
                 </Button>
               ))}
             </CardContent>
           </Card>
 
-          <Card className="bg-slate-800 border-slate-700">
+          <Card className="dg-card">
             <CardHeader className="pb-3">
-              <CardTitle className="text-sm text-slate-300">能力展示</CardTitle>
+              <CardTitle className="text-sm text-[var(--dg-text-secondary)]">能力展示</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-              <div className="flex items-center gap-2 text-sm text-slate-400">
-                <AlertTriangle className="h-4 w-4 text-amber-400" />
+              <div className="flex items-center gap-2 text-sm dg-text-secondary">
+                <AlertTriangle className="h-4 w-4 dg-text-yellow" />
                 <span>智能告警分析</span>
               </div>
-              <div className="flex items-center gap-2 text-sm text-slate-400">
-                <Activity className="h-4 w-4 text-blue-400" />
+              <div className="flex items-center gap-2 text-sm dg-text-secondary">
+                <Activity className="h-4 w-4 dg-text-blue" />
                 <span>性能瓶颈识别</span>
               </div>
-              <div className="flex items-center gap-2 text-sm text-slate-400">
-                <FileText className="h-4 w-4 text-emerald-400" />
+              <div className="flex items-center gap-2 text-sm dg-text-secondary">
+                <FileText className="h-4 w-4 dg-text-green" />
                 <span>自动报告生成</span>
               </div>
-              <div className="flex items-center gap-2 text-sm text-slate-400">
-                <Terminal className="h-4 w-4 text-purple-400" />
+              <div className="flex items-center gap-2 text-sm dg-text-secondary">
+                <Terminal className="h-4 w-4 dg-text-purple" />
                 <span>脚本自动生成</span>
               </div>
             </CardContent>
@@ -373,22 +363,22 @@ export function AIOpsAssistant() {
         </div>
 
         {/* Chat Area */}
-        <Card className="col-span-3 bg-slate-800 border-slate-700 flex flex-col">
-          <CardHeader className="border-b border-slate-700 pb-3">
+        <Card className="col-span-3 dg-card flex flex-col">
+          <CardHeader className="border-b border-[var(--dg-border)] pb-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <Bot className="h-5 w-5 text-purple-400" />
-                <span className="font-medium text-slate-100">AI 助手</span>
+                <Bot className="h-5 w-5 dg-text-purple" />
+                <span className="font-medium text-[var(--dg-text-primary)]">AI 助手</span>
                 {configReady ? (
-                  <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10 text-xs">
+                  <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10 text-xs">
                     <span className="w-2 h-2 rounded-full bg-emerald-400 mr-1 animate-pulse" />
                     在线
                   </Badge>
                 ) : (
-                  <Badge variant="outline" className="border-slate-600 text-slate-400 text-xs">离线</Badge>
+                  <Badge variant="outline" className="border-[var(--dg-border-hover)] dg-text-secondary text-xs">离线</Badge>
                 )}
               </div>
-              <Button variant="ghost" size="sm" className="text-slate-400" onClick={handleNewChat} disabled={messages.length === 0}>
+              <Button variant="ghost" size="sm" className="dg-text-secondary" onClick={handleNewChat} disabled={messages.length === 0}>
                 <RotateCw className="h-4 w-4 mr-1" />
                 新对话
               </Button>
@@ -398,14 +388,14 @@ export function AIOpsAssistant() {
           <ScrollArea className="flex-1 p-4">
             <div className="space-y-4">
               {messages.length === 0 && !isLoading && (
-                <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">
                   <MessageSquare className="h-10 w-10 mb-3 opacity-30" />
                   <p>{configReady ? '暂无对话记录，输入问题开始与 AI 助手对话' : 'AI 助手尚未配置大模型'}</p>
                   {!configReady && (
                     <Button
                       variant="outline"
                       size="sm"
-                      className="mt-4 border-slate-700 text-slate-300 hover:text-purple-400"
+                      className="mt-4 dg-btn-secondary hover:dg-text-purple"
                       onClick={() => navigate('/ai-llm-config')}
                     >
                       <Settings className="h-4 w-4 mr-1" />
@@ -428,14 +418,14 @@ export function AIOpsAssistant() {
                     <div
                       className={`inline-block rounded-lg p-3 text-left whitespace-pre-wrap break-words ${
                         message.isError
-                          ? 'bg-red-900/30 border border-red-500/30 text-red-300'
+                          ? 'bg-red-900/30 border border-red-500/30 dg-text-red'
                           : message.role === 'assistant'
-                            ? 'bg-slate-700 text-slate-100'
+                            ? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)]'
                             : 'bg-blue-600 text-white'
                       }`}
                     >
                       {isStreaming ? (
-                        <div className="flex items-center gap-2 text-slate-400">
+                        <div className="flex items-center gap-2 dg-text-secondary">
                           <Loader2 className="h-4 w-4 animate-spin" />
                           <span className="text-sm">思考中...</span>
                         </div>
@@ -447,9 +437,9 @@ export function AIOpsAssistant() {
                         <span className="inline-block w-2 h-4 ml-0.5 bg-purple-400 animate-pulse align-middle" />
                       )}
                     </div>
-                    <div className="text-xs text-slate-500 mt-1">
+                    <div className="text-xs dg-text-muted mt-1">
                       {fmtTime(message.timestamp)}
-                      {message.isStopped && <span className="ml-2 text-slate-600">（已停止）</span>}
+                      {message.isStopped && <span className="ml-2 dg-text-muted">（已停止）</span>}
                     </div>
                   </div>
                 </div>
@@ -460,14 +450,14 @@ export function AIOpsAssistant() {
             </div>
           </ScrollArea>
 
-          <CardContent className="border-t border-slate-700 pt-4">
+          <CardContent className="border-t border-[var(--dg-border)] pt-4">
             <div className="flex gap-2">
               <Input
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                 placeholder={configReady ? '输入运维问题，或选择左侧快速操作...' : '请先配置大模型...'}
-                className="flex-1 bg-slate-900 border-slate-700 text-slate-100"
+                className="flex-1 dg-input"
                 disabled={isLoading}
               />
               <Button className="bg-purple-600 hover:bg-purple-700" onClick={handleSend} disabled={isLoading || !input.trim()}>
@@ -477,7 +467,7 @@ export function AIOpsAssistant() {
               {isLoading && (
                 <Button
                   variant="outline"
-                  className="border-red-500/40 text-red-400 hover:bg-red-500/10"
+                  className="border-red-500/40 dg-text-red hover:bg-red-500/10"
                   onClick={() => abortRef.current?.abort()}
                   title="停止生成"
                 >
@@ -487,8 +477,6 @@ export function AIOpsAssistant() {
             </div>
           </CardContent>
         </Card>
-      </div>
-
-    </div>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/aiops/AIPredictiveAnalytics.tsx b/frontend/src/components/aiops/AIPredictiveAnalytics.tsx
index 39edb04..6f74564 100644
--- a/frontend/src/components/aiops/AIPredictiveAnalytics.tsx
+++ b/frontend/src/components/aiops/AIPredictiveAnalytics.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { StatStrip } from '@/components/ui/stat-strip';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tabs, TabsContent } from '@/components/ui/tabs';
 import {
   Select,
   SelectContent,
@@ -36,6 +36,7 @@ import {
   trendColorClass,
   type CapacityForecast,
 } from './predictUtils';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 
 // 重新导出 CapacityForecast，兼容已有 import 路径 './AIPredictiveAnalytics'
@@ -45,6 +46,7 @@ export function AIPredictiveAnalytics() {
   const [selectedTimeRange, setSelectedTimeRange] = useState('24h');
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState('metrics');
 
   // 原始数据
   const [rawMetrics, setRawMetrics] = useState<JsonData[]>([]);
@@ -97,81 +99,69 @@ export function AIPredictiveAnalytics() {
   const getTrendIcon = (trend: string) => {
     switch (trend) {
       case 'up':
-        return <TrendingUp className="h-4 w-4 text-red-400" />;
+        return <TrendingUp className="h-4 w-4 dg-text-red" />;
       case 'down':
-        return <TrendingDown className="h-4 w-4 text-emerald-400" />;
+        return <TrendingDown className="h-4 w-4 dg-text-green" />;
       default:
-        return <Minus className="h-4 w-4 text-slate-400" />;
+        return <Minus className="h-4 w-4 dg-text-secondary" />;
     }
   };
 
+  const pageTabs = [
+    { id: 'metrics', label: '指标预测' },
+    { id: 'capacity', label: '容量规划' },
+    { id: 'anomaly', label: '异常预测' },
+  ];
+
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
-            <Brain className="h-5 w-5 text-white" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-slate-100">AI 预测分析</h1>
-            <p className="text-sm text-slate-500">基于实时指标时序数据的线性回归预测与容量规划</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
+    <PageShell
+      variant="list"
+      title="AI 预测分析"
+      subtitle="基于实时指标时序数据的线性回归预测与容量规划"
+      icon={<Brain className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '置信度', value: `${accuracy}%`, color: 'emerald' },
+            { label: '高风险', value: predictedAlertCount, color: 'amber' },
+            { label: '容量预警', value: capacityWarningCount, color: 'red' },
+            { label: '指标', value: predictions.length, color: 'purple' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
           <Select value={selectedTimeRange} onValueChange={setSelectedTimeRange}>
-            <SelectTrigger className="w-32 bg-slate-800 border-slate-700 text-slate-100">
+            <SelectTrigger className="w-32 dg-input">
               <Calendar className="h-4 w-4 mr-2" />
               <SelectValue />
             </SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
+            <SelectContent className="dg-input">
               <SelectItem value="1h">1小时</SelectItem>
               <SelectItem value="24h">24小时</SelectItem>
               <SelectItem value="7d">7天</SelectItem>
               <SelectItem value="30d">30天</SelectItem>
             </SelectContent>
           </Select>
-          <Button variant="outline" className="border-slate-700 text-slate-300" onClick={handleRefresh}>
+          <Button variant="outline" className="dg-btn-secondary" onClick={handleRefresh}>
             {isAnalyzing || loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Activity className="h-4 w-4" />}
           </Button>
-        </div>
-      </div>
-
-      {/* Overview Cards */}
-      <StatStrip
-        items={[
-          { label: '置信度', value: `${accuracy}%`, color: 'emerald' },
-          { label: '高风险', value: predictedAlertCount, color: 'amber' },
-          { label: '容量预警', value: capacityWarningCount, color: 'red' },
-          { label: '指标', value: predictions.length, color: 'purple' },
-        ]}
-      />
-
-      <Tabs defaultValue="metrics" className="space-y-4">
-        <TabsList className="bg-slate-800 border border-slate-700">
-          <TabsTrigger value="metrics" className="data-[state=active]:bg-slate-700">
-            <LineChart className="h-4 w-4 mr-2" />
-            指标预测
-          </TabsTrigger>
-          <TabsTrigger value="capacity" className="data-[state=active]:bg-slate-700">
-            <BarChart3 className="h-4 w-4 mr-2" />
-            容量规划
-          </TabsTrigger>
-          <TabsTrigger value="anomaly" className="data-[state=active]:bg-slate-700">
-            <AlertTriangle className="h-4 w-4 mr-2" />
-            异常预测
-          </TabsTrigger>
-        </TabsList>
-
+        </>
+      )}
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
         <TabsContent value="metrics" className="space-y-4">
-          <Card className="bg-slate-800 border-slate-700">
+          <Card className="dg-card">
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between">
-                <CardTitle className="text-slate-100 flex items-center gap-2">
-                  <TrendingUp className="h-5 w-5 text-blue-400" />
+                <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+                  <TrendingUp className="h-5 w-5 dg-text-blue" />
                   关键指标预测
                 </CardTitle>
-                <Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
+                <Badge variant="outline" className="border-purple-500/30 dg-text-purple bg-purple-500/10">
                   <Sparkles className="h-3 w-3 mr-1" />
                   线性回归预测
                 </Badge>
@@ -179,22 +169,22 @@ export function AIPredictiveAnalytics() {
             </CardHeader>
             <CardContent>
               {loading ? (
-                <div className="flex items-center justify-center py-12 text-slate-500">
+                <div className="flex items-center justify-center py-12 dg-text-muted">
                   <Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载指标数据...
                 </div>
               ) : predictions.length === 0 ? (
-                <div className="text-center py-12 text-slate-500">暂无指标数据</div>
+                <div className="text-center py-12 dg-text-muted">暂无指标数据</div>
               ) : (
                 <div className="grid grid-cols-2 gap-4">
                   {predictions.map((prediction, idx) => (
-                    <div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
+                    <div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
                       <div className="flex items-center justify-between mb-3">
                         <div className="flex items-center gap-2">
-                          {prediction.name.includes('CPU') && <Cpu className="h-4 w-4 text-blue-400" />}
-                          {prediction.name.includes('内存') && <MemoryStick className="h-4 w-4 text-emerald-400" />}
-                          {prediction.name.includes('磁盘') && <HardDrive className="h-4 w-4 text-amber-400" />}
-                          {prediction.name.includes('网络') && <Network className="h-4 w-4 text-purple-400" />}
-                          <span className="font-medium text-slate-200">{prediction.name}</span>
+                          {prediction.name.includes('CPU') && <Cpu className="h-4 w-4 dg-text-blue" />}
+                          {prediction.name.includes('内存') && <MemoryStick className="h-4 w-4 dg-text-green" />}
+                          {prediction.name.includes('磁盘') && <HardDrive className="h-4 w-4 dg-text-yellow" />}
+                          {prediction.name.includes('网络') && <Network className="h-4 w-4 dg-text-purple" />}
+                          <span className="font-medium text-[var(--dg-text-primary)]">{prediction.name}</span>
                         </div>
                         <div className="flex items-center gap-1">
                           {getTrendIcon(prediction.trend)}
@@ -206,14 +196,14 @@ export function AIPredictiveAnalytics() {
 
                       <div className="grid grid-cols-2 gap-4 mb-3">
                         <div>
-                          <p className="text-xs text-slate-500 mb-1">当前值</p>
-                          <p className="text-lg font-bold text-slate-100">
+                          <p className="text-xs dg-text-muted mb-1">当前值</p>
+                          <p className="text-lg font-bold text-[var(--dg-text-primary)]">
                             {prediction.current}
                             {prediction.unit}
                           </p>
                         </div>
                         <div>
-                          <p className="text-xs text-slate-500 mb-1">预测值 ({prediction.timeRange})</p>
+                          <p className="text-xs dg-text-muted mb-1">预测值 ({prediction.timeRange})</p>
                           <p className={`text-lg font-bold ${trendColorClass(prediction.trend)}`}>
                             {prediction.predicted}
                             {prediction.unit}
@@ -223,14 +213,14 @@ export function AIPredictiveAnalytics() {
 
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-2">
-                          <span className="text-xs text-slate-400">置信度</span>
-                          <div className="w-16 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                          <span className="text-xs dg-text-secondary">置信度</span>
+                          <div className="w-16 h-1.5 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
                             <div
                               className="h-full bg-gradient-to-r from-blue-500 to-purple-500"
                               style={{ width: `${prediction.confidence}%` }}
                             />
                           </div>
-                          <span className="text-xs text-purple-400">{prediction.confidence}%</span>
+                          <span className="text-xs dg-text-purple">{prediction.confidence}%</span>
                         </div>
                       </div>
                     </div>
@@ -246,27 +236,27 @@ export function AIPredictiveAnalytics() {
         </TabsContent>
 
         <TabsContent value="anomaly" className="space-y-4">
-          <Card className="bg-slate-800 border-slate-700">
+          <Card className="dg-card">
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between">
-                <CardTitle className="text-slate-100 flex items-center gap-2">
-                  <AlertTriangle className="h-5 w-5 text-red-400" />
+                <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+                  <AlertTriangle className="h-5 w-5 dg-text-red" />
                   异常事件预测
                 </CardTitle>
-                <span className="text-xs text-slate-500">基于告警规则阈值与实时趋势概率推算</span>
+                <span className="text-xs dg-text-muted">基于告警规则阈值与实时趋势概率推算</span>
               </div>
             </CardHeader>
             <CardContent>
               {loading ? (
-                <div className="flex items-center justify-center py-12 text-slate-500">
+                <div className="flex items-center justify-center py-12 dg-text-muted">
                   <Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载异常预测...
                 </div>
               ) : dedupedAnomalies.length === 0 ? (
-                <div className="text-center py-12 text-slate-500">暂无异常预测数据</div>
+                <div className="text-center py-12 dg-text-muted">暂无异常预测数据</div>
               ) : (
                 <div className="space-y-3">
                   {dedupedAnomalies.map((anomaly, idx) => (
-                    <div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
+                    <div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
                       <div className="flex items-start justify-between">
                         <div className="flex items-start gap-3">
                           <div
@@ -281,21 +271,21 @@ export function AIPredictiveAnalytics() {
                             <AlertTriangle
                               className={`h-5 w-5 ${
                                 anomaly.probability >= 70
-                                  ? 'text-red-400'
+                                  ? 'dg-text-red'
                                   : anomaly.probability >= 50
-                                  ? 'text-amber-400'
-                                  : 'text-blue-400'
+                                  ? 'dg-text-yellow'
+                                  : 'dg-text-blue'
                               }`}
                             />
                           </div>
                           <div>
-                            <h4 className="font-medium text-slate-200">{anomaly.metric}</h4>
-                            <p className="text-sm text-slate-400 mt-1">{anomaly.predictedAnomaly}</p>
+                            <h4 className="font-medium text-[var(--dg-text-primary)]">{anomaly.metric}</h4>
+                            <p className="text-sm dg-text-secondary mt-1">{anomaly.predictedAnomaly}</p>
                             <div className="flex items-center gap-4 mt-2">
-                              <span className="text-xs text-slate-500">{anomaly.timeframe}</span>
-                              <span className="text-xs text-slate-500">
+                              <span className="text-xs dg-text-muted">{anomaly.timeframe}</span>
+                              <span className="text-xs dg-text-muted">
                                 概率:{' '}
-                                <span className={anomaly.probability >= 70 ? 'text-red-400' : 'text-amber-400'}>
+                                <span className={anomaly.probability >= 70 ? 'dg-text-red' : 'dg-text-yellow'}>
                                   {anomaly.probability}%
                                 </span>
                               </span>
@@ -311,7 +301,7 @@ export function AIPredictiveAnalytics() {
                               stroke="currentColor"
                               strokeWidth="4"
                               fill="transparent"
-                              className="text-slate-700"
+                              className="text-[var(--dg-text-muted)]"
                             />
                             <circle
                               cx="32"
@@ -323,24 +313,24 @@ export function AIPredictiveAnalytics() {
                               strokeDasharray={`${anomaly.probability * 1.76} 176`}
                               className={
                                 anomaly.probability >= 70
-                                  ? 'text-red-400'
+                                  ? 'dg-text-red'
                                   : anomaly.probability >= 50
-                                  ? 'text-amber-400'
-                                  : 'text-blue-400'
+                                  ? 'dg-text-yellow'
+                                  : 'dg-text-blue'
                               }
                             />
                           </svg>
                           <div className="absolute inset-0 flex items-center justify-center">
-                            <span className="text-sm font-bold text-slate-200">{anomaly.probability}%</span>
+                            <span className="text-sm font-bold text-[var(--dg-text-primary)]">{anomaly.probability}%</span>
                           </div>
                         </div>
                       </div>
-                      <div className="mt-3 p-3 bg-slate-900 rounded-lg border border-slate-700">
+                      <div className="mt-3 p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
                         <div className="flex items-start gap-2">
-                          <Zap className="h-4 w-4 text-emerald-400 mt-0.5" />
+                          <Zap className="h-4 w-4 dg-text-green mt-0.5" />
                           <div>
-                            <span className="text-sm text-slate-400">建议操作:</span>
-                            <p className="text-sm text-slate-300 mt-1">{anomaly.suggestedAction}</p>
+                            <span className="text-sm dg-text-secondary">建议操作:</span>
+                            <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{anomaly.suggestedAction}</p>
                           </div>
                         </div>
                       </div>
@@ -352,6 +342,6 @@ export function AIPredictiveAnalytics() {
           </Card>
         </TabsContent>
       </Tabs>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/aiops/AgentCLI.tsx b/frontend/src/components/aiops/AgentCLI.tsx
index 0764ffc..e541492 100644
--- a/frontend/src/components/aiops/AgentCLI.tsx
+++ b/frontend/src/components/aiops/AgentCLI.tsx
@@ -18,6 +18,7 @@ import {
 import AgentCLIHistory from './AgentCLIHistory';
 import { MessageView, type ChatItem } from './AgentCLIMessages';
 import type { AgentCliSession } from '@/api/aiops/agent-cli';
+import { PageShell } from '@/components/layout/PageShell';
 
 // WS 事件类型（后端 wsEvent 对应） // Logan.Li
 interface WsEvent {
@@ -42,11 +43,11 @@ interface WsEvent {
 const TIPS = [
   { icon: Cpu, title: 'LLM + 工具层（llm / tools）', color: 'text-sky-400',
     desc: 'OpenAI 兼容 LLM 客户端（复用「大模型设置」中的配置）；工具系统注册 ssh_execute（远程执行命令，复用 pkg/remoteexec）与 analyze_output（超长输出分析）。AI 借助工具真正动手操作服务器。' },
-  { icon: Shield, title: '安全 + Prompt（safety / prompt）', color: 'text-amber-400',
+  { icon: Shield, title: '安全 + Prompt（safety / prompt）', color: 'dg-text-yellow',
     desc: '五级风险评估 + 三级安全模式：危险命令（rm -rf /、mkfs）硬性拒绝，高危命令（reboot、restart）弹框确认；五层 System Prompt 定义角色、安全规则、工具与 ReAct 工作方式。' },
-  { icon: Brain, title: 'ReAct 核心引擎（core）', color: 'text-violet-400',
+  { icon: Brain, title: 'ReAct 核心引擎（core）', color: 'dg-text-purple',
     desc: '「思考→行动→观察」循环（最多 16 轮）：每轮调用工具、读取输出，失败则分析原因换法重试；自适应检查点 + 循环检测（同参超过 3 次拒绝），直到真正解决问题而非假装解决。' },
-  { icon: Database, title: '自进化引擎（evolver）', color: 'text-emerald-400',
+  { icon: Database, title: '自进化引擎（evolver）', color: 'dg-text-green',
     desc: '四层记忆（经验 / 环境 / 事实 / 程序）：任务完成后异步学习经验，下次同类任务自动注入历史经验，越用越聪明；学习失败优雅降级，绝不影响主流程。' },
 ];
 
@@ -267,8 +268,61 @@ export default function AgentCLI() {
     setTokens(0);
   };
 
+  const toolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <Server className="w-4 h-4 dg-text-secondary" />
+      <Select value={serverId} onValueChange={setServerId}>
+        <SelectTrigger className="w-56 dg-input">
+          <SelectValue placeholder="选择目标主机" />
+        </SelectTrigger>
+        <SelectContent className="dg-input max-h-72">
+          {servers.map((s) => (
+            <SelectItem key={s.id} value={String(s.id)}>
+              {s.hostname}（{s.ip}）
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Shield className="w-4 h-4 dg-text-secondary" />
+      <Select value={safetyMode} onValueChange={setSafetyMode}>
+        <SelectTrigger className="w-28 dg-input">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="dg-input">
+          {SAFETY_MODES.map((m) => (
+            <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {connected && (
+        <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5" />已连接
+        </Badge>
+      )}
+      {replayMode && (
+        <Badge className="bg-amber-500/15 dg-text-yellow border-amber-500/30">回放模式</Badge>
+      )}
+      {canContinue && !running && !replayMode && (
+        <Badge className="bg-violet-500/15 dg-text-purple border-violet-500/30">可追问</Badge>
+      )}
+      {running && (
+        <Badge className="bg-blue-500/15 dg-text-blue border-blue-500/30">
+          <Loader2 className="w-3 h-3 mr-1 animate-spin" />第 {round} 轮 · {tokens} tokens
+        </Badge>
+      )}
+    </div>
+  );
+
   return (
-    <div className="h-full flex gap-3 p-4">
+    <PageShell
+      variant="workspace"
+      title="Agent CLI"
+      subtitle="自然语言驱动 SSH 自主排障与部署"
+      icon={<Bot className="h-5 w-5" />}
+      toolbar={toolbar}
+      className="h-full"
+      contentClassName="h-full flex gap-3"
+    >
       <AgentCLIHistory
         serverId={serverId}
         onReplay={handleReplay}
@@ -277,73 +331,23 @@ export default function AgentCLI() {
       />
 
       <div className="flex-1 min-w-0 flex flex-col gap-3">
-        {/* 顶部工具栏 */}
-        <Card className="bg-slate-900/60 border-slate-800">
-          <CardContent className="p-3 flex items-center gap-3 flex-wrap">
-            <div className="flex items-center gap-2 text-slate-200 font-medium">
-              <Bot className="w-5 h-5 text-blue-400" /> Agent CLI
-            </div>
-            <div className="w-px h-6 bg-slate-700" />
-            <Server className="w-4 h-4 text-slate-400" />
-            <Select value={serverId} onValueChange={setServerId}>
-              <SelectTrigger className="w-56 bg-slate-800 border-slate-700 text-slate-200">
-                <SelectValue placeholder="选择目标主机" />
-              </SelectTrigger>
-              <SelectContent className="bg-slate-800 border-slate-700 max-h-72">
-                {servers.map((s) => (
-                  <SelectItem key={s.id} value={String(s.id)}>
-                    {s.hostname}（{s.ip}）
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Shield className="w-4 h-4 text-slate-400" />
-            <Select value={safetyMode} onValueChange={setSafetyMode}>
-              <SelectTrigger className="w-28 bg-slate-800 border-slate-700 text-slate-200">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent className="bg-slate-800 border-slate-700">
-                {SAFETY_MODES.map((m) => (
-                  <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {connected && (
-              <Badge className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">
-                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5" />已连接
-              </Badge>
-            )}
-            {replayMode && (
-              <Badge className="bg-amber-500/15 text-amber-400 border-amber-500/30">回放模式</Badge>
-            )}
-            {canContinue && !running && !replayMode && (
-              <Badge className="bg-violet-500/15 text-violet-400 border-violet-500/30">可追问</Badge>
-            )}
-            {running && (
-              <Badge className="bg-blue-500/15 text-blue-400 border-blue-500/30">
-                <Loader2 className="w-3 h-3 mr-1 animate-spin" />第 {round} 轮 · {tokens} tokens
-              </Badge>
-            )}
-          </CardContent>
-        </Card>
-
         {/* tips 面板 */}
-        <Card className="bg-slate-900/40 border-slate-800">
+        <Card className="dg-card">
           <CardHeader className="py-2 px-3 cursor-pointer select-none" onClick={() => setTipsOpen((v) => !v)}>
-            <div className="flex items-center gap-2 text-slate-300 text-sm">
+            <div className="flex items-center gap-2 text-[var(--dg-text-secondary)] text-sm">
               {tipsOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
-              <Lightbulb className="w-4 h-4 text-yellow-400" />
+              <Lightbulb className="w-4 h-4 dg-text-yellow" />
               <span className="font-medium">核心能力与设计思路</span>
             </div>
           </CardHeader>
           {tipsOpen && (
             <CardContent className="pt-2 grid grid-cols-1 md:grid-cols-2 gap-3">
               {TIPS.map((t) => (
-                <div key={t.title} className="flex gap-2.5 p-2.5 rounded-lg bg-slate-800/40 border border-slate-800">
+                <div key={t.title} className="flex gap-2.5 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)]">
                   <t.icon className={`w-5 h-5 mt-0.5 shrink-0 ${t.color}`} />
                   <div>
-                    <div className="text-sm font-medium text-slate-200">{t.title}</div>
-                    <div className="text-xs text-slate-400 leading-relaxed mt-0.5">{t.desc}</div>
+                    <div className="text-sm font-medium text-[var(--dg-text-primary)]">{t.title}</div>
+                    <div className="text-xs dg-text-secondary leading-relaxed mt-0.5">{t.desc}</div>
                   </div>
                 </div>
               ))}
@@ -352,21 +356,21 @@ export default function AgentCLI() {
         </Card>
 
         {/* 对话流 */}
-        <Card className="flex-1 min-h-0 bg-slate-900/40 border-slate-800 flex flex-col">
+        <Card className="flex-1 min-h-0 dg-card flex flex-col">
           <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-4 space-y-3">
             {items.length === 0 && (
-              <div className="h-full flex flex-col items-center justify-center text-slate-500 gap-3">
+              <div className="h-full flex flex-col items-center justify-center dg-text-muted gap-3">
                 <Terminal className="w-10 h-10 opacity-40" />
                 {!serverId ? (
                   <>
                     <div className="text-sm">请先选择一台目标主机</div>
                     {servers.length === 0 && (
-                      <div className="text-xs text-slate-600">暂无主机，请先前往「资产管理」添加服务器</div>
+                      <div className="text-xs dg-text-muted">暂无主机，请先前往「资产管理」添加服务器</div>
                     )}
                   </>
                 ) : !connected ? (
                   <>
-                    <Loader2 className="w-6 h-6 animate-spin text-blue-400" />
+                    <Loader2 className="w-6 h-6 animate-spin dg-text-blue" />
                     <div className="text-sm">正在连接主机...</div>
                   </>
                 ) : (
@@ -378,7 +382,7 @@ export default function AgentCLI() {
               <MessageView key={it.id} item={it} />
             ))}
           </div>
-          <div className="border-t border-slate-800 p-3 flex items-end gap-2">
+          <div className="border-t border-[var(--dg-border)] p-3 flex items-end gap-2">
             <textarea
               value={input}
               onChange={(e) => setInput(e.target.value)}
@@ -390,7 +394,7 @@ export default function AgentCLI() {
               }
               rows={1}
               disabled={replayMode}
-              className="flex-1 resize-none bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none focus:ring-1 focus:ring-blue-500 max-h-32 disabled:opacity-50"
+              className="flex-1 resize-none dg-input max-h-32 disabled:opacity-50"
             />
             {running ? (
               <Button variant="destructive" onClick={stop} className="bg-red-600 hover:bg-red-700">
@@ -404,6 +408,6 @@ export default function AgentCLI() {
           </div>
         </Card>
       </div>
-    </div>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/aiops/AgentCLIHistory.tsx b/frontend/src/components/aiops/AgentCLIHistory.tsx
index 29dbb6f..d99ae60 100644
--- a/frontend/src/components/aiops/AgentCLIHistory.tsx
+++ b/frontend/src/components/aiops/AgentCLIHistory.tsx
@@ -19,10 +19,10 @@ interface Props {
 // statusBadge 会话状态标签样式 // Logan.Li
 function statusBadge(status: string) {
   switch (status) {
-    case 'done': return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
-    case 'running': return 'bg-blue-500/15 text-blue-400 border-blue-500/30';
-    case 'aborted': return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
-    default: return 'bg-red-500/15 text-red-400 border-red-500/30';
+    case 'done': return 'bg-emerald-500/15 dg-text-green border-emerald-500/30';
+    case 'running': return 'bg-blue-500/15 dg-text-blue border-blue-500/30';
+    case 'aborted': return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
+    default: return 'bg-red-500/15 dg-text-red border-red-500/30';
   }
 }
 
@@ -89,21 +89,21 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
   };
 
   return (
-    <div className="w-72 shrink-0 flex flex-col bg-slate-900/60 border border-slate-800 rounded-lg overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-slate-800">
-        <History className="w-4 h-4 text-slate-400" />
-        <span className="text-sm font-medium text-slate-200 flex-1">历史任务</span>
+    <div className="w-72 shrink-0 flex flex-col bg-[var(--dg-bg-secondary)]/60 border border-[var(--dg-border)] rounded-lg overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-[var(--dg-border)]">
+        <History className="w-4 h-4 dg-text-secondary" />
+        <span className="text-sm font-medium text-[var(--dg-text-primary)] flex-1">历史任务</span>
         <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => { setActiveId(null); onNewTask(); }}>
           <Plus className="w-3.5 h-3.5 mr-1" />新建
         </Button>
       </div>
       <ScrollArea className="flex-1 min-h-0">
         {!serverId ? (
-          <div className="p-4 text-xs text-slate-500 text-center">选择主机后查看历史</div>
+          <div className="p-4 text-xs dg-text-muted text-center">选择主机后查看历史</div>
         ) : loading ? (
-          <div className="p-4 flex justify-center"><Loader2 className="w-5 h-5 animate-spin text-slate-500" /></div>
+          <div className="p-4 flex justify-center"><Loader2 className="w-5 h-5 animate-spin dg-text-muted" /></div>
         ) : sessions.length === 0 ? (
-          <div className="p-4 text-xs text-slate-500 text-center">暂无历史任务</div>
+          <div className="p-4 text-xs dg-text-muted text-center">暂无历史任务</div>
         ) : (
           <div className="p-1.5 space-y-1">
             {sessions.map((s) => (
@@ -112,13 +112,13 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
                 type="button"
                 onClick={() => handleReplay(s)}
                 className={`w-full text-left rounded-md px-2.5 py-2 transition-colors group ${
-                  activeId === s.id ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-slate-800/60 border border-transparent'
+                  activeId === s.id ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-[var(--dg-bg-hover)]/60 border border-transparent'
                 }`}
               >
                 <div className="flex items-start gap-1.5">
                   <div className="flex-1 min-w-0">
-                    <div className="text-xs text-slate-200 truncate">{s.title}</div>
-                    <div className="text-[10px] text-slate-500 mt-0.5">
+                    <div className="text-xs text-[var(--dg-text-primary)] truncate">{s.title}</div>
+                    <div className="text-[10px] dg-text-muted mt-0.5">
                       {s.rounds} 轮 · {s.total_tokens || 0} tokens
                     </div>
                   </div>
@@ -127,7 +127,7 @@ export default function AgentCLIHistory({ serverId, onReplay, onNewTask, refresh
                   </Badge>
                   <button
                     type="button"
-                    className="opacity-0 group-hover:opacity-100 p-0.5 text-slate-500 hover:text-red-400 shrink-0"
+                    className="opacity-0 group-hover:opacity-100 p-0.5 dg-text-muted hover:dg-text-red shrink-0"
                     onClick={(e) => handleDelete(e, s)}
                   >
                     <Trash2 className="w-3.5 h-3.5" />
diff --git a/frontend/src/components/aiops/AgentCLIMessages.tsx b/frontend/src/components/aiops/AgentCLIMessages.tsx
index 5cdbe94..689c7c0 100644
--- a/frontend/src/components/aiops/AgentCLIMessages.tsx
+++ b/frontend/src/components/aiops/AgentCLIMessages.tsx
@@ -26,12 +26,12 @@ export interface ChatItem {
 // riskClass 风险等级对应 badge 颜色 // Logan.Li
 export function riskClass(risk?: string): string {
   switch ((risk || '').toLowerCase()) {
-    case '安全': case 'safe': return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
+    case '安全': case 'safe': return 'bg-emerald-500/15 dg-text-green border-emerald-500/30';
     case '低风险': case 'low': return 'bg-sky-500/15 text-sky-400 border-sky-500/30';
-    case '中风险': case 'medium': return 'bg-amber-500/15 text-amber-400 border-amber-500/30';
-    case '高风险': case 'high': return 'bg-orange-500/15 text-orange-400 border-orange-500/30';
-    case '危险': case 'critical': return 'bg-red-500/15 text-red-400 border-red-500/30';
-    default: return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
+    case '中风险': case 'medium': return 'bg-amber-500/15 dg-text-yellow border-amber-500/30';
+    case '高风险': case 'high': return 'bg-orange-500/15 dg-text-orange border-orange-500/30';
+    case '危险': case 'critical': return 'bg-red-500/15 dg-text-red border-red-500/30';
+    default: return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
   }
 }
 
@@ -99,7 +99,7 @@ export function MessageView({ item }: { item: ChatItem }) {
     );
   }
   if (item.kind === 'info') {
-    return <div className="text-center text-xs text-slate-500 py-1">{item.content}</div>;
+    return <div className="text-center text-xs dg-text-muted py-1">{item.content}</div>;
   }
   if (item.kind === 'thought') {
     return <ThoughtBlock text={item.content || ''} round={item.round} streaming={item.streaming} />;
@@ -110,14 +110,14 @@ export function MessageView({ item }: { item: ChatItem }) {
   if (item.kind === 'done') {
     return (
       <div className="flex gap-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 p-3">
-        <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
+        <CheckCircle2 className="w-5 h-5 dg-text-green shrink-0 mt-0.5" />
         <div className="text-sm text-emerald-100 whitespace-pre-wrap leading-relaxed">{item.content}</div>
       </div>
     );
   }
   return (
     <div className="flex gap-2 rounded-lg bg-red-500/10 border border-red-500/30 p-3">
-      <AlertTriangle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
+      <AlertTriangle className="w-5 h-5 dg-text-red shrink-0 mt-0.5" />
       <div className="text-sm text-red-100 whitespace-pre-wrap">{item.content}</div>
     </div>
   );
@@ -128,15 +128,15 @@ function ThoughtBlock({ text, round, streaming }: { text: string; round?: number
   const [open, setOpen] = useState(streaming || false);
   const preview = text.length > 80 ? text.slice(0, 80) + '...' : text;
   return (
-    <div className="rounded-lg bg-slate-800/40 border border-slate-800 p-2.5">
-      <button className="flex items-center gap-1.5 text-xs text-slate-400 w-full text-left" onClick={() => setOpen((v) => !v)}>
+    <div className="rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)] p-2.5">
+      <button className="flex items-center gap-1.5 text-xs dg-text-secondary w-full text-left" onClick={() => setOpen((v) => !v)}>
         {open ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
-        <Brain className="w-3.5 h-3.5 text-violet-400" />
-        {round != null && <span className="text-slate-500">第 {round} 轮思考</span>}
-        {streaming && <Loader2 className="w-3 h-3 text-violet-400 animate-spin" />}
-        <span className="ml-1 text-slate-500 truncate">{!open && preview}</span>
+        <Brain className="w-3.5 h-3.5 dg-text-purple" />
+        {round != null && <span className="dg-text-muted">第 {round} 轮思考</span>}
+        {streaming && <Loader2 className="w-3 h-3 dg-text-purple animate-spin" />}
+        <span className="ml-1 dg-text-muted truncate">{!open && preview}</span>
       </button>
-      {open && <div className="mt-1.5 text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{text}</div>}
+      {open && <div className="mt-1.5 text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed">{text}</div>}
     </div>
   );
 }
@@ -145,31 +145,31 @@ function ThoughtBlock({ text, round, streaming }: { text: string; round?: number
 function ToolBlock({ item }: { item: ChatItem }) {
   const [open, setOpen] = useState(true);
   return (
-    <div className="rounded-lg bg-slate-800/40 border border-slate-800 overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2 bg-slate-800/60">
+    <div className="rounded-lg bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)] overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-[var(--dg-bg-tertiary)]/60">
         <button className="flex items-center gap-1.5 flex-1 min-w-0 text-left" onClick={() => setOpen((v) => !v)}>
-          {open ? <ChevronDown className="w-3.5 h-3.5 text-slate-400" /> : <ChevronRight className="w-3.5 h-3.5 text-slate-400" />}
+          {open ? <ChevronDown className="w-3.5 h-3.5 dg-text-secondary" /> : <ChevronRight className="w-3.5 h-3.5 dg-text-secondary" />}
           <Terminal className="w-3.5 h-3.5 text-sky-400 shrink-0" />
-          <span className="text-xs text-slate-400 shrink-0">{item.toolName}</span>
-          {item.round != null && <span className="text-xs text-slate-600">· R{item.round}</span>}
+          <span className="text-xs dg-text-secondary shrink-0">{item.toolName}</span>
+          {item.round != null && <span className="text-xs dg-text-muted">· R{item.round}</span>}
         </button>
         {item.risk && <Badge className={`text-[10px] border ${riskClass(item.risk)}`}>{item.risk}</Badge>}
-        {item.pending && <Loader2 className="w-3.5 h-3.5 text-blue-400 animate-spin" />}
+        {item.pending && <Loader2 className="w-3.5 h-3.5 dg-text-blue animate-spin" />}
         {!item.pending && item.success != null && (
           item.success
-            ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
-            : <AlertTriangle className="w-3.5 h-3.5 text-red-400" />
+            ? <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" />
+            : <AlertTriangle className="w-3.5 h-3.5 dg-text-red" />
         )}
       </div>
       {open && (
         <div className="px-3 py-2 space-y-2">
           {item.command && (
-            <pre className="text-xs text-emerald-300 bg-slate-950/60 rounded px-2 py-1.5 overflow-x-auto"><code>$ {item.command}</code></pre>
+            <pre className="text-xs dg-text-green bg-[var(--dg-bg-primary)]/60 rounded px-2 py-1.5 overflow-x-auto"><code>$ {item.command}</code></pre>
           )}
           {!item.pending && item.output != null && (
             <>
-              {item.duration && <div className="text-[10px] text-slate-600">耗时 {item.duration}</div>}
-              <pre className="text-xs text-slate-300 bg-slate-950/40 rounded px-2 py-1.5 overflow-x-auto max-h-80 whitespace-pre-wrap">{item.output || '（无输出）'}</pre>
+              {item.duration && <div className="text-[10px] dg-text-muted">耗时 {item.duration}</div>}
+              <pre className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-primary)]/40 rounded px-2 py-1.5 overflow-x-auto max-h-80 whitespace-pre-wrap">{item.output || '（无输出）'}</pre>
             </>
           )}
         </div>
diff --git a/frontend/src/components/aiops/AutoFixDialog.tsx b/frontend/src/components/aiops/AutoFixDialog.tsx
index acdc6a4..05654af 100644
--- a/frontend/src/components/aiops/AutoFixDialog.tsx
+++ b/frontend/src/components/aiops/AutoFixDialog.tsx
@@ -29,37 +29,37 @@ export function AutoFixDialog({ open, onOpenChange, script }: AutoFixDialogProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
+      <DialogContent className="max-w-2xl bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Terminal className="h-5 w-5 text-purple-400" />
+            <Terminal className="h-5 w-5 dg-text-purple" />
             自动修复脚本
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             AI生成的自动修复脚本，请确认后执行
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-4">
-          <div className="p-4 bg-slate-950 rounded-lg border border-slate-700">
+          <div className="p-4 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
             <div className="flex items-center justify-between mb-2">
-              <span className="text-sm text-slate-400">修复脚本</span>
-              <Button variant="ghost" size="sm" onClick={copyScript} className="text-slate-400">
+              <span className="text-sm dg-text-secondary">修复脚本</span>
+              <Button variant="ghost" size="sm" onClick={copyScript} className="dg-text-secondary">
                 {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
               </Button>
             </div>
-            <pre className="text-sm text-slate-300 overflow-x-auto whitespace-pre-wrap">
+            <pre className="text-sm text-[var(--dg-text-secondary)] overflow-x-auto whitespace-pre-wrap">
               {script}
             </pre>
           </div>
           <div className="flex items-center gap-2 p-3 bg-amber-500/10 rounded-lg border border-amber-500/30">
-            <AlertTriangle className="h-4 w-4 text-amber-400" />
-            <span className="text-sm text-amber-400">
+            <AlertTriangle className="h-4 w-4 dg-text-yellow" />
+            <span className="text-sm dg-text-yellow">
               警告：执行脚本前请确保已备份重要数据
             </span>
           </div>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" className="flex-1 border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" className="flex-1 dg-btn-secondary" onClick={() => onOpenChange(false)}>
             取消
           </Button>
           <Button className="flex-1 bg-purple-600 hover:bg-purple-700" onClick={() => onOpenChange(false)}>
diff --git a/frontend/src/components/aiops/LLMConfig.tsx b/frontend/src/components/aiops/LLMConfig.tsx
index 82a3774..0211a49 100644
--- a/frontend/src/components/aiops/LLMConfig.tsx
+++ b/frontend/src/components/aiops/LLMConfig.tsx
@@ -14,6 +14,7 @@ import {
   Loader2, Save, Wifi, KeyRound, Brain, Sparkles, MessageSquare, AlertCircle,
 } from 'lucide-react';
 import { aiApi, type LLMConfigData, type LLMTestResult } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
 
 // 单个提供商配置：默认 endpoint 与候选模型列表（第一个为推荐/最新模型） // Logan.Li
 interface ProviderMeta {
@@ -133,45 +134,44 @@ export default function LLMConfigPage() {
   };
   const set = <K extends keyof LLMConfigData>(k: K, v: LLMConfigData[K]) => setCfg({ ...cfg, [k]: v });
 
-  if (loading) {
-    return <div className="flex items-center justify-center h-full text-slate-400"><Loader2 className="w-5 h-5 animate-spin mr-2" />加载配置...</div>;
-  }
   const prov = PROVIDERS.find((x) => x.id === cfg.provider);
   const models = prov?.models ?? [];
   const isCustom = cfg.provider === 'custom';
 
   return (
-    <div className="max-w-3xl mx-auto p-4 space-y-4">
-      <div className="flex items-center gap-2 text-slate-200">
-        <Brain className="w-5 h-5 text-blue-400" />
-        <span className="text-lg font-medium">大模型设置</span>
-        <span className="text-xs text-slate-500">— Agent CLI 与智能助手共用此配置</span>
-      </div>
-
-      <Card className="bg-slate-900/60 border-slate-800">
-        <CardHeader><CardTitle className="text-slate-200 text-base">模型与凭证</CardTitle></CardHeader>
+    <PageShell
+      variant="config"
+      maxWidth="3xl"
+      title="大模型设置"
+      subtitle="Agent CLI 与智能助手共用此配置"
+      icon={<Brain className="h-5 w-5" />}
+      loading={loading}
+      loadingLabel="加载配置..."
+    >
+      <Card className="dg-card">
+        <CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base">模型与凭证</CardTitle></CardHeader>
         <CardContent className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-1.5">
-              <Label className="text-slate-300">提供商</Label>
+              <Label className="text-[var(--dg-text-secondary)]">提供商</Label>
               <Select value={cfg.provider} onValueChange={onProvider}>
-                <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200"><SelectValue /></SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
+                <SelectContent className="dg-input">
                   {PROVIDERS.map((p) => <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>)}
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-300">模型</Label>
+              <Label className="text-[var(--dg-text-secondary)]">模型</Label>
               {isCustom || modelMode === 'input' ? (
                 <Input value={cfg.model} onChange={(e) => set('model', e.target.value)}
-                  placeholder={isCustom ? '自定义模型名' : '手动输入模型名'} className="bg-slate-800 border-slate-700 text-slate-200" />
+                  placeholder={isCustom ? '自定义模型名' : '手动输入模型名'} className="dg-input" />
               ) : (
                 <Select value={cfg.model} onValueChange={onModel}>
-                  <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200">
+                  <SelectTrigger className="dg-input">
                     <SelectValue placeholder="选择模型" />
                   </SelectTrigger>
-                  <SelectContent className="bg-slate-800 border-slate-700">
+                  <SelectContent className="dg-input">
                     {models.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
                     <SelectItem value="__manual">手动输入</SelectItem>
                   </SelectContent>
@@ -180,25 +180,25 @@ export default function LLMConfigPage() {
             </div>
           </div>
           <div className="space-y-1.5">
-            <Label className="text-slate-300 flex items-center gap-1"><KeyRound className="w-3.5 h-3.5" />API Key</Label>
+            <Label className="text-[var(--dg-text-secondary)] flex items-center gap-1"><KeyRound className="w-3.5 h-3.5" />API Key</Label>
             <Input type="password" value={cfg.api_key} onChange={(e) => set('api_key', e.target.value)}
-              placeholder="sk-..." className="bg-slate-800 border-slate-700 text-slate-200" />
+              placeholder="sk-..." className="dg-input" />
           </div>
           <div className="space-y-1.5">
-            <Label className="text-slate-300">接口地址（Endpoint）</Label>
+            <Label className="text-[var(--dg-text-secondary)]">接口地址（Endpoint）</Label>
             <Input value={cfg.endpoint} onChange={(e) => set('endpoint', e.target.value)}
-              placeholder="https://api.xxx.com/v1" className="bg-slate-800 border-slate-700 text-slate-200" />
+              placeholder="https://api.xxx.com/v1" className="dg-input" />
           </div>
         </CardContent>
       </Card>
 
-      <Card className="bg-slate-900/60 border-slate-800">
-        <CardHeader><CardTitle className="text-slate-200 text-base flex items-center gap-2"><Sparkles className="w-4 h-4 text-amber-400" />推理 / Plan 模式</CardTitle></CardHeader>
+      <Card className="dg-card">
+        <CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base flex items-center gap-2"><Sparkles className="w-4 h-4 text-[var(--dg-orange)]" />推理 / Plan 模式</CardTitle></CardHeader>
         <CardContent className="space-y-3">
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
-              <div className="text-sm text-slate-300">启用推理模式</div>
-              <div className="text-xs text-slate-500">
+              <div className="text-sm text-[var(--dg-text-secondary)]">启用推理模式</div>
+              <div className="text-xs dg-text-muted">
                 适用于 OpenAI o-series / DeepSeek R1 / Claude 3.7 Sonnet 等推理模型；普通模型开启后可能报错。
               </div>
             </div>
@@ -208,44 +208,44 @@ export default function LLMConfigPage() {
       </Card>
 
       <div className="flex flex-wrap items-center gap-3">
-        <div className="flex items-center gap-2 text-sm text-slate-300">
+        <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
           <Switch checked={cfg.enabled} onCheckedChange={(v) => set('enabled', v)} />
           <span>启用 LLM 服务</span>
         </div>
-        <Button onClick={save} disabled={saving} className="bg-blue-600 hover:bg-blue-700">
+        <Button onClick={save} disabled={saving} className="dg-btn-primary">
           {saving ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Save className="w-4 h-4 mr-1" />} 保存配置
         </Button>
         <Button variant="outline" onClick={test} disabled={testing || !cfg.enabled}
-          className="border-slate-700 text-slate-300">
+          className="dg-btn-secondary">
           {testing ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Wifi className="w-4 h-4 mr-1" />} 测试连接
         </Button>
-        {!cfg.enabled && <span className="text-xs text-slate-500">请先保存并启用后再测试</span>}
+        {!cfg.enabled && <span className="text-xs dg-text-muted">请先保存并启用后再测试</span>}
       </div>
 
       {testResult && (
-        <Card className="bg-slate-900/60 border-slate-800">
+        <Card className="dg-card">
           <CardHeader>
-            <CardTitle className="text-slate-200 text-base flex items-center gap-2">
-              <MessageSquare className="w-4 h-4 text-green-400" />
+            <CardTitle className="text-[var(--dg-text-primary)] text-base flex items-center gap-2">
+              <MessageSquare className="w-4 h-4 text-[var(--dg-green)]" />
               测试结果
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-3">
-            <div className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{testResult.answer || '（模型未返回内容）'}</div>
-            <div className="flex flex-wrap gap-3 text-xs text-slate-500">
-              <span className="bg-slate-800 px-2 py-1 rounded">模型: {testResult.model || '未知'}</span>
-              <span className="bg-slate-800 px-2 py-1 rounded">提供商: {testResult.provider}</span>
-              <span className="bg-slate-800 px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span>
-              {testResult.reasoning_enabled && <span className="bg-amber-900/40 text-amber-400 px-2 py-1 rounded">推理模式已开启</span>}
+            <div className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed">{testResult.answer || '（模型未返回内容）'}</div>
+            <div className="flex flex-wrap gap-3 text-xs dg-text-muted">
+              <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">模型: {testResult.model || '未知'}</span>
+              <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">提供商: {testResult.provider}</span>
+              <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span>
+              {testResult.reasoning_enabled && <span className="bg-amber-900/40 dg-text-yellow px-2 py-1 rounded">推理模式已开启</span>}
             </div>
           </CardContent>
         </Card>
       )}
 
-      <div className="flex items-start gap-2 text-xs text-slate-500">
+      <div className="flex items-start gap-2 text-xs dg-text-muted">
         <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
         <span>测试时会向当前模型发送「你是什么模型？请简短回答。」，并在页面上方展示模型返回内容，用于确认接入的是目标模型。</span>
       </div>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/aiops/PredictiveCapacityTab.tsx b/frontend/src/components/aiops/PredictiveCapacityTab.tsx
index 1fc8288..51cb321 100644
--- a/frontend/src/components/aiops/PredictiveCapacityTab.tsx
+++ b/frontend/src/components/aiops/PredictiveCapacityTab.tsx
@@ -34,11 +34,11 @@ export function PredictiveCapacityTab({
   };
 
   return (
-    <Card className="bg-slate-800 border-slate-700">
+    <Card className="dg-card">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-slate-100 flex items-center gap-2">
-            <HardDrive className="h-5 w-5 text-amber-400" />
+          <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <HardDrive className="h-5 w-5 dg-text-yellow" />
             容量规划预警
           </CardTitle>
           {!loading && forecasts.length > 0 && (
@@ -61,38 +61,38 @@ export function PredictiveCapacityTab({
       </CardHeader>
       <CardContent>
         {loading ? (
-          <div className="flex items-center justify-center py-12 text-slate-500">
+          <div className="flex items-center justify-center py-12 dg-text-muted">
             <Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载容量数据...
           </div>
         ) : forecasts.length === 0 ? (
-          <div className="text-center py-12 text-slate-500">暂无容量数据</div>
+          <div className="text-center py-12 dg-text-muted">暂无容量数据</div>
         ) : (
           <div className="space-y-4">
             {/* AI 深度解读结果（点击按钮后展示） */}
             {insight && (
               <div className="p-4 rounded-lg border border-purple-500/30 bg-purple-500/5">
                 <div className="flex items-center gap-2 mb-2">
-                  <Sparkles className="h-4 w-4 text-purple-400" />
+                  <Sparkles className="h-4 w-4 dg-text-purple" />
                   <span className="text-sm font-medium text-purple-300">AI 深度解读</span>
                 </div>
-                <p className="text-sm text-slate-300 whitespace-pre-wrap break-words">{insight}</p>
+                <p className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap break-words">{insight}</p>
               </div>
             )}
             {forecasts.map((forecast, idx) => (
-              <div key={idx} className="p-4 rounded-lg border border-slate-700 bg-slate-800/50">
+              <div key={idx} className="p-4 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50">
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center gap-2">
-                    <Database className="h-5 w-5 text-blue-400" />
-                    <span className="font-medium text-slate-200">{forecast.resource}</span>
+                    <Database className="h-5 w-5 dg-text-blue" />
+                    <span className="font-medium text-[var(--dg-text-primary)]">{forecast.resource}</span>
                   </div>
                   <Badge
                     variant="outline"
                     className={
                       forecast.daysUntilThreshold <= 7
-                        ? 'border-red-500/30 text-red-400 bg-red-500/10'
+                        ? 'border-red-500/30 dg-text-red bg-red-500/10'
                         : forecast.daysUntilThreshold <= 14
-                        ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
-                        : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                        ? 'border-amber-500/30 dg-text-yellow bg-amber-500/10'
+                        : 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
                     }
                   >
                     {forecast.daysUntilThreshold <= 7
@@ -105,20 +105,20 @@ export function PredictiveCapacityTab({
 
                 <div className="mb-4">
                   <div className="flex items-center justify-between text-sm mb-1">
-                    <span className="text-slate-400">7天使用率预测</span>
-                    <span className="text-slate-400">
+                    <span className="dg-text-secondary">7天使用率预测</span>
+                    <span className="dg-text-secondary">
                       {forecast.daysUntilThreshold >= 999 ? (
                         '增长平缓，暂无触顶风险'
                       ) : (
                         <>
                           预计{' '}
-                          <span className="text-amber-400 font-medium">{forecast.daysUntilThreshold}天</span>{' '}
+                          <span className="dg-text-yellow font-medium">{forecast.daysUntilThreshold}天</span>{' '}
                           后达到阈值
                         </>
                       )}
                     </span>
                   </div>
-                  <div className="h-3 bg-slate-700 rounded-full overflow-hidden">
+                  <div className="h-3 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
                     <div className="flex h-full">
                       <div className="bg-blue-500" style={{ width: `${forecast.currentUsage}%` }} />
                       <div
@@ -130,18 +130,18 @@ export function PredictiveCapacityTab({
                     </div>
                   </div>
                   <div className="flex items-center justify-between text-xs mt-1">
-                    <span className="text-slate-500">当前 {forecast.currentUsage}%</span>
-                    <span className="text-amber-400">预测 {forecast.predictedUsage}%</span>
-                    <span className="text-red-400">阈值 {forecast.threshold}%</span>
+                    <span className="dg-text-muted">当前 {forecast.currentUsage}%</span>
+                    <span className="dg-text-yellow">预测 {forecast.predictedUsage}%</span>
+                    <span className="dg-text-red">阈值 {forecast.threshold}%</span>
                   </div>
                 </div>
 
-                <div className="p-3 bg-slate-900 rounded-lg border border-slate-700">
+                <div className="p-3 bg-[var(--dg-bg-secondary)] rounded-lg border border-[var(--dg-border)]">
                   <div className="flex items-start gap-2">
-                    <Zap className="h-4 w-4 text-emerald-400 mt-0.5" />
+                    <Zap className="h-4 w-4 dg-text-green mt-0.5" />
                     <div>
-                      <span className="text-sm text-slate-400">AI建议:</span>
-                      <p className="text-sm text-slate-300 mt-1">{forecast.recommendation}</p>
+                      <span className="text-sm dg-text-secondary">AI建议:</span>
+                      <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{forecast.recommendation}</p>
                     </div>
                   </div>
                 </div>
diff --git a/frontend/src/components/aiops/analyzerHelpers.ts b/frontend/src/components/aiops/analyzerHelpers.ts
index 90e1ace..ccce868 100644
--- a/frontend/src/components/aiops/analyzerHelpers.ts
+++ b/frontend/src/components/aiops/analyzerHelpers.ts
@@ -186,10 +186,10 @@ export function mapAlertEvent(event: JsonData): AlertItem {
 export function getSeverityColor(severity: string): string {
   switch (severity) {
     case 'critical':
-      return 'bg-red-500/10 text-red-400 border-red-500/30';
+      return 'bg-red-500/10 dg-text-red border-red-500/30';
     case 'warning':
-      return 'bg-amber-500/10 text-amber-400 border-amber-500/30';
+      return 'bg-amber-500/10 dg-text-yellow border-amber-500/30';
     default:
-      return 'bg-blue-500/10 text-blue-400 border-blue-500/30';
+      return 'bg-blue-500/10 dg-text-blue border-blue-500/30';
   }
 }
diff --git a/frontend/src/components/aiops/predictUtils.ts b/frontend/src/components/aiops/predictUtils.ts
index deb98a2..d1dbcc6 100644
--- a/frontend/src/components/aiops/predictUtils.ts
+++ b/frontend/src/components/aiops/predictUtils.ts
@@ -312,11 +312,11 @@ export function computePredictions(input: ComputePredictionsInput): ComputedPred
 export function trendColorClass(trend: string): string {
   switch (trend) {
     case 'up':
-      return 'text-red-400';
+      return 'dg-text-red';
     case 'down':
-      return 'text-emerald-400';
+      return 'dg-text-green';
     default:
-      return 'text-slate-400';
+      return 'dg-text-secondary';
   }
 }
 
diff --git a/frontend/src/components/approval/ApprovalCreateDialog.tsx b/frontend/src/components/approval/ApprovalCreateDialog.tsx
index 164e57a..456b94e 100644
--- a/frontend/src/components/approval/ApprovalCreateDialog.tsx
+++ b/frontend/src/components/approval/ApprovalCreateDialog.tsx
@@ -152,7 +152,7 @@ export function ApprovalCreateDialog({
                   <div key={field.key} className={cn('space-y-1.5', isTextarea && 'col-span-2')}>
                     <Label className="text-sm font-medium text-[var(--dg-text-secondary)]">
                       {field.label}
-                      {field.required && <span className="text-red-400 ml-0.5">*</span>}
+                      {field.required && <span className="dg-text-red ml-0.5">*</span>}
                     </Label>
                     {field.type === 'select' ? (
                       <Select
diff --git a/frontend/src/components/approval/ApprovalDetailDialog.tsx b/frontend/src/components/approval/ApprovalDetailDialog.tsx
index 63f4824..21fa2a5 100644
--- a/frontend/src/components/approval/ApprovalDetailDialog.tsx
+++ b/frontend/src/components/approval/ApprovalDetailDialog.tsx
@@ -97,9 +97,9 @@ export function ApprovalDetailDialog({
                 {instance.actions.map((action: JsonData, index: number) => (
                   <div key={index} className="flex items-center gap-3 text-sm">
                     {action.action === 'approve' ? (
-                      <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                      <CheckCircle2 className="h-4 w-4 dg-text-green" />
                     ) : action.action === 'reject' ? (
-                      <XCircle className="h-4 w-4 text-red-400" />
+                      <XCircle className="h-4 w-4 dg-text-red" />
                     ) : (
                       <Clock className="h-4 w-4 text-[var(--dg-text-muted)]" />
                     )}
@@ -127,7 +127,7 @@ export function ApprovalDetailDialog({
         <DialogFooter>
           {instance.status === 'pending' && (
             <>
-              <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => { onOpenChange(false); onReject(instance); }}>
+              <Button variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => { onOpenChange(false); onReject(instance); }}>
                 <XCircle className="h-4 w-4 mr-2" />{t('common.reject')}
               </Button>
               <Button className="bg-emerald-500/90 hover:bg-emerald-500 text-white" onClick={() => { onOpenChange(false); onApprove(instance); }}>
diff --git a/frontend/src/components/approval/ApprovalFlow.tsx b/frontend/src/components/approval/ApprovalFlow.tsx
index 342bf7e..05cd1e0 100644
--- a/frontend/src/components/approval/ApprovalFlow.tsx
+++ b/frontend/src/components/approval/ApprovalFlow.tsx
@@ -4,6 +4,9 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Textarea } from '@/components/ui/textarea';
+import { StatStrip } from '@/components/ui/stat-strip';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import {
   Dialog,
   DialogContent,
@@ -17,7 +20,6 @@ import {
   CheckCircle2,
   XCircle,
   Loader2,
-  Clock,
   Plus,
 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -138,105 +140,40 @@ export function ApprovalFlow() {
   const rejectedCount = processes.filter((p) => p.status === 'rejected').length;
   const myPendingCount = myApprovals.filter((m) => m.status === 'pending').length;
 
+  // 页面级 Tab 配置 // Logan.Li
+  const pageTabs = [
+    { id: 'instances', label: t('approval.flow.tabInstances') },
+    { id: 'flows', label: t('approval.flow.tabTemplates') },
+    { id: 'my-approvals', label: t('approval.flow.tabMyApprovals'), badge: myPendingCount > 0 ? myPendingCount : undefined },
+  ];
+
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('approval.flow.title')}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">{t('approval.flow.subtitle')}</p>
-        </div>
-        <Button
-          className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
-          onClick={() => setCreateOpen(true)}
-        >
-          <Plus className="h-4 w-4 mr-2" />
-          {t('approval.newRequest')}
-        </Button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.flow.pendingApproval')}</p>
-                <p className="text-2xl font-bold text-amber-400">{pendingCount}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
-                <Clock className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.status.approved')}</p>
-                <p className="text-2xl font-bold text-emerald-400">{approvedCount}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
-                <CheckCircle2 className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.status.rejected')}</p>
-                <p className="text-2xl font-bold text-red-400">{rejectedCount}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
-                <XCircle className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.flow.myTodo')}</p>
-                <p className="text-2xl font-bold text-[var(--dg-blue)]">{myPendingCount}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
-                <FileText className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Tab Bar */}
-      <div className="flex items-center gap-1 border-b border-[var(--dg-border)]">
-        {([
-          { key: 'instances', label: t('approval.flow.tabInstances') },
-          { key: 'flows', label: t('approval.flow.tabTemplates') },
-          { key: 'my-approvals', label: t('approval.flow.tabMyApprovals') },
-        ] as const).map((tab) => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
-            className={cn(
-              'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
-              activeTab === tab.key
-                ? 'border-[var(--dg-blue)] text-[var(--dg-blue)]'
-                : 'border-transparent text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-            )}
-          >
-            {tab.label}
-            {tab.key === 'my-approvals' && myPendingCount > 0 && (
-              <Badge className="ml-2 bg-red-500/20 text-red-400 border-0 text-xs">{myPendingCount}</Badge>
-            )}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab Content */}
+    <>
+      <PageShell
+        variant="list"
+        title={t('approval.flow.title')}
+        subtitle={t('approval.flow.subtitle')}
+        icon={<FileText className="h-5 w-5" />}
+        metrics={(
+          <StatStrip
+            items={[
+              { label: t('approval.flow.pendingApproval'), value: pendingCount, color: 'amber' },
+              { label: t('approval.status.approved'), value: approvedCount, color: 'emerald' },
+              { label: t('approval.status.rejected'), value: rejectedCount, color: 'red' },
+              { label: t('approval.flow.myTodo'), value: myPendingCount, color: 'blue' },
+            ]}
+          />
+        )}
+        tabs={pageTabs}
+        activeTab={activeTab}
+        onTabChange={(id) => setActiveTab(id as typeof activeTab)}
+        actions={(
+          <Button className="dg-btn-primary" onClick={() => setCreateOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            {t('approval.newRequest')}
+          </Button>
+        )}
+      >
       {activeTab === 'instances' && (
         <ApprovalProcessTab
           processes={processes}
@@ -263,15 +200,11 @@ export function ApprovalFlow() {
       {activeTab === 'my-approvals' && (
         <div className="grid grid-cols-1 gap-4">
           {myApprovals.length === 0 ? (
-            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-              <CardContent className="p-12">
-                <div className="text-center">
-                  <FileText className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
-                  <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">{t('approval.noTodo')}</h3>
-                  <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.noTodoDesc')}</p>
-                </div>
-              </CardContent>
-            </Card>
+            <PageEmpty
+              icon={<FileText className="h-12 w-12" />}
+              title={t('approval.noTodo')}
+              description={t('approval.noTodoDesc')}
+            />
           ) : (
             myApprovals.map((instance) => {
               const { percentage } = getProgressInfo(instance);
@@ -305,10 +238,10 @@ export function ApprovalFlow() {
                         </Button>
                         {instance.status === 'pending' && (
                           <>
-                            <Button variant="outline" size="sm" className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
+                            <Button variant="outline" size="sm" className="border-emerald-500/30 dg-text-green hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
                               <CheckCircle2 className="h-4 w-4 mr-1" />{t('common.approve')}
                             </Button>
-                            <Button variant="outline" size="sm" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
+                            <Button variant="outline" size="sm" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
                               <XCircle className="h-4 w-4 mr-1" />{t('common.reject')}
                             </Button>
                           </>
@@ -334,6 +267,7 @@ export function ApprovalFlow() {
           )}
         </div>
       )}
+      </PageShell>
 
       {/* 详情弹窗 — 提取到 ApprovalDetailDialog */}
       <ApprovalDetailDialog
@@ -352,12 +286,12 @@ export function ApprovalFlow() {
             <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
               {actionType === 'approve' ? (
                 <>
-                  <CheckCircle2 className="h-5 w-5 text-emerald-400" />
+                  <CheckCircle2 className="h-5 w-5 dg-text-green" />
                   {t('approval.flow.approveConfirm')}
                 </>
               ) : (
                 <>
-                  <XCircle className="h-5 w-5 text-red-400" />
+                  <XCircle className="h-5 w-5 dg-text-red" />
                   {t('approval.flow.rejectConfirm')}
                 </>
               )}
@@ -407,7 +341,7 @@ export function ApprovalFlow() {
         templates={templates}
         onSuccess={loadData}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/frontend/src/components/approval/ApprovalProcessTab.tsx b/frontend/src/components/approval/ApprovalProcessTab.tsx
index 2eb2460..85893ed 100644
--- a/frontend/src/components/approval/ApprovalProcessTab.tsx
+++ b/frontend/src/components/approval/ApprovalProcessTab.tsx
@@ -37,17 +37,17 @@ function getStatusBadge(status: string) {
   const statusMap: Record<string, { labelKey: string; className: string; dot: string }> = {
     pending: {
       labelKey: 'approval.status.pending',
-      className: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
+      className: 'border-amber-500/30 dg-text-yellow bg-amber-500/10',
       dot: 'bg-amber-400',
     },
     approved: {
       labelKey: 'approval.status.approved',
-      className: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
+      className: 'border-emerald-500/30 dg-text-green bg-emerald-500/10',
       dot: 'bg-emerald-400',
     },
     rejected: {
       labelKey: 'approval.status.rejected',
-      className: 'border-red-500/30 text-red-400 bg-red-500/10',
+      className: 'border-red-500/30 dg-text-red bg-red-500/10',
       dot: 'bg-red-400',
     },
     processing: {
@@ -186,7 +186,7 @@ export function ApprovalProcessTab({
                           <Button
                             variant="outline"
                             size="sm"
-                            className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10"
+                            className="border-emerald-500/30 dg-text-green hover:bg-emerald-500/10"
                             onClick={() => onApprove(instance)}
                           >
                             <CheckCircle2 className="h-4 w-4 mr-1" />
@@ -195,7 +195,7 @@ export function ApprovalProcessTab({
                           <Button
                             variant="outline"
                             size="sm"
-                            className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+                            className="border-red-500/30 dg-text-red hover:bg-red-500/10"
                             onClick={() => onReject(instance)}
                           >
                             <XCircle className="h-4 w-4 mr-1" />
diff --git a/frontend/src/components/approval/ApprovalTemplateTab.tsx b/frontend/src/components/approval/ApprovalTemplateTab.tsx
index 6de6ee0..ca0173f 100644
--- a/frontend/src/components/approval/ApprovalTemplateTab.tsx
+++ b/frontend/src/components/approval/ApprovalTemplateTab.tsx
@@ -48,9 +48,9 @@ function renderFlowChart(flow: JsonData) {
           <div
             className={cn(
               'px-4 py-2 rounded-lg border min-w-[100px] text-center',
-              node.type === 'start' && 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400',
+              node.type === 'start' && 'bg-emerald-500/10 border-emerald-500/30 dg-text-green',
               node.type === 'approval' && 'bg-[var(--dg-blue)]/10 border-[var(--dg-blue)]/30 text-[var(--dg-blue)]',
-              node.type === 'condition' && 'bg-amber-500/10 border-amber-500/30 text-amber-400',
+              node.type === 'condition' && 'bg-amber-500/10 border-amber-500/30 dg-text-yellow',
               node.type === 'end' && 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-secondary)]'
             )}
           >
@@ -161,7 +161,7 @@ export function ApprovalTemplateTab({
                       variant="outline"
                       className={
                         flow.status === 1 || flow.status === 'active' || flow.status === true
-                          ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                          ? 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
                           : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]'
                       }
                     >
diff --git a/frontend/src/components/approval/helpers.tsx b/frontend/src/components/approval/helpers.tsx
index d45cd5e..b9594d2 100644
--- a/frontend/src/components/approval/helpers.tsx
+++ b/frontend/src/components/approval/helpers.tsx
@@ -108,9 +108,9 @@ export function renderStepProgress(instance: JsonData) {
             <div
               className={cn(
                 'flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs whitespace-nowrap',
-                isCompleted && 'bg-emerald-500/10 text-emerald-400',
-                isCurrent && !isRejected && 'bg-amber-500/10 text-amber-400 border border-amber-500/30',
-                isRejected && 'bg-red-500/10 text-red-400',
+                isCompleted && 'bg-emerald-500/10 dg-text-green',
+                isCurrent && !isRejected && 'bg-amber-500/10 dg-text-yellow border border-amber-500/30',
+                isRejected && 'bg-red-500/10 dg-text-red',
                 !isCompleted && !isCurrent && !isRejected && 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'
               )}
             >
@@ -122,8 +122,8 @@ export function renderStepProgress(instance: JsonData) {
                 <span className={cn(
                   'text-[10px] px-1 py-0 rounded',
                   step.step_type === 'execute' 
-                    ? 'bg-green-500/15 text-green-400' 
-                    : 'bg-purple-500/15 text-purple-400'
+                    ? 'bg-green-500/15 dg-text-green' 
+                    : 'bg-purple-500/15 dg-text-purple'
                 )}>
                   {step.step_type === 'execute' ? i18n.t('approval.step.executeShort') : i18n.t('approval.step.auditShort')}
                 </span>
diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
index c275c25..fd9a992 100644
--- a/frontend/src/components/auth/Login.tsx
+++ b/frontend/src/components/auth/Login.tsx
@@ -1,10 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff, Languages } from 'lucide-react';
+import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff, Languages, Activity } from 'lucide-react';
 import { useUserStore, useLanguageStore } from '@/store';
 import { authApi } from '@/api';
-import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemePicker } from '@/components/layout/ThemePicker';
 import { cn } from '@/lib/utils';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '@/i18n';
 import {
@@ -16,58 +17,7 @@ import {
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 
-/* ---------- CSS Animations ---------- */
-const ANIMATIONS = `
-  @keyframes login-orb-1 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(40px, -50px) scale(1.12); }
-    66% { transform: translate(-30px, 35px) scale(0.92); }
-  }
-  @keyframes login-orb-2 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(-50px, 25px) scale(1.18); }
-  }
-  @keyframes login-orb-3 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(30px, 45px) scale(0.88); }
-  }
-  @keyframes login-orb-4 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(25px, -30px) scale(1.1); }
-  }
-  @keyframes login-card-enter {
-    from { opacity: 0; transform: translateY(24px) scale(0.97); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-  }
-  @keyframes login-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  @keyframes login-input-focus {
-    from { box-shadow: 0 0 0 0px var(--dg-input-focus-ring); }
-    to { box-shadow: 0 0 0 4px var(--dg-input-focus-ring); }
-  }
-`;
-
-/* ---------- Floating background orbs ---------- */
-const ORBS = [
-  { top: '-10%', left: '-5%', size: 520, color: 'var(--dg-blue)', opacity: 0.18, blur: 90, animation: 'login-orb-1 18s ease-in-out infinite' },
-  { bottom: '-15%', right: '-8%', size: 480, color: 'var(--dg-purple)', opacity: 0.16, blur: 100, animation: 'login-orb-2 22s ease-in-out infinite' },
-  { top: '30%', right: '10%', size: 320, color: 'var(--dg-cyan)', opacity: 0.12, blur: 70, animation: 'login-orb-3 16s ease-in-out infinite' },
-  { bottom: '10%', left: '8%', size: 380, color: 'var(--dg-gradient-start)', opacity: 0.14, blur: 80, animation: 'login-orb-4 20s ease-in-out infinite' },
-];
-
-/**
- * Login - 优化后的登录页面
- * 
- * 优化点：
- * 1. 使用 glass 效果替代简单的半透明背景
- * 2. 输入框使用 dg-input 工具类
- * 3. 密码显示/隐藏使用图标按钮
- * 4. 主题切换更精致
- * 5. 错误提示动画更流畅
- * 6. 背景光球动画更协调
- */
+/** 登录页 — 克制企业风，无渐变/粉彩色光球 // Logan.Li */
 export function Login() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -78,18 +28,13 @@ export function Login() {
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
     setLoading(true);
     try {
-      const result = await authApi.login(username, password) as { user: any; token: string; permissions?: string[] };
+      const result = await authApi.login(username, password) as { user: { id: number; username: string }; token: string; permissions?: string[] };
       useUserStore.getState().login(result.user, result.token, result.permissions ?? null);
       localStorage.setItem('token', result.token);
       navigate('/', { replace: true });
@@ -102,297 +47,166 @@ export function Login() {
   };
 
   return (
-    <>
-      <style>{ANIMATIONS}</style>
-
+    <div className="relative min-h-screen flex items-center justify-center px-4 bg-[var(--surface-canvas)]">
+      {/* 极弱品牌氛围 — 单色径向，非彩色光球 // Logan.Li */}
       <div
-        className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden"
+        aria-hidden
+        className="pointer-events-none absolute inset-0"
         style={{
-          background: `radial-gradient(ellipse at 50% 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-secondary')} 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-primary')} 100%)`,
+          background: 'radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--brand) 6%, transparent), transparent)',
         }}
-      >
-        {/* Floating light spots */}
-        {ORBS.map((orb, i) => (
-          <div
-            key={`orb-${i}`}
-            aria-hidden="true"
-            className="pointer-events-none absolute"
-            style={{
-              top: orb.top,
-              left: orb.left,
-              bottom: orb.bottom,
-              right: orb.right,
-              width: orb.size,
-              height: orb.size,
-              borderRadius: '50%',
-              background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
-              opacity: mounted ? orb.opacity : 0,
-              filter: `blur(${orb.blur}px)`,
-              animation: orb.animation,
-              willChange: 'transform',
-              transition: 'opacity 1s ease-out',
-            }}
-          />
-        ))}
+      />
 
-        {/* Theme + Language switcher */}
-        <div
-          className="fixed top-4 right-4 z-50 flex items-center gap-2"
-          style={{ animation: 'login-fade-in 0.6s ease-out' }}
-        >
-          {/* Language switcher */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                aria-label={t('header.language')}
-                className={cn(
-                  'inline-flex items-center justify-center size-10 rounded-full',
-                  'border border-[var(--dg-border)] transition-all duration-200',
-                  'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
-                  'glass'
-                )}
-                style={{ color: 'var(--dg-text-secondary)' }}
-              >
-                <Languages className="size-5" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="w-40 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
-              style={{ boxShadow: 'var(--shadow-dropdown)' }}
-            >
-              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">{t('header.languageSwitch')}</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-              {SUPPORTED_LANGUAGES.map((lang) => (
-                <DropdownMenuItem
-                  key={lang.code}
-                  className={cn(
-                    'flex items-center gap-2.5 cursor-pointer transition-colors',
-                    'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
-                    language === lang.code ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]',
-                  )}
-                  onClick={() => setLanguage(lang.code as AppLanguage)}
-                >
-                  <span className="text-base">{lang.flag}</span>
-                  <span className="flex-1 text-sm">{lang.label}</span>
-                  {language === lang.code && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          {/* Theme switcher */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                aria-label={t('header.theme')}
-                className={cn(
-                  'inline-flex items-center justify-center size-10 rounded-full',
-                  'border border-[var(--dg-border)] transition-all duration-200',
-                  'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
-                  'glass'
-                )}
-                style={{ color: 'var(--dg-text-secondary)' }}
-              >
-                <Palette className="size-5" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
-              style={{ boxShadow: 'var(--shadow-dropdown)' }}
-            >
-              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-              {THEME_OPTIONS.map((option) => (
-                <DropdownMenuItem
-                  key={option.id}
-                  className={cn(
-                    'flex items-center gap-2.5 cursor-pointer transition-colors',
-                    'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
-                    theme === option.id ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]',
-                  )}
-                  onClick={() => setTheme(option.id)}
-                >
-                  <span
-                    className="size-3.5 rounded-full shrink-0 ring-2"
-                    style={{
-                      backgroundColor: option.primaryColor,
-                      boxShadow: '0 0 0 2px var(--dg-bg-primary)',
-                    }}
-                  />
-                  <div className="flex-1 min-w-0">
-                    <span className="text-sm font-medium block">{option.name}</span>
-                    <span className="text-xs opacity-60 block truncate">{option.description}</span>
-                  </div>
-                  {theme === option.id && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-
-        {/* Login card */}
-        <div
-          className="relative z-10 w-full max-w-md"
-          style={{
-            background: 'color-mix(in srgb, var(--dg-bg-secondary) 80%, transparent)',
-            backdropFilter: 'blur(24px)',
-            WebkitBackdropFilter: 'blur(24px)',
-            border: '1px solid var(--dg-border)',
-            borderRadius: 24,
-            boxShadow: 'var(--shadow-card-hover)',
-            padding: '44px 40px',
-            animation: 'login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-          }}
-        >
-          {/* Brand */}
-          <div className="text-center mb-8">
-            <div
-              className="inline-flex items-center justify-center size-16 rounded-2xl mb-5"
-              style={{
-                background: 'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
-                boxShadow: '0 8px 32px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
-              }}
-            >
-              <svg
-                className="size-8 text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={1.8}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M3 12h4l3-8 4 16 3-8h4" />
-              </svg>
-            </div>
-            <h1 className="text-3xl font-bold dg-gradient-text tracking-tight">
-              AIOps
-            </h1>
-            <p className="mt-2.5 text-sm text-[var(--dg-text-secondary)]">
-              {t('login.subtitle')}
-            </p>
-          </div>
-
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            {/* Error */}
-            {error && (
-              <div
-                className="flex items-start gap-2.5 rounded-xl px-4 py-3 text-sm animate-fade-in"
-                style={{
-                  background: 'color-mix(in srgb, var(--dg-red) 10%, transparent)',
-                  border: '1px solid color-mix(in srgb, var(--dg-red) 25%, transparent)',
-                  color: 'var(--dg-red)',
-                }}
-              >
-                <AlertCircle className="size-4 shrink-0 mt-0.5" />
-                <span>{error}</span>
-              </div>
-            )}
-
-            {/* Username */}
-            <div className="space-y-1.5">
-              <label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
-                {t('login.username')}
-              </label>
-              <div className="relative">
-                <User
-                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
-                />
-                <input
-                  type="text"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder={t('login.usernamePlaceholder')}
-                  autoComplete="username"
-                  autoFocus
-                  className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
-                />
-              </div>
-            </div>
-
-            {/* Password */}
-            <div className="space-y-1.5">
-              <label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
-                {t('login.password')}
-              </label>
-              <div className="relative">
-                <Lock
-                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
-                />
-                <input
-                  type={showPassword ? 'text' : 'password'}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder={t('login.passwordPlaceholder')}
-                  autoComplete="current-password"
-                  className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword((v) => !v)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)] transition-colors"
-                  tabIndex={-1}
-                >
-                  {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
-                </button>
-              </div>
-            </div>
-
-            {/* Submit */}
+      {/* 语言 / 主题 */}
+      <div className="fixed top-4 right-4 z-50 flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
             <button
-              type="submit"
-              disabled={loading || !username || !password}
-              className={cn(
-                'dg-gradient-bg w-full rounded-xl py-3 mt-2 text-white font-semibold text-[15px]',
-                'transition-all duration-200 active:scale-[0.98] disabled:cursor-not-allowed',
-              )}
-              style={{
-                opacity: loading || !username || !password ? 0.6 : 1,
-                boxShadow: loading || !username || !password
-                  ? 'none'
-                  : '0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
-              }}
+              type="button"
+              aria-label={t('header.language')}
+              className="dg-btn-secondary h-9 w-9 p-0 rounded-lg"
             >
-              {loading ? (
-                <span className="inline-flex items-center justify-center gap-2">
-                  <Loader2 className="size-4 animate-spin" />
-                  {t('login.loggingIn')}
-                </span>
-              ) : (
-                t('login.loginButton')
-              )}
+              <Languages className="size-4" />
             </button>
-          </form>
-
-          {/* Hints */}
-          <div
-            className="mt-6 pt-5 text-center text-xs space-y-1"
-            style={{
-              borderTop: '1px solid var(--dg-border-light)',
-              color: 'var(--dg-text-muted)',
-            }}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className="w-40 bg-[var(--surface-raised)] border-[var(--border-default)]"
+            style={{ boxShadow: 'var(--shadow-dropdown)' }}
           >
-            <p>
-              默认管理员账号{' '}
-              <span className="font-medium text-[var(--dg-text-secondary)]">admin / 123456</span>
-            </p>
-            <p>LDAP 用户可直接使用域账号登录</p>
+            <DropdownMenuLabel className="text-[var(--text-secondary)]">{t('header.languageSwitch')}</DropdownMenuLabel>
+            <DropdownMenuSeparator className="bg-[var(--border-default)]" />
+            {SUPPORTED_LANGUAGES.map((lang) => (
+              <DropdownMenuItem
+                key={lang.code}
+                className={cn(
+                  'flex items-center gap-2.5 cursor-pointer',
+                  language === lang.code ? 'text-[var(--text-primary)]' : 'dg-text-secondary',
+                )}
+                onClick={() => setLanguage(lang.code as AppLanguage)}
+              >
+                <span className="text-base">{lang.flag}</span>
+                <span className="flex-1 text-sm">{lang.label}</span>
+                {language === lang.code && <Check className="size-4 shrink-0 text-[var(--brand)]" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label={t('header.theme')}
+              className="dg-btn-secondary h-9 w-9 p-0 rounded-lg"
+            >
+              <Palette className="size-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className="w-60 bg-[var(--surface-raised)] border-[var(--border-default)]"
+            style={{ boxShadow: 'var(--shadow-dropdown)' }}
+          >
+            <DropdownMenuLabel className="text-[var(--text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
+            <ThemePicker value={theme} onChange={setTheme} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* 登录卡片 */}
+      <div className="relative z-10 w-full max-w-md dg-card rounded-xl p-10 animate-fade-in">
+        <div className="text-center mb-8">
+          <div className="dg-icon-box w-14 h-14 rounded-xl mx-auto mb-4">
+            <Activity className="size-7" />
           </div>
+          <h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">
+            AIOps
+          </h1>
+          <p className="mt-2 text-sm dg-text-secondary">
+            {t('login.subtitle')}
+          </p>
         </div>
 
-        {/* Footer */}
-        <p
-          className="absolute bottom-4 left-0 right-0 text-center text-xs"
-          style={{ color: 'var(--dg-text-muted)', opacity: 0.5 }}
-        >
-          &copy; AIOps 智能运维平台
-        </p>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          {error && (
+            <div className="flex items-start gap-2.5 rounded-lg px-4 py-3 text-sm dg-alert-banner border-[var(--alert-error-border)] bg-[var(--alert-error-bg)] text-[var(--alert-error-text)]">
+              <AlertCircle className="size-4 shrink-0 mt-0.5" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <div className="space-y-1.5">
+            <label className="block text-sm font-medium dg-text-secondary">
+              {t('login.username')}
+            </label>
+            <div className="relative">
+              <User className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none dg-text-muted" />
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder={t('login.usernamePlaceholder')}
+                autoComplete="username"
+                autoFocus
+                className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="block text-sm font-medium dg-text-secondary">
+              {t('login.password')}
+            </label>
+            <div className="relative">
+              <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none dg-text-muted" />
+              <input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={t('login.passwordPlaceholder')}
+                autoComplete="current-password"
+                className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((v) => !v)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 dg-text-muted hover:dg-text-secondary transition-colors"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+              </button>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading || !username || !password}
+            className="dg-btn-primary w-full rounded-lg py-2.5 mt-1 text-[15px] font-semibold disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="inline-flex items-center justify-center gap-2">
+                <Loader2 className="size-4 animate-spin" />
+                {t('login.loggingIn')}
+              </span>
+            ) : (
+              t('login.loginButton')
+            )}
+          </button>
+        </form>
+
+        <div className="mt-6 pt-5 text-center text-xs space-y-1 border-t border-[var(--border-subtle)] dg-text-muted">
+          <p>
+            默认管理员账号{' '}
+            <span className="font-medium dg-text-secondary">admin / 123456</span>
+          </p>
+          <p>LDAP 用户可直接使用域账号登录</p>
+        </div>
       </div>
-    </>
+
+      <p className="absolute bottom-4 left-0 right-0 text-center text-xs dg-text-muted opacity-60">
+        &copy; AIOps 智能运维平台
+      </p>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/cloud/BillingRecordDialog.tsx b/frontend/src/components/cloud/BillingRecordDialog.tsx
index 0b5713f..a308a36 100644
--- a/frontend/src/components/cloud/BillingRecordDialog.tsx
+++ b/frontend/src/components/cloud/BillingRecordDialog.tsx
@@ -97,7 +97,7 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
         <div className="space-y-3">
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">厂商 *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">厂商 *</Label>
               <Select value={form.provider} onValueChange={(v) => setForm({ ...form, provider: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -108,32 +108,32 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">日期 *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">日期 *</Label>
               <Input type="date" className="mt-1" value={form.billing_date} onChange={(e) => setForm({ ...form, billing_date: e.target.value })} />
             </div>
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">费用(元) *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">费用(元) *</Label>
               <Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
             </div>
             <div>
-              <Label className="text-sm text-slate-300">服务</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">服务</Label>
               <Input className="mt-1" placeholder="ECS, RDS..." value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })} />
             </div>
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">区域</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">区域</Label>
               <Input className="mt-1" placeholder="cn-hangzhou" value={form.region} onChange={(e) => setForm({ ...form, region: e.target.value })} />
             </div>
             <div>
-              <Label className="text-sm text-slate-300">账号名称</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">账号名称</Label>
               <Input className="mt-1" placeholder="主账号" value={form.account_name} onChange={(e) => setForm({ ...form, account_name: e.target.value })} />
             </div>
           </div>
           <div>
-            <Label className="text-sm text-slate-300">备注</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">备注</Label>
             <Input className="mt-1" placeholder="可选" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
           </div>
         </div>
diff --git a/frontend/src/components/cloud/BillingRuleDialog.tsx b/frontend/src/components/cloud/BillingRuleDialog.tsx
index d8eb152..740e6e8 100644
--- a/frontend/src/components/cloud/BillingRuleDialog.tsx
+++ b/frontend/src/components/cloud/BillingRuleDialog.tsx
@@ -87,12 +87,12 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
         </DialogHeader>
         <div className="space-y-3">
           <div>
-            <Label className="text-sm text-slate-300">规则名称 *</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">规则名称 *</Label>
             <Input className="mt-1" placeholder="如：日成本超 500 元预警" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">厂商</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">厂商</Label>
               <Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -104,7 +104,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">指标</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">指标</Label>
               <Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -116,7 +116,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">比较</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">比较</Label>
               <Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -128,13 +128,13 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">阈值(元) *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">阈值(元) *</Label>
               <Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} />
             </div>
           </div>
           <div className="flex items-center gap-2">
             <Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
-            <Label className="text-sm text-slate-300">启用</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">启用</Label>
           </div>
         </div>
         <DialogFooter>
diff --git a/frontend/src/components/cloud/CloudAccountManager.tsx b/frontend/src/components/cloud/CloudAccountManager.tsx
index 3fc9e36..237c4fc 100644
--- a/frontend/src/components/cloud/CloudAccountManager.tsx
+++ b/frontend/src/components/cloud/CloudAccountManager.tsx
@@ -26,6 +26,10 @@ import {
 } from 'lucide-react';
 import { cloudApi } from '@/api';
 import { CloudBrandIcon, getProviderColor } from '@/components/icons/CloudBrandIcon';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 const providerLabels: Record<string, string> = {
@@ -146,70 +150,84 @@ export function CloudAccountManager() {
     return matchesSearch && matchesProvider;
   });
 
-  const _stats = {
+  const stats = {
     total: accounts.length,
     active: accounts.filter(a => a.status === 'active').length,
     inactive: accounts.filter(a => a.status === 'inactive').length,
     error: accounts.filter(a => a.status === 'error').length,
   };
 
+  const toolbar = (
+    <div className="flex items-center gap-4 flex-wrap">
+      <div className="relative flex-1 max-w-md">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input
+          placeholder="搜索账号名称或AccessKey..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-10 h-9 dg-input"
+        />
+      </div>
+      <select
+        value={selectedProvider}
+        onChange={(e) => setSelectedProvider(e.target.value)}
+        className="px-3 py-2 h-9 rounded-md text-sm dg-input"
+      >
+        <option value="all">全部平台</option>
+        <option value="aws">AWS</option>
+        <option value="aliyun">阿里云</option>
+        <option value="tencent">腾讯云</option>
+        <option value="huawei">华为云</option>
+        <option value="azure">Azure</option>
+      </select>
+    </div>
+  );
+
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">云账号管理</h1>
-          <p className="text-slate-400 mt-1">管理多云平台的访问凭证和账号信息</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={loadData} className="border-slate-700 text-slate-300">
-            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+    <PageShell
+      variant="list"
+      title="云账号管理"
+      subtitle="管理多云平台的访问凭证和账号信息"
+      icon={<Key className="h-5 w-5" />}
+      metrics={
+        !loading ? (
+          <StatStrip
+            items={[
+              { label: '总计', value: stats.total, color: 'blue' },
+              { label: '正常', value: stats.active, color: 'green' },
+              { label: '停用', value: stats.inactive, color: 'muted' },
+              { label: '异常', value: stats.error, color: stats.error > 0 ? 'red' : 'muted' },
+            ]}
+          />
+        ) : undefined
+      }
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" onClick={loadData} className="dg-btn-secondary">
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
             刷新
           </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
-            <Plus className="h-4 w-4 mr-2" />
+          <Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
+            <Plus className="h-4 w-4 mr-1" />
             添加账号
           </Button>
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-4">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
-          <Input
-            placeholder="搜索账号名称或AccessKey..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
-          />
-        </div>
-        <select
-          value={selectedProvider}
-          onChange={(e) => setSelectedProvider(e.target.value)}
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
-        >
-          <option value="all">全部平台</option>
-          <option value="aws">AWS</option>
-          <option value="aliyun">阿里云</option>
-          <option value="tencent">腾讯云</option>
-          <option value="huawei">华为云</option>
-          <option value="azure">Azure</option>
-        </select>
-      </div>
-
-      {/* Account List */}
+        </>
+      )}
+    >
       {loading ? (
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-12 text-center text-slate-500">
-            <RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
-            加载中...
-          </CardContent>
-        </Card>
+        <PageLoading />
       ) : filteredAccounts.length === 0 ? (
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-12 text-center text-slate-500">暂无云账号数据</CardContent>
-        </Card>
+        <PageEmpty
+          icon={<Key className="h-12 w-12" />}
+          title="暂无云账号数据"
+          action={(
+            <Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
+              <Plus className="h-4 w-4 mr-1" />
+              添加账号
+            </Button>
+          )}
+        />
       ) : (
         <div className="grid grid-cols-2 gap-4">
           {filteredAccounts.map((account) => {
@@ -218,37 +236,37 @@ export function CloudAccountManager() {
             const lastSync = account.last_sync || account.lastSync || account.created_at || '-';
             const monthlyCost = account.monthly_cost ?? account.monthlyCost ?? 0;
             return (
-              <Card key={account.id} className="bg-slate-800 border-slate-700">
+              <Card key={account.id} className="dg-card dg-card-hover">
                 <CardContent className="p-4">
                   <div className="flex items-start justify-between">
                     <div className="flex items-start gap-3">
-                      <div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center" style={{ borderBottom: `2px solid ${getProviderColor(account.provider)}` }}>
+                      <div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center" style={{ borderBottom: `2px solid ${getProviderColor(account.provider)}` }}>
                         <CloudBrandIcon provider={account.provider} className="h-6 w-6" />
                       </div>
                       <div>
-                        <h3 className="font-medium text-slate-100">{account.name}</h3>
-                        <p className="text-sm text-slate-400 mt-0.5">{providerLabels[account.provider] || account.provider}</p>
+                        <h3 className="font-medium text-[var(--dg-text-primary)]">{account.name}</h3>
+                        <p className="text-sm dg-text-secondary mt-0.5">{providerLabels[account.provider] || account.provider}</p>
                         <div className="flex items-center gap-3 mt-2">
                           {accessKey && (
-                            <Badge variant="secondary" className="bg-slate-700 text-slate-300">
+                            <Badge variant="secondary" className="dg-badge-muted">
                               <Key className="h-3 w-3 mr-1" />
                               {accessKey.slice(0, 8)}...
                             </Badge>
                           )}
                           {account.status === 'active' && (
-                            <Badge className="bg-green-500/20 text-green-400 border-0">
+                            <Badge className="dg-status-running border-0">
                               <CheckCircle2 className="h-3 w-3 mr-1" />
                               正常
                             </Badge>
                           )}
                           {account.status === 'inactive' && (
-                            <Badge className="bg-slate-500/20 text-slate-400 border-0">
+                            <Badge className="dg-status-stopped border-0">
                               <XCircle className="h-3 w-3 mr-1" />
                               已停用
                             </Badge>
                           )}
                           {account.status === 'error' && (
-                            <Badge className="bg-red-500/20 text-red-400 border-0">
+                            <Badge className="dg-status-error border-0">
                               <Key className="h-3 w-3 mr-1" />
                               异常
                             </Badge>
@@ -260,7 +278,7 @@ export function CloudAccountManager() {
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                        className="h-8 w-8 dg-text-muted hover:text-[var(--dg-blue)]"
                         onClick={() => handleOpenEdit(account)}
                       >
                         <Pencil className="h-4 w-4" />
@@ -268,25 +286,25 @@ export function CloudAccountManager() {
                       <Button
                         variant="ghost"
                         size="icon"
-                        className="h-8 w-8 text-slate-400 hover:text-red-400"
+                        className="h-8 w-8 dg-text-muted hover:text-[var(--dg-red)]"
                         onClick={() => handleDelete(account.id)}
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
                     </div>
                   </div>
-                  <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-700">
+                  <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-[var(--dg-border)]">
                     <div>
-                      <p className="text-xs text-slate-400">月费用</p>
-                      <p className="text-lg font-medium text-emerald-400">¥{Number(monthlyCost).toLocaleString()}</p>
+                      <p className="text-xs dg-text-secondary">月费用</p>
+                      <p className="text-lg font-medium text-[var(--dg-green)]">¥{Number(monthlyCost).toLocaleString()}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-slate-400">服务器数</p>
-                      <p className="text-lg font-medium text-slate-100">{serverCount}</p>
+                      <p className="text-xs dg-text-secondary">服务器数</p>
+                      <p className="text-lg font-medium text-[var(--dg-text-primary)]">{serverCount}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-slate-400">最后同步</p>
-                      <p className="text-sm text-slate-300">
+                      <p className="text-xs dg-text-secondary">最后同步</p>
+                      <p className="text-sm text-[var(--dg-text-secondary)]">
                         {lastSync !== '-' ? new Date(lastSync).toLocaleString() : '-'}
                       </p>
                     </div>
@@ -300,13 +318,13 @@ export function CloudAccountManager() {
 
       {/* 创建账号 Dialog */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-slate-100 flex items-center gap-2">
-              <Cloud className="h-5 w-5 text-blue-400" />
+            <DialogTitle className="flex items-center gap-2">
+              <Cloud className="h-5 w-5 text-[var(--dg-blue)]" />
               {editingAccount ? '编辑云账号' : '添加云账号'}
             </DialogTitle>
-            <DialogDescription className="text-slate-400">
+            <DialogDescription>
               {editingAccount ? '修改账号信息和访问凭证，留空则保持原凭证不变' : '录入多云平台的访问凭证，用于资源同步与成本统计'}
             </DialogDescription>
           </DialogHeader>
@@ -314,24 +332,24 @@ export function CloudAccountManager() {
           <div className="space-y-4 py-2">
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1.5">
-                <Label className="text-slate-300">
-                  账号名称 <span className="text-red-400">*</span>
+                <Label>
+                  账号名称 <span className="text-[var(--dg-red)]">*</span>
                 </Label>
                 <Input
                   placeholder="阿里云生产账号"
                   value={formData.name}
                   onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-1.5">
-                <Label className="text-slate-300">
-                  云平台 <span className="text-red-400">*</span>
+                <Label>
+                  云平台 <span className="text-[var(--dg-red)]">*</span>
                 </Label>
                 <select
                   value={formData.provider}
                   onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
-                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
+                  className="w-full px-3 py-2 rounded-md text-sm dg-input"
                 >
                   <option value="aliyun">阿里云</option>
                   <option value="tencent">腾讯云</option>
@@ -343,50 +361,50 @@ export function CloudAccountManager() {
             </div>
 
             <div className="space-y-1.5">
-              <Label className="text-slate-300">
+              <Label>
                 AccessKey
-                {editingAccount && <span className="text-xs text-slate-500 ml-2">留空保持不变</span>}
+                {editingAccount && <span className="text-xs dg-text-muted ml-2">留空保持不变</span>}
               </Label>
               <Input
                 placeholder="LTAI..."
                 value={formData.access_key}
                 onChange={(e) => setFormData({ ...formData, access_key: e.target.value })}
-                className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
+                className="dg-input font-mono text-sm"
               />
             </div>
 
             <div className="space-y-1.5">
-              <Label className="text-slate-300">
+              <Label>
                 SecretKey
-                {editingAccount && <span className="text-xs text-slate-500 ml-2">留空保持不变</span>}
+                {editingAccount && <span className="text-xs dg-text-muted ml-2">留空保持不变</span>}
               </Label>
               <Input
                 type="password"
                 placeholder="••••••••"
                 value={formData.secret_key}
                 onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
-                className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500 font-mono text-sm"
+                className="dg-input font-mono text-sm"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1.5">
-                <Label className="text-slate-300">月费用 (元)</Label>
+                <Label>月费用 (元)</Label>
                 <Input
                   type="number"
                   min="0"
                   placeholder="0"
                   value={formData.monthly_cost}
                   onChange={(e) => setFormData({ ...formData, monthly_cost: e.target.value })}
-                  className="bg-slate-900 border-slate-700 text-slate-100 placeholder:text-slate-500"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-1.5">
-                <Label className="text-slate-300">状态</Label>
+                <Label>状态</Label>
                 <select
                   value={formData.status}
                   onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
+                  className="w-full px-3 py-2 rounded-md text-sm dg-input"
                 >
                   <option value="active">正常</option>
                   <option value="inactive">已停用</option>
@@ -397,11 +415,11 @@ export function CloudAccountManager() {
           </div>
 
           <DialogFooter>
-            <Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300 hover:bg-slate-700">
+            <Button variant="outline" onClick={() => setFormOpen(false)} className="dg-btn-secondary">
               取消
             </Button>
             <Button
-              className="bg-blue-600 hover:bg-blue-700"
+              className="dg-btn-primary"
               disabled={!formData.name.trim() || submitting}
               onClick={handleSubmit}
             >
@@ -411,6 +429,6 @@ export function CloudAccountManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/cloud/CloudBilling.tsx b/frontend/src/components/cloud/CloudBilling.tsx
index 9b63ab9..071a36e 100644
--- a/frontend/src/components/cloud/CloudBilling.tsx
+++ b/frontend/src/components/cloud/CloudBilling.tsx
@@ -17,17 +17,26 @@ import {
   Trash2,
   Pencil,
   RefreshCw,
-  Loader2,
   Wallet,
   Bell,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { billingApi } from '@/api';
-import { formatCurrency, TrendChart, providerLabels, providerColors } from './CloudBillingHelpers';
+import {
+  formatCurrency,
+  TrendChart,
+  providerLabels,
+  providerHex,
+  ProviderDot,
+} from './CloudBillingHelpers';
 import { StatStrip } from '@/components/ui/stat-strip';
 import { BillingRecordDialog } from './BillingRecordDialog';
 import { BillingRuleDialog } from './BillingRuleDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 export function CloudBilling() {
@@ -47,7 +56,6 @@ export function CloudBilling() {
   const [rules, setRules] = useState<JsonData[]>([]);
   const [rulesLoading, setRulesLoading] = useState(true);
 
-  // 弹窗状态（open + 编辑目标） // Logan.Li
   const [recordDialogOpen, setRecordDialogOpen] = useState(false);
   const [editingRecord, setEditingRecord] = useState<JsonData>(null);
   const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
@@ -105,6 +113,12 @@ export function CloudBilling() {
     if (activeTab === 'alerts') loadRules();
   }, [activeTab, loadRules]);
 
+  const refreshAll = () => {
+    loadStats();
+    if (activeTab === 'records') loadRecords();
+    if (activeTab === 'alerts') loadRules();
+  };
+
   const openAddRecord = () => {
     setEditingRecord(null);
     setRecordDialogOpen(true);
@@ -160,176 +174,184 @@ export function CloudBilling() {
     }
   };
 
+  const pageTabs = [
+    { id: 'overview', label: '概览统计' },
+    { id: 'records', label: '成本记录' },
+    { id: 'alerts', label: '预警规则', badge: rules.length > 0 ? rules.length : undefined },
+  ];
+
+  const recordsToolbar = (
+    <div className="flex flex-wrap items-end gap-3">
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">厂商</Label>
+        <Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
+          <SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部</SelectItem>
+            {Object.entries(providerLabels).map(([k, v]) => (
+              <SelectItem key={k} value={k}>{v}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">开始日期</Label>
+        <Input type="date" className="w-40 h-9 dg-input" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
+      </div>
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">结束日期</Label>
+        <Input type="date" className="w-40 h-9 dg-input" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
+      </div>
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadRecords}>
+        <RefreshCw className="h-4 w-4 mr-1" />查询
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold text-slate-100">云账单管理</h2>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={() => { loadStats(); if (activeTab === 'records') loadRecords(); if (activeTab === 'alerts') loadRules(); }}>
+    <PageShell
+      variant="list"
+      title="云账单管理"
+      subtitle="多云成本统计、记录与预警"
+      icon={<Wallet className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={(id) => setActiveTab(id as typeof activeTab)}
+      toolbar={activeTab === 'records' ? recordsToolbar : undefined}
+      metrics={
+        stats && !statsLoading ? (
+          <StatStrip
+            items={[
+              { label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
+              { label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
+              { label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
+              { label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
+            ]}
+          />
+        ) : undefined
+      }
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={refreshAll}>
             <RefreshCw className="h-4 w-4 mr-1" />刷新
           </Button>
           {activeTab === 'records' && (
-            <Button size="sm" onClick={openAddRecord}>
+            <Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
               <Plus className="h-4 w-4 mr-1" />记录成本
             </Button>
           )}
           {activeTab === 'alerts' && (
-            <Button size="sm" onClick={openAddRule}>
+            <Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
               <Plus className="h-4 w-4 mr-1" />添加规则
             </Button>
           )}
-        </div>
-      </div>
-
-      <div className="flex gap-1 border-b border-slate-800">
-        {([
-          { key: 'overview', label: '概览统计' },
-          { key: 'records', label: '成本记录' },
-          { key: 'alerts', label: '预警规则' },
-        ] as const).map(tab => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
-            className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
-              activeTab === tab.key
-                ? 'text-blue-400 border-blue-400'
-                : 'text-slate-400 border-transparent hover:text-slate-200'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
+        </>
+      )}
+    >
+      {/* Tab 1：概览统计 */}
       {activeTab === 'overview' && (
-        <div className="space-y-4">
-          {statsLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
-          ) : stats ? (
-            <>
-              <StatStrip
-                items={[
-                  { label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
-                  { label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
-                  { label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
-                  { label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
-                ]}
-              />
-
-              {stats.alerts?.length > 0 && (
-                <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4">
-                  <div className="flex items-center gap-2 mb-3">
-                    <Bell className="h-4 w-4 text-amber-400" />
-                    <span className="text-sm font-medium text-amber-300">成本预警</span>
-                  </div>
-                  <div className="space-y-2">
-                    {stats.alerts.map((a: JsonData, i: number) => (
-                      <div key={i} className="flex items-center justify-between text-sm">
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline" className="border-amber-500/50 text-amber-300">{a.rule_name}</Badge>
-                          <span className="text-slate-400">
-                            {a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
-                          </span>
-                        </div>
-                        <span className="text-slate-300">
-                          当前 <span className="text-amber-300 font-medium">{formatCurrency(a.current)}</span>
-                          {' '}{a.operator}{' '}
-                          阈值 <span className="text-red-400 font-medium">{formatCurrency(a.threshold)}</span>
+        statsLoading ? (
+          <PageLoading />
+        ) : stats ? (
+          <div className="space-y-4">
+            {stats.alerts?.length > 0 && (
+              <div className="dg-alert-banner">
+                <div className="flex items-center gap-2 mb-3">
+                  <Bell className="h-4 w-4 dg-text-yellow" />
+                  <span className="dg-alert-banner-title">成本预警</span>
+                </div>
+                <div className="space-y-2">
+                  {stats.alerts.map((a: JsonData, i: number) => (
+                    <div key={i} className="flex items-center justify-between text-sm flex-wrap gap-2">
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="dg-badge-yellow">{a.rule_name}</Badge>
+                        <span className="dg-text-secondary">
+                          {a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
                         </span>
                       </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <Card className="bg-slate-900/50 border-slate-800">
-                <CardContent className="pt-4">
-                  <h3 className="text-sm font-medium text-slate-200 mb-4">近 30 天成本趋势</h3>
-                  <TrendChart data={stats.month_trend || []} />
-                </CardContent>
-              </Card>
-
-              <Card className="bg-slate-900/50 border-slate-800">
-                <CardContent className="pt-4">
-                  <h3 className="text-sm font-medium text-slate-200 mb-4">本月厂商成本分布</h3>
-                  {(stats.provider_dist || []).length === 0 ? (
-                    <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>
-                  ) : (
-                    <div className="space-y-3">
-                      <div className="flex h-8 rounded-lg overflow-hidden">
-                        {stats.provider_dist.map((p: JsonData, i: number) => (
-                          <div
-                            key={i}
-                            className={`${providerColors[p.provider] || 'bg-slate-600'} flex items-center justify-center text-xs text-white font-medium`}
-                            style={{ width: `${p.percent}%` }}
-                            title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
-                          >
-                            {p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
-                          </div>
-                        ))}
-                      </div>
-                      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
-                        {stats.provider_dist.map((p: JsonData, i: number) => (
-                          <div key={i} className="flex items-center justify-between text-sm">
-                            <div className="flex items-center gap-2">
-                              <div className={`w-3 h-3 rounded ${providerColors[p.provider] || 'bg-slate-600'}`} />
-                              <span className="text-slate-300">{providerLabels[p.provider] || p.provider}</span>
-                            </div>
-                            <div className="text-right">
-                              <span className="text-slate-200 font-medium">{formatCurrency(p.cost)}</span>
-                              <span className="text-slate-500 ml-2">{p.percent.toFixed(1)}%</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
+                      <span className="text-[var(--text-secondary)]">
+                        当前 <span className="dg-text-yellow font-medium">{formatCurrency(a.current)}</span>
+                        {' '}{a.operator}{' '}
+                        阈值 <span className="dg-text-red font-medium">{formatCurrency(a.threshold)}</span>
+                      </span>
                     </div>
-                  )}
-                </CardContent>
-              </Card>
-            </>
-          ) : null}
-        </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <Card className="dg-card">
+              <CardContent className="pt-4">
+                <h3 className="dg-section-title">近 30 天成本趋势</h3>
+                <TrendChart data={stats.month_trend || []} />
+              </CardContent>
+            </Card>
+
+            <Card className="dg-card">
+              <CardContent className="pt-4">
+                <h3 className="dg-section-title">本月厂商成本分布</h3>
+                {(stats.provider_dist || []).length === 0 ? (
+                  <PageEmpty title="暂无分布数据" className="py-8" />
+                ) : (
+                  <div className="space-y-3">
+                    <div className="flex h-8 rounded-lg overflow-hidden">
+                      {stats.provider_dist.map((p: JsonData, i: number) => (
+                        <div
+                          key={i}
+                          className="flex items-center justify-center text-xs text-white font-medium"
+                          style={{
+                            width: `${p.percent}%`,
+                            backgroundColor: providerHex[p.provider] || 'var(--surface-active)',
+                          }}
+                          title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
+                        >
+                          {p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
+                        </div>
+                      ))}
+                    </div>
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                      {stats.provider_dist.map((p: JsonData, i: number) => (
+                        <div key={i} className="flex items-center justify-between text-sm">
+                          <div className="flex items-center gap-2">
+                            <ProviderDot provider={p.provider} className="w-3 h-3" />
+                            <span className="text-[var(--text-secondary)]">{providerLabels[p.provider] || p.provider}</span>
+                          </div>
+                          <div className="text-right">
+                            <span className="text-[var(--text-primary)] font-medium">{formatCurrency(p.cost)}</span>
+                            <span className="dg-text-muted ml-2">{p.percent.toFixed(1)}%</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <PageEmpty icon={<Wallet className="h-12 w-12" />} title="暂无统计数据" />
+        )
       )}
 
+      {/* Tab 2：成本记录 */}
       {activeTab === 'records' && (
-        <div className="space-y-3">
-          <div className="flex flex-wrap items-end gap-3">
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">厂商</Label>
-              <Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
-                <SelectTrigger className="w-32 h-9"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">全部</SelectItem>
-                  {Object.entries(providerLabels).map(([k, v]) => (
-                    <SelectItem key={k} value={k}>{v}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">开始日期</Label>
-              <Input type="date" className="w-40 h-9" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
-            </div>
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">结束日期</Label>
-              <Input type="date" className="w-40 h-9" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
-            </div>
-            <Button variant="outline" size="sm" onClick={loadRecords}>
-              <RefreshCw className="h-4 w-4 mr-1" />查询
-            </Button>
-          </div>
-
+        <ContentPanel noPadding>
           {recordsLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
+            <PageLoading />
           ) : records.length === 0 ? (
-            <div className="py-20 text-center text-slate-500">
-              <Wallet className="h-12 w-12 mx-auto mb-3 opacity-30" />
-              <p className="text-sm">暂无成本记录</p>
-            </div>
+            <PageEmpty
+              icon={<Wallet className="h-12 w-12" />}
+              title="暂无成本记录"
+              action={(
+                <Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
+                  <Plus className="h-4 w-4 mr-1" />记录成本
+                </Button>
+              )}
+            />
           ) : (
-            <div className="overflow-x-auto rounded-lg border border-slate-800">
+            <div className="overflow-x-auto">
               <table className="w-full text-sm">
-                <thead className="bg-slate-900/80 text-slate-400">
+                <thead className="bg-[var(--surface-raised)] dg-text-secondary">
                   <tr>
                     <th className="px-4 py-2.5 text-left font-medium">日期</th>
                     <th className="px-4 py-2.5 text-left font-medium">厂商</th>
@@ -343,25 +365,25 @@ export function CloudBilling() {
                 </thead>
                 <tbody>
                   {records.map((r) => (
-                    <tr key={r.id} className="border-t border-slate-800 hover:bg-slate-800/30">
-                      <td className="px-4 py-2.5 text-slate-300">{r.billing_date}</td>
+                    <tr key={r.id} className="dg-table-row border-t border-[var(--border-default)]">
+                      <td className="px-4 py-2.5 text-[var(--text-secondary)]">{r.billing_date}</td>
                       <td className="px-4 py-2.5">
                         <span className="inline-flex items-center gap-1.5">
-                          <span className={`w-2 h-2 rounded-full ${providerColors[r.provider] || 'bg-slate-500'}`} />
+                          <ProviderDot provider={r.provider} />
                           {providerLabels[r.provider] || r.provider}
                         </span>
                       </td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.service || '-'}</td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.region || '-'}</td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.account_name || '-'}</td>
-                      <td className="px-4 py-2.5 text-right text-slate-200 font-medium">{formatCurrency(r.cost)}</td>
-                      <td className="px-4 py-2.5 text-slate-500 max-w-xs truncate">{r.description || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.service || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.region || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.account_name || '-'}</td>
+                      <td className="px-4 py-2.5 text-right text-[var(--text-primary)] font-medium">{formatCurrency(r.cost)}</td>
+                      <td className="px-4 py-2.5 dg-text-muted max-w-xs truncate">{r.description || '-'}</td>
                       <td className="px-4 py-2.5">
                         <div className="flex items-center justify-center gap-1">
                           <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRecord(r)}>
                             <Pencil className="h-3.5 w-3.5" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRecord(r.id)}>
+                          <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRecord(r.id)}>
                             <Trash2 className="h-3.5 w-3.5" />
                           </Button>
                         </div>
@@ -372,64 +394,69 @@ export function CloudBilling() {
               </table>
             </div>
           )}
-        </div>
+        </ContentPanel>
       )}
 
+      {/* Tab 3：预警规则 */}
       {activeTab === 'alerts' && (
-        <div className="space-y-3">
-          {rulesLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
-          ) : rules.length === 0 ? (
-            <div className="py-20 text-center text-slate-500">
-              <Bell className="h-12 w-12 mx-auto mb-3 opacity-30" />
-              <p className="text-sm">暂无预警规则</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {rules.map((r) => (
-                <Card key={r.id} className="bg-slate-900/50 border-slate-800">
-                  <CardContent className="pt-4">
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex items-center gap-2">
-                        <Bell className={`h-4 w-4 ${r.enabled ? 'text-amber-400' : 'text-slate-600'}`} />
-                        <span className="text-sm font-medium text-slate-200">{r.name}</span>
-                      </div>
-                      <Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
+        rulesLoading ? (
+          <PageLoading />
+        ) : rules.length === 0 ? (
+          <PageEmpty
+            icon={<Bell className="h-12 w-12" />}
+            title="暂无预警规则"
+            description="添加规则后，成本超阈值将在此页管理"
+            action={(
+              <Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
+                <Plus className="h-4 w-4 mr-1" />添加规则
+              </Button>
+            )}
+          />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {rules.map((r) => (
+              <Card key={r.id} className="dg-card">
+                <CardContent className="pt-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <Bell className={`h-4 w-4 ${r.enabled ? 'dg-text-yellow' : 'dg-text-muted'}`} />
+                      <span className="text-sm font-medium text-[var(--text-primary)]">{r.name}</span>
                     </div>
-                    <div className="grid grid-cols-2 gap-2 text-sm">
-                      <div>
-                        <span className="text-slate-500">厂商</span>
-                        <span className="ml-2 text-slate-300">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
-                      </div>
-                      <div>
-                        <span className="text-slate-500">指标</span>
-                        <span className="ml-2 text-slate-300">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
-                      </div>
-                      <div>
-                        <span className="text-slate-500">阈值</span>
-                        <span className="ml-2 text-amber-300 font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
-                      </div>
-                      {r.last_triggered && (
-                        <div>
-                          <span className="text-slate-500">最后触发</span>
-                          <span className="ml-2 text-slate-400">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
-                        </div>
-                      )}
+                    <Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="dg-text-muted">厂商</span>
+                      <span className="ml-2 text-[var(--text-secondary)]">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
                     </div>
-                    <div className="flex justify-end gap-1 mt-3">
-                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
-                        <Pencil className="h-3.5 w-3.5" />
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRule(r.id)}>
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </Button>
+                    <div>
+                      <span className="dg-text-muted">指标</span>
+                      <span className="ml-2 text-[var(--text-secondary)]">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
                     </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
+                    <div>
+                      <span className="dg-text-muted">阈值</span>
+                      <span className="ml-2 dg-text-yellow font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
+                    </div>
+                    {r.last_triggered && (
+                      <div>
+                        <span className="dg-text-muted">最后触发</span>
+                        <span className="ml-2 dg-text-secondary">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex justify-end gap-1 mt-3">
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRule(r.id)}>
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )
       )}
 
       <BillingRecordDialog
@@ -444,6 +471,6 @@ export function CloudBilling() {
         editingRule={editingRule}
         onSuccess={() => { loadRules(); loadStats(); }}
       />
-    </div>
+    </PageShell>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/cloud/CloudBillingHelpers.tsx b/frontend/src/components/cloud/CloudBillingHelpers.tsx
index 15f2b11..38407f3 100644
--- a/frontend/src/components/cloud/CloudBillingHelpers.tsx
+++ b/frontend/src/components/cloud/CloudBillingHelpers.tsx
@@ -10,7 +10,16 @@ export const providerLabels: Record<string, string> = {
   azure: 'Azure',
 };
 
-// 云厂商品牌色（主组件 + 弹窗共享） // Logan.Li
+// 云厂商品牌色（跨主题固定，用 hex 避免 Tailwind 硬编码） // Logan.Li
+export const providerHex: Record<string, string> = {
+  aliyun: '#FF6A00',
+  tencent: '#006EFF',
+  aws: '#FF9900',
+  huawei: '#CF0A2C',
+  azure: '#0078D4',
+};
+
+/** @deprecated 请改用 providerHex + style */
 export const providerColors: Record<string, string> = {
   aliyun: 'bg-orange-500',
   tencent: 'bg-blue-500',
@@ -19,6 +28,15 @@ export const providerColors: Record<string, string> = {
   azure: 'bg-sky-500',
 };
 
+export function ProviderDot({ provider, className = 'w-2 h-2' }: { provider: string; className?: string }) {
+  return (
+    <span
+      className={`rounded-full shrink-0 ${className}`}
+      style={{ backgroundColor: providerHex[provider] || 'var(--surface-active)' }}
+    />
+  );
+}
+
 export function formatCurrency(n: number) {
   return `¥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 }
@@ -32,17 +50,17 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
   alert?: boolean;
 }) {
   return (
-    <div className={`rounded-lg border p-4 ${alert ? 'border-amber-500/30 bg-amber-500/5' : 'border-slate-800 bg-slate-900/50'}`}>
+    <div className={alert ? 'dg-alert-banner' : 'rounded-lg border border-[var(--border-default)] bg-[var(--surface-raised)]/50 p-4'}>
       <div className="flex items-center justify-between mb-2">
-        <span className="text-slate-400 text-sm">{label}</span>
-        <span className={alert ? 'text-amber-400' : 'text-slate-500'}>{icon}</span>
+        <span className="dg-text-secondary text-sm">{label}</span>
+        <span className={alert ? 'dg-text-yellow' : 'dg-text-muted'}>{icon}</span>
       </div>
-      <div className={`text-2xl font-bold ${alert ? 'text-amber-300' : 'text-slate-100'}`}>{value}</div>
+      <div className={`text-2xl font-bold ${alert ? 'dg-text-yellow' : 'text-[var(--text-primary)]'}`}>{value}</div>
       {trendLabel && (
         <div className="flex items-center gap-1 mt-1 text-xs">
-          {trend !== undefined && trend > 0 && <TrendingUp className="h-3 w-3 text-red-400" />}
-          {trend !== undefined && trend < 0 && <TrendingDown className="h-3 w-3 text-green-400" />}
-          <span className="text-slate-500">{trendLabel}</span>
+          {trend !== undefined && trend > 0 && <TrendingUp className="h-3 w-3 dg-text-red" />}
+          {trend !== undefined && trend < 0 && <TrendingDown className="h-3 w-3 dg-text-green" />}
+          <span className="dg-text-muted">{trendLabel}</span>
         </div>
       )}
     </div>
@@ -51,7 +69,7 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
 
 export function TrendChart({ data }: { data: { date: string; cost: number }[] }) {
   if (data.length === 0) {
-    return <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>;
+    return <p className="text-sm dg-text-muted py-8 text-center">暂无数据</p>;
   }
   const max = Math.max(...data.map((d) => d.cost), 1);
   const recent = data.slice(-30);
@@ -68,20 +86,23 @@ export function TrendChart({ data }: { data: { date: string; cost: number }[] })
               style={{ height: '100%' }}
             >
               <div
-                className="absolute bottom-0 w-full rounded-t-sm bg-gradient-to-t from-blue-600/60 to-blue-400/80 group-hover:from-blue-500 group-hover:to-blue-300 transition-colors"
-                style={{ height: `${h}%` }}
+                className="absolute bottom-0 w-full rounded-t-sm transition-opacity group-hover:opacity-90"
+                style={{
+                  height: `${h}%`,
+                  background: `linear-gradient(to top, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 85%, transparent))`,
+                }}
               />
-              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap text-xs bg-slate-800 text-slate-200 px-2 py-1 rounded border border-slate-700 z-10">
+              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap text-xs bg-[var(--surface-inset)] text-[var(--text-primary)] px-2 py-1 rounded border border-[var(--border-default)] z-10">
                 {d.date}: {formatCurrency(d.cost)}
               </div>
             </div>
           );
         })}
       </div>
-      <div className="flex justify-between mt-2 text-xs text-slate-500">
+      <div className="flex justify-between mt-2 text-xs dg-text-muted">
         <span>{recent[0]?.date}</span>
         <span>{recent[recent.length - 1]?.date}</span>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/cloud/DomainManager.tsx b/frontend/src/components/cloud/DomainManager.tsx
index 2d01424..a9a3297 100644
--- a/frontend/src/components/cloud/DomainManager.tsx
+++ b/frontend/src/components/cloud/DomainManager.tsx
@@ -25,6 +25,10 @@ import {
   Loader2,
 } from 'lucide-react';
 import { cloudApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 export function DomainManager() {
@@ -145,7 +149,7 @@ export function DomainManager() {
     return matchesSearch && matchesStatus;
   });
 
-  const _stats = {
+  const stats = {
     total: domains.length,
     active: domains.filter(d => d.status === 'active').length,
     expired: domains.filter(d => d.status === 'expired').length,
@@ -159,61 +163,75 @@ export function DomainManager() {
     return days;
   };
 
+  const toolbar = (
+    <div className="flex items-center gap-4 flex-wrap">
+      <div className="relative flex-1 max-w-md">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input
+          placeholder="搜索域名..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-10 h-9 dg-input"
+        />
+      </div>
+      <select
+        value={selectedStatus}
+        onChange={(e) => setSelectedStatus(e.target.value)}
+        className="px-3 py-2 h-9 rounded-md text-sm dg-input"
+      >
+        <option value="all">全部状态</option>
+        <option value="active">正常</option>
+        <option value="expired">已过期</option>
+        <option value="pending">待审核</option>
+      </select>
+    </div>
+  );
+
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">域名管理</h1>
-          <p className="text-slate-400 mt-1">管理域名注册信息和DNS解析记录</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={loadData} className="border-slate-700 text-slate-300">
-            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+    <PageShell
+      variant="list"
+      title="域名管理"
+      subtitle="管理域名注册信息和DNS解析记录"
+      icon={<Globe className="h-5 w-5" />}
+      metrics={
+        !loading ? (
+          <StatStrip
+            items={[
+              { label: '总计', value: stats.total, color: 'blue' },
+              { label: '正常', value: stats.active, color: 'green' },
+              { label: '已过期', value: stats.expired, color: stats.expired > 0 ? 'red' : 'muted' },
+              { label: 'SSL', value: stats.sslEnabled, color: 'cyan' },
+            ]}
+          />
+        ) : undefined
+      }
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" onClick={loadData} className="dg-btn-secondary">
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
             刷新
           </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleOpenCreate}>
-            <Plus className="h-4 w-4 mr-2" />
+          <Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
+            <Plus className="h-4 w-4 mr-1" />
             添加域名
           </Button>
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-4">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
-          <Input
-            placeholder="搜索域名..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
-          />
-        </div>
-        <select
-          value={selectedStatus}
-          onChange={(e) => setSelectedStatus(e.target.value)}
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
-        >
-          <option value="all">全部状态</option>
-          <option value="active">正常</option>
-          <option value="expired">已过期</option>
-          <option value="pending">待审核</option>
-        </select>
-      </div>
-
-      {/* Domain List */}
+        </>
+      )}
+    >
       {loading ? (
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-12 text-center text-slate-500">
-            <RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
-            加载中...
-          </CardContent>
-        </Card>
+        <PageLoading />
       ) : filteredDomains.length === 0 ? (
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-12 text-center text-slate-500">暂无域名数据</CardContent>
-        </Card>
+        <PageEmpty
+          icon={<Globe className="h-12 w-12" />}
+          title="暂无域名数据"
+          action={(
+            <Button size="sm" className="dg-btn-primary" onClick={handleOpenCreate}>
+              <Plus className="h-4 w-4 mr-1" />
+              添加域名
+            </Button>
+          )}
+        />
       ) : (
         <div className="space-y-3">
           {filteredDomains.map((domain) => {
@@ -222,42 +240,42 @@ export function DomainManager() {
             const sslExpireDate = domain.ssl_expire_date || domain.sslExpireDate || '';
             const daysUntilExpiry = getDaysUntilExpiry(expireDate);
             return (
-              <Card key={domain.id} className="bg-slate-800 border-slate-700">
+              <Card key={domain.id} className="dg-card dg-card-hover">
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
-                        <Globe className="h-5 w-5 text-white" />
+                      <div className="dg-icon-box">
+                        <Globe className="h-5 w-5" />
                       </div>
                       <div>
                         <div className="flex items-center gap-2">
-                          <h3 className="font-medium text-slate-100 text-lg">{domain.name}</h3>
+                          <h3 className="font-medium text-[var(--dg-text-primary)] text-lg">{domain.name}</h3>
                           {domain.status === 'active' && (
-                            <Badge className="bg-green-500/20 text-green-400 border-0">
+                            <Badge className="dg-status-running border-0">
                               <CheckCircle2 className="h-3 w-3 mr-1" />
                               正常
                             </Badge>
                           )}
                           {domain.status === 'expired' && (
-                            <Badge className="bg-red-500/20 text-red-400 border-0">
+                            <Badge className="dg-status-error border-0">
                               <XCircle className="h-3 w-3 mr-1" />
                               已过期
                             </Badge>
                           )}
                           {domain.status === 'pending' && (
-                            <Badge className="bg-yellow-500/20 text-yellow-400 border-0">
+                            <Badge className="dg-status-warning border-0">
                               <Clock className="h-3 w-3 mr-1" />
                               待审核
                             </Badge>
                           )}
                           {sslEnabled && (
-                            <Badge className="bg-cyan-500/20 text-cyan-400 border-0">
+                            <Badge className="dg-badge-cyan border-0">
                               <CheckCircle2 className="h-3 w-3 mr-1" />
                               SSL
                             </Badge>
                           )}
                         </div>
-                        <div className="flex items-center gap-4 mt-1 text-sm text-slate-400">
+                        <div className="flex items-center gap-4 mt-1 text-sm dg-text-secondary">
                           <span>注册商: {domain.registrar || '-'}</span>
                           <span>DNS: {domain.dns_provider || domain.dnsProvider || '-'}</span>
                           <span>解析记录: {domain.record_count ?? domain.recordCount ?? 0}条</span>
@@ -266,11 +284,11 @@ export function DomainManager() {
                     </div>
                     <div className="flex items-center gap-4">
                       <div className="text-right">
-                        <p className="text-sm text-slate-400">到期时间</p>
-                        <p className={`text-sm font-medium ${daysUntilExpiry < 30 ? 'text-red-400' : 'text-slate-200'}`}>
+                        <p className="text-sm dg-text-secondary">到期时间</p>
+                        <p className={`text-sm font-medium ${daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]'}`}>
                           {expireDate ? expireDate.substring(0, 10) : '-'}{expireDate && ` (${daysUntilExpiry}天)`}
                           {sslEnabled && sslExpireDate && (
-                            <span className="text-slate-500"> · SSL: {sslExpireDate.substring(0, 10)}</span>
+                            <span className="dg-text-muted"> · SSL: {sslExpireDate.substring(0, 10)}</span>
                           )}
                         </p>
                       </div>
@@ -278,7 +296,7 @@ export function DomainManager() {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                          className="h-8 w-8 dg-text-muted hover:text-[var(--dg-blue)]"
                           onClick={() => handleOpenEdit(domain)}
                         >
                           <Edit2 className="h-4 w-4" />
@@ -286,7 +304,7 @@ export function DomainManager() {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8 text-slate-400 hover:text-red-400"
+                          className="h-8 w-8 dg-text-muted hover:text-[var(--dg-red)]"
                           onClick={() => handleDelete(domain.id)}
                         >
                           <Trash2 className="h-4 w-4" />
@@ -303,44 +321,44 @@ export function DomainManager() {
 
       {/* 创建/编辑域名 Dialog */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
-        <DialogContent className="bg-slate-800 border-slate-700 text-slate-100 max-w-lg">
+        <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-slate-100 flex items-center gap-2">
-              <Globe className="h-5 w-5 text-blue-400" />
+            <DialogTitle className="flex items-center gap-2">
+              <Globe className="h-5 w-5 text-[var(--dg-blue)]" />
               {editingDomain ? '编辑域名' : '添加域名'}
             </DialogTitle>
-            <DialogDescription className="text-slate-400">
+            <DialogDescription>
               {editingDomain ? '修改域名注册信息、DNS 配置和 SSL 证书状态' : '录入域名信息，包括注册商、DNS 服务商和到期时间'}
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-2">
             <div className="space-y-2">
-              <Label className="text-slate-300">域名 *</Label>
+              <Label>域名 *</Label>
               <Input
                 placeholder="example.com"
                 value={formData.name}
                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="bg-slate-900 border-slate-700 text-slate-100"
+                className="dg-input"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
-                <Label className="text-slate-300">注册商</Label>
+                <Label>注册商</Label>
                 <Input
                   placeholder="阿里云 / Cloudflare ..."
                   value={formData.registrar}
                   onChange={(e) => setFormData({ ...formData, registrar: e.target.value })}
-                  className="bg-slate-900 border-slate-700 text-slate-100"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-slate-300">状态</Label>
+                <Label>状态</Label>
                 <select
                   value={formData.status}
                   onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-                  className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-100 text-sm"
+                  className="w-full px-3 py-2 rounded-md text-sm dg-input"
                 >
                   <option value="active">正常</option>
                   <option value="expired">已过期</option>
@@ -351,45 +369,45 @@ export function DomainManager() {
 
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
-                <Label className="text-slate-300">到期时间</Label>
+                <Label>到期时间</Label>
                 <Input
                   type="date"
                   value={formData.expire_date}
                   onChange={(e) => setFormData({ ...formData, expire_date: e.target.value })}
-                  className="bg-slate-900 border-slate-700 text-slate-100"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-2">
-                <Label className="text-slate-300">DNS 服务商</Label>
+                <Label>DNS 服务商</Label>
                 <Input
                   placeholder="Cloudflare / DNSPod ..."
                   value={formData.dns_provider}
                   onChange={(e) => setFormData({ ...formData, dns_provider: e.target.value })}
-                  className="bg-slate-900 border-slate-700 text-slate-100"
+                  className="dg-input"
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label className="text-slate-300">解析记录数</Label>
+              <Label>解析记录数</Label>
               <Input
                 type="number"
                 placeholder="0"
                 value={formData.record_count}
                 onChange={(e) => setFormData({ ...formData, record_count: e.target.value })}
-                className="bg-slate-900 border-slate-700 text-slate-100"
+                className="dg-input"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-4 items-end">
               <div className="space-y-2">
-                <Label className="text-slate-300">SSL 证书到期</Label>
+                <Label>SSL 证书到期</Label>
                 <Input
                   type="date"
                   value={formData.ssl_expire_date}
                   onChange={(e) => setFormData({ ...formData, ssl_expire_date: e.target.value })}
                   disabled={!formData.ssl_enabled}
-                  className="bg-slate-900 border-slate-700 text-slate-100 disabled:opacity-40"
+                  className="dg-input disabled:opacity-40"
                 />
               </div>
               <label className="flex items-center gap-2 cursor-pointer pb-2">
@@ -397,19 +415,19 @@ export function DomainManager() {
                   type="checkbox"
                   checked={formData.ssl_enabled}
                   onChange={(e) => setFormData({ ...formData, ssl_enabled: e.target.checked })}
-                  className="h-4 w-4 rounded border-slate-600 bg-slate-900 accent-cyan-500"
+                  className="h-4 w-4 rounded border-[var(--dg-border)] accent-[var(--dg-cyan)]"
                 />
-                <span className="text-slate-300 text-sm">启用 SSL</span>
+                <span className="text-sm text-[var(--dg-text-secondary)]">启用 SSL</span>
               </label>
             </div>
           </div>
 
           <DialogFooter>
-            <Button variant="outline" onClick={() => setFormOpen(false)} className="border-slate-700 text-slate-300">
+            <Button variant="outline" onClick={() => setFormOpen(false)} className="dg-btn-secondary">
               取消
             </Button>
             <Button
-              className="bg-blue-600 hover:bg-blue-700"
+              className="dg-btn-primary"
               disabled={!formData.name.trim() || submitting}
               onClick={handleSubmit}
             >
@@ -419,6 +437,6 @@ export function DomainManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/cloud/PlatformManager.tsx b/frontend/src/components/cloud/PlatformManager.tsx
index d78c7ba..f9054f0 100644
--- a/frontend/src/components/cloud/PlatformManager.tsx
+++ b/frontend/src/components/cloud/PlatformManager.tsx
@@ -28,8 +28,13 @@ import {
   XCircle,
   ExternalLink,
   Loader2,
+  RefreshCw,
 } from 'lucide-react';
 import { platformApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 const typeLabels: Record<string, string> = {
@@ -39,9 +44,9 @@ const typeLabels: Record<string, string> = {
 };
 
 const typeColors: Record<string, string> = {
-  public: 'text-blue-400',
-  private: 'text-purple-400',
-  hybrid: 'text-cyan-400',
+  public: 'text-[var(--dg-blue)]',
+  private: 'text-[var(--dg-purple)]',
+  hybrid: 'text-[var(--dg-cyan)]',
 };
 
 export function PlatformManager() {
@@ -121,94 +126,127 @@ export function PlatformManager() {
     loadData();
   };
 
-  return (
-    <div className="p-6 space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3 flex-1">
-          <div className="relative w-72">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
-            <Input
-              placeholder="搜索平台名称或编码..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-9 h-9 bg-slate-800/50 border-slate-700"
-            />
-          </div>
-          <Select value={selectedType} onValueChange={setSelectedType}>
-            <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">全部类型</SelectItem>
-              <SelectItem value="public">公有云</SelectItem>
-              <SelectItem value="private">私有云</SelectItem>
-              <SelectItem value="hybrid">混合云</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <Button onClick={openCreate} className="gap-2">
-          <Plus className="h-4 w-4" />
-          添加平台
-        </Button>
-      </div>
+  const stats = {
+    total: platforms.length,
+    active: platforms.filter(p => p.status === 'active').length,
+    public: platforms.filter(p => p.type === 'public').length,
+  };
 
-      {/* List */}
+  const toolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="relative w-72">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input
+          placeholder="搜索平台名称或编码..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-9 h-9 dg-input"
+        />
+      </div>
+      <Select value={selectedType} onValueChange={setSelectedType}>
+        <SelectTrigger className="w-32 h-9 dg-input">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">全部类型</SelectItem>
+          <SelectItem value="public">公有云</SelectItem>
+          <SelectItem value="private">私有云</SelectItem>
+          <SelectItem value="hybrid">混合云</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  return (
+    <PageShell
+      variant="list"
+      title="云平台管理"
+      subtitle="管理公有云、私有云与混合云平台信息"
+      icon={<CloudCog className="h-5 w-5" />}
+      metrics={
+        !loading ? (
+          <StatStrip
+            items={[
+              { label: '总计', value: stats.total, color: 'blue' },
+              { label: '启用', value: stats.active, color: 'green' },
+              { label: '公有云', value: stats.public, color: 'cyan' },
+            ]}
+          />
+        ) : undefined
+      }
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+          <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
+            <Plus className="h-4 w-4 mr-1" />
+            添加平台
+          </Button>
+        </>
+      )}
+    >
       {loading ? (
-        <div className="flex justify-center py-20">
-          <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
-        </div>
+        <PageLoading />
       ) : filtered.length === 0 ? (
-        <div className="text-center py-20 text-slate-500">
-          <CloudCog className="h-12 w-12 mx-auto mb-3 opacity-40" />
-          <p>暂无云平台数据</p>
-        </div>
+        <PageEmpty
+          icon={<CloudCog className="h-12 w-12" />}
+          title="暂无云平台数据"
+          action={(
+            <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
+              <Plus className="h-4 w-4 mr-1" />
+              添加平台
+            </Button>
+          )}
+        />
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {filtered.map((p) => (
             <div
               key={p.id}
-              className="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors group"
+              className="dg-card dg-card-hover p-4 group"
             >
               <div className="flex items-start justify-between mb-3">
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
-                    <CloudCog className="h-5 w-5 text-blue-400" />
+                  <div className="w-10 h-10 rounded-lg bg-[var(--dg-blue)]/15 flex items-center justify-center">
+                    <CloudCog className="h-5 w-5 text-[var(--dg-blue)]" />
                   </div>
                   <div>
-                    <h3 className="font-medium text-slate-100">{p.name}</h3>
-                    <span className="text-xs text-slate-500 font-mono">{p.code}</span>
+                    <h3 className="font-medium text-[var(--dg-text-primary)]">{p.name}</h3>
+                    <span className="text-xs dg-text-muted font-mono">{p.code}</span>
                   </div>
                 </div>
                 <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                   {p.website && (
-                    <a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
+                    <a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-text-primary)]">
                       <ExternalLink className="h-3.5 w-3.5" />
                     </a>
                   )}
-                  <button onClick={() => openEdit(p)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
+                  <button onClick={() => openEdit(p)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-text-primary)]">
                     <Pencil className="h-3.5 w-3.5" />
                   </button>
-                  <button onClick={() => handleDelete(p.id)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-red-400">
+                  <button onClick={() => handleDelete(p.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] dg-text-muted hover:text-[var(--dg-red)]">
                     <Trash2 className="h-3.5 w-3.5" />
                   </button>
                 </div>
               </div>
 
               {p.description && (
-                <p className="text-sm text-slate-400 mb-3 line-clamp-2">{p.description}</p>
+                <p className="text-sm dg-text-secondary mb-3 line-clamp-2">{p.description}</p>
               )}
 
               <div className="flex items-center gap-2 flex-wrap">
-                <Badge variant="outline" className={typeColors[p.type] || 'text-slate-400'}>
+                <Badge variant="outline" className={typeColors[p.type] || 'dg-text-muted'}>
                   {typeLabels[p.type] || p.type}
                 </Badge>
                 {p.status === 'active' ? (
-                  <Badge className="bg-emerald-500/20 text-emerald-400 gap-1">
+                  <Badge className="dg-status-running gap-1 border-0">
                     <CheckCircle2 className="h-3 w-3" /> 启用
                   </Badge>
                 ) : (
-                  <Badge className="bg-slate-500/20 text-slate-400 gap-1">
+                  <Badge className="dg-status-stopped gap-1 border-0">
                     <XCircle className="h-3 w-3" /> 禁用
                   </Badge>
                 )}
@@ -233,7 +271,7 @@ export function PlatformManager() {
                   value={formData.name}
                   onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                   placeholder="如：阿里云"
-                  className="bg-slate-800/50 border-slate-700"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-1.5">
@@ -242,7 +280,7 @@ export function PlatformManager() {
                   value={formData.code}
                   onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                   placeholder="如：aliyun"
-                  className="bg-slate-800/50 border-slate-700"
+                  className="dg-input"
                   disabled={!!editingItem}
                 />
               </div>
@@ -251,7 +289,7 @@ export function PlatformManager() {
               <div className="space-y-1.5">
                 <Label>类型</Label>
                 <Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}>
-                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
+                  <SelectTrigger className="dg-input">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -264,7 +302,7 @@ export function PlatformManager() {
               <div className="space-y-1.5">
                 <Label>状态</Label>
                 <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
-                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
+                  <SelectTrigger className="dg-input">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -280,7 +318,7 @@ export function PlatformManager() {
                 value={formData.website}
                 onChange={(e) => setFormData({ ...formData, website: e.target.value })}
                 placeholder="https://..."
-                className="bg-slate-800/50 border-slate-700"
+                className="dg-input"
               />
             </div>
             <div className="space-y-1.5">
@@ -289,7 +327,7 @@ export function PlatformManager() {
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 placeholder="平台描述..."
-                className="bg-slate-800/50 border-slate-700"
+                className="dg-input"
               />
             </div>
           </div>
@@ -310,13 +348,13 @@ export function PlatformManager() {
             <DialogTitle>确认删除</DialogTitle>
             <DialogDescription className="sr-only">描述</DialogDescription>
           </DialogHeader>
-          <p className="text-sm text-slate-400">确定删除此云平台？此操作不可撤销。</p>
+          <p className="text-sm dg-text-secondary">确定删除此云平台？此操作不可撤销。</p>
           <DialogFooter>
             <Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
             <Button variant="destructive" onClick={confirmDelete}>删除</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/cloud/RegionManager.tsx b/frontend/src/components/cloud/RegionManager.tsx
index fe60974..6ea4a1c 100644
--- a/frontend/src/components/cloud/RegionManager.tsx
+++ b/frontend/src/components/cloud/RegionManager.tsx
@@ -27,10 +27,16 @@ import {
   CheckCircle2,
   XCircle,
   Loader2,
+  RefreshCw,
 } from 'lucide-react';
 import { regionApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 const providerNames: Record<string, string> = {
@@ -42,11 +48,11 @@ const providerNames: Record<string, string> = {
 };
 
 const providerColors: Record<string, string> = {
-  aws: 'text-orange-400',
-  aliyun: 'text-orange-400',
-  tencent: 'text-blue-400',
-  huawei: 'text-red-400',
-  azure: 'text-blue-400',
+  aws: 'dg-text-orange',
+  aliyun: 'dg-text-orange',
+  tencent: 'dg-text-blue',
+  huawei: 'dg-text-red',
+  azure: 'dg-text-blue',
 };
 
 export function RegionManager() {
@@ -171,9 +177,9 @@ export function RegionManager() {
     {
       key: 'status', header: '状态', sortable: true,
       render: (r) => r.status === 'active' ? (
-        <Badge className="bg-emerald-500/20 text-emerald-400 gap-1"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
+        <Badge className="dg-status-running gap-1 border-0"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
       ) : (
-        <Badge className="bg-slate-500/20 text-slate-400 gap-1"><XCircle className="h-3 w-3" /> 禁用</Badge>
+        <Badge className="dg-status-stopped gap-1 border-0"><XCircle className="h-3 w-3" /> 禁用</Badge>
       ),
     },
     {
@@ -183,7 +189,7 @@ export function RegionManager() {
           <button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
             <Pencil className="h-3.5 w-3.5" />
           </button>
-          <button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-red-400">
+          <button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:dg-text-red">
             <Trash2 className="h-3.5 w-3.5" />
           </button>
         </div>
@@ -191,74 +197,105 @@ export function RegionManager() {
     },
   ];
 
-  return (
-    <div className="p-6 space-y-4">
-      {/* 批量操作栏 */}
-      {selectedIds.length > 0 && (
-        <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
-          <span className="text-sm text-[var(--dg-text-secondary)]">
-            已选择 <span className="font-semibold text-[var(--dg-text-primary)]">{selectedIds.length}</span> 个区域
-          </span>
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
-              取消选择
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-              onClick={handleBatchDelete}
-            >
-              <Trash2 className="h-4 w-4 mr-1.5" />
-              批量删除
-            </Button>
-          </div>
-        </div>
-      )}
+  const stats = {
+    total: regions.length,
+    active: regions.filter(r => r.status === 'active').length,
+    inactive: regions.filter(r => r.status !== 'active').length,
+  };
 
-      {/* DataTable */}
-      <DataTable
-        columns={columns}
-        data={filtered}
-        rowKey={(r) => r.id}
-        loading={loading}
-        searchable
-        searchPlaceholder="搜索区域名称或编码..."
-        searchKeys={['name', 'code']}
-        sortable
-        selectable
-        selectedIds={selectedIds}
-        onSelectionChange={setSelectedIds}
-        columnToggle
-        exportable
-        exportFilename="regions.csv"
-        emptyText="暂无区域数据"
-        emptyRender={() => (
-          <div className="flex flex-col items-center gap-3 py-8">
-            <MapPin className="h-12 w-12 text-[var(--dg-text-muted)] opacity-40" />
-            <p className="text-[var(--dg-text-muted)]">暂无区域数据</p>
-          </div>
-        )}
-        toolbarExtra={
-          <>
-            <Select value={selectedProvider} onValueChange={setSelectedProvider}>
-              <SelectTrigger className="w-32 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">全部云商</SelectItem>
-                {Object.entries(providerNames).map(([k, v]) => (
-                  <SelectItem key={k} value={k}>{v}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Button onClick={openCreate} size="sm" className="h-8 gap-1.5">
-              <Plus className="h-4 w-4" />
+  const toolbar = (
+    <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+      <SelectTrigger className="w-32 h-9 dg-input">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">全部云商</SelectItem>
+        {Object.entries(providerNames).map(([k, v]) => (
+          <SelectItem key={k} value={k}>{v}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  const batchToolbar = selectedIds.length > 0 ? (
+    <div className="flex items-center gap-2">
+      <span className="text-sm dg-text-secondary">
+        已选择 <span className="font-semibold text-[var(--text-primary)]">{selectedIds.length}</span> 个区域
+      </span>
+      <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="dg-text-muted">
+        取消选择
+      </Button>
+      <Button variant="outline" size="sm" className="dg-btn-danger" onClick={handleBatchDelete}>
+        <Trash2 className="h-4 w-4 mr-1" />
+        批量删除
+      </Button>
+    </div>
+  ) : undefined;
+
+  return (
+    <PageShell
+      variant="list"
+      title="区域管理"
+      subtitle="管理各云厂商的区域与接入端点"
+      icon={<MapPin className="h-5 w-5" />}
+      metrics={
+        !loading ? (
+          <StatStrip
+            items={[
+              { label: '总计', value: stats.total, color: 'blue' },
+              { label: '启用', value: stats.active, color: 'green' },
+              { label: '禁用', value: stats.inactive, color: 'muted' },
+            ]}
+          />
+        ) : undefined
+      }
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+          <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
+            <Plus className="h-4 w-4 mr-1" />
+            添加区域
+          </Button>
+        </>
+      )}
+    >
+      {loading ? (
+        <PageLoading />
+      ) : filtered.length === 0 ? (
+        <PageEmpty
+          icon={<MapPin className="h-12 w-12" />}
+          title="暂无区域数据"
+          action={(
+            <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
+              <Plus className="h-4 w-4 mr-1" />
               添加区域
             </Button>
-          </>
-        }
-      />
+          )}
+        />
+      ) : (
+        <ContentPanel toolbar={batchToolbar}>
+          <DataTable
+            columns={columns}
+            data={filtered}
+            rowKey={(r) => r.id}
+            searchable
+            searchPlaceholder="搜索区域名称或编码..."
+            searchKeys={['name', 'code']}
+            sortable
+            selectable
+            selectedIds={selectedIds}
+            onSelectionChange={setSelectedIds}
+            columnToggle
+            exportable
+            exportFilename="regions.csv"
+            emptyText="暂无匹配区域"
+          />
+        </ContentPanel>
+      )}
 
       {/* Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -275,7 +312,7 @@ export function RegionManager() {
                   value={formData.name}
                   onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                   placeholder="如：华北-北京"
-                  className="bg-slate-800/50 border-slate-700"
+                  className="dg-input"
                 />
               </div>
               <div className="space-y-1.5">
@@ -284,7 +321,7 @@ export function RegionManager() {
                   value={formData.code}
                   onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                   placeholder="如：cn-north-1"
-                  className="bg-slate-800/50 border-slate-700 font-mono"
+                  className="dg-input font-mono"
                   disabled={!!editingItem}
                 />
               </div>
@@ -293,7 +330,7 @@ export function RegionManager() {
               <div className="space-y-1.5">
                 <Label>云商</Label>
                 <Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
-                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
+                  <SelectTrigger className="dg-input">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -306,7 +343,7 @@ export function RegionManager() {
               <div className="space-y-1.5">
                 <Label>状态</Label>
                 <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
-                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
+                  <SelectTrigger className="dg-input">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -322,7 +359,7 @@ export function RegionManager() {
                 value={formData.location}
                 onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                 placeholder="如：中国北京"
-                className="bg-slate-800/50 border-slate-700"
+                className="dg-input"
               />
             </div>
             <div className="space-y-1.5">
@@ -331,7 +368,7 @@ export function RegionManager() {
                 value={formData.endpoint}
                 onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
                 placeholder="如：ecs.cn-north-1.aliyuncs.com"
-                className="bg-slate-800/50 border-slate-700 font-mono text-sm"
+                className="dg-input font-mono text-sm"
               />
             </div>
           </div>
@@ -344,6 +381,6 @@ export function RegionManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/dashboard/Dashboard.tsx b/frontend/src/components/dashboard/Dashboard.tsx
index e56d598..6deefd4 100644
--- a/frontend/src/components/dashboard/Dashboard.tsx
+++ b/frontend/src/components/dashboard/Dashboard.tsx
@@ -20,6 +20,7 @@ import type {
   DashboardCluster,
 } from './DashboardRecent';
 import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 import type { AlertEventRecord, CertExpiryRecord } from '@/types';
 
@@ -109,14 +110,12 @@ export function Dashboard() {
   const costStats = stats?.cost_stats;
 
   return (
-    <div className="dg-page">
-      {/* Page Header */}
-      <div className="dg-page-header">
-        <div>
-          <h1 className="dg-page-title">{t('dashboard.title')}</h1>
-          <p className="dg-page-subtitle">{t('dashboard.subtitle')} · {t('dashboard.lastUpdated')}: {new Date().toLocaleTimeString()}</p>
-        </div>
-        <div className="dg-page-actions">
+    <PageShell
+      variant="workspace"
+      title={t('dashboard.title')}
+      subtitle={`${t('dashboard.subtitle')} · ${t('dashboard.lastUpdated')}: ${new Date().toLocaleTimeString()}`}
+      actions={(
+        <>
           <Button
             variant="outline"
             className="dg-btn-secondary"
@@ -126,19 +125,14 @@ export function Dashboard() {
             <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
             {refreshing ? t('dashboard.refreshing') : t('dashboard.refresh')}
           </Button>
-          <Button
-            className="dg-btn-primary"
-            onClick={() => navigate('/servers')}
-          >
+          <Button className="dg-btn-primary" onClick={() => navigate('/servers')}>
             <Server className="h-4 w-4" />
             {t('dashboard.servers')}
             <ArrowRight className="h-3.5 w-3.5" />
           </Button>
-        </div>
-      </div>
-
-      {/* Stats — compact strip */}
-      <div className="animate-fade-in-delay-1">
+        </>
+      )}
+      metrics={(
         <StatStrip
           items={[
             { label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
@@ -150,10 +144,10 @@ export function Dashboard() {
             { label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
           ]}
         />
-      </div>
-
-      {/* Resource Usage Chart */}
-      <div className="animate-fade-in-delay-2">
+      )}
+      contentClassName="space-y-6"
+    >
+      <div>
         <ResourceUsageCard
           avgCpu={Number(serverStats?.avg_cpu ?? 0)}
           avgMemory={Number(serverStats?.avg_memory ?? 0)}
@@ -185,7 +179,7 @@ export function Dashboard() {
         <ServerStatusCard servers={servers} />
         <KubernetesClusterCard clusters={clusters} />
       </div>
-    </div>
+    </PageShell>
   );
 }
 
diff --git a/frontend/src/components/deploy/AppRelease.tsx b/frontend/src/components/deploy/AppRelease.tsx
index 2661453..2847971 100644
--- a/frontend/src/components/deploy/AppRelease.tsx
+++ b/frontend/src/components/deploy/AppRelease.tsx
@@ -38,6 +38,10 @@ import { toast } from 'sonner';
 import { getStatusBadge, getEnvBadge } from './releaseHelpers';
 import { ReleaseDetailDialog } from './ReleaseDetailDialog';
 import { ReleaseCreateDialog } from './ReleaseCreateDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 export function AppReleaseManager() {
   const navigate = useNavigate();
@@ -84,113 +88,23 @@ export function AppReleaseManager() {
     }
   };
 
-  return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">应用发布</h1>
-          <p className="text-sm text-slate-500 mt-1">CI/CD流水线管理与发布历史</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
-            onClick={() => navigate('/pipelines')}
-          >
-            <Settings className="h-4 w-4 mr-2" />
-            流水线配置
-          </Button>
-          <Button
-            className="bg-blue-600 hover:bg-blue-700 text-white"
-            onClick={() => setIsCreateDialogOpen(true)}
-          >
-            <Plus className="h-4 w-4 mr-2" />
-            新建发布
-          </Button>
-        </div>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">今日发布</p>
-                <p className="text-2xl font-bold text-slate-100">{releases.length}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
-                <Rocket className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">发布成功</p>
-                <p className="text-2xl font-bold text-emerald-400">
-                  {releases.filter((r) => r.status === 'success').length}
-                </p>
-              </div>
-              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
-                <CheckCircle className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">发布失败</p>
-                <p className="text-2xl font-bold text-red-400">
-                  {releases.filter((r) => r.status === 'failed').length}
-                </p>
-              </div>
-              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
-                <XCircle className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">成功率</p>
-                <p className="text-2xl font-bold text-blue-400">
-                  {releases.length > 0
-                    ? `${Math.round((releases.filter((r) => r.status === 'success').length / releases.length) * 100)}%`
-                    : '0%'}
-                </p>
-              </div>
-              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
-                <History className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-3 flex-wrap">
+  const successCount = releases.filter((r) => r.status === 'success').length;
+  const toolbar = (
+    <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="搜索应用名称或版本..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(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>
         <Select value={envFilter} onValueChange={setEnvFilter}>
-          <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+          <SelectTrigger className="w-32 h-9 dg-input">
             <SelectValue placeholder="环境" />
           </SelectTrigger>
-          <SelectContent className="bg-slate-800 border-slate-700">
+          <SelectContent className="dg-input">
             <SelectItem value="all">全部环境</SelectItem>
             <SelectItem value="dev">开发环境</SelectItem>
             <SelectItem value="test">测试环境</SelectItem>
@@ -199,10 +113,10 @@ export function AppReleaseManager() {
           </SelectContent>
         </Select>
         <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+          <SelectTrigger className="w-32 h-9 dg-input">
             <SelectValue placeholder="状态" />
           </SelectTrigger>
-          <SelectContent className="bg-slate-800 border-slate-700">
+          <SelectContent className="dg-input">
             <SelectItem value="all">全部状态</SelectItem>
             <SelectItem value="success">成功</SelectItem>
             <SelectItem value="failed">失败</SelectItem>
@@ -210,50 +124,79 @@ export function AppReleaseManager() {
             <SelectItem value="rolled_back">已回滚</SelectItem>
           </SelectContent>
         </Select>
-      </div>
+    </div>
+  );
 
-      {/* Releases Table */}
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-0">
-          <div className="border-t border-slate-800">
+  return (
+    <PageShell
+      variant="list"
+      title="应用发布"
+      subtitle="CI/CD 流水线管理与发布历史"
+      icon={<Rocket className="h-5 w-5" />}
+      toolbar={toolbar}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '今日发布', value: releases.length, color: 'blue' },
+            { label: '发布成功', value: successCount, color: 'green' },
+            { label: '发布失败', value: releases.filter((r) => r.status === 'failed').length, color: 'red' },
+            {
+              label: '成功率',
+              value: releases.length > 0 ? `${Math.round((successCount / releases.length) * 100)}%` : '0%',
+              color: 'cyan',
+            },
+          ]}
+        />
+      )}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => navigate('/pipelines')}>
+            <Settings className="h-4 w-4 mr-2" />
+            流水线配置
+          </Button>
+          <Button className="dg-btn-primary" onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            新建发布
+          </Button>
+        </>
+      )}
+    >
+      <ContentPanel noPadding>
+        {loading ? (
+          <PageLoading />
+        ) : (
+          <div>
             <Table>
               <TableHeader>
-                <TableRow className="border-slate-800 hover:bg-transparent">
-                  <TableHead className="text-slate-400">应用名称</TableHead>
-                  <TableHead className="text-slate-400">版本</TableHead>
-                  <TableHead className="text-slate-400">环境</TableHead>
-                  <TableHead className="text-slate-400">状态</TableHead>
-                  <TableHead className="text-slate-400">代码</TableHead>
-                  <TableHead className="text-slate-400">发布人</TableHead>
-                  <TableHead className="text-slate-400">开始时间</TableHead>
-                  <TableHead className="text-slate-400 text-right">操作</TableHead>
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                  <TableHead className="dg-text-secondary">应用名称</TableHead>
+                  <TableHead className="dg-text-secondary">版本</TableHead>
+                  <TableHead className="dg-text-secondary">环境</TableHead>
+                  <TableHead className="dg-text-secondary">状态</TableHead>
+                  <TableHead className="dg-text-secondary">代码</TableHead>
+                  <TableHead className="dg-text-secondary">发布人</TableHead>
+                  <TableHead className="dg-text-secondary">开始时间</TableHead>
+                  <TableHead className="dg-text-secondary text-right">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {loading ? (
-                  <TableRow className="border-slate-800">
-                    <TableCell colSpan={8} className="text-center text-slate-500 py-8">
-                      <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
-                      加载中...
-                    </TableCell>
-                  </TableRow>
-                ) : filteredReleases.map((release) => (
-                  <TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
+                {filteredReleases.map((release) => (
+                  <TableRow key={release.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                     <TableCell>
                       <div className="flex items-center gap-2">
-                        <Rocket className="h-4 w-4 text-slate-500" />
-                        <span className="text-sm font-medium text-slate-200">{release.app_name}</span>
+                        <Rocket className="h-4 w-4 dg-text-muted" />
+                        <span className="text-sm font-medium text-[var(--dg-text-primary)]">{release.app_name}</span>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <Badge variant="outline" className="border-slate-700 text-slate-400">
+                      <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
                         {release.version}
                       </Badge>
                     </TableCell>
                     <TableCell>{getEnvBadge(release.environment)}</TableCell>
                     <TableCell>{getStatusBadge(release.status)}</TableCell>
                     <TableCell>
-                      <div className="flex items-center gap-1 text-xs text-slate-400">
+                      <div className="flex items-center gap-1 text-xs dg-text-secondary">
                         <GitBranch className="h-3 w-3" />
                         <span>{release.branch}</span>
                         <span className="mx-1">·</span>
@@ -262,10 +205,10 @@ export function AppReleaseManager() {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-slate-300">{release.deployer}</span>
+                      <span className="text-sm text-[var(--dg-text-secondary)]">{release.deployer}</span>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-slate-400">
+                      <span className="text-sm dg-text-secondary">
                         {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}
                       </span>
                     </TableCell>
@@ -274,7 +217,7 @@ export function AppReleaseManager() {
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="h-8 text-slate-400 hover:text-slate-100"
+                          className="h-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
                           onClick={() => setSelectedRelease(release)}
                         >
                           <Eye className="h-4 w-4 mr-1" />
@@ -284,7 +227,7 @@ export function AppReleaseManager() {
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="h-8 text-slate-400 hover:text-blue-400"
+                            className="h-8 dg-text-secondary hover:dg-text-blue"
                             onClick={async () => {
                               try {
                                 await releaseApi.deployRelease(release.id);
@@ -303,7 +246,7 @@ export function AppReleaseManager() {
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="h-8 text-slate-400 hover:text-amber-400"
+                            className="h-8 dg-text-secondary hover:dg-text-yellow"
                             onClick={() => handleRollback(release.id)}
                           >
                             <RotateCcw className="h-4 w-4 mr-1" />
@@ -317,8 +260,8 @@ export function AppReleaseManager() {
               </TableBody>
             </Table>
           </div>
-        </CardContent>
-      </Card>
+        )}
+      </ContentPanel>
 
       {/* Release Detail Dialog */}
       <ReleaseDetailDialog
@@ -334,6 +277,6 @@ export function AppReleaseManager() {
         onOpenChange={setIsCreateDialogOpen}
         onSuccess={loadData}
       />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/CredentialFormDialog.tsx b/frontend/src/components/deploy/CredentialFormDialog.tsx
index aa33e7b..2ae9e34 100644
--- a/frontend/src/components/deploy/CredentialFormDialog.tsx
+++ b/frontend/src/components/deploy/CredentialFormDialog.tsx
@@ -130,7 +130,7 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
               </SelectContent>
             </Select>
             {filteredCredentials.length === 0 && (
-              <p className="text-xs text-amber-400 flex items-center gap-1 mt-1">
+              <p className="text-xs dg-text-yellow flex items-center gap-1 mt-1">
                 <Plus className="h-3 w-3" />
                 暂无{isRepo ? '' : 'Docker 密码'}类型凭证，请在凭证配置页面新增
               </p>
diff --git a/frontend/src/components/deploy/CredentialManager.tsx b/frontend/src/components/deploy/CredentialManager.tsx
index 4fa2373..f6fde88 100644
--- a/frontend/src/components/deploy/CredentialManager.tsx
+++ b/frontend/src/components/deploy/CredentialManager.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Plus, Pencil, Trash2, RefreshCw, Key, Shield, Search,
-  Clock, CheckCircle2, XCircle, Zap,
+  Clock, CheckCircle2, XCircle,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -15,6 +15,10 @@ import type { Credential, SecretType } from './credential-manager/types';
 import { TYPE_CONFIG, TYPE_BADGE_CLASS } from './credential-manager/constants';
 import { CredDetailDialog } from './credential-manager/CredDetailDialog';
 import { CredFormDialog } from './credential-manager/CredFormDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 // 凭据管理页编排器 // Logan.Li
 export default function CredentialManager() {
@@ -66,64 +70,77 @@ export default function CredentialManager() {
 
   const typeOptions = Object.entries(TYPE_CONFIG) as [SecretType, typeof TYPE_CONFIG[SecretType]][];
 
+  const activeCount = credentials.filter(c => c.is_active).length;
+  const toolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <Select value={filterType} onValueChange={setFilterType}>
+        <SelectTrigger className="w-[140px] h-9 dg-input text-sm">
+          <SelectValue placeholder={t('deploy.label.allType')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t('deploy.label.allType')}</SelectItem>
+          {typeOptions.map(([k, v]) => (
+            <SelectItem key={k} value={k}>
+              <span className="flex items-center gap-2"><v.icon className="h-3.5 w-3.5" />{v.label}</span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="relative flex-1 max-w-xs">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input
+          value={filterSearch}
+          onChange={e => setFilterSearch(e.target.value)}
+          placeholder={t('deploy.label.searchPlaceholder')}
+          className="pl-8 h-9 dg-input text-sm"
+        />
+      </div>
+      <span className="text-xs dg-text-muted">{t('deploy.cred.credCount', { count: credentials.length })}</span>
+    </div>
+  );
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">{t('deploy.cred.title')}</h2>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-0.5">
-            {t('deploy.cred.subtitle')}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={() => refetch()}>
+    <PageShell
+      variant="list"
+      title={t('deploy.cred.title')}
+      subtitle={t('deploy.cred.subtitle')}
+      icon={<Key className="h-5 w-5" />}
+      loading={loading}
+      loadingLabel={t('deploy.label.loading')}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: t('deploy.cred.title'), value: credentials.length, color: 'blue' },
+            { label: t('common.enable'), value: activeCount, color: 'emerald' },
+          ]}
+        />
+      )}
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => refetch()}>
             <RefreshCw className="w-4 h-4 mr-1" />{t('common.refresh')}
           </Button>
-          <Button size="sm" onClick={() => { setEditing(null); setDialogOpen(true); }}>
+          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditing(null); setDialogOpen(true); }}>
             <Plus className="w-4 h-4 mr-1" />{t('deploy.cred.addCredential')}
           </Button>
-        </div>
-      </div>
-
-      {/* 搜索与筛选 // Logan.Li */}
-      <div className="flex items-center gap-3 flex-wrap">
-        <Select value={filterType} onValueChange={setFilterType}>
-          <SelectTrigger className="w-[140px] bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] h-9 text-sm">
-            <SelectValue placeholder={t('deploy.label.allType')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('deploy.label.allType')}</SelectItem>
-            {typeOptions.map(([k, v]) => (
-              <SelectItem key={k} value={k}>
-                <span className="flex items-center gap-2"><v.icon className="h-3.5 w-3.5" />{v.label}</span>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="relative flex-1 max-w-xs">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input value={filterSearch} onChange={e => setFilterSearch(e.target.value)}
-            placeholder={t('deploy.label.searchPlaceholder')}
-            className="pl-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] h-9 text-sm" />
-        </div>
-        <span className="text-xs text-[var(--dg-text-muted)]">{t('deploy.cred.credCount', { count: credentials.length })}</span>
-      </div>
-
-      {loading ? (
-        <div className="text-center py-16 text-[var(--dg-text-secondary)]">
-          <Zap className="w-6 h-6 animate-spin mx-auto mb-2 text-[var(--dg-blue)]" />{t('deploy.label.loading')}
-        </div>
-      ) : credentials.length === 0 ? (
-        <div className="text-center py-16 border border-dashed border-[var(--dg-border)] rounded-lg">
-          <Shield className="w-12 h-12 mx-auto mb-3 text-[var(--dg-text-muted)]" />
-          <p className="text-[var(--dg-text-secondary)] mb-2">{t('deploy.cred.noCredentials')}</p>
-          <p className="text-xs text-[var(--dg-text-muted)] mb-4">{t('deploy.cred.subtitle')}</p>
-          <Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
-            <Plus className="w-4 h-4 mr-1" />{t('deploy.cred.createFirst')}
-          </Button>
-        </div>
+        </>
+      )}
+    >
+      {!loading && credentials.length === 0 ? (
+        <PageEmpty
+          icon={<Shield className="h-12 w-12" />}
+          title={t('deploy.cred.noCredentials')}
+          description={t('deploy.cred.subtitle')}
+          action={(
+            <Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
+              <Plus className="w-4 h-4 mr-1" />{t('deploy.cred.createFirst')}
+            </Button>
+          )}
+        />
       ) : (
-        <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
+        <ContentPanel noPadding>
+          <div className="overflow-hidden">
           <table className="w-full text-sm">
             <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
               <tr>
@@ -183,12 +200,12 @@ export default function CredentialManager() {
                     <td className="px-3 py-2.5">
                       <div className="flex items-center gap-1">
                         {cred.is_active ? (
-                          <Badge className="bg-green-500/20 text-green-400 text-xs border-0">{t('common.enable')}</Badge>
+                          <Badge className="bg-green-500/20 dg-text-green text-xs border-0">{t('common.enable')}</Badge>
                         ) : (
-                          <Badge className="bg-red-500/20 text-red-400 text-xs border-0">{t('common.disable')}</Badge>
+                          <Badge className="bg-red-500/20 dg-text-red text-xs border-0">{t('common.disable')}</Badge>
                         )}
                         {isExpired && (
-                          <Badge className="bg-yellow-500/20 text-yellow-400 text-xs border-0"><Clock className="h-2.5 w-2.5 mr-0.5" />{t('deploy.status.expired')}</Badge>
+                          <Badge className="bg-yellow-500/20 dg-text-yellow text-xs border-0"><Clock className="h-2.5 w-2.5 mr-0.5" />{t('deploy.status.expired')}</Badge>
                         )}
                       </div>
                     </td>
@@ -201,7 +218,7 @@ export default function CredentialManager() {
                         <Button variant="ghost" size="icon" className="h-7 w-7"
                           onClick={() => handleToggleActive(cred as Credential)}
                           title={cred.is_active ? t('common.disable') : t('common.enable')}>
-                          {cred.is_active ? <XCircle className="w-3.5 h-3.5 text-yellow-500" /> : <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />}
+                          {cred.is_active ? <XCircle className="w-3.5 h-3.5 text-yellow-500" /> : <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" />}
                         </Button>
                         <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500"
                           onClick={() => handleDelete(cred as Credential)} title={t('common.delete')}>
@@ -214,11 +231,12 @@ export default function CredentialManager() {
               })}
             </tbody>
           </table>
-        </div>
+          </div>
+        </ContentPanel>
       )}
 
       <CredFormDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onSaved={() => refetch()} editData={editing} />
       <CredDetailDialog open={detailOpen} onClose={() => setDetailOpen(false)} credId={detailId} />
-    </div>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/deploy/DeployCredentials.tsx b/frontend/src/components/deploy/DeployCredentials.tsx
index 9b5d97e..39cd625 100644
--- a/frontend/src/components/deploy/DeployCredentials.tsx
+++ b/frontend/src/components/deploy/DeployCredentials.tsx
@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react';
-import { Plus, Pencil, Trash2, RefreshCw, Loader2, GitBranch, Container, Globe, Wrench} from 'lucide-react';
+import { Plus, Pencil, Trash2, RefreshCw, GitBranch, Container, Globe, Settings2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -106,6 +109,7 @@ export default function DeployCredentials() {
   const [editingId, setEditingId] = useState<number | null>(null);
   const [envDialogOpen, setEnvDialogOpen] = useState(false);
   const [editEnv, setEditEnv] = useState<Environment | null>(null);
+  const [activeTab, setActiveTab] = useState('repos');
 
   const fetchAll = async () => {
     setLoading(true);
@@ -134,34 +138,52 @@ export default function DeployCredentials() {
 
   const envTypeLabel: Record<string, string> = { production: '生产', staging: '预发布', testing: '测试', development: '开发' };
 
+  const pageTabs = [
+    { id: 'repos', label: 'Git 仓库', badge: repos.length || undefined },
+    { id: 'registries', label: '镜像仓库', badge: registries.length || undefined },
+    { id: 'environments', label: '环境管理', badge: environments.length || undefined },
+    { id: 'tools', label: '工具配置' },
+  ];
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">发布配置管理</h2>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={fetchAll}><RefreshCw className="w-4 h-4 mr-1" />刷新</Button>
-          <Button size="sm" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}>
+    <PageShell
+      variant="list"
+      title="发布配置管理"
+      subtitle="Git 仓库、镜像仓库、环境与工具配置"
+      icon={<Settings2 className="h-5 w-5" />}
+      loading={loading}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: 'Git 仓库', value: repos.length, color: 'blue' },
+            { label: '镜像仓库', value: registries.length, color: 'cyan' },
+            { label: '环境', value: environments.length, color: 'purple' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchAll}>
+            <RefreshCw className="w-4 h-4 mr-1" />刷新
+          </Button>
+          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}>
             <Plus className="w-4 h-4 mr-1" />新增 Git 仓库
           </Button>
           <Button size="sm" variant="secondary" onClick={() => { setEditType('registry'); setEditingId(null); setEditorOpen(true); }}>
             <Plus className="w-4 h-4 mr-1" />新增镜像仓库
           </Button>
-        </div>
-      </div>
-
-      <Tabs defaultValue="repos">
-        <TabsList>
-          <TabsTrigger value="repos" className="gap-1"><GitBranch className="w-4 h-4" />Git 仓库 ({repos.length})</TabsTrigger>
-          <TabsTrigger value="registries" className="gap-1"><Container className="w-4 h-4" />镜像仓库 ({registries.length})</TabsTrigger>
-          <TabsTrigger value="environments" className="gap-1"><Globe className="w-4 h-4" />环境管理 ({environments.length})</TabsTrigger>
-          <TabsTrigger value="tools" className="gap-1"><Wrench className="w-4 h-4" />工具配置</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="repos" className="mt-3">
-          {loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
-          : repos.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无 Git 仓库认证配置</div>
-          : (
-            <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
+        </>
+      )}
+    >
+      {activeTab === 'repos' && (
+        repos.length === 0 ? (
+          <PageEmpty icon={<GitBranch className="h-10 w-10" />} title="暂无 Git 仓库认证配置" />
+        ) : (
+          <ContentPanel noPadding>
+            <div className="overflow-hidden">
               <table className="w-full text-sm">
                 <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
                   <tr>
@@ -179,7 +201,7 @@ export default function DeployCredentials() {
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] hidden md:table-cell font-mono text-xs max-w-[300px] truncate">{r.url}</td>
                       <td className="px-3 py-2"><Badge variant="outline" className="text-xs">{r.auth_type}</Badge></td>
                       <td className="px-3 py-2">
-                        <Badge className={r.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{r.enabled ? '启用' : '禁用'}</Badge>
+                        <Badge className={r.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{r.enabled ? '启用' : '禁用'}</Badge>
                       </td>
                       <td className="px-3 py-2 text-right">
                         <div className="flex justify-end gap-1">
@@ -192,14 +214,16 @@ export default function DeployCredentials() {
                 </tbody>
               </table>
             </div>
-          )}
-        </TabsContent>
+          </ContentPanel>
+        )
+      )}
 
-        <TabsContent value="registries" className="mt-3">
-          {loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
-          : registries.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无镜像仓库认证配置</div>
-          : (
-            <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
+      {activeTab === 'registries' && (
+        registries.length === 0 ? (
+          <PageEmpty icon={<Container className="h-10 w-10" />} title="暂无镜像仓库认证配置" />
+        ) : (
+          <ContentPanel noPadding>
+            <div className="overflow-hidden">
               <table className="w-full text-sm">
                 <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
                   <tr>
@@ -219,7 +243,7 @@ export default function DeployCredentials() {
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] hidden sm:table-cell">{r.namespace || '-'}</td>
                       <td className="px-3 py-2"><Badge variant="outline" className="text-xs">{r.auth_type}</Badge></td>
                       <td className="px-3 py-2">
-                        <Badge className={r.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{r.enabled ? '启用' : '禁用'}</Badge>
+                        <Badge className={r.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{r.enabled ? '启用' : '禁用'}</Badge>
                       </td>
                       <td className="px-3 py-2 text-right">
                         <div className="flex justify-end gap-1">
@@ -232,20 +256,31 @@ export default function DeployCredentials() {
                 </tbody>
               </table>
             </div>
-          )}
-        </TabsContent>
+          </ContentPanel>
+        )
+      )}
 
-        {/* Environments tab */}
-        <TabsContent value="environments" className="mt-3">
+      {activeTab === 'environments' && (
+        <>
           <div className="flex items-center justify-end mb-3">
-            <Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
+            <Button size="sm" className="dg-btn-primary" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
               <Plus className="w-4 h-4 mr-1" />新增环境
             </Button>
           </div>
-          {loading ? <div className="text-center py-8 text-[var(--dg-text-secondary)]"><Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中...</div>
-          : environments.length === 0 ? <div className="text-center py-8 text-[var(--dg-text-secondary)]">暂无环境配置，点击"新增环境"创建</div>
-          : (
-            <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
+          {environments.length === 0 ? (
+            <PageEmpty
+              icon={<Globe className="h-10 w-10" />}
+              title="暂无环境配置"
+              description='点击"新增环境"创建'
+              action={(
+                <Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
+                  <Plus className="w-4 h-4 mr-1" />新增环境
+                </Button>
+              )}
+            />
+          ) : (
+            <ContentPanel noPadding>
+              <div className="overflow-hidden">
               <table className="w-full text-sm">
                 <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
                   <tr>
@@ -272,7 +307,7 @@ export default function DeployCredentials() {
                       <td className="px-3 py-2"><div className="w-6 h-6 rounded border" style={{ backgroundColor: env.color }} /></td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)]">{env.sort_order}</td>
                       <td className="px-3 py-2">
-                        <Badge className={env.enabled ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{env.enabled ? '启用' : '禁用'}</Badge>
+                        <Badge className={env.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{env.enabled ? '启用' : '禁用'}</Badge>
                       </td>
                       <td className="px-3 py-2 text-right">
                         <div className="flex justify-end gap-1">
@@ -284,15 +319,13 @@ export default function DeployCredentials() {
                   ))}
                 </tbody>
               </table>
-            </div>
+              </div>
+            </ContentPanel>
           )}
-        </TabsContent>
+        </>
+      )}
 
-        {/* Tools config tab */}
-        <TabsContent value="tools" className="mt-3">
-          <ToolConfigTab />
-        </TabsContent>
-      </Tabs>
+      {activeTab === 'tools' && <ToolConfigTab />}
 
       <CredentialFormDialog
         open={editorOpen} onOpenChange={setEditorOpen} type={editType} editId={editingId}
@@ -300,6 +333,6 @@ export default function DeployCredentials() {
       />
 
       <EnvFormDialog open={envDialogOpen} onClose={() => setEnvDialogOpen(false)} onSaved={fetchAll} editData={editEnv} />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/DeployRBAC.tsx b/frontend/src/components/deploy/DeployRBAC.tsx
index 3d6e9a1..851076e 100644
--- a/frontend/src/components/deploy/DeployRBAC.tsx
+++ b/frontend/src/components/deploy/DeployRBAC.tsx
@@ -9,6 +9,9 @@ import { Label } from '@/components/ui/label';
 import { toast } from 'sonner';
 import { deployApi, userApi, pipelineApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 interface ItemRole {
@@ -159,36 +162,41 @@ export default function DeployRBAC() {
   };
 
   const roleBadgeClass = (role: string) =>
-    role === 'owner' ? 'bg-amber-500/20 text-amber-400 border-amber-500/30' :
-    role === 'editor' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' :
-    'bg-slate-500/20 text-slate-400 border-slate-500/30';
+    role === 'owner' ? 'bg-amber-500/20 dg-text-yellow border-amber-500/30' :
+    role === 'editor' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' :
+    'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
 
   const selectedUser = users.find(u => String(u.id) === selectedUserId);
 
-  if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="w-6 h-6 animate-spin" /></div>;
+  const activeRoles = roles.filter(r => r.status === 1).length;
 
   return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-bold flex items-center gap-2 text-[var(--dg-text-primary)]">
-            <Shield className="w-5 h-5 text-purple-500" />发布权限
-          </h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
-            Jenkins-style Role Strategy — 按流水线 code 正则匹配分配角色
-          </p>
-        </div>
-        <Button onClick={() => setShowCreate(true)} disabled={showCreate}>
+    <PageShell
+      variant="list"
+      title="发布权限"
+      subtitle="Jenkins-style Role Strategy — 按流水线 code 正则匹配分配角色"
+      icon={<Shield className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: 'Item Role', value: roles.length, color: 'purple' },
+            { label: '已启用', value: activeRoles, color: 'emerald' },
+            { label: '流水线', value: pipelines.length, color: 'blue' },
+          ]}
+        />
+      )}
+      actions={(
+        <Button className="dg-btn-primary" onClick={() => setShowCreate(true)} disabled={showCreate}>
           <Plus className="w-4 h-4 mr-1" />新建角色
         </Button>
-      </div>
-
+      )}
+    >
       {/* ====== Pipeline Preview ====== */}
       <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
         <CardContent className="p-4">
           <div className="flex items-center gap-2 mb-3">
-            <GitBranch className="w-4 h-4 text-blue-500" />
+            <GitBranch className="w-4 h-4 dg-text-blue" />
             <span className="text-sm font-medium text-[var(--dg-text-primary)]">流水线命中预览</span>
             <span className="text-xs text-[var(--dg-text-muted)]">— 选择一个角色查看哪些流水线会被匹配</span>
           </div>
@@ -215,7 +223,7 @@ export default function DeployRBAC() {
                 })
             }
             {previewRoleId !== null && previewMatches.length === 0 && (
-              <span className="text-xs text-red-400">无匹配 — 请调整正则表达式</span>
+              <span className="text-xs dg-text-red">无匹配 — 请调整正则表达式</span>
             )}
           </div>
         </CardContent>
@@ -266,10 +274,7 @@ export default function DeployRBAC() {
 
       {/* Role list */}
       {roles.length === 0 ? (
-        <div className="text-center py-12 text-[var(--dg-text-secondary)]">
-          <Shield className="w-10 h-10 mx-auto mb-2 opacity-20" />
-          <p className="text-sm">暂无 Item Role</p>
-        </div>
+        <PageEmpty icon={<Shield className="h-10 w-10" />} title="暂无 Item Role" description="创建角色后按正则匹配流水线并分配给用户" />
       ) : (
         <div className="space-y-2">
           {roles.map(role => (
@@ -278,21 +283,21 @@ export default function DeployRBAC() {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3 flex-1 min-w-0">
                     <div className="w-9 h-9 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
-                      <Regex className="w-4 h-4 text-purple-400" />
+                      <Regex className="w-4 h-4 dg-text-purple" />
                     </div>
                     <div className="min-w-0">
                       <div className="flex items-center gap-1.5 flex-wrap">
                         <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{role.name}</span>
                         <Badge className={`text-xs border ${roleBadgeClass(role.role)}`}>{role.role === 'owner' ? '拥有者' : role.role === 'editor' ? '编辑者' : '查看者'}</Badge>
-                        {role.status === 0 && <Badge variant="secondary" className="text-xs text-red-400">已禁用</Badge>}
+                        {role.status === 0 && <Badge variant="secondary" className="text-xs dg-text-red">已禁用</Badge>}
                         <Badge variant="secondary" className="text-xs cursor-pointer" onClick={() => setPreviewRoleId(previewRoleId === role.id ? null : role.id)}>
                           <GitBranch className="w-3 h-3 mr-0.5" />{matchCount[role.id]?.length || 0} 条
                         </Badge>
                       </div>
                       <div className="text-xs text-[var(--dg-text-secondary)] mt-0.5 truncate">
-                        <code className="font-mono text-purple-400 bg-purple-500/10 px-1 rounded">{role.code}</code>
+                        <code className="font-mono dg-text-purple bg-purple-500/10 px-1 rounded">{role.code}</code>
                         <span className="mx-1">→</span>
-                        <code className="font-mono text-blue-400 bg-blue-500/10 px-1 rounded">{role.pattern}</code>
+                        <code className="font-mono dg-text-blue bg-blue-500/10 px-1 rounded">{role.pattern}</code>
                         {role.description && <span className="ml-2 opacity-60">{role.description}</span>}
                       </div>
                     </div>
@@ -309,8 +314,8 @@ export default function DeployRBAC() {
                             <SelectItem value="viewer">查看者</SelectItem>
                           </SelectContent>
                         </Select>
-                        <Button size="icon" variant="ghost" className="h-7 w-7 text-green-400" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
-                        <Button size="icon" variant="ghost" className="h-7 w-7 text-red-400" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
+                        <Button size="icon" variant="ghost" className="h-7 w-7 dg-text-green" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
+                        <Button size="icon" variant="ghost" className="h-7 w-7 dg-text-red" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
                       </>
                     ) : (
                       <>
@@ -331,7 +336,7 @@ export default function DeployRBAC() {
       <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
         <CardContent className="p-4">
           <div className="flex items-center gap-2 mb-3">
-            <UserPlus className="w-4 h-4 text-amber-400" />
+            <UserPlus className="w-4 h-4 dg-text-yellow" />
             <span className="text-sm font-medium text-[var(--dg-text-primary)]">分配角色给用户</span>
           </div>
           <div className="flex gap-3 items-end mb-4">
@@ -344,7 +349,7 @@ export default function DeployRBAC() {
                   {users.map(u => (
                     <SelectItem key={u.id} value={String(u.id)}>
                       {u.real_name || u.username} ({u.username})
-                      {assignments.some(a => a.user_id === u.id) && <span className="ml-2 text-xs text-purple-400">已分配</span>}
+                      {assignments.some(a => a.user_id === u.id) && <span className="ml-2 text-xs dg-text-purple">已分配</span>}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -395,7 +400,7 @@ export default function DeployRBAC() {
                             </code>
                           )}
                         </div>
-                        <Button variant="ghost" size="icon" className="h-6 w-6 text-red-400" onClick={() => handleRevoke(a.id)}>
+                        <Button variant="ghost" size="icon" className="h-6 w-6 dg-text-red" onClick={() => handleRevoke(a.id)}>
                           <X className="w-3 h-3" />
                         </Button>
                       </div>
@@ -407,6 +412,6 @@ export default function DeployRBAC() {
           )}
         </CardContent>
       </Card>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/FileBrowserDialog.tsx b/frontend/src/components/deploy/FileBrowserDialog.tsx
index 094e163..ce32043 100644
--- a/frontend/src/components/deploy/FileBrowserDialog.tsx
+++ b/frontend/src/components/deploy/FileBrowserDialog.tsx
@@ -175,7 +175,7 @@ export function FileBrowserDialog({
           )}
 
           {error && (
-            <div className="flex items-center justify-center h-full text-red-400 text-sm">
+            <div className="flex items-center justify-center h-full dg-text-red text-sm">
               {error}
             </div>
           )}
@@ -218,7 +218,7 @@ export function FileBrowserDialog({
                     onClick={() => loadDir(dir.path)}
                   >
                     <td className="py-2 pl-4 pr-2 flex items-center gap-2">
-                      <FolderOpen className="h-4 w-4 text-amber-400 shrink-0" />
+                      <FolderOpen className="h-4 w-4 dg-text-yellow shrink-0" />
                       <span className="text-[var(--dg-text-primary)]">{dir.name}</span>
                     </td>
                     <td className="py-2 px-2 text-right text-[var(--dg-text-muted)]">-</td>
diff --git a/frontend/src/components/deploy/PipelineEditor.tsx b/frontend/src/components/deploy/PipelineEditor.tsx
index daf0785..362287d 100644
--- a/frontend/src/components/deploy/PipelineEditor.tsx
+++ b/frontend/src/components/deploy/PipelineEditor.tsx
@@ -44,6 +44,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { toast } from 'sonner';
 import { pipelineApi, deployApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 // ---- types ----
@@ -76,10 +78,10 @@ function TaskCard({ task, selected, onSelect, onDelete }: { task: Task; selected
     <div
       onClick={onSelect}
       className={`flex items-center gap-3 p-3 rounded-md border cursor-pointer transition-all group ${
-        selected ? 'border-blue-500 bg-blue-500/10' : 'border-[var(--dg-border)] hover:border-slate-400 bg-[var(--dg-bg-secondary)]'
+        selected ? 'border-[var(--dg-blue)] bg-[color-mix(in_srgb,var(--dg-blue)_12%,transparent)]' : 'border-[var(--dg-border)] hover:border-[var(--dg-border-hover)] bg-[var(--dg-bg-secondary)]'
       }`}
     >
-      <div className={`p-1.5 rounded ${selected ? 'bg-blue-100' : 'bg-slate-100 dark:bg-slate-800'}`}>
+      <div className={`p-1.5 rounded ${selected ? 'bg-[color-mix(in_srgb,var(--dg-blue)_15%,transparent)]' : 'bg-[var(--dg-bg-tertiary)]'}`}>
         <Icon className={`w-4 h-4 ${selected ? 'text-blue-600' : 'text-[var(--dg-text-secondary)]'}`} />
       </div>
       <div className="flex-1 min-w-0">
@@ -113,7 +115,7 @@ function TaskEditor({ task, onUpdate }: { task: Task | null; onUpdate: (t: Task)
         <div className="flex gap-2">{['shell', 'python'].map(t => (<Badge key={t} variant={task.script_type === t ? 'default' : 'outline'} className="cursor-pointer text-xs" onClick={() => onUpdate({ ...task, script_type: t })}>{t}</Badge>))}</div>
       </div>
       <div className="space-y-1"><Label className="text-xs">脚本内容</Label>
-        <Textarea value={task.script} onChange={e => onUpdate({ ...task, script: e.target.value })} className="font-mono text-xs min-h-[200px] bg-slate-950 text-green-400" placeholder="#!/bin/bash\nset -e\necho 'hello'" />
+        <Textarea value={task.script} onChange={e => onUpdate({ ...task, script: e.target.value })} className="font-mono text-xs min-h-[200px] bg-[var(--dg-bg-primary)] dg-text-green" placeholder="#!/bin/bash\nset -e\necho 'hello'" />
       </div>
     </div>
   );
@@ -132,18 +134,18 @@ function LogDialog({ open, onClose, run, logs }: { open: boolean; onClose: () =>
             <span>耗时: {fmtDuration(run?.duration)}</span>
             <span>{run?.created_at ? new Date(run.created_at).toLocaleString('zh-CN') : '-'}</span>
           </div>
-          <div className="bg-slate-950 rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
+          <div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
             {logs.length === 0 ? (
-              <div className="text-slate-500 py-4 text-center">暂无日志</div>
+              <div className="dg-text-muted py-4 text-center">暂无日志</div>
             ) : (
               logs.map((l, i) => (
                 <div key={i} className="flex gap-2 py-0.5">
-                  <span className="text-slate-500 shrink-0">[{l.time}]</span>
+                  <span className="dg-text-muted shrink-0">[{l.time}]</span>
                   <span className={
-                    l.level === 'error' ? 'text-red-400' :
-                    l.level === 'warn' ? 'text-yellow-400' :
-                    l.level === 'success' ? 'text-green-400' :
-                    'text-slate-300'
+                    l.level === 'error' ? 'dg-text-red' :
+                    l.level === 'warn' ? 'dg-text-yellow' :
+                    l.level === 'success' ? 'dg-text-green' :
+                    'text-[var(--dg-text-secondary)]'
                   }>
                     {l.level === 'success' ? '✓' : l.level === 'error' ? '✗' : l.level === 'warn' ? '!' : '>'} {l.message}
                   </span>
@@ -323,27 +325,48 @@ export default function PipelineEditor() {
 
   const envBadge = environments.find(e => String(e.id) === String(environmentId));
 
-  if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="w-6 h-6 animate-spin" /></div>;
-  if (!pipeline) return <div className="text-center py-20 text-[var(--dg-text-secondary)]">流水线不存在</div>;
+  const editorTabs = [
+    { id: 'flow', label: '流程配置' },
+    { id: 'triggers', label: '触发设置' },
+    { id: 'variables', label: '变量' },
+    { id: 'runs', label: '发布记录', badge: runs.length || undefined },
+    { id: 'members', label: '成员管理', badge: members.length || undefined },
+  ];
+
+  if (!loading && !pipeline) {
+    return (
+      <PageShell variant="workspace" title="流水线编辑" icon={<GitBranch className="h-5 w-5" />}>
+        <PageEmpty title="流水线不存在" description="请检查链接或返回列表重试" />
+      </PageShell>
+    );
+  }
 
   return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-bold flex items-center gap-2 text-[var(--dg-text-primary)]">
-            <GitBranch className="w-5 h-5 text-blue-500" />
-            {pipeline.name}
-            {envBadge && <Badge style={{ backgroundColor: envBadge.color + '20', color: envBadge.color, borderColor: envBadge.color + '40' }} className="text-xs ml-2">{envBadge.display_name}</Badge>}
-          </h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">code: {pipeline.code} · {pipeline.description}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={handleSave} disabled={saving}><Save className="w-4 h-4 mr-1" />{saving ? '保存中...' : '保存'}</Button>
-          <Button variant="default" onClick={handleTrigger}><Play className="w-4 h-4 mr-1" />运行</Button>
-        </div>
-      </div>
-
+    <PageShell
+      variant="workspace"
+      title={pipeline?.name || '流水线编辑'}
+      subtitle={pipeline ? `code: ${pipeline.code} · ${pipeline.description || ''}` : undefined}
+      icon={<GitBranch className="h-5 w-5" />}
+      loading={loading}
+      tabs={editorTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      actions={(
+        <>
+          {envBadge && (
+            <Badge style={{ backgroundColor: envBadge.color + '20', color: envBadge.color, borderColor: envBadge.color + '40' }} className="text-xs">
+              {envBadge.display_name}
+            </Badge>
+          )}
+          <Button variant="outline" className="dg-btn-secondary" onClick={handleSave} disabled={saving}>
+            <Save className="w-4 h-4 mr-1" />{saving ? '保存中...' : '保存'}
+          </Button>
+          <Button className="dg-btn-primary" onClick={handleTrigger}>
+            <Play className="w-4 h-4 mr-1" />运行
+          </Button>
+        </>
+      )}
+    >
       {/* Environment Selector - quick bar */}
       <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
         <CardContent className="p-3 flex items-center gap-3">
@@ -368,14 +391,6 @@ export default function PipelineEditor() {
       </Card>
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="flow">流程配置</TabsTrigger>
-          <TabsTrigger value="triggers">触发设置</TabsTrigger>
-          <TabsTrigger value="variables">变量</TabsTrigger>
-          <TabsTrigger value="runs">发布记录 ({runs.length})</TabsTrigger>
-          <TabsTrigger value="members">成员管理 ({members.length})</TabsTrigger>
-        </TabsList>
-
         {/* ====== Flow Tab ====== */}
         <TabsContent value="flow" className="mt-3">
           <div className="flex gap-4">
@@ -433,18 +448,18 @@ export default function PipelineEditor() {
         <TabsContent value="triggers" className="mt-3">
           <div className="space-y-4 max-w-lg">
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
-              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><GitBranch className="w-5 h-5 text-blue-500" /><span className="font-medium">Git Push 触发</span></div><Switch checked={triggerMode === 'git_push'} onCheckedChange={v => setTriggerMode(v ? 'git_push' : 'manual')} /></div>
+              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><GitBranch className="w-5 h-5 dg-text-blue" /><span className="font-medium">Git Push 触发</span></div><Switch checked={triggerMode === 'git_push'} onCheckedChange={v => setTriggerMode(v ? 'git_push' : 'manual')} /></div>
               {triggerMode === 'git_push' && <div className="space-y-1"><Label>监听分支</Label><Input value={watchBranches} onChange={e => setWatchBranches(e.target.value)} placeholder="master, release/*" className="h-9" /></div>}
             </CardContent></Card>
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
-              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Clock className="w-5 h-5 text-blue-500" /><span className="font-medium">定时触发</span></div><Switch checked={triggerMode === 'cron'} onCheckedChange={v => setTriggerMode(v ? 'cron' : 'manual')} /></div>
+              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Clock className="w-5 h-5 dg-text-blue" /><span className="font-medium">定时触发</span></div><Switch checked={triggerMode === 'cron'} onCheckedChange={v => setTriggerMode(v ? 'cron' : 'manual')} /></div>
               {triggerMode === 'cron' && <div className="space-y-1"><Label>Cron 表达式</Label><Input value={cronExpr} onChange={e => setCronExpr(e.target.value)} placeholder="0 2 * * *" className="h-9 font-mono" /></div>}
             </CardContent></Card>
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6 space-y-4">
-              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Webhook className="w-5 h-5 text-blue-500" /><span className="font-medium">Webhook 触发</span></div><Switch checked={triggerMode === 'webhook'} onCheckedChange={v => setTriggerMode(v ? 'webhook' : 'manual')} /></div>
+              <div className="flex items-center justify-between"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Webhook className="w-5 h-5 dg-text-blue" /><span className="font-medium">Webhook 触发</span></div><Switch checked={triggerMode === 'webhook'} onCheckedChange={v => setTriggerMode(v ? 'webhook' : 'manual')} /></div>
               {triggerMode === 'webhook' && <div className="space-y-1"><Label>Secret Token</Label><Input value={webhookToken} onChange={e => setWebhookToken(e.target.value)} type="password" placeholder="输入签名密钥" className="h-9" /></div>}
             </CardContent></Card>
-            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Hand className="w-5 h-5 text-blue-500" /><span className="font-medium">手动触发</span><Badge variant="secondary" className="text-xs">默认启用</Badge></div></CardContent></Card>
+            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"><CardContent className="pt-6"><div className="flex items-center gap-2 text-[var(--dg-text-primary)]"><Hand className="w-5 h-5 dg-text-blue" /><span className="font-medium">手动触发</span><Badge variant="secondary" className="text-xs">默认启用</Badge></div></CardContent></Card>
           </div>
         </TabsContent>
 
@@ -487,10 +502,10 @@ export default function PipelineEditor() {
                     <tr key={r.id} className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
                       <td className="px-3 py-2 font-medium text-[var(--dg-text-primary)]">#{r.build_number || r.id}</td>
                       <td className="px-3 py-2">
-                        {r.status === 'success' ? <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><Check className="w-3 h-3 mr-0.5" />成功</Badge> :
-                         r.status === 'failed' ? <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><X className="w-3 h-3 mr-0.5" />失败</Badge> :
-                         r.status === 'running' ? <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30"><Loader2 className="w-3 h-3 animate-spin mr-0.5" />执行中</Badge> :
-                         r.status === 'cancelled' ? <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30"><StopCircle className="w-3 h-3 mr-0.5" />已停止</Badge> :
+                        {r.status === 'success' ? <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30"><Check className="w-3 h-3 mr-0.5" />成功</Badge> :
+                         r.status === 'failed' ? <Badge className="bg-red-500/20 dg-text-red border-red-500/30"><X className="w-3 h-3 mr-0.5" />失败</Badge> :
+                         r.status === 'running' ? <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30"><Loader2 className="w-3 h-3 animate-spin mr-0.5" />执行中</Badge> :
+                         r.status === 'cancelled' ? <Badge className="bg-yellow-500/20 dg-text-yellow border-yellow-500/30"><StopCircle className="w-3 h-3 mr-0.5" />已停止</Badge> :
                          <Badge variant="secondary" className="text-[var(--dg-text-secondary)]">{r.status}</Badge>}
                       </td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">
@@ -506,9 +521,9 @@ export default function PipelineEditor() {
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">{r.created_at ? new Date(r.created_at).toLocaleString('zh-CN') : '-'}</td>
                       <td className="px-3 py-2 text-right">
                         <div className="flex items-center justify-end gap-1">
-                          <Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300" onClick={() => handleViewLog(r)}><FileText className="w-3.5 h-3.5 mr-1" />日志</Button>
+                          <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-blue hover:text-blue-300" onClick={() => handleViewLog(r)}><FileText className="w-3.5 h-3.5 mr-1" />日志</Button>
                           {(r.status === 'running' || r.status === 'pending') && (
-                            <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleStop(r.id)}><StopCircle className="w-3.5 h-3.5 mr-1" />停止</Button>
+                            <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleStop(r.id)}><StopCircle className="w-3.5 h-3.5 mr-1" />停止</Button>
                           )}
                         </div>
                       </td>
@@ -527,7 +542,7 @@ export default function PipelineEditor() {
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-4">
                 <div className="flex items-center gap-3">
-                  <UserPlus className="w-4 h-4 text-blue-500" />
+                  <UserPlus className="w-4 h-4 dg-text-blue" />
                   <span className="text-sm font-medium text-[var(--dg-text-primary)]">添加用户</span>
                 </div>
                 <div className="flex items-end gap-3 mt-3">
@@ -572,13 +587,13 @@ export default function PipelineEditor() {
                           {directUsers.map((m: JsonData) => (
                             <div key={m.id} className="flex items-center justify-between px-4 py-3">
                               <div className="flex items-center gap-3">
-                                <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center"><Users className="w-4 h-4 text-blue-400" /></div>
+                                <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center"><Users className="w-4 h-4 dg-text-blue" /></div>
                                 <div>
                                   <div className="text-sm font-medium text-[var(--dg-text-primary)]">{m.username}</div>
-                                  <div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="text-amber-400">拥有者</span> : m.role === 'editor' ? <span className="text-blue-400">编辑者</span> : <span className="text-slate-400">查看者</span>}</div>
+                                  <div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="dg-text-yellow">拥有者</span> : m.role === 'editor' ? <span className="dg-text-blue">编辑者</span> : <span className="dg-text-secondary">查看者</span>}</div>
                                 </div>
                               </div>
-                              <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />移除</Button>
+                              <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />移除</Button>
                             </div>
                           ))}
                         </div>
@@ -594,20 +609,20 @@ export default function PipelineEditor() {
                       </div>
                       {groupAssignments.length === 0 ? (
                         <div className="py-4 text-center text-[var(--dg-text-secondary)] text-xs">
-                          暂无组授权 — 在「<a href="/deploy/groups" className="text-blue-400 underline">用户组管理</a>」页面创建组后，可在此授权
+                          暂无组授权 — 在「<a href="/deploy/groups" className="dg-text-blue underline">用户组管理</a>」页面创建组后，可在此授权
                         </div>
                       ) : (
                         <div className="divide-y divide-[var(--dg-border)]">
                           {groupAssignments.map((m: JsonData) => (
                             <div key={m.id} className="flex items-center justify-between px-4 py-3">
                               <div className="flex items-center gap-3">
-                                <div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center"><Shield className="w-4 h-4 text-purple-400" /></div>
+                                <div className="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center"><Shield className="w-4 h-4 dg-text-purple" /></div>
                                 <div>
                                   <div className="text-sm font-medium text-[var(--dg-text-primary)]">{m.group?.name || `组 #${m.group_id}`}</div>
-                                  <div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="text-amber-400">拥有者</span> : m.role === 'editor' ? <span className="text-blue-400">编辑者</span> : <span className="text-slate-400">查看者</span>} · 组内全体成员</div>
+                                  <div className="text-xs text-[var(--dg-text-secondary)]">{m.role === 'owner' ? <span className="dg-text-yellow">拥有者</span> : m.role === 'editor' ? <span className="dg-text-blue">编辑者</span> : <span className="dg-text-secondary">查看者</span>} · 组内全体成员</div>
                                 </div>
                               </div>
-                              <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />撤销授权</Button>
+                              <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => handleRemoveMember(m.id)}><Trash2 className="w-3.5 h-3.5 mr-1" />撤销授权</Button>
                             </div>
                           ))}
                         </div>
@@ -623,6 +638,6 @@ export default function PipelineEditor() {
 
       {/* Log Dialog */}
       <LogDialog open={logOpen} onClose={() => setLogOpen(false)} run={logRun} logs={logs} />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/PipelineManager.tsx b/frontend/src/components/deploy/PipelineManager.tsx
index e8e9836..5e06ee4 100644
--- a/frontend/src/components/deploy/PipelineManager.tsx
+++ b/frontend/src/components/deploy/PipelineManager.tsx
@@ -8,7 +8,6 @@ import {
   GitBranch,
   Clock,
   CheckCircle,
-  Loader2,
   Rocket,
   Container,
   ArrowRight,
@@ -26,6 +25,9 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
 import { PipelineCard } from './pipeline-manager/PipelineCard';
 import { PipelineCreateDialog } from './pipeline-manager/PipelineCreateDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 // 流水线列表页编排器 // Logan.Li
 export function PipelineManager() {
@@ -155,21 +157,68 @@ export function PipelineManager() {
     return matchSearch && matchEnv;
   });
 
+  const runningCount = pipelines.filter(p => p.last_status === 'running').length;
+
+  const toolbar = (
+    <div className="flex items-center gap-4 flex-wrap">
+      <div className="relative max-w-md flex-1 min-w-[200px]">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-secondary" />
+        <Input
+          placeholder={t('deploy.pipeline.searchPlaceholder')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-10 dg-input"
+        />
+      </div>
+      <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
+        {ENV_TYPES.map((et) => {
+          const active = envFilter === et.key;
+          const Icon = et.icon;
+          return (
+            <button
+              key={et.key}
+              onClick={() => setEnvFilter(et.key)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
+              }`}
+              style={active ? { backgroundColor: et.color } : {}}
+            >
+              <Icon className="h-3.5 w-3.5" />{et.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
   return (
-    <div className="space-y-5">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('deploy.pipeline.title')}</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{t('deploy.pipeline.subtitle')}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => refetchPipelines()}>
+    <PageShell
+      variant="list"
+      title={t('deploy.pipeline.title')}
+      subtitle={t('deploy.pipeline.subtitle')}
+      icon={<Workflow className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: t('deploy.pipeline.title'), value: pipelines.length, color: 'blue' },
+            { label: t('common.running'), value: runningCount, color: 'amber' },
+            { label: t('deploy.env.all'), value: filtered.length, color: 'muted' },
+          ]}
+        />
+      )}
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => refetchPipelines()}>
             <Clock className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />{t('common.refresh')}
           </Button>
-          <Button onClick={() => setNewOpen(true)}><Plus className="h-4 w-4 mr-2" />{t('deploy.pipeline.newPipeline')}</Button>
-        </div>
-      </div>
-
+          <Button className="dg-btn-primary" onClick={() => setNewOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />{t('deploy.pipeline.newPipeline')}
+          </Button>
+        </>
+      )}
+    >
       {/* 全流程可视化横幅 — 双路径 // Logan.Li */}
       <div className="flex items-stretch gap-3 px-4 py-3 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
         <div className="flex-1 space-y-1.5">
@@ -177,12 +226,12 @@ export function PipelineManager() {
             <GitBranch className="h-3 w-3 text-indigo-400" />
             <span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
             <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Rocket className="h-3 w-3 text-red-400" />
-            <span className="text-[10px] font-semibold text-red-400">{t('deploy.banner.deploy')}</span>
+            <Rocket className="h-3 w-3 dg-text-red" />
+            <span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
             <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
             <div className="flex items-center gap-1 px-2 py-0.5 rounded bg-blue-400/10 border border-blue-400/20">
-              <Server className="h-3 w-3 text-blue-400" />
-              <span className="text-[10px] font-medium text-blue-400">{t('deploy.banner.sshHost')}</span>
+              <Server className="h-3 w-3 dg-text-blue" />
+              <span className="text-[10px] font-medium dg-text-blue">{t('deploy.banner.sshHost')}</span>
             </div>
           </div>
           <p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.sshDesc')}</p>
@@ -193,15 +242,15 @@ export function PipelineManager() {
             <GitBranch className="h-3 w-3 text-indigo-400" />
             <span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
             <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Container className="h-3 w-3 text-cyan-400" />
-            <span className="text-[10px] font-semibold text-cyan-400">{t('deploy.banner.imageRegistry')}</span>
+            <Container className="h-3 w-3 dg-text-cyan" />
+            <span className="text-[10px] font-semibold dg-text-cyan">{t('deploy.banner.imageRegistry')}</span>
             <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Rocket className="h-3 w-3 text-red-400" />
-            <span className="text-[10px] font-semibold text-red-400">{t('deploy.banner.deploy')}</span>
+            <Rocket className="h-3 w-3 dg-text-red" />
+            <span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
             <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
             <div className="flex items-center gap-1 px-2 py-0.5 rounded bg-emerald-400/10 border border-emerald-400/20">
-              <Network className="h-3 w-3 text-emerald-400" />
-              <span className="text-[10px] font-medium text-emerald-400">{t('deploy.banner.kubernetes')}</span>
+              <Network className="h-3 w-3 dg-text-green" />
+              <span className="text-[10px] font-medium dg-text-green">{t('deploy.banner.kubernetes')}</span>
             </div>
           </div>
           <p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.k8sDesc')}</p>
@@ -209,48 +258,16 @@ export function PipelineManager() {
         <span className="self-center ml-2 text-[10px] text-[var(--dg-text-secondary)] opacity-30 tracking-wide whitespace-nowrap">{t('deploy.banner.fullFlow')}</span>
       </div>
 
-      <div className="flex items-center gap-4">
-        <div className="relative max-w-md flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
-          <Input
-            placeholder={t('deploy.pipeline.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-          />
-        </div>
-        <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
-          {ENV_TYPES.map((et) => {
-            const active = envFilter === et.key;
-            const Icon = et.icon;
-            return (
-              <button
-                key={et.key}
-                onClick={() => setEnvFilter(et.key)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-                }`}
-                style={active ? { backgroundColor: et.color } : {}}
-              >
-                <Icon className="h-3.5 w-3.5" />{et.label}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
-        </div>
-      ) : filtered.length === 0 ? (
-        <div className="text-center py-16 text-[var(--dg-text-secondary)]">
-          <Workflow className="h-10 w-10 mx-auto mb-3 opacity-30" />
-          <p className="text-sm">{t('deploy.pipeline.noData')}</p>
-          <Button variant="outline" className="mt-4" onClick={() => setNewOpen(true)}>
-            <Plus className="h-4 w-4 mr-1" />{t('deploy.pipeline.createFirst')}
-          </Button>
-        </div>
+      {!loading && filtered.length === 0 ? (
+        <PageEmpty
+          icon={<Workflow className="h-10 w-10" />}
+          title={t('deploy.pipeline.noData')}
+          action={(
+            <Button variant="outline" onClick={() => setNewOpen(true)}>
+              <Plus className="h-4 w-4 mr-1" />{t('deploy.pipeline.createFirst')}
+            </Button>
+          )}
+        />
       ) : (
         <div className="space-y-3">
           {filtered.map((pipeline) => {
@@ -275,6 +292,6 @@ export function PipelineManager() {
       )}
 
       <PipelineCreateDialog open={newOpen} onOpenChange={setNewOpen} onCreated={refetchPipelines} />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/PipelineRunDetail.tsx b/frontend/src/components/deploy/PipelineRunDetail.tsx
index 6259bf5..c35edb9 100644
--- a/frontend/src/components/deploy/PipelineRunDetail.tsx
+++ b/frontend/src/components/deploy/PipelineRunDetail.tsx
@@ -12,6 +12,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { toast } from 'sonner';
 import { pipelineApi } from '@/api';
 import { FileBrowserDialog } from './FileBrowserDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 // ═══════════ 阶段定义 (与 PipelineManager 共用) ═══════════
@@ -55,11 +57,11 @@ interface StageStatus {
 }
 
 const STATUS_BADGES: Record<string, string> = {
-  success: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
-  failed: 'bg-red-500/20 text-red-400 border-red-500/30',
-  running: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
-  pending: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
-  cancelled: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  success: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
+  failed: 'bg-red-500/20 dg-text-red border-red-500/30',
+  running: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
+  pending: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
+  cancelled: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
 };
 
 const STATUS_ICONS: JsonData = {
@@ -290,37 +292,35 @@ export default function PipelineRunDetail() {
   // 获取当前选中阶段的摘要日志
   const stageSummary = selectedStage ? getStageLogSummary(logs, selectedStage) : '';
 
+  const successCount = runs.filter(r => r.status === 'success').length;
+  const runningCount = runs.filter(r => r.status === 'running').length;
+
   return (
-    <div className="space-y-4 h-full flex flex-col">
-      {/* ═══════════ 页面头部 ═══════════ */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">
-            <History className="w-5 h-5 inline mr-2" />
-            流水线详情
-          </h2>
-          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-            {pipeline?.name && (
-              <span className="text-sm font-medium text-[var(--dg-text-primary)]">
-                {pipeline.name}
-              </span>
-            )}
-            {pipeline?.environment && (
-              <Badge className="text-xs" style={{
-                backgroundColor: pipeline.environment.color + '20',
-                color: pipeline.environment.color,
-              }}>
-                {pipeline.environment.display_name}
-              </Badge>
-            )}
-            {selectedRun && (
-              <span className="text-sm text-[var(--dg-text-secondary)]">
-                发布 #{selectedRun.build_number}
-              </span>
-            )}
-          </div>
-        </div>
-        <div className="flex gap-2 items-center">
+    <PageShell
+      variant="workspace"
+      title={pipeline?.name || '流水线详情'}
+      subtitle={selectedRun ? `发布 #${selectedRun.build_number}` : (pipeline?.code ? `code: ${pipeline.code}` : '执行记录与日志')}
+      icon={<History className="h-5 w-5" />}
+      contentClassName="space-y-4 h-full flex flex-col"
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '执行记录', value: runs.length, color: 'blue' },
+            { label: '成功', value: successCount, color: 'emerald' },
+            { label: '执行中', value: runningCount, color: 'amber' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
+          {pipeline?.environment && (
+            <Badge className="text-xs" style={{
+              backgroundColor: pipeline.environment.color + '20',
+              color: pipeline.environment.color,
+            }}>
+              {pipeline.environment.display_name}
+            </Badge>
+          )}
           {selectedIds.size > 0 && (
             <Button variant="destructive" size="sm" onClick={batchDelete} disabled={deleting}>
               <Trash2 className="w-4 h-4 mr-1" />删除 ({selectedIds.size})
@@ -329,21 +329,21 @@ export default function PipelineRunDetail() {
           <select
             value={pageSize}
             onChange={e => setPageSize(Number(e.target.value))}
-            className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-[var(--dg-text-primary)]"
+            className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] dg-input"
           >
             <option value={10}>10条/页</option>
             <option value={20}>20条/页</option>
             <option value={30}>30条/页</option>
           </select>
-          <Button variant="outline" size="sm" onClick={fetchRuns}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchRuns}>
             <RefreshCw className="w-4 h-4 mr-1" />刷新
           </Button>
-          <Button size="sm" onClick={triggerRun}>
+          <Button size="sm" className="dg-btn-primary" onClick={triggerRun}>
             <Play className="w-4 h-4 mr-1" />立即执行
           </Button>
-        </div>
-      </div>
-
+        </>
+      )}
+    >
       {/* ═══════════ 阶段进度条 (交互式) ═══════════ */}
       <div className="flex items-center gap-0 px-4 py-3 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] overflow-x-auto">
         {STAGE_DEFS.map((def, i) => {
@@ -473,7 +473,7 @@ export default function PipelineRunDetail() {
                       </td>
                       <td className="px-3 py-2.5 text-[var(--dg-text-secondary)] font-mono text-xs">
                         {run.status === 'running' ? (
-                          <span className="flex items-center gap-1 text-blue-400">
+                          <span className="flex items-center gap-1 dg-text-blue">
                             <Loader2 className="w-3 h-3 animate-spin" />执行中...
                           </span>
                         ) : formatDuration(run.duration)}
@@ -516,7 +516,7 @@ export default function PipelineRunDetail() {
                   {pipeline?.name || `#${pipelineCode}`} #{selectedRun.build_number}
                 </CardTitle>
                 {selectedRun.status === 'running' && (
-                  <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-xs">
+                  <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-xs">
                     <Loader2 className="w-3 h-3 animate-spin mr-1" />实时
                   </Badge>
                 )}
@@ -533,7 +533,7 @@ export default function PipelineRunDetail() {
                 {selectedRun.commit_id && (
                   <>
                     <span className="opacity-40">|</span>
-                    <code className="bg-amber-400/10 text-amber-400 px-1 py-0.5 rounded text-[10px]">
+                    <code className="bg-amber-400/10 dg-text-yellow px-1 py-0.5 rounded text-[10px]">
                       {selectedRun.commit_id.slice(0, 8)}
                     </code>
                   </>
@@ -541,7 +541,7 @@ export default function PipelineRunDetail() {
                 {selectedRun.image_tag && (
                   <>
                     <span className="opacity-40">|</span>
-                    <code className="bg-cyan-400/10 text-cyan-400 px-1 py-0.5 rounded text-[10px]">
+                    <code className="bg-cyan-400/10 dg-text-cyan px-1 py-0.5 rounded text-[10px]">
                       📦 {selectedRun.image_tag}
                     </code>
                   </>
@@ -558,9 +558,9 @@ export default function PipelineRunDetail() {
                     </span>
                     {(() => {
                       const st = stageStats.get(selectedStage);
-                      if (st === 'success' || st === 'completed') return <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />;
-                      if (st === 'failed' || st === 'error') return <XCircle className="h-3.5 w-3.5 text-red-400" />;
-                      if (st === 'running' || st === 'in_progress') return <Loader2 className="h-3.5 w-3.5 text-blue-400 animate-spin" />;
+                      if (st === 'success' || st === 'completed') return <CheckCircle2 className="h-3.5 w-3.5 dg-text-green" />;
+                      if (st === 'failed' || st === 'error') return <XCircle className="h-3.5 w-3.5 dg-text-red" />;
+                      if (st === 'running' || st === 'in_progress') return <Loader2 className="h-3.5 w-3.5 dg-text-blue animate-spin" />;
                       return null;
                     })()}
                     <span className="text-xs text-[var(--dg-text-muted)] truncate font-mono">
@@ -571,7 +571,7 @@ export default function PipelineRunDetail() {
               )}
               <div className="h-full overflow-y-auto bg-[#0d1117] font-mono text-xs leading-5 p-4" style={{ minHeight: 280 }}>
                 {filteredLogs.length === 0 && selectedRun.status !== 'running' ? (
-                  <div className="text-center py-12 text-slate-500">
+                  <div className="text-center py-12 dg-text-muted">
                     {selectedStage ? '该阶段暂无日志输出' : '暂无日志输出'}
                   </div>
                 ) : (
@@ -601,25 +601,25 @@ export default function PipelineRunDetail() {
                           : isSuccess ? 'border-l-2 border-emerald-500 bg-emerald-500/5' : '';
                         const msgColor = isError ? 'text-red-200'
                           : isWarn ? 'text-amber-200'
-                          : isSuccess ? 'text-emerald-200' : 'text-slate-300';
+                          : isSuccess ? 'text-emerald-200' : 'text-[var(--dg-text-secondary)]';
                         const levelBadge = isError
                           ? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-red-600/40 text-red-200">ERR</span>
                           : isWarn
                           ? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-amber-600/40 text-amber-200">WARN</span>
                           : isSuccess
                           ? <span className="shrink-0 px-1.5 py-px rounded text-[10px] font-bold bg-emerald-600/30 text-emerald-200"> OK </span>
-                          : <span className="shrink-0 px-1.5 py-px rounded text-[10px] bg-slate-600/30 text-slate-400">INFO</span>;
+                          : <span className="shrink-0 px-1.5 py-px rounded text-[10px] bg-[var(--dg-bg-active)]/30 dg-text-secondary">INFO</span>;
                         return (
                           <React.Fragment key={i}>
                             {showStage && (
-                              <div className={`flex items-center gap-2 my-2 py-1 px-2 border-l-4 rounded-r ${stageStyles[entry.stage || ''] || 'border-slate-500 bg-slate-500/10'}`}>
+                              <div className={`flex items-center gap-2 my-2 py-1 px-2 border-l-4 rounded-r ${stageStyles[entry.stage || ''] || 'border-[var(--dg-border)] bg-[var(--dg-bg-active)]/10'}`}>
                                 <span className="text-xs">{stageIcons[entry.stage || ''] || '▸'}</span>
-                                <span className="text-[11px] font-semibold tracking-wider text-slate-200">{entry.stage}</span>
-                                <span className="flex-1 border-t border-slate-700/50"></span>
+                                <span className="text-[11px] font-semibold tracking-wider text-[var(--dg-text-primary)]">{entry.stage}</span>
+                                <span className="flex-1 border-t border-[var(--dg-border)]/50"></span>
                               </div>
                             )}
                             <div className={`flex items-start gap-2 px-2 py-0.5 -mx-1 rounded-sm ${accent} ${!isError && !isWarn && !isSuccess ? 'hover:bg-white/[0.03]' : ''}`}>
-                              <span className="text-slate-600 shrink-0 w-14 text-right text-[10px] pt-px">{entry.time}</span>
+                              <span className="dg-text-muted shrink-0 w-14 text-right text-[10px] pt-px">{entry.time}</span>
                               {levelBadge}
                               <span className={`break-all ${msgColor}`}>{entry.message}</span>
                             </div>
@@ -629,7 +629,7 @@ export default function PipelineRunDetail() {
                     })()}
                     {selectedRun.status === 'running' && (
                       <div className="flex items-center gap-2 mt-2 py-1.5 px-3 bg-blue-500/10 border-l-4 border-blue-500 rounded-r">
-                        <Loader2 className="w-3 h-3 animate-spin text-blue-400 shrink-0" />
+                        <Loader2 className="w-3 h-3 animate-spin dg-text-blue shrink-0" />
                         <span className="text-[11px] text-blue-300 font-medium">流水线执行中，实时输出...</span>
                         <span className="flex gap-1 ml-1">
                           <span className="w-1 h-1 rounded-full bg-blue-400 animate-bounce" style={{ animationDelay: '0ms' }}></span>
@@ -654,6 +654,6 @@ export default function PipelineRunDetail() {
         runId={browserRun?.id ?? null}
         buildNumber={browserRun?.buildNumber ?? 0}
       />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/ReleaseApproveDialog.tsx b/frontend/src/components/deploy/ReleaseApproveDialog.tsx
index fd13455..cc97c46 100644
--- a/frontend/src/components/deploy/ReleaseApproveDialog.tsx
+++ b/frontend/src/components/deploy/ReleaseApproveDialog.tsx
@@ -73,7 +73,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
         <DialogFooter>
           <Button
             variant="outline"
-            className="border-red-600 text-red-400 hover:bg-red-600/20"
+            className="border-red-600 dg-text-red hover:bg-red-600/20"
             disabled={submitting}
             onClick={() => handleApprove(false)}
           >
diff --git a/frontend/src/components/deploy/ReleaseCreateDialog.tsx b/frontend/src/components/deploy/ReleaseCreateDialog.tsx
index 764057c..49b8c40 100644
--- a/frontend/src/components/deploy/ReleaseCreateDialog.tsx
+++ b/frontend/src/components/deploy/ReleaseCreateDialog.tsx
@@ -74,41 +74,41 @@ export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCr
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
+      <DialogContent className="max-w-2xl dg-card">
         <DialogHeader>
-          <DialogTitle className="text-slate-100">新建发布</DialogTitle>
-          <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
+          <DialogTitle className="text-[var(--dg-text-primary)]">新建发布</DialogTitle>
+          <DialogDescription className="dg-text-muted">创建新的应用版本发布申请</DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-4">
           <div>
-            <Label className="text-slate-300">应用名称</Label>
+            <Label className="text-[var(--dg-text-secondary)]">应用名称</Label>
             <Input
               value={form.appName}
               onChange={(e) => update('appName', e.target.value)}
               placeholder="如：用户中心服务"
-              className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              className="mt-1 dg-input"
             />
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <Label className="text-slate-300">版本号</Label>
+              <Label className="text-[var(--dg-text-secondary)]">版本号</Label>
               <Input
                 value={form.version}
                 onChange={(e) => update('version', e.target.value)}
                 placeholder="v1.0.0"
-                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="mt-1 dg-input"
               />
             </div>
             <div>
-              <Label className="text-slate-300">目标环境</Label>
+              <Label className="text-[var(--dg-text-secondary)]">目标环境</Label>
               <Select
                 value={form.environment}
                 onValueChange={(value) => update('environment', value)}
               >
-                <SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
+                <SelectTrigger className="mt-1 dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectContent className="dg-input">
                   <SelectItem value="dev">开发环境</SelectItem>
                   <SelectItem value="test">测试环境</SelectItem>
                   <SelectItem value="staging">预发布</SelectItem>
@@ -119,36 +119,36 @@ export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCr
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <Label className="text-slate-300">Commit ID</Label>
+              <Label className="text-[var(--dg-text-secondary)]">Commit ID</Label>
               <Input
                 value={form.commitId}
                 onChange={(e) => update('commitId', e.target.value)}
                 placeholder="abc1234"
-                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="mt-1 dg-input"
               />
             </div>
             <div>
-              <Label className="text-slate-300">提交信息</Label>
+              <Label className="text-[var(--dg-text-secondary)]">提交信息</Label>
               <Input
                 value={form.commitMsg}
                 onChange={(e) => update('commitMsg', e.target.value)}
                 placeholder="feat: 新增功能"
-                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="mt-1 dg-input"
               />
             </div>
           </div>
           <div>
-            <Label className="text-slate-300">发布说明</Label>
+            <Label className="text-[var(--dg-text-secondary)]">发布说明</Label>
             <Textarea
               value={form.description}
               onChange={(e) => update('description', e.target.value)}
               placeholder="描述本次发布的内容..."
-              className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              className="mt-1 dg-input"
             />
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => onOpenChange(false)}>
             取消
           </Button>
           <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleSubmit} disabled={submitting}>
diff --git a/frontend/src/components/deploy/ReleaseDetailDialog.tsx b/frontend/src/components/deploy/ReleaseDetailDialog.tsx
index 2e4c2ec..0bd2d53 100644
--- a/frontend/src/components/deploy/ReleaseDetailDialog.tsx
+++ b/frontend/src/components/deploy/ReleaseDetailDialog.tsx
@@ -45,16 +45,16 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl bg-slate-900 border-slate-800">
+      <DialogContent className="max-w-4xl dg-card">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <Rocket className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Rocket className="h-5 w-5 dg-text-blue" />
             {release?.app_name}
-            <Badge variant="outline" className="border-slate-700 text-slate-400">
+            <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
               {release?.version}
             </Badge>
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             环境: {release?.environment}
           </DialogDescription>
         </DialogHeader>
@@ -62,7 +62,7 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
         <div className="space-y-4">
           {/* Pipeline Steps */}
           <div className="space-y-2">
-            <h4 className="text-sm font-medium text-slate-300">发布进度</h4>
+            <h4 className="text-sm font-medium text-[var(--dg-text-secondary)]">发布进度</h4>
             <div className="space-y-2">
               {PIPELINE_STEPS.map((step, index) => (
                 <div
@@ -71,15 +71,15 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
                     'flex items-center gap-3 p-3 rounded-lg',
                     step.status === 'success' && 'bg-emerald-500/5',
                     step.status === 'running' && 'bg-blue-500/5',
-                    step.status === 'pending' && 'bg-slate-800/50'
+                    step.status === 'pending' && 'bg-[var(--dg-bg-tertiary)]/50'
                   )}
                 >
                   <div
                     className={cn(
                       'w-6 h-6 rounded-full flex items-center justify-center',
-                      step.status === 'success' && 'bg-emerald-500/20 text-emerald-400',
-                      step.status === 'running' && 'bg-blue-500/20 text-blue-400',
-                      step.status === 'pending' && 'bg-slate-700 text-slate-500'
+                      step.status === 'success' && 'bg-emerald-500/20 dg-text-green',
+                      step.status === 'running' && 'bg-blue-500/20 dg-text-blue',
+                      step.status === 'pending' && 'bg-[var(--dg-bg-active)] dg-text-muted'
                     )}
                   >
                     {step.status === 'success' ? (
@@ -90,8 +90,8 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
                       <span className="text-xs">{index + 1}</span>
                     )}
                   </div>
-                  <span className="flex-1 text-sm text-slate-200">{step.name}</span>
-                  <span className="text-sm text-slate-500">{step.duration}</span>
+                  <span className="flex-1 text-sm text-[var(--dg-text-primary)]">{step.name}</span>
+                  <span className="text-sm dg-text-muted">{step.duration}</span>
                 </div>
               ))}
             </div>
@@ -99,23 +99,23 @@ export function ReleaseDetailDialog({ release, open, onOpenChange, onSuccess }:
 
           {/* Build Logs */}
           <div className="space-y-2">
-            <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
-            <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
+            <h4 className="text-sm font-medium text-[var(--dg-text-secondary)]">构建日志</h4>
+            <div className="bg-[var(--dg-bg-primary)] rounded-lg p-4 font-mono text-xs dg-text-secondary h-48 overflow-auto">
               <div className="space-y-1">
                 <p>[10:00:00] Starting pipeline for {release?.app_name}...</p>
                 <p>[10:00:15] Checkout code from branch {release?.branch}</p>
                 <p>[10:00:30] Installing dependencies...</p>
-                <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>
+                <p className="dg-text-green">[10:01:15] Dependencies installed successfully</p>
                 <p>[10:01:15] Running code analysis...</p>
-                <p className="text-emerald-400">[10:01:45] Code analysis passed</p>
+                <p className="dg-text-green">[10:01:45] Code analysis passed</p>
                 <p>[10:01:45] Running unit tests...</p>
-                <p className="text-emerald-400">[10:04:00] All tests passed (156/156)</p>
+                <p className="dg-text-green">[10:04:00] All tests passed (156/156)</p>
                 <p>[10:04:00] Building Docker image...</p>
-                <p className="text-emerald-400">[10:07:30] Image built successfully</p>
+                <p className="dg-text-green">[10:07:30] Image built successfully</p>
                 <p>[10:07:30] Pushing image to registry...</p>
-                <p className="text-emerald-400">[10:08:50] Image pushed successfully</p>
+                <p className="dg-text-green">[10:08:50] Image pushed successfully</p>
                 <p>[10:08:50] Deploying to Kubernetes...</p>
-                <p className="text-blue-400">[10:10:00] Deployment in progress...</p>
+                <p className="dg-text-blue">[10:10:00] Deployment in progress...</p>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/deploy/ReleaseManager.tsx b/frontend/src/components/deploy/ReleaseManager.tsx
index ab67078..ed3777a 100644
--- a/frontend/src/components/deploy/ReleaseManager.tsx
+++ b/frontend/src/components/deploy/ReleaseManager.tsx
@@ -37,6 +37,10 @@ import { toast } from 'sonner';
 import { getStatusBadge, getEnvironmentBadge } from './releaseManagerHelpers';
 import { ReleaseApplyDialog } from './ReleaseApplyDialog';
 import { ReleaseApproveDialog } from './ReleaseApproveDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 export function ReleaseManager() {
   const _confirm = useConfirm();
@@ -106,40 +110,8 @@ export function ReleaseManager() {
     }
   };
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">发布管理</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">管理应用版本发布与审批流程</p>
-        </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)}>
-          <Plus className="h-4 w-4 mr-2" />
-          新建发布
-        </Button>
-      </div>
-
-      {/* Stats */}
-      <div className="grid grid-cols-5 gap-4">
-        {[
-          { label: '待审批', val: releases.filter((r) => r.status === 'pending').length, color: 'text-amber-400' },
-          { label: '发布中', val: releases.filter((r) => r.status === 'deploying').length, color: 'text-blue-400' },
-          { label: '发布成功', val: releases.filter((r) => r.status === 'success').length, color: 'text-emerald-400' },
-          { label: '发布失败', val: releases.filter((r) => r.status === 'failed').length, color: 'text-red-400' },
-          { label: '已回滚', val: releases.filter((r) => r.status === 'rolled_back').length, color: 'text-slate-400' },
-        ].map((s) => (
-          <Card key={s.label} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-            <CardContent className="p-4">
-              <p className="text-[var(--dg-text-secondary)] text-sm">{s.label}</p>
-              <p className={`text-2xl font-bold ${s.color}`}>{s.val}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-4">
+  const toolbar = (
+    <div className="flex items-center gap-4 flex-wrap">
         <div className="relative flex-1 max-w-md">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
           <Input
@@ -176,17 +148,38 @@ export function ReleaseManager() {
             <SelectItem value="rolled_back">已回滚</SelectItem>
           </SelectContent>
         </Select>
-      </div>
+    </div>
+  );
 
+  return (
+    <PageShell
+      variant="list"
+      title="发布管理"
+      subtitle="管理应用版本发布与审批流程"
+      icon={<Rocket className="h-5 w-5" />}
+      toolbar={toolbar}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '待审批', value: releases.filter((r) => r.status === 'pending').length, color: 'amber' },
+            { label: '发布中', value: releases.filter((r) => r.status === 'deploying').length, color: 'blue' },
+            { label: '发布成功', value: releases.filter((r) => r.status === 'success').length, color: 'green' },
+            { label: '发布失败', value: releases.filter((r) => r.status === 'failed').length, color: 'red' },
+            { label: '已回滚', value: releases.filter((r) => r.status === 'rolled_back').length, color: 'muted' },
+          ]}
+        />
+      )}
+      actions={(
+        <Button onClick={() => setIsCreateDialogOpen(true)} className="dg-btn-primary">
+          <Plus className="h-4 w-4 mr-2" />
+          新建发布
+        </Button>
+      )}
+    >
       {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
-        </div>
+        <PageLoading />
       ) : filteredReleases.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
-          <PackageOpen className="h-12 w-12 mb-3 opacity-50" />
-          <p className="text-sm">暂无发布记录</p>
-        </div>
+        <PageEmpty icon={<PackageOpen className="h-12 w-12" />} title="暂无发布记录" />
       ) : (
         <div className="space-y-3">
           {filteredReleases.map((release) => (
@@ -231,7 +224,7 @@ export function ReleaseManager() {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
+                        className="border-emerald-600 dg-text-green hover:bg-emerald-600/20"
                         onClick={() => {
                           setSelectedRelease(release);
                           setIsApproveDialogOpen(true);
@@ -245,7 +238,7 @@ export function ReleaseManager() {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
+                        className="border-blue-600 dg-text-blue hover:bg-blue-600/20"
                         onClick={() => handleDeploy(release.id, release.app_name, release.version)}
                       >
                         <Play className="h-4 w-4 mr-1" />
@@ -256,7 +249,7 @@ export function ReleaseManager() {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
+                        className="border-amber-600 dg-text-yellow hover:bg-amber-600/20"
                         onClick={() => handleRollback(release.id, release.app_name, release.version)}
                       >
                         <RotateCcw className="h-4 w-4 mr-1" />
@@ -363,6 +356,6 @@ export function ReleaseManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/ToolConfigTab.tsx b/frontend/src/components/deploy/ToolConfigTab.tsx
index 7750aca..7cb64b7 100644
--- a/frontend/src/components/deploy/ToolConfigTab.tsx
+++ b/frontend/src/components/deploy/ToolConfigTab.tsx
@@ -24,18 +24,18 @@ const categoryLabel: Record<string, string> = {
   build: '构建', deploy: '部署', automation: '自动化', other: '其他',
 };
 const categoryColor: Record<string, string> = {
-  build: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
-  deploy: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
-  automation: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
-  other: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  build: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
+  deploy: 'bg-cyan-500/20 dg-text-cyan border-cyan-500/30',
+  automation: 'bg-purple-500/20 dg-text-purple border-purple-500/30',
+  other: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
 };
 const _methodLabel: Record<string, string> = {
   preinstall: '预装', lazy: '懒加载', disabled: '禁用',
 };
 const _methodColor: Record<string, string> = {
-  preinstall: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
-  lazy: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
-  disabled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  preinstall: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
+  lazy: 'bg-violet-500/20 dg-text-purple border-violet-500/30',
+  disabled: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
 };
 
 // Tools that support version selection
@@ -177,10 +177,10 @@ export default function ToolConfigTab() {
                         <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 max-w-[220px] leading-tight">{tool.description}</div>
                       )}
                       {tool.installed_version && tool.status === 'installed' && (
-                        <div className="text-xs text-emerald-400 font-mono mt-0.5">v{tool.installed_version}</div>
+                        <div className="text-xs dg-text-green font-mono mt-0.5">v{tool.installed_version}</div>
                       )}
                       {tool.error_msg && (
-                        <div className="text-xs text-red-400 mt-0.5 max-w-[200px] truncate" title={tool.error_msg}>{tool.error_msg}</div>
+                        <div className="text-xs dg-text-red mt-0.5 max-w-[200px] truncate" title={tool.error_msg}>{tool.error_msg}</div>
                       )}
                     </td>
                     <td className="px-3 py-2 hidden sm:table-cell">
@@ -205,19 +205,19 @@ export default function ToolConfigTab() {
                     </td>
                     <td className="px-3 py-2">
                       {tool.status === 'installed' ? (
-                        <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-xs gap-1">
+                        <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-xs gap-1">
                           <CheckCircle className="w-3 h-3" />已安装
                         </Badge>
                       ) : tool.status === 'installing' ? (
-                        <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30 text-xs gap-1">
+                        <Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30 text-xs gap-1">
                           <Loader2 className="w-3 h-3 animate-spin" />安装中
                         </Badge>
                       ) : tool.status === 'failed' ? (
-                        <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs gap-1">
+                        <Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-xs gap-1">
                           <XCircle className="w-3 h-3" />失败
                         </Badge>
                       ) : (
-                        <Badge className="bg-slate-500/20 text-slate-400 border-slate-500/30 text-xs gap-1">
+                        <Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-xs gap-1">
                           <Clock className="w-3 h-3" />未安装
                         </Badge>
                       )}
diff --git a/frontend/src/components/deploy/UserGroupsManager.tsx b/frontend/src/components/deploy/UserGroupsManager.tsx
index 700bd67..9eb65e1 100644
--- a/frontend/src/components/deploy/UserGroupsManager.tsx
+++ b/frontend/src/components/deploy/UserGroupsManager.tsx
@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'react';
-import { Plus, Trash2, Pencil, RefreshCw, Loader2, Users, UserPlus, UserX, Shield } from 'lucide-react';
+import { Plus, Trash2, Pencil, RefreshCw, Users, UserPlus, UserX, Shield } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -78,35 +81,52 @@ export default function UserGroupsManager() {
 
   const toggleExpand = (gid: number) => setExpanded(p => ({ ...p, [gid]: !p[gid] }));
 
+  const memberCount = groups.reduce((sum, g) => sum + (g.members || []).length, 0);
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--dg-text-primary)]">用户组管理</h2>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">创建用户组，将组授权给流水线，组内成员自动获得流水线权限</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={loadGroups}><RefreshCw className="w-4 h-4 mr-1" />刷新</Button>
-          <Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
+    <PageShell
+      variant="list"
+      title="用户组管理"
+      subtitle="创建用户组，将组授权给流水线，组内成员自动获得流水线权限"
+      icon={<Users className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '用户组', value: groups.length, color: 'blue' },
+            { label: '成员总数', value: memberCount, color: 'purple' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadGroups}>
+            <RefreshCw className="w-4 h-4 mr-1" />刷新
+          </Button>
+          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
             <Plus className="w-4 h-4 mr-1" />新建用户组
           </Button>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="flex justify-center py-12"><Loader2 className="w-6 h-6 animate-spin text-[var(--dg-text-secondary)]" /></div>
-      ) : groups.length === 0 ? (
-        <div className="text-center py-12 text-[var(--dg-text-secondary)]">
-          <Users className="w-10 h-10 mx-auto mb-3 opacity-30" />
-          <p>暂无用户组，点击「新建用户组」创建</p>
-        </div>
+        </>
+      )}
+    >
+      {!loading && groups.length === 0 ? (
+        <PageEmpty
+          icon={<Users className="h-10 w-10" />}
+          title="暂无用户组"
+          description="点击「新建用户组」创建第一个用户组"
+          action={(
+            <Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
+              <Plus className="w-4 h-4 mr-1" />新建用户组
+            </Button>
+          )}
+        />
       ) : (
         <div className="space-y-3">
           {groups.map(g => (
             <div key={g.id} className="border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)]">
               <div className="flex items-center justify-between p-4">
                 <div className="flex items-center gap-3" style={{ cursor: 'pointer' }} onClick={() => toggleExpand(g.id)}>
-                  <Shield className="w-5 h-5 text-blue-400" />
+                  <Shield className="w-5 h-5 dg-text-blue" />
                   <div>
                     <div className="font-medium text-[var(--dg-text-primary)]">{g.name}</div>
                     <div className="text-xs text-[var(--dg-text-secondary)]">{g.description || '暂无描述'} · {(g.members || []).length} 位成员</div>
@@ -139,7 +159,7 @@ export default function UserGroupsManager() {
                       {(g.members || []).map(m => (
                         <Badge key={m.id} variant="secondary" className="flex items-center gap-1 pl-2 pr-1 py-1.5">
                           <Users className="w-3 h-3" />{m.username}
-                          <button className="ml-1 hover:text-red-400" onClick={() => handleRemoveMember(g.id, m.id, m.username)}>
+                          <button className="ml-1 hover:dg-text-red" onClick={() => handleRemoveMember(g.id, m.id, m.username)}>
                             <UserX className="w-3 h-3" />
                           </button>
                         </Badge>
@@ -167,6 +187,6 @@ export default function UserGroupsManager() {
           </div>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/deploy/credential-manager/CredDetailDialog.tsx b/frontend/src/components/deploy/credential-manager/CredDetailDialog.tsx
index 88f8620..e3059f5 100644
--- a/frontend/src/components/deploy/credential-manager/CredDetailDialog.tsx
+++ b/frontend/src/components/deploy/credential-manager/CredDetailDialog.tsx
@@ -88,10 +88,10 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
               </div>
               <div><span className="text-[var(--dg-text-muted)]">状态：</span>
                 {detailRecord?.is_active
-                  ? <Badge className="bg-green-500/20 text-green-400 text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
-                  : <Badge className="bg-red-500/20 text-red-400 text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
+                  ? <Badge className="bg-green-500/20 dg-text-green text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
+                  : <Badge className="bg-red-500/20 dg-text-red text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
                 {detailRecord?.expires_at && new Date(detailRecord.expires_at as string) < new Date() && (
-                  <Badge className="bg-yellow-500/20 text-yellow-400 text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
+                  <Badge className="bg-yellow-500/20 dg-text-yellow text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
                 )}
               </div>
               <div className="col-span-2 cursor-pointer" onClick={() => copyValue((detailRecord?.env_prefix as string) || '')}>
@@ -118,7 +118,7 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
                 <Key className="h-4 w-4 text-yellow-500" />密钥数据
               </div>
               <div className="p-3 rounded-md bg-yellow-500/5 border border-yellow-500/20 mb-3">
-                <p className="text-xs text-yellow-400/80">以下内容包含敏感信息，请妥善保管，不要泄露给他人。</p>
+                <p className="text-xs dg-text-yellow/80">以下内容包含敏感信息，请妥善保管，不要泄露给他人。</p>
               </div>
 
               {st === 'ssh' && <>
diff --git a/frontend/src/components/deploy/credential-manager/CredFormDialog.tsx b/frontend/src/components/deploy/credential-manager/CredFormDialog.tsx
index 416ea9a..434a615 100644
--- a/frontend/src/components/deploy/credential-manager/CredFormDialog.tsx
+++ b/frontend/src/components/deploy/credential-manager/CredFormDialog.tsx
@@ -161,7 +161,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
     const show = showMap[fieldKey];
     return (
       <div className="space-y-1">
-        <Label className="text-[var(--dg-text-secondary)] text-xs">{label}{required && !isEdit && <span className="text-red-400"> *</span>}</Label>
+        <Label className="text-[var(--dg-text-secondary)] text-xs">{label}{required && !isEdit && <span className="dg-text-red"> *</span>}</Label>
         <div className="relative">
           {isLong ? (
             <textarea value={value} onChange={e => onChange(e.target.value)}
@@ -202,7 +202,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
             <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2">基本信息</div>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1">
-                <Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="text-red-400">*</span></Label>
+                <Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="dg-text-red">*</span></Label>
                 <Input value={name} onChange={e => setName(e.target.value)} placeholder="如：生产环境 SSH"
                   className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
               </div>
@@ -212,7 +212,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
                   className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm" />
               </div>
               <div className="space-y-1">
-                <Label className="text-[var(--dg-text-secondary)] text-xs">类型{!isEdit && <span className="text-red-400"> *</span>}</Label>
+                <Label className="text-[var(--dg-text-secondary)] text-xs">类型{!isEdit && <span className="dg-text-red"> *</span>}</Label>
                 <Select value={secretType} onValueChange={(v) => setSecretType(v as SecretType)} disabled={isEdit}>
                   <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
                     <SelectValue />
@@ -276,7 +276,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
             {secretType === 'docker' && (
               <div className="grid grid-cols-2 gap-3">
                 <div className="col-span-2 space-y-1">
-                  <Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="text-red-400">*</span></Label>
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="dg-text-red">*</span></Label>
                   <Input value={dockerServer} onChange={e => setDockerServer(e.target.value)} placeholder="registry.example.com"
                     className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
                 </div>
@@ -304,7 +304,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
             {secretType === 'aksk' && (
               <div className="grid grid-cols-2 gap-3">
                 <div className="col-span-2 space-y-1">
-                  <Label className="text-[var(--dg-text-secondary)] text-xs">Access Key ID <span className="text-red-400">*</span></Label>
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Access Key ID <span className="dg-text-red">*</span></Label>
                   <Input value={akskAccessKey} onChange={e => setAkskAccessKey(e.target.value)} placeholder="AKIDxxxx..."
                     className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
                 </div>
@@ -334,7 +334,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
                   </Select>
                 </div>
                 <div className="space-y-1">
-                  <Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="text-red-400">*</span></Label>
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="dg-text-red">*</span></Label>
                   <Input value={dbHost} onChange={e => setDbHost(e.target.value)} placeholder="10.0.0.1"
                     className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
                 </div>
@@ -373,7 +373,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
             {secretType === 'generic' && (
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1">
-                  <Label className="text-[var(--dg-text-secondary)] text-xs">Key <span className="text-red-400">*</span></Label>
+                  <Label className="text-[var(--dg-text-secondary)] text-xs">Key <span className="dg-text-red">*</span></Label>
                   <Input value={genericKey} onChange={e => setGenericKey(e.target.value)} placeholder="MY_SECRET"
                     className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
                 </div>
diff --git a/frontend/src/components/deploy/credential-manager/constants.ts b/frontend/src/components/deploy/credential-manager/constants.ts
index 096b843..2f011af 100644
--- a/frontend/src/components/deploy/credential-manager/constants.ts
+++ b/frontend/src/components/deploy/credential-manager/constants.ts
@@ -6,21 +6,21 @@ import {
 import type { SecretType } from './types';
 
 export const TYPE_CONFIG: Record<SecretType, { label: string; icon: typeof Key; color: string; desc: string }> = {
-  ssh:      { label: 'SSH 密钥', icon: Server, color: 'text-amber-400', desc: 'SSH 私钥/公钥/密码' },
-  docker:   { label: 'Docker 凭证', icon: Container, color: 'text-cyan-400', desc: 'Docker Registry 登录凭据' },
-  tls:      { label: 'TLS 证书', icon: Shield, color: 'text-green-400', desc: 'TLS/SSL 证书与私钥' },
-  aksk:     { label: 'AKSK 密钥', icon: Cloud, color: 'text-purple-400', desc: '云服务 AccessKey/SecretKey' },
-  database: { label: '数据库凭证', icon: Database, color: 'text-blue-400', desc: '数据库连接信息' },
-  api:      { label: 'API 密钥', icon: Globe, color: 'text-orange-400', desc: 'API Token/Key + 端点' },
-  generic:  { label: '通用凭证', icon: FileText, color: 'text-gray-400', desc: '自定义 Key/Value 键值对' },
+  ssh:      { label: 'SSH 密钥', icon: Server, color: 'dg-text-yellow', desc: 'SSH 私钥/公钥/密码' },
+  docker:   { label: 'Docker 凭证', icon: Container, color: 'dg-text-cyan', desc: 'Docker Registry 登录凭据' },
+  tls:      { label: 'TLS 证书', icon: Shield, color: 'dg-text-green', desc: 'TLS/SSL 证书与私钥' },
+  aksk:     { label: 'AKSK 密钥', icon: Cloud, color: 'dg-text-purple', desc: '云服务 AccessKey/SecretKey' },
+  database: { label: '数据库凭证', icon: Database, color: 'dg-text-blue', desc: '数据库连接信息' },
+  api:      { label: 'API 密钥', icon: Globe, color: 'dg-text-orange', desc: 'API Token/Key + 端点' },
+  generic:  { label: '通用凭证', icon: FileText, color: 'dg-text-secondary', desc: '自定义 Key/Value 键值对' },
 };
 
 export const TYPE_BADGE_CLASS: Record<SecretType, string> = {
-  ssh: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
-  docker: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
-  tls: 'bg-green-500/20 text-green-400 border-green-500/30',
-  aksk: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
-  database: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
-  api: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
-  generic: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+  ssh: 'bg-amber-500/20 dg-text-yellow border-amber-500/30',
+  docker: 'bg-cyan-500/20 dg-text-cyan border-cyan-500/30',
+  tls: 'bg-green-500/20 dg-text-green border-green-500/30',
+  aksk: 'bg-purple-500/20 dg-text-purple border-purple-500/30',
+  database: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
+  api: 'bg-orange-500/20 dg-text-orange border-orange-500/30',
+  generic: 'dg-badge-muted',
 };
\ No newline at end of file
diff --git a/frontend/src/components/deploy/pipeline-helpers.tsx b/frontend/src/components/deploy/pipeline-helpers.tsx
index d3da0bc..a5a22f3 100644
--- a/frontend/src/components/deploy/pipeline-helpers.tsx
+++ b/frontend/src/components/deploy/pipeline-helpers.tsx
@@ -47,21 +47,21 @@ export function getStatusBadge( status: string) {
   switch (status) {
     case 'success':
       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">
           <CheckCircle className="h-3 w-3 mr-1" />
           成功
         </Badge>
       );
     case '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">
           <XCircle className="h-3 w-3 mr-1" />
           失败
         </Badge>
       );
     case 'running':
       return (
-        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+        <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
           <Loader2 className="h-3 w-3 mr-1 animate-spin" />
           运行中
         </Badge>
@@ -79,11 +79,11 @@ export function getStatusBadge( status: string) {
 export function getStageStatusIcon(status: PipelineStage['status']) {
   switch (status) {
     case 'success':
-      return <CheckCircle className="h-4 w-4 text-emerald-400" />;
+      return <CheckCircle className="h-4 w-4 dg-text-green" />;
     case 'failed':
-      return <XCircle className="h-4 w-4 text-red-400" />;
+      return <XCircle className="h-4 w-4 dg-text-red" />;
     case 'running':
-      return <Loader2 className="h-4 w-4 text-blue-400 animate-spin" />;
+      return <Loader2 className="h-4 w-4 dg-text-blue animate-spin" />;
     case 'skipped':
       return <span className="text-[var(--dg-text-secondary)] text-xs">跳过</span>;
     default:
diff --git a/frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx b/frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx
index 356f85f..b71356f 100644
--- a/frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx
+++ b/frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx
@@ -98,7 +98,7 @@ export function PipelineCard({
                     <span className="text-[var(--dg-text-secondary)] opacity-50 text-[10px] mx-0.5">+</span>
                   )}
                   {pipeline.last_commit_id && (
-                    <code className="text-amber-400 bg-amber-400/10 px-1 py-0.5 rounded text-[11px]">
+                    <code className="dg-text-yellow bg-amber-400/10 px-1 py-0.5 rounded text-[11px]">
                       {String(pipeline.last_commit_id).slice(0, 8)}
                     </code>
                   )}
@@ -106,7 +106,7 @@ export function PipelineCard({
                     <ArrowRight className="h-3 w-3 text-[var(--dg-text-secondary)] opacity-40 mx-0.5" />
                   )}
                   {pipeline.last_image_tag && (
-                    <span className="flex items-center gap-0.5 text-cyan-400">
+                    <span className="flex items-center gap-0.5 dg-text-cyan">
                       <Package className="h-3 w-3" />
                       <code className="bg-cyan-400/10 px-1 py-0.5 rounded text-[11px]">{String(pipeline.last_image_tag)}</code>
                     </span>
diff --git a/frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx b/frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx
index ebad578..50ee7b3 100644
--- a/frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx
+++ b/frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx
@@ -158,7 +158,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label>名称 <span className="text-red-400">*</span></Label>
+              <Label>名称 <span className="dg-text-red">*</span></Label>
               <Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="例如: demo-jar 后端部署" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
             </div>
             <div className="space-y-1">
@@ -238,7 +238,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
 
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label>Git URL {selectedStages.includes('checkout') && <span className="text-red-400">*</span>}</Label>
+              <Label>Git URL {selectedStages.includes('checkout') && <span className="dg-text-red">*</span>}</Label>
               <Input value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="https://gitee.com/user/repo.git" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
             </div>
             <div className="space-y-1">
@@ -260,10 +260,10 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                   ))}
                 </SelectContent>
               </Select>
-              {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs text-amber-400">建议关联凭证</p>}
+              {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs dg-text-yellow">建议关联凭证</p>}
             </div>
             <div className="space-y-1">
-              <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="text-red-400">*</span>}</Label>
+              <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="dg-text-red">*</span>}</Label>
               <Select value={String(newRegistryCredentialId)} onValueChange={(v) => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
                 <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择 Docker 凭证" /></SelectTrigger>
                 <SelectContent>
@@ -277,13 +277,13 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                   ))}
                 </SelectContent>
               </Select>
-              {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs text-amber-400">需要关联 Docker 凭证</p>}
+              {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs dg-text-yellow">需要关联 Docker 凭证</p>}
             </div>
           </div>
 
           {newRegistryCredentialId && newJobName && (
             <div className="p-2.5 rounded-md bg-blue-500/5 border border-blue-500/20 text-xs text-[var(--dg-text-secondary)]">
-              <span className="text-blue-400">镜像命名：</span>
+              <span className="dg-text-blue">镜像命名：</span>
               <code className="text-[var(--dg-text-primary)]">{'{registry}'}/{'{namespace}'}/{'{'}{'{JOB_BASE_NAME}'}{'}'}:{'{'}{'{tag}'}{'}'}</code>
               <span className="ml-2 opacity-60">例：</span>
               <code className="opacity-60">harbor.ast1001.com/test/{newJobName}:latest</code>
@@ -456,7 +456,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                       placeholder="说明"
                       className="col-span-4 h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
                     />
-                    <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 text-red-400" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
+                    <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 dg-text-red" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
                       <Trash2 className="h-3.5 w-3.5" />
                     </Button>
                   </div>
diff --git a/frontend/src/components/deploy/pipeline-manager/PipelineRunPanel.tsx b/frontend/src/components/deploy/pipeline-manager/PipelineRunPanel.tsx
index cebb629..0cf8f37 100644
--- a/frontend/src/components/deploy/pipeline-manager/PipelineRunPanel.tsx
+++ b/frontend/src/components/deploy/pipeline-manager/PipelineRunPanel.tsx
@@ -72,7 +72,7 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
         <span className="font-bold text-[var(--dg-text-primary)]">{running}/{max}</span>
         {queued > 0 && (
           <span className="text-[var(--dg-text-secondary)] ml-2">
-            构建队列 <span className="font-bold text-amber-400">({queued})</span>
+            构建队列 <span className="font-bold dg-text-yellow">({queued})</span>
           </span>
         )}
       </div>
@@ -82,12 +82,12 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
           {pendingRuns.map((run) => (
             <div key={run.id as number} className="flex items-center justify-between bg-[var(--dg-bg-tertiary)] rounded px-3 py-1.5">
               <div className="flex items-center gap-2 text-xs">
-                <Clock className="h-3 w-3 text-amber-400" />
+                <Clock className="h-3 w-3 dg-text-yellow" />
                 <span className="text-[var(--dg-text-secondary)] font-mono">#{String(run.build_number ?? run.id ?? '')}</span>
                 <span className="text-[var(--dg-text-secondary)]">{String(run.branch || '-')}</span>
                 <span className="text-[var(--dg-text-secondary)] opacity-50">{String(run.triggered_by || '-')}</span>
               </div>
-              <Button variant="ghost" size="sm" className="h-6 text-xs text-red-400 hover:text-red-300" onClick={() => handleCancel(run.id as number)}>
+              <Button variant="ghost" size="sm" className="h-6 text-xs dg-text-red hover:dg-text-red" onClick={() => handleCancel(run.id as number)}>
                 <XCircle className="h-3 w-3 mr-1" />取消
               </Button>
             </div>
@@ -100,10 +100,10 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
           {queueIds.map((id) => (
             <div key={id} className="flex items-center justify-between bg-[var(--dg-bg-tertiary)] rounded px-3 py-1.5">
               <div className="flex items-center gap-2 text-xs">
-                <Clock className="h-3 w-3 text-amber-400" />
+                <Clock className="h-3 w-3 dg-text-yellow" />
                 <span className="text-[var(--dg-text-muted)] font-mono">Run #{id}</span>
               </div>
-              <Button variant="ghost" size="sm" className="h-6 text-xs text-red-400 hover:text-red-300" onClick={() => handleCancel(id)}>
+              <Button variant="ghost" size="sm" className="h-6 text-xs dg-text-red hover:dg-text-red" onClick={() => handleCancel(id)}>
                 <XCircle className="h-3 w-3 mr-1" />取消
               </Button>
             </div>
@@ -160,19 +160,19 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
                 <td className="px-4 py-2 font-medium text-[var(--dg-text-primary)]">#{String(r.build_number ?? r.id ?? '')}</td>
                 <td className="px-4 py-2">
                   {r.status === 'success' ? (
-                    <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-[11px]">
+                    <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-[11px]">
                       <CheckCircle className="h-3 w-3 mr-0.5" />成功
                     </Badge>
                   ) : r.status === 'failed' ? (
-                    <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-[11px]">
+                    <Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-[11px]">
                       <XCircle className="h-3 w-3 mr-0.5" />失败
                     </Badge>
                   ) : r.status === 'running' ? (
-                    <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-[11px]">
+                    <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-[11px]">
                       <Loader2 className="h-3 w-3 animate-spin mr-0.5" />执行中
                     </Badge>
                   ) : r.status === 'cancelled' ? (
-                    <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-[11px]">
+                    <Badge className="bg-yellow-500/20 dg-text-yellow border-yellow-500/30 text-[11px]">
                       <StopCircle className="h-3 w-3 mr-0.5" />已停止
                     </Badge>
                   ) : (
@@ -186,11 +186,11 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
                 </td>
                 <td className="px-4 py-2 text-right">
                   <div className="flex items-center justify-end gap-1">
-                    <Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300" onClick={() => handleViewLog(r)}>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-blue hover:text-blue-300" onClick={() => handleViewLog(r)}>
                       <FileText className="h-3.5 w-3.5 mr-1" />日志
                     </Button>
                     {(r.status === 'running' || r.status === 'pending') && (
-                      <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400 hover:text-red-300" onClick={() => onStopRun(r.id as number | string)}>
+                      <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red hover:dg-text-red" onClick={() => onStopRun(r.id as number | string)}>
                         <StopCircle className="h-3.5 w-3.5 mr-1" />停止
                       </Button>
                     )}
@@ -215,14 +215,14 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
               <span>分支: {String(logRun?.branch || '-')}</span>
               <span>耗时: {fmtDuration(logRun?.duration as number | undefined)}</span>
             </div>
-            <div className="bg-slate-950 rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
+            <div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
               {logs.length === 0 ? (
-                <div className="text-slate-500 py-4 text-center">暂无日志</div>
+                <div className="dg-text-muted py-4 text-center">暂无日志</div>
               ) : (
                 logs.map((l, i) => (
                   <div key={i} className="flex gap-2 py-0.5">
-                    <span className="text-slate-500 shrink-0">[{l.time}]</span>
-                    <span className={l.level === 'error' ? 'text-red-400' : l.level === 'warn' ? 'text-yellow-400' : l.level === 'success' ? 'text-green-400' : 'text-slate-300'}>
+                    <span className="dg-text-muted shrink-0">[{l.time}]</span>
+                    <span className={l.level === 'error' ? 'dg-text-red' : l.level === 'warn' ? 'dg-text-yellow' : l.level === 'success' ? 'dg-text-green' : 'text-[var(--dg-text-secondary)]'}>
                       {l.level === 'success' ? '✓' : l.level === 'error' ? '✗' : l.level === 'warn' ? '!' : '>'} {l.message}
                     </span>
                   </div>
diff --git a/frontend/src/components/deploy/releaseHelpers.tsx b/frontend/src/components/deploy/releaseHelpers.tsx
index 7f87d25..a32aedf 100644
--- a/frontend/src/components/deploy/releaseHelpers.tsx
+++ b/frontend/src/components/deploy/releaseHelpers.tsx
@@ -14,42 +14,42 @@ export function getStatusBadge( status: string) {
   switch (status) {
     case 'success':
       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">
           <CheckCircle className="h-3 w-3 mr-1" />
           成功
         </Badge>
       );
     case '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">
           <XCircle className="h-3 w-3 mr-1" />
           失败
         </Badge>
       );
     case 'deploying':
       return (
-        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+        <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
           <Loader2 className="h-3 w-3 mr-1 animate-spin" />
           发布中
         </Badge>
       );
     case 'building':
       return (
-        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+        <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
           <Loader2 className="h-3 w-3 mr-1 animate-spin" />
           构建中
         </Badge>
       );
     case 'rolled_back':
       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-active)]/10">
           <RotateCcw className="h-3 w-3 mr-1" />
           已回滚
         </Badge>
       );
     case 'pending':
       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-active)]/10">
           <Clock className="h-3 w-3 mr-1" />
           待发布
         </Badge>
@@ -62,10 +62,10 @@ export function getStatusBadge( status: string) {
 // 环境徽章 // Logan.Li
 export function getEnvBadge( env: string) {
   const colors: Record<string, string> = {
-    dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
-    test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
-    staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
-    prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
+    dev: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10',
+    test: 'border-blue-500/30 dg-text-blue bg-blue-500/10',
+    staging: 'border-amber-500/30 dg-text-yellow bg-amber-500/10',
+    prod: 'border-emerald-500/30 dg-text-green bg-emerald-500/10',
   };
   const labels: Record<string, string> = {
     dev: '开发环境',
diff --git a/frontend/src/components/deploy/releaseManagerHelpers.tsx b/frontend/src/components/deploy/releaseManagerHelpers.tsx
index 246c65c..9459306 100644
--- a/frontend/src/components/deploy/releaseManagerHelpers.tsx
+++ b/frontend/src/components/deploy/releaseManagerHelpers.tsx
@@ -13,22 +13,22 @@ import {
 
 // 环境配置（值与后端 oneof=dev test staging prod 一致） // Logan.Li
 export const ENVIRONMENTS: Record<string, { label: string; color: string }> = {
-  dev: { label: '开发环境', color: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
-  test: { label: '测试环境', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10' },
-  staging: { label: '预发环境', color: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
-  prod: { label: '生产环境', color: 'border-red-500/30 text-red-400 bg-red-500/10' },
+  dev: { label: '开发环境', color: 'border-blue-500/30 dg-text-blue bg-blue-500/10' },
+  test: { label: '测试环境', color: 'border-cyan-500/30 dg-text-cyan bg-cyan-500/10' },
+  staging: { label: '预发环境', color: 'border-amber-500/30 dg-text-yellow bg-amber-500/10' },
+  prod: { label: '生产环境', color: 'border-red-500/30 dg-text-red bg-red-500/10' },
 };
 
 // 发布状态徽章（审批流：待审批/已审批/已驳回/发布中/发布成功/发布失败/已回滚） // Logan.Li
 export function getStatusBadge( status: string) {
   const map: Record<string, { icon: any; label: string; cls: string }> = {
-    pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 text-amber-400 bg-amber-500/10' },
-    approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 text-purple-400 bg-purple-500/10' },
-    rejected: { icon: XCircle, label: '已驳回', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
-    deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse' },
-    success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10' },
-    failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 text-red-400 bg-red-500/10' },
-    rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-slate-500/30 text-slate-400 bg-slate-500/10' },
+    pending: { icon: Clock, label: '待审批', cls: 'border-amber-500/30 dg-text-yellow bg-amber-500/10' },
+    approved: { icon: Check, label: '已审批', cls: 'border-purple-500/30 dg-text-purple bg-purple-500/10' },
+    rejected: { icon: XCircle, label: '已驳回', cls: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10' },
+    deploying: { icon: Loader2, label: '发布中', cls: 'border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse' },
+    success: { icon: CheckCircle, label: '发布成功', cls: 'border-emerald-500/30 dg-text-green bg-emerald-500/10' },
+    failed: { icon: XCircle, label: '发布失败', cls: 'border-red-500/30 dg-text-red bg-red-500/10' },
+    rolled_back: { icon: RotateCcw, label: '已回滚', cls: 'border-[var(--dg-border)] dg-text-secondary bg-[var(--dg-bg-active)]/10' },
   };
   const cfg = map[status];
   if (!cfg) return null;
@@ -45,7 +45,7 @@ export function getStatusBadge( status: string) {
 export function getEnvironmentBadge( env: string) {
   const cfg = ENVIRONMENTS[env];
   return (
-    <Badge variant="outline" className={cfg?.color || 'border-slate-500/30 text-slate-400'}>
+    <Badge variant="outline" className={cfg?.color || 'border-[var(--dg-border)] dg-text-secondary'}>
       {cfg?.label || env}
     </Badge>
   );
diff --git a/frontend/src/components/kubernetes/CapacityPage.tsx b/frontend/src/components/kubernetes/CapacityPage.tsx
index 3fde48d..7457673 100644
--- a/frontend/src/components/kubernetes/CapacityPage.tsx
+++ b/frontend/src/components/kubernetes/CapacityPage.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -9,8 +8,10 @@ import {
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
-import { RefreshCw, ChevronRight, BarChart3, Download, Cpu, HardDrive } from 'lucide-react';
+import { RefreshCw, BarChart3, Download, Cpu, HardDrive } from 'lucide-react';
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
 import type { JsonData } from '@/types/common';
 
 export default function CapacityPage() {
@@ -70,71 +71,70 @@ export default function CapacityPage() {
 
   const exportCSV = () => kubernetesApi.exportAsCSV(`capacity-${activeCluster}.csv`, rows);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 text-sm text-slate-500">
-        <Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
-        {activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
-        <ChevronRight className="h-3 w-3" /><span className="text-slate-300">容量分析</span>
-      </div>
+  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
 
-      <div className="flex items-center justify-between flex-wrap gap-3">
-        <h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><BarChart3 className="h-5 w-5 text-purple-400" />资源容量分析</h2>
-        <div className="flex items-center gap-2">
+  return (
+    <PageShell
+      variant="list"
+      title="资源容量分析"
+      subtitle={clusterName ? `${clusterName} · Deployment 资源请求与限制` : 'Deployment 资源请求与限制'}
+      icon={<BarChart3 className="h-5 w-5" />}
+      actions={(
+        <>
           <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/capacity`); }}>
-            <SelectTrigger className="w-40 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
-              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
+            <SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
             </SelectContent>
           </Select>
           <Select value={selectedNs} onValueChange={setSelectedNs}>
-            <SelectTrigger className="w-32 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
-              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
-              {namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
+            <SelectTrigger className="w-32 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">所有命名空间</SelectItem>
+              {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadCapacity} disabled={loading}>
-            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadCapacity} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
           </Button>
-          <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={exportCSV}>
-            <Download className="h-3 w-3 mr-1" />CSV
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={exportCSV}>
+            <Download className="h-4 w-4 mr-1" />
+            CSV
           </Button>
-        </div>
-      </div>
-
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel>
           <Table>
-            <TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
-              <TableHead className="text-slate-400">Deployment</TableHead>
-              <TableHead className="text-slate-400">命名空间</TableHead>
-              <TableHead className="text-slate-400">副本</TableHead>
-              <TableHead className="text-slate-400">容器</TableHead>
-              <TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
-              <TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
-              <TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
-              <TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Mem Lim</TableHead>
+            <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+              <TableHead className="dg-text-secondary">Deployment</TableHead>
+              <TableHead className="dg-text-secondary">命名空间</TableHead>
+              <TableHead className="dg-text-secondary">副本</TableHead>
+              <TableHead className="dg-text-secondary">容器</TableHead>
+              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
+              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
+              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
+              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Lim</TableHead>
             </TableRow></TableHeader>
             <TableBody>
               {rows.length === 0 ? (
-                <TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
+                <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
               ) : rows.map((r, i) => (
-                <TableRow key={`${r.deployment}-${r.container}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
-                  <TableCell className="font-medium text-slate-200 text-sm">{r.deployment}</TableCell>
-                  <TableCell><Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">{r.namespace}</Badge></TableCell>
-                  <TableCell className="text-sm text-slate-300">{r.replicas}</TableCell>
-                  <TableCell className="text-sm text-slate-400">{r.container}</TableCell>
-                  <TableCell className={`text-sm ${r.cpu_req !== '-' ? 'text-blue-400' : 'text-slate-600'}`}>{r.cpu_req}</TableCell>
-                  <TableCell className={`text-sm ${r.cpu_lim !== '-' ? 'text-cyan-400' : 'text-slate-600'}`}>{r.cpu_lim}</TableCell>
-                  <TableCell className={`text-sm ${r.mem_req !== '-' ? 'text-emerald-400' : 'text-slate-600'}`}>{r.mem_req}</TableCell>
-                  <TableCell className={`text-sm ${r.mem_lim !== '-' ? 'text-teal-400' : 'text-slate-600'}`}>{r.mem_lim}</TableCell>
+                <TableRow key={`${r.deployment}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                  <TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.deployment}</TableCell>
+                  <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
+                  <TableCell className="text-sm text-[var(--dg-text-secondary)]">{r.replicas}</TableCell>
+                  <TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
+                  <TableCell className={`text-sm ${r.cpu_req !== '-' ? 'dg-text-blue' : 'dg-text-muted'}`}>{r.cpu_req}</TableCell>
+                  <TableCell className={`text-sm ${r.cpu_lim !== '-' ? 'dg-text-cyan' : 'dg-text-muted'}`}>{r.cpu_lim}</TableCell>
+                  <TableCell className={`text-sm ${r.mem_req !== '-' ? 'dg-text-green' : 'dg-text-muted'}`}>{r.mem_req}</TableCell>
+                  <TableCell className={`text-sm ${r.mem_lim !== '-' ? 'text-teal-400' : 'dg-text-muted'}`}>{r.mem_lim}</TableCell>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
-    </div>
+      </ContentPanel>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/ClusterComparePage.tsx b/frontend/src/components/kubernetes/ClusterComparePage.tsx
index cbb45ed..34f09a1 100644
--- a/frontend/src/components/kubernetes/ClusterComparePage.tsx
+++ b/frontend/src/components/kubernetes/ClusterComparePage.tsx
@@ -84,9 +84,9 @@ export default function ClusterComparePage() {
   ]).filter(d => d.value > 0);
 
   const statusColorMap: Record<string, string> = {
-    healthy: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
-    warning: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
-    error: 'bg-red-500/15 text-red-400 border-red-500/30',
+    healthy: 'bg-emerald-500/15 dg-text-green border-emerald-500/30',
+    warning: 'bg-amber-500/15 dg-text-yellow border-amber-500/30',
+    error: 'bg-red-500/15 dg-text-red border-red-500/30',
   };
 
   // 格式化内存 (MB → GB)
@@ -105,24 +105,24 @@ export default function ClusterComparePage() {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-100">
+    <div className="min-h-screen bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)]">
       {/* Header */}
-      <div className="border-b border-slate-800/60 bg-slate-900/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
+      <div className="border-b border-[var(--dg-border)]/60 bg-[var(--dg-bg-secondary)]/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
         <div className="flex items-center gap-3">
-          <Layers className="h-5 w-5 text-blue-400" />
+          <Layers className="h-5 w-5 dg-text-blue" />
           <div>
             <h1 className="text-lg font-semibold">多集群资源对比看板</h1>
-            <p className="text-xs text-slate-500">跨集群资源用量、节点分布、健康状态对比</p>
+            <p className="text-xs dg-text-muted">跨集群资源用量、节点分布、健康状态对比</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
           <Button variant="outline" size="sm" onClick={loadData} disabled={loading}
-            className="border-slate-700 hover:bg-slate-800">
+            className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
             <RefreshCw className={`h-3.5 w-3.5 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
             刷新
           </Button>
           <Link to="/kubernetes">
-            <Button variant="outline" size="sm" className="border-slate-700 hover:bg-slate-800">
+            <Button variant="outline" size="sm" className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
               <Cloud className="h-3.5 w-3.5 mr-1.5" />集群列表
             </Button>
           </Link>
@@ -132,7 +132,7 @@ export default function ClusterComparePage() {
       <div className="p-6 space-y-6 max-w-[1600px] mx-auto">
         {error && (
           <Card className="border-red-500/30 bg-red-500/5">
-            <CardContent className="py-3 text-sm text-red-400">⚠ {error}</CardContent>
+            <CardContent className="py-3 text-sm dg-text-red">⚠ {error}</CardContent>
           </Card>
         )}
 
@@ -148,12 +148,12 @@ export default function ClusterComparePage() {
         />
 
         {clusters.length === 0 && !loading && (
-          <Card className="bg-slate-900/60 border-slate-800">
+          <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
             <CardContent className="py-12 text-center">
-              <Cloud className="h-12 w-12 text-slate-700 mx-auto mb-3" />
-              <p className="text-slate-500">暂无集群数据，请先添加 Kubernetes 集群并同步</p>
+              <Cloud className="h-12 w-12 dg-text-muted mx-auto mb-3" />
+              <p className="dg-text-muted">暂无集群数据，请先添加 Kubernetes 集群并同步</p>
               <Link to="/kubernetes" className="inline-block mt-3">
-                <Button variant="outline" size="sm" className="border-slate-700">
+                <Button variant="outline" size="sm" className="border-[var(--dg-border)]">
                   去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" />
                 </Button>
               </Link>
@@ -165,10 +165,10 @@ export default function ClusterComparePage() {
           <>
             {/* 资源对比柱状图 + 使用率柱状图 */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              <Card className="bg-slate-900/60 border-slate-800">
+              <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
                 <CardContent className="p-5">
                   <div className="flex items-center gap-2 mb-4">
-                    <Layers className="h-4 w-4 text-blue-400" />
+                    <Layers className="h-4 w-4 dg-text-blue" />
                     <h3 className="text-sm font-semibold">资源数量对比</h3>
                   </div>
                   <ResponsiveContainer width="100%" height={280}>
@@ -187,10 +187,10 @@ export default function ClusterComparePage() {
                 </CardContent>
               </Card>
 
-              <Card className="bg-slate-900/60 border-slate-800">
+              <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
                 <CardContent className="p-5">
                   <div className="flex items-center gap-2 mb-4">
-                    <Activity className="h-4 w-4 text-emerald-400" />
+                    <Activity className="h-4 w-4 dg-text-green" />
                     <h3 className="text-sm font-semibold">CPU / 内存使用率对比</h3>
                   </div>
                   <ResponsiveContainer width="100%" height={280}>
@@ -211,10 +211,10 @@ export default function ClusterComparePage() {
             {/* 雷达图 + 节点角色饼图 */}
             {clusters.length >= 2 && (
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <Card className="bg-slate-900/60 border-slate-800">
+                <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
                   <CardContent className="p-5">
                     <div className="flex items-center gap-2 mb-4">
-                      <TrendingUp className="h-4 w-4 text-purple-400" />
+                      <TrendingUp className="h-4 w-4 dg-text-purple" />
                       <h3 className="text-sm font-semibold">资源雷达对比</h3>
                     </div>
                     <ResponsiveContainer width="100%" height={320}>
@@ -238,10 +238,10 @@ export default function ClusterComparePage() {
                   </CardContent>
                 </Card>
 
-                <Card className="bg-slate-900/60 border-slate-800">
+                <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
                   <CardContent className="p-5">
                     <div className="flex items-center gap-2 mb-4">
-                      <Server className="h-4 w-4 text-amber-400" />
+                      <Server className="h-4 w-4 dg-text-yellow" />
                       <h3 className="text-sm font-semibold">节点角色分布</h3>
                     </div>
                     {nodeRolePie.length > 0 ? (
@@ -260,7 +260,7 @@ export default function ClusterComparePage() {
                         </PieChart>
                       </ResponsiveContainer>
                     ) : (
-                      <div className="h-[320px] flex items-center justify-center text-slate-600 text-sm">无节点角色数据</div>
+                      <div className="h-[320px] flex items-center justify-center dg-text-muted text-sm">无节点角色数据</div>
                     )}
                   </CardContent>
                 </Card>
@@ -268,64 +268,64 @@ export default function ClusterComparePage() {
             )}
 
             {/* 详细对比表格 */}
-            <Card className="bg-slate-900/60 border-slate-800">
+            <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
               <CardContent className="p-5">
                 <div className="flex items-center gap-2 mb-4">
-                  <HardDrive className="h-4 w-4 text-cyan-400" />
+                  <HardDrive className="h-4 w-4 dg-text-cyan" />
                   <h3 className="text-sm font-semibold">详细对比</h3>
-                  <span className="text-xs text-slate-500 ml-2">点击行可进入集群概览</span>
+                  <span className="text-xs dg-text-muted ml-2">点击行可进入集群概览</span>
                 </div>
                 <div className="overflow-x-auto">
                   <Table>
                     <TableHeader>
-                      <TableRow className="border-slate-800 hover:bg-transparent">
-                        <TableHead className="text-slate-400">集群</TableHead>
-                        <TableHead className="text-slate-400">状态</TableHead>
-                        <TableHead className="text-slate-400 text-right">节点</TableHead>
-                        <TableHead className="text-slate-400 text-right">Pod</TableHead>
-                        <TableHead className="text-slate-400 text-right">Deployment</TableHead>
-                        <TableHead className="text-slate-400 text-right">Service</TableHead>
-                        <TableHead className="text-slate-400 text-right">CPU 核数</TableHead>
-                        <TableHead className="text-slate-400 text-right">内存</TableHead>
-                        <TableHead className="text-slate-400 text-right">CPU 使用率</TableHead>
-                        <TableHead className="text-slate-400 text-right">内存使用率</TableHead>
-                        <TableHead className="text-slate-400">角色</TableHead>
-                        <TableHead className="text-slate-400">同步时间</TableHead>
+                      <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                        <TableHead className="dg-text-secondary">集群</TableHead>
+                        <TableHead className="dg-text-secondary">状态</TableHead>
+                        <TableHead className="dg-text-secondary text-right">节点</TableHead>
+                        <TableHead className="dg-text-secondary text-right">Pod</TableHead>
+                        <TableHead className="dg-text-secondary text-right">Deployment</TableHead>
+                        <TableHead className="dg-text-secondary text-right">Service</TableHead>
+                        <TableHead className="dg-text-secondary text-right">CPU 核数</TableHead>
+                        <TableHead className="dg-text-secondary text-right">内存</TableHead>
+                        <TableHead className="dg-text-secondary text-right">CPU 使用率</TableHead>
+                        <TableHead className="dg-text-secondary text-right">内存使用率</TableHead>
+                        <TableHead className="dg-text-secondary">角色</TableHead>
+                        <TableHead className="dg-text-secondary">同步时间</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {clusters.map((c: JsonData) => (
                         <TableRow key={c.id}
-                          className="border-slate-800/50 hover:bg-slate-800/30 cursor-pointer"
+                          className="border-[var(--dg-border)]/50 hover:bg-[var(--dg-bg-hover)] cursor-pointer"
                           onClick={() => navigate(`/kubernetes/${c.code}`)}
                         >
                           <TableCell>
-                            <div className="font-medium text-slate-200">{c.name}</div>
-                            <div className="text-xs text-slate-500">{c.code} · {c.api_server || '-'}</div>
+                            <div className="font-medium text-[var(--dg-text-primary)]">{c.name}</div>
+                            <div className="text-xs dg-text-muted">{c.code} · {c.api_server || '-'}</div>
                           </TableCell>
                           <TableCell>
                             <Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}>
                               {c.status === 'healthy' ? '✓ 健康' : c.status === 'warning' ? '⚠ 警告' : '✗ 异常'}
                             </Badge>
                           </TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{c.node_count}</TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{c.pod_count}</TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{c.deployment_count}</TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{c.service_count}</TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{c.total_cpu_cores || '-'}</TableCell>
-                          <TableCell className="text-right font-mono text-slate-300">{fmtMem(c.total_memory_mb)}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.node_count}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.pod_count}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.deployment_count}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.service_count}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.total_cpu_cores || '-'}</TableCell>
+                          <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{fmtMem(c.total_memory_mb)}</TableCell>
                           <TableCell className="text-right">
                             <div className="flex items-center justify-end gap-1.5">
-                              <span className="font-mono text-sm text-blue-400">{(c.cpu_usage || 0).toFixed(1)}%</span>
-                              <div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                              <span className="font-mono text-sm dg-text-blue">{(c.cpu_usage || 0).toFixed(1)}%</span>
+                              <div className="w-12 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
                                 <div className="h-full bg-blue-500 rounded-full" style={{ width: `${Math.min(c.cpu_usage || 0, 100)}%` }} />
                               </div>
                             </div>
                           </TableCell>
                           <TableCell className="text-right">
                             <div className="flex items-center justify-end gap-1.5">
-                              <span className="font-mono text-sm text-emerald-400">{(c.memory_usage || 0).toFixed(1)}%</span>
-                              <div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                              <span className="font-mono text-sm dg-text-green">{(c.memory_usage || 0).toFixed(1)}%</span>
+                              <div className="w-12 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
                                 <div className="h-full bg-emerald-500 rounded-full" style={{ width: `${Math.min(c.memory_usage || 0, 100)}%` }} />
                               </div>
                             </div>
@@ -333,15 +333,15 @@ export default function ClusterComparePage() {
                           <TableCell>
                             <div className="flex items-center gap-1 text-xs">
                               {(c.master_count > 0) && (
-                                <span className="text-emerald-400">M:{c.master_count}</span>
+                                <span className="dg-text-green">M:{c.master_count}</span>
                               )}
                               {(c.worker_count > 0) && (
-                                <span className="text-blue-400">W:{c.worker_count}</span>
+                                <span className="dg-text-blue">W:{c.worker_count}</span>
                               )}
-                              {!c.master_count && !c.worker_count && <span className="text-slate-600">-</span>}
+                              {!c.master_count && !c.worker_count && <span className="dg-text-muted">-</span>}
                             </div>
                           </TableCell>
-                          <TableCell className="text-xs text-slate-500">{fmtTime(c.last_sync_at)}</TableCell>
+                          <TableCell className="text-xs dg-text-muted">{fmtTime(c.last_sync_at)}</TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
diff --git a/frontend/src/components/kubernetes/ClusterOverviewPage.tsx b/frontend/src/components/kubernetes/ClusterOverviewPage.tsx
index 0475e5a..1354862 100644
--- a/frontend/src/components/kubernetes/ClusterOverviewPage.tsx
+++ b/frontend/src/components/kubernetes/ClusterOverviewPage.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -22,6 +21,9 @@ import {
 
 import { kubernetesApi } from '@/api';
 import { useToast } from '@/hooks/use-toast';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = {
@@ -79,66 +81,33 @@ export default function ClusterOverviewPage() {
   };
 
   return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">{clusterCode}</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{clusterCode}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">
-            集群概览
-            {clusterInfo?.version ? ` — Kubernetes ${clusterInfo.version}` : ''}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={loadData} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-          </Button>
-        </div>
-      </div>
-
-      {/* Stats cards */}
-      <div className="grid grid-cols-3 md:grid-cols-3 gap-4">
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">节点</p><p className="text-2xl font-bold text-[var(--dg-blue)]">{nodes.length}</p></div>
-              <Cpu className="h-8 w-8 opacity-30 text-[var(--dg-blue)]" />
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">命名空间</p><p className="text-2xl font-bold text-[var(--dg-green)]">{namespaces.length}</p></div>
-              <Boxes className="h-8 w-8 opacity-30 text-[var(--dg-green)]" />
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">版本</p><p className="text-lg font-bold text-[var(--dg-text-secondary)]">{clusterInfo?.version || '-'}</p></div>
-              <Server className="h-8 w-8 opacity-30 text-[var(--dg-text-secondary)]" />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Nodes table */}
+    <PageShell
+      variant="default"
+      title={clusterCode || '集群概览'}
+      subtitle={clusterInfo?.version ? `集群概览 · Kubernetes ${clusterInfo.version}` : '集群概览'}
+      icon={<Server className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '节点', value: nodes.length, color: 'blue' },
+            { label: '命名空间', value: namespaces.length, color: 'green' },
+            { label: '版本', value: clusterInfo?.version || '-', color: 'muted' },
+          ]}
+        />
+      ) : undefined}
+      actions={(
+        <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+          <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+          刷新
+        </Button>
+      )}
+    >
+      {/* 节点列表 // Logan.Li */}
       <div>
         <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
           <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />节点列表
         </h2>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-0">
+        <ContentPanel>
             <Table>
               <TableHeader>
                 <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -207,8 +176,7 @@ export default function ClusterOverviewPage() {
                 )}
               </TableBody>
             </Table>
-          </CardContent>
-        </Card>
+        </ContentPanel>
       </div>
 
       {/* Namespace list */}
@@ -241,6 +209,6 @@ export default function ClusterOverviewPage() {
           })}
         </div>
       </div>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/DeploymentDetail.tsx b/frontend/src/components/kubernetes/DeploymentDetail.tsx
index 46908b6..4fd55b6 100644
--- a/frontend/src/components/kubernetes/DeploymentDetail.tsx
+++ b/frontend/src/components/kubernetes/DeploymentDetail.tsx
@@ -123,10 +123,10 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3">加载中...</p>
         </CardContent>
       </Card>
     );
@@ -134,10 +134,10 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
 
   if (!deployment) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <XCircle className="h-8 w-8 mx-auto text-red-400" />
-          <p className="text-slate-400 mt-3">未找到 Deployment: {deploymentName}</p>
+          <XCircle className="h-8 w-8 mx-auto dg-text-red" />
+          <p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p>
           <Button variant="outline" className="mt-4" onClick={onBack}>返回</Button>
         </CardContent>
       </Card>
@@ -173,14 +173,14 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
       />
 
       <Tabs defaultValue="pods">
-        <TabsList className="bg-slate-800 border border-slate-700">
-          <TabsTrigger value="pods" className="data-[state=active]:bg-slate-700">
+        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
+          <TabsTrigger value="pods" className="data-[state=active]:bg-[var(--dg-bg-active)]">
             Pod 列表 ({pods.length})
           </TabsTrigger>
-          <TabsTrigger value="logs" className="data-[state=active]:bg-slate-700">
+          <TabsTrigger value="logs" className="data-[state=active]:bg-[var(--dg-bg-active)]">
             <FileText className="h-4 w-4 mr-1" />日志
           </TabsTrigger>
-          <TabsTrigger value="hpa" className="data-[state=active]:bg-slate-700">
+          <TabsTrigger value="hpa" className="data-[state=active]:bg-[var(--dg-bg-active)]">
             <Gauge className="h-4 w-4 mr-1" />HPA ({hpas.length})
           </TabsTrigger>
         </TabsList>
diff --git a/frontend/src/components/kubernetes/DeploymentEditAdvanced.tsx b/frontend/src/components/kubernetes/DeploymentEditAdvanced.tsx
index c26b383..f5b9851 100644
--- a/frontend/src/components/kubernetes/DeploymentEditAdvanced.tsx
+++ b/frontend/src/components/kubernetes/DeploymentEditAdvanced.tsx
@@ -320,10 +320,10 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3 text-sm">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3 text-sm">加载中...</p>
         </CardContent>
       </Card>
     );
@@ -331,8 +331,8 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
 
   if (!manifest) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-8 text-center text-slate-500">
+      <Card className="dg-card">
+        <CardContent className="p-8 text-center dg-text-muted">
           未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
         </CardContent>
       </Card>
@@ -342,20 +342,20 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
   return (
     <div className="space-y-4">
       {/* 更新策略 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <RefreshCw className="h-4 w-4 text-blue-400" />更新策略 (Strategy)
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <RefreshCw className="h-4 w-4 dg-text-blue" />更新策略 (Strategy)
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 space-y-3">
           <div className="flex items-center gap-4">
-            <label className="flex items-center gap-1.5 text-xs text-slate-300 cursor-pointer">
+            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
               <input type="radio" checked={strategyType === 'RollingUpdate'} onChange={() => setStrategyType('RollingUpdate')}
                 className="accent-blue-500" />
               RollingUpdate（滚动更新）
             </label>
-            <label className="flex items-center gap-1.5 text-xs text-slate-300 cursor-pointer">
+            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
               <input type="radio" checked={strategyType === 'Recreate'} onChange={() => setStrategyType('Recreate')}
                 className="accent-blue-500" />
               Recreate（重建）
@@ -364,14 +364,14 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
           {strategyType === 'RollingUpdate' && (
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <Label className="text-slate-500 text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
+                <Label className="dg-text-muted text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
                 <Input value={maxSurge} onChange={e => setMaxSurge(e.target.value)}
-                  placeholder="25%" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
               </div>
               <div>
-                <Label className="text-slate-500 text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
+                <Label className="dg-text-muted text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
                 <Input value={maxUnavailable} onChange={e => setMaxUnavailable(e.target.value)}
-                  placeholder="25%" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
               </div>
             </div>
           )}
@@ -379,53 +379,53 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
       </Card>
 
       {/* 历史版本 / 进度 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Clock className="h-4 w-4 text-amber-400" />历史版本 & 进度
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Clock className="h-4 w-4 dg-text-yellow" />历史版本 & 进度
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 grid grid-cols-2 gap-3">
           <div>
-            <Label className="text-slate-500 text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
+            <Label className="dg-text-muted text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
             <Input type="number" value={revisionHistoryLimit} onChange={e => setRevisionHistoryLimit(e.target.value)}
-              className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
+            <Label className="dg-text-muted text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
             <Input type="number" value={progressDeadlineSeconds} onChange={e => setProgressDeadlineSeconds(e.target.value)}
-              className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
         </CardContent>
       </Card>
 
       {/* 容忍 (Tolerations) — 此前仅有状态无 UI // Logan.Li */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200">容忍 (Tolerations)</CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
+            <CardTitle className="text-sm text-[var(--dg-text-primary)]">容忍 (Tolerations)</CardTitle>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
               onClick={() => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }])}>
               <Plus className="h-3 w-3 mr-1" />添加
             </Button>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-2">
-          {tolerations.length === 0 && <p className="text-xs text-slate-600">未配置容忍</p>}
+          {tolerations.length === 0 && <p className="text-xs dg-text-muted">未配置容忍</p>}
           {tolerations.map((t, i) => (
             <div key={i} className="grid grid-cols-[1fr_80px_1fr_100px_80px_auto] gap-2 items-center">
               <Input value={t.key} placeholder="key" onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, key: e.target.value } : x))}
-                className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
+                className="h-7 dg-input text-xs font-mono" />
               <select value={t.operator} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, operator: e.target.value } : x))}
-                className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1">
+                className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1">
                 <option value="Equal">Equal</option>
                 <option value="Exists">Exists</option>
               </select>
               <Input value={t.value} placeholder="value" disabled={t.operator === 'Exists'}
                 onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, value: e.target.value } : x))}
-                className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
+                className="h-7 dg-input text-xs font-mono" />
               <select value={t.effect} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, effect: e.target.value } : x))}
-                className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1">
+                className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1">
                 <option value="">任意</option>
                 <option value="NoSchedule">NoSchedule</option>
                 <option value="PreferNoSchedule">PreferNoSchedule</option>
@@ -433,8 +433,8 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
               </select>
               <Input value={t.tolerationSeconds} placeholder="秒" disabled={t.effect !== 'NoExecute'}
                 onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, tolerationSeconds: e.target.value } : x))}
-                className="h-7 bg-slate-800 border-slate-700 text-xs font-mono" />
-              <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}>
+                className="h-7 dg-input text-xs font-mono" />
+              <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}>
                 <Trash2 className="h-3 w-3" />
               </Button>
             </div>
@@ -457,17 +457,17 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
       />
 
       {/* Pod 级别杂项 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Settings className="h-4 w-4 text-slate-400" />Pod 级别
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Settings className="h-4 w-4 dg-text-secondary" />Pod 级别
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 grid grid-cols-2 gap-3">
           <div>
-            <Label className="text-slate-500 text-xs">dnsPolicy</Label>
+            <Label className="dg-text-muted text-xs">dnsPolicy</Label>
             <select value={dnsPolicy} onChange={e => setDnsPolicy(e.target.value)}
-              className="h-8 mt-1 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
+              className="h-8 mt-1 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
               <option value="ClusterFirst">ClusterFirst</option>
               <option value="ClusterFirstWithHostNet">ClusterFirstWithHostNet</option>
               <option value="Default">Default</option>
@@ -475,57 +475,57 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
             </select>
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">restartPolicy</Label>
+            <Label className="dg-text-muted text-xs">restartPolicy</Label>
             <select value={restartPolicy} onChange={e => setRestartPolicy(e.target.value)}
-              className="h-8 mt-1 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
+              className="h-8 mt-1 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
               <option value="Always">Always</option>
               <option value="OnFailure">OnFailure</option>
               <option value="Never">Never</option>
             </select>
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">schedulerName</Label>
+            <Label className="dg-text-muted text-xs">schedulerName</Label>
             <Input value={schedulerName} onChange={e => setSchedulerName(e.target.value)}
-              className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">terminationGracePeriodSeconds</Label>
+            <Label className="dg-text-muted text-xs">terminationGracePeriodSeconds</Label>
             <Input type="number" value={terminationGracePeriodSeconds} onChange={e => setTerminationGracePeriodSeconds(e.target.value)}
-              className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div className="col-span-2">
-            <Label className="text-slate-500 text-xs">serviceAccountName</Label>
+            <Label className="dg-text-muted text-xs">serviceAccountName</Label>
             <Input value={serviceAccountName} onChange={e => setServiceAccountName(e.target.value)}
-              placeholder="default" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              placeholder="default" className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
         </CardContent>
       </Card>
 
       {/* Pod 安全上下文 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
             <Shield className="h-4 w-4 text-rose-400" />Pod 安全上下文 (securityContext)
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 grid grid-cols-2 gap-3">
           <div>
-            <Label className="text-slate-500 text-xs">fsGroup</Label>
+            <Label className="dg-text-muted text-xs">fsGroup</Label>
             <Input type="number" value={podFsGroup} onChange={e => setPodFsGroup(e.target.value)}
-              placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">runAsUser</Label>
+            <Label className="dg-text-muted text-xs">runAsUser</Label>
             <Input type="number" value={podRunAsUser} onChange={e => setPodRunAsUser(e.target.value)}
-              placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div>
-            <Label className="text-slate-500 text-xs">runAsGroup</Label>
+            <Label className="dg-text-muted text-xs">runAsGroup</Label>
             <Input type="number" value={podRunAsGroup} onChange={e => setPodRunAsGroup(e.target.value)}
-              placeholder="1000" className="h-8 mt-1 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono" />
+              placeholder="1000" className="h-8 mt-1 dg-input text-sm font-mono" />
           </div>
           <div className="flex items-end pb-1">
-            <label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
+            <label className="flex items-center gap-2 text-xs dg-text-secondary cursor-pointer">
               <input type="checkbox" checked={podRunAsNonRoot} onChange={e => setPodRunAsNonRoot(e.target.checked)}
                 className="accent-blue-500" />
               runAsNonRoot
@@ -535,29 +535,29 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
       </Card>
 
       {/* 主机设置（M8 补全） */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Network className="h-4 w-4 text-cyan-400" />主机设置 (Host Namespace)
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Network className="h-4 w-4 dg-text-cyan" />主机设置 (Host Namespace)
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 grid grid-cols-2 gap-3">
-          <label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
+          <label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
             <input type="checkbox" checked={hostNetwork} onChange={e => setHostNetwork(e.target.checked)}
               className="accent-blue-500" />
             hostNetwork（共享主机网络命名空间）
           </label>
-          <label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
+          <label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
             <input type="checkbox" checked={hostIPC} onChange={e => setHostIPC(e.target.checked)}
               className="accent-blue-500" />
             hostIPC（共享主机 IPC 命名空间）
           </label>
-          <label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
+          <label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
             <input type="checkbox" checked={hostPID} onChange={e => setHostPID(e.target.checked)}
               className="accent-blue-500" />
             hostPID（共享主机 PID 命名空间）
           </label>
-          <label className="flex items-center gap-2 text-xs text-slate-300 cursor-pointer">
+          <label className="flex items-center gap-2 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
             <input type="checkbox" checked={shareProcessNamespace} onChange={e => setShareProcessNamespace(e.target.checked)}
               className="accent-blue-500" />
             shareProcessNamespace（共享进程命名空间）
@@ -578,7 +578,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
 
       {/* 操作栏 */}
       <div className="flex justify-end gap-2 pt-2">
-        <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
+        <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
         <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
           {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
           保存
diff --git a/frontend/src/components/kubernetes/DeploymentEditBasic.tsx b/frontend/src/components/kubernetes/DeploymentEditBasic.tsx
index 4b76b5a..7528a68 100644
--- a/frontend/src/components/kubernetes/DeploymentEditBasic.tsx
+++ b/frontend/src/components/kubernetes/DeploymentEditBasic.tsx
@@ -136,10 +136,10 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3 text-sm">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3 text-sm">加载中...</p>
         </CardContent>
       </Card>
     );
@@ -147,8 +147,8 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
 
   if (!manifest) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-8 text-center text-slate-500">
+      <Card className="dg-card">
+        <CardContent className="p-8 text-center dg-text-muted">
           未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
         </CardContent>
       </Card>
@@ -158,10 +158,10 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
   return (
     <div className="space-y-4">
       {/* 副本数 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Hash className="h-4 w-4 text-blue-400" />
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Hash className="h-4 w-4 dg-text-blue" />
             副本数 (Replicas)
           </CardTitle>
         </CardHeader>
@@ -172,64 +172,64 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
               min={0}
               value={replicas}
               onChange={e => setReplicas(Math.max(0, Number(e.target.value) || 0))}
-              className="w-32 bg-slate-800 border-slate-700 text-slate-200"
+              className="w-32 dg-input"
             />
-            <span className="text-xs text-slate-500">期望运行的 Pod 实例数量</span>
+            <span className="text-xs dg-text-muted">期望运行的 Pod 实例数量</span>
           </div>
         </CardContent>
       </Card>
 
       {/* 基本标识 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Lock className="h-4 w-4 text-slate-500" />
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Lock className="h-4 w-4 dg-text-muted" />
             {isCreate ? '基本标识' : '基本标识（只读）'}
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 grid grid-cols-2 gap-4">
           <div>
-            <Label className="text-slate-400 text-xs">名称 (name)</Label>
+            <Label className="dg-text-secondary text-xs">名称 (name)</Label>
             <Input
               value={isCreate ? resName : deploymentName}
               readOnly={!isCreate}
               onChange={e => isCreate && setResName(e.target.value)}
-              className={`mt-1 font-mono text-sm ${isCreate ? 'bg-slate-800 border-slate-700 text-slate-200' : 'bg-slate-950 border-slate-800 text-slate-500 cursor-not-allowed'}`}
+              className={`mt-1 font-mono text-sm ${isCreate ? 'dg-input' : 'bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted cursor-not-allowed'}`}
             />
           </div>
           <div>
-            <Label className="text-slate-400 text-xs">命名空间 (namespace)</Label>
+            <Label className="dg-text-secondary text-xs">命名空间 (namespace)</Label>
             <Input value={namespace} readOnly
-              className="mt-1 bg-slate-950 border-slate-800 text-slate-500 font-mono text-sm cursor-not-allowed" />
+              className="mt-1 bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted font-mono text-sm cursor-not-allowed" />
           </div>
         </CardContent>
       </Card>
 
       {/* Labels */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <Tags className="h-4 w-4 text-emerald-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Tags className="h-4 w-4 dg-text-green" />
               标签 (Labels)
-              <Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">{labels.length}</Badge>
+              <Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">{labels.length}</Badge>
             </CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addLabel}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addLabel}>
               <Plus className="h-3 w-3 mr-1" />新增
             </Button>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-1.5">
-          {labels.length === 0 && <p className="text-[11px] text-slate-600">无标签</p>}
+          {labels.length === 0 && <p className="text-[11px] dg-text-muted">无标签</p>}
           {labels.map((l, i) => (
             <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
               <Input value={l.key} placeholder="app"
                 onChange={e => updateLabel(i, { key: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={l.value} placeholder="nginx"
                 onChange={e => updateLabel(i, { value: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
+                className="dg-input font-mono text-xs h-8" />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
                 onClick={() => removeLabel(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
             </div>
           ))}
@@ -237,31 +237,31 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
       </Card>
 
       {/* Selector */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <Tags className="h-4 w-4 text-amber-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Tags className="h-4 w-4 dg-text-yellow" />
               选择器 (Selector)
               <Badge variant="outline" className="border-amber-700/50 text-amber-500 text-[10px]">⚠️ 需与模板标签一致</Badge>
             </CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addSelector}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addSelector}>
               <Plus className="h-3 w-3 mr-1" />新增
             </Button>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-1.5">
           <p className="text-[11px] text-amber-500/70 mb-1">Selector 决定哪些 Pod 归属此 Deployment。修改时必须确保与 Pod Template Labels 匹配，否则 Deployment 将无法管理 Pod。</p>
-          {selectorLabels.length === 0 && <p className="text-[11px] text-slate-600">无选择器</p>}
+          {selectorLabels.length === 0 && <p className="text-[11px] dg-text-muted">无选择器</p>}
           {selectorLabels.map((s, i) => (
             <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
               <Input value={s.key} placeholder="app"
                 onChange={e => updateSelector(i, { key: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={s.value} placeholder="nginx"
                 onChange={e => updateSelector(i, { value: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
+                className="dg-input font-mono text-xs h-8" />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
                 onClick={() => removeSelector(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
             </div>
           ))}
@@ -269,35 +269,35 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
       </Card>
 
       {/* Pod 模板标签 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <Tags className="h-4 w-4 text-cyan-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Tags className="h-4 w-4 dg-text-cyan" />
               Pod 模板标签 (template.metadata.labels)
             </CardTitle>
             <div className="flex gap-1">
-              <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={syncSelectorToTemplate}>
+              <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={syncSelectorToTemplate}>
                 从 Selector 同步
               </Button>
-              <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addTemplateLabel}>
+              <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addTemplateLabel}>
                 <Plus className="h-3 w-3 mr-1" />新增
               </Button>
             </div>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-1.5">
-          <p className="text-[11px] text-slate-600 mb-1">Pod 模板标签必须包含 Selector 全部键值，否则 Deployment 无法管理 Pod</p>
-          {templateLabels.length === 0 && <p className="text-[11px] text-slate-600">无模板标签</p>}
+          <p className="text-[11px] dg-text-muted mb-1">Pod 模板标签必须包含 Selector 全部键值，否则 Deployment 无法管理 Pod</p>
+          {templateLabels.length === 0 && <p className="text-[11px] dg-text-muted">无模板标签</p>}
           {templateLabels.map((l, i) => (
             <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
               <Input value={l.key} placeholder="app"
                 onChange={e => updateTemplateLabel(i, { key: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={l.value} placeholder="nginx"
                 onChange={e => updateTemplateLabel(i, { value: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
+                className="dg-input font-mono text-xs h-8" />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
                 onClick={() => removeTemplateLabel(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
             </div>
           ))}
@@ -305,30 +305,30 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
       </Card>
 
       {/* Annotations */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <FileText className="h-4 w-4 text-purple-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <FileText className="h-4 w-4 dg-text-purple" />
               注解 (Annotations)
-              <Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">{annotations.length}</Badge>
+              <Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">{annotations.length}</Badge>
             </CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={addAnnotation}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addAnnotation}>
               <Plus className="h-3 w-3 mr-1" />新增
             </Button>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-1.5">
-          {annotations.length === 0 && <p className="text-[11px] text-slate-600">无注解</p>}
+          {annotations.length === 0 && <p className="text-[11px] dg-text-muted">无注解</p>}
           {annotations.map((a, i) => (
             <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
               <Input value={a.key} placeholder="deployment.kubernetes.io/revision"
                 onChange={e => updateAnnotation(i, { key: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={a.value} placeholder="1"
                 onChange={e => updateAnnotation(i, { value: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300"
+                className="dg-input font-mono text-xs h-8" />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red"
                 onClick={() => removeAnnotation(i)}><Trash2 className="h-3.5 w-3.5" /></Button>
             </div>
           ))}
@@ -336,12 +336,12 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
       </Card>
 
       {/* 保存栏 */}
-      <div className="sticky bottom-0 bg-slate-950/80 backdrop-blur border-t border-slate-800 p-3 flex items-center justify-between">
-        <p className="text-[11px] text-slate-500">
-          保存将通过 <code className="text-slate-400">PUT application/yaml</code> 提交（自动剥离 status/managedFields 等只读字段）
+      <div className="sticky bottom-0 bg-[var(--dg-bg-primary)]/80 backdrop-blur border-t border-[var(--dg-border)] p-3 flex items-center justify-between">
+        <p className="text-[11px] dg-text-muted">
+          保存将通过 <code className="dg-text-secondary">PUT application/yaml</code> 提交（自动剥离 status/managedFields 等只读字段）
         </p>
         <div className="flex gap-2">
-          <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
+          <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
           <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
             {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
             保存
diff --git a/frontend/src/components/kubernetes/DeploymentEditContainers.tsx b/frontend/src/components/kubernetes/DeploymentEditContainers.tsx
index 801cd29..97807df 100644
--- a/frontend/src/components/kubernetes/DeploymentEditContainers.tsx
+++ b/frontend/src/components/kubernetes/DeploymentEditContainers.tsx
@@ -110,18 +110,18 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3 text-sm">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3 text-sm">加载中...</p>
         </CardContent>
       </Card>
     );
   }
   if (!manifest) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-8 text-center text-slate-500">
+      <Card className="dg-card">
+        <CardContent className="p-8 text-center dg-text-muted">
           未获取到 manifest 数据，请使用 YAML 编辑模式直接修改。
         </CardContent>
       </Card>
@@ -131,34 +131,34 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
   return (
     <div className="space-y-4">
       {/* Pod 级别设置：镜像拉取凭证 */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <KeyRound className="h-4 w-4 text-amber-400" />
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <KeyRound className="h-4 w-4 dg-text-yellow" />
             镜像拉取凭证 (imagePullSecrets)
-            <Badge variant="outline" className="border-slate-700 text-slate-500 text-[10px]">Pod 级别</Badge>
+            <Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">Pod 级别</Badge>
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 space-y-2">
           <div className="flex items-center gap-2 flex-wrap">
             {imagePullSecrets.map((sec, i) => (
-              <div key={i} className="flex items-center gap-1 bg-slate-800 rounded px-2 py-1">
-                <span className="text-xs text-slate-300 font-mono">{sec}</span>
+              <div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded px-2 py-1">
+                <span className="text-xs text-[var(--dg-text-secondary)] font-mono">{sec}</span>
                 <button onClick={() => setImagePullSecrets(prev => prev.filter((_, j) => j !== i))}
-                  className="text-red-400 hover:text-red-300 ml-1"><Trash2 className="h-3 w-3" /></button>
+                  className="dg-text-red hover:dg-text-red ml-1"><Trash2 className="h-3 w-3" /></button>
               </div>
             ))}
-            {imagePullSecrets.length === 0 && <span className="text-[11px] text-slate-600">无</span>}
+            {imagePullSecrets.length === 0 && <span className="text-[11px] dg-text-muted">无</span>}
           </div>
           <div className="flex gap-2">
-            <Input placeholder="输入 Secret 名称后回车" className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-8"
+            <Input placeholder="输入 Secret 名称后回车" className="dg-input text-xs h-8"
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   const val = (e.target as HTMLInputElement).value.trim();
                   if (val) { setImagePullSecrets(prev => [...prev, val]); (e.target as HTMLInputElement).value = ''; }
                 }
               }} />
-            <Button size="sm" variant="outline" className="h-8 border-slate-700 text-slate-300 text-xs"
+            <Button size="sm" variant="outline" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
               onClick={() => setImagePullSecrets(prev => [...prev, ''])}>
               <Plus className="h-3 w-3 mr-1" />新增
             </Button>
@@ -170,7 +170,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
       <ContainerGroupSection
         title="初始化容器"
         description="在主容器启动前按顺序执行的容器，用于初始化环境"
-        icon={<Play className="h-4 w-4 text-purple-400" />}
+        icon={<Play className="h-4 w-4 dg-text-purple" />}
         containers={initContainers}
         accentColor="purple"
         onAdd={addInit}
@@ -182,7 +182,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
       <ContainerGroupSection
         title="工作容器"
         description="Deployment 运行的主容器，定义应用进程及其运行时配置"
-        icon={<Container className="h-4 w-4 text-blue-400" />}
+        icon={<Container className="h-4 w-4 dg-text-blue" />}
         containers={containers}
         accentColor="blue"
         onAdd={addContainer}
@@ -192,13 +192,13 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
       />
 
       {/* 保存栏 */}
-      <div className="sticky bottom-0 bg-slate-950/80 backdrop-blur border-t border-slate-800 p-3 flex items-center justify-between">
-        <div className="text-[11px] text-slate-500">
-          共 <span className="text-slate-300 font-semibold">{initContainers.length}</span> 个初始化容器 +
-          <span className="text-slate-300 font-semibold ml-1">{containers.length}</span> 个工作容器
+      <div className="sticky bottom-0 bg-[var(--dg-bg-primary)]/80 backdrop-blur border-t border-[var(--dg-border)] p-3 flex items-center justify-between">
+        <div className="text-[11px] dg-text-muted">
+          共 <span className="text-[var(--dg-text-secondary)] font-semibold">{initContainers.length}</span> 个初始化容器 +
+          <span className="text-[var(--dg-text-secondary)] font-semibold ml-1">{containers.length}</span> 个工作容器
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
+          <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
           <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
             {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
             保存
diff --git a/frontend/src/components/kubernetes/DeploymentEditService.tsx b/frontend/src/components/kubernetes/DeploymentEditService.tsx
index 05da0de..cdc2088 100644
--- a/frontend/src/components/kubernetes/DeploymentEditService.tsx
+++ b/frontend/src/components/kubernetes/DeploymentEditService.tsx
@@ -289,10 +289,10 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3 text-sm">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3 text-sm">加载中...</p>
         </CardContent>
       </Card>
     );
@@ -301,20 +301,20 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
   return (
     <div className="space-y-4">
       {/* Selector 提示 */}
-      <Card className="bg-slate-900/50 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-3">
-          <div className="flex items-center gap-2 text-xs text-slate-400">
-            <Network className="h-3.5 w-3.5 text-blue-400" />
+          <div className="flex items-center gap-2 text-xs dg-text-secondary">
+            <Network className="h-3.5 w-3.5 dg-text-blue" />
             <span>选择器:</span>
             <div className="flex flex-wrap gap-1">
               {Object.entries(selectorLabels).map(([k, v]) => (
-                <code key={k} className="bg-slate-800 px-1.5 py-0.5 rounded text-slate-300 text-[11px]">{k}={v}</code>
+                <code key={k} className="bg-[var(--dg-bg-tertiary)] px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)] text-[11px]">{k}={v}</code>
               ))}
               {Object.keys(selectorLabels).length === 0 && (
-                <span className="text-slate-600 italic">（无 selector）</span>
+                <span className="dg-text-muted italic">（无 selector）</span>
               )}
             </div>
-            <Button size="sm" variant="ghost" className="h-6 ml-auto text-xs text-slate-400" onClick={load}>
+            <Button size="sm" variant="ghost" className="h-6 ml-auto text-xs dg-text-secondary" onClick={load}>
               <RefreshCw className="h-3 w-3 mr-1" />刷新
             </Button>
           </div>
@@ -322,15 +322,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
       </Card>
 
       {/* Services */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <Network className="h-4 w-4 text-blue-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Network className="h-4 w-4 dg-text-blue" />
               Services
-              <Badge variant="outline" className="border-slate-700 text-slate-400">{matchedSvcs.length} 个关联</Badge>
+              <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{matchedSvcs.length} 个关联</Badge>
             </CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
               onClick={() => {
                 setSvcForm({ name: `${deploymentName}-svc`, type: 'ClusterIP', ports: [{ name: 'http', port: '8080', targetPort: '8080', protocol: 'TCP', nodePort: '' }] });
                 setShowCreate('service');
@@ -338,12 +338,12 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               <Plus className="h-3 w-3 mr-1" />创建 Service
             </Button>
           </div>
-          <p className="text-xs text-slate-500 mt-1">仅显示 selector 匹配此 Deployment 的关联 Service</p>
+          <p className="text-xs dg-text-muted mt-1">仅显示 selector 匹配此 Deployment 的关联 Service</p>
         </CardHeader>
         <CardContent className="pt-0">
           {matchedSvcs.length === 0 && showCreate !== 'service' ? (
-            <div className="text-center py-6 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
-              <Network className="h-8 w-8 mx-auto mb-2 text-slate-700" />
+            <div className="text-center py-6 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
+              <Network className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
               当前命名空间暂无关联 Service
             </div>
           ) : (
@@ -351,18 +351,18 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               {matchedSvcs.map(svc => {
                 const matched = selectorMatches(svc.selector);
                 return (
-                  <div key={svc.name} className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-slate-800 bg-slate-950/30'}`}>
+                  <div key={svc.name} className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
                     <div className="flex items-center gap-2 flex-wrap">
-                      {matched ? <CheckCircle className="h-4 w-4 text-blue-400" /> : <Network className="h-4 w-4 text-slate-500" />}
-                      <span className="text-sm font-semibold text-slate-200">{svc.name}</span>
-                      <Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px]">{svc.type}</Badge>
+                      {matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
+                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
+                      <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
                       {matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]">关联</Badge>}
-                      <code className="text-[11px] text-slate-500 ml-auto">{svc.clusterIP}</code>
-                      <Button size="sm" variant="ghost" className="h-6 text-xs text-emerald-400"
+                      <code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
+                      <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
                         onClick={() => setVisualEditor({ resource: 'services', name: svc.name })}>
                         <Pencil className="h-3 w-3 mr-1" />编辑
                       </Button>
-                      <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-red-400 hover:text-red-300"
+                      <Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
                         title="删除 Service" onClick={() => deleteResource('service', svc.name)}>
                         <Trash2 className="h-3 w-3" />
                       </Button>
@@ -370,17 +370,17 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
                     {/* Ports */}
                     <div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
                       {svc.ports.map((p, i) => (
-                        <code key={i} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-300">
-                          {p.name && <span className="text-slate-500">{p.name}: </span>}
+                        <code key={i} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)]">
+                          {p.name && <span className="dg-text-muted">{p.name}: </span>}
                           {p.port}→{p.targetPort}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol}
                         </code>
                       ))}
                     </div>
                     {/* Selector */}
                     <div className="mt-1 flex flex-wrap gap-1 text-[10px]">
-                      <span className="text-slate-600">selector:</span>
+                      <span className="dg-text-muted">selector:</span>
                       {Object.entries(svc.selector).map(([k, v]) => (
-                        <code key={k} className="text-slate-500">{k}={v}</code>
+                        <code key={k} className="dg-text-muted">{k}={v}</code>
                       ))}
                     </div>
                   </div>
@@ -399,15 +399,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               {/* 基本信息 */}
               <div className="grid grid-cols-2 gap-2">
                 <div>
-                  <Label className="text-slate-500 text-[11px]">名称</Label>
+                  <Label className="dg-text-muted text-[11px]">名称</Label>
                   <Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
                     placeholder={`${deploymentName}-svc`}
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
                 <div>
-                  <Label className="text-slate-500 text-[11px]">类型</Label>
+                  <Label className="dg-text-muted text-[11px]">类型</Label>
                   <select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
-                    className="h-7 mt-0.5 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2">
+                    className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
                     <option value="ClusterIP">ClusterIP</option>
                     <option value="NodePort">NodePort</option>
                   </select>
@@ -416,15 +416,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
 
               {/* 快速预设 */}
               <div>
-                <Label className="text-slate-500 text-[11px] mb-1 block">快速添加常用端口</Label>
+                <Label className="dg-text-muted text-[11px] mb-1 block">快速添加常用端口</Label>
                 <div className="flex gap-1.5">
                   {PORT_PRESETS.map(p => (
                     <button key={p.name} onClick={() => addPort(p)}
                       className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium
-                        bg-slate-800 border border-slate-700 text-slate-300 hover:border-blue-500/50 hover:text-blue-300 transition-colors">
+                        bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:border-blue-500/50 hover:text-blue-300 transition-colors">
                       <Zap className="h-2.5 w-2.5" />
                       {p.label}
-                      <span className="text-slate-500 text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
+                      <span className="dg-text-muted text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
                     </button>
                   ))}
                 </div>
@@ -432,63 +432,63 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
 
               {/* 端口列表 */}
               <div className="space-y-2">
-                <Label className="text-slate-500 text-[11px]">
-                  端口配置 <span className="text-slate-600">({svcForm.ports.length} 个端口)</span>
+                <Label className="dg-text-muted text-[11px]">
+                  端口配置 <span className="dg-text-muted">({svcForm.ports.length} 个端口)</span>
                 </Label>
                 {svcForm.ports.map((p, i) => (
-                  <div key={i} className="flex items-center gap-1.5 p-2 rounded bg-slate-800/50 border border-slate-700/50">
+                  <div key={i} className="flex items-center gap-1.5 p-2 rounded bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50">
                     {/* 名称 */}
                     <Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)}
                       placeholder="http"
-                      className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                      className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                     {/* 协议 */}
                     <select value={p.protocol} onChange={e => updatePort(i, 'protocol', e.target.value)}
-                      className="h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5 w-16">
+                      className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5 w-16">
                       <option value="TCP">TCP</option>
                       <option value="UDP">UDP</option>
                     </select>
                     {/* port → targetPort */}
                     <Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)}
                       type="number" placeholder="port"
-                      className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
-                    <span className="text-slate-600 text-[10px]">→</span>
+                      className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+                    <span className="dg-text-muted text-[10px]">→</span>
                     <Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)}
                       type="number" placeholder="targetPort"
-                      className="h-7 w-[72px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                      className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                     {/* NodePort (仅 NodePort 类型) */}
                     {svcForm.type === 'NodePort' && (
                       <Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)}
                         type="number" placeholder="30000-32767"
-                        className="h-7 w-[80px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                        className="h-7 w-[80px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                     )}
                     {/* 删除 */}
-                    <Button size="icon" variant="ghost" className="h-6 w-6 text-slate-500 hover:text-red-400"
+                    <Button size="icon" variant="ghost" className="h-6 w-6 dg-text-muted hover:dg-text-red"
                       onClick={() => removePort(i)} disabled={svcForm.ports.length <= 1}>
                       <Minus className="h-3 w-3" />
                     </Button>
                   </div>
                 ))}
                 {/* 添加自定义端口 */}
-                <Button size="sm" variant="outline" className="h-7 w-full border-dashed border-slate-700 text-slate-400 text-xs"
+                <Button size="sm" variant="outline" className="h-7 w-full border-dashed border-[var(--dg-border)] dg-text-secondary text-xs"
                   onClick={() => addPort()}>
                   <Plus className="h-3 w-3 mr-1" />添加自定义端口
                 </Button>
               </div>
 
               {/* Selector 预览 */}
-              <div className="text-[10px] text-slate-500 border-t border-slate-700/50 pt-2">
-                <span className="text-slate-600">selector (自动检测): </span>
+              <div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
+                <span className="dg-text-muted">selector (自动检测): </span>
                 {Object.keys(selectorLabels).length > 0 ? (
                   Object.entries(selectorLabels).map(([k, v]) => (
-                    <code key={k} className="bg-slate-800 px-1 py-0.5 rounded text-slate-400 ml-1">{k}={v}</code>
+                    <code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
                   ))
                 ) : (
-                  <span className="text-slate-600 italic">未检测到</span>
+                  <span className="dg-text-muted italic">未检测到</span>
                 )}
               </div>
 
               <div className="flex justify-end gap-2 pt-1">
-                <Button size="sm" variant="ghost" className="h-7 text-xs text-slate-400" onClick={() => setShowCreate(null)}>取消</Button>
+                <Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
                 <Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={createService}>创建</Button>
               </div>
             </div>
@@ -497,15 +497,15 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
       </Card>
 
       {/* Ingresses */}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-              <GitBranch className="h-4 w-4 text-purple-400" />
+            <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+              <GitBranch className="h-4 w-4 dg-text-purple" />
               Ingresses (应用路由)
-              <Badge variant="outline" className="border-slate-700 text-slate-400">{matchedIngs.length}/{ingresses.length}</Badge>
+              <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{matchedIngs.length}/{ingresses.length}</Badge>
             </CardTitle>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs"
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
               onClick={() => {
                 setIngForm(s => ({ ...s, name: `${deploymentName}-ingress`, svcPort: String(matchedSvcs[0]?.ports[0]?.port || 80) }));
                 setShowCreate('ingress');
@@ -513,12 +513,12 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               <Plus className="h-3 w-3 mr-1" />创建 Ingress
             </Button>
           </div>
-          <p className="text-xs text-slate-500 mt-1">backend 指向关联 Service 的 Ingress 自动高亮</p>
+          <p className="text-xs dg-text-muted mt-1">backend 指向关联 Service 的 Ingress 自动高亮</p>
         </CardHeader>
         <CardContent className="pt-0">
           {ingresses.length === 0 ? (
-            <div className="text-center py-6 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
-              <GitBranch className="h-8 w-8 mx-auto mb-2 text-slate-700" />
+            <div className="text-center py-6 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
+              <GitBranch className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
               当前命名空间暂无 Ingress
             </div>
           ) : (
@@ -526,17 +526,17 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               {ingresses.map(ing => {
                 const matched = matchedIngs.includes(ing);
                 return (
-                  <div key={ing.name} className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-slate-800 bg-slate-950/30'}`}>
+                  <div key={ing.name} className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
                     <div className="flex items-center gap-2 flex-wrap">
-                      {matched ? <CheckCircle className="h-4 w-4 text-purple-400" /> : <GitBranch className="h-4 w-4 text-slate-500" />}
-                      <span className="text-sm font-semibold text-slate-200">{ing.name}</span>
-                      <Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px]">{ing.className}</Badge>
+                      {matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
+                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
+                      <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
                       {matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]">关联</Badge>}
-                      <Button size="sm" variant="ghost" className="h-6 text-xs text-emerald-400 ml-auto"
+                      <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
                         onClick={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}>
                         <Pencil className="h-3 w-3 mr-1" />编辑
                       </Button>
-                      <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-red-400 hover:text-red-300"
+                      <Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
                         title="删除 Ingress" onClick={() => deleteResource('ingress', ing.name)}>
                         <Trash2 className="h-3 w-3" />
                       </Button>
@@ -545,10 +545,10 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
                     <div className="mt-2 space-y-1 text-[11px]">
                       {ing.rules.map((r, i) => (
                         <div key={i} className="flex items-start gap-1.5">
-                          <Server className="h-3 w-3 text-slate-500 mt-0.5" />
-                          <code className="text-slate-300">{r.host || '*'}</code>
+                          <Server className="h-3 w-3 dg-text-muted mt-0.5" />
+                          <code className="text-[var(--dg-text-secondary)]">{r.host || '*'}</code>
                           {r.paths.map((p, j) => (
-                            <code key={j} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-400">
+                            <code key={j} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded dg-text-secondary">
                               {p.path} → {(p as any).backend?.service}:{(p as any).backend?.port}
                             </code>
                           ))}
@@ -569,37 +569,37 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
               </div>
               <div className="grid grid-cols-2 gap-2">
                 <div>
-                  <Label className="text-slate-500 text-[11px]">名称</Label>
+                  <Label className="dg-text-muted text-[11px]">名称</Label>
                   <Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
                     placeholder={`${deploymentName}-ingress`}
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
                 <div>
-                  <Label className="text-slate-500 text-[11px]">ingressClassName</Label>
+                  <Label className="dg-text-muted text-[11px]">ingressClassName</Label>
                   <Input value={ingForm.className} onChange={e => setIngForm(s => ({ ...s, className: e.target.value }))}
                     placeholder="nginx"
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
                 <div>
-                  <Label className="text-slate-500 text-[11px]">host (域名)</Label>
+                  <Label className="dg-text-muted text-[11px]">host (域名)</Label>
                   <Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
                     placeholder="app.example.com"
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
                 <div>
-                  <Label className="text-slate-500 text-[11px]">path</Label>
+                  <Label className="dg-text-muted text-[11px]">path</Label>
                   <Input value={ingForm.path} onChange={e => setIngForm(s => ({ ...s, path: e.target.value }))}
                     placeholder="/"
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
                 <div>
-                  <Label className="text-slate-500 text-[11px]">Service 端口</Label>
+                  <Label className="dg-text-muted text-[11px]">Service 端口</Label>
                   <Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
-                    className="h-7 mt-0.5 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+                    className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
                 </div>
               </div>
               <div className="flex justify-end gap-2 pt-1">
-                <Button size="sm" variant="ghost" className="h-7 text-xs text-slate-400" onClick={() => setShowCreate(null)}>取消</Button>
+                <Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
                 <Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={createIngress}>创建</Button>
               </div>
             </div>
@@ -619,7 +619,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
       )}
 
       <div className="flex justify-end gap-2 pt-2">
-        <Button size="sm" variant="outline" className="h-7 text-xs border-slate-700 text-slate-400" onClick={onCancel}>返回查看</Button>
+        <Button size="sm" variant="outline" className="h-7 text-xs border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>返回查看</Button>
       </div>
     </div>
   );
diff --git a/frontend/src/components/kubernetes/DeploymentEditStorage.tsx b/frontend/src/components/kubernetes/DeploymentEditStorage.tsx
index ff0805e..fe42207 100644
--- a/frontend/src/components/kubernetes/DeploymentEditStorage.tsx
+++ b/frontend/src/components/kubernetes/DeploymentEditStorage.tsx
@@ -39,11 +39,11 @@ interface Props {
 }
 
 const VOLUME_TYPES: { key: VolumeForm['type']; label: string; icon: typeof HardDrive; color: string }[] = [
-  { key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'text-emerald-400' },
-  { key: 'emptyDir', label: '临时目录(EmptyDir)', icon: Disc, color: 'text-slate-400' },
-  { key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'text-amber-400' },
-  { key: 'nfs', label: 'NFS', icon: Server, color: 'text-purple-400' },
-  { key: 'configMap', label: '配置字典', icon: File, color: 'text-blue-400' },
+  { key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'dg-text-green' },
+  { key: 'emptyDir', label: '临时目录(EmptyDir)', icon: Disc, color: 'dg-text-secondary' },
+  { key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'dg-text-yellow' },
+  { key: 'nfs', label: 'NFS', icon: Server, color: 'dg-text-purple' },
+  { key: 'configMap', label: '配置字典', icon: File, color: 'dg-text-blue' },
   { key: 'secret', label: '密文', icon: Lock, color: 'text-rose-400' },
 ];
 
@@ -162,10 +162,10 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
 
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3 text-sm">加载中...</p>
+          <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
+          <p className="dg-text-muted mt-3 text-sm">加载中...</p>
         </CardContent>
       </Card>
     );
@@ -173,8 +173,8 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
 
   if (!manifest) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-8 text-center text-slate-500">未获取到 manifest 数据，请使用 YAML 编辑模式。</CardContent>
+      <Card className="dg-card">
+        <CardContent className="p-8 text-center dg-text-muted">未获取到 manifest 数据，请使用 YAML 编辑模式。</CardContent>
       </Card>
     );
   }
@@ -192,26 +192,26 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
           onSaved={() => { loadResources(); setCreateResource(null); }}
         />
       )}
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between gap-3">
             <div>
-              <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-                <Database className="h-4 w-4 text-emerald-400" />
+              <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+                <Database className="h-4 w-4 dg-text-green" />
                 数据卷
-                <Badge variant="outline" className="border-slate-700 text-slate-400">{entries.length}</Badge>
+                <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{entries.length}</Badge>
               </CardTitle>
-              <p className="text-[11px] text-slate-500 mt-1">定义数据卷，并将其挂载到工作负载的容器中</p>
+              <p className="text-[11px] dg-text-muted mt-1">定义数据卷，并将其挂载到工作负载的容器中</p>
             </div>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs shrink-0" onClick={addEntry}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs shrink-0" onClick={addEntry}>
               <Plus className="h-3 w-3 mr-1" />添加数据卷
             </Button>
           </div>
         </CardHeader>
         <CardContent className="pt-0 space-y-4">
           {entries.length === 0 ? (
-            <div className="text-center py-10 text-slate-500 text-sm border border-dashed border-slate-800 rounded-lg">
-              <Database className="h-8 w-8 mx-auto mb-2 text-slate-700" />
+            <div className="text-center py-10 dg-text-muted text-sm border border-dashed border-[var(--dg-border)] rounded-lg">
+              <Database className="h-8 w-8 mx-auto mb-2 dg-text-muted" />
               未配置数据卷，点击「添加数据卷」开始
             </div>
           ) : entries.map((entry, i) => {
@@ -220,12 +220,12 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
             const VIcon = vtype?.icon || Folder;
             const selectValue = SELECTABLE_TYPES.has(vol.type) ? vol.type : 'emptyDir';
             return (
-              <div key={i} className="bg-slate-950/60 border border-slate-800 rounded-lg">
+              <div key={i} className="bg-[var(--dg-bg-primary)]/60 border border-[var(--dg-border)] rounded-lg">
                 {/* 卷定义 */}
-                <div className="p-3 space-y-2.5 border-b border-slate-800/80">
+                <div className="p-3 space-y-2.5 border-b border-[var(--dg-border)]/80">
                   <div className="flex items-center gap-2 flex-wrap">
-                    <VIcon className={`h-4 w-4 ${vtype?.color || 'text-slate-400'}`} />
-                    <span className="text-xs text-slate-400 shrink-0">数据卷名称</span>
+                    <VIcon className={`h-4 w-4 ${vtype?.color || 'dg-text-secondary'}`} />
+                    <span className="text-xs dg-text-secondary shrink-0">数据卷名称</span>
                     <Input
                       value={vol.name}
                       onChange={(e) => {
@@ -237,7 +237,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
                         updateVolume(i, patch);
                       }}
                       placeholder="如 app-logs / fluent-bit-config"
-                      className="h-8 w-44 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
+                      className="h-8 w-44 dg-input text-sm font-mono"
                     />
                     {/* 原生 select，避免 Radix Select 在 overflow 容器内无法下拉 // Logan.Li */}
                     <select
@@ -250,13 +250,13 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
                         if (type === 'persistentVolumeClaim' && resources.pvcs.length === 1) patch.pvcName = resources.pvcs[0];
                         updateVolume(i, patch);
                       }}
-                      className="h-8 min-w-[168px] bg-slate-800 border border-slate-700 rounded-md text-xs text-slate-300 px-2"
+                      className="h-8 min-w-[168px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-xs text-[var(--dg-text-secondary)] px-2"
                     >
                       {VOLUME_TYPES.map((t) => (
                         <option key={t.key} value={t.key}>{t.label}</option>
                       ))}
                     </select>
-                    <Button size="icon" variant="ghost" className="h-8 w-8 text-red-400 ml-auto" onClick={() => removeEntry(i)}>
+                    <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-red ml-auto" onClick={() => removeEntry(i)}>
                       <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>
@@ -280,34 +280,34 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
                 </div>
 
                 {/* 挂载到容器（支持一卷多容器，Kuboard 同卡） */}
-                <div className="px-3 py-2.5 bg-slate-900/40 space-y-2">
+                <div className="px-3 py-2.5 bg-[var(--dg-bg-secondary)]/40 space-y-2">
                   <div className="flex items-center justify-between gap-2">
-                    <p className="text-[11px] text-slate-500 flex items-center gap-1.5">
-                      <Container className="h-3.5 w-3.5 text-blue-400" />
+                    <p className="text-[11px] dg-text-muted flex items-center gap-1.5">
+                      <Container className="h-3.5 w-3.5 dg-text-blue" />
                       将上述数据卷挂载到容器
                     </p>
-                    <Button size="sm" variant="ghost" className="h-6 px-2 text-[11px] text-slate-400 hover:text-slate-200" onClick={() => addMount(i)}>
+                    <Button size="sm" variant="ghost" className="h-6 px-2 text-[11px] dg-text-secondary hover:text-[var(--dg-text-primary)]" onClick={() => addMount(i)}>
                       <Plus className="h-3 w-3 mr-0.5" />添加挂载
                     </Button>
                   </div>
                   {entry.mounts.map((mount, mi) => (
-                    <div key={mi} className="space-y-2 rounded-md border border-slate-800/60 bg-slate-950/40 p-2.5">
+                    <div key={mi} className="space-y-2 rounded-md border border-[var(--dg-border)]/60 bg-[var(--dg-bg-primary)]/40 p-2.5">
                       <div className="flex items-center gap-2 flex-wrap">
                         <select
                           value={mount.containerName}
                           onChange={(e) => updateMount(i, mi, { containerName: e.target.value })}
-                          className="h-8 min-w-[140px] max-w-[280px] bg-slate-800 border border-slate-700 rounded-md text-sm text-slate-200 px-2 font-medium truncate"
+                          className="h-8 min-w-[140px] max-w-[280px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-sm text-[var(--dg-text-primary)] px-2 font-medium truncate"
                         >
                           {containers.length === 0 && <option value="">（无容器）</option>}
                           {containers.map((cn) => <option key={cn} value={cn}>{cn}</option>)}
                         </select>
-                        <div className="flex items-center gap-1 bg-slate-800 rounded-lg p-0.5 border border-slate-700">
+                        <div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]">
                           <button type="button" onClick={() => updateMount(i, mi, { readOnly: true })}
-                            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${mount.readOnly ? 'bg-amber-500/20 text-amber-300' : 'text-slate-500 hover:text-slate-300'}`}>
+                            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${mount.readOnly ? 'bg-amber-500/20 text-amber-300' : 'dg-text-muted hover:text-[var(--dg-text-secondary)]'}`}>
                             只读
                           </button>
                           <button type="button" onClick={() => updateMount(i, mi, { readOnly: false })}
-                            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${!mount.readOnly ? 'bg-blue-500/20 text-blue-300' : 'text-slate-500 hover:text-slate-300'}`}>
+                            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${!mount.readOnly ? 'bg-blue-500/20 text-blue-300' : 'dg-text-muted hover:text-[var(--dg-text-secondary)]'}`}>
                             读写
                           </button>
                         </div>
@@ -315,21 +315,21 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
                           value={mount.mountPath}
                           onChange={(e) => updateMount(i, mi, { mountPath: e.target.value })}
                           placeholder="挂载路径 /bitcloud/app/.../logs"
-                          className="h-8 flex-1 min-w-[200px] bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
+                          className="h-8 flex-1 min-w-[200px] dg-input text-sm font-mono"
                         />
                         {entry.mounts.length > 1 && (
-                          <Button size="icon" variant="ghost" className="h-8 w-8 text-red-400/70 shrink-0" onClick={() => removeMount(i, mi)}>
+                          <Button size="icon" variant="ghost" className="h-8 w-8 dg-text-red/70 shrink-0" onClick={() => removeMount(i, mi)}>
                             <Trash2 className="h-3.5 w-3.5" />
                           </Button>
                         )}
                       </div>
                       <div className="flex items-center gap-2">
-                        <span className="text-[11px] text-slate-500 shrink-0">子路径 subPath</span>
+                        <span className="text-[11px] dg-text-muted shrink-0">子路径 subPath</span>
                         <Input
                           value={mount.subPath}
                           onChange={(e) => updateMount(i, mi, { subPath: e.target.value })}
                           placeholder="如 config.yaml（挂载单文件时填写）"
-                          className="h-7 flex-1 max-w-md bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
+                          className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
                         />
                       </div>
                     </div>
@@ -342,7 +342,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
       </Card>
 
       <div className="flex justify-end gap-2 pt-2">
-        <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onCancel}>取消</Button>
+        <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
         <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
           {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
           保存
diff --git a/frontend/src/components/kubernetes/DeploymentView.tsx b/frontend/src/components/kubernetes/DeploymentView.tsx
index e05f0a3..b00fe05 100644
--- a/frontend/src/components/kubernetes/DeploymentView.tsx
+++ b/frontend/src/components/kubernetes/DeploymentView.tsx
@@ -233,7 +233,7 @@ export function DeploymentView(props: DeploymentViewProps) {
           <Input
             type="number" min={0} value={scaleValue}
             onChange={e => setScaleValue(Math.max(0, Number(e.target.value)))}
-            className="w-16 h-7 text-center text-sm font-bold bg-slate-800 border-slate-700 text-slate-200"
+            className="w-16 h-7 text-center text-sm font-bold dg-input"
           />
           <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"
             disabled={scaleLoading}
diff --git a/frontend/src/components/kubernetes/DeploymentWorkload.tsx b/frontend/src/components/kubernetes/DeploymentWorkload.tsx
index 01dbcdf..9a5491c 100644
--- a/frontend/src/components/kubernetes/DeploymentWorkload.tsx
+++ b/frontend/src/components/kubernetes/DeploymentWorkload.tsx
@@ -39,6 +39,7 @@ import { ActionModals } from './deployment-workload/ActionModals';
 import { createEmptyManifest } from './resource-create-templates';
 import { CREATE_DEPLOYMENT_SLUG, isCreateDeployment } from './deployment-constants';
 import { extractContainers } from './deployment-detail/helpers';
+import { PageShell } from '@/components/layout/PageShell';
 import type { ActionModal, DeploymentWorkloadProps } from './deployment-workload/types';
 
 export type { DeploymentWorkloadProps, WorkloadMode } from './deployment-workload/types';
@@ -283,161 +284,74 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
     }
   };
 
-  // ============ 渲染 ============
+  // ============ 渲染 // Logan.Li ============
   if (loading) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-12 text-center">
-          <Loader2 className="h-6 w-6 animate-spin mx-auto text-slate-500" />
-          <p className="text-slate-500 mt-3">加载中...</p>
-        </CardContent>
-      </Card>
+      <PageShell variant="workspace" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} loading loadingLabel="加载 Deployment..." actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
+        {null}
+      </PageShell>
     );
   }
 
   if (!deployment && !isCreate) {
     return (
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-12 text-center">
-          <XCircle className="h-8 w-8 mx-auto text-red-400" />
-          <p className="text-slate-400 mt-3">未找到 Deployment: {deploymentName}</p>
-          <Button variant="outline" className="mt-4" onClick={onBack}>返回</Button>
-        </CardContent>
-      </Card>
+      <PageShell variant="default" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
+        <Card className="dg-card"><CardContent className="p-12 text-center"><XCircle className="h-8 w-8 mx-auto dg-text-red" /><p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p></CardContent></Card>
+      </PageShell>
     );
   }
 
   if (isCreate) {
     const handleCreated = (updated?: any) => {
       const name = updated?.metadata?.name;
-      if (name) {
-        navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`);
-      }
+      if (name) navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`);
     };
     return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-3">
-          <Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
-            <ArrowLeft className="h-4 w-4 mr-1" />返回
-          </Button>
-          <div>
-            <h1 className="text-xl font-bold text-slate-100">新建 Deployment</h1>
-            <p className="text-xs text-slate-500 mt-0.5">{namespace} · {clusterCode}</p>
-          </div>
-        </div>
-        <EditModeContainer
-          clusterCode={clusterCode}
-          namespace={namespace}
-          deploymentName={CREATE_DEPLOYMENT_SLUG}
-          manifest={manifest}
-          isCreate
-          onSaved={handleCreated}
-          onCancel={onBack}
-        />
-      </div>
+      <PageShell variant="workspace" title="新建 Deployment" subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
+        <EditModeContainer clusterCode={clusterCode} namespace={namespace} deploymentName={CREATE_DEPLOYMENT_SLUG} manifest={manifest} isCreate onSaved={handleCreated} onCancel={onBack} />
+      </PageShell>
     );
   }
 
   const ready = deployment.ready_replicas || deployment.readyReplicas || 0;
   const total = deployment.replicas || 0;
   const isHealthy = ready === total && total > 0;
-  const _viewBase = `/kubernetes/${clusterCode}/namespace/${namespace}/workload`;
+
+  const modeTabs = (
+    <div className="inline-flex rounded-md border border-[var(--dg-border)] overflow-hidden">
+      <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-[var(--dg-bg-active)] text-[var(--dg-text-primary)]' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('view')}>查看</button>
+      <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('edit')}>编辑</button>
+      <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('yaml')}>YAML</button>
+    </div>
+  );
 
   return (
-    <div className="space-y-4">
-      {/* ============ 顶部：标题 + 模式标识 + 操作菜单 ============ */}
-      <div className="flex items-center justify-between gap-2 flex-wrap">
-        <div className="flex items-center gap-3 min-w-0">
-          <Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
-            <ArrowLeft className="h-4 w-4 mr-1" />返回
+    <PageShell
+      variant="workspace"
+      title={deploymentName}
+      subtitle={`${clusterCode} / ${namespace} · Deployment · 镜像: ${deployment?.image || '-'}`}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>
+          {modeTabs}
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}><RefreshCw className="h-4 w-4" /></Button>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setNewImage(deployment?.image || ''); setModal({ kind: 'image' }); }}><ImageIcon className="h-3.5 w-3.5 mr-1" />调整镜像</Button>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleRestart}><RotateCw className="h-3.5 w-3.5 mr-1" />重启</Button>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" disabled={!!actionLoading} onClick={handleTogglePause}>
+            {deployment?.paused ? <><Play className="h-3.5 w-3.5 mr-1 dg-text-green" />恢复</> : <><Pause className="h-3.5 w-3.5 mr-1 dg-text-orange" />暂停</>}
           </Button>
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-xl font-bold text-slate-100 truncate">{deploymentName}</h1>
-              <Badge variant="outline" className="border-slate-700 text-slate-400">{namespace}</Badge>
-              <Badge variant="outline" className="border-slate-700 text-slate-400">Deployment</Badge>
-              <Badge
-                className={isHealthy
-                  ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30'
-                  : 'bg-amber-500/20 text-amber-400 border-amber-500/30'}
-              >
-                {isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}
-                {ready}/{total}
-              </Badge>
-              {deployment?.paused && (
-                <Badge className="bg-orange-500/20 text-orange-400 border-orange-500/30">
-                  <Pause className="h-3 w-3 mr-1" />已暂停更新
-                </Badge>
-              )}
-            </div>
-            <p className="text-xs text-slate-500 mt-0.5 truncate">
-              镜像: <code className="text-slate-400">{deployment.image || '-'}</code>
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          {/* 模式切换 — 查看 / 编辑 / YAML */}
-          <div className="inline-flex rounded-md border border-slate-700 overflow-hidden">
-            <button
-              className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-slate-700 text-slate-100' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
-              onClick={() => onModeChange('view')}
-            >
-              查看
-            </button>
-            <button
-              className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
-              onClick={() => onModeChange('edit')}
-            >
-              编辑
-            </button>
-            <button
-              className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent text-slate-400 hover:text-slate-200'}`}
-              onClick={() => onModeChange('yaml')}
-            >
-              YAML
-            </button>
-          </div>
-
-          <Button variant="outline" size="sm" className="border-slate-700 text-slate-400" onClick={loadData} title="刷新">
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-
-          {/* 操作按钮行 */}
-          <div className="flex items-center gap-1.5">
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-slate-700 text-slate-300"
-              onClick={() => {
-                setNewImage(deployment?.image || '');
-                setModal({ kind: 'image' });
-              }}
-            >
-              <ImageIcon className="h-3.5 w-3.5 mr-1" />调整镜像
-            </Button>
-            <Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={handleRestart}>
-              <RotateCw className="h-3.5 w-3.5 mr-1" />重启
-            </Button>
-            <Button
-              variant="outline" size="sm"
-              className="border-slate-700 text-slate-300"
-              disabled={!!actionLoading}
-              onClick={handleTogglePause}
-            >
-              {deployment?.paused
-                ? <><Play className="h-3.5 w-3.5 mr-1 text-green-400" />恢复</>
-                : <><Pause className="h-3.5 w-3.5 mr-1 text-orange-400" />暂停</>
-              }
-            </Button>
-            <Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={handleCICD}>
-              <Rocket className="h-3.5 w-3.5 mr-1 text-purple-400" />CI/CD
-            </Button>
-            <Button variant="outline" size="sm" className="border-slate-700 text-red-400 hover:bg-red-500/10" onClick={() => setModal({ kind: 'delete' })}>
-              <Trash2 className="h-3.5 w-3.5 mr-1" />删除
-            </Button>
-          </div>
-        </div>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleCICD}><Rocket className="h-3.5 w-3.5 mr-1 dg-text-purple" />CI/CD</Button>
+          <Button variant="outline" size="sm" className="dg-btn-danger" onClick={() => setModal({ kind: 'delete' })}><Trash2 className="h-3.5 w-3.5 mr-1" />删除</Button>
+        </>
+      )}
+    >
+      <div className="flex items-center gap-2 flex-wrap mb-4">
+        <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge>
+        <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">Deployment</Badge>
+        <Badge className={isHealthy ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-amber-500/20 dg-text-yellow border-amber-500/30'}>
+          {isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}{ready}/{total}
+        </Badge>
+        {deployment?.paused && <Badge className="bg-orange-500/20 dg-text-orange border-orange-500/30"><Pause className="h-3 w-3 mr-1" />已暂停更新</Badge>}
       </div>
 
       {/* ============ 主体：view / edit / yaml ============ */}
@@ -567,6 +481,6 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
         podName={fileBrowserPod || ''}
         containers={(pods.find(( p: any) => p.name === fileBrowserPod)?.containers || []).map(( c: any) => c.name).filter(Boolean)}
       />
-    </div>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/kubernetes/EventsPage.tsx b/frontend/src/components/kubernetes/EventsPage.tsx
index b36eee1..8967765 100644
--- a/frontend/src/components/kubernetes/EventsPage.tsx
+++ b/frontend/src/components/kubernetes/EventsPage.tsx
@@ -1,14 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
-import { RefreshCw, ChevronRight, Bell, AlertTriangle, X } from 'lucide-react';
+import { RefreshCw, Bell, AlertTriangle, X } from 'lucide-react';
 import { kubernetesApi } from '@/api';
 import { EventTable } from './EventTable';
 import { normalizeK8sEvent, formatEventRelative } from './k8s-event-utils';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 interface RankItem { name: string; count: number }
@@ -63,16 +66,6 @@ function RankPanel({
   );
 }
 
-function StatCell({ label, value, hint }: { label: string; value: number | string; hint?: string }) {
-  return (
-    <div className="px-4 py-3 border-r border-[var(--dg-border)] last:border-r-0">
-      <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
-      <p className="text-xl font-semibold tabular-nums text-[var(--dg-text-primary)] mt-0.5">{value}</p>
-      {hint && <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{hint}</p>}
-    </div>
-  );
-}
-
 export default function EventsPage() {
   const { clusterCode } = useParams<{ clusterCode: string }>();
   const navigate = useNavigate();
@@ -163,71 +156,9 @@ export default function EventsPage() {
     (summary?.by_kind || []).map((k: JsonData) => ({ name: k.kind || 'Unknown', count: k.count })),
   [summary]);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)]">集群</Link>
-        {activeCluster && (
-          <>
-            <ChevronRight className="h-3 w-3" />
-            <Link to={`/kubernetes/${activeCluster}`} className="hover:text-[var(--dg-text-secondary)]">{activeCluster}</Link>
-          </>
-        )}
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">事件</span>
-      </div>
+  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
 
-      <div className="flex items-center justify-between flex-wrap gap-3">
-        <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
-          <Bell className="h-5 w-5 text-[var(--dg-text-muted)]" />
-          事件中心
-        </h2>
-        <div className="flex items-center gap-2 flex-wrap">
-          <Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
-            <SelectTrigger className="w-40 h-8 text-xs"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {clusters.map((c: JsonData) => (
-                <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
-            <SelectTrigger className="w-36 h-8 text-xs"><SelectValue placeholder="命名空间" /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
-              {namespaces.map((n) => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
-            </SelectContent>
-          </Select>
-          <Select value={timeWindow} onValueChange={setTimeWindow}>
-            <SelectTrigger className="w-32 h-8 text-xs"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="0" className="text-xs">全部时间</SelectItem>
-              <SelectItem value="1" className="text-xs">近 1 小时</SelectItem>
-              <SelectItem value="6" className="text-xs">近 6 小时</SelectItem>
-              <SelectItem value="24" className="text-xs">近 24 小时</SelectItem>
-              <SelectItem value="168" className="text-xs">近 7 天</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline" size="sm" className="h-8 text-xs" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
-            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />
-            刷新
-          </Button>
-        </div>
-      </div>
-
-      {/* 统计条：统一边框，无彩色卡片 */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          <div className="grid grid-cols-2 md:grid-cols-4">
-            <StatCell label="事件总数" value={summary?.total ?? events.length} />
-            <StatCell label="告警事件" value={summary?.warning_count ?? warningCount} hint="Warning" />
-            <StatCell label="正常事件" value={summary?.normal_count ?? normalCount} hint="Normal" />
-            <StatCell label="告警类型" value={reasonData.length} hint="不同 Reason" />
-          </div>
-        </CardContent>
-      </Card>
-
-      {(selectedReason || selectedKind) && (
+  const filterToolbar = (selectedReason || selectedKind) ? (
         <div className="flex items-center gap-2 text-xs">
           <span className="text-[var(--dg-text-muted)]">筛选:</span>
           {selectedReason && (
@@ -241,8 +172,59 @@ export default function EventsPage() {
             </button>
           )}
         </div>
-      )}
+  ) : undefined;
 
+  return (
+    <PageShell
+      variant="list"
+      title="事件中心"
+      subtitle={clusterName ? `${clusterName} · 集群事件与告警` : '集群事件与告警'}
+      icon={<Bell className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '事件总数', value: summary?.total ?? events.length, color: 'muted' },
+            { label: '告警事件', value: summary?.warning_count ?? warningCount, color: 'amber' },
+            { label: '正常事件', value: summary?.normal_count ?? normalCount, color: 'green' },
+            { label: '告警类型', value: reasonData.length, color: 'red' },
+          ]}
+        />
+      ) : undefined}
+      toolbar={filterToolbar}
+      actions={(
+        <>
+          <Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
+            <SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {clusters.map((c: JsonData) => (
+                <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
+            <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">所有命名空间</SelectItem>
+              {namespaces.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)}
+            </SelectContent>
+          </Select>
+          <Select value={timeWindow} onValueChange={setTimeWindow}>
+            <SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">全部时间</SelectItem>
+              <SelectItem value="1">近 1 小时</SelectItem>
+              <SelectItem value="6">近 6 小时</SelectItem>
+              <SelectItem value="24">近 24 小时</SelectItem>
+              <SelectItem value="168">近 7 天</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+        </>
+      )}
+    >
       {reasonData.length > 0 && (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
           <RankPanel title="告警原因" items={reasonData} selected={selectedReason} onSelect={setSelectedReason} />
@@ -279,26 +261,27 @@ export default function EventsPage() {
         </Card>
       )}
 
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
-            <span className="text-sm text-[var(--dg-text-secondary)]">事件列表 ({displayEvents.length})</span>
+      <ContentPanel
+        toolbar={(
+          <div className="flex items-center justify-between w-full">
+            <span className="text-sm dg-text-secondary">事件列表 ({displayEvents.length})</span>
             <Select value={filterType} onValueChange={setFilterType}>
-              <SelectTrigger className="w-28 h-7 text-xs"><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-28 h-8 dg-input text-xs"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="all" className="text-xs">所有类型</SelectItem>
-                <SelectItem value="Warning" className="text-xs">Warning</SelectItem>
-                <SelectItem value="Normal" className="text-xs">Normal</SelectItem>
+                <SelectItem value="all">所有类型</SelectItem>
+                <SelectItem value="Warning">Warning</SelectItem>
+                <SelectItem value="Normal">Normal</SelectItem>
               </SelectContent>
             </Select>
           </div>
-          <EventTable
-            events={displayEvents}
-            loading={loading}
-            showNamespace
-          />
-        </CardContent>
-      </Card>
-    </div>
+        )}
+      >
+        <EventTable
+          events={displayEvents}
+          loading={loading}
+          showNamespace
+        />
+      </ContentPanel>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/kubernetes/K8sShortcutRedirect.tsx b/frontend/src/components/kubernetes/K8sShortcutRedirect.tsx
index 5c9e276..513c9bd 100644
--- a/frontend/src/components/kubernetes/K8sShortcutRedirect.tsx
+++ b/frontend/src/components/kubernetes/K8sShortcutRedirect.tsx
@@ -28,7 +28,7 @@ export default function K8sShortcutRedirect({ target }: Props) {
   }, [navigate, target]);
 
   return (
-    <div className="flex flex-col items-center justify-center py-24 text-slate-500 gap-2">
+    <div className="flex flex-col items-center justify-center py-24 dg-text-muted gap-2">
       <Loader2 className="h-6 w-6 animate-spin" />
       <span className="text-sm">正在跳转...</span>
     </div>
diff --git a/frontend/src/components/kubernetes/KubectlTerminal.tsx b/frontend/src/components/kubernetes/KubectlTerminal.tsx
index 6bccad9..6115359 100644
--- a/frontend/src/components/kubernetes/KubectlTerminal.tsx
+++ b/frontend/src/components/kubernetes/KubectlTerminal.tsx
@@ -180,7 +180,7 @@ export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }:
         <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
           <div className="flex items-center gap-2 text-sm">
             <div className={cn('w-2 h-2 rounded-full', connected ? 'bg-emerald-400' : error ? 'bg-red-400' : 'bg-yellow-400')} />
-            <Terminal className="h-4 w-4 text-blue-400" />
+            <Terminal className="h-4 w-4 dg-text-blue" />
             <span className="text-[var(--dg-text-primary)] font-medium">kubectl — {clusterName}</span>
             {!connected && !error && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
           </div>
diff --git a/frontend/src/components/kubernetes/KubernetesClusterDialog.tsx b/frontend/src/components/kubernetes/KubernetesClusterDialog.tsx
index b334686..5ed6760 100644
--- a/frontend/src/components/kubernetes/KubernetesClusterDialog.tsx
+++ b/frontend/src/components/kubernetes/KubernetesClusterDialog.tsx
@@ -161,7 +161,7 @@ export function KubernetesClusterDialog({
                 placeholder="如: prod-cluster"
                 className={`bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] ${nameError ? 'border-red-500' : ''}`}
               />
-              {nameError && <p className="text-xs text-red-400">{nameError}</p>}
+              {nameError && <p className="text-xs dg-text-red">{nameError}</p>}
               <p className="text-xs text-[var(--dg-text-muted)]">
                 只允许英文、数字和连字符(-)，首尾不能是连字符。名称将作为集群唯一标识。
               </p>
@@ -218,7 +218,7 @@ export function KubernetesClusterDialog({
           {formData.config_type === 0 ? (
             <div className="space-y-2">
               <Label className="text-[var(--dg-text-secondary)]">
-                Token {hasToken && <span className="text-emerald-400 text-xs ml-1">✓ 已配置（留空不修改）</span>}
+                Token {hasToken && <span className="dg-text-green text-xs ml-1">✓ 已配置（留空不修改）</span>}
               </Label>
               <Textarea
                 value={formData.token}
@@ -231,7 +231,7 @@ export function KubernetesClusterDialog({
           ) : (
             <div className="space-y-2">
               <Label className="text-[var(--dg-text-secondary)]">
-                Kubeconfig {hasKubeConfig && <span className="text-emerald-400 text-xs ml-1">✓ 已配置（留空不修改）</span>}
+                Kubeconfig {hasKubeConfig && <span className="dg-text-green text-xs ml-1">✓ 已配置（留空不修改）</span>}
               </Label>
               <Textarea
                 value={formData.kube_config}
diff --git a/frontend/src/components/kubernetes/KubernetesClusters.tsx b/frontend/src/components/kubernetes/KubernetesClusters.tsx
index 9e2ae83..1d1ddad 100644
--- a/frontend/src/components/kubernetes/KubernetesClusters.tsx
+++ b/frontend/src/components/kubernetes/KubernetesClusters.tsx
@@ -34,6 +34,7 @@ import type { KubernetesCluster } from '@/types';
 import { KubernetesClusterDetail } from './KubernetesClusterDetail';
 import { KubernetesClusterDialog } from './KubernetesClusterDialog';
 import { KubectlTerminal } from './KubectlTerminal';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 
 export function KubernetesClusters() {
@@ -161,53 +162,43 @@ export function KubernetesClusters() {
 
   const clusterDetail = selectedCluster ? clusters.find((c) => c.id === selectedCluster) : null;
 
+  const searchToolbar = (
+    <div className="relative w-80">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+      <Input
+        placeholder="搜索集群名称或版本..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="pl-9 h-9 dg-input"
+      />
+    </div>
+  );
+
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">集群列表</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">管理Kubernetes集群资源</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-            onClick={loadData}
-          >
-            <RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
+    <PageShell
+      variant="list"
+      title="集群列表"
+      subtitle="管理 Kubernetes 集群资源"
+      icon={<Cloud className="h-5 w-5" />}
+      toolbar={searchToolbar}
+      loading={loading}
+      loadingLabel="加载集群..."
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
+            <RefreshCw className={cn('h-4 w-4 mr-1', loading && 'animate-spin')} />
             刷新
           </Button>
-          <Button className="bg-[var(--dg-blue)] hover:opacity-90 text-white" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}>
-            <Plus className="h-4 w-4 mr-2" />
+          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}>
+            <Plus className="h-4 w-4 mr-1" />
             添加集群
           </Button>
-        </div>
-      </div>
-
-      {/* Search */}
-      <div className="flex items-center gap-3">
-        <div className="relative w-80">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input
-            placeholder="搜索集群名称或版本..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
-          />
-        </div>
-      </div>
-
-      {/* Clusters Grid */}
+        </>
+      )}
+    >
+      {/* Clusters Grid // Logan.Li */}
       <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
-        {loading ? (
-          <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full">
-            <CardContent className="p-12 text-center text-[var(--dg-text-muted)]">
-              <RefreshCw className="h-6 w-6 animate-spin mx-auto mb-3" />
-              加载中...
-            </CardContent>
-          </Card>
-        ) : filteredClusters.length === 0 ? (
+        {!loading && filteredClusters.length === 0 ? (
           <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full">
             <CardContent className="p-12 text-center text-[var(--dg-text-muted)]">暂无集群数据</CardContent>
           </Card>
@@ -440,6 +431,6 @@ export function KubernetesClusters() {
           </div>
         </div>
       )}
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/KubernetesNodes.tsx b/frontend/src/components/kubernetes/KubernetesNodes.tsx
index 5e50a7e..0cbdf0d 100644
--- a/frontend/src/components/kubernetes/KubernetesNodes.tsx
+++ b/frontend/src/components/kubernetes/KubernetesNodes.tsx
@@ -11,6 +11,8 @@ import {
 } from '@/components/ui/table';
 import { RefreshCw, Search, Server, Loader2 } from 'lucide-react';
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
 import type { JsonData } from '@/types/common';
 
 export function KubernetesNodes() {
@@ -58,49 +60,53 @@ export function KubernetesNodes() {
       ? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">{status}</Badge>
       : <Badge variant="destructive">{status || 'Unknown'}</Badge>;
 
+  const tableToolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="relative w-56">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
+      </div>
+      <Select value={roleFilter} onValueChange={setRoleFilter}>
+        <SelectTrigger className="w-32 h-9 dg-input">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">全部角色</SelectItem>
+          <SelectItem value="master">Master</SelectItem>
+          <SelectItem value="worker">Worker</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  const clusterLabel = clusters.find((c) => String(c.code || c.id) === selectedCluster)?.name;
+
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">节点管理</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">Kubernetes 集群工作节点状态与资源</p>
-        </div>
-        <div className="flex items-center gap-2">
+    <PageShell
+      variant="list"
+      title="节点管理"
+      subtitle={clusterLabel ? `${clusterLabel} · 工作节点状态与资源` : 'Kubernetes 集群工作节点状态与资源'}
+      icon={<Server className="h-5 w-5" />}
+      actions={(
+        <>
           <Select value={selectedCluster} onValueChange={setSelectedCluster}>
-            <SelectTrigger className="w-48 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+            <SelectTrigger className="w-48 h-9 dg-input">
               <SelectValue placeholder="选择集群" />
             </SelectTrigger>
-            <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
+            <SelectContent>
               {clusters.map((c) => (
                 <SelectItem key={c.id} value={String(c.code || c.id)}>{c.name}</SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadNodes} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadNodes} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
           </Button>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <div className="relative w-56">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-        </div>
-        <Select value={roleFilter} onValueChange={setRoleFilter}>
-          <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-            <SelectItem value="all">全部角色</SelectItem>
-            <SelectItem value="master">Master</SelectItem>
-            <SelectItem value="worker">Worker</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={tableToolbar}>
           <Table>
             <TableHeader>
               <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -162,8 +168,7 @@ export function KubernetesNodes() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
-    </div>
+      </ContentPanel>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/KubernetesWorkloads.tsx b/frontend/src/components/kubernetes/KubernetesWorkloads.tsx
index f0ae932..87bbba5 100644
--- a/frontend/src/components/kubernetes/KubernetesWorkloads.tsx
+++ b/frontend/src/components/kubernetes/KubernetesWorkloads.tsx
@@ -104,12 +104,12 @@ export function KubernetesWorkloads() {
 
   const getPodStatusBadge = (status: string) => {
     const map: Record<string, string> = {
-      Running: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
-      Pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
-      Failed: 'bg-red-500/20 text-red-400 border-red-500/30',
-      Succeeded: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+      Running: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
+      Pending: 'bg-yellow-500/20 dg-text-yellow border-yellow-500/30',
+      Failed: 'bg-red-500/20 dg-text-red border-red-500/30',
+      Succeeded: 'bg-blue-500/20 dg-text-blue border-blue-500/30',
     };
-    return <Badge className={map[status] || 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>{status || 'Unknown'}</Badge>;
+    return <Badge className={map[status] || 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{status || 'Unknown'}</Badge>;
   };
 
   const handleQuickScale = async (dep: JsonData, delta: number) => {
@@ -144,32 +144,32 @@ export function KubernetesWorkloads() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-100">工作负载</h1>
-          <p className="text-sm text-slate-500 mt-1">Deployment 与 Pod 运行状态</p>
+          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">工作负载</h1>
+          <p className="text-sm dg-text-muted mt-1">Deployment 与 Pod 运行状态</p>
         </div>
         <div className="flex items-center gap-2">
           <Select value={selectedCluster} onValueChange={(v) => { setSelectedCluster(v); setSelectedNamespace('all'); }}>
-            <SelectTrigger className="w-48 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+            <SelectTrigger className="w-48 h-9 dg-input">
               <SelectValue placeholder="选择集群" />
             </SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
+            <SelectContent className="dg-input">
               {clusters.map((c) => (
                 <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>
               ))}
             </SelectContent>
           </Select>
           <Select value={selectedNamespace} onValueChange={setSelectedNamespace}>
-            <SelectTrigger className="w-40 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
+            <SelectTrigger className="w-40 h-9 dg-input">
               <SelectValue placeholder="命名空间" />
             </SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700 max-h-[300px]">
+            <SelectContent className="dg-input max-h-[300px]">
               <SelectItem value="all">全部命名空间</SelectItem>
               {namespaces.map((ns) => (
                 <SelectItem key={ns} value={ns}>{ns}</SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400" onClick={loadData} disabled={loading}>
+          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] dg-text-secondary" onClick={loadData} disabled={loading}>
             {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
           </Button>
         </div>
@@ -178,15 +178,15 @@ export function KubernetesWorkloads() {
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         {[
           { label: 'Deployment', value: deployments.length, icon: <Boxes className="h-5 w-5" />, color: 'text-rose-400' },
-          { label: 'Pod 总数', value: pods.length, icon: <Container className="h-5 w-5" />, color: 'text-blue-400' },
-          { label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'text-emerald-400' },
-          { label: '异常', value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'text-red-400' },
+          { label: 'Pod 总数', value: pods.length, icon: <Container className="h-5 w-5" />, color: 'dg-text-blue' },
+          { label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'dg-text-green' },
+          { label: '异常', value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'dg-text-red' },
         ].map((s) => (
-          <Card key={s.label} className="bg-slate-900 border-slate-800">
+          <Card key={s.label} className="dg-card">
             <CardContent className="p-4">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm text-slate-500">{s.label}</p>
+                  <p className="text-sm dg-text-muted">{s.label}</p>
                   <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
                 </div>
                 <div className="opacity-60">{s.icon}</div>
@@ -197,40 +197,40 @@ export function KubernetesWorkloads() {
       </div>
 
       <div className="relative w-56">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
-        <Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="bg-slate-800 border border-slate-700">
-          <TabsTrigger value="deployments" className="data-[state=active]:bg-slate-700">Deployment ({filteredDeps.length})</TabsTrigger>
-          <TabsTrigger value="pods" className="data-[state=active]:bg-slate-700">Pod ({filteredPods.length})</TabsTrigger>
+        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
+          <TabsTrigger value="deployments" className="data-[state=active]:bg-[var(--dg-bg-active)]">Deployment ({filteredDeps.length})</TabsTrigger>
+          <TabsTrigger value="pods" className="data-[state=active]:bg-[var(--dg-bg-active)]">Pod ({filteredPods.length})</TabsTrigger>
         </TabsList>
 
         <TabsContent value="deployments">
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardContent className="p-0">
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400">名称</TableHead>
-                    <TableHead className="text-slate-400">命名空间</TableHead>
-                    <TableHead className="text-slate-400">副本</TableHead>
-                    <TableHead className="text-slate-400">镜像</TableHead>
-                    <TableHead className="text-slate-400 w-[140px]">操作</TableHead>
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary">名称</TableHead>
+                    <TableHead className="dg-text-secondary">命名空间</TableHead>
+                    <TableHead className="dg-text-secondary">副本</TableHead>
+                    <TableHead className="dg-text-secondary">镜像</TableHead>
+                    <TableHead className="dg-text-secondary w-[140px]">操作</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {loading ? (
-                    <TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
                   ) : filteredDeps.length === 0 ? (
-                    <TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Deployment</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Deployment</TableCell></TableRow>
                   ) : (
                     filteredDeps.map((d) => (
-                      <TableRow key={d.id || d.name} className="border-slate-800 hover:bg-slate-800/30 cursor-pointer"
+                      <TableRow key={d.id || d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer"
                         onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}>
-                        <TableCell className="font-medium text-slate-200">{d.name}</TableCell>
-                        <TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{d.namespace}</Badge></TableCell>
+                        <TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell>
+                        <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{d.namespace}</Badge></TableCell>
                         <TableCell>
                           {(() => {
                             const ready = d.ready_replicas || 0;
@@ -239,27 +239,27 @@ export function KubernetesWorkloads() {
                             const done = ready === total;
                             return (
                               <div className="flex items-center gap-2 min-w-[100px]">
-                                <div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
+                                <div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
                                   <div className={`h-full rounded-full ${done ? 'bg-emerald-500' : 'bg-yellow-500'}`} style={{ width: `${pct}%` }} />
                                 </div>
-                                <span className={`text-xs ${done ? 'text-emerald-400' : 'text-yellow-400'}`}>{ready}/{total}</span>
+                                <span className={`text-xs ${done ? 'dg-text-green' : 'dg-text-yellow'}`}>{ready}/{total}</span>
                               </div>
                             );
                           })()}
                         </TableCell>
-                        <TableCell className="text-xs text-slate-500 max-w-[200px] truncate">{d.image || '-'}</TableCell>
+                        <TableCell className="text-xs dg-text-muted max-w-[200px] truncate">{d.image || '-'}</TableCell>
                         <TableCell onClick={(e) => e.stopPropagation()}>
                           <div className="flex items-center gap-0.5">
-                            <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-slate-200"
+                            <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
                               title="减少副本" disabled={(d.replicas || 0) <= 0}
                               onClick={() => handleQuickScale(d, -1)}>
                               <Minus className="h-3.5 w-3.5" />
                             </Button>
-                            <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-slate-200"
+                            <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
                               title="增加副本" onClick={() => handleQuickScale(d, 1)}>
                               <Plus className="h-3.5 w-3.5" />
                             </Button>
-                            <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
+                            <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
                               title="查看详情" onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}>
                               <Eye className="h-3.5 w-3.5" />
                             </Button>
@@ -275,37 +275,37 @@ export function KubernetesWorkloads() {
         </TabsContent>
 
         <TabsContent value="pods">
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardContent className="p-0">
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400">名称</TableHead>
-                    <TableHead className="text-slate-400">命名空间</TableHead>
-                    <TableHead className="text-slate-400">状态</TableHead>
-                    <TableHead className="text-slate-400">节点</TableHead>
-                    <TableHead className="text-slate-400">CPU</TableHead>
-                    <TableHead className="text-slate-400">内存</TableHead>
-                    <TableHead className="text-slate-400">重启</TableHead>
-                    <TableHead className="text-slate-400">镜像</TableHead>
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary">名称</TableHead>
+                    <TableHead className="dg-text-secondary">命名空间</TableHead>
+                    <TableHead className="dg-text-secondary">状态</TableHead>
+                    <TableHead className="dg-text-secondary">节点</TableHead>
+                    <TableHead className="dg-text-secondary">CPU</TableHead>
+                    <TableHead className="dg-text-secondary">内存</TableHead>
+                    <TableHead className="dg-text-secondary">重启</TableHead>
+                    <TableHead className="dg-text-secondary">镜像</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {loading ? (
-                    <TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
                   ) : filteredPods.length === 0 ? (
-                    <TableRow><TableCell colSpan={8} className="text-center text-slate-500 py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Pod</TableCell></TableRow>
+                    <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 Pod</TableCell></TableRow>
                   ) : (
                     filteredPods.map((p) => (
-                      <TableRow key={p.id} className="border-slate-800 hover:bg-slate-800/30">
-                        <TableCell className="font-medium text-slate-200">{p.name}</TableCell>
-                        <TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{p.namespace}</Badge></TableCell>
+                      <TableRow key={p.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                        <TableCell className="font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
+                        <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{p.namespace}</Badge></TableCell>
                         <TableCell>{getPodStatusBadge(p.status)}</TableCell>
-                        <TableCell className="text-sm text-slate-400">{p.node_name || '-'}</TableCell>
-                        <TableCell className="text-sm text-cyan-400">{p.cpu_usage_m || '-'}</TableCell>
-                        <TableCell className="text-sm text-amber-400">{p.mem_usage_mi || '-'}</TableCell>
-                        <TableCell className={p.restart_count > 0 ? 'text-yellow-400' : 'text-slate-500'}>{p.restart_count || 0}</TableCell>
-                        <TableCell className="text-xs text-slate-500 max-w-[200px] truncate">{p.image || '-'}</TableCell>
+                        <TableCell className="text-sm dg-text-secondary">{p.node_name || '-'}</TableCell>
+                        <TableCell className="text-sm dg-text-cyan">{p.cpu_usage_m || '-'}</TableCell>
+                        <TableCell className="text-sm dg-text-yellow">{p.mem_usage_mi || '-'}</TableCell>
+                        <TableCell className={p.restart_count > 0 ? 'dg-text-yellow' : 'dg-text-muted'}>{p.restart_count || 0}</TableCell>
+                        <TableCell className="text-xs dg-text-muted max-w-[200px] truncate">{p.image || '-'}</TableCell>
                       </TableRow>
                     ))
                   )}
diff --git a/frontend/src/components/kubernetes/NamespaceManagementPage.tsx b/frontend/src/components/kubernetes/NamespaceManagementPage.tsx
index 9246952..9217e35 100644
--- a/frontend/src/components/kubernetes/NamespaceManagementPage.tsx
+++ b/frontend/src/components/kubernetes/NamespaceManagementPage.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
@@ -12,11 +11,14 @@ import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger,
 } from '@/components/ui/dialog';
 import {
-  RefreshCw, Loader2, ChevronRight, Plus, Trash2, Boxes, Container, Network,
-  Shield, Activity, AlertTriangle, CheckCircle2,
+  RefreshCw, Loader2, Plus, Trash2, Boxes,
+  Shield, AlertTriangle, CheckCircle2,
 } from 'lucide-react';
 import { kubernetesApi } from '@/api';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 interface NamespaceDetail {
   name: string;
@@ -105,34 +107,41 @@ export default function NamespaceManagementPage() {
   const totalSvcs = namespaces.reduce((s, n) => s + (n.resource_counts?.services || 0), 0);
   const quotaCount = namespaces.filter(n => n.has_resource_quota).length;
 
-  return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{clusterCode}</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">命名空间管理</span>
-      </div>
+  const searchToolbar = (
+    <Input
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      placeholder="搜索命名空间..."
+      className="max-w-xs dg-input"
+    />
+  );
 
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)] flex items-center gap-2">
-            <Boxes className="h-6 w-6 text-[var(--dg-green)]" />
-            命名空间管理
-          </h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">命名空间资源配额与生命周期管理</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={loadData} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+  return (
+    <PageShell
+      variant="list"
+      title="命名空间管理"
+      subtitle={`${clusterCode} · 资源配额与生命周期管理`}
+      icon={<Boxes className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '命名空间', value: namespaces.length, color: 'green' },
+            { label: 'Deployments', value: totalDeploys, color: 'blue' },
+            { label: 'Pods', value: totalPods, color: 'purple' },
+            { label: 'Services', value: totalSvcs, color: 'cyan' },
+            { label: '配额限制', value: quotaCount, color: 'amber' },
+          ]}
+        />
+      ) : undefined}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
           </Button>
           <Dialog open={createOpen} onOpenChange={setCreateOpen}>
             <DialogTrigger asChild>
-              <Button className="bg-[var(--dg-blue)] hover:opacity-90">
+              <Button size="sm" className="dg-btn-primary">
                 <Plus className="h-4 w-4 mr-1" />创建命名空间
               </Button>
             </DialogTrigger>
@@ -163,56 +172,10 @@ export default function NamespaceManagementPage() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
-        </div>
-      </div>
-
-      {/* Stats cards */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">命名空间</p><p className="text-xl font-bold text-[var(--dg-green)]">{namespaces.length}</p></div>
-            <Boxes className="h-6 w-6 opacity-30 text-[var(--dg-green)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Deployments</p><p className="text-xl font-bold text-[var(--dg-blue)]">{totalDeploys}</p></div>
-            <Container className="h-6 w-6 opacity-30 text-[var(--dg-blue)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Pods</p><p className="text-xl font-bold text-[var(--dg-purple)]">{totalPods}</p></div>
-            <Activity className="h-6 w-6 opacity-30 text-[var(--dg-purple)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Services</p><p className="text-xl font-bold text-[var(--dg-cyan)]">{totalSvcs}</p></div>
-            <Network className="h-6 w-6 opacity-30 text-[var(--dg-cyan)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">配额限制</p><p className="text-xl font-bold text-[var(--dg-orange)]">{quotaCount}</p></div>
-            <Shield className="h-6 w-6 opacity-30 text-[var(--dg-orange)]" />
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Search */}
-      <div className="flex items-center gap-3">
-        <Input
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder="搜索命名空间..."
-          className="max-w-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
-        />
-      </div>
-
-      {/* Namespace table */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={searchToolbar}>
           <Table>
             <TableHeader>
               <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -302,8 +265,7 @@ export default function NamespaceManagementPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+      </ContentPanel>
 
       {/* Delete confirmation dialog */}
       <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
@@ -332,6 +294,6 @@ export default function NamespaceManagementPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/NamespaceOverviewPage.tsx b/frontend/src/components/kubernetes/NamespaceOverviewPage.tsx
index 8069d38..88d1697 100644
--- a/frontend/src/components/kubernetes/NamespaceOverviewPage.tsx
+++ b/frontend/src/components/kubernetes/NamespaceOverviewPage.tsx
@@ -14,6 +14,7 @@ import {
 } from 'lucide-react';
 
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 
 const RESOURCE_LINKS = [
@@ -63,28 +64,14 @@ export default function NamespaceOverviewPage() {
   useEffect(() => { loadCounts(); }, [loadCounts]);
 
   return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-primary)] transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-primary)] transition-colors">{clusterCode}</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-primary)]">{namespace}</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)] flex items-center gap-2">
-            <Cloud className="h-6 w-6 text-[var(--dg-blue)]" />
-            {namespace}
-          </h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">命名空间概览</p>
-        </div>
-      </div>
-
-      {/* Resource grid */}
+    <PageShell
+      variant="default"
+      title={namespace || '命名空间'}
+      subtitle={`${clusterCode} · 命名空间概览`}
+      icon={<Cloud className="h-5 w-5" />}
+      loading={loading}
+      loadingLabel="加载资源统计..."
+    >
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         {RESOURCE_LINKS.map((r) => (
           <Link key={r.type}
@@ -101,6 +88,6 @@ export default function NamespaceOverviewPage() {
           </Link>
         ))}
       </div>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/NamespaceResourcePage.tsx b/frontend/src/components/kubernetes/NamespaceResourcePage.tsx
index 93802f8..98ba93e 100644
--- a/frontend/src/components/kubernetes/NamespaceResourcePage.tsx
+++ b/frontend/src/components/kubernetes/NamespaceResourcePage.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -13,7 +12,7 @@ import {
 } from '@/components/ui/table';
 import {
   RefreshCw, Search, Loader2, Boxes, Container,
-  Network, FileText, Shield, Activity, Clock, ChevronRight,
+  Network, FileText, Shield, Activity, Clock,
   Download, FileCode, Pencil, Terminal, HardDrive, Plus, Upload, Trash2, Eye,
 } from 'lucide-react';
 import { YamlViewer } from './YamlViewer';
@@ -24,6 +23,8 @@ import { PodFileBrowser } from './PodFileBrowser';
 import { kubernetesApi } from '@/api';
 import { useToast } from '@/hooks/use-toast';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
 
 type ResourceType =
   | 'deployments' | 'pods' | 'services' | 'ingresses'
@@ -463,8 +464,63 @@ export default function NamespaceResourcePage() {
 
   if (!config) return <div className="text-[var(--dg-text-secondary)] p-8 text-center">未知资源类型: {type}</div>;
 
+  const searchToolbar = (
+    <div className="relative w-56 flex-1 min-w-[200px] max-w-xs">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+      <Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
+    </div>
+  );
+
+  const ResourceIcon = config.icon;
+
   return (
-    <div className="space-y-4">
+    <PageShell
+      variant="list"
+      title={config.title}
+      subtitle={`${clusterCode || '-'} / ${namespace || '-'} · ${config.subtitle}`}
+      icon={<ResourceIcon className="h-5 w-5" />}
+      actions={(
+        <>
+          <Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}>
+            <SelectTrigger className="w-48 h-9 dg-input"><SelectValue placeholder="选择集群" /></SelectTrigger>
+            <SelectContent>{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
+          </Select>
+          <Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}>
+            <SelectTrigger className="w-40 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
+            <SelectContent className="max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent>
+          </Select>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+          {BULK_EXPORT_TYPES.includes(type) && (
+            <>
+              <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportCSV} title="导出CSV">
+                <Download className="h-3 w-3 mr-1" />CSV
+              </Button>
+              <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportJSON} title="导出JSON">
+                <Download className="h-3 w-3 mr-1" />JSON
+              </Button>
+            </>
+          )}
+          {EXPORT_YAML_TYPES.includes(type) && (
+            <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportYaml} title="导出命名空间 YAML（tar.gz）">
+              <Download className="h-3 w-3 mr-1" />导出YAML
+            </Button>
+          )}
+          {(VISUAL_RESOURCE_TYPES.includes(type) || DEPLOYMENT_LIST_TYPES.includes(type)) && (
+            <>
+              <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={() => setShowYamlImport(true)}>
+                <Upload className="h-3 w-3 mr-1" />导入
+              </Button>
+              <Button size="sm" className="dg-btn-primary text-xs" onClick={handleCreate}>
+                <Plus className="h-3 w-3 mr-1" />新建
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    >
       {yamlItem && (
         <YamlViewer
           clusterCode={clusterCode || ''}
@@ -495,64 +551,7 @@ export default function NamespaceResourcePage() {
         />
       )}
 
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
-        {clusterCode && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{clusterCode}</Link></>}
-        {namespace && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${clusterCode}/namespace/${namespace}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{namespace}</Link></>}
-        <ChevronRight className="h-3 w-3" /><span className="text-[var(--dg-text-secondary)]">{config.title}</span>
-      </div>
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{config.title}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">{config.subtitle}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}>
-            <SelectTrigger className="w-48 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue placeholder="选择集群" /></SelectTrigger>
-            <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
-          </Select>
-          <Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}>
-            <SelectTrigger className="w-40 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue placeholder="命名空间" /></SelectTrigger>
-            <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent>
-          </Select>
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadData} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-          </Button>
-          {BULK_EXPORT_TYPES.includes(type) && (
-            <>
-              <Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportCSV} title="导出CSV">
-                <Download className="h-3 w-3 mr-1" />CSV
-              </Button>
-              <Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportJSON} title="导出JSON">
-                <Download className="h-3 w-3 mr-1" />JSON
-              </Button>
-            </>
-          )}
-          {EXPORT_YAML_TYPES.includes(type) && (
-            <Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={handleExportYaml} title="导出命名空间 YAML（tar.gz）">
-              <Download className="h-3 w-3 mr-1" />导出YAML
-            </Button>
-          )}
-          {(VISUAL_RESOURCE_TYPES.includes(type) || DEPLOYMENT_LIST_TYPES.includes(type)) && (
-            <>
-              <Button variant="outline" size="sm" className="h-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => setShowYamlImport(true)}>
-                <Upload className="h-3 w-3 mr-1" />导入
-              </Button>
-              <Button size="sm" className="h-9 text-xs bg-[var(--dg-blue)] hover:opacity-90" onClick={handleCreate}>
-                <Plus className="h-3 w-3 mr-1" />新建
-              </Button>
-            </>
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-3 flex-wrap">
-      <div className="relative w-56 flex-1 min-w-[200px] max-w-xs">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-        <Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-      </div>
-      </div>
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+      <ContentPanel toolbar={searchToolbar}>
           <Table>
             <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">{config.columns.map((col) => <TableHead key={col} className="text-[var(--dg-text-secondary)]">{col}</TableHead>)}</TableRow></TableHeader>
             <TableBody>
@@ -565,8 +564,7 @@ export default function NamespaceResourcePage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+      </ContentPanel>
 
       {/* ============ Pod 终端 ============ */}
       <PodExecTerminal
@@ -709,6 +707,6 @@ export default function NamespaceResourcePage() {
           </div>
         </div>
       )}
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/NodeDetailPage.tsx b/frontend/src/components/kubernetes/NodeDetailPage.tsx
index 1f3189a..1f73fa5 100644
--- a/frontend/src/components/kubernetes/NodeDetailPage.tsx
+++ b/frontend/src/components/kubernetes/NodeDetailPage.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -13,7 +13,7 @@ import {
   Loader2,
   Server,
   Activity,
-  ChevronRight,
+  ArrowLeft,
   Container,
   Network,
   Info,
@@ -22,10 +22,11 @@ import {
 } from 'lucide-react';
 
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
 
 export default function NodeDetailPage() {
   const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
-  const _navigate = useNavigate();
+  const navigate = useNavigate();
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(false);
 
@@ -53,13 +54,13 @@ export default function NodeDetailPage() {
     return (
       <div className="space-y-1.5">
         <div className="flex items-center justify-between text-xs">
-          <span className="text-slate-400">{label}</span>
-          <span className="text-slate-300 font-medium">
+          <span className="dg-text-secondary">{label}</span>
+          <span className="text-[var(--dg-text-secondary)] font-medium">
             {used} / {total} {unit}
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex-1 h-2 rounded-full bg-slate-700/50 overflow-hidden">
+          <div className="flex-1 h-2 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
             <div className={`h-full rounded-full ${barColor} transition-all duration-500`} style={{ width: `${safePct}%` }} />
           </div>
           <span className={`text-xs font-semibold min-w-[40px] text-right ${color}`}>
@@ -72,120 +73,113 @@ export default function NodeDetailPage() {
 
   const conditionColor = (type: string, status: string) => {
     if (status === 'True') {
-      if (type === 'Ready') return 'bg-emerald-500/20 text-emerald-400';
+      if (type === 'Ready') return 'bg-emerald-500/20 dg-text-green';
       // Other True conditions (DiskPressure, MemoryPressure, PIDPressure, NetworkUnavailable) are BAD
-      return 'bg-red-500/20 text-red-400';
+      return 'bg-red-500/20 dg-text-red';
     }
-    return 'bg-slate-500/20 text-slate-400';
+    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary';
   };
 
   const taintColor = (effect: string) => {
-    if (effect === 'NoSchedule') return 'bg-red-500/20 text-red-400 border-red-500/30';
-    if (effect === 'NoExecute') return 'bg-red-600/20 text-red-300 border-red-600/30';
-    if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
-    return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
+    if (effect === 'NoSchedule') return 'bg-red-500/20 dg-text-red border-red-500/30';
+    if (effect === 'NoExecute') return 'bg-red-600/20 dg-text-red border-red-600/30';
+    if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 dg-text-yellow border-amber-500/30';
+    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
   };
 
+  const nodeSubtitle = [
+    clusterCode,
+    data?.internal_ip,
+    data?.hostname,
+  ].filter(Boolean).join(' · ');
+
   return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-slate-500">
-        <Link to="/kubernetes" className="hover:text-slate-300 transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <Link to={`/kubernetes/${clusterCode}`} className="hover:text-slate-300 transition-colors">{clusterCode}</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-slate-300">{nodeName}</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-slate-800 border border-slate-700">
-            <Server className="h-6 w-6 text-blue-400" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2">
-              <h1 className="text-2xl font-bold text-slate-100">{nodeName}</h1>
-              <Badge className={data?.role === 'master' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' : 'bg-slate-500/20 text-slate-400 border-slate-500/30'}>
-                {data?.role || 'worker'}
-              </Badge>
-              <Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}>
-                {data?.status || 'Unknown'}
-              </Badge>
-            </div>
-            <p className="text-sm text-slate-500 mt-0.5">
-              {data?.internal_ip && `${data.internal_ip}`}
-              {data?.hostname && ` · ${data.hostname}`}
-            </p>
-          </div>
+    <PageShell
+      variant="default"
+      title={nodeName || '节点详情'}
+      subtitle={nodeSubtitle || clusterCode}
+      icon={<Server className="h-5 w-5" />}
+      loading={loading && !data}
+      loadingLabel="加载节点详情..."
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            返回
+          </Button>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+        </>
+      )}
+    >
+      {data && (
+        <div className="flex items-center gap-2 mb-4">
+          <Badge className={data?.role === 'master' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>
+            {data?.role || 'worker'}
+          </Badge>
+          <Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 dg-text-green' : 'bg-red-500/20 dg-text-red'}>
+            {data?.status || 'Unknown'}
+          </Badge>
         </div>
-        <Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400"
-          onClick={loadData} disabled={loading}>
-          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-        </Button>
-      </div>
+      )}
 
-      {loading && !data ? (
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="py-16 flex items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
-          </CardContent>
-        </Card>
-      ) : !data ? (
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="py-16 text-center text-slate-500">
+      {!loading && !data ? (
+        <Card className="dg-card">
+          <CardContent className="py-16 text-center dg-text-muted">
             <AlertTriangle className="h-8 w-8 mx-auto mb-2 opacity-50" />
             无法加载节点详情
           </CardContent>
         </Card>
-      ) : (
+      ) : data ? (
         <>
           {/* Row 1: System Info + Basic Info */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* System Info */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Info className="h-4 w-4 text-cyan-400" />系统信息
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Info className="h-4 w-4 dg-text-cyan" />系统信息
                 </h2>
                 <div className="space-y-2 text-xs">
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">容器运行时</span>
-                    <span className="text-slate-300 font-mono">{data.container_runtime || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">容器运行时</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">Kubelet</span>
-                    <span className="text-slate-300 font-mono">{data.kubelet_version || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">Kubelet</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">操作系统</span>
-                    <span className="text-slate-300">{data.os_image || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">操作系统</span>
+                    <span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">内核版本</span>
-                    <span className="text-slate-300 font-mono">{data.kernel_version || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">内核版本</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">架构</span>
-                    <span className="text-slate-300 font-mono">{data.architecture || '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">架构</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span>
                   </div>
-                  <div className="flex items-center justify-between py-1.5 border-b border-slate-800/50">
-                    <span className="text-slate-500">创建时间</span>
-                    <span className="text-slate-300">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
+                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
+                    <span className="dg-text-muted">创建时间</span>
+                    <span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
                   </div>
                   <div className="flex items-center justify-between py-1.5">
-                    <span className="text-slate-500">Pod CIDR</span>
-                    <span className="text-slate-300 font-mono">{data.pod_cidr || '-'}</span>
+                    <span className="dg-text-muted">Pod CIDR</span>
+                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.pod_cidr || '-'}</span>
                   </div>
                 </div>
               </CardContent>
             </Card>
 
             {/* Resource Allocation */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Activity className="h-4 w-4 text-emerald-400" />资源分配率
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Activity className="h-4 w-4 dg-text-green" />资源分配率
                 </h2>
                 <div className="space-y-4 mt-4">
                   {/* CPU allocation (requested vs allocatable) */}
@@ -195,7 +189,7 @@ export default function NodeDetailPage() {
                     total={`${data.cpu_allocatable} 核`}
                     unit=""
                     pct={data.cpu_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                   {/* CPU real usage (from metrics) */}
                   {data.cpu_usage_m && (
@@ -205,7 +199,7 @@ export default function NodeDetailPage() {
                       total={`${data.cpu_capacity} 核`}
                       unit=""
                       pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100}
-                      color="text-blue-400"
+                      color="dg-text-blue"
                     />
                   )}
                   {/* Memory allocation */}
@@ -215,7 +209,7 @@ export default function NodeDetailPage() {
                     total={`${data.mem_allocatable_mb} Mi`}
                     unit=""
                     pct={data.mem_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                   {/* Memory real usage */}
                   {data.mem_usage_mi && (
@@ -225,7 +219,7 @@ export default function NodeDetailPage() {
                       total={`${data.mem_capacity_mb} Mi`}
                       unit=""
                       pct={(parseFloat(data.mem_usage_mi.replace('Mi', '').replace('Ki', '').replace('Gi', '')) / data.mem_capacity_mb) * 100}
-                      color="text-blue-400"
+                      color="dg-text-blue"
                     />
                   )}
                   {/* Pod allocation */}
@@ -235,11 +229,11 @@ export default function NodeDetailPage() {
                     total={`${data.pod_allocatable}`}
                     unit=""
                     pct={data.pod_alloc_pct}
-                    color="text-emerald-400"
+                    color="dg-text-green"
                   />
                 </div>
                 {/* Capacity vs Allocatable raw */}
-                <div className="mt-4 pt-3 border-t border-slate-800/50 space-y-1 text-[11px] text-slate-500">
+                <div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted">
                   <div className="flex justify-between">
                     <span>CPU 容量 / 可分配</span>
                     <span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span>
@@ -260,24 +254,24 @@ export default function NodeDetailPage() {
           {/* Row 2: Conditions + Taints */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Conditions */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <CheckCircle2 className="h-4 w-4 text-blue-400" />节点条件
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件
                 </h2>
                 {(!data.conditions || data.conditions.length === 0) ? (
-                  <p className="text-xs text-slate-500 py-4 text-center">无条件数据</p>
+                  <p className="text-xs dg-text-muted py-4 text-center">无条件数据</p>
                 ) : (
                   <div className="space-y-2">
                     {data.conditions.map(( cond: any, i: number) => (
-                      <div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-slate-800/30 last:border-0">
+                      <div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-[var(--dg-border)]/30 last:border-0">
                         <Badge className={conditionColor(cond.type, cond.status)}>
                           {cond.status === 'True' ? <CheckCircle2 className="h-3 w-3 mr-1" /> : null}
                           {cond.type}
                         </Badge>
                         <div className="flex-1 min-w-0">
-                          {cond.reason && <span className="text-slate-400 block">{cond.reason}</span>}
-                          {cond.message && <span className="text-slate-600 text-[11px] block truncate">{cond.message}</span>}
+                          {cond.reason && <span className="dg-text-secondary block">{cond.reason}</span>}
+                          {cond.message && <span className="dg-text-muted text-[11px] block truncate">{cond.message}</span>}
                         </div>
                       </div>
                     ))}
@@ -287,20 +281,20 @@ export default function NodeDetailPage() {
             </Card>
 
             {/* Taints */}
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-400" />污点 (Taints)
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints)
                 </h2>
                 {(!data.taints || data.taints.length === 0) ? (
-                  <p className="text-xs text-slate-500 py-4 text-center">无污点</p>
+                  <p className="text-xs dg-text-muted py-4 text-center">无污点</p>
                 ) : (
                   <div className="space-y-2">
                     {data.taints.map(( t: any, i: number) => (
                       <div key={i} className="flex items-center gap-2 text-xs">
                         <Badge className={taintColor(t.effect)}>{t.effect}</Badge>
-                        <span className="text-slate-300 font-mono">{t.key}</span>
-                        {t.value && <span className="text-slate-500">= {t.value}</span>}
+                        <span className="text-[var(--dg-text-secondary)] font-mono">{t.key}</span>
+                        {t.value && <span className="dg-text-muted">= {t.value}</span>}
                       </div>
                     ))}
                   </div>
@@ -311,17 +305,17 @@ export default function NodeDetailPage() {
 
           {/* Row 3: Labels */}
           {data.labels && data.labels.length > 0 && (
-            <Card className="bg-slate-900 border-slate-800">
+            <Card className="dg-card">
               <CardContent className="p-4">
-                <h2 className="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
-                  <Network className="h-4 w-4 text-slate-400" />标签 ({data.labels.length})
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
+                  <Network className="h-4 w-4 dg-text-secondary" />标签 ({data.labels.length})
                 </h2>
                 <div className="flex flex-wrap gap-1.5">
                   {data.labels.map(( l: any, i: number) => (
-                    <div key={i} className="flex items-center gap-1 bg-slate-800/50 border border-slate-700/50 rounded px-2 py-0.5 text-[11px]">
-                      <span className="text-slate-400">{l.key}</span>
-                      <span className="text-slate-600">:</span>
-                      <span className="text-slate-300">{l.value}</span>
+                    <div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50 rounded px-2 py-0.5 text-[11px]">
+                      <span className="dg-text-secondary">{l.key}</span>
+                      <span className="dg-text-muted">:</span>
+                      <span className="text-[var(--dg-text-secondary)]">{l.value}</span>
                     </div>
                   ))}
                 </div>
@@ -330,54 +324,54 @@ export default function NodeDetailPage() {
           )}
 
           {/* Row 4: Pods on this node */}
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardContent className="p-0">
-              <div className="px-4 py-3 border-b border-slate-800">
-                <h2 className="text-sm font-semibold text-slate-200 flex items-center gap-2">
-                  <Container className="h-4 w-4 text-cyan-400" />
+              <div className="px-4 py-3 border-b border-[var(--dg-border)]">
+                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
+                  <Container className="h-4 w-4 dg-text-cyan" />
                   节点上的 Pod
-                  <Badge className="bg-slate-700/50 text-slate-300">{data.pods?.length || 0}</Badge>
+                  <Badge className="bg-[var(--dg-bg-active)]/50 text-[var(--dg-text-secondary)]">{data.pods?.length || 0}</Badge>
                 </h2>
               </div>
               {(!data.pods || data.pods.length === 0) ? (
-                <p className="text-xs text-slate-500 py-8 text-center">该节点上暂无 Pod</p>
+                <p className="text-xs dg-text-muted py-8 text-center">该节点上暂无 Pod</p>
               ) : (
                 <Table>
                   <TableHeader>
-                    <TableRow className="border-slate-800 hover:bg-transparent">
-                      <TableHead className="text-slate-400">命名空间</TableHead>
-                      <TableHead className="text-slate-400">名称</TableHead>
-                      <TableHead className="text-slate-400">状态</TableHead>
-                      <TableHead className="text-slate-400">IP</TableHead>
-                      <TableHead className="text-slate-400">CPU 请求</TableHead>
-                      <TableHead className="text-slate-400">内存请求</TableHead>
-                      <TableHead className="text-slate-400">重启次数</TableHead>
+                    <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                      <TableHead className="dg-text-secondary">命名空间</TableHead>
+                      <TableHead className="dg-text-secondary">名称</TableHead>
+                      <TableHead className="dg-text-secondary">状态</TableHead>
+                      <TableHead className="dg-text-secondary">IP</TableHead>
+                      <TableHead className="dg-text-secondary">CPU 请求</TableHead>
+                      <TableHead className="dg-text-secondary">内存请求</TableHead>
+                      <TableHead className="dg-text-secondary">重启次数</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
                     {data.pods.map(( p: any, i: number) => (
-                      <TableRow key={i} className="border-slate-800 hover:bg-slate-800/30">
-                        <TableCell className="text-sm text-slate-400">{p.namespace}</TableCell>
-                        <TableCell className="text-sm font-medium text-slate-200">{p.name}</TableCell>
+                      <TableRow key={i} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                        <TableCell className="text-sm dg-text-secondary">{p.namespace}</TableCell>
+                        <TableCell className="text-sm font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
                         <TableCell>
                           <Badge className={
-                            p.status === 'Running' ? 'bg-emerald-500/20 text-emerald-400' :
-                            p.status === 'Pending' ? 'bg-amber-500/20 text-amber-400' :
-                            'bg-red-500/20 text-red-400'
+                            p.status === 'Running' ? 'bg-emerald-500/20 dg-text-green' :
+                            p.status === 'Pending' ? 'bg-amber-500/20 dg-text-yellow' :
+                            'bg-red-500/20 dg-text-red'
                           }>{p.status}</Badge>
                         </TableCell>
-                        <TableCell className="text-xs text-slate-400 font-mono">{p.ip || '-'}</TableCell>
-                        <TableCell className="text-xs text-slate-400">
+                        <TableCell className="text-xs dg-text-secondary font-mono">{p.ip || '-'}</TableCell>
+                        <TableCell className="text-xs dg-text-secondary">
                           {p.cpu_request_m > 0 ? `${p.cpu_request_m}m` : '-'}
                         </TableCell>
-                        <TableCell className="text-xs text-slate-400">
+                        <TableCell className="text-xs dg-text-secondary">
                           {p.mem_request_mi > 0 ? `${p.mem_request_mi}Mi` : '-'}
                         </TableCell>
                         <TableCell className="text-xs">
                           {p.restart_count > 0 ? (
-                            <span className="text-amber-400">{p.restart_count}</span>
+                            <span className="dg-text-yellow">{p.restart_count}</span>
                           ) : (
-                            <span className="text-slate-600">0</span>
+                            <span className="dg-text-muted">0</span>
                           )}
                         </TableCell>
                       </TableRow>
@@ -388,7 +382,7 @@ export default function NodeDetailPage() {
             </CardContent>
           </Card>
         </>
-      )}
-    </div>
+      ) : null}
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/PodExecTerminal.tsx b/frontend/src/components/kubernetes/PodExecTerminal.tsx
index 3784972..1e48e40 100644
--- a/frontend/src/components/kubernetes/PodExecTerminal.tsx
+++ b/frontend/src/components/kubernetes/PodExecTerminal.tsx
@@ -265,7 +265,7 @@ export function PodExecTerminal({
   // ─── UI ───
   const statusColor = connState === 'connected' ? 'bg-emerald-400'
     : connState === 'error' ? 'bg-red-400'
-    : connState === 'closed' ? 'bg-slate-500' : 'bg-amber-400';
+    : connState === 'closed' ? 'bg-[var(--dg-bg-active)]' : 'bg-amber-400';
   const statusText = connState === 'connected' ? '已连接'
     : connState === 'connecting' ? '连接中'
     : connState === 'error' ? '连接错误'
@@ -295,7 +295,7 @@ export function PodExecTerminal({
         <div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
           <div className="flex items-center gap-2 text-sm min-w-0">
             <div className={cn('w-2 h-2 rounded-full shrink-0', statusColor)} title={statusText} />
-            <Terminal className="h-4 w-4 text-blue-400 shrink-0" />
+            <Terminal className="h-4 w-4 dg-text-blue shrink-0" />
             <span className="text-[var(--dg-text-primary)] font-medium truncate">exec — {podName}</span>
             {connState === 'connecting' && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
             <span className="text-xs text-[var(--dg-text-muted)]">{statusText}</span>
diff --git a/frontend/src/components/kubernetes/PodFileBrowser.tsx b/frontend/src/components/kubernetes/PodFileBrowser.tsx
index 9b82c69..d34f1c4 100644
--- a/frontend/src/components/kubernetes/PodFileBrowser.tsx
+++ b/frontend/src/components/kubernetes/PodFileBrowser.tsx
@@ -163,55 +163,55 @@ export function PodFileBrowser({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70" onClick={() => onOpenChange(false)}>
       <div
-        className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
+        className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-3 border-b border-slate-700 shrink-0 gap-3">
+        <div className="flex items-center justify-between p-3 border-b border-[var(--dg-border)] shrink-0 gap-3">
           <div className="flex items-center gap-2 min-w-0 flex-1">
-            <HardDrive className="h-4 w-4 shrink-0 text-amber-400" />
-            <span className="text-sm font-semibold text-slate-200 truncate" title={podName}>文件: {podName}</span>
-            <Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px] shrink-0">{namespace}</Badge>
+            <HardDrive className="h-4 w-4 shrink-0 dg-text-yellow" />
+            <span className="text-sm font-semibold text-[var(--dg-text-primary)] truncate" title={podName}>文件: {podName}</span>
+            <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px] shrink-0">{namespace}</Badge>
           </div>
           <div className="flex items-center gap-2">
             {containers.length > 0 && (
               <select
                 value={container}
                 onChange={(e) => { setContainer(e.target.value); }}
-                className="bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 py-1"
+                className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 py-1"
               >
                 {containers.map((c) => <option key={c} value={c}>{c}</option>)}
               </select>
             )}
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400" onClick={() => onOpenChange(false)}>
+            <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={() => onOpenChange(false)}>
               <X className="h-4 w-4" />
             </Button>
           </div>
         </div>
 
         {/* Breadcrumb + Actions */}
-        <div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
-          <div className="flex items-center gap-1 text-xs text-slate-400">
-            <Button variant="ghost" size="icon" className="h-6 w-6 text-slate-500" onClick={handleGoUp} disabled={currentPath === '/'}>
+        <div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
+          <div className="flex items-center gap-1 text-xs dg-text-secondary">
+            <Button variant="ghost" size="icon" className="h-6 w-6 dg-text-muted" onClick={handleGoUp} disabled={currentPath === '/'}>
               <ArrowLeft className="h-3.5 w-3.5" />
             </Button>
-            <button className="hover:text-slate-200" onClick={() => loadFiles('/')}>root</button>
+            <button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles('/')}>root</button>
             {pathSegments.map((seg, i) => {
               const path = `/${pathSegments.slice(0, i + 1).join('/')}`;
               return (
                 <span key={path} className="flex items-center gap-1">
                   <ChevronRight className="h-3 w-3" />
-                  <button className="hover:text-slate-200" onClick={() => loadFiles(path)}>{seg}</button>
+                  <button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles(path)}>{seg}</button>
                 </span>
               );
             })}
           </div>
           <div className="flex items-center gap-2">
             <input type="file" ref={fileInputRef} className="hidden" onChange={handleUpload} />
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
               {uploading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Upload className="h-3 w-3 mr-1" />}上传
             </Button>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
               {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
             </Button>
           </div>
@@ -220,34 +220,34 @@ export function PodFileBrowser({
         {/* Content */}
         <div className="flex-1 overflow-hidden flex">
           {/* File list */}
-          <div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-slate-800`}>
-            {error && <p className="text-xs text-red-400 p-2">{error}</p>}
+          <div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-[var(--dg-border)]`}>
+            {error && <p className="text-xs dg-text-red p-2">{error}</p>}
             {loading ? (
-              <div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin text-slate-500" /></div>
+              <div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin dg-text-muted" /></div>
             ) : entries.length === 0 ? (
-              <p className="text-xs text-slate-500 p-4 text-center">空目录</p>
+              <p className="text-xs dg-text-muted p-4 text-center">空目录</p>
             ) : (
               <div className="space-y-0.5">
                 {entries.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)).map((entry) => (
                   <div
                     key={entry.name}
-                    className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-800/50 cursor-pointer group"
+                    className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--dg-bg-hover)] cursor-pointer group"
                     onClick={() => handleClick(entry)}
                   >
                     {entry.isDir ? (
-                      <Folder className="h-4 w-4 text-blue-400 shrink-0" />
+                      <Folder className="h-4 w-4 dg-text-blue shrink-0" />
                     ) : (
-                      <File className="h-4 w-4 text-slate-500 shrink-0" />
+                      <File className="h-4 w-4 dg-text-muted shrink-0" />
                     )}
-                    <span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-slate-300'}`}>
+                    <span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-[var(--dg-text-secondary)]'}`}>
                       {entry.name}
                     </span>
                     {!entry.isDir && (
-                      <span className="text-[10px] text-slate-600 ml-auto shrink-0">{formatSize(entry.size)}</span>
+                      <span className="text-[10px] dg-text-muted ml-auto shrink-0">{formatSize(entry.size)}</span>
                     )}
                     {!entry.isDir && (
                       <Button
-                        variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-emerald-400 shrink-0"
+                        variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 dg-text-secondary hover:dg-text-green shrink-0"
                         onClick={(e) => { e.stopPropagation(); handleDownload(entry.name); }}
                         title="下载"
                       >
@@ -263,14 +263,14 @@ export function PodFileBrowser({
           {/* Preview */}
           {preview && (
             <div className="w-1/2 flex flex-col overflow-hidden">
-              <div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
-                <span className="text-xs text-slate-300 font-mono">{preview.file}</span>
-                <Button variant="ghost" size="icon" className="h-6 w-6 text-slate-400" onClick={() => setPreview(null)}>
+              <div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
+                <span className="text-xs text-[var(--dg-text-secondary)] font-mono">{preview.file}</span>
+                <Button variant="ghost" size="icon" className="h-6 w-6 dg-text-secondary" onClick={() => setPreview(null)}>
                   <X className="h-3.5 w-3.5" />
                 </Button>
               </div>
               <div className="flex-1 overflow-auto p-3">
-                <pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all bg-slate-950 rounded p-3">
+                <pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] rounded p-3">
                   {preview.content || '(空文件)'}
                 </pre>
               </div>
diff --git a/frontend/src/components/kubernetes/PodLogsViewer.tsx b/frontend/src/components/kubernetes/PodLogsViewer.tsx
index dcadcc1..6cc3a1c 100644
--- a/frontend/src/components/kubernetes/PodLogsViewer.tsx
+++ b/frontend/src/components/kubernetes/PodLogsViewer.tsx
@@ -337,9 +337,9 @@ export function PodLogsViewer({
           <div className="flex items-center gap-2 text-sm min-w-0">
             <div className={cn(
               'w-2 h-2 rounded-full shrink-0',
-              streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-slate-500'
+              streaming ? (paused ? 'bg-amber-400' : 'bg-emerald-400 animate-pulse') : 'bg-[var(--dg-bg-active)]'
             )} />
-            <ScrollText className="h-4 w-4 text-blue-400 shrink-0" />
+            <ScrollText className="h-4 w-4 dg-text-blue shrink-0" />
             <span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span>
             {loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
             <span className="text-xs text-[var(--dg-text-muted)]">
@@ -472,7 +472,7 @@ export function PodLogsViewer({
             <>
               <Button
                 variant="outline" size="sm"
-                className={cn('h-8 text-xs', paused ? 'border-emerald-500 text-emerald-400' : 'border-amber-500 text-amber-400')}
+                className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')}
                 onClick={() => setPaused(!paused)}
                 title={paused ? '继续' : '暂停'}
               >
@@ -481,7 +481,7 @@ export function PodLogsViewer({
               </Button>
               <Button
                 variant="outline" size="sm"
-                className="h-8 text-xs border-red-500 text-red-400"
+                className="h-8 text-xs border-red-500 dg-text-red"
                 onClick={stopStream}
                 title="停止"
               >
@@ -503,7 +503,7 @@ export function PodLogsViewer({
           }}
           className={cn(
             'overflow-auto bg-[#0f172a] font-mono text-xs leading-relaxed p-3',
-            'text-slate-300'
+            'text-[var(--dg-text-secondary)]'
           )}
           style={{ height: fullscreen ? 'calc(100vh - 98px)' : '520px' }}
         >
@@ -531,10 +531,10 @@ export function PodLogsViewer({
             <span className="flex items-center gap-1"><Filter className="h-3 w-3" />缓冲 {lineCount}/{RING_BUFFER_MAX}</span>
             {keyword && <span>匹配 {matchedCount}</span>}
             {container && <span className="flex items-center gap-1"><Box className="h-3 w-3" />{container}</span>}
-            {previous && <span className="text-amber-400 flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
+            {previous && <span className="dg-text-yellow flex items-center gap-1"><History className="h-3 w-3" />previous</span>}
           </div>
           <button
-            className={cn('flex items-center gap-1', autoScroll ? 'text-emerald-400' : 'text-[var(--dg-text-muted)]')}
+            className={cn('flex items-center gap-1', autoScroll ? 'dg-text-green' : 'text-[var(--dg-text-muted)]')}
             onClick={() => {
               setAutoScroll(!autoScroll);
               if (!autoScroll && scrollRef.current) {
diff --git a/frontend/src/components/kubernetes/PodMetricsPage.tsx b/frontend/src/components/kubernetes/PodMetricsPage.tsx
index 66d3973..df2f6da 100644
--- a/frontend/src/components/kubernetes/PodMetricsPage.tsx
+++ b/frontend/src/components/kubernetes/PodMetricsPage.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -9,8 +8,11 @@ import {
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
-import { Cpu, HardDrive, RefreshCw, ChevronRight, Activity } from 'lucide-react';
+import { Cpu, HardDrive, RefreshCw, Activity } from 'lucide-react';
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 export default function PodMetricsPage() {
@@ -78,75 +80,69 @@ export default function PodMetricsPage() {
     return sum;
   }, [rows]);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 text-sm text-slate-500">
-        <Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
-        {activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
-        <ChevronRight className="h-3 w-3" /><span className="text-slate-300">Pod 资源用量</span>
-      </div>
+  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
 
-      <div className="flex items-center justify-between flex-wrap gap-3">
-        <h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><Activity className="h-5 w-5 text-blue-400" />Pod 资源用量</h2>
-        <div className="flex items-center gap-2">
+  return (
+    <PageShell
+      variant="list"
+      title="Pod 资源用量"
+      subtitle={clusterName ? `${clusterName} · 容器 CPU/内存实时指标` : '容器 CPU/内存实时指标'}
+      icon={<Activity className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: 'Pod 数', value: metrics.length, color: 'muted' },
+            { label: '总 CPU', value: `${totalCPU}m`, color: 'blue' },
+            { label: '总内存', value: `${totalMem.toFixed(0)}Mi`, color: 'green' },
+          ]}
+        />
+      ) : undefined}
+      actions={(
+        <>
           <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/metrics/pods`); }}>
-            <SelectTrigger className="w-44 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
-              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
+            <SelectTrigger className="w-44 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
             </SelectContent>
           </Select>
           <Select value={selectedNs} onValueChange={setSelectedNs}>
-            <SelectTrigger className="w-36 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
-              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
-              {namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
+            <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">所有命名空间</SelectItem>
+              {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadMetrics} disabled={loading}>
-            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadMetrics} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
           </Button>
-        </div>
-      </div>
-
-      {/* Summary cards */}
-      <div className="grid grid-cols-3 gap-3">
-        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
-          <p className="text-xs text-slate-500">Pod 数</p><p className="text-xl font-bold text-slate-200">{metrics.length}</p>
-        </CardContent></Card>
-        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
-          <p className="text-xs text-slate-500">总 CPU</p><p className="text-xl font-bold text-blue-400">{totalCPU}m</p>
-        </CardContent></Card>
-        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
-          <p className="text-xs text-slate-500">总内存</p><p className="text-xl font-bold text-emerald-400">{totalMem.toFixed(0)}Mi</p>
-        </CardContent></Card>
-      </div>
-
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel>
           <Table>
-            <TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
-              <TableHead className="text-slate-400">Pod</TableHead>
-              <TableHead className="text-slate-400">命名空间</TableHead>
-              <TableHead className="text-slate-400">容器</TableHead>
-              <TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
-              <TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
+            <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+              <TableHead className="dg-text-secondary">Pod</TableHead>
+              <TableHead className="dg-text-secondary">命名空间</TableHead>
+              <TableHead className="dg-text-secondary">容器</TableHead>
+              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
+              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
             </TableRow></TableHeader>
             <TableBody>
               {rows.length === 0 ? (
-                <TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
+                <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
               ) : rows.map((r, i) => (
-                <TableRow key={`${r.pod}-${r.container}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
-                  <TableCell className="font-medium text-slate-200 text-sm">{r.pod}</TableCell>
-                  <TableCell><Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">{r.namespace}</Badge></TableCell>
-                  <TableCell className="text-sm text-slate-400">{r.container}</TableCell>
-                  <TableCell className="text-sm text-blue-400">{r.cpu}</TableCell>
-                  <TableCell className="text-sm text-emerald-400">{r.memory}</TableCell>
+                <TableRow key={`${r.pod}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                  <TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.pod}</TableCell>
+                  <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
+                  <TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
+                  <TableCell className="text-sm dg-text-blue">{r.cpu}</TableCell>
+                  <TableCell className="text-sm dg-text-green">{r.memory}</TableCell>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
-    </div>
+      </ContentPanel>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/ResourceVisualEditor.tsx b/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
index 643d797..66e049e 100644
--- a/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
+++ b/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
@@ -158,11 +158,11 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
 
   const resCfg = getYamlResourceConfig(resource);
   const resourceMeta: Record<string, { title: string; icon: ComponentType<{ className?: string }>; color: string }> = {
-    configmaps: { title: 'ConfigMap', icon: FileText, color: 'text-blue-400' },
-    secrets: { title: 'Secret', icon: Shield, color: 'text-amber-400' },
-    services: { title: 'Service', icon: Network, color: 'text-cyan-400' },
-    ingresses: { title: 'Ingress', icon: ChevronRight, color: 'text-purple-400' },
-    pvcs: { title: 'PersistentVolumeClaim', icon: Database, color: 'text-emerald-400' },
+    configmaps: { title: 'ConfigMap', icon: FileText, color: 'dg-text-blue' },
+    secrets: { title: 'Secret', icon: Shield, color: 'dg-text-yellow' },
+    services: { title: 'Service', icon: Network, color: 'dg-text-cyan' },
+    ingresses: { title: 'Ingress', icon: ChevronRight, color: 'dg-text-purple' },
+    pvcs: { title: 'PersistentVolumeClaim', icon: Database, color: 'dg-text-green' },
   };
   const meta = resourceMeta[resource] || resourceMeta.configmaps;
   const MetaIcon = meta.icon;
@@ -338,7 +338,7 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
                 rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
                 className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
               />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300 shrink-0" onClick={() => removeRow(i)}>
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
             </div>
@@ -439,7 +439,7 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
                 rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
                 className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
               />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400 hover:text-red-300 shrink-0" onClick={() => removeRow(i)}>
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
             </div>
@@ -564,7 +564,7 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
               {svcType === 'NodePort' ? (
                 <Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)} placeholder="NodePort" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
               ) : <div />}
-              <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
             </div>
             </div>
           ))}
@@ -584,7 +584,7 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
                 <Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder="键 (如 app)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
                 <span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span>
                 <Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder="值 (如 nginx)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-red-400 hover:text-red-300" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
               </div>
             ))}
             {selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">暂无选择器</div>}
@@ -769,7 +769,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
                   className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
                   title={rule.host}
                 />
-                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-red-400 hover:text-red-300" onClick={() => removeRule(ri)}><Trash2 className="h-3 w-3" /></Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeRule(ri)}><Trash2 className="h-3 w-3" /></Button>
               </div>
               {rule.paths.map((p, pi) => (
                 <div key={pi} className="overflow-x-auto pl-4">
@@ -781,7 +781,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
                     </Select>
                     <Input value={p.serviceName} onChange={e => updatePath(ri, pi, 'serviceName', e.target.value)} placeholder="Service" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
                     <Input value={p.servicePort} onChange={e => updatePath(ri, pi, 'servicePort', e.target.value)} placeholder="端口" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-                    <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
                   </div>
                 </div>
               ))}
diff --git a/frontend/src/components/kubernetes/TopologyView.tsx b/frontend/src/components/kubernetes/TopologyView.tsx
index a7df754..c4bbd50 100644
--- a/frontend/src/components/kubernetes/TopologyView.tsx
+++ b/frontend/src/components/kubernetes/TopologyView.tsx
@@ -25,6 +25,8 @@ import {
   buildTopology, getNodeIcon, getNodeColor, NODE_TYPE_LABELS, CUSTOM_NODE_TYPES,
   isCustomNode, type TopologyLayoutData,
 } from './topology-helpers';
+import { PageShell } from '@/components/layout/PageShell';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 export function TopologyView() {
   const { t } = useTranslation();
@@ -294,7 +296,7 @@ export function TopologyView() {
     const ys = [60, 180, 320, 480, 640];
     const labels = [t('k8s.tab.overview'), 'Ingress', 'Service', 'Deployment', 'Node'];
     return (
-      <svg ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${canvasW} ${canvasH}`} className="bg-slate-950 rounded-lg" preserveAspectRatio="xMidYMin meet"
+      <svg ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${canvasW} ${canvasH}`} className="bg-[var(--dg-bg-primary)] rounded-lg" preserveAspectRatio="xMidYMin meet"
         onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
         <defs>
           <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
@@ -360,126 +362,115 @@ export function TopologyView() {
     return (
       <div className="grid grid-cols-2 gap-3">
         {entries.map(([key, val]) => (
-          <div key={key} className="p-2 rounded-lg bg-slate-800/50">
-            <p className="text-xs text-slate-500 mb-0.5">{key}</p>
-            <p className="text-sm text-slate-200 truncate" title={String(val)}>{val === null || val === undefined ? '—' : String(val)}</p>
+          <div key={key} className="p-2 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
+            <p className="text-xs dg-text-muted mb-0.5">{key}</p>
+            <p className="text-sm text-[var(--dg-text-primary)] truncate" title={String(val)}>{val === null || val === undefined ? '—' : String(val)}</p>
           </div>
         ))}
       </div>
     );
   };
 
+  const selectedClusterName = clusters.find((c) => String(c.id) === selectedClusterId)?.name;
+  const filterToolbar = (
+    <div className="flex items-center gap-3">
+      <div className="relative w-48">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input placeholder={t('k8s.topology.searchPlaceholder')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 h-9 dg-input" />
+      </div>
+      <Select value={viewType} onValueChange={setViewType}>
+        <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger>
+        <SelectContent className="dg-input">
+          <SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem>
+          {Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{l}</SelectItem>)}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">{t('k8s.topology.title')}</h1>
-          <p className="text-sm text-slate-500 mt-1">
-            {t('k8s.topology.subtitle')}
-            {editMode && <span className="text-amber-400 ml-2">{`· ${t('k8s.topology.editModeActive')}`}</span>}
-            {connectMode && <span className="text-amber-400 ml-1">{`· ${t('k8s.topology.connecting')} ${connectSource ? t('k8s.topology.selectTarget') : t('k8s.topology.selectSource')}`}</span>}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
+    <PageShell
+      variant="workspace"
+      title={t('k8s.topology.title')}
+      subtitle={(
+        <>
+          {selectedClusterName || t('k8s.topology.subtitle')}
+          {editMode && <span className="dg-text-yellow ml-2">{`· ${t('k8s.topology.editModeActive')}`}</span>}
+          {connectMode && <span className="dg-text-yellow ml-1">{`· ${t('k8s.topology.connecting')} ${connectSource ? t('k8s.topology.selectTarget') : t('k8s.topology.selectSource')}`}</span>}
+        </>
+      )}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: t('k8s.topology.totalNodes'), value: topology.nodes.length, color: 'blue' },
+            { label: t('k8s.topology.connections'), value: topology.edges.length, color: 'purple' },
+            { label: 'Service', value: countByType('service'), color: 'green' },
+            { label: 'Deployment', value: countByType('app'), color: 'red' },
+            { label: t('k8s.topology.custom2'), value: topology.nodes.filter((n) => isCustomNode(n.id)).length, color: 'amber' },
+          ]}
+        />
+      ) : undefined}
+      toolbar={filterToolbar}
+      actions={(
+        <>
           <Select value={selectedClusterId} onValueChange={(v) => { setSelectedClusterId(v); setSelectedNode(null); setEditMode(false); }}>
-            <SelectTrigger className="w-44 h-9 bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue placeholder={t('k8s.topology.selectCluster')} /></SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700">
+            <SelectTrigger className="w-44 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.selectCluster')} /></SelectTrigger>
+            <SelectContent className="dg-input">
               {clusters.map((c) => <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>)}
             </SelectContent>
           </Select>
-          <Button variant={editMode ? 'default' : 'outline'} size="sm" className="h-9"
+          <Button variant={editMode ? 'default' : 'outline'} size="sm" className="dg-btn-secondary"
             onClick={() => { setEditMode(!editMode); setConnectMode(false); setConnectSource(null); }}>
             <Pencil className="h-4 w-4 mr-1" />{editMode ? t('k8s.topology.exitEdit') : t('common.edit')}
           </Button>
-          <Button variant="outline" size="icon" className="h-9 w-9 border-slate-700 text-slate-400" onClick={loadTopology} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadTopology} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            {t('common.refresh')}
           </Button>
           <Button
             variant="outline"
             size="sm"
-            className="h-9 text-xs border-blue-600/40 text-blue-400"
-            onClick={async () => {
-              setSavedLayout(null);
-              await loadTopology();
-            }}
+            className="dg-btn-secondary"
+            onClick={async () => { setSavedLayout(null); await loadTopology(); }}
             disabled={loading}
             title={t('k8s.topology.autoGenerateTitle')}
           >
             <RotateCcw className="h-3.5 w-3.5 mr-1" /> {t('k8s.topology.autoGenerate')}
           </Button>
-        </div>
-      </div>
-
-      {/* 编辑模式工具栏 */}
+        </>
+      )}
+    >
+      {/* 编辑模式工具栏 // Logan.Li */}
       {editMode && (
-        <div className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700">
-          <Button size="sm" variant="outline" className="border-slate-600 text-slate-200" onClick={handleAddNode}>
+        <div className="flex items-center gap-2 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]">
+          <Button size="sm" variant="outline" className="border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]" onClick={handleAddNode}>
             <Plus className="h-4 w-4 mr-1" />{t('k8s.topology.addNode')}
           </Button>
-          <Button size="sm" variant={connectMode ? 'default' : 'outline'} className={connectMode ? 'bg-amber-600 hover:bg-amber-700' : 'border-slate-600 text-slate-200'}
+          <Button size="sm" variant={connectMode ? 'default' : 'outline'} className={connectMode ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]'}
             onClick={() => { setConnectMode(!connectMode); setConnectSource(null); }}>
             <Link2 className="h-4 w-4 mr-1" />{connectMode ? t('k8s.topology.cancelConnect') : t('k8s.topology.addConnection')}
           </Button>
-          <div className="h-5 w-px bg-slate-600" />
-          <Button size="sm" variant="outline" className="border-emerald-600/30 text-emerald-400 hover:bg-emerald-600/10" onClick={handleSaveLayout} disabled={saving}>
+          <div className="h-5 w-px bg-[var(--dg-bg-active)]" />
+          <Button size="sm" variant="outline" className="border-emerald-600/30 dg-text-green hover:bg-emerald-600/10" onClick={handleSaveLayout} disabled={saving}>
             <Save className="h-4 w-4 mr-1" />{saving ? t('k8s.topology.saving') : t('k8s.topology.saveLayout')}
           </Button>
-          <Button size="sm" variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleResetLayout}>
+          <Button size="sm" variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={handleResetLayout}>
             <RotateCcw className="h-4 w-4 mr-1" />{t('k8s.topology.resetLayout')}
           </Button>
-          <span className="text-xs text-slate-500 ml-auto">{t('k8s.topology.editToolbarHint')}</span>
+          <span className="text-xs dg-text-muted ml-auto">{t('k8s.topology.editToolbarHint')}</span>
         </div>
       )}
 
-      {/* Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-        {[
-          { label: t('k8s.topology.totalNodes'), value: topology.nodes.length, icon: <Cloud className="h-5 w-5" />, color: 'text-blue-400', bg: 'bg-blue-500/10' },
-          { label: t('k8s.topology.connections'), value: topology.edges.length, icon: <Link2 className="h-5 w-5" />, color: 'text-purple-400', bg: 'bg-purple-500/10' },
-          { label: 'Service', value: countByType('service'), icon: getNodeIcon('service'), color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
-          { label: 'Deployment', value: countByType('app'), icon: getNodeIcon('app'), color: 'text-rose-400', bg: 'bg-rose-500/10' },
-          { label: t('k8s.topology.custom2'), value: topology.nodes.filter((n) => isCustomNode(n.id)).length, icon: getNodeIcon('custom'), color: 'text-amber-400', bg: 'bg-amber-500/10' },
-        ].map((s) => (
-          <Card key={s.label} className="bg-slate-900 border-slate-800">
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm text-slate-500">{s.label}</p>
-                  <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
-                </div>
-                <div className={`p-3 rounded-lg ${s.bg} ${s.color}`}>{s.icon}</div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-3">
-        <div className="relative w-48">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
-          <Input placeholder={t('k8s.topology.searchPlaceholder')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200" />
-        </div>
-        <Select value={viewType} onValueChange={setViewType}>
-          <SelectTrigger className="w-36 h-9 bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger>
-          <SelectContent className="bg-slate-800 border-slate-700">
-            <SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem>
-            {Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{l}</SelectItem>)}
-          </SelectContent>
-        </Select>
-      </div>
-
       {/* Canvas + Node List */}
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         <div className="lg:col-span-3">
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardContent className="p-4">
               <div className={`h-[600px] overflow-auto ${connectMode ? 'ring-2 ring-amber-500/30 rounded-lg' : ''}`}>
                 {loading ? (
-                  <div className="flex items-center justify-center h-full"><Loader2 className="h-8 w-8 animate-spin text-slate-600" /></div>
+                  <div className="flex items-center justify-center h-full"><Loader2 className="h-8 w-8 animate-spin dg-text-muted" /></div>
                 ) : topology.nodes.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center h-full text-slate-600">
+                  <div className="flex flex-col items-center justify-center h-full dg-text-muted">
                     <Cloud className="h-12 w-12 mb-3 opacity-50" />
                     <p className="text-sm">{selectedClusterId ? t('k8s.topology.noDataWithCluster') : t('k8s.topology.noDataSelectCluster')}</p>
                   </div>
@@ -489,22 +480,22 @@ export function TopologyView() {
           </Card>
         </div>
         <div>
-          <Card className="bg-slate-900 border-slate-800">
+          <Card className="dg-card">
             <CardHeader className="pb-2">
-              <CardTitle className="text-base text-slate-100">{t('k8s.topology.nodeList')}</CardTitle>
-              <CardDescription className="text-slate-500">{t('k8s.topology.clickToViewDetail')}</CardDescription>
+              <CardTitle className="text-base text-[var(--dg-text-primary)]">{t('k8s.topology.nodeList')}</CardTitle>
+              <CardDescription className="dg-text-muted">{t('k8s.topology.clickToViewDetail')}</CardDescription>
             </CardHeader>
             <CardContent>
               <div className="space-y-2 max-h-[520px] overflow-auto">
                 {filteredNodes.length === 0 ? (
-                  <p className="text-sm text-slate-600 text-center py-8">{t('k8s.topology.noNodes')}</p>
+                  <p className="text-sm dg-text-muted text-center py-8">{t('k8s.topology.noNodes')}</p>
                 ) : (
                   filteredNodes.map((node) => (
-                    <div key={node.id} className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors ${selectedNode?.id === node.id ? 'bg-blue-500/10 border border-blue-500/30' : 'hover:bg-slate-800/50'}`} onClick={() => setSelectedNode(node)}>
+                    <div key={node.id} className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors ${selectedNode?.id === node.id ? 'bg-blue-500/10 border border-blue-500/30' : 'hover:bg-[var(--dg-bg-hover)]'}`} onClick={() => setSelectedNode(node)}>
                       <div className={`p-2 rounded-lg ${getNodeColor(node.type)}`}>{getNodeIcon(node.type)}</div>
                       <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium text-slate-200 truncate">{node.name}</p>
-                        <p className="text-xs text-slate-500">{NODE_TYPE_LABELS[node.type] || node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p>
+                        <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{node.name}</p>
+                        <p className="text-xs dg-text-muted">{NODE_TYPE_LABELS[node.type] || node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p>
                       </div>
                     </div>
                   ))
@@ -517,45 +508,45 @@ export function TopologyView() {
 
       {/* Node Detail Dialog */}
       <Dialog open={!!selectedNode} onOpenChange={() => setSelectedNode(null)}>
-        <DialogContent className="bg-slate-900 border-slate-800 max-w-lg">
+        <DialogContent className="dg-card max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-slate-100 flex items-center gap-2">
+            <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
               <div className={`p-2 rounded-lg ${getNodeColor(selectedNode?.type || 'server')}`}>{selectedNode && getNodeIcon(selectedNode.type)}</div>
               {selectedNode?.name}
-              {selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 text-amber-400 text-xs">{t('k8s.topology.custom2')}</Badge>}
+              {selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 dg-text-yellow text-xs">{t('k8s.topology.custom2')}</Badge>}
             </DialogTitle>
-            <DialogDescription className="text-slate-500">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] || selectedNode?.type}</DialogDescription>
+            <DialogDescription className="dg-text-muted">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] || selectedNode?.type}</DialogDescription>
           </DialogHeader>
           {selectedNode && (
             <div className="space-y-4">
               {renderNodeDetailFields(selectedNode)}
               <div>
-                <h4 className="text-sm font-medium text-slate-300 mb-2">{t('k8s.topology.relatedConnections')}</h4>
+                <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] mb-2">{t('k8s.topology.relatedConnections')}</h4>
                 <div className="space-y-2">
                   {topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).map((edge) => {
                     const isSource = edge.source === selectedNode.id;
                     const related = topology.nodes.find((n) => n.id === (isSource ? edge.target : edge.source));
                     if (!related) return null;
                     return (
-                      <div key={edge.id} className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50">
-                        <span className="text-sm text-slate-400">{isSource ? '→' : '←'}</span>
+                      <div key={edge.id} className="flex items-center gap-2 p-2 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
+                        <span className="text-sm dg-text-secondary">{isSource ? '→' : '←'}</span>
                         <div className={`p-1 rounded ${getNodeColor(related.type)}`}>{getNodeIcon(related.type, 'h-4 w-4')}</div>
-                        <span className="text-sm text-slate-300">{related.name}</span>
-                        <Badge variant="outline" className="ml-auto border-slate-700 text-slate-400 text-xs">{edge.label}</Badge>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{related.name}</span>
+                        <Badge variant="outline" className="ml-auto border-[var(--dg-border)] dg-text-secondary text-xs">{edge.label}</Badge>
                       </div>
                     );
                   })}
-                  {topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).length === 0 && <p className="text-xs text-slate-600">{t('k8s.topology.noConnections')}</p>}
+                  {topology.edges.filter((e) => e.source === selectedNode.id || e.target === selectedNode.id).length === 0 && <p className="text-xs dg-text-muted">{t('k8s.topology.noConnections')}</p>}
                 </div>
               </div>
               {/* 编辑模式操作按钮 */}
               {editMode && selectedNode && (
-                <div className="flex gap-2 pt-2 border-t border-slate-700">
-                  <Button size="sm" variant="outline" className="border-slate-600 text-slate-200" onClick={() => handleEditNode(selectedNode)}>
+                <div className="flex gap-2 pt-2 border-t border-[var(--dg-border)]">
+                  <Button size="sm" variant="outline" className="border-[var(--dg-border-hover)] text-[var(--dg-text-primary)]" onClick={() => handleEditNode(selectedNode)}>
                     <Pencil className="h-3.5 w-3.5 mr-1" />{t('common.edit')}
                   </Button>
                   {isCustomNode(selectedNode.id) && (
-                    <Button size="sm" variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => handleDeleteNode(selectedNode)}>
+                    <Button size="sm" variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={() => handleDeleteNode(selectedNode)}>
                       <Trash2 className="h-3.5 w-3.5 mr-1" />{t('common.delete')}
                     </Button>
                   )}
@@ -568,38 +559,38 @@ export function TopologyView() {
 
       {/* Edit/Add Node Dialog */}
       <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
-        <DialogContent className="bg-slate-900 border-slate-800 max-w-md">
+        <DialogContent className="dg-card max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-slate-100">{editingNode ? t('k8s.topology.editNodeTitle') : t('k8s.topology.addNodeTitle')}</DialogTitle>
-            <DialogDescription className="text-slate-500">{editingNode ? t('k8s.topology.editNodeDesc') : t('k8s.topology.addNodeDesc')}</DialogDescription>
+            <DialogTitle className="text-[var(--dg-text-primary)]">{editingNode ? t('k8s.topology.editNodeTitle') : t('k8s.topology.addNodeTitle')}</DialogTitle>
+            <DialogDescription className="dg-text-muted">{editingNode ? t('k8s.topology.editNodeDesc') : t('k8s.topology.addNodeDesc')}</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label className="text-slate-300">{t('k8s.topology.nodeName')}</Label>
+              <Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeName')}</Label>
               <Input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
-                placeholder={t('k8s.topology.namePlaceholder')} className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                placeholder={t('k8s.topology.namePlaceholder')} className="dg-input" />
             </div>
             <div className="space-y-2">
-              <Label className="text-slate-300">{t('k8s.topology.nodeType')}</Label>
+              <Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeType')}</Label>
               <Select value={editForm.type} onValueChange={(v) => setEditForm({ ...editForm, type: v as TopologyNode['type'] })}>
-                <SelectTrigger className="bg-slate-800/50 border-slate-700 text-slate-200"><SelectValue /></SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
+                <SelectContent className="dg-input">
                   {CUSTOM_NODE_TYPES.map((t) => <SelectItem key={t.value} value={t.value}>{t.label} — {t.desc}</SelectItem>)}
                 </SelectContent>
               </Select>
             </div>
             <div className="space-y-2">
-              <Label className="text-slate-300">{t('k8s.topology.nodeNote')}</Label>
+              <Label className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeNote')}</Label>
               <Textarea value={editForm.note} onChange={(e) => setEditForm({ ...editForm, note: e.target.value })}
-                placeholder={t('k8s.topology.notePlaceholder')} rows={2} className="bg-slate-800/50 border-slate-700 text-slate-200 resize-none" />
+                placeholder={t('k8s.topology.notePlaceholder')} rows={2} className="dg-input resize-none" />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setEditDialogOpen(false)}>{t('common.cancel')}</Button>
+            <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setEditDialogOpen(false)}>{t('common.cancel')}</Button>
             <Button onClick={handleSaveNode}>{editingNode ? t('common.save') : t('k8s.topology.add2')}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/kubernetes/WorkloadViewPage.tsx b/frontend/src/components/kubernetes/WorkloadViewPage.tsx
index 81025af..28ec44b 100644
--- a/frontend/src/components/kubernetes/WorkloadViewPage.tsx
+++ b/frontend/src/components/kubernetes/WorkloadViewPage.tsx
@@ -20,6 +20,7 @@ import { YamlViewer } from './YamlViewer';
 import { PodExecTerminal } from './PodExecTerminal';
 import { PodFileBrowser } from './PodFileBrowser';
 import { formatK8sTime, statusColor, STATUS_COLORS } from './k8s-yaml-utils';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 
 type WorkloadKind = 'StatefulSet' | 'DaemonSet';
@@ -187,60 +188,50 @@ export default function WorkloadViewPage() {
   const labels = manifest?.metadata?.labels || {};
   const annotations = manifest?.metadata?.annotations || {};
 
+  const modeTabs = (
+    <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5">
+      <button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('view')}>查看</button>
+      <button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('yaml')}>YAML</button>
+    </div>
+  );
+
   return (
-    <div className="p-4 space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate(-1)}>
-            <ArrowLeft className="h-4 w-4" />
+    <PageShell
+      variant="workspace"
+      title={name}
+      subtitle={`${clusterCode} / ${namespace} · ${kind}`}
+      icon={<Boxes className="h-5 w-5" />}
+      loading={loading}
+      loadingLabel="加载工作负载..."
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
+            <ArrowLeft className="h-4 w-4 mr-1" />返回
           </Button>
-          <Boxes className="h-5 w-5 text-[var(--dg-blue)]" />
-          <div>
-            <div className="flex items-center gap-2">
-              <h1 className="text-lg font-bold text-[var(--dg-text-primary)]">{name}</h1>
-              <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge>
-              <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge>
-              {isHealthy
-                ? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">健康</Badge>
-                : <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">更新中</Badge>}
-            </div>
-            <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">集群: {clusterCode}</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          {/* Mode tabs */}
-          <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5">
-            <button
-              className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
-              onClick={() => handleModeChange('view')}
-            >查看</button>
-            <button
-              className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`}
-              onClick={() => handleModeChange('yaml')}
-            >YAML</button>
-          </div>
-          {/* Actions */}
+          {modeTabs}
           {isSts && (
-            <Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
-              onClick={() => { setScaleValue(replicas); setScaleModal(true); }}>
+            <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setScaleValue(replicas); setScaleModal(true); }}>
               <Boxes className="h-3.5 w-3.5 mr-1" />伸缩
             </Button>
           )}
-          <Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
-            disabled={actionLoading} onClick={handleRestart}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" disabled={actionLoading} onClick={handleRestart}>
             <RotateCcw className="h-3.5 w-3.5 mr-1" />{actionLoading ? '重启中...' : '重启'}
           </Button>
-          <Button variant="outline" size="sm" className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
-            onClick={() => setYamlModal(true)}>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => setYamlModal(true)}>
             <FileCode className="h-3.5 w-3.5 mr-1" />YAML
           </Button>
-        </div>
+        </>
+      )}
+    >
+      <div className="flex items-center gap-2 mb-4">
+        <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge>
+        <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge>
+        {isHealthy
+          ? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">健康</Badge>
+          : <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">更新中</Badge>}
       </div>
 
-      {loading ? (
-        <div className="text-center text-[var(--dg-text-muted)] py-20">加载中...</div>
-      ) : mode === 'yaml' ? (
+      {!loading && (mode === 'yaml' ? (
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <YamlViewer
@@ -487,7 +478,7 @@ export default function WorkloadViewPage() {
             </CardContent>
           </Card>
         </>
-      )}
+      ))}
 
       {/* Scale modal */}
       {scaleModal && (
@@ -547,7 +538,7 @@ export default function WorkloadViewPage() {
           containers={fileBrowserPod.containers?.map((c: JsonData) => c.name).filter(Boolean) || []}
         />
       )}
-    </div>
+    </PageShell>
   );
 }
 
diff --git a/frontend/src/components/kubernetes/YamlCodeMirror.tsx b/frontend/src/components/kubernetes/YamlCodeMirror.tsx
index 90808bc..0a4c946 100644
--- a/frontend/src/components/kubernetes/YamlCodeMirror.tsx
+++ b/frontend/src/components/kubernetes/YamlCodeMirror.tsx
@@ -76,14 +76,14 @@ export function YamlCodeMirror({
 
   if (fill) {
     return (
-      <div ref={containerRef} className={`flex-1 min-h-0 h-full overflow-hidden rounded-lg border border-slate-700 ${className}`}>
+      <div ref={containerRef} className={`flex-1 min-h-0 h-full overflow-hidden rounded-lg border border-[var(--dg-border)] ${className}`}>
         {editor}
       </div>
     );
   }
 
   return (
-    <div className={`overflow-auto rounded-lg border border-slate-700 ${className}`}>
+    <div className={`overflow-auto rounded-lg border border-[var(--dg-border)] ${className}`}>
       {editor}
     </div>
   );
diff --git a/frontend/src/components/kubernetes/YamlEditorToolbar.tsx b/frontend/src/components/kubernetes/YamlEditorToolbar.tsx
index e8e3b3c..cb7ef0c 100644
--- a/frontend/src/components/kubernetes/YamlEditorToolbar.tsx
+++ b/frontend/src/components/kubernetes/YamlEditorToolbar.tsx
@@ -26,23 +26,23 @@ export function YamlEditorToolbar({
   const sz = compact ? 'h-7 text-xs' : 'h-8';
   return (
     <div className="flex items-center gap-2 flex-wrap">
-      <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCopy}>
-        {copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
+      <Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onCopy}>
+        {copied ? <Check className="h-3 w-3 mr-1 dg-text-green" /> : <Copy className="h-3 w-3 mr-1" />}
         {copied ? '已复制' : '复制'}
       </Button>
       {onDownload && (
-        <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onDownload}>
+        <Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onDownload}>
           <Download className="h-3 w-3 mr-1" />下载
         </Button>
       )}
       {!readOnly && (
         !editing ? (
-          <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onEdit}>
+          <Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onEdit}>
             <Pencil className="h-3 w-3 mr-1" />编辑
           </Button>
         ) : (
           <>
-            <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCancel}>取消</Button>
+            <Button variant="outline" size="sm" className={`${sz} border-[var(--dg-border)] text-[var(--dg-text-secondary)]`} onClick={onCancel}>取消</Button>
             <Button size="sm" className={`${sz} bg-blue-600 hover:bg-blue-700`} onClick={onSave} disabled={saving}>
               {saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
               保存
@@ -54,7 +54,7 @@ export function YamlEditorToolbar({
         <button
           type="button"
           onClick={onToggleRaw}
-          className="text-[11px] text-slate-500 hover:text-slate-300 underline-offset-2 hover:underline"
+          className="text-[11px] dg-text-muted hover:text-[var(--dg-text-secondary)] underline-offset-2 hover:underline"
         >
           {showRaw ? '精简视图' : '原始 YAML'}
         </button>
diff --git a/frontend/src/components/kubernetes/YamlViewer.tsx b/frontend/src/components/kubernetes/YamlViewer.tsx
index fd7ebed..65b0cb8 100644
--- a/frontend/src/components/kubernetes/YamlViewer.tsx
+++ b/frontend/src/components/kubernetes/YamlViewer.tsx
@@ -148,7 +148,7 @@ export function YamlViewer({
 
   const editor = loading ? (
     <div className="flex items-center justify-center h-full min-h-[200px]">
-      <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
+      <Loader2 className="h-6 w-6 animate-spin dg-text-muted" />
     </div>
   ) : (
     <YamlCodeMirror
@@ -164,9 +164,9 @@ export function YamlViewer({
     return (
       <div className="flex flex-col gap-3 min-h-[400px] h-[calc(100vh-220px)] max-h-[720px]">
         <div className="flex items-center justify-between gap-3 flex-wrap shrink-0">
-          <p className="text-xs text-slate-500">
-            <code className="text-slate-400">{resource}/{name}</code>
-            {resourceHint ? <span className="text-slate-600"> · {resourceHint}</span> : null}
+          <p className="text-xs dg-text-muted">
+            <code className="dg-text-secondary">{resource}/{name}</code>
+            {resourceHint ? <span className="dg-text-muted"> · {resourceHint}</span> : null}
             {' · '}{namespace}
           </p>
           {toolbar}
@@ -179,20 +179,20 @@ export function YamlViewer({
   return (
     <ModalOverlay onClose={onClose}>
       <div
-        className="bg-slate-900 border border-slate-700 rounded-xl w-[92vw] max-w-5xl h-[85vh] flex flex-col shadow-2xl"
+        className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[92vw] max-w-5xl h-[85vh] flex flex-col shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between p-4 border-b border-slate-700 gap-3 shrink-0">
+        <div className="flex items-center justify-between p-4 border-b border-[var(--dg-border)] gap-3 shrink-0">
           <div className="min-w-0 flex-1">
-            <h2 className="text-lg font-bold text-slate-100 truncate" title={`${resCfg.label} YAML — ${name}`}>
+            <h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate" title={`${resCfg.label} YAML — ${name}`}>
               {resCfg.label} YAML — {name}
-              {readOnly && <span className="ml-2 text-xs font-normal text-slate-500">只读</span>}
+              {readOnly && <span className="ml-2 text-xs font-normal dg-text-muted">只读</span>}
             </h2>
-            <p className="text-xs text-slate-500 truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p>
+            <p className="text-xs dg-text-muted truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p>
           </div>
           <div className="flex items-center gap-2 shrink-0">
             {toolbar}
-            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button>
           </div>
         </div>
         <div className="flex-1 min-h-0 flex flex-col overflow-hidden p-4">{editor}</div>
diff --git a/frontend/src/components/kubernetes/deployment-detail/CreateHPADialog.tsx b/frontend/src/components/kubernetes/deployment-detail/CreateHPADialog.tsx
index 9611bf0..6201ade 100644
--- a/frontend/src/components/kubernetes/deployment-detail/CreateHPADialog.tsx
+++ b/frontend/src/components/kubernetes/deployment-detail/CreateHPADialog.tsx
@@ -54,57 +54,57 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
 
   return (
     <>
-      <Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={() => setOpen(true)}>
+      <Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setOpen(true)}>
         <Plus className="h-3.5 w-3.5 mr-1" />创建 HPA
       </Button>
       {open && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={() => setOpen(false)}>
-          <div className="bg-slate-900 border border-slate-700 rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
-            <h2 className="text-lg font-bold text-slate-100 px-6 pt-6 pb-4 shrink-0">创建 HPA</h2>
+          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+            <h2 className="text-lg font-bold text-[var(--dg-text-primary)] px-6 pt-6 pb-4 shrink-0">创建 HPA</h2>
             <div className="flex-1 min-h-0 overflow-y-auto px-6 space-y-3">
               <div>
-                <Label className="text-slate-400 text-sm">名称</Label>
+                <Label className="dg-text-secondary text-sm">名称</Label>
                 <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
                   placeholder={`hpa-${deploymentName}`}
-                  className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
+                  className="dg-input mt-1" />
               </div>
               <div>
-                <Label className="text-slate-400 text-sm">目标</Label>
-                <p className="text-slate-300 text-sm mt-1 bg-slate-800 rounded px-3 py-2 truncate" title={`Deployment: ${deploymentName} · 命名空间: ${namespace}`}>
+                <Label className="dg-text-secondary text-sm">目标</Label>
+                <p className="text-[var(--dg-text-secondary)] text-sm mt-1 bg-[var(--dg-bg-tertiary)] rounded px-3 py-2 truncate" title={`Deployment: ${deploymentName} · 命名空间: ${namespace}`}>
                   Deployment: {deploymentName} · 命名空间: {namespace}
                 </p>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <Label className="text-slate-400 text-sm">最小副本数</Label>
+                  <Label className="dg-text-secondary text-sm">最小副本数</Label>
                   <Input type="number" value={form.minReplicas} min={1}
                     onChange={(e) => setForm({ ...form, minReplicas: Number(e.target.value) })}
-                    className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
+                    className="dg-input mt-1" />
                 </div>
                 <div>
-                  <Label className="text-slate-400 text-sm">最大副本数</Label>
+                  <Label className="dg-text-secondary text-sm">最大副本数</Label>
                   <Input type="number" value={form.maxReplicas} min={1}
                     onChange={(e) => setForm({ ...form, maxReplicas: Number(e.target.value) })}
-                    className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
+                    className="dg-input mt-1" />
                 </div>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <Label className="text-slate-400 text-sm">CPU 目标 (%)</Label>
+                  <Label className="dg-text-secondary text-sm">CPU 目标 (%)</Label>
                   <Input type="number" value={form.cpuPercent} min={0} max={100}
                     onChange={(e) => setForm({ ...form, cpuPercent: Number(e.target.value) })}
-                    className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
+                    className="dg-input mt-1" />
                 </div>
                 <div>
-                  <Label className="text-slate-400 text-sm">内存目标 (%) <span className="text-slate-600">可选</span></Label>
+                  <Label className="dg-text-secondary text-sm">内存目标 (%) <span className="dg-text-muted">可选</span></Label>
                   <Input type="number" value={form.memPercent} min={0} max={100}
                     onChange={(e) => setForm({ ...form, memPercent: Number(e.target.value) })}
-                    className="bg-slate-800 border-slate-700 text-slate-200 mt-1" />
+                    className="dg-input mt-1" />
                 </div>
               </div>
             </div>
-            <div className="flex justify-end gap-2 px-6 py-4 border-t border-slate-700 shrink-0">
-              <Button variant="outline" className="border-slate-700 text-slate-400" onClick={() => setOpen(false)}>取消</Button>
+            <div className="flex justify-end gap-2 px-6 py-4 border-t border-[var(--dg-border)] shrink-0">
+              <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={() => setOpen(false)}>取消</Button>
               <Button className="bg-blue-600 hover:bg-blue-700" disabled={loading} onClick={handleCreate}>
                 {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : '创建'}
               </Button>
diff --git a/frontend/src/components/kubernetes/deployment-detail/DeploymentHpaTab.tsx b/frontend/src/components/kubernetes/deployment-detail/DeploymentHpaTab.tsx
index ac518b6..13dd514 100644
--- a/frontend/src/components/kubernetes/deployment-detail/DeploymentHpaTab.tsx
+++ b/frontend/src/components/kubernetes/deployment-detail/DeploymentHpaTab.tsx
@@ -28,10 +28,10 @@ export function DeploymentHpaTab({
 }: DeploymentHpaTabProps) {
   return (
     <TabsContent value="hpa">
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-2">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-400">HPA 自动扩缩容</CardTitle>
+            <CardTitle className="text-sm dg-text-secondary">HPA 自动扩缩容</CardTitle>
             <CreateHPADialog
               clusterCode={clusterCode}
               namespace={namespace}
@@ -42,7 +42,7 @@ export function DeploymentHpaTab({
         </CardHeader>
         <CardContent className="p-0">
           {hpas.length === 0 ? (
-            <div className="text-center py-12 text-slate-500">
+            <div className="text-center py-12 dg-text-muted">
               <Gauge className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p>未配置 HPA</p>
               <p className="text-xs mt-1">点击右上角「创建 HPA」设置自动扩缩容</p>
@@ -50,12 +50,12 @@ export function DeploymentHpaTab({
           ) : (
             <Table>
               <TableHeader>
-                <TableRow className="border-slate-800 hover:bg-transparent">
-                  <TableHead className="text-slate-400">名称</TableHead>
-                  <TableHead className="text-slate-400">最小/最大</TableHead>
-                  <TableHead className="text-slate-400">指标</TableHead>
-                  <TableHead className="text-slate-400">当前/目标</TableHead>
-                  <TableHead className="text-slate-400">操作</TableHead>
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                  <TableHead className="dg-text-secondary">名称</TableHead>
+                  <TableHead className="dg-text-secondary">最小/最大</TableHead>
+                  <TableHead className="dg-text-secondary">指标</TableHead>
+                  <TableHead className="dg-text-secondary">当前/目标</TableHead>
+                  <TableHead className="dg-text-secondary">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -67,13 +67,13 @@ export function DeploymentHpaTab({
                   if (mem) metricsParts.push(`MEM: ${mem}%`);
                   const metrics = metricsParts.join(', ') || '-';
                   return (
-                    <TableRow key={hpa.name} className="border-slate-800 hover:bg-slate-800/30">
-                      <TableCell className="font-medium text-slate-200">{hpa.name}</TableCell>
-                      <TableCell className="text-slate-300">{hpa.min_replicas} / {hpa.max_replicas}</TableCell>
-                      <TableCell className="text-sm text-slate-400">{metrics}</TableCell>
-                      <TableCell className="text-slate-300">{hpa.current_replicas || 0}</TableCell>
+                    <TableRow key={hpa.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                      <TableCell className="font-medium text-[var(--dg-text-primary)]">{hpa.name}</TableCell>
+                      <TableCell className="text-[var(--dg-text-secondary)]">{hpa.min_replicas} / {hpa.max_replicas}</TableCell>
+                      <TableCell className="text-sm dg-text-secondary">{metrics}</TableCell>
+                      <TableCell className="text-[var(--dg-text-secondary)]">{hpa.current_replicas || 0}</TableCell>
                       <TableCell>
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300"
+                        <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red"
                           onClick={() => onDeleteHpa(hpa)} title="删除 HPA">
                           <Trash2 className="h-3.5 w-3.5" />
                         </Button>
diff --git a/frontend/src/components/kubernetes/deployment-detail/DeploymentLogsTab.tsx b/frontend/src/components/kubernetes/deployment-detail/DeploymentLogsTab.tsx
index 20f8fb1..2dd3ba3 100644
--- a/frontend/src/components/kubernetes/deployment-detail/DeploymentLogsTab.tsx
+++ b/frontend/src/components/kubernetes/deployment-detail/DeploymentLogsTab.tsx
@@ -33,32 +33,32 @@ export function DeploymentLogsTab({
 }: DeploymentLogsTabProps) {
   return (
     <TabsContent value="logs">
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-2">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm text-slate-400">Pod 日志</CardTitle>
+            <CardTitle className="text-sm dg-text-secondary">Pod 日志</CardTitle>
             <div className="flex items-center gap-2">
-              <span className="text-xs text-slate-500">最近</span>
+              <span className="text-xs dg-text-muted">最近</span>
               <Input
                 type="number" value={logTail} onChange={(e) => onLogTailChange(Number(e.target.value))}
-                className="w-20 h-7 bg-slate-800 border-slate-700 text-slate-200 text-xs"
+                className="w-20 h-7 dg-input text-xs"
               />
-              <span className="text-xs text-slate-500">行</span>
+              <span className="text-xs dg-text-muted">行</span>
             </div>
           </div>
         </CardHeader>
         <CardContent>
           {pods.length === 0 ? (
-            <div className="text-center py-12 text-slate-500">
+            <div className="text-center py-12 dg-text-muted">
               <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p>暂无 Pod</p>
             </div>
           ) : (
             <div className="flex items-center gap-3 py-10 justify-center flex-wrap">
-              <FileText className="h-5 w-5 text-blue-400" />
-              <span className="text-sm text-slate-400">选择 Pod 打开增强版日志查看器</span>
+              <FileText className="h-5 w-5 dg-text-blue" />
+              <span className="text-sm dg-text-secondary">选择 Pod 打开增强版日志查看器</span>
               <Select value={logsTabPod} onValueChange={onLogsTabPodChange}>
-                <SelectTrigger className="w-[280px] h-8 bg-slate-800 border-slate-700 text-slate-200 text-xs">
+                <SelectTrigger className="w-[280px] h-8 dg-input text-xs">
                   <SelectValue placeholder="选择 Pod…" />
                 </SelectTrigger>
                 <SelectContent>
@@ -78,7 +78,7 @@ export function DeploymentLogsTab({
               >
                 <ExternalLink className="h-3 w-3 mr-1" />打开日志
               </Button>
-              <span className="text-xs text-slate-600 block w-full text-center mt-2">
+              <span className="text-xs dg-text-muted block w-full text-center mt-2">
                 支持实时跟踪、多容器切换、previous 日志、关键字过滤、导出
               </span>
             </div>
diff --git a/frontend/src/components/kubernetes/deployment-detail/DeploymentOverview.tsx b/frontend/src/components/kubernetes/deployment-detail/DeploymentOverview.tsx
index 3722a3f..6076ed2 100644
--- a/frontend/src/components/kubernetes/deployment-detail/DeploymentOverview.tsx
+++ b/frontend/src/components/kubernetes/deployment-detail/DeploymentOverview.tsx
@@ -41,53 +41,53 @@ export function DeploymentOverview({
     <>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Button variant="ghost" size="sm" className="text-slate-400" onClick={onBack}>
+          <Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onBack}>
             <ArrowLeft className="h-4 w-4 mr-1" />返回
           </Button>
           <div>
             <div className="flex items-center gap-2">
-              <h1 className="text-xl font-bold text-slate-100">{deploymentName}</h1>
-              <Badge variant="outline" className="border-slate-700 text-slate-400">{namespace}</Badge>
+              <h1 className="text-xl font-bold text-[var(--dg-text-primary)]">{deploymentName}</h1>
+              <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge>
             </div>
-            <p className="text-sm text-slate-500 mt-0.5">镜像: {deployment.image || '-'}</p>
+            <p className="text-sm dg-text-muted mt-0.5">镜像: {deployment.image || '-'}</p>
           </div>
         </div>
-        <Button variant="outline" size="sm" className="border-slate-700 text-slate-400" onClick={onRefresh}>
+        <Button variant="outline" size="sm" className="border-[var(--dg-border)] dg-text-secondary" onClick={onRefresh}>
           <RefreshCw className="h-4 w-4 mr-1" />刷新
         </Button>
       </div>
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="p-3">
-            <p className="text-xs text-slate-500">副本状态</p>
-            <p className={`text-lg font-bold ${isHealthy ? 'text-emerald-400' : 'text-amber-400'}`}>
+            <p className="text-xs dg-text-muted">副本状态</p>
+            <p className={`text-lg font-bold ${isHealthy ? 'dg-text-green' : 'dg-text-yellow'}`}>
               {ready}/{total}
             </p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="p-3">
-            <p className="text-xs text-slate-500">可用副本</p>
-            <p className="text-lg font-bold text-blue-400">{available}</p>
+            <p className="text-xs dg-text-muted">可用副本</p>
+            <p className="text-lg font-bold dg-text-blue">{available}</p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="p-3">
-            <p className="text-xs text-slate-500">镜像</p>
-            <p className="text-sm font-mono text-slate-300 truncate max-w-[200px]" title={deployment.image}>
+            <p className="text-xs dg-text-muted">镜像</p>
+            <p className="text-sm font-mono text-[var(--dg-text-secondary)] truncate max-w-[200px]" title={deployment.image}>
               {deployment.image?.split('/').pop() || '-'}
             </p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardContent className="p-3">
-            <p className="text-xs text-slate-500">HPA</p>
+            <p className="text-xs dg-text-muted">HPA</p>
             {hpas.length > 0 ? (
-              <p className="text-lg font-bold text-purple-400">已启用</p>
+              <p className="text-lg font-bold dg-text-purple">已启用</p>
             ) : (
               <div className="flex items-center justify-between">
-                <p className="text-lg font-bold text-slate-500">未配置</p>
+                <p className="text-lg font-bold dg-text-muted">未配置</p>
                 <CreateHPADialog
                   clusterCode={clusterCode}
                   namespace={namespace}
@@ -100,25 +100,25 @@ export function DeploymentOverview({
         </Card>
       </div>
 
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-base text-slate-200">操作</CardTitle>
+          <CardTitle className="text-base text-[var(--dg-text-primary)]">操作</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="flex flex-wrap items-center gap-3">
-            <div className="flex items-center gap-1 bg-slate-800 rounded-lg p-1">
+            <div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-1">
               <Button
-                variant="ghost" size="icon" className="h-8 w-8 text-slate-300 hover:text-slate-100"
+                variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
                 disabled={actionLoading === 'scale' || total <= 0}
                 onClick={() => onScale(-1)}
               >
                 <Minus className="h-4 w-4" />
               </Button>
-              <span className="text-sm font-mono text-slate-200 w-8 text-center">
+              <span className="text-sm font-mono text-[var(--dg-text-primary)] w-8 text-center">
                 {actionLoading === 'scale' ? <Loader2 className="h-4 w-4 animate-spin inline" /> : total}
               </span>
               <Button
-                variant="ghost" size="icon" className="h-8 w-8 text-slate-300 hover:text-slate-100"
+                variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
                 disabled={actionLoading === 'scale'}
                 onClick={() => onScale(1)}
               >
@@ -126,7 +126,7 @@ export function DeploymentOverview({
               </Button>
             </div>
             <Button
-              variant="outline" size="sm" className="border-slate-700 text-slate-300 hover:text-slate-100"
+              variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
               disabled={actionLoading === 'restart'}
               onClick={onRestart}
             >
@@ -134,7 +134,7 @@ export function DeploymentOverview({
               滚动重启
             </Button>
             <Button
-              variant="outline" size="sm" className="border-slate-700 text-slate-300 hover:text-slate-100"
+              variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
               onClick={onToggleImageUpdate}
             >
               <Upload className="h-4 w-4 mr-1" />
@@ -142,12 +142,12 @@ export function DeploymentOverview({
             </Button>
           </div>
           {showImageUpdate && (
-            <div className="mt-3 flex items-center gap-2 p-3 bg-slate-800/50 rounded-lg border border-slate-700">
+            <div className="mt-3 flex items-center gap-2 p-3 bg-[var(--dg-bg-tertiary)]/50 rounded-lg border border-[var(--dg-border)]">
               <Input
                 value={newImage}
                 onChange={(e) => onNewImageChange(e.target.value)}
                 placeholder="输入新镜像地址，如 harbor.example.com/app:v2.0"
-                className="flex-1 h-9 bg-slate-900 border-slate-700 text-slate-200 text-sm font-mono"
+                className="flex-1 h-9 dg-input text-[var(--dg-text-primary)] text-sm font-mono"
               />
               <Button size="sm" className="bg-blue-600 hover:bg-blue-700"
                 disabled={actionLoading === 'image' || !newImage.trim()}
@@ -155,7 +155,7 @@ export function DeploymentOverview({
               >
                 {actionLoading === 'image' ? <Loader2 className="h-4 w-4 animate-spin" /> : '更新'}
               </Button>
-              <Button variant="ghost" size="sm" className="text-slate-400" onClick={onToggleImageUpdate}>取消</Button>
+              <Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onToggleImageUpdate}>取消</Button>
             </div>
           )}
         </CardContent>
diff --git a/frontend/src/components/kubernetes/deployment-detail/DeploymentPodsTab.tsx b/frontend/src/components/kubernetes/deployment-detail/DeploymentPodsTab.tsx
index f2a20d1..2e769a4 100644
--- a/frontend/src/components/kubernetes/deployment-detail/DeploymentPodsTab.tsx
+++ b/frontend/src/components/kubernetes/deployment-detail/DeploymentPodsTab.tsx
@@ -22,60 +22,60 @@ export interface DeploymentPodsTabProps {
 export function DeploymentPodsTab({ pods, onOpenLogsViewer, onOpenExec, onOpenFileBrowser, onOpenYaml }: DeploymentPodsTabProps) {
   return (
     <TabsContent value="pods">
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardContent className="p-0">
           <Table>
             <TableHeader>
-              <TableRow className="border-slate-800 hover:bg-transparent">
-                <TableHead className="text-slate-400">Pod 名称</TableHead>
-                <TableHead className="text-slate-400">状态</TableHead>
-                <TableHead className="text-slate-400">节点</TableHead>
-                <TableHead className="text-slate-400">IP</TableHead>
-                <TableHead className="text-slate-400">重启</TableHead>
-                <TableHead className="text-slate-400">操作</TableHead>
+              <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                <TableHead className="dg-text-secondary">Pod 名称</TableHead>
+                <TableHead className="dg-text-secondary">状态</TableHead>
+                <TableHead className="dg-text-secondary">节点</TableHead>
+                <TableHead className="dg-text-secondary">IP</TableHead>
+                <TableHead className="dg-text-secondary">重启</TableHead>
+                <TableHead className="dg-text-secondary">操作</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {pods.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={6} className="text-center text-slate-500 py-8">
+                  <TableCell colSpan={6} className="text-center dg-text-muted py-8">
                     暂无 Pod
                   </TableCell>
                 </TableRow>
               ) : (
                 pods.map((pod: JsonData) => (
-                  <TableRow key={pod.name} className="border-slate-800 hover:bg-slate-800/30">
-                    <TableCell className="font-medium text-slate-200">{pod.name}</TableCell>
+                  <TableRow key={pod.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                    <TableCell className="font-medium text-[var(--dg-text-primary)]">{pod.name}</TableCell>
                     <TableCell>
                       <Badge className={
-                        pod.status === 'Running' ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' :
-                        pod.status === 'Pending' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
-                        'bg-red-500/20 text-red-400 border-red-500/30'
+                        pod.status === 'Running' ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' :
+                        pod.status === 'Pending' ? 'bg-yellow-500/20 dg-text-yellow border-yellow-500/30' :
+                        'bg-red-500/20 dg-text-red border-red-500/30'
                       }>{pod.status}</Badge>
                     </TableCell>
-                    <TableCell className="text-sm text-slate-400">{pod.node_name || '-'}</TableCell>
-                    <TableCell className="text-sm text-slate-500 font-mono">{pod.ip || '-'}</TableCell>
-                    <TableCell className={pod.restart_count > 0 ? 'text-yellow-400' : 'text-slate-500'}>
+                    <TableCell className="text-sm dg-text-secondary">{pod.node_name || '-'}</TableCell>
+                    <TableCell className="text-sm dg-text-muted font-mono">{pod.ip || '-'}</TableCell>
+                    <TableCell className={pod.restart_count > 0 ? 'dg-text-yellow' : 'dg-text-muted'}>
                       {pod.restart_count || 0}
                     </TableCell>
                     <TableCell>
                       <div className="flex items-center gap-1">
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
+                        <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
                           title="查看日志"
                           onClick={() => onOpenLogsViewer({ name: pod.name, containers: extractContainers(pod) })}>
                           <FileText className="h-3.5 w-3.5" />
                         </Button>
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-emerald-400"
+                        <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-green"
                           title="exec 终端"
                           onClick={() => onOpenExec({ name: pod.name, containers: extractContainers(pod) })}>
                           <Terminal className="h-3.5 w-3.5" />
                         </Button>
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-amber-400"
+                        <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-yellow"
                           title="文件浏览器"
                           onClick={() => onOpenFileBrowser({ name: pod.name, containers: extractContainers(pod) })}>
                           <FolderOpen className="h-3.5 w-3.5" />
                         </Button>
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
+                        <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
                           title="查看 YAML"
                           onClick={() => onOpenYaml(pod.name)}>
                           <FileCode className="h-3.5 w-3.5" />
diff --git a/frontend/src/components/kubernetes/deployment-edit-advanced/DnsHostSection.tsx b/frontend/src/components/kubernetes/deployment-edit-advanced/DnsHostSection.tsx
index c88ffdf..def4bd3 100644
--- a/frontend/src/components/kubernetes/deployment-edit-advanced/DnsHostSection.tsx
+++ b/frontend/src/components/kubernetes/deployment-edit-advanced/DnsHostSection.tsx
@@ -50,47 +50,47 @@ export function DnsHostSection({
 
   return (
     <>
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
             <Globe className="h-4 w-4 text-indigo-400" />DNS 配置 (dnsConfig)
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 space-y-3">
-          <p className="text-[11px] text-slate-500">
-            提示：dnsConfig 通常与 <code className="text-slate-400">dnsPolicy: None</code> 搭配使用。每行一个值。
+          <p className="text-[11px] dg-text-muted">
+            提示：dnsConfig 通常与 <code className="dg-text-secondary">dnsPolicy: None</code> 搭配使用。每行一个值。
           </p>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-slate-500 text-xs">nameservers（每行一个 IP）</Label>
+              <Label className="dg-text-muted text-xs">nameservers（每行一个 IP）</Label>
               <textarea
                 value={dnsNameservers}
                 onChange={e => onDnsNameserversChange(e.target.value)}
                 placeholder={'8.8.8.8\n114.114.114.114'}
                 rows={3}
-                className="w-full mt-1 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 font-mono p-2 resize-y"
+                className="w-full mt-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] font-mono p-2 resize-y"
               />
             </div>
             <div>
-              <Label className="text-slate-500 text-xs">searches（搜索域，每行一个）</Label>
+              <Label className="dg-text-muted text-xs">searches（搜索域，每行一个）</Label>
               <textarea
                 value={dnsSearches}
                 onChange={e => onDnsSearchesChange(e.target.value)}
                 placeholder={'svc.cluster.local\ncluster.local'}
                 rows={3}
-                className="w-full mt-1 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 font-mono p-2 resize-y"
+                className="w-full mt-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] font-mono p-2 resize-y"
               />
             </div>
           </div>
           <div>
             <div className="flex items-center justify-between mb-1">
-              <Label className="text-slate-400 text-xs">options（DNS 选项）</Label>
-              <Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={addDnsOption}>
+              <Label className="dg-text-secondary text-xs">options（DNS 选项）</Label>
+              <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={addDnsOption}>
                 <Plus className="h-3 w-3 mr-1" />添加
               </Button>
             </div>
             {dnsOptions.length === 0 ? (
-              <p className="text-xs text-slate-600 italic">未配置</p>
+              <p className="text-xs dg-text-muted italic">未配置</p>
             ) : (
               dnsOptions.map((o, i) => (
                 <div key={i} className="flex items-center gap-2 mb-1.5">
@@ -98,16 +98,16 @@ export function DnsHostSection({
                     value={o.name}
                     onChange={e => updateDnsOption(i, { name: e.target.value })}
                     placeholder="ndots"
-                    className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
+                    className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
                   />
-                  <span className="text-slate-600">:</span>
+                  <span className="dg-text-muted">:</span>
                   <Input
                     value={o.value}
                     onChange={e => updateDnsOption(i, { value: e.target.value })}
                     placeholder="5（可留空）"
-                    className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
+                    className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
                   />
-                  <Button size="icon" variant="ghost" className="h-6 w-6 text-red-400" onClick={() => removeDnsOption(i)}>
+                  <Button size="icon" variant="ghost" className="h-6 w-6 dg-text-red" onClick={() => removeDnsOption(i)}>
                     <Trash2 className="h-3 w-3" />
                   </Button>
                 </div>
@@ -117,21 +117,21 @@ export function DnsHostSection({
         </CardContent>
       </Card>
 
-      <Card className="bg-slate-900 border-slate-800">
+      <Card className="dg-card">
         <CardHeader className="pb-3">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <MapPin className="h-4 w-4 text-amber-400" />主机别名 (hostAliases)
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <MapPin className="h-4 w-4 dg-text-yellow" />主机别名 (hostAliases)
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-0 space-y-2">
           <div className="flex items-center justify-between mb-1">
-            <Label className="text-slate-400 text-xs">IP → 主机名映射（注入 Pod 的 /etc/hosts）</Label>
-            <Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={addHostAlias}>
+            <Label className="dg-text-secondary text-xs">IP → 主机名映射（注入 Pod 的 /etc/hosts）</Label>
+            <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={addHostAlias}>
               <Plus className="h-3 w-3 mr-1" />添加
             </Button>
           </div>
           {hostAliases.length === 0 ? (
-            <p className="text-xs text-slate-600 italic">未配置</p>
+            <p className="text-xs dg-text-muted italic">未配置</p>
           ) : (
             hostAliases.map((a, i) => (
               <div key={i} className="flex items-center gap-2">
@@ -139,16 +139,16 @@ export function DnsHostSection({
                   value={a.ip}
                   onChange={e => updateHostAlias(i, { ip: e.target.value })}
                   placeholder="10.10.10.72"
-                  className="w-40 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
+                  className="w-40 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
                 />
-                <span className="text-slate-600">→</span>
+                <span className="dg-text-muted">→</span>
                 <Input
                   value={a.hostnames}
                   onChange={e => updateHostAlias(i, { hostnames: e.target.value })}
                   placeholder="gitlab.local, registry.local"
-                  className="flex-1 h-7 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono"
+                  className="flex-1 h-7 dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
                 />
-                <Button size="icon" variant="ghost" className="h-6 w-6 text-red-400" onClick={() => removeHostAlias(i)}>
+                <Button size="icon" variant="ghost" className="h-6 w-6 dg-text-red" onClick={() => removeHostAlias(i)}>
                   <Trash2 className="h-3 w-3" />
                 </Button>
               </div>
diff --git a/frontend/src/components/kubernetes/deployment-edit-advanced/SchedulingSection.tsx b/frontend/src/components/kubernetes/deployment-edit-advanced/SchedulingSection.tsx
index 63f1aa6..2fea7d9 100644
--- a/frontend/src/components/kubernetes/deployment-edit-advanced/SchedulingSection.tsx
+++ b/frontend/src/components/kubernetes/deployment-edit-advanced/SchedulingSection.tsx
@@ -51,21 +51,21 @@ export function SchedulingSection({
   nodeLabels,
 }: SchedulingSectionProps) {
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card">
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-sm text-slate-200 flex items-center gap-2">
-            <Server className="h-4 w-4 text-emerald-400" />调度 (Scheduling)
+          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Server className="h-4 w-4 dg-text-green" />调度 (Scheduling)
           </CardTitle>
-          <div className="flex items-center gap-1 bg-slate-800 rounded-lg p-0.5 border border-slate-700">
+          <div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]">
             {SCHEDULE_MODES.map(m => (
               <button
                 key={m.key}
                 onClick={() => onScheduleModeChange(m.key)}
                 className={`px-2.5 py-1 rounded text-[10px] font-medium transition-all ${
                   scheduleMode === m.key
-                    ? 'bg-emerald-500/20 text-emerald-300 shadow-sm'
-                    : 'text-slate-400 hover:text-slate-300'
+                    ? 'bg-emerald-500/20 dg-text-green shadow-sm'
+                    : 'dg-text-secondary hover:text-[var(--dg-text-secondary)]'
                 }`}
               >
                 {m.label}
@@ -73,7 +73,7 @@ export function SchedulingSection({
             ))}
           </div>
         </div>
-        <p className="text-xs text-slate-500 mt-1">
+        <p className="text-xs dg-text-muted mt-1">
           {scheduleMode === 'nodeName' && 'Pod 将直接调度到指定节点'}
           {scheduleMode === 'nodeSelector' && 'Pod 将调度到匹配标签的节点'}
           {scheduleMode === 'nodeAffinity' && '通过亲和性规则控制 Pod 调度到指定节点'}
@@ -82,16 +82,16 @@ export function SchedulingSection({
       <CardContent className="pt-0">
         {scheduleMode === 'nodeName' && (
           <div className="space-y-2">
-            <Label className="text-slate-400 text-xs">请选择节点</Label>
+            <Label className="dg-text-secondary text-xs">请选择节点</Label>
             {nodesLoading ? (
-              <div className="flex items-center gap-1 text-slate-500 text-xs">
+              <div className="flex items-center gap-1 dg-text-muted text-xs">
                 <Loader2 className="h-3 w-3 animate-spin" />加载节点列表...
               </div>
             ) : (
               <select
                 value={nodeName}
                 onChange={e => onNodeNameChange(e.target.value)}
-                className="h-8 w-full bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2"
+                className="h-8 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2"
               >
                 <option value="">（不指定）</option>
                 {availableNodes.map(n => (
@@ -102,8 +102,8 @@ export function SchedulingSection({
               </select>
             )}
             {nodeName && (
-              <div className="text-[10px] text-slate-500">
-                已选择: <code className="bg-slate-800 px-1 py-0.5 rounded text-emerald-400">{nodeName}</code>
+              <div className="text-[10px] dg-text-muted">
+                已选择: <code className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-green">{nodeName}</code>
               </div>
             )}
           </div>
@@ -112,20 +112,20 @@ export function SchedulingSection({
         {scheduleMode === 'nodeSelector' && (
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <Label className="text-slate-400 text-xs">请选择标签</Label>
-              <Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={onAddLabelSelector}>
+              <Label className="dg-text-secondary text-xs">请选择标签</Label>
+              <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={onAddLabelSelector}>
                 <Plus className="h-3 w-3 mr-1" />添加
               </Button>
             </div>
             {labelSelectorKv.length === 0 ? (
-              <p className="text-xs text-slate-600 italic">未配置标签选择器</p>
+              <p className="text-xs dg-text-muted italic">未配置标签选择器</p>
             ) : (
               labelSelectorKv.map((n, i) => (
                 <div key={i} className="flex items-center gap-2">
                   <select
                     value={n.key}
                     onChange={e => onUpdateLabelSelector(i, { key: e.target.value, value: '' })}
-                    className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
+                    className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
                   >
                     <option value="">选择标签</option>
                     {Object.entries(nodeLabels).map(([k, vals]) => (
@@ -135,7 +135,7 @@ export function SchedulingSection({
                   <select
                     value={n.value}
                     onChange={e => onUpdateLabelSelector(i, { value: e.target.value })}
-                    className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
+                    className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
                     disabled={!n.key}
                   >
                     <option value="">选择值</option>
@@ -146,7 +146,7 @@ export function SchedulingSection({
                   <Button
                     size="icon"
                     variant="ghost"
-                    className="h-6 w-6 text-red-400"
+                    className="h-6 w-6 dg-text-red"
                     onClick={() => onRemoveLabelSelector(i)}
                   >
                     <Trash2 className="h-3 w-3" />
@@ -160,22 +160,22 @@ export function SchedulingSection({
         {scheduleMode === 'nodeAffinity' && (
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <Label className="text-slate-400 text-xs">
-                请选择标签 <span className="text-slate-600">（生成 requiredDuringScheduling 规则）</span>
+              <Label className="dg-text-secondary text-xs">
+                请选择标签 <span className="dg-text-muted">（生成 requiredDuringScheduling 规则）</span>
               </Label>
-              <Button size="sm" variant="ghost" className="h-6 text-xs text-slate-400" onClick={onAddLabelSelector}>
+              <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-secondary" onClick={onAddLabelSelector}>
                 <Plus className="h-3 w-3 mr-1" />添加
               </Button>
             </div>
             {labelSelectorKv.length === 0 ? (
-              <p className="text-xs text-slate-600 italic">未配置亲和性规则</p>
+              <p className="text-xs dg-text-muted italic">未配置亲和性规则</p>
             ) : (
               labelSelectorKv.map((n, i) => (
                 <div key={i} className="flex items-center gap-2">
                   <select
                     value={n.key}
                     onChange={e => onUpdateLabelSelector(i, { key: e.target.value, value: '' })}
-                    className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
+                    className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
                   >
                     <option value="">选择标签</option>
                     {Object.entries(nodeLabels).map(([k, vals]) => (
@@ -185,7 +185,7 @@ export function SchedulingSection({
                   <select
                     value={n.value}
                     onChange={e => onUpdateLabelSelector(i, { value: e.target.value })}
-                    className="flex-1 h-7 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5"
+                    className="flex-1 h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"
                     disabled={!n.key}
                   >
                     <option value="">选择值</option>
@@ -196,7 +196,7 @@ export function SchedulingSection({
                   <Button
                     size="icon"
                     variant="ghost"
-                    className="h-6 w-6 text-red-400"
+                    className="h-6 w-6 dg-text-red"
                     onClick={() => onRemoveLabelSelector(i)}
                   >
                     <Trash2 className="h-3 w-3" />
diff --git a/frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx b/frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx
index bc99d51..a6f15f2 100644
--- a/frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx
+++ b/frontend/src/components/kubernetes/deployment-edit/ContainerEditor.tsx
@@ -28,67 +28,67 @@ import type {
 
 export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
   const c = container;
-  const sectionBtn = "flex items-center gap-1.5 text-xs font-semibold text-slate-300 mb-2";
+  const sectionBtn = "flex items-center gap-1.5 text-xs font-semibold text-[var(--dg-text-secondary)] mb-2";
 
   return (
     <>
       {/* ---- 基本设置 ---- */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         <div>
-          <Label className="text-slate-400 text-xs">容器名称</Label>
+          <Label className="dg-text-secondary text-xs">容器名称</Label>
           <Input value={c.name} onChange={e => onUpdate({ name: e.target.value })}
             placeholder="my-app"
-            className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+            className="mt-1 dg-input font-mono text-xs h-8" />
         </div>
         <div>
-          <Label className="text-slate-400 text-xs">容器镜像</Label>
+          <Label className="dg-text-secondary text-xs">容器镜像</Label>
           <Input value={c.image} onChange={e => onUpdate({ image: e.target.value })}
             placeholder="nginx:1.25"
-            className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+            className="mt-1 dg-input font-mono text-xs h-8" />
         </div>
         <div>
-          <Label className="text-slate-400 text-xs">镜像拉取策略</Label>
+          <Label className="dg-text-secondary text-xs">镜像拉取策略</Label>
           <Select value={c.imagePullPolicy || '__none'} onValueChange={v => onUpdate({ imagePullPolicy: v === '__none' ? '' : v })}>
-            <SelectTrigger className="mt-1 bg-slate-800 border-slate-700 text-slate-200 text-xs h-8">
+            <SelectTrigger className="mt-1 dg-input text-xs h-8">
               <SelectValue />
             </SelectTrigger>
-            <SelectContent className="bg-slate-900 border-slate-700">
-              <SelectItem value="__none" className="text-slate-400">不设置（默认 IfNotPresent）</SelectItem>
-              <SelectItem value="Always" className="text-slate-200">Always</SelectItem>
-              <SelectItem value="IfNotPresent" className="text-slate-200">IfNotPresent</SelectItem>
-              <SelectItem value="Never" className="text-slate-200">Never</SelectItem>
+            <SelectContent className="dg-input">
+              <SelectItem value="__none" className="dg-text-secondary">不设置（默认 IfNotPresent）</SelectItem>
+              <SelectItem value="Always" className="text-[var(--dg-text-primary)]">Always</SelectItem>
+              <SelectItem value="IfNotPresent" className="text-[var(--dg-text-primary)]">IfNotPresent</SelectItem>
+              <SelectItem value="Never" className="text-[var(--dg-text-primary)]">Never</SelectItem>
             </SelectContent>
           </Select>
         </div>
         <div>
-          <Label className="text-slate-400 text-xs">工作目录 (workingDir)</Label>
+          <Label className="dg-text-secondary text-xs">工作目录 (workingDir)</Label>
           <Input value={c.workingDir || ''} onChange={e => onUpdate({ workingDir: e.target.value })}
             placeholder="/app"
-            className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+            className="mt-1 dg-input font-mono text-xs h-8" />
         </div>
       </div>
 
       {/* ---- 命令与参数 ---- */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         <div>
-          <Label className="text-slate-400 text-xs">启动命令 (command) — 每行一个</Label>
+          <Label className="dg-text-secondary text-xs">启动命令 (command) — 每行一个</Label>
           <Textarea value={arrToText(c.command)} placeholder={"/bin/sh\n-c"}
             onChange={e => onUpdate({ command: textToArr(e.target.value) })}
-            className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[60px]" />
+            className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
         </div>
         <div>
-          <Label className="text-slate-400 text-xs">启动参数 (args) — 每行一个</Label>
+          <Label className="dg-text-secondary text-xs">启动参数 (args) — 每行一个</Label>
           <Textarea value={arrToText(c.args)} placeholder={"--config=/etc/app.yaml\n--debug"}
             onChange={e => onUpdate({ args: textToArr(e.target.value) })}
-            className="mt-1 bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[60px]" />
+            className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
         </div>
       </div>
 
       {/* ---- 环境变量 ---- */}
       <div>
         <div className="flex items-center justify-between mb-2">
-          <div className={sectionBtn}><Terminal className="h-3.5 w-3.5 text-cyan-400" /> 环境变量</div>
-          <Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
+          <div className={sectionBtn}><Terminal className="h-3.5 w-3.5 dg-text-cyan" /> 环境变量</div>
+          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
             onClick={() => onUpdate({ env: [...c.env, { name: '', value: '' }] })}>
             <Plus className="h-3 w-3 mr-1" />新增
           </Button>
@@ -98,17 +98,17 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
             <div key={ei} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
               <Input value={env.name} placeholder="KEY"
                 onChange={e => { const n = [...c.env]; n[ei] = { ...env, name: e.target.value }; onUpdate({ env: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={env.value || ''} placeholder="value"
                 onChange={e => { const n = [...c.env]; n[ei] = { ...env, value: e.target.value }; onUpdate({ env: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
+                className="dg-input font-mono text-xs h-8" />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                 onClick={() => onUpdate({ env: c.env.filter((_, j) => j !== ei) })}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
             </div>
           ))}
-          {c.env.length === 0 && <p className="text-[11px] text-slate-600">无环境变量</p>}
+          {c.env.length === 0 && <p className="text-[11px] dg-text-muted">无环境变量</p>}
         </div>
       </div>
 
@@ -116,7 +116,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
       <div>
         <div className="flex items-center justify-between mb-2">
           <div className={sectionBtn}><Network className="h-3.5 w-3.5 text-indigo-400" /> 端口</div>
-          <Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
+          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
             onClick={() => onUpdate({ ports: [...c.ports, { name: '', containerPort: '', protocol: 'TCP' }] })}>
             <Plus className="h-3 w-3 mr-1" />新增
           </Button>
@@ -126,57 +126,57 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
             <div key={pi} className="grid grid-cols-[1fr_1fr_100px_auto] gap-2">
               <Input value={p.name || ''} placeholder="http"
                 onChange={e => { const n = [...c.ports]; n[pi] = { ...p, name: e.target.value }; onUpdate({ ports: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input type="number" value={p.containerPort} placeholder="8080"
                 onChange={e => { const n = [...c.ports]; n[pi] = { ...p, containerPort: e.target.value }; onUpdate({ ports: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Select value={p.protocol || 'TCP'} onValueChange={v => { const n = [...c.ports]; n[pi] = { ...p, protocol: v }; onUpdate({ ports: n }); }}>
-                <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-8">
+                <SelectTrigger className="dg-input text-xs h-8">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-900 border-slate-700">
-                  <SelectItem value="TCP" className="text-slate-200">TCP</SelectItem>
-                  <SelectItem value="UDP" className="text-slate-200">UDP</SelectItem>
-                  <SelectItem value="SCTP" className="text-slate-200">SCTP</SelectItem>
+                <SelectContent className="dg-input">
+                  <SelectItem value="TCP" className="text-[var(--dg-text-primary)]">TCP</SelectItem>
+                  <SelectItem value="UDP" className="text-[var(--dg-text-primary)]">UDP</SelectItem>
+                  <SelectItem value="SCTP" className="text-[var(--dg-text-primary)]">SCTP</SelectItem>
                 </SelectContent>
               </Select>
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                 onClick={() => onUpdate({ ports: c.ports.filter((_, j) => j !== pi) })}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
             </div>
           ))}
-          {c.ports.length === 0 && <p className="text-[11px] text-slate-600">无端口暴露</p>}
+          {c.ports.length === 0 && <p className="text-[11px] dg-text-muted">无端口暴露</p>}
         </div>
       </div>
 
       {/* ---- 资源 requests/limits ---- */}
       <div>
-        <div className={sectionBtn}><Cpu className="h-3.5 w-3.5 text-amber-400" /> 资源 (requests / limits)</div>
+        <div className={sectionBtn}><Cpu className="h-3.5 w-3.5 dg-text-yellow" /> 资源 (requests / limits)</div>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
           <div>
-            <Label className="text-[11px] text-slate-500">CPU 请求</Label>
+            <Label className="text-[11px] dg-text-muted">CPU 请求</Label>
             <Input value={c.resources.requests?.cpu || ''} placeholder="100m"
               onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } } })}
-              className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+              className="dg-input font-mono text-xs h-8" />
           </div>
           <div>
-            <Label className="text-[11px] text-slate-500">CPU 上限</Label>
+            <Label className="text-[11px] dg-text-muted">CPU 上限</Label>
             <Input value={c.resources.limits?.cpu || ''} placeholder="500m"
               onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } } })}
-              className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+              className="dg-input font-mono text-xs h-8" />
           </div>
           <div>
-            <Label className="text-[11px] text-slate-500">内存请求</Label>
+            <Label className="text-[11px] dg-text-muted">内存请求</Label>
             <Input value={c.resources.requests?.memory || ''} placeholder="128Mi"
               onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } } })}
-              className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+              className="dg-input font-mono text-xs h-8" />
           </div>
           <div>
-            <Label className="text-[11px] text-slate-500">内存上限</Label>
+            <Label className="text-[11px] dg-text-muted">内存上限</Label>
             <Input value={c.resources.limits?.memory || ''} placeholder="512Mi"
               onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } } })}
-              className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+              className="dg-input font-mono text-xs h-8" />
           </div>
         </div>
       </div>
@@ -197,7 +197,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
 
       {/* ---- 生命周期 ---- */}
       <div>
-        <div className={sectionBtn}><Zap className="h-3.5 w-3.5 text-yellow-400" /> 生命周期回调 (Lifecycle)</div>
+        <div className={sectionBtn}><Zap className="h-3.5 w-3.5 dg-text-yellow" /> 生命周期回调 (Lifecycle)</div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
           <LifecycleHandlerEditor label="启动后 (postStart)" handler={c.lifecycle?.postStart}
             onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, postStart: h } })} />
@@ -205,7 +205,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
             onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, preStop: h } })} />
         </div>
         {!c.lifecycle && (
-          <Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px] mt-1"
+          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px] mt-1"
             onClick={() => onUpdate({ lifecycle: { postStart: { type: 'none' }, preStop: { type: 'none' } } })}>
             <Plus className="h-3 w-3 mr-1" />启用生命周期回调
           </Button>
@@ -214,33 +214,33 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
 
       {/* ---- 安全上下文 ---- */}
       <div>
-        <div className={sectionBtn}><Shield className="h-3.5 w-3.5 text-emerald-400" /> 安全上下文 (SecurityContext)</div>
+        <div className={sectionBtn}><Shield className="h-3.5 w-3.5 dg-text-green" /> 安全上下文 (SecurityContext)</div>
         {c.securityContext ? (
-          <div className="space-y-2 border border-slate-800 rounded-md p-3 bg-slate-950/30">
+          <div className="space-y-2 border border-[var(--dg-border)] rounded-md p-3 bg-[var(--dg-bg-primary)]/30">
             <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
               <div>
-                <Label className="text-[11px] text-slate-500">runAsUser</Label>
+                <Label className="text-[11px] dg-text-muted">runAsUser</Label>
                 <Input type="number" value={c.securityContext.runAsUser ?? ''} placeholder="1000"
                   onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsUser: e.target.value === '' ? undefined : Number(e.target.value) } })}
-                  className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                  className="dg-input font-mono text-xs h-8" />
               </div>
               <div>
-                <Label className="text-[11px] text-slate-500">runAsGroup</Label>
+                <Label className="text-[11px] dg-text-muted">runAsGroup</Label>
                 <Input type="number" value={c.securityContext.runAsGroup ?? ''} placeholder="1000"
                   onChange={e => onUpdate({ securityContext: { ...c.securityContext!, runAsGroup: e.target.value === '' ? undefined : Number(e.target.value) } })}
-                  className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                  className="dg-input font-mono text-xs h-8" />
               </div>
               <div>
-                <Label className="text-[11px] text-slate-500">Capabilities Add (逗号分隔)</Label>
+                <Label className="text-[11px] dg-text-muted">Capabilities Add (逗号分隔)</Label>
                 <Input value={(c.securityContext.capabilitiesAdd || []).join(',')} placeholder="NET_ADMIN"
                   onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesAdd: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
-                  className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                  className="dg-input font-mono text-xs h-8" />
               </div>
               <div>
-                <Label className="text-[11px] text-slate-500">Capabilities Drop (逗号分隔)</Label>
+                <Label className="text-[11px] dg-text-muted">Capabilities Drop (逗号分隔)</Label>
                 <Input value={(c.securityContext.capabilitiesDrop || []).join(',')} placeholder="ALL"
                   onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesDrop: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
-                  className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                  className="dg-input font-mono text-xs h-8" />
               </div>
             </div>
             <div className="flex items-center gap-4 flex-wrap">
@@ -253,13 +253,13 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
               <BoolToggle label="allowPrivilegeEscalation" value={c.securityContext.allowPrivilegeEscalation ?? false}
                 onChange={v => onUpdate({ securityContext: { ...c.securityContext!, allowPrivilegeEscalation: v } })} />
             </div>
-            <Button size="sm" variant="ghost" className="h-6 text-red-400 text-[11px]"
+            <Button size="sm" variant="ghost" className="h-6 dg-text-red text-[11px]"
               onClick={() => onUpdate({ securityContext: null })}>
               <Trash2 className="h-3 w-3 mr-1" />移除安全上下文
             </Button>
           </div>
         ) : (
-          <Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
+          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
             onClick={() => onUpdate({ securityContext: { runAsNonRoot: false, privileged: false } })}>
             <Plus className="h-3 w-3 mr-1" />启用安全上下文
           </Button>
@@ -270,7 +270,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
       <div>
         <div className="flex items-center justify-between mb-2">
           <div className={sectionBtn}><FolderOpen className="h-3.5 w-3.5 text-teal-400" /> 卷挂载 (VolumeMounts)</div>
-          <Button size="sm" variant="outline" className="h-6 border-slate-700 text-slate-300 text-[11px]"
+          <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
             onClick={() => onUpdate({ volumeMounts: [...c.volumeMounts, { name: '', mountPath: '', subPath: '', readOnly: false }] })}>
             <Plus className="h-3 w-3 mr-1" />新增
           </Button>
@@ -280,25 +280,25 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
             <div key={mi} className="grid grid-cols-[1fr_1fr_1fr_60px_auto] gap-2 items-center">
               <Input value={m.name} placeholder="volume 名称"
                 onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, name: e.target.value }; onUpdate({ volumeMounts: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={m.mountPath} placeholder="/data"
                 onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, mountPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
+                className="dg-input font-mono text-xs h-8" />
               <Input value={m.subPath || ''} placeholder="subPath (可选)"
                 onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, subPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-8" />
-              <label className="flex items-center gap-1 text-[10px] text-slate-500 cursor-pointer">
+                className="dg-input font-mono text-xs h-8" />
+              <label className="flex items-center gap-1 text-[10px] dg-text-muted cursor-pointer">
                 <Switch checked={!!m.readOnly}
                   onCheckedChange={v => { const n = [...c.volumeMounts]; n[mi] = { ...m, readOnly: v }; onUpdate({ volumeMounts: n }); }} />
                 RO
               </label>
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400"
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red"
                 onClick={() => onUpdate({ volumeMounts: c.volumeMounts.filter((_, j) => j !== mi) })}>
                 <Trash2 className="h-3.5 w-3.5" />
               </Button>
             </div>
           ))}
-          {c.volumeMounts.length === 0 && <p className="text-[11px] text-slate-600">无卷挂载</p>}
+          {c.volumeMounts.length === 0 && <p className="text-[11px] dg-text-muted">无卷挂载</p>}
         </div>
       </div>
     </>
@@ -312,24 +312,24 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
   const setField = (patch: Partial<ProbeDef>) => onChange({ ...p, ...patch });
 
   return (
-    <div className="border border-slate-800 rounded-md p-2.5 bg-slate-950/30">
+    <div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-xs text-slate-300 font-medium">{label}</span>
+        <span className="text-xs text-[var(--dg-text-secondary)] font-medium">{label}</span>
         <Switch checked={enabled}
           onCheckedChange={v => onChange(v ? { type: 'httpGet', httpPath: '/', httpPort: 8080, initialDelaySeconds: 10, periodSeconds: 10 } : null)} />
       </div>
       {enabled && (
         <>
           <div className="flex items-center gap-2 mb-2">
-            <span className="text-[10px] text-slate-500 w-8">类型</span>
+            <span className="text-[10px] dg-text-muted w-8">类型</span>
             <Select value={p.type || 'httpGet'} onValueChange={v => setField({ type: v as ProbeDef['type'] })}>
-              <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-7 flex-1">
+              <SelectTrigger className="dg-input text-xs h-7 flex-1">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent className="bg-slate-900 border-slate-700">
-                <SelectItem value="httpGet" className="text-slate-200">HTTP GET</SelectItem>
-                <SelectItem value="tcpSocket" className="text-slate-200">TCP Socket</SelectItem>
-                <SelectItem value="exec" className="text-slate-200">Exec 命令</SelectItem>
+              <SelectContent className="dg-input">
+                <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
+                <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
+                <SelectItem value="exec" className="text-[var(--dg-text-primary)]">Exec 命令</SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -337,59 +337,59 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
             <div className="grid grid-cols-3 gap-2 mb-2">
               <Input value={p.httpPath || ''} placeholder="/healthz"
                 onChange={e => setField({ httpPath: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
               <Input type="number" value={p.httpPort ?? ''} placeholder="8080"
                 onChange={e => setField({ httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
               <Input value={p.httpHost || ''} placeholder="host (可选)"
                 onChange={e => setField({ httpHost: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
           )}
           {p.type === 'tcpSocket' && (
             <div className="mb-2">
               <Input type="number" value={p.tcpPort ?? ''} placeholder="端口"
                 onChange={e => setField({ tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
           )}
           {p.type === 'exec' && (
             <div className="mb-2">
               <Textarea value={p.execCommand || ''} placeholder="每行一个命令片段，如：\ncat\n/tmp/healthy"
                 onChange={e => setField({ execCommand: e.target.value })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[50px]" />
+                className="dg-input font-mono text-xs min-h-[50px]" />
             </div>
           )}
           <div className="grid grid-cols-5 gap-2">
             <div>
-              <Label className="text-[10px] text-slate-500">延迟(s)</Label>
+              <Label className="text-[10px] dg-text-muted">延迟(s)</Label>
               <Input type="number" value={p.initialDelaySeconds ?? ''} placeholder="10"
                 onChange={e => setField({ initialDelaySeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
             <div>
-              <Label className="text-[10px] text-slate-500">间隔(s)</Label>
+              <Label className="text-[10px] dg-text-muted">间隔(s)</Label>
               <Input type="number" value={p.periodSeconds ?? ''} placeholder="10"
                 onChange={e => setField({ periodSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
             <div>
-              <Label className="text-[10px] text-slate-500">超时(s)</Label>
+              <Label className="text-[10px] dg-text-muted">超时(s)</Label>
               <Input type="number" value={p.timeoutSeconds ?? ''} placeholder="1"
                 onChange={e => setField({ timeoutSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
             <div>
-              <Label className="text-[10px] text-slate-500">成功</Label>
+              <Label className="text-[10px] dg-text-muted">成功</Label>
               <Input type="number" value={p.successThreshold ?? ''} placeholder="1"
                 onChange={e => setField({ successThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
             <div>
-              <Label className="text-[10px] text-slate-500">失败</Label>
+              <Label className="text-[10px] dg-text-muted">失败</Label>
               <Input type="number" value={p.failureThreshold ?? ''} placeholder="3"
                 onChange={e => setField({ failureThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
-                className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+                className="dg-input font-mono text-xs h-7" />
             </div>
           </div>
         </>
@@ -403,41 +403,41 @@ function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEd
   const selVal = (!h.type || h.type === 'none') ? '__none' : h.type;
 
   return (
-    <div className="border border-slate-800 rounded-md p-2.5 bg-slate-950/30">
-      <span className="text-xs text-slate-300 font-medium block mb-2">{label}</span>
+    <div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
+      <span className="text-xs text-[var(--dg-text-secondary)] font-medium block mb-2">{label}</span>
       <div className="flex items-center gap-2 mb-2">
-        <span className="text-[10px] text-slate-500 w-8">类型</span>
+        <span className="text-[10px] dg-text-muted w-8">类型</span>
         <Select value={selVal} onValueChange={v => onChange({ ...h, type: (v === '__none' ? 'none' : v) as LifecycleHandler['type'] })}>
-          <SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200 text-xs h-7 flex-1">
+          <SelectTrigger className="dg-input text-xs h-7 flex-1">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="bg-slate-900 border-slate-700">
-            <SelectItem value="__none" className="text-slate-400">不设置</SelectItem>
-            <SelectItem value="exec" className="text-slate-200">Exec 命令</SelectItem>
-            <SelectItem value="httpGet" className="text-slate-200">HTTP GET</SelectItem>
-            <SelectItem value="tcpSocket" className="text-slate-200">TCP Socket</SelectItem>
+          <SelectContent className="dg-input">
+            <SelectItem value="__none" className="dg-text-secondary">不设置</SelectItem>
+            <SelectItem value="exec" className="text-[var(--dg-text-primary)]">Exec 命令</SelectItem>
+            <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
+            <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
           </SelectContent>
         </Select>
       </div>
       {h.type === 'exec' && (
         <Textarea value={h.execCommand || ''} placeholder="每行一个命令片段"
           onChange={e => onChange({ ...h, execCommand: e.target.value })}
-          className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs min-h-[50px]" />
+          className="dg-input font-mono text-xs min-h-[50px]" />
       )}
       {h.type === 'httpGet' && (
         <div className="grid grid-cols-2 gap-2">
           <Input value={h.httpPath || ''} placeholder="/shutdown"
             onChange={e => onChange({ ...h, httpPath: e.target.value })}
-            className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+            className="dg-input font-mono text-xs h-7" />
           <Input type="number" value={h.httpPort ?? ''} placeholder="8080"
             onChange={e => onChange({ ...h, httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
-            className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+            className="dg-input font-mono text-xs h-7" />
         </div>
       )}
       {h.type === 'tcpSocket' && (
         <Input type="number" value={h.tcpPort ?? ''} placeholder="端口"
           onChange={e => onChange({ ...h, tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
-          className="bg-slate-800 border-slate-700 text-slate-200 font-mono text-xs h-7" />
+          className="dg-input font-mono text-xs h-7" />
       )}
     </div>
   );
@@ -447,7 +447,7 @@ function BoolToggle({ label, value, onChange }: BoolToggleProps) {
   return (
     <label className="flex items-center gap-1.5 cursor-pointer">
       <Switch checked={value} onCheckedChange={onChange} />
-      <span className="text-[11px] text-slate-400 font-mono">{label}</span>
+      <span className="text-[11px] dg-text-secondary font-mono">{label}</span>
     </label>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/kubernetes/deployment-edit/ContainerGroupSection.tsx b/frontend/src/components/kubernetes/deployment-edit/ContainerGroupSection.tsx
index 537b8b1..f96e00c 100644
--- a/frontend/src/components/kubernetes/deployment-edit/ContainerGroupSection.tsx
+++ b/frontend/src/components/kubernetes/deployment-edit/ContainerGroupSection.tsx
@@ -34,23 +34,23 @@ export function ContainerGroupSection({
   const headerBg = accentColor === 'blue' ? 'bg-blue-500/5' : 'bg-purple-500/5';
 
   return (
-    <Card className={`bg-slate-900 border-slate-800`}>
+    <Card className={`dg-card`}>
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             {icon}
-            <CardTitle className="text-sm text-slate-200">{title}</CardTitle>
-            <Badge variant="outline" className={`border-slate-700 text-slate-400 text-[10px]`}>{containers.length}</Badge>
+            <CardTitle className="text-sm text-[var(--dg-text-primary)]">{title}</CardTitle>
+            <Badge variant="outline" className={`border-[var(--dg-border)] dg-text-secondary text-[10px]`}>{containers.length}</Badge>
           </div>
-          <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={onAdd}>
+          <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={onAdd}>
             <Plus className="h-3 w-3 mr-1" />新增容器
           </Button>
         </div>
-        <p className="text-[11px] text-slate-600">{description}</p>
+        <p className="text-[11px] dg-text-muted">{description}</p>
       </CardHeader>
       <CardContent className="pt-0 space-y-3">
         {containers.length === 0 && (
-          <div className="text-center py-6 text-slate-600 text-xs">暂无容器，点击「新增容器」添加</div>
+          <div className="text-center py-6 dg-text-muted text-xs">暂无容器，点击「新增容器」添加</div>
         )}
         {containers.map((c, idx) => {
           const isOpen = openIndices.has(idx) || containers.length === 1;
@@ -59,19 +59,19 @@ export function ContainerGroupSection({
               {/* container header */}
               <div className={`flex items-center justify-between px-3 py-2 ${headerBg} cursor-pointer`} onClick={() => toggleOpen(idx)}>
                 <div className="flex items-center gap-2">
-                  {isOpen ? <ChevronDown className="h-4 w-4 text-slate-500" /> : <ChevronRight className="h-4 w-4 text-slate-500" />}
-                  <Container className={`h-4 w-4 ${accentColor === 'blue' ? 'text-blue-400' : 'text-purple-400'}`} />
-                  <span className="text-sm font-mono text-slate-200 font-semibold">{c.name || '(未命名)'}</span>
-                  {c.image && <code className="text-[10px] text-slate-500 font-mono truncate max-w-[300px]">{c.image}</code>}
+                  {isOpen ? <ChevronDown className="h-4 w-4 dg-text-muted" /> : <ChevronRight className="h-4 w-4 dg-text-muted" />}
+                  <Container className={`h-4 w-4 ${accentColor === 'blue' ? 'dg-text-blue' : 'dg-text-purple'}`} />
+                  <span className="text-sm font-mono text-[var(--dg-text-primary)] font-semibold">{c.name || '(未命名)'}</span>
+                  {c.image && <code className="text-[10px] dg-text-muted font-mono truncate max-w-[300px]">{c.image}</code>}
                 </div>
                 <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
                   {onDuplicate && (
-                    <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-500 hover:text-slate-300" title="复制"
+                    <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-muted hover:text-[var(--dg-text-secondary)]" title="复制"
                       onClick={() => onDuplicate(idx)}>
                       <RotateCw className="h-3.5 w-3.5" />
                     </Button>
                   )}
-                  <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" title="删除"
+                  <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" title="删除"
                     onClick={async () => {
                       const ok = await confirm({
                         title: '删除容器',
@@ -87,7 +87,7 @@ export function ContainerGroupSection({
               </div>
               {/* container body */}
               {isOpen && (
-                <div className="p-3 space-y-4 bg-slate-950/30">
+                <div className="p-3 space-y-4 bg-[var(--dg-bg-primary)]/30">
                   <ContainerEditor container={c} onUpdate={(patch) => onUpdate(idx, patch)} />
                 </div>
               )}
diff --git a/frontend/src/components/kubernetes/deployment-storage-fields.tsx b/frontend/src/components/kubernetes/deployment-storage-fields.tsx
index aab6950..2e7ee32 100644
--- a/frontend/src/components/kubernetes/deployment-storage-fields.tsx
+++ b/frontend/src/components/kubernetes/deployment-storage-fields.tsx
@@ -34,25 +34,25 @@ export function NamespaceResourcePicker({
   const orphan = value && !options.includes(value);
   return (
     <div className="flex items-center gap-2 flex-wrap flex-1 min-w-0">
-      <span className="text-[10px] text-slate-500 w-20 shrink-0">{label}</span>
+      <span className="text-[10px] dg-text-muted w-20 shrink-0">{label}</span>
       <select
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         disabled={loading}
-        className="h-7 flex-1 min-w-[160px] max-w-xs bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 font-mono"
+        className="h-7 flex-1 min-w-[160px] max-w-xs bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 font-mono"
       >
         <option value="" disabled>{options.length === 0 ? '暂无资源' : '请选择'}</option>
         {orphan && <option value={value}>{value}（未在集群中找到）</option>}
         {options.map((n) => <option key={n} value={n}>{n}</option>)}
       </select>
-      <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-slate-700 text-slate-400 text-xs" onClick={onRefresh} disabled={loading}>
+      <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-secondary text-xs" onClick={onRefresh} disabled={loading}>
         {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
       </Button>
-      <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-slate-700 text-blue-400 text-xs" onClick={onCreate}>
+      <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-blue text-xs" onClick={onCreate}>
         <Plus className="h-3 w-3 mr-0.5" />新建
       </Button>
       {options.length === 0 && !orphan && (
-        <span className="text-[10px] text-amber-400/90">命名空间内暂无{label}，请先新建</span>
+        <span className="text-[10px] dg-text-yellow/90">命名空间内暂无{label}，请先新建</span>
       )}
     </div>
   );
@@ -82,7 +82,7 @@ export function VolumeTypeFields({
           onRefresh={onRefreshResources}
           onCreate={() => onCreateResource('pvcs')}
         />
-        <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer whitespace-nowrap pl-[88px]">
+        <label className="flex items-center gap-1.5 text-xs dg-text-secondary cursor-pointer whitespace-nowrap pl-[88px]">
           <input type="checkbox" checked={!!vol.pvcReadOnly} onChange={(e) => onChange({ pvcReadOnly: e.target.checked })} className="accent-blue-500" />
           卷只读
         </label>
@@ -92,25 +92,25 @@ export function VolumeTypeFields({
   if (vol.type === 'emptyDir') {
     return (
       <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-[10px] text-slate-500 w-20 shrink-0">介质</span>
+        <span className="text-[10px] dg-text-muted w-20 shrink-0">介质</span>
         <select value={vol.medium || ''} onChange={(e) => onChange({ medium: e.target.value })}
-          className="h-7 w-28 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5">
+          className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5">
           <option value="">默认磁盘</option>
           <option value="Memory">Memory</option>
         </select>
         <Input value={vol.sizeLimit || ''} onChange={(e) => onChange({ sizeLimit: e.target.value })}
-          placeholder="sizeLimit 如 512Mi" className="h-7 flex-1 min-w-[120px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+          placeholder="sizeLimit 如 512Mi" className="h-7 flex-1 min-w-[120px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
       </div>
     );
   }
   if (vol.type === 'hostPath') {
     return (
       <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-[10px] text-slate-500 w-20 shrink-0">主机路径</span>
+        <span className="text-[10px] dg-text-muted w-20 shrink-0">主机路径</span>
         <Input value={vol.path || ''} onChange={(e) => onChange({ path: e.target.value })}
-          placeholder="/data/app" className="h-7 flex-1 min-w-[160px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+          placeholder="/data/app" className="h-7 flex-1 min-w-[160px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
         <select value={vol.pathType || 'Directory'} onChange={(e) => onChange({ pathType: e.target.value })}
-          className="h-7 w-28 bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-1.5">
+          className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5">
           <option value="Directory">Directory</option>
           <option value="File">File</option>
           <option value="">默认</option>
@@ -121,11 +121,11 @@ export function VolumeTypeFields({
   if (vol.type === 'nfs') {
     return (
       <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-[10px] text-slate-500 w-20 shrink-0">NFS</span>
+        <span className="text-[10px] dg-text-muted w-20 shrink-0">NFS</span>
         <Input value={vol.nfsServer || ''} onChange={(e) => onChange({ nfsServer: e.target.value })}
-          placeholder="Server IP" className="h-7 w-36 bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+          placeholder="Server IP" className="h-7 w-36 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
         <Input value={vol.nfsPath || ''} onChange={(e) => onChange({ nfsPath: e.target.value })}
-          placeholder="/export/path" className="h-7 flex-1 min-w-[120px] bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+          placeholder="/export/path" className="h-7 flex-1 min-w-[120px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
       </div>
     );
   }
@@ -142,9 +142,9 @@ export function VolumeTypeFields({
           onCreate={() => onCreateResource('configmaps')}
         />
         <div className="flex items-center gap-2 pl-[88px]">
-          <span className="text-[10px] text-slate-500 shrink-0">键映射</span>
+          <span className="text-[10px] dg-text-muted shrink-0">键映射</span>
           <Input value={vol.cmItems || ''} onChange={(e) => onChange({ cmItems: e.target.value })}
-            placeholder="key:path（可选，挂载子项）" className="h-7 flex-1 max-w-md bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+            placeholder="key:path（可选，挂载子项）" className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
         </div>
       </div>
     );
@@ -162,15 +162,15 @@ export function VolumeTypeFields({
           onCreate={() => onCreateResource('secrets')}
         />
         <div className="flex items-center gap-2 pl-[88px]">
-          <span className="text-[10px] text-slate-500 shrink-0">键映射</span>
+          <span className="text-[10px] dg-text-muted shrink-0">键映射</span>
           <Input value={vol.secItems || ''} onChange={(e) => onChange({ secItems: e.target.value })}
-            placeholder="key:path（可选，挂载子项）" className="h-7 flex-1 max-w-md bg-slate-800 border-slate-700 text-slate-300 text-xs font-mono" />
+            placeholder="key:path（可选，挂载子项）" className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
         </div>
       </div>
     );
   }
   if (vol.type === 'custom') {
-    return <p className="text-[11px] text-amber-400/80">未识别卷类型，保存时将保留原始 YAML 结构</p>;
+    return <p className="text-[11px] dg-text-yellow/80">未识别卷类型，保存时将保留原始 YAML 结构</p>;
   }
   return null;
 }
\ No newline at end of file
diff --git a/frontend/src/components/kubernetes/deployment-view/HistoryTab.tsx b/frontend/src/components/kubernetes/deployment-view/HistoryTab.tsx
index 7d13ebe..1fcfd66 100644
--- a/frontend/src/components/kubernetes/deployment-view/HistoryTab.tsx
+++ b/frontend/src/components/kubernetes/deployment-view/HistoryTab.tsx
@@ -39,7 +39,7 @@ export function HistoryTab({ revisions, rollbackLoading, onRollback }: { revisio
                 </TableCell>
                 <TableCell className="text-xs text-[var(--dg-text-muted)]">{formatK8sTime(rev.created_at || rev.time)}</TableCell>
                 <TableCell>
-                  <Button variant="ghost" size="sm" className="h-7 text-amber-400" disabled={isLatest || rollbackLoading !== null} onClick={() => onRollback(rev)}>
+                  <Button variant="ghost" size="sm" className="h-7 dg-text-yellow" disabled={isLatest || rollbackLoading !== null} onClick={() => onRollback(rev)}>
                     {rollbackLoading === revision ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <RotateCcw className="h-3 w-3 mr-1" />}
                     回滚
                   </Button>
diff --git a/frontend/src/components/kubernetes/deployment-view/PodsTab.tsx b/frontend/src/components/kubernetes/deployment-view/PodsTab.tsx
index 81adeef..4d1b16f 100644
--- a/frontend/src/components/kubernetes/deployment-view/PodsTab.tsx
+++ b/frontend/src/components/kubernetes/deployment-view/PodsTab.tsx
@@ -125,7 +125,7 @@ export function PodsTab({
                       {pod.ip || pod.pod_ip || '—'}
                     </span>
 
-                    <span className={`text-xs text-center font-mono ${(pod.restart_count || 0) > 0 ? 'text-amber-400' : 'text-[var(--dg-text-muted)]'}`}>
+                    <span className={`text-xs text-center font-mono ${(pod.restart_count || 0) > 0 ? 'dg-text-yellow' : 'text-[var(--dg-text-muted)]'}`}>
                       {pod.restart_count || 0}
                     </span>
 
@@ -134,10 +134,10 @@ export function PodsTab({
                     </span>
 
                     <div className="flex items-center justify-end gap-0.5 shrink-0 w-[88px]">
-                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-emerald-400" title="终端" onClick={() => onShowPodTerminal(pod)}>
+                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 dg-text-green" title="终端" onClick={() => onShowPodTerminal(pod)}>
                         <Terminal className="h-3.5 w-3.5" />
                       </Button>
-                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-amber-400" title="文件" onClick={() => onShowPodFileBrowser(pod)}>
+                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 dg-text-yellow" title="文件" onClick={() => onShowPodFileBrowser(pod)}>
                         <HardDrive className="h-3.5 w-3.5" />
                       </Button>
                       <DropdownMenu>
@@ -159,7 +159,7 @@ export function PodsTab({
                           <DropdownMenuItem onClick={() => onShowPodYaml(pod)} className="text-[var(--dg-text-primary)]">
                             <FileCode className="h-3.5 w-3.5 mr-2" /> YAML
                           </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => onDeletePod?.(pod)} className="text-red-400 focus:text-red-400">
+                          <DropdownMenuItem onClick={() => onDeletePod?.(pod)} className="dg-text-red focus:dg-text-red">
                             <Trash2 className="h-3.5 w-3.5 mr-2" /> 删除
                           </DropdownMenuItem>
                         </DropdownMenuContent>
@@ -179,7 +179,7 @@ export function PodsTab({
                               <div key={idx} className="rounded-md border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] px-3 py-2.5 text-xs">
                                 <div className="flex items-center justify-between gap-2">
                                   <span className="font-medium text-[var(--dg-text-primary)]">{String(c.name ?? '')}</span>
-                                  <span className={c.ready ? 'text-emerald-400' : 'text-[var(--dg-text-muted)]'}>
+                                  <span className={c.ready ? 'dg-text-green' : 'text-[var(--dg-text-muted)]'}>
                                     {c.ready ? 'Ready' : 'Pending'}
                                   </span>
                                 </div>
diff --git a/frontend/src/components/kubernetes/deployment-workload/ActionModals.tsx b/frontend/src/components/kubernetes/deployment-workload/ActionModals.tsx
index 5bcf111..56bfd96 100644
--- a/frontend/src/components/kubernetes/deployment-workload/ActionModals.tsx
+++ b/frontend/src/components/kubernetes/deployment-workload/ActionModals.tsx
@@ -57,24 +57,24 @@ export function ActionModals({
       {modal?.kind === 'scale' && (
         <ModalShell title="伸缩 (Scale)" onClose={onClose}>
           <div className="space-y-3">
-            <p className="text-xs text-slate-500">当前副本: {deployment.replicas || 0}</p>
+            <p className="text-xs dg-text-muted">当前副本: {deployment.replicas || 0}</p>
             <div className="flex items-center justify-center gap-3 py-3">
-              <Button variant="outline" size="icon" className="border-slate-700 text-slate-300"
+              <Button variant="outline" size="icon" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
                 disabled={actionLoading === 'scale' || scaleValue <= 0}
                 onClick={() => setScaleValue(v => Math.max(0, v - 1))}>
                 <Minus className="h-4 w-4" />
               </Button>
               <Input type="number" min={0} value={scaleValue}
                 onChange={e => setScaleValue(Math.max(0, Number(e.target.value)))}
-                className="w-24 text-center text-lg font-bold bg-slate-800 border-slate-700 text-slate-200" />
-              <Button variant="outline" size="icon" className="border-slate-700 text-slate-300"
+                className="w-24 text-center text-lg font-bold dg-input" />
+              <Button variant="outline" size="icon" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
                 disabled={actionLoading === 'scale'}
                 onClick={() => setScaleValue(v => v + 1)}>
                 <Plus className="h-4 w-4" />
               </Button>
             </div>
             <div className="flex justify-end gap-2 pt-2">
-              <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onClose}>取消</Button>
+              <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onClose}>取消</Button>
               <Button className="bg-blue-600 hover:bg-blue-700" disabled={actionLoading === 'scale'} onClick={onScaleTo}>
                 {actionLoading === 'scale' ? <Loader2 className="h-4 w-4 animate-spin" /> : '确认'}
               </Button>
@@ -87,16 +87,16 @@ export function ActionModals({
       {modal?.kind === 'delete' && (
         <ModalShell title="删除 Deployment" onClose={onClose}>
           <div className="space-y-3">
-            <div className="flex items-center gap-2 text-red-400">
+            <div className="flex items-center gap-2 dg-text-red">
               <AlertTriangle className="h-5 w-5" />
               <span className="font-semibold">此操作不可撤销</span>
             </div>
-            <p className="text-sm text-slate-400">
-              确认删除 Deployment <code className="text-slate-200 font-mono">{namespace}/{deploymentName}</code>？
+            <p className="text-sm dg-text-secondary">
+              确认删除 Deployment <code className="text-[var(--dg-text-primary)] font-mono">{namespace}/{deploymentName}</code>？
               其管理的所有 Pod 将被一并回收。
             </p>
             <div className="flex justify-end gap-2 pt-2">
-              <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onClose}>取消</Button>
+              <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onClose}>取消</Button>
               <Button variant="destructive" disabled={actionLoading === 'delete'} onClick={onDelete}>
                 {actionLoading === 'delete' ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Trash2 className="h-4 w-4 mr-1" />}
                 确认删除
diff --git a/frontend/src/components/kubernetes/deployment-workload/EditModeContainer.tsx b/frontend/src/components/kubernetes/deployment-workload/EditModeContainer.tsx
index 8ceeb44..e340d2e 100644
--- a/frontend/src/components/kubernetes/deployment-workload/EditModeContainer.tsx
+++ b/frontend/src/components/kubernetes/deployment-workload/EditModeContainer.tsx
@@ -53,7 +53,7 @@ export function EditModeContainer({ clusterCode, namespace, deploymentName, mani
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-1 border-b border-slate-800 pb-px overflow-x-auto">
+      <div className="flex items-center gap-1 border-b border-[var(--dg-border)] pb-px overflow-x-auto">
         {tabs.map((tab) => {
           const active = activeTab === tab.key;
           const Icon = tab.icon;
@@ -62,7 +62,7 @@ export function EditModeContainer({ clusterCode, namespace, deploymentName, mani
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}
               className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${
-                active ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-slate-200'
+                active ? 'border-blue-500 dg-text-blue' : 'border-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'
               }`}
             >
               <Icon className="h-3.5 w-3.5" />
diff --git a/frontend/src/components/kubernetes/deployment-workload/ModalShell.tsx b/frontend/src/components/kubernetes/deployment-workload/ModalShell.tsx
index 8257cff..d82b971 100644
--- a/frontend/src/components/kubernetes/deployment-workload/ModalShell.tsx
+++ b/frontend/src/components/kubernetes/deployment-workload/ModalShell.tsx
@@ -17,12 +17,12 @@ export function ModalShell({ title, children, onClose, size = 'default' }: Modal
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
       <div
-        className={`bg-slate-900 border border-slate-700 rounded-xl ${widthClass} max-w-[92vw] max-h-[85vh] flex flex-col shadow-2xl`}
+        className={`bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl ${widthClass} max-w-[92vw] max-h-[85vh] flex flex-col shadow-2xl`}
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-center justify-between gap-3 px-6 pt-6 pb-4 shrink-0">
-          <h2 className="text-base font-bold text-slate-100 truncate min-w-0" title={title}>{title}</h2>
-          <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
+          <h2 className="text-base font-bold text-[var(--dg-text-primary)] truncate min-w-0" title={title}>{title}</h2>
+          <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button>
         </div>
         <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-6">{children}</div>
       </div>
diff --git a/frontend/src/components/kubernetes/deployment-workload/PodLogsModal.tsx b/frontend/src/components/kubernetes/deployment-workload/PodLogsModal.tsx
index e8a1ce6..90b0d61 100644
--- a/frontend/src/components/kubernetes/deployment-workload/PodLogsModal.tsx
+++ b/frontend/src/components/kubernetes/deployment-workload/PodLogsModal.tsx
@@ -63,35 +63,35 @@ export function PodLogsModal({ clusterCode, namespace, podName, containers, onCl
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
-      <div className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between p-3 border-b border-slate-700 gap-3 shrink-0">
+      <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center justify-between p-3 border-b border-[var(--dg-border)] gap-3 shrink-0">
           <div className="flex items-center gap-2 min-w-0 flex-1">
-            <FileText className="h-4 w-4 shrink-0 text-blue-400" />
-            <span className="text-sm font-semibold text-slate-200 truncate" title={podName}>{podName}</span>
-            {container && <Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px] shrink-0">{container}</Badge>}
+            <FileText className="h-4 w-4 shrink-0 dg-text-blue" />
+            <span className="text-sm font-semibold text-[var(--dg-text-primary)] truncate" title={podName}>{podName}</span>
+            {container && <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px] shrink-0">{container}</Badge>}
           </div>
           <div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
             {containers.length > 0 && (
               <select value={container} onChange={e => setContainer(e.target.value)}
-                className="bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 py-1">
+                className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 py-1">
                 {containers.map(c => <option key={c} value={c}>{c}</option>)}
               </select>
             )}
-            <span className="text-[11px] text-slate-500">最近</span>
+            <span className="text-[11px] dg-text-muted">最近</span>
             <Input type="number" value={tail} onChange={e => setTail(Number(e.target.value) || 200)}
-              className="w-16 h-7 bg-slate-800 border-slate-700 text-slate-200 text-xs" />
-            <span className="text-[11px] text-slate-500">行</span>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={loadLogs} disabled={loading}>
+              className="w-16 h-7 dg-input text-xs" />
+            <span className="text-[11px] dg-text-muted">行</span>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={loadLogs} disabled={loading}>
               {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
             </Button>
-            <Button size="sm" variant="outline" className="h-7 border-slate-700 text-emerald-400 text-xs" onClick={startStream} disabled={streaming}>
+            <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] dg-text-green text-xs" onClick={startStream} disabled={streaming}>
               {streaming ? '流中...' : '实时流'}
             </Button>
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
+            <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button>
           </div>
         </div>
         <div className="flex-1 overflow-auto p-3">
-          <pre className="bg-slate-950 rounded p-3 text-xs text-slate-300 font-mono whitespace-pre-wrap max-h-[60vh] overflow-auto">
+          <pre className="bg-[var(--dg-bg-primary)] rounded p-3 text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap max-h-[60vh] overflow-auto">
             {logs || '无日志内容'}
           </pre>
         </div>
diff --git a/frontend/src/components/kubernetes/deployment-workload/UpdateImageModal.tsx b/frontend/src/components/kubernetes/deployment-workload/UpdateImageModal.tsx
index 24d8388..4ace3aa 100644
--- a/frontend/src/components/kubernetes/deployment-workload/UpdateImageModal.tsx
+++ b/frontend/src/components/kubernetes/deployment-workload/UpdateImageModal.tsx
@@ -49,34 +49,34 @@ export function UpdateImageModal({
     <ModalShell title="调整镜像版本" onClose={onClose} size="xl">
       <div className="space-y-5">
         {/* 当前镜像：只读展示完整地址与 Tag // Logan.Li */}
-        <div className="rounded-lg border border-slate-700/80 bg-slate-800/40 p-4 space-y-3">
-          <p className="text-xs font-medium text-slate-400">当前镜像</p>
+        <div className="rounded-lg border border-[var(--dg-border)]/80 bg-[var(--dg-bg-tertiary)]/40 p-4 space-y-3">
+          <p className="text-xs font-medium dg-text-secondary">当前镜像</p>
           <div className="grid grid-cols-[1fr_180px] gap-3">
             <div>
-              <Label className="text-slate-500 text-xs">镜像地址</Label>
+              <Label className="dg-text-muted text-xs">镜像地址</Label>
               <p
-                className="mt-1.5 text-sm text-slate-200 font-mono break-all leading-relaxed bg-slate-900/60 rounded-md px-3 py-2.5 min-h-[42px]"
+                className="mt-1.5 text-sm text-[var(--dg-text-primary)] font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]"
                 title={current.repository || '-'}
               >
                 {current.repository || '-'}
               </p>
             </div>
             <div>
-              <Label className="text-slate-500 text-xs">当前 Tag</Label>
+              <Label className="dg-text-muted text-xs">当前 Tag</Label>
               <p
-                className="mt-1.5 text-sm text-cyan-300 font-mono break-all leading-relaxed bg-slate-900/60 rounded-md px-3 py-2.5 min-h-[42px]"
+                className="mt-1.5 text-sm text-cyan-300 font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]"
                 title={current.tag || '-'}
               >
                 {current.tag || '-'}
               </p>
             </div>
           </div>
-          <p className="text-[11px] text-slate-500 font-mono break-all" title={currentImage}>
-            完整引用：<span className="text-slate-400">{currentImage || '-'}</span>
+          <p className="text-[11px] dg-text-muted font-mono break-all" title={currentImage}>
+            完整引用：<span className="dg-text-secondary">{currentImage || '-'}</span>
           </p>
         </div>
 
-        <div className="flex items-center justify-center text-slate-600">
+        <div className="flex items-center justify-center dg-text-muted">
           <ArrowRight className="h-4 w-4" />
         </div>
 
@@ -85,7 +85,7 @@ export function UpdateImageModal({
           <p className="text-xs font-medium text-blue-300/90">新镜像</p>
           <div className="grid grid-cols-[1fr_180px] gap-3">
             <div>
-              <Label className="text-slate-400 text-xs">镜像地址</Label>
+              <Label className="dg-text-secondary text-xs">镜像地址</Label>
               <Input
                 value={newRepo}
                 onChange={e => {
@@ -94,11 +94,11 @@ export function UpdateImageModal({
                   syncImage(v, newTag);
                 }}
                 placeholder="harbor.example.com/project/app"
-                className="mt-1.5 h-10 bg-slate-800 border-slate-700 text-slate-200 text-sm font-mono"
+                className="mt-1.5 h-10 dg-input text-sm font-mono"
               />
             </div>
             <div>
-              <Label className="text-slate-400 text-xs">新版本 Tag</Label>
+              <Label className="dg-text-secondary text-xs">新版本 Tag</Label>
               <Input
                 value={newTag}
                 onChange={e => {
@@ -107,37 +107,37 @@ export function UpdateImageModal({
                   syncImage(newRepo, v);
                 }}
                 placeholder="v2.0.0"
-                className="mt-1.5 h-10 bg-slate-800 border-slate-700 text-cyan-200 text-sm font-mono"
+                className="mt-1.5 h-10 dg-input text-cyan-200 text-sm font-mono"
               />
             </div>
           </div>
 
           <div className="flex flex-wrap items-center gap-2 text-xs">
-            <span className="text-slate-500">Tag 变更：</span>
-            <code className="px-2 py-0.5 rounded bg-slate-800 text-slate-400 font-mono">{current.tag}</code>
-            <ArrowRight className="h-3 w-3 text-slate-600" />
+            <span className="dg-text-muted">Tag 变更：</span>
+            <code className="px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] dg-text-secondary font-mono">{current.tag}</code>
+            <ArrowRight className="h-3 w-3 dg-text-muted" />
             <code
               className={`px-2 py-0.5 rounded font-mono ${
-                tagChanged ? 'bg-cyan-500/15 text-cyan-300' : 'bg-slate-800 text-slate-400'
+                tagChanged ? 'bg-cyan-500/15 text-cyan-300' : 'bg-[var(--dg-bg-tertiary)] dg-text-secondary'
               }`}
             >
               {newTag.trim() || '-'}
             </code>
             {!tagChanged && !repoChanged && (
-              <span className="text-slate-600">（未修改）</span>
+              <span className="dg-text-muted">（未修改）</span>
             )}
             {repoChanged && !tagChanged && (
-              <span className="text-amber-400/80">地址已变更</span>
+              <span className="dg-text-yellow/80">地址已变更</span>
             )}
           </div>
 
-          <p className="text-[11px] text-slate-500 font-mono break-all">
-            更新预览：<span className="text-slate-300">{previewImage || '-'}</span>
+          <p className="text-[11px] dg-text-muted font-mono break-all">
+            更新预览：<span className="text-[var(--dg-text-secondary)]">{previewImage || '-'}</span>
           </p>
         </div>
 
         <div className="flex justify-end gap-2 pt-1">
-          <Button variant="outline" className="border-slate-700 text-slate-400" onClick={onClose}>
+          <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onClose}>
             取消
           </Button>
           <Button
diff --git a/frontend/src/components/kubernetes/topology-helpers.tsx b/frontend/src/components/kubernetes/topology-helpers.tsx
index c512fbb..691d4fb 100644
--- a/frontend/src/components/kubernetes/topology-helpers.tsx
+++ b/frontend/src/components/kubernetes/topology-helpers.tsx
@@ -46,16 +46,16 @@ export function getNodeIcon(type: string, className = 'h-5 w-5') {
 // 获取节点颜色样式
 export function getNodeColor(type: string) {
   switch (type) {
-    case 'server': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
-    case 'loadbalancer': return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
-    case 'cluster': return 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30';
+    case 'server': return 'bg-blue-500/20 dg-text-blue border-blue-500/30';
+    case 'loadbalancer': return 'bg-purple-500/20 dg-text-purple border-purple-500/30';
+    case 'cluster': return 'bg-cyan-500/20 dg-text-cyan border-cyan-500/30';
     case 'app': return 'bg-rose-500/20 text-rose-400 border-rose-500/30';
-    case 'service': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30';
+    case 'service': return 'bg-emerald-500/20 dg-text-green border-emerald-500/30';
     case 'pod': return 'bg-teal-500/20 text-teal-400 border-teal-500/30';
-    case 'database': return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
-    case 'external': return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
-    case 'custom': return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
-    default: return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
+    case 'database': return 'bg-amber-500/20 dg-text-yellow border-amber-500/30';
+    case 'external': return 'bg-orange-500/20 dg-text-orange border-orange-500/30';
+    case 'custom': return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
+    default: return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
   }
 }
 
diff --git a/frontend/src/components/layout/ContentPanel.tsx b/frontend/src/components/layout/ContentPanel.tsx
new file mode 100644
index 0000000..4392fcc
--- /dev/null
+++ b/frontend/src/components/layout/ContentPanel.tsx
@@ -0,0 +1,30 @@
+// 列表/表格内容面板 — 统一卡片容器 + 可选工具栏槽 // Logan.Li
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ContentPanelProps {
+  toolbar?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  noPadding?: boolean;
+}
+
+export function ContentPanel({
+  toolbar,
+  children,
+  className,
+  bodyClassName,
+  noPadding,
+}: ContentPanelProps) {
+  return (
+    <div className={cn('dg-content-panel', className)}>
+      {toolbar && (
+        <div className="dg-content-panel-toolbar">{toolbar}</div>
+      )}
+      <div className={cn(!noPadding && 'dg-content-panel-body', bodyClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/ErrorBoundary.tsx b/frontend/src/components/layout/ErrorBoundary.tsx
index 368f0b6..d407540 100644
--- a/frontend/src/components/layout/ErrorBoundary.tsx
+++ b/frontend/src/components/layout/ErrorBoundary.tsx
@@ -65,7 +65,7 @@ export class ErrorBoundary extends Component<Props, State> {
           <div className="dg-card max-w-lg w-full p-8 text-center space-y-6">
             {/* Error Icon */}
             <div className="mx-auto w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center">
-              <AlertTriangle className="h-8 w-8 text-red-400" />
+              <AlertTriangle className="h-8 w-8 dg-text-red" />
             </div>
 
             {/* Title */}
@@ -87,7 +87,7 @@ export class ErrorBoundary extends Component<Props, State> {
                     查看错误详情
                   </summary>
                   <div className="mt-2 p-3 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] overflow-auto max-h-48">
-                    <code className="text-xs text-red-400 font-mono block whitespace-pre-wrap">
+                    <code className="text-xs dg-text-red font-mono block whitespace-pre-wrap">
                       {this.state.error.name}: {this.state.error.message}
                     </code>
                     {this.state.errorInfo && (
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 08c427a..492b8f7 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -28,7 +28,8 @@ import {
   Languages,
 } from 'lucide-react';
 import { formatDistanceToNow } from '@/lib/utils';
-import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemePicker } from '@/components/layout/ThemePicker';
 import { SUPPORTED_LANGUAGES, type AppLanguage } from '@/i18n';
 
 // Keyboard shortcut handler — Cmd/Ctrl+B 切换侧边栏
@@ -65,22 +66,23 @@ export function Header() {
   const getNotificationIcon = useCallback((type: string) => {
     switch (type) {
       case 'error':
-        return <AlertTriangle className="h-4 w-4 text-red-500" />;
+        return <AlertTriangle className="h-4 w-4 dg-text-red" />;
       case 'warning':
-        return <AlertTriangle className="h-4 w-4 text-amber-500" />;
+        return <AlertTriangle className="h-4 w-4 dg-text-yellow" />;
       case 'success':
-        return <CheckCircle className="h-4 w-4 text-emerald-500" />;
+        return <CheckCircle className="h-4 w-4 dg-text-green" />;
       default:
-        return <Info className="h-4 w-4 text-blue-500" />;
+        return <Info className="h-4 w-4 dg-text-blue" />;
     }
   }, []);
 
   return (
     <header
       className={cn(
-        'fixed top-0 right-0 z-30 h-[var(--header-height)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur-md',
-        'border-b border-[var(--dg-border)] transition-[margin] duration-300 ease-in-out',
-        'supports-[backdrop-filter]:bg-[var(--dg-bg-secondary)]/75',
+        'fixed top-0 right-0 z-30 h-[var(--layout-header-height)]',
+        'bg-[var(--surface-raised)]/95 backdrop-blur-md',
+        'border-b border-[var(--border-default)] transition-[margin] duration-300 ease-in-out',
+        'supports-[backdrop-filter]:bg-[var(--surface-raised)]/75',
       )}
       style={{ marginLeft: 'var(--sidebar-width)', left: 0 }}
     >
@@ -118,38 +120,8 @@ export function Header() {
               className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
               style={{ boxShadow: 'var(--shadow-dropdown)' }}
             >
-              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-              {THEME_OPTIONS.map((option) => (
-                <DropdownMenuItem
-                  key={option.id}
-                  className={cn(
-                    'flex items-center gap-2.5 cursor-pointer transition-colors',
-                    'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
-                    theme === option.id
-                      ? 'text-[var(--dg-text-primary)]'
-                      : 'text-[var(--dg-text-secondary)]',
-                  )}
-                  onClick={() => setTheme(option.id)}
-                >
-                  <span
-                    className="w-3.5 h-3.5 rounded-full shrink-0 ring-2"
-                    style={{
-                      backgroundColor: option.primaryColor,
-                      boxShadow: '0 0 0 2px var(--dg-bg-primary)',
-                    }}
-                  />
-                  <div className="flex-1 min-w-0">
-                    <span className="text-sm font-medium">{option.name}</span>
-                    <span className="block text-xs text-[var(--dg-text-muted)] truncate">
-                      {option.description}
-                    </span>
-                  </div>
-                  {theme === option.id && (
-                    <Check className="h-4 w-4 text-[var(--dg-blue)] shrink-0" />
-                  )}
-                </DropdownMenuItem>
-              ))}
+              <DropdownMenuLabel className="text-[var(--text-secondary)]">{t('header.themeSwitch')}</DropdownMenuLabel>
+              <ThemePicker value={theme} onChange={setTheme} />
             </DropdownMenuContent>
           </DropdownMenu>
 
@@ -304,7 +276,7 @@ export function Header() {
                 variant="ghost"
                 className="h-8 gap-2 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
               >
-                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-xs font-bold">
+                <div className="w-7 h-7 rounded-full bg-[var(--brand)] flex items-center justify-center text-white text-xs font-bold">
                   {displayName.charAt(0).toUpperCase()}
                 </div>
                 <span className="hidden md:inline text-sm max-w-[100px] truncate">
@@ -344,7 +316,7 @@ export function Header() {
               </DropdownMenuItem>
               <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
               <DropdownMenuItem
-                className="text-red-400 focus:bg-red-500/10 focus:text-red-400 cursor-pointer"
+                className="dg-text-red focus:bg-red-500/10 focus:dg-text-red cursor-pointer"
                 onClick={handleLogout}
               >
                 <LogOut className="h-4 w-4 mr-2.5" />
diff --git a/frontend/src/components/layout/MainLayout.tsx b/frontend/src/components/layout/MainLayout.tsx
index c235b95..519a847 100644
--- a/frontend/src/components/layout/MainLayout.tsx
+++ b/frontend/src/components/layout/MainLayout.tsx
@@ -9,15 +9,8 @@ import { authApi } from '@/api';
 import type { JsonData } from '@/types/common';
 
 /**
- * MainLayout - 优化后的主布局组件
- * 
- * 优化点：
- * 1. 使用 CSS 变量 + Tailwind 类替代硬编码的 style 属性
- * 2. sidebar 宽度通过 CSS 变量管理，统一协调
- * 3. 添加 Breadcrumb 面包屑导航
- * 4. 布局过渡动画平滑
- * 5. 支持响应式布局
- * 6. F3: 页面刷新后自动拉取当前用户权限（RBAC 按钮级控制）
+ * MainLayout — 统一应用布局壳
+ * 侧栏 + 顶栏 + 面包屑 + 内容区，间距由 --layout-* 令牌驱动 // Logan.Li
  */
 export function MainLayout() {
   const { sidebarCollapsed } = useThemeStore();
@@ -25,8 +18,6 @@ export function MainLayout() {
   const permissions = useUserStore((s) => s.permissions);
   const setPermissions = useUserStore((s) => s.setPermissions);
 
-  // 页面刷新后 zustand persist 会恢复 token/user，但 permissions 可能丢失或过期
-  // 在 MainLayout 挂载时如果 permissions 为 null 则拉取一次
   useEffect(() => {
     if (!token || permissions !== null) return;
     let cancelled = false;
@@ -37,7 +28,6 @@ export function MainLayout() {
         setPermissions(Array.isArray(perms) ? perms : []);
       })
       .catch(() => {
-        // 拉取失败不阻塞页面，权限保持 null（usePermission 默认放行）
         if (!cancelled) setPermissions([]);
       });
     return () => { cancelled = true; };
@@ -46,33 +36,29 @@ export function MainLayout() {
 
   return (
     <div
-      className="min-h-screen bg-[var(--dg-bg-primary)] transition-colors duration-300"
+      className="dg-app-shell"
       style={{
-        '--sidebar-width': sidebarCollapsed ? '4rem' : '16rem',
-        '--header-height': '3.5rem',
+        '--sidebar-width': sidebarCollapsed
+          ? 'var(--layout-sidebar-collapsed)'
+          : 'var(--layout-sidebar-expanded)',
       } as React.CSSProperties}
     >
       <Sidebar />
       <div
-        className={cn(
-          'flex flex-col min-h-screen transition-[margin] duration-300 ease-in-out',
-        )}
+        className={cn('flex flex-col min-h-screen transition-[margin] duration-300 ease-in-out')}
         style={{ marginLeft: 'var(--sidebar-width)' }}
       >
         <Header />
-        <main className="flex-1 pt-[var(--header-height)]">
-          {/* Breadcrumb Navigation */}
-          <div className="px-6 pt-4 pb-0">
+        <main className="dg-app-main">
+          <div className="dg-app-breadcrumb">
             <Breadcrumb />
           </div>
-          {/* Page Content */}
-          <div className="p-6">
+          <div className="dg-app-content">
             <Outlet />
           </div>
         </main>
-        {/* Footer */}
-        <footer className="px-6 py-4 border-t border-[var(--dg-border)] mt-auto">
-          <div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)]">
+        <footer className="dg-app-footer">
+          <div className="flex items-center justify-between text-xs dg-text-muted">
             <span>AIOps 智能运维平台</span>
             <span>v1.0.0</span>
           </div>
@@ -80,4 +66,4 @@ export function MainLayout() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/PageEmpty.tsx b/frontend/src/components/layout/PageEmpty.tsx
new file mode 100644
index 0000000..900fc2c
--- /dev/null
+++ b/frontend/src/components/layout/PageEmpty.tsx
@@ -0,0 +1,28 @@
+// 页面级空状态 // Logan.Li
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface PageEmptyProps {
+  icon?: ReactNode;
+  title?: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function PageEmpty({
+  icon,
+  title = '暂无数据',
+  description,
+  action,
+  className,
+}: PageEmptyProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-16 text-center', className)}>
+      {icon && <div className="mb-3 opacity-40 text-[var(--text-tertiary)]">{icon}</div>}
+      <p className="text-sm font-medium text-[var(--text-primary)]">{title}</p>
+      {description && <p className="text-sm dg-text-muted mt-1 max-w-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/PageLoading.tsx b/frontend/src/components/layout/PageLoading.tsx
new file mode 100644
index 0000000..a102b03
--- /dev/null
+++ b/frontend/src/components/layout/PageLoading.tsx
@@ -0,0 +1,24 @@
+// 页面级加载态 // Logan.Li
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface PageLoadingProps {
+  label?: string;
+  className?: string;
+  compact?: boolean;
+}
+
+export function PageLoading({ label = '加载中...', className, compact }: PageLoadingProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center dg-text-muted',
+        compact ? 'py-12' : 'py-20',
+        className,
+      )}
+    >
+      <Loader2 className="h-6 w-6 animate-spin mb-2" />
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/PageShell.tsx b/frontend/src/components/layout/PageShell.tsx
new file mode 100644
index 0000000..498611a
--- /dev/null
+++ b/frontend/src/components/layout/PageShell.tsx
@@ -0,0 +1,106 @@
+// 统一页面骨架 — 标题区 / 指标条 / 工具栏 / Tab / 内容区 // Logan.Li
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import { PageTabs, type PageTabItem } from './PageTabs';
+import { PageLoading } from './PageLoading';
+
+export type PageShellVariant = 'default' | 'list' | 'config' | 'workspace';
+
+const maxWidthClass: Record<string, string> = {
+  full: 'w-full',
+  lg: 'max-w-6xl mx-auto w-full',
+  xl: 'max-w-7xl mx-auto w-full',
+  '3xl': 'max-w-3xl mx-auto w-full',
+};
+
+export interface PageShellProps {
+  title: string;
+  subtitle?: ReactNode;
+  /** 标题左侧图标（建议单色 lucide，勿用渐变底） */
+  icon?: ReactNode;
+  actions?: ReactNode;
+  /** 标题下方指标条（StatStrip 等） */
+  metrics?: ReactNode;
+  /** 筛选 / 搜索工具栏，与标题操作区分开 */
+  toolbar?: ReactNode;
+  tabs?: PageTabItem[];
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  variant?: PageShellVariant;
+  maxWidth?: keyof typeof maxWidthClass;
+  loading?: boolean;
+  loadingLabel?: string;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+export function PageShell({
+  title,
+  subtitle,
+  icon,
+  actions,
+  metrics,
+  toolbar,
+  tabs,
+  activeTab,
+  onTabChange,
+  variant = 'default',
+  maxWidth = 'full',
+  loading = false,
+  loadingLabel,
+  children,
+  className,
+  contentClassName,
+}: PageShellProps) {
+  const width = maxWidthClass[maxWidth] ?? maxWidthClass.full;
+  const isConfig = variant === 'config' || maxWidth === '3xl';
+
+  return (
+    <div
+      className={cn(
+        'dg-page',
+        width,
+        variant === 'workspace' && 'flex flex-col min-h-0',
+        className,
+      )}
+    >
+      <header className="dg-page-header">
+        <div className="flex items-start gap-3 min-w-0">
+          {icon && (
+            <div className="dg-icon-box">{icon}</div>
+          )}
+          <div className="min-w-0">
+            <h1 className="dg-page-title truncate">{title}</h1>
+            {subtitle != null && subtitle !== '' && (
+              <p className="dg-page-subtitle">{subtitle}</p>
+            )}
+          </div>
+        </div>
+        {actions && <div className="dg-page-actions shrink-0">{actions}</div>}
+      </header>
+
+      {metrics && <section className="animate-fade-in-delay-1">{metrics}</section>}
+
+      {tabs && tabs.length > 0 && activeTab && onTabChange && (
+        <PageTabs items={tabs} value={activeTab} onChange={onTabChange} />
+      )}
+
+      {toolbar && (
+        <div className="dg-page-toolbar animate-fade-in-delay-1">{toolbar}</div>
+      )}
+
+      <section
+        className={cn(
+          'animate-fade-in-delay-2',
+          variant === 'workspace' && 'flex-1 min-h-0 flex flex-col',
+          isConfig && 'space-y-4',
+          variant === 'list' && 'space-y-0',
+          contentClassName,
+        )}
+      >
+        {loading ? <PageLoading label={loadingLabel} /> : children}
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/PageTabs.tsx b/frontend/src/components/layout/PageTabs.tsx
new file mode 100644
index 0000000..6b5356d
--- /dev/null
+++ b/frontend/src/components/layout/PageTabs.tsx
@@ -0,0 +1,48 @@
+// 页面级 Tab 导航 — 与内容区筛选分离 // Logan.Li
+import { cn } from '@/lib/utils';
+
+export interface PageTabItem {
+  id: string;
+  label: string;
+  badge?: number | string;
+}
+
+interface PageTabsProps {
+  items: PageTabItem[];
+  value: string;
+  onChange: (id: string) => void;
+  className?: string;
+}
+
+export function PageTabs({ items, value, onChange, className }: PageTabsProps) {
+  return (
+    <nav
+      className={cn('dg-page-tabs flex gap-0.5 border-b border-[var(--border-default)]', className)}
+      role="tablist"
+    >
+      {items.map((tab) => {
+        const active = value === tab.id;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(tab.id)}
+            className={cn(
+              'dg-page-tab px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
+              active
+                ? 'text-[var(--brand)] border-[var(--brand)]'
+                : 'dg-text-secondary border-transparent hover:text-[var(--text-primary)]',
+            )}
+          >
+            {tab.label}
+            {tab.badge != null && (
+              <span className="ml-1.5 text-xs dg-text-muted">({tab.badge})</span>
+            )}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index c658560..0b935d5 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -380,8 +380,8 @@ export function Sidebar() {
       {/* Logo Area */}
       <div className="flex items-center h-14 px-3 border-b border-[var(--dg-border)] flex-shrink-0">
         <div className={cn('flex items-center gap-2.5 flex-1 min-w-0', sidebarCollapsed && 'justify-center')}>
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-cyan)] flex items-center justify-center flex-shrink-0 shadow-lg shadow-[var(--dg-blue)]/20">
-            <Cloud className="h-5 w-5 text-white" />
+          <div className="dg-icon-box w-8 h-8 rounded-lg flex-shrink-0">
+            <Cloud className="h-5 w-5" />
           </div>
           {!sidebarCollapsed && (
             <span className="font-bold text-[var(--dg-text-primary)] text-sm tracking-tight truncate">
diff --git a/frontend/src/components/layout/ThemePicker.tsx b/frontend/src/components/layout/ThemePicker.tsx
new file mode 100644
index 0000000..bedf400
--- /dev/null
+++ b/frontend/src/components/layout/ThemePicker.tsx
@@ -0,0 +1,61 @@
+// 全局主题选择器 — Header / Login 共用，分组展示主流与开发者主题 // Logan.Li
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { THEME_GROUPS, type ThemePreference } from '@/utils/theme';
+
+interface ThemePickerProps {
+  value: ThemePreference;
+  onChange: (theme: ThemePreference) => void;
+}
+
+export function ThemePicker({ value, onChange }: ThemePickerProps) {
+  return (
+    <>
+      {THEME_GROUPS.map((group, gi) => (
+        <div key={group.label}>
+          {gi > 0 && <DropdownMenuSeparator className="bg-[var(--border-default)]" />}
+          <DropdownMenuLabel className="text-xs dg-text-muted font-normal py-1">
+            {group.label}
+          </DropdownMenuLabel>
+          {group.options.map((option) => (
+            <DropdownMenuItem
+              key={option.id}
+              className={cn(
+                'flex items-center gap-2.5 cursor-pointer transition-colors',
+                'focus:bg-[var(--surface-hover)] focus:text-[var(--text-primary)]',
+                value === option.id
+                  ? 'text-[var(--text-primary)]'
+                  : 'dg-text-secondary',
+              )}
+              onClick={() => onChange(option.id)}
+            >
+              <span
+                className="w-3.5 h-3.5 rounded-full shrink-0"
+                style={{
+                  background: option.primaryColor.startsWith('linear')
+                    ? option.primaryColor
+                    : option.primaryColor,
+                  boxShadow: '0 0 0 2px var(--surface-canvas)',
+                }}
+              />
+              <div className="flex-1 min-w-0">
+                <span className="text-sm font-medium">{option.name}</span>
+                <span className="block text-xs dg-text-muted truncate">
+                  {option.description}
+                </span>
+              </div>
+              {value === option.id && (
+                <Check className="h-4 w-4 text-[var(--brand)] shrink-0" />
+              )}
+            </DropdownMenuItem>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/monitor/AlertChannelDialog.tsx b/frontend/src/components/monitor/AlertChannelDialog.tsx
index fb52cab..e551356 100644
--- a/frontend/src/components/monitor/AlertChannelDialog.tsx
+++ b/frontend/src/components/monitor/AlertChannelDialog.tsx
@@ -118,10 +118,10 @@ export function AlertChannelDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-slate-900 border-slate-700 text-slate-100 max-w-2xl">
+      <DialogContent className="dg-input max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-slate-100">通知渠道配置</DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogTitle className="text-[var(--dg-text-primary)]">通知渠道配置</DialogTitle>
+          <DialogDescription className="dg-text-muted">
             管理告警通知渠道（钉钉/企业微信/邮件/短信/Webhook），配置后可在告警规则中引用
           </DialogDescription>
         </DialogHeader>
@@ -130,11 +130,11 @@ export function AlertChannelDialog({
           {/* 渠道列表 */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <Label className="text-slate-300 text-sm">已配置渠道</Label>
+              <Label className="text-[var(--dg-text-secondary)] text-sm">已配置渠道</Label>
               <Button
                 size="sm"
                 variant="outline"
-                className="h-7 border-slate-700 text-slate-300 hover:bg-slate-800 text-xs"
+                className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] text-xs"
                 onClick={resetChannelForm}
               >
                 <Plus className="h-3 w-3 mr-1" />
@@ -142,7 +142,7 @@ export function AlertChannelDialog({
               </Button>
             </div>
             {notifyChannels.length === 0 ? (
-              <div className="text-center py-8 text-sm text-slate-600 border border-dashed border-slate-800 rounded-lg">
+              <div className="text-center py-8 text-sm dg-text-muted border border-dashed border-[var(--dg-border)] rounded-lg">
                 暂无通知渠道，请在右侧添加
               </div>
             ) : (
@@ -153,14 +153,14 @@ export function AlertChannelDialog({
                     className={`p-3 rounded-lg border cursor-pointer transition-colors ${
                       editingChannel && editingChannel.id === ch.id
                         ? 'border-blue-500/50 bg-blue-500/5'
-                        : 'border-slate-800 bg-slate-800/30 hover:border-slate-700'
+                        : 'border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/30 hover:border-[var(--dg-border)]'
                     }`}
                     onClick={() => openEditChannel(ch)}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2 min-w-0">
-                        <span className="text-sm text-slate-200 truncate">{ch.name}</span>
-                        <Badge variant="outline" className="border-slate-600 text-slate-400 text-[10px] py-0">
+                        <span className="text-sm text-[var(--dg-text-primary)] truncate">{ch.name}</span>
+                        <Badge variant="outline" className="border-[var(--dg-border-hover)] dg-text-secondary text-[10px] py-0">
                           {getChannelTypeLabel(ch.type)}
                         </Badge>
                       </div>
@@ -173,15 +173,15 @@ export function AlertChannelDialog({
                     </div>
                     <div className="flex items-center justify-between mt-2">
                       {ch.test_status === 'success' ? (
-                        <span className="text-[11px] text-emerald-400">测试通过</span>
+                        <span className="text-[11px] dg-text-green">测试通过</span>
                       ) : (
-                        <span className="text-[11px] text-slate-600">未测试</span>
+                        <span className="text-[11px] dg-text-muted">未测试</span>
                       )}
                       <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                         <Button
                           size="sm"
                           variant="ghost"
-                          className="h-6 px-2 text-slate-400 hover:text-slate-200 hover:bg-slate-700 text-xs"
+                          className="h-6 px-2 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] text-xs"
                           disabled={channelTesting === ch.id}
                           onClick={() => handleTestChannel(ch.id)}
                         >
@@ -190,7 +190,7 @@ export function AlertChannelDialog({
                         <Button
                           size="sm"
                           variant="ghost"
-                          className="h-6 px-2 text-red-400/70 hover:text-red-400 hover:bg-red-500/10 text-xs"
+                          className="h-6 px-2 dg-text-red/70 hover:dg-text-red hover:bg-red-500/10 text-xs"
                           onClick={() => handleDeleteChannel(ch.id)}
                         >
                           <Trash2 className="h-3 w-3" />
@@ -205,24 +205,24 @@ export function AlertChannelDialog({
 
           {/* 渠道表单 */}
           <div className="space-y-4">
-            <Label className="text-slate-300 text-sm">
+            <Label className="text-[var(--dg-text-secondary)] text-sm">
               {editingChannel ? '编辑渠道' : '新建渠道'}
             </Label>
             <div className="space-y-1.5">
-              <Label className="text-slate-400 text-xs">渠道名称 <span className="text-red-400">*</span></Label>
+              <Label className="dg-text-secondary text-xs">渠道名称 <span className="dg-text-red">*</span></Label>
               <Input
                 value={channelForm.name}
                 onChange={(e) => setChannelForm({ ...channelForm, name: e.target.value })}
                 placeholder="如：运维告警群"
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 h-9"
+                className="dg-input h-9"
               />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-400 text-xs">渠道类型</Label>
+              <Label className="dg-text-secondary text-xs">渠道类型</Label>
               <select
                 value={channelForm.type}
                 onChange={(e) => setChannelForm({ ...channelForm, type: e.target.value })}
-                className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
               >
                 {CHANNEL_TYPES.map(({ key, label }) => (
                   <option key={key} value={key}>{label}</option>
@@ -230,13 +230,13 @@ export function AlertChannelDialog({
               </select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-400 text-xs">配置（JSON）</Label>
+              <Label className="dg-text-secondary text-xs">配置（JSON）</Label>
               <Textarea
                 value={channelForm.config}
                 onChange={(e) => setChannelForm({ ...channelForm, config: e.target.value })}
                 placeholder={CHANNEL_TYPES.find((t) => t.key === channelForm.type)?.placeholder || ''}
                 rows={5}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 font-mono text-xs resize-none"
+                className="dg-input font-mono text-xs resize-none"
               />
             </div>
             {editingChannel && (
@@ -246,7 +246,7 @@ export function AlertChannelDialog({
                   onCheckedChange={(v) => setChannelForm({ ...channelForm, enabled: v })}
                   className="data-[state=checked]:bg-emerald-600"
                 />
-                <Label className="text-slate-400 text-xs">启用此渠道</Label>
+                <Label className="dg-text-secondary text-xs">启用此渠道</Label>
               </div>
             )}
           </div>
@@ -255,7 +255,7 @@ export function AlertChannelDialog({
         <DialogFooter>
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300 hover:bg-slate-800"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
             onClick={() => onOpenChange(false)}
           >
             关闭
diff --git a/frontend/src/components/monitor/AlertEventsTab.tsx b/frontend/src/components/monitor/AlertEventsTab.tsx
index 9d73c3b..e5b2f2e 100644
--- a/frontend/src/components/monitor/AlertEventsTab.tsx
+++ b/frontend/src/components/monitor/AlertEventsTab.tsx
@@ -43,21 +43,21 @@ export function AlertEventsTab({
     switch (severity) {
       case 'critical':
         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">
             <AlertTriangle className="h-3 w-3 mr-1" />
             严重
           </Badge>
         );
       case 'warning':
         return (
-          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+          <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
             <AlertTriangle className="h-3 w-3 mr-1" />
             警告
           </Badge>
         );
       case 'info':
         return (
-          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+          <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
             <Bell className="h-3 w-3 mr-1" />
             提示
           </Badge>
@@ -71,13 +71,13 @@ export function AlertEventsTab({
     switch (status) {
       case 'firing':
         return (
-          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10 animate-pulse">
+          <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10 animate-pulse">
             触发中
           </Badge>
         );
       case 'resolved':
         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">
             已恢复
           </Badge>
         );
@@ -100,18 +100,18 @@ export function AlertEventsTab({
       {/* Filters */}
       <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="搜索告警名称或目标..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(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>
         <select
           value={severityFilter}
           onChange={(e) => setSeverityFilter(e.target.value)}
-          className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+          className="h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
         >
           <option value="all">全部级别</option>
           <option value="critical">严重</option>
@@ -121,7 +121,7 @@ export function AlertEventsTab({
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value)}
-          className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+          className="h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
         >
           <option value="all">全部状态</option>
           <option value="firing">触发中</option>
@@ -130,50 +130,50 @@ export function AlertEventsTab({
       </div>
 
       {/* Events Table */}
-      <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)]">
             <Table>
               <TableHeader>
-                <TableRow className="border-slate-800 hover:bg-transparent">
-                  <TableHead className="text-slate-400">级别</TableHead>
-                  <TableHead className="text-slate-400">告警名称</TableHead>
-                  <TableHead className="text-slate-400">状态</TableHead>
-                  <TableHead className="text-slate-400">目标</TableHead>
-                  <TableHead className="text-slate-400">当前值</TableHead>
-                  <TableHead className="text-slate-400">阈值</TableHead>
-                  <TableHead className="text-slate-400">开始时间</TableHead>
-                  <TableHead className="text-slate-400 text-right">操作</TableHead>
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                  <TableHead className="dg-text-secondary">级别</TableHead>
+                  <TableHead className="dg-text-secondary">告警名称</TableHead>
+                  <TableHead className="dg-text-secondary">状态</TableHead>
+                  <TableHead className="dg-text-secondary">目标</TableHead>
+                  <TableHead className="dg-text-secondary">当前值</TableHead>
+                  <TableHead className="dg-text-secondary">阈值</TableHead>
+                  <TableHead className="dg-text-secondary">开始时间</TableHead>
+                  <TableHead className="dg-text-secondary text-right">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {loading ? (
-                  <TableRow className="border-slate-800">
-                    <TableCell colSpan={8} className="text-center text-slate-500 py-8">
+                  <TableRow className="border-[var(--dg-border)]">
+                    <TableCell colSpan={8} className="text-center dg-text-muted py-8">
                       <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
                       加载中...
                     </TableCell>
                   </TableRow>
                 ) : filteredEvents.map((event) => (
-                  <TableRow key={event.id} className="border-slate-800 hover:bg-slate-800/50">
+                  <TableRow key={event.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                     <TableCell>{getSeverityBadge(event.severity)}</TableCell>
                     <TableCell>
-                      <span className="text-sm font-medium text-slate-200">
+                      <span className="text-sm font-medium text-[var(--dg-text-primary)]">
                         {(event.rule && event.rule.name) || event.message}
                       </span>
                     </TableCell>
                     <TableCell>{getStatusBadge(event.status)}</TableCell>
                     <TableCell className="max-w-[160px]">
-                      <span className="text-sm text-slate-300 block truncate" title={event.target}>{event.target}</span>
+                      <span className="text-sm text-[var(--dg-text-secondary)] block truncate" title={event.target}>{event.target}</span>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-slate-300">{typeof event.value === 'number' ? event.value.toFixed(1) : event.value}</span>
+                      <span className="text-sm text-[var(--dg-text-secondary)]">{typeof event.value === 'number' ? event.value.toFixed(1) : event.value}</span>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-slate-500">{event.threshold}</span>
+                      <span className="text-sm dg-text-muted">{event.threshold}</span>
                     </TableCell>
                     <TableCell>
-                      <span className="text-sm text-slate-400">
+                      <span className="text-sm dg-text-secondary">
                         {event.created_at ? new Date(event.created_at).toLocaleString() : '--'}
                       </span>
                     </TableCell>
@@ -183,7 +183,7 @@ export function AlertEventsTab({
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="h-8 text-slate-400 hover:text-emerald-400"
+                            className="h-8 dg-text-secondary hover:dg-text-green"
                             onClick={() => handleAcknowledge(event.id)}
                           >
                             <CheckCircle className="h-4 w-4 mr-1" />
diff --git a/frontend/src/components/monitor/AlertManager.tsx b/frontend/src/components/monitor/AlertManager.tsx
index 840a571..c229384 100644
--- a/frontend/src/components/monitor/AlertManager.tsx
+++ b/frontend/src/components/monitor/AlertManager.tsx
@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Plus, Settings, Bell, AlertTriangle, Clock, CheckCircle } from 'lucide-react';
+import { Plus, Settings, Bell } from 'lucide-react';
 import {
   ResponsiveContainer,
   AreaChart,
@@ -17,6 +16,8 @@ import { AlertEventsTab } from './AlertEventsTab';
 import { AlertRulesTab } from './AlertRulesTab';
 import { AlertRuleDialog } from './AlertRuleDialog';
 import { AlertChannelDialog } from './AlertChannelDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 import type { AlertEventRecord, AlertRuleRecord, AlertChannel } from '@/types';
 
@@ -73,95 +74,51 @@ export function AlertManager() {
     { time: '24:00', critical: 2, warning: 4, info: 7 },
   ];
 
+  const pageTabs = [
+    { id: 'events', label: '告警事件' },
+    { id: 'rules', label: '告警规则' },
+  ];
+
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">监控告警</h1>
-          <p className="text-sm text-slate-500 mt-1">告警规则管理与告警事件处理</p>
-        </div>
-        <div className="flex items-center gap-2">
+    <PageShell
+      variant="list"
+      title="监控告警"
+      subtitle="告警规则管理与告警事件处理"
+      icon={<Bell className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '告警规则', value: rules.length, color: 'blue' },
+            { label: '触发中', value: alerts.filter((e) => e.status === 'firing').length, color: 'red' },
+            { label: '今日告警', value: alerts.length, color: 'amber' },
+            { label: '已恢复', value: alerts.filter((e) => e.status === 'resolved').length, color: 'emerald' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+            className="dg-btn-secondary"
             onClick={() => setChannelDialogOpen(true)}
           >
             <Settings className="h-4 w-4 mr-2" />
             通知配置
           </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={openCreateRule}>
+          <Button className="dg-btn-primary" onClick={openCreateRule}>
             <Plus className="h-4 w-4 mr-2" />
             新建规则
           </Button>
-        </div>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">告警规则</p>
-                <p className="text-2xl font-bold text-slate-100">{rules.length}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
-                <Bell className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">触发中</p>
-                <p className="text-2xl font-bold text-red-400">
-                  {alerts.filter((e) => e.status === 'firing').length}
-                </p>
-              </div>
-              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
-                <AlertTriangle className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">今日告警</p>
-                <p className="text-2xl font-bold text-amber-400">{alerts.length}</p>
-              </div>
-              <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
-                <Clock className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-900 border-slate-800">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-slate-500">已恢复</p>
-                <p className="text-2xl font-bold text-emerald-400">
-                  {alerts.filter((e) => e.status === 'resolved').length}
-                </p>
-              </div>
-              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
-                <CheckCircle className="h-5 w-5" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Alert Trend Chart */}
-      <Card className="bg-slate-900 border-slate-800">
+        </>
+      )}
+    >
+      <Card className="dg-card">
         <CardHeader className="pb-2">
-          <CardTitle className="text-slate-100">告警趋势</CardTitle>
-          <CardDescription className="text-slate-500">过去24小时告警统计</CardDescription>
+          <CardTitle className="text-[var(--dg-text-primary)]">告警趋势</CardTitle>
+          <CardDescription className="dg-text-muted">过去24小时告警统计</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="h-[200px]">
@@ -210,34 +167,18 @@ export function AlertManager() {
         </CardContent>
       </Card>
 
-      {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="bg-slate-800 border border-slate-700">
-          <TabsTrigger value="events" className="data-[state=active]:bg-slate-700">
-            告警事件
-          </TabsTrigger>
-          <TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">
-            告警规则
-          </TabsTrigger>
+      {activeTab === 'events' && (
+        <AlertEventsTab alerts={alerts} loading={loading} onReload={loadData} />
+      )}
+      {activeTab === 'rules' && (
+        <AlertRulesTab
+          rules={rules}
+          notifyChannels={notifyChannels}
+          onReload={loadData}
+          onEditRule={openEditRule}
+        />
+      )}
 
-        </TabsList>
-
-        <TabsContent value="events">
-          <AlertEventsTab alerts={alerts} loading={loading} onReload={loadData} />
-        </TabsContent>
-
-        <TabsContent value="rules">
-          <AlertRulesTab
-            rules={rules}
-            notifyChannels={notifyChannels}
-            onReload={loadData}
-            onEditRule={openEditRule}
-          />
-        </TabsContent>
-
-      </Tabs>
-
-      {/* Dialogs */}
       <AlertRuleDialog
         open={ruleDialogOpen}
         onOpenChange={setRuleDialogOpen}
@@ -251,6 +192,6 @@ export function AlertManager() {
         notifyChannels={notifyChannels}
         onChannelsChanged={loadData}
       />
-    </div>
+    </PageShell>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/monitor/AlertRuleDialog.tsx b/frontend/src/components/monitor/AlertRuleDialog.tsx
index 1d2851b..e0f478f 100644
--- a/frontend/src/components/monitor/AlertRuleDialog.tsx
+++ b/frontend/src/components/monitor/AlertRuleDialog.tsx
@@ -124,41 +124,41 @@ export function AlertRuleDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-slate-900 border-slate-700 text-slate-100 max-w-lg">
+      <DialogContent className="dg-input max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-slate-100">
+          <DialogTitle className="text-[var(--dg-text-primary)]">
             {editingRule ? '编辑告警规则' : '新建告警规则'}
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             {editingRule ? '修改告警规则的触发条件和通知方式' : '配置监控指标的告警触发条件'}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
           <div className="space-y-1.5">
-            <Label className="text-slate-300">规则名称 <span className="text-red-400">*</span></Label>
+            <Label className="text-[var(--dg-text-secondary)]">规则名称 <span className="dg-text-red">*</span></Label>
             <Input
               value={ruleForm.name}
               onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
               placeholder="如：CPU 使用率告警"
-              className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+              className="dg-input"
             />
           </div>
 
           <div className="space-y-1.5">
-            <Label className="text-slate-300">描述</Label>
+            <Label className="text-[var(--dg-text-secondary)]">描述</Label>
             <Textarea
               value={ruleForm.description}
               onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })}
               placeholder="规则说明"
               rows={2}
-              className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 resize-none"
+              className="dg-input resize-none"
             />
           </div>
 
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
-              <Label className="text-slate-300">规则类型</Label>
+              <Label className="text-[var(--dg-text-secondary)]">规则类型</Label>
               <select
                 value={ruleForm.type}
                 onChange={(e) => {
@@ -166,7 +166,7 @@ export function AlertRuleDialog({
                   const source = type === 'log' ? 'loki' : 'prometheus';
                   setRuleForm({ ...ruleForm, type, source });
                 }}
-                className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
               >
                 <option value="metric">指标监控</option>
                 <option value="log">日志告警</option>
@@ -174,11 +174,11 @@ export function AlertRuleDialog({
               </select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-300">数据源</Label>
+              <Label className="text-[var(--dg-text-secondary)]">数据源</Label>
               <select
                 value={ruleForm.source}
                 onChange={(e) => setRuleForm({ ...ruleForm, source: e.target.value, datasource_id: undefined })}
-                className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
               >
                 {ruleForm.type === 'log' ? (
                   <>
@@ -198,11 +198,11 @@ export function AlertRuleDialog({
 
           {ruleForm.type === 'log' && (
             <div className="space-y-1.5">
-              <Label className="text-slate-300">日志数据源 <span className="text-red-400">*</span></Label>
+              <Label className="text-[var(--dg-text-secondary)]">日志数据源 <span className="dg-text-red">*</span></Label>
               <select
                 value={ruleForm.datasource_id || ''}
                 onChange={(e) => setRuleForm({ ...ruleForm, datasource_id: Number(e.target.value) || undefined })}
-                className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
               >
                 <option value="">请选择数据源</option>
                 {logSources.map((s) => (
@@ -210,20 +210,20 @@ export function AlertRuleDialog({
                 ))}
               </select>
               {logSources.length === 0 && (
-                <p className="text-xs text-amber-400/80">请先前往「日志库」添加 {ruleForm.source === 'loki' ? 'Loki' : 'Elasticsearch'} 数据源</p>
+                <p className="text-xs dg-text-yellow/80">请先前往「日志库」添加 {ruleForm.source === 'loki' ? 'Loki' : 'Elasticsearch'} 数据源</p>
               )}
             </div>
           )}
 
           <div className="space-y-1.5">
-            <Label className="text-slate-300">触发表达式 <span className="text-red-400">*</span></Label>
+            <Label className="text-[var(--dg-text-secondary)]">触发表达式 <span className="dg-text-red">*</span></Label>
             <Input
               value={ruleForm.expression}
               onChange={(e) => setRuleForm({ ...ruleForm, expression: e.target.value })}
               placeholder={ruleForm.type === 'log' ? '{app="api"} |= "error"' : 'cpu_usage > 80'}
-              className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 font-mono text-sm"
+              className="dg-input font-mono text-sm"
             />
-            <p className="text-xs text-slate-600">
+            <p className="text-xs dg-text-muted">
               {ruleForm.type === 'log'
                 ? (ruleForm.source === 'loki' ? 'LogQL 查询或 count_over_time 表达式' : 'Elasticsearch Lucene 查询')
                 : 'PromQL 或指标表达式，例如 cpu_usage > 80'}
@@ -232,11 +232,11 @@ export function AlertRuleDialog({
 
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
-              <Label className="text-slate-300">告警级别</Label>
+              <Label className="text-[var(--dg-text-secondary)]">告警级别</Label>
               <select
                 value={ruleForm.severity}
                 onChange={(e) => setRuleForm({ ...ruleForm, severity: e.target.value })}
-                className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
               >
                 <option value="info">提示</option>
                 <option value="warning">警告</option>
@@ -244,20 +244,20 @@ export function AlertRuleDialog({
               </select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-slate-300">持续时间（秒）</Label>
+              <Label className="text-[var(--dg-text-secondary)]">持续时间（秒）</Label>
               <Input
                 type="number"
                 value={ruleForm.duration}
                 onChange={(e) => setRuleForm({ ...ruleForm, duration: Number(e.target.value) })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200"
+                className="dg-input"
               />
             </div>
           </div>
 
           <div className="space-y-1.5">
-            <Label className="text-slate-300">通知渠道</Label>
+            <Label className="text-[var(--dg-text-secondary)]">通知渠道</Label>
             {notifyChannels.length === 0 ? (
-              <div className="text-xs text-amber-400/80 bg-amber-500/5 border border-amber-500/20 rounded-md px-3 py-2">
+              <div className="text-xs dg-text-yellow/80 bg-amber-500/5 border border-amber-500/20 rounded-md px-3 py-2">
                 暂无已配置的通知渠道，请先在「通知渠道配置」中添加
               </div>
             ) : (
@@ -268,17 +268,17 @@ export function AlertRuleDialog({
                   return (
                     <label
                       key={ch.id}
-                      className="flex items-center gap-2 cursor-pointer select-none text-sm text-slate-300"
+                      className="flex items-center gap-2 cursor-pointer select-none text-sm text-[var(--dg-text-secondary)]"
                     >
                       <Switch
                         checked={checked}
                         onCheckedChange={() => toggleNotifyChannel(String(ch.id))}
                         className="data-[state=checked]:bg-blue-600"
                       />
-                      <Icon className="h-4 w-4 text-slate-400" />
+                      <Icon className="h-4 w-4 dg-text-secondary" />
                       <span>
                         {ch.name}
-                        <span className="text-xs text-slate-500 ml-1">({getChannelTypeLabel(ch.type)})</span>
+                        <span className="text-xs dg-text-muted ml-1">({getChannelTypeLabel(ch.type)})</span>
                       </span>
                     </label>
                   );
@@ -291,7 +291,7 @@ export function AlertRuleDialog({
         <DialogFooter>
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300 hover:bg-slate-800"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"
             onClick={() => onOpenChange(false)}
           >
             取消
diff --git a/frontend/src/components/monitor/AlertRulesTab.tsx b/frontend/src/components/monitor/AlertRulesTab.tsx
index 6c8b234..8c9c433 100644
--- a/frontend/src/components/monitor/AlertRulesTab.tsx
+++ b/frontend/src/components/monitor/AlertRulesTab.tsx
@@ -106,11 +106,11 @@ export function AlertRulesTab({
       {/* 批量操作栏 // Logan.Li */}
       {selectedIds.length > 0 && (
         <div className="flex items-center gap-2 mb-3">
-          <span className="text-sm text-slate-400">已选择 {selectedIds.length} 项</span>
+          <span className="text-sm dg-text-secondary">已选择 {selectedIds.length} 项</span>
           <Button
             variant="outline"
             size="sm"
-            className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+            className="border-red-500/30 dg-text-red hover:bg-red-500/10"
             onClick={handleBatchDelete}
           >
             <Trash2 className="h-4 w-4 mr-2" />
@@ -119,56 +119,56 @@ export function AlertRulesTab({
         </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)]">
             <Table>
               <TableHeader>
-                <TableRow className="border-slate-800 hover:bg-transparent">
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                   <TableHead className="w-12">
                     <Checkbox
                       checked={allSelected}
                       onCheckedChange={toggleSelectAll}
-                      className="border-slate-600"
+                      className="border-[var(--dg-border-hover)]"
                     />
                   </TableHead>
-                  <TableHead className="text-slate-400">规则名称</TableHead>
-                  <TableHead className="text-slate-400">数据源</TableHead>
-                  <TableHead className="text-slate-400">触发条件</TableHead>
-                  <TableHead className="text-slate-400">级别</TableHead>
-                  <TableHead className="text-slate-400">持续时间</TableHead>
-                  <TableHead className="text-slate-400">通知渠道</TableHead>
-                  <TableHead className="text-slate-400">状态</TableHead>
-                  <TableHead className="text-slate-400 text-right">操作</TableHead>
+                  <TableHead className="dg-text-secondary">规则名称</TableHead>
+                  <TableHead className="dg-text-secondary">数据源</TableHead>
+                  <TableHead className="dg-text-secondary">触发条件</TableHead>
+                  <TableHead className="dg-text-secondary">级别</TableHead>
+                  <TableHead className="dg-text-secondary">持续时间</TableHead>
+                  <TableHead className="dg-text-secondary">通知渠道</TableHead>
+                  <TableHead className="dg-text-secondary">状态</TableHead>
+                  <TableHead className="dg-text-secondary text-right">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {rules.length === 0 ? (
-                  <TableRow className="border-slate-800">
-                    <TableCell colSpan={COL_SPAN} className="text-center text-slate-500 py-12">
+                  <TableRow className="border-[var(--dg-border)]">
+                    <TableCell colSpan={COL_SPAN} className="text-center dg-text-muted py-12">
                       暂无告警规则
                     </TableCell>
                   </TableRow>
                 ) : (
                   rules.map((rule) => (
-                    <TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
+                    <TableRow key={rule.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                       <TableCell>
                         <Checkbox
                           checked={selectedIds.includes(rule.id)}
                           onCheckedChange={() => toggleSelect(rule.id)}
-                          className="border-slate-600"
+                          className="border-[var(--dg-border-hover)]"
                         />
                       </TableCell>
                       <TableCell>
                         <div>
-                          <span className="text-sm font-medium text-slate-200">{rule.name}</span>
+                          <span className="text-sm font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
                           {rule.description && (
-                            <p className="text-xs text-slate-500">{rule.description}</p>
+                            <p className="text-xs dg-text-muted">{rule.description}</p>
                           )}
                         </div>
                       </TableCell>
                       <TableCell>
-                        <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
+                        <code className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
                           {rule.source || '--'}
                         </code>
                       </TableCell>
@@ -179,21 +179,21 @@ export function AlertRulesTab({
                       </TableCell>
                       <TableCell>
                         {rule.severity === 'critical' ? (
-                          <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">
                             严重
                           </Badge>
                         ) : rule.severity === 'warning' ? (
-                          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+                          <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
                             警告
                           </Badge>
                         ) : (
-                          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+                          <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
                             提示
                           </Badge>
                         )}
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-300">{(rule.duration || 0) / 60}分钟</span>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{(rule.duration || 0) / 60}分钟</span>
                       </TableCell>
                       <TableCell>
                         {renderRuleChannels(rule, notifyChannels)}
@@ -210,7 +210,7 @@ export function AlertRulesTab({
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-8 w-8 text-slate-400 hover:text-slate-100"
+                            className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
                             onClick={() => onEditRule(rule)}
                           >
                             <Settings className="h-4 w-4" />
@@ -218,7 +218,7 @@ export function AlertRulesTab({
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-8 w-8 text-slate-400 hover:text-red-400"
+                            className="h-8 w-8 dg-text-secondary hover:dg-text-red"
                             onClick={() => handleDeleteRule(rule.id)}
                           >
                             <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/components/monitor/alert-center/AlertCenter.tsx b/frontend/src/components/monitor/alert-center/AlertCenter.tsx
index 46c21d1..a3af0c7 100644
--- a/frontend/src/components/monitor/alert-center/AlertCenter.tsx
+++ b/frontend/src/components/monitor/alert-center/AlertCenter.tsx
@@ -12,9 +12,11 @@ import { StatStrip } from '@/components/ui/stat-strip';
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Switch } from '@/components/ui/switch';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { PageLoading } from '@/components/layout/PageLoading';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { alertCenterApi, alertApi } from '@/api';
 import { useAlerts, useAgentAlertRules, useAlertMutations } from '@/hooks/api';
@@ -178,30 +180,16 @@ const AlertCenter: React.FC = () => {
     setPage(1); // 过滤条件变化时重置到第一页
   };
 
-  return (
-    <div className="space-y-3">
-      {/* 统计 — 紧凑条 */}
-      <StatStrip
-        items={[
-          { label: t('alert.stat.firing'), value: stats.firing, color: stats.firing > 0 ? 'red' : 'muted' },
-          { label: t('alert.stat.critical'), value: stats.critical, color: 'red' },
-          { label: t('alert.stat.warning'), value: stats.warning, color: 'amber' },
-          { label: t('alert.stat.resolved'), value: stats.resolved, color: 'emerald' },
-        ]}
-      />
+  const pageTabs = [
+    { id: 'alerts', label: t('alert.tab.alerts') },
+    { id: 'rules', label: t('alert.tab.rules') },
+    { id: 'silences', label: t('alert.tab.silences') },
+    { id: 'contacts', label: t('alert.tab.contacts') },
+    { id: 'groups', label: t('alert.tab.groups') },
+  ];
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="grid w-full grid-cols-5 lg:w-[600px] h-9">
-          <TabsTrigger value="alerts" className="text-xs">{t('alert.tab.alerts')}</TabsTrigger>
-          <TabsTrigger value="rules" className="text-xs">{t('alert.tab.rules')}</TabsTrigger>
-          <TabsTrigger value="silences" className="text-xs">{t('alert.tab.silences')}</TabsTrigger>
-          <TabsTrigger value="contacts" className="text-xs">{t('alert.tab.contacts')}</TabsTrigger>
-          <TabsTrigger value="groups" className="text-xs">{t('alert.tab.groups')}</TabsTrigger>
-        </TabsList>
-
-        {/* 告警列表 Tab */}
-        <TabsContent value="alerts" className="space-y-3">
-          <div className="flex flex-wrap items-center justify-between gap-2">
+  const alertsToolbar = activeTab === 'alerts' ? (
+    <div className="flex flex-wrap items-center justify-between gap-2 w-full">
             <div className="flex items-center gap-2 flex-1 min-w-[280px]">
               <div className="relative flex-1">
                 <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
@@ -235,16 +223,65 @@ const AlertCenter: React.FC = () => {
                 </SelectContent>
               </Select>
             </div>
-            <div className="flex items-center gap-1 text-xs text-muted-foreground">
-              <span>{t('alert.totalItems', { count: total })}</span>
-              <Button variant="outline" size="sm" onClick={() => refetchAlerts()} className="h-7 text-xs px-2">
-                <RefreshCw className="w-3 h-3 mr-1" />{t('common.refresh')}
-              </Button>
-            </div>
-          </div>
+      <div className="flex items-center gap-1 text-xs dg-text-muted">
+        <span>{t('alert.totalItems', { count: total })}</span>
+        <Button variant="outline" size="sm" onClick={() => refetchAlerts()} className="h-7 text-xs px-2 dg-btn-secondary">
+          <RefreshCw className="w-3 h-3 mr-1" />{t('common.refresh')}
+        </Button>
+      </div>
+    </div>
+  ) : undefined;
 
-          {/* 告警表格 — 紧凑 */}
-          <Card>
+  return (
+    <PageShell
+      variant="list"
+      title="告警中心"
+      subtitle="告警事件处理、规则与通知配置"
+      icon={<AlertTriangle className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      toolbar={alertsToolbar}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: t('alert.stat.firing'), value: stats.firing, color: stats.firing > 0 ? 'red' : 'muted' },
+            { label: t('alert.stat.critical'), value: stats.critical, color: 'red' },
+            { label: t('alert.stat.warning'), value: stats.warning, color: 'amber' },
+            { label: t('alert.stat.resolved'), value: stats.resolved, color: 'emerald' },
+          ]}
+        />
+      )}
+      actions={activeTab === 'rules' ? (
+        <>
+          <Button className="dg-btn-primary" onClick={handleOpenAddRule}>
+            <Plus className="w-4 h-4 mr-1" />{t('alert.addRule')}
+          </Button>
+          <Button variant="secondary" className="dg-btn-secondary" onClick={handleQuickSetup} disabled={quickSetupMutation.isPending}>
+            <Rocket className="w-4 h-4 mr-1" />
+            {quickSetupMutation.isPending ? t('alert.quickSetupCreating') : t('alert.quickSetup')}
+          </Button>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => refetchRules()}>
+            <RefreshCw className="w-4 h-4 mr-2" />{t('common.refresh')}
+          </Button>
+        </>
+      ) : activeTab === 'contacts' ? (
+        <Button size="sm" className="dg-btn-primary" onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
+          <Plus className="w-4 h-4 mr-1" />添加联系人
+        </Button>
+      ) : activeTab === 'groups' ? (
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={fetchContactGroups}>
+            <RefreshCw className="w-4 h-4 mr-2" />{t('common.refresh')}
+          </Button>
+          <Button className="dg-btn-primary" onClick={() => { setEditingGroup(null); setGroupDialogOpen(true); }}>
+            <Plus className="w-4 h-4 mr-2" />添加联系组
+          </Button>
+        </>
+      ) : undefined}
+    >
+      {activeTab === 'alerts' && (
+        <Card>
             <CardContent className="p-0">
               <div className="overflow-x-auto">
                 <table className="w-full text-sm">
@@ -260,9 +297,9 @@ const AlertCenter: React.FC = () => {
                   </thead>
                   <tbody className="divide-y">
                     {loading ? (
-                      <tr><td colSpan={6} className="px-3 py-6 text-center text-xs text-muted-foreground">{t('alert.loading')}</td></tr>
+                      <tr><td colSpan={6} className="px-3 py-2"><PageLoading label={t('alert.loading')} /></td></tr>
                     ) : alerts.length === 0 ? (
-                      <tr><td colSpan={6} className="px-3 py-6 text-center text-xs text-muted-foreground">{t('alert.noAlerts')}</td></tr>
+                      <tr><td colSpan={6} className="px-3 py-2"><PageEmpty title={t('alert.noAlerts')} className="py-6" /></td></tr>
                     ) : (
                       alerts.filter(alert => {
                         // 客户端也保留关键词搜索过滤
@@ -302,7 +339,7 @@ const AlertCenter: React.FC = () => {
                               {alert.status === 'firing' && (
                                 <Button variant="ghost" size="sm" className="h-7 w-7 p-0"
                                   onClick={() => handleAcknowledge(alert.id)}>
-                                  <Check className="w-3.5 h-3.5 text-blue-600" />
+                                  <Check className="w-3.5 h-3.5 dg-text-blue" />
                                 </Button>
                               )}
                               {(alert.status === 'firing' || alert.status === 'acknowledged') && (
@@ -353,31 +390,15 @@ const AlertCenter: React.FC = () => {
               )}
             </CardContent>
           </Card>
-        </TabsContent>
+      )}
 
-        {/* 告警规则 Tab */}
-        <TabsContent value="rules" className="space-y-4">
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              <Button onClick={handleOpenAddRule}>
-                <Plus className="w-4 h-4 mr-1" />{t('alert.addRule')}
-              </Button>
-              <Button variant="secondary" onClick={handleQuickSetup} disabled={quickSetupMutation.isPending}>
-                <Rocket className="w-4 h-4 mr-1" />
-                {quickSetupMutation.isPending ? t('alert.quickSetupCreating') : t('alert.quickSetup')}
-              </Button>
-            </div>
-            <Button variant="outline" onClick={() => refetchRules()}>
-              <RefreshCw className="w-4 h-4 mr-2" />
-              刷新
-            </Button>
-          </div>
-          {rules.length === 0 ? (
-            <div className="text-center py-12 text-muted-foreground">
-              <AlertTriangle className="w-10 h-10 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">{t('alert.noRules')}</p>
-              <p className="text-xs mt-1">{t('alert.noRulesHint')}</p>
-            </div>
+      {activeTab === 'rules' && (
+          rules.length === 0 ? (
+            <PageEmpty
+              icon={<AlertTriangle className="w-10 h-10" />}
+              title={t('alert.noRules')}
+              description={t('alert.noRulesHint')}
+            />
           ) : (
           <div className="grid grid-cols-1 gap-4">
             {rules.map((rule) => (
@@ -417,7 +438,7 @@ const AlertCenter: React.FC = () => {
                     </div>
                     <div className="flex items-center gap-2">
                       <Button variant="ghost" size="sm" onClick={() => handleEditRule(rule)}>{t('common.edit')}</Button>
-                      <Button variant="ghost" size="sm" className="text-red-400" onClick={() => handleDeleteRule(rule)}>{t('common.delete')}</Button>
+                      <Button variant="ghost" size="sm" className="dg-text-red" onClick={() => handleDeleteRule(rule)}>{t('common.delete')}</Button>
                       <Switch
                         checked={rule.enabled}
                         onCheckedChange={(checked) => toggleRule(String(rule.id), checked)}
@@ -428,27 +449,14 @@ const AlertCenter: React.FC = () => {
               </Card>
             ))}
           </div>
-          )}
-        </TabsContent>
+          )
+      )}
 
-        {/* 静默规则 Tab */}
-        <TabsContent value="silences">
-          <SilenceRuleTab />
-        </TabsContent>
+      {activeTab === 'silences' && <SilenceRuleTab />}
 
-        {/* 报警联系人 Tab */}
-        <TabsContent value="contacts" className="space-y-4">
-            <div className="flex justify-between items-center">
-              <h3 className="text-sm font-medium">{t('alert.contactsTitle')}</h3>
-              <Button size="sm" onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
-                <Plus className="w-4 h-4 mr-1" />
-                添加联系人
-              </Button>
-            </div>
-            {contacts.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground border border-dashed rounded-lg text-xs">
-                暂无报警联系人，点击「添加联系人」创建
-              </div>
+      {activeTab === 'contacts' && (
+            contacts.length === 0 ? (
+              <PageEmpty title="暂无报警联系人" description="点击「添加联系人」创建" />
             ) : (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                 {contacts.map((c) => (
@@ -492,25 +500,12 @@ const AlertCenter: React.FC = () => {
                   </Card>
                 ))}
               </div>
-            )}
-        </TabsContent>
+            )
+      )}
 
-        {/* 报警联系组 Tab */}
-        <TabsContent value="groups" className="space-y-4">
-          <div className="flex justify-between items-center">
-            <Button variant="outline" onClick={fetchContactGroups}>
-              <RefreshCw className="w-4 h-4 mr-2" />
-              刷新
-            </Button>
-            <Button onClick={() => { setEditingGroup(null); setGroupDialogOpen(true); }}>
-              <Plus className="w-4 h-4 mr-2" />
-              添加联系组
-            </Button>
-          </div>
-          {contactGroups.length === 0 ? (
-            <div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg">
-              暂无报警联系组，点击「添加联系组」创建
-            </div>
+      {activeTab === 'groups' && (
+          contactGroups.length === 0 ? (
+            <PageEmpty title="暂无报警联系组" description="点击「添加联系组」创建" />
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {contactGroups.map((g) => {
@@ -554,9 +549,8 @@ const AlertCenter: React.FC = () => {
                 );
               })}
             </div>
-          )}
-        </TabsContent>
-      </Tabs>
+          )
+      )}
 
       <AlertDetailDialog
         alert={selectedAlert}
@@ -590,7 +584,7 @@ const AlertCenter: React.FC = () => {
         contacts={contacts}
         onSaved={() => { fetchContactGroups(); }}
       />
-    </div>
+    </PageShell>
   );
 };
 
diff --git a/frontend/src/components/monitor/alert-center/AlertCenterDetail.tsx b/frontend/src/components/monitor/alert-center/AlertCenterDetail.tsx
index 0026c0b..c6a7cbf 100644
--- a/frontend/src/components/monitor/alert-center/AlertCenterDetail.tsx
+++ b/frontend/src/components/monitor/alert-center/AlertCenterDetail.tsx
@@ -73,7 +73,7 @@ export function AlertDetailDialog({
             {alert.runbookUrl && (
               <div>
                 <Label className="text-muted-foreground">处理手册</Label>
-                <a href={alert.runbookUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline block mt-1">
+                <a href={alert.runbookUrl} target="_blank" rel="noopener noreferrer" className="dg-text-blue hover:underline block mt-1">
                   查看处理手册 →
                 </a>
               </div>
diff --git a/frontend/src/components/monitor/alert-center/AlertChannelsTab.tsx b/frontend/src/components/monitor/alert-center/AlertChannelsTab.tsx
index 9d64ce3..c54de28 100644
--- a/frontend/src/components/monitor/alert-center/AlertChannelsTab.tsx
+++ b/frontend/src/components/monitor/alert-center/AlertChannelsTab.tsx
@@ -120,7 +120,7 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
                 <div className="text-sm text-muted-foreground mb-3">
                   类型: {getChannelTypeLabel(channel.type)}
                   {channel.test_status === 'success' && (
-                    <span className="ml-2 text-green-500">测试通过</span>
+                    <span className="ml-2 dg-text-green">测试通过</span>
                   )}
                 </div>
                 <div className="flex gap-2">
diff --git a/frontend/src/components/monitor/alert-center/SilenceRuleTab.tsx b/frontend/src/components/monitor/alert-center/SilenceRuleTab.tsx
index aa871b7..0cc1c61 100644
--- a/frontend/src/components/monitor/alert-center/SilenceRuleTab.tsx
+++ b/frontend/src/components/monitor/alert-center/SilenceRuleTab.tsx
@@ -201,7 +201,7 @@ const SilenceRuleTab: React.FC = () => {
                       <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleEdit(s)}>
                         <Edit className="w-3 h-3 mr-1" />编辑
                       </Button>
-                      <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400" onClick={() => handleDelete(s)}>
+                      <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red" onClick={() => handleDelete(s)}>
                         <Trash2 className="w-3 h-3 mr-1" />删除
                       </Button>
                     </div>
diff --git a/frontend/src/components/monitor/alert-center/alert-center-helpers.tsx b/frontend/src/components/monitor/alert-center/alert-center-helpers.tsx
index eb83b05..9e60315 100644
--- a/frontend/src/components/monitor/alert-center/alert-center-helpers.tsx
+++ b/frontend/src/components/monitor/alert-center/alert-center-helpers.tsx
@@ -137,9 +137,9 @@ export function getChannelIcon(type: string) {
     case 'slack': return <MessageSquare className="w-4 h-4" />;
     case 'sms': return <Phone className="w-4 h-4" />;
     case 'webhook': return <Zap className="w-4 h-4" />;
-    case 'feishu': return <Bell className="w-4 h-4 text-blue-500" />;
+    case 'feishu': return <Bell className="w-4 h-4 dg-text-blue" />;
     case 'dingtalk': return <Bell className="w-4 h-4 text-sky-500" />;
-    case 'wechat': return <MessageSquare className="w-4 h-4 text-green-500" />;
+    case 'wechat': return <MessageSquare className="w-4 h-4 dg-text-green" />;
     default: return <Bell className="w-4 h-4" />;
   }
 }
diff --git a/frontend/src/components/monitor/alertShared.tsx b/frontend/src/components/monitor/alertShared.tsx
index 26230d5..fdb5582 100644
--- a/frontend/src/components/monitor/alertShared.tsx
+++ b/frontend/src/components/monitor/alertShared.tsx
@@ -74,7 +74,7 @@ export function getChannelIcon(type: string) {
 // 渲染规则的通知渠道引用列表（兼容新格式=渠道ID 和 旧格式=类型字符串）
 export function renderRuleChannels( rule: AlertRuleRecord, notifyChannels: AlertChannel[]) {
   const refs = parseChannels(rule.notify_channels);
-  if (refs.length === 0) return <span className="text-xs text-slate-600">--</span>;
+  if (refs.length === 0) return <span className="text-xs dg-text-muted">--</span>;
   return (
     <div className="flex flex-wrap gap-1">
       {refs.map((ref) => {
@@ -85,9 +85,9 @@ export function renderRuleChannels( rule: AlertRuleRecord, notifyChannels: Alert
           <span
             key={ref}
             title={`${resolved.name} (${getChannelTypeLabel(resolved.type)})`}
-            className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-slate-800 text-slate-300"
+            className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]"
           >
-            <Icon className="h-3 w-3 text-slate-400" />
+            <Icon className="h-3 w-3 dg-text-secondary" />
             {resolved.name}
           </span>
         );
diff --git a/frontend/src/components/monitor/dashboard/GrafanaDashboard.tsx b/frontend/src/components/monitor/dashboard/GrafanaDashboard.tsx
index dd8286c..320050e 100644
--- a/frontend/src/components/monitor/dashboard/GrafanaDashboard.tsx
+++ b/frontend/src/components/monitor/dashboard/GrafanaDashboard.tsx
@@ -46,6 +46,9 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 
 // ═══════════ Tab 配置 ═══════════
 type TabId = 'agent' | 'zabbix' | 'prometheus' | 'dashboard';
@@ -129,9 +132,9 @@ const AgentTab: React.FC = () => {
     return sd === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
   });
   const paged = sorted.slice((page - 1) * pageSize, page * pageSize);
-  const SI = ({ f }: { f: SortField }) => sf !== f ? <ArrowUpDown className="w-3 h-3 text-slate-500" /> : sd === 'asc' ? <ArrowUp className="w-3 h-3 text-emerald-400" /> : <ArrowDown className="w-3 h-3 text-emerald-400" />;
+  const SI = ({ f }: { f: SortField }) => sf !== f ? <ArrowUpDown className="w-3 h-3 dg-text-muted" /> : sd === 'asc' ? <ArrowUp className="w-3 h-3 dg-text-green" /> : <ArrowDown className="w-3 h-3 dg-text-green" />;
   const bar = (v: number, l: string) => (
-    <div className="flex items-center gap-2 min-w-[90px]"><div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden"><div className={`h-full rounded-full transition-all duration-500 ${v >= 80 ? 'bg-orange-500' : 'bg-emerald-500'}`} style={{ width: `${Math.min(v, 100)}%` }} /></div><span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'text-orange-400' : ''}`}>{l}</span></div>
+    <div className="flex items-center gap-2 min-w-[90px]"><div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden"><div className={`h-full rounded-full transition-all duration-500 ${v >= 80 ? 'bg-orange-500' : 'bg-emerald-500'}`} style={{ width: `${Math.min(v, 100)}%` }} /></div><span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'dg-text-orange' : ''}`}>{l}</span></div>
   );
 
   const selAll = selected.size === hosts.length && hosts.length > 0;
@@ -199,8 +202,14 @@ const AgentTab: React.FC = () => {
     finally { setBatchSubmitting(false); }
   };
 
-  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载中…</p></div>;
-  if (!hosts.length) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Server className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">暂无服务器资产</p><p className="text-xs mt-1">请先在「服务器管理」中添加主机，然后在此安装 Agent</p></div>;
+  if (loading) return <PageLoading label="加载 Agent 主机列表..." />;
+  if (!hosts.length) return (
+    <PageEmpty
+      icon={<Server className="h-8 w-8" />}
+      title="暂无服务器资产"
+      description="请先在「服务器管理」中添加主机，然后在此安装 Agent"
+    />
+  );
   return (
     <div>
       {/* 工具栏 */}
@@ -216,10 +225,10 @@ const AgentTab: React.FC = () => {
         </Button>
         {selAny && (
           <>
-            <Button size="sm" variant="outline" className="h-7 text-xs gap-1 border-blue-500/30 text-blue-400 hover:bg-blue-500/10" onClick={openBatchDialog}>
+            <Button size="sm" variant="outline" className="h-7 text-xs gap-1 dg-btn-secondary dg-text-blue" onClick={openBatchDialog}>
               <PackageOpen className="w-3 h-3" />批量部署 ({selected.size})
             </Button>
-            <Button size="sm" variant="outline" className="h-7 text-xs gap-1 border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleBatchUninstall} disabled={batchUninstalling}>
+            <Button size="sm" variant="outline" className="h-7 text-xs gap-1 border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={handleBatchUninstall} disabled={batchUninstalling}>
               <Trash2 className="w-3 h-3" />批量卸载 ({selected.size})
             </Button>
           </>
@@ -236,27 +245,27 @@ const AgentTab: React.FC = () => {
 
       {/* ────────── 批量部署 Agent 对话框 ────────── */}
       <Dialog open={batchOpen} onOpenChange={(v) => { if (!v) { setBatchOpen(false); setBatchAck(false); setBatchCreds({ username: 'root', password: '', sshKey: '', authType: 'password' }); } }}>
-        <DialogContent className="max-w-2xl max-h-[85vh] overflow-auto bg-slate-900 border-slate-700 text-slate-100">
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-auto dg-input">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 text-base">
-              <PackageOpen className="w-5 h-5 text-blue-400" />
+              <PackageOpen className="w-5 h-5 dg-text-blue" />
               批量部署 Agent
             </DialogTitle>
-            <DialogDescription className="text-slate-400 text-xs">
+            <DialogDescription className="dg-text-secondary text-xs">
               选中 {selectedHosts.length} 台主机（需安装: {needInstall.length}，待升级: {needUpgrade.length}）
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4">
             {/* 模式选择 — 类似阿里云安装/升级切换 */}
-            <div className="flex items-center gap-2 p-1 rounded-lg bg-slate-800 border border-slate-700 w-fit">
+            <div className="flex items-center gap-2 p-1 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] w-fit">
               {(['install', 'upgrade'] as const).map(m => (
                 <button
                   key={m}
                   disabled={m === 'install' ? needInstall.length === 0 : needUpgrade.length === 0}
                   onClick={() => setBatchMode(m)}
                   className={`px-4 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
-                    batchMode === m ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-200'
+                    batchMode === m ? 'dg-btn-primary text-white shadow-sm' : 'dg-text-secondary hover:text-[var(--dg-text-primary)]'
                   }`}
                 >
                   {m === 'install' ? `⚡ 安装 (${needInstall.length})` : `🔄 升级到最新版 (${needUpgrade.length})`}
@@ -265,32 +274,32 @@ const AgentTab: React.FC = () => {
             </div>
 
             {/* 主机列表 */}
-            <div className="rounded-md border border-slate-700 overflow-hidden">
+            <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
               <table className="w-full text-xs">
-                <thead className="bg-slate-800">
+                <thead className="bg-[var(--dg-bg-tertiary)]">
                   <tr>
-                    <th className="px-3 py-2 text-left font-medium text-slate-400">主机名</th>
-                    <th className="px-3 py-2 text-left font-medium text-slate-400">IP</th>
-                    <th className="px-3 py-2 text-left font-medium text-slate-400">状态</th>
-                    <th className="px-3 py-2 text-left font-medium text-slate-400">当前版本</th>
-                    <th className="px-3 py-2 text-left font-medium text-slate-400">操作</th>
+                    <th className="px-3 py-2 text-left font-medium dg-text-secondary">主机名</th>
+                    <th className="px-3 py-2 text-left font-medium dg-text-secondary">IP</th>
+                    <th className="px-3 py-2 text-left font-medium dg-text-secondary">状态</th>
+                    <th className="px-3 py-2 text-left font-medium dg-text-secondary">当前版本</th>
+                    <th className="px-3 py-2 text-left font-medium dg-text-secondary">操作</th>
                   </tr>
                 </thead>
                 <tbody>
                   {(batchMode === 'install' ? needInstall : needUpgrade).map(h => (
-                    <tr key={h.server_id} className="border-t border-slate-800 hover:bg-slate-800/50">
-                      <td className="px-3 py-2 font-medium text-slate-200">{h.hostname}</td>
-                      <td className="px-3 py-2 font-mono text-slate-400">{h.ip}</td>
+                    <tr key={h.server_id} className="border-t border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                      <td className="px-3 py-2 font-medium text-[var(--dg-text-primary)]">{h.hostname}</td>
+                      <td className="px-3 py-2 font-mono dg-text-secondary">{h.ip}</td>
                       <td className="px-3 py-2">
                         {h.agent_status === 'online'
-                          ? <Badge className="text-[10px] bg-emerald-500/20 text-emerald-400">在线</Badge>
-                          : <Badge className="text-[10px] bg-slate-500/20 text-slate-400">
+                          ? <Badge className="text-[10px] bg-emerald-500/20 dg-text-green">在线</Badge>
+                          : <Badge className="text-[10px] bg-[var(--dg-bg-active)]/20 dg-text-secondary">
                               {h.agent_status === 'not_installed' ? '未安装' : h.agent_status || '离线'}
                             </Badge>}
                       </td>
-                      <td className="px-3 py-2 font-mono text-slate-400">{h.agent_version || '—'}</td>
+                      <td className="px-3 py-2 font-mono dg-text-secondary">{h.agent_version || '—'}</td>
                       <td className="px-3 py-2">
-                        <span className="text-blue-400 text-[11px]">
+                        <span className="dg-text-blue text-[11px]">
                           {batchMode === 'install' ? '即将安装' : '即将升级'}
                         </span>
                       </td>
@@ -302,38 +311,38 @@ const AgentTab: React.FC = () => {
 
             {/* 安装凭据（安装模式且存在未保存凭据的主机时显示）// Logan.Li */}
             {batchMode === 'install' && needInstall.some(h => !h.has_auth) && (
-              <div className="rounded-md border border-slate-700 bg-slate-800/50 p-3 space-y-3">
+              <div className="rounded-md border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/50 p-3 space-y-3">
                 <div className="flex items-center gap-2">
-                  <Info className="w-4 h-4 text-blue-400 shrink-0" />
-                  <span className="text-xs text-slate-300">以下主机未保存 SSH 凭据，请提供临时凭据用于批量安装（仅本次使用）：</span>
+                  <Info className="w-4 h-4 dg-text-blue shrink-0" />
+                  <span className="text-xs text-[var(--dg-text-secondary)]">以下主机未保存 SSH 凭据，请提供临时凭据用于批量安装（仅本次使用）：</span>
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-[11px] text-slate-400 mb-1 block">认证方式</Label>
+                    <Label className="text-[11px] dg-text-secondary mb-1 block">认证方式</Label>
                     <Select value={batchCreds.authType} onValueChange={(v: 'password' | 'key') => setBatchCreds(c => ({ ...c, authType: v }))}>
-                      <SelectTrigger className="h-8 text-xs bg-slate-900 border-slate-700 text-slate-200">
+                      <SelectTrigger className="h-8 text-xs dg-input text-[var(--dg-text-primary)]">
                         <SelectValue />
                       </SelectTrigger>
-                      <SelectContent className="bg-slate-900 border-slate-700 text-slate-200">
+                      <SelectContent className="dg-input text-[var(--dg-text-primary)]">
                         <SelectItem value="password">密码</SelectItem>
                         <SelectItem value="key">SSH 私钥</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-[11px] text-slate-400 mb-1 block">用户名</Label>
-                    <Input value={batchCreds.username} onChange={e => setBatchCreds(c => ({ ...c, username: e.target.value }))} placeholder="root" className="h-8 text-xs bg-slate-900 border-slate-700 text-slate-200" />
+                    <Label className="text-[11px] dg-text-secondary mb-1 block">用户名</Label>
+                    <Input value={batchCreds.username} onChange={e => setBatchCreds(c => ({ ...c, username: e.target.value }))} placeholder="root" className="h-8 text-xs dg-input text-[var(--dg-text-primary)]" />
                   </div>
                 </div>
                 {batchCreds.authType === 'password' ? (
                   <div>
-                    <Label className="text-[11px] text-slate-400 mb-1 block">密码</Label>
-                    <Input type="password" value={batchCreds.password} onChange={e => setBatchCreds(c => ({ ...c, password: e.target.value }))} placeholder="输入 SSH 密码" className="h-8 text-xs bg-slate-900 border-slate-700 text-slate-200" />
+                    <Label className="text-[11px] dg-text-secondary mb-1 block">密码</Label>
+                    <Input type="password" value={batchCreds.password} onChange={e => setBatchCreds(c => ({ ...c, password: e.target.value }))} placeholder="输入 SSH 密码" className="h-8 text-xs dg-input text-[var(--dg-text-primary)]" />
                   </div>
                 ) : (
                   <div>
-                    <Label className="text-[11px] text-slate-400 mb-1 block">SSH 私钥</Label>
-                    <textarea value={batchCreds.sshKey} onChange={e => setBatchCreds(c => ({ ...c, sshKey: e.target.value }))} placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" className="w-full h-24 rounded-md border border-slate-700 bg-slate-900 text-slate-200 text-xs p-2 resize-none focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                    <Label className="text-[11px] dg-text-secondary mb-1 block">SSH 私钥</Label>
+                    <textarea value={batchCreds.sshKey} onChange={e => setBatchCreds(c => ({ ...c, sshKey: e.target.value }))} placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" className="w-full h-24 rounded-md border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-[var(--dg-text-primary)] text-xs p-2 resize-none focus:outline-none focus:ring-1 focus:ring-[var(--dg-blue)]" />
                   </div>
                 )}
               </div>
@@ -342,16 +351,16 @@ const AgentTab: React.FC = () => {
             {/* ⚠️ 警告文案 — 参考阿里云批量安装/升级风格 */}
             <div className="rounded-md border border-amber-500/30 bg-amber-500/5 p-3 space-y-2">
               <div className="flex items-start gap-2">
-                <Info className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
+                <Info className="w-4 h-4 dg-text-yellow mt-0.5 shrink-0" />
                 <div>
                   <p className="text-xs font-medium text-amber-300 mb-1">
                     {batchMode === 'install' ? '本次安装' : '本次升级'}，主机监控探针将部署 AIOps Agent。AIOps Agent 是 AIOps 平台推出的新一代数据采集器，提供主机监控指标采集和可观测数据采集能力。
                   </p>
-                  <p className="text-[11px] text-amber-400/80 leading-relaxed">
+                  <p className="text-[11px] dg-text-yellow/80 leading-relaxed">
                     {batchMode === 'upgrade' && '升级前请注意以下事项：'}
                     {batchMode === 'install' && '安装前请注意以下事项：'}
                   </p>
-                  <ul className="mt-1 space-y-0.5 text-[11px] text-slate-400 list-disc list-inside">
+                  <ul className="mt-1 space-y-0.5 text-[11px] dg-text-secondary list-disc list-inside">
                     {batchMode === 'upgrade' && (
                       <>
                         <li>如果您的机器已经安装旧版 Agent，升级操作将停止旧版并替换为最新版本。</li>
@@ -378,16 +387,16 @@ const AgentTab: React.FC = () => {
             {/* 我已知悉 勾选 */}
             <div className="flex items-center gap-2">
               <Checkbox id="batch-ack" checked={batchAck} onCheckedChange={(c) => setBatchAck(!!c)} />
-              <label htmlFor="batch-ack" className="text-xs text-slate-300 cursor-pointer select-none">我已知悉以上风险和注意事项</label>
+              <label htmlFor="batch-ack" className="text-xs text-[var(--dg-text-secondary)] cursor-pointer select-none">我已知悉以上风险和注意事项</label>
             </div>
           </div>
 
           <DialogFooter className="gap-2">
-            <Button variant="outline" className="border-slate-700 text-slate-300 h-8 text-xs" onClick={() => { setBatchOpen(false); setBatchAck(false); }}>
+            <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] h-8 text-xs" onClick={() => { setBatchOpen(false); setBatchAck(false); }}>
               取消
             </Button>
             <Button
-              className="bg-blue-600 hover:bg-blue-700 text-white h-8 text-xs gap-1"
+              className="dg-btn-primary h-8 text-xs gap-1"
               disabled={batchSubmitting || !batchAck || (batchMode === 'install' ? needInstall.length === 0 : needUpgrade.length === 0)}
               onClick={handleBatchSubmit}
             >
@@ -423,7 +432,7 @@ const AgentTab: React.FC = () => {
                 <td className="px-3 py-2.5 font-medium text-[var(--dg-text-primary)]">{h.hostname}</td>
                 <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">
                   {operating.has(h.server_id) ? (
-                    <span className="inline-flex items-center gap-1 text-blue-400">
+                    <span className="inline-flex items-center gap-1 dg-text-blue">
                       <Loader2 className="w-3 h-3 animate-spin" />
                       <span className="text-[10px]">部署中</span>
                     </span>
@@ -431,14 +440,14 @@ const AgentTab: React.FC = () => {
                     h.agent_version || '—'
                   )}
                 </td>
-                <td className="px-3 py-2.5">{h.agent_status==='online'?<Badge className="text-[10px] bg-emerald-500/20 text-emerald-400"><Wifi className="w-3 h-3 mr-1"/>在线</Badge>:h.agent_status==='not_installed'?<Badge className="text-[10px] bg-amber-500/20 text-amber-400">未安装</Badge>:<Badge className="text-[10px] bg-slate-500/10 text-slate-400"><WifiOff className="w-3 h-3 mr-1"/>离线</Badge>}</td>
+                <td className="px-3 py-2.5">{h.agent_status==='online'?<Badge className="text-[10px] bg-emerald-500/20 dg-text-green"><Wifi className="w-3 h-3 mr-1"/>在线</Badge>:h.agent_status==='not_installed'?<Badge className="text-[10px] bg-amber-500/20 dg-text-yellow">未安装</Badge>:<Badge className="text-[10px] bg-[var(--dg-bg-active)]/10 dg-text-secondary"><WifiOff className="w-3 h-3 mr-1"/>离线</Badge>}</td>
                 <td className="px-3 py-2.5">{bar(Number(h.cpu_usage||0), `${Number(h.cpu_usage||0).toFixed(1)}%`)}</td>
                 <td className="px-3 py-2.5">{bar(Number(h.mem_usage||0), `${Number(h.mem_usage||0).toFixed(1)}%`)}</td>
                 <td className="px-3 py-2.5">{bar(Number(h.disk_usage||0), `${Number(h.disk_usage||0).toFixed(1)}%`)}</td>
                 <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.region||'—'}</td>
                 <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{h.ip||'—'}</td>
                 <td className="px-3 py-2.5">
-                  <Button variant="ghost" size="sm" className="h-7 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 px-2"
+                  <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-blue hover:bg-[var(--dg-bg-hover)] px-2"
                     onClick={() => navigate(`/host-monitor?host=${encodeURIComponent(h.hostname)}`)}>
                     <BarChart3 className="w-3.5 h-3.5 mr-1" />图表
                   </Button>
@@ -479,8 +488,14 @@ const ZabbixTab: React.FC = () => {
       setDs(list.find(( d: any) => d.is_default) || list[0] || null);
     }).catch(() => {}).finally(() => setLoading(false));
   }, []);
-  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载数据源…</p></div>;
-  if (!ds) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Database className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">未配置 Zabbix 数据源</p><a href="/datasources" className="text-xs text-blue-400 hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a></div>;
+  if (loading) return <PageLoading label="加载 Zabbix 数据源..." />;
+  if (!ds) return (
+    <PageEmpty
+      icon={<Database className="h-8 w-8" />}
+      title="未配置 Zabbix 数据源"
+      action={<a href="/datasources" className="text-xs dg-text-blue hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a>}
+    />
+  );
   return <ZabbixDashboard dsUrl={ds.url} dsUsername={ds.username} dsPassword={ds.password} />;
 };
 
@@ -493,8 +508,14 @@ const PrometheusTab: React.FC = () => {
       setDs(list.find(( d: any) => d.is_default) || list[0] || null);
     }).catch(() => {}).finally(() => setLoading(false));
   }, []);
-  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载数据源…</p></div>;
-  if (!ds) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Database className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">未配置 Prometheus 数据源</p><a href="/datasources" className="text-xs text-blue-400 hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a></div>;
+  if (loading) return <PageLoading label="加载 Prometheus 数据源..." />;
+  if (!ds) return (
+    <PageEmpty
+      icon={<Database className="h-8 w-8" />}
+      title="未配置 Prometheus 数据源"
+      action={<a href="/datasources" className="text-xs dg-text-blue hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a>}
+    />
+  );
   return <PrometheusDashboard dsUrl={ds.url} />;
 };
 
@@ -555,7 +576,7 @@ const DashboardTab: React.FC = () => {
 
       {active ? (
         active.panels.length === 0 ? (
-          <div className="text-center py-16 text-[var(--dg-text-muted)]"><BarChart3 className="w-10 h-10 mx-auto mb-2 opacity-50" /><p className="text-xs">暂无面板</p></div>
+          <PageEmpty icon={<BarChart3 className="w-10 h-10" />} title="暂无面板" className="py-16" />
         ) : (
           <div className="grid grid-cols-12 gap-3">
             {active.panels.map(p => (
@@ -567,7 +588,7 @@ const DashboardTab: React.FC = () => {
           </div>
         )
       ) : (
-        <div className="text-center py-16 text-[var(--dg-text-muted)]"><Monitor className="w-10 h-10 mx-auto mb-2 opacity-50" /><p className="text-xs">暂无仪表盘</p></div>
+        <PageEmpty icon={<Monitor className="w-10 h-10" />} title="暂无仪表盘" className="py-16" />
       )}
 
       <Dialog open={createOpen} onOpenChange={setCreateOpen}><DialogContent><DialogHeader><DialogTitle>新建仪表盘</DialogTitle></DialogHeader>
@@ -589,40 +610,30 @@ const GrafanaDashboard: React.FC = () => {
   const [tab, setTab] = useState<TabId>('agent');
   const [fullscreen, setFullscreen] = useState(false);
 
+  const pageTabs = TABS.map((item) => ({ id: item.id, label: item.label }));
+
   return (
-    <div className={`space-y-4 ${fullscreen ? 'fixed inset-0 z-50 bg-background p-4 overflow-auto' : ''}`}>
-
-      {/* Tab 切换栏 */}
-      <div className="flex items-center gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-        {TABS.map(t => (
-          <button
-            key={t.id}
-            onClick={() => setTab(t.id)}
-            className={`flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium transition-colors ${
-              tab === t.id
-                ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] shadow-sm'
-                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
-            }`}
-          >
-            {t.icon}
-            {t.label}
-          </button>
-        ))}
-        <div className="ml-auto">
-          <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setFullscreen(!fullscreen)}>
-            {fullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
-          </Button>
-        </div>
-      </div>
-
-      {/* Tab 内容 */}
-      <div className="min-h-[50vh]">
-        {tab === 'agent' && <AgentTab />}
-        {tab === 'zabbix' && <ZabbixTab />}
-        {tab === 'prometheus' && <PrometheusTab />}
-        {tab === 'dashboard' && <DashboardTab />}
-      </div>
-    </div>
+    <PageShell
+      variant="workspace"
+      title="监控大屏"
+      subtitle="Agent 主机、Zabbix、Prometheus 与自定义仪表盘"
+      icon={<Monitor className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={tab}
+      onTabChange={(id) => setTab(id as TabId)}
+      className={fullscreen ? 'fixed inset-0 z-50 bg-background p-4 overflow-auto' : undefined}
+      contentClassName="min-h-[50vh]"
+      actions={(
+        <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setFullscreen(!fullscreen)}>
+          {fullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
+        </Button>
+      )}
+    >
+      {tab === 'agent' && <AgentTab />}
+      {tab === 'zabbix' && <ZabbixTab />}
+      {tab === 'prometheus' && <PrometheusTab />}
+      {tab === 'dashboard' && <DashboardTab />}
+    </PageShell>
   );
 };
 
diff --git a/frontend/src/components/monitor/dashboard/GrafanaPanelContent.tsx b/frontend/src/components/monitor/dashboard/GrafanaPanelContent.tsx
index acf67d1..08f066d 100644
--- a/frontend/src/components/monitor/dashboard/GrafanaPanelContent.tsx
+++ b/frontend/src/components/monitor/dashboard/GrafanaPanelContent.tsx
@@ -147,11 +147,11 @@ export function GrafanaPanelContent({ panel, datasourceUrl }: { panel: Panel; da
       const unit = (panel.options as any)?.unit ?? '';
       return (
         <div className="flex flex-col items-center justify-center h-full min-h-[120px]">
-          <span className="text-4xl font-bold text-blue-500">
+          <span className="text-4xl font-bold dg-text-blue">
             {val > 1000 ? (val / 1000).toFixed(1) + 'K' : val.toFixed(2)}
           </span>
           {unit && <span className="text-sm text-[var(--dg-text-muted)] mt-2">{unit}</span>}
-          <div className="flex items-center gap-1 mt-2 text-green-500 text-sm">
+          <div className="flex items-center gap-1 mt-2 dg-text-green text-sm">
             <TrendingUp className="w-4 h-4" />
             <span>实时</span>
           </div>
@@ -205,7 +205,7 @@ export function GrafanaPanelContent({ panel, datasourceUrl }: { panel: Panel; da
                   {Object.entries(row.labels).slice(0, 3).map(([k, v]) => (
                     <td key={k} className="py-1 px-2 text-[var(--dg-text-secondary)]">{v}</td>
                   ))}
-                  <td className="py-1 px-2 text-right font-mono text-blue-400">{row.value.toFixed(2)}</td>
+                  <td className="py-1 px-2 text-right font-mono dg-text-blue">{row.value.toFixed(2)}</td>
                 </tr>
               ))}
             </tbody>
diff --git a/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx b/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx
index 2261c08..fd03b2f 100644
--- a/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx
+++ b/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx
@@ -39,7 +39,7 @@ function getUsageBar(val: number) {
   const color = v > 85 ? 'bg-red-500' : v > 60 ? 'bg-amber-500' : 'bg-emerald-500';
   return (
     <div className="flex items-center gap-1.5 min-w-[80px]">
-      <div className="flex-1 h-1.5 rounded-full bg-slate-700/50 overflow-hidden">
+      <div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
         <div className={`h-full rounded-full ${color}`} style={{ width: `${Math.min(v, 100)}%` }} />
       </div>
       <span className="text-xs font-mono w-10 text-right text-[var(--dg-text-primary)]">{v.toFixed(0)}%</span>
@@ -126,10 +126,10 @@ export default function HostMonitorDashboard() {
   };
 
   const SortIcon = ({ field }: { field: SortField }) => {
-    if (sortField !== field) return <ArrowUpDown className="w-3 h-3 text-slate-500" />;
+    if (sortField !== field) return <ArrowUpDown className="w-3 h-3 dg-text-muted" />;
     return sortDir === 'asc'
-      ? <ArrowUp className="w-3 h-3 text-blue-400" />
-      : <ArrowDown className="w-3 h-3 text-blue-400" />;
+      ? <ArrowUp className="w-3 h-3 dg-text-blue" />
+      : <ArrowDown className="w-3 h-3 dg-text-blue" />;
   };
 
   const totalPages = Math.ceil(total / pageSize);
@@ -141,10 +141,10 @@ export default function HostMonitorDashboard() {
 
   // 状态标签颜色
   const statusBadge = (status: string) => {
-    if (status === 'online') return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 text-[11px]">在线</Badge>;
-    if (status === 'running') return <Badge className="bg-blue-500/20 text-blue-400 border-blue-500/30 text-[11px]">运行中</Badge>;
-    if (status === 'stopped') return <Badge className="bg-slate-500/20 text-slate-400 border-slate-500/30 text-[11px]">已停止</Badge>;
-    return <Badge variant="outline" className="text-[11px] text-slate-500">{status || '--'}</Badge>;
+    if (status === 'online') return <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-[11px]">在线</Badge>;
+    if (status === 'running') return <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-[11px]">运行中</Badge>;
+    if (status === 'stopped') return <Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-[11px]">已停止</Badge>;
+    return <Badge variant="outline" className="text-[11px] dg-text-muted">{status || '--'}</Badge>;
   };
 
   return (
@@ -153,7 +153,7 @@ export default function HostMonitorDashboard() {
       <div className="grid grid-cols-6 gap-3">
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-3 flex items-center gap-2.5">
-            <div className="p-1.5 rounded-lg bg-blue-500/10"><Server className="h-4 w-4 text-blue-400" /></div>
+            <div className="p-1.5 rounded-lg bg-blue-500/10"><Server className="h-4 w-4 dg-text-blue" /></div>
             <div>
               <div className="text-xl font-bold text-[var(--dg-text-primary)]">{stats.total}</div>
               <div className="text-[10px] text-[var(--dg-text-muted)]">主机总数</div>
@@ -162,18 +162,18 @@ export default function HostMonitorDashboard() {
         </Card>
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-3 flex items-center gap-2.5">
-            <div className="p-1.5 rounded-lg bg-emerald-500/10"><Wifi className="h-4 w-4 text-emerald-400" /></div>
+            <div className="p-1.5 rounded-lg bg-emerald-500/10"><Wifi className="h-4 w-4 dg-text-green" /></div>
             <div>
-              <div className="text-xl font-bold text-emerald-400">{stats.online}</div>
+              <div className="text-xl font-bold dg-text-green">{stats.online}</div>
               <div className="text-[10px] text-[var(--dg-text-muted)]">Agent 在线</div>
             </div>
           </CardContent>
         </Card>
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-3 flex items-center gap-2.5">
-            <div className="p-1.5 rounded-lg bg-slate-500/10"><WifiOff className="h-4 w-4 text-slate-400" /></div>
+            <div className="p-1.5 rounded-lg bg-[var(--dg-bg-active)]/10"><WifiOff className="h-4 w-4 dg-text-secondary" /></div>
             <div>
-              <div className="text-xl font-bold text-slate-400">{stats.offline}</div>
+              <div className="text-xl font-bold dg-text-secondary">{stats.offline}</div>
               <div className="text-[10px] text-[var(--dg-text-muted)]">离线</div>
             </div>
           </CardContent>
@@ -182,12 +182,12 @@ export default function HostMonitorDashboard() {
           const onlines = hosts.filter((h: JsonData) => h.agent_status === 'online');
           const avgCpu = onlines.length > 0 ? onlines.reduce((s: number, h: JsonData) => s + (h.cpu_usage || 0), 0) / onlines.length : 0;
           const avgMem = onlines.length > 0 ? onlines.reduce((s: number, h: JsonData) => s + (h.memory_usage || 0), 0) / onlines.length : 0;
-          const cpuColor = avgCpu > 85 ? 'text-red-400' : avgCpu > 60 ? 'text-amber-400' : 'text-emerald-400';
-          const memColor = avgMem > 85 ? 'text-red-400' : avgMem > 60 ? 'text-amber-400' : 'text-emerald-400';
+          const cpuColor = avgCpu > 85 ? 'dg-text-red' : avgCpu > 60 ? 'dg-text-yellow' : 'dg-text-green';
+          const memColor = avgMem > 85 ? 'dg-text-red' : avgMem > 60 ? 'dg-text-yellow' : 'dg-text-green';
           return (<>
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-3 flex items-center gap-2.5">
-                <div className="p-1.5 rounded-lg bg-red-500/10"><Cpu className="h-4 w-4 text-red-400" /></div>
+                <div className="p-1.5 rounded-lg bg-red-500/10"><Cpu className="h-4 w-4 dg-text-red" /></div>
                 <div>
                   <div className={`text-xl font-bold ${cpuColor}`}>{avgCpu.toFixed(1)}<span className="text-sm">%</span></div>
                   <div className="text-[10px] text-[var(--dg-text-muted)]">平均 CPU</div>
@@ -196,7 +196,7 @@ export default function HostMonitorDashboard() {
             </Card>
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-3 flex items-center gap-2.5">
-                <div className="p-1.5 rounded-lg bg-amber-500/10"><Server className="h-4 w-4 text-amber-400" /></div>
+                <div className="p-1.5 rounded-lg bg-amber-500/10"><Server className="h-4 w-4 dg-text-yellow" /></div>
                 <div>
                   <div className={`text-xl font-bold ${memColor}`}>{avgMem.toFixed(1)}<span className="text-sm">%</span></div>
                   <div className="text-[10px] text-[var(--dg-text-muted)]">平均内存</div>
@@ -214,9 +214,9 @@ export default function HostMonitorDashboard() {
           <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm flex items-center gap-2 text-[var(--dg-text-primary)]">
-                <Cpu className="h-4 w-4 text-red-400" />
+                <Cpu className="h-4 w-4 dg-text-red" />
                 CPU 使用率 Top 5
-                <Badge variant="outline" className="text-[10px] bg-red-500/10 text-red-400 border-red-500/30">阈值: 60% / 85%</Badge>
+                <Badge variant="outline" className="text-[10px] bg-red-500/10 dg-text-red border-red-500/30">阈值: 60% / 85%</Badge>
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-2">
@@ -229,7 +229,7 @@ export default function HostMonitorDashboard() {
                   return (
                     <div key={h.id} className="flex items-center gap-2">
                       <span className="text-xs text-[var(--dg-text-secondary)] w-20 truncate" title={h.hostname}>{h.hostname}</span>
-                      <div className="flex-1 h-4 rounded bg-slate-700/50 overflow-hidden">
+                      <div className="flex-1 h-4 rounded bg-[var(--dg-bg-active)]/50 overflow-hidden">
                         <div
                           className="h-full rounded transition-all"
                           style={{
@@ -243,7 +243,7 @@ export default function HostMonitorDashboard() {
                         />
                       </div>
                       <span className={`text-xs font-mono w-10 text-right ${
-                        val >= 85 ? 'text-red-400' : val >= 60 ? 'text-amber-400' : 'text-emerald-400'
+                        val >= 85 ? 'dg-text-red' : val >= 60 ? 'dg-text-yellow' : 'dg-text-green'
                       }`}>{val.toFixed(1)}%</span>
                     </div>
                   );
@@ -255,9 +255,9 @@ export default function HostMonitorDashboard() {
           <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm flex items-center gap-2 text-[var(--dg-text-primary)]">
-                <Server className="h-4 w-4 text-amber-400" />
+                <Server className="h-4 w-4 dg-text-yellow" />
                 内存使用率 Top 5
-                <Badge variant="outline" className="text-[10px] bg-amber-500/10 text-amber-400 border-amber-500/30">阈值: 60% / 85%</Badge>
+                <Badge variant="outline" className="text-[10px] bg-amber-500/10 dg-text-yellow border-amber-500/30">阈值: 60% / 85%</Badge>
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-2">
@@ -270,7 +270,7 @@ export default function HostMonitorDashboard() {
                   return (
                     <div key={h.id} className="flex items-center gap-2">
                       <span className="text-xs text-[var(--dg-text-secondary)] w-20 truncate" title={h.hostname}>{h.hostname}</span>
-                      <div className="flex-1 h-4 rounded bg-slate-700/50 overflow-hidden">
+                      <div className="flex-1 h-4 rounded bg-[var(--dg-bg-active)]/50 overflow-hidden">
                         <div
                           className="h-full rounded transition-all"
                           style={{
@@ -284,7 +284,7 @@ export default function HostMonitorDashboard() {
                         />
                       </div>
                       <span className={`text-xs font-mono w-10 text-right ${
-                        val >= 85 ? 'text-red-400' : val >= 60 ? 'text-amber-400' : 'text-emerald-400'
+                        val >= 85 ? 'dg-text-red' : val >= 60 ? 'dg-text-yellow' : 'dg-text-green'
                       }`}>{val.toFixed(1)}%</span>
                     </div>
                   );
@@ -299,13 +299,13 @@ export default function HostMonitorDashboard() {
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Activity className="h-5 w-5 text-emerald-400" />
+              <Activity className="h-5 w-5 dg-text-green" />
               <CardTitle className="text-base text-[var(--dg-text-primary)]">主机监控列表</CardTitle>
-              <Badge variant="outline" className="text-xs bg-emerald-500/10 text-emerald-400 border-emerald-500/30">实时</Badge>
+              <Badge variant="outline" className="text-xs bg-emerald-500/10 dg-text-green border-emerald-500/30">实时</Badge>
             </div>
             <div className="flex items-center gap-2">
               <div className="relative">
-                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
                 <Input
                   className="w-[200px] pl-8 h-8 text-sm bg-[var(--dg-bg-primary)]"
                   placeholder="搜索主机名/IP..."
@@ -324,12 +324,12 @@ export default function HostMonitorDashboard() {
         <CardContent className="p-0">
           {loading ? (
             <div className="py-16 text-center text-[var(--dg-text-muted)]">
-              <Activity className="h-8 w-8 mx-auto mb-2 animate-spin text-emerald-400" />
+              <Activity className="h-8 w-8 mx-auto mb-2 animate-spin dg-text-green" />
               <p className="text-sm">加载中...</p>
             </div>
           ) : sorted.length === 0 ? (
             <div className="py-16 text-center text-[var(--dg-text-muted)]">
-              <Server className="h-10 w-10 mx-auto mb-2 text-slate-600" />
+              <Server className="h-10 w-10 mx-auto mb-2 dg-text-muted" />
               <p className="text-sm">暂无主机数据</p>
               <p className="text-xs mt-1">请先添加服务器，或等待 Agent 上报数据</p>
             </div>
@@ -369,7 +369,7 @@ export default function HostMonitorDashboard() {
                         {/* 主机名/ID */}
                         <td className="px-3 py-2">
                           <div className="flex items-center gap-2">
-                            <div className={`w-2 h-2 rounded-full flex-shrink-0 ${h.agent_status === 'online' ? 'bg-emerald-400' : h.status === 'running' ? 'bg-blue-400' : 'bg-slate-500'}`} />
+                            <div className={`w-2 h-2 rounded-full flex-shrink-0 ${h.agent_status === 'online' ? 'bg-emerald-400' : h.status === 'running' ? 'bg-blue-400' : 'bg-[var(--dg-bg-active)]'}`} />
                             <div>
                               <div className="text-sm font-medium text-[var(--dg-text-primary)]">{h.hostname}</div>
                               <div className="text-[10px] text-[var(--dg-text-muted)]">ID: {h.id}</div>
@@ -387,21 +387,21 @@ export default function HostMonitorDashboard() {
                         {/* CPU 使用率 */}
                         <td className="px-3 py-2">
                           <div className="flex items-center gap-1.5">
-                            <Cpu className="h-3 w-3 text-red-400 flex-shrink-0" />
+                            <Cpu className="h-3 w-3 dg-text-red flex-shrink-0" />
                             {getUsageBar(h.cpu_usage)}
                           </div>
                         </td>
                         {/* 内存使用率 */}
                         <td className="px-3 py-2">
                           <div className="flex items-center gap-1.5">
-                            <Server className="h-3 w-3 text-amber-400 flex-shrink-0" />
+                            <Server className="h-3 w-3 dg-text-yellow flex-shrink-0" />
                             {getUsageBar(h.memory_usage)}
                           </div>
                         </td>
                         {/* 磁盘使用率 */}
                         <td className="px-3 py-2">
                           <div className="flex items-center gap-1.5">
-                            <HardDrive className="h-3 w-3 text-orange-400 flex-shrink-0" />
+                            <HardDrive className="h-3 w-3 dg-text-orange flex-shrink-0" />
                             {getUsageBar(h.disk_usage)}
                           </div>
                         </td>
@@ -413,7 +413,7 @@ export default function HostMonitorDashboard() {
                         </td>
                         {/* IP 地址 */}
                         <td className="px-3 py-2">
-                          <code className="text-xs text-slate-300 font-mono">{h.ip || '--'}</code>
+                          <code className="text-xs text-[var(--dg-text-secondary)] font-mono">{h.ip || '--'}</code>
                         </td>
                         {/* 操作栏 */}
                         <td className="px-3 py-2">
@@ -421,7 +421,7 @@ export default function HostMonitorDashboard() {
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="h-7 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10"
+                              className="h-7 text-xs dg-text-blue hover:text-blue-300 hover:bg-blue-500/10"
                               onClick={() => navigate(`/monitor-center?host=${encodeURIComponent(h.hostname)}`)}
                               title="查看监控图表"
                             >
@@ -431,7 +431,7 @@ export default function HostMonitorDashboard() {
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="h-7 text-xs text-amber-400 hover:text-amber-300 hover:bg-amber-500/10"
+                              className="h-7 text-xs dg-text-yellow hover:text-amber-300 hover:bg-amber-500/10"
                               onClick={() => navigate(`/alerts?hostname=${encodeURIComponent(h.hostname)}`)}
                               title="查看报警规则"
                             >
diff --git a/frontend/src/components/monitor/dashboard/PrometheusDashboard.tsx b/frontend/src/components/monitor/dashboard/PrometheusDashboard.tsx
index 7c857f0..2bc9cd8 100644
--- a/frontend/src/components/monitor/dashboard/PrometheusDashboard.tsx
+++ b/frontend/src/components/monitor/dashboard/PrometheusDashboard.tsx
@@ -58,7 +58,7 @@ const K8sPanel: React.FC<{ d: JsonData}> = ({ d }) => (
       ]}
     />
     <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3 max-h-60 overflow-y-auto">
-      <div className="text-xs font-medium mb-2 flex items-center gap-1"><Cpu className="w-3 h-3 text-purple-400" />节点 CPU / 内存利用率</div>
+      <div className="text-xs font-medium mb-2 flex items-center gap-1"><Cpu className="w-3 h-3 dg-text-purple" />节点 CPU / 内存利用率</div>
       {(d.nodeCPU || []).map((n: JsonData, i: number) => {
         const mem = (d.nodeMem || []).find((m: JsonData) => m.node === n.node);
         return <div key={i} className="flex items-center gap-3 text-[11px] mb-1.5"><span className="w-28 truncate" title={n.node}>{n.node}</span><MiniBar val={Number(n.value||0)} label={`${Number(n.value||0).toFixed(1)}%`} /><MiniBar val={Number(mem?.value||0)} label={`${Number(mem?.value||0).toFixed(1)}%`} color="bg-blue-500" /></div>;
@@ -82,7 +82,7 @@ const NodePanel: React.FC<{ d: JsonData}> = ({ d }) => (
           const tx = (d.netTx||[]).find((x: JsonData)=>x.instance===inst);
           return <tr key={i} className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
             <td className="px-3 py-2 font-medium">{n.nodename||inst}</td>
-            <td className="px-3 py-2"><Badge className={`text-[10px] ${up?.value===1?'bg-emerald-500/20 text-emerald-400':'bg-red-500/20 text-red-400'}`}>{up?.value===1?'UP':'DOWN'}</Badge></td>
+            <td className="px-3 py-2"><Badge className={`text-[10px] ${up?.value===1?'bg-emerald-500/20 dg-text-green':'bg-red-500/20 dg-text-red'}`}>{up?.value===1?'UP':'DOWN'}</Badge></td>
             <td className="px-3 py-2"><MiniBar val={Number(cpu?.value||0)} label={`${Number(cpu?.value||0).toFixed(1)}%`} /></td>
             <td className="px-3 py-2"><MiniBar val={Number(mem?.value||0)} label={`${Number(mem?.value||0).toFixed(1)}%`} color="bg-blue-500" /></td>
             <td className="px-3 py-2"><MiniBar val={Number(disk?.value||0)} label={`${Number(disk?.value||0).toFixed(1)}%`} color="bg-amber-500" /></td>
@@ -116,8 +116,8 @@ const JvmPanel: React.FC<{ d: JsonData}> = ({ d }) => {
       <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold">{uptime>86400?`${(uptime/86400).toFixed(1)}d`:`${(uptime/3600).toFixed(1)}h`}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Uptime</div></CardContent></Card>
       <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><MiniBar val={h} label={`${h.toFixed(1)}%`} color={h>80?'bg-orange-500':'bg-purple-500'} /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Heap</div></CardContent></Card>
       <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><MiniBar val={Number(d.nonHeapUsed?.[0]?.value||0)} label={`${Number(d.nonHeapUsed?.[0]?.value||0).toFixed(1)}%`} color="bg-blue-500" /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Non-Heap</div></CardContent></Card>
-      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-emerald-400">{d.threadCount?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Threads</div></CardContent></Card>
-      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-amber-400">{Number(d.gcPause?.[0]?.value||0).toFixed(3)}</div><div className="text-[10px] text-[var(--dg-text-muted)]">GC Pause (s)</div></CardContent></Card>
+      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold dg-text-green">{d.threadCount?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Threads</div></CardContent></Card>
+      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold dg-text-yellow">{Number(d.gcPause?.[0]?.value||0).toFixed(3)}</div><div className="text-[10px] text-[var(--dg-text-muted)]">GC Pause (s)</div></CardContent></Card>
     </div>
   );
 };
@@ -168,15 +168,15 @@ export const PrometheusDashboard: React.FC<Props> = ({ dsUrl }) => {
     <Card className="bg-[var(--dg-bg-secondary)] border-purple-500/20">
       <CardHeader className="py-3 px-4 pb-2">
         <div className="flex items-center gap-2">
-          <Activity className="h-4 w-4 text-purple-400" />
+          <Activity className="h-4 w-4 dg-text-purple" />
           <CardTitle className="text-sm font-medium">Prometheus 监控</CardTitle>
-          {connected && <Badge className="text-[10px] bg-purple-500/10 text-purple-400">{targets} targets</Badge>}
+          {connected && <Badge className="text-[10px] bg-purple-500/10 dg-text-purple">{targets} targets</Badge>}
           {connected && <div className="ml-auto"><Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refresh}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button></div>}
         </div>
       </CardHeader>
       <CardContent className="px-4 pb-3 pt-0">
-        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-purple-400" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
-        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400"><AlertTriangle className="h-4 w-4 inline mr-1" />{error}</div>)
+        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin dg-text-purple" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
+        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs dg-text-red"><AlertTriangle className="h-4 w-4 inline mr-1" />{error}</div>)
         : (
           <Tabs value={tab} onValueChange={setTab}>
             <TabsList className="bg-[var(--dg-bg-tertiary)] mb-3">
diff --git a/frontend/src/components/monitor/dashboard/ZabbixDashboard.tsx b/frontend/src/components/monitor/dashboard/ZabbixDashboard.tsx
index 130fa40..d1d540d 100644
--- a/frontend/src/components/monitor/dashboard/ZabbixDashboard.tsx
+++ b/frontend/src/components/monitor/dashboard/ZabbixDashboard.tsx
@@ -66,8 +66,8 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
   });
 
   const SI = ({ f }: { f: SortField }) => {
-    if (sortField !== f) return <ArrowUpDown className="w-3 h-3 text-slate-500" />;
-    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3 text-blue-400" /> : <ArrowDown className="w-3 h-3 text-blue-400" />;
+    if (sortField !== f) return <ArrowUpDown className="w-3 h-3 dg-text-muted" />;
+    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3 dg-text-blue" /> : <ArrowDown className="w-3 h-3 dg-text-blue" />;
   };
 
   const bar = (v: number, label: string) => (
@@ -75,7 +75,7 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
       <div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden">
         <div className={`h-full rounded-full transition-all duration-500 ${v >= 80 ? 'bg-orange-500' : 'bg-blue-500'}`} style={{ width: `${Math.min(v, 100)}%` }} />
       </div>
-      <span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'text-orange-400' : ''}`}>{label}</span>
+      <span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'dg-text-orange' : ''}`}>{label}</span>
     </div>
   );
 
@@ -93,17 +93,17 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
     <Card className="bg-[var(--dg-bg-secondary)] border-blue-500/20">
       <CardHeader className="py-3 px-4 pb-2">
         <div className="flex items-center gap-2">
-          <Activity className="h-4 w-4 text-blue-400" />
+          <Activity className="h-4 w-4 dg-text-blue" />
           <CardTitle className="text-sm font-medium">Zabbix 主机监控</CardTitle>
-          {version && <Badge className="text-[10px] bg-blue-500/10 text-blue-400">v{version}</Badge>}
+          {version && <Badge className="text-[10px] bg-blue-500/10 dg-text-blue">v{version}</Badge>}
           {connected && <span className="text-[10px] text-[var(--dg-text-muted)] ml-2">{hosts.length} 台</span>}
           {connected && <div className="ml-auto flex gap-1"><Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refresh}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button></div>}
         </div>
       </CardHeader>
       <CardContent className="px-4 pb-3 pt-0">
-        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-blue-400" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
-        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400 flex items-start gap-2"><AlertTriangle className="h-4 w-4 mt-0.5" /><span>{error}</span></div>)
-        : hosts.length === 0 ? (<div className="text-center py-8 text-[var(--dg-text-muted)]"><Server className="h-8 w-8 mx-auto mb-2 text-slate-600" /><p className="text-sm">未找到被监控的 Zabbix 主机</p></div>)
+        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin dg-text-blue" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
+        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs dg-text-red flex items-start gap-2"><AlertTriangle className="h-4 w-4 mt-0.5" /><span>{error}</span></div>)
+        : hosts.length === 0 ? (<div className="text-center py-8 text-[var(--dg-text-muted)]"><Server className="h-8 w-8 mx-auto mb-2 dg-text-muted" /><p className="text-sm">未找到被监控的 Zabbix 主机</p></div>)
         : (
           <div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
             <table className="w-full text-xs">
@@ -119,14 +119,14 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
               <tbody>
                 {sorted.map((h, i) => (
                   <tr key={h.hostid || i} className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50">
-                    <td className="px-3 py-2.5 whitespace-nowrap"><Badge className={`text-[10px] ${h.available === '1' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}`}><Wifi className="w-3 h-3 mr-1" />{h.available === '1' ? 'UP' : 'DOWN'}</Badge> <span className="font-medium text-[var(--dg-text-primary)] ml-1">{h.name || h.hostname}</span></td>
+                    <td className="px-3 py-2.5 whitespace-nowrap"><Badge className={`text-[10px] ${h.available === '1' ? 'bg-emerald-500/20 dg-text-green' : 'bg-red-500/20 dg-text-red'}`}><Wifi className="w-3 h-3 mr-1" />{h.available === '1' ? 'UP' : 'DOWN'}</Badge> <span className="font-medium text-[var(--dg-text-primary)] ml-1">{h.name || h.hostname}</span></td>
                     <td className="px-3 py-2.5">{bar(Number(h.cpu_usage || 0), `${Number(h.cpu_usage || 0).toFixed(1)}%`)}</td>
                     <td className="px-3 py-2.5">{bar(Number(h.memory_usage || 0), `${Number(h.memory_usage || 0).toFixed(1)}%`)}</td>
                     <td className="px-3 py-2.5">{bar(Number(h.disk_usage || 0), `${Number(h.disk_usage || 0).toFixed(1)}%`)}</td>
                     <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.load5 > 0 ? h.load5.toFixed(1) : '—'}</td>
                     <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{fmtBps(h.net_in_bps)}</td>
                     <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{fmtBps(h.net_out_bps)}</td>
-                    <td className="px-3 py-2.5 text-center"><span className={`font-mono font-bold ${h.problem_count > 0 ? (h.problem_count > 2 ? 'text-red-400' : 'text-amber-400') : 'text-emerald-400'}`}>{h.problem_count > 0 ? <><AlertTriangle className="w-3 h-3 inline mr-1" />{h.problem_count}</> : '0'}</span></td>
+                    <td className="px-3 py-2.5 text-center"><span className={`font-mono font-bold ${h.problem_count > 0 ? (h.problem_count > 2 ? 'dg-text-red' : 'dg-text-yellow') : 'dg-text-green'}`}>{h.problem_count > 0 ? <><AlertTriangle className="w-3 h-3 inline mr-1" />{h.problem_count}</> : '0'}</span></td>
                     <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.uptime_days > 0 ? `${h.uptime_days}d` : '—'}</td>
                   </tr>
                 ))}
diff --git a/frontend/src/components/monitor/datasource/DatasourcePage.tsx b/frontend/src/components/monitor/datasource/DatasourcePage.tsx
index 2c50441..0d8f51d 100644
--- a/frontend/src/components/monitor/datasource/DatasourcePage.tsx
+++ b/frontend/src/components/monitor/datasource/DatasourcePage.tsx
@@ -1,47 +1,30 @@
 // 数据源管理页面 — Prometheus + Zabbix 双 Tab // Logan.Li
 import { useState } from 'react';
 import { Database } from 'lucide-react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { PageShell } from '@/components/layout/PageShell';
 import PrometheusDatasourceManager from '@/components/monitor/datasource/PrometheusDatasourceManager';
 import ZabbixDatasourceManager from '@/components/monitor/datasource/ZabbixDatasourceManager';
 
 export default function DatasourcePage() {
   const [activeTab, setActiveTab] = useState('prometheus');
 
+  const pageTabs = [
+    { id: 'prometheus', label: 'Prometheus' },
+    { id: 'zabbix', label: 'Zabbix' },
+  ];
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <Database className="h-5 w-5 text-blue-400" />
-        <h1 className="text-xl font-bold text-[var(--dg-text-primary)]">数据源管理</h1>
-      </div>
-
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <TabsTrigger value="prometheus" className="data-[state=active]:bg-orange-500/10 data-[state=active]:text-orange-400">
-            <img
-              src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/prometheus.png"
-              className="w-4 h-4 rounded mr-1.5"
-              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
-            />
-            Prometheus
-          </TabsTrigger>
-          <TabsTrigger value="zabbix" className="data-[state=active]:bg-orange-500/10 data-[state=active]:text-orange-400">
-            <img
-              src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/zabbix.png"
-              className="w-4 h-4 rounded mr-1.5"
-              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
-            />
-            Zabbix
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="prometheus" className="mt-4">
-          <PrometheusDatasourceManager />
-        </TabsContent>
-        <TabsContent value="zabbix" className="mt-4">
-          <ZabbixDatasourceManager />
-        </TabsContent>
-      </Tabs>
-    </div>
+    <PageShell
+      variant="list"
+      title="数据源管理"
+      subtitle="管理 Prometheus 与 Zabbix 监控数据源"
+      icon={<Database className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+    >
+      {activeTab === 'prometheus' && <PrometheusDatasourceManager />}
+      {activeTab === 'zabbix' && <ZabbixDatasourceManager />}
+    </PageShell>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/monitor/datasource/PrometheusDatasourceManager.tsx b/frontend/src/components/monitor/datasource/PrometheusDatasourceManager.tsx
index 2214528..8494870 100644
--- a/frontend/src/components/monitor/datasource/PrometheusDatasourceManager.tsx
+++ b/frontend/src/components/monitor/datasource/PrometheusDatasourceManager.tsx
@@ -13,7 +13,7 @@ import {
 
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { usePromDatasources, usePromDatasourceMutations } from '@/hooks/api';
@@ -21,6 +21,9 @@ import { usePromDatasources, usePromDatasourceMutations } from '@/hooks/api';
 import type { PromDS } from './prometheus-ds/types';
 import { handleTestQuick } from './prometheus-ds/helpers';
 import PromDsFormDialog from './prometheus-ds/PromDsFormDialog';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { ContentPanel } from '@/components/layout/ContentPanel';
 
 export default function PrometheusDatasourceManager() {
   const _confirm = useConfirm();
@@ -69,145 +72,132 @@ export default function PrometheusDatasourceManager() {
   };
 
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <RefreshCw className="animate-spin w-8 h-8 text-[var(--dg-text-secondary)]" />
-      </div>
-    );
+    return <PageLoading />;
   }
 
-  return (
-    <div className="p-6 space-y-6 max-w-7xl mx-auto">
-      {/* 页头 */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">数据源管理</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
-            Prometheus 数据源配置，用于指标监控与监控大屏
-          </p>
-        </div>
-        <Button onClick={openCreate} className="gap-2">
-          <Plus className="w-4 h-4" />
-          添加数据源
-        </Button>
-      </div>
+  const toolbar = (
+    <div className="flex items-center justify-between w-full">
+      <span className="text-sm dg-text-secondary flex items-center gap-2">
+        <Database className="w-4 h-4 dg-text-blue" />
+        Prometheus 数据源
+        <Badge variant="secondary" className="dg-badge-muted">{sources.length}</Badge>
+      </span>
+      <Button onClick={openCreate} size="sm" className="dg-btn-primary">
+        <Plus className="w-4 h-4 mr-1" />
+        添加数据源
+      </Button>
+    </div>
+  );
 
-      {/* 数据源列表 */}
-      <Card className="border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Database className="w-4 h-4 text-blue-400" />
-            已配置的数据源
-            <Badge variant="secondary" className="ml-2">{sources.length}</Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-0">
-          {sources.length === 0 ? (
-            <div className="py-12 text-center text-[var(--dg-text-secondary)]">
-              <Database className="w-12 h-12 mx-auto mb-3 opacity-30" />
-              <p className="text-sm">暂无数据源</p>
-              <p className="text-xs mt-1">点击「添加数据源」开始配置</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead className="border-b border-[var(--dg-border)]">
-                  <tr className="text-xs text-[var(--dg-text-secondary)]">
-                    <th className="text-left py-3 px-4 font-medium">名称</th>
-                    <th className="text-left py-3 px-4 font-medium">URL</th>
-                    <th className="text-left py-3 px-4 font-medium w-20">默认</th>
-                    <th className="text-left py-3 px-4 font-medium w-16">状态</th>
-                    <th className="text-right py-3 px-4 font-medium w-36">操作</th>
+  return (
+    <div className="space-y-4">
+      <ContentPanel toolbar={toolbar} noPadding>
+        {sources.length === 0 ? (
+          <PageEmpty
+            icon={<Database className="h-12 w-12" />}
+            title="暂无 Prometheus 数据源"
+            description="添加数据源后可用于指标监控与监控大屏"
+            action={(
+              <Button onClick={openCreate} size="sm" className="dg-btn-primary">
+                <Plus className="w-4 h-4 mr-1" />添加数据源
+              </Button>
+            )}
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="border-b border-[var(--border-default)]">
+                <tr className="text-xs dg-text-secondary">
+                  <th className="text-left py-3 px-4 font-medium">名称</th>
+                  <th className="text-left py-3 px-4 font-medium">URL</th>
+                  <th className="text-left py-3 px-4 font-medium w-20">默认</th>
+                  <th className="text-left py-3 px-4 font-medium w-16">状态</th>
+                  <th className="text-right py-3 px-4 font-medium w-36">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sources.map(ds => (
+                  <tr
+                    key={ds.id}
+                    className="dg-table-row border-b border-[var(--border-subtle)]"
+                  >
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        <img
+                          src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/prometheus.png"
+                          alt="Prometheus"
+                          className="w-5 h-5 rounded"
+                          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                        />
+                        <div>
+                          <span className="text-sm font-medium text-[var(--text-primary)]">{ds.name}</span>
+                          {ds.basic_auth && <Key className="w-3 h-3 inline ml-1.5 dg-text-yellow" />}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <code className="text-xs dg-text-blue bg-[var(--surface-inset)] px-2 py-0.5 rounded max-w-[320px] block truncate"
+                        title={ds.url}>
+                        {ds.url}
+                      </code>
+                    </td>
+                    <td className="py-3 px-4">
+                      {ds.is_default ? (
+                        <span className="dg-badge-yellow"><Star className="w-3 h-3 mr-1 inline" />默认</span>
+                      ) : (
+                        <span className="text-xs dg-text-muted">--</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      {ds.status === 1 ? (
+                        <span className="dg-status-running">启用</span>
+                      ) : (
+                        <span className="dg-badge-muted">禁用</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      <div className="flex items-center justify-end gap-1">
+                        <Button
+                          variant="ghost" size="sm"
+                          className="h-8 px-2"
+                          onClick={() => handleTestQuick(ds)}
+                          title="测试连接"
+                        >
+                          <Plug className="w-3.5 h-3.5" />
+                        </Button>
+                        {!ds.is_default && (
+                          <Button
+                            variant="ghost" size="sm"
+                            className="h-8 px-2 dg-text-yellow"
+                            onClick={() => handleSetDefault(ds)}
+                            title="设为默认"
+                          >
+                            <Star className="w-3.5 h-3.5" />
+                          </Button>
+                        )}
+                        <Button
+                          variant="ghost" size="sm"
+                          className="h-8 px-2"
+                          onClick={() => openEdit(ds)}
+                        >
+                          <Edit className="w-3.5 h-3.5" />
+                        </Button>
+                        <Button
+                          variant="ghost" size="sm"
+                          className="h-8 px-2 dg-text-red hover:dg-text-red"
+                          onClick={() => handleDelete(ds)}
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </Button>
+                      </div>
+                    </td>
                   </tr>
-                </thead>
-                <tbody>
-                  {sources.map(ds => (
-                    <tr
-                      key={ds.id}
-                      className="border-b border-[var(--dg-border)]/50 hover:bg-[var(--dg-bg-tertiary)]/50 transition-colors"
-                    >
-                      <td className="py-3 px-4">
-                        <div className="flex items-center gap-2">
-                          <img
-                            src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/prometheus.png"
-                            alt="Prometheus"
-                            className="w-5 h-5 rounded"
-                            onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
-                          />
-                          <div>
-                            <span className="text-sm font-medium text-[var(--dg-text-primary)]">{ds.name}</span>
-                            {ds.basic_auth && <Key className="w-3 h-3 inline ml-1.5 text-amber-400" />}
-                          </div>
-                        </div>
-                      </td>
-                      <td className="py-3 px-4">
-                        <code className="text-xs text-blue-300 bg-slate-800/50 px-2 py-0.5 rounded max-w-[320px] block truncate"
-                          title={ds.url}>
-                          {ds.url}
-                        </code>
-                      </td>
-                      <td className="py-3 px-4">
-                        {ds.is_default ? (
-                          <Badge variant="default" className="bg-amber-500/15 text-amber-400 border-amber-500/30 text-xs">
-                            <Star className="w-3 h-3 mr-1" /> 默认
-                          </Badge>
-                        ) : (
-                          <span className="text-xs text-[var(--dg-text-secondary)]">--</span>
-                        )}
-                      </td>
-                      <td className="py-3 px-4">
-                        {ds.status === 1 ? (
-                          <Badge variant="default" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30 text-xs">
-                            启用
-                          </Badge>
-                        ) : (
-                          <Badge variant="secondary" className="text-xs">禁用</Badge>
-                        )}
-                      </td>
-                      <td className="py-3 px-4">
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            variant="ghost" size="sm"
-                            className="h-8 px-2"
-                            onClick={() => handleTestQuick(ds)}
-                            title="测试连接"
-                          >
-                            <Plug className="w-3.5 h-3.5" />
-                          </Button>
-                          {!ds.is_default && (
-                            <Button
-                              variant="ghost" size="sm"
-                              className="h-8 px-2 text-amber-400 hover:text-amber-300"
-                              onClick={() => handleSetDefault(ds)}
-                              title="设为默认"
-                            >
-                              <Star className="w-3.5 h-3.5" />
-                            </Button>
-                          )}
-                          <Button
-                            variant="ghost" size="sm"
-                            className="h-8 px-2"
-                            onClick={() => openEdit(ds)}
-                          >
-                            <Edit className="w-3.5 h-3.5" />
-                          </Button>
-                          <Button
-                            variant="ghost" size="sm"
-                            className="h-8 px-2 text-red-400 hover:text-red-300"
-                            onClick={() => handleDelete(ds)}
-                          >
-                            <Trash2 className="w-3.5 h-3.5" />
-                          </Button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </ContentPanel>
 
       <PromDsFormDialog
         open={dialogOpen}
diff --git a/frontend/src/components/monitor/datasource/ZabbixDatasourceManager.tsx b/frontend/src/components/monitor/datasource/ZabbixDatasourceManager.tsx
index dea458b..8103a56 100644
--- a/frontend/src/components/monitor/datasource/ZabbixDatasourceManager.tsx
+++ b/frontend/src/components/monitor/datasource/ZabbixDatasourceManager.tsx
@@ -224,12 +224,12 @@ export default function ZabbixDatasourceManager() {
                 <div className="flex items-start justify-between">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
-                      <div className={`w-2 h-2 rounded-full ${ds.status === 1 ? 'bg-emerald-400' : 'bg-slate-500'}`} />
+                      <div className={`w-2 h-2 rounded-full ${ds.status === 1 ? 'bg-emerald-400' : 'bg-[var(--dg-bg-active)]'}`} />
                       <span className="font-medium text-[var(--dg-text-primary)]">{ds.name}</span>
-                      {ds.is_default && <Badge className="bg-amber-500/20 text-amber-400 text-[10px]"><Star className="w-3 h-3 mr-0.5" />默认</Badge>}
+                      {ds.is_default && <Badge className="bg-amber-500/20 dg-text-yellow text-[10px]"><Star className="w-3 h-3 mr-0.5" />默认</Badge>}
                       {ds.status === 1
-                        ? <Badge className="bg-emerald-500/20 text-emerald-400 text-[10px]">启用</Badge>
-                        : <Badge className="bg-slate-500/20 text-slate-400 text-[10px]">禁用</Badge>}
+                        ? <Badge className="bg-emerald-500/20 dg-text-green text-[10px]">启用</Badge>
+                        : <Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary text-[10px]">禁用</Badge>}
                     </div>
                     <div className="text-xs text-[var(--dg-text-muted)] space-x-3">
                       <code className="text-orange-300">{ds.url}</code>
@@ -239,14 +239,14 @@ export default function ZabbixDatasourceManager() {
                   </div>
                   <div className="flex items-center gap-1">
                     {!ds.is_default && (
-                      <Button variant="ghost" size="sm" className="h-7 text-xs text-amber-400" onClick={() => handleSetDefault(ds)}>
+                      <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-yellow" onClick={() => handleSetDefault(ds)}>
                         <Star className="w-3 h-3 mr-0.5" />默认
                       </Button>
                     )}
                     <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => openEdit(ds)}>
                       <Edit className="w-3 h-3 mr-0.5" />编辑
                     </Button>
-                    <Button variant="ghost" size="sm" className="h-7 text-xs text-red-400" onClick={() => handleDelete(ds)}>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red" onClick={() => handleDelete(ds)}>
                       <Trash2 className="w-3 h-3" />
                     </Button>
                   </div>
@@ -262,7 +262,7 @@ export default function ZabbixDatasourceManager() {
         <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <DialogHeader>
             <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
-              <Database className="h-5 w-5 text-orange-400" />
+              <Database className="h-5 w-5 dg-text-orange" />
               {editingId ? '编辑 Zabbix 数据源' : '新建 Zabbix 数据源'}
             </DialogTitle>
             <DialogDescription>
@@ -390,7 +390,7 @@ export default function ZabbixDatasourceManager() {
             {/* 测试结果 */}
             {testResult && (
               <div className={`flex items-center gap-2 p-2.5 rounded text-sm ${
-                testResult.success ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'
+                testResult.success ? 'bg-emerald-500/10 dg-text-green' : 'bg-red-500/10 dg-text-red'
               }`}>
                 {testResult.success ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                 {testResult.message}
diff --git a/frontend/src/components/monitor/datasource/prometheus-ds/PromDsFormDialog.tsx b/frontend/src/components/monitor/datasource/prometheus-ds/PromDsFormDialog.tsx
index 739569c..ce99a56 100644
--- a/frontend/src/components/monitor/datasource/prometheus-ds/PromDsFormDialog.tsx
+++ b/frontend/src/components/monitor/datasource/prometheus-ds/PromDsFormDialog.tsx
@@ -148,7 +148,7 @@ export default function PromDsFormDialog({
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-lg">
-            <Database className="w-5 h-5 text-orange-400" />
+            <Database className="w-5 h-5 dg-text-orange" />
             {editingId ? '编辑数据源' : '添加数据源'}
           </DialogTitle>
           <DialogDescription>
@@ -160,7 +160,7 @@ export default function PromDsFormDialog({
           {/* === Name & Default === */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <Label htmlFor="ds-name" className="text-sm">Name <span className="text-red-400">*</span></Label>
+              <Label htmlFor="ds-name" className="text-sm">Name <span className="dg-text-red">*</span></Label>
               <Input
                 id="ds-name"
                 placeholder="Prometheus 数据源名称"
@@ -187,7 +187,7 @@ export default function PromDsFormDialog({
               <Globe className="w-4 h-4" /> HTTP
             </h4>
             <div className="space-y-2">
-              <Label htmlFor="ds-url" className="text-sm">URL <span className="text-red-400">*</span></Label>
+              <Label htmlFor="ds-url" className="text-sm">URL <span className="dg-text-red">*</span></Label>
               <div className="flex gap-2">
                 <Select value={form.access} onValueChange={v => updateForm('access', v)}>
                   <SelectTrigger className="w-32 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-sm">
@@ -340,7 +340,7 @@ export default function PromDsFormDialog({
                       className="flex-1 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-sm h-8"
                     />
                     <Button
-                      variant="ghost" size="sm" className="h-8 w-8 p-0 text-red-400 hover:text-red-300"
+                      variant="ghost" size="sm" className="h-8 w-8 p-0 dg-text-red hover:dg-text-red"
                       onClick={() => removeHeader(idx)}
                     >
                       <X className="w-3.5 h-3.5" />
@@ -482,8 +482,8 @@ export default function PromDsFormDialog({
           {testResult && (
             <div className={`rounded-lg p-3 flex items-center gap-2 text-sm ${
               testResult.success
-                ? 'bg-emerald-500/10 border border-emerald-500/30 text-emerald-400'
-                : 'bg-red-500/10 border border-red-500/30 text-red-400'
+                ? 'bg-emerald-500/10 border border-emerald-500/30 dg-text-green'
+                : 'bg-red-500/10 border border-red-500/30 dg-text-red'
             }`}>
               {testResult.success
                 ? <CheckCircle className="w-4 h-4 shrink-0" />
diff --git a/frontend/src/components/monitor/log-center/EnhancedLogResults.tsx b/frontend/src/components/monitor/log-center/EnhancedLogResults.tsx
index 70d6449..c9d3a2e 100644
--- a/frontend/src/components/monitor/log-center/EnhancedLogResults.tsx
+++ b/frontend/src/components/monitor/log-center/EnhancedLogResults.tsx
@@ -33,11 +33,11 @@ type DedupMode = 'none' | 'exact' | 'numbers' | 'signature';
 
 function levelBadge(level?: string): string {
   const l = (level || '').toLowerCase();
-  if (l === 'error' || l === 'fatal' || l === 'err') return 'bg-red-500/15 text-red-400 border-red-500/30';
-  if (l === 'warn' || l === 'warning') return 'bg-amber-500/15 text-amber-400 border-amber-500/30';
-  if (l === 'info') return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
-  if (l === 'debug') return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
-  return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
+  if (l === 'error' || l === 'fatal' || l === 'err') return 'bg-red-500/15 dg-text-red border-red-500/30';
+  if (l === 'warn' || l === 'warning') return 'bg-amber-500/15 dg-text-yellow border-amber-500/30';
+  if (l === 'info') return 'bg-emerald-500/15 dg-text-green border-emerald-500/30';
+  if (l === 'debug') return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
+  return 'bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]';
 }
 
 function levelColorText(level?: string): string {
@@ -158,7 +158,7 @@ function RawLogView({
           className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity mt-0.5"
           style={{ color: 'var(--dg-text-muted)' }}
         >
-          {copied ? <Check className="h-3 w-3 text-green-400" /> : <Copy className="h-3 w-3" />}
+          {copied ? <Check className="h-3 w-3 dg-text-green" /> : <Copy className="h-3 w-3" />}
         </button>
       </div>
 
diff --git a/frontend/src/components/monitor/log-center/LogAlertsPanel.tsx b/frontend/src/components/monitor/log-center/LogAlertsPanel.tsx
index d8fdb40..7df9cf4 100644
--- a/frontend/src/components/monitor/log-center/LogAlertsPanel.tsx
+++ b/frontend/src/components/monitor/log-center/LogAlertsPanel.tsx
@@ -49,9 +49,9 @@ export function LogAlertsPanel() {
   };
 
   const severityColor: Record<string, string> = {
-    critical: 'bg-red-500/15 text-red-400',
-    warning: 'bg-amber-500/15 text-amber-400',
-    info: 'bg-blue-500/15 text-blue-400',
+    critical: 'bg-red-500/15 dg-text-red',
+    warning: 'bg-amber-500/15 dg-text-yellow',
+    info: 'bg-blue-500/15 dg-text-blue',
   };
 
   return (
@@ -96,7 +96,7 @@ export function LogAlertsPanel() {
                   <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => { setEditing(rule); setDialogOpen(true); }}>
                     <Pencil className="h-3.5 w-3.5" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-red-400" onClick={() => handleDelete(rule)}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red" onClick={() => handleDelete(rule)}>
                     <Trash2 className="h-3.5 w-3.5" />
                   </Button>
                 </div>
diff --git a/frontend/src/components/monitor/log-center/LogCenter.tsx b/frontend/src/components/monitor/log-center/LogCenter.tsx
index d91b739..e333d74 100644
--- a/frontend/src/components/monitor/log-center/LogCenter.tsx
+++ b/frontend/src/components/monitor/log-center/LogCenter.tsx
@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import { Navigate, useParams } from 'react-router-dom';
 import { ScrollText } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { LogQueryProvider } from './LogQueryContext';
 import { UnifiedQueryPanel } from './UnifiedQueryPanel';
 import { LogDatasourcePage } from './LogDatasourcePage';
@@ -28,23 +29,19 @@ export default function LogCenter() {
 
   return (
     <LogQueryProvider>
-      <div className="space-y-4 pb-20">
-        <div className="flex items-center gap-3">
-          <div className="h-10 w-10 rounded-xl bg-[var(--dg-bg-tertiary)] flex items-center justify-center border border-[var(--dg-border)]">
-            <ScrollText className="h-5 w-5 text-[var(--dg-text-secondary)]" />
-          </div>
-          <div>
-            <h1 className="text-xl font-bold text-[var(--dg-text-primary)]">{meta.title}</h1>
-            <p className="text-sm text-[var(--dg-text-muted)]">{meta.description}</p>
-          </div>
-        </div>
-
+      <PageShell
+        variant="workspace"
+        title={meta.title}
+        subtitle={meta.description}
+        icon={<ScrollText className="h-5 w-5" />}
+        contentClassName="flex-1 min-h-0 pb-20"
+      >
         {(tab === 'loki' || tab === 'es') && meta.engine && (
           <UnifiedQueryPanel engine={meta.engine} onRuleCreated={() => setAlertReloadKey(k => k + 1)} />
         )}
         {tab === 'datasources' && <LogDatasourcePage />}
         {tab === 'alerts' && <LogAlertsPanel key={alertReloadKey} />}
-      </div>
+      </PageShell>
     </LogQueryProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/monitor/log-center/LogCenterArchBanner.tsx b/frontend/src/components/monitor/log-center/LogCenterArchBanner.tsx
index 7c96a16..e6ab54a 100644
--- a/frontend/src/components/monitor/log-center/LogCenterArchBanner.tsx
+++ b/frontend/src/components/monitor/log-center/LogCenterArchBanner.tsx
@@ -4,7 +4,7 @@ import { Info } from 'lucide-react';
 export function LogCenterArchBanner() {
   return (
     <div className="flex gap-3 rounded-lg border border-cyan-500/20 bg-cyan-500/5 px-4 py-3 text-xs text-[var(--dg-text-secondary)] leading-relaxed">
-      <Info className="h-4 w-4 shrink-0 text-cyan-400 mt-0.5" />
+      <Info className="h-4 w-4 shrink-0 dg-text-cyan mt-0.5" />
       <div>
         <p className="text-[var(--dg-text-primary)] font-medium mb-1">无状态查询网关</p>
         <p>
diff --git a/frontend/src/components/monitor/log-center/LogClusterPanel.tsx b/frontend/src/components/monitor/log-center/LogClusterPanel.tsx
index ff48739..1d01303 100644
--- a/frontend/src/components/monitor/log-center/LogClusterPanel.tsx
+++ b/frontend/src/components/monitor/log-center/LogClusterPanel.tsx
@@ -83,7 +83,7 @@ export function LogClusterPanel({ clusters }: Props) {
                 className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                 style={{ color: 'var(--dg-text-muted)' }}
               >
-                {copied === i ? <Check className="h-3 w-3 text-green-400" /> : <Copy className="h-3 w-3" />}
+                {copied === i ? <Check className="h-3 w-3 dg-text-green" /> : <Copy className="h-3 w-3" />}
               </button>
             </div>
 
diff --git a/frontend/src/components/monitor/log-center/LogDatasourcePage.tsx b/frontend/src/components/monitor/log-center/LogDatasourcePage.tsx
index 228c2b2..63560e0 100644
--- a/frontend/src/components/monitor/log-center/LogDatasourcePage.tsx
+++ b/frontend/src/components/monitor/log-center/LogDatasourcePage.tsx
@@ -87,8 +87,8 @@ export function LogDatasourcePage() {
 
   const engineLabel = (t: string) => t === 'loki' ? 'Loki' : 'Elasticsearch';
   const engineBadge = (t: string) => t === 'loki'
-    ? 'bg-orange-500/15 text-orange-400 border-orange-500/25'
-    : 'bg-cyan-500/15 text-cyan-400 border-cyan-500/25';
+    ? 'bg-orange-500/15 dg-text-orange border-orange-500/25'
+    : 'bg-cyan-500/15 dg-text-cyan border-cyan-500/25';
 
   // DataTable 列定义
   const columns: DataTableColumn<LogDataSource>[] = [
@@ -103,7 +103,7 @@ export function LogDatasourcePage() {
     },
     {
       key: 'is_default', header: '默认', width: 60, align: 'center', sortable: true,
-      render: (ds) => ds.is_default ? <Star className="h-4 w-4 text-amber-400 mx-auto" /> : <span className="text-xs text-[var(--dg-text-muted)]">—</span>,
+      render: (ds) => ds.is_default ? <Star className="h-4 w-4 dg-text-yellow mx-auto" /> : <span className="text-xs text-[var(--dg-text-muted)]">—</span>,
     },
     {
       key: 'actions', header: '操作', align: 'right', hideable: false,
@@ -114,7 +114,7 @@ export function LogDatasourcePage() {
             <Plug className="h-3.5 w-3.5" />
           </Button>
           {!ds.is_default && (
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-amber-400"
+            <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:dg-text-yellow"
               title="设为默认" onClick={() => handleSetDefault(ds)}>
               <Star className="h-3.5 w-3.5" />
             </Button>
@@ -123,7 +123,7 @@ export function LogDatasourcePage() {
             title="编辑" onClick={() => handleEdit(ds)}>
             <Pencil className="h-3.5 w-3.5" />
           </Button>
-          <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-red-400"
+          <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-muted)] hover:dg-text-red"
             title="删除" onClick={() => handleDelete(ds)}>
             <Trash2 className="h-3.5 w-3.5" />
           </Button>
diff --git a/frontend/src/components/monitor/trace/TraceManager.tsx b/frontend/src/components/monitor/trace/TraceManager.tsx
index 4e99e06..6b223fa 100644
--- a/frontend/src/components/monitor/trace/TraceManager.tsx
+++ b/frontend/src/components/monitor/trace/TraceManager.tsx
@@ -31,12 +31,14 @@ import {
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue
 } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { toast } from 'sonner';
 import { traceApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 interface Trace {
@@ -162,7 +164,7 @@ const TraceManager: React.FC = () => {
       case 'success': return 'bg-green-500';
       case 'error': return 'bg-red-500';
       case 'pending': return 'bg-yellow-500';
-      default: return 'bg-gray-500';
+      default: return 'bg-[var(--dg-bg-active)]';
     }
   };
 
@@ -257,28 +259,14 @@ const TraceManager: React.FC = () => {
     );
   };
 
-  return (
-    <div className="space-y-6">
-      {/* 统计卡片 */}
-      <StatStrip
-        items={[
-          { label: '总请求', value: services.reduce((sum, s) => sum + s.requestCount, 0).toLocaleString(), color: 'blue' },
-          { label: '错误率', value: `${(services.reduce((sum, s) => sum + s.errorRate, 0) / (services.length || 1)).toFixed(2)}%`, color: 'red' },
-          { label: '平均延迟', value: formatDuration(services.reduce((sum, s) => sum + s.avgDuration, 0) / (services.length || 1)), color: 'amber' },
-          { label: '服务数', value: services.length, color: 'purple' },
-        ]}
-      />
+  const pageTabs = [
+    { id: 'traces', label: '链路追踪' },
+    { id: 'services', label: '服务拓扑' },
+    { id: 'metrics', label: '性能指标' },
+  ];
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
-          <TabsTrigger value="traces">链路追踪</TabsTrigger>
-          <TabsTrigger value="services">服务拓扑</TabsTrigger>
-          <TabsTrigger value="metrics">性能指标</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="traces" className="space-y-4">
-          {/* 查询工具栏 */}
-          <div className="flex flex-wrap items-center justify-between gap-4">
+  const tracesToolbar = activeTab === 'traces' ? (
+    <div className="flex flex-wrap items-center justify-between gap-4 w-full">
             <div className="flex items-center gap-2 flex-1 min-w-[400px]">
               <div className="relative flex-1">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
@@ -324,16 +312,44 @@ const TraceManager: React.FC = () => {
                 </SelectContent>
               </Select>
             </div>
-            <div className="flex items-center gap-2">
-              <Button variant="outline" onClick={fetchTraces}>
-                <RefreshCw className="w-4 h-4 mr-2" />
-                刷新
-              </Button>
-            </div>
-          </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" className="dg-btn-secondary" onClick={fetchTraces}>
+          <RefreshCw className="w-4 h-4 mr-2" />
+          刷新
+        </Button>
+      </div>
+    </div>
+  ) : undefined;
 
-          {/* Trace列表 */}
-          <Card>
+  return (
+    <PageShell
+      variant="list"
+      title="链路追踪"
+      subtitle="分布式链路查询与服务性能分析"
+      icon={<GitBranch className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      toolbar={tracesToolbar}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '总请求', value: services.reduce((sum, s) => sum + s.requestCount, 0).toLocaleString(), color: 'blue' },
+            { label: '错误率', value: `${(services.reduce((sum, s) => sum + s.errorRate, 0) / (services.length || 1)).toFixed(2)}%`, color: 'red' },
+            { label: '平均延迟', value: formatDuration(services.reduce((sum, s) => sum + s.avgDuration, 0) / (services.length || 1)), color: 'amber' },
+            { label: '服务数', value: services.length, color: 'purple' },
+          ]}
+        />
+      )}
+      actions={activeTab === 'traces' ? undefined : (
+        <Button variant="outline" className="dg-btn-secondary" onClick={fetchData}>
+          <RefreshCw className="w-4 h-4 mr-2" />
+          刷新
+        </Button>
+      )}
+    >
+      {activeTab === 'traces' && (
+        <Card>
             <CardContent className="p-0">
               <div className="overflow-x-auto">
                 <table className="w-full">
@@ -351,17 +367,17 @@ const TraceManager: React.FC = () => {
                   <tbody className="divide-y">
                     {loading ? (
                       <tr>
-                        <td colSpan={7} className="px-4 py-8 text-center text-muted-foreground">加载中...</td>
+                        <td colSpan={7} className="px-4 py-2"><PageLoading label="加载链路数据..." /></td>
                       </tr>
                     ) : filteredTraces.length === 0 ? (
                       <tr>
-                        <td colSpan={7} className="px-4 py-8 text-center text-muted-foreground">暂无链路数据</td>
+                        <td colSpan={7} className="px-4 py-2"><PageEmpty title="暂无链路数据" className="py-8" /></td>
                       </tr>
                     ) : (
                       filteredTraces.map((trace) => (
                         <tr key={trace.id} className="hover:bg-muted/50">
                           <td className="px-4 py-3">
-                            <span className="font-mono text-sm text-blue-500">{trace.traceId.slice(0, 16)}...</span>
+                            <span className="font-mono text-sm dg-text-blue">{trace.traceId.slice(0, 16)}...</span>
                           </td>
                           <td className="px-4 py-3">
                             <div className="font-medium">{trace.operationName}</div>
@@ -394,9 +410,9 @@ const TraceManager: React.FC = () => {
               </div>
             </CardContent>
           </Card>
-        </TabsContent>
+      )}
 
-        <TabsContent value="services" className="space-y-4">
+      {activeTab === 'services' && (
           <Card>
             <CardHeader>
               <CardTitle>服务性能概览</CardTitle>
@@ -420,7 +436,7 @@ const TraceManager: React.FC = () => {
                         <td className="px-4 py-3 font-medium">{service.serviceName}</td>
                         <td className="px-4 py-3">{service.requestCount.toLocaleString()}</td>
                         <td className="px-4 py-3">
-                          <span className={service.errorRate > 1 ? 'text-red-500' : 'text-green-500'}>
+                          <span className={service.errorRate > 1 ? 'text-red-500' : 'dg-text-green'}>
                             {service.errorRate.toFixed(2)}%
                           </span>
                         </td>
@@ -434,9 +450,9 @@ const TraceManager: React.FC = () => {
               </div>
             </CardContent>
           </Card>
-        </TabsContent>
+      )}
 
-        <TabsContent value="metrics" className="space-y-4">
+      {activeTab === 'metrics' && (
           <div className="grid grid-cols-2 gap-4">
             <Card>
               <CardHeader>
@@ -457,8 +473,7 @@ const TraceManager: React.FC = () => {
               </CardContent>
             </Card>
           </div>
-        </TabsContent>
-      </Tabs>
+      )}
 
       {/* Trace详情对话框 */}
       <Dialog open={traceDetailOpen} onOpenChange={setTraceDetailOpen}>
@@ -580,7 +595,7 @@ const TraceManager: React.FC = () => {
           )}
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 };
 
diff --git a/frontend/src/components/server/CloudServerImport.tsx b/frontend/src/components/server/CloudServerImport.tsx
index 3c8c4f9..d57c893 100644
--- a/frontend/src/components/server/CloudServerImport.tsx
+++ b/frontend/src/components/server/CloudServerImport.tsx
@@ -245,7 +245,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                 step === s.id
                   ? 'bg-blue-600 text-white'
                   : step > s.id
-                    ? 'bg-emerald-600/20 text-emerald-400'
+                    ? 'bg-emerald-600/20 dg-text-green'
                     : 'bg-[var(--dg-bg-secondary)] text-[var(--dg-text-muted)]'
               }`}>
                 <s.icon className="h-4 w-4" />
@@ -304,7 +304,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                   >
                     <CardContent className="p-3 flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        <Key className="h-5 w-5 text-blue-400" />
+                        <Key className="h-5 w-5 dg-text-blue" />
                         <div>
                           <p className="font-medium text-[var(--dg-text-primary)]">{account.name}</p>
                           <p className="text-xs text-[var(--dg-text-muted)]">
@@ -313,7 +313,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                         </div>
                       </div>
                       <div className="text-right">
-                        <Badge className="bg-emerald-500/20 text-emerald-400 border-0">
+                        <Badge className="bg-emerald-500/20 dg-text-green border-0">
                           {account.region_count ?? account.regionCount ?? 0} 区域
                         </Badge>
                         <p className="text-xs text-[var(--dg-text-muted)] mt-1">{account.server_count ?? account.serverCount ?? 0} 服务器</p>
@@ -355,7 +355,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
 
             {isSyncingRegions ? (
               <div className="text-center py-12">
-                <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin text-blue-400" />
+                <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin dg-text-blue" />
                 <p className="text-[var(--dg-text-secondary)]">正在从云平台同步区域列表...</p>
               </div>
             ) : regions.length === 0 ? (
@@ -365,7 +365,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                 <Button
                   variant="outline"
                   size="sm"
-                  className="mt-3 border-[var(--dg-border)] text-blue-400"
+                  className="mt-3 border-[var(--dg-border)] dg-text-blue"
                   onClick={() => selectedAccount && syncRegions(selectedAccount.id)}
                 >
                   <RefreshCw className="h-3 w-3 mr-1" />
@@ -422,7 +422,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                           <td className="px-3 py-2">
                             <Checkbox checked={selectedRegions.includes(region.code)} />
                           </td>
-                          <td className="px-3 py-2 text-sm text-blue-400 font-mono">{region.code}</td>
+                          <td className="px-3 py-2 text-sm dg-text-blue font-mono">{region.code}</td>
                           <td className="px-3 py-2 text-sm text-[var(--dg-text-primary)]">{region.name}</td>
                           <td className="px-3 py-2 text-xs text-[var(--dg-text-muted)] font-mono truncate max-w-[200px]">{region.endpoint || '-'}</td>
                         </tr>
@@ -441,14 +441,14 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
             {importResult ? (
               /* 导入结果 */
               <div className="text-center py-12">
-                <CheckCircle className="h-12 w-12 mx-auto mb-3 text-emerald-400" />
+                <CheckCircle className="h-12 w-12 mx-auto mb-3 dg-text-green" />
                 <p className="text-lg font-medium text-[var(--dg-text-primary)]">导入完成</p>
                 <div className="flex items-center justify-center gap-6 mt-4">
-                  <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-base px-4 py-1">
+                  <Badge className="bg-emerald-500/20 dg-text-green border-0 text-base px-4 py-1">
                     成功导入 {importResult.imported} 台
                   </Badge>
                   {importResult.skipped > 0 && (
-                    <Badge className="bg-amber-500/20 text-amber-400 border-0 text-base px-4 py-1">
+                    <Badge className="bg-amber-500/20 dg-text-yellow border-0 text-base px-4 py-1">
                       跳过 {importResult.skipped} 台（已存在）
                     </Badge>
                   )}
@@ -469,7 +469,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                         <Button variant="outline" size="sm" onClick={handleSelectAllServers} className="border-[var(--dg-border)]">
                           {selectedServers.length === cloudServers.length && cloudServers.length > 0 ? '取消全选' : '全选'}
                         </Button>
-                        <Badge className="bg-blue-500/20 text-blue-400 border-0">
+                        <Badge className="bg-blue-500/20 dg-text-blue border-0">
                           已选 {selectedServers.length} 台
                         </Badge>
                       </>
@@ -479,7 +479,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                       size="sm"
                       onClick={discoverInstances}
                       disabled={isDiscovering || selectedRegions.length === 0}
-                      className="border-[var(--dg-border)] text-blue-400"
+                      className="border-[var(--dg-border)] dg-text-blue"
                     >
                       <RefreshCw className={`h-3 w-3 mr-1 ${isDiscovering ? 'animate-spin' : ''}`} />
                       {isDiscovering ? '发现中...' : cloudServers.length > 0 ? '重新发现' : '发现主机'}
@@ -502,7 +502,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
 
                 {/* 发现错误提示 */}
                 {discoverErrors.length > 0 && (
-                  <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 text-sm">
+                  <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 dg-text-yellow text-sm">
                     <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                     <div>
                       <p className="font-medium">部分区域发现失败：</p>
@@ -516,7 +516,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
                 {/* 主机列表 */}
                 {isDiscovering ? (
                   <div className="text-center py-12">
-                    <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin text-blue-400" />
+                    <RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin dg-text-blue" />
                     <p className="text-[var(--dg-text-secondary)]">正在发现云主机，请稍候...</p>
                     <p className="text-xs text-[var(--dg-text-muted)] mt-1">正在逐区域查询，可能需要数秒</p>
                   </div>
diff --git a/frontend/src/components/server/ExcelServerImport.tsx b/frontend/src/components/server/ExcelServerImport.tsx
index e42770b..0b2c21c 100644
--- a/frontend/src/components/server/ExcelServerImport.tsx
+++ b/frontend/src/components/server/ExcelServerImport.tsx
@@ -315,7 +315,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
-                      <FileSpreadsheet className="h-5 w-5 text-emerald-400" />
+                      <FileSpreadsheet className="h-5 w-5 dg-text-green" />
                     </div>
                     <div>
                       <p className="font-medium text-[var(--dg-text-primary)]">主机导入模板</p>
@@ -417,7 +417,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
               <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                 <CardContent className="p-3 flex items-center justify-between">
                   <div className="flex items-center gap-3">
-                    <FileSpreadsheet className="h-8 w-8 text-emerald-400" />
+                    <FileSpreadsheet className="h-8 w-8 dg-text-green" />
                     <div>
                       <p className="text-sm text-[var(--dg-text-primary)]">{selectedFile.name}</p>
                       <p className="text-xs text-[var(--dg-text-muted)]">{(selectedFile.size / 1024).toFixed(2)} KB</p>
@@ -426,7 +426,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="text-[var(--dg-text-muted)] hover:text-red-400"
+                    className="text-[var(--dg-text-muted)] hover:dg-text-red"
                     onClick={() => setSelectedFile(null)}
                   >
                     <X className="h-4 w-4" />
@@ -450,18 +450,18 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
             <div className="flex items-center justify-between">
               <p className="text-[var(--dg-text-secondary)] text-sm">数据预览</p>
               <div className="flex items-center gap-2">
-                <Badge className="bg-emerald-500/20 text-emerald-400 border-0">
+                <Badge className="bg-emerald-500/20 dg-text-green border-0">
                   <Check className="h-3 w-3 mr-1" />
                   {validCount} 有效
                 </Badge>
                 {warningCount > 0 && (
-                  <Badge className="bg-amber-500/20 text-amber-400 border-0">
+                  <Badge className="bg-amber-500/20 dg-text-yellow border-0">
                     <AlertCircle className="h-3 w-3 mr-1" />
                     {warningCount} 警告
                   </Badge>
                 )}
                 {errorCount > 0 && (
-                  <Badge className="bg-red-500/20 text-red-400 border-0">
+                  <Badge className="bg-red-500/20 dg-text-red border-0">
                     <X className="h-3 w-3 mr-1" />
                     {errorCount} 错误
                   </Badge>
@@ -488,19 +488,19 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
                       <td className="px-3 py-2">
                         <div className="flex items-center gap-1">
                           {row.status === 'valid' && (
-                            <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-xs">
+                            <Badge className="bg-emerald-500/20 dg-text-green border-0 text-xs">
                               <Check className="h-3 w-3 mr-1" />
                               {row.message}
                             </Badge>
                           )}
                           {row.status === 'warning' && (
-                            <Badge className="bg-amber-500/20 text-amber-400 border-0 text-xs">
+                            <Badge className="bg-amber-500/20 dg-text-yellow border-0 text-xs">
                               <AlertCircle className="h-3 w-3 mr-1" />
                               {row.message}
                             </Badge>
                           )}
                           {row.status === 'error' && (
-                            <Badge className="bg-red-500/20 text-red-400 border-0 text-xs">
+                            <Badge className="bg-red-500/20 dg-text-red border-0 text-xs">
                               <X className="h-3 w-3 mr-1" />
                               {row.message}
                             </Badge>
@@ -515,7 +515,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
 
             {errorCount > 0 && (
               <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
-                <div className="flex items-center gap-2 text-red-400">
+                <div className="flex items-center gap-2 dg-text-red">
                   <AlertCircle className="h-4 w-4" />
                   <span className="text-sm">存在 {errorCount} 条错误数据，请修正后重新上传</span>
                 </div>
diff --git a/frontend/src/components/server/ServerFileBrowser.tsx b/frontend/src/components/server/ServerFileBrowser.tsx
index cf30564..115e6c4 100644
--- a/frontend/src/components/server/ServerFileBrowser.tsx
+++ b/frontend/src/components/server/ServerFileBrowser.tsx
@@ -210,7 +210,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
             <FolderPlus className="h-3.5 w-3.5 mr-1" />新建目录
           </Button>
           {error && (
-            <Badge variant="outline" className="border-red-500/30 text-red-400 ml-auto">
+            <Badge variant="outline" className="border-red-500/30 dg-text-red ml-auto">
               <X className="h-3 w-3 mr-1 cursor-pointer" onClick={() => setError('')} />
               {error}
             </Badge>
@@ -285,7 +285,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
                   >
                     <td className="py-2 pl-4">
                       {item.is_dir ? (
-                        <Folder className="h-4 w-4 text-amber-400" />
+                        <Folder className="h-4 w-4 dg-text-yellow" />
                       ) : (
                         <File className="h-4 w-4 text-sky-400" />
                       )}
@@ -320,7 +320,7 @@ export function ServerFileBrowser({ open, onOpenChange, serverId, serverName }:
                         )}
                         <button
                           onClick={(e) => { e.stopPropagation(); handleDelete(item.path, item.is_dir); }}
-                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-red-400 hover:text-red-300"
+                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] dg-text-red hover:dg-text-red"
                           title="删除"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
diff --git a/frontend/src/components/server/ServerForm.tsx b/frontend/src/components/server/ServerForm.tsx
index d6db0ca..659d770 100644
--- a/frontend/src/components/server/ServerForm.tsx
+++ b/frontend/src/components/server/ServerForm.tsx
@@ -157,7 +157,7 @@ export function ServerForm({
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-1.5">
               <Label className="text-[var(--dg-text-secondary)]">
-                主机名 <span className="text-red-400">*</span>
+                主机名 <span className="dg-text-red">*</span>
               </Label>
               <Input
                 placeholder="web-server-01"
@@ -168,7 +168,7 @@ export function ServerForm({
             </div>
             <div className="space-y-1.5">
               <Label className="text-[var(--dg-text-secondary)]">
-                IP地址 <span className="text-red-400">*</span>
+                IP地址 <span className="dg-text-red">*</span>
               </Label>
               <Input
                 placeholder="10.0.0.1"
@@ -206,7 +206,7 @@ export function ServerForm({
           <div className="space-y-1.5">
             <Label className="text-[var(--dg-text-secondary)] flex items-center gap-1.5">
               <Key className="h-3.5 w-3.5" /> SSH 凭证
-              {!editingId && !formData.credential_id && <span className="text-red-400 ml-1">*</span>}
+              {!editingId && !formData.credential_id && <span className="dg-text-red ml-1">*</span>}
             </Label>
             <Select
               value={formData.credential_id ? String(formData.credential_id) : ''}
@@ -219,7 +219,7 @@ export function ServerForm({
                 {sshCredentials.map((cred) => (
                   <SelectItem key={cred.id} value={String(cred.id)}>
                     <span className="flex items-center gap-2">
-                      <Shield className="h-3 w-3 text-blue-400" />
+                      <Shield className="h-3 w-3 dg-text-blue" />
                       {cred.name} ({cred.username}@{ (cred.auth_type || '').toLowerCase() === 'key' ? '密钥' : '密码'})
                     </span>
                   </SelectItem>
@@ -243,7 +243,7 @@ export function ServerForm({
             )}
 
             {formData.credential_id && (
-              <p className="text-[10px] text-green-400/70">已关联凭证，登录信息从凭证自动获取（登录用户和认证方式由凭证决定）</p>
+              <p className="text-[10px] dg-text-green/70">已关联凭证，登录信息从凭证自动获取（登录用户和认证方式由凭证决定）</p>
             )}
           </div>
 
diff --git a/frontend/src/components/server/ServerManager.tsx b/frontend/src/components/server/ServerManager.tsx
index 11c801c..4b7853c 100644
--- a/frontend/src/components/server/ServerManager.tsx
+++ b/frontend/src/components/server/ServerManager.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
 import { cn } from '@/lib/utils';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -55,6 +54,9 @@ import { ServerForm, EMPTY_FORM, type ServerFormData } from './ServerForm';
 import { getTags } from './serverHelpers';
 import { ServerTableRow } from './ServerTableRow';
 import { usePermission } from '@/hooks/usePermission';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { Server } from 'lucide-react';
 
 export function ServerManager() {
   const { t } = useTranslation();
@@ -362,125 +364,99 @@ export function ServerManager() {
     toast.success(t('server.exported', { count: servers.length }));
   };
 
-  const colSpanCount = 8;
+  const colSpanCount = 9;
+
+  const tableToolbar = (
+    <>
+      <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 dg-text-muted" />
+          <Input
+            placeholder={t('server.searchPlaceholder')}
+            value={searchQuery}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="pl-9 h-9 dg-input"
+          />
+        </div>
+        <Select value={statusFilter} onValueChange={handleStatusFilter}>
+          <SelectTrigger className="w-32 h-9 dg-input">
+            <SelectValue placeholder={t('common.status')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('server.allStatus')}</SelectItem>
+            <SelectItem value="running">{t('common.running')}</SelectItem>
+            <SelectItem value="stopped">{t('common.stopped')}</SelectItem>
+            <SelectItem value="maintenance">{t('common.maintenance')}</SelectItem>
+            <SelectItem value="offline">{t('common.offline')}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      {selectedServers.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm dg-text-secondary">{t('server.selected', { count: selectedServers.length })}</span>
+          {hasPermission('server:delete') && (
+            <Button variant="outline" size="sm" className="dg-btn-danger dg-btn-sm" onClick={handleBatchDelete}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              {t('server.batchDelete')}
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
 
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('server.title')}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">{t('server.subtitle')}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-            onClick={() => refetch()}
-          >
+    <PageShell
+      variant="list"
+      title={t('server.title')}
+      subtitle={t('server.subtitle')}
+      icon={<Server className="h-5 w-5" />}
+      metrics={<ServerStatsStrip servers={servers} />}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => refetch()}>
             <RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
             {t('common.refresh')}
           </Button>
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-            onClick={handleExport}
-          >
+          <Button variant="outline" className="dg-btn-secondary" onClick={handleExport}>
             <Download className="h-4 w-4 mr-2" />
             {t('common.export')}
           </Button>
           {hasPermission('server:create') && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]">
-                <Upload className="h-4 w-4 mr-2" />
-                {t('server.batchImport')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-              <DropdownMenuLabel>{t('server.importMethod')}</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-              <DropdownMenuItem
-                className="hover:bg-[var(--dg-bg-hover)] cursor-pointer focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"
-                onClick={() => setCloudImportOpen(true)}
-              >
-                <Cloud className="h-4 w-4 mr-2 text-[var(--dg-blue)]" />
-                {t('server.cloudImport')}
-                <span className="ml-2 text-xs text-[var(--dg-text-muted)]">{t('server.cloudImportHint')}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="hover:bg-[var(--dg-bg-hover)] cursor-pointer focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"
-                onClick={() => setExcelImportOpen(true)}
-              >
-                <FileSpreadsheet className="h-4 w-4 mr-2 text-emerald-400" />
-                {t('server.csvImport')}
-                <span className="ml-2 text-xs text-[var(--dg-text-muted)]">{t('server.csvImportHint')}</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="dg-btn-secondary">
+                  <Upload className="h-4 w-4 mr-2" />
+                  {t('server.batchImport')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>{t('server.importMethod')}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setCloudImportOpen(true)}>
+                  <Cloud className="h-4 w-4 mr-2 dg-text-blue" />
+                  {t('server.cloudImport')}
+                  <span className="ml-2 text-xs dg-text-muted">{t('server.cloudImportHint')}</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setExcelImportOpen(true)}>
+                  <FileSpreadsheet className="h-4 w-4 mr-2 dg-text-green" />
+                  {t('server.csvImport')}
+                  <span className="ml-2 text-xs dg-text-muted">{t('server.csvImportHint')}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           )}
           {hasPermission('server:create') && (
-            <Button
-              className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
-              onClick={openCreateForm}
-            >
+            <Button className="dg-btn-primary" onClick={openCreateForm}>
               <Plus className="h-4 w-4 mr-2" />
               {t('server.addServer')}
             </Button>
           )}
-        </div>
-      </div>
-
-      {/* Stats Cards */}
-      <ServerStatsStrip servers={servers} />
-
-      {/* Filters & Table */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          {/* Toolbar */}
-          <div className="flex items-center justify-between flex-wrap gap-4 p-4">
-            <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-[var(--dg-text-muted)]" />
-                <Input
-                  placeholder={t('server.searchPlaceholder')}
-                  value={searchQuery}
-                  onChange={(e) => handleSearch(e.target.value)}
-                  className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
-                />
-              </div>
-              <Select value={statusFilter} onValueChange={handleStatusFilter}>
-                <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-                  <SelectValue placeholder={t('common.status')} />
-                </SelectTrigger>
-                <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-                  <SelectItem value="all">{t('server.allStatus')}</SelectItem>
-                  <SelectItem value="running">{t('common.running')}</SelectItem>
-                  <SelectItem value="stopped">{t('common.stopped')}</SelectItem>
-                  <SelectItem value="maintenance">{t('common.maintenance')}</SelectItem>
-                  <SelectItem value="offline">{t('common.offline')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {selectedServers.length > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-[var(--dg-text-secondary)]">{t('server.selected', { count: selectedServers.length })}</span>
-                {hasPermission('server:delete') && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-                  onClick={handleBatchDelete}
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  {t('server.batchDelete')}
-                </Button>
-                )}
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-[var(--dg-border)]">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={tableToolbar}>
+          <div>
             <Table>
               <TableHeader>
                 <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -576,8 +552,7 @@ export function ServerManager() {
               </Button>
             </div>
           </div>
-        </CardContent>
-      </Card>
+      </ContentPanel>
 
       {/* 创建/编辑服务器 Dialog */}
       <ServerForm
@@ -625,6 +600,6 @@ export function ServerManager() {
         serverId={fileBrowserServer?.id ?? null}
         serverName={fileBrowserServer?.name ?? ''}
       />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/server/ServerTableRow.tsx b/frontend/src/components/server/ServerTableRow.tsx
index 643c6ab..a6cd950 100644
--- a/frontend/src/components/server/ServerTableRow.tsx
+++ b/frontend/src/components/server/ServerTableRow.tsx
@@ -196,7 +196,7 @@ export function ServerTableRow({
               <>
               <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
               <DropdownMenuItem
-                className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
+                className="dg-text-red focus:bg-[var(--dg-bg-hover)] focus:dg-text-red cursor-pointer"
                 onClick={() => onDelete(server.id)}
               >
                 <Trash2 className="h-4 w-4 mr-2" />
diff --git a/frontend/src/components/server/TerminalDialog.tsx b/frontend/src/components/server/TerminalDialog.tsx
index 1d42ba0..ce80f8e 100644
--- a/frontend/src/components/server/TerminalDialog.tsx
+++ b/frontend/src/components/server/TerminalDialog.tsx
@@ -224,7 +224,7 @@ export function TerminalDialog({
         {/* 凭据选择器（无认证凭据时显示） */} 
         {!authReady && (
           <div className="p-6 flex flex-col items-center justify-center gap-4" style={{ height: '480px' }}>
-            <Shield className="h-12 w-12 text-amber-400" />
+            <Shield className="h-12 w-12 dg-text-yellow" />
             <div className="text-center">
               <p className="text-[var(--dg-text-primary)] font-medium mb-1">服务器未配置认证凭据</p>
               <p className="text-sm text-[var(--dg-text-muted)]">请选择一个凭据用于 SSH 连接</p>
diff --git a/frontend/src/components/server/serverHelpers.tsx b/frontend/src/components/server/serverHelpers.tsx
index 18cf976..f170f17 100644
--- a/frontend/src/components/server/serverHelpers.tsx
+++ b/frontend/src/components/server/serverHelpers.tsx
@@ -29,7 +29,7 @@ export function getStatusBadge(status: ServerType['status']) {
   switch (status) {
     case 'running':
       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">
           <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
           运行中
         </Badge>
@@ -42,14 +42,14 @@ export function getStatusBadge(status: ServerType['status']) {
       );
     case 'maintenance':
       return (
-        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+        <Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
           <div className="w-1.5 h-1.5 rounded-full bg-amber-400 mr-1.5" />
           维护中
         </Badge>
       );
     case 'offline':
       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">
           离线
         </Badge>
       );
diff --git a/frontend/src/components/system/CredentialManager.tsx b/frontend/src/components/system/CredentialManager.tsx
index 8c975d3..1088d2f 100644
--- a/frontend/src/components/system/CredentialManager.tsx
+++ b/frontend/src/components/system/CredentialManager.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -19,15 +18,19 @@ import {
 import { credentialApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 type CredentialType = 'ssh_key' | 'api_token' | 'password' | 'access_key';
 
 const TYPE_CONFIG: Record<CredentialType, { label: string; icon: typeof Key; color: string }> = {
-  ssh_key: { label: 'SSH 密钥', icon: Key, color: 'text-amber-400' },
-  api_token: { label: 'API Token', icon: Globe, color: 'text-blue-400' },
-  password: { label: '密码', icon: Shield, color: 'text-emerald-400' },
-  access_key: { label: 'AK密钥对', icon: Key, color: 'text-purple-400' },
+  ssh_key: { label: 'SSH 密钥', icon: Key, color: 'dg-text-yellow' },
+  api_token: { label: 'API Token', icon: Globe, color: 'dg-text-blue' },
+  password: { label: '密码', icon: Shield, color: 'dg-text-green' },
+  access_key: { label: 'AK密钥对', icon: Key, color: 'dg-text-purple' },
 };
 
 interface CredentialItem {
@@ -139,10 +142,10 @@ export function CredentialManager() {
   const typeBadge = (type: CredentialType) => {
     const cfg = TYPE_CONFIG[type];
     const bgMap: Record<string, string> = {
-      ssh_key: 'bg-amber-500/20 text-amber-400',
-      api_token: 'bg-blue-500/20 text-blue-400',
-      password: 'bg-emerald-500/20 text-emerald-400',
-      access_key: 'bg-purple-500/20 text-purple-400',
+      ssh_key: 'bg-amber-500/20 dg-text-yellow',
+      api_token: 'bg-blue-500/20 dg-text-blue',
+      password: 'bg-emerald-500/20 dg-text-green',
+      access_key: 'bg-purple-500/20 dg-text-purple',
     };
     return (
       <Badge className={`border-0 text-xs ${bgMap[type] || ''}`}>
@@ -152,34 +155,35 @@ export function CredentialManager() {
   };
 
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">凭证配置</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">
-            SSH 密钥、API Token、密码、AK密钥对等敏感信息统一加密管理
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={fetchList}
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            刷新
+    <PageShell
+      variant="list"
+      title="凭证配置"
+      subtitle="SSH 密钥、API Token、密码、AK密钥对等敏感信息统一加密管理"
+      icon={<Key className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip items={[{ label: '凭据总数', value: credentials.length, color: 'blue' }]} />
+      )}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={fetchList}>
+            <RefreshCw className="h-4 w-4 mr-2" />刷新
           </Button>
-          <Button className="bg-[var(--dg-blue)] hover:opacity-90 text-white" onClick={openCreate}>
-            <Plus className="h-4 w-4 mr-2" />
-            添加凭据
+          <Button className="dg-btn-primary" onClick={openCreate}>
+            <Plus className="h-4 w-4 mr-2" />添加凭据
           </Button>
-        </div>
-      </div>
-
-      {/* Table */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      {!loading && credentials.length === 0 ? (
+        <PageEmpty
+          icon={<Key className="h-10 w-10" />}
+          title="暂无凭据"
+          description="点击「添加凭据」创建"
+          action={<Button onClick={openCreate}><Plus className="h-4 w-4 mr-2" />添加凭据</Button>}
+        />
+      ) : (
+      <ContentPanel noPadding>
           <Table>
             <TableHeader>
               <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -239,7 +243,7 @@ export function CredentialManager() {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8 text-[var(--dg-text-muted)] hover:text-red-400"
+                          className="h-8 w-8 text-[var(--dg-text-muted)] hover:dg-text-red"
                           onClick={() => handleDelete(cred.id)}
                         >
                           <Trash2 className="h-4 w-4" />
@@ -251,8 +255,8 @@ export function CredentialManager() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+      </ContentPanel>
+      )}
 
       {/* Form Dialog */}
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
@@ -268,7 +272,7 @@ export function CredentialManager() {
             {/* 名称 */}
             <div>
               <label className="block text-sm font-medium text-[var(--dg-text-secondary)] mb-1">
-                名称 <span className="text-red-400">*</span>
+                名称 <span className="dg-text-red">*</span>
               </label>
               <Input
                 placeholder="如: 生产环境SSH密钥"
@@ -291,22 +295,22 @@ export function CredentialManager() {
                 <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
                   <SelectItem value="ssh_key">
                     <span className="flex items-center gap-2">
-                      <Key className="h-4 w-4 text-amber-400" /> SSH 密钥
+                      <Key className="h-4 w-4 dg-text-yellow" /> SSH 密钥
                     </span>
                   </SelectItem>
                   <SelectItem value="api_token">
                     <span className="flex items-center gap-2">
-                      <Globe className="h-4 w-4 text-blue-400" /> API Token
+                      <Globe className="h-4 w-4 dg-text-blue" /> API Token
                     </span>
                   </SelectItem>
                   <SelectItem value="password">
                     <span className="flex items-center gap-2">
-                      <Shield className="h-4 w-4 text-emerald-400" /> 密码
+                      <Shield className="h-4 w-4 dg-text-green" /> 密码
                     </span>
                   </SelectItem>
                   <SelectItem value="access_key">
                     <span className="flex items-center gap-2">
-                      <Key className="h-4 w-4 text-purple-400" /> AK密钥对
+                      <Key className="h-4 w-4 dg-text-purple" /> AK密钥对
                     </span>
                   </SelectItem>
                 </SelectContent>
@@ -317,7 +321,7 @@ export function CredentialManager() {
             <div>
               <label className="block text-sm font-medium text-[var(--dg-text-secondary)] mb-1">
                 {formData.type === 'ssh_key' ? 'SSH 私钥' : formData.type === 'api_token' ? 'Token' : formData.type === 'access_key' ? 'AK/SK (每行一对，用空格或逗号分隔)' : '密码'}
-                {!editingId && <span className="text-red-400"> *</span>}
+                {!editingId && <span className="dg-text-red"> *</span>}
                 {editingId && <span className="text-xs text-[var(--dg-text-muted)] ml-1">（留空不更新）</span>}
               </label>
               <div className="relative">
@@ -360,7 +364,7 @@ export function CredentialManager() {
 
             {/* 安全提示 */}
             <div className="p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
-              <p className="text-xs text-amber-400 flex items-center gap-2">
+              <p className="text-xs dg-text-yellow flex items-center gap-2">
                 <Shield className="h-3.5 w-3.5" />
                 凭据内容使用 AES-256-GCM 加密存储，仅在服务器端解密使用
               </p>
@@ -381,6 +385,6 @@ export function CredentialManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/system/CsvImportDialog.tsx b/frontend/src/components/system/CsvImportDialog.tsx
index 86411af..055aa22 100644
--- a/frontend/src/components/system/CsvImportDialog.tsx
+++ b/frontend/src/components/system/CsvImportDialog.tsx
@@ -46,13 +46,13 @@ export function CsvImportDialog({
 }: CsvImportDialogProps) {
   return (
     <Dialog open={importDialogOpen === 'csv'} onOpenChange={(v) => !v && setImportDialogOpen(null)}>
-      <DialogContent className="bg-slate-900 border-slate-800 max-w-2xl">
+      <DialogContent className="dg-card max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <Upload className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Upload className="h-5 w-5 dg-text-blue" />
             批量导入用户（CSV）
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             上传 CSV 文件批量创建用户。请先下载模板，按格式填写后上传。
           </DialogDescription>
         </DialogHeader>
@@ -61,11 +61,11 @@ export function CsvImportDialog({
           <>
             <div className="space-y-3">
               <div className="flex items-center gap-2">
-                <Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={() => userApi.downloadTemplate()}>
+                <Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => userApi.downloadTemplate()}>
                   <Download className="h-4 w-4 mr-1.5" />
                   下载模板
                 </Button>
-                <label className="inline-flex items-center px-3 py-1.5 rounded-md text-sm bg-slate-800 border border-slate-700 text-slate-200 cursor-pointer hover:bg-slate-700 transition-colors">
+                <label className="inline-flex items-center px-3 py-1.5 rounded-md text-sm bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors">
                   <Upload className="h-4 w-4 mr-1.5" />
                   选择 CSV 文件
                   <input type="file" accept=".csv" className="hidden" onChange={handleCsvUpload} />
@@ -73,31 +73,31 @@ export function CsvImportDialog({
               </div>
 
               {importPreview.length > 0 && (
-                <div className="rounded-lg border border-slate-800 overflow-hidden">
-                  <div className="px-3 py-2 bg-slate-800/50 text-xs text-slate-400">
+                <div className="rounded-lg border border-[var(--dg-border)] overflow-hidden">
+                  <div className="px-3 py-2 bg-[var(--dg-bg-tertiary)]/50 text-xs dg-text-secondary">
                     预览：{importPreview.length} 条数据
                   </div>
                   <Table>
                     <TableHeader>
-                      <TableRow className="border-slate-800">
-                        <TableHead className="text-slate-400 text-xs">用户名</TableHead>
-                        <TableHead className="text-slate-400 text-xs">昵称</TableHead>
-                        <TableHead className="text-slate-400 text-xs">邮箱</TableHead>
-                        <TableHead className="text-slate-400 text-xs">手机</TableHead>
+                      <TableRow className="border-[var(--dg-border)]">
+                        <TableHead className="dg-text-secondary text-xs">用户名</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">昵称</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">邮箱</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">手机</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {importPreview.slice(0, 5).map((u, i) => (
-                        <TableRow key={i} className="border-slate-800">
-                          <TableCell className="text-slate-200 text-xs">{u.username}</TableCell>
-                          <TableCell className="text-slate-300 text-xs">{u.nickname}</TableCell>
-                          <TableCell className="text-slate-400 text-xs">{u.email}</TableCell>
-                          <TableCell className="text-slate-400 text-xs">{u.phone}</TableCell>
+                        <TableRow key={i} className="border-[var(--dg-border)]">
+                          <TableCell className="text-[var(--dg-text-primary)] text-xs">{u.username}</TableCell>
+                          <TableCell className="text-[var(--dg-text-secondary)] text-xs">{u.nickname}</TableCell>
+                          <TableCell className="dg-text-secondary text-xs">{u.email}</TableCell>
+                          <TableCell className="dg-text-secondary text-xs">{u.phone}</TableCell>
                         </TableRow>
                       ))}
                       {importPreview.length > 5 && (
-                        <TableRow className="border-slate-800">
-                          <TableCell colSpan={4} className="text-slate-500 text-xs text-center">
+                        <TableRow className="border-[var(--dg-border)]">
+                          <TableCell colSpan={4} className="dg-text-muted text-xs text-center">
                             还有 {importPreview.length - 5} 条...
                           </TableCell>
                         </TableRow>
@@ -109,7 +109,7 @@ export function CsvImportDialog({
             </div>
 
             <DialogFooter>
-              <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => { setImportDialogOpen(null); setImportPreview([]); }}>
+              <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => { setImportDialogOpen(null); setImportPreview([]); }}>
                 取消
               </Button>
               <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleBatchImport} disabled={importing || importPreview.length === 0}>
@@ -121,16 +121,16 @@ export function CsvImportDialog({
           <div className="space-y-4 py-2">
             <div className={`flex items-center gap-3 p-4 rounded-lg ${importResult.code === 200 ? 'bg-emerald-500/10' : 'bg-red-500/10'}`}>
               {importResult.code === 200 ? (
-                <CheckCircle className="h-6 w-6 text-emerald-400 shrink-0" />
+                <CheckCircle className="h-6 w-6 dg-text-green shrink-0" />
               ) : (
-                <XCircle className="h-6 w-6 text-red-400 shrink-0" />
+                <XCircle className="h-6 w-6 dg-text-red shrink-0" />
               )}
-              <span className="text-sm text-slate-200">{importResult.message}</span>
+              <span className="text-sm text-[var(--dg-text-primary)]">{importResult.message}</span>
             </div>
             {importResult.errors?.length > 0 && (
-              <div className="max-h-32 overflow-auto rounded-lg bg-slate-800/50 p-3 space-y-1">
+              <div className="max-h-32 overflow-auto rounded-lg bg-[var(--dg-bg-tertiary)]/50 p-3 space-y-1">
                 {importResult.errors.map((err: string, i: number) => (
-                  <div key={i} className="text-xs text-red-400">{err}</div>
+                  <div key={i} className="text-xs dg-text-red">{err}</div>
                 ))}
               </div>
             )}
diff --git a/frontend/src/components/system/LdapImportDialog.tsx b/frontend/src/components/system/LdapImportDialog.tsx
index 3dc92b7..87129fb 100644
--- a/frontend/src/components/system/LdapImportDialog.tsx
+++ b/frontend/src/components/system/LdapImportDialog.tsx
@@ -57,13 +57,13 @@ export function LdapImportDialog({
 }: LdapImportDialogProps) {
   return (
     <Dialog open={importDialogOpen === 'ldap'} onOpenChange={(v) => !v && setImportDialogOpen(null)}>
-      <DialogContent className="bg-slate-900 border-slate-800 max-w-2xl">
+      <DialogContent className="dg-card max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <Network className="h-5 w-5 text-cyan-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <Network className="h-5 w-5 dg-text-cyan" />
             从 LDAP 导入用户
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             从 LDAP 服务器检索用户列表，选择需要导入的用户
           </DialogDescription>
         </DialogHeader>
@@ -73,9 +73,9 @@ export function LdapImportDialog({
             <div className="space-y-3">
               <div className="flex items-center gap-3">
                 <div className="flex items-center gap-2">
-                  <span className="text-xs text-slate-500 whitespace-nowrap">选择 OU</span>
+                  <span className="text-xs dg-text-muted whitespace-nowrap">选择 OU</span>
                   <select
-                    className="bg-slate-800 border border-slate-700 text-slate-200 text-xs rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                    className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-[var(--dg-blue)]"
                     value={ldapImportOUDN}
                     onChange={(e) => {
                       setLdapImportOUDN(e.target.value);
@@ -88,22 +88,22 @@ export function LdapImportDialog({
                     ))}
                   </select>
                 </div>
-                <Button variant="outline" size="sm" className="border-slate-700 text-slate-300 ml-auto" onClick={() => loadLdapUsers(ldapImportOUDN)} disabled={ldapLoading}>
+                <Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] ml-auto" onClick={() => loadLdapUsers(ldapImportOUDN)} disabled={ldapLoading}>
                   {ldapLoading ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <RefreshCw className="h-4 w-4 mr-1.5" />}
                   刷新
                 </Button>
               </div>
 
-              <p className="text-xs text-slate-500">
+              <p className="text-xs dg-text-muted">
                 {ldapUsers.length > 0 ? `找到 ${ldapUsers.length} 个用户` : '选择 OU 或点击刷新获取用户列表'}
               </p>
 
               {ldapUsers.length > 0 && (
-                <div className="max-h-80 overflow-auto rounded-lg border border-slate-800">
+                <div className="max-h-80 overflow-auto rounded-lg border border-[var(--dg-border)]">
                   <Table>
                     <TableHeader>
-                      <TableRow className="border-slate-800 sticky top-0 bg-slate-900">
-                        <TableHead className="w-10 text-slate-400 text-xs">
+                      <TableRow className="border-[var(--dg-border)] sticky top-0 bg-[var(--dg-bg-secondary)]">
+                        <TableHead className="w-10 dg-text-secondary text-xs">
                           <input
                             type="checkbox"
                             className="accent-blue-600"
@@ -117,15 +117,15 @@ export function LdapImportDialog({
                             }}
                           />
                         </TableHead>
-                        <TableHead className="text-slate-400 text-xs">用户名</TableHead>
-                        <TableHead className="text-slate-400 text-xs">显示名</TableHead>
-                        <TableHead className="text-slate-400 text-xs">邮箱</TableHead>
-                        <TableHead className="text-slate-400 text-xs">DN</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">用户名</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">显示名</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">邮箱</TableHead>
+                        <TableHead className="dg-text-secondary text-xs">DN</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {ldapUsers.map((u) => (
-                        <TableRow key={u.dn} className="border-slate-800 hover:bg-slate-800/50">
+                        <TableRow key={u.dn} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                           <TableCell>
                             <input
                               type="checkbox"
@@ -139,10 +139,10 @@ export function LdapImportDialog({
                               }}
                             />
                           </TableCell>
-                          <TableCell className="text-slate-200 text-xs">{u.uid}</TableCell>
-                          <TableCell className="text-slate-300 text-xs">{u.cn}</TableCell>
-                          <TableCell className="text-slate-400 text-xs">{u.mail}</TableCell>
-                          <TableCell className="text-slate-500 text-xs font-mono truncate max-w-[200px]">{u.dn}</TableCell>
+                          <TableCell className="text-[var(--dg-text-primary)] text-xs">{u.uid}</TableCell>
+                          <TableCell className="text-[var(--dg-text-secondary)] text-xs">{u.cn}</TableCell>
+                          <TableCell className="dg-text-secondary text-xs">{u.mail}</TableCell>
+                          <TableCell className="dg-text-muted text-xs font-mono truncate max-w-[200px]">{u.dn}</TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
@@ -152,7 +152,7 @@ export function LdapImportDialog({
             </div>
 
             <DialogFooter>
-              <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => { setImportDialogOpen(null); setLdapUsers([]); }}>
+              <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => { setImportDialogOpen(null); setLdapUsers([]); }}>
                 取消
               </Button>
               <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleLdapImport} disabled={importing || ldapSelected.size === 0}>
@@ -164,11 +164,11 @@ export function LdapImportDialog({
           <div className="space-y-4 py-2">
             <div className={`flex items-center gap-3 p-4 rounded-lg ${importResult.code === 200 ? 'bg-emerald-500/10' : 'bg-red-500/10'}`}>
               {importResult.code === 200 ? (
-                <CheckCircle className="h-6 w-6 text-emerald-400 shrink-0" />
+                <CheckCircle className="h-6 w-6 dg-text-green shrink-0" />
               ) : (
-                <XCircle className="h-6 w-6 text-red-400 shrink-0" />
+                <XCircle className="h-6 w-6 dg-text-red shrink-0" />
               )}
-              <span className="text-sm text-slate-200">{importResult.message}</span>
+              <span className="text-sm text-[var(--dg-text-primary)]">{importResult.message}</span>
             </div>
             <DialogFooter>
               <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={() => { setImportDialogOpen(null); setLdapUsers([]); setImportResult(null); }}>
diff --git a/frontend/src/components/system/LdapManagementSection.tsx b/frontend/src/components/system/LdapManagementSection.tsx
index 3ff72f1..8a8205a 100644
--- a/frontend/src/components/system/LdapManagementSection.tsx
+++ b/frontend/src/components/system/LdapManagementSection.tsx
@@ -144,52 +144,52 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
           setLdapMgmtOpen(open);
           if (open && ldapOUs.length === 0) loadLdapOUs();
         }}
-        className="w-full flex items-center gap-2 px-4 py-2.5 bg-slate-900/50 hover:bg-slate-800/50 text-slate-400 text-sm transition-colors"
+        className="w-full flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-secondary)]/50 hover:bg-[var(--dg-bg-hover)] dg-text-secondary text-sm transition-colors"
       >
         <ChevronDown className={`h-4 w-4 transition-transform ${ldapMgmtOpen ? '' : '-rotate-90'}`} />
-        <Users className="h-4 w-4 text-amber-400" />
-        <span className="text-slate-300">LDAP 账号管理</span>
+        <Users className="h-4 w-4 dg-text-yellow" />
+        <span className="text-[var(--dg-text-secondary)]">LDAP 账号管理</span>
       </button>
 
       {ldapMgmtOpen && (
-        <div className="bg-slate-900/30 border-t border-slate-800/50 px-4 py-4 space-y-4">
+        <div className="bg-[var(--dg-bg-secondary)]/30 border-t border-[var(--dg-border)]/50 px-4 py-4 space-y-4">
           <div className="flex items-center gap-3 flex-wrap">
             {/* 账号验证测试 */}
             <Dialog open={ldapUserTestOpen} onOpenChange={setLdapUserTestOpen}>
               <DialogTrigger asChild>
-                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
+                <Button variant="ghost" size="sm" className="dg-text-secondary hover:text-[var(--dg-text-primary)]">
                   <Key className="h-3.5 w-3.5 mr-1" />
                   账号验证
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
+              <DialogContent className="max-w-md dg-card">
                 <DialogHeader>
-                  <DialogTitle className="text-slate-100">LDAP 账号验证测试</DialogTitle>
-                  <DialogDescription className="text-slate-500">输入 LDAP 用户凭据进行认证测试</DialogDescription>
+                  <DialogTitle className="text-[var(--dg-text-primary)]">LDAP 账号验证测试</DialogTitle>
+                  <DialogDescription className="dg-text-muted">输入 LDAP 用户凭据进行认证测试</DialogDescription>
                 </DialogHeader>
                 <div className="space-y-3 py-2">
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">用户名</label>
+                    <label className="text-xs dg-text-muted mb-1 block">用户名</label>
                     <Input
                       value={ldapTestUser}
                       onChange={(e) => setLdapTestUser(e.target.value)}
                       placeholder="zhangsan"
-                      className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                      className="dg-input"
                     />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">密码</label>
+                    <label className="text-xs dg-text-muted mb-1 block">密码</label>
                     <Input
                       type="password"
                       value={ldapTestPass}
                       onChange={(e) => setLdapTestPass(e.target.value)}
                       onKeyDown={(e) => e.key === 'Enter' && handleLdapUserTest()}
                       placeholder="••••••"
-                      className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                      className="dg-input"
                     />
                   </div>
                   {ldapUserTestResult && (
-                    <div className={`p-3 rounded-lg text-sm ${ldapUserTestResult.success ? 'bg-emerald-500/10 text-emerald-300' : 'bg-red-500/10 text-red-300'}`}>
+                    <div className={`p-3 rounded-lg text-sm ${ldapUserTestResult.success ? 'bg-emerald-500/10 dg-text-green' : 'bg-red-500/10 dg-text-red'}`}>
                       {ldapUserTestResult.message}
                       {ldapUserTestResult.user_info && (
                         <pre className="mt-2 text-xs whitespace-pre-wrap">{JSON.stringify(ldapUserTestResult.user_info, null, 2)}</pre>
@@ -208,17 +208,17 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
               </DialogContent>
             </Dialog>
 
-            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200" onClick={loadLdapOUs}>
+            <Button variant="ghost" size="sm" className="dg-text-secondary hover:text-[var(--dg-text-primary)]" onClick={loadLdapOUs}>
               <RefreshCw className="h-3.5 w-3.5 mr-1" />
               刷新
             </Button>
 
             {/* OU 选择 */}
             <Select value={selectedOUDN} onValueChange={(v) => { setSelectedOUDN(v); loadLdapOUUsers(v); }}>
-              <SelectTrigger className="w-60 h-7 bg-slate-800 border-slate-700 text-slate-200 text-xs">
+              <SelectTrigger className="w-60 h-7 dg-input text-xs">
                 <SelectValue placeholder="选择组织单元" />
               </SelectTrigger>
-              <SelectContent className="bg-slate-800 border-slate-700">
+              <SelectContent className="dg-input">
                 <SelectItem value={ldapConfig.base_dn}>根 ({ldapConfig.base_dn})</SelectItem>
                 {ldapOUs.map((ou: JsonData) => (
                   <SelectItem key={ou.dn} value={ou.dn}>
@@ -231,28 +231,28 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
             {/* 新建 OU */}
             <Dialog open={createOUOpen} onOpenChange={setCreateOUOpen}>
               <DialogTrigger asChild>
-                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
+                <Button variant="ghost" size="sm" className="dg-text-secondary hover:text-[var(--dg-text-primary)]">
                   <Plus className="h-3.5 w-3.5 mr-1" />
                   新建 OU
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
+              <DialogContent className="max-w-md dg-card">
                 <DialogHeader>
-                  <DialogTitle className="text-slate-100">新建组织单元</DialogTitle>
-                  <DialogDescription className="text-slate-500">在 LDAP 目录中创建新的组织单元 (OU)</DialogDescription>
+                  <DialogTitle className="text-[var(--dg-text-primary)]">新建组织单元</DialogTitle>
+                  <DialogDescription className="dg-text-muted">在 LDAP 目录中创建新的组织单元 (OU)</DialogDescription>
                 </DialogHeader>
                 <div className="space-y-3 py-2">
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">OU 名称 *</label>
-                    <Input value={ouForm.ou_name} onChange={(e) => setOuForm({ ...ouForm, ou_name: e.target.value })} placeholder="dev" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">OU 名称 *</label>
+                    <Input value={ouForm.ou_name} onChange={(e) => setOuForm({ ...ouForm, ou_name: e.target.value })} placeholder="dev" className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">父级 DN</label>
-                    <Input value={ouForm.parent_dn} onChange={(e) => setOuForm({ ...ouForm, parent_dn: e.target.value })} placeholder={ldapConfig.base_dn} className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">父级 DN</label>
+                    <Input value={ouForm.parent_dn} onChange={(e) => setOuForm({ ...ouForm, parent_dn: e.target.value })} placeholder={ldapConfig.base_dn} className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">描述</label>
-                    <Input value={ouForm.description} onChange={(e) => setOuForm({ ...ouForm, description: e.target.value })} placeholder="开发团队" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">描述</label>
+                    <Input value={ouForm.description} onChange={(e) => setOuForm({ ...ouForm, description: e.target.value })} placeholder="开发团队" className="dg-input" />
                   </div>
                   <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateOU} disabled={!ouForm.ou_name || ldapSaving}>
                     {ldapSaving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
@@ -265,36 +265,36 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
             {/* 添加用户 */}
             <Dialog open={createUserOpen} onOpenChange={setCreateUserOpen}>
               <DialogTrigger asChild>
-                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
+                <Button variant="ghost" size="sm" className="dg-text-secondary hover:text-[var(--dg-text-primary)]">
                   <UserPlus className="h-3.5 w-3.5 mr-1" />
                   添加用户
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
+              <DialogContent className="max-w-md dg-card">
                 <DialogHeader>
-                  <DialogTitle className="text-slate-100">添加 LDAP 用户</DialogTitle>
-                  <DialogDescription className="text-slate-500">在 LDAP 目录中创建新的用户账号</DialogDescription>
+                  <DialogTitle className="text-[var(--dg-text-primary)]">添加 LDAP 用户</DialogTitle>
+                  <DialogDescription className="dg-text-muted">在 LDAP 目录中创建新的用户账号</DialogDescription>
                 </DialogHeader>
                 <div className="space-y-3 py-2">
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">用户名 *</label>
-                    <Input value={newUser.username} onChange={(e) => setNewUser({ ...newUser, username: e.target.value })} placeholder="zhangsan" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">用户名 *</label>
+                    <Input value={newUser.username} onChange={(e) => setNewUser({ ...newUser, username: e.target.value })} placeholder="zhangsan" className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">密码 *</label>
-                    <Input type="password" value={newUser.password} onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} placeholder="••••••" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">密码 *</label>
+                    <Input type="password" value={newUser.password} onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} placeholder="••••••" className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">显示名称</label>
-                    <Input value={newUser.display_name} onChange={(e) => setNewUser({ ...newUser, display_name: e.target.value })} placeholder="张三" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">显示名称</label>
+                    <Input value={newUser.display_name} onChange={(e) => setNewUser({ ...newUser, display_name: e.target.value })} placeholder="张三" className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">邮箱</label>
-                    <Input value={newUser.email} onChange={(e) => setNewUser({ ...newUser, email: e.target.value })} placeholder="zs@example.com" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">邮箱</label>
+                    <Input value={newUser.email} onChange={(e) => setNewUser({ ...newUser, email: e.target.value })} placeholder="zs@example.com" className="dg-input" />
                   </div>
                   <div>
-                    <label className="text-xs text-slate-500 mb-1 block">目标 OU</label>
-                    <Input value={newUser.ou_dn || selectedOUDN || ldapConfig.base_dn} onChange={(e) => setNewUser({ ...newUser, ou_dn: e.target.value })} className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                    <label className="text-xs dg-text-muted mb-1 block">目标 OU</label>
+                    <Input value={newUser.ou_dn || selectedOUDN || ldapConfig.base_dn} onChange={(e) => setNewUser({ ...newUser, ou_dn: e.target.value })} className="dg-input" />
                   </div>
                   <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateLDAPUser} disabled={!newUser.username || !newUser.password || ldapSaving}>
                     {ldapSaving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
@@ -308,7 +308,7 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
             <Button
               variant="outline"
               size="sm"
-              className="border-blue-600/50 text-blue-400 hover:bg-blue-600/10 ml-auto"
+              className="border-blue-600/50 dg-text-blue hover:bg-blue-600/10 ml-auto"
               onClick={handleLdapImport}
               disabled={ldapUsers.length === 0 || importing}
             >
@@ -319,12 +319,12 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
 
           {importFeedback && (
             <Dialog open={importResultOpen} onOpenChange={setImportResultOpen}>
-              <DialogContent className="max-w-sm bg-slate-900 border-slate-800">
+              <DialogContent className="max-w-sm dg-card">
                 <DialogHeader>
-                  <DialogTitle className="text-slate-100">导入结果</DialogTitle>
-                  <DialogDescription className="text-slate-500">LDAP 用户导入到本地用户库的执行结果</DialogDescription>
+                  <DialogTitle className="text-[var(--dg-text-primary)]">导入结果</DialogTitle>
+                  <DialogDescription className="dg-text-muted">LDAP 用户导入到本地用户库的执行结果</DialogDescription>
                 </DialogHeader>
-                <div className="py-3 text-sm text-slate-300">
+                <div className="py-3 text-sm text-[var(--dg-text-secondary)]">
                   {importFeedback}
                 </div>
                 <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={() => setImportResultOpen(false)}>
@@ -335,39 +335,39 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
           )}
 
           {/* 用户表格 */}
-          <div className="border border-slate-800 rounded-lg overflow-hidden">
+          <div className="border border-[var(--dg-border)] rounded-lg overflow-hidden">
             <Table>
               <TableHeader>
-                <TableRow className="border-slate-800 hover:bg-transparent">
-                  <TableHead className="text-slate-400 w-8">
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                  <TableHead className="dg-text-secondary w-8">
                     <input
                       type="checkbox"
-                      className="rounded bg-slate-800 border-slate-600"
+                      className="rounded bg-[var(--dg-bg-tertiary)] border-[var(--dg-border-hover)]"
                       checked={selectedLDAPUsers.length > 0 && selectedLDAPUsers.length === ldapUsers.length}
                       onChange={(e) => setSelectedLDAPUsers(e.target.checked ? ldapUsers.map((u: JsonData) => u.dn) : [])}
                     />
                   </TableHead>
-                  <TableHead className="text-slate-400">用户名</TableHead>
-                  <TableHead className="text-slate-400">显示名称</TableHead>
-                  <TableHead className="text-slate-400">邮箱</TableHead>
-                  <TableHead className="text-slate-400">DN</TableHead>
-                  <TableHead className="text-slate-400 w-12">操作</TableHead>
+                  <TableHead className="dg-text-secondary">用户名</TableHead>
+                  <TableHead className="dg-text-secondary">显示名称</TableHead>
+                  <TableHead className="dg-text-secondary">邮箱</TableHead>
+                  <TableHead className="dg-text-secondary">DN</TableHead>
+                  <TableHead className="dg-text-secondary w-12">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {ldapUsers.length === 0 ? (
-                  <TableRow className="border-slate-800">
-                    <TableCell colSpan={6} className="text-center text-slate-500 py-8">
+                  <TableRow className="border-[var(--dg-border)]">
+                    <TableCell colSpan={6} className="text-center dg-text-muted py-8">
                       点击「刷新」加载 LDAP 用户
                     </TableCell>
                   </TableRow>
                 ) : (
                   ldapUsers.map((user: JsonData) => (
-                    <TableRow key={user.dn} className="border-slate-800 hover:bg-slate-800/50">
+                    <TableRow key={user.dn} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                       <TableCell>
                         <input
                           type="checkbox"
-                          className="rounded bg-slate-800 border-slate-600"
+                          className="rounded bg-[var(--dg-bg-tertiary)] border-[var(--dg-border-hover)]"
                           checked={selectedLDAPUsers.includes(user.dn)}
                           onChange={(e) => {
                             if (e.target.checked) setSelectedLDAPUsers([...selectedLDAPUsers, user.dn]);
@@ -376,23 +376,23 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
                         />
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-200 font-medium">{user.uid}</span>
+                        <span className="text-sm text-[var(--dg-text-primary)] font-medium">{user.uid}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-300">{user.cn}</span>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{user.cn}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">{user.mail || '-'}</span>
+                        <span className="text-sm dg-text-secondary">{user.mail || '-'}</span>
                       </TableCell>
                       <TableCell>
-                        <code className="text-xs text-slate-500">{user.dn}</code>
+                        <code className="text-xs dg-text-muted">{user.dn}</code>
                       </TableCell>
                       <TableCell>
                         <div className="flex items-center gap-1">
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-6 w-6 text-slate-400 hover:text-blue-400 hover:bg-blue-500/10"
+                            className="h-6 w-6 dg-text-secondary hover:dg-text-blue hover:bg-blue-500/10"
                             onClick={() => openEditLdapUser(user)}
                           >
                             <Edit className="h-3 w-3" />
@@ -400,7 +400,7 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-6 w-6 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                            className="h-6 w-6 dg-text-red hover:dg-text-red hover:bg-red-500/10"
                             onClick={() => handleDeleteLDAPEntry(user.dn)}
                           >
                             <Trash2 className="h-3 w-3" />
@@ -418,42 +418,42 @@ export function LdapManagementSection(props: LdapManagementSectionProps) {
 
       {/* 编辑 LDAP 用户 Dialog */}
       <Dialog open={!!editLdapUser} onOpenChange={(v) => !v && setEditLdapUser(null)}>
-        <DialogContent className="max-w-md bg-slate-900 border-slate-800">
+        <DialogContent className="max-w-md dg-card">
           <DialogHeader>
-            <DialogTitle className="text-slate-100 flex items-center gap-2">
-              <Edit className="h-5 w-5 text-blue-400" />
+            <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Edit className="h-5 w-5 dg-text-blue" />
               编辑 LDAP 用户
             </DialogTitle>
-            <DialogDescription className="text-slate-500">
+            <DialogDescription className="dg-text-muted">
               修改 {editLdapUser?.uid} 的属性
             </DialogDescription>
           </DialogHeader>
           {editLdapUser && (
             <div className="space-y-3 py-2">
               <div>
-                <label className="text-xs text-slate-500 mb-1 block">用户名（只读）</label>
-                <Input value={editLdapUser.uid || ''} disabled className="bg-slate-800/50 border-slate-700 text-slate-500" />
+                <label className="text-xs dg-text-muted mb-1 block">用户名（只读）</label>
+                <Input value={editLdapUser.uid || ''} disabled className="dg-input dg-text-muted" />
               </div>
               <div>
-                <label className="text-xs text-slate-500 mb-1 block">显示名称 (cn)</label>
-                <Input value={editLdapForm.cn} onChange={(e) => setEditLdapForm({ ...editLdapForm, cn: e.target.value })} className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                <label className="text-xs dg-text-muted mb-1 block">显示名称 (cn)</label>
+                <Input value={editLdapForm.cn} onChange={(e) => setEditLdapForm({ ...editLdapForm, cn: e.target.value })} className="dg-input" />
               </div>
               <div>
-                <label className="text-xs text-slate-500 mb-1 block">邮箱</label>
-                <Input value={editLdapForm.mail} onChange={(e) => setEditLdapForm({ ...editLdapForm, mail: e.target.value })} placeholder="user@example.com" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                <label className="text-xs dg-text-muted mb-1 block">邮箱</label>
+                <Input value={editLdapForm.mail} onChange={(e) => setEditLdapForm({ ...editLdapForm, mail: e.target.value })} placeholder="user@example.com" className="dg-input" />
               </div>
               <div>
-                <label className="text-xs text-slate-500 mb-1 block">电话</label>
-                <Input value={editLdapForm.phone} onChange={(e) => setEditLdapForm({ ...editLdapForm, phone: e.target.value })} placeholder="13800138000" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                <label className="text-xs dg-text-muted mb-1 block">电话</label>
+                <Input value={editLdapForm.phone} onChange={(e) => setEditLdapForm({ ...editLdapForm, phone: e.target.value })} placeholder="13800138000" className="dg-input" />
               </div>
               <div>
-                <label className="text-xs text-slate-500 mb-1 block">职位/头衔</label>
-                <Input value={editLdapForm.title} onChange={(e) => setEditLdapForm({ ...editLdapForm, title: e.target.value })} placeholder="运维工程师" className="bg-slate-800/50 border-slate-700 text-slate-200" />
+                <label className="text-xs dg-text-muted mb-1 block">职位/头衔</label>
+                <Input value={editLdapForm.title} onChange={(e) => setEditLdapForm({ ...editLdapForm, title: e.target.value })} placeholder="运维工程师" className="dg-input" />
               </div>
             </div>
           )}
           <DialogFooter>
-            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setEditLdapUser(null)}>取消</Button>
+            <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setEditLdapUser(null)}>取消</Button>
             <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleUpdateLdapUser}>保存</Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/src/components/system/LiveMonitorDialog.tsx b/frontend/src/components/system/LiveMonitorDialog.tsx
index e83290c..8b80b93 100644
--- a/frontend/src/components/system/LiveMonitorDialog.tsx
+++ b/frontend/src/components/system/LiveMonitorDialog.tsx
@@ -200,7 +200,7 @@ export function LiveMonitorDialog({ open, onOpenChange, sessionId, sessionInfo }
         {/* 工具栏 — 与 TerminalDialog 一致 // Logan.Li */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
           <div className="flex items-center gap-2 text-sm min-w-0 flex-wrap">
-            <Monitor className="h-4 w-4 text-emerald-400 shrink-0" />
+            <Monitor className="h-4 w-4 dg-text-green shrink-0" />
             <span className="text-[var(--dg-text-primary)] font-medium">终端实时监控</span>
             {meta && (
               <span className="text-[var(--dg-text-muted)] truncate">
@@ -208,18 +208,18 @@ export function LiveMonitorDialog({ open, onOpenChange, sessionId, sessionInfo }
               </span>
             )}
             {connected && (
-              <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10 text-xs">
+              <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10 text-xs">
                 ● 在线
               </Badge>
             )}
             {!connected && !connectError && (
-              <Badge variant="outline" className="border-yellow-500/30 text-yellow-400 bg-yellow-500/10 text-xs">
+              <Badge variant="outline" className="border-yellow-500/30 dg-text-yellow bg-yellow-500/10 text-xs">
                 <Loader2 className="h-3 w-3 animate-spin mr-1" />
                 连接中
               </Badge>
             )}
             {connectError && (
-              <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10 text-xs">
+              <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10 text-xs">
                 连接失败
               </Badge>
             )}
@@ -244,7 +244,7 @@ export function LiveMonitorDialog({ open, onOpenChange, sessionId, sessionInfo }
         </div>
 
         {connectError && (
-          <p className="text-sm text-red-400 px-4 py-2 border-b border-[var(--dg-border)]">{connectError}</p>
+          <p className="text-sm dg-text-red px-4 py-2 border-b border-[var(--dg-border)]">{connectError}</p>
         )}
 
         <div
diff --git a/frontend/src/components/system/ReplayDialog.tsx b/frontend/src/components/system/ReplayDialog.tsx
index 1bd29f6..f35cd40 100644
--- a/frontend/src/components/system/ReplayDialog.tsx
+++ b/frontend/src/components/system/ReplayDialog.tsx
@@ -234,15 +234,15 @@ export function ReplayDialog({ open, onOpenChange, sessionId, initialSeekSec }:
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         showOverlay={false}
-        className="bg-slate-900 border-slate-800 p-0 gap-0 flex flex-col"
+        className="dg-card p-0 gap-0 flex flex-col"
         style={{ maxWidth: '1100px', width: '92vw' }}
       >
-        <DialogHeader className="px-4 py-3 border-b border-slate-800 shrink-0">
-          <DialogTitle className="text-slate-100 text-base">
+        <DialogHeader className="px-4 py-3 border-b border-[var(--dg-border)] shrink-0">
+          <DialogTitle className="text-[var(--dg-text-primary)] text-base">
             {t('audit.terminal.replayPlayer.title', { id: sessionId ?? '' })}
           </DialogTitle>
           {meta && (
-            <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-x-3 gap-y-0.5">
+            <div className="text-xs dg-text-muted mt-1 flex flex-wrap gap-x-3 gap-y-0.5">
               <span>{meta.username} → {meta.server_name} ({meta.server_ip}:{meta.server_port})</span>
               {meta.client_ip && <span>{t('audit.terminal.replayPlayer.clientIp')}: {meta.client_ip}</span>}
               {meta.start_time && <span>{new Date(meta.start_time).toLocaleString()}</span>}
@@ -256,47 +256,47 @@ export function ReplayDialog({ open, onOpenChange, sessionId, initialSeekSec }:
           <div className="flex-1 min-w-0 flex flex-col relative bg-[#0a0e14]">
             {loading && (
               <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/40">
-                <Loader2 className="h-6 w-6 animate-spin text-blue-400" />
+                <Loader2 className="h-6 w-6 animate-spin dg-text-blue" />
               </div>
             )}
             {error && (
               <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/40">
-                <p className="text-red-400 text-sm">{error}</p>
+                <p className="dg-text-red text-sm">{error}</p>
               </div>
             )}
             <div ref={containerRef} className="flex-1 min-h-0 p-1" />
 
             {!legacyMode && totalTime > 0 && (
-              <div className="shrink-0 border-t border-slate-800 bg-slate-900/95 px-3 py-2.5 space-y-2">
+              <div className="shrink-0 border-t border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]/95 px-3 py-2.5 space-y-2">
                 {/* 控制按钮 */}
                 <div className="flex items-center gap-1 flex-wrap">
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => seekTo(0)} title={t('audit.terminal.replayPlayer.toStart')}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={() => seekTo(0)} title={t('audit.terminal.replayPlayer.toStart')}>
                     <ChevronsLeft className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => engineRef.current?.skip(-SKIP_SEC)}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={() => engineRef.current?.skip(-SKIP_SEC)}>
                     <SkipBack className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-blue-400" onClick={togglePlay}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-blue" onClick={togglePlay}>
                     {playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => engineRef.current?.skip(SKIP_SEC)}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={() => engineRef.current?.skip(SKIP_SEC)}>
                     <SkipForward className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => seekTo(totalTime)} title={t('audit.terminal.replayPlayer.toEnd')}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={() => seekTo(totalTime)} title={t('audit.terminal.replayPlayer.toEnd')}>
                     <ChevronsRight className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={() => { seekTo(0); engineRef.current?.play(); setPlaying(true); }} title={t('audit.terminal.replayPlayer.restart')}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={() => { seekTo(0); engineRef.current?.play(); setPlaying(true); }} title={t('audit.terminal.replayPlayer.restart')}>
                     <RotateCcw className="h-4 w-4" />
                   </Button>
 
-                  <div className="w-px h-5 bg-slate-700 mx-1" />
+                  <div className="w-px h-5 bg-[var(--dg-bg-active)] mx-1" />
 
                   {SPEEDS.map((s) => (
                     <Button
                       key={s}
                       variant="ghost"
                       size="sm"
-                      className={`h-7 px-2 text-xs ${speed === s ? 'text-blue-400 bg-blue-500/10' : 'text-slate-500'}`}
+                      className={`h-7 px-2 text-xs ${speed === s ? 'dg-text-blue bg-blue-500/10' : 'dg-text-muted'}`}
                       onClick={() => setSpeed(s)}
                     >
                       {s}x
@@ -305,15 +305,15 @@ export function ReplayDialog({ open, onOpenChange, sessionId, initialSeekSec }:
 
                   <div className="flex-1" />
 
-                  <span className="text-xs text-slate-400 font-mono tabular-nums">
+                  <span className="text-xs dg-text-secondary font-mono tabular-nums">
                     {formatReplayTime(displayTime)} / {formatReplayTime(totalTime)}
                   </span>
 
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={handleExportCsv} disabled={!meta} title={t('audit.terminal.exportReportCsv')}>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={handleExportCsv} disabled={!meta} title={t('audit.terminal.exportReportCsv')}>
                     <FileText className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-slate-500" onClick={handleExportJson} disabled={!meta}>JSON</Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={handleDownload} title={t('audit.terminal.downloadRecord')}>
+                  <Button variant="ghost" size="sm" className="h-7 px-2 text-xs dg-text-muted" onClick={handleExportJson} disabled={!meta}>JSON</Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary" onClick={handleDownload} title={t('audit.terminal.downloadRecord')}>
                     <Download className="h-4 w-4" />
                   </Button>
                 </div>
@@ -337,14 +337,14 @@ export function ReplayDialog({ open, onOpenChange, sessionId, initialSeekSec }:
                     step={0.1}
                     onValueChange={(v) => setScrubTime(v[0])}
                     onValueCommit={(v) => seekTo(v[0])}
-                    className="[&_[data-slot=slider-track]]:bg-slate-700 [&_[data-slot=slider-range]]:bg-blue-500"
+                    className="[&_[data-slot=slider-track]]:bg-[var(--dg-bg-active)] [&_[data-slot=slider-range]]:bg-blue-500"
                   />
                 </div>
               </div>
             )}
 
             {legacyMode && (
-              <div className="shrink-0 border-t border-slate-800 px-3 py-2 text-xs text-slate-500">
+              <div className="shrink-0 border-t border-[var(--dg-border)] px-3 py-2 text-xs dg-text-muted">
                 {t('audit.terminal.replayPlayer.legacyFormat')}
               </div>
             )}
diff --git a/frontend/src/components/system/ResetPasswordDialog.tsx b/frontend/src/components/system/ResetPasswordDialog.tsx
index 92caf55..c84b32c 100644
--- a/frontend/src/components/system/ResetPasswordDialog.tsx
+++ b/frontend/src/components/system/ResetPasswordDialog.tsx
@@ -54,7 +54,7 @@ export function ResetPasswordDialog({ user, onClose }: ResetPasswordDialogProps)
         </DialogHeader>
 
         {isLdap ? (
-          <p className="text-sm text-amber-400/90 py-2">LDAP 用户请在 LDAP 目录中管理密码，不支持本地重置。</p>
+          <p className="text-sm dg-text-yellow/90 py-2">LDAP 用户请在 LDAP 目录中管理密码，不支持本地重置。</p>
         ) : (
           <div className="space-y-3 py-1">
             <div>
diff --git a/frontend/src/components/system/RoleFormDialog.tsx b/frontend/src/components/system/RoleFormDialog.tsx
index bb2bcdf..25b88dd 100644
--- a/frontend/src/components/system/RoleFormDialog.tsx
+++ b/frontend/src/components/system/RoleFormDialog.tsx
@@ -93,7 +93,7 @@ export function RoleFormDialog({
       <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
-            <Shield className="h-5 w-5 text-purple-400" />
+            <Shield className="h-5 w-5 dg-text-purple" />
             {editingRole ? '编辑角色' : '新建角色'}
           </DialogTitle>
           <DialogDescription className="text-[var(--dg-text-secondary)]">
@@ -139,7 +139,7 @@ export function RoleFormDialog({
             <Label className="text-xs text-[var(--dg-text-secondary)]">
               权限分配
               {form.permission_ids.length > 0 && (
-                <span className="ml-2 text-purple-400">已选 {form.permission_ids.length} 项</span>
+                <span className="ml-2 dg-text-purple">已选 {form.permission_ids.length} 项</span>
               )}
             </Label>
             <div className="max-h-[40vh] overflow-y-auto rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] p-3 space-y-3">
@@ -163,7 +163,7 @@ export function RoleFormDialog({
                         </button>
                         <button
                           onClick={() => toggleGroup(group.items, !allSelected)}
-                          className="text-[10px] text-blue-400 hover:text-blue-300 transition-colors"
+                          className="text-[10px] dg-text-blue hover:text-blue-300 transition-colors"
                         >
                           {allSelected ? '取消全选' : '全选'}
                         </button>
diff --git a/frontend/src/components/system/SystemLogsTab.tsx b/frontend/src/components/system/SystemLogsTab.tsx
index af0b1dd..aa706f9 100644
--- a/frontend/src/components/system/SystemLogsTab.tsx
+++ b/frontend/src/components/system/SystemLogsTab.tsx
@@ -68,11 +68,11 @@ export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProp
 
   const getLogResultBadge = (result: OperationLog['result']) => {
     return result === 'success' ? (
-      <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">
         成功
       </Badge>
     ) : (
-      <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">
         失败
       </Badge>
     );
@@ -83,17 +83,17 @@ export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProp
       {/* Filters */}
       <div className="flex items-center gap-3">
         <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="搜索操作日志..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(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="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
           onClick={fetchLogs}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
@@ -102,55 +102,55 @@ export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProp
       </div>
 
       {/* Logs Table */}
-      <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)]">
             {loading ? (
               <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>
             ) : filteredLogs.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">暂无操作日志</p>
               </div>
             ) : (
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400">时间</TableHead>
-                    <TableHead className="text-slate-400">用户</TableHead>
-                    <TableHead className="text-slate-400">模块</TableHead>
-                    <TableHead className="text-slate-400">操作</TableHead>
-                    <TableHead className="text-slate-400">资源</TableHead>
-                    <TableHead className="text-slate-400">IP地址</TableHead>
-                    <TableHead className="text-slate-400">结果</TableHead>
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary">时间</TableHead>
+                    <TableHead className="dg-text-secondary">用户</TableHead>
+                    <TableHead className="dg-text-secondary">模块</TableHead>
+                    <TableHead className="dg-text-secondary">操作</TableHead>
+                    <TableHead className="dg-text-secondary">资源</TableHead>
+                    <TableHead className="dg-text-secondary">IP地址</TableHead>
+                    <TableHead className="dg-text-secondary">结果</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {filteredLogs.map((log) => (
-                    <TableRow key={log.id} className="border-slate-800 hover:bg-slate-800/50">
+                    <TableRow key={log.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                       <TableCell>
-                        <span className="text-sm text-slate-400">
+                        <span className="text-sm dg-text-secondary">
                           {log.createdAt ? new Date(log.createdAt).toLocaleString() : '--'}
                         </span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-200">{log.username || '--'}</span>
+                        <span className="text-sm text-[var(--dg-text-primary)]">{log.username || '--'}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-300">{log.module || '--'}</span>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{log.module || '--'}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-300">{log.action || '--'}</span>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{log.action || '--'}</span>
                       </TableCell>
                       <TableCell>
-                        <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded">
+                        <code className="text-xs dg-text-secondary bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
                           {log.resource || '--'}
                         </code>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">{log.ip || '--'}</span>
+                        <span className="text-sm dg-text-secondary">{log.ip || '--'}</span>
                       </TableCell>
                       <TableCell>{getLogResultBadge(log.result)}</TableCell>
                     </TableRow>
diff --git a/frontend/src/components/system/SystemManager.tsx b/frontend/src/components/system/SystemManager.tsx
index f2271f6..d1713cc 100644
--- a/frontend/src/components/system/SystemManager.tsx
+++ b/frontend/src/components/system/SystemManager.tsx
@@ -2,9 +2,9 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useConfirm } from '@/components/ui/confirm-dialog';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import { CheckCircle, XCircle, Users, Shield, Settings } from 'lucide-react';
+import { CheckCircle, XCircle, Settings } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { userApi } from '@/api';
 import type { Role } from '@/types';
 import { SystemUserTab } from './SystemUserTab';
@@ -231,34 +231,25 @@ export function SystemManager() {
     }
   };
 
+  const pageTabs = [
+    { id: 'users', label: '用户管理', badge: users.length || undefined },
+    { id: 'roles', label: '角色权限' },
+    { id: 'settings', label: '系统设置' },
+  ];
+
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">系统管理</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">用户、权限与系统配置</p>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
-          <TabsTrigger value="users" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Users className="h-4 w-4 mr-2" />
-            用户管理
-          </TabsTrigger>
-          <TabsTrigger value="roles" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Shield className="h-4 w-4 mr-2" />
-            角色权限
-          </TabsTrigger>
-          <TabsTrigger value="settings" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Settings className="h-4 w-4 mr-2" />
-            系统设置
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="users" className="mt-4 space-y-4">
+    <PageShell
+      variant="list"
+      title="系统管理"
+      subtitle="用户、权限与系统配置"
+      icon={<Settings className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+    >
+      <div className="w-full">
+        {activeTab === 'users' && (
+        <div className="space-y-4">
           <SystemUserTab
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
@@ -298,21 +289,22 @@ export function SystemManager() {
             handleLdapImport={ldap.handleLdapImport}
             setLdapUsers={ldap.setLdapUsers}
           />
-        </TabsContent>
+        </div>
+        )}
 
-        <TabsContent value="roles" className="mt-4 space-y-4">
+        {activeTab === 'roles' && (
           <SystemRolesTab
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
           />
-        </TabsContent>
+        )}
 
-        <TabsContent value="settings" className="mt-4">
+        {activeTab === 'settings' && (
           <SystemSettingsTab {...ldap.settingsTabProps} />
-        </TabsContent>
-      </Tabs>
+        )}
+      </div>
 
       <ResetPasswordDialog user={resetPasswordUser} onClose={() => setResetPasswordUser(null)} />
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/components/system/SystemRolesTab.tsx b/frontend/src/components/system/SystemRolesTab.tsx
index 5a7d668..2479d53 100644
--- a/frontend/src/components/system/SystemRolesTab.tsx
+++ b/frontend/src/components/system/SystemRolesTab.tsx
@@ -222,7 +222,7 @@ export function SystemRolesTab({ selectedRole, setSelectedRole }: SystemRolesTab
                         <CardTitle className="text-base text-[var(--dg-text-primary)] flex items-center gap-1.5">
                           {role.name}
                           {role.isSystem && (
-                            <Badge className="bg-purple-500/15 text-purple-400 border-purple-500/30 text-[10px] px-1 py-0">
+                            <Badge className="bg-purple-500/15 dg-text-purple border-purple-500/30 text-[10px] px-1 py-0">
                               <Lock className="h-2.5 w-2.5 mr-0.5" />系统
                             </Badge>
                           )}
@@ -240,14 +240,14 @@ export function SystemRolesTab({ selectedRole, setSelectedRole }: SystemRolesTab
                       </Button>
                       <Button
                         variant="ghost" size="icon"
-                        className="h-8 w-8 text-[var(--dg-text-muted)] hover:text-blue-400"
+                        className="h-8 w-8 text-[var(--dg-text-muted)] hover:dg-text-blue"
                         onClick={() => openEdit(role)}
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
                       <Button
                         variant="ghost" size="icon"
-                        className="h-8 w-8 text-[var(--dg-text-muted)] hover:text-red-400"
+                        className="h-8 w-8 text-[var(--dg-text-muted)] hover:dg-text-red"
                         onClick={() => handleDelete(role)}
                         disabled={role.isSystem}
                         title={role.isSystem ? '系统默认角色不可删除' : '删除角色'}
@@ -301,10 +301,10 @@ function RoleDetailDialog({
       <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
         <DialogHeader>
           <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
-            <ShieldCheck className="h-5 w-5 text-purple-400" />
+            <ShieldCheck className="h-5 w-5 dg-text-purple" />
             {role?.name}
             {isSystem && (
-              <Badge className="bg-purple-500/15 text-purple-400 border-purple-500/30 text-[10px]">
+              <Badge className="bg-purple-500/15 dg-text-purple border-purple-500/30 text-[10px]">
                 <Lock className="h-2.5 w-2.5 mr-0.5" />系统
               </Badge>
             )}
diff --git a/frontend/src/components/system/SystemSettingsTab.tsx b/frontend/src/components/system/SystemSettingsTab.tsx
index 9ddbe71..c8c7a7b 100644
--- a/frontend/src/components/system/SystemSettingsTab.tsx
+++ b/frontend/src/components/system/SystemSettingsTab.tsx
@@ -89,68 +89,69 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
     handleLdapTest,
   } = props;
 
+  // 作为 SystemManager 子 Tab 渲染，外层已有 PageShell，此处仅输出配置内容 // Logan.Li
   return (
-    <>
+    <div className="max-w-3xl mx-auto w-full space-y-4">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardHeader>
-            <CardTitle className="text-slate-100 flex items-center gap-2">
-              <Lock className="h-5 w-5 text-blue-400" />
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Lock className="h-5 w-5 dg-text-blue" />
               安全设置
             </CardTitle>
-            <CardDescription className="text-slate-500">密码策略与登录安全</CardDescription>
+            <CardDescription className="dg-text-muted">密码策略与登录安全</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">强制密码复杂度</p>
-                <p className="text-xs text-slate-500">要求密码包含大小写字母、数字和特殊字符</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">强制密码复杂度</p>
+                <p className="text-xs dg-text-muted">要求密码包含大小写字母、数字和特殊字符</p>
               </div>
               <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
             </div>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">登录失败锁定</p>
-                <p className="text-xs text-slate-500">连续5次登录失败锁定账户30分钟</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">登录失败锁定</p>
+                <p className="text-xs dg-text-muted">连续5次登录失败锁定账户30分钟</p>
               </div>
               <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
             </div>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">双因素认证</p>
-                <p className="text-xs text-slate-500">启用后需要手机验证码登录</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">双因素认证</p>
+                <p className="text-xs dg-text-muted">启用后需要手机验证码登录</p>
               </div>
               <Switch className="data-[state=checked]:bg-blue-600" />
             </div>
           </CardContent>
         </Card>
 
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardHeader>
-            <CardTitle className="text-slate-100 flex items-center gap-2">
-              <History className="h-5 w-5 text-emerald-400" />
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <History className="h-5 w-5 dg-text-green" />
               审计设置
             </CardTitle>
-            <CardDescription className="text-slate-500">操作日志与审计策略</CardDescription>
+            <CardDescription className="dg-text-muted">操作日志与审计策略</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">记录所有操作</p>
-                <p className="text-xs text-slate-500">记录用户的所有操作行为</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">记录所有操作</p>
+                <p className="text-xs dg-text-muted">记录用户的所有操作行为</p>
               </div>
               <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
             </div>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">日志保留时间</p>
-                <p className="text-xs text-slate-500">操作日志保留180天</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">日志保留时间</p>
+                <p className="text-xs dg-text-muted">操作日志保留180天</p>
               </div>
               <Select defaultValue="180">
-                <SelectTrigger className="w-32 h-8 bg-slate-800 border-slate-700 text-slate-200">
+                <SelectTrigger className="w-32 h-8 dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectContent className="dg-input">
                   <SelectItem value="30">30天</SelectItem>
                   <SelectItem value="90">90天</SelectItem>
                   <SelectItem value="180">180天</SelectItem>
@@ -161,25 +162,25 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
           </CardContent>
         </Card>
 
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardHeader>
-            <CardTitle className="text-slate-100 flex items-center gap-2">
-              <Key className="h-5 w-5 text-amber-400" />
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Key className="h-5 w-5 dg-text-yellow" />
               会话设置
             </CardTitle>
-            <CardDescription className="text-slate-500">会话超时与Token配置</CardDescription>
+            <CardDescription className="dg-text-muted">会话超时与Token配置</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">会话超时时间</p>
-                <p className="text-xs text-slate-500">用户无操作30分钟后自动登出</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">会话超时时间</p>
+                <p className="text-xs dg-text-muted">用户无操作30分钟后自动登出</p>
               </div>
               <Select defaultValue="30">
-                <SelectTrigger className="w-32 h-8 bg-slate-800 border-slate-700 text-slate-200">
+                <SelectTrigger className="w-32 h-8 dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectContent className="dg-input">
                   <SelectItem value="15">15分钟</SelectItem>
                   <SelectItem value="30">30分钟</SelectItem>
                   <SelectItem value="60">1小时</SelectItem>
@@ -189,103 +190,103 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
             </div>
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm font-medium text-slate-200">单点登录</p>
-                <p className="text-xs text-slate-500">同一账号只能在一个设备登录</p>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">单点登录</p>
+                <p className="text-xs dg-text-muted">同一账号只能在一个设备登录</p>
               </div>
               <Switch className="data-[state=checked]:bg-blue-600" />
             </div>
           </CardContent>
         </Card>
 
-        <Card className="bg-slate-900 border-slate-800">
+        <Card className="dg-card">
           <CardHeader>
-            <CardTitle className="text-slate-100 flex items-center gap-2">
-              <Settings className="h-5 w-5 text-purple-400" />
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Settings className="h-5 w-5 dg-text-purple" />
               系统信息
             </CardTitle>
-            <CardDescription className="text-slate-500">版本与系统状态</CardDescription>
+            <CardDescription className="dg-text-muted">版本与系统状态</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-slate-400">系统版本</span>
-              <span className="text-sm text-slate-200">v2.5.1</span>
+              <span className="text-sm dg-text-secondary">系统版本</span>
+              <span className="text-sm text-[var(--dg-text-primary)]">v2.5.1</span>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm text-slate-400">运行时间</span>
-              <span className="text-sm text-slate-200">30天 12小时</span>
+              <span className="text-sm dg-text-secondary">运行时间</span>
+              <span className="text-sm text-[var(--dg-text-primary)]">30天 12小时</span>
             </div>
           </CardContent>
         </Card>
       </div>
 
       {/* LDAP 配置 */}
-      <Card className="bg-slate-900 border-slate-800 mt-4">
+      <Card className="dg-card mt-4">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="text-slate-100 flex items-center gap-2">
-                <Network className="h-5 w-5 text-cyan-400" />
+              <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+                <Network className="h-5 w-5 dg-text-cyan" />
                 LDAP / Active Directory
               </CardTitle>
-              <CardDescription className="text-slate-500 mt-1">配置 LDAP 服务器，实现统一身份认证</CardDescription>
+              <CardDescription className="dg-text-muted mt-1">配置 LDAP 服务器，实现统一身份认证</CardDescription>
             </div>
           </div>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-1.5">
-              <label className="text-xs text-slate-500">LDAP 服务器地址</label>
+              <label className="text-xs dg-text-muted">LDAP 服务器地址</label>
               <Input
                 value={ldapForm.ldap_host}
                 onChange={(e) => setLdapForm({ ...ldapForm, ldap_host: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                className="dg-input"
                 placeholder="ldap.example.com"
               />
             </div>
             <div className="space-y-1.5">
-              <label className="text-xs text-slate-500">端口</label>
+              <label className="text-xs dg-text-muted">端口</label>
               <Input
                 type="number"
                 value={ldapForm.ldap_port}
                 onChange={(e) => setLdapForm({ ...ldapForm, ldap_port: Number(e.target.value) })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200"
+                className="dg-input"
                 placeholder="389"
               />
             </div>
             <div className="space-y-1.5 col-span-2">
-              <label className="text-xs text-slate-500">Base DN（用户搜索基础）</label>
+              <label className="text-xs dg-text-muted">Base DN（用户搜索基础）</label>
               <Input
                 value={ldapForm.base_dn}
                 onChange={(e) => setLdapForm({ ...ldapForm, base_dn: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                className="dg-input"
                 placeholder="ou=users,dc=example,dc=com"
               />
             </div>
             <div className="space-y-1.5">
-              <label className="text-xs text-slate-500">管理员 Bind DN</label>
+              <label className="text-xs dg-text-muted">管理员 Bind DN</label>
               <Input
                 value={ldapForm.admin_dn}
                 onChange={(e) => setLdapForm({ ...ldapForm, admin_dn: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                className="dg-input"
                 placeholder="cn=admin,dc=example,dc=com"
               />
             </div>
             <div className="space-y-1.5">
-              <label className="text-xs text-slate-500">管理员密码 {ldapConfig && '（留空不修改）'}</label>
+              <label className="text-xs dg-text-muted">管理员密码 {ldapConfig && '（留空不修改）'}</label>
               <Input
                 type="password"
                 value={ldapForm.admin_password}
                 onChange={(e) => setLdapForm({ ...ldapForm, admin_password: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                className="dg-input"
                 placeholder="******"
               />
             </div>
             <div className="space-y-1.5 col-span-2">
-              <label className="text-xs text-slate-500">搜索过滤器（可选，用 %s 代表用户名）</label>
+              <label className="text-xs dg-text-muted">搜索过滤器（可选，用 %s 代表用户名）</label>
               <Input
                 value={ldapForm.search_filter}
                 onChange={(e) => setLdapForm({ ...ldapForm, search_filter: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+                className="dg-input"
                 placeholder="(uid=%s)"
               />
             </div>
@@ -295,14 +296,14 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
                 onCheckedChange={(v) => setLdapForm({ ...ldapForm, use_ldaps: v })}
                 className="data-[state=checked]:bg-blue-600"
               />
-              <span className="text-sm text-slate-300">启用 LDAPS（SSL 加密）</span>
+              <span className="text-sm text-[var(--dg-text-secondary)]">启用 LDAPS（SSL 加密）</span>
             </div>
           </div>
 
           {/* 测试/保存按钮 */}
-          <div className="flex items-center gap-3 mt-4 pt-4 border-t border-slate-800">
+          <div className="flex items-center gap-3 mt-4 pt-4 border-t border-[var(--dg-border)]">
             {ldapTestResult && (
-              <span className={`text-xs ${ldapTestResult.includes('成功') ? 'text-emerald-400' : 'text-red-400'}`}>
+              <span className={`text-xs ${ldapTestResult.includes('成功') ? 'dg-text-green' : 'dg-text-red'}`}>
                 {ldapTestResult}
               </span>
             )}
@@ -310,7 +311,7 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
               <Button
                 variant="outline"
                 size="sm"
-                className="border-slate-700 text-slate-300"
+                className="dg-btn-secondary"
                 onClick={handleLdapTest}
                 disabled={ldapTesting}
               >
@@ -319,7 +320,7 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
               </Button>
               <Button
                 size="sm"
-                className="bg-blue-600 hover:bg-blue-700 text-white"
+                className="dg-btn-primary"
                 onClick={handleLdapSave}
                 disabled={ldapSaving}
               >
@@ -336,6 +337,6 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
           <LdapManagementSection {...props} />
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/frontend/src/components/system/TerminalSessionsTab.tsx b/frontend/src/components/system/TerminalSessionsTab.tsx
index e826286..979833c 100644
--- a/frontend/src/components/system/TerminalSessionsTab.tsx
+++ b/frontend/src/components/system/TerminalSessionsTab.tsx
@@ -63,20 +63,20 @@ export function TerminalSessionsTab() {
   const 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">
           活动中
         </Badge>
       );
     }
     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">
           失败
         </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-active)]/10">
         已关闭
       </Badge>
     );
@@ -146,12 +146,12 @@ export function TerminalSessionsTab() {
       {/* Filters */}
       <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="搜索用户/服务器/IP..."
             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>
         <div className="flex items-center gap-1">
@@ -163,7 +163,7 @@ export function TerminalSessionsTab() {
               className={
                 statusFilter === st
                   ? 'h-8 bg-blue-600 hover:bg-blue-700 text-white'
-                  : 'h-8 border-slate-700 text-slate-400 hover:text-slate-100 hover:bg-slate-800'
+                  : 'h-8 border-[var(--dg-border)] dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
               }
               onClick={() => setStatusFilter(st)}
             >
@@ -173,7 +173,7 @@ export function TerminalSessionsTab() {
         </div>
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
           onClick={() => refetch()}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
@@ -192,23 +192,23 @@ export function TerminalSessionsTab() {
       </div>
 
       {/* Sessions Table */}
-      <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)]">
             {loading ? (
               <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">
                 <Search className="h-8 w-8 mb-3 opacity-40" />
                 <p className="text-sm">暂无终端会话记录</p>
               </div>
             ) : (
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-800 hover:bg-transparent">
-                    <TableHead className="text-slate-400 w-10">
+                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                    <TableHead className="dg-text-secondary w-10">
                       <input
                         type="checkbox"
                         checked={allChecked}
@@ -216,19 +216,19 @@ export function TerminalSessionsTab() {
                         className="accent-blue-600 cursor-pointer"
                       />
                     </TableHead>
-                    <TableHead className="text-slate-400">用户</TableHead>
-                    <TableHead className="text-slate-400">服务器</TableHead>
-                    <TableHead className="text-slate-400">来源 IP</TableHead>
-                    <TableHead className="text-slate-400">状态</TableHead>
-                    <TableHead className="text-slate-400">时长</TableHead>
-                    <TableHead className="text-slate-400">录制</TableHead>
-                    <TableHead className="text-slate-400">开始时间</TableHead>
-                    <TableHead className="text-slate-400 text-right">操作</TableHead>
+                    <TableHead className="dg-text-secondary">用户</TableHead>
+                    <TableHead className="dg-text-secondary">服务器</TableHead>
+                    <TableHead className="dg-text-secondary">来源 IP</TableHead>
+                    <TableHead className="dg-text-secondary">状态</TableHead>
+                    <TableHead className="dg-text-secondary">时长</TableHead>
+                    <TableHead className="dg-text-secondary">录制</TableHead>
+                    <TableHead className="dg-text-secondary">开始时间</TableHead>
+                    <TableHead className="dg-text-secondary text-right">操作</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {filtered.map((s) => (
-                    <TableRow key={s.id} className="border-slate-800 hover:bg-slate-800/50">
+                    <TableRow key={s.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                       <TableCell>
                         <input
                           type="checkbox"
@@ -239,28 +239,28 @@ export function TerminalSessionsTab() {
                         />
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-200">{s.username || '--'}</span>
+                        <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">
+                          <span className="text-sm text-[var(--dg-text-primary)]">{s.server_name || '--'}</span>
+                          <span className="text-xs dg-text-muted">
                             {s.server_ip}:{s.server_port}
                           </span>
                         </div>
                       </TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-400">{s.client_ip || '--'}</span>
+                        <span className="text-sm dg-text-secondary">{s.client_ip || '--'}</span>
                       </TableCell>
                       <TableCell>{getStatusBadge(s.status)}</TableCell>
                       <TableCell>
-                        <span className="text-sm text-slate-300">{formatDuration(s.duration)}</span>
+                        <span className="text-sm text-[var(--dg-text-secondary)]">{formatDuration(s.duration)}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-xs text-slate-500">{formatSize(s.record_size)}</span>
+                        <span className="text-xs dg-text-muted">{formatSize(s.record_size)}</span>
                       </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>
@@ -269,7 +269,7 @@ export function TerminalSessionsTab() {
                           <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={() => openReplay(s.id)}
                             title="回放"
                           >
@@ -278,7 +278,7 @@ export function TerminalSessionsTab() {
                           <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={() => handleDelete(s.id)}
                             title="删除"
                           >
diff --git a/frontend/src/components/system/UserDetailDialog.tsx b/frontend/src/components/system/UserDetailDialog.tsx
index 88079cd..d7fb419 100644
--- a/frontend/src/components/system/UserDetailDialog.tsx
+++ b/frontend/src/components/system/UserDetailDialog.tsx
@@ -30,52 +30,52 @@ export function UserDetailDialog({
 }: UserDetailDialogProps) {
   return (
     <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
-      <DialogContent className="bg-slate-900 border-slate-800">
+      <DialogContent className="dg-card">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <UserIcon className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <UserIcon className="h-5 w-5 dg-text-blue" />
             {selectedUser?.nickname}
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             @{selectedUser?.username} · {selectedUser?.email}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
+          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
             <div>
-              <p className="text-xs text-slate-500 mb-1">用户名</p>
-              <p className="text-sm text-slate-200">{selectedUser?.username}</p>
+              <p className="text-xs dg-text-muted mb-1">用户名</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.username}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">昵称</p>
-              <p className="text-sm text-slate-200">{selectedUser?.nickname}</p>
+              <p className="text-xs dg-text-muted mb-1">昵称</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.nickname}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">邮箱</p>
-              <p className="text-sm text-slate-200">{selectedUser?.email}</p>
+              <p className="text-xs dg-text-muted mb-1">邮箱</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.email}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">手机号</p>
-              <p className="text-sm text-slate-200">{selectedUser?.phone || '--'}</p>
+              <p className="text-xs dg-text-muted mb-1">手机号</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.phone || '--'}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">状态</p>
-              <p className="text-sm text-slate-200">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
+              <p className="text-xs dg-text-muted mb-1">状态</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">创建时间</p>
-              <p className="text-sm text-slate-200">
+              <p className="text-xs dg-text-muted mb-1">创建时间</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">
                 {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
               </p>
             </div>
           </div>
 
           <div>
-            <h4 className="text-sm font-medium text-slate-300 mb-2">角色</h4>
+            <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] mb-2">角色</h4>
             <div className="flex flex-wrap gap-2">
               {selectedUser?.roles.map((role: string) => (
-                <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
+                <Badge key={role} variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
                   {role}
                 </Badge>
               ))}
@@ -86,7 +86,7 @@ export function UserDetailDialog({
         <DialogFooter>
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
             disabled={selectedUser?.authSource === 'ldap'}
             onClick={() => selectedUser && onResetPassword?.(selectedUser)}
           >
diff --git a/frontend/src/components/system/UserFormDialog.tsx b/frontend/src/components/system/UserFormDialog.tsx
index 97a61c6..6bbca87 100644
--- a/frontend/src/components/system/UserFormDialog.tsx
+++ b/frontend/src/components/system/UserFormDialog.tsx
@@ -77,13 +77,13 @@ export function UserFormDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-slate-900 border-slate-800">
+      <DialogContent className="dg-card">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <User className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <User className="h-5 w-5 dg-text-blue" />
             {editingUser ? '编辑用户' : '新建用户'}
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             {editingUser ? '修改用户信息' : '创建新的系统用户'}
           </DialogDescription>
         </DialogHeader>
@@ -91,49 +91,49 @@ export function UserFormDialog({
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">用户名</label>
+              <label className="text-xs dg-text-muted">用户名</label>
               <Input
                 value={form.username}
                 onChange={(e) => setForm({ ...form, username: e.target.value })}
                 disabled={!!editingUser}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="dg-input"
                 placeholder="登录用户名"
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">昵称</label>
+              <label className="text-xs dg-text-muted">昵称</label>
               <Input
                 value={form.nickname}
                 onChange={(e) => setForm({ ...form, nickname: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="dg-input"
                 placeholder="显示昵称"
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">邮箱</label>
+              <label className="text-xs dg-text-muted">邮箱</label>
               <Input
                 value={form.email}
                 onChange={(e) => setForm({ ...form, email: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="dg-input"
                 placeholder="user@example.com"
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">手机号</label>
+              <label className="text-xs dg-text-muted">手机号</label>
               <Input
                 value={form.phone}
                 onChange={(e) => setForm({ ...form, phone: e.target.value })}
-                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                className="dg-input"
                 placeholder="可选"
               />
             </div>
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">角色</label>
+              <label className="text-xs dg-text-muted">角色</label>
               <Select value={form.role} onValueChange={(v) => setForm({ ...form, role: v })}>
-                <SelectTrigger className="bg-slate-800/50 border-slate-700 text-slate-200">
+                <SelectTrigger className="dg-input">
                   <SelectValue placeholder="选择角色" />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectContent className="dg-input">
                   {roles.map((role) => (
                     <SelectItem key={role.id} value={role.name}>
                       {role.name}
@@ -143,15 +143,15 @@ export function UserFormDialog({
               </Select>
             </div>
             <div className="space-y-2">
-              <label className="text-xs text-slate-500">状态</label>
+              <label className="text-xs dg-text-muted">状态</label>
               <Select
                 value={String(form.status)}
                 onValueChange={(v) => setForm({ ...form, status: Number(v) })}
               >
-                <SelectTrigger className="bg-slate-800/50 border-slate-700 text-slate-200">
+                <SelectTrigger className="dg-input">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent className="bg-slate-800 border-slate-700">
+                <SelectContent className="dg-input">
                   <SelectItem value="1">正常</SelectItem>
                   <SelectItem value="0">禁用</SelectItem>
                 </SelectContent>
@@ -159,21 +159,21 @@ export function UserFormDialog({
             </div>
           </div>
           <div className="space-y-2">
-            <label className="text-xs text-slate-500">
+            <label className="text-xs dg-text-muted">
               密码{editingUser ? '（留空则不修改）' : ''}
             </label>
             <Input
               type="password"
               value={form.password}
               onChange={(e) => setForm({ ...form, password: e.target.value })}
-              className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              className="dg-input"
               placeholder={editingUser ? '留空则不修改' : '设置初始密码'}
             />
           </div>
         </div>
 
         <DialogFooter>
-          <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => onOpenChange(false)}>
             取消
           </Button>
           <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={onSubmit} disabled={saving}>
diff --git a/frontend/src/components/system/replay/ReplayCommandSidebar.tsx b/frontend/src/components/system/replay/ReplayCommandSidebar.tsx
index fb946fb..df492bb 100644
--- a/frontend/src/components/system/replay/ReplayCommandSidebar.tsx
+++ b/frontend/src/components/system/replay/ReplayCommandSidebar.tsx
@@ -24,24 +24,24 @@ export function ReplayCommandSidebar({ commands, activeOffset, onSeek }: Props)
   });
 
   return (
-    <div className="w-56 shrink-0 border-l border-slate-800 flex flex-col bg-slate-900/80">
-      <div className="px-2.5 py-2 border-b border-slate-800">
-        <div className="text-xs font-medium text-slate-300 mb-1.5">
+    <div className="w-56 shrink-0 border-l border-[var(--dg-border)] flex flex-col bg-[var(--dg-bg-secondary)]">
+      <div className="px-2.5 py-2 border-b border-[var(--dg-border)]">
+        <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-1.5">
           {t('audit.terminal.replayPlayer.commands')} ({commands.length})
         </div>
         <div className="relative">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 dg-text-muted" />
           <Input
             value={kw}
             onChange={(e) => setKw(e.target.value)}
             placeholder={t('audit.terminal.replayPlayer.searchCommand')}
-            className="h-7 pl-7 text-xs bg-slate-800 border-slate-700"
+            className="h-7 pl-7 text-xs dg-input"
           />
         </div>
       </div>
       <ScrollArea className="flex-1 min-h-0">
         {filtered.length === 0 ? (
-          <div className="p-3 text-xs text-slate-500 text-center">{t('audit.terminal.replayPlayer.noCommands')}</div>
+          <div className="p-3 text-xs dg-text-muted text-center">{t('audit.terminal.replayPlayer.noCommands')}</div>
         ) : (
           <div className="p-1 space-y-0.5">
             {filtered.map((c) => {
@@ -53,14 +53,14 @@ export function ReplayCommandSidebar({ commands, activeOffset, onSeek }: Props)
                   onClick={() => onSeek(c.offsetSec)}
                   className={cn(
                     'w-full text-left rounded px-2 py-1.5 transition-colors',
-                    active ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-slate-800/60 border border-transparent',
+                    active ? 'bg-blue-500/15 border border-blue-500/30' : 'hover:bg-[var(--dg-bg-hover)]/60 border border-transparent',
                   )}
                 >
                   <div className="flex items-center gap-1">
-                    <span className="text-[10px] text-slate-500 font-mono shrink-0">{c.label}</span>
-                    {c.highRisk && <AlertTriangle className="w-3 h-3 text-red-400 shrink-0" />}
+                    <span className="text-[10px] dg-text-muted font-mono shrink-0">{c.label}</span>
+                    {c.highRisk && <AlertTriangle className="w-3 h-3 dg-text-red shrink-0" />}
                   </div>
-                  <code className="text-[11px] text-slate-300 block truncate mt-0.5">{c.command}</code>
+                  <code className="text-[11px] text-[var(--dg-text-secondary)] block truncate mt-0.5">{c.command}</code>
                 </button>
               );
             })}
diff --git a/frontend/src/components/task/CronJobFormDialog.tsx b/frontend/src/components/task/CronJobFormDialog.tsx
index 50bfd81..257be5a 100644
--- a/frontend/src/components/task/CronJobFormDialog.tsx
+++ b/frontend/src/components/task/CronJobFormDialog.tsx
@@ -232,7 +232,7 @@ export function CronJobFormDialog({
             <div className="space-y-3">
               <div>
                 <Label className="text-[var(--dg-text-primary)]">
-                  选择脚本 <span className="text-red-400">*</span>
+                  选择脚本 <span className="dg-text-red">*</span>
                 </Label>
                 {filteredScripts.length === 0 ? (
                   <div className="mt-1 px-3 py-4 rounded-md border border-dashed border-[var(--dg-border)] text-center">
diff --git a/frontend/src/components/task/CronJobManager.tsx b/frontend/src/components/task/CronJobManager.tsx
index c887fda..07afa89 100644
--- a/frontend/src/components/task/CronJobManager.tsx
+++ b/frontend/src/components/task/CronJobManager.tsx
@@ -26,6 +26,9 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
 import { getStatusBadge, parseCron } from './cronJobHelpers';
 import { CronJobFormDialog } from './CronJobFormDialog';
 import { ExecutionHistoryDialog } from './ExecutionHistoryDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { CronJobRecord } from '@/types';
 
 export function CronJobManager() {
@@ -162,207 +165,215 @@ export function CronJobManager() {
     }
   };
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">定时任务</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">Cron 任务管理与执行</p>
+  // 工具栏：搜索 + 全选 + 批量操作 // Logan.Li
+  const toolbar = (
+    <div className="flex items-center justify-between flex-wrap gap-4">
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+          <Input
+            placeholder="搜索任务..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10 dg-input"
+          />
         </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={() => setIsLogDialogOpen(true)}
-          >
-            <History className="h-4 w-4 mr-2" />
-            执行历史
-          </Button>
-          <Button
-            variant="outline"
-            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={() => refreshData()}
-            disabled={refreshing}
-          >
-            <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
-            刷新
-          </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700" onClick={openCreate}>
-            <Plus className="h-4 w-4 mr-2" />
-            新建任务
-          </Button>
-        </div>
-      </div>
-
-      {/* Stats */}
-      <StatStrip
-        items={[
-          { label: '任务总数', value: jobs.length, color: 'blue' },
-          { label: '已启用', value: jobs.filter((j) => j.enabled).length, color: 'emerald' },
-          { label: '累计成功', value: jobs.reduce((sum, j) => sum + (j.success_count || 0), 0), color: 'emerald' },
-          { label: '累计失败', value: jobs.reduce((sum, j) => sum + (j.fail_count || 0), 0), color: 'red' },
-        ]}
-      />
-
-      {/* Filters */}
-      <div className="flex items-center justify-between flex-wrap gap-4">
-        <div className="flex items-center gap-3 flex-wrap">
-          <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
-            <Input
-              placeholder="搜索任务..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+        {filteredJobs.length > 0 && (
+          <label className="flex items-center gap-2 text-sm dg-text-secondary cursor-pointer select-none">
+            <Checkbox
+              checked={
+                selectedIds.length === filteredJobs.length && filteredJobs.length > 0
+              }
+              onCheckedChange={toggleSelectAll}
+              className="border-[var(--dg-border)]"
             />
-          </div>
-          {filteredJobs.length > 0 && (
-            <label className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)] cursor-pointer select-none">
-              <Checkbox
-                checked={
-                  selectedIds.length === filteredJobs.length && filteredJobs.length > 0
-                }
-                onCheckedChange={toggleSelectAll}
-                className="border-[var(--dg-border)]"
-              />
-              全选
-            </label>
-          )}
-        </div>
-        {selectedIds.length > 0 && (
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-[var(--dg-text-secondary)]">已选择 {selectedIds.length} 项</span>
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-              onClick={handleBatchDelete}
-            >
-              <Trash2 className="h-4 w-4 mr-2" />
-              批量删除
-            </Button>
-          </div>
+            全选
+          </label>
         )}
       </div>
-
-      {initialLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
+      {selectedIds.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm dg-text-secondary">已选择 {selectedIds.length} 项</span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="dg-btn-danger dg-btn-sm"
+            onClick={handleBatchDelete}
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            批量删除
+          </Button>
         </div>
-      ) : filteredJobs.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
-          <PackageOpen className="h-12 w-12 mb-3 opacity-40" />
-          <p className="text-sm">暂无定时任务</p>
-        </div>
-      ) : null}
+      )}
+    </div>
+  );
 
-      {/* Job List */}
-      <div className="space-y-3">
-        {filteredJobs.map((job) => (
-          <Card key={job.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-            <CardContent className="p-4">
-              <div className="flex items-start justify-between gap-3">
-                <div className="flex items-center pt-1">
-                  <Checkbox
-                    checked={selectedIds.includes(job.id)}
-                    onCheckedChange={() => toggleSelect(job.id)}
-                    className="border-[var(--dg-border)]"
-                  />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-3 flex-wrap">
-                    <h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
-                    <Badge
-                      variant="outline"
-                      className={
-                        job.enabled
-                          ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                          : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'
-                      }
-                    >
-                      {job.enabled ? '已启用' : '已禁用'}
-                    </Badge>
-                    {getStatusBadge(job.last_status)}
-                    <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
-                      {job.type === 'shell' ? 'Shell' : job.type === 'python' ? 'Python' : '命令'}
-                    </Badge>
-                  </div>
-                  <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{job.description || '—'}</p>
-                  <div className="flex items-center gap-4 mt-2 text-sm">
-                    <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
-                      <Clock className="h-3 w-3" />
-                      {parseCron(job.cron_expr)}
-                    </span>
-                    {(job.type === 'shell' || job.type === 'python') && job.script?.name ? (
-                      <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
-                        <FileCode className="h-3 w-3" />
-                        <span className="text-xs">{job.script.name}</span>
-                      </span>
-                    ) : job.content && (
-                      <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
-                        <Terminal className="h-3 w-3" />
-                        <code className="text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded truncate max-w-xs">
-                          {job.content}
-                        </code>
-                      </span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-4 mt-2 text-xs text-[var(--dg-text-muted)]">
-                    <span>上次执行: {job.last_run_at ? new Date(job.last_run_at).toLocaleString() : '--'}</span>
-                    <span>成功: {job.success_count || 0} / 失败: {job.fail_count || 0}</span>
-                    <span>累计: {job.run_count || 0} 次</span>
-                  </div>
-                </div>
+  return (
+    <>
+      <PageShell
+        variant="list"
+        title="定时任务"
+        subtitle="Cron 任务管理与执行"
+        icon={<Clock className="h-5 w-5" />}
+        metrics={(
+          <StatStrip
+            items={[
+              { label: '任务总数', value: jobs.length, color: 'blue' },
+              { label: '已启用', value: jobs.filter((j) => j.enabled).length, color: 'emerald' },
+              { label: '累计成功', value: jobs.reduce((sum, j) => sum + (j.success_count || 0), 0), color: 'emerald' },
+              { label: '累计失败', value: jobs.reduce((sum, j) => sum + (j.fail_count || 0), 0), color: 'red' },
+            ]}
+          />
+        )}
+        toolbar={toolbar}
+        loading={initialLoading}
+        actions={(
+          <>
+            <Button
+              variant="outline"
+              className="dg-btn-secondary"
+              onClick={() => setIsLogDialogOpen(true)}
+            >
+              <History className="h-4 w-4 mr-2" />
+              执行历史
+            </Button>
+            <Button
+              variant="outline"
+              className="dg-btn-secondary"
+              onClick={() => refreshData()}
+              disabled={refreshing}
+            >
+              <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
+              刷新
+            </Button>
+            <Button className="dg-btn-primary" onClick={openCreate}>
+              <Plus className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          </>
+        )}
+      >
+        {filteredJobs.length === 0 ? (
+          <PageEmpty
+            icon={<PackageOpen className="h-12 w-12" />}
+            title="暂无定时任务"
+            action={(
+              <Button className="dg-btn-primary" onClick={openCreate}>
+                <Plus className="h-4 w-4 mr-2" />
+                新建任务
+              </Button>
+            )}
+          />
+        ) : (
+          <ContentPanel>
+            <div className="space-y-3">
+              {filteredJobs.map((job) => (
+                <Card key={job.id} className="dg-card">
+                  <CardContent className="p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex items-center pt-1">
+                        <Checkbox
+                          checked={selectedIds.includes(job.id)}
+                          onCheckedChange={() => toggleSelect(job.id)}
+                          className="border-[var(--dg-border)]"
+                        />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 flex-wrap">
+                          <h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
+                          <Badge
+                            variant="outline"
+                            className={
+                              job.enabled
+                                ? 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
+                                : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'
+                            }
+                          >
+                            {job.enabled ? '已启用' : '已禁用'}
+                          </Badge>
+                          {getStatusBadge(job.last_status)}
+                          <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
+                            {job.type === 'shell' ? 'Shell' : job.type === 'python' ? 'Python' : '命令'}
+                          </Badge>
+                        </div>
+                        <p className="text-sm dg-text-secondary mt-1">{job.description || '—'}</p>
+                        <div className="flex items-center gap-4 mt-2 text-sm">
+                          <span className="flex items-center gap-1 dg-text-secondary">
+                            <Clock className="h-3 w-3" />
+                            {parseCron(job.cron_expr)}
+                          </span>
+                          {(job.type === 'shell' || job.type === 'python') && job.script?.name ? (
+                            <span className="flex items-center gap-1 dg-text-secondary">
+                              <FileCode className="h-3 w-3" />
+                              <span className="text-xs">{job.script.name}</span>
+                            </span>
+                          ) : job.content && (
+                            <span className="flex items-center gap-1 dg-text-secondary">
+                              <Terminal className="h-3 w-3" />
+                              <code className="text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded truncate max-w-xs">
+                                {job.content}
+                              </code>
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-4 mt-2 text-xs text-[var(--dg-text-muted)]">
+                          <span>上次执行: {job.last_run_at ? new Date(job.last_run_at).toLocaleString() : '--'}</span>
+                          <span>成功: {job.success_count || 0} / 失败: {job.fail_count || 0}</span>
+                          <span>累计: {job.run_count || 0} 次</span>
+                        </div>
+                      </div>
 
-                <div className="flex items-center gap-2 shrink-0">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
-                    disabled={executingId === job.id}
-                    onClick={() => handleExecuteJob(job.id)}
-                  >
-                    {executingId === job.id ? (
-                      <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-                    ) : (
-                      <Play className="h-4 w-4 mr-1" />
-                    )}
-                    立即执行
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
-                    title={job.enabled ? '禁用' : '启用'}
-                    onClick={() => handleToggleJob(job.id)}
-                  >
-                    {job.enabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
-                    title="编辑"
-                    onClick={() => openEdit(job)}
-                  >
-                    <Edit className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-red-400"
-                    title="删除"
-                    onClick={() => handleDeleteJob(job)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="border-emerald-600 dg-text-green hover:bg-emerald-600/20"
+                          disabled={executingId === job.id}
+                          onClick={() => handleExecuteJob(job.id)}
+                        >
+                          {executingId === job.id ? (
+                            <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                          ) : (
+                            <Play className="h-4 w-4 mr-1" />
+                          )}
+                          立即执行
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 dg-text-secondary hover:dg-text-blue"
+                          title={job.enabled ? '禁用' : '启用'}
+                          onClick={() => handleToggleJob(job.id)}
+                        >
+                          {job.enabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 dg-text-secondary hover:dg-text-blue"
+                          title="编辑"
+                          onClick={() => openEdit(job)}
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 dg-text-secondary hover:dg-text-red"
+                          title="删除"
+                          onClick={() => handleDeleteJob(job)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </ContentPanel>
+        )}
+      </PageShell>
 
       {/* 新建/编辑定时任务弹窗 */}
       <CronJobFormDialog
@@ -377,6 +388,6 @@ export function CronJobManager() {
         open={isLogDialogOpen}
         onOpenChange={setIsLogDialogOpen}
       />
-    </div>
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/task/ExecutionHistoryDialog.tsx b/frontend/src/components/task/ExecutionHistoryDialog.tsx
index ad83bc6..d40c41f 100644
--- a/frontend/src/components/task/ExecutionHistoryDialog.tsx
+++ b/frontend/src/components/task/ExecutionHistoryDialog.tsx
@@ -88,7 +88,7 @@ export function ExecutionHistoryDialog({
                       </TableCell>
                       <TableCell className="text-[var(--dg-text-secondary)]">
                         {exec.output ? (
-                          <span className="text-blue-400 text-xs flex items-center gap-1">
+                          <span className="dg-text-blue text-xs flex items-center gap-1">
                             <Terminal className="h-3 w-3" />
                             {expandedExec === exec.id ? '收起' : '查看'}
                           </span>
diff --git a/frontend/src/components/task/RemoteExecPage.tsx b/frontend/src/components/task/RemoteExecPage.tsx
index 55dd8ec..05f2a8b 100644
--- a/frontend/src/components/task/RemoteExecPage.tsx
+++ b/frontend/src/components/task/RemoteExecPage.tsx
@@ -12,6 +12,8 @@ import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { serverApi, remoteExecApi, type RemoteExecResult, type RemoteUploadResult } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 interface RemoteServer {
@@ -26,13 +28,10 @@ export function RemoteExecPage() {
   const [keyword, setKeyword] = useState('');
   const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState<'exec' | 'upload'>('exec');
-  // 执行命令
   const [command, setCommand] = useState('');
   const [timeoutSec, setTimeoutSec] = useState(60);
-  // 上传文件
   const [file, setFile] = useState<File | null>(null);
   const [remotePath, setRemotePath] = useState('/tmp/');
-  // 结果 + 运行态
   const [execResults, setExecResults] = useState<RemoteExecResult[]>([]);
   const [uploadResults, setUploadResults] = useState<RemoteUploadResult[]>([]);
   const [running, setRunning] = useState(false);
@@ -58,7 +57,6 @@ export function RemoteExecPage() {
     setSelected(selected.size === servers.length ? new Set() : new Set(servers.map(s => s.id)));
   };
 
-  // 批量执行命令（高危，需确认）
   const doExec = async () => {
     if (!command.trim()) { toast.error('请输入要执行的命令'); return; }
     if (selCount === 0) { toast.error('请至少选择一台主机'); return; }
@@ -78,12 +76,10 @@ export function RemoteExecPage() {
     finally { setRunning(false); }
   };
 
-  // 批量上传文件
   const doUpload = async () => {
     if (!file) { toast.error('请选择要上传的文件'); return; }
     if (!remotePath.trim()) { toast.error('请填写远程目标路径'); return; }
     if (selCount === 0) { toast.error('请至少选择一台主机'); return; }
-    // 远程路径若是目录则追加文件名
     const dst = remotePath.trim().endsWith('/') ? remotePath.trim() + file.name : remotePath.trim();
     setRunning(true); setUploadResults([]);
     try {
@@ -96,47 +92,48 @@ export function RemoteExecPage() {
   };
 
   return (
-    <div className="space-y-4">
-      {/* 标题栏 */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-[var(--dg-text-primary)]">
-          <Terminal className="h-5 w-5 text-blue-400" />
-          <span className="text-lg font-medium">远程执行</span>
-          <span className="text-xs text-[var(--dg-text-muted)]">— 关联主机后批量执行命令 / 上传文件（Go-native SSH）</span>
-        </div>
-        <Button variant="outline" size="sm" onClick={load} className="h-8 text-xs gap-1">
-          <RefreshCw className="w-3.5 h-3.5" />刷新
+    <PageShell
+      variant="workspace"
+      title="远程执行"
+      subtitle="关联主机后批量执行命令 / 上传文件（Go-native SSH）"
+      icon={<Terminal className="h-5 w-5" />}
+      contentClassName="flex-1 min-h-0"
+      loading={loading}
+      actions={(
+        <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={load}>
+          <RefreshCw className="w-3.5 h-3.5 mr-1" />
+          刷新
         </Button>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
+      )}
+    >
+      <div className="grid grid-cols-12 gap-4 flex-1 min-h-0">
         {/* 左侧：主机选择 */}
-        <Card className="col-span-5 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <Card className="col-span-5 dg-card">
           <CardHeader className="pb-3">
             <CardTitle className="text-sm flex items-center justify-between text-[var(--dg-text-primary)]">
-              <span className="flex items-center gap-2"><ServerIcon className="h-4 w-4 text-blue-400" />选择目标主机</span>
+              <span className="flex items-center gap-2"><ServerIcon className="h-4 w-4 dg-text-blue" />选择目标主机</span>
               <Input
                 placeholder="搜索 主机名/IP"
                 value={keyword}
                 onChange={(e) => setKeyword(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && load()}
-                className="h-7 w-40 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
+                className="h-7 w-40 text-xs dg-input"
               />
             </CardTitle>
           </CardHeader>
           <CardContent className="max-h-[520px] overflow-y-auto space-y-1">
-            {loading ? (
-              <div className="flex items-center justify-center py-10 text-[var(--dg-text-muted)]">
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />加载中…
-              </div>
-            ) : servers.length === 0 ? (
-              <div className="text-center py-10 text-[var(--dg-text-muted)] text-xs">暂无服务器，请先在「服务器管理」添加</div>
+            {servers.length === 0 ? (
+              <PageEmpty
+                title="暂无服务器"
+                description="请先在「服务器管理」添加"
+                className="py-10"
+              />
             ) : (
               <>
-                <div className="flex items-center gap-2 px-2 py-1.5 text-xs text-[var(--dg-text-secondary)] border-b border-[var(--dg-border)]">
+                <div className="flex items-center gap-2 px-2 py-1.5 text-xs dg-text-secondary border-b border-[var(--dg-border)]">
                   <Checkbox checked={selected.size === servers.length && servers.length > 0} onCheckedChange={toggleAll} />
                   全选（{servers.length} 台）
-                  {selCount > 0 && <Badge className="ml-auto bg-blue-500/20 text-blue-400">已选 {selCount}</Badge>}
+                  {selCount > 0 && <Badge className="ml-auto bg-blue-500/20 dg-text-blue">已选 {selCount}</Badge>}
                 </div>
                 {servers.map(s => (
                   <label key={s.id} className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--dg-bg-tertiary)] cursor-pointer">
@@ -146,8 +143,8 @@ export function RemoteExecPage() {
                       <div className="text-[10px] text-[var(--dg-text-muted)] font-mono">{s.ip} · {s.username || 'root'}</div>
                     </div>
                     {s.has_auth === false
-                      ? <Badge className="bg-amber-500/20 text-amber-400 text-[10px]">无凭据</Badge>
-                      : <Badge className="bg-emerald-500/20 text-emerald-400 text-[10px]">{s.auth_type === 'key' ? '密钥' : '密码'}</Badge>}
+                      ? <Badge className="bg-amber-500/20 dg-text-yellow text-[10px]">无凭据</Badge>
+                      : <Badge className="bg-emerald-500/20 dg-text-green text-[10px]">{s.auth_type === 'key' ? '密钥' : '密码'}</Badge>}
                   </label>
                 ))}
               </>
@@ -155,20 +152,29 @@ export function RemoteExecPage() {
           </CardContent>
         </Card>
 
-        {/* 右侧：操作 + 结果 */}
+        {/* 右侧：操作 + 结果（内部子 Tab 保留按钮切换） // Logan.Li */}
         <div className="col-span-7 space-y-4">
-          {/* Tab 切换 */}
           <div className="flex gap-2">
-            <Button variant={tab === 'exec' ? 'default' : 'outline'} size="sm" onClick={() => setTab('exec')} className="h-8 text-xs gap-1">
+            <Button
+              variant={tab === 'exec' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setTab('exec')}
+              className={tab === 'exec' ? 'dg-btn-primary h-8 text-xs gap-1' : 'dg-btn-secondary h-8 text-xs gap-1'}
+            >
               <Terminal className="w-3.5 h-3.5" />执行命令
             </Button>
-            <Button variant={tab === 'upload' ? 'default' : 'outline'} size="sm" onClick={() => setTab('upload')} className="h-8 text-xs gap-1">
+            <Button
+              variant={tab === 'upload' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setTab('upload')}
+              className={tab === 'upload' ? 'dg-btn-primary h-8 text-xs gap-1' : 'dg-btn-secondary h-8 text-xs gap-1'}
+            >
               <Upload className="w-3.5 h-3.5" />上传文件
             </Button>
           </div>
 
           {tab === 'exec' ? (
-            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+            <Card className="dg-card">
               <CardHeader className="pb-3"><CardTitle className="text-sm text-[var(--dg-text-primary)]">批量执行命令</CardTitle></CardHeader>
               <CardContent className="space-y-3">
                 <textarea
@@ -179,10 +185,10 @@ export function RemoteExecPage() {
                   className="w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md px-3 py-2 text-xs font-mono text-[var(--dg-text-primary)] resize-none"
                 />
                 <div className="flex items-center gap-3">
-                  <span className="text-xs text-[var(--dg-text-secondary)]">超时(秒)</span>
+                  <span className="text-xs dg-text-secondary">超时(秒)</span>
                   <Input type="number" min={1} value={timeoutSec} onChange={(e) => setTimeoutSec(Number(e.target.value) || 60)}
-                    className="h-8 w-24 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
-                  <Button onClick={doExec} disabled={running} className="ml-auto bg-blue-600 hover:bg-blue-700 h-8 text-xs">
+                    className="h-8 w-24 text-xs dg-input" />
+                  <Button onClick={doExec} disabled={running} className="ml-auto dg-btn-primary h-8 text-xs">
                     {running ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <Terminal className="w-3.5 h-3.5 mr-1" />}
                     执行（{selCount} 台）
                   </Button>
@@ -190,21 +196,21 @@ export function RemoteExecPage() {
               </CardContent>
             </Card>
           ) : (
-            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+            <Card className="dg-card">
               <CardHeader className="pb-3"><CardTitle className="text-sm text-[var(--dg-text-primary)]">批量上传文件</CardTitle></CardHeader>
               <CardContent className="space-y-3">
                 <div className="space-y-1.5">
-                  <span className="text-xs text-[var(--dg-text-secondary)]">选择本地文件</span>
+                  <span className="text-xs dg-text-secondary">选择本地文件</span>
                   <Input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)}
-                    className="h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
+                    className="h-8 text-xs dg-input" />
                   {file && <span className="text-[10px] text-[var(--dg-text-muted)]">{file.name} ({(file.size / 1024).toFixed(1)} KB)</span>}
                 </div>
                 <div className="space-y-1.5">
-                  <span className="text-xs text-[var(--dg-text-secondary)]">远程目标路径（目录则自动追加文件名）</span>
+                  <span className="text-xs dg-text-secondary">远程目标路径（目录则自动追加文件名）</span>
                   <Input value={remotePath} onChange={(e) => setRemotePath(e.target.value)} placeholder="/tmp/ 或 /opt/app/config.yaml"
-                    className="h-8 text-xs font-mono bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
+                    className="h-8 text-xs font-mono dg-input" />
                 </div>
-                <Button onClick={doUpload} disabled={running} className="bg-blue-600 hover:bg-blue-700 h-8 text-xs">
+                <Button onClick={doUpload} disabled={running} className="dg-btn-primary h-8 text-xs">
                   {running ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileUp className="w-3.5 h-3.5 mr-1" />}
                   上传（{selCount} 台）
                 </Button>
@@ -212,21 +218,20 @@ export function RemoteExecPage() {
             </Card>
           )}
 
-          {/* 结果区 */}
           {(execResults.length > 0 || uploadResults.length > 0) && (
-            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+            <Card className="dg-card">
               <CardHeader className="pb-3"><CardTitle className="text-sm text-[var(--dg-text-primary)]">执行结果</CardTitle></CardHeader>
               <CardContent className="space-y-2 max-h-[300px] overflow-y-auto">
                 {execResults.map((r, i) => (
                   <div key={i} className="p-2 rounded border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
                     <div className="flex items-center gap-2 mb-1">
-                      {r.success ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" /> : <XCircle className="w-3.5 h-3.5 text-red-400" />}
+                      {r.success ? <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" /> : <XCircle className="w-3.5 h-3.5 dg-text-red" />}
                       <span className="text-xs font-mono text-[var(--dg-text-primary)]">{r.host}</span>
-                      <Badge className={r.success ? 'bg-emerald-500/20 text-emerald-400 text-[10px]' : 'bg-red-500/20 text-red-400 text-[10px]'}>
+                      <Badge className={r.success ? 'bg-emerald-500/20 dg-text-green text-[10px]' : 'bg-red-500/20 dg-text-red text-[10px]'}>
                         exit={r.exit_code} · {r.duration}ms
                       </Badge>
                     </div>
-                    <pre className="text-[10px] font-mono text-[var(--dg-text-secondary)] whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
+                    <pre className="text-[10px] font-mono dg-text-secondary whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
                       {r.error || r.output || '(无输出)'}
                     </pre>
                   </div>
@@ -234,10 +239,10 @@ export function RemoteExecPage() {
                 {uploadResults.map((r, i) => (
                   <div key={i} className="p-2 rounded border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
                     <div className="flex items-center gap-2">
-                      {r.success ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" /> : <XCircle className="w-3.5 h-3.5 text-red-400" />}
+                      {r.success ? <CheckCircle2 className="w-3.5 h-3.5 dg-text-green" /> : <XCircle className="w-3.5 h-3.5 dg-text-red" />}
                       <span className="text-xs font-mono text-[var(--dg-text-primary)]">{r.host}</span>
                       <span className="text-[10px] text-[var(--dg-text-muted)] truncate">{r.remote_path}</span>
-                      {r.error && <span className="text-[10px] text-red-400 ml-auto">{r.error}</span>}
+                      {r.error && <span className="text-[10px] dg-text-red ml-auto">{r.error}</span>}
                     </div>
                   </div>
                 ))}
@@ -246,6 +251,6 @@ export function RemoteExecPage() {
           )}
         </div>
       </div>
-    </div>
+    </PageShell>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/task/ScriptDetailDialog.tsx b/frontend/src/components/task/ScriptDetailDialog.tsx
index 820f082..65e5939 100644
--- a/frontend/src/components/task/ScriptDetailDialog.tsx
+++ b/frontend/src/components/task/ScriptDetailDialog.tsx
@@ -28,7 +28,7 @@ const ScriptDetailDialog: React.FC<Props> = ({ open, onOpenChange, script, onEdi
           <DialogDescription>{script?.description}</DialogDescription>
         </DialogHeader>
         <ScrollArea className="h-[500px] w-full rounded-md border bg-black">
-          <pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
+          <pre className="p-4 font-mono text-sm dg-text-green whitespace-pre-wrap">
             {script?.content || '（空）'}
           </pre>
         </ScrollArea>
diff --git a/frontend/src/components/task/ScriptLogsDialog.tsx b/frontend/src/components/task/ScriptLogsDialog.tsx
index b0e5d4f..3e0d0dd 100644
--- a/frontend/src/components/task/ScriptLogsDialog.tsx
+++ b/frontend/src/components/task/ScriptLogsDialog.tsx
@@ -24,7 +24,7 @@ const ScriptLogsDialog: React.FC<Props> = ({ open, onOpenChange, exec }) => {
           </DialogDescription>
         </DialogHeader>
         <ScrollArea className="h-[480px] w-full rounded-md border bg-black">
-          <pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
+          <pre className="p-4 font-mono text-sm dg-text-green whitespace-pre-wrap">
             {exec?.output || '暂无日志输出...'}
           </pre>
         </ScrollArea>
diff --git a/frontend/src/components/task/ScriptManager.tsx b/frontend/src/components/task/ScriptManager.tsx
index 8540009..382277f 100644
--- a/frontend/src/components/task/ScriptManager.tsx
+++ b/frontend/src/components/task/ScriptManager.tsx
@@ -1,12 +1,11 @@
 // ScriptManager — 脚本库与执行记录主组件 // Logan.Li
 import React, { useState, useEffect } from 'react';
-import { Plus, Search, RotateCcw, Trash2, Loader2 } from 'lucide-react';
+import { Plus, Search, RotateCcw, Trash2, FileCode } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
@@ -20,6 +19,9 @@ import ScriptDetailDialog from './ScriptDetailDialog';
 import ScriptLogsDialog from './ScriptLogsDialog';
 import ScriptCard from './ScriptCard';
 import ScriptExecutionsTable from './ScriptExecutionsTable';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 export function ScriptManager() {
@@ -34,9 +36,9 @@ export function ScriptManager() {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
 
   // 弹窗状态
-  const [editorOpen, setEditorOpen] = useState(false);       // 新建/编辑
-  const [detailOpen, setDetailOpen] = useState(false);       // 查看
-  const [logsOpen, setLogsOpen] = useState(false);           // 执行日志
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [logsOpen, setLogsOpen] = useState(false);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [selectedScript, setSelectedScript] = useState<Script | null>(null);
   const [selectedExec, setSelectedExec] = useState<ExecutionRecord | null>(null);
@@ -74,8 +76,6 @@ export function ScriptManager() {
     fetchExecutions();
   }, []);
 
-  // ---- 新建/编辑 ----
-
   const openCreate = () => {
     setEditingId(null);
     setFormData({
@@ -100,7 +100,6 @@ export function ScriptManager() {
   };
 
   const handleTypeChange = (t: string) => {
-    // 新建状态下切换类型时若内容仍为默认模板则同步替换，避免用户手动清空
     setFormData((prev) => {
       const isDefaultSample = scriptTypes.some(s => s.sample === prev.content) || prev.content === '';
       const match = scriptTypes.find(s => s.value === t);
@@ -140,8 +139,6 @@ export function ScriptManager() {
     }
   };
 
-  // ---- 复制 ----
-
   const handleClone = async (sc: Script) => {
     try {
       await scriptApi.createScript({
@@ -159,8 +156,6 @@ export function ScriptManager() {
     }
   };
 
-  // ---- 删除 ----
-
   const handleDelete = async (sc: Script) => {
     const ok = await _confirm({
       title: '删除脚本',
@@ -178,8 +173,6 @@ export function ScriptManager() {
     }
   };
 
-  // ---- 执行 ----
-
   const handleExecute = async (sc: Script) => {
     const ok = await _confirm({
       title: '执行脚本',
@@ -207,8 +200,6 @@ export function ScriptManager() {
     }
   };
 
-  // ---- 辅助 ----
-
   const filteredScripts = scripts.filter(sc => {
     const q = searchQuery.toLowerCase();
     const matchSearch = sc.name.toLowerCase().includes(q) ||
@@ -218,8 +209,6 @@ export function ScriptManager() {
     return matchSearch && matchType;
   });
 
-  // ---- 批量选择 / 批量删除 ----
-
   const toggleSelect = (id: number) => {
     setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
   };
@@ -249,123 +238,144 @@ export function ScriptManager() {
     }
   };
 
+  // 页面级 Tab 配置 // Logan.Li
+  const pageTabs = [
+    { id: 'scripts', label: '脚本库' },
+    { id: 'jobs', label: '执行记录' },
+  ];
+
+  const scriptsToolbar = (
+    <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex items-center gap-2 flex-1 min-w-[300px]">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 dg-text-muted" />
+          <Input
+            placeholder="搜索名称、编码、描述..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10 dg-input"
+          />
+        </div>
+        <Select value={typeFilter} onValueChange={setTypeFilter}>
+          <SelectTrigger className="w-[140px] dg-input">
+            <SelectValue placeholder="类型" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部类型</SelectItem>
+            {scriptTypes.map(t => (
+              <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+
   return (
-    <div className="space-y-6">
-
-      <Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v); if (v === 'jobs') fetchExecutions(); }}>
-        <TabsList className="grid w-full grid-cols-2 lg:w-[360px]">
-          <TabsTrigger value="scripts">脚本库</TabsTrigger>
-          <TabsTrigger value="jobs">执行记录</TabsTrigger>
-        </TabsList>
-
-        {/* ============ 脚本库 ============ */}
-        <TabsContent value="scripts" className="space-y-4">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div className="flex items-center gap-2 flex-1 min-w-[300px]">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-                <Input
-                  placeholder="搜索名称、编码、描述..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10"
-                />
+    <>
+      <PageShell
+        variant="list"
+        title="脚本库"
+        subtitle="脚本管理与执行记录"
+        icon={<FileCode className="h-5 w-5" />}
+        tabs={pageTabs}
+        activeTab={activeTab}
+        onTabChange={(id) => {
+          setActiveTab(id);
+          if (id === 'jobs') fetchExecutions();
+        }}
+        toolbar={activeTab === 'scripts' ? scriptsToolbar : undefined}
+        loading={activeTab === 'scripts' && loading}
+        actions={activeTab === 'scripts' ? (
+          <>
+            <Button variant="outline" className="dg-btn-secondary" onClick={fetchScripts}>
+              <RotateCcw className="w-4 h-4 mr-2" />
+              刷新
+            </Button>
+            <Button className="dg-btn-primary" onClick={openCreate}>
+              <Plus className="w-4 h-4 mr-2" />
+              新建脚本
+            </Button>
+          </>
+        ) : (
+          <Button variant="outline" className="dg-btn-secondary" onClick={fetchExecutions}>
+            <RotateCcw className="w-4 h-4 mr-2" />
+            刷新
+          </Button>
+        )}
+      >
+        {activeTab === 'scripts' ? (
+          <>
+            {selectedIds.length > 0 && (
+              <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] mb-4">
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    checked={allSelected}
+                    onCheckedChange={toggleSelectAll}
+                    className="border-[var(--dg-border)]"
+                  />
+                  <span className="text-sm dg-text-secondary">
+                    已选择 {selectedIds.length} 项 / 共 {filteredScripts.length} 项
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => setSelectedIds([])}>
+                    取消选择
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="dg-btn-danger dg-btn-sm"
+                    onClick={handleBatchDelete}
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    批量删除
+                  </Button>
+                </div>
               </div>
-              <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="w-[140px]">
-                  <SelectValue placeholder="类型" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">全部类型</SelectItem>
-                  {scriptTypes.map(t => (
-                    <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button variant="outline" onClick={fetchScripts}>
-                <RotateCcw className="w-4 h-4 mr-2" />
-                刷新
-              </Button>
-              <Button onClick={openCreate}>
-                <Plus className="w-4 h-4 mr-2" />
-                新建脚本
-              </Button>
-            </div>
-          </div>
-
-          {/* 批量操作栏 */}
-          {selectedIds.length > 0 && (
-            <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
-              <div className="flex items-center gap-3">
-                <Checkbox
-                  checked={allSelected}
-                  onCheckedChange={toggleSelectAll}
-                  className="border-[var(--dg-border)]"
-                />
-                <span className="text-sm text-[var(--dg-text-secondary)]">
-                  已选择 {selectedIds.length} 项 / 共 {filteredScripts.length} 项
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button variant="outline" size="sm" onClick={() => setSelectedIds([])}>
-                  取消选择
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-                  onClick={handleBatchDelete}
-                >
-                  <Trash2 className="w-4 h-4 mr-2" />
-                  批量删除
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* 脚本卡片列表 */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {loading ? (
-              <div className="col-span-full text-center py-8 text-muted-foreground">
-                <Loader2 className="w-5 h-5 animate-spin inline mr-2" />
-                加载中...
-              </div>
-            ) : filteredScripts.length === 0 ? (
-              <div className="col-span-full text-center py-8 text-muted-foreground">
-                {scripts.length === 0 ? '暂无脚本，点击「新建脚本」创建第一个' : '未匹配到符合条件的脚本'}
-              </div>
-            ) : (
-              filteredScripts.map((sc) => (
-                <ScriptCard
-                  key={sc.id}
-                  script={sc}
-                  selected={selectedIds.includes(sc.id)}
-                  executing={executing}
-                  onToggleSelect={() => toggleSelect(sc.id)}
-                  onView={() => { setSelectedScript(sc); setDetailOpen(true); }}
-                  onExecute={() => handleExecute(sc)}
-                  onEdit={() => openEdit(sc)}
-                  onClone={() => handleClone(sc)}
-                  onDelete={() => handleDelete(sc)}
-                />
-              ))
             )}
-          </div>
-        </TabsContent>
 
-        {/* ============ 执行记录 ============ */}
-        <TabsContent value="jobs">
+            {filteredScripts.length === 0 ? (
+              <PageEmpty
+                title={scripts.length === 0 ? '暂无脚本' : '未匹配到符合条件的脚本'}
+                description={scripts.length === 0 ? '点击「新建脚本」创建第一个' : undefined}
+                action={scripts.length === 0 ? (
+                  <Button className="dg-btn-primary" onClick={openCreate}>
+                    <Plus className="w-4 h-4 mr-2" />
+                    新建脚本
+                  </Button>
+                ) : undefined}
+              />
+            ) : (
+              <ContentPanel>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {filteredScripts.map((sc) => (
+                    <ScriptCard
+                      key={sc.id}
+                      script={sc}
+                      selected={selectedIds.includes(sc.id)}
+                      executing={executing}
+                      onToggleSelect={() => toggleSelect(sc.id)}
+                      onView={() => { setSelectedScript(sc); setDetailOpen(true); }}
+                      onExecute={() => handleExecute(sc)}
+                      onEdit={() => openEdit(sc)}
+                      onClone={() => handleClone(sc)}
+                      onDelete={() => handleDelete(sc)}
+                    />
+                  ))}
+                </div>
+              </ContentPanel>
+            )}
+          </>
+        ) : (
           <ScriptExecutionsTable
             executions={executions}
             onRefresh={fetchExecutions}
             onViewLogs={(job) => { setSelectedExec(job); setLogsOpen(true); }}
           />
-        </TabsContent>
-      </Tabs>
+        )}
+      </PageShell>
 
-      {/* ===== 新建/编辑脚本对话框 ===== */}
       <ScriptFormDialog
         open={editorOpen}
         onOpenChange={setEditorOpen}
@@ -377,7 +387,6 @@ export function ScriptManager() {
         onSave={handleSave}
       />
 
-      {/* ===== 查看脚本内容 ===== */}
       <ScriptDetailDialog
         open={detailOpen}
         onOpenChange={setDetailOpen}
@@ -385,12 +394,11 @@ export function ScriptManager() {
         onEdit={openEdit}
       />
 
-      {/* ===== 执行日志 ===== */}
       <ScriptLogsDialog
         open={logsOpen}
         onOpenChange={setLogsOpen}
         exec={selectedExec}
       />
-    </div>
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/task/cronJobHelpers.tsx b/frontend/src/components/task/cronJobHelpers.tsx
index 343b91c..a80fb36 100644
--- a/frontend/src/components/task/cronJobHelpers.tsx
+++ b/frontend/src/components/task/cronJobHelpers.tsx
@@ -6,21 +6,21 @@ export function getStatusBadge(status: string) {
   switch (status) {
     case 'success':
       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">
           <CheckCircle className="h-3 w-3 mr-1" />
           成功
         </Badge>
       );
     case '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">
           <XCircle className="h-3 w-3 mr-1" />
           失败
         </Badge>
       );
     case 'running':
       return (
-        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+        <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
           <Loader2 className="h-3 w-3 mr-1 animate-spin" />
           执行中
         </Badge>
diff --git a/frontend/src/components/task/script-helpers.tsx b/frontend/src/components/task/script-helpers.tsx
index fa3d311..facea60 100644
--- a/frontend/src/components/task/script-helpers.tsx
+++ b/frontend/src/components/task/script-helpers.tsx
@@ -56,9 +56,9 @@ export const scriptTypes = [
 ];
 
 const typeColors: Record<string, string> = {
-  shell: 'border-green-500/30 text-green-500 bg-green-500/10',
-  bash: 'border-green-500/30 text-green-500 bg-green-500/10',
-  python: 'border-blue-500/30 text-blue-500 bg-blue-500/10',
+  shell: 'border-green-500/30 dg-text-green bg-green-500/10',
+  bash: 'border-green-500/30 dg-text-green bg-green-500/10',
+  python: 'border-blue-500/30 dg-text-blue bg-blue-500/10',
   powershell: 'border-cyan-500/30 text-cyan-500 bg-cyan-500/10',
   yaml: 'border-purple-500/30 text-purple-500 bg-purple-500/10',
 };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 37a7d4b..87f737b 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -13,11 +13,11 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] text-[var(--dg-text-primary)] shadow-xs hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-border-hover)]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)]",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/frontend/src/components/ui/confirm-dialog.tsx b/frontend/src/components/ui/confirm-dialog.tsx
index a116e1f..9d4f32c 100644
--- a/frontend/src/components/ui/confirm-dialog.tsx
+++ b/frontend/src/components/ui/confirm-dialog.tsx
@@ -68,15 +68,15 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
     <ConfirmContext.Provider value={{ confirm }}>
       {children}
       <Dialog open={open} onOpenChange={(v) => { if (!v) handleCancel(); }}>
-        <DialogContent className="max-w-sm bg-slate-900 border-slate-800" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogContent className="max-w-sm dg-card" onCloseAutoFocus={(e) => e.preventDefault()}>
           <DialogHeader>
-            <DialogTitle className="text-slate-100">{options.title}</DialogTitle>
+            <DialogTitle className="text-[var(--dg-text-primary)]">{options.title}</DialogTitle>
             {options.description && (
-              <DialogDescription className="text-slate-400">{options.description}</DialogDescription>
+              <DialogDescription className="dg-text-secondary">{options.description}</DialogDescription>
             )}
           </DialogHeader>
           <DialogFooter className="gap-2 sm:gap-2">
-            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={handleCancel}>
+            <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={handleCancel}>
               {options.cancelText}
             </Button>
             <Button
diff --git a/frontend/src/components/ui/copy-button.tsx b/frontend/src/components/ui/copy-button.tsx
index ac331fa..cf69704 100644
--- a/frontend/src/components/ui/copy-button.tsx
+++ b/frontend/src/components/ui/copy-button.tsx
@@ -64,7 +64,7 @@ export function CopyButton({
       aria-label={title}
     >
       {copied ? (
-        <Check className={cn('text-emerald-400', children ? 'h-3.5 w-3.5 mr-1' : 'h-3.5 w-3.5')} />
+        <Check className={cn('dg-text-green', children ? 'h-3.5 w-3.5 mr-1' : 'h-3.5 w-3.5')} />
       ) : (
         <Copy className={cn(children ? 'h-3.5 w-3.5 mr-1' : 'h-3.5 w-3.5')} />
       )}
diff --git a/frontend/src/components/ui/data-table.tsx b/frontend/src/components/ui/data-table.tsx
index fae16eb..d061c15 100644
--- a/frontend/src/components/ui/data-table.tsx
+++ b/frontend/src/components/ui/data-table.tsx
@@ -493,9 +493,9 @@ export function DataTable<T = Record<string, unknown>>(
                       {canSort && (
                         <span className="flex-shrink-0">
                           {isSorted && sortDir === 'asc' ? (
-                            <ArrowUp className="h-3 w-3 text-blue-400" />
+                            <ArrowUp className="h-3 w-3 dg-text-blue" />
                           ) : isSorted && sortDir === 'desc' ? (
-                            <ArrowDown className="h-3 w-3 text-blue-400" />
+                            <ArrowDown className="h-3 w-3 dg-text-blue" />
                           ) : (
                             <ArrowUpDown className="h-3 w-3 opacity-40" />
                           )}
@@ -582,7 +582,7 @@ export function DataTable<T = Record<string, unknown>>(
             </span>
             {selectable && (selectedIds?.length ?? 0) > 0 && (
               <span className="text-sm text-[var(--dg-text-muted)]">
-                / 已选 <span className="text-blue-400 font-medium">{selectedIds!.length}</span>
+                / 已选 <span className="dg-text-blue font-medium">{selectedIds!.length}</span>
               </span>
             )}
             <div className="flex items-center gap-1.5">
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 5965d7f..bbd7201 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--dg-overlay)] backdrop-blur-sm",
         className
       )}
       {...props}
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 9f46e06..0f03da1 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -4,16 +4,16 @@ import {
   Loader2Icon,
   OctagonXIcon,
   TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+} from 'lucide-react';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+import { useTheme } from '@/hooks/useTheme';
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { isDark } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={isDark ? 'dark' : 'light'}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,
@@ -22,17 +22,22 @@ const Toaster = ({ ...props }: ToasterProps) => {
         error: <OctagonXIcon className="size-4" />,
         loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
+      toastOptions={{
+        classNames: {
+          toast: 'dg-card border-[var(--border-default)] text-[var(--text-primary)]',
+        },
+      }}
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          '--normal-bg': 'var(--surface-raised)',
+          '--normal-text': 'var(--text-primary)',
+          '--normal-border': 'var(--border-default)',
+          '--border-radius': 'var(--radius-control)',
         } as React.CSSProperties
       }
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
\ No newline at end of file
diff --git a/frontend/src/components/ui/stat-strip.tsx b/frontend/src/components/ui/stat-strip.tsx
index fed58aa..424600d 100644
--- a/frontend/src/components/ui/stat-strip.tsx
+++ b/frontend/src/components/ui/stat-strip.tsx
@@ -1,11 +1,11 @@
 // 紧凑型统计条 — 替代 4~5 个大卡片的笨重布局
-// 一行显示所有统计项，带颜色区分
+// 一行显示所有统计项，颜色由主题 CSS 变量驱动 // Logan.Li
 import { cn } from '@/lib/utils';
 
 interface StatItem {
   label: string;
   value: number | string;
-  color?: string; // tailwind text class or hex
+  color?: 'blue' | 'emerald' | 'green' | 'amber' | 'red' | 'purple' | 'cyan' | 'muted' | string;
   icon?: React.ReactNode;
 }
 
@@ -14,14 +14,15 @@ interface StatStripProps {
   className?: string;
 }
 
-const colorMap: Record<string, { text: string; bg: string }> = {
-  blue:    { text: 'text-blue-400',   bg: 'bg-blue-500/20' },
-  emerald: { text: 'text-emerald-400', bg: 'bg-emerald-500/20' },
-  amber:   { text: 'text-amber-400',  bg: 'bg-amber-500/20' },
-  red:     { text: 'text-red-400',    bg: 'bg-red-500/20' },
-  purple:  { text: 'text-purple-400', bg: 'bg-purple-500/20' },
-  cyan:    { text: 'text-cyan-400',   bg: 'bg-cyan-500/20' },
-  muted:   { text: 'text-[var(--dg-text-secondary)]', bg: 'bg-[var(--dg-bg-tertiary)]' },
+const colorMap: Record<string, { text: string; dot: string }> = {
+  blue:    { text: 'dg-text-blue',   dot: 'var(--dg-blue)' },
+  emerald: { text: 'dg-text-green',  dot: 'var(--dg-green)' },
+  green:   { text: 'dg-text-green',  dot: 'var(--dg-green)' },
+  amber:   { text: 'dg-text-yellow', dot: 'var(--dg-yellow)' },
+  red:     { text: 'dg-text-red',    dot: 'var(--dg-red)' },
+  purple:  { text: 'dg-text-purple', dot: 'var(--dg-purple)' },
+  cyan:    { text: 'dg-text-cyan',   dot: 'var(--dg-cyan)' },
+  muted:   { text: 'text-[var(--dg-text-primary)]', dot: 'var(--dg-text-muted)' },
 };
 
 export function StatStrip({ items, className }: StatStripProps) {
@@ -39,17 +40,15 @@ export function StatStrip({ items, className }: StatStripProps) {
             {i > 0 && (
               <span className="w-px h-5 bg-[var(--dg-border)] mx-1 shrink-0" />
             )}
-            <span className={cn(
-              'w-1.5 h-1.5 rounded-full shrink-0',
-              clr.bg.replace('/20', '').replace('bg-', 'bg-') || 'bg-slate-500',
-            )}
-              style={{ backgroundColor: item.color?.startsWith('#') ? item.color : undefined }}
+            <span
+              className="w-1.5 h-1.5 rounded-full shrink-0"
+              style={{ backgroundColor: item.color?.startsWith('#') ? item.color : clr.dot }}
             />
-            <span className="text-xs text-[var(--dg-text-muted)]">{item.label}</span>
+            <span className="text-xs dg-text-muted">{item.label}</span>
             <span className={cn('text-sm font-semibold', clr.text)}>{item.value}</span>
           </div>
         );
       })}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index 6a2b524..51476cb 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -21,7 +21,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-[var(--dg-bg-primary)] pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/frontend/src/components/user/ApiAccessKeySection.tsx b/frontend/src/components/user/ApiAccessKeySection.tsx
index d9b8353..15f5697 100644
--- a/frontend/src/components/user/ApiAccessKeySection.tsx
+++ b/frontend/src/components/user/ApiAccessKeySection.tsx
@@ -285,7 +285,7 @@ export function ApiAccessKeySection() {
                       <Button variant="outline" size="sm" className="h-8 text-xs border-[var(--dg-border)]" onClick={openCreate} disabled={actionLoading}>
                         <RotateCw className="h-3 w-3 mr-1" />轮换
                       </Button>
-                      <Button variant="outline" size="sm" className="h-8 text-xs border-red-500/30 text-red-400" onClick={handleRevoke} disabled={actionLoading}>
+                      <Button variant="outline" size="sm" className="h-8 text-xs border-red-500/30 dg-text-red" onClick={handleRevoke} disabled={actionLoading}>
                         <Ban className="h-3 w-3 mr-1" />吊销
                       </Button>
                     </div>
@@ -334,7 +334,7 @@ export function ApiAccessKeySection() {
                       <span>前缀 <code className="text-[var(--dg-text-secondary)]">{keyMeta.prefix}</code></span>
                     )}
                     {isExpired && (
-                      <Badge variant="outline" className="text-[10px] border-red-500/40 text-red-400">需续期或轮换</Badge>
+                      <Badge variant="outline" className="text-[10px] border-red-500/40 dg-text-red">需续期或轮换</Badge>
                     )}
                   </div>
                 </div>
@@ -354,12 +354,12 @@ export function ApiAccessKeySection() {
           )}
 
           {keyMeta?.has_token && !copyableToken && (
-            <p className="text-[11px] text-amber-400/90">本机未缓存凭证明文，请点击「轮换」重新签发一次；签发后将自动填入 Deployment 发布 curl。</p>
+            <p className="text-[11px] dg-text-yellow/90">本机未缓存凭证明文，请点击「轮换」重新签发一次；签发后将自动填入 Deployment 发布 curl。</p>
           )}
 
           <div className="rounded-lg bg-[var(--dg-bg-tertiary)]/60 p-4 space-y-3">
             <p className="text-xs font-medium text-[var(--dg-text-secondary)] flex items-center gap-1.5">
-              <Rocket className="h-3.5 w-3.5 text-purple-400" />调用示例
+              <Rocket className="h-3.5 w-3.5 dg-text-purple" />调用示例
             </p>
             <CodeSnippetBlock
               label="更新镜像"
diff --git a/frontend/src/components/user/ProfilePage.tsx b/frontend/src/components/user/ProfilePage.tsx
index 3003736..c2a397d 100644
--- a/frontend/src/components/user/ProfilePage.tsx
+++ b/frontend/src/components/user/ProfilePage.tsx
@@ -10,6 +10,7 @@ import { useToast } from '@/hooks/use-toast';
 import { authApi } from '@/api';
 import { useUserStore } from '@/store';
 import { ApiAccessKeySection } from './ApiAccessKeySection';
+import { PageShell } from '@/components/layout/PageShell';
 
 export default function ProfilePage() {
   const { toast } = useToast();
@@ -52,33 +53,25 @@ export default function ProfilePage() {
     }
   };
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-24 text-[var(--dg-text-muted)]">
-        <Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...
-      </div>
-    );
-  }
-
   return (
-    <div className="max-w-5xl mx-auto space-y-6 pb-8">
-      <div className="flex items-center gap-4">
-        <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-2xl font-bold shadow-lg">
-          {displayName.charAt(0).toUpperCase()}
+    <PageShell
+      variant="config"
+      maxWidth="xl"
+      title={displayName}
+      subtitle={`@${username} · ${profile?.email || '—'}`}
+      icon={<User className="h-5 w-5" />}
+      loading={loading}
+      loadingLabel="加载中..."
+      actions={(
+        <div className="flex gap-2 flex-wrap">
+          {(profile?.roles || []).map((r: any) => (
+            <Badge key={r.id || r.name} variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs">
+              {r.name || r}
+            </Badge>
+          ))}
         </div>
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{displayName}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)]">@{username} · {profile?.email || '—'}</p>
-          <div className="flex gap-2 mt-2">
-            {(profile?.roles || []).map((r: any) => (
-              <Badge key={r.id || r.name} variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs">
-                {r.name || r}
-              </Badge>
-            ))}
-          </div>
-        </div>
-      </div>
-
+      )}
+    >
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card className="dg-card">
           <CardHeader className="pb-3">
@@ -99,7 +92,7 @@ export default function ProfilePage() {
         <Card className="dg-card">
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2 text-[var(--dg-text-primary)]">
-              <Shield className="h-4 w-4 text-emerald-400" />安全设置
+              <Shield className="h-4 w-4 dg-text-green" />安全设置
             </CardTitle>
             <CardDescription className="text-xs">修改登录密码</CardDescription>
           </CardHeader>
@@ -121,6 +114,6 @@ export default function ProfilePage() {
       </div>
 
       <ApiAccessKeySection />
-    </div>
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/useTheme.tsx b/frontend/src/hooks/useTheme.tsx
index 2671570..5d51e92 100644
--- a/frontend/src/hooks/useTheme.tsx
+++ b/frontend/src/hooks/useTheme.tsx
@@ -1,31 +1,57 @@
 import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import {
-  type Theme,
+  type ThemePreference,
   type ThemeOption,
+  type ThemeGroup,
+  type ResolvedTheme,
   THEME_OPTIONS,
+  THEME_GROUPS,
   getInitialTheme,
   persistTheme,
   applyThemeToDocument,
   getNextTheme,
+  resolveThemePreference,
+  isThemeDark,
 } from '@/utils/theme';
 
-export type { Theme, ThemeOption };
-export { THEME_OPTIONS };
+export type Theme = ThemePreference;
+export type { ThemeOption, ThemeGroup, ResolvedTheme };
+export { THEME_OPTIONS, THEME_GROUPS };
 
 interface ThemeContextType {
-  theme: Theme;
+  /** 用户选择的主题偏好（含 system） */
+  theme: ThemePreference;
+  /** 当前实际生效的主题 */
+  resolvedTheme: ResolvedTheme;
+  /** 当前是否为暗色（供 Sonner 等第三方组件） */
+  isDark: boolean;
   toggleTheme: () => void;
-  setTheme: (theme: Theme) => void;
+  setTheme: (theme: ThemePreference) => void;
 }
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+  const [theme, setThemeState] = useState<ThemePreference>(getInitialTheme);
+  const resolvedTheme = resolveThemePreference(theme);
+  const isDark = isThemeDark(theme);
+
+  const apply = useCallback((pref: ThemePreference) => {
+    applyThemeToDocument(pref);
+  }, []);
 
   useEffect(() => {
-    applyThemeToDocument(theme);
-  }, [theme]);
+    apply(theme);
+  }, [theme, apply]);
+
+  // 跟随系统时监听 OS 主题变化 // Logan.Li
+  useEffect(() => {
+    if (theme !== 'system') return;
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => apply('system');
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [theme, apply]);
 
   const toggleTheme = useCallback(() => {
     setThemeState((prev) => {
@@ -35,14 +61,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     });
   }, []);
 
-  const setTheme = useCallback((t: Theme) => {
+  const setTheme = useCallback((t: ThemePreference) => {
     persistTheme(t);
     setThemeState(t);
   }, []);
 
   const value = useMemo(
-    () => ({ theme, toggleTheme, setTheme }),
-    [theme, toggleTheme, setTheme],
+    () => ({ theme, resolvedTheme, isDark, toggleTheme, setTheme }),
+    [theme, resolvedTheme, isDark, toggleTheme, setTheme],
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8a43450..d82a5d2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,9 +42,9 @@
     --dg-border: #30363d;
     --dg-border-light: #21262d;
     --dg-border-hover: #484f58;
-    --dg-text-primary: #f0f6fc;
-    --dg-text-secondary: #8b949e;
-    --dg-text-muted: #6e7681;
+    --dg-text-primary: #e6edf3;
+    --dg-text-secondary: #9aa4af;
+    --dg-text-muted: #768390;
     --dg-blue: #58a6ff;
     --dg-green: #3fb950;
     --dg-red: #f85149;
@@ -54,9 +54,9 @@
     --dg-yellow: #d29922;
     --dg-card-hover-border: rgba(88, 166, 255, 0.5);
     --dg-gradient-start: #2563eb;
-    --dg-gradient-end: #9333ea;
-    --dg-gradient-text-start: #60a5fa;
-    --dg-gradient-text-end: #c084fc;
+    --dg-gradient-end: #1d4ed8;
+    --dg-gradient-text-start: #3b82f6;
+    --dg-gradient-text-end: #2563eb;
     --dg-input-focus-ring: rgba(96, 165, 250, 0.2);
     --chart-grid: #1e293b;
     --chart-axis: #475569;
@@ -67,50 +67,52 @@
     --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
     --skeleton-base: #21262d;
     --skeleton-highlight: #30363d;
+    --dg-overlay: color-mix(in srgb, #010409 55%, transparent);
   }
 
   /* ===== Theme 2: Light Professional (明亮白) ===== */
   [data-theme="light-professional"],
   [data-theme="light"] {
-    --background: 0 0% 100%;
-    --foreground: 220 14% 10%;
-    --card: 0 0% 100%;
-    --card-foreground: 220 14% 10%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220 14% 10%;
+    --background: 220 14% 96%;
+    --foreground: 220 14% 16%;
+    --card: 220 14% 99%;
+    --card-foreground: 220 14% 16%;
+    --popover: 220 14% 99%;
+    --popover-foreground: 220 14% 16%;
     --primary: 217 91% 60%;
     --primary-foreground: 0 0% 100%;
     --secondary: 220 14% 96%;
-    --secondary-foreground: 220 14% 10%;
-    --muted: 220 14% 96%;
-    --muted-foreground: 220 10% 46%;
-    --accent: 220 14% 96%;
-    --accent-foreground: 220 14% 10%;
+    --secondary-foreground: 220 14% 16%;
+    --muted: 220 14% 94%;
+    --muted-foreground: 220 10% 42%;
+    --accent: 220 14% 94%;
+    --accent-foreground: 220 14% 16%;
     --destructive: 0 72% 51%;
     --destructive-foreground: 0 0% 100%;
     --border: 220 13% 91%;
     --input: 220 13% 91%;
     --ring: 217 91% 60%;
     --radius: 0.625rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 220 14% 20%;
+    --sidebar-background: 220 14% 97%;
+    --sidebar-foreground: 220 14% 22%;
     --sidebar-primary: 217 91% 60%;
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: 220 14% 94%;
-    --sidebar-accent-foreground: 220 14% 10%;
+    --sidebar-accent-foreground: 220 14% 16%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217 91% 60%;
-    --dg-bg-primary: #ffffff;
-    --dg-bg-secondary: #f8f9fb;
-    --dg-bg-tertiary: #f0f1f5;
-    --dg-bg-hover: #e8eaef;
-    --dg-bg-active: #dfe1e8;
-    --dg-border: #e2e5eb;
-    --dg-border-light: #eaecf0;
-    --dg-border-hover: #d0d5dd;
-    --dg-text-primary: #1a1d23;
-    --dg-text-secondary: #5c6370;
-    --dg-text-muted: #9ca3af;
+    --dg-bg-primary: #f4f5f7;
+    --dg-bg-secondary: #fafbfc;
+    --dg-bg-tertiary: #eef0f4;
+    --dg-bg-hover: #e4e7ec;
+    --dg-bg-active: #d8dce3;
+    --dg-border: #d8dce3;
+    --dg-border-light: #e4e7ec;
+    --dg-border-hover: #c4c9d2;
+    --dg-text-primary: #2c313a;
+    --dg-text-secondary: #525964;
+    --dg-text-muted: #6b7280;
+    --dg-overlay: color-mix(in srgb, #2c313a 38%, transparent);
     --dg-blue: #2563eb;
     --dg-green: #16a34a;
     --dg-red: #dc2626;
@@ -120,9 +122,9 @@
     --dg-yellow: #ca8a04;
     --dg-card-hover-border: rgba(37, 99, 235, 0.3);
     --dg-gradient-start: #2563eb;
-    --dg-gradient-end: #7c3aed;
-    --dg-gradient-text-start: #1d4ed8;
-    --dg-gradient-text-end: #6d28d9;
+    --dg-gradient-end: #1d4ed8;
+    --dg-gradient-text-start: #2563eb;
+    --dg-gradient-text-end: #1e40af;
     --dg-input-focus-ring: rgba(37, 99, 235, 0.15);
     --chart-grid: #e2e5eb;
     --chart-axis: #9ca3af;
@@ -135,199 +137,404 @@
     --skeleton-highlight: #e8eaef;
   }
 
-  /* ===== Theme 3: Midnight Purple (午夜紫) ===== */
-  [data-theme="midnight-purple"] {
-    --background: 264 56% 4%;
-    --foreground: 280 100% 98%;
-    --card: 264 48% 8%;
-    --card-foreground: 280 100% 98%;
-    --popover: 264 48% 8%;
-    --popover-foreground: 280 100% 98%;
-    --primary: 270 91% 65%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 264 40% 20%;
-    --secondary-foreground: 280 100% 98%;
-    --muted: 264 40% 20%;
-    --muted-foreground: 280 30% 60%;
-    --accent: 264 40% 20%;
-    --accent-foreground: 280 100% 98%;
-    --destructive: 348 100% 72%;
-    --destructive-foreground: 264 56% 4%;
-    --border: 264 40% 20%;
-    --input: 264 40% 20%;
-    --ring: 270 91% 65%;
+  /* ===== Theme 3: One Dark — Atom 暖灰 IDE（刻意与深海蓝蓝黑区分） // Logan.Li ===== */
+  [data-theme="one-dark"] {
+    --background: 220 9% 22%;
+    --foreground: 220 8% 82%;
+    --card: 220 8% 26%;
+    --card-foreground: 220 8% 82%;
+    --popover: 220 8% 24%;
+    --popover-foreground: 220 8% 82%;
+    --primary: 207 82% 66%;
+    --primary-foreground: 220 9% 18%;
+    --secondary: 220 8% 30%;
+    --secondary-foreground: 220 8% 82%;
+    --muted: 220 8% 30%;
+    --muted-foreground: 220 6% 52%;
+    --accent: 220 8% 30%;
+    --accent-foreground: 220 8% 82%;
+    --destructive: 355 65% 65%;
+    --destructive-foreground: 220 9% 18%;
+    --border: 220 7% 34%;
+    --input: 220 8% 28%;
+    --ring: 286 60% 67%;
     --radius: 0.625rem;
-    --sidebar-background: 264 48% 6%;
-    --sidebar-foreground: 280 100% 92%;
-    --sidebar-primary: 270 91% 65%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 264 40% 20%;
-    --sidebar-accent-foreground: 280 100% 98%;
-    --sidebar-border: 264 40% 20%;
-    --sidebar-ring: 270 91% 65%;
-    --dg-bg-primary: #0a0612;
-    --dg-bg-secondary: #130c21;
-    --dg-bg-tertiary: #1c1330;
-    --dg-bg-hover: #2d1f4a;
-    --dg-bg-active: #3d2a5e;
-    --dg-border: #2d1f4a;
-    --dg-border-light: #1c1330;
-    --dg-border-hover: #3d2a5e;
-    --dg-text-primary: #faf5ff;
-    --dg-text-secondary: #b794c7;
-    --dg-text-muted: #7c5a8a;
-    --dg-blue: #818cf8;
-    --dg-green: #34d399;
-    --dg-red: #fb7185;
-    --dg-orange: #fb923c;
-    --dg-purple: #c084fc;
-    --dg-cyan: #22d3ee;
-    --dg-yellow: #facc15;
-    --dg-card-hover-border: rgba(192, 132, 252, 0.5);
-    --dg-gradient-start: #9333ea;
-    --dg-gradient-end: #c084fc;
-    --dg-gradient-text-start: #a855f7;
-    --dg-gradient-text-end: #c084fc;
-    --dg-input-focus-ring: rgba(192, 132, 252, 0.2);
-    --chart-grid: #2d1f4a;
-    --chart-axis: #7c5a8a;
-    --chart-tooltip-bg: #130c21;
-    --chart-tooltip-border: #2d1f4a;
-    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(192, 132, 252, 0.05);
-    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(192, 132, 252, 0.2);
-    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
-    --skeleton-base: #1c1330;
-    --skeleton-highlight: #2d1f4a;
+    --sidebar-background: 220 9% 17%;
+    --sidebar-foreground: 220 8% 78%;
+    --sidebar-primary: 207 82% 66%;
+    --sidebar-primary-foreground: 220 9% 18%;
+    --sidebar-accent: 220 8% 26%;
+    --sidebar-accent-foreground: 220 8% 82%;
+    --sidebar-border: 220 7% 28%;
+    --sidebar-ring: 286 60% 67%;
+    /* 更亮暖灰底 + 侧栏压暗，贴近 Atom 编辑器层次 */
+    --dg-bg-primary: #282c34;
+    --dg-bg-secondary: #2f343e;
+    --dg-bg-tertiary: #383e4a;
+    --dg-bg-hover: #3e4451;
+    --dg-bg-active: #4b5263;
+    --dg-border: #4b5263;
+    --dg-border-light: #353b45;
+    --dg-border-hover: #5c6370;
+    --dg-text-primary: #d7dae0;
+    --dg-text-secondary: #9da5b4;
+    --dg-text-muted: #6b7285;
+    /* Atom 语法高亮色 — 品牌渐变用紫→绿，非深海蓝 */
+    --dg-blue: #61afef;
+    --dg-green: #98c379;
+    --dg-red: #e06c75;
+    --dg-orange: #d19a66;
+    --dg-purple: #c678dd;
+    --dg-cyan: #56b6c2;
+    --dg-yellow: #e5c07b;
+    --dg-card-hover-border: rgba(198, 120, 221, 0.42);
+    --dg-gradient-start: #c678dd;
+    --dg-gradient-end: #98c379;
+    --dg-gradient-text-start: #c678dd;
+    --dg-gradient-text-end: #61afef;
+    --dg-input-focus-ring: rgba(198, 120, 221, 0.22);
+    --chart-grid: #4b5263;
+    --chart-axis: #6b7285;
+    --chart-tooltip-bg: #2f343e;
+    --chart-tooltip-border: #4b5263;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(198, 120, 221, 0.06);
+    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(152, 195, 121, 0.18);
+    --shadow-dropdown: 0 10px 36px rgba(0, 0, 0, 0.45);
+    --skeleton-base: #383e4a;
+    --skeleton-highlight: #4b5263;
+    --dg-overlay: color-mix(in srgb, #21252b 52%, transparent);
   }
 
-  /* ===== Theme 4: Pine Green (松林绿) ===== */
-  [data-theme="pine-green"] {
-    --background: 150 25% 5%;
-    --foreground: 140 60% 97%;
-    --card: 150 25% 9%;
-    --card-foreground: 140 60% 97%;
-    --popover: 150 25% 9%;
-    --popover-foreground: 140 60% 97%;
-    --primary: 142 71% 45%;
-    --primary-foreground: 150 25% 5%;
-    --secondary: 150 20% 18%;
-    --secondary-foreground: 140 60% 97%;
-    --muted: 150 20% 18%;
-    --muted-foreground: 150 20% 55%;
-    --accent: 150 20% 18%;
-    --accent-foreground: 140 60% 97%;
-    --destructive: 0 90% 72%;
-    --destructive-foreground: 150 25% 5%;
-    --border: 150 20% 18%;
-    --input: 150 20% 18%;
-    --ring: 142 71% 45%;
+  /* ===== Theme 4: Catppuccin Mocha ===== */
+  [data-theme="catppuccin"] {
+    --background: 240 21% 15%;
+    --foreground: 226 64% 88%;
+    --card: 240 21% 12%;
+    --card-foreground: 226 64% 88%;
+    --popover: 240 21% 12%;
+    --popover-foreground: 226 64% 88%;
+    --primary: 217 92% 76%;
+    --primary-foreground: 240 21% 15%;
+    --secondary: 237 16% 23%;
+    --secondary-foreground: 226 64% 88%;
+    --muted: 237 16% 23%;
+    --muted-foreground: 228 24% 72%;
+    --accent: 237 16% 23%;
+    --accent-foreground: 226 64% 88%;
+    --destructive: 343 81% 75%;
+    --destructive-foreground: 240 21% 15%;
+    --border: 237 16% 23%;
+    --input: 237 16% 23%;
+    --ring: 217 92% 76%;
     --radius: 0.625rem;
-    --sidebar-background: 150 25% 7%;
-    --sidebar-foreground: 140 40% 88%;
-    --sidebar-primary: 142 71% 45%;
-    --sidebar-primary-foreground: 150 25% 5%;
-    --sidebar-accent: 150 20% 18%;
-    --sidebar-accent-foreground: 140 60% 97%;
-    --sidebar-border: 150 20% 18%;
-    --sidebar-ring: 142 71% 45%;
-    --dg-bg-primary: #0a1210;
-    --dg-bg-secondary: #111f1a;
-    --dg-bg-tertiary: #192c24;
-    --dg-bg-hover: #253d32;
-    --dg-bg-active: #2f4f3e;
-    --dg-border: #253d32;
-    --dg-border-light: #192c24;
-    --dg-border-hover: #2f4f3e;
-    --dg-text-primary: #f0fdf4;
-    --dg-text-secondary: #86b8a0;
-    --dg-text-muted: #5a7c6b;
-    --dg-blue: #38bdf8;
-    --dg-green: #4ade80;
-    --dg-red: #f87171;
-    --dg-orange: #fb923c;
-    --dg-purple: #c084fc;
-    --dg-cyan: #2dd4bf;
-    --dg-yellow: #facc15;
-    --dg-card-hover-border: rgba(74, 222, 128, 0.5);
-    --dg-gradient-start: #059669;
-    --dg-gradient-end: #10b981;
-    --dg-gradient-text-start: #059669;
-    --dg-gradient-text-end: #34d399;
-    --dg-input-focus-ring: rgba(74, 222, 128, 0.2);
-    --chart-grid: #253d32;
-    --chart-axis: #5a7c6b;
-    --chart-tooltip-bg: #111f1a;
-    --chart-tooltip-border: #253d32;
-    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(74, 222, 128, 0.05);
-    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.2);
+    --sidebar-background: 240 23% 9%;
+    --sidebar-foreground: 226 64% 85%;
+    --sidebar-primary: 217 92% 76%;
+    --sidebar-primary-foreground: 240 21% 15%;
+    --sidebar-accent: 237 16% 23%;
+    --sidebar-accent-foreground: 226 64% 88%;
+    --sidebar-border: 237 16% 23%;
+    --sidebar-ring: 217 92% 76%;
+    --dg-bg-primary: #1e1e2e;
+    --dg-bg-secondary: #181825;
+    --dg-bg-tertiary: #313244;
+    --dg-bg-hover: #45475a;
+    --dg-bg-active: #585b70;
+    --dg-border: #45475a;
+    --dg-border-light: #313244;
+    --dg-border-hover: #585b70;
+    --dg-text-primary: #cdd6f4;
+    --dg-text-secondary: #a6adc8;
+    --dg-text-muted: #7f849c;
+    --dg-blue: #89b4fa;
+    --dg-green: #a6e3a1;
+    --dg-red: #f38ba8;
+    --dg-orange: #fab387;
+    --dg-purple: #cba6f7;
+    --dg-cyan: #89dceb;
+    --dg-yellow: #f9e2af;
+    --dg-card-hover-border: rgba(137, 180, 250, 0.45);
+    --dg-gradient-start: #74c7ec;
+    --dg-gradient-end: #cba6f7;
+    --dg-gradient-text-start: #89b4fa;
+    --dg-gradient-text-end: #cba6f7;
+    --dg-input-focus-ring: rgba(137, 180, 250, 0.2);
+    --chart-grid: #45475a;
+    --chart-axis: #7f849c;
+    --chart-tooltip-bg: #181825;
+    --chart-tooltip-border: #45475a;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(137, 180, 250, 0.05);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(137, 180, 250, 0.15);
     --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
-    --skeleton-base: #192c24;
-    --skeleton-highlight: #253d32;
+    --skeleton-base: #313244;
+    --skeleton-highlight: #45475a;
+    --dg-overlay: color-mix(in srgb, #11111b 55%, transparent);
   }
 
-  /* ===== Theme 5: Orange Vitality (活力橙) ===== */
-  [data-theme="orange-vitality"] {
-    --background: 30 35% 5%;
-    --foreground: 30 100% 97%;
-    --card: 30 30% 9%;
-    --card-foreground: 30 100% 97%;
-    --popover: 30 30% 9%;
-    --popover-foreground: 30 100% 97%;
-    --primary: 25 95% 53%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 30 25% 18%;
-    --secondary-foreground: 30 100% 97%;
-    --muted: 30 25% 18%;
-    --muted-foreground: 30 25% 55%;
-    --accent: 30 25% 18%;
-    --accent-foreground: 30 100% 97%;
-    --destructive: 0 80% 70%;
-    --destructive-foreground: 30 35% 5%;
-    --border: 30 25% 18%;
-    --input: 30 25% 18%;
-    --ring: 25 95% 53%;
+  /* ===== Theme 5: Dracula — 紫粉经典（高辨识度） // Logan.Li ===== */
+  [data-theme="dracula"] {
+    --background: 231 15% 18%;
+    --foreground: 60 30% 96%;
+    --card: 231 15% 20%;
+    --card-foreground: 60 30% 96%;
+    --popover: 231 15% 20%;
+    --popover-foreground: 60 30% 96%;
+    --primary: 265 89% 78%;
+    --primary-foreground: 231 15% 18%;
+    --secondary: 232 14% 31%;
+    --secondary-foreground: 60 30% 96%;
+    --muted: 232 14% 31%;
+    --muted-foreground: 231 8% 68%;
+    --accent: 232 14% 31%;
+    --accent-foreground: 60 30% 96%;
+    --destructive: 0 100% 67%;
+    --destructive-foreground: 231 15% 18%;
+    --border: 232 14% 31%;
+    --input: 232 14% 31%;
+    --ring: 265 89% 78%;
     --radius: 0.625rem;
-    --sidebar-background: 30 30% 7%;
-    --sidebar-foreground: 30 80% 88%;
-    --sidebar-primary: 25 95% 53%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 30 25% 18%;
-    --sidebar-accent-foreground: 30 100% 97%;
-    --sidebar-border: 30 25% 18%;
-    --sidebar-ring: 25 95% 53%;
-    --dg-bg-primary: #110d08;
-    --dg-bg-secondary: #1d1610;
-    --dg-bg-tertiary: #2b1f16;
-    --dg-bg-hover: #3d2d20;
-    --dg-bg-active: #4d3928;
-    --dg-border: #3d2d20;
-    --dg-border-light: #2b1f16;
-    --dg-border-hover: #4d3928;
-    --dg-text-primary: #fef7ed;
-    --dg-text-secondary: #d4a574;
-    --dg-text-muted: #9c7a54;
-    --dg-blue: #60a5fa;
-    --dg-green: #4ade80;
-    --dg-red: #f87171;
-    --dg-orange: #fb923c;
-    --dg-purple: #a78bfa;
-    --dg-cyan: #2dd4bf;
-    --dg-yellow: #fcd34d;
-    --dg-card-hover-border: rgba(251, 146, 60, 0.5);
-    --dg-gradient-start: #ea580c;
-    --dg-gradient-end: #f59e0b;
-    --dg-gradient-text-start: #f97316;
-    --dg-gradient-text-end: #fbbf24;
-    --dg-input-focus-ring: rgba(251, 146, 60, 0.2);
-    --chart-grid: #3d2d20;
-    --chart-axis: #9c7a54;
-    --chart-tooltip-bg: #1d1610;
-    --chart-tooltip-border: #3d2d20;
-    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(251, 146, 60, 0.05);
-    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 146, 60, 0.2);
+    --sidebar-background: 231 16% 16%;
+    --sidebar-foreground: 60 25% 92%;
+    --sidebar-primary: 265 89% 78%;
+    --sidebar-primary-foreground: 231 15% 18%;
+    --sidebar-accent: 232 14% 28%;
+    --sidebar-accent-foreground: 60 30% 96%;
+    --sidebar-border: 232 14% 28%;
+    --sidebar-ring: 265 89% 78%;
+    --dg-bg-primary: #282a36;
+    --dg-bg-secondary: #313341;
+    --dg-bg-tertiary: #44475a;
+    --dg-bg-hover: #4d5066;
+    --dg-bg-active: #5a5d78;
+    --dg-border: #44475a;
+    --dg-border-light: #383a4a;
+    --dg-border-hover: #6272a4;
+    --dg-text-primary: #f8f8f2;
+    --dg-text-secondary: #bfbfb5;
+    --dg-text-muted: #8b8b80;
+    --dg-blue: #8be9fd;
+    --dg-green: #50fa7b;
+    --dg-red: #ff5555;
+    --dg-orange: #ffb86c;
+    --dg-purple: #bd93f9;
+    --dg-cyan: #8be9fd;
+    --dg-yellow: #f1fa8c;
+    --dg-card-hover-border: rgba(189, 147, 249, 0.5);
+    --dg-gradient-start: #bd93f9;
+    --dg-gradient-end: #ff79c6;
+    --dg-gradient-text-start: #bd93f9;
+    --dg-gradient-text-end: #ff79c6;
+    --dg-input-focus-ring: rgba(189, 147, 249, 0.25);
+    --chart-grid: #44475a;
+    --chart-axis: #8b8b80;
+    --chart-tooltip-bg: #313341;
+    --chart-tooltip-border: #44475a;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(189, 147, 249, 0.08);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 121, 198, 0.2);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.55);
+    --skeleton-base: #44475a;
+    --skeleton-highlight: #4d5066;
+    --dg-overlay: color-mix(in srgb, #191a21 58%, transparent);
+  }
+
+  /* ===== Theme 6: Tokyo Night — 深蓝紫霓虹 // Logan.Li ===== */
+  [data-theme="tokyo-night"] {
+    --background: 235 25% 12%;
+    --foreground: 226 48% 86%;
+    --card: 234 26% 16%;
+    --card-foreground: 226 48% 86%;
+    --popover: 234 26% 16%;
+    --popover-foreground: 226 48% 86%;
+    --primary: 221 70% 72%;
+    --primary-foreground: 235 25% 12%;
+    --secondary: 233 23% 22%;
+    --secondary-foreground: 226 48% 86%;
+    --muted: 233 23% 22%;
+    --muted-foreground: 225 15% 58%;
+    --accent: 233 23% 22%;
+    --accent-foreground: 226 48% 86%;
+    --destructive: 350 65% 72%;
+    --destructive-foreground: 235 25% 12%;
+    --border: 233 20% 26%;
+    --input: 233 23% 22%;
+    --ring: 221 70% 72%;
+    --radius: 0.625rem;
+    --sidebar-background: 235 28% 10%;
+    --sidebar-foreground: 226 45% 84%;
+    --sidebar-primary: 221 70% 72%;
+    --sidebar-primary-foreground: 235 25% 12%;
+    --sidebar-accent: 233 23% 20%;
+    --sidebar-accent-foreground: 226 48% 86%;
+    --sidebar-border: 233 20% 24%;
+    --sidebar-ring: 221 70% 72%;
+    --dg-bg-primary: #1a1b26;
+    --dg-bg-secondary: #24283b;
+    --dg-bg-tertiary: #2f3549;
+    --dg-bg-hover: #3b4261;
+    --dg-bg-active: #414868;
+    --dg-border: #3b4261;
+    --dg-border-light: #292e42;
+    --dg-border-hover: #565f89;
+    --dg-text-primary: #c0caf5;
+    --dg-text-secondary: #9aa5ce;
+    --dg-text-muted: #737aa2;
+    --dg-blue: #7aa2f7;
+    --dg-green: #9ece6a;
+    --dg-red: #f7768e;
+    --dg-orange: #ff9e64;
+    --dg-purple: #bb9af7;
+    --dg-cyan: #7dcfff;
+    --dg-yellow: #e0af68;
+    --dg-card-hover-border: rgba(122, 162, 247, 0.45);
+    --dg-gradient-start: #7aa2f7;
+    --dg-gradient-end: #bb9af7;
+    --dg-gradient-text-start: #7aa2f7;
+    --dg-gradient-text-end: #7dcfff;
+    --dg-input-focus-ring: rgba(122, 162, 247, 0.22);
+    --chart-grid: #3b4261;
+    --chart-axis: #737aa2;
+    --chart-tooltip-bg: #24283b;
+    --chart-tooltip-border: #3b4261;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(122, 162, 247, 0.06);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(187, 154, 247, 0.18);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.55);
+    --skeleton-base: #2f3549;
+    --skeleton-highlight: #3b4261;
+    --dg-overlay: color-mix(in srgb, #15161e 58%, transparent);
+  }
+
+  /* ===== Theme 7: Nord（保留兼容，已从选择器下架） // Logan.Li ===== */
+  [data-theme="nord"] {
+    --background: 220 16% 22%;
+    --foreground: 218 27% 92%;
+    --card: 220 16% 19%;
+    --card-foreground: 218 27% 92%;
+    --popover: 220 16% 19%;
+    --popover-foreground: 218 27% 92%;
+    --primary: 193 43% 67%;
+    --primary-foreground: 220 16% 22%;
+    --secondary: 220 16% 28%;
+    --secondary-foreground: 218 27% 92%;
+    --muted: 220 16% 28%;
+    --muted-foreground: 220 16% 56%;
+    --accent: 220 16% 28%;
+    --accent-foreground: 218 27% 92%;
+    --destructive: 354 42% 56%;
+    --destructive-foreground: 218 27% 92%;
+    --border: 220 16% 28%;
+    --input: 220 16% 28%;
+    --ring: 193 43% 67%;
+    --radius: 0.625rem;
+    --sidebar-background: 220 16% 18%;
+    --sidebar-foreground: 218 27% 88%;
+    --sidebar-primary: 193 43% 67%;
+    --sidebar-primary-foreground: 220 16% 22%;
+    --sidebar-accent: 220 16% 28%;
+    --sidebar-accent-foreground: 218 27% 92%;
+    --sidebar-border: 220 16% 28%;
+    --sidebar-ring: 193 43% 67%;
+    --dg-bg-primary: #2e3440;
+    --dg-bg-secondary: #3b4252;
+    --dg-bg-tertiary: #434c5e;
+    --dg-bg-hover: #4c566a;
+    --dg-bg-active: #5e6a7e;
+    --dg-border: #4c566a;
+    --dg-border-light: #434c5e;
+    --dg-border-hover: #5e6a7e;
+    --dg-text-primary: #eceff4;
+    --dg-text-secondary: #d8dee9;
+    --dg-text-muted: #a0a8b8;
+    --dg-blue: #81a1c1;
+    --dg-green: #a3be8c;
+    --dg-red: #bf616a;
+    --dg-orange: #d08770;
+    --dg-purple: #b48ead;
+    --dg-cyan: #88c0d0;
+    --dg-yellow: #ebcb8b;
+    --dg-card-hover-border: rgba(136, 192, 208, 0.45);
+    --dg-gradient-start: #5e81ac;
+    --dg-gradient-end: #88c0d0;
+    --dg-gradient-text-start: #88c0d0;
+    --dg-gradient-text-end: #81a1c1;
+    --dg-input-focus-ring: rgba(136, 192, 208, 0.2);
+    --chart-grid: #4c566a;
+    --chart-axis: #a0a8b8;
+    --chart-tooltip-bg: #3b4252;
+    --chart-tooltip-border: #4c566a;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(136, 192, 208, 0.05);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(136, 192, 208, 0.15);
     --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
-    --skeleton-base: #2b1f16;
-    --skeleton-highlight: #3d2d20;
+    --skeleton-base: #434c5e;
+    --skeleton-highlight: #4c566a;
+    --dg-overlay: color-mix(in srgb, #2e3440 55%, transparent);
+  }
+
+  /*
+   * ===== AIOps 设计令牌（Design Tokens）// Logan.Li =====
+   *
+   * 层级：--dg-* 主题原色 → --surface-* / --text-* 语义别名 → .dg-* 工具类
+   *
+   * 表面：--surface-canvas 页面底 | --surface-raised 卡片 | --surface-inset 输入/嵌套
+   * 文字：--text-primary 标题正文 | --text-secondary 次要 | --text-tertiary 辅助
+   * 边框：--border-default 常规 | --border-subtle 弱分割 | --border-strong 强调
+   * 品牌：--brand 主色 | --brand-muted 浅色底
+   * 图表：--chart-1 … --chart-7 与语义色一一对应
+   * 布局：--space-page 页面区块 | --layout-* 应用壳（侧栏/顶栏/内边距）
+   * 告警：--alert-warning-* / --alert-error-* 横幅语义色
+   * 主题：data-theme-preference 用户选择 | data-theme 实际生效主题
+   *        主流：system / ocean-deep(蓝黑) / light-professional
+   *        开发者：one-dark(暖灰) / dracula(紫粉) / tokyo-night(霓虹) / catppuccin
+   *
+   * 布局层级：dg-app-shell → dg-app-content → PageShell(.dg-page) → ContentPanel
+   */
+  :root,
+  [data-theme] {
+    --surface-canvas: var(--dg-bg-primary);
+    --surface-raised: var(--dg-bg-secondary);
+    --surface-inset: var(--dg-bg-tertiary);
+    --surface-hover: var(--dg-bg-hover);
+    --surface-active: var(--dg-bg-active);
+    --text-primary: var(--dg-text-primary);
+    --text-secondary: var(--dg-text-secondary);
+    --text-tertiary: var(--dg-text-muted);
+    --border-default: var(--dg-border);
+    --border-subtle: var(--dg-border-light);
+    --border-strong: var(--dg-border-hover);
+    --brand: var(--dg-blue);
+    --brand-muted: color-mix(in srgb, var(--dg-blue) 14%, transparent);
+    /* 主按钮 — 纯色品牌，禁止渐变（企业严肃风） // Logan.Li */
+    --btn-primary-bg: var(--brand);
+    --btn-primary-hover: color-mix(in srgb, var(--brand) 86%, #000);
+    --btn-primary-fg: #ffffff;
+    --btn-primary-border: color-mix(in srgb, var(--brand) 75%, transparent);
+    --btn-primary-shadow: color-mix(in srgb, var(--brand) 18%, transparent);
+    --chart-1: var(--dg-blue);
+    --chart-2: var(--dg-green);
+    --chart-3: var(--dg-purple);
+    --chart-4: var(--dg-orange);
+    --chart-5: var(--dg-cyan);
+    --chart-6: var(--dg-yellow);
+    --chart-7: var(--dg-red);
+    --space-page: 1.5rem;
+    --space-section: 1rem;
+    --space-inline: 0.75rem;
+    --radius-card: 0.75rem;
+    --radius-control: 0.5rem;
+    --alert-warning-bg: color-mix(in srgb, var(--dg-yellow) 8%, transparent);
+    --alert-warning-border: color-mix(in srgb, var(--dg-yellow) 30%, transparent);
+    --alert-warning-text: var(--dg-yellow);
+    --alert-error-bg: color-mix(in srgb, var(--dg-red) 8%, transparent);
+    --alert-error-border: color-mix(in srgb, var(--dg-red) 30%, transparent);
+    --alert-error-text: var(--dg-red);
+    /* 全局布局节奏 — MainLayout / PageShell 单源 // Logan.Li */
+    --layout-sidebar-expanded: 16rem;
+    --layout-sidebar-collapsed: 4rem;
+    --layout-header-height: 3.5rem;
+    --layout-page-padding-x: 1.5rem;
+    --layout-page-padding-y: 1.5rem;
+    --layout-breadcrumb-gap: 1rem;
+    --layout-content-max: 100%;
+    --layout-footer-height: 3rem;
   }
 }
 
@@ -409,9 +616,62 @@
     background: linear-gradient(to bottom right, var(--dg-gradient-start), var(--dg-gradient-end));
   }
 
+  /* ===== 页面标题图标槽（单色图标 + 嵌套表面，避免渐变底） // Logan.Li ===== */
+  .dg-icon-box {
+    @apply shrink-0 w-10 h-10 rounded-lg flex items-center justify-center;
+    background: var(--surface-inset);
+    border: 1px solid var(--border-subtle);
+    color: var(--brand);
+  }
+
+  /* ===== 区块标题 / 告警横幅 ===== */
+  .dg-section-title {
+    @apply text-sm font-medium mb-4;
+    color: var(--text-primary);
+  }
+  .dg-alert-banner {
+    @apply rounded-lg border p-4;
+    background: var(--alert-warning-bg);
+    border-color: var(--alert-warning-border);
+  }
+  .dg-alert-banner-title {
+    @apply text-sm font-medium;
+    color: var(--alert-warning-text);
+  }
+
+  /* ===== 应用级布局壳（MainLayout 单源） // Logan.Li ===== */
+  .dg-app-shell {
+    min-height: 100vh;
+    background-color: var(--surface-canvas);
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  .dg-app-main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 100vh;
+    padding-top: var(--layout-header-height);
+  }
+  .dg-app-breadcrumb {
+    padding: var(--layout-breadcrumb-gap) var(--layout-page-padding-x) 0;
+  }
+  .dg-app-content {
+    flex: 1;
+    padding: var(--layout-page-padding-y) var(--layout-page-padding-x);
+    min-height: 0;
+    max-width: var(--layout-content-max);
+    width: 100%;
+  }
+  .dg-app-footer {
+    padding: 0.75rem var(--layout-page-padding-x);
+    border-top: 1px solid var(--border-default);
+    margin-top: auto;
+  }
+
   /* ===== Page Container ===== */
   .dg-page {
-    @apply space-y-6 animate-fade-in;
+    gap: var(--space-page);
+    @apply flex flex-col animate-fade-in w-full;
   }
   .dg-page-header {
     @apply flex items-center justify-between flex-wrap gap-4;
@@ -425,17 +685,51 @@
   .dg-page-actions {
     @apply flex items-center gap-2 flex-wrap;
   }
+  .dg-page-toolbar {
+    @apply flex items-center gap-3 flex-wrap py-1;
+  }
+  .dg-page-tabs {
+    @apply w-full;
+  }
+  .dg-page-tab {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-canvas)] rounded-t-md;
+  }
+
+  /* ===== 内容面板（列表页表格容器） // Logan.Li ===== */
+  .dg-content-panel {
+    @apply bg-[var(--surface-raised)] border border-[var(--border-default)] rounded-xl overflow-hidden;
+    box-shadow: var(--shadow-card);
+  }
+  .dg-content-panel-toolbar {
+    @apply flex items-center justify-between flex-wrap gap-3 p-4 border-b border-[var(--border-default)];
+  }
+  .dg-content-panel-body {
+    @apply p-0;
+  }
+
+  /* ===== 表面层级快捷类 ===== */
+  .dg-surface-canvas { background-color: var(--surface-canvas); }
+  .dg-surface-raised { background-color: var(--surface-raised); }
+  .dg-surface-inset { background-color: var(--surface-inset); }
 
   /* ===== Buttons ===== */
   .dg-btn {
     @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
   }
   .dg-btn-primary {
-    @apply dg-btn dg-gradient-bg text-white hover:opacity-90 active:scale-[0.98];
-    box-shadow: 0 4px 16px color-mix(in srgb, var(--dg-gradient-start) 25%, transparent);
+    @apply dg-btn active:scale-[0.98];
+    background: var(--btn-primary-bg);
+    color: var(--btn-primary-fg);
+    border: 1px solid var(--btn-primary-border);
+    box-shadow: 0 1px 2px var(--btn-primary-shadow);
   }
   .dg-btn-primary:hover {
-    box-shadow: 0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 35%, transparent);
+    background: var(--btn-primary-hover);
+    box-shadow: 0 2px 6px var(--btn-primary-shadow);
+  }
+  .dg-btn-primary:disabled {
+    opacity: 0.55;
+    box-shadow: none;
   }
   .dg-btn-secondary {
     @apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-border-hover)] active:scale-[0.98];
@@ -444,7 +738,13 @@
     @apply dg-btn text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)];
   }
   .dg-btn-danger {
-    @apply dg-btn bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 active:scale-[0.98];
+    @apply dg-btn active:scale-[0.98];
+    background: color-mix(in srgb, var(--dg-red) 12%, transparent);
+    color: var(--dg-red);
+    border: 1px solid color-mix(in srgb, var(--dg-red) 28%, transparent);
+  }
+  .dg-btn-danger:hover {
+    background: color-mix(in srgb, var(--dg-red) 20%, transparent);
   }
   .dg-btn-sm {
     @apply px-3 py-1.5 text-xs;
@@ -453,50 +753,95 @@
     @apply px-6 py-3 text-base;
   }
 
-  /* ===== Badges ===== */
+  /* ===== Semantic accent text（各主题 --dg-* 驱动） // Logan.Li ===== */
+  .dg-text-blue { color: var(--dg-blue); }
+  .dg-text-green { color: var(--dg-green); }
+  .dg-text-red { color: var(--dg-red); }
+  .dg-text-orange { color: var(--dg-orange); }
+  .dg-text-yellow { color: var(--dg-yellow); }
+  .dg-text-purple { color: var(--dg-purple); }
+  .dg-text-cyan { color: var(--dg-cyan); }
+
+  /* ===== Badges（color-mix 柔化背景，避免高对比硬色） // Logan.Li ===== */
   .dg-badge {
-    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
+    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border;
   }
   .dg-badge-blue {
-    @apply dg-badge bg-blue-500/10 text-blue-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-blue) 14%, transparent);
+    color: var(--dg-blue);
+    border-color: color-mix(in srgb, var(--dg-blue) 28%, transparent);
   }
   .dg-badge-green {
-    @apply dg-badge bg-green-500/10 text-green-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-green) 14%, transparent);
+    color: var(--dg-green);
+    border-color: color-mix(in srgb, var(--dg-green) 28%, transparent);
   }
   .dg-badge-red {
-    @apply dg-badge bg-red-500/10 text-red-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-red) 14%, transparent);
+    color: var(--dg-red);
+    border-color: color-mix(in srgb, var(--dg-red) 28%, transparent);
   }
   .dg-badge-yellow {
-    @apply dg-badge bg-yellow-500/10 text-yellow-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-yellow) 14%, transparent);
+    color: var(--dg-yellow);
+    border-color: color-mix(in srgb, var(--dg-yellow) 28%, transparent);
   }
   .dg-badge-purple {
-    @apply dg-badge bg-purple-500/10 text-purple-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-purple) 14%, transparent);
+    color: var(--dg-purple);
+    border-color: color-mix(in srgb, var(--dg-purple) 28%, transparent);
   }
   .dg-badge-orange {
-    @apply dg-badge bg-orange-500/10 text-orange-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-orange) 14%, transparent);
+    color: var(--dg-orange);
+    border-color: color-mix(in srgb, var(--dg-orange) 28%, transparent);
   }
   .dg-badge-cyan {
-    @apply dg-badge bg-cyan-500/10 text-cyan-400;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-cyan) 14%, transparent);
+    color: var(--dg-cyan);
+    border-color: color-mix(in srgb, var(--dg-cyan) 28%, transparent);
   }
   .dg-badge-muted {
-    @apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)];
+    @apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border-[var(--dg-border)];
   }
 
   /* ===== Status Badges ===== */
   .dg-status-running {
-    @apply dg-badge bg-green-500/10 text-green-400 border border-green-500/20;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-green) 14%, transparent);
+    color: var(--dg-green);
+    border-color: color-mix(in srgb, var(--dg-green) 28%, transparent);
   }
   .dg-status-stopped {
-    @apply dg-badge bg-gray-500/10 text-gray-400 border border-gray-500/20;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-text-muted) 14%, transparent);
+    color: var(--dg-text-secondary);
+    border-color: color-mix(in srgb, var(--dg-text-muted) 28%, transparent);
   }
   .dg-status-warning {
-    @apply dg-badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-yellow) 14%, transparent);
+    color: var(--dg-yellow);
+    border-color: color-mix(in srgb, var(--dg-yellow) 28%, transparent);
   }
   .dg-status-error {
-    @apply dg-badge bg-red-500/10 text-red-400 border border-red-500/20;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-red) 14%, transparent);
+    color: var(--dg-red);
+    border-color: color-mix(in srgb, var(--dg-red) 28%, transparent);
   }
   .dg-status-info {
-    @apply dg-badge bg-blue-500/10 text-blue-400 border border-blue-500/20;
+    @apply dg-badge;
+    background: color-mix(in srgb, var(--dg-blue) 14%, transparent);
+    color: var(--dg-blue);
+    border-color: color-mix(in srgb, var(--dg-blue) 28%, transparent);
   }
 
   /* ===== Scrollbar ===== */
@@ -589,16 +934,17 @@
     @apply w-2 h-2 rounded-full;
   }
   .status-dot-running {
-    @apply bg-emerald-400 animate-pulse;
+    background-color: var(--dg-green);
+    @apply animate-pulse;
   }
   .status-dot-stopped {
-    @apply bg-slate-400;
+    background-color: var(--dg-text-muted);
   }
   .status-dot-warning {
-    @apply bg-amber-400;
+    background-color: var(--dg-yellow);
   }
   .status-dot-error {
-    @apply bg-red-400;
+    background-color: var(--dg-red);
   }
 
   /* ===== Chart theme-aware utilities ===== */
@@ -656,6 +1002,16 @@ td {
   color: var(--dg-text-primary);
 }
 
+select {
+  background-color: var(--dg-bg-tertiary);
+  border: 1px solid var(--dg-border);
+  color: var(--dg-text-primary);
+}
+select option {
+  background-color: var(--dg-bg-secondary);
+  color: var(--dg-text-primary);
+}
+
 input:focus,
 textarea:focus,
 select:focus {
@@ -696,10 +1052,10 @@ button {
   box-shadow: var(--shadow-dropdown) !important;
 }
 
-/* Dialog overlay */
+/* Dialog overlay — 柔化遮罩，避免纯黑高对比 // Logan.Li */
 [data-state='open'] > [data-radix-dialog-overlay] {
   @apply backdrop-blur-sm;
-  background-color: color-mix(in srgb, var(--dg-bg-primary) 80%, transparent);
+  background-color: var(--dg-overlay) !important;
 }
 
 /* Dropdown menu styling */
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d00f621..47fd82b 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,8 +3,12 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 // U3: i18n — 必须在 App 之前导入以初始化翻译实例
 import './i18n'
+import { getInitialTheme, applyThemeToDocument } from '@/utils/theme'
 import App from './App.tsx'
 
+// 首屏前应用主题，避免闪烁 // Logan.Li
+applyThemeToDocument(getInitialTheme())
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
diff --git a/frontend/src/pages/approval/ApprovalCategoryPage.tsx b/frontend/src/pages/approval/ApprovalCategoryPage.tsx
index f9a1d07..f84de01 100644
--- a/frontend/src/pages/approval/ApprovalCategoryPage.tsx
+++ b/frontend/src/pages/approval/ApprovalCategoryPage.tsx
@@ -1,7 +1,6 @@
 // 审批分类通用页面 — 资源申请/应用申请/权限审批三个子页面共用
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -13,9 +12,12 @@ import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Plus, Search, RefreshCw, Clock, CheckCircle, XCircle, FileText, Loader2, Eye, Check, XIcon, User, ChevronRight, Play } from 'lucide-react';
+import { Plus, Search, RefreshCw, Clock, CheckCircle, XCircle, FileText, Eye, Check, XIcon, User, ChevronRight, Play } from 'lucide-react';
 import { approvalApi } from '@/api';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 export interface FormField {
@@ -42,9 +44,9 @@ interface ProcessItem {
 
 const statusBadge = (status: string, t: (k: string) => string) => {
   switch (status) {
-    case 'approved': return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />{t('approval.status.approved')}</Badge>;
-    case 'rejected': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><XCircle className="h-3 w-3 mr-1" />{t('approval.status.rejected')}</Badge>;
-    default: return <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"><Clock className="h-3 w-3 mr-1" />{t('approval.status.pending')}</Badge>;
+    case 'approved': return <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />{t('approval.status.approved')}</Badge>;
+    case 'rejected': return <Badge className="bg-red-500/20 dg-text-red border-red-500/30"><XCircle className="h-3 w-3 mr-1" />{t('approval.status.rejected')}</Badge>;
+    default: return <Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30"><Clock className="h-3 w-3 mr-1" />{t('approval.status.pending')}</Badge>;
   }
 };
 
@@ -153,50 +155,55 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 
   const filtered = processes.filter((p) => !keyword || (p.title || '').toLowerCase().includes(keyword.toLowerCase()));
 
+  // 工具栏：搜索 + 状态筛选 // Logan.Li
+  const toolbar = (
+    <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 dg-text-muted" />
+        <Input placeholder={t('approval.flow.searchRequest')} value={keyword} onChange={(e) => setKeyword(e.target.value)}
+          className="pl-9 h-9 dg-input" />
+      </div>
+      <Select value={statusFilter} onValueChange={setStatusFilter}>
+        <SelectTrigger className="w-32 h-9 dg-input">
+          <SelectValue placeholder={t('common.all')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t('common.all')}</SelectItem>
+          <SelectItem value="pending">{t('approval.status.pending')}</SelectItem>
+          <SelectItem value="approved">{t('approval.status.approved')}</SelectItem>
+          <SelectItem value="rejected">{t('approval.status.rejected')}</SelectItem>
+        </SelectContent>
+      </Select>
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchProcesses}>
+        <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="space-y-5">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{title}</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{description}</p>
-        </div>
-        <Button onClick={openCreateDialog} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-          <Plus className="h-4 w-4 mr-2" />{t('approval.newRequest')}
-        </Button>
-      </div>
-
-      <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-[var(--dg-text-muted)]" />
-          <Input placeholder={t('approval.flow.searchRequest')} value={keyword} onChange={(e) => setKeyword(e.target.value)}
-            className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
-        </div>
-        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-            <SelectValue placeholder={t('common.all')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('common.all')}</SelectItem>
-            <SelectItem value="pending">{t('approval.status.pending')}</SelectItem>
-            <SelectItem value="approved">{t('approval.status.approved')}</SelectItem>
-            <SelectItem value="rejected">{t('approval.status.rejected')}</SelectItem>
-          </SelectContent>
-        </Select>
-        <Button variant="outline" size="sm" className="border-[var(--dg-border)]" onClick={fetchProcesses}>
-          <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
-        </Button>
-      </div>
-
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          {loading ? (
-            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-[var(--dg-blue)]" /></div>
-          ) : filtered.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-muted)]">
-              <FileText className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">{t('approval.noRecords')}</p>
-              <Button variant="link" className="mt-2" onClick={openCreateDialog}>{t('approval.applyNow')}</Button>
-            </div>
+    <>
+      <PageShell
+        variant="list"
+        title={title}
+        subtitle={description}
+        icon={<FileText className="h-5 w-5" />}
+        toolbar={toolbar}
+        loading={loading}
+        actions={(
+          <Button onClick={openCreateDialog} className="dg-btn-primary">
+            <Plus className="h-4 w-4 mr-2" />{t('approval.newRequest')}
+          </Button>
+        )}
+      >
+        <ContentPanel noPadding>
+          {filtered.length === 0 ? (
+            <PageEmpty
+              icon={<FileText className="h-10 w-10" />}
+              title={t('approval.noRecords')}
+              action={(
+                <Button variant="link" onClick={openCreateDialog}>{t('approval.applyNow')}</Button>
+              )}
+            />
           ) : (
             <Table>
               <TableHeader>
@@ -221,10 +228,10 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
                       <div className="flex items-center gap-1">
                         {p.status === 'pending' ? (
                           <>
-                            <Button variant="ghost" size="sm" className="h-8 text-red-400 hover:bg-red-500/10" onClick={() => handleReject(p.id)} disabled={acting}>
+                            <Button variant="ghost" size="sm" className="h-8 dg-text-red hover:bg-red-500/10" onClick={() => handleReject(p.id)} disabled={acting}>
                               <XIcon className="h-3.5 w-3.5 mr-1" />{t('common.reject')}
                             </Button>
-                            <Button variant="ghost" size="sm" className="h-8 text-emerald-400 hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
+                            <Button variant="ghost" size="sm" className="h-8 dg-text-green hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
                               <Check className="h-3.5 w-3.5 mr-1" />{t('common.approve')}
                             </Button>
                           </>
@@ -240,8 +247,8 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
               </TableBody>
             </Table>
           )}
-        </CardContent>
-      </Card>
+        </ContentPanel>
+      </PageShell>
 
       {/* Create Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -253,7 +260,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           <div className="space-y-4 py-2">
             {fields.map((field) => (
               <div key={field.key} className="space-y-1.5">
-                <Label className="text-[var(--dg-text-primary)] text-sm">{field.label}{field.required && <span className="text-red-400 ml-0.5">*</span>}</Label>
+                <Label className="text-[var(--dg-text-primary)] text-sm">{field.label}{field.required && <span className="dg-text-red ml-0.5">*</span>}</Label>
                 {field.type === 'select' ? (
                   <Select value={formData[field.key] || ''} onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}>
                     <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"><SelectValue placeholder={field.placeholder || `${t('approval.editor.pleaseSelect')}${field.label}`} /></SelectTrigger>
@@ -272,8 +279,8 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           </div>
           <div className="flex justify-end gap-3 pt-2">
             <Button variant="outline" className="border-[var(--dg-border)]" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button>
-            <Button onClick={handleCreate} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-              {submitting ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />{t('approval.submitting')}</> : t('approval.submitRequest')}
+            <Button onClick={handleCreate} disabled={submitting} className="dg-btn-primary">
+              {submitting ? t('approval.submitting') : t('approval.submitRequest')}
             </Button>
           </div>
         </DialogContent>
@@ -281,7 +288,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 
       {/* Detail Dialog — operation timeline */}
       <DetailTimelineDialog item={detailItem} onClose={() => setDetailItem(null)} fields={fields} onStatusChange={fetchProcesses} />
-    </div>
+    </>
   );
 }
 
@@ -326,9 +333,9 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
   };
 
   const stepStatusColor = (s: StepItem) => {
-    if (s.status === 'approved') return 'text-emerald-400';
-    if (s.status === 'rejected') return 'text-red-400';
-    if (s.step === item.current_step) return 'text-blue-400';
+    if (s.status === 'approved') return 'dg-text-green';
+    if (s.status === 'rejected') return 'dg-text-red';
+    if (s.step === item.current_step) return 'dg-text-blue';
     return 'text-[var(--dg-text-muted)]';
   };
 
@@ -364,7 +371,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
               {/* 1. Submit node */}
               <div className="flex gap-3">
                 <div className="flex flex-col items-center">
-                  <div className="w-7 h-7 rounded-full bg-blue-500/20 flex items-center justify-center"><User className="w-3.5 h-3.5 text-blue-400" /></div>
+                  <div className="w-7 h-7 rounded-full bg-blue-500/20 flex items-center justify-center"><User className="w-3.5 h-3.5 dg-text-blue" /></div>
                   <div className="w-0.5 flex-1 bg-[var(--dg-border)] my-1" />
                 </div>
                 <div className="flex-1 pb-4">
@@ -405,11 +412,11 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
                   <div key={s.id} className="flex gap-3">
                     <div className="flex flex-col items-center">
                       <div className={`w-7 h-7 rounded-full flex items-center justify-center ${iconColor}`}>
-                        {s.status === 'approved' ? <Check className="w-3.5 h-3.5 text-emerald-400" />
-                          : s.status === 'rejected' ? <XIcon className="w-3.5 h-3.5 text-red-400" />
+                        {s.status === 'approved' ? <Check className="w-3.5 h-3.5 dg-text-green" />
+                          : s.status === 'rejected' ? <XIcon className="w-3.5 h-3.5 dg-text-red" />
                             : isExecute
-                              ? <Play className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'text-green-400' : 'text-[var(--dg-text-muted)]'}`} />
-                              : <ChevronRight className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'text-blue-400' : 'text-[var(--dg-text-muted)]'}`} />}
+                              ? <Play className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'dg-text-green' : 'text-[var(--dg-text-muted)]'}`} />
+                              : <ChevronRight className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'dg-text-blue' : 'text-[var(--dg-text-muted)]'}`} />}
                       </div>
                       {!isLast && <div className="w-0.5 flex-1 bg-[var(--dg-border)] my-1" />}
                     </div>
@@ -470,7 +477,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
         <div className="flex justify-end gap-3 pt-2">
           {item.status === 'pending' && (
             <>
-              <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleReject} disabled={acting}>
+              <Button variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={handleReject} disabled={acting}>
                 <XIcon className="h-4 w-4 mr-1.5" />{t('common.reject')}
               </Button>
               <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleApprove} disabled={acting}>
diff --git a/frontend/src/pages/approval/ApprovalWorkflowPage.tsx b/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
index e8bb70f..d476f72 100644
--- a/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
+++ b/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
@@ -10,6 +10,8 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { approvalWorkflowApi, userApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                               */
@@ -53,9 +55,9 @@ interface StepDraft {
 }
 
 const STEP_TYPE_COLORS: Record<string, string> = {
-  submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
-  audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
-  execute: 'bg-green-500/15 text-green-400 border-green-500/30',
+  submit: 'bg-blue-500/15 dg-text-blue border-blue-500/30',
+  audit: 'bg-purple-500/15 dg-text-purple border-purple-500/30',
+  execute: 'bg-green-500/15 dg-text-green border-green-500/30',
 };
 
 const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
@@ -114,9 +116,9 @@ function UserSelectInline({
       {selectedIds.length > 1 && (
         <div className="flex flex-wrap gap-1 mt-1.5">
           {selectedIds.map((uid) => (
-            <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400">
+            <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 dg-text-blue">
               {getUserName(uid)}
-              <button onClick={() => onToggle(uid)} className="hover:text-red-400"><X className="w-3 h-3" /></button>
+              <button onClick={() => onToggle(uid)} className="hover:dg-text-red"><X className="w-3 h-3" /></button>
             </span>
           ))}
         </div>
@@ -128,11 +130,11 @@ function UserSelectInline({
           <div className="fixed z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto"
             style={{ top: pos.top, left: pos.left, width: pos.width }}>
             <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
-              <button onClick={onToggleAll} className="text-[11px] text-blue-400 hover:text-blue-300">
+              <button onClick={onToggleAll} className="text-[11px] dg-text-blue hover:text-blue-300">
                 {selectedIds.length === users.length && users.length > 0 ? t('approval.editor.deselectAll') : t('approval.editor.selectAll')}
               </button>
               {selectedIds.length > 0 && (
-                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300">{t('common.clear')}</button>
+                <button onClick={onClear} className="text-[11px] dg-text-red hover:dg-text-red">{t('common.clear')}</button>
               )}
             </div>
             {users.map((u) => {
@@ -333,7 +335,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
         </div>
 
         <div className="px-5 pb-5 space-y-4 pt-4">
-          {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
+          {error && <div className="px-3 py-2 text-sm dg-text-red bg-red-500/10 rounded-lg">{error}</div>}
 
           <div className="grid grid-cols-2 gap-4">
             <div>
@@ -362,7 +364,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
               <div className="flex items-center gap-1">
                 {stepTypes.map((tp) => (
                   <button key={tp.value} onClick={() => addStep(tp.value)}
-                    className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 rounded transition-colors">
+                    className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 dg-text-blue hover:bg-blue-500/20 rounded transition-colors">
                     <Plus className="w-3 h-3" />{tp.label}
                   </button>
                 ))}
@@ -397,7 +399,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
                           <ArrowDown className="w-3.5 h-3.5" />
                         </button>
                         <button onClick={() => removeStep(idx)}
-                          className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors">
+                          className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors">
                           <Trash2 className="w-3.5 h-3.5" />
                         </button>
                       </div>
@@ -541,47 +543,40 @@ export default function ApprovalWorkflowPage() {
     [users]
   );
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
-        <p className="text-sm">{error}</p>
-        <Button variant="outline" onClick={fetchWorkflows} className="mt-3">{t('approval.retry')}</Button>
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-[var(--dg-text-primary)]">{t('approval.workflowTitle')}</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
-            {t('approval.workflowSubtitle')}
-          </p>
-        </div>
-        <Button onClick={() => setEditorWorkflow(null)}>
-          <Plus className="w-4 h-4 mr-1.5" />{t('approval.newWorkflow')}
-        </Button>
-      </div>
-
-      {items.length === 0 ? (
-        <div className="dg-card p-12 text-center">
-          <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
-          <p className="text-sm text-[var(--dg-text-muted)] mb-4">{t('approval.noWorkflows')}</p>
-          <Button variant="outline" onClick={() => setEditorWorkflow(null)}>{t('approval.createFirst')}</Button>
-        </div>
-      ) : (
-        <>
-          {/* Workflow list */}
+    <>
+      <PageShell
+        variant="list"
+        title={t('approval.workflowTitle')}
+        subtitle={t('approval.workflowSubtitle')}
+        icon={<GitBranch className="h-5 w-5" />}
+        loading={loading}
+        actions={(
+          <Button className="dg-btn-primary" onClick={() => setEditorWorkflow(null)}>
+            <Plus className="w-4 h-4 mr-1.5" />{t('approval.newWorkflow')}
+          </Button>
+        )}
+      >
+        {error ? (
+          <PageEmpty
+            title={error}
+            action={(
+              <Button variant="outline" className="dg-btn-secondary" onClick={fetchWorkflows}>
+                {t('approval.retry')}
+              </Button>
+            )}
+          />
+        ) : items.length === 0 ? (
+          <PageEmpty
+            icon={<GitBranch className="w-12 h-12" />}
+            title={t('approval.noWorkflows')}
+            action={(
+              <Button variant="outline" className="dg-btn-secondary" onClick={() => setEditorWorkflow(null)}>
+                {t('approval.createFirst')}
+              </Button>
+            )}
+          />
+        ) : (
           <div className="space-y-4">
             {items.map((wf) => {
               const isExpanded = expandedId === wf.id;
@@ -592,11 +587,11 @@ export default function ApprovalWorkflowPage() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-3 mb-2 flex-wrap">
                           <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{wf.name}</h3>
-                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 text-yellow-400 flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
-                          <span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}>
+                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 dg-text-yellow flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 dg-text-green' : 'bg-red-500/15 dg-text-red'}`}>
                             {wf.is_active ? t('approval.status.enabled') : t('approval.status.disabled')}
                           </span>
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 dg-text-blue">
                             {categoryLabels[wf.category] || wf.category}
                           </span>
                         </div>
@@ -604,7 +599,7 @@ export default function ApprovalWorkflowPage() {
                         <div className="flex items-center gap-1.5 mt-2 flex-wrap">
                           {wf.steps?.map((s, i) => (
                             <span key={i} className="flex items-center gap-1">
-                              <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
+                              <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
                                 {stepTypeLabels[s.step_type] || s.step_type}
                               </span>
                               {i < (wf.steps?.length || 0) - 1 && (
@@ -622,21 +617,21 @@ export default function ApprovalWorkflowPage() {
                         </button>
                         {!wf.is_default && (
                           <button onClick={() => setDefault(wf.id)}
-                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:text-yellow-400 transition-colors" title={t('approval.msg.setDefaultSuccess')}>
+                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:dg-text-yellow transition-colors" title={t('approval.msg.setDefaultSuccess')}>
                             <Star className="w-4 h-4" />
                           </button>
                         )}
                         <button onClick={() => toggleActive(wf)}
-                          className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 text-green-400 hover:text-red-400' : 'hover:bg-green-500/10 text-red-400 hover:text-green-400'}`}
+                          className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 dg-text-green hover:dg-text-red' : 'hover:bg-green-500/10 dg-text-red hover:dg-text-green'}`}
                           title={wf.is_active ? t('approval.status.disabled') : t('approval.status.enabled')}>
                           <Play className={`w-4 h-4 ${!wf.is_active ? 'rotate-180' : ''}`} />
                         </button>
                         <button onClick={() => setEditorWorkflow(wf)}
-                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors" title={t('common.edit')}>
+                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:dg-text-blue transition-colors" title={t('common.edit')}>
                           <Edit2 className="w-4 h-4" />
                         </button>
                         <button onClick={() => handleDelete(wf.id, wf.name)}
-                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors" title={t('common.delete')}>
+                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors" title={t('common.delete')}>
                           <Trash2 className="w-4 h-4" />
                         </button>
                       </div>
@@ -654,21 +649,21 @@ export default function ApprovalWorkflowPage() {
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-2 mb-1">
                                   <span className="text-sm font-medium text-[var(--dg-text-primary)]">{s.name}</span>
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
+                                  <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
                                     {stepTypeLabels[s.step_type] || s.step_type}
                                   </span>
                                 </div>
                                 {ids.length > 0 && (
                                   <div className="flex flex-wrap gap-1">
                                     {ids.map((uid) => (
-                                      <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400">
+                                      <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 dg-text-blue">
                                         {getUserName(uid)}
                                       </span>
                                     ))}
                                   </div>
                                 )}
                                 {ids.length === 0 && s.step_type !== 'submit' && (
-                                  <span className="text-[11px] text-red-400">{t('approval.detail.noApproverLinked')}</span>
+                                  <span className="text-[11px] dg-text-red">{t('approval.detail.noApproverLinked')}</span>
                                 )}
                               </div>
                             </div>
@@ -681,8 +676,8 @@ export default function ApprovalWorkflowPage() {
               );
             })}
           </div>
-        </>
-      )}
+        )}
+      </PageShell>
 
       {editorWorkflow !== undefined && (
         <WorkflowEditorModal
@@ -692,6 +687,6 @@ export default function ApprovalWorkflowPage() {
           onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/pages/audit/AuditOperationsTab.tsx b/frontend/src/pages/audit/AuditOperationsTab.tsx
index 9135edc..2242a3a 100644
--- a/frontend/src/pages/audit/AuditOperationsTab.tsx
+++ b/frontend/src/pages/audit/AuditOperationsTab.tsx
@@ -13,7 +13,12 @@ import {
   Download,
   Eye,
   X,
+  ClipboardList,
 } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+import { StatStrip } from '@/components/ui/stat-strip';
 import { auditApi } from '@/api';
 import { useAuditLogs } from '@/hooks/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
@@ -106,11 +111,11 @@ export function AuditOperationsTab() {
 
   const getLogResultBadge = (result: OperationLog['result']) => {
     return result === 'success' ? (
-      <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">
         {t('common.success')}
       </Badge>
     ) : (
-      <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">
         {t('common.failed')}
       </Badge>
     );
@@ -158,84 +163,80 @@ export function AuditOperationsTab() {
   const virtualRows = virtualizer.getVirtualItems();
   const totalHeight = virtualizer.getTotalSize();
 
-  return (
-    <div className="space-y-4">
-      {/* Filters */}
-      <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" />
-          <Input
-            placeholder={t('audit.operations.searchPlaceholder')}
-            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"
-          />
-        </div>
+  const successCount = filteredLogs.filter(l => l.result === 'success').length;
+  const failCount = filteredLogs.filter(l => l.result === 'failure').length;
 
-        {/* Module filter */}
-        <select
-          value={moduleFilter}
-          onChange={(e) => setModuleFilter(e.target.value)}
-          className="h-9 px-3 text-sm rounded-md bg-slate-800/50 border border-slate-700 text-slate-300 focus:outline-none focus:border-blue-500"
-        >
-          <option value="">{t('audit.operations.allModules')}</option>
-          {modules.map((m) => (
-            <option key={m.value} value={m.value}>
-              {m.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Action filter */}
-        <select
-          value={actionFilter}
-          onChange={(e) => setActionFilter(e.target.value)}
-          className="h-9 px-3 text-sm rounded-md bg-slate-800/50 border border-slate-700 text-slate-300 focus:outline-none focus:border-blue-500"
-        >
-          <option value="">{t('audit.operations.allActions')}</option>
-          {actions.map((a) => (
-            <option key={a.value} value={a.value}>
-              {a.label}
-            </option>
-          ))}
-        </select>
-
-        <Button
-          variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
-          onClick={() => refetchLogs()}
-        >
-          <RefreshCw className="h-4 w-4 mr-2" />
-          {t('common.refresh')}
-        </Button>
-        <Button
-          variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
-          onClick={handleExport}
-        >
-          <Download className="h-4 w-4 mr-2" />
-          {t('common.export')}
-        </Button>
+  const toolbar = (
+    <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 dg-text-muted" />
+        <Input
+          placeholder={t('audit.operations.searchPlaceholder')}
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          className="pl-9 h-9 dg-input"
+        />
       </div>
+      <select
+        value={moduleFilter}
+        onChange={(e) => setModuleFilter(e.target.value)}
+        className="h-9 px-3 text-sm rounded-md dg-input"
+      >
+        <option value="">{t('audit.operations.allModules')}</option>
+        {modules.map((m) => (
+          <option key={m.value} value={m.value}>{m.label}</option>
+        ))}
+      </select>
+      <select
+        value={actionFilter}
+        onChange={(e) => setActionFilter(e.target.value)}
+        className="h-9 px-3 text-sm rounded-md dg-input"
+      >
+        <option value="">{t('audit.operations.allActions')}</option>
+        {actions.map((a) => (
+          <option key={a.value} value={a.value}>{a.label}</option>
+        ))}
+      </select>
+    </div>
+  );
 
-      {/* Logs Table — 虚拟滚动 */}
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-0">
-          <div className="border-t border-slate-800">
-            {loading ? (
-              <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>
-            ) : filteredLogs.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
-                <Search className="h-8 w-8 mb-3 opacity-40" />
-                <p className="text-sm">{t('audit.operations.noData')}</p>
-              </div>
+  return (
+    <PageShell
+      variant="list"
+      title={t('audit.operations.title', { defaultValue: '操作审计' })}
+      subtitle={t('audit.operations.subtitle', { defaultValue: '系统操作日志筛选、导出与详情查看' })}
+      icon={<ClipboardList className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: t('audit.operations.allModules'), value: filteredLogs.length, color: 'blue' },
+            { label: t('common.success'), value: successCount, color: 'emerald' },
+            { label: t('common.failed'), value: failCount, color: 'red' },
+          ]}
+        />
+      )}
+      toolbar={toolbar}
+      actions={(
+        <>
+          <Button variant="outline" className="dg-btn-secondary" onClick={() => refetchLogs()}>
+            <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
+          </Button>
+          <Button variant="outline" className="dg-btn-secondary" onClick={handleExport}>
+            <Download className="h-4 w-4 mr-2" />{t('common.export')}
+          </Button>
+        </>
+      )}
+    >
+      <ContentPanel noPadding>
+          <div>
+            {!loading && filteredLogs.length === 0 ? (
+              <PageEmpty icon={<Search className="h-8 w-8" />} title={t('audit.operations.noData')} />
             ) : (
               <>
                 {/* 表头 */}
                 <div
-                  className="grid gap-2 px-4 py-2 border-b border-slate-800 bg-slate-900 text-xs font-medium text-slate-400 sticky top-0 z-10"
+                  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 sticky top-0 z-10"
                   style={{ gridTemplateColumns: GRID_COLS }}
                 >
                   <span>{t('audit.operations.col.time')}</span>
@@ -269,28 +270,28 @@ export function AuditOperationsTab() {
                             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">
                             {log.createdAt ? new Date(log.createdAt).toLocaleString() : '--'}
                           </span>
-                          <span className="text-sm text-slate-200 truncate">{log.username || '--'}</span>
-                          <span className="text-sm text-slate-300 truncate">{log.module || '--'}</span>
+                          <span className="text-sm text-[var(--dg-text-primary)] truncate">{log.username || '--'}</span>
+                          <span className="text-sm text-[var(--dg-text-secondary)] truncate">{log.module || '--'}</span>
                           <div>
-                            <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+                            <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
                               {log.action || '--'}
                             </Badge>
                           </div>
-                          <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded truncate">
+                          <code className="text-xs dg-text-secondary bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded truncate">
                             {log.resource || '--'}
                           </code>
-                          <span className="text-sm text-slate-400 truncate">{log.ip || '--'}</span>
+                          <span className="text-sm dg-text-secondary truncate">{log.ip || '--'}</span>
                           <div>{getLogResultBadge(log.result)}</div>
                           <div className="flex items-center justify-end">
                             <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={() => viewDetail(log)}
                               title={t('audit.operations.viewDetail')}
                             >
@@ -304,14 +305,13 @@ export function AuditOperationsTab() {
                 </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.operations.totalLogs', { count: filteredLogs.length })} {filteredLogs.length > 200 && `· ${t('audit.operations.virtualScroll')}`}
                 </div>
               </>
             )}
           </div>
-        </CardContent>
-      </Card>
+      </ContentPanel>
 
       {/* Detail Modal */}
       <LogDetailDialog log={detailLog} onClose={() => setDetailLog(null)} />
@@ -323,7 +323,7 @@ export function AuditOperationsTab() {
         loading={statsLoading}
         stats={statistics}
       />
-    </div>
+    </PageShell>
   );
 }
 
@@ -338,13 +338,13 @@ function LogDetailDialog({ log, onClose }: { log: OperationLog | null; onClose:
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      <div className="relative bg-slate-900 border border-slate-800 rounded-lg p-6 max-w-lg w-full mx-4 shadow-2xl">
+      <div className="relative dg-card rounded-lg p-6 max-w-lg w-full mx-4 shadow-2xl">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-slate-100">{t('audit.operations.detailTitle')}</h3>
+          <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{t('audit.operations.detailTitle')}</h3>
           <Button
             variant="ghost"
             size="icon"
-            className="h-7 w-7 text-slate-400 hover:text-slate-100"
+            className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
             onClick={onClose}
           >
             <X className="h-4 w-4" />
@@ -368,8 +368,8 @@ function LogDetailDialog({ log, onClose }: { log: OperationLog | null; onClose:
                 variant="outline"
                 className={
                   log.result === 'success'
-                    ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                    : 'border-red-500/30 text-red-400 bg-red-500/10'
+                    ? 'border-emerald-500/30 dg-text-green bg-emerald-500/10'
+                    : 'border-red-500/30 dg-text-red bg-red-500/10'
                 }
               >
                 {log.result === 'success' ? t('common.success') : t('common.failed')}
@@ -382,7 +382,7 @@ function LogDetailDialog({ log, onClose }: { log: OperationLog | null; onClose:
         <div className="mt-5 flex justify-end">
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300 hover:bg-slate-800"
+            className="dg-btn-secondary"
             onClick={onClose}
           >
             {t('common.close')}
@@ -396,8 +396,8 @@ function LogDetailDialog({ log, onClose }: { log: OperationLog | null; onClose:
 function DetailRow({ label, value, mono }: { label: string; value: React.ReactNode; mono?: boolean }) {
   return (
     <div className="flex items-start gap-4">
-      <span className="text-slate-500 w-20 flex-shrink-0">{label}</span>
-      <span className={mono ? 'text-slate-300 font-mono text-xs break-all' : 'text-slate-200 break-all'}>
+      <span className="dg-text-muted w-20 flex-shrink-0">{label}</span>
+      <span className={mono ? 'text-[var(--dg-text-secondary)] font-mono text-xs break-all' : 'text-[var(--dg-text-primary)] break-all'}>
         {value}
       </span>
     </div>
@@ -425,13 +425,13 @@ function StatisticsDialog({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      <div className="relative bg-slate-900 border border-slate-800 rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
+      <div className="relative dg-card rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-slate-100">{t('audit.operations.statsTitle')}</h3>
+          <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{t('audit.operations.statsTitle')}</h3>
           <Button
             variant="ghost"
             size="icon"
-            className="h-7 w-7 text-slate-400 hover:text-slate-100"
+            className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
             onClick={onClose}
           >
             <X className="h-4 w-4" />
@@ -453,12 +453,12 @@ function StatisticsDialog({
 
             {stats.top_modules && stats.top_modules.length > 0 && (
               <div>
-                <h4 className="text-xs font-semibold text-slate-400 mb-2">{t('audit.operations.topModules')}</h4>
+                <h4 className="text-xs font-semibold dg-text-secondary mb-2">{t('audit.operations.topModules')}</h4>
                 <div className="space-y-1">
                   {stats.top_modules.slice(0, 5).map((m, i) => (
                     <div key={i} className="flex justify-between text-xs">
-                      <span className="text-slate-300">{m.module}</span>
-                      <span className="text-slate-500">{m.count}</span>
+                      <span className="text-[var(--dg-text-secondary)]">{m.module}</span>
+                      <span className="dg-text-muted">{m.count}</span>
                     </div>
                   ))}
                 </div>
@@ -467,12 +467,12 @@ function StatisticsDialog({
 
             {stats.top_users && stats.top_users.length > 0 && (
               <div>
-                <h4 className="text-xs font-semibold text-slate-400 mb-2">{t('audit.operations.topUsers')}</h4>
+                <h4 className="text-xs font-semibold dg-text-secondary mb-2">{t('audit.operations.topUsers')}</h4>
                 <div className="space-y-1">
                   {stats.top_users.slice(0, 5).map((u, i) => (
                     <div key={i} className="flex justify-between text-xs">
-                      <span className="text-slate-300">{u.username}</span>
-                      <span className="text-slate-500">{u.count}</span>
+                      <span className="text-[var(--dg-text-secondary)]">{u.username}</span>
+                      <span className="dg-text-muted">{u.count}</span>
                     </div>
                   ))}
                 </div>
@@ -480,13 +480,13 @@ function StatisticsDialog({
             )}
           </div>
         ) : (
-          <p className="text-slate-500 text-center py-10 text-sm">{t('audit.operations.noStats')}</p>
+          <p className="dg-text-muted text-center py-10 text-sm">{t('audit.operations.noStats')}</p>
         )}
 
         <div className="mt-5 flex justify-end">
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300 hover:bg-slate-800"
+            className="dg-btn-secondary"
             onClick={onClose}
           >
             {t('common.close')}
@@ -499,13 +499,13 @@ function StatisticsDialog({
 
 function StatCard({ label, value, color }: { label: string; value: string; color: 'blue' | 'emerald' | 'red' }) {
   const colorMap = {
-    blue: 'border-blue-500/20 bg-blue-500/5 text-blue-400',
-    emerald: 'border-emerald-500/20 bg-emerald-500/5 text-emerald-400',
-    red: 'border-red-500/20 bg-red-500/5 text-red-400',
+    blue: 'border-blue-500/20 bg-blue-500/5 dg-text-blue',
+    emerald: 'border-emerald-500/20 bg-emerald-500/5 dg-text-green',
+    red: 'border-red-500/20 bg-red-500/5 dg-text-red',
   };
   return (
     <div className={`rounded-lg border p-3 ${colorMap[color]}`}>
-      <div className="text-xs text-slate-500">{label}</div>
+      <div className="text-xs dg-text-muted">{label}</div>
       <div className="text-xl font-bold mt-0.5">{value}</div>
     </div>
   );
diff --git a/frontend/src/pages/audit/LoginLogsTab.tsx b/frontend/src/pages/audit/LoginLogsTab.tsx
index 52014bb..61c7667 100644
--- a/frontend/src/pages/audit/LoginLogsTab.tsx
+++ b/frontend/src/pages/audit/LoginLogsTab.tsx
@@ -1,12 +1,14 @@
 // 登录日志 Tab — 用户登录记录列表（参考 opsx-web-lite）
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
 import { RefreshCw, LogIn, Monitor, Globe } from 'lucide-react';
 import { loginLogApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 interface LoginLog {
@@ -85,7 +87,7 @@ export function LoginLogsTab() {
     {
       key: 'login_type', header: t('audit.login.col.loginType'), width: 100,
       render: (r) => (
-        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 text-xs">
+        <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 text-xs">
           {getLoginTypeLabel(r.login_type)}
         </Badge>
       ),
@@ -119,54 +121,64 @@ export function LoginLogsTab() {
     {
       key: 'status', header: t('audit.login.col.status'), sortable: true, width: 80, align: 'center',
       render: (r) => r.status === 'success' ? (
-        <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">{t('common.success')}</Badge>
+        <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">{t('common.success')}</Badge>
       ) : (
-        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10" title={r.fail_reason || undefined}>
+        <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10" title={r.fail_reason || undefined}>
           {r.fail_reason || t('common.failed')}
         </Badge>
       ),
     },
   ];
 
-  return (
-    <div className="space-y-4">
-      {/* Status Filter + Refresh */}
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <div className="flex items-center gap-1">
-          {[
-            { value: '', label: t('audit.login.all') },
-            { value: 'success', label: t('common.success') },
-            { value: 'fail', label: t('common.failed') },
-          ].map(({ value, label }) => (
-            <Button
-              key={value || 'all'}
-              variant={statusFilter === value ? 'default' : 'outline'}
-              size="sm"
-              className={
-                statusFilter === value
-                  ? 'h-8 bg-blue-600 hover:bg-blue-700 text-white'
-                  : 'h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
-              }
-              onClick={() => setStatusFilter(value)}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-          onClick={fetchLogs}
-        >
-          <RefreshCw className="h-4 w-4 mr-2" />
-          {t('common.refresh')}
-        </Button>
-      </div>
+  const successCount = logs.filter(l => l.status === 'success').length;
+  const failCount = logs.filter(l => l.status === 'fail').length;
 
-      {/* DataTable */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-4">
+  const toolbar = (
+    <div className="flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex items-center gap-1">
+        {[
+          { value: '', label: t('audit.login.all') },
+          { value: 'success', label: t('common.success') },
+          { value: 'fail', label: t('common.failed') },
+        ].map(({ value, label }) => (
+          <Button
+            key={value || 'all'}
+            variant={statusFilter === value ? 'default' : 'outline'}
+            size="sm"
+            className={statusFilter === value ? 'h-8 dg-btn-primary' : 'h-8 dg-btn-secondary'}
+            onClick={() => setStatusFilter(value)}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <PageShell
+      variant="list"
+      title={t('audit.login.title', { defaultValue: '登录日志' })}
+      subtitle={t('audit.login.subtitle', { defaultValue: '用户登录记录与失败原因' })}
+      icon={<LogIn className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: t('audit.login.all'), value: logs.length, color: 'blue' },
+            { label: t('common.success'), value: successCount, color: 'emerald' },
+            { label: t('common.failed'), value: failCount, color: 'red' },
+          ]}
+        />
+      )}
+      toolbar={toolbar}
+      actions={(
+        <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchLogs}>
+          <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
+        </Button>
+      )}
+    >
+      <ContentPanel>
           <DataTable
             columns={columns}
             data={logs}
@@ -189,8 +201,7 @@ export function LoginLogsTab() {
               </div>
             )}
           />
-        </CardContent>
-      </Card>
-    </div>
+      </ContentPanel>
+    </PageShell>
   );
 }
diff --git a/frontend/src/pages/audit/TerminalAuditTab.tsx b/frontend/src/pages/audit/TerminalAuditTab.tsx
index 8573601..91538a4 100644
--- a/frontend/src/pages/audit/TerminalAuditTab.tsx
+++ b/frontend/src/pages/audit/TerminalAuditTab.tsx
@@ -2,48 +2,35 @@
 
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { cn } from '@/lib/utils';
-import { Activity, Monitor, Search } from 'lucide-react';
+import { Terminal } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { ActiveSessionsPanel } from './terminal-audit/ActiveSessionsPanel';
 import { HistorySessionsPanel } from './terminal-audit/HistorySessionsPanel';
 import { SessionCommandsPanel } from './terminal-audit/SessionCommandsPanel';
 import type { SubTabId } from './terminal-audit/types';
 
 const subTabIds: SubTabId[] = ['active', 'history', 'commands'];
-const subTabIcons: Record<SubTabId, React.ElementType> = {
-  active: Activity,
-  history: Monitor,
-  commands: Search,
-};
 
 export function TerminalAuditTab() {
   const { t } = useTranslation();
   const [subTab, setSubTab] = useState<SubTabId>('active');
   const [userToggledOff, setUserToggledOff] = useState(false);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex gap-1 bg-[var(--dg-bg-secondary)] p-1 rounded-lg border border-[var(--dg-border)] w-fit">
-        {subTabIds.map((id) => {
-          const Icon = subTabIcons[id];
-          return (
-            <button
-              key={id}
-              onClick={() => setSubTab(id)}
-              className={cn(
-                'flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all',
-                subTab === id
-                  ? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] shadow-sm'
-                  : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]',
-              )}
-            >
-              <Icon className="h-4 w-4" />
-              {t(`audit.terminal.tab.${id}`)}
-            </button>
-          );
-        })}
-      </div>
+  const pageTabs = subTabIds.map((id) => ({
+    id,
+    label: t(`audit.terminal.tab.${id}`),
+  }));
 
+  return (
+    <PageShell
+      variant="list"
+      title={t('audit.terminal.title', { defaultValue: '终端审计' })}
+      subtitle={t('audit.terminal.subtitle', { defaultValue: '活跃会话、历史记录与命令审计' })}
+      icon={<Terminal className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={subTab}
+      onTabChange={(id) => setSubTab(id as SubTabId)}
+    >
       {subTab === 'active' && (
         <ActiveSessionsPanel
           userToggledOff={userToggledOff}
@@ -52,6 +39,6 @@ export function TerminalAuditTab() {
       )}
       {subTab === 'history' && <HistorySessionsPanel />}
       {subTab === 'commands' && <SessionCommandsPanel />}
-    </div>
+    </PageShell>
   );
 }
diff --git a/frontend/src/pages/audit/terminal-audit/ActiveSessionsPanel.tsx b/frontend/src/pages/audit/terminal-audit/ActiveSessionsPanel.tsx
index b2aa2ea..212bd2f 100644
--- a/frontend/src/pages/audit/terminal-audit/ActiveSessionsPanel.tsx
+++ b/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>
diff --git a/frontend/src/pages/audit/terminal-audit/HistorySessionsPanel.tsx b/frontend/src/pages/audit/terminal-audit/HistorySessionsPanel.tsx
index 48d73f8..407de74 100644
--- a/frontend/src/pages/audit/terminal-audit/HistorySessionsPanel.tsx
+++ b/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>
diff --git a/frontend/src/pages/audit/terminal-audit/SessionCommandsPanel.tsx b/frontend/src/pages/audit/terminal-audit/SessionCommandsPanel.tsx
index 9887b2d..492c4ed 100644
--- a/frontend/src/pages/audit/terminal-audit/SessionCommandsPanel.tsx
+++ b/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')}`}
diff --git a/frontend/src/pages/audit/terminal-audit/helpers.tsx b/frontend/src/pages/audit/terminal-audit/helpers.tsx
index b276b3d..3faf846 100644
--- a/frontend/src/pages/audit/terminal-audit/helpers.tsx
+++ b/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>
   );
diff --git a/frontend/src/pages/monitor/HostMonitor.tsx b/frontend/src/pages/monitor/HostMonitor.tsx
index 3a30da6..a0559bf 100644
--- a/frontend/src/pages/monitor/HostMonitor.tsx
+++ b/frontend/src/pages/monitor/HostMonitor.tsx
@@ -8,11 +8,13 @@ import { useHostList, useHostHistory, usePortPolicy } from '@/hooks/api/useHostM
 import { queryKeys } from '@/hooks/api/queryKeys';
 import { Card, CardContent } from '@/components/ui/card';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageLoading } from '@/components/layout/PageLoading';
 import {
-  Cpu, HardDrive, Network, Activity, Server, Loader2,
+  Cpu, HardDrive, Network, Activity, Server,
   Info, Monitor, Disc, Clock, List, HeartPulse, RefreshCw, XCircle,
 } from 'lucide-react';
 import {
@@ -27,7 +29,7 @@ import { PortPolicyDialog } from './host-monitor/PortPolicyDialog';
 import { SystemInfoSection } from './host-monitor/SystemInfoSection';
 import type { JsonData } from '@/types/common';
 
-export function HostMonitor() {
+export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
   const qc = useQueryClient();
   const [searchParams] = useSearchParams();
   const urlHost = searchParams.get('host') || '';
@@ -95,111 +97,108 @@ export function HostMonitor() {
   const currentVal = (key: string, fallback = '--') =>
     getCurrentVal(latest, netInfo, diskIOInfo, swapInfo, fdInfo, key, fallback);
 
-  if (loading && !history.length) {
-    return <div className="flex items-center justify-center h-64"><Loader2 className="h-8 w-8 animate-spin text-slate-500" /></div>;
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between flex-wrap gap-2">
-        <div className="flex items-center gap-2">
-          <Server className="h-4 w-4 text-blue-400" />
-          <Select value={selectedHost} onValueChange={setSelectedHost}>
-            <SelectTrigger className="w-52 h-8 text-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-              <SelectValue placeholder="选择主机..." />
-            </SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
-              {hosts.map((h: JsonData) => (
-                <SelectItem key={h.hostname} value={h.hostname}>{h.hostname}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {serverInfo && (
-            <span className="text-xs text-[var(--dg-text-muted)] ml-2">
-              {String(serverInfo.os || '')}{serverInfo.cpu_cores ? ` | ${serverInfo.cpu_cores as number | string} 核` : ''}{serverInfo.mem_total ? ` | ${(serverInfo.mem_total as number).toFixed(0)}GB` : ''}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <Select value={aggType} onValueChange={(v) => setAggType(v as AggType)}>
-            <SelectTrigger className="w-24 h-7 text-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
-              <SelectItem value="avg">平均值</SelectItem>
-              <SelectItem value="max">最大值</SelectItem>
-              <SelectItem value="min">最小值</SelectItem>
-            </SelectContent>
-          </Select>
-          <div className="flex items-center gap-1">
-            {TIME_RANGES.map(tr => (
-              <Button key={tr.hours} variant={rangeHours === tr.hours ? 'default' : 'outline'} size="sm"
-                className="h-7 text-xs px-2.5" onClick={() => setRangeHours(tr.hours)}>{tr.label}</Button>
+  const toolbar = (
+    <div className="flex items-center justify-between flex-wrap gap-2 w-full">
+      <div className="flex items-center gap-2">
+        <Select value={selectedHost} onValueChange={setSelectedHost}>
+          <SelectTrigger className="w-52 h-8 text-xs dg-input">
+            <SelectValue placeholder="选择主机..." />
+          </SelectTrigger>
+          <SelectContent className="dg-input">
+            {hosts.map((h: JsonData) => (
+              <SelectItem key={h.hostname} value={h.hostname}>{h.hostname}</SelectItem>
             ))}
-          </div>
+          </SelectContent>
+        </Select>
+        {serverInfo && (
+          <span className="text-xs dg-text-muted">
+            {String(serverInfo.os || '')}{serverInfo.cpu_cores ? ` | ${serverInfo.cpu_cores as number | string} 核` : ''}{serverInfo.mem_total ? ` | ${(serverInfo.mem_total as number).toFixed(0)}GB` : ''}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Select value={aggType} onValueChange={(v) => setAggType(v as AggType)}>
+          <SelectTrigger className="w-24 h-7 text-xs dg-input">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="dg-input">
+            <SelectItem value="avg">平均值</SelectItem>
+            <SelectItem value="max">最大值</SelectItem>
+            <SelectItem value="min">最小值</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="flex items-center gap-1">
+          {TIME_RANGES.map(tr => (
+            <Button key={tr.hours} variant={rangeHours === tr.hours ? 'default' : 'outline'} size="sm"
+              className={`h-7 text-xs px-2.5 ${rangeHours === tr.hours ? 'dg-btn-primary' : 'dg-btn-secondary'}`}
+              onClick={() => setRangeHours(tr.hours)}>{tr.label}</Button>
+          ))}
         </div>
       </div>
+    </div>
+  );
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0 overflow-x-auto">
-          {[
-            { id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" /> },
-            { id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" /> },
-            { id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" /> },
-            { id: 'ports', label: '端口监控', icon: <Server className="w-3 h-3" /> },
-            { id: 'process', label: '进程监控', icon: <List className="w-3 h-3" /> },
-            { id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" /> },
-            { id: 'health_probes', label: '健康探针', icon: <HeartPulse className="w-3 h-3" /> },
-          ].map(tab => (
-            <TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1 data-[state=active]:bg-[var(--dg-bg-primary)]">
-              {tab.icon}{tab.label}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+  const monitorBody = (
+    <Tabs value={activeTab} onValueChange={setActiveTab}>
+      <TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0 overflow-x-auto">
+        {[
+          { id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" /> },
+          { id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" /> },
+          { id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" /> },
+          { id: 'ports', label: '端口监控', icon: <Server className="w-3 h-3" /> },
+          { id: 'process', label: '进程监控', icon: <List className="w-3 h-3" /> },
+          { id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" /> },
+          { id: 'health_probes', label: '健康探针', icon: <HeartPulse className="w-3 h-3" /> },
+        ].map(tab => (
+          <TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1 data-[state=active]:bg-[var(--dg-bg-primary)]">
+            {tab.icon}{tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
 
-        <TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
-          <MetricChartCard title="CPU 使用率(%)" value={currentVal('cpu')} icon={<Cpu className="h-4 w-4 text-blue-400" />}
+      <TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
+          <MetricChartCard title="CPU 使用率(%)" value={currentVal('cpu')} icon={<Cpu className="h-4 w-4 dg-text-blue" />}
             data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType} />
-          <MetricChartCard title="CPU IO等待(%)" value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock className="h-4 w-4 text-orange-400" />}
+          <MetricChartCard title="CPU IO等待(%)" value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock className="h-4 w-4 dg-text-orange" />}
             data={metrics.iowait} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} />
-          <MetricChartCard title="内存使用率(%)" value={currentVal('mem')} icon={<Server className="h-4 w-4 text-emerald-400" />}
+          <MetricChartCard title="内存使用率(%)" value={currentVal('mem')} icon={<Server className="h-4 w-4 dg-text-green" />}
             data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType} />
-          <MetricChartCard title="可用内存(GB)" value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server className="h-4 w-4 text-emerald-400" />}
+          <MetricChartCard title="可用内存(GB)" value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server className="h-4 w-4 dg-text-green" />}
             data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
-          <MetricChartCard title="Swap 使用率(%)" value={currentVal('swap')} icon={<HardDrive className="h-4 w-4 text-red-400" />}
+          <MetricChartCard title="Swap 使用率(%)" value={currentVal('swap')} icon={<HardDrive className="h-4 w-4 dg-text-red" />}
             data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
-          <MetricChartCard title="系统负载(1m)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 text-purple-400" />}
+          <MetricChartCard title="系统负载(1m)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 dg-text-purple" />}
             data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
         </TabsContent>
 
         <TabsContent value="disk" className="mt-3 space-y-3">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-            <MetricChartCard title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive className="h-4 w-4 text-orange-400" />}
+            <MetricChartCard title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive className="h-4 w-4 dg-text-orange" />}
               data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} />
             <MetricChartCard title="Inode 使用率(%)" value={(() => {
               const dArr = Array.isArray(parseJSON(latest?.disk_info)) ? parseJSON(latest?.disk_info) : [];
               const root = dArr.find((d: JsonData) => d.mount === '/') || dArr[0];
               return root?.inode_usage_pct != null ? `${root.inode_usage_pct.toFixed(1)}%` : '--';
-            })()} icon={<HardDrive className="h-4 w-4 text-purple-400" />}
+            })()} icon={<HardDrive className="h-4 w-4 dg-text-purple" />}
               data={metrics.inode} color="#8b5cf6" unit="%" domain={[0, 100]} aggType={aggType} />
-            <MetricChartCard title="磁盘读取(KB/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 text-blue-400" />}
+            <MetricChartCard title="磁盘读取(KB/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 dg-text-blue" />}
               data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="磁盘写入(KB/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 text-emerald-400" />}
+            <MetricChartCard title="磁盘写入(KB/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 dg-text-green" />}
               data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="磁盘IO繁忙度(%)" value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc className="h-4 w-4 text-red-400" />}
+            <MetricChartCard title="磁盘IO繁忙度(%)" value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc className="h-4 w-4 dg-text-red" />}
               data={metrics.ioUtil} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
           </div>
         </TabsContent>
 
         <TabsContent value="network" className="mt-3 space-y-3">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-            <MetricChartCard title="TCP EST" value={currentVal('tcp')} icon={<Network className="h-4 w-4 text-purple-400" />}
+            <MetricChartCard title="TCP EST" value={currentVal('tcp')} icon={<Network className="h-4 w-4 dg-text-purple" />}
               data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="TCP TIME_WAIT" value={currentVal('tw')} icon={<Clock className="h-4 w-4 text-amber-400" />}
+            <MetricChartCard title="TCP TIME_WAIT" value={currentVal('tw')} icon={<Clock className="h-4 w-4 dg-text-yellow" />}
               data={metrics.tcpTW} color="#f59e0b" unit="个" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="TCP CLOSE_WAIT" value={netInfo?.tcp_close_wait != null ? String(netInfo.tcp_close_wait) : '--'} icon={<Clock className="h-4 w-4 text-red-400" />}
+            <MetricChartCard title="TCP CLOSE_WAIT" value={netInfo?.tcp_close_wait != null ? String(netInfo.tcp_close_wait) : '--'} icon={<Clock className="h-4 w-4 dg-text-red" />}
               data={metrics.tcpCW} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="TCP 总连接" value={netInfo ? String((netInfo.tcp_established||0)+(netInfo.tcp_time_wait||0)+(netInfo.tcp_close_wait||0)) : '--'} icon={<Network className="h-4 w-4 text-cyan-400" />}
+            <MetricChartCard title="TCP 总连接" value={netInfo ? String((netInfo.tcp_established||0)+(netInfo.tcp_time_wait||0)+(netInfo.tcp_close_wait||0)) : '--'} icon={<Network className="h-4 w-4 dg-text-cyan" />}
               data={metrics.connTotal} color="#22d3ee" unit="个" domain={[0, 'auto']} aggType={aggType} />
           </div>
           <DualLineChart
@@ -210,9 +209,9 @@ export function HostMonitor() {
             aggType={aggType} unit="KB/s"
           />
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
-            <MetricChartCard title="网卡接收错误" value={netInfo?.net_rx_errors != null ? String(netInfo.net_rx_errors) : '--'} icon={<XCircle className="h-4 w-4 text-red-400" />}
+            <MetricChartCard title="网卡接收错误" value={netInfo?.net_rx_errors != null ? String(netInfo.net_rx_errors) : '--'} icon={<XCircle className="h-4 w-4 dg-text-red" />}
               data={metrics.rxErr} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
-            <MetricChartCard title="网卡发送错误" value={netInfo?.net_tx_errors != null ? String(netInfo.net_tx_errors) : '--'} icon={<XCircle className="h-4 w-4 text-orange-400" />}
+            <MetricChartCard title="网卡发送错误" value={netInfo?.net_tx_errors != null ? String(netInfo.net_tx_errors) : '--'} icon={<XCircle className="h-4 w-4 dg-text-orange" />}
               data={metrics.txErr} color="#f97316" unit="个" domain={[0, 'auto']} aggType={aggType} />
           </div>
         </TabsContent>
@@ -221,15 +220,15 @@ export function HostMonitor() {
           <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardContent className="p-4">
               <h3 className="text-xs font-medium text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
-                <Server className="h-4 w-4 text-emerald-400" />监听端口 {portInfo.length}
+                <Server className="h-4 w-4 dg-text-green" />监听端口 {portInfo.length}
                 <span className="ml-auto flex items-center gap-2">
                   {portPolicyMode === 'blacklist' && portWhitelist.length > 0 && (
-                    <Badge variant="outline" className="text-[10px] text-amber-400 border-amber-500/30">
+                    <Badge variant="outline" className="text-[10px] dg-text-yellow border-amber-500/30">
                       黑名单: {portWhitelist.join(',')}
                     </Badge>
                   )}
                   {portPolicyMode === 'whitelist' && (
-                    <Badge variant="outline" className="text-[10px] text-blue-400 border-blue-500/30">
+                    <Badge variant="outline" className="text-[10px] dg-text-blue border-blue-500/30">
                       白名单模式
                     </Badge>
                   )}
@@ -256,7 +255,7 @@ export function HostMonitor() {
                     </thead>
                     <tbody>
                       {portInfo.map((p: JsonData, i: number) => (
-                        <tr key={i} className="border-b border-[var(--dg-border)]/30 hover:bg-slate-800/30 transition-colors">
+                        <tr key={i} className="border-b border-[var(--dg-border)]/30 hover:bg-[var(--dg-bg-hover)] transition-colors">
                           <td className="py-1.5 font-mono text-[var(--dg-text-primary)]">{p.port}</td>
                           <td className="py-1.5">
                             <Badge variant="outline" className="text-[10px] font-mono">
@@ -265,7 +264,7 @@ export function HostMonitor() {
                           </td>
                           <td className="py-1.5 font-mono text-[var(--dg-text-muted)]">{p.process || '—'}</td>
                           <td className="py-1.5 text-right">
-                            <Badge variant="default" className="text-[10px] bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
+                            <Badge variant="default" className="text-[10px] bg-emerald-500/20 dg-text-green border-emerald-500/30">
                               LISTEN
                             </Badge>
                           </td>
@@ -283,7 +282,7 @@ export function HostMonitor() {
           <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardContent className="p-4">
               <h3 className="text-xs font-medium text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
-                <List className="h-4 w-4 text-cyan-400" />进程 TOP {processTop.length}
+                <List className="h-4 w-4 dg-text-cyan" />进程 TOP {processTop.length}
               </h3>
               {processTop.length === 0 ? (
                 <div className="text-center py-6 text-xs text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-lg">
@@ -307,14 +306,14 @@ export function HostMonitor() {
                         const cpup = p.cpu_pct != null ? Number(p.cpu_pct) : null;
                         const memp = p.mem_pct != null ? Number(p.mem_pct) : null;
                         return (
-                          <tr key={i} className="border-b border-[var(--dg-border)]/30 hover:bg-slate-800/30 transition-colors">
+                          <tr key={i} className="border-b border-[var(--dg-border)]/30 hover:bg-[var(--dg-bg-hover)] transition-colors">
                             <td className="py-1.5 pr-2">
                               <div className="flex items-center gap-1 group/cmd">
                                 <span className="font-mono text-[var(--dg-text-primary)] truncate max-w-[320px] inline-block align-middle" title={cmd}>
                                   {cmd}
                                 </span>
                                 <button
-                                  className="opacity-0 group-hover/cmd:opacity-100 transition-opacity p-0.5 hover:text-cyan-400 shrink-0"
+                                  className="opacity-0 group-hover/cmd:opacity-100 transition-opacity p-0.5 hover:dg-text-cyan shrink-0"
                                   title="复制命令行"
                                   onClick={async (e) => {
                                     e.stopPropagation();
@@ -337,7 +336,7 @@ export function HostMonitor() {
                             </td>
                             <td className="py-1.5 text-right font-mono text-[var(--dg-text-muted)]">{p.pid}</td>
                             <td className="py-1.5 text-right font-mono">
-                              <span className={memp != null && memp > 50 ? 'text-rose-400' : 'text-cyan-400'}>
+                              <span className={memp != null && memp > 50 ? 'text-rose-400' : 'dg-text-cyan'}>
                                 {memp != null ? memp.toFixed(2) : '--'}
                               </span>
                             </td>
@@ -361,7 +360,7 @@ export function HostMonitor() {
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-4">
                 <h3 className="text-xs font-medium text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
-                  <HardDrive className="h-4 w-4 text-violet-400" />FD 文件句柄
+                  <HardDrive className="h-4 w-4 dg-text-purple" />FD 文件句柄
                 </h3>
                 {fdInfo?.allocated != null ? (
                   <>
@@ -376,7 +375,7 @@ export function HostMonitor() {
                       </div>
                       <div>
                         <span className="text-[var(--dg-text-muted)]">使用率 </span>
-                        <span className={`font-mono font-semibold ${fdInfo.usage_pct > 80 ? 'text-rose-400' : 'text-violet-400'}`}>
+                        <span className={`font-mono font-semibold ${fdInfo.usage_pct > 80 ? 'text-rose-400' : 'dg-text-purple'}`}>
                           {fdInfo.usage_pct != null ? `${fdInfo.usage_pct.toFixed(1)}%` : '—'}
                         </span>
                       </div>
@@ -410,21 +409,21 @@ export function HostMonitor() {
             <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
               <CardContent className="p-4">
                 <h3 className="text-xs font-medium text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
-                  <RefreshCw className="h-4 w-4 text-emerald-400" />上下文切换
+                  <RefreshCw className="h-4 w-4 dg-text-green" />上下文切换
                 </h3>
                 {csInfo?.ctx_per_sec != null ? (
                   <div className="space-y-4">
                     <div className="grid grid-cols-2 gap-4">
                       <div className="bg-[var(--dg-bg-primary)] rounded-lg p-3 text-center">
                         <div className="text-[10px] text-[var(--dg-text-muted)] mb-1">CTX 切换/秒</div>
-                        <div className="text-lg font-bold font-mono text-emerald-400">
+                        <div className="text-lg font-bold font-mono dg-text-green">
                           {(csInfo.ctx_per_sec / 1e6).toFixed(1)}<span className="text-xs font-normal text-[var(--dg-text-muted)] ml-0.5">M</span>
                         </div>
                         <div className="text-[10px] text-[var(--dg-text-muted)] mt-1 font-mono">{csInfo.ctx_per_sec?.toLocaleString()} 次</div>
                       </div>
                       <div className="bg-[var(--dg-bg-primary)] rounded-lg p-3 text-center">
                         <div className="text-[10px] text-[var(--dg-text-muted)] mb-1">IRQ 中断/秒</div>
-                        <div className="text-lg font-bold font-mono text-amber-400">
+                        <div className="text-lg font-bold font-mono dg-text-yellow">
                           {(csInfo.irq_per_sec / 1e6).toFixed(1)}<span className="text-xs font-normal text-[var(--dg-text-muted)] ml-0.5">M</span>
                         </div>
                         <div className="text-[10px] text-[var(--dg-text-muted)] mt-1 font-mono">{csInfo.irq_per_sec?.toLocaleString()} 次</div>
@@ -432,8 +431,8 @@ export function HostMonitor() {
                     </div>
                     <div className="space-y-1">
                       <div className="flex justify-between text-[10px]">
-                        <span className="text-emerald-400">CTX</span>
-                        <span className="text-amber-400">IRQ</span>
+                        <span className="dg-text-green">CTX</span>
+                        <span className="dg-text-yellow">IRQ</span>
                       </div>
                       <div className="h-2 bg-[var(--dg-bg-primary)] rounded-full overflow-hidden flex">
                         {csInfo.ctx_per_sec + csInfo.irq_per_sec > 0 && (
@@ -463,19 +462,46 @@ export function HostMonitor() {
           portInfoCount={portInfo.length}
         />
 
-        <HealthProbeSection selectedHost={selectedHost} />
-      </Tabs>
+      <HealthProbeSection selectedHost={selectedHost} />
+    </Tabs>
+  );
 
-      <PortPolicyDialog
-        open={portPolicyDialogOpen}
-        onOpenChange={setPortPolicyDialogOpen}
-        portPolicyMode={portPolicyMode}
-        onModeChange={setPortPolicyMode}
-        portWhitelist={portWhitelist}
-        onWhitelistChange={setPortWhitelist}
-        onSave={handleSavePortPolicy}
-        saving={portPolicySaving}
-      />
-    </div>
+  const dialogs = (
+    <PortPolicyDialog
+      open={portPolicyDialogOpen}
+      onOpenChange={setPortPolicyDialogOpen}
+      portPolicyMode={portPolicyMode}
+      onModeChange={setPortPolicyMode}
+      portWhitelist={portWhitelist}
+      onWhitelistChange={setPortWhitelist}
+      onSave={handleSavePortPolicy}
+      saving={portPolicySaving}
+    />
+  );
+
+  if (embedded) {
+    return (
+      <div className="space-y-3">
+        {toolbar}
+        {loading && !history.length ? <PageLoading /> : monitorBody}
+        {dialogs}
+      </div>
+    );
+  }
+
+  return (
+    <PageShell
+      variant="workspace"
+      title="主机监控"
+      subtitle={selectedHost ? `当前主机: ${selectedHost}` : '选择主机查看监控指标'}
+      icon={<Server className="h-5 w-5" />}
+      toolbar={toolbar}
+      loading={loading && !history.length}
+      loadingLabel="加载监控数据..."
+      contentClassName="space-y-3"
+    >
+      {monitorBody}
+      {dialogs}
+    </PageShell>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/monitor/MetricsExplorer.tsx b/frontend/src/pages/monitor/MetricsExplorer.tsx
index 20b209a..e1befc4 100644
--- a/frontend/src/pages/monitor/MetricsExplorer.tsx
+++ b/frontend/src/pages/monitor/MetricsExplorer.tsx
@@ -6,14 +6,10 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Activity, Search, Filter, BarChart3, Cpu, HardDrive, Network, Database, Plus } from 'lucide-react';
 import { metricsApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
-interface _MetricName {
-  name: string;
-  category: string;
-  data_source: string;
-}
-
 interface TargetInfo {
   id: number;
   name: string;
@@ -49,7 +45,6 @@ export function MetricsExplorer() {
   const [loading, setLoading] = useState(true);
   const [searchKw, setSearchKw] = useState('');
 
-  // Load targets
   const loadTargets = useCallback(async () => {
     try {
       const res: JsonData = await metricsApi.getTargets({ page_size: 200 });
@@ -58,7 +53,6 @@ export function MetricsExplorer() {
     finally { setLoading(false); }
   }, []);
 
-  // Load metric names
   const loadMetricNames = useCallback(async () => {
     try {
       const names: string[] = await metricsApi.getNames();
@@ -66,16 +60,15 @@ export function MetricsExplorer() {
     } catch { /* empty */ }
   }, []);
 
-  useEffect(() => { loadTargets(); loadMetricNames(); }, []);
+  useEffect(() => { loadTargets(); loadMetricNames(); }, [loadTargets, loadMetricNames]);
 
-  // Query metric data when target + metrics selected
   useEffect(() => {
     if (!selectedTarget || selectedMetrics.length === 0) return;
     const target = targets.find(t => String(t.id) === selectedTarget);
     if (!target) return;
 
     const to = Math.floor(Date.now() / 1000);
-    const from = to - 3600; // last hour
+    const from = to - 3600;
 
     Promise.all(
       selectedMetrics.map(mn =>
@@ -88,15 +81,12 @@ export function MetricsExplorer() {
     });
   }, [selectedTarget, selectedMetrics, targets]);
 
-  // Filter metric names by search
   const filteredMetrics = searchKw
     ? metricNames.filter(n => n.toLowerCase().includes(searchKw.toLowerCase()))
     : metricNames;
 
-  // Selected target info
   const target = targets.find(t => String(t.id) === selectedTarget);
 
-  // Group metrics by category
   const grouped = filteredMetrics.reduce((acc: Record<string, string[]>, name) => {
     const cat = name.split('_')[0] || 'other';
     if (!acc[cat]) acc[cat] = [];
@@ -104,7 +94,6 @@ export function MetricsExplorer() {
     return acc;
   }, {});
 
-  // Merge query results into time-aligned data
   const timeMap: Record<number, Record<string, number>> = {};
   queryResults.forEach(pt => {
     if (!timeMap[pt.timestamp]) timeMap[pt.timestamp] = {};
@@ -115,61 +104,68 @@ export function MetricsExplorer() {
 
   const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#f97316'];
 
-  return (
-    <div className="space-y-6">
-      {/* Toolbar */}
-      <div className="flex items-center gap-4 flex-wrap">
-        <Select value={selectedTarget} onValueChange={setSelectedTarget}>
-          <SelectTrigger className="w-64 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-            <SelectValue placeholder={loading ? '加载中...' : '选择监控目标...'} />
-          </SelectTrigger>
-          <SelectContent className="bg-slate-800 border-slate-700 text-slate-200 max-h-80">
-            {targets.map(t => (
-              <SelectItem key={t.id} value={String(t.id)}>
-                <span className="flex items-center gap-2">
-                  <span className={`inline-block w-1.5 h-1.5 rounded-full ${t.status === 'online' ? 'bg-emerald-400' : 'bg-slate-500'}`} />
-                  {t.name} ({t.ip || t.type})
-                </span>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <div className="relative flex-1 max-w-sm">
-          <Search className="absolute left-2.5 top-2 h-4 w-4 text-slate-500" />
-          <Input
-            className="pl-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"
-            placeholder="搜索指标..."
-            value={searchKw}
-            onChange={(e) => setSearchKw(e.target.value)}
-          />
-        </div>
-        <Button variant="ghost" size="sm" onClick={() => { setSelectedMetrics([]); setQueryResults([]); }}>
-          清除
-        </Button>
+  const toolbar = (
+    <div className="flex items-center gap-4 flex-wrap w-full">
+      <Select value={selectedTarget} onValueChange={setSelectedTarget}>
+        <SelectTrigger className="w-64 dg-input">
+          <SelectValue placeholder={loading ? '加载中...' : '选择监控目标...'} />
+        </SelectTrigger>
+        <SelectContent className="dg-input max-h-80">
+          {targets.map(t => (
+            <SelectItem key={t.id} value={String(t.id)}>
+              <span className="flex items-center gap-2">
+                <span className={`inline-block w-1.5 h-1.5 rounded-full ${t.status === 'online' ? 'bg-emerald-400' : 'bg-[var(--dg-bg-active)]'}`} />
+                {t.name} ({t.ip || t.type})
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="relative flex-1 max-w-sm">
+        <Search className="absolute left-2.5 top-2 h-4 w-4 dg-text-muted" />
+        <Input
+          className="pl-8 dg-input h-9"
+          placeholder="搜索指标..."
+          value={searchKw}
+          onChange={(e) => setSearchKw(e.target.value)}
+        />
       </div>
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setSelectedMetrics([]); setQueryResults([]); }}>
+        清除
+      </Button>
+    </div>
+  );
 
+  return (
+    <PageShell
+      variant="workspace"
+      title="指标浏览器"
+      subtitle="按分类/主机浏览所有指标，支持叠加对比"
+      icon={<Activity className="h-5 w-5" />}
+      toolbar={toolbar}
+      loading={loading}
+      loadingLabel="加载监控目标..."
+      contentClassName="space-y-6"
+    >
       {!selectedTarget ? (
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-12 text-center">
-            <Filter className="h-12 w-12 text-slate-600 mx-auto mb-4" />
-            <p className="text-[var(--dg-text-muted)]">请先选择监控目标，然后勾选要查看的指标</p>
-          </CardContent>
-        </Card>
+        <PageEmpty
+          icon={<Filter className="h-12 w-12" />}
+          title="请选择监控目标"
+          description="选择目标主机后，从左侧勾选要查看的指标"
+        />
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Metric selector */}
-          <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] lg:col-span-1">
+          <Card className="dg-card lg:col-span-1">
             <CardContent className="p-4">
               <div className="flex items-center gap-2 mb-3">
-                <BarChart3 className="h-4 w-4 text-[var(--dg-text-muted)]" />
+                <BarChart3 className="h-4 w-4 dg-text-muted" />
                 <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">指标列表</h3>
-                <span className="text-xs text-[var(--dg-text-muted)] ml-auto">{selectedMetrics.length} 已选</span>
+                <span className="text-xs dg-text-muted ml-auto">{selectedMetrics.length} 已选</span>
               </div>
               <div className="space-y-4 max-h-[60vh] overflow-y-auto">
                 {Object.entries(grouped).map(([cat, names]) => (
                   <div key={cat}>
-                    <div className="flex items-center gap-1.5 mb-1.5 text-xs text-[var(--dg-text-muted)]">
+                    <div className="flex items-center gap-1.5 mb-1.5 text-xs dg-text-muted">
                       {METRIC_CATEGORIES[cat]?.icon}
                       <span>{METRIC_CATEGORIES[cat]?.label || cat}</span>
                     </div>
@@ -177,10 +173,10 @@ export function MetricsExplorer() {
                       {names.map(name => {
                         const selected = selectedMetrics.includes(name);
                         return (
-                          <label key={name} className={`flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-xs transition-colors ${selected ? 'bg-blue-500/10 text-blue-300' : 'text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}>
+                          <label key={name} className={`flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-xs transition-colors ${selected ? 'bg-[var(--dg-bg-active)] dg-text-blue' : 'text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}>
                             <input
                               type="checkbox"
-                              className="rounded border-slate-600 bg-slate-800 accent-blue-500"
+                              className="rounded border-[var(--dg-border-hover)] bg-[var(--dg-bg-tertiary)] accent-[var(--dg-blue)]"
                               checked={selected}
                               onChange={() => {
                                 setSelectedMetrics(prev =>
@@ -199,34 +195,24 @@ export function MetricsExplorer() {
             </CardContent>
           </Card>
 
-          {/* Chart area */}
-          <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] lg:col-span-2">
+          <Card className="dg-card lg:col-span-2">
             <CardContent className="p-4">
               <div className="flex items-center gap-2 mb-3">
-                <Activity className="h-4 w-4 text-[var(--dg-text-muted)]" />
+                <Activity className="h-4 w-4 dg-text-muted" />
                 <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">
                   {target?.name || ''} — 最近 1 小时
                 </h3>
               </div>
               {selectedMetrics.length === 0 ? (
-                <div className="h-64 flex items-center justify-center text-sm text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-lg">
-                  <div className="text-center">
-                    <Plus className="h-8 w-8 text-slate-600 mx-auto mb-2" />
-                    请从左侧勾选指标
-                  </div>
-                </div>
+                <PageEmpty icon={<Plus className="h-8 w-8" />} title="请从左侧勾选指标" className="py-16" />
               ) : sortedTimes.length === 0 ? (
-                <div className="h-64 flex items-center justify-center text-sm text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-lg">
-                  暂无数据
-                </div>
+                <PageEmpty title="暂无数据" className="py-16" />
               ) : (
                 <div className="h-80 overflow-x-auto">
                   <svg viewBox={`0 0 ${Math.max(sortedTimes.length * 4, 400)} 300`} className="w-full h-full min-w-[400px]">
-                    {/* Grid lines */}
                     {[0, 25, 50, 75, 100].map(pct => (
                       <line key={pct} x1="0" y1={300 - (pct / 100) * 260} x2={Math.max(sortedTimes.length * 4, 400)} y2={300 - (pct / 100) * 260} stroke="#1e293b" strokeDasharray="3 3" />
                     ))}
-                    {/* Lines per metric */}
                     {selectedMetrics.map((mn, mi) => {
                       const points = sortedTimes
                         .map((t, i) => ({ x: i * 4 + 2, y: 300 - ((timeMap[t][mn] ?? 0) / maxVal) * 260 }))
@@ -239,7 +225,6 @@ export function MetricsExplorer() {
                         </g>
                       );
                     })}
-                    {/* X axis time labels */}
                     {sortedTimes.filter((_, i) => i % 15 === 0).map((t, i) => (
                       <text key={t} x={i * 60 + 2} y="295" fill="#475569" fontSize="9">
                         {new Date(t * 1000).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
@@ -248,7 +233,6 @@ export function MetricsExplorer() {
                   </svg>
                 </div>
               )}
-              {/* Legend */}
               {selectedMetrics.length > 0 && (
                 <div className="flex flex-wrap gap-3 mt-3">
                   {selectedMetrics.map((mn, mi) => (
@@ -264,12 +248,11 @@ export function MetricsExplorer() {
         </div>
       )}
 
-      {/* Target metrics overview */}
       {target && Object.keys(target.latest_metrics || {}).length > 0 && (
         <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
           {Object.entries(target.latest_metrics).map(([key, val]) => (
             <div key={key} className="bg-[var(--dg-bg-secondary)] rounded-lg p-3 border border-[var(--dg-border)] text-center">
-              <p className="text-[10px] text-[var(--dg-text-muted)] truncate">{key}</p>
+              <p className="text-[10px] dg-text-muted truncate">{key}</p>
               <p className="text-lg font-bold text-[var(--dg-text-primary)]">
                 {typeof val === 'number' ? val.toFixed(1) : '--'}
               </p>
@@ -277,8 +260,8 @@ export function MetricsExplorer() {
           ))}
         </div>
       )}
-    </div>
+    </PageShell>
   );
 }
 
-export default MetricsExplorer;
+export default MetricsExplorer;
\ No newline at end of file
diff --git a/frontend/src/pages/monitor/MiddlewareMonitor.tsx b/frontend/src/pages/monitor/MiddlewareMonitor.tsx
index 1b1562e..8097e68 100644
--- a/frontend/src/pages/monitor/MiddlewareMonitor.tsx
+++ b/frontend/src/pages/monitor/MiddlewareMonitor.tsx
@@ -54,11 +54,11 @@ function fmtVal(v: number, precision = 0): string {
 
 function statusColor(status: string): string {
   switch (status) {
-    case 'online': return 'text-emerald-400';
-    case 'warning': return 'text-amber-400';
+    case 'online': return 'dg-text-green';
+    case 'warning': return 'dg-text-yellow';
     case 'error':
-    case 'offline': return 'text-red-400';
-    default: return 'text-slate-500';
+    case 'offline': return 'dg-text-red';
+    default: return 'dg-text-muted';
   }
 }
 
@@ -68,7 +68,7 @@ function statusBg(status: string): string {
     case 'warning': return 'bg-amber-400';
     case 'error':
     case 'offline': return 'bg-red-400';
-    default: return 'bg-slate-500';
+    default: return 'bg-[var(--dg-bg-active)]';
   }
 }
 
@@ -174,7 +174,7 @@ export function MiddlewareMonitor() {
 
       {loading && (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 animate-spin text-slate-500 mr-2" />
+          <Loader2 className="h-6 w-6 animate-spin dg-text-muted mr-2" />
           <span className="text-sm text-[var(--dg-text-muted)]">正在加载中间件指标...</span>
         </div>
       )}
@@ -182,8 +182,8 @@ export function MiddlewareMonitor() {
       {error && !loading && (
         <Card className="bg-[var(--dg-bg-secondary)] border-red-500/30">
           <CardContent className="p-6 text-center">
-            <Activity className="h-8 w-8 text-red-400 mx-auto mb-2" />
-            <p className="text-sm text-red-400">{error}</p>
+            <Activity className="h-8 w-8 dg-text-red mx-auto mb-2" />
+            <p className="text-sm dg-text-red">{error}</p>
             <p className="text-xs text-[var(--dg-text-muted)] mt-2">请确认后端服务可用</p>
           </CardContent>
         </Card>
@@ -192,7 +192,7 @@ export function MiddlewareMonitor() {
       {!loading && !error && targets.length === 0 && (
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-12 text-center">
-            <Database className="h-12 w-12 text-slate-600 mx-auto mb-4" />
+            <Database className="h-12 w-12 dg-text-muted mx-auto mb-4" />
             <p className="text-sm text-[var(--dg-text-muted)]">暂无中间件监控目标</p>
             <p className="text-xs text-[var(--dg-text-muted)] mt-2">点击「添加监控」配置 Redis / MySQL 连接</p>
             <Button size="sm" className="mt-4 gap-1.5" onClick={() => { setEditTarget(null); setDialogOpen(true); }}>
@@ -208,7 +208,7 @@ export function MiddlewareMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-4">
-              <Database className="h-4 w-4 text-red-400" />
+              <Database className="h-4 w-4 dg-text-red" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">Redis 监控</h3>
               {redisTarget && (
                 <Badge variant="outline" className="ml-auto text-[10px] border-[var(--dg-border)] text-[var(--dg-text-muted)]">
@@ -237,7 +237,7 @@ export function MiddlewareMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-4">
-              <Server className="h-4 w-4 text-blue-400" />
+              <Server className="h-4 w-4 dg-text-blue" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">MySQL 监控</h3>
               {mysqlTarget && (
                 <Badge variant="outline" className="ml-auto text-[10px] border-[var(--dg-border)] text-[var(--dg-text-muted)]">
@@ -358,7 +358,7 @@ function InstanceCard({
         </div>
         <Badge
           variant="outline"
-          className={`text-[10px] capitalize ${target.status === 'online' ? 'border-emerald-400/50 text-emerald-400' : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+          className={`text-[10px] capitalize ${target.status === 'online' ? 'border-emerald-400/50 dg-text-green' : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
         >
           {target.status}
         </Badge>
@@ -393,7 +393,7 @@ function InstanceCard({
           <Pencil className="h-3 w-3" />
           编辑
         </Button>
-        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1 text-red-400 hover:text-red-300" onClick={onDelete}>
+        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1 dg-text-red hover:dg-text-red" onClick={onDelete}>
           <Trash2 className="h-3 w-3" />
           删除
         </Button>
diff --git a/frontend/src/pages/monitor/MonitorCenter.tsx b/frontend/src/pages/monitor/MonitorCenter.tsx
index 9955a9d..3fc85be 100644
--- a/frontend/src/pages/monitor/MonitorCenter.tsx
+++ b/frontend/src/pages/monitor/MonitorCenter.tsx
@@ -1,7 +1,7 @@
-// 监控中心 — 4个监控标签页的容器
+// 监控中心 — 4个监控标签页的容器 // Logan.Li
 import { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { Cpu, Database, Radio, Globe } from 'lucide-react';
+import { Cpu } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { HostMonitor } from './HostMonitor';
 import { MiddlewareMonitor } from './MiddlewareMonitor';
 import { SNMPMonitor } from './SNMPMonitor';
@@ -9,61 +9,32 @@ import { SiteMonitor } from './SiteMonitor';
 
 type TabId = 'host' | 'middleware' | 'snmp' | 'site';
 
-interface Tab {
-  id: TabId;
-  name: string;
-  icon: React.ElementType;
-  description: string;
-}
-
-const tabs: Tab[] = [
-  { id: 'host', name: '主机监控', icon: Cpu, description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
-  { id: 'middleware', name: '中间件监控', icon: Database, description: 'Redis / MySQL 指标采集' },
-  { id: 'snmp', name: 'SNMP 监控', icon: Radio, description: '网络设备 / 服务器硬件 (OID 模板)' },
-  { id: 'site', name: '站点拨测', icon: Globe, description: 'HTTP / PING / DNS / TCP / WS 拨测' },
+const tabs: { id: TabId; name: string; description: string }[] = [
+  { id: 'host', name: '主机监控', description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
+  { id: 'middleware', name: '中间件监控', description: 'Redis / MySQL 指标采集' },
+  { id: 'snmp', name: 'SNMP 监控', description: '网络设备 / 服务器硬件 (OID 模板)' },
+  { id: 'site', name: '站点拨测', description: 'HTTP / PING / DNS / TCP / WS 拨测' },
 ];
 
 export function MonitorCenter() {
   const [activeTab, setActiveTab] = useState<TabId>('host');
+  const current = tabs.find((t) => t.id === activeTab);
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">监控中心</h1>
-        <p className="text-sm text-[var(--dg-text-muted)] mt-1">全面的基础设施与应用监控</p>
-      </div>
-
-      {/* Tab Bar */}
-      <div className="flex gap-1 bg-[var(--dg-bg-secondary)] p-1 rounded-lg border border-[var(--dg-border)]">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={cn(
-              'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium transition-all',
-              activeTab === tab.id
-                ? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] shadow-sm'
-                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
-            )}
-          >
-            <tab.icon className="h-4 w-4" />
-            <span className="hidden sm:inline">{tab.name}</span>
-          </button>
-        ))}
-      </div>
-
-      {/* Tab Description */}
-      <p className="text-sm text-[var(--dg-text-muted)] -mt-4">
-        {tabs.find(t => t.id === activeTab)?.description}
-      </p>
-
-      {/* Tab Content */}
-      <div className="min-h-[400px]">
-        {activeTab === 'host' && <HostMonitor />}
-        {activeTab === 'middleware' && <MiddlewareMonitor />}
-        {activeTab === 'snmp' && <SNMPMonitor />}
-        {activeTab === 'site' && <SiteMonitor />}
-      </div>
-    </div>
+    <PageShell
+      variant="list"
+      title="监控中心"
+      subtitle={current?.description ?? '全面的基础设施与应用监控'}
+      icon={<Cpu className="h-5 w-5" />}
+      tabs={tabs.map((t) => ({ id: t.id, label: t.name }))}
+      activeTab={activeTab}
+      onTabChange={(id) => setActiveTab(id as TabId)}
+      contentClassName="min-h-[400px]"
+    >
+      {activeTab === 'host' && <HostMonitor embedded />}
+      {activeTab === 'middleware' && <MiddlewareMonitor />}
+      {activeTab === 'snmp' && <SNMPMonitor />}
+      {activeTab === 'site' && <SiteMonitor />}
+    </PageShell>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/monitor/SNMPMonitor.tsx b/frontend/src/pages/monitor/SNMPMonitor.tsx
index cb01cde..f24288f 100644
--- a/frontend/src/pages/monitor/SNMPMonitor.tsx
+++ b/frontend/src/pages/monitor/SNMPMonitor.tsx
@@ -143,12 +143,12 @@ export function SNMPMonitor() {
   // ---------- status badge ----------
   const statusBadge = (status?: string) => {
     if (status === 'online') {
-      return <Badge className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">在线</Badge>;
+      return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">在线</Badge>;
     }
     if (status === 'abnormal') {
-      return <Badge className="bg-red-500/15 text-red-400 border-red-500/30">异常</Badge>;
+      return <Badge className="bg-red-500/15 dg-text-red border-red-500/30">异常</Badge>;
     }
-    return <Badge className="bg-slate-500/15 text-slate-400 border-slate-500/30">离线</Badge>;
+    return <Badge className="bg-[var(--dg-bg-active)]/15 dg-text-secondary border-[var(--dg-border)]">离线</Badge>;
   };
 
   // ---------- render ----------
@@ -159,7 +159,7 @@ export function SNMPMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-3">
-              <Router className="h-4 w-4 text-cyan-400" />
+              <Router className="h-4 w-4 dg-text-cyan" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">网络设备</h3>
             </div>
             <p className="text-xs text-[var(--dg-text-muted)] mb-3">交换机 / 路由器 / 防火墙</p>
@@ -170,7 +170,7 @@ export function SNMPMonitor() {
               </div>
               <div className="flex justify-between text-sm">
                 <span className="text-[var(--dg-text-muted)]">在线</span>
-                <span className="text-emerald-400 font-mono">{stats.online}</span>
+                <span className="dg-text-green font-mono">{stats.online}</span>
               </div>
             </div>
           </CardContent>
@@ -179,14 +179,14 @@ export function SNMPMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-3">
-              <HardDrive className="h-4 w-4 text-purple-400" />
+              <HardDrive className="h-4 w-4 dg-text-purple" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">服务器硬件</h3>
             </div>
             <p className="text-xs text-[var(--dg-text-muted)] mb-3">iLO / iDRAC / IPMI</p>
             <div className="space-y-2">
               <div className="flex justify-between text-sm">
                 <span className="text-[var(--dg-text-muted)]">异常</span>
-                <span className="text-red-400 font-mono">{stats.abnormal}</span>
+                <span className="dg-text-red font-mono">{stats.abnormal}</span>
               </div>
             </div>
           </CardContent>
@@ -221,7 +221,7 @@ export function SNMPMonitor() {
         <CardContent className="p-4">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-2">
-              <Router className="h-4 w-4 text-cyan-400" />
+              <Router className="h-4 w-4 dg-text-cyan" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">
                 SNMP 设备列表
                 {!loading && (
@@ -235,12 +235,12 @@ export function SNMPMonitor() {
             {/* Add Device Dialog */}
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
               <DialogTrigger asChild>
-                <Button size="sm" className="bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20 border border-cyan-500/30">
+                <Button size="sm" className="bg-cyan-500/10 dg-text-cyan hover:bg-cyan-500/20 border border-cyan-500/30">
                   <Plus className="h-4 w-4" />
                   添加设备
                 </Button>
               </DialogTrigger>
-              <DialogContent className="bg-slate-900 border-[var(--dg-border)] text-[var(--dg-text-primary)] sm:max-w-md">
+              <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] sm:max-w-md">
                 <DialogHeader>
                   <DialogTitle className="text-[var(--dg-text-primary)]">添加 SNMP 设备</DialogTitle>
                   <DialogDescription className="text-[var(--dg-text-muted)]">
@@ -307,7 +307,7 @@ export function SNMPMonitor() {
                       >
                         <SelectValue />
                       </SelectTrigger>
-                      <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                      <SelectContent className="dg-input">
                         <SelectItem value="v2c">v2c</SelectItem>
                         <SelectItem value="v3">v3</SelectItem>
                       </SelectContent>
@@ -348,14 +348,14 @@ export function SNMPMonitor() {
                   <Button
                     variant="outline"
                     onClick={() => setDialogOpen(false)}
-                    className="border-[var(--dg-border)] text-[var(--dg-text-muted)] hover:bg-slate-800"
+                    className="border-[var(--dg-border)] text-[var(--dg-text-muted)] hover:bg-[var(--dg-bg-hover)]"
                   >
                     取消
                   </Button>
                   <Button
                     onClick={handleAdd}
                     disabled={submitting || !form.name.trim() || !form.ip.trim()}
-                    className="bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20 border border-cyan-500/30"
+                    className="bg-cyan-500/10 dg-text-cyan hover:bg-cyan-500/20 border border-cyan-500/30"
                   >
                     {submitting ? '添加中...' : '确认添加'}
                   </Button>
@@ -410,7 +410,7 @@ export function SNMPMonitor() {
                         variant="ghost"
                         size="icon-sm"
                         onClick={() => handleDelete(d.id)}
-                        className="text-slate-500 hover:text-red-400 hover:bg-red-500/10"
+                        className="dg-text-muted hover:dg-text-red hover:bg-red-500/10"
                         title="删除设备"
                       >
                         <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/pages/monitor/SiteMonitor.tsx b/frontend/src/pages/monitor/SiteMonitor.tsx
index 27907d8..ea7e510 100644
--- a/frontend/src/pages/monitor/SiteMonitor.tsx
+++ b/frontend/src/pages/monitor/SiteMonitor.tsx
@@ -49,11 +49,11 @@ import type { JsonData } from '@/types/common';
 
 // 拨测协议类型（与后端 model 对齐：http, https, tcp, dns, ping）
 const probeTypes = [
-  { icon: Globe, name: 'HTTP', color: 'text-blue-400', desc: 'HTTP URL 状态码 & 响应时间' },
-  { icon: Globe, name: 'HTTPS', color: 'text-emerald-400', desc: 'HTTPS SSL 证书 & 响应时间' },
-  { icon: Server, name: 'TCP', color: 'text-orange-400', desc: 'TCP 端口连通性检测' },
-  { icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' },
-  { icon: ArrowUpDown, name: 'PING', color: 'text-purple-400', desc: 'ICMP 连通性 & 延迟' },
+  { icon: Globe, name: 'HTTP', color: 'dg-text-blue', desc: 'HTTP URL 状态码 & 响应时间' },
+  { icon: Globe, name: 'HTTPS', color: 'dg-text-green', desc: 'HTTPS SSL 证书 & 响应时间' },
+  { icon: Server, name: 'TCP', color: 'dg-text-orange', desc: 'TCP 端口连通性检测' },
+  { icon: Globe, name: 'DNS', color: 'dg-text-cyan', desc: '域名解析延迟 & 结果验证' },
+  { icon: ArrowUpDown, name: 'PING', color: 'dg-text-purple', desc: 'ICMP 连通性 & 延迟' },
 ] as const;
 
 const PROBE_TYPE_OPTIONS = ['HTTP', 'HTTPS', 'TCP', 'DNS', 'PING'] as const;
@@ -104,22 +104,22 @@ const emptyForm: CreateTaskForm = {
 function statusIcon(status?: string) {
   switch (status) {
     case 'up':
-      return <CheckCircle2 className="h-4 w-4 text-emerald-400" />;
+      return <CheckCircle2 className="h-4 w-4 dg-text-green" />;
     case 'down':
-      return <XCircle className="h-4 w-4 text-red-400" />;
+      return <XCircle className="h-4 w-4 dg-text-red" />;
     default:
-      return <Clock className="h-4 w-4 text-gray-400" />;
+      return <Clock className="h-4 w-4 dg-text-secondary" />;
   }
 }
 
 function statusBadge(status?: string) {
   switch (status) {
     case 'up':
-      return <Badge className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">正常</Badge>;
+      return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">正常</Badge>;
     case 'down':
-      return <Badge className="bg-red-500/15 text-red-400 border-red-500/30">异常</Badge>;
+      return <Badge className="bg-red-500/15 dg-text-red border-red-500/30">异常</Badge>;
     default:
-      return <Badge className="bg-gray-500/15 text-gray-400 border-gray-500/30">未知</Badge>;
+      return <Badge className="dg-badge-muted">未知</Badge>;
   }
 }
 
@@ -300,9 +300,9 @@ export function SiteMonitor() {
             {[
               { label: '总任务数', value: stats?.total_tasks ?? '--' },
               { label: '已启用', value: stats?.enabled_tasks ?? '--' },
-              { label: '正常', value: stats?.up_count ?? '--', color: 'text-emerald-400' },
-              { label: '异常', value: stats?.down_count ?? '--', color: 'text-red-400' },
-              { label: '可用率', value: availStr, color: 'text-blue-400' },
+              { label: '正常', value: stats?.up_count ?? '--', color: 'dg-text-green' },
+              { label: '异常', value: stats?.down_count ?? '--', color: 'dg-text-red' },
+              { label: '可用率', value: availStr, color: 'dg-text-blue' },
             ].map((item) => (
               <div key={item.label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
                 <p className="text-xs text-[var(--dg-text-muted)]">{item.label}</p>
@@ -407,7 +407,7 @@ export function SiteMonitor() {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                          className="h-8 w-8 dg-text-red hover:dg-text-red hover:bg-red-500/10"
                           onClick={() => handleDelete(task)}
                         >
                           <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/pages/monitor/host-monitor/DualLineChart.tsx b/frontend/src/pages/monitor/host-monitor/DualLineChart.tsx
index ab78a5f..f3178ea 100644
--- a/frontend/src/pages/monitor/host-monitor/DualLineChart.tsx
+++ b/frontend/src/pages/monitor/host-monitor/DualLineChart.tsx
@@ -33,12 +33,12 @@ export function DualLineChart({
       <CardContent className="p-3">
         <div className="flex items-center justify-between mb-1">
           <div className="flex items-center gap-1.5">
-            <Network className="h-4 w-4 text-blue-400" />
+            <Network className="h-4 w-4 dg-text-blue" />
             <span className="text-xs text-[var(--dg-text-primary)] font-medium">{title}</span>
           </div>
           <div className="flex items-center gap-3 text-xs">
             <span><span className="inline-block w-2.5 h-2.5 rounded-sm bg-blue-400 mr-1 align-middle" />接收 <b className="text-blue-300">{currentRx}</b></span>
-            <span><span className="inline-block w-2.5 h-2.5 rounded-sm bg-emerald-400 mr-1 align-middle" />发送 <b className="text-emerald-300">{currentTx}</b></span>
+            <span><span className="inline-block w-2.5 h-2.5 rounded-sm bg-emerald-400 mr-1 align-middle" />发送 <b className="dg-text-green">{currentTx}</b></span>
           </div>
         </div>
         <div className="h-56">
diff --git a/frontend/src/pages/monitor/host-monitor/HealthProbeSection.tsx b/frontend/src/pages/monitor/host-monitor/HealthProbeSection.tsx
index 10e37aa..4799791 100644
--- a/frontend/src/pages/monitor/host-monitor/HealthProbeSection.tsx
+++ b/frontend/src/pages/monitor/host-monitor/HealthProbeSection.tsx
@@ -110,9 +110,9 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
                 <CardContent className="p-3">
                   <div className="flex items-start justify-between mb-2">
                     <div className="flex items-center gap-2">
-                      {p.last_status === 'up' ? <CheckCircle className="w-4 h-4 text-emerald-400" /> :
-                       p.last_status === 'down' ? <XCircle className="w-4 h-4 text-red-400" /> :
-                       <Clock className="w-4 h-4 text-slate-500" />}
+                      {p.last_status === 'up' ? <CheckCircle className="w-4 h-4 dg-text-green" /> :
+                       p.last_status === 'down' ? <XCircle className="w-4 h-4 dg-text-red" /> :
+                       <Clock className="w-4 h-4 dg-text-muted" />}
                       <span className="text-xs font-medium text-[var(--dg-text-primary)]">{String(p.name)}</span>
                       <Badge variant="outline" className="text-[10px] h-5 px-1.5 capitalize">
                         {p.probe_type === 'http_get' ? 'HTTP' : p.probe_type === 'tcp_socket' ? 'TCP' : 'Exec'}
@@ -122,7 +122,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
                       <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => openEditDialog(p)}>
                         <Edit className="w-3 h-3" />
                       </Button>
-                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-red-400 hover:text-red-300" onClick={() => handleDeleteProbe(p)}>
+                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red" onClick={() => handleDeleteProbe(p)}>
                         <Trash2 className="w-3 h-3" />
                       </Button>
                     </div>
@@ -138,11 +138,11 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
                       <div className="truncate font-mono">{String(p.exec_command)}</div>
                     )}
                     <div className="flex items-center gap-3">
-                      <span>状态: <span className={p.last_status === 'up' ? 'text-emerald-400' : p.last_status === 'down' ? 'text-red-400' : 'text-slate-400'}>
+                      <span>状态: <span className={p.last_status === 'up' ? 'dg-text-green' : p.last_status === 'down' ? 'dg-text-red' : 'dg-text-secondary'}>
                         {p.last_status ? String(p.last_status).toUpperCase() : '未检测'}
                       </span></span>
                       {Number(p.last_latency_ms) > 0 && <span>延迟: {String(p.last_latency_ms)}ms</span>}
-                      {Number(p.fail_count) > 0 && <span className="text-red-400">连续失败: {String(p.fail_count)}次</span>}
+                      {Number(p.fail_count) > 0 && <span className="dg-text-red">连续失败: {String(p.fail_count)}次</span>}
                       {p.last_checked_at && <span className="text-[10px]">{new Date(String(p.last_checked_at)).toLocaleString('zh-CN')}</span>}
                     </div>
                   </div>
@@ -165,7 +165,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
           </DialogHeader>
           <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
             <div>
-              <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">探针名称 <span className="text-red-400">*</span></label>
+              <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">探针名称 <span className="dg-text-red">*</span></label>
               <input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.name} onChange={e => setProbeForm({ ...probeForm, name: e.target.value })} placeholder="如：cex-agent 健康检查" />
             </div>
             <div>
@@ -183,7 +183,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
 
             {probeForm.probe_type === 'http_get' && (
               <>
-                <div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">HTTP URL <span className="text-red-400">*</span></label>
+                <div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">HTTP URL <span className="dg-text-red">*</span></label>
                   <input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs text-[var(--dg-text-primary)]" value={probeForm.http_url} onChange={e => setProbeForm({ ...probeForm, http_url: e.target.value })} placeholder="http://localhost:8080/health" /></div>
                 <div className="grid grid-cols-2 gap-2">
                   <div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">期望状态码</label>
@@ -204,7 +204,7 @@ export function HealthProbeSection({ selectedHost }: HealthProbeSectionProps) {
             )}
 
             {probeForm.probe_type === 'exec_command' && (
-              <div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">执行命令 <span className="text-red-400">*</span></label>
+              <div><label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">执行命令 <span className="dg-text-red">*</span></label>
                 <input className="w-full h-8 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 text-xs font-mono text-[var(--dg-text-primary)]" value={probeForm.exec_command} onChange={e => setProbeForm({ ...probeForm, exec_command: e.target.value })} placeholder="pgrep -x mysqld" /></div>
             )}
 
diff --git a/frontend/src/pages/monitor/host-monitor/PortPolicyDialog.tsx b/frontend/src/pages/monitor/host-monitor/PortPolicyDialog.tsx
index d768713..6cd17cc 100644
--- a/frontend/src/pages/monitor/host-monitor/PortPolicyDialog.tsx
+++ b/frontend/src/pages/monitor/host-monitor/PortPolicyDialog.tsx
@@ -38,13 +38,13 @@ export function PortPolicyDialog({
             <label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block">过滤模式</label>
             <div className="flex gap-2">
               <button
-                className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'whitelist' ? 'bg-blue-500/20 border-blue-500 text-blue-400' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+                className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'whitelist' ? 'bg-blue-500/20 border-blue-500 dg-text-blue' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
                 onClick={() => onModeChange('whitelist')}
               >
                 白名单 ─ 全量上报
               </button>
               <button
-                className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'blacklist' ? 'bg-amber-500/20 border-amber-500 text-amber-400' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+                className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'blacklist' ? 'bg-amber-500/20 border-amber-500 dg-text-yellow' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
                 onClick={() => onModeChange('blacklist')}
               >
                 黑名单 ─ 仅上报选中
@@ -60,7 +60,7 @@ export function PortPolicyDialog({
           <div>
             <label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block">
               端口列表 <span className="text-[var(--dg-text-muted)]">(逗号分隔，如: 80,443,3306,6379)</span>
-              {portPolicyMode === 'whitelist' && <span className="text-blue-400 ml-1">— 白名单模式无需配置</span>}
+              {portPolicyMode === 'whitelist' && <span className="dg-text-blue ml-1">— 白名单模式无需配置</span>}
             </label>
             <textarea
               className={`w-full h-20 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 py-1.5 text-xs font-mono resize-none ${
diff --git a/frontend/src/pages/monitor/host-monitor/SystemInfoSection.tsx b/frontend/src/pages/monitor/host-monitor/SystemInfoSection.tsx
index e53d9fe..a3f96e4 100644
--- a/frontend/src/pages/monitor/host-monitor/SystemInfoSection.tsx
+++ b/frontend/src/pages/monitor/host-monitor/SystemInfoSection.tsx
@@ -55,9 +55,9 @@ export function SystemInfoSection({
               <h3 className="text-xs font-medium text-[var(--dg-text-primary)]">系统负载 (Load Average)</h3>
             </div>
             <div className="flex items-center gap-6 text-xs">
-              <div><span className="text-[var(--dg-text-muted)]">1min </span><span className="text-sm font-bold text-slate-200">{latest.load1 ?? '--'}</span></div>
-              <div><span className="text-[var(--dg-text-muted)]">5min </span><span className="text-sm font-bold text-slate-200">{latest.load5 ?? '--'}</span></div>
-              <div><span className="text-[var(--dg-text-muted)]">15min </span><span className="text-sm font-bold text-slate-200">{latest.load15 ?? '--'}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">1min </span><span className="text-sm font-bold text-[var(--dg-text-primary)]">{latest.load1 ?? '--'}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">5min </span><span className="text-sm font-bold text-[var(--dg-text-primary)]">{latest.load5 ?? '--'}</span></div>
+              <div><span className="text-[var(--dg-text-muted)]">15min </span><span className="text-sm font-bold text-[var(--dg-text-primary)]">{latest.load15 ?? '--'}</span></div>
             </div>
           </CardContent>
         </Card>
@@ -71,11 +71,11 @@ export function SystemInfoSection({
               {parts.map((p: JsonData, i: number) => (
                 <div key={i} className="flex items-center gap-2 text-xs">
                   <span className="text-[var(--dg-text-muted)] w-24 font-mono truncate">{p.mount || p.mountpoint || p.device || `disk${i}`}</span>
-                  <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                  <div className="flex-1 h-1.5 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
                     <div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.min(p.usage_percent || p.used_percent || 0, 100)}%` }} />
                   </div>
                   <span className="text-[var(--dg-text-primary)] w-28 text-right tabular-nums whitespace-nowrap">{(p.used_gb ?? 0).toFixed(1)}/{(p.total_gb ?? 0).toFixed(0)}GB</span>
-                  <span className="text-blue-400 w-14 text-right tabular-nums whitespace-nowrap">{(p.usage_percent ?? p.used_percent ?? 0).toFixed(1)}%</span>
+                  <span className="dg-text-blue w-14 text-right tabular-nums whitespace-nowrap">{(p.usage_percent ?? p.used_percent ?? 0).toFixed(1)}%</span>
                 </div>
               ))}
             </div>
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index e59dbf1..468c799 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -25,9 +25,12 @@ export {
 } from './storage';
 
 export {
-  type Theme,
+  type ThemePreference,
+  type ResolvedTheme,
   type ThemeOption,
+  type ThemeGroup,
   THEME_OPTIONS,
+  THEME_GROUPS,
   THEME_ORDER,
   DEFAULT_THEME,
   migrateLegacyTheme,
@@ -35,8 +38,14 @@ export {
   persistTheme,
   applyThemeToDocument,
   getNextTheme,
+  resolveThemePreference,
+  isThemeDark,
+  getSystemColorScheme,
 } from './theme';
 
+/** @deprecated 使用 ThemePreference */
+export type Theme = import('./theme').ThemePreference;
+
 export {
   isNotEmpty,
   isValidPort,
diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts
index 7a90af1..9e8b249 100644
--- a/frontend/src/utils/theme.ts
+++ b/frontend/src/utils/theme.ts
@@ -1,41 +1,97 @@
-// 主题常量与持久化 — 供 useTheme / ThemeProvider 使用 // Logan.Li
+// 主题常量与持久化 — 主流主题 + 开发者主题 + 跟随系统 // Logan.Li
 
 import { getItem, setItem, STORAGE_KEYS } from './storage';
 
-export type Theme =
+/** 用户选择的主题偏好（含跟随系统） */
+export type ThemePreference =
+  | 'system'
   | 'ocean-deep'
   | 'light-professional'
-  | 'midnight-purple'
-  | 'pine-green'
-  | 'orange-vitality';
+  | 'one-dark'
+  | 'catppuccin'
+  | 'dracula'
+  | 'tokyo-night'
+  | 'nord';
+
+/** 实际应用到 data-theme 的具体主题 */
+export type ResolvedTheme = Exclude<ThemePreference, 'system'>;
 
 export interface ThemeOption {
-  id: Theme;
+  id: ThemePreference;
   name: string;
   description: string;
   isDark: boolean;
   primaryColor: string;
 }
 
-export const THEME_OPTIONS: ThemeOption[] = [
-  { id: 'ocean-deep', name: '深海蓝', description: '专业稳重的深蓝色调', isDark: true, primaryColor: '#3b82f6' },
-  { id: 'light-professional', name: '明亮白', description: '清爽干净的浅色主题', isDark: false, primaryColor: '#2563eb' },
-  { id: 'midnight-purple', name: '午夜紫', description: '神秘优雅的紫色调', isDark: true, primaryColor: '#a855f7' },
-  { id: 'pine-green', name: '松林绿', description: '自然清新的绿色主题', isDark: true, primaryColor: '#22c55e' },
-  { id: 'orange-vitality', name: '活力橙', description: '温暖活力的橙色主题', isDark: true, primaryColor: '#f97316' },
-];
-
-export const THEME_ORDER: Theme[] = THEME_OPTIONS.map((o) => o.id);
-export const DEFAULT_THEME: Theme = 'ocean-deep';
-
-/** 兼容旧版 dark/light 主题名 // Logan.Li */
-export function migrateLegacyTheme(value: string | null): Theme | null {
-  if (value === 'dark') return 'ocean-deep';
-  if (value === 'light') return 'light-professional';
-  return null;
+export interface ThemeGroup {
+  label: string;
+  options: ThemeOption[];
 }
 
-export function getInitialTheme(): Theme {
+/** 主流主题 — 默认推荐 */
+const MAINSTREAM_THEMES: ThemeOption[] = [
+  { id: 'system', name: '跟随系统', description: '自动匹配操作系统浅色/深色', isDark: false, primaryColor: 'linear-gradient(135deg, #2563eb 50%, #0d1117 50%)' },
+  { id: 'ocean-deep', name: '深海蓝', description: 'GitHub 风格蓝黑专业暗色', isDark: true, primaryColor: '#0d1117' },
+  { id: 'light-professional', name: '明亮白', description: '企业控制台清爽浅色', isDark: false, primaryColor: '#2563eb' },
+];
+
+/** 开发者主题 — 高辨识度扩展 */
+const DEVELOPER_THEMES: ThemeOption[] = [
+  { id: 'one-dark', name: 'One Dark', description: 'Atom 暖灰 IDE，紫绿语法渐变', isDark: true, primaryColor: '#c678dd' },
+  { id: 'dracula', name: 'Dracula', description: '经典紫粉暗色，极高辨识度', isDark: true, primaryColor: '#bd93f9' },
+  { id: 'tokyo-night', name: 'Tokyo Night', description: '东京霓虹深蓝紫，VS Code 热门', isDark: true, primaryColor: '#7aa2f7' },
+  { id: 'catppuccin', name: 'Catppuccin', description: '马卡龙柔和暗色，护眼', isDark: true, primaryColor: '#89b4fa' },
+];
+
+export const THEME_GROUPS: ThemeGroup[] = [
+  { label: '主流', options: MAINSTREAM_THEMES },
+  { label: '开发者', options: DEVELOPER_THEMES },
+];
+
+export const THEME_OPTIONS: ThemeOption[] = [
+  ...MAINSTREAM_THEMES,
+  ...DEVELOPER_THEMES,
+];
+
+export const THEME_ORDER: ThemePreference[] = THEME_OPTIONS.map((o) => o.id);
+export const DEFAULT_THEME: ThemePreference = 'system';
+
+const LEGACY_THEME_MAP: Record<string, ThemePreference> = {
+  dark: 'ocean-deep',
+  light: 'light-professional',
+  'midnight-purple': 'one-dark',
+  'pine-green': 'catppuccin',
+  'orange-vitality': 'tokyo-night',
+  nord: 'tokyo-night',
+};
+
+export function migrateLegacyTheme(value: string | null): ThemePreference | null {
+  if (!value) return null;
+  return LEGACY_THEME_MAP[value] ?? null;
+}
+
+/** 读取系统 color-scheme 偏好 // Logan.Li */
+export function getSystemColorScheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'dark';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+/** 将用户偏好解析为具体主题 // Logan.Li */
+export function resolveThemePreference(pref: ThemePreference): ResolvedTheme {
+  if (pref === 'system') {
+    return getSystemColorScheme() === 'dark' ? 'ocean-deep' : 'light-professional';
+  }
+  return pref;
+}
+
+export function isThemeDark(pref: ThemePreference): boolean {
+  if (pref === 'system') return getSystemColorScheme() === 'dark';
+  const opt = THEME_OPTIONS.find((o) => o.id === pref);
+  return opt?.isDark ?? true;
+}
+
+export function getInitialTheme(): ThemePreference {
   if (typeof window === 'undefined') return DEFAULT_THEME;
   const stored = getItem(STORAGE_KEYS.theme);
   const migrated = migrateLegacyTheme(stored);
@@ -43,22 +99,30 @@ export function getInitialTheme(): Theme {
     setItem(STORAGE_KEYS.theme, migrated);
     return migrated;
   }
-  if (stored && THEME_ORDER.includes(stored as Theme)) {
-    return stored as Theme;
+  if (stored && THEME_ORDER.includes(stored as ThemePreference)) {
+    return stored as ThemePreference;
+  }
+  /* nord 已下架，自动迁移到 Tokyo Night // Logan.Li */
+  if (stored === 'nord') {
+    setItem(STORAGE_KEYS.theme, 'tokyo-night');
+    return 'tokyo-night';
   }
   return DEFAULT_THEME;
 }
 
-export function persistTheme(theme: Theme): void {
+export function persistTheme(theme: ThemePreference): void {
   setItem(STORAGE_KEYS.theme, theme);
 }
 
-export function applyThemeToDocument(theme: Theme): void {
+export function applyThemeToDocument(pref: ThemePreference): void {
   if (typeof document === 'undefined') return;
-  document.documentElement.setAttribute('data-theme', theme);
+  const resolved = resolveThemePreference(pref);
+  document.documentElement.setAttribute('data-theme', resolved);
+  document.documentElement.setAttribute('data-theme-preference', pref);
+  document.documentElement.style.colorScheme = isThemeDark(pref) ? 'dark' : 'light';
 }
 
-export function getNextTheme(current: Theme): Theme {
+export function getNextTheme(current: ThemePreference): ThemePreference {
   const idx = THEME_ORDER.indexOf(current);
   return THEME_ORDER[(idx + 1) % THEME_ORDER.length];
 }
\ No newline at end of file