@dt-frames/ui 2.0.3 → 2.0.4

package/es/theme/index.js

@@ -1,7 +1,7 @@
 import { BackTop, Breadcrumb, Empty, InputSearch, Popover, Avatar, Tooltip, Select, Switch, Divider, Button, Drawer, MenuItem, SubMenu, Menu, LayoutHeader, LayoutSider, MenuDivider, Dropdown, TabPane, Tabs, LayoutContent, Layout, ConfigProvider } from "ant-design-vue/es";
 import "ant-design-vue/es/config-provider/style";
 import "ant-design-vue/es/layout/style";
-import { toRaw, unref, computed, onMounted, nextTick, defineComponent, openBlock, createBlock, createCommentVNode, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, withDirectives, toDisplayString, vShow, ref, watchEffect, createVNode, withCtx, Fragment, renderList, resolveDirective, getCurrentInstance, inject, onUnmounted, h, provide, onBeforeUnmount, resolveDynamicComponent, renderSlot, mergeProps, createTextVNode, watch, normalizeProps, guardReactiveProps, resolveComponent, reactive, toRef, withModifiers, createSlots, Transition, KeepAlive } from "vue";
+import { toRaw, unref, computed, onMounted, nextTick, defineComponent, openBlock, createBlock, createCommentVNode, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, withDirectives, toDisplayString, vShow, ref, watchEffect, createVNode, withCtx, Fragment, renderList, resolveDirective, getCurrentInstance, inject, onUnmounted, h, provide, onBeforeUnmount, resolveDynamicComponent, renderSlot, mergeProps, createTextVNode, watch, normalizeProps, guardReactiveProps, resolveComponent, reactive, toRef, withModifiers, Transition, createSlots, KeepAlive } from "vue";
 import { useRouter, RouterView } from "vue-router";
 import { DtCache, CacheKey, deepMerge, Pages, useGo, useRedo, Language, isObject, useTimeoutFn, useI18n, isBoolean, localeList, changeLocale, off, on, getParentSlots, isFunction, copyText, isUrl, openWindow, isNullAndUnDef, menuList2Map, useApp, withInstall as withInstall$1 } from "@dt-frames/core";
 import { defineStore } from "pinia";
