diff --git a/.zcode/plans/plan-sess_bc7da99a-6d01-4954-8e96-069e6ebb2857.md b/.zcode/plans/plan-sess_bc7da99a-6d01-4954-8e96-069e6ebb2857.md
index 09a969f..f3a850b 100644
--- a/.zcode/plans/plan-sess_bc7da99a-6d01-4954-8e96-069e6ebb2857.md
+++ b/.zcode/plans/plan-sess_bc7da99a-6d01-4954-8e96-069e6ebb2857.md
@@ -1,21 +1,29 @@
-# LDAP:借鉴 aiops 的 AD 兼容与配置门控 + 连不上根因说明
+# 统一全部弹框(对照指南 06/07 章)
 
-研究结论:LDAP 参数本身没问题(本机对 8.217.205.92:389 实测连接/导入/登录全通,aiops 种子配置与 opsxsql 同源)。「连不了」的根因在**你正在跑的旧后端实例**:① 其 sqlite 只读(实测报 `attempt to write a readonly database`,LDAP 配置根本存不进去);② 旧二进制还有 CORS 白名单 bug(非 5173 端口的前端所有写请求空 403)。需重启到新构建后端+可写 DB。本次按 aiops 补两块真差距:
+探索结论:「奇特」的可解释根因——① ModalOverlay 系 14 处全部「弹窗里再套一张卡片」(双边框/双阴影/双圆角/双倍内边距);② 双滚动条;③ **侧栏/顶栏 z-200 浮在弹窗 z-100 之上**(弹窗像陷进布局里、导航不被遮罩仍可点);④ 关闭钮 5 种形态、footer 按钮 4 套体系、主色 5 种、标题字号 4 档、宽度 7 档;⑤ ModalOverlay 系无动画/无 ESC 之外的可达性;⑥ TicketDetailDialog 内嵌弹窗 ESC 会连锁关闭外框;⑦ EditInstanceDialog 独立第四体系(无 ESC/动画/portal);⑧ LDAP 三弹窗疑似孤儿 + BatchImportModal 残留死代码。
 
-## 1. 后端借鉴 aiops(controller/ldap.go)——AD/OpenLDAP 双兼容
-opsxsql 只支持 OpenLDAP(objectClass=inetOrgPerson + uid),AD 域(sAMAccountName)会搜不到。移植 aiops 的:
-- **多轮过滤器**(ldapUserFilter/ldapADUserFilter/ldapUserListFilters):配置过滤器优先 → `(objectClass=inetOrgPerson)` → AD `(&(objectClass=user)(|(sAMAccountName=*)...))` 兜底;登录时 OpenLDAP 过滤器 + AD 过滤器两轮尝试
-- **属性回退链**(ldapEntryAttr):uid→sAMAccountName→userPrincipalName、cn→displayName、mail、telephoneNumber→mobile,映射解析按回退取值
-- 应用于 tryLDAPAuth(handler/auth.go)、ListLDAPUsers、BatchImportLDAP
-- 保留 opsxsql 的 AES 密码加密(aiops 是明文,不倒退)
+## 1. 基座统一(改 3 个基础组件,全站生效)
+- `ui/dialog.tsx`:遮罩/面板 z-index 提到 **300/301**(压过侧栏 200,指南 modal=300 档);遮罩 `bg-black/45 + backdrop-blur-[2px]`;保留 fade+zoom 200ms 动画
+- `FormDialog` 规范化:统一头(标题 text-base font-semibold + 可选描述)+ **右上角统一关闭钮**(absolute X 16px,替换现在 5 种形态)、内容区单滚动(flex-col,header/footer 固定,max-h-85vh)、footer 右对齐 `gap-2 pt-4`;类名用 cn() 合并
+- `ConfirmDialog`:标题加 font-semibold,与 FormDialog 对齐(shadcn Button 保留)
 
-## 2. 前端配置门控(aiops `{ldapConfig && <Section/>}` 模式)
-- **LdapConfigPage**:GetLDAPConfig 返回 null(未配置)时,隐藏「LDAP 账号管理」(LdapManagePanel/LdapUserTable/建 OU/建用户/账号测试),显示"未配置,先保存基础连接"引导态;保存成功后管理区出现
-- **BatchImportModal**(UsersPage):未配置 LDAP 时隐藏「导入到 LDAP / 从 LDAP 导入」两个 tab,仅保留本地 CSV 导入
+## 2. ModalOverlay 重写为 Radix 内核(同 props,14 处零改调用签名)
+`open/onClose/width/className` 接口不变,内部改渲染 Radix Dialog → 免费获得 portal/焦点陷阱/滚动锁定/ESC(含嵌套正确分层,修复连锁关闭)/200ms 动画/z-300;面板策略改「header 固定 + 内容区滚动」。**修 ESC 连锁关闭 bug**
 
-## 3. 实测验证(测试后端,独立 DB)
-- 全新库未配置态:LdapConfigPage 管理区隐藏 + 导入弹窗无 LDAP tab
-- 写入配置(8.217.205.92:389/dc=opsx,dc=vip/admin):管理区出现 → OU(devops/test)/用户列表(OpenLDAP 过滤器)→ 批量导入 → logan LDAP 登录复测
-- 全量门禁(tsc/build/28 测试)后提交
+## 3. 消灭「框中框」与双滚动(14 + 1 处调用点机械清理)
+- 各 ModalOverlay 调用点删除内层 `bg/border/rounded/shadow/p-6` 卡片包装,内容直挂(保留各自布局)
+- 删除内层第二个 `max-h/overflow-y-auto`(BatchImportModal/TicketDetailDialog/InstanceGroupPage/UserDetailModal)→ 单滚动条
+- `EditInstanceDialog` 迁到 ModalOverlay(同体系,获得 ESC/动画/portal)
 
-不改 aiops 项目;测试数据仍在独立临时库,结束清理。
\ No newline at end of file
+## 4. 视觉统一(按指南 06 数值层)
+- 弹窗圆角统一 rounded-xl(12px);阴影单层 shadow-2xl、去边框(描边/阴影二选一)
+- 标题统一 text-base font-semibold;关闭钮统一形态
+- footer 按钮统一 **dg-btn 体系**(`dg-btn-sm dg-btn-secondary` 取消 / `dg-btn-primary` 主操作 / `dg-btn-danger` 危险),替换裸 button 四种写法;主色统一 var(--dg-blue)(ResetPasswordModal 的 yellow-500、LDAP 弹窗的 emerald-500 一并收敛);宽度归档 sm/md/lg/xl 四档(内容宽度语义保留,消除随意值)
+
+## 5. 死代码清理
+- 验证 LdapCreateOuDialog/LdapAddUserDialog/LdapAccountTestDialog 无引用后删除;BatchImportModal 残留的建 OU 嵌套状态/函数清除
+
+## 6. 验证
+- tsc/build/audit:pages 全绿
+- 浏览器实测 6 类弹框:用户新建/编辑(rbac)、批量导入、实例编辑(EditInstanceDialog)、工单详情+内嵌快捷审批(验证 ESC 不再连锁、z-index 压过侧栏)、Redis 行编辑、各页删除确认——确认单卡片/单滚动/统一关闭钮与按钮/动画一致
+- 提交并推送远程
\ No newline at end of file
diff --git a/frontend/src/components/EditInstanceDialog.tsx b/frontend/src/components/EditInstanceDialog.tsx
index cf50da1..d9cbb60 100644
--- a/frontend/src/components/EditInstanceDialog.tsx
+++ b/frontend/src/components/EditInstanceDialog.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect } from 'react';
-import { X, Loader2, Zap, CheckCircle, XCircle } from 'lucide-react';
+import { Loader2, Zap, CheckCircle, XCircle } from 'lucide-react';
+import { ModalOverlay } from '@/components/ModalOverlay';
 import { instanceApi } from '@/api/instance';
 import { workflowApi } from '@/api/workflow';
 
@@ -59,13 +60,20 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
   const [workflows, setWorkflows] = useState<WorkflowItem[]>([]);
   // excluded_databases: comma-separated input
   const [excludedDbs, setExcludedDbs] = useState(
-    Array.isArray(instance.excluded_databases) ? (instance.excluded_databases as string[]).join(', ') : (instance.excluded_databases || '')
+    Array.isArray(instance.excluded_databases)
+      ? (instance.excluded_databases as string[]).join(', ')
+      : instance.excluded_databases || '',
   );
   // mask_fields: comma-separated field names
   const [maskFields, setMaskFields] = useState(instance.mask_fields || '');
   const [submitting, setSubmitting] = useState(false);
   const [testing, setTesting] = useState(false);
-  const [testResult, setTestResult] = useState<{ success: boolean; message: string; version?: string; cluster_mode?: boolean } | null>(null);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+    version?: string;
+    cluster_mode?: boolean;
+  } | null>(null);
   const [error, setError] = useState('');
 
   /* Sync when instance changes */
@@ -81,7 +89,9 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
     setClusterMode(toBool(instance.cluster_mode));
     setWorkflowId(instance.workflow_id || null);
     setExcludedDbs(
-      Array.isArray(instance.excluded_databases) ? (instance.excluded_databases as string[]).join(', ') : (instance.excluded_databases || '')
+      Array.isArray(instance.excluded_databases)
+        ? (instance.excluded_databases as string[]).join(', ')
+        : instance.excluded_databases || '',
     );
     setMaskFields(instance.mask_fields || '');
     setTestResult(null);
@@ -91,20 +101,33 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
   /* 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([]));
+      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 handleSubmit = useCallback(async () => {
-    if (!name.trim()) { setError('请填写名称'); return; }
-    if (!host.trim()) { setError('请填写地址'); return; }
-    setSubmitting(true); setError('');
+    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)
+        ? excludedDbs
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean)
         : undefined;
 
       const payload: Record<string, unknown> = {
@@ -140,7 +163,23 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
     } finally {
       setSubmitting(false);
     }
-  }, [name, host, port, username, password, database, env, accessMode, clusterMode, workflowId, excludedDbs, maskFields, instance.id, instance.db_type, onSaved]);
+  }, [
+    name,
+    host,
+    port,
+    username,
+    password,
+    database,
+    env,
+    accessMode,
+    clusterMode,
+    workflowId,
+    excludedDbs,
+    maskFields,
+    instance.id,
+    instance.db_type,
+    onSaved,
+  ]);
 
   const handleTest = useCallback(async () => {
     setTesting(true);
@@ -156,18 +195,20 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
         database: database.trim() || undefined,
         cluster_mode: instance.db_type === 'redis' ? clusterMode : undefined,
       };
-      const res = mode === 'edit' && !password
-        ? await instanceApi.testConnection(instance.id)
-        : await instanceApi.testNewConnection(payload);
+      const res =
+        mode === 'edit' && !password
+          ? await instanceApi.testConnection(instance.id)
+          : await instanceApi.testNewConnection(payload);
       const result = res as { success: boolean; message: string; version?: string; cluster_mode?: boolean };
       if (instance.db_type === 'redis' && result.success) {
         setClusterMode(toBool(result.cluster_mode));
       }
       setTestResult(result);
     } catch (e: unknown) {
-      const msg = (e as { response?: { data?: { detail?: string; message?: string } } })?.response?.data?.detail
-        || (e as { response?: { data?: { message?: string } } })?.response?.data?.message
-        || '连接失败';
+      const msg =
+        (e as { response?: { data?: { detail?: string; message?: string } } })?.response?.data?.detail ||
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        '连接失败';
       setTestResult({ success: false, message: msg });
     } finally {
       setTesting(false);
@@ -176,43 +217,43 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
 
   if (!open) return null;
 
-  const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
+  const inputCls =
+    'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
   const labelCls = 'block text-xs font-medium text-[var(--dg-text-secondary)] mb-1';
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40">
-      <div
-        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto"
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4">
-          <div>
-            <h2 className="text-base font-semibold">{mode === 'clone' ? '克隆数据源' : '编辑数据源'}</h2>
-            <p className="text-xs text-[var(--dg-text-muted)] mt-1">{instance.db_type.toUpperCase()} · {instance.host}:{instance.port}</p>
-          </div>
-          <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>
+    <ModalOverlay open={true} onClose={onClose} width="md">
+      <div className="w-full">
+        {/* Header(关闭钮由弹窗基座右上角提供) */}
+        <div className="pt-1 pb-3">
+          <h2 className="text-base font-semibold">{mode === 'clone' ? '克隆数据源' : '编辑数据源'}</h2>
+          <p className="mt-1 text-xs text-[var(--dg-text-muted)]">
+            {instance.db_type.toUpperCase()} · {instance.host}:{instance.port}
+          </p>
         </div>
 
         {/* Body */}
