bmp-layout 0.0.25-beta.1 → 0.0.25-beta.3

package/bmp-layout.es.js

@@ -1,4 +1,4 @@
-import { openBlock, createBlock, unref, normalizeClass, ref, computed, watch, withCtx, createElementBlock, createElementVNode, normalizeStyle, nextTick, createVNode, Fragment, resolveComponent, defineComponent, isVNode, renderList, createCommentVNode, createTextVNode, toDisplayString, renderSlot, onBeforeMount, withModifiers, onMounted, onUnmounted, Teleport, Transition, provide, KeepAlive, resolveDynamicComponent, TransitionGroup, mergeProps, isRef, withDirectives, resolveDirective, watchEffect, vShow, useSlots, useAttrs, createSlots, inject, onBeforeUnmount, reactive, onUpdated, render, useCssVars } from "vue";
+import { openBlock, createBlock, unref, normalizeClass, ref, computed, watch, withCtx, createElementBlock, createElementVNode, normalizeStyle, nextTick, createVNode, Fragment, resolveComponent, defineComponent, isVNode, renderList, createCommentVNode, createTextVNode, toDisplayString, renderSlot, onBeforeMount, onMounted, withModifiers, onUnmounted, Teleport, Transition, provide, KeepAlive, resolveDynamicComponent, TransitionGroup, mergeProps, isRef, withDirectives, resolveDirective, watchEffect, vShow, useSlots, useAttrs, createSlots, inject, onBeforeUnmount, reactive, onUpdated, render, useCssVars } from "vue";
 import { createPinia, setActivePinia, defineStore } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import { cloneDeep, omit } from "lodash-es";
