feat: 权限组重构为一组双Transfer(只读+写入) + 用户管理加权限组关联

后端: - 新增 instance_group_members 中间表 (group_id + instance_id + access_type) - 一个权限组同时包含 readonly 和 write 两类实例 - API create/update 支持 readonly_instance_ids + write_instance_ids - Schema Response 返回 readonly_instances + write_instances 分类型列表 - 20 个测试全部通过前端: - InstanceGroupPage: 创建/编辑都是上下两个 Transfer 同时配置只读和写入 - 列表卡片显示 [N只读 · M写入] 标签 - 详情页分只读实例和写入实例两块展示 - UsersPage 编辑用户弹框加权限组多选 - instanceGroup.ts API 适配新接口
2026-05-24 20:08:31 +08:00
1 parent 39d9600e82
commit 88d064ea95
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-  Plus, Search, Edit2, Trash2, Server, Users, ChevronRight, X,
-  Eye, PenLine, ChevronLeft, ChevronRight as ChevRight,
+  Plus, Search, Edit2, Trash2, Server, Users, ChevronRight,
+  Eye, PenLine, ChevronLeft, ChevronRight as ChevRight, X,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
@@ -11,11 +11,6 @@ import { useActionPermission } from '@/hooks/useAuth';

 /* ───────── Constants ───────── */

