@ditari/bsui 5.0.2 → 5.0.4

package/dist/cjs/components/tab/Search.cjs

@@ -0,0 +1,241 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var antDesignVue = require('ant-design-vue');
+var core = require('@vueuse/core');
+var iconsVue = require('@ant-design/icons-vue');
+var store = require('@ditari/store');
+var css = require('@emotion/css');
+var dayjs_min = require('../../_virtual/dayjs.min.cjs');
+
+"use strict";
+var Search = /* @__PURE__ */ vue.defineComponent({
+  name: "Search",
+  setup() {
+    const {
+      useToken
+    } = antDesignVue.theme;
+    const {
+      token
+    } = useToken();
+    const {
+      getList,
+      deleteTabs
+    } = store.useNavTabStore();
+    const keys = core.useMagicKeys();
+    const shiftCtrlA = keys["Shift+Ctrl+S"];
+    const open = vue.ref(false);
+    const {
+      y
+    } = core.useWindowScroll();
+    const navTabList = vue.computed(() => {
+      return getList.sort((a, b) => (b.openTime || 0) - (a.openTime || 0));
+    });
+    vue.watch(shiftCtrlA, (v) => {
+      if (v) {
+        open.value = !open.value;
+      }
+    });
+    vue.watch(() => y.value, (val) => {
+      if (val > 0) {
+        open.value = false;
+      }
+    });
+    const buttonToken = {
+      borderRadius: "12px"
+    };
+    const onCloseTab = (path) => {
+      deleteTabs(path);
+    };
+    const searchStyle = vue.computed(() => css.css`
+        padding: 10px;
+        border-bottom: 1px solid ${token.value.colorBorder};
+      `);
+    const searchListStyle = vue.computed(() => css.css`
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        max-height: 400px;
+        overflow-y: overlay;
+
+        /* 整个滚动条 */
+
+        ::-webkit-scrollbar {
+          width: 4px; /* 垂直滚动条的宽度 */
+          height: 4px; /* 水平滚动条的高度 */
+        }
+
+        /* 滚动条轨道 */
+
+        ::-webkit-scrollbar-track {
+          background: transparent; /* 轨道背景色 */
+          border-radius: 0; /* 轨道圆角 */
+        }
+
+        /* 滚动条滑块 */
+
+        ::-webkit-scrollbar-thumb {
+          //background: #888; /* 滑块背景色 */
+          // border-radius: 6px; /* 滑块圆角 */
+          border: 3px solid ${token.value.colorPrimaryBorder}; /* 滑块边框 */
+        }
+
+        /* 滚动条滑块悬停效果 */
+
+        ::-webkit-scrollbar-thumb:hover {
+          background: red; /* 滑块悬停背景色 */
+        }
+
+        .search-title {
+          position: sticky;
+          top: 0;
+          padding: 10px;
+        }
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+
+          li {
+            display: flex;
+            align-items: center;
+            padding: 4px 10px;
+            width: 400px;
+
+            &:hover {
+              background-color: red;
+
+              .close-wrapper {
+                display: block;
+              }
+            }
+
+            .icon {
+              width: 42px;
+              height: 42px;
+              border-radius: 10px;
+              background-color: ${token.value.colorPrimary};
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+
+            .content {
+              padding-left: 10px;
+
+              .time-ago {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+
+                .hostname {
+                  max-width: 180px;
+                  overflow: hidden;
+                }
+
+                .split {
+                  width: 4px;
+                  height: 4px;
+                  display: inline-block;
+                  background-color: ${token.value.colorPrimary};
+                  border-radius: 10px;
+                  margin: 0 6px;
+                }
+              }
+            }
+
+            .close-wrapper {
+              display: none;
+              flex: 1;
+              text-align: right;
+
+              .close-btn {
+                display: inline-block;
+                width: 22px;
+                height: 22px;
+                border-radius: 50%;
+                text-align: center;
+
+                &:hover {
+                  background-color: blue;
+                }
+              }
+            }
+          }
+        }
+      `);
+    function timeAgo(providedTime) {
+      const now = dayjs_min.default();
+      const diffInSeconds = now.diff(providedTime, "second");
+      const diffInMinutes = now.diff(providedTime, "minute");
+      const diffInHours = now.diff(providedTime, "hour");
+      if (diffInMinutes < 1) {
+        return `${diffInSeconds} \u79D2\u524D`;
+      } else if (diffInHours < 1) {
+        return `${diffInMinutes} \u5206\u949F\u524D`;
+      } else {
+        return `${diffInHours} \u5C0F\u65F6\u524D`;
+      }
+    }
+    return () => vue.createVNode("div", null, [vue.createVNode(vue.resolveComponent("a-popover"), {
+      "open": open.value,
+      "onUpdate:open": ($event) => open.value = $event,
+      "placement": "bottomRight",
+      "trigger": "click",
+      "overlayClassName": "search-popover-wrapper"
+    }, {
+      default: () => vue.createVNode("div", null, [vue.createVNode(vue.resolveComponent("a-button"), {
+        "style": {
+          borderRadius: "10px"
+        },
+        "icon": vue.h(iconsVue.DownOutlined),
+        "title": "\u641C\u7D22\u6807\u7B7E\u9875"
+      }, null)]),
+      content: () => vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+        "class": searchStyle.value
+      }, [vue.createVNode(vue.resolveComponent("a-input"), {
+        "placeholder": "\u641C\u7D22\u6807\u7B7E\u9875",
+        "bordered": false
+      }, {
+        prefix: () => vue.createVNode(iconsVue.SearchOutlined, null, null),
+        suffix: () => vue.createVNode("span", {
+          "style": {
+            color: "rgba(0, 0, 0, 0.45)"
+          }
+        }, [vue.createTextVNode("Ctrl+Shift+S")])
+      })]), vue.createVNode("div", {
+        "class": searchListStyle.value
+      }, [vue.createVNode("span", {
+        "class": "search-title"
+      }, [vue.createTextVNode("\u6253\u5F00\u7684\u6807\u7B7E\u9875")]), vue.createVNode("ul", null, [navTabList.value.map((item) => {
+        var _a, _b;
+        return vue.createVNode("li", null, [vue.createVNode("div", {
+          "class": "icon"
+        }, [vue.createVNode(iconsVue.UnorderedListOutlined, null, null)]), vue.createVNode("div", {
+          "class": "content"
+        }, [vue.createVNode("div", {
+          "class": "title"
+        }, [(_a = item.meta) == null ? void 0 : _a.title]), vue.createVNode("div", {
+          "class": "time-ago"
+        }, [vue.createVNode("span", {
+          "class": "hostname"
+        }, [window.location.hostname + "" + item.path]), vue.createVNode("span", {
+          "class": "split"
+        }, null), vue.createVNode("span", {
+          "class": "time"
+        }, [timeAgo((_b = item.openTime) != null ? _b : 0)])])]), vue.createVNode("div", {
+          "class": "close-wrapper"
+        }, [vue.createVNode("span", {
+          "class": "close-btn",
+          "onClick": () => onCloseTab(item.fullPath || "")
+        }, [vue.createVNode(iconsVue.CloseOutlined, null, null)])])]);
+      })])])])
+    })]);
+  }
+});
+
+exports.default = Search;
+//# sourceMappingURL=Search.cjs.map

