+
+ );
+};
+
+export default DeviceCompatibility;
diff --git a/src/component/audioRecorder/index copy.tsx b/src/component/audioRecorder/index copy.tsx
new file mode 100644
index 0000000..ad1c8ff
--- /dev/null
+++ b/src/component/audioRecorder/index copy.tsx
@@ -0,0 +1,278 @@
+// components/PetTranslatorChat.tsx (添加音频控制)
+import React, { useRef, useEffect } from "react";
+import { usePetTranslator } from "@/hooks/usePetTranslator";
+import { useFileUpload } from "@/hooks/useFileUpload";
+import { useAudioControl } from "@/hooks/useAudioControl";
+import { VoiceMessage, ChatMessage } from "@/types/chat";
+import { UploadConfig } from "@/types/upload";
+import VoiceMessageComponent from "./voiceMessage";
+import VoiceRecordButton from "./voiceRecordButton";
+import RecordingStatusBar from "./recordingStatusBar";
+import AudioManager from "@/utils/audioManager";
+import { useVoiceRecorder } from "@/hooks/useVoiceRecorder";
+import "./index.less";
+import { CapsuleTabs } from "antd-mobile";
+
+const PetTranslatorChat: React.FC = () => {
+ const {
+ messages,
+ currentPet,
+ translateVoice,
+ addMessage,
+ updateMessage,
+ clearMessages,
+ } = usePetTranslator();
+
+ const { isRecording, isPaused, recordingTime } = useVoiceRecorder();
+ const { uploadFile } = useFileUpload();
+ const { currentPlayingId, stopAllAudio, pauseAllAudio } = useAudioControl();
+ const messagesEndRef = useRef setShowDetails(!showDetails)}
+ >
+
+ {status === "good" && "✅"}
+ {status === "warning" && "⚠️"}
+ {status === "error" && "❌"}
+
+
+ {status === "good" && "设备兼容"}
+ {status === "warning" && "部分兼容"}
+ {status === "error" && "不兼容"}
+
+ {showDetails ? "▼" : "▶"}
+
+
+ {showDetails && (
+
+
+ )}
+
+
+
+ + 设备信息: +
+-
+
- iOS设备: {deviceInfo.isIOS ? "是" : "否"} +
- Safari浏览器: {deviceInfo.isSafari ? "是" : "否"} +
- + 支持MediaRecorder: {deviceInfo.hasMediaRecorder ? "是" : "否"} + +
- + 支持getUserMedia: {deviceInfo.hasGetUserMedia ? "是" : "否"} + +
+
+
+ {status === "error" && (
+ + 支持的音频格式: +
+ {deviceInfo.supportedFormats.length > 0 ? ( +-
+ {deviceInfo.supportedFormats.map((format, index) => (
+
- {format} + ))} +
未检测到支持的格式
+ )} +
+
+ )}
+
+ {status === "warning" && (
+ + 错误: 您的设备不支持录音功能 +
+请尝试:
+-
+
- 使用最新版本的浏览器 +
- 确保在HTTPS环境下访问 +
- 检查浏览器权限设置 +
+
+ )}
+ + 警告: 录音功能可能不稳定 +
+建议使用Chrome、Safari或Firefox最新版本
+
+
*/}
+
+
*/}
+
+ {/* {currentPet.avatar}
+
+
+ {currentPet.name}
+
+ {isRecording
+ ? "正在听你说话..."
+ : currentPlayingId
+ ? "正在播放语音..."
+ : "在线 · 等待翻译"}
+
+
+
+ {currentPlayingId && (
+
+ )}
+
+ */}
+ {/*
+
+
+
+ 宠物翻译
+
+
+ 宠物档案
+
+
+
+
+ {/* 消息列表 */}
+
+ {messages.length === 0 ? (
+
+
+ {/* 输入区域 */}
+
+
+ ) : (
+ messages.map((message) => (
+ 🐾
+ 开始和{currentPet.name}对话吧！
+
+ 点击下方按钮开始录音，我会帮你翻译
+
+
+
+ ))
+ )}
+
+
+ {message.sender === "pet" && (
+
+ {currentPet.avatar}
+ )}
+
+
+ {message.type === "voice" ? (
+ translateVoice(message)}
+ onRetryUpload={() => handleRetryUpload(message.id)}
+ />
+ ) : (
+
+
+ {message.sender === "user" && (
+ {message.content}
+ )}
+
+
+ {formatTime(message.timestamp)}
+
+ 👤
+ )}
+
+
+ {tabValue == "translate" ?
+
+
+ {/* setTabValue("translate")} + className={`${tabValue === "translate" ? "active" : ""}`} + > + 宠物翻译 +
+setTabValue("archives")} + className={`${tabValue === "archives" ? "active" : ""}`} + > + 宠物档案 +
+
+
*/}
+
+ {/* {currentPet.avatar}
*/}
+ {/* */}
+ {/*
*/}
+ {/* {currentPet.name}
*/}
+ {/*
+ {isRecording
+ ? "正在听你说话..."
+ : currentPlayingId
+ ? "正在播放语音..."
+ : "在线 · 等待翻译"}
+
*/}
+ {/*
+ {currentPlayingId && (
+
+ )}
+
+
+
*/}
+
+ {messages.map((message) => (
+
+
+ {/* 输入区域 */}
+
+
+ ))}
+
+
+ {message.sender === "pet" && (
+
+ {currentPet.avatar}
+ )}
+
+
+ {message.type === "voice" ? (
+ translateVoice(message)}
+ onRetryUpload={() => handleRetryUpload(message.id)}
+ />
+ ) : (
+
+
+ {message.sender === "user" && (
+ {message.content}
+ )}
+
+
+ {formatTime(message.timestamp)}
+
+ 👤
+ )}
+
+
+ );
+};
+
+export default RecordingStatusBar;
diff --git a/src/component/audioRecorder/translateItem.tsx b/src/component/audioRecorder/translateItem.tsx
new file mode 100644
index 0000000..ec6390b
--- /dev/null
+++ b/src/component/audioRecorder/translateItem.tsx
@@ -0,0 +1,11 @@
+function Index() {
+ return <>
+
+
+
+
+
+ ;
+}
+
+export default Index;
diff --git a/src/component/audioRecorder/voiceMessage.tsx b/src/component/audioRecorder/voiceMessage.tsx
new file mode 100644
index 0000000..3b684d3
--- /dev/null
+++ b/src/component/audioRecorder/voiceMessage.tsx
@@ -0,0 +1,322 @@
+// 消息列表
+import React, { useState, useRef, useEffect } from "react";
+import { VoiceMessage as VoiceMessageType } from "@/types/chat";
+import { UniversalAudioPlayer } from "@/utils/audioPlayer";
+import AudioManager from "@/utils/audioManager";
+
+interface VoiceMessageProps {
+ message: VoiceMessageType;
+ isOwn: boolean;
+ onTranslate?: () => void;
+ onRetryUpload?: () => void;
+}
+
+const VoiceMessage: React.FC
+
+
+
+
+ {isPaused ? "录音暂停中" : "正在录音"}
+
+
+
+
+ {formatTime(duration)} / {formatTime(maxDuration)}
+
+
+
+ );
+};
+
+export default VoiceMessage;
diff --git a/src/component/audioRecorder/voiceRecordButton.less b/src/component/audioRecorder/voiceRecordButton.less
new file mode 100644
index 0000000..46917f2
--- /dev/null
+++ b/src/component/audioRecorder/voiceRecordButton.less
@@ -0,0 +1,350 @@
+/* VoiceRecordButton.css */
+.voice-input-container {
+ padding: 16px;
+ background: #fff;
+ border-top: 1px solid #e5e5e5;
+}
+
+.voice-start-button {
+ width: 100%;
+ height: 50px;
+ background: #007bff;
+ color: white;
+ border: none;
+ border-radius: 25px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ user-select: none;
+ box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+}
+
+.voice-start-button:hover {
+ background: #0056b3;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
+}
+
+.voice-start-button:active {
+ transform: translateY(0);
+}
+
+.microphone-icon {
+ font-size: 20px;
+}
+
+.button-text {
+ font-weight: 600;
+}
+
+/* 录音中的容器 */
+.voice-recording-container {
+ padding: 20px;
+ background: #fff;
+ border-top: 1px solid #e5e5e5;
+ border-radius: 16px 16px 0 0;
+ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* 录音状态 */
+.recording-status {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.recording-indicator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.recording-dot {
+ width: 12px;
+ height: 12px;
+ background: #dc3545;
+ border-radius: 50%;
+ animation: pulse-recording 1s infinite;
+}
+
+.recording-dot.paused {
+ background: #ffc107;
+ animation: none;
+}
+
+@keyframes pulse-recording {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.7;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.recording-text {
+ font-size: 14px;
+ font-weight: 600;
+ color: #333;
+}
+
+.recording-time {
+ font-size: 18px;
+ font-weight: 700;
+ color: #007bff;
+}
+
+.max-time {
+ font-size: 12px;
+ color: #999;
+ font-weight: 400;
+}
+
+/* 进度条 */
+.recording-progress {
+ width: 100%;
+ height: 4px;
+ background: #e9ecef;
+ border-radius: 2px;
+ margin-bottom: 20px;
+ overflow: hidden;
+}
+
+.progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, #007bff, #0056b3);
+ border-radius: 2px;
+ transition: width 0.3s ease;
+}
+
+/* 波形动画 */
+.sound-wave-container {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 24px;
+}
+
+.sound-wave {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ height: 40px;
+}
+
+.wave-bar {
+ width: 4px;
+ background: #007bff;
+ border-radius: 2px;
+ animation: wave-animation 1.2s infinite ease-in-out;
+}
+
+.sound-wave.paused .wave-bar {
+ animation-play-state: paused;
+}
+
+.wave-bar:nth-child(1) {
+ animation-delay: -0.4s;
+}
+.wave-bar:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.wave-bar:nth-child(3) {
+ animation-delay: -0.2s;
+}
+.wave-bar:nth-child(4) {
+ animation-delay: -0.1s;
+}
+.wave-bar:nth-child(5) {
+ animation-delay: 0s;
+}
+
+@keyframes wave-animation {
+ 0%,
+ 40%,
+ 100% {
+ height: 8px;
+ opacity: 0.5;
+ }
+ 20% {
+ height: 32px;
+ opacity: 1;
+ }
+}
+
+/* 控制按钮 */
+.recording-controls {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.control-button {
+ flex: 1;
+ height: 48px;
+ border: none;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ font-size: 12px;
+ font-weight: 600;
+ min-width: 0;
+}
+
+.control-button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.control-button:not(:disabled):hover {
+ transform: translateY(-2px);
+}
+
+.control-button:not(:disabled):active {
+ transform: translateY(0);
+}
+
+.cancel-button {
+ background: #f8f9fa;
+ color: #dc3545;
+ border: 2px solid #dc3545;
+}
+
+.cancel-button:not(:disabled):hover {
+ background: #dc3545;
+ color: white;
+}
+
+.pause-button {
+ background: #f8f9fa;
+ color: #ffc107;
+ border: 2px solid #ffc107;
+}
+
+.pause-button:not(:disabled):hover {
+ background: #ffc107;
+ color: white;
+}
+
+.send-button {
+ background: #28a745;
+ color: white;
+ border: 2px solid #28a745;
+}
+
+.send-button:not(:disabled):hover {
+ background: #218838;
+ border-color: #218838;
+}
+
+.button-icon {
+ font-size: 16px;
+}
+
+.button-label {
+ font-size: 11px;
+ line-height: 1;
+}
+
+/* 提示文字 */
+.recording-hint {
+ text-align: center;
+ font-size: 13px;
+ color: #666;
+}
+
+.warning-hint {
+ color: #dc3545;
+ font-weight: 600;
+}
+
+.normal-hint {
+ color: #28a745;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+ .voice-recording-container {
+ padding: 16px;
+ }
+
+ .recording-controls {
+ gap: 8px;
+ }
+
+ .control-button {
+ height: 44px;
+ font-size: 11px;
+ }
+
+ .button-icon {
+ font-size: 14px;
+ }
+
+ .button-label {
+ font-size: 10px;
+ }
+
+ .recording-time {
+ font-size: 16px;
+ }
+}
+
+/* 动画效果 */
+.voice-recording-container {
+ animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+ from {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+ .voice-recording-container {
+ background: #2c2c2e;
+ border-top-color: #3a3a3c;
+ }
+
+ .recording-text {
+ color: #fff;
+ }
+
+ .recording-progress {
+ background: #3a3a3c;
+ }
+
+ .wave-bar {
+ background: #0a84ff;
+ }
+
+ .control-button {
+ background: #3a3a3c;
+ }
+
+ .recording-hint {
+ color: #8e8e93;
+ }
+}
diff --git a/src/component/audioRecorder/voiceRecordButton.tsx b/src/component/audioRecorder/voiceRecordButton.tsx
new file mode 100644
index 0000000..451c1d6
--- /dev/null
+++ b/src/component/audioRecorder/voiceRecordButton.tsx
@@ -0,0 +1,248 @@
+// components/VoiceRecordButton.tsx (更新)
+import React, { useState, useEffect } from "react";
+import { useVoiceRecorder } from "@/hooks/useVoiceRecorder";
+import { useFileUpload } from "@/hooks/useFileUpload";
+import { UploadConfig } from "@/types/upload";
+import "./index.less";
+interface VoiceRecordButtonProps {
+ onRecordComplete: (
+ audioBlob: Blob,
+ duration: number,
+ uploadResponse?: any
+ ) => void;
+ onError?: (error: Error) => void;
+ maxDuration?: number;
+ uploadConfig?: UploadConfig;
+ autoUpload?: boolean;
+}
+
+const VoiceRecordButton: React.FC
+
+
+
+
+ {/* 播放错误提示 */}
+ {playError && (
+ {getWaveformBars()}
+
+
+ {formatTime(isPlaying ? currentTime : message.content.duration)}
+
+
+ ⚠️
+ {playError}
+
+
+ )}
+
+ {/* 上传状态显示 */}
+ {isOwn && message.content.uploadStatus && (
+
+
+ )}
+
+ {/* 翻译按钮和结果 */}
+ {isOwn && (
+
+ {getUploadStatusIcon()}
+
+ {message.content.uploadStatus === "uploading" &&
+ `上传中 ${message.content.uploadProgress || 0}%`}
+ {message.content.uploadStatus === "success" && "已上传"}
+ {message.content.uploadStatus === "error" && "上传失败"}
+
+
+ {message.content.uploadStatus === "error" && onRetryUpload && (
+
+ )}
+
+
+ {/* 文件信息 */}
+ {message.content.uploadStatus === "success" && (
+
+ {message.content.fileName && (
+ 📁 {message.content.fileName}
+ )}
+ {message.content.blob && (
+
+ 📊 {formatFileSize(message.content.blob.size)}
+
+ )}
+
+ )}
+
+ {!message.translation && !message.translating && (
+
+ )}
+
+ {message.translating && (
+
+ )}
+
+
+ )}
+
+ {message.translation && (
+
+
+
+
+
+ 正在翻译中...
+
+
+ )}
+ 🗣️
+ {message.translation}
+
+
+
+ );
+ }
+
+ return (
+
+ {/* 录音状态指示器 */}
+
+ );
+};
+
+export default VoiceRecordButton;
diff --git a/src/component/carousel/index.less b/src/component/carousel/index.less
new file mode 100644
index 0000000..f1685d9
--- /dev/null
+++ b/src/component/carousel/index.less
@@ -0,0 +1,7 @@
+.carousel {
+ .carousel-item {
+ .carousel-image {
+ border-radius: 15px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/component/carousel/index.tsx b/src/component/carousel/index.tsx
new file mode 100644
index 0000000..932a50e
--- /dev/null
+++ b/src/component/carousel/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Slider, {Settings} from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import './index.less';
+
+export interface CarouselComponentProps {
+ images: string[];
+ height?: number;
+}
+
+/**
+ * 轮播图组件
+ * @param images 图片地址数组
+ * @param height 图片高度
+ * @constructor Carousel
+ */
+const Carousel: React.FC
+
+
+ {/* 进度条 */}
+
+
+
+ {isProcessing
+ ? "处理中..."
+ : isPaused
+ ? "录音已暂停"
+ : "正在录音..."}
+
+
+
+
+ {formatTime(recordingTime)}
+ /{formatTime(maxDuration)}
+
+
+
+
+
+ {/* 上传进度 */}
+ {isUploading && (
+
+
+ )}
+
+ {/* 波形动画 */}
+
+ 📤
+ 上传中... {uploadProgress}%
+
+
+
+
+
+
+
+ {/* 控制按钮 */}
+
+ {[...Array(5)].map((_, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {/* 提示文字 */}
+ {/*
+ {isProcessing ? (
+ 正在处理录音...
+ ) : isUploading ? (
+ 正在上传到服务器...
+ ) : recordingTime < 1 ? (
+ 录音时间至少需要1秒
+ ) : (
+ 点击发送按钮完成录音
+ )}
+
*/}
+
+ 
+
+ ))}
+ setVisible(false)}
+ />
+
+ {/* 菜单项 */}
+ {menuItems.map((item, index) => {
+ const position = getMenuItemPosition(index);
+ return (
+ ([]);
+ const [isRecording, setIsRecording] = useState(false);
+ const [hasPermission, setHasPermission] = useState(null);
+ const [currentPlayingId, setCurrentPlayingId] = useState(null);
+ const [recordingDuration, setRecordingDuration] = useState(0);
+ const [isInitialized, setIsInitialized] = useState(false);
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [permissionChecking, setPermissionChecking] = useState(false);
+ const [dialogShowing, setDialogShowing] = useState(false);
+
+ const messagesEndRef = useRef(null);
+ const messagesContainerRef = useRef(null);
+ const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
+ const recordingTimerRef = useRef();
+ const isRecordingRef = useRef(false);
+ const processingTimeoutRef = useRef();
+ const permissionCheckTimeoutRef = useRef();
+
+ // 新增：防止重复初始化的标志
+ const initializingRef = useRef(false);
+ const initializedRef = useRef(false);
+
+ const recorderControls = useAudioRecorder(
+ {
+ noiseSuppression: true,
+ echoCancellation: true,
+ autoGainControl: true,
+ },
+ (err) => {
+ console.error("录音错误:", err);
+ Toast.show("录音失败，请重试");
+ resetRecordingState();
+ }
+ );
+
+ // 使用useEffect的依赖数组为空，确保只执行一次
+ useEffect(() => {
+ console.log("useEffect执行，初始化状态:", {
+ initializing: initializingRef.current,
+ initialized: initializedRef.current,
+ });
+
+ // 防止重复初始化
+ if (initializingRef.current || initializedRef.current) {
+ console.log("已经初始化或正在初始化，跳过");
+ return;
+ }
+
+ initializeApp();
+
+ // 清理函数
+ return () => {
+ console.log("组件卸载，执行清理");
+ cleanup();
+ };
+ }, []); // 空依赖数组确保只执行一次
+
+ useEffect(() => {
+ isRecordingRef.current = isRecording;
+ }, [isRecording]);
+
+ // 优化的初始化函数
+ const initializeApp = useCallback(async () => {
+ // 防止重复执行
+ if (initializingRef.current || initializedRef.current) {
+ console.log("初始化已执行或正在执行，跳过重复调用");
+ return;
+ }
+
+ initializingRef.current = true;
+ console.log("=== 开始初始化应用 ===");
+
+ try {
+ console.log("1. 检查麦克风权限...");
+ await checkMicrophonePermission();
+
+ // console.log("2. 设置Safari兼容性...");
+ // setupSafariCompatibility();
+
+ console.log("3. 标记初始化完成...");
+ setIsInitialized(true);
+ initializedRef.current = true;
+
+ console.log("=== 应用初始化完成 ===");
+ } catch (error) {
+ console.error("应用初始化失败:", error);
+ Toast.show("应用初始化失败");
+ // 即使失败也标记为已初始化，避免无限重试
+ setIsInitialized(true);
+ initializedRef.current = true;
+ } finally {
+ initializingRef.current = false;
+ }
+ }, []); // 空依赖数组，函数只创建一次
+
+ const cleanup = useCallback(() => {
+ console.log("执行清理操作...");
+
+ // 重置初始化标志
+ initializingRef.current = false;
+ initializedRef.current = false;
+
+ if (recordingTimerRef.current) {
+ clearInterval(recordingTimerRef.current);
+ }
+ if (processingTimeoutRef.current) {
+ clearTimeout(processingTimeoutRef.current);
+ }
+ if (permissionCheckTimeoutRef.current) {
+ clearTimeout(permissionCheckTimeoutRef.current);
+ }
+
+ Object.values(audioRefs.current).forEach((audio) => {
+ audio.pause();
+ audio.src = "";
+ });
+
+ cleanupSafariCompatibility();
+ }, []);
+
+ const resetRecordingState = useCallback(() => {
+ console.log("重置录音状态");
+ setIsRecording(false);
+ setIsProcessing(false);
+ setRecordingDuration(0);
+ // isRecordingRef.current = false;
+
+ if (recordingTimerRef.current) {
+ clearInterval(recordingTimerRef.current);
+ recordingTimerRef.current = undefined;
+ }
+
+ if (processingTimeoutRef.current) {
+ clearTimeout(processingTimeoutRef.current);
+ processingTimeoutRef.current = undefined;
+ }
+ }, []);
+
+ // 优化的权限检查函数
+ const checkMicrophonePermission = useCallback(
+ async (showToast = false) => {
+ console.log("检查麦克风权限...", {
+ permissionChecking,
+ dialogShowing,
+ hasPermission,
+ });
+
+ // 防止重复检查
+ if (permissionChecking) {
+ console.log("权限检查正在进行中，跳过");
+ return hasPermission;
+ }
+
+ setPermissionChecking(true);
+
+ try {
+ // 检查浏览器支持
+ if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+ console.error("浏览器不支持录音功能");
+ setHasPermission(false);
+ if (showToast) {
+ Toast.show("浏览器不支持录音功能");
+ }
+ return false;
+ }
+
+ // 先检查权限状态（如果浏览器支持）
+ if (navigator.permissions && navigator.permissions.query) {
+ try {
+ const permissionStatus = await navigator.permissions.query({
+ name: "microphone" as PermissionName,
+ });
+
+ // alert(permissionStatus.state);
+ // console.log("权限状态:", permissionStatus.state);
+
+ if (permissionStatus.state === "denied") {
+ console.log("权限被拒绝");
+ setHasPermission(false);
+
+ if (showToast && !dialogShowing) {
+ showPermissionDialog();
+ }
+ return false;
+ }
+
+ if (permissionStatus.state === "granted") {
+ console.log("权限已授予");
+ setHasPermission(true);
+ return true;
+ }
+ } catch (permError) {
+ console.log("权限查询不支持，继续使用getUserMedia检查");
+ }
+ }
+
+ // 尝试获取媒体流
+ const stream = await navigator.mediaDevices.getUserMedia({
+ audio: {
+ echoCancellation: true,
+ noiseSuppression: true,
+ autoGainControl: true,
+ },
+ });
+
+ console.log("麦克风权限获取成功");
+ stream.getTracks().forEach((track) => track.stop());
+ setHasPermission(true);
+
+ if (showToast) {
+ Toast.show("麦克风权限已获取");
+ }
+ return true;
+ } catch (error) {
+ console.error("权限检查失败:", error);
+ setHasPermission(false);
+ showPermissionDialog();
+ return false;
+ } finally {
+ setPermissionChecking(false);
+ }
+ },
+ [permissionChecking, dialogShowing, hasPermission]
+ );
+
+ const showPermissionDialog = useCallback(() => {
+ if (dialogShowing) {
+ console.log("弹窗已显示，跳过");
+ return;
+ }
+
+ console.log("显示权限弹窗");
+ setDialogShowing(true);
+
+ Dialog.confirm({
+ title: "需要录音权限",
+ content:
+ '为了使用录音翻译功能，需要您授权麦克风权限。请在浏览器设置中允许访问麦克风，然后点击"重新获取权限"。',
+ confirmText: "重新获取权限",
+ cancelText: "取消",
+ onConfirm: async () => {
+ console.log("用户点击重新获取权限");
+ setDialogShowing(false);
+
+ setTimeout(async () => {
+ await checkMicrophonePermission(true);
+ }, 500);
+ },
+ onCancel: () => {
+ console.log("用户取消权限获取");
+ setDialogShowing(false);
+ Toast.show("需要麦克风权限才能使用录音功能");
+ },
+ onClose: () => {
+ console.log("弹窗关闭");
+ setDialogShowing(false);
+ },
+ });
+ }, [dialogShowing, checkMicrophonePermission]);
+
+ const setupSafariCompatibility = useCallback(() => {
+ console.log("设置Safari兼容性...");
+
+ const root = document.documentElement;
+ const isIPhoneX =
+ /iPhone/.test(navigator.userAgent) && window.screen.height >= 812;
+
+ if (isIPhoneX) {
+ root.style.setProperty(
+ "--safe-area-inset-top",
+ "env(safe-area-inset-top, 44px)"
+ );
+ root.style.setProperty(
+ "--safe-area-inset-bottom",
+ "env(safe-area-inset-bottom, 34px)"
+ );
+ } else {
+ root.style.setProperty(
+ "--safe-area-inset-top",
+ "env(safe-area-inset-top, 20px)"
+ );
+ root.style.setProperty(
+ "--safe-area-inset-bottom",
+ "env(safe-area-inset-bottom, 0px)"
+ );
+ }
+
+ document.body.style.overflow = "hidden";
+ document.body.style.position = "fixed";
+ document.body.style.width = "100%";
+ document.body.style.height = "100%";
+ document.body.style.top = "0";
+ document.body.style.left = "0";
+
+ document.addEventListener("touchstart", preventPullToRefresh, {
+ passive: false,
+ });
+ document.addEventListener("touchmove", preventPullToRefresh, {
+ passive: false,
+ });
+ document.addEventListener("touchend", preventDoubleTapZoom, {
+ passive: false,
+ });
+
+ let viewport = document.querySelector("meta[name=viewport]");
+ if (!viewport) {
+ viewport = document.createElement("meta");
+ viewport.setAttribute("name", "viewport");
+ document.head.appendChild(viewport);
+ }
+ viewport.setAttribute(
+ "content",
+ "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+ );
+ }, []);
+
+ const cleanupSafariCompatibility = useCallback(() => {
+ console.log("清理Safari兼容性设置...");
+
+ document.body.style.overflow = "";
+ document.body.style.position = "";
+ document.body.style.width = "";
+ document.body.style.height = "";
+ document.body.style.top = "";
+ document.body.style.left = "";
+
+ document.removeEventListener("touchstart", preventPullToRefresh);
+ document.removeEventListener("touchmove", preventPullToRefresh);
+ document.removeEventListener("touchend", preventDoubleTapZoom);
+ }, []);
+
+ const preventPullToRefresh = (e: TouchEvent) => {
+ const target = e.target as HTMLElement;
+ const messagesContainer = messagesContainerRef.current;
+
+ if (messagesContainer && messagesContainer.contains(target)) {
+ return;
+ }
+
+ if (e.touches.length > 1) {
+ e.preventDefault();
+ return;
+ }
+
+ const touch = e.touches[0];
+ const startY = touch.clientY;
+
+ if (startY < 100 && e.type === "touchstart") {
+ e.preventDefault();
+ }
+ };
+
+ let lastTouchEnd = 0;
+ const preventDoubleTapZoom = (e: TouchEvent) => {
+ const now = Date.now();
+ if (now - lastTouchEnd <= 300) {
+ e.preventDefault();
+ }
+ lastTouchEnd = now;
+ };
+
+ const stopAllAudio = () => {
+ if (currentPlayingId && audioRefs.current[currentPlayingId]) {
+ audioRefs.current[currentPlayingId].pause();
+ audioRefs.current[currentPlayingId].currentTime = 0;
+
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === currentPlayingId ? { ...msg, isPlaying: false } : msg
+ )
+ );
+ setCurrentPlayingId(null);
+ }
+
+ Object.values(audioRefs.current).forEach((audio) => {
+ if (!audio.paused) {
+ audio.pause();
+ audio.currentTime = 0;
+ }
+ });
+ };
+
+ const startRecording = useCallback(async () => {
+ console.log("=== 开始录音函数调用 ===");
+
+ if (isProcessing || isRecordingRef.current) {
+ console.log("正在处理中或已在录音，忽略此次调用");
+ return;
+ }
+
+ if (!isInitialized || !initializedRef.current) {
+ console.log("应用未初始化完成");
+ Toast.show("应用正在初始化，请稍后重试");
+ return;
+ }
+
+ if (!hasPermission) {
+ console.log("没有录音权限，尝试获取权限");
+ const granted = await checkMicrophonePermission(true);
+ if (!granted) {
+ console.log("权限获取失败");
+ return;
+ }
+ }
+
+ try {
+ setIsProcessing(true);
+ setIsRecording(true);
+ setRecordingDuration(0);
+
+ stopAllAudio();
+
+ await recorderControls.startRecording();
+
+ recordingTimerRef.current = setInterval(() => {
+ setRecordingDuration((prev) => prev + 1);
+ }, 1000);
+
+ Toast.show("开始录音...");
+
+ processingTimeoutRef.current = setTimeout(() => {
+ setIsProcessing(false);
+ }, 1000);
+ } catch (error) {
+ console.error("开始录音失败:", error);
+ resetRecordingState();
+
+ if (
+ error.name === "NotAllowedError" ||
+ error.name === "PermissionDeniedError"
+ ) {
+ setHasPermission(false);
+ if (!dialogShowing) {
+ showPermissionDialog();
+ }
+ } else {
+ Toast.show(`录音失败: ${error.message || "未知错误"}`);
+ }
+ }
+ }, [
+ isProcessing,
+ hasPermission,
+ isInitialized,
+ recorderControls,
+ checkMicrophonePermission,
+ dialogShowing,
+ showPermissionDialog,
+ ]);
+
+ const stopRecording = useCallback(() => {
+ console.log("=== 停止录音函数调用 ===");
+
+ if (isProcessing || !isRecordingRef.current) {
+ console.log("正在处理中或未在录音，忽略此次调用");
+ return;
+ }
+
+ try {
+ setIsProcessing(true);
+ setIsRecording(false);
+
+ if (recordingTimerRef.current) {
+ clearInterval(recordingTimerRef.current);
+ recordingTimerRef.current = undefined;
+ }
+
+ recorderControls.stopRecording();
+
+ processingTimeoutRef.current = setTimeout(() => {
+ setIsProcessing(false);
+ }, 2000);
+ } catch (error) {
+ console.error("停止录音失败:", error);
+ resetRecordingState();
+ Toast.show("停止录音失败");
+ }
+ }, [isProcessing, recorderControls]);
+
+ const onRecordingComplete = useCallback(
+ (blob: Blob) => {
+ console.log("=== 录音完成回调 ===");
+
+ setIsProcessing(false);
+ if (processingTimeoutRef.current) {
+ clearTimeout(processingTimeoutRef.current);
+ }
+
+ if (recordingDuration < 1) {
+ Toast.show("录音时间太短，请重新录音");
+ setRecordingDuration(0);
+ return;
+ }
+
+ const audioUrl = URL.createObjectURL(blob);
+ const newMessage: Message = {
+ id: Date.now().toString(),
+ type: "voice",
+ audioUrl,
+ duration: recordingDuration,
+ timestamp: Date.now(),
+ isTranslating: true,
+ };
+
+ setMessages((prev) => [...prev, newMessage]);
+ setRecordingDuration(0);
+
+ setTimeout(() => {
+ translateAudio(newMessage.id, blob);
+ }, 1000);
+
+ Toast.show("语音已发送");
+ },
+ [recordingDuration]
+ );
+
+ const cancelRecording = useCallback(() => {
+ console.log("=== 取消录音 ===");
+
+ try {
+ if (isRecordingRef.current) {
+ recorderControls.stopRecording();
+ }
+ } catch (error) {
+ console.error("取消录音失败:", error);
+ }
+
+ resetRecordingState();
+ Toast.show("已取消录音");
+ }, [recorderControls, resetRecordingState]);
+
+ const handleRecordButtonClick = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ console.log("=== 录音按钮点击 ===");
+
+ if (isProcessing || permissionChecking) {
+ console.log("正在处理中，忽略点击");
+ return;
+ }
+
+ if (isRecordingRef.current) {
+ stopRecording();
+ } else {
+ startRecording();
+ }
+ },
+ [isProcessing, permissionChecking, startRecording, stopRecording]
+ );
+
+ const translateAudio = async (messageId: string, audioBlob: Blob) => {
+ try {
+ const translatedText = await mockTranslateAudio(audioBlob);
+
+ 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
+ )
+ );
+ }
+ };
+
+ const mockTranslateAudio = async (audioBlob: Blob): Promise => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ const mockTranslations = [
+ "汪汪汪！我饿了，想吃东西！🍖",
+ "喵喵～我想要抱抱！🤗",
+ "我想出去玩耍！🎾",
+ "我很开心！😊",
+ "我有点害怕...😰",
+ "我想睡觉了～😴",
+ "主人，陪我玩一会儿吧！🎮",
+ "我想喝水了💧",
+ "外面有什么声音？👂",
+ "我爱你，主人！❤️",
+ ];
+ const randomTranslation =
+ mockTranslations[Math.floor(Math.random() * mockTranslations.length)];
+ resolve(randomTranslation);
+ }, 2000 + Math.random() * 2000);
+ });
+ };
+
+ const playAudio = (messageId: string, audioUrl: string) => {
+ if (isRecording) {
+ Toast.show("录音中，无法播放音频");
+ return;
+ }
+
+ if (currentPlayingId === messageId) {
+ if (audioRefs.current[messageId]) {
+ audioRefs.current[messageId].pause();
+ audioRefs.current[messageId].currentTime = 0;
+ }
+ setCurrentPlayingId(null);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === messageId ? { ...msg, isPlaying: false } : msg
+ )
+ );
+ return;
+ }
+
+ stopAllAudio();
+
+ if (!audioRefs.current[messageId]) {
+ audioRefs.current[messageId] = new Audio(audioUrl);
+ }
+
+ const audio = audioRefs.current[messageId];
+ audio.currentTime = 0;
+
+ audio.onended = () => {
+ setCurrentPlayingId(null);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === messageId ? { ...msg, isPlaying: false } : msg
+ )
+ );
+ };
+
+ audio.onerror = (error) => {
+ console.error("音频播放错误:", error);
+ Toast.show("音频播放失败");
+ setCurrentPlayingId(null);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === messageId ? { ...msg, isPlaying: false } : msg
+ )
+ );
+ };
+
+ audio
+ .play()
+ .then(() => {
+ setCurrentPlayingId(messageId);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === messageId
+ ? { ...msg, isPlaying: true }
+ : { ...msg, isPlaying: false }
+ )
+ );
+ })
+ .catch((error) => {
+ console.error("音频播放失败:", error);
+ Toast.show("音频播放失败");
+ });
+ };
+
+ const formatDuration = (seconds: number) => {
+ const mins = Math.floor(seconds / 60);
+ const secs = seconds % 60;
+ return `${mins}:${secs.toString().padStart(2, "0")}`;
+ };
+
+ const formatTime = (timestamp: number) => {
+ return new Date(timestamp).toLocaleTimeString("zh-CN", {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ };
+
+ return (
+ ([]);
+// const [isRecording, setIsRecording] = useState(false);
+// const [hasPermission, setHasPermission] = useState(null);
+// const [currentPlayingId, setCurrentPlayingId] = useState(null);
+// const [recordingDuration, setRecordingDuration] = useState(0);
+// const [isInitialized, setIsInitialized] = useState(false);
+// const [permissionChecking, setPermissionChecking] = useState(false);
+// const [dialogShowing, setDialogShowing] = useState(false);
+
+// const messagesEndRef = useRef(null);
+// const messagesContainerRef = useRef(null);
+// const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
+// const recordingTimerRef = useRef();
+// const isRecordingRef = useRef(false);
+// const initializingRef = useRef(false);
+// const initializedRef = useRef(false);
+// const isCancelledRef = useRef(false);
+// const recordingStartTimeRef = useRef(0);
+
+// // 音效相关
+// const sendSoundRef = useRef(null);
+// const startRecordSoundRef = useRef(null);
+
+// const recorderControls = useAudioRecorder(
+// {
+// noiseSuppression: true,
+// echoCancellation: true,
+// autoGainControl: true,
+// },
+// (err) => {
+// console.error("录音错误:", err);
+// Toast.show("录音失败，请重试");
+// resetRecordingState();
+// }
+// );
+
+// useEffect(() => {
+// if (initializingRef.current || initializedRef.current) {
+// return;
+// }
+// initializeApp();
+
+// return () => {
+// cleanup();
+// };
+// }, []);
+
+// useEffect(() => {
+// scrollToBottom();
+// }, [messages]);
+
+// useEffect(() => {
+// isRecordingRef.current = isRecording;
+// }, [isRecording]);
+
+// // 初始化音效
+// useEffect(() => {
+// initializeSounds();
+// return () => {
+// cleanupSounds();
+// };
+// }, []);
+
+// const initializeSounds = () => {
+// try {
+// // 发送音效 - 使用Web Audio API生成
+// sendSoundRef.current = createSendSound();
+
+// // 开始录音音效
+// startRecordSoundRef.current = createStartRecordSound();
+
+// console.log("音效初始化完成");
+// } catch (error) {
+// console.error("音效初始化失败:", error);
+// }
+// };
+
+// const cleanupSounds = () => {
+// if (sendSoundRef.current) {
+// sendSoundRef.current.pause();
+// sendSoundRef.current = null;
+// }
+// if (startRecordSoundRef.current) {
+// startRecordSoundRef.current.pause();
+// startRecordSoundRef.current = null;
+// }
+// };
+
+// // 创建发送音效 - 清脆的"叮"声
+// const createSendSound = () => {
+// try {
+// const audioContext = new (window.AudioContext ||
+// (window as any).webkitAudioContext)();
+// const oscillator = audioContext.createOscillator();
+// const gainNode = audioContext.createGain();
+
+// oscillator.connect(gainNode);
+// gainNode.connect(audioContext.destination);
+
+// // 设置音调 - 清脆的高音
+// oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+// oscillator.frequency.exponentialRampToValueAtTime(
+// 1200,
+// audioContext.currentTime + 0.1
+// );
+
+// // 设置音量包络
+// gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+// gainNode.gain.linearRampToValueAtTime(
+// 0.3,
+// audioContext.currentTime + 0.01
+// );
+// gainNode.gain.exponentialRampToValueAtTime(
+// 0.01,
+// audioContext.currentTime + 0.3
+// );
+
+// oscillator.type = "sine";
+
+// // 创建音频元素
+// const audio = new Audio();
+
+// // 重写play方法来播放合成音效
+// audio.play = () => {
+// return new Promise((resolve) => {
+// try {
+// const newOscillator = audioContext.createOscillator();
+// const newGainNode = audioContext.createGain();
+
+// newOscillator.connect(newGainNode);
+// newGainNode.connect(audioContext.destination);
+
+// newOscillator.frequency.setValueAtTime(
+// 800,
+// audioContext.currentTime
+// );
+// newOscillator.frequency.exponentialRampToValueAtTime(
+// 1200,
+// audioContext.currentTime + 0.1
+// );
+
+// newGainNode.gain.setValueAtTime(0, audioContext.currentTime);
+// newGainNode.gain.linearRampToValueAtTime(
+// 0.3,
+// audioContext.currentTime + 0.01
+// );
+// newGainNode.gain.exponentialRampToValueAtTime(
+// 0.01,
+// audioContext.currentTime + 0.3
+// );
+
+// newOscillator.type = "sine";
+// newOscillator.start(audioContext.currentTime);
+// newOscillator.stop(audioContext.currentTime + 0.3);
+
+// setTimeout(() => resolve(undefined), 300);
+// } catch (error) {
+// console.error("播放发送音效失败:", error);
+// resolve(undefined);
+// }
+// });
+// };
+
+// return audio;
+// } catch (error) {
+// console.error("创建发送音效失败:", error);
+// return new Audio(); // 返回空音频对象
+// }
+// };
+
+// // 创建开始录音音效 - 低沉的"嘟"声
+// const createStartRecordSound = () => {
+// try {
+// const audio = new Audio();
+
+// audio.play = () => {
+// return new Promise((resolve) => {
+// try {
+// const audioContext = new (window.AudioContext ||
+// (window as any).webkitAudioContext)();
+// const oscillator = audioContext.createOscillator();
+// const gainNode = audioContext.createGain();
+
+// oscillator.connect(gainNode);
+// gainNode.connect(audioContext.destination);
+
+// // 设置音调 - 低沉的音
+// oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
+
+// // 设置音量包络
+// gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+// gainNode.gain.linearRampToValueAtTime(
+// 0.2,
+// audioContext.currentTime + 0.05
+// );
+// gainNode.gain.linearRampToValueAtTime(
+// 0,
+// audioContext.currentTime + 0.2
+// );
+
+// oscillator.type = "sine";
+// oscillator.start(audioContext.currentTime);
+// oscillator.stop(audioContext.currentTime + 0.2);
+
+// setTimeout(() => resolve(undefined), 200);
+// } catch (error) {
+// console.error("播放录音音效失败:", error);
+// resolve(undefined);
+// }
+// });
+// };
+
+// return audio;
+// } catch (error) {
+// console.error("创建录音音效失败:", error);
+// return new Audio();
+// }
+// };
+
+// // 震动函数
+// const vibrate = (pattern: number | number[]) => {
+// try {
+// if ("vibrate" in navigator) {
+// navigator.vibrate(pattern);
+// console.log("震动:", pattern);
+// } else {
+// console.log("设备不支持震动");
+// }
+// } catch (error) {
+// console.error("震动失败:", error);
+// }
+// };
+
+// // 播放音效
+// const playSound = async (soundRef: React.RefObject) => {
+// try {
+// if (soundRef.current) {
+// await soundRef.current.play();
+// }
+// } catch (error) {
+// console.error("播放音效失败:", error);
+// }
+// };
+
+// const initializeApp = useCallback(async () => {
+// if (initializingRef.current || initializedRef.current) {
+// return;
+// }
+
+// initializingRef.current = true;
+// console.log("=== 开始初始化应用 ===");
+
+// try {
+// await checkMicrophonePermission();
+// setupSafariCompatibility();
+// setIsInitialized(true);
+// initializedRef.current = true;
+// console.log("=== 应用初始化完成 ===");
+// } catch (error) {
+// console.error("应用初始化失败:", error);
+// Toast.show("应用初始化失败");
+// setIsInitialized(true);
+// initializedRef.current = true;
+// } finally {
+// initializingRef.current = false;
+// }
+// }, []);
+
+// const cleanup = useCallback(() => {
+// console.log("执行清理操作...");
+
+// initializingRef.current = false;
+// initializedRef.current = false;
+// isCancelledRef.current = false;
+// recordingStartTimeRef.current = 0;
+
+// if (recordingTimerRef.current) {
+// clearInterval(recordingTimerRef.current);
+// }
+
+// Object.values(audioRefs.current).forEach((audio) => {
+// audio.pause();
+// audio.src = "";
+// });
+
+// cleanupSounds();
+// cleanupSafariCompatibility();
+// }, []);
+
+// const resetRecordingState = useCallback(() => {
+// console.log("重置录音状态");
+// setIsRecording(false);
+// setRecordingDuration(0);
+// isRecordingRef.current = false;
+// isCancelledRef.current = false;
+// recordingStartTimeRef.current = 0;
+
+// if (recordingTimerRef.current) {
+// clearInterval(recordingTimerRef.current);
+// recordingTimerRef.current = undefined;
+// }
+// }, []);
+
+// const checkMicrophonePermission = useCallback(
+// async (showToast = false) => {
+// if (permissionChecking) {
+// return hasPermission;
+// }
+
+// setPermissionChecking(true);
+
+// try {
+// if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+// setHasPermission(false);
+// if (showToast) {
+// 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);
+// if (showToast && !dialogShowing) {
+// showPermissionDialog();
+// }
+// return false;
+// }
+
+// if (permissionStatus.state === "granted") {
+// setHasPermission(true);
+// 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);
+
+// if (showToast) {
+// Toast.show("麦克风权限已获取");
+// }
+// return true;
+// } catch (error) {
+// console.error("权限检查失败:", error);
+// setHasPermission(false);
+
+// if (showToast && !dialogShowing) {
+// showPermissionDialog();
+// }
+// return false;
+// } finally {
+// setPermissionChecking(false);
+// }
+// },
+// [permissionChecking, dialogShowing, hasPermission]
+// );
+
+// const showPermissionDialog = useCallback(() => {
+// if (dialogShowing) {
+// return;
+// }
+
+// setDialogShowing(true);
+
+// Dialog.confirm({
+// title: "需要录音权限",
+// content:
+// '为了使用录音翻译功能，需要您授权麦克风权限。请在浏览器设置中允许访问麦克风，然后点击"重新获取权限"。',
+// confirmText: "重新获取权限",
+// cancelText: "取消",
+// onConfirm: async () => {
+// setDialogShowing(false);
+// setTimeout(async () => {
+// await checkMicrophonePermission(true);
+// }, 500);
+// },
+// onCancel: () => {
+// setDialogShowing(false);
+// Toast.show("需要麦克风权限才能使用录音功能");
+// },
+// onClose: () => {
+// setDialogShowing(false);
+// },
+// });
+// }, [dialogShowing, checkMicrophonePermission]);
+
+// const setupSafariCompatibility = useCallback(() => {
+// const root = document.documentElement;
+// const isIPhoneX =
+// /iPhone/.test(navigator.userAgent) && window.screen.height >= 812;
+
+// if (isIPhoneX) {
+// root.style.setProperty(
+// "--safe-area-inset-top",
+// "env(safe-area-inset-top, 44px)"
+// );
+// root.style.setProperty(
+// "--safe-area-inset-bottom",
+// "env(safe-area-inset-bottom, 34px)"
+// );
+// } else {
+// root.style.setProperty(
+// "--safe-area-inset-top",
+// "env(safe-area-inset-top, 20px)"
+// );
+// root.style.setProperty(
+// "--safe-area-inset-bottom",
+// "env(safe-area-inset-bottom, 0px)"
+// );
+// }
+
+// document.body.style.overflow = "hidden";
+// document.body.style.position = "fixed";
+// document.body.style.width = "100%";
+// document.body.style.height = "100%";
+// document.body.style.top = "0";
+// document.body.style.left = "0";
+
+// document.addEventListener("touchstart", preventPullToRefresh, {
+// passive: false,
+// });
+// document.addEventListener("touchmove", preventPullToRefresh, {
+// passive: false,
+// });
+// document.addEventListener("touchend", preventDoubleTapZoom, {
+// passive: false,
+// });
+
+// let viewport = document.querySelector("meta[name=viewport]");
+// if (!viewport) {
+// viewport = document.createElement("meta");
+// viewport.setAttribute("name", "viewport");
+// document.head.appendChild(viewport);
+// }
+// viewport.setAttribute(
+// "content",
+// "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+// );
+// }, []);
+
+// const cleanupSafariCompatibility = useCallback(() => {
+// document.body.style.overflow = "";
+// document.body.style.position = "";
+// document.body.style.width = "";
+// document.body.style.height = "";
+// document.body.style.top = "";
+// document.body.style.left = "";
+
+// document.removeEventListener("touchstart", preventPullToRefresh);
+// document.removeEventListener("touchmove", preventPullToRefresh);
+// document.removeEventListener("touchend", preventDoubleTapZoom);
+// }, []);
+
+// const preventPullToRefresh = (e: TouchEvent) => {
+// const target = e.target as HTMLElement;
+// const messagesContainer = messagesContainerRef.current;
+
+// if (messagesContainer && messagesContainer.contains(target)) {
+// return;
+// }
+
+// if (e.touches.length > 1) {
+// e.preventDefault();
+// return;
+// }
+
+// const touch = e.touches[0];
+// const startY = touch.clientY;
+
+// if (startY < 100 && e.type === "touchstart") {
+// e.preventDefault();
+// }
+// };
+
+// let lastTouchEnd = 0;
+// const preventDoubleTapZoom = (e: TouchEvent) => {
+// const now = Date.now();
+// if (now - lastTouchEnd <= 300) {
+// e.preventDefault();
+// }
+// lastTouchEnd = now;
+// };
+
+// const scrollToBottom = () => {
+// if (messagesContainerRef.current) {
+// const container = messagesContainerRef.current;
+// requestAnimationFrame(() => {
+// container.scrollTop = container.scrollHeight;
+// });
+// }
+// };
+
+// const stopAllAudio = () => {
+// if (currentPlayingId && audioRefs.current[currentPlayingId]) {
+// audioRefs.current[currentPlayingId].pause();
+// audioRefs.current[currentPlayingId].currentTime = 0;
+
+// setMessages((prev) =>
+// prev.map((msg) =>
+// msg.id === currentPlayingId ? { ...msg, isPlaying: false } : msg
+// )
+// );
+// setCurrentPlayingId(null);
+// }
+
+// Object.values(audioRefs.current).forEach((audio) => {
+// if (!audio.paused) {
+// audio.pause();
+// audio.currentTime = 0;
+// }
+// });
+// };
+
+// const startRecording = useCallback(async () => {
+// console.log("=== 开始录音 ===");
+
+// if (isRecordingRef.current) {
+// console.log("已在录音，忽略");
+// return;
+// }
+
+// if (!isInitialized || !initializedRef.current) {
+// Toast.show("应用正在初始化，请稍后重试");
+// return;
+// }
+
+// if (!hasPermission) {
+// const granted = await checkMicrophonePermission(true);
+// if (!granted) {
+// return;
+// }
+// }
+
+// try {
+// // 震动反馈 - 开始录音时轻微震动
+// vibrate(50);
+
+// // 播放开始录音音效
+// playSound(startRecordSoundRef);
+
+// // 立即更新UI状态
+// setIsRecording(true);
+// setRecordingDuration(0);
+// isCancelledRef.current = false;
+// recordingStartTimeRef.current = Date.now();
+
+// stopAllAudio();
+
+// // 使用react-audio-voice-recorder开始录音
+// recorderControls.startRecording();
+
+// // 立即开始计时
+// recordingTimerRef.current = setInterval(() => {
+// setRecordingDuration((prev) => prev + 1);
+// }, 1000);
+
+// Toast.show("开始录音...");
+// } catch (error) {
+// console.error("开始录音失败:", error);
+// resetRecordingState();
+
+// if (
+// error.name === "NotAllowedError" ||
+// error.name === "PermissionDeniedError"
+// ) {
+// setHasPermission(false);
+// if (!dialogShowing) {
+// showPermissionDialog();
+// }
+// } else {
+// Toast.show(`录音失败: ${error.message || "未知错误"}`);
+// }
+// }
+// }, [
+// hasPermission,
+// isInitialized,
+// recorderControls,
+// checkMicrophonePermission,
+// dialogShowing,
+// showPermissionDialog,
+// ]);
+
+// const stopRecording = useCallback(() => {
+// console.log("=== 停止录音并发送 ===");
+
+// if (!isRecordingRef.current) {
+// console.log("未在录音，忽略");
+// return;
+// }
+
+// try {
+// // 震动反馈 - 发送时的震动模式：短-停-短
+// vibrate([100, 50, 100]);
+
+// // 立即更新UI状态
+// setIsRecording(false);
+
+// if (recordingTimerRef.current) {
+// clearInterval(recordingTimerRef.current);
+// recordingTimerRef.current = undefined;
+// }
+
+// // 停止录音并触发onRecordingComplete
+// recorderControls.stopRecording();
+// } catch (error) {
+// console.error("停止录音失败:", error);
+// resetRecordingState();
+// Toast.show("停止录音失败");
+// }
+// }, [recorderControls]);
+
+// // 在发送时检查录音时长
+// const onRecordingComplete = useCallback(
+// (blob: Blob) => {
+// console.log("=== 录音完成回调 ===");
+// console.log("录音完成状态:", {
+// blobSize: blob.size,
+// isCancelled: isCancelledRef.current,
+// recordingDuration,
+// });
+
+// // 如果被取消，直接忽略，不做任何处理
+// if (isCancelledRef.current) {
+// console.log("录音被取消，完全忽略结果");
+// return;
+// }
+
+// // 计算实际录音时长
+// const actualDuration = Math.floor(
+// (Date.now() - recordingStartTimeRef.current) / 1000
+// );
+// const finalDuration = Math.max(recordingDuration, actualDuration);
+
+// console.log("录音完成，准备发送:", {
+// counterDuration: recordingDuration,
+// actualDuration,
+// finalDuration,
+// });
+
+// // 在这里检查录音时长 - 发送时拦截
+// if (finalDuration < 1) {
+// console.log("录音时间太短，拒绝发送");
+// Toast.show("录音时间太短，请重新录音");
+// setRecordingDuration(0);
+// return;
+// }
+
+// // 检查blob有效性
+// if (!blob || blob.size === 0) {
+// console.log("录音数据无效，拒绝发送");
+// Toast.show("录音数据无效，请重新录音");
+// setRecordingDuration(0);
+// return;
+// }
+
+// // 通过所有检查，发送消息
+// // 播放发送成功音效
+// playSound(sendSoundRef);
+
+// // 发送成功的震动反馈 - 长震动表示成功
+// vibrate(200);
+
+// const audioUrl = URL.createObjectURL(blob);
+// const newMessage: Message = {
+// id: Date.now().toString(),
+// type: "voice",
+// audioUrl,
+// duration: finalDuration,
+// timestamp: Date.now(),
+// isTranslating: true,
+// };
+
+// console.log("发送语音消息:", newMessage);
+// setMessages((prev) => [...prev, newMessage]);
+// setRecordingDuration(0);
+
+// setTimeout(() => {
+// translateAudio(newMessage.id, blob);
+// }, 1000);
+
+// Toast.show("语音已发送");
+// },
+// [recordingDuration]
+// );
+
+// const cancelRecording = useCallback(() => {
+// console.log("=== 取消录音 ===");
+
+// // 取消时的震动反馈 - 三次短震动表示取消
+// vibrate([50, 50, 50, 50, 50]);
+
+// // 立即设置取消标志 - 这是最重要的
+// isCancelledRef.current = true;
+
+// // 立即显示取消提示
+// Toast.show("已取消录音");
+
+// // 直接重置状态，不调用recorderControls.stopRecording()
+// setIsRecording(false);
+// setRecordingDuration(0);
+// isRecordingRef.current = false;
+
+// if (recordingTimerRef.current) {
+// clearInterval(recordingTimerRef.current);
+// recordingTimerRef.current = undefined;
+// }
+// }, []);
+
+// const handleRecordButtonClick = useCallback(
+// (e: React.MouseEvent) => {
+// e.preventDefault();
+// e.stopPropagation();
+
+// console.log("=== 录音按钮点击 ===");
+
+// if (permissionChecking) {
+// console.log("权限检查中，忽略点击");
+// return;
+// }
+
+// if (isRecordingRef.current) {
+// stopRecording();
+// } else {
+// startRecording();
+// }
+// },
+// [permissionChecking, startRecording, stopRecording]
+// );
+
+// const translateAudio = async (messageId: string, audioBlob: Blob) => {
+// try {
+// const translatedText = await mockTranslateAudio(audioBlob);
+
+// 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
+// )
+// );
+// }
+// };
+
+// const mockTranslateAudio = async (audioBlob: Blob): Promise => {
+// return new Promise((resolve) => {
+// setTimeout(() => {
+// const mockTranslations = [
+// "汪汪汪！我饿了，想吃东西！🍖",
+// "喵喵～我想要抱抱！🤗",
+// "我想出去玩耍！🎾",
+// "我很开心！😊",
+// "我有点害怕...😰",
+// "我想睡觉了～😴",
+// "主人，陪我玩一会儿吧！🎮",
+// "我想喝水了💧",
+// "外面有什么声音？👂",
+// "我爱你，主人！❤️",
+// ];
+// const randomTranslation =
+// mockTranslations[Math.floor(Math.random() * mockTranslations.length)];
+// resolve(randomTranslation);
+// }, 2000 + Math.random() * 2000);
+// });
+// };
+
+// const playAudio = (messageId: string, audioUrl: string) => {
+// if (isRecording) {
+// Toast.show("录音中，无法播放音频");
+// return;
+// }
+
+// if (currentPlayingId === messageId) {
+// if (audioRefs.current[messageId]) {
+// audioRefs.current[messageId].pause();
+// audioRefs.current[messageId].currentTime = 0;
+// }
+// setCurrentPlayingId(null);
+// setMessages((prev) =>
+// prev.map((msg) =>
+// msg.id === messageId ? { ...msg, isPlaying: false } : msg
+// )
+// );
+// return;
+// }
+
+// stopAllAudio();
+
+// if (!audioRefs.current[messageId]) {
+// audioRefs.current[messageId] = new Audio(audioUrl);
+// }
+
+// const audio = audioRefs.current[messageId];
+// audio.currentTime = 0;
+
+// audio.onended = () => {
+// setCurrentPlayingId(null);
+// setMessages((prev) =>
+// prev.map((msg) =>
+// msg.id === messageId ? { ...msg, isPlaying: false } : msg
+// )
+// );
+// };
+
+// audio.onerror = (error) => {
+// console.error("音频播放错误:", error);
+// Toast.show("音频播放失败");
+// setCurrentPlayingId(null);
+// setMessages((prev) =>
+// prev.map((msg) =>
+// msg.id === messageId ? { ...msg, isPlaying: false } : msg
+// )
+// );
+// };
+
+// audio
+// .play()
+// .then(() => {
+// setCurrentPlayingId(messageId);
+// setMessages((prev) =>
+// prev.map((msg) =>
+// msg.id === messageId
+// ? { ...msg, isPlaying: true }
+// : { ...msg, isPlaying: false }
+// )
+// );
+// })
+// .catch((error) => {
+// console.error("音频播放失败:", error);
+// Toast.show("音频播放失败");
+// });
+// };
+
+// const formatDuration = (seconds: number) => {
+// const mins = Math.floor(seconds / 60);
+// const secs = seconds % 60;
+// return `${mins}:${secs.toString().padStart(2, "0")}`;
+// };
+
+// const formatTime = (timestamp: number) => {
+// return new Date(timestamp).toLocaleTimeString("zh-CN", {
+// hour: "2-digit",
+// minute: "2-digit",
+// });
+// };
+
+// return (
+// = ({width = 300, height = 300, onScan}) => {
+ const videoRef = useRef(null);
+ const canvasRef = useRef(null);
+ const [isScanning, setIsScanning] = useState(true);
+ const [scanSuccess, setScanSuccess] = useState(false); // 新的状态变量
+ let streamRef: MediaStream | null = null; // 存储摄像头流的引用
+
+ useEffect(() => {
+ navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}})
+ .then(stream => {
+ streamRef = stream; // 存储对摄像头流的引用
+ if (videoRef.current) {
+ videoRef.current.srcObject = stream;
+ videoRef.current.addEventListener('loadedmetadata', () => {
+ videoRef.current?.play().then(() => {
+ requestAnimationFrame(tick);
+ }).catch(err => console.error("Error playing video: ", err));
+ });
+ }
+ }).catch(err => {
+ console.error("Error accessing media devices: ", err);
+ setIsScanning(false);
+ });
+ }, []);
+ const tick = () => {
+ // 如果已经成功扫描，就不再继续执行tick
+ if (!isScanning) return;
+
+ if (videoRef.current && canvasRef.current) {
+ if (videoRef.current.readyState === videoRef.current.HAVE_ENOUGH_DATA) {
+ let video = videoRef.current;
+ let canvas = canvasRef.current;
+ let ctx = canvas.getContext('2d');
+
+ if (ctx) {
+ canvas.height = height;
+ canvas.width = width;
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+ let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ let code = jsQR(imageData.data, imageData.width, imageData.height);
+
+ if (code) {
+ onScan(code.data); // 扫码成功
+ setIsScanning(false); // 更新状态为不再扫描
+ setScanSuccess(true); // 显示扫描成功的蒙层
+ if (streamRef) {
+ let tracks = streamRef.getTracks();
+ tracks.forEach(track => track.stop()); // 关闭摄像头
+ }
+ return; // 直接返回，避免再次调用 requestAnimationFrame
+ }
+ }
+ }
+ requestAnimationFrame(tick);
+ }
+ };
+ return (
+
+
+ );
+}
+
+export default XPopup;
diff --git a/src/composables/authorization.ts b/src/composables/authorization.ts
new file mode 100644
index 0000000..b622afa
--- /dev/null
+++ b/src/composables/authorization.ts
@@ -0,0 +1,42 @@
+import {useState, useEffect} from 'react';
+
+export const STORAGE_AUTHORIZE_KEY = 'token';
+
+export const useAuthorization = () => {
+ const [currentToken, setCurrentToken] = useState(localStorage.getItem(STORAGE_AUTHORIZE_KEY));
+
+ // 同步 localStorage 变更
+ useEffect(() => {
+ const handleStorageChange = (event: StorageEvent) => {
+ if (event.key === STORAGE_AUTHORIZE_KEY) {
+ setCurrentToken(localStorage.getItem(STORAGE_AUTHORIZE_KEY));
+ }
+ };
+
+ window.addEventListener('storage', handleStorageChange);
+ return () => {
+ window.removeEventListener('storage', handleStorageChange);
+ };
+ }, []);
+
+ const login = (token: string) => {
+ localStorage.setItem(STORAGE_AUTHORIZE_KEY, token);
+ setCurrentToken(token);
+ };
+
+ const logout = () => {
+ localStorage.removeItem(STORAGE_AUTHORIZE_KEY);
+ setCurrentToken(null);
+ };
+
+ const isLogin = () => {
+ return !!currentToken;
+ };
+
+ return {
+ token: currentToken,
+ login,
+ logout,
+ isLogin
+ };
+};
diff --git a/src/composables/language.ts b/src/composables/language.ts
new file mode 100644
index 0000000..9c808aa
--- /dev/null
+++ b/src/composables/language.ts
@@ -0,0 +1,21 @@
+import {setDefaultConfig} from 'antd-mobile';
+import enUS from 'antd-mobile/es/locales/en-US';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+
+function changeLanguage(language: string) {
+ let locale;
+ switch (language) {
+ case 'zh_CN':
+ locale = enUS;
+ break;
+ case 'en_US':
+ locale = zhCN;
+ break;
+ default:
+ locale = enUS; // 或者是你的默认语言
+ }
+
+ setDefaultConfig({locale: locale});
+}
+
+export default changeLanguage;
diff --git a/src/enum/http-enum.ts b/src/enum/http-enum.ts
new file mode 100644
index 0000000..03938d1
--- /dev/null
+++ b/src/enum/http-enum.ts
@@ -0,0 +1,21 @@
+/**
+ * @description: request method
+ */
+export enum RequestEnum {
+ GET = 'GET',
+ POST = 'POST',
+ PUT = 'PUT',
+ DELETE = 'DELETE',
+}
+
+/**
+ * @description: contentType
+ */
+export enum ContentTypeEnum {
+ // json
+ JSON = 'application/json;charset=UTF-8',
+ // form-data qs
+ FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+ // form-data upload
+ FORM_DATA = 'multipart/form-data;charset=UTF-8',
+}
diff --git a/src/hooks/i18n.ts b/src/hooks/i18n.ts
new file mode 100644
index 0000000..ac3cd8c
--- /dev/null
+++ b/src/hooks/i18n.ts
@@ -0,0 +1,12 @@
+import zhCN from '@/locales/zh_CN.json'
+import enUS from '@/locales/en_US.json'
+import {useI18nStore} from '@/store/i18n';
+
+export default function useI18n() {
+ const {lang} = useI18nStore();
+ const locales = lang === 'en_US' ? enUS : zhCN;
+
+ return (name: string) => {
+ return locales[name as keyof typeof locales] || name;
+ }
+}
diff --git a/src/hooks/location.ts b/src/hooks/location.ts
new file mode 100644
index 0000000..f549fc2
--- /dev/null
+++ b/src/hooks/location.ts
@@ -0,0 +1,60 @@
+import {useState, useEffect} from 'react';
+import useI18n from "@/hooks/i18n";
+
+// 定义位置坐标的类型
+export interface Coordinates {
+ lat: number;
+ lng: number;
+}
+
+// 定义返回的位置状态的类型
+export interface LocationState {
+ loaded: boolean;
+ coordinates: Coordinates | null;
+}
+
+// 定义错误状态的类型
+export type ErrorState = string | null;
+
+export const useLocation = (): { location: LocationState; error: ErrorState } => {
+ const t = useI18n();
+
+ // 用于存储位置信息和加载状态的状态
+ const [location, setLocation] = useState({
+ loaded: false,
+ coordinates: null,
+ });
+
+ // 用于存储任何错误消息的状态
+ const [error, setError] = useState(null);
+
+ // 地理位置成功处理函数
+ const onSuccess = (location: GeolocationPosition) => {
+ setLocation({
+ loaded: true,
+ coordinates: {
+ lat: location.coords.latitude,
+ lng: location.coords.longitude,
+ },
+ });
+ };
+
+ // 地理位置错误处理函数
+ const onError = (error: GeolocationPositionError) => {
+ setError(error.message);
+ };
+
+ // 使用 useEffect 在组件挂载时执行地理位置请求
+ useEffect(() => {
+ // 检查浏览器是否支持地理位置
+ if (!navigator.geolocation) {
+ setError(t('hooks.location.unsupported'));
+ return;
+ }
+
+ // 请求用户的当前位置
+ navigator.geolocation.getCurrentPosition(onSuccess, onError);
+ }, []);
+
+ return {location, error};
+};
diff --git a/src/hooks/session.ts b/src/hooks/session.ts
new file mode 100644
index 0000000..5595df5
--- /dev/null
+++ b/src/hooks/session.ts
@@ -0,0 +1,28 @@
+import {useState, useEffect} from 'react';
+import isEqual from 'lodash.isequal';
+
+function useSessionStorage(key: string, initialValue: T): [T, (value: T) => void] {
+ // 初始化状态
+ const [storedValue, setStoredValue] = useState(() => {
+ const item = sessionStorage.getItem(key);
+ if (item !== null) {
+ // 如果 sessionStorage 中有数据，则使用现有数据
+ return JSON.parse(item);
+ } else {
+ // 当 sessionStorage 中没有相应的键时，使用 initialValue 初始化，并写入 sessionStorage
+ sessionStorage.setItem(key, JSON.stringify(initialValue));
+ return initialValue;
+ }
+ });
+
+ // 监听并保存变化到 sessionStorage
+ useEffect(() => {
+ if (!isEqual(JSON.parse(sessionStorage.getItem(key) || 'null'), storedValue)) {
+ sessionStorage.setItem(key, JSON.stringify(storedValue));
+ }
+ }, [key, storedValue]);
+
+ return [storedValue, setStoredValue];
+}
+
+export default useSessionStorage;
diff --git a/src/hooks/useAudioControl.ts b/src/hooks/useAudioControl.ts
new file mode 100644
index 0000000..15245dd
--- /dev/null
+++ b/src/hooks/useAudioControl.ts
@@ -0,0 +1,55 @@
+// hooks/useAudioControl.ts
+import { useEffect, useState } from "react";
+import AudioManager from "../utils/audioManager";
+
+interface UseAudioControlReturn {
+ currentPlayingId: string | null;
+ stopAllAudio: () => void;
+ pauseAllAudio: () => void;
+ getAudioStates: () => Record<
+ string,
+ {
+ isPlaying: boolean;
+ duration: number;
+ currentTime: number;
+ }
+ >;
+}
+
+export const useAudioControl = (): UseAudioControlReturn => {
+ const [currentPlayingId, setCurrentPlayingId] = useState(null);
+ const audioManager = AudioManager.getInstance();
+
+ useEffect(() => {
+ // 定期检查当前播放状态
+ const interval = setInterval(() => {
+ const currentId = audioManager.getCurrentAudioId();
+ setCurrentPlayingId(currentId);
+ }, 500);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, [audioManager]);
+
+ const stopAllAudio = () => {
+ audioManager.stopCurrent();
+ setCurrentPlayingId(null);
+ };
+
+ const pauseAllAudio = () => {
+ audioManager.pauseCurrent();
+ setCurrentPlayingId(null);
+ };
+
+ const getAudioStates = () => {
+ return audioManager.getAudioStates();
+ };
+
+ return {
+ currentPlayingId,
+ stopAllAudio,
+ pauseAllAudio,
+ getAudioStates,
+ };
+};
diff --git a/src/hooks/useFileUpload.ts b/src/hooks/useFileUpload.ts
new file mode 100644
index 0000000..a2f61f8
--- /dev/null
+++ b/src/hooks/useFileUpload.ts
@@ -0,0 +1,198 @@
+// hooks/useFileUpload.ts (更新)
+import { useState, useCallback } from "react";
+import {
+ UploadConfig,
+ UploadProgress,
+ UploadResponse,
+ VoiceUploadStatus,
+} from "../types/upload";
+
+interface UseFileUploadReturn {
+ uploadStatus: VoiceUploadStatus;
+ uploadFile: (
+ file: Blob,
+ fileName: string,
+ config: UploadConfig
+ ) => Promise;
+ resetUpload: () => void;
+}
+
+export const useFileUpload = (): UseFileUploadReturn => {
+ const [uploadStatus, setUploadStatus] = useState({
+ status: "idle",
+ });
+
+ // 检测文件类型并转换文件名
+ const getFileExtension = (mimeType: string): string => {
+ const mimeToExt: Record = {
+ "audio/webm": ".webm",
+ "audio/mp4": ".m4a",
+ "audio/aac": ".aac",
+ "audio/wav": ".wav",
+ "audio/ogg": ".ogg",
+ "audio/mpeg": ".mp3",
+ };
+
+ // 处理带codecs的MIME类型
+ const baseMimeType = mimeType.split(";")[0];
+ return mimeToExt[baseMimeType] || ".webm";
+ };
+
+ const uploadFile = useCallback(
+ async (
+ file: Blob,
+ fileName: string,
+ config: UploadConfig
+ ): Promise => {
+ // 检查文件大小
+ if (config.maxFileSize && file.size > config.maxFileSize) {
+ const error = `文件大小超过限制 (${Math.round(
+ config.maxFileSize / 1024 / 1024
+ )}MB)`;
+ setUploadStatus({
+ status: "error",
+ error,
+ });
+ throw new Error(error);
+ }
+
+ // 更宽松的文件类型检查，支持iOS格式
+ const allowedTypes = config.allowedTypes || [
+ "audio/webm",
+ "audio/mp4",
+ "audio/aac",
+ "audio/wav",
+ "audio/ogg",
+ "audio/mpeg",
+ ];
+
+ const baseMimeType = file.type.split(";")[0];
+ const isTypeAllowed = allowedTypes.some(
+ (type) => baseMimeType === type || baseMimeType === type.split(";")[0]
+ );
+
+ if (!isTypeAllowed) {
+ console.warn(`文件类型 ${file.type} 不在允许列表中，但继续上传`);
+ }
+
+ // 根据实际MIME类型调整文件名
+ const extension = getFileExtension(file.type);
+ const adjustedFileName = fileName.replace(/\.[^/.]+$/, "") + extension;
+
+ setUploadStatus({
+ status: "uploading",
+ progress: { loaded: 0, total: file.size, percentage: 0 },
+ });
+
+ return new Promise((resolve, reject) => {
+ const formData = new FormData();
+ formData.append(config.fieldName || "file", file, adjustedFileName);
+
+ // 添加额外的元数据
+ formData.append("fileName", adjustedFileName);
+ formData.append("originalFileName", fileName);
+ formData.append("fileSize", file.size.toString());
+ formData.append("fileType", file.type);
+ formData.append("uploadTime", new Date().toISOString());
+ formData.append("userAgent", navigator.userAgent);
+
+ const xhr = new XMLHttpRequest();
+
+ // 上传进度监听
+ xhr.upload.addEventListener("progress", (event) => {
+ if (event.lengthComputable) {
+ const progress: UploadProgress = {
+ loaded: event.loaded,
+ total: event.total,
+ percentage: Math.round((event.loaded / event.total) * 100),
+ };
+
+ setUploadStatus({
+ status: "uploading",
+ progress,
+ });
+ }
+ });
+
+ // 上传完成监听
+ xhr.addEventListener("load", () => {
+ try {
+ const response: UploadResponse = JSON.parse(xhr.responseText);
+
+ if (xhr.status >= 200 && xhr.status < 300 && response.success) {
+ setUploadStatus({
+ status: "success",
+ response,
+ progress: {
+ loaded: file.size,
+ total: file.size,
+ percentage: 100,
+ },
+ });
+ resolve(response);
+ } else {
+ const error = response.error || `上传失败: ${xhr.status}`;
+ setUploadStatus({
+ status: "error",
+ error,
+ });
+ reject(new Error(error));
+ }
+ } catch (parseError) {
+ const error = "服务器响应格式错误";
+ setUploadStatus({
+ status: "error",
+ error,
+ });
+ reject(new Error(error));
+ }
+ });
+
+ // 上传错误监听
+ xhr.addEventListener("error", () => {
+ const error = "网络错误，上传失败";
+ setUploadStatus({
+ status: "error",
+ error,
+ });
+ reject(new Error(error));
+ });
+
+ // 上传中断监听
+ xhr.addEventListener("abort", () => {
+ const error = "上传已取消";
+ setUploadStatus({
+ status: "error",
+ error,
+ });
+ reject(new Error(error));
+ });
+
+ // 设置请求头
+ const headers = {
+ "X-Requested-With": "XMLHttpRequest",
+ ...config.headers,
+ };
+
+ Object.entries(headers).forEach(([key, value]) => {
+ xhr.setRequestHeader(key, value);
+ });
+
+ // 发送请求
+ xhr.open(config.method || "POST", config.url);
+ xhr.send(formData);
+ });
+ },
+ []
+ );
+
+ const resetUpload = useCallback(() => {
+ setUploadStatus({ status: "idle" });
+ }, []);
+
+ return {
+ uploadStatus,
+ uploadFile,
+ resetUpload,
+ };
+};
diff --git a/src/hooks/usePetTranslator.ts b/src/hooks/usePetTranslator.ts
new file mode 100644
index 0000000..71438f1
--- /dev/null
+++ b/src/hooks/usePetTranslator.ts
@@ -0,0 +1,153 @@
+// hooks/usePetTranslator.ts
+import { useState, useCallback } from "react";
+import { VoiceMessage, ChatMessage, PetProfile } from "../types/chat";
+
+interface UsePetTranslatorReturn {
+ messages: ChatMessage[];
+ currentPet: PetProfile;
+ translateVoice: (voiceMessage: VoiceMessage) => Promise;
+ addMessage: (message: ChatMessage) => void;
+ updateMessage: (messageId: string, updatedMessage: ChatMessage) => void; // 新增
+ clearMessages: () => void;
+ setPet: (pet: PetProfile) => void;
+}
+
+export const usePetTranslator = (): UsePetTranslatorReturn => {
+ const [messages, setMessages] = useState([]);
+ const [currentPet, setCurrentPet] = useState({
+ name: "小汪",
+ avatar: "🐕",
+ species: "dog",
+ personality: "活泼可爱",
+ });
+
+ // 模拟翻译API调用
+ const translateVoice = useCallback(
+ async (voiceMessage: VoiceMessage): Promise => {
+ // 更新消息状态为翻译中
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === voiceMessage.id ? { ...msg, translating: true } : msg
+ )
+ );
+
+ try {
+ // 模拟API调用延迟
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+
+ // 模拟翻译结果
+ const translations = {
+ dog: [
+ "主人，我饿了！给我点好吃的吧！🍖",
+ "我想出去玩耍！带我去公园吧！🏃♂️",
+ "我爱你，主人！你是最好的！❤️",
+ "我想睡觉了，陪我一起休息吧！😴",
+ "有陌生人！我要保护你！🛡️",
+ "今天天气真好，我们去散步吧！🌞",
+ "我想和其他狗狗玩耍！🐕🦺",
+ "主人回来了！我好开心！🎉",
+ ],
+ cat: [
+ "铲屎官，快来伺候本喵！😼",
+ "我要晒太阳，别打扰我！☀️",
+ "给我准备小鱼干！现在就要！🐟",
+ "我心情不好，离我远点！😾",
+ "勉强让你摸摸我的头吧！😸",
+ "这个位置是我的，你不能坐！🛋️",
+ "我饿了，但我不会告诉你的！🙄",
+ "今天我心情好，可以陪你玩一会！😺",
+ ],
+ bird: [
+ "早上好！新的一天开始了！🌅",
+ "我想唱歌给你听！🎵",
+ "给我一些种子吧！我饿了！🌱",
+ "外面的世界真美好！🌳",
+ "我想和你一起飞翔！🕊️",
+ "今天的阳光真温暖！☀️",
+ "我学会了新的歌曲！🎶",
+ "陪我聊聊天吧！💬",
+ ],
+ other: [
+ "我想和你交流！👋",
+ "照顾好我哦！💕",
+ "我很开心！😊",
+ "陪我玩一会儿吧！🎾",
+ "我需要你的关爱！🤗",
+ "今天过得真愉快！😄",
+ "我想要你的注意！👀",
+ "我们是最好的朋友！🤝",
+ ],
+ };
+
+ const speciesTranslations =
+ translations[currentPet.species] || translations.other;
+ const randomTranslation =
+ speciesTranslations[
+ Math.floor(Math.random() * speciesTranslations.length)
+ ];
+
+ // 更新翻译结果
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === voiceMessage.id
+ ? { ...msg, translation: randomTranslation, translating: false }
+ : msg
+ )
+ );
+
+ // 添加宠物回复
+ const petReply: ChatMessage = {
+ id: `pet_${Date.now()}`,
+ type: "text",
+ content: `${currentPet.name}说：${randomTranslation}`,
+ sender: "pet",
+ timestamp: Date.now(),
+ };
+
+ setMessages((prev) => [...prev, petReply]);
+ } catch (error) {
+ console.error("翻译失败:", error);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === voiceMessage.id
+ ? { ...msg, translation: "翻译失败，请重试", translating: false }
+ : msg
+ )
+ );
+ }
+ },
+ [currentPet]
+ );
+
+ const addMessage = useCallback((message: ChatMessage): void => {
+ setMessages((prev) => [...prev, message]);
+ }, []);
+
+ // 新增：更新消息方法
+ const updateMessage = useCallback(
+ (messageId: string, updatedMessage: ChatMessage): void => {
+ setMessages((prev) =>
+ prev.map((msg) => (msg.id === messageId ? updatedMessage : msg))
+ );
+ },
+ []
+ );
+
+ const clearMessages = useCallback((): void => {
+ setMessages([]);
+ }, []);
+
+ const setPet = useCallback((pet: PetProfile): void => {
+ setCurrentPet(pet);
+ }, []);
+
+ return {
+ messages,
+ currentPet,
+ translateVoice,
+ addMessage,
+ updateMessage, // 导出新方法
+ clearMessages,
+ setPet,
+ };
+};
diff --git a/src/hooks/useVoiceRecorder.ts b/src/hooks/useVoiceRecorder.ts
new file mode 100644
index 0000000..400df19
--- /dev/null
+++ b/src/hooks/useVoiceRecorder.ts
@@ -0,0 +1,125 @@
+// hooks/useVoiceRecorder.ts (使用新的录音工具类)
+import { useState, useRef, useCallback } from "react";
+import { UniversalAudioRecorder } from "../utils/audioRecorder";
+
+interface UseVoiceRecorderReturn {
+ isRecording: boolean;
+ recordingTime: number;
+ isPaused: boolean;
+ startRecording: () => Promise;
+ stopRecording: () => Promise;
+ pauseRecording: () => void;
+ resumeRecording: () => void;
+ cancelRecording: () => void;
+}
+
+export const useVoiceRecorder = (): UseVoiceRecorderReturn => {
+ const [isRecording, setIsRecording] = useState(false);
+ const [isPaused, setIsPaused] = useState(false);
+ const [recordingTime, setRecordingTime] = useState(0);
+
+ const recorderRef = useRef(null);
+ const timerRef = useRef(null);
+
+ const startTimer = useCallback(() => {
+ timerRef.current = setInterval(() => {
+ if (recorderRef.current) {
+ setRecordingTime(recorderRef.current.getDuration());
+ }
+ }, 100);
+ }, []);
+
+ const stopTimer = useCallback(() => {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ timerRef.current = null;
+ }
+ }, []);
+
+ const startRecording = useCallback(async (): Promise => {
+ try {
+ const recorder = new UniversalAudioRecorder({
+ sampleRate: 16000,
+ channels: 1,
+ bitDepth: 16,
+ });
+
+ await recorder.start();
+ recorderRef.current = recorder;
+
+ setIsRecording(true);
+ setIsPaused(false);
+ setRecordingTime(0);
+ startTimer();
+ } catch (error) {
+ console.error("录音启动失败:", error);
+ throw error;
+ }
+ }, [startTimer]);
+
+ const stopRecording = useCallback(async (): Promise => {
+ if (!recorderRef.current || !isRecording) return null;
+
+ try {
+ const audioBlob = await recorderRef.current.stop();
+
+ setIsRecording(false);
+ setIsPaused(false);
+ setRecordingTime(0);
+ stopTimer();
+
+ recorderRef.current = null;
+ return audioBlob;
+ } catch (error) {
+ console.error("录音停止失败:", error);
+ return null;
+ }
+ }, [isRecording, stopTimer]);
+
+ const pauseRecording = useCallback((): void => {
+ if (!recorderRef.current || !isRecording || isPaused) return;
+
+ try {
+ recorderRef.current.pause();
+ setIsPaused(true);
+ stopTimer();
+ } catch (error) {
+ console.error("录音暂停失败:", error);
+ }
+ }, [isRecording, isPaused, stopTimer]);
+
+ const resumeRecording = useCallback((): void => {
+ if (!recorderRef.current || !isRecording || !isPaused) return;
+
+ try {
+ recorderRef.current.resume();
+ setIsPaused(false);
+ startTimer();
+ } catch (error) {
+ console.error("录音恢复失败:", error);
+ }
+ }, [isRecording, isPaused, startTimer]);
+
+ const cancelRecording = useCallback((): void => {
+ if (recorderRef.current) {
+ recorderRef.current.cancel();
+ recorderRef.current = null;
+ }
+
+ setIsRecording(false);
+ setIsPaused(false);
+ setRecordingTime(0);
+ stopTimer();
+ }, [stopTimer]);
+
+ return {
+ isRecording,
+ recordingTime,
+ isPaused,
+ startRecording,
+ stopRecording,
+ pauseRecording,
+ resumeRecording,
+ cancelRecording,
+ };
+};
diff --git a/src/http/axios-instance.ts b/src/http/axios-instance.ts
new file mode 100644
index 0000000..2bef525
--- /dev/null
+++ b/src/http/axios-instance.ts
@@ -0,0 +1,49 @@
+import Axios, {
+ AxiosError,
+ AxiosInstance as AxiosType,
+ AxiosResponse,
+ InternalAxiosRequestConfig
+} from 'axios';
+import {STORAGE_AUTHORIZE_KEY} from "@/composables/authorization.ts";
+
+export interface ResponseBody {
+ code: number;
+ data?: T;
+ msg: string;
+}
+
+async function requestHandler(config: InternalAxiosRequestConfig): Promise {
+ const token = localStorage.getItem(STORAGE_AUTHORIZE_KEY);
+ if (token) {
+ config.headers[STORAGE_AUTHORIZE_KEY] = token;
+ }
+ return config;
+}
+
+function responseHandler(response: AxiosResponse): AxiosResponse {
+ // 响应拦截器逻辑...
+ return response;
+}
+
+function errorHandler(error: AxiosError): Promise> {
+ // 错误处理逻辑...
+ return Promise.reject(error);
+}
+
+class AxiosInstance {
+ private readonly instance: AxiosType;
+
+ constructor(baseURL: string) {
+ this.instance = Axios.create({baseURL});
+
+ this.instance.interceptors.request.use(requestHandler, errorHandler);
+ this.instance.interceptors.response.use(responseHandler, errorHandler);
+ }
+
+ public getInstance(): AxiosType {
+ return this.instance;
+ }
+}
+
+const baseURL = import.meta.env.VITE_BASE_URL || 'http://127.0.0.1:8080';
+export const axiosInstance = new AxiosInstance(baseURL).getInstance();
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..06b9df1
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,103 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Roboto", sans-serif;
+}
+
+a,
+button,
+input,
+textarea {
+ -webkit-tap-highlight-color: transparent;
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ font-size: 100%;
+}
+
+/* 小屏幕设备（如手机）*/
+@media (max-width: 600px) {
+ html {
+ font-size: 90%; /* 字体稍微小一点 */
+ }
+}
+
+/* 中等屏幕设备（如平板）*/
+@media (min-width: 601px) and (max-width: 1024px) {
+ html {
+ font-size: 100%; /* 标准大小 */
+ }
+}
+
+/* 大屏幕设备（如桌面）*/
+@media (min-width: 1025px) {
+ html {
+ font-size: 110%; /* 字体稍微大一点 */
+ }
+}
+
+* {
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+.ec-navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 100;
+ background-color: #fff;
+ border-bottom: 1px solid #e5e5e5;
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+}
+
+:root {
+ --primary-color: #ffc300;
+}
+
+:root:root {
+ /* --adm-color-primary: #FFC300;
+ --adm-color-success: #00b578;
+ --adm-color-warning: #ff8f1f;
+ --adm-color-danger: #ff3141;
+
+ --adm-color-white: #ffffff;
+ --adm-color-text: #333333;
+ --adm-color-text-secondary: #666666;
+ --adm-color-weak: #999999;
+ --adm-color-light: #cccccc;
+ --adm-color-border: #eeeeee;
+ --adm-color-box: #f5f5f5;
+ --adm-color-background: #ffffff;
+
+ --adm-font-size-main: var(--adm-font-size-5); */
+
+ --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
+ helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
+ "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+}
+.i-icon {
+ height: 100%;
+}
+svg {
+ height: 100%;
+}
diff --git a/src/layout/main/index.less b/src/layout/main/index.less
new file mode 100644
index 0000000..fe18e79
--- /dev/null
+++ b/src/layout/main/index.less
@@ -0,0 +1,20 @@
+.main-layout {
+ height: 100%;
+ .layout-content {
+ height: 100%;
+ overflow-y: auto;
+ // padding-bottom: 150px;
+ padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
+ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
+ }
+
+ .layout-tab {
+ flex: 0 0 auto;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ z-index: 1000;
+ background-color: #fff;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+ }
+}
diff --git a/src/layout/main/mainLayout.tsx b/src/layout/main/mainLayout.tsx
new file mode 100644
index 0000000..9c18d94
--- /dev/null
+++ b/src/layout/main/mainLayout.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { NavBar, SafeArea, TabBar, Toast } from "antd-mobile";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+ ShoppingBag,
+ TransactionOrder,
+ User,
+ CattleZodiac,
+} from "@icon-park/react";
+import useI18n from "@/hooks/i18n.ts";
+import "./index.less";
+
+interface MainLayoutProps {
+ children: React.ReactNode;
+ isShowNavBar?: boolean;
+ title?: string;
+ onLink?: () => void;
+}
+
+const MainLayout: React.FC = ({
+ isShowNavBar,
+ children,
+ onLink,
+ title,
+}) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { pathname } = location;
+ const [activeKey, setActiveKey] = React.useState(pathname);
+
+ const setRouteActive = (value: string) => {
+ if (value !== "/") {
+ Toast.show("待开发");
+ }
+ };
+
+ const tabs = [
+ {
+ key: "/",
+ title: "宠物翻译",
+ icon:
+
+
+ //
+);
diff --git a/src/route/auth.tsx b/src/route/auth.tsx
new file mode 100644
index 0000000..1406e73
--- /dev/null
+++ b/src/route/auth.tsx
@@ -0,0 +1,29 @@
+import React, {useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+interface AuthRouteProps {
+ children: React.ReactNode;
+ auth?: boolean;
+}
+
+/**
+ * 认证路由
+ * @param children 子组件
+ * @param auth 是否需要认证
+ * @constructor 认证路由组件
+ */
+const AuthRoute: React.FC = ({children, auth}) => {
+ const navigate = useNavigate();
+ const token = localStorage.getItem('token'); // 或者其他认证令牌的获取方式
+ const isAuthenticated = Boolean(token); // 认证逻辑
+
+ useEffect(() => {
+ if (auth && !isAuthenticated) {
+ navigate('/login'); // 如果未认证且路由需要认证，则重定向到登录
+ }
+ }, [auth, isAuthenticated, navigate]);
+
+ return <>{children};
+};
+
+export default AuthRoute;
diff --git a/src/route/render-routes.tsx b/src/route/render-routes.tsx
new file mode 100644
index 0000000..12d6537
--- /dev/null
+++ b/src/route/render-routes.tsx
@@ -0,0 +1,27 @@
+import {Route, Routes} from 'react-router-dom';
+import {routes, AppRoute} from './routes';
+import AuthRoute from './auth.tsx';
+
+/**
+ * 渲染路由
+ * @constructor RenderRoutes
+ */
+export const RenderRoutes = () => {
+ const renderRoutes = (routes: AppRoute[]) => {
+ return routes.map(route => (
+
+ {route.element}
+
+ }
+ >
+ {route.children && renderRoutes(route.children)}
+
+ ));
+ };
+
+ return {renderRoutes(routes)} ;
+};
diff --git a/src/route/routes.tsx b/src/route/routes.tsx
new file mode 100644
index 0000000..44b59ee
--- /dev/null
+++ b/src/route/routes.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Home from "@/view/home";
+import TranslateDetail from "@/view/home/detail";
+import Setting from "@/view/setting";
+import Page404 from "@/view/error/page404";
+export interface AppRoute {
+ path: string;
+ element: React.ReactNode;
+ auth?: boolean;
+ children?: AppRoute[];
+}
+
+export const routes: AppRoute[] = [
+ { path: "/", element: ()(
+ persist(
+ (set, get) => ({
+ lang: 'en_US',
+ changeLanguage: (lang) => set({lang}),
+ toggleLanguage: () => set(() => {
+ return {
+ lang: get().lang.includes('zh') ? 'en_US' : 'zh_CN'
+ }
+ })
+ }),
+ {
+ name: 'i18n-storage',
+ storage: createJSONStorage(() => localStorage)
+ },
+ ),
+)
\ No newline at end of file
diff --git a/src/store/user.ts b/src/store/user.ts
new file mode 100644
index 0000000..f87b10e
--- /dev/null
+++ b/src/store/user.ts
@@ -0,0 +1,22 @@
+import {create} from 'zustand'
+import {persist, createJSONStorage} from 'zustand/middleware'
+
+export const useUserStore = create()(
+ persist(
+ (set) => ({
+ user: {
+ name: '',
+ avatar: '',
+ email: ''
+ },
+ setUser: (user: User) => set({user}),
+ clearUser: () => set({
+ user: null
+ }),
+ }),
+ {
+ name: 'user-storage',
+ storage: createJSONStorage(() => localStorage)
+ },
+ ),
+)
\ No newline at end of file
diff --git a/src/types/chat.ts b/src/types/chat.ts
new file mode 100644
index 0000000..22ec78a
--- /dev/null
+++ b/src/types/chat.ts
@@ -0,0 +1,41 @@
+// types/chat.ts
+// types/chat.ts (更新)
+export interface VoiceMessage {
+ id: string;
+ type: "voice";
+ content: {
+ duration: number;
+ url?: string;
+ localId?: string;
+ blob?: Blob;
+ waveform?: number[];
+ // 新增上传相关字段
+ fileId?: string;
+ fileName?: string;
+ serverUrl?: string;
+ uploadStatus?: "uploading" | "success" | "error";
+ uploadProgress?: number;
+ };
+ sender: "user" | "pet";
+ timestamp: number;
+ isPlaying?: boolean;
+ translation?: string;
+ translating?: boolean;
+}
+
+export interface TextMessage {
+ id: string;
+ type: "text";
+ content: string;
+ sender: "user" | "pet";
+ timestamp: number;
+}
+
+export type ChatMessage = VoiceMessage | TextMessage;
+
+export interface PetProfile {
+ name: string;
+ avatar: string;
+ species: "dog" | "cat" | "bird" | "other";
+ personality: string;
+}
diff --git a/src/types/http.d.ts b/src/types/http.d.ts
new file mode 100644
index 0000000..019239c
--- /dev/null
+++ b/src/types/http.d.ts
@@ -0,0 +1,14 @@
+interface Page {
+ total: number;
+ size: number;
+ current: number;
+ pages: number;
+ records: T[];
+}
+
+export interface Result {
+ success: boolean;
+ code: number;
+ message: string;
+ data: T;
+}
\ No newline at end of file
diff --git a/src/types/store.d.ts b/src/types/store.d.ts
new file mode 100644
index 0000000..c238023
--- /dev/null
+++ b/src/types/store.d.ts
@@ -0,0 +1,19 @@
+interface User {
+ name: string;
+ avatar: string;
+ email: string;
+}
+
+interface UserState {
+ user: User | null;
+ setUser: (user: User) => void;
+ clearUser: () => void;
+}
+
+type lang = 'zh_CN' | 'en_US'
+
+interface LangStore {
+ lang: lang;
+ changeLanguage: (lang: lang) => void
+ toggleLanguage: () => void
+}
\ No newline at end of file
diff --git a/src/types/upload.ts b/src/types/upload.ts
new file mode 100644
index 0000000..64e0400
--- /dev/null
+++ b/src/types/upload.ts
@@ -0,0 +1,34 @@
+// types/upload.ts
+export interface UploadConfig {
+ url: string;
+ method?: "POST" | "PUT";
+ headers?: Record;
+ fieldName?: string;
+ maxFileSize?: number;
+ allowedTypes?: string[];
+}
+
+export interface UploadProgress {
+ loaded: number;
+ total: number;
+ percentage: number;
+}
+
+export interface UploadResponse {
+ success: boolean;
+ data?: {
+ fileId: string;
+ fileName: string;
+ fileUrl: string;
+ duration: number;
+ size: number;
+ };
+ error?: string;
+}
+
+export interface VoiceUploadStatus {
+ status: "idle" | "uploading" | "success" | "error";
+ progress?: UploadProgress;
+ response?: UploadResponse;
+ error?: string;
+}
diff --git a/src/utils/amount.ts b/src/utils/amount.ts
new file mode 100644
index 0000000..6db3cae
--- /dev/null
+++ b/src/utils/amount.ts
@@ -0,0 +1,3 @@
+export function toYuan(num: number) {
+ return (num / 100).toFixed(2);
+}
\ No newline at end of file
diff --git a/src/utils/audioManager.ts b/src/utils/audioManager.ts
new file mode 100644
index 0000000..044ba5d
--- /dev/null
+++ b/src/utils/audioManager.ts
@@ -0,0 +1,208 @@
+// utils/audioManager.ts
+import { UniversalAudioPlayer } from "./audioPlayer";
+
+export interface AudioInstance {
+ id: string;
+ player: UniversalAudioPlayer;
+ onStop?: () => void;
+ onPlay?: () => void;
+ onPause?: () => void;
+}
+
+class AudioManager {
+ private static instance: AudioManager;
+ private currentAudio: AudioInstance | null = null;
+ private audioInstances: Map = new Map();
+
+ private constructor() {}
+
+ static getInstance(): AudioManager {
+ if (!AudioManager.instance) {
+ AudioManager.instance = new AudioManager();
+ }
+ return AudioManager.instance;
+ }
+
+ // 注册音频实例
+ registerAudio(
+ id: string,
+ player: UniversalAudioPlayer,
+ callbacks?: {
+ onStop?: () => void;
+ onPlay?: () => void;
+ onPause?: () => void;
+ }
+ ): void {
+ const audioInstance: AudioInstance = {
+ id,
+ player,
+ onStop: callbacks?.onStop,
+ onPlay: callbacks?.onPlay,
+ onPause: callbacks?.onPause,
+ };
+
+ this.audioInstances.set(id, audioInstance);
+ }
+
+ // 注销音频实例
+ unregisterAudio(id: string): void {
+ const audioInstance = this.audioInstances.get(id);
+ if (audioInstance) {
+ // 如果是当前播放的音频，先停止
+ if (this.currentAudio?.id === id) {
+ this.stopCurrent();
+ }
+
+ // 销毁播放器
+ audioInstance.player.destroy();
+ this.audioInstances.delete(id);
+ }
+ }
+
+ // 播放指定音频（会自动停止其他音频）
+ async playAudio(id: string): Promise {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ throw new Error(`音频实例 ${id} 不存在`);
+ }
+
+ // 如果当前有其他音频在播放，先停止
+ if (this.currentAudio && this.currentAudio.id !== id) {
+ this.stopCurrent();
+ }
+
+ try {
+ await audioInstance.player.play();
+ this.currentAudio = audioInstance;
+
+ // 触发播放回调
+ audioInstance.onPlay?.();
+
+ console.log(`开始播放音频: ${id}`);
+ } catch (error) {
+ console.error(`播放音频 ${id} 失败:`, error);
+ throw error;
+ }
+ }
+
+ // 暂停指定音频
+ pauseAudio(id: string): void {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ console.warn(`音频实例 ${id} 不存在`);
+ return;
+ }
+
+ audioInstance.player.pause();
+
+ // 如果是当前播放的音频，清除当前音频引用
+ if (this.currentAudio?.id === id) {
+ this.currentAudio = null;
+ }
+
+ // 触发暂停回调
+ audioInstance.onPause?.();
+
+ console.log(`暂停音频: ${id}`);
+ }
+
+ // 停止指定音频
+ stopAudio(id: string): void {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ console.warn(`音频实例 ${id} 不存在`);
+ return;
+ }
+
+ audioInstance.player.stop();
+
+ // 如果是当前播放的音频，清除当前音频引用
+ if (this.currentAudio?.id === id) {
+ this.currentAudio = null;
+ }
+
+ // 触发停止回调
+ audioInstance.onStop?.();
+
+ console.log(`停止音频: ${id}`);
+ }
+
+ // 停止当前播放的音频
+ stopCurrent(): void {
+ if (this.currentAudio) {
+ this.stopAudio(this.currentAudio.id);
+ }
+ }
+
+ // 暂停当前播放的音频
+ pauseCurrent(): void {
+ if (this.currentAudio) {
+ this.pauseAudio(this.currentAudio.id);
+ }
+ }
+
+ // 获取当前播放的音频ID
+ getCurrentAudioId(): string | null {
+ return this.currentAudio?.id || null;
+ }
+
+ // 检查指定音频是否正在播放
+ isPlaying(id: string): boolean {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ return false;
+ }
+ return audioInstance.player.getIsPlaying();
+ }
+
+ // 获取指定音频的播放时长
+ getDuration(id: string): number {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ return 0;
+ }
+ return audioInstance.player.getDuration();
+ }
+
+ // 获取指定音频的当前播放时间
+ getCurrentTime(id: string): number {
+ const audioInstance = this.audioInstances.get(id);
+ if (!audioInstance) {
+ return 0;
+ }
+ return audioInstance.player.getCurrentTime();
+ }
+
+ // 清理所有音频实例
+ cleanup(): void {
+ this.audioInstances.forEach((audioInstance) => {
+ audioInstance.player.destroy();
+ });
+ this.audioInstances.clear();
+ this.currentAudio = null;
+ }
+
+ // 获取所有音频实例的状态
+ getAudioStates(): Record<
+ string,
+ {
+ isPlaying: boolean;
+ duration: number;
+ currentTime: number;
+ }
+ > {
+ const states: Record = {};
+
+ this.audioInstances.forEach((audioInstance, id) => {
+ states[id] = {
+ isPlaying: audioInstance.player.getIsPlaying(),
+ duration: audioInstance.player.getDuration(),
+ currentTime: audioInstance.player.getCurrentTime(),
+ };
+ });
+
+ return states;
+ }
+}
+
+export default AudioManager;
diff --git a/src/utils/audioPlayer.ts b/src/utils/audioPlayer.ts
new file mode 100644
index 0000000..e6c3315
--- /dev/null
+++ b/src/utils/audioPlayer.ts
@@ -0,0 +1,246 @@
+// utils/audioPlayer.ts
+export class UniversalAudioPlayer {
+ private audio: HTMLAudioElement | null = null;
+ private audioContext: AudioContext | null = null;
+ private source: AudioBufferSourceNode | null = null;
+ private audioBuffer: AudioBuffer | null = null;
+ private isPlaying: boolean = false;
+ private startTime: number = 0;
+ private pauseTime: number = 0;
+
+ constructor() {
+ this.initAudioContext();
+ }
+
+ private async initAudioContext(): Promise {
+ try {
+ if (this.isAndroid()) {
+ this.audioContext = new (window.AudioContext ||
+ (window as any).webkitAudioContext)();
+
+ // 安卓需要用户交互来启动AudioContext
+ if (this.audioContext.state === "suspended") {
+ // 等待用户交互后再启动
+ document.addEventListener(
+ "touchstart",
+ this.resumeAudioContext.bind(this),
+ { once: true }
+ );
+ document.addEventListener(
+ "click",
+ this.resumeAudioContext.bind(this),
+ { once: true }
+ );
+ }
+ }
+ } catch (error) {
+ console.warn("AudioContext初始化失败:", error);
+ }
+ }
+
+ private async resumeAudioContext(): Promise {
+ if (this.audioContext && this.audioContext.state === "suspended") {
+ try {
+ await this.audioContext.resume();
+ console.log("AudioContext已启动");
+ } catch (error) {
+ console.error("AudioContext启动失败:", error);
+ }
+ }
+ }
+
+ private isAndroid(): boolean {
+ return /Android/.test(navigator.userAgent);
+ }
+
+ private isIOS(): boolean {
+ return /iPad|iPhone|iPod/.test(navigator.userAgent);
+ }
+
+ async loadAudio(audioBlob: Blob): Promise {
+ try {
+ const audioUrl = URL.createObjectURL(audioBlob);
+
+ if (this.isAndroid() && this.audioContext) {
+ // 安卓使用AudioContext播放
+ await this.loadWithAudioContext(audioBlob);
+ } else {
+ // iOS和桌面使用HTMLAudioElement
+ await this.loadWithAudioElement(audioUrl);
+ }
+ } catch (error) {
+ console.error("音频加载失败:", error);
+ throw error;
+ }
+ }
+
+ private async loadWithAudioContext(audioBlob: Blob): Promise {
+ if (!this.audioContext) {
+ throw new Error("AudioContext未初始化");
+ }
+
+ try {
+ const arrayBuffer = await audioBlob.arrayBuffer();
+ this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+ console.log("AudioContext音频加载成功");
+ } catch (error) {
+ console.error("AudioContext音频解码失败:", error);
+ // 降级到HTMLAudioElement
+ const audioUrl = URL.createObjectURL(audioBlob);
+ await this.loadWithAudioElement(audioUrl);
+ }
+ }
+
+ private async loadWithAudioElement(audioUrl: string): Promise {
+ return new Promise((resolve, reject) => {
+ this.audio = new Audio(audioUrl);
+
+ // 安卓需要设置这些属性
+ this.audio.preload = "auto";
+ this.audio.controls = false;
+
+ this.audio.addEventListener(
+ "canplaythrough",
+ () => {
+ console.log("HTMLAudioElement音频加载成功");
+ resolve();
+ },
+ { once: true }
+ );
+
+ this.audio.addEventListener(
+ "error",
+ (e) => {
+ console.error("HTMLAudioElement音频加载失败:", e);
+ reject(new Error("音频加载失败"));
+ },
+ { once: true }
+ );
+
+ // 安卓需要手动触发加载
+ this.audio.load();
+ });
+ }
+
+ async play(): Promise {
+ try {
+ if (this.audioBuffer && this.audioContext) {
+ // 使用AudioContext播放
+ await this.playWithAudioContext();
+ } else if (this.audio) {
+ // 使用HTMLAudioElement播放
+ await this.playWithAudioElement();
+ } else {
+ throw new Error("音频未加载");
+ }
+ this.isPlaying = true;
+ } catch (error) {
+ console.error("音频播放失败:", error);
+ throw error;
+ }
+ }
+
+ private async playWithAudioContext(): Promise {
+ if (!this.audioContext || !this.audioBuffer) {
+ throw new Error("AudioContext或AudioBuffer未准备好");
+ }
+
+ // 确保AudioContext已启动
+ if (this.audioContext.state === "suspended") {
+ await this.audioContext.resume();
+ }
+
+ this.source = this.audioContext.createBufferSource();
+ this.source.buffer = this.audioBuffer;
+ this.source.connect(this.audioContext.destination);
+
+ this.source.onended = () => {
+ this.isPlaying = false;
+ };
+
+ this.startTime = this.audioContext.currentTime;
+ this.source.start(0);
+ }
+
+ private async playWithAudioElement(): Promise {
+ if (!this.audio) {
+ throw new Error("Audio元素未准备好");
+ }
+
+ // 安卓需要重置音频位置
+ this.audio.currentTime = 0;
+
+ try {
+ await this.audio.play();
+ } catch (error) {
+ // 如果自动播放失败，可能需要用户交互
+ console.warn("自动播放失败，需要用户交互:", error);
+ throw new Error("播放失败，请点击播放按钮");
+ }
+ }
+
+ pause(): void {
+ if (this.source) {
+ this.source.stop();
+ this.source = null;
+ }
+
+ if (this.audio) {
+ this.audio.pause();
+ }
+
+ this.isPlaying = false;
+ }
+
+ stop(): void {
+ this.pause();
+
+ if (this.audio) {
+ this.audio.currentTime = 0;
+ }
+ }
+
+ getIsPlaying(): boolean {
+ return this.isPlaying;
+ }
+
+ getDuration(): number {
+ if (this.audioBuffer) {
+ return this.audioBuffer.duration;
+ }
+
+ if (this.audio) {
+ return this.audio.duration || 0;
+ }
+
+ return 0;
+ }
+
+ getCurrentTime(): number {
+ if (this.audioContext && this.startTime > 0) {
+ return this.audioContext.currentTime - this.startTime;
+ }
+
+ if (this.audio) {
+ return this.audio.currentTime;
+ }
+
+ return 0;
+ }
+
+ destroy(): void {
+ this.stop();
+
+ if (this.audio) {
+ this.audio.src = "";
+ this.audio = null;
+ }
+
+ if (this.audioContext && this.audioContext.state !== "closed") {
+ this.audioContext.close().catch(console.error);
+ this.audioContext = null;
+ }
+
+ this.audioBuffer = null;
+ }
+}
diff --git a/src/utils/audioRecorder.ts b/src/utils/audioRecorder.ts
new file mode 100644
index 0000000..25d2027
--- /dev/null
+++ b/src/utils/audioRecorder.ts
@@ -0,0 +1,362 @@
+// utils/audioRecorder.ts
+export interface AudioRecorderConfig {
+ sampleRate?: number;
+ channels?: number;
+ bitDepth?: number;
+}
+
+export class UniversalAudioRecorder {
+ private mediaRecorder: MediaRecorder | null = null;
+ private audioChunks: BlobPart[] = [];
+ private stream: MediaStream | null = null;
+ private startTime: number = 0;
+ private pausedDuration: number = 0;
+ private pauseStartTime: number = 0;
+ private audioContext: AudioContext | null = null;
+
+ constructor(private config: AudioRecorderConfig = {}) {
+ this.config = {
+ sampleRate: 44100,
+ channels: 1,
+ bitDepth: 16,
+ ...config,
+ };
+ }
+
+ // 设备检测
+ private isIOS(): boolean {
+ return /iPad|iPhone|iPod/.test(navigator.userAgent);
+ }
+
+ private isAndroid(): boolean {
+ return /Android/.test(navigator.userAgent);
+ }
+
+ private isSafari(): boolean {
+ return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+ }
+
+ private isChrome(): boolean {
+ return (
+ /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)
+ );
+ }
+
+ // 获取设备支持的最佳MIME类型
+ private getSupportedMimeType(): string {
+ const isIOSDevice = this.isIOS();
+ const isAndroidDevice = this.isAndroid();
+ const isSafariBrowser = this.isSafari();
+ const isChromeBrowser = this.isChrome();
+
+ let mimeTypes: string[] = [];
+
+ if (isAndroidDevice) {
+ // 安卓设备优先使用这些格式
+ mimeTypes = [
+ "audio/webm;codecs=opus",
+ "audio/webm",
+ "audio/mp4;codecs=aac",
+ "audio/mp4",
+ "audio/aac",
+ "audio/ogg;codecs=opus",
+ "audio/wav",
+ ];
+ } else if (isIOSDevice || isSafariBrowser) {
+ // iOS和Safari优先使用这些格式
+ mimeTypes = [
+ "audio/mp4;codecs=aac",
+ "audio/mp4",
+ "audio/aac",
+ "audio/wav",
+ "audio/webm;codecs=opus",
+ "audio/webm",
+ ];
+ } else {
+ // 其他浏览器（主要是桌面Chrome/Firefox）
+ mimeTypes = [
+ "audio/webm;codecs=opus",
+ "audio/webm",
+ "audio/mp4;codecs=aac",
+ "audio/mp4",
+ "audio/ogg;codecs=opus",
+ "audio/wav",
+ ];
+ }
+
+ for (const mimeType of mimeTypes) {
+ if (MediaRecorder.isTypeSupported(mimeType)) {
+ console.log(
+ `选择的音频格式: ${mimeType} (设备: ${this.getDeviceInfo()})`
+ );
+ return mimeType;
+ }
+ }
+
+ console.warn("没有找到明确支持的音频格式，使用浏览器默认格式");
+ return "";
+ }
+
+ private getDeviceInfo(): string {
+ if (this.isAndroid()) return "Android";
+ if (this.isIOS()) return "iOS";
+ return "Desktop";
+ }
+
+ // 初始化AudioContext（安卓设备需要）
+ private async initAudioContext(): Promise {
+ try {
+ // 安卓设备需要AudioContext来确保音频正常工作
+ if (this.isAndroid() && !this.audioContext) {
+ this.audioContext = new (window.AudioContext ||
+ (window as any).webkitAudioContext)();
+
+ // 安卓需要用户交互来启动AudioContext
+ if (this.audioContext.state === "suspended") {
+ await this.audioContext.resume();
+ }
+ }
+ } catch (error) {
+ console.warn("AudioContext初始化失败:", error);
+ }
+ }
+
+ async start(): Promise {
+ try {
+ // 初始化AudioContext
+ await this.initAudioContext();
+
+ // 获取音频约束
+ const audioConstraints = this.getAudioConstraints();
+
+ this.stream = await navigator.mediaDevices.getUserMedia(audioConstraints);
+
+ // 安卓设备需要特殊处理
+ if (this.isAndroid() && this.audioContext && this.stream) {
+ // 创建音频源节点以确保音频流正常
+ const source = this.audioContext.createMediaStreamSource(this.stream);
+ const analyser = this.audioContext.createAnalyser();
+ source.connect(analyser);
+ }
+
+ const selectedMimeType = this.getSupportedMimeType();
+
+ // 创建MediaRecorder
+ const mediaRecorderOptions: MediaRecorderOptions = {};
+ if (selectedMimeType) {
+ mediaRecorderOptions.mimeType = selectedMimeType;
+ }
+
+ // 安卓使用较大的时间片，iOS使用中等时间片
+ const timeslice = this.isAndroid() ? 1000 : this.isIOS() ? 1000 : 100;
+
+ this.mediaRecorder = new MediaRecorder(this.stream, mediaRecorderOptions);
+
+ this.audioChunks = [];
+ this.startTime = Date.now();
+ this.pausedDuration = 0;
+
+ this.mediaRecorder.ondataavailable = (event) => {
+ if (event.data.size > 0) {
+ this.audioChunks.push(event.data);
+ console.log(`收到音频数据: ${event.data.size} bytes`);
+ }
+ };
+
+ this.mediaRecorder.onerror = (event) => {
+ console.error("MediaRecorder错误:", event);
+ };
+
+ this.mediaRecorder.onstart = () => {
+ console.log("录音开始");
+ };
+
+ this.mediaRecorder.onstop = () => {
+ console.log("录音停止");
+ };
+
+ this.mediaRecorder.start(timeslice);
+ console.log("录音器启动成功:", {
+ mimeType: this.mediaRecorder.mimeType,
+ state: this.mediaRecorder.state,
+ device: this.getDeviceInfo(),
+ });
+ } catch (error) {
+ this.cleanup();
+ console.error("录音启动失败:", error);
+ throw new Error(`录音启动失败: ${error}`);
+ }
+ }
+
+ private getAudioConstraints(): MediaStreamConstraints {
+ const isAndroidDevice = this.isAndroid();
+ const isIOSDevice = this.isIOS();
+
+ if (isAndroidDevice) {
+ // 安卓设备使用更宽松的约束
+ return {
+ audio: {
+ echoCancellation: true,
+ noiseSuppression: true,
+ autoGainControl: true,
+ // 安卓不强制指定采样率和声道数
+ },
+ };
+ } else if (isIOSDevice) {
+ // iOS设备约束
+ return {
+ audio: {
+ echoCancellation: true,
+ noiseSuppression: true,
+ autoGainControl: true,
+ },
+ };
+ } else {
+ // 桌面设备可以使用更详细的约束
+ return {
+ audio: {
+ sampleRate: this.config.sampleRate,
+ channelCount: this.config.channels,
+ echoCancellation: true,
+ noiseSuppression: true,
+ autoGainControl: true,
+ },
+ };
+ }
+ }
+
+ stop(): Promise {
+ return new Promise((resolve, reject) => {
+ if (!this.mediaRecorder) {
+ reject(new Error("录音器未初始化"));
+ return;
+ }
+
+ const timeout = setTimeout(() => {
+ reject(new Error("录音停止超时"));
+ }, 10000); // 增加超时时间
+
+ this.mediaRecorder.onstop = () => {
+ clearTimeout(timeout);
+ try {
+ console.log(`收集到 ${this.audioChunks.length} 个音频片段`);
+
+ if (this.audioChunks.length === 0) {
+ reject(new Error("没有录制到音频数据"));
+ return;
+ }
+
+ const mimeType = this.mediaRecorder?.mimeType || "audio/webm";
+ const audioBlob = new Blob(this.audioChunks, { type: mimeType });
+
+ console.log("录音完成:", {
+ size: audioBlob.size,
+ type: audioBlob.type,
+ duration: this.getDuration(),
+ chunks: this.audioChunks.length,
+ });
+
+ // 验证blob是否有效
+ if (audioBlob.size === 0) {
+ reject(new Error("录制的音频文件为空"));
+ return;
+ }
+
+ this.cleanup();
+ resolve(audioBlob);
+ } catch (error) {
+ this.cleanup();
+ reject(error);
+ }
+ };
+
+ this.mediaRecorder.onerror = (event) => {
+ clearTimeout(timeout);
+ this.cleanup();
+ reject(new Error("录音停止时发生错误"));
+ };
+
+ try {
+ if (
+ this.mediaRecorder.state === "recording" ||
+ this.mediaRecorder.state === "paused"
+ ) {
+ this.mediaRecorder.stop();
+ } else {
+ clearTimeout(timeout);
+ reject(new Error("录音器状态异常"));
+ }
+ } catch (error) {
+ clearTimeout(timeout);
+ this.cleanup();
+ reject(error);
+ }
+ });
+ }
+
+ pause(): void {
+ if (this.mediaRecorder && this.mediaRecorder.state === "recording") {
+ this.pauseStartTime = Date.now();
+ this.mediaRecorder.pause();
+ }
+ }
+
+ resume(): void {
+ if (this.mediaRecorder && this.mediaRecorder.state === "paused") {
+ this.pausedDuration += Date.now() - this.pauseStartTime;
+ this.mediaRecorder.resume();
+ }
+ }
+
+ cancel(): void {
+ try {
+ if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
+ this.mediaRecorder.stop();
+ }
+ } catch (error) {
+ console.error("取消录音时出错:", error);
+ }
+ this.cleanup();
+ }
+
+ getDuration(): number {
+ const currentTime = Date.now();
+ const totalTime = currentTime - this.startTime - this.pausedDuration;
+ return Math.max(0, Math.floor(totalTime / 1000));
+ }
+
+ getState(): string {
+ return this.mediaRecorder?.state || "inactive";
+ }
+
+ // 获取支持的音频格式信息
+ static getSupportedFormats(): string[] {
+ const formats = [
+ "audio/webm;codecs=opus",
+ "audio/webm",
+ "audio/mp4;codecs=aac",
+ "audio/mp4",
+ "audio/aac",
+ "audio/wav",
+ "audio/ogg;codecs=opus",
+ "audio/ogg",
+ ];
+
+ return formats.filter((format) => MediaRecorder.isTypeSupported(format));
+ }
+
+ private cleanup(): void {
+ if (this.stream) {
+ this.stream.getTracks().forEach((track) => track.stop());
+ this.stream = null;
+ }
+
+ if (this.audioContext && this.audioContext.state !== "closed") {
+ this.audioContext.close().catch(console.error);
+ this.audioContext = null;
+ }
+
+ this.mediaRecorder = null;
+ this.audioChunks = [];
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..5a21bf8
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './amount';
+export * from './location';
\ No newline at end of file
diff --git a/src/utils/js-audio-recorder.d.ts b/src/utils/js-audio-recorder.d.ts
new file mode 100644
index 0000000..a8b6c3c
--- /dev/null
+++ b/src/utils/js-audio-recorder.d.ts
@@ -0,0 +1,22 @@
+declare module "js-audio-recorder" {
+ export interface RecorderOptions {
+ sampleBits?: number;
+ sampleRate?: number;
+ numChannels?: number;
+ compiling?: boolean;
+ }
+
+ export default class Recorder {
+ constructor(options?: RecorderOptions);
+ start(): Promise;
+ pause(): void;
+ resume(): void;
+ stop(): void;
+ getBlob(): Blob;
+ getWAVBlob(): Blob;
+ destroy(): void;
+ duration: number;
+ fileSize: number;
+ isrecording: boolean;
+ }
+}
diff --git a/src/utils/location.ts b/src/utils/location.ts
new file mode 100644
index 0000000..5a997c7
--- /dev/null
+++ b/src/utils/location.ts
@@ -0,0 +1,3 @@
+export function toKm(m: number): number {
+ return m / 1000;
+}
\ No newline at end of file
diff --git a/src/utils/voice.ts b/src/utils/voice.ts
new file mode 100644
index 0000000..f67276e
--- /dev/null
+++ b/src/utils/voice.ts
@@ -0,0 +1,186 @@
+// export interface VoiceMessage {
+// id: string;
+// audioUrl: string;
+// audioBlob: Blob;
+// duration: number;
+// isPlaying: boolean;
+// timestamp: number;
+// type: "sent" | "received";
+// }
+
+// export interface WeChatVoiceRecorderProps {
+// onSendVoice?: (voiceData: VoiceMessage) => void;
+// maxDuration?: number;
+// className?: string;
+// }
+
+// export interface RecordingState {
+// isRecording: boolean;
+// isPaused: boolean;
+// duration: number;
+// hasPermission: boolean;
+// }
+export const mockTranslateAudio = async (): Promise => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ const mockTranslations = [
+ "汪汪汪！我饿了，想吃东西！🍖",
+ "喵喵～我想要抱抱！🤗",
+ "我想出去玩耍！🎾",
+ "我很开心！😊",
+ "我有点害怕...😰",
+ "我想睡觉了～😴",
+ "主人，陪我玩一会儿吧！🎮",
+ "我想喝水了💧",
+ "外面有什么声音？👂",
+ "我爱你，主人！❤️",
+ ];
+ const randomTranslation =
+ mockTranslations[Math.floor(Math.random() * mockTranslations.length)];
+ resolve(randomTranslation);
+ }, 2000 + Math.random() * 2000);
+ });
+};
+// 创建发送音效 - 清脆的"叮"声
+export const createSendSound = () => {
+ try {
+ const audioContext = new (window.AudioContext ||
+ (window as any).webkitAudioContext)();
+ const oscillator = audioContext.createOscillator();
+ const gainNode = audioContext.createGain();
+
+ oscillator.connect(gainNode);
+ gainNode.connect(audioContext.destination);
+
+ // 设置音调 - 清脆的高音
+ oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+ oscillator.frequency.exponentialRampToValueAtTime(
+ 1200,
+ audioContext.currentTime + 0.1
+ );
+
+ // 设置音量包络
+ gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+ gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.01);
+ gainNode.gain.exponentialRampToValueAtTime(
+ 0.01,
+ audioContext.currentTime + 0.3
+ );
+
+ oscillator.type = "sine";
+
+ // 创建音频元素
+ const audio = new Audio();
+
+ // 重写play方法来播放合成音效
+ audio.play = () => {
+ return new Promise((resolve) => {
+ try {
+ const newOscillator = audioContext.createOscillator();
+ const newGainNode = audioContext.createGain();
+
+ newOscillator.connect(newGainNode);
+ newGainNode.connect(audioContext.destination);
+
+ newOscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+ newOscillator.frequency.exponentialRampToValueAtTime(
+ 1200,
+ audioContext.currentTime + 0.1
+ );
+
+ newGainNode.gain.setValueAtTime(0, audioContext.currentTime);
+ newGainNode.gain.linearRampToValueAtTime(
+ 0.3,
+ audioContext.currentTime + 0.01
+ );
+ newGainNode.gain.exponentialRampToValueAtTime(
+ 0.01,
+ audioContext.currentTime + 0.3
+ );
+
+ newOscillator.type = "sine";
+ newOscillator.start(audioContext.currentTime);
+ newOscillator.stop(audioContext.currentTime + 0.3);
+
+ setTimeout(() => resolve(undefined), 300);
+ } catch (error) {
+ console.error("播放发送音效失败:", error);
+ resolve(undefined);
+ }
+ });
+ };
+
+ return audio;
+ } catch (error) {
+ console.error("创建发送音效失败:", error);
+ return new Audio(); // 返回空音频对象
+ }
+};
+export const createStartRecordSound = () => {
+ try {
+ const audio = new Audio();
+
+ audio.play = () => {
+ return new Promise((resolve) => {
+ try {
+ const audioContext = new (window.AudioContext ||
+ (window as any).webkitAudioContext)();
+ const oscillator = audioContext.createOscillator();
+ const gainNode = audioContext.createGain();
+
+ oscillator.connect(gainNode);
+ gainNode.connect(audioContext.destination);
+
+ // 设置音调 - 低沉的音
+ oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
+
+ // 设置音量包络
+ gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+ gainNode.gain.linearRampToValueAtTime(
+ 0.2,
+ audioContext.currentTime + 0.05
+ );
+ gainNode.gain.linearRampToValueAtTime(
+ 0,
+ audioContext.currentTime + 0.2
+ );
+
+ oscillator.type = "sine";
+ oscillator.start(audioContext.currentTime);
+ oscillator.stop(audioContext.currentTime + 0.2);
+
+ setTimeout(() => resolve(undefined), 200);
+ } catch (error) {
+ console.error("播放录音音效失败:", error);
+ resolve(undefined);
+ }
+ });
+ };
+
+ return audio;
+ } catch (error) {
+ console.error("创建录音音效失败:", error);
+ return new Audio();
+ }
+};
+
+export const getAudioDuration = async (audioBlob: Blob): Promise => {
+ return new Promise((resolve, reject) => {
+ const AudioContextClass =
+ window.AudioContext || (window as any).webkitAudioContext;
+ const audioContext = new AudioContextClass();
+
+ const fileReader = new FileReader();
+ fileReader.onload = async (e) => {
+ try {
+ const arrayBuffer = e.target?.result as ArrayBuffer;
+ const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+ const duration = audioBuffer.duration;
+ resolve(duration);
+ } catch (error) {
+ reject(error);
+ }
+ };
+ fileReader.readAsArrayBuffer(audioBlob);
+ });
+};
diff --git a/src/view/app/App.css b/src/view/app/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/view/app/App.tsx b/src/view/app/App.tsx
new file mode 100644
index 0000000..58c3075
--- /dev/null
+++ b/src/view/app/App.tsx
@@ -0,0 +1,24 @@
+import "./App.css";
+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 (
+ <>
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/view/archives/index.less b/src/view/archives/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/view/archives/index.tsx b/src/view/archives/index.tsx
new file mode 100644
index 0000000..bbfd98e
--- /dev/null
+++ b/src/view/archives/index.tsx
@@ -0,0 +1,14 @@
+// 档案
+import MainLayout from "@/layout/main/mainLayout";
+import { Button, Tabs } from "antd-mobile";
+import "./index.less";
+
+function Index() {
+ return (
+
+
+
+ );
+}
+
+export default Index;
diff --git a/src/view/error/page404.tsx b/src/view/error/page404.tsx
new file mode 100644
index 0000000..c9032f8
--- /dev/null
+++ b/src/view/error/page404.tsx
@@ -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 (
+
+
+
+ );
+}
+
+export default Index;
diff --git a/src/view/home/component/index.less b/src/view/home/component/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/view/home/component/message/index.less b/src/view/home/component/message/index.less
new file mode 100644
index 0000000..3d6e700
--- /dev/null
+++ b/src/view/home/component/message/index.less
@@ -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;
+ }
+}
diff --git a/src/view/home/component/message/index.tsx b/src/view/home/component/message/index.tsx
new file mode 100644
index 0000000..aae218e
--- /dev/null
+++ b/src/view/home/component/message/index.tsx
@@ -0,0 +1,176 @@
+import { Divider, Image, SpinLoading, Toast } from "antd-mobile";
+import VoiceIcon from "@/component/voiceIcon";
+import { Message } from "../../types";
+import dogSvg from "@/assets/translate/dog.svg";
+import catSvg from "@/assets/translate/cat.svg";
+import pigSvg from "@/assets/translate/pig.svg";
+import "./index.less";
+import { useEffect, useRef, useState } from "react";
+
+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();
+
+ 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") {
+ ("全部宠物");
+ const animenuRef = useRef(null);
+ const handleAniSelect = (val: RadioValue) => {
+ setAniName(allAni[val as number]);
+ animenuRef.current?.close();
+ };
+
+ return (
+ (false); //是否有权限
+ const [isPermissioning, setIsPermissioning] = useState(true); //获取权限中
+ const [recordingDuration, setRecordingDuration] = useState(0); //录音时长进度
+ const [isModal, setIsModal] = useState(false);
+ const recordingTimerRef = useRef();
+ const isCancelledRef = useRef(false);
+ const recordingStartTimeRef = useRef(0); //录音时长
+ // 音效相关
+ const sendSoundRef = useRef(null);
+ const startRecordSoundRef = useRef(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 (
+ <>
+ ) => {
+ 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 (
+ <>
+
+
+ );
+}
+
+export default Index;
diff --git a/src/view/home/translate.tsx b/src/view/home/translate.tsx
new file mode 100644
index 0000000..77a928e
--- /dev/null
+++ b/src/view/home/translate.tsx
@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import FloatingMenu, { FloatMenuItemConfig } from "@/component/floatingMenu";
+import { Image, Toast } from "antd-mobile";
+import MessageCom from "./component/message";
+import VoiceRecord from "./component/voice";
+import XPopup from "@/component/xpopup";
+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: (null); //当前播放id
+ const [messages, setMessages] = useState([]);
+ const [isRecording, setIsRecording] = useState(false); //是否录音中
+ const [currentLanguage, setCurrentLanguage] = useState();
+ const [visible, setVisible] = useState(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 (
+ qq ;
+}
+
+export default Index;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..62e4f5d
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+///
handleItemClick(item)}
+ // title={item.label}
+ >
+ {item.icon}
+
+ );
+ })}
+
+ );
+
+ return (
+ <>
+ {/* 主按钮 */}
+
+
+
+
+
+ {/* 菜单 - 只在有位置信息时渲染 */}
+ {visible &&
+ menuPosition.x > 0 &&
+ menuPosition.y > 0 &&
+ createPortal(
+ {props.value?.icon}
+
+
+ {/* {!visible &&
+
+ {/* 调试信息 */}
+ {process.env.NODE_ENV === "development" && (
+
+ );
+};
+
+export default PetVoiceTranslator;
diff --git a/src/component/petVoiceTranslator/index.less b/src/component/petVoiceTranslator/index.less
new file mode 100644
index 0000000..a9ce8d4
--- /dev/null
+++ b/src/component/petVoiceTranslator/index.less
@@ -0,0 +1,660 @@
+// PetVoiceTranslator.less
+.pet-voice-translator {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background: #ededed;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+ "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+ sans-serif;
+ position: relative;
+ overflow: hidden;
+ // 处理iOS安全区域
+ padding-bottom: env(safe-area-inset-bottom);
+
+ // Safari 特殊处理
+ -webkit-overflow-scrolling: touch;
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: transparent;
+
+ .chat-header {
+ display: flex;
+ align-items: center;
+ padding: 12px 16px;
+ background: #f7f7f7;
+ border-bottom: 1px solid #e5e5e5;
+ flex-shrink: 0;
+ position: relative;
+ z-index: 10;
+
+ // 确保头部不被NavBar遮挡
+ min-height: 64px;
+
+ .pet-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ background: linear-gradient(45deg, #ff9a9e, #fecfef);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ margin-right: 12px;
+ }
+
+ .chat-title {
+ flex: 1;
+
+ .pet-name {
+ font-size: 16px;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 2px;
+ }
+
+ .chat-subtitle {
+ font-size: 12px;
+ color: #999;
+ }
+ }
+ }
+
+ .messages-container {
+ flex: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 16px 12px;
+ position: relative;
+
+ // Safari 滚动优化
+ -webkit-overflow-scrolling: touch;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+
+ // 确保可以滚动
+ overscroll-behavior: contain;
+ scroll-behavior: smooth;
+
+ // 滚动条样式
+ &::-webkit-scrollbar {
+ width: 0;
+ background: transparent;
+ }
+
+ .empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #999;
+ min-height: 200px;
+
+ .empty-icon {
+ font-size: 64px;
+ margin-bottom: 16px;
+ opacity: 0.6;
+ }
+
+ .empty-text {
+ font-size: 16px;
+ margin-bottom: 8px;
+ }
+
+ .empty-subtitle {
+ font-size: 14px;
+ opacity: 0.8;
+ }
+ }
+
+ .message-wrapper {
+ margin-bottom: 16px;
+ animation: messageSlideIn 0.3s ease-out;
+
+ -webkit-user-select: none;
+ user-select: none;
+
+ .message-item {
+ display: flex;
+ align-items: flex-start;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 6px;
+ background: linear-gradient(45deg, #ff9a9e, #fecfef);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ margin-right: 8px;
+ flex-shrink: 0;
+ }
+
+ .message-content {
+ flex: 1;
+ max-width: calc(100% - 80px);
+
+ .voice-bubble {
+ background: #95ec69;
+ border-radius: 8px;
+ padding: 8px 12px;
+ margin-bottom: 6px;
+ position: relative;
+ display: inline-block;
+ min-width: 120px;
+ cursor: pointer;
+ user-select: none;
+
+ // 防止长按选择
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: transparent;
+
+ // 优化点击响应
+ touch-action: manipulation;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: -8px;
+ top: 12px;
+ width: 0;
+ height: 0;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-right: 8px solid #95ec69;
+ }
+
+ &:active {
+ background: #8de354;
+ transform: scale(0.98);
+ transition: all 0.1s ease;
+ }
+
+ .voice-content {
+ display: flex;
+ align-items: center;
+
+ .voice-icon {
+ margin-right: 8px;
+ font-size: 16px;
+ color: #333;
+
+ .playing-animation {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+
+ span {
+ width: 3px;
+ height: 12px;
+ background: #333;
+ border-radius: 1px;
+ animation: voiceWave 1s infinite ease-in-out;
+
+ &:nth-child(2) {
+ animation-delay: 0.1s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.2s;
+ }
+ }
+ }
+ }
+
+ .voice-duration {
+ font-size: 14px;
+ color: #333;
+ font-weight: 500;
+ }
+ }
+ }
+
+ .translation-text {
+ font-size: 13px;
+ color: #666;
+ margin-left: 4px;
+ margin-bottom: 4px;
+ line-height: 1.4;
+ word-wrap: break-word;
+ word-break: break-word;
+
+ &.translating {
+ .translating-content {
+ display: flex;
+ align-items: center;
+
+ .loading-dots {
+ margin-right: 8px;
+
+ &::after {
+ content: "...";
+ animation: loadingDots 1.5s infinite;
+ }
+ }
+
+ .typing-indicator {
+ display: flex;
+ gap: 3px;
+
+ span {
+ width: 4px;
+ height: 4px;
+ background: #999;
+ border-radius: 50%;
+ animation: typingBounce 1.4s infinite ease-in-out;
+
+ &:nth-child(1) {
+ animation-delay: 0s;
+ }
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ }
+ }
+ }
+ }
+
+ .translation-label {
+ font-size: 11px;
+ color: #999;
+ margin-bottom: 2px;
+ }
+
+ .translation-content {
+ color: #333;
+ word-wrap: break-word;
+ word-break: break-word;
+ }
+ }
+
+ .message-time {
+ font-size: 11px;
+ color: #999;
+ margin-left: 4px;
+ }
+ }
+ }
+ }
+ }
+
+ .recording-controls {
+ background: #f7f7f7;
+ border-top: 1px solid #e5e5e5;
+ padding: 12px 16px 20px;
+ flex-shrink: 0;
+ position: relative;
+ z-index: 10;
+
+ // 确保控制区域不被底部安全区域影响
+ min-height: 100px;
+
+ // 防止在Safari中被下拉刷新影响
+ -webkit-user-select: none;
+ user-select: none;
+
+ .recorder-wrapper {
+ display: none;
+ }
+
+ .control-area {
+ .recording-info {
+ text-align: center;
+ margin-bottom: 12px;
+
+ .recording-indicator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ff4d4f;
+ font-size: 14px;
+ margin-bottom: 4px;
+
+ .recording-dot {
+ width: 8px;
+ height: 8px;
+ background: #ff4d4f;
+ border-radius: 50%;
+ margin-right: 8px;
+ animation: recordingPulse 1s infinite;
+ }
+ }
+
+ .recording-tip {
+ font-size: 12px;
+ color: #999;
+ }
+ }
+
+ .input-area {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .button-group {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 8px;
+
+ .cancel-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ border: none;
+ background: #ff4d4f;
+ color: white;
+ cursor: pointer;
+ transition: all 0.1s ease;
+ outline: none;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-appearance: none;
+ -webkit-user-select: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation: slideInLeft 0.3s ease-out;
+
+ // 优化点击响应
+ touch-action: manipulation;
+
+ &:active {
+ transform: scale(0.9);
+ background: #ff7875;
+ }
+
+ .cancel-icon {
+ font-size: 18px;
+ }
+ }
+
+ .record-button {
+ width: 60px;
+ height: 60px;
+ border-radius: 30px;
+ border: none;
+ background: #1890ff;
+ color: white;
+ cursor: pointer;
+ transition: all 0.1s ease;
+ outline: none;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-appearance: none;
+ -webkit-user-select: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ // 优化点击响应
+ touch-action: manipulation;
+
+ &:active {
+ transform: scale(0.9);
+ }
+
+ &:disabled {
+ background: #d9d9d9;
+ color: #999;
+ cursor: not-allowed;
+ }
+
+ &.processing {
+ background: #faad14;
+
+ cursor: wait;
+
+ .processing-animation {
+ display: flex;
+
+ align-items: center;
+
+ gap: 3 px;
+
+ span {
+ width: 3 px;
+
+ height: 16 px;
+
+ background: white;
+
+ border-radius: 1 px;
+
+ animation: processingWave 1.5 s infinite ease - in - out;
+
+ &:nth-child(2) {
+ animation-delay: 0.2 s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.4 s;
+ }
+ }
+ }
+ }
+
+ &.recording {
+ background: #ff4d4f;
+ animation: recordingButtonPulse 1s infinite;
+
+ .recording-animation {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+
+ span {
+ width: 3px;
+ height: 16px;
+ background: white;
+ border-radius: 1px;
+ animation: recordingWave 1s infinite ease-in-out;
+
+ &:nth-child(2) {
+ animation-delay: 0.1s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.2s;
+ }
+ }
+ }
+ }
+
+ .mic-icon {
+ font-size: 24px;
+ }
+ }
+ }
+
+ .record-hint {
+ font-size: 12px;
+ color: #999;
+ }
+ }
+ }
+ }
+}
+
+// 全局样式，确保页面不会滚动
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden;
+ -webkit-overflow-scrolling: touch;
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: transparent;
+
+ // 防止iOS Safari的橡皮筋效果
+ position: fixed;
+ width: 100%;
+}
+
+// 动画定义
+@keyframes messageSlideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes voiceWave {
+ 0%,
+ 40%,
+ 100% {
+ transform: scaleY(0.4);
+ }
+ 20% {
+ transform: scaleY(1);
+ }
+}
+
+@keyframes loadingDots {
+ 0%,
+ 20% {
+ content: ".";
+ }
+ 40% {
+ content: "..";
+ }
+ 60%,
+ 100% {
+ content: "...";
+ }
+}
+
+@keyframes typingBounce {
+ 0%,
+ 60%,
+ 100% {
+ transform: translateY(0);
+ }
+ 30% {
+ transform: translateY(-6px);
+ }
+}
+
+@keyframes recordingPulse {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.5;
+ transform: scale(1.2);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes recordingButtonPulse {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
+ }
+ 70% {
+ box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
+ }
+ 100% {
+ box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
+ }
+}
+
+@keyframes recordingWave {
+ 0%,
+ 40%,
+ 100% {
+ transform: scaleY(0.4);
+ }
+ 20% {
+ transform: scaleY(1);
+ }
+}
+
+// 移动端适配
+// @media (max-width: 768px) {
+// .pet-voice-translator {
+// .messages-container {
+// padding: 12px 8px;
+
+// .message-wrapper .message-item .message-content {
+// max-width: calc(100% - 60px);
+// }
+// }
+
+// .recording-controls {
+// padding: 10px 12px 16px;
+// }
+// }
+// }
+
+// iOS Safari 特殊处理
+@supports (-webkit-touch-callout: none) {
+ .pet-voice-translator {
+ // 确保在iOS Safari中正确显示
+ // height: 100vh;
+ height: -webkit-fill-available;
+
+ .messages-container {
+ -webkit-overflow-scrolling: touch;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+ }
+}
+
+// 深色模式适配
+@media (prefers-color-scheme: dark) {
+ .pet-voice-translator {
+ background: #1e1e1e;
+
+ .chat-header {
+ background: #2a2a2a;
+ border-bottom-color: #3a3a3a;
+
+ .chat-title .pet-name {
+ color: #fff;
+ }
+ }
+
+ .messages-container {
+ .message-wrapper .message-item .message-content .translation-text {
+ color: #ccc;
+
+ .translation-content {
+ color: #fff;
+ }
+ }
+ }
+
+ .recording-controls {
+ background: #2a2a2a;
+ border-top-color: #3a3a3a;
+ }
+ }
+}
diff --git a/src/component/petVoiceTranslator/index.tsx b/src/component/petVoiceTranslator/index.tsx
new file mode 100644
index 0000000..a0a4949
--- /dev/null
+++ b/src/component/petVoiceTranslator/index.tsx
@@ -0,0 +1,1104 @@
+// // PetVoiceTranslator.tsx
+// import React, { useState, useRef, useEffect, useCallback } from "react";
+// import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
+// import { Button, Toast, Dialog } from "antd-mobile";
+// import { SoundOutline, CloseOutline } from "antd-mobile-icons";
+// import "./index.less";
+
+// interface Message {
+// id: string;
+// type: "voice";
+// audioUrl: string;
+// duration: number;
+// timestamp: number;
+// translatedText?: string;
+// isTranslating?: boolean;
+// isPlaying?: boolean;
+// }
+
+// const PetVoiceTranslator: React.FC = () => {
+// const [messages, setMessages] = useState
+
+ )}
+
+ {/* 头部 */}
+ 初始化中: {initializingRef.current ? "⏳" : "✅"}
+ 已初始化: {initializedRef.current ? "✅" : "❌"}
+ 状态初始化: {isInitialized ? "✅" : "❌"}
+
+ 权限: {hasPermission === null ? "⏳" : hasPermission ? "✅" : "❌"}
+
+ 录音: {isRecording ? "🔴" : "⚪"}
+ 处理中: {isProcessing ? "⏳" : "✅"}
+ 权限检查: {permissionChecking ? "⏳" : "✅"}
+ 弹窗: {dialogShowing ? "📱" : "❌"}
+
+
+
+ {/* 消息列表 */}
+ 🐾
+
+
+ 我的宠物
+
+ {initializingRef.current
+ ? "初始化中..."
+ : !isInitialized
+ ? "等待初始化..."
+ : permissionChecking
+ ? "检查权限中..."
+ : hasPermission === null
+ ? "权限状态未知"
+ : hasPermission
+ ? "宠物语音翻译器"
+ : "需要麦克风权限"}
+
+
+ {messages.length === 0 ? (
+
+
+ {/* 录音控制区域 */}
+
+
+ ) : (
+ messages.map((message) => (
+ 🎤
+
+ {initializingRef.current
+ ? "正在初始化..."
+ : !isInitialized
+ ? "等待初始化..."
+ : permissionChecking
+ ? "正在检查权限..."
+ : hasPermission === null
+ ? "权限状态未知"
+ : !hasPermission
+ ? "请授权麦克风权限"
+ : "点击下方按钮开始录音"}
+
+ 听听你的宠物想说什么～
+
+
+ ))
+ )}
+
+
+
+ 🐾
+
+
+
+
+
+ {message.isTranslating ? (
+ playAudio(message.id, message.audioUrl)}
+ >
+
+
+ {message.isPlaying ? (
+
+
+
+
+
+
+ ) : (
+
+ {formatDuration(message.duration)}
+
+
+
+ ) : message.translatedText ? (
+
+ 翻译中
+
+
+
+
+
+
+
+
+ ) : null}
+
+ 🐾 宠物说：
+
+ {message.translatedText}
+
+
+ {formatTime(message.timestamp)}
+
+
+
+
+
+
+
+ {isRecording && (
+
+
+
+ )}
+
+
+
+ 录音中 {formatDuration(recordingDuration)}
+
+ 再次点击完成录音并发送
+
+
+
+ {/* {isRecording && (
+
+ )} */}
+
+
+
+
+ {!isRecording && (
+
+ {initializingRef.current
+ ? "初始化中..."
+ : !isInitialized
+ ? "等待初始化..."
+ : permissionChecking
+ ? "检查权限中..."
+ : !hasPermission
+ ? "需要麦克风权限"
+ : isProcessing
+ ? "处理中..."
+ : "点击录音"}
+
+ )}
+
+// {/* 调试信息 */}
+// {process.env.NODE_ENV === "development" && (
+//
+// );
+// };
+
+// export default PetVoiceTranslator;
diff --git a/src/component/qr-scanner/index.tsx b/src/component/qr-scanner/index.tsx
new file mode 100644
index 0000000..3aebcde
--- /dev/null
+++ b/src/component/qr-scanner/index.tsx
@@ -0,0 +1,88 @@
+import React, {useRef, useEffect, useState} from 'react';
+import jsQR from 'jsqr';
+
+export interface QRScannerProps {
+ width?: number;
+ height?: number;
+ onScan: (data: string) => void;
+}
+
+/**
+ * 二维码扫描组件
+ * @param width 画布宽度
+ * @param height 画布高度
+ * @param onScan 扫描成功的回调函数
+ * @constructor QRScanner
+ */
+const QRScanner: React.FC
+//
+// )}
+
+// {/* 头部 */}
+// 初始化中: {initializingRef.current ? "⏳" : "✅"}
+// 已初始化: {initializedRef.current ? "✅" : "❌"}
+// 状态初始化: {isInitialized ? "✅" : "❌"}
+//
+// 权限: {hasPermission === null ? "⏳" : hasPermission ? "✅" : "❌"}
+//
+// 录音: {isRecording ? "🔴" : "⚪"}
+// 权限检查: {permissionChecking ? "⏳" : "✅"}
+// 弹窗: {dialogShowing ? "📱" : "❌"}
+// 已取消: {isCancelledRef.current ? "✅" : "❌"}
+// 录音时长: {recordingDuration}s
+// 震动支持: {"vibrate" in navigator ? "✅" : "❌"}
+//
+//
+
+// {/* 消息列表 */}
+// 🐾
+//
+//
+// 我的宠物
+//
+// {initializingRef.current
+// ? "初始化中..."
+// : !isInitialized
+// ? "等待初始化..."
+// : permissionChecking
+// ? "检查权限中..."
+// : hasPermission === null
+// ? "权限状态未知"
+// : hasPermission
+// ? "宠物语音翻译器"
+// : "需要麦克风权限"}
+//
+//
+// {messages.length === 0 ? (
+//
+
+// {/* 录音控制区域 */}
+//
+//
+// ) : (
+// messages.map((message) => (
+// 🎤
+//
+// {initializingRef.current
+// ? "正在初始化..."
+// : !isInitialized
+// ? "等待初始化..."
+// : permissionChecking
+// ? "正在检查权限..."
+// : hasPermission === null
+// ? "权限状态未知"
+// : !hasPermission
+// ? "请授权麦克风权限"
+// : "点击下方按钮开始录音"}
+//
+// 听听你的宠物想说什么～
+//
+//
+// ))
+// )}
+//
+//
+//
+// 🐾
+//
+//
+//
+//
+
+// {message.isTranslating ? (
+// playAudio(message.id, message.audioUrl)}
+// >
+//
+//
+// {message.isPlaying ? (
+//
+//
+//
+//
+//
+//
+// ) : (
+//
+// {formatDuration(message.duration)}
+//
+//
+//
+// ) : message.translatedText ? (
+//
+// 翻译中
+//
+//
+//
+//
+//
+//
+//
+//
+// ) : null}
+
+// 🐾 宠物说：
+//
+// {message.translatedText}
+//
+//
+// {formatTime(message.timestamp)}
+//
+//
+//
+//
+//
+
+//
+// {isRecording && (
+//
+//
+//
+// )}
+
+//
+//
+// 录音中 {formatDuration(recordingDuration)}
+//
+// 再次点击完成录音并发送
+//
+//
+//
+// {isRecording && (
+//
+// )}
+
+//
+//
+
+// {!isRecording && (
+//
+// {initializingRef.current
+// ? "初始化中..."
+// : !isInitialized
+// ? "等待初始化..."
+// : permissionChecking
+// ? "检查权限中..."
+// : !hasPermission
+// ? "需要麦克风权限"
+// : "点击录音"}
+//
+// )}
+//
+
+
+ {scanSuccess &&
+ );
+}
+
+export default QRScanner;
diff --git a/src/component/voiceIcon/index.less b/src/component/voiceIcon/index.less
new file mode 100644
index 0000000..3e40484
--- /dev/null
+++ b/src/component/voiceIcon/index.less
@@ -0,0 +1,69 @@
+/* VoiceIcon.css */
+.voice-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+ gap: 2px;
+}
+.audio-recorder {
+ display: none !important;
+}
+
+.wave {
+ width: 1px;
+ height: 13px;
+ background-color: rgba(0, 0, 0, 0.6);
+ border-radius: 2px;
+ transition: all 0.3s ease;
+}
+
+.wave1 {
+ height: 4px;
+}
+
+.wave2 {
+ height: 13px;
+}
+
+.wave3 {
+ height: 4px;
+}
+
+.wave3 {
+ height: 8px;
+}
+.wave4 {
+ height: 4px;
+}
+
+/* 播放动画 */
+.voice-icon.playing .wave {
+ animation: voice-wave 1.2s ease-in-out infinite;
+}
+
+.voice-icon.playing .wave1 {
+ animation-delay: 0s;
+}
+
+.voice-icon.playing .wave2 {
+ animation-delay: 0.2s;
+}
+
+.voice-icon.playing .wave3 {
+ animation-delay: 0.4s;
+}
+
+@keyframes voice-wave {
+ 0%,
+ 100% {
+ transform: scaleY(0.3);
+ opacity: 0.5;
+ }
+ 50% {
+ transform: scaleY(1);
+ opacity: 1;
+ }
+}
diff --git a/src/component/voiceIcon/index.tsx b/src/component/voiceIcon/index.tsx
new file mode 100644
index 0000000..09fb7a4
--- /dev/null
+++ b/src/component/voiceIcon/index.tsx
@@ -0,0 +1,22 @@
+import React, { useCallback, useState } from "react";
+import "./index.less";
+
+const VoiceIcon = (props: { isPlaying: boolean; onChange?: () => void }) => {
+ const { isPlaying = false } = props;
+ const onChange = useCallback(() => {
+ props.onChange?.();
+ }, [isPlaying]);
+ return (
+ 识别成功！
} {/* 显示识别成功的蒙层 */}
+
+
+
+
+
+
+ );
+};
+
+export default React.memo(VoiceIcon);
diff --git a/src/component/xpopup/index.less b/src/component/xpopup/index.less
new file mode 100644
index 0000000..b5b92ec
--- /dev/null
+++ b/src/component/xpopup/index.less
@@ -0,0 +1,11 @@
+.xpopup {
+ .adm-popup-body {
+ background-color: rgba(245, 245, 245, 1);
+ padding: 16px;
+ .header {
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+}
diff --git a/src/component/xpopup/index.tsx b/src/component/xpopup/index.tsx
new file mode 100644
index 0000000..723cc11
--- /dev/null
+++ b/src/component/xpopup/index.tsx
@@ -0,0 +1,28 @@
+import { Divider, Popup } from "antd-mobile";
+import { CloseOutline } from "antd-mobile-icons";
+import "./index.less";
+
+interface DefinedProps {
+ visible: boolean;
+ title: string;
+ children: React.ReactNode;
+ onClose: () => void;
+}
+function XPopup(props: DefinedProps) {
+ const { visible, title, children, onClose } = props;
+
+ return (
+
+
+ {title}
+ +{children}
+
+ {title} : ""}
+
+ );
+};
+
+export default MainLayout;
diff --git a/src/locales/en_US.json b/src/locales/en_US.json
new file mode 100644
index 0000000..373a607
--- /dev/null
+++ b/src/locales/en_US.json
@@ -0,0 +1,3 @@
+{
+ "index.title": "Hello World!"
+}
diff --git a/src/locales/zh_CN.json b/src/locales/zh_CN.json
new file mode 100644
index 0000000..fb48ba5
--- /dev/null
+++ b/src/locales/zh_CN.json
@@ -0,0 +1,3 @@
+{
+ "index.title": "你好，世界！"
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..638931a
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "@/view/app/App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+ // {children}
+
+
+ {/* setRouteActive(value)}
+ safeArea={true}
+ >
+ {tabs.map((item) => (
+ */}
+
+
+ {data.map((item, index) => (
+
+ );
+}
+
+export default Index;
diff --git a/src/view/home/component/search/index.less b/src/view/home/component/search/index.less
new file mode 100644
index 0000000..7289ace
--- /dev/null
+++ b/src/view/home/component/search/index.less
@@ -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;
+ }
+}
diff --git a/src/view/home/component/search/index.tsx b/src/view/home/component/search/index.tsx
new file mode 100644
index 0000000..d371724
--- /dev/null
+++ b/src/view/home/component/search/index.tsx
@@ -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 playAudio(item.id, item.audioUrl)}
+ >
+ {renderAvatar(item.type)}
+
+ ))}
+
+
+
+
+ {item.name}
+
+
+
+ {item.isTranslating ? (
+ {item.duration}''
+
+
+ ) : (
+ {item.translatedText}
+ )}
+
+
+
+
+
+
+ 生无可恋喵
+
+
+
+
+ {isRecording ? "录制中..." : "轻点麦克风录制"}
+
+
+
+
+
+
+ {/* setVisible(false)}
+ /> */}
+ {/* {
+ setVisible(false);
+ }}
+ >
+ */}
+
+ );
+}
+
+export default Index;
diff --git a/src/view/home/component/voice/index.less b/src/view/home/component/voice/index.less
new file mode 100644
index 0000000..2cfcb68
--- /dev/null
+++ b/src/view/home/component/voice/index.less
@@ -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);
+ }
+ }
+}
diff --git a/src/view/home/component/voice/index.tsx b/src/view/home/component/voice/index.tsx
new file mode 100644
index 0000000..196ec00
--- /dev/null
+++ b/src/view/home/component/voice/index.tsx
@@ -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
+
+
+
+ 全部宠物
+
+
+ 丑丑
+
+
+ 胖胖
+
+
+ 可可
+
+
+
+
+
+ 全部宠物
+
+
+ 宠物
+
+ 11111
+ 获取麦克风权限中...
+ ) : (
+ 麦克风没有开启权限
+ )}
+
+ );
+ }
+ if (isRecording) {
+ //正在录音中
+ return (
+
+
+
+
+
+ );
+ } else {
+ //麦克风状态
+ return (
+
+
+
+ {renderBtn()}
+
+ );
+}
+
+export default React.memo(Index);
diff --git a/src/view/home/detail.tsx b/src/view/home/detail.tsx
new file mode 100644
index 0000000..2717d85
--- /dev/null
+++ b/src/view/home/detail.tsx
@@ -0,0 +1,5 @@
+function Index() {
+ return ;
+}
+
+export default Index;
diff --git a/src/view/home/index.less b/src/view/home/index.less
new file mode 100644
index 0000000..e32b8cc
--- /dev/null
+++ b/src/view/home/index.less
@@ -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%;
+ }
+}
diff --git a/src/view/home/index.tsx b/src/view/home/index.tsx
new file mode 100644
index 0000000..41f03b8
--- /dev/null
+++ b/src/view/home/index.tsx
@@ -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 (
+
+
+
+
+
+ 2
+
+
+
+
+ {
+ setVisible(false);
+ }}
+ >
+
+
+ );
+}
+
+export default Index;
diff --git a/src/view/home/types.ts b/src/view/home/types.ts
new file mode 100644
index 0000000..9e0d223
--- /dev/null
+++ b/src/view/home/types.ts
@@ -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;
+}
diff --git a/src/view/setting/index.tsx b/src/view/setting/index.tsx
new file mode 100644
index 0000000..b7cbbd5
--- /dev/null
+++ b/src/view/setting/index.tsx
@@ -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
+ 快捷选项
+
+
+
+ 宠物语种
+
+