feat: 🚀 订阅功能

src/layouts/components/Header/ToolBarLeft.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="tool-bar-lf">
+        <!-- <CollapseIcon id="collapseIcon" /> -->
+        <Breadcrumb v-if="globalStore.breadcrumb" id="breadcrumb" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+// import CollapseIcon from "./components/CollapseIcon.vue";
+import Breadcrumb from "./components/Breadcrumb.vue";
+const globalStore = useGlobalStore();
+</script>
+
+<style scoped lang="scss">
+.tool-bar-lf {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    white-space: nowrap;
+}
+</style>

src/layouts/components/Header/ToolBarRight.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="tool-bar-ri">
+        <div class="header-icon">
+            <SearchMenu id="searchMenu" />
+            <Fullscreen id="fullscreen" />
+        </div>
+
+        <Avatar />
+    </div>
+</template>
+
+<script setup lang="ts">
+import SearchMenu from "./components/SearchMenu.vue";
+import Fullscreen from "./components/Fullscreen.vue";
+import Avatar from "./components/Avatar.vue";
+</script>
+
+<style scoped lang="scss">
+.tool-bar-ri {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .header-icon {
+        display: flex;
+        & > * {
+            margin-right: 10px;
+        }
+    }
+}
+</style>

src/layouts/components/Header/components/Avatar.vue

@@ -0,0 +1,88 @@
+<template>
+    <!-- 公司名 -->
+    <div class="name-box font12" style="padding-top: 2px">
+        <span style="margin-right: 10px; margin-left: 10px">
+            {{ userStore.userInfo.corp.corp_name ? userStore.userInfo.corp.corp_name : "" }}
+        </span>
+    </div>
+
+    <!-- 用户名 -->
+    <div class="name-box font12">
+        <el-dropdown trigger="click" class="triangle-box">
+            <div>
+                {{ userStore.userInfo.nickname }}
+                <el-icon class="triangle">
+                    <i-ep-arrow-down />
+                </el-icon>
+            </div>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="logout">
+                        <el-icon> <i-ep-switch-button /> </el-icon>重新登录
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { logoutApi } from "@/api/modules/login";
+// import { useMsg } from "@/hooks/useMsg";
+import { useUserStore } from "@/stores/modules/user";
+import { ElMessageBox } from "element-plus";
+import { usePathUrl } from "@/hooks/usePathUrl";
+const userStore: any = useUserStore();
+
+// 退出登录
+const logout = () => {
+    ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+    }).then(async () => {
+        //1.退出登录
+        const result: any = await logoutApi();
+        if (result?.code === 0) {
+            location.href = usePathUrl();
+            setTimeout(() => {
+                userStore.$reset();
+                //清除本地
+                localStorage.clear();
+            }, 300);
+        }
+    });
+};
+</script>
+
+<style scoped lang="scss">
+.name-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    color: #303133;
+    cursor: pointer;
+    ::v-deep(.el-dropdown) {
+        color: #303133;
+    }
+}
+.name-box::before {
+    position: absolute;
+    top: 50%;
+    display: block;
+    height: 20px;
+    content: "";
+    border-left: 1px solid #e4e7ed;
+    transform: translateY(-50%);
+}
+.triangle-box {
+    margin: 0 10px;
+}
+.triangle {
+    margin-left: 3px;
+    transition: transform 0.3s ease; /* 添加动画过渡效果 */
+}
+.triangle-box:hover .triangle {
+    transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
+}
+</style>

src/layouts/components/Header/components/Breadcrumb.vue

