feat: 查询页目标数据库改为下拉选择
- 选实例后自动加载该实例的数据库列表 (SHOW DATABASES) - 手动输入框改为 select 下拉,选库更方便 - Redis/MongoDB 实例不显示数据库下拉
This commit is contained in:
1 parent
e6ab5bf496
commit
aa2e26c827
1 file changed
+25
-3
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user