vue3-admin-gpt 1.0.0

package/src/config/index.js

@@ -0,0 +1,7 @@
+/**
+ * @description 3个子配置，通用配置|主题配置|网络配置导出
+ */
+const setting = require('./setting.config')
+const theme = require('./theme.config')
+const network = require('./net.config')
+module.exports = Object.assign({}, setting, theme, network)

package/src/config/net.config.js

@@ -0,0 +1,20 @@
+/**
+ * @description 导出默认网路配置
+ **/
+const network = {
+  // 默认的接口地址，支持通过环境变量配置
+  baseURL: process.env.VUE_APP_BASE_API || "/api",
+  //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
+  contentType: "application/json;charset=UTF-8",
+  //消息框消失时间
+  messageDuration: 3000,
+  //最长请求时间
+  requestTimeout: 15000,
+  //操作正常code，支持String、Array、int多种类型
+  successCode: [200, 0],
+  //登录失效code
+  invalidCode: 402,
+  //无权限code
+  noPermissionCode: 401,
+};
+module.exports = network;

package/src/config/permission.js

@@ -0,0 +1,136 @@
+/**
+ * @description 路由守卫，目前两种模式：all模式与intelligence模式
+ */
+import router from "@/router";
+import store from "@/store";
+import VabProgress from "nprogress";
+import "nprogress/nprogress.css";
+import getPageTitle from "@/utils/pageTitle";
+import {
+  authentication,
+  loginInterception,
+  progressBar,
+  recordRoute,
+  routesWhiteList,
+} from "@/config";
+import { ElMessage } from "element-plus";
+
+VabProgress.configure({
+  easing: "ease",
+  speed: 500,
+  trickleSpeed: 200,
+  showSpinner: false,
+});
+
+router.beforeEach(async (to, from, next) => {
+  if (progressBar) VabProgress.start();
+  let hasToken = store.getters["user/accessToken"];
+
+  if (!loginInterception) hasToken = true;
+
+  if (hasToken) {
+    if (to.path === "/login") {
+      next({ path: "/" });
+      if (progressBar) VabProgress.done();
+    } else {
+      const hasPermissions =
+        store.getters["user/permissions"] &&
+        store.getters["user/permissions"].length > 0;
+      if (hasPermissions) {
+        next();
+      } else {
+        try {
+          let permissions;
+          if (!loginInterception) {
+            //settings.js loginInterception为false时，创建虚拟权限
+            await store.dispatch("user/setPermissions", ["admin"]);
+            permissions = ["admin"];
+          } else {
+            permissions = await store.dispatch("user/getUserInfo");
+            if (!permissions) {
+              throw new Error("获取用户权限失败");
+            }
+          }
+
+          let accessRoutes = [];
+          if (authentication === "intelligence") {
+            accessRoutes = await store.dispatch(
+              "routes/setRoutes",
+              permissions
+            );
+          } else if (authentication === "all") {
+            accessRoutes = await store.dispatch("routes/setAllRoutes");
+          }
+
+          // 确保accessRoutes是数组
+          if (!Array.isArray(accessRoutes)) {
+            console.error("路由数据格式错误:", accessRoutes);
+            accessRoutes = [];
+          }
+
+          // 添加路由
+          accessRoutes.forEach((item) => {
+            router.addRoute(item);
+          });
+
+          // 确保路由添加完成后，跳转到目标页面
+          next({ ...to, replace: true });
+        } catch (error) {
+          console.error("路由守卫错误:", error);
+          ElMessage.error(error.message || "发生错误，请重新登录");
+          await store.dispatch("user/resetAccessToken");
+          next(`/login?redirect=${to.path}`);
+          if (progressBar) VabProgress.done();
+        }
+      }
+    }
+  } else {
+    // 检查是否有保存的路由信息（页面刷新场景）
+    const savedRoute = sessionStorage.getItem('currentRoute');
+    if (savedRoute) {
+      try {
+        const routeInfo = JSON.parse(savedRoute);
+        // 如果目标路由不在白名单中，仍然需要登录
+        if (routesWhiteList.indexOf(to.path) !== -1) {
+          next();
+        } else {
+          // 检查当前路径是否需要登录
+          if (recordRoute) {
+            next(`/login?redirect=${to.path}`);
+          } else {
+            next("/login");
+          }
+        }
+      } catch (e) {
+        console.error('解析保存的路由信息失败:', e);
+        // 继续正常的登录检查流程
+        if (routesWhiteList.indexOf(to.path) !== -1) {
+          next();
+        } else {
+          if (recordRoute) {
+            next(`/login?redirect=${to.path}`);
+          } else {
+            next("/login");
+          }
+        }
+      }
+    } else {
+      if (routesWhiteList.indexOf(to.path) !== -1) {
+        next();
+      } else {
+        if (recordRoute) {
+          next(`/login?redirect=${to.path}`);
+        } else {
+          next("/login");
+        }
+      }
+    }
+
+    if (progressBar) VabProgress.done();
+  }
+  document.title = getPageTitle(to.meta.title);
+});
+
+router.afterEach(() => {
+  if (progressBar) VabProgress.done();
+});

