From b5739ba955e7702ae6f2e5c7dff366620756fcee Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Wed, 27 May 2026 21:42:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9D=83=E9=99=90=E7=AD=96=E7=95=A5?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E8=BE=93=E5=85=A5=E6=A1=86=E5=A4=B1=E7=84=A6?=
 =?UTF-8?q?=20=E2=80=94=20FormModal=E4=BB=8E=E5=86=85=E8=81=94=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E7=BB=84=E4=BB=B6=E6=94=B9=E4=B8=BA=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?JSX=E5=86=85=E8=81=94=EF=BC=8C=E9=81=BF=E5=85=8Dstate=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=AF=BC=E8=87=B4DOM=E9=87=8D=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/InstanceGroupPage.tsx | 108 +++++++++++------------
 1 file changed, 51 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/InstanceGroupPage.tsx b/frontend/src/pages/InstanceGroupPage.tsx
index cf3fe70..373155d 100644
--- a/frontend/src/pages/InstanceGroupPage.tsx
+++ b/frontend/src/pages/InstanceGroupPage.tsx
@@ -254,61 +254,10 @@ export default function InstanceGroupPage() {
     );
   };
 
-  /* ── Form Modal (shared by create & edit) ── */
-  const FormModal = ({ mode }: { mode: 'create' | 'edit' }) => {
-    const show = mode === 'create' ? showCreateModal : showEditModal;
-    const close = () => { setShowCreateModal(false); setShowEditModal(false); resetForm(); };
-    const submit = mode === 'create' ? handleCreate : handleEdit;
-    return show ? (
-      <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[5vh] bg-black/60 backdrop-blur-sm">
-        <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)]" onClick={e => e.stopPropagation()}>
-          <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--dg-border)]">
-            <h3 className="text-lg font-semibold">{mode === 'create' ? '新建权限策略' : '编辑权限策略'}</h3>
-            <button onClick={close} 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>
-          </div>
-          <div className="overflow-y-auto px-6 py-5 space-y-5 flex-1">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-1.5">策略名称 <span className="text-red-400">*</span></label>
-                <input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产数据库权限" />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-1.5">描述</label>
-                <input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" />
-              </div>
-            </div>
-
-            {/* Readonly Transfer */}
-            <div className="rounded-xl p-4 bg-emerald-500/5 border border-emerald-500/20">
-              <div className="flex items-center gap-2 mb-3">
-                <Eye className="w-4 h-4 text-emerald-400" />
-                <span className="text-sm font-medium text-emerald-400">查询授权</span>
-                <span className="text-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
-              </div>
-              <Transfer title="只读实例" items={readonlyTransferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
-            </div>
-
-            {/* Write Transfer */}
-            <div className="rounded-xl p-4 bg-amber-500/5 border border-amber-500/20">
-              <div className="flex items-center gap-2 mb-3">
-                <PenLine className="w-4 h-4 text-amber-400" />
-                <span className="text-sm font-medium text-amber-400">变更授权</span>
-                <span className="text-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
-              </div>
-              <Transfer title="写入实例" items={writeTransferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
-            </div>
-
-            <div className="flex justify-end gap-3 pt-2">
-              <button onClick={close} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors rounded-lg hover:bg-[var(--dg-bg-hover)]">取消</button>
-              <button onClick={submit} disabled={!formName.trim()} className="dg-btn dg-btn-primary disabled:opacity-50">
-                {mode === 'create' ? '创建' : '保存'}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    ) : null;
-  };
+  /* ── Form Modal shared close/submit ── */
+  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 (
     <div className="space-y-5">
@@ -439,8 +388,53 @@ export default function InstanceGroupPage() {
       </div>
 
       {/* Form Modal (create & edit) */}
-      <FormModal mode="create" />
-      <FormModal mode="edit" />
+      {formMode && (
+        <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[5vh] bg-black/60 backdrop-blur-sm">
+          <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)]" onClick={e => e.stopPropagation()}>
+            <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>
+            </div>
+            <div className="overflow-y-auto px-6 py-5 space-y-5 flex-1">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1.5">策略名称 <span className="text-red-400">*</span></label>
+                  <input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formName} onChange={e => setFormName(e.target.value)} placeholder="如：生产数据库权限" />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1.5">描述</label>
+                  <input className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" />
+                </div>
+              </div>
+
+              <div className="rounded-xl p-4 bg-emerald-500/5 border border-emerald-500/20">
+                <div className="flex items-center gap-2 mb-3">
+                  <Eye className="w-4 h-4 text-emerald-400" />
+                  <span className="text-sm font-medium text-emerald-400">查询授权</span>
+                  <span className="text-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
+                </div>
+                <Transfer title="只读实例" items={readonlyTransferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
+              </div>
+
+              <div className="rounded-xl p-4 bg-amber-500/5 border border-amber-500/20">
+                <div className="flex items-center gap-2 mb-3">
+                  <PenLine className="w-4 h-4 text-amber-400" />
+                  <span className="text-sm font-medium text-amber-400">变更授权</span>
+                  <span className="text-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
+                </div>
+                <Transfer title="写入实例" items={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">
+                  {formMode === 'create' ? '创建' : '保存'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
 
       <ConfirmDialog
         open={!!deleteConfirm}