refactor(frontend): api/components/pages 目录架构统一对齐菜单域 + 日志中心修复

1. 目录架构统一（API = components = 菜单域，一域一目录 + barrel）
   - log/ 提为独立顶层域（日志中心在菜单中与监控中心平级，不再塞在 monitor/）
   - task/ 拆分原 automation.ts → cron-job / script / remote-exec
   - aiops/ 合并 ai.ts + agentCli.ts → assistant + agent-cli
   - agent/ approval/ audit/ 提升为域目录
   - auth 拆分：authApi(认证自服务) + system/user.ts(userApi+ldapApi 管理端)
   - components/automation → components/task，菜单"自动化运维"→"作业任务"
   - pages/ 按域分子目录(approval/audit/monitor)，删孤儿 AuditPage.tsx
   - 所有 API 符号名不变，组件经 @/api 聚合引用，运行时行为零变化

2. Loki 查询无返回修复：aiops 容器 DNS 解析外网域名失败
   （宿主机 systemd-resolved 转发链路异常），docker-compose 显式配 dns 上游

3. ES 查询框布局：工具栏单行挤 7 控件(ES 多 150px 索引框)，拆两行——
   查询输入独占一行(+查询按钮)，次级控件换行 flex-wrap

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/pages/approval/ApprovalAppPage.tsx

@@ -0,0 +1,25 @@
+// 应用申请子页面 — 应用部署、版本发布申请
+import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
+
+const APP_FIELDS: FormField[] = [
+  { key: 'app_name', label: '应用名称', type: 'text', placeholder: '如 user-service', required: true },
+  { key: 'git_url', label: 'Git 地址', type: 'text', placeholder: '如 https://github.com/org/repo.git', required: true },
+  { key: 'branch', label: '分支', type: 'text', defaultValue: 'main', required: true },
+  { key: 'language', label: '开发语言', type: 'select', options: ['Java', 'Go', 'Python', 'Node.js', 'C++'], required: true },
+  { key: 'http_port', label: 'HTTP 端口', type: 'number', placeholder: '如 8080' },
+  { key: 'env', label: '部署环境', type: 'select', options: ['dev', 'staging', 'prod'], required: true },
+  { key: 'replicas', label: '副本数', type: 'number', defaultValue: 2, required: true },
+  { key: 'remark', label: '备注', type: 'textarea' },
+];
+
+export function ApprovalAppPage() {
+  return (
+    <ApprovalCategoryPage
+      category="app"
+      title="应用申请"
+      description="申请应用部署、版本发布、流水线配置"
+      fields={APP_FIELDS}
+      templateCode="app_deploy"
+    />
+  );
+}

frontend/src/pages/approval/ApprovalCategoryPage.tsx

