feat: 工单列表重设计+权限组实例过滤+通知修复

后端:
- Ticket model 新增 ticket_no 字段(格式: YYYYMMDDHHmmss+ms+seq, 如20260522160543841)
- create_ticket 自动生成工单编号(flush后生成)
- _enrich_ticket 新增 instance_name, current_approver_name 字段
- current_approver: 从 ticket_approvals 查询第一个 pending 状态的审批步骤获取审核人
- TicketResponse schema 新增 ticket_no, instance_name, current_approver_name
- 新增 /instances/accessible endpoint(按用户权限组过滤实例, 无admin bypass)
- instance_group response_model 改为 InstanceGroupDetailResponse(含readonly/write实例)
- instance_group_members 脏数据清理, 重建 group_id=2 正确数据
- notification 模板修复: \n→\n 换行, 钉钉 \n→\n\n 双换行
- test_notification endpoint 改为真正调用 NotificationSender.send()
- auditor 角色添加到 audit_rule/ticket 只读端点
- seed_data() 创建4个默认用户(admin/zhangsan/laoliu/lurenjia)
- SQLite ALTER TABLE 添加 ticket_no 列, 迁移现有6条工单数据

前端:
- TicketsPage 完全重设计: 工单编号/实例名称/提交人/当前审核人/状态/操作
- 状态映射简化: pending/reviewing/approved→审核中, success→完成, failed→失败
- 执行详情弹框: 解析 execute_result JSON 展示状态/影响行数/耗时/验证/原始输出/错误信息
- 状态流程可视化(提交→审批→通过→执行→完成)
- 快速筛选: 全部/待审批/执行中/完成/失败 (合并 pending+reviewing+approved 统计)
- TicketCreatePage: 去掉数据库类型选择器, 用 accessible(write) 过滤变更实例
- QueriesPage: 用 accessible(readonly) 过滤查询实例
- instance.ts 新增 accessible 方法
- 分页优化: 动态计算页码范围(总页>5时中间滚动)

frontend/src/pages/InstanceGroupPage.tsx

@@ -21,7 +21,7 @@ const DB_TYPE_COLORS: Record<string, string> = {
 
 /* ───────── Transfer Component ───────── */
 
-interface TransferItem { label: string; value: string; tag?: string; tagColor?: string }
+interface TransferItem { label: string; value: string; tag?: string; tagColor?: string; accessMode?: string }
 
 interface TransferProps {
   title: string;
@@ -151,10 +151,23 @@ export default function InstanceGroupPage() {
       value: String(i.id),
       tag: i.db_type,
       tagColor: DB_TYPE_COLORS[i.db_type] || '',
+      accessMode: i.access_mode || 'readwrite',
     })),
     [allInstances]
   );
 
+  // 查询授权：只匹配 read + readwrite 实例
+  const readonlyTransferItems = useMemo(() =>
+    transferItems.filter(i => i.accessMode === 'read' || i.accessMode === 'readwrite'),
+    [transferItems]
+  );
+
+  // 变更授权：只匹配 write + readwrite 实例
+  const writeTransferItems = useMemo(() =>
+    transferItems.filter(i => i.accessMode === 'write' || i.accessMode === 'readwrite'),
+    [transferItems]
+  );
+
   const filteredGroups = useMemo(() => groups.filter(g => !search || g.name.includes(search)), [groups, search]);
   const filteredUsers = useMemo(() => allUsers.filter(u => !userSearch || (u.display_name || u.username).toLowerCase().includes(userSearch.toLowerCase())), [allUsers, userSearch]);
 
