feat: 查询页目标数据库改为下拉选择

- 选实例后自动加载该实例的数据库列表 (SHOW DATABASES)
- 手动输入框改为 select 下拉,选库更方便
- Redis/MongoDB 实例不显示数据库下拉
This commit is contained in:
logan committed 2026-05-24 15:54:33 +08:00
1 parent e6ab5bf496
commit aa2e26c827
1 file changed
+25 -3
+25 -3
View File
@@ -291,6 +291,8 @@ function NewQueryPanel({
const [sql, setSql] = useState(''); const [sql, setSql] = useState('');
const [instanceId, setInstanceId] = useState(''); const [instanceId, setInstanceId] = useState('');
const [database, setDatabase] = 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 [instances, setInstances] = useState<Array<{ id: number; name: string; host: string; port: number; db_type: string }>>([]);
const [executing, setExecuting] = useState(false); const [executing, setExecuting] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -312,6 +314,22 @@ function NewQueryPanel({
}).catch(() => { setInstances([]); }); }).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(() => { const selectedInstance = useMemo(() => {
return instances.find(inst => String(inst.id) === instanceId); return instances.find(inst => String(inst.id) === instanceId);
}, [instances, instanceId]); }, [instances, instanceId]);
@@ -558,12 +576,16 @@ function NewQueryPanel({
</div> </div>
<div> <div>
<label className="block text-sm font-medium mb-2">目标数据库</label> <label className="block text-sm font-medium mb-2">目标数据库</label>
<input <select
value={database} value={database}
onChange={e => setDatabase(e.target.value)} 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" 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>
</div> </div>