feat: 修改字母描红逻辑，添加字母手写字体

2026-04-15 17:29:59 +08:00
parent ec5bc44741
commit 4299c4e082
62 changed files with 4135 additions and 894 deletions
@@ -0,0 +1,11 @@
+{
+    "navigationBarTitleText": "专注力培养",
+    "navigationBarTextStyle": "black",
+    "navigationBarBackgroundColor": "#FFD719",
+    "homeButton": true,
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "add-to-miniprogram-tip": "../../components/add-to-miniprogram-tip/add-to-miniprogram-tip"
+    }
+}
@@ -0,0 +1 @@
+@import '../mathIndex/mathIndex.less';
@@ -0,0 +1,64 @@
+import { FOCUS_FUNCTION_TYPES } from '../../constants/focusFunctions';
+import tracker from '../../utils/tracker';
+import { defaultShareConfig } from '../../config/config';
+
+Page({
+    data: {
+        functionList: FOCUS_FUNCTION_TYPES,
+    },
+
+    onLoad() {
+        // 页面加载
+    },
+
+    /**
+     * 打开专注力功能页面
+     */
+    openFocusFunction(e: WechatMiniprogram.TouchEvent) {
+        const functionId = e.currentTarget.dataset.function;
+        const functionItem = this.data.functionList.find(
+            (item) => item.id === functionId,
+        );
+
+        if (!functionItem) {
+            return;
+        }
+
+        // 如果有page字段，跳转到对应页面
+        if (functionItem.page) {
+            let url = `/focusPages/${functionItem.page}/${functionItem.page}?id=${functionId}`;
+            // 如果有 mode 参数，添加到 URL 中
+            if (functionItem.mode) {
+                url += `&mode=${functionItem.mode}`;
+            }
+            wx.navigateTo({
+                url,
+            });
+        } else {
+            wx.showToast({
+                title: `功能开发中，敬请期待`,
+                icon: 'none',
+                duration: 2500,
+            });
+        }
+    },
+
+    onShareAppMessage() {
+        // 上报分享埋点
+        tracker.reportShare('专注力游戏');
+
+        return {
+            ...defaultShareConfig,
+            path: `/pages/focusIndex/focusIndex`,
+        };
+    },
+    onShareTimeline() {
+        // 上报分享埋点
+        tracker.reportShare('专注力游戏');
+
+        return {
+            ...defaultShareConfig,
+            query: `/pages/focusIndex/focusIndex`,
+        };
+    },
+});
@@ -0,0 +1,46 @@
+<view class="page-container">
+    <!-- 页面标题和描述 -->
+    <view class="math-page-header">
+        <!-- <view class="math-page-title">专注启蒙</view> -->
+        <view class="math-page-subtitle">
+            选择功能，生成可打印的专注力、观察力培养涂鸦卡
+        </view>
+    </view>
+
+    <!-- 功能列表 -->
+    <view class="math-functions-list">
+        <view
+            class="math-function-item"
+            wx:for="{{functionList}}"
+            wx:key="id"
+            data-function="{{item.id}}"
+            bind:tap="openFocusFunction"
+        >
+            <view class="function-item-img-wrapper">
+                <image
+                    class="function-item-img"
+                    src="{{item.img}}"
+                    mode="aspectFill"
+                ></image>
+            </view>
+            <view class="function-item-title">{{item.title}}</view>
+            <view class="function-item-desc">{{item.desc}}</view>
+        </view>
+    </view>
+
+    <!-- 使用提示 -->
+    <view class="usage-hint">
+        <view class="hint-icon">💡</view>
+        <view class="hint-text">
+            <view class="hint-title">使用提示</view>
+            <view class="hint-desc">
+                <view>1. 点击上方功能卡片选择要生成的涂鸦卡类型</view>
+                <view>2. 选择网格尺寸等参数</view>
+                <view>3. 预览生成的涂鸦卡效果</view>
+                <view>4. 下载A4格式PNG图片，打印后使用</view>
+            </view>
+        </view>
+    </view>
+    <view class="empty"></view>
+    <add-to-miniprogram-tip />
+</view>