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

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

frontend/src/pages/approval/ApprovalCategoryPage.tsx

@@ -1,7 +1,6 @@
 // 审批分类通用页面 — 资源申请/应用申请/权限审批三个子页面共用
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -13,9 +12,12 @@ import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Plus, Search, RefreshCw, Clock, CheckCircle, XCircle, FileText, Loader2, Eye, Check, XIcon, User, ChevronRight, Play } from 'lucide-react';
+import { Plus, Search, RefreshCw, Clock, CheckCircle, XCircle, FileText, Eye, Check, XIcon, User, ChevronRight, Play } from 'lucide-react';
 import { approvalApi } from '@/api';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 export interface FormField {
@@ -42,9 +44,9 @@ interface ProcessItem {
 
 const statusBadge = (status: string, t: (k: string) => string) => {
   switch (status) {
-    case 'approved': return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />{t('approval.status.approved')}</Badge>;
-    case 'rejected': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><XCircle className="h-3 w-3 mr-1" />{t('approval.status.rejected')}</Badge>;
-    default: return <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"><Clock className="h-3 w-3 mr-1" />{t('approval.status.pending')}</Badge>;
+    case 'approved': return <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />{t('approval.status.approved')}</Badge>;
+    case 'rejected': return <Badge className="bg-red-500/20 dg-text-red border-red-500/30"><XCircle className="h-3 w-3 mr-1" />{t('approval.status.rejected')}</Badge>;
+    default: return <Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30"><Clock className="h-3 w-3 mr-1" />{t('approval.status.pending')}</Badge>;
   }
 };
 
@@ -153,50 +155,55 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 
   const filtered = processes.filter((p) => !keyword || (p.title || '').toLowerCase().includes(keyword.toLowerCase()));
 
+  // 工具栏：搜索 + 状态筛选 // Logan.Li
+  const toolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="relative w-64">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input placeholder={t('approval.flow.searchRequest')} value={keyword} onChange={(e) => setKeyword(e.target.value)}
+          className="pl-9 h-9 dg-input" />
+      </div>
+      <Select value={statusFilter} onValueChange={setStatusFilter}>
+        <SelectTrigger className="w-32 h-9 dg-input">
+          <SelectValue placeholder={t('common.all')} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t('common.all')}</SelectItem>
+          <SelectItem value="pending">{t('approval.status.pending')}</SelectItem>
+          <SelectItem value="approved">{t('approval.status.approved')}</SelectItem>
+          <SelectItem value="rejected">{t('approval.status.rejected')}</SelectItem>
+        </SelectContent>
+      </Select>
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchProcesses}>
+        <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="space-y-5">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{title}</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{description}</p>
-        </div>
-        <Button onClick={openCreateDialog} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-          <Plus className="h-4 w-4 mr-2" />{t('approval.newRequest')}
-        </Button>
-      </div>
-
-      <div className="flex items-center gap-3 flex-wrap">
-        <div className="relative w-64">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input placeholder={t('approval.flow.searchRequest')} value={keyword} onChange={(e) => setKeyword(e.target.value)}
-            className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
-        </div>
-        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-            <SelectValue placeholder={t('common.all')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t('common.all')}</SelectItem>
-            <SelectItem value="pending">{t('approval.status.pending')}</SelectItem>
-            <SelectItem value="approved">{t('approval.status.approved')}</SelectItem>
-            <SelectItem value="rejected">{t('approval.status.rejected')}</SelectItem>
-          </SelectContent>
-        </Select>
-        <Button variant="outline" size="sm" className="border-[var(--dg-border)]" onClick={fetchProcesses}>
-          <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
-        </Button>
-      </div>
-
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          {loading ? (
-            <div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 animate-spin text-[var(--dg-blue)]" /></div>
-          ) : filtered.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-muted)]">
-              <FileText className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">{t('approval.noRecords')}</p>
-              <Button variant="link" className="mt-2" onClick={openCreateDialog}>{t('approval.applyNow')}</Button>
-            </div>
+    <>
+      <PageShell
+        variant="list"
+        title={title}
+        subtitle={description}
+        icon={<FileText className="h-5 w-5" />}
+        toolbar={toolbar}
+        loading={loading}
+        actions={(
+          <Button onClick={openCreateDialog} className="dg-btn-primary">
+            <Plus className="h-4 w-4 mr-2" />{t('approval.newRequest')}
+          </Button>
+        )}
+      >
+        <ContentPanel noPadding>
+          {filtered.length === 0 ? (
+            <PageEmpty
+              icon={<FileText className="h-10 w-10" />}
+              title={t('approval.noRecords')}
+              action={(
+                <Button variant="link" onClick={openCreateDialog}>{t('approval.applyNow')}</Button>
+              )}
+            />
           ) : (
             <Table>
               <TableHeader>
@@ -221,10 +228,10 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
                       <div className="flex items-center gap-1">
                         {p.status === 'pending' ? (
                           <>
-                            <Button variant="ghost" size="sm" className="h-8 text-red-400 hover:bg-red-500/10" onClick={() => handleReject(p.id)} disabled={acting}>
+                            <Button variant="ghost" size="sm" className="h-8 dg-text-red hover:bg-red-500/10" onClick={() => handleReject(p.id)} disabled={acting}>
                               <XIcon className="h-3.5 w-3.5 mr-1" />{t('common.reject')}
                             </Button>
-                            <Button variant="ghost" size="sm" className="h-8 text-emerald-400 hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
+                            <Button variant="ghost" size="sm" className="h-8 dg-text-green hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
                               <Check className="h-3.5 w-3.5 mr-1" />{t('common.approve')}
                             </Button>
                           </>
@@ -240,8 +247,8 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
               </TableBody>
             </Table>
           )}
-        </CardContent>
-      </Card>
+        </ContentPanel>
+      </PageShell>
 
       {/* Create Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -253,7 +260,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           <div className="space-y-4 py-2">
             {fields.map((field) => (
               <div key={field.key} className="space-y-1.5">
-                <Label className="text-[var(--dg-text-primary)] text-sm">{field.label}{field.required && <span className="text-red-400 ml-0.5">*</span>}</Label>
+                <Label className="text-[var(--dg-text-primary)] text-sm">{field.label}{field.required && <span className="dg-text-red ml-0.5">*</span>}</Label>
                 {field.type === 'select' ? (
                   <Select value={formData[field.key] || ''} onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}>
                     <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"><SelectValue placeholder={field.placeholder || `${t('approval.editor.pleaseSelect')}${field.label}`} /></SelectTrigger>
@@ -272,8 +279,8 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           </div>
           <div className="flex justify-end gap-3 pt-2">
             <Button variant="outline" className="border-[var(--dg-border)]" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button>
-            <Button onClick={handleCreate} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-              {submitting ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />{t('approval.submitting')}</> : t('approval.submitRequest')}
+            <Button onClick={handleCreate} disabled={submitting} className="dg-btn-primary">
+              {submitting ? t('approval.submitting') : t('approval.submitRequest')}
             </Button>
           </div>
         </DialogContent>
@@ -281,7 +288,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 
       {/* Detail Dialog — operation timeline */}
       <DetailTimelineDialog item={detailItem} onClose={() => setDetailItem(null)} fields={fields} onStatusChange={fetchProcesses} />
-    </div>
+    </>
   );
 }
 
