vue3-admin-gpt 1.0.0

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

@@ -0,0 +1,61 @@
+<template>
+  <span :title="isFullscreen ? '退出全屏' : '进入全屏'">
+    <!-- 直接使用图标组件，不再包裹在el-icon中 -->
+    <component
+      :is="isFullscreen ? 'FullScreen' : 'FullScreen'"
+      class="nav-icon"
+      @click="click"
+    />
+  </span>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import { FullScreen, ScaleToOriginal } from "@element-plus/icons-vue";
+
+export default {
+  name: "VabFullScreen",
+  components: {
+    FullScreen,
+    ScaleToOriginal,
+  },
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.destroy();
+  },
+  methods: {
+    click() {
+      if (!screenfull.isEnabled) {
+        this.$vab.message("开启全屏失败", "error");
+        return false;
+      }
+      screenfull.toggle();
+      this.$emit("refresh");
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen;
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on("change", this.change);
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off("change", this.change);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 采用VabNav中定义的统一样式 */
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div :class="'logo-container-' + layout">
+    <router-link to="/">
+      <!-- 这里是logo变更的位置 -->
+       <img v-if="logo" src="@/assets/logo.png" alt="logo" class="logo">
+      <span
+        :class="{ 'hidden-xs-only': layout === 'horizontal' }"
+        :title="title"
+        class="title"
+      >
+        {{ title }}
+      </span>
+    </router-link>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "VabLogo",
+  data() {
+    return {
+      title: this.$baseTitle,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      logo: "settings/logo",
+      layout: "settings/layout",
+    }),
+  },
+};
+</script>
+<style lang="scss" scoped>
+@mixin container {
+  position: relative;
+  height: $base-top-bar-height;
+  overflow: hidden;
+  line-height: $base-top-bar-height;
+  background: $base-menu-background;
+}
+
+@mixin logo {
+  display: inline-block;
+  width: 34px;
+  height: 34px;
+  margin-right: 3px;
+  color: #fff !important;
+  fill: #fff !important;
+  vertical-align: middle;
+}
+
+@mixin title {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 20px;
+  line-height: 55px;
+  color: $base-title-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.logo-container-horizontal {
+  @include container;
+
+  .logo {
+    @include logo;
+  }
+
+  .title {
+    @include title;
+  }
+}
+
+.logo-container-vertical {
+  @include container;
+
+  height: $base-logo-height;
+  line-height: $base-logo-height;
+  text-align: center;
+
+  .logo {
+    @include logo;
+    fill: #fff !important;
+  }
+
+  .title {
+    @include title;
+
+    max-width: calc(#{$base-left-menu-width} - 60px);
+  }
+}
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div class="nav-container">
+    <el-row :gutter="15">
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
+        <div class="left-panel">
+          <component
+            :is="collapse ? 'DArrowRight' : 'DArrowLeft'"
+            class="nav-icon"
+            @click="handleCollapse"
+          />
+          <vab-breadcrumb class="hidden-xs-only" />
+        </div>
+      </el-col>
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
+        <div class="right-panel">
+          <vab-full-screen @refresh="refreshRoute" />
+          <vab-theme class="hidden-xs-only" />
+          <Refresh
+            :class="{ 'is-pulsing': pulse }"
+            title="重载所有路由"
+            @click="refreshRoute"
+            class="nav-icon"
+          />
+          <vab-avatar />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+import { Refresh } from "@element-plus/icons-vue";
+
+defineOptions({
+  name: "VabNav",
+});
+
+const store = useStore();
+const pulse = ref(false);
+let timeOutID = null;
+
+const collapse = computed(() => store.getters["settings/collapse"]);
+
+const handleCollapse = () => {
+  store.dispatch("settings/changeCollapse");
+};
+
+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>
+.nav-container {
+  position: relative;
+  height: $base-nav-bar-height;
+  padding-right: $base-padding;
+  padding-left: $base-padding;
+  overflow: hidden;
+  user-select: none;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+  .left-panel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    height: $base-nav-bar-height;
+    gap: 8px; /* 折叠按钮与面包屑之间的间距 */
+  }
+
+  .right-panel {
+    position: relative;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    height: $base-nav-bar-height;
+    gap: 4px; /* 适当调整图标间距 */
+
+    .is-pulsing {
+      animation: pulse 1s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+  }
+
+  :deep() {
+    svg {
+      width: 1.2em;
+      height: 1.2em;
+      color: rgba(0, 0, 0, 0.7);
+      fill: rgba(0, 0, 0, 0.7) !important;
+      padding: 6px;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+    }
+
+    svg:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: rgba(0, 0, 0, 0.9);
+      fill: rgba(0, 0, 0, 0.9) !important;
+      transform: scale(1.05);
+    }
+
+    button {
+      svg {
+        margin-right: 0;
+        color: rgba(255, 255, 255, 0.9);
+        background: rgba(0, 122, 255, 0.8);
+        border-color: rgba(0, 122, 255, 0.9);
+        cursor: pointer;
+        fill: rgba(255, 255, 255, 0.9);
+
+        &:hover {
+          background: rgba(0, 122, 255, 0.9);
+          border-color: rgba(0, 122, 255, 1);
+        }
+      }
+    }
+
+    .el-badge {
+      margin-right: 0;
+
+      .el-button {
+        background: rgba(255, 255, 255, 0.6);
+        border: 1px solid rgba(255, 255, 255, 0.8);
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.8);
+          border-color: rgba(255, 255, 255, 1);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
+            0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .nav-container {
+    padding: 0 12px;
+  }
+}
+</style>

package/src/layouts/components/VabSide/components/VabMenuItem.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-menu-item :index="handlePath(routeChildren.path)" @click="handleLink">
+    <el-icon
+      v-if="routeChildren.meta && routeChildren.meta.icon"
+      class="vab-fas-icon"
+    >
+      <component :is="getIconComponent(routeChildren.meta.icon)" />
+    </el-icon>
+    <span>{{ routeChildren.meta.title }}</span>
+  </el-menu-item>
+</template>
+
+<script setup>
+import { isExternal } from "@/utils/validate";
+import path from "path";
+import { faToElIcon } from "@/utils/vab";
+import { useRouter, useRoute } from "vue-router";
+
+defineOptions({
+  name: "VabMenuItem",
+});
+
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  routeChildren: {
+    type: Object,
+    default: () => null,
+  },
+  item: {
+    type: Object,
+    default: () => null,
+  },
+  fullPath: {
+    type: String,
+    default: "",
+  },
+});
+
+const handlePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.fullPath)) {
+    return props.fullPath;
+  }
+  return path.resolve(props.fullPath, routePath);
+};
+
+const handleLink = () => {
+  const routePath = props.routeChildren.path;
+  const target = props.routeChildren.meta.target;
+
+  if (target === "_blank") {
+    if (isExternal(routePath)) {
+      window.open(routePath);
+    } else if (isExternal(props.fullPath)) {
+      window.open(props.fullPath);
+    } else if (route.path !== path.resolve(props.fullPath, routePath)) {
+      let routeData = router.resolve(path.resolve(props.fullPath, routePath));
+      window.open(routeData.href);
+    }
+  } else {
+    if (isExternal(routePath)) {
+      window.location.href = routePath;
+    } else if (isExternal(props.fullPath)) {
+      window.location.href = props.fullPath;
+    } else if (route.path !== path.resolve(props.fullPath, routePath)) {
+      router.push(path.resolve(props.fullPath, routePath));
+    }
+  }
+};
+
+// 将路由中的icon名称转换为Element Plus图标组件
+const getIconComponent = (iconName) => {
+  // 直接使用导入的faToElIcon函数
+  return faToElIcon(iconName);
+};
+</script>