@@ -0,0 +1,91 @@
+<template>
+    <div :class="['breadcrumb-box', !globalStore.breadcrumbIcon && 'no-icon']">
+        <el-breadcrumb :separator-icon="ArrowRight">
+            <transition-group name="breadcrumb">
+                <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+                    <div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
+                        <!-- <el-icon v-show="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
+                            <component :is="item.meta.icon"></component>
+                        </el-icon> -->
+
+                        <span class="breadcrumb-title">{{ item.meta.title }}</span>
+                    </div>
+                </el-breadcrumb-item>
+            </transition-group>
+        </el-breadcrumb>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { HOME_URL } from "@/config";
+import { useRoute, useRouter } from "vue-router";
+import { ArrowRight } from "@element-plus/icons-vue";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+
+const breadcrumbList = computed(() => {
+    let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
+    // 🙅‍♀️不需要首页面包屑可删除以下判断
+    if (breadcrumbData[0].path !== HOME_URL) {
+        breadcrumbData = [{ path: HOME_URL, meta: { icon: "HomeFilled", title: "首页" } }, ...breadcrumbData];
+    }
+    return breadcrumbData;
+});
+
+// Click Breadcrumb
+const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
+    if (index === 0) {
+        router.push(item.path);
+    }
+    // if (index !== breadcrumbList.value.length - 1) router.push(item.path);
+};
+</script>
+
+<style scoped lang="scss">
+.breadcrumb-box {
+    display: flex;
+    align-items: center;
+    padding-right: 50px;
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+    .el-breadcrumb {
+        white-space: nowrap;
+        .el-breadcrumb__item {
+            position: relative;
+            display: inline-block;
+            float: none;
+            .el-breadcrumb__inner {
+                display: inline-flex;
+                .breadcrumb-icon {
+                    margin-top: 2px;
+                    margin-right: 6px;
+                    font-size: 16px;
+                }
+                .breadcrumb-title {
+                    margin-top: 3px;
+                }
+            }
+            :deep(.el-breadcrumb__separator) {
+                position: relative;
+                top: 2px;
+            }
+        }
+    }
+}
+.no-icon {
+    .el-breadcrumb {
+        .el-breadcrumb__item {
+            top: -2px;
+            :deep(.el-breadcrumb__separator) {
+                top: 2px;
+            }
+        }
+    }
+}
+</style>

src/layouts/components/Header/components/CollapseIcon.vue

@@ -0,0 +1,22 @@
+<template>
+    <el-icon class="collapse-icon" @click="changeCollapse">
+        <i-ep-expand v-if="globalStore.isCollapse" />
+        <i-ep-fold v-else />
+    </el-icon>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+
+const globalStore = useGlobalStore();
+const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
+</script>
+
+<style scoped lang="scss">
+.collapse-icon {
+    margin-top: 3px;
+    margin-right: 20px;
+    font-size: 19px;
+    cursor: pointer;
+}
+</style>

src/layouts/components/Header/components/Fullscreen.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="fullscreen">
+        <i :class="['icon iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="toggle"></i>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useFullscreen } from "@vueuse/core";
+const { toggle, isFullscreen } = useFullscreen();
+</script>

