vue3-admin-gpt 1.0.0

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

@@ -0,0 +1,286 @@
+<template>
+  <div class="top-container">
+    <div class="vab-main">
+      <el-row :gutter="15">
+        <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
+          <vab-logo />
+        </el-col>
+        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
+          <el-menu
+            active-text-color=" hsla(0, 0%, 100%, 0.95)"
+            background-color="#21252b"
+            :collapse="collapse"
+            :collapse-transition="false"
+            :default-active="activeMenu"
+            :default-openeds="defaultOpens"
+            text-color=" hsla(0, 0%, 100%, 0.95)"
+            menu-trigger="hover"
+            mode="horizontal"
+          >
+            <template v-for="route in routes">
+              <vab-side-item
+                v-if="!route.hidden"
+                :key="route.path"
+                :full-path="route.path"
+                :item="route"
+              />
+            </template>
+          </el-menu>
+        </el-col>
+        <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
+          <div class="right-panel">
+            <div class="right-menu">
+              <vab-full-screen @refresh="refreshRoute" />
+              <vab-theme class="hidden-md-and-down" />
+              <el-icon
+                :class="{ 'is-pulsing': pulse }"
+                title="重载路由"
+                @click="refreshRoute"
+              >
+                <Refresh />
+              </el-icon>
+            </div>
+            <vab-avatar />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<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";
+
+defineOptions({
+  name: "VabTop",
+});
+
+const store = useStore();
+const route = useRoute();
+
+// 响应式数据
+const pulse = ref(false);
+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 defaultOpens = computed(() => []);
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+// 方法
+const refreshRoute = async () => {
+  window.$eventBus.emit("reload-router-view");
+  pulse.value = true;
+  timeOutID = setTimeout(() => {
+    pulse.value = false;
+  }, 1000);
+};
+
+// 生命周期钩子
+onBeforeUnmount(() => {
+  clearTimeout(timeOutID);
+});
+</script>
+
+<style lang="scss" scoped>
+.top-container {
+  display: flex;
+  align-items: center;
+  justify-items: flex-end;
+  height: $base-top-bar-height;
+  background: $base-menu-background;
+  width: 100%;
+
+  .is-pulsing {
+    animation: pulse 1s infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .vab-main {
+    background: $base-menu-background;
+    width: 100%;
+    padding: 0 15px;
+
+    :deep() {
+      .el-menu {
+        &.el-menu--horizontal {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: $base-top-bar-height;
+          border-bottom: 0 solid transparent !important;
+
+          .el-menu-item,
+          .el-submenu__title {
+            padding: 0 15px;
+          }
+
+          @media only screen and (max-width: 767px) {
+            .el-menu-item,
+            .el-submenu__title {
+              padding: 0 8px;
+            }
+
+            li:nth-child(4),
+            li:nth-child(5) {
+              display: none !important;
+            }
+          }
+
+          > .el-menu-item {
+            height: $base-top-bar-height;
+            line-height: $base-top-bar-height;
+          }
+
+          > .el-submenu {
+            .el-submenu__title {
+              height: $base-top-bar-height;
+              line-height: $base-top-bar-height;
+            }
+          }
+        }
+
+        svg {
+          width: 1rem;
+          margin-right: 3px;
+        }
+
+        &--horizontal {
+          .el-menu {
+            .el-menu-item,
+            .el-submenu__title {
+              height: $base-menu-item-height;
+              line-height: $base-menu-item-height;
+            }
+          }
+
+          .el-submenu,
+          .el-menu-item {
+            &.is-active {
+              background-color: $base-color-blue !important;
+              border-bottom: 0 solid transparent !important;
+
+              .el-submenu__title {
+                border-bottom: 0 solid transparent !important;
+              }
+            }
+          }
+
+          > .el-menu-item {
+            .el-tag {
+              margin-top: calc(#{$base-top-bar-height} / 2 - 7.5px);
+              margin-left: 5px;
+            }
+
+            @media only screen and (max-width: 1199px) {
+              .el-tag {
+                display: none;
+              }
+            }
+
+            &.is-active {
+              background-color: transparent !important;
+              border-bottom: 3px solid $base-color-blue !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .right-panel {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: $base-top-bar-height;
+    width: 100%;
+
+    .right-menu {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+    }
+
+    :deep() {
+      .username,
+      .user-role {
+        color: rgba($base-color-white, 0.9);
+      }
+
+      .username + i {
+        color: rgba($base-color-white, 0.9);
+      }
+
+      svg {
+        width: 1em;
+        height: 1em;
+        margin-right: 15px;
+        font-size: $base-font-size-big;
+        color: rgba($base-color-white, 0.9);
+        cursor: pointer;
+        fill: rgba($base-color-white, 0.9);
+      }
+
+      button {
+        svg {
+          margin-right: 0;
+          color: rgba($base-color-white, 0.9);
+          cursor: pointer;
+          fill: rgba($base-color-white, 0.9);
+        }
+      }
+
+      .el-badge {
+        margin-right: 15px;
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .top-container {
+    .vab-main {
+      .el-menu--horizontal {
+        justify-content: flex-start;
+      }
+    }
+
+    .right-panel {
+      .right-menu {
+        margin-right: 5px;
+      }
+
+      :deep() {
+        svg {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/layouts/export.js

@@ -0,0 +1,29 @@
+/**
+ * @description 公共布局及样式自动引入
+ */
+
+// 使用 require.context 自动导入主题文件
+const requireThemes = require.context("@/styles/themes", true, /\.scss$/);
+requireThemes.keys().forEach((fileName) => {
+  requireThemes(fileName);
+});
+
+// 预加载组件，但不立即注册
+// 这些组件将在main.js中被注册
+const components = {};
+const requireComponents = require.context("./components", true, /\.vue$/);
+requireComponents.keys().forEach((fileName) => {
+  const componentConfig = requireComponents(fileName);
+  const component = componentConfig.default || componentConfig;
+  if (component.name) {
+    components[component.name] = component;
+  }
+});
+
+// 创建一个注册函数，接收app实例
+export function registerLayoutComponents(app) {
+  // 注册所有布局组件
+  Object.entries(components).forEach(([name, component]) => {
+    app.component(name, component);
+  });
+}

package/src/layouts/index.vue

@@ -0,0 +1,339 @@
+<template>
+  <div :class="classObj" class="vue-admin-better-wrapper">
+    <div
+      v-if="'horizontal' === layout"
+      :class="{
+        fixed: header === 'fixed',
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
+      }"
+      class="layout-container-horizontal"
+    >
+      <div :class="header === 'fixed' ? 'fixed-header' : ''">
+        <vab-top />
+        <div
+          v-if="tabsBar === 'true' || tabsBar === true"
+          :class="{ 'tag-view-show': tabsBar }"
+        >
+          <el-scrollbar>
+            <vab-tabs />
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="vab-main main-padding">
+        <vab-app-main />
+      </div>
+    </div>
+    <div
+      v-else
+      :class="{
+        fixed: header === 'fixed',
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
+      }"
+      class="layout-container-vertical"
+    >
+      <div
+        v-if="device === 'mobile' && collapse === false"
+        class="mask"
+        @click="handleFoldSideBar"
+      />
+      <vab-side />
+      <div :class="collapse ? 'is-collapse-main' : ''" class="vab-main">
+        <div :class="header === 'fixed' ? 'fixed-header' : ''">
+          <vab-nav />
+          <vab-tabs v-if="tabsBar === 'true' || tabsBar === true" />
+        </div>
+        <vab-app-main />
+      </div>
+    </div>
+    <el-backtop />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount, onBeforeUnmount, onMounted, nextTick } from "vue";
+import { useStore } from "vuex";
+import { tokenName } from "@/config";
+import { debounce } from "lodash";
+
+const store = useStore();
+
+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 classObj = computed(() => {
+  return {
+    mobile: device.value === "mobile",
+  };
+});
+
+const handleFoldSideBar = () => {
+  store.dispatch("settings/foldSideBar");
+};
+
+const handleIsMobile = () => {
+  return document.body.getBoundingClientRect().width - 1 < 992;
+};
+
+const handleResize = debounce(() => {
+  if (!document.hidden) {
+    const isMobile = handleIsMobile();
+    if (isMobile) {
+      //横向布局时如果是手机端访问那么改成纵向版
+      store.dispatch("settings/changeLayout", "vertical");
+    } else {
+      store.dispatch("settings/changeLayout", oldLayout.value);
+    }
+
+    store.dispatch("settings/toggleDevice", isMobile ? "mobile" : "desktop");
+  }
+}, 100);
+
+onBeforeMount(() => {
+  window.addEventListener("resize", handleResize);
+  
+  // 页面加载时检查是否有保存的路由信息
+  const savedRoute = sessionStorage.getItem('currentRoute');
+  if (savedRoute) {
+    try {
+      const routeInfo = JSON.parse(savedRoute);
+      // 这里可以添加恢复路由状态的逻辑，比如重新设置Vuex中的路由状态
+      console.log('恢复保存的路由信息:', routeInfo);
+      // 清除保存的路由信息
+      sessionStorage.removeItem('currentRoute');
+    } catch (e) {
+      console.error('解析保存的路由信息失败:', e);
+    }
+  }
+});
+
+// 页面刷新前保存当前路由信息
+const handleBeforeUnload = () => {
+  // 保存当前路由到 sessionStorage
+  sessionStorage.setItem('currentRoute', JSON.stringify({
+    path: window.location.hash.replace('#', ''),
+    fullPath: window.location.href
+  }));
+};
+
+// 监听页面可见性变化，处理页面切换
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    // 页面隐藏时保存路由信息
+    handleBeforeUnload();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('beforeunload', handleBeforeUnload);
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
+  controller.value.abort();
+  clearTimeout(timeOutID);
+});
+
+// 相当于mounted
+oldLayout.value = layout.value;
+const isMobile = handleIsMobile();
+if (isMobile) {
+  //横向布局时如果是手机端访问那么改成纵向版
+  store.dispatch("settings/changeLayout", "vertical");
+} else {
+  store.dispatch("settings/changeLayout", oldLayout.value);
+}
+store.dispatch("settings/toggleDevice", isMobile ? "mobile" : "desktop");
+if (isMobile) {
+  timeOutID = setTimeout(() => {
+    store.dispatch("settings/foldSideBar");
+  }, 2000);
+} else {
+  store.dispatch("settings/openSideBar");
+}
+
+nextTick(() => {
+  window.addEventListener(
+    "storage",
+    (e) => {
+      if (e.key === tokenName || e.key === null) window.location.reload();
+      if (e.key === tokenName && e.value === null) window.location.reload();
+    },
+    {
+      capture: false,
+      signal: controller.value?.signal,
+    }
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin fix-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $base-z-index - 2;
+  width: 100%;
+  overflow: hidden;
+}
+
+.vue-admin-better-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .layout-container-horizontal {
+    position: relative;
+
+    &.fixed {
+      padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
+    }
+
+    &.fixed.no-tabs-bar {
+      padding-top: $base-top-bar-height;
+    }
+
+    :deep() {
+      .vab-main {
+        width: 88%;
+        margin: auto;
+      }
+
+      .fixed-header {
+        @include fix-header;
+      }
+
+      .tag-view-show {
+        background: $base-color-white;
+        box-shadow: $base-box-shadow;
+      }
+
+      .nav-container {
+        .fold-unfold {
+          display: none;
+        }
+      }
+
+      .main-padding {
+        .app-main-container {
+          margin-top: $base-padding;
+          margin-bottom: $base-padding;
+          background: $base-color-white;
+        }
+      }
+    }
+  }
+
+  .layout-container-vertical {
+    position: relative;
+
+    .mask {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $base-z-index - 1;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      background: #000;
+      opacity: 0.5;
+    }
+
+    &.fixed {
+      padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
+    }
+
+    &.fixed.no-tabs-bar {
+      padding-top: $base-nav-bar-height;
+    }
+
+    .vab-main {
+      position: relative;
+      min-height: 100%;
+      margin-left: $base-left-menu-width;
+      background: #f6f8f9;
+      transition: $base-transition;
+
+      :deep() {
+        .fixed-header {
+          @include fix-header;
+
+          left: $base-left-menu-width;
+          width: $base-right-content-width;
+          box-shadow: $base-box-shadow;
+          transition: $base-transition;
+        }
+
+        .nav-container {
+          position: relative;
+          box-sizing: border-box;
+        }
+
+        .tabs-container {
+          box-sizing: border-box;
+        }
+
+        .app-main-container {
+          width: calc(100% - #{$base-padding} - #{$base-padding});
+          margin: $base-padding auto;
+          background: $base-color-white;
+          border-radius: $base-border-radius;
+        }
+      }
+
+      &.is-collapse-main {
+        margin-left: $base-left-menu-width-min;
+
+        :deep() {
+          .fixed-header {
+            left: $base-left-menu-width-min;
+            width: calc(100% - 65px);
+          }
+        }
+      }
+    }
+  }
+
+  /* 手机端开始 */
+  &.mobile {
+    :deep() {
+      .el-pager,
+      .el-pagination__jump {
+        display: none;
+      }
+
+      .layout-container-vertical {
+        .el-scrollbar.side-container.is-collapse {
+          width: 0;
+        }
+
+        .vab-main {
+          width: 100%;
+          margin-left: 0;
+        }
+      }
+
+      .vab-main {
+        .fixed-header {
+          left: 0 !important;
+          width: 100% !important;
+        }
+      }
+    }
+  }
+
+  /* 手机端结束 */
+}
+</style>

package/src/main.js

@@ -0,0 +1,40 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "@/store"; // 导入Vuex store
+import plugins from "./plugins";
+// 导入布局组件注册函数
+import { registerLayoutComponents } from "@/layouts/export";
+// 导入事件总线
+import eventBus from "@/utils/eventBus";
+// 导入配置
+import { title } from "@/config";
+
+
+// 创建应用实例
+const app = createApp(App);
+
+// 使用Vuex
+app.use(store);
+
+app.use(router);
+
+// 初始化所有插件
+plugins(app);
+
+// 注册所有布局组件
+registerLayoutComponents(app);
+
+// 添加事件总线到全局属性
+app.config.globalProperties.$eventBus = eventBus;
+
+// 添加全局标题
+app.config.globalProperties.$baseTitle = title;
+
+// 使全局属性在window上也可用
+window.$eventBus = eventBus;
+window.$baseTitle = title;
+
+
+// 挂载应用
+app.mount("#app");

package/src/plugins/echarts.js

@@ -0,0 +1,4 @@
+import 'echarts'
+import VabChart from 'vue-echarts'
+
+export default VabChart