# 通用页面基类 (pageMixin)

## 概述

`pageMixin.ts` 提供了一个通用的页面基类，可以被不同模块（数学学习、专注力等）共用。它抽象了 Canvas 绘制页面的通用功能。

## 核心功能

- Canvas 初始化和配置
- 分享功能（小程序分享、朋友圈分享）
- 图片导出和打印
- 页面信息初始化

## 使用方法

### 1. 基础用法（不依赖特定的页面信息查找）

```typescript
import { createPage } from '../../base/pageMixin';

createPage({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    // ... 其他属性

    data: {
        pageTitle: '页面标题',
        functionId: 'my-function-id',
        // ... 其他数据
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'my-function-id';

        // 方式1：直接提供页面信息
        this.initPageInfo({
            functionId,
            title: '页面标题',
            desc: '页面描述',
        });

        // 或者方式2：使用默认标题（需要传入 defaultTitle）
        this.initPageInfo(functionId, '默认标题');
    },
});
```

### 2. 自定义页面信息查找函数

如果你有多个页面需要共享同一个查找逻辑，可以创建自己的 mixin：

```typescript
import { createPage, PageCommonMethodsConfig } from '../../base/pageMixin';

// 定义自己的页面信息查找函数
function myPageInfoLookup(functionId: string) {
    // 从你的常量或配置中查找
    const pageInfo = MY_FUNCTION_TYPES.find((item) => item.id === functionId);
    if (pageInfo) {
        return {
            title: pageInfo.title,
            desc: pageInfo.desc,
        };
    }
    return undefined;
}

// 使用配置创建页面
const config: PageCommonMethodsConfig = {
    shareConfig: {
        title: '我的模块',
        imageUrl: 'https://example.com/share.png',
    },
    pageInfoLookup: myPageInfoLookup,
};

createPage(
    {
        // ... 页面配置
        onLoad(options: { id?: string }) {
            const functionId = options.id || 'default-id';
            // 现在可以使用简化的调用方式
            this.initPageInfo(functionId, '默认标题');
            // 如果有 pageInfoLookup，会自动查找并设置 title 和 desc
        },
    },
    config,
);
```

### 3. 数学模块的用法（向后兼容）

数学模块已经封装好了专用的 `mathPageMixin.ts`，可以直接使用：

```typescript
import { createMathPage, CanvasDataState } from '../common/mathPageMixin';

createMathPage({
    // ... 页面配置
    onLoad(options: { id?: string }) {
        const functionId = options.id || 'addition-5';
        // 自动从 MATH_FUNCTION_TYPES 中查找
        this.initPageInfo(functionId, '默认标题');
    },
});
```

## API 说明

### createPage(pageOptions, config?)

创建并注册一个页面。

**参数：**

- `pageOptions`: 页面配置对象
- `config`: 可选，公共方法配置（见 `PageCommonMethodsConfig`）

### initPageInfo(functionIdOrOptions, defaultTitle?)

初始化页面信息，支持两种调用方式：

**方式1：**

```typescript
this.initPageInfo(functionId: string, defaultTitle?: string)
```

- 如果有配置 `pageInfoLookup`，会尝试查找
- 否则使用 `defaultTitle`

**方式2：**

```typescript
this.initPageInfo({ title: string, desc?: string, functionId: string })
```

- 直接提供页面信息，忽略 `pageInfoLookup`

### initCanvas(options)

初始化 Canvas。

**参数：**

- `options.createDrawService`: 创建绘制服务的工厂函数
- `options.drawServiceOptions`: 绘制服务的选项
- `options.onCanvasReady`: Canvas 初始化完成后的回调

### exportToPrint()

导出并保存图片（用于打印）。

### getShareOptions()

获取分享配置。

### onShareAppMessage()

微信小程序分享处理函数。

### onShareTimeline()

微信朋友圈分享处理函数。

## 专注力模块使用示例

```typescript
import { createPage, PageCommonMethodsConfig } from '../../base/pageMixin';

// 专注力模块的函数类型定义
interface FocusFunctionType {
    id: string;
    title: string;
    desc: string;
}

// 专注力模块的函数列表
const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
    {
        id: 'grid-drawing',
        title: '格子仿画',
        desc: '在格子中绘制颜色',
    },
    // ... 更多
];

// 专注力模块的页面信息查找函数
function focusPageInfoLookup(functionId: string) {
    const functionItem = FOCUS_FUNCTION_TYPES.find(
        (item) => item.id === functionId,
    );
    if (functionItem) {
        return {
            title: functionItem.title,
            desc: functionItem.desc,
        };
    }
    return undefined;
}

// 专注力模块的配置
const focusConfig: PageCommonMethodsConfig = {
    shareConfig: {
        title: '涂鸦丫-专注力训练',
        imageUrl: 'https://cdn.joeyone.cn/doodle/share-img/focus-share.png',
    },
    pageInfoLookup: focusPageInfoLookup,
};

// 创建专注力页面
createPage(
    {
        canvas: null as Canvas | null,
        // ... 其他配置

        onLoad(options: { id?: string }) {
            const functionId = options.id || 'grid-drawing';
            // 自动从 FOCUS_FUNCTION_TYPES 中查找
            this.initPageInfo(functionId, '格子仿画');
        },
    },
    focusConfig,
);
```

## 向后兼容性

所有现有的数学页面无需修改，因为 `mathPageMixin.ts` 保持了相同的接口。