@@ -0,0 +1,483 @@
+// 审批分类通用页面 — 资源申请/应用申请/权限审批三个子页面共用
+import { useState, useEffect, useCallback } from 'react';
+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';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog';
+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 { approvalApi } from '@/api';
+import { toast } from 'sonner';
+import type { JsonData } from '@/types/common';
+
+export interface FormField {
+  key: string; label: string; type: 'text' | 'number' | 'select' | 'textarea';
+  options?: string[]; placeholder?: string; defaultValue?: string | number; required?: boolean;
+}
+
+interface Props {
+  category: 'resource' | 'app' | 'permission';
+  title: string; description: string; fields: FormField[]; templateCode: string;
+}
+
+interface StepItem {
+  id: number; step: number; step_type?: string; approver: number; status: string; comment: string;
+  approved_at: string | null; approver_user?: { username?: string; real_name?: string };
+}
+
+interface ProcessItem {
+  id: number; title: string; status: string; form_data: string; created_at: string;
+  applicant: number; applicant_user?: { username?: string; real_name?: string };
+  template?: { name?: string }; current_step?: number; total_steps?: number;
+  steps?: StepItem[];
+}
+
+const statusBadge = (status: 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" />已通过</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" />已拒绝</Badge>;
+    default: return <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"><Clock className="h-3 w-3 mr-1" />审批中</Badge>;
+  }
+};
+
+function parseFormData(data: string): Record<string, string> {
+  try { return JSON.parse(data) || {}; } catch { return {}; }
+}
+
+function getApplicant(p: JsonData): string {
+  const u = p?.applicant_user;
+  return u ? (u.real_name || u.username || `#${p.applicant}`) : (p?.applicant ? `#${p.applicant}` : '--');
+}
+
+function getCurrentApprover(p: ProcessItem): string {
+  if (p.status !== 'pending') return '--';
+  const steps = p.steps || [];
+  if (steps.length === 0) return '管理员（待分配）';
+  const cs = steps.find(s => s.step === p.current_step && s.status === 'pending');
+  if (!cs) return '管理员（待分配）';
+  if (cs.approver_user) return cs.approver_user.real_name || cs.approver_user.username || `#${cs.approver}`;
+  return '管理员';
+}
+
+export function ApprovalCategoryPage({ category, title, description, fields, templateCode }: Props) {
+  const [processes, setProcesses] = useState<ProcessItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [keyword, setKeyword] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [templateId, setTemplateId] = useState<number | null>(null);
+  const [formData, setFormData] = useState<Record<string, string>>({});
+  const [detailItem, setDetailItem] = useState<ProcessItem | null>(null);
+  const [acting, setActing] = useState(false);
+
+  const fetchProcesses = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: JsonData = { page_size: '100' };
+      if (category) params.category = category;
+      if (statusFilter) params.status = statusFilter;
+      const resp = (await approvalApi.getProcesses(params)) as JsonData;
+      setProcesses(resp?.list ?? resp?.data?.list ?? []);
+    } catch { setProcesses([]); }
+    finally { setLoading(false); }
+  }, [category, statusFilter]);
+
+  const fetchTemplateId = useCallback(async () => {
+    try {
+      const resp = (await approvalApi.getTemplates({ type: templateCode })) as JsonData;
+      const list = resp?.list ?? resp?.data?.list ?? [];
+      if (list.length > 0) setTemplateId(list[0].id);
+    } catch {}
+  }, [templateCode]);
+
+  useEffect(() => { fetchProcesses(); }, [fetchProcesses]);
+  useEffect(() => { fetchTemplateId(); }, [fetchTemplateId]);
+
+  const handleCreate = async () => {
+    if (!templateId) { toast.error('模板未加载'); return; }
+    for (const f of fields) { if (f.required && !formData[f.key]) { toast.error(`请填写「${f.label}」`); return; } }
+    setSubmitting(true);
+    try {
+      const firstVal = formData[fields[0]?.key] || '';
+      const secondVal = fields[1] ? formData[fields[1].key] || '' : '';
+      await approvalApi.createProcess({
+        template_id: templateId,
+        title: `${title} - ${firstVal}${secondVal ? ' / ' + secondVal : ''}`,
+        form_data: JSON.stringify(formData),
+      });
+      toast.success('申请已提交');
+      setDialogOpen(false); setFormData({}); fetchProcesses();
+    } catch (err) { toast.error(err?.message || '提交失败'); }
+    finally { setSubmitting(false); }
+  };
+
+  const openCreateDialog = () => {
+    const init: Record<string, string> = {};
+    fields.forEach((f) => { init[f.key] = f.defaultValue?.toString() || ''; });
+    setFormData(init); setDialogOpen(true);
+  };
+
+  const handleApprove = async (id: number) => {
+    setActing(true);
+    try { await approvalApi.approveProcess(id); toast.success('已通过'); fetchProcesses(); }
+    catch (err) { toast.error(err?.response?.data?.message || '审批失败'); }
+    finally { setActing(false); }
+  };
+
+  const handleReject = async (id: number) => {
+    setActing(true);
+    try { await approvalApi.rejectProcess(id, '审批拒绝'); toast.success('已拒绝'); fetchProcesses(); }
+    catch (err) { toast.error(err?.response?.data?.message || '操作失败'); }
+    finally { setActing(false); }
+  };
+
+  const openDetail = async (p: ProcessItem) => {
+    // Load full detail including steps
+    try {
+      const resp: JsonData = await approvalApi.getProcesses({ page_size: 200 } as JsonData);
+      const list = resp?.list ?? resp?.data?.list ?? [];
+      const full = list.find((x: JsonData) => x.id === p.id);
+      setDetailItem(full || p);
+    } catch { setDetailItem(p); }
+  };
+
+  const filtered = processes.filter((p) => !keyword || (p.title || '').toLowerCase().includes(keyword.toLowerCase()));
+
+  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" />新建申请
+        </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="搜索申请..." 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="全部状态" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            <SelectItem value="pending">审批中</SelectItem>
+            <SelectItem value="approved">已通过</SelectItem>
+            <SelectItem value="rejected">已拒绝</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" size="sm" className="border-[var(--dg-border)]" onClick={fetchProcesses}>
+          <RefreshCw className="h-4 w-4 mr-2" />刷新
+        </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">暂无申请记录</p>
+              <Button variant="link" className="mt-2" onClick={openCreateDialog}>立即申请</Button>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+                  <TableHead className="text-[var(--dg-text-secondary)]">提交时间</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">提交账号</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">当前审核人</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)] w-28">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filtered.map((p) => (
+                  <TableRow key={p.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
+                    <TableCell className="text-[var(--dg-text-muted)] text-sm whitespace-nowrap">
+                      {p.created_at ? new Date(p.created_at).toLocaleString('zh-CN') : '--'}
+                    </TableCell>
+                    <TableCell className="text-[var(--dg-text-primary)]">{getApplicant(p)}</TableCell>
+                    <TableCell className="text-[var(--dg-text-muted)] text-sm">{getCurrentApprover(p)}</TableCell>
+                    <TableCell>{statusBadge(p.status)}</TableCell>
+                    <TableCell>
+                      <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}>
+                              <XIcon className="h-3.5 w-3.5 mr-1" />拒绝
+                            </Button>
+                            <Button variant="ghost" size="sm" className="h-8 text-emerald-400 hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
+                              <Check className="h-3.5 w-3.5 mr-1" />通过
+                            </Button>
+                          </>
+                        ) : (
+                          <Button variant="ghost" size="sm" className="h-8 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => openDetail(p)}>
+                            <Eye className="h-3.5 w-3.5 mr-1" />详情
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Create Dialog */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-[var(--dg-text-primary)]">新建{title}</DialogTitle>
+            <DialogDescription className="text-[var(--dg-text-secondary)]">{description}</DialogDescription>
+          </DialogHeader>
+          <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>
+                {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 || `选择${field.label}`} /></SelectTrigger>
+                    <SelectContent>{(field.options || []).map((opt) => (<SelectItem key={opt} value={opt}>{opt}</SelectItem>))}</SelectContent>
+                  </Select>
+                ) : field.type === 'textarea' ? (
+                  <textarea value={formData[field.key] || ''} onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    placeholder={field.placeholder} rows={3}
+                    className="w-full rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] px-3 py-2 text-sm resize-none focus:outline-none focus:border-[var(--dg-blue)]" />
+                ) : (
+                  <Input type={field.type} value={formData[field.key] || ''} onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    placeholder={field.placeholder} className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-end gap-3 pt-2">
+            <Button variant="outline" className="border-[var(--dg-border)]" onClick={() => setDialogOpen(false)}>取消</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" />提交中...</> : '提交申请'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Detail Dialog — operation timeline */}
+      <DetailTimelineDialog item={detailItem} onClose={() => setDetailItem(null)} fields={fields} onStatusChange={fetchProcesses} />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  DetailTimelineDialog — 操作时间线                                   */
+/* ------------------------------------------------------------------ */
+
+function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
+  item: ProcessItem | null; onClose: () => void; fields: FormField[]; onStatusChange: () => void;
+}) {
+  const [acting, setActing] = useState(false);
+  if (!item) return null;
+
+  const timeStr = (t: string | null) => {
+    if (!t) return '';
+    return new Date(t).toLocaleString('zh-CN');
+  };
+
+  const steps = item.steps || [];
+
+  const handleApprove = async () => {
+    setActing(true);
+    try { await approvalApi.approveProcess(item.id); toast.success('已通过'); onStatusChange(); onClose(); }
+    catch (err) { toast.error(err?.response?.data?.message || '审批失败'); }
+    finally { setActing(false); }
+  };
+
+  const handleReject = async () => {
+    setActing(true);
+    try { await approvalApi.rejectProcess(item.id, '审批拒绝'); toast.success('已拒绝'); onStatusChange(); onClose(); }
+    catch (err) { toast.error(err?.response?.data?.message || '操作失败'); }
+    finally { setActing(false); }
+  };
+
+  const stepStatusLabel = (s: StepItem) => {
+    if (s.status === 'approved') return '通过';
+    if (s.status === 'rejected') return '拒绝';
+    if (s.status === 'pending' && s.step === item.current_step) return '待审批';
+    if (s.status === 'pending') return '待开始';
+    return s.status;
+  };
+
+  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';
+    return 'text-[var(--dg-text-muted)]';
+  };
+
+  const approverName = (s: StepItem) => {
+    if (s.approver_user) return s.approver_user.real_name || s.approver_user.username || `#${s.approver}`;
+    return '管理员';
+  };
+
+  return (
+    <Dialog open={!!item} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-[var(--dg-text-primary)]">申请详情</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-secondary)]">{item.title}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Status + Meta */}
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-[var(--dg-text-muted)]">状态：</span>
+            {statusBadge(item.status)}
+            {item.status === 'pending' && (
+              <span className="text-xs text-[var(--dg-text-muted)]">
+                第 {item.current_step}/{item.total_steps} 步
+              </span>
+            )}
+          </div>
+
+          {/* Operation Timeline */}
+          <div className="border-t border-[var(--dg-border)] pt-4">
+            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-4">操作时间线</h4>
+            <div className="space-y-0">
+              {/* 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-0.5 flex-1 bg-[var(--dg-border)] my-1" />
+                </div>
+                <div className="flex-1 pb-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-[var(--dg-text-primary)]">提交申请</span>
+                    <span className="text-xs text-[var(--dg-text-muted)]">·</span>
+                    <span className="text-xs text-[var(--dg-text-secondary)]">{getApplicant(item)}</span>
+                    <span className="text-xs text-[var(--dg-text-muted)]">·</span>
+                    <span className="text-xs text-[var(--dg-text-muted)]">{timeStr(item.created_at)}</span>
+                  </div>
+                  {/* Form data summary */}
+                  <div className="mt-1 flex flex-wrap gap-2">
+                    {(() => {
+                      const data = parseFormData(item.form_data || '{}');
+                      return fields.slice(0, 4).map((f) => {
+                        const val = data[f.key];
+                        if (!val) return null;
+                        return (
+                          <span key={f.key} className="text-[11px] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
+                            {f.label}: <span className="text-[var(--dg-text-secondary)]">{val}</span>
+                          </span>
+                        );
+                      });
+                    })()}
+                  </div>
+                </div>
+              </div>
+
+              {/* 2. Approval / Execution steps */}
+              {steps.map((s, i) => {
+                const isLast = i === steps.length - 1;
+                const isExecute = s.step_type === 'execute';
+                const stepLabel = isExecute ? '执行' : '审核';
+                const iconColor = s.status === 'approved' ? 'bg-emerald-500/20'
+                  : s.status === 'rejected' ? 'bg-red-500/20'
+                  : 'bg-[var(--dg-bg-tertiary)]';
+                return (
+                  <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" />
+                            : 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)]'}`} />}
+                      </div>
+                      {!isLast && <div className="w-0.5 flex-1 bg-[var(--dg-border)] my-1" />}
+                    </div>
+                    <div className={`flex-1 ${!isLast ? 'pb-4' : ''}`}>
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-medium text-[var(--dg-text-primary)]">{stepLabel}</span>
+                        {s.approver_user && (
+                          <>
+                            <span className="text-xs text-[var(--dg-text-muted)]">·</span>
+                            <span className="text-xs text-[var(--dg-text-secondary)]">指派人: {approverName(s)}</span>
+                          </>
+                        )}
+                        {s.approved_at && (
+                          <>
+                            <span className="text-xs text-[var(--dg-text-muted)]">·</span>
+                            <span className={`text-xs ${stepStatusColor(s)}`}>
+                              {approverName(s)} · {stepStatusLabel(s)} · {timeStr(s.approved_at)}
+                            </span>
+                          </>
+                        )}
+                        {!s.approved_at && (
+                          <>
+                            <span className="text-xs text-[var(--dg-text-muted)]">·</span>
+                            <span className={`text-xs ${stepStatusColor(s)}`}>{stepStatusLabel(s)}</span>
+                          </>
+                        )}
+                      </div>
+                      {s.comment && s.comment !== s.status && s.comment !== 'pending' && (
+                        <p className="text-xs text-[var(--dg-text-muted)] mt-1 ml-0">{s.comment}</p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Full form data */}
+          <div className="border-t border-[var(--dg-border)] pt-4">
+            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-2">申请内容</h4>
+            <div className="space-y-2">
+              {(() => {
+                const data = parseFormData(item.form_data || '{}');
+                return fields.map((f) => {
+                  const val = data[f.key];
+                  return (
+                    <div key={f.key} className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-[var(--dg-text-muted)]">{f.label}：</span>
+                      <span className="text-[var(--dg-text-primary)] col-span-2">{val ?? '--'}</span>
+                    </div>
+                  );
+                });
+              })()}
+            </div>
+          </div>
+        </div>
+
+        <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}>
+                <XIcon className="h-4 w-4 mr-1.5" />拒绝
+              </Button>
+              <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleApprove} disabled={acting}>
+                <Check className="h-4 w-4 mr-1.5" />通过
+              </Button>
+            </>
+          )}
+          <Button variant="outline" className="border-[var(--dg-border)]" onClick={onClose}>关闭</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/pages/approval/ApprovalPermissionPage.tsx

