Feature(custom): the current tab status in setting page is saved

This commit is contained in:
Kuingsmile
2026-01-13 11:04:35 +08:00
parent 7f85ce5ed0
commit 48bf058d3e
3 changed files with 13 additions and 12 deletions

View File

@@ -16,7 +16,7 @@
overflow: hidden;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl);
background: var(--color-surface);
background: var(settings-section);
box-shadow: var(--shadow-sm);
transition: var(--transition-medium);
}

View File

@@ -23,8 +23,8 @@
v-for="tab in tabs"
:key="tab.id"
class="tab-button"
:class="{ active: activeName === tab.id }"
@click="activeName = tab.id as 'system' | 'sync' | 'upload' | 'advanced' | 'update'"
:class="{ active: currentTab === tab.id }"
@click="currentTab = tab.id as 'system' | 'sync' | 'upload' | 'advanced' | 'update'"
>
<component :is="tab.icon" :size="18" />
<span>{{ tab.label }}</span>
@@ -34,7 +34,7 @@
<!-- Settings Content -->
<div class="settings-content">
<!-- System Settings Tab -->
<div v-if="activeName === 'system'" class="tab-content">
<div v-if="currentTab === 'system'" class="tab-content">
<!-- Language & Appearance Section -->
<div class="settings-section system-section">
<div class="section-header-with-icon">
@@ -227,7 +227,7 @@
</div>
<!-- Sync & Configure Tab -->
<div v-if="activeName === 'sync'" class="tab-content">
<div v-if="currentTab === 'sync'" class="tab-content">
<!-- Sync Status Overview -->
<div class="sync-overview-card">
<div class="sync-overview-header">
@@ -317,7 +317,7 @@
</div>
</div>
<!-- Upload Settings Tab -->
<div v-if="activeName === 'upload'" class="tab-content">
<div v-if="currentTab === 'upload'" class="tab-content">
<!-- Upload Behavior Section -->
<div class="settings-section upload-section">
<div class="section-header-with-icon">
@@ -718,7 +718,7 @@
</div>
<!-- Advanced Settings Tab -->
<div v-if="activeName === 'advanced'" class="tab-content">
<div v-if="currentTab === 'advanced'" class="tab-content">
<!-- Logging Section -->
<div class="settings-section advanced-section">
<div class="section-header-with-icon">
@@ -842,7 +842,7 @@
</div>
<!-- Update Settings Tab -->
<div v-if="activeName === 'update'" class="tab-content">
<div v-if="currentTab === 'update'" class="tab-content">
<!-- Version Status Card -->
<div class="update-status-card">
<div class="update-status-icon">
@@ -1760,6 +1760,7 @@
</template>
<script lang="ts" setup>
import { useStorage } from '@vueuse/core'
import { compare } from 'compare-versions'
import {
BookOpen,
@@ -1809,9 +1810,9 @@ const { confirm } = useConfirm()
const message = useMessage()
const { picBedG, updatePicBeds } = usePicBed()
const activeName = ref<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('system')
const showPicBedList = ref<string[]>([])
const galleryPicBedFilterList = ref<string[]>([])
const currentTab = useStorage<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('settings-current-tab', 'system')
// Tab configuration
const tabs = computed(() => [

View File

@@ -103,7 +103,7 @@
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
background: var(--color-background-primary);
background: var(--color-background-secondary);
box-shadow: 0 2px 8px var(--color-border);
}
@@ -1084,7 +1084,7 @@ small {
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 1.5rem;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
background: var(--color-background-secondary);
box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
gap: 1.5rem;
}
@@ -1718,7 +1718,7 @@ small {
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
background: var(--color-background-secondary);
box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
gap: 1.5rem;
}