vue3-admin-gpt 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-admin-gpt",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "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/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/layouts/components/VabAppMain/index.vue

@@ -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(() => {

package/src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
-import store from "@/store"; // 导入Vuex store
 import plugins from "./plugins";
 // 导入布局组件注册函数
 import { registerLayoutComponents } from "@/layouts/export";
@@ -14,8 +14,9 @@ import { title } from "@/config";
 // 创建应用实例
 const app = createApp(App);
 
-// 使用Vuex
-app.use(store);
+// 使用Pinia
+const pinia = createPinia();
+app.use(pinia);
 
 app.use(router);
 

package/src/router/index.js

@@ -74,7 +74,7 @@ export const asyncRoutes = [
     redirect: "/example/index",
     name: "Example",
     alwaysShow: true,
-    meta: { title: "路由案例", icon: "box-open", defaultOpen: true },
+    meta: { title: "开发指南", icon: "box-open", defaultOpen: true },
     children: [
       {
         path: "index",
@@ -85,6 +85,15 @@ export const asyncRoutes = [
           icon: "document",
         },
       },
+      {
+        path: "pinia",
+        name: "PiniaGuideIndex",
+        component: () => import("@/views/pinia-guide/index"),
+        meta: {
+          title: "Pinia 使用教程",
+          icon: "setting",
+        },
+      },
     ]
   },
   {

package/src/store/index.js

@@ -1,26 +1,10 @@
 /**
- * @description 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突，请勿修改。
- * @description 这是一个兼容层，允许项目逐步从Vuex迁移到Pinia
+ * @description Pinia store 入口文件，导出所有 store 模块
  */
 
-import { createStore } from 'vuex'
-
-// 从modules目录导入所有模块
-const files = require.context('./modules', false, /\.js$/)
-const modules = {}
-
-files.keys().forEach((key) => {
-  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
-})
-
-// 为所有模块添加namespaced
-Object.keys(modules).forEach((key) => {
-  modules[key]['namespaced'] = true
-})
-
-// 创建store
-const store = createStore({
-  modules,
-})
-
-export default store
+export { useUserStore } from './modules/user'
+export { useSettingsStore } from './modules/settings'
+export { useRoutesStore } from './modules/routes'
+export { useTabsBarStore } from './modules/tabsBar'
+export { useTableStore } from './modules/table'
+export { useErrorLogStore } from './modules/errorLog'