feat: 样式修改、13 字母半表、三字母精练开发

2026-04-20 16:23:47 +08:00
parent 9febf7da4f
commit 21b515746b
12 changed files with 916 additions and 163 deletions
@@ -10,6 +10,7 @@
        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
        "draw-ad": "../../components/draw-ad/draw-ad",
        "preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
-        "toy-icon": "../../toy/icon/icon"
+        "toy-icon": "../../toy/icon/icon",
+        "van-icon": "@vant/weapp/icon/index"
    }
 }
@@ -66,134 +66,93 @@ page {
    box-shadow: @shadow;
 }

-/* ===== 参数面板 (bg-surface-container rounded-xl p-6 space-y-6) ===== */
-.lt-params {
-    /* surface-container = #f0e7d6 */
-    background: @bg-card;
-    border-radius: @radius-xl;
-    padding: 48rpx;
-    box-sizing: border-box;
+/* ===== 独立 Section 区块（参考 UI 稿 space-y-4） ===== */
+.lt-section {
    display: flex;
    flex-direction: column;
-    gap: 48rpx;
-    box-shadow: @shadow;
+    gap: 32rpx;
 }

-/* 标题行 (gap-2 = 8px → 16rpx) */
-.lt-params-head {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 16rpx;
-}
-
-.lt-params-emoji {
-    /* text-xl = 20px → 40rpx */
-    font-size: 40rpx;
-    line-height: 1;
-}
-
-.lt-params-title {
-    /* text-lg = 18px → 36rpx */
-    font-size: @fs-section-head-title;
+.lt-section-title {
+    font-size: 32rpx;
    font-weight: 700;
-    color: @text-title;
+    color: #6d3b00;
+    padding-left: 8rpx;
 }

-/* 参数区块内间距 (space-y-3 = 12px → 24rpx) */
-.param-block {
+.lt-section-body {
    display: flex;
    flex-direction: column;
-    /* space-y-3 = 12px → 24rpx */
    gap: 24rpx;
 }

-/* 字段标签 (text-sm font-bold text-on-surface-variant ml-1) */
-.lt-field-label {
-    display: block;
-    /* text-sm = 14px → 28rpx */
-    font-size: 28rpx;
-    font-weight: 700;
-    /* on-surface-variant = #605b50 */
-    color: @text-secondary;
-    /* ml-1 = 4px → 8rpx */
-    margin-left: 8rpx;
-}
-
-/* ===== 练习类型 Tab (grid-cols-2 gap-2 bg-surface-container-high p-1.5 rounded-lg) ===== */
-.lt-mode-seg {
+/* ===== 练习类型 2列卡片网格 (grid-cols-2 gap-4) ===== */
+.lt-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
-    /* gap-2 = 8px → 16rpx */
-    gap: 16rpx;
-    /* p-1.5 = 6px → 12rpx */
-    padding: 12rpx;
-    /* surface-container-high = #eae2d0 */
-    background: #eae2d0;
-    border-radius: 32rpx;
-    box-sizing: border-box;
+    gap: 32rpx;
 }

-/* 未选中 item (py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant) */
-.lt-mode-item {
+.lt-mode-card {
    display: flex;
+    flex-direction: column;
    align-items: center;
    justify-content: center;
-    /* py-2.5 = 10px → 20rpx; px-3 = 12px → 24rpx */
-    padding: 20rpx 24rpx;
-    /* rounded-lg = 8px → 16rpx */
-    border-radius: 32rpx;
-    background: transparent;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    // transition: all 1s ease;
+    gap: 16rpx;
+    padding: 32rpx 24rpx;
+    border-radius: 24rpx;
+    background: #f8f0e0;
    box-sizing: border-box;
+    transition:
+        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

-/* 选中 item (bg-primary-container text-on-primary-container font-bold shadow-sm) */
-.lt-mode-item--active {
-    /* primary-container = #ffd709 */
-    background: @brand;
-    box-shadow: 0 2rpx 8rpx rgba(50, 46, 37, 0.08);
+.lt-mode-card__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4rpx;
 }

-.lt-mode-item__text {
-    /* text-sm = 14px → 28rpx */
-    font-size: 28rpx;
-    /* 未选中 font-medium = 500 */
-    font-weight: 500;
-    /* on-surface-variant = #605b50 */
-    color: @text-secondary; //#5b4b00
-    line-height: 40rpx;
+.lt-mode-card--active {
+    background: linear-gradient(145deg, #ffd709 0%, #efc900 100%);
+    box-shadow: 0 8rpx 32rpx rgba(50, 46, 37, 0.06);
+}
+
+.lt-mode-card--pressed {
+    transform: scale(0.95);
+}
+
+.lt-mode-card__label {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: @text-secondary;
    text-align: center;
 }

-/* 选中态字色 (on-primary-container = #5b4b00, font-bold = 700) */
-.lt-mode-item--active .lt-mode-item__text {
-    /* on-primary-container = #5b4b00 */
-    color: @text-selected-btn;
-    font-weight: 700;
+.lt-mode-card--active .lt-mode-card__label {
+    color: #453900;
 }

-/* ===== 字母选择网格 (grid-cols-6 gap-2) ===== */
+/* ===== 字母选择网格 (grid-cols-6 gap-3) ===== */
 .lt-letter-grid {
    display: grid;
-    /* 稿 grid-cols-6 */
    grid-template-columns: repeat(6, 1fr);
-    /* gap-2 = 8px → 16rpx */
-    gap: 16rpx;
+    gap: 28rpx;
+    padding: 0 8rpx;
 }

-/* 字母格子 (aspect-square rounded-lg bg-surface-container-lowest) */
+/* 字母格子 (aspect-square rounded-[12px] bg-surface-container) */
 .lt-letter-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
-    border-radius: 32rpx;
-    /* surface-container-lowest = #ffffff */
-    background: @bg-white;
+    border-radius: 24rpx;
+    background: @bg-card;
    box-sizing: border-box;
-    /* 不用 :active：小程序 view 上背景色常在松手后才刷新；用 hover-class 才能按下即变色，并做过渡 */
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
@@ -215,10 +174,8 @@ page {
 }

 .lt-letter-text {
-    /* text-lg = 18px → 36rpx */
-    font-size: 36rpx;
+    font-size: 32rpx;
    font-weight: 700;
-    /* on-surface-variant = #605b50 */
    color: @text-secondary;
    line-height: 1;
    transition: color 0.2s ease;
@@ -233,27 +190,79 @@ page {
    color: @text-selected-btn;
 }

-/* ===== 大小写切换 ===== */
+/* ===== 展开/收起按钮（UI 稿 rounded-full bg-surface-container-low） ===== */
+.lt-expand-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    padding: 12rpx 32rpx;
+    border-radius: 999rpx;
+    background: #f8f0e0;
+    align-self: center;
+    margin: 16rpx auto 0;
+    transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+}
+
+.lt-expand-toggle--hover {
+    background: @bg-card;
+    transform: scale(0.96);
+}
+
+.lt-expand-toggle__text {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: @text-secondary;
+    line-height: 1;
+}
+
+.lt-expand-toggle__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ===== 大小写切换 / 字母分组选择 ===== */
 .lt-chip-row {
    display: flex;
    flex-direction: row;
    /* gap-2 = 8px → 16rpx */
-    gap: 16rpx;
+    gap: 32rpx;
 }

-/* 未选中 chip (同练习类型 item 风格) */
+.lt-chip-row--wrap {
+    flex-wrap: wrap;
+
+    .lt-chip {
+        flex: none;
+    }
+}
+
+.lt-chip-row--triple {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24rpx;
+
+    .lt-chip {
+        flex: unset;
+        width: 100%;
+        padding: 24rpx 16rpx;
+    }
+}
+
+/* 未选中 chip（与字母格子统一底色） */
 .lt-chip {
    flex: 1;
+    box-sizing: border-box;
    text-align: center;
-    /* py-2.5 px-3 */
    padding: 20rpx 24rpx;
-    /* text-sm = 14px → 28rpx */
    font-size: 28rpx;
-    font-weight: 500;
+    font-weight: 700;
    line-height: 40rpx;
    color: @text-secondary;
-    background: #fff;
-    /* rounded-lg */
+    background: @bg-card;
    border-radius: 32rpx;
    transition:
        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
@@ -9,7 +9,7 @@ import {
    type LetterTracingGeneratorConfig,
    type LetterTracingMode,
 } from '../shared/generators/letter-tracing-generator';
-import { LETTERS_UPPER } from '../shared/data/alphabet';
+import { LETTERS_UPPER, LETTERS_PAIRS } from '../shared/data/alphabet';
 import {
    DEFAULT_LETTER_PROFILE,
    getFontProfile,
@@ -21,34 +21,35 @@ import { loadLetterFont } from '../shared/draw/drawTools';
 const MODES = [
    {
        id: 'letter-tracing-single',
-        label: '看图识字',
+        label: '默认字帖',
        desc: '配图、例句与描红',
    },
    {
        id: 'letter-tracing-upper-lower',
-        label: '字母总览',
+        // label: '字母总览',
+        label: '基础描红',
        desc: 'Uppercase / Lowercase 总览',
    },
    {
        id: 'letter-tracing-case-pairing',
-        label: '大小写练习',
+        label: '大小写对照',
        desc: '半组字母左大写右小写',
    },
    {
        id: 'letter-tracing-two-column',
-        label: '两列练习',
+        label: '两列描红',
        desc: '左 A–M、右 N–Z 配对描红',
    },
+    {
+        id: 'letter-tracing-single-line',
+        label: '13字母半表',
+        desc: '每行一个字母，13 字母半表',
+    },
    {
        id: 'letter-tracing-triple',
        label: '三字母精练',
        desc: '每页聚焦 3 个字母深度书写',
    },
-    {
-        id: 'letter-tracing-single-line',
-        label: '单字母逐行',
-        desc: '每行一个字母，13 字母半表',
-    },
 ] as const;

 const MODE_MAP = Object.fromEntries(MODES.map((m) => [m.id, m])) as Record<
@@ -56,6 +57,15 @@ const MODE_MAP = Object.fromEntries(MODES.map((m) => [m.id, m])) as Record<
    (typeof MODES)[number]
 >;

+/** 三字母精练分组：26 字母每 3 个一组 */
+const TRIPLE_GROUPS: { label: string; letters: string[] }[] = [];
+for (let i = 0; i < LETTERS_UPPER.length; i += 3) {
+    const group = LETTERS_UPPER.slice(i, i + 3);
+    const label =
+        group.length > 1 ? `${group[0]}–${group[group.length - 1]}` : group[0];
+    TRIPLE_GROUPS.push({ label, letters: [...group] });
+}
+
 /** 根据 worksheetId 查找页面元信息 */
 function pageInfoLookup(id: string) {
    const m = MODE_MAP[id];
@@ -66,11 +76,17 @@ type PageData = CanvasDataState & {
    worksheetId: string;
    traceMode: LetterTracingMode;
    selectedLetter: string;
+    selectedLetterPair: string;
    letterCaseLower: boolean;
    showLetterPicker: boolean;
    showCaseToggle: boolean;
    showNextLetter: boolean;
+    showTripleGroupPicker: boolean;
+    tripleGroups: { label: string; letters: string[] }[];
+    selectedTripleGroupIdx: number;
    letterGrid: string[];
+    letterGridExpanded: boolean;
+    letterGridPreview: string[];
    modeOptions: ReadonlyArray<{ id: string; label: string; desc: string }>;
 };

@@ -91,11 +107,17 @@ createPage(
            worksheetId: 'letter-tracing-single',
            traceMode: 'letter-tracing-single',
            selectedLetter: 'A',
+            selectedLetterPair: 'Aa',
            letterCaseLower: false,
            showLetterPicker: true,
            showCaseToggle: false,
            showNextLetter: true,
-            letterGrid: LETTERS_UPPER,
+            showTripleGroupPicker: false,
+            tripleGroups: TRIPLE_GROUPS,
+            selectedTripleGroupIdx: 0,
+            letterGrid: LETTERS_PAIRS,
+            letterGridExpanded: false,
+            letterGridPreview: LETTERS_PAIRS.slice(0, 6),
            modeOptions: [...MODES],
        } as unknown as PageData,

@@ -119,7 +141,10 @@ createPage(
            const updates: Partial<PageData> = {};
            if (options.letter) {
                const normalized = normalizeLetter(options.letter);
-                if (normalized) updates.selectedLetter = normalized;
+                if (normalized) {
+                    updates.selectedLetter = normalized;
+                    updates.selectedLetterPair = `${normalized}${normalized.toLowerCase()}`;
+                }
            }
            if (options.case === 'lower') {
                updates.letterCaseLower = true;
@@ -174,6 +199,7 @@ createPage(
            const needsHalf =
                this.data.traceMode === 'letter-tracing-case-pairing' ||
                this.data.traceMode === 'letter-tracing-single-line';
+            const isTriple = this.data.traceMode === 'letter-tracing-triple';
            return mergeLetterTracingConfig(base, {
                selectedLetter: this.data.selectedLetter,
                letterCase,
@@ -184,6 +210,13 @@ createPage(
                              : 'A-M',
                      }
                    : {}),
+                ...(isTriple
+                    ? {
+                          tripleLetters:
+                              TRIPLE_GROUPS[this.data.selectedTripleGroupIdx]
+                                  ?.letters,
+                      }
+                    : {}),
            });
        },

@@ -203,11 +236,22 @@ createPage(
            }
        },

-        /** 用户在字母网格中选择了一个字母 */
+        /** 展开/收起字母网格 */
+        toggleLetterGrid() {
+            this.setData({
+                letterGridExpanded: !this.data.letterGridExpanded,
+            });
+        },
+
+        /** 用户在字母网格中选择了一个字母（item 为 "Aa" 格式，取首字母作为 selectedLetter） */
        onSelectLetter(e: WechatMiniprogram.TouchEvent) {
-            const letter = e.currentTarget.dataset.letter as string;
-            if (!letter) return;
-            this.setData({ selectedLetter: letter });
+            const raw = e.currentTarget.dataset.letter as string;
+            if (!raw) return;
+            const letter = raw.charAt(0).toUpperCase();
+            this.setData({
+                selectedLetter: letter,
+                selectedLetterPair: `${letter}${letter.toLowerCase()}`,
+            });
            this.drawCanvas();
        },

@@ -228,7 +272,18 @@ createPage(
            const list = LETTERS_UPPER;
            const i = list.indexOf(this.data.selectedLetter);
            const next = list[(i + 1) % list.length];
-            this.setData({ selectedLetter: next });
+            this.setData({
+                selectedLetter: next,
+                selectedLetterPair: `${next}${next.toLowerCase()}`,
+            });
+            this.drawCanvas();
+        },
+
+        /** 用户在三字母分组选择器中选择了一组 */
+        onSelectTripleGroup(e: WechatMiniprogram.TouchEvent) {
+            const idx = Number(e.currentTarget.dataset.idx);
+            if (isNaN(idx) || idx === this.data.selectedTripleGroupIdx) return;
+            this.setData({ selectedTripleGroupIdx: idx });
            this.drawCanvas();
        },

@@ -253,13 +308,12 @@ createPage(
            const merged = mergeLetterTracingConfig(base, {});

            const traceMode = merged.mode;
-            const showLetterPicker =
-                traceMode === 'letter-tracing-single' ||
-                traceMode === 'letter-tracing-triple';
+            const showLetterPicker = traceMode === 'letter-tracing-single';
            const showCaseToggle =
                traceMode === 'letter-tracing-case-pairing' ||
                traceMode === 'letter-tracing-single-line';
            const showNextLetter = traceMode === 'letter-tracing-single';
+            const showTripleGroupPicker = traceMode === 'letter-tracing-triple';
            const selectedLetter = options?.preserveLetter
                ? (this.data.selectedLetter ?? 'A')
                : normalizeLetter(merged.selectedLetter ?? '');
@@ -277,10 +331,12 @@ createPage(
                    functionId: worksheetId,
                    traceMode,
                    selectedLetter,
+                    selectedLetterPair: `${selectedLetter}${selectedLetter.toLowerCase()}`,
                    letterCaseLower,
                    showLetterPicker,
                    showCaseToggle,
                    showNextLetter,
+                    showTripleGroupPicker,
                },
                () => {
                    this.initPageInfo(
@@ -15,33 +15,38 @@
            </view>
        </view>

-        <view class="lt-params">
-            <view class="lt-params-head">
-                <text class="lt-params-emoji">⚙️</text>
-                <text class="lt-params-title">参数设置</text>
-            </view>
-
-            <view class="param-block">
-                <text class="lt-field-label">练习类型</text>
-                <view class="lt-mode-seg">
-                    <view
-                        wx:for="{{modeOptions}}"
-                        wx:key="id"
-                        class="lt-mode-item {{worksheetId === item.id ? 'lt-mode-item--active' : ''}}"
-                        data-id="{{item.id}}"
-                        bindtap="onSelectMode">
-                        <text class="lt-mode-item__text">{{item.label}}</text>
-                    </view>
+        <!-- 练习类型（2列卡片网格） -->
+        <view class="lt-section">
+            <text class="lt-section-title">练习类型</text>
+            <view class="lt-mode-grid">
+                <view
+                    wx:for="{{modeOptions}}"
+                    wx:key="id"
+                    class="lt-mode-card {{worksheetId === item.id ? 'lt-mode-card--active' : ''}}"
+                    data-id="{{item.id}}"
+                    hover-class="lt-mode-card--pressed"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    bindtap="onSelectMode">
+                    <toy-icon
+                        name="moon"
+                        size="56rpx"
+                        color="{{worksheetId === item.id ? '#453900' : '#605b50'}}"
+                        custom-class="lt-mode-card__icon" />
+                    <text class="lt-mode-card__label">{{item.label}}</text>
                </view>
            </view>
+        </view>

-            <view wx:if="{{showLetterPicker}}" class="param-block">
-                <text class="lt-field-label">选择字母</text>
-                <view class="lt-letter-grid">
+        <!-- 选择字母（默认字帖模式） -->
+        <view wx:if="{{showLetterPicker}}" class="lt-section">
+            <text class="lt-section-title">选择字母</text>
+            <view class="lt-section-body">
+                <view class="lt-letter-grid" wx:if="{{!letterGridExpanded}}">
                    <view
-                        wx:for="{{letterGrid}}"
+                        wx:for="{{letterGridPreview}}"
                        wx:key="*this"
-                        class="lt-letter-cell {{selectedLetter === item ? 'lt-letter-cell--active' : ''}}"
+                        class="lt-letter-cell {{selectedLetterPair === item ? 'lt-letter-cell--active' : ''}}"
                        data-letter="{{item}}"
                        hover-class="lt-letter-cell--pressed"
                        hover-start-time="0"
@@ -50,27 +55,81 @@
                        <text class="lt-letter-text">{{item}}</text>
                    </view>
                </view>
+                <view class="lt-letter-grid" wx:if="{{letterGridExpanded}}">
+                    <view
+                        wx:for="{{letterGrid}}"
+                        wx:key="*this"
+                        class="lt-letter-cell {{selectedLetterPair === item ? 'lt-letter-cell--active' : ''}}"
+                        data-letter="{{item}}"
+                        hover-class="lt-letter-cell--pressed"
+                        hover-start-time="0"
+                        hover-stay-time="70"
+                        bind:tap="onSelectLetter">
+                        <text class="lt-letter-text">{{item}}</text>
+                    </view>
+                </view>
+                <view
+                    class="lt-expand-toggle"
+                    hover-class="lt-expand-toggle--hover"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    bind:tap="toggleLetterGrid">
+                    <text class="lt-expand-toggle__text"
+                        >{{letterGridExpanded ? '收起' : '展开全部'}}</text
+                    >
+                    <van-icon
+                        wx:if="{{letterGridExpanded}}"
+                        name="arrow-up"
+                        size="24rpx"
+                        color="#605b50"
+                        custom-class="lt-expand-toggle__icon" />
+                    <van-icon
+                        wx:else
+                        name="arrow-down"
+                        size="24rpx"
+                        color="#605b50"
+                        custom-class="lt-expand-toggle__icon" />
+                </view>
            </view>
+        </view>

-            <view wx:if="{{showCaseToggle}}" class="param-block">
-                <text class="lt-field-label">半组字母</text>
-                <view class="lt-chip-row">
-                    <view
-                        class="lt-chip {{!letterCaseLower ? 'lt-chip--active' : ''}}"
-                        hover-class="lt-chip--pressed"
-                        hover-start-time="0"
-                        hover-stay-time="70"
-                        bind:tap="onSelectCaseUpper">
-                        A–M
-                    </view>
-                    <view
-                        class="lt-chip {{letterCaseLower ? 'lt-chip--active' : ''}}"
-                        hover-class="lt-chip--pressed"
-                        hover-start-time="0"
-                        hover-stay-time="70"
-                        bind:tap="onSelectCaseLower">
-                        N–Z
-                    </view>
+        <!-- 选择字母组（大小写对照 / 13字母半表模式） -->
+        <view wx:if="{{showCaseToggle}}" class="lt-section">
+            <text class="lt-section-title">选择字母组</text>
+            <view class="lt-chip-row">
+                <view
+                    class="lt-chip {{!letterCaseLower ? 'lt-chip--active' : ''}}"
+                    hover-class="lt-chip--pressed"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    bind:tap="onSelectCaseUpper">
+                    A–M
+                </view>
+                <view
+                    class="lt-chip {{letterCaseLower ? 'lt-chip--active' : ''}}"
+                    hover-class="lt-chip--pressed"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    bind:tap="onSelectCaseLower">
+                    N–Z
+                </view>
+            </view>
+        </view>
+
+        <!-- 选择字母组（三字母精练模式） -->
+        <view wx:if="{{showTripleGroupPicker}}" class="lt-section">
+            <text class="lt-section-title">选择字母组</text>
+            <view class="lt-chip-row lt-chip-row--wrap lt-chip-row--triple">
+                <view
+                    wx:for="{{tripleGroups}}"
+                    wx:key="label"
+                    class="lt-chip lt-chip--triple {{selectedTripleGroupIdx === index ? 'lt-chip--active' : ''}}"
+                    hover-class="lt-chip--pressed"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    data-idx="{{index}}"
+                    bind:tap="onSelectTripleGroup">
+                    {{item.label}}
                </view>
            </view>
        </view>