package/dist/cjs/components/tab/Search.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.cjs","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":["defineComponent","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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"}

package/dist/cjs/components/tab/Tab.vue2.cjs

@@ -6,49 +6,51 @@ var vue = require('vue');
 var vueRouter = require('vue-router');
 var antDesignVue = require('ant-design-vue');
 var pinia = require('pinia');
+var Search = require('./Search.cjs');
 var iconsVue = require('@ant-design/icons-vue');
 var store = require('@ditari/store');
 var css = require('@emotion/css');
 
 "use strict";
 const _hoisted_1 = { class: "d-tabs-nav" };
-const _hoisted_2 = { style: { "padding": "0 10px" } };
-const _hoisted_3 = { class: "tab-item" };
-const _hoisted_4 = { class: "tab-close" };
-const _hoisted_5 = ["onClick"];
+const _hoisted_2 = { class: "tab-item" };
+const _hoisted_3 = { class: "tab-close" };
+const _hoisted_4 = ["onClick"];
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Tab",
   setup(__props) {
-    const { token, tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();
+    const { tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();
     const { activeKey, list, onChange, onClose } = useTab();
     function useStyle() {
       const { useToken } = antDesignVue.theme;
-      const { token: token2 } = useToken();
-      const dynamicValue = "green";
+      const { token } = useToken();
+      const activeTabColor = vue.computed(() => token.value.colorBgLayout);
+      const splitColor = vue.computed(() => token.value.colorBorderSecondary);
       const tabsNavStyle2 = vue.computed(() => {
         return css.css`
-      --my-color: ${dynamicValue};
-      background: ${token2.value.colorBgContainer};
+      --active-tab-color: ${activeTabColor.value};
+      --splitColor: ${splitColor.value};
+      background: ${token.value.colorBgContainer};
       padding-top: 10px;
+      display: flex;
     `;
       });
       const tabHoverBgStyle2 = vue.computed(() => {
         return css.css`
       &:before {
-        background: ${token2.value.colorPrimaryBgHover};
+        background: ${token.value.colorPrimaryBgHover};
       }
     `;
       });
       const closeBtnStyle2 = vue.computed(() => {
         return css.css`
       &:hover {
-        background: ${token2.value.colorPrimaryBorderHover};
+        background: ${token.value.colorPrimaryBorderHover};
         border-radius: 50%;
       }
     `;
       });
       return {
-        token: token2,
         tabsNavStyle: tabsNavStyle2,
         tabHoverBgStyle: tabHoverBgStyle2,
         closeBtnStyle: closeBtnStyle2
@@ -101,9 +103,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       };
     }
     return (_ctx, _cache) => {
-      const _component_a_input = vue.resolveComponent("a-input");
-      const _component_a_button = vue.resolveComponent("a-button");
-      const _component_a_popover = vue.resolveComponent("a-popover");
       const _component_a_tab_pane = vue.resolveComponent("a-tab-pane");
       const _component_a_tabs = vue.resolveComponent("a-tabs");
       return vue.openBlock(), vue.createElementBlock(
@@ -112,6 +111,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(["tabs-nav-wrapper", vue.unref(tabsNavStyle)])
         },
         [
+          vue.createVNode(vue.unref(Search.default)),
           vue.createElementVNode("div", _hoisted_1, [
             vue.createVNode(_component_a_tabs, {
               size: "small",
@@ -121,45 +121,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "hide-add": "",
               onChange: vue.unref(onChange)
             }, {
-              leftExtra: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_2, [
-                  vue.createVNode(_component_a_popover, { placement: "bottomRight" }, {
-                    content: vue.withCtx(() => [
-                      vue.createVNode(_component_a_input, {
-                        bordered: false,
-                        placeholder: "\u641C\u7D22\u6807\u7B7E\u9875"
-                      }, {
-                        prefix: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.SearchOutlined))
-                        ]),
-                        suffix: vue.withCtx(() => [
-                          vue.createElementVNode(
-                            "span",
-                            {
-                              style: vue.normalizeStyle({ color: vue.unref(token).colorTextTertiary })
-                            },
-                            "Ctrl+Shift+S",
-                            4
-                            /* STYLE */
-                          )
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ]),
-                    default: vue.withCtx(() => [
-                      vue.createVNode(_component_a_button, {
-                        size: "small",
-                        shape: "circle",
-                        icon: vue.h(vue.unref(iconsVue.SearchOutlined)),
-                        title: "\u641C\u7D22\u6807\u7B7E\u9875"
-                      }, null, 8, ["icon"])
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ])
-              ]),
               default: vue.withCtx(() => [
                 (vue.openBlock(true), vue.createElementBlock(
                   vue.Fragment,
@@ -191,18 +152,18 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           )),
                           vue.createElementVNode(
                             "div",
-                            _hoisted_3,
+                            _hoisted_2,
                             vue.toDisplayString(((_a = item.meta) == null ? void 0 : _a.title) || "\u65E0\u6807\u9898"),
                             1
                             /* TEXT */
                           ),
-                          vue.createElementVNode("div", _hoisted_4, [
+                          vue.createElementVNode("div", _hoisted_3, [
                             vue.createElementVNode("div", {
                               class: vue.normalizeClass(["close-btn", vue.unref(closeBtnStyle)]),
                               onClick: ($event) => vue.unref(onClose)($event, item.fullPath)
                             }, [
                               vue.createVNode(vue.unref(iconsVue.CloseOutlined))
-                            ], 10, _hoisted_5)
+                            ], 10, _hoisted_4)
                           ])
                         ];
                       }),

package/dist/cjs/components/tab/Tab.vue2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue2.cjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, h, 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 { CloseOutlined, SearchOutlined } 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 { token, tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();\r\n\r\nconst { activeKey, list, onChange, onClose } = useTab();\r\n\r\nfunction useStyle(): {\r\n  token: ComputedRef<GlobalToken>;\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  const dynamicValue = \"green\"; // 动态值，可以是从 state 或 props 中获取的\r\n  const tabsNavStyle = computed(() => {\r\n    return css`\r\n      --my-color: ${dynamicValue};\r\n      background: ${token.value.colorBgContainer};\r\n      padding-top: 10px;\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    token,\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.path === 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    <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        <template #leftExtra>\r\n          <div style=\"padding: 0 10px\">\r\n            <a-popover placement=\"bottomRight\">\r\n              <template #content>\r\n                <a-input :bordered=\"false\" placeholder=\"搜索标签页\">\r\n                  <template #prefix>\r\n                    <SearchOutlined />\r\n                  </template>\r\n                  <template #suffix>\r\n                    <span :style=\"{ color: token.colorTextTertiary }\"\r\n                      >Ctrl+Shift+S</span\r\n                    >\r\n                  </template>\r\n                </a-input>\r\n              </template>\r\n              <a-button\r\n                size=\"small\"\r\n                shape=\"circle\"\r\n                :icon=\"h(SearchOutlined)\"\r\n                title=\"搜索标签页\"\r\n              />\r\n            </a-popover>\r\n          </div>\r\n        </template>\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":["theme","token","tabsNavStyle","computed","css","tabHoverBgStyle","closeBtnStyle","useRoute","useRouter","store","useNavTabStore","list","activeKey","storeToRefs","watch","onChange","onClose"],"mappings":"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"}
+{"version":3,"file":"Tab.vue2.cjs","sources":["../../../../src/components/tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef, ref, 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.path === 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":["theme","computed","tabsNavStyle","css","tabHoverBgStyle","closeBtnStyle","useRoute","useRouter","store","useNavTabStore","list","activeKey","storeToRefs","watch","onChange","onClose"],"mappings":"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"}

package/dist/cjs/components/table/Table.cjs

@@ -86,6 +86,7 @@ const defaultConfig = {
 const paginationStyle = css.css`
   display: flex;
   justify-content: center;
+  padding-top: 6px;
 `;
 const DTable = /* @__PURE__ */ vue.defineComponent({
   name: "DTable",
@@ -161,7 +162,7 @@ const DTable = /* @__PURE__ */ vue.defineComponent({
         var _a, _b, _c;
         tableEl = (_a = tableRef2 == null ? void 0 : tableRef2.value) == null ? void 0 : _a.$el;
         headerHeight = useEleHeight(tableEl.getElementsByClassName("ant-table-header")[0]);
-        const paginationEl = tableEl.getElementsByClassName("ant-pagination")[0];
+        const paginationEl = tableEl.getElementsByClassName("d-pagination")[0];
         let paginationHeight = 0;
         if (paginationEl) {
           paginationEl.style.marginBottom = "0";
@@ -349,11 +350,8 @@ const DTable = /* @__PURE__ */ vue.defineComponent({
           scrollToFirstRowOnChange: true
         }
       }, tableSlots), vue.createVNode("div", {
-        "class": paginationStyle
+        "class": [paginationStyle, "d-pagination"]
       }, [pagination && vue.createVNode(antDesignVue.Pagination, {
-        "style": {
-          marginTop: "16px"
-        },
         "current": paginationConfig.value.current,
         "onUpdate:current": ($event) => paginationConfig.value.current = $event,
         "pageSize": paginationConfig.value.pageSize,
@@ -367,7 +365,8 @@ const DTable = /* @__PURE__ */ vue.defineComponent({
         "default-page-size": paginationConfig.value.defaultPageSize,
         "page-size-options": paginationConfig.value.pageSizeOptions,
         "show-total": paginationConfig.value.showTotal,
-        "onChange": onPaginationChange
+        "onChange": onPaginationChange,
+        "showLessItems": true
       }, null)])]
     });
   }