@vunk/plus 1.1.4 → 1.2.0

package/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import VkAvatar from './src/index.vue';
+export * as __VkAvatar from './src/types';
+export { VkAvatar, };
+export default VkAvatar;

package/components/avatar/index.mjs

@@ -0,0 +1,49 @@
+import { ElAvatar } from 'element-plus';
+import { defineComponent, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  background: {
+    default: "transparent"
+  },
+  color: {
+    default: "currentColor"
+  }
+};
+const emits = {};
+
+var _sfc_main = defineComponent({
+  name: "VkAvatar",
+  components: {
+    ElAvatar
+  },
+  props,
+  emits
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElAvatar = resolveComponent("ElAvatar");
+  return openBlock(), createBlock(_component_ElAvatar, {
+    style: normalizeStyle({
+      background: _ctx.background,
+      color: _ctx.color
+    })
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["style"]);
+}
+var VkAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/avatar/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkAvatar.install = (app) => {
+  app.component(VkAvatar.name || "VkAvatar", VkAvatar);
+};
+
+export { VkAvatar, types as __VkAvatar, VkAvatar as default };

package/components/avatar/src/ctx.d.ts

@@ -0,0 +1,18 @@
+export declare const props: {
+    readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+    readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+    readonly icon: {
+        readonly type: import("vue").PropType<unknown>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly alt: StringConstructor;
+    readonly srcSet: StringConstructor;
+    readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => ObjectFitProperty) | ((new (...args: any[]) => any) | (() => ObjectFitProperty))[], unknown, unknown, "cover", boolean>;
+} & {
+    background: never;
+    color: never;
+};
+export declare const emits: {};

package/components/avatar/src/index.vue.d.ts

@@ -0,0 +1,180 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+    readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+    readonly icon: {
+        readonly type: import("vue").PropType<unknown>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly alt: StringConstructor;
+    readonly srcSet: StringConstructor;
+    readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => ObjectFitProperty) | ((new (...args: any[]) => any) | (() => ObjectFitProperty))[], unknown, unknown, "cover", boolean>;
+} & {
+    background: never;
+    color: never;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+    readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+    readonly icon: {
+        readonly type: import("vue").PropType<unknown>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly alt: StringConstructor;
+    readonly srcSet: StringConstructor;
+    readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => ObjectFitProperty) | ((new (...args: any[]) => any) | (() => ObjectFitProperty))[], unknown, unknown, "cover", boolean>;
+} & {
+    background: never;
+    color: never;
+}>> & Readonly<{}>, {
+    readonly size: import("element-plus").ButtonType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>;
+    readonly shape: import("element-plus").ButtonType<StringConstructor, "circle" | "square", unknown>;
+    readonly src: string;
+    readonly fit: any;
+}, {}, {
+    ElAvatar: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+        readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+        readonly icon: {
+            readonly type: import("vue").PropType<unknown>;
+            readonly required: false;
+            readonly validator: (val: unknown) => boolean;
+            __epPropKey: true;
+        };
+        readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+        readonly alt: StringConstructor;
+        readonly srcSet: StringConstructor;
+        readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | ((new (...args: any[]) => any) | (() => any))[], unknown, unknown, "cover", boolean>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+            readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+            readonly icon: {
+                readonly type: import("vue").PropType<unknown>;
+                readonly required: false;
+                readonly validator: (val: unknown) => boolean;
+                __epPropKey: true;
+            };
+            readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly alt: StringConstructor;
+            readonly srcSet: StringConstructor;
+            readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | ((new (...args: any[]) => any) | (() => any))[], unknown, unknown, "cover", boolean>;
+        }>> & {
+            onError?: (evt: Event) => any;
+        }>>;
+        emit: (event: "error", evt: Event) => void;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string) => string;
+            m: (modifier?: string) => string;
+            be: (blockSuffix?: string, element?: string) => string;
+            em: (element?: string, modifier?: string) => string;
+            bm: (blockSuffix?: string, modifier?: string) => string;
+            bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+            is: {
+                (name: string, state: boolean): string;
+                (name: string): string;
+            };
+            cssVar: (object: Record<string, string>) => Record<string, string>;
+            cssVarName: (name: string) => string;
+            cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+            cssVarBlockName: (name: string) => string;
+        };
+        hasLoadError: import("vue").Ref<boolean, boolean>;
+        avatarClass: import("vue").ComputedRef<string[]>;
+        sizeStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        fitStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        handleError: (e: Event) => void;
+        ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+            readonly size: {
+                readonly type: import("vue").PropType<import("element-plus").ButtonType<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown>>;
+                readonly required: false;
+                readonly validator: (val: unknown) => boolean;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: import("vue").PropType<string>;
+                readonly required: false;
+                readonly validator: (val: unknown) => boolean;
+                __epPropKey: true;
+            };
+        }, {
+            props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+                readonly size: {
+                    readonly type: import("vue").PropType<import("element-plus").ButtonType<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown>>;
+                    readonly required: false;
+                    readonly validator: (val: unknown) => boolean;
+                    __epPropKey: true;
+                };
+                readonly color: {
+                    readonly type: import("vue").PropType<string>;
+                    readonly required: false;
+                    readonly validator: (val: unknown) => boolean;
+                    __epPropKey: true;
+                };
+            }>> & {
+                [x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any);
+            }>>;
+            ns: {
+                namespace: import("vue").ComputedRef<string>;
+                b: (blockSuffix?: string) => string;
+                e: (element?: string) => string;
+                m: (modifier?: string) => string;
+                be: (blockSuffix?: string, element?: string) => string;
+                em: (element?: string, modifier?: string) => string;
+                bm: (blockSuffix?: string, modifier?: string) => string;
+                bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+                is: {
+                    (name: string, state: boolean): string;
+                    (name: string): string;
+                };
+                cssVar: (object: Record<string, string>) => Record<string, string>;
+                cssVarName: (name: string) => string;
+                cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+                cssVarBlockName: (name: string) => string;
+            };
+            style: import("vue").ComputedRef<import("vue").CSSProperties>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+            readonly size: {
+                readonly type: import("vue").PropType<import("element-plus").ButtonType<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown>>;
+                readonly required: false;
+                readonly validator: (val: unknown) => boolean;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: import("vue").PropType<string>;
+                readonly required: false;
+                readonly validator: (val: unknown) => boolean;
+                __epPropKey: true;
+            };
+        }>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>> & Record<string, any>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        error: (evt: Event) => boolean;
+    }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").EpPropFinalized<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number, "", boolean>;
+        readonly shape: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "circle" | "square", unknown, "circle", boolean>;
+        readonly icon: {
+            readonly type: import("vue").PropType<unknown>;
+            readonly required: false;
+            readonly validator: (val: unknown) => boolean;
+            __epPropKey: true;
+        };
+        readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+        readonly alt: StringConstructor;
+        readonly srcSet: StringConstructor;
+        readonly fit: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | ((new (...args: any[]) => any) | (() => any))[], unknown, unknown, "cover", boolean>;
+    }>> & {
+        onError?: (evt: Event) => any;
+    }, {
+        readonly size: import("element-plus").ButtonType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>;
+        readonly shape: import("element-plus").ButtonType<StringConstructor, "circle" | "square", unknown>;
+        readonly src: string;
+        readonly fit: any;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>> & Record<string, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/avatar/src/types.d.ts

@@ -0,0 +1 @@
+export {};

package/components/recorder-button/index.css

@@ -0,0 +1,72 @@
+.sk-recorder-container {
+  position: relative;
+}
+.sk-recorder-button {
+  position: relative;
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+}
+.recording-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+}
+.action-buttons {
+  pointer-events: auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 40px;
+  margin-bottom: 100px;
+}
+.cancel-btn, .text-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+}
+.btn-icon {
+  width: 60px; /* 增大按钮尺寸 */
+  height: 60px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  margin-bottom: 8px;
+}
+.cancel-btn.active .btn-icon {
+  background: var(--el-color-danger);
+}
+.text-btn.active .btn-icon {
+  background: var(--el-color-primary);
+}
+.btn-text {
+  font-size: 14px;
+}
+.recording-tip {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 100px; /* 向上移动一些 */
+  color: white;
+}
+.wave-container {
+  width: 160px; /* 增大波形显示区域 */
+  height: 100px;
+  margin-bottom: 20px;
+}
+.tip-text {
+  font-size: 14px;
+}

