# SoundWave 组件使用示例

主入口推荐直接使用 **`Wave`**、**`Halo`** 与 **`Input`** 组合（与源码导出一致）。以下为片段，实际页面请自行布局。

---

## 实时录音可视化（Input 内置）

```tsx
import { Input } from '@alipay/agentic-design-mobile';

export function SoundWaveWithInput() {
  return (
    <Input
      allowAudio={{
        onChange: (value) => {
          console.log('录音完成', value);
        },
      }}
      placeholder="按住说话，显示音波效果"
    />
  );
}
```

---

## 波浪模式（Wave）

```tsx
import { Wave } from '@alipay/agentic-design-mobile';

export function WaveMode() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Wave waveMode="wave" count={18} />
    </div>
  );
}
```

---

## 少量音波条装饰（无音频源）

```tsx
import { Wave } from '@alipay/agentic-design-mobile';

export function WaveDecorative() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Wave waveMode="wave" count={4} minHeight={4} maxHeight={28} />
    </div>
  );
}
```

---

## 自定义 Wave 样式

```tsx
import { Wave } from '@alipay/agentic-design-mobile';

export function WaveCustom() {
  return (
    <Wave
      waveMode="volume"
      count={12}
      color="#ff0000"
      minHeight={10}
      maxHeight={50}
      updateInterval={50}
    />
  );
}
```

---

## 蓝色光圈 + 上滑取消变粉（Input + Halo）

```tsx
import { useState } from 'react';
import { Halo, Input } from '@alipay/agentic-design-mobile';

export function HaloWithInput() {
  const [stream, setStream] = useState<MediaStream | null>(null);
  const [recordingState, setRecordingState] = useState<'idle' | 'recording' | 'willCancel'>('idle');
  const haloColor = recordingState === 'willCancel' ? 'pink' : 'blue';

  return (
    <div style={{ position: 'relative', minHeight: 200, display: 'flex', alignItems: 'center' }}>
      {stream && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            pointerEvents: 'none',
            zIndex: 0,
          }}
        >
          <Halo source={stream} color={haloColor} />
        </div>
      )}
      <div style={{ position: 'relative', zIndex: 1, width: '100%' }}>
        <Input
          allowAudio={{
            onStreamChange: setStream,
            onRecordingStateChange: setRecordingState,
            onChange: (value) => console.log('录音完成', value),
          }}
          placeholder="按住说话，显示光圈；上滑取消时变粉"
        />
      </div>
    </div>
  );
}
```