github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-29 08:11:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #149 from Bacon2994/codex/redis-rdm-consistency

Browse Source 
feat(redis): 修复全库键浏览与二进制展示
This commit is contained in:
skyler
2026-05-08 11:34:20 +08:00
committed by GitHub
parent 9fd16e3c1f 3106dfce6f
commit de244a0b12
15 changed files with 891 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/redis/RedisKeyBrowser.vue
+108 -30
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { computed, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { Search, RefreshCw, Key, Loader2 } from "lucide-vue-next";
import { Search, RefreshCw, Key, Loader2, ChevronRight, ChevronDown, FolderClosed, FolderOpen } from "lucide-vue-next";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { Button } from "@/components/ui/button";
@@ -10,6 +10,12 @@ import { Badge } from "@/components/ui/badge";
import RedisValueViewer from "./RedisValueViewer.vue";
import * as api from "@/lib/api";
import type { RedisKeyInfo } from "@/lib/api";
import {
buildRedisKeyTree,
collectExpandedGroupIds,
flattenVisibleRedisKeyTree,
type RedisKeyTreeNode,
} from "@/lib/redisKeyTree";
const { t } = useI18n();
@@ -18,23 +24,51 @@ const props = defineProps<{
db: number;
}>();
const keys = ref<RedisKeyInfo[]>([]);
const flatKeys = ref<RedisKeyInfo[]>([]);
const treeKeys = ref<RedisKeyTreeNode[]>([]);
const loading = ref(false);
const searchPattern = ref("*");
const selectedKey = ref<string | null>(null);
const selectedKeyRaw = ref<string | null>(null);
const cursor = ref(0);
const hasMore = ref(false);
const expandedGroupIds = ref<Set<string>>(new Set());
const PAGE_SIZE = 200;
const effectivePattern = computed(() => searchPattern.value.trim() || "*");
const isSearchMode = computed(() => effectivePattern.value !== "*");
const selectedKey = computed(() => flatKeys.value.find((key) => key.key_raw === selectedKeyRaw.value) ?? null);
const visibleRows = computed(() => flattenVisibleRedisKeyTree(treeKeys.value, expandedGroupIds.value));
function rebuildTree(expandAll = false) {
const nextTree = buildRedisKeyTree(flatKeys.value, props.db);
treeKeys.value = nextTree;
const nextExpanded = new Set<string>();
const availableExpanded = collectExpandedGroupIds(nextTree);
if (expandAll) {
for (const id of availableExpanded) nextExpanded.add(id);
} else {
for (const id of expandedGroupIds.value) {
if (availableExpanded.has(id)) nextExpanded.add(id);
}
}
expandedGroupIds.value = nextExpanded;
if (selectedKeyRaw.value && !flatKeys.value.some((key) => key.key_raw === selectedKeyRaw.value)) {
selectedKeyRaw.value = null;
}
}
async function loadKeys() {
loading.value = true;
try {
const result = await api.redisScanKeys(props.connectionId, props.db, 0, searchPattern.value, PAGE_SIZE);
keys.value = result.keys;
const result = await api.redisScanKeys(props.connectionId, props.db, 0, effectivePattern.value, PAGE_SIZE);
flatKeys.value = result.keys;
cursor.value = result.cursor;
hasMore.value = result.cursor !== 0;
selectedKey.value = null;
selectedKeyRaw.value = null;
rebuildTree(isSearchMode.value);
} finally {
loading.value = false;
}
@@ -45,25 +79,44 @@ async function loadMoreKeys() {
loading.value = true;
try {
const result = await api.redisScanKeys(props.connectionId, props.db, cursor.value, searchPattern.value, PAGE_SIZE);
const existingKeys = new Set(keys.value.map((k) => k.key));
keys.value = [...keys.value, ...result.keys.filter((k) => !existingKeys.has(k.key))];
const result = await api.redisScanKeys(
props.connectionId,
props.db,
cursor.value,
effectivePattern.value,
PAGE_SIZE,
);
const existingKeys = new Set(flatKeys.value.map((key) => key.key_raw));
flatKeys.value = [...flatKeys.value, ...result.keys.filter((key) => !existingKeys.has(key.key_raw))];
cursor.value = result.cursor;
hasMore.value = result.cursor !== 0;
rebuildTree(isSearchMode.value);
} finally {
loading.value = false;
}
}
function selectKey(key: string) {
selectedKey.value = key;
function toggleGroup(groupId: string) {
const next = new Set(expandedGroupIds.value);
if (next.has(groupId)) next.delete(groupId);
else next.add(groupId);
expandedGroupIds.value = next;
}
function onRowClick(node: RedisKeyTreeNode) {
if (node.kind === "group") {
toggleGroup(node.id);
return;
}
selectedKeyRaw.value = node.keyRaw;
}
function onKeyDeleted() {
if (selectedKey.value) {
keys.value = keys.value.filter((k) => k.key !== selectedKey.value);
selectedKey.value = null;
}
if (!selectedKeyRaw.value) return;
flatKeys.value = flatKeys.value.filter((key) => key.key_raw !== selectedKeyRaw.value);
selectedKeyRaw.value = null;
rebuildTree(false);
}
function typeColor(type: string): string {
@@ -110,33 +163,56 @@ onMounted(loadKeys);
<!-- Key count -->
<div class="h-9 flex items-center px-3 text-xs text-muted-foreground border-b shrink-0">
{{ loading && keys.length === 0 ? t("redis.loadingKeys") : t("redis.keys", { count: keys.length }) }}
{{ loading && flatKeys.length === 0 ? t("redis.loadingKeys") : t("redis.keys", { count: flatKeys.length }) }}
</div>
<!-- Key list -->
<!-- Key tree -->
<div class="flex-1 overflow-y-auto">
<div
v-for="k in keys"
:key="k.key"
v-for="row in visibleRows"
:key="row.node.id"
class="flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer hover:bg-accent/50 border-b border-border/50"
:class="{ 'bg-accent': selectedKey === k.key }"
@click="selectKey(k.key)"
:class="{ 'bg-accent': row.node.kind === 'leaf' && selectedKeyRaw === row.node.keyRaw }"
:style="{ paddingLeft: `${12 + row.depth * 18}px` }"
:title="row.node.kind === 'leaf' ? row.node.fullKeyDisplay : row.node.pathSegments.join(':')"
@click="onRowClick(row.node)"
>
<Key class="w-3 h-3 shrink-0" :class="typeColor(k.key_type)" />
<span class="truncate flex-1 font-mono">{{ k.key }}</span>
<Badge variant="outline" class="text-[10px] px-1 py-0 shrink-0">{{ k.key_type }}</Badge>
<template v-if="row.node.kind === 'group'">
<component
:is="expandedGroupIds.has(row.node.id) ? ChevronDown : ChevronRight"
class="w-3 h-3 shrink-0 text-muted-foreground"
/>
<component
:is="expandedGroupIds.has(row.node.id) ? FolderOpen : FolderClosed"
class="w-3 h-3 shrink-0 text-amber-500"
/>
<span class="truncate flex-1 font-mono">{{ row.node.label }}</span>
</template>
<template v-else>
<span class="w-3 h-3 shrink-0" />
<Key class="w-3 h-3 shrink-0" :class="typeColor(row.node.keyType)" />
<span class="truncate font-mono">{{ row.node.label || row.node.fullKeyDisplay }}</span>
<span
v-if="row.node.label !== row.node.fullKeyDisplay"
class="truncate flex-1 text-[10px] text-muted-foreground font-mono"
>
{{ row.node.fullKeyDisplay }}
</span>
<span v-else class="flex-1" />
<Badge variant="outline" class="text-[10px] px-1 py-0 shrink-0">{{ row.node.keyType }}</Badge>
</template>
</div>
<div v-if="keys.length === 0 && !loading" class="px-3 py-8 text-center text-muted-foreground text-xs">
<div v-if="flatKeys.length === 0 && !loading" class="px-3 py-8 text-center text-muted-foreground text-xs">
{{ t("redis.noKeys") }}
</div>
<div
v-if="loading && keys.length === 0"
v-if="loading && flatKeys.length === 0"
class="px-3 py-8 flex items-center justify-center gap-2 text-muted-foreground text-xs"
>
<Loader2 class="w-3.5 h-3.5 animate-spin" />
<span>{{ t("redis.loadingKeys") }}</span>
</div>
<div v-if="hasMore || (loading && keys.length > 0)" class="p-2">
<div v-if="hasMore || (loading && flatKeys.length > 0)" class="p-2">
<Button variant="outline" size="sm" class="w-full h-7 text-xs" :disabled="loading" @click="loadMoreKeys">
<Loader2 v-if="loading" class="w-3 h-3 mr-1.5 animate-spin" />
{{ t("redis.loadMoreKeys") }}
@@ -151,9 +227,11 @@ onMounted(loadKeys);
<div class="h-full min-w-0">
<RedisValueViewer
v-if="selectedKey"
:key="selectedKey"
:key="selectedKey.key_raw"
:connection-id="connectionId"
:key-name="selectedKey"
:db="db"
:key-display="selectedKey.key_display"
:key-raw="selectedKey.key_raw"
@deleted="onKeyDeleted"
/>
<div v-else class="h-full flex items-center justify-center text-muted-foreground text-sm">
src/components/redis/RedisValueViewer.vue
+31 -16
View File
@@ -13,7 +13,9 @@ const { t } = useI18n();
const props = defineProps<{
connectionId: string;
keyName: string;
db: number;
keyDisplay: string;
keyRaw: string;
}>();
const emit = defineEmits<{ deleted: [] }>();
@@ -37,18 +39,20 @@ const pendingDelete = ref<PendingDelete | null>(null);
const deleteDetails = computed(() => {
const pending = pendingDelete.value;
if (!pending) return "";
if (pending.kind === "key") return t("dangerDialog.redisKeyDetails", { key: props.keyName });
if (pending.kind === "key") return t("dangerDialog.redisKeyDetails", { key: props.keyDisplay });
if (pending.kind === "hash")
return t("dangerDialog.redisHashFieldDetails", { key: props.keyName, field: pending.field });
return t("dangerDialog.redisHashFieldDetails", { key: props.keyDisplay, field: pending.field });
if (pending.kind === "list")
return t("dangerDialog.redisListItemDetails", { key: props.keyName, index: pending.index });
return t("dangerDialog.redisSetMemberDetails", { key: props.keyName, member: pending.member });
return t("dangerDialog.redisListItemDetails", { key: props.keyDisplay, index: pending.index });
return t("dangerDialog.redisSetMemberDetails", { key: props.keyDisplay, member: pending.member });
});
const isBinaryStringValue = computed(() => data.value?.key_type === "string" && data.value?.value_is_binary);
async function load() {
loading.value = true;
try {
data.value = await api.redisGetValue(props.connectionId, props.keyName);
data.value = await api.redisGetValue(props.connectionId, props.db, props.keyRaw);
if (data.value.key_type === "string") {
editValue.value = String(data.value.value);
}
@@ -58,13 +62,20 @@ async function load() {
}
async function saveString() {
await api.redisSetString(props.connectionId, props.keyName, editValue.value);
if (isBinaryStringValue.value) return;
await api.redisSetString(props.connectionId, props.db, props.keyRaw, editValue.value);
isEditing.value = false;
await load();
}
function handleStringInput() {
if (!isBinaryStringValue.value) {
isEditing.value = true;
}
}
async function applyDeleteKey() {
await api.redisDeleteKey(props.connectionId, props.keyName);
await api.redisDeleteKey(props.connectionId, props.db, props.keyRaw);
emit("deleted");
}
@@ -82,13 +93,13 @@ function copyValue() {
// Hash
async function hashSet() {
if (!newField.value) return;
await api.redisHashSet(props.connectionId, props.keyName, newField.value, newValue.value);
await api.redisHashSet(props.connectionId, props.db, props.keyRaw, newField.value, newValue.value);
newField.value = "";
newValue.value = "";
await load();
}
async function applyHashDel(field: string) {
await api.redisHashDel(props.connectionId, props.keyName, field);
await api.redisHashDel(props.connectionId, props.db, props.keyRaw, field);
await load();
}
function requestHashDel(field: string) {
@@ -99,12 +110,12 @@ function requestHashDel(field: string) {
// List
async function listPush() {
if (!newValue.value) return;
await api.redisListPush(props.connectionId, props.keyName, newValue.value);
await api.redisListPush(props.connectionId, props.db, props.keyRaw, newValue.value);
newValue.value = "";
await load();
}
async function applyListRemove(index: number) {
await api.redisListRemove(props.connectionId, props.keyName, index);
await api.redisListRemove(props.connectionId, props.db, props.keyRaw, index);
await load();
}
function requestListRemove(index: number) {
@@ -115,12 +126,12 @@ function requestListRemove(index: number) {
// Set
async function setAdd() {
if (!newValue.value) return;
await api.redisSetAdd(props.connectionId, props.keyName, newValue.value);
await api.redisSetAdd(props.connectionId, props.db, props.keyRaw, newValue.value);
newValue.value = "";
await load();
}
async function applySetRemove(member: string) {
await api.redisSetRemove(props.connectionId, props.keyName, member);
await api.redisSetRemove(props.connectionId, props.db, props.keyRaw, member);
await load();
}
function requestSetRemove(member: string) {
@@ -155,7 +166,7 @@ onMounted(load);
<template v-else-if="data">
<!-- Header -->
<div class="flex items-center gap-2 px-4 py-2 border-b bg-muted/30 shrink-0">
<span class="font-mono text-sm font-medium truncate">{{ data.key }}</span>
<span class="font-mono text-sm font-medium truncate">{{ data.key_display }}</span>
<Badge variant="secondary" class="text-xs">{{ data.key_type }}</Badge>
<Badge v-if="data.ttl > 0" variant="outline" class="text-xs">TTL: {{ data.ttl }}s</Badge>
<Badge v-else-if="data.ttl === -1" variant="outline" class="text-xs opacity-50">{{
@@ -174,8 +185,12 @@ onMounted(load);
<textarea
v-model="editValue"
class="flex-1 p-4 font-mono text-sm bg-background resize-none outline-none"
@input="isEditing = true"
:readonly="isBinaryStringValue"
@input="handleStringInput"
/>
<div v-if="isBinaryStringValue" class="px-4 py-2 border-t text-xs text-muted-foreground shrink-0">
{{ t("redis.binaryStringReadonlyHint") }}
</div>
<div v-if="isEditing" class="px-4 py-2 border-t flex justify-end gap-2 shrink-0">
<Button
variant="ghost"