src/layouts/components/Header/components/SearchMenu.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="menu-search-dialog">
+        <i :class="'icon iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"></i>
+        <el-dialog v-model="isShowSearch" destroy-on-close :modal="false" :show-close="false" fullscreen @click="closeSearch">
+            <el-autocomplete
+                ref="menuInputRef"
+                v-model="searchMenu"
+                value-key="path"
+                placeholder="菜单搜索 ：支持菜单名称、路径"
+                :fetch-suggestions="searchMenuList"
+                @select="handleClickMenu"
+                @click.stop
+            >
+                <template #prefix>
+                    <el-icon>
+                        <i-ep-search />
+                    </el-icon>
+                </template>
+                <template #default="{ item }">
+                    <el-icon>
+                        <component :is="item.meta.icon"></component>
+                    </el-icon>
+                    <span> {{ item.meta.title }} </span>
+                </template>
+            </el-autocomplete>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+
+const router = useRouter();
+const authStore = useAuthStore();
+const menuList = computed(() => authStore.flatMenuListGet.filter(item => item.hidden));
+
+const searchMenuList = (queryString: string, cb: Function) => {
+    const results = queryString ? menuList.value.filter(filterNodeMethod(queryString)) : menuList.value;
+    cb(results);
+};
+
+// 打开搜索框
+const isShowSearch = ref(false);
+const menuInputRef = ref();
+const searchMenu = ref("");
+const handleOpen = () => {
+    isShowSearch.value = true;
+    nextTick(() => {
+        setTimeout(() => {
+            menuInputRef.value.focus();
+        });
+    });
+};
+
+// 搜索窗关闭
+const closeSearch = () => {
+    isShowSearch.value = false;
+};
+
+// 筛选菜单
+const filterNodeMethod = (queryString: string) => {
+    return (restaurant: Menu.MenuOptions) => {
+        return (
+            restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+            restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
+        );
+    };
+};
+
+// 点击菜单跳转
+const handleClickMenu = (menuItem: Menu.MenuOptions | Record<string, any>) => {
+    searchMenu.value = "";
+    if (menuItem.meta.isLink) window.open(menuItem.meta.isLink, "_blank");
+    else router.push(menuItem.path);
+    closeSearch();
+};
+</script>
+
+<style scoped lang="scss">
+.menu-search-dialog {
+    display: flex;
+    align-items: center;
+    :deep(.el-dialog) {
+        background-color: rgb(0 0 0 / 50%);
+        border-radius: 0 !important;
+        box-shadow: unset !important;
+        .el-dialog__header {
+            border-bottom: none !important;
+        }
+    }
+    :deep(.el-autocomplete) {
+        position: absolute;
+        top: 100px;
+        left: 50%;
+        width: 550px;
+        transform: translateX(-50%);
+        .el-input__wrapper {
+            background-color: var(--el-bg-color);
+        }
+    }
+}
+.el-autocomplete__popper {
+    .el-icon {
+        position: relative;
+        top: 2px;
+        font-size: 16px;
+    }
+    span {
+        margin: 0 0 0 10px;
+        font-size: 14px;
+    }
+}
+</style>

src/layouts/components/Main/components/Maximize.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="maximize" @click="exitMaximize">
+        <el-icon><Close /></el-icon>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+
+import { Close } from "@element-plus/icons-vue";
+const globalStore = useGlobalStore();
+const exitMaximize = () => {
+    globalStore.setGlobalState("maximize", false);
+};
+</script>
+
+<style scoped lang="scss">
+.maximize {
+    position: fixed;
+    top: -25px;
+    right: -25px;
+    z-index: 999;
+    width: 52px;
+    height: 52px;
+    cursor: pointer;
+    background-color: var(--el-color-info);
+    border-radius: 50%;
+    opacity: 0.7;
+    &:hover {
+        background-color: var(--el-color-info-dark-2);
+    }
+    .el-icon {
+        position: relative;
+        top: 68%;
+        left: 32%;
+        font-size: 16px;
+        color: #ffffff;
+        transform: translate(-50%, -50%);
+    }
+}
+</style>

src/layouts/components/Main/index.scss

@@ -0,0 +1,10 @@
+.el-main {
+    box-sizing: border-box;
+    padding: 16px;
+    overflow-x: hidden;
+    background-color: var(--el-bg-color-page);
+}
+.el-footer {
+    height: auto;
+    padding: 0;
+}

