Jokul/JRedisDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: show settings tab on startup screen

Browse Source
This commit is contained in:
No.1
2026-07-04 22:38:52 +08:00
parent 3b402771d5
commit 38f2a8fbf0
1 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MainArea.vue
+52 -44
View File
@@ -26,40 +26,43 @@ watch(
</script>
<template>
<div class="main-area" v-if="connStore.isConnected">
<div class="main-area">
<div class="tab-bar">
<button
class="tab-item"
:class="{ active: activeTab === 'status' }"
@click="activeTab = 'status'"
>
<el-icon><Monitor /></el-icon>
{{ t('status.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'keys' }"
@click="activeTab = 'keys'"
>
<el-icon><Document /></el-icon>
{{ t('key.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'cli' }"
@click="activeTab = 'cli'"
>
<el-icon><Monitor /></el-icon>
{{ t('cli.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'slowlog' }"
@click="activeTab = 'slowlog'"
>
<el-icon><Clock /></el-icon>
{{ t('slowlog.title') }}
</button>
<template v-if="connStore.isConnected">
<button
class="tab-item"
:class="{ active: activeTab === 'status' }"
@click="activeTab = 'status'"
>
<el-icon><Monitor /></el-icon>
{{ t('status.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'keys' }"
@click="activeTab = 'keys'"
>
<el-icon><Document /></el-icon>
{{ t('key.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'cli' }"
@click="activeTab = 'cli'"
>
<el-icon><Monitor /></el-icon>
{{ t('cli.title') }}
</button>
<button
class="tab-item"
:class="{ active: activeTab === 'slowlog' }"
@click="activeTab = 'slowlog'"
>
<el-icon><Clock /></el-icon>
{{ t('slowlog.title') }}
</button>
</template>
<div class="tab-spacer" v-if="connStore.isConnected"></div>
<button
class="tab-item"
:class="{ active: activeTab === 'settings' }"
@@ -70,19 +73,20 @@ watch(
</button>
</div>
<div class="tab-content">
<StatusView v-if="activeTab === 'status'" />
<KeyBrowser v-else-if="activeTab === 'keys'" />
<CliView v-else-if="activeTab === 'cli'" />
<SlowLogView v-else-if="activeTab === 'slowlog'" />
<SettingsView v-else-if="activeTab === 'settings'" />
<template v-if="connStore.isConnected">
<StatusView v-if="activeTab === 'status'" />
<KeyBrowser v-else-if="activeTab === 'keys'" />
<CliView v-else-if="activeTab === 'cli'" />
<SlowLogView v-else-if="activeTab === 'slowlog'" />
</template>
<SettingsView v-if="activeTab === 'settings'" />
<div v-if="!connStore.isConnected && activeTab !== 'settings'" class="no-connection">
<div class="placeholder-icon">JRD</div>
<h2>JRedisDesktop</h2>
<p>{{ t('app.placeholder') }}</p>
</div>
</div>
</div>
<div v-else class="no-connection">
<div class="placeholder-icon">JRD</div>
<h2>JRedisDesktop</h2>
<p>{{ t('app.placeholder') }}</p>
</div>
</template>
<style scoped>
@@ -126,6 +130,10 @@ watch(
border-bottom-color: var(--accent-light);
}
.tab-spacer {
flex: 1;
}
.tab-content {
flex: 1;
overflow: hidden;