@maketribe/ms-app 3.2.46 → 4.0.0-alpha.1

package/dist/esm/layouts/new/components/SubSidebar/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":["../../../../../../src/layouts/new/components/SubSidebar/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {useElementSize} from '@vueuse/core'\r\nimport Logo from '../Logo/index.vue'\r\nimport Menu from '../Menu/index.vue'\r\nimport useSettingsStore from '../../../../store/modules/settings'\r\nimport useMenuStore from '../../../../store/modules/menu'\r\nimport SvgIcon from \"../../common/components/SvgIcon/index.vue\";\r\n\r\ndefineOptions({\r\n  name: 'SubSidebar',\r\n})\r\n\r\nconst route = useRoute()\r\n\r\nconst settingsStore = useSettingsStore()\r\nconst menuStore = useMenuStore()\r\n\r\nconst subSidebarRef = ref()\r\nconst showShadowTop = ref(false)\r\nconst showShadowBottom = ref(false)\r\n\r\nfunction onSidebarScroll() {\r\n  const scrollTop = subSidebarRef.value.scrollTop\r\n  showShadowTop.value = scrollTop > 0\r\n  const clientHeight = subSidebarRef.value.clientHeight\r\n  const scrollHeight = subSidebarRef.value.scrollHeight\r\n  showShadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight\r\n}\r\n\r\nconst enableSidebar = computed(() => {\r\n  return settingsStore.mode === 'mobile' || (\r\n    menuStore.sidebarMenus.length !== 0\r\n    && !menuStore.sidebarMenus.every(item => item.meta?.menu === false)\r\n  )\r\n})\r\n\r\nwatch(enableSidebar, (val) => {\r\n  if (val) {\r\n    nextTick(() => {\r\n      onSidebarScroll()\r\n    })\r\n  }\r\n}, {\r\n  immediate: true,\r\n})\r\n\r\nconst menuRef = ref()\r\n\r\nonMounted(() => {\r\n  if (enableSidebar.value) {\r\n    const {height} = useElementSize(menuRef)\r\n    watch(() => height.value, () => {\r\n      if (height.value > 0) {\r\n        onSidebarScroll()\r\n      }\r\n    }, {\r\n      immediate: true,\r\n    })\r\n  }\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"enableSidebar\" class=\"sub-sidebar-container\" :class=\"{\r\n      'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,\r\n    }\"\r\n  >\r\n    <Logo\r\n      :show-logo=\"settingsStore.settings.menu.mode === 'single'\" class=\"sidebar-logo\" :class=\"{\r\n        'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',\r\n      }\"\r\n    />\r\n    <div\r\n      ref=\"subSidebarRef\" class=\"sub-sidebar flex-1 transition-shadow-300\" :class=\"{\r\n        'shadow-top': showShadowTop,\r\n        'shadow-bottom': showShadowBottom,\r\n      }\" @scroll=\"onSidebarScroll\"\r\n    >\r\n      <div ref=\"menuRef\">\r\n        <TransitionGroup name=\"sub-sidebar\">\r\n          <template v-for=\"(mainItem, mainIndex) in menuStore.allMenus\" :key=\"mainIndex\">\r\n            <div v-show=\"mainIndex === menuStore.actived\">\r\n              <Menu\r\n                :menu=\"mainItem.children\" :value=\"route.name as any\"\r\n                :default-openeds=\"menuStore.defaultOpenedPaths\"\r\n                :accordion=\"settingsStore.settings.menu.subMenuUniqueOpened\"\r\n                :collapse=\"settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse\"\r\n                class=\"menu\"\r\n                :class=\"{\r\n                  '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),\r\n                }\"\r\n              />\r\n            </div>\r\n          </template>\r\n        </TransitionGroup>\r\n      </div>\r\n    </div>\r\n    <div v-if=\"settingsStore.mode === 'pc'\" class=\"relative flex items-center px-4 py-3\"\r\n         :class=\"[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']\">\r\n      <span v-show=\"settingsStore.settings.menu.enableSubMenuCollapseButton\"\r\n            class=\"flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark-bg-stone-9 hover-bg-stone-2 dark-hover-bg-stone-8\"\r\n            :class=\"{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }\"\r\n            @click=\"settingsStore.toggleSidebarCollapse()\">\r\n        <SvgIcon name=\"toolbar-collapse\"/>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.sub-sidebar-container {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: var(--g-sub-sidebar-width);\r\n  background-color: var(--g-sub-sidebar-bg);\r\n  transition: background-color 0.3s, left 0.3s, width 0.3s;\r\n\r\n  &.is-collapse {\r\n    width: var(--g-sub-sidebar-collapse-width);\r\n\r\n    .sidebar-logo {\r\n      &:not(.sidebar-logo-bg) {\r\n        display: none;\r\n      }\r\n\r\n      :deep(span) {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sidebar-logo {\r\n    background-color: var(--g-sub-sidebar-bg);\r\n    transition: background-color 0.3s;\r\n\r\n    &.sidebar-logo-bg {\r\n      background-color: var(--g-sub-sidebar-logo-bg);\r\n\r\n      :deep(span) {\r\n        color: var(--g-sub-sidebar-logo-color);\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub-sidebar {\r\n    overflow: hidden auto;\r\n    overscroll-behavior: contain;\r\n\r\n    // firefox隐藏滚动条\r\n    scrollbar-width: none;\r\n\r\n    // chrome隐藏滚动条\r\n    &::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    &.shadow-top {\r\n      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 0 0 transparent;\r\n    }\r\n\r\n    &.shadow-bottom {\r\n      box-shadow: inset 0 0 0 transparent, inset 0 -10px 10px -10px var(--g-box-shadow-color);\r\n    }\r\n\r\n    &.shadow-top.shadow-bottom {\r\n      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 -10px 10px -10px var(--g-box-shadow-color);\r\n    }\r\n  }\r\n\r\n  .menu {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n// 次侧边栏动画\r\n.sub-sidebar-enter-active {\r\n  transition: 0.2s;\r\n}\r\n\r\n.sub-sidebar-enter-from,\r\n.sub-sidebar-leave-active {\r\n  opacity: 0;\r\n  transform: translateY(30px) skewY(10deg);\r\n}\r\n\r\n.sub-sidebar-leave-active {\r\n  position: absolute;\r\n}\r\n</style>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAEd,UAAM,gBAAgB;AACtB,UAAM,YAAY;AAElB,UAAM,gBAAgB;AAChB,UAAA,gBAAgB,IAAI,KAAK;AACzB,UAAA,mBAAmB,IAAI,KAAK;AAElC,aAAS,kBAAkB;AACnB,YAAA,YAAY,cAAc,MAAM;AACtC,oBAAc,QAAQ,YAAY;AAC5B,YAAA,eAAe,cAAc,MAAM;AACnC,YAAA,eAAe,cAAc,MAAM;AACzC,uBAAiB,QAAQ,KAAK,KAAK,YAAY,YAAY,IAAI;AAAA,IACjE;AAEM,UAAA,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,SAAS,YAC5B,UAAU,aAAa,WAAW,KAC/B,CAAC,UAAU,aAAa,MAAM,CAAA,SAAA;;AAAQ,2BAAK,SAAL,mBAAW,UAAS;AAAA,OAAK;AAAA,IAAA,CAErE;AAEK,UAAA,eAAe,CAAC,QAAQ;AAC5B,UAAI,KAAK;AACP,iBAAS,MAAM;AACG;QAAA,CACjB;AAAA,MACH;AAAA,IAAA,GACC;AAAA,MACD,WAAW;AAAA,IAAA,CACZ;AAED,UAAM,UAAU;AAEhB,cAAU,MAAM;AACd,UAAI,cAAc,OAAO;AACvB,cAAM,EAAC,OAAA,IAAU,eAAe,OAAO;AACjC,cAAA,MAAM,OAAO,OAAO,MAAM;AAC1B,cAAA,OAAO,QAAQ,GAAG;AACJ;UAClB;AAAA,QAAA,GACC;AAAA,UACD,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/layouts/new/components/Topbar/Tabbar/index.vue.js