-const ACCESS_TYPES = [
-  { value: 'readonly', label: '只读查看', desc: '关联只读/从库，用于查询数据', color: 'text-emerald-400', bg: 'bg-emerald-500/15', icon: Eye },
-  { value: 'write', label: '写入变更', desc: '关联读写/主库，用于数据变更工单', color: 'text-amber-400', bg: 'bg-amber-500/15', icon: PenLine },
-] as const;
-
 const DB_TYPE_COLORS: Record<string, string> = {
  mysql: 'bg-[rgba(0,117,143,0.15)] text-[#26a69a]',
  pg: 'bg-[rgba(51,103,145,0.15)] text-[#42a5f5]',
@@ -33,9 +28,10 @@ interface TransferProps {
  items: TransferItem[];
  selected: string[];
  onChange: (v: string[]) => void;
+  emptyText?: string;
 }

-function Transfer({ title, items, selected, onChange }: TransferProps) {
+function Transfer({ title, items, selected, onChange, emptyText = '请从左侧选择实例' }: TransferProps) {
  const [search, setSearch] = useState('');
  const [pendingAdd, setPendingAdd] = useState<Set<string>>(new Set());
  const [pendingRemove, setPendingRemove] = useState<Set<string>>(new Set());
@@ -60,7 +56,7 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
      <div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
        <div className="px-3 py-1.5 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
          <span className="text-xs font-medium">可选实例</span>
-          <span className="text-xs text-[var(--dg-text-muted)]">{unselected.length} 项</span>
+          <span className="text-xs text-[var(--dg-text-muted)]">{unselected.length}</span>
        </div>
        <div className="p-2">
          <input className="w-full px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs focus:border-blue-400 focus:outline-none"
@@ -85,10 +81,10 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
      <div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
        <div className="px-3 py-1.5 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
          <span className="text-xs font-medium">{title}</span>
-          <span className="text-xs text-[var(--dg-text-muted)]">{selectedFiltered.length} 项</span>
+          <span className="text-xs text-[var(--dg-text-muted)]">{selectedFiltered.length}</span>
        </div>
        <div className="max-h-48 overflow-y-auto px-2 py-2 space-y-0.5">
-          {selectedFiltered.length === 0 && <div className="text-center py-6 text-xs text-[var(--dg-text-muted)]">请从左侧选择实例</div>}
+          {selectedFiltered.length === 0 && <div className="text-center py-6 text-xs text-[var(--dg-text-muted)]">{emptyText}</div>}
          {selectedFiltered.map(item => (
            <label key={item.value} className={row(pendingRemove.has(item.value), 'bg-red-500/10 text-red-400')}>
              <input type="checkbox" checked={pendingRemove.has(item.value)} onChange={() => toggleRemove(item.value)} className="rounded" />
@@ -115,24 +111,18 @@ export default function InstanceGroupPage() {
  const [showUserModal, setShowUserModal] = useState(false);
  const canManage = useActionPermission('instance-group.manage');

-  // Create form — dual transfer
+  // Form state — shared by create & edit
  const [formName, setFormName] = useState('');
  const [formDesc, setFormDesc] = useState('');
  const [formIsActive, setFormIsActive] = useState(true);
-  const [readonlyInstanceIds, setReadonlyInstanceIds] = useState<string[]>([]);
-  const [writeInstanceIds, setWriteInstanceIds] = useState<string[]>([]);
-
-  // Edit form — single group
-  const [editAccessType, setEditAccessType] = useState<'readonly' | 'write'>('readonly');
-  const [editInstanceIds, setEditInstanceIds] = useState<string[]>([]);
+  const [readonlyIds, setReadonlyIds] = useState<string[]>([]);
+  const [writeIds, setWriteIds] = useState<string[]>([]);

  const [allInstances, setAllInstances] = useState<any[]>([]);
  const [allUsers, setAllUsers] = useState<any[]>([]);
  const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
  const [userSearch, setUserSearch] = useState('');

-  const selectedGroup = groups.find(g => g.id === selectedId);
-
  const fetchGroups = useCallback(async () => {
    try { setGroups(await instanceGroupApi.list()); } catch {} finally { setLoading(false); }
  }, []);
@@ -150,8 +140,7 @@ export default function InstanceGroupPage() {
  useEffect(() => {
    if (showUserModal) {
      userApi.list().then((d: any) => {
-        const items = d?.items || d;
-        setAllUsers(Array.isArray(items) ? items : []);
+        setAllUsers(Array.isArray(d?.items || d) ? (d?.items || d) : []);
      }).catch(() => {});
    }
  }, [showUserModal]);
@@ -169,50 +158,49 @@ export default function InstanceGroupPage() {
  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]);

-  const resetCreateForm = () => {
+  const resetForm = () => {
    setFormName(''); setFormDesc(''); setFormIsActive(true);
-    setReadonlyInstanceIds([]); setWriteInstanceIds([]);
+    setReadonlyIds([]); setWriteIds([]);
  };

-  /* ── Create: one shot, two groups ── */
+  /* ── Create ── */
  const handleCreate = async () => {
    if (!formName.trim()) return;
-    const base = formName.trim();
-    const desc = formDesc.trim() || undefined;
-
-    // Create readonly group
-    if (readonlyInstanceIds.length > 0) {
-      const g = await instanceGroupApi.create({ name: `${base}-只读`, description: desc, access_type: 'readonly', is_active: formIsActive, db_type: 'all' } as any);
-      await instanceGroupApi.assignInstances(g.id, readonlyInstanceIds.map(Number));
-    }
-    // Create write group
-    if (writeInstanceIds.length > 0) {
-      const g = await instanceGroupApi.create({ name: `${base}-写入`, description: desc, access_type: 'write', is_active: formIsActive, db_type: 'all' } as any);
-      await instanceGroupApi.assignInstances(g.id, writeInstanceIds.map(Number));
-    }
-    setShowCreateModal(false); resetCreateForm(); fetchGroups();
+    await instanceGroupApi.create({
+      name: formName.trim(),
+      description: formDesc.trim() || undefined,
+      db_type: 'all',
+      is_active: formIsActive,
+      readonly_instance_ids: readonlyIds.map(Number),
+      write_instance_ids: writeIds.map(Number),
+    });
+    setShowCreateModal(false); resetForm(); fetchGroups();
  };

-  /* ── Edit: single group ── */
+  /* ── Edit ── */
  const openEditModal = (group: InstanceGroup) => {
-    setFormName(group.name.replace(/-只读$/, '').replace(/-写入$/, ''));
+    setFormName(group.name);
    setFormDesc(group.description || '');
    setFormIsActive(group.is_active);
-    setEditAccessType((group as any).access_type === 'write' ? 'write' : 'readonly');
-    setEditInstanceIds((group.instances || []).map((i: any) => String(i.id)));
+    setReadonlyIds((group.readonly_instances || []).map((i: any) => String(i.id)));
+    setWriteIds((group.write_instances || []).map((i: any) => String(i.id)));
+    setSelectedId(group.id);
    setShowEditModal(true);
  };

  const handleEdit = async () => {
    if (!selectedId || !formName.trim()) return;
    await instanceGroupApi.update(selectedId, {
-      name: formName, description: formDesc || undefined,
-      access_type: editAccessType, is_active: formIsActive, db_type: 'all',
-    } as any);
-    await instanceGroupApi.assignInstances(selectedId, editInstanceIds.map(Number));
-    setShowEditModal(false); fetchGroups();
+      name: formName.trim(),
+      description: formDesc.trim() || undefined,
+      is_active: formIsActive,
+      readonly_instance_ids: readonlyIds.map(Number),
+      write_instance_ids: writeIds.map(Number),
+    });
+    setShowEditModal(false); resetForm(); fetchGroups();
  };

+  /* ── Delete ── */
  const handleDelete = async (id: number) => {
    if (!confirm('确定删除该权限组？')) return;
    await instanceGroupApi.delete(id);
@@ -220,70 +208,126 @@ export default function InstanceGroupPage() {
    fetchGroups();
  };

+  /* ── Assign Users ── */
  const handleAssignUsers = async () => {
    if (!selectedId || selectedUserIds.length === 0) return;
    await instanceGroupApi.assignUsers(selectedId, selectedUserIds);
    setShowUserModal(false); setSelectedUserIds([]); fetchGroups();
  };

-  const getAt = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
+  const selectedGroup = groups.find(g => g.id === selectedId);

  if (loading) return <div className="flex items-center justify-center h-64 text-[var(--dg-text-muted)]"><div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-2" />加载中...</div>;

+  /* ── Instance Row ── */
+  const InstanceList = ({ instances }: { instances: any[] }) => {
+    if (instances.length === 0) return <div className="text-xs text-[var(--dg-text-muted)] py-2">暂无</div>;
+    return (
+      <div className="space-y-1">
+        {instances.map(inst => (
+          <div key={inst.id} className="flex items-center justify-between px-3 py-1.5 bg-[var(--dg-bg-tertiary)] rounded-lg text-xs">
+            <div className="flex items-center gap-2">
+              <span className={`w-1.5 h-1.5 rounded-full ${inst.status === 'connected' ? 'bg-green-400' : 'bg-[var(--dg-text-muted)]'}`} />
+              <span>{inst.name}</span>
+              <span className="text-[var(--dg-text-muted)]">{inst.host}:{inst.port}</span>
+            </div>
+            <span className={`px-1 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || ''}`}>{inst.db_type}</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  /* ── Form Modal (shared by create & edit) ── */
+  const FormModal = ({ mode }: { mode: 'create' | 'edit' }) => {
+    const show = mode === 'create' ? showCreateModal : showEditModal;
+    const close = () => { setShowCreateModal(false); setShowEditModal(false); resetForm(); };
+    const submit = mode === 'create' ? handleCreate : handleEdit;
+    return show ? (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+        <div className="w-full max-w-3xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+          <h3 className="text-lg font-semibold mb-5">{mode === 'create' ? '新建权限策略' : '编辑权限策略'}</h3>
+          <div className="space-y-5">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1.5">策略名称 <span className="text-red-400">*</span></label>
+                <input className="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" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产数据库权限" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1.5">描述</label>
+                <input className="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" value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" />
+              </div>
+            </div>
+
+            {/* Readonly Transfer */}
+            <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-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
+              </div>
+              <Transfer title="只读实例" items={transferItems} 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-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
+              </div>
+              <Transfer title="写入实例" items={transferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
+            </div>
+
+            <div className="flex justify-end gap-3 pt-2">
+              <button onClick={close} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
+              <button onClick={submit} disabled={!formName.trim()} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors">
+                {mode === 'create' ? '创建' : '保存'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : null;
+  };
+
  return (
    <div className="space-y-5">
      {/* Header */}
      <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={() => { resetCreateForm(); 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">
+          <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">
            <Plus className="w-4 h-4" /> 新建权限策略
          </button>
        )}
      </div>

-      {/* Summary cards */}
-      <div className="grid grid-cols-2 gap-4">
-        {ACCESS_TYPES.map(at => {
-          const count = groups.filter(g => (g as any).access_type === at.value).length;
-          const Icon = at.icon;
-          return (
-            <Card key={at.value} className="dg-card">
-              <CardContent className="p-4 flex items-center gap-4">
-                <div className={`w-12 h-12 rounded-xl ${at.bg} flex items-center justify-center`}><Icon className={`w-6 h-6 ${at.color}`} /></div>
-                <div className="flex-1"><div className="text-lg font-bold">{at.label}</div><div className="text-xs text-[var(--dg-text-muted)]">{at.desc}</div></div>
-                <div className="text-3xl font-bold text-[var(--dg-text-muted)]">{count}</div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
-
      <div className="flex gap-5">
        {/* Left list */}
-        <div className="w-72 flex-shrink-0 space-y-3">
+        <div className="w-80 flex-shrink-0 space-y-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
            <input className="w-full pl-10 pr-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none" placeholder="搜索" value={search} onChange={e => setSearch(e.target.value)} />
          </div>
-          <div className="space-y-2 max-h-[calc(100vh-420px)] overflow-y-auto">
+          <div className="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto">
            {filteredGroups.length === 0 && <div className="text-center py-10 text-[var(--dg-text-muted)] text-sm">暂无权限组</div>}
            {filteredGroups.map(group => {
-              const at = getAt((group as any).access_type || 'readonly');
-              const Icon = at.icon;
+              const ro = group.readonly_instance_count || 0;
+              const wr = group.write_instance_count || 0;
              return (
                <div key={group.id} onClick={() => setSelectedId(group.id)} className={`p-3 rounded-lg cursor-pointer transition-colors ${selectedId === group.id ? 'bg-blue-500/10 border border-blue-500/30' : 'bg-[var(--dg-bg-secondary)] border border-transparent hover:bg-[var(--dg-bg-hover)]'}`}>
                  <div className="flex items-center gap-2">
-                    <Icon className={`w-4 h-4 ${at.color}`} />
                    <span className="font-medium text-sm truncate">{group.name}</span>
+                    {!group.is_active && <span className="px-1.5 py-0.5 text-[10px] rounded bg-red-500/15 text-red-400">禁用</span>}
                  </div>
                  <div className="flex items-center gap-2 mt-1.5 text-xs text-[var(--dg-text-muted)]">
-                    <span className={`px-1.5 py-0.5 rounded text-[10px] ${at.bg} ${at.color}`}>{at.label}</span>
-                    <span><Server className="w-3 h-3 inline mr-0.5" />{group.instances?.length || 0}实例</span>
-                    <span><Users className="w-3 h-3 inline mr-0.5" />{group.user_count || 0}</span>
+                    <span className="px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px]">{ro} 只读</span>
+                    <span className="px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400 text-[10px]">{wr} 写入</span>
+                    <span className="ml-auto"><Users className="w-3 h-3 inline mr-0.5" />{group.user_count || 0}</span>
                  </div>
                </div>
              );
@@ -295,8 +339,8 @@ export default function InstanceGroupPage() {
        <div className="flex-1 min-w-0">
          {selectedGroup ? (() => {
            const sg = selectedGroup;
-            const at = getAt((sg as any).access_type || 'readonly');
-            const Icon = at.icon;
+            const roInst = sg.readonly_instances || [];
+            const wrInst = sg.write_instances || [];
            return (
              <div className="space-y-4">
                <Card className="dg-card">
@@ -304,12 +348,15 @@ export default function InstanceGroupPage() {
                    <div className="flex items-start justify-between">
                      <div>
                        <div className="flex items-center gap-3">
-                          <Icon className={`w-5 h-5 ${at.color}`} />
                          <h2 className="text-lg font-semibold">{sg.name}</h2>
-                          <span className={`px-2 py-0.5 text-xs rounded ${at.bg} ${at.color}`}>{at.label}</span>
                          {!sg.is_active && <span className="px-2 py-0.5 text-xs rounded bg-red-500/15 text-red-400">禁用</span>}
                        </div>
                        {sg.description && <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{sg.description}</p>}
+                        <div className="flex items-center gap-2 mt-2">
+                          <span className="px-2 py-0.5 text-xs rounded bg-emerald-500/15 text-emerald-400">{roInst.length} 只读实例</span>
+                          <span className="px-2 py-0.5 text-xs rounded bg-amber-500/15 text-amber-400">{wrInst.length} 写入实例</span>
+                          <span className="px-2 py-0.5 text-xs rounded bg-blue-500/15 text-blue-400">{sg.user_count || 0} 用户</span>
+                        </div>
                      </div>
                      {canManage && (
                        <div className="flex items-center gap-2">
@@ -320,23 +367,28 @@ export default function InstanceGroupPage() {
                    </div>
                  </CardContent>
                </Card>
+
+                {/* Readonly instances */}
                <Card className="dg-card">
                  <CardContent className="p-5">
-                    <h3 className="text-sm font-semibold flex items-center gap-2 mb-3"><Server className="w-4 h-4 text-[var(--dg-text-muted)]" />关联实例 ({sg.instances?.length || 0})</h3>
-                    {sg.instances && sg.instances.length > 0 ? (
-                      <div className="space-y-1.5">{sg.instances.map(inst => (
-                        <div key={inst.id} className="flex items-center justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                          <div className="flex items-center gap-2">
-                            <span className={`w-2 h-2 rounded-full ${inst.status === 'connected' ? 'bg-green-400' : 'bg-[var(--dg-text-muted)]'}`} />
-                            <span className="text-sm">{inst.name}</span>
-                            <span className="text-xs text-[var(--dg-text-muted)]">{inst.host}:{inst.port}</span>
-                          </div>
-                          <span className={`px-1.5 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || ''}`}>{inst.db_type}</span>
-                        </div>
-                      ))}</div>
-                    ) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联实例</div>}
+                    <h3 className="text-sm font-semibold flex items-center gap-2 mb-3">
+                      <Eye className="w-4 h-4 text-emerald-400" />只读查看 ({roInst.length})
+                    </h3>
+                    <InstanceList instances={roInst} />
                  </CardContent>
                </Card>
+
+                {/* Write instances */}
+                <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})
+                    </h3>
+                    <InstanceList instances={wrInst} />
+                  </CardContent>
+                </Card>
+
+                {/* Users */}
                <Card className="dg-card">
                  <CardContent className="p-5">
                    <div className="flex items-center justify-between mb-3">
@@ -365,87 +417,11 @@ export default function InstanceGroupPage() {
        </div>
      </div>

-      {/* ═══════ Create Modal: dual transfer ═══════ */}
-      {showCreateModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-3xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
-            <h3 className="text-lg font-semibold mb-5">新建权限策略</h3>
-            <div className="space-y-5">
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium mb-1.5">策略名称 <span className="text-red-400">*</span></label>
-                  <input className="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" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产环境、开发环境" />
-                  <p className="text-xs text-[var(--dg-text-muted)] mt-1">自动生成「名称-只读」和「名称-写入」两个权限组</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium mb-1.5">描述</label>
-                  <input className="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" value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" />
-                </div>
-              </div>
+      {/* Form Modal (create & edit) */}
+      <FormModal mode="create" />
+      <FormModal mode="edit" />

-              {/* Row 1: Readonly */}
-              <div className={`rounded-xl p-4 border ${ACCESS_TYPES[0].bg} border-current ${ACCESS_TYPES[0].color.replace('text-', 'border-')}`}>
-                <div className="flex items-center gap-2 mb-3">
-                  <Eye className="w-5 h-5" />
-                  <span className="font-medium">只读查看</span>
-                  <span className="text-xs opacity-70">— 查询数据的实例</span>
-                </div>
-                <Transfer title="只读实例" items={transferItems} selected={readonlyInstanceIds} onChange={setReadonlyInstanceIds} />
-              </div>
-
-              {/* Row 2: Write */}
-              <div className={`rounded-xl p-4 border ${ACCESS_TYPES[1].bg} border-current ${ACCESS_TYPES[1].color.replace('text-', 'border-')}`}>
-                <div className="flex items-center gap-2 mb-3">
-                  <PenLine className="w-5 h-5" />
-                  <span className="font-medium">写入变更</span>
-                  <span className="text-xs opacity-70">— 数据变更工单的实例</span>
-                </div>
-                <Transfer title="写入实例" items={transferItems} selected={writeInstanceIds} onChange={setWriteInstanceIds} />
-              </div>
-
-              <div className="flex justify-end gap-3 pt-2">
-                <button onClick={() => { setShowCreateModal(false); resetCreateForm(); }} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
-                <button onClick={handleCreate} disabled={!formName.trim() || (readonlyInstanceIds.length === 0 && writeInstanceIds.length === 0)} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors">
-                  创建{readonlyInstanceIds.length > 0 && writeInstanceIds.length > 0 ? ' 2 个权限组' : readonlyInstanceIds.length > 0 || writeInstanceIds.length > 0 ? ' 1 个权限组' : ''}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* ═══════ Edit Modal: single group ═══════ */}
-      {showEditModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-2xl bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
-            <h3 className="text-lg font-semibold mb-5">编辑权限组</h3>
-            <div className="space-y-5">
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium mb-1.5">名称</label>
-                  <input className="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" value={formName} onChange={e => setFormName(e.target.value)} />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium mb-1.5">类型</label>
-                  <div className={`px-3 py-2 rounded-lg text-sm ${getAt(editAccessType).bg} ${getAt(editAccessType).color}`}>
-                    {getAt(editAccessType).label}
-                  </div>
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">关联实例</label>
-                <Transfer title="已关联实例" items={transferItems} selected={editInstanceIds} onChange={setEditInstanceIds} />
-              </div>
-              <div className="flex justify-end gap-3 pt-2">
-                <button onClick={() => setShowEditModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
-                <button onClick={handleEdit} className="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">保存</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* ═══════ User Modal ═══════ */}
+      {/* User Modal */}
      {showUserModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-md bg-[var(--dg-bg-primary)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>