package/src/layouts/components/VabSide/components/VabSideItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <component
+    :is="menuComponent"
+    v-if="!item.hidden"
+    :full-path="fullPath"
+    :item="item"
+    :route-children="routeChildren"
+  >
+    <template v-if="item.children && item.children.length">
+      <vab-side-item
+        v-for="route in item.children"
+        :key="route.path"
+        :full-path="handlePath(route.path)"
+        :item="route"
+      />
+    </template>
+  </component>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { isExternal } from "@/utils/validate";
+import path from "path";
+
+defineOptions({
+  name: "VabSideItem",
+});
+
+// Props 定义
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  fullPath: {
+    type: String,
+    default: "",
+  },
+});
+
+// 数据
+const routeChildren = ref(null);
+let onlyOneChild = null;
+
+// 方法
+const handleChildren = (children = [], parent) => {
+  if (children === null) children = [];
+  const showChildren = children.filter((item) => {
+    if (item.hidden) {
+      return false;
+    } else {
+      routeChildren.value = item;
+      return true;
+    }
+  });
+
+  if (showChildren.length === 1) {
+    return true;
+  }
+
+  if (showChildren.length === 0) {
+    routeChildren.value = {
+      ...parent,
+      path: "",
+      notShowChildren: true,
+    };
+    return true;
+  }
+  return false;
+};
+
+const handlePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.fullPath)) {
+    return props.fullPath;
+  }
+  return path.resolve(props.fullPath, routePath);
+};
+
+// 计算属性
+const menuComponent = computed(() => {
+  if (
+    handleChildren(props.item.children, props.item) &&
+    (!routeChildren.value.children || routeChildren.value.notShowChildren) &&
+    !props.item.alwaysShow
+  ) {
+    return "VabMenuItem";
+  } else {
+    return "VabSubmenu";
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.vab-nav-icon {
+  margin-right: 4px;
+}
+</style>

package/src/layouts/components/VabSide/components/VabSubmenu.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-sub-menu
+    ref="subMenu"
+    :index="handlePath(item.path)"
+    :popper-append-to-body="false"
+  >
+    <template #title>
+      <el-icon v-if="item.meta && item.meta.icon" class="vab-fas-icon">
+        <component :is="getIconComponent(item.meta.icon)" />
+      </el-icon>
+      <span>{{ item.meta.title }}</span>
+    </template>
+    <slot />
+  </el-sub-menu>
+</template>
+
+<script setup>
+import { isExternal } from "@/utils/validate";
+import path from "path";
+import { faToElIcon } from "@/utils/vab";
+
+defineOptions({
+  name: "VabSubmenu",
+});
+
+const props = defineProps({
+  routeChildren: {
+    type: Object,
+    default: () => null,
+  },
+  item: {
+    type: Object,
+    default: () => null,
+  },
+  fullPath: {
+    type: String,
+    default: "",
+  },
+});
+
+const handlePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.fullPath)) {
+    return props.fullPath;
+  }
+  return path.resolve(props.fullPath, routePath);
+};
+
+// 将路由中的icon名称转换为Element Plus图标组件
+const getIconComponent = (iconName) => {
+  // 直接使用导入的faToElIcon函数
+  return faToElIcon(iconName);
+};
+</script>

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

