doodle-mini/miniprogram/englishPages/letterTracing/letterTracing.wxml

<nav-bar title="英语字母描红" />

<view class="lt-page">
    <view class="lt-main">
        <view class="lt-preview-wrap">
            <view class="lt-preview-card">
                <text class="lt-preview-kicker">打印预览</text>
                <view id="canvasWrapper" class="lt-canvas-wrap">
                    <canvas
                        type="2d"
                        id="canvasContent"
                        class="lt-canvas"
                        style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
                </view>
            </view>
        </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="lt-section">
            <text class="lt-section-title">选择字母</text>
            <view class="lt-section-body">
                <view class="lt-letter-grid" wx:if="{{!letterGridExpanded}}">
                    <view
                        wx:for="{{letterGridPreview}}"
                        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-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>

        <!-- 选择字母组（大小写对照 / 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>

        <view
            wx:if="{{showNextLetter}}"
            class="lt-shuffle-btn"
            hover-class="lt-shuffle-btn--hover"
            hover-start-time="0"
            hover-stay-time="70"
            bindtap="onNextLetter">
            <toy-icon
                name="refresh"
                size="40rpx"
                color="#605b50"
                custom-class="lt-shuffle-btn__icon" />
            <text class="lt-shuffle-btn__text">换一批</text>
        </view>
        <draw-ad type="mathDraw"></draw-ad>
    </view>
</view>

<preview-footer-actions
    disabled="{{!hasContent}}"
    bind:primary="exportToPrint"
    bind:secondary="onShare" />

<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />