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

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

frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx

@@ -158,7 +158,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label>名称 <span className="text-red-400">*</span></Label>
+              <Label>名称 <span className="dg-text-red">*</span></Label>
               <Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="例如: demo-jar 后端部署" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
             </div>
             <div className="space-y-1">
@@ -238,7 +238,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
 
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label>Git URL {selectedStages.includes('checkout') && <span className="text-red-400">*</span>}</Label>
+              <Label>Git URL {selectedStages.includes('checkout') && <span className="dg-text-red">*</span>}</Label>
               <Input value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="https://gitee.com/user/repo.git" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
             </div>
             <div className="space-y-1">
@@ -260,10 +260,10 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                   ))}
                 </SelectContent>
               </Select>
-              {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs text-amber-400">建议关联凭证</p>}
+              {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs dg-text-yellow">建议关联凭证</p>}
             </div>
             <div className="space-y-1">
-              <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="text-red-400">*</span>}</Label>
+              <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="dg-text-red">*</span>}</Label>
               <Select value={String(newRegistryCredentialId)} onValueChange={(v) => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
                 <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择 Docker 凭证" /></SelectTrigger>
                 <SelectContent>
@@ -277,13 +277,13 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                   ))}
                 </SelectContent>
               </Select>
-              {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs text-amber-400">需要关联 Docker 凭证</p>}
+              {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs dg-text-yellow">需要关联 Docker 凭证</p>}
             </div>
           </div>
 
           {newRegistryCredentialId && newJobName && (
             <div className="p-2.5 rounded-md bg-blue-500/5 border border-blue-500/20 text-xs text-[var(--dg-text-secondary)]">
-              <span className="text-blue-400">镜像命名：</span>
+              <span className="dg-text-blue">镜像命名：</span>
               <code className="text-[var(--dg-text-primary)]">{'{registry}'}/{'{namespace}'}/{'{'}{'{JOB_BASE_NAME}'}{'}'}:{'{'}{'{tag}'}{'}'}</code>
               <span className="ml-2 opacity-60">例：</span>
               <code className="opacity-60">harbor.ast1001.com/test/{newJobName}:latest</code>
@@ -456,7 +456,7 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
                       placeholder="说明"
                       className="col-span-4 h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
                     />
-                    <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 text-red-400" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
+                    <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 dg-text-red" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
                       <Trash2 className="h-3.5 w-3.5" />
                     </Button>
                   </div>