feat: 开始开发专注力系列

miniprogram/focusPages/gridDrawing/gridDrawing.json

@@ -0,0 +1,12 @@
+{
+    "navigationBarTitleText": "格子仿画",
+    "navigationBarBackgroundColor": "#FFD719",
+    "homeButton": true,
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "math-type-selector": "../../components/math-type-selector/math-type-selector",
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
+    }
+}

miniprogram/focusPages/gridDrawing/gridDrawing.ts

@@ -0,0 +1,125 @@
+import GridDraw from '../shared/service/gridDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { GridDrawingData } from '../shared/service/gridDraw';
+import { generateCompletePattern } from '../shared/utils/gridUtils';
+import { getRandom3x3Shape } from '../shared/shapes/gridShapes3x3';
+import { getRandom5x5Shape } from '../shared/shapes/gridShapes5x5';
+import { getRandom7x7Shape } from '../shared/shapes/gridShapes7x7';
+import { ShapeTemplate } from '../shared/types/gridTypes';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as GridDraw | null,
+    gridData: null as GridDrawingData | null,
+
+    data: {
+        pageTitle: '格子仿画',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+        currentMode: '3x3', // '3x3', '5x5', '7x7'
+        currentModeName: '3×3',
+        typeActions: [
+            { name: '3×3', value: '3x3' },
+            { name: '5×5', value: '5x5' },
+            { name: '7×7', value: '7x7' },
+        ],
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'grid-drawing';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '格子仿画');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new GridDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                subTitle: '在网格中填充颜色，形成各种形状',
+                functionId: this.data.functionId,
+            },
+            onCanvasReady: () => {
+                // 初始随机生成
+                this.onRandom();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.gridData) {
+            return;
+        }
+
+        try {
+            // 更新 Header 的 Title
+            if (this.drawService) {
+                this.drawService.options.title = this.data.currentModeName;
+            }
+
+            await this.drawService.draw(this.gridData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        const mode = this.data.currentMode;
+        let shape: ShapeTemplate;
+        let config: GridConfig;
+
+        // 根据模式选择形状和配置
+        if (mode === '3x3') {
+            shape = getRandom3x3Shape();
+            config = { rows: 3, cols: 3 };
+        } else if (mode === '5x5') {
+            shape = getRandom5x5Shape();
+            config = { rows: 5, cols: 5 };
+        } else {
+            // 7x7
+            shape = getRandom7x7Shape();
+            config = { rows: 7, cols: 7 };
+        }
+
+        // 生成完整的格子数据
+        const cells = generateCompletePattern(shape);
+
+        this.gridData = {
+            config,
+            cells,
+            name: shape.name,
+        };
+
+        this.drawCanvas();
+    },
+
+    /** 选择类型 */
+    onSelectType(event: any) {
+        const { name, value } = event.detail;
+        this.setData({
+            currentMode: value,
+            currentModeName: name,
+        });
+        // 重新生成数据
+        this.onRandom();
+    },
+});

miniprogram/focusPages/gridDrawing/gridDrawing.wxml

@@ -0,0 +1,30 @@
+<view class="page-container">
+    <view class="wrapper">
+        <text class="wrapper-title">预览打印效果</text>
+
+        <!-- 预览打印效果 -->
+        <view id="canvasWrapper" class="canvas-wrapper">
+            <canvas
+                type="2d"
+                id="canvasContent"
+                class="canvas-content"
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+        </view>
+
+        <!-- 类型选择器和随机生成按钮 -->
+        <math-type-selector
+            current-type-name="{{currentModeName}}"
+            type-actions="{{typeActions}}"
+            bind:select="onSelectType"
+            bind:random="onRandom" />
+    </view>
+    <view class="empty"></view>
+</view>
+<math-bottom-buttons
+    disabled="{{!hasContent}}"
+    bind:share="onShareAppMessage"
+    bind:export="exportToPrint" />
+<share-guide-popup
+    show="{{showShareDialog}}"
+    bind:onClose="onCloseShareDialog"
+    bind:onShareSuccess="onShareSuccess" />