@@ -0,0 +1,9 @@
+import _sfc_main from "./index.vue2.js";
+/* empty css           */
+/* empty css           */
+import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const Tabbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1871e1c6"]]);
+export {
+  Tabbar as default
+};
+//# sourceMappingURL=index.vue.js.map

package/dist/esm/layouts/new/components/Topbar/Tabbar/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/layouts/new/components/Topbar/Tabbar/index.vue2.js

@@ -0,0 +1,254 @@
+import { defineComponent, computed, ref, shallowRef, onBeforeUpdate, watch, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, withModifiers, createVNode, TransitionGroup, withCtx, Fragment, renderList, unref, normalizeClass, createBlock, createCommentVNode, createTextVNode, toDisplayString, withDirectives, vShow, pushScopeId, popScopeId } from "vue";
+import ContextMenu from "@imengyu/vue3-context-menu";
+import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
+import hotkeys from "hotkeys-js";
+import Message from "vue-m-message";
+import { useMagicKeys } from "@vueuse/core";
+import useSettingsStore from "../../../../../store/modules/settings.js";
+import useTabbarStore from "../../../../../store/modules/tabbar.js";
+import _sfc_main$1 from "../../../common/components/SvgIcon/index.vue.js";
+import { useRoute, useRouter } from "vue-router";
+import useTabbar from "../../../../../utils/composables/useTabbar.js";
+import useMainPage from "../../../../../utils/composables/useMainPage.js";
+const _withScopeId = (n) => (pushScopeId("data-v-1871e1c6"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "tabbar-container" };
+const _hoisted_2 = ["data-index", "title", "onClick", "onContextmenu"];
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tab-dividers" }, null, -1));
+const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tab-background" }, null, -1));
+const _hoisted_5 = { class: "tab-content" };
+const _hoisted_6 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Tabbar"
+  },
+  __name: "index",
+  setup(__props) {
+    const route = useRoute();
+    const router = useRouter();
+    const settingsStore = useSettingsStore();
+    const tabbarStore = useTabbarStore();
+    const tabbar = useTabbar();
+    const mainPage = useMainPage();
+    const keys = useMagicKeys({ reactive: true });
+    const activedTabId = computed(() => tabbar.getId());
+    const tabsRef = ref();
+    const tabContainerRef = ref();
+    const tabRef = shallowRef([]);
+    onBeforeUpdate(() => {
+      tabRef.value = [];
+    });
+    watch(
+      () => route,
+      (val) => {
+        if (settingsStore.settings.tabbar.enable) {
+          tabbarStore.add(val).then(() => {
+            const index = tabbarStore.list.findIndex(
+              (item) => item.tabId === activedTabId.value
+            );
+            if (index !== -1) {
+              scrollTo(tabRef.value[index].offsetLeft);
+              tabbarScrollTip();
+            }
+          });
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    function tabbarScrollTip() {
+      if (tabContainerRef.value.$el.clientWidth > tabsRef.value.clientWidth && localStorage.getItem("tabbarScrollTip") === void 0) {
+        localStorage.setItem("tabbarScrollTip", "");
+        Message.info(
+          "标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览",
+          {
+            title: "温馨提示",
+            duration: 5e3,
+            closable: true,
+            zIndex: 2e3
+          }
+        );
+      }
+    }
+    function handlerMouserScroll(event) {
+      tabsRef.value.scrollBy({
+        left: event.deltaY || event.detail
+      });
+    }
+    function scrollTo(offsetLeft) {
+      tabsRef.value.scrollTo({
+        left: offsetLeft - 50,
+        behavior: "smooth"
+      });
+    }
+    function onTabbarContextmenu(event, routeItem) {
+      event.preventDefault();
+      ContextMenu.showContextMenu({
+        x: event.x,
+        y: event.y,
+        zIndex: 1050,
+        iconFontClass: "",
+        customClass: "tabbar-contextmenu",
+        items: [
+          {
+            label: "重新加载",
+            icon: "i-ri:refresh-line",
+            disabled: routeItem.tabId !== activedTabId.value,
+            onClick: () => mainPage.reload()
+          },
+          {
+            label: "关闭标签页",
+            icon: "i-ri:close-line",
+            disabled: tabbarStore.list.length <= 1,
+            divided: true,
+            onClick: () => {
+              tabbar.closeById(routeItem.tabId);
+            }
+          },
+          {
+            label: "关闭其他标签页",
+            disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
+            onClick: () => {
+              tabbar.closeOtherSide(routeItem.tabId);
+            }
+          },
+          {
+            label: "关闭左侧标签页",
+            disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
+            onClick: () => {
+              tabbar.closeLeftSide(routeItem.tabId);
+            }
+          },
+          {
+            label: "关闭右侧标签页",
+            disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
+            onClick: () => {
+              tabbar.closeRightSide(routeItem.tabId);
+            }
+          }
+        ]
+      });
+    }
+    onMounted(() => {
+      hotkeys(
+        "alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0",
+        (e, handle) => {
+          var _a, _b;
+          if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys) {
+            e.preventDefault();
+            switch (handle.key) {
+              case "alt+left":
+                if (tabbarStore.list[0].tabId !== activedTabId.value) {
+                  const index = tabbarStore.list.findIndex(
+                    (item) => item.tabId === activedTabId.value
+                  );
+                  router.push(tabbarStore.list[index - 1].fullPath);
+                }
+                break;
+              case "alt+right":
+                if (((_a = tabbarStore.list.at(-1)) == null ? void 0 : _a.tabId) !== activedTabId.value) {
+                  const index = tabbarStore.list.findIndex(
+                    (item) => item.tabId === activedTabId.value
+                  );
+                  router.push(tabbarStore.list[index + 1].fullPath);
+                }
+                break;
+              case "alt+w":
+                tabbar.closeById(activedTabId.value);
+                break;
+              case "alt+1":
+              case "alt+2":
+              case "alt+3":
+              case "alt+4":
+              case "alt+5":
+              case "alt+6":
+              case "alt+7":
+              case "alt+8":
+              case "alt+9": {
+                const number = Number(handle.key.split("+")[1]);
+                ((_b = tabbarStore.list[number - 1]) == null ? void 0 : _b.fullPath) && router.push(tabbarStore.list[number - 1].fullPath);
+                break;
+              }
+              case "alt+0":
+                router.push(tabbarStore.list[tabbarStore.list.length - 1].fullPath);
+                break;
+            }
+          }
+        }
+      );
+    });
+    onUnmounted(() => {
+      hotkeys.unbind(
+        "alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0"
+      );
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref_key: "tabsRef",
+          ref: tabsRef,
+          class: "tabs",
+          onWheel: withModifiers(handlerMouserScroll, ["prevent"])
+        }, [
+          createVNode(TransitionGroup, {
+            ref_key: "tabContainerRef",
+            ref: tabContainerRef,
+            name: "tabbar",
+            tag: "div",
+            class: "tab-container"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tabbarStore).list, (element, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: element.tabId,
+                  ref_for: true,
+                  ref_key: "tabRef",
+                  ref: tabRef,
+                  "data-index": index,
+                  class: normalizeClass(["tab", {
+                    actived: element.tabId === unref(activedTabId)
+                  }]),
+                  title: typeof (element == null ? void 0 : element.title) === "function" ? element.title() : element.title,
+                  onClick: ($event) => unref(router).push(element.fullPath),
+                  onContextmenu: ($event) => onTabbarContextmenu($event, element)
+                }, [
+                  _hoisted_3,
+                  _hoisted_4,
+                  createElementVNode("div", _hoisted_5, [
+                    (openBlock(), createElementBlock("div", {
+                      key: element.tabId,
+                      class: "title"
+                    }, [
+                      unref(settingsStore).settings.tabbar.enableIcon && element.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                        key: 0,
+                        name: element.icon,
+                        class: "icon"
+                      }, null, 8, ["name"])) : createCommentVNode("", true),
+                      createTextVNode(" " + toDisplayString(typeof (element == null ? void 0 : element.title) === "function" ? element.title() : element.title), 1)
+                    ])),
+                    unref(tabbarStore).list.length > 1 ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "action-icon",
+                      onClick: withModifiers(($event) => unref(tabbar).closeById(element.tabId), ["stop"])
+                    }, [
+                      createVNode(_sfc_main$1, { name: "i-ri:close-fill" })
+                    ], 8, _hoisted_6)) : createCommentVNode("", true),
+                    withDirectives(createElementVNode("div", { class: "hotkey-number" }, toDisplayString(index + 1), 513), [
+                      [vShow, unref(keys).alt && index < 9]
+                    ])
+                  ])
+                ], 42, _hoisted_2);
+              }), 128))
+            ]),
+            _: 1
+          }, 512)
+        ], 544)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/layouts/new/components/Topbar/Tabbar/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":["../../../../../../../src/layouts/new/components/Topbar/Tabbar/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport ContextMenu from \"@imengyu/vue3-context-menu\";\r\nimport \"@imengyu/vue3-context-menu/lib/vue3-context-menu.css\";\r\nimport hotkeys from \"hotkeys-js\";\r\nimport Message from \"vue-m-message\";\r\nimport { useMagicKeys } from \"@vueuse/core\";\r\nimport useSettingsStore from \"../../../../../store/modules/settings\";\r\nimport useTabbarStore from \"../../../../../store/modules/tabbar\";\r\nimport type { Tabbar } from \"../../../../../typings/global\";\r\nimport SvgIcon from \"../../../common/components/SvgIcon/index.vue\";\r\n\r\ndefineOptions({\r\n  name: \"Tabbar\",\r\n});\r\n\r\nconst route = useRoute();\r\nconst router = useRouter();\r\n\r\nconst settingsStore = useSettingsStore();\r\nconst tabbarStore = useTabbarStore();\r\n\r\nconst tabbar = useTabbar();\r\nconst mainPage = useMainPage();\r\n\r\nconst keys = useMagicKeys({ reactive: true });\r\n\r\nconst activedTabId = computed(() => tabbar.getId());\r\n\r\nconst tabsRef = ref();\r\nconst tabContainerRef = ref();\r\nconst tabRef = shallowRef<HTMLElement[]>([]);\r\nonBeforeUpdate(() => {\r\n  tabRef.value = [];\r\n});\r\n\r\nwatch(\r\n  () => route,\r\n  (val) => {\r\n    if (settingsStore.settings.tabbar.enable) {\r\n      tabbarStore.add(val).then(() => {\r\n        const index = tabbarStore.list.findIndex(\r\n          (item) => item.tabId === activedTabId.value\r\n        );\r\n        if (index !== -1) {\r\n          scrollTo(tabRef.value[index].offsetLeft);\r\n          tabbarScrollTip();\r\n        }\r\n      });\r\n    }\r\n  },\r\n  {\r\n    immediate: true,\r\n    deep: true,\r\n  }\r\n);\r\nfunction tabbarScrollTip() {\r\n  if (\r\n    tabContainerRef.value.$el.clientWidth > tabsRef.value.clientWidth &&\r\n    localStorage.getItem(\"tabbarScrollTip\") === undefined\r\n  ) {\r\n    localStorage.setItem(\"tabbarScrollTip\", \"\");\r\n    Message.info(\r\n      \"标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览\",\r\n      {\r\n        title: \"温馨提示\",\r\n        duration: 5000,\r\n        closable: true,\r\n        zIndex: 2000,\r\n      }\r\n    );\r\n  }\r\n}\r\nfunction handlerMouserScroll(event: WheelEvent) {\r\n  tabsRef.value.scrollBy({\r\n    left: event.deltaY || event.detail,\r\n  });\r\n}\r\nfunction scrollTo(offsetLeft: number) {\r\n  tabsRef.value.scrollTo({\r\n    left: offsetLeft - 50,\r\n    behavior: \"smooth\",\r\n  });\r\n}\r\nfunction onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {\r\n  event.preventDefault();\r\n  ContextMenu.showContextMenu({\r\n    x: event.x,\r\n    y: event.y,\r\n    zIndex: 1050,\r\n    iconFontClass: \"\",\r\n    customClass: \"tabbar-contextmenu\",\r\n    items: [\r\n      {\r\n        label: \"重新加载\",\r\n        icon: \"i-ri:refresh-line\",\r\n        disabled: routeItem.tabId !== activedTabId.value,\r\n        onClick: () => mainPage.reload(),\r\n      },\r\n      {\r\n        label: \"关闭标签页\",\r\n        icon: \"i-ri:close-line\",\r\n        disabled: tabbarStore.list.length <= 1,\r\n        divided: true,\r\n        onClick: () => {\r\n          tabbar.closeById(routeItem.tabId);\r\n        },\r\n      },\r\n      {\r\n        label: \"关闭其他标签页\",\r\n        disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),\r\n        onClick: () => {\r\n          tabbar.closeOtherSide(routeItem.tabId);\r\n        },\r\n      },\r\n      {\r\n        label: \"关闭左侧标签页\",\r\n        disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),\r\n        onClick: () => {\r\n          tabbar.closeLeftSide(routeItem.tabId);\r\n        },\r\n      },\r\n      {\r\n        label: \"关闭右侧标签页\",\r\n        disabled: !tabbar.checkCloseRightSide(routeItem.tabId),\r\n        onClick: () => {\r\n          tabbar.closeRightSide(routeItem.tabId);\r\n        },\r\n      },\r\n    ],\r\n  });\r\n}\r\n\r\nonMounted(() => {\r\n  hotkeys(\r\n    \"alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0\",\r\n    (e, handle) => {\r\n      if (\r\n        settingsStore.settings.tabbar.enable &&\r\n        settingsStore.settings.tabbar.enableHotkeys\r\n      ) {\r\n        e.preventDefault();\r\n        switch (handle.key) {\r\n          // 切换到当前标签页紧邻的上一个标签页\r\n          case \"alt+left\":\r\n            if (tabbarStore.list[0].tabId !== activedTabId.value) {\r\n              const index = tabbarStore.list.findIndex(\r\n                (item) => item.tabId === activedTabId.value\r\n              );\r\n              router.push(tabbarStore.list[index - 1].fullPath);\r\n            }\r\n            break;\r\n          // 切换到当前标签页紧邻的下一个标签页\r\n          case \"alt+right\":\r\n            if (tabbarStore.list.at(-1)?.tabId !== activedTabId.value) {\r\n              const index = tabbarStore.list.findIndex(\r\n                (item) => item.tabId === activedTabId.value\r\n              );\r\n              router.push(tabbarStore.list[index + 1].fullPath);\r\n            }\r\n            break;\r\n          // 关闭当前标签页\r\n          case \"alt+w\":\r\n            tabbar.closeById(activedTabId.value);\r\n            break;\r\n          // 切换到第 n 个标签页\r\n          case \"alt+1\":\r\n          case \"alt+2\":\r\n          case \"alt+3\":\r\n          case \"alt+4\":\r\n          case \"alt+5\":\r\n          case \"alt+6\":\r\n          case \"alt+7\":\r\n          case \"alt+8\":\r\n          case \"alt+9\": {\r\n            const number = Number(handle.key.split(\"+\")[1]);\r\n            tabbarStore.list[number - 1]?.fullPath &&\r\n              router.push(tabbarStore.list[number - 1].fullPath);\r\n            break;\r\n          }\r\n          // 切换到最后一个标签页\r\n          case \"alt+0\":\r\n            router.push(tabbarStore.list[tabbarStore.list.length - 1].fullPath);\r\n            break;\r\n        }\r\n      }\r\n    }\r\n  );\r\n});\r\nonUnmounted(() => {\r\n  hotkeys.unbind(\r\n    \"alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0\"\r\n  );\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div class=\"tabbar-container\">\r\n    <div ref=\"tabsRef\" class=\"tabs\" @wheel.prevent=\"handlerMouserScroll\">\r\n      <TransitionGroup\r\n        ref=\"tabContainerRef\"\r\n        name=\"tabbar\"\r\n        tag=\"div\"\r\n        class=\"tab-container\"\r\n      >\r\n        <div\r\n          v-for=\"(element, index) in tabbarStore.list\"\r\n          :key=\"element.tabId\"\r\n          ref=\"tabRef\"\r\n          :data-index=\"index\"\r\n          class=\"tab\"\r\n          :class=\"{\r\n            actived: element.tabId === activedTabId,\r\n          }\"\r\n          :title=\"\r\n            typeof element?.title === 'function'\r\n              ? element.title()\r\n              : element.title\r\n          \"\r\n          @click=\"router.push(element.fullPath)\"\r\n          @contextmenu=\"onTabbarContextmenu($event, element)\"\r\n        >\r\n          <div class=\"tab-dividers\" />\r\n          <div class=\"tab-background\" />\r\n          <div class=\"tab-content\">\r\n            <div :key=\"element.tabId\" class=\"title\">\r\n              <SvgIcon\r\n                v-if=\"settingsStore.settings.tabbar.enableIcon && element.icon\"\r\n                :name=\"element.icon\"\r\n                class=\"icon\"\r\n              />\r\n              {{\r\n                typeof element?.title === \"function\"\r\n                  ? element.title()\r\n                  : element.title\r\n              }}\r\n            </div>\r\n            <div\r\n              v-if=\"tabbarStore.list.length > 1\"\r\n              class=\"action-icon\"\r\n              @click.stop=\"tabbar.closeById(element.tabId)\"\r\n            >\r\n              <SvgIcon name=\"i-ri:close-fill\" />\r\n            </div>\r\n            <div v-show=\"keys.alt && index < 9\" class=\"hotkey-number\">\r\n              {{ index + 1 }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </TransitionGroup>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\">\r\n.tabbar-contextmenu {\r\n  z-index: 1000;\r\n\r\n  .mx-context-menu {\r\n    --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;\r\n\r\n    background-color: var(--g-container-bg);\r\n\r\n    .mx-context-menu-items .mx-context-menu-item {\r\n      --at-apply: transition-background-color;\r\n\r\n      &:not(.disabled):hover {\r\n        --at-apply: cursor-pointer bg-stone-1 dark-bg-stone-9;\r\n      }\r\n\r\n      span {\r\n        color: initial;\r\n      }\r\n\r\n      .icon {\r\n        color: initial;\r\n      }\r\n\r\n      &.disabled span,\r\n      &.disabled .icon {\r\n        opacity: 0.25;\r\n      }\r\n    }\r\n\r\n    .mx-context-menu-item-sperator {\r\n      background-color: var(--g-container-bg);\r\n\r\n      &::after {\r\n        --at-apply: bg-stone-2 dark-bg-stone-7;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n.tabbar-container {\r\n  position: relative;\r\n  height: var(--g-tabbar-height);\r\n  background-color: var(--g-bg);\r\n  transition: background-color 0.3s;\r\n\r\n  .tabs {\r\n    position: absolute;\r\n    right: 0;\r\n    left: 0;\r\n    overflow-y: hidden;\r\n    white-space: nowrap;\r\n\r\n    // firefox隐藏滚动条\r\n    scrollbar-width: none;\r\n\r\n    // chrome隐藏滚动条\r\n    &::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    .tab-container {\r\n      display: inline-block;\r\n\r\n      .tab {\r\n        position: relative;\r\n        display: inline-block;\r\n        width: 150px;\r\n        height: var(--g-tabbar-height);\r\n        font-size: 14px;\r\n        line-height: calc(var(--g-tabbar-height) - 2px);\r\n        vertical-align: bottom;\r\n        pointer-events: none;\r\n        cursor: pointer;\r\n\r\n        &:not(.actived):hover {\r\n          z-index: 3;\r\n\r\n          &::before,\r\n          &::after {\r\n            content: none;\r\n          }\r\n\r\n          & + .tab .tab-dividers::before {\r\n            opacity: 0;\r\n          }\r\n\r\n          .tab-content {\r\n            .title,\r\n            .action-icon {\r\n              color: var(--g-tabbar-tab-hover-color);\r\n            }\r\n          }\r\n\r\n          .tab-background {\r\n            background-color: var(--g-tabbar-tab-hover-bg);\r\n          }\r\n        }\r\n\r\n        * {\r\n          user-select: none;\r\n        }\r\n\r\n        &.actived {\r\n          z-index: 5;\r\n\r\n          &::before,\r\n          &::after {\r\n            content: none;\r\n          }\r\n\r\n          & + .tab .tab-dividers::before {\r\n            opacity: 0;\r\n          }\r\n\r\n          .tab-content {\r\n            .title,\r\n            .action-icon {\r\n              color: var(--g-tabbar-tab-active-color);\r\n            }\r\n          }\r\n\r\n          .tab-background {\r\n            background-color: var(--g-container-bg);\r\n          }\r\n        }\r\n\r\n        .tab-dividers {\r\n          position: absolute;\r\n          top: 50%;\r\n          right: -1px;\r\n          left: -1px;\r\n          z-index: 0;\r\n          height: 14px;\r\n          transform: translateY(-50%);\r\n\r\n          &::before {\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 1px;\r\n            display: block;\r\n            width: 1px;\r\n            content: \"\";\r\n            background-color: var(--g-tabbar-dividers-bg);\r\n            opacity: 1;\r\n            transition: opacity 0.2s ease, background-color 0.3s;\r\n          }\r\n        }\r\n\r\n        &:first-child .tab-dividers::before {\r\n          opacity: 0;\r\n        }\r\n\r\n        .tab-background {\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          z-index: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          pointer-events: none;\r\n          transition: opacity 0.3s, background-color 0.3s;\r\n        }\r\n\r\n        .tab-content {\r\n          display: flex;\r\n          width: 100%;\r\n          height: 100%;\r\n          pointer-events: all;\r\n\r\n          .title {\r\n            display: flex;\r\n            flex: 1;\r\n            gap: 5px;\r\n            align-items: center;\r\n            height: 100%;\r\n            padding: 0 10px;\r\n            margin-right: 10px;\r\n            overflow: hidden;\r\n            color: var(--g-tabbar-tab-color);\r\n            white-space: nowrap;\r\n            mask-image: linear-gradient(\r\n              to right,\r\n              #000 calc(100% - 20px),\r\n              transparent\r\n            );\r\n            transition: margin-right 0.3s;\r\n\r\n            &:has(+ .action-icon) {\r\n              margin-right: 28px;\r\n            }\r\n\r\n            .icon {\r\n              flex-shrink: 0;\r\n            }\r\n          }\r\n\r\n          .action-icon {\r\n            position: absolute;\r\n            top: 50%;\r\n            right: 0.5em;\r\n            z-index: 10;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 1.5em;\r\n            height: 1.5em;\r\n            font-size: 12px;\r\n            color: var(--g-tabbar-tab-color);\r\n            border-radius: 50%;\r\n            transform: translateY(-50%);\r\n\r\n            &:hover {\r\n              --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;\r\n\r\n              background-color: var(--g-bg);\r\n            }\r\n          }\r\n\r\n          .hotkey-number {\r\n            --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;\r\n\r\n            position: absolute;\r\n            top: 50%;\r\n            right: 0.5em;\r\n            z-index: 10;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 1.5em;\r\n            height: 1.5em;\r\n            font-size: 12px;\r\n            color: var(--g-tabbar-tab-color);\r\n            background-color: var(--g-bg);\r\n            border-radius: 50%;\r\n            transform: translateY(-50%);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// 标签栏动画\r\n.tabs {\r\n  .tabbar-move,\r\n  .tabbar-enter-active,\r\n  .tabbar-leave-active {\r\n    transition: all 0.3s;\r\n  }\r\n\r\n  .tabbar-enter-from,\r\n  .tabbar-leave-to {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n  }\r\n\r\n  .tabbar-leave-active {\r\n    position: absolute !important;\r\n  }\r\n}\r\n</style>\r\n"],"names":[],"mappings":"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"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/Breadcrumb/index.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./index.vue2.js";
+/* empty css           */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ef9bb0f"]]);
+export {
+  Breadcrumb as default
+};
+//# sourceMappingURL=index.vue.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/Breadcrumb/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/Breadcrumb/index.vue2.js

