@vunk/plus 1.10.1 → 1.10.3

package/components/bubble-list/index.mjs

@@ -1,10 +1,414 @@
-export { a8 as VkBubbleList, a9 as __VkBubbleList, a8 as default } from '../index3.mjs';
+import { openBlock, createElementBlock, createStaticVNode, defineComponent, ref, onMounted, watch, computed, resolveComponent, createVNode, withCtx, Fragment, renderList, createBlock, normalizeClass, createSlots, renderSlot, withDirectives, createElementVNode, normalizeStyle, createCommentVNode, vShow, mergeProps, normalizeProps, guardReactiveProps } from 'vue';
+import { VkBubbleRenderer, VkBubbleRenderTemplates, VkBubbleTemplates } from '@vunk/plus/components/bubble-templates';
+import { ElAutoResizer } from 'element-plus';
+import { a as arrow_down_bold_default } from '../index3.mjs';
+import { useResizeObserver } from '@vueuse/core';
+import { VkScrollbar } from '@vunk/plus/components/scrollbar';
+import { Bubble } from 'vue-element-plus-x';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+import { noop } from '@vunk/shared/function';
 export { Role } from '@vunk/plus/components/agent-chat-provider';
-import 'vue';
-import '@vunk/plus/components/bubble-templates';
-import 'element-plus';
-import '../index4.mjs';
-import '@vueuse/core';
-import '@vunk/plus/components/scrollbar';
-import '../_plugin-vue_export-helper.mjs';
-import '@vunk/shared/function';
+
+const _sfc_main$2 = {};
+
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  version: "1.1",
+  width: "704",
+  height: "704",
+  viewBox: "0 0 704 704"
+};
+
+function _sfc_render$2(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createStaticVNode("<defs><filter id=\"master_svg0_62_10054\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\" x=\"-0.030120481927710843\" y=\"-0.030120481927710843\" width=\"1.0602409638554218\" height=\"1.0602409638554218\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"></feFlood><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"></feBlend><feGaussianBlur stdDeviation=\"5\" result=\"effect1_foregroundBlur\"></feGaussianBlur></filter><linearGradient id=\"master_svg1_62_10082\" x1=\"0.5\" y1=\"-0.13192443549633026\" x2=\"0.42319029569625854\" y2=\"1.368432641029358\"><stop offset=\"9.145302325487137%\" stop-color=\"currentColor\" stop-opacity=\"1\"></stop><stop offset=\"13.636428117752075%\" stop-color=\"currentColor\" stop-opacity=\"0.07539999485015869\"></stop><stop offset=\"16.968481242656708%\" stop-color=\"currentColor\" stop-opacity=\"0\"></stop></linearGradient></defs><g transform=\"matrix(0,1,-1,0,704,-664)\" filter=\"url(#master_svg0_62_10054)\"><path d=\"M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z\" fill-rule=\"evenodd\" fill=\"url(#master_svg1_62_10082)\" fill-opacity=\"1\"></path></g>", 2)
+  ])))
+}
+var loadingBg = /*#__PURE__*/_export_sfc(_sfc_main$2, [['render',_sfc_render$2],['__file',"D:\\labCode\\vunk-plus\\packages\\components\\bubble-list\\src\\core\\loading.vue"]]);
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    autoScrollThreshold: {
+      type: Number,
+      default: 200
+    },
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    alwaysShowScrollbar: {
+      type: Boolean,
+      default: false
+    },
+    backButtonThreshold: {
+      type: Number,
+      default: 80
+    },
+    showBackButton: {
+      type: Boolean,
+      default: true
+    },
+    backButtonPosition: {
+      type: Object,
+      default: () => {
+        return { bottom: "20px", left: "calc(50% - 19px)" };
+      }
+    },
+    btnLoading: {
+      type: Boolean,
+      default: true
+    },
+    btnColor: {
+      type: String,
+      default: "#409EFF"
+    },
+    btnIconSize: {
+      type: Number,
+      default: 24
+    },
+    scrollbarAppendTo: {
+      type: null,
+      default: void 0
+    }
+  },
+  emits: {
+    complete: null
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const scrollbarRef = ref();
+    function initStyle() {
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-max-height",
+        props.maxHeight || "100%"
+      );
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-btn-size",
+        `${props.btnIconSize}px`
+      );
+    }
+    onMounted(() => {
+      initStyle();
+    });
+    watch(
+      () => [props.maxHeight, props.btnIconSize],
+      () => {
+        initStyle();
+      }
+    );
+    const distanceToBottom = ref();
+    const scrollViewEl = computed(() => scrollbarRef.value?.wrapRef?.firstElementChild);
+    const btnShow = computed(() => {
+      return props.showBackButton && distanceToBottom.value !== void 0 && distanceToBottom.value > props.backButtonThreshold;
+    });
+    onMounted(() => {
+      setTimeout(getDistanceToBottom);
+    });
+    function getDistanceToBottom() {
+      const el = scrollbarRef.value?.$el;
+      const wrap = scrollbarRef.value?.wrapRef;
+      if (!el || !wrap) {
+        return;
+      }
+      distanceToBottom.value = wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
+      return distanceToBottom.value;
+    }
+    function scrollToBottom(...args) {
+      scrollbarRef.value?.scrollToBottom(...args);
+    }
+    function scrollToTop(...args) {
+      scrollbarRef.value?.scrollToTop(...args);
+    }
+    if (props.autoScroll) {
+      useResizeObserver(scrollViewEl, () => {
+        const distance = getDistanceToBottom();
+        if (distance !== void 0 && distance > props.autoScrollThreshold) {
+          return;
+        }
+        scrollToBottom();
+      });
+    }
+    function scrollToBubble(index) {
+      const container = scrollbarRef.value?.wrapRef;
+      if (!container)
+        return;
+      const bubbles = container.querySelectorAll(".el-bubble");
+      if (index >= bubbles.length)
+        return;
+      const targetBubble = bubbles[index];
+      const containerRect = container.getBoundingClientRect();
+      const bubbleRect = targetBubble.getBoundingClientRect();
+      const scrollPosition = bubbleRect.top - containerRect.top + container.scrollTop;
+      container.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth"
+      });
+    }
+    __expose({
+      scrollToTop,
+      scrollToBottom,
+      scrollToBubble
+    });
+    const __returned__ = { props, scrollbarRef, initStyle, distanceToBottom, scrollViewEl, btnShow, getDistanceToBottom, scrollToBottom, scrollToTop, scrollToBubble, get ArrowDownBold() {
+      return arrow_down_bold_default;
+    }, get VkScrollbar() {
+      return VkScrollbar;
+    }, get Bubble() {
+      return Bubble;
+    }, loadingBg };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vk-bubble-list-wrapper" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode($setup["VkScrollbar"], {
+      ref: "scrollbarRef",
+      class: "vk-bubble-list",
+      "append-to": $props.scrollbarAppendTo,
+      always: $props.alwaysShowScrollbar,
+      onScroll: $setup.getDistanceToBottom
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList($props.list, (item, index) => {
+            return openBlock(), createBlock($setup["Bubble"], {
+              key: item.key || index,
+              content: item.content,
+              placement: item.placement,
+              loading: item.loading,
+              shape: item.shape,
+              variant: item.variant,
+              "is-markdown": item.isMarkdown,
+              "is-fog": item.isFog,
+              typing: item.typing,
+              "max-width": item.maxWidth,
+              avatar: item.avatar,
+              "avatar-size": item.avatarSize,
+              "avatar-gap": item.avatarGap,
+              "avatar-shape": item.avatarShape,
+              "avatar-src-set": item.avatarSrcSet,
+              "avatar-alt": item.avatarAlt,
+              "avatar-fit": item.avatarFit,
+              "no-style": item.noStyle,
+              class: normalizeClass({
+                [`is-${item.role}`]: true
+              })
+            }, createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.avatar ? {
+                name: "avatar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "avatar", { item })
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.header ? {
+                name: "header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "header", { item })
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.content ? {
+                name: "content",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "content", { item })
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.footer ? {
+                name: "footer",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "footer", { item })
+                ]),
+                key: "3"
+              } : void 0,
+              _ctx.$slots.loading ? {
+                name: "loading",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loading", { item })
+                ]),
+                key: "4"
+              } : void 0
+            ]), 1032, ["content", "placement", "loading", "shape", "variant", "is-markdown", "is-fog", "typing", "max-width", "avatar", "avatar-size", "avatar-gap", "avatar-shape", "avatar-src-set", "avatar-alt", "avatar-fit", "no-style", "class"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["append-to", "always"]),
+    withDirectives(createElementVNode(
+      "div",
+      {
+        class: normalizeClass(["vk-bubble-list-default-back-button", {
+          "vk-bubble-list-back-to-bottom-solt": _ctx.$slots.backToBottom
+        }]),
+        style: normalizeStyle({
+          bottom: $props.backButtonPosition.bottom,
+          left: $props.backButtonPosition.left
+        }),
+        onClick: $setup.scrollToBottom
+      },
+      [
+        renderSlot(_ctx.$slots, "backToBottom", {}, () => [
+          createVNode(_component_el_icon, {
+            class: "vk-bubble-list-back-to-bottom-icon",
+            style: normalizeStyle({ color: $setup.props.btnColor })
+          }, {
+            default: withCtx(() => [
+              createVNode($setup["ArrowDownBold"]),
+              $setup.props.btnLoading ? (openBlock(), createBlock($setup["loadingBg"], {
+                key: 0,
+                class: "back-to-bottom-loading-svg-bg"
+              })) : createCommentVNode("v-if", true)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["style"])
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ), [
+      [vShow, $setup.btnShow]
+    ])
+  ]);
+}
+var BubbleList = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\bubble-list\\src\\core\\index.vue"]]);
+
+const props = {
+  items: {
+    type: Array,
+    default: () => []
+  },
+  elRef: {
+    type: Function,
+    default: noop
+  },
+  scrollbarAppendTo: null,
+  autoScrollThreshold: {
+    type: Number,
+    default: 200
+  }
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkBubbleList",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: props,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkBubbleRenderer() {
+      return VkBubbleRenderer;
+    }, get VkBubbleRenderTemplates() {
+      return VkBubbleRenderTemplates;
+    }, get VkBubbleTemplates() {
+      return VkBubbleTemplates;
+    }, get ElAutoResizer() {
+      return ElAutoResizer;
+    }, BubbleList };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["VkBubbleRenderTemplates"], null, {
+    placeholder: withCtx(() => [
+      createVNode($setup["VkBubbleTemplates"])
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "renderer"),
+      createVNode($setup["ElAutoResizer"], null, {
+        default: withCtx(({ height }) => [
+          createVNode($setup["BubbleList"], mergeProps({
+            ref: _ctx.elRef,
+            "btn-icon-size": 18,
+            "max-height": `${height}px`,
+            "scrollbar-append-to": _ctx.scrollbarAppendTo,
+            "auto-scroll-threshold": _ctx.autoScrollThreshold,
+            style: {
+              "--el-bubble-list-max-height": `${height}px`
+            },
+            list: _ctx.items
+          }, _ctx.$attrs), createSlots({
+            content: withCtx(({ item }) => [
+              createVNode($setup["VkBubbleRenderer"], {
+                source: [item]
+              }, null, 8, ["source"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.avatar ? {
+              name: "avatar",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "avatar", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.header ? {
+              name: "header",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.footer ? {
+              name: "footer",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["max-height", "scrollbar-append-to", "auto-scroll-threshold", "style", "list"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var VkBubbleList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\bubble-list\\src\\index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkBubbleList.install = (app) => {
+  app.component(VkBubbleList.name || "VkBubbleList", VkBubbleList);
+};
+
+export { VkBubbleList, types as __VkBubbleList, VkBubbleList as default };

package/components/bubble-templates/index.mjs

@@ -48,7 +48,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE */
   });
 }
-var VkBubbleTemplates = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-templates/src/index.vue"]]);
+var VkBubbleTemplates = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\bubble-templates\\src\\index.vue"]]);
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/components/chat-independent/index.mjs

@@ -237,7 +237,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-var VkChatIndependent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/chat-independent/src/index.vue"]]);
+var VkChatIndependent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\chat-independent\\src\\index.vue"]]);
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/components/drawer/index.css

@@ -1,124 +1,124 @@
-.vk-drawer-modal.is-closed {
-  display: block!important; /* 保持抽屉关闭时，toggle 仍然可见 */
+.vk-drawer-modal.is-closed {
+  display: block!important; /* 保持抽屉关闭时，toggle 仍然可见 */
   visibility: hidden; /* 抽屉本体不可见 */
 }
-.vk-drawer-modal.is-closed .el-drawer.rtl {
+.vk-drawer-modal.is-closed .el-drawer.rtl {
   transform: translateX(100%); /* 抽屉本体移出可视区域 */
 }
-.vk-drawer-modal.is-closed .el-drawer.ltr {
+.vk-drawer-modal.is-closed .el-drawer.ltr {
   transform: translateX(-100%); /* 抽屉本体移出可视区域 */
 }
-.vk-drawer-modal.is-closed .el-drawer.ttb {
+.vk-drawer-modal.is-closed .el-drawer.ttb {
   transform: translateY(-100%); /* 抽屉本体移出可视区域 */
 }
-.vk-drawer-modal.is-closed .el-drawer.btt {
+.vk-drawer-modal.is-closed .el-drawer.btt {
   transform: translateY(100%); /* 抽屉本体移出可视区域 */
 }
-.vk-drawer-modal .vk-drawer-toggle {
+.vk-drawer-modal .vk-drawer-toggle {
   visibility: visible; /* 保持 toggle 可见 */
 }
-.vk-drawer-modal.is-absolute{
+.vk-drawer-modal.is-absolute{
   position: absolute!important;
 }
-.vk-drawer-modal.is-absolute.no-modal {
+.vk-drawer-modal.is-absolute.no-modal {
   pointer-events: none;
 }
-.vk-drawer-modal.is-absolute.no-modal  .el-drawer  {
+.vk-drawer-modal.is-absolute.no-modal  .el-drawer  {
   pointer-events: initial;
 }
-.vk-drawer-toggle {
-  position: absolute;
-  z-index: 2;
-
-  /* 尺寸 */
-  width: 40px;
-  height: 80px;
-
-  /* 布局 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  /* 交互 */
-  cursor: pointer;
-  user-select: none;
-
-  /* 文字样式 */
+.vk-drawer-toggle {
+  position: absolute;
+  z-index: 2;
+
+  /* 尺寸 */
+  width: 40px;
+  height: 80px;
+
+  /* 布局 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* 交互 */
+  cursor: pointer;
+  user-select: none;
+
+  /* 文字样式 */
   color: var(--el-text-color-primary);
 }
-.vk-drawer-toggle.is-rtl {
-
-  /* 位置 */
-  top: 25%;
-  left: 0;
-  transform: translate(-100%, 0);
-
-  /* 外观 */
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-right: none; /* 右侧不要边框，因为贴着 drawer */
-
-  /* 圆角 */
-  border-top-left-radius: var(--el-border-radius-base);
-  border-bottom-left-radius: var(--el-border-radius-base);
-
-  /* 文字排列 */
+.vk-drawer-toggle.is-rtl {
+
+  /* 位置 */
+  top: 25%;
+  left: 0;
+  transform: translate(-100%, 0);
+
+  /* 外观 */
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-right: none; /* 右侧不要边框，因为贴着 drawer */
+
+  /* 圆角 */
+  border-top-left-radius: var(--el-border-radius-base);
+  border-bottom-left-radius: var(--el-border-radius-base);
+
+  /* 文字排列 */
   writing-mode: vertical-rl; /* 竖向文字 */
 }
-.vk-drawer-toggle.is-ltr {
-
-  /* 位置 */
-  top: 25%;
-  right: 0;
-  transform: translate(100%, 0);
-
-  /* 外观 */
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-left: none; /* 左侧不要边框，因为贴着 drawer */
-
-  /* 圆角 */
-  border-top-right-radius: var(--el-border-radius-base);
-  border-bottom-right-radius: var(--el-border-radius-base);
-
-  /* 文字排列 */
+.vk-drawer-toggle.is-ltr {
+
+  /* 位置 */
+  top: 25%;
+  right: 0;
+  transform: translate(100%, 0);
+
+  /* 外观 */
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-left: none; /* 左侧不要边框，因为贴着 drawer */
+
+  /* 圆角 */
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: var(--el-border-radius-base);
+
+  /* 文字排列 */
   writing-mode: vertical-rl; /* 竖向文字 */
 }
-.vk-drawer-toggle.is-ttb {
-
-  /* 位置 */
-  bottom: 0;
-  left: 25%;
-  transform: translate(0, 100%);
-
-  /* 外观 */
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-top: none; /* 上侧不要边框，因为贴着 drawer */
-
-  /* 圆角 */
-  border-bottom-left-radius: var(--el-border-radius-base);
+.vk-drawer-toggle.is-ttb {
+
+  /* 位置 */
+  bottom: 0;
+  left: 25%;
+  transform: translate(0, 100%);
+
+  /* 外观 */
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-top: none; /* 上侧不要边框，因为贴着 drawer */
+
+  /* 圆角 */
+  border-bottom-left-radius: var(--el-border-radius-base);
   border-bottom-right-radius: var(--el-border-radius-base);
 }
-.vk-drawer-toggle.is-btt {
-
-  /* 位置 */
-  top: 0;
-  left: 25%;
-  transform: translate(0, -100%);
-
-  /* 外观 */
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-bottom: none; /* 下侧不要边框，因为贴着 drawer */
-
-  /* 圆角 */
-  border-top-left-radius: var(--el-border-radius-base);
+.vk-drawer-toggle.is-btt {
+
+  /* 位置 */
+  top: 0;
+  left: 25%;
+  transform: translate(0, -100%);
+
+  /* 外观 */
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-bottom: none; /* 下侧不要边框，因为贴着 drawer */
+
+  /* 圆角 */
+  border-top-left-radius: var(--el-border-radius-base);
   border-top-right-radius: var(--el-border-radius-base);
 }
-.vk-drawer-toggle:hover {
+.vk-drawer-toggle:hover {
   background-color: var(--el-fill-color-light);
 }
-.vk-drawer-toggle:active {
+.vk-drawer-toggle:active {
   background-color: var(--el-fill-color);
 }

package/components/drawer/index.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, watchEffect, openBlock, createBlock, mergeProps, toHandlers, withCtx, renderSlot, createElementBlock, normalizeClass, createVNode, createCommentVNode } from 'vue';
-import { a as arrow_down_bold_default, b as arrow_left_bold_default, c as arrow_right_bold_default, d as arrow_up_bold_default } from '../index4.mjs';
+import { a as arrow_down_bold_default, b as arrow_left_bold_default, c as arrow_right_bold_default, d as arrow_up_bold_default } from '../index3.mjs';
 import { noop } from '@vunk/shared/function';
 import { drawerProps, drawerEmits, ElDrawer, ElIcon } from 'element-plus';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
@@ -103,7 +103,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   }, 16, ["modal-class"]);
 }
-var VkDrawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/drawer/src/index.vue"]]);
+var VkDrawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-plus\\packages\\components\\drawer\\src\\index.vue"]]);
 
 VkDrawer.install = (app) => {
   app.component(VkDrawer.name || "VkDrawer", VkDrawer);