feat: 数据源编辑加排除数据库+脱敏字段+审批流关联; 权限组Transfer改为选择实例

- EditInstanceDialog: 新增排除数据库(逗号分隔)、脱敏字段(动态表单+表/字段/规则)、审批流程关联
- Instance: workflow JSON字段改为workflow_id FK关联workflow_definitions表
- InstanceGroupPage: Transfer穿梭框从选数据库改为选实例(数据源)
- 后端instance API返回workflow_name, _get_workflow_names批量查询
- DB迁移: instances表添加workflow_id列
- 37个测试全部通过

frontend/src/components/EditInstanceDialog.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect } from 'react';
-import { X, Loader2 } from 'lucide-react';
+import { X, Loader2, Plus, Trash2 } from 'lucide-react';
 import { instanceApi } from '@/api/instance';
-import { instanceGroupApi } from '@/api/instanceGroup';
+import { workflowApi } from '@/api/workflow';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
@@ -16,13 +16,17 @@ interface InstanceData {
   database: string;
   env: string;
   access_mode: string;
+  workflow_id?: number | null;
+  workflow_name?: string | null;
+  excluded_databases?: string[] | null;
+  mask_fields?: { table: string; field: string; rule: string }[] | null;
   group_id?: number | null;
 }
 
-interface PermGroup {
+interface WorkflowItem {
   id: number;
   name: string;
-  access_type?: string;
+  is_active?: boolean;
 }
 
 interface Props {
@@ -44,6 +48,14 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
   const [database, setDatabase] = useState(instance.database || '');
   const [env, setEnv] = useState(instance.env || 'development');
   const [accessMode, setAccessMode] = useState(instance.access_mode || 'readwrite');
+  const [workflowId, setWorkflowId] = useState<number | null>(instance.workflow_id || null);
+  const [workflows, setWorkflows] = useState<WorkflowItem[]>([]);
+  // excluded_databases: comma-separated input
+  const [excludedDbs, setExcludedDbs] = useState((instance.excluded_databases || []).join(', '));
+  // mask_fields
+  const [maskFields, setMaskFields] = useState<{ table: string; field: string; rule: string }[]>(
+    instance.mask_fields && instance.mask_fields.length > 0 ? instance.mask_fields : []
+  );
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
 
@@ -57,14 +69,42 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
     setDatabase(instance.database || '');
     setEnv(instance.env || 'development');
     setAccessMode(instance.access_mode || 'readwrite');
+    setWorkflowId(instance.workflow_id || null);
+    setExcludedDbs((instance.excluded_databases || []).join(', '));
+    setMaskFields(instance.mask_fields && instance.mask_fields.length > 0 ? instance.mask_fields : []);
     setError('');
   }, [instance]);
 
+  /* Load workflows when modal opens */
+  useEffect(() => {
+    if (open) {
+      workflowApi.list().then((data: any) => {
+        const items = Array.isArray(data) ? data : (data?.items || []);
+        setWorkflows(items.filter((w: WorkflowItem) => w.is_active !== false));
+      }).catch(() => setWorkflows([]));
+    }
+  }, [open]);
+
+  const addMaskField = () => setMaskFields([...maskFields, { table: '', field: '', rule: 'mask' }]);
+  const removeMaskField = (idx: number) => setMaskFields(maskFields.filter((_, i) => i !== idx));
+  const updateMaskField = (idx: number, key: string, value: string) => {
+    const next = [...maskFields];
+    next[idx] = { ...next[idx], [key]: value };
+    setMaskFields(next);
+  };
+
   const handleSubmit = useCallback(async () => {
     if (!name.trim()) { setError('请填写名称'); return; }
     if (!host.trim()) { setError('请填写地址'); return; }
     setSubmitting(true); setError('');
     try {
+      const parsedExcluded = excludedDbs.trim()
+        ? excludedDbs.split(',').map(s => s.trim()).filter(Boolean)
+        : undefined;
+      const parsedMask = maskFields.some(m => m.table && m.field)
+        ? maskFields.filter(m => m.table && m.field)
+        : undefined;
+
       await instanceApi.update(instance.id, {
         name: name.trim(),
         host: host.trim(),
@@ -74,6 +114,9 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
         database: database.trim() || undefined,
         env,
         access_mode: accessMode,
+        workflow_id: workflowId,
+        excluded_databases: parsedExcluded,
+        mask_fields: parsedMask,
       });
       onSaved();
     } catch (e: unknown) {
@@ -82,7 +125,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
     } finally {
       setSubmitting(false);
     }
-  }, [name, host, port, username, password, database, env, accessMode, instance.id, onSaved]);
+  }, [name, host, port, username, password, database, env, accessMode, workflowId, excludedDbs, maskFields, instance.id, onSaved]);
 
   if (!open) return null;
 