@@ -417,7 +417,18 @@ const whiteLight = {
   topHeaderCompanyIconColor: "#88a0c3",
   topHeaderCompanyBgColor: "rgba(246,248,255,1)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "#2468F2"
+  menuTriggerBgColor: "#2468F2",
+  // 多页签
+  tagsViewTextColor: "#7b7e90",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "#dce4f5",
+  tagsViewBgActiveColor: "#3d65ff",
+  tagsViewArrowColor: "#a4aec4",
+  tagsViewArrowHoverColor: "#7d8595",
+  tagsViewArrowBgColor: "transparent",
+  tagsViewArrowBgHoverColor: "#e5eaf0",
+  tagsViewArrowBgDisabledColor: "#e5eaf080"
 };
 const blueLight = {
   ...baseLight,
@@ -474,7 +485,18 @@ const blueLight = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const redLight = {
   ...baseLight,
@@ -530,7 +552,18 @@ const redLight = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const greenLight = {
   ...baseLight,
@@ -586,7 +619,18 @@ const greenLight = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const springFestival = {
   ...baseLight,
@@ -642,7 +686,18 @@ const springFestival = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const dragonBoatFestival = {
   ...baseLight,
@@ -698,7 +753,18 @@ const dragonBoatFestival = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const midAutumnFestival = {
   ...baseLight,
@@ -754,7 +820,18 @@ const midAutumnFestival = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const newYearsDay = {
   ...baseLight,
@@ -810,7 +887,18 @@ const newYearsDay = {
   topHeaderCompanyIconColor: "#fff",
   topHeaderCompanyBgColor: "rgba(246,248,255,.3)",
   // 菜单触发器背景颜色
-  menuTriggerBgColor: "transparent"
+  menuTriggerBgColor: "transparent",
+  // 多页签
+  tagsViewTextColor: "#fff",
+  tagsViewTextActiveColor: "#fff",
+  tagsViewBgColor: "transparent",
+  tagsViewBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewBgActiveColor: "rgba(255,255,255,.2)",
+  tagsViewArrowColor: "#fff",
+  tagsViewArrowHoverColor: "rgba(255,255,255,.8)",
+  tagsViewArrowBgColor: "rgba(255,255,255,.2)",
+  tagsViewArrowBgHoverColor: "rgba(255,255,255,.3)",
+  tagsViewArrowBgDisabledColor: "rgba(255,255,255,.5)"
 };
 const systemTheme = {
   whiteLight,
@@ -8221,14 +8309,53 @@ const _sfc_main$t = /* @__PURE__ */ Object.assign({ name: "TagsView" }, {
     };
     const scrollbarRef = ref();
     const scrollLeftNumber = ref(0);
+    const showArrows = ref(false);
+    const disabledLeftArrow = ref(false);
+    const disabledRightArrow = ref(false);
     let scrollStopFn = null;
-    const scroll = ({ scrollLeft }) => {
+    const checkArrows = () => {
+      var _a2;
+      const wrap$ = (_a2 = unref(scrollbarRef)) == null ? void 0 : _a2.wrapRef;
+      if (!wrap$)
+        return;
+      const { scrollLeft, scrollWidth, offsetWidth } = wrap$;
+      showArrows.value = scrollWidth > offsetWidth;
+      disabledLeftArrow.value = scrollLeft <= 0;
+      disabledRightArrow.value = scrollLeft >= scrollWidth - offsetWidth - 1;
+    };
+    const handleScroll = ({ scrollLeft }) => {
       scrollLeftNumber.value = scrollLeft;
+      checkArrows();
+    };
+    const handleScrollLeft = () => {
+      var _a2;
+      const wrap$ = (_a2 = unref(scrollbarRef)) == null ? void 0 : _a2.wrapRef;
+      if (wrap$) {
+        wrap$.scrollTo({
+          left: Math.max(0, wrap$.scrollLeft - 300),
+          behavior: "smooth"
+        });
+      }
+    };
+    const handleScrollRight = () => {
+      var _a2;
+      const wrap$ = (_a2 = unref(scrollbarRef)) == null ? void 0 : _a2.wrapRef;
+      if (wrap$) {
+        wrap$.scrollTo({
+          left: wrap$.scrollLeft + 300,
+          behavior: "smooth"
+        });
+      }
     };
     onBeforeMount(() => {
       initTags();
       addTags();
     });
+    onMounted(() => {
+      nextTick(() => {
+        checkArrows();
+      });
+    });
     watch(
       () => currentRoute.value,
       () => {
@@ -8241,14 +8368,14 @@ const _sfc_main$t = /* @__PURE__ */ Object.assign({ name: "TagsView" }, {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", {
         id: unref(prefixCls2),
-        class: normalizeClass([unref(prefixCls2), "relative flex"])
+        class: normalizeClass([unref(prefixCls2), "relative flex items-center"])
       }, [
         createElementVNode("div", _hoisted_2$a, [
           createVNode(unref(ElScrollbar), {
             ref_key: "scrollbarRef",
             ref: scrollbarRef,
             class: "h-full",
-            onScroll: scroll
+            onScroll: handleScroll
           }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_3$9, [
@@ -8319,7 +8446,6 @@ const _sfc_main$t = /* @__PURE__ */ Object.assign({ name: "TagsView" }, {
                                   createVNode(_component_Icon, {
                                     class: normalizeClass(`${unref(prefixCls2)}__item--close`),
                                     size: 8,
-                                    color: "#7b7e904ff",
                                     icon: "svg-icon:tag-close",
                                     onClick: withModifiers(($event) => closeSelectedTag(item), ["prevent", "stop"])
                                   }, null, 8, ["class", "onClick"]),
@@ -8341,12 +8467,32 @@ const _sfc_main$t = /* @__PURE__ */ Object.assign({ name: "TagsView" }, {
             ]),
             _: 1
           }, 512)
-        ])
+        ]),
+        unref(showArrows) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(`${unref(prefixCls2)}__arrow ${unref(prefixCls2)}__arrow--left ${unref(disabledLeftArrow) ? "is-disabled" : ""}`),
+          onClick: handleScrollLeft
+        }, [
+          createVNode(_component_Icon, {
+            icon: "svg-icon:chevron-left",
+            size: 10
+          })
+        ], 2)) : createCommentVNode("", true),
+        unref(showArrows) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(`${unref(prefixCls2)}__arrow ${unref(prefixCls2)}__arrow--right ${unref(disabledRightArrow) ? "is-disabled" : ""}`),
+          onClick: handleScrollRight
+        }, [
+          createVNode(_component_Icon, {
+            icon: "svg-icon:chevron-right",
+            size: 10
+          })
+        ], 2)) : createCommentVNode("", true)
       ], 10, _hoisted_1$c);
     };
   }
 });
-const TagsView = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-3ab01e0b"]]);
+const TagsView = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-3fbf2f73"]]);
 const _sfc_main$s = /* @__PURE__ */ Object.assign({ name: "MenuTrigger" }, {
   __name: "MenuTrigger",
   props: {
@@ -8362,7 +8508,7 @@ const _sfc_main$s = /* @__PURE__ */ Object.assign({ name: "MenuTrigger" }, {
     const prefixCls2 = getPrefixCls2("menu-trigger");
     const props = __props;
     const theme = computed(() => appStore.getTheme);
-    const triggerIcon = computed(() => props.active ? "ant-design:close-outlined" : theme.value === "whiteLight" ? "svg-icon:menu-trigger-filled" : "svg-icon:menu-trigger");
+    const triggerIcon = computed(() => props.active ? "svg-icon:close-square" : theme.value === "whiteLight" ? "svg-icon:menu-trigger-filled" : "svg-icon:menu-trigger");
     const emit = __emit;
     const handleClick = () => {
       emit("click");
@@ -8376,14 +8522,14 @@ const _sfc_main$s = /* @__PURE__ */ Object.assign({ name: "MenuTrigger" }, {
       }, [
         createVNode(_component_Icon, {
           icon: unref(triggerIcon),
-          svgClass: "!w-full !h-full",
-          class: normalizeClass(["!w-18px", "!h-18px", "icon-color"])
+          class: normalizeClass(["icon-color"]),
+          size: 18
         }, null, 8, ["icon"])
       ], 2);
     };
   }
 });
-const MenuTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-aedf94f7"]]);
+const MenuTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-df837f35"]]);
 const _hoisted_1$b = { class: "sidebar-inner" };
 const _hoisted_2$9 = ["onClick"];
 const _hoisted_3$8 = ["onClick"];
@@ -8429,6 +8575,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
         }, 300);
       }
     });
