feat: init
This commit is contained in:
24
projects/translate-h5/src/view/app/App.tsx
Normal file
24
projects/translate-h5/src/view/app/App.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import { RenderRoutes } from "@/route/render-routes.tsx";
|
||||
import { axiosInstance } from "@/http/axios-instance.ts";
|
||||
import { configure } from "axios-hooks";
|
||||
import enUS from "antd-mobile/es/locales/en-US";
|
||||
import { ConfigProvider } from "antd-mobile";
|
||||
import { useI18nStore } from "@/store/i18n.ts";
|
||||
import zhCN from "antd-mobile/es/locales/zh-CN";
|
||||
|
||||
function App() {
|
||||
configure({
|
||||
axios: axiosInstance,
|
||||
});
|
||||
const i18nStore = useI18nStore();
|
||||
return (
|
||||
<>
|
||||
<ConfigProvider locale={i18nStore.lang === "en_US" ? enUS : zhCN}>
|
||||
<RenderRoutes />
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
0
projects/translate-h5/src/view/archives/index.less
Normal file
0
projects/translate-h5/src/view/archives/index.less
Normal file
13
projects/translate-h5/src/view/archives/index.tsx
Normal file
13
projects/translate-h5/src/view/archives/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
// 档案
|
||||
import MainLayout from "@/layout/main/mainLayout";
|
||||
import "./index.less";
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<MainLayout isShowNavBar={true}>
|
||||
<div className="archives"></div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
18
projects/translate-h5/src/view/error/page404.tsx
Normal file
18
projects/translate-h5/src/view/error/page404.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import MainLayout from "@/layout/main/mainLayout";
|
||||
import { Button } from "antd-mobile";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
function Index() {
|
||||
const navigate = useNavigate();
|
||||
const goHome = () => {
|
||||
navigate("/");
|
||||
};
|
||||
return (
|
||||
<MainLayout>
|
||||
<Button onClick={goHome} color="primary">
|
||||
404
|
||||
</Button>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,46 @@
|
||||
.message {
|
||||
flex: 1 auto;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
background: #eee;
|
||||
}
|
||||
.voice-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding-right: 12px;
|
||||
.time {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
.tips {
|
||||
// align-self: stretch;
|
||||
// display: grid;
|
||||
// align-items: center;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
.translate {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
176
projects/translate-h5/src/view/home/component/message/index.tsx
Normal file
176
projects/translate-h5/src/view/home/component/message/index.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Divider, Image, SpinLoading, Toast } from "antd-mobile";
|
||||
import { VoiceIcon } from "@workspace/shared";
|
||||
import dogSvg from "@/assets/translate/dog.svg";
|
||||
import catSvg from "@/assets/translate/cat.svg";
|
||||
import pigSvg from "@/assets/translate/pig.svg";
|
||||
import { Message } from "../../types";
|
||||
import "./index.less";
|
||||
|
||||
interface DefinedProps {
|
||||
data: Message[];
|
||||
isRecording: boolean;
|
||||
}
|
||||
|
||||
function Index(props: DefinedProps) {
|
||||
const { data, isRecording } = props;
|
||||
const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
|
||||
const [isPlaying, setIsPlating] = useState(false);
|
||||
const [currentPlayingId, setCurrentPlayingId] = useState<number>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isRecording) {
|
||||
stopAllAudio();
|
||||
}
|
||||
}, [isRecording]);
|
||||
const onVoiceChange = () => {
|
||||
setIsPlating(!isPlaying);
|
||||
};
|
||||
const playAudio = (messageId: number, audioUrl: string) => {
|
||||
if (isRecording) {
|
||||
Toast.show("录音中，无法播放音频");
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentPlayingId === messageId) {
|
||||
if (audioRefs.current[messageId]) {
|
||||
audioRefs.current[messageId].pause();
|
||||
audioRefs.current[messageId].currentTime = 0;
|
||||
}
|
||||
setCurrentPlayingId(undefined);
|
||||
setIsPlating(false);
|
||||
return;
|
||||
}
|
||||
|
||||
stopAllAudio();
|
||||
if (!audioRefs.current[messageId]) {
|
||||
audioRefs.current[messageId] = new Audio(audioUrl);
|
||||
}
|
||||
|
||||
const audio = audioRefs.current[messageId];
|
||||
audio.currentTime = 0;
|
||||
|
||||
audio.onended = () => {
|
||||
setCurrentPlayingId(undefined);
|
||||
setIsPlating(false);
|
||||
};
|
||||
|
||||
audio.onerror = (error) => {
|
||||
console.error("音频播放错误:", error);
|
||||
Toast.show("音频播放失败");
|
||||
setIsPlating(false);
|
||||
};
|
||||
|
||||
audio
|
||||
.play()
|
||||
.then(() => {
|
||||
setCurrentPlayingId(messageId);
|
||||
setIsPlating(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("音频播放失败:", error);
|
||||
Toast.show("音频播放失败");
|
||||
});
|
||||
};
|
||||
const stopAllAudio = () => {
|
||||
if (currentPlayingId && audioRefs.current[currentPlayingId]) {
|
||||
audioRefs.current[currentPlayingId].pause();
|
||||
audioRefs.current[currentPlayingId].currentTime = 0;
|
||||
setIsPlating(false);
|
||||
setCurrentPlayingId(undefined);
|
||||
}
|
||||
|
||||
Object.values(audioRefs.current).forEach((audio) => {
|
||||
if (!audio.paused) {
|
||||
audio.pause();
|
||||
audio.currentTime = 0;
|
||||
}
|
||||
});
|
||||
};
|
||||
const renderAvatar = (type?: "pig" | "cat" | "dog") => {
|
||||
if (type === "pig") {
|
||||
<Image
|
||||
src={pigSvg}
|
||||
width={40}
|
||||
height={40}
|
||||
fit="cover"
|
||||
style={{ borderRadius: 32 }}
|
||||
/>;
|
||||
}
|
||||
if (type === "cat") {
|
||||
return (
|
||||
<Image
|
||||
src={catSvg}
|
||||
width={40}
|
||||
height={40}
|
||||
fit="cover"
|
||||
style={{ borderRadius: 32 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Image
|
||||
src={dogSvg}
|
||||
width={40}
|
||||
height={40}
|
||||
fit="cover"
|
||||
style={{ borderRadius: 32 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="message">
|
||||
{data.map((item, index) => (
|
||||
<div
|
||||
className="item"
|
||||
key={index}
|
||||
onClick={() => playAudio(item.id, item.audioUrl)}
|
||||
>
|
||||
{renderAvatar(item.type)}
|
||||
<div className="rig">
|
||||
<div>
|
||||
<span className="name">{item.name}</span>
|
||||
<Divider direction="vertical" style={{ margin: "0px 8px" }} />
|
||||
<span className="">{item.timestamp}</span>
|
||||
</div>
|
||||
<div className="voice-container">
|
||||
<VoiceIcon
|
||||
onChange={onVoiceChange}
|
||||
isPlaying={isPlaying && currentPlayingId === item.id}
|
||||
/>
|
||||
<div className="time">{item.duration}''</div>
|
||||
</div>
|
||||
{item.isTranslating ? (
|
||||
<div className="translate">
|
||||
<SpinLoading color="default" style={{ "--size": "12px" }} />
|
||||
<span>翻译中...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="translate">{item.translatedText}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="item">
|
||||
<div className="avatar"></div>
|
||||
<div className="rig">
|
||||
<div>
|
||||
<span className="name">生无可恋喵</span>
|
||||
<Divider direction="vertical" style={{ margin: "0px 8px" }} />
|
||||
<span className="">15:00</span>
|
||||
</div>
|
||||
<div className="voice-container">
|
||||
<VoiceIcon isPlaying={false} />
|
||||
<div className="tips">
|
||||
{isRecording ? "录制中..." : "轻点麦克风录制"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,22 @@
|
||||
.search {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
.adm-search-bar-input-box-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.adm-search-bar {
|
||||
flex: 1 auto;
|
||||
}
|
||||
.all {
|
||||
height: 34px !important;
|
||||
background: var(--adm-color-fill-content);
|
||||
border-radius: 6px;
|
||||
padding: 0px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { DownOne } from "@icon-park/react";
|
||||
import {
|
||||
ActionSheet,
|
||||
Dropdown,
|
||||
type DropdownRef,
|
||||
Popup,
|
||||
Radio,
|
||||
SearchBar,
|
||||
Space,
|
||||
} from "antd-mobile";
|
||||
import { RadioValue } from "antd-mobile/es/components/radio";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
interface PropsConfig {
|
||||
handleAllAni: () => void;
|
||||
}
|
||||
const allAni = ["全部宠物", "丑丑", "胖胖", "可可"];
|
||||
function Index(props: PropsConfig) {
|
||||
const [aniName, setAniName] = useState<string>("全部宠物");
|
||||
const animenuRef = useRef<DropdownRef>(null);
|
||||
const handleAniSelect = (val: RadioValue) => {
|
||||
setAniName(allAni[val as number]);
|
||||
animenuRef.current?.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="search">
|
||||
<SearchBar
|
||||
placeholder="请输入翻译内容"
|
||||
style={{
|
||||
"--border-radius": "6px",
|
||||
"--height": "32px",
|
||||
"--padding-left": "12px",
|
||||
}}
|
||||
/>
|
||||
<Dropdown className="all" ref={animenuRef}>
|
||||
<Dropdown.Item key="ani" title={aniName}>
|
||||
<div style={{ padding: 12 }}>
|
||||
<Radio.Group defaultValue="default" onChange={handleAniSelect}>
|
||||
<Space direction="vertical" block>
|
||||
<Radio block value="0">
|
||||
全部宠物
|
||||
</Radio>
|
||||
<Radio block value="1">
|
||||
丑丑
|
||||
</Radio>
|
||||
<Radio block value="2">
|
||||
胖胖
|
||||
</Radio>
|
||||
<Radio block value="3">
|
||||
可可
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</Dropdown.Item>
|
||||
</Dropdown>
|
||||
{/* <div className="all" onClick={handleAllAni}>
|
||||
<span>全部宠物</span>
|
||||
<DownOne
|
||||
theme="filled"
|
||||
size="16"
|
||||
strokeWidth={3}
|
||||
strokeLinecap="butt"
|
||||
/>
|
||||
</div>
|
||||
<ActionSheet
|
||||
visible={visible}
|
||||
actions={actions}
|
||||
onClose={() => setVisible(false)}
|
||||
/> */}
|
||||
{/* <Popup
|
||||
visible={visible}
|
||||
onClose={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="popup-head">
|
||||
<span>宠物</span>
|
||||
</div>
|
||||
11111
|
||||
</Popup> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,54 @@
|
||||
.voice-record {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 12px 0px;
|
||||
box-shadow: 1px 2px 4px 3px #eee;
|
||||
.adm-progress-circle-info {
|
||||
height: 32px;
|
||||
}
|
||||
.isRecording {
|
||||
.adm-progress-circle {
|
||||
border-radius: 50%;
|
||||
animation: recordingButtonPulse 1s infinite;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
color: #9f9f9f;
|
||||
}
|
||||
.circle {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: rgba(22, 119, 255, 1);
|
||||
}
|
||||
|
||||
.cancleBtn {
|
||||
position: absolute;
|
||||
border: 2px solid rgba(230, 244, 255, 1);
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
right: 60px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@keyframes recordingButtonPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.5);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0 0 0 14px rgba(255, 77, 79, 0);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 14px rgba(255, 77, 79, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
277
projects/translate-h5/src/view/home/component/voice/index.tsx
Normal file
277
projects/translate-h5/src/view/home/component/voice/index.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
|
||||
import { Button, Dialog, Image, ProgressCircle, Toast } from "antd-mobile";
|
||||
import microphoneSvg from "@/assets/translate/microphone.svg";
|
||||
import microphoneDisabledSvg from "@/assets/translate/microphoneDisabledSvg.svg";
|
||||
import { createStartRecordSound, createSendSound } from "@/utils/voice";
|
||||
import "./index.less";
|
||||
import { Message } from "../../types";
|
||||
import { CloseCircleOutline } from "antd-mobile-icons";
|
||||
|
||||
interface DefinedProps {
|
||||
onRecordingComplete: (url: string, finalDuration: number) => void;
|
||||
isRecording: boolean;
|
||||
onSetIsRecording: (flag: boolean) => void;
|
||||
}
|
||||
function Index(props: DefinedProps) {
|
||||
const { isRecording } = props;
|
||||
const [hasPermission, setHasPermission] = useState<boolean>(false); //是否有权限
|
||||
const [isPermissioning, setIsPermissioning] = useState<boolean>(true); //获取权限中
|
||||
const [recordingDuration, setRecordingDuration] = useState<number>(0); //录音时长进度
|
||||
const [isModal, setIsModal] = useState<boolean>(false);
|
||||
const recordingTimerRef = useRef<NodeJS.Timeout>();
|
||||
const isCancelledRef = useRef(false);
|
||||
const recordingStartTimeRef = useRef<number>(0); //录音时长
|
||||
// 音效相关
|
||||
const sendSoundRef = useRef<HTMLAudioElement | null>(null);
|
||||
const startRecordSoundRef = useRef<HTMLAudioElement | null>(null);
|
||||
useEffect(() => {
|
||||
initializeSounds();
|
||||
checkMicrophonePermission();
|
||||
}, [hasPermission]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isRecording) {
|
||||
recorderControls.startRecording();
|
||||
} else {
|
||||
}
|
||||
}, [isRecording]);
|
||||
|
||||
//重置状态
|
||||
const onResetRecordingState = () => {
|
||||
props.onSetIsRecording(false);
|
||||
setRecordingDuration(0);
|
||||
recordingStartTimeRef.current = 0;
|
||||
if (recordingTimerRef.current) {
|
||||
clearInterval(recordingTimerRef.current);
|
||||
recordingTimerRef.current = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const initializeSounds = () => {
|
||||
try {
|
||||
// 发送音效 - 使用Web Audio API生成
|
||||
sendSoundRef.current = createSendSound();
|
||||
|
||||
// 开始录音音效
|
||||
startRecordSoundRef.current = createStartRecordSound();
|
||||
|
||||
console.log("音效初始化完成");
|
||||
} catch (error) {
|
||||
console.error("音效初始化失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const renderBtn = useCallback(() => {
|
||||
if (!hasPermission) {
|
||||
//没有权限
|
||||
return (
|
||||
<>
|
||||
<Image height={80} width={80} src={microphoneDisabledSvg} />
|
||||
{isPermissioning ? (
|
||||
<div className="tips">获取麦克风权限中...</div>
|
||||
) : (
|
||||
<div className="tips">麦克风没有开启权限</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (isRecording) {
|
||||
//正在录音中
|
||||
return (
|
||||
<div onClick={onStopRecording} className="isRecording">
|
||||
<ProgressCircle
|
||||
percent={recordingDuration}
|
||||
style={{ "--size": "80px" }}
|
||||
>
|
||||
<div className="recording-dot">
|
||||
<span className="circle"></span>
|
||||
</div>
|
||||
</ProgressCircle>
|
||||
<Button fill="none" onClick={cancelRecording} className="cancleBtn">
|
||||
取消录制
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
//麦克风状态
|
||||
return (
|
||||
<Image
|
||||
height={80}
|
||||
width={80}
|
||||
src={microphoneSvg}
|
||||
onClick={onStartRecording}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}, [hasPermission, isRecording, recordingDuration]);
|
||||
const checkMicrophonePermission = useCallback(async () => {
|
||||
try {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
setHasPermission(false);
|
||||
setIsPermissioning(false);
|
||||
Toast.show("浏览器不支持录音功能");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (navigator.permissions && navigator.permissions.query) {
|
||||
try {
|
||||
const permissionStatus = await navigator.permissions.query({
|
||||
name: "microphone" as PermissionName,
|
||||
});
|
||||
|
||||
if (permissionStatus.state === "denied") {
|
||||
setHasPermission(false);
|
||||
setIsPermissioning(false);
|
||||
setIsModal(true);
|
||||
|
||||
return false;
|
||||
}
|
||||
if (permissionStatus.state === "granted") {
|
||||
setHasPermission(true);
|
||||
setIsModal(false);
|
||||
return true;
|
||||
}
|
||||
} catch (permError) {
|
||||
console.log("权限查询不支持，继续使用getUserMedia检查");
|
||||
}
|
||||
}
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: true,
|
||||
},
|
||||
});
|
||||
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
setHasPermission(true);
|
||||
return true;
|
||||
} catch (error: any) {
|
||||
if (error.message.includes("user denied permission")) {
|
||||
setIsModal(true);
|
||||
}
|
||||
|
||||
setHasPermission(false);
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isModal) {
|
||||
Dialog.confirm({
|
||||
content: "重新获取麦克风权限",
|
||||
onConfirm: async () => {
|
||||
setIsModal(true);
|
||||
await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: true,
|
||||
},
|
||||
});
|
||||
setHasPermission(true);
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [isModal]);
|
||||
|
||||
const recorderControls = useAudioRecorder(
|
||||
{
|
||||
noiseSuppression: true,
|
||||
echoCancellation: true,
|
||||
autoGainControl: true,
|
||||
},
|
||||
(err) => {
|
||||
console.error("录音错误:", err);
|
||||
Toast.show("录音失败，请重试");
|
||||
onResetRecordingState();
|
||||
}
|
||||
);
|
||||
|
||||
// 播放音效
|
||||
const playSound = async (soundRef: React.RefObject<HTMLAudioElement>) => {
|
||||
try {
|
||||
if (soundRef.current) {
|
||||
await soundRef.current.play();
|
||||
}
|
||||
} catch (error: any) {
|
||||
Toast.show(`播放音效失败:${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
//开始录音
|
||||
const onStartRecording = () => {
|
||||
isCancelledRef.current = false;
|
||||
if (recordingTimerRef.current) {
|
||||
clearInterval(recordingTimerRef.current);
|
||||
recordingTimerRef.current = undefined;
|
||||
}
|
||||
props.onSetIsRecording(true);
|
||||
// recorderControls.startRecording();
|
||||
recordingStartTimeRef.current = Date.now();
|
||||
// 立即开始计时
|
||||
recordingTimerRef.current = setInterval(() => {
|
||||
setRecordingDuration((prev) => prev + 1);
|
||||
}, 1000);
|
||||
};
|
||||
const onStopRecording = useCallback(() => {
|
||||
recorderControls.stopRecording();
|
||||
onResetRecordingState();
|
||||
}, [recorderControls, recordingDuration]);
|
||||
//录音完成
|
||||
// 在发送时检查录音时长
|
||||
const onRecordingComplete = useCallback(
|
||||
(blob: Blob) => {
|
||||
if (isCancelledRef.current) {
|
||||
Toast.show("已取消");
|
||||
return;
|
||||
}
|
||||
// 检查blob有效性
|
||||
if (!blob || blob.size === 0) {
|
||||
Toast.show("录音数据无效，请重新录音");
|
||||
|
||||
return;
|
||||
}
|
||||
const audioUrl = URL.createObjectURL(blob);
|
||||
const audio = new Audio();
|
||||
audio.src = audioUrl;
|
||||
// 计算实际录音时长
|
||||
|
||||
audio.addEventListener("loadedmetadata", () => {
|
||||
if (audio.duration < 1) {
|
||||
Toast.show("录音时间太短，请重新录音");
|
||||
return;
|
||||
}
|
||||
alert(audio.duration);
|
||||
playSound(sendSoundRef);
|
||||
props.onRecordingComplete?.(audioUrl, Math.floor(audio.duration));
|
||||
});
|
||||
},
|
||||
[isCancelledRef, isRecording, sendSoundRef]
|
||||
);
|
||||
|
||||
const cancelRecording = useCallback(() => {
|
||||
isCancelledRef.current = true;
|
||||
recorderControls.stopRecording();
|
||||
onResetRecordingState();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AudioRecorder
|
||||
onRecordingComplete={onRecordingComplete}
|
||||
recorderControls={recorderControls}
|
||||
audioTrackConstraints={{
|
||||
noiseSuppression: true,
|
||||
echoCancellation: true,
|
||||
autoGainControl: true,
|
||||
}}
|
||||
showVisualizer={false}
|
||||
/>
|
||||
<div className={` voice-record`}>{renderBtn()}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(Index);
|
||||
5
projects/translate-h5/src/view/home/detail.tsx
Normal file
5
projects/translate-h5/src/view/home/detail.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
function Index() {
|
||||
return <div className="translate-detail"></div>;
|
||||
}
|
||||
|
||||
export default Index;
|
||||
39
projects/translate-h5/src/view/home/index.less
Normal file
39
projects/translate-h5/src/view/home/index.less
Normal file
@@ -0,0 +1,39 @@
|
||||
.home {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.adm-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.adm-tabs-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
}
|
||||
.adm-tabs-header {
|
||||
border: 0 none;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.adm-tabs-tab {
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-weight: 600;
|
||||
&.adm-tabs-tab-active {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.adm-tabs-tab-line {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.translate-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
31
projects/translate-h5/src/view/home/index.tsx
Normal file
31
projects/translate-h5/src/view/home/index.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import MainLayout from "@/layout/main/mainLayout";
|
||||
import { Button, Tabs } from "antd-mobile";
|
||||
import Translate from "./translate";
|
||||
import "./index.less";
|
||||
|
||||
function Index() {
|
||||
const handleRecordComplete = (audioData: AudioData): void => {
|
||||
console.log("录音完成:", audioData);
|
||||
};
|
||||
|
||||
const handleError = (error: Error): void => {
|
||||
console.error("录音错误:", error);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="home">
|
||||
<Tabs stretch={false}>
|
||||
<Tabs.Tab title="宠物翻译" key="1">
|
||||
<Translate />
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab title="宠物档案" key="2">
|
||||
2
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
157
projects/translate-h5/src/view/home/translate.tsx
Normal file
157
projects/translate-h5/src/view/home/translate.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Image, Toast } from "antd-mobile";
|
||||
import MessageCom from "./component/message";
|
||||
import VoiceRecord from "./component/voice";
|
||||
import {
|
||||
XPopup,
|
||||
FloatingMenu,
|
||||
type FloatMenuItemConfig,
|
||||
} from "@workspace/shared";
|
||||
import type { Message } from "./types";
|
||||
|
||||
import { mockTranslateAudio } from "@/utils/voice";
|
||||
import dogSvg from "@/assets/translate/dog.svg";
|
||||
import catSvg from "@/assets/translate/cat.svg";
|
||||
import pigSvg from "@/assets/translate/pig.svg";
|
||||
import { MoreTwo } from "@icon-park/react";
|
||||
interface DefinedProps {}
|
||||
const menuItems: FloatMenuItemConfig[] = [
|
||||
{ icon: <Image src={dogSvg} />, type: "dog" },
|
||||
{ icon: <Image src={catSvg} />, type: "cat" },
|
||||
{ icon: <Image src={pigSvg} />, type: "pig" },
|
||||
{
|
||||
icon: (
|
||||
<MoreTwo
|
||||
theme="outline"
|
||||
size="24"
|
||||
fill="#666"
|
||||
strokeWidth={3}
|
||||
strokeLinecap="butt"
|
||||
/>
|
||||
),
|
||||
type: "add",
|
||||
},
|
||||
];
|
||||
function Index(props: DefinedProps) {
|
||||
// const data: Message[] = [
|
||||
// {
|
||||
// id: 1,
|
||||
// audioUrl: "",
|
||||
// duration: 0,
|
||||
// translatedText: "",
|
||||
// isTranslating: true,
|
||||
// isPlaying: false,
|
||||
// timestamp: 0,
|
||||
// },
|
||||
// ];
|
||||
const [currentPlayingId, setCurrentPlayingId] = useState<string | null>(null); //当前播放id
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [isRecording, setIsRecording] = useState(false); //是否录音中
|
||||
const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentLanguage(menuItems[0]);
|
||||
}, []);
|
||||
|
||||
//完成录音
|
||||
const onRecordingComplete = useCallback(
|
||||
(audioUrl: string, actualDuration: number) => {
|
||||
const newMessage: Message = {
|
||||
id: Date.now(),
|
||||
type: "dog",
|
||||
audioUrl,
|
||||
name: "生无可恋喵",
|
||||
duration: actualDuration,
|
||||
timestamp: Date.now(),
|
||||
isTranslating: true,
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, newMessage]);
|
||||
setTimeout(() => {
|
||||
onTranslateAudio(newMessage.id);
|
||||
}, 1000);
|
||||
|
||||
Toast.show("语音已发送");
|
||||
},
|
||||
[messages]
|
||||
);
|
||||
|
||||
//翻译
|
||||
const onTranslateAudio = useCallback(
|
||||
async (messageId: number) => {
|
||||
try {
|
||||
const translatedText = await mockTranslateAudio();
|
||||
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === messageId
|
||||
? { ...msg, translatedText, isTranslating: false }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("翻译失败:", error);
|
||||
Toast.show("翻译失败，请重试");
|
||||
|
||||
setMessages((prev) =>
|
||||
prev.map((msg) =>
|
||||
msg.id === messageId
|
||||
? {
|
||||
...msg,
|
||||
isTranslating: false,
|
||||
translatedText: "翻译失败，请重试",
|
||||
}
|
||||
: msg
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
[messages]
|
||||
);
|
||||
|
||||
const onSetIsRecording = (flag: boolean) => {
|
||||
setIsRecording(flag);
|
||||
};
|
||||
|
||||
const onLanguage = (item: FloatMenuItemConfig) => {
|
||||
if (item.type === "add") {
|
||||
setVisible(true);
|
||||
} else {
|
||||
setCurrentLanguage(item);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="translate-container">
|
||||
<MessageCom data={messages} isRecording={isRecording}></MessageCom>
|
||||
<VoiceRecord
|
||||
onRecordingComplete={onRecordingComplete}
|
||||
isRecording={isRecording}
|
||||
onSetIsRecording={onSetIsRecording}
|
||||
/>
|
||||
<FloatingMenu
|
||||
menuItems={menuItems}
|
||||
value={currentLanguage}
|
||||
onChange={onLanguage}
|
||||
/>
|
||||
<XPopup
|
||||
title="选择翻译语种"
|
||||
visible={visible}
|
||||
onClose={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="card">
|
||||
<span>快捷选项</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<span>宠物语种</span>
|
||||
</div>
|
||||
</XPopup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
12
projects/translate-h5/src/view/home/types.ts
Normal file
12
projects/translate-h5/src/view/home/types.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export interface Message {
|
||||
id: number;
|
||||
type?: "dog" | "cat" | "pig";
|
||||
audioUrl: string;
|
||||
name: string; //名字
|
||||
duration: number; //时长
|
||||
timestamp: number; //时间
|
||||
translatedText?: string;
|
||||
isTranslating?: boolean;
|
||||
avatar?: string;
|
||||
isPlaying?: boolean;
|
||||
}
|
||||
13
projects/translate-h5/src/view/setting/index.tsx
Normal file
13
projects/translate-h5/src/view/setting/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import useI18n from "@/hooks/i18n.ts";
|
||||
import MainLayout from "@/layout/main/mainLayout";
|
||||
import { Button } from "antd-mobile";
|
||||
import { useI18nStore } from "@/store/i18n.ts";
|
||||
|
||||
function Index() {
|
||||
const t = useI18n();
|
||||
const i18nStore = useI18nStore();
|
||||
|
||||
return <MainLayout>qq</MainLayout>;
|
||||
}
|
||||
|
||||
export default Index;
|
||||
Reference in New Issue
Block a user