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

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

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