@ditari/bsui 1.1.47 → 5.0.1

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/index.ts"],"sourcesContent":["import type { App } from \"vue\";\nimport { createPinia } from \"pinia\";\nimport { createPersistedState } from \"pinia-plugin-persistedstate\";\n\nimport * as components from \"./components\";\nexport * from \"./components\";\n\n\nexport interface MenuIcon {\n  componentName: string | \"nativeHtml\";\n  type: string;\n}\nexport interface Options {\n  menuIcon: MenuIcon;\n  prop?: string;\n}\nconst c: any = components;\nexport const install = function (app: App, opts: Options) {\n  Object.keys(c).forEach((key) => {\n    const component = c[key];\n    if (component.install) {\n      app.use(component);\n    }\n  });\n  //注册pinia\n  const pinia = createPinia();\n  //pinia启用持久化\n  pinia.use(\n    createPersistedState({\n      storage: sessionStorage\n    })\n  );\n  app.use(pinia);\n  app.provide(\"menuIcon\", opts.menuIcon || {});\n\n  // // 创建 Web Worker 连接池实例\n  // const workerPool = new WorkerPool(DicWorker, 2); // 这里设置连接池的大小为 5\n  // workerPool.initialize();\n  // // 注入连接池实例\n  // app.provide(\"dicWorkerPool\", workerPool);\n  // // 创建 Web Worker 连接池实例\n  // const repWorkerPool = new WorkerPool(ReplaceWorker, 2); // 这里设置连接池的大小为 5\n  // repWorkerPool.initialize();\n  // // 注入连接池实例\n  // app.provide(\"repWorkerPool\", repWorkerPool);\n};\n\nexport default {\n  install\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,CAAS,GAAA,UAAA,CAAA;AACF,MAAA,OAAA,GAAU,SAAU,GAAA,EAAU,IAAe,EAAA;AACxD,EAAA,MAAA,CAAO,IAAK,CAAA,CAAC,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AAC9B,IAAM,MAAA,SAAA,GAAY,EAAE,GAAG,CAAA,CAAA;AACvB,IAAA,IAAI,UAAU,OAAS,EAAA;AACrB,MAAA,GAAA,CAAI,IAAI,SAAS,CAAA,CAAA;AAAA,KACnB;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,QAAQ,WAAY,EAAA,CAAA;AAE1B,EAAM,KAAA,CAAA,GAAA;AAAA,IACJ,oBAAqB,CAAA;AAAA,MACnB,OAAS,EAAA,cAAA;AAAA,KACV,CAAA;AAAA,GACH,CAAA;AACA,EAAA,GAAA,CAAI,IAAI,KAAK,CAAA,CAAA;AACb,EAAA,GAAA,CAAI,OAAQ,CAAA,UAAA,EAAY,IAAK,CAAA,QAAA,IAAY,EAAE,CAAA,CAAA;AAY7C,EAAA;AAEA,YAAe;AAAA,EACb,OAAA;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

@@ -1,19 +1 @@
-@import "./theme/variable";
-@import "./grid/style";
-@import "./menu/style";
-@import "./layout/style";
-@import "./table/style";
-@import "./desensitize/style";
-@import "./modal/style";
-html,
-body,
-#app {
-  height: 100%;
-  background: $bg-color;
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none;
-  }
-}
-
-
+@use "./components/tab/style" as *;

package/dist/style/tab/style/index.scss