src/layouts/components/Main/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <Maximize v-if="maximize" />
+    <Tabs v-if="tabs" />
+    <el-main>
+        <router-view v-slot="{ Component, route }">
+            <transition appear name="fade-transform" mode="out-in">
+                <keep-alive :include="keepAliveName">
+                    <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
+                </keep-alive>
+            </transition>
+        </router-view>
+    </el-main>
+</template>
+
+<script setup lang="ts">
+//onBeforeUnmount
+import { ref, provide, watch } from "vue";
+import { storeToRefs } from "pinia";
+// import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "@/stores/modules/global";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import Maximize from "./components/Maximize.vue";
+import Tabs from "@/layouts/components/Tabs/index.vue";
+
+const globalStore = useGlobalStore();
+//isCollapse
+const { maximize, layout, tabs } = storeToRefs(globalStore);
+
+const keepAliveStore = useKeepAliveStore();
+const { keepAliveName } = storeToRefs(keepAliveStore);
+// 注入刷新页面方法
+const isRouterShow = ref(true);
+const refreshCurrentPage = (val: boolean) => {
+    isRouterShow.value = val;
+};
+
+provide("refresh", refreshCurrentPage);
+
+// 监听当前页面是否最大化，动态添加 class
+watch(
+    () => maximize.value,
+    () => {
+        const app = document.getElementById("app") as HTMLElement;
+        if (maximize.value) app.classList.add("main-maximize");
+        else app.classList.remove("main-maximize");
+    },
+    { immediate: true }
+);
+
+// 监听布局变化，在 body 上添加相对应的 layout class
+watch(
+    () => layout.value,
+    () => {
+        const body = document.body as HTMLElement;
+        body.setAttribute("class", layout.value);
+    },
+    { immediate: true }
+);
+
+// 监听窗口大小变化，折叠侧边栏
+// const screenWidth = ref(0);
+// const listeningWindow = useDebounceFn(() => {
+//     screenWidth.value = document.body.clientWidth;
+//     if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
+//     if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
+// }, 100);
+// window.addEventListener("resize", listeningWindow, false);
+// onBeforeUnmount(() => {
+//     window.removeEventListener("resize", listeningWindow);
+// });
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

src/layouts/components/Menu/SubMenu.vue

@@ -0,0 +1,51 @@
+<template>
+    <div @mouseleave="handleHideSubMenus">
+        <el-scrollbar>
+            <lv1 :menuList="menuList" @change="handleShowSubMenus" />
+        </el-scrollbar>
+        <el-scrollbar class="sub-menu" v-if="displaySubMenus">
+            <lv2 :menus="activedMenu" />
+        </el-scrollbar>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import lv1 from "./components/lv1.vue";
+import lv2 from "./components/lv2.vue";
+import { useRoute } from "vue-router";
+
+defineProps<{ menuList: Menu.MenuOptions[] }>();
+
+const $route = useRoute();
+
+const activedMenu = ref<any>({});
+const displaySubMenus = ref(false);
+const handleShowSubMenus = (menu: any) => {
+    activedMenu.value = menu;
+    displaySubMenus.value = true;
+};
+const handleHideSubMenus = () => {
+    activedMenu.value = {};
+    displaySubMenus.value = false;
+};
+watch(
+    () => $route,
+    () => {
+        displaySubMenus.value = false;
+    }
+);
+</script>
+<style lang="scss" scoped>
+.sub-menu {
+    position: fixed;
+    top: 0;
+    left: 65px;
+    z-index: 100;
+    box-sizing: border-box;
+    width: 210px;
+    height: 100%;
+    background-color: #ffffff;
+    border-radius: 0 24px 24px 0;
+    box-shadow: 24px 0 26px -23px rgb(223 228 237 / 60%);
+}
+</style>

src/layouts/components/Menu/components/lv1.vue

@@ -0,0 +1,70 @@
+<template>
+    <ul class="menu">
+        <template v-for="(menu, idx) in menuList">
+            <li
+                :key="idx"
+                :class="['menu-item ', actived === menu.name ? 'actived' : '']"
+                v-if="menu.hidden"
+                @mouseover="mouseover(menu)"
+            >
+                <div>
+                    <i v-if="menu.meta.icon" :class="['iconfont', menu.meta.icon]"></i>
+                    <span class="menu-title">{{ menu.meta.title }}</span>
+                </div>
+            </li>
+        </template>
+    </ul>
+</template>
+
+<script setup lang="ts" name="lv1">
+// import { useRouter } from "vue-router";
+// const $router = useRouter();
+
+defineProps<{ menuList: Menu.MenuOptions[] }>();
+
+const emits = defineEmits<{
+    (e: "change", item: any): void;
+}>();
+let actived = ref<any>("");
+const mouseover = (menu: any) => {
+    actived.value = menu.name;
+    emits("change", menu);
+};
+</script>
+
+<style lang="scss">
+.menu {
+    width: 65px;
+    padding: 10px 0 0;
+    margin: 0;
+    overflow-x: hidden;
+    list-style: none;
+}
+.menu .menu-item {
+    padding: 8px 0;
+    font-size: 26px;
+    color: #797979;
+    text-align: center;
+    cursor: pointer;
+}
+.menu .menu-item.actived {
+    position: relative;
+    color: #4178d5;
+}
+.menu .menu-item.actived::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    height: 100%;
+    content: "";
+    border-right: 4px solid #4178d5;
+}
+.menu i.iconfont {
+    font-size: 22px;
+}
+.menu .menu-title {
+    display: block;
+    font-size: 14px;
+}
+</style>