package/src/config/setting.config.js

@@ -0,0 +1,62 @@
+/**
+ * @description 导出默认通用配置
+ */
+const setting = {
+  // 生产环境构建文件的目录名
+  outputDir: "dist",
+  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+  assetsDir: "static",
+  // 开发环境每次保存时是否输出为eslint编译警告
+  lintOnSave: true,
+  // 进行编译的依赖
+  transpileDependencies: [],
+  //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
+  title: "管理系统",
+  //简写
+  abbreviation: "admin",
+  //开发环境端口号
+  devPort: "8091",
+  //copyright
+  copyright: "",
+  //是否显示页面底部自定义版权信息
+  footerCopyright: true,
+  //是否显示顶部进度条
+  progressBar: true,
+  //缓存路由的最大数量
+  keepAliveMaxNum: 99,
+  // 路由模式，可选值为 history 或 hash
+  routerMode: "hash",
+  //不经过token校验的路由
+  routesWhiteList: ["/login", "/register", "/404", "/401"],
+  //加载时显示文字
+  loadingText: "正在加载中...",
+  //token名称
+  tokenName: "accessToken",
+  //token在localStorage、sessionStorage存储的key的名称
+  tokenTableName: "admin-scaffold-token",
+  //token存储位置localStorage sessionStorage
+  storage: "localStorage",
+  //token失效回退到登录页时是否记录本次的路由
+  recordRoute: true,
+  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
+  logo: "vuejs-fill",
+  //是否显示在页面高亮错误
+  errorLog: ["development"],
+  //是否开启登录拦截
+  loginInterception: false,
+  //intelligence和all两种方式，前者后端权限只控制permissions不控制view文件的import（前后端配合，减轻后端工作量），all方式完全交给后端前端只负责加载
+  authentication: "intelligence",
+  //vertical布局时是否只保持一个子菜单的展开
+  uniqueOpened: false,
+  //vertical布局时默认展开的菜单path，使用逗号隔开建议只展开一个
+  defaultOopeneds: ["/vab"],
+  //需要加loading层的请求，防止重复提交
+  debounce: ["doEdit"],
+  //需要自动注入并加载的模块
+  providePlugin: {},
+  //代码生成机生成在view下的文件夹名称
+  templateFolder: "project",
+  //是否显示终端donation打印
+  donation: false,
+};
+module.exports = setting;

package/src/config/settings.js

@@ -0,0 +1,6 @@
+/**
+ * @description 3个子配置，通用配置|主题配置|网络配置
+ */
+//默认配置
+const { setting, theme, network } = require('./')
+module.exports = Object.assign({}, setting, theme, network)

package/src/config/theme.config.js