@@ -0,0 +1,25 @@
+// 权限审批子页面 — 堡垒机、VPN、日志查询、数据查询等权限申请
+import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
+
+const PERMISSION_FIELDS: FormField[] = [
+  { key: 'perm_type', label: '权限类型', type: 'select', options: [
+    '堡垒机权限', '生产VPN权限', '日志查询权限', '数据库查询权限', '服务器SSH权限', 'K8s集群权限',
+  ], required: true },
+  { key: 'account', label: '申请账号', type: 'text', placeholder: '如 logan.li', required: true },
+  { key: 'reason', label: '申请理由', type: 'textarea', placeholder: '说明为什么需要该权限', required: true },
+  { key: 'duration', label: '权限时长', type: 'select', options: [
+    '临时(24小时)', '短期(7天)', '中期(30天)', '长期(90天)', '永久',
+  ], required: true },
+];
+
+export function ApprovalPermissionPage() {
+  return (
+    <ApprovalCategoryPage
+      category="permission"
+      title="权限审批"
+      description="申请堡垒机、VPN、日志查询、数据库查询等运维权限"
+      fields={PERMISSION_FIELDS}
+      templateCode="permission_request"
+    />
+  );
+}

frontend/src/pages/approval/ApprovalResourcePage.tsx

@@ -0,0 +1,24 @@
+// 资源申请子页面 — 云服务器、存储、网络等资源申请
+import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
+
+const RESOURCE_FIELDS: FormField[] = [
+  { key: 'provider', label: '云厂商', type: 'select', options: ['阿里云', '腾讯云', '华为云', 'AWS'], required: true },
+  { key: 'region', label: '地域', type: 'text', placeholder: '如 cn-hangzhou', required: true },
+  { key: 'spec', label: '规格', type: 'select', options: ['2C4G', '4C8G', '8C16G', '16C32G', '32C64G'], required: true },
+  { key: 'disk', label: '系统盘(GB)', type: 'number', defaultValue: 40, required: true },
+  { key: 'count', label: '数量(台)', type: 'number', defaultValue: 1, required: true },
+  { key: 'duration', label: '时长', type: 'select', options: ['1个月', '3个月', '6个月', '1年'], required: true },
+  { key: 'purpose', label: '用途说明', type: 'textarea', required: true },
+];
+
+export function ApprovalResourcePage() {
+  return (
+    <ApprovalCategoryPage
+      category="resource"
+      title="资源申请"
+      description="申请云服务器、存储、网络等基础设施资源"
+      fields={RESOURCE_FIELDS}
+      templateCode="server_apply"
+    />
+  );
+}

