feat: SchemaSidebar 加宽 + Redis key 点击插入查询命令到编辑器

- QueriesPage grid 从 1:3 改为 2:3,sidebar 更宽
- RedisTree 新增 onInsert prop,点击叶子节点自动插入对应命令
- redisCommand(): string→GET, hash→HGETALL, list→LRANGE, set→SMEMBERS, zset→ZRANGE
This commit is contained in:
logan committed 2026-05-24 23:34:27 +08:00
1 parent 2f76482eac
commit 9813741838
2 files changed
+21 -5

No files matched your search

+18 -2
View File
@@ -57,7 +57,18 @@ function buildRedisTree(keys: RedisKeyItem[]): RedisTreeNode {
}
/** Redis 树形渲染组件 */
function RedisTree({ tree, expanded, setExpanded, selectedKey, onSelectKey, keyDetail, loadingDetail }: {
/** 根据 key type 生成查询命令 */
function redisCommand(key: string, type: string): string {
switch (type) {
case 'hash': return `HGETALL ${key}`;
case 'list': return `LRANGE ${key} 0 -1`;
case 'set': return `SMEMBERS ${key}`;
case 'zset': return `ZRANGE ${key} 0 -1 WITHSCORES`;
default: return `GET ${key}`;
}
}
function RedisTree({ tree, expanded, setExpanded, selectedKey, onSelectKey, keyDetail, loadingDetail, onInsert }: {
tree: RedisTreeNode;
expanded: Set<string>;
setExpanded: React.Dispatch<React.SetStateAction<Set<string>>>;
@@ -65,6 +76,7 @@ function RedisTree({ tree, expanded, setExpanded, selectedKey, onSelectKey, keyD
onSelectKey: (key: string) => void;
keyDetail: any;
loadingDetail: boolean;
onInsert?: (cmd: string) => void;
}) {
const toggle = (prefix: string) => {
setExpanded(prev => {
@@ -89,7 +101,10 @@ function RedisTree({ tree, expanded, setExpanded, selectedKey, onSelectKey, keyD
return (
<div key={child.fullPrefix}>
<button
onClick={() => onSelectKey(child.keyItem!.key)}
onClick={() => {
onSelectKey(child.keyItem!.key);
if (onInsert) onInsert(redisCommand(child.keyItem!.key, child.keyItem!.type));
}}
className={`flex items-center gap-1.5 w-full px-2 py-1 text-xs transition-colors ${
selectedKey === child.keyItem!.key ? 'bg-blue-500/10 text-blue-400' : 'hover:bg-[var(--dg-bg-hover)]'
}`}
@@ -587,6 +602,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
onSelectKey={handleSelectKey}
keyDetail={keyDetail}
loadingDetail={loadingDetail}
onInsert={onInsert}
/>
)}
</div>
+3 -3
View File
@@ -709,10 +709,10 @@ function NewQueryPanel({
)}
{/* CodeMirror Editor + Schema Sidebar */}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
{/* Schema Sidebar */}
{showSidebar && instanceId && (
<div className="lg:col-span-1 h-[280px]">
<div className="lg:col-span-2 h-[280px]">
<SchemaSidebar
instanceId={instanceId}
database={database}
@@ -722,7 +722,7 @@ function NewQueryPanel({
</div>
)}
{/* Editor */}
<div className={showSidebar && instanceId ? 'lg:col-span-3' : 'lg:col-span-4'}>
<div className={showSidebar && instanceId ? 'lg:col-span-3' : 'lg:col-span-5'}>
<div className="dg-card overflow-hidden">
<SqlEditor
value={sql}