feat: 英语描红 字母选择修改

This commit is contained in:
R524809
2026-04-20 17:25:43 +08:00
parent a7f702984d
commit 8c1d7e0657
4 changed files with 9 additions and 98 deletions
@@ -10,7 +10,6 @@
"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",
"van-icon": "@vant/weapp/icon/index"
"toy-icon": "../../toy/icon/icon"
}
}
@@ -80,12 +80,6 @@ page {
padding-left: 8rpx;
}
.lt-section-body {
display: flex;
flex-direction: column;
gap: 24rpx;
}
/* ===== 练习类型 2列卡片网格 (grid-cols-2 gap-4) ===== */
.lt-mode-grid {
display: grid;
@@ -191,40 +185,6 @@ 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;
@@ -91,8 +91,6 @@ type PageData = CanvasDataState & {
tripleGroups: { label: string; letters: string[] }[];
selectedTripleGroupIdx: number;
letterGrid: string[];
letterGridExpanded: boolean;
letterGridPreview: string[];
modeOptions: ReadonlyArray<{ id: string; label: string; desc: string }>;
};
@@ -122,8 +120,6 @@ createPage(
tripleGroups: TRIPLE_GROUPS,
selectedTripleGroupIdx: 0,
letterGrid: LETTERS_PAIRS,
letterGridExpanded: false,
letterGridPreview: LETTERS_PAIRS.slice(0, 6),
modeOptions: [...MODES],
} as unknown as PageData,
@@ -242,13 +238,6 @@ createPage(
}
},
/** 展开/收起字母网格 */
toggleLetterGrid() {
this.setData({
letterGridExpanded: !this.data.letterGridExpanded,
});
},
/** 用户在字母网格中选择了一个字母(item 为 "Aa" 格式,取首字母作为 selectedLetter */
onSelectLetter(e: WechatMiniprogram.TouchEvent) {
const raw = e.currentTarget.dataset.letter as string;
@@ -41,54 +41,17 @@
<!-- 选择字母(默认字帖模式) -->
<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-letter-grid">
<view
class="lt-expand-toggle"
hover-class="lt-expand-toggle--hover"
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="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" />
bind:tap="onSelectLetter">
<text class="lt-letter-text">{{item}}</text>
</view>
</view>
</view>