vue3-admin-gpt 1.0.0

package/src/utils/vab.js

@@ -0,0 +1,218 @@
+import { loadingText, messageDuration, title } from "@/config";
+import * as lodash from "lodash";
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+} from "element-plus";
+import { getAccessToken } from "@/utils/accessToken";
+
+/**
+ * 将FontAwesome图标名转换为Element Plus图标组件名
+ * @param {Array|String} icon FontAwesome图标配置，例如['fas', 'user']或直接的图标名称
+ * @returns {String} Element Plus图标组件名
+ */
+export const faToElIcon = (icon) => {
+  // 如果是数组，获取第二个元素（图标名）
+  // 如果不是数组，直接使用icon作为图标名
+  const iconName = Array.isArray(icon) ? icon[1] : icon;
+
+  // 图标名映射表（可根据需要扩展）
+  const iconMap = {
+    // 常用图标
+    user: "User",
+    "user-alt": "User",
+    "mobile-alt": "Cellphone",
+    "envelope-open": "Message",
+    unlock: "Unlock",
+    download: "Download",
+    star: "Star",
+    users: "User",
+    coffee: "Coffee",
+    "code-branch": "Share",
+    gem: "Trophy",
+    palette: "Brush",
+    "info-circle": "InfoFilled",
+    crown: "Crown",
+    edit: "Edit",
+    "exchange-alt": "Sort",
+    "sync-alt": "Refresh",
+    "mouse-pointer": "Pointer",
+    route: "Connection",
+    check: "Check",
+    "arrow-right": "ArrowRight",
+    "shopping-cart": "ShoppingCart",
+    "paint-brush": "Brush",
+    "check-circle": "SuccessFilled",
+    bug: "Warning",
+    search: "Search",
+    "expand-arrows-alt": "FullScreen",
+    "compress-arrows-alt": "ScaleToOriginal",
+    redo: "Refresh",
+
+    // 基础图标
+    home: "HomeFilled",
+    marker: "Location",
+    "box-open": "Box",
+    "horse-head": "Promotion",
+
+    // 常用图标
+    "chart-line": "TrendCharts",
+    "chart-pie": "PieChart",
+    "chart-bar": "Histogram",
+    table: "Grid",
+    form: "Document",
+    "list-ul": "List",
+    "user-cog": "Setting",
+    cog: "Setting",
+    cogs: "Tools",
+    tools: "Tools",
+    wrench: "Tools",
+    code: "Terminal",
+    "file-code": "Document",
+    "file-alt": "Document",
+    "folder-open": "Folder",
+    folder: "FolderOpened",
+    "folder-plus": "FolderAdd",
+    "calendar-alt": "Calendar",
+    image: "Picture",
+    images: "PictureFilled",
+    video: "VideoPlay",
+    music: "Headset",
+    store: "Shop",
+    "credit-card": "CreditCard",
+    "money-bill": "Money",
+    "dollar-sign": "Money",
+    comments: "ChatDotRound",
+    comment: "ChatLineRound",
+    envelope: "Message",
+    bell: "Bell",
+    database: "Collection",
+    server: "Monitor",
+    desktop: "Monitor",
+    mobile: "Cellphone",
+    tablet: "Cellphone",
+    lock: "Lock",
+    shield: "Shield",
+    "exclamation-triangle": "Warning",
+    "exclamation-circle": "Warning",
+    "question-circle": "QuestionFilled",
+    "times-circle": "CircleCloseFilled",
+    plus: "Plus",
+    minus: "Minus",
+    times: "Close",
+    filter: "Filter",
+    bars: "Menu",
+    th: "Grid",
+    "th-large": "Grid",
+    "ellipsis-v": "More",
+    "ellipsis-h": "More",
+    "caret-down": "ArrowDown",
+    "caret-up": "ArrowUp",
+    "caret-left": "ArrowLeft",
+    "caret-right": "ArrowRight",
+    "arrow-down": "ArrowDown",
+    "arrow-up": "ArrowUp",
+    "arrow-left": "ArrowLeft",
+    undo: "RefreshLeft",
+    sync: "Refresh",
+    refresh: "Refresh",
+    "sign-out-alt": "SwitchButton",
+
+    // 品牌图标
+    github: "Platform",
+    qq: "ChatDotRound",
+    vuejs: "ElementPlus",
+
+    // 默认情况
+    default: "More",
+  };
+
+  // 返回映射的Element Plus图标名，如果没有映射则返回默认图标
+  return iconMap[iconName] || iconMap["default"];
+};
+
+const install = (app) => {
+  // 全局方法
+  const vab = {
+    /* 全局accessToken */
+    get accessToken() {
+      return getAccessToken();
+    },
+    /* 全局标题 */
+    get title() {
+      return title;
+    },
+    /* 全局加载层 */
+    loading: (options = {}) => {
+      const defaultOptions = {
+        lock: true,
+        text: loadingText,
+        background: "rgba(0, 0, 0, 0.7)",
+      };
+      return ElLoading.service({ ...defaultOptions, ...options });
+    },
+    /* 全局多彩加载层 */
+    colorfulLoading: (options = {}) => {
+      let defaultOptions = {
+        lock: true,
+        text: loadingText,
+        spinner: "dots",
+        background: "rgba(0, 0, 0, 0.7)",
+      };
+      if (options.spinner) {
+        defaultOptions.spinner = options.spinner;
+      }
+      return ElLoading.service({ ...defaultOptions, ...options });
+    },
+    /* 全局Message */
+    message: (message, type = "info", options = {}) => {
+      if (message) {
+        const defaultOptions = {
+          message,
+          type,
+          duration: messageDuration,
+        };
+        return ElMessage({ ...defaultOptions, ...options });
+      }
+    },
+    /* 全局Alert */
+    alert: (content, options = {}) => {
+      const defaultOptions = {
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        showClose: true,
+        ...options,
+      };
+      return ElMessageBox.alert(content, "温馨提示", defaultOptions);
+    },
+    /* 全局Confirm */
+    confirm: (content, options = {}) => {
+      const defaultOptions = {
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        ...options,
+      };
+      return ElMessageBox.confirm(content, "温馨提示", defaultOptions);
+    },
+    /* 全局Notification */
+    notification: (message, options = {}) => {
+      if (message) {
+        ElNotification({
+          title: "温馨通知",
+          message,
+          ...options,
+        });
+      }
+    },
+    /* Lodash */
+    lodash,
+  };
+
+  app.config.globalProperties.$vab = vab;
+};
+
+export default {
+  install,
+};