@@ -0,0 +1,176 @@
+@mixin tab-dividers {
+  .tab-dividers {
+    &::before {
+      opacity: 0;
+    }
+  }
+}
+
+.d-tabs-nav {
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+
+    &:before {
+      border-bottom-width: 0;
+    }
+  }
+
+  .ant-tabs-nav-operations {
+    display: none !important;
+  }
+
+  .ant-tabs-nav-list {
+    .ant-tabs-tab {
+      position: relative;
+      // 要隐藏动画，否则切换激活的时候背景色有延迟
+      transition: none !important;
+      border: 0;
+
+      &:first-child {
+        margin-left: 20px;
+
+        .tab-dividers {
+          &::before {
+            opacity: 0;
+          }
+        }
+      }
+
+      &:nth-last-child(2) {
+        margin-right: 20px;
+      }
+
+      &:before,
+      &:after {
+        position: absolute;
+        bottom: -1px;
+        content: "";
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+        box-shadow: 0 0 0 40px transparent;
+      }
+
+      &:before {
+        left: -30px;
+        clip-path: inset(50% -10px 0 50%);
+      }
+
+      &:after {
+        right: -30px;
+        clip-path: inset(50% 50% 0 -10px);
+      }
+
+      &.ant-tabs-tab-active {
+        // 如果当前标签被激活，那么隐藏分割线
+        @include tab-dividers;
+        border-radius: 10px 10px 0 0 !important;
+
+        &:before,
+        &:after {
+          z-index: 10;
+          box-shadow: 0 0 0 30px #fff;
+        }
+      }
+
+      &:hover {
+        &:not(.ant-tabs-tab-active) {
+          .tab-hover-bg {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: -1;
+
+            &:before {
+              content: "";
+              width: 100%;
+              height: 25px;
+              border-radius: 6px;
+            }
+          }
+
+          @include tab-dividers;
+
+          & + .ant-tabs-tab {
+            @include tab-dividers;
+          }
+        }
+      }
+
+      &:not(.ant-tabs-tab-active) {
+        .close-btn {
+          color: white;
+        }
+
+        .tab-item {
+          color: #fff;
+        }
+      }
+    }
+
+    // 由于 + 是相邻兄弟选择器， 将紧跟在ant-tabs-tab-active后的ant-tabs-tab也隐藏分割线
+    .ant-tabs-tab-active + .ant-tabs-tab {
+      @include tab-dividers;
+    }
+
+    .ant-tabs-tab-btn {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .tab-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .close-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      z-index: 20;
+    }
+
+    .anticon {
+      margin: 0;
+    }
+  }
+
+  .tab-item {
+    padding-right: 30px;
+  }
+
+  .tab-dividers {
+    position: absolute;
+    z-index: 0;
+    height: 14px;
+    left: -2px;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 1px;
+      bottom: 0;
+      width: 2px;
+      opacity: 1;
+      background-color: #fff;
+      border-radius: 10px;
+      transition: opacity 0.2s ease,
+      background-color 0.3s;
+    }
+  }
+}

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.1.47",
-  "description": "",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "version": "5.0.1",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -27,22 +24,5 @@
     },
     "./css/*": "./dist/css/*",
     "./theme/*": "./dist/style/*"
-  },
-  "dependencies": {
-    "@ditari/hooks": "^1.0.10",
-    "@ditari/store": "^1.0.8"
-  },
-  "peerDependencies": {
-    "vue": "^3.3.4",
-    "@ant-design/icons-vue": "^6.1.0",
-    "ant-design-vue": "^3.2.20",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.9",
-    "pinia": "^2.1.4",
-    "pinia-plugin-persistedstate": "^3.1.0",
-    "vue-request": "2.0.0-rc.4",
-    "vue-router": "^4.2.4",
-    "@vueuse/core": "^9.13.0"
-  },
-  "scripts": {}
+  }
 }

package/src/components/index.ts

@@ -0,0 +1,4 @@
+// 使用export * 导出的话，无法导出export default； export * from "./button";
+export * from "./layout";
+export { default as Tab } from "./tab";
+export { default as Table } from "./table";

package/src/components/layout/index.ts

@@ -0,0 +1,15 @@
+import List from "./list";
+import Show from "./show";
+import type { App } from "vue";
+
+List.install = function (app: App) {
+  app.component(List.name!, List);
+  return app;
+};
+
+Show.install = function (app: App) {
+  app.component(Show.name!, Show);
+  return app;
+};
+
+export { List, Show };

package/src/components/layout/list.tsx

