@ditari/bsui 5.1.4 → 5.1.6

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

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createBlock, createVNode, renderSlot } from 'vue';
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createBlock, createVNode, renderSlot } from 'vue';
 import { theme } from 'ant-design-vue';
-import { getActivePinia, storeToRefs } from 'pinia';
+import { storeToRefs } from 'pinia';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useAppStore } from '@ditari/store';
 import { css } from '@emotion/css';
@@ -11,29 +11,8 @@ import _sfc_main$1 from '../../../tab/Tab.vue2.mjs';
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "HeaderLayout",
   setup(__props) {
-    const pinia = getActivePinia();
-    const appStore = pinia ? useAppStore() : null;
-    const defaultLayout = {
-      sideWidth: 200,
-      headerHeight: 44,
-      collapsedWidth: 80,
-      collapsed: false
-    };
-    const defaultModeConfig = {
-      mode: "light",
-      list: [
-        { value: "light", label: "\u4EAE\u8272" },
-        { value: "dark", label: "\u6DF1\u8272" },
-        { value: "os", label: "\u8DDF\u968F\u7CFB\u7EDF" }
-      ]
-    };
-    const defaultHeaderTokenStyle = {
-      bgColor: "#1677ff",
-      txtColor: "#fff"
-    };
-    const layout = appStore ? storeToRefs(appStore).layout : ref(defaultLayout);
-    const modeConfig = appStore ? storeToRefs(appStore).modeConfig : ref(defaultModeConfig);
-    const headerTokenStyle = appStore ? storeToRefs(appStore).headerTokenStyle : ref(defaultHeaderTokenStyle);
+    const appStore = useAppStore();
+    const { layout, modeConfig, headerTokenStyle } = storeToRefs(appStore);
     const {
       headerStyle,
       headerTabStyle,
@@ -52,7 +31,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       top: 0;
       right: 0;
       z-index: 1;
-      background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.bgColor};
+      background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.colorBgHeader};
       left: ${left.value};
       height: ${layout.value.headerHeight}px;
       transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