@@ -35,6 +35,7 @@ var MenuType = /* @__PURE__ */ ((MenuType2) => {
   MenuType2["SIDE"] = "sidebar";
   MenuType2["TOP_MENU"] = "top-menu";
   MenuType2["MIX"] = "mix";
+  MenuType2["MIX_SIDEBAR"] = "mix-sidebar";
   return MenuType2;
 })(MenuType || {});
 var MenuMode = /* @__PURE__ */ ((MenuMode2) => {
@@ -92,7 +93,8 @@ const defaultThemeConf = {
     menuWidth: 240,
     trigger: true,
     type: MenuType.SIDE,
-    mode: MenuMode.INLINE
+    mode: MenuMode.INLINE,
+    mixSideTrigger: "hover"
   },
   footerOptions: {
     show: false,
@@ -113,7 +115,8 @@ const useThemeStore = defineStore({
   id: "dt-theme",
   state: () => ({
     themeConf: DtCache.getLocal(CacheKey.THEME) ?? defaultThemeConf,
-    pageLoading: false
+    pageLoading: false,
+    mixSiderHasSubMenu: false
   }),
   getters: {
     getThemeConf() {
@@ -133,6 +136,9 @@ const useThemeStore = defineStore({
     },
     getPageLoading() {
       return this.pageLoading;
+    },
+    getMixSiderIsHasMenu() {
+      return this.mixSiderHasSubMenu;
     }
   },
   actions: {
@@ -140,6 +146,9 @@ const useThemeStore = defineStore({
       let newThemeConf = deepMerge(this.themeConf, options);
       this.themeConf = deepMerge(defaultThemeConf, newThemeConf);
       DtCache.setLocal(CacheKey.THEME, this.themeConf);
+    },
+    setMixSiderIsHasMenu(val) {
+      this.mixSiderHasSubMenu = val;
     }
   }
 });
@@ -295,8 +304,18 @@ function useMenu() {
   const getIsMixMode = computed(() => {
     return unref(getMenuMode) === MenuMode.INLINE && unref(getMenuType) === MenuType.MIX;
   });
-  const getMenuWidth = computed(() => unref(getIsMixMode) ? Number(getMenuConf.menuWidth) - 40 : getMenuConf.menuWidth);
-  const getLogoWidth = computed(() => getMenuConf.menuWidth);
+  const getIsMixSidebar = computed(() => unref(getMenuType) === MenuType.MIX_SIDEBAR);
+  const getMenuWidth = computed(() => {
+    if (unref(getIsMixMode)) {
+      return Number(getMenuConf.menuWidth) - 40;
+    } else if (unref(getIsMixSidebar)) {
+      return Number(getMenuConf.menuWidth) - 10;
+    } else {
+      return Number(getMenuConf.menuWidth);
+    }
+  });
+  const getMixSideTrigger = computed(() => getMenuConf.mixSideTrigger);
+  const getLogoWidth = computed(() => unref(getIsMixSidebar) ? "80px" : getMenuConf.menuWidth);
   const getMenuType = computed(() => getMenuConf.type);
   const getIsTopMenu = computed(() => unref(getMenuType) === MenuType.TOP_MENU);
   const getMenuMode = computed(() => getMenuConf.mode);
@@ -338,7 +357,9 @@ function useMenu() {
     getRealWidth,
     getCalcContentWidth,
     getIsMixMode,
+    getIsMixSidebar,
     getCanDrag,
+    getMixSideTrigger,
     toggleCollapsed,
     setThemeStore
   };
@@ -371,12 +392,12 @@ function useHeader() {
     getMenuMode,
     getSplit,
     getIsTopMenu,
-    getIsMixMode
+    getIsMixSidebar
   } = useMenu();
   const { getShowMultipleTab } = useMultipleTab();
   const getHeaderTheme = computed(() => getHeaderConf.theme);
   const getFixed = computed(() => getHeaderConf.fixed);
-  const getShowHeaderLogo = computed(() => unref(getShowLogo) && !unref(getIsSidebarType));
+  const getShowHeaderLogo = computed(() => unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar));
   const getShowSearch = computed(() => getHeaderConf.showSearch);
   const getShowHeaderTrigger = computed(() => {
     if (unref(getMenuType) === MenuType.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
@@ -394,7 +415,7 @@ function useHeader() {
   const getShowLocale = computed(() => getHeaderConf.showLocaleSwitch);
   const getShowSettingTheme = computed(() => getHeaderConf.showSettingTheme);
   const getShowFullHeaderRef = computed(() => {
-    return !unref(getIsSidebarType) && !unref(getIsTopMenu);
+    return !unref(getIsSidebarType) && !unref(getIsMixSidebar) && !unref(getIsTopMenu);
   });
   const getHeaderHeight = computed(() => {
     let height = 0;
@@ -406,7 +427,7 @@ function useHeader() {
   });
   const getTabsHeight = computed(() => TABS_HEIGHT);
   const getShowInsetHeaderRef = computed(() => {
-    return unref(getIsSidebarType) || unref(getIsTopMenu);
+    return unref(getIsSidebarType) || unref(getIsTopMenu) || unref(getIsMixSidebar);
   });
   const getShowBackToTop = computed(() => getHeaderConf.showBackToTop);
   const getIsZH = computed(() => {
@@ -502,6 +523,26 @@ function getFilterMenu(filter = "", flag = false) {
   getTargetMenus(DtCache.getLocal(CacheKey.MENUS)?.children);
   return _menus;
 }
+function getParentTreeByPath(path) {
+  const _menus = DtCache.getLocal(CacheKey.MENUS)?.children || [];
+  let routes = [];
+  let getParentByPath = (menu, path2 = "") => {
+    if (menu.children && menu.children.length) {
+      menu.children.forEach((subMenu) => {
+        subMenu.parentMenus = [...menu.parentMenus].concat([subMenu]);
+        getParentByPath(subMenu, path2);
+      });
+    }
+    if (menu.url === path2) {
+      routes = menu.parentMenus;
+    }
+  };
+  _menus.forEach((menu) => {
+    menu.parentMenus = [menu];
+    getParentByPath(menu, path);
+  });
+  return routes.length ? routes[0] : { id: null, children: [], icon: "", label: "" };
+}
 function useOpenKeys(menuState, menus, type) {
   async function setOpenKeys(path) {
     if (type === MenuType.TOP_MENU)
@@ -597,7 +638,7 @@ function useDragLine(siderRef, dragBarRef) {
     };
   }
 }
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "back-top",
   setup(__props) {
     const getTarget = () => document.getElementById("dt-layout-content");
@@ -612,15 +653,15 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$y);
+      return openBlock(), createBlock(_sfc_main$z);
     };
   }
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "fullscreen",
   setup(__props) {
     const { toggle, isFullscreen } = useFullscreen();
@@ -637,7 +678,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$i = ["src"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "logo",
   props: {
     theme: { type: String, validator: (v) => ["light", "dark"].includes(v) },
@@ -666,7 +707,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "trigger",
   props: { theme: String },
   setup(__props) {
@@ -685,7 +726,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$h = { class: "dt-breadcrumb" };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "bread-crumb",
   setup(__props) {
     const { getIsZH } = useHeader();
@@ -713,12 +754,12 @@ const _hoisted_1$g = {
   key: 0,
   class: "dt-menu-filter h-7 pr-2"
 };
-const _hoisted_2$8 = ["onClick"];
-const _hoisted_3$5 = {
+const _hoisted_2$9 = ["onClick"];
+const _hoisted_3$6 = {
   key: 0,
   class: "flex items-center justify-center h-full overflow-hidden"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "menu-filter",
   setup(__props) {
     const { t } = useI18n("UI");
@@ -762,9 +803,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               return openBlock(), createElementBlock("p", {
                 onClick: ($event) => navigation(menu.url),
                 class: "px-5 leading-9 border-gray-200 border-dashed border-b m-0 cursor-pointer transition-all duration-300 text-13"
-              }, toDisplayString(unref(getIsZH) ? menu.label : menu.enLabel), 9, _hoisted_2$8);
+              }, toDisplayString(unref(getIsZH) ? menu.label : menu.enLabel), 9, _hoisted_2$9);
             }), 256)),
-            !menuList.value.length ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+            !menuList.value.length ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
               createVNode(_component_AEmpty, {
                 description: "\u6682\u65E0\u6570\u636E",
                 imageStyle: { width: "100%" }
@@ -787,15 +828,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$f = { class: "lang m-0" };
-const _hoisted_2$7 = ["onClick"];
-const _hoisted_3$4 = {
+const _hoisted_2$8 = ["onClick"];
+const _hoisted_3$5 = {
   class: "pr-2",
   size: 16
 };
-const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("span", { class: "dt_header_icon text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300" }, [
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("span", { class: "dt_header_icon text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300" }, [
   /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-language" })
 ], -1);
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "lang-picker",
   props: {
     reload: { type: Boolean }
@@ -829,16 +870,16 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => toggleLang(it.event),
                 class: normalizeClass(["px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover:bg-gray-100 transition-all duration-300 text-13", it.event === unref(currentLang) ? "active bg-gray-100" : ""])
               }, [
-                withDirectives(createElementVNode("span", _hoisted_3$4, null, 512), [
+                withDirectives(createElementVNode("span", _hoisted_3$5, null, 512), [
                   [_directive_icon, it.icon]
                 ]),
                 createElementVNode("span", null, toDisplayString(it.text), 1)
-              ], 10, _hoisted_2$7);
+              ], 10, _hoisted_2$8);
             }), 256))
           ])
         ]),
         default: withCtx(() => [
-          _hoisted_4$2
+          _hoisted_4$3
         ]),
         _: 1
       }, 8, ["visible"]);
@@ -984,7 +1025,7 @@ const Bar = defineComponent({
   }
 });
 const _hoisted_1$e = { class: "scrollbar relative h-full overflow-hidden" };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "scroll-bar",
   props: {
     wrapClass: {
@@ -1086,12 +1127,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "scroll-container",
   setup(__props) {
     const scrollbarRef = ref(null);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$q, mergeProps({
+      return openBlock(), createBlock(_sfc_main$r, mergeProps({
         ref_key: "scrollbarRef",
         ref: scrollbarRef
       }, _ctx.$attrs, { class: "w-full h-full" }), {
@@ -1103,7 +1144,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "slot-container",
   props: {
     template: {
@@ -1127,10 +1168,10 @@ const withInstall = (comp) => {
   };
   return comp;
 };
-const DtScrollContainer = withInstall(_sfc_main$p);
-const DtSlotContainer = withInstall(_sfc_main$o);
+const DtScrollContainer = withInstall(_sfc_main$q);
+const DtSlotContainer = withInstall(_sfc_main$p);
 const _hoisted_1$d = { class: "dt_header_icon text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300 relative" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "notify",
   setup(__props) {
     const slots = getParentSlots(null, "dt-theme");
@@ -1164,11 +1205,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$c = { class: "lang m-0" };
-const _hoisted_2$6 = ["onClick"];
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("span", { class: "dt_header_icon text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300" }, [
+const _hoisted_2$7 = ["onClick"];
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("span", { class: "dt_header_icon text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300" }, [
   /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-format-size" })
 ], -1);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "size",
   setup(__props) {
     const { t } = useI18n("UI");
@@ -1213,12 +1254,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover:bg-gray-100 transition-all duration-300 text-13", it.event === unref(getUiSize) ? "active bg-gray-100" : ""])
               }, [
                 createElementVNode("span", null, toDisplayString(it.text), 1)
-              ], 10, _hoisted_2$6);
+              ], 10, _hoisted_2$7);
             }), 64))
           ])
         ]),
         default: withCtx(() => [
-          _hoisted_3$3
+          _hoisted_3$4
         ]),
         _: 1
       }, 8, ["visible"]);
@@ -1226,14 +1267,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$b = { class: "m-0" };
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
   class: "pr-2",
   size: 16
 };
-const _hoisted_3$2 = { class: "dt_header_icon h-12 text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300 flex items-center" };
-const _hoisted_4$1 = ["src"];
-const _hoisted_5 = { class: "pl-2 text-13" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_3$3 = { class: "dt_header_icon h-12 text-lg text-gray-800 cursor-pointer px-3 hover:bg-gray-500 hover:bg-opacity-50 transition-all duration-300 flex items-center" };
+const _hoisted_4$2 = ["src"];
+const _hoisted_5$1 = { class: "pl-2 text-13" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "user-info",
   setup(__props) {
     const { t } = useI18n("UI");
@@ -1268,7 +1309,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => signOut()),
               class: "px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover:bg-gray-100 transition-all duration-300 text-13"
             }, [
-              withDirectives(createElementVNode("span", _hoisted_2$5, null, 512), [
+              withDirectives(createElementVNode("span", _hoisted_2$6, null, 512), [
                 [_directive_icon, "ant-design:logout-outlined"]
               ]),
               createElementVNode("span", null, toDisplayString(unref(t)("LOGIN_OUT")), 1)
@@ -1276,14 +1317,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           ])
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_3$2, [
+          createElementVNode("div", _hoisted_3$3, [
             createVNode(_component_AAvatar, { size: 28 }, {
               icon: withCtx(() => [
-                createElementVNode("img", { src: "/node_modules/@dt-frames/ui/es/assets/imgs/header/avatar.png" }, null, 8, _hoisted_4$1)
+                createElementVNode("img", { src: "/node_modules/@dt-frames/ui/es/assets/imgs/header/avatar.png" }, null, 8, _hoisted_4$2)
               ]),
               _: 1
             }),
-            createElementVNode("span", _hoisted_5, toDisplayString(unref(getUserInfo)?.userNo), 1)
+            createElementVNode("span", _hoisted_5$1, toDisplayString(unref(getUserInfo)?.userNo), 1)
           ])
         ]),
         _: 1
@@ -1389,12 +1430,12 @@ function changeTheme(event, value = {}) {
   useThemeStore().setThemeConf(conf);
 }
 const _hoisted_1$a = { class: "flex flex-row justify-center dt-menu-type" };
-const _hoisted_2$4 = ["onClick"];
-const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("div", { class: "dt-menu-type__item" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3$1
+const _hoisted_2$5 = ["onClick"];
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "dt-menu-type__item" }, null, -1);
+const _hoisted_4$1 = [
+  _hoisted_3$2
 ];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "menu-type",
   setup(__props) {
     const { getMenuType, getMenuMode } = useMenu();
@@ -1422,6 +1463,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         mode: MenuMode.HORIZONTAL,
         type: MenuType.TOP_MENU,
         split: false
+      },
+      {
+        title: "\u5DE6\u4FA7\u83DC\u5355\u6DF7\u5408\u6A21\u5F0F",
+        headTheme: Theme.LIGHT,
+        menuTheme: Theme.DARK,
+        mode: MenuMode.INLINE,
+        type: MenuType.MIX_SIDEBAR,
+        split: false
       }
     ];
     function changeMenuType(item) {
@@ -1447,7 +1496,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                     [`dt-menu-type__item--active`]: unref(getMenuType) === item.type && unref(getMenuMode) === item.mode
                   }
                 ])
-              }, _hoisted_4, 10, _hoisted_2$4)
+              }, _hoisted_4$1, 10, _hoisted_2$5)
             ]),
             _: 2
           }, 1032, ["title"]);
