release: update 5.1.0

2025-11-12 13:43:39 +08:00 · 2024-03-09 16:27:52 +08:00
parent ff27074ebd
commit 1121c5a2b5
148 changed files with 8005 additions and 8352 deletions
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import Footer from "./footer/index.vue";
 import { useGlobal } from "@pureadmin/utils";
+import KeepAliveFrame from "./keepAliveFrame/index.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -10,7 +12,7 @@ const props = defineProps({

 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();

-const keepAlive = computed(() => {
+const isKeepAlive = computed(() => {
  return $config?.KeepAlive;
 });

@@ -24,6 +26,10 @@ const hideTabs = computed(() => {
  return $storage?.configure.hideTabs;
 });

+const hideFooter = computed(() => {
+  return $storage?.configure.hideFooter;
+});
+
 const layout = computed(() => {
  return $storage?.layout.layout === "vertical";
 });
@@ -32,30 +38,40 @@ 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: 48px;" : "",
    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
-    props.fixedHeader ? "" : "padding-top: 0;"
+    props.fixedHeader
+      ? ""
+      : `padding-top: 0;${
+          hideTabs.value
+            ? "min-height: calc(100vh - 48px);"
+            : "min-height: calc(100vh - 86px);"
+        }`
  ];
 });

 const transitionMain = defineComponent({
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  },
  render() {
+    const transitionName =
+      transitions.value(this.route)?.name || "fade-transform";
+    const enterTransition = transitions.value(this.route)?.enterTransition;
+    const leaveTransition = transitions.value(this.route)?.leaveTransition;
    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}`,
+        name: enterTransition ? "pure-classes-transition" : transitionName,
+        enterActiveClass: enterTransition
+          ? `animate__animated ${enterTransition}`
+          : undefined,
+        leaveActiveClass: leaveTransition
+          ? `animate__animated ${leaveTransition}`
+          : undefined,
        mode: "out-in",
        appear: true
      },
@@ -63,12 +79,6 @@ const transitionMain = defineComponent({
        default: () => [this.$slots.default()]
      }
    );
-  },
-  props: {
-    route: {
-      type: undefined,
-      required: true
-    }
  }
 });
 </script>
@@ -80,51 +90,80 @@ const transitionMain = defineComponent({
  >
    <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"
+        <KeepAliveFrame :currComp="Component" :currRoute="route">
+          <template #default="{ Comp, fullPath, frameInfo }">
+            <el-scrollbar
+              v-if="props.fixedHeader"
+              :wrap-style="{
+                display: 'flex',
+                'flex-wrap': 'wrap'
+              }"
+              :view-style="{
+                display: 'flex',
+                flex: 'auto',
+                overflow: 'auto',
+                'flex-direction': 'column'
+              }"
            >
-              <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>
+              <el-backtop
+                title="回到顶部"
+                target=".app-main .el-scrollbar__wrap"
+              >
+                <backTop />
+              </el-backtop>
+              <div class="grow">
+                <transitionMain :route="route">
+                  <keep-alive
+                    v-if="isKeepAlive"
+                    :include="usePermissionStoreHook().cachePageList"
+                  >
+                    <component
+                      :is="Comp"
+                      :key="fullPath"
+                      :frameInfo="frameInfo"
+                      class="main-content"
+                    />
+                  </keep-alive>
+                  <component
+                    :is="Comp"
+                    v-else
+                    :key="fullPath"
+                    :frameInfo="frameInfo"
+                    class="main-content"
+                  />
+                </transitionMain>
+              </div>
+              <Footer v-if="!hideFooter" />
+            </el-scrollbar>
+            <div v-else class="grow">
+              <transitionMain :route="route">
+                <keep-alive
+                  v-if="isKeepAlive"
+                  :include="usePermissionStoreHook().cachePageList"
+                >
+                  <component
+                    :is="Comp"
+                    :key="fullPath"
+                    :frameInfo="frameInfo"
+                    class="main-content"
+                  />
+                </keep-alive>
+                <component
+                  :is="Comp"
+                  v-else
+                  :key="fullPath"
+                  :frameInfo="frameInfo"
+                  class="main-content"
+                />
+              </transitionMain>
+            </div>
+          </template>
+        </KeepAliveFrame>
      </template>
    </router-view>
+
+    <!-- 页脚 -->
+    <Footer v-if="!hideFooter && !props.fixedHeader" />
  </section>
 </template>

@@ -138,8 +177,9 @@ const transitionMain = defineComponent({

 .app-main-nofixed-header {
  position: relative;
+  display: flex;
+  flex-direction: column;
  width: 100%;
-  min-height: 100vh;
 }

 .main-content {
--- a/src/layout/components/footer/index.vue
+++ b/src/layout/components/footer/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { getConfig } from "@/config";
+
+const TITLE = getConfig("Title");
+</script>
+
+<template>
+  <footer
+    class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
+  >
+    Copyright © 2020-present
+    <a
+      class="hover:text-primary"
+      href="https://github.com/pure-admin"
+      target="_blank"
+    >
+      &nbsp;{{ TITLE }}
+    </a>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 0 8px;
+  font-size: 14px;
+}
+</style>
--- a/src/layout/components/keepAliveFrame/index.vue
+++ b/src/layout/components/keepAliveFrame/index.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { getConfig } from "@/config";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { type Component, shallowRef, watch, computed } from "vue";
+import { type RouteRecordRaw, RouteLocationNormalizedLoaded } from "vue-router";
+import { useMultiFrame } from "@/layout/components/keepAliveFrame/useMultiFrame";
+
+const props = defineProps<{
+  currRoute: RouteLocationNormalizedLoaded;
+  currComp: Component;
+}>();
+
+const compList = shallowRef([]);
+const { setMap, getMap, MAP, delMap } = useMultiFrame();
+
+const keep = computed(() => {
+  return (
+    getConfig().KeepAlive &&
+    props.currRoute.meta?.keepAlive &&
+    !!props.currRoute.meta?.frameSrc
+  );
+});
+// 避免重新渲染 frameView
+const normalComp = computed(() => !keep.value && props.currComp);
+
+watch(useMultiTagsStoreHook().multiTags, (tags: any) => {
+  if (!Array.isArray(tags) || !keep.value) {
+    return;
+  }
+  const iframeTags = tags.filter(i => i.meta?.frameSrc);
+  // tags必须是小于MAP，才是做了关闭动作，因为MAP插入的顺序在tags变化后发生
+  if (iframeTags.length < MAP.size) {
+    for (const i of MAP.keys()) {
+      if (!tags.some(s => s.path === i)) {
+        delMap(i);
+        compList.value = getMap();
+      }
+    }
+  }
+});
+
+watch(
+  () => props.currRoute.fullPath,
+  path => {
+    const multiTags = useMultiTagsStoreHook().multiTags as RouteRecordRaw[];
+    const iframeTags = multiTags.filter(i => i.meta?.frameSrc);
+    if (keep.value) {
+      if (iframeTags.length !== MAP.size) {
+        const sameKey = [...MAP.keys()].find(i => path === i);
+        if (!sameKey) {
+          // 添加缓存
+          setMap(path, props.currComp);
+        }
+      }
+    }
+
+    if (MAP.size > 0) {
+      compList.value = getMap();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+<template>
+  <template v-for="[fullPath, Comp] in compList" :key="fullPath">
+    <div v-show="fullPath === props.currRoute.fullPath" class="w-full h-full">
+      <slot
+        :fullPath="fullPath"
+        :Comp="Comp"
+        :frameInfo="{ frameSrc: currRoute.meta?.frameSrc, fullPath }"
+      />
+    </div>
+  </template>
+  <div v-show="!keep" class="w-full h-full">
+    <slot :Comp="normalComp" :fullPath="props.currRoute.fullPath" frameInfo />
+  </div>
+</template>
--- a/src/layout/components/keepAliveFrame/useMultiFrame.ts
+++ b/src/layout/components/keepAliveFrame/useMultiFrame.ts
@@ -0,0 +1,25 @@
+const MAP = new Map();
+
+export const useMultiFrame = () => {
+  function setMap(path, Comp) {
+    MAP.set(path, Comp);
+  }
+
+  function getMap(path?) {
+    if (path) {
+      return MAP.get(path);
+    }
+    return [...MAP.entries()];
+  }
+
+  function delMap(path) {
+    MAP.delete(path);
+  }
+
+  return {
+    setMap,
+    getMap,
+    delMap,
+    MAP
+  };
+};
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -22,9 +22,7 @@ const {
 </script>

 <template>
-  <div
-    class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
-  >
+  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
    <topCollapse
      v-if="device === 'mobile'"
      class="hamburger-container"
@@ -41,7 +39,7 @@ const {

    <div v-if="layout === 'vertical'" class="vertical-header-right">
      <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
      <!-- 通知 -->
      <Notice id="header-notice" />
      <!-- 退出登录 -->
--- a/src/layout/components/notice/data.ts
+++ b/src/layout/components/notice/data.ts
@@ -4,7 +4,7 @@ export interface ListItem {
  datetime: string;
  type: string;
  description: string;
-  status?: "" | "success" | "warning" | "info" | "danger";
+  status?: "primary" | "success" | "warning" | "info" | "danger";
  extra?: string;
 }

@@ -103,7 +103,7 @@ export const noticesData: TabItem[] = [
  },
  {
    key: "3",
-    name: "代办",
+    name: "待办",
    list: [
      {
        avatar: "",
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -23,8 +23,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
    <template #dropdown>
      <el-dropdown-menu>
        <el-tabs
-          :stretch="true"
          v-model="activeKey"
+          :stretch="true"
          class="dropdown-tabs"
          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
        >
--- a/src/layout/components/notice/noticeList.vue
+++ b/src/layout/components/notice/noticeList.vue
@@ -15,9 +15,9 @@ const props = defineProps({
  <div v-if="props.list.length">
    <NoticeItem
      v-for="(item, index) in props.list"
-      :noticeItem="item"
      :key="index"
+      :noticeItem="item"
    />
  </div>
-  <el-empty v-else description="暂无数据" />
+  <el-empty v-else description="暂无消息" />
 </template>
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -2,6 +2,7 @@
 import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
 import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import Close from "@iconify-icons/ep/close";

 const target = ref(null);
@@ -9,10 +10,12 @@ const show = ref<Boolean>(false);

 const iconClass = computed(() => {
  return [
-    "mr-[20px]",
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
    "outline-none",
-    "width-[20px]",
-    "height-[20px]",
    "rounded-[4px]",
    "cursor-pointer",
    "transition-colors",
@@ -22,6 +25,8 @@ const iconClass = computed(() => {
  ];
 });

+const { onReset } = useDataThemeChange();
+
 onClickOutside(target, (event: any) => {
  if (event.clientX > target.value.offsetLeft) return;
  show.value = false;
@@ -40,40 +45,60 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div :class="{ show: show }" class="right-panel-container">
+  <div :class="{ show }">
    <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]"
-        />
+      <div
+        class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <h4 class="dark:text-white">项目配置</h4>
+        <span
+          v-tippy="{
+            content: '关闭配置',
+            placement: 'bottom-start',
+            zIndex: 41000
+          }"
+          :class="iconClass"
+        >
+          <IconifyIconOffline
+            class="dark:text-white"
+            width="18px"
+            height="18px"
+            :icon="Close"
+            @click="show = !show"
+          />
+        </span>
+      </div>
+      <el-scrollbar>
        <slot />
+      </el-scrollbar>
+
+      <div
+        class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <el-button
+          v-tippy="{
+            content: '清空缓存并返回登录页',
+            placement: 'left-start',
+            zIndex: 41000
+          }"
+          type="danger"
+          text
+          bg
+          @click="onReset"
+        >
+          清空缓存
+        </el-button>
      </div>
    </div>
  </div>
 </template>

-<style>
-.showright-panel {
-  position: relative;
-  width: calc(100% - 15px);
-  overflow: hidden;
-}
-</style>
-
 <style lang="scss" scoped>
+:deep(.el-scrollbar) {
+  height: calc(100vh - 110px);
+}
+
 .right-panel-background {
  position: fixed;
  top: 0;
@@ -90,8 +115,7 @@ onBeforeUnmount(() => {
  right: 0;
  z-index: 40000;
  width: 100%;
-  max-width: 315px;
-  height: 100vh;
+  max-width: 280px;
  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%);
@@ -112,47 +136,10 @@ onBeforeUnmount(() => {
  }
 }

-.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;
+  padding: 14px 20px;
 }
 </style>
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -1,9 +1,9 @@
 <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";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";

 const props = withDefaults(defineProps<{ total: number }>(), {
  total: 0
@@ -50,7 +50,9 @@ const { device } = useNav();
    padding: 2px;
    margin-right: 3px;
    font-size: 20px;
-    box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
+    box-shadow:
+      inset 0 -2px #cdcde6,
+      inset 0 0 1px 1px #fff,
      0 1px 2px 1px #1e235a66;
  }

--- a/src/layout/components/search/components/SearchHistory.vue
+++ b/src/layout/components/search/components/SearchHistory.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import SearchHistoryItem from "./SearchHistoryItem.vue";
+import type { optionsItem, dragItem, Props } from "../types";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useResizeObserver, isArray, delay } from "@pureadmin/utils";
+import { ref, watch, nextTick, computed, getCurrentInstance } from "vue";
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+  (e: "collect", val: optionsItem): void;
+  (e: "delete", val: optionsItem): void;
+  (e: "drag", val: dragItem): void;
+}
+
+const historyRef = ref();
+const innerHeight = ref();
+/** 判断是否停止鼠标移入事件处理 */
+const stopMouseEvent = ref(false);
+
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});
+
+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 titleStyle = computed(() => {
+  return {
+    color: useEpThemeStoreHook().epThemeColor,
+    fontWeight: 500
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) {
+      if (stopMouseEvent.value) {
+        delay(100).then(() => (stopMouseEvent.value = false));
+      }
+    }
+  }
+);
+
+const historyList = computed(() => {
+  return props.options.filter(item => item.type === "history");
+});
+
+const collectList = computed(() => {
+  return props.options.filter(item => item.type === "collect");
+});
+
+function handleCollect(item) {
+  emit("collect", item);
+}
+
+function handleDelete(item) {
+  stopMouseEvent.value = true;
+  emit("delete", item);
+}
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  if (!stopMouseEvent.value) 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(historyRef, resizeResult);
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`historyItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = isArray(curInstance)
+    ? (curInstance[0] as ElRef)
+    : (curInstance as ElRef);
+  const scrollTop = curRef.offsetTop + 128; // 128 两个history-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+const handleChangeIndex = (evt): void => {
+  emit("drag", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+};
+
+let sortableInstance = null;
+
+watch(
+  collectList,
+  val => {
+    if (val.length > 1) {
+      nextTick(() => {
+        const wrapper: HTMLElement =
+          document.querySelector(".collect-container");
+        if (!wrapper || sortableInstance) return;
+        sortableInstance = Sortable.create(wrapper, {
+          animation: 160,
+          onStart: event => {
+            event.item.style.cursor = "move";
+          },
+          onEnd: event => {
+            event.item.style.cursor = "pointer";
+          },
+          onUpdate: handleChangeIndex
+        });
+        resizeResult();
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="historyRef" class="history">
+    <template v-if="historyList.length">
+      <div :style="titleStyle">搜索历史</div>
+      <div
+        v-for="(item, index) in historyList"
+        :key="item.path"
+        :ref="'historyItemRef' + index"
+        class="history-item dark:bg-[#1d1d1d]"
+        :style="itemStyle(item)"
+        @click="handleTo"
+        @mouseenter="handleMouse(item)"
+      >
+        <SearchHistoryItem
+          :item="item"
+          @delete-item="handleDelete"
+          @collect-item="handleCollect"
+        />
+      </div>
+    </template>
+    <template v-if="collectList.length">
+      <div :style="titleStyle">
+        收藏{{ collectList.length > 1 ? "（可拖拽排序）" : "" }}
+      </div>
+      <div class="collect-container">
+        <div
+          v-for="(item, index) in collectList"
+          :key="item.path"
+          :ref="'historyItemRef' + (index + historyList.length)"
+          class="history-item dark:bg-[#1d1d1d]"
+          :style="itemStyle(item)"
+          @click="handleTo"
+          @mouseenter="handleMouse(item)"
+        >
+          <SearchHistoryItem :item="item" @delete-item="handleDelete" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.history {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin: 8px auto 10px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: font-size 0.16s;
+  }
+}
+</style>
--- a/src/layout/components/search/components/SearchHistoryItem.vue
+++ b/src/layout/components/search/components/SearchHistoryItem.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { optionsItem } from "../types";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Star from "@iconify-icons/ep/star";
+import Close from "@iconify-icons/ep/close";
+
+interface Props {
+  item: optionsItem;
+}
+
+interface Emits {
+  (e: "collectItem", val: optionsItem): void;
+  (e: "deleteItem", val: optionsItem): void;
+}
+
+const emit = defineEmits<Emits>();
+withDefaults(defineProps<Props>(), {});
+
+function handleCollect(item) {
+  emit("collectItem", item);
+}
+
+function handleDelete(item) {
+  emit("deleteItem", item);
+}
+</script>
+
+<template>
+  <component :is="useRenderIcon(item.meta?.icon)" />
+  <span class="history-item-title">
+    {{ item.meta?.title }}
+  </span>
+  <IconifyIconOffline
+    v-show="item.type === 'history'"
+    :icon="Star"
+    class="w-[18px] h-[18px] mr-2 hover:text-[#d7d5d4]"
+    @click.stop="handleCollect(item)"
+  />
+  <IconifyIconOffline
+    :icon="Close"
+    class="w-[18px] h-[18px] hover:text-[#d7d5d4] cursor-pointer"
+    @click.stop="handleDelete(item)"
+  />
+</template>
+
+<style lang="scss" scoped>
+.history-item-title {
+  display: flex;
+  flex: 1;
+  margin-left: 5px;
+}
+</style>
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { match } from "pinyin-pro";
+import { getConfig } from "@/config";
 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 SearchHistory from "./SearchHistory.vue";
+import type { optionsItem, dragItem } from "../types";
+import { ref, computed, shallowRef, watch } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
 import Search from "@iconify-icons/ri/search-line";

 interface Props {
@@ -22,15 +25,25 @@ interface Emits {
 const { device } = useNav();
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
+
 const router = useRouter();

+const HISTORY_TYPE = "history";
+const COLLECT_TYPE = "collect";
+const LOCALEHISTORYKEY = "menu-search-history";
+const LOCALECOLLECTKEY = "menu-search-collect";
+
 const keyword = ref("");
-const scrollbarRef = ref();
 const resultRef = ref();
+const historyRef = ref();
+const scrollbarRef = ref();
 const activePath = ref("");
-const inputRef = ref<HTMLInputElement | null>(null);
+const historyPath = ref("");
 const resultOptions = shallowRef([]);
+const historyOptions = shallowRef([]);
 const handleSearch = useDebounceFn(search, 300);
+const historyNum = getConfig().MenuSearchHistory;
+const inputRef = ref<HTMLInputElement | null>(null);

 /** 菜单树形结构 */
 const menusData = computed(() => {
@@ -46,6 +59,36 @@ const show = computed({
  }
 });

+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) getHistory();
+  }
+);
+
+const showSearchResult = computed(() => {
+  return keyword.value && resultOptions.value.length > 0;
+});
+
+const showSearchHistory = computed(() => {
+  return !keyword.value && historyOptions.value.length > 0;
+});
+
+const showEmpty = computed(() => {
+  return (
+    (!keyword.value && historyOptions.value.length === 0) ||
+    (keyword.value && resultOptions.value.length === 0)
+  );
+});
+
+function getStorageItem(key) {
+  return storageLocal().getItem<optionsItem[]>(key) || [];
+}
+
+function setStorageItem(key, value) {
+  storageLocal().setItem(key, value);
+}
+
 /** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
 function flatTree(arr) {
  const res = [];
@@ -75,11 +118,8 @@ function search() {
        )
      : false
  );
-  if (resultOptions.value?.length > 0) {
-    activePath.value = resultOptions.value[0].path;
-  } else {
-    activePath.value = "";
-  }
+  activePath.value =
+    resultOptions.value?.length > 0 ? resultOptions.value[0].path : "";
 }

 function handleClose() {
@@ -87,54 +127,143 @@ function handleClose() {
  /** 延时处理防止用户看到某些操作 */
  setTimeout(() => {
    resultOptions.value = [];
+    historyPath.value = "";
    keyword.value = "";
  }, 200);
 }

 function scrollTo(index) {
-  const scrollTop = resultRef.value.handleScroll(index);
+  const ref = resultOptions.value.length ? resultRef.value : historyRef.value;
+  const scrollTop = ref.handleScroll(index);
  scrollbarRef.value.setScrollTop(scrollTop);
 }

+/** 获取当前选项和路径 */
+function getCurrentOptionsAndPath() {
+  const isResultOptions = resultOptions.value.length > 0;
+  const options = isResultOptions ? resultOptions.value : historyOptions.value;
+  const currentPath = isResultOptions ? activePath.value : historyPath.value;
+  return { options, currentPath, isResultOptions };
+}
+
+/** 更新路径并滚动到指定项 */
+function updatePathAndScroll(newIndex, isResultOptions) {
+  if (isResultOptions) {
+    activePath.value = resultOptions.value[newIndex].path;
+  } else {
+    historyPath.value = historyOptions.value[newIndex].path;
+  }
+  scrollTo(newIndex);
+}
+
 /** 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);
-  }
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const prevIndex = (index - 1 + options.length) % options.length;
+  updatePathAndScroll(prevIndex, isResultOptions);
 }

 /** 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);
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const nextIndex = (index + 1) % options.length;
+  updatePathAndScroll(nextIndex, isResultOptions);
 }

 /** key enter */
 function handleEnter() {
-  const { length } = resultOptions.value;
-  if (length === 0 || activePath.value === "") return;
-  router.push(activePath.value);
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0 || currentPath === "") return;
+  const index = options.findIndex(item => item.path === currentPath);
+  if (index === -1) return;
+  if (isResultOptions) {
+    saveHistory();
+  } else {
+    updateHistory();
+  }
+  router.push(options[index].path);
  handleClose();
 }

+/** 删除历史记录 */
+function handleDelete(item) {
+  const key = item.type === HISTORY_TYPE ? LOCALEHISTORYKEY : LOCALECOLLECTKEY;
+  let list = getStorageItem(key);
+  list = list.filter(listItem => listItem.path !== item.path);
+  setStorageItem(key, list);
+  getHistory();
+}
+
+/** 收藏历史记录 */
+function handleCollect(item) {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  let searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  searchHistoryList = searchHistoryList.filter(
+    historyItem => historyItem.path !== item.path
+  );
+  setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  if (!searchCollectList.some(collectItem => collectItem.path === item.path)) {
+    searchCollectList.unshift({ ...item, type: COLLECT_TYPE });
+    setStorageItem(LOCALECOLLECTKEY, searchCollectList);
+  }
+  getHistory();
+}
+
+/** 存储搜索记录 */
+function saveHistory() {
+  const { path, meta } = resultOptions.value.find(
+    item => item.path === activePath.value
+  );
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const isCollected = searchCollectList.some(item => item.path === path);
+  const existingIndex = searchHistoryList.findIndex(item => item.path === path);
+  if (!isCollected) {
+    if (existingIndex !== -1) searchHistoryList.splice(existingIndex, 1);
+    if (searchHistoryList.length >= historyNum) searchHistoryList.pop();
+    searchHistoryList.unshift({ path, meta, type: HISTORY_TYPE });
+    storageLocal().setItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 更新存储的搜索记录 */
+function updateHistory() {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const historyIndex = searchHistoryList.findIndex(
+    item => item.path === historyPath.value
+  );
+  if (historyIndex !== -1) {
+    const [historyItem] = searchHistoryList.splice(historyIndex, 1);
+    searchHistoryList.unshift(historyItem);
+    setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 获取本地历史记录 */
+function getHistory() {
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  historyOptions.value = [...searchHistoryList, ...searchCollectList];
+  historyPath.value = historyOptions.value[0]?.path;
+}
+
+/** 拖拽改变收藏顺序 */
+function handleDrag(item: dragItem) {
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const [reorderedItem] = searchCollectList.splice(item.oldIndex, 1);
+  searchCollectList.splice(item.newIndex, 0, reorderedItem);
+  storageLocal().setItem(LOCALECOLLECTKEY, searchCollectList);
+  historyOptions.value = [
+    ...getStorageItem(LOCALEHISTORYKEY),
+    ...getStorageItem(LOCALECOLLECTKEY)
+  ];
+  historyPath.value = reorderedItem.path;
+}
+
 onKeyStroke("Enter", handleEnter);
 onKeyStroke("ArrowUp", handleUp);
 onKeyStroke("ArrowDown", handleDown);
@@ -142,9 +271,9 @@ onKeyStroke("ArrowDown", handleDown);

 <template>
  <el-dialog
+    v-model="show"
    top="5vh"
    class="pure-search-dialog"
-    v-model="show"
    :show-close="false"
    :width="device === 'mobile' ? '80vw' : '40vw'"
    :before-close="handleClose"
@@ -157,10 +286,10 @@ onKeyStroke("ArrowDown", handleDown);
  >
    <el-input
      ref="inputRef"
-      size="large"
      v-model="keyword"
+      size="large"
      clearable
-      placeholder="搜索菜单"
+      placeholder="搜索菜单（支持拼音搜索）"
      @input="handleSearch"
    >
      <template #prefix>
@@ -170,14 +299,21 @@ onKeyStroke("ArrowDown", handleDown);
        />
      </template>
    </el-input>
-    <div class="search-result-container">
+    <div class="search-content">
      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
-        <el-empty
-          v-if="resultOptions.length === 0"
-          description="暂无搜索结果"
+        <el-empty v-if="showEmpty" description="暂无搜索结果" />
+        <SearchHistory
+          v-if="showSearchHistory"
+          ref="historyRef"
+          v-model:value="historyPath"
+          :options="historyOptions"
+          @click="handleEnter"
+          @delete="handleDelete"
+          @collect="handleCollect"
+          @drag="handleDrag"
        />
        <SearchResult
-          v-else
+          v-if="showSearchResult"
          ref="resultRef"
          v-model:value="activePath"
          :options="resultOptions"
@@ -192,7 +328,7 @@ onKeyStroke("ArrowDown", handleDown);
 </template>

 <style lang="scss" scoped>
-.search-result-container {
+.search-content {
  margin-top: 12px;
 }
 </style>
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -1,23 +1,10 @@
 <script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core";
+import type { Props } from "../types";
+import { useResizeObserver } from "@pureadmin/utils";
 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;
@@ -26,9 +13,9 @@ interface Emits {

 const resultRef = ref();
 const innerHeight = ref();
-const props = withDefaults(defineProps<Props>(), {});
 const emit = defineEmits<Emits>();
 const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});

 const itemStyle = computed(() => {
  return item => {
@@ -64,9 +51,7 @@ function resizeResult() {
  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
 }

-useResizeObserver(resultRef, () => {
-  resizeResult();
-});
+useResizeObserver(resultRef, resizeResult);

 function handleScroll(index: number) {
  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
@@ -94,8 +79,10 @@ defineExpose({ handleScroll });
      @click="handleTo"
      @mouseenter="handleMouse(item)"
    >
-      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
-      <span class="result-item-title">{{ item.meta?.title }}</span>
+      <component :is="useRenderIcon(item.meta?.icon)" />
+      <span class="result-item-title">
+        {{ item.meta?.title }}
+      </span>
      <enterOutlined />
    </div>
  </div>
@@ -114,7 +101,7 @@ defineExpose({ handleScroll });
    cursor: pointer;
    border: 0.1px solid #ccc;
    border-radius: 4px;
-    transition: all 0.3s;
+    transition: font-size 0.16s;

    &-title {
      display: flex;
--- a/src/layout/components/search/index.vue
+++ b/src/layout/components/search/index.vue
@@ -1,7 +1,6 @@
 <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() {
@@ -10,11 +9,13 @@ function handleSearch() {
 </script>

 <template>
-  <div
-    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
-    @click="handleSearch"
-  >
-    <IconifyIconOffline :icon="Search" />
+  <div>
+    <div
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+      @click="handleSearch"
+    >
+      <IconifyIconOffline icon="ri:search-line" />
+    </div>
+    <SearchModal v-model:value="show" />
  </div>
-  <SearchModal v-model:value="show" />
 </template>
--- a/src/layout/components/search/types.ts
+++ b/src/layout/components/search/types.ts
@@ -0,0 +1,20 @@
+interface optionsItem {
+  path: string;
+  type: "history" | "collect";
+  meta: {
+    icon?: string;
+    title?: string;
+  };
+}
+
+interface dragItem {
+  oldIndex: number;
+  newIndex: number;
+}
+
+interface Props {
+  value: string;
+  options: Array<optionsItem>;
+}
+
+export type { optionsItem, dragItem, Props };
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -6,36 +6,26 @@ import {
  reactive,
  computed,
  nextTick,
+  onUnmounted,
  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 { useDark, useGlobal, debounce } from "@pureadmin/utils";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

+import Check from "@iconify-icons/ep/check";
 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";
+import systemIcon from "@/assets/svg/system.svg?component";

-const router = useRouter();
+const { device } = useNav();
 const { isDark } = useDark();
-const { device, tooltipEffect } = useNav();
 const { $storage } = useGlobal<GlobalPropertiesApi>();

 const mixRef = ref();
@@ -44,10 +34,11 @@ const horizontalRef = ref();

 const {
  dataTheme,
+  overallStyle,
  layoutTheme,
  themeColors,
+  toggleClass,
  dataThemeChange,
-  setEpThemeColor,
  setLayoutThemeColor
 } = useDataThemeChange();

@@ -72,6 +63,7 @@ const settings = reactive({
  tabsVal: $storage.configure.hideTabs,
  showLogo: $storage.configure.showLogo,
  showModel: $storage.configure.showModel,
+  hideFooter: $storage.configure.hideFooter,
  multiTagsCache: $storage.configure.multiTagsCache
 });

@@ -81,7 +73,7 @@ const getThemeColorStyle = computed(() => {
  };
 });

-/** 当网页为暗黑模式时不显示亮白色切换选项 */
+/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */
 const showThemeColors = computed(() => {
  return themeColor => {
    return themeColor === "light" && isDark.value ? false : true;
@@ -94,60 +86,45 @@ function storageConfigureChange<T>(key: string, val: T): void {
  $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"));
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.greyVal, "html-grey", htmlEl);
  storageConfigureChange("grey", value);
 };

 /** 色弱模式设置 */
 const weekChange = (value): void => {
-  toggleClass(
-    settings.weakVal,
-    "html-weakness",
-    document.querySelector("html")
-  );
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.weakVal, "html-weakness", htmlEl);
  storageConfigureChange("weak", value);
 };

+/** 隐藏标签页设置 */
 const tagsChange = () => {
  const showVal = settings.tabsVal;
  storageConfigureChange("hideTabs", showVal);
  emitter.emit("tagViewsChange", showVal as unknown as string);
 };

+/** 隐藏页脚设置 */
+const hideFooterChange = () => {
+  const hideFooter = settings.hideFooter;
+  storageConfigureChange("hideFooter", hideFooter);
+};
+
+/** 标签页持久化设置 */
 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);
+function onChange({ option }) {
+  const { value } = option;
+  markValue.value = value;
+  storageConfigureChange("showModel", value);
+  emitter.emit("tagViewsShowModel", value);
 }

 /** 侧边栏Logo */
@@ -183,6 +160,45 @@ const getThemeColor = computed(() => {
  };
 });

+const themeOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: "浅色",
+      icon: dayIcon,
+      theme: "light",
+      tip: "清新启航，点亮舒适的工作界面",
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    },
+    {
+      label: "深色",
+      icon: darkIcon,
+      theme: "dark",
+      tip: "月光序曲，沉醉于夜的静谧雅致",
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    },
+    {
+      label: "自动",
+      icon: systemIcon,
+      theme: "system",
+      tip: "同步时光，界面随晨昏自然呼应",
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    }
+  ];
+});
+
+const markOptions: Array<OptionsType> = [
+  {
+    label: "灵动",
+    tip: "灵动标签，添趣生辉",
+    value: "smart"
+  },
+  {
+    label: "卡片",
+    tip: "卡片标签，高效浏览",
+    value: "card"
+  }
+];
+
 /** 设置导航模式 */
 function setLayoutModel(layout: string) {
  layoutTheme.value.layout = layout;
@@ -192,7 +208,9 @@ function setLayoutModel(layout: string) {
    theme: layoutTheme.value.theme,
    darkMode: $storage.layout?.darkMode,
    sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: $storage.layout?.themeColor,
+    overallStyle: $storage.layout?.overallStyle
  };
  useAppStoreHook().setLayout(layout);
 }
@@ -217,188 +235,201 @@ watch($storage, ({ layout }) => {
  }
 });

+const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+
+/** 根据操作系统主题设置平台整体风格 */
+function updateTheme() {
+  if (overallStyle.value !== "system") return;
+  if (mediaQueryList.matches) {
+    dataTheme.value = true;
+  } else {
+    dataTheme.value = false;
+  }
+  dataThemeChange(overallStyle.value);
+}
+
+function removeMatchMedia() {
+  mediaQueryList.removeEventListener("change", updateTheme);
+}
+
+/** 监听操作系统主题改变 */
+function watchSystemThemeChange() {
+  updateTheme();
+  removeMatchMedia();
+  mediaQueryList.addEventListener("change", updateTheme);
+}
+
 onBeforeMount(() => {
  /* 初始化项目配置 */
  nextTick(() => {
+    watchSystemThemeChange();
    settings.greyVal &&
-      document.querySelector("html")?.setAttribute("class", "html-grey");
+      document.querySelector("html")?.classList.add("html-grey");
    settings.weakVal &&
-      document.querySelector("html")?.setAttribute("class", "html-weakness");
+      document.querySelector("html")?.classList.add("html-weakness");
    settings.tabsVal && tagsChange();
+    settings.hideFooter && hideFooterChange();
  });
 });
+
+onUnmounted(() => removeMatchMedia);
 </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"
-    />
+    <div class="p-6">
+      <p class="mb-3 font-medium text-sm dark:text-white">整体风格</p>
+      <Segmented
+        class="select-none"
+        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :options="themeOptions"
+        @change="
+          theme => {
+            theme.index === 1 && theme.index !== 2
+              ? (dataTheme = true)
+              : (dataTheme = false);
+            overallStyle = theme.option.theme;
+            dataThemeChange(theme.option.theme);
+            theme.index === 2 && watchSystemThemeChange();
+          }
+        "
+      />

-    <el-divider>导航栏模式</el-divider>
-    <ul class="pure-theme">
-      <el-tooltip
-        :effect="tooltipEffect"
-        class="item"
-        content="左侧模式"
-        placement="bottom"
-        popper-class="pure-tooltip"
-      >
+      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">主题色</p>
+      <ul class="theme-color">
+        <li
+          v-for="(item, index) in themeColors"
+          v-show="showThemeColors(item.themeColor)"
+          :key="index"
+          :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>
+
+      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">导航模式</p>
+      <ul class="pure-theme">
        <li
-          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
          ref="verticalRef"
+          v-tippy="{
+            content: '左侧菜单，亲切熟悉',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
          @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' : ''"
+          v-if="device !== 'mobile'"
          ref="horizontalRef"
+          v-tippy="{
+            content: '顶部菜单，简洁概览',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
          @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' : ''"
+          v-if="device !== 'mobile'"
          ref="mixRef"
+          v-tippy="{
+            content: '混合菜单，灵活多变',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
          @click="setLayoutModel('mix')"
        >
          <div />
          <div />
        </li>
-      </el-tooltip>
-    </ul>
+      </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"
+      <p class="mt-5 mb-3 font-medium text-base dark:text-white">页签风格</p>
+      <Segmented
+        class="select-none"
+        :modelValue="markValue === 'smart' ? 0 : 1"
+        :options="markOptions"
+        @change="onChange"
      />
-      清空缓存并返回登录页
-    </el-button>
+
+      <p class="mt-5 mb-1 font-medium text-sm dark:text-white">界面显示</p>
+      <ul class="setting">
+        <li>
+          <span class="dark:text-white">灰色模式</span>
+          <el-switch
+            v-model="settings.greyVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">色弱模式</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="weekChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">隐藏标签页</span>
+          <el-switch
+            v-model="settings.tabsVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="tagsChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">隐藏页脚</span>
+          <el-switch
+            v-model="settings.hideFooter"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="hideFooterChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">Logo</span>
+          <el-switch
+            v-model="logoVal"
+            inline-prompt
+            :active-value="true"
+            :inactive-value="false"
+            active-text="开"
+            inactive-text="关"
+            @change="logoChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">页签持久化</span>
+          <el-switch
+            v-model="settings.multiTagsCache"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="multiTagsCacheChange"
+          />
+        </li>
+      </ul>
+    </div>
  </panel>
 </template>

@@ -408,41 +439,41 @@ onBeforeMount(() => {
  font-weight: 700;
 }

-.is-select {
-  border: 2px solid var(--el-color-primary);
+:deep(.el-switch__core) {
+  --el-switch-off-color: var(--pure-switch-off-color);
+
+  min-width: 36px;
+  height: 18px;
 }

-.setting {
-  width: 100%;
+:deep(.el-switch__core .el-switch__action) {
+  height: 14px;
+}
+
+.theme-color {
+  height: 20px;

  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 25px;
-  }
-}
+    float: left;
+    height: 20px;
+    margin-right: 8px;
+    cursor: pointer;
+    border-radius: 4px;

-.pure-datatheme {
-  display: block;
-  width: 100%;
-  height: 50px;
-  padding-top: 25px;
-  text-align: center;
+    &:nth-child(1) {
+      border: 1px solid #ddd;
+    }
+  }
 }

 .pure-theme {
  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  width: 100%;
-  height: 50px;
-  margin-top: 25px;
+  gap: 12px;

  li {
    position: relative;
-    width: 18%;
-    height: 45px;
+    width: 46px;
+    height: 36px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f2f5;
@@ -503,27 +534,17 @@ onBeforeMount(() => {
  }
 }

-.theme-color {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
-  margin-top: 20px;
+.is-select {
+  border: 2px solid var(--el-color-primary);
+}

+.setting {
  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;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+    font-size: 14px;
  }
 }
 </style>
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { isEqual } from "@pureadmin/utils";
+import { useRoute, useRouter } from "vue-router";
 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([]);
@@ -63,12 +63,28 @@ const getBreadcrumb = (): void => {
  );
 };

-const handleLink = (item: RouteLocationMatched): void => {
-  const { redirect, path } = item;
+const handleLink = item => {
+  const { redirect, name, path } = item;
  if (redirect) {
    router.push(redirect as any);
  } else {
-    router.push(path);
+    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 });
+    }
  }
 };

@@ -91,9 +107,9 @@ watch(
  <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"
+        class="!inline !items-stretch"
      >
        <a @click.prevent="handleLink(item)">
          {{ item.meta.title }}
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -17,6 +17,7 @@ const {
  logout,
  backTopMenu,
  onPanel,
+  getLogo,
  username,
  userAvatar,
  avatarsStyle
@@ -37,13 +38,14 @@ nextTick(() => {
    class="horizontal-header"
  >
    <div class="horizontal-header-left" @click="backTopMenu">
-      <img src="/logo.svg" alt="logo" />
+      <img :src="getLogo()" alt="logo" />
      <span>{{ title }}</span>
    </div>
    <el-menu
-      router
      ref="menuRef"
+      router
      mode="horizontal"
+      popper-class="pure-scrollbar"
      class="horizontal-header-menu"
      :default-active="defaultActive"
    >
@@ -56,7 +58,7 @@ nextTick(() => {
    </el-menu>
    <div class="horizontal-header-right">
      <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
      <!-- 通知 -->
      <Notice id="header-notice" />
      <!-- 退出登录 -->
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { computed } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
+
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";

 interface Props {
@@ -11,7 +13,6 @@ const props = withDefaults(defineProps<Props>(), {
  isActive: false
 });

-const visible = ref(false);
 const { tooltipEffect } = useNav();

 const iconClass = computed(() => {
@@ -22,14 +23,14 @@ const iconClass = computed(() => {
    "h-[16px]",
    "inline-block",
    "align-middle",
-    "text-primary",
    "cursor-pointer",
-    "duration-[100ms]",
-    "hover:text-primary",
-    "dark:hover:!text-white"
+    "duration-[100ms]"
  ];
 });

+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
 const emit = defineEmits<{
  (e: "toggleClick"): void;
 }>();
@@ -40,32 +41,29 @@ const 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 class="collapse-container">
+    <IconifyIconOffline
+      v-tippy="{
+        content: props.isActive ? '点击折叠' : '点击展开',
+        theme: tooltipEffect,
+        hideOnClick: 'toggle',
+        placement: 'right'
+      }"
+      :icon="MenuFold"
+      :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
+      :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
+      @click="toggleClick"
+    />
  </div>
 </template>

 <style lang="scss" scoped>
-.container {
+.collapse-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
-  box-shadow: 0 0 6px -2px var(--el-color-primary);
+  box-shadow: 0 0 6px -3px var(--el-color-primary);
 }
 </style>
--- a/src/layout/components/sidebar/linkItem.vue
+++ b/src/layout/components/sidebar/linkItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { isUrl } from "@pureadmin/utils";
+import { menuType } from "@/layout/types";
+
+defineOptions({
+  name: "LinkItem"
+});
+
+const props = defineProps<{
+  to: menuType;
+}>();
+
+const isExternalLink = computed(() => isUrl(props.to.name));
+const getLinkProps = (item: menuType) => {
+  if (isExternalLink.value) {
+    return {
+      href: item.name,
+      target: "_blank",
+      rel: "noopener"
+    };
+  }
+  return {
+    to: item
+  };
+};
+</script>
+
+<template>
+  <component
+    :is="isExternalLink ? 'a' : 'router-link'"
+    v-bind="getLinkProps(to)"
+  >
+    <slot />
+  </component>
+</template>
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -6,7 +6,7 @@ const props = defineProps({
  collapse: Boolean
 });

-const { title } = useNav();
+const { title, getLogo } = useNav();
 </script>

 <template>
@@ -19,7 +19,7 @@ const { title } = useNav();
        class="sidebar-logo-link"
        :to="getTopMenu()?.path ?? '/'"
      >
-        <img src="/logo.svg" alt="logo" />
+        <img :src="getLogo()" alt="logo" />
        <span class="sidebar-title">{{ title }}</span>
      </router-link>
      <router-link
@@ -29,7 +29,7 @@ const { title } = useNav();
        class="sidebar-logo-link"
        :to="getTopMenu()?.path ?? '/'"
      >
-        <img src="/logo.svg" alt="logo" />
+        <img :src="getLogo()" alt="logo" />
        <span class="sidebar-title">{{ title }}</span>
      </router-link>
    </transition>
@@ -48,6 +48,7 @@ const { title } = useNav();
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
+    padding-left: 10px;

    img {
      display: inline-block;
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -54,13 +54,14 @@ watch(
 <template>
  <div
    v-if="device !== 'mobile'"
-    class="horizontal-header"
    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
  >
    <el-menu
-      router
      ref="menuRef"
+      router
      mode="horizontal"
+      popper-class="pure-scrollbar"
      class="horizontal-header-menu"
      :default-active="defaultActive"
    >
@@ -89,7 +90,7 @@ watch(
    </el-menu>
    <div class="horizontal-header-right">
      <!-- 菜单搜索 -->
-      <Search />
+      <Search id="header-search" />
      <!-- 通知 -->
      <Notice id="header-notice" />
      <!-- 退出登录 -->
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -1,17 +1,27 @@
 <script setup lang="ts">
 import path from "path";
 import { getConfig } from "@/config";
+import LinkItem from "./linkItem.vue";
 import { menuType } from "../../types";
 import extraIcon from "./extraIcon.vue";
+import { ReText } from "@/components/ReText";
 import { useNav } from "@/layout/hooks/useNav";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
+import {
+  type PropType,
+  type CSSProperties,
+  ref,
+  toRaw,
+  computed,
+  useAttrs
+} 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 attrs = useAttrs();
 const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();

 const props = defineProps({
@@ -28,29 +38,15 @@ const props = defineProps({
  }
 });

-const getSpanStyle = computed((): CSSProperties => {
-  return {
-    width: "100%",
-    textAlign: "center"
-  };
-});
-
 const getNoDropdownStyle = computed((): CSSProperties => {
  return {
+    width: "100%",
    display: "flex",
    alignItems: "center"
  };
 });

-const getMenuTextStyle = computed(() => {
-  return {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    outline: "none"
-  };
-});
-
-const getsubMenuIconStyle = computed((): CSSProperties => {
+const getSubMenuIconStyle = computed((): CSSProperties => {
  return {
    display: "flex",
    justifyContent: "center",
@@ -59,45 +55,8 @@ const getsubMenuIconStyle = computed((): CSSProperties => {
      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"
-              : ""
-        };
+          ? "0 auto"
+          : "0 5px 0 0"
  };
 });

@@ -112,41 +71,6 @@ const expandCloseIcon = computed(() => {
 });

 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) => {
@@ -181,129 +105,110 @@ function resolvePath(routePath) {
 </script>

 <template>
-  <el-menu-item
+  <link-item
    v-if="
      hasOneShowingChild(props.item.children, props.item) &&
      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
    "
-    :index="resolvePath(onlyOneChild.path)"
-    :class="{ 'submenu-title-noDropdown': !isNest }"
-    :style="getNoDropdownStyle"
+    :to="item"
  >
-    <div
-      v-if="toRaw(props.item.meta.icon)"
-      class="sub-menu-icon"
-      :style="getsubMenuIconStyle"
+    <el-menu-item
+      :index="resolvePath(onlyOneChild.path)"
+      :class="{ 'submenu-title-noDropdown': !isNest }"
+      :style="getNoDropdownStyle"
+      v-bind="attrs"
    >
-      <component
-        :is="
-          useRenderIcon(
-            toRaw(onlyOneChild.meta.icon) ||
-              (props.item.meta && toRaw(props.item.meta.icon))
-          )
+      <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>
+      <el-text
+        v-if="
+          (!props.item?.meta.icon &&
+            isCollapse &&
+            layout === 'vertical' &&
+            props.item?.pathList?.length === 1) ||
+          (!onlyOneChild.meta.icon &&
+            isCollapse &&
+            layout === 'mix' &&
+            props.item?.pathList?.length === 2)
        "
-      />
-    </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)"
+        truncated
+        class="!px-4 !text-inherit"
+      >
+        {{ onlyOneChild.meta.title }}
+      </el-text>
+
+      <template #title>
+        <div :style="getDivStyle">
+          <ReText
+            :tippyProps="{
+              offset: [0, -10],
+              theme: tooltipEffect
+            }"
+            class="!text-inherit"
          >
            {{ onlyOneChild.meta.title }}
-          </span>
-        </el-tooltip>
-        <extraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
-      </div>
-    </template>
-  </el-menu-item>
-
+          </ReText>
+          <extraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
+        </div>
+      </template>
+    </el-menu-item>
+  </link-item>
  <el-sub-menu
    v-else
    ref="subMenu"
-    v-bind="expandCloseIcon"
+    teleported
    :index="resolvePath(props.item.path)"
+    v-bind="expandCloseIcon"
  >
    <template #title>
      <div
        v-if="toRaw(props.item.meta.icon)"
-        :style="getsubMenuIconStyle"
+        :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)"
+      <ReText
        v-if="
          !(
+            layout === 'vertical' &&
            isCollapse &&
            toRaw(props.item.meta.icon) &&
            props.item.parentId === null
          )
        "
+        :tippyProps="{
+          offset: [0, -10],
+          theme: tooltipEffect
+        }"
+        :class="{
+          '!text-inherit': true,
+          '!px-4':
+            layout !== 'horizontal' &&
+            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>
+        {{ props.item.meta.title }}
+      </ReText>
+      <extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" />
    </template>
+
    <sidebar-item
      v-for="child in props.item.children"
      :key="child.path"
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -18,7 +18,14 @@ const showLogo = ref(
  )?.showLogo ?? true
 );

-const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
+const {
+  device,
+  pureApp,
+  isCollapse,
+  tooltipEffect,
+  menuSelect,
+  toggleSideBar
+} = useNav();

 const subMenuData = ref([]);

@@ -80,7 +87,7 @@ onBeforeUnmount(() => {
 <template>
  <div
    v-loading="loading"
-    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+    :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
  >
    <Logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar
@@ -91,10 +98,12 @@ onBeforeUnmount(() => {
        router
        unique-opened
        mode="vertical"
+        popper-class="pure-scrollbar"
        class="outer-most select-none"
        :collapse="isCollapse"
-        :default-active="defaultActive"
        :collapse-transition="false"
+        :popper-effect="tooltipEffect"
+        :default-active="defaultActive"
      >
        <sidebar-item
          v-for="routes in menuData"
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -18,26 +18,6 @@
  }
 }

-@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;
@@ -51,46 +31,40 @@
  .scroll-item {
    position: relative;
    display: inline-block;
-    height: 28px;
-    padding: 0 6px;
-    margin-right: 4px;
-    line-height: 28px;
+    height: 34px;
+    padding-left: 6px;
+    line-height: 34px;
    cursor: pointer;
-    border-radius: 3px 3px 0 0;
-    box-shadow: 0 0 1px #888;
    transition: all 0.4s;

+    &:not(:first-child) {
+      padding-right: 24px;
+    }
+
    .el-icon-close {
      position: absolute;
      top: 50%;
-      font-size: 10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
      color: var(--el-color-primary);
      cursor: pointer;
-      transition: font-size 0.2s;
-      transform: translate(-50%, -50%);
+      border-radius: 4px;
+      transition:
+        background-color 0.12s,
+        color 0.12s;
+      transform: translate(0, -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;
-          }
-        }
+        color: rgb(0 0 0 / 88%) !important;
+        background-color: rgb(0 0 0 / 6%);
      }
    }
  }

-  a {
+  .tag-title {
    padding: 0 4px;
    color: var(--el-text-color-primary);
    text-decoration: none;
@@ -99,7 +73,6 @@
  .scroll-container {
    position: relative;
    flex: 1;
-    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;

@@ -109,13 +82,12 @@
      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;
+          padding: 0 12px;
        }
      }
    }
@@ -195,16 +167,9 @@
 .scroll-item.is-active {
  position: relative;
  color: #fff;
+  box-shadow: 0 0 0.7px #888;

-  &:not(:first-child) {
-    padding-right: 18px;
-  }
-
-  .el-icon-close {
-    transform: translate(0, -50%);
-  }
-
-  a {
+  .tag-title {
    color: var(--el-color-primary) !important;
  }
 }
@@ -213,16 +178,16 @@
 .arrow-right,
 .arrow-down {
  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  width: 40px;
-  height: 38px;
+  height: 34px;
  color: var(--el-text-color-primary);

  svg {
-    position: absolute;
-    left: 50%;
    width: 20px;
    height: 20px;
-    transform: translate(-50%, 50%);
  }
 }

@@ -247,7 +212,7 @@
 .card-in {
  color: var(--el-color-primary);

-  a {
+  .tag-title {
    color: var(--el-color-primary);
  }
 }
@@ -257,7 +222,7 @@
  color: #666;
  border: none;

-  a {
+  .tag-title {
    color: #666;
  }
 }
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -3,21 +3,26 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
+import { useFullscreen, onClickOutside } from "@vueuse/core";
 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 {
+  delay,
+  isEqual,
+  isAllEmpty,
+  useResizeObserver
+} from "@pureadmin/utils";

 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 {
+  Close,
  route,
  router,
  visible,
@@ -32,6 +37,7 @@ const {
  pureSetting,
  activeIndex,
  getTabStyle,
+  isScrolling,
  iconIsActive,
  linkIsActive,
  currentSelect,
@@ -47,6 +53,7 @@ const {
 const tabDom = ref();
 const containerDom = ref();
 const scrollbarDom = ref();
+const contextmenuRef = ref();
 const isShowArrow = ref(false);
 const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
@@ -130,6 +137,38 @@ const handleScroll = (offset: number): void => {
      translateX.value = 0;
    }
  }
+  isScrolling.value = false;
+};
+
+const handleWheel = (event: WheelEvent): void => {
+  isScrolling.value = true;
+  const scrollIntensity = Math.abs(event.deltaX) + Math.abs(event.deltaY);
+  let offset = 0;
+  if (event.deltaX < 0) {
+    offset = scrollIntensity > 0 ? scrollIntensity : 100;
+  } else {
+    offset = scrollIntensity > 0 ? -scrollIntensity : -100;
+  }
+
+  smoothScroll(offset);
+};
+
+const smoothScroll = (offset: number): void => {
+  // 每帧滚动的距离
+  const scrollAmount = 20;
+  let remaining = Math.abs(offset);
+
+  const scrollStep = () => {
+    const scrollOffset = Math.sign(offset) * Math.min(scrollAmount, remaining);
+    handleScroll(scrollOffset);
+    remaining -= Math.abs(scrollOffset);
+
+    if (remaining > 0) {
+      requestAnimationFrame(scrollStep);
+    }
+  };
+
+  requestAnimationFrame(scrollStep);
 };

 function dynamicRouteTag(value: string): void {
@@ -140,7 +179,7 @@ function dynamicRouteTag(value: string): void {
  function concatPath(arr: object[], value: string) {
    if (!hasValue) {
      arr.forEach((arrItem: any) => {
-        if (arrItem.path === value || arrItem.path === value) {
+        if (arrItem.path === value) {
          useMultiTagsStoreHook().handleTags("push", {
            path: value,
            meta: arrItem.meta,
@@ -326,6 +365,7 @@ function handleCommand(command: any) {

 /** 触发右键中菜单的点击事件 */
 function selectTag(key, item) {
+  closeMenu();
  onClickDrop(key, item, currentSelect.value);
 }

@@ -419,7 +459,7 @@ function openMenu(tag, e) {
  }

  currentSelect.value = tag;
-  const menuMinWidth = 105;
+  const menuMinWidth = 140;
  const offsetLeft = unref(containerDom).getBoundingClientRect().left;
  const offsetWidth = unref(containerDom).offsetWidth;
  const maxLeft = offsetWidth - menuMinWidth;
@@ -460,6 +500,10 @@ function tagOnClick(item) {
  // showMenuModel(item?.path, item?.query);
 }

+onClickOutside(contextmenuRef, closeMenu, {
+  detectIframe: true
+});
+
 watch(route, () => {
  activeIndex.value = -1;
  dynamicTagView();
@@ -495,10 +539,8 @@ onMounted(() => {
    });
  });

-  useResizeObserver(
-    scrollbarDom,
-    debounce(() => dynamicTagView())
-  );
+  useResizeObserver(scrollbarDom, dynamicTagView);
+  delay().then(() => dynamicTagView());
 });

 onBeforeUnmount(() => {
@@ -510,34 +552,31 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div ref="containerDom" class="tags-view" v-if="!showTags">
+  <div v-if="!showTags" ref="containerDom" class="tags-view">
    <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="scrollbarDom"
+      class="scroll-container"
+      @wheel.prevent="handleWheel"
+    >
+      <div ref="tabDom" class="tab select-none" :style="getTabStyle">
        <div
-          :ref="'dynamic' + index"
          v-for="(item, index) in multiTags"
+          :ref="'dynamic' + index"
          :key="index"
-          :class="[
-            'scroll-item is-closable',
-            linkIsActive(item),
-            route.path === item.path && showModel === 'card'
-              ? 'card-active'
-              : ''
-          ]"
+          :class="['scroll-item is-closable', linkIsActive(item)]"
          @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"
+          <span
+            class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
          >
            {{ item.meta.title }}
-          </router-link>
+          </span>
          <span
            v-if="
              iconIsActive(item, index) ||
@@ -546,11 +585,11 @@ onBeforeUnmount(() => {
            class="el-icon-close"
            @click.stop="deleteMenu(item)"
          >
-            <IconifyIconOffline :icon="CloseBold" />
+            <IconifyIconOffline :icon="Close" />
          </span>
-          <div
-            :ref="'schedule' + index"
+          <span
            v-if="showModel !== 'card'"
+            :ref="'schedule' + index"
            :class="[scheduleIsActive(item)]"
          />
        </div>
@@ -563,6 +602,7 @@ onBeforeUnmount(() => {
    <transition name="el-zoom-in-top">
      <ul
        v-show="visible"
+        ref="contextmenuRef"
        :key="Math.random()"
        :style="getContextMenuStyle"
        class="contextmenu"
--- a/src/layout/frameView.vue
+++ b/src/layout/frameView.vue
@@ -1,16 +1,22 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useRoute } from "vue-router";
-import { ref, unref, onMounted, nextTick } from "vue";
+import { ref, unref, watch, onMounted, nextTick } from "vue";

 defineOptions({
  name: "FrameView"
 });

+const props = defineProps<{
+  frameInfo?: {
+    frameSrc?: string;
+    fullPath?: string;
+  };
+}>();
+
 const loading = ref(true);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
 const frameRef = ref<HTMLElement | null>(null);
-
 if (unref(currentRoute.meta)?.frameSrc) {
  frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
 }
@@ -37,21 +43,38 @@ function init() {
  });
 }

+watch(
+  () => currentRoute.fullPath,
+  path => {
+    if (
+      currentRoute.name === "Redirect" &&
+      path.includes(props.frameInfo?.fullPath)
+    ) {
+      frameSrc.value = path; // redirect时，置换成任意值，待重定向后 重新赋值
+      loading.value = true;
+    }
+    // 重新赋值
+    if (props.frameInfo?.fullPath === path) {
+      frameSrc.value = props.frameInfo?.frameSrc;
+    }
+  }
+);
+
 onMounted(() => {
  init();
 });
 </script>

 <template>
-  <div class="frame" v-loading="loading" element-loading-text="加载中...">
-    <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
+  <div v-loading="loading" class="frame" element-loading-text="加载中...">
+    <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
  </div>
 </template>

 <style lang="scss" scoped>
 .frame {
-  z-index: 998;
-  height: calc(100vh - 88px);
+  position: absolute;
+  inset: 0;

  .frame-iframe {
    box-sizing: border-box;
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -1,9 +1,14 @@
 import { ref } from "vue";
 import { getConfig } from "@/config";
 import { useLayout } from "./useLayout";
-import { themeColorsType } from "../types";
-import { useGlobal } from "@pureadmin/utils";
+import { removeToken } from "@/utils/auth";
+import { routerArrays } from "@/layout/types";
+import { router, resetRouter } from "@/router";
+import type { themeColorsType } from "../types";
+import { useAppStoreHook } from "@/store/modules/app";
+import { useGlobal, storageLocal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import {
  darken,
  lighten,
@@ -13,42 +18,55 @@ import {
 export function useDataThemeChange() {
  const { layoutTheme, layout } = useLayout();
  const themeColors = ref<Array<themeColorsType>>([
-    /* 道奇蓝（默认） */
-    { color: "#1b2a47", themeColor: "default" },
    /* 亮白色 */
    { color: "#ffffff", themeColor: "light" },
+    /* 道奇蓝 */
+    { color: "#1b2a47", themeColor: "default" },
+    /* 深紫罗兰色 */
+    { color: "#722ed1", themeColor: "saucePurple" },
+    /* 深粉色 */
+    { color: "#eb2f96", themeColor: "pink" },
    /* 猩红色 */
    { color: "#f5222d", themeColor: "dusk" },
    /* 橙红色 */
    { color: "#fa541c", themeColor: "volcano" },
-    /* 金色 */
-    { color: "#fadb14", themeColor: "yellow" },
    /* 绿宝石 */
    { color: "#13c2c2", themeColor: "mingQing" },
    /* 酸橙绿 */
-    { color: "#52c41a", themeColor: "auroraGreen" },
-    /* 深粉色 */
-    { color: "#eb2f96", themeColor: "pink" },
-    /* 深紫罗兰色 */
-    { color: "#722ed1", themeColor: "saucePurple" }
+    { color: "#52c41a", themeColor: "auroraGreen" }
  ]);

  const { $storage } = useGlobal<GlobalPropertiesApi>();
  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
+  const overallStyle = ref<string>($storage?.layout?.overallStyle);
  const body = document.documentElement as HTMLElement;

+  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;
+  }
+
  /** 设置导航主题色 */
-  function setLayoutThemeColor(theme = getConfig().Theme ?? "default") {
+  function setLayoutThemeColor(
+    theme = getConfig().Theme ?? "light",
+    isClick = true
+  ) {
    layoutTheme.value.theme = theme;
    toggleTheme({
      scopeName: `layout-theme-${theme}`
    });
+    // 如果非isClick，保留之前的themeColor
+    const storageThemeColor = $storage.layout.themeColor;
    $storage.layout = {
      layout: layout.value,
      theme,
      darkMode: dataTheme.value,
      sidebarStatus: $storage.layout?.sidebarStatus,
-      epThemeColor: $storage.layout?.epThemeColor
+      epThemeColor: $storage.layout?.epThemeColor,
+      themeColor: isClick ? theme : storageThemeColor,
+      overallStyle: overallStyle.value
    };

    if (theme === "default" || theme === "light") {
@@ -78,27 +96,48 @@ export function useDataThemeChange() {
    }
  };

-  /** 日间、夜间主题切换 */
-  function dataThemeChange() {
-    /* 如果当前是light夜间主题，默认切换到default主题 */
+  /** 浅色、深色整体风格切换 */
+  function dataThemeChange(overall?: string) {
+    overallStyle.value = overall;
    if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
-      setLayoutThemeColor("default");
+      setLayoutThemeColor("default", false);
    } else {
-      setLayoutThemeColor(useEpThemeStoreHook().epTheme);
+      setLayoutThemeColor(useEpThemeStoreHook().epTheme, false);
    }

    if (dataTheme.value) {
      document.documentElement.classList.add("dark");
    } else {
+      if ($storage.layout.themeColor === "light") {
+        setLayoutThemeColor("light", false);
+      }
      document.documentElement.classList.remove("dark");
    }
  }

+  /** 清空缓存并返回登录页 */
+  function onReset() {
+    removeToken();
+    storageLocal().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();
+  }
+
  return {
    body,
    dataTheme,
+    overallStyle,
    layoutTheme,
    themeColors,
+    onReset,
+    toggleClass,
    dataThemeChange,
    setEpThemeColor,
    setLayoutThemeColor
--- a/src/layout/hooks/useLayout.ts
+++ b/src/layout/hooks/useLayout.ts
@@ -18,10 +18,12 @@ export function useLayout() {
    if (!$storage.layout) {
      $storage.layout = {
        layout: $config?.Layout ?? "vertical",
-        theme: $config?.Theme ?? "default",
+        theme: $config?.Theme ?? "light",
        darkMode: $config?.DarkMode ?? false,
        sidebarStatus: $config?.SidebarStatus ?? true,
-        epThemeColor: $config?.EpThemeColor ?? "#409EFF"
+        epThemeColor: $config?.EpThemeColor ?? "#409EFF",
+        themeColor: $config?.Theme ?? "light",
+        overallStyle: $config?.OverallStyle ?? "light"
      };
    }
    /** 灰色模式、色弱模式、隐藏标签页 */
@@ -30,6 +32,7 @@ export function useLayout() {
        grey: $config?.Grey ?? false,
        weak: $config?.Weak ?? false,
        hideTabs: $config?.HideTabs ?? false,
+        hideFooter: $config.HideFooter ?? true,
        showLogo: $config?.ShowLogo ?? true,
        showModel: $config?.ShowModel ?? "smart",
        multiTagsCache: $config?.MultiTagsCache ?? false
@@ -37,7 +40,7 @@ export function useLayout() {
    }
  };

-  /** 清空缓存后从serverConfig.json读取默认配置并赋值到storage中 */
+  /** 清空缓存后从platform-config.json读取默认配置并赋值到storage中 */
  const layout = computed(() => {
    return $storage?.layout.layout;
  });
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -1,10 +1,10 @@
 import { storeToRefs } from "pinia";
 import { getConfig } from "@/config";
 import { emitter } from "@/utils/mitt";
-import { routeMetaType } from "../types";
 import userAvatar from "@/assets/user.jpg";
 import { getTopMenu } from "@/router/utils";
 import { useGlobal } from "@pureadmin/utils";
+import type { routeMetaType } from "../types";
 import { useRouter, useRoute } from "vue-router";
 import { router, remainingPaths } from "@/router";
 import { computed, type CSSProperties } from "vue";
@@ -107,6 +107,11 @@ export function useNav() {
    return remainingPaths.includes(path);
  }

+  /** 获取`logo` */
+  function getLogo() {
+    return new URL("/logo.svg", import.meta.url).href;
+  }
+
  return {
    route,
    title,
@@ -123,6 +128,7 @@ export function useNav() {
    menuSelect,
    handleResize,
    resolvePath,
+    getLogo,
    isCollapse,
    pureApp,
    username,
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -1,15 +1,13 @@
 import {
  ref,
  unref,
-  watch,
  computed,
  reactive,
  onMounted,
-  CSSProperties,
+  type CSSProperties,
  getCurrentInstance
 } from "vue";
-import { tagsViewsType } from "../types";
-import { useEventListener } from "@vueuse/core";
+import type { tagsViewsType } from "../types";
 import { useRoute, useRouter } from "vue-router";
 import { responsiveStorageNameSpace } from "@/config";
 import { useSettingStoreHook } from "@/store/modules/settings";
@@ -43,6 +41,7 @@ export function useTags() {
  const activeIndex = ref(-1);
  // 当前右键选中的路由信息
  const currentSelect = ref({});
+  const isScrolling = ref(false);

  /** 显示模式，默认灵动模式 */
  const showModel = ref(
@@ -153,7 +152,8 @@ export function useTags() {

  const getTabStyle = computed((): CSSProperties => {
    return {
-      transform: `translateX(${translateX.value}px)`
+      transform: `translateX(${translateX.value}px)`,
+      transition: isScrolling.value ? "none" : "transform 0.5s ease-in-out"
    };
  });

@@ -174,7 +174,7 @@ export function useTags() {
      toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
      toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
    } else {
-      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
      toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
      toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
    }
@@ -189,7 +189,7 @@ export function useTags() {
      toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
      toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
    } else {
-      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
      toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
      toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
    }
@@ -214,14 +214,8 @@ export function useTags() {
    }
  });

-  watch(
-    () => visible.value,
-    () => {
-      useEventListener(document, "click", closeMenu);
-    }
-  );
-
  return {
+    Close,
    route,
    router,
    visible,
@@ -236,6 +230,7 @@ export function useTags() {
    pureSetting,
    activeIndex,
    getTabStyle,
+    isScrolling,
    iconIsActive,
    linkIsActive,
    currentSelect,
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,10 +4,8 @@ import "animate.css";
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
 import { useLayout } from "./hooks/useLayout";
-import { useResizeObserver } from "@vueuse/core";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
-import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import {
  h,
@@ -18,6 +16,12 @@ import {
  onBeforeMount,
  defineComponent
 } from "vue";
+import {
+  useDark,
+  useGlobal,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";

 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -68,7 +72,9 @@ function setTheme(layoutModel: string) {
    theme: $storage.layout?.theme,
    darkMode: $storage.layout?.darkMode,
    sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: $storage.layout?.themeColor,
+    overallStyle: $storage.layout?.overallStyle
  };
 }

@@ -83,7 +89,7 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
  if (isMobile) return;
  const entry = entries[0];
-  const { width } = entry.contentRect;
+  const [{ inlineSize: width }] = entry.borderBoxSize;
  width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
  /** width app-wrapper类容器宽度
   * 0 < width <= 760 隐藏侧边栏
@@ -114,7 +120,7 @@ onMounted(() => {
 });

 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange();
+  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
 });

 const layoutHeader = defineComponent({
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -2,14 +2,27 @@
 * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
 */

-import { type multipleScopeVarsOptions } from "@pureadmin/theme";
+import type { multipleScopeVarsOptions } from "@pureadmin/theme";

 /** 预设主题色 */
 const themeColors = {
+  /* 亮白色 */
+  light: {
+    subMenuActiveText: "#000000d9",
+    menuBg: "#fff",
+    menuHover: "#f6f6f6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    menuText: "rgb(0 0 0 / 60%)",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  /* 道奇蓝 */
  default: {
    subMenuActiveText: "#fff",
    menuBg: "#001529",
-    menuHover: "#4091f7",
+    menuHover: "rgb(64 145 247 / 15%)",
    subMenuBg: "#0f0303",
    subMenuActiveBg: "#4091f7",
    menuText: "rgb(254 254 254 / 65%)",
@@ -17,76 +30,23 @@ const themeColors = {
    menuTitleHover: "#fff",
    menuActiveBefore: "#4091f7"
  },
-  light: {
-    subMenuActiveText: "#409eff",
-    menuBg: "#fff",
-    menuHover: "#e0ebf6",
-    subMenuBg: "#fff",
-    subMenuActiveBg: "#e0ebf6",
-    menuText: "#7a80b4",
-    sidebarLogo: "#fff",
-    menuTitleHover: "#000",
-    menuActiveBefore: "#4091f7"
-  },
-  dusk: {
+  /* 深紫罗兰色 */
+  saucePurple: {
    subMenuActiveText: "#fff",
-    menuBg: "#2a0608",
-    menuHover: "#e13c39",
+    menuBg: "#130824",
+    menuHover: "rgb(105 58 201 / 15%)",
    subMenuBg: "#000",
-    subMenuActiveBg: "#e13c39",
-    menuText: "rgb(254 254 254 / 65.1%)",
-    sidebarLogo: "#42090c",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e13c39"
-  },
-  volcano: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2b0e05",
-    menuHover: "#e85f33",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#e85f33",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#441708",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e85f33"
-  },
-  yellow: {
-    subMenuActiveText: "#d25f00",
-    menuBg: "#2b2503",
-    menuHover: "#f6da4d",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#f6da4d",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#443b05",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#f6da4d"
-  },
-  mingQing: {
-    subMenuActiveText: "#fff",
-    menuBg: "#032121",
-    menuHover: "#59bfc1",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#59bfc1",
+    subMenuActiveBg: "#693ac9",
    menuText: "#7a80b4",
-    sidebarLogo: "#053434",
+    sidebarLogo: "#1f0c38",
    menuTitleHover: "#fff",
-    menuActiveBefore: "#59bfc1"
-  },
-  auroraGreen: {
-    subMenuActiveText: "#fff",
-    menuBg: "#0b1e15",
-    menuHover: "#60ac80",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#60ac80",
-    menuText: "#7a80b4",
-    sidebarLogo: "#112f21",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#60ac80"
+    menuActiveBefore: "#693ac9"
  },
+  /* 深粉色 */
  pink: {
    subMenuActiveText: "#fff",
    menuBg: "#28081a",
-    menuHover: "#d84493",
+    menuHover: "rgb(216 68 147 / 15%)",
    subMenuBg: "#000",
    subMenuActiveBg: "#d84493",
    menuText: "#7a80b4",
@@ -94,16 +54,53 @@ const themeColors = {
    menuTitleHover: "#fff",
    menuActiveBefore: "#d84493"
  },
-  saucePurple: {
+  /* 猩红色 */
+  dusk: {
    subMenuActiveText: "#fff",
-    menuBg: "#130824",
-    menuHover: "#693ac9",
+    menuBg: "#2a0608",
+    menuHover: "rgb(225 60 57 / 15%)",
    subMenuBg: "#000",
-    subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
-    sidebarLogo: "#1f0c38",
+    subMenuActiveBg: "#e13c39",
+    menuText: "rgb(254 254 254 / 65.1%)",
+    sidebarLogo: "#42090c",
    menuTitleHover: "#fff",
-    menuActiveBefore: "#693ac9"
+    menuActiveBefore: "#e13c39"
+  },
+  /* 橙红色 */
+  volcano: {
+    subMenuActiveText: "#fff",
+    menuBg: "#2b0e05",
+    menuHover: "rgb(232 95 51 / 15%)",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#e85f33",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#441708",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e85f33"
+  },
+  /* 绿宝石 */
+  mingQing: {
+    subMenuActiveText: "#fff",
+    menuBg: "#032121",
+    menuHover: "rgb(89 191 193 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#59bfc1",
+    menuText: "#7a80b4",
+    sidebarLogo: "#053434",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#59bfc1"
+  },
+  /* 酸橙绿 */
+  auroraGreen: {
+    subMenuActiveText: "#fff",
+    menuBg: "#0b1e15",
+    menuHover: "rgb(96 172 128 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#60ac80",
+    menuText: "#7a80b4",
+    sidebarLogo: "#112f21",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#60ac80"
  }
 };

--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -8,7 +8,7 @@ export const routerArrays: Array<RouteConfigs> =
          path: "/welcome",
          meta: {
            title: "首页",
-            icon: "homeFilled"
+            icon: "ep:home-filled"
          }
        }
      ]
@@ -62,6 +62,7 @@ export interface setType {

 export type menuType = {
  id?: number;
+  name?: string;
  path?: string;
  noShowingChildren?: boolean;
  children?: menuType[];