@@ -98,27 +141,20 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4">
           <h2 className="text-base font-semibold">编辑数据源</h2>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors"
-          >
+          <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>
-          )}
+          {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
 
-          {/* Name */}
           <div>
             <label className={labelCls}>名称</label>
             <input className={inputCls} value={name} onChange={e => setName(e.target.value)} placeholder="实例名称" />
           </div>
 
-          {/* Host + Port */}
           <div className="grid grid-cols-3 gap-3">
             <div className="col-span-2">
               <label className={labelCls}>地址</label>
@@ -130,7 +166,6 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
             </div>
           </div>
 
-          {/* Username + Password */}
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className={labelCls}>用户名</label>
@@ -142,13 +177,11 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
             </div>
           </div>
 
-          {/* Database */}
           <div>
             <label className={labelCls}>默认数据库</label>
             <input className={inputCls} value={database} onChange={e => setDatabase(e.target.value)} placeholder="可选" />
           </div>
 
-          {/* Env + Access Mode */}
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className={labelCls}>环境</label>
@@ -169,21 +202,57 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
               </select>
             </div>
           </div>
+
+          {/* 审批流程 */}
+          <div>
+            <label className={labelCls}>审批流程</label>
+            <select className={inputCls} value={workflowId ?? ''} onChange={e => setWorkflowId(e.target.value ? Number(e.target.value) : null)}>
+              <option value="">不关联审批流程</option>
+              {workflows.map(w => <option key={w.id} value={w.id}>{w.name}</option>)}
+            </select>
+            {workflows.length === 0 && <p className="text-xs text-[var(--dg-text-muted)] mt-1">暂无可用审批流程</p>}
+          </div>
+
+          {/* 排除数据库 */}
+          <div>
+            <label className={labelCls}>排除数据库 <span className="font-normal text-[var(--dg-text-muted)]">（逗号分隔，如 sys, mysql）</span></label>
+            <input className={inputCls} value={excludedDbs} onChange={e => setExcludedDbs(e.target.value)} placeholder="sys, information_schema, mysql" />
+          </div>
+
+          {/* 脱敏字段 */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className={labelCls}>脱敏字段</label>
+              <button onClick={addMaskField} className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
+                <Plus className="w-3 h-3" /> 添加
+              </button>
+            </div>
+            {maskFields.length === 0 && (
+              <div className="text-xs text-[var(--dg-text-muted)] py-2">未配置脱敏规则</div>
+            )}
+            <div className="space-y-2">
+              {maskFields.map((mf, idx) => (
+                <div key={idx} className="flex items-center gap-2">
+                  <input className="flex-1 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" value={mf.table} onChange={e => updateMaskField(idx, 'table', e.target.value)} placeholder="表名" />
+                  <input className="flex-1 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" value={mf.field} onChange={e => updateMaskField(idx, 'field', e.target.value)} placeholder="字段名" />
+                  <select className="w-20 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" value={mf.rule} onChange={e => updateMaskField(idx, 'rule', e.target.value)}>
+                    <option value="mask">遮盖</option>
+                    <option value="hide">隐藏</option>
+                    <option value="hash">哈希</option>
+                  </select>
+                  <button onClick={() => removeMaskField(idx)} className="p-1 text-[var(--dg-text-muted)] hover:text-red-400">
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </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"
-          >
+          <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" />}
             保存
           </button>

frontend/src/pages/InstanceGroupPage.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
   Plus, Search, Edit2, Trash2, Server, Users, ChevronRight, X,
   Eye, PenLine, ChevronLeft, ChevronRight as ChevRight,
-  Database, UserPlus, XCircle,
+  Database, UserPlus,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
@@ -16,7 +16,7 @@ const ACCESS_TYPES = [
   {
     value: 'readonly',
     label: '只读查看',
-    desc: '关联只读/从库 → 用于查询数据',
+    desc: '关联只读/从库，用于查询数据',
     color: 'text-emerald-400',
     bg: 'bg-emerald-500/15',
     icon: Eye,
@@ -24,7 +24,7 @@ const ACCESS_TYPES = [
   {
     value: 'write',
     label: '写入变更',
-    desc: '关联读写/主库 → 用于数据变更工单',
+    desc: '关联读写/主库，用于数据变更工单',
     color: 'text-amber-400',
     bg: 'bg-amber-500/15',
     icon: PenLine,
@@ -34,89 +34,81 @@ const ACCESS_TYPES = [
 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]',
+  postgres: 'bg-[rgba(51,103,145,0.15)] text-[#42a5f5]',
   redis: 'bg-[rgba(220,50,32,0.15)] text-[#ef5350]',
   mongo: 'bg-[rgba(71,162,72,0.15)] text-[#66bb6a]',
 };
 
 /* ───────── Transfer Component ───────── */
 
+interface TransferItem {
+  label: string;
+  value: string;
+  tag?: string;
+  tagColor?: string;
+}
+
 interface TransferProps {
   title: string;
-  items: { label: string; value: string; extra?: string }[];
+  items: TransferItem[];
   selected: string[];
   onChange: (selected: string[]) => void;
 }
 
 function Transfer({ title, items, selected, onChange }: TransferProps) {
   const [search, setSearch] = useState('');
-
-  const unselected = 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.toLowerCase().includes(search.toLowerCase()))
-  );
   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 selectedFiltered = items.filter(
+    i => selected.includes(i.value) &&
+      (i.label.toLowerCase().includes(search.toLowerCase()) || i.value.toLowerCase().includes(search.toLowerCase()))
+  );
+
   const addSelected = () => {
-    const newSelected = [...selected, ...pendingAdd];
-    onChange(newSelected);
+    onChange([...selected, ...pendingAdd]);
     setPendingAdd(new Set());
   };
-
   const removeSelected = () => {
-    const newSelected = selected.filter(v => !pendingRemove.has(v));
-    onChange(newSelected);
+    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 togglePendingAdd = (v: string) => {
-    setPendingAdd(prev => {
-      const next = new Set(prev);
-      if (next.has(v)) next.delete(v); else next.add(v);
-      return next;
-    });
-  };
-
-  const togglePendingRemove = (v: string) => {
-    setPendingRemove(prev => {
-      const next = new Set(prev);
-      if (next.has(v)) next.delete(v); else next.add(v);
-      return next;
-    });
-  };
+  const rowCls = (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">
-          <span className="text-xs font-medium">可选数据库</span>
+          <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"
-            placeholder="搜索数据库..."
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-          />
+          <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"
+            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>}
           {unselected.map(item => (
-            <label key={item.value} className={`flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${pendingAdd.has(item.value) ? 'bg-blue-500/10 text-blue-400' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
-              <input type="checkbox" checked={pendingAdd.has(item.value)} onChange={() => togglePendingAdd(item.value)} className="rounded" />
-              <Database className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
-              <span>{item.label}</span>
-              {item.extra && <span className="text-[var(--dg-text-muted)] ml-auto">{item.extra}</span>}
+            <label key={item.value} className={rowCls(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>
+              {item.tag && <span className={`ml-auto text-[10px] px-1 py-0.5 rounded ${item.tagColor || ''}`}>{item.tag}</span>}
             </label>
           ))}
         </div>
       </div>
 
-      {/* Middle: Arrows */}
+      {/* 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" />
@@ -133,13 +125,13 @@ function Transfer({ title, items, selected, onChange }: TransferProps) {
           <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>}
+          {selectedFiltered.length === 0 && <div className="text-center py-8 text-xs text-[var(--dg-text-muted)]">请从左侧选择实例</div>}
           {selectedFiltered.map(item => (
-            <label key={item.value} className={`flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-xs transition-colors ${pendingRemove.has(item.value) ? 'bg-red-500/10 text-red-400' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
-              <input type="checkbox" checked={pendingRemove.has(item.value)} onChange={() => togglePendingRemove(item.value)} className="rounded" />
-              <Database className="w-3 h-3 text-emerald-400 flex-shrink-0" />
-              <span>{item.label}</span>
-              {item.extra && <span className="text-[var(--dg-text-muted)] ml-auto">{item.extra}</span>}
+            <label key={item.value} className={rowCls(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>
+              {item.tag && <span className={`ml-auto text-[10px] px-1 py-0.5 rounded ${item.tagColor || ''}`}>{item.tag}</span>}
             </label>
           ))}
         </div>
@@ -164,22 +156,18 @@ export default function InstanceGroupPage() {
   const [formName, setFormName] = useState('');
   const [formDesc, setFormDesc] = useState('');
   const [formAccessType, setFormAccessType] = useState<'readonly' | 'write'>('readonly');
-  const [formAllowedDbs, setFormAllowedDbs] = useState<string[]>([]);
   const [formIsActive, setFormIsActive] = useState(true);
-  const [formInstanceIds, setFormInstanceIds] = useState<number[]>([]);
+  // Transfer: instance IDs as strings
+  const [formInstanceIds, setFormInstanceIds] = useState<string[]>([]);
 
-  // DB list for transfer
-  const [allDatabases, setAllDatabases] = useState<{ label: string; value: string; extra?: string }[]>([]);
-  const [loadingDbs, setLoadingDbs] = useState(false);
+  // 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('');
 
-  // Instance list for form
-  const [allInstances, setAllInstances] = useState<any[]>([]);
-
   const selectedGroup = groups.find(g => g.id === selectedId);
 
   const fetchGroups = useCallback(async () => {
@@ -194,7 +182,10 @@ export default function InstanceGroupPage() {
   // Load instances when modal opens
   useEffect(() => {
     if (showCreateModal || showEditModal) {
-      instanceApi.list().then(setAllInstances).catch(() => {});
+      instanceApi.list().then((res: any) => {
+        const data = Array.isArray(res) ? res : (res?.items || []);
+        setAllInstances(data);
+      }).catch(() => {});
     }
   }, [showCreateModal, showEditModal]);
 
@@ -208,46 +199,55 @@ export default function InstanceGroupPage() {
     }
   }, [showUserModal]);
 
-  // Load databases for selected instances in form
-  const loadDatabasesForInstances = useCallback(async (instanceIds: number[]) => {
-    if (instanceIds.length === 0) { setAllDatabases([]); return; }
-    setLoadingDbs(true);
-    try {
-      const inst = allInstances.find((i: any) => i.id === instanceIds[0]);
-      if (!inst) { setAllDatabases([]); return; }
-      const res = await instanceApi.listDatabases(inst.id);
-      const dbs = (res as any)?.databases || res || [];
-      setAllDatabases(dbs.map((d: string) => ({ label: d, value: d })));
-    } catch { setAllDatabases([]); } finally { setLoadingDbs(false); }
-  }, [allInstances]);
+  // 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]
+  );
 
   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');
-    setFormAllowedDbs([]); setFormIsActive(true); setFormInstanceIds([]); setAllDatabases([]);
+    setFormIsActive(true); setFormInstanceIds([]);
   };
 
+  // Convert instance id strings to actual group assignment
   const handleCreate = async () => {
     if (!formName.trim()) return;
-    await instanceGroupApi.create({
-      name: formName, description: formDesc || undefined,
+    const group = await instanceGroupApi.create({
+      name: formName,
+      description: formDesc || undefined,
       access_type: formAccessType,
-      allowed_databases: formAllowedDbs.length > 0 ? formAllowedDbs : undefined,
-      is_active: formIsActive, db_type: 'all',
+      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);
+    }
     setShowCreateModal(false); resetForm(); fetchGroups();
   };
 
   const handleEdit = async () => {
     if (!selectedId || !formName.trim()) return;
     await instanceGroupApi.update(selectedId, {
-      name: formName, description: formDesc || undefined,
+      name: formName,
+      description: formDesc || undefined,
       access_type: formAccessType,
-      allowed_databases: formAllowedDbs.length > 0 ? formAllowedDbs : undefined,
-      is_active: formIsActive, db_type: 'all',
+      is_active: formIsActive,
+      db_type: 'all',
     } as any);
+    // Reassign instances
+    const ids = formInstanceIds.map(Number);
+    await instanceGroupApi.assignInstances(selectedId, ids);
     setShowEditModal(false); resetForm(); fetchGroups();
   };
 
@@ -262,12 +262,8 @@ export default function InstanceGroupPage() {
     setFormName(group.name);
     setFormDesc(group.description || '');
     setFormAccessType(((group as any).access_type === 'write' ? 'write' : 'readonly'));
-    setFormAllowedDbs((group as any).allowed_databases || []);
     setFormIsActive(group.is_active);
-    // Load instance IDs
-    const instIds = (group.instances || []).map(i => i.id);
-    setFormInstanceIds(instIds);
-    if (instIds.length > 0) loadDatabasesForInstances(instIds);
+    setFormInstanceIds((group.instances || []).map((i: any) => String(i.id)));
     setShowEditModal(true);
   };
 
@@ -338,7 +334,7 @@ export default function InstanceGroupPage() {
                   </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><Database className="w-3 h-3 inline mr-0.5" />{((group as any).allowed_databases || []).length || '全部'}库</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>
                   </div>
                 </div>
@@ -353,7 +349,6 @@ export default function InstanceGroupPage() {
             const sg = selectedGroup;
             const at = getAtConfig((sg as any).access_type || 'readonly');
             const Icon = at.icon;
-            const allowedDbs: string[] = (sg as any).allowed_databases || [];
             return (
               <div className="space-y-4">
                 <Card className="dg-card">
@@ -378,26 +373,10 @@ export default function InstanceGroupPage() {
                   </CardContent>
                 </Card>
 
-                {/* Authorized databases */}
-                <Card className="dg-card">
-                  <CardContent className="p-5">
-                    <h3 className="text-sm font-semibold flex items-center gap-2 mb-3"><Database className="w-4 h-4 text-[var(--dg-text-muted)]" />授权数据库 {allowedDbs.length > 0 ? `(${allowedDbs.length})` : '(全部)'}</h3>
-                    {allowedDbs.length > 0 ? (
-                      <div className="flex flex-wrap gap-1.5">
-                        {allowedDbs.map(db => <span key={db} className="px-2.5 py-1 text-xs bg-[var(--dg-bg-tertiary)] rounded-md">{db}</span>)}
-                      </div>
-                    ) : (
-                      <div className="text-sm text-[var(--dg-text-muted)]">已授权该数据源下所有数据库</div>
-                    )}
-                  </CardContent>
-                </Card>
-
                 {/* Related Instances */}
                 <Card className="dg-card">
                   <CardContent className="p-5">
-                    <div className="flex items-center justify-between mb-3">
-                      <h3 className="text-sm font-semibold flex items-center gap-2"><Server className="w-4 h-4 text-[var(--dg-text-muted)]" />关联数据源 ({sg.instances?.length || 0})</h3>
-                    </div>
+                    <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 => (
@@ -411,7 +390,7 @@ export default function InstanceGroupPage() {
                           </div>
                         ))}
                       </div>
-                    ) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联数据源</div>}
+                    ) : <div className="text-sm text-[var(--dg-text-muted)]">暂未关联实例</div>}
                   </CardContent>
                 </Card>
 
@@ -452,7 +431,6 @@ export default function InstanceGroupPage() {
           <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="space-y-5">
-              {/* Name */}
               <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="如：生产只读、开发写入" />
@@ -471,7 +449,7 @@ export default function InstanceGroupPage() {
                 </div>
               </div>
 
-              {/* Access Type — 2 cards */}
+              {/* Access Type */}
               <div>
                 <label className="block text-sm font-medium mb-2">权限类型</label>
                 <div className="grid grid-cols-2 gap-3">
@@ -489,44 +467,17 @@ export default function InstanceGroupPage() {
                 </div>
               </div>
 
-              {/* Select instance first */}
+              {/* Transfer: select instances */}
               <div>
-                <label className="block text-sm font-medium mb-2">关联数据源</label>
-                <div className="flex flex-wrap gap-2">
-                  {allInstances.map(inst => (
-                    <button key={inst.id} type="button" onClick={() => {
-                      const newIds = formInstanceIds.includes(inst.id)
-                        ? formInstanceIds.filter(id => id !== inst.id)
-                        : [...formInstanceIds, inst.id];
-                      setFormInstanceIds(newIds);
-                      if (newIds.length > 0) loadDatabasesForInstances(newIds);
-                      else { setAllDatabases([]); setFormAllowedDbs([]); }
-                    }}
-                      className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${formInstanceIds.includes(inst.id) ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'}`}>
-                      {inst.name}
-                    </button>
-                  ))}
-                  {allInstances.length === 0 && <span className="text-xs text-[var(--dg-text-muted)]">暂无数据源</span>}
-                </div>
+                <label className="block text-sm font-medium mb-2">关联实例</label>
+                <Transfer
+                  title="已关联实例"
+                  items={transferItems}
+                  selected={formInstanceIds}
+                  onChange={setFormInstanceIds}
+                />
               </div>
 
-              {/* Transfer: database selection */}
-              {formInstanceIds.length > 0 && (
-                <div>
-                  <label className="block text-sm font-medium mb-2">授权数据库 <span className="text-[var(--dg-text-muted)] font-normal text-xs">（留空=全部库）</span></label>
-                  {loadingDbs ? (
-                    <div className="flex items-center justify-center py-8 text-sm text-[var(--dg-text-muted)]"><div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-2" />加载数据库列表...</div>
-                  ) : (
-                    <Transfer
-                      title="已授权数据库"
-                      items={allDatabases}
-                      selected={formAllowedDbs}
-                      onChange={setFormAllowedDbs}
-                    />
-                  )}
-                </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>