@@ -0,0 +1,14 @@
+/**
+ * @description 导出默认主题配置
+ */
+const theme = {
+  //是否国定头部 固定fixed 不固定noFixed
+  header: 'fixed',
+  //横纵布局 horizontal vertical
+  layout: 'vertical',
+  //是否开启主题配置按钮
+  themeBar: true,
+  //是否显示多标签页
+  tabsBar: true,
+}
+module.exports = theme

package/src/layouts/EmptyLayout.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="app-main-container">
+    <router-view v-slot="{ Component }">
+      <transition mode="out-in" name="fade-transform">
+        <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
+          <component :is="Component" class="app-main-height" />
+        </keep-alive>
+      </transition>
+    </router-view>
+    <!-- <footer v-show="footerCopyright" class="footer-copyright">
+    </footer> -->
+  </div>
+</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";
+
+export default {
+  name: "VabAppMain",
+  components: {
+    CopyDocument,
+  },
+  data() {
+    return {
+      show: false,
+      fullYear: new Date().getFullYear(),
+      copyright,
+      title,
+      keepAliveMaxNum,
+      routerView: true,
+      footerCopyright,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      visitedRoutes: "tabsBar/visitedRoutes",
+      device: "settings/device",
+    }),
+    cachedRoutes() {
+      const cachedRoutesArr = [];
+      this.visitedRoutes.forEach((item) => {
+        if (!item.meta.noKeepAlive) {
+          cachedRoutesArr.push(item.name);
+        }
+      });
+      return cachedRoutesArr;
+    },
+    key() {
+      return this.$route.path;
+    },
+  },
+  watch: {
+    $route: {
+      handler(route) {
+        if ("mobile" === this.device) this.foldSideBar();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // 监听事件总线中的reload-router-view事件
+    eventBus.on("reload-router-view", this.reloadRouterView);
+  },
+  beforeUnmount() {
+    // 组件销毁前移除事件监听
+    eventBus.off("reload-router-view", this.reloadRouterView);
+  },
+  mounted() {},
+  methods: {
+    ...mapActions({
+      foldSideBar: "settings/foldSideBar",
+    }),
+    // 重新加载路由视图
+    reloadRouterView() {
+      this.routerView = false;
+      this.$nextTick(() => {
+        this.routerView = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-main-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  .vab-keel {
+    margin: $base-padding;
+  }
+
+  .app-main-height {
+    min-height: $base-app-main-height;
+  }
+
+  .footer-copyright {
+    min-height: 55px;
+    line-height: 55px;
+    color: rgba(0, 0, 0, 0.45);
+    text-align: center;
+    border-top: 1px dashed $base-border-color;
+  }
+}
+</style>

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

@@ -0,0 +1,255 @@
+<template>
+  <el-dropdown @command="handleCommand" trigger="click">
+    <div
+      class="avatar-container"
+      :class="{ 'horizontal-layout': isHorizontalLayout }"
+    >
+      <div class="avatar-wrapper">
+        <img :src="avatar" alt="用户头像" class="user-avatar" />
+      </div>
+      <div class="user-info">
+        <div class="username">{{ username }}</div>
+        <div class="user-role">管理员</div>
+      </div>
+      <!-- 直接使用图标组件 -->
+      <ArrowDown class="avatar-dropdown-icon" />
+    </div>
+
+    <template #dropdown>
+      <el-dropdown-menu class="custom-dropdown">
+        <div class="dropdown-header">
+          <img :src="avatar" alt="用户头像" class="header-avatar" />
+          <div class="header-info">
+            <div class="header-username">{{ username }}</div>
+            <div class="header-email">admin@example.com</div>
+          </div>
+        </div>
+
+        <el-dropdown-item command="personalCenter" class="dropdown-item">
+          <!-- 直接使用图标组件 -->
+          <User class="dropdown-icon" />
+          <span>个人中心</span>
+        </el-dropdown-item>
+
+        <el-dropdown-item command="settings" class="dropdown-item">
+          <!-- 直接使用图标组件 -->
+          <Setting class="dropdown-icon" />
+          <span>系统设置</span>
+        </el-dropdown-item>
+
+
+        <el-dropdown-item command="logout" class="dropdown-item logout-item">
+          <!-- 直接使用图标组件 -->
+          <SwitchButton class="dropdown-icon" />
+          <span>退出登录</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<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";
+import {
+  ArrowDown,
+  User,
+  Setting,
+  Link,
+  SwitchButton,
+} from "@element-plus/icons-vue";
+
+defineOptions({
+  name: "VabAvatar",
+});
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+// 计算属性
+const avatar = computed(() => store.getters["user/avatar"]);
+const username = computed(() => store.getters["user/username"]);
+const layout = computed(() => store.getters["settings/layout"]);
+const isHorizontalLayout = computed(() => layout.value === "horizontal");
+
+// 方法
+const handleCommand = (command) => {
+  switch (command) {
+    case "logout":
+      logout();
+      break;
+    case "personalCenter":
+      personalCenter();
+      break;
+    case "settings":
+      settings();
+      break;
+  }
+};
+
+const personalCenter = () => {
+  router.push("/personalCenter/personalCenter");
+};
+
+const settings = () => {
+  ElMessage.info("系统设置功能开发中...");
+};
+
+const logout = () => {
+  store.dispatch("user/logout");
+  if (recordRoute) {
+    const fullPath = route.fullPath;
+    router.push(`/login?redirect=${fullPath}`);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.avatar-container {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &.horizontal-layout {
+    .user-info {
+      .username,
+      .user-role {
+        color: rgba(255, 255, 255, 0.9) !important;
+      }
+    }
+
+    .avatar-dropdown-icon {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
+  }
+
+  .avatar-wrapper {
+    position: relative;
+    margin-right: 12px;
+
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .user-info {
+    flex: 1;
+    min-width: 0;
+
+    .username {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user-role {
+      font-size: 12px;
+      color: #666;
+      opacity: 0.8;
+    }
+  }
+
+  .avatar-dropdown-icon {
+    margin-left: 5px;
+    color: #666;
+  }
+}
+
+.custom-dropdown {
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
+  padding: 0;
+  min-width: 220px;
+
+  .dropdown-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    background: linear-gradient(135deg, #409EFF 0%, #69C0FF 100%);
+    border-radius: 12px 12px 0 0;
+    color: white;
+
+    .header-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      margin-right: 12px;
+      object-fit: cover;
+    }
+
+    .header-info {
+      flex: 1;
+
+      .header-username {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .header-email {
+        font-size: 12px;
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    transition: background-color 0.2s;
+
+    &.logout-item {
+      color: #f56c6c;
+    }
+  }
+
+  .el-divider {
+    margin: 8px 0;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .avatar-container {
+    padding: 6px 8px;
+
+    .user-info {
+      display: none;
+    }
+
+    .dropdown-icon {
+      display: none;
+    }
+  }
+
+  .custom-dropdown {
+    min-width: 200px;
+  }
+}
+
+// 隐藏下拉菜单箭头
+:deep() .popper__arrow {
+  display: none !important;
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <el-breadcrumb class="breadcrumb-container" separator=">">
+    <el-breadcrumb-item v-for="item in list" :key="item.path">
+      {{ item.meta.title }}
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  name: "VabBreadcrumb",
+  data() {
+    return {
+      list: this.getBreadcrumb(),
+    };
+  },
+  watch: {
+    $route() {
+      this.list = this.getBreadcrumb();
+    },
+  },
+  methods: {
+    getBreadcrumb() {
+      return this.$route.matched.filter((item) => item.name && item.meta.title);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb-container {
+  height: $base-nav-bar-height;
+  font-size: $base-font-size-default;
+  line-height: $base-nav-bar-height;
+
+  :deep() {
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        a {
+          display: flex;
+          float: left;
+          font-weight: normal;
+          color: #515a6e;
+
+          i {
+            margin-right: 3px;
+          }
+        }
+      }
+
+      &:last-child {
+        .el-breadcrumb__inner {
+          a {
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+}
+</style>