-        <div className="px-5 pb-5 space-y-4">
+        <div className="space-y-4 pb-4">
           {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
 
           <div>
             <label className={labelCls}>名称</label>
-            <input className={inputCls} value={name} onChange={e => setName(e.target.value)} placeholder="实例名称" />
+            <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="实例名称" />
           </div>
 
           <div className="grid grid-cols-3 gap-3">
             <div className="col-span-2">
               <label className={labelCls}>地址</label>
-              <input className={inputCls} value={host} onChange={e => setHost(e.target.value)} placeholder="127.0.0.1" />
+              <input
+                className={inputCls}
+                value={host}
+                onChange={(e) => setHost(e.target.value)}
+                placeholder="127.0.0.1"
+              />
             </div>
             <div>
               <label className={labelCls}>端口</label>
-              <input className={inputCls} value={port} onChange={e => setPort(e.target.value)} placeholder="3306" />
+              <input className={inputCls} value={port} onChange={(e) => setPort(e.target.value)} placeholder="3306" />
             </div>
           </div>
 
@@ -220,19 +261,37 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
             <div>
               <label className={labelCls}>
                 用户名
-                {instance.db_type === 'redis' && <span className="font-normal text-[var(--dg-text-muted)]">（Redis 6.0+ ACL 可选）</span>}
+                {instance.db_type === 'redis' && (
+                  <span className="font-normal text-[var(--dg-text-muted)]">（Redis 6.0+ ACL 可选）</span>
+                )}
               </label>
-              <input className={inputCls} value={username} onChange={e => setUsername(e.target.value)} placeholder={instance.db_type === 'redis' ? '可选，留空则仅密码认证' : '用户名'} />
+              <input
+                className={inputCls}
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder={instance.db_type === 'redis' ? '可选，留空则仅密码认证' : '用户名'}
+              />
             </div>
             <div>
               <label className={labelCls}>{mode === 'clone' ? '密码' : '密码（留空不修改）'}</label>
-              <input className={inputCls} type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder={mode === 'edit' ? '不修改请留空' : '••••••'} />
+              <input
+                className={inputCls}
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={mode === 'edit' ? '不修改请留空' : '••••••'}
+              />
             </div>
           </div>
 
           <div>
             <label className={labelCls}>默认数据库</label>
-            <input className={inputCls} value={database} onChange={e => setDatabase(e.target.value)} placeholder={instance.db_type === 'redis' ? 'Redis 数据库编号，默认 0' : '可选'} />
+            <input
+              className={inputCls}
+              value={database}
+              onChange={(e) => setDatabase(e.target.value)}
+              placeholder={instance.db_type === 'redis' ? 'Redis 数据库编号，默认 0' : '可选'}
+            />
           </div>
 
           {instance.db_type === 'redis' && (
@@ -242,11 +301,14 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
                 {[
                   { value: false, label: '单节点', desc: '普通 Redis 或哨兵入口' },
                   { value: true, label: '集群', desc: 'Redis Cluster，按 slot 路由' },
-                ].map(item => (
+                ].map((item) => (
                   <button
                     key={item.label}
                     type="button"
-                    onClick={() => { setClusterMode(item.value); setTestResult(null); }}
+                    onClick={() => {
+                      setClusterMode(item.value);
+                      setTestResult(null);
+                    }}
                     className={`text-left p-3 rounded-lg border transition-colors ${
                       clusterMode === item.value
                         ? 'bg-blue-500/10 border-blue-500/40 text-blue-400'
@@ -264,7 +326,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className={labelCls}>环境</label>
-              <select className={inputCls} value={env} onChange={e => setEnv(e.target.value)}>
+              <select className={inputCls} value={env} onChange={(e) => setEnv(e.target.value)}>
                 <option value="development">开发</option>
                 <option value="testing">测试</option>
                 <option value="staging">预发</option>
@@ -274,7 +336,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
             </div>
             <div>
               <label className={labelCls}>访问模式</label>
-              <select className={inputCls} value={accessMode} onChange={e => setAccessMode(e.target.value)}>
+              <select className={inputCls} value={accessMode} onChange={(e) => setAccessMode(e.target.value)}>
                 <option value="readwrite">读写</option>
                 <option value="read">只读</option>
                 <option value="write">只写</option>
@@ -285,35 +347,59 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
           {/* 审批流程 */}
           <div>
             <label className={labelCls}>审批流程</label>
-            <select className={inputCls} value={workflowId ?? ''} onChange={e => setWorkflowId(e.target.value ? Number(e.target.value) : null)}>
+            <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>)}
+              {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>
 
           {testResult && (
-            <div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm ${testResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
+            <div
+              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm ${testResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}
+            >
               {testResult.success ? <CheckCircle className="w-4 h-4" /> : <XCircle className="w-4 h-4" />}
-              <span>{testResult.success ? `连接成功${testResult.version ? ` · ${testResult.version}` : ''}${instance.db_type === 'redis' ? ` · ${testResult.cluster_mode ? '集群' : '单节点'}` : ''}` : testResult.message}</span>
+              <span>
+                {testResult.success
+                  ? `连接成功${testResult.version ? ` · ${testResult.version}` : ''}${instance.db_type === 'redis' ? ` · ${testResult.cluster_mode ? '集群' : '单节点'}` : ''}`
+                  : testResult.message}
+              </span>
             </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" />
+            <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>
             <label className={labelCls}>
-              自定义脱敏字段 <span className="font-normal text-[var(--dg-text-muted)]">（逗号分隔，与全局敏感字段合并，如 id_card, address）</span>
+              自定义脱敏字段{' '}
+              <span className="font-normal text-[var(--dg-text-muted)]">
+                （逗号分隔，与全局敏感字段合并，如 id_card, address）
+              </span>
             </label>
             <input
               className={inputCls}
               value={maskFields}
-              onChange={e => setMaskFields(e.target.value)}
+              onChange={(e) => setMaskFields(e.target.value)}
               placeholder="id_card, address, bank_account"
             />
             <p className="text-xs text-[var(--dg-text-muted)] mt-1">
@@ -332,13 +418,15 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved, m
             {testing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Zap className="w-4 h-4" />}
             {testing ? '测试中...' : '测试连接'}
           </button>
-          <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="dg-btn dg-btn-secondary dg-btn-sm">
+            取消
+          </button>
+          <button onClick={handleSubmit} disabled={submitting} className="dg-btn dg-btn-primary dg-btn-sm">
             {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
             {mode === 'clone' ? '克隆' : '保存'}
           </button>
         </div>
       </div>
-    </div>
+    </ModalOverlay>
   );
 }
diff --git a/frontend/src/components/FormDialog.tsx b/frontend/src/components/FormDialog.tsx
index 94a8464..6d2d5e0 100644
--- a/frontend/src/components/FormDialog.tsx
+++ b/frontend/src/components/FormDialog.tsx
@@ -1,52 +1,53 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { XIcon } from 'lucide-react';
+/**
+ * 统一表单弹窗基座(指南 06/07 章):
+ * - 结构:固定头(标题+右上角统一关闭钮)/内容区单滚动/固定底(footer 右对齐 pt-4)
+ * - 视觉:rounded-xl 12px、单层 shadow-2xl、无边框;ESC/点遮罩不关(表单防误触)
+ * - width 预设:sm(max-w-[420px])/md(max-w-lg)/lg(max-w-2xl)/xl(max-w-4xl),可传任意值覆盖
+ */
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
 import type { ReactNode } from 'react';
 
+const WIDTH_PRESETS: Record<string, string> = {
+  sm: 'sm:max-w-[420px]',
+  md: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+};
+
 interface Props {
   open: boolean;
   onClose: () => void;
   title: string;
+  /** 可选副标题(展示在标题下) */
+  description?: string;
   children: ReactNode;
+  /** sm | md | lg | xl 或任意 max-w-* 类 */
   width?: string;
   footer?: ReactNode;
 }
 
-export function FormDialog({
-  open,
-  onClose,
-  title,
-  children,
-  width = 'max-w-lg',
-  footer,
-}: Props) {
+export function FormDialog({ open, onClose, title, description, children, width = 'md', footer }: Props) {
+  const widthCls = WIDTH_PRESETS[width] ?? width;
   return (
-    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
-      <DialogContent
-        showCloseButton={false}
-        className={`border-0 ${width} flex max-h-[85vh] flex-col`}
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between">
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) onClose();
+      }}
+    >
+      <DialogContent showCloseButton className={cn(widthCls, 'p-6')}>
+        {/* Header(固定,不随内容滚动;关闭钮由基座右上角提供) */}
+        <div className={cn('pb-3', footer && 'border-b-0', description ? 'mb-1' : 'mb-3')}>
           <DialogTitle className="text-base font-semibold">{title}</DialogTitle>
-          <button
-            onClick={onClose}
-            className="rounded-xs p-1 text-[var(--dg-text-muted)] transition-opacity hover:opacity-70"
-          >
-            <XIcon className="h-4 w-4" />
-          </button>
+          {description && <p className="mt-1 text-xs text-[var(--dg-text-muted)]">{description}</p>}
         </div>
 
-        {/* Scrollable content */}
-        <div className="flex-1 overflow-y-auto pr-1">{children}</div>
+        {/* 内容区单滚动 */}
+        <div className="min-h-0 flex-1 overflow-y-auto pr-1 scrollbar-thin">{children}</div>
 
-        {/* Optional footer */}
-        {footer && <div className="flex justify-end gap-2 pt-2">{footer}</div>}
+        {/* Footer(固定,右对齐) */}
+        {footer && <div className="flex justify-end gap-2 pt-4">{footer}</div>}
       </DialogContent>
     </Dialog>
   );
diff --git a/frontend/src/components/ModalOverlay.tsx b/frontend/src/components/ModalOverlay.tsx
index 497b459..ba1f3d3 100644
--- a/frontend/src/components/ModalOverlay.tsx
+++ b/frontend/src/components/ModalOverlay.tsx
@@ -1,46 +1,66 @@
-import { useEffect, useCallback } from 'react';
+/**
+ * 通用弹窗容器(Radix 内核,接口与旧版完全兼容):
+ * - portal/焦点陷阱/body 滚动锁定/ESC(嵌套弹窗自动分层,修复连锁关闭)
+ * - z-300 档,压过侧栏/顶栏;200ms fade+zoom 动画;点遮罩不关闭(防表单误触)
+ * - 结构:内容直挂(不再需要内层卡片!),面板 flex-col + 内容区单滚动
+ * - 头部(标题+关闭钮)由子组件渲染或用 title prop
+ */
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+const WIDTH_PRESETS: Record<string, string> = {
+  sm: 'sm:max-w-[420px]',
+  md: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+};
 
 interface ModalOverlayProps {
   open: boolean;
   onClose: () => void;
+  /** sm | md | lg | xl 或任意 max-w-* 类 */
   width?: string;
+  /** 可选标题;不传时渲染 sr-only 标题满足可访问性 */
+  title?: string;
+  /** 传 true 时子内容自己管理滚动(默认内容区自动滚动) */
+  noScroll?: boolean;
   className?: string;
   children: React.ReactNode;
 }
 
-/**
- * 通用弹框组件
- * - overlay z-[100]，低于 header/sidebar 的 z-[200]，不遮挡面包屑
- * - 点击遮罩层不关闭
- * - ESC 键关闭
- */
-export function ModalOverlay({ open, onClose, width = 'max-w-lg', className = '', children }: ModalOverlayProps) {
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    if (open) {
-      document.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [open, handleKeyDown]);
-
-  if (!open) return null;
-
+export function ModalOverlay({
+  open,
+  onClose,
+  width = 'md',
+  title,
+  noScroll = false,
+  className = '',
+  children,
+}: ModalOverlayProps) {
+  const widthCls = WIDTH_PRESETS[width] ?? width;
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40">
-      <div
-        className={`bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl shadow-xl w-full ${width} max-h-[85vh] overflow-y-auto p-6 ${className}`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {children}
-      </div>
-    </div>
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) onClose();
+      }}
+    >
+      <DialogContent showCloseButton className={cn(widthCls, 'p-0', className)}>
+        {title ? (
+          <DialogTitle className="px-6 pt-5 pb-3 text-base font-semibold">{title}</DialogTitle>
+        ) : (
+          <DialogTitle className="sr-only">对话框</DialogTitle>
+        )}
+        <div
+          className={cn(
+            'flex min-h-0 flex-col',
+            noScroll ? 'flex-1 overflow-hidden' : 'max-h-[calc(85vh-1rem)] overflow-y-auto px-6 pb-6 scrollbar-thin',
+            !title && 'pt-5',
+          )}
+        >
+          {children}
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index fccd229..11a38b8 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -24,7 +24,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-[100] bg-black/40",
+        "fixed inset-0 z-[300] bg-black/45 backdrop-blur-[2px]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
@@ -52,7 +52,7 @@ function DialogContent({
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          "fixed z-[101] top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2",
+          "fixed z-[301] top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2",
           "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
           "rounded-xl shadow-2xl p-6",
           "max-h-[85vh] flex flex-col",
@@ -65,7 +65,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="absolute top-3.5 right-3.5 rounded-md p-1 text-[var(--dg-text-muted)] opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
+            className="absolute top-3.5 right-3.5 rounded-md p-1 text-[var(--dg-text-muted)] transition-colors hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dg-blue)]"
           >
             <XIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
@@ -84,7 +84,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div data-slot="dialog-footer" className={cn("flex justify-end gap-2 pt-2", className)} {...props} />
+    <div data-slot="dialog-footer" className={cn("flex justify-end gap-2 pt-4", className)} {...props} />
   )
 }
 
diff --git a/frontend/src/features/datasource/components/CreateInstanceForm.tsx b/frontend/src/features/datasource/components/CreateInstanceForm.tsx
index 535d7cd..add901f 100644
--- a/frontend/src/features/datasource/components/CreateInstanceForm.tsx
+++ b/frontend/src/features/datasource/components/CreateInstanceForm.tsx
@@ -5,8 +5,17 @@
  */
 import { useState, useCallback } from 'react';
 import {
-  Database, Server, Zap, Activity, AlertTriangle, CheckCircle, XCircle,
-  ChevronRight, Eye, EyeOff, Loader2,
+  Database,
+  Server,
+  Zap,
+  Activity,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Loader2,
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { ModalOverlay } from '@/components/ModalOverlay';
@@ -16,9 +25,22 @@ import { MySQLIcon, PostgreSQLIcon, RedisIcon, MongoDBIcon } from './DbTypeIcons
 
 /** 预置脱敏字段集合(高级配置一键填入用) */
 const PRESET_MASK_FIELDS = [
-  'mobile', 'concat_mobile', 'email_alias', 'email', 'password',
-  'ga_key', 'private_key', 'secret', 'secret_key', 'key_snow',
-  'telephone', 'username', 'real_name', 'token', 'two_factor_secret', 'content',
+  'mobile',
+  'concat_mobile',
+  'email_alias',
+  'email',
+  'password',
+  'ga_key',
+  'private_key',
+  'secret',
+  'secret_key',
+  'key_snow',
+  'telephone',
+  'username',
+  'real_name',
+  'token',
+  'two_factor_secret',
+  'content',
 ];
 
 /** 创建向导的四个步骤(静态序列) */
@@ -60,7 +82,12 @@ export function CreateInstanceForm({ defaultType, onCancel, onCreated }: CreateI
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
   const [testing, setTesting] = useState(false);
-  const [testResult, setTestResult] = useState<{ success: boolean; message: string; version?: string; cluster_mode?: boolean } | null>(null);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+    version?: string;
+    cluster_mode?: boolean;
+  } | null>(null);
   const isRedis = dbType === 'redis';
   const needUsername = !isRedis; // Redis username is optional (6.0+ ACL)
   const needDatabase = !isRedis;
@@ -71,28 +98,59 @@ export function CreateInstanceForm({ defaultType, onCancel, onCreated }: CreateI
     setDbType(t);
     setPort(String(DB_DEFAULT_PORTS[t] || 3306));
     setTestResult(null);
-    if (t === 'redis') { setDatabase(''); } else { setRedisClusterMode(false); }
+    if (t === 'redis') {
+      setDatabase('');
+    } else {
+      setRedisClusterMode(false);
+    }
   }, []);
 
   const handleSubmit = useCallback(async () => {
-    if (!name) { setError('请填写名称'); return; }
-    if (!host || !port) { setError('请填写地址和端口'); return; }
-    if (needUsername && !username) { setError('请填写用户名'); return; }
-    setSubmitting(true); setError('');
+    if (!name) {
+      setError('请填写名称');
+      return;
+    }
+    if (!host || !port) {
+      setError('请填写地址和端口');
+      return;
+    }
+    if (needUsername && !username) {
+      setError('请填写用户名');
+      return;
+    }
+    setSubmitting(true);
+    setError('');
     try {
       await instanceApi.create({
-        name, db_type: dbType, host, port: Number(port),
-        username: isRedis ? (username || undefined) : (username || 'default'),
+        name,
+        db_type: dbType,
+        host,
+        port: Number(port),
+        username: isRedis ? username || undefined : username || 'default',
         password: password || 'default',
         database: database || undefined,
         cluster_mode: isRedis ? redisClusterMode : undefined,
         env: (finalEnv || 'development') as string,
         access_mode: accessMode,
-        excluded_databases: excludedDbs ? excludedDbs.split(',').map(s => s.trim()).filter(Boolean) : undefined,
-        mask_fields: maskFields ? maskFields.split('\n').filter(Boolean).map(line => {
-          const parts = line.split(':');
-          return { table: parts[0]?.trim() || '', field: parts[1]?.trim() || parts[0]?.trim() || '', rule: parts[2]?.trim() || 'mask' };
-        }) : undefined,
+        excluded_databases: excludedDbs
+          ? excludedDbs
+              .split(',')
+              .map((s) => s.trim())
+              .filter(Boolean)
+          : undefined,
+        mask_fields: maskFields
+          ? maskFields
+              .split('\n')
+              .filter(Boolean)
+              .map((line) => {
+                const parts = line.split(':');
+                return {
+                  table: parts[0]?.trim() || '',
+                  field: parts[1]?.trim() || parts[0]?.trim() || '',
+                  rule: parts[2]?.trim() || 'mask',
+                };
+              })
+          : undefined,
       });
       onCreated();
     } catch (e: unknown) {
@@ -101,20 +159,48 @@ export function CreateInstanceForm({ defaultType, onCancel, onCreated }: CreateI
     } finally {
       setSubmitting(false);
     }
-  }, [name, host, port, dbType, username, password, database, redisClusterMode, finalEnv, accessMode, excludedDbs, maskFields, needUsername, isRedis, onCreated]);
+  }, [
+    name,
+    host,
+    port,
+    dbType,
+    username,
+    password,
+    database,
+    redisClusterMode,
+    finalEnv,
+    accessMode,
+    excludedDbs,
+    maskFields,
+    needUsername,
+    isRedis,
+    onCreated,
+  ]);
 
   const handleTestConnection = useCallback(async () => {
-    if (!host || !port) { setError('请填写地址和端口'); return; }
-    if (needUsername && !username) { setError('请填写用户名'); return; }
-    setTesting(true); setError(''); setTestResult(null);
+    if (!host || !port) {
+      setError('请填写地址和端口');
+      return;
+    }
+    if (needUsername && !username) {
+      setError('请填写用户名');
+      return;
+    }
+    setTesting(true);
+    setError('');
+    setTestResult(null);
     try {
       const res = await instanceApi.testNewConnection({
-        name: name || '__test__', db_type: dbType, host, port: Number(port),
-        username: isRedis ? (username || undefined) : (username || 'default'),
+        name: name || '__test__',
+        db_type: dbType,
+        host,
+        port: Number(port),
+        username: isRedis ? username || undefined : username || 'default',
         password: password || 'default',
         database: database || undefined,
         cluster_mode: isRedis ? redisClusterMode : undefined,
-        env: (finalEnv || 'development') as string, access_mode: accessMode,
+        env: (finalEnv || 'development') as string,
+        access_mode: accessMode,
       });
       const result = res as { success: boolean; message: string; version?: string; cluster_mode?: boolean };
       if (isRedis && result.success) {
@@ -127,426 +213,538 @@ export function CreateInstanceForm({ defaultType, onCancel, onCreated }: CreateI
     } finally {
       setTesting(false);
     }
-  }, [host, port, dbType, username, password, database, redisClusterMode, finalEnv, accessMode, needUsername, name, isRedis]);
+  }, [
+    host,
+    port,
+    dbType,
+    username,
+    password,
+    database,
+    redisClusterMode,
+    finalEnv,
+    accessMode,
+    needUsername,
+    name,
+    isRedis,
+  ]);
 
-  const validateStep = useCallback((step: number): boolean => {
-    setError('');
-    if (step === 1) {
-      if (!name) { setError('请填写实例名称'); return false; }
-    }
-    if (step === 2) {
-      if (!host || !port) { setError('请填写地址和端口'); return false; }
-      if (needUsername && !username) { setError('请填写用户名'); return false; }
-    }
-    return true;
-  }, [name, host, port, needUsername, username]);
+  const validateStep = useCallback(
+    (step: number): boolean => {
+      setError('');
+      if (step === 1) {
+        if (!name) {
+          setError('请填写实例名称');
+          return false;
+        }
+      }
+      if (step === 2) {
+        if (!host || !port) {
+          setError('请填写地址和端口');
+          return false;
+        }
+        if (needUsername && !username) {
+          setError('请填写用户名');
+          return false;
+        }
+      }
+      return true;
+    },
+    [name, host, port, needUsername, username],
+  );
 
   const goNext = useCallback(() => {
     if (validateStep(currentStep)) {
-      setCurrentStep(s => Math.min(s + 1, formSteps.length - 1));
+      setCurrentStep((s) => Math.min(s + 1, formSteps.length - 1));
     }
   }, [currentStep, validateStep]);
 
   const goPrev = useCallback(() => {
     setError('');
-    setCurrentStep(s => Math.max(s - 1, 0));
+    setCurrentStep((s) => Math.max(s - 1, 0));
   }, []);
 
-  const inputCls = 'w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
+  const inputCls =
+    'w-full px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
   const labelCls = 'block text-sm font-medium mb-1.5';
 
   return (
     <>
-    <ModalOverlay open={true} onClose={onCancel} width="max-w-2xl">
-      <div
-        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-h-[90vh] overflow-y-auto"
-      >
-        {/* Header */}
-        <div className="sticky top-0 z-10 flex items-center justify-between px-6 py-4 bg-[var(--dg-bg-secondary)] border-b border-[var(--dg-border)]">
-          <div>
-            <h2 className="text-lg font-semibold">添加数据源</h2>
-            <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">步骤 {currentStep + 1} / {formSteps.length}: {formSteps[currentStep].label}</p>
+      <ModalOverlay open={true} onClose={onCancel} width="lg">
+        <div className="w-full">
+          {/* Header */}
+          <div className="sticky top-0 z-10 flex items-center justify-between px-6 py-4 bg-[var(--dg-bg-secondary)] border-b border-[var(--dg-border)]">
+            <div>
+              <h2 className="text-lg font-semibold">添加数据源</h2>
+              <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">
+                步骤 {currentStep + 1} / {formSteps.length}: {formSteps[currentStep].label}
+              </p>
+            </div>
+            <button
+              onClick={onCancel}
+              className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"
+            >
+              <XCircle className="w-5 h-5" />
+            </button>
           </div>
-          <button onClick={onCancel} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">
-            <XCircle className="w-5 h-5" />
-          </button>
-        </div>
 
-        {/* Step Indicator */}
-        <div className="px-6 pt-4">
-          <div className="flex items-center gap-2">
-            {formSteps.map((step, idx) => (
-              <div key={step.label} className="flex items-center gap-2 flex-1">
-                <button
-                  onClick={() => { if (idx < currentStep) setCurrentStep(idx); }}
-                  className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-all flex-1 justify-center ${
-                    idx === currentStep ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' :
-                    idx < currentStep ? 'bg-green-500/10 text-green-400 border border-green-500/20 cursor-pointer' :
-                    'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] border border-[var(--dg-border)]'
-                  }`}
-                >
-                  <step.icon className="w-3.5 h-3.5" />
-                  {step.label}
-                </button>
-                {idx < formSteps.length - 1 && (
-                  <ChevronRight className={`w-3 h-3 flex-shrink-0 ${idx < currentStep ? 'text-green-400' : 'text-[var(--dg-text-muted)]'}`} />
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="p-6 space-y-4">
-          {/* Step 0: Type Selection */}
-          {currentStep === 0 && (
-            <Card className="dg-card">
-              <CardContent className="p-5 space-y-4">
-                <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">选择数据源类型</h3>
-                <div className="grid grid-cols-4 gap-3">
-                  {[
-                    { value: 'mysql', label: 'MySQL', Icon: MySQLIcon },
-                    { value: 'postgres', label: 'PostgreSQL', Icon: PostgreSQLIcon },
-                    { value: 'redis', label: 'Redis', Icon: RedisIcon },
-                    { value: 'mongo', label: 'MongoDB', Icon: MongoDBIcon },
-                  ].map(t => (
-                    <button
-                      key={t.value}
-                      type="button"
-                      onClick={() => handleTypeChange(t.value)}
-                      className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
-                        dbType === t.value ? 'border-blue-500 bg-blue-500/5' : 'border-[var(--dg-border)] hover:border-[var(--dg-text-muted)]'
-                      }`}
-                    >
-                      <t.Icon className="w-10 h-10 object-contain" />
-                      <span className="text-xs font-medium">{t.label}</span>
-                    </button>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Step 1: Basic Info */}
-          {currentStep === 1 && (
-            <Card className="dg-card">
-              <CardContent className="p-5 space-y-4">
-                <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">基本信息</h3>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className={labelCls}>名称 <span className="text-red-400">*</span></label>
-                    <input
-                      value={name}
-                      onChange={e => { setName(e.target.value); setTestResult(null); }}
-                      className={inputCls}
-                      placeholder="例如：prod-mysql-只读库"
+          {/* Step Indicator */}
+          <div className="px-6 pt-4">
+            <div className="flex items-center gap-2">
+              {formSteps.map((step, idx) => (
+                <div key={step.label} className="flex items-center gap-2 flex-1">
+                  <button
+                    onClick={() => {
+                      if (idx < currentStep) setCurrentStep(idx);
+                    }}
+                    className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium transition-all flex-1 justify-center ${
+                      idx === currentStep
+                        ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30'
+                        : idx < currentStep
+                          ? 'bg-green-500/10 text-green-400 border border-green-500/20 cursor-pointer'
+                          : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] border border-[var(--dg-border)]'
+                    }`}
+                  >
+                    <step.icon className="w-3.5 h-3.5" />
+                    {step.label}
+                  </button>
+                  {idx < formSteps.length - 1 && (
+                    <ChevronRight
+                      className={`w-3 h-3 flex-shrink-0 ${idx < currentStep ? 'text-green-400' : 'text-[var(--dg-text-muted)]'}`}
                     />
-                  </div>
-                  <div>
-                    <label className={labelCls}>环境 <span className="text-red-400">*</span></label>
-                    <div className="relative">
-                      <select
-                        value={env}
-                        onChange={e => setEnv(e.target.value)}
-                        className={inputCls + (env === '__custom__' ? ' mb-2' : '')}
-                      >
-                        <option value="development">开发</option>
-                        <option value="staging">预发</option>
-                        <option value="production">生产</option>
-                        <option value="test">测试</option>
-                        <option value="uat">UAT</option>
-                        <option value="__custom__">自定义...</option>
-                      </select>
-                      {env === '__custom__' && (
-                        <input
-                          autoFocus
-                          value={customEnv}
-                          onChange={e => setCustomEnv(e.target.value)}
-                          className={inputCls}
-                          placeholder="输入自定义环境名"
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-                {isRedis && (
-                  <div className="p-3 rounded-lg bg-blue-500/5 border border-blue-500/20">
-                    <p className="text-xs text-blue-400 flex items-center gap-1.5">
-                      <AlertTriangle className="w-3.5 h-3.5" />
-                      Redis 6.0+ ACL 支持用户名+密码认证；传统模式仅填密码即可
-                    </p>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Step 2: Connection Info */}
-          {currentStep === 2 && (
-            <Card className="dg-card">
-              <CardContent className="p-5 space-y-4">
-                <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">连接信息</h3>
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <label className={labelCls}>地址 <span className="text-red-400">*</span></label>
-                    <input
-                      value={host}
-                      onChange={e => { setHost(e.target.value); setTestResult(null); }}
-                      className={inputCls}
-                      placeholder="例如：mysql.example.com"
-                    />
-                  </div>
-                  <div>
-                    <label className={labelCls}>端口 <span className="text-red-400">*</span></label>
-                    <input
-                      value={port}
-                      onChange={e => { setPort(e.target.value); setTestResult(null); }}
-                      className={inputCls}
-                      placeholder={String(DB_DEFAULT_PORTS[dbType] || 3306)}
-                    />
-                  </div>
-                  <div>
-                    <label className={labelCls}>
-                      用户名 {isRedis ? <span className="text-[var(--dg-text-muted)]">（可选）</span> : <span className="text-red-400">*</span>}
-                    </label>
-                    <input
-                      value={username}
-                      onChange={e => { setUsername(e.target.value); setTestResult(null); }}
-                      className={inputCls}
-                      placeholder={isRedis ? 'ACL 用户名，留空则仅密码认证' : 'root'}
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className={labelCls}>{isRedis ? '密码' : '密码'} <span className={isRedis ? 'text-[var(--dg-text-muted)]' : 'text-red-400'}>{isRedis ? '' : '*'}</span></label>
-                    <div className="relative">
-                      <input
-                        type={showPwd ? 'text' : 'password'}
-                        value={password}
-                        onChange={e => { setPassword(e.target.value); setTestResult(null); }}
-                        className={inputCls + ' pr-10'}
-                        placeholder={isRedis ? '可选，Redis 无密码可留空' : '数据库密码'}
-                      />
-                      <button
-                        type="button"
-                        onClick={() => setShowPwd(!showPwd)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"
-                      >
-                        {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                      </button>
-                    </div>
-                  </div>
-                  {needDatabase ? (
-                    <div>
-                      <label className={labelCls}>默认数据库</label>
-                      <input
-                        value={database}
-                        onChange={e => { setDatabase(e.target.value); setTestResult(null); }}
-                        className={inputCls}
-                        placeholder="可选，留空则连接默认库"
-                      />
-                    </div>
-                  ) : (
-                    <div>
-                      <label className={labelCls}>数据库编号</label>
-                      <input
-                        value={redisDb}
-                        onChange={e => setRedisDb(e.target.value)}
-                        className={inputCls}
-                        placeholder="默认 0"
-                      />
-                    </div>
                   )}
                 </div>
-                {isRedis && (
-                  <div>
-                    <label className={labelCls}>Redis 部署模式</label>
-                    <div className="grid grid-cols-2 gap-3">
-                      {[
-                        { value: false, label: '单节点', desc: '普通 Redis 或哨兵入口，查询只访问当前实例' },
-                        { value: true, label: '集群', desc: 'Redis Cluster，按 slot 路由并扫描所有 master' },
-                      ].map(mode => (
+              ))}
+            </div>
+          </div>
+
+          <div className="p-6 space-y-4">
+            {/* Step 0: Type Selection */}
+            {currentStep === 0 && (
+              <Card className="dg-card">
+                <CardContent className="p-5 space-y-4">
+                  <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">选择数据源类型</h3>
+                  <div className="grid grid-cols-4 gap-3">
+                    {[
+                      { value: 'mysql', label: 'MySQL', Icon: MySQLIcon },
+                      { value: 'postgres', label: 'PostgreSQL', Icon: PostgreSQLIcon },
+                      { value: 'redis', label: 'Redis', Icon: RedisIcon },
+                      { value: 'mongo', label: 'MongoDB', Icon: MongoDBIcon },
+                    ].map((t) => (
+                      <button
+                        key={t.value}
+                        type="button"
+                        onClick={() => handleTypeChange(t.value)}
+                        className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
+                          dbType === t.value
+                            ? 'border-blue-500 bg-blue-500/5'
+                            : 'border-[var(--dg-border)] hover:border-[var(--dg-text-muted)]'
+                        }`}
+                      >
+                        <t.Icon className="w-10 h-10 object-contain" />
+                        <span className="text-xs font-medium">{t.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Step 1: Basic Info */}
+            {currentStep === 1 && (
+              <Card className="dg-card">
+                <CardContent className="p-5 space-y-4">
+                  <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">基本信息</h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className={labelCls}>
+                        名称 <span className="text-red-400">*</span>
+                      </label>
+                      <input
+                        value={name}
+                        onChange={(e) => {
+                          setName(e.target.value);
+                          setTestResult(null);
+                        }}
+                        className={inputCls}
+                        placeholder="例如：prod-mysql-只读库"
+                      />
+                    </div>
+                    <div>
+                      <label className={labelCls}>
+                        环境 <span className="text-red-400">*</span>
+                      </label>
+                      <div className="relative">
+                        <select
+                          value={env}
+                          onChange={(e) => setEnv(e.target.value)}
+                          className={inputCls + (env === '__custom__' ? ' mb-2' : '')}
+                        >
+                          <option value="development">开发</option>
+                          <option value="staging">预发</option>
+                          <option value="production">生产</option>
+                          <option value="test">测试</option>
+                          <option value="uat">UAT</option>
+                          <option value="__custom__">自定义...</option>
+                        </select>
+                        {env === '__custom__' && (
+                          <input
+                            autoFocus
+                            value={customEnv}
+                            onChange={(e) => setCustomEnv(e.target.value)}
+                            className={inputCls}
+                            placeholder="输入自定义环境名"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  {isRedis && (
+                    <div className="p-3 rounded-lg bg-blue-500/5 border border-blue-500/20">
+                      <p className="text-xs text-blue-400 flex items-center gap-1.5">
+                        <AlertTriangle className="w-3.5 h-3.5" />
+                        Redis 6.0+ ACL 支持用户名+密码认证；传统模式仅填密码即可
+                      </p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Step 2: Connection Info */}
+            {currentStep === 2 && (
+              <Card className="dg-card">
+                <CardContent className="p-5 space-y-4">
+                  <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">连接信息</h3>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div>
+                      <label className={labelCls}>
+                        地址 <span className="text-red-400">*</span>
+                      </label>
+                      <input
+                        value={host}
+                        onChange={(e) => {
+                          setHost(e.target.value);
+                          setTestResult(null);
+                        }}
+                        className={inputCls}
+                        placeholder="例如：mysql.example.com"
+                      />
+                    </div>
+                    <div>
+                      <label className={labelCls}>
+                        端口 <span className="text-red-400">*</span>
+                      </label>
+                      <input
+                        value={port}
+                        onChange={(e) => {
+                          setPort(e.target.value);
+                          setTestResult(null);
+                        }}
+                        className={inputCls}
+                        placeholder={String(DB_DEFAULT_PORTS[dbType] || 3306)}
+                      />
+                    </div>
+                    <div>
+                      <label className={labelCls}>
+                        用户名{' '}
+                        {isRedis ? (
+                          <span className="text-[var(--dg-text-muted)]">（可选）</span>
+                        ) : (
+                          <span className="text-red-400">*</span>
+                        )}
+                      </label>
+                      <input
+                        value={username}
+                        onChange={(e) => {
+                          setUsername(e.target.value);
+                          setTestResult(null);
+                        }}
+                        className={inputCls}
+                        placeholder={isRedis ? 'ACL 用户名，留空则仅密码认证' : 'root'}
+                      />
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className={labelCls}>
+                        {isRedis ? '密码' : '密码'}{' '}
+                        <span className={isRedis ? 'text-[var(--dg-text-muted)]' : 'text-red-400'}>
+                          {isRedis ? '' : '*'}
+                        </span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          type={showPwd ? 'text' : 'password'}
+                          value={password}
+                          onChange={(e) => {
+                            setPassword(e.target.value);
+                            setTestResult(null);
+                          }}
+                          className={inputCls + ' pr-10'}
+                          placeholder={isRedis ? '可选，Redis 无密码可留空' : '数据库密码'}
+                        />
                         <button
-                          key={mode.label}
                           type="button"
-                          onClick={() => { setRedisClusterMode(mode.value); setTestResult(null); }}
-                          className={`text-left p-3 rounded-lg border transition-colors ${
-                            redisClusterMode === mode.value
-                              ? 'bg-blue-500/10 border-blue-500/40 text-blue-400'
-                              : 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'
+                          onClick={() => setShowPwd(!showPwd)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"
+                        >
+                          {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                        </button>
+                      </div>
+                    </div>
+                    {needDatabase ? (
+                      <div>
+                        <label className={labelCls}>默认数据库</label>
+                        <input
+                          value={database}
+                          onChange={(e) => {
+                            setDatabase(e.target.value);
+                            setTestResult(null);
+                          }}
+                          className={inputCls}
+                          placeholder="可选，留空则连接默认库"
+                        />
+                      </div>
+                    ) : (
+                      <div>
+                        <label className={labelCls}>数据库编号</label>
+                        <input
+                          value={redisDb}
+                          onChange={(e) => setRedisDb(e.target.value)}
+                          className={inputCls}
+                          placeholder="默认 0"
+                        />
+                      </div>
+                    )}
+                  </div>
+                  {isRedis && (
+                    <div>
+                      <label className={labelCls}>Redis 部署模式</label>
+                      <div className="grid grid-cols-2 gap-3">
+                        {[
+                          { value: false, label: '单节点', desc: '普通 Redis 或哨兵入口，查询只访问当前实例' },
+                          { value: true, label: '集群', desc: 'Redis Cluster，按 slot 路由并扫描所有 master' },
+                        ].map((mode) => (
+                          <button
+                            key={mode.label}
+                            type="button"
+                            onClick={() => {
+                              setRedisClusterMode(mode.value);
+                              setTestResult(null);
+                            }}
+                            className={`text-left p-3 rounded-lg border transition-colors ${
+                              redisClusterMode === mode.value
+                                ? 'bg-blue-500/10 border-blue-500/40 text-blue-400'
+                                : 'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'
+                            }`}
+                          >
+                            <div className="text-sm font-medium">{mode.label}</div>
+                            <div className="text-xs text-[var(--dg-text-muted)] mt-1">{mode.desc}</div>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  {/* Connection Mode */}
+                  <div>
+                    <label className={labelCls}>连接模式</label>
+                    <div className="flex gap-3">
+                      {[
+                        { value: 'readwrite' as const, label: '读写' },
+                        { value: 'write' as const, label: '写' },
+                        { value: 'read' as const, label: '读' },
+                      ].map((m) => (
+                        <button
+                          key={m.value}
+                          type="button"
+                          onClick={() => setAccessMode(m.value)}
+                          className={`px-5 py-2 rounded-lg text-sm font-medium transition-all ${
+                            accessMode === m.value
+                              ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30'
+                              : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'
                           }`}
                         >
-                          <div className="text-sm font-medium">{mode.label}</div>
-                          <div className="text-xs text-[var(--dg-text-muted)] mt-1">{mode.desc}</div>
+                          {m.label}
                         </button>
                       ))}
                     </div>
                   </div>
-                )}
-                {/* Connection Mode */}
-                <div>
-                  <label className={labelCls}>连接模式</label>
-                  <div className="flex gap-3">
-                    {[
-                      { value: 'readwrite' as const, label: '读写' },
-                      { value: 'write' as const, label: '写' },
-                      { value: 'read' as const, label: '读' },
-                    ].map(m => (
-                      <button
-                        key={m.value}
-                        type="button"
-                        onClick={() => setAccessMode(m.value)}
-                        className={`px-5 py-2 rounded-lg text-sm font-medium transition-all ${
-                          accessMode === m.value
-                            ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30'
-                            : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]'
-                        }`}
-                      >
-                        {m.label}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                {/* Test Result */}
-                {testResult && (
-                  <div className={`flex items-center gap-3 p-3 rounded-lg text-sm ${testResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
-                    {testResult.success
-                      ? <><CheckCircle className="w-4 h-4 flex-shrink-0" /> 连接成功{testResult.version ? ` · ${testResult.version}` : ''}{isRedis ? ` · ${testResult.cluster_mode ? '集群' : '单节点'}` : ''}</>
-                      : <><XCircle className="w-4 h-4 flex-shrink-0" /> {testResult.message}</>
-                    }
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Step 3: Advanced Config */}
-          {currentStep === 3 && (
-            <Card className="dg-card">
-              <CardContent className="p-5 space-y-4">
-                <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">高级配置</h3>
-                {!isRedis && (
-                  <div>
-                    <label className={labelCls}>排除的数据库</label>
-                    <input
-                      value={excludedDbs}
-                      onChange={e => setExcludedDbs(e.target.value)}
-                      className={inputCls}
-                      placeholder="以逗号分隔，如：sys, information_schema, mysql"
-                    />
-                  </div>
-                )}
-                <div>
-                  <div className="flex items-center justify-between mb-1.5">
-                    <label className={labelCls}>脱敏字段</label>
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          navigator.clipboard.writeText(PRESET_MASK_FIELDS.join(', ')).then(() => {
-                            const btn = document.getElementById('copy-mask-btn');
-                            if (btn) {
-                              btn.textContent = '已复制';
-                              setTimeout(() => { if (btn) btn.textContent = '复制全部'; }, 1500);
-                            }
-                          });
-                        }}
-                        id="copy-mask-btn"
-                        className="text-xs text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)]"
-                      >
-                        复制全部
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const newFields = PRESET_MASK_FIELDS.map(f => f + ':mask').join('\n');
-                          setMaskFields(maskFields ? maskFields + '\n' + newFields : newFields);
-                        }}
-                        className="text-xs text-blue-400 hover:text-blue-300 transition-colors px-2 py-0.5 rounded bg-blue-500/10"
-                      >
-                        一键填入
-                      </button>
+                  {/* Test Result */}
+                  {testResult && (
+                    <div
+                      className={`flex items-center gap-3 p-3 rounded-lg text-sm ${testResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}
+                    >
+                      {testResult.success ? (
+                        <>
+                          <CheckCircle className="w-4 h-4 flex-shrink-0" /> 连接成功
+                          {testResult.version ? ` · ${testResult.version}` : ''}
+                          {isRedis ? ` · ${testResult.cluster_mode ? '集群' : '单节点'}` : ''}
+                        </>
+                      ) : (
+                        <>
+                          <XCircle className="w-4 h-4 flex-shrink-0" /> {testResult.message}
+                        </>
+                      )}
                     </div>
-                  </div>
-                  <div className="flex flex-wrap gap-1.5 mb-2">
-                    {PRESET_MASK_FIELDS.map(f => {
-                      const isSelected = maskFields.split(/[\n,:]/).some(s => s.trim() === f);
-                      return (
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Step 3: Advanced Config */}
+            {currentStep === 3 && (
+              <Card className="dg-card">
+                <CardContent className="p-5 space-y-4">
+                  <h3 className="text-sm font-semibold text-[var(--dg-text-secondary)]">高级配置</h3>
+                  {!isRedis && (
+                    <div>
+                      <label className={labelCls}>排除的数据库</label>
+                      <input
+                        value={excludedDbs}
+                        onChange={(e) => setExcludedDbs(e.target.value)}
+                        className={inputCls}
+                        placeholder="以逗号分隔，如：sys, information_schema, mysql"
+                      />
+                    </div>
+                  )}
+                  <div>
+                    <div className="flex items-center justify-between mb-1.5">
+                      <label className={labelCls}>脱敏字段</label>
+                      <div className="flex gap-2">
                         <button
-                          key={f}
                           type="button"
                           onClick={() => {
-                            if (isSelected) {
-                              setMaskFields(maskFields.split('\n').filter(line => {
-                                return !line.split(':')[0]?.trim()?.includes(f);
-                              }).join('\n'));
-                            } else {
-                              setMaskFields(maskFields ? maskFields + '\n' + f + ':mask' : f + ':mask');
-                            }
+                            navigator.clipboard.writeText(PRESET_MASK_FIELDS.join(', ')).then(() => {
+                              const btn = document.getElementById('copy-mask-btn');
+                              if (btn) {
+                                btn.textContent = '已复制';
+                                setTimeout(() => {
+                                  if (btn) btn.textContent = '复制全部';
+                                }, 1500);
+                              }
+                            });
                           }}
-                          className={`px-2 py-0.5 rounded text-xs transition-colors ${
-                            isSelected ? 'bg-blue-500/20 text-blue-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] hover:bg-[var(--dg-bg-hover)]'
-                          }`}
+                          id="copy-mask-btn"
+                          className="text-xs text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)]"
                         >
-                          {f}
+                          复制全部
                         </button>
-                      );
-                    })}
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const newFields = PRESET_MASK_FIELDS.map((f) => f + ':mask').join('\n');
+                            setMaskFields(maskFields ? maskFields + '\n' + newFields : newFields);
+                          }}
+                          className="text-xs text-blue-400 hover:text-blue-300 transition-colors px-2 py-0.5 rounded bg-blue-500/10"
+                        >
+                          一键填入
+                        </button>
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap gap-1.5 mb-2">
+                      {PRESET_MASK_FIELDS.map((f) => {
+                        const isSelected = maskFields.split(/[\n,:]/).some((s) => s.trim() === f);
+                        return (
+                          <button
+                            key={f}
+                            type="button"
+                            onClick={() => {
+                              if (isSelected) {
+                                setMaskFields(
+                                  maskFields
+                                    .split('\n')
+                                    .filter((line) => {
+                                      return !line.split(':')[0]?.trim()?.includes(f);
+                                    })
+                                    .join('\n'),
+                                );
+                              } else {
+                                setMaskFields(maskFields ? maskFields + '\n' + f + ':mask' : f + ':mask');
+                              }
+                            }}
+                            className={`px-2 py-0.5 rounded text-xs transition-colors ${
+                              isSelected
+                                ? 'bg-blue-500/20 text-blue-400'
+                                : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] hover:bg-[var(--dg-bg-hover)]'
+                            }`}
+                          >
+                            {f}
+                          </button>
+                        );
+                      })}
+                    </div>
+                    <textarea
+                      value={maskFields}
+                      onChange={(e) => setMaskFields(e.target.value)}
+                      className={inputCls + ' min-h-[80px] resize-y font-mono text-xs'}
+                      placeholder={
+                        '每行一个，格式：字段名:规则\n点击上方标签快速添加\n例如：\nmobile:mask\nemail:mask\npassword:hide'
+                      }
+                    />
                   </div>
-                  <textarea
-                    value={maskFields}
-                    onChange={e => setMaskFields(e.target.value)}
-                    className={inputCls + ' min-h-[80px] resize-y font-mono text-xs'}
-                    placeholder={'每行一个，格式：字段名:规则\n点击上方标签快速添加\n例如：\nmobile:mask\nemail:mask\npassword:hide'}
-                  />
-                </div>
-              </CardContent>
-            </Card>
-          )}
+                </CardContent>
+              </Card>
+            )}
 
-          {error && <div className="text-sm text-red-400 flex items-center gap-2"><AlertTriangle className="w-4 h-4" />{error}</div>}
+            {error && (
+              <div className="text-sm text-red-400 flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4" />
+                {error}
+              </div>
+            )}
 
-          {/* Navigation Buttons */}
-          <div className="flex items-center justify-between pt-2">
-            <button
-              onClick={handleTestConnection}
-              disabled={testing || !host || !port}
-              className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-40 transition-all"
-            >
-              {testing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Zap className="w-4 h-4" />}
-              {testing ? '测试中...' : '测试连接'}
-            </button>
-            <div className="flex gap-3">
-              {currentStep > 0 && (
-                <button onClick={goPrev} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
-                  上一步
-                </button>
-              )}
-              {currentStep < formSteps.length - 1 ? (
-                <button onClick={goNext} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm text-white transition-colors">
-                  下一步
-                </button>
-              ) : (
-                <>
-                  <button onClick={onCancel} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
-                    取消
-                  </button>
+            {/* Navigation Buttons */}
+            <div className="flex items-center justify-between pt-2">
+              <button
+                onClick={handleTestConnection}
+                disabled={testing || !host || !port}
+                className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] disabled:opacity-40 transition-all"
+              >
+                {testing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Zap className="w-4 h-4" />}
+                {testing ? '测试中...' : '测试连接'}
+              </button>
+              <div className="flex gap-3">
+                {currentStep > 0 && (
                   <button
-                    onClick={handleSubmit}
-                    disabled={submitting || !canSubmit}
-                    className={`px-4 py-2 rounded-lg text-sm text-white transition-all ${
-                      canSubmit ? 'bg-blue-600 hover:bg-blue-700' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] cursor-not-allowed'
-                    }`}
+                    onClick={goPrev}
+                    className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors"
                   >
-                    {submitting ? '创建中...' : canSubmit ? '添加数据源' : '请先测试连接'}
+                    上一步
                   </button>
-                </>
-              )}
+                )}
+                {currentStep < formSteps.length - 1 ? (
+                  <button
+                    onClick={goNext}
+                    className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm text-white transition-colors"
+                  >
+                    下一步
+                  </button>
+                ) : (
+                  <>
+                    <button
+                      onClick={onCancel}
+                      className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors"
+                    >
+                      取消
+                    </button>
+                    <button
+                      onClick={handleSubmit}
+                      disabled={submitting || !canSubmit}
+                      className={`px-4 py-2 rounded-lg text-sm text-white transition-all ${
+                        canSubmit
+                          ? 'bg-blue-600 hover:bg-blue-700'
+                          : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] cursor-not-allowed'
+                      }`}
+                    >
+                      {submitting ? '创建中...' : canSubmit ? '添加数据源' : '请先测试连接'}
+                    </button>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </ModalOverlay>
+      </ModalOverlay>
     </>
   );
 }
diff --git a/frontend/src/features/datasource/components/QuickImportDialog.tsx b/frontend/src/features/datasource/components/QuickImportDialog.tsx
index e3e2a62..f241db2 100644
--- a/frontend/src/features/datasource/components/QuickImportDialog.tsx
+++ b/frontend/src/features/datasource/components/QuickImportDialog.tsx
@@ -4,7 +4,7 @@
  * 已知限制:CSV 解析为简单逗号切分,不支持引号转义/换行字段;部分失败时不自动关闭弹窗。
  */
 import { useState, useMemo, useCallback } from 'react';
-import { X, Loader2 } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 import { ModalOverlay } from '@/components/ModalOverlay';
 import { instanceApi } from '@/api/instance';
 import { DB_DEFAULT_PORTS } from '../utils';
@@ -32,12 +32,15 @@ prod-mongo,mongo,10.0.0.13,27017,root,secret,admin,production,readwrite,false`;
 
 /** 解析 CSV 文本为导入行;首行若以 name, 开头则视为表头跳过 */
 function parseQuickImport(text: string): ImportRow[] {
-  const lines = text.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+  const lines = text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
   if (lines.length === 0) return [];
   const hasHeader = lines[0].toLowerCase().startsWith('name,');
   const dataLines = hasHeader ? lines.slice(1) : lines;
-  return dataLines.map(line => {
-    const parts = line.split(',').map(item => item.trim());
+  return dataLines.map((line) => {
+    const parts = line.split(',').map((item) => item.trim());
     const [name, dbType, host, port, username, password, database, env, accessMode, clusterMode] = parts;
     return {
       name,
@@ -64,7 +67,7 @@ export function QuickImportDialog({ onClose, onImported }: QuickImportDialogProp
   const [submitting, setSubmitting] = useState(false);
   const [result, setResult] = useState<{ success: number; failed: string[] } | null>(null);
   const rows = useMemo(() => parseQuickImport(text), [text]);
-  const validRows = rows.filter(row => row.name && row.db_type && row.host && row.port);
+  const validRows = rows.filter((row) => row.name && row.db_type && row.host && row.port);
 
   const handleImport = useCallback(async () => {
     setSubmitting(true);
@@ -74,7 +77,7 @@ export function QuickImportDialog({ onClose, onImported }: QuickImportDialogProp
       try {
         await instanceApi.create({
           ...row,
-          username: row.db_type === 'redis' ? row.username : (row.username || 'default'),
+          username: row.db_type === 'redis' ? row.username : row.username || 'default',
           password: row.password || '',
           cluster_mode: row.db_type === 'redis' ? row.cluster_mode : undefined,
         });
@@ -90,21 +93,20 @@ export function QuickImportDialog({ onClose, onImported }: QuickImportDialogProp
   }, [validRows, onImported]);
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-4xl">
-      <div className="bg-[var(--dg-bg-secondary)] rounded-lg shadow-2xl w-full max-h-[90vh] overflow-y-auto">
+    <ModalOverlay open={true} onClose={onClose} width="xl">
+      <div className="w-full">
         <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--dg-border)]">
           <div>
             <h2 className="text-base font-semibold">快速导入数据源</h2>
-            <p className="text-xs text-[var(--dg-text-muted)] mt-1">支持 MySQL、PostgreSQL、Redis、MongoDB。每行一个实例，逗号分隔。</p>
+            <p className="text-xs text-[var(--dg-text-muted)] mt-1">
+              支持 MySQL、PostgreSQL、Redis、MongoDB。每行一个实例，逗号分隔。
+            </p>
           </div>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]">
-            <X className="w-4 h-4" />
-          </button>
         </div>
         <div className="p-6 space-y-4">
           <textarea
             value={text}
-            onChange={e => setText(e.target.value)}
+            onChange={(e) => setText(e.target.value)}
             className="w-full min-h-[220px] px-4 py-3 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-xs font-mono focus:border-blue-400 focus:outline-none resize-y"
           />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -122,26 +124,31 @@ export function QuickImportDialog({ onClose, onImported }: QuickImportDialogProp
                 共解析 {rows.length} 行，可导入 {validRows.length} 行。
               </div>
               <div className="mt-2 max-h-24 overflow-y-auto space-y-1">
-                {validRows.slice(0, 5).map(row => (
+                {validRows.slice(0, 5).map((row) => (
                   <div key={`${row.name}-${row.host}`} className="text-xs">
-                    {row.name} · {row.db_type} · {row.host}:{row.port}{row.db_type === 'redis' && row.cluster_mode ? ' · 集群' : ''}
+                    {row.name} · {row.db_type} · {row.host}:{row.port}
+                    {row.db_type === 'redis' && row.cluster_mode ? ' · 集群' : ''}
                   </div>
                 ))}
               </div>
             </div>
           </div>
           {result && (
-            <div className={`p-3 rounded-lg text-sm ${result.failed.length === 0 ? 'bg-green-500/10 text-green-400' : 'bg-yellow-500/10 text-yellow-400'}`}>
+            <div
+              className={`p-3 rounded-lg text-sm ${result.failed.length === 0 ? 'bg-green-500/10 text-green-400' : 'bg-yellow-500/10 text-yellow-400'}`}
+            >
               成功 {result.success} 个，失败 {result.failed.length} 个
               {result.failed.length > 0 && (
                 <div className="mt-2 text-xs space-y-1">
-                  {result.failed.map(item => <div key={item}>{item}</div>)}
+                  {result.failed.map((item) => (
+                    <div key={item}>{item}</div>
+                  ))}
                 </div>
               )}
             </div>
           )}
           <div className="flex justify-end gap-3">
-            <button onClick={onClose} className="px-4 py-2 text-sm bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg hover:bg-[var(--dg-bg-hover)]">
+            <button onClick={onClose} className="dg-btn dg-btn-secondary dg-btn-sm">
               取消
             </button>
             <button
diff --git a/frontend/src/features/governance/workflow/components/WorkflowEditorModal.tsx b/frontend/src/features/governance/workflow/components/WorkflowEditorModal.tsx
index ba615f5..745150a 100644
--- a/frontend/src/features/governance/workflow/components/WorkflowEditorModal.tsx
+++ b/frontend/src/features/governance/workflow/components/WorkflowEditorModal.tsx
@@ -3,10 +3,7 @@
 /*  包含步骤草稿编辑、审批人按角色筛选(getEligibleUsers)与提交校验      */
 /* ------------------------------------------------------------------ */
 import { useState, useEffect, useRef } from 'react';
-import {
-  Plus, X, Shield, Trash2, ArrowUp, ArrowDown,
-  Loader2,
-} from 'lucide-react';
+import { Plus, Shield, Trash2, ArrowUp, ArrowDown, Loader2 } from 'lucide-react';
 import { workflowApi } from '@/api/workflow';
 import { ModalOverlay } from '@/components/ModalOverlay';
 import { STEP_TYPES, STEP_TYPE_COLORS, STEP_TYPE_ICONS } from '../constants';
@@ -41,11 +38,23 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
         workflow.steps.map((s) => ({
           key: nextKey(),
           name: s.name,
-          step_type: (s.step_type === 'serial' || s.step_type === 'parallel' || s.step_type === 'any_one')
-            ? 'audit' as const
-            : s.step_type as 'submit' | 'audit' | 'execute',
-          approver_ids: Array.isArray(s.approver_ids) ? s.approver_ids : (s.approver_ids ? ((): number[] => { try { const p = JSON.parse(s.approver_ids as string); return Array.isArray(p) ? p : []; } catch { return []; } })() : []),
-        }))
+          step_type:
+            s.step_type === 'serial' || s.step_type === 'parallel' || s.step_type === 'any_one'
+              ? ('audit' as const)
+              : (s.step_type as 'submit' | 'audit' | 'execute'),
+          approver_ids: Array.isArray(s.approver_ids)
+            ? s.approver_ids
+            : s.approver_ids
+              ? ((): number[] => {
+                  try {
+                    const p = JSON.parse(s.approver_ids as string);
+                    return Array.isArray(p) ? p : [];
+                  } catch {
+                    return [];
+                  }
+                })()
+              : [],
+        })),
       );
     } else {
       // 新建默认:提交→执行
@@ -86,9 +95,10 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
   };
 
   const getEligibleUsers = (stepType: string) => {
-    const active = users.filter(u => u.is_active);
-    if (stepType === 'audit') return active.filter(u => ['admin', 'superadmin', 'dba', 'developer', 'auditor'].includes(u.role));
-    if (stepType === 'execute') return active.filter(u => ['admin', 'superadmin', 'dba'].includes(u.role));
+    const active = users.filter((u) => u.is_active);
+    if (stepType === 'audit')
+      return active.filter((u) => ['admin', 'superadmin', 'dba', 'developer', 'auditor'].includes(u.role));
+    if (stepType === 'execute') return active.filter((u) => ['admin', 'superadmin', 'dba'].includes(u.role));
     return active;
   };
 
@@ -104,8 +114,14 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
   };
 
   const handleSubmit = async () => {
-    if (!name.trim()) { setError('请输入流程名称'); return; }
-    if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
+    if (!name.trim()) {
+      setError('请输入流程名称');
+      return;
+    }
+    if (steps.length === 0) {
+      setError('请至少添加一个步骤');
+      return;
+    }
     // 验证非 submit 步骤至少有一个人员
     for (let i = 0; i < steps.length; i++) {
       if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
@@ -147,22 +163,18 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
 
   const getUserName = (uid: number) => {
     const u = users.find((u) => u.id === uid);
-    return u ? (u.display_name || u.username) : `#${uid}`;
+    return u ? u.display_name || u.username : `#${uid}`;
   };
 
-  const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
+  const inputCls =
+    'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-2xl">
-      <div
-        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-h-[90vh] overflow-y-auto"
-      >
+    <ModalOverlay open={true} onClose={onClose} width="lg">
+      <div className="w-full">
         {/* Header */}
         <div className="flex items-center justify-between px-4 sm:px-5 py-4">
           <h2 className="text-base font-semibold">{isEdit ? '编辑审批流程' : '新建审批流程'}</h2>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors">
-            <X className="w-4 h-4" />
-          </button>
         </div>
 
         {/* Body */}
@@ -171,12 +183,22 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
 
           <div>
             <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">流程名称 *</label>
-            <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="输入流程名称" />
+            <input
+              className={inputCls}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="输入流程名称"
+            />
           </div>
 
           <div>
             <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">描述</label>
-            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="可选" />
+            <input
+              className={inputCls}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="可选"
+            />
           </div>
 
           {/* Steps */}
@@ -203,10 +225,15 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
                 const colorCls = STEP_TYPE_COLORS[step.step_type];
                 const Icon = STEP_TYPE_ICONS[step.step_type] || Shield;
                 return (
-                  <div key={step.key} className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
+                  <div
+                    key={step.key}
+                    className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]"
+                  >
                     {/* Step header */}
                     <div className="flex items-center gap-2 mb-2 flex-wrap sm:flex-nowrap">
-                      <div className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}>
+                      <div
+                        className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}
+                      >
                         <Icon className={`w-3.5 h-3.5 ${colorCls.split(' ')[1]}`} />
                       </div>
                       <input
@@ -215,9 +242,7 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
                         onChange={(e) => updateStep(idx, { name: e.target.value })}
                         placeholder="步骤名称"
                       />
-                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
-                        {typeConf.label}
-                      </span>
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>{typeConf.label}</span>
                       <div className="flex items-center gap-0.5 sm:ml-1">
                         <button
                           onClick={() => moveStep(idx, -1)}
@@ -265,16 +290,17 @@ export function WorkflowEditorModal({ workflow, users, onClose, onSaved }: Edito
             </div>
 
             {steps.length === 0 && (
-              <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
-                请点击上方按钮添加流程步骤
-              </div>
+              <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">请点击上方按钮添加流程步骤</div>
             )}
           </div>
         </div>
 
         {/* Footer */}
         <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end gap-3 px-4 sm: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
+            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
diff --git a/frontend/src/features/governance/workflow/components/WorkflowPreviewModal.tsx b/frontend/src/features/governance/workflow/components/WorkflowPreviewModal.tsx
index 2df472c..e3b89fd 100644
--- a/frontend/src/features/governance/workflow/components/WorkflowPreviewModal.tsx
+++ b/frontend/src/features/governance/workflow/components/WorkflowPreviewModal.tsx
@@ -2,7 +2,7 @@
 /*  WorkflowPreviewModal — 工作流预览弹框                               */
 /*  按步骤顺序展示阶段类型与关联人员                                    */
 /* ------------------------------------------------------------------ */
-import { X, Star, ArrowRight, Shield } from 'lucide-react';
+import { Star, ArrowRight, Shield } from 'lucide-react';
 import { ModalOverlay } from '@/components/ModalOverlay';
 import { STEP_TYPE_LABELS, STEP_TYPE_COLORS, STEP_TYPE_ICONS } from '../constants';
 import type { WorkflowDetail } from '../types';
@@ -15,8 +15,8 @@ interface WorkflowPreviewModalProps {
 
 export function WorkflowPreviewModal({ workflow, getUserName, onClose }: WorkflowPreviewModalProps) {
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-2xl">
-      <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-4 sm:p-6 w-full mx-2 sm:mx-4 max-h-[90vh] sm:max-h-[85vh] overflow-y-auto">
+    <ModalOverlay open={true} onClose={onClose} width="lg">
+      <div className="w-full">
         <div className="flex items-start sm:items-center justify-between gap-3 mb-6">
           <div className="flex items-center gap-2">
             <h3 className="text-xl font-semibold">{workflow.name}</h3>
@@ -26,9 +26,6 @@ export function WorkflowPreviewModal({ workflow, getUserName, onClose }: Workflo
               </span>
             )}
           </div>
-          <button onClick={onClose} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
-            <X className="w-5 h-5" />
-          </button>
         </div>
         {workflow.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{workflow.description}</p>}
         <div className="space-y-4">
@@ -38,7 +35,9 @@ export function WorkflowPreviewModal({ workflow, getUserName, onClose }: Workflo
             const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
             return (
               <div key={step.id || i} className="flex items-start gap-3 sm:gap-4">
-                <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}
+                >
                   <StepIcon className={`w-5 h-5 ${colorClass.split(' ')[1]}`} />
                 </div>
                 <div className="flex-1">
@@ -59,13 +58,15 @@ export function WorkflowPreviewModal({ workflow, getUserName, onClose }: Workflo
                     </div>
                   )}
                 </div>
-                {i < workflow.steps.length - 1 && <ArrowRight className="hidden sm:block w-5 h-5 text-[var(--dg-text-muted)] mt-2" />}
+                {i < workflow.steps.length - 1 && (
+                  <ArrowRight className="hidden sm:block w-5 h-5 text-[var(--dg-text-muted)] mt-2" />
+                )}
               </div>
             );
           })}
         </div>
         <div className="flex justify-end mt-6">
-          <button onClick={onClose} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
+          <button onClick={onClose} className="dg-btn dg-btn-secondary dg-btn-sm">
             关闭
           </button>
         </div>
diff --git a/frontend/src/features/rbac/components/BatchImportModal.tsx b/frontend/src/features/rbac/components/BatchImportModal.tsx
index 8228009..e18f90d 100644
--- a/frontend/src/features/rbac/components/BatchImportModal.tsx
+++ b/frontend/src/features/rbac/components/BatchImportModal.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect, useRef } from 'react';
-import { Upload, X, RotateCcw, Plus, Users as UsersIcon, Server } from 'lucide-react';
+import { Upload } from 'lucide-react';
 import { userApi, ldapApi } from '@/api/user';
 import { nameToUsername } from '@/utils/pinyin';
 import { toast } from '@/hooks/useToast';
@@ -34,10 +34,6 @@ export function BatchImportModal({ onClose, onImported }: BatchImportModalProps)
   const [ldapReady, setLdapReady] = useState(false);
 
   // Create OU dialog
-  const [showCreateOu, setShowCreateOu] = useState(false);
-  const [newOuName, setNewOuName] = useState('');
-  const [newOuDesc, setNewOuDesc] = useState('');
-  const [creatingOu, setCreatingOu] = useState(false);
 
   // 挂载即探测配置(决定是否显示 LDAP Tab)
   useEffect(() => {
@@ -140,26 +136,6 @@ export function BatchImportModal({ onClose, onImported }: BatchImportModalProps)
   };
 
   // Create OU
-  const handleCreateOu = async () => {
-    if (!newOuName.trim()) {
-      toast('warning', '请输入 OU 名称');
-      return;
-    }
-    setCreatingOu(true);
-    try {
-      await ldapApi.createOu({ ou_name: newOuName.trim(), description: newOuDesc.trim() });
-      toast('success', `OU "${newOuName}" 创建成功`);
-      setShowCreateOu(false);
-      setNewOuName('');
-      setNewOuDesc('');
-      await loadLdapOus();
-    } catch (e: any) {
-      toast('error', e?.response?.data?.detail || '创建 OU 失败');
-    } finally {
-      setCreatingOu(false);
-    }
-  };
-
   // Import
   const handleImport = async () => {
     if (tab === 'local' && preview.length === 0) {
@@ -213,19 +189,14 @@ export function BatchImportModal({ onClose, onImported }: BatchImportModalProps)
 
   // LDAP 未配置时隐藏 LDAP 相关 Tab(本地 CSV 始终可用)
   // LDAP 仅作只读接入：不再提供「导入到 LDAP」「从 LDAP 导入」
-  const TABS = [
-    { key: 'local' as const, label: '本地导入', icon: Upload },
-  ];
+  const TABS = [{ key: 'local' as const, label: '本地导入', icon: Upload }];
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-2xl">
-      <div className="w-full max-h-[85vh] bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl shadow-xl flex flex-col">
+    <ModalOverlay open={true} onClose={onClose} width="lg" noScroll>
+      <div className="flex h-full w-full flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4">
-          <h2 className="text-lg font-semibold">批量导入用户</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
-            <X className="w-5 h-5" />
-          </button>
+        <div className="px-6 pt-5 pb-3">
+          <h2 className="text-base font-semibold">批量导入用户</h2>
         </div>
 
         {/* Tabs */}
@@ -302,7 +273,6 @@ export function BatchImportModal({ onClose, onImported }: BatchImportModalProps)
               )}
             </>
           )}
-
         </div>
 
         {/* Footer */}
@@ -313,15 +283,10 @@ export function BatchImportModal({ onClose, onImported }: BatchImportModalProps)
           >
             关闭
           </button>
-          <button
-            onClick={handleImport}
-            disabled={!canImport()}
-            className="px-4 py-2 text-sm rounded-lg bg-[var(--dg-blue)] text-white disabled:opacity-50"
-          >
+          <button onClick={handleImport} disabled={!canImport()} className="dg-btn dg-btn-primary dg-btn-sm">
             {importing ? '导入中...' : '确认导入'}
           </button>
         </div>
-
       </div>
     </ModalOverlay>
   );
diff --git a/frontend/src/features/rbac/components/CreateUserModal.tsx b/frontend/src/features/rbac/components/CreateUserModal.tsx
index cce3548..8d3f58d 100644
--- a/frontend/src/features/rbac/components/CreateUserModal.tsx
+++ b/frontend/src/features/rbac/components/CreateUserModal.tsx
@@ -5,7 +5,6 @@
  */
 
 import { useState } from 'react';
-import { XCircle } from 'lucide-react';
 import { userApi } from '@/api/user';
 import { toast } from '@/hooks/useToast';
 import { ModalOverlay } from '@/components/ModalOverlay';
@@ -44,18 +43,20 @@ export function CreateUserModal({ onClose, onCreated }: CreateUserModalProps) {
   };
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl">
+    <ModalOverlay open={true} onClose={onClose} width="md">
+      <div className="w-full">
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold">新建用户</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><XCircle className="w-5 h-5" /></button>
+          <h2 className="text-base font-semibold">新建用户</h2>
         </div>
         <div className="space-y-4">
           <div>
             <label className="block text-sm font-medium mb-1">用户名 *</label>
             <input
               value={username}
-              onChange={e => { setUsername(e.target.value); if (errors.username) setErrors(p => ({ ...p, username: undefined })); }}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                if (errors.username) setErrors((p) => ({ ...p, username: undefined }));
+              }}
               className={`w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border rounded-lg text-sm focus:border-blue-400 focus:outline-none ${errors.username ? 'border-red-400' : 'border-[var(--dg-border)]'}`}
               placeholder="3-30位字母、数字或下划线"
             />
@@ -63,14 +64,22 @@ export function CreateUserModal({ onClose, onCreated }: CreateUserModalProps) {
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">显示名称</label>
-            <input value={displayName} onChange={e => setDisplayName(e.target.value)} 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" placeholder="用户的显示名称" />
+            <input
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              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"
+              placeholder="用户的显示名称"
+            />
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">密码 *</label>
             <input
               type="password"
               value={password}
-              onChange={e => { setPassword(e.target.value); if (errors.password) setErrors(p => ({ ...p, password: undefined })); }}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (errors.password) setErrors((p) => ({ ...p, password: undefined }));
+              }}
               className={`w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border rounded-lg text-sm focus:border-blue-400 focus:outline-none ${errors.password ? 'border-red-400' : 'border-[var(--dg-border)]'}`}
               placeholder="至少6位"
             />
@@ -81,7 +90,10 @@ export function CreateUserModal({ onClose, onCreated }: CreateUserModalProps) {
             <input
               type="email"
               value={email}
-              onChange={e => { setEmail(e.target.value); if (errors.email) setErrors(p => ({ ...p, email: undefined })); }}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (errors.email) setErrors((p) => ({ ...p, email: undefined }));
+              }}
               className={`w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border rounded-lg text-sm focus:border-blue-400 focus:outline-none ${errors.email ? 'border-red-400' : 'border-[var(--dg-border)]'}`}
               placeholder="example@company.com"
             />
@@ -89,7 +101,11 @@ export function CreateUserModal({ onClose, onCreated }: CreateUserModalProps) {
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">角色</label>
-            <select value={role} onChange={e => setRole(e.target.value)} 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">
+            <select
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              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"
+            >
               <option value="admin">超级管理员</option>
               <option value="dba">数据库管理员</option>
               <option value="developer">开发人员</option>
@@ -97,8 +113,10 @@ export function CreateUserModal({ onClose, onCreated }: CreateUserModalProps) {
             </select>
           </div>
           <div className="flex justify-end gap-3 pt-2">
-            <button onClick={onClose} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">取消</button>
-            <button onClick={handleSubmit} disabled={submitting} className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50 transition-opacity">
+            <button onClick={onClose} className="dg-btn dg-btn-secondary dg-btn-sm">
+              取消
+            </button>
+            <button onClick={handleSubmit} disabled={submitting} className="dg-btn dg-btn-primary dg-btn-sm">
               {submitting ? '创建中...' : '创建'}
             </button>
           </div>
diff --git a/frontend/src/features/rbac/components/EditUserModal.tsx b/frontend/src/features/rbac/components/EditUserModal.tsx
index 3e1adcc..9afeaef 100644
--- a/frontend/src/features/rbac/components/EditUserModal.tsx
+++ b/frontend/src/features/rbac/components/EditUserModal.tsx
@@ -5,7 +5,6 @@
  */
 
 import { useState, useEffect } from 'react';
-import { XCircle } from 'lucide-react';
 import { userApi } from '@/api/user';
 import { instanceGroupApi, type InstanceGroup } from '@/api/instanceGroup';
 import { toast } from '@/hooks/useToast';
@@ -28,24 +27,30 @@ export function EditUserModal({ user, onClose, onUpdated }: EditUserModalProps)
   const [selectedGroupIds, setSelectedGroupIds] = useState<number[]>([]);
 
   useEffect(() => {
-    instanceGroupApi.list().then((data: InstanceGroup[]) => {
-      setGroups(data);
-      // Reverse lookup: find which groups contain this user
-      const matched = data
-        .filter(g => g.users?.some(u => u.id === user.id))
-        .map(g => g.id);
-      setSelectedGroupIds(matched);
-    }).catch(() => {});
+    instanceGroupApi
+      .list()
+      .then((data: InstanceGroup[]) => {
+        setGroups(data);
+        // Reverse lookup: find which groups contain this user
+        const matched = data.filter((g) => g.users?.some((u) => u.id === user.id)).map((g) => g.id);
+        setSelectedGroupIds(matched);
+      })
+      .catch(() => {});
   }, [user.id]);
 
   const toggleGroup = (gid: number) => {
-    setSelectedGroupIds(prev => prev.includes(gid) ? prev.filter(id => id !== gid) : [...prev, gid]);
+    setSelectedGroupIds((prev) => (prev.includes(gid) ? prev.filter((id) => id !== gid) : [...prev, gid]));
   };
 
   const handleSubmit = async () => {
     setSubmitting(true);
     try {
-      await userApi.update(user.id, { display_name: displayName, email: email || undefined, role, is_active: isActive });
+      await userApi.update(user.id, {
+        display_name: displayName,
+        email: email || undefined,
+        role,
+        is_active: isActive,
+      });
       // Update group associations
       if (selectedGroupIds.length >= 0) {
         await instanceGroupApi.updateUserGroups(user.id, selectedGroupIds);
@@ -60,11 +65,10 @@ export function EditUserModal({ user, onClose, onUpdated }: EditUserModalProps)
   };
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl">
+    <ModalOverlay open={true} onClose={onClose} width="md">
+      <div className="w-full">
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold">编辑用户</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><XCircle className="w-5 h-5" /></button>
+          <h2 className="text-base font-semibold">编辑用户</h2>
         </div>
         <div className="space-y-4">
           <div className="flex items-center gap-3 p-3 bg-[var(--dg-bg-tertiary)] rounded-lg">
@@ -78,15 +82,28 @@ export function EditUserModal({ user, onClose, onUpdated }: EditUserModalProps)
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">显示名称</label>
-            <input value={displayName} onChange={e => setDisplayName(e.target.value)} 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" />
+            <input
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              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"
+            />
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">邮箱</label>
-            <input type="email" value={email} onChange={e => setEmail(e.target.value)} 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" />
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              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"
+            />
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">角色</label>
-            <select value={role} onChange={e => setRole(e.target.value)} 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">
+            <select
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              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"
+            >
               <option value="admin">超级管理员</option>
               <option value="dba">数据库管理员</option>
               <option value="developer">开发人员</option>
@@ -99,11 +116,21 @@ export function EditUserModal({ user, onClose, onUpdated }: EditUserModalProps)
               <div className="text-xs text-[var(--dg-text-muted)] py-2">暂无可选权限组</div>
             ) : (
               <div className="space-y-1.5 max-h-36 overflow-y-auto">
-                {groups.map(g => (
-                  <label key={g.id} className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-colors text-sm ${selectedGroupIds.includes(g.id) ? 'bg-blue-500/10 text-blue-400' : 'hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]'}`}>
-                    <input type="checkbox" checked={selectedGroupIds.includes(g.id)} onChange={() => toggleGroup(g.id)} className="rounded" />
+                {groups.map((g) => (
+                  <label
+                    key={g.id}
+                    className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-colors text-sm ${selectedGroupIds.includes(g.id) ? 'bg-blue-500/10 text-blue-400' : 'hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedGroupIds.includes(g.id)}
+                      onChange={() => toggleGroup(g.id)}
+                      className="rounded"
+                    />
                     <span className="flex-1 truncate">{g.name}</span>
-                    <span className="text-[10px] text-[var(--dg-text-muted)]">{g.readonly_instance_count || 0}R / {g.write_instance_count || 0}W</span>
+                    <span className="text-[10px] text-[var(--dg-text-muted)]">
+                      {g.readonly_instance_count || 0}R / {g.write_instance_count || 0}W
+                    </span>
                   </label>
                 ))}
               </div>
@@ -114,13 +141,18 @@ export function EditUserModal({ user, onClose, onUpdated }: EditUserModalProps)
               onClick={() => setIsActive(!isActive)}
               className={`relative w-11 h-6 rounded-full transition-colors ${isActive ? 'bg-green-500' : 'bg-[var(--dg-bg-hover)]'}`}
             >
-              <div className="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-all" style={{ transform: isActive ? 'translateX(20px)' : 'translateX(2px)' }} />
+              <div
+                className="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-all"
+                style={{ transform: isActive ? 'translateX(20px)' : 'translateX(2px)' }}
+              />
             </button>
             <span className="text-sm">{isActive ? '已启用' : '已禁用'}</span>
           </div>
           <div className="flex justify-end gap-3 pt-2">
-            <button onClick={onClose} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">取消</button>
-            <button onClick={handleSubmit} disabled={submitting} className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50 transition-opacity">
+            <button onClick={onClose} className="dg-btn dg-btn-secondary dg-btn-sm">
+              取消
+            </button>
+            <button onClick={handleSubmit} disabled={submitting} className="dg-btn dg-btn-primary dg-btn-sm">
               {submitting ? '保存中...' : '保存'}
             </button>
           </div>
diff --git a/frontend/src/features/rbac/components/ResetPasswordModal.tsx b/frontend/src/features/rbac/components/ResetPasswordModal.tsx
index fdb78fd..871fde6 100644
--- a/frontend/src/features/rbac/components/ResetPasswordModal.tsx
+++ b/frontend/src/features/rbac/components/ResetPasswordModal.tsx
@@ -5,7 +5,6 @@
  */
 
 import { useState } from 'react';
-import { XCircle, KeyRound } from 'lucide-react';
 import { userApi } from '@/api/user';
 import { toast } from '@/hooks/useToast';
 import { ModalOverlay } from '@/components/ModalOverlay';
@@ -16,6 +15,8 @@ interface ResetPasswordModalProps {
   onClose: () => void;
 }
 
+import { KeyRound } from 'lucide-react';
+
 export function ResetPasswordModal({ user, onClose }: ResetPasswordModalProps) {
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -24,9 +25,18 @@ export function ResetPasswordModal({ user, onClose }: ResetPasswordModalProps) {
 
   const handleSubmit = async () => {
     setError('');
-    if (!newPassword) { setError('请输入新密码'); return; }
-    if (newPassword.length < 6) { setError('密码长度至少6位'); return; }
-    if (newPassword !== confirmPassword) { setError('两次输入的密码不一致'); return; }
+    if (!newPassword) {
+      setError('请输入新密码');
+      return;
+    }
+    if (newPassword.length < 6) {
+      setError('密码长度至少6位');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError('两次输入的密码不一致');
+      return;
+    }
 
     setSubmitting(true);
     try {
@@ -41,28 +51,52 @@ export function ResetPasswordModal({ user, onClose }: ResetPasswordModalProps) {
   };
 
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-sm">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl">
+    <ModalOverlay open={true} onClose={onClose} width="sm">
+      <div className="w-full">
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold flex items-center gap-2"><KeyRound className="w-5 h-5 text-yellow-400" /> 重置密码</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><XCircle className="w-5 h-5" /></button>
+          <h2 className="flex items-center gap-2 text-base font-semibold">
+            <KeyRound className="h-4 w-4 text-[var(--dg-blue)]" /> 重置密码
+          </h2>
         </div>
         <div className="p-3 bg-yellow-500/5 border border-yellow-500/15 rounded-lg mb-4">
-          <p className="text-sm text-[var(--dg-text-secondary)]">为用户 <strong className="text-[var(--dg-text-primary)]">{user.display_name || user.username}</strong> 设置新密码</p>
+          <p className="text-sm text-[var(--dg-text-secondary)]">
+            为用户 <strong className="text-[var(--dg-text-primary)]">{user.display_name || user.username}</strong>{' '}
+            设置新密码
+          </p>
         </div>
         <div className="space-y-3">
           <div>
             <label className="block text-sm font-medium mb-1">新密码</label>
-            <input type="password" value={newPassword} onChange={e => { setNewPassword(e.target.value); setError(''); }} 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" placeholder="至少6位" />
+            <input
+              type="password"
+              value={newPassword}
+              onChange={(e) => {
+                setNewPassword(e.target.value);
+                setError('');
+              }}
+              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"
+              placeholder="至少6位"
+            />
           </div>
           <div>
             <label className="block text-sm font-medium mb-1">确认密码</label>
-            <input type="password" value={confirmPassword} onChange={e => { setConfirmPassword(e.target.value); setError(''); }} 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" placeholder="再次输入" />
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => {
+                setConfirmPassword(e.target.value);
+                setError('');
+              }}
+              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"
+              placeholder="再次输入"
+            />
           </div>
           {error && <p className="text-xs text-red-400">{error}</p>}
           <div className="flex justify-end gap-3 pt-2">
-            <button onClick={onClose} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">取消</button>
-            <button onClick={handleSubmit} disabled={submitting} className="px-4 py-2 bg-yellow-500 text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50 transition-opacity">
+            <button onClick={onClose} className="dg-btn dg-btn-secondary dg-btn-sm">
+              取消
+            </button>
+            <button onClick={handleSubmit} disabled={submitting} className="dg-btn dg-btn-primary dg-btn-sm">
               {submitting ? '重置中...' : '确认重置'}
             </button>
           </div>
diff --git a/frontend/src/features/rbac/components/UserDetailModal.tsx b/frontend/src/features/rbac/components/UserDetailModal.tsx
index d6f228c..a7e5114 100644
--- a/frontend/src/features/rbac/components/UserDetailModal.tsx
+++ b/frontend/src/features/rbac/components/UserDetailModal.tsx
@@ -4,7 +4,6 @@
  * 已知限制:「最近活动」为静态占位文案,暂未接入活动记录接口
  */
 
-import { XCircle } from 'lucide-react';
 import { ModalOverlay } from '@/components/ModalOverlay';
 import { roleNameMap, roleTagStyle } from '../constants';
 import type { UserItem } from '../types';
@@ -17,19 +16,30 @@ interface UserDetailModalProps {
 /** 详情弹窗「最近活动」使用的时钟图标 */
 function Clock(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
-      <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
     </svg>
   );
 }
 
 export function UserDetailModal({ user, onClose }: UserDetailModalProps) {
   return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-lg">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl max-h-[80vh] overflow-y-auto">
+    <ModalOverlay open={true} onClose={onClose} width="md">
+      <div className="w-full">
         <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold">用户详情</h2>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><XCircle className="w-5 h-5" /></button>
+          <h2 className="text-base font-semibold">用户详情</h2>
         </div>
 
         {/* User Info Card */}
@@ -41,10 +51,14 @@ export function UserDetailModal({ user, onClose }: UserDetailModalProps) {
             <div className="text-base font-semibold">{user.display_name || user.username}</div>
             <div className="text-sm text-[var(--dg-text-muted)]">@{user.username}</div>
             <div className="flex items-center gap-2 mt-1.5">
-              <span className={`inline-flex px-2 py-0.5 rounded-md text-xs font-medium ${roleTagStyle[user.role] || ''}`}>
+              <span
+                className={`inline-flex px-2 py-0.5 rounded-md text-xs font-medium ${roleTagStyle[user.role] || ''}`}
+              >
                 {roleNameMap[user.role] || user.role}
               </span>
-              <span className={`inline-flex px-2 py-0.5 rounded-md text-xs font-medium ${user.is_active ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}>
+              <span
+                className={`inline-flex px-2 py-0.5 rounded-md text-xs font-medium ${user.is_active ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}
+              >
                 {user.is_active ? '启用' : '禁用'}
               </span>
             </div>
@@ -63,7 +77,9 @@ export function UserDetailModal({ user, onClose }: UserDetailModalProps) {
           </div>
           <div className="p-3 bg-[var(--dg-bg-tertiary)] rounded-lg">
             <div className="text-xs text-[var(--dg-text-muted)] mb-1">最后登录</div>
-            <div className="text-sm font-medium">{user.last_login ? new Date(user.last_login).toLocaleString('zh-CN') : '-'}</div>
+            <div className="text-sm font-medium">
+              {user.last_login ? new Date(user.last_login).toLocaleString('zh-CN') : '-'}
+            </div>
           </div>
           <div className="p-3 bg-[var(--dg-bg-tertiary)] rounded-lg">
             <div className="text-xs text-[var(--dg-text-muted)] mb-1">用户ID</div>
@@ -77,9 +93,7 @@ export function UserDetailModal({ user, onClose }: UserDetailModalProps) {
             <Clock className="w-4 h-4 text-[var(--dg-text-muted)]" />
             最近活动
           </h3>
-          <div className="text-sm text-[var(--dg-text-muted)] text-center py-6">
-            暂无活动记录
-          </div>
+          <div className="text-sm text-[var(--dg-text-muted)] text-center py-6">暂无活动记录</div>
         </div>
       </div>
     </ModalOverlay>
diff --git a/frontend/src/features/system/ldap/components/LdapAccountTestDialog.tsx b/frontend/src/features/system/ldap/components/LdapAccountTestDialog.tsx
deleted file mode 100644
index b546c0e..0000000
--- a/frontend/src/features/system/ldap/components/LdapAccountTestDialog.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * LDAP 账号验证测试弹框
- * 输入用户名/密码进行绑定验证,并展示后端返回的用户属性信息
- * 凭据与结果状态由页面持有,输入变更时清空上次结果(与原页面行为一致)
- */
-import { KeyRound, CheckCircle, XCircle, RefreshCw, Shield } from 'lucide-react';
-import { ModalOverlay } from '@/components/ModalOverlay';
-import type { LdapAccountTestResult } from '../types';
-
-interface LdapAccountTestDialogProps {
-  testUser: string;
-  testPass: string;
-  result: LdapAccountTestResult | null;
-  testing: boolean;
-  onTestUserChange: (value: string) => void;
-  onTestPassChange: (value: string) => void;
-  onClose: () => void;
-  onTest: () => void;
-}
-
-export function LdapAccountTestDialog({
-  testUser,
-  testPass,
-  result,
-  testing,
-  onTestUserChange,
-  onTestPassChange,
-  onClose,
-  onTest,
-}: LdapAccountTestDialogProps) {
-  return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
-        {/* 标题 */}
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <KeyRound className="w-4 h-4 text-blue-400" />
-            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">账号验证测试</h3>
-          </div>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">
-            ✕
-          </button>
-        </div>
-
-        {/* 表单区 */}
-        <div className="space-y-3 mb-4">
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名</label>
-            <input
-              value={testUser}
-              onChange={e => onTestUserChange(e.target.value)}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="LDAP 用户名"
-            />
-          </div>
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码</label>
-            <input
-              type="password"
-              value={testPass}
-              onChange={e => onTestPassChange(e.target.value)}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="密码"
-              onKeyDown={e => { if (e.key === 'Enter' && testUser && testPass) onTest(); }}
-            />
-          </div>
-        </div>
-
-        {/* 结果区 */}
-        {result && (
-          <div className="mb-4">
-            {result.ok ? (
-              <div className="rounded-lg bg-emerald-500/12 p-3">
-                <div className="flex items-center gap-2 mb-2">
-                  <CheckCircle className="w-4 h-4 text-emerald-400 shrink-0" />
-                  <span className="text-sm font-medium text-emerald-400">验证通过</span>
-                </div>
-                {result.info && (
-                  <div className="space-y-1 pl-6 max-h-24 overflow-y-auto">
-                    {Object.entries(result.info)
-                      .filter(([, v]) => v && String(v).length > 0)
-                      .map(([k, v]) => (
-                      <div key={k} className="flex text-xs gap-2">
-                        <span className="text-emerald-400/60 shrink-0">{
-                          k === 'Display Name' ? '姓名' :
-                          k === 'Email' ? '邮箱' :
-                          k === 'User DN' ? 'DN' :
-                          k === 'User ID' ? '用户名' : k
-                        }</span>
-                        <span className="text-emerald-300">{
-                          Array.isArray(v) ? v.join(', ') : String(v)
-                        }</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div className="rounded-lg bg-red-500/12 p-3">
-                <div className="flex items-center gap-2">
-                  <XCircle className="w-4 h-4 text-red-400 shrink-0" />
-                  <span className="text-sm font-medium text-red-400">验证失败</span>
-                </div>
-                <p className="text-xs text-red-300/80 mt-1 pl-6">{result.msg}</p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* 操作栏 */}
-        <div className="flex justify-end gap-2">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">关闭</button>
-          <button
-            onClick={onTest}
-            disabled={testing || !testUser || !testPass}
-            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
-          >
-            {testing ? (
-              <><RefreshCw className="w-3.5 h-3.5 animate-spin" />验证中…</>
-            ) : (
-              <><Shield className="w-3.5 h-3.5" />测试验证</>
-            )}
-          </button>
-        </div>
-      </div>
-    </ModalOverlay>
-  );
-}
diff --git a/frontend/src/features/system/ldap/components/LdapAddUserDialog.tsx b/frontend/src/features/system/ldap/components/LdapAddUserDialog.tsx
deleted file mode 100644
index 938da17..0000000
--- a/frontend/src/features/system/ldap/components/LdapAddUserDialog.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * 添加 LDAP 用户弹框
- * 填写用户名 / 密码 / 显示名称 / 邮箱与目标 OU 后创建 LDAP 用户
- * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
- */
-import { UserPlus } from 'lucide-react';
-import { ModalOverlay } from '@/components/ModalOverlay';
-import type { AddUserFormState, OuItem } from '../types';
-
-interface LdapAddUserDialogProps {
-  form: AddUserFormState;
-  onFormChange: (patch: Partial<AddUserFormState>) => void;
-  ouList: OuItem[];
-  baseDn: string;
-  adding: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-export function LdapAddUserDialog({
-  form,
-  onFormChange,
-  ouList,
-  baseDn,
-  adding,
-  onClose,
-  onConfirm,
-}: LdapAddUserDialogProps) {
-  return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <UserPlus className="w-4 h-4 text-emerald-400" />
-            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">添加用户到 LDAP</h3>
-          </div>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">✕</button>
-        </div>
-        <div className="space-y-3 mb-4">
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名 *</label>
-            <input
-              value={form.username}
-              onChange={e => onFormChange({ username: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="登录名，如 zhangsan"
-            />
-          </div>
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码 *</label>
-            <input
-              type="password"
-              value={form.password}
-              onChange={e => onFormChange({ password: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="初始密码"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">显示名称</label>
-              <input
-                value={form.displayName}
-                onChange={e => onFormChange({ displayName: e.target.value })}
-                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-                placeholder="如: 张三"
-              />
-            </div>
-            <div>
-              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">邮箱</label>
-              <input
-                value={form.email}
-                onChange={e => onFormChange({ email: e.target.value })}
-                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-                placeholder="可选"
-              />
-            </div>
-          </div>
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">目标 OU</label>
-            <select
-              value={form.ouDn}
-              onChange={e => onFormChange({ ouDn: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-            >
-              <option value="">根: {baseDn}</option>
-              {ouList.map(ou => <option key={ou.dn} value={ou.dn}>{ou.name} ({ou.dn})</option>)}
-            </select>
-          </div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
-          <button
-            onClick={onConfirm}
-            disabled={adding || !form.username.trim() || !form.password.trim()}
-            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
-          >
-            <UserPlus className="w-3.5 h-3.5" />
-            {adding ? '创建中…' : '创建用户'}
-          </button>
-        </div>
-      </div>
-    </ModalOverlay>
-  );
-}
diff --git a/frontend/src/features/system/ldap/components/LdapCreateOuDialog.tsx b/frontend/src/features/system/ldap/components/LdapCreateOuDialog.tsx
deleted file mode 100644
index 255b094..0000000
--- a/frontend/src/features/system/ldap/components/LdapCreateOuDialog.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * 新建组织单元(OU)弹框
- * 填写 OU 名称 / 父级 DN / 描述后调用后端创建
- * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
- */
-import { FolderOpen } from 'lucide-react';
-import { ModalOverlay } from '@/components/ModalOverlay';
-import type { CreateOuFormState, OuItem } from '../types';
-
-interface LdapCreateOuDialogProps {
-  form: CreateOuFormState;
-  onFormChange: (patch: Partial<CreateOuFormState>) => void;
-  ouList: OuItem[];
-  baseDn: string;
-  creating: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-export function LdapCreateOuDialog({
-  form,
-  onFormChange,
-  ouList,
-  baseDn,
-  creating,
-  onClose,
-  onConfirm,
-}: LdapCreateOuDialogProps) {
-  return (
-    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
-      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <FolderOpen className="w-4 h-4 text-blue-400" />
-            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">新建组织单元 (OU)</h3>
-          </div>
-          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">✕</button>
-        </div>
-        <div className="space-y-3 mb-4">
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">OU 名称 *</label>
-            <input
-              value={form.name}
-              onChange={e => onFormChange({ name: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="如: devops, engineering"
-            />
-          </div>
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">父级 DN</label>
-            <select
-              value={form.parent}
-              onChange={e => onFormChange({ parent: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-            >
-              <option value="">根: {baseDn}</option>
-              {ouList.map(ou => <option key={ou.dn} value={ou.dn}>{ou.dn}</option>)}
-            </select>
-          </div>
-          <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">描述</label>
-            <input
-              value={form.desc}
-              onChange={e => onFormChange({ desc: e.target.value })}
-              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-              placeholder="可选，如: 研发团队"
-            />
-          </div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
-          <button
-            onClick={onConfirm}
-            disabled={creating || !form.name.trim()}
-            className="px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
-          >
-            {creating ? '创建中…' : '创建 OU'}
-          </button>
-        </div>
-      </div>
-    </ModalOverlay>
-  );
-}
diff --git a/frontend/src/features/ticket/components/TicketDetailDialog.tsx b/frontend/src/features/ticket/components/TicketDetailDialog.tsx
index 184b03f..28a14d0 100644
--- a/frontend/src/features/ticket/components/TicketDetailDialog.tsx
+++ b/frontend/src/features/ticket/components/TicketDetailDialog.tsx
@@ -99,13 +99,8 @@ export function TicketDetailDialog({
 
   return (
     <>
-      <ModalOverlay
-        open={true}
-        onClose={onClose}
-        width="max-w-3xl"
-        className="border border-[var(--dg-border)] overflow-hidden flex flex-col"
-      >
-        <div className="w-full max-h-[90vh] md:max-h-[85vh] overflow-hidden flex flex-col">
+      <ModalOverlay open={true} onClose={onClose} width="lg" noScroll>
+        <div className="flex h-full w-full flex-col">
           {/* Header */}
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 md:px-6 py-4 border-b border-[var(--dg-border)]">
             <div className="flex items-center gap-3">
diff --git a/frontend/src/pages/InstanceGroupPage.tsx b/frontend/src/pages/InstanceGroupPage.tsx
index 33d44d1..7bcac4e 100644
--- a/frontend/src/pages/InstanceGroupPage.tsx
+++ b/frontend/src/pages/InstanceGroupPage.tsx
@@ -1,7 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-  Plus, Search, Edit2, Trash2, Server, Users, ChevronRight,
-  Eye, PenLine, ChevronLeft, ChevronRight as ChevRight, X,
+  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';
@@ -24,7 +34,13 @@ const DB_TYPE_COLORS: Record<string, string> = {
 
 /* ───────── Transfer Component ───────── */
 
-interface TransferItem { label: string; value: string; tag?: string; tagColor?: string; accessMode?: string }
+interface TransferItem {
+  label: string;
+  value: string;
+  tag?: string;
+  tagColor?: string;
+  accessMode?: string;
+}
 
 interface TransferProps {
   title: string;
@@ -39,17 +55,35 @@ function Transfer({ title, items, selected, onChange, emptyText = '请从左侧
   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.includes(search))
+  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.includes(search))
+  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(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 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 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)]'}`;
@@ -62,24 +96,49 @@ function Transfer({ title, items, selected, onChange, emptyText = '请从左侧
           <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"
-            placeholder="搜索..." value={search} onChange={e => setSearch(e.target.value)} />
+          <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-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 => (
+          {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={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" />
+              <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>}
+              {item.tag && (
+                <span className={`ml-auto text-[10px] px-1 py-0.5 rounded ${item.tagColor || ''}`}>{item.tag}</span>
+              )}
             </label>
           ))}
         </div>
       </div>
       <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>
+        <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>
       <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">
@@ -87,13 +146,22 @@ function Transfer({ title, items, selected, onChange, emptyText = '请从左侧
           <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)]">{emptyText}</div>}
-          {selectedFiltered.map(item => (
+          {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" />
+              <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>}
+              {item.tag && (
+                <span className={`ml-auto text-[10px] px-1 py-0.5 rounded ${item.tagColor || ''}`}>{item.tag}</span>
+              )}
             </label>
           ))}
         </div>
@@ -112,7 +180,7 @@ export default function InstanceGroupPage() {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showUserModal, setShowUserModal] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ msg: string; onConfirm: () => void } | null>(null);
   const canManage = useActionPermission('instance-group.manage');
 
   // Form state — shared by create & edit
@@ -128,56 +196,79 @@ export default function InstanceGroupPage() {
   const [userSearch, setUserSearch] = useState('');
 
   const fetchGroups = useCallback(async () => {
-    try { setGroups(await instanceGroupApi.list()); } catch {} finally { setLoading(false); }
+    try {
+      setGroups(await instanceGroupApi.list());
+    } catch {
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
-  useEffect(() => { fetchGroups(); }, [fetchGroups]);
+  useEffect(() => {
+    fetchGroups();
+  }, [fetchGroups]);
 
   useEffect(() => {
     if (showCreateModal || showEditModal) {
-      instanceApi.list().then((res: any) => {
-        setAllInstances(Array.isArray(res) ? res : (res?.items || []));
-      }).catch(() => {});
+      instanceApi
+        .list()
+        .then((res: any) => {
+          setAllInstances(Array.isArray(res) ? res : res?.items || []);
+        })
+        .catch(() => {});
     }
   }, [showCreateModal, showEditModal]);
 
   useEffect(() => {
     if (showUserModal) {
-      userApi.list().then((d: any) => {
-        setAllUsers(Array.isArray(d?.items || d) ? (d?.items || d) : []);
-      }).catch(() => {});
+      userApi
+        .list()
+        .then((d: any) => {
+          setAllUsers(Array.isArray(d?.items || d) ? d?.items || d : []);
+        })
+        .catch(() => {});
     }
   }, [showUserModal]);
 
-  const transferItems = useMemo(() =>
-    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] || '',
-      accessMode: i.access_mode || 'readwrite',
-    })),
-    [allInstances]
+  const transferItems = useMemo(
+    () =>
+      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] || '',
+        accessMode: i.access_mode || 'readwrite',
+      })),
+    [allInstances],
   );
 
   // 查询授权：只匹配 read + readwrite 实例
-  const readonlyTransferItems = useMemo(() =>
-    transferItems.filter(i => i.accessMode === 'read' || i.accessMode === 'readwrite'),
-    [transferItems]
+  const readonlyTransferItems = useMemo(
+    () => transferItems.filter((i) => i.accessMode === 'read' || i.accessMode === 'readwrite'),
+    [transferItems],
   );
 
   // 变更授权：只匹配 write + readwrite 实例
-  const writeTransferItems = useMemo(() =>
-    transferItems.filter(i => i.accessMode === 'write' || i.accessMode === 'readwrite'),
-    [transferItems]
+  const writeTransferItems = useMemo(
+    () => transferItems.filter((i) => i.accessMode === 'write' || i.accessMode === 'readwrite'),
+    [transferItems],
   );
 
-  const filteredGroups = useMemo(() => groups.filter(g => !search || g.name.includes(search)), [groups, search]);
-  const filteredUsers = useMemo(() => allUsers.filter(u => !userSearch || (u.display_name || u.username).toLowerCase().includes(userSearch.toLowerCase())), [allUsers, userSearch]);
+  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(''); setFormIsActive(true);
-    setReadonlyIds([]); setWriteIds([]);
+    setFormName('');
+    setFormDesc('');
+    setFormIsActive(true);
+    setReadonlyIds([]);
+    setWriteIds([]);
   };
 
   /* ── Create ── */
@@ -191,7 +282,9 @@ export default function InstanceGroupPage() {
       readonly_instance_ids: readonlyIds.map(Number),
       write_instance_ids: writeIds.map(Number),
     });
-    setShowCreateModal(false); resetForm(); fetchGroups();
+    setShowCreateModal(false);
+    resetForm();
+    fetchGroups();
   };
 
   /* ── Edit ── */
@@ -214,42 +307,64 @@ export default function InstanceGroupPage() {
       readonly_instance_ids: readonlyIds.map(Number),
       write_instance_ids: writeIds.map(Number),
     });
-    setShowEditModal(false); resetForm(); fetchGroups();
+    setShowEditModal(false);
+    resetForm();
+    fetchGroups();
   };
 
   /* ── Delete ── */
   const handleDelete = async (id: number) => {
-    setDeleteConfirm({msg: '确定删除该权限组？', onConfirm: async () => {
-      await instanceGroupApi.delete(id);
-      if (selectedId === id) setSelectedId(null);
-      fetchGroups();
-    }});
+    setDeleteConfirm({
+      msg: '确定删除该权限组？',
+      onConfirm: async () => {
+        await instanceGroupApi.delete(id);
+        if (selectedId === id) setSelectedId(null);
+        fetchGroups();
+      },
+    });
   };
 
   /* ── Assign Users ── */
   const handleAssignUsers = async () => {
     if (!selectedId || selectedUserIds.length === 0) return;
     await instanceGroupApi.assignUsers(selectedId, selectedUserIds);
-    setShowUserModal(false); setSelectedUserIds([]); fetchGroups();
+    setShowUserModal(false);
+    setSelectedUserIds([]);
+    fetchGroups();
   };
 
-  const selectedGroup = groups.find(g => g.id === selectedId);
+  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>;
+  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">
+        {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
+                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>
+              <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>
+            <span className={`px-1 py-0.5 text-[10px] rounded ${DB_TYPE_COLORS[inst.db_type] || ''}`}>
+              {inst.db_type}
+            </span>
           </div>
         ))}
       </div>
@@ -257,8 +372,12 @@ export default function InstanceGroupPage() {
   };
 
   /* ── Form Modal shared close/submit ── */
-  const formClose = () => { setShowCreateModal(false); setShowEditModal(false); resetForm(); };
-  const formMode = showCreateModal ? 'create' as const : showEditModal ? 'edit' as const : null;
+  const formClose = () => {
+    setShowCreateModal(false);
+    setShowEditModal(false);
+    resetForm();
+  };
+  const formMode = showCreateModal ? ('create' as const) : showEditModal ? ('edit' as const) : null;
   const formSubmit = formMode === 'create' ? handleCreate : handleEdit;
 
   return (
@@ -270,7 +389,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">
+          <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>
         )}
@@ -281,23 +406,41 @@ export default function InstanceGroupPage() {
         <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)} />
+            <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-300px)] overflow-y-auto">
-            {filteredGroups.length === 0 && <div className="text-center py-10 text-[var(--dg-text-muted)] text-sm">暂无权限组</div>}
-            {filteredGroups.map(group => {
+            {filteredGroups.length === 0 && (
+              <div className="text-center py-10 text-[var(--dg-text-muted)] text-sm">暂无权限组</div>
+            )}
+            {filteredGroups.map((group) => {
               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
+                  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">
                     <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>}
+                    {!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 bg-emerald-500/10 text-emerald-400 text-[10px]">{ro} 只读</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>
+                    <span className="ml-auto">
+                      <Users className="w-3 h-3 inline mr-0.5" />
+                      {group.user_count || 0}
+                    </span>
                   </div>
                 </div>
               );
@@ -307,80 +450,126 @@ export default function InstanceGroupPage() {
 
         {/* Right detail */}
         <div className="flex-1 min-w-0">
-          {selectedGroup ? (() => {
-            const sg = selectedGroup;
-            const roInst = sg.readonly_instances || [];
-            const wrInst = sg.write_instances || [];
-            const roCount = sg.readonly_instance_count ?? (sg.readonly_instance_ids || []).length;
-            const wrCount = sg.write_instance_count ?? (sg.write_instance_ids || []).length;
-            return (
-              <div className="space-y-4">
-                <Card className="dg-card">
-                  <CardContent className="p-5">
-                    <div className="flex items-start justify-between">
-                      <div>
-                        <div className="flex items-center gap-3">
-                          <h2 className="text-lg font-semibold">{sg.name}</h2>
-                          {!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">{roCount} 只读实例</span>
-                          <span className="px-2 py-0.5 text-xs rounded bg-amber-500/15 text-amber-400">{wrCount} 写入实例</span>
-                          <span className="px-2 py-0.5 text-xs rounded bg-blue-500/15 text-blue-400">{sg.user_count || 0} 用户</span>
+          {selectedGroup ? (
+            (() => {
+              const sg = selectedGroup;
+              const roInst = sg.readonly_instances || [];
+              const wrInst = sg.write_instances || [];
+              const roCount = sg.readonly_instance_count ?? (sg.readonly_instance_ids || []).length;
+              const wrCount = sg.write_instance_count ?? (sg.write_instance_ids || []).length;
+              return (
+                <div className="space-y-4">
+                  <Card className="dg-card">
+                    <CardContent className="p-5">
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <div className="flex items-center gap-3">
+                            <h2 className="text-lg font-semibold">{sg.name}</h2>
+                            {!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">
+                              {roCount} 只读实例
+                            </span>
+                            <span className="px-2 py-0.5 text-xs rounded bg-amber-500/15 text-amber-400">
+                              {wrCount} 写入实例
+                            </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">
+                            <button
+                              onClick={() => openEditModal(sg)}
+                              className="p-2 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors"
+                            >
+                              <Edit2 className="w-4 h-4" />
+                            </button>
+                            <button
+                              onClick={() => handleDelete(sg.id)}
+                              className="p-2 rounded-lg hover:bg-red-500/10 text-[var(--dg-text-secondary)] hover:text-red-400 transition-colors"
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </button>
+                          </div>
+                        )}
                       </div>
-                      {canManage && (
-                        <div className="flex items-center gap-2">
-                          <button onClick={() => openEditModal(sg)} className="p-2 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors"><Edit2 className="w-4 h-4" /></button>
-                          <button onClick={() => handleDelete(sg.id)} className="p-2 rounded-lg hover:bg-red-500/10 text-[var(--dg-text-secondary)] hover:text-red-400 transition-colors"><Trash2 className="w-4 h-4" /></button>
+                    </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">
+                        <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">
+                        <h3 className="text-sm font-semibold flex items-center gap-2">
+                          <Users className="w-4 h-4 text-[var(--dg-text-muted)]" />
+                          关联用户 ({sg.users?.length || 0})
+                        </h3>
+                        {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="text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>
                       )}
-                    </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">
-                      <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">
-                      <h3 className="text-sm font-semibold flex items-center gap-2"><Users className="w-4 h-4 text-[var(--dg-text-muted)]" />关联用户 ({sg.users?.length || 0})</h3>
-                      {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="text-sm text-[var(--dg-text-muted)]">暂未关联用户</div>}
-                  </CardContent>
-                </Card>
-              </div>
-            );
-          })() : (
+                    </CardContent>
+                  </Card>
+                </div>
+              );
+            })()
+          ) : (
             <div className="flex flex-col items-center justify-center h-96 text-[var(--dg-text-muted)]">
               <ChevronRight className="w-8 h-8 mb-2 rotate-90 opacity-50" />
               <p className="text-sm">选择左侧权限组查看详情</p>
@@ -391,21 +580,32 @@ export default function InstanceGroupPage() {
 
       {/* Form Modal (create & edit) */}
       {formMode && (
-        <ModalOverlay open={!!formMode} onClose={formClose} width="max-w-3xl">
-          <div className="w-full max-w-3xl bg-[var(--dg-bg-primary)] rounded-xl shadow-2xl flex flex-col max-h-[90vh] border border-[var(--dg-border)]">
-            <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--dg-border)]">
-              <h3 className="text-lg font-semibold">{formMode === 'create' ? '新建权限策略' : '编辑权限策略'}</h3>
-              <button onClick={formClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><X className="w-4 h-4" /></button>
+        <ModalOverlay open={!!formMode} onClose={formClose} width="lg" noScroll>
+          <div className="flex h-full w-full flex-col">
+            <div className="px-6 pt-5 pb-3">
+              <h3 className="text-base font-semibold">{formMode === 'create' ? '新建权限策略' : '编辑权限策略'}</h3>
             </div>
-            <div className="overflow-y-auto px-6 py-5 space-y-5 flex-1">
+            <div className="overflow-y-auto px-6 pb-6 space-y-5 flex-1 scrollbar-thin">
               <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="如：生产数据库权限" />
+                  <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="可选" />
+                  <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>
 
@@ -415,7 +615,13 @@ export default function InstanceGroupPage() {
                   <span className="text-sm font-medium text-emerald-400">查询授权</span>
                   <span className="text-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
                 </div>
-                <Transfer title="只读实例" items={readonlyTransferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
+                <Transfer
+                  title="只读实例"
+                  items={readonlyTransferItems}
+                  selected={readonlyIds}
+                  onChange={setReadonlyIds}
+                  emptyText="选择用于查询的实例"
+                />
               </div>
 
               <div className="rounded-xl p-4 bg-amber-500/5 border border-amber-500/20">
@@ -424,12 +630,27 @@ export default function InstanceGroupPage() {
                   <span className="text-sm font-medium text-amber-400">变更授权</span>
                   <span className="text-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
                 </div>
-                <Transfer title="写入实例" items={writeTransferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
+                <Transfer
+                  title="写入实例"
+                  items={writeTransferItems}
+                  selected={writeIds}
+                  onChange={setWriteIds}
+                  emptyText="选择用于变更的实例"
+                />
               </div>
 
               <div className="flex justify-end gap-3 pt-2">
-                <button onClick={formClose} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors rounded-lg hover:bg-[var(--dg-bg-hover)]">取消</button>
-                <button onClick={formSubmit} disabled={!formName.trim()} className="dg-btn dg-btn-primary disabled:opacity-50">
+                <button
+                  onClick={formClose}
+                  className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors rounded-lg hover:bg-[var(--dg-bg-hover)]"
+                >
+                  取消
+                </button>
+                <button
+                  onClick={formSubmit}
+                  disabled={!formName.trim()}
+                  className="dg-btn dg-btn-primary disabled:opacity-50"
+                >
                   {formMode === 'create' ? '创建' : '保存'}
                 </button>
               </div>
@@ -443,38 +664,71 @@ export default function InstanceGroupPage() {
         title={deleteConfirm?.msg || '确认操作'}
         variant="danger"
         confirmText="确定"
-        onConfirm={() => { deleteConfirm?.onConfirm(); setDeleteConfirm(null); }}
+        onConfirm={() => {
+          deleteConfirm?.onConfirm();
+          setDeleteConfirm(null);
+        }}
         onCancel={() => setDeleteConfirm(null)}
       />
 
       {/* User Modal */}
       {showUserModal && (
-        <ModalOverlay open={showUserModal} onClose={() => setShowUserModal(false)} width="max-w-md">
-          <div className="w-full max-w-md bg-[var(--dg-bg-primary)] rounded-xl shadow-2xl border border-[var(--dg-border)]">
-            <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--dg-border)]">
-              <h3 className="text-lg font-semibold">关联用户</h3>
-              <button onClick={() => setShowUserModal(false)} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"><X className="w-4 h-4" /></button>
+        <ModalOverlay open={showUserModal} onClose={() => setShowUserModal(false)} width="md">
+          <div className="w-full">
+            <div className="pt-2 pb-3">
+              <h3 className="text-base font-semibold">关联用户</h3>
             </div>
-            <div className="px-6 py-4">
-            <div className="relative mb-3">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
-              <input value={userSearch} onChange={e => setUserSearch(e.target.value)} placeholder="搜索用户..." className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
+            <div className="pb-4">
+              <div className="relative mb-3">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
+                <input
+                  value={userSearch}
+                  onChange={(e) => setUserSearch(e.target.value)}
+                  placeholder="搜索用户..."
+                  className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
+                />
+              </div>
+              <div className="space-y-2 max-h-72 overflow-y-auto mb-4">
+                {filteredUsers.map((u) => (
+                  <label
+                    key={u.id}
+                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${selectedUserIds.includes(u.id) ? 'bg-blue-500/10' : 'hover:bg-[var(--dg-bg-hover)]'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedUserIds.includes(u.id)}
+                      onChange={(e) =>
+                        setSelectedUserIds(
+                          e.target.checked ? [...selectedUserIds, u.id] : selectedUserIds.filter((id) => id !== u.id),
+                        )
+                      }
+                      className="rounded"
+                    />
+                    <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>
+                  </label>
+                ))}
+              </div>
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={() => setShowUserModal(false)}
+                  className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors rounded-lg hover:bg-[var(--dg-bg-hover)]"
+                >
+                  取消
+                </button>
+                <button
+                  onClick={handleAssignUsers}
+                  disabled={selectedUserIds.length === 0}
+                  className="dg-btn dg-btn-primary disabled:opacity-50"
+                >
+                  确认 ({selectedUserIds.length})
+                </button>
+              </div>
             </div>
-            <div className="space-y-2 max-h-72 overflow-y-auto mb-4">
-              {filteredUsers.map(u => (
-                <label key={u.id} className={`flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors ${selectedUserIds.includes(u.id) ? 'bg-blue-500/10' : 'hover:bg-[var(--dg-bg-hover)]'}`}>
-                  <input type="checkbox" checked={selectedUserIds.includes(u.id)} onChange={e => setSelectedUserIds(e.target.checked ? [...selectedUserIds, u.id] : selectedUserIds.filter(id => id !== u.id))} className="rounded" />
-                  <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>
-                </label>
-              ))}
-            </div>
-            <div className="flex justify-end gap-3">
-              <button onClick={() => setShowUserModal(false)} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors rounded-lg hover:bg-[var(--dg-bg-hover)]">取消</button>
-              <button onClick={handleAssignUsers} disabled={selectedUserIds.length === 0} className="dg-btn dg-btn-primary disabled:opacity-50">确认 ({selectedUserIds.length})</button>
-            </div>
-            </div>{/* end px-6 py-4 */}
+            {/* end px-6 py-4 */}
           </div>
         </ModalOverlay>
       )}
diff --git a/frontend/src/pages/NotificationPage.tsx b/frontend/src/pages/NotificationPage.tsx
index 88a8057..6af44f4 100644
--- a/frontend/src/pages/NotificationPage.tsx
+++ b/frontend/src/pages/NotificationPage.tsx
@@ -44,7 +44,14 @@ const defaultForm = (): FormState => ({
 
 const dingtalkDefault = () => ({ webhook_url: '', secret: '' });
 const feishuDefault = () => ({ webhook_url: '' });
-const emailDefault = () => ({ smtp_host: '', smtp_port: 465, smtp_user: '', smtp_password: '', from_addr: '', use_tls: true });
+const emailDefault = () => ({
+  smtp_host: '',
+  smtp_port: 465,
+  smtp_user: '',
+  smtp_password: '',
+  from_addr: '',
+  use_tls: true,
+});
 
 const configDefaults: Record<ChannelType, () => Record<string, any>> = {
   dingtalk: dingtalkDefault,
@@ -65,7 +72,7 @@ export default function NotificationPage() {
   /* test */
   const [testingId, setTestingId] = useState<number | null>(null);
   const [testResult, setTestResult] = useState<Record<number, { success: boolean; message: string } | null>>({});
-  const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ msg: string; onConfirm: () => void } | null>(null);
 
   const fetchList = useCallback(async () => {
     try {
@@ -97,11 +104,11 @@ export default function NotificationPage() {
   };
 
   const handleTypeChange = (t: ChannelType) => {
-    setForm(prev => ({ ...prev, channel_type: t, config: configDefaults[t]() }));
+    setForm((prev) => ({ ...prev, channel_type: t, config: configDefaults[t]() }));
   };
 
   const updateConfig = (key: string, value: any) => {
-    setForm(prev => ({ ...prev, config: { ...prev.config, [key]: value } }));
+    setForm((prev) => ({ ...prev, config: { ...prev.config, [key]: value } }));
   };
 
   const handleSave = async () => {
@@ -132,25 +139,33 @@ export default function NotificationPage() {
   };
 
   const handleDelete = async (id: number) => {
-    setDeleteConfirm({msg: '确定删除此通知渠道？', onConfirm: async () => { try { await request.delete(`/notifications/${id}`); fetchList(); } catch {} }}); 
+    setDeleteConfirm({
+      msg: '确定删除此通知渠道？',
+      onConfirm: async () => {
+        try {
+          await request.delete(`/notifications/${id}`);
+          fetchList();
+        } catch {}
+      },
+    });
     return;
   };
 
   const handleTest = async (id: number) => {
     try {
       setTestingId(id);
-      setTestResult(prev => ({ ...prev, [id]: null }));
+      setTestResult((prev) => ({ ...prev, [id]: null }));
       const res = await request.post(`/notifications/${id}/test`);
       const data = (res as any).data ?? res;
-      setTestResult(prev => ({ ...prev, [id]: { success: true, message: data.message || '测试成功' } }));
+      setTestResult((prev) => ({ ...prev, [id]: { success: true, message: data.message || '测试成功' } }));
     } catch (err: any) {
-      setTestResult(prev => ({
+      setTestResult((prev) => ({
         ...prev,
         [id]: { success: false, message: err.response?.data?.detail || '测试失败' },
       }));
     } finally {
       setTestingId(null);
-      setTimeout(() => setTestResult(prev => ({ ...prev, [id]: null })), 5000);
+      setTimeout(() => setTestResult((prev) => ({ ...prev, [id]: null })), 5000);
     }
   };
 
@@ -161,11 +176,13 @@ export default function NotificationPage() {
       return (
         <>
           <div>
-            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">Webhook URL <span className="text-red-400">*</span></label>
+            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">
+              Webhook URL <span className="text-red-400">*</span>
+            </label>
             <input
               type="text"
               value={form.config.webhook_url || ''}
-              onChange={e => updateConfig('webhook_url', e.target.value)}
+              onChange={(e) => updateConfig('webhook_url', e.target.value)}
               className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
               placeholder="https://oapi.dingtalk.com/robot/send?access_token=..."
             />
@@ -175,7 +192,7 @@ export default function NotificationPage() {
             <input
               type="text"
               value={form.config.secret || ''}
-              onChange={e => updateConfig('secret', e.target.value)}
+              onChange={(e) => updateConfig('secret', e.target.value)}
               className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
               placeholder="可选，加签密钥"
             />
@@ -186,11 +203,13 @@ export default function NotificationPage() {
     if (t === 'webhook_feishu') {
       return (
         <div>
-          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">Webhook URL <span className="text-red-400">*</span></label>
+          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">
+            Webhook URL <span className="text-red-400">*</span>
+          </label>
           <input
             type="text"
             value={form.config.webhook_url || ''}
-            onChange={e => updateConfig('webhook_url', e.target.value)}
+            onChange={(e) => updateConfig('webhook_url', e.target.value)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
             placeholder="https://open.feishu.cn/open-apis/bot/v2/hook/..."
           />
@@ -201,11 +220,13 @@ export default function NotificationPage() {
     return (
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">SMTP 服务器 <span className="text-red-400">*</span></label>
+          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">
+            SMTP 服务器 <span className="text-red-400">*</span>
+          </label>
           <input
             type="text"
             value={form.config.smtp_host || ''}
-            onChange={e => updateConfig('smtp_host', e.target.value)}
+            onChange={(e) => updateConfig('smtp_host', e.target.value)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
             placeholder="smtp.example.com"
           />
@@ -215,16 +236,18 @@ export default function NotificationPage() {
           <input
             type="number"
             value={form.config.smtp_port || 465}
-            onChange={e => updateConfig('smtp_port', parseInt(e.target.value) || 465)}
+            onChange={(e) => updateConfig('smtp_port', parseInt(e.target.value) || 465)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
           />
         </div>
         <div>
-          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">SMTP 用户 <span className="text-red-400">*</span></label>
+          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">
+            SMTP 用户 <span className="text-red-400">*</span>
+          </label>
           <input
             type="text"
             value={form.config.smtp_user || ''}
-            onChange={e => updateConfig('smtp_user', e.target.value)}
+            onChange={(e) => updateConfig('smtp_user', e.target.value)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
             placeholder="noreply@example.com"
           />
@@ -234,17 +257,19 @@ export default function NotificationPage() {
           <input
             type="password"
             value={form.config.smtp_password || ''}
-            onChange={e => updateConfig('smtp_password', e.target.value)}
+            onChange={(e) => updateConfig('smtp_password', e.target.value)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
             placeholder="••••••••"
           />
         </div>
         <div>
-          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">发件地址 <span className="text-red-400">*</span></label>
+          <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">
+            发件地址 <span className="text-red-400">*</span>
+          </label>
           <input
             type="text"
             value={form.config.from_addr || ''}
-            onChange={e => updateConfig('from_addr', e.target.value)}
+            onChange={(e) => updateConfig('from_addr', e.target.value)}
             className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
             placeholder="noreply@example.com"
           />
@@ -293,12 +318,17 @@ export default function NotificationPage() {
         <div className="dg-card p-8 text-center text-[var(--dg-text-muted)] text-sm">暂无通知渠道，点击右上角添加</div>
       ) : (
         <div className="space-y-3">
-          {channels.map(ch => {
+          {channels.map((ch) => {
             const Icon = CHANNEL_ICONS[ch.channel_type] || Settings;
             const result = testResult[ch.id];
             return (
-              <div key={ch.id} className={`dg-card px-5 py-4 flex items-center gap-4 ${!ch.is_enabled ? 'opacity-50' : ''}`}>
-                <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${ch.is_enabled ? 'bg-blue-500/15' : 'bg-[var(--dg-bg-tertiary)]'}`}>
+              <div
+                key={ch.id}
+                className={`dg-card px-5 py-4 flex items-center gap-4 ${!ch.is_enabled ? 'opacity-50' : ''}`}
+              >
+                <div
+                  className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${ch.is_enabled ? 'bg-blue-500/15' : 'bg-[var(--dg-bg-tertiary)]'}`}
+                >
                   <Icon className={`w-5 h-5 ${ch.is_enabled ? 'text-blue-400' : 'text-[var(--dg-text-muted)]'}`} />
                 </div>
                 <div className="flex-1 min-w-0">
@@ -307,7 +337,9 @@ export default function NotificationPage() {
                     <span className="text-[11px] px-2 py-0.5 rounded-full bg-blue-500/15 text-blue-400">
                       {CHANNEL_LABELS[ch.channel_type] || ch.channel_type}
                     </span>
-                    <span className={`text-[11px] px-2 py-0.5 rounded-full ${ch.is_enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
+                    <span
+                      className={`text-[11px] px-2 py-0.5 rounded-full ${ch.is_enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}
+                    >
                       {ch.is_enabled ? '已启用' : '已禁用'}
                     </span>
                   </div>
@@ -335,11 +367,17 @@ export default function NotificationPage() {
                       result?.success
                         ? 'bg-green-500/15 text-green-400'
                         : result?.success === false
-                        ? 'bg-red-500/15 text-red-400'
-                        : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
+                          ? 'bg-red-500/15 text-red-400'
+                          : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
                     } disabled:opacity-50`}
                   >
-                    {testingId === ch.id ? '发送中…' : result?.success ? '✓ 成功' : result?.success === false ? '✗ 失败' : '测试'}
+                    {testingId === ch.id
+                      ? '发送中…'
+                      : result?.success
+                        ? '✓ 成功'
+                        : result?.success === false
+                          ? '✗ 失败'
+                          : '测试'}
                   </button>
                   <button
                     onClick={() => openEdit(ch)}
@@ -364,22 +402,23 @@ export default function NotificationPage() {
 
       {/* ── Create / Edit Modal ── */}
       {showModal && (
-        <ModalOverlay open={showModal} onClose={() => setShowModal(false)} width="max-w-2xl">
-          <div className="p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h3 className="text-xl font-semibold text-[var(--dg-text-primary)]">{editingId ? '编辑渠道' : '添加渠道'}</h3>
-              <button onClick={() => setShowModal(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)]">
-                <X className="w-5 h-5" />
-              </button>
+        <ModalOverlay open={showModal} onClose={() => setShowModal(false)} width="lg">
+          <div className="pt-1">
+            <div className="pb-5">
+              <h3 className="text-base font-semibold text-[var(--dg-text-primary)]">
+                {editingId ? '编辑渠道' : '添加渠道'}
+              </h3>
             </div>
 
             <div className="space-y-4">
               <div>
-                <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">渠道名称 <span className="text-red-400">*</span></label>
+                <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">
+                  渠道名称 <span className="text-red-400">*</span>
+                </label>
                 <input
                   type="text"
                   value={form.name}
-                  onChange={e => setForm(prev => ({ ...prev, name: e.target.value }))}
+                  onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
                   className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] focus:outline-none focus:border-[var(--dg-blue)]"
                   placeholder="例如：数据变更消息机器人"
                 />
@@ -414,7 +453,7 @@ export default function NotificationPage() {
               <div className="flex items-center gap-3 pt-2 border-t border-[var(--dg-border)]">
                 <button
                   type="button"
-                  onClick={() => setForm(prev => ({ ...prev, is_enabled: !prev.is_enabled }))}
+                  onClick={() => setForm((prev) => ({ ...prev, is_enabled: !prev.is_enabled }))}
                   className={`relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ${
                     form.is_enabled ? 'bg-[var(--dg-green)]' : 'bg-[var(--dg-bg-hover)]'
                   }`}
@@ -452,7 +491,10 @@ export default function NotificationPage() {
         title={deleteConfirm?.msg || '确认操作'}
         variant="danger"
         confirmText="确定"
-        onConfirm={() => { deleteConfirm?.onConfirm(); setDeleteConfirm(null); }}
+        onConfirm={() => {
+          deleteConfirm?.onConfirm();
+          setDeleteConfirm(null);
+        }}
         onCancel={() => setDeleteConfirm(null)}
       />
     </div>