diff --git a/package.json b/package.json
index 77a463aaef8cd213bb8015caa652aa4b82fe8991..f8e2a94b743244d533789b08439e6b602c5f9afe 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 35e6867ef21babd3954e468e95f7d06b2cb2898d..d0722bfe220cd57e98208dcf8c5f5979be7012f3 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 48af367c06a8edf1963f53032adf3ed99543fbc7..9f5bf853f600ba2ee7cddf842f1b0a56ecc076b3 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 77d67d6e644a790f2d2fb2762cdc90bb47630b9d..1342b308b9403e836af2c06faaa188bcb5ed7279 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));
+export function useHeaderSetting() {
+ const { getFullContent } = useFullContent();
+ const appStore = useAppStore();
-const getShowFullHeaderRef = computed(() => {
- return (
- !unref(getFullContent) &&
- unref(getShowMixHeaderRef) &&
- unref(getShowHeader) &&
- !unref(getIsTopMenu) &&
- !unref(getIsMixSidebar)
- );
-});
+ 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))
- );
-});
+ const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
-// Get header configuration
-const getHeaderSetting = computed(() => appStore.getProjectConfig.headerSetting);
+ const getShowInsetHeaderRef = computed(() => {
+ const need = !unref(getFullContent) && unref(getShowHeader);
+ return (
+ (need && !unref(getShowMixHeaderRef)) ||
+ (need && unref(getIsTopMenu)) ||
+ (need && unref(getIsMixSidebar))
+ );
+ });
-const getShowDoc = computed(() => unref(getHeaderSetting).showDoc);
+ const {
+ getMenuMode,
+ getSplit,
+ getShowHeaderTrigger,
+ getIsSidebarType,
+ getIsMixSidebar,
+ getIsTopMenu,
+ } = useMenuSetting();
+ const { getShowBreadCrumb, getShowLogo } = useRootSetting();
-const getHeaderTheme = computed(() => unref(getHeaderSetting).theme);
+ const getShowMixHeaderRef = computed(() => !unref(getIsSidebarType) && unref(getShowHeader));
-const getShowHeader = computed(() => unref(getHeaderSetting).show);
+ const getShowDoc = computed(() => appStore.getHeaderSetting.showDoc);
-const getFixed = computed(() => unref(getHeaderSetting).fixed);
+ const getHeaderTheme = computed(() => appStore.getHeaderSetting.theme);
-const getHeaderBgColor = computed(() => unref(getHeaderSetting).bgColor);
+ const getShowHeader = computed(() => appStore.getHeaderSetting.show);
-const getShowSearch = computed(() => unref(getHeaderSetting).showSearch);
+ const getFixed = computed(() => appStore.getHeaderSetting.fixed);
-const getUseLockPage = computed(() => unref(getHeaderSetting).useLockPage);
+ const getHeaderBgColor = computed(() => appStore.getHeaderSetting.bgColor);
-const getShowFullScreen = computed(() => unref(getHeaderSetting).showFullScreen);
+ const getShowSearch = computed(() => appStore.getHeaderSetting.showSearch);
-const getShowNotice = computed(() => unref(getHeaderSetting).showNotice);
+ const getUseLockPage = computed(() => appStore.getHeaderSetting.useLockPage);
-const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
+ const getShowFullScreen = computed(() => appStore.getHeaderSetting.showFullScreen);
-const getShowBread = computed(() => {
- return (
- unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
- );
-});
+ const getShowNotice = computed(() => appStore.getHeaderSetting.showNotice);
-const getShowHeaderLogo = computed(() => {
- return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
-});
+ const getShowBread = computed(() => {
+ return (
+ unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
+ );
+ });
-const getShowContent = computed(() => {
- return unref(getShowBread) || unref(getShowHeaderTrigger);
-});
+ const getShowHeaderLogo = computed(() => {
+ return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
+ });
-// Set header configuration
-function setHeaderSetting(headerSetting: Partial): void {
- appStore.commitProjectConfigState({ headerSetting });
-}
+ const getShowContent = computed(() => {
+ return unref(getShowBread) || unref(getShowHeaderTrigger);
+ });
-export function useHeaderSetting() {
+ // 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 e51345b25f31c898067eaa94fd7803dc3995bde0..442cbb209eb730abbd75402937cfd18d725a1caa 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);
+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(() => unref(getMenuSetting).collapsed);
+ const getCollapsed = computed(() => appStore.getMenuSetting.collapsed);
-const getMenuType = computed(() => unref(getMenuSetting).type);
+ const getMenuType = computed(() => appStore.getMenuSetting.type);
-const getMenuMode = computed(() => unref(getMenuSetting).mode);
+ const getMenuMode = computed(() => appStore.getMenuSetting.mode);
-const getMenuFixed = computed(() => unref(getMenuSetting).fixed);
+ const getMenuFixed = computed(() => appStore.getMenuSetting.fixed);
-const getShowMenu = computed(() => unref(getMenuSetting).show);
+ const getShowMenu = computed(() => appStore.getMenuSetting.show);
-const getMenuHidden = computed(() => unref(getMenuSetting).hidden);
+ const getMenuHidden = computed(() => appStore.getMenuSetting.hidden);
-const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
+ const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth);
-const getTrigger = computed(() => unref(getMenuSetting).trigger);
+ const getTrigger = computed(() => appStore.getMenuSetting.trigger);
-const getMenuTheme = computed(() => unref(getMenuSetting).theme);
+ const getMenuTheme = computed(() => appStore.getMenuSetting.theme);
-const getSplit = computed(() => unref(getMenuSetting).split);
+ const getSplit = computed(() => appStore.getMenuSetting.split);
-const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
+ const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor);
-const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
+ const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger);
-const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
+ const getCanDrag = computed(() => appStore.getMenuSetting.canDrag);
-const getAccordion = computed(() => unref(getMenuSetting).accordion);
+ const getAccordion = computed(() => appStore.getMenuSetting.accordion);
-const getMixSideFixed = computed(() => unref(getMenuSetting).mixSideFixed);
+ const getMixSideFixed = computed(() => appStore.getMenuSetting.mixSideFixed);
-const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
+ const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign);
-const getCloseMixSidebarOnChange = computed(() => unref(getMenuSetting).closeMixSidebarOnChange);
+ const getCloseMixSidebarOnChange = computed(
+ () => appStore.getMenuSetting.closeMixSidebarOnChange
+ );
-const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
+ const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
-const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
+ const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
-const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
+ const getCollapsedShowTitle = computed(() => appStore.getMenuSetting.collapsedShowTitle);
-const getShowTopMenu = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
-});
+ 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;
- }
+ const getShowHeaderTrigger = computed(() => {
+ if (
+ unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
+ !unref(getShowMenu) ||
+ unref(getMenuHidden)
+ ) {
+ return false;
+ }
- return unref(getTrigger) === TriggerEnum.HEADER;
-});
+ return unref(getTrigger) === TriggerEnum.HEADER;
+ });
-const getIsHorizontal = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
-});
+ const getIsHorizontal = computed(() => {
+ return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
+ });
-const getIsMixSidebar = computed(() => {
- return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
-});
+ const getIsMixSidebar = computed(() => {
+ return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
+ });
-const getIsMixMode = computed(() => {
- return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
-});
+ 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))
- );
-});
+ const getRealWidth = computed(() => {
+ if (unref(getIsMixSidebar)) {
+ return unref(getCollapsed) && !unref(getMixSideFixed)
+ ? unref(getMiniWidthNumber)
+ : unref(getMenuWidth);
+ }
+ return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+ });
-// Set menu configuration
-function setMenuSetting(menuSetting: Partial): void {
- appStore.commitProjectConfigState({ menuSetting });
-}
+ 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);
-function toggleCollapsed() {
- setMenuSetting({
- collapsed: !unref(getCollapsed),
+ return `calc(100% - ${unref(width)}px)`;
});
-}
-export function useMenuSetting() {
+ // 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 aae4d387b65a3b01f3ab46b5735028fa540ec682..7caa753788a5e2e7b6ac275ea7aed841f4c933df 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';
+import { useAppStore } from '/@/store/modules/app';
-const getMultipleTabSetting = computed(() => appStore.getProjectConfig.multiTabsSetting);
-
-const getShowMultipleTab = computed(() => unref(getMultipleTabSetting).show);
+export function useMultipleTabSetting() {
+ const appStore = useAppStore();
-const getShowQuick = computed(() => unref(getMultipleTabSetting).showQuick);
+ const getShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show);
-const getShowRedo = computed(() => unref(getMultipleTabSetting).showRedo);
+ const getShowQuick = computed(() => appStore.getMultiTabsSetting.showQuick);
-const getShowFold = computed(() => unref(getMultipleTabSetting).showFold);
+ const getShowRedo = computed(() => appStore.getMultiTabsSetting.showRedo);
-function setMultipleTabSetting(multiTabsSetting: Partial) {
- appStore.commitProjectConfigState({ multiTabsSetting });
-}
+ const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold);
-export function useMultipleTabSetting() {
+ 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 d0848a83c3d740d40e54ca28d812eb710b77314e..e08394c77cf90e5c468be24e2ba3f28acbf6ae18 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);
+export function useRootSetting() {
+ const appStore = useAppStore();
-const getPageLoading = computed(() => appStore.getPageLoading);
+ const getPageLoading = computed(() => appStore.getPageLoading);
-const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
+ const getOpenKeepAlive = computed(() => appStore.getProjectConfig.openKeepAlive);
-const getSettingButtonPosition = computed(() => unref(getRootSetting).settingButtonPosition);
+ const getSettingButtonPosition = computed(() => appStore.getProjectConfig.settingButtonPosition);
-const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
+ const getCanEmbedIFramePage = computed(() => appStore.getProjectConfig.canEmbedIFramePage);
-const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
+ const getPermissionMode = computed(() => appStore.getProjectConfig.permissionMode);
-const getShowLogo = computed(() => unref(getRootSetting).showLogo);
+ const getShowLogo = computed(() => appStore.getProjectConfig.showLogo);
-const getContentMode = computed(() => unref(getRootSetting).contentMode);
+ const getContentMode = computed(() => appStore.getProjectConfig.contentMode);
-const getUseOpenBackTop = computed(() => unref(getRootSetting).useOpenBackTop);
+ const getUseOpenBackTop = computed(() => appStore.getProjectConfig.useOpenBackTop);
-const getShowSettingButton = computed(() => unref(getRootSetting).showSettingButton);
+ const getShowSettingButton = computed(() => appStore.getProjectConfig.showSettingButton);
-const getUseErrorHandle = computed(() => unref(getRootSetting).useErrorHandle);
+ const getUseErrorHandle = computed(() => appStore.getProjectConfig.useErrorHandle);
-const getShowFooter = computed(() => unref(getRootSetting).showFooter);
+ const getShowFooter = computed(() => appStore.getProjectConfig.showFooter);
-const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
+ const getShowBreadCrumb = computed(() => appStore.getProjectConfig.showBreadCrumb);
-const getThemeColor = computed(() => unref(getRootSetting).themeColor);
+ const getThemeColor = computed(() => appStore.getProjectConfig.themeColor);
-const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
+ const getShowBreadCrumbIcon = computed(() => appStore.getProjectConfig.showBreadCrumbIcon);
-const getFullContent = computed(() => unref(getRootSetting).fullContent);
+ const getFullContent = computed(() => appStore.getProjectConfig.fullContent);
-const getColorWeak = computed(() => unref(getRootSetting).colorWeak);
+ const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak);
-const getGrayMode = computed(() => unref(getRootSetting).grayMode);
+ const getGrayMode = computed(() => appStore.getProjectConfig.grayMode);
-const getLockTime = computed(() => unref(getRootSetting).lockTime);
+ const getLockTime = computed(() => appStore.getProjectConfig.lockTime);
-const getShowDarkModeToggle = computed(() => unref(getRootSetting).showDarkModeToggle);
+ const getShowDarkModeToggle = computed(() => appStore.getProjectConfig.showDarkModeToggle);
-const getDarkMode = computed(() => appStore.getDarkMode);
+ const getDarkMode = computed(() => appStore.getDarkMode);
-const getLayoutContentMode = computed(() =>
- unref(getRootSetting).contentMode === ContentEnum.FULL ? ContentEnum.FULL : ContentEnum.FIXED
-);
+ const getLayoutContentMode = computed(() =>
+ appStore.getProjectConfig.contentMode === ContentEnum.FULL
+ ? ContentEnum.FULL
+ : ContentEnum.FIXED
+ );
-function setRootSetting(setting: Partial) {
- appStore.commitProjectConfigState(setting);
-}
+ function setRootSetting(setting: Partial) {
+ appStore.setProjectConfig(setting);
+ }
-function setDarkMode(mode: ThemeEnum) {
- appStore.commitDarkMode(mode);
-}
-
-export function useRootSetting() {
+ 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 b073e2b2f955a6ef3837bac9e1924fa8234bacb3..b6d421afb23806fcca59cc5620fd0cb8fb9ee1dc 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';
+import { useAppStore } from '/@/store/modules/app';
-const getTransitionSetting = computed(() => appStore.getProjectConfig.transitionSetting);
-
-const getEnableTransition = computed(() => unref(getTransitionSetting)?.enable);
+export function useTransitionSetting() {
+ const appStore = useAppStore();
-const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
+ const getEnableTransition = computed(() => appStore.getTransitionSetting?.enable);
-const getOpenPageLoading = computed((): boolean => {
- return !!unref(getTransitionSetting)?.openPageLoading;
-});
+ const getOpenNProgress = computed(() => appStore.getTransitionSetting?.openNProgress);
-const getBasicTransition = computed(() => unref(getTransitionSetting)?.basicTransition);
+ const getOpenPageLoading = computed((): boolean => {
+ return !!appStore.getTransitionSetting?.openPageLoading;
+ });
-function setTransitionSetting(transitionSetting: Partial) {
- appStore.commitProjectConfigState({ transitionSetting });
-}
+ const getBasicTransition = computed(() => appStore.getTransitionSetting?.basicTransition);
-export function useTransitionSetting() {
+ 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 01d478a21beb332d81f197baa9b52f37ee1dafc0..eb3cec952d8c30de7d0d71d5774a57aeea3caf71 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 2791523b5fd27c3890118e4993f27401c94f30dd..11e952104a87694907d1493d70ad1db033bb4b63 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 9c2e211e957dbd07f31e5eec8b975242f146f8e4..1d0e722e41238a44454e7f2718bdc59deb817302 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 365f525854992a78722e39f5dd0636d774f18d8f..c05e420a72f585ec299153dc6d997258015175bb 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 e444dd5161486d0c1d1a5a792d0103c478e5ab29..43f522b6571e077ee7e8b0df1e6654e92f50c808 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 b0bf1a4311966ef68d8175f9c29d54aba2ee723f..ca00ea2cdc200ffdbecd16702c4b2d60282ff678 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 7ed2522bed41eb573398192571b8b9d1e86730d6..243e587000a6215221eb2b068a42910647e77b79 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 e9a3de9999d35fe19b6a4bfd3eb4b584927bfe24..698b7629f81231ed501a6ce6f4ff3747857a5414 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 24481dca7dc841c4389371ad839ac404ae28671b..38646154f599cd5b06732cea37be9636148f104c 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 0aa84714fa39449e2f4b884996f26aed411093de..5bbab79bcef4e4ca5b9fd22528758a947eb7ca79 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 9b280b576d51b41e18cb81bb9a22e23188af840d..aa00d19aeb56d5d5fe3a304ab96c52872111cefa 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 7ba4d1a4de8696a0befabe284d459f61c14c8b76..6ce21c7381d98967fcbb8c820c3a4aee943edd69 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 c0574639fe4d5dbf45115aa182a094d082c4acfc..0909008a659e17d57e18ba68b0678d0c0e14c480 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 3ebe4a69feac0f9042ccd4554c284ac0a46cc1dc..fc190c221989e5a36938bee5835e56c0011eafa5 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 5ea76a5fe67c040a643e64d8a63039c3117faedf..2c9fcf4941016cbee54d7f6ce88d539c1e425e29 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 9800420fafd6e3fa25e55e640afbfa850b380c45..ad3028811e92fd2700adfdefc59547d821691220 100644
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@@ -20,26 +20,26 @@
-
+