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;
border-radius: 50%;
&.mini {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
margin: 0 2px;
}
&.disabled {

View File

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

View File

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

View File

@ -1,10 +1,10 @@
// * 系统全局设置
// 侧边栏是否支持全持全部折叠
// 侧边栏折叠是否隐藏全部
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
//系统内置风格
appThemeList: string[]
// 侧边栏是否全收缩
asideAllCollapsed: boolean
}

View File

@ -1,7 +1,6 @@
import { defineStore } from 'pinia'
import { store } from '@/store'
import { theme, asideCollapsedWidth } from '@/settings/designSetting'
import { asideAllCollapsed } from '@/settings/systemSetting'
import { theme } from '@/settings/designSetting'
import { DesignStateType } from './designStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
@ -25,8 +24,6 @@ export const useDesignStore = defineStore({
appTheme,
// 颜色列表
appThemeList,
// 侧边栏
asideAllCollapsed
},
getters: {
getDarkTheme(e): boolean {
@ -37,9 +34,6 @@ export const useDesignStore = defineStore({
},
getAppThemeList(): string[] {
return this.appThemeList
},
getAsideCollapsedWidth(): string {
return this.asideAllCollapsed ? '0' : asideCollapsedWidth
}
},
actions: {
@ -48,10 +42,6 @@ export const useDesignStore = defineStore({
this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
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 {
// 当前语言
lang: LangEnum,
// 是否刷新
isReload: boolean
}

View File

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

View File

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

View File

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

View File

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