package/components/recorder-button/index.d.ts

@@ -0,0 +1,4 @@
+import VkRecorderButton from './src/index.vue';
+export * as __VkRecorderButton from './src/types';
+export { VkRecorderButton, };
+export default VkRecorderButton;

package/components/recorder-button/index.mjs

@@ -0,0 +1,319 @@
+import { ElButton, ElMessage } from 'element-plus';
+import Recorder from 'recorder-core';
+import { defineComponent, ref, shallowRef, onUnmounted, resolveComponent, openBlock, createElementBlock, createCommentVNode, createElementVNode, toDisplayString, normalizeClass, createVNode, mergeProps, withCtx } from 'vue';
+import 'recorder-core/src/engine/mp3';
+import 'recorder-core/src/engine/wav';
+import 'recorder-core/src/engine/mp3-engine';
+import 'recorder-core/src/extensions/waveview';
+import 'recorder-core/src/app-support/app';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  speenchToTextUrl: {
+    type: String,
+    default: "http://localhost:3000/speech-to-text"
+  },
+  /**
+   * 自定义转为文本区域事件
+   */
+  onTextZone: {
+    type: Function,
+    default: void 0
+  }
+};
+const emits = {
+  submitText: (text) => typeof text === "string",
+  submit: (_) => true
+};
+
+async function speechToText(url, blob) {
+  const formData = new FormData();
+  formData.append("file", blob, "audio.wav");
+  const response = await fetch(url, {
+    method: "POST",
+    body: formData
+  });
+  if (!response.ok) {
+    throw new Error("Speech to text failed");
+  }
+  const result = await response.json();
+  return result.text;
+}
+
+const LONG_PRESS_DURATION = 100;
+var _sfc_main = defineComponent({
+  name: "VkRecorderButton",
+  components: {
+    ElButton
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const supported = ref(false);
+    const recording = ref(false);
+    const recordingNode = ref();
+    const wave = shallowRef();
+    const blobUrl = ref("");
+    let pressTimer = null;
+    const rec = new Recorder({
+      // mp3格式，指定采样率hz、比特率kbps
+      type: "wav",
+      sampleRate: 16e3,
+      bitRate: 16,
+      onProcess
+    });
+    const recOpen = () => {
+      return new Promise((resolve, reject) => {
+        rec.open(() => {
+          supported.value = true;
+          if (Recorder.WaveView) {
+            wave.value = Recorder.WaveView({
+              elem: recordingNode.value
+            });
+          }
+          resolve(true);
+        }, (msg, isUserNotAllow) => {
+          ElMessage.error(`${isUserNotAllow ? "\u7528\u6237\u672A\u6388\u6743, " : ""}\u65E0\u6CD5\u5F55\u97F3:${msg}`);
+          reject(new Error(msg));
+        });
+      });
+    };
+    const startRecording = async () => {
+      await recOpen();
+      if (!supported.value)
+        return;
+      rec.start();
+      recording.value = true;
+    };
+    const isDragging = ref(false);
+    const dragPosition = ref({ x: 0, y: 0 });
+    const cancelZone = ref(false);
+    const isTextZone = ref(false);
+    let isMouseDown = false;
+    const stopRecording = () => {
+      const theTextZone = isTextZone.value;
+      rec.stop(async (blob) => {
+        blobUrl.value = (window.URL || webkitURL).createObjectURL(blob);
+        rec.close();
+        recording.value = false;
+        emit("submit", {
+          blob,
+          url: blobUrl.value
+        });
+        if (theTextZone) {
+          if (props2.onTextZone) {
+            props2.onTextZone({
+              blob,
+              url: blobUrl.value
+            });
+          } else {
+            speechToText(props2.speenchToTextUrl, blob).then((text) => {
+              emit("submitText", text);
+            }).catch((err) => {
+              console.error("\u8BED\u97F3\u8BC6\u522B\u9519\u8BEF:", err);
+              ElMessage.error("\u8F6C\u6362\u6587\u5B57\u5931\u8D25");
+            });
+          }
+        }
+      });
+    };
+    const addDocumentListeners = () => {
+      document.addEventListener("mousemove", onmousemove);
+      document.addEventListener("mouseup", onmouseup);
+    };
+    const removeDocumentListeners = () => {
+      document.removeEventListener("mousemove", onmousemove);
+      document.removeEventListener("mouseup", onmouseup);
+    };
+    const onmousedown = (e) => {
+      e.preventDefault();
+      isMouseDown = true;
+      const touch = "touches" in e ? e.touches[0] : e;
+      dragPosition.value = { x: touch.clientX, y: touch.clientY };
+      if (e instanceof MouseEvent) {
+        addDocumentListeners();
+      }
+      pressTimer = setTimeout(() => {
+        if (isMouseDown) {
+          isDragging.value = true;
+          startRecording();
+        }
+      }, LONG_PRESS_DURATION);
+    };
+    function onmousemove(e) {
+      e.preventDefault();
+      if (!isDragging.value)
+        return;
+      const touch = "touches" in e ? e.touches[0] : e;
+      dragPosition.value = { x: touch.clientX, y: touch.clientY };
+      const cancelBtn = document.querySelector(".cancel-btn");
+      const textBtn = document.querySelector(".text-btn");
+      if (cancelBtn && textBtn) {
+        const cancelRect = cancelBtn.getBoundingClientRect();
+        const textRect = textBtn.getBoundingClientRect();
+        cancelZone.value = touch.clientX >= cancelRect.left && touch.clientX <= cancelRect.right && touch.clientY >= cancelRect.top && touch.clientY <= cancelRect.bottom;
+        isTextZone.value = touch.clientX >= textRect.left && touch.clientX <= textRect.right && touch.clientY >= textRect.top && touch.clientY <= textRect.bottom;
+      }
+    }
+    function onmouseup(e) {
+      isMouseDown = false;
+      clearTimeout(pressTimer);
+      if (isDragging.value) {
+        if (cancelZone.value) {
+          rec.close();
+        } else {
+          stopRecording();
+        }
+        isDragging.value = false;
+        cancelZone.value = false;
+        isTextZone.value = false;
+      }
+      if (e instanceof MouseEvent) {
+        removeDocumentListeners();
+      }
+    }
+    function onProcess(buffers, powerLevel, bufferDuration, bufferSampleRate) {
+      wave.value?.input(
+        buffers[buffers.length - 1],
+        powerLevel,
+        bufferSampleRate
+      );
+    }
+    onUnmounted(() => {
+      removeDocumentListeners();
+    });
+    return {
+      onmousedown,
+      onmousemove,
+      onmouseup,
+      recording,
+      recordingNode,
+      blobUrl,
+      isDragging,
+      cancelZone,
+      isTextZone
+    };
+  }
+});
+
+const _hoisted_1 = { class: "sk-recorder-container" };
+const _hoisted_2 = {
+  key: 0,
+  class: "recording-mask"
+};
+const _hoisted_3 = { class: "recording-tip" };
+const _hoisted_4 = {
+  ref: "recordingNode",
+  class: "wave-container"
+};
+const _hoisted_5 = { class: "tip-text" };
+const _hoisted_6 = { class: "action-buttons" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createCommentVNode(" \u906E\u7F69\u5C42 "),
+    _ctx.isDragging ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      createCommentVNode(" \u5F55\u97F3\u63D0\u793A\u533A\u57DF\u79FB\u5230\u4E0A\u9762 "),
+      createElementVNode("div", _hoisted_3, [
+        createElementVNode(
+          "div",
+          _hoisted_4,
+          null,
+          512
+          /* NEED_PATCH */
+        ),
+        createElementVNode(
+          "div",
+          _hoisted_5,
+          toDisplayString(_ctx.cancelZone ? "\u677E\u5F00\u624B\u6307\uFF0C\u53D6\u6D88\u53D1\u9001" : "\u677E\u5F00\u53D1\u9001\uFF0C\u4E0A\u6ED1\u53D6\u6D88"),
+          1
+          /* TEXT */
+        )
+      ]),
+      createCommentVNode(" \u64CD\u4F5C\u6309\u94AE\u79FB\u5230\u5E95\u90E8 "),
+      createElementVNode("div", _hoisted_6, [
+        createElementVNode(
+          "div",
+          {
+            class: normalizeClass(["cancel-btn", { active: _ctx.cancelZone }])
+          },
+          _cache[0] || (_cache[0] = [
+            createElementVNode(
+              "div",
+              { class: "btn-icon" },
+              " \xD7 ",
+              -1
+              /* HOISTED */
+            ),
+            createElementVNode(
+              "div",
+              { class: "btn-text" },
+              " \u53D6\u6D88\u53D1\u9001 ",
+              -1
+              /* HOISTED */
+            )
+          ]),
+          2
+          /* CLASS */
+        ),
+        createElementVNode(
+          "div",
+          {
+            class: normalizeClass(["text-btn", { active: _ctx.isTextZone }])
+          },
+          _cache[1] || (_cache[1] = [
+            createElementVNode(
+              "div",
+              { class: "btn-icon" },
+              " \u6587 ",
+              -1
+              /* HOISTED */
+            ),
+            createElementVNode(
+              "div",
+              { class: "btn-text" },
+              " \u8F6C\u4E3A\u6587\u5B57 ",
+              -1
+              /* HOISTED */
+            )
+          ]),
+          2
+          /* CLASS */
+        )
+      ])
+    ])) : createCommentVNode("v-if", true),
+    createCommentVNode(" \u5F55\u97F3\u6309\u94AE "),
+    createVNode(_component_ElButton, mergeProps(_ctx.$attrs, {
+      class: ["sk-recorder-button", {
+        "is-recording": _ctx.recording
+      }],
+      onTouchstart: _ctx.onmousedown,
+      onTouchmove: _ctx.onmousemove,
+      onTouchend: _ctx.onmouseup,
+      onMousedown: _ctx.onmousedown
+    }), {
+      default: withCtx(() => _cache[2] || (_cache[2] = [
+        createElementVNode(
+          "span",
+          { class: "sk-recorder-button-text" },
+          "\u6309\u4F4F \u8BF4\u8BDD",
+          -1
+          /* HOISTED */
+        )
+      ])),
+      _: 1
+      /* STABLE */
+    }, 16, ["class", "onTouchstart", "onTouchmove", "onTouchend", "onMousedown"])
+  ]);
+}
+var VkRecorderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/recorder-button/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkRecorderButton.install = (app) => {
+  app.component(VkRecorderButton.name || "VkRecorderButton", VkRecorderButton);
+};
+
+export { VkRecorderButton, types as __VkRecorderButton, VkRecorderButton as default };

package/components/recorder-button/src/ctx.d.ts

@@ -0,0 +1,19 @@
+import type { PropType } from 'vue';
+import type { OnTextZone, SubmitRawEvent } from './types';
+export declare const props: {
+    speenchToTextUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 自定义转为文本区域事件
+     */
+    onTextZone: {
+        type: PropType<OnTextZone>;
+        default: any;
+    };
+};
+export declare const emits: {
+    submitText: (text: string) => boolean;
+    submit: (_: SubmitRawEvent) => boolean;
+};