Mycontent/miniprogram/pages/super-article-editor/super-article-editor.wxml

<view class="page">

  <!-- 顶部导航 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-back" bindtap="goBack">
      <icon name="chevron-left" size="44" color="rgba(255,255,255,0.85)"></icon>
    </view>
    <text class="nav-title">{{step === 'preview' || step === 'publishing' ? '预览 & 发布' : 'AI 写文章'}}</text>
    <view class="nav-placeholder"></view>
  </view>
  <view style="height: {{statusBarHeight + 44}}px;"></view>

  <!-- ═══════════════════════════════════════════
       STEP 1：输入阶段（input / generating）
       ═══════════════════════════════════════════ -->
  <block wx:if="{{step === 'input' || step === 'generating'}}">

    <!-- 图片上传区 -->
    <view class="section">
      <view class="section-header">
        <text class="section-icon">📷</text>
        <text class="section-title">添加图片</text>
        <text class="section-sub">选填，最多3张，AI 可理解图片内容</text>
      </view>
      <view class="img-grid">
        <view wx:for="{{images}}" wx:key="index" class="img-cell {{item.error ? 'img-cell--error' : ''}}">
          <image src="{{item.url || item.tempPath}}" class="img-thumb" mode="aspectFill"/>
          <!-- 上传中遮罩 -->
          <view wx:if="{{item.uploading}}" class="img-overlay">
            <view class="img-spin"></view>
          </view>
          <!-- 错误提示 -->
          <view wx:if="{{item.error && !item.uploading}}" class="img-overlay img-overlay--err">
            <text class="img-err-txt">上传失败</text>
          </view>
          <!-- 删除按钮 -->
          <view wx:if="{{!item.uploading}}" class="img-del" bindtap="removeImage" data-index="{{index}}">×</view>
        </view>

        <!-- 添加按钮 -->
        <view wx:if="{{images.length < 3}}" class="img-add" bindtap="chooseImages">
          <text class="img-add-icon">+</text>
          <text class="img-add-label">拍照/相册</text>
        </view>
      </view>
    </view>

    <!-- 描述输入 -->
    <view class="section">
      <view class="section-header">
        <text class="section-icon">✏️</text>
        <text class="section-title">用几句话描述你想写什么</text>
      </view>
      <view class="desc-wrap">
        <textarea
          class="desc-textarea"
          maxlength="200"
          placeholder="例如：我有个朋友做了一件很小的事，结果客户留存率提升了30%，让我想到了..."
          placeholder-class="desc-placeholder"
          value="{{description}}"
          bindinput="onDescInput"
          auto-height
          disabled="{{step === 'generating'}}"
        />
        <text class="char-count">{{description.length}}/200</text>
      </view>
    </view>

    <!-- 生成错误提示 -->
    <view wx:if="{{genError}}" class="error-tip">⚠️ {{genError}}</view>

    <!-- AI 生成按钮 / 加载状态 -->
    <view class="ai-btn-wrap">
      <view wx:if="{{step !== 'generating'}}" class="ai-btn" bindtap="generateArticle">
        <text class="ai-btn-icon">✦</text>
        <text class="ai-btn-text">AI 一键生成文章</text>
      </view>

      <!-- 生成中 loading 状态 -->
      <view wx:else class="ai-loading-card">
        <view class="ai-loading-stars">
          <text class="star star1">✦</text>
          <text class="star star2">✦</text>
          <text class="star star3">✦</text>
        </view>
        <text class="ai-loading-title">AI 正在创作中</text>
        <text class="ai-loading-desc">根据你的描述生成专属内容，请稍候...</text>
        <view class="ai-loading-bar">
          <view class="ai-loading-bar-fill"></view>
        </view>
      </view>
    </view>

  </block>

  <!-- ═══════════════════════════════════════════
       STEP 2：预览 & 编辑（preview / publishing）
       ═══════════════════════════════════════════ -->
  <block wx:elif="{{step === 'preview' || step === 'publishing'}}">

    <!-- 标题编辑 -->
    <view class="section">
      <view class="field-header">
        <text class="field-label">标题</text>
        <text class="char-count">{{title.length}}/40</text>
      </view>
      <view class="input-wrap">
        <input
          class="input"
          maxlength="40"
          placeholder="文章标题"
          value="{{title}}"
          bindinput="onTitleInput"
          disabled="{{step === 'publishing'}}"
        />
      </view>
    </view>

    <!-- 工具栏 -->
    <view class="toolbar">
      <view class="tool-btn" bindtap="insertMentionSelf">@自己</view>
      <view class="tool-btn" bindtap="insertHashLink">#超链接</view>
    </view>

    <!-- 正文编辑 -->
    <view class="section section--content">
      <view class="field-header">
        <text class="field-label">正文</text>
        <text class="char-count">{{content.length}}/5000</text>
      </view>
      <view class="textarea-wrap">
        <textarea
          class="textarea"
          maxlength="5000"
          placeholder="正文内容..."
          value="{{content}}"
          bindinput="onContentInput"
          auto-height
          disabled="{{step === 'publishing'}}"
        />
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="action-secondary" bindtap="backToInput" wx:if="{{step !== 'publishing'}}">
        <text>↺ 重新生成</text>
      </view>
      <view class="action-primary {{step === 'publishing' ? 'action-primary--loading' : ''}}" bindtap="submitArticle">
        <text>{{step === 'publishing' ? '发布中...' : '发布文章'}}</text>
      </view>
    </view>

  </block>

</view>