feat: 字母描红页样式开发基本完成

miniprogram/englishPages/letterTracing/letterTracing.ts

@@ -1,4 +1,4 @@
-import LetterTracingDraw from '../shared/service/letterTracingDraw';
+import LetterTracingDraw from '../shared/draw/letterTracingDraw';
 import { createPage, type CanvasDataState } from '../../base/pageMixin';
 import { defaultShareConfig } from '../../config/config';
 import { getWorksheetById } from '../../core/data/worksheets';
@@ -81,36 +81,15 @@ createPage(
                 options.id && PAGE_META[options.id]
                     ? options.id
                     : 'letter-tracing-single';
-            const def = getWorksheetById(worksheetId);
-            const base = (def?.generatorConfig ??
-                {}) as Partial<LetterTracingGeneratorConfig>;
-            const merged = mergeLetterTracingConfig(base, {});
-
-            const traceMode = merged.mode;
-            const showLetterPicker = traceMode === 'single-letter';
-            const showCaseToggle =
-                traceMode === 'full-alphabet' || traceMode === 'two-column';
-            const showNextLetter = traceMode === 'single-letter';
-
-            this.setData({
-                worksheetId,
-                functionId: worksheetId,
-                traceMode,
-                selectedLetter: normalizePick(merged.selectedLetter),
-                letterCaseLower: merged.letterCase === 'lower',
-                showLetterPicker,
-                showCaseToggle,
-                showNextLetter,
-            });
-
-            this.initPageInfo(worksheetId, PAGE_META[worksheetId]?.title ?? '字母描红');
+            this.applyWorksheet(worksheetId);
         },
 
         onSelectMode(e: WechatMiniprogram.TouchEvent) {
             const id = e.currentTarget.dataset.id as string | undefined;
             if (!id || id === this.data.worksheetId) return;
-            wx.redirectTo({
-                url: `/englishPages/letterTracing/letterTracing?id=${id}`,
+            this.applyWorksheet(id, {
+                preserveLetter: true,
+                redraw: true,
             });
         },
 
@@ -184,6 +163,61 @@ createPage(
             this.setData({ selectedLetter: next });
             this.drawCanvas();
         },
+
+        applyWorksheet(
+            worksheetId: string,
+            options?: {
+                preserveLetter?: boolean;
+                redraw?: boolean;
+            },
+        ) {
+            const def = getWorksheetById(worksheetId);
+            const base = (def?.generatorConfig ??
+                {}) as Partial<LetterTracingGeneratorConfig>;
+            const merged = mergeLetterTracingConfig(base, {});
+
+            const traceMode = merged.mode;
+            const showLetterPicker = traceMode === 'single-letter';
+            const showCaseToggle =
+                traceMode === 'full-alphabet' || traceMode === 'two-column';
+            const showNextLetter = traceMode === 'single-letter';
+            const selectedLetter = options?.preserveLetter
+                ? this.data.selectedLetter
+                : normalizePick(merged.selectedLetter);
+            const letterCaseLower =
+                traceMode === 'single-letter'
+                    ? merged.letterCase === 'lower'
+                    : this.data.letterCaseLower;
+
+            this.setData(
+                {
+                    worksheetId,
+                    functionId: worksheetId,
+                    traceMode,
+                    selectedLetter,
+                    letterCaseLower,
+                    showLetterPicker,
+                    showCaseToggle,
+                    showNextLetter,
+                },
+                () => {
+                    this.initPageInfo(
+                        worksheetId,
+                        PAGE_META[worksheetId]?.title ?? '字母描红',
+                    );
+
+                    if (this.drawService) {
+                        this.drawService.options.title = this.data.pageTitle;
+                        this.drawService.options.subTitle =
+                            this.data.subTitle || '';
+                    }
+
+                    if (options?.redraw) {
+                        this.drawCanvas();
+                    }
+                },
+            );
+        },
     },
     {
         shareConfig: defaultShareConfig,