feat: 开发时钟连线

2026-07-29 16:41:29 +08:00
parent 37586b7bf2
commit 2ffd0b302d
15 changed files with 780 additions and 14 deletions
@@ -0,0 +1,169 @@
+import ClockConnectDraw from './draw/clockConnectDraw';
+import {
+    buildClockConnectData,
+    type ClockConnectTimeMode,
+} from './generators/clock-connect-generator';
+import { createPage, type CanvasDataState } from '../../base/pageMixin';
+import { defaultShareConfig } from '../../config/config';
+import {
+    getModeInfo,
+    getPublishMetaByMode,
+    isValidMode,
+    CLOCK_CONNECT_TIME_MODE_OPTIONS,
+} from './clockConnect.config';
+import type { DebugPublishMeta } from '../../utils/debugPublish';
+import {
+    addFavorite,
+    removeFavorite,
+    batchCheckFavorited,
+} from '../../utils/favorites';
+
+const pageInfoLookup = getModeInfo;
+const WORKSHEET_ID = 'clock-connect';
+
+type PageData = CanvasDataState & {
+    worksheetId: string;
+    timeMode: ClockConnectTimeMode;
+    timeModeOptions: typeof CLOCK_CONNECT_TIME_MODE_OPTIONS;
+    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 ClockConnectDraw | null,
+        _favoritedMap: {} as Record<string, boolean>,
+
+        data: {
+            pageTitle: '时钟连线',
+            functionId: WORKSHEET_ID,
+            hasContent: false,
+            showShareDialog: false,
+            worksheetId: WORKSHEET_ID,
+            timeMode: 'whole-hour' as ClockConnectTimeMode,
+            timeModeOptions: CLOCK_CONNECT_TIME_MODE_OPTIONS,
+            isPreviewFavorite: false,
+            isDevEnv: false,
+            debugPublishVisible: false,
+            debugPublishLoading: false,
+            debugPublishMeta: null,
+        } as unknown as PageData,
+
+        onLoad(options: { id?: string }) {
+            const worksheetId =
+                options.id && isValidMode(options.id)
+                    ? options.id
+                    : WORKSHEET_ID;
+            this.syncDebugPublishEnv();
+            this.applyWorksheet(worksheetId);
+            this.loadFavoritedMap();
+        },
+
+        onSelectTimeMode(e: WechatMiniprogram.TouchEvent) {
+            const mode = e.currentTarget.dataset.mode as
+                | ClockConnectTimeMode
+                | undefined;
+            if (!mode || mode === this.data.timeMode) return;
+            this.setData({ timeMode: mode }, () => this.drawCanvas());
+        },
+
+        onCanvasReady(e: WechatMiniprogram.CustomEvent) {
+            this.initCanvasFromComponent(e.detail, {
+                createDrawService: (
+                    canvas: Canvas,
+                    ctx: RenderingContext,
+                    options?: Record<string, unknown>,
+                ) => new ClockConnectDraw(canvas, ctx, options),
+                drawServiceOptions: {
+                    title: this.data.pageTitle,
+                },
+                onCanvasReady: () => {
+                    this.drawCanvas();
+                },
+            });
+        },
+
+        async drawCanvas() {
+            if (!this.ctx || !this.drawService) return;
+            try {
+                const data = buildClockConnectData(this.data.timeMode);
+                await (this.drawService as ClockConnectDraw).draw(data);
+                this.setData({ hasContent: true });
+            } catch (e) {
+                console.error('clockConnect draw failed', e);
+                this.setData({ hasContent: false });
+            }
+        },
+
+        onPreviewRefresh() {
+            this.drawCanvas();
+        },
+
+        async onPreviewFavorite() {
+            const next = !this.data.isPreviewFavorite;
+            this.setData({ isPreviewFavorite: next });
+            const id = this.data.worksheetId;
+            if (id && this._favoritedMap) {
+                this._favoritedMap[id] = next;
+                if (next) {
+                    addFavorite(id);
+                } else {
+                    removeFavorite(id);
+                }
+            }
+            wx.showToast({
+                title: next ? '收藏成功' : '已取消收藏',
+                icon: 'none',
+            });
+        },
+
+        async loadFavoritedMap() {
+            const ids = [WORKSHEET_ID];
+            this._favoritedMap = await batchCheckFavorited(ids);
+            if (this._favoritedMap?.[WORKSHEET_ID]) {
+                this.setData({ isPreviewFavorite: true });
+            }
+        },
+
+        getPublishMeta(): DebugPublishMeta {
+            const meta = getPublishMetaByMode(this.data.worksheetId);
+            if (!meta) {
+                throw new Error('当前题型配置不存在');
+            }
+            return meta;
+        },
+
+        getWorksheetStatsId() {
+            return this.data.worksheetId;
+        },
+
+        applyWorksheet(worksheetId: string) {
+            if (!isValidMode(worksheetId)) return;
+
+            this.setData(
+                {
+                    worksheetId,
+                    functionId: worksheetId,
+                    isPreviewFavorite: !!this._favoritedMap?.[worksheetId],
+                },
+                () => {
+                    this.initPageInfo(worksheetId, '时钟连线');
+                    if (this.drawService) {
+                        this.drawService.options.title = this.data.pageTitle;
+                    }
+                },
+            );
+        },
+    },
+    {
+        shareConfig: defaultShareConfig,
+        pageInfoLookup,
+    },
+);