src/layouts/components/Menu/components/lv2.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="wrap">
+        <!-- <div>{{ JSON.stringify(menus) }}</div> -->
+        <h4 class="wrap-tag">{{ menus.meta.title }}</h4>
+        <div class="menu-wrap" v-for="(menu, idx) in menus.children" :key="idx">
+            <p class="title">{{ menu.meta.title }}</p>
+            <ul class="menu1" style="margin: 0 !important">
+                <li v-for="(item, key) in menu.children" :key="key">
+                    <a
+                        href="javascript:void(0);"
+                        :class="{ actived: item.path == path }"
+                        @click="handleOpenPage(item)"
+                        v-if="item.hidden"
+                        >{{ item.meta.title }}</a
+                    >
+                    <a
+                        target="_blank"
+                        :class="{ actived: item.path == path }"
+                        :href="item.path"
+                        v-else-if="(item.hidden && item.path.indexOf('https://') !== -1) || item.path.indexOf('http://') !== -1"
+                        >{{ item.meta.title }}</a
+                    >
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="lv2">
+import { useRoute, useRouter } from "vue-router";
+const $router = useRouter();
+const $route = useRoute();
+const path: any = ref("/index");
+
+defineProps<{ menus: any }>();
+
+watch(
+    () => $route,
+    (to: any) => {
+        path.value = to.path;
+    }
+);
+
+const handleOpenPage = (item: any) => {
+    $router.push({
+        path: item.path
+    });
+};
+</script>
+<style lang="scss" scoped>
+.wrap {
+    padding: 24px;
+}
+.wrap-tag {
+    font-size: 18px;
+    color: #303133;
+}
+.menu-wrap {
+    margin: 24px 0;
+}
+.menu-wrap .title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+}
+.menu-wrap .menu1 {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    border-left: 1px solid #dcdfe6;
+}
+.menu-wrap .menu1 li {
+    margin-bottom: 10px;
+}
+.menu-wrap .menu1 li:not(:last-child) {
+    margin-bottom: 10px;
+}
+.menu-wrap .menu1 li a {
+    display: block;
+    min-width: 140px;
+    padding-left: 24px;
+    margin-left: -1px;
+    font-size: 14px;
+    color: #303133;
+    text-decoration: none;
+}
+.menu-wrap.menu1 li a::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 1px;
+    height: 8px;
+    margin-top: -4px;
+    content: "";
+    background-color: #dcdfe6;
+}
+.menu-wrap .menu1 li a.actived,
+.menu-wrap .menu1 li a:hover {
+    color: #4178d5;
+    border-left: 2px solid #4178d5;
+}
+</style>

src/layouts/components/Tabs/components/MoreButton.vue

