@ditari/bsui 5.0.6 → 5.0.8

package/dist/esm/components/layout/components/index.mjs

@@ -0,0 +1,22 @@
+import Menu from './menu/Menu.mjs';
+import './layout/HeaderLayout.vue.mjs';
+import './layout/ThemeApp.vue.mjs';
+import _sfc_main from './layout/HeaderLayout.vue2.mjs';
+import _sfc_main$1 from './layout/ThemeApp.vue2.mjs';
+
+"use strict";
+Menu.install = function(app) {
+  app.component(Menu.name, Menu);
+  return app;
+};
+_sfc_main.install = function(app) {
+  app.component("DHeaderLayout", _sfc_main);
+  return app;
+};
+_sfc_main$1.install = function(app) {
+  app.component("DAppTheme", _sfc_main$1);
+  return app;
+};
+
+export { _sfc_main$1 as AppTheme, _sfc_main as HeaderLayout, Menu };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/layout/components/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/components/layout/components/index.ts"],"sourcesContent":["import Menu from \"./menu/Menu\";\r\nimport type { App } from \"vue\";\r\n\r\nimport HeaderLayout from \"./layout/HeaderLayout.vue\";\r\nimport AppTheme from \"./layout/ThemeApp.vue\";\r\n\r\nMenu.install = function (app: App) {\r\n  app.component(Menu.name!, Menu);\r\n  return app;\r\n};\r\n\r\nHeaderLayout.install = function (app: App) {\r\n  app.component(\"DHeaderLayout\", HeaderLayout);\r\n  return app;\r\n};\r\n\r\nAppTheme.install = function (app: App) {\r\n  app.component(\"DAppTheme\", AppTheme);\r\n  return app;\r\n};\r\n\r\nexport { AppTheme,HeaderLayout, Menu };\r\n"],"names":["HeaderLayout","AppTheme"],"mappings":";;;;;;;AAMA,IAAK,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACjC,EAAI,GAAA,CAAA,SAAA,CAAU,IAAK,CAAA,IAAA,EAAO,IAAI,CAAA;AAC9B,EAAO,OAAA,GAAA;AACT,CAAA;AAEAA,SAAa,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACzC,EAAI,GAAA,CAAA,SAAA,CAAU,iBAAiBA,SAAY,CAAA;AAC3C,EAAO,OAAA,GAAA;AACT,CAAA;AAEAC,WAAS,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACrC,EAAI,GAAA,CAAA,SAAA,CAAU,aAAaA,WAAQ,CAAA;AACnC,EAAO,OAAA,GAAA;AACT,CAAA;;;;"}

package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs

