feat: 增加配置侧边栏深色模式

This commit is contained in:
青芒 2023-12-31 01:49:27 +08:00
parent b5400ed02a
commit 8215934e48
7 changed files with 27 additions and 2 deletions

View File

@ -11,4 +11,5 @@ export default {
isUseTabsRouter: false,
showHeader: true,
brandTheme: '#0052D9',
sideIsDark: 'light',
};

View File

@ -5,7 +5,7 @@
:layout="settingStore.layout"
:is-fixed="settingStore.isSidebarFixed"
:menu="sideMenu"
:theme="settingStore.displayMode"
:theme="settingStore.displaySideMode"
:is-compact="settingStore.isSidebarCompact"
/>
</template>

View File

@ -124,4 +124,14 @@ const getLogo = () => {
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.t-menu--dark {
.@{starter-prefix} {
&-side-nav-logo {
&-tdesign-logo {
color: white;
}
}
}
}
</style>

View File

@ -62,6 +62,9 @@
</div>
</t-radio-group>
<t-form-item :label="$t('layout.setting.sideIsDark')" name="sideIsDark">
<t-switch v-model="formData.sideIsDark" :custom-value="['dark', 'light']" />
</t-form-item>
<t-form-item v-show="formData.layout === 'mix'" label="分割菜单(混合模式下有效)" name="splitMenu">
<t-switch v-model="formData.splitMenu" />
</t-form-item>

View File

@ -32,6 +32,7 @@ export default {
auto: 'Follow System',
},
},
sideIsDark: 'Side Menu Is Dark',
navigationLayout: 'Navigation Layout',
splitMenu: 'Split MenuOnly Mix mode',
fixedSidebar: 'Fixed Sidebar',

View File

@ -32,6 +32,7 @@ export default {
auto: '跟随系统',
},
},
sideIsDark: '侧边栏深色',
navigationLayout: '导航布局',
splitMenu: '分割菜单(混合模式下有效)',
fixedSidebar: '固定侧边栏',

View File

@ -33,6 +33,9 @@ export const useSettingStore = defineStore('setting', {
}
return state.mode as 'dark' | 'light';
},
displaySideMode: (state): 'dark' | 'light' => {
return state.sideIsDark as 'dark' | 'light';
},
},
actions: {
async changeMode(mode: 'dark' | 'light' | 'auto') {
@ -71,6 +74,9 @@ export const useSettingStore = defineStore('setting', {
insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
document.documentElement.setAttribute('theme-color', brandTheme);
},
changeSideTheme(sideTheme: string) {
this.sideIsDark = sideTheme;
},
updateConfig(payload: Partial<TState>) {
for (const key in payload) {
if (payload[key as TStateKey] !== undefined) {
@ -82,6 +88,9 @@ export const useSettingStore = defineStore('setting', {
if (key === 'brandTheme') {
this.changeBrandTheme(payload[key]);
}
if (key === 'sideIsDark') {
this.changeSideTheme(payload[key]);
}
}
},
},