feat: 头像

projects/translate-h5/src/view/home/translate/component/message/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Divider, Image, SpinLoading, Toast } from "antd-mobile";
+import { Avatar, Divider, Image, Space, SpinLoading, Toast } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
 import dogSvg from "@/assets/translate/dog.svg";
 import catSvg from "@/assets/translate/cat.svg";
@@ -105,14 +105,8 @@ function Index(props: DefinedProps) {
       }
     });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog" | "") => {
-    if (type === "pig") {
-      <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
-    }
-    if (type === "cat") {
-      return <Image src={catSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
-    }
-    return <Image src={dogSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
+  const renderAvatar = (item: Message) => {
+    return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
   };
 
   const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
@@ -122,11 +116,49 @@ function Index(props: DefinedProps) {
     props.onRefresh(formData, messageId);
   };
 
+  const renderTranslateResult = (item: Message) => {
+    if (item.isTranslating) {
+      return (
+        <div className="translate">
+          <SpinLoading color="default" style={{ "--size": "12px" }} />
+          <span>翻译中...</span>
+        </div>
+      );
+    } else {
+      if (item.transStatus === 1) {
+        return item.transResult?.length ? (
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>{item.transResult}</span>
+          </Space>
+        ) : (
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>未知语句</span>
+            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
+      } else {
+        return (
+          <Space
+            justify={"between"}
+            className="translate"
+            style={{ verticalAlign: "middle" }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <span>翻译失败，请重试</span>
+            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
+      }
+    }
+  };
+
   return (
     <div className="message">
       {data.map((item, index) => (
         <div className="item" key={index} onClick={() => playAudio(item.id, item.contentText)}>
-          {renderAvatar(item.petType)}
+          {renderAvatar(item)}
 
           <div className="rig">
             <div>
@@ -141,38 +173,37 @@ function Index(props: DefinedProps) {
               />
               <div className="time">{item.contentDuration}''</div>
             </div>
-            {item.isTranslating ? (
+            {renderTranslateResult(item)}
+            {/* {item.isTranslating ? (
               <div className="translate">
                 <SpinLoading color="default" style={{ "--size": "12px" }} />
                 <span>翻译中...</span>
               </div>
             ) : item.transStatus === 1 ? (
-              <div className="translate">{item.transResult ?? "暂无翻译结果"}</div>
-            ) : (
               <div className="translate">
-                <span> 翻译失败，请重试</span>
-                <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+                {item.transResult?.length ? (
+                  item.transResult
+                ) : (
+                  <Space justify={"between"}>
+                    <span>未知语句</span>
+                    <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+                  </Space>
+                )}
               </div>
-            )}
+            ) : (
+              <Space justify={"between"} className="translate">
+                <span>翻译失败，请重试</span>
+                <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+              </Space>
+              // <div className="translate">
+              //   <span> 翻译失败，请重试</span>
+              //   <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+              // </div>
+            )} */}
           </div>
         </div>
       ))}
 
-      <div className="item">
-        <div className="avatar"></div>
-        <div className="rig">
-          <div>
-            <span className="name">生无可恋喵</span>
-            <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-            <span className="">15:00</span>
-          </div>
-          <div className="voice-container">
-            <VoiceIcon isPlaying={false} />
-            <div className="tips">{isRecording ? "录制中..." : "轻点麦克风录制"}</div>
-          </div>
-        </div>
-      </div>
-
       <div style={{ height: "130px", width: "100%" }}></div>
     </div>
   );