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

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

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

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>

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

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>

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" />}
           保存

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" />}
             保存

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" />}
             保存

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>
   );

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" />}
           保存

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}

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

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

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>

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>

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}

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

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

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

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

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

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

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

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>

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>

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) {

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

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

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

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

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>
   );

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>

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>

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>

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>

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>

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>

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" />

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>

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" />

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

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

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;
 }

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>

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>

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" />}
                 确认删除

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" />

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>

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>

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

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)]';
   }
 }