<view class="page create-page">
  <view class="page-header"><view><text class="eyebrow">IMAGE STUDIO</text><text class="page-title">创作工作台</text><text class="page-subtitle">把想法写下来，选择合适的模型，剩下的交给光栈。</text></view><text class="credit-link" bindtap="openPromptLibrary">提示词库</text></view>
  <view class="workspace-bar"><text class="bar-label">创作方式</text><view class="mode-tabs"><view wx:for="{{modes}}" wx:key="key" class="mode-tab {{mode === item.key ? 'active' : ''}}" data-mode="{{item.key}}" bindtap="switchMode"><text>{{item.label}}</text></view></view></view>
  <view wx:if="{{mode === 'batch'}}" class="batch-tip">批量改图会把同一个提示词分别提交给每张参考图，任务互不覆盖。</view>
  <view class="composer surface">
    <view class="composer-header"><view><text class="section-kicker">PROMPT</text><text class="composer-title">描述你想看到的画面</text></view><text class="library-link" bindtap="openPromptLibrary">浏览提示词库 ›</text></view>
    <textarea class="prompt-input" maxlength="2000" placeholder="主体、环境、光线、材质、镜头和画面气质..." value="{{prompt}}" bindinput="onPromptInput"></textarea>
    <view class="prompt-footer"><text class="field-hint">支持最多 2000 字，任务完成后可在作品详情中回看。</text><text class="prompt-count">{{prompt.length}} / 2000</text></view>
  </view>
  <view wx:if="{{mode !== 'text'}}" class="reference-panel surface">
    <view class="section-head"><view><text class="section-kicker">REFERENCE</text><text class="section-title">参考图片</text></view><text class="library-link" bindtap="chooseImages">从相册添加</text></view>
    <view wx:if="{{!selectedImages.length}}" class="upload-empty" bindtap="chooseImages"><text class="upload-icon">＋</text><text>选择手机相册图片</text><text class="upload-subtitle">{{mode === 'batch' ? '最多 9 张，每张分别提交任务' : '用于图生图的风格或构图参考'}}</text></view>
    <view wx:else class="image-strip"><view wx:for="{{selectedImages}}" wx:key="path" class="selected-image"><image src="{{item.path}}" mode="aspectFill" data-src="{{item.path}}" bindtap="previewImage"></image><text class="remove-image" data-index="{{index}}" bindtap="removeImage">×</text></view><view wx:if="{{mode === 'batch' && selectedImages.length < 9}}" class="add-image" bindtap="chooseImages">＋</view></view>
  </view>
  <view class="settings-panel surface">
    <view class="section-head"><view><text class="section-kicker">MODEL & OUTPUT</text><text class="section-title">生成设置</text></view><text class="protocol-tag">{{protocol === 'gemini' ? 'Gemini' : 'Images API'}}</text></view>
    <view class="field-row"><view class="field half"><text class="field-label">模型</text><picker mode="selector" range="{{models}}" range-key="label" value="{{modelIndex}}" bindchange="onModelChange"><view class="picker-value">{{model.label}}<text class="picker-arrow">⌄</text></view></picker></view><view wx:if="{{protocol === 'images'}}" class="field half"><text class="field-label">分辨率</text><picker mode="selector" range="{{resolutionOptions}}" range-key="label" value="{{resolutionIndex}}" bindchange="onResolutionChange"><view class="picker-value">{{resolutionOptions[resolutionIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view><view wx:else class="field half"><text class="field-label">画幅</text><picker mode="selector" range="{{ratioOptions}}" range-key="label" value="{{ratioIndex}}" bindchange="onRatioChange"><view class="picker-value">{{ratioOptions[ratioIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view></view>
    <view wx:if="{{protocol === 'images'}}" class="field-row"><view class="field half"><text class="field-label">画幅</text><picker mode="selector" range="{{ratioOptions}}" range-key="label" value="{{ratioIndex}}" bindchange="onRatioChange"><view class="picker-value">{{ratioOptions[ratioIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view><view class="field half"><text class="field-label">实际尺寸</text><view class="picker-value mapped-size">{{mappedSize}}</view></view></view>
    <view wx:if="{{protocol === 'images'}}" class="field-row"><view class="field half"><text class="field-label">质量</text><picker mode="selector" range="{{qualityOptions}}" range-key="label" value="{{qualityIndex}}" bindchange="onQualityChange"><view class="picker-value">{{qualityOptions[qualityIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view><view class="field half"><text class="field-label">背景</text><picker mode="selector" range="{{backgroundOptions}}" range-key="label" value="{{backgroundIndex}}" bindchange="onBackgroundChange"><view class="picker-value">{{backgroundOptions[backgroundIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view></view>
    <view wx:if="{{protocol === 'images'}}" class="field-row"><view class="field half"><text class="field-label">输出格式</text><picker mode="selector" range="{{outputFormatOptions}}" range-key="label" value="{{outputFormatIndex}}" bindchange="onOutputFormatChange"><view class="picker-value">{{outputFormatOptions[outputFormatIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view><view class="field half"><text class="field-label">返回格式</text><picker mode="selector" range="{{responseFormatOptions}}" range-key="label" value="{{responseFormatIndex}}" bindchange="onResponseFormatChange"><view class="picker-value">{{responseFormatOptions[responseFormatIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view></view>
    <view wx:if="{{protocol === 'gemini'}}" class="field"><text class="field-label">分辨率</text><picker mode="selector" range="{{resolutionOptions}}" range-key="label" value="{{resolutionIndex}}" bindchange="onResolutionChange"><view class="picker-value">{{resolutionOptions[resolutionIndex].label}}<text class="picker-arrow">⌄</text></view></picker></view>
    <view class="model-note"><text class="model-note-title">{{model.label}}</text><text>{{model.description}}</text></view>
  </view>
  <view wx:if="{{message}}" class="form-message">{{message}}</view>
  <button class="primary-button submit-button" disabled="{{submitting}}" bindtap="submit"><text>{{submitting ? '正在提交任务...' : mode === 'batch' ? '提交批量任务' : '开始生成'}}</text><text wx:if="{{!submitting}}" class="button-arrow">↗</text></button>
</view>