@@ -326,9 +333,9 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
   };
 
   const stepStatusColor = (s: StepItem) => {
-    if (s.status === 'approved') return 'text-emerald-400';
-    if (s.status === 'rejected') return 'text-red-400';
-    if (s.step === item.current_step) return 'text-blue-400';
+    if (s.status === 'approved') return 'dg-text-green';
+    if (s.status === 'rejected') return 'dg-text-red';
+    if (s.step === item.current_step) return 'dg-text-blue';
     return 'text-[var(--dg-text-muted)]';
   };
 
@@ -364,7 +371,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
               {/* 1. Submit node */}
               <div className="flex gap-3">
                 <div className="flex flex-col items-center">
-                  <div className="w-7 h-7 rounded-full bg-blue-500/20 flex items-center justify-center"><User className="w-3.5 h-3.5 text-blue-400" /></div>
+                  <div className="w-7 h-7 rounded-full bg-blue-500/20 flex items-center justify-center"><User className="w-3.5 h-3.5 dg-text-blue" /></div>
                   <div className="w-0.5 flex-1 bg-[var(--dg-border)] my-1" />
                 </div>
                 <div className="flex-1 pb-4">
@@ -405,11 +412,11 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
                   <div key={s.id} className="flex gap-3">
                     <div className="flex flex-col items-center">
                       <div className={`w-7 h-7 rounded-full flex items-center justify-center ${iconColor}`}>
