@yh-ui/components 0.1.12 → 0.1.15

package/dist/ai-voice-trigger/__tests__/ai-voice-trigger.test.mjs

@@ -18,9 +18,9 @@ describe("YhAiVoiceTrigger", () => {
   });
   it("should apply recording class when recording is true", () => {
     const wrapper = mount(AiVoiceTrigger, {
-      props: { recording: true }
+      props: { recording: true, teleport: false }
     });
-    expect(wrapper.classes()).toContain("is-recording");
+    expect(wrapper.find(".yh-ai-voice-trigger").classes()).toContain("is-recording");
     expect(wrapper.find(".yh-ai-voice-trigger__visualizer").exists()).toBe(true);
   });
   it("should emit start and update:recording on click when initially false", async () => {
@@ -90,4 +90,14 @@ describe("YhAiVoiceTrigger", () => {
     });
     expect(wrapper.find(".yh-ai-voice-trigger__label").text()).toBe("Custom Trigger Text");
   });
+  it("should respect teleport prop", () => {
+    const wrapper = mount(AiVoiceTrigger, {
+      props: { variant: "sphere", teleport: true }
+    });
+    expect(wrapper.props("teleport")).toBe(true);
+    const wrapperNoTeleport = mount(AiVoiceTrigger, {
+      props: { variant: "sphere", teleport: false }
+    });
+    expect(wrapperNoTeleport.props("teleport")).toBe(false);
+  });
 });

package/dist/ai-voice-trigger/src/ai-voice-trigger.cjs

@@ -19,6 +19,38 @@ const aiVoiceTriggerProps = exports.aiVoiceTriggerProps = {
     type: Array,
     default: () => Array(20).fill(5)
   },
+  /**
+   * 展示模式
+   * - inline: 行内按钮
+   * - floating: 悬浮按钮
+   * - sphere: 拟物音量球
+   */
+  variant: {
+    type: String,
+    default: "inline"
+  },
+  /**
+   * 悬浮位置（仅在 floating/sphere 模式有效）
+   */
+  position: {
+    type: String,
+    default: "bottom-right"
+  },
+  /**
+   * 偏移量
+   */
+  offset: {
+    type: Array,
+    default: () => [24, 24]
+  },
+  /**
+   * 是否挂载到 body (Teleport)
+   * 仅在 floating/sphere 模式有效
+   */
+  teleport: {
+    type: Boolean,
+    default: true
+  },
   /**
    * 主题覆盖变量
    */

package/dist/ai-voice-trigger/src/ai-voice-trigger.css

@@ -470,6 +470,44 @@ html.dark {
     opacity: 1;
   }
 }
