vue3-admin-gpt 1.0.0

package/src/styles/vab.scss

@@ -0,0 +1,476 @@
+/**
+ * @description 全局样式
+ */
+
+@charset "utf-8";
+
+@import "./normalize.scss";
+@import "./transition.scss";
+@import "./loading.scss";
+@import "./nav-icons.scss"; // 导入导航图标样式
+
+$base: ".vab";
+
+@mixin scrollbar {
+  max-height: 88vh;
+  margin-bottom: 0.5vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, 0.3);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.3);
+  }
+}
+
+@mixin base-scrollbar {
+  &::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background-color: #f8fafc;
+  }
+}
+
+img {
+  object-fit: cover;
+}
+
+a {
+  color: $base-color-blue;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+* {
+  transition: $base-transition;
+}
+
+svg {
+  transition: none;
+
+  * {
+    transition: none;
+  }
+}
+
+html {
+  body {
+    position: relative;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    font-size: $base-font-size-default;
+    color: #2c3e50;
+    background: #f6f8f9;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    @include base-scrollbar;
+
+    div {
+      @include base-scrollbar;
+    }
+
+    svg,
+    i {
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .v-modal {
+      backdrop-filter: blur(10px);
+    }
+
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+
+    .editor-toolbar {
+      .no-mobile,
+      .fa-question-circle {
+        display: none;
+      }
+    }
+
+    .el-divider--horizontal {
+      margin: 10px 0 25px 0;
+
+      .el-divider__text {
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .el-image-viewer {
+      &__close {
+        .el-icon-circle-close {
+          color: $base-color-white;
+        }
+      }
+    }
+
+    .vue-admin-better-wrapper {
+      .app-main-container {
+        @include base-scrollbar;
+
+        > [class*="-container"] {
+          * {
+            transition: none;
+          }
+
+          padding: $base-padding;
+          background: $base-color-white;
+        }
+      }
+    }
+
+    /* 进度条开始 */
+    #nprogress {
+      position: fixed;
+      z-index: $base-z-index;
+
+      .bar {
+        background: $base-color-blue !important;
+      }
+
+      .peg {
+        box-shadow: 0 0 10px $base-color-blue, 0 0 5px $base-color-blue !important;
+      }
+    }
+
+    .el-table {
+      .el-table__body-wrapper {
+        @include base-scrollbar;
+      }
+
+      th {
+        background: #f5f7fa;
+      }
+
+      td,
+      th {
+        position: relative;
+        box-sizing: border-box;
+        padding: 7.5px 0;
+
+        .cell {
+          font-size: $base-font-size-default;
+          font-weight: normal;
+          color: #606266;
+
+          .el-image {
+            width: 50px;
+            height: 50px;
+            border-radius: $base-border-radius;
+          }
+        }
+      }
+    }
+
+    .el-pagination {
+      padding: 2px 5px;
+      margin: 15px 0 0 0;
+      font-weight: normal;
+      color: $base-color-black;
+      text-align: center;
+    }
+
+    .el-menu.el-menu--popup.el-menu--popup-right-start {
+      @include scrollbar;
+    }
+
+    .el-menu.el-menu--popup.el-menu--popup-bottom-start {
+      @include scrollbar;
+    }
+
+    .el-submenu__title i {
+      color: $base-color-white;
+    }
+
+    .el-dialog,
+    .el-message-box {
+      &__body {
+        border-top: 1px solid $base-border-color;
+
+        .el-form {
+          padding-right: 30px;
+        }
+      }
+
+      &__footer {
+        padding: $base-padding;
+        text-align: right;
+        border-top: 1px solid $base-border-color;
+      }
+
+      &__content {
+        padding: 20px 20px 20px 20px;
+      }
+    }
+
+    .el-card {
+      margin-bottom: 15px;
+      border-radius: 12px;
+      border: none;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+      &__body {
+        padding: $base-padding;
+      }
+    }
+
+    /* VabPageHeader 全局样式 - 高优先级 */
+    .page-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+      border-radius: 12px !important;
+      padding: 30px !important;
+      margin-bottom: 24px !important;
+      color: white !important;
+      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3) !important;
+      border: none !important;
+
+      .header-content {
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+
+        .header-left {
+          .page-title {
+            font-size: 2rem !important;
+            font-weight: 700 !important;
+            margin: 0 0 8px 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 12px !important;
+            color: white !important;
+
+            .vab-icon {
+              font-size: 1.8rem !important;
+              color: white !important;
+            }
+          }
+
+          .page-description {
+            font-size: 1rem !important;
+            opacity: 0.9 !important;
+            margin: 0 !important;
+            color: white !important;
+          }
+        }
+
+        .header-right {
+          display: flex !important;
+          align-items: center !important;
+          gap: 8px !important;
+          font-size: 1.1rem !important;
+          font-weight: 600 !important;
+          color: white !important;
+
+          .vab-icon {
+            font-size: 1.3rem !important;
+            color: white !important;
+          }
+        }
+      }
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+      .page-header {
+        padding: 20px !important;
+
+        .header-content {
+          flex-direction: column !important;
+          gap: 16px !important;
+          text-align: center !important;
+
+          .header-left {
+            .page-title {
+              font-size: 1.5rem !important;
+            }
+          }
+        }
+      }
+    }
+
+    .select-tree-popper {
+      .el-scrollbar {
+        .el-scrollbar__view {
+          .el-select-dropdown__item {
+            height: auto;
+            max-height: 274px;
+            padding: 0;
+            overflow-y: auto;
+            line-height: 26px;
+          }
+        }
+      }
+    }
+
+    /* 扩展 el-divider 样式 */
+    .el-divider {
+      position: relative;
+      border: none;
+      background: linear-gradient(90deg, transparent, #e4e7ed, transparent);
+
+      &--horizontal {
+        height: 1px;
+        margin: 20px 0 30px 0;
+
+        .el-divider__text {
+          position: relative;
+          padding: 0 16px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #606266;
+          background: #fff;
+          border-radius: 4px;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: -8px;
+            width: 4px;
+            height: 4px;
+            margin-top: -2px;
+            background: #409eff;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      &--vertical {
+        width: 1px;
+        height: 1em;
+        margin: 0 16px;
+        background: #e4e7ed;
+      }
+
+      /* 主题变体 */
+      &--primary {
+        background: linear-gradient(90deg, transparent, #409eff, transparent);
+
+        .el-divider__text {
+          color: #409eff;
+
+          &::before {
+            background: #409eff;
+          }
+        }
+      }
+
+      &--success {
+        background: linear-gradient(90deg, transparent, #67c23a, transparent);
+
+        .el-divider__text {
+          color: #67c23a;
+
+          &::before {
+            background: #67c23a;
+          }
+        }
+      }
+
+      &--warning {
+        background: linear-gradient(90deg, transparent, #e6a23c, transparent);
+
+        .el-divider__text {
+          color: #e6a23c;
+
+          &::before {
+            background: #e6a23c;
+          }
+        }
+      }
+
+      &--danger {
+        background: linear-gradient(90deg, transparent, #f56c6c, transparent);
+
+        .el-divider__text {
+          color: #f56c6c;
+
+          &::before {
+            background: #f56c6c;
+          }
+        }
+      }
+
+      /* 虚线样式 */
+      &--dashed {
+        background: none;
+        border-top: 1px dashed #e4e7ed;
+
+        .el-divider__text {
+          background: #fff;
+        }
+      }
+
+      /* 粗线样式 */
+      &--thick {
+        height: 2px;
+        background: linear-gradient(90deg, transparent, #409eff, transparent);
+      }
+    }
+  }
+
+  .side-container {
+    .el-menu--collapse {
+      .el-menu-item,
+      .el-sub-menu {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .el-menu-item,
+    .el-sub-menu > .el-sub-menu__title {
+      * {
+        box-sizing: border-box;
+      }
+      box-sizing: border-box;
+      margin: 7px;
+      border-radius: 5px !important;
+
+      &:hover {
+        border-radius: 5px !important;
+      }
+
+      &.is-active {
+        background: $base-color-default !important;
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1,69 @@
+/**
+ * @description 全局主题变量配置
+ */
+/* stylelint-disable */
+@charset "utf-8";
+//框架默认主题色
+$base-color-default: #409eff;
+//默认层级
+$base-z-index: 999;
+//横向布局纵向布局时菜单背景色
+$base-menu-background: #21252b;
+//菜单文字颜色
+$base-menu-color: hsla(0, 0%, 100%, 0.95);
+//菜单选中文字颜色
+$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
+//菜单选中背景色
+$base-menu-background-active: $base-color-default;
+//标题颜色
+$base-title-color: #fff;
+//字体大小配置
+$base-font-size-small: 12px;
+$base-font-size-default: 14px;
+$base-font-size-big: 16px;
+$base-font-size-bigger: 18px;
+$base-font-size-max: 22px;
+$base-font-color: #606266;
+$base-color-blue: $base-color-default;
+$base-color-green: #41b882;
+$base-color-white: #fff;
+$base-color-black: #000;
+$base-color-yellow: #ffa91b;
+$base-color-orange: #ff6700;
+$base-color-red: #f34d37;
+$base-color-gray: rgba(0, 0, 0, 0.65);
+$base-main-width: 1279px;
+$base-border-radius: 4px;
+$base-border-color: #dcdfe6;
+//输入框高度
+$base-input-height: 32px;
+//默认paddiing
+$base-padding: 20px;
+//默认阴影
+$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+//横向布局时top-bar、logo、一级菜单的高度
+$base-top-bar-height: 65px;
+//纵向布局时logo的高度
+$base-logo-height: 75px;
+//顶部nav-bar的高度
+$base-nav-bar-height: 60px;
+//顶部多标签页tabs-bar的高度
+$base-tabs-bar-height: 55px;
+//顶部多标签页tabs-bar中每一个item的高度
+$base-tag-item-height: 34px;
+//菜单li标签的高度
+$base-menu-item-height: 50px;
+//app-main的高度
+$base-app-main-height: calc(100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} - #{$base-padding} - 55px - 55px);
+//纵向布局时左侧导航未折叠时的宽度
+$base-left-menu-width: 256px;
+//纵向布局时左侧导航未折叠时右侧内容的宽度
+$base-right-content-width: calc(100% - #{$base-left-menu-width});
+//纵向布局时左侧导航已折叠时的宽度
+$base-left-menu-width-min: 65px;
+//纵向布局时左侧导航已折叠时右侧内容的宽度
+$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
+//默认动画
+$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, background 0s, color 0s, font-size 0s;
+//默认动画长
+$base-transition-time: 0.3s;

package/src/utils/accessToken.js

@@ -0,0 +1,56 @@
+import { storage, tokenTableName } from '@/config'
+
+/**
+ * @description 获取accessToken
+ * @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>}
+ */
+export function getAccessToken() {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.getItem(tokenTableName)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.getItem(tokenTableName)
+    } else {
+      return localStorage.getItem(tokenTableName)
+    }
+  } else {
+    return localStorage.getItem(tokenTableName)
+  }
+}
+
+/**
+ * @description 存储accessToken
+ * @param accessToken
+ * @returns {void|*}
+ */
+export function setAccessToken(accessToken) {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.setItem(tokenTableName, accessToken)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.setItem(tokenTableName, accessToken)
+    } else {
+      return localStorage.setItem(tokenTableName, accessToken)
+    }
+  } else {
+    return localStorage.setItem(tokenTableName, accessToken)
+  }
+}
+
+/**
+ * @description 移除accessToken
+ * @returns {void|Promise<void>}
+ */
+export function removeAccessToken() {
+  if (storage) {
+    if ('localStorage' === storage) {
+      return localStorage.removeItem(tokenTableName)
+    } else if ('sessionStorage' === storage) {
+      return sessionStorage.clear()
+    } else {
+      return localStorage.removeItem(tokenTableName)
+    }
+  } else {
+    return localStorage.removeItem(tokenTableName)
+  }
+}

package/src/utils/eventBus.js

@@ -0,0 +1,8 @@
+import { ref } from "vue";
+import mitt from "mitt";
+
+// 创建一个事件发射器实例
+const emitter = mitt();
+
+// 导出事件总线
+export default emitter;

package/src/utils/handleRoutes.js

@@ -0,0 +1,100 @@
+/**
+ * @description all模式渲染后端返回路由
+ * @param constantRoutes
+ * @returns {*}
+ */
+export function convertRouter(asyncRoutes) {
+  // 处理空值情况
+  if (!asyncRoutes || !Array.isArray(asyncRoutes)) {
+    console.warn('后端返回的路由格式不正确或为空')
+    return []
+  }
+
+  return asyncRoutes
+    .map((route) => {
+      if (!route) return null
+
+      if (route.component) {
+        if (route.component === 'Layout') {
+          route.component = () => import('@/layouts')
+        } else if (route.component === 'EmptyLayout') {
+          route.component = () => import('@/layouts/EmptyLayout')
+        } else {
+          try {
+            const index = route.component.indexOf('views')
+            const path = index > 0 ? route.component.slice(index) : `views/${route.component}`
+            route.component = () =>
+              import(`@/${path}`).catch((err) => {
+                console.error(`路由组件加载失败: @/${path}`, err)
+                return import('@/views/404')
+              })
+          } catch (err) {
+            console.error(`路由组件解析失败: ${route.component}`, err)
+            route.component = () => import('@/views/404')
+          }
+        }
+      }
+
+      if (route.children) {
+        if (Array.isArray(route.children) && route.children.length) {
+          route.children = convertRouter(route.children)
+          // 过滤掉空路由
+          route.children = route.children.filter((child) => child !== null)
+        }
+        if (!route.children || route.children.length === 0) delete route.children
+      }
+
+      return route
+    })
+    .filter((route) => route !== null) // 过滤掉无效路由
+}
+
+/**
+ * @description 判断当前路由是否包含权限
+ * @param permissions
+ * @param route
+ * @returns {boolean|*}
+ */
+function hasPermission(permissions, route) {
+  // 确保permissions是数组
+  if (!permissions || !Array.isArray(permissions)) {
+    return false
+  }
+
+  if (route.meta && route.meta.permissions) {
+    return permissions.some((role) => route.meta.permissions.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * @description intelligence模式根据permissions数组拦截路由
+ * @param routes
+ * @param permissions
+ * @returns {[]}
+ */
+export function filterAsyncRoutes(routes, permissions) {
+  // 处理无效参数
+  if (!routes || !Array.isArray(routes)) {
+    return []
+  }
+
+  if (!permissions || !Array.isArray(permissions)) {
+    return []
+  }
+
+  const finallyRoutes = []
+  routes.forEach((route) => {
+    if (!route) return
+
+    const item = { ...route }
+    if (hasPermission(permissions, item)) {
+      if (item.children && Array.isArray(item.children)) {
+        item.children = filterAsyncRoutes(item.children, permissions)
+      }
+      finallyRoutes.push(item)
+    }
+  })
+  return finallyRoutes
+}