jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): refactor theme drawer with tabbed layout for better UX.

Browse Source
This commit is contained in:
Azir
2025-06-14 19:54:43 +08:00
committed by Soybean
parent e89b86ce56
commit 8ba71a0857
19 changed files with 739 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/layouts/modules/theme-drawer/index.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import DarkMode from './modules/dark-mode.vue';
import LayoutMode from './modules/layout-mode.vue';
import ThemeColor from './modules/theme-color.vue';
import PageFun from './modules/page-fun.vue';
import AppearanceSettings from './modules/appearance/index.vue';
import LayoutSettings from './modules/layout/index.vue';
import GeneralSettings from './modules/general/index.vue';
import ConfigOperation from './modules/config-operation.vue';
defineOptions({
@ -12,15 +12,26 @@ defineOptions({
});
const appStore = useAppStore();
const activeTab = ref('appearance');
</script>
<template>
<NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="360">
<NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="460">
<NDrawerContent :title="$t('theme.themeDrawerTitle')" :native-scrollbar="false" closable>
<DarkMode />
<LayoutMode />
<ThemeColor />
<PageFun />
<NTabs v-model:value="activeTab" type="segment" size="medium" class="mb-16px">
<NTab name="appearance" :tab="$t('theme.tabs.appearance')"></NTab>
<NTab name="layout" :tab="$t('theme.tabs.layout')"></NTab>
<NTab name="general" :tab="$t('theme.tabs.general')"></NTab>
</NTabs>
<div class="min-h-400px">
<KeepAlive>
<AppearanceSettings v-if="activeTab === 'appearance'" />
<LayoutSettings v-else-if="activeTab === 'layout'" />
<GeneralSettings v-else-if="activeTab === 'general'" />
</KeepAlive>
</div>
<template #footer>
<ConfigOperation />
</template>
@ -28,4 +39,14 @@ const appStore = useAppStore();
</NDrawer>
</template>
<style scoped></style>
<style scoped>
:deep(.n-tab) {
display: flex;
align-items: center;
gap: 8px;
}
:deep(.n-tab-pane) {
padding: 0;
}
</style>