@@ -45,9 +45,9 @@ import { ref, defineComponent, onMounted, unref, watch } from "vue";
import Breadcrumb from "/@/components/BreadCrumb";
import Hamburger from "/@/components/HamBurger";
import screenfull from "../components/screenfull/index.vue";
-import { useMapGetters } from "../store";
import { useRouter, useRoute } from "vue-router";
-import { useStore } from "vuex";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { mapGetters } from "pinia";
import { storageSession } from "/@/utils/storage";
import ch from "/@/assets/ch.png";
import en from "/@/assets/en.png";
@@ -70,7 +70,7 @@ export default defineComponent({
setup() {
let langs = ref(true);
- const store = useStore();
+ const pureApp = useAppStoreHook();
const router = useRouter();
const route = useRoute();
@@ -108,6 +108,10 @@ export default defineComponent({
emitter.emit("openPanel");
}
+ function toggleSideBar() {
+ pureApp.toggleSideBar();
+ }
+
onMounted(() => {
document
.querySelector(".el-dropdown__popper")
@@ -118,11 +122,8 @@ export default defineComponent({
});
return {
- // @ts-ignore
- ...useMapGetters(["sidebar"]),
- toggleSideBar() {
- store.dispatch("app/toggleSideBar");
- },
+ pureApp,
+ toggleSideBar,
langs,
usename,
toggleLang,
diff --git a/src/layout/components/sidebar/index.vue b/src/layout/components/sidebar/index.vue
index 4c7a8ee53..5277433ed 100644
--- a/src/layout/components/sidebar/index.vue
+++ b/src/layout/components/sidebar/index.vue
@@ -11,7 +11,7 @@
@select="menuSelect"
>
algorithm.increaseIndexes(router)),
activeMenu,
- isCollapse: computed(() => !store.getters.sidebar.opened),
+ isCollapse: computed(() => !pureApp.getSidebarStatus),
menuSelect,
- showLogo
+ showLogo,
+ routeStore
};
}
});
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 438a21a91..d2a2f9ff9 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,7 +3,7 @@
@@ -42,7 +42,8 @@ import {
onBeforeMount,
onBeforeUnmount
} from "vue";
-import { useStore } from "vuex";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { useSettingStoreHook } from "/@/store/modules/settings";
import { useEventListener, useFullscreen } from "@vueuse/core";
import { toggleClass, removeClass } from "/@/utils/operate";
let hiddenMainContainer = "hidden-main-container";
@@ -67,7 +68,8 @@ export default {
tag
},
setup() {
- const store = useStore();
+ const pureApp = useAppStoreHook();
+ const pureSetting = useSettingStoreHook();
const router = useRouter();
const route = useRoute();
@@ -78,15 +80,15 @@ export default {
const set: setInter = reactive({
sidebar: computed(() => {
- return store.state.app.sidebar;
+ return pureApp.sidebar;
}),
device: computed(() => {
- return store.state.app.device;
+ return pureApp.device;
}),
fixedHeader: computed(() => {
- return store.state.settings.fixedHeader;
+ return pureSetting.fixedHeader;
}),
classes: computed(() => {
@@ -99,16 +101,16 @@ export default {
})
});
+ const handleClickOutside = (params: Boolean) => {
+ pureApp.closeSideBar({ withoutAnimation: params });
+ };
+
watchEffect(() => {
if (set.device === "mobile" && !set.sidebar.opened) {
- store.dispatch("app/closeSideBar", { withoutAnimation: false });
+ handleClickOutside(false);
}
});
- const handleClickOutside = () => {
- store.dispatch("app/closeSideBar", { withoutAnimation: false });
- };
-
const $_isMobile = () => {
const rect = document.body.getBoundingClientRect();
return rect.width - 1 < WIDTH.value;
@@ -117,10 +119,9 @@ export default {
const $_resizeHandler = () => {
if (!document.hidden) {
const isMobile = $_isMobile();
- store.dispatch("app/toggleDevice", isMobile ? "mobile" : "desktop");
-
+ pureApp.toggleDevice(isMobile ? "mobile" : "desktop");
if (isMobile) {
- store.dispatch("app/closeSideBar", { withoutAnimation: true });
+ handleClickOutside(true);
}
}
};
@@ -146,8 +147,8 @@ export default {
onMounted(() => {
const isMobile = $_isMobile();
if (isMobile) {
- store.dispatch("app/toggleDevice", "mobile");
- store.dispatch("app/closeSideBar", { withoutAnimation: true });
+ pureApp.toggleDevice("mobile");
+ handleClickOutside(true);
}
toggleClass(
unref(containerHiddenSideBar),
diff --git a/src/layout/store.ts b/src/layout/store.ts
deleted file mode 100644
index bc92ac9a5..000000000
--- a/src/layout/store.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { computed, ComputedRef } from "vue";
-import { useStore } from "vuex";
-
-export function useMapGetters(keys: T[]) {
- const res: Record = {}
- // @ts-ignore
- const { getters } = useStore()
- keys.map(key => {
- if (Reflect.has(getters, key)) {
- res[key] = computed(() => getters[key])
- }
- })
- return res as any as Record
-}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 8075c7a14..d98db0084 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
-import store from "./store";
+import { setupStore } from "/@/store";
import { useElementPlus } from "../src/plugins/element-plus";
import { useTable } from "../src/plugins/vxe-table";
@@ -50,7 +50,11 @@ export const getServerConfig = async (): Promise => {
};
getServerConfig().then(async () => {
- app.use(router);
+ setupStore(app);
+
+ app.use(router).use(useElementPlus).use(useTable).use(usI18n);
+
await router.isReady();
- app.use(store).use(useElementPlus).use(useTable).use(usI18n).mount("#app");
+
+ app.mount("#app");
});
diff --git a/src/router/index.ts b/src/router/index.ts
index ef5533090..ae0391b16 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,14 +8,10 @@ import nestedRouter from "./modules/nested";
import errorRouter from "./modules/error";
import permissionRouter from "./modules/permission";
import remainingRouter from "./modules/remaining"; //静态路由
-import Layout from "/@/layout/index.vue";
-// https://cn.vitejs.dev/guide/features.html#glob-import
-const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
-
-import { getAsyncRoutes } from "/@/api/routes";
import { storageSession } from "../utils/storage";
import { i18n } from "/@/plugins/i18n/index";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
const constantRoutes: Array = [
homeRouter,
@@ -27,28 +23,19 @@ const constantRoutes: Array = [
errorRouter,
];
-// 过滤后端传来的动态路由重新生成规范路由
-const addAsyncRoutes = (arrRoutes: Array) => {
- if (!arrRoutes || !arrRoutes.length) return;
- arrRoutes.forEach((v: any) => {
- if (v.redirect) {
- v.component = Layout;
- } else {
- v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
- }
- if (v.children) {
- addAsyncRoutes(v.children);
- }
- });
- return arrRoutes;
-};
-
// 按照路由中meta下的rank等级升序来排序路由
-function ascending(arr) {
+export const ascending = (arr) => {
return arr.sort((a: any, b: any) => {
return a?.meta?.rank - b?.meta?.rank;
});
-}
+};
+
+// 将所有静态路由导出
+export const constantRoutesArr = ascending(constantRoutes).concat(
+ ...remainingRouter
+);
+
+export const isLogin = storageSession.getItem("info");
const router = createRouter({
history: createWebHashHistory(),
@@ -73,29 +60,9 @@ import NProgress from "../utils/progress";
const whiteList = ["/login", "/register"];
router.beforeEach((to, _from, next) => {
- let isLogin = storageSession.getItem("info");
// _from?.name;
if (isLogin) {
- // 异步路由
- getAsyncRoutes({ name: isLogin.username }).then(({ info }) => {
- if (info.length === 0) {
- return;
- }
- addAsyncRoutes([info]).forEach((v: any) => {
- // 防止重复添加路由
- if (
- router.options.routes.findIndex((value) => value.path === v.path) !==
- -1
- )
- return;
- // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
- router.options.routes.push(v);
- // 最终路由进行升序
- ascending(router.options.routes);
- router.addRoute(v.name, v);
- });
- });
- console.log(router.options.routes);
+ usePermissionStoreHook().changeSetting();
}
NProgress.start();
const { t } = i18n.global;
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index d42f667a0..f3d1cab0f 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -19,7 +19,7 @@ const componentsRouter = {
component: () => import("/@/views/components/video/index.vue"),
meta: {
title: "message.hsvideo",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -29,7 +29,7 @@ const componentsRouter = {
component: () => import("/@/views/components/map/index.vue"),
meta: {
title: "message.hsmap",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -39,7 +39,7 @@ const componentsRouter = {
component: () => import("/@/views/components/draggable/index.vue"),
meta: {
title: "message.hsdraggable",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -50,7 +50,7 @@ const componentsRouter = {
component: () => import("/@/views/components/split-pane/index.vue"),
meta: {
title: "message.hssplitPane",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -60,7 +60,7 @@ const componentsRouter = {
component: () => import("/@/views/components/button/index.vue"),
meta: {
title: "message.hsbutton",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -70,7 +70,7 @@ const componentsRouter = {
component: () => import("/@/views/components/cropping/index.vue"),
meta: {
title: "message.hscropping",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -80,7 +80,7 @@ const componentsRouter = {
component: () => import("/@/views/components/count-to/index.vue"),
meta: {
title: "message.hscountTo",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -90,7 +90,7 @@ const componentsRouter = {
component: () => import("/@/views/components/selector/index.vue"),
meta: {
title: "message.hsselector",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -100,7 +100,7 @@ const componentsRouter = {
component: () => import("/@/views/components/seamless-scroll/index.vue"),
meta: {
title: "message.hsseamless",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -110,7 +110,7 @@ const componentsRouter = {
component: () => import("/@/views/components/contextmenu/index.vue"),
meta: {
title: "message.hscontextmenu",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts
index 63e4d2b6a..d4969b207 100644
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -19,7 +19,7 @@ const editorRouter = {
component: () => import("/@/views/editor/index.vue"),
meta: {
title: "message.hseditor",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index d702c67ca..0cf984919 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -19,7 +19,7 @@ const errorRouter = {
component: () => import("/@/views/error/401.vue"),
meta: {
title: "message.hsfourZeroOne",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
@@ -29,7 +29,7 @@ const errorRouter = {
component: () => import("/@/views/error/404.vue"),
meta: {
title: "message.hsfourZeroFour",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
index 4487756f0..c97019a9d 100644
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -19,7 +19,7 @@ const flowChartRouter = {
component: () => import("/@/views/flow-chart/index.vue"),
meta: {
title: "message.hsflowChart",
- showLink: false,
+ showLink: true,
savedPosition: true,
},
},
diff --git a/src/store/getters.ts b/src/store/getters.ts
deleted file mode 100644
index 3824e2173..000000000
--- a/src/store/getters.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const getters = {
- sidebar: (state: any) => state.app.sidebar,
- device: (state: any) => state.app.device,
-}
-
-export default getters
diff --git a/src/store/index.ts b/src/store/index.ts
index d95d72fa5..a8dc7527c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,12 +1,9 @@
-import { createStore } from 'vuex'
-import getters from './getters'
-import app from './modules/app'
-import settings from './modules/settings'
+import type { App } from "vue";
+import { createPinia } from "pinia";
+const store = createPinia();
-export default createStore({
- getters,
- modules: {
- app,
- settings
- }
-})
+export function setupStore(app: App) {
+ app.use(store);
+}
+
+export { store };
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 8b20cfb41..230f85c7c 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,58 +1,64 @@
-import { storageLocal } from "../../utils/storage"
-interface stateInter {
+import { storageLocal } from "../../utils/storage";
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+
+interface AppState {
sidebar: {
- opened: Boolean,
- withoutAnimation: Boolean
- },
- device: String
+ opened: Boolean;
+ withoutAnimation: Boolean;
+ };
+ device: String;
}
-const state = {
- sidebar: {
- opened: storageLocal.getItem('sidebarStatus') ? !!+storageLocal.getItem('sidebarStatus') : true,
- withoutAnimation: false
+export const useAppStore = defineStore({
+ id: "pure-app",
+ state: (): AppState => ({
+ sidebar: {
+ opened: storageLocal.getItem("sidebarStatus")
+ ? !!+storageLocal.getItem("sidebarStatus")
+ : true,
+ withoutAnimation: false,
+ },
+ device: "desktop",
+ }),
+ getters: {
+ getSidebarStatus() {
+ return this.sidebar.opened;
+ },
+ getDevice() {
+ return this.device;
+ },
},
- device: 'desktop'
-}
+ actions: {
+ TOGGLE_SIDEBAR() {
+ this.sidebar.opened = !this.sidebar.opened;
+ this.sidebar.withoutAnimation = false;
+ if (this.sidebar.opened) {
+ storageLocal.setItem("sidebarStatus", 1);
+ } else {
+ storageLocal.setItem("sidebarStatus", 0);
+ }
+ },
+ CLOSE_SIDEBAR(withoutAnimation: Boolean) {
+ storageLocal.setItem("sidebarStatus", 0);
+ this.sidebar.opened = false;
+ this.sidebar.withoutAnimation = withoutAnimation;
+ },
+ TOGGLE_DEVICE(device: String) {
+ this.device = device;
+ },
+ async toggleSideBar() {
+ await this.TOGGLE_SIDEBAR();
+ },
+ closeSideBar(withoutAnimation) {
+ this.CLOSE_SIDEBAR(withoutAnimation);
+ },
+ toggleDevice(device) {
+ this.TOGGLE_DEVICE(device);
+ },
+ },
+});
-const mutations = {
- TOGGLE_SIDEBAR: (state: stateInter): void => {
- state.sidebar.opened = !state.sidebar.opened
- state.sidebar.withoutAnimation = false
- if (state.sidebar.opened) {
- storageLocal.setItem('sidebarStatus', 1)
- } else {
- storageLocal.setItem('sidebarStatus', 0)
- }
- },
- CLOSE_SIDEBAR: (state: stateInter, withoutAnimation: Boolean) => {
- storageLocal.setItem('sidebarStatus', 0)
- state.sidebar.opened = false
- state.sidebar.withoutAnimation = withoutAnimation
- },
- TOGGLE_DEVICE: (state: stateInter, device: String) => {
- state.device = device
- }
-}
-
-const actions = {
- // @ts-ignore
- toggleSideBar({ commit }) {
- commit('TOGGLE_SIDEBAR')
- },
- // @ts-ignore
- closeSideBar({ commit }, { withoutAnimation }) {
- commit('CLOSE_SIDEBAR', withoutAnimation)
- },
- // @ts-ignore
- toggleDevice({ commit }, device) {
- commit('TOGGLE_DEVICE', device)
- }
-}
-
-export default {
- namespaced: true,
- state,
- mutations,
- actions
+export function useAppStoreHook() {
+ return useAppStore(store);
}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
new file mode 100644
index 000000000..0fc8ee920
--- /dev/null
+++ b/src/store/modules/permission.ts
@@ -0,0 +1,74 @@
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+
+import { constantRoutesArr, ascending, isLogin } from "/@/router/index";
+
+import { getAsyncRoutes } from "/@/api/routes";
+import Layout from "/@/layout/index.vue";
+import router from "/@/router/index";
+
+// https://cn.vitejs.dev/guide/features.html#glob-import
+const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
+
+// 过滤后端传来的动态路由重新生成规范路由
+const addAsyncRoutes = (arrRoutes: Array) => {
+ if (!arrRoutes || !arrRoutes.length) return;
+ arrRoutes.forEach((v: any) => {
+ if (v.redirect) {
+ v.component = Layout;
+ } else {
+ v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
+ }
+ if (v.children) {
+ addAsyncRoutes(v.children);
+ }
+ });
+ return arrRoutes;
+};
+
+export const usePermissionStore = defineStore({
+ id: "pure-permission",
+ state: () => ({
+ constantRoutes: constantRoutesArr, //静态路由
+ asyncRoutes: [], //动态路由
+ wholeRoutes: [],
+ }),
+ actions: {
+ asyncActionRoutes(routes) {
+ this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter(
+ (v) => v.meta.showLink
+ );
+ this.asyncRoutes.push(routes);
+ },
+ async changeSetting() {
+ // 异步路由
+ await getAsyncRoutes({ name: isLogin.username }).then(({ info }) => {
+ if (info.length === 0) {
+ this.wholeRoutes = router.options.routes.filter(
+ (v) => v.meta.showLink
+ );
+ return;
+ }
+ addAsyncRoutes([info]).forEach((v: any) => {
+ // 防止重复添加路由
+ if (
+ router.options.routes.findIndex(
+ (value) => value.path === v.path
+ ) !== -1
+ )
+ return;
+ // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+ router.options.routes.push(v);
+ // 最终路由进行升序
+ ascending(router.options.routes);
+ router.addRoute(v.name, v);
+ this.asyncActionRoutes(v);
+ });
+ });
+ },
+ },
+});
+
+export function usePermissionStoreHook() {
+ return usePermissionStore(store);
+}
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index b7a059216..13f3e145d 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,27 +1,38 @@
import defaultSettings from "../../settings";
+import { defineStore } from "pinia";
+import { store } from "/@/store";
-const state = {
- title: defaultSettings.title,
- fixedHeader: defaultSettings.fixedHeader,
-};
+interface SettingState {
+ title: String;
+ fixedHeader: Boolean;
+}
-const mutations = {
- CHANGE_SETTING: (state: any, { key, value }) => {
- if (state.hasOwnProperty(key)) {
- state[key] = value;
- }
+export const useSettingStore = defineStore({
+ id: "pure-setting",
+ state: (): SettingState => ({
+ title: defaultSettings.title,
+ fixedHeader: defaultSettings.fixedHeader,
+ }),
+ getters: {
+ getTitle() {
+ return this.title;
+ },
+ getFixedHeader() {
+ return this.fixedHeader;
+ },
},
-};
-
-const actions = {
- changeSetting({ commit }, data) {
- commit("CHANGE_SETTING", data);
+ actions: {
+ CHANGE_SETTING({ key, value }) {
+ if (this.hasOwnProperty(key)) {
+ this[key] = value;
+ }
+ },
+ changeSetting(data) {
+ this.CHANGE_SETTING(data);
+ },
},
-};
+});
-export default {
- namespaced: true,
- state,
- mutations,
- actions,
-};
+export function useSettingStoreHook() {
+ return useSettingStore(store);
+}