@opendesign-plus-test/components 0.0.1-rc.85 → 0.0.1-rc.87

package/dist/treeshaking/components/common/MoreText.css

@@ -1,12 +1,12 @@
-.hover-icon-rotate .o-icon[data-v-0eb750e5] {
+.hover-icon-rotate .o-icon {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-0eb750e5] {
+.hover-icon-rotate:hover .o-icon {
     transform: rotate(-180deg);
 }
 }
-.more-text-wrapper .more-text-content[data-v-0eb750e5] {
+.more-text-wrapper .more-text-content {
   line-height: 1.5em;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -16,24 +16,24 @@
   word-break: break-all;
   transition: height 0.1s;
 }
-.more-text-wrapper .more-text-content.is-link[data-v-0eb750e5] {
+.more-text-wrapper .more-text-content.is-link {
   color: var(--o-color-primary1);
   cursor: pointer;
 }
 @media (hover: hover) {
-.more-text-wrapper .more-text-content.is-link[data-v-0eb750e5]:hover {
+.more-text-wrapper .more-text-content.is-link:hover {
     color: var(--o-color-primary2);
 }
 }
-.more-text-wrapper .more-text-btn[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn {
   color: var(--o-color-primary1);
 }
 @media (hover: hover) {
-.more-text-wrapper .more-text-btn[data-v-0eb750e5]:hover {
+.more-text-wrapper .more-text-btn:hover {
     color: var(--o-color-primary2);
 }
 }
-.more-text-wrapper .more-text-btn > div[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn > div {
   height: 1.5em;
   cursor: pointer;
   display: flex;
@@ -44,25 +44,25 @@
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.more-text-wrapper .more-text-btn > div[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn > div {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.more-text-wrapper .more-text-btn > div[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn > div {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.more-text-wrapper .more-text-btn > div[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn > div {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.more-text-wrapper .more-text-btn > div[data-v-0eb750e5] {
+.more-text-wrapper .more-text-btn > div {
     font-size: 12px;
     line-height: 18px;
 }

package/dist/treeshaking/components/common/MoreText.vue.mjs

@@ -1,7 +1,88 @@
-import _sfc_main from "./MoreText.vue2.mjs";
-import './MoreText.css';
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const MoreText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0eb750e5"]]);
+import { defineComponent, ref, onMounted, watch, nextTick, openBlock, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, unref, createVNode, withCtx, createCommentVNode } from "vue";
+import { OIcon, OIconChevronDown, OIconChevronUp } from "@opensig/opendesign";
+import { useI18n } from "../../i18n/index.mjs";
+const _hoisted_1 = { class: "more-text-wrapper" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MoreText",
+  props: {
+    text: { default: "" },
+    link: { type: Boolean, default: false },
+    lines: { default: 3 },
+    show: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useI18n();
+    const expanded = ref(false);
+    const showBtn = ref(false);
+    const offsetHeight = ref(0);
+    const contentRef = ref(null);
+    onMounted(() => {
+      determineHeight();
+    });
+    watch([() => props.text, () => props.show], () => {
+      determineHeight();
+    });
+    const determineHeight = () => {
+      nextTick(() => {
+        const ele = contentRef.value;
+        if (ele) {
+          const range = document.createRange();
+          range.setStart(ele, 0);
+          range.setEnd(ele, ele.childNodes.length);
+          showBtn.value = range.getBoundingClientRect().height > ele.offsetHeight + 10 || ele.scrollHeight > ele.offsetHeight + 10;
+          offsetHeight.value = range.getBoundingClientRect().height || ele.scrollHeight;
+        } else {
+          showBtn.value = false;
+        }
+      });
+    };
+    const clickText = () => {
+      if (props.link) {
+        window.open(props.text);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["more-text-content", __props.link && "is-link"]),
+          ref_key: "contentRef",
+          ref: contentRef,
+          style: normalizeStyle({
+            "max-height": expanded.value ? offsetHeight.value + "px" : "4.5em",
+            "-webkit-line-clamp": expanded.value ? "initial" : __props.lines
+          }),
+          onClick: clickText
+        }, toDisplayString(__props.text), 7),
+        showBtn.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "more-text-btn",
+          onClick: _cache[0] || (_cache[0] = ($event) => expanded.value = !expanded.value)
+        }, [
+          !expanded.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createElementVNode("span", null, toDisplayString(unref(t)("common.expand")), 1),
+            createVNode(unref(OIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(OIconChevronDown))
+              ]),
+              _: 1
+            })
+          ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("span", null, toDisplayString(unref(t)("common.collapse")), 1),
+            createVNode(unref(OIcon), null, {
+              default: withCtx(() => [
+                createVNode(unref(OIconChevronUp))
+              ]),
+              _: 1
+            })
+          ]))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
-  MoreText as default
+  _sfc_main as default
 };

package/dist/treeshaking/components/common/MoreText.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./MoreText.vue.mjs";
+import './MoreText.css';
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/common/ThFilter.css

@@ -15,50 +15,50 @@
 .th-filter-wrapper > span:first-child {
   word-break: keep-all;
 }
-.filter-wrapper {
+.th-filter-wrapper .filter-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
-.filter-wrapper > * {
+.th-filter-wrapper .filter-wrapper > * {
   flex-shrink: 0;
 }
-.filter-wrapper .filter-hover-icon {
+.th-filter-wrapper .filter-wrapper .filter-hover-icon {
   display: none;
 }
-.filter-wrapper .filter-icon {
+.th-filter-wrapper .filter-wrapper .filter-icon {
   font-size: 24px;
   line-height: 32px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.filter-wrapper .filter-icon {
+.th-filter-wrapper .filter-wrapper .filter-icon {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.filter-wrapper .filter-icon {
+.th-filter-wrapper .filter-wrapper .filter-icon {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.filter-wrapper .filter-icon {
+.th-filter-wrapper .filter-wrapper .filter-icon {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (max-width: 600px) {
-.filter-wrapper .filter-icon {
+.th-filter-wrapper .filter-wrapper .filter-icon {
     font-size: 16px;
     line-height: 24px;
 }
 }
-.filter-wrapper:hover .filter-icon, .filter-wrapper.has-checked .filter-icon {
+.th-filter-wrapper .filter-wrapper:hover .filter-icon, .th-filter-wrapper .filter-wrapper.has-checked .filter-icon {
   color: var(--o-color-primary1);
 }
-.filter-wrapper:hover .o-icon path, .filter-wrapper.has-checked .o-icon path {
+.th-filter-wrapper .filter-wrapper:hover .o-icon path, .th-filter-wrapper .filter-wrapper.has-checked .o-icon path {
   fill: currentColor;
 }
 .th-filter-dropdown .o-dropdown-item {

package/dist/treeshaking/components/common/TooltipText.css

@@ -1,27 +1,34 @@
-.hover-icon-rotate .o-icon[data-v-51e2ce78] {
+.hover-icon-rotate .o-icon {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-51e2ce78] {
+.hover-icon-rotate:hover .o-icon {
     transform: rotate(-180deg);
 }
 }
-.tooltip-text-wrapper .tooltip-text[data-v-51e2ce78] {
+.tooltip-text-wrapper .tooltip-text {
   overflow: hidden;
   word-break: keep-all;
 }
-.tooltip-text-wrapper .tooltip-text.ellipsis[data-v-51e2ce78] {
+.tooltip-text-wrapper .tooltip-text.ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.tooltip-text-wrapper .tooltip-text.multi-lines[data-v-51e2ce78] {
+.tooltip-text-wrapper .tooltip-text.multi-lines {
   white-space: normal;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--lines);
 }
-.tooltip-text-wrapper .button[data-v-51e2ce78] {
+.tooltip-text-wrapper .button {
   color: var(--o-color-primary1);
   cursor: pointer;
+}
+.tooltip-text-wrapper .popup-box2 {
+  color: var(--o-color-info2);
+}
+.tooltip-text-wrapper .popup-box2.fz-14 {
+  font-size: 14px;
+  line-height: 22px;
 }

package/dist/treeshaking/components/common/TooltipText.vue.mjs

@@ -1,8 +1,85 @@
-import _sfc_main from "./TooltipText.vue2.mjs";
-import './TooltipText.css';
-import './TooltipText2.css';
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const TooltipText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-51e2ce78"]]);
+import { defineComponent, ref, useSlots, onMounted, onUnmounted, watch, computed, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, createElementVNode, normalizeClass, toDisplayString, renderSlot } from "vue";
+import { isClient, OPopover } from "@opensig/opendesign";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TooltipText",
+  props: {
+    lines: {},
+    width: {},
+    type: { default: "" },
+    size: { default: 14 }
+  },
+  setup(__props) {
+    const contentRef = ref(null);
+    const ellipsis = ref(true);
+    const props = __props;
+    const slots = useSlots();
+    let resizeObserver = null;
+    const checkOverflow = () => {
+      if (!isClient) return;
+      const ele = contentRef.value;
+      if (!ele) return;
+      ellipsis.value = ele.scrollWidth > ele.offsetWidth + 1 || ele.scrollHeight > ele.offsetHeight + 1;
+    };
+    onMounted(() => {
+      checkOverflow();
+      if (!isClient || !contentRef.value) return;
+      resizeObserver = new ResizeObserver(() => checkOverflow());
+      resizeObserver.observe(contentRef.value);
+    });
+    onUnmounted(() => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    });
+    watch(() => [props.lines, props.width], () => {
+      if (isClient) requestAnimationFrame(checkOverflow);
+    });
+    const getTextFromNode = (node) => {
+      const children = node.children ?? "";
+      if (Array.isArray(children)) {
+        return children.map((v) => getTextFromNode(v)).join("");
+      }
+      return String(children);
+    };
+    const contentText = computed(() => {
+      var _a;
+      const nodes = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+      return nodes.map((node) => getTextFromNode(node)).join("\n");
+    });
+    const wrapperStyle = computed(() => {
+      const calcWidth = Number.isNaN(Number(props.width)) ? props.width : `${props.width}px`;
+      return { width: calcWidth };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "tooltip-text-wrapper",
+        style: normalizeStyle(wrapperStyle.value)
+      }, [
+        createVNode(unref(OPopover), {
+          anchor: "",
+          disabled: !ellipsis.value,
+          adjustMinWidth: false,
+          adjustWidth: true
+        }, {
+          target: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["tooltip-text", __props.type, ellipsis.value && "ellipsis", __props.lines > 1 && "multi-lines"]),
+              ref_key: "contentRef",
+              ref: contentRef,
+              style: normalizeStyle(`--lines: ${__props.lines};`)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 6)
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["popup-box2", `fz-${__props.size}`])
+            }, toDisplayString(contentText.value), 3)
+          ]),
+          _: 3
+        }, 8, ["disabled"])
+      ], 4);
+    };
+  }
+});
 export {
-  TooltipText as default
+  _sfc_main as default
 };

package/dist/treeshaking/components/common/TooltipText.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./TooltipText.vue.mjs";
+import './TooltipText.css';
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/header/OHeader.css

@@ -1,31 +1,32 @@
-.hover-icon-rotate .o-icon[data-v-b3349981] {
+.hover-icon-rotate .o-icon[data-v-bfc2a089] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-b3349981] {
+.hover-icon-rotate:hover .o-icon[data-v-bfc2a089] {
     transform: rotate(-180deg);
 }
 }
-.header[data-v-b3349981] {
+.header[data-v-bfc2a089] {
   --o-header-height: 72px;
 }
-.header-wrap[data-v-b3349981] {
+.header-wrap[data-v-bfc2a089] {
   background-color: var(--o-color-fill2);
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 999;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
+  box-shadow: var(--o-shadow-1);
   backdrop-filter: blur(5px);
   height: var(--o-header-height);
 }
-.header-content[data-v-b3349981] {
+.header-content[data-v-bfc2a089] {
   display: flex;
   align-items: center;
   height: 100%;
+  --layout-content-padding: 28px;
 }
-.header-logo[data-v-b3349981] {
+.header-logo[data-v-bfc2a089] {
   height: 100%;
   display: flex;
   align-items: center;
@@ -33,33 +34,27 @@
   margin-right: 24px;
   flex-shrink: 0;
 }
-.logo[data-v-b3349981] {
+.logo[data-v-bfc2a089] {
   height: 32px;
 }
-.header-nav[data-v-b3349981] {
+.header-nav[data-v-bfc2a089] {
   flex: 1;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   position: relative;
 }
-.header-toolbar[data-v-b3349981] {
+.header-toolbar[data-v-bfc2a089] {
   height: 100%;
   position: relative;
 }
-.header-nav-content[data-v-b3349981] {
+.header-nav-content[data-v-bfc2a089] {
   position: fixed;
   top: var(--o-header-height);
   left: 0;
   right: 0;
   background: var(--o-color-fill2);
   z-index: 998;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
+  box-shadow: var(--o-shadow-1);
   overflow: hidden;
-}
-.header-wrap-dark[data-v-b3349981] {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
-}
-.header-wrap-dark .header-nav-content[data-v-b3349981] {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
 }

package/dist/treeshaking/components/header/OHeader.vue.d.ts

@@ -10,7 +10,9 @@ declare function __VLS_template(): {
         nav?(_: {}): any;
         toolbar?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        contentRef: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -20,7 +22,9 @@ declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<NavT> & Readonly<{
     "onHandle-click"?: ((val: any) => any) | undefined;
     "onGo-home"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    contentRef: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/treeshaking/components/header/OHeader.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OHeader.vue2.mjs";
 import './OHeader.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3349981"]]);
+const _OHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bfc2a089"]]);
 export {
   _OHeader as default
 };

package/dist/treeshaking/components/header/OHeader.vue2.mjs

@@ -1,8 +1,7 @@
-import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, withCtx, renderSlot, createCommentVNode, createBlock } from "vue";
+import { defineComponent, ref, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, renderSlot, createCommentVNode, createBlock } from "vue";
 import ContentWrapper from "../common/ContentWrapper.vue.mjs";
 import HeaderNav from "./components/HeaderNav.vue.mjs";
 import HeaderContent from "./components/HeaderContent.vue.mjs";
-import { useTheme } from "../../shared/theme.mjs";
 const _hoisted_1 = { class: "header" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "header-nav" };
@@ -10,7 +9,6 @@ const _hoisted_4 = {
   key: 0,
   class: "header-toolbar"
 };
-const _hoisted_5 = { class: "header-nav-content" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OHeader",
   props: {
@@ -27,18 +25,80 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["go-home", "handle-click"],
   setup(__props, { emit: __emit }) {
-    const { isDark } = useTheme();
     const emit = __emit;
     const props = __props;
     const hoverIndex = ref();
     const hoverId = ref();
     const itemData = ref();
     const itemVisible = ref(false);
+    const closeTimer = ref(null);
+    const contentRef = ref();
+    const lastMousePos = ref({ x: 0, y: 0 });
+    let safetyTracker = null;
+    const cancelClose = () => {
+      if (closeTimer.value !== null) {
+        clearTimeout(closeTimer.value);
+        closeTimer.value = null;
+      }
+      removeSafetyTracker();
+    };
+    const removeSafetyTracker = () => {
+      if (safetyTracker) {
+        document.removeEventListener("mousemove", safetyTracker);
+        safetyTracker = null;
+      }
+    };
+    const isInTriangle = (px, py, ax, ay, bx, by, cx, cy) => {
+      const d1 = (px - bx) * (ay - by) - (ax - bx) * (py - by);
+      const d2 = (px - cx) * (by - cy) - (bx - cx) * (py - cy);
+      const d3 = (px - ax) * (cy - ay) - (cx - ax) * (py - ay);
+      const hasNeg = d1 < 0 || d2 < 0 || d3 < 0;
+      const hasPos = d1 > 0 || d2 > 0 || d3 > 0;
+      return !(hasNeg && hasPos);
+    };
+    const scheduleClose = (useTriangle = true) => {
+      cancelClose();
+      const exitPos = { ...lastMousePos.value };
+      const startTimer = () => {
+        closeTimer.value = window.setTimeout(() => {
+          removeSafetyTracker();
+          itemVisible.value = false;
+          closeTimer.value = null;
+        }, 100);
+      };
+      if (useTriangle && contentRef.value && itemVisible.value) {
+        const rect = contentRef.value.getBoundingClientRect();
+        safetyTracker = (e) => {
+          const mx = e.clientX;
+          const my = e.clientY;
+          if (mx >= rect.left && mx <= rect.right && my >= rect.top && my <= rect.bottom) {
+            cancelClose();
+            return;
+          }
+          const inTriangle = isInTriangle(mx, my, exitPos.x, exitPos.y, rect.left, rect.top, rect.right, rect.top);
+          if (!inTriangle) {
+            cancelClose();
+            itemVisible.value = false;
+          } else {
+            if (closeTimer.value !== null) {
+              clearTimeout(closeTimer.value);
+            }
+            startTimer();
+          }
+        };
+        document.addEventListener("mousemove", safetyTracker);
+      }
+      startTimer();
+    };
+    const onMousemoveHeader = (e) => {
+      lastMousePos.value = { x: e.clientX, y: e.clientY };
+    };
     const goHome = () => {
       emit("go-home");
     };
     const handleMouseenter = (val) => {
       var _a;
+      cancelClose();
       itemData.value = val;
       hoverIndex.value = val.id;
       if ((_a = val == null ? void 0 : val.children) == null ? void 0 : _a.length) {
@@ -46,21 +106,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const handleMouseleave = () => {
-      itemVisible.value = false;
+      scheduleClose(true);
     };
     const handleClick = (val) => {
       emit("handle-click", val);
     };
     const handleMouseenterSub = (val) => {
+      cancelClose();
       hoverId.value = val;
     };
     const handleMouseleaveSub = (val) => {
       hoverId.value = val;
+      scheduleClose(false);
     };
+    onUnmounted(() => {
+      cancelClose();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
-          class: normalizeClass(["header-wrap", { "header-wrap-dark": unref(isDark) }])
+          class: "header-wrap",
+          onMousemove: onMousemoveHeader
         }, [
           createVNode(ContentWrapper, { class: "header-content" }, {
             default: withCtx(() => [
@@ -96,8 +162,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           })
-        ], 2),
-        createElementVNode("div", _hoisted_5, [
+        ], 32),
+        createElementVNode("div", {
+          ref_key: "contentRef",
+          ref: contentRef,
+          class: "header-nav-content",
+          onMousemove: onMousemoveHeader
+        }, [
           createVNode(HeaderContent, {
             itemData: itemData.value,
             "item-visible": itemVisible.value,
@@ -108,7 +179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onHandleMouseenterSub: handleMouseenterSub,
             onHandleMouseleaveSub: handleMouseleaveSub
           }, null, 8, ["itemData", "item-visible", "bg-left", "bg-right", "community", "hover-index"])
-        ])
+        ], 544)
       ]);
     };
   }