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:
1 parent
2f76482eac
commit
9813741838
2 files changed
+21
-5
No files matched your search
@@ -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>
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in new issue
Block a user