feat: 测试结果页雷达图样式修改 & 保存图片增加提示

src/components/Radar/index.tsx

@@ -38,13 +38,13 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
         canvas.width = res[0].width * dpr;
         canvas.height = res[0].height * dpr;
         ctx.scale(dpr, dpr);
-        
+
         // 启用抗锯齿，消除锯齿
         ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = 'high';
+        ctx.imageSmoothingQuality = "high";
         // 设置线条端点样式为圆形，减少锯齿
-        ctx.lineCap = 'round';
+        ctx.lineCap = "round";
-        ctx.lineJoin = 'round';
+        ctx.lineJoin = "round";
 
         // === 绘制圆形网格 ===
         for (let i = levels; i >= 1; i--) {
@@ -52,10 +52,10 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
           ctx.beginPath();
           ctx.arc(center.x, center.y, r, 0, Math.PI * 2);
           if (i % 2 === 1) {
-            ctx.fillStyle = "#fff";
+            ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
             ctx.fill();
           } else {
-            ctx.fillStyle = "#CAFCF0";
+            ctx.fillStyle = "rgba(149, 249, 225, 0.4)";
             ctx.fill();
           }
           // 根据层级设置不同的线条颜色，中间圆圈使用更浅的颜色
@@ -70,7 +70,7 @@ const RadarChart: React.FC = forwardRef((props, ref) => {
             ctx.strokeStyle = "#D5D5D5";
           }
           // 设置线条宽度为1px，确保清晰
-          ctx.lineWidth = 1;
+          ctx.lineWidth = 0.5;
           ctx.stroke();
         }
 

src/other_pages/ntrp-evaluate/index.module.scss

@@ -546,7 +546,8 @@
     align-self: stretch;
     border-radius: 26px;
     border: 4px solid #fff;
-    background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fff;
+    // background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fff;
+    background-size: contain;
     box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
 
     .avatarWrap {

src/other_pages/ntrp-evaluate/index.tsx

@@ -602,10 +602,10 @@ function Result() {
           );
         }
       }
-      
+
       // 使用 RadarV2 的 generateFullImage 方法生成完整图片
       const userNickname = (userInfo as any)?.nickname;
-      const titleText = userNickname 
+      const titleText = userNickname
         ? `${userNickname}的 NTRP 测试结果为`
         : "你的 NTRP 测试结果为";
       const imageUrl = await radarV2Ref.current?.generateFullImage({
@@ -658,6 +658,7 @@ function Result() {
         try {
           const url = await genCardImage();
           Taro.saveImageToPhotosAlbum({ filePath: url });
+          Taro.showToast({ title: "保存成功" });
         } catch (e) {
           Taro.showToast({ title: "图片保存失败", icon: "none" });
         }
@@ -691,7 +692,12 @@ function Result() {
   return (
     <View className={styles.resultContainer}>
       <CommonGuideBar />
-      <View className={styles.card}>
+      <View
+        className={styles.card}
+        style={{
+          backgroundImage: `url(${OSS_BASE_URL}/images/f5b45cea-5015-41d6-aaf4-83b2e76678e1.png)`,
+        }}
+      >
         <View className={styles.avatarWrap}>
           <View className={styles.avatar}>
             <Image
@@ -712,7 +718,7 @@ function Result() {
         <View className={styles.desc}>
           <View className={styles.tip}>
             <Text>
-              {(userInfo as any)?.nickname 
+              {(userInfo as any)?.nickname
                 ? `${(userInfo as any).nickname}的 NTRP 测试结果为`
                 : "你的 NTRP 测试结果为"}
             </Text>
@@ -776,13 +782,24 @@ function Result() {
         </View>
       </View>
       {/* 隐藏的 RadarV2 用于生成完整图片，不显示在界面上 */}
-      <View style={{ position: "absolute", top: "-9999px", left: "-9999px", width: "0px", height: "0px", overflow: "hidden" }}>
+      <View
-        <RadarChartV2 
+        style={{
-          ref={radarV2Ref} 
+          position: "absolute",
+          top: "-9999px",
+          left: "-9999px",
+          width: "0px",
+          height: "0px",
+          overflow: "hidden",
+        }}
+      >
+        <RadarChartV2
+          ref={radarV2Ref}
           data={radarData}
-          title={(userInfo as any)?.nickname 
+          title={
-            ? `${(userInfo as any).nickname}的 NTRP 测试结果为`
+            (userInfo as any)?.nickname
-            : "你的 NTRP 测试结果为"}
+              ? `${(userInfo as any).nickname}的 NTRP 测试结果为`
+              : "你的 NTRP 测试结果为"
+          }
           ntrpLevel={result?.ntrp_level}
           levelDescription={result?.level_description}
           avatarUrl={(userInfo as any)?.avatar_url}

src/utils/genPoster.ts

@@ -1,8 +1,6 @@
 import Taro from "@tarojs/taro";
 import { OSS_BASE_URL } from "@/config/api";
 
-// const qrCodeUrl = `${OSS_BASE_URL}/images/5e013195-fc79-4082-bf06-9aa79aea65ae.png`;
-
 const bgUrl = `${OSS_BASE_URL}/images/5e2c85ab-fb0c-4026-974d-1e0725181542.png`;
 
 const ringUrl = `${OSS_BASE_URL}/images/b635164f-ecec-434a-a00b-69614a918f2f.png`;