R524809
89 lines
2.9 KiB
Plaintext
89 lines
2.9 KiB
Plaintext
<!--index.wxml-->
|
||
<view class="container">
|
||
<!-- 上部：输入区域 -->
|
||
<view class="input-section">
|
||
<view class="input-row">
|
||
<input
|
||
class="word-input"
|
||
placeholder="请输入汉字（支持多个汉字）"
|
||
value="{{inputWord}}"
|
||
bindinput="onInputChange"
|
||
maxlength="20" />
|
||
<button class="generate-btn" bindtap="onGenerateClick">生成</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已选择的汉字列表 -->
|
||
<view class="selected-section" wx:if="{{wordList.length > 0}}">
|
||
<view class="section-header">
|
||
<text class="section-title"
|
||
>已选择的汉字 ({{wordList.length}})</text
|
||
>
|
||
<button class="clear-btn" bindtap="onClearAll" size="mini">
|
||
清空
|
||
</button>
|
||
</view>
|
||
<view class="word-list">
|
||
<view
|
||
class="word-item selected"
|
||
wx:for="{{wordList}}"
|
||
wx:key="*this"
|
||
wx:for-item="word"
|
||
wx:for-index="index">
|
||
<text class="word-text">{{word}}</text>
|
||
<text
|
||
class="remove-btn"
|
||
bindtap="onRemoveWord"
|
||
data-index="{{index}}"
|
||
>×</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下部：可选汉字区域 -->
|
||
<view class="available-section">
|
||
<view class="section-header">
|
||
<text class="section-title"
|
||
>可选汉字 ({{availableWords.length}})</text
|
||
>
|
||
</view>
|
||
<view class="word-grid">
|
||
<view
|
||
class="word-item available {{wordList.includes(word) ? 'disabled' : ''}}"
|
||
wx:for="{{availableWords}}"
|
||
wx:key="*this"
|
||
wx:for-item="word"
|
||
bindtap="onWordSelect"
|
||
data-word="{{word}}">
|
||
<text class="word-text">{{word}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预览：田字格 -->
|
||
<view class="preview-section">
|
||
<text class="section-title">预览练字田字格</text>
|
||
<view wx:if="{{rowHeaderWords.length > 0}}" class="tianzige">
|
||
<view
|
||
class="tzg-row"
|
||
wx:for="{{rowsArray}}"
|
||
wx:for-index="rowIndex"
|
||
wx:key="rowIndex">
|
||
<view
|
||
class="tzg-cell"
|
||
wx:for="{{colsArray}}"
|
||
wx:for-index="colIndex"
|
||
wx:key="{{rowIndex}}-{{colIndex}}">
|
||
<text wx:if="{{colIndex === 0}}" class="tzg-word"
|
||
>{{rowHeaderWords[rowIndex]}}</text
|
||
>
|
||
<view class="mid-line h"></view>
|
||
<view class="mid-line v"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view wx:else class="empty-tip">请选择或输入汉字后生成田字格</view>
|
||
</view>
|