feat: initial commit

2026-05-07 18:39:00 +08:00
commit cdee21ee8e
653 changed files with 63946 additions and 0 deletions
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useGlobal } from "@pureadmin/utils";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { h, computed, Transition, defineComponent } from "vue";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+const props = defineProps({
+  fixedHeader: Boolean
+});
+
+const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+
+const keepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
+
+const transitions = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
+
+const hideTabs = computed(() => {
+  return $storage?.configure.hideTabs;
+});
+
+const layout = computed(() => {
+  return $storage?.layout.layout === "vertical";
+});
+
+const getSectionStyle = computed(() => {
+  return [
+    hideTabs.value && layout ? "padding-top: 48px;" : "",
+    !hideTabs.value && layout ? "padding-top: 85px;" : "",
+    hideTabs.value && !layout.value ? "padding-top: 48px" : "",
+    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+    props.fixedHeader ? "" : "padding-top: 0;"
+  ];
+});
+
+const transitionMain = defineComponent({
+  render() {
+    return h(
+      Transition,
+      {
+        name:
+          transitions.value(this.route) &&
+          this.route.meta.transition.enterTransition
+            ? "pure-classes-transition"
+            : (transitions.value(this.route) &&
+                this.route.meta.transition.name) ||
+              "fade-transform",
+        enterActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.enterTransition}`,
+        leaveActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.leaveTransition}`,
+        mode: "out-in",
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  },
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  }
+});
+</script>
+
+<template>
+  <section
+    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    :style="getSectionStyle"
+  >
+    <router-view>
+      <template #default="{ Component, route }">
+        <el-scrollbar v-if="props.fixedHeader">
+          <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
+            <backTop />
+          </el-backtop>
+          <transitionMain :route="route">
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
+            </keep-alive>
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
+          </transitionMain>
+        </el-scrollbar>
+        <div v-else>
+          <transitionMain :route="route">
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
+            </keep-alive>
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
+          </transitionMain>
+        </div>
+      </template>
+    </router-view>
+  </section>
+</template>
+
+<style scoped>
+.app-main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app-main-nofixed-header {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.main-content {
+  margin: 24px;
+}
+</style>
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import Search from "./search/index.vue";
+import Notice from "./notice/index.vue";
+import mixNav from "./sidebar/mixNav.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import Breadcrumb from "./sidebar/breadCrumb.vue";
+import topCollapse from "./sidebar/topCollapse.vue";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+
+const {
+  layout,
+  device,
+  logout,
+  userProfile,
+  onPanel,
+  pureApp,
+  username,
+  userAvatar,
+  avatarsStyle,
+  toggleSideBar
+} = useNav();
+</script>
+
+<template>
+  <div
+    class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
+  >
+    <topCollapse
+      v-if="device === 'mobile'"
+      class="hamburger-container"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+
+    <Breadcrumb
+      v-if="layout !== 'mix' && device !== 'mobile'"
+      class="breadcrumb-container"
+    />
+
+    <mixNav v-if="layout === 'mix'" />
+
+    <div v-if="layout === 'vertical'" class="vertical-header-right">
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <Notice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover select-none">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="userProfile">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              个人中心
+            </el-dropdown-item>
+          </el-dropdown-menu>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              退出系统
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        title="打开项目配置"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+
+  .hamburger-container {
+    float: left;
+    height: 100%;
+    line-height: 48px;
+    cursor: pointer;
+  }
+
+  .vertical-header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 280px;
+    height: 48px;
+    color: #000000d9;
+
+    .el-dropdown-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: 48px;
+      padding: 10px;
+      color: #000000d9;
+      cursor: pointer;
+
+      p {
+        font-size: 14px;
+      }
+
+      img {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+    margin-left: 16px;
+  }
+}
+
+.logout {
+  max-width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
@@ -0,0 +1,146 @@
+export interface ListItem {
+  avatar: string;
+  title: string;
+  datetime: string;
+  type: string;
+  description: string;
+  status?: "" | "success" | "warning" | "info" | "danger";
+  extra?: string;
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  list: ListItem[];
+}
+
+export const noticesData: TabItem[] = [
+  {
+    key: "1",
+    name: "通知",
+    list: [
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+        title: "你收到了 12 份新周报",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+        title: "你推荐的 前端高手 已通过第三轮面试",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
+        title: "这种模板可以区分多种通知类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title:
+          "展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title: "左侧图标用于区分不同的类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title: "左侧图标用于区分不同的类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      }
+    ]
+  },
+  {
+    key: "2",
+    name: "消息",
+    list: [
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "李白 评论了你",
+        description: "长风破浪会有时,直挂云帆济沧海",
+        datetime: "一年前",
+        type: "2"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "李白 回复了你",
+        description: "行路难，行路难，多歧路，今安在。",
+        datetime: "一年前",
+        type: "2"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "标题",
+        description:
+          "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
+        datetime: "一年前",
+        type: "2"
+      }
+    ]
+  },
+  {
+    key: "3",
+    name: "代办",
+    list: [
+      {
+        avatar: "",
+        title: "任务名称",
+        description: "任务需要在 2022-11-16 20:00 前启动",
+        datetime: "",
+        extra: "未开始",
+        status: "info",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "第三方紧急代码变更",
+        description:
+          "一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
+        datetime: "",
+        extra: "马上到期",
+        status: "danger",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "信息安全考试",
+        description: "指派小仙于 2022-12-12 前完成更新并发布",
+        datetime: "",
+        extra: "已耗时 8 天",
+        status: "warning",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "vue-pure-admin 版本发布",
+        description: "vue-pure-admin 版本发布",
+        datetime: "",
+        extra: "进行中",
+        type: "3"
+      }
+    ]
+  }
+];
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { noticesData } from "./data";
+import NoticeList from "./noticeList.vue";
+import Bell from "@iconify-icons/ep/bell";
+
+const noticesNum = ref(0);
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0].key);
+
+notices.value.map(v => (noticesNum.value += v.list.length));
+</script>
+
+<template>
+  <el-dropdown trigger="click" placement="bottom-end">
+    <span class="dropdown-badge navbar-bg-hover select-none">
+      <el-badge :value="noticesNum" :max="99">
+        <span class="header-notice-icon">
+          <IconifyIconOffline :icon="Bell" />
+        </span>
+      </el-badge>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-tabs
+          :stretch="true"
+          v-model="activeKey"
+          class="dropdown-tabs"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
+        >
+          <el-empty
+            v-if="notices.length === 0"
+            description="暂无消息"
+            :image-size="60"
+          />
+          <span v-else>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane
+                :label="`${item.name}(${item.list.length})`"
+                :name="`${item.key}`"
+              >
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
+        </el-tabs>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.dropdown-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 48px;
+  margin-right: 10px;
+  cursor: pointer;
+
+  .header-notice-icon {
+    font-size: 18px;
+  }
+}
+
+.dropdown-tabs {
+  .noticeList-container {
+    padding: 15px 24px 0;
+  }
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__nav-wrap)::after {
+    height: 1px;
+  }
+
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px;
+  }
+}
+</style>
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ListItem } from "./data";
+import { ref, PropType, nextTick } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { deviceDetection } from "@pureadmin/utils";
+
+const props = defineProps({
+  noticeItem: {
+    type: Object as PropType<ListItem>,
+    default: () => {}
+  }
+});
+
+const titleRef = ref(null);
+const titleTooltip = ref(false);
+const descriptionRef = ref(null);
+const descriptionTooltip = ref(false);
+const { tooltipEffect } = useNav();
+const isMobile = deviceDetection();
+
+function hoverTitle() {
+  nextTick(() => {
+    titleRef.value?.scrollWidth > titleRef.value?.clientWidth
+      ? (titleTooltip.value = true)
+      : (titleTooltip.value = false);
+  });
+}
+
+function hoverDescription(event, description) {
+  // currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
+  const tempTag = document.createElement("span");
+  tempTag.innerText = description;
+  tempTag.className = "getDescriptionWidth";
+  document.querySelector("body").appendChild(tempTag);
+  const currentWidth = (
+    document.querySelector(".getDescriptionWidth") as HTMLSpanElement
+  ).offsetWidth;
+  document.querySelector(".getDescriptionWidth").remove();
+
+  // cellWidth为容器的宽度
+  const cellWidth = event.target.offsetWidth;
+
+  // 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
+  currentWidth > 2 * cellWidth
+    ? (descriptionTooltip.value = true)
+    : (descriptionTooltip.value = false);
+}
+</script>
+
+<template>
+  <div
+    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+  >
+    <el-avatar
+      v-if="props.noticeItem.avatar"
+      :size="30"
+      :src="props.noticeItem.avatar"
+      class="notice-container-avatar"
+    />
+    <div class="notice-container-text">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
+        <el-tooltip
+          popper-class="notice-title-popper"
+          :effect="tooltipEffect"
+          :disabled="!titleTooltip"
+          :content="props.noticeItem.title"
+          placement="top-start"
+          :enterable="!isMobile"
+        >
+          <div
+            ref="titleRef"
+            class="notice-title-content"
+            @mouseover="hoverTitle"
+          >
+            {{ props.noticeItem.title }}
+          </div>
+        </el-tooltip>
+        <el-tag
+          v-if="props.noticeItem?.extra"
+          :type="props.noticeItem?.status"
+          size="small"
+          class="notice-title-extra"
+        >
+          {{ props.noticeItem?.extra }}
+        </el-tag>
+      </div>
+
+      <el-tooltip
+        popper-class="notice-title-popper"
+        :effect="tooltipEffect"
+        :disabled="!descriptionTooltip"
+        :content="props.noticeItem.description"
+        placement="top-start"
+      >
+        <div
+          ref="descriptionRef"
+          class="notice-text-description"
+          @mouseover="hoverDescription($event, props.noticeItem.description)"
+        >
+          {{ props.noticeItem.description }}
+        </div>
+      </el-tooltip>
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
+        {{ props.noticeItem.datetime }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.notice-title-popper {
+  max-width: 238px;
+}
+</style>
+<style scoped lang="scss">
+.notice-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 12px 0;
+
+  // border-bottom: 1px solid #f0f0f0;
+
+  .notice-container-avatar {
+    margin-right: 16px;
+    background: #fff;
+  }
+
+  .notice-container-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .notice-text-title {
+      display: flex;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1.5715;
+      cursor: pointer;
+
+      .notice-title-content {
+        flex: 1;
+        width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notice-title-extra {
+        float: right;
+        margin-top: -1.5px;
+        font-weight: 400;
+      }
+    }
+
+    .notice-text-description,
+    .notice-text-datetime {
+      font-size: 12px;
+      line-height: 1.5715;
+    }
+
+    .notice-text-description {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .notice-text-datetime {
+      margin-top: 4px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import { ListItem } from "./data";
+import NoticeItem from "./noticeItem.vue";
+
+const props = defineProps({
+  list: {
+    type: Array as PropType<Array<ListItem>>,
+    default: () => []
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.list.length">
+    <NoticeItem
+      v-for="(item, index) in props.list"
+      :noticeItem="item"
+      :key="index"
+    />
+  </div>
+  <el-empty v-else description="暂无数据" />
+</template>
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import Close from "@iconify-icons/ep/close";
+
+const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "mr-[20px]",
+    "outline-none",
+    "width-[20px]",
+    "height-[20px]",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+onClickOutside(target, (event: any) => {
+  if (event.clientX > target.value.offsetLeft) return;
+  show.value = false;
+});
+
+onMounted(() => {
+  emitter.on("openPanel", () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off("openPanel");
+});
+</script>
+
+<template>
+  <div :class="{ show: show }" class="right-panel-container">
+    <div class="right-panel-background" />
+    <div ref="target" class="right-panel bg-bg_color">
+      <div class="right-panel-items">
+        <div class="project-configuration">
+          <h4 class="dark:text-white">项目配置</h4>
+          <span title="关闭配置" :class="iconClass">
+            <IconifyIconOffline
+              class="dark:text-white"
+              width="20px"
+              height="20px"
+              :icon="Close"
+              @click="show = !show"
+            />
+          </span>
+        </div>
+        <div
+          class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
+        />
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.showright-panel {
+  position: relative;
+  width: calc(100% - 15px);
+  overflow: hidden;
+}
+</style>
+
+<style lang="scss" scoped>
+.right-panel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: rgb(0 0 0 / 20%);
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+}
+
+.right-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 40000;
+  width: 100%;
+  max-width: 315px;
+  height: 100vh;
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+  transform: translate(100%);
+}
+
+.show {
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
+  .right-panel-background {
+    z-index: 20000;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+  }
+
+  .right-panel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  position: absolute;
+  top: 45%;
+  left: -48px;
+  z-index: 0;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  line-height: 48px;
+  color: #fff;
+  text-align: center;
+  pointer-events: auto;
+  cursor: pointer;
+  background: rgb(24 144 255);
+  border-radius: 6px 0 0 6px !important;
+
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+
+.right-panel-items {
+  height: calc(100vh - 60px);
+  margin-top: 60px;
+  overflow-y: auto;
+}
+
+.project-configuration {
+  position: fixed;
+  top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 30px;
+  margin-left: 10px;
+}
+
+:deep(.el-divider--horizontal) {
+  width: 90%;
+  margin: 20px auto 0;
+}
+</style>
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import { useNav } from "@/layout/hooks/useNav";
+import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
+import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+
+const props = withDefaults(defineProps<{ total: number }>(), {
+  total: 0
+});
+
+const { device } = useNav();
+</script>
+
+<template>
+  <div class="search-footer text-[#333] dark:text-white">
+    <span class="search-footer-item">
+      <enterOutlined class="icon" />
+      确认
+    </span>
+    <span class="search-footer-item">
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
+      切换
+    </span>
+    <span class="search-footer-item">
+      <mdiKeyboardEsc class="icon" />
+      关闭
+    </span>
+    <p
+      v-if="device !== 'mobile' && props.total > 0"
+      class="search-footer-total"
+    >
+      共{{ props.total }}项
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-footer {
+  display: flex;
+
+  .search-footer-item {
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+  }
+
+  .icon {
+    padding: 2px;
+    margin-right: 3px;
+    font-size: 20px;
+    box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
+      0 1px 2px 1px #1e235a66;
+  }
+
+  .search-footer-total {
+    position: absolute;
+    right: 20px;
+  }
+}
+</style>
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { match } from "pinyin-pro";
+import { useRouter } from "vue-router";
+import SearchResult from "./SearchResult.vue";
+import SearchFooter from "./SearchFooter.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { ref, computed, shallowRef } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { useDebounceFn, onKeyStroke } from "@vueuse/core";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import Search from "@iconify-icons/ri/search-line";
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: "update:value", val: boolean): void;
+}
+
+const { device } = useNav();
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+const router = useRouter();
+
+const keyword = ref("");
+const scrollbarRef = ref();
+const resultRef = ref();
+const activePath = ref("");
+const inputRef = ref<HTMLInputElement | null>(null);
+const resultOptions = shallowRef([]);
+const handleSearch = useDebounceFn(search, 300);
+
+/** 菜单树形结构 */
+const menusData = computed(() => {
+  return cloneDeep(usePermissionStoreHook().wholeMenus);
+});
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit("update:value", val);
+  }
+});
+
+/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
+function flatTree(arr) {
+  const res = [];
+  function deep(arr) {
+    arr.forEach(item => {
+      res.push(item);
+      item.children && deep(item.children);
+    });
+  }
+  deep(arr);
+  return res;
+}
+
+/** 查询 */
+function search() {
+  const flatMenusData = flatTree(menusData.value);
+  resultOptions.value = flatMenusData.filter(menu =>
+    keyword.value
+      ? menu.meta?.title
+          .toLocaleLowerCase()
+          .includes(keyword.value.toLocaleLowerCase().trim()) ||
+        !isAllEmpty(
+          match(
+            menu.meta?.title.toLocaleLowerCase(),
+            keyword.value.toLocaleLowerCase().trim()
+          )
+        )
+      : false
+  );
+  if (resultOptions.value?.length > 0) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = "";
+  }
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    keyword.value = "";
+  }, 200);
+}
+
+function scrollTo(index) {
+  const scrollTop = resultRef.value.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
+/** key up */
+function handleUp() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(
+    item => item.path === activePath.value
+  );
+  if (index === 0) {
+    activePath.value = resultOptions.value[length - 1].path;
+    scrollTo(resultOptions.value.length - 1);
+  } else {
+    activePath.value = resultOptions.value[index - 1].path;
+    scrollTo(index - 1);
+  }
+}
+
+/** key down */
+function handleDown() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(
+    item => item.path === activePath.value
+  );
+  if (index + 1 === length) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = resultOptions.value[index + 1].path;
+  }
+  scrollTo(index + 1);
+}
+
+/** key enter */
+function handleEnter() {
+  const { length } = resultOptions.value;
+  if (length === 0 || activePath.value === "") return;
+  router.push(activePath.value);
+  handleClose();
+}
+
+onKeyStroke("Enter", handleEnter);
+onKeyStroke("ArrowUp", handleUp);
+onKeyStroke("ArrowDown", handleDown);
+</script>
+
+<template>
+  <el-dialog
+    top="5vh"
+    class="pure-search-dialog"
+    v-model="show"
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
+    :before-close="handleClose"
+    :style="{
+      borderRadius: '6px'
+    }"
+    append-to-body
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
+  >
+    <el-input
+      ref="inputRef"
+      size="large"
+      v-model="keyword"
+      clearable
+      placeholder="搜索菜单"
+      @input="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIconOffline
+          :icon="Search"
+          class="text-primary w-[24px] h-[24px]"
+        />
+      </template>
+    </el-input>
+    <div class="search-result-container">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty
+          v-if="resultOptions.length === 0"
+          description="暂无搜索结果"
+        />
+        <SearchResult
+          v-else
+          ref="resultRef"
+          v-model:value="activePath"
+          :options="resultOptions"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <SearchFooter :total="resultOptions.length" />
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.search-result-container {
+  margin-top: 12px;
+}
+</style>
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { useResizeObserver } from "@vueuse/core";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
+import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
+
+interface optionsItem {
+  path: string;
+  meta?: {
+    icon?: string;
+    title?: string;
+  };
+}
+
+interface Props {
+  value: string;
+  options: Array<optionsItem>;
+}
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+}
+
+const resultRef = ref();
+const innerHeight = ref();
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background:
+        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: item.path === active.value ? "#fff" : "",
+      fontSize: item.path === active.value ? "16px" : "14px"
+    };
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  active.value = item.path;
+}
+
+function handleTo() {
+  emit("enter");
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, () => {
+  resizeResult();
+});
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = curInstance[0] as ElRef;
+  const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+onMounted(() => {
+  resizeResult();
+});
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="resultRef" class="result">
+    <div
+      v-for="(item, index) in options"
+      :key="item.path"
+      :ref="'resultItemRef' + index"
+      class="result-item dark:bg-[#1d1d1d]"
+      :style="itemStyle(item)"
+      @click="handleTo"
+      @mouseenter="handleMouse(item)"
+    >
+      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
+      <span class="result-item-title">{{ item.meta?.title }}</span>
+      <enterOutlined />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.result {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin-top: 8px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &-title {
+      display: flex;
+      flex: 1;
+      margin-left: 5px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,3 @@
+import SearchModal from "./SearchModal.vue";
+
+export { SearchModal };
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { SearchModal } from "./components";
+import { useBoolean } from "../../hooks/useBoolean";
+import Search from "@iconify-icons/ep/search";
+
+const { bool: show, toggle } = useBoolean();
+function handleSearch() {
+  toggle();
+}
+</script>
+
+<template>
+  <div
+    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+    @click="handleSearch"
+  >
+    <IconifyIconOffline :icon="Search" />
+  </div>
+  <SearchModal v-model:value="show" />
+</template>
@@ -0,0 +1,529 @@
+<script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  nextTick,
+  onBeforeMount
+} from "vue";
+import {
+  useDark,
+  debounce,
+  useGlobal,
+  storageLocal,
+  storageSession
+} from "@pureadmin/utils";
+import { getConfig } from "@/config";
+import { useRouter } from "vue-router";
+import panel from "../panel/index.vue";
+import { emitter } from "@/utils/mitt";
+import { resetRouter } from "@/router";
+import { removeToken } from "@/utils/auth";
+import { routerArrays } from "@/layout/types";
+import { useNav } from "@/layout/hooks/useNav";
+import { useAppStoreHook } from "@/store/modules/app";
+import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+
+import dayIcon from "@/assets/svg/day.svg?component";
+import darkIcon from "@/assets/svg/dark.svg?component";
+import Check from "@iconify-icons/ep/check";
+import Logout from "@iconify-icons/ri/logout-circle-r-line";
+
+const router = useRouter();
+const { isDark } = useDark();
+const { device, tooltipEffect } = useNav();
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+
+const mixRef = ref();
+const verticalRef = ref();
+const horizontalRef = ref();
+
+const {
+  dataTheme,
+  layoutTheme,
+  themeColors,
+  dataThemeChange,
+  setEpThemeColor,
+  setLayoutThemeColor
+} = useDataThemeChange();
+
+/* body添加layout属性，作用于src/style/sidebar.scss */
+if (unref(layoutTheme)) {
+  const layout = unref(layoutTheme).layout;
+  const theme = unref(layoutTheme).theme;
+  toggleTheme({
+    scopeName: `layout-theme-${theme}`
+  });
+  setLayoutModel(layout);
+}
+
+/** 默认灵动模式 */
+const markValue = ref($storage.configure?.showModel ?? "smart");
+
+const logoVal = ref($storage.configure?.showLogo ?? true);
+
+const settings = reactive({
+  greyVal: $storage.configure.grey,
+  weakVal: $storage.configure.weak,
+  tabsVal: $storage.configure.hideTabs,
+  showLogo: $storage.configure.showLogo,
+  showModel: $storage.configure.showModel,
+  multiTagsCache: $storage.configure.multiTagsCache
+});
+
+const getThemeColorStyle = computed(() => {
+  return color => {
+    return { background: color };
+  };
+});
+
+/** 当网页为暗黑模式时不显示亮白色切换选项 */
+const showThemeColors = computed(() => {
+  return themeColor => {
+    return themeColor === "light" && isDark.value ? false : true;
+  };
+});
+
+function storageConfigureChange<T>(key: string, val: T): void {
+  const storageConfigure = $storage.configure;
+  storageConfigure[key] = val;
+  $storage.configure = storageConfigure;
+}
+
+function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+  const targetEl = target || document.body;
+  let { className } = targetEl;
+  className = className.replace(clsName, "").trim();
+  targetEl.className = flag ? `${className} ${clsName} ` : className;
+}
+
+/** 灰色模式设置 */
+const greyChange = (value): void => {
+  toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
+  storageConfigureChange("grey", value);
+};
+
+/** 色弱模式设置 */
+const weekChange = (value): void => {
+  toggleClass(
+    settings.weakVal,
+    "html-weakness",
+    document.querySelector("html")
+  );
+  storageConfigureChange("weak", value);
+};
+
+const tagsChange = () => {
+  const showVal = settings.tabsVal;
+  storageConfigureChange("hideTabs", showVal);
+  emitter.emit("tagViewsChange", showVal as unknown as string);
+};
+
+const multiTagsCacheChange = () => {
+  const multiTagsCache = settings.multiTagsCache;
+  storageConfigureChange("multiTagsCache", multiTagsCache);
+  useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
+};
+
+/** 清空缓存并返回登录页 */
+function onReset() {
+  removeToken();
+  storageLocal().clear();
+  storageSession().clear();
+  const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
+  useAppStoreHook().setLayout(Layout);
+  setEpThemeColor(EpThemeColor);
+  useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
+  toggleClass(Grey, "html-grey", document.querySelector("html"));
+  toggleClass(Weak, "html-weakness", document.querySelector("html"));
+  router.push("/login");
+  useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
+  resetRouter();
+}
+
+function onChange(label) {
+  storageConfigureChange("showModel", label);
+  emitter.emit("tagViewsShowModel", label);
+}
+
+/** 侧边栏Logo */
+function logoChange() {
+  unref(logoVal)
+    ? storageConfigureChange("showLogo", true)
+    : storageConfigureChange("showLogo", false);
+  emitter.emit("logoChange", unref(logoVal));
+}
+
+function setFalse(Doms): any {
+  Doms.forEach(v => {
+    toggleClass(false, "is-select", unref(v));
+  });
+}
+
+/** 主题色 激活选择项 */
+const getThemeColor = computed(() => {
+  return current => {
+    if (
+      current === layoutTheme.value.theme &&
+      layoutTheme.value.theme !== "light"
+    ) {
+      return "#fff";
+    } else if (
+      current === layoutTheme.value.theme &&
+      layoutTheme.value.theme === "light"
+    ) {
+      return "#1d2b45";
+    } else {
+      return "transparent";
+    }
+  };
+});
+
+/** 设置导航模式 */
+function setLayoutModel(layout: string) {
+  layoutTheme.value.layout = layout;
+  window.document.body.setAttribute("layout", layout);
+  $storage.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor
+  };
+  useAppStoreHook().setLayout(layout);
+}
+
+watch($storage, ({ layout }) => {
+  switch (layout["layout"]) {
+    case "vertical":
+      toggleClass(true, "is-select", unref(verticalRef));
+      debounce(setFalse([horizontalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "horizontal":
+      toggleClass(true, "is-select", unref(horizontalRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "mix":
+      toggleClass(true, "is-select", unref(mixRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([horizontalRef]), 50);
+      break;
+  }
+});
+
+onBeforeMount(() => {
+  /* 初始化项目配置 */
+  nextTick(() => {
+    settings.greyVal &&
+      document.querySelector("html")?.setAttribute("class", "html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.setAttribute("class", "html-weakness");
+    settings.tabsVal && tagsChange();
+  });
+});
+</script>
+
+<template>
+  <panel>
+    <el-divider>主题</el-divider>
+    <el-switch
+      v-model="dataTheme"
+      inline-prompt
+      class="pure-datatheme"
+      :active-icon="dayIcon"
+      :inactive-icon="darkIcon"
+      @change="dataThemeChange"
+    />
+
+    <el-divider>导航栏模式</el-divider>
+    <ul class="pure-theme">
+      <el-tooltip
+        :effect="tooltipEffect"
+        class="item"
+        content="左侧模式"
+        placement="bottom"
+        popper-class="pure-tooltip"
+      >
+        <li
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
+          ref="verticalRef"
+          @click="setLayoutModel('vertical')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+
+      <el-tooltip
+        v-if="device !== 'mobile'"
+        :effect="tooltipEffect"
+        class="item"
+        content="顶部模式"
+        placement="bottom"
+        popper-class="pure-tooltip"
+      >
+        <li
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
+          ref="horizontalRef"
+          @click="setLayoutModel('horizontal')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+
+      <el-tooltip
+        v-if="device !== 'mobile'"
+        :effect="tooltipEffect"
+        class="item"
+        content="混合模式"
+        placement="bottom"
+        popper-class="pure-tooltip"
+      >
+        <li
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
+          ref="mixRef"
+          @click="setLayoutModel('mix')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+    </ul>
+
+    <el-divider>主题色</el-divider>
+    <ul class="theme-color">
+      <li
+        v-for="(item, index) in themeColors"
+        :key="index"
+        v-show="showThemeColors(item.themeColor)"
+        :style="getThemeColorStyle(item.color)"
+        @click="setLayoutThemeColor(item.themeColor)"
+      >
+        <el-icon
+          style="margin: 0.1em 0.1em 0 0"
+          :size="17"
+          :color="getThemeColor(item.themeColor)"
+        >
+          <IconifyIconOffline :icon="Check" />
+        </el-icon>
+      </li>
+    </ul>
+
+    <el-divider>界面显示</el-divider>
+    <ul class="setting">
+      <li>
+        <span class="dark:text-white">灰色模式</span>
+        <el-switch
+          v-model="settings.greyVal"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="greyChange"
+        />
+      </li>
+      <li>
+        <span class="dark:text-white">色弱模式</span>
+        <el-switch
+          v-model="settings.weakVal"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="weekChange"
+        />
+      </li>
+      <li>
+        <span class="dark:text-white">隐藏标签页</span>
+        <el-switch
+          v-model="settings.tabsVal"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="tagsChange"
+        />
+      </li>
+      <li>
+        <span class="dark:text-white">侧边栏Logo</span>
+        <el-switch
+          v-model="logoVal"
+          inline-prompt
+          :active-value="true"
+          :inactive-value="false"
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="logoChange"
+        />
+      </li>
+      <li>
+        <span class="dark:text-white">标签页持久化</span>
+        <el-switch
+          v-model="settings.multiTagsCache"
+          inline-prompt
+          inactive-color="#a6a6a6"
+          active-text="开"
+          inactive-text="关"
+          @change="multiTagsCacheChange"
+        />
+      </li>
+
+      <li>
+        <span class="dark:text-white">标签风格</span>
+        <el-radio-group v-model="markValue" size="small" @change="onChange">
+          <el-radio label="card">卡片</el-radio>
+          <el-radio label="smart">灵动</el-radio>
+        </el-radio-group>
+      </li>
+    </ul>
+
+    <el-divider />
+    <el-button
+      type="danger"
+      style="width: 90%; margin: 24px 15px"
+      @click="onReset"
+    >
+      <IconifyIconOffline
+        :icon="Logout"
+        width="15"
+        height="15"
+        style="margin-right: 4px"
+      />
+      清空缓存并返回登录页
+    </el-button>
+  </panel>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider__text) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.is-select {
+  border: 2px solid var(--el-color-primary);
+}
+
+.setting {
+  width: 100%;
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 25px;
+  }
+}
+
+.pure-datatheme {
+  display: block;
+  width: 100%;
+  height: 50px;
+  padding-top: 25px;
+  text-align: center;
+}
+
+.pure-theme {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+  height: 50px;
+  margin-top: 25px;
+
+  li {
+    position: relative;
+    width: 18%;
+    height: 45px;
+    overflow: hidden;
+    cursor: pointer;
+    background: #f0f2f5;
+    border-radius: 4px;
+    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+    &:nth-child(1) {
+      div {
+        &:nth-child(1) {
+          width: 30%;
+          height: 100%;
+          background: #1b2a47;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 70%;
+          height: 30%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(3) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 30%;
+          height: 70%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+  }
+}
+
+.theme-color {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  margin-top: 20px;
+
+  li {
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin-top: 8px;
+    margin-right: 8px;
+    font-weight: 700;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 2px;
+
+    &:nth-child(2) {
+      border: 1px solid #ddd;
+    }
+  }
+}
+</style>
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { isEqual } from "@pureadmin/utils";
+import { ref, watch, onMounted, toRaw } from "vue";
+import { getParentPaths, findRouteByPath } from "@/router/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+
+const route = useRoute();
+const levelList = ref([]);
+const router = useRouter();
+const routes: any = router.options.routes;
+const multiTags: any = useMultiTagsStoreHook().multiTags;
+
+const getBreadcrumb = (): void => {
+  // 当前路由信息
+  let currentRoute;
+
+  if (Object.keys(route.query).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.query, item?.query)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else {
+    currentRoute = findRouteByPath(router.currentRoute.value.path, routes);
+  }
+
+  // 当前路由的父级路径组成的数组
+  const parentRoutes = getParentPaths(
+    router.currentRoute.value.name as string,
+    routes,
+    "name"
+  );
+  // 存放组成面包屑的数组
+  const matched = [];
+
+  // 获取每个父级路径对应的路由信息
+  parentRoutes.forEach(path => {
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
+  });
+
+  matched.push(currentRoute);
+
+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
+  levelList.value = matched.filter(
+    item => item?.meta && item?.meta.title !== false
+  );
+};
+
+const handleLink = (item: RouteLocationMatched): void => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    router.push(path);
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getBreadcrumb();
+  },
+  {
+    deep: true
+  }
+);
+</script>
+
+<template>
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item
+        class="!inline !items-stretch"
+        v-for="item in levelList"
+        :key="item.path"
+      >
+        <a @click.prevent="handleLink(item)">
+          {{ item.meta.title }}
+        </a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toRaw } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const props = defineProps({
+  extraIcon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.extraIcon" class="flex justify-center items-center">
+    <component
+      :is="useRenderIcon(toRaw(props.extraIcon))"
+      class="w-[30px] h-[30px]"
+    />
+  </div>
+</template>
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import Search from "../search/index.vue";
+import Notice from "../notice/index.vue";
+import SidebarItem from "./sidebarItem.vue";
+import { isAllEmpty } from "@pureadmin/utils";
+import { ref, nextTick, computed } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+
+const menuRef = ref();
+
+const {
+  route,
+  title,
+  logout,
+  backTopMenu,
+  onPanel,
+  username,
+  userAvatar,
+  avatarsStyle
+} = useNav();
+
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+</script>
+
+<template>
+  <div
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
+    <div class="horizontal-header-left" @click="backTopMenu">
+      <img src="/logo.svg" alt="logo" />
+      <span>{{ title }}</span>
+    </div>
+    <el-menu
+      router
+      ref="menuRef"
+      mode="horizontal"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
+    >
+      <sidebar-item
+        v-for="route in usePermissionStoreHook().wholeMenus"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <Notice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              退出系统
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        title="打开项目配置"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
+.logout {
+  max-width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const visible = ref(false);
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "text-primary",
+    "cursor-pointer",
+    "duration-[100ms]",
+    "hover:text-primary",
+    "dark:hover:!text-white"
+  ];
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div class="container">
+    <el-tooltip
+      placement="right"
+      :visible="visible"
+      :effect="tooltipEffect"
+      :content="props.isActive ? '点击折叠' : '点击展开'"
+    >
+      <IconifyIconOffline
+        :icon="MenuFold"
+        :class="iconClass"
+        :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
+        @click="toggleClick"
+        @mouseenter="visible = true"
+        @mouseleave="visible = false"
+      />
+    </el-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  box-shadow: 0 0 6px -2px var(--el-color-primary);
+}
+</style>
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { getTopMenu } from "@/router/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+const props = defineProps({
+  collapse: Boolean
+});
+
+const { title } = useNav();
+</script>
+
+<template>
+  <div class="sidebar-logo-container" :class="{ collapses: props.collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="props.collapse"
+        key="props.collapse"
+        :title="title"
+        class="sidebar-logo-link"
+        :to="getTopMenu()?.path ?? '/'"
+      >
+        <img src="/logo.svg" alt="logo" />
+        <span class="sidebar-title">{{ title }}</span>
+      </router-link>
+      <router-link
+        v-else
+        key="expand"
+        :title="title"
+        class="sidebar-logo-link"
+        :to="getTopMenu()?.path ?? '/'"
+      >
+        <img src="/logo.svg" alt="logo" />
+        <span class="sidebar-title">{{ title }}</span>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+
+  .sidebar-logo-link {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: 100%;
+
+    img {
+      display: inline-block;
+      height: 32px;
+    }
+
+    .sidebar-title {
+      display: inline-block;
+      height: 32px;
+      margin: 2px 0 0 12px;
+      overflow: hidden;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 32px;
+      color: $subMenuActiveText;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import extraIcon from "./extraIcon.vue";
+import Search from "../search/index.vue";
+import Notice from "../notice/index.vue";
+import { isAllEmpty } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+import { ref, toRaw, watch, onMounted, nextTick } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getParentPaths, findRouteByPath } from "@/router/utils";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+
+const menuRef = ref();
+const defaultActive = ref(null);
+
+const {
+  route,
+  device,
+  logout,
+  onPanel,
+  resolvePath,
+  username,
+  userAvatar,
+  getDivStyle,
+  avatarsStyle
+} = useNav();
+
+function getDefaultActive(routePath) {
+  const wholeMenus = usePermissionStoreHook().wholeMenus;
+  /** 当前路由的父级路径 */
+  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
+  defaultActive.value = !isAllEmpty(route.meta?.activePath)
+    ? route.meta.activePath
+    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+});
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    getDefaultActive(route.path);
+  }
+);
+</script>
+
+<template>
+  <div
+    v-if="device !== 'mobile'"
+    class="horizontal-header"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+  >
+    <el-menu
+      router
+      ref="menuRef"
+      mode="horizontal"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
+    >
+      <el-menu-item
+        v-for="route in usePermissionStoreHook().wholeMenus"
+        :key="route.path"
+        :index="resolvePath(route) || route.redirect"
+      >
+        <template #title>
+          <div
+            v-if="toRaw(route.meta.icon)"
+            :class="['sub-menu-icon', route.meta.icon]"
+          >
+            <component
+              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
+            />
+          </div>
+          <div :style="getDivStyle">
+            <span class="select-none">
+              {{ route.meta.title }}
+            </span>
+            <extraIcon :extraIcon="route.meta.extraIcon" />
+          </div>
+        </template>
+      </el-menu-item>
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <Notice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover select-none">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              退出系统
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        title="打开项目配置"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
+.logout {
+  max-width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { getConfig } from "@/config";
+import { menuType } from "../../types";
+import extraIcon from "./extraIcon.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
+
+import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
+import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
+import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
+import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
+
+const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<menuType>
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ""
+  }
+});
+
+const getSpanStyle = computed((): CSSProperties => {
+  return {
+    width: "100%",
+    textAlign: "center"
+  };
+});
+
+const getNoDropdownStyle = computed((): CSSProperties => {
+  return {
+    display: "flex",
+    alignItems: "center"
+  };
+});
+
+const getMenuTextStyle = computed(() => {
+  return {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    outline: "none"
+  };
+});
+
+const getsubMenuIconStyle = computed((): CSSProperties => {
+  return {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    margin:
+      layout.value === "horizontal"
+        ? "0 5px 0 0"
+        : isCollapse.value
+        ? "0 auto"
+        : "0 5px 0 0"
+  };
+});
+
+const getSubTextStyle = computed((): CSSProperties => {
+  if (!isCollapse.value) {
+    return {
+      width: "210px",
+      display: "inline-block",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    };
+  } else {
+    return {
+      width: ""
+    };
+  }
+});
+
+const getSubMenuDivStyle = computed((): any => {
+  return item => {
+    return !isCollapse.value
+      ? {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        }
+      : {
+          width: "100%",
+          textAlign:
+            item?.parentId === null
+              ? "center"
+              : layout.value === "mix" && item?.pathList?.length === 2
+              ? "center"
+              : ""
+        };
+  };
+});
+
+const expandCloseIcon = computed(() => {
+  if (!getConfig()?.MenuArrowIconNoTransition) return "";
+  return {
+    "expand-close-icon": useRenderIcon(EpArrowDown),
+    "expand-open-icon": useRenderIcon(ArrowUp),
+    "collapse-close-icon": useRenderIcon(ArrowRight),
+    "collapse-open-icon": useRenderIcon(ArrowLeft)
+  };
+});
+
+const onlyOneChild: menuType = ref(null);
+// 存放菜单是否存在showTooltip属性标识
+const hoverMenuMap = new WeakMap();
+// 存储菜单文本dom元素
+const menuTextRef = ref(null);
+
+function hoverMenu(key) {
+  // 如果当前菜单showTooltip属性已存在，退出计算
+  if (hoverMenuMap.get(key)) return;
+
+  nextTick(() => {
+    // 如果文本内容的整体宽度大于其可视宽度，则文本溢出
+    menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
+      ? Object.assign(key, {
+          showTooltip: true
+        })
+      : Object.assign(key, {
+          showTooltip: false
+        });
+    hoverMenuMap.set(key, true);
+  });
+}
+
+// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号
+function overflowSlice(text, item?: any) {
+  const newText =
+    (text?.length > 1 ? text.toString().slice(0, 1) : text) + "...";
+  if (item && !(isCollapse.value && item?.parentId === null)) {
+    return layout.value === "mix" &&
+      item?.pathList?.length === 2 &&
+      isCollapse.value
+      ? newText
+      : text;
+  }
+  return newText;
+}
+
+function hasOneShowingChild(children: menuType[] = [], parent: menuType) {
+  const showingChildren = children.filter((item: any) => {
+    onlyOneChild.value = item;
+    return true;
+  });
+
+  if (showingChildren[0]?.meta?.showParent) {
+    return false;
+  }
+
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+    return true;
+  }
+  return false;
+}
+
+function resolvePath(routePath) {
+  const httpReg = /^http(s?):\/\//;
+  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
+    return routePath || props.basePath;
+  } else {
+    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
+    const segments = `${props.basePath}/${routePath}`
+      .split("/")
+      .filter(Boolean);
+    return `/${segments.join("/")}`;
+  }
+}
+</script>
+
+<template>
+  <el-menu-item
+    v-if="
+      hasOneShowingChild(props.item.children, props.item) &&
+      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+    "
+    :index="resolvePath(onlyOneChild.path)"
+    :class="{ 'submenu-title-noDropdown': !isNest }"
+    :style="getNoDropdownStyle"
+  >
+    <div
+      v-if="toRaw(props.item.meta.icon)"
+      class="sub-menu-icon"
+      :style="getsubMenuIconStyle"
+    >
+      <component
+        :is="
+          useRenderIcon(
+            toRaw(onlyOneChild.meta.icon) ||
+              (props.item.meta && toRaw(props.item.meta.icon))
+          )
+        "
+      />
+    </div>
+    <span
+      v-if="
+        !props.item?.meta.icon &&
+        isCollapse &&
+        layout === 'vertical' &&
+        props.item?.pathList?.length === 1
+      "
+      :style="getSpanStyle"
+    >
+      {{ overflowSlice(onlyOneChild.meta.title) }}
+    </span>
+    <span
+      v-if="
+        !onlyOneChild.meta.icon &&
+        isCollapse &&
+        layout === 'mix' &&
+        props.item?.pathList?.length === 2
+      "
+      :style="getSpanStyle"
+    >
+      {{ overflowSlice(onlyOneChild.meta.title) }}
+    </span>
+    <template #title>
+      <div :style="getDivStyle">
+        <span v-if="layout === 'horizontal'">
+          {{ onlyOneChild.meta.title }}
+        </span>
+        <el-tooltip
+          v-else
+          placement="top"
+          :effect="tooltipEffect"
+          :offset="-10"
+          :disabled="!onlyOneChild.showTooltip"
+        >
+          <template #content>
+            {{ onlyOneChild.meta.title }}
+          </template>
+          <span
+            ref="menuTextRef"
+            :style="getMenuTextStyle"
+            @mouseover="hoverMenu(onlyOneChild)"
+          >
+            {{ onlyOneChild.meta.title }}
+          </span>
+        </el-tooltip>
+        <extraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
+      </div>
+    </template>
+  </el-menu-item>
+
+  <el-sub-menu
+    v-else
+    ref="subMenu"
+    v-bind="expandCloseIcon"
+    :index="resolvePath(props.item.path)"
+  >
+    <template #title>
+      <div
+        v-if="toRaw(props.item.meta.icon)"
+        :style="getsubMenuIconStyle"
+        class="sub-menu-icon"
+      >
+        <component
+          :is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))"
+        />
+      </div>
+      <span v-if="layout === 'horizontal'">
+        {{ props.item.meta.title }}
+      </span>
+      <div
+        :style="getSubMenuDivStyle(props.item)"
+        v-if="
+          !(
+            isCollapse &&
+            toRaw(props.item.meta.icon) &&
+            props.item.parentId === null
+          )
+        "
+      >
+        <el-tooltip
+          v-if="layout !== 'horizontal'"
+          placement="top"
+          :effect="tooltipEffect"
+          :offset="-10"
+          :disabled="!props.item.showTooltip"
+        >
+          <template #content>
+            {{ props.item.meta.title }}
+          </template>
+          <span
+            ref="menuTextRef"
+            :style="getSubTextStyle"
+            @mouseover="hoverMenu(props.item)"
+          >
+            {{ overflowSlice(props.item.meta.title, props.item) }}
+          </span>
+        </el-tooltip>
+        <extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" />
+      </div>
+    </template>
+    <sidebar-item
+      v-for="child in props.item.children"
+      :key="child.path"
+      :is-nest="true"
+      :item="child"
+      :base-path="resolvePath(child.path)"
+      class="nest-menu"
+    />
+  </el-sub-menu>
+</template>
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    class="px-3 mr-1 navbar-bg-hover"
+    :title="props.isActive ? '点击折叠' : '点击展开'"
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="props.isActive ? MenuFold : MenuUnfold"
+      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
+    />
+  </div>
+</template>
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import Logo from "./logo.vue";
+import { useRoute } from "vue-router";
+import { emitter } from "@/utils/mitt";
+import SidebarItem from "./sidebarItem.vue";
+import leftCollapse from "./leftCollapse.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { responsiveStorageNameSpace } from "@/config";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
+import { findRouteByPath, getParentPaths } from "@/router/utils";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+
+const route = useRoute();
+const showLogo = ref(
+  storageLocal().getItem<StorageConfigs>(
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
+);
+
+const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
+
+const subMenuData = ref([]);
+
+const menuData = computed(() => {
+  return pureApp.layout === "mix" && device.value !== "mobile"
+    ? subMenuData.value
+    : usePermissionStoreHook().wholeMenus;
+});
+
+const loading = computed(() =>
+  pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
+);
+
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
+function getSubMenuData() {
+  let path = "";
+  path = defaultActive.value;
+  subMenuData.value = [];
+  // path的上级路由组成的数组
+  const parentPathArr = getParentPaths(
+    path,
+    usePermissionStoreHook().wholeMenus
+  );
+  // 当前路由的父级路由信息
+  const parenetRoute = findRouteByPath(
+    parentPathArr[0] || path,
+    usePermissionStoreHook().wholeMenus
+  );
+  if (!parenetRoute?.children) return;
+  subMenuData.value = parenetRoute?.children;
+}
+
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    if (route.path.includes("/redirect")) return;
+    getSubMenuData();
+    menuSelect(route.path);
+  }
+);
+
+onMounted(() => {
+  getSubMenuData();
+
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`logoChange`公共事件，防止多次触发
+  emitter.off("logoChange");
+});
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+  >
+    <Logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar
+      wrap-class="scrollbar-wrapper"
+      :class="[device === 'mobile' ? 'mobile' : 'pc']"
+    >
+      <el-menu
+        router
+        unique-opened
+        mode="vertical"
+        class="outer-most select-none"
+        :collapse="isCollapse"
+        :default-active="defaultActive"
+        :collapse-transition="false"
+      >
+        <sidebar-item
+          v-for="routes in menuData"
+          :key="routes.path"
+          :item="routes"
+          :base-path="routes.path"
+          class="outer-most select-none"
+        />
+      </el-menu>
+    </el-scrollbar>
+    <leftCollapse
+      v-if="device !== 'mobile'"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+</style>
@@ -0,0 +1,295 @@
+@keyframes schedule-in-width {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes schedule-out-width {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes close {
+  from {
+    transform: translate(-50%, -50%);
+  }
+
+  to {
+    transform: translate(0, -50%);
+  }
+}
+
+.tags-view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  background: #fff;
+  box-shadow: 0 0 1px #888;
+
+  .scroll-item {
+    position: relative;
+    display: inline-block;
+    height: 28px;
+    padding: 0 6px;
+    margin-right: 4px;
+    line-height: 28px;
+    cursor: pointer;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 0 1px #888;
+    transition: all 0.4s;
+
+    .el-icon-close {
+      position: absolute;
+      top: 50%;
+      font-size: 10px;
+      color: var(--el-color-primary);
+      cursor: pointer;
+      transition: font-size 0.2s;
+      transform: translate(-50%, -50%);
+
+      &:hover {
+        font-size: 13px;
+        color: #fff;
+        background: #b4bccc;
+        border-radius: 50%;
+      }
+    }
+
+    &.is-closable:not(:first-child) {
+      &:hover {
+        padding-right: 18px;
+
+        &:not(.is-active) {
+          .el-icon-close {
+            animation: close 200ms ease-in forwards;
+          }
+        }
+      }
+    }
+  }
+
+  a {
+    padding: 0 4px;
+    color: var(--el-text-color-primary);
+    text-decoration: none;
+  }
+
+  .scroll-container {
+    position: relative;
+    flex: 1;
+    padding: 5px 0;
+    overflow: hidden;
+    white-space: nowrap;
+
+    .tab {
+      position: relative;
+      float: left;
+      overflow: visible;
+      white-space: nowrap;
+      list-style: none;
+      transition: transform 0.5s ease-in-out;
+
+      .scroll-item {
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        &:nth-child(1) {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  /* 右键菜单 */
+  .contextmenu {
+    position: absolute;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 13px;
+    font-weight: normal;
+    color: var(--el-text-color-primary);
+    white-space: nowrap;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
+    outline: 0;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+
+    li {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 7px 12px;
+      margin: 0;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+
+      svg {
+        display: block;
+        margin-right: 0.5em;
+      }
+    }
+  }
+}
+
+.el-dropdown-menu {
+  li {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    cursor: pointer;
+
+    svg {
+      display: block;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
+
+:deep(.el-dropdown-menu__item--divided) {
+  margin: 1px 0;
+}
+
+.el-dropdown-menu__item--divided::before {
+  margin: 0;
+}
+
+.el-dropdown-menu__item.is-disabled {
+  cursor: not-allowed;
+}
+
+.scroll-item.is-active {
+  position: relative;
+  color: #fff;
+
+  &:not(:first-child) {
+    padding-right: 18px;
+  }
+
+  .el-icon-close {
+    transform: translate(0, -50%);
+  }
+
+  a {
+    color: var(--el-color-primary) !important;
+  }
+}
+
+.arrow-left,
+.arrow-right,
+.arrow-down {
+  position: relative;
+  width: 40px;
+  height: 38px;
+  color: var(--el-text-color-primary);
+
+  svg {
+    position: absolute;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, 50%);
+  }
+}
+
+.arrow-left {
+  box-shadow: 5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: w-resize;
+  }
+}
+
+.arrow-right {
+  border-right: 0.5px solid #ccc;
+  box-shadow: -5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: e-resize;
+  }
+}
+
+/* 卡片模式下鼠标移入显示蓝色边框 */
+.card-in {
+  color: var(--el-color-primary);
+
+  a {
+    color: var(--el-color-primary);
+  }
+}
+
+/* 卡片模式下鼠标移出隐藏蓝色边框 */
+.card-out {
+  color: #666;
+  border: none;
+
+  a {
+    color: #666;
+  }
+}
+
+/* 灵动模式 */
+.schedule-active {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+}
+
+/* 灵动模式下鼠标移入显示蓝色进度条 */
+.schedule-in {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-in-width 200ms ease-in;
+}
+
+/* 灵动模式下鼠标移出隐藏蓝色进度条 */
+.schedule-out {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-out-width 200ms ease-in;
+}
@@ -0,0 +1,611 @@
+<script setup lang="ts">
+import { emitter } from "@/utils/mitt";
+import { RouteConfigs } from "../../types";
+import { useTags } from "../../hooks/useTag";
+import { routerArrays } from "@/layout/types";
+import { handleAliveRoute, getTopMenu } from "@/router/utils";
+import { useSettingStoreHook } from "@/store/modules/settings";
+import { useResizeObserver, useFullscreen } from "@vueuse/core";
+import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
+
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import CloseBold from "@iconify-icons/ep/close-bold";
+
+const {
+  route,
+  router,
+  visible,
+  showTags,
+  instance,
+  multiTags,
+  tagsViews,
+  buttonTop,
+  buttonLeft,
+  showModel,
+  translateX,
+  pureSetting,
+  activeIndex,
+  getTabStyle,
+  iconIsActive,
+  linkIsActive,
+  currentSelect,
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  onContentFullScreen
+} = useTags();
+
+const tabDom = ref();
+const containerDom = ref();
+const scrollbarDom = ref();
+const isShowArrow = ref(false);
+const topPath = getTopMenu()?.path;
+const { VITE_HIDE_HOME } = import.meta.env;
+const { isFullscreen, toggle } = useFullscreen();
+
+const dynamicTagView = async () => {
+  await nextTick();
+  const index = multiTags.value.findIndex(item => {
+    if (!isAllEmpty(route.query)) {
+      return isEqual(route.query, item.query);
+    } else if (!isAllEmpty(route.params)) {
+      return isEqual(route.params, item.params);
+    } else {
+      return route.path === item.path;
+    }
+  });
+  moveToView(index);
+};
+
+const moveToView = async (index: number): Promise<void> => {
+  await nextTick();
+  const tabNavPadding = 10;
+  if (!instance.refs["dynamic" + index]) return;
+  const tabItemEl = instance.refs["dynamic" + index][0];
+  const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
+  const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
+  // 标签页导航栏可视长度（不包含溢出部分）
+  const scrollbarDomWidth = scrollbarDom.value
+    ? scrollbarDom.value?.offsetWidth
+    : 0;
+
+  // 已有标签页总长度（包含溢出部分）
+  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
+
+  scrollbarDomWidth <= tabDomWidth
+    ? (isShowArrow.value = true)
+    : (isShowArrow.value = false);
+  if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
+    translateX.value = 0;
+  } else if (tabItemElOffsetLeft < -translateX.value) {
+    // 标签在可视区域左侧
+    translateX.value = -tabItemElOffsetLeft + tabNavPadding;
+  } else if (
+    tabItemElOffsetLeft > -translateX.value &&
+    tabItemElOffsetLeft + tabItemOffsetWidth <
+      -translateX.value + scrollbarDomWidth
+  ) {
+    // 标签在可视区域
+    translateX.value = Math.min(
+      0,
+      scrollbarDomWidth -
+        tabItemOffsetWidth -
+        tabItemElOffsetLeft -
+        tabNavPadding
+    );
+  } else {
+    // 标签在可视区域右侧
+    translateX.value = -(
+      tabItemElOffsetLeft -
+      (scrollbarDomWidth - tabNavPadding - tabItemOffsetWidth)
+    );
+  }
+};
+
+const handleScroll = (offset: number): void => {
+  const scrollbarDomWidth = scrollbarDom.value
+    ? scrollbarDom.value?.offsetWidth
+    : 0;
+  const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
+  if (offset > 0) {
+    translateX.value = Math.min(0, translateX.value + offset);
+  } else {
+    if (scrollbarDomWidth < tabDomWidth) {
+      if (translateX.value >= -(tabDomWidth - scrollbarDomWidth)) {
+        translateX.value = Math.max(
+          translateX.value + offset,
+          scrollbarDomWidth - tabDomWidth
+        );
+      }
+    } else {
+      translateX.value = 0;
+    }
+  }
+};
+
+function dynamicRouteTag(value: string): void {
+  const hasValue = multiTags.value.some(item => {
+    return item.path === value;
+  });
+
+  function concatPath(arr: object[], value: string) {
+    if (!hasValue) {
+      arr.forEach((arrItem: any) => {
+        if (arrItem.path === value || arrItem.path === value) {
+          useMultiTagsStoreHook().handleTags("push", {
+            path: value,
+            meta: arrItem.meta,
+            name: arrItem.name
+          });
+        } else {
+          if (arrItem.children && arrItem.children.length > 0) {
+            concatPath(arrItem.children, value);
+          }
+        }
+      });
+    }
+  }
+  concatPath(router.options.routes as any, value);
+}
+
+/** 刷新路由 */
+function onFresh() {
+  const { fullPath, query } = unref(route);
+  router.replace({
+    path: "/redirect" + fullPath,
+    query
+  });
+  handleAliveRoute(route as ToRouteType, "refresh");
+}
+
+function deleteDynamicTag(obj: any, current: any, tag?: string) {
+  const valueIndex: number = multiTags.value.findIndex((item: any) => {
+    if (item.query) {
+      if (item.path === obj.path) {
+        return item.query === obj.query;
+      }
+    } else if (item.params) {
+      if (item.path === obj.path) {
+        return item.params === obj.params;
+      }
+    } else {
+      return item.path === obj.path;
+    }
+  });
+
+  const spliceRoute = (
+    startIndex?: number,
+    length?: number,
+    other?: boolean
+  ): void => {
+    if (other) {
+      useMultiTagsStoreHook().handleTags("equal", [
+        VITE_HIDE_HOME === "false" ? routerArrays[0] : toRaw(getTopMenu()),
+        obj
+      ]);
+    } else {
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex,
+        length
+      }) as any;
+    }
+    dynamicTagView();
+  };
+
+  if (tag === "other") {
+    spliceRoute(1, 1, true);
+  } else if (tag === "left") {
+    spliceRoute(1, valueIndex - 1);
+  } else if (tag === "right") {
+    spliceRoute(valueIndex + 1, multiTags.value.length);
+  } else {
+    // 从当前匹配到的路径中删除
+    spliceRoute(valueIndex, 1);
+  }
+  const newRoute = useMultiTagsStoreHook().handleTags("slice");
+  if (current === route.path) {
+    // 如果删除当前激活tag就自动切换到最后一个tag
+    if (tag === "left") return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  } else {
+    if (!multiTags.value.length) return;
+    if (multiTags.value.some(item => item.path === route.path)) return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  }
+}
+
+function deleteMenu(item, tag?: string) {
+  deleteDynamicTag(item, item.path, tag);
+  handleAliveRoute(route as ToRouteType);
+}
+
+function onClickDrop(key, item, selectRoute?: RouteConfigs) {
+  if (item && item.disabled) return;
+
+  let selectTagRoute;
+  if (selectRoute) {
+    selectTagRoute = {
+      path: selectRoute.path,
+      meta: selectRoute.meta,
+      name: selectRoute.name,
+      query: selectRoute?.query,
+      params: selectRoute?.params
+    };
+  } else {
+    selectTagRoute = { path: route.path, meta: route.meta };
+  }
+
+  // 当前路由信息
+  switch (key) {
+    case 0:
+      // 刷新路由
+      onFresh();
+      break;
+    case 1:
+      // 关闭当前标签页
+      deleteMenu(selectTagRoute);
+      break;
+    case 2:
+      // 关闭左侧标签页
+      deleteMenu(selectTagRoute, "left");
+      break;
+    case 3:
+      // 关闭右侧标签页
+      deleteMenu(selectTagRoute, "right");
+      break;
+    case 4:
+      // 关闭其他标签页
+      deleteMenu(selectTagRoute, "other");
+      break;
+    case 5:
+      // 关闭全部标签页
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex: 1,
+        length: multiTags.value.length
+      });
+      router.push(topPath);
+      handleAliveRoute(route as ToRouteType);
+      break;
+    case 6:
+      // 整体页面全屏
+      toggle();
+      setTimeout(() => {
+        if (isFullscreen.value) {
+          tagsViews[6].icon = ExitFullscreen;
+          tagsViews[6].text = "退出全屏";
+        } else {
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = "全屏";
+        }
+      }, 100);
+      break;
+    case 7:
+      // 内容区全屏
+      onContentFullScreen();
+      setTimeout(() => {
+        if (pureSetting.hiddenSideBar) {
+          tagsViews[7].icon = ExitFullscreen;
+          tagsViews[7].text = "内容区退出全屏";
+        } else {
+          tagsViews[7].icon = Fullscreen;
+          tagsViews[7].text = "内容区全屏";
+        }
+      }, 100);
+      break;
+  }
+  setTimeout(() => {
+    showMenuModel(route.fullPath, route.query);
+  });
+}
+
+function handleCommand(command: any) {
+  const { key, item } = command;
+  onClickDrop(key, item);
+}
+
+/** 触发右键中菜单的点击事件 */
+function selectTag(key, item) {
+  onClickDrop(key, item, currentSelect.value);
+}
+
+function showMenus(value: boolean) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].show = value;
+  });
+}
+
+function disabledMenus(value: boolean) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].disabled = value;
+  });
+}
+
+/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
+function showMenuModel(
+  currentPath: string,
+  query: object = {},
+  refresh = false
+) {
+  const allRoute = multiTags.value;
+  const routeLength = multiTags.value.length;
+  let currentIndex = -1;
+  if (isAllEmpty(query)) {
+    currentIndex = allRoute.findIndex(v => v.path === currentPath);
+  } else {
+    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
+  }
+
+  showMenus(true);
+
+  if (refresh) {
+    tagsViews[0].show = true;
+  }
+
+  /**
+   * currentIndex为1时，左侧的菜单顶级菜单，则不显示关闭左侧标签页
+   * 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+   */
+  if (currentIndex === 1 && routeLength !== 2) {
+    // 左侧的菜单是顶级菜单，右侧存在别的菜单
+    tagsViews[2].show = false;
+    Array.of(1, 3, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[2].disabled = true;
+  } else if (currentIndex === 1 && routeLength === 2) {
+    disabledMenus(false);
+    // 左侧的菜单是顶级菜单，右侧不存在别的菜单
+    Array.of(2, 3, 4).forEach(v => {
+      tagsViews[v].show = false;
+      tagsViews[v].disabled = true;
+    });
+  } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
+    // 当前路由是所有路由中的最后一个
+    tagsViews[3].show = false;
+    Array.of(1, 2, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[3].disabled = true;
+  } else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
+    // 当前路由为顶级菜单
+    disabledMenus(true);
+  } else {
+    disabledMenus(false);
+  }
+}
+
+function openMenu(tag, e) {
+  closeMenu();
+  if (tag.path === topPath) {
+    // 右键菜单为顶级菜单，只显示刷新
+    showMenus(false);
+    tagsViews[0].show = true;
+  } else if (route.path !== tag.path && route.name !== tag.name) {
+    // 右键菜单不匹配当前路由，隐藏刷新
+    tagsViews[0].show = false;
+    showMenuModel(tag.path, tag.query);
+  } else if (
+    // eslint-disable-next-line no-dupe-else-if
+    multiTags.value.length === 2 &&
+    route.path !== tag.path
+  ) {
+    showMenus(true);
+    // 只有两个标签时不显示关闭其他标签页
+    tagsViews[4].show = false;
+  } else if (route.path === tag.path) {
+    // 右键当前激活的菜单
+    showMenuModel(tag.path, tag.query, true);
+  }
+
+  currentSelect.value = tag;
+  const menuMinWidth = 105;
+  const offsetLeft = unref(containerDom).getBoundingClientRect().left;
+  const offsetWidth = unref(containerDom).offsetWidth;
+  const maxLeft = offsetWidth - menuMinWidth;
+  const left = e.clientX - offsetLeft + 5;
+  if (left > maxLeft) {
+    buttonLeft.value = maxLeft;
+  } else {
+    buttonLeft.value = left;
+  }
+  useSettingStoreHook().hiddenSideBar
+    ? (buttonTop.value = e.clientY)
+    : (buttonTop.value = e.clientY - 40);
+  nextTick(() => {
+    visible.value = true;
+  });
+}
+
+/** 触发tags标签切换 */
+function tagOnClick(item) {
+  const { name, path } = item;
+  if (name) {
+    if (item.query) {
+      router.push({
+        name,
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
+    } else {
+      router.push({ name });
+    }
+  } else {
+    router.push({ path });
+  }
+  // showMenuModel(item?.path, item?.query);
+}
+
+watch(route, () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+watch(isFullscreen, () => {
+  tagsViews[6].icon = Fullscreen;
+  tagsViews[6].text = "全屏";
+});
+
+onMounted(() => {
+  if (!instance) return;
+
+  // 根据当前路由初始化操作标签页的禁用状态
+  showMenuModel(route.fullPath);
+
+  // 触发隐藏标签页
+  emitter.on("tagViewsChange", (key: any) => {
+    if (unref(showTags as any) === key) return;
+    (showTags as any).value = key;
+  });
+
+  // 改变标签风格
+  emitter.on("tagViewsShowModel", key => {
+    showModel.value = key;
+  });
+
+  //  接收侧边栏切换传递过来的参数
+  emitter.on("changLayoutRoute", indexPath => {
+    dynamicRouteTag(indexPath);
+    setTimeout(() => {
+      showMenuModel(indexPath);
+    });
+  });
+
+  useResizeObserver(
+    scrollbarDom,
+    debounce(() => dynamicTagView())
+  );
+});
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off("tagViewsChange");
+  emitter.off("tagViewsShowModel");
+  emitter.off("changLayoutRoute");
+});
+</script>
+
+<template>
+  <div ref="containerDom" class="tags-view" v-if="!showTags">
+    <span v-show="isShowArrow" class="arrow-left">
+      <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
+    </span>
+    <div ref="scrollbarDom" class="scroll-container">
+      <div class="tab select-none" ref="tabDom" :style="getTabStyle">
+        <div
+          :ref="'dynamic' + index"
+          v-for="(item, index) in multiTags"
+          :key="index"
+          :class="[
+            'scroll-item is-closable',
+            linkIsActive(item),
+            route.path === item.path && showModel === 'card'
+              ? 'card-active'
+              : ''
+          ]"
+          @contextmenu.prevent="openMenu(item, $event)"
+          @mouseenter.prevent="onMouseenter(index)"
+          @mouseleave.prevent="onMouseleave(index)"
+          @click="tagOnClick(item)"
+        >
+          <router-link
+            :to="item.path"
+            class="dark:!text-text_color_primary dark:hover:!text-primary"
+          >
+            {{ item.meta.title }}
+          </router-link>
+          <span
+            v-if="
+              iconIsActive(item, index) ||
+              (index === activeIndex && index !== 0)
+            "
+            class="el-icon-close"
+            @click.stop="deleteMenu(item)"
+          >
+            <IconifyIconOffline :icon="CloseBold" />
+          </span>
+          <div
+            :ref="'schedule' + index"
+            v-if="showModel !== 'card'"
+            :class="[scheduleIsActive(item)]"
+          />
+        </div>
+      </div>
+    </div>
+    <span v-show="isShowArrow" class="arrow-right">
+      <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
+    </span>
+    <!-- 右键菜单按钮 -->
+    <transition name="el-zoom-in-top">
+      <ul
+        v-show="visible"
+        :key="Math.random()"
+        :style="getContextMenuStyle"
+        class="contextmenu"
+      >
+        <div
+          v-for="(item, key) in tagsViews.slice(0, 6)"
+          :key="key"
+          style="display: flex; align-items: center"
+        >
+          <li v-if="item.show" @click="selectTag(key, item)">
+            <IconifyIconOffline :icon="item.icon" />
+            {{ item.text }}
+          </li>
+        </div>
+      </ul>
+    </transition>
+    <!-- 右侧功能按钮 -->
+    <el-dropdown
+      trigger="click"
+      placement="bottom-end"
+      @command="handleCommand"
+    >
+      <span class="arrow-down">
+        <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="(item, key) in tagsViews"
+            :key="key"
+            :command="{ key, item }"
+            :divided="item.divided"
+            :disabled="item.disabled"
+          >
+            <IconifyIconOffline :icon="item.icon" />
+            {{ item.text }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url("./index.scss");
+</style>