-                        {s.status === 'approved' ? <Check className="w-3.5 h-3.5 text-emerald-400" />
-                          : s.status === 'rejected' ? <XIcon className="w-3.5 h-3.5 text-red-400" />
+                        {s.status === 'approved' ? <Check className="w-3.5 h-3.5 dg-text-green" />
+                          : s.status === 'rejected' ? <XIcon className="w-3.5 h-3.5 dg-text-red" />
                             : isExecute
-                              ? <Play className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'text-green-400' : 'text-[var(--dg-text-muted)]'}`} />
-                              : <ChevronRight className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'text-blue-400' : 'text-[var(--dg-text-muted)]'}`} />}
+                              ? <Play className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'dg-text-green' : 'text-[var(--dg-text-muted)]'}`} />
+                              : <ChevronRight className={`w-3.5 h-3.5 ${s.step === item.current_step ? 'dg-text-blue' : 'text-[var(--dg-text-muted)]'}`} />}
                       </div>
                       {!isLast && <div className="w-0.5 flex-1 bg-[var(--dg-border)] my-1" />}
                     </div>
@@ -470,7 +477,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
         <div className="flex justify-end gap-3 pt-2">
           {item.status === 'pending' && (
             <>
-              <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleReject} disabled={acting}>
+              <Button variant="outline" className="border-red-500/30 dg-text-red hover:bg-red-500/10" onClick={handleReject} disabled={acting}>
                 <XIcon className="h-4 w-4 mr-1.5" />{t('common.reject')}
               </Button>
               <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleApprove} disabled={acting}>

frontend/src/pages/approval/ApprovalWorkflowPage.tsx

@@ -10,6 +10,8 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { approvalWorkflowApi, userApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                               */
@@ -53,9 +55,9 @@ interface StepDraft {
 }
 
 const STEP_TYPE_COLORS: Record<string, string> = {
-  submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
-  audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
-  execute: 'bg-green-500/15 text-green-400 border-green-500/30',
+  submit: 'bg-blue-500/15 dg-text-blue border-blue-500/30',
+  audit: 'bg-purple-500/15 dg-text-purple border-purple-500/30',
+  execute: 'bg-green-500/15 dg-text-green border-green-500/30',
 };
 
 const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
@@ -114,9 +116,9 @@ function UserSelectInline({
       {selectedIds.length > 1 && (
         <div className="flex flex-wrap gap-1 mt-1.5">
           {selectedIds.map((uid) => (
-            <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400">
+            <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 dg-text-blue">
               {getUserName(uid)}
-              <button onClick={() => onToggle(uid)} className="hover:text-red-400"><X className="w-3 h-3" /></button>
+              <button onClick={() => onToggle(uid)} className="hover:dg-text-red"><X className="w-3 h-3" /></button>
             </span>
           ))}
         </div>
@@ -128,11 +130,11 @@ function UserSelectInline({
           <div className="fixed z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto"
             style={{ top: pos.top, left: pos.left, width: pos.width }}>
             <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
-              <button onClick={onToggleAll} className="text-[11px] text-blue-400 hover:text-blue-300">
+              <button onClick={onToggleAll} className="text-[11px] dg-text-blue hover:text-blue-300">
                 {selectedIds.length === users.length && users.length > 0 ? t('approval.editor.deselectAll') : t('approval.editor.selectAll')}
               </button>
               {selectedIds.length > 0 && (
-                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300">{t('common.clear')}</button>
+                <button onClick={onClear} className="text-[11px] dg-text-red hover:dg-text-red">{t('common.clear')}</button>
               )}
             </div>
             {users.map((u) => {
@@ -333,7 +335,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
         </div>
 
         <div className="px-5 pb-5 space-y-4 pt-4">
-          {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
+          {error && <div className="px-3 py-2 text-sm dg-text-red bg-red-500/10 rounded-lg">{error}</div>}
 
           <div className="grid grid-cols-2 gap-4">
             <div>
@@ -362,7 +364,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
               <div className="flex items-center gap-1">
                 {stepTypes.map((tp) => (
                   <button key={tp.value} onClick={() => addStep(tp.value)}
-                    className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 rounded transition-colors">
+                    className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 dg-text-blue hover:bg-blue-500/20 rounded transition-colors">
                     <Plus className="w-3 h-3" />{tp.label}
                   </button>
                 ))}
@@ -397,7 +399,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
                           <ArrowDown className="w-3.5 h-3.5" />
                         </button>
                         <button onClick={() => removeStep(idx)}
-                          className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors">
+                          className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors">
                           <Trash2 className="w-3.5 h-3.5" />
                         </button>
                       </div>
@@ -541,47 +543,40 @@ export default function ApprovalWorkflowPage() {
     [users]
   );
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
-        <p className="text-sm">{error}</p>
-        <Button variant="outline" onClick={fetchWorkflows} className="mt-3">{t('approval.retry')}</Button>
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-[var(--dg-text-primary)]">{t('approval.workflowTitle')}</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
-            {t('approval.workflowSubtitle')}
-          </p>
-        </div>
-        <Button onClick={() => setEditorWorkflow(null)}>
-          <Plus className="w-4 h-4 mr-1.5" />{t('approval.newWorkflow')}
-        </Button>
-      </div>
-
-      {items.length === 0 ? (
-        <div className="dg-card p-12 text-center">
-          <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
-          <p className="text-sm text-[var(--dg-text-muted)] mb-4">{t('approval.noWorkflows')}</p>
-          <Button variant="outline" onClick={() => setEditorWorkflow(null)}>{t('approval.createFirst')}</Button>
-        </div>
-      ) : (
-        <>
-          {/* Workflow list */}
+    <>
+      <PageShell
+        variant="list"
+        title={t('approval.workflowTitle')}
+        subtitle={t('approval.workflowSubtitle')}
+        icon={<GitBranch className="h-5 w-5" />}
+        loading={loading}
+        actions={(
+          <Button className="dg-btn-primary" onClick={() => setEditorWorkflow(null)}>
+            <Plus className="w-4 h-4 mr-1.5" />{t('approval.newWorkflow')}
+          </Button>
+        )}
+      >
+        {error ? (
+          <PageEmpty
+            title={error}
+            action={(
+              <Button variant="outline" className="dg-btn-secondary" onClick={fetchWorkflows}>
+                {t('approval.retry')}
+              </Button>
+            )}
+          />
+        ) : items.length === 0 ? (
+          <PageEmpty
+            icon={<GitBranch className="w-12 h-12" />}
+            title={t('approval.noWorkflows')}
+            action={(
+              <Button variant="outline" className="dg-btn-secondary" onClick={() => setEditorWorkflow(null)}>
+                {t('approval.createFirst')}
+              </Button>
+            )}
+          />
+        ) : (
           <div className="space-y-4">
             {items.map((wf) => {
               const isExpanded = expandedId === wf.id;
@@ -592,11 +587,11 @@ export default function ApprovalWorkflowPage() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-3 mb-2 flex-wrap">
                           <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{wf.name}</h3>
-                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 text-yellow-400 flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
-                          <span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}>
+                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 dg-text-yellow flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 dg-text-green' : 'bg-red-500/15 dg-text-red'}`}>
                             {wf.is_active ? t('approval.status.enabled') : t('approval.status.disabled')}
                           </span>
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 dg-text-blue">
                             {categoryLabels[wf.category] || wf.category}
                           </span>
                         </div>