@@ -75,7 +54,6 @@ 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, ref } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { getActivePinia, storeToRefs } from \"pinia\";\r\n\r\nimport {\r\n  MenuFoldOutlined,\r\n  MenuUnfoldOutlined\r\n} 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\n// 检查 Pinia 是否可用\r\nconst pinia = getActivePinia();\r\nconst appStore = pinia ? useAppStore() : null;\r\n\r\n// 提供默认值当 Pinia 不可用时\r\nconst defaultLayout = {\r\n  sideWidth: 200,\r\n  headerHeight: 44,\r\n  collapsedWidth: 80,\r\n  collapsed: false\r\n};\r\n\r\nconst defaultModeConfig = {\r\n  mode: \"light\",\r\n  list: [\r\n    { value: \"light\", label: \"亮色\" },\r\n    { value: \"dark\", label: \"深色\" },\r\n    { value: \"os\", label: \"跟随系统\" }\r\n  ]\r\n};\r\n\r\nconst defaultHeaderTokenStyle = {\r\n  bgColor: \"#1677ff\",\r\n  txtColor: \"#fff\"\r\n};\r\n\r\nconst layout = appStore ? storeToRefs(appStore).layout : ref(defaultLayout);\r\nconst modeConfig = appStore ? storeToRefs(appStore).modeConfig : ref(defaultModeConfig);\r\nconst headerTokenStyle = appStore ? storeToRefs(appStore).headerTokenStyle : ref(defaultHeaderTokenStyle);\r\n\r\nconst {\r\n  headerStyle,\r\n  headerTabStyle,\r\n  collapsedStyle,\r\n  rightStyle\r\n} = 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> } =\r\n    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, 'app-header-layout']\">\r\n    <div\r\n      :class=\"collapsedStyle\"\r\n      @click=\"layout.collapsed = !layout.collapsed\"\r\n    >\r\n      <menu-unfold-outlined\r\n        v-if=\"layout.collapsed\"\r\n        class=\"trigger\"\r\n      />\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","_createElementBlock","_unref","_createElementVNode","_createBlock","_createVNode","Tab","_renderSlot"],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,QAAQ,cAAA,EAAe;AAC7B,IAAA,MAAM,QAAA,GAAW,KAAA,GAAQ,WAAA,EAAY,GAAI,IAAA;AAGzC,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,SAAA,EAAW,GAAA;AAAA,MACX,YAAA,EAAc,EAAA;AAAA,MACd,cAAA,EAAgB,EAAA;AAAA,MAChB,SAAA,EAAW;AAAA,KACb;AAEA,IAAA,MAAM,iBAAA,GAAoB;AAAA,MACxB,IAAA,EAAM,OAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,cAAA,EAAK;AAAA,QAC9B,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,cAAA,EAAK;AAAA,QAC7B,EAAE,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,0BAAA;AAAO;AAC/B,KACF;AAEA,IAAA,MAAM,uBAAA,GAA0B;AAAA,MAC9B,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU;AAAA,KACZ;AAEA,IAAA,MAAM,SAAS,QAAA,GAAW,WAAA,CAAY,QAAQ,CAAA,CAAE,MAAA,GAAS,IAAI,aAAa,CAAA;AAC1E,IAAA,MAAM,aAAa,QAAA,GAAW,WAAA,CAAY,QAAQ,CAAA,CAAE,UAAA,GAAa,IAAI,iBAAiB,CAAA;AACtF,IAAA,MAAM,mBAAmB,QAAA,GAAW,WAAA,CAAY,QAAQ,CAAA,CAAE,gBAAA,GAAmB,IAAI,uBAAuB,CAAA;AAExG,IAAA,MAAM;AAAA,MACJ,WAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,QAAA,EAAS;AAEb,IAAA,SAAS,QAAA,GAKP;AACA,MAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,MAAA,MAAM,EAAE,KAAA,EAAM,GACZ,QAAA,EAAS;AAEX,MAAA,MAAM,IAAA,GAAO,QAAA;AAAA,QACX,MACE,CAAA,EAAG,MAAA,CAAO,KAAA,CAAM,SAAA,GAAY,OAAO,KAAA,CAAM,cAAA,GAAiB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMA,YAAAA,GAAc,QAAA;AAAA,QAClB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAKgB,UAAA,CAAW,MAAM,IAAA,KAAS,OAAA,GAC1C,MAAM,KAAA,CAAM,gBAAA,GACZ,gBAAA,CAAiB,KAAA,CAAM,OAAO,CAAA;AAAA,YAAA,EAC1B,KAAK,KAAK,CAAA;AAAA,cAAA,EACR,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAAA,GAAiB,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAMC,eAAAA,GAAiB,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAOK,WAAW,KAAA,CAAM,IAAA,KAAS,UAC/B,gBAAA,CAAiB,KAAA,CAAM,WACvB,SAAS,CAAA;AAAA,IAAA;AAAA,OAEjB;AAEA,MAAA,MAAMC,WAAAA,GAAa,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAA,OAAO;AAAA,QACL,WAAA,EAAAH,YAAAA;AAAA,QACA,cAAA,EAAAC,eAAAA;AAAA,QACA,cAAA,EAAAC,eAAAA;AAAA,QACA,UAAA,EAAAC;AAAA,OACF;AAAA,IACF;;0BAIEC,kBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,uBAAQC,MAAA,WAAA,CAAA,EAAW,mBAAA,CAAA;AAAA;;UACvBC,kBAAA;AAAA,YASM,KAAA;AAAA,YAAA;AAAA,cARH,KAAA,iBAAOD,KAAA,CAAA,cAAA,CAAc,CAAA;AAAA,cACrB,+CAAOA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA,GAAS,CAAIA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA;AAAA;;cAG3BA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA,iBADfE,WAAA,CAGEF,KAAA,CAAA,kBAAA,CAAA,EAAA;AAAA;gBADA,KAAA,EAAM;AAAA,kCAERE,WAAA,CAA6BF,KAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA;AAAA;;;;UAE/BC,kBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,iBAAOD,KAAA,CAAA,cAAA,CAAc;AAAA;;cACzBG,YAAOC,WAAA;AAAA;;;;UAETH,kBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,iBAAOD,KAAA,CAAA,UAAA,CAAU;AAAA;;cACrBK,UAAA,CAAa,IAAA,CAAA,MAAA,EAAA,SAAA;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 {\r\n  MenuFoldOutlined,\r\n  MenuUnfoldOutlined\r\n} 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\nimport type { RouteLocationNormalized } from \"vue-router\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst appStore = useAppStore();\r\n\r\nconst { layout, modeConfig, headerTokenStyle } =\r\n  storeToRefs(appStore);\r\n\r\nconst {\r\n  headerStyle,\r\n  headerTabStyle,\r\n  collapsedStyle,\r\n  rightStyle\r\n} = 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> } =\r\n    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.colorBgHeader};\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<template>\r\n  <div :class=\"[headerStyle, 'app-header-layout']\">\r\n    <div\r\n      :class=\"collapsedStyle\"\r\n      @click=\"layout.collapsed = !layout.collapsed\"\r\n    >\r\n      <menu-unfold-outlined\r\n        v-if=\"layout.collapsed\"\r\n        class=\"trigger\"\r\n      />\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","_createElementBlock","_unref","_createElementVNode","_createBlock","_createVNode","Tab","_renderSlot"],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAY,gBAAA,EAAiB,GAC3C,YAAY,QAAQ,CAAA;AAEtB,IAAA,MAAM;AAAA,MACJ,WAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,QAAA,EAAS;AAEb,IAAA,SAAS,QAAA,GAKP;AACA,MAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,MAAA,MAAM,EAAE,KAAA,EAAM,GACZ,QAAA,EAAS;AAEX,MAAA,MAAM,IAAA,GAAO,QAAA;AAAA,QACX,MACE,CAAA,EAAG,MAAA,CAAO,KAAA,CAAM,SAAA,GAAY,OAAO,KAAA,CAAM,cAAA,GAAiB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMA,YAAAA,GAAc,QAAA;AAAA,QAClB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAKgB,UAAA,CAAW,MAAM,IAAA,KAAS,OAAA,GAC1C,MAAM,KAAA,CAAM,gBAAA,GACZ,gBAAA,CAAiB,KAAA,CAAM,aAAa,CAAA;AAAA,YAAA,EAChC,KAAK,KAAK,CAAA;AAAA,cAAA,EACR,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAAA,GAAiB,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAMC,eAAAA,GAAiB,QAAA;AAAA,QACrB,MAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAQR;AAEA,MAAA,MAAMC,WAAAA,GAAa,QAAA;AAAA,QACjB,MAAM,GAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAA,OAAO;AAAA,QACL,WAAA,EAAAH,YAAAA;AAAA,QACA,cAAA,EAAAC,eAAAA;AAAA,QACA,cAAA,EAAAC,eAAAA;AAAA,QACA,UAAA,EAAAC;AAAA,OACF;AAAA,IACF;;0BAGEC,kBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,uBAAQC,MAAA,WAAA,CAAA,EAAW,mBAAA,CAAA;AAAA;;UACvBC,kBAAA;AAAA,YASM,KAAA;AAAA,YAAA;AAAA,cARH,KAAA,iBAAOD,KAAA,CAAA,cAAA,CAAc,CAAA;AAAA,cACrB,+CAAOA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA,GAAS,CAAIA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA;AAAA;;cAG3BA,KAAA,CAAA,MAAA,CAAA,CAAO,SAAA,iBADfE,WAAA,CAGEF,KAAA,CAAA,kBAAA,CAAA,EAAA;AAAA;gBADA,KAAA,EAAM;AAAA,kCAERE,WAAA,CAA6BF,KAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA;AAAA;;;;UAE/BC,kBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,iBAAOD,KAAA,CAAA,cAAA,CAAc;AAAA;;cACzBG,YAAOC,WAAA;AAAA;;;;UAETH,kBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,iBAAOD,KAAA,CAAA,UAAA,CAAU;AAAA;;cACrBK,UAAA,CAAa,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA;;;;;;;;;;;;;;"}

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