@@ -0,0 +1,123 @@
+<template>
+  <el-scrollbar :class="{ 'is-collapse': collapse }" class="side-container">
+    <vab-logo />
+    <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)"
+      mode="vertical"
+    >
+      <template v-for="route in routes">
+        <vab-side-item :full-path="route.path" :item="route" />
+      </template>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import variables from "@/styles/variables.scss";
+import { computed } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+import { defaultOopeneds } from "@/config";
+
+defineOptions({
+  name: "VabSide",
+});
+
+const store = useStore();
+const route = useRoute();
+
+const collapse = computed(() => store.getters["settings/collapse"]);
+const routes = computed(() => store.getters["routes/routes"]);
+
+const defaultOpens = computed(() => {
+  // 使用配置文件中的defaultOopeneds
+  return defaultOopeneds;
+});
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin active {
+  &:hover {
+    color: $base-color-white;
+    background-color: $base-menu-background-active !important;
+  }
+
+  &.is-active {
+    color: $base-color-white;
+    background-color: $base-menu-background-active !important;
+  }
+}
+
+.side-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $base-z-index;
+  width: $base-left-menu-width;
+  height: 100vh;
+  overflow: hidden;
+  background: $base-menu-background;
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  transition: width $base-transition-time;
+
+  &.is-collapse {
+    width: $base-left-menu-width-min;
+    border-right: 0;
+
+    :deep() {
+      .el-menu {
+        transition: width $base-transition-time;
+      }
+
+      .el-menu--collapse {
+        border-right: 0;
+
+        .el-submenu__icon-arrow {
+          right: 10px;
+          margin-top: -3px;
+        }
+
+        .el-menu-item,
+        .el-submenu {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  :deep() {
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+
+    .el-menu {
+      border: 0;
+    }
+
+    .el-menu-item,
+    .el-submenu__title {
+      height: $base-menu-item-height;
+      line-height: $base-menu-item-height;
+    }
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+}
+</style>