@@ -0,0 +1,67 @@
+import { defineComponent, computed, unref, openBlock, createBlock, withCtx, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { compile } from "path-to-regexp";
+import Breadcrumb from "../../../Breadcrumb/index.vue.js";
+import _sfc_main$1 from "../../../Breadcrumb/item.vue.js";
+import useSettingsStore from "../../../../../../store/modules/settings.js";
+import { useRoute } from "vue-router";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const route = useRoute();
+    const settingsStore = useSettingsStore();
+    const breadcrumbList = computed(() => {
+      const breadcrumbList2 = [];
+      if (settingsStore.settings.home.enable) {
+        breadcrumbList2.push({
+          path: settingsStore.settings.home.fullPath,
+          title: settingsStore.settings.home.title
+        });
+      }
+      if (route.meta.breadcrumbNeste) {
+        route.meta.breadcrumbNeste.forEach((item) => {
+          if (item.hide === false) {
+            breadcrumbList2.push({
+              path: item.path,
+              title: item.title
+            });
+          }
+        });
+      }
+      return breadcrumbList2;
+    });
+    function pathCompile(path) {
+      const toPath = compile(path);
+      return toPath(route.params);
+    }
+    return (_ctx, _cache) => {
+      return unref(settingsStore).mode === "pc" && unref(settingsStore).settings.app.routeBaseOn !== "filesystem" ? (openBlock(), createBlock(Breadcrumb, {
+        key: 0,
+        class: "breadcrumb whitespace-nowrap px-2"
+      }, {
+        default: withCtx(() => [
+          createVNode(TransitionGroup, { name: "breadcrumb" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(breadcrumbList), (item, index) => {
+                return openBlock(), createBlock(_sfc_main$1, {
+                  key: `${index}_${item.path}_${item.title}`,
+                  to: index < unref(breadcrumbList).length - 1 && item.path !== "" ? pathCompile(item.path) : ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.title), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["to"]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/Breadcrumb/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":["../../../../../../../../src/layouts/new/components/Topbar/Toolbar/Breadcrumb/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { compile } from 'path-to-regexp'\r\nimport Breadcrumb from '../../../Breadcrumb/index.vue'\r\nimport BreadcrumbItem from '../../../Breadcrumb/item.vue'\r\nimport useSettingsStore from '../../../../../../store/modules/settings'\r\n\r\nconst route = useRoute()\r\n\r\nconst settingsStore = useSettingsStore()\r\n\r\nconst breadcrumbList = computed(() => {\r\n  const breadcrumbList = []\r\n  if (settingsStore.settings.home.enable) {\r\n    breadcrumbList.push({\r\n      path: settingsStore.settings.home.fullPath,\r\n      title: settingsStore.settings.home.title,\r\n    })\r\n  }\r\n  if (route.meta.breadcrumbNeste) {\r\n    route.meta.breadcrumbNeste.forEach((item) => {\r\n      if (item.hide === false) {\r\n        breadcrumbList.push({\r\n          path: item.path,\r\n          title: item.title,\r\n        })\r\n      }\r\n    })\r\n  }\r\n  return breadcrumbList\r\n})\r\n\r\nfunction pathCompile(path: string) {\r\n  const toPath = compile(path)\r\n  return toPath(route.params)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <Breadcrumb v-if=\"settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'\" class=\"breadcrumb whitespace-nowrap px-2\">\r\n    <TransitionGroup name=\"breadcrumb\">\r\n      <BreadcrumbItem v-for=\"(item, index) in breadcrumbList\" :key=\"`${index}_${item.path}_${item.title}`\" :to=\"index < breadcrumbList.length - 1 && item.path !== '' ? pathCompile(item.path) : ''\">\r\n        {{ item.title }}\r\n      </BreadcrumbItem>\r\n    </TransitionGroup>\r\n  </Breadcrumb>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n// 面包屑动画\r\n.breadcrumb-enter-active {\r\n  transition: transform 0.3s, opacity 0.3s;\r\n}\r\n\r\n.breadcrumb-enter-from {\r\n  opacity: 0;\r\n  transform: translateX(30px) skewX(-50deg);\r\n}\r\n</style>\r\n"],"names":["breadcrumbList"],"mappings":";;;;;;;;;AAMA,UAAM,QAAQ;AAEd,UAAM,gBAAgB;AAEhB,UAAA,iBAAiB,SAAS,MAAM;AACpC,YAAMA,kBAAiB,CAAA;AACnB,UAAA,cAAc,SAAS,KAAK,QAAQ;AACtCA,wBAAe,KAAK;AAAA,UAClB,MAAM,cAAc,SAAS,KAAK;AAAA,UAClC,OAAO,cAAc,SAAS,KAAK;AAAA,QAAA,CACpC;AAAA,MACH;AACI,UAAA,MAAM,KAAK,iBAAiB;AAC9B,cAAM,KAAK,gBAAgB,QAAQ,CAAC,SAAS;AACvC,cAAA,KAAK,SAAS,OAAO;AACvBA,4BAAe,KAAK;AAAA,cAClB,MAAM,KAAK;AAAA,cACX,OAAO,KAAK;AAAA,YAAA,CACb;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AACOA,aAAAA;AAAAA,IAAA,CACR;AAED,aAAS,YAAY,MAAc;AAC3B,YAAA,SAAS,QAAQ,IAAI;AACpB,aAAA,OAAO,MAAM,MAAM;AAAA,IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/ColorScheme/index.vue.js

@@ -0,0 +1,74 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, unref } from "vue";
+import useSettingsStore from "../../../../../../store/modules/settings.js";
+import _sfc_main$1 from "../../../../common/components/SvgIcon/index.vue.js";
+import useViewTransition from "../../../../../../utils/composables/useViewTransition.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ColorScheme"
+  },
+  __name: "index",
+  setup(__props) {
+    const settingsStore = useSettingsStore();
+    function toggleColorScheme(event) {
+      var _a;
+      const { startViewTransition } = useViewTransition(() => {
+        settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === "dark" ? "light" : "dark");
+      });
+      (_a = startViewTransition()) == null ? void 0 : _a.ready.then(() => {
+        const x = event.clientX;
+        const y = event.clientY;
+        const endRadius = Math.hypot(
+          Math.max(x, innerWidth - x),
+          Math.max(y, innerHeight - y)
+        );
+        const clipPath = [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`
+        ];
+        document.documentElement.animate(
+          {
+            clipPath: settingsStore.settings.app.colorScheme !== "dark" ? clipPath : clipPath.reverse()
+          },
+          {
+            duration: 300,
+            easing: "ease-out",
+            pseudoElement: settingsStore.settings.app.colorScheme !== "dark" ? "::view-transition-new(root)" : "::view-transition-old(root)"
+          }
+        );
+      });
+    }
+    return (_ctx, _cache) => {
+      const _component_HTabList = resolveComponent("HTabList");
+      const _component_HDropdown = resolveComponent("HDropdown");
+      return openBlock(), createBlock(_component_HDropdown, { class: "flex-center cursor-pointer px-2 py-1" }, {
+        dropdown: withCtx(() => [
+          createVNode(_component_HTabList, {
+            modelValue: unref(settingsStore).settings.app.colorScheme,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settingsStore).settings.app.colorScheme = $event),
+            options: [
+              { icon: "i-ri:sun-line", label: "", value: "light" },
+              { icon: "i-ri:moon-line", label: "", value: "dark" },
+              { icon: "i-codicon:color-mode", label: "", value: "" }
+            ],
+            class: "m-3"
+          }, null, 8, ["modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_sfc_main$1, {
+            name: {
+              "": "i-codicon:color-mode",
+              "light": "i-ri:sun-line",
+              "dark": "i-ri:moon-line"
+            }[unref(settingsStore).settings.app.colorScheme],
+            onClick: toggleColorScheme
+          }, null, 8, ["name"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/ColorScheme/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../../src/layouts/new/components/Topbar/Toolbar/ColorScheme/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport useSettingsStore from '../../../../../../store/modules/settings'\r\nimport SvgIcon from '../../../../common/components/SvgIcon/index.vue';\r\n\r\ndefineOptions({\r\n  name: 'ColorScheme',\r\n})\r\n\r\nconst settingsStore = useSettingsStore()\r\n\r\nfunction toggleColorScheme(event: MouseEvent) {\r\n  const {startViewTransition} = useViewTransition(() => {\r\n    settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')\r\n  })\r\n  startViewTransition()?.ready.then(() => {\r\n    const x = event.clientX\r\n    const y = event.clientY\r\n    const endRadius = Math.hypot(\r\n      Math.max(x, innerWidth - x),\r\n      Math.max(y, innerHeight - y),\r\n    )\r\n    const clipPath = [\r\n      `circle(0px at ${x}px ${y}px)`,\r\n      `circle(${endRadius}px at ${x}px ${y}px)`,\r\n    ]\r\n    document.documentElement.animate(\r\n      {\r\n        clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),\r\n      },\r\n      {\r\n        duration: 300,\r\n        easing: 'ease-out',\r\n        pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',\r\n      },\r\n    )\r\n  })\r\n}\r\n</script>\r\n\r\n<template>\r\n  <HDropdown class=\"flex-center cursor-pointer px-2 py-1\">\r\n    <SvgIcon\r\n      :name=\"{\r\n        '': 'i-codicon:color-mode',\r\n        'light': 'i-ri:sun-line',\r\n        'dark': 'i-ri:moon-line',\r\n      }[settingsStore.settings.app.colorScheme]\" @click=\"toggleColorScheme\"\r\n    />\r\n    <template #dropdown>\r\n      <HTabList\r\n        v-model=\"settingsStore.settings.app.colorScheme\"\r\n        :options=\"[\r\n          { icon: 'i-ri:sun-line', label: '', value: 'light' },\r\n          { icon: 'i-ri:moon-line', label: '', value: 'dark' },\r\n          { icon: 'i-codicon:color-mode', label: '', value: '' },\r\n        ]\"\r\n        class=\"m-3\"\r\n      />\r\n    </template>\r\n  </HDropdown>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;AAQA,UAAM,gBAAgB;AAEtB,aAAS,kBAAkB,OAAmB;;AAC5C,YAAM,EAAC,wBAAuB,kBAAkB,MAAM;AACpD,sBAAc,sBAAsB,cAAc,eAAe,cAAc,uBAAuB,SAAS,UAAU,MAAM;AAAA,MAAA,CAChI;AACmB,gCAAA,MAAA,mBAAG,MAAM,KAAK,MAAM;AACtC,cAAM,IAAI,MAAM;AAChB,cAAM,IAAI,MAAM;AAChB,cAAM,YAAY,KAAK;AAAA,UACrB,KAAK,IAAI,GAAG,aAAa,CAAC;AAAA,UAC1B,KAAK,IAAI,GAAG,cAAc,CAAC;AAAA,QAAA;AAE7B,cAAM,WAAW;AAAA,UACf,iBAAiB,CAAC,MAAM,CAAC;AAAA,UACzB,UAAU,SAAS,SAAS,CAAC,MAAM,CAAC;AAAA,QAAA;AAEtC,iBAAS,gBAAgB;AAAA,UACvB;AAAA,YACE,UAAU,cAAc,SAAS,IAAI,gBAAgB,SAAS,WAAW,SAAS,QAAQ;AAAA,UAC5F;AAAA,UACA;AAAA,YACE,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,eAAe,cAAc,SAAS,IAAI,gBAAgB,SAAS,gCAAgC;AAAA,UACrG;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/ColorScheme/index.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/ColorScheme/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/Fullscreen/index.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent, resolveComponent, unref, openBlock, createElementBlock, createVNode, createCommentVNode } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import useSettingsStore from "../../../../../../store/modules/settings.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Fullscreen"
+  },
+  __name: "index",
+  setup(__props) {
+    const settingsStore = useSettingsStore();
+    const { isFullscreen, toggle } = useFullscreen();
+    return (_ctx, _cache) => {
+      const _component_SvgIcon = resolveComponent("SvgIcon");
+      return unref(settingsStore).mode === "pc" ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "flex-center cursor-pointer px-2 py-1",
+        onClick: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(toggle) && unref(toggle)(...args))
+      }, [
+        createVNode(_component_SvgIcon, {
+          name: unref(isFullscreen) ? "i-ri:fullscreen-exit-line" : "i-ri:fullscreen-line"
+        }, null, 8, ["name"])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/Fullscreen/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../../src/layouts/new/components/Topbar/Toolbar/Fullscreen/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useFullscreen } from '@vueuse/core'\r\nimport useSettingsStore from '../../../../../../store/modules/settings'\r\n\r\ndefineOptions({\r\n  name: 'Fullscreen',\r\n})\r\n\r\nconst settingsStore = useSettingsStore()\r\n\r\nconst { isFullscreen, toggle } = useFullscreen()\r\n</script>\r\n\r\n<template>\r\n  <span v-if=\"settingsStore.mode === 'pc'\" class=\"flex-center cursor-pointer px-2 py-1\" @click=\"toggle\">\r\n    <SvgIcon :name=\"isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'\" />\r\n  </span>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;AAQA,UAAM,gBAAgB;AAEtB,UAAM,EAAE,cAAc,OAAO,IAAI,cAAc;;;;;;;;;;;;;;;;"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/Fullscreen/index.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/Fullscreen/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/NavSearch/index.vue.js

@@ -0,0 +1,46 @@
+import { defineComponent, openBlock, createElementBlock, unref, createBlock, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode } from "vue";
+import eventBus from "../../../../../../utils/eventBus.js";
+import useSettingsStore from "../../../../../../store/modules/settings.js";
+import HKbd from "../../../../ui-kit/HKbd.vue.js";
+import _sfc_main$1 from "../../../../common/components/SvgIcon/index.vue.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark-bg-stone-9 dark-text-white hover-ring-1 dark-ring-stone-7"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "text-sm text-stone-5 transition group-hover-text-dark dark-group-hover-text-white" }, " 搜索 ", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ToolbarRightSide"
+  },
+  __name: "index",
+  setup(__props) {
+    const settingsStore = useSettingsStore();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: "flex-center cursor-pointer px-2 py-1",
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(eventBus).emit("global-search-toggle"))
+      }, [
+        unref(settingsStore).mode === "mobile" ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          name: "i-ri:search-line"
+        })) : (openBlock(), createElementBlock("span", _hoisted_1, [
+          createVNode(_sfc_main$1, { name: "i-ri:search-line" }),
+          _hoisted_2,
+          unref(settingsStore).settings.navSearch.enableHotkeys ? (openBlock(), createBlock(HKbd, {
+            key: 0,
+            class: "ml-2"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(settingsStore).os === "mac" ? "⌥" : "Alt") + " S ", 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/NavSearch/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../../src/layouts/new/components/Topbar/Toolbar/NavSearch/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport eventBus from \"../../../../../../utils/eventBus\";\r\nimport useSettingsStore from \"../../../../../../store/modules/settings\";\r\nimport HKbd from \"../../../../ui-kit/HKbd.vue\";\r\nimport SvgIcon from \"../../../../common/components/SvgIcon/index.vue\";\r\n\r\ndefineOptions({\r\n  name: \"ToolbarRightSide\",\r\n});\r\n\r\nconst settingsStore = useSettingsStore();\r\n</script>\r\n\r\n<template>\r\n  <span\r\n    class=\"flex-center cursor-pointer px-2 py-1\"\r\n    @click=\"eventBus.emit('global-search-toggle')\"\r\n  >\r\n    <SvgIcon v-if=\"settingsStore.mode === 'mobile'\" name=\"i-ri:search-line\"/>\r\n    <span\r\n      v-else\r\n      class=\"group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark-bg-stone-9 dark-text-white hover-ring-1 dark-ring-stone-7\"\r\n    >\r\n      <SvgIcon name=\"i-ri:search-line\"/>\r\n      <span\r\n        class=\"text-sm text-stone-5 transition group-hover-text-dark dark-group-hover-text-white\"\r\n      >\r\n        搜索\r\n      </span>\r\n      <HKbd v-if=\"settingsStore.settings.navSearch.enableHotkeys\" class=\"ml-2\"\r\n      >\r\n        {{ settingsStore.os === \"mac\" ? \"⌥\" : \"Alt\" }} S\r\n      </HKbd>\r\n    </span>\r\n  </span>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUA,UAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/layouts/new/components/Topbar/Toolbar/NavSearch/index.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/layouts/new/components/Topbar/Toolbar/NavSearch/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}