@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.190

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

@@ -0,0 +1,244 @@
+import { defineComponent, ref, inject, resolveDirective, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createCommentVNode, normalizeClass, Fragment, renderList, withDirectives, toDisplayString, createBlock, createTextVNode } from "vue";
+import { OIcon, OTag } from "@opensig/opendesign";
+import IconCaretLeft from "../../../_virtual/icon-caret-left.mjs";
+import IconCaretRight from "../../../_virtual/icon-caret-right.mjs";
+import { isTagExpired } from "../utils.mjs";
+import { useDebounceFn, useElementSize, watchDebounced, useIntersectionObserver } from "@vueuse/core";
+const _hoisted_1 = { class: "header-nav-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "left-icon"
+};
+const _hoisted_3 = ["onMouseenter", "onMouseleave"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = { class: "nav-text" };
+const _hoisted_6 = ["id", "onClick"];
+const _hoisted_7 = { class: "nav-text" };
+const _hoisted_8 = {
+  key: 1,
+  class: "right-icon"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeaderNav",
+  props: {
+    navData: {},
+    community: {},
+    activeIndex: {},
+    hoverId: {}
+  },
+  emits: ["handle-mouseenter", "handle-mouseleave", "handle-click", "nav-layout"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const navRef = ref();
+    const navVisibleRight = ref(false);
+    const navVisibleLeft = ref(false);
+    const hoverIndex = ref();
+    const toggleDebounced = useDebounceFn((item, id) => {
+      hoverIndex.value = item == null ? void 0 : item.id;
+      if (id === "mouseenter") {
+        emit("handle-mouseenter", item);
+      }
+      if (id === "mouseleave") {
+        hoverIndex.value = "";
+        emit("handle-mouseleave", item);
+      }
+    }, 100);
+    const handleClick = (item) => {
+      emit("handle-click", item);
+    };
+    const headerNavRef = ref();
+    const navListRef = ref();
+    const { width: headerNavWidth } = useElementSize(headerNavRef);
+    const { width: navListWidth } = useElementSize(navListRef);
+    const headerUserFullWidth = inject("headerUserFullWidth");
+    const isSearchHidden = inject("isSearchHidden");
+    const shrinkUserOrSearch = inject("shrinkUserOrSearch");
+    const expandUser = inject("expandUser");
+    const expandSearch = inject("expandSearch");
+    watchDebounced(
+      () => Math.floor(headerNavWidth.value - navListWidth.value),
+      (diffWidth) => {
+        if (diffWidth <= 0) {
+          shrinkUserOrSearch == null ? void 0 : shrinkUserOrSearch();
+          return;
+        }
+        if (diffWidth > 161 && (isSearchHidden == null ? void 0 : isSearchHidden.value)) {
+          expandSearch == null ? void 0 : expandSearch();
+          return;
+        }
+        if ((headerUserFullWidth == null ? void 0 : headerUserFullWidth.value) && diffWidth > headerUserFullWidth.value) {
+          expandUser == null ? void 0 : expandUser();
+        }
+      },
+      { debounce: 100, immediate: true }
+    );
+    const navStartRef = ref();
+    const navEndRef = ref();
+    const scrollNavRight = () => {
+      navRef.value.scrollTo({
+        left: navRef.value.clientWidth,
+        behavior: "smooth"
+      });
+    };
+    const scrollNavLeft = () => {
+      navRef.value.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      });
+    };
+    let hasEmittedOverflow = false;
+    useIntersectionObserver(
+      [navStartRef, navEndRef],
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === navStartRef.value) {
+            navVisibleLeft.value = !entry.isIntersecting;
+          }
+          if (entry.target === navEndRef.value) {
+            navVisibleRight.value = !entry.isIntersecting;
+          }
+        });
+        const hasOverflow = navVisibleLeft.value || navVisibleRight.value;
+        if (hasOverflow !== hasEmittedOverflow) {
+          hasEmittedOverflow = hasOverflow;
+          emit("nav-layout", hasOverflow);
+        }
+      },
+      {
+        root: navRef,
+        threshold: 0
+      }
+    );
+    const navFirstHoverTime = inject("navFirstHoverTime");
+    const navStepCount = inject("navStepCount");
+    const increNavStepCount = inject("increNavStepCount");
+    const updateNavFirstHoverTime = inject("updateNavFirstHoverTime");
+    const clearNavHandleTrace = inject("clearNavHandleTrace");
+    const onHoverHeader = () => clearNavHandleTrace == null ? void 0 : clearNavHandleTrace();
+    const onHoverNav = (name) => {
+      updateNavFirstHoverTime == null ? void 0 : updateNavFirstHoverTime();
+      increNavStepCount == null ? void 0 : increNavStepCount();
+      return {
+        event: "hover",
+        properties: {
+          module: "navigation",
+          level1: name,
+          target: name
+        }
+      };
+    };
+    const onClickNavItem = (item) => {
+      const res = {
+        properties: {
+          module: "navigation",
+          level1: item.label,
+          target: item.label,
+          ...navStepCount && { steps: navStepCount.value },
+          url: item.href,
+          ...(navFirstHoverTime == null ? void 0 : navFirstHoverTime.value) && { duration: Date.now() - navFirstHoverTime.value }
+        }
+      };
+      return res;
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      const _directive_analytics = resolveDirective("analytics");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "headerNavRef",
+          ref: headerNavRef,
+          class: "header-nav"
+        }, [
+          navVisibleLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(OIcon), { onClick: scrollNavLeft }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretLeft))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "navRef",
+            ref: navRef,
+            class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }])
+          }, [
+            createElementVNode("ul", {
+              ref_key: "navListRef",
+              ref: navListRef,
+              class: normalizeClass(["o-nav-list", [(_a = props.community) == null ? void 0 : _a.toLowerCase()]]),
+              onMouseenter: onHoverHeader
+            }, [
+              createElementVNode("li", {
+                ref_key: "navStartRef",
+                ref: navStartRef,
+                class: "nav-sentinel",
+                "aria-hidden": "true"
+              }, null, 512),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navData, (item, idx) => {
+                var _a2, _b;
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  key: item.id,
+                  class: normalizeClass({
+                    "is-selected": hoverIndex.value === item.id || props.hoverId === item.id,
+                    "is-active": props.activeIndex === idx || props.activeIndex === item.id,
+                    "is-disabled": item == null ? void 0 : item.disabled
+                  }),
+                  onMouseenter: ($event) => unref(toggleDebounced)(item, "mouseenter"),
+                  onMouseleave: ($event) => unref(toggleDebounced)(item, "mouseleave")
+                }, [
+                  ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item"
+                  }, [
+                    createElementVNode("span", _hoisted_5, toDisplayString(item.label), 1)
+                  ], 8, _hoisted_4)) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    id: "tour_headerNav_" + item.id,
+                    class: "nav-item item-other",
+                    onClick: ($event) => handleClick(item)
+                  }, [
+                    createElementVNode("span", _hoisted_7, toDisplayString(item.label), 1),
+                    item.tag && !unref(isTagExpired)(item.tagExpire) ? (openBlock(), createBlock(unref(OTag), {
+                      key: 0,
+                      color: "danger",
+                      size: "small",
+                      round: "pill",
+                      class: normalizeClass(["content-tag", `tag-${(_b = item == null ? void 0 : item.tag) == null ? void 0 : _b.toLowerCase()}`])
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.tag), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["class"])) : createCommentVNode("", true)
+                  ], 8, _hoisted_6))
+                ], 42, _hoisted_3)), [
+                  [_directive_analytics, () => onHoverNav(item.label), "mouseenter"],
+                  [_directive_analytics, () => onClickNavItem(item)]
+                ]);
+              }), 128)),
+              createElementVNode("li", {
+                ref_key: "navEndRef",
+                ref: navEndRef,
+                class: "nav-sentinel",
+                "aria-hidden": "true"
+              }, null, 512)
+            ], 34)
+          ], 2),
+          navVisibleRight.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            createVNode(unref(OIcon), { onClick: scrollNavRight }, {
+              default: withCtx(() => [
+                createVNode(unref(IconCaretRight))
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ], 512)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,434 @@
+.hover-icon-rotate .o-icon[data-v-5c72051b] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-5c72051b] {
+    transform: rotate(-180deg);
+}
+}
+.header-nav[data-v-5c72051b] {
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  transform: translateX(-130%);
+  transition-duration: 0.333s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
+  opacity: 0;
+  display: flex;
+}
+.header-nav.active[data-v-5c72051b] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  background-color: var(--o-color-mask1);
+}
+.o-nav[data-v-5c72051b] {
+  height: 100%;
+  min-width: 99px;
+  max-width: 40%;
+  background: var(--o-color-fill1);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.o-nav .o-nav-list > li[data-v-5c72051b] {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  padding-left: 24px;
+  padding-right: var(--o-gap-2);
+  color: var(--o-color-info1);
+}
+.o-nav .o-nav-list > li.active[data-v-5c72051b] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.o-nav .o-nav-list > li.is-disabled[data-v-5c72051b] {
+  color: var(--o-color-info4);
+  pointer-events: none;
+}
+.o-nav .o-nav-list > li .text-label[data-v-5c72051b] {
+  display: block;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  width: 100%;
+}
+.nav-aside[data-v-5c72051b] {
+  background-color: var(--o-color-fill2);
+  flex: 1;
+  height: 100%;
+}
+.nav-aside .nav-aside-wrapper[data-v-5c72051b] {
+  overflow-y: auto;
+  padding: 16px 12px 32px;
+  height: 100%;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content[data-v-5c72051b] {
+  display: block;
+  flex: 0 1 auto;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-5c72051b] {
+  position: relative;
+  padding-top: var(--o-gap-3);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content + .nav-aside-content[data-v-5c72051b]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background-color: rgba(var(--o-grey-14), 0.1);
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-5c72051b] {
+  color: var(--o-color-info3);
+  margin-bottom: 8px;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .nav-aside-wrapper .nav-aside-content .content-label[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children[data-v-5c72051b] {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-tag[data-v-5c72051b] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: 100vh;
+}
+.nav-aside .nav-aside-wrapper .nav-aside-content .item-not-children .o-icon[data-v-5c72051b] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-5c72051b] {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  color: var(--o-color-info1);
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .nav-aside-wrapper .source-code-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .nav-aside-wrapper .source-code-item.active[data-v-5c72051b] {
+  color: var(--o-color-primary1);
+}
+.nav-aside .nav-aside-wrapper .source-code-item + .source-code-item[data-v-5c72051b] {
+  border-top: 1px solid var(--o-color-control4);
+}
+.nav-aside .nav-aside-wrapper .source-code-item .icon[data-v-5c72051b] {
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .nav-aside-wrapper[data-v-5c72051b]::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
+.nav-aside .nav-aside-wrapper[data-v-5c72051b]::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.nav-aside .nav-aside-wrapper[data-v-5c72051b]::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--o-color-control1);
+}
+.nav-aside .container-mobile[data-v-5c72051b] {
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .container-mobile[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .container-mobile[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .container-mobile[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .container-mobile[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .container-mobile .o-icon[data-v-5c72051b] {
+  --icon-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.nav-aside .content-container-mobile[data-v-5c72051b] {
+  margin-top: var(--o-gap-3);
+}
+.nav-aside .content-container-mobile[data-v-5c72051b]:first-child {
+  margin-top: 8px;
+}
+.nav-aside .content-container-mobile[data-v-5c72051b]:last-child {
+  margin-bottom: 12px;
+}
+.nav-aside .content-container-mobile .content-subtitle[data-v-5c72051b] {
+  color: var(--o-color-info1);
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .content-subtitle[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.nav-aside .content-container-mobile .content-subtitle .item-label[data-v-5c72051b] {
+  font-weight: 600;
+}
+.nav-aside .content-container-mobile .content-tag[data-v-5c72051b] {
+  margin-left: var(--o-gap-2);
+  --layout-pkg-radius: var(--o-radius-xs);
+}
+.nav-aside .content-container-mobile .desc-container[data-v-5c72051b] {
+  overflow: hidden;
+  position: relative;
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+  color: var(--o-color-info2);
+  margin-top: var(--o-gap-1);
+  text-align: justify;
+  word-break: normal;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+@media (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.nav-aside .content-container-mobile .desc-container .item-desc[data-v-5c72051b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.nav-aside .content-item-disabled[data-v-5c72051b] {
+  cursor: no-drop;
+}
+.nav-aside .content-item-disabled .content-subtitle[data-v-5c72051b] {
+  color: var(--o-color-info4);
+  cursor: no-drop;
+  pointer-events: none;
+}
+.nav-aside .content-item-disabled .desc-container .item-desc[data-v-5c72051b] {
+  color: var(--o-color-info4);
+}
+.header-tool[data-v-5c72051b] {
+  margin-bottom: 36px;
+  width: 100%;
+  display: flex;
+  height: auto;
+  align-items: center;
+  flex-direction: column;
+}
+.header-tool-item[data-v-5c72051b] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  padding-left: 24px;
+  padding-right: var(--o-gap-2);
+  color: var(--o-color-info1);
+}
+.header-tool-item.active[data-v-5c72051b] {
+  color: var(--o-color-primary1);
+  background: var(--o-color-fill2);
+  font-weight: 500;
+}
+.header-tool-item.is-disabled[data-v-5c72051b] {
+  color: var(--o-color-info4);
+  pointer-events: none;
+}
+.header-tool-item[data-v-5c72051b] {
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.header-tool-item[data-v-5c72051b] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.header-tool-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.header-tool-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.header-tool-item[data-v-5c72051b] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.other-tool[data-v-5c72051b] {
+  width: 100%;
+  padding: var(--o-gap-2) var(--o-gap-2) 0 var(--o-gap-5);
+}
+.mindspore .content-container-mobile .content-tag[data-v-5c72051b] {
+  --layout-pkg-radius: 100vh;
+}

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

@@ -0,0 +1,34 @@
+import { NavMobileItemT, LangItemT } from '../types.ts';
+export interface OHeaderEmitsT {
+    (e: 'on-click'): void;
+    (e: 'lang-click', val: LangItemT): void;
+    (e: 'handle-click', val: any): void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        tool?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<NavMobileItemT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "handle-click": (val: any) => any;
+    "on-click": () => any;
+    "lang-click": (val: LangItemT) => any;
+}, string, import('vue').PublicProps, Readonly<NavMobileItemT> & Readonly<{
+    "onHandle-click"?: ((val: any) => any) | undefined;
+    "onOn-click"?: (() => any) | undefined;
+    "onLang-click"?: ((val: LangItemT) => any) | undefined;
+}>, {
+    navData: import('../types.ts').NavItemT[];
+    menuShow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};