feat: 修改header满足小红书监管要求

miniprogram/config/config.ts

@@ -0,0 +1,4 @@
+type Channel = 'wechat' | 'noLogo' | 'rednoteLogo' | 'miniHeader';
+const channel: Channel = 'miniHeader';
+
+export const CHANNEL = channel;

miniprogram/pages/index/index.ts

@@ -24,11 +24,11 @@ Page({
             this.setData({
                 cardList: [
                     { color: '#FF0000', word: '涂' },
-                    { color: '#00FF00', word: '欢' },
+                    { color: '#00FF00', word: '鸦' },
-                    { color: '#FF7F00', word: '鸦' },
+                    { color: '#FF7F00', word: '丫' },
-                    { color: '#00FFFF', word: '迎' },
+                    { color: '#00FFFF', word: '欢' },
-                    { color: '#FFFF00', word: '丫' },
+                    { color: '#FFFF00', word: '迎' },
-                    { color: '#8A2BE2', word: '你' },
+                    { color: '#8A2BE2', word: '您' },
                 ],
                 showIntroductionPopup: true,
             });
@@ -80,7 +80,7 @@ Page({
     /** 变更cardList 并更新canvas */
     drawCanvas(
         updatedCardList?: Array<{ color: string; word: string }>,
-        callback: () => void = () => {},
+        callback: () => void = () => { },
     ) {
         if (updatedCardList && updatedCardList.length >= 0) {
             this.setData({ cardList: updatedCardList }, callback);

miniprogram/service/textDrawService.ts

@@ -1,7 +1,16 @@
 // import { PAPER_SIZE } from './constant';
 import { PAPER_SIZE } from '../constants/colors';
-import { getMiniCodeImage } from '../utils/index';
+import { CHANNEL } from '../config/config';
+import { getMiniCodeImage, getImage } from '../utils/index';
 
+/**
+ * 计算示例区域圆的中心点
+ * @param canvasWidth 画布宽度
+ * @param circleCount 圆的数量
+ * @param padding 圆的间距
+ * @param radius 圆的半径
+ * @returns 圆的中心点
+ */
 function calculateCircleCenters(
     canvasWidth: number,
     circleCount: number,
@@ -78,7 +87,12 @@ class TextDrawService {
         this.characters = list.map((item) => item.word || '日');
         this.clear();
         this.setPaper();
-        this.drawHeader();
+        if (CHANNEL !== 'miniHeader') {
+            this.drawHeader();
+        } else {
+            this.drawMiniHeader();
+        }
+
         this.drawLegend();
         this.drawContent();
     }
@@ -89,10 +103,32 @@ class TextDrawService {
 
         this.currentX = 80;
         this.currentY = 80;
-        const titleX = this.currentX + 200 + 48;
+        let titleX = this.currentX + 200 + 48;
         const titleY = 80;
-        const image = await getMiniCodeImage(canvas);
+
-        ctx.drawImage(image, 80, 80, 200, 200);
+        const logoX = 80;
+        const logoY = 60;
+        const logoWidth = 200;
+        const logoHeight = 200;
+
+        switch (CHANNEL) {
+            // @ts-ignore
+            case 'rednoteLogo': {
+                const image = await getImage(canvas, '/assets/imgs/doodle-logo.png');
+                ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
+                break;
+            }
+            // @ts-ignore
+            case 'noLogo': {
+                titleX = 120;
+                break;
+            }
+            default: {
+                const image = await getMiniCodeImage(canvas);
+                ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
+                break;
+            }
+        }
 
         ctx.font = 'bold 64px "Microsoft Yahei"';
         ctx.fillStyle = '#000';
@@ -125,6 +161,20 @@ class TextDrawService {
         this.drawLine(this.currentY);
     }
 
+    drawMiniHeader() {
+        const { canvas, ctx } = this;
+        const { appName, title } = this.options;
+        const titleY = 120;
+
+        ctx.font = 'bold 64px "Microsoft Yahei"';
+        ctx.fillStyle = '#000';
+        ctx.textAlign = 'center';
+        ctx.fillText(appName + '    ' + title, canvas.width / 2, titleY);
+        this.currentY = 200;
+        this.drawLine(this.currentY);
+    }
+
+
     /** 绘制示例
      * 矩形： x、y为左上角
      * 圆形：x、y为圆心
@@ -140,7 +190,7 @@ class TextDrawService {
         const rectWidth = 180;
         const rectHeight = 80;
         const startX = 260 + radius; // 圆形的X坐标是圆心
-        const startY = 304 + 26 + radius; // 圆形的Y坐标是圆心
+        const startY = this.currentY + 30 + radius; // 圆形的Y坐标是圆心
         const len = characters.length || 4;
         const canvasWidth = canvas.width;
         const centers = calculateCircleCenters(canvasWidth, len, 220, 65);
@@ -182,7 +232,7 @@ class TextDrawService {
             );
         });
 
-        this.currentY = 612; // 计算分割线的Y坐标，距离示例图20px
+        this.currentY = CHANNEL === 'miniHeader' ? 522 : 612; // 计算分割线的Y坐标，距离示例图20px
         this.drawLine(this.currentY);
     }
 
@@ -191,7 +241,7 @@ class TextDrawService {
         if (characters.length <= 0) return;
 
         const len = characters.length;
-        const rows = 8;
+        const rows = CHANNEL === 'miniHeader' ? 9 : 8;
         const radius = 80;
         const fontSize = 72;