frontend/src/pages/approval/ApprovalWorkflowPage.tsx

@@ -0,0 +1,676 @@
+// 审批流程配置 — 参考 OpsxSQL WorkflowPage 工作流模式
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Plus, Edit2, Trash2, X, ChevronDown, ChevronUp, ArrowUp, ArrowDown,
+  Play, Loader2, Star, CheckCircle, GitBranch, Users, Shield,
+} from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { approvalWorkflowApi, userApi } from '@/api';
+import { useConfirm } from '@/components/ui/confirm-dialog';
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface WorkflowStep {
+  id?: number;
+  workflow_id?: number;
+  step_number: number;
+  name: string;
+  step_type: string;
+  approver_ids: string | null;
+  is_required: boolean;
+  timeout_hours: number;
+  auto_approve_on_timeout: boolean;
+}
+
+interface WorkflowItem {
+  id: number;
+  name: string;
+  description: string | null;
+  category: string;
+  is_default: boolean;
+  is_active: boolean;
+  created_at: string;
+  steps: WorkflowStep[];
+}
+
+interface UserItem {
+  id: number;
+  username: string;
+  display_name: string | null;
+  role: string;
+  is_active?: boolean;
+}
+
+interface StepDraft {
+  name: string;
+  step_type: 'submit' | 'audit' | 'execute';
+  approver_ids: number[];
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  resource: '资源申请',
+  app: '应用申请',
+  permission: '权限审批',
+};
+
+const STEP_TYPE_LABELS: Record<string, string> = {
+  submit: '提交阶段',
+  audit: '审核阶段',
+  execute: '执行阶段',
+};
+
+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',
+};
+
+const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
+  submit: Users,
+  audit: Shield,
+  execute: Play,
+};
+
+const STEP_TYPES = [
+  { value: 'submit' as const, label: '提交阶段', desc: '工单提交人' },
+  { value: 'audit' as const, label: '审核阶段', desc: '审核人员审批' },
+  { value: 'execute' as const, label: '执行阶段', desc: '执行人员操作' },
+];
+
+
+
+/* ------------------------------------------------------------------ */
+/*  UserSelectInline                                                    */
+/* ------------------------------------------------------------------ */
+
+function UserSelectInline({
+  users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName,
+}: {
+  users: UserItem[];
+  selectedIds: number[];
+  label: string;
+  onToggle: (uid: number) => void;
+  onToggleAll: () => void;
+  onClear: () => void;
+  getUserName: (uid: number) => string;
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+
+  const updatePos = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => { if (!open) updatePos(); setOpen(!open); }}
+        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${
+          selectedIds.length === 0
+            ? 'bg-[var(--dg-bg-tertiary)] border border-red-500/40 text-[var(--dg-text-muted)]'
+            : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)]'
+        }`}
+      >
+        <span className="truncate">
+          {selectedIds.length === 0 ? `${label} * 请选择` : `${label} (${selectedIds.length}人)`}
+        </span>
+        <ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {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">
+              {getUserName(uid)}
+              <button onClick={() => onToggle(uid)} className="hover:text-red-400"><X className="w-3 h-3" /></button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <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">
+                {selectedIds.length === users.length && users.length > 0 ? '取消全选' : '全选'}
+              </button>
+              {selectedIds.length > 0 && (
+                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300">清空</button>
+              )}
+            </div>
+            {users.map((u) => {
+              const checked = selectedIds.includes(u.id);
+              return (
+                <div key={u.id} onClick={() => onToggle(u.id)}
+                  className="flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors">
+                  <div className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${
+                    checked ? 'bg-blue-500 border-blue-500' : 'border-[var(--dg-border)]'
+                  }`}>
+                    {checked && <CheckCircle className="w-3 h-3 text-white" />}
+                  </div>
+                  <span className={`text-sm flex-1 ${checked ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]'}`}>
+                    {u.display_name || u.username}
+                  </span>
+                  <span className="text-[10px] text-[var(--dg-text-muted)] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)]">
+                    {u.role}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  WorkflowEditorModal                                                  */
+/* ------------------------------------------------------------------ */
+
+interface EditorProps {
+  workflow?: WorkflowItem | null;
+  users: UserItem[];
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
+  const isEdit = !!workflow;
+  const [name, setName] = useState(workflow?.name || '');
+  const [description, setDescription] = useState(workflow?.description || '');
+  const [category, setCategory] = useState(workflow?.category || 'resource');
+  const [steps, setSteps] = useState<StepDraft[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (workflow?.steps?.length) {
+      setSteps(
+        workflow.steps.map((s) => ({
+          name: s.name,
+          step_type: (s.step_type === 'serial' || s.step_type === 'parallel')
+            ? ('audit' as const)
+            : (s.step_type as 'submit' | 'audit' | 'execute'),
+          approver_ids: parseIds(s.approver_ids),
+        }))
+      );
+    } else {
+      setSteps([
+        { name: '提交申请', step_type: 'submit', approver_ids: [] },
+        { name: '审核', step_type: 'audit', approver_ids: [] },
+      ]);
+    }
+  }, [workflow]);
+
+  const parseIds = (ids: string | null): number[] => {
+    if (!ids) return [];
+    try {
+      const p = JSON.parse(ids);
+      return Array.isArray(p) ? p : [];
+    } catch { return []; }
+  };
+
+  const addStep = (type: 'submit' | 'audit' | 'execute') => {
+    const labels: Record<string, string> = { submit: '提交', audit: '审核', execute: '执行' };
+    const count = steps.filter((s) => s.step_type === type).length;
+    const suffix = count > 0 ? ` ${count + 1}` : '';
+    setSteps([...steps, { name: `${labels[type]}${suffix}`, step_type: type, approver_ids: [] }]);
+  };
+
+  const removeStep = (idx: number) => setSteps(steps.filter((_, i) => i !== idx));
+  const moveStep = (idx: number, dir: -1 | 1) => {
+    const target = idx + dir;
+    if (target < 0 || target >= steps.length) return;
+    const next = [...steps];
+    [next[idx], next[target]] = [next[target], next[idx]];
+    setSteps(next);
+  };
+  const updateStep = (idx: number, patch: Partial<StepDraft>) => {
+    setSteps(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
+  };
+  const toggleUser = (idx: number, uid: number) => {
+    const step = steps[idx];
+    const has = step.approver_ids.includes(uid);
+    updateStep(idx, { approver_ids: has ? step.approver_ids.filter((id) => id !== uid) : [...step.approver_ids, uid] });
+  };
+
+  const getEligibleUsers = (stepType: string) => {
+    const active = users.filter(u => u.is_active !== false);
+    if (stepType === 'audit') return active;
+    if (stepType === 'execute') return active.filter(u => 
+      ['super_admin', 'k8s_admin', 'release_admin', 'resource_admin'].includes(u.role)
+    );
+    return active;
+  };
+
+  const toggleAllUsers = (idx: number) => {
+    const step = steps[idx];
+    const eligible = getEligibleUsers(step.step_type);
+    const allSelected = step.approver_ids.length === eligible.length && eligible.length > 0;
+    updateStep(idx, { approver_ids: allSelected ? [] : eligible.map((u) => u.id) });
+  };
+
+  const handleSubmit = async () => {
+    if (!name.trim()) { setError('请输入流程名称'); return; }
+    if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
+    for (let i = 0; i < steps.length; i++) {
+      if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
+        setError(`步骤"${steps[i].name}"需要关联至少一个审批人`);
+        return;
+      }
+    }
+    setSubmitting(true);
+    setError('');
+    try {
+      const payload = {
+        name: name.trim(),
+        description: description.trim() || null,
+        category,
+        steps: steps.map((s, i) => ({
+          step_number: i + 1,
+          name: s.name,
+          step_type: s.step_type,
+          approver_ids: s.approver_ids.length > 0 ? JSON.stringify(s.approver_ids) : null,
+          is_required: true,
+          timeout_hours: 24,
+          auto_approve_on_timeout: false,
+        })),
+      };
+      if (isEdit && workflow) {
+        await approvalWorkflowApi.update(workflow.id, payload);
+      } else {
+        await approvalWorkflowApi.create(payload);
+      }
+      onSaved();
+    } catch (e: unknown) {
+      const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
+      setError(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const getUserName = (uid: number) => {
+    const u = users.find((u) => u.id === uid);
+    return u ? (u.display_name || u.username) : `#${uid}`;
+  };
+
+  const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors text-[var(--dg-text-primary)]';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--dg-border)]">
+          <h2 className="text-base font-semibold text-[var(--dg-text-primary)]">
+            {isEdit ? '编辑审批流程' : '新建审批流程'}
+          </h2>
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors">
+            <X className="w-4 h-4" />
+          </button>
+        </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>}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">流程名称 *</label>
+              <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="输入流程名称" />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">所属分类</label>
+              <select className={inputCls} value={category} onChange={(e) => setCategory(e.target.value)}>
+                <option value="resource">资源申请</option>
+                <option value="app">应用申请</option>
+                <option value="permission">权限审批</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">描述</label>
+            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="可选" />
+          </div>
+
+          {/* Steps */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="text-xs font-medium text-[var(--dg-text-secondary)]">流程步骤</label>
+              <div className="flex items-center gap-1">
+                {STEP_TYPES.map((t) => (
+                  <button key={t.value} onClick={() => addStep(t.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">
+                    <Plus className="w-3 h-3" />{t.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              {steps.map((step, idx) => {
+                const colorCls = STEP_TYPE_COLORS[step.step_type];
+                const Icon = STEP_TYPE_ICONS[step.step_type] || Shield;
+                return (
+                  <div key={idx} className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}>
+                        <Icon className={`w-3.5 h-3.5 ${colorCls.split(' ')[1]}`} />
+                      </div>
+                      <input
+                        className="flex-1 px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-sm focus:border-blue-400 focus:outline-none text-[var(--dg-text-primary)]"
+                        value={step.name} onChange={(e) => updateStep(idx, { name: e.target.value })}
+                        placeholder="步骤名称"
+                      />
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
+                        {STEP_TYPE_LABELS[step.step_type]}
+                      </span>
+                      <div className="flex items-center gap-0.5 ml-1">
+                        <button onClick={() => moveStep(idx, -1)} disabled={idx === 0}
+                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors">
+                          <ArrowUp className="w-3.5 h-3.5" />
+                        </button>
+                        <button onClick={() => moveStep(idx, 1)} disabled={idx === steps.length - 1}
+                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors">
+                          <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">
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    </div>
+
+                    {step.step_type !== 'submit' && (
+                      <div className="pl-9 mt-2">
+                        <UserSelectInline
+                          users={getEligibleUsers(step.step_type)}
+                          selectedIds={step.approver_ids}
+                          label={step.step_type === 'audit' ? '审核人' : '执行人'}
+                          onToggle={(uid) => toggleUser(idx, uid)}
+                          onToggleAll={() => toggleAllUsers(idx)}
+                          onClear={() => updateStep(idx, { approver_ids: [] })}
+                          getUserName={getUserName}
+                        />
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {steps.length === 0 && (
+                <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
+                  请点击上方按钮添加流程步骤
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-5 py-4 border-t border-[var(--dg-border)]">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] rounded-lg transition-colors">
+            取消
+          </button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            {submitting && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
+            {isEdit ? '保存' : '创建'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main Page                                                           */
+/* ------------------------------------------------------------------ */
+
+export default function ApprovalWorkflowPage() {
+  const confirm = useConfirm();
+  const [items, setItems] = useState<WorkflowItem[]>([]);
+  const [users, setUsers] = useState<UserItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [editorWorkflow, setEditorWorkflow] = useState<WorkflowItem | null | undefined>(undefined);
+
+  const fetchWorkflows = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const res: any = await approvalWorkflowApi.list();
+      const data = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : []);
+      const normalized = data.map((w: any) => ({ ...w, steps: w.steps || [] }));
+      setItems(normalized);
+    } catch {
+      setError('获取审批流程失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      const res: any = await userApi.getUsers();
+      const data = Array.isArray(res?.list) ? res.list : (Array.isArray(res) ? res : []);
+      // Normalize: extract role code from roles array
+      const normalized = data.map((u: any) => ({
+        ...u,
+        role: u.role || (Array.isArray(u.roles) && u.roles.length > 0 ? u.roles[0].code : ''),
+      }));
+      setUsers(normalized);
+    } catch { /* ignore */ }
+  }, []);
+
+  useEffect(() => {
+    fetchWorkflows();
+    fetchUsers();
+  }, [fetchWorkflows, fetchUsers]);
+
+  const toggleActive = useCallback(async (wf: WorkflowItem) => {
+    try {
+      await approvalWorkflowApi.update(wf.id, { is_active: !wf.is_active });
+      setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
+      toast.success(wf.is_active ? '已停用' : '已启用');
+    } catch { toast.error('操作失败'); }
+  }, []);
+
+  const handleDelete = useCallback(async (id: number, name: string) => {
+    const ok = await confirm({
+      title: '删除审批流程',
+      description: `确定删除审批流程「${name}」？删除后不可恢复。`,
+      confirmText: '删除',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try {
+      await approvalWorkflowApi.delete(id);
+      setItems((prev) => prev.filter((w) => w.id !== id));
+      toast.success('已删除');
+    } catch { toast.error('删除失败'); }
+  }, [confirm]);
+
+  const setDefault = useCallback(async (id: number) => {
+    try {
+      await approvalWorkflowApi.setDefault(id);
+      setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
+      toast.success('已设为默认');
+    } catch { toast.error('操作失败'); }
+  }, []);
+
+  const getUserName = useCallback(
+    (uid: number) => {
+      const u = users.find((u) => u.id === uid);
+      return u ? (u.display_name || u.username) : `#${uid}`;
+    },
+    [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">重试</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)]">审批流程配置</h1>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
+            为资源申请、应用申请、权限审批配置多级审批流程
+          </p>
+        </div>
+        <Button onClick={() => setEditorWorkflow(null)}>
+          <Plus className="w-4 h-4 mr-1.5" />新建流程
+        </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">暂无审批流程</p>
+          <Button variant="outline" onClick={() => setEditorWorkflow(null)}>创建第一个流程</Button>
+        </div>
+      ) : (
+        <>
+          {/* Workflow list */}
+          <div className="space-y-4">
+            {items.map((wf) => {
+              const isExpanded = expandedId === wf.id;
+              return (
+                <Card key={wf.id} className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-50' : ''}`}>
+                  <CardContent className="p-5">
+                    <div className="flex items-start justify-between">
+                      <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" />默认</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_active ? '启用' : '停用'}
+                          </span>
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">
+                            {CATEGORY_LABELS[wf.category] || wf.category}
+                          </span>
+                        </div>
+                        {wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-1">{wf.description}</p>}
+                        <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'}`}>
+                                {STEP_TYPE_LABELS[s.step_type] || s.step_type}
+                              </span>
+                              {i < (wf.steps?.length || 0) - 1 && (
+                                <span className="text-[var(--dg-text-muted)] text-[10px]">→</span>
+                              )}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-1 flex-shrink-0 ml-4">
+                        <button onClick={() => setExpandedId(isExpanded ? null : wf.id)}
+                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] transition-colors">
+                          {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                        </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="设为默认">
+                            <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'}`}
+                          title={wf.is_active ? '停用' : '启用'}>
+                          <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="编辑">
+                          <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="删除">
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+
+                    {isExpanded && (
+                      <div className="mt-4 pt-4 border-t border-[var(--dg-border)] space-y-3">
+                        {wf.steps?.map((s, i) => {
+                          const ids = (() => { try { const p = JSON.parse(s.approver_ids || '[]'); return Array.isArray(p) ? p : []; } catch { return []; } })();
+                          return (
+                            <div key={i} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg">
+                              <div className="w-6 h-6 rounded-full bg-[var(--dg-bg-tertiary)] flex items-center justify-center text-xs font-medium text-[var(--dg-text-secondary)] flex-shrink-0 mt-0.5">
+                                {s.step_number}
+                              </div>
+                              <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'}`}>
+                                    {STEP_TYPE_LABELS[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">
+                                        {getUserName(uid)}
+                                      </span>
+                                    ))}
+                                  </div>
+                                )}
+                                {ids.length === 0 && s.step_type !== 'submit' && (
+                                  <span className="text-[11px] text-red-400">未关联审批人</span>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {editorWorkflow !== undefined && (
+        <WorkflowEditorModal
+          workflow={editorWorkflow}
+          users={users}
+          onClose={() => setEditorWorkflow(undefined)}
+          onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
+        />
+      )}
+    </div>
+  );
+}