feat: 数感启蒙、专注力页面重构、首页入口开发

2026-04-21 17:51:16 +08:00
parent b2f5b203f8
commit 28151018ee
212 changed files with 2722 additions and 5207 deletions
@@ -0,0 +1,184 @@
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { BaseDrawService } from '../../core/draw/baseDraw';
+import {
+    FOCUS_TYPE_CONFIGS,
+    findTypeByRouteId,
+    type FocusTypeConfig,
+    type FocusTypeAction,
+} from './registry';
+
+const TYPE_LIST = FOCUS_TYPE_CONFIGS.map((t) => ({
+    id: t.id,
+    title: t.title,
+    icon: t.icon,
+}));
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as BaseDrawService | null,
+    currentTypeConfig: null as FocusTypeConfig | null,
+    currentData: null as any,
+
+    data: {
+        pageTitle: '专注力练习',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+        boxWidth: 0,
+        boxHeight: 0,
+        selectedTypeId: '',
+        typeList: TYPE_LIST,
+        showActions: false,
+        actionsTitle: '选择模式',
+        currentActions: [] as FocusTypeAction[],
+        currentMode: '',
+    },
+
+    onLoad(options: { id?: string; mode?: string }) {
+        const routeId = options.id || FOCUS_TYPE_CONFIGS[0].id;
+        const result = findTypeByRouteId(routeId);
+        if (!result) return;
+
+        const { typeConfig, mode } = result;
+        const initialMode =
+            options.mode || mode || typeConfig.defaultMode || '';
+
+        this.currentTypeConfig = typeConfig;
+
+        const title = typeConfig.getTitle
+            ? typeConfig.getTitle(initialMode)
+            : typeConfig.title;
+
+        this.setData({
+            selectedTypeId: typeConfig.id,
+            functionId: routeId,
+            pageTitle: title,
+            showActions: !!typeConfig.actions,
+            currentActions: typeConfig.actions || [],
+            actionsTitle: typeConfig.actionsTitle || '选择模式',
+            currentMode: initialMode,
+        });
+
+        this.initPageInfo(routeId, title);
+    },
+
+    onReady() {
+        if (!this.currentTypeConfig) return;
+
+        const typeConfig = this.currentTypeConfig;
+        const mode = this.data.currentMode;
+
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => typeConfig.createDrawService(canvas, ctx, options),
+            drawServiceOptions: {
+                title: this.data.pageTitle,
+                subTitle: typeConfig.getSubTitle
+                    ? typeConfig.getSubTitle(mode)
+                    : typeConfig.subTitle,
+                functionId: this.data.functionId,
+            },
+            onCanvasReady: () => {
+                this.onRandom();
+            },
+        });
+    },
+
+    /** 切换练习类型 */
+    onSelectType(e: WechatMiniprogram.TouchEvent) {
+        const id = e.currentTarget.dataset.id as string;
+        if (!id || id === this.data.selectedTypeId) return;
+
+        const typeConfig = FOCUS_TYPE_CONFIGS.find((t) => t.id === id);
+        if (!typeConfig) return;
+
+        this.currentTypeConfig = typeConfig;
+        const mode = typeConfig.defaultMode || '';
+        const title = typeConfig.getTitle
+            ? typeConfig.getTitle(mode)
+            : typeConfig.title;
+        const subTitle = typeConfig.getSubTitle
+            ? typeConfig.getSubTitle(mode)
+            : typeConfig.subTitle;
+
+        this.setData({
+            selectedTypeId: id,
+            functionId: id,
+            pageTitle: title,
+            showActions: !!typeConfig.actions,
+            currentActions: typeConfig.actions || [],
+            actionsTitle: typeConfig.actionsTitle || '选择模式',
+            currentMode: mode,
+        });
+
+        this.initPageInfo(id, title);
+
+        if (this.canvas && this.ctx) {
+            this.drawService = typeConfig.createDrawService(
+                this.canvas,
+                this.ctx,
+                { title, subTitle, functionId: id },
+            );
+            this.onRandom();
+        }
+    },
+
+    /** 切换子选项（模式） */
+    onSelectMode(e: WechatMiniprogram.TouchEvent) {
+        const value = e.currentTarget.dataset.value as string;
+        if (!value || value === this.data.currentMode) return;
+
+        const typeConfig = this.currentTypeConfig;
+        if (!typeConfig) return;
+
+        const title = typeConfig.getTitle
+            ? typeConfig.getTitle(value)
+            : typeConfig.title;
+        const subTitle = typeConfig.getSubTitle
+            ? typeConfig.getSubTitle(value)
+            : typeConfig.subTitle;
+
+        this.setData({
+            currentMode: value,
+            pageTitle: title,
+        });
+
+        this.initPageInfo(this.data.functionId, title);
+
+        if (this.drawService) {
+            (this.drawService as any).options.title = title;
+            (this.drawService as any).options.subTitle = subTitle;
+        }
+
+        this.onRandom();
+    },
+
+    /** 执行 Canvas 绘制 */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.currentData) return;
+
+        try {
+            await this.drawService.draw(this.currentData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /** 随机生成数据并绘制 */
+    onRandom() {
+        if (!this.currentTypeConfig) return;
+
+        this.currentData = this.currentTypeConfig.generateData(
+            this.data.currentMode,
+        );
+        this.drawCanvas();
+    },
+});