| | |
| | | import defaultSettings from '@/settings'
|
| | | import { useDark, useToggle } from '@vueuse/core'
|
| | | import { useDynamicTitle } from '@/utils/dynamicTitle'
|
| | |
|
| | | const isDark = useDark()
|
| | | const toggleDark = useToggle(isDark)
|
| | |
|
| | | const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
|
| | |
|
| | | const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
|
| | | const state = {
|
| | | title: '',
|
| | | theme: storageSetting.theme || '#409EFF',
|
| | | sideTheme: storageSetting.sideTheme || sideTheme,
|
| | | showSettings: showSettings,
|
| | | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
| | | tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
|
| | | fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
|
| | | sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
|
| | | dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
|
| | | }
|
| | | const mutations = {
|
| | | CHANGE_SETTING: (state, { key, value }) => {
|
| | | if (state.hasOwnProperty(key)) {
|
| | | state[key] = value
|
| | |
|
| | | const useSettingsStore = defineStore(
|
| | | 'settings',
|
| | | {
|
| | | state: () => ({
|
| | | title: '',
|
| | | theme: storageSetting.theme || '#2C51D9',
|
| | | sideTheme: storageSetting.sideTheme || sideTheme,
|
| | | showSettings: showSettings,
|
| | | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
| | | tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
|
| | | fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
|
| | | sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
|
| | | dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
|
| | | isDark: isDark.value
|
| | | }),
|
| | | actions: {
|
| | | // 修改布局设置
|
| | | changeSetting(data) {
|
| | | const { key, value } = data
|
| | | if (this.hasOwnProperty(key)) {
|
| | | this[key] = value
|
| | | }
|
| | | },
|
| | | // 设置网页标题
|
| | | setTitle(title) {
|
| | | this.title = title
|
| | | useDynamicTitle()
|
| | | },
|
| | | // 切换暗黑模式
|
| | | toggleTheme() {
|
| | | this.isDark = !this.isDark
|
| | | toggleDark()
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | })
|
| | |
|
| | | const actions = {
|
| | | // 修改布局设置
|
| | | changeSetting({ commit }, data) {
|
| | | commit('CHANGE_SETTING', data)
|
| | | },
|
| | | // 设置网页标题
|
| | | setTitle({ commit }, title) {
|
| | | state.title = title
|
| | | useDynamicTitle();
|
| | | }
|
| | | }
|
| | |
|
| | | export default {
|
| | | namespaced: true,
|
| | | state,
|
| | | mutations,
|
| | | actions
|
| | | }
|
| | |
|
| | | export default useSettingsStore
|