diff --git a/package.json b/package.json
index 77a463aae..f8e2a94b7 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
},
"dependencies": {
"@iconify/iconify": "^2.0.0-rc.6",
- "@vueuse/core": "^4.8.0",
+ "@vueuse/core": "^4.8.1",
"@zxcvbn-ts/core": "^0.3.0",
"ant-design-vue": "^2.1.2",
"axios": "^0.21.1",
@@ -43,6 +43,7 @@
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0",
+ "pinia": "^2.0.0-alpha.12",
"print-js": "^1.6.0",
"qrcode": "^1.4.4",
"sortablejs": "^1.13.0",
@@ -52,8 +53,6 @@
"vue-i18n": "9.0.0",
"vue-router": "^4.0.6",
"vue-types": "^3.0.2",
- "vuex": "^4.0.0",
- "vuex-module-decorators": "^1.0.1",
"xlsx": "^0.16.9"
},
"devDependencies": {
@@ -81,7 +80,7 @@
"conventional-changelog-cli": "^2.1.1",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
- "eslint": "^7.23.0",
+ "eslint": "^7.24.0",
"eslint-config-prettier": "^8.1.0",
"eslint-define-config": "^1.0.7",
"eslint-plugin-prettier": "^3.3.1",
@@ -115,13 +114,14 @@
"vite-plugin-style-import": "^0.9.2",
"vite-plugin-svg-icons": "^0.4.1",
"vite-plugin-theme": "^0.6.3",
- "vite-plugin-windicss": "0.12.5",
+ "vite-plugin-windicss": "0.13.1",
"vue-eslint-parser": "^7.6.0"
},
"resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china",
- "rollup": "^2.44.0"
+ "rollup": "^2.45.1",
+ "esbuild": "^0.11.6"
},
"repository": {
"type": "git",
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue
index 35e6867ef..d0722bfe2 100644
--- a/src/components/Application/src/AppProvider.vue
+++ b/src/components/Application/src/AppProvider.vue
@@ -3,22 +3,24 @@
import { createAppProviderContext } from './useAppContext';
- import designSetting from '/@/settings/designSetting';
+ import { prefixCls } from '/@/settings/designSetting';
import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
import { propTypes } from '/@/utils/propTypes';
- import { appStore } from '/@/store/modules/app';
+ import { useAppStore } from '/@/store/modules/app';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
export default defineComponent({
name: 'AppProvider',
inheritAttrs: false,
props: {
- prefixCls: propTypes.string.def(designSetting.prefixCls),
+ prefixCls: propTypes.string.def(prefixCls),
},
setup(props, { slots }) {
const isMobile = ref(false);
const isSetState = ref(false);
+ const appStore = useAppStore();
+
createBreakpointListen(({ screenMap, sizeEnum, width }) => {
const lgWidth = screenMap.get(sizeEnum.LG);
if (lgWidth) {
@@ -42,20 +44,20 @@
split: menuSplit,
},
} = appStore.getProjectConfig;
- appStore.commitProjectConfigState({
+ appStore.setProjectConfig({
menuSetting: {
type: MenuTypeEnum.SIDEBAR,
mode: MenuModeEnum.INLINE,
split: false,
},
});
- appStore.commitBeforeMiniState({ menuMode, menuCollapsed, menuType, menuSplit });
+ appStore.setBeforeMiniInfo({ menuMode, menuCollapsed, menuType, menuSplit });
}
} else {
if (unref(isSetState)) {
isSetState.value = false;
- const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniState;
- appStore.commitProjectConfigState({
+ const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniInfo;
+ appStore.setProjectConfig({
menuSetting: {
type: menuType,
mode: menuMode,
diff --git a/src/components/Application/src/search/AppSearchKeyItem.vue b/src/components/Application/src/search/AppSearchKeyItem.vue
index 48af367c0..9f5bf853f 100644
--- a/src/components/Application/src/search/AppSearchKeyItem.vue
+++ b/src/components/Application/src/search/AppSearchKeyItem.vue
@@ -1,17 +1,13 @@
-
+
diff --git a/src/components/SimpleMenu/src/SimpleMenu.vue b/src/components/SimpleMenu/src/SimpleMenu.vue
index 77d67d6e6..1342b308b 100644
--- a/src/components/SimpleMenu/src/SimpleMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleMenu.vue
@@ -6,7 +6,6 @@
:class="prefixCls"
:activeSubMenuNames="activeSubMenuNames"
@select="handleSelect"
- @open-change="handleOpenChange"
>
!unref(getIsSidebarType) && unref(getShowHeader));
-
-const getShowFullHeaderRef = computed(() => {
- return (
- !unref(getFullContent) &&
- unref(getShowMixHeaderRef) &&
- unref(getShowHeader) &&
- !unref(getIsTopMenu) &&
- !unref(getIsMixSidebar)
- );
-});
-
-const getShowInsetHeaderRef = computed(() => {
- const need = !unref(getFullContent) && unref(getShowHeader);
- return (
- (need && !unref(getShowMixHeaderRef)) ||
- (need && unref(getIsTopMenu)) ||
- (need && unref(getIsMixSidebar))
- );
-});
-
-// Get header configuration
-const getHeaderSetting = computed(() => appStore.getProjectConfig.headerSetting);
-
-const getShowDoc = computed(() => unref(getHeaderSetting).showDoc);
-
-const getHeaderTheme = computed(() => unref(getHeaderSetting).theme);
-
-const getShowHeader = computed(() => unref(getHeaderSetting).show);
-
-const getFixed = computed(() => unref(getHeaderSetting).fixed);
-
-const getHeaderBgColor = computed(() => unref(getHeaderSetting).bgColor);
-
-const getShowSearch = computed(() => unref(getHeaderSetting).showSearch);
-
-const getUseLockPage = computed(() => unref(getHeaderSetting).useLockPage);
-
-const getShowFullScreen = computed(() => unref(getHeaderSetting).showFullScreen);
-
-const getShowNotice = computed(() => unref(getHeaderSetting).showNotice);
-
-const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
-
-const getShowBread = computed(() => {
- return (
- unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
- );
-});
-
-const getShowHeaderLogo = computed(() => {
- return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
-});
-
-const getShowContent = computed(() => {
- return unref(getShowBread) || unref(getShowHeaderTrigger);
-});
-
-// Set header configuration
-function setHeaderSetting(headerSetting: Partial): void {
- appStore.commitProjectConfigState({ headerSetting });
-}
-
export function useHeaderSetting() {
+ const { getFullContent } = useFullContent();
+ const appStore = useAppStore();
+
+ const getShowFullHeaderRef = computed(() => {
+ return (
+ !unref(getFullContent) &&
+ unref(getShowMixHeaderRef) &&
+ unref(getShowHeader) &&
+ !unref(getIsTopMenu) &&
+ !unref(getIsMixSidebar)
+ );
+ });
+
+ const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
+
+ const getShowInsetHeaderRef = computed(() => {
+ const need = !unref(getFullContent) && unref(getShowHeader);
+ return (
+ (need && !unref(getShowMixHeaderRef)) ||
+ (need && unref(getIsTopMenu)) ||
+ (need && unref(getIsMixSidebar))
+ );
+ });
+
+ const {
+ getMenuMode,
+ getSplit,
+ getShowHeaderTrigger,
+ getIsSidebarType,
+ getIsMixSidebar,
+ getIsTopMenu,
+ } = useMenuSetting();
+ const { getShowBreadCrumb, getShowLogo } = useRootSetting();
+
+ const getShowMixHeaderRef = computed(() => !unref(getIsSidebarType) && unref(getShowHeader));
+
+ const getShowDoc = computed(() => appStore.getHeaderSetting.showDoc);
+
+ const getHeaderTheme = computed(() => appStore.getHeaderSetting.theme);
+
+ const getShowHeader = computed(() => appStore.getHeaderSetting.show);
+
+ const getFixed = computed(() => appStore.getHeaderSetting.fixed);
+
+ const getHeaderBgColor = computed(() => appStore.getHeaderSetting.bgColor);
+
+ const getShowSearch = computed(() => appStore.getHeaderSetting.showSearch);
+
+ const getUseLockPage = computed(() => appStore.getHeaderSetting.useLockPage);
+
+ const getShowFullScreen = computed(() => appStore.getHeaderSetting.showFullScreen);
+
+ const getShowNotice = computed(() => appStore.getHeaderSetting.showNotice);
+
+ const getShowBread = computed(() => {
+ return (
+ unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
+ );
+ });
+
+ const getShowHeaderLogo = computed(() => {
+ return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
+ });
+
+ const getShowContent = computed(() => {
+ return unref(getShowBread) || unref(getShowHeaderTrigger);
+ });
+
+ // Set header configuration
+ function setHeaderSetting(headerSetting: Partial) {
+ appStore.setProjectConfig({ headerSetting });
+ }
return {
setHeaderSetting,
- getHeaderSetting,
-
getShowDoc,
getShowSearch,
getHeaderTheme,
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index e51345b25..442cbb209 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -2,7 +2,7 @@ import type { MenuSetting } from '/#/config';
import { computed, unref, ref } from 'vue';
-import { appStore } from '/@/store/modules/app';
+import { useAppStore } from '/@/store/modules/app';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
@@ -10,127 +10,129 @@ import { useFullContent } from '/@/hooks/web/useFullContent';
const mixSideHasChildren = ref(false);
-// Get menu configuration
-const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
-
-const getCollapsed = computed(() => unref(getMenuSetting).collapsed);
-
-const getMenuType = computed(() => unref(getMenuSetting).type);
-
-const getMenuMode = computed(() => unref(getMenuSetting).mode);
-
-const getMenuFixed = computed(() => unref(getMenuSetting).fixed);
-
-const getShowMenu = computed(() => unref(getMenuSetting).show);
-
-const getMenuHidden = computed(() => unref(getMenuSetting).hidden);
-
-const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
-
-const getTrigger = computed(() => unref(getMenuSetting).trigger);
-
-const getMenuTheme = computed(() => unref(getMenuSetting).theme);
-
-const getSplit = computed(() => unref(getMenuSetting).split);
-
-const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
-
-const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
-
-const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
-
-const getAccordion = computed(() => unref(getMenuSetting).accordion);
-
-const getMixSideFixed = computed(() => unref(getMenuSetting).mixSideFixed);
-
-const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
-
-const getCloseMixSidebarOnChange = computed(() => unref(getMenuSetting).closeMixSidebarOnChange);
-
-const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
-
-const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
-
-const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
-
-const getShowTopMenu = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
-});
-
-const getShowHeaderTrigger = computed(() => {
- if (unref(getMenuType) === MenuTypeEnum.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
- return false;
- }
-
- return unref(getTrigger) === TriggerEnum.HEADER;
-});
-
-const getIsHorizontal = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
-});
-
-const getIsMixSidebar = computed(() => {
- return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
-});
-
-const getIsMixMode = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
-});
-
-const getRealWidth = computed(() => {
- if (unref(getIsMixSidebar)) {
- return unref(getCollapsed) && !unref(getMixSideFixed)
- ? unref(getMiniWidthNumber)
- : unref(getMenuWidth);
- }
- return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
-});
-
-const getMiniWidthNumber = computed(() => {
- const { collapsedShowTitle } = unref(getMenuSetting);
- return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
-});
-
-const getCalcContentWidth = computed(() => {
- const width =
- unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
- ? 0
- : unref(getIsMixSidebar)
- ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
- (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
- : unref(getRealWidth);
-
- return `calc(100% - ${unref(width)}px)`;
-});
-
-const { getFullContent: fullContent } = useFullContent();
-
-const getShowSidebar = computed(() => {
- return (
- unref(getSplit) ||
- (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent))
- );
-});
-
-// Set menu configuration
-function setMenuSetting(menuSetting: Partial): void {
- appStore.commitProjectConfigState({ menuSetting });
-}
-
-function toggleCollapsed() {
- setMenuSetting({
- collapsed: !unref(getCollapsed),
- });
-}
-
export function useMenuSetting() {
+ const { getFullContent: fullContent } = useFullContent();
+ const appStore = useAppStore();
+
+ const getShowSidebar = computed(() => {
+ return (
+ unref(getSplit) ||
+ (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent))
+ );
+ });
+
+ const getCollapsed = computed(() => appStore.getMenuSetting.collapsed);
+
+ const getMenuType = computed(() => appStore.getMenuSetting.type);
+
+ const getMenuMode = computed(() => appStore.getMenuSetting.mode);
+
+ const getMenuFixed = computed(() => appStore.getMenuSetting.fixed);
+
+ const getShowMenu = computed(() => appStore.getMenuSetting.show);
+
+ const getMenuHidden = computed(() => appStore.getMenuSetting.hidden);
+
+ const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth);
+
+ const getTrigger = computed(() => appStore.getMenuSetting.trigger);
+
+ const getMenuTheme = computed(() => appStore.getMenuSetting.theme);
+
+ const getSplit = computed(() => appStore.getMenuSetting.split);
+
+ const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor);
+
+ const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger);
+
+ const getCanDrag = computed(() => appStore.getMenuSetting.canDrag);
+
+ const getAccordion = computed(() => appStore.getMenuSetting.accordion);
+
+ const getMixSideFixed = computed(() => appStore.getMenuSetting.mixSideFixed);
+
+ const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign);
+
+ const getCloseMixSidebarOnChange = computed(
+ () => appStore.getMenuSetting.closeMixSidebarOnChange
+ );
+
+ const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
+
+ const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
+
+ const getCollapsedShowTitle = computed(() => appStore.getMenuSetting.collapsedShowTitle);
+
+ const getShowTopMenu = computed(() => {
+ return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
+ });
+
+ const getShowHeaderTrigger = computed(() => {
+ if (
+ unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
+ !unref(getShowMenu) ||
+ unref(getMenuHidden)
+ ) {
+ return false;
+ }
+
+ return unref(getTrigger) === TriggerEnum.HEADER;
+ });
+
+ const getIsHorizontal = computed(() => {
+ return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
+ });
+
+ const getIsMixSidebar = computed(() => {
+ return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
+ });
+
+ const getIsMixMode = computed(() => {
+ return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
+ });
+
+ const getRealWidth = computed(() => {
+ if (unref(getIsMixSidebar)) {
+ return unref(getCollapsed) && !unref(getMixSideFixed)
+ ? unref(getMiniWidthNumber)
+ : unref(getMenuWidth);
+ }
+ return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+ });
+
+ const getMiniWidthNumber = computed(() => {
+ const { collapsedShowTitle } = appStore.getMenuSetting;
+ return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+ });
+
+ const getCalcContentWidth = computed(() => {
+ const width =
+ unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
+ ? 0
+ : unref(getIsMixSidebar)
+ ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
+ (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
+ : unref(getRealWidth);
+
+ return `calc(100% - ${unref(width)}px)`;
+ });
+
+ // Set menu configuration
+ function setMenuSetting(menuSetting: Partial): void {
+ appStore.setProjectConfig({ menuSetting });
+ }
+
+ function toggleCollapsed() {
+ setMenuSetting({
+ collapsed: !unref(getCollapsed),
+ });
+ }
return {
setMenuSetting,
toggleCollapsed,
getMenuFixed,
- getMenuSetting,
getRealWidth,
getMenuType,
getMenuMode,
diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
index aae4d387b..7caa75378 100644
--- a/src/hooks/setting/useMultipleTabSetting.ts
+++ b/src/hooks/setting/useMultipleTabSetting.ts
@@ -1,28 +1,25 @@
import type { MultiTabsSetting } from '/#/config';
-import { computed, unref } from 'vue';
+import { computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-
-const getMultipleTabSetting = computed(() => appStore.getProjectConfig.multiTabsSetting);
-
-const getShowMultipleTab = computed(() => unref(getMultipleTabSetting).show);
-
-const getShowQuick = computed(() => unref(getMultipleTabSetting).showQuick);
-
-const getShowRedo = computed(() => unref(getMultipleTabSetting).showRedo);
-
-const getShowFold = computed(() => unref(getMultipleTabSetting).showFold);
-
-function setMultipleTabSetting(multiTabsSetting: Partial) {
- appStore.commitProjectConfigState({ multiTabsSetting });
-}
+import { useAppStore } from '/@/store/modules/app';
export function useMultipleTabSetting() {
+ const appStore = useAppStore();
+
+ const getShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show);
+
+ const getShowQuick = computed(() => appStore.getMultiTabsSetting.showQuick);
+
+ const getShowRedo = computed(() => appStore.getMultiTabsSetting.showRedo);
+
+ const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold);
+
+ function setMultipleTabSetting(multiTabsSetting: Partial) {
+ appStore.setProjectConfig({ multiTabsSetting });
+ }
return {
setMultipleTabSetting,
-
- getMultipleTabSetting,
getShowMultipleTab,
getShowQuick,
getShowRedo,
diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts
index d0848a83c..e08394c77 100644
--- a/src/hooks/setting/useRootSetting.ts
+++ b/src/hooks/setting/useRootSetting.ts
@@ -1,71 +1,71 @@
import type { ProjectConfig } from '/#/config';
-import { computed, unref } from 'vue';
+import { computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-import { ContentEnum } from '/@/enums/appEnum';
-import { ThemeEnum } from '../../enums/appEnum';
+import { useAppStore } from '/@/store/modules/app';
+import { ContentEnum, ThemeEnum } from '/@/enums/appEnum';
type RootSetting = Omit<
ProjectConfig,
'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
>;
-const getRootSetting = computed((): RootSetting => appStore.getProjectConfig);
-
-const getPageLoading = computed(() => appStore.getPageLoading);
-
-const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
-
-const getSettingButtonPosition = computed(() => unref(getRootSetting).settingButtonPosition);
-
-const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
-
-const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
-
-const getShowLogo = computed(() => unref(getRootSetting).showLogo);
-
-const getContentMode = computed(() => unref(getRootSetting).contentMode);
-
-const getUseOpenBackTop = computed(() => unref(getRootSetting).useOpenBackTop);
-
-const getShowSettingButton = computed(() => unref(getRootSetting).showSettingButton);
-
-const getUseErrorHandle = computed(() => unref(getRootSetting).useErrorHandle);
-
-const getShowFooter = computed(() => unref(getRootSetting).showFooter);
-
-const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
-
-const getThemeColor = computed(() => unref(getRootSetting).themeColor);
-
-const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
-
-const getFullContent = computed(() => unref(getRootSetting).fullContent);
-
-const getColorWeak = computed(() => unref(getRootSetting).colorWeak);
-
-const getGrayMode = computed(() => unref(getRootSetting).grayMode);
-
-const getLockTime = computed(() => unref(getRootSetting).lockTime);
-
-const getShowDarkModeToggle = computed(() => unref(getRootSetting).showDarkModeToggle);
-
-const getDarkMode = computed(() => appStore.getDarkMode);
-
-const getLayoutContentMode = computed(() =>
- unref(getRootSetting).contentMode === ContentEnum.FULL ? ContentEnum.FULL : ContentEnum.FIXED
-);
-
-function setRootSetting(setting: Partial) {
- appStore.commitProjectConfigState(setting);
-}
-
-function setDarkMode(mode: ThemeEnum) {
- appStore.commitDarkMode(mode);
-}
-
export function useRootSetting() {
+ const appStore = useAppStore();
+
+ const getPageLoading = computed(() => appStore.getPageLoading);
+
+ const getOpenKeepAlive = computed(() => appStore.getProjectConfig.openKeepAlive);
+
+ const getSettingButtonPosition = computed(() => appStore.getProjectConfig.settingButtonPosition);
+
+ const getCanEmbedIFramePage = computed(() => appStore.getProjectConfig.canEmbedIFramePage);
+
+ const getPermissionMode = computed(() => appStore.getProjectConfig.permissionMode);
+
+ const getShowLogo = computed(() => appStore.getProjectConfig.showLogo);
+
+ const getContentMode = computed(() => appStore.getProjectConfig.contentMode);
+
+ const getUseOpenBackTop = computed(() => appStore.getProjectConfig.useOpenBackTop);
+
+ const getShowSettingButton = computed(() => appStore.getProjectConfig.showSettingButton);
+
+ const getUseErrorHandle = computed(() => appStore.getProjectConfig.useErrorHandle);
+
+ const getShowFooter = computed(() => appStore.getProjectConfig.showFooter);
+
+ const getShowBreadCrumb = computed(() => appStore.getProjectConfig.showBreadCrumb);
+
+ const getThemeColor = computed(() => appStore.getProjectConfig.themeColor);
+
+ const getShowBreadCrumbIcon = computed(() => appStore.getProjectConfig.showBreadCrumbIcon);
+
+ const getFullContent = computed(() => appStore.getProjectConfig.fullContent);
+
+ const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak);
+
+ const getGrayMode = computed(() => appStore.getProjectConfig.grayMode);
+
+ const getLockTime = computed(() => appStore.getProjectConfig.lockTime);
+
+ const getShowDarkModeToggle = computed(() => appStore.getProjectConfig.showDarkModeToggle);
+
+ const getDarkMode = computed(() => appStore.getDarkMode);
+
+ const getLayoutContentMode = computed(() =>
+ appStore.getProjectConfig.contentMode === ContentEnum.FULL
+ ? ContentEnum.FULL
+ : ContentEnum.FIXED
+ );
+
+ function setRootSetting(setting: Partial) {
+ appStore.setProjectConfig(setting);
+ }
+
+ function setDarkMode(mode: ThemeEnum) {
+ appStore.setDarkMode(mode);
+ }
return {
setRootSetting,
@@ -73,7 +73,6 @@ export function useRootSetting() {
getFullContent,
getColorWeak,
getGrayMode,
- getRootSetting,
getLayoutContentMode,
getPageLoading,
getOpenKeepAlive,
diff --git a/src/hooks/setting/useTransitionSetting.ts b/src/hooks/setting/useTransitionSetting.ts
index b073e2b2f..b6d421afb 100644
--- a/src/hooks/setting/useTransitionSetting.ts
+++ b/src/hooks/setting/useTransitionSetting.ts
@@ -1,30 +1,28 @@
import type { TransitionSetting } from '/#/config';
-import { computed, unref } from 'vue';
+import { computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-
-const getTransitionSetting = computed(() => appStore.getProjectConfig.transitionSetting);
-
-const getEnableTransition = computed(() => unref(getTransitionSetting)?.enable);
-
-const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
-
-const getOpenPageLoading = computed((): boolean => {
- return !!unref(getTransitionSetting)?.openPageLoading;
-});
-
-const getBasicTransition = computed(() => unref(getTransitionSetting)?.basicTransition);
-
-function setTransitionSetting(transitionSetting: Partial) {
- appStore.commitProjectConfigState({ transitionSetting });
-}
+import { useAppStore } from '/@/store/modules/app';
export function useTransitionSetting() {
+ const appStore = useAppStore();
+
+ const getEnableTransition = computed(() => appStore.getTransitionSetting?.enable);
+
+ const getOpenNProgress = computed(() => appStore.getTransitionSetting?.openNProgress);
+
+ const getOpenPageLoading = computed((): boolean => {
+ return !!appStore.getTransitionSetting?.openPageLoading;
+ });
+
+ const getBasicTransition = computed(() => appStore.getTransitionSetting?.basicTransition);
+
+ function setTransitionSetting(transitionSetting: Partial) {
+ appStore.setProjectConfig({ transitionSetting });
+ }
return {
setTransitionSetting,
- getTransitionSetting,
getEnableTransition,
getOpenNProgress,
getOpenPageLoading,
diff --git a/src/plugins/echarts/index.ts b/src/hooks/web/useEcharts/echarts.ts
similarity index 100%
rename from src/plugins/echarts/index.ts
rename to src/hooks/web/useEcharts/echarts.ts
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useEcharts/index.ts
similarity index 92%
rename from src/hooks/web/useECharts.ts
rename to src/hooks/web/useEcharts/index.ts
index 01d478a21..eb3cec952 100644
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useEcharts/index.ts
@@ -1,13 +1,15 @@
+import type { EChartsOption } from 'echarts';
+import type { Ref } from 'vue';
+
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { tryOnUnmounted } from '@vueuse/core';
-import { unref, Ref, nextTick, watch, computed, ref } from 'vue';
-import type { EChartsOption } from 'echarts';
+import { unref, nextTick, watch, computed, ref } from 'vue';
import { useDebounce } from '/@/hooks/core/useDebounce';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
-import echarts from '/@/plugins/echarts';
-import { useRootSetting } from '../setting/useRootSetting';
+import echarts from './echarts';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
export function useECharts(
elRef: Ref,
diff --git a/src/hooks/web/useFullContent.ts b/src/hooks/web/useFullContent.ts
index 2791523b5..11e952104 100644
--- a/src/hooks/web/useFullContent.ts
+++ b/src/hooks/web/useFullContent.ts
@@ -1,6 +1,6 @@
import { computed, unref } from 'vue';
-import { appStore } from '/@/store/modules/app';
+import { useAppStore } from '/@/store/modules/app';
import router from '/@/router';
@@ -8,6 +8,7 @@ import router from '/@/router';
* @description: Full screen display content
*/
export const useFullContent = () => {
+ const appStore = useAppStore();
const { currentRoute } = router;
// Whether to display the content in full screen without displaying the menu
diff --git a/src/hooks/web/useLockPage.ts b/src/hooks/web/useLockPage.ts
index 9c2e211e9..1d0e722e4 100644
--- a/src/hooks/web/useLockPage.ts
+++ b/src/hooks/web/useLockPage.ts
@@ -1,13 +1,18 @@
import { computed, onUnmounted, unref, watchEffect } from 'vue';
import { useThrottle } from '/@/hooks/core/useThrottle';
-import { appStore } from '/@/store/modules/app';
-import { lockStore } from '/@/store/modules/lock';
-import { userStore } from '/@/store/modules/user';
+import { useAppStore } from '/@/store/modules/app';
+import { useLockStore } from '/@/store/modules/lock';
+
+import { useUserStore } from '/@/store/modules/user';
import { useRootSetting } from '../setting/useRootSetting';
export function useLockPage() {
const { getLockTime } = useRootSetting();
+ const lockStore = useLockStore();
+ const userStore = useUserStore();
+ const appStore = useAppStore();
+
let timeId: TimeoutHandle;
function clear(): void {
@@ -16,7 +21,7 @@ export function useLockPage() {
function resetCalcLockTimeout(): void {
// not login
- if (!userStore.getTokenState) {
+ if (!userStore.getToken) {
clear();
return;
}
@@ -33,14 +38,14 @@ export function useLockPage() {
}
function lockPage(): void {
- lockStore.commitLockInfoState({
+ lockStore.setLockInfo({
isLock: true,
pwd: undefined,
});
}
watchEffect((onClean) => {
- if (userStore.getTokenState) {
+ if (userStore.getToken) {
resetCalcLockTimeout();
} else {
clear();
diff --git a/src/hooks/web/usePage.ts b/src/hooks/web/usePage.ts
index 365f52585..c05e420a7 100644
--- a/src/hooks/web/usePage.ts
+++ b/src/hooks/web/usePage.ts
@@ -1,10 +1,10 @@
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationRaw, Router } from 'vue-router';
import { PageEnum } from '/@/enums/pageEnum';
import { isString } from '/@/utils/is';
import { unref } from 'vue';
-import router from '/@/router';
+import { useRouter } from 'vue-router';
export type RouteLocationRawEx = Omit & { path: PageEnum };
@@ -13,10 +13,16 @@ function handleError(e: Error) {
}
// page switch
-export function useGo() {
- const { push, replace } = router;
+export function useGo(_router?: Router) {
+ let router;
+ if (!_router) {
+ router = useRouter();
+ }
+ const { push, replace } = _router || router;
function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
- if (!opt) return;
+ if (!opt) {
+ return;
+ }
if (isString(opt)) {
isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
} else {
@@ -30,8 +36,12 @@ export function useGo() {
/**
* @description: redo current page
*/
-export const useRedo = () => {
- const { push, currentRoute } = router;
+export const useRedo = (_router?: Router) => {
+ let router;
+ if (!_router) {
+ router = useRouter();
+ }
+ const { push, currentRoute } = _router || router;
const { query, params } = currentRoute.value;
function redo(): Promise {
return new Promise((resolve) => {
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
index e444dd516..43f522b65 100644
--- a/src/hooks/web/usePermission.ts
+++ b/src/hooks/web/usePermission.ts
@@ -1,8 +1,8 @@
import type { RouteRecordRaw } from 'vue-router';
-import { appStore } from '/@/store/modules/app';
-import { permissionStore } from '/@/store/modules/permission';
-import { userStore } from '/@/store/modules/user';
+import { useAppStore } from '/@/store/modules/app';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { useUserStore } from '/@/store/modules/user';
import { useTabs } from './useTabs';
@@ -15,15 +15,20 @@ import { RoleEnum } from '/@/enums/roleEnum';
import { intersection } from 'lodash-es';
import { isArray } from '/@/utils/is';
-import { tabStore } from '/@/store/modules/tab';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
// User permissions related operations
export function usePermission() {
+ const userStore = useUserStore();
+ const appStore = useAppStore();
+ const permissionStore = usePermissionStore();
+ const { closeAll } = useTabs(router);
+
/**
* Change permission mode
*/
async function togglePermissionMode() {
- appStore.commitProjectConfigState({
+ appStore.setProjectConfig({
permissionMode:
projectSetting.permissionMode === PermissionModeEnum.BACK
? PermissionModeEnum.ROLE
@@ -37,14 +42,14 @@ export function usePermission() {
* @param id
*/
async function resume(id?: string | number) {
- tabStore.commitClearCache();
+ const tabStore = useMultipleTabStore();
+ tabStore.clearCacheTabs();
resetRouter();
const routes = await permissionStore.buildRoutesAction(id);
routes.forEach((route) => {
router.addRoute((route as unknown) as RouteRecordRaw);
});
- permissionStore.commitLastBuildMenuTimeState();
- const { closeAll } = useTabs();
+ permissionStore.setLastBuildMenuTime();
closeAll();
}
@@ -53,22 +58,24 @@ export function usePermission() {
*/
function hasPermission(value?: RoleEnum | RoleEnum[] | string | string[], def = true): boolean {
const permMode = projectSetting.permissionMode;
+
if (PermissionModeEnum.ROLE === permMode) {
// Visible by default
if (!value) {
return def;
}
if (!isArray(value)) {
- return userStore.getRoleListState?.includes(value as RoleEnum);
+ return userStore.getRoleList?.includes(value as RoleEnum);
}
- return (intersection(value, userStore.getRoleListState) as RoleEnum[]).length > 0;
+ return (intersection(value, userStore.getRoleList) as RoleEnum[]).length > 0;
}
+
if (PermissionModeEnum.BACK === permMode) {
// Visible by default
if (!value) {
return def;
}
- const allCodeList = permissionStore.getPermCodeListState;
+ const allCodeList = permissionStore.getPermCodeList;
if (!isArray(value)) {
return allCodeList.includes(value as string);
}
@@ -90,7 +97,7 @@ export function usePermission() {
if (!isArray(roles)) {
roles = [roles];
}
- userStore.commitRoleListState(roles);
+ userStore.setRoleList(roles);
await resume();
}
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
index b0bf1a431..ca00ea2cd 100644
--- a/src/hooks/web/useTabs.ts
+++ b/src/hooks/web/useTabs.ts
@@ -1,28 +1,85 @@
-import { tabStore } from '/@/store/modules/tab';
-import { appStore } from '/@/store/modules/app';
-import type { RouteLocationNormalized } from 'vue-router';
+import type { RouteLocationNormalized, Router } from 'vue-router';
-export function useTabs() {
- function canIUseFn(): boolean {
- const { multiTabsSetting: { show } = {} } = appStore.getProjectConfig;
+import { useRouter } from 'vue-router';
+import { unref } from 'vue';
+
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useAppStore } from '/@/store/modules/app';
+
+enum TableActionEnum {
+ REFRESH,
+ CLOSE_ALL,
+ CLOSE_LEFT,
+ CLOSE_RIGHT,
+ CLOSE_OTHER,
+ CLOSE_CURRENT,
+ CLOSE,
+}
+
+export function useTabs(_router: Router) {
+ const appStore = useAppStore();
+
+ function canIUseTabs(): boolean {
+ const { show } = appStore.getMultiTabsSetting;
if (!show) {
throw new Error('The multi-tab page is currently not open, please open it in the settings！');
}
return !!show;
}
+ const tabStore = useMultipleTabStore();
+ const router = _router || useRouter();
+
+ const { currentRoute } = router;
+
+ function getCurrentTab() {
+ const route = unref(currentRoute);
+ return tabStore.getTabList.find((item) => item.path === route.path)!;
+ }
+
+ async function handleTabAction(action: TableActionEnum, tab?: RouteLocationNormalized) {
+ const canIUse = canIUseTabs;
+ if (!canIUse) {
+ return;
+ }
+ const currentTab = getCurrentTab();
+ switch (action) {
+ case TableActionEnum.REFRESH:
+ await tabStore.refreshPage(router);
+ break;
+
+ case TableActionEnum.CLOSE_ALL:
+ await tabStore.closeAllTab(router);
+ break;
+
+ case TableActionEnum.CLOSE_LEFT:
+ await tabStore.closeLeftTabs(currentTab, router);
+ break;
+
+ case TableActionEnum.CLOSE_RIGHT:
+ await tabStore.closeRightTabs(currentTab, router);
+ break;
+
+ case TableActionEnum.CLOSE_OTHER:
+ await tabStore.closeOtherTabs(currentTab, router);
+ break;
+
+ case TableActionEnum.CLOSE_CURRENT:
+ case TableActionEnum.CLOSE:
+ await tabStore.closeTab(tab || currentTab, router);
+ break;
+ }
+ }
+
return {
- refreshPage: async () => {
- if (canIUseFn()) {
- await tabStore.commitRedoPage();
- }
+ refreshPage: () => handleTabAction(TableActionEnum.REFRESH),
+ closeAll: () => handleTabAction(TableActionEnum.CLOSE_ALL),
+ closeLeft: () => handleTabAction(TableActionEnum.CLOSE_LEFT),
+ closeRight: () => handleTabAction(TableActionEnum.CLOSE_RIGHT),
+ closeOther: () => handleTabAction(TableActionEnum.CLOSE_OTHER),
+ closeCurrent: () => handleTabAction(TableActionEnum.CLOSE_CURRENT),
+ close: (tab?: RouteLocationNormalized) => {
+ handleTabAction(TableActionEnum.CLOSE, tab);
},
- closeAll: () => canIUseFn() && tabStore.closeAllTabAction(),
- closeLeft: () => canIUseFn() && tabStore.closeLeftTabAction(tabStore.getCurrentTab),
- closeRight: () => canIUseFn() && tabStore.closeRightTabAction(tabStore.getCurrentTab),
- closeOther: () => canIUseFn() && tabStore.closeOtherTabAction(tabStore.getCurrentTab),
- closeCurrent: () => canIUseFn() && tabStore.closeTabAction(tabStore.getCurrentTab),
- close: (tab?: RouteLocationNormalized) =>
- canIUseFn() && tabStore.closeTabAction(tab || tabStore.getCurrentTab),
};
}
diff --git a/src/layouts/default/header/components/ErrorAction.vue b/src/layouts/default/header/components/ErrorAction.vue
index 7ed2522be..243e58700 100644
--- a/src/layouts/default/header/components/ErrorAction.vue
+++ b/src/layouts/default/header/components/ErrorAction.vue
@@ -5,7 +5,7 @@
:mouseEnterDelay="0.5"
@click="handleToErrorList"
>
-
+
@@ -16,7 +16,7 @@
import Icon from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
- import { errorStore } from '/@/store/modules/error';
+ import { useErrorLogStore } from '/@/store/modules/errorLog';
import { PageEnum } from '/@/enums/pageEnum';
import { useRouter } from 'vue-router';
@@ -28,14 +28,13 @@
setup() {
const { t } = useI18n();
const { push } = useRouter();
+ const errorLogStore = useErrorLogStore();
- const getCount = computed(() => {
- return errorStore.getErrorListCountState;
- });
+ const getCount = computed(() => errorLogStore.getErrorLogListCount);
function handleToErrorList() {
push(PageEnum.ERROR_LOG_PAGE).then(() => {
- errorStore.commitErrorListCountState(0);
+ errorLogStore.setErrorLogListCount(0);
});
}
diff --git a/src/layouts/default/header/components/lock/LockModal.vue b/src/layouts/default/header/components/lock/LockModal.vue
index e9a3de999..698b7629f 100644
--- a/src/layouts/default/header/components/lock/LockModal.vue
+++ b/src/layouts/default/header/components/lock/LockModal.vue
@@ -31,8 +31,8 @@
import { BasicModal, useModalInner } from '/@/components/Modal/index';
import { BasicForm, useForm } from '/@/components/Form/index';
- import { userStore } from '/@/store/modules/user';
- import { lockStore } from '/@/store/modules/lock';
+ import { useUserStore } from '/@/store/modules/user';
+ import { useLockStore } from '/@/store/modules/lock';
import headerImg from '/@/assets/images/header.jpg';
export default defineComponent({
name: 'LockModal',
@@ -41,10 +41,10 @@
setup() {
const { t } = useI18n();
const { prefixCls } = useDesign('header-lock-modal');
+ const userStore = useUserStore();
+ const lockStore = useLockStore();
- const getRealName = computed(() => {
- return userStore.getUserInfoState?.realName;
- });
+ const getRealName = computed(() => userStore.getUserInfo?.realName);
const [register, { closeModal }] = useModalInner();
const [registerForm, { validateFields, resetFields }] = useForm({
@@ -64,7 +64,7 @@
const password: string | undefined = values.password;
closeModal();
- lockStore.commitLockInfoState({
+ lockStore.setLockInfo({
isLock: true,
pwd: password,
});
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index 24481dca7..38646154f 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -41,7 +41,7 @@
import { DOC_URL } from '/@/settings/siteSetting';
- import { userStore } from '/@/store/modules/user';
+ import { useUserStore } from '/@/store/modules/user';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
@@ -71,9 +71,10 @@
const { prefixCls } = useDesign('header-user-dropdown');
const { t } = useI18n();
const { getShowDoc } = useHeaderSetting();
+ const userStore = useUserStore();
const getUserInfo = computed(() => {
- const { realName = '', desc } = userStore.getUserInfoState || {};
+ const { realName = '', desc } = userStore.getUserInfo || {};
return { realName, desc };
});
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index 0aa84714f..5bbab79bc 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -42,13 +42,9 @@
},
setup() {
const { prefixCls } = useDesign('default-layout');
-
const { getIsMobile } = useAppInject();
-
const { getShowFullHeaderRef } = useHeaderSetting();
-
const { getShowSidebar, getIsMixSidebar } = useMenuSetting();
-
const layoutClass = computed(() => ({ 'ant-layout-has-sider': unref(getIsMixSidebar) }));
return {
diff --git a/src/layouts/default/menu/useLayoutMenu.ts b/src/layouts/default/menu/useLayoutMenu.ts
index 9b280b576..aa00d19ae 100644
--- a/src/layouts/default/menu/useLayoutMenu.ts
+++ b/src/layouts/default/menu/useLayoutMenu.ts
@@ -9,7 +9,7 @@ import { useThrottle } from '/@/hooks/core/useThrottle';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
-import { permissionStore } from '/@/store/modules/permission';
+import { usePermissionStore } from '/@/store/modules/permission';
import { useAppInject } from '/@/hooks/web/useAppInject';
export function useSplitMenu(splitType: Ref) {
@@ -17,6 +17,7 @@ export function useSplitMenu(splitType: Ref) {
const menusRef = ref([]);
const { currentRoute } = useRouter();
const { getIsMobile } = useAppInject();
+ const permissionStore = usePermissionStore();
const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting();
const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
@@ -55,7 +56,7 @@ export function useSplitMenu(splitType: Ref) {
// Menu changes
watch(
- [() => permissionStore.getLastBuildMenuTimeState, () => permissionStore.getBackMenuListState],
+ [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
() => {
genMenus();
},
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
index 7ba4d1a4d..6ce21c738 100644
--- a/src/layouts/default/setting/components/SettingFooter.vue
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -21,32 +21,36 @@
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
- import { appStore } from '/@/store/modules/app';
- import { permissionStore } from '/@/store/modules/permission';
- import { tabStore } from '/@/store/modules/tab';
- import { userStore } from '/@/store/modules/user';
+ import { useAppStore } from '/@/store/modules/app';
+ import { usePermissionStore } from '/@/store/modules/permission';
+ import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+ import { useUserStore } from '/@/store/modules/user';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
- import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
-
import defaultSetting from '/@/settings/projectSetting';
+
export default defineComponent({
name: 'SettingFooter',
components: { CopyOutlined, RedoOutlined },
setup() {
- const { getRootSetting } = useRootSetting();
+ const permissionStore = usePermissionStore();
const { prefixCls } = useDesign('setting-footer');
const { t } = useI18n();
const { createSuccessModal, createMessage } = useMessage();
+ const tabStore = useMultipleTabStore();
+ const userStore = useUserStore();
+ const appStore = useAppStore();
function handleCopy() {
- const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(getRootSetting), null, 2));
+ const { isSuccessRef } = useCopyToClipboard(
+ JSON.stringify(unref(appStore.getProjectConfig), null, 2)
+ );
unref(isSuccessRef) &&
createSuccessModal({
title: t('layout.setting.operatingTitle'),
@@ -55,7 +59,7 @@
}
function handleResetSetting() {
try {
- appStore.commitProjectConfigState(defaultSetting);
+ appStore.setProjectConfig(defaultSetting);
const { colorWeak, grayMode } = defaultSetting;
// updateTheme(themeColor);
updateColorWeak(colorWeak);
@@ -68,10 +72,10 @@
function handleClearAndRedo() {
localStorage.clear();
- appStore.resumeAllState();
- permissionStore.commitResetState();
- tabStore.commitResetState();
- userStore.commitResetState();
+ appStore.resetAllState();
+ permissionStore.resetState();
+ tabStore.resetState();
+ userStore.resetState();
location.reload();
}
return {
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
index c0574639f..0909008a6 100644
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -3,15 +3,16 @@ import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updat
import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
-import { appStore } from '/@/store/modules/app';
+import { useAppStore } from '/@/store/modules/app';
import { ProjectConfig } from '/#/config';
import { changeTheme } from '/@/logics/theme';
import { updateDarkTheme } from '/@/logics/theme/dark';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
export function baseHandler(event: HandlerEnum, value: any) {
+ const appStore = useAppStore();
const config = handler(event, value);
- appStore.commitProjectConfigState(config);
+ appStore.setProjectConfig(config);
if (event === HandlerEnum.CHANGE_THEME) {
updateHeaderBgColor();
updateSidebarBgColor();
@@ -19,6 +20,8 @@ export function baseHandler(event: HandlerEnum, value: any) {
}
export function handler(event: HandlerEnum, value: any): DeepPartial {
+ const appStore = useAppStore();
+
const { getThemeColor, getDarkMode } = useRootSetting();
switch (event) {
case HandlerEnum.CHANGE_LAYOUT:
@@ -50,7 +53,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial
diff --git a/src/layouts/default/tabs/components/TabContent.vue b/src/layouts/default/tabs/components/TabContent.vue
index 3ebe4a69f..fc190c221 100644
--- a/src/layouts/default/tabs/components/TabContent.vue
+++ b/src/layouts/default/tabs/components/TabContent.vue
@@ -1,9 +1,8 @@
-
+
{{ getTitle }}
-
@@ -11,18 +10,18 @@
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 5ea76a5fe..2c9fcf494 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -8,13 +8,20 @@ html[data-theme='dark'] {
}
}
+html[data-theme='light'] {
+ .@{prefix-cls} {
+ .ant-tabs-tab:not(.ant-tabs-tab-active) {
+ border: 1px solid #d9d9d9 !important;
+ }
+ }
+}
+
.@{prefix-cls} {
z-index: 10;
height: @multiple-height + 2;
line-height: @multiple-height + 2;
background: @component-background;
border-bottom: 1px solid @border-color-base;
- box-shadow: 0 1px 2px 0 rgba(29, 35, 41, 0.05);
.ant-tabs-small {
height: @multiple-height;
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
index 9800420fa..ad3028811 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -20,26 +20,26 @@
-
+