@@ -11,7 +11,7 @@ import _sfc_main$1 from '../../../tab/Tab.vue2.mjs';
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HeaderLayout",
   setup(__props) {
-    const { layout } = storeToRefs(useAppStore());
+    const { layout, modeConfig, headerTokenStyle } = storeToRefs(useAppStore());
     const { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();
     function useStyle() {
       const { useToken } = theme;
@@ -24,7 +24,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       position: fixed;
       top: 0;
       right: 0;
-      background-color: ${token.value.colorBgContainer};
+      z-index: 1;
+      background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.bgColor};
       left: ${left.value};
       height: ${layout.value.headerHeight}px;
       transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
@@ -47,6 +48,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      color: ${modeConfig.value.mode === "light" ? headerTokenStyle.value.txtColor : "inherit"};
     `
       );
       const rightStyle2 = computed(

package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderLayout.vue2.mjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { MenuFoldOutlined, MenuUnfoldOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst { layout } = storeToRefs(useAppStore());\r\nconst { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();\r\n\r\nfunction useStyle(): {\r\n  headerStyle: ComputedRef<string>;\r\n  headerTabStyle: ComputedRef<string>;\r\n  collapsedStyle: ComputedRef<string>;\r\n  rightStyle: ComputedRef<string>;\r\n} {\r\n  const { useToken } = theme;\r\n  const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n  const left = computed(\r\n    () =>\r\n      `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n  );\r\n\r\n  const headerStyle = computed(\r\n    () => css`\r\n      position: fixed;\r\n      top: 0;\r\n      right: 0;\r\n      background-color: ${token.value.colorBgContainer};\r\n      left: ${left.value};\r\n      height: ${layout.value.headerHeight}px;\r\n      transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n      display: flex;\r\n      align-items: flex-end;\r\n    `\r\n  );\r\n\r\n  const headerTabStyle = computed(\r\n    () => css`\r\n      flex: 1;\r\n      overflow: hidden;\r\n      padding-right: 10px;\r\n    `\r\n  );\r\n\r\n  const collapsedStyle = computed(\r\n    () => css`\r\n      padding: 0 10px;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n    `\r\n  );\r\n\r\n  const rightStyle = computed(\r\n    () => css`\r\n      height: 100%;\r\n    `\r\n  );\r\n\r\n  return {\r\n    headerStyle,\r\n    headerTabStyle,\r\n    collapsedStyle,\r\n    rightStyle\r\n  };\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"headerStyle\">\r\n    <div :class=\"collapsedStyle\" @click=\"layout.collapsed = !layout.collapsed\">\r\n      <menu-unfold-outlined v-if=\"layout.collapsed\" class=\"trigger\" />\r\n      <menu-fold-outlined v-else />\r\n    </div>\r\n    <div :class=\"headerTabStyle\">\r\n      <Tab />\r\n    </div>\r\n    <div :class=\"rightStyle\">\r\n      <slot></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["headerStyle","headerTabStyle","collapsedStyle","rightStyle"],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,EAAE,MAAA,EAAW,GAAA,WAAA,CAAY,aAAa,CAAA;AAC5C,IAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAgB,cAAgB,EAAA,UAAA,KAAe,QAAS,EAAA;AAE7E,IAAA,SAAS,QAKP,GAAA;AACA,MAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,MAAM,MAAA,EAAE,KAAM,EAAA,GAAyC,QAAS,EAAA;AAEhE,MAAA,MAAM,IAAO,GAAA,QAAA;AAAA,QACX,MACE,CAAG,EAAA,MAAA,CAAO,KAAM,CAAA,SAAA,GAAY,OAAO,KAAM,CAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMA,YAAc,GAAA,QAAA;AAAA,QAClB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA,wBAIgB,EAAA,KAAA,CAAM,MAAM,gBAAgB,CAAA;AAAA,YAAA,EACxC,KAAK,KAAK,CAAA;AAAA,cACR,EAAA,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAiB,GAAA,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAMC,eAAiB,GAAA,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAQR;AAEA,MAAA,MAAMC,WAAa,GAAA,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAO,OAAA;AAAA,QACL,WAAAH,EAAAA,YAAAA;AAAA,QACA,cAAAC,EAAAA,eAAAA;AAAA,QACA,cAAAC,EAAAA,eAAAA;AAAA,QACA,UAAAC,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"HeaderLayout.vue2.mjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { MenuFoldOutlined, MenuUnfoldOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst { layout, modeConfig, headerTokenStyle } = storeToRefs(useAppStore());\r\nconst { headerStyle, headerTabStyle, collapsedStyle, rightStyle } = useStyle();\r\n\r\nfunction useStyle(): {\r\n  headerStyle: ComputedRef<string>;\r\n  headerTabStyle: ComputedRef<string>;\r\n  collapsedStyle: ComputedRef<string>;\r\n  rightStyle: ComputedRef<string>;\r\n} {\r\n  const { useToken } = theme;\r\n  const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n  const left = computed(\r\n    () =>\r\n      `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n  );\r\n\r\n  const headerStyle = computed(\r\n    () => css`\r\n      position: fixed;\r\n      top: 0;\r\n      right: 0;\r\n      z-index: 1;\r\n      background-color: ${modeConfig.value.mode !== \"light\"\r\n        ? token.value.colorBgContainer\r\n        : headerTokenStyle.value.bgColor};\r\n      left: ${left.value};\r\n      height: ${layout.value.headerHeight}px;\r\n      transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n      display: flex;\r\n      align-items: flex-end;\r\n    `\r\n  );\r\n\r\n  const headerTabStyle = computed(\r\n    () => css`\r\n      flex: 1;\r\n      overflow: hidden;\r\n      padding-right: 10px;\r\n    `\r\n  );\r\n\r\n  const collapsedStyle = computed(\r\n    () => css`\r\n      padding: 0 10px;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n      color: ${modeConfig.value.mode === \"light\"\r\n        ? headerTokenStyle.value.txtColor\r\n        : \"inherit\"};\r\n    `\r\n  );\r\n\r\n  const rightStyle = computed(\r\n    () => css`\r\n      height: 100%;\r\n    `\r\n  );\r\n\r\n  return {\r\n    headerStyle,\r\n    headerTabStyle,\r\n    collapsedStyle,\r\n    rightStyle\r\n  };\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"headerStyle\">\r\n    <div :class=\"collapsedStyle\" @click=\"layout.collapsed = !layout.collapsed\">\r\n      <menu-unfold-outlined v-if=\"layout.collapsed\" class=\"trigger\" />\r\n      <menu-fold-outlined v-else />\r\n    </div>\r\n    <div :class=\"headerTabStyle\">\r\n      <Tab />\r\n    </div>\r\n    <div :class=\"rightStyle\">\r\n      <slot></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["headerStyle","headerTabStyle","collapsedStyle","rightStyle"],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,EAAE,MAAQ,EAAA,UAAA,EAAY,kBAAqB,GAAA,WAAA,CAAY,aAAa,CAAA;AAC1E,IAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAgB,cAAgB,EAAA,UAAA,KAAe,QAAS,EAAA;AAE7E,IAAA,SAAS,QAKP,GAAA;AACA,MAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,MAAM,MAAA,EAAE,KAAM,EAAA,GAAyC,QAAS,EAAA;AAEhE,MAAA,MAAM,IAAO,GAAA,QAAA;AAAA,QACX,MACE,CAAG,EAAA,MAAA,CAAO,KAAM,CAAA,SAAA,GAAY,OAAO,KAAM,CAAA,cAAA,GAAiB,MAAO,CAAA,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMA,YAAc,GAAA,QAAA;AAAA,QAClB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKgB,EAAA,UAAA,CAAW,MAAM,IAAS,KAAA,OAAA,GAC1C,MAAM,KAAM,CAAA,gBAAA,GACZ,gBAAiB,CAAA,KAAA,CAAM,OAAO,CAAA;AAAA,YAAA,EAC1B,KAAK,KAAK,CAAA;AAAA,cACR,EAAA,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAiB,GAAA,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAMC,eAAiB,GAAA,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAOK,WAAW,KAAM,CAAA,IAAA,KAAS,UAC/B,gBAAiB,CAAA,KAAA,CAAM,WACvB,SAAS,CAAA;AAAA,IAAA;AAAA,OAEjB;AAEA,MAAA,MAAMC,WAAa,GAAA,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAO,OAAA;AAAA,QACL,WAAAH,EAAAA,YAAAA;AAAA,QACA,cAAAC,EAAAA,eAAAA;AAAA,QACA,cAAAC,EAAAA,eAAAA;AAAA,QACA,UAAAC,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/components/layout/ThemeApp.vue2.mjs

@@ -10,7 +10,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const { appTheme } = useTheme();
     function useTheme() {
       const { modeConfig } = storeToRefs(useAppStore());
-      const appTheme2 = ref({ algorithm: "" });
+      const appTheme2 = ref({});
       watch(
         () => modeConfig.value.mode,
         (val) => {

package/dist/esm/components/layout/components/layout/ThemeApp.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeApp.vue2.mjs","sources":["../../../../../../src/components/layout/components/layout/ThemeApp.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Ref, ref, watch } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { useAppStore } from \"@ditari/store\";\r\n\r\nconst { appTheme } = useTheme();\r\n\r\nfunction useTheme(): { appTheme: Ref<unknown> } {\r\n  const { modeConfig } = storeToRefs(useAppStore());\r\n  const appTheme = ref<Record<string, unknown>>({ algorithm: \"\" });\r\n\r\n  watch(\r\n    () => modeConfig.value.mode,\r\n    (val: string) => {\r\n      if (val === \"os\") {\r\n        const isDarkMode =\r\n          window.matchMedia &&\r\n          window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n        if (isDarkMode) {\r\n          appTheme.value.algorithm = theme.darkAlgorithm;\r\n        } else {\r\n          appTheme.value.algorithm = theme.defaultAlgorithm;\r\n        }\r\n      } else if (val === \"light\") {\r\n        appTheme.value.algorithm = theme.defaultAlgorithm;\r\n      } else if (val === \"dark\") {\r\n        appTheme.value.algorithm = theme.darkAlgorithm;\r\n      } else {\r\n        appTheme.value.algorithm = theme.defaultAlgorithm;\r\n      }\r\n    },\r\n    { immediate: true }\r\n  );\r\n\r\n  return {\r\n    appTheme\r\n  };\r\n}\r\n</script>\r\n\r\n<template>\r\n  <a-config-provider :theme=\"appTheme\">\r\n    <slot></slot>\r\n  </a-config-provider>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["appTheme"],"mappings":";;;;;;;;;AAOA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,QAAS,EAAA;AAE9B,IAAA,SAAS,QAAuC,GAAA;AAC9C,MAAA,MAAM,EAAE,UAAA,EAAe,GAAA,WAAA,CAAY,aAAa,CAAA;AAChD,MAAA,MAAMA,SAAW,GAAA,GAAA,CAA6B,EAAE,SAAA,EAAW,IAAI,CAAA;AAE/D,MAAA,KAAA;AAAA,QACE,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,QACvB,CAAC,GAAgB,KAAA;AACf,UAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,YAAA,MAAM,aACJ,MAAO,CAAA,UAAA,IACP,MAAO,CAAA,UAAA,CAAW,8BAA8B,CAAE,CAAA,OAAA;AACpD,YAAA,IAAI,UAAY,EAAA;AACd,cAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,aAAA;AAAA,aAC5B,MAAA;AACL,cAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA;AACnC,WACF,MAAA,IAAW,QAAQ,OAAS,EAAA;AAC1B,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA,WACnC,MAAA,IAAW,QAAQ,MAAQ,EAAA;AACzB,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,aAAA;AAAA,WAC5B,MAAA;AACL,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA;AACnC,SACF;AAAA,QACA,EAAE,WAAW,IAAK;AAAA,OACpB;AAEA,MAAO,OAAA;AAAA,QACL,QAAAA,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ThemeApp.vue2.mjs","sources":["../../../../../../src/components/layout/components/layout/ThemeApp.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Ref, ref, watch } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { useAppStore } from \"@ditari/store\";\r\n\r\nconst { appTheme } = useTheme();\r\n\r\nfunction useTheme(): { appTheme: Ref<unknown> } {\r\n  const { modeConfig } = storeToRefs(useAppStore());\r\n  const appTheme = ref<Record<string, unknown>>({});\r\n\r\n  watch(\r\n    () => modeConfig.value.mode,\r\n    (val: string) => {\r\n      if (val === \"os\") {\r\n        const isDarkMode =\r\n          window.matchMedia &&\r\n          window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n        if (isDarkMode) {\r\n          appTheme.value.algorithm = theme.darkAlgorithm;\r\n        } else {\r\n          appTheme.value.algorithm = theme.defaultAlgorithm;\r\n        }\r\n      } else if (val === \"light\") {\r\n        appTheme.value.algorithm = theme.defaultAlgorithm;\r\n      } else if (val === \"dark\") {\r\n        appTheme.value.algorithm = theme.darkAlgorithm;\r\n      } else {\r\n        appTheme.value.algorithm = theme.defaultAlgorithm;\r\n      }\r\n    },\r\n    { immediate: true }\r\n  );\r\n\r\n  return {\r\n    appTheme\r\n  };\r\n}\r\n</script>\r\n\r\n<template>\r\n  <a-config-provider :theme=\"appTheme\">\r\n    <slot></slot>\r\n  </a-config-provider>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["appTheme"],"mappings":";;;;;;;;;AAOA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,QAAS,EAAA;AAE9B,IAAA,SAAS,QAAuC,GAAA;AAC9C,MAAA,MAAM,EAAE,UAAA,EAAe,GAAA,WAAA,CAAY,aAAa,CAAA;AAChD,MAAMA,MAAAA,SAAAA,GAAW,GAA6B,CAAA,EAAE,CAAA;AAEhD,MAAA,KAAA;AAAA,QACE,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,QACvB,CAAC,GAAgB,KAAA;AACf,UAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,YAAA,MAAM,aACJ,MAAO,CAAA,UAAA,IACP,MAAO,CAAA,UAAA,CAAW,8BAA8B,CAAE,CAAA,OAAA;AACpD,YAAA,IAAI,UAAY,EAAA;AACd,cAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,aAAA;AAAA,aAC5B,MAAA;AACL,cAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA;AACnC,WACF,MAAA,IAAW,QAAQ,OAAS,EAAA;AAC1B,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA,WACnC,MAAA,IAAW,QAAQ,MAAQ,EAAA;AACzB,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,aAAA;AAAA,WAC5B,MAAA;AACL,YAAAA,SAAAA,CAAS,KAAM,CAAA,SAAA,GAAY,KAAM,CAAA,gBAAA;AAAA;AACnC,SACF;AAAA,QACA,EAAE,WAAW,IAAK;AAAA,OACpB;AAEA,MAAO,OAAA;AAAA,QACL,QAAAA,EAAAA;AAAA,OACF;AAAA;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/components/menu/Menu.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, computed, watch, createVNode, resolveComponent } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useAppStore, useMenuStore } from '@ditari/store';
+import { useAppStore, useNoStore, useMenuStore } from '@ditari/store';
 import { css } from '@emotion/css';
 
 "use strict";
@@ -25,16 +25,22 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var DMenu = /* @__PURE__ */ defineComponent({
+var Menu = /* @__PURE__ */ defineComponent({
   name: "DMenu",
   setup() {
+    const {
+      layout,
+      modeConfig
+    } = storeToRefs(useAppStore());
+    const {
+      menuList
+    } = storeToRefs(useNoStore());
     const {
       menuWrapperStyle
     } = useStyle();
     const {
       openKeys,
       selectedKeys,
-      data,
       onClick
     } = useMenu();
     function useStyle() {
@@ -48,9 +54,9 @@ var DMenu = /* @__PURE__ */ defineComponent({
             -ms-overflow-style: none; /* 对 IE 和 Edge 生效 */
             scrollbar-width: none; /* 对 Firefox 生效 */
 
+            ${modeConfig.value.mode === "light" ? "background:transparent;" : ""}
             /* Webkit 浏览器 */
-
-            ::-webkit-scrollbar {
+                ::-webkit-scrollbar {
               display: none;
             }
           }
@@ -60,20 +66,17 @@ var DMenu = /* @__PURE__ */ defineComponent({
       };
     }
     function useMenu() {
-      const {
-        layout
-      } = storeToRefs(useAppStore());
       const {
         openKeys: openKeys2,
         selectedKeys: selectedKeys2,
-        data: data2
+        data
       } = storeToRefs(useMenuStore());
       const route = useRoute();
       const router = useRouter();
       watch(() => route.fullPath, (path) => __async(this, null, function* () {
         const flag = selectedKeys2.value.some((item) => item === path);
         if (!flag) {
-          const rs = _findMatchedMenuKey(path, data2.value);
+          const rs = _findMatchedMenuKey(path, data.value);
           if (rs) {
             if (!layout.value.collapsed) {
               if (rs == null ? void 0 : rs.parentKey) {
@@ -88,7 +91,7 @@ var DMenu = /* @__PURE__ */ defineComponent({
       }));
       watch(() => layout.value.collapsed, (val) => {
         const path = selectedKeys2.value[0];
-        const rs = _findMatchedMenuKey(path, data2.value);
+        const rs = _findMatchedMenuKey(path, data.value);
         if (val) {
           openKeys2.value = [];
         } else {
@@ -100,6 +103,7 @@ var DMenu = /* @__PURE__ */ defineComponent({
         }
       });
       const _findMatchedMenuKey = (path, menuItems, parentKey = "") => {
+        var _a;
         for (const item of menuItems) {
           if (item.key === path) {
             return {
@@ -115,7 +119,7 @@ var DMenu = /* @__PURE__ */ defineComponent({
           }
           const match = path.match(/^\/[^/]+/);
           const basePath = match ? match[0] : "";
-          if (item.key.startsWith(basePath)) {
+          if ((_a = item.key) == null ? void 0 : _a.startsWith(basePath)) {
             return {
               matchedKey: item.key,
               parentKey
@@ -141,7 +145,7 @@ var DMenu = /* @__PURE__ */ defineComponent({
       return {
         openKeys: openKeys2,
         selectedKeys: selectedKeys2,
-        data: data2,
+        data,
         onClick: onClick2
       };
     }
@@ -152,7 +156,7 @@ var DMenu = /* @__PURE__ */ defineComponent({
       "onUpdate:open-keys": ($event) => openKeys.value = $event,
       "selected-keys": selectedKeys.value,
       "onUpdate:selected-keys": ($event) => selectedKeys.value = $event,
-      "items": data.value,
+      "items": menuList.value,
       "mode": "inline",
       "triggerSubMenuAction": "hover",
       "onClick": onClick
@@ -160,5 +164,5 @@ var DMenu = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { DMenu as default };
+export { Menu as default };
 //# sourceMappingURL=Menu.mjs.map

package/dist/esm/components/layout/components/menu/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","sources":["../../../../../../src/components/layout/components/menu/Menu.tsx"],"sourcesContent":["import { computed, defineComponent, nextTick, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { useAppStore, useMenuStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport default defineComponent({\r\n  name: \"DMenu\",\r\n  setup() {\r\n    const { menuWrapperStyle } = useStyle();\r\n    const { openKeys, selectedKeys, data, onClick } = useMenu();\r\n\r\n    function useStyle() {\r\n      const menuWrapperStyle = computed(\r\n        () => css`\r\n          flex: 1;\r\n          overflow: hidden;\r\n\r\n          .ant-menu {\r\n            height: 100%;\r\n            overflow: scroll;\r\n            -ms-overflow-style: none; /* 对 IE 和 Edge 生效 */\r\n            scrollbar-width: none; /* 对 Firefox 生效 */\r\n\r\n            /* Webkit 浏览器 */\r\n\r\n            ::-webkit-scrollbar {\r\n              display: none;\r\n            }\r\n          }\r\n        `\r\n      );\r\n      return {\r\n        menuWrapperStyle\r\n      };\r\n    }\r\n\r\n    function useMenu() {\r\n      const { layout } = storeToRefs(useAppStore());\r\n      const { openKeys, selectedKeys, data } = storeToRefs(useMenuStore());\r\n      const route = useRoute();\r\n      const router = useRouter();\r\n\r\n      /**\r\n       * 在标签切换的时候，路由会变化，需要动态关联左侧菜单的选中状态\r\n       */\r\n      watch(\r\n        () => route.fullPath,\r\n        async path => {\r\n          const flag = selectedKeys.value.some((item: string) => item === path);\r\n          if (!flag) {\r\n            const rs = _findMatchedMenuKey(path, data.value as never);\r\n            if (rs) {\r\n              if (!layout.value.collapsed) {\r\n                if (rs?.parentKey) {\r\n                  openKeys.value = [rs.parentKey];\r\n                } else {\r\n                  openKeys.value = [rs!.matchedKey];\r\n                }\r\n              }\r\n              selectedKeys.value = [rs!.matchedKey];\r\n            }\r\n          }\r\n        }\r\n      );\r\n\r\n      watch(\r\n        () => layout.value.collapsed,\r\n        val => {\r\n          const path = selectedKeys.value[0];\r\n          const rs = _findMatchedMenuKey(path, data.value as never);\r\n          if (val) {\r\n            openKeys.value = [];\r\n          } else {\r\n            if (rs?.parentKey) {\r\n              openKeys.value = [rs.parentKey];\r\n            } else {\r\n              openKeys.value = [rs!.matchedKey];\r\n            }\r\n          }\r\n        }\r\n      );\r\n\r\n      // 匹配菜单项的函数（支持嵌套 children）\r\n      const _findMatchedMenuKey = (\r\n        path: string,\r\n        menuItems: { key: string; children: [] }[],\r\n        parentKey: string = \"\"\r\n      ): { matchedKey: string; parentKey: string } | null => {\r\n        // 遍历菜单项\r\n        for (const item of menuItems) {\r\n          // 完全匹配\r\n          if (item.key === path) {\r\n            return { matchedKey: item.key, parentKey };\r\n          }\r\n\r\n          // 如果当前菜单项有 children，递归查找\r\n          if (item.children && item.children.length > 0) {\r\n            const result = _findMatchedMenuKey(path, item.children, item.key);\r\n            if (result) {\r\n              return result;\r\n            }\r\n          }\r\n\r\n          // 匹配以 basePath 开头的菜单项\r\n          const match = path.match(/^\\/[^/]+/); // 匹配以 / 开头，后面不包含 / 的部分\r\n          const basePath = match ? match[0] : \"\"; // 提取基础路径，如 /user\r\n          if (item.key.startsWith(basePath)) {\r\n            return { matchedKey: item.key, parentKey };\r\n          }\r\n        }\r\n\r\n        // 如果没有找到匹配的菜单项，返回 null\r\n        return null;\r\n      };\r\n\r\n      const onClick = ({\r\n        key,\r\n        keyPath\r\n      }: {\r\n        item: string;\r\n        key: string;\r\n        keyPath: string[];\r\n      }) => {\r\n        openKeys.value = keyPath;\r\n        selectedKeys.value = [key];\r\n\r\n        // 判断目标路由和当前路由是否相等;\r\n        // 不相等的时候再跳转\r\n        if (route.path !== key) {\r\n          router.push(key).then(r => {\r\n            if (r) {\r\n              console.warn(r);\r\n            }\r\n          });\r\n        }\r\n      };\r\n\r\n      return {\r\n        openKeys,\r\n        selectedKeys,\r\n        data,\r\n        onClick\r\n      };\r\n    }\r\n\r\n    return () => (\r\n      <div class={menuWrapperStyle.value}>\r\n        <a-menu\r\n          v-model:open-keys={openKeys.value}\r\n          v-model:selected-keys={selectedKeys.value}\r\n          items={data.value}\r\n          mode=\"inline\"\r\n          triggerSubMenuAction={\"hover\"}\r\n          onClick={onClick}\r\n        ></a-menu>\r\n      </div>\r\n    );\r\n  }\r\n});\r\n"],"names":["name","setup","menuWrapperStyle","useStyle","openKeys","selectedKeys","data","onClick","useMenu","computed","css","layout","storeToRefs","useAppStore","useMenuStore","route","useRoute","router","useRouter","watch","fullPath","path","flag","value","some","item","rs","_findMatchedMenuKey","collapsed","parentKey","matchedKey","val","menuItems","key","children","length","result","match","basePath","startsWith","keyPath","push","then","r","console","warn","_createVNode","_resolveComponent","$event"],"mappings":"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"}
+{"version":3,"file":"Menu.mjs","sources":["../../../../../../src/components/layout/components/menu/Menu.tsx"],"sourcesContent":["import { computed, defineComponent, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { useAppStore, useMenuStore, useNoStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport default defineComponent({\r\n  name: \"DMenu\",\r\n  setup() {\r\n    const { layout, modeConfig } = storeToRefs(useAppStore());\r\n    const { menuList } = storeToRefs(useNoStore());\r\n    const { menuWrapperStyle } = useStyle();\r\n    const { openKeys, selectedKeys, onClick } = useMenu();\r\n\r\n    function useStyle() {\r\n      const menuWrapperStyle = computed(\r\n        () => css`\r\n          flex: 1;\r\n          overflow: hidden;\r\n\r\n          .ant-menu {\r\n            height: 100%;\r\n            overflow: scroll;\r\n            -ms-overflow-style: none; /* 对 IE 和 Edge 生效 */\r\n            scrollbar-width: none; /* 对 Firefox 生效 */\r\n\r\n            ${modeConfig.value.mode === \"light\"\r\n              ? \"background:transparent;\"\r\n              : \"\"}\r\n            /* Webkit 浏览器 */\r\n                ::-webkit-scrollbar {\r\n              display: none;\r\n            }\r\n          }\r\n        `\r\n      );\r\n      return {\r\n        menuWrapperStyle\r\n      };\r\n    }\r\n\r\n    function useMenu() {\r\n      const { openKeys, selectedKeys, data } = storeToRefs(useMenuStore());\r\n      const route = useRoute();\r\n      const router = useRouter();\r\n\r\n      /**\r\n       * 在标签切换的时候，路由会变化，需要动态关联左侧菜单的选中状态\r\n       */\r\n      watch(\r\n        () => route.fullPath,\r\n        async path => {\r\n          const flag = selectedKeys.value.some((item: string) => item === path);\r\n          if (!flag) {\r\n            const rs = _findMatchedMenuKey(path, data.value as never);\r\n            if (rs) {\r\n              if (!layout.value.collapsed) {\r\n                if (rs?.parentKey) {\r\n                  openKeys.value = [rs.parentKey];\r\n                } else {\r\n                  openKeys.value = [rs!.matchedKey];\r\n                }\r\n              }\r\n              selectedKeys.value = [rs!.matchedKey];\r\n            }\r\n          }\r\n        }\r\n      );\r\n\r\n      watch(\r\n        () => layout.value.collapsed,\r\n        val => {\r\n          const path = selectedKeys.value[0];\r\n          const rs = _findMatchedMenuKey(path, data.value as never);\r\n          if (val) {\r\n            openKeys.value = [];\r\n          } else {\r\n            if (rs?.parentKey) {\r\n              openKeys.value = [rs.parentKey];\r\n            } else {\r\n              openKeys.value = [rs!.matchedKey];\r\n            }\r\n          }\r\n        }\r\n      );\r\n\r\n      // 匹配菜单项的函数（支持嵌套 children）\r\n      const _findMatchedMenuKey = (\r\n        path: string,\r\n        menuItems: { key: string; children: [] }[],\r\n        parentKey: string = \"\"\r\n      ): { matchedKey: string; parentKey: string } | null => {\r\n        // 遍历菜单项\r\n        for (const item of menuItems) {\r\n          // 完全匹配\r\n          if (item.key === path) {\r\n            return { matchedKey: item.key, parentKey };\r\n          }\r\n\r\n          // 如果当前菜单项有 children，递归查找\r\n          if (item.children && item.children.length > 0) {\r\n            const result = _findMatchedMenuKey(path, item.children, item.key);\r\n            if (result) {\r\n              return result;\r\n            }\r\n          }\r\n\r\n          // 匹配以 basePath 开头的菜单项\r\n          const match = path.match(/^\\/[^/]+/); // 匹配以 / 开头，后面不包含 / 的部分\r\n          const basePath = match ? match[0] : \"\"; // 提取基础路径，如 /user\r\n          if (item.key?.startsWith(basePath)) {\r\n            return { matchedKey: item.key, parentKey };\r\n          }\r\n        }\r\n\r\n        // 如果没有找到匹配的菜单项，返回 null\r\n        return null;\r\n      };\r\n\r\n      const onClick = ({\r\n        key,\r\n        keyPath\r\n      }: {\r\n        item: string;\r\n        key: string;\r\n        keyPath: string[];\r\n      }) => {\r\n        openKeys.value = keyPath;\r\n        selectedKeys.value = [key];\r\n\r\n        // 判断目标路由和当前路由是否相等;\r\n        // 不相等的时候再跳转\r\n        if (route.path !== key) {\r\n          router.push(key).then(r => {\r\n            if (r) {\r\n              console.warn(r);\r\n            }\r\n          });\r\n        }\r\n      };\r\n\r\n      return {\r\n        openKeys,\r\n        selectedKeys,\r\n        data,\r\n        onClick\r\n      };\r\n    }\r\n\r\n    return () => (\r\n      <div class={menuWrapperStyle.value}>\r\n        <a-menu\r\n          v-model:open-keys={openKeys.value}\r\n          v-model:selected-keys={selectedKeys.value}\r\n          items={menuList.value}\r\n          mode=\"inline\"\r\n          triggerSubMenuAction={\"hover\"}\r\n          onClick={onClick}\r\n        ></a-menu>\r\n      </div>\r\n    );\r\n  }\r\n});\r\n"],"names":["name","setup","layout","modeConfig","storeToRefs","useAppStore","menuList","useNoStore","menuWrapperStyle","useStyle","openKeys","selectedKeys","onClick","useMenu","computed","css","value","mode","data","useMenuStore","route","useRoute","router","useRouter","watch","fullPath","path","flag","some","item","rs","_findMatchedMenuKey","collapsed","parentKey","matchedKey","val","menuItems","key","children","length","result","match","basePath","startsWith","keyPath","push","then","r","console","warn","_createVNode","_resolveComponent","$event"],"mappings":"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"}

package/dist/esm/components/layout/index.mjs

@@ -1,13 +1,13 @@
 import list from './List.mjs';
 import show from './Show.mjs';
 import './Layout.vue.mjs';
+import './components/index.mjs';
 import _sfc_main from './Layout.vue2.mjs';
+export { default as AppTheme } from './components/layout/ThemeApp.vue2.mjs';
+export { default as HeaderLayout } from './components/layout/HeaderLayout.vue2.mjs';
+export { default as Menu } from './components/menu/Menu.mjs';
 
 "use strict";
-_sfc_main.install = function(app) {
-  app.component("DLayout", _sfc_main);
-  return app;
-};
 list.install = function(app) {
   app.component(list.name, list);
   return app;
@@ -16,6 +16,10 @@ show.install = function(app) {
   app.component(show.name, show);
   return app;
 };
+_sfc_main.install = function(app) {
+  app.component("DLayout", _sfc_main);
+  return app;
+};
 
 export { _sfc_main as Layout, list as List, show as Show };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/layout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../src/components/layout/index.ts"],"sourcesContent":["import List from \"./List\";\r\nimport Show from \"./Show\";\r\nimport type { App } from \"vue\";\r\n\r\nimport Layout from \"./Layout.vue\";\r\n\r\nLayout.install = function (app: App) {\r\n  app.component(\"DLayout\", Layout);\r\n  return app;\r\n};\r\n\r\nList.install = function (app: App) {\r\n  app.component(List.name!, List);\r\n  return app;\r\n};\r\n\r\nShow.install = function (app: App) {\r\n  app.component(Show.name!, Show);\r\n  return app;\r\n};\r\n\r\nexport { Layout, List, Show };\r\n"],"names":["Layout","List","Show"],"mappings":";;;;;;AAMAA,SAAO,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACnC,EAAI,GAAA,CAAA,SAAA,CAAU,WAAWA,SAAM,CAAA;AAC/B,EAAO,OAAA,GAAA;AACT,CAAA;AAEAC,IAAK,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACjC,EAAI,GAAA,CAAA,SAAA,CAAUA,IAAK,CAAA,IAAA,EAAOA,IAAI,CAAA;AAC9B,EAAO,OAAA,GAAA;AACT,CAAA;AAEAC,IAAK,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACjC,EAAI,GAAA,CAAA,SAAA,CAAUA,IAAK,CAAA,IAAA,EAAOA,IAAI,CAAA;AAC9B,EAAO,OAAA,GAAA;AACT,CAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../src/components/layout/index.ts"],"sourcesContent":["import List from \"./List\";\r\nimport Show from \"./Show\";\r\nimport type { App } from \"vue\";\r\n\r\nimport Layout from \"./Layout.vue\";\r\n\r\nexport * from \"./components\";\r\n\r\nList.install = function (app: App) {\r\n  app.component(List.name!, List);\r\n  return app;\r\n};\r\n\r\nShow.install = function (app: App) {\r\n  app.component(Show.name!, Show);\r\n  return app;\r\n};\r\nLayout.install = function (app: App) {\r\n  app.component(\"DLayout\", Layout);\r\n  return app;\r\n};\r\n\r\nexport { Layout, List, Show };\r\n"],"names":["List","Show","Layout"],"mappings":";;;;;;;;;;AAQAA,IAAK,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACjC,EAAI,GAAA,CAAA,SAAA,CAAUA,IAAK,CAAA,IAAA,EAAOA,IAAI,CAAA;AAC9B,EAAO,OAAA,GAAA;AACT,CAAA;AAEAC,IAAK,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACjC,EAAI,GAAA,CAAA,SAAA,CAAUA,IAAK,CAAA,IAAA,EAAOA,IAAI,CAAA;AAC9B,EAAO,OAAA,GAAA;AACT,CAAA;AACAC,SAAO,CAAA,OAAA,GAAU,SAAU,GAAU,EAAA;AACnC,EAAI,GAAA,CAAA,SAAA,CAAU,WAAWA,SAAM,CAAA;AAC/B,EAAO,OAAA,GAAA;AACT,CAAA;;;;"}

package/dist/esm/components/tab/Search.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, ref, computed, watch, createVNode, resolveComponent, Fragment, createTextVNode, h } from 'vue';
+import { useRouter } from 'vue-router';
 import { theme } from 'ant-design-vue';
 import { useMagicKeys, useWindowScroll } from '@vueuse/core';
 import { SearchOutlined, UnorderedListOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
@@ -10,6 +11,7 @@ import dayjs from '../../_virtual/dayjs.min.mjs';
 var Search = /* @__PURE__ */ defineComponent({
   name: "Search",
   setup() {
+    const router = useRouter();
     const {
       useToken
     } = theme;
@@ -39,9 +41,6 @@ var Search = /* @__PURE__ */ defineComponent({
         open.value = false;
       }
     });
-    const buttonToken = {
-      borderRadius: "12px"
-    };
     const onCloseTab = (path) => {
       deleteTabs(path);
     };
@@ -55,6 +54,7 @@ var Search = /* @__PURE__ */ defineComponent({
         flex-direction: column;
         max-height: 400px;
         overflow-y: overlay;
+        user-select: none;
 
         /* 整个滚动条 */
 
@@ -100,9 +100,10 @@ var Search = /* @__PURE__ */ defineComponent({
             align-items: center;
             padding: 4px 10px;
             width: 400px;
+            cursor: pointer;
 
             &:hover {
-              background-color: red;
+              background-color: ${token.value.colorBgLayout};
 
               .close-wrapper {
                 display: block;
@@ -156,7 +157,7 @@ var Search = /* @__PURE__ */ defineComponent({
                 text-align: center;
 
                 &:hover {
-                  background-color: blue;
+                  // background-color: ${token.value.colorBgLayout};
                 }
               }
             }
@@ -176,6 +177,12 @@ var Search = /* @__PURE__ */ defineComponent({
         return `${diffInHours} \u5C0F\u65F6\u524D`;
       }
     }
+    const onJump = (item) => {
+      if (item.fullPath) {
+        router.push(item.fullPath);
+      }
+      open.value = false;
+    };
     return () => createVNode("div", null, [createVNode(resolveComponent("a-popover"), {
       "open": open.value,
       "onUpdate:open": ($event) => open.value = $event,
@@ -208,7 +215,9 @@ var Search = /* @__PURE__ */ defineComponent({
         "class": "search-title"
       }, [createTextVNode("\u6253\u5F00\u7684\u6807\u7B7E\u9875")]), createVNode("ul", null, [navTabList.value.map((item) => {
         var _a, _b;
-        return createVNode("li", null, [createVNode("div", {
+        return createVNode("li", {
+          "onClick": () => onJump(item)
+        }, [createVNode("div", {
           "class": "icon"
         }, [createVNode(UnorderedListOutlined, null, null)]), createVNode("div", {
           "class": "content"

package/dist/esm/components/tab/Search.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Search.mjs","sources":["../../../../src/components/tab/Search.tsx"],"sourcesContent":["import { computed, ComputedRef, defineComponent, h, ref, watch } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { useMagicKeys, useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport {\r\n  CloseOutlined,\r\n  DownOutlined,\r\n  SearchOutlined,\r\n  UnorderedListOutlined\r\n} from \"@ant-design/icons-vue\";\r\nimport { useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\nimport dayjs from \"dayjs\";\r\n\r\nexport default defineComponent({\r\n  name: \"Search\",\r\n  setup() {\r\n    const { useToken } = theme;\r\n    const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n    const { getList, deleteTabs } = useNavTabStore();\r\n    // 用来监听 Ctrl + Shift + S\r\n    const keys = useMagicKeys();\r\n    const shiftCtrlA = keys[\"Shift+Ctrl+S\"];\r\n    const open = ref(false);\r\n    const { y } = useWindowScroll();\r\n\r\n    const navTabList = computed(() => {\r\n      return getList!.sort((a, b) => (b.openTime || 0) - (a.openTime || 0));\r\n    });\r\n\r\n    watch(shiftCtrlA, v => {\r\n      if (v) {\r\n        open.value = !open.value;\r\n      }\r\n    });\r\n    watch(\r\n      () => y.value,\r\n      val => {\r\n        if (val > 0) {\r\n          open.value = false;\r\n        }\r\n      }\r\n    );\r\n\r\n    const buttonToken = {\r\n      borderRadius: \"12px\"\r\n    };\r\n\r\n    const onCloseTab = (path: string) => {\r\n      deleteTabs(path);\r\n    };\r\n\r\n    const searchStyle = computed(\r\n      () => css`\r\n        padding: 10px;\r\n        border-bottom: 1px solid ${token.value.colorBorder};\r\n      `\r\n    );\r\n\r\n    const searchListStyle = computed(\r\n      () => css`\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        max-height: 400px;\r\n        overflow-y: overlay;\r\n\r\n        /* 整个滚动条 */\r\n\r\n        ::-webkit-scrollbar {\r\n          width: 4px; /* 垂直滚动条的宽度 */\r\n          height: 4px; /* 水平滚动条的高度 */\r\n        }\r\n\r\n        /* 滚动条轨道 */\r\n\r\n        ::-webkit-scrollbar-track {\r\n          background: transparent; /* 轨道背景色 */\r\n          border-radius: 0; /* 轨道圆角 */\r\n        }\r\n\r\n        /* 滚动条滑块 */\r\n\r\n        ::-webkit-scrollbar-thumb {\r\n          //background: #888; /* 滑块背景色 */\r\n          // border-radius: 6px; /* 滑块圆角 */\r\n          border: 3px solid ${token.value.colorPrimaryBorder}; /* 滑块边框 */\r\n        }\r\n\r\n        /* 滚动条滑块悬停效果 */\r\n\r\n        ::-webkit-scrollbar-thumb:hover {\r\n          background: red; /* 滑块悬停背景色 */\r\n        }\r\n\r\n        .search-title {\r\n          position: sticky;\r\n          top: 0;\r\n          padding: 10px;\r\n        }\r\n\r\n        ul {\r\n          margin: 0;\r\n          padding: 0;\r\n          list-style: none;\r\n\r\n          li {\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 4px 10px;\r\n            width: 400px;\r\n\r\n            &:hover {\r\n              background-color: red;\r\n\r\n              .close-wrapper {\r\n                display: block;\r\n              }\r\n            }\r\n\r\n            .icon {\r\n              width: 42px;\r\n              height: 42px;\r\n              border-radius: 10px;\r\n              background-color: ${token.value.colorPrimary};\r\n              display: flex;\r\n              justify-content: center;\r\n              align-items: center;\r\n            }\r\n\r\n            .content {\r\n              padding-left: 10px;\r\n\r\n              .time-ago {\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 12px;\r\n\r\n                .hostname {\r\n                  max-width: 180px;\r\n                  overflow: hidden;\r\n                }\r\n\r\n                .split {\r\n                  width: 4px;\r\n                  height: 4px;\r\n                  display: inline-block;\r\n                  background-color: ${token.value.colorPrimary};\r\n                  border-radius: 10px;\r\n                  margin: 0 6px;\r\n                }\r\n              }\r\n            }\r\n\r\n            .close-wrapper {\r\n              display: none;\r\n              flex: 1;\r\n              text-align: right;\r\n\r\n              .close-btn {\r\n                display: inline-block;\r\n                width: 22px;\r\n                height: 22px;\r\n                border-radius: 50%;\r\n                text-align: center;\r\n\r\n                &:hover {\r\n                  background-color: blue;\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      `\r\n    );\r\n\r\n    function timeAgo(providedTime: number) {\r\n      const now = dayjs();\r\n      const diffInSeconds = now.diff(providedTime, \"second\"); // 计算时间差（秒）\r\n      const diffInMinutes = now.diff(providedTime, \"minute\"); // 计算时间差（分钟）\r\n      const diffInHours = now.diff(providedTime, \"hour\"); // 计算时间差（小时）\r\n\r\n      if (diffInMinutes < 1) {\r\n        return `${diffInSeconds} 秒前`;\r\n      } else if (diffInHours < 1) {\r\n        return `${diffInMinutes} 分钟前`;\r\n      } else {\r\n        return `${diffInHours} 小时前`;\r\n      }\r\n    }\r\n\r\n    return () => (\r\n      <div>\r\n        <a-popover\r\n          v-model:open={open.value}\r\n          placement={\"bottomRight\"}\r\n          trigger={\"click\"}\r\n          overlayClassName={\"search-popover-wrapper\"}\r\n        >\r\n          {{\r\n            default: () => (\r\n              <div>\r\n                <a-button\r\n                  style={{ borderRadius: \"10px\" }}\r\n                  icon={h(DownOutlined)}\r\n                  title={\"搜索标签页\"}\r\n                />\r\n              </div>\r\n            ),\r\n            content: () => (\r\n              <>\r\n                <div class={searchStyle.value}>\r\n                  <a-input placeholder={\"搜索标签页\"} bordered={false}>\r\n                    {{\r\n                      prefix: () => <SearchOutlined />,\r\n                      suffix: () => (\r\n                        <span style={{ color: \"rgba(0, 0, 0, 0.45)\" }}>\r\n                          Ctrl+Shift+S\r\n                        </span>\r\n                      )\r\n                    }}\r\n                  </a-input>\r\n                </div>\r\n                <div class={searchListStyle.value}>\r\n                  <span class={\"search-title\"}>打开的标签页</span>\r\n                  <ul>\r\n                    {navTabList.value.map(item => (\r\n                      <li>\r\n                        <div class={\"icon\"}>\r\n                          <UnorderedListOutlined />\r\n                        </div>\r\n                        <div class={\"content\"}>\r\n                          <div class={\"title\"}>{item.meta?.title}</div>\r\n                          <div class={\"time-ago\"}>\r\n                            <span class={\"hostname\"}>\r\n                              {window.location.hostname + \"\" + item.path}\r\n                            </span>\r\n                            <span class={\"split\"}></span>\r\n                            <span class={\"time\"}>\r\n                              {timeAgo(item.openTime ?? 0)}\r\n                            </span>\r\n                          </div>\r\n                        </div>\r\n                        <div class={\"close-wrapper\"}>\r\n                          <span\r\n                            class={\"close-btn\"}\r\n                            onClick={() => onCloseTab(item.fullPath || \"\")}\r\n                          >\r\n                            <CloseOutlined />\r\n                          </span>\r\n                        </div>\r\n                      </li>\r\n                    ))}\r\n                  </ul>\r\n                </div>\r\n              </>\r\n            )\r\n          }}\r\n        </a-popover>\r\n      </div>\r\n    );\r\n  }\r\n});\r\n"],"names":["name","setup","useToken","theme","token","getList","deleteTabs","useNavTabStore","keys","useMagicKeys","shiftCtrlA","open","ref","y","useWindowScroll","navTabList","computed","sort","a","b","openTime","watch","v","value","val","buttonToken","borderRadius","onCloseTab","path","searchStyle","css","colorBorder","searchListStyle","colorPrimaryBorder","colorPrimary","timeAgo","providedTime","now","dayjs","diffInSeconds","diff","diffInMinutes","diffInHours","_createVNode","_resolveComponent","$event","default","h","DownOutlined","content","_Fragment","prefix","SearchOutlined","suffix","color","_createTextVNode","map","item","UnorderedListOutlined","meta","title","window","location","hostname","onClick","fullPath","CloseOutlined"],"mappings":"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"}
+{"version":3,"file":"Search.mjs","sources":["../../../../src/components/tab/Search.tsx"],"sourcesContent":["import { computed, ComputedRef, defineComponent, h, ref, watch } from \"vue\";\r\nimport { useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { useMagicKeys, useWindowScroll } from \"@vueuse/core\";\r\n\r\nimport {\r\n  CloseOutlined,\r\n  DownOutlined,\r\n  SearchOutlined,\r\n  UnorderedListOutlined\r\n} from \"@ant-design/icons-vue\";\r\nimport { type NavTabsState, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\nimport dayjs from \"dayjs\";\r\n\r\nexport default defineComponent({\r\n  name: \"Search\",\r\n  setup() {\r\n    const router = useRouter();\r\n\r\n    const { useToken } = theme;\r\n    const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n    const { getList, deleteTabs } = useNavTabStore();\r\n    // 用来监听 Ctrl + Shift + S\r\n    const keys = useMagicKeys();\r\n    const shiftCtrlA = keys[\"Shift+Ctrl+S\"];\r\n    const open = ref(false);\r\n    const { y } = useWindowScroll();\r\n\r\n    const navTabList = computed(() => {\r\n      return getList!.sort((a, b) => (b.openTime || 0) - (a.openTime || 0));\r\n    });\r\n\r\n    watch(shiftCtrlA, v => {\r\n      if (v) {\r\n        open.value = !open.value;\r\n      }\r\n    });\r\n    watch(\r\n      () => y.value,\r\n      val => {\r\n        if (val > 0) {\r\n          open.value = false;\r\n        }\r\n      }\r\n    );\r\n\r\n    const onCloseTab = (path: string) => {\r\n      deleteTabs(path);\r\n    };\r\n\r\n    const searchStyle = computed(\r\n      () => css`\r\n        padding: 10px;\r\n        border-bottom: 1px solid ${token.value.colorBorder};\r\n      `\r\n    );\r\n\r\n    const searchListStyle = computed(\r\n      () => css`\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        max-height: 400px;\r\n        overflow-y: overlay;\r\n        user-select: none;\r\n\r\n        /* 整个滚动条 */\r\n\r\n        ::-webkit-scrollbar {\r\n          width: 4px; /* 垂直滚动条的宽度 */\r\n          height: 4px; /* 水平滚动条的高度 */\r\n        }\r\n\r\n        /* 滚动条轨道 */\r\n\r\n        ::-webkit-scrollbar-track {\r\n          background: transparent; /* 轨道背景色 */\r\n          border-radius: 0; /* 轨道圆角 */\r\n        }\r\n\r\n        /* 滚动条滑块 */\r\n\r\n        ::-webkit-scrollbar-thumb {\r\n          //background: #888; /* 滑块背景色 */\r\n          // border-radius: 6px; /* 滑块圆角 */\r\n          border: 3px solid ${token.value.colorPrimaryBorder}; /* 滑块边框 */\r\n        }\r\n\r\n        /* 滚动条滑块悬停效果 */\r\n\r\n        ::-webkit-scrollbar-thumb:hover {\r\n          background: red; /* 滑块悬停背景色 */\r\n        }\r\n\r\n        .search-title {\r\n          position: sticky;\r\n          top: 0;\r\n          padding: 10px;\r\n        }\r\n\r\n        ul {\r\n          margin: 0;\r\n          padding: 0;\r\n          list-style: none;\r\n\r\n          li {\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 4px 10px;\r\n            width: 400px;\r\n            cursor: pointer;\r\n\r\n            &:hover {\r\n              background-color: ${token.value.colorBgLayout};\r\n\r\n              .close-wrapper {\r\n                display: block;\r\n              }\r\n            }\r\n\r\n            .icon {\r\n              width: 42px;\r\n              height: 42px;\r\n              border-radius: 10px;\r\n              background-color: ${token.value.colorPrimary};\r\n              display: flex;\r\n              justify-content: center;\r\n              align-items: center;\r\n            }\r\n\r\n            .content {\r\n              padding-left: 10px;\r\n\r\n              .time-ago {\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 12px;\r\n\r\n                .hostname {\r\n                  max-width: 180px;\r\n                  overflow: hidden;\r\n                }\r\n\r\n                .split {\r\n                  width: 4px;\r\n                  height: 4px;\r\n                  display: inline-block;\r\n                  background-color: ${token.value.colorPrimary};\r\n                  border-radius: 10px;\r\n                  margin: 0 6px;\r\n                }\r\n              }\r\n            }\r\n\r\n            .close-wrapper {\r\n              display: none;\r\n              flex: 1;\r\n              text-align: right;\r\n\r\n              .close-btn {\r\n                display: inline-block;\r\n                width: 22px;\r\n                height: 22px;\r\n                border-radius: 50%;\r\n                text-align: center;\r\n\r\n                &:hover {\r\n                  // background-color: ${token.value.colorBgLayout};\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      `\r\n    );\r\n\r\n    function timeAgo(providedTime: number) {\r\n      const now = dayjs();\r\n      const diffInSeconds = now.diff(providedTime, \"second\"); // 计算时间差（秒）\r\n      const diffInMinutes = now.diff(providedTime, \"minute\"); // 计算时间差（分钟）\r\n      const diffInHours = now.diff(providedTime, \"hour\"); // 计算时间差（小时）\r\n\r\n      if (diffInMinutes < 1) {\r\n        return `${diffInSeconds} 秒前`;\r\n      } else if (diffInHours < 1) {\r\n        return `${diffInMinutes} 分钟前`;\r\n      } else {\r\n        return `${diffInHours} 小时前`;\r\n      }\r\n    }\r\n\r\n    const onJump = (item: NavTabsState) => {\r\n      if (item.fullPath) {\r\n        router.push(item.fullPath);\r\n      }\r\n      open.value = false;\r\n    };\r\n\r\n    return () => (\r\n      <div>\r\n        <a-popover\r\n          v-model:open={open.value}\r\n          placement={\"bottomRight\"}\r\n          trigger={\"click\"}\r\n          overlayClassName={\"search-popover-wrapper\"}\r\n        >\r\n          {{\r\n            default: () => (\r\n              <div>\r\n                <a-button\r\n                  style={{ borderRadius: \"10px\" }}\r\n                  icon={h(DownOutlined)}\r\n                  title={\"搜索标签页\"}\r\n                />\r\n              </div>\r\n            ),\r\n            content: () => (\r\n              <>\r\n                <div class={searchStyle.value}>\r\n                  <a-input placeholder={\"搜索标签页\"} bordered={false}>\r\n                    {{\r\n                      prefix: () => <SearchOutlined />,\r\n                      suffix: () => (\r\n                        <span style={{ color: \"rgba(0, 0, 0, 0.45)\" }}>\r\n                          Ctrl+Shift+S\r\n                        </span>\r\n                      )\r\n                    }}\r\n                  </a-input>\r\n                </div>\r\n                <div class={searchListStyle.value}>\r\n                  <span class={\"search-title\"}>打开的标签页</span>\r\n                  <ul>\r\n                    {navTabList.value.map(item => (\r\n                      <li onClick={() => onJump(item)}>\r\n                        <div class={\"icon\"}>\r\n                          <UnorderedListOutlined />\r\n                        </div>\r\n                        <div class={\"content\"}>\r\n                          <div class={\"title\"}>{item.meta?.title}</div>\r\n                          <div class={\"time-ago\"}>\r\n                            <span class={\"hostname\"}>\r\n                              {window.location.hostname + \"\" + item.path}\r\n                            </span>\r\n                            <span class={\"split\"}></span>\r\n                            <span class={\"time\"}>\r\n                              {timeAgo(item.openTime ?? 0)}\r\n                            </span>\r\n                          </div>\r\n                        </div>\r\n                        <div class={\"close-wrapper\"}>\r\n                          <span\r\n                            class={\"close-btn\"}\r\n                            onClick={() => onCloseTab(item.fullPath || \"\")}\r\n                          >\r\n                            <CloseOutlined />\r\n                          </span>\r\n                        </div>\r\n                      </li>\r\n                    ))}\r\n                  </ul>\r\n                </div>\r\n              </>\r\n            )\r\n          }}\r\n        </a-popover>\r\n      </div>\r\n    );\r\n  }\r\n});\r\n"],"names":["name","setup","router","useRouter","useToken","theme","token","getList","deleteTabs","useNavTabStore","keys","useMagicKeys","shiftCtrlA","open","ref","y","useWindowScroll","navTabList","computed","sort","a","b","openTime","watch","v","value","val","onCloseTab","path","searchStyle","css","colorBorder","searchListStyle","colorPrimaryBorder","colorBgLayout","colorPrimary","timeAgo","providedTime","now","dayjs","diffInSeconds","diff","diffInMinutes","diffInHours","onJump","item","fullPath","push","_createVNode","_resolveComponent","$event","default","borderRadius","h","DownOutlined","content","_Fragment","prefix","SearchOutlined","suffix","color","_createTextVNode","map","onClick","UnorderedListOutlined","meta","title","window","location","hostname","CloseOutlined"],"mappings":"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"}

package/dist/esm/components/tab/Tab.vue2.mjs

@@ -20,13 +20,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function useStyle() {
       const { useToken } = theme;
       const { token } = useToken();
+      console.log(JSON.stringify(token.value));
       const activeTabColor = computed(() => token.value.colorBgLayout);
       const splitColor = computed(() => token.value.colorBorderSecondary);
       const tabsNavStyle2 = computed(() => {
         return css`
       --active-tab-color: ${activeTabColor.value};
       --splitColor: ${splitColor.value};
-      background: ${token.value.colorBgContainer};
       padding-top: 10px;
       display: flex;
     `;

package/dist/esm/components/tab/Tab.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue2.mjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport Search from \"./Search\";\r\nimport { CloseOutlined } from \"@ant-design/icons-vue\";\r\nimport { useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nconst { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();\r\n\r\nconst { activeKey, list, onChange, onClose } = useTab();\r\n\r\nfunction useStyle(): {\r\n  tabsNavStyle: ComputedRef<string>;\r\n  tabHoverBgStyle: ComputedRef<string>;\r\n  closeBtnStyle: ComputedRef<string>;\r\n} {\r\n  const { useToken } = theme;\r\n  const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n\r\n  const activeTabColor = computed(() => token.value.colorBgLayout);\r\n  const splitColor = computed(() => token.value.colorBorderSecondary);\r\n\r\n  const tabsNavStyle = computed(() => {\r\n    return css`\r\n      --active-tab-color: ${activeTabColor.value};\r\n      --splitColor: ${splitColor.value};\r\n      background: ${token.value.colorBgContainer};\r\n      padding-top: 10px;\r\n      display: flex;\r\n    `;\r\n  });\r\n\r\n  const tabHoverBgStyle = computed(() => {\r\n    return css`\r\n      &:before {\r\n        background: ${token.value.colorPrimaryBgHover};\r\n      }\r\n    `;\r\n  });\r\n\r\n  const closeBtnStyle = computed(() => {\r\n    return css`\r\n      &:hover {\r\n        background: ${token.value.colorPrimaryBorderHover};\r\n        border-radius: 50%;\r\n      }\r\n    `;\r\n  });\r\n\r\n  return {\r\n    tabsNavStyle,\r\n    tabHoverBgStyle,\r\n    closeBtnStyle\r\n  };\r\n}\r\n\r\nfunction useTab() {\r\n  const route = useRoute();\r\n  const router = useRouter();\r\n\r\n  const store = useNavTabStore();\r\n  const { list, activeKey } = storeToRefs(store);\r\n  const { save, deleteTabs } = store;\r\n\r\n  watch(\r\n    () => route.fullPath,\r\n    () => {\r\n      save(route);\r\n    },\r\n    {\r\n      immediate: true\r\n    }\r\n  );\r\n\r\n  watch(\r\n    () => route.fullPath,\r\n    val => {\r\n      activeKey.value = val;\r\n    },\r\n    {\r\n      immediate: true\r\n    }\r\n  );\r\n\r\n  const onChange = (key: string) => {\r\n    if (key !== route.path) {\r\n      // 匹配打开的标签路由数据\r\n      const rs = list.value.filter(item => item.fullPath === key)[0];\r\n      router.push(rs);\r\n    }\r\n  };\r\n\r\n  const onClose = ($event: Event, key: string | undefined) => {\r\n    if (!key) return;\r\n    //阻止冒泡\r\n    $event.stopPropagation();\r\n    // 删除标签\r\n    deleteTabs(key);\r\n    // 重新push已打开的路由\r\n    const backRoute = list.value[list.value.length - 1];\r\n    if (backRoute.fullPath) {\r\n      router.push(backRoute.fullPath);\r\n    }\r\n  };\r\n\r\n  return {\r\n    activeKey,\r\n    list,\r\n    onChange,\r\n    onClose\r\n  };\r\n}\r\n</script>\r\n<template>\r\n  <div class=\"tabs-nav-wrapper\" :class=\"tabsNavStyle\">\r\n    <Search />\r\n    <div class=\"d-tabs-nav\">\r\n      <a-tabs\r\n        size=\"small\"\r\n        v-model:activeKey=\"activeKey\"\r\n        type=\"card\"\r\n        hide-add\r\n        @change=\"onChange\"\r\n      >\r\n        <a-tab-pane\r\n          :key=\"item.fullPath\"\r\n          :closable=\"false\"\r\n          v-for=\"item in list\"\r\n          :class=\"{ active: activeKey === item.fullPath }\"\r\n        >\r\n          <template #tab>\r\n            <div class=\"tab-hover-bg\" :class=\"tabHoverBgStyle\"></div>\r\n            <div class=\"tab-dividers\"></div>\r\n            <div class=\"tab-item\">{{ item.meta?.title || \"无标题\" }}</div>\r\n            <div class=\"tab-close\">\r\n              <div\r\n                class=\"close-btn\"\r\n                :class=\"closeBtnStyle\"\r\n                @click=\"onClose($event, item.fullPath)\"\r\n              >\r\n                <CloseOutlined />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </a-tab-pane>\r\n      </a-tabs>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\"></style>\r\n"],"names":["tabsNavStyle","tabHoverBgStyle","closeBtnStyle","list","activeKey","onChange","onClose"],"mappings":"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"}
+{"version":3,"file":"Tab.vue2.mjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, watch } from \"vue\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport Search from \"./Search\";\r\nimport { CloseOutlined } from \"@ant-design/icons-vue\";\r\nimport { useAppStore, useNavTabStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nconst { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();\r\n\r\nconst { activeKey, list, onChange, onClose } = useTab();\r\n\r\nfunction useStyle(): {\r\n  tabsNavStyle: ComputedRef<string>;\r\n  tabHoverBgStyle: ComputedRef<string>;\r\n  closeBtnStyle: ComputedRef<string>;\r\n} {\r\n  const { useToken } = theme;\r\n  const { token }: { token: ComputedRef<GlobalToken> } = useToken();\r\n  console.log(JSON.stringify(token.value));\r\n\r\n  const activeTabColor = computed(() => token.value.colorBgLayout);\r\n  const splitColor = computed(() => token.value.colorBorderSecondary);\r\n\r\n  const tabsNavStyle = computed(() => {\r\n    return css`\r\n      --active-tab-color: ${activeTabColor.value};\r\n      --splitColor: ${splitColor.value};\r\n      padding-top: 10px;\r\n      display: flex;\r\n    `;\r\n  });\r\n\r\n  const tabHoverBgStyle = computed(() => {\r\n    return css`\r\n      &:before {\r\n        background: ${token.value.colorPrimaryBgHover};\r\n      }\r\n    `;\r\n  });\r\n\r\n  const closeBtnStyle = computed(() => {\r\n    return css`\r\n      &:hover {\r\n        background: ${token.value.colorPrimaryBorderHover};\r\n        border-radius: 50%;\r\n      }\r\n    `;\r\n  });\r\n\r\n  return {\r\n    tabsNavStyle,\r\n    tabHoverBgStyle,\r\n    closeBtnStyle\r\n  };\r\n}\r\n\r\nfunction useTab() {\r\n  const route = useRoute();\r\n  const router = useRouter();\r\n\r\n  const store = useNavTabStore();\r\n  const { list, activeKey } = storeToRefs(store);\r\n  const { save, deleteTabs } = store;\r\n\r\n  watch(\r\n    () => route.fullPath,\r\n    () => {\r\n      save(route);\r\n    },\r\n    {\r\n      immediate: true\r\n    }\r\n  );\r\n\r\n  watch(\r\n    () => route.fullPath,\r\n    val => {\r\n      activeKey.value = val;\r\n    },\r\n    {\r\n      immediate: true\r\n    }\r\n  );\r\n\r\n  const onChange = (key: string) => {\r\n    if (key !== route.path) {\r\n      // 匹配打开的标签路由数据\r\n      const rs = list.value.filter(item => item.fullPath === key)[0];\r\n      router.push(rs);\r\n    }\r\n  };\r\n\r\n  const onClose = ($event: Event, key: string | undefined) => {\r\n    if (!key) return;\r\n    //阻止冒泡\r\n    $event.stopPropagation();\r\n    // 删除标签\r\n    deleteTabs(key);\r\n    // 重新push已打开的路由\r\n    const backRoute = list.value[list.value.length - 1];\r\n    if (backRoute.fullPath) {\r\n      router.push(backRoute.fullPath);\r\n    }\r\n  };\r\n\r\n  return {\r\n    activeKey,\r\n    list,\r\n    onChange,\r\n    onClose\r\n  };\r\n}\r\n</script>\r\n<template>\r\n  <div class=\"tabs-nav-wrapper\" :class=\"tabsNavStyle\">\r\n    <Search />\r\n    <div class=\"d-tabs-nav\">\r\n      <a-tabs\r\n        size=\"small\"\r\n        v-model:activeKey=\"activeKey\"\r\n        type=\"card\"\r\n        hide-add\r\n        @change=\"onChange\"\r\n      >\r\n        <a-tab-pane\r\n          :key=\"item.fullPath\"\r\n          :closable=\"false\"\r\n          v-for=\"item in list\"\r\n          :class=\"{ active: activeKey === item.fullPath }\"\r\n        >\r\n          <template #tab>\r\n            <div class=\"tab-hover-bg\" :class=\"tabHoverBgStyle\"></div>\r\n            <div class=\"tab-dividers\"></div>\r\n            <div class=\"tab-item\">{{ item.meta?.title || \"无标题\" }}</div>\r\n            <div class=\"tab-close\">\r\n              <div\r\n                class=\"close-btn\"\r\n                :class=\"closeBtnStyle\"\r\n                @click=\"onClose($event, item.fullPath)\"\r\n              >\r\n                <CloseOutlined />\r\n              </div>\r\n            </div>\r\n          </template>\r\n        </a-tab-pane>\r\n      </a-tabs>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\"></style>\r\n"],"names":["tabsNavStyle","tabHoverBgStyle","closeBtnStyle","list","activeKey","onChange","onClose"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -6,6 +6,9 @@ export { default as RangePicker } from './components/date/RangePicker.vue2.mjs';
 export { default as FormLayout } from './components/form/FormLayout.mjs';
 export { default as Moon } from './components/icon/Moon.vue.mjs';
 export { default as Sun } from './components/icon/Sun.vue.mjs';
+export { default as AppTheme } from './components/layout/components/layout/ThemeApp.vue2.mjs';
+export { default as HeaderLayout } from './components/layout/components/layout/HeaderLayout.vue2.mjs';
+export { default as Menu } from './components/layout/components/menu/Menu.mjs';
 export { default as Layout } from './components/layout/Layout.vue2.mjs';
 export { default as List } from './components/layout/List.mjs';
 export { default as Show } from './components/layout/Show.mjs';

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/index.ts"],"sourcesContent":["import * as components from \"./components\";\r\nimport type { App, DefineComponent, Plugin } from \"vue\";\r\n\r\n// import { version } from \"../package.json\";\r\n\r\nexport * from \"./components\";\r\n\r\nconsole.log(components);\r\n// 定义组件类型，确保每个组件都可能具有 `install` 方法\r\ntype ComponentWithInstall = DefineComponent<never, never, never> & {\r\n  install?: (app: App) => void;\r\n};\r\n\r\nexport const install = (app: App) => {\r\n  Object.keys(components).forEach(key => {\r\n    const component = components[\r\n      key as keyof typeof components\r\n    ] as ComponentWithInstall;\r\n    // 类型断言，告诉 TypeScript component 可能是一个插件\r\n    const plugin = component as Plugin;\r\n    // 如果组件有 install 方法，则按插件安装\r\n    if (plugin.install) {\r\n      app.use(plugin);\r\n    }\r\n  });\r\n};\r\n\r\nexport default {\r\n  // version,\r\n  install\r\n};\r\n"],"names":["components"],"mappings":";;;;;;;;;;;;;AAOA,OAAA,CAAQ,IAAIA,OAAU,CAAA;AAMT,MAAA,OAAA,GAAU,CAAC,GAAa,KAAA;AACnC,EAAA,MAAA,CAAO,IAAK,CAAAA,OAAU,CAAE,CAAA,OAAA,CAAQ,CAAO,GAAA,KAAA;AACrC,IAAM,MAAA,SAAA,GAAYA,QAChB,GACF,CAAA;AAEA,IAAA,MAAM,MAAS,GAAA,SAAA;AAEf,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAA,GAAA,CAAI,IAAI,MAAM,CAAA;AAAA;AAChB,GACD,CAAA;AACH;AAEA,YAAe;AAAA;AAAA,EAEb;AACF,CAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/index.ts"],"sourcesContent":["import * as components from \"./components\";\r\nimport type { App, DefineComponent, Plugin } from \"vue\";\r\n\r\n// import { version } from \"../package.json\";\r\n\r\nexport * from \"./components\";\r\n\r\nconsole.log(components);\r\n// 定义组件类型，确保每个组件都可能具有 `install` 方法\r\ntype ComponentWithInstall = DefineComponent<never, never, never> & {\r\n  install?: (app: App) => void;\r\n};\r\n\r\nexport const install = (app: App) => {\r\n  Object.keys(components).forEach(key => {\r\n    const component = components[\r\n      key as keyof typeof components\r\n    ] as ComponentWithInstall;\r\n    // 类型断言，告诉 TypeScript component 可能是一个插件\r\n    const plugin = component as Plugin;\r\n    // 如果组件有 install 方法，则按插件安装\r\n    if (plugin.install) {\r\n      app.use(plugin);\r\n    }\r\n  });\r\n};\r\n\r\nexport default {\r\n  // version,\r\n  install\r\n};\r\n"],"names":["components"],"mappings":";;;;;;;;;;;;;;;;AAOA,OAAA,CAAQ,IAAIA,OAAU,CAAA;AAMT,MAAA,OAAA,GAAU,CAAC,GAAa,KAAA;AACnC,EAAA,MAAA,CAAO,IAAK,CAAAA,OAAU,CAAE,CAAA,OAAA,CAAQ,CAAO,GAAA,KAAA;AACrC,IAAM,MAAA,SAAA,GAAYA,QAChB,GACF,CAAA;AAEA,IAAA,MAAM,MAAS,GAAA,SAAA;AAEf,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAA,GAAA,CAAI,IAAI,MAAM,CAAA;AAAA;AAChB,GACD,CAAA;AACH;AAEA,YAAe;AAAA;AAAA,EAEb;AACF,CAAA;;;;"}

package/dist/style/index.scss

@@ -7,3 +7,21 @@ html, body {
     display: none;
   }
 }
+
+.main-enter-active {
+  transition: 0.2s;
+}
+
+.main-leave-active {
+  transition: 0.15s;
+}
+
+.main-enter-from {
+  opacity: 0;
+  margin-left: -20px;
+}
+
+.main-leave-to {
+  opacity: 0;
+  margin-left: 20px;
+}

package/dist/style/layout/components/settings/style/index.scss

@@ -2,7 +2,7 @@
   position: fixed;
   inset-block-start: 240px;
   inset-inline-end: 0;
-  z-index: 0;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;