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>