@@ -0,0 +1,137 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+import { Card, Flex, Space } from "ant-design-vue";
+import { useElementSize } from "@vueuse/core";
+
+import { css } from "@emotion/css";
+
+const tableRootStyle = css`
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+
+const list = defineComponent({
+  name: "DList",
+  emits: ["update:value", "change"],
+  setup(_, { slots }) {
+    const { tableRef, height, tableVisible, playTableHeight } =
+      useTableHeight();
+
+    const { formRef } = useForm();
+    // 使用 computed 来动态计算样式
+    const maskDivStyle = computed(() => {
+      return css`
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        background: white;
+        display: ${tableVisible.value ? "block" : "none"};
+      `;
+    });
+
+    const tableWrapperStyle = css`
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+    `;
+
+    onMounted(() => {
+      playTableHeight();
+    });
+
+    function useTableHeight() {
+      const tableRef = ref();
+      const height = ref(0);
+      const tableVisible = ref(true);
+
+      function playTableHeight() {
+        tableVisible.value = true;
+        height.value = tableRef?.value?.$el.offsetHeight;
+        nextTick(() => {
+          setTimeout(() => {
+            tableVisible.value = false;
+          }, 10);
+        });
+      }
+
+      return {
+        tableRef,
+        height,
+        tableVisible,
+        playTableHeight
+      };
+    }
+
+    function useForm() {
+      const formRef = ref(null);
+      const { height: formHeight } = useElementSize(formRef);
+      watch(
+        () => formHeight.value,
+        () => {
+          nextTick(() => {
+            playTableHeight();
+          });
+        }
+      );
+
+      return {
+        formRef
+      };
+    }
+
+    return () => (
+      <Flex vertical={true} style={{ height: "100%" }}>
+        {slots.form && (
+          <Card
+            ref={formRef}
+            style={{ marginBottom: "20px" }}
+            bodyStyle={{ padding: "24px 24px 0 24px" }}
+            bordered={false}
+          >
+            {slots.form()}
+          </Card>
+        )}
+
+        <Flex flex={1} vertical={true}>
+          <Card
+            style={{ height: "100%" }}
+            bodyStyle={{ height: "100%" }}
+            bordered={false}
+          >
+            <Flex style={{ height: "100%" }} vertical={true}>
+              <Space style={{ marginBottom: "20px" }}>{slots.tools?.()}</Space>
+              <Flex
+                ref={tableRef}
+                flex={1}
+                style={{ height: "100%" }}
+                vertical={true}
+              >
+                <div class={tableRootStyle}>
+                  <div class={maskDivStyle.value}></div>
+                  <div class={tableWrapperStyle}>
+                    {slots.table?.({ height: height.value })}
+                  </div>
+                </div>
+              </Flex>
+            </Flex>
+          </Card>
+        </Flex>
+      </Flex>
+    );
+  }
+});
+
+export default list;

package/src/components/layout/show.tsx

@@ -0,0 +1,13 @@
+import { defineComponent } from "vue";
+import { Flex } from "ant-design-vue";
+
+const list = defineComponent({
+  name: "DShow",
+  emits: ["update:value", "change"],
+  setup(_, { emit }) {
+    emit("update:value", "ddd");
+    return () => <Flex vertical={true}>show</Flex>;
+  }
+});
+
+export default list;

package/src/components/readme.md

@@ -0,0 +1,4 @@
+# 导出学习记录
+
+- export * from ''; 无法导出export default；只能导出export {}
+- export { default as ... } 可以显式导出 default

package/src/components/tab/Tab.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, type ComputedRef, h, ref } from "vue";
+import { theme } from "ant-design-vue";
+
+import { CloseOutlined, SearchOutlined } from "@ant-design/icons-vue";
+import { css } from "@emotion/css";
+import type { GlobalToken } from "ant-design-vue/es/theme/interface";
+
+const { token, tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();
+const { activeKey } = useTabState();
+
+function useStyle() {
+  const { useToken } = theme;
+  const { token }: { token: ComputedRef<GlobalToken> } = useToken();
+
+  const tabsNavStyle = computed(() => {
+    return css`
+      background: ${token.value.colorPrimary};
+      padding-top: 10px;
+    `;
+  });
+
+  const tabHoverBgStyle = computed(() => {
+    return css`
+      &:before {
+        background: ${token.value.colorPrimaryBgHover};
+      }
+    `;
+  });
+
+  const closeBtnStyle = computed(() => {
+    return css`
+      &:hover {
+        background: ${token.value.colorPrimaryBorderHover};
+        border-radius: 50%;
+      }
+    `;
+  });
+
+  return {
+    token,
+    tabsNavStyle,
+    tabHoverBgStyle,
+    closeBtnStyle
+  };
+}
+
+function useTabState() {
+  const activeKey = ref();
+  return {
+    activeKey
+  };
+}
+</script>
+<template>
+  <div class="tabs-nav-wrapper" :class="tabsNavStyle">
+    <div class="d-tabs-nav">
+      <a-tabs size="small" v-model:activeKey="activeKey" type="card" hide-add>
+        <template #leftExtra>
+          <div style="padding: 0 10px">
+            <a-popover placement="bottomRight">
+              <template #content>
+                <a-input :bordered="false" placeholder="搜索标签页">
+                  <template #prefix>
+                    <SearchOutlined />
+                  </template>
+                  <template #suffix>
+                    <span :style="{ color: token.colorTextTertiary }"
+                      >Ctrl+Shift+S</span
+                    >
+                  </template>
+                </a-input>
+              </template>
+              <a-button
+                size="small"
+                shape="circle"
+                :icon="h(SearchOutlined)"
+                title="搜索标签页"
+              />
+            </a-popover>
+          </div>
+        </template>
+        <a-tab-pane
+          :key="item"
+          :closable="false"
+          v-for="item in 50"
+          :class="{ active: activeKey === item }"
+        >
+          <template #tab>
+            <div class="tab-hover-bg" :class="tabHoverBgStyle"></div>
+            <div class="tab-dividers"></div>
+            <div class="tab-item">{{ item }}</div>
+            <div class="tab-close">
+              <div class="close-btn" :class="closeBtnStyle">
+                <CloseOutlined />
+              </div>
+            </div>
+          </template>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<style lang="scss"></style>

package/src/components/tab/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+
+import Tab from "./Tab.vue";
+
+Tab.install = (app: App) => {
+  app.component("DTab", Tab);
+};
+
+export default Tab;