From 40868c61bf2f0bd3dc0f6c4dd4f124ab7d7c0c0f Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Sun, 24 May 2026 19:43:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9D=83=E9=99=90=E7=BB=84=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E6=94=B9=E4=B8=BA=E5=8F=8CTransfer=E5=90=8C=E6=97=B6?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8F=AA=E8=AF=BB+=E5=86=99=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建时不再二选一，上下两列Transfer同时配置查询权限和写入权限
- 自动生成「名称-只读」「名称-写入」两个权限组
- 编辑模式保持单组编辑不变
- 按钮显示将创建几个权限组
---
 frontend/src/pages/InstanceGroupPage.tsx | 358 ++++++++++-------------
 1 file changed, 158 insertions(+), 200 deletions(-)

diff --git a/frontend/src/pages/InstanceGroupPage.tsx b/frontend/src/pages/InstanceGroupPage.tsx
index 7b1dc4b..262d0a5 100644
--- a/frontend/src/pages/InstanceGroupPage.tsx
+++ b/frontend/src/pages/InstanceGroupPage.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Plus, Search, Edit2, Trash2, Server, Users, ChevronRight, X,
   Eye, PenLine, ChevronLeft, ChevronRight as ChevRight,
-  Database, UserPlus,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
@@ -13,22 +12,8 @@ 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,
-  },
+  { 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> = {
@@ -41,18 +26,13 @@ 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 }
 
 interface TransferProps {
   title: string;
   items: TransferItem[];
   selected: string[];
-  onChange: (selected: string[]) => void;
+  onChange: (v: string[]) => void;
 }
 
 function Transfer({ title, items, selected, onChange }: TransferProps) {
@@ -60,45 +40,36 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
   const [pendingAdd, setPendingAdd] = useState<Set<string>>(new Set());
   const [pendingRemove, setPendingRemove] = useState<Set<string>>(new Set());
 
-  const unselected = items.filter(
-    i => !selected.includes(i.value) &&
-      (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.toLowerCase().includes(search.toLowerCase()))
+  const unselected = items.filter(i =>
+    !selected.includes(i.value) && (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.includes(search))
   );
-  const selectedFiltered = items.filter(
-    i => selected.includes(i.value) &&
-      (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.toLowerCase().includes(search.toLowerCase()))
+  const selectedFiltered = items.filter(i =>
+    selected.includes(i.value) && (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.includes(search))
   );
 
-  const addSelected = () => {
-    onChange([...selected, ...pendingAdd]);
-    setPendingAdd(new Set());
-  };
-  const removeSelected = () => {
-    onChange(selected.filter(v => !pendingRemove.has(v)));
-    setPendingRemove(new Set());
-  };
-  const toggleAdd = (v: string) => setPendingAdd(prev => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
-  const toggleRemove = (v: string) => setPendingRemove(prev => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
+  const addSelected = () => { onChange([...selected, ...pendingAdd]); setPendingAdd(new Set()); };
+  const removeSelected = () => { onChange(selected.filter(v => !pendingRemove.has(v))); setPendingRemove(new Set()); };
+  const toggleAdd = (v: string) => setPendingAdd(p => { const n = new Set(p); n.has(v) ? n.delete(v) : n.add(v); return n; });
+  const toggleRemove = (v: string) => setPendingRemove(p => { const n = new Set(p); n.has(v) ? n.delete(v) : n.add(v); return n; });
 
-  const rowCls = (active: boolean, color: string) =>
+  const row = (active: boolean, color: string) =>
     `flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${active ? color : 'hover:bg-[var(--dg-bg-hover)]'}`;
 
   return (
     <div className="flex gap-3 items-stretch">
-      {/* Left: Available */}
       <div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
-        <div className="px-3 py-2 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
+        <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>
         </div>
         <div className="p-2">
-          <input className="w-full px-2 py-1.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs focus:border-blue-400 focus:outline-none"
+          <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"
             placeholder="搜索..." value={search} onChange={e => setSearch(e.target.value)} />
         </div>
-        <div className="max-h-48 overflow-y-auto px-2 pb-2 space-y-0.5">
-          {unselected.length === 0 && <div className="text-center py-4 text-xs text-[var(--dg-text-muted)]">无可用项</div>}
+        <div className="max-h-40 overflow-y-auto px-2 pb-2 space-y-0.5">
+          {unselected.length === 0 && <div className="text-center py-3 text-xs text-[var(--dg-text-muted)]">无可用项</div>}
           {unselected.map(item => (
-            <label key={item.value} className={rowCls(pendingAdd.has(item.value), 'bg-blue-500/10 text-blue-400')}>
+            <label key={item.value} className={row(pendingAdd.has(item.value), 'bg-blue-500/10 text-blue-400')}>
               <input type="checkbox" checked={pendingAdd.has(item.value)} onChange={() => toggleAdd(item.value)} className="rounded" />
               <Server className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
               <span className="truncate">{item.label}</span>
@@ -107,27 +78,19 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
           ))}
         </div>
       </div>
-
-      {/* Arrows */}
-      <div className="flex flex-col justify-center gap-2 py-6">
-        <button onClick={addSelected} disabled={pendingAdd.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all">
-          <ChevRight className="w-4 h-4" />
-        </button>
-        <button onClick={removeSelected} disabled={pendingRemove.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all">
-          <ChevronLeft className="w-4 h-4" />
-        </button>
+      <div className="flex flex-col justify-center gap-2">
+        <button onClick={addSelected} disabled={pendingAdd.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all"><ChevRight className="w-4 h-4" /></button>
+        <button onClick={removeSelected} disabled={pendingRemove.size === 0} className="p-1.5 rounded border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-all"><ChevronLeft className="w-4 h-4" /></button>
       </div>
-
-      {/* Right: Selected */}
       <div className="flex-1 border border-[var(--dg-border)] rounded-lg overflow-hidden">
-        <div className="px-3 py-2 bg-[var(--dg-bg-tertiary)] flex items-center justify-between">
+        <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>
         </div>
-        <div className="max-h-56 overflow-y-auto px-2 py-2 space-y-0.5">
-          {selectedFiltered.length === 0 && <div className="text-center py-8 text-xs text-[var(--dg-text-muted)]">请从左侧选择实例</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.map(item => (
-            <label key={item.value} className={rowCls(pendingRemove.has(item.value), 'bg-red-500/10 text-red-400')}>
+            <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" />
               <Server className="w-3 h-3 text-emerald-400 flex-shrink-0" />
               <span className="truncate">{item.label}</span>
@@ -140,7 +103,7 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
   );
 }
 
-/* ───────── Main Component ───────── */
+/* ───────── Main ───────── */
 
 export default function InstanceGroupPage() {
   const [groups, setGroups] = useState<InstanceGroup[]>([]);
@@ -152,18 +115,18 @@ export default function InstanceGroupPage() {
   const [showUserModal, setShowUserModal] = useState(false);
   const canManage = useActionPermission('instance-group.manage');
 
-  // Form state
+  // Create form — dual transfer
   const [formName, setFormName] = useState('');
   const [formDesc, setFormDesc] = useState('');
-  const [formAccessType, setFormAccessType] = useState<'readonly' | 'write'>('readonly');
   const [formIsActive, setFormIsActive] = useState(true);
-  // Transfer: instance IDs as strings
-  const [formInstanceIds, setFormInstanceIds] = useState<string[]>([]);
+  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[]>([]);
 
-  // All instances for transfer
   const [allInstances, setAllInstances] = useState<any[]>([]);
-
-  // User assignment
   const [allUsers, setAllUsers] = useState<any[]>([]);
   const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
   const [userSearch, setUserSearch] = useState('');
@@ -171,41 +134,34 @@ export default function InstanceGroupPage() {
   const selectedGroup = groups.find(g => g.id === selectedId);
 
   const fetchGroups = useCallback(async () => {
-    try {
-      const data = await instanceGroupApi.list();
-      setGroups(data);
-    } catch { /* */ } finally { setLoading(false); }
+    try { setGroups(await instanceGroupApi.list()); } catch {} finally { setLoading(false); }
   }, []);
 
   useEffect(() => { fetchGroups(); }, [fetchGroups]);
 
-  // Load instances when modal opens
   useEffect(() => {
     if (showCreateModal || showEditModal) {
       instanceApi.list().then((res: any) => {
-        const data = Array.isArray(res) ? res : (res?.items || []);
-        setAllInstances(data);
+        setAllInstances(Array.isArray(res) ? res : (res?.items || []));
       }).catch(() => {});
     }
   }, [showCreateModal, showEditModal]);
 
-  // Load users when user modal opens
   useEffect(() => {
     if (showUserModal) {
-      userApi.list().then((data: any) => {
-        const items = (data as any)?.items || data;
+      userApi.list().then((d: any) => {
+        const items = d?.items || d;
         setAllUsers(Array.isArray(items) ? items : []);
       }).catch(() => {});
     }
   }, [showUserModal]);
 
-  // Build transfer items from allInstances
   const transferItems = useMemo(() =>
-    allInstances.map((inst: any) => ({
-      label: `${inst.name} (${inst.host}:${inst.port})`,
-      value: String(inst.id),
-      tag: inst.db_type,
-      tagColor: DB_TYPE_COLORS[inst.db_type] || '',
+    allInstances.map((i: any) => ({
+      label: `${i.name} (${i.host}:${i.port})`,
+      value: String(i.id),
+      tag: i.db_type,
+      tagColor: DB_TYPE_COLORS[i.db_type] || '',
     })),
     [allInstances]
   );
@@ -213,42 +169,48 @@ 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 resetForm = () => {
-    setFormName(''); setFormDesc(''); setFormAccessType('readonly');
-    setFormIsActive(true); setFormInstanceIds([]);
+  const resetCreateForm = () => {
+    setFormName(''); setFormDesc(''); setFormIsActive(true);
+    setReadonlyInstanceIds([]); setWriteInstanceIds([]);
   };
 
-  // Convert instance id strings to actual group assignment
+  /* ── Create: one shot, two groups ── */
   const handleCreate = async () => {
     if (!formName.trim()) return;
-    const group = await instanceGroupApi.create({
-      name: formName,
-      description: formDesc || undefined,
-      access_type: formAccessType,
-      is_active: formIsActive,
-      db_type: 'all',
-    } as any);
-    // Assign instances to this group
-    const ids = formInstanceIds.map(Number);
-    if (ids.length > 0 && group.id) {
-      await instanceGroupApi.assignInstances(group.id, ids);
+    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));
     }
-    setShowCreateModal(false); resetForm(); fetchGroups();
+    // 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();
+  };
+
+  /* ── Edit: single group ── */
+  const openEditModal = (group: InstanceGroup) => {
+    setFormName(group.name.replace(/-只读$/, '').replace(/-写入$/, ''));
+    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)));
+    setShowEditModal(true);
   };
 
   const handleEdit = async () => {
     if (!selectedId || !formName.trim()) return;
     await instanceGroupApi.update(selectedId, {
-      name: formName,
-      description: formDesc || undefined,
-      access_type: formAccessType,
-      is_active: formIsActive,
-      db_type: 'all',
+      name: formName, description: formDesc || undefined,
+      access_type: editAccessType, is_active: formIsActive, db_type: 'all',
     } as any);
-    // Reassign instances
-    const ids = formInstanceIds.map(Number);
-    await instanceGroupApi.assignInstances(selectedId, ids);
-    setShowEditModal(false); resetForm(); fetchGroups();
+    await instanceGroupApi.assignInstances(selectedId, editInstanceIds.map(Number));
+    setShowEditModal(false); fetchGroups();
   };
 
   const handleDelete = async (id: number) => {
@@ -258,22 +220,13 @@ export default function InstanceGroupPage() {
     fetchGroups();
   };
 
-  const openEditModal = (group: InstanceGroup) => {
-    setFormName(group.name);
-    setFormDesc(group.description || '');
-    setFormAccessType(((group as any).access_type === 'write' ? 'write' : 'readonly'));
-    setFormIsActive(group.is_active);
-    setFormInstanceIds((group.instances || []).map((i: any) => String(i.id)));
-    setShowEditModal(true);
-  };
-
   const handleAssignUsers = async () => {
     if (!selectedId || selectedUserIds.length === 0) return;
     await instanceGroupApi.assignUsers(selectedId, selectedUserIds);
     setShowUserModal(false); setSelectedUserIds([]); fetchGroups();
   };
 
-  const getAtConfig = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
+  const getAt = (type: string) => ACCESS_TYPES.find(t => t.value === type) || ACCESS_TYPES[0];
 
   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>;
 
@@ -286,13 +239,13 @@ export default function InstanceGroupPage() {
           <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">
-            <Plus className="w-4 h-4" /> 新建权限组
+          <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">
+            <Plus className="w-4 h-4" /> 新建权限策略
           </button>
         )}
       </div>
 
-      {/* 2 permission type cards */}
+      {/* 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;
@@ -300,13 +253,8 @@ export default function InstanceGroupPage() {
           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={`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>
@@ -324,13 +272,13 @@ export default function InstanceGroupPage() {
           <div className="space-y-2 max-h-[calc(100vh-420px)] 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 = getAtConfig((group as any).access_type || 'readonly');
+              const at = getAt((group as any).access_type || 'readonly');
               const Icon = at.icon;
               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">{group.name}</span>
+                    <span className="font-medium text-sm truncate">{group.name}</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>
@@ -347,7 +295,7 @@ export default function InstanceGroupPage() {
         <div className="flex-1 min-w-0">
           {selectedGroup ? (() => {
             const sg = selectedGroup;
-            const at = getAtConfig((sg as any).access_type || 'readonly');
+            const at = getAt((sg as any).access_type || 'readonly');
             const Icon = at.icon;
             return (
               <div className="space-y-4">
@@ -372,29 +320,23 @@ export default function InstanceGroupPage() {
                     </div>
                   </CardContent>
                 </Card>
-
-                {/* Related 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 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>
-                        ))}
-                      </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>}
                   </CardContent>
                 </Card>
-
-                {/* Related Users */}
                 <Card className="dg-card">
                   <CardContent className="p-5">
                     <div className="flex items-center justify-between mb-3">
@@ -402,15 +344,13 @@ export default function InstanceGroupPage() {
                       {canManage && <button onClick={() => { setSelectedUserIds([]); setShowUserModal(true); }} className="text-xs text-blue-400 hover:text-blue-300">添加用户</button>}
                     </div>
                     {sg.users && sg.users.length > 0 ? (
-                      <div className="space-y-1.5">
-                        {sg.users.map(u => (
-                          <div key={u.id} className="flex items-center gap-2.5 px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
-                            <div className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-medium">{(u.display_name || u.username).charAt(0)}</div>
-                            <span className="text-sm">{u.display_name || u.username}</span>
-                            <span className="text-xs text-[var(--dg-text-muted)]">{u.role}</span>
-                          </div>
-                        ))}
-                      </div>
+                      <div className="space-y-1.5">{sg.users.map(u => (
+                        <div key={u.id} className="flex items-center gap-2.5 px-3 py-2 bg-[var(--dg-bg-tertiary)] rounded-lg">
+                          <div className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-medium">{(u.display_name || u.username).charAt(0)}</div>
+                          <span className="text-sm">{u.display_name || u.username}</span>
+                          <span className="text-xs text-[var(--dg-text-muted)]">{u.role}</span>
+                        </div>
+                      ))}</div>
                     ) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>}
                   </CardContent>
                 </Card>
@@ -425,69 +365,87 @@ export default function InstanceGroupPage() {
         </div>
       </div>
 
-      {/* Create/Edit Modal */}
-      {(showCreateModal || showEditModal) && (
+      {/* ═══════ 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-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">{showCreateModal ? '新建权限组' : '编辑权限组'}</h3>
+          <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>
-                <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 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>
-                  <label className="block text-sm font-medium mb-1.5">状态</label>
-                  <select 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={formIsActive ? 'true' : 'false'} onChange={e => setFormIsActive(e.target.value === 'true')}>
-                    <option value="true">启用</option>
-                    <option value="false">禁用</option>
-                  </select>
-                </div>
               </div>
 
-              {/* Access Type */}
-              <div>
-                <label className="block text-sm font-medium mb-2">权限类型</label>
-                <div className="grid grid-cols-2 gap-3">
-                  {ACCESS_TYPES.map(at => {
-                    const Icon = at.icon;
-                    return (
-                      <button key={at.value} type="button" onClick={() => setFormAccessType(at.value as 'readonly' | 'write')}
-                        className={`p-4 rounded-lg text-left transition-all ${formAccessType === at.value ? at.bg + ' ring-1 ring-current ' + at.color : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'}`}>
-                        <Icon className="w-5 h-5 mb-2" />
-                        <div className="text-sm font-medium">{at.label}</div>
-                        <div className="text-[11px] mt-1 opacity-70">{at.desc}</div>
-                      </button>
-                    );
-                  })}
+              {/* 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>
 
-              {/* Transfer: select instances */}
-              <div>
-                <label className="block text-sm font-medium mb-2">关联实例</label>
-                <Transfer
-                  title="已关联实例"
-                  items={transferItems}
-                  selected={formInstanceIds}
-                  onChange={setFormInstanceIds}
-                />
+              {/* 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); setShowEditModal(false); resetForm(); }} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
-                <button onClick={showCreateModal ? handleCreate : handleEdit} 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">{showCreateModal ? '创建' : '保存'}</button>
+                <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>
       )}
 
-      {/* User Modal */}
+      {/* ═══════ 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 ═══════ */}
       {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()}>