feat: 🚀 订阅功能

2025-09-16 16:38:30 +08:00
parent eb1b66a066
commit d3a3ef2911
456 changed files with 40544 additions and 124 deletions
--- a/src/layouts/LayoutColumns/index.vue
+++ b/src/layouts/LayoutColumns/index.vue
@@ -0,0 +1,100 @@
+<!-- 分栏布局 -->
+<template>
+    <el-container class="layout">
+        <div class="aside-split">
+            <div class="logo flx-center">
+                <img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
+            </div>
+            <el-scrollbar>
+                <div class="split-list">
+                    <div
+                        v-for="item in menuList"
+                        :key="item.path"
+                        class="split-item"
+                        :class="{ 'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
+                        @click="changeSubMenu(item)"
+                    >
+                        <el-icon>
+                            <component :is="item.meta.icon"></component>
+                        </el-icon>
+                        <span class="title">{{ item.meta.title }}</span>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+        <el-aside :class="{ 'not-aside': !subMenuList.length }" :style="{ width: isCollapse ? '65px' : '210px' }">
+            <div class="logo flx-center">
+                <span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? "G" : "ops Admin" }}</span>
+            </div>
+            <el-scrollbar>
+                <el-menu
+                    :default-active="activeMenu"
+                    :router="false"
+                    :collapse="isCollapse"
+                    :collapse-transition="false"
+                    :unique-opened="true"
+                >
+                    <SubMenu :menu-list="subMenuList" />
+                </el-menu>
+            </el-scrollbar>
+        </el-aside>
+        <el-container>
+            <el-header>
+                <ToolBarLeft />
+                <ToolBarRight />
+            </el-header>
+            <Main />
+        </el-container>
+    </el-container>
+</template>
+
+<script setup lang="ts" name="layoutColumns">
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+
+const subMenuList = ref<Menu.MenuOptions[]>([]);
+const splitActive = ref("");
+watch(
+    () => [menuList, route],
+    () => {
+        // 当前菜单没有数据直接 return
+        if (!menuList.value.length) return;
+        splitActive.value = route.path;
+        const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
+            return route.path === item.path || `/${route.path.split("/")[1]}` === item.path;
+        });
+        if (menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children);
+        subMenuList.value = [];
+    },
+    {
+        deep: true,
+        immediate: true
+    }
+);
+
+// change SubMenu
+const changeSubMenu = (item: Menu.MenuOptions) => {
+    splitActive.value = item.path;
+    if (item.children?.length) return (subMenuList.value = item.children);
+    subMenuList.value = [];
+    router.push(item.path);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>