import React, { useState, useEffect } from 'react';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import { Button, Toast, TextareaItem } from 'dingtalk-design-mobile';
|
import NavBarPage from '../../../../components/NavBarPage';
|
import useCharacterCounter from '../CharacterCounter';
|
import './index.less';
|
|
const VoiceRecognition = () => {
|
const history = useHistory();
|
const location = useLocation();
|
const [recognizedText, setRecognizedText] = useState('');
|
const [isRecording, setIsRecording] = useState(false);
|
const [charCount, setCharCount] = useState(0);
|
|
// 从URL查询参数中获取标题
|
const queryParams = new URLSearchParams(location.search);
|
const pageTitle = queryParams.get('title') || '语音识别';
|
|
// 根据标题设置不同的字数限制和提示文本
|
const getConfig = () => {
|
if (pageTitle === '事项概况') {
|
return {
|
maxLength: 2000,
|
placeholder: '请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
|
};
|
} else if (pageTitle === '事项申请') {
|
return {
|
maxLength: 500,
|
placeholder: '希望相关部门如何处理，建议分条描述，如请求1，请求2...'
|
};
|
}
|
return {
|
maxLength: 1000,
|
placeholder: '请说话，系统将自动转换为文字'
|
};
|
};
|
|
const { maxLength, placeholder } = getConfig();
|
|
// 使用字符计数组件
|
const characterCounter = useCharacterCounter({
|
value: recognizedText,
|
maxLength: maxLength,
|
onChange: setRecognizedText,
|
onCountChange: setCharCount
|
});
|
|
// 处理文本变化
|
const handleTextChange = (value) => {
|
characterCounter.handleTextChange(value);
|
};
|
|
// 开始语音识别
|
const handleStartRecording = () => {
|
setIsRecording(true);
|
Toast.show('开始录音...');
|
// 这里应该是实际开始录音的代码
|
// 实际项目中应该调用语音识别API
|
|
// 模拟获取识别结果 - 实际项目中应删除
|
setTimeout(() => {
|
setIsRecording(false);
|
const simulatedText = '这是语音识别的示例文本，实际项目中应该是真实的识别结果。';
|
handleTextChange(simulatedText);
|
}, 2000);
|
};
|
|
// 结束语音识别
|
const handleStopRecording = () => {
|
setIsRecording(false);
|
Toast.show('录音已停止');
|
};
|
|
// 保存并返回
|
const handleSave = () => {
|
if (recognizedText) {
|
// 从sessionStorage获取回调类型
|
const callbackType = sessionStorage.getItem('voiceCallbackType');
|
|
// 通过自定义事件传递识别结果
|
window.dispatchEvent(new CustomEvent('voiceRecognitionComplete', {
|
detail: {
|
text: recognizedText,
|
type: callbackType
|
}
|
}));
|
}
|
history.goBack();
|
};
|
|
return (
|
<NavBarPage title={pageTitle} leftContentFunc={() => history.goBack()}>
|
<div className="voice-recognition-container">
|
{/* 输入区域 */}
|
<div className="input-area">
|
<div className="form-item">
|
<div className="form-label">{pageTitle}</div>
|
<div className="textarea-container">
|
<TextareaItem
|
placeholder={placeholder}
|
rows={10}
|
className="recognition-textarea"
|
value={recognizedText}
|
onChange={handleTextChange}
|
/>
|
</div>
|
<div className="word-count">
|
<div className="count-wrapper">
|
<span className="current-count" style={{ color: characterCounter.isExceeded ? '#F53F3F' : '#1a6fb8' }}>{charCount}</span>
|
<span className="total-count" style={{ color: characterCounter.isExceeded ? '#F53F3F' : 'inherit' }}>/{maxLength} 字</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 按钮功能区域 */}
|
<div className="button-area">
|
{recognizedText ? (
|
<>
|
<Button
|
className="save-button"
|
onClick={handleSave}
|
>
|
保存
|
</Button>
|
<Button
|
className="voice-button"
|
onTouchStart={handleStartRecording}
|
onTouchEnd={handleStopRecording}
|
>
|
按住说话
|
</Button>
|
</>
|
) : (
|
<Button
|
className="voice-button center"
|
onTouchStart={handleStartRecording}
|
onTouchEnd={handleStopRecording}
|
>
|
按住说话
|
</Button>
|
)}
|
</div>
|
</div>
|
</NavBarPage>
|
);
|
};
|
|
export default VoiceRecognition;
|
