+
已启用大数据量性能模式（简化节点渲染，最多保留 {REDIS_LARGE_KEYSPACE_MAX_EXPANDED_GROUPS} 个展开分组）
)}
-
+
+ 命名空间 / Key
+ 类型 / TTL
+
+
null}
checkable
checkStrictly
selectable
@@ -1943,14 +2114,15 @@ const RedisViewer: React.FC = ({ connectionId, redisDB }) => {
expandedKeys={expandedGroupKeys}
onExpand={handleTreeExpand}
onSelect={(nodeKeys) => handleTreeSelect(nodeKeys)}
- onCheck={(checked) => handleTreeCheck(checked)}
+ onCheck={(checked, info) => handleTreeCheck(checked, info)}
+ onRightClick={handleTreeRightClick}
style={{ padding: '8px 6px' }}
/>
{hasMore && (
-
@@ -1962,7 +2134,7 @@ const RedisViewer: React.FC
= ({ connectionId, redisDB }) => {
{/* Right: Value Viewer */}
{valueLoading ? (
-
加载中...
+
加载中...
) : (
renderValueEditor()
)}
@@ -1975,7 +2147,7 @@ const RedisViewer: React.FC
= ({ connectionId, redisDB }) => {
onOk={handleSaveString}
onCancel={() => setEditModalOpen(false)}
width={800}
- styles={{ body: { height: 500 } }}
+ styles={{ content: redisModalContentStyle, header: { background: 'transparent', borderBottom: 'none', color: workbenchTheme.textPrimary }, body: { height: 500, paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none' } }}
>
= ({ connectionId, redisDB }) => {
open={newKeyModalOpen}
onOk={handleCreateKey}
onCancel={() => setNewKeyModalOpen(false)}
+ styles={{ content: redisModalContentStyle, header: { background: 'transparent', borderBottom: 'none', color: workbenchTheme.textPrimary }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none' } }}
>
-
+
{icon}
-
{title}
-
{description}
+
{title}
+
{description}
);
@@ -2535,12 +2535,10 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
const searchScopePopoverContent = useMemo(() => {
const smartSelected = searchScopes.includes('smart');
const scopedOptions = SEARCH_SCOPE_OPTIONS.filter((option) => option.value !== 'smart');
- const borderColor = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)';
- const mutedTextColor = darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)';
- const titleColor = darkMode ? 'rgba(255,255,255,0.92)' : '#162033';
- const panelBg = darkMode
- ? 'linear-gradient(180deg, rgba(17,24,39,0.96) 0%, rgba(10,15,26,0.98) 100%)'
- : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)';
+ const borderColor = overlayTheme.sectionBorder.replace('1px solid ', '');
+ const mutedTextColor = overlayTheme.mutedText;
+ const titleColor = overlayTheme.titleText;
+ const panelBg = overlayTheme.shellBg;
const smartBg = smartSelected
? (darkMode ? 'linear-gradient(135deg, rgba(255,214,102,0.22) 0%, rgba(255,179,71,0.16) 100%)' : 'linear-gradient(135deg, rgba(255,214,102,0.26) 0%, rgba(255,244,204,0.92) 100%)')
: (darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.72)');
@@ -2591,7 +2589,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
手动范围
@@ -2628,7 +2626,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
);
- }, [darkMode, searchScopes]);
+ }, [darkMode, overlayTheme, searchScopes]);
const parseHostOnlyToken = (value: unknown): string[] => {
const raw = String(value || '').trim();
diff --git a/frontend/src/components/redisViewerTree.test.ts b/frontend/src/components/redisViewerTree.test.ts
new file mode 100644
index 0000000..0db9242
--- /dev/null
+++ b/frontend/src/components/redisViewerTree.test.ts
@@ -0,0 +1,105 @@
+import type { RedisKeyInfo } from '../types';
+import {
+ applyRenamedRedisKeyState,
+ applyTreeNodeCheck,
+ buildCheckedTreeNodeState,
+ buildRedisKeyTree,
+ isGroupFullyChecked,
+} from './redisViewerTree';
+
+const assert = (condition: unknown, message: string) => {
+ if (!condition) {
+ throw new Error(message);
+ }
+};
+
+const assertEqual = (actual: unknown, expected: unknown, message: string) => {
+ const actualText = JSON.stringify(actual);
+ const expectedText = JSON.stringify(expected);
+ if (actualText !== expectedText) {
+ throw new Error(`${message}\nactual: ${actualText}\nexpected: ${expectedText}`);
+ }
+};
+
+const sampleKeys: RedisKeyInfo[] = [
+ { key: 'app:user:1', type: 'string', ttl: -1 },
+ { key: 'app:user:2', type: 'string', ttl: -1 },
+ { key: 'app:order:1', type: 'hash', ttl: 120 },
+ { key: 'misc', type: 'set', ttl: -1 },
+];
+
+const tree = buildRedisKeyTree(sampleKeys, true);
+const appGroup = tree.treeData.find((node) => node.key === 'group:app');
+const userGroup = appGroup?.children?.find((node) => node.key === 'group:app:user');
+
+assert(appGroup, '应生成 group:app 节点');
+assert(userGroup, '应生成 group:app:user 节点');
+assertEqual(
+ appGroup?.descendantRawKeys,
+ ['app:order:1', 'app:user:1', 'app:user:2'],
+ 'app 分组应收集全部后代 key'
+);
+
+const selectedAfterGroupCheck = applyTreeNodeCheck([], appGroup!, true);
+assertEqual(
+ selectedAfterGroupCheck,
+ ['app:order:1', 'app:user:1', 'app:user:2'],
+ '勾选分组应递归选中全部后代 key'
+);
+
+const checkedState = buildCheckedTreeNodeState(selectedAfterGroupCheck, tree);
+assertEqual(
+ checkedState.checked,
+ ['key:app:order:1', 'group:app:order', 'key:app:user:1', 'key:app:user:2', 'group:app:user', 'group:app'],
+ '全部后代已选中时，父分组和叶子都应进入 checked'
+);
+assertEqual(checkedState.halfChecked, [], '全部后代已选中时不应有 halfChecked');
+assertEqual(isGroupFullyChecked(appGroup!, selectedAfterGroupCheck), true, '全部后代已选中时，分组应视为 fully checked');
+
+const selectedAfterGroupUncheck = applyTreeNodeCheck(selectedAfterGroupCheck, appGroup!, false);
+assertEqual(selectedAfterGroupUncheck, [], '取消勾选分组应移除全部后代 key');
+assertEqual(isGroupFullyChecked(appGroup!, selectedAfterGroupUncheck), false, '取消后分组不应再是 fully checked');
+
+const partialState = buildCheckedTreeNodeState(['app:user:1'], tree);
+assertEqual(
+ partialState.halfChecked,
+ ['group:app:user', 'group:app'],
+ '仅部分后代选中时，相关分组应进入 halfChecked'
+);
+assertEqual(isGroupFullyChecked(appGroup!, ['app:user:1']), false, '部分选中时分组不应是 fully checked');
+
+const renamedState = applyRenamedRedisKeyState(
+ {
+ keys: sampleKeys,
+ selectedKey: 'app:user:2',
+ selectedKeys: ['app:user:1', 'app:user:2', 'misc'],
+ },
+ 'app:user:2',
+ 'app:user:200'
+);
+
+assertEqual(
+ renamedState.keys.map((item) => item.key),
+ ['app:user:1', 'app:user:200', 'app:order:1', 'misc'],
+ '重命名后 keys 列表应替换旧 key'
+);
+assertEqual(renamedState.selectedKey, 'app:user:200', '当前详情选中的 key 应切换为新 key');
+assertEqual(
+ renamedState.selectedKeys,
+ ['app:user:1', 'app:user:200', 'misc'],
+ '批量选中集合中的旧 key 应映射为新 key'
+);
+
+const unrelatedRenameState = applyRenamedRedisKeyState(
+ {
+ keys: sampleKeys,
+ selectedKey: 'misc',
+ selectedKeys: ['app:user:1'],
+ },
+ 'app:order:1',
+ 'app:order:9'
+);
+assertEqual(unrelatedRenameState.selectedKey, 'misc', '非当前详情 key 的重命名不应影响 selectedKey');
+assertEqual(unrelatedRenameState.selectedKeys, ['app:user:1'], '非已勾选 key 的重命名不应污染选中集合');
+
+console.log('redisViewerTree tests passed');
diff --git a/frontend/src/components/redisViewerTree.ts b/frontend/src/components/redisViewerTree.ts
new file mode 100644
index 0000000..07fb325
--- /dev/null
+++ b/frontend/src/components/redisViewerTree.ts
@@ -0,0 +1,260 @@
+import type { DataNode } from 'antd/es/tree';
+import type { RedisKeyInfo } from '../types';
+
+const KEY_GROUP_DELIMITER = ':';
+const EMPTY_SEGMENT_LABEL = '(empty)';
+
+type RedisKeyTreeLeaf = {
+ keyInfo: RedisKeyInfo;
+ label: string;
+};
+
+type RedisKeyTreeGroup = {
+ name: string;
+ path: string;
+ children: Map
;
+ leaves: RedisKeyTreeLeaf[];
+ leafCount: number;
+};
+
+export type RedisTreeDataNode = DataNode & {
+ nodeType: 'group' | 'leaf';
+ groupName?: string;
+ groupLeafCount?: number;
+ leafLabel?: string;
+ rawKey?: string;
+ keyType?: string;
+ ttl?: number;
+ descendantRawKeys?: string[];
+};
+
+export type RedisKeyTreeResult = {
+ treeData: RedisTreeDataNode[];
+ groupKeys: string[];
+};
+
+export type RedisTreeCheckedState = {
+ checked: string[];
+ halfChecked: string[];
+};
+
+export type RenamedRedisKeyStateInput = {
+ keys: RedisKeyInfo[];
+ selectedKey: string | null;
+ selectedKeys: string[];
+};
+
+export type RenamedRedisKeyStateResult = {
+ keys: RedisKeyInfo[];
+ selectedKey: string | null;
+ selectedKeys: string[];
+};
+
+const normalizeKeySegment = (segment: string): string => {
+ return segment === '' ? EMPTY_SEGMENT_LABEL : segment;
+};
+
+const createTreeGroup = (name: string, path: string): RedisKeyTreeGroup => {
+ return { name, path, children: new Map(), leaves: [], leafCount: 0 };
+};
+
+const calculateGroupLeafCount = (group: RedisKeyTreeGroup): number => {
+ let count = group.leaves.length;
+ group.children.forEach((child) => {
+ count += calculateGroupLeafCount(child);
+ });
+ group.leafCount = count;
+ return count;
+};
+
+export const buildLeafNodeKey = (rawKey: string): string => `key:${rawKey}`;
+
+export const parseRawKeyFromNodeKey = (nodeKey: React.Key): string | null => {
+ const keyText = String(nodeKey);
+ if (!keyText.startsWith('key:')) {
+ return null;
+ }
+ return keyText.slice(4);
+};
+
+export const buildRedisKeyTree = (
+ keys: RedisKeyInfo[],
+ sortLeafNodes: boolean
+): RedisKeyTreeResult => {
+ const root = createTreeGroup('__root__', '__root__');
+
+ keys.forEach((keyInfo) => {
+ const segments = keyInfo.key.split(KEY_GROUP_DELIMITER);
+ if (segments.length <= 1) {
+ root.leaves.push({ keyInfo, label: keyInfo.key });
+ return;
+ }
+
+ const groupSegments = segments.slice(0, -1);
+ const leafLabel = normalizeKeySegment(segments[segments.length - 1]);
+ let current = root;
+ const pathParts: string[] = [];
+
+ groupSegments.forEach((segment) => {
+ const normalized = normalizeKeySegment(segment);
+ pathParts.push(normalized);
+ const groupPath = pathParts.join(KEY_GROUP_DELIMITER);
+ let child = current.children.get(normalized);
+ if (!child) {
+ child = createTreeGroup(normalized, groupPath);
+ current.children.set(normalized, child);
+ }
+ current = child;
+ });
+
+ current.leaves.push({ keyInfo, label: leafLabel });
+ });
+
+ calculateGroupLeafCount(root);
+ const groupKeys: string[] = [];
+
+ const toTreeNodes = (group: RedisKeyTreeGroup): RedisTreeDataNode[] => {
+ const childGroups = Array.from(group.children.values()).sort((a, b) => a.name.localeCompare(b.name));
+ const childLeaves = sortLeafNodes
+ ? [...group.leaves].sort((a, b) => a.keyInfo.key.localeCompare(b.keyInfo.key))
+ : group.leaves;
+
+ const groupNodes: RedisTreeDataNode[] = childGroups.map((child) => {
+ const children = toTreeNodes(child);
+ const descendantRawKeys = children.flatMap((node) => {
+ if (node.nodeType === 'leaf') {
+ return node.rawKey ? [node.rawKey] : [];
+ }
+ return node.descendantRawKeys || [];
+ });
+ const groupNodeKey = `group:${child.path}`;
+ groupKeys.push(groupNodeKey);
+ return {
+ key: groupNodeKey,
+ title: child.name,
+ nodeType: 'group',
+ groupName: child.name,
+ groupLeafCount: child.leafCount,
+ selectable: false,
+ descendantRawKeys,
+ children,
+ };
+ });
+
+ const leafNodes: RedisTreeDataNode[] = childLeaves.map((leaf) => {
+ return {
+ key: buildLeafNodeKey(leaf.keyInfo.key),
+ isLeaf: true,
+ title: leaf.label,
+ nodeType: 'leaf',
+ leafLabel: leaf.label,
+ rawKey: leaf.keyInfo.key,
+ keyType: leaf.keyInfo.type,
+ ttl: leaf.keyInfo.ttl,
+ };
+ });
+
+ return [...groupNodes, ...leafNodes];
+ };
+
+ return {
+ treeData: toTreeNodes(root),
+ groupKeys,
+ };
+};
+
+export const applyTreeNodeCheck = (
+ selectedKeys: string[],
+ node: RedisTreeDataNode,
+ checked: boolean
+): string[] => {
+ if (node.nodeType === 'leaf') {
+ if (!node.rawKey) {
+ return selectedKeys;
+ }
+ if (checked) {
+ return Array.from(new Set([...selectedKeys, node.rawKey]));
+ }
+ return selectedKeys.filter((item) => item !== node.rawKey);
+ }
+
+ const descendantRawKeys = node.descendantRawKeys || [];
+ if (descendantRawKeys.length === 0) {
+ return selectedKeys;
+ }
+ if (checked) {
+ return Array.from(new Set([...selectedKeys, ...descendantRawKeys]));
+ }
+ const removeSet = new Set(descendantRawKeys);
+ return selectedKeys.filter((item) => !removeSet.has(item));
+};
+
+const walkGroupStates = (
+ nodes: RedisTreeDataNode[],
+ selectedKeySet: Set,
+ checked: string[],
+ halfChecked: string[]
+) => {
+ nodes.forEach((node) => {
+ if (node.nodeType === 'leaf') {
+ if (node.rawKey && selectedKeySet.has(node.rawKey)) {
+ checked.push(String(node.key));
+ }
+ return;
+ }
+
+ walkGroupStates((node.children || []) as RedisTreeDataNode[], selectedKeySet, checked, halfChecked);
+ const descendantRawKeys = node.descendantRawKeys || [];
+ if (descendantRawKeys.length === 0) {
+ return;
+ }
+
+ const selectedCount = descendantRawKeys.filter((rawKey) => selectedKeySet.has(rawKey)).length;
+ if (selectedCount === descendantRawKeys.length) {
+ checked.push(String(node.key));
+ return;
+ }
+ if (selectedCount > 0) {
+ halfChecked.push(String(node.key));
+ }
+ });
+};
+
+export const buildCheckedTreeNodeState = (
+ selectedKeys: string[],
+ keyTree: RedisKeyTreeResult
+): RedisTreeCheckedState => {
+ const selectedKeySet = new Set(selectedKeys);
+ const checked: string[] = [];
+ const halfChecked: string[] = [];
+
+ walkGroupStates(keyTree.treeData, selectedKeySet, checked, halfChecked);
+ return { checked, halfChecked };
+};
+
+export const isGroupFullyChecked = (
+ node: RedisTreeDataNode,
+ selectedKeys: string[]
+): boolean => {
+ if (node.nodeType !== 'group') {
+ return false;
+ }
+ const descendantRawKeys = node.descendantRawKeys || [];
+ if (descendantRawKeys.length === 0) {
+ return false;
+ }
+ const selectedKeySet = new Set(selectedKeys);
+ return descendantRawKeys.every((rawKey) => selectedKeySet.has(rawKey));
+};
+
+export const applyRenamedRedisKeyState = (
+ state: RenamedRedisKeyStateInput,
+ oldKey: string,
+ newKey: string
+): RenamedRedisKeyStateResult => {
+ return {
+ keys: state.keys.map((item) => (item.key === oldKey ? { ...item, key: newKey } : item)),
+ selectedKey: state.selectedKey === oldKey ? newKey : state.selectedKey,
+ selectedKeys: state.selectedKeys.map((item) => (item === oldKey ? newKey : item)),
+ };
+};
diff --git a/frontend/src/components/redisViewerWorkbenchTheme.test.ts b/frontend/src/components/redisViewerWorkbenchTheme.test.ts
new file mode 100644
index 0000000..4ed9a5a
--- /dev/null
+++ b/frontend/src/components/redisViewerWorkbenchTheme.test.ts
@@ -0,0 +1,34 @@
+import { strict as assert } from 'node:assert';
+
+import { buildRedisWorkbenchTheme } from './redisViewerWorkbenchTheme';
+
+const darkTheme = buildRedisWorkbenchTheme({
+ darkMode: true,
+ opacity: 0.72,
+ blur: 14,
+});
+
+assert.equal(darkTheme.isDark, true);
+assert.match(darkTheme.panelBg, /^rgba\(/);
+assert.match(darkTheme.toolbarPrimaryBg, /^linear-gradient\(/);
+assert.notEqual(darkTheme.actionDangerBg, darkTheme.actionSecondaryBg);
+assert.notEqual(darkTheme.treeSelectedBg, darkTheme.treeHoverBg);
+assert.match(darkTheme.appBg, /rgba\(15, 15, 17,/);
+assert.match(darkTheme.panelBg, /rgba\(24, 24, 28,/);
+assert.match(darkTheme.panelBgStrong, /rgba\(31, 31, 36,/);
+assert.equal(darkTheme.backdropFilter, 'blur(14px)');
+
+const lightTheme = buildRedisWorkbenchTheme({
+ darkMode: false,
+ opacity: 1,
+ blur: 0,
+});
+
+assert.equal(lightTheme.isDark, false);
+assert.match(lightTheme.panelBg, /^rgba\(/);
+assert.match(lightTheme.contentEmptyBg, /^linear-gradient\(/);
+assert.notEqual(lightTheme.textPrimary, lightTheme.textSecondary);
+assert.notEqual(lightTheme.statusTagBg, lightTheme.statusTagMutedBg);
+assert.equal(lightTheme.backdropFilter, 'none');
+
+console.log('redisViewerWorkbenchTheme tests passed');
diff --git a/frontend/src/components/redisViewerWorkbenchTheme.ts b/frontend/src/components/redisViewerWorkbenchTheme.ts
new file mode 100644
index 0000000..9c24cf0
--- /dev/null
+++ b/frontend/src/components/redisViewerWorkbenchTheme.ts
@@ -0,0 +1,129 @@
+type RedisWorkbenchThemeInput = {
+ darkMode: boolean;
+ opacity: number;
+ blur: number;
+};
+
+type RedisWorkbenchTheme = {
+ isDark: boolean;
+ appBg: string;
+ panelBg: string;
+ panelBgStrong: string;
+ panelBgSubtle: string;
+ panelBorder: string;
+ panelInset: string;
+ toolbarPrimaryBg: string;
+ contentEmptyBg: string;
+ textPrimary: string;
+ textSecondary: string;
+ textMuted: string;
+ accent: string;
+ accentSoft: string;
+ accentBorder: string;
+ actionSecondaryBg: string;
+ actionSecondaryBorder: string;
+ actionDangerBg: string;
+ actionDangerBorder: string;
+ actionDangerText: string;
+ statusTagBg: string;
+ statusTagBorder: string;
+ statusTagMutedBg: string;
+ statusTagMutedBorder: string;
+ treeHoverBg: string;
+ treeSelectedBg: string;
+ treeSelectedBorder: string;
+ divider: string;
+ shadow: string;
+ backdropFilter: string;
+};
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+export const buildRedisWorkbenchTheme = ({
+ darkMode,
+ opacity,
+ blur,
+}: RedisWorkbenchThemeInput): RedisWorkbenchTheme => {
+ const normalizedOpacity = clamp(opacity, 0.1, 1);
+ const normalizedBlur = Math.max(0, Math.round(blur));
+ const isTranslucent = normalizedOpacity < 0.999 || normalizedBlur > 0;
+
+ if (darkMode) {
+ const appTopAlpha = isTranslucent ? Math.max(0.08, Math.min(0.22, normalizedOpacity * 0.16)) : 0.92;
+ const appBottomAlpha = isTranslucent ? Math.max(0.12, Math.min(0.28, normalizedOpacity * 0.22)) : 0.96;
+ const panelAlpha = isTranslucent ? Math.max(0.06, Math.min(0.16, normalizedOpacity * 0.1)) : 0.34;
+ const strongAlpha = isTranslucent ? Math.max(0.1, Math.min(0.22, normalizedOpacity * 0.16)) : 0.42;
+ const subtleAlpha = isTranslucent ? Math.max(0.03, Math.min(0.08, normalizedOpacity * 0.05)) : 0.08;
+ return {
+ isDark: true,
+ appBg: `linear-gradient(180deg, rgba(15, 15, 17, ${appTopAlpha}) 0%, rgba(11, 11, 13, ${appBottomAlpha}) 100%)`,
+ panelBg: `rgba(24, 24, 28, ${panelAlpha})`,
+ panelBgStrong: `rgba(31, 31, 36, ${strongAlpha})`,
+ panelBgSubtle: `rgba(255, 255, 255, ${subtleAlpha})`,
+ panelBorder: `1px solid rgba(255, 255, 255, ${isTranslucent ? Math.max(0.12, Math.min(0.24, normalizedOpacity * 0.2)) : 0.08})`,
+ panelInset: `inset 0 1px 0 rgba(255,255,255,${isTranslucent ? Math.max(0.05, Math.min(0.12, normalizedOpacity * 0.1)) : 0.04})`,
+ toolbarPrimaryBg: `linear-gradient(135deg, rgba(246,196,83,0.22) 0%, rgba(246,196,83,0.12) 100%)`,
+ contentEmptyBg: `linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.015) 100%)`,
+ textPrimary: 'rgba(245, 247, 251, 0.96)',
+ textSecondary: 'rgba(218, 224, 235, 0.82)',
+ textMuted: 'rgba(168, 177, 194, 0.72)',
+ accent: '#f6c453',
+ accentSoft: 'rgba(246, 196, 83, 0.18)',
+ accentBorder: 'rgba(246, 196, 83, 0.3)',
+ actionSecondaryBg: 'rgba(255, 255, 255, 0.04)',
+ actionSecondaryBorder: 'rgba(255, 255, 255, 0.09)',
+ actionDangerBg: 'rgba(255, 95, 95, 0.12)',
+ actionDangerBorder: 'rgba(255, 95, 95, 0.28)',
+ actionDangerText: '#ff8f8f',
+ statusTagBg: 'rgba(25, 106, 255, 0.16)',
+ statusTagBorder: 'rgba(25, 106, 255, 0.28)',
+ statusTagMutedBg: 'rgba(255, 255, 255, 0.04)',
+ statusTagMutedBorder: 'rgba(255, 255, 255, 0.08)',
+ treeHoverBg: 'rgba(255, 255, 255, 0.045)',
+ treeSelectedBg: 'linear-gradient(90deg, rgba(246,196,83,0.2) 0%, rgba(246,196,83,0.08) 100%)',
+ treeSelectedBorder: 'rgba(246, 196, 83, 0.24)',
+ divider: 'rgba(255, 255, 255, 0.07)',
+ shadow: '0 20px 48px rgba(0, 0, 0, 0.26)',
+ backdropFilter: normalizedBlur > 0 ? `blur(${normalizedBlur}px)` : 'none',
+ };
+ }
+
+ const appTopAlpha = isTranslucent ? Math.max(0.16, Math.min(0.36, normalizedOpacity * 0.24)) : 0.98;
+ const appBottomAlpha = isTranslucent ? Math.max(0.22, Math.min(0.44, normalizedOpacity * 0.32)) : 0.96;
+ const panelAlpha = isTranslucent ? Math.max(0.18, Math.min(0.4, normalizedOpacity * 0.26)) : 0.94;
+ const strongAlpha = isTranslucent ? Math.max(0.26, Math.min(0.52, normalizedOpacity * 0.34)) : 0.98;
+ return {
+ isDark: false,
+ appBg: `linear-gradient(180deg, rgba(248, 250, 252, ${appTopAlpha}) 0%, rgba(242, 245, 248, ${appBottomAlpha}) 100%)`,
+ panelBg: `rgba(255, 255, 255, ${panelAlpha})`,
+ panelBgStrong: `rgba(255, 255, 255, ${strongAlpha})`,
+ panelBgSubtle: 'rgba(15, 23, 42, 0.03)',
+ panelBorder: `1px solid rgba(15, 23, 42, ${isTranslucent ? Math.max(0.1, Math.min(0.18, normalizedOpacity * 0.12)) : 0.08})`,
+ panelInset: `inset 0 1px 0 rgba(255,255,255,${isTranslucent ? 0.38 : 0.72})`,
+ toolbarPrimaryBg: 'linear-gradient(135deg, rgba(22,119,255,0.12) 0%, rgba(22,119,255,0.06) 100%)',
+ contentEmptyBg: 'linear-gradient(180deg, rgba(15,23,42,0.02) 0%, rgba(15,23,42,0.01) 100%)',
+ textPrimary: 'rgba(15, 23, 42, 0.92)',
+ textSecondary: 'rgba(51, 65, 85, 0.82)',
+ textMuted: 'rgba(100, 116, 139, 0.76)',
+ accent: '#1677ff',
+ accentSoft: 'rgba(22, 119, 255, 0.12)',
+ accentBorder: 'rgba(22, 119, 255, 0.22)',
+ actionSecondaryBg: 'rgba(255, 255, 255, 0.72)',
+ actionSecondaryBorder: 'rgba(15, 23, 42, 0.08)',
+ actionDangerBg: 'rgba(255, 77, 79, 0.08)',
+ actionDangerBorder: 'rgba(255, 77, 79, 0.24)',
+ actionDangerText: '#cf1322',
+ statusTagBg: 'rgba(22, 119, 255, 0.1)',
+ statusTagBorder: 'rgba(22, 119, 255, 0.16)',
+ statusTagMutedBg: 'rgba(15, 23, 42, 0.04)',
+ statusTagMutedBorder: 'rgba(15, 23, 42, 0.08)',
+ treeHoverBg: 'rgba(15, 23, 42, 0.035)',
+ treeSelectedBg: 'linear-gradient(90deg, rgba(22,119,255,0.12) 0%, rgba(22,119,255,0.05) 100%)',
+ treeSelectedBorder: 'rgba(22, 119, 255, 0.18)',
+ divider: 'rgba(15, 23, 42, 0.08)',
+ shadow: '0 22px 52px rgba(15, 23, 42, 0.08)',
+ backdropFilter: normalizedBlur > 0 ? `blur(${normalizedBlur}px)` : 'none',
+ };
+};
+
+export type { RedisWorkbenchTheme, RedisWorkbenchThemeInput };
diff --git a/frontend/src/utils/overlayWorkbenchTheme.test.ts b/frontend/src/utils/overlayWorkbenchTheme.test.ts
new file mode 100644
index 0000000..1657759
--- /dev/null
+++ b/frontend/src/utils/overlayWorkbenchTheme.test.ts
@@ -0,0 +1,17 @@
+import { strict as assert } from 'node:assert';
+
+import { buildOverlayWorkbenchTheme } from './overlayWorkbenchTheme';
+
+const darkTheme = buildOverlayWorkbenchTheme(true);
+assert.equal(darkTheme.isDark, true);
+assert.match(darkTheme.shellBg, /rgba\(15, 15, 17,/);
+assert.match(darkTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.03\)/);
+assert.equal(darkTheme.iconColor, '#ffd666');
+
+const lightTheme = buildOverlayWorkbenchTheme(false);
+assert.equal(lightTheme.isDark, false);
+assert.match(lightTheme.shellBg, /rgba\(255,255,255,0\.98\)/);
+assert.match(lightTheme.sectionBg, /rgba\(255,?\s*255,?\s*255,?\s*0\.84\)/);
+assert.equal(lightTheme.iconColor, '#1677ff');
+
+console.log('overlayWorkbenchTheme tests passed');
diff --git a/frontend/src/utils/overlayWorkbenchTheme.ts b/frontend/src/utils/overlayWorkbenchTheme.ts
new file mode 100644
index 0000000..9fd09f1
--- /dev/null
+++ b/frontend/src/utils/overlayWorkbenchTheme.ts
@@ -0,0 +1,59 @@
+type OverlayWorkbenchTheme = {
+ isDark: boolean;
+ shellBg: string;
+ shellBorder: string;
+ shellShadow: string;
+ shellBackdropFilter: string;
+ sectionBg: string;
+ sectionBorder: string;
+ mutedText: string;
+ titleText: string;
+ iconBg: string;
+ iconColor: string;
+ hoverBg: string;
+ selectedBg: string;
+ selectedText: string;
+ divider: string;
+};
+
+export const buildOverlayWorkbenchTheme = (darkMode: boolean): OverlayWorkbenchTheme => {
+ if (darkMode) {
+ return {
+ isDark: true,
+ shellBg: 'linear-gradient(180deg, rgba(15, 15, 17, 0.96) 0%, rgba(11, 11, 13, 0.98) 100%)',
+ shellBorder: '1px solid rgba(255,255,255,0.08)',
+ shellShadow: '0 24px 56px rgba(0,0,0,0.34)',
+ shellBackdropFilter: 'blur(18px)',
+ sectionBg: 'rgba(255,255,255,0.03)',
+ sectionBorder: '1px solid rgba(255,255,255,0.08)',
+ mutedText: 'rgba(255,255,255,0.5)',
+ titleText: '#f5f7ff',
+ iconBg: 'rgba(255,214,102,0.12)',
+ iconColor: '#ffd666',
+ hoverBg: 'rgba(255,214,102,0.10)',
+ selectedBg: 'rgba(255,214,102,0.14)',
+ selectedText: '#ffd666',
+ divider: 'rgba(255,255,255,0.08)',
+ };
+ }
+
+ return {
+ isDark: false,
+ shellBg: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)',
+ shellBorder: '1px solid rgba(16,24,40,0.08)',
+ shellShadow: '0 18px 42px rgba(15,23,42,0.12)',
+ shellBackdropFilter: 'none',
+ sectionBg: 'rgba(255,255,255,0.84)',
+ sectionBorder: '1px solid rgba(16,24,40,0.08)',
+ mutedText: 'rgba(16,24,40,0.55)',
+ titleText: '#162033',
+ iconBg: 'rgba(24,144,255,0.1)',
+ iconColor: '#1677ff',
+ hoverBg: 'rgba(24,144,255,0.08)',
+ selectedBg: 'rgba(24,144,255,0.12)',
+ selectedText: '#1677ff',
+ divider: 'rgba(16,24,40,0.08)',
+ };
+};
+
+export type { OverlayWorkbenchTheme };
diff --git a/frontend/wailsjs/go/app/App.d.ts b/frontend/wailsjs/go/app/App.d.ts
index cc7c818..0dd7bc6 100755
--- a/frontend/wailsjs/go/app/App.d.ts
+++ b/frontend/wailsjs/go/app/App.d.ts
@@ -131,6 +131,8 @@ export function RedisGetServerInfo(arg1:connection.ConnectionConfig):Promise;
+export function RedisKeyExists(arg1:connection.ConnectionConfig,arg2:string):Promise;
+
export function RedisListPush(arg1:connection.ConnectionConfig,arg2:string,arg3:Array):Promise;
export function RedisListSet(arg1:connection.ConnectionConfig,arg2:string,arg3:number,arg4:string):Promise;
diff --git a/frontend/wailsjs/go/app/App.js b/frontend/wailsjs/go/app/App.js
index e2efe54..1ca5060 100755
--- a/frontend/wailsjs/go/app/App.js
+++ b/frontend/wailsjs/go/app/App.js
@@ -254,6 +254,10 @@ export function RedisGetValue(arg1, arg2) {
return window['go']['app']['App']['RedisGetValue'](arg1, arg2);
}
+export function RedisKeyExists(arg1, arg2) {
+ return window['go']['app']['App']['RedisKeyExists'](arg1, arg2);
+}
+
export function RedisListPush(arg1, arg2, arg3) {
return window['go']['app']['App']['RedisListPush'](arg1, arg2, arg3);
}
diff --git a/internal/app/methods_redis.go b/internal/app/methods_redis.go
index 3bf8956..8b4a0b0 100644
--- a/internal/app/methods_redis.go
+++ b/internal/app/methods_redis.go
@@ -453,6 +453,23 @@ func (a *App) RedisRenameKey(config connection.ConnectionConfig, oldKey, newKey
return connection.QueryResult{Success: true, Message: "重命名成功"}
}
+// RedisKeyExists checks whether a key already exists
+func (a *App) RedisKeyExists(config connection.ConnectionConfig, key string) connection.QueryResult {
+ config.Type = "redis"
+ client, err := a.getRedisClient(config)
+ if err != nil {
+ return connection.QueryResult{Success: false, Message: err.Error()}
+ }
+
+ exists, err := client.KeyExists(key)
+ if err != nil {
+ logger.Error(err, "RedisKeyExists 检查失败：key=%s", key)
+ return connection.QueryResult{Success: false, Message: err.Error()}
+ }
+
+ return connection.QueryResult{Success: true, Data: map[string]bool{"exists": exists}}
+}
+
// RedisDeleteHashField deletes fields from a hash
func (a *App) RedisDeleteHashField(config connection.ConnectionConfig, key string, fields []string) connection.QueryResult {
config.Type = "redis"
diff --git a/internal/redis/redis_impl.go b/internal/redis/redis_impl.go
index 93db691..2662979 100644
--- a/internal/redis/redis_impl.go
+++ b/internal/redis/redis_impl.go
@@ -3,6 +3,7 @@ package redis
import (
"context"
"crypto/tls"
+ "errors"
"fmt"
"net"
"net/url"
@@ -18,6 +19,8 @@ import (
"github.com/redis/go-redis/v9"
)
+var ErrRedisKeyGone = errors.New("Redis Key 不存在或已过期")
+
// RedisClientImpl implements RedisClient using go-redis
type RedisClientImpl struct {
client redis.UniversalClient
@@ -472,20 +475,29 @@ func (r *RedisClientImpl) loadRedisKeyInfos(ctx context.Context, keys []string)
if ttlErr != nil && ttlErr != redis.Nil {
ttlValue = -2
}
+ ttlSeconds := toRedisTTLSeconds(ttlValue)
+ if isRedisKeyGone(keyType, ttlSeconds) {
+ continue
+ }
result = append(result, RedisKeyInfo{
Key: r.toDisplayKey(key),
Type: keyType,
- TTL: toRedisTTLSeconds(ttlValue),
+ TTL: ttlSeconds,
})
}
return result
}
for i, key := range keys {
+ keyType := typeResults[i].Val()
+ ttlSeconds := toRedisTTLSeconds(ttlResults[i].Val())
+ if isRedisKeyGone(keyType, ttlSeconds) {
+ continue
+ }
result = append(result, RedisKeyInfo{
Key: r.toDisplayKey(key),
- Type: typeResults[i].Val(),
- TTL: toRedisTTLSeconds(ttlResults[i].Val()),
+ Type: keyType,
+ TTL: ttlSeconds,
})
}
return result
@@ -501,6 +513,17 @@ func toRedisTTLSeconds(ttl time.Duration) int64 {
return int64(ttl.Seconds())
}
+func isRedisKeyGone(keyType string, ttl int64) bool {
+ return keyType == "none" || ttl == -2
+}
+
+func normalizeRedisGetValueError(keyType string, ttl int64) error {
+ if isRedisKeyGone(keyType, ttl) {
+ return ErrRedisKeyGone
+ }
+ return nil
+}
+
// GetKeyType returns the type of a key
func (r *RedisClientImpl) GetKeyType(key string) (string, error) {
if r.client == nil {
@@ -594,6 +617,9 @@ func (r *RedisClientImpl) GetValue(key string) (*RedisValue, error) {
}
ttl, _ := r.GetTTL(key)
+ if err := normalizeRedisGetValueError(keyType, ttl); err != nil {
+ return nil, err
+ }
physicalKey := r.toPhysicalKey(key)
result := &RedisValue{
diff --git a/internal/redis/redis_impl_test.go b/internal/redis/redis_impl_test.go
index 7014ab8..dafb991 100644
--- a/internal/redis/redis_impl_test.go
+++ b/internal/redis/redis_impl_test.go
@@ -1,6 +1,9 @@
package redis
-import "testing"
+import (
+ "errors"
+ "testing"
+)
func TestSanitizeRedisPassword(t *testing.T) {
tests := []struct {
@@ -79,3 +82,40 @@ func TestSanitizeRedisPassword(t *testing.T) {
})
}
}
+
+func TestIsRedisKeyGone(t *testing.T) {
+ tests := []struct {
+ name string
+ keyType string
+ ttl int64
+ want bool
+ }{
+ {name: "type none", keyType: "none", ttl: -2, want: true},
+ {name: "type none without ttl", keyType: "none", ttl: -1, want: true},
+ {name: "missing by ttl", keyType: "string", ttl: -2, want: true},
+ {name: "normal string", keyType: "string", ttl: 30, want: false},
+ {name: "permanent hash", keyType: "hash", ttl: -1, want: false},
+ }
+
+ for _, tt := range tests {
+ t.Run(tt.name, func(t *testing.T) {
+ if got := isRedisKeyGone(tt.keyType, tt.ttl); got != tt.want {
+ t.Fatalf("isRedisKeyGone(%q, %d)=%v, want %v", tt.keyType, tt.ttl, got, tt.want)
+ }
+ })
+ }
+}
+
+func TestNormalizeRedisGetValueError(t *testing.T) {
+ err := normalizeRedisGetValueError("none", -2)
+ if !errors.Is(err, ErrRedisKeyGone) {
+ t.Fatalf("expected ErrRedisKeyGone, got %v", err)
+ }
+ if err == nil || err.Error() != "Redis Key 不存在或已过期" {
+ t.Fatalf("unexpected error text: %v", err)
+ }
+
+ if normalizeRedisGetValueError("hash", -1) != nil {
+ t.Fatal("expected nil for supported existing key")
+ }
+}