feat(phase3): key browser MVP
- useKeyStore (Pinia): scan, tree view, key data cache, db switching - KeyBrowser: split pane with KeyList + KeyDetail - KeyList: SCAN pagination, filter, tree toggle, load more - KeyDetail: type badge, TTL display, delete, type-based editor dispatch - StringEditor: view/edit with JSON auto-format - HashEditor: field table, add/edit/delete fields - StatusView: INFO dashboard with stat cards + section grid - MainArea: tab host (Status / Keys) - RedisService: selectDb, dbSize - Preload: selectDb, dbSize IPC channels - App.vue updated with MainArea layout
This commit is contained in:
@@ -115,4 +115,10 @@ export function registerIpcHandlers(): void {
|
||||
ipcMain.handle('redis:setTTL', async (_e, id: string, key: string, ttl: number) => {
|
||||
await redisService.setKeyTTL(id, key, ttl)
|
||||
})
|
||||
ipcMain.handle('redis:selectDb', async (_e, id: string, db: number) => {
|
||||
await redisService.selectDb(id, db)
|
||||
})
|
||||
ipcMain.handle('redis:dbSize', async (_e, id: string) => {
|
||||
return redisService.dbSize(id)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -164,3 +164,15 @@ export async function setKeyTTL(id: string, key: string, ttl: number): Promise<v
|
||||
await client.expire(key, ttl)
|
||||
}
|
||||
}
|
||||
|
||||
export async function selectDb(id: string, db: number): Promise<void> {
|
||||
const client = clients.get(id)
|
||||
if (!client) throw new Error(`Client ${id} not found`)
|
||||
await client.select(db)
|
||||
}
|
||||
|
||||
export async function dbSize(id: string): Promise<number> {
|
||||
const client = clients.get(id)
|
||||
if (!client) throw new Error(`Client ${id} not found`)
|
||||
return client.dbsize() as Promise<number>
|
||||
}
|
||||
|
||||
Vendored
+2
@@ -68,6 +68,8 @@ export interface ElectronAPI {
|
||||
hashSet: (id: string, key: string, field: string, value: string) => Promise<void>
|
||||
hashDel: (id: string, key: string, field: string) => Promise<void>
|
||||
setTTL: (id: string, key: string, ttl: number) => Promise<void>
|
||||
selectDb: (id: string, db: number) => Promise<void>
|
||||
dbSize: (id: string) => Promise<number>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -52,6 +52,9 @@ const electronAPI = {
|
||||
ipcRenderer.invoke('redis:hashDel', id, key, field),
|
||||
setTTL: (id: string, key: string, ttl: number): Promise<void> =>
|
||||
ipcRenderer.invoke('redis:setTTL', id, key, ttl),
|
||||
selectDb: (id: string, db: number): Promise<void> =>
|
||||
ipcRenderer.invoke('redis:selectDb', id, db),
|
||||
dbSize: (id: string): Promise<number> => ipcRenderer.invoke('redis:dbSize', id),
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { onMounted } from 'vue'
|
||||
import TitleBar from './components/TitleBar.vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import MainArea from './components/MainArea.vue'
|
||||
import StatusBar from './components/StatusBar.vue'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
|
||||
@@ -18,20 +19,7 @@ onMounted(() => {
|
||||
<TitleBar />
|
||||
<div class="app-body">
|
||||
<Sidebar />
|
||||
<main class="app-main">
|
||||
<div v-if="!connStore.isConnected" class="placeholder-content">
|
||||
<div class="placeholder-icon">R</div>
|
||||
<h2>JRedisDesktop</h2>
|
||||
<p>A modern Redis desktop manager</p>
|
||||
<p class="placeholder-hint">Select or create a connection to get started</p>
|
||||
</div>
|
||||
<div v-else class="connected-content">
|
||||
<div class="info-card">
|
||||
<h3>{{ connStore.activeConnection?.name }}</h3>
|
||||
<pre class="info-text">{{ connStore.serverInfo }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<MainArea />
|
||||
</div>
|
||||
<StatusBar />
|
||||
</div>
|
||||
@@ -50,80 +38,4 @@ onMounted(() => {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-primary);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.placeholder-content h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.placeholder-content p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.placeholder-hint {
|
||||
margin-top: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.connected-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-light);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/HashEditor.vue
|
||||
import { ref, watch } from 'vue'
|
||||
import { useKeyStore } from '@renderer/stores/key'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const keyStore = useKeyStore()
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
interface HashField {
|
||||
field: string
|
||||
value: string
|
||||
}
|
||||
|
||||
const fields = ref<HashField[]>([])
|
||||
const loading = ref(false)
|
||||
const showAddDialog = ref(false)
|
||||
const newFieldName = ref('')
|
||||
const newFieldValue = ref('')
|
||||
|
||||
watch(
|
||||
() => keyStore.keyData,
|
||||
(newData) => {
|
||||
if (Array.isArray(newData)) {
|
||||
fields.value = newData.map(([field, value]) => ({ field, value }))
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
async function refresh() {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await window.electronAPI.redis.hashScan(connStore.activeId, keyStore.selectedKey, '0', 100)
|
||||
keyStore.keyData = result.fields
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveField(item: HashField) {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
try {
|
||||
await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, item.field, item.value)
|
||||
ElMessage.success('Saved')
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteField(item: HashField) {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`Delete field "${item.field}"?`, 'Confirm')
|
||||
await window.electronAPI.redis.hashDel(connStore.activeId, keyStore.selectedKey, item.field)
|
||||
fields.value = fields.value.filter(f => f.field !== item.field)
|
||||
ElMessage.success('Deleted')
|
||||
} catch (err: any) {
|
||||
if (err !== 'cancel') ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function addField() {
|
||||
if (!connStore.activeId || !keyStore.selectedKey || !newFieldName.value) return
|
||||
try {
|
||||
await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, newFieldName.value, newFieldValue.value)
|
||||
fields.value.push({ field: newFieldName.value, value: newFieldValue.value })
|
||||
showAddDialog.value = false
|
||||
newFieldName.value = ''
|
||||
newFieldValue.value = ''
|
||||
ElMessage.success('Added')
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hash-editor">
|
||||
<div class="editor-toolbar">
|
||||
<span class="type-badge">HASH</span>
|
||||
<el-button size="small" type="primary" @click="showAddDialog = true">Add Field</el-button>
|
||||
<el-button size="small" @click="refresh" :loading="loading">Refresh</el-button>
|
||||
</div>
|
||||
|
||||
<div class="hash-table-wrap">
|
||||
<el-table :data="fields" size="small" class="hash-table" max-height="400">
|
||||
<el-table-column prop="field" label="Field" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.field" size="small" class="hash-input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="Value" min-width="250">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.value" size="small" class="hash-input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" text @click="saveField(row)">Save</el-button>
|
||||
<el-button size="small" type="danger" text @click="deleteField(row)">Del</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="showAddDialog" title="Add Hash Field" width="400px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="Field">
|
||||
<el-input v-model="newFieldName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Value">
|
||||
<el-input v-model="newFieldValue" type="textarea" :rows="4" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showAddDialog = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="addField">Add</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hash-editor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
background: var(--accent-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hash-table-wrap {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.hash-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hash-input :deep(.el-input__wrapper) {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
box-shadow: none;
|
||||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/KeyBrowser.vue
|
||||
import { watch } from 'vue'
|
||||
import { useKeyStore } from '@renderer/stores/key'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
import KeyList from './KeyList.vue'
|
||||
import KeyDetail from './KeyDetail.vue'
|
||||
|
||||
const keyStore = useKeyStore()
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
watch(
|
||||
() => connStore.activeId,
|
||||
async (newId) => {
|
||||
if (newId) {
|
||||
keyStore.selectedKey = null
|
||||
keyStore.keyData = null
|
||||
await keyStore.scanKeys(newId, '0', true)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="key-browser">
|
||||
<div class="key-sidebar">
|
||||
<KeyList />
|
||||
</div>
|
||||
<div class="key-main">
|
||||
<KeyDetail />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.key-browser {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.key-sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.key-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/KeyDetail.vue
|
||||
import { computed } from 'vue'
|
||||
import { useKeyStore } from '@renderer/stores/key'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import StringEditor from './StringEditor.vue'
|
||||
import HashEditor from './HashEditor.vue'
|
||||
|
||||
const keyStore = useKeyStore()
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
const typeColor = computed(() => {
|
||||
const colors: Record<string, string> = {
|
||||
string: 'var(--color-green)',
|
||||
hash: 'var(--color-yellow)',
|
||||
list: 'var(--color-cyan)',
|
||||
set: 'var(--color-purple)',
|
||||
zset: 'var(--color-red)',
|
||||
stream: 'var(--color-orange)',
|
||||
}
|
||||
return colors[keyStore.selectedType || ''] || 'var(--text-muted)'
|
||||
})
|
||||
|
||||
const ttlDisplay = computed(() => {
|
||||
if (keyStore.selectedTTL < 0) return 'No expiry'
|
||||
if (keyStore.selectedTTL === 0) return 'Expired'
|
||||
const sec = keyStore.selectedTTL
|
||||
if (sec < 60) return `${sec}s`
|
||||
if (sec < 3600) return `${Math.floor(sec / 60)}m ${sec % 60}s`
|
||||
return `${Math.floor(sec / 3600)}h ${Math.floor((sec % 3600) / 60)}m`
|
||||
})
|
||||
|
||||
async function deleteKey() {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`Delete key "${keyStore.selectedKey}"?`, 'Confirm')
|
||||
await window.electronAPI.redis.deleteKey(connStore.activeId, keyStore.selectedKey)
|
||||
ElMessage.success('Deleted')
|
||||
keyStore.selectedKey = null
|
||||
keyStore.keyData = null
|
||||
} catch (err: any) {
|
||||
if (err !== 'cancel') ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshKey() {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
await keyStore.loadKeyData(connStore.activeId, keyStore.selectedKey)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="key-detail" v-if="keyStore.selectedKey">
|
||||
<div class="detail-header">
|
||||
<div class="key-info">
|
||||
<el-icon class="key-icon" :style="{ color: typeColor }"><Document /></el-icon>
|
||||
<span class="key-name">{{ keyStore.selectedKey }}</span>
|
||||
<span class="type-badge" :style="{ color: typeColor, borderColor: typeColor }">
|
||||
{{ keyStore.selectedType?.toUpperCase() }}
|
||||
</span>
|
||||
<span class="ttl-badge">{{ ttlDisplay }}</span>
|
||||
</div>
|
||||
<div class="key-actions">
|
||||
<el-button size="small" @click="refreshKey">Refresh</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteKey">Delete</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<StringEditor v-if="keyStore.selectedType === 'string'" />
|
||||
<HashEditor v-else-if="keyStore.selectedType === 'hash'" />
|
||||
<div v-else class="unsupported">
|
||||
<el-icon><Warning /></el-icon>
|
||||
<p>Type "{{ keyStore.selectedType }}" viewer not yet implemented</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-selection">
|
||||
<el-icon size="48" color="var(--text-muted)"><Document /></el-icon>
|
||||
<p>Select a key to view details</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.key-detail {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.key-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.key-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.key-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border: 1px solid;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.ttl-badge {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.no-selection p {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.unsupported {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.unsupported p {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/KeyList.vue
|
||||
import { ref, watch } from 'vue'
|
||||
import { useKeyStore } from '@renderer/stores/key'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
|
||||
const keyStore = useKeyStore()
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
const filterText = ref('')
|
||||
const showTree = ref(false)
|
||||
|
||||
async function loadMore() {
|
||||
if (!connStore.activeId) return
|
||||
await keyStore.scanKeys(connStore.activeId, keyStore.scanCursor)
|
||||
}
|
||||
|
||||
async function refreshKeys() {
|
||||
if (!connStore.activeId) return
|
||||
await keyStore.scanKeys(connStore.activeId, '0', true)
|
||||
}
|
||||
|
||||
async function selectKey(keyName: string) {
|
||||
if (!connStore.activeId) return
|
||||
keyStore.selectedKey = keyName
|
||||
await keyStore.loadKeyData(connStore.activeId, keyName)
|
||||
}
|
||||
|
||||
function onPatternChange() {
|
||||
if (!connStore.activeId) return
|
||||
keyStore.scanKeys(connStore.activeId, '0', true)
|
||||
}
|
||||
|
||||
const filteredKeys = ref<string[]>([])
|
||||
watch(
|
||||
() => keyStore.keys,
|
||||
(newKeys) => {
|
||||
filteredKeys.value = filterText.value
|
||||
? newKeys.filter(k => k.name.includes(filterText.value)).map(k => k.name)
|
||||
: newKeys.map(k => k.name)
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
watch(filterText, (val) => {
|
||||
filteredKeys.value = val
|
||||
? keyStore.keys.filter(k => k.name.includes(val)).map(k => k.name)
|
||||
: keyStore.keys.map(k => k.name)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="key-list">
|
||||
<div class="key-toolbar">
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
placeholder="Filter keys..."
|
||||
size="small"
|
||||
clearable
|
||||
prefix-icon="Search"
|
||||
/>
|
||||
<el-button-group class="key-actions">
|
||||
<el-button size="small" @click="refreshKeys" :disabled="!connStore.activeId">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:type="showTree ? 'primary' : 'default'"
|
||||
@click="showTree = !showTree"
|
||||
>
|
||||
<el-icon><List /></el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div class="key-content">
|
||||
<!-- Flat list -->
|
||||
<div v-if="!showTree" class="key-flat-list">
|
||||
<div
|
||||
v-for="keyName in filteredKeys"
|
||||
:key="keyName"
|
||||
class="key-item"
|
||||
:class="{ active: keyStore.selectedKey === keyName }"
|
||||
@click="selectKey(keyName)"
|
||||
>
|
||||
<el-icon class="key-icon"><Document /></el-icon>
|
||||
<span class="key-name">{{ keyName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tree view -->
|
||||
<div v-else class="key-tree">
|
||||
<div v-for="keyName in filteredKeys" :key="keyName" class="key-item" @click="selectKey(keyName)">
|
||||
<el-icon class="key-icon"><Document /></el-icon>
|
||||
<span class="key-name">{{ keyName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-footer">
|
||||
<span class="key-count">{{ keyStore.keys.length }} keys</span>
|
||||
<el-button
|
||||
v-if="keyStore.hasMore"
|
||||
size="small"
|
||||
type="primary"
|
||||
text
|
||||
@click="loadMore"
|
||||
:loading="keyStore.loading"
|
||||
>
|
||||
Load more...
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.key-list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.key-toolbar {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.key-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.key-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.key-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.key-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.key-item.active {
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
.key-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-item.active .key-icon {
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
.key-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.key-footer {
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.key-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/MainArea.vue
|
||||
import { ref, watch } from 'vue'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
import StatusView from './StatusView.vue'
|
||||
import KeyBrowser from './KeyBrowser.vue'
|
||||
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
type Tab = 'status' | 'keys' | 'cli'
|
||||
const activeTab = ref<Tab>('status')
|
||||
|
||||
watch(
|
||||
() => connStore.isConnected,
|
||||
(connected) => {
|
||||
if (connected) {
|
||||
activeTab.value = 'status'
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-area" v-if="connStore.isConnected">
|
||||
<div class="tab-bar">
|
||||
<button
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'status' }"
|
||||
@click="activeTab = 'status'"
|
||||
>
|
||||
<el-icon><Monitor /></el-icon>
|
||||
Status
|
||||
</button>
|
||||
<button
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'keys' }"
|
||||
@click="activeTab = 'keys'"
|
||||
>
|
||||
<el-icon><Document /></el-icon>
|
||||
Keys
|
||||
</button>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<StatusView v-if="activeTab === 'status'" />
|
||||
<KeyBrowser v-else-if="activeTab === 'keys'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-connection">
|
||||
<div class="placeholder-icon">R</div>
|
||||
<h2>JRedisDesktop</h2>
|
||||
<p>Select or create a connection to get started</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-area {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: var(--accent-light);
|
||||
border-bottom-color: var(--accent-light);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-connection {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.no-connection h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.no-connection p {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/StatusView.vue
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
|
||||
const connStore = useConnectionStore()
|
||||
const info = ref('')
|
||||
const dbSize = ref(0)
|
||||
|
||||
interface InfoSection {
|
||||
title: string
|
||||
items: { key: string; value: string }[]
|
||||
}
|
||||
|
||||
const sections = ref<InfoSection[]>([])
|
||||
|
||||
function parseInfo(raw: string): InfoSection[] {
|
||||
const result: InfoSection[] = []
|
||||
let current: InfoSection | null = null
|
||||
|
||||
for (const line of raw.split('\n')) {
|
||||
const trimmed = line.trim()
|
||||
if (!trimmed || trimmed.startsWith('#')) {
|
||||
if (trimmed.startsWith('#')) {
|
||||
if (current) result.push(current)
|
||||
current = { title: trimmed.slice(2), items: [] }
|
||||
}
|
||||
continue
|
||||
}
|
||||
const colonIdx = trimmed.indexOf(':')
|
||||
if (colonIdx > 0 && current) {
|
||||
current.items.push({
|
||||
key: trimmed.slice(0, colonIdx),
|
||||
value: trimmed.slice(colonIdx + 1),
|
||||
})
|
||||
}
|
||||
}
|
||||
if (current) result.push(current)
|
||||
return result
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
if (!connStore.activeId) return
|
||||
info.value = await connStore.getInfo()
|
||||
sections.value = parseInfo(info.value)
|
||||
dbSize.value = await window.electronAPI.redis.dbSize(connStore.activeId)
|
||||
}
|
||||
|
||||
onMounted(refresh)
|
||||
|
||||
defineExpose({ refresh })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="status-view" v-if="connStore.activeConnection">
|
||||
<div class="status-header">
|
||||
<h2>{{ connStore.activeConnection.name }}</h2>
|
||||
<el-button size="small" @click="refresh">Refresh</el-button>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<div class="info-label">Database</div>
|
||||
<div class="info-value">{{ connStore.activeConnection.host }}:{{ connStore.activeConnection.port }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-label">Keys</div>
|
||||
<div class="info-value">{{ dbSize.toLocaleString() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-sections">
|
||||
<div v-for="section in sections" :key="section.title" class="info-section">
|
||||
<h3 class="section-title">{{ section.title }}</h3>
|
||||
<div class="section-items">
|
||||
<div v-for="item in section.items" :key="item.key" class="info-row">
|
||||
<span class="info-key">{{ item.key }}</span>
|
||||
<span class="info-val">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-view {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-items {
|
||||
padding: 4px 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-row:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.info-key {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-val {
|
||||
color: var(--text-primary);
|
||||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
// src/renderer/src/components/StringEditor.vue
|
||||
import { ref, watch } from 'vue'
|
||||
import { useKeyStore } from '@renderer/stores/key'
|
||||
import { useConnectionStore } from '@renderer/stores/connection'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const keyStore = useKeyStore()
|
||||
const connStore = useConnectionStore()
|
||||
|
||||
const editedValue = ref('')
|
||||
const isJson = ref(false)
|
||||
const isEditing = ref(false)
|
||||
|
||||
function formatValue(val: string | null) {
|
||||
if (val === null) return ''
|
||||
try {
|
||||
const parsed = JSON.parse(val)
|
||||
isJson.value = true
|
||||
return JSON.stringify(parsed, null, 2)
|
||||
} catch {
|
||||
isJson.value = false
|
||||
return val
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => keyStore.keyData,
|
||||
(newVal) => {
|
||||
if (typeof newVal === 'string') {
|
||||
editedValue.value = formatValue(newVal)
|
||||
isEditing.value = false
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
async function save() {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
try {
|
||||
await window.electronAPI.redis.setString(connStore.activeId, keyStore.selectedKey, editedValue.value)
|
||||
keyStore.keyData = editedValue.value
|
||||
isEditing.value = false
|
||||
ElMessage.success('Saved')
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="string-editor">
|
||||
<div class="editor-toolbar">
|
||||
<span class="type-badge">STRING</span>
|
||||
<el-button v-if="!isEditing" size="small" type="primary" @click="isEditing = true">Edit</el-button>
|
||||
<template v-else>
|
||||
<el-button size="small" type="primary" @click="save">Save</el-button>
|
||||
<el-button size="small" @click="isEditing = false; editedValue = formatValue(keyStore.keyData as string)">Cancel</el-button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="editor-content">
|
||||
<el-input
|
||||
v-model="editedValue"
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
:disabled="!isEditing"
|
||||
:class="{ json: isJson }"
|
||||
spellcheck="false"
|
||||
class="editor-textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.string-editor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
background: var(--accent-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.editor-textarea :deep(.el-textarea__inner) {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Cascadia Code', 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
// src/renderer/src/stores/key.ts
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface KeyItem {
|
||||
name: string
|
||||
type: string
|
||||
ttl: number
|
||||
level: number
|
||||
children?: KeyItem[]
|
||||
isLeaf: boolean
|
||||
}
|
||||
|
||||
interface ScanResult {
|
||||
cursor: string
|
||||
keys: string[]
|
||||
}
|
||||
|
||||
export const useKeyStore = defineStore('key', () => {
|
||||
const keys = ref<KeyItem[]>([])
|
||||
const treeKeys = ref<KeyItem[]>([])
|
||||
const selectedKey = ref<string | null>(null)
|
||||
const selectedType = ref<string | null>(null)
|
||||
const selectedTTL = ref<number>(-1)
|
||||
const keyData = ref<any>(null)
|
||||
const loading = ref(false)
|
||||
const scanCursor = ref('0')
|
||||
const hasMore = ref(false)
|
||||
const pattern = ref('*')
|
||||
const useTree = ref(false)
|
||||
const currentDb = ref(0)
|
||||
|
||||
function buildTree(flatKeys: string[], separator: string): KeyItem[] {
|
||||
const root: KeyItem[] = []
|
||||
const map = new Map<string, KeyItem>()
|
||||
|
||||
for (const key of flatKeys) {
|
||||
const parts = key.split(separator)
|
||||
let currentLevel = root
|
||||
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i]
|
||||
const isLast = i === parts.length - 1
|
||||
const path = parts.slice(0, i + 1).join(separator)
|
||||
|
||||
if (map.has(path)) {
|
||||
const existing = map.get(path)!
|
||||
if (isLast) {
|
||||
existing.name = key
|
||||
existing.isLeaf = true
|
||||
existing.type = ''
|
||||
existing.ttl = -1
|
||||
}
|
||||
currentLevel = existing.children || []
|
||||
} else {
|
||||
const node: KeyItem = {
|
||||
name: isLast ? key : part,
|
||||
type: isLast ? '' : 'branch',
|
||||
ttl: -1,
|
||||
level: i,
|
||||
children: isLast ? undefined : [],
|
||||
isLeaf: isLast,
|
||||
}
|
||||
map.set(path, node)
|
||||
currentLevel.push(node)
|
||||
if (!isLast) currentLevel = node.children!
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return root
|
||||
}
|
||||
|
||||
async function scanKeys(connId: string, cursor: string = '0', reset: boolean = false) {
|
||||
if (reset) {
|
||||
scanCursor.value = '0'
|
||||
keys.value = []
|
||||
hasMore.value = false
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const result: ScanResult = await window.electronAPI.redis.scanKeys(
|
||||
connId, cursor, pattern.value, 100
|
||||
)
|
||||
const newKeys = result.keys.map(k => ({
|
||||
name: k,
|
||||
type: '',
|
||||
ttl: -1,
|
||||
level: 0,
|
||||
isLeaf: true,
|
||||
}))
|
||||
|
||||
if (reset) {
|
||||
keys.value = newKeys
|
||||
} else {
|
||||
keys.value.push(...newKeys)
|
||||
}
|
||||
|
||||
scanCursor.value = result.cursor
|
||||
hasMore.value = result.cursor !== '0'
|
||||
|
||||
if (useTree.value) {
|
||||
const conn = (await window.electronAPI.storage.getConnections())
|
||||
.find((c: any) => c.id === connId)
|
||||
const sep = conn?.separator || ':'
|
||||
treeKeys.value = buildTree(keys.value.map(k => k.name), sep)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadKeyTypeAndTTL(connId: string, key: string) {
|
||||
const [type, ttl] = await Promise.all([
|
||||
window.electronAPI.redis.getKeyType(connId, key),
|
||||
window.electronAPI.redis.getKeyTTL(connId, key),
|
||||
])
|
||||
selectedType.value = type
|
||||
selectedTTL.value = ttl
|
||||
}
|
||||
|
||||
async function loadKeyData(connId: string, key: string) {
|
||||
loading.value = true
|
||||
try {
|
||||
await loadKeyTypeAndTTL(connId, key)
|
||||
selectedKey.value = key
|
||||
|
||||
switch (selectedType.value) {
|
||||
case 'string':
|
||||
keyData.value = await window.electronAPI.redis.getString(connId, key)
|
||||
break
|
||||
case 'hash': {
|
||||
const result = await window.electronAPI.redis.hashScan(connId, key, '0', 100)
|
||||
keyData.value = result.fields
|
||||
break
|
||||
}
|
||||
default:
|
||||
keyData.value = null
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectDb(connId: string, db: number) {
|
||||
await window.electronAPI.redis.selectDb(connId, db)
|
||||
currentDb.value = db
|
||||
keys.value = []
|
||||
treeKeys.value = []
|
||||
selectedKey.value = null
|
||||
keyData.value = null
|
||||
scanCursor.value = '0'
|
||||
hasMore.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
keys, treeKeys, selectedKey, selectedType, selectedTTL, keyData,
|
||||
loading, scanCursor, hasMore, pattern, useTree, currentDb,
|
||||
scanKeys, loadKeyTypeAndTTL, loadKeyData, selectDb,
|
||||
}
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user