@@ -1,157 +1,260 @@
-import { defineComponent, computed, watch, inject, resolveComponent, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, isRef, withCtx, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, createTextVNode } from 'vue';
+import { defineComponent, computed, inject, getCurrentInstance, watch, nextTick, resolveComponent, createElementBlock, openBlock, normalizeStyle, unref, normalizeClass, createVNode, createElementVNode, withCtx, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, resolveDynamicComponent } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { theme } from 'ant-design-vue';
 import { storeToRefs } from 'pinia';
 import { AppContextKey } from '../layout/AppContext.mjs';
 import Search from './Search.mjs';
-import { ReloadOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import { useNavTabStore } from '@ditari/store';
-import { css } from '@emotion/css';
+import { ReloadOutlined, CloseOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons-vue';
+import { useAppStore, useNavTabStore } from '@ditari/store';
+import { css, cx } from '@emotion/css';
 
 "use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const _hoisted_1 = { class: "d-tabs-nav" };
-const _hoisted_2 = {
+const _hoisted_2 = { class: "tab-item-container" };
+const _hoisted_3 = {
   key: 0,
   class: "tab-item"
 };
-const _hoisted_3 = { class: "tab-item" };
-const _hoisted_4 = {
-  key: 2,
+const _hoisted_4 = { class: "tab-item" };
+const _hoisted_5 = { style: { "margin-left": "10px" } };
+const _hoisted_6 = {
+  key: 0,
   class: "tab-close"
 };
-const _hoisted_5 = ["onClick"];
+const _hoisted_7 = ["onClick"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Tab",
   setup(__props) {
-    const { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();
-    const {
-      activeKey,
-      list,
-      closeBtnStatus,
-      onChange,
-      onClose
-    } = useTab();
-    const { enableTabContextMenu, onContextMenuClick } = useTabsContextMenu();
     function useStyle() {
       const { useToken } = theme;
       const { token } = useToken();
-      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};
+      const appStore = useAppStore();
+      const { tabsTokenStyle } = storeToRefs(appStore);
+      const dynamicVars2 = computed(() => {
+        var _a, _b, _c, _d, _e;
+        return {
+          "--active-tab-color": (_a = tabsTokenStyle == null ? void 0 : tabsTokenStyle.value) == null ? void 0 : _a.colorBgActive,
+          "--splitColor": (_b = tabsTokenStyle == null ? void 0 : tabsTokenStyle.value) == null ? void 0 : _b.colorSplit,
+          "--active-text-color": (_c = tabsTokenStyle == null ? void 0 : tabsTokenStyle.value) == null ? void 0 : _c.colorTextActive,
+          "--active-shadow-color": (_d = tabsTokenStyle == null ? void 0 : tabsTokenStyle.value) == null ? void 0 : _d.colorShadowActive,
+          "--tabs-text-color": (_e = tabsTokenStyle == null ? void 0 : tabsTokenStyle.value) == null ? void 0 : _e.colorTabsText
+        };
+      });
+      const tabsNavStyle2 = computed(
+        () => css`
+      --active-tab-color: var(--active-tab-color);
+      --splitColor: var(--splitColor);
+      --active-text-color: var(--active-text-color);
+      --active-shadow-color: var(--active-shadow-color);
+      --tabs-text-color: var(--tabs-text-color);
       padding-top: 10px;
       display: flex;
-    `;
-      });
-      const tabHoverBgStyle2 = computed(() => {
-        return css`
+    `
+      );
+      const tabHoverBgStyle2 = computed(
+        () => css`
       &:before {
         background: ${token.value.colorPrimaryBgHover};
       }
-    `;
-      });
-      const closeBtnStyle2 = computed(() => {
-        return css`
+    `
+      );
+      const closeBtnStyle2 = computed(
+        () => css`
       &:hover {
         background: ${token.value.colorPrimaryBorderHover};
         border-radius: 50%;
       }
-    `;
-      });
+    `
+      );
       return {
         tabsNavStyle: tabsNavStyle2,
         tabHoverBgStyle: tabHoverBgStyle2,
-        closeBtnStyle: closeBtnStyle2
+        closeBtnStyle: closeBtnStyle2,
+        dynamicVars: dynamicVars2
       };
     }
-    function useTab() {
+    function useTabAndMenu() {
       const route = useRoute();
       const router = useRouter();
       const store = useNavTabStore();
-      const { list: list2, activeKey: activeKey2 } = storeToRefs(store);
-      const { save, deleteTabs } = store;
+      const appContext = inject(
+        AppContextKey,
+        null
+      );
+      const { list: rawList, activeKey: activeKey2 } = storeToRefs(store);
+      const instance = getCurrentInstance();
+      const t = (key) => {
+        const fallback = {
+          reload: "\u5237\u65B0",
+          other: "\u5173\u95ED\u5176\u5B83",
+          selfClose: "\u5173\u95ED",
+          left: "\u5173\u95ED\u5DE6\u4FA7\u6807\u7B7E",
+          right: "\u5173\u95ED\u53F3\u4FA7\u6807\u7B7E"
+        };
+        const globalT = instance == null ? void 0 : instance.appContext.config.globalProperties.$t;
+        const i18nKey = `common.tabsContextMenu.${key}`;
+        if (typeof globalT === "function") {
+          const result = globalT(i18nKey);
+          if (result !== i18nKey) return result;
+        }
+        return fallback[key] || key;
+      };
+      const computedList = computed(() => {
+        const total = rawList.value.length;
+        return rawList.value.map((item, index) => {
+          var _a, _b;
+          const isFirst = index === 0;
+          const isLast = index === total - 1;
+          const isOnly = total === 1;
+          const canCloseSelf = !((_a = item.meta) == null ? void 0 : _a.keepOpen) && !isOnly;
+          const hasLeftClosable = rawList.value.slice(0, index).some((i) => {
+            var _a2;
+            return !((_a2 = i.meta) == null ? void 0 : _a2.keepOpen);
+          });
+          const hasRightClosable = rawList.value.slice(index + 1).some((i) => {
+            var _a2;
+            return !((_a2 = i.meta) == null ? void 0 : _a2.keepOpen);
+          });
+          const hasOtherClosable = rawList.value.some(
+            (i) => {
+              var _a2;
+              return i.fullPath !== item.fullPath && !((_a2 = i.meta) == null ? void 0 : _a2.keepOpen);
+            }
+          );
+          return __spreadProps(__spreadValues({}, item), {
+            closeBtnVisible: !((_b = item.meta) == null ? void 0 : _b.keepOpen) && !isOnly,
+            menus: [
+              {
+                key: "reload",
+                title: t("reload"),
+                icon: ReloadOutlined,
+                disabled: false
+              },
+              {
+                key: "selfClose",
+                title: t("selfClose"),
+                icon: CloseOutlined,
+                disabled: !canCloseSelf
+              },
+              {
+                key: "other",
+                title: t("other"),
+                icon: CloseOutlined,
+                disabled: !hasOtherClosable
+              },
+              {
+                key: "left",
+                title: t("left"),
+                icon: VerticalRightOutlined,
+                disabled: isFirst || !hasLeftClosable
+              },
+              {
+                key: "right",
+                title: t("right"),
+                icon: VerticalLeftOutlined,
+                disabled: isLast || !hasRightClosable
+              }
+            ]
+          });
+        });
+      });
       watch(
         () => route.fullPath,
         (val) => {
-          save(route);
-          activeKey2.value = val;
+          store.save(route);
+          nextTick(() => {
+            activeKey2.value = val;
+          });
         },
-        {
-          immediate: true
-        }
+        { immediate: true }
       );
       const onChange2 = (key) => {
-        if (key !== route.path) {
-          const rs = list2.value.filter(
-            (item) => item.fullPath === key
-          )[0];
-          router.push(rs);
+        const targetKey = String(key);
+        if (targetKey !== route.path) {
+          const rs = rawList.value.find(
+            (item) => item.fullPath === targetKey
+          );
+          if (rs) router.push(rs);
         }
       };
       const onClose2 = ($event, key) => {
         if (!key) return;
         $event.stopPropagation();
-        deleteTabs(key);
-        const backRoute = list2.value[list2.value.length - 1];
-        if (backRoute.fullPath) {
+        store.deleteTabs(key);
+        const backRoute = rawList.value[rawList.value.length - 1];
+        if (backRoute == null ? void 0 : backRoute.fullPath)
           router.push(backRoute.fullPath);
-        }
-      };
-      const closeBtnStatus2 = (item) => {
-        var _a;
-        if ((_a = item.meta) == null ? void 0 : _a.keepOpen) {
-          return false;
-        } else {
-          return list2.value.length !== 1;
-        }
       };
-      return {
-        activeKey: activeKey2,
-        list: list2,
-        closeBtnStatus: closeBtnStatus2,
-        onChange: onChange2,
-        onClose: onClose2
-      };
-    }
-    function useTabsContextMenu() {
-      const appContext = inject(
-        AppContextKey,
-        null
-      );
-      const store = useNavTabStore();
-      const router = useRouter();
       const onContextMenuClick2 = ({ key }, item) => {
-        var _a, _b, _c, _d;
+        var _a;
         const targetKey = item.fullPath;
+        if (!targetKey) return;
         switch (key) {
           case "reload":
             (_a = appContext == null ? void 0 : appContext.onReloadPage) == null ? void 0 : _a.call(appContext, item);
             break;
+          case "selfClose":
+            store.deleteTabs(targetKey);
+            if (activeKey2.value === targetKey) {
+              const last = rawList.value[rawList.value.length - 1];
+              if (last == null ? void 0 : last.fullPath) router.push(last.fullPath);
+            }
+            break;
           case "other":
-            (_b = store.closeOtherTabs) == null ? void 0 : _b.call(store, targetKey);
-            router.push(targetKey);
+            store.closeOtherTabs(targetKey);
+            if (activeKey2.value !== targetKey)
+              router.push(targetKey);
             break;
           case "left":
-            (_c = store.closeLeftTabs) == null ? void 0 : _c.call(store, targetKey);
-            router.push(targetKey);
+            store.closeLeftTabs(targetKey);
             break;
           case "right":
-            (_d = store.closeRightTabs) == null ? void 0 : _d.call(store, targetKey);
-            router.push(targetKey);
+            store.closeRightTabs(targetKey);
             break;
         }
       };
       return {
+        activeKey: activeKey2,
+        list: computedList,
         enableTabContextMenu: (appContext == null ? void 0 : appContext.enableTabContextMenu) || false,
+        onChange: onChange2,
+        onClose: onClose2,
         onContextMenuClick: onContextMenuClick2
       };
     }
+    const {
+      tabsNavStyle,
+      tabHoverBgStyle,
+      closeBtnStyle,
+      dynamicVars
+    } = useStyle();
+    const {
+      activeKey,
+      list,
+      enableTabContextMenu,
+      onChange,
+      onClose,
+      onContextMenuClick
+    } = useTabAndMenu();
     return (_ctx, _cache) => {
       const _component_a_menu_item = resolveComponent("a-menu-item");
       const _component_a_menu = resolveComponent("a-menu");
@@ -161,17 +264,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(
         "div",
         {
-          class: normalizeClass(["tabs-nav-wrapper", unref(tabsNavStyle)])
+          class: normalizeClass(["tabs-nav-wrapper", unref(cx)(unref(tabsNavStyle))]),
+          style: normalizeStyle(unref(dynamicVars))
         },
         [
           createVNode(unref(Search)),
           createElementVNode("div", _hoisted_1, [
             createVNode(_component_a_tabs, {
               size: "small",
-              activeKey: unref(activeKey),
-              "onUpdate:activeKey": _cache[0] || (_cache[0] = ($event) => isRef(activeKey) ? activeKey.value = $event : null),
+              "active-key": unref(activeKey),
               type: "card",
-              "hide-add": "",
+              "hide-add": true,
               onChange: unref(onChange)
             }, {
               default: withCtx(() => [
@@ -196,108 +299,89 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                             2
                             /* CLASS */
                           ),
-                          _cache[5] || (_cache[5] = createElementVNode(
+                          _cache[0] || (_cache[0] = createElementVNode(
                             "div",
                             { class: "tab-dividers" },
                             null,
                             -1
                             /* CACHED */
                           )),
-                          !unref(enableTabContextMenu) ? (openBlock(), createElementBlock(
-                            "div",
-                            _hoisted_2,
-                            toDisplayString(((_a = item.meta) == null ? void 0 : _a.title) || "\u65E0\u6807\u9898"),
-                            1
-                            /* TEXT */
-                          )) : createCommentVNode("v-if", true),
-                          unref(enableTabContextMenu) ? (openBlock(), createBlock(
-                            _component_a_dropdown,
-                            {
-                              key: 1,
-                              trigger: ["contextmenu"]
-                            },
-                            {
-                              overlay: withCtx(() => [
-                                createVNode(_component_a_menu, {
-                                  onClick: (e) => unref(onContextMenuClick)(e, item)
-                                }, {
-                                  default: withCtx(() => [
-                                    createVNode(_component_a_menu_item, { key: "reload" }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReloadOutlined)),
-                                        _cache[1] || (_cache[1] = createTextVNode(
-                                          " \u91CD\u65B0\u52A0\u8F7D ",
-                                          -1
-                                          /* CACHED */
-                                        ))
-                                      ]),
-                                      _: 1
-                                      /* STABLE */
-                                    }),
-                                    createVNode(_component_a_menu_item, { key: "other" }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(CloseOutlined)),
-                                        _cache[2] || (_cache[2] = createTextVNode(
-                                          " \u5173\u95ED\u5176\u4ED6 ",
-                                          -1
-                                          /* CACHED */
-                                        ))
-                                      ]),
-                                      _: 1
-                                      /* STABLE */
-                                    }),
-                                    createVNode(_component_a_menu_item, { key: "right" }, {
-                                      default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                                        createTextVNode(
-                                          "\u5173\u95ED\u53F3\u4FA7\u6807\u7B7E ",
-                                          -1
-                                          /* CACHED */
-                                        )
-                                      ])]),
-                                      _: 1
-                                      /* STABLE */
-                                    }),
-                                    createVNode(_component_a_menu_item, { key: "left" }, {
-                                      default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                                        createTextVNode(
-                                          "\u5173\u95ED\u5DE6\u4FA7\u6807\u7B7E ",
-                                          -1
-                                          /* CACHED */
-                                        )
-                                      ])]),
-                                      _: 1
-                                      /* STABLE */
-                                    })
-                                  ]),
-                                  _: 1
-                                  /* STABLE */
-                                }, 8, ["onClick"])
-                              ]),
-                              default: withCtx(() => {
-                                var _a2;
-                                return [
-                                  createElementVNode(
-                                    "div",
-                                    _hoisted_3,
-                                    toDisplayString(((_a2 = item.meta) == null ? void 0 : _a2.title) || "\u65E0\u6807\u9898"),
-                                    1
-                                    /* TEXT */
-                                  )
-                                ];
-                              }),
-                              _: 2
-                              /* DYNAMIC */
-                            },
-                            1024
-                            /* DYNAMIC_SLOTS */
-                          )) : createCommentVNode("v-if", true),
-                          unref(closeBtnStatus)(item) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                          createElementVNode("div", _hoisted_2, [
+                            !unref(enableTabContextMenu) ? (openBlock(), createElementBlock(
+                              "div",
+                              _hoisted_3,
+                              toDisplayString(((_a = item.meta) == null ? void 0 : _a.title) || "\u65E0\u6807\u9898"),
+                              1
+                              /* TEXT */
+                            )) : (openBlock(), createBlock(
+                              _component_a_dropdown,
+                              {
+                                key: 1,
+                                trigger: ["contextmenu"],
+                                "destroy-popup-on-hide": true
+                              },
+                              {
+                                overlay: withCtx(() => [
+                                  createVNode(_component_a_menu, {
+                                    onClick: (e) => unref(onContextMenuClick)(e, item)
+                                  }, {
+                                    default: withCtx(() => [
+                                      (openBlock(true), createElementBlock(
+                                        Fragment,
+                                        null,
+                                        renderList(item.menus, (menu) => {
+                                          return openBlock(), createBlock(_component_a_menu_item, {
+                                            key: menu.key,
+                                            disabled: menu.disabled
+                                          }, {
+                                            default: withCtx(() => [
+                                              menu.icon ? (openBlock(), createBlock(resolveDynamicComponent(menu.icon), { key: 0 })) : createCommentVNode("v-if", true),
+                                              createElementVNode(
+                                                "span",
+                                                _hoisted_5,
+                                                toDisplayString(menu.title),
+                                                1
+                                                /* TEXT */
+                                              )
+                                            ]),
+                                            _: 2
+                                            /* DYNAMIC */
+                                          }, 1032, ["disabled"]);
+                                        }),
+                                        128
+                                        /* KEYED_FRAGMENT */
+                                      ))
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1032, ["onClick"])
+                                ]),
+                                default: withCtx(() => {
+                                  var _a2;
+                                  return [
+                                    createElementVNode(
+                                      "div",
+                                      _hoisted_4,
+                                      toDisplayString(((_a2 = item.meta) == null ? void 0 : _a2.title) || "\u65E0\u6807\u9898"),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ];
+                                }),
+                                _: 2
+                                /* DYNAMIC */
+                              },
+                              1024
+                              /* DYNAMIC_SLOTS */
+                            ))
+                          ]),
+                          item.closeBtnVisible ? (openBlock(), createElementBlock("div", _hoisted_6, [
                             createElementVNode("div", {
                               class: normalizeClass(["close-btn", unref(closeBtnStyle)]),
                               onClick: ($event) => unref(onClose)($event, item.fullPath)
                             }, [
                               createVNode(unref(CloseOutlined))
-                            ], 10, _hoisted_5)
+                            ], 10, _hoisted_7)
                           ])) : createCommentVNode("v-if", true)
                         ];
                       }),
@@ -311,11 +395,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["activeKey", "onChange"])
+            }, 8, ["active-key", "onChange"])
           ])
         ],
-        2
-        /* CLASS */
+        6
+        /* CLASS, STYLE */
       );
     };
   }