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> </script>
<template> <template>
<div class="main-area" v-if="connStore.isConnected"> <div class="main-area">
<div class="tab-bar"> <div class="tab-bar">
<button <template v-if="connStore.isConnected">
class="tab-item" <button
:class="{ active: activeTab === 'status' }" class="tab-item"
@click="activeTab = 'status'" :class="{ active: activeTab === 'status' }"
> @click="activeTab = 'status'"
<el-icon><Monitor /></el-icon> >
{{ t('status.title') }} <el-icon><Monitor /></el-icon>
</button> {{ t('status.title') }}
<button </button>
class="tab-item" <button
:class="{ active: activeTab === 'keys' }" class="tab-item"
@click="activeTab = 'keys'" :class="{ active: activeTab === 'keys' }"
> @click="activeTab = 'keys'"
<el-icon><Document /></el-icon> >
{{ t('key.title') }} <el-icon><Document /></el-icon>
</button> {{ t('key.title') }}
<button </button>
class="tab-item" <button
:class="{ active: activeTab === 'cli' }" class="tab-item"
@click="activeTab = 'cli'" :class="{ active: activeTab === 'cli' }"
> @click="activeTab = 'cli'"
<el-icon><Monitor /></el-icon> >
{{ t('cli.title') }} <el-icon><Monitor /></el-icon>
</button> {{ t('cli.title') }}
<button </button>
class="tab-item" <button
:class="{ active: activeTab === 'slowlog' }" class="tab-item"
@click="activeTab = 'slowlog'" :class="{ active: activeTab === 'slowlog' }"
> @click="activeTab = 'slowlog'"
<el-icon><Clock /></el-icon> >
{{ t('slowlog.title') }} <el-icon><Clock /></el-icon>
</button> {{ t('slowlog.title') }}
</button>
</template>
<div class="tab-spacer" v-if="connStore.isConnected"></div>
<button <button
class="tab-item" class="tab-item"
:class="{ active: activeTab === 'settings' }" :class="{ active: activeTab === 'settings' }"
@@ -70,19 +73,20 @@ watch(
</button> </button>
</div> </div>
<div class="tab-content"> <div class="tab-content">
<StatusView v-if="activeTab === 'status'" /> <template v-if="connStore.isConnected">
<KeyBrowser v-else-if="activeTab === 'keys'" /> <StatusView v-if="activeTab === 'status'" />
<CliView v-else-if="activeTab === 'cli'" /> <KeyBrowser v-else-if="activeTab === 'keys'" />
<SlowLogView v-else-if="activeTab === 'slowlog'" /> <CliView v-else-if="activeTab === 'cli'" />
<SettingsView v-else-if="activeTab === 'settings'" /> <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> </div>
<div v-else class="no-connection">
<div class="placeholder-icon">JRD</div>
<h2>JRedisDesktop</h2>
<p>{{ t('app.placeholder') }}</p>
</div>
</template> </template>
<style scoped> <style scoped>
@@ -126,6 +130,10 @@ watch(
border-bottom-color: var(--accent-light); border-bottom-color: var(--accent-light);
} }
.tab-spacer {
flex: 1;
}
.tab-content { .tab-content {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;