@@ -604,7 +599,7 @@ export default function ApprovalWorkflowPage() {
                         <div className="flex items-center gap-1.5 mt-2 flex-wrap">
                           {wf.steps?.map((s, i) => (
                             <span key={i} className="flex items-center gap-1">
-                              <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
+                              <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
                                 {stepTypeLabels[s.step_type] || s.step_type}
                               </span>
                               {i < (wf.steps?.length || 0) - 1 && (
@@ -622,21 +617,21 @@ export default function ApprovalWorkflowPage() {
                         </button>
                         {!wf.is_default && (
                           <button onClick={() => setDefault(wf.id)}
-                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:text-yellow-400 transition-colors" title={t('approval.msg.setDefaultSuccess')}>
+                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:dg-text-yellow transition-colors" title={t('approval.msg.setDefaultSuccess')}>
                             <Star className="w-4 h-4" />
                           </button>
                         )}
                         <button onClick={() => toggleActive(wf)}
-                          className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 text-green-400 hover:text-red-400' : 'hover:bg-green-500/10 text-red-400 hover:text-green-400'}`}
+                          className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 dg-text-green hover:dg-text-red' : 'hover:bg-green-500/10 dg-text-red hover:dg-text-green'}`}
                           title={wf.is_active ? t('approval.status.disabled') : t('approval.status.enabled')}>
                           <Play className={`w-4 h-4 ${!wf.is_active ? 'rotate-180' : ''}`} />
                         </button>
                         <button onClick={() => setEditorWorkflow(wf)}
-                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors" title={t('common.edit')}>
+                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:dg-text-blue transition-colors" title={t('common.edit')}>
                           <Edit2 className="w-4 h-4" />
                         </button>
                         <button onClick={() => handleDelete(wf.id, wf.name)}
-                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors" title={t('common.delete')}>
+                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:dg-text-red transition-colors" title={t('common.delete')}>
                           <Trash2 className="w-4 h-4" />
                         </button>
                       </div>
@@ -654,21 +649,21 @@ export default function ApprovalWorkflowPage() {
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-2 mb-1">
                                   <span className="text-sm font-medium text-[var(--dg-text-primary)]">{s.name}</span>
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
+                                  <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'dg-badge-muted'}`}>
                                     {stepTypeLabels[s.step_type] || s.step_type}
                                   </span>
                                 </div>
                                 {ids.length > 0 && (
                                   <div className="flex flex-wrap gap-1">
                                     {ids.map((uid) => (
-                                      <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400">
+                                      <span key={uid} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 dg-text-blue">
                                         {getUserName(uid)}
                                       </span>
                                     ))}
                                   </div>
                                 )}
                                 {ids.length === 0 && s.step_type !== 'submit' && (
-                                  <span className="text-[11px] text-red-400">{t('approval.detail.noApproverLinked')}</span>
+                                  <span className="text-[11px] dg-text-red">{t('approval.detail.noApproverLinked')}</span>
                                 )}
                               </div>
                             </div>
@@ -681,8 +676,8 @@ export default function ApprovalWorkflowPage() {
               );
             })}
           </div>
-        </>
-      )}
+        )}
+      </PageShell>
 
       {editorWorkflow !== undefined && (
         <WorkflowEditorModal
@@ -692,6 +687,6 @@ export default function ApprovalWorkflowPage() {
           onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
         />
       )}
-    </div>
+    </>
   );
 }