64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
|
||
interface VoiceRecognitionProps {
|
||
onResult: (text: string) => void
|
||
onStop: () => void
|
||
}
|
||
|
||
export function VoiceRecognition({ onResult, onStop }: VoiceRecognitionProps) {
|
||
const [isListening, setIsListening] = useState(true)
|
||
|
||
useEffect(() => {
|
||
// 模拟语音识别
|
||
const timer = setTimeout(() => {
|
||
const mockResults = [
|
||
"你好，我想了解一下私域运营的基本策略",
|
||
"请帮我分析一下最近的销售数据",
|
||
"我需要一份客户画像分析报告",
|
||
"如何提高朋友圈内容的互动率？",
|
||
"帮我生成一个营销方案",
|
||
]
|
||
|
||
const randomResult = mockResults[Math.floor(Math.random() * mockResults.length)]
|
||
onResult(randomResult)
|
||
setIsListening(false)
|
||
}, 2000)
|
||
|
||
return () => {
|
||
clearTimeout(timer)
|
||
}
|
||
}, [onResult])
|
||
|
||
useEffect(() => {
|
||
if (!isListening) {
|
||
onStop()
|
||
}
|
||
}, [isListening, onStop])
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/20 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg p-6 shadow-xl max-w-sm w-full">
|
||
<div className="flex flex-col items-center">
|
||
<div className="relative w-20 h-20 mb-4">
|
||
<div className="absolute inset-0 bg-blue-100 rounded-full animate-ping opacity-25"></div>
|
||
<div className="relative bg-blue-500 rounded-full w-20 h-20 flex items-center justify-center">
|
||
<div className="w-4 h-16 bg-white rounded-full animate-pulse"></div>
|
||
</div>
|
||
</div>
|
||
<h3 className="text-lg font-medium mb-2">正在聆听...</h3>
|
||
<p className="text-gray-500 text-center">请说出您的问题或指令，语音识别将自动结束</p>
|
||
<button
|
||
className="mt-4 px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors"
|
||
onClick={onStop}
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|