package/src/utils/validate.js

@@ -0,0 +1,48 @@
+/**
+ * @description 判读是否为外链
+ * @param path
+ * @returns {boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @description 校验密码是否小于6位
+ * @param str
+ * @returns {boolean}
+ */
+export function isPassword(str) {
+  return str.length >= 6
+}
+
+/**
+ * @description 判断是否是字符串
+ * @param str
+ * @returns {boolean}
+ */
+export function isString(str) {
+  return typeof str === 'string' || str instanceof String
+}
+
+/**
+ * @description 判断是否是数组
+ * @param arg
+ * @returns {arg is any[]|boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
+
+/**
+ * @description 判断是否是手机号
+ * @param str
+ * @returns {boolean}
+ */
+export function isPhone(str) {
+  const reg = /^1\d{10}$/
+  return reg.test(str)
+}

package/src/views/401.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="error-container">
+    <div class="error-content">
+      <el-row :gutter="20">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="pic-error">
+            <img
+              alt="401"
+              class="pic-error-parent"
+              src="@/assets/error_images/401.png"
+            />
+            <img
+              alt="401"
+              class="pic-error-child left"
+              src="@/assets/error_images/cloud.png"
+            />
+            <img
+              alt="401"
+              class="pic-error-child mid"
+              src="@/assets/error_images/cloud.png"
+            />
+            <img
+              alt="401"
+              class="pic-error-child right"
+              src="@/assets/error_images/cloud.png"
+            />
+          </div>
+        </el-col>
+
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
+          <div class="bullshit">
+            <div class="bullshit-oops">
+              {{ oops }}
+            </div>
+            <div class="bullshit-headline">
+              {{ headline }}
+            </div>
+            <div class="bullshit-info">
+              {{ info }}
+            </div>
+            <a class="bullshit-return-home" href="#/index"
+              >{{ jumpTime }}s&nbsp;{{ btn }}</a
+            >
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Page401",
+  data() {
+    return {
+      jumpTime: 5,
+      oops: "抱歉!",
+      headline: "您没有操作权限...",
+      info: "当前帐号没有操作权限,请联系管理员。",
+      btn: "返回",
+      timer: 0,
+    };
+  },
+  mounted() {
+    this.timeChange();
+  },
+  beforeUnmount() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    timeChange() {
+      this.timer = setInterval(() => {
+        if (this.jumpTime) {
+          this.jumpTime--;
+        } else {
+          this.$router.push({ path: "/" });
+          this.$store.dispatch("tabsBar/delOthersRoutes", {
+            path: "/",
+          });
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.error-container {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .error-content {
+    .pic-error {
+      position: relative;
+      float: left;
+      width: 120%;
+      overflow: hidden;
+
+      &-parent {
+        width: 100%;
+      }
+
+      &-child {
+        position: absolute;
+
+        &.left {
+          top: 17px;
+          left: 220px;
+          width: 80px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-delay: 1s;
+          animation-fill-mode: forwards;
+        }
+
+        &.mid {
+          top: 10px;
+          left: 420px;
+          width: 46px;
+          opacity: 0;
+          animation-name: cloudMid;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-delay: 1.2s;
+          animation-fill-mode: forwards;
+        }
+
+        &.right {
+          top: 100px;
+          left: 500px;
+          width: 62px;
+          opacity: 0;
+          animation-name: cloudRight;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-delay: 1s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+
+        @keyframes cloudMid {
+          0% {
+            top: 10px;
+            left: 420px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 40px;
+            left: 360px;
+            opacity: 1;
+          }
+
+          70% {
+            top: 130px;
+            left: 180px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 160px;
+            left: 120px;
+            opacity: 0;
+          }
+        }
+
+        @keyframes cloudRight {
+          0% {
+            top: 100px;
+            left: 500px;
+            opacity: 0;
+          }
+
+          20% {
+            top: 120px;
+            left: 460px;
+            opacity: 1;
+          }
+
+          80% {
+            top: 180px;
+            left: 340px;
+            opacity: 1;
+          }
+
+          100% {
+            top: 200px;
+            left: 300px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 30px 0;
+      overflow: hidden;
+
+      &-oops {
+        margin-bottom: 20px;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: $base-color-blue;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+
+      &-headline {
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #222;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+
+      &-info {
+        margin-bottom: 30px;
+        font-size: 13px;
+        line-height: 21px;
+        color: $base-color-gray;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+
+      &-return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        font-size: 14px;
+        line-height: 36px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background: $base-color-blue;
+        border-radius: 100px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+
+      @keyframes slideUp {
+        0% {
+          opacity: 0;
+          transform: translateY(60px);
+        }
+
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+  }
+}
+</style>