@@ -0,0 +1,104 @@
+<template>
+    <el-dropdown trigger="click" :teleported="false">
+        <el-button size="small" type="primary">
+            更多
+            <el-icon class="el-icon--right"> <i-ep-arrow-down /> </el-icon>
+        </el-button>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item @click="refresh">
+                    <el-icon> <i-ep-refresh /> </el-icon>数据同步
+                </el-dropdown-item>
+                <el-dropdown-item @click="maximize">
+                    <el-icon><i-ep-full-screen /></el-icon>最大化
+                </el-dropdown-item>
+                <el-dropdown-item divided @click="closeCurrentTab">
+                    <el-icon><i-ep-remove /> </el-icon>关闭当前
+                </el-dropdown-item>
+                <el-dropdown-item @click="closeOtherTab">
+                    <el-icon><i-ep-circle-close /></el-icon>关闭其他
+                </el-dropdown-item>
+                <el-dropdown-item @click="closeAllTab">
+                    <el-icon><i-ep-folder-delete /></el-icon>关闭所有
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script setup lang="ts">
+//全局状态
+import { inject, nextTick } from "vue";
+import { HOME_URL } from "@/config";
+import { useTabsStore } from "@/stores/modules/tabs";
+import { useGlobalStore } from "@/stores/modules/global";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import { useRoute, useRouter } from "vue-router";
+// import { initCache } from "./init/init";
+
+// import { useMsg } from "@/hooks/useMsg";
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const globalStore = useGlobalStore();
+const keepAliveStore = useKeepAliveStore();
+
+// refresh current page
+const refreshCurrentPage: Function = inject("refresh") as Function;
+
+const refresh = async () => {
+    // initCache(data);
+    setTimeout(() => {
+        keepAliveStore.removeKeepAliveName(route.name as string);
+        refreshCurrentPage(false);
+        nextTick(() => {
+            keepAliveStore.addKeepAliveName(route.name as string);
+            refreshCurrentPage(true);
+        });
+    }, 300);
+    // if (result.status === 200) {
+    //     const { data } = result;
+    //     useMsg("success", "数据同步成功 ！");
+    //     initCache(data);
+    //     setTimeout(() => {
+    //         keepAliveStore.removeKeepAliveName(route.name as string);
+    //         refreshCurrentPage(false);
+    //         nextTick(() => {
+    //             keepAliveStore.addKeepAliveName(route.name as string);
+    //             refreshCurrentPage(true);
+    //         });
+    //     }, 300);
+    // } else {
+    //     useMsg("error", "数据同步失败 ！");
+    // }
+};
+
+// maximize current page
+const maximize = () => {
+    globalStore.setGlobalState("maximize", true);
+};
+
+// Close Current
+const closeCurrentTab = () => {
+    if (route.meta.isAffix) return;
+    tabStore.removeTabs(route.fullPath);
+    keepAliveStore.removeKeepAliveName(route.name as string);
+};
+
+// Close Other
+const closeOtherTab = () => {
+    tabStore.closeMultipleTab(route.fullPath);
+    keepAliveStore.setKeepAliveName([route.name] as string[]);
+};
+
+// Close All
+const closeAllTab = () => {
+    tabStore.closeMultipleTab();
+    keepAliveStore.setKeepAliveName();
+    router.push(HOME_URL);
+};
+</script>
+
+<style scoped lang="scss">
+@import "../index.scss";
+</style>

src/layouts/components/Tabs/components/init/init.ts

@@ -0,0 +1,7 @@
+import { useStatusStore } from "@/stores/modules/status";
+const statusStore = useStatusStore();
+export const initCache = async (data: any) => {
+    await statusStore.$reset();
+    //设置全局状态
+    statusStore.setGlobalStatus(data);
+};

src/layouts/components/Tabs/index.scss

