@wq-hook/volcano-react 1.0.4 → 1.0.6

package/dist/index.d.mts

@@ -678,10 +678,10 @@ interface AudioWaveVisualizerProps {
     color?: string | [string, string];
     /** 波形条数 */
     bars?: number;
-    /** 高度（px） */
-    height?: number;
-    /** 宽度（px） */
-    width?: number;
+    /** 高度：数字（像素）或 CSS 字符串（如 "60px"、"100%"、"5rem"） */
+    height?: number | string;
+    /** 宽度：数字（像素）或 CSS 字符串（如 "100%"、"80%"、"300px"） */
+    width?: number | string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */

package/dist/index.d.ts

@@ -678,10 +678,10 @@ interface AudioWaveVisualizerProps {
     color?: string | [string, string];
     /** 波形条数 */
     bars?: number;
-    /** 高度（px） */
-    height?: number;
-    /** 宽度（px） */
-    width?: number;
+    /** 高度：数字（像素）或 CSS 字符串（如 "60px"、"100%"、"5rem"） */
+    height?: number | string;
+    /** 宽度：数字（像素）或 CSS 字符串（如 "100%"、"80%"、"300px"） */
+    width?: number | string;
     /** 自定义类名 */
     className?: string;
     /** 自定义样式 */

package/dist/index.js

@@ -1865,10 +1865,40 @@ var AudioWaveVisualizer = ({
   styleObj
 }) => {
   const canvasRef = (0, import_react5.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
   const requestRef = (0, import_react5.useRef)(null);
+  const isWidthResponsive = typeof width === "string";
+  const isHeightResponsive = typeof height === "string";
+  const [canvasWidth, setCanvasWidth] = (0, import_react5.useState)(() => {
+    return typeof width === "number" ? width : 200;
+  });
+  const [canvasHeight, setCanvasHeight] = (0, import_react5.useState)(() => {
+    return typeof height === "number" ? height : 60;
+  });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  (0, import_react5.useEffect)(() => {
+    if (!containerRef.current) return;
+    if (!isWidthResponsive && !isHeightResponsive) return;
+    const container = containerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width: containerWidth, height: containerHeight } = entry.contentRect;
+        if (isWidthResponsive) {
+          setCanvasWidth(Math.floor(containerWidth * dpr));
+        }
+        if (isHeightResponsive) {
+          setCanvasHeight(Math.floor(containerHeight * dpr));
+        }
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isWidthResponsive, isHeightResponsive, dpr]);
   const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
   const textColor = Array.isArray(color) ? color[0] : color;
-  const draw = () => {
+  const draw = (0, import_react5.useCallback)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1889,9 +1919,10 @@ var AudioWaveVisualizer = ({
     ctx.strokeStyle = fillStyle;
     if (style === "bar" && frequencyData) {
       const barWidth = w / bars;
-      const step = Math.floor(frequencyData.length / bars);
       for (let i = 0; i < bars; i++) {
-        const value = frequencyData[i * step] || 0;
+        const halfLength = frequencyData.length / 2;
+        const index = Math.floor(i / bars * halfLength);
+        const value = frequencyData[index] || 0;
         const percent = value / 255;
         const barHeight = h * percent;
         ctx.fillRect(i * barWidth, h - barHeight, barWidth - 2, barHeight);
@@ -1929,7 +1960,7 @@ var AudioWaveVisualizer = ({
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
     }
-  };
+  }, [isPlaying, isPaused, frequencyData, timeDomainData, style, color, bars]);
   (0, import_react5.useEffect)(() => {
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
@@ -1946,26 +1977,36 @@ var AudioWaveVisualizer = ({
     frequencyData,
     timeDomainData,
     style,
-    color
+    color,
+    draw
   ]);
+  const actualCanvasWidth = isWidthResponsive ? canvasWidth : width;
+  const actualCanvasHeight = isHeightResponsive ? canvasHeight : height;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      ref: containerRef,
       className,
       style: {
         display: "inline-flex",
         flexDirection: "column",
         gap: "4px",
-        width,
+        width: isWidthResponsive ? width : width,
+        height: isHeightResponsive ? height : height,
         ...styleObj
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "canvas",
         {
           ref: canvasRef,
-          width,
-          height,
-          style: { display: "block" }
+          width: actualCanvasWidth,
+          height: actualCanvasHeight,
+          style: {
+            display: "block",
+            // 响应式模式下，CSS 尺寸为 100%；固定模式下使用像素值
+            width: isWidthResponsive ? "100%" : actualCanvasWidth,
+            height: isHeightResponsive ? "100%" : actualCanvasHeight
+          }
         }
       )
     }

package/dist/index.mjs

@@ -1805,7 +1805,7 @@ function useStreamTTS({
 }
 
 // src/components/AudioWaveVisualizer.tsx
-import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState5, useCallback as useCallback5 } from "react";
 import { jsx } from "react/jsx-runtime";
 var AudioWaveVisualizer = ({
   isPlaying,
@@ -1821,10 +1821,40 @@ var AudioWaveVisualizer = ({
   styleObj
 }) => {
   const canvasRef = useRef5(null);
+  const containerRef = useRef5(null);
   const requestRef = useRef5(null);
+  const isWidthResponsive = typeof width === "string";
+  const isHeightResponsive = typeof height === "string";
+  const [canvasWidth, setCanvasWidth] = useState5(() => {
+    return typeof width === "number" ? width : 200;
+  });
+  const [canvasHeight, setCanvasHeight] = useState5(() => {
+    return typeof height === "number" ? height : 60;
+  });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  useEffect4(() => {
+    if (!containerRef.current) return;
+    if (!isWidthResponsive && !isHeightResponsive) return;
+    const container = containerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width: containerWidth, height: containerHeight } = entry.contentRect;
+        if (isWidthResponsive) {
+          setCanvasWidth(Math.floor(containerWidth * dpr));
+        }
+        if (isHeightResponsive) {
+          setCanvasHeight(Math.floor(containerHeight * dpr));
+        }
+      }
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isWidthResponsive, isHeightResponsive, dpr]);
   const progressBackground = Array.isArray(color) ? `linear-gradient(90deg, ${color[0]}, ${color[1]})` : color;
   const textColor = Array.isArray(color) ? color[0] : color;
-  const draw = () => {
+  const draw = useCallback5(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1845,9 +1875,10 @@ var AudioWaveVisualizer = ({
     ctx.strokeStyle = fillStyle;
     if (style === "bar" && frequencyData) {
       const barWidth = w / bars;
-      const step = Math.floor(frequencyData.length / bars);
       for (let i = 0; i < bars; i++) {
-        const value = frequencyData[i * step] || 0;
+        const halfLength = frequencyData.length / 2;
+        const index = Math.floor(i / bars * halfLength);
+        const value = frequencyData[index] || 0;
         const percent = value / 255;
         const barHeight = h * percent;
         ctx.fillRect(i * barWidth, h - barHeight, barWidth - 2, barHeight);
@@ -1885,7 +1916,7 @@ var AudioWaveVisualizer = ({
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
     }
-  };
+  }, [isPlaying, isPaused, frequencyData, timeDomainData, style, color, bars]);
   useEffect4(() => {
     if (isPlaying && !isPaused) {
       requestRef.current = requestAnimationFrame(draw);
@@ -1902,26 +1933,36 @@ var AudioWaveVisualizer = ({
     frequencyData,
     timeDomainData,
     style,
-    color
+    color,
+    draw
   ]);
+  const actualCanvasWidth = isWidthResponsive ? canvasWidth : width;
+  const actualCanvasHeight = isHeightResponsive ? canvasHeight : height;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: containerRef,
       className,
       style: {
         display: "inline-flex",
         flexDirection: "column",
         gap: "4px",
-        width,
+        width: isWidthResponsive ? width : width,
+        height: isHeightResponsive ? height : height,
         ...styleObj
       },
       children: /* @__PURE__ */ jsx(
         "canvas",
         {
           ref: canvasRef,
-          width,
-          height,
-          style: { display: "block" }
+          width: actualCanvasWidth,
+          height: actualCanvasHeight,
+          style: {
+            display: "block",
+            // 响应式模式下，CSS 尺寸为 100%；固定模式下使用像素值
+            width: isWidthResponsive ? "100%" : actualCanvasWidth,
+            height: isHeightResponsive ? "100%" : actualCanvasHeight
+          }
         }
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wq-hook/volcano-react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Volcano Engine ASR & TTS React Hooks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",