feat: 开发练习纸

2026-08-25 15:40:38 +08:00
parent c0b8666257
commit f82ac4d89d
13 changed files with 1238 additions and 1 deletions
@@ -0,0 +1,165 @@
+import PaperDrawService from './draw/paperDrawService';
+import {
+    PAPER_SHEET_WORKSHEET_ID,
+    PAPER_TYPE_OPTIONS,
+    PAPER_COLOR_OPTIONS,
+    DEFAULT_PAPER_TYPE,
+    DEFAULT_PAPER_COLOR,
+    getModeInfo,
+    getPublishMetaByMode,
+    isValidPaperType,
+    type PaperType,
+} from './paperSheet.config';
+import { createPage, type CanvasDataState } from '../../base/pageMixin';
+import { defaultShareConfig } from '../../config/config';
+import type { DebugPublishMeta } from '../../utils/debugPublish';
+import {
+    addFavorite,
+    removeFavorite,
+    batchCheckFavorited,
+} from '../../utils/favorites';
+
+const pageInfoLookup = getModeInfo;
+
+type PageData = CanvasDataState & {
+    worksheetId: string;
+    paperTypeOptions: typeof PAPER_TYPE_OPTIONS;
+    colorOptions: typeof PAPER_COLOR_OPTIONS;
+    selectedPaperType: PaperType;
+    selectedColor: string;
+    isPreviewFavorite: boolean;
+    isDevEnv: boolean;
+    debugPublishVisible: boolean;
+    debugPublishLoading: boolean;
+    debugPublishMeta: DebugPublishMeta | null;
+};
+
+createPage(
+    {
+        canvas: null as Canvas | null,
+        ctx: null as RenderingContext | null,
+        boxHeight: 0,
+        boxWidth: 0,
+        drawService: null as PaperDrawService | null,
+        _favoritedMap: {} as Record<string, boolean>,
+
+        data: {
+            pageTitle: '作业纸',
+            functionId: PAPER_SHEET_WORKSHEET_ID,
+            hasContent: false,
+            showShareDialog: false,
+            worksheetId: PAPER_SHEET_WORKSHEET_ID,
+            paperTypeOptions: PAPER_TYPE_OPTIONS,
+            colorOptions: PAPER_COLOR_OPTIONS,
+            selectedPaperType: DEFAULT_PAPER_TYPE,
+            selectedColor: DEFAULT_PAPER_COLOR,
+            isPreviewFavorite: false,
+            isDevEnv: false,
+            debugPublishVisible: false,
+            debugPublishLoading: false,
+            debugPublishMeta: null,
+        } as unknown as PageData,
+
+        onLoad(options: { id?: string; type?: string }) {
+            this.syncDebugPublishEnv();
+
+            const initialType =
+                options.type && isValidPaperType(options.type)
+                    ? (options.type as PaperType)
+                    : DEFAULT_PAPER_TYPE;
+
+            this.setData({
+                selectedPaperType: initialType,
+            });
+
+            this.initPageInfo(PAPER_SHEET_WORKSHEET_ID, '作业纸');
+            this.loadFavoritedMap();
+        },
+
+        onCanvasReady(e: WechatMiniprogram.CustomEvent) {
+            this.initCanvasFromComponent(e.detail, {
+                createDrawService: (
+                    canvas: Canvas,
+                    ctx: RenderingContext,
+                    opts?: Record<string, unknown>,
+                ) => new PaperDrawService(canvas, ctx, opts),
+                drawServiceOptions: {
+                    title: this.data.pageTitle,
+                },
+                onCanvasReady: () => {
+                    this.drawCanvas();
+                },
+            });
+        },
+
+        async drawCanvas() {
+            if (!this.drawService) return;
+            try {
+                await (this.drawService as PaperDrawService).draw(
+                    this.data.selectedPaperType,
+                    this.data.selectedColor,
+                );
+                this.setData({ hasContent: true });
+            } catch (err) {
+                console.error('paperSheet draw failed', err);
+                this.setData({ hasContent: false });
+            }
+        },
+
+        onSelectPaperType(e: WechatMiniprogram.TouchEvent) {
+            const id = e.currentTarget.dataset.id as PaperType | undefined;
+            if (!id || id === this.data.selectedPaperType) return;
+            this.setData({ selectedPaperType: id }, () => this.drawCanvas());
+        },
+
+        onSelectColor(e: WechatMiniprogram.TouchEvent) {
+            const value = e.currentTarget.dataset.value as string | undefined;
+            if (!value || value === this.data.selectedColor) return;
+            this.setData({ selectedColor: value }, () => this.drawCanvas());
+        },
+
+        onPreviewRefresh() {
+            this.drawCanvas();
+        },
+
+        onShare() {},
+
+        async onPreviewFavorite() {
+            const next = !this.data.isPreviewFavorite;
+            this.setData({ isPreviewFavorite: next });
+            const id = this.data.worksheetId;
+            if (id) {
+                this._favoritedMap[id] = next;
+                if (next) {
+                    addFavorite(id);
+                } else {
+                    removeFavorite(id);
+                }
+            }
+            wx.showToast({
+                title: next ? '收藏成功' : '已取消收藏',
+                icon: 'none',
+            });
+        },
+
+        async loadFavoritedMap() {
+            const ids = [PAPER_SHEET_WORKSHEET_ID];
+            this._favoritedMap = await batchCheckFavorited(ids);
+            if (this._favoritedMap[this.data.worksheetId]) {
+                this.setData({ isPreviewFavorite: true });
+            }
+        },
+
+        getPublishMeta(): DebugPublishMeta {
+            const meta = getPublishMetaByMode(this.data.worksheetId);
+            if (!meta) {
+                throw new Error('当前题型配置不存在');
+            }
+            return meta;
+        },
+    },
+    {
+        shareConfig: defaultShareConfig,
+        pageInfoLookup,
+    },
+);