+    const expandedCardIndex = ref(null);
     const activeProductIndex = ref(0);
     const activeModuleIndex = ref(0);
     const routers = computed(() => permissionStore.getRoleRouters);
@@ -8528,7 +8675,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
       activeModuleIndex.value = 0;
     };
     const handleSelect = (item, parentPath = "") => {
-      var _a2, _b, _c;
+      var _a2, _b, _c, _d;
       const fullPath = getAccessiblePath(item, parentPath);
       if (fullPath) {
         const currentModuleId = permissionStore.getModuleId;
@@ -8537,7 +8684,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
           router.push(fullPath.startsWith("/") ? fullPath : `/${fullPath}`);
         } else {
           const currentOrigin = window.location.origin;
-          const modulePath = ((_c = productList.value[activeProductIndex.value]) == null ? void 0 : _c.modulePath) || "";
+          const modulePath = ((_d = (_c = productList.value[activeProductIndex.value]) == null ? void 0 : _c.children[activeModuleIndex.value]) == null ? void 0 : _d.modulePath) || "";
           const moduleFullPath = joinPath(modulePath, fullPath);
           const targetUrl = `${currentOrigin}${moduleFullPath.startsWith("/") ? moduleFullPath : `/${moduleFullPath}`}`;
           window.location.href = targetUrl;
@@ -8596,6 +8743,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
             activeProductIndex.value = 0;
             activeModuleIndex.value = 0;
           }
+          expandedCardIndex.value = activeProductIndex.value;
           nextTick(() => {
             var _a2;
             (_a2 = searchInputRef.value) == null ? void 0 : _a2.focus();
@@ -8624,7 +8772,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
                   __props.visible ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     class: normalizeClass([unref(prefixCls2)]),
-                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                    onClick: _cache[2] || (_cache[2] = withModifiers(() => {
                     }, ["stop"]))
                   }, [
                     createElementVNode("div", {
@@ -8646,18 +8794,37 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
                                   key: product.id || pIndex,
                                   class: normalizeClass([
                                     unref(prefixCls2) + "__product-card",
-                                    { "is-active": activeProductIndex.value === pIndex }
+                                    { "is-active": activeProductIndex.value === pIndex },
+                                    { "is-expanded": expandedCardIndex.value === pIndex }
                                   ]),
-                                  onClick: ($event) => handleProductSelect(pIndex)
+                                  onClick: ($event) => {
+                                    handleProductSelect(pIndex);
+                                    expandedCardIndex.value = expandedCardIndex.value === pIndex ? null : pIndex;
+                                  }
                                 }, [
                                   createElementVNode("div", {
                                     class: normalizeClass([unref(prefixCls2) + "__product-name"])
                                   }, [
-                                    createElementVNode("span", null, toDisplayString(product.title), 1)
+                                    createVNode(unref(_sfc_main$x), {
+                                      icon: product.icon ? product.icon : "svg-icon:clipboard",
+                                      size: "16"
+                                    }, null, 8, ["icon"]),
+                                    createElementVNode("span", null, toDisplayString(product.title), 1),
+                                    product.children.length > 0 ? (openBlock(), createElementBlock("div", {
+                                      key: 0,
+                                      class: normalizeClass([unref(prefixCls2) + "__card-toggle"])
+                                    }, [
+                                      createVNode(unref(_sfc_main$x), {
+                                        icon: expandedCardIndex.value === pIndex ? "lucide:chevron-up" : "lucide:chevron-down",
+                                        size: 14
+                                      }, null, 8, ["icon"])
+                                    ], 2)) : createCommentVNode("", true)
                                   ], 2),
-                                  product.children.length > 0 ? (openBlock(), createElementBlock("div", {
+                                  product.children.length > 0 && expandedCardIndex.value === pIndex ? (openBlock(), createElementBlock("div", {
                                     key: 0,
-                                    class: normalizeClass([unref(prefixCls2) + "__product-modules"])
+                                    class: normalizeClass([unref(prefixCls2) + "__product-modules"]),
+                                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                                    }, ["stop"]))
                                   }, [
                                     (openBlock(true), createElementBlock(Fragment, null, renderList(product.children, (mod, mIndex) => {
                                       return openBlock(), createElementBlock("span", {
@@ -8689,7 +8856,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
                             ref_key: "searchInputRef",
                             ref: searchInputRef,
                             modelValue: searchKeyword.value,
-                            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchKeyword.value = $event),
+                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchKeyword.value = $event),
                             placeholder: unref(t2)("layout.common.searchMenu"),
                             clearable: "",
                             size: "default"
@@ -8775,7 +8942,7 @@ const _sfc_main$r = /* @__PURE__ */ Object.assign({ name: "ProductServicePanel"
     };
   }
 });
-const ProductServicePanel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-130420a1"]]);
+const ProductServicePanel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-7913a05f"]]);
 const _sfc_main$q = /* @__PURE__ */ Object.assign({ name: "Logo" }, {
   __name: "Logo",
   emits: ["logo-click"],
@@ -8943,10 +9110,10 @@ const _sfc_main$o = /* @__PURE__ */ Object.assign({ name: "Message" }, {
 const Message = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-fdaeb8e4"]]);
 const avatarImg = "data:image/gif;base64,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";
 const _hoisted_1$9 = { class: "flex items-center px-10px py-8px text-[var(--top-header-text-color)] hover:text-[var(--top-header-hover-color)] rounded-6px bg-[var(--top-header-company-bg-color)]" };
-const _hoisted_2$8 = { class: "pl-6px text-12px <lg:hidden" };
+const _hoisted_2$8 = { class: "pl-6px text-12px <lg:hidden truncate max-w-120px" };
 const _hoisted_3$7 = { class: "ml-6px" };
-const _hoisted_4$6 = { class: "flex items-center text-[var(--top-header-text-color)] hover:text-[var(--top-header-hover-color)] mr-18px" };
-const _hoisted_5$5 = { class: "pl-5px text-12px <lg:hidden" };
+const _hoisted_4$6 = { class: "flex items-center text-[var(--top-header-text-color)] hover:text-[var(--top-header-hover-color)]" };
+const _hoisted_5$5 = { class: "pl-5px text-12px <lg:hidden truncate max-w-100px" };
 const _hoisted_6$4 = { class: "ml-6px" };
 const _hoisted_7$2 = { class: "flex items-center text-#e0e0e0" };
 const _hoisted_8$1 = { class: "flex flex-col gap-3px pl-5px text-12px <lg:hidden" };
@@ -9146,7 +9313,7 @@ const _sfc_main$n = /* @__PURE__ */ Object.assign({ name: "UserInfo" }, {
     };
   }
 });
-const UserInfo = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-31268ba6"]]);
+const UserInfo = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-d68b68d5"]]);
 const filterBreadcrumb = (routes, parentPath = "") => {
   var _a2;
   const res = [];
@@ -10378,15 +10545,16 @@ const useRenderLayout = (onLogoClick, onMessageClick, onLogoutClick, onClearCach
   };
   const renderTop = () => {
     return createVNode(Fragment, null, [createVNode("div", {
-      "class": ["relative flex items-center justify-between bg-[linear-gradient(var(--top-header-bg-color))] shadow-[0px_2px_6px_0px_rgba(197,206,225,0.35)] z-100", {
+      "class": ["relative w-full flex items-center justify-between bg-[linear-gradient(var(--top-header-bg-color))] shadow-[0px_2px_6px_0px_rgba(197,206,225,0.35)] z-100", {
         "layout-border__bottom": !tagsView.value
       }, festivalTopClass.value]
     }, [logo.value ? createVNode(_sfc_main$q, {
-      "class": ["w-[var(--left-menu-max-width)]"],
+      "class": ["shrink-0 w-[var(--left-menu-max-width)]"],
       "onLogoClick": onLogoClick
     }, null) : void 0, tagsView.value && createVNode(TagsView, {
-      "class": ["layout-border__bottom flex-1"]
+      "class": ["layout-border__bottom flex-1 min-w-0"]
     }, null), createVNode(ToolHeader, {
+      "class": "shrink-0 pl-20px",
       "onMessageClick": onMessageClick,
       "onLogoutClick": onLogoutClick,
       "onClearCacheLogoutClick": onClearCacheLogoutClick,