@@ -0,0 +1,53 @@
+.tabs-box {
+    background-color: var(--el-bg-color);
+    .tabs-menu {
+        position: relative;
+        width: 100%;
+        .el-dropdown {
+            position: absolute;
+            top: 8px;
+            right: 13px;
+        }
+        :deep(.el-tabs) {
+            .el-tabs__header {
+                box-sizing: border-box;
+                height: 40px;
+                padding: 0 10px;
+                margin: 0;
+                .el-tabs__nav-wrap {
+                    position: absolute;
+                    width: calc(100% - 110px);
+                    .el-tabs__nav {
+                        display: flex;
+                        border: none;
+                        .el-tabs__item {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            color: #afafaf;
+                            border: none;
+                            .tabs-icon {
+                                margin: 1.5px 4px 0 0;
+                                font-size: 15px;
+                            }
+                            .is-icon-close {
+                                margin-top: 1px;
+                            }
+                            &.is-active {
+                                color: var(--el-color-primary);
+                                &::before {
+                                    position: absolute;
+                                    bottom: 0;
+                                    width: 100%;
+                                    height: 0;
+                                    content: "";
+                                    border-bottom: 2px solid var(--el-color-primary) !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/layouts/components/Tabs/index.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="tabs-box">
+        <div class="tabs-menu">
+            <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
+                <el-tab-pane
+                    v-for="item in tabsMenuList"
+                    :key="item.path"
+                    :label="item.title"
+                    :name="item.path"
+                    :closable="item.close"
+                >
+                    <template #label>
+                        <!-- <el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
+              <component :is="item.icon"></component>
+            </el-icon> -->
+                        {{ item.title }}
+                    </template>
+                </el-tab-pane>
+            </el-tabs>
+            <MoreButton />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+// import { useGlobalStore } from "@/stores/modules/global";
+import { useTabsStore } from "@/stores/modules/tabs";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useKeepAliveStore } from "@/stores/modules/keepAlive";
+import { TabsPaneContext, TabPaneName } from "element-plus";
+import MoreButton from "./components/MoreButton.vue";
+
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTabsStore();
+const authStore = useAuthStore();
+// const globalStore = useGlobalStore();
+const keepAliveStore = useKeepAliveStore();
+
+const tabsMenuValue = ref(route.fullPath);
+
+const tabsMenuList = computed(() => tabStore.tabsMenuList);
+
+onMounted(() => {
+    tabsDrop();
+    initTabs();
+});
+
+// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
+watch(
+    () => route.fullPath,
+    () => {
+        if (route.meta.isFull) return;
+        tabsMenuValue.value = route.fullPath;
+        let title: any = route.query.title ? route.query.title : route.meta.title;
+        const tabsParams = {
+            icon: route.meta.icon as string,
+            title: title,
+            path: route.fullPath,
+            name: route.name as string,
+            close: !route.meta.isAffix
+        };
+        tabStore.addTabs(tabsParams);
+        route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.name as string);
+    },
+    { immediate: true }
+);
+
+// tabs 拖拽排序
+const tabsDrop = () => {
+    Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
+        draggable: ".el-tabs__item",
+        animation: 300,
+        onEnd({ newIndex, oldIndex }) {
+            const tabsList = [...tabStore.tabsMenuList];
+            const currRow = tabsList.splice(oldIndex as number, 1)[0];
+            tabsList.splice(newIndex as number, 0, currRow);
+            tabStore.setTabs(tabsList);
+        }
+    });
+};
+
+// 初始化需要固定的 tabs
+const initTabs = () => {
+    authStore.flatMenuListGet.forEach(item => {
+        if (item.meta.isAffix && !item.hidden && !item.meta.isFull) {
+            const tabsParams = {
+                icon: item.meta.icon,
+                title: item.meta.title,
+                path: item.path,
+                name: item.name,
+                close: !item.meta.isAffix
+            };
+            tabStore.addTabs(tabsParams);
+        }
+    });
+};
+
+// Tab Click
+const tabClick = (tabItem: TabsPaneContext) => {
+    const fullPath = tabItem.props.name as string;
+    router.push(fullPath);
+};
+
+// Remove Tab
+const tabRemove = (fullPath: TabPaneName) => {
+    if (fullPath === "/index") {
+        return;
+    }
+    // const name = tabStore.tabsMenuList.filter(item => item.path == fullPath)[0].name || "";
+    // keepAliveStore.removeKeepAliveName(name);
+    // tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
+    const name = tabStore.tabsMenuList.filter(item => item.path == fullPath)[0].name || "";
+    tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
+    let isKeepAlive = tabStore.tabsMenuList.some((item: any) => {
+        return item.name === name;
+    });
+    if (isKeepAlive) {
+        return;
+    } else {
+        keepAliveStore.removeKeepAliveName(name);
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>