vue3-admin-gpt 1.0.1 → 1.1.1

package/.env.development

@@ -11,4 +11,4 @@ VUE_APP_AUTHOR=开发部门
 VUE_APP_BASE_API=/api
 
 # 是否启用Mock
-VUE_APP_MOCK_ENABLE=true
+VUE_APP_MOCK_ENABLE=false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-admin-gpt",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A Vue3 admin template with Element Plus and Rspack",
   "author": "pxq555",
   "license": "MIT",
@@ -47,13 +47,13 @@
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
+    "pinia": "^3.0.4",
     "qs": "^6.14.1",
     "screenfull": "^6.0.2",
     "vue": "^3.5.27",
     "vue-echarts": "^8.0.1",
     "vue-router": "^5.0.2",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",

package/rspack.config.js

@@ -40,6 +40,8 @@ const resolve = (dir) => path.join(__dirname, dir);
 module.exports = {
   mode: mode,
   context: __dirname,
+  // 配置 source map 以支持开发调试
+  devtool: mode === "production" ? "source-map" : "eval-cheap-module-source-map",
   entry: {
     app: "./src/main.js",
   },
@@ -171,7 +173,7 @@ module.exports = {
       "process.env.NODE_ENV": JSON.stringify(mode),
       "process.env.BASE_URL": JSON.stringify(process.env.BASE_URL),
       "process.env.VUE_APP_TITLE": JSON.stringify(process.env.VUE_APP_TITLE),
-      "process.env.VUE_APP_MOCK_ENABLE": JSON.stringify("true"), // 确保在所有环境中mock都为true
+      "process.env.VUE_APP_MOCK_ENABLE": JSON.stringify(process.env.VUE_APP_MOCK_ENABLE), // 确保在所有环境中mock都为true
       "process.env.VUE_APP_AUTHOR": JSON.stringify(process.env.VUE_APP_AUTHOR),
       "process.env.VUE_APP_BASE_API": JSON.stringify(process.env.VUE_APP_BASE_API),
       "process.env.VUE_APP_UPDATE_TIME": JSON.stringify(

package/rspack.js

@@ -100,19 +100,24 @@ if (mode === "production") {
     // 使用rspack.config.js中的所有devServer配置
     const devServerOptions = config.devServer || {};
 
-    // 设置mock服务器，不再检查环境变量，始终启用mock
-    // if (!devServerOptions.setupMiddlewares) {
-    //   devServerOptions.setupMiddlewares = (middlewares, devServer) => {
-    //     if (!devServer) {
-    //       throw new Error("dev-server is not defined");
-    //     }
-
-    //     const mockServer = require("./mock/index");
-    //     mockServer(devServer.app);
-
-    //     return middlewares;
-    //   };
-    // }
+    // 根据环境变量控制是否启用mock服务
+    if (process.env.VUE_APP_MOCK_ENABLE === "true") {
+      if (!devServerOptions.setupMiddlewares) {
+        devServerOptions.setupMiddlewares = (middlewares, devServer) => {
+          if (!devServer) {
+            throw new Error("dev-server is not defined");
+          }
+
+          const mockServer = require("./mock/index");
+          mockServer(devServer.app);
+
+          return middlewares;
+        };
+      }
+      console.log("Mock服务已启用");
+    } else {
+      console.log("Mock服务未启用 (VUE_APP_MOCK_ENABLE=" + process.env.VUE_APP_MOCK_ENABLE + ")");
+    }
 
     const server = new RspackDevServer(devServerOptions, compiler);
 

package/src/config/permission.js

@@ -2,7 +2,7 @@
  * @description 路由守卫，目前两种模式：all模式与intelligence模式
  */
 import router from "@/router";
-import store from "@/store";
+import { useUserStore, useRoutesStore } from "@/store";
 import VabProgress from "nprogress";
 import "nprogress/nprogress.css";
 import getPageTitle from "@/utils/pageTitle";
@@ -24,7 +24,9 @@ VabProgress.configure({
 
 router.beforeEach(async (to, from, next) => {
   if (progressBar) VabProgress.start();
-  let hasToken = store.getters["user/accessToken"];
+  const userStore = useUserStore();
+  const routesStore = useRoutesStore();
+  let hasToken = userStore.accessToken;
 
   if (!loginInterception) hasToken = true;
 
@@ -34,8 +36,8 @@ router.beforeEach(async (to, from, next) => {
       if (progressBar) VabProgress.done();
     } else {
       const hasPermissions =
-        store.getters["user/permissions"] &&
-        store.getters["user/permissions"].length > 0;
+        userStore.permissions &&
+        userStore.permissions.length > 0;
       if (hasPermissions) {
         next();
       } else {
@@ -43,10 +45,10 @@ router.beforeEach(async (to, from, next) => {
           let permissions;
           if (!loginInterception) {
             //settings.js loginInterception为false时，创建虚拟权限
-            await store.dispatch("user/setPermissions", ["admin"]);
+            await userStore.setPermissions(["admin"]);
             permissions = ["admin"];
           } else {
-            permissions = await store.dispatch("user/getUserInfo");
+            permissions = await userStore.getUserInfo();
             if (!permissions) {
               throw new Error("获取用户权限失败");
             }
@@ -54,12 +56,11 @@ router.beforeEach(async (to, from, next) => {
 
           let accessRoutes = [];
           if (authentication === "intelligence") {
-            accessRoutes = await store.dispatch(
-              "routes/setRoutes",
+            accessRoutes = await routesStore.setRoutes(
               permissions
             );
           } else if (authentication === "all") {
-            accessRoutes = await store.dispatch("routes/setAllRoutes");
+            accessRoutes = await routesStore.setAllRoutes();
           }
 
           // 确保accessRoutes是数组
@@ -78,7 +79,7 @@ router.beforeEach(async (to, from, next) => {
         } catch (error) {
           console.error("路由守卫错误:", error);
           ElMessage.error(error.message || "发生错误，请重新登录");
-          await store.dispatch("user/resetAccessToken");
+          await userStore.resetAccessToken();
           next(`/login?redirect=${to.path}`);
           if (progressBar) VabProgress.done();
         }

package/src/config/setting.config.js

@@ -31,7 +31,7 @@ const setting = {
   //加载时显示文字
   loadingText: "正在加载中...",
   //token名称
-  tokenName: "accessToken",
+  tokenName: "Authorization",
   //token在localStorage、sessionStorage存储的key的名称
   tokenTableName: "admin-scaffold-token",
   //token存储位置localStorage sessionStorage

package/src/layouts/components/VabAppMain/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-main-container">
-    <router-view v-slot="{ Component }">
+    <router-view v-if="routerView" v-slot="{ Component }">
       <transition mode="out-in" name="fade-transform">
         <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
           <component :is="Component" class="app-main-height" />
@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
 import { copyright, footerCopyright, keepAliveMaxNum, title } from "@/config";
 import { CopyDocument } from "@element-plus/icons-vue";
 import eventBus from "@/utils/eventBus";
+import { useTabsBarStore, useSettingsStore } from "@/store";
 
 export default {
   name: "VabAppMain",
@@ -32,13 +32,17 @@ export default {
       keepAliveMaxNum,
       routerView: true,
       footerCopyright,
+      tabsBarStore: useTabsBarStore(),
+      settingsStore: useSettingsStore(),
     };
   },
   computed: {
-    ...mapGetters({
-      visitedRoutes: "tabsBar/visitedRoutes",
-      device: "settings/device",
-    }),
+    visitedRoutes() {
+      return this.tabsBarStore.visitedRoutes;
+    },
+    device() {
+      return this.settingsStore.device;
+    },
     cachedRoutes() {
       const cachedRoutesArr = [];
       this.visitedRoutes.forEach((item) => {
@@ -70,9 +74,9 @@ export default {
   },
   mounted() {},
   methods: {
-    ...mapActions({
-      foldSideBar: "settings/foldSideBar",
-    }),
+    foldSideBar() {
+      this.settingsStore.foldSideBar();
+    },
     // 重新加载路由视图
     reloadRouterView() {
       this.routerView = false;

package/src/layouts/components/VabAvatar/index.vue

@@ -50,7 +50,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import { recordRoute } from "@/config";
@@ -61,19 +60,21 @@ import {
   Link,
   SwitchButton,
 } from "@element-plus/icons-vue";
+import { useUserStore, useSettingsStore } from "@/store";
 
 defineOptions({
   name: "VabAvatar",
 });
 
-const store = useStore();
 const router = useRouter();
 const route = useRoute();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 
 // 计算属性
-const avatar = computed(() => store.getters["user/avatar"]);
-const username = computed(() => store.getters["user/username"]);
-const layout = computed(() => store.getters["settings/layout"]);
+const avatar = computed(() => userStore.avatar);
+const username = computed(() => userStore.username);
+const layout = computed(() => settingsStore.layout);
 const isHorizontalLayout = computed(() => layout.value === "horizontal");
 
 // 方法
@@ -100,7 +101,7 @@ const settings = () => {
 };
 
 const logout = () => {
-  store.dispatch("user/logout");
+  userStore.logout();
   if (recordRoute) {
     const fullPath = route.fullPath;
     router.push(`/login?redirect=${fullPath}`);

package/src/layouts/components/VabLogo/index.vue

@@ -14,20 +14,23 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
+import { useSettingsStore } from "@/store";
 
 export default {
   name: "VabLogo",
   data() {
     return {
       title: this.$baseTitle,
+      settingsStore: useSettingsStore(),
     };
   },
   computed: {
-    ...mapGetters({
-      logo: "settings/logo",
-      layout: "settings/layout",
-    }),
+    logo() {
+      return this.settingsStore.logo;
+    },
+    layout() {
+      return this.settingsStore.layout;
+    },
   },
 };
 </script>

package/src/layouts/components/VabNav/index.vue

@@ -30,21 +30,21 @@
 
 <script setup>
 import { ref, computed, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
 import { Refresh } from "@element-plus/icons-vue";
+import { useSettingsStore } from "@/store";
 
 defineOptions({
   name: "VabNav",
 });
 
-const store = useStore();
+const settingsStore = useSettingsStore();
 const pulse = ref(false);
 let timeOutID = null;
 
-const collapse = computed(() => store.getters["settings/collapse"]);
+const collapse = computed(() => settingsStore.collapse);
 
 const handleCollapse = () => {
-  store.dispatch("settings/changeCollapse");
+  settingsStore.changeCollapse();
 };
 
 const refreshRoute = async () => {

package/src/layouts/components/VabSide/index.vue

@@ -21,19 +21,20 @@
 <script setup>
 import variables from "@/styles/variables.scss";
 import { computed } from "vue";
-import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import { defaultOopeneds } from "@/config";
+import { useSettingsStore, useRoutesStore } from "@/store";
 
 defineOptions({
   name: "VabSide",
 });
 
-const store = useStore();
 const route = useRoute();
+const settingsStore = useSettingsStore();
+const routesStore = useRoutesStore();
 
-const collapse = computed(() => store.getters["settings/collapse"]);
-const routes = computed(() => store.getters["routes/routes"]);
+const collapse = computed(() => settingsStore.collapse);
+const routes = computed(() => routesStore.routes);
 
 const defaultOpens = computed(() => {
   // 使用配置文件中的defaultOopeneds

package/src/layouts/components/VabTabs/index.vue

@@ -53,7 +53,6 @@
 
 <script>
 import path from "path";
-import { mapGetters } from "vuex";
 import {
   ArrowDown,
   CircleClose,
@@ -71,6 +70,7 @@ import {
   List,
   Odometer,
 } from "@element-plus/icons-vue";
+import { useTabsBarStore, useRoutesStore } from "@/store";
 
 export default {
   name: "VabTabs",
@@ -95,20 +95,24 @@ export default {
     return {
       affixtabs: [],
       tabActive: "",
+      tabsBarStore: useTabsBarStore(),
+      routesStore: useRoutesStore(),
     };
   },
 
   computed: {
-    ...mapGetters({
-      visitedRoutes: "tabsBar/visitedRoutes",
-      routes: "routes/routes",
-    }),
+    visitedRoutes() {
+      return this.tabsBarStore.visitedRoutes;
+    },
+    routes() {
+      return this.routesStore.routes;
+    },
   },
   watch: {
     $route: {
       handler(route) {
-        this.inittabs();
-        this.addtabs();
+        this.initTabs();
+        this.addTab();
         let tabActive = "";
         this.visitedRoutes.forEach((item, index) => {
           if (item.path === this.$route.path) {
@@ -131,8 +135,7 @@ export default {
           view = item;
         }
       });
-      const { visitedRoutes } = await this.$store.dispatch(
-        "tabsBar/delRoute",
+      const { visitedRoutes } = await this.tabsBarStore.delRoute(
         view
       );
       if (this.isActive(view)) {
@@ -159,7 +162,7 @@ export default {
     isAffix(tag) {
       return tag.meta && tag.meta.affix;
     },
-    filterAffixtabs(routes, basePath = "/") {
+    filterAffixTabs(routes, basePath = "/") {
       let tabs = [];
       routes.forEach((route) => {
         if (route.meta && route.meta.affix) {
@@ -172,26 +175,26 @@ export default {
           });
         }
         if (route.children) {
-          const temptabs = this.filterAffixtabs(route.children, route.path);
-          if (temptabs.length >= 1) {
-            tabs = [...tabs, ...temptabs];
+          const tempTabs = this.filterAffixTabs(route.children, route.path);
+          if (tempTabs.length >= 1) {
+            tabs = [...tabs, ...tempTabs];
           }
         }
       });
       return tabs;
     },
-    inittabs() {
-      const affixtabs = (this.affixtabs = this.filterAffixtabs(this.routes));
+    initTabs() {
+      const affixtabs = (this.affixtabs = this.filterAffixTabs(this.routes));
       for (const tag of affixtabs) {
         if (tag.name) {
-          this.$store.dispatch("tabsBar/addVisitedRoute", tag);
+          this.tabsBarStore.addVisitedRoute(tag);
         }
       }
     },
-    addtabs() {
+    addTab() {
       const { name } = this.$route;
       if (name) {
-        this.$store.dispatch("tabsBar/addVisitedRoute", this.$route);
+        this.tabsBarStore.addVisitedRoute(this.$route);
       }
       return false;
     },
@@ -221,8 +224,7 @@ export default {
       // this.$baseEventBus.$emit('reloadrouter-view')
     },
     async closeSelectedTag(view) {
-      const { visitedRoutes } = await this.$store.dispatch(
-        "tabsBar/delRoute",
+      const { visitedRoutes } = await this.tabsBarStore.delRoute(
         view
       );
       if (this.isActive(view)) {
@@ -231,21 +233,19 @@ export default {
     },
     async closeOtherstabs() {
       const view = await this.toThisTag();
-      await this.$store.dispatch("tabsBar/delOthersRoutes", view);
+      await this.tabsBarStore.delOthersRoutes(view);
     },
     async closeLefttabs() {
       const view = await this.toThisTag();
-      await this.$store.dispatch("tabsBar/delLeftRoutes", view);
+      await this.tabsBarStore.delLeftRoutes(view);
     },
     async closeRighttabs() {
       const view = await this.toThisTag();
-      await this.$store.dispatch("tabsBar/delRightRoutes", view);
+      await this.tabsBarStore.delRightRoutes(view);
     },
     async closeAlltabs() {
       const view = await this.toThisTag();
-      const { visitedRoutes } = await this.$store.dispatch(
-        "tabsBar/delAllRoutes"
-      );
+      const { visitedRoutes } = await this.tabsBarStore.delAllRoutes();
       if (this.affixtabs.some((tag) => tag.path === view.path)) {
         return;
       }

package/src/layouts/components/VabTheme/index.vue

@@ -153,9 +153,9 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
 import { layout as defaultLayout } from "@/config";
 import { Brush, Picture, Grid, Setting } from "@element-plus/icons-vue";
+import { useSettingsStore } from "@/store";
 
 export default {
   name: "VabTheme",
@@ -174,15 +174,22 @@ export default {
         header: "fixed",
         tabsBar: "",
       },
+      settingsStore: useSettingsStore(),
     };
   },
   computed: {
-    ...mapGetters({
-      layout: "settings/layout",
-      header: "settings/header",
-      tabsBar: "settings/tabsBar",
-      themeBar: "settings/themeBar",
-    }),
+    layout() {
+      return this.settingsStore.layout;
+    },
+    header() {
+      return this.settingsStore.header;
+    },
+    tabsBar() {
+      return this.settingsStore.tabsBar;
+    },
+    themeBar() {
+      return this.settingsStore.themeBar;
+    },
   },
   created() {
     // 在created钩子中初始化主题
@@ -198,11 +205,15 @@ export default {
     }
   },
   methods: {
-    ...mapActions({
-      changeLayout: "settings/changeLayout",
-      changeHeader: "settings/changeHeader",
-      changeTabsBar: "settings/changeTabsBar",
-    }),
+    changeLayout(layout) {
+      this.settingsStore.changeLayout(layout);
+    },
+    changeHeader(header) {
+      this.settingsStore.changeHeader(header);
+    },
+    changeTabsBar(tabsBar) {
+      this.settingsStore.changeTabsBar(tabsBar);
+    },
     handleIsMobile() {
       return document.body.getBoundingClientRect().width - 1 < 992;
     },

package/src/layouts/components/VabTop/index.vue

@@ -50,17 +50,19 @@
 
 <script setup>
 import { ref, computed, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 import variables from "@/styles/variables.scss";
 import { Refresh } from "@element-plus/icons-vue";
+import { useRoutesStore, useTabsBarStore, useSettingsStore } from "@/store";
 
 defineOptions({
   name: "VabTop",
 });
 
-const store = useStore();
 const route = useRoute();
+const routesStore = useRoutesStore();
+const tabsBarStore = useTabsBarStore();
+const settingsStore = useSettingsStore();
 
 // 响应式数据
 const pulse = ref(false);
@@ -68,9 +70,9 @@ const menuTrigger = ref("hover");
 let timeOutID = null;
 
 // 计算属性
-const routes = computed(() => store.getters["routes/routes"]);
-const visitedRoutes = computed(() => store.getters["tabsBar/visitedRoutes"]);
-const collapse = computed(() => store.getters["settings/collapse"]);
+const routes = computed(() => routesStore.routes);
+const visitedRoutes = computed(() => tabsBarStore.visitedRoutes);
+const collapse = computed(() => settingsStore.collapse);
 const defaultOpens = computed(() => []);
 
 const activeMenu = computed(() => {

package/src/layouts/index.vue

@@ -51,21 +51,21 @@
 
 <script setup>
 import { ref, computed, onBeforeMount, onBeforeUnmount, onMounted, nextTick } from "vue";
-import { useStore } from "vuex";
+import { useSettingsStore } from "@/store";
 import { tokenName } from "@/config";
 import { debounce } from "lodash";
 
-const store = useStore();
+const settingsStore = useSettingsStore();
 
 const oldLayout = ref("");
 const controller = ref(new window.AbortController());
 let timeOutID = null;
 
-const layout = computed(() => store.getters["settings/layout"]);
-const tabsBar = computed(() => store.getters["settings/tabsBar"]);
-const collapse = computed(() => store.getters["settings/collapse"]);
-const header = computed(() => store.getters["settings/header"]);
-const device = computed(() => store.getters["settings/device"]);
+const layout = computed(() => settingsStore.layout);
+const tabsBar = computed(() => settingsStore.tabsBar);
+const collapse = computed(() => settingsStore.collapse);
+const header = computed(() => settingsStore.header);
+const device = computed(() => settingsStore.device);
 
 const classObj = computed(() => {
   return {
@@ -74,7 +74,7 @@ const classObj = computed(() => {
 });
 
 const handleFoldSideBar = () => {
-  store.dispatch("settings/foldSideBar");
+  settingsStore.foldSideBar();
 };
 
 const handleIsMobile = () => {
@@ -86,24 +86,24 @@ const handleResize = debounce(() => {
     const isMobile = handleIsMobile();
     if (isMobile) {
       //横向布局时如果是手机端访问那么改成纵向版
-      store.dispatch("settings/changeLayout", "vertical");
+      settingsStore.changeLayout("vertical");
     } else {
-      store.dispatch("settings/changeLayout", oldLayout.value);
+      settingsStore.changeLayout(oldLayout.value);
     }
 
-    store.dispatch("settings/toggleDevice", isMobile ? "mobile" : "desktop");
+    settingsStore.toggleDevice(isMobile ? "mobile" : "desktop");
   }
 }, 100);
 
 onBeforeMount(() => {
   window.addEventListener("resize", handleResize);
-  
+
   // 页面加载时检查是否有保存的路由信息
   const savedRoute = sessionStorage.getItem('currentRoute');
   if (savedRoute) {
     try {
       const routeInfo = JSON.parse(savedRoute);
-      // 这里可以添加恢复路由状态的逻辑，比如重新设置Vuex中的路由状态
+      // 这里可以添加恢复路由状态的逻辑，比如重新设置Pinia中的路由状态
       console.log('恢复保存的路由信息:', routeInfo);
       // 清除保存的路由信息
       sessionStorage.removeItem('currentRoute');
@@ -148,17 +148,17 @@ oldLayout.value = layout.value;
 const isMobile = handleIsMobile();
 if (isMobile) {
   //横向布局时如果是手机端访问那么改成纵向版
-  store.dispatch("settings/changeLayout", "vertical");
+  settingsStore.changeLayout("vertical");
 } else {
-  store.dispatch("settings/changeLayout", oldLayout.value);
+  settingsStore.changeLayout(oldLayout.value);
 }
-store.dispatch("settings/toggleDevice", isMobile ? "mobile" : "desktop");
+settingsStore.toggleDevice(isMobile ? "mobile" : "desktop");
 if (isMobile) {
   timeOutID = setTimeout(() => {
-    store.dispatch("settings/foldSideBar");
+    settingsStore.foldSideBar();
   }, 2000);
 } else {
-  store.dispatch("settings/openSideBar");
+  settingsStore.openSideBar();
 }
 
 nextTick(() => {