From 98137418382ba51f0fb4924a4130c81eb6c901e6 Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Sun, 24 May 2026 23:34:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20SchemaSidebar=20=E5=8A=A0=E5=AE=BD=20+?=
 =?UTF-8?q?=20Redis=20key=20=E7=82=B9=E5=87=BB=E6=8F=92=E5=85=A5=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E5=91=BD=E4=BB=A4=E5=88=B0=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QueriesPage grid 从 1:3 改为 2:3，sidebar 更宽
- RedisTree 新增 onInsert prop，点击叶子节点自动插入对应命令
- redisCommand(): string→GET, hash→HGETALL, list→LRANGE, set→SMEMBERS, zset→ZRANGE
---
 frontend/src/components/SchemaSidebar.tsx | 20 ++++++++++++++++++--
 frontend/src/pages/QueriesPage.tsx        |  6 +++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/SchemaSidebar.tsx b/frontend/src/components/SchemaSidebar.tsx
index f1f4f16..01f676a 100644
--- a/frontend/src/components/SchemaSidebar.tsx
+++ b/frontend/src/components/SchemaSidebar.tsx
@@ -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>
diff --git a/frontend/src/pages/QueriesPage.tsx b/frontend/src/pages/QueriesPage.tsx
index 1a4bfd1..9f09f53 100644
--- a/frontend/src/pages/QueriesPage.tsx
+++ b/frontend/src/pages/QueriesPage.tsx
@@ -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}