feat: StatusView i18n + 1s auto-refresh
- Section titles (Server, Clients, Memory...) follow app language - Auto-refresh every 1 second - Clean up interval on unmount/disconnect
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// src/components/StatusView.vue
|
// src/components/StatusView.vue
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||||
import { useConnectionStore } from '@renderer/stores/connection'
|
import { useConnectionStore } from '@renderer/stores/connection'
|
||||||
import { useI18n } from '@renderer/i18n'
|
import { useI18n } from '@renderer/i18n'
|
||||||
|
|
||||||
@@ -16,6 +16,26 @@ interface InfoSection {
|
|||||||
|
|
||||||
const sections = ref<InfoSection[]>([])
|
const sections = ref<InfoSection[]>([])
|
||||||
|
|
||||||
|
// Redis INFO section name translations
|
||||||
|
const sectionTranslations: Record<string, string> = {
|
||||||
|
'Server': 'status.sectionServer',
|
||||||
|
'Clients': 'status.sectionClients',
|
||||||
|
'Memory': 'status.sectionMemory',
|
||||||
|
'Persistence': 'status.sectionPersistence',
|
||||||
|
'Stats': 'status.sectionStats',
|
||||||
|
'Replication': 'status.sectionReplication',
|
||||||
|
'CPU': 'status.sectionCpu',
|
||||||
|
'Modules': 'status.sectionModules',
|
||||||
|
'Errorstats': 'status.sectionErrorstats',
|
||||||
|
'Cluster': 'status.sectionCluster',
|
||||||
|
'Keyspace': 'status.sectionKeyspace',
|
||||||
|
}
|
||||||
|
|
||||||
|
function translateSectionTitle(title: string): string {
|
||||||
|
const key = sectionTranslations[title]
|
||||||
|
return key ? t(key) : title
|
||||||
|
}
|
||||||
|
|
||||||
function parseInfo(raw: string): InfoSection[] {
|
function parseInfo(raw: string): InfoSection[] {
|
||||||
const result: InfoSection[] = []
|
const result: InfoSection[] = []
|
||||||
let current: InfoSection | null = null
|
let current: InfoSection | null = null
|
||||||
@@ -41,6 +61,8 @@ function parseInfo(raw: string): InfoSection[] {
|
|||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let refreshTimer: ReturnType<typeof setInterval> | null = null
|
||||||
|
|
||||||
async function refresh() {
|
async function refresh() {
|
||||||
if (!connStore.activeId) return
|
if (!connStore.activeId) return
|
||||||
info.value = await connStore.getInfo()
|
info.value = await connStore.getInfo()
|
||||||
@@ -48,7 +70,37 @@ async function refresh() {
|
|||||||
dbSize.value = await window.electronAPI.redis.dbSize(connStore.activeId)
|
dbSize.value = await window.electronAPI.redis.dbSize(connStore.activeId)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(refresh)
|
function startAutoRefresh() {
|
||||||
|
stopAutoRefresh()
|
||||||
|
refresh()
|
||||||
|
refreshTimer = setInterval(refresh, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAutoRefresh() {
|
||||||
|
if (refreshTimer) {
|
||||||
|
clearInterval(refreshTimer)
|
||||||
|
refreshTimer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => connStore.isConnected,
|
||||||
|
(connected) => {
|
||||||
|
if (connected) {
|
||||||
|
startAutoRefresh()
|
||||||
|
} else {
|
||||||
|
stopAutoRefresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (connStore.isConnected) {
|
||||||
|
startAutoRefresh()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(stopAutoRefresh)
|
||||||
|
|
||||||
defineExpose({ refresh })
|
defineExpose({ refresh })
|
||||||
</script>
|
</script>
|
||||||
@@ -73,7 +125,7 @@ defineExpose({ refresh })
|
|||||||
|
|
||||||
<div class="info-sections">
|
<div class="info-sections">
|
||||||
<div v-for="section in sections" :key="section.title" class="info-section">
|
<div v-for="section in sections" :key="section.title" class="info-section">
|
||||||
<h3 class="section-title">{{ section.title }}</h3>
|
<h3 class="section-title">{{ translateSectionTitle(section.title) }}</h3>
|
||||||
<div class="section-items">
|
<div class="section-items">
|
||||||
<div v-for="item in section.items" :key="item.key" class="info-row">
|
<div v-for="item in section.items" :key="item.key" class="info-row">
|
||||||
<span class="info-key">{{ item.key }}</span>
|
<span class="info-key">{{ item.key }}</span>
|
||||||
|
|||||||
@@ -129,6 +129,17 @@ export default {
|
|||||||
connecting: 'Connecting...',
|
connecting: 'Connecting...',
|
||||||
error: 'Error: {error}',
|
error: 'Error: {error}',
|
||||||
noConnection: 'No connection',
|
noConnection: 'No connection',
|
||||||
|
sectionServer: 'Server',
|
||||||
|
sectionClients: 'Clients',
|
||||||
|
sectionMemory: 'Memory',
|
||||||
|
sectionPersistence: 'Persistence',
|
||||||
|
sectionStats: 'Stats',
|
||||||
|
sectionReplication: 'Replication',
|
||||||
|
sectionCpu: 'CPU',
|
||||||
|
sectionModules: 'Modules',
|
||||||
|
sectionErrorstats: 'Errorstats',
|
||||||
|
sectionCluster: 'Cluster',
|
||||||
|
sectionKeyspace: 'Keyspace',
|
||||||
},
|
},
|
||||||
db: {
|
db: {
|
||||||
label: 'DB',
|
label: 'DB',
|
||||||
|
|||||||
@@ -129,6 +129,17 @@ export default {
|
|||||||
connecting: '连接中...',
|
connecting: '连接中...',
|
||||||
error: '错误: {error}',
|
error: '错误: {error}',
|
||||||
noConnection: '无连接',
|
noConnection: '无连接',
|
||||||
|
sectionServer: '服务器',
|
||||||
|
sectionClients: '客户端',
|
||||||
|
sectionMemory: '内存',
|
||||||
|
sectionPersistence: '持久化',
|
||||||
|
sectionStats: '统计',
|
||||||
|
sectionReplication: '复制',
|
||||||
|
sectionCpu: 'CPU',
|
||||||
|
sectionModules: '模块',
|
||||||
|
sectionErrorstats: '错误统计',
|
||||||
|
sectionCluster: '集群',
|
||||||
|
sectionKeyspace: '键空间',
|
||||||
},
|
},
|
||||||
db: {
|
db: {
|
||||||
label: '数据库',
|
label: '数据库',
|
||||||
|
|||||||
Reference in New Issue
Block a user