From aa2e26c827dff7c3e2a355cdca33b1bc153b0bd0 Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Sun, 24 May 2026 15:54:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=A5=E8=AF=A2=E9=A1=B5=E7=9B=AE?=
 =?UTF-8?q?=E6=A0=87=E6=95=B0=E6=8D=AE=E5=BA=93=E6=94=B9=E4=B8=BA=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 选实例后自动加载该实例的数据库列表 (SHOW DATABASES)
- 手动输入框改为 select 下拉，选库更方便
- Redis/MongoDB 实例不显示数据库下拉
---
 frontend/src/pages/QueriesPage.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/QueriesPage.tsx b/frontend/src/pages/QueriesPage.tsx
index ee5db62..c1b6bd9 100644
--- a/frontend/src/pages/QueriesPage.tsx
+++ b/frontend/src/pages/QueriesPage.tsx
@@ -291,6 +291,8 @@ function NewQueryPanel({
   const [sql, setSql] = useState('');
   const [instanceId, setInstanceId] = useState('');
   const [database, setDatabase] = useState('');
+  const [databases, setDatabases] = useState<string[]>([]);
+  const [loadingDbs, setLoadingDbs] = useState(false);
   const [instances, setInstances] = useState<Array<{ id: number; name: string; host: string; port: number; db_type: string }>>([]);
   const [executing, setExecuting] = useState(false);
   const [error, setError] = useState('');
@@ -312,6 +314,22 @@ function NewQueryPanel({
     }).catch(() => { setInstances([]); });
   }, []);
 
+  // 选实例后加载数据库列表
+  useEffect(() => {
+    if (!instanceId) { setDatabases([]); setDatabase(''); return; }
+    const inst = instances.find(i => String(i.id) === instanceId);
+    const type = inst?.db_type || '';
+    if (type === 'mysql' || type === 'postgres' || type === 'postgresql') {
+      setLoadingDbs(true);
+      instanceDetailApi.listDatabases(Number(instanceId))
+        .then(data => setDatabases(Array.isArray(data) ? data : []))
+        .catch(() => setDatabases([]))
+        .finally(() => setLoadingDbs(false));
+    } else {
+      setDatabases([]);
+    }
+  }, [instanceId, instances]);
+
   const selectedInstance = useMemo(() => {
     return instances.find(inst => String(inst.id) === instanceId);
   }, [instances, instanceId]);
@@ -558,12 +576,16 @@ function NewQueryPanel({
         </div>
         <div>
           <label className="block text-sm font-medium mb-2">目标数据库</label>
-          <input
+          <select
             value={database}
             onChange={e => setDatabase(e.target.value)}
             className="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"
-            placeholder="可选，默认数据库"
-          />
+          >
+            <option value="">{loadingDbs ? '加载中...' : databases.length > 0 ? '请选择数据库（可选）' : '选择实例后可选'}</option>
+            {databases.map(db => (
+              <option key={db} value={db}>{db}</option>
+            ))}
+          </select>
         </div>
       </div>