---初始化后台管理web页面项目

src/layouts/default/content/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+    <PageLayout />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import PageLayout from '/@/layouts/page/index.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useContentViewHeight } from './useContentViewHeight';
+
+  export default defineComponent({
+    name: 'LayoutContent',
+    components: { PageLayout },
+    setup() {
+      const { prefixCls } = useDesign('layout-content');
+      const { getOpenPageLoading } = useTransitionSetting();
+      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+
+      useContentViewHeight();
+      return {
+        prefixCls,
+        getOpenPageLoading,
+        getLayoutContentMode,
+        getPageLoading,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-content';
+
+  .@{prefix-cls} {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    &.fixed {
+      width: 1200px;
+      margin: 0 auto;
+    }
+
+    &-loading {
+      position: absolute;
+      top: 200px;
+      z-index: @page-loading-z-index;
+    }
+  }
+</style>

src/layouts/default/content/useContentContext.ts

@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface ContentContextProps {
+  contentHeight: ComputedRef<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<ContentContextProps> = Symbol();
+
+export function createContentContext(context: ContentContextProps) {
+  return createContext<ContentContextProps>(context, key, { native: true });
+}
+
+export function useContentContext() {
+  return useContext<ContentContextProps>(key);
+}

src/layouts/default/content/useContentViewHeight.ts

@@ -0,0 +1,42 @@
+import { ref, computed, unref } from 'vue';
+import { createPageContext } from '/@/hooks/component/usePageContext';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+
+const headerHeightRef = ref(0);
+const footerHeightRef = ref(0);
+
+export function useLayoutHeight() {
+  function setHeaderHeight(val) {
+    headerHeightRef.value = val;
+  }
+  function setFooterHeight(val) {
+    footerHeightRef.value = val;
+  }
+  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
+}
+
+export function useContentViewHeight() {
+  const contentHeight = ref(window.innerHeight);
+  const pageHeight = ref(window.innerHeight);
+  const getViewHeight = computed(() => {
+    return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0;
+  });
+
+  useWindowSizeFn(
+    () => {
+      contentHeight.value = window.innerHeight;
+    },
+    100,
+    { immediate: true },
+  );
+
+  async function setPageHeight(height: number) {
+    pageHeight.value = height;
+  }
+
+  createPageContext({
+    contentHeight: getViewHeight,
+    setPageHeight,
+    pageHeight,
+  });
+}

src/layouts/default/feature/index.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+  import { BackTop } from 'ant-design-vue';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+
+  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
+  export default defineComponent({
+    name: 'LayoutFeatures',
+    components: {
+      BackTop,
+      LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
+      SessionTimeoutLogin,
+    },
+    setup() {
+      const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
+        useRootSetting();
+      const userStore = useUserStoreWithOut();
+      const { prefixCls } = useDesign('setting-drawer-feature');
+      const { getShowHeader } = useHeaderSetting();
+
+      const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
+
+      const getIsFixedSettingDrawer = computed(() => {
+        if (!unref(getShowSettingButton)) {
+          return false;
+        }
+        const settingButtonPosition = unref(getSettingButtonPosition);
+
+        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+          return !unref(getShowHeader) || unref(getFullContent);
+        }
+        return settingButtonPosition === SettingButtonPositionEnum.FIXED;
+      });
+
+      return {
+        getTarget: () => document.body,
+        getUseOpenBackTop,
+        getIsFixedSettingDrawer,
+        prefixCls,
+        getIsSessionTimeout,
+      };
+    },
+  });
+</script>
+
+<template>
+  <LayoutLockPage />
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
+  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 45%;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background-color: @primary-color;
+    border-radius: 6px 0 0 6px;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+</style>

src/layouts/default/footer/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <AFooter :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
+    <div :class="`${prefixCls}__links`">
+      <a @click="openWindow(SITE_URL)">{{ t('官网地址') }}</a>
+
+      <GithubFilled @click="openWindow(GITHUB_URL)" :class="`${prefixCls}__github`" />
+
+      <a @click="openWindow(DOC_URL)">{{ t('文档地址') }}</a>
+    </div>
+    <div>Copyright &copy;2024 ITC-FRAMEWORK</div>
+  </AFooter>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref, ref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+
+  import { GithubFilled } from '@ant-design/icons-vue';
+
+  import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
+  import { openWindow } from '/@/utils';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRouter } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
+
+  export default defineComponent({
+    name: 'LayoutFooter',
+    components: { AFooter: Layout.Footer, GithubFilled },
+    setup() {
+      const { t } = useI18n();
+      const { getShowFooter } = useRootSetting();
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('layout-footer');
+
+      const footerRef = ref<ComponentRef>(null);
+      const { setFooterHeight } = useLayoutHeight();
+
+      const getShowLayoutFooter = computed(() => {
+        if (unref(getShowFooter)) {
+          const footerEl = unref(footerRef)?.$el;
+          setFooterHeight(footerEl?.offsetHeight || 0);
+        } else {
+          setFooterHeight(0);
+        }
+        return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
+      });
+
+      return {
+        getShowLayoutFooter,
+        prefixCls,
+        t,
+        DOC_URL,
+        GITHUB_URL,
+        SITE_URL,
+        openWindow,
+        footerRef,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-layout-footer';
+
+  @normal-color: rgba(0, 0, 0, 0.45);
+
+  @hover-color: rgba(0, 0, 0, 0.85);
+
+  .@{prefix-cls} {
+    color: @normal-color;
+    text-align: center;
+
+    &__links {
+      margin-bottom: 8px;
+
+      a {
+        color: @normal-color;
+
+        &:hover {
+          color: @hover-color;
+        }
+      }
+    }
+
+    &__github {
+      margin: 0 30px;
+
+      &:hover {
+        color: @hover-color;
+      }
+    }
+  }
+</style>

src/layouts/default/header/MultipleHeader.vue

@@ -0,0 +1,136 @@
+<template>
+    <template v-if="!isOnlyShowContent">
+        <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
+        <div :style="getWrapStyle" :class="getClass">
+            <LayoutHeader v-if="getShowInsetHeaderRef" />
+            <MultipleTabs v-if="getShowTabs" />
+        </div>
+    </template>
+    <template>
+        <MultipleTabs v-if="getShowTabs" style="display:none"/>
+    </template>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed, CSSProperties } from 'vue';
+
+  import LayoutHeader from './index.vue';
+  import MultipleTabs from '../tabs/index.vue';
+
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useFullContent } from '/@/hooks/web/useFullContent';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
+
+  const HEADER_HEIGHT = 60;
+
+  const TABS_HEIGHT = 42;
+  export default defineComponent({
+    name: 'LayoutMultipleHeader',
+    components: { LayoutHeader, MultipleTabs },
+    setup() {
+      const { setHeaderHeight } = useLayoutHeight();
+      const { prefixCls } = useDesign('layout-multiple-header');
+
+      const { getCalcContentWidth, getSplit } = useMenuSetting();
+      const { getIsMobile } = useAppInject();
+      const {
+        getFixed,
+        getShowInsetHeaderRef,
+        getShowFullHeaderRef,
+        getHeaderTheme,
+        getShowHeader,
+      } = useHeaderSetting();
+
+      const { getFullContent } = useFullContent();
+
+      const { getShowMultipleTab } = useMultipleTabSetting();
+
+      const getShowTabs = computed(() => {
+        return unref(getShowMultipleTab) && !unref(getFullContent);
+      });
+
+      const getIsShowPlaceholderDom = computed(() => {
+        return unref(getFixed) || unref(getShowFullHeaderRef);
+      });
+
+      const getWrapStyle = computed((): CSSProperties => {
+        const style: CSSProperties = {};
+        if (unref(getFixed)) {
+          style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
+        }
+        if (unref(getShowFullHeaderRef)) {
+          style.top = `${HEADER_HEIGHT}px`;
+        }
+        return style;
+      });
+
+      const getIsFixed = computed(() => {
+        return unref(getFixed) || unref(getShowFullHeaderRef);
+      });
+
+      const getPlaceholderDomStyle = computed((): CSSProperties => {
+        let height = 0;
+        if (
+          (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+          unref(getShowHeader) &&
+          !unref(getFullContent)
+        ) {
+          height += HEADER_HEIGHT;
+        }
+        if (unref(getShowMultipleTab) && !unref(getFullContent)) {
+          height += TABS_HEIGHT;
+        }
+        setHeaderHeight(height);
+        return {
+          height: `${height - 10}px`,
+        };
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          `${prefixCls}--${unref(getHeaderTheme)}`,
+          { [`${prefixCls}--fixed`]: unref(getIsFixed) },
+        ];
+      });
+
+      const isOnlyShowContent = computed(() => {
+        return window.isOnlyShowContent=='Y';
+      });
+
+      return {
+        getClass,
+        prefixCls,
+        getPlaceholderDomStyle,
+        getIsFixed,
+        getWrapStyle,
+        getIsShowPlaceholderDom,
+        getShowTabs,
+        getShowInsetHeaderRef,
+        isOnlyShowContent
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-layout-multiple-header';
+
+  .@{prefix-cls} {
+    transition: width 0.2s;
+    flex: 0 0 auto;
+
+    &--dark {
+      margin-left: -1px;
+    }
+
+    &--fixed {
+      position: fixed;
+      top: 0;
+      z-index: @multiple-tab-fixed-z-index;
+      width: 100%;
+    }
+  }
+</style>

src/layouts/default/header/components/Breadcrumb.vue

@@ -0,0 +1,204 @@
+<template>
+  <div :class="[prefixCls, `${prefixCls}--${theme}`]">
+    <a-breadcrumb :routes="routes">
+      <template #itemRender="{ route, routes: routesMatched, paths }">
+        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
+        <span v-if="!hasRedirect(routesMatched, route)">
+          {{ t(route.name || route.meta.title) }}
+        </span>
+        <router-link v-else to="" @click="handleClick(route, paths, $event)">
+          {{ t(route.name || route.meta.title) }}
+        </router-link>
+      </template>
+    </a-breadcrumb>
+  </div>
+</template>
+<script lang="ts">
+  import type { RouteLocationMatched } from 'vue-router';
+  import { useRouter } from 'vue-router';
+  import type { Menu } from '/@/router/types';
+
+  import { defineComponent, ref, watchEffect } from 'vue';
+
+  import { Breadcrumb } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  import { propTypes } from '/@/utils/propTypes';
+  import { isString } from '/@/utils/is';
+  import { filter } from '/@/utils/helper/treeHelper';
+  import { getMenus } from '/@/router/menus';
+
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { getAllParentPath } from '/@/router/helper/menuHelper';
+
+  export default defineComponent({
+    name: 'LayoutBreadcrumb',
+    components: { Icon, [Breadcrumb.name]: Breadcrumb },
+    props: {
+      theme: propTypes.oneOf(['dark', 'light']),
+    },
+    setup() {
+      const routes = ref<RouteLocationMatched[]>([]);
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('layout-breadcrumb');
+      const { getShowBreadCrumbIcon } = useRootSetting();
+      const go = useGo();
+
+      const { t } = useI18n();
+      watchEffect(async () => {
+        if (currentRoute.value.name === REDIRECT_NAME) return;
+        const menus = await getMenus();
+
+        const routeMatched = currentRoute.value.matched;
+        const cur = routeMatched?.[routeMatched.length - 1];
+        let path = currentRoute.value.path;
+
+        if (cur && cur?.meta?.currentActiveMenu) {
+          path = cur.meta.currentActiveMenu as string;
+        }
+
+        const parent = getAllParentPath(menus, path);
+        const filterMenus = menus.filter((item) => item.path === parent[0]);
+        const matched = getMatched(filterMenus, parent) as any;
+
+        if (!matched || matched.length === 0) return;
+
+        const breadcrumbList = filterItem(matched);
+
+        if (currentRoute.value.meta?.currentActiveMenu) {
+          breadcrumbList.push({
+            ...currentRoute.value,
+            name: currentRoute.value.meta?.title || currentRoute.value.name,
+          } as unknown as RouteLocationMatched);
+        }
+        routes.value = breadcrumbList;
+      });
+
+      function getMatched(menus: Menu[], parent: string[]) {
+        const metched: Menu[] = [];
+        menus.forEach((item) => {
+          if (parent.includes(item.path)) {
+            metched.push({
+              ...item,
+              name: item.meta?.title || item.name,
+            });
+          }
+          if (item.children?.length) {
+            metched.push(...getMatched(item.children, parent));
+          }
+        });
+        return metched;
+      }
+
+      function filterItem(list: RouteLocationMatched[]) {
+        return filter(list, (item) => {
+          const { meta, name } = item;
+          if (!meta) {
+            return !!name;
+          }
+          const { title, hideBreadcrumb, hideMenu } = meta;
+          if (!title || hideBreadcrumb || hideMenu) {
+            return false;
+          }
+          return true;
+        }).filter((item) => !item.meta?.hideBreadcrumb);
+      }
+
+      function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
+        e?.preventDefault();
+        const { children, redirect, meta } = route;
+
+        if (children?.length && !redirect) {
+          e?.stopPropagation();
+          return;
+        }
+        if (meta?.carryParam) {
+          return;
+        }
+
+        if (redirect && isString(redirect)) {
+          go(redirect);
+        } else {
+          let goPath = '';
+          if (paths.length === 1) {
+            goPath = paths[0];
+          } else {
+            const ps = paths.slice(1);
+            const lastPath = ps.pop() || '';
+            goPath = `${lastPath}`;
+          }
+          goPath = /^\//.test(goPath) ? goPath : `/${goPath}`;
+          go(goPath);
+        }
+      }
+
+      function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
+        return routes.indexOf(route) !== routes.length - 1;
+      }
+
+      function getIcon(route) {
+        return route.icon || route.meta?.icon;
+      }
+
+      return { routes, t, prefixCls, getIcon, getShowBreadCrumbIcon, handleClick, hasRedirect };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-breadcrumb';
+
+  .@{prefix-cls} {
+    display: flex;
+    padding: 0 8px;
+    align-items: center;
+
+    .ant-breadcrumb-link {
+      .anticon {
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+    }
+
+    &--light {
+      .ant-breadcrumb-link {
+        color: @breadcrumb-item-normal-color;
+
+        a {
+          color: rgb(0 0 0 / 65%);
+
+          &:hover {
+            color: @primary-color;
+          }
+        }
+      }
+
+      .ant-breadcrumb-separator {
+        color: @breadcrumb-item-normal-color;
+      }
+    }
+
+    &--dark {
+      .ant-breadcrumb-link {
+        color: rgb(255 255 255 / 60%);
+
+        a {
+          color: rgb(255 255 255 / 80%);
+
+          &:hover {
+            color: @white;
+          }
+        }
+      }
+
+      .ant-breadcrumb-separator,
+      .anticon {
+        color: rgb(255 255 255 / 80%);
+      }
+    }
+  }
+</style>

src/layouts/default/header/components/ErrorAction.vue

@@ -0,0 +1,48 @@
+<template>
+  <Tooltip
+    :title="t('layout.header.tooltipErrorLog')"
+    placement="bottom"
+    :mouseEnterDelay="0.5"
+    @click="handleToErrorList"
+  >
+    <Badge :count="getCount" :offset="[0, 10]" :overflowCount="99">
+      <Icon icon="ion:bug-outline" />
+    </Badge>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { Tooltip, Badge } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useErrorLogStore } from '/@/store/modules/errorLog';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'ErrorAction',
+    components: { Icon, Tooltip, Badge },
+
+    setup() {
+      const { t } = useI18n();
+      const { push } = useRouter();
+      const errorLogStore = useErrorLogStore();
+
+      const getCount = computed(() => errorLogStore.getErrorLogListCount);
+
+      function handleToErrorList() {
+        push(PageEnum.ERROR_LOG_PAGE).then(() => {
+          errorLogStore.setErrorLogListCount(0);
+        });
+      }
+
+      return {
+        t,
+        getCount,
+        handleToErrorList,
+      };
+    },
+  });
+</script>

src/layouts/default/header/components/FullScreen.vue

@@ -0,0 +1,35 @@
+<template>
+  <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
+    <span @click="toggle">
+      <Icon icon="material-symbols:fit-screen-rounded" size="26" v-if="!isFullscreen" />
+      <Icon icon="mingcute:fullscreen-exit-fill" size="24" v-else />
+    </span>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useFullscreen } from '@vueuse/core';
+  import { Icon } from '/@/components/Icon';
+
+  export default defineComponent({
+    name: 'FullScreen',
+    components: { Icon, Tooltip },
+
+    setup() {
+      const { t } = useI18n();
+      const { toggle, isFullscreen } = useFullscreen();
+
+      const getTitle = computed(() => {
+        return unref(isFullscreen) ? t('退出全屏') : t('全屏');
+      });
+
+      return {
+        getTitle,
+        isFullscreen,
+        toggle,
+      };
+    },
+  });
+</script>

src/layouts/default/header/components/childSystem.vue

@@ -0,0 +1,166 @@
+<template>
+  <AMenu
+    v-if="getShowContent && getShowBread"
+    :selectedKeys="cur"
+    mode="horizontal"
+    :class="[prefixCls, `${prefixCls}--${theme}`]"
+  >
+    <MenuItem v-for="item in system" @click="changeSystem(item.id)" :key="item.id" class="item-system">
+      {{ item.name }}
+    </MenuItem>
+  </AMenu>
+  <Tooltip title="子系统" :mouseEnterDelay="0.5">
+    <Dropdown
+      v-if="getShowTopMenu && !getIsMobile"
+      placement="bottom"
+      :trigger="['click']"
+      :dropMenuList="system"
+      :selectedKeys="cur"
+      @menu-event="handleMenuEvent"
+      overlayClassName="app-locale-picker-overlay"
+    >
+      <template #overlay>
+        <a-menu>
+          <a-menu-item :key="item.event" v-for="item in system">
+            <Icon
+              :icon="item.icon || 'ant-design:appstore-outlined'"
+              color="#DEDFFF"
+              size="26"
+              style="vertical-align: -7px"
+            />
+            {{ item.text }}
+          </a-menu-item>
+        </a-menu>
+      </template>
+      <span class="cursor-pointer flex items-center p-2">
+        <Icon icon="icon-park-outline:system" size="22" />
+      </span>
+    </Dropdown>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import type { MenuTheme } from 'ant-design-vue';
+  import { Breadcrumb, Tooltip, Menu } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+  import { Dropdown } from '/@/components/Dropdown';
+  import type { DropMenu } from '/@/components/Dropdown';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { storeToRefs } from 'pinia';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  export default defineComponent({
+    name: 'LayoutBreadcrumb',
+    components: {
+      Icon,
+      [Breadcrumb.name]: Breadcrumb,
+      Tooltip,
+      AMenu: Menu,
+      MenuItem: Menu.Item,
+      Dropdown,
+    },
+    props: {
+      theme: propTypes.oneOf(['dark', 'light']),
+    },
+    setup() {
+      const permissionStore = usePermissionStore();
+      const { subSystemList } = storeToRefs(permissionStore);
+      const Mtheme = ref<MenuTheme>('dark');
+      const cur = ref<string[]>([permissionStore.getSubSystem]);
+
+      const { prefixCls } = useDesign('layout-breadcrumb');
+      const { getIsMobile } = useAppInject();
+      const system = ref<any[]>([]);
+      const { t } = useI18n();
+      const { getShowTopMenu } = useMenuSetting();
+      const { getShowContent, getShowBread } = useHeaderSetting();
+      watch(
+        () => subSystemList.value,
+        (v) => {
+          system.value = v;
+        },
+        { deep: true },
+      );
+      onMounted(async () => {
+        await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
+        system.value = permissionStore.getSubSysList;
+          if(system.value.length>0){
+              changeSystem(system.value[0].id);
+          }
+      });
+
+      //切换系统
+      function changeSystem(systemId: string) {
+        permissionStore.setSubSystem(systemId);
+        cur.value = [systemId];
+      }
+
+      function handleMenuEvent(menu: DropMenu) {
+        if (cur.value[0] === menu.event) {
+          return;
+        }
+        cur.value = [menu.event as string];
+
+        permissionStore.setSubSystem(menu.event as string);
+      }
+
+      return {
+        t,
+        prefixCls,
+        cur,
+        changeSystem,
+        system,
+        Mtheme,
+        getShowContent,
+        getShowTopMenu,
+        getShowBread,
+        getIsMobile,
+        handleMenuEvent,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-breadcrumb';
+
+  .@{prefix-cls} {
+    &.ant-menu {
+      background: none;
+      border: 0;
+
+      .ant-menu-item {
+        padding: 0 10px;
+
+        &:hover {
+          background: none;
+        }
+
+        .ant-menu-item-icon {
+          background: rgb(171 170 205 / 30%);
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          border: 1px solid rgb(171 170 205 / 30%);
+          margin: 0 5px;
+          padding: 6px;
+        }
+      }
+
+      .ant-menu-item-selected {
+        background: none;
+
+        .ant-menu-item-icon {
+          border: 1px solid rgb(222 223 255);
+        }
+
+        &::after {
+          border: 0;
+        }
+      }
+    }
+  }
+</style>

src/layouts/default/header/components/index.ts

@@ -0,0 +1,14 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import FullScreen from './FullScreen.vue';
+
+export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {
+  loading: true,
+});
+
+export const LayoutBreadcrumb = createAsyncComponent(() => import('./childSystem.vue'));
+
+export const Notify = createAsyncComponent(() => import('./notify/index.vue'));
+
+export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue'));
+
+export { FullScreen };

src/layouts/default/header/components/lock/LockModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <BasicModal
+    :footer="null"
+    :title="t('锁定屏幕')"
+    v-bind="$attrs"
+    :class="prefixCls"
+    @register="register"
+  >
+    <div :class="`${prefixCls}__entry`">
+      <div :class="`${prefixCls}__header`">
+        <img :src="avatar" :class="`${prefixCls}__header-img`" />
+        <p :class="`${prefixCls}__header-name`">
+          {{ getRealName }}
+        </p>
+      </div>
+
+      <BasicForm @register="registerForm" />
+
+      <div :class="`${prefixCls}__footer`">
+        <a-button type="primary" block class="mt-2" @click="handleLock">
+          {{ t('锁定') }}
+        </a-button>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '/@/components/Modal/index';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { useLockStore } from '/@/store/modules/lock';
+  import headerImg from '/@/assets/images/header.jpg';
+  export default defineComponent({
+    name: 'LockModal',
+    components: { BasicModal, BasicForm },
+
+    setup() {
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('header-lock-modal');
+      const userStore = useUserStore();
+      const lockStore = useLockStore();
+
+      const getRealName = computed(() => userStore.getUserInfo?.realName);
+      const [register, { closeModal }] = useModalInner();
+
+      const [registerForm, { validateFields, resetFields }] = useForm({
+        showActionButtonGroup: false,
+        schemas: [
+          {
+            field: 'password',
+            label: t('锁屏密码'),
+            colProps: {
+              span: 24,
+            },
+            component: 'InputPassword',
+            required: true,
+          },
+        ],
+      });
+
+      async function handleLock() {
+        const values = (await validateFields()) as any;
+        const password: string | undefined = values.password;
+        closeModal();
+
+        lockStore.setLockInfo({
+          isLock: true,
+          pwd: password,
+        });
+        await resetFields();
+      }
+
+      const avatar = computed(() => {
+        const { avatar } = userStore.getUserInfo;
+        return avatar || headerImg;
+      });
+
+      return {
+        t,
+        prefixCls,
+        getRealName,
+        register,
+        registerForm,
+        handleLock,
+        avatar,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-header-lock-modal';
+
+  .@{prefix-cls} {
+    &__entry {
+      position: relative;
+      //height: 240px;
+      padding: 130px 30px 30px;
+      border-radius: 10px;
+    }
+
+    &__header {
+      position: absolute;
+      top: 0;
+      left: calc(50% - 45px);
+      width: auto;
+      text-align: center;
+
+      &-img {
+        width: 70px;
+        border-radius: 50%;
+      }
+
+      &-name {
+        margin-top: 5px;
+      }
+    }
+
+    &__footer {
+      text-align: center;
+    }
+  }
+</style>

src/layouts/default/header/components/notify/NoticeList.vue

@@ -0,0 +1,189 @@
+<template>
+  <a-list :class="prefixCls" bordered :pagination="getPagination">
+    <template v-for="item in getData" :key="item.id">
+      <a-list-item class="list-item">
+        <a-list-item-meta>
+          <template #title>
+            <div class="title">
+              <a-typography-paragraph
+                @click="handleTitleClick(item)"
+                style="width: 100%; margin-bottom: 0 !important"
+                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
+                :delete="!!item.titleDelete"
+                :ellipsis="
+                  $props.titleRows && $props.titleRows > 0
+                    ? { rows: $props.titleRows, tooltip: !!item.title }
+                    : false
+                "
+                :content="item.title"
+              />
+              <div class="extra" v-if="item.extra">
+                <a-tag class="tag" :color="item.color">
+                  {{ item.extra }}
+                </a-tag>
+              </div>
+            </div>
+          </template>
+
+          <template #avatar>
+            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <span v-else> {{ item.avatar }}</span>
+          </template>
+
+          <template #description>
+            <div>
+              <div class="description" v-if="item.description">
+                <a-typography-paragraph
+                  style="width: 100%; margin-bottom: 0 !important"
+                  :ellipsis="
+                    $props.descRows && $props.descRows > 0
+                      ? { rows: $props.descRows, tooltip: !!item.description }
+                      : false
+                  "
+                  :content="item.description"
+                />
+              </div>
+              <div class="datetime">
+                {{ item.datetime }}
+              </div>
+            </div>
+          </template>
+        </a-list-item-meta>
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
+  import { ListItem } from './data';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { List, Avatar, Tag, Typography } from 'ant-design-vue';
+  import { isNumber } from '/@/utils/is';
+  export default defineComponent({
+    components: {
+      [Avatar.name]: Avatar,
+      [List.name]: List,
+      [List.Item.name]: List.Item,
+      AListItemMeta: List.Item.Meta,
+      ATypographyParagraph: Typography.Paragraph,
+      [Tag.name]: Tag,
+    },
+    props: {
+      list: {
+        type: Array as PropType<ListItem[]>,
+        default: () => [],
+      },
+      pageSize: {
+        type: [Boolean, Number] as PropType<Boolean | Number>,
+        default: 5,
+      },
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      titleRows: {
+        type: Number,
+        default: 1,
+      },
+      descRows: {
+        type: Number,
+        default: 2,
+      },
+      onTitleClick: {
+        type: Function as PropType<(Recordable) => void>,
+      },
+    },
+    emits: ['update:currentPage'],
+    setup(props, { emit }) {
+      const { prefixCls } = useDesign('header-notify-list');
+      const current = ref(props.currentPage || 1);
+      const getData = computed(() => {
+        const { pageSize, list } = props;
+        if (pageSize === false) return [];
+        let size = isNumber(pageSize) ? pageSize : 5;
+        return list.slice(size * (unref(current) - 1), size * unref(current));
+      });
+      watch(
+        () => props.currentPage,
+        (v) => {
+          current.value = v;
+        },
+      );
+      const isTitleClickable = computed(() => !!props.onTitleClick);
+      const getPagination = computed(() => {
+        const { list, pageSize } = props;
+        if (pageSize > 0 && list && list.length > pageSize) {
+          return {
+            total: list.length,
+            pageSize,
+            //size: 'small',
+            current: unref(current),
+            onChange(page) {
+              current.value = page;
+              emit('update:currentPage', page);
+            },
+          };
+        } else {
+          return false;
+        }
+      });
+
+      function handleTitleClick(item: ListItem) {
+        props.onTitleClick && props.onTitleClick(item);
+      }
+
+      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-header-notify-list';
+
+  .@{prefix-cls} {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    ::v-deep(.ant-pagination-disabled) {
+      display: inline-block !important;
+    }
+
+    &-item {
+      padding: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      .title {
+        margin-bottom: 8px;
+        font-weight: normal;
+
+        .extra {
+          float: right;
+          margin-top: -1.5px;
+          margin-right: 0;
+          font-weight: normal;
+
+          .tag {
+            margin-right: 0;
+          }
+        }
+
+        .avatar {
+          margin-top: 4px;
+        }
+
+        .description {
+          font-size: 12px;
+          line-height: 18px;
+        }
+
+        .datetime {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+</style>

src/layouts/default/header/components/notify/data.ts

@@ -0,0 +1,58 @@
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+export interface ListItem {
+  id: string;
+  avatar?: string;
+  // 通知的标题内容
+  title: string;
+  // 是否在标题上显示删除线
+  titleDelete?: boolean;
+  datetime?: string;
+  type?: string;
+  read?: number;
+  description?: string;
+  clickClose?: boolean;
+  extra?: string;
+  color?: string;
+  taskId?: string;
+  processId?: string;
+  schemaId?: string;
+  timeFormat?: string;
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  unreadNum: number;
+  list: ListItem[];
+  read?: ListItem[];
+  unreadlist?: ListItem[];
+}
+
+export const tabListData: TabItem[] = [
+  {
+    key: '1',
+    name: t('新闻'),
+    list: [],
+    unreadNum: 0,
+  },
+  {
+    key: '2',
+    name: t('通知公告'),
+    list: [],
+    unreadNum: 0,
+  },
+  {
+    key: '3',
+    name: t('日程'),
+    list: [],
+    unreadNum: 0,
+  },
+  {
+    key: '4',
+    name: t('工作流'),
+    list: [],
+    read: [],
+    unreadNum: 0,
+  },
+];

src/layouts/default/header/components/notify/index.vue

@@ -0,0 +1,461 @@
+<template>
+  <div :class="prefixCls">
+    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
+      <Badge :count="count" dot :numberStyle="numberStyle">
+        <Icon icon="ion:notifcations" size="22" />
+      </Badge>
+      <template #content>
+        <Tabs>
+          <template v-for="item in listData" :key="item.key">
+            <TabPane>
+              <template #tab>
+                {{ item.name }}
+                <span v-if="item.unreadNum !== 0">({{ item.unreadNum }})</span>
+              </template>
+
+              <div v-if="item.key === '4'" class="min-h-88">
+                <div>
+                  <div class="list-item">
+                    <span class="header-title">{{ t('流程审批') }}</span>
+                    <router-link
+                      class="opr"
+                      :to="{
+                        path: '/task/processtasks',
+                        query: {},
+                      }"
+                    >
+                      {{ t('查看更多') }} 》
+                    </router-link>
+                  </div>
+                  <div v-if="item.list.length > 0">
+                    <div class="readed-mark" v-for="it in item.list" :key="it.id">
+                      <div
+                        class="list-data-item"
+                        :class="it.read ? 'readed' : ''"
+                        @click="ApprovalHandle(it, item.key, 1)"
+                      >
+                        <span class="list-item-title">{{ it.title }}</span>
+                        <span class="list-item-time">{{ it.timeFormat }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <a-empty :image="simpleImage" v-else />
+                </div>
+                <div>
+                  <div class="list-item">
+                    <span class="header-title">{{ t('流程传阅') }}</span>
+                    <router-link
+                      class="opr"
+                      :to="{
+                        path: '/task/processtasks',
+                        query: { name: 'MyCirculation' },
+                      }"
+                    >
+                      {{ t('查看更多') }} 》
+                    </router-link>
+                  </div>
+                  <div v-if="item.read!.length>0">
+                    <div class="list-item readed-mark" v-for="it in item.read" :key="it.id">
+                      <div
+                        class="list-data-item"
+                        :class="it.read ? 'readed' : ''"
+                        @click="ApprovalHandle(it, item.key, 2)"
+                      >
+                        <span class="list-item-title">{{ it.title }}</span>
+                        <span class="list-item-time">{{ it.timeFormat }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <a-empty :image="simpleImage" v-else />
+                </div>
+                <div class="notice-footer">
+                  <span @click="setReadAll(item.key)">{{ t('全部设置已读') }}</span>
+                </div>
+              </div>
+              <div v-else class="h-88">
+                <div v-if="item.list.length > 0" class="h-82">
+                  <div
+                    class="list-item readed-mark"
+                    v-for="it in item.list"
+                    :key="it.id"
+                    :class="it.read ? 'readed' : ''"
+                    @click="
+                      () => {
+                        it.read = 1;
+                        setReadSingle(it.id, item.key);
+                      }
+                    "
+                  >
+                    <span class="list-item-title">
+                      <a-tooltip>
+                        <template #title>{{ it.title }}</template>
+                        {{ it.title }}
+                      </a-tooltip>
+                    </span>
+                    <span class="list-item-time">{{ it.timeFormat }}</span>
+                  </div>
+                  <div class="notice-footer"
+                    ><span @click="setReadAll(item.key)">{{ t('全部设置已读') }}</span
+                    ><span>{{ t('查看更多') }} 》</span></div
+                  >
+                </div>
+                <a-empty :image="simpleImage" v-else />
+              </div>
+            </TabPane>
+          </template>
+        </Tabs>
+        <ApprovalProcess
+          v-if="Approval.visible"
+          :taskId="Approval.taskId || ''"
+          :processId="Approval.processId || ''"
+          :schemaId="Approval.schemaId || ''"
+          :visible="Approval.visible"
+          @close="
+            () => {
+              Approval.visible = false;
+            }
+          "
+        />
+        <LookProcess
+          v-if="LookData.visible"
+          :taskId="LookData.taskId || ''"
+          :processId="LookData.processId || ''"
+          :visible="LookData.visible"
+          @close="
+            () => {
+              LookData.visible = false;
+            }
+          "
+        />
+      </template>
+    </Popover>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, onUnmounted } from 'vue';
+  import { Popover, Tabs, Badge } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { tabListData } from './data';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import {
+    getOaMessage,
+    getOaNews,
+    setOaRead,
+    setSingleRead,
+    setWorkReadAll,
+    getScheduleMsg,
+    setScheduleRead,
+    setScheduleReadAll,
+  } from '/@/api/system/login';
+  import { Empty } from 'ant-design-vue';
+
+  import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
+  import LookProcess from '/@/views/workflow/task/components/LookProcess.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  export default defineComponent({
+    components: {
+      Popover,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      Badge,
+      Icon,
+      ApprovalProcess,
+      LookProcess,
+    },
+    setup() {
+      const Approval = ref<{
+        taskId?: string;
+        processId?: string;
+        schemaId?: string;
+        visible: boolean;
+      }>({
+        visible: false,
+      });
+      const LookData = ref<{
+        taskId?: string;
+        processId?: string;
+        visible: boolean;
+      }>({
+        visible: false,
+      });
+      const { prefixCls } = useDesign('header-notify');
+      let times: any = ref();
+      const listData = ref(tabListData);
+      const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
+      getDatas();
+      times.value = setInterval(() => {
+        getDatas();
+      }, 10000);
+      async function getDatas() {
+        listData.value.forEach((o) => {
+          o.list = [];
+          o.unreadNum = 0;
+          if (o.read) o.read = [];
+        });
+        try {
+          let res = import.meta.env.VITE_GLOB_DISABLE_NEWS ? [] : await getOaNews(1);
+          res.list.forEach((o) => {
+            if (!o.readId) listData.value[0].unreadNum += 1;
+            listData.value[0].list.push({
+              id: o.id,
+              avatar: '',
+              title: o.briefHead,
+              description: '',
+              datetime: o.releaseTime,
+              color: '',
+              type: '3',
+              read: o.isRead,
+            });
+          });
+          let res1 = import.meta.env.VITE_GLOB_DISABLE_NEWS ? [] : await getOaNews(2);
+          res1.list.forEach((o) => {
+            if (!o.readId) listData.value[1].unreadNum += 1;
+            listData.value[1].list.push({
+              id: o.id,
+              avatar: '',
+              title: o.briefHead,
+              description: '',
+              datetime: o.releaseTime,
+              color: '',
+              type: '3',
+              read: o.isRead,
+            });
+          });
+          let res2 = import.meta.env.VITE_GLOB_DISABLE_NEWS ? [] : await getOaMessage();
+          res2.forEach((o) => {
+            if (o.messageType === 0) {
+              if (!o.isRead) listData.value[2].unreadNum += 1;
+              listData.value[2].list.push({
+                id: o.id,
+                avatar: '',
+                title: o.messageContent,
+                description: '',
+                datetime: o.sendTime,
+                timeFormat: o.timeFormat,
+                color: '',
+                type: '3',
+                read: o.isRead,
+              });
+            } else if (o.messageType == 1) {
+              if (!o.isRead) listData.value[3].unreadNum += 1;
+              listData.value[3].list.push({
+                id: o.id,
+                avatar: '',
+                title: o.messageContent,
+                description: '',
+                datetime: o.sendTime,
+                timeFormat: o.timeFormat,
+                color: '',
+                type: '3',
+                taskId: o.objectId,
+                processId: o.processId,
+                schemaId: o.schemaId,
+                read: o.isRead,
+              });
+            } else if (o.messageType == 2) {
+              if (!o.isRead) listData.value[3].unreadNum += 1;
+              listData.value[3].read?.push({
+                id: o.id,
+                avatar: '',
+                title: o.messageContent,
+                description: '',
+                datetime: o.sendTime,
+                read: o.isRead,
+                timeFormat: o.timeFormat,
+                color: '',
+                type: '3',
+                taskId: o.objectId,
+                processId: o.processId,
+              });
+            }
+          });
+          let res3 = await getScheduleMsg();
+          res3.list.forEach((item) => (item.read = item.isRead));
+          listData.value[2].unreadNum = res3.list.filter((x) => !x.isRead).length;
+          listData.value[2].list.push(...res3.list);
+        } catch (error) {
+          clearInterval(times.value);
+        }
+      }
+
+      const count = computed(() => {
+        let count = 0;
+        for (let i = 0; i < listData.value.length; i++) {
+          count += listData.value[i].unreadNum;
+        }
+        return count;
+      });
+
+      async function setReadAll(type) {
+        if (type == 1 || type == 2) {
+          let ids: string[] = [];
+
+          listData.value[type - 1].list.forEach((o) => {
+            o.read = 1;
+            ids.push(o.id);
+          });
+
+          await setOaRead(ids);
+        } else if (type == 3) {
+          await setScheduleReadAll();
+          listData.value[type - 1].list.forEach((o) => {
+            o.read = 1;
+          });
+        } else if (type == 4) {
+          listData.value[type - 1].list.forEach((o) => {
+            o.read = 1;
+          });
+          await setWorkReadAll();
+        }
+        listData.value[type - 1].unreadNum = 0;
+      }
+      async function setReadSingle(ids, num) {
+        if (num == 3) {
+          await setScheduleRead([ids]);
+        } else if (num == 4) {
+          await setSingleRead(ids);
+        } else {
+          await setOaRead([ids]);
+        }
+        if (listData.value[num - 1].unreadNum > 0) listData.value[num - 1].unreadNum -= 1;
+      }
+      onUnmounted(() => {
+        clearInterval(times.value);
+      });
+      function ApprovalHandle(it, key, type) {
+        if (type == 1) {
+          Approval.value = {
+            taskId: it.taskId,
+            processId: it.processId,
+            schemaId: it.schemaId,
+            visible: true,
+          };
+        } else {
+          LookData.value = {
+            taskId: it.taskId,
+            processId: it.processId,
+            visible: true,
+          };
+        }
+        it.read = 1;
+        setReadSingle(it.id, key);
+      }
+      return {
+        prefixCls,
+        listData,
+        count,
+        setReadAll,
+        simpleImage,
+        numberStyle: {
+          top: '18px',
+          right: '8px',
+        },
+        setReadSingle,
+        ApprovalHandle,
+        Approval,
+        LookData,
+        t,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-header-notify';
+
+  .@{prefix-cls} {
+    padding-top: 2px;
+
+    &__overlay {
+      width: 380px;
+    }
+
+    .ant-tabs-content {
+      width: 300px;
+    }
+
+    .ant-badge {
+      font-size: 18px;
+
+      .ant-badge-multiple-words {
+        padding: 0 4px;
+      }
+
+      svg {
+        width: 0.9em;
+      }
+    }
+  }
+</style>
+<style scoped lang="less">
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f2f2f2;
+    font-weight: 400;
+    font-size: 12px;
+    height: 36px;
+    cursor: pointer;
+
+    .header-title {
+      font-weight: 700;
+      font-size: 14px;
+    }
+
+    .opr {
+      color: #02a7f0;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    &.readed {
+      color: gray;
+    }
+  }
+
+  .list-data-item {
+    display: flex;
+    height: 36px;
+    cursor: pointer;
+    border-bottom: 1px solid #f2f2f2;
+    justify-content: space-between;
+    align-items: center;
+
+    &.readed {
+      color: gray;
+    }
+  }
+
+  .list-item-title {
+    width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-item-time {
+    text-align: right;
+  }
+
+  .readed-mark {
+    color: #02a7f0;
+  }
+
+  .notice-footer {
+    display: flex;
+    justify-content: space-around;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #f2f2f2;
+    font-size: 12px;
+    color: #02a7f0;
+    cursor: pointer;
+  }
+</style>

src/layouts/default/header/components/user-dropdown/DropDown.vue

@@ -0,0 +1,173 @@
+<template>
+    <Dropdown :overlayClassName="`${prefixCls}-dropdown-overlay`" placement="bottomRight">
+        <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
+            <span style="border-left: 1px solid rgb(255 255 255 / 30%); height: 30px; padding-right: 15px"></span>
+            <div style="margin-right: 12px; height: 30px; margin-top: -10px">
+                <a-image :height="24" :src="getUserInfo.avatar" :width="24" :fallback="headerImg" />
+            </div>
+            <span :class="`${prefixCls}__info hidden md:block`">
+                <span :class="`${prefixCls}__name  `" class="truncate">
+                    {{ getUserInfo.name }}
+                </span>
+            </span>
+        </span>
+
+        <template #overlay>
+            <AMenu @click="handleMenuClick">
+                <MenuItem key="usercenter" :text="t('用户中心')" icon="ant-design:user-switch-outlined" />
+                <MenuItem v-if="getUseLockPage" key="lock" :text="t('锁定屏幕')" icon="ion:lock-closed-outline" />
+                <MenuItem v-if="showSettings" key="sysSettings" icon="ion:color-filter-outline" text="主题设置" @click="showThemeSetting" />
+                <MenuDivider />
+                <MenuItem key="logout" :text="t('退出系统')" icon="ion:power-outline" />
+            </AMenu>
+        </template>
+    </Dropdown>
+    <LockAction @register="register" />
+</template>
+<script lang="ts">
+    // components
+    import { Dropdown, Menu } from 'ant-design-vue';
+
+    import { defineComponent, computed } from 'vue';
+
+    import { DOC_URL } from '/@/settings/siteSetting';
+
+    import { useUserStore } from '/@/store/modules/user';
+    import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useDesign } from '/@/hooks/web/useDesign';
+    import { useModal } from '/@/components/Modal';
+
+    import headerImg from '/@/assets/images/header.jpg';
+    import { propTypes } from '/@/utils/propTypes';
+    import { openWindow } from '/@/utils';
+
+    import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+    import { PageEnum } from '/@/enums/pageEnum';
+    import { useGo } from '/@/hooks/web/usePage';
+
+    // type MenuEvent = 'logout' | 'doc' | 'lock' | 'usercenter';
+
+    export default defineComponent({
+        name: 'UserDropdown',
+        components: {
+            Dropdown,
+            AMenu: Menu,
+            MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+            MenuDivider: Menu.Divider,
+            LockAction: createAsyncComponent(() => import('../lock/LockModal.vue'))
+        },
+        props: {
+            theme: propTypes.oneOf(['dark', 'light']),
+            showSettings: Boolean
+        },
+        setup() {
+            const { prefixCls } = useDesign('header-user-dropdown');
+            const { t } = useI18n();
+            const { getUseLockPage } = useHeaderSetting();
+            const userStore = useUserStore();
+            const go = useGo();
+
+            const getUserInfo = computed(() => {
+                const { name = '', avatar, desc } = userStore.getUserInfo || {};
+                return { name, avatar: avatar || headerImg, desc };
+            });
+
+            const [register, { openModal }] = useModal();
+
+            function handleLock() {
+                openModal(true);
+            }
+
+            //  login out
+            function handleLoginOut() {
+                userStore.confirmLoginOut();
+            }
+
+            // open doc
+            function openDoc() {
+                openWindow(DOC_URL);
+            }
+
+            // updatePwd
+            function openUserCenter() {
+                go(PageEnum.USER_CENTER);
+            }
+
+            function handleMenuClick(e) {
+                switch (e.key) {
+                    case 'logout':
+                        handleLoginOut();
+                        break;
+                    case 'doc':
+                        openDoc();
+                        break;
+                    case 'lock':
+                        handleLock();
+                        break;
+                    case 'usercenter':
+                        openUserCenter();
+                        break;
+                }
+            }
+
+            return {
+                prefixCls,
+                t,
+                getUserInfo,
+                handleMenuClick,
+                register,
+                getUseLockPage,
+                headerImg
+            };
+        },
+        methods: {
+            showThemeSetting() {
+                this.$emit('menuClick', 'themeSetting');
+            }
+        }
+    });
+</script>
+<style lang="less">
+    @prefix-cls: ~'@{namespace}-header-user-dropdown';
+
+    .@{prefix-cls} {
+        height: @header-height;
+        padding: 0 0 0 10px;
+        padding-right: 10px;
+        overflow: hidden;
+        font-size: 12px;
+        cursor: pointer;
+        align-items: center;
+
+        &__name {
+            font-size: 14px;
+        }
+
+        // &--dark {
+        //   &:hover {
+        //     background-color: @header-dark-bg-hover-color;
+        //   }
+        // }
+
+        &--light {
+            &:hover {
+                background-color: @header-light-bg-hover-color;
+            }
+
+            .@{prefix-cls}__name {
+                color: @text-color-base;
+            }
+
+            .@{prefix-cls}__desc {
+                color: @header-light-desc-color;
+            }
+        }
+
+        &-dropdown-overlay {
+            .ant-dropdown-menu-item {
+                min-width: 160px;
+            }
+        }
+    }
+</style>

src/layouts/default/header/components/user-dropdown/DropMenuItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <MenuItem :key="itemKey">
+    <span class="flex items-center">
+      <Icon :icon="icon" class="mr-1" />
+      <span>{{ text }}</span>
+    </span>
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { Menu } from 'ant-design-vue';
+
+  import { computed, defineComponent, getCurrentInstance } from 'vue';
+
+  import Icon from '/@/components/Icon/index';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'DropdownMenuItem',
+    components: { MenuItem: Menu.Item, Icon },
+    props: {
+      // eslint-disable-next-line
+      key: propTypes.string,
+      text: propTypes.string,
+      icon: propTypes.string,
+    },
+    setup(props) {
+      const instance = getCurrentInstance();
+      const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
+      return { itemKey };
+    },
+  });
+</script>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <Dropdown placement="bottomRight" :overlayClassName="`${prefixCls}-dropdown-overlay`">
+    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
+      <span
+        style="border-left: 1px solid rgb(255 255 255 / 30%); height: 30px; padding-right: 15px"
+      ></span>
+      <div style="margin-right: 12px; height: 30px; margin-top: -12px">
+        <a-image
+          :width="24"
+          :height="24"
+          :src="getUserInfo.avatar"
+          fallback="src/assets/images/header.jpg"
+        />
+      </div>
+      <span :class="`${prefixCls}__info hidden md:block`">
+        <span :class="`${prefixCls}__name  `" class="truncate">
+          {{ getUserInfo.name }}
+        </span>
+      </span>
+    </span>
+
+    <template #overlay>
+      <AMenu @click="handleMenuClick">
+        <MenuItem key="usercenter" :text="t('用户中心')" icon="ant-design:user-switch-outlined" />
+        <MenuItem key="doc" :text="t('文档')" icon="ion:document-text-outline" v-if="getShowDoc" />
+        <MenuDivider v-if="getShowDoc" />
+        <MenuItem
+          v-if="getUseLockPage"
+          key="lock"
+          :text="t('锁定屏幕')"
+          icon="ion:lock-closed-outline"
+        />
+        <MenuItem key="logout" :text="t('退出系统')" icon="ion:power-outline" />
+      </AMenu>
+    </template>
+  </Dropdown>
+  <LockAction @register="register" />
+</template>
+<script lang="ts">
+  // components
+  import { Dropdown, Menu } from 'ant-design-vue';
+
+  import { defineComponent, computed } from 'vue';
+
+  import { DOC_URL } from '/@/settings/siteSetting';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+
+  import headerImg from '/@/assets/images/header.jpg';
+  import { propTypes } from '/@/utils/propTypes';
+  import { openWindow } from '/@/utils';
+
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  // type MenuEvent = 'logout' | 'doc' | 'lock' | 'usercenter';
+
+  export default defineComponent({
+    name: 'UserDropdown',
+    components: {
+      Dropdown,
+      AMenu: Menu,
+      MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+      MenuDivider: Menu.Divider,
+      LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
+    },
+    props: {
+      theme: propTypes.oneOf(['dark', 'light']),
+    },
+    setup() {
+      const { prefixCls } = useDesign('header-user-dropdown');
+      const { t } = useI18n();
+      const { getShowDoc, getUseLockPage } = useHeaderSetting();
+      const userStore = useUserStore();
+      const go = useGo();
+
+      const getUserInfo = computed(() => {
+        const { name = '', avatar, desc } = userStore.getUserInfo || {};
+        return { name, avatar: avatar || headerImg, desc };
+      });
+
+      const [register, { openModal }] = useModal();
+
+      function handleLock() {
+        openModal(true);
+      }
+
+      //  login out
+      function handleLoginOut() {
+        userStore.confirmLoginOut();
+      }
+
+      // open doc
+      function openDoc() {
+        openWindow(DOC_URL);
+      }
+
+      // updatePwd
+      function openUserCenter() {
+        go(PageEnum.USER_CENTER);
+      }
+
+      function handleMenuClick(e) {
+        switch (e.key) {
+          case 'logout':
+            handleLoginOut();
+            break;
+          case 'doc':
+            openDoc();
+            break;
+          case 'lock':
+            handleLock();
+            break;
+          case 'usercenter':
+            openUserCenter();
+            break;
+        }
+      }
+
+      return {
+        prefixCls,
+        t,
+        getUserInfo,
+        handleMenuClick,
+        getShowDoc,
+        register,
+        getUseLockPage,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-header-user-dropdown';
+
+  .@{prefix-cls} {
+    height: @header-height;
+    padding: 0 0 0 10px;
+    padding-right: 10px;
+    overflow: hidden;
+    font-size: 12px;
+    cursor: pointer;
+    align-items: center;
+
+    &__name {
+      font-size: 14px;
+    }
+
+    // &--dark {
+    //   &:hover {
+    //     background-color: @header-dark-bg-hover-color;
+    //   }
+    // }
+
+    &--light {
+      &:hover {
+        background-color: @header-light-bg-hover-color;
+      }
+
+      .@{prefix-cls}__name {
+        color: @text-color-base;
+      }
+
+      .@{prefix-cls}__desc {
+        color: @header-light-desc-color;
+      }
+    }
+
+    &-dropdown-overlay {
+      .ant-dropdown-menu-item {
+        min-width: 160px;
+      }
+    }
+  }
+</style>

src/layouts/default/header/index.less

@@ -0,0 +1,196 @@
+@header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
+@header-prefix-cls: ~'@{namespace}-layout-header';
+@breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
+@logo-prefix-cls: ~'@{namespace}-app-logo';
+
+.@{header-prefix-cls} {
+  display: flex;
+  height: @header-height;
+  padding: 0;
+  margin-left: -1px;
+  line-height: @header-height;
+  color: @white;
+  background-color: @white;
+  align-items: center;
+  justify-content: space-between;
+
+  &--mobile {
+    .@{breadcrumb-prefix-cls},
+    .error-action,
+    .notify-item,
+    .fullscreen-item {
+      display: none;
+    }
+
+    .@{logo-prefix-cls} {
+      min-width: unset;
+      padding-right: 0;
+
+      &__title {
+        display: none;
+      }
+    }
+    .@{header-trigger-prefix-cls} {
+      padding: 0 4px 0 8px !important;
+    }
+    .@{header-prefix-cls}-action {
+      padding-right: 4px;
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-header-fixed-z-index;
+    width: 100%;
+  }
+
+  &-logo {
+    height: @header-height;
+    min-width: 192px;
+    padding: 0 10px;
+    font-size: 14px;
+
+    img {
+      width: @logo-width;
+      height: @logo-width;
+      margin-right: 2px;
+    }
+  }
+
+  &-left {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .@{header-trigger-prefix-cls} {
+      display: flex;
+      height: 100%;
+      padding: 1px 10px 0 1px;
+      cursor: pointer;
+      align-items: center;
+
+      .anticon {
+        font-size: 16px;
+      }
+
+      &.light {
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+
+        svg {
+          fill: #000;
+        }
+      }
+
+      &.dark {
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    height: 100%;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+  }
+
+  &-action {
+    display: flex;
+    min-width: 180px;
+    // padding-right: 12px;
+    align-items: center;
+
+    &__item {
+      display: flex !important;
+      height: @header-height;
+      padding: 0 2px;
+      font-size: 1.2em;
+      cursor: pointer;
+      align-items: center;
+
+      .ant-badge {
+        height: @header-height;
+        line-height: @header-height;
+      }
+
+      .ant-badge-dot {
+        top: 10px;
+        right: 2px;
+      }
+    }
+
+    span[role='img'] {
+      padding: 0 2px;
+    }
+  }
+
+  &--light {
+    background-color: @white !important;
+    border-bottom: 1px solid @header-light-bottom-border-color;
+    border-left: 1px solid @header-light-bottom-border-color;
+
+    .@{header-prefix-cls}-logo {
+      color: @text-color-base;
+
+      &:hover {
+        background-color: @header-light-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        color: @text-color-base;
+
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+      }
+
+      &-icon,
+      span[role='img'] {
+        color: @text-color-base;
+      }
+    }
+  }
+
+  &--dark {
+    background-color: @header-dark-bg-color !important;
+    // border-bottom: 1px solid @border-color-base;
+    border-left: 1px solid @border-color-base;
+    .@{header-prefix-cls}-logo {
+      &:hover {
+        background-color: @header-dark-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        .app-iconify {
+          padding: 0 10px;
+          // font-size: 16px !important;
+        }
+
+        .ant-badge {
+          span {
+            color: @white;
+          }
+        }
+
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+}

src/layouts/default/header/index.vue

@@ -0,0 +1,173 @@
+<template>
+    <LayHeader :class="getHeaderClass">
+        <!-- left start -->
+
+        <div :class="`${prefixCls}-left`">
+            <!-- logo -->
+            <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" :show-title="!getCollapsed" />
+            <LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile" :theme="getHeaderTheme" :sider="false" />
+        </div>
+        <!-- left end -->
+        <div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
+            <LayoutBreadcrumb :theme="getHeaderTheme" />
+        </div>
+        <!-- menu start -->
+        <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+            <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
+        </div>
+        <!-- menu-end -->
+
+        <!-- action  -->
+        <div :class="`${prefixCls}-action`">
+            <LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
+            <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+            <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
+
+            <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
+
+            <UserTenantChange v-if="getAppEnvConfig().VITE_GLOB_TENANT_ENABLED" />
+            <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
+            <UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
+        </div>
+    </LayHeader>
+</template>
+<script lang="ts">
+    import { defineComponent, unref, computed, ref } from 'vue';
+
+    import { propTypes } from '/@/utils/propTypes';
+
+    import { Layout } from 'ant-design-vue';
+    import { AppLogo } from '/@/components/Application';
+    import LayoutMenu from '../menu/index.vue';
+    import LayoutTrigger from '../trigger/index.vue';
+
+    import { AppSearch } from '/@/components/Application';
+
+    import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+    import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+    import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+    import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+    import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+    import { UserTenantChange } from '/@/components/Application';
+
+    import { LayoutBreadcrumb, Notify, ErrorAction } from './components';
+    import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
+    import { useAppInject } from '/@/hooks/web/useAppInject';
+    import { useDesign } from '/@/hooks/web/useDesign';
+
+    import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+    import { useLocale } from '/@/locales/useLocale';
+    import {getAppEnvConfig} from "/@/utils/env";
+
+    export default defineComponent({
+        name: 'LayoutHeader',
+        methods: {getAppEnvConfig},
+        components: {
+            LayHeader: Layout.Header,
+            AppLogo,
+            LayoutTrigger,
+            LayoutBreadcrumb,
+            LayoutMenu,
+            UserDropDown,
+            Notify,
+            AppSearch,
+            ErrorAction,
+            SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
+                loading: true
+            }),
+            UserTenantChange
+        },
+        props: {
+            fixed: propTypes.bool
+        },
+        setup(props) {
+            const { prefixCls } = useDesign('layout-header');
+            const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar, getCollapsed } = useMenuSetting();
+            const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
+
+            const { getHeaderTheme, getShowFullScreen, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo, getShowHeader, getShowSearch } = useHeaderSetting();
+
+            const { getShowLocalePicker } = useLocale();
+
+            const { getIsMobile } = useAppInject();
+
+            const getHeaderClass = computed(() => {
+                const theme = unref(getHeaderTheme);
+                return [
+                    prefixCls,
+                    {
+                        [`${prefixCls}--fixed`]: props.fixed,
+                        [`${prefixCls}--mobile`]: unref(getIsMobile),
+                        [`${prefixCls}--${theme}`]: theme
+                    }
+                ];
+            });
+
+            const getShowSetting = computed(() => {
+                if (!unref(getShowSettingButton)) {
+                    return false;
+                }
+                const settingButtonPosition = unref(getSettingButtonPosition);
+
+                if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+                    return unref(getShowHeader);
+                }
+                return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+            });
+
+            const getLogoWidth = computed(() => {
+                if (!unref(getIsMixMode) || unref(getIsMobile)) {
+                    return {};
+                }
+                const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+                return { width: `${width}px` };
+            });
+
+            const getSplitType = computed(() => {
+                return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
+            });
+
+            const getMenuMode = computed(() => {
+                return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
+            });
+
+            const drawer = ref();
+            function onMenuClick(name) {
+                if (name === 'themeSetting') {
+                    drawer.value.openDrawer(true);
+                }
+            }
+
+            return {
+                prefixCls,
+                getHeaderClass,
+                getShowHeaderLogo,
+                getHeaderTheme,
+                getShowHeaderTrigger,
+                getIsMobile,
+                getShowBread,
+                getShowContent,
+                getSplitType,
+                getSplit,
+                getMenuMode,
+                getShowTopMenu,
+                getShowLocalePicker,
+                getShowFullScreen,
+                getShowNotice,
+                getUseErrorHandle,
+                getLogoWidth,
+                getIsMixSidebar,
+                getShowSettingButton,
+                getShowSetting,
+                getShowSearch,
+                getCollapsed,
+                onMenuClick,
+                drawer
+            };
+        }
+    });
+</script>
+<style lang="less">
+    @import url('./index.less');
+</style>

src/layouts/default/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <Layout :class="prefixCls" v-bind="lockEvents">
+    <LayoutFeatures  v-if="showSide"/>
+    <LayoutHeader fixed v-if="getShowFullHeaderRef && showSide"/>
+    <Layout :class="[layoutClass]">
+      <LayoutSideBar v-if="(getShowSidebar || getIsMobile) && showSide"/>
+      <Layout :class="`${prefixCls}-main`">
+        <LayoutMultipleHeader v-if="showSide"/>
+        <LayoutContent />
+        <LayoutFooter />
+      </Layout>
+    </Layout>
+  </Layout>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, unref, ref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  import LayoutHeader from './header/index.vue';
+  import LayoutContent from './content/index.vue';
+  import LayoutSideBar from './sider/index.vue';
+  import LayoutMultipleHeader from './header/MultipleHeader.vue';
+
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLockPage } from '/@/hooks/web/useLockPage';
+
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import useGlobalFlag from '/@/hooks/core/useGlobalFlag';
+  import { useRoute } from 'vue-router';
+
+  export default defineComponent({
+    name: 'DefaultLayout',
+    components: {
+      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
+      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
+      LayoutHeader,
+      LayoutContent,
+      LayoutSideBar,
+      LayoutMultipleHeader,
+      Layout,
+    },
+    setup() {
+      const { prefixCls } = useDesign('default-layout');
+      const { getIsMobile } = useAppInject();
+      const { getShowFullHeaderRef } = useHeaderSetting();
+      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
+      const globalFlag = useGlobalFlag();
+      const route = useRoute();
+      let showSide = ref(true)
+      const { isSingleLogin } = globalFlag;
+      if (route.query.isSingleLogin) {
+        isSingleLogin.value = true
+      }
+      if (isSingleLogin.value) {
+        showSide.value = false
+      }
+
+      // Create a lock screen monitor
+      const lockEvents = useLockPage();
+
+      const layoutClass = computed(() => {
+        let cls: string[] = ['ant-layout'];
+        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+          cls.push('ant-layout-has-sider');
+        }
+        return cls;
+      });
+
+      return {
+        getShowFullHeaderRef,
+        getShowSidebar,
+        prefixCls,
+        getIsMobile,
+        getIsMixSidebar,
+        layoutClass,
+        lockEvents,
+        showSide
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-default-layout';
+
+  .@{prefix-cls} {
+    display: flex;
+    width: 100%;
+    min-height: 100%;
+    background-color: @content-bg;
+    flex-direction: column;
+
+    > .ant-layout {
+      min-height: 100%;
+      overflow-x: auto;
+    }
+
+    &-main {
+      width: 100%;
+      margin-left: 1px;
+      min-width: 1000px;
+    }
+  }
+</style>

src/layouts/default/menu/index.vue

@@ -0,0 +1,197 @@
+<script lang="tsx">
+  import type { PropType, CSSProperties } from 'vue';
+
+  import { computed, defineComponent, unref, toRef } from 'vue';
+  import { BasicMenu } from '/@/components/Menu';
+  import { SimpleMenu } from '/@/components/SimpleMenu';
+  import { AppLogo } from '/@/components/Application';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { ScrollContainer } from '/@/components/Container';
+
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useSplitMenu } from './useLayoutMenu';
+  import { openWindow } from '/@/utils';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isUrl } from '/@/utils/is';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'LayoutMenu',
+    props: {
+      theme: propTypes.oneOf(['light', 'dark']),
+
+      splitType: {
+        type: Number as PropType<MenuSplitTyeEnum>,
+        default: MenuSplitTyeEnum.NONE,
+      },
+
+      isHorizontal: propTypes.bool,
+      // menu Mode
+      menuMode: {
+        type: [String] as PropType<Nullable<MenuModeEnum>>,
+        default: '',
+      },
+    },
+    setup(props) {
+      const go = useGo();
+
+      const {
+        getMenuMode,
+        getMenuType,
+        getMenuTheme,
+        getCollapsed,
+        getCollapsedShowTitle,
+        getAccordion,
+        getIsHorizontal,
+        getIsSidebarType,
+        getSplit,
+      } = useMenuSetting();
+      const { getShowLogo } = useRootSetting();
+
+      const { prefixCls } = useDesign('layout-menu');
+
+      const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
+
+      const { getIsMobile } = useAppInject();
+
+      const getComputedMenuMode = computed(() =>
+        unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode),
+      );
+
+      const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
+
+      const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
+
+      const getUseScroll = computed(() => {
+        return (
+          !unref(getIsHorizontal) &&
+          (unref(getIsSidebarType) ||
+            props.splitType === MenuSplitTyeEnum.LEFT ||
+            props.splitType === MenuSplitTyeEnum.NONE)
+        );
+      });
+
+      const getWrapperStyle = computed((): CSSProperties => {
+        return {
+          height: `calc(100% - ${unref(getIsShowLogo) ? '60px' : '0px'})`,
+        };
+      });
+
+      const getLogoClass = computed(() => {
+        return [
+          `${prefixCls}-logo`,
+          unref(getComputedMenuTheme),
+          {
+            [`${prefixCls}--mobile`]: unref(getIsMobile),
+          },
+        ];
+      });
+
+      const getCommonProps = computed(() => {
+        const menus = unref(menusRef);
+        return {
+          menus,
+          beforeClickFn: beforeMenuClickFn,
+          items: menus,
+          theme: unref(getComputedMenuTheme),
+          accordion: unref(getAccordion),
+          collapse: unref(getCollapsed),
+          collapsedShowTitle: unref(getCollapsedShowTitle),
+          onMenuClick: handleMenuClick,
+        };
+      });
+      /**
+       * click menu
+       * @param menu
+       */
+
+      function handleMenuClick(path: string) {
+        go(path);
+      }
+
+      /**
+       * before click menu
+       * @param menu
+       */
+      async function beforeMenuClickFn(path: string) {
+        if (!isUrl(path)) {
+          return true;
+        }
+        openWindow(path);
+        return false;
+      }
+
+      function renderHeader() {
+        if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null;
+
+        return (
+          <AppLogo
+            showTitle={!unref(getCollapsed)}
+            class={unref(getLogoClass)}
+            theme={unref(getComputedMenuTheme)}
+          />
+        );
+      }
+
+      function renderMenu() {
+        const { menus, ...menuProps } = unref(getCommonProps);
+        // console.log(menus);
+        if (!menus || !menus.length) return null;
+        return !props.isHorizontal ? (
+          <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
+        ) : (
+          <BasicMenu
+            {...(menuProps as any)}
+            isHorizontal={props.isHorizontal}
+            type={unref(getMenuType)}
+            showLogo={unref(getIsShowLogo)}
+            mode={unref(getComputedMenuMode as any)}
+            items={menus}
+          />
+        );
+      }
+
+      return () => {
+        return (
+          <>
+            {renderHeader()}
+            {unref(getUseScroll) ? (
+              <ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer>
+            ) : (
+              renderMenu()
+            )}
+          </>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-menu';
+  @logo-prefix-cls: ~'@{namespace}-app-logo';
+
+  .@{prefix-cls} {
+    &-logo {
+      height: @header-height;
+      padding: 10px 4px 10px 10px;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+      }
+    }
+
+    &--mobile {
+      .@{logo-prefix-cls} {
+        &__title {
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>

src/layouts/default/menu/useLayoutMenu.ts

@@ -0,0 +1,109 @@
+import type { Menu } from '/@/router/types';
+import type { Ref } from 'vue';
+import { watch, unref, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
+import { useThrottleFn } from '@vueuse/core';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { useAppInject } from '/@/hooks/web/useAppInject';
+
+export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
+  // Menu array
+  const menusRef = ref<Menu[]>([]);
+  const { currentRoute } = useRouter();
+  const { getIsMobile } = useAppInject();
+  const permissionStore = usePermissionStore();
+  const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting();
+
+  const throttleHandleSplitLeftMenu = useThrottleFn(handleSplitLeftMenu, 50);
+
+  const splitNotLeft = computed(
+    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal),
+  );
+
+  const getSplitLeft = computed(
+    () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT,
+  );
+
+  const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
+
+  const normalType = computed(() => {
+    return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
+  });
+
+  watch(
+    [() => unref(currentRoute).path, () => unref(splitType)],
+    async ([path]: [string, MenuSplitTyeEnum]) => {
+      if (unref(splitNotLeft) || unref(getIsMobile)) return;
+
+      const { meta } = unref(currentRoute);
+      const currentActiveMenu = meta.currentActiveMenu as string;
+      let parentPath = await getCurrentParentPath(path);
+      if (!parentPath) {
+        parentPath = await getCurrentParentPath(currentActiveMenu);
+      }
+      parentPath && throttleHandleSplitLeftMenu(parentPath);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  // Menu changes
+  watch(
+    [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
+    () => {
+      genMenus();
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  // split Menu changes
+  watch(
+    () => getSplit.value,
+    () => {
+      if (unref(splitNotLeft)) return;
+      genMenus();
+    },
+  );
+
+  // Handle left menu split
+  async function handleSplitLeftMenu(parentPath: string) {
+    if (unref(getSplitLeft) || unref(getIsMobile)) return;
+
+    // spilt mode left
+    const children = await getChildrenMenus(parentPath);
+
+    if (!children || !children.length) {
+      setMenuSetting({ hidden: true });
+      menusRef.value = [];
+      return;
+    }
+
+    setMenuSetting({ hidden: false });
+    menusRef.value = children;
+  }
+
+  // get menus
+  async function genMenus() {
+    // normal mode
+    if (unref(normalType) || unref(getIsMobile)) {
+      menusRef.value = await getMenus();
+      return;
+    }
+
+    // split-top
+    if (unref(getSpiltTop)) {
+      const shallowMenus = await getShallowMenus();
+
+      menusRef.value = shallowMenus;
+      return;
+    }
+  }
+
+  return { menusRef };
+}

src/layouts/default/setting/SettingDrawer.tsx

@@ -0,0 +1,420 @@
+import { defineComponent, computed, unref } from 'vue';
+import { BasicDrawer } from '/@/components/Drawer/index';
+import { Divider } from 'ant-design-vue';
+import {
+  TypePicker,
+  ThemeColorPicker,
+  SettingFooter,
+  SwitchItem,
+  SelectItem,
+  InputNumberItem,
+} from './components';
+
+// import { AppDarkModeToggle } from '/@/components/Application';
+
+import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+import { baseHandler } from './handler';
+
+import {
+  HandlerEnum,
+  contentModeOptions,
+  topMenuAlignOptions,
+  getMenuTriggerOptions,
+  routerTransitionOptions,
+  menuTypeList,
+  mixSidebarTriggerOptions,
+} from './enum';
+
+import {
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+  APP_PRESET_COLOR_LIST,
+} from '/@/settings/designSetting';
+
+const { t } = useI18n();
+
+export default defineComponent({
+  name: 'SettingDrawer',
+  setup(_, { attrs }) {
+    const {
+      getContentMode,
+      getShowFooter,
+      getShowBreadCrumb,
+      getShowBreadCrumbIcon,
+      getShowLogo,
+      getFullContent,
+      getColorWeak,
+      getGrayMode,
+      getLockTime,
+      //getShowDarkModeToggle,
+      getThemeColor,
+    } = useRootSetting();
+
+    const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
+      useTransitionSetting();
+
+    const {
+      getIsHorizontal,
+      getShowMenu,
+      getMenuType,
+      getTrigger,
+      getCollapsedShowTitle,
+      getMenuFixed,
+      getCollapsed,
+      getCanDrag,
+      getTopMenuAlign,
+      getAccordion,
+      getMenuWidth,
+      getMenuBgColor,
+      getIsTopMenu,
+      getSplit,
+      getIsMixSidebar,
+      getCloseMixSidebarOnChange,
+      getMixSideTrigger,
+      getMixSideFixed,
+    } = useMenuSetting();
+
+    const {
+      getShowHeader,
+      getFixed: getHeaderFixed,
+      getHeaderBgColor,
+      getShowSearch,
+    } = useHeaderSetting();
+
+    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
+
+    const getShowMenuRef = computed(() => {
+      return unref(getShowMenu) && !unref(getIsHorizontal);
+    });
+
+    function renderSidebar() {
+      return (
+        <>
+          <TypePicker
+            menuTypeList={menuTypeList}
+            handler={(item: typeof menuTypeList[0]) => {
+              baseHandler(HandlerEnum.CHANGE_LAYOUT, {
+                mode: item.mode,
+                type: item.type,
+                split: unref(getIsHorizontal) ? false : undefined,
+              });
+            }}
+            def={unref(getMenuType)}
+          />
+        </>
+      );
+    }
+
+    function renderHeaderTheme() {
+      return (
+        <ThemeColorPicker
+          colorList={HEADER_PRESET_BG_COLOR_LIST}
+          def={unref(getHeaderBgColor)}
+          event={HandlerEnum.HEADER_THEME}
+        />
+      );
+    }
+
+    function renderSiderTheme() {
+      return (
+        <ThemeColorPicker
+          colorList={SIDE_BAR_BG_COLOR_LIST}
+          def={unref(getMenuBgColor)}
+          event={HandlerEnum.MENU_THEME}
+        />
+      );
+    }
+
+    function renderMainTheme() {
+      return (
+        <ThemeColorPicker
+          colorList={APP_PRESET_COLOR_LIST}
+          def={unref(getThemeColor)}
+          event={HandlerEnum.CHANGE_THEME_COLOR}
+        />
+      );
+    }
+
+    /**
+     * @description:
+     */
+    function renderFeatures() {
+      let triggerDef = unref(getTrigger);
+
+      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
+      const some = triggerOptions.some((item) => item.value === triggerDef);
+      if (!some) {
+        triggerDef = TriggerEnum.FOOTER;
+      }
+
+      return (
+        <>
+          <SwitchItem
+            title={t('分割菜单')}
+            event={HandlerEnum.MENU_SPLIT}
+            def={unref(getSplit)}
+            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
+          />
+          <SwitchItem
+            title={t('固定展开菜单')}
+            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
+            def={unref(getMixSideFixed)}
+            disabled={!unref(getIsMixSidebar)}
+          />
+
+          <SwitchItem
+            title={t('切换页面关闭菜单')}
+            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
+            def={unref(getCloseMixSidebarOnChange)}
+            disabled={!unref(getIsMixSidebar)}
+          />
+          <SwitchItem
+            title={t('折叠菜单')}
+            event={HandlerEnum.MENU_COLLAPSED}
+            def={unref(getCollapsed)}
+            disabled={!unref(getShowMenuRef)}
+          />
+
+          <SwitchItem
+            title={t('侧边菜单拖拽')}
+            event={HandlerEnum.MENU_HAS_DRAG}
+            def={unref(getCanDrag)}
+            disabled={!unref(getShowMenuRef)}
+          />
+          <SwitchItem
+            title={t('菜单搜索')}
+            event={HandlerEnum.HEADER_SEARCH}
+            def={unref(getShowSearch)}
+            disabled={!unref(getShowHeader)}
+          />
+          <SwitchItem
+            title={t('侧边菜单手风琴模式')}
+            event={HandlerEnum.MENU_ACCORDION}
+            def={unref(getAccordion)}
+            disabled={!unref(getShowMenuRef)}
+          />
+
+          <SwitchItem
+            title={t('折叠菜单显示名称')}
+            event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
+            def={unref(getCollapsedShowTitle)}
+            disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
+          />
+
+          <SwitchItem
+            title={t('固定header')}
+            event={HandlerEnum.HEADER_FIXED}
+            def={unref(getHeaderFixed)}
+            disabled={!unref(getShowHeader)}
+          />
+          <SwitchItem
+            title={t('固定Sidebar')}
+            event={HandlerEnum.MENU_FIXED}
+            def={unref(getMenuFixed)}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
+          />
+          <SelectItem
+            title={t('混合菜单触发方式')}
+            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
+            def={unref(getMixSideTrigger)}
+            options={mixSidebarTriggerOptions}
+            disabled={!unref(getIsMixSidebar)}
+          />
+          <SelectItem
+            title={t('顶部菜单布局')}
+            event={HandlerEnum.MENU_TOP_ALIGN}
+            def={unref(getTopMenuAlign)}
+            options={topMenuAlignOptions}
+            disabled={
+              !unref(getShowHeader) ||
+              unref(getSplit) ||
+              (!unref(getIsTopMenu) && !unref(getSplit)) ||
+              unref(getIsMixSidebar)
+            }
+          />
+          <SelectItem
+            title={t('菜单折叠按钮')}
+            event={HandlerEnum.MENU_TRIGGER}
+            def={triggerDef}
+            options={triggerOptions}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
+          />
+          <SelectItem
+            title={t('内容区域宽度')}
+            event={HandlerEnum.CONTENT_MODE}
+            def={unref(getContentMode)}
+            options={contentModeOptions}
+          />
+          <InputNumberItem
+            title={t('自动锁屏')}
+            min={0}
+            event={HandlerEnum.LOCK_TIME}
+            defaultValue={unref(getLockTime)}
+            formatter={(value: string) => {
+              return parseInt(value) === 0 ? `0(${t('不自动锁屏')})` : `${value}${t('分钟')}`;
+            }}
+          />
+          <InputNumberItem
+            title={t('菜单展开宽度')}
+            max={600}
+            min={100}
+            step={10}
+            event={HandlerEnum.MENU_WIDTH}
+            disabled={!unref(getShowMenuRef)}
+            defaultValue={unref(getMenuWidth)}
+            formatter={(value: string) => `${parseInt(value)}px`}
+          />
+        </>
+      );
+    }
+
+    function renderContent() {
+      return (
+        <>
+          <SwitchItem
+            title={t('面包屑')}
+            event={HandlerEnum.SHOW_BREADCRUMB}
+            def={unref(getShowBreadCrumb)}
+            disabled={!unref(getShowHeader)}
+          />
+
+          <SwitchItem
+            title={t('面包屑图标')}
+            event={HandlerEnum.SHOW_BREADCRUMB_ICON}
+            def={unref(getShowBreadCrumbIcon)}
+            disabled={!unref(getShowHeader)}
+          />
+
+          <SwitchItem
+            title={t('标签页')}
+            event={HandlerEnum.TABS_SHOW}
+            def={unref(getShowMultipleTab)}
+          />
+
+          <SwitchItem
+            title={t('标签页刷新按钮')}
+            event={HandlerEnum.TABS_SHOW_REDO}
+            def={unref(getShowRedo)}
+            disabled={!unref(getShowMultipleTab)}
+          />
+
+          <SwitchItem
+            title={t('标签页快捷按钮')}
+            event={HandlerEnum.TABS_SHOW_QUICK}
+            def={unref(getShowQuick)}
+            disabled={!unref(getShowMultipleTab)}
+          />
+          <SwitchItem
+            title={t('标签页折叠按钮')}
+            event={HandlerEnum.TABS_SHOW_FOLD}
+            def={unref(getShowFold)}
+            disabled={!unref(getShowMultipleTab)}
+          />
+
+          <SwitchItem
+            title={t('左侧菜单')}
+            event={HandlerEnum.MENU_SHOW_SIDEBAR}
+            def={unref(getShowMenu)}
+            disabled={unref(getIsHorizontal)}
+          />
+
+          <SwitchItem
+            title={t('顶栏')}
+            event={HandlerEnum.HEADER_SHOW}
+            def={unref(getShowHeader)}
+          />
+          <SwitchItem
+            title="Logo"
+            event={HandlerEnum.SHOW_LOGO}
+            def={unref(getShowLogo)}
+            disabled={unref(getIsMixSidebar)}
+          />
+          <SwitchItem
+            title={t('页脚')}
+            event={HandlerEnum.SHOW_FOOTER}
+            def={unref(getShowFooter)}
+          />
+          <SwitchItem
+            title={t('全屏内容')}
+            event={HandlerEnum.FULL_CONTENT}
+            def={unref(getFullContent)}
+          />
+
+          <SwitchItem
+            title={t('灰色模式')}
+            event={HandlerEnum.GRAY_MODE}
+            def={unref(getGrayMode)}
+          />
+
+          <SwitchItem
+            title={t('色弱模式')}
+            event={HandlerEnum.COLOR_WEAK}
+            def={unref(getColorWeak)}
+          />
+        </>
+      );
+    }
+
+    function renderTransition() {
+      return (
+        <>
+          <SwitchItem
+            title={t('顶部进度条')}
+            event={HandlerEnum.OPEN_PROGRESS}
+            def={unref(getOpenNProgress)}
+          />
+          <SwitchItem
+            title={t('切换loading')}
+            event={HandlerEnum.OPEN_PAGE_LOADING}
+            def={unref(getOpenPageLoading)}
+          />
+
+          <SwitchItem
+            title={t('切换动画')}
+            event={HandlerEnum.OPEN_ROUTE_TRANSITION}
+            def={unref(getEnableTransition)}
+          />
+
+          <SelectItem
+            title={t('动画类型')}
+            event={HandlerEnum.ROUTER_TRANSITION}
+            def={unref(getBasicTransition)}
+            options={routerTransitionOptions}
+            disabled={!unref(getEnableTransition)}
+          />
+        </>
+      );
+    }
+
+    return () => (
+      <BasicDrawer {...attrs} title={t('项目配置')} width={330} class="setting-drawer">
+        {/* {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
+        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />} */}
+        <Divider>{() => t('导航栏模式')}</Divider>
+        {renderSidebar()}
+        <Divider>{() => t('系统主题')}</Divider>
+        {renderMainTheme()}
+        <Divider>{() => t('顶栏主题')}</Divider>
+        {renderHeaderTheme()}
+        <Divider>{() => t('菜单主题')}</Divider>
+        {renderSiderTheme()}
+        <Divider>{() => t('界面功能')}</Divider>
+        {renderFeatures()}
+        <Divider>{() => t('界面显示')}</Divider>
+        {renderContent()}
+        <Divider>{() => t('动画')}</Divider>
+        {renderTransition()}
+        <Divider />
+        <SettingFooter />
+      </BasicDrawer>
+    );
+  },
+});

src/layouts/default/setting/components/InputNumberItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <InputNumber
+      v-bind="$attrs"
+      size="small"
+      :class="`${prefixCls}-input-number`"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { InputNumber } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'InputNumberItem',
+    components: { InputNumber },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      title: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-input-number-item');
+
+      function handleChange(e) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-input-number-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-input-number {
+      width: 126px;
+    }
+  }
+</style>

src/layouts/default/setting/components/SelectItem.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Select
+      v-bind="getBindValue"
+      :class="`${prefixCls}-select`"
+      @change="handleChange"
+      :disabled="disabled"
+      size="small"
+      :options="options"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Select } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SelectItem',
+    components: { Select },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      initValue: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      options: {
+        type: Array as PropType<LabelValueOptions>,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-select-item');
+      const getBindValue = computed(() => {
+        return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
+      });
+
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-select-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-select {
+      width: 126px;
+    }
+  }
+</style>

src/layouts/default/setting/components/SettingFooter.vue

@@ -0,0 +1,99 @@
+<template>
+  <div :class="prefixCls">
+    <a-button type="primary" block @click="handleCopy">
+      <CopyOutlined class="mr-2" />
+      {{ t('拷贝') }}
+    </a-button>
+
+    <a-button color="warning" block @click="handleResetSetting" class="my-3">
+      <RedoOutlined class="mr-2" />
+      {{ t('重置') }}
+    </a-button>
+
+    <a-button color="error" block @click="handleClearAndRedo">
+      <RedoOutlined class="mr-2" />
+      {{ t('清空缓存并返回登录页') }}
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref } from 'vue';
+
+  import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
+
+  import { useAppStore } from '/@/store/modules/app';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useUserStore } from '/@/store/modules/user';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+  import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+  import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+  import defaultSetting from '/@/settings/projectSetting';
+
+  export default defineComponent({
+    name: 'SettingFooter',
+    components: { CopyOutlined, RedoOutlined },
+    setup() {
+      const permissionStore = usePermissionStore();
+      const { prefixCls } = useDesign('setting-footer');
+      const { t } = useI18n();
+      const { createSuccessModal, createMessage } = useMessage();
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const appStore = useAppStore();
+
+      function handleCopy() {
+        const { isSuccessRef } = useCopyToClipboard(
+          JSON.stringify(unref(appStore.getProjectConfig), null, 2),
+        );
+        unref(isSuccessRef) &&
+          createSuccessModal({
+            title: t('操作成功'),
+            content: t('复制成功,请到 src/settings/projectSetting.ts 中修改配置！'),
+          });
+      }
+      function handleResetSetting() {
+        try {
+          appStore.setProjectConfig(defaultSetting);
+          const { colorWeak, grayMode } = defaultSetting;
+          // updateTheme(themeColor);
+          updateColorWeak(colorWeak);
+          updateGrayMode(grayMode);
+          createMessage.success(t('重置成功！'));
+        } catch (error: any) {
+          createMessage.error(error);
+        }
+      }
+
+      function handleClearAndRedo() {
+        localStorage.clear();
+        appStore.resetAllState();
+        permissionStore.resetState();
+        tabStore.resetState();
+        userStore.resetState();
+        location.reload();
+      }
+      return {
+        prefixCls,
+        t,
+        handleCopy,
+        handleResetSetting,
+        handleClearAndRedo,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-footer';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

src/layouts/default/setting/components/SwitchItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Switch
+      v-bind="getBindValue"
+      @change="handleChange"
+      :disabled="disabled"
+      :checkedChildren="t('开')"
+      :unCheckedChildren="t('关')"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Switch } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SwitchItem',
+    components: { Switch },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-switch-item');
+      const { t } = useI18n();
+
+      const getBindValue = computed(() => {
+        return props.def ? { checked: props.def } : {};
+      });
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        t,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-switch-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+</style>

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :class="prefixCls">
+    <template v-for="color in colorList || []" :key="color">
+      <span
+        @click="handleClick(color)"
+        :class="[
+          `${prefixCls}__item`,
+          {
+            [`${prefixCls}__item--active`]: def === color,
+          },
+        ]"
+        :style="{ background: color }"
+      >
+        <CheckOutlined />
+      </span>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { CheckOutlined } from '@ant-design/icons-vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'ThemeColorPicker',
+    components: { CheckOutlined },
+    props: {
+      colorList: {
+        type: Array as PropType<string[]>,
+        defualt: [],
+      },
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      def: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-theme-picker');
+
+      function handleClick(color: string) {
+        props.event && baseHandler(props.event, color);
+      }
+      return {
+        prefixCls,
+        handleClick,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-setting-theme-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 16px 0;
+    justify-content: space-around;
+
+    &__item {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      border-radius: 2px;
+
+      svg {
+        display: none;
+      }
+
+      &--active {
+        border: 1px solid lighten(@primary-color, 10%);
+
+        svg {
+          display: inline-block;
+          margin: 0 0 3px 3px;
+          font-size: 12px;
+          fill: @white !important;
+        }
+      }
+    }
+  }
+</style>

src/layouts/default/setting/components/TypePicker.vue

@@ -0,0 +1,178 @@
+<template>
+  <div :class="prefixCls">
+    <template v-for="item in menuTypeList || []" :key="item.title">
+      <Tooltip :title="item.title" placement="bottom">
+        <div
+          @click="handler(item)"
+          :class="[
+            `${prefixCls}__item`,
+            `${prefixCls}__item--${item.type}`,
+            {
+              [`${prefixCls}__item--active`]: def === item.type,
+            },
+          ]"
+        >
+          <div class="mix-sidebar"></div>
+        </div>
+      </Tooltip>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { Tooltip } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { menuTypeList } from '../enum';
+  export default defineComponent({
+    name: 'MenuTypePicker',
+    components: { Tooltip },
+    props: {
+      menuTypeList: {
+        type: Array as PropType<typeof menuTypeList>,
+        defualt: () => [],
+      },
+      handler: {
+        type: Function as PropType<Fn>,
+        default: () => ({}),
+      },
+      def: {
+        type: String,
+        default: '',
+      },
+    },
+    setup() {
+      const { prefixCls } = useDesign('setting-menu-type-picker');
+
+      return {
+        prefixCls,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-menu-type-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &__item {
+      position: relative;
+      width: 56px;
+      height: 48px;
+      margin-right: 16px;
+      overflow: hidden;
+      cursor: pointer;
+      background-color: #f0f2f5;
+      border-radius: 4px;
+      box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+      &::before,
+      &::after {
+        position: absolute;
+        content: '';
+      }
+
+      &--sidebar,
+      &--light {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 33%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+      }
+
+      &--mix {
+        &::before {
+          top: 0;
+          left: 0;
+          width: 33%;
+          height: 100%;
+          background-color: #fff;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--top-menu {
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--dark {
+        background-color: #273352;
+      }
+
+      &--mix-sidebar {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 25%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+
+        .mix-sidebar {
+          position: absolute;
+          left: 25%;
+          width: 15%;
+          height: 100%;
+          background-color: #fff;
+        }
+      }
+
+      &:hover,
+      &--active {
+        padding: 12px;
+        border: 2px solid @primary-color;
+
+        &::before,
+        &::after {
+          border-radius: 0;
+        }
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+</style>

src/layouts/default/setting/components/index.ts

@@ -0,0 +1,8 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
+export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'));
+export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'));
+export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
+export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
+export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));

src/layouts/default/setting/enum.ts

@@ -0,0 +1,156 @@
+import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import {
+  MenuModeEnum,
+  MenuTypeEnum,
+  TopMenuAlignEnum,
+  TriggerEnum,
+  MixSidebarTriggerEnum,
+} from '/@/enums/menuEnum';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+export enum HandlerEnum {
+  CHANGE_LAYOUT,
+  CHANGE_THEME_COLOR,
+  CHANGE_THEME,
+  // menu
+  MENU_HAS_DRAG,
+  MENU_ACCORDION,
+  MENU_TRIGGER,
+  MENU_TOP_ALIGN,
+  MENU_COLLAPSED,
+  MENU_COLLAPSED_SHOW_TITLE,
+  MENU_WIDTH,
+  MENU_SHOW_SIDEBAR,
+  MENU_THEME,
+  MENU_SPLIT,
+  MENU_FIXED,
+  MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
+  MENU_TRIGGER_MIX_SIDEBAR,
+  MENU_FIXED_MIX_SIDEBAR,
+
+  // header
+  HEADER_SHOW,
+  HEADER_THEME,
+  HEADER_FIXED,
+
+  HEADER_SEARCH,
+
+  TABS_SHOW_QUICK,
+  TABS_SHOW_REDO,
+  TABS_SHOW,
+  TABS_SHOW_FOLD,
+
+  LOCK_TIME,
+  FULL_CONTENT,
+  CONTENT_MODE,
+  SHOW_BREADCRUMB,
+  SHOW_BREADCRUMB_ICON,
+  GRAY_MODE,
+  COLOR_WEAK,
+  SHOW_LOGO,
+  SHOW_FOOTER,
+
+  ROUTER_TRANSITION,
+  OPEN_PROGRESS,
+  OPEN_PAGE_LOADING,
+  OPEN_ROUTE_TRANSITION,
+}
+
+export const contentModeOptions = [
+  {
+    value: ContentEnum.FULL,
+    label: t('流式'),
+  },
+  {
+    value: ContentEnum.FIXED,
+    label: t('定宽'),
+  },
+];
+
+export const topMenuAlignOptions = [
+  {
+    value: TopMenuAlignEnum.CENTER,
+    label: t('居中'),
+  },
+  {
+    value: TopMenuAlignEnum.START,
+    label: t('居左'),
+  },
+  {
+    value: TopMenuAlignEnum.END,
+    label: t('居右'),
+  },
+];
+
+export const getMenuTriggerOptions = (hideTop: boolean) => {
+  return [
+    {
+      value: TriggerEnum.NONE,
+      label: t('不显示'),
+    },
+    {
+      value: TriggerEnum.FOOTER,
+      label: t('底部'),
+    },
+    ...(hideTop
+      ? []
+      : [
+          {
+            value: TriggerEnum.HEADER,
+            label: t('顶部'),
+          },
+        ]),
+  ];
+};
+
+export const routerTransitionOptions = [
+  RouterTransitionEnum.ZOOM_FADE,
+  RouterTransitionEnum.FADE,
+  RouterTransitionEnum.ZOOM_OUT,
+  RouterTransitionEnum.FADE_SIDE,
+  RouterTransitionEnum.FADE_BOTTOM,
+  RouterTransitionEnum.FADE_SCALE,
+].map((item) => {
+  return {
+    label: item,
+    value: item,
+  };
+});
+
+export const menuTypeList = [
+  {
+    title: t('左侧菜单模式'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.SIDEBAR,
+  },
+  // {
+  //   title: t('layout.setting.menuTypeMix'),
+  //   mode: MenuModeEnum.INLINE,
+  //   type: MenuTypeEnum.MIX,
+  // },
+
+  {
+    title: t('顶部菜单模式'),
+    mode: MenuModeEnum.HORIZONTAL,
+    type: MenuTypeEnum.TOP_MENU,
+  },
+  {
+    title: t('左侧菜单混合模式'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX_SIDEBAR,
+  },
+];
+
+export const mixSidebarTriggerOptions = [
+  {
+    value: MixSidebarTriggerEnum.HOVER,
+    label: t('悬停'),
+  },
+  {
+    value: MixSidebarTriggerEnum.CLICK,
+    label: t('点击'),
+  },
+];

src/layouts/default/setting/handler.ts

@@ -0,0 +1,174 @@
+import { HandlerEnum } from './enum';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+
+import { useAppStore } from '/@/store/modules/app';
+import { ProjectConfig } from '/#/config';
+import { changeTheme } from '/@/logics/theme';
+import { updateDarkTheme } from '/@/logics/theme/dark';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+export function baseHandler(event: HandlerEnum, value: any) {
+  const appStore = useAppStore();
+  const config = handler(event, value);
+  appStore.setProjectConfig(config);
+  if (event === HandlerEnum.CHANGE_THEME) {
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
+}
+
+export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
+  const appStore = useAppStore();
+
+  const { getThemeColor, getDarkMode } = useRootSetting();
+  switch (event) {
+    case HandlerEnum.CHANGE_LAYOUT:
+      const { mode, type, split } = value;
+      const splitOpt = split === undefined ? { split } : {};
+
+      return {
+        menuSetting: {
+          mode,
+          type,
+          collapsed: false,
+          show: true,
+          hidden: false,
+          ...splitOpt,
+        },
+      };
+
+    case HandlerEnum.CHANGE_THEME_COLOR:
+      if (getThemeColor.value === value) {
+        return {};
+      }
+      changeTheme(value);
+
+      return { themeColor: value };
+
+    case HandlerEnum.CHANGE_THEME:
+      if (getDarkMode.value === value) {
+        return {};
+      }
+      updateDarkTheme(value);
+
+      return {};
+
+    case HandlerEnum.MENU_HAS_DRAG:
+      return { menuSetting: { canDrag: value } };
+
+    case HandlerEnum.MENU_ACCORDION:
+      return { menuSetting: { accordion: value } };
+
+    case HandlerEnum.MENU_TRIGGER:
+      return { menuSetting: { trigger: value } };
+
+    case HandlerEnum.MENU_TOP_ALIGN:
+      return { menuSetting: { topMenuAlign: value } };
+
+    case HandlerEnum.MENU_COLLAPSED:
+      return { menuSetting: { collapsed: value } };
+
+    case HandlerEnum.MENU_WIDTH:
+      return { menuSetting: { menuWidth: value } };
+
+    case HandlerEnum.MENU_SHOW_SIDEBAR:
+      return { menuSetting: { show: value } };
+
+    case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menuSetting: { collapsedShowTitle: value } };
+
+    case HandlerEnum.MENU_THEME:
+      updateSidebarBgColor(value);
+      return { menuSetting: { bgColor: value } };
+
+    case HandlerEnum.MENU_SPLIT:
+      return { menuSetting: { split: value } };
+
+    case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      return { menuSetting: { closeMixSidebarOnChange: value } };
+
+    case HandlerEnum.MENU_FIXED:
+      return { menuSetting: { fixed: value } };
+
+    case HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      return { menuSetting: { mixSideTrigger: value } };
+
+    case HandlerEnum.MENU_FIXED_MIX_SIDEBAR:
+      return { menuSetting: { mixSideFixed: value } };
+
+    // ============transition==================
+    case HandlerEnum.OPEN_PAGE_LOADING:
+      appStore.setPageLoading(false);
+      return { transitionSetting: { openPageLoading: value } };
+
+    case HandlerEnum.ROUTER_TRANSITION:
+      return { transitionSetting: { basicTransition: value } };
+
+    case HandlerEnum.OPEN_ROUTE_TRANSITION:
+      return { transitionSetting: { enable: value } };
+
+    case HandlerEnum.OPEN_PROGRESS:
+      return { transitionSetting: { openNProgress: value } };
+    // ============root==================
+
+    case HandlerEnum.LOCK_TIME:
+      return { lockTime: value };
+
+    case HandlerEnum.FULL_CONTENT:
+      return { fullContent: value };
+
+    case HandlerEnum.CONTENT_MODE:
+      return { contentMode: value };
+
+    case HandlerEnum.SHOW_BREADCRUMB:
+      return { showBreadCrumb: value };
+
+    case HandlerEnum.SHOW_BREADCRUMB_ICON:
+      return { showBreadCrumbIcon: value };
+
+    case HandlerEnum.GRAY_MODE:
+      updateGrayMode(value);
+      return { grayMode: value };
+
+    case HandlerEnum.SHOW_FOOTER:
+      return { showFooter: value };
+
+    case HandlerEnum.COLOR_WEAK:
+      updateColorWeak(value);
+      return { colorWeak: value };
+
+    case HandlerEnum.SHOW_LOGO:
+      return { showLogo: value };
+
+    // ============tabs==================
+    case HandlerEnum.TABS_SHOW_QUICK:
+      return { multiTabsSetting: { showQuick: value } };
+
+    case HandlerEnum.TABS_SHOW:
+      return { multiTabsSetting: { show: value } };
+
+    case HandlerEnum.TABS_SHOW_REDO:
+      return { multiTabsSetting: { showRedo: value } };
+
+    case HandlerEnum.TABS_SHOW_FOLD:
+      return { multiTabsSetting: { showFold: value } };
+
+    // ============header==================
+    case HandlerEnum.HEADER_THEME:
+      updateHeaderBgColor(value);
+      return { headerSetting: { bgColor: value } };
+
+    case HandlerEnum.HEADER_SEARCH:
+      return { headerSetting: { showSearch: value } };
+
+    case HandlerEnum.HEADER_FIXED:
+      return { headerSetting: { fixed: value } };
+
+    case HandlerEnum.HEADER_SHOW:
+      return { headerSetting: { show: value } };
+    default:
+      return {};
+  }
+}

src/layouts/default/setting/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div @click="openDrawer(true)">
+        <SettingDrawer @register="register" />
+    </div>
+</template>
+<script lang="ts">
+    import { defineComponent, defineExpose } from 'vue';
+    import SettingDrawer from './SettingDrawer';
+
+    import { useDrawer } from '/@/components/Drawer';
+
+    export default defineComponent({
+        name: 'SettingButton',
+        components: { SettingDrawer },
+        setup() {
+            const [register, { openDrawer }] = useDrawer();
+
+            defineExpose({
+                openDrawer
+            });
+
+            return {
+                register,
+                openDrawer
+            };
+        }
+    });
+</script>

src/layouts/default/sider/DragBar.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="getClass" :style="getDragBarStyle"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'DargBar',
+    props: {
+      mobile: Boolean,
+    },
+    setup(props) {
+      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
+
+      const { prefixCls } = useDesign('darg-bar');
+      const getDragBarStyle = computed(() => {
+        if (unref(getCollapsed)) {
+          return { left: `${unref(getMiniWidthNumber)}px` };
+        }
+        return {};
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
+          },
+        ];
+      });
+
+      return {
+        prefixCls,
+        getDragBarStyle,
+        getClass,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-darg-bar';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: @side-drag-z-index;
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    border-top: none;
+    border-bottom: none;
+
+    &--hide {
+      display: none;
+    }
+
+    &:hover {
+      background-color: @primary-color;
+      box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+    }
+  }
+</style>

src/layouts/default/sider/LayoutSider.vue

@@ -0,0 +1,185 @@
+<template>
+  <div
+    v-if="getMenuFixed && !getIsMobile"
+    :style="getHiddenDomStyle"
+    v-show="showClassSideBarRef"
+  ></div>
+  <Sider
+    v-show="showClassSideBarRef"
+    ref="sideRef"
+    breakpoint="lg"
+    collapsible
+    :class="getSiderClass"
+    :width="getMenuWidth"
+    :collapsed="getCollapsed"
+    :collapsedWidth="getCollapsedWidth"
+    :theme="getMenuTheme"
+    @breakpoint="onBreakpointChange"
+    :trigger="getTrigger"
+    v-bind="getTriggerAttr"
+  >
+    <template #trigger v-if="getShowTrigger">
+      <LayoutTrigger />
+    </template>
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
+    <DragBar ref="dragBarRef" />
+  </Sider>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
+
+  import { Layout } from 'ant-design-vue';
+  import LayoutMenu from '../menu/index.vue';
+  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import DragBar from './DragBar.vue';
+  export default defineComponent({
+    name: 'LayoutSideBar',
+    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
+    setup() {
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+
+      const {
+        getCollapsed,
+        getMenuWidth,
+        getSplit,
+        getMenuTheme,
+        getRealWidth,
+        getMenuHidden,
+        getMenuFixed,
+        getIsMixMode,
+        toggleCollapsed,
+      } = useMenuSetting();
+
+      const { prefixCls } = useDesign('layout-sideBar');
+
+      const { getIsMobile } = useAppInject();
+
+      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+
+      useDragLine(sideRef, dragBarRef);
+
+      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+
+      const getMode = computed(() => {
+        return unref(getSplit) ? MenuModeEnum.INLINE : null;
+      });
+
+      const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+      });
+
+      const showClassSideBarRef = computed(() => {
+        return unref(getSplit) ? !unref(getMenuHidden) : true;
+      });
+
+      const getSiderClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--fixed`]: unref(getMenuFixed),
+            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+          },
+        ];
+      });
+
+      const getHiddenDomStyle = computed((): CSSProperties => {
+        const width = `${unref(getRealWidth)}px`;
+        return {
+          width: width,
+          overflow: 'hidden',
+          flex: `0 0 ${width}`,
+          maxWidth: width,
+          minWidth: width,
+          transition: 'all 0.2s',
+        };
+      });
+
+      // 在此处使用计算量可能会导致sider异常
+      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
+      const getTrigger = h(LayoutTrigger);
+
+      return {
+        prefixCls,
+        sideRef,
+        dragBarRef,
+        getIsMobile,
+        getHiddenDomStyle,
+        getSiderClass,
+        getTrigger,
+        getTriggerAttr,
+        getCollapsedWidth,
+        getMenuFixed,
+        showClassSideBarRef,
+        getMenuWidth,
+        getCollapsed,
+        getMenuTheme,
+        onBreakpointChange,
+        getMode,
+        getSplitType,
+        getShowTrigger,
+        toggleCollapsed,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-sideBar';
+
+  .@{prefix-cls} {
+    z-index: @layout-sider-fixed-z-index;
+
+    &--fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100%;
+    }
+
+    &--mix {
+      top: @header-height;
+      height: calc(100% - @header-height);
+    }
+
+    &.ant-layout-sider-dark {
+      background-color: @sider-dark-bg-color;
+
+      .ant-layout-sider-trigger {
+        color: darken(@white, 25%);
+        background-color: @trigger-dark-bg-color;
+
+        &:hover {
+          color: @white;
+          background-color: @trigger-dark-hover-bg-color;
+        }
+      }
+    }
+
+    &:not(.ant-layout-sider-dark) {
+      // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+      .ant-layout-sider-trigger {
+        color: @text-color-base;
+        border-top: 1px solid @border-color-light;
+      }
+    }
+
+    .ant-layout-sider-zero-width-trigger {
+      top: 40%;
+      z-index: 10;
+    }
+
+    & .ant-layout-sider-trigger {
+      height: 36px;
+      line-height: 36px;
+    }
+  }
+</style>

src/layouts/default/sider/MixSider.vue

@@ -0,0 +1,591 @@
+<template>
+  <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
+  <div
+    v-click-outside="handleClickOutside"
+    :style="getWrapStyle"
+    :class="[
+      prefixCls,
+      getMenuTheme,
+      {
+        open: openMenu,
+        mini: getCollapsed,
+      },
+    ]"
+    v-bind="getMenuEvents"
+  >
+    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
+
+    <LayoutTrigger :class="`${prefixCls}-trigger`" />
+
+    <ScrollContainer>
+      <ul :class="`${prefixCls}-module`">
+        <li
+          :class="[
+            `${prefixCls}-module__item `,
+            {
+              [`${prefixCls}-module__item--active`]: item.path === activePath,
+            },
+          ]"
+          v-bind="getItemEvents(item)"
+          v-for="item in menuModules"
+          :key="item.path"
+        >
+          <SimpleMenuTag :item="item" collapseParent dot />
+          <Icon
+            :class="`${prefixCls}-module__icon`"
+            :size="getCollapsed ? 16 : 20"
+            :icon="item.icon || (item.meta && item.meta.icon)"
+          />
+          <p :class="`${prefixCls}-module__name`">
+            {{ t(item.name) }}
+          </p>
+        </li>
+      </ul>
+    </ScrollContainer>
+
+    <div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
+      <div
+        v-show="openMenu"
+        :class="[
+          `${prefixCls}-menu-list__title`,
+          {
+            show: openMenu,
+          },
+        ]"
+      >
+        <span class="text"> {{ title }}</span>
+        <Icon
+          :size="16"
+          :icon="getMixSideFixed ? 'ri:pushpin-2-fill' : 'ri:pushpin-2-line'"
+          class="pushpin"
+          @click="handleFixedMenu"
+        />
+      </div>
+      <ScrollContainer :class="`${prefixCls}-menu-list__content`">
+        <SimpleMenu
+          :items="childrenMenus"
+          :theme="getMenuTheme"
+          mixSider
+          @menu-click="handleMenuClick"
+        />
+      </ScrollContainer>
+      <div
+        v-show="getShowDragBar && openMenu"
+        :class="`${prefixCls}-drag-bar`"
+        ref="dragBarRef"
+      ></div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { Menu } from '/@/router/types';
+  import type { CSSProperties } from 'vue';
+  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
+  import type { RouteLocationNormalized } from 'vue-router';
+  import { ScrollContainer } from '/@/components/Container';
+  import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
+  import { Icon } from '/@/components/Icon';
+  import { AppLogo } from '/@/components/Application';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { useDragLine } from './useLayoutSider';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+  import clickOutside from '/@/directives/clickOutside';
+  import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import LayoutTrigger from '../trigger/index.vue';
+
+  export default defineComponent({
+    name: 'LayoutMixSider',
+    components: {
+      ScrollContainer,
+      AppLogo,
+      SimpleMenu,
+      Icon,
+      LayoutTrigger,
+      SimpleMenuTag,
+    },
+    directives: {
+      clickOutside,
+    },
+    setup() {
+      let menuModules = ref<Menu[]>([]);
+      const activePath = ref('');
+      const childrenMenus = ref<Menu[]>([]);
+      const openMenu = ref(false);
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+      const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
+
+      const { prefixCls } = useDesign('layout-mix-sider');
+      const go = useGo();
+      const { t } = useI18n();
+      const {
+        getMenuWidth,
+        getCanDrag,
+        getCloseMixSidebarOnChange,
+        getMenuTheme,
+        getMixSideTrigger,
+        getRealWidth,
+        getMixSideFixed,
+        mixSideHasChildren,
+        setMenuSetting,
+        getIsMixSidebar,
+        getCollapsed,
+      } = useMenuSetting();
+
+      const { title } = useGlobSetting();
+      const permissionStore = usePermissionStore();
+
+      useDragLine(sideRef, dragBarRef, true);
+
+      const getMenuStyle = computed((): CSSProperties => {
+        return {
+          width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
+          left: `${unref(getMixSideWidth)}px`,
+        };
+      });
+
+      const getIsFixed = computed(() => {
+        /* eslint-disable-next-line */
+        mixSideHasChildren.value = unref(childrenMenus).length > 0;
+        const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
+        if (isFixed) {
+          /* eslint-disable-next-line */
+          openMenu.value = true;
+        }
+        return isFixed;
+      });
+
+      const getMixSideWidth = computed(() => {
+        return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
+      });
+
+      const getDomStyle = computed((): CSSProperties => {
+        const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
+        const width = `${unref(getMixSideWidth) + fixedWidth}px`;
+        return getWrapCommonStyle(width);
+      });
+
+      const getWrapStyle = computed((): CSSProperties => {
+        const width = `${unref(getMixSideWidth)}px`;
+        return getWrapCommonStyle(width);
+      });
+
+      const getMenuEvents = computed(() => {
+        return !unref(getMixSideFixed)
+          ? {
+              onMouseleave: () => {
+                setActive(true);
+                closeMenu();
+              },
+            }
+          : {};
+      });
+
+      const getShowDragBar = computed(() => unref(getCanDrag));
+
+      onMounted(async () => {
+        menuModules.value = await getShallowMenus();
+      });
+
+      // Menu changes
+      watch(
+        [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
+        async () => {
+          menuModules.value = await getShallowMenus();
+        },
+        {
+          immediate: true,
+        },
+      );
+
+      listenerRouteChange((route) => {
+        currentRoute.value = route;
+        setActive(true);
+        if (unref(getCloseMixSidebarOnChange)) {
+          closeMenu();
+        }
+      });
+
+      function getWrapCommonStyle(width: string): CSSProperties {
+        return {
+          width,
+          maxWidth: width,
+          minWidth: width,
+          flex: `0 0 ${width}`,
+        };
+      }
+
+      // Process module menu click
+      async function handleModuleClick(path: string, hover = false) {
+        const children = await getChildrenMenus(path);
+        if (unref(activePath) === path) {
+          if (!hover) {
+            if (!unref(openMenu)) {
+              openMenu.value = true;
+            } else {
+              closeMenu();
+            }
+          } else {
+            if (!unref(openMenu)) {
+              openMenu.value = true;
+            }
+          }
+          if (!unref(openMenu)) {
+            setActive();
+          }
+        } else {
+          openMenu.value = true;
+          activePath.value = path;
+        }
+
+        if (!children || children.length === 0) {
+          if (!hover) go(path);
+          childrenMenus.value = [];
+          closeMenu();
+          return;
+        }
+        childrenMenus.value = children;
+      }
+
+      // Set the currently active menu and submenu
+      async function setActive(setChildren = false) {
+        const path = currentRoute.value?.path;
+        if (!path) return;
+        activePath.value = await getCurrentParentPath(path);
+        // hanldeModuleClick(parentPath);
+        if (unref(getIsMixSidebar)) {
+          const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
+          const p = activeMenu?.path;
+          if (p) {
+            const children = await getChildrenMenus(p);
+            if (setChildren) {
+              childrenMenus.value = children;
+
+              if (unref(getMixSideFixed)) {
+                openMenu.value = children.length > 0;
+              }
+            }
+            if (children.length === 0) {
+              childrenMenus.value = [];
+            }
+          }
+        }
+      }
+
+      function handleMenuClick(path: string) {
+        go(path);
+      }
+
+      function handleClickOutside() {
+        setActive(true);
+        closeMenu();
+      }
+
+      function getItemEvents(item: Menu) {
+        if (unref(getMixSideTrigger) === 'hover') {
+          return {
+            onMouseenter: () => handleModuleClick(item.path, true),
+            onClick: async () => {
+              const children = await getChildrenMenus(item.path);
+              if (item.path && (!children || children.length === 0)) go(item.path);
+            },
+          };
+        }
+        return {
+          onClick: () => handleModuleClick(item.path),
+        };
+      }
+
+      function handleFixedMenu() {
+        setMenuSetting({
+          mixSideFixed: !unref(getIsFixed),
+        });
+      }
+
+      // Close menu
+      function closeMenu() {
+        if (!unref(getIsFixed)) {
+          openMenu.value = false;
+        }
+      }
+
+      return {
+        t,
+        prefixCls,
+        menuModules,
+        handleModuleClick: handleModuleClick,
+        activePath,
+        childrenMenus: childrenMenus,
+        getShowDragBar,
+        handleMenuClick,
+        getMenuStyle,
+        handleClickOutside,
+        sideRef,
+        dragBarRef,
+        title,
+        openMenu,
+        getMenuTheme,
+        getItemEvents,
+        getMenuEvents,
+        getDomStyle,
+        handleFixedMenu,
+        getMixSideFixed,
+        getWrapStyle,
+        getCollapsed,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-mix-sider';
+  @width: 80px;
+  .@{prefix-cls} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-mix-sider-fixed-z-index;
+    height: 100%;
+    overflow: hidden;
+    background-color: @sider-dark-bg-color;
+    transition: all 0.2s ease 0s;
+
+    &-dom {
+      height: 100%;
+      overflow: hidden;
+      transition: all 0.2s ease 0s;
+    }
+
+    &-logo {
+      display: flex;
+      height: @header-height;
+      padding-left: 0 !important;
+      justify-content: center;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+      }
+    }
+
+    &.light {
+      .@{prefix-cls}-logo {
+        border-bottom: 1px solid rgb(238 238 238);
+      }
+
+      &.open {
+        > .scrollbar {
+          border-right: 1px solid rgb(238 238 238);
+        }
+      }
+
+      .@{prefix-cls}-module {
+        &__item {
+          font-weight: normal;
+          color: rgb(0 0 0 / 65%);
+
+          &--active {
+            color: @primary-color;
+            background-color: unset;
+          }
+        }
+      }
+      .@{prefix-cls}-menu-list {
+        &__content {
+          box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
+        }
+
+        &__title {
+          .pushpin {
+            color: rgb(0 0 0 / 35%);
+
+            &:hover {
+              color: rgb(0 0 0 / 85%);
+            }
+          }
+        }
+      }
+    }
+    @border-color: @sider-dark-lighten-bg-color;
+
+    &.dark {
+      &.open {
+        .@{prefix-cls}-logo {
+          // border-bottom: 1px solid @border-color;
+        }
+
+        > .scrollbar {
+          border-right: 1px solid @border-color;
+        }
+      }
+      .@{prefix-cls}-menu-list {
+        background-color: @sider-dark-bg-color;
+
+        &__title {
+          color: @white;
+          border-bottom: none;
+          border-bottom: 1px solid @border-color;
+        }
+      }
+    }
+
+    > .scrollbar {
+      height: calc(100% - @header-height - 38px);
+    }
+
+    &.mini &-module {
+      &__name {
+        display: none;
+      }
+
+      &__icon {
+        margin-bottom: 0;
+      }
+    }
+
+    &-module {
+      position: relative;
+      padding-top: 1px;
+
+      &__item {
+        position: relative;
+        padding: 12px 0;
+        color: rgb(255 255 255 / 65%);
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: @white;
+        }
+        // &:hover,
+        &--active {
+          font-weight: 700;
+          color: @white;
+          background-color: @sider-dark-darken-bg-color;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background-color: @primary-color;
+            content: '';
+          }
+        }
+      }
+
+      &__icon {
+        margin-bottom: 8px;
+        font-size: 24px;
+        transition: all 0.2s;
+      }
+
+      &__name {
+        margin-bottom: 0;
+        font-size: 12px;
+        transition: all 0.2s;
+      }
+    }
+
+    &-trigger {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      font-size: 14px;
+      color: rgb(255 255 255 / 65%);
+      text-align: center;
+      cursor: pointer;
+      background-color: @trigger-dark-bg-color;
+      height: 36px;
+      line-height: 36px;
+    }
+
+    &.light &-trigger {
+      color: rgb(0 0 0 / 65%);
+      background-color: #fff;
+      border-top: 1px solid #eee;
+    }
+
+    &-menu-list {
+      position: fixed;
+      top: 0;
+      width: 200px;
+      height: calc(100%);
+      background-color: #fff;
+      transition: all 0.2s;
+
+      &__title {
+        display: flex;
+        height: @header-height;
+        // margin-left: -6px;
+        font-size: 18px;
+        color: @primary-color;
+        border-bottom: 1px solid rgb(238 238 238);
+        opacity: 0;
+        transition: unset;
+        align-items: center;
+        justify-content: space-between;
+
+        &.show {
+          min-width: 130px;
+          opacity: 1;
+          transition: all 0.5s ease;
+        }
+
+        .pushpin {
+          margin-right: 6px;
+          color: rgb(255 255 255 / 65%);
+          cursor: pointer;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+
+      &__content {
+        height: calc(100% - @header-height) !important;
+
+        .scrollbar__wrap {
+          height: 100%;
+          overflow-x: hidden;
+        }
+
+        .scrollbar__bar.is-horizontal {
+          display: none;
+        }
+
+        .ant-menu {
+          height: 100%;
+        }
+
+        .ant-menu-inline,
+        .ant-menu-vertical,
+        .ant-menu-vertical-left {
+          border-right: 1px solid transparent;
+        }
+      }
+    }
+
+    &-drag-bar {
+      position: absolute;
+      top: 50px;
+      right: -1px;
+      width: 1px;
+      height: calc(100% - 50px);
+      cursor: ew-resize;
+      background-color: #f8f8f9;
+      border-top: none;
+      border-bottom: none;
+      box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
+    }
+  }
+</style>

src/layouts/default/sider/index.vue

@@ -0,0 +1,63 @@
+<template>
+    <template v-if="!isOnlyShowContent">
+        <Drawer
+            v-if="getIsMobile"
+            placement="left"
+            :class="prefixCls"
+            :width="getMenuWidth"
+            :getContainer="null"
+            :visible="!getCollapsed"
+            @close="handleClose"
+        >
+            <Sider />
+        </Drawer>
+        <MixSider v-else-if="getIsMixSidebar" />
+        <Sider v-else />
+    </template>
+</template>
+<script lang="ts">
+  import { defineComponent,computed } from 'vue';
+
+  import Sider from './LayoutSider.vue';
+  import MixSider from './MixSider.vue';
+  import { Drawer } from 'ant-design-vue';
+
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  export default defineComponent({
+    name: 'SiderWrapper',
+    components: { Sider, Drawer, MixSider },
+    setup() {
+      const { prefixCls } = useDesign('layout-sider-wrapper');
+      const { getIsMobile } = useAppInject();
+      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+
+      function handleClose() {
+        setMenuSetting({
+          collapsed: true,
+        });
+      }
+
+        const isOnlyShowContent = computed(() => {
+            return window.isOnlyShowContent=='Y';
+        });
+
+        return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar,isOnlyShowContent };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+
+  .@{prefix-cls} {
+    .ant-drawer-body {
+      height: 100vh;
+      padding: 0;
+    }
+
+    .ant-drawer-header-no-title {
+      display: none;
+    }
+  }
+</style>

src/layouts/default/sider/useLayoutSider.ts

@@ -0,0 +1,139 @@
+import type { Ref } from 'vue';
+
+import { computed, unref, onMounted, nextTick, ref } from 'vue';
+
+import { TriggerEnum } from '/@/enums/menuEnum';
+
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useDebounceFn } from '@vueuse/core';
+
+/**
+ * Handle related operations of menu events
+ */
+export function useSiderEvent() {
+  const brokenRef = ref(false);
+
+  const { getMiniWidthNumber } = useMenuSetting();
+
+  const getCollapsedWidth = computed(() => {
+    return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
+  });
+
+  function onBreakpointChange(broken: boolean) {
+    brokenRef.value = broken;
+  }
+
+  return { getCollapsedWidth, onBreakpointChange };
+}
+
+/**
+ * Handle related operations of menu folding
+ */
+export function useTrigger(getIsMobile: Ref<boolean>) {
+  const { getTrigger, getSplit } = useMenuSetting();
+
+  const getShowTrigger = computed(() => {
+    const trigger = unref(getTrigger);
+
+    return (
+      trigger !== TriggerEnum.NONE &&
+      !unref(getIsMobile) &&
+      (trigger === TriggerEnum.FOOTER || unref(getSplit))
+    );
+  });
+
+  const getTriggerAttr = computed(() => {
+    if (unref(getShowTrigger)) {
+      return {};
+    }
+    return {
+      trigger: null,
+    };
+  });
+
+  return { getTriggerAttr, getShowTrigger };
+}
+
+/**
+ * Handle menu drag and drop related operations
+ * @param siderRef
+ * @param dragBarRef
+ */
+export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, mix = false) {
+  const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();
+
+  onMounted(() => {
+    nextTick(() => {
+      const exec = useDebounceFn(changeWrapWidth, 80);
+      exec();
+    });
+  });
+
+  function getEl(elRef: Ref<ElRef | ComponentRef>): any {
+    const el = unref(elRef);
+    if (!el) return null;
+    if (Reflect.has(el, '$el')) {
+      return (unref(elRef) as ComponentRef)?.$el;
+    }
+    return unref(elRef);
+  }
+
+  function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
+    document.onmousemove = function (innerE) {
+      let iT = (ele as any).left + (innerE.clientX - clientX);
+      innerE = innerE || window.event;
+      const maxT = 800;
+      const minT = unref(getMiniWidthNumber);
+      iT < 0 && (iT = 0);
+      iT > maxT && (iT = maxT);
+      iT < minT && (iT = minT);
+      ele.style.left = wrap.style.width = iT + 'px';
+      return false;
+    };
+  }
+
+  // Drag and drop in the menu area-release the mouse
+  function removeMouseup(ele: any) {
+    const wrap = getEl(siderRef);
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      wrap.style.transition = 'width 0.2s';
+      const width = parseInt(wrap.style.width);
+
+      if (!mix) {
+        const miniWidth = unref(getMiniWidthNumber);
+        if (!unref(getCollapsed)) {
+          width > miniWidth + 20
+            ? setMenuSetting({ menuWidth: width })
+            : setMenuSetting({ collapsed: true });
+        } else {
+          width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
+        }
+      } else {
+        setMenuSetting({ menuWidth: width });
+      }
+
+      ele.releaseCapture?.();
+    };
+  }
+
+  function changeWrapWidth() {
+    const ele = getEl(dragBarRef);
+    if (!ele) return;
+    const wrap = getEl(siderRef);
+    if (!wrap) return;
+
+    ele.onmousedown = (e: any) => {
+      wrap.style.transition = 'unset';
+      const clientX = e?.clientX;
+      ele.left = ele.offsetLeft;
+      handleMouseMove(ele, wrap, clientX);
+      removeMouseup(ele);
+      ele.setCapture?.();
+      return false;
+    };
+  }
+
+  return {};
+}

src/layouts/default/tabs/components/FoldButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <span :class="`${prefixCls}__extra-fold`" @click="handleFold">
+    <Icon :icon="getIcon" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { triggerWindowResize } from '/@/utils/event';
+
+  export default defineComponent({
+    name: 'FoldButton',
+    components: { Icon },
+    setup() {
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { getShowMenu, setMenuSetting } = useMenuSetting();
+      const { getShowHeader, setHeaderSetting } = useHeaderSetting();
+
+      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
+      const getIcon = computed(() =>
+        unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
+      );
+
+      function handleFold() {
+        const isUnFold = unref(getIsUnFold);
+        setMenuSetting({
+          show: isUnFold,
+          hidden: !isUnFold,
+        });
+        setHeaderSetting({ show: isUnFold });
+        triggerWindowResize();
+      }
+
+      return { prefixCls, getIcon, handleFold };
+    },
+  });
+</script>

src/layouts/default/tabs/components/TabContent.vue

@@ -0,0 +1,78 @@
+<template>
+  <Dropdown
+    :dropMenuList="getDropMenuList"
+    :trigger="getTrigger"
+    placement="bottom"
+    overlayClassName="multiple-tabs__dropdown"
+    @menu-event="handleMenuEvent"
+  >
+    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
+      <span class="ml-1">{{ getTitle }}</span>
+    </div>
+    <span :class="`${prefixCls}__extra-quick`" v-else @click="handleContext">
+      <Icon icon="ion:chevron-down" />
+    </span>
+  </Dropdown>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { RouteLocationNormalized } from 'vue-router';
+
+  import { defineComponent, computed, unref } from 'vue';
+  import { Dropdown } from '/@/components/Dropdown/index';
+  import { Icon } from '/@/components/Icon';
+
+  import { TabContentProps } from '../types';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTabDropdown } from '../useTabDropdown';
+
+  export default defineComponent({
+    name: 'TabContent',
+    components: { Dropdown, Icon },
+    props: {
+      tabItem: {
+        type: Object as PropType<RouteLocationNormalized>,
+        default: null,
+      },
+      isExtra: Boolean,
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { t } = useI18n();
+
+      const getTitle = computed(() => {
+        const tabItem = props.tabItem as any;
+        const meta = tabItem.meta || {};
+          const metaTitle=typeof meta?.title=='function'?meta.title(tabItem):meta?.title;
+        return tabItem.tabTitle || (meta && t(metaTitle as string));
+      });
+
+      const getIsTabs = computed(() => !props.isExtra);
+
+      const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
+        unref(getIsTabs) ? ['contextmenu'] : ['click'],
+      );
+
+      const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
+        props as TabContentProps,
+        getIsTabs,
+      );
+
+      function handleContext(e) {
+        props.tabItem && handleContextMenu(props.tabItem)(e);
+      }
+
+      return {
+        prefixCls,
+        getDropMenuList,
+        handleMenuEvent,
+        handleContext,
+        getTrigger,
+        getIsTabs,
+        getTitle,
+      };
+    },
+  });
+</script>

src/layouts/default/tabs/components/TabRedo.vue

@@ -0,0 +1,33 @@
+<template>
+  <span :class="`${prefixCls}__extra-redo`" @click="handleRedo">
+    <RedoOutlined :spin="loading" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { RedoOutlined } from '@ant-design/icons-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTabs } from '/@/hooks/web/useTabs';
+
+  export default defineComponent({
+    name: 'TabRedo',
+    components: { RedoOutlined },
+
+    setup() {
+      const loading = ref(false);
+
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { refreshPage } = useTabs();
+
+      async function handleRedo() {
+        loading.value = true;
+        await refreshPage();
+        setTimeout(() => {
+          loading.value = false;
+          // Animation execution time
+        }, 1200);
+      }
+      return { prefixCls, handleRedo, loading };
+    },
+  });
+</script>

src/layouts/default/tabs/index.less

@@ -0,0 +1,214 @@
+@prefix-cls: ~'@{namespace}-multiple-tabs';
+
+html[data-theme='dark'] {
+  .@{prefix-cls} {
+    .ant-tabs-tab {
+      border-bottom: 1px solid @border-color-base;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .@{prefix-cls} {
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border: 0;
+    }
+  }
+}
+
+.@{prefix-cls} {
+  z-index: 10;
+  height: @multiple-height + 2;
+  line-height: @multiple-height + 2;
+  background-color: @component-background;
+  border-bottom: 1px solid @border-color-base;
+
+  .ant-tabs-small {
+    height: @multiple-height;
+  }
+
+  .ant-tabs.ant-tabs-card {
+    .ant-tabs-nav {
+      padding-top: 2px;
+      height: @multiple-height;
+      margin: 0;
+      background-color: @component-background;
+      border: 0;
+      box-shadow: none;
+
+      .ant-tabs-nav-container {
+        height: @multiple-height;
+        padding-top: 2px;
+      }
+
+      .ant-tabs-tab {
+        height: calc(@multiple-height - 2px);
+        padding-right: 12px;
+        line-height: calc(@multiple-height - 2px);
+        color: @text-color-base;
+        background-color: @component-background;
+        transition: none;
+
+        &:hover {
+          .ant-tabs-tab-remove {
+            opacity: 1;
+
+            svg {
+              fill: @primary-color;
+            }
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          width: 8px;
+          height: 38px;
+          font-size: 12px;
+          color: inherit;
+          opacity: 0;
+          transition: none;
+          margin-left: 2px;
+          margin-right: -4px;
+
+          &:hover {
+            svg {
+              width: 0.8em;
+            }
+          }
+        }
+
+        // > div {
+        //   display: flex;
+        //   justify-content: center;
+        //   align-items: center;
+        // }
+
+        svg {
+          fill: @text-color-base;
+        }
+      }
+
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        &:hover {
+          color: @primary-color;
+        }
+      }
+
+      .ant-tabs-tab-active {
+        position: relative;
+        padding-left: 7px;
+        border: 0;
+        border-bottom: 2px solid @primary-color;
+        transition: none;
+
+        &:nth-child(1) {
+          padding-left: 12px;
+        }
+
+        span {
+          color: @primary-color !important;
+        }
+
+        .ant-tabs-tab-remove {
+          opacity: 1;
+        }
+
+        svg {
+          width: 0.7em;
+          fill: @primary-color;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 6px;
+
+      .ant-tabs-tab {
+        margin-right: 3px !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  &--hide-close {
+    .ant-tabs-tab-remove {
+      opacity: 0 !important;
+    }
+  }
+
+  &-content {
+    &__extra-quick,
+    &__extra-redo,
+    &__extra-fold {
+      display: inline-block;
+      width: 36px;
+      height: calc(@multiple-height - 16px);
+      line-height: calc(@multiple-height - 16px);
+      color: @text-color-secondary;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid @border-color-base;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__extra-redo {
+      span[role='img'] {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @multiple-height - 2;
+      padding-left: 0;
+      font-size: 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+
+.ant-tabs-dropdown-menu {
+  &-title-content {
+    display: flex;
+    align-items: center;
+
+    .@{prefix-cls} {
+      &-content__info {
+        width: auto;
+        margin-left: 0;
+        line-height: 28px;
+      }
+    }
+  }
+
+  &-item-remove {
+    margin-left: auto;
+  }
+}
+
+.multiple-tabs__dropdown {
+  .ant-dropdown-content {
+    width: 172px;
+  }
+}

src/layouts/default/tabs/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div :class="getWrapClass">
+    <Tabs
+      type="editable-card"
+      size="small"
+      :animated="false"
+      :hideAdd="true"
+      :tabBarGutter="3"
+      :activeKey="activeKeyRef"
+      @change="handleChange"
+      @edit="handleEdit"
+    >
+      <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
+        <TabPane :closable="!(item && item.meta && item.meta.affix)">
+          <template #tab>
+            <TabContent :tabItem="item" />
+          </template>
+        </TabPane>
+      </template>
+
+      <template #rightExtra v-if="getShowRedo || getShowQuick">
+        <TabRedo v-if="getShowRedo" />
+        <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
+        <FoldButton v-if="getShowFold" />
+      </template>
+    </Tabs>
+  </div>
+</template>
+<script lang="ts">
+  import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
+
+  import { defineComponent, computed, unref, ref } from 'vue';
+
+  import { Tabs } from 'ant-design-vue';
+  import TabContent from './components/TabContent.vue';
+  import FoldButton from './components/FoldButton.vue';
+  import TabRedo from './components/TabRedo.vue';
+
+  import { useGo } from '/@/hooks/web/usePage';
+
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useUserStore } from '/@/store/modules/user';
+
+  import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'MultipleTabs',
+    components: {
+      TabRedo,
+      FoldButton,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      TabContent,
+    },
+    setup() {
+      const affixTextList = initAffixTabs();
+      const activeKeyRef = ref('');
+
+      useTabsDrag(affixTextList);
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const router = useRouter();
+
+      const { prefixCls } = useDesign('multiple-tabs');
+      const go = useGo();
+      const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
+
+      const getTabsState = computed(() => {
+        return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
+      });
+
+      const unClose = computed(() => unref(getTabsState).length === 1);
+
+      const getWrapClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide-close`]: unref(unClose),
+          },
+        ];
+      });
+
+      listenerRouteChange((route) => {
+        const { name } = route;
+        if (name === REDIRECT_NAME || !route || !userStore.getToken) {
+          return;
+        }
+
+        const { path, fullPath, meta = {} } = route;
+        const { currentActiveMenu, hideTab } = meta as RouteMeta;
+        const isHide = !hideTab ? null : currentActiveMenu;
+        const p = isHide || fullPath || path;
+        if (activeKeyRef.value !== p) {
+          activeKeyRef.value = p as string;
+        }
+
+        if (isHide) {
+          const findParentRoute = router
+            .getRoutes()
+            .find((item) => item.path === currentActiveMenu);
+
+          findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
+        } else {
+          tabStore.addTab(unref(route));
+        }
+      });
+
+      function handleChange(activeKey: any) {
+        console.log('handleChange');
+
+        activeKeyRef.value = activeKey;
+        go(activeKey, false);
+      }
+
+      // Close the current tab
+      function handleEdit(targetKey: string) {
+        // Added operation to hide, currently only use delete operation
+        if (unref(unClose)) {
+          return;
+        }
+
+        tabStore.closeTabByKey(targetKey, router);
+      }
+      return {
+        getWrapClass,
+        handleEdit,
+        handleChange,
+        activeKeyRef,
+        getTabsState,
+        getShowQuick,
+        getShowRedo,
+        getShowFold,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import url('./index.less');
+</style>

src/layouts/default/tabs/types.ts

@@ -0,0 +1,25 @@
+import type { DropMenu } from '/@/components/Dropdown/index';
+import type { RouteLocationNormalized } from 'vue-router';
+
+export enum TabContentEnum {
+  TAB_TYPE,
+  EXTRA_TYPE,
+}
+
+export type { DropMenu };
+
+export interface TabContentProps {
+  tabItem: RouteLocationNormalized;
+  type?: TabContentEnum;
+  trigger?: ('click' | 'hover' | 'contextmenu')[];
+}
+
+export enum MenuEventEnum {
+  REFRESH_PAGE,
+  CLOSE_CURRENT,
+  CLOSE_LEFT,
+  CLOSE_RIGHT,
+  CLOSE_OTHER,
+  CLOSE_ALL,
+  SCALE,
+}

src/layouts/default/tabs/useMultipleTabs.ts

@@ -0,0 +1,80 @@
+import { toRaw, ref, nextTick } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useSortable } from '/@/hooks/web/useSortable';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { isNullAndUnDef } from '/@/utils/is';
+import projectSetting from '/@/settings/projectSetting';
+import { useRouter } from 'vue-router';
+
+export function initAffixTabs(): string[] {
+  const affixList = ref<RouteLocationNormalized[]>([]);
+
+  const tabStore = useMultipleTabStore();
+  const router = useRouter();
+  /**
+   * @description: Filter all fixed routes
+   */
+  function filterAffixTabs(routes: RouteLocationNormalized[]) {
+    const tabs: RouteLocationNormalized[] = [];
+    routes &&
+      routes.forEach((route) => {
+        if (route.meta && route.meta.affix) {
+          tabs.push(toRaw(route));
+        }
+      });
+    return tabs;
+  }
+
+  /**
+   * @description: Set fixed tabs
+   */
+  function addAffixTabs(): void {
+    const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
+    affixList.value = affixTabs;
+    for (const tab of affixTabs) {
+      tabStore.addTab({
+        meta: tab.meta,
+        name: tab.name,
+        path: tab.path,
+      } as unknown as RouteLocationNormalized);
+    }
+  }
+
+  let isAddAffix = false;
+
+  if (!isAddAffix) {
+    addAffixTabs();
+    isAddAffix = true;
+  }
+  return affixList.value.map((item) => item.meta?.title).filter(Boolean) as string[];
+}
+
+export function useTabsDrag(affixTextList: string[]) {
+  const tabStore = useMultipleTabStore();
+  const { multiTabsSetting } = projectSetting;
+  const { prefixCls } = useDesign('multiple-tabs');
+  nextTick(() => {
+    if (!multiTabsSetting.canDrag) return;
+    const el = document.querySelectorAll(
+      `.${prefixCls} .ant-tabs-nav-wrap > div`,
+    )?.[0] as HTMLElement;
+    const { initSortable } = useSortable(el, {
+      filter: (e: ChangeEvent) => {
+        const text = e?.target?.innerText;
+        if (!text) return false;
+        return affixTextList.includes(text);
+      },
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+
+        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+
+        tabStore.sortTabs(oldIndex, newIndex);
+      },
+    });
+    initSortable();
+  });
+}

src/layouts/default/tabs/useTabDropdown.ts

@@ -0,0 +1,140 @@
+import type { TabContentProps } from './types';
+import type { DropMenu } from '/@/components/Dropdown';
+import type { ComputedRef } from 'vue';
+
+import { computed, unref, reactive } from 'vue';
+import { MenuEventEnum } from './types';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { RouteLocationNormalized, useRouter } from 'vue-router';
+import { useTabs } from '/@/hooks/web/useTabs';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) {
+  const state = reactive({
+    current: null as Nullable<RouteLocationNormalized>,
+    currentIndex: 0,
+  });
+
+  const { t } = useI18n();
+  const tabStore = useMultipleTabStore();
+  const { currentRoute } = useRouter();
+  const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs();
+
+  const getTargetTab = computed((): RouteLocationNormalized => {
+    return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
+  });
+
+  /**
+   * @description: drop-down list
+   */
+  const getDropMenuList = computed(() => {
+    if (!unref(getTargetTab)) {
+      return;
+    }
+    const { meta } = unref(getTargetTab);
+    const { path } = unref(currentRoute);
+
+    const curItem = state.current;
+
+    const isCurItem = curItem ? curItem.path === path : false;
+
+    // Refresh button
+    const index = state.currentIndex;
+    const refreshDisabled = !isCurItem;
+    // Close left
+    const closeLeftDisabled = index === 0 || !isCurItem;
+
+    const disabled = tabStore.getTabList.length === 1;
+
+    // Close right
+    const closeRightDisabled =
+      !isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
+    const dropMenuList: DropMenu[] = [
+      {
+        icon: 'ion:reload-sharp',
+        event: MenuEventEnum.REFRESH_PAGE,
+        text: t('重新加载'),
+        disabled: refreshDisabled,
+      },
+      {
+        icon: 'clarity:close-line',
+        event: MenuEventEnum.CLOSE_CURRENT,
+        text: t('关闭标签页'),
+        disabled: !!meta?.affix || disabled,
+        divider: true,
+      },
+      {
+        icon: 'line-md:arrow-close-left',
+        event: MenuEventEnum.CLOSE_LEFT,
+        text: t('关闭左侧标签页'),
+        disabled: closeLeftDisabled,
+        divider: false,
+      },
+      {
+        icon: 'line-md:arrow-close-right',
+        event: MenuEventEnum.CLOSE_RIGHT,
+        text: t('关闭右侧标签页'),
+        disabled: closeRightDisabled,
+        divider: true,
+      },
+      {
+        icon: 'dashicons:align-center',
+        event: MenuEventEnum.CLOSE_OTHER,
+        text: t('关闭其它标签页'),
+        disabled: disabled || !isCurItem,
+      },
+      {
+        icon: 'clarity:minus-line',
+        event: MenuEventEnum.CLOSE_ALL,
+        text: t('关闭全部标签页'),
+        disabled: disabled,
+      },
+    ];
+
+    return dropMenuList;
+  });
+
+  function handleContextMenu(tabItem: RouteLocationNormalized) {
+    return (e: Event) => {
+      if (!tabItem) {
+        return;
+      }
+      e?.preventDefault();
+      const index = tabStore.getTabList.findIndex((tab) => tab.path === tabItem.path);
+      state.current = tabItem;
+      state.currentIndex = index;
+    };
+  }
+
+  // Handle right click event
+  function handleMenuEvent(menu: DropMenu): void {
+    const { event } = menu;
+    switch (event) {
+      case MenuEventEnum.REFRESH_PAGE:
+        // refresh page
+        refreshPage();
+        break;
+      // Close current
+      case MenuEventEnum.CLOSE_CURRENT:
+        close(tabContentProps.tabItem);
+        break;
+      // Close left
+      case MenuEventEnum.CLOSE_LEFT:
+        closeLeft();
+        break;
+      // Close right
+      case MenuEventEnum.CLOSE_RIGHT:
+        closeRight();
+        break;
+      // Close other
+      case MenuEventEnum.CLOSE_OTHER:
+        closeOther();
+        break;
+      // Close all
+      case MenuEventEnum.CLOSE_ALL:
+        closeAll();
+        break;
+    }
+  }
+  return { getDropMenuList, handleMenuEvent, handleContextMenu };
+}

src/layouts/default/trigger/HeaderTrigger.vue

@@ -0,0 +1,28 @@
+<template>
+  <span :class="[prefixCls, theme]" @click="toggleCollapsed">
+    <span
+      style="border-left: 1px solid rgb(255, 255, 255, 0.3); height: 30px; padding-right: 15px"
+    ></span>
+    <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'HeaderTrigger',
+    components: { MenuUnfoldOutlined, MenuFoldOutlined },
+    props: {
+      theme: propTypes.oneOf(['light', 'dark']),
+    },
+    setup() {
+      const { getCollapsed, toggleCollapsed } = useMenuSetting();
+      const { prefixCls } = useDesign('layout-header-trigger');
+      return { getCollapsed, toggleCollapsed, prefixCls };
+    },
+  });
+</script>

src/layouts/default/trigger/SiderTrigger.vue

@@ -0,0 +1,21 @@
+<template>
+  <div @click.stop="toggleCollapsed">
+    <DoubleRightOutlined v-if="getCollapsed" />
+    <DoubleLeftOutlined v-else />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'SiderTrigger',
+    components: { DoubleRightOutlined, DoubleLeftOutlined },
+    setup() {
+      const { getCollapsed, toggleCollapsed } = useMenuSetting();
+
+      return { getCollapsed, toggleCollapsed };
+    },
+  });
+</script>

src/layouts/default/trigger/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <SiderTrigger v-if="sider" />
+  <HeaderTrigger v-else :theme="theme" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { propTypes } from '/@/utils/propTypes';
+  import HeaderTrigger from './HeaderTrigger.vue';
+
+  export default defineComponent({
+    name: 'LayoutTrigger',
+    components: {
+      SiderTrigger: createAsyncComponent(() => import('./SiderTrigger.vue')),
+      HeaderTrigger: HeaderTrigger,
+    },
+    props: {
+      sider: propTypes.bool.def(true),
+      theme: propTypes.oneOf(['light', 'dark']),
+    },
+  });
+</script>