fix: 分享背景

src/components/custom-share/index.tsx

@@ -15,7 +15,7 @@ import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
 import { getSharePromise } from "./shareUtils";
 import Stage from "@/libs/duducanvas/Stage";
 import { TAgentDetail } from "@/types/agent";
-import { DEFAULT_AVATAR } from "@/config";
+import { DEFAULT_AVATAR_SHARE_BG } from "@/config";
 import { useIsLogin } from "@/xiaolanbenlib/hooks/data/useAuth";
 
 const getCanvasSize = () => {
@@ -23,12 +23,17 @@ const getCanvasSize = () => {
   const windowInfo = Taro.getWindowInfo();
   const screenWidth = windowInfo.windowWidth;
   // console.log(windowInfo, 'WindowInfo');
+
+  // 设计宽度是 210*170 ，实际需要放大到 占满屏宽 375 * 300
   const designWidth = 375;
   const designHeight = 300;
-  // 宽高放大一倍
+  
+  // 为了清晰度，宽高放大一倍
   const canvasWidth = screenWidth * 2;
   const canvasHeight = (screenWidth / designWidth) * designHeight * 2;
+  // 放大系数
   const ratio = canvasWidth / 210;
+
   return {
     canvasWidth,
     canvasHeight,
@@ -36,37 +41,6 @@ const getCanvasSize = () => {
   };
 };
 
-const drawCircleEffect = (avatar: Container, ratio: number)=> {
-  const circle0 = new Container();
-  circle0.width = 178 * ratio;
-  circle0.height = 178 * ratio;
-  circle0.borderRadius = "100%";
-  circle0.shadow = "0 0 20px rgba(0,0,0,.02)";
-  circle0.backgroundColor = "#f6f6f6";
-
-  const circle1 = new Container();
-  circle1.x = 0;
-  circle1.y = 0;
-  circle1.width = 138 * ratio;
-  circle1.height = 138 * ratio;
-  circle1.borderRadius = "100%";
-  circle1.shadow = "0 0 20px rgba(0,0,0,.02)";
-  circle1.backgroundColor = "#f8f8f8";
-
-  const circle2 = new Container();
-  circle2.x = 0;
-  circle2.y = 0;
-  circle2.width = 102 * ratio;
-  circle2.height = 102 * ratio;
-  circle2.borderRadius = "100%";
-  circle2.shadow = "0 0 20px rgba(0,0,0,.02)";
-  circle2.backgroundColor = "#fafafa";
-
-  circle2.addChild(avatar);
-  circle1.addChild(circle2);
-  circle0.addChild(circle1);
-  return circle0
-}
 
 interface Props {
   agent: TAgentDetail;
@@ -76,7 +50,7 @@ export default (props: Props) => {
   const { canvasWidth, canvasHeight, ratio } = getCanvasSize();
   const isLogin = useIsLogin()
   let stage: Stage|null;
-
+  
   // character = useCurrentCharacter
   const agent = props.agent
   const initCanvas = async () => {
@@ -94,99 +68,96 @@ export default (props: Props) => {
       return;
     }
 
-    let avatarImg = agent.avatarLogo ?? DEFAULT_AVATAR
+    let avatarImg = agent.avatarLogo ?? DEFAULT_AVATAR_SHARE_BG
     
-    const card = new Container();
+    stage.backgroundColor = 'red'
 
     // 如果有头像，加载头像图片先
     const imgArr = [
       {
         id: "avatar",
         src: avatarImg,
-      }
+      },
+      {
+        id: "blurBg",
+        src: 'https://cdn.wehome.cn/cmn/png/221/META-H8UKXHWU-X0WXBKY1C0G0QA1DIH762-NSP5OMEM-IK.png',
+      },
     ]
     
     const loader = new ImgLoader(stage.canvas, imgArr);
     await loader.load();
     
 
-    card.x = 0;
-    card.y = -140;
-    card.gap = 5;
-    card.width = 210 * ratio;
-    card.height = 200 * ratio;
-    
-
-    // 矩形用于头像，及头像背景效果
-    const rect = new Container();
-    rect.y = -140 * ratio;
-    rect.direction = "column";
-    rect.justifyContent = "space-around";
-    rect.width = card.width * ratio;
-    rect.height = 200 * ratio;
-    rect.borderRadius = 0;
-    card.addChild(rect);
-
-    
-
     // 头像
     const avatarTexture = loader.get("avatar");
+    const avatar = new DuduImage({
+      image: avatarTexture.image,
+      dWidth: canvasWidth,
+      dHeight: (canvasWidth / avatarTexture.width) * avatarTexture.height,
+    });
+    const avatarWrapper = new Container()
+    avatarWrapper.width = canvasWidth
+    avatarWrapper.height = 100
+    avatarWrapper.overflowHidden = true
+    avatarWrapper.addChild(avatar)
+    stage.addChild(avatar)
+
     
-    if (avatarTexture) {
-      const dWidth = 80;
-      const avatar = new DuduImage({
-        image: avatarTexture.image,
-        dWidth: (dWidth) * ratio,
-        dHeight: (avatarTexture.height * dWidth/avatarTexture.width) * ratio,
-      });
-      const avatarWrapper = new Container()
-      avatarWrapper.width = dWidth * ratio
-      avatarWrapper.height = dWidth * ratio
-      avatarWrapper.overflowHidden = true
-      avatarWrapper.borderRadius = '100%'
-      avatarWrapper.addChild(avatar)
-      
-      const circleBg = drawCircleEffect(avatarWrapper, ratio)
-      card.backgroundColor = "white";
-      rect.backgroundColor = "#f5f5f5";
-      rect.addChild(circleBg)
-      
-    }
+    const blurBgTexture = loader.get("blurBg");
     
+    
+    // 毛玻璃背景
+    const dHeight = 56 * ratio
+    const blurBg = new DuduImage({
+      image: blurBgTexture.image,
+      dWidth: canvasWidth + (4 * ratio),
+      dHeight: dHeight,
+    });
+    blurBg.y = canvasHeight - dHeight
+    // 延出来一点边，需要往两边延申遮一下
+    blurBg.x = (-2 * ratio)
+    stage.addChild(blurBg)
+
+
     // 名称与公司名容器
+    const offsetPadding =  12 * ratio
     const infoList = new Container();
-    infoList.y = 110 * ratio;
-    infoList.x = 0;
+    infoList.y = blurBg.y + offsetPadding;
+    infoList.x = offsetPadding;
     infoList.direction = "column";
-    infoList.gap = 4 * ratio;
-    infoList.width = card.width
-    infoList.height = 42 * ratio;
+    infoList.alignItems = 'flex-start'
+    infoList.gap = 8 * ratio;
+    infoList.width = canvasWidth - offsetPadding
+    infoList.height = dHeight - offsetPadding;
+
     // 用户名
     const name = new RichText({
-      text: agent?.name ?? '',
-      fontSize: 15 * ratio,
-      color: "black",
+      text: agent.name ?? '',
+      fontSize: 14 * ratio,
+      color: "rgba(17,17,17, 1)",
+      fontFamily: "PingFangSC-Medium",
       fontWeight: 500,
     });
-    name.wrapWidth = 180 * ratio;
+    name.wrapWidth = 186 * ratio;
     name.lineClamp = 1;
-    name.shadow = '0 0 4 white'
-    name.height = 22 * ratio;
+    infoList.addChild(name);
+
 
     // 单位名
-    const companyName = new RichText();
-    companyName.lineClamp = 1;
-    companyName.text = agent?.entName ?? '';
-    companyName.wrapWidth = 160 * ratio;
-    companyName.fontSize = 12 * ratio;
-    companyName.color = "rgba(0, 0, 0, .45)";
-    companyName.letterSpace = 4;
-    companyName.lineGap = 8;
-    companyName.shadow = '0 0 4 white'
-    infoList.addChild(name, companyName);
-    stage.addChild(card, infoList);
+    if(agent.entName){
+      const companyName = new RichText();
+      companyName.lineClamp = 1;
+      companyName.fontFamily = "PingFangSC-Regular";
+      companyName.text = agent?.entName ?? '';
+      companyName.wrapWidth = name.wrapWidth;
+      companyName.fontSize = 12 * ratio;
+      companyName.color = "rgba(17,17,17, .65)";
+      infoList.addChild(companyName);
+    }
+    
+    stage.addChild(infoList)
+    
     
-    console.log(name)
     stage.update();
   };
 

src/config/index.ts

@@ -46,6 +46,8 @@ const ENABLE_UPGRADE_VIP = IS_MINI_GREEN_LEAF
 
 const DEFAULT_AVATAR = defaultAvatar
 const DEFAULT_AVATAR_BG = 'https://51saas.oss-cn-hangzhou.aliyuncs.com/u260727532/20250801/79GUqImi7Z_5d0c780219ca44d9a673213424366ab1.png'
+const DEFAULT_AVATAR_SHARE_BG = 'https://cdn.wehome.cn/cmn/png/12/META-H8UKWHWU-Q0WXNNJLF5IO3DRNO8GK3-0QDMLMEM-QK.png'
+
 const DEFAULT_AGENT = {
     avatar: DEFAULT_AVATAR,
     name: "小蓝本助手",
@@ -64,6 +66,7 @@ export {
 	DEFAULT_AVATAR,
 	DEFAULT_AGENT,
 	DEFAULT_AVATAR_BG,
+	DEFAULT_AVATAR_SHARE_BG,
 }