feat: 汉字每日打卡优化

miniprogram/core/data/tracingStyles.ts

@@ -16,10 +16,10 @@
 export const GRID_COLORS = {
     /** 外框、实线、垂直分隔线 — 中等绿色，清晰可见 */
     border: '#7fb069',
-    /** 中线、虚线（田字格十字线 / 四线三格中间两线）— 浅绿色，柔和护眼 */
-    middleLine: '#a8d5a8',
-    /** 对角线 — 极淡绿色，辅助参考线（田字格专用） */
-    diagonal: '#d4f0d4',
+    /** 中线、虚线（田字格十字线 / 四线三格中间两线）— 喷墨可见的中绿色 */
+    middleLine: '#7ec27e',
+    /** 对角线 — 浅绿色，辅助参考线（田字格专用），喷墨可打印 */
+    diagonal: '#9bcd9b',
 } as const;
 
 /** 四线三格默认虚线样式 */
@@ -30,10 +30,12 @@ export const GRID_DASH = [3, 3] as const;
 export const TRACING_COLORS = {
     /** 参照字/预览字 — 深灰色，完整展示供对照 */
     reference: '#555555',
-    /** 描红引导字 — 中性灰色，跟着描写 */
-    guide: '#d0d0d0',
-    /** 极浅引导字 — 浅灰色，水印效果 */
-    guideLight: '#e0e0e0',
+    /** 描红引导字 — 中灰色，跟着描写，喷墨可清晰打印 */
+    guide: '#aaaaaa',
+    /** 极浅引导字 — 浅灰色，水印效果，喷墨可见 */
+    guideLight: '#c8c8c8',
     /** 首笔/强调 — 近黑色，用于首个参照格 */
     strong: '#1a1a1a',
+    /** 当前笔画高亮 — 红色，用于笔顺进度 */
+    active: '#D94B4B',
 } as const;

miniprogram/core/draw/dailyPracticeDrawHelper.ts

@@ -52,11 +52,13 @@ export function getRandomEncouragementPhrase(): string {
  * @param ctx 微信小程序 Canvas 绘制上下文
  * @param rect 目标 Section 的位置与宽高信息
  * @param title 标题文本，如 “每日打卡” 或 “拼音每日一练”
+ * @param options.centerMeta 是否将 “月/日/姓名” 元信息行整体水平居中（默认 false，保持原左侧布局）
  */
 export function drawSectionHeader(
     ctx: RenderingContext,
     rect: { x: number; y: number; w: number; h: number },
     title: string,
+    options?: { centerMeta?: boolean },
 ): void {
     const cx = rect.x + rect.w / 2;
     const titleY = rect.y + SECTION_PADDING_TOP + 12;
@@ -74,21 +76,30 @@ export function drawSectionHeader(
     canvasCtx.font = '20px serif';
     canvasCtx.fillText(title, cx, titleY);
 
+    // 元信息行布局：原始版本以 rect.x 为基准（左侧偏移 40~248，宽 208）
+    // 当 centerMeta=true 时，整体水平居中到 rect 中部，仅影响调用方显式开启的场景
+    const META_BLOCK_WIDTH = 208;
+    const META_BASE_OFFSET = 40;
+    const metaLeft = options?.centerMeta
+        ? rect.x + (rect.w - META_BLOCK_WIDTH) / 2
+        : rect.x + META_BASE_OFFSET;
+    const offset = (n: number) => metaLeft + (n - META_BASE_OFFSET);
+
     canvasCtx.font = '12px serif';
-    canvasCtx.fillText('月', rect.x + 76, metaY);
-    canvasCtx.fillText('日', rect.x + 122, metaY);
-    canvasCtx.fillText('姓名:', rect.x + 176, metaY);
+    canvasCtx.fillText('月', offset(76), metaY);
+    canvasCtx.fillText('日', offset(122), metaY);
+    canvasCtx.fillText('姓名:', offset(176), metaY);
 
     canvasCtx.strokeStyle = '#8E897E';
     canvasCtx.lineWidth = 1;
     canvasCtx.setLineDash([]);
     canvasCtx.beginPath();
-    canvasCtx.moveTo(rect.x + 40, metaUnderlineY);
-    canvasCtx.lineTo(rect.x + 68, metaUnderlineY);
-    canvasCtx.moveTo(rect.x + 85, metaUnderlineY);
-    canvasCtx.lineTo(rect.x + 113, metaUnderlineY);
-    canvasCtx.moveTo(rect.x + 195, metaUnderlineY);
-    canvasCtx.lineTo(rect.x + 248, metaUnderlineY);
+    canvasCtx.moveTo(offset(40), metaUnderlineY);
+    canvasCtx.lineTo(offset(68), metaUnderlineY);
+    canvasCtx.moveTo(offset(85), metaUnderlineY);
+    canvasCtx.lineTo(offset(113), metaUnderlineY);
+    canvasCtx.moveTo(offset(195), metaUnderlineY);
+    canvasCtx.lineTo(offset(248), metaUnderlineY);
     canvasCtx.stroke();
 
     canvasCtx.restore();