+@keyframes yh-sphere-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(3);
+    opacity: 0;
+  }
+}
+@keyframes yh-sphere-glow {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0.8;
+  }
+}
+@keyframes yh-sphere-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+@keyframes yh-sphere-inner-pulse {
+  0% {
+    opacity: 0.7;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
 .yh-voice-expand-enter-active,
 .yh-voice-expand-leave-active {
   transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
@@ -493,6 +531,65 @@ html.dark {
   position: relative;
   font-family: var(--yh-font-family);
 }
+.yh-ai-voice-trigger--floating {
+  z-index: 2000;
+}
+.yh-ai-voice-trigger--floating .yh-ai-voice-trigger__body {
+  box-shadow: var(--yh-box-shadow-dark);
+  border: 1px solid var(--yh-border-color-lighter);
+}
+
+.yh-ai-voice-trigger--sphere {
+  --yh-ai-voice-trigger-btn-size: 56px;
+  z-index: 2000;
+}
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__body {
+  padding: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+  overflow: visible;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__trigger {
+  background: var(--yh-color-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 4px 12px rgba(var(--yh-color-primary-rgb), 0.4);
+  z-index: 2;
+}
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__trigger.is-active {
+  animation: yh-sphere-float 3s ease-in-out infinite;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, var(--yh-color-primary-light-3) 0%, transparent 70%);
+  filter: blur(10px);
+  opacity: 0.6;
+  animation: yh-sphere-glow 2s infinite alternate;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--yh-color-primary-light-5);
+  opacity: 0;
+  animation: yh-sphere-pulse 2s infinite;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  animation: yh-sphere-inner-pulse 1s infinite alternate;
+}
+
 .yh-ai-voice-trigger__body {
   display: flex;
   align-items: center;
@@ -508,9 +605,6 @@ html.dark {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
-.yh-ai-voice-trigger {
-  /* Trigger Button */
-}
 .yh-ai-voice-trigger__trigger {
   display: inline-flex;
   align-items: center;
@@ -519,11 +613,13 @@ html.dark {
   background: transparent;
   cursor: pointer;
   border-radius: 50%;
-  width: var(--yh-ai-voice-trigger-btn-size);
+  min-width: var(--yh-ai-voice-trigger-btn-size);
   height: var(--yh-ai-voice-trigger-btn-size);
   color: var(--yh-text-color-primary, #303133);
   transition: all 0.2s;
   flex-shrink: 0;
+  position: relative;
+  padding: 0;
 }
 .yh-ai-voice-trigger__trigger .yh-icon {
   font-size: 16px;
@@ -535,22 +631,25 @@ html.dark {
 }
 .yh-ai-voice-trigger__trigger.is-active {
   background-color: var(--yh-ai-voice-trigger-active-color);
-  color: #fff;
+  color: #fff !important;
   animation: yh-pulse-mic 2s infinite;
 }
 .yh-ai-voice-trigger__trigger.is-active .yh-icon {
   transform: scale(0.9);
 }
 
-.yh-ai-voice-trigger__label {
-  margin-left: 6px;
-  font-size: 14px;
-  display: none;
+.yh-ai-voice-trigger--inline .yh-ai-voice-trigger__trigger:not(.is-active) {
+  width: auto;
+  padding: 0 12px;
+  border-radius: 16px;
+  border: 1px solid var(--yh-border-color-lighter);
+  background-color: var(--yh-bg-color);
 }
-
-.yh-ai-voice-trigger {
-  /* Waveform Visualizer Area */
+.yh-ai-voice-trigger--inline .yh-ai-voice-trigger__trigger:not(.is-active):hover {
+  border-color: var(--yh-color-primary);
+  background-color: var(--yh-color-primary-light-9);
 }
+
 .yh-ai-voice-trigger__visualizer {
   display: flex;
   align-items: center;

package/dist/ai-voice-trigger/src/ai-voice-trigger.d.ts

@@ -14,6 +14,38 @@ export declare const aiVoiceTriggerProps: {
         readonly type: PropType<number[]>;
         readonly default: () => any[];
     };
+    /**
+     * 展示模式
+     * - inline: 行内按钮
+     * - floating: 悬浮按钮
+     * - sphere: 拟物音量球
+     */
+    readonly variant: {
+        readonly type: PropType<"inline" | "floating" | "sphere">;
+        readonly default: "inline";
+    };
+    /**
+     * 悬浮位置（仅在 floating/sphere 模式有效）
+     */
+    readonly position: {
+        readonly type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        readonly default: "bottom-right";
+    };
+    /**
+     * 偏移量
+     */
+    readonly offset: {
+        readonly type: PropType<[number, number]>;
+        readonly default: () => number[];
+    };
+    /**
+     * 是否挂载到 body (Teleport)
+     * 仅在 floating/sphere 模式有效
+     */
+    readonly teleport: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     /**
      * 主题覆盖变量
      */

package/dist/ai-voice-trigger/src/ai-voice-trigger.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_13: {};
+declare var __VLS_17: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly recording: {
@@ -11,12 +11,32 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly type: import("vue").PropType<number[]>;
         readonly default: () => any[];
     };
+    readonly variant: {
+        readonly type: import("vue").PropType<"inline" | "floating" | "sphere">;
+        readonly default: "inline";
+    };
+    readonly position: {
+        readonly type: import("vue").PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        readonly default: "bottom-right";
+    };
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly default: () => number[];
+    };
+    readonly teleport: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly themeOverrides: {
         readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
         readonly default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly offset: [number, number];
+    readonly position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly variant: "inline" | "floating" | "sphere";
+    readonly teleport: boolean;
     readonly recording: boolean;
     readonly amplitudes: number[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/ai-voice-trigger/src/ai-voice-trigger.mjs

@@ -13,6 +13,38 @@ export const aiVoiceTriggerProps = {
     type: Array,
     default: () => Array(20).fill(5)
   },
+  /**
+   * 展示模式
+   * - inline: 行内按钮
+   * - floating: 悬浮按钮
+   * - sphere: 拟物音量球
+   */
+  variant: {
+    type: String,
+    default: "inline"
+  },
+  /**
+   * 悬浮位置（仅在 floating/sphere 模式有效）
+   */
+  position: {
+    type: String,
+    default: "bottom-right"
+  },
+  /**
+   * 偏移量
+   */
+  offset: {
+    type: Array,
+    default: () => [24, 24]
+  },
+  /**
+   * 是否挂载到 body (Teleport)
+   * 仅在 floating/sphere 模式有效
+   */
+  teleport: {
+    type: Boolean,
+    default: true
+  },
   /**
    * 主题覆盖变量
    */

package/dist/ai-voice-trigger/src/ai-voice-trigger.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useNamespace, useLocale } from "@yh-ui/hooks";
 import { useComponentTheme } from "@yh-ui/theme";
-import { computed, ref, onBeforeUnmount } from "vue";
+import { computed, ref, onBeforeUnmount, watch } from "vue";
 import { aiVoiceTriggerProps, aiVoiceTriggerEmits } from "./ai-voice-trigger";
 import { YhIcon } from "../../icon";
 defineOptions({
@@ -17,12 +17,25 @@ const { themeStyle } = useComponentTheme(
 );
 const localRecording = ref(props.recording);
 let visualizerTimer = null;
-const simulatedAmplitudes = ref([]);
+const simulatedAmplitudes = ref(Array(20).fill(5));
+watch(
+  () => props.amplitudes,
+  (newAmps) => {
+    if (newAmps && newAmps.length > 0) {
+      const hasData = newAmps.some((a) => a > 6 || a > 0 && a !== 5);
+      if (hasData) {
+        simulatedAmplitudes.value = [...newAmps];
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
 const syncAmplitudes = () => {
-  if (props.amplitudes && props.amplitudes.length > 0 && props.amplitudes.some((a) => a !== 5)) {
-    simulatedAmplitudes.value = [...props.amplitudes];
-  } else {
-    simulatedAmplitudes.value = Array.from({ length: 20 }, () => 10 + Math.random() * 40);
+  if (props.recording || localRecording.value) {
+    const hasData = props.amplitudes && props.amplitudes.some((a) => a > 6 || a > 0 && a !== 5);
+    if (!hasData) {
+      simulatedAmplitudes.value = Array.from({ length: 20 }, () => 10 + Math.random() * 40);
+    }
   }
 };
 const toggleRecording = () => {
@@ -62,43 +75,82 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :class="[ns.b(), ns.is('recording', props.recording || localRecording)]" :style="themeStyle">
-    <div :class="ns.e('body')">
-      <!-- Waveform Visualizer -->
-      <Transition name="yh-voice-expand">
-        <div v-if="props.recording || localRecording" :class="ns.e('visualizer')">
-          <div :class="ns.e('bars')">
-            <span
-              v-for="(amp, i) in simulatedAmplitudes"
-              :key="i"
-              :style="{ height: amp + 'px' }"
-              :class="ns.e('bar')"
-            ></span>
+  <Teleport to="body" :disabled="props.variant === 'inline' || !props.teleport">
+    <div
+      :class="[ns.b(), ns.m(props.variant), ns.m(props.position), ns.is('recording', props.recording || localRecording)]"
+      :style="[props.variant !== 'inline' ? {
+  position: props.teleport ? 'fixed' : 'relative',
+  [props.position.split('-')[0]]: props.teleport ? props.offset[0] + 'px' : 'auto',
+  [props.position.split('-')[1]]: props.teleport ? props.offset[1] + 'px' : 'auto'
+} : {}, themeStyle]"
+    >
+      <div :class="ns.e('body')">
+        <!-- Waveform Visualizer -->
+        <Transition name="yh-voice-expand">
+          <div v-if="props.recording || localRecording" :class="ns.e('visualizer')">
+            <!-- Sphere Visualizer (Pulsing Ball) -->
+            <template v-if="props.variant === 'sphere'">
+              <div :class="ns.e('sphere-glow')"></div>
+              <div
+                v-for="i in 3"
+                :key="i"
+                :class="ns.e('sphere-pulse')"
+                :style="{
+  animationDelay: i * 0.5 + 's',
+  transform: `scale(${1 + (simulatedAmplitudes[i] || 0) / 100})`
+}"
+              ></div>
+            </template>
+
+            <!-- Standard Wave Visualizer -->
+            <div v-else :class="ns.e('bars')">
+              <span
+                v-for="(amp, i) in simulatedAmplitudes"
+                :key="i"
+                :style="{
+  height: amp + 'px'
+}"
+                :class="ns.e('bar')"
+              ></span>
+            </div>
+
+            <span v-if="props.variant !== 'sphere'" :class="ns.e('hint')">{{
+              t("ai.voice.listening") || "Listening..."
+            }}</span>
+
+            <!-- Cancel Button -->
+            <button :class="ns.e('cancel')" @click="handleCancel" title="Cancel">
+              <YhIcon name="close" />
+            </button>
           </div>
-          <span :class="ns.e('hint')">{{ t("ai.voice.listening") || "Listening..." }}</span>
-          <!-- Cancel Button -->
-          <button :class="ns.e('cancel')" @click="handleCancel" title="Cancel">
-            <YhIcon name="close" />
-          </button>
-        </div>
-      </Transition>
+        </Transition>
 
-      <!-- Main Trigger Button -->
-      <button
-        :class="[ns.e('trigger'), {
+        <!-- Main Trigger Button -->
+        <button
+          :class="[ns.e('trigger'), {
   'is-active': props.recording || localRecording
 }]"
-        @click="toggleRecording"
-      >
-        <span :class="ns.e('mic')">
-          <YhIcon :name="props.recording || localRecording ? 'video-pause' : 'microphone'" />
-        </span>
-        <span v-if="!(props.recording || localRecording)" :class="ns.e('label')">
-          <slot>{{ t("ai.voice.trigger") || "" }}</slot>
-        </span>
-      </button>
+          @click="toggleRecording"
+        >
+          <span :class="ns.e('mic')">
+            <template v-if="props.variant === 'sphere' && (props.recording || localRecording)">
+              <div :class="ns.e('sphere-inner')"></div>
+            </template>
+            <YhIcon
+              v-else
+              :name="props.recording || localRecording ? 'video-pause' : 'microphone'"
+            />
+          </span>
+          <span
+            v-if="!(props.recording || localRecording) && props.variant === 'inline'"
+            :class="ns.e('label')"
+          >
+            <slot>{{ t("ai.voice.trigger") || "" }}</slot>
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <style>
@@ -574,6 +626,44 @@ html.dark {
     opacity: 1;
   }
 }
+@keyframes yh-sphere-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(3);
+    opacity: 0;
+  }
+}
+@keyframes yh-sphere-glow {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0.8;
+  }
+}
+@keyframes yh-sphere-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+@keyframes yh-sphere-inner-pulse {
+  0% {
+    opacity: 0.7;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
 .yh-voice-expand-enter-active,
 .yh-voice-expand-leave-active {
   transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
@@ -597,6 +687,65 @@ html.dark {
   position: relative;
   font-family: var(--yh-font-family);
 }
+.yh-ai-voice-trigger--floating {
+  z-index: 2000;
+}
+.yh-ai-voice-trigger--floating .yh-ai-voice-trigger__body {
+  box-shadow: var(--yh-box-shadow-dark);
+  border: 1px solid var(--yh-border-color-lighter);
+}
+
+.yh-ai-voice-trigger--sphere {
+  --yh-ai-voice-trigger-btn-size: 56px;
+  z-index: 2000;
+}
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__body {
+  padding: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+  overflow: visible;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__trigger {
+  background: var(--yh-color-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 4px 12px rgba(var(--yh-color-primary-rgb), 0.4);
+  z-index: 2;
+}
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__trigger.is-active {
+  animation: yh-sphere-float 3s ease-in-out infinite;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, var(--yh-color-primary-light-3) 0%, transparent 70%);
+  filter: blur(10px);
+  opacity: 0.6;
+  animation: yh-sphere-glow 2s infinite alternate;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--yh-color-primary-light-5);
+  opacity: 0;
+  animation: yh-sphere-pulse 2s infinite;
+}
+
+.yh-ai-voice-trigger--sphere .yh-ai-voice-trigger__sphere-inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  animation: yh-sphere-inner-pulse 1s infinite alternate;
+}
+
 .yh-ai-voice-trigger__body {
   display: flex;
   align-items: center;
@@ -612,9 +761,6 @@ html.dark {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
-.yh-ai-voice-trigger {
-  /* Trigger Button */
-}
 .yh-ai-voice-trigger__trigger {
   display: inline-flex;
   align-items: center;
@@ -623,11 +769,13 @@ html.dark {
   background: transparent;
   cursor: pointer;
   border-radius: 50%;
-  width: var(--yh-ai-voice-trigger-btn-size);
+  min-width: var(--yh-ai-voice-trigger-btn-size);
   height: var(--yh-ai-voice-trigger-btn-size);
   color: var(--yh-text-color-primary, #303133);
   transition: all 0.2s;
   flex-shrink: 0;
+  position: relative;
+  padding: 0;
 }
 .yh-ai-voice-trigger__trigger .yh-icon {
   font-size: 16px;
@@ -639,22 +787,25 @@ html.dark {
 }
 .yh-ai-voice-trigger__trigger.is-active {
   background-color: var(--yh-ai-voice-trigger-active-color);
-  color: #fff;
+  color: #fff !important;
   animation: yh-pulse-mic 2s infinite;
 }
 .yh-ai-voice-trigger__trigger.is-active .yh-icon {
   transform: scale(0.9);
 }
 
-.yh-ai-voice-trigger__label {
-  margin-left: 6px;
-  font-size: 14px;
-  display: none;
+.yh-ai-voice-trigger--inline .yh-ai-voice-trigger__trigger:not(.is-active) {
+  width: auto;
+  padding: 0 12px;
+  border-radius: 16px;
+  border: 1px solid var(--yh-border-color-lighter);
+  background-color: var(--yh-bg-color);
 }
-
-.yh-ai-voice-trigger {
-  /* Waveform Visualizer Area */
+.yh-ai-voice-trigger--inline .yh-ai-voice-trigger__trigger:not(.is-active):hover {
+  border-color: var(--yh-color-primary);
+  background-color: var(--yh-color-primary-light-9);
 }
+
 .yh-ai-voice-trigger__visualizer {
   display: flex;
   align-items: center;