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 树形渲染组件 */ /** 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; tree: RedisTreeNode;
expanded: Set<string>; expanded: Set<string>;
setExpanded: React.Dispatch<React.SetStateAction<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; onSelectKey: (key: string) => void;
keyDetail: any; keyDetail: any;
loadingDetail: boolean; loadingDetail: boolean;
onInsert?: (cmd: string) => void;
}) { }) {
const toggle = (prefix: string) => { const toggle = (prefix: string) => {
setExpanded(prev => { setExpanded(prev => {
@@ -89,7 +101,10 @@ function RedisTree({ tree, expanded, setExpanded, selectedKey, onSelectKey, keyD
return ( return (
<div key={child.fullPrefix}> <div key={child.fullPrefix}>
<button <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 ${ 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)]' 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} onSelectKey={handleSelectKey}
keyDetail={keyDetail} keyDetail={keyDetail}
loadingDetail={loadingDetail} loadingDetail={loadingDetail}
onInsert={onInsert}
/> />
)} )}
</div> </div>
+3 -3
View File
@@ -709,10 +709,10 @@ function NewQueryPanel({
)} )}
{/* CodeMirror Editor + Schema Sidebar */} {/* 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 */} {/* Schema Sidebar */}
{showSidebar && instanceId && ( {showSidebar && instanceId && (
<div className="lg:col-span-1 h-[280px]"> <div className="lg:col-span-2 h-[280px]">
<SchemaSidebar <SchemaSidebar
instanceId={instanceId} instanceId={instanceId}
database={database} database={database}
@@ -722,7 +722,7 @@ function NewQueryPanel({
</div> </div>
)} )}
{/* Editor */} {/* 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"> <div className="dg-card overflow-hidden">
<SqlEditor <SqlEditor
value={sql} value={sql}