@@ -1457,7 +1506,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$9 = { class: "flex justify-between mb-5" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "select",
   props: {
     event: { type: Number },
@@ -1494,7 +1543,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$8 = { class: "flex justify-between mb-5" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "switch",
   props: {
     event: {
@@ -1529,7 +1578,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "feature",
   setup(__props) {
     const { t } = useI18n("UI");
@@ -1605,7 +1654,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         (openBlock(), createElementBlock(Fragment, null, renderList(switchItems, (item) => {
-          return createVNode(_sfc_main$i, {
+          return createVNode(_sfc_main$j, {
             key: item.title,
             title: item.title,
             event: item.event,
@@ -1613,7 +1662,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           }, null, 8, ["title", "event", "def"]);
         }), 64)),
         (openBlock(), createElementBlock(Fragment, null, renderList(selectItems, (item) => {
-          return createVNode(_sfc_main$j, {
+          return createVNode(_sfc_main$k, {
             key: item.title,
             title: item.title,
             event: item.event,
@@ -1626,8 +1675,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$7 = { class: "mt-5" };
-const _hoisted_2$3 = { class: "dt-setting-theme__tips p-3 text-12 bg-gray-100 rounded" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_2$4 = { class: "dt-setting-theme__tips p-3 text-12 bg-gray-100 rounded" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "setting-theme",
   setup(__props) {
     const { t } = useI18n("UI");
@@ -1735,14 +1784,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$k)),
+            createVNode(unref(_sfc_main$l)),
             createVNode(_component_ADivider, null, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(t)("PAGE_SHOW")), 1)
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$h)),
+            createVNode(unref(_sfc_main$i)),
             createVNode(_component_ADivider),
             createElementVNode("div", _hoisted_1$7, [
               createVNode(_component_AButton, {
@@ -1767,7 +1816,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 _: 1
               })
             ]),
-            createElementVNode("div", _hoisted_2$3, toDisplayString(unref(t)("DRAWER_TIPS")), 1)
+            createElementVNode("div", _hoisted_2$4, toDisplayString(unref(t)("DRAWER_TIPS")), 1)
           ]),
           _: 1
         }, 8, ["visible", "title"])
@@ -1942,7 +1991,7 @@ const contentProps = {
   },
   isSplitMenu: Boolean
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "menu-item-content",
   props: contentProps,
   setup(__props) {
@@ -1959,7 +2008,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "basic-menu-item",
   props: ItemProp,
   setup(__props) {
@@ -1970,14 +2019,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         key: _ctx.item.url
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$f, normalizeProps(guardReactiveProps(props)), null, 16)
+          createVNode(_sfc_main$g, normalizeProps(guardReactiveProps(props)), null, 16)
         ]),
         _: 1
       });
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "basic-sub-menu-item",
   props: ItemProp,
   setup(__props) {
@@ -1994,14 +2043,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       const _component_BasicSubMenuItem = resolveComponent("BasicSubMenuItem", true);
       const _component_ASubMenu = SubMenu;
       return openBlock(), createElementBlock(Fragment, null, [
-        !menuHasChildren(unref(item)) && unref(getShowMenu) ? (openBlock(), createBlock(_sfc_main$e, normalizeProps(mergeProps({ key: 0 }, props)), null, 16)) : createCommentVNode("", true),
+        !menuHasChildren(unref(item)) && unref(getShowMenu) ? (openBlock(), createBlock(_sfc_main$f, normalizeProps(mergeProps({ key: 0 }, props)), null, 16)) : createCommentVNode("", true),
         menuHasChildren(unref(item)) && unref(getShowMenu) ? (openBlock(), createBlock(_component_ASubMenu, {
           class: normalizeClass([unref(theme)]),
           key: unref(item).id,
           popupClassName: "app-top-menu-popup"
         }, {
           title: withCtx(() => [
-            createVNode(_sfc_main$f, mergeProps(props, { item: unref(item) }), null, 16, ["item"])
+            createVNode(_sfc_main$g, mergeProps(props, { item: unref(item) }), null, 16, ["item"])
           ]),
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(item).children, (childrenItem) => {
@@ -2016,7 +2065,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "basic-menu",
   props: BasicMenu,
   emits: ["menuClick"],
@@ -2103,7 +2152,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-            return openBlock(), createBlock(_sfc_main$d, {
+            return openBlock(), createBlock(_sfc_main$e, {
               key: item.id,
               item,
               theme: _ctx.theme,
@@ -2116,7 +2165,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "LayoutMenu",
   props: {
     theme: String,
@@ -2187,7 +2236,7 @@ const _sfc_main$b = defineComponent({
       }
       if (!unref(getIsShowLogo))
         return null;
-      return createVNode(_sfc_main$v, {
+      return createVNode(_sfc_main$w, {
         "showTitle": !unref(getCollapsed),
         "class": unref(getLogoClass),
         "theme": unref(getComputedTheme)
@@ -2212,7 +2261,7 @@ const _sfc_main$b = defineComponent({
       } = unref(getMenuProps);
       if (!menus || !menus.length)
         return null;
-      return createVNode(_sfc_main$c, mergeProps(menuProps, {
+      return createVNode(_sfc_main$d, mergeProps(menuProps, {
         "isHorizontal": props.isHorizontal,
         "type": unref(getMenuType),
         "showLogo": unref(getIsShowLogo),
@@ -2228,11 +2277,11 @@ const _sfc_main$b = defineComponent({
   }
 });
 const _hoisted_1$6 = { class: "dt-header-left flex h-full items-center" };
-const _hoisted_2$2 = {
+const _hoisted_2$3 = {
   key: 0,
   class: "flex-1 h-full min-w-0 items-center"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     fixed: Boolean
@@ -2275,19 +2324,19 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$6, [
-            unref(getShowHeaderLogo) ? (openBlock(), createBlock(unref(_sfc_main$v), {
+            unref(getShowHeaderLogo) ? (openBlock(), createBlock(unref(_sfc_main$w), {
               key: 0,
               theme: unref(getHeaderTheme),
               class: "dt-header-logo"
             }, null, 8, ["theme"])) : createCommentVNode("", true),
-            unref(getShowHeaderTrigger) && !unref(getSplit) ? (openBlock(), createBlock(unref(_sfc_main$u), {
+            unref(getShowHeaderTrigger) && !unref(getSplit) ? (openBlock(), createBlock(unref(_sfc_main$v), {
               key: 1,
               theme: unref(getHeaderTheme)
             }, null, 8, ["theme"])) : createCommentVNode("", true),
-            unref(getShowBread) ? (openBlock(), createBlock(unref(_sfc_main$t), { key: 2 })) : createCommentVNode("", true)
+            unref(getShowBread) ? (openBlock(), createBlock(unref(_sfc_main$u), { key: 2 })) : createCommentVNode("", true)
           ]),
-          unref(getShowTopMenu) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
-            createVNode(_sfc_main$b, {
+          unref(getShowTopMenu) ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+            createVNode(_sfc_main$c, {
               isHorizontal: true,
               theme: unref(getHeaderTheme),
               splitType: unref(getSplitType),
@@ -2300,16 +2349,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               "padding-right": unref(getShowSettingTheme) ? "" : "20px"
             })
           }, [
-            unref(getShowSearch) ? (openBlock(), createBlock(unref(_sfc_main$s), { key: 0 })) : createCommentVNode("", true),
-            unref(getShowNotice) ? (openBlock(), createBlock(unref(_sfc_main$n), { key: 1 })) : createCommentVNode("", true),
-            unref(getShowUiSize) ? (openBlock(), createBlock(unref(_sfc_main$m), { key: 2 })) : createCommentVNode("", true),
-            unref(getShowFullScreen) ? (openBlock(), createBlock(unref(_sfc_main$w), { key: 3 })) : createCommentVNode("", true),
-            unref(getShowLocale) ? (openBlock(), createBlock(unref(_sfc_main$r), {
+            unref(getShowSearch) ? (openBlock(), createBlock(unref(_sfc_main$t), { key: 0 })) : createCommentVNode("", true),
+            unref(getShowNotice) ? (openBlock(), createBlock(unref(_sfc_main$o), { key: 1 })) : createCommentVNode("", true),
+            unref(getShowUiSize) ? (openBlock(), createBlock(unref(_sfc_main$n), { key: 2 })) : createCommentVNode("", true),
+            unref(getShowFullScreen) ? (openBlock(), createBlock(unref(_sfc_main$x), { key: 3 })) : createCommentVNode("", true),
+            unref(getShowLocale) ? (openBlock(), createBlock(unref(_sfc_main$s), {
               key: 4,
               reload: true
             })) : createCommentVNode("", true),
-            createVNode(unref(_sfc_main$l)),
-            unref(getShowSettingTheme) ? (openBlock(), createBlock(unref(_sfc_main$g), { key: 5 })) : createCommentVNode("", true)
+            createVNode(unref(_sfc_main$m)),
+            unref(getShowSettingTheme) ? (openBlock(), createBlock(unref(_sfc_main$h), { key: 5 })) : createCommentVNode("", true)
           ], 4)
         ]),
         _: 1
@@ -2344,7 +2393,7 @@ function useTrigger() {
   });
   return { getTriggerAttr, getShowTrigger };
 }
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "sider-trigger",
   props: {
     type: {
@@ -2368,7 +2417,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "drag-bar",
   setup(__props) {
     const { getCollapsed, getCanDrag, getMenuWidth } = useMenu();
@@ -2394,6 +2443,169 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$5 = { class: "dt-mix-sider__shallow-menu" };
+const _hoisted_2$2 = { class: "m-0" };
+const _hoisted_3$1 = { class: "dt-mix-sider__sub-shallow-menu" };
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = { class: "opacity-60 m-0 py-3 text-lg pt-6" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "m-0" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "m-0" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "mix-sider",
+  setup(__props) {
+    const MENU_WIDTH = 80;
+    const go = useGo();
+    const { getMenuWidth, getMenuTheme, getMixSideTrigger } = useMenu();
+    const { setMixSiderIsHasMenu } = useThemeStore();
+    const menuModules = getShallowMenus();
+    const activeId = ref("");
+    const subMenus = ref([]);
+    const getDomStyle = computed(() => setDomWidth(`${unref(subMenus)?.length ? unref(getMenuWidth) : MENU_WIDTH}px`));
+    const getWrapStyle = computed(() => setDomWidth(`${MENU_WIDTH}px`));
+    const getSubMenuStyle = computed(() => {
+      return {
+        width: `${unref(getMenuWidth) - MENU_WIDTH}px`,
+        left: `${MENU_WIDTH}px`
+      };
+    });
+    function setDomWidth(width) {
+      return {
+        width,
+        minWidth: width,
+        maxWidth: width,
+        flex: `0 0 ${width}`,
+        transition: "all 0.2s"
+      };
+    }
+    const getMenuEvents = {
+      onMouseleave: () => {
+        setActive(currentRoute.value.path);
+      }
+    };
+    const getItemEvents = (item) => {
+      if (unref(getMixSideTrigger) === "hover") {
+        return {
+          onMouseenter: () => handleModuleClick(item.url, true),
+          onClick: () => handleModuleClick(item.url)
+        };
+      }
+      return {
+        onClick: () => handleModuleClick(item.url)
+      };
+    };
+    const { currentRoute = null } = useRouter();
+    function setActive(path) {
+      const pTree = getParentTreeByPath(path);
+      activeId.value = pTree.id;
+      subMenus.value = pTree.children;
+      setMixSiderIsHasMenu(Boolean(pTree.children?.length));
+    }
+    function handleModuleClick(path, isHover = false) {
+      setActive(path);
+      if (!isHover) {
+        go(path);
+      }
+    }
+    watchEffect(() => {
+      if (!currentRoute || currentRoute.value.path === "/")
+        return;
+      setActive(currentRoute.value.path);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: "h-full overflow-hidden",
+          style: normalizeStyle(unref(getDomStyle))
+        }, null, 4),
+        createElementVNode("div", mergeProps({
+          style: unref(getWrapStyle),
+          class: ["dt-mix-sider fixed top-0 left-0 h-full overflow-hidden", unref(getMenuTheme)]
+        }, getMenuEvents), [
+          createVNode(_sfc_main$w, {
+            showTitle: false,
+            class: normalizeClass("justify-center z-10")
+          }),
+          createVNode(unref(DtScrollContainer), { class: "z-10" }, {
+            default: withCtx(() => [
+              createElementVNode("ul", _hoisted_1$5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(menuModules), (item) => {
+                  return openBlock(), createElementBlock("li", mergeProps({
+                    key: item.id,
+                    class: ["py-3 cursor-pointer relative text-center", {
+                      "active-menu": item.id === activeId.value
+                    }]
+                  }, getItemEvents(item)), [
+                    createElementVNode("i", {
+                      class: normalizeClass(["i", item.icon])
+                    }, null, 2),
+                    createElementVNode("p", _hoisted_2$2, toDisplayString(item.label), 1)
+                  ], 16);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }),
+          createVNode(Transition, { name: "dt-mix-sider__animate" }, {
+            default: withCtx(() => [
+              subMenus.value?.length ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "fixed top-0 h-full sub-menu bg-white",
+                style: normalizeStyle(unref(getSubMenuStyle))
+              }, [
+                createVNode(unref(DtScrollContainer), null, {
+                  default: withCtx(() => [
+                    createElementVNode("ul", _hoisted_3$1, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(subMenus.value, (menu) => {
+                        return openBlock(), createElementBlock("li", {
+                          key: menu.id
+                        }, [
+                          menu.children?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                            createElementVNode("p", _hoisted_5, toDisplayString(menu.label), 1),
+                            createElementVNode("ul", null, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(menu.children, (subMenu) => {
+                                return openBlock(), createElementBlock("li", {
+                                  key: subMenu.id,
+                                  class: normalizeClass(["flex cursor-pointer", {
+                                    "active-menu": subMenu.url === unref(currentRoute).fullPath
+                                  }]),
+                                  onClick: ($event) => unref(go)(subMenu.url)
+                                }, [
+                                  createElementVNode("i", {
+                                    class: normalizeClass(["i opacity-50 pr-2", subMenu.icon])
+                                  }, null, 2),
+                                  createElementVNode("p", _hoisted_7, toDisplayString(subMenu.label), 1)
+                                ], 10, _hoisted_6);
+                              }), 128))
+                            ])
+                          ])) : (openBlock(), createElementBlock("div", {
+                            key: 1,
+                            class: normalizeClass(["sub-menu flex cursor-pointer", {
+                              "active-menu": menu.url === unref(currentRoute).fullPath
+                            }]),
+                            onClick: ($event) => unref(go)(menu.url)
+                          }, [
+                            createElementVNode("i", {
+                              class: normalizeClass(["i opacity-50 pr-2", menu.icon])
+                            }, null, 2),
+                            createElementVNode("p", _hoisted_9, toDisplayString(menu.label), 1)
+                          ], 10, _hoisted_8))
+                        ]);
+                      }), 128))
+                    ])
+                  ]),
+                  _: 1
+                })
+              ], 4)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 16)
+      ], 64);
+    };
+  }
+});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -2405,7 +2617,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       getCollapsed,
       getMenuTheme,
       getRealWidth,
-      getIsMixMode
+      getIsMixMode,
+      getIsMixSidebar
     } = useMenu();
     const {
       getCollapsedWidth,
@@ -2453,10 +2666,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const getMode = computed(() => {
       return unref(getSplit) ? MenuMode.INLINE : null;
     });
-    const renderTrigger = h(_sfc_main$9);
+    const renderTrigger = h(_sfc_main$a);
     return (_ctx, _cache) => {
       const _component_ALayoutSider = LayoutSider;
-      return openBlock(), createElementBlock(Fragment, null, [unref(getMenuFixed) ? withDirectives((openBlock(), createElementBlock("div", {
+      return unref(getIsMixSidebar) ? (openBlock(), createBlock(_sfc_main$8, {
+        key: 0
+      })) : (openBlock(), createElementBlock(Fragment, {
+        key: 1
+      }, [unref(getMenuFixed) ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         style: normalizeStyle(unref(hiddenDomStyle))
       }, null, 4)), [[vShow, unref(showClassSideBarRef)]]) : createCommentVNode("", true), withDirectives(createVNode(_component_ALayoutSider, mergeProps({
@@ -2472,22 +2689,22 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         theme: unref(getMenuTheme),
         trigger: unref(renderTrigger)
       }, unref(getTriggerAttr)), {
-        default: withCtx(() => [createVNode(_sfc_main$b, {
+        default: withCtx(() => [createVNode(_sfc_main$c, {
           theme: unref(getMenuTheme),
           menuMode: unref(getMode),
           splitType: unref(getSplitType)
-        }, null, 8, ["theme", "menuMode", "splitType"]), createVNode(_sfc_main$8, {
+        }, null, 8, ["theme", "menuMode", "splitType"]), createVNode(_sfc_main$9, {
           ref_key: "dragBarRef",
           ref: dragBarRef
         }, null, 512)]),
         _: 1
-      }, 16, ["class", "width", "collapsed", "collapsedWidth", "onBreakpoint", "theme", "trigger"]), [[vShow, unref(showClassSideBarRef)]])], 64);
+      }, 16, ["class", "width", "collapsed", "collapsedWidth", "onBreakpoint", "theme", "trigger"]), [[vShow, unref(showClassSideBarRef)]])], 64));
     };
   }
 });
-const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-autorenew" }, null, -1);
+const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-autorenew" }, null, -1);
 const _hoisted_2$1 = [
-  _hoisted_1$5
+  _hoisted_1$4
 ];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TabRedo",
@@ -2575,9 +2792,9 @@ function useTabDropdown() {
     handleMenuEvent
   };
 }
-const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-keyboard-arrow-down" }, null, -1);
+const _hoisted_1$3 = /* @__PURE__ */ createElementVNode("i", { class: "block i ic:baseline-keyboard-arrow-down" }, null, -1);
 const _hoisted_2 = [
-  _hoisted_1$4
+  _hoisted_1$3
 ];
 const _hoisted_3 = { class: "text-13" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
@@ -2701,7 +2918,7 @@ function useTabsDrag(affixList) {
     initSortable();
   });
 }
-const _hoisted_1$3 = { class: "dt-reuse-tabs leading-8 border-b border-solid border-gray-200" };
+const _hoisted_1$2 = { class: "dt-reuse-tabs leading-8 border-b border-solid border-gray-200" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -2748,7 +2965,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_ATabPane = TabPane;
       const _component_ATabs = Tabs;
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createVNode(_component_ATabs, {
           type: "editable-card",
           size: "small",
@@ -2795,11 +3012,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       getHeaderHeight,
       getFixed,
       getShowFullHeaderRef,
-      getHeaderTheme,
       getShowInsetHeaderRef,
       getTabsHeight
     } = useHeader();
-    const { getCalcContentWidth, getIsMixMode, getIsTopMenu, getSplit } = useMenu();
+    const { getCalcContentWidth, getIsMixMode, getSplit, getIsMixSidebar } = useMenu();
     const { getShowMultipleTab } = useMultipleTab();
     const getPlaceholderDomStyle = computed(() => {
       let height = unref(getHeaderHeight);
@@ -2816,7 +3032,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const { menusRef } = useSplitMenu(getSplitType);
     const getWrapStyle = computed(() => {
       const style = {};
-      if (unref(getSplit) && !unref(menusRef)?.length) {
+      if (unref(getIsMixSidebar)) {
+        style.width = useThemeStore().getMixSiderIsHasMenu ? unref(getCalcContentWidth) : "calc(100% - 80px)";
+      } else if (unref(getSplit) && !unref(menusRef)?.length) {
         style.width = "100%";
       } else if (unref(getFixed)) {
         style.width = unref(getCalcContentWidth);
@@ -2842,14 +3060,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(unref(getWrapStyle)),
           class: normalizeClass(unref(getClass))
         }, [
-          unref(getShowInsetHeaderRef) ? (openBlock(), createBlock(_sfc_main$a, { key: 0 })) : createCommentVNode("", true),
+          unref(getShowInsetHeaderRef) ? (openBlock(), createBlock(_sfc_main$b, { key: 0 })) : createCommentVNode("", true),
           unref(getShowMultipleTab) ? (openBlock(), createBlock(_sfc_main$4, { key: 1 })) : createCommentVNode("", true)
         ], 6)
       ]);
     };
   }
 });
-const _hoisted_1$2 = { class: "pr-2.5" };
+const _hoisted_1$1 = { class: "pr-2.5" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -2870,7 +3088,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(unref(footerOptions))
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$2, toDisplayString(unref(title)), 1),
+          createElementVNode("span", _hoisted_1$1, toDisplayString(unref(title)), 1),
           createElementVNode("span", null, toDisplayString(unref(subTitle)), 1)
         ]),
         _: 1
@@ -2878,7 +3096,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["loading"];
+const _hoisted_1 = ["loading"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -2925,7 +3143,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })
-      ], 10, _hoisted_1$1);
+      ], 10, _hoisted_1);
     };
   }
 });
@@ -2961,18 +3179,20 @@ var esUs = { exports: {} };
     return o.default.locale(d, null, true), d;
   });
 })(esUs);
-const _hoisted_1 = { class: "dt-theme w-full h-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const { currentRoute } = useRouter();
     const { getShowFullHeaderRef, getIsZH, getHeaderHeight, getUiSize } = useHeader();
-    const { getSplit, getShowMenu, getShowSidebar } = useMenu();
+    const { getSplit, getShowMenu, getShowSidebar, getIsMixSidebar } = useMenu();
     const { getFooter, getShowFooter } = useTheme();
     const { height } = unref(getFooter);
     require$$0.locale(unref(getIsZH) ? "zh-cn" : "en");
     const layoutClass = computed(() => {
       let cls = "ant-layout";
+      if (unref(getIsMixSidebar)) {
+        cls += " ant-layout-has-sider";
+      }
       if (unref(getShowMenu)) {
         cls += " flex flex-auto min-h-0 flex-row";
       }
@@ -2995,7 +3215,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_ALayout = Layout;
       const _component_AConfigProvider = ConfigProvider;
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["dt-theme w-full h-full", `dt-theme-${unref(getUiSize)}`])
+      }, [
         createVNode(_component_AConfigProvider, {
           locale: unref(getIsZH) ? unref(zhCN) : unref(en),
           "component-size": unref(getUiSize)
@@ -3006,8 +3228,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: "w-full h-full flex"
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$x),
-                unref(getShowFullHeaderRef) ? (openBlock(), createBlock(_sfc_main$a, {
+                createVNode(_sfc_main$y),
+                unref(getShowFullHeaderRef) ? (openBlock(), createBlock(_sfc_main$b, {
                   key: 0,
                   fixed: ""
                 })) : createCommentVNode("", true),
@@ -3017,7 +3239,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     unref(getShowSidebar) ? (openBlock(), createBlock(_sfc_main$7, { key: 0 })) : createCommentVNode("", true),
-                    createVNode(_component_ALayout, { class: "dt-theme-main flex w-full h-ful" }, {
+                    createVNode(_component_ALayout, { class: "dt-theme-main flex w-full h-ful transition-width duration-200" }, {
                       default: withCtx(() => [
                         createVNode(_sfc_main$3),
                         createVNode(_sfc_main$1, {
@@ -3036,7 +3258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["locale", "component-size"])
-      ]);
+      ], 2);
     };
   }
 });
@@ -3123,7 +3345,7 @@ const EN = {
     "NAV_MODE": "Navigation bar mode",
     "PAGE_SHOW": "Interface Display",
     "COPY": "Copy",
-    "DRAWER_TIPS": "The function mainly real-time preview layout effect, more complete configuration in the SRC/core/Settings/theme.ts.  The layout preview function will be turned off in production.",
+    "DRAWER_TIPS": "The function mainly real-time preview layout effect, more complete configuration in the src/core/Settings/theme.ts. The layout preview function will be turned off in production.",
     "FULL": "Flow-based",
     "FIXED": "Fixed width",
     "BREAD_CURB": "Bread crumbs",