vue3-admin-gpt 1.0.0

package/src/store/modules/tabsBar.js

@@ -0,0 +1,109 @@
+/**
+ * @description tabsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户hipi的启发下完成了重构，请勿修改
+ */
+
+const state = () => ({
+  visitedRoutes: [],
+})
+const getters = {
+  visitedRoutes: (state) => state.visitedRoutes,
+}
+const mutations = {
+  addVisitedRoute(state, route) {
+    let target = state.visitedRoutes.find((item) => item.path === route.path)
+    if (target) {
+      if (route.fullPath !== target.fullPath) Object.assign(target, route)
+      return
+    }
+    state.visitedRoutes.push(Object.assign({}, route))
+  },
+  delVisitedRoute(state, route) {
+    state.visitedRoutes.forEach((item, index) => {
+      if (item.path === route.path) state.visitedRoutes.splice(index, 1)
+    })
+  },
+  delOthersVisitedRoute(state, route) {
+    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix || item.path === route.path)
+  },
+  delLeftVisitedRoute(state, route) {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.affix || index <= state.visitedRoutes.indexOf(item)
+    })
+  },
+  delRightVisitedRoute(state, route) {
+    let index = state.visitedRoutes.length
+    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+      return item.meta.affix || index >= state.visitedRoutes.indexOf(item)
+    })
+  },
+  delAllVisitedRoutes(state) {
+    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix)
+  },
+  updateVisitedRoute(state, route) {
+    state.visitedRoutes.forEach((item) => {
+      if (item.path === route.path) item = Object.assign(item, route)
+    })
+  },
+}
+const actions = {
+  addVisitedRoute({ commit }, route) {
+    commit('addVisitedRoute', route)
+  },
+  async delRoute({ dispatch, state }, route) {
+    await dispatch('delVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delVisitedRoute({ commit, state }, route) {
+    commit('delVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  async delOthersRoutes({ dispatch, state }, route) {
+    await dispatch('delOthersVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  async delLeftRoutes({ dispatch, state }, route) {
+    await dispatch('delLeftVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  async delRightRoutes({ dispatch, state }, route) {
+    await dispatch('delRightVisitedRoute', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delOthersVisitedRoute({ commit, state }, route) {
+    commit('delOthersVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  delLeftVisitedRoute({ commit, state }, route) {
+    commit('delLeftVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  delRightVisitedRoute({ commit, state }, route) {
+    commit('delRightVisitedRoute', route)
+    return [...state.visitedRoutes]
+  },
+  async delAllRoutes({ dispatch, state }, route) {
+    await dispatch('delAllVisitedRoutes', route)
+    return {
+      visitedRoutes: [...state.visitedRoutes],
+    }
+  },
+  delAllVisitedRoutes({ commit, state }) {
+    commit('delAllVisitedRoutes')
+    return [...state.visitedRoutes]
+  },
+  updateVisitedRoute({ commit }, route) {
+    commit('updateVisitedRoute', route)
+  },
+}
+export default { state, getters, mutations, actions }

package/src/store/modules/user.js

@@ -0,0 +1,131 @@
+/**
+ * @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
+ */
+
+// 默认头像列表
+const defaultAvatars = [
+  "https://oss.gempharmatech.com/upload/file/20230918/0e900403-d8bc-4fc8-ae25-8eeeaa8df6e0.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/246c4a2d-2e6e-41eb-890a-2cf1ba6b4744.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/3f0a875a-502b-45bc-b26f-a2cb85477a31.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/9345aac3-dcb7-4db3-a4ce-2a8dd258a753.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/4f952091-6de6-464c-a1a6-12d7d5b51afb.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/6d214d7b-bf3f-4dae-a94b-5606e94185c8.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/60d7acc8-e9ca-4ad1-856a-d2af64e4451c.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/50e58f52-379f-447f-9d85-ac2d7647571c.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/9858572c-3573-465e-8a53-448ee49fb581.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/247a199b-b69e-42b4-83e4-7f3ef76abe36.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/e7f32c72-187c-47ed-894a-f25227711da2.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/51d19975-d527-43ed-8cb3-afa3bf0ea7d2.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/537a52d8-7d5e-41b9-ae3b-1a656c2971b3.png",
+  "https://oss.gempharmatech.com/upload/file/20230918/13812b25-f42f-4826-a2eb-ad7166a9b668.png"
+];
+
+// 随机获取一个默认头像
+const getRandomAvatar = () => {
+  return defaultAvatars[Math.floor(Math.random() * defaultAvatars.length)];
+};
+
+import { getUserInfo, login, logout } from "@/api/user";
+import {
+  getAccessToken,
+  removeAccessToken,
+  setAccessToken,
+} from "@/utils/accessToken";
+import {RSA} from '@/utils/password'
+import { resetRouter } from "@/router";
+import { title, tokenName } from "@/config";
+import { ElMessage } from "element-plus";
+
+const state = () => ({
+  accessToken: getAccessToken(),
+  username: "",
+  avatar: getRandomAvatar(),
+  permissions: [],
+});
+const getters = {
+  accessToken: (state) => state.accessToken,
+  username: (state) => state.username,
+  avatar: (state) => state.avatar,
+  permissions: (state) => state.permissions,
+};
+const mutations = {
+  setAccessToken(state, accessToken) {
+    state.accessToken = accessToken;
+    setAccessToken(accessToken);
+  },
+  setUsername(state, username) {
+    state.username = username;
+  },
+  setAvatar(state, avatar) {
+    state.avatar = avatar;
+  },
+  setPermissions(state, permissions) {
+    state.permissions = permissions;
+  },
+};
+const actions = {
+  setPermissions({ commit }, permissions) {
+    commit("setPermissions", permissions);
+  },
+  async login({ commit }, userInfo) {
+    // const { data } = await login(userInfo);
+    let params = {
+      customerName: userInfo.username,
+      password: RSA(userInfo.password),
+    }
+    const { data } = await login(params);
+    const accessToken = data;
+    if (accessToken) {
+      commit("setAccessToken", accessToken);
+      const hour = new Date().getHours();
+      const thisTime =
+        hour < 8
+          ? "早上好"
+          : hour <= 11
+          ? "上午好"
+          : hour <= 13
+          ? "中午好"
+          : hour < 18
+          ? "下午好"
+          : "晚上好";
+      ElMessage.success(`欢迎登录${title}，${thisTime}！`);
+    } else {
+      ElMessage.error(`登录接口异常，未正确返回${tokenName}...`);
+    }
+  },
+  async getUserInfo({ commit, state }) {
+    try {
+      const { data } = await getUserInfo(state.accessToken);
+      if (!data) {
+        ElMessage.error("验证失败，请重新登录...");
+        return false;
+      }
+      let { permissions, username, avatar } = data;
+      if (permissions && username && Array.isArray(permissions)) {
+        commit("setPermissions", permissions);
+        commit("setUsername", username);
+        commit("setAvatar", avatar);
+        return permissions;
+      } else {
+        ElMessage.error("用户信息接口异常");
+        return false;
+      }
+    } catch (error) {
+      console.error("获取用户信息失败:", error);
+      ElMessage.error("获取用户信息失败，请重新登录");
+      return false;
+    }
+  },
+  async logout({ dispatch }) {
+    await logout(state.accessToken);
+    await dispatch("resetAccessToken");
+    await resetRouter();
+    location.reload();
+  },
+  resetAccessToken({ commit }) {
+    commit("setPermissions", []);
+    commit("setAccessToken", "");
+    removeAccessToken();
+  },
+};
+export default { state, getters, mutations, actions };

package/src/styles/element-variables.scss

@@ -0,0 +1,13 @@
+// 引入Element Plus样式
+@import "element-plus/dist/index.css";
+
+// 自定义Element Plus主题变量
+:root {
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-color-error: #f56c6c;
+  --el-color-info: #909399;
+}
+

package/src/styles/loading.scss

@@ -0,0 +1,345 @@
+/**
+ * @description 全局加载动画
+ */
+
+@charset "utf-8";
+
+@import "./spinner/dots.css";
+@import "./spinner/gauge.css";
+@import "./spinner/inner-circles.css";
+@import "./spinner/plus.css";
+
+$base-loading: ".vab-loading-type";
+
+/* 自定义loading开始 */
+#{$base-loading}1 {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  margin: 0 auto 15px;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-bottom-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading1-0 0.8s linear infinite;
+}
+
+#{$base-loading}1::before {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: auto;
+  content: "";
+  border: 3px solid $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading1 0.5s alternate ease-in infinite;
+}
+
+@keyframes vabLoading1-0 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vabLoading1 {
+  from {
+    transform: scale(0.5);
+  }
+
+  to {
+    transform: scale(1.2);
+  }
+}
+
+#{$base-loading}2 {
+  width: 20px;
+  height: 20px;
+  margin-top: -40px;
+  margin-left: -10px;
+  animation: vabLoading2 1s linear reverse infinite;
+}
+
+#{$base-loading}2::before {
+  display: block;
+  width: 36px;
+  height: 36px;
+  margin-top: -17px;
+  margin-left: -18px;
+  content: "";
+  animation: vabLoading2 0.4s linear infinite;
+}
+
+#{$base-loading}2::after {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin-top: -3px;
+  margin-left: -4px;
+  content: "";
+  animation: vabLoading2 0.4s linear infinite;
+}
+
+#{$base-loading}2::before,
+#{$base-loading}2,
+#{$base-loading}2::after {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-right-color: $base-color-blue;
+  border-radius: 50%;
+}
+
+@keyframes vabLoading2 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}3 {
+  display: inline-block;
+  width: 2.5em;
+  height: 3em;
+  margin-bottom: 15px;
+  border: 3px solid transparent;
+  border-top-color: $base-color-blue;
+  border-bottom-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading3 2s ease infinite;
+}
+
+@keyframes vabLoading3 {
+  50% {
+    border-width: 8px;
+    transform: rotate(360deg) scale(0.4, 0.33);
+  }
+
+  100% {
+    border-width: 3px;
+    transform: rotate(720deg) scale(1, 1);
+  }
+}
+
+#{$base-loading}4 {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin: 0 auto 10px;
+  border: 8px solid transparent;
+  border-bottom-color: $base-color-blue;
+  border-left-color: $base-color-blue;
+  border-radius: 50%;
+  animation: vabLoading4 1s linear infinite normal;
+}
+
+#{$base-loading}4::after {
+  display: block;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  content: " ";
+  border: 6px solid $base-color-blue;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-radius: 50%;
+}
+
+@keyframes vabLoading4 {
+  0% {
+    opacity: 0.2;
+    transform: rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+
+  100% {
+    opacity: 0.2;
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}5 {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 auto 15px;
+  border: solid 1.5em $base-color-blue;
+  border-right: solid 1.5em transparent;
+  border-left: solid 1.5em transparent;
+  border-radius: 100%;
+  animation: vabLoading5 1s linear infinite;
+}
+
+@keyframes vabLoading5 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(60deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}6 {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 auto 25px auto;
+  perspective: 200px;
+}
+
+#{$base-loading}6::before,
+#{$base-loading}6::after {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  content: "";
+  background: rgba(0, 0, 0, 0);
+  animation: vabLoading6 0.5s infinite alternate;
+}
+
+#{$base-loading}6::before {
+  left: 0;
+}
+
+#{$base-loading}6::after {
+  right: 0;
+  animation-delay: 0.15s;
+}
+
+@keyframes vabLoading6 {
+  0% {
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    transform: scale(1) translateY(0) rotateX(0deg);
+  }
+
+  100% {
+    background: $base-color-blue;
+    box-shadow: 0 25px 40px rgba($base-color-blue, 0.5);
+    transform: scale(1.2) translateY(-25px) rotateX(45deg);
+  }
+}
+
+#{$base-loading}7 {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin: 0 auto 15px auto;
+  border: 2px solid $base-color-blue;
+  border-top-color: rgba($base-color-blue, 0.2);
+  border-right-color: rgba($base-color-blue, 0.2);
+  border-bottom-color: rgba($base-color-blue, 0.2);
+  border-radius: 100%;
+  animation: vabLoading7 infinite 0.75s linear;
+}
+
+@keyframes vabLoading7 {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#{$base-loading}8 {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto 15px auto;
+  background-color: $base-color-blue;
+  border-radius: 50%;
+  box-shadow: 30px 0 0 0 $base-color-blue;
+  transform: translateX(-15px);
+}
+
+#{$base-loading}8::after {
+  position: absolute;
+  top: 8px;
+  left: 9px;
+  width: 10px;
+  height: 10px;
+  content: "";
+  background-color: $base-color-white;
+  border-radius: 50%;
+  box-shadow: 30px 0 0 0 $base-color-white;
+  animation: vabLoading8 2s ease-in-out infinite alternate;
+}
+
+@keyframes vabLoading8 {
+  0% {
+    left: 9px;
+  }
+
+  100% {
+    left: 1px;
+  }
+}
+
+#{$base-loading}9 {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto 15px auto;
+  border: 1px $base-color-blue solid;
+  animation: vabLoading9 5s linear infinite;
+}
+
+#{$base-loading}9::after {
+  position: absolute;
+  top: -8px;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  content: "";
+  background-color: $base-color-blue;
+  animation: vabLoading9_check 1s ease-in-out infinite;
+}
+
+@keyframes vabLoading9_check {
+  25% {
+    top: -8px;
+    left: 22px;
+  }
+
+  50% {
+    top: 22px;
+    left: 22px;
+  }
+
+  75% {
+    top: 22px;
+    left: -9px;
+  }
+
+  100% {
+    top: -7px;
+    left: -9px;
+  }
+}
+
+@keyframes vabLoading9 {
+  0% {
+    box-shadow: inset 0 0 0 0 rgba($base-color-blue, 0.5);
+    opacity: 0.5;
+  }
+
+  100% {
+    box-shadow: inset 0 -20px 0 0 $base-color-blue;
+  }
+}
+
+/* 自定义loading结束 */

package/src/styles/nav-icons.scss

@@ -0,0 +1,52 @@
+/* 全局导航图标样式 */
+body {
+  .nav-icon {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 18px !important;
+    height: 18px !important;
+    margin: 0 4px !important;
+    color: rgba(0, 0, 0, 0.7) !important;
+    background: rgba(255, 255, 255, 0.6) !important;
+    border: 1px solid rgba(255, 255, 255, 0.8) !important;
+    border-radius: 8px !important;
+    cursor: pointer !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+    font-size: 0.9em !important;
+    background: rgba(255, 255, 255, 0.8) !important;
+    border-color: rgba(255, 255, 255, 1) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.8) !important;
+      border-color: rgba(255, 255, 255, 1) !important;
+      transform: translateY(-1px) !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    &:active {
+      transform: translateY(0) !important;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    }
+  }
+
+  /* 头像组件下拉图标 */
+  .avatar-dropdown-icon {
+    margin-left: 8px !important;
+    color: #666 !important;
+    font-size: 12px !important;
+  }
+
+  /* 下拉菜单项图标 */
+  .dropdown-icon {
+    margin-right: 6px !important;
+    font-size: 14px !important;
+    width: 18px !important;
+    height: 18px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+}