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

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