english_learned_master/pages/article_generator/article_generator.wxml

<view class="container FlexColumn" style='min-height:{{Containnerheight}}rpx;'>

  <view style="height: 30rpx;"></view>
  <!-- 单词选择区域 -->
  <view class="section">
    <view class="section-title">需要生成的单词</view>
    <view class="word-list">
      <view 
        wx:for="{{wordList}}" 
        wx:key="*this" 
        class="word-item"
        data-word="{{item}}">
        {{item}}
      </view>
    </view>
  </view>

  <!-- 难度选择区域 -->
  <view class="section">
    <view class="section-title">选择难度</view>
    <radio-group class="difficulty-group" bindchange="onDifficultyChange">
      <label class="difficulty-item" wx:for="{{difficulties}}" wx:key="value">
        <radio value="{{item.Level}}" checked="{{difficulty === item.Level}}"/>
        <text>{{item.Name}}</text>
      </label>
    </radio-group>
  </view>

  <!-- 文章类型选择区域 -->
  <view class="section">
    <view class="section-title">选择文章类型</view>
    <radio-group class="two-column-layout" bindchange="onArticleStyleChange">
      <block wx:for="{{articleStyles}}" wx:key="index" wx:for-item="category">
        <view class="style-category">{{category.Name}}</view>
        <view class="style-options-container">
          <label class="style-option" 
            wx:for="{{category.List}}" 
            wx:key="Name"
            wx:for-item="style">
            <radio value="{{style.Name}}" checked="{{articleStyle === style.Name}}"/>
            <text>{{style.Name}}</text>
          </label>
        </view>
      </block>
    </radio-group>
  </view>

  <!-- 生成按钮 -->
  <view class="section">
    <button 
      class="generate-btn" 
      type="primary" 
      bindtap="generateArticle"
      loading="{{generating}}">
      生成文章
    </button>

    <button 
      class="generate-btn" 
      type="primary" 
      bindtap="generateTestArticle">
      测试文章（非AI生成)
    </button>
  </view>

  <!-- 生成的文章区域 -->
  <block wx:if="{{Content}}">
    <view class="section" bind:tap="showTranslate">
      <view class="section-title">生成的文章和阅读理解习题</view>
      <view class="section-title1">点击文章可查看答案和逐句翻译</view>
      <rich-text class="article-content" hidden="{{IsShowTranslate}}" nodes="{{Content.ArticleEnglishStr}}"></rich-text>
      <view class="article-content FlexColumn" hidden="{{!IsShowTranslate}}">
        <view wx:for="{{Content.ArticleEnglish}}" wx:key="index" class="translation-item">
          <rich-text class="article-content1" nodes="{{item}}"></rich-text>
          <view class="article-content2">{{Content.ArticleChinese[index]}}</view>
        </view>
      </view>
      <view class="Question FlexColumn" wx:for="{{Content.Question}}" wx:key="index">
        <text class="Question1">({{index+1}}) {{item.QuestionEnglish}}\r\n<text class="article-content2" wx:if="{{IsShowTranslate}}">{{item.QuestionChinese}}</text></text>
        <text class="Options" wx:for="{{item.OptionsEnglish}}" wx:for-item="item2" wx:for-index="index2" wx:key="*this">
          <text wx:if="{{!IsShowTranslate || !((item.Answer=='A' && index2==0) || (item.Answer=='B' && index2==1) || (item.Answer=='C' && index2==2) || (item.Answer=='D' && index2==3))}}">{{item2}}</text><text class="AnswerSelected" wx:if="{{((item.Answer=='A' && index2==0) || (item.Answer=='B' && index2==1) || (item.Answer=='C' && index2==2) || (item.Answer=='D' && index2==3)) && IsShowTranslate}}">{{item2}}</text>
          <text class="article-content2" wx:if="{{IsShowTranslate}}">{{item.OptionsChinese[index2]}}</text>
        </text>
      </view>
    </view>
    <view class="section" wx:if="{{IsShowTranslate}}">
      <view class="Answer FlexRow">
        答案：<view class="Answer1" wx:for="{{Content.Question}}" wx:key="index">({{index+1}}) {{item.Answer}}</view>
      </view>
    </view>
    <!-- 生成图片和PDF按钮 -->
    <view class="section" wx:if="{{Content}}">
      <view class="button-group">
        <button 
          class="generate-image-btn" 
          bindtap="generatePDF"
          loading="{{generatingPDF}}">
          生成PDF文件
        </button>
      </view>
    </view>
  </block>

  <!-- 用于生成图片的canvas，默认隐藏 -->
  <canvas type="2d" id="articleCanvas" class="article-canvas" style="width: 595px; height: 842px;"></canvas>
  <view style="height: 100rpx;"></view>
</view>