fix: 抽离全局设置的位置

This commit is contained in:
mtruning 2022-01-15 16:07:46 +08:00
parent d2fabeae5f
commit 4bf319dcb4
12 changed files with 46 additions and 59 deletions

View File

@ -112,8 +112,8 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
font-weight: bold; font-weight: bold;
border-radius: 50%; border-radius: 50%;
&.mini { &.mini {
width: 10px; width: 8px;
height: 10px; height: 8px;
margin: 0 2px; margin: 0 2px;
} }
&.disabled { &.disabled {

View File

@ -38,8 +38,6 @@
<script script lang="ts" setup> <script script lang="ts" setup>
import { reactive } from 'vue' import { reactive } from 'vue'
import { ListType } from './index.d' import { ListType } from './index.d'
import { useLangStore } from '@/store/modules/langStore/langStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { SettingStoreEnums } from '@/store/modules/settingStore/settingStore.d' import { SettingStoreEnums } from '@/store/modules/settingStore/settingStore.d'
import { icon } from '@/plugins' import { icon } from '@/plugins'
@ -52,17 +50,15 @@ defineProps({
modelShow: Boolean modelShow: Boolean
}) })
const langStore = useLangStore()
const designStore = useDesignStore()
const settingStore = useSettingStore() const settingStore = useSettingStore()
const list = reactive<ListType[]>([ const list = reactive<ListType[]>([
{ {
key: 'aollapsed', key: SettingStoreEnums.ASIDE_ALL_COLLAPSED,
value: designStore.asideAllCollapsed, value: settingStore.getAsideAllCollapsed,
type: 'switch', type: 'switch',
name: '菜单折叠', name: '菜单折叠',
desc: '左侧菜单全部折叠', desc: '首页菜单折叠时隐藏全部',
}, },
{ {
key: SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY, key: SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY,
@ -72,8 +68,8 @@ const list = reactive<ListType[]>([
desc: '工作空间表单分类只有单项时隐藏', desc: '工作空间表单分类只有单项时隐藏',
}, },
{ {
key: 'lang', key: SettingStoreEnums.CHANGE_LANG_RELOAD,
value: langStore.getReload, value: settingStore.getChangeLangReload,
type: 'switch', type: 'switch',
name: '切换语言', name: '切换语言',
desc: '切换语言重新加载页面', desc: '切换语言重新加载页面',
@ -86,17 +82,7 @@ const closeHandle = () => {
} }
const handleChange = (e: Event, item: ListType) => { const handleChange = (e: Event, item: ListType) => {
switch (item.key) { settingStore.setItem(item.key, item.value)
case 'lang':
langStore.changeReload(item.value)
break
case 'aollapsed':
designStore.changeAsideAllCollapsed()
break
case SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY:
settingStore.setItem(SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY, item.value)
break
}
} }
</script> </script>

View File

@ -43,6 +43,9 @@ export const asideWidth = '270'
// 侧边栏折叠后的宽度,支持全部折叠会覆盖为 0 // 侧边栏折叠后的宽度,支持全部折叠会覆盖为 0
export const asideCollapsedWidth = '60' export const asideCollapsedWidth = '60'
// 弹窗是否可以通过点击遮罩关闭
export const maskClosable = false
// 修改边框圆角 // 修改边框圆角
export const borderRadius = '6px' export const borderRadius = '6px'

View File

@ -1,10 +1,10 @@
// * 系统全局设置 // * 系统全局设置
// 侧边栏是否支持全持全部折叠 // 侧边栏折叠是否隐藏全部
export const asideAllCollapsed = true export const asideAllCollapsed = true
// 弹窗是否可以通过点击遮罩关闭
export const maskClosable = false
// 拖拽页面左侧表单分类只有一项的时候是否隐藏 // 拖拽页面左侧表单分类只有一项的时候是否隐藏
export const hidePackageOneCategory = true export const hidePackageOneCategory = true
// 切换语言是否进行路由刷新
export const changeLangReload = true

View File

@ -9,6 +9,4 @@ export interface DesignStateType {
appTheme: string appTheme: string
//系统内置风格 //系统内置风格
appThemeList: string[] appThemeList: string[]
// 侧边栏是否全收缩
asideAllCollapsed: boolean
} }

View File

@ -1,7 +1,6 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { store } from '@/store' import { store } from '@/store'
import { theme, asideCollapsedWidth } from '@/settings/designSetting' import { theme } from '@/settings/designSetting'
import { asideAllCollapsed } from '@/settings/systemSetting'
import { DesignStateType } from './designStore.d' import { DesignStateType } from './designStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils' import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'
@ -25,8 +24,6 @@ export const useDesignStore = defineStore({
appTheme, appTheme,
// 颜色列表 // 颜色列表
appThemeList, appThemeList,
// 侧边栏
asideAllCollapsed
}, },
getters: { getters: {
getDarkTheme(e): boolean { getDarkTheme(e): boolean {
@ -37,9 +34,6 @@ export const useDesignStore = defineStore({
}, },
getAppThemeList(): string[] { getAppThemeList(): string[] {
return this.appThemeList return this.appThemeList
},
getAsideCollapsedWidth(): string {
return this.asideAllCollapsed ? '0' : asideCollapsedWidth
} }
}, },
actions: { actions: {
@ -48,10 +42,6 @@ export const useDesignStore = defineStore({
this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
setLocalStorage(GO_DESIGN_STORE, this.$state) setLocalStorage(GO_DESIGN_STORE, this.$state)
}, },
changeAsideAllCollapsed(): void {
this.asideAllCollapsed = !this.asideAllCollapsed
setLocalStorage(GO_DESIGN_STORE, this.$state)
}
} }
}) })

View File

@ -2,6 +2,4 @@ import { LangEnum } from '@/enums/styleEnum'
export interface LangStateType { export interface LangStateType {
// 当前语言 // 当前语言
lang: LangEnum, lang: LangEnum,
// 是否刷新
isReload: boolean
} }

View File

@ -5,6 +5,8 @@ import { LangEnum } from '@/enums/styleEnum'
import i18n from '@/i18n/index' import i18n from '@/i18n/index'
import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils' import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
const settingStore = useSettingStore()
const { GO_LANG_STORE } = StorageEnum const { GO_LANG_STORE } = StorageEnum
@ -16,29 +18,20 @@ export const useLangStore = defineStore({
state: (): LangStateType => state: (): LangStateType =>
storageLang || { storageLang || {
lang, lang,
isReload: false
}, },
getters: { getters: {
getLang(): LangEnum { getLang(): LangEnum {
return this.lang return this.lang
},
getReload(): boolean {
return this.isReload
} }
}, },
actions: { actions: {
changeReload(value: boolean): void {
this.isReload = value
setLocalStorage(GO_LANG_STORE, this.$state)
},
changeLang(lang: LangEnum): void { changeLang(lang: LangEnum): void {
if (this.lang === lang) return if (this.lang === lang) return
this.lang = lang this.lang = lang
i18n.global.locale = lang i18n.global.locale = lang
setLocalStorage(GO_LANG_STORE, this.$state) setLocalStorage(GO_LANG_STORE, this.$state)
if (this.getReload) { if (settingStore.getChangeLangReload) {
reloadRoutePage() reloadRoutePage()
} }
} }

View File

@ -1,7 +1,11 @@
export enum SettingStoreEnums { export enum SettingStoreEnums {
HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory', HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
CHANGE_LANG_RELOAD = 'changeLangReload',
ASIDE_ALL_COLLAPSED = 'asideAllCollapsed',
} }
export interface SettingStoreType { export interface SettingStoreType {
[SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean [SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean
[SettingStoreEnums.CHANGE_LANG_RELOAD]: boolean
[SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean
} }

View File

@ -1,5 +1,10 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { hidePackageOneCategory } from '@/settings/systemSetting' import {
hidePackageOneCategory,
changeLangReload,
asideAllCollapsed
} from '@/settings/systemSetting'
import { asideCollapsedWidth } from '@/settings/designSetting'
import { SettingStoreType } from './settingStore.d' import { SettingStoreType } from './settingStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils' import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'
@ -13,15 +18,26 @@ export const useSettingStore = defineStore({
state: (): SettingStoreType => state: (): SettingStoreType =>
storageSetting || { storageSetting || {
hidePackageOneCategory, hidePackageOneCategory,
changeLangReload,
asideAllCollapsed
}, },
getters: { getters: {
getHidePackageOneCategory(): boolean { getHidePackageOneCategory(): boolean {
return this.hidePackageOneCategory return this.hidePackageOneCategory
}, },
getChangeLangReload(): boolean {
return this.changeLangReload
},
getAsideAllCollapsed(): boolean {
return this.asideAllCollapsed
},
getAsideCollapsedWidth(): string {
return this.asideAllCollapsed ? '0' : asideCollapsedWidth
}
}, },
actions: { actions: {
setItem(key: string, value: boolean): void { setItem(key: string, value: boolean): void {
;(this as any)[key] = value ; (this as any)[key] = value
setLocalStorage(GO_SYSTEM_SETTING, this.$state) setLocalStorage(GO_SYSTEM_SETTING, this.$state)
}, },
}, },

View File

@ -1,7 +1,7 @@
import { icon } from '@/plugins' import { icon } from '@/plugins'
import { DialogEnum } from '@/enums/pluginEnum' import { DialogEnum } from '@/enums/pluginEnum'
import { dialogIconSize } from '@/settings/designSetting' import { dialogIconSize } from '@/settings/designSetting'
import { maskClosable } from '@/settings/systemSetting' import { maskClosable } from '@/settings/designSetting'
import { DialogReactive } from 'naive-ui' import { DialogReactive } from 'naive-ui'
const { InformationCircleIcon } = icon.ionicons5 const { InformationCircleIcon } = icon.ionicons5
import { renderIcon } from '@/utils' import { renderIcon } from '@/utils'

View File

@ -22,7 +22,6 @@
:collapsed-width="getAsideCollapsedWidth" :collapsed-width="getAsideCollapsedWidth"
:collapsed-icon-size="22" :collapsed-icon-size="22"
:default-expanded-keys="defaultExpandedKeys" :default-expanded-keys="defaultExpandedKeys"
@update:value="handleUpdateValue"
/> />
</aside> </aside>
<!-- 底部提示 --> <!-- 底部提示 -->
@ -39,11 +38,11 @@ import { Create } from '../Create/index'
import { AsideFooter } from '../AsideFooter/index' import { AsideFooter } from '../AsideFooter/index'
import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting' import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useDesignStore } from '@/store/modules/designStore/designStore' import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { menuOptionsInit, expandedKeys } from './menu' import { menuOptionsInit, expandedKeys } from './menu'
const collapsed = ref<boolean>(false) const collapsed = ref<boolean>(false)
const { getAsideCollapsedWidth } = toRefs(useDesignStore()) const { getAsideCollapsedWidth } = toRefs(useSettingStore())
const route = useRoute() const route = useRoute()
const routeRame = computed(() => route.name) const routeRame = computed(() => route.name)