@@ -263,20 +276,20 @@ export default function InstanceGroupPage() {
             <div className="rounded-xl p-4 bg-emerald-500/5 border border-emerald-500/20">
               <div className="flex items-center gap-2 mb-3">
                 <Eye className="w-4 h-4 text-emerald-400" />
-                <span className="text-sm font-medium text-emerald-400">只读查看</span>
+                <span className="text-sm font-medium text-emerald-400">查询授权</span>
                 <span className="text-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
               </div>
-              <Transfer title="只读实例" items={transferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
+              <Transfer title="只读实例" items={readonlyTransferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
             </div>
 
             {/* Write Transfer */}
             <div className="rounded-xl p-4 bg-amber-500/5 border border-amber-500/20">
               <div className="flex items-center gap-2 mb-3">
                 <PenLine className="w-4 h-4 text-amber-400" />
-                <span className="text-sm font-medium text-amber-400">写入变更</span>
+                <span className="text-sm font-medium text-amber-400">变更授权</span>
                 <span className="text-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
               </div>
-              <Transfer title="写入实例" items={transferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
+              <Transfer title="写入实例" items={writeTransferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
             </div>
 
             <div className="flex justify-end gap-3 pt-2">
@@ -297,7 +310,7 @@ export default function InstanceGroupPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-semibold">数据库权限组</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">每个策略包含「只读查看」和「写入变更」两类实例</p>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">每个策略包含「查询授权」和「变更授权」两类实例</p>
         </div>
         {canManage && (
           <button onClick={() => { resetForm(); setShowCreateModal(true); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 rounded-lg text-sm font-medium text-white hover:bg-blue-600 transition-colors">
@@ -372,7 +385,7 @@ export default function InstanceGroupPage() {
                 <Card className="dg-card">
                   <CardContent className="p-5">
                     <h3 className="text-sm font-semibold flex items-center gap-2 mb-3">
-                      <Eye className="w-4 h-4 text-emerald-400" />只读查看 ({roInst.length})
+                      <Eye className="w-4 h-4 text-emerald-400" />查询授权 ({roInst.length})
                     </h3>
                     <InstanceList instances={roInst} />
                   </CardContent>
@@ -382,7 +395,7 @@ export default function InstanceGroupPage() {
                 <Card className="dg-card">
                   <CardContent className="p-5">
                     <h3 className="text-sm font-semibold flex items-center gap-2 mb-3">
-                      <PenLine className="w-4 h-4 text-amber-400" />写入变更 ({wrInst.length})
+                      <PenLine className="w-4 h-4 text-amber-400" />变更授权 ({wrInst.length})
                     </h3>
                     <InstanceList instances={wrInst} />
                   </CardContent>

frontend/src/pages/InstancePage.tsx

@@ -4,7 +4,7 @@ import {
   Activity, HardDrive, ChevronRight, Trash2, Edit2,
   XCircle, Eye, EyeOff, ChevronLeft, Gauge, Wifi,
   WifiOff, AlertTriangle, CheckCircle, Signal,
-  LayoutGrid, ListFilter, X, Loader2, BarChart3, Users,
+  LayoutGrid, ListFilter, X, Loader2, BarChart3, Users, Copy,
 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useActionPermission } from '@/hooks/useAuth';
@@ -140,6 +140,8 @@ export default function InstancePage() {
   const [editingInstance, setEditingInstance] = useState<InstanceItem | null>(null);
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [batchDeleting, setBatchDeleting] = useState(false);
+  const [showClone, setShowClone] = useState(false);
+  const [cloneSource, setCloneSource] = useState<InstanceItem | null>(null);
 
   const typeTabs = [
     { key: 'all', label: '全部', icon: LayoutGrid },
@@ -249,6 +251,7 @@ export default function InstancePage() {
           canDelete={canDelete}
           onDelete={() => { handleDelete(editingInstance.id); setView('grid'); setShowEdit(false); setEditingInstance(null); }}
           onEdit={() => {}}
+          onClone={canAdd ? () => { setCloneSource(editingInstance); setShowClone(true); } : undefined}
         />
         <EditInstanceDialog
           instance={editingInstance}
@@ -256,6 +259,15 @@ export default function InstancePage() {
           onClose={() => { setShowEdit(false); setEditingInstance(null); }}
           onSaved={() => { setShowEdit(false); setEditingInstance(null); fetchInstances(); }}
         />
+        {cloneSource && showClone && (
+          <EditInstanceDialog
+            instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
+            open={showClone}
+            onClose={() => { setShowClone(false); setCloneSource(null); }}
+            onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
+            mode="clone"
+          />
+        )}
       </>
     );
   }
@@ -266,15 +278,27 @@ export default function InstancePage() {
 
   if (view === 'detail' && selectedInstance) {
     return (
-      <InstanceDetail
-        instance={selectedInstance}
-        onBack={() => setView('grid')}
-        config={selectedConfig}
-        canEdit={canEdit}
-        canDelete={canDelete}
-        onDelete={() => { handleDelete(selectedInstance.id); setView('grid'); }}
-        onEdit={() => { setEditingInstance(selectedInstance); setShowEdit(true); }}
-      />
+      <>
+        <InstanceDetail
+          instance={selectedInstance}
+          onBack={() => setView('grid')}
+          config={selectedConfig}
+          canEdit={canEdit}
+          canDelete={canDelete}
+          onDelete={() => { handleDelete(selectedInstance.id); setView('grid'); }}
+          onEdit={() => { setEditingInstance(selectedInstance); setShowEdit(true); }}
+          onClone={canAdd ? () => { setCloneSource(selectedInstance); setShowClone(true); } : undefined}
+        />
+        {cloneSource && showClone && (
+          <EditInstanceDialog
+            instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
+            open={showClone}
+            onClose={() => { setShowClone(false); setCloneSource(null); }}
+            onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
+            mode="clone"
+          />
+        )}
+      </>
     );
   }
 
@@ -540,11 +564,34 @@ export default function InstancePage() {
 
 
 
-                <div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
                   <span className="text-[11px] text-blue-400 flex items-center gap-1">
                     查看详情
                     <ChevronRight className="w-3 h-3" />
                   </span>
+                  <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
+                    {canAdd && (
+                      <button
+                        onClick={() => {
+                          setCloneSource(instance);
+                          setShowClone(true);
+                        }}
+                        className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
+                        title="克隆实例"
+                      >
+                        <Copy className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                    {canEdit && (
+                      <button
+                        onClick={() => { setEditingInstance(instance); setShowEdit(true); }}
+                        className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
+                        title="编辑实例"
+                      >
+                        <Edit2 className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
             );
@@ -627,12 +674,23 @@ export default function InstancePage() {
                           </div>
                         </td>
                         <td className="px-4 py-3">
-                          <button
-                            onClick={e => { e.stopPropagation(); setSelectedInstance(instance); setView('detail'); }}
-                            className="text-blue-400 hover:text-blue-300 text-xs font-medium transition-colors"
-                          >
-                            查看
-                          </button>
+                          <div className="flex items-center gap-2">
+                            <button
+                              onClick={e => { e.stopPropagation(); setSelectedInstance(instance); setView('detail'); }}
+                              className="text-blue-400 hover:text-blue-300 text-xs font-medium transition-colors"
+                            >
+                              查看
+                            </button>
+                            {canAdd && (
+                              <button
+                                onClick={e => { e.stopPropagation(); setCloneSource(instance); setShowClone(true); }}
+                                className="text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
+                                title="克隆实例"
+                              >
+                                <Copy className="w-3.5 h-3.5" />
+                              </button>
+                            )}
+                          </div>
                         </td>
                       </tr>
                     );
@@ -643,6 +701,17 @@ export default function InstancePage() {
           </CardContent>
         </Card>
       )}
+
+      {/* Clone Dialog */}
+      {cloneSource && showClone && (
+        <EditInstanceDialog
+          instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
+          open={showClone}
+          onClose={() => { setShowClone(false); setCloneSource(null); }}
+          onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
+          mode="clone"
+        />
+      )}
     </div>
   );
 }
@@ -650,10 +719,10 @@ export default function InstancePage() {
 /* ------------------------------------------------------------------ */
 /*  InstanceDetail                                                     */
 /* ------------------------------------------------------------------ */
-function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete, onEdit }: {
+function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete, onEdit, onClone }: {
   instance: InstanceItem; onBack: () => void;
   config: { icon: React.ElementType; color: string; bg: string };
-  canEdit: boolean; canDelete: boolean; onDelete: () => void; onEdit: () => void;
+  canEdit: boolean; canDelete: boolean; onDelete: () => void; onEdit: () => void; onClone?: () => void;
 }) {
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState<{ success: boolean; message: string; version?: string } | null>(null);
@@ -710,6 +779,12 @@ function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete
             <Zap className="w-4 h-4" />
             {testing ? '测试中...' : '测试连接'}
           </button>
+          {onClone && (
+            <button onClick={onClone} className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all">
+              <Copy className="w-4 h-4" />
+              克隆
+            </button>
+          )}
           {canEdit && (
             <button onClick={onEdit} className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all">
               <Edit2 className="w-4 h-4" />

frontend/src/pages/QueriesPage.tsx

@@ -309,7 +309,7 @@ function NewQueryPanel({
   const [showSidebar, setShowSidebar] = useState(true);
 
   useEffect(() => {
-    instanceApi.list().then(res => {
+    instanceApi.accessible('readonly').then(res => {
       const data = Array.isArray(res) ? res : [];
       setInstances(data);
     }).catch(() => { setInstances([]); });

frontend/src/pages/TicketCreatePage.tsx

@@ -165,7 +165,6 @@ export default function TicketCreatePage() {
   // -- Form fields --
   const [title, setTitle] = useState('');
   const [priority, setPriority] = useState('medium');
-  const [dbType, setDbType] = useState('');
   const [instanceId, setInstanceId] = useState('');
   const [database, setDatabase] = useState('');
   const [sqlContent, setSqlContent] = useState('');
@@ -208,7 +207,7 @@ export default function TicketCreatePage() {
 
   useEffect(() => {
     setLoadingInstances(true);
-    instanceApi.list()
+    instanceApi.accessible('write')
       .then((res: unknown) => {
         const data = (res as { items?: unknown[] })?.items ?? res;
         setInstances(Array.isArray(data) ? data as InstanceItem[] : []);
@@ -217,33 +216,9 @@ export default function TicketCreatePage() {
       .finally(() => setLoadingInstances(false));
   }, []);
 
-  const filteredInstances = useMemo(() => {
-    if (!dbType) return instances;
-    return instances.filter(i => {
-      if (dbType === 'postgres') return i.db_type === 'postgres' || i.db_type === 'postgresql';
-      return i.db_type === dbType;
-    });
-  }, [instances, dbType]);
-
-  useEffect(() => {
-    if (instanceId) {
-      const current = instances.find(i => i.id === Number(instanceId));
-      if (current && dbType) {
-        const match = dbType === 'postgres'
-          ? (current.db_type === 'postgres' || current.db_type === 'postgresql')
-          : current.db_type === dbType;
-        if (!match) {
-          setInstanceId('');
-          setDatabase('');
-          setDatabases([]);
-        }
-      }
-    }
-  }, [dbType, instances, instanceId]);
-
-  /* ---------------------------------------------------------------- */
-  /*  Fetch databases                                                    */
-  /* ---------------------------------------------------------------- */
+  // 从选中实例自动获取 dbType
+  const selectedInstance = useMemo(() => instances.find((i) => i.id === Number(instanceId)), [instances, instanceId]);
+  const dbType = selectedInstance?.db_type || '';
 
   useEffect(() => {
     if (!instanceId) { setDatabases([]); setDatabase(''); return; }
@@ -391,7 +366,7 @@ export default function TicketCreatePage() {
     try {
       const inst = instances.find((i) => i.id === Number(instanceId));
       await ticketApi.create({
-        title: title.trim(), db_type: inst?.db_type || dbType || 'mysql',
+        title: title.trim(), db_type: inst?.db_type || 'mysql',
         instance_id: Number(instanceId), target_database: database,
         sql_content: sqlContent, rollback_sql: rollbackSql || undefined,
         reason: reason.trim(), priority: priority,
@@ -403,13 +378,12 @@ export default function TicketCreatePage() {
       const msg = Array.isArray(raw) ? raw.map((v) => v.msg).join('; ') : (raw || '提交失败，请稍后重试');
       setError(msg);
     } finally { setSubmitting(false); }
-  }, [title, sqlContent, instanceId, database, reason, priority, rollbackSql, instances, dbType, navigate]);
+  }, [title, sqlContent, instanceId, database, reason, priority, rollbackSql, instances, navigate]);
 
   /* ---------------------------------------------------------------- */
   /*  Derived values                                                     */
   /* ---------------------------------------------------------------- */
 
-  const selectedInstance = useMemo(() => instances.find((i) => i.id === Number(instanceId)), [instances, instanceId]);
   const isRedis = selectedInstance?.db_type === 'redis';
   const isMySQL = selectedInstance?.db_type === 'mysql' || selectedInstance?.db_type === 'postgresql' || selectedInstance?.db_type === 'postgres';
 
@@ -770,33 +744,22 @@ export default function TicketCreatePage() {
             {PRIORITY_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
           </select>
         </div>
-        <div>
-          <label className="block text-sm font-medium mb-2">
-            数据库类型 <span className="text-red-400">*</span>
-          </label>
-          <select value={dbType} onChange={(e) => setDbType(e.target.value)}
-            className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors">
-            {DB_TYPE_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
-          </select>
-        </div>
       </div>
 
-      {/* Instance */}
+      {/* Instance — 直接展示用户变更授权的实例 */}
       <div>
         <label className="block text-sm font-medium mb-2">
-          选择实例 <span className="text-red-400">*</span>
+          目标实例 <span className="text-red-400">*</span>
         </label>
         <select value={instanceId} onChange={(e) => setInstanceId(e.target.value)}
-          disabled={loadingInstances || filteredInstances.length === 0}
+          disabled={loadingInstances}
           className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors disabled:opacity-50">
           <option value="">
-            {loadingInstances ? '加载中...' : dbType && filteredInstances.length === 0
-              ? `无 ${(DB_TYPE_LABELS[dbType]) || dbType} 实例` : dbType
-                ? `请选择 ${(DB_TYPE_LABELS[dbType]) || dbType} 实例` : '请先选择数据库类型'}
+            {loadingInstances ? '加载中...' : instances.length === 0 ? '暂无变更授权实例' : '请选择实例'}
           </option>
-          {filteredInstances.map((inst) => (
+          {instances.map((inst) => (
             <option key={inst.id} value={String(inst.id)}>
-              {inst.name} ({inst.host}:{inst.port})
+              {inst.name} ({inst.host}:{inst.port}) — {DB_TYPE_LABELS[inst.db_type] || inst.db_type}
             </option>
           ))}
         </select>

frontend/src/pages/WorkflowPage.tsx

@@ -2,20 +2,19 @@ import { useState, useEffect, useCallback } from 'react';
 import {
   Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
   ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
-  Save, Play, Copy, History, TestTube, AlertTriangle,
-  Loader2, Check, XCircle, Star,
+  Save, Play, Copy, Loader2, Star, ArrowUp, ArrowDown, UserPlus,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { dbTypeColorMap } from '@/lib/constants';
 import { workflowApi } from '@/api/workflow';
+import { userApi } from '@/api/user';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                               */
 /* ------------------------------------------------------------------ */
 
 interface WorkflowStep {
-  id: number;
-  workflow_id: number;
+  id?: number;
+  workflow_id?: number;
   step_number: number;
   name: string;
   step_type: string;
@@ -36,6 +35,19 @@ interface WorkflowDetail {
   steps: WorkflowStep[];
 }
 
+interface UserItem {
+  id: number;
+  username: string;
+  display_name: string | null;
+  role: string;
+}
+
+interface StepDraft {
+  name: string;
+  step_type: 'submit' | 'audit' | 'execute';
+  approver_ids: number[];
+}
+
 const STEP_TYPE_LABELS: Record<string, string> = {
   submit: '提交阶段',
   serial: '串行审批',
@@ -63,34 +75,431 @@ const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
   execute: Play,
 };
 
+const STEP_TYPES = [
+  { value: 'submit' as const, label: '提交阶段', desc: '工单提交人' },
+  { value: 'audit' as const, label: '审核阶段', desc: '审核人员审批' },
+  { value: 'execute' as const, label: '执行阶段', desc: '执行人员操作' },
+];
+
+/* ------------------------------------------------------------------ */
+/*  UserDropdown — 下拉多选用户                                         */
+/* ------------------------------------------------------------------ */
+
+interface UserDropdownProps {
+  users: UserItem[];
+  selectedIds: number[];
+  label: string;
+  onToggle: (uid: number) => void;
+  onToggleAll: () => void;
+  onClear: () => void;
+  getUserName: (uid: number) => string;
+}
+
+function UserDropdown({ users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName }: UserDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const allSelected = selectedIds.length === users.length && users.length > 0;
+
+  return (
+    <div className="relative">
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => 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} * 请选择`
+            : selectedIds.length === 1
+              ? getUserName(selectedIds[0])
+              : `${label} (${selectedIds.length}人)`
+          }
+        </span>
+        <ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {/* Selected tags */}
+      {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 transition-colors">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Dropdown */}
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto">
+            {/* Select all / Clear */}
+            <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 transition-colors"
+              >
+                {allSelected ? '取消全选' : '全选'}
+              </button>
+              {selectedIds.length > 0 && (
+                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300 transition-colors">
+                  清空
+                </button>
+              )}
+            </div>
+            {/* User list */}
+            {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?: WorkflowDetail | 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 [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' || s.step_type === 'any_one')
+            ? 'audit' as const
+            : s.step_type as 'submit' | 'audit' | 'execute',
+          approver_ids: s.approver_ids ? JSON.parse(s.approver_ids) : [],
+        }))
+      );
+    } else {
+      // 新建默认：提交→执行
+      setSteps([
+        { name: '提交阶段', step_type: 'submit', approver_ids: [] },
+        { name: '执行阶段', step_type: 'execute', approver_ids: [] },
+      ]);
+    }
+  }, [workflow]);
+
+  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 toggleAllUsers = (idx: number) => {
+    const step = steps[idx];
+    if (step.approver_ids.length === users.length) {
+      updateStep(idx, { approver_ids: [] });
+    } else {
+      updateStep(idx, { approver_ids: users.map((u) => u.id) });
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!name.trim()) { setError('请输入流程名称'); return; }
+    if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
+    // 验证非 submit 步骤至少有一个人员
+    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,
+        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 workflowApi.update(workflow.id, payload);
+      } else {
+        await workflowApi.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';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div
+        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4">
+          <h2 className="text-base font-semibold">{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>
+
+        {/* Body */}
+        <div className="px-5 pb-5 space-y-4">
+          {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
+
+          <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>
+            <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 typeConf = STEP_TYPES.find((t) => t.value === step.step_type)!;
+                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)]">
+                    {/* Step header */}
+                    <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"
+                        value={step.name}
+                        onChange={(e) => updateStep(idx, { name: e.target.value })}
+                        placeholder="步骤名称"
+                      />
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
+                        {typeConf.label}
+                      </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"
+                          title="上移"
+                        >
+                          <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"
+                          title="下移"
+                        >
+                          <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"
+                          title="删除"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* User selection — submit 步骤不需要选人 */}
+                    {step.step_type !== 'submit' && (
+                      <div className="pl-9 mt-2">
+                        <UserDropdown
+                          users={users}
+                          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>
+                );
+              })}
+            </div>
+
+            {steps.length === 0 && (
+              <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
+                请点击上方按钮添加流程步骤
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-5 py-4">
+          <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}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 disabled:opacity-50 rounded-lg transition-colors"
+          >
+            {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
+            {isEdit ? '保存' : '创建'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main Page                                                           */
+/* ------------------------------------------------------------------ */
+
 export default function WorkflowPage() {
   const [items, setItems] = useState<WorkflowDetail[]>([]);
+  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 [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
+  const [editorWorkflow, setEditorWorkflow] = useState<WorkflowDetail | null | undefined>(undefined);
 
   const fetchWorkflows = useCallback(async () => {
     try {
       setLoading(true);
       setError(null);
       const data = await workflowApi.list();
-      setItems(data);
-    } catch (err: any) {
-      setError(err?.response?.data?.detail || '获取审批流程失败');
+      setItems(Array.isArray(data) ? data : []);
+    } catch (err: unknown) {
+      const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '获取审批流程失败';
+      setError(msg);
     } finally {
       setLoading(false);
     }
   }, []);
 
+  const fetchUsers = useCallback(async () => {
+    try {
+      const data = await userApi.list();
+      setUsers(Array.isArray(data) ? data : []);
+    } catch {}
+  }, []);
+
   useEffect(() => {
     fetchWorkflows();
-  }, [fetchWorkflows]);
+    fetchUsers();
+  }, [fetchWorkflows, fetchUsers]);
 
   const toggleWorkflow = useCallback(async (wf: WorkflowDetail) => {
     try {
       await workflowApi.update(wf.id, { is_active: !wf.is_active });
-      setItems(prev => prev.map(w => w.id === wf.id ? { ...w, is_active: !w.is_active } : w));
+      setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
     } catch {}
   }, []);
 
@@ -98,14 +507,14 @@ export default function WorkflowPage() {
     if (!confirm('确认删除该审批流程？')) return;
     try {
       await workflowApi.delete(id);
-      setItems(prev => prev.filter(w => w.id !== id));
+      setItems((prev) => prev.filter((w) => w.id !== id));
     } catch {}
   }, []);
 
   const setDefault = useCallback(async (id: number) => {
     try {
       await workflowApi.setDefault(id);
-      setItems(prev => prev.map(w => ({ ...w, is_default: w.id === id })));
+      setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
     } catch {}
   }, []);
 
@@ -116,6 +525,14 @@ export default function WorkflowPage() {
     } catch {}
   }, [fetchWorkflows]);
 
+  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">
@@ -127,7 +544,6 @@ export default function WorkflowPage() {
   if (error) {
     return (
       <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
-        <AlertCircle className="w-12 h-12 mb-3 text-red-400" />
         <p className="text-sm">{error}</p>
         <button onClick={fetchWorkflows} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
           重试
@@ -142,14 +558,27 @@ export default function WorkflowPage() {
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
         <div>
           <h1 className="text-2xl font-semibold">审批流程配置</h1>
-          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程模板，支持串行/并行审批模式</p>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程，支持审核阶段叠加和多人执行</p>
         </div>
+        <button
+          onClick={() => setEditorWorkflow(null)}
+          className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          新建流程
+        </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)]">暂无审批流程，请联系管理员配置</p>
+          <p className="text-sm text-[var(--dg-text-muted)] mb-4">暂无审批流程</p>
+          <button
+            onClick={() => setEditorWorkflow(null)}
+            className="px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors"
+          >
+            创建第一个流程
+          </button>
         </div>
       ) : (
         <>
@@ -157,8 +586,8 @@ export default function WorkflowPage() {
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
             {[
               { label: '流程总数', value: items.length, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
-              { label: '已启用', value: items.filter(w => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
-              { label: '默认流程', value: items.filter(w => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
+              { label: '已启用', value: items.filter((w) => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
+              { label: '默认流程', value: items.filter((w) => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
               { label: '总步骤数', value: items.reduce((acc, w) => acc + w.steps.length, 0), icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
             ].map((s, i) => (
               <Card key={i} className="dg-card">
@@ -199,22 +628,23 @@ export default function WorkflowPage() {
                           </span>
                         </div>
 
-                        {wf.description && (
-                          <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>
-                        )}
+                        {wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>}
 
                         {/* Flow visualization */}
                         <div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
                           {wf.steps.map((step, i) => {
                             const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
+                            const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
                             return (
-                              <div key={step.id} className="flex items-center gap-1 flex-shrink-0">
+                              <div key={step.id || i} className="flex items-center gap-1 flex-shrink-0">
                                 <div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial} flex items-center gap-2`}>
                                   <StepIcon className="w-4 h-4" />
                                   <div>
                                     <div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
-                                    {step.approver_role && (
-                                      <div className="text-[10px] opacity-80 whitespace-nowrap">{step.approver_role}</div>
+                                    {uids.length > 0 && (
+                                      <div className="text-[10px] opacity-80 whitespace-nowrap">
+                                        {uids.map((uid) => getUserName(uid)).join('、')}
+                                      </div>
                                     )}
                                   </div>
                                 </div>
@@ -231,11 +661,12 @@ export default function WorkflowPage() {
                               <GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
                               流程步骤详情
                             </h4>
-                            {wf.steps.map((step) => {
+                            {wf.steps.map((step, si) => {
                               const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
                               const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
+                              const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
                               return (
-                                <div key={step.id} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
+                                <div key={step.id || si} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
                                   <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
                                     <StepIcon className={`w-4 h-4 ${colorClass.split(' ')[1]}`} />
                                   </div>
@@ -245,23 +676,15 @@ export default function WorkflowPage() {
                                       <span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
                                         {STEP_TYPE_LABELS[step.step_type] || step.step_type}
                                       </span>
-                                      {step.timeout_hours !== 24 && (
-                                        <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
-                                          超时 {step.timeout_hours}h
-                                        </span>
-                                      )}
-                                      {step.auto_approve_on_timeout && (
-                                        <span className="text-[11px] px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400">
-                                          超时自动通过
-                                        </span>
-                                      )}
                                     </div>
-                                    {step.approver_role && (
+                                    {uids.length > 0 && (
                                       <div className="flex items-center gap-1 mt-1 flex-wrap">
-                                        <span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
-                                        <span className="text-xs text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded">
-                                          {step.approver_role}
-                                        </span>
+                                        <span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
+                                        {uids.map((uid) => (
+                                          <span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
+                                            {getUserName(uid)}
+                                          </span>
+                                        ))}
                                       </div>
                                     )}
                                   </div>
@@ -274,6 +697,13 @@ export default function WorkflowPage() {
 
                       {/* Actions */}
                       <div className="flex items-center gap-1 ml-4 shrink-0">
+                        <button
+                          onClick={() => setEditorWorkflow(wf)}
+                          className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors"
+                          title="编辑"
+                        >
+                          <Edit2 className="w-4 h-4" />
+                        </button>
                         {!wf.is_default && (
                           <button onClick={() => setDefault(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-yellow-500/10 hover:text-yellow-400 transition-colors" title="设为默认">
                             <Star className="w-4 h-4" />
@@ -321,15 +751,14 @@ export default function WorkflowPage() {
                 <X className="w-5 h-5" />
               </button>
             </div>
-            {previewWorkflow.description && (
-              <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>
-            )}
+            {previewWorkflow.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>}
             <div className="space-y-4">
               {previewWorkflow.steps.map((step, i) => {
                 const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
                 const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
+                const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
                 return (
-                  <div key={step.id} className="flex items-start gap-4">
+                  <div key={step.id || i} className="flex items-start gap-4">
                     <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
                       <StepIcon className={`w-5 h-5 ${colorClass.split(' ')[1]}`} />
                     </div>
@@ -340,10 +769,14 @@ export default function WorkflowPage() {
                           {STEP_TYPE_LABELS[step.step_type] || step.step_type}
                         </span>
                       </div>
-                      {step.approver_role && (
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
-                          <span className="text-xs text-blue-400">{step.approver_role}</span>
+                      {uids.length > 0 && (
+                        <div className="flex items-center gap-1 mt-1 flex-wrap">
+                          <span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
+                          {uids.map((uid) => (
+                            <span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
+                              {getUserName(uid)}
+                            </span>
+                          ))}
                         </div>
                       )}
                     </div>
@@ -360,6 +793,16 @@ export default function WorkflowPage() {
           </div>
         </div>
       )}
+
+      {/* Editor Modal */}
+      {editorWorkflow !== undefined && (
+        <WorkflowEditorModal
+          workflow={editorWorkflow}
+          users={users}
+          onClose={() => setEditorWorkflow(undefined)}
+          onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
+        />
+      )}
     </div>
   );
 }