<template>
  <view class="ai-generate-container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont icon-fanhui"></text>
      </view>
      <view class="nav-title">图片生成</view>
      <view class="nav-right" @click="goToHistory">
        <text class="iconfont icon-lishi"></text>
      </view>
    </view>
    
    <scroll-view scroll-y class="main-content" :style="{ height: scrollViewHeight }">
      <!-- 参考图模块 -->
      <view class="section reference-section">

        <view class="reference-images">
          <!-- 已上传的参考图 -->
          <view 
            v-for="(img, index) in referenceImages" 
            :key="index" 
            class="reference-item"
          >
            <image :src="img" mode="aspectFill" class="ref-image"></image>
            <view class="ref-delete" @click="removeReference(index)">
              <text class="iconfont icon-guanbi"></text>
            </view>
            <view class="ref-tag">智能参考</view>
          </view>
          
          <!-- 添加按钮 -->
          <view 
            v-if="referenceImages.length < 3" 
            class="reference-add" 
            @click="addReference"
          >
            <text class="add-icon">+</text>
            <text class="add-text">上传参考图</text>
          </view>
        </view>
      </view>

      <!-- 提示词输入模块 -->
      <view class="section prompt-section">
        <view class="prompt-input-wrapper">
          <textarea 
            v-model="promptText" 
            class="prompt-input"
            placeholder="输入想要生成的图片描述，如：做一张618大促海报"
            :maxlength="800"
            :auto-height="true"
            @input="onPromptInput"
          ></textarea>
          
          <!-- 语音输入按钮 -->
          <view class="voice-btn" @click="startVoiceInput" v-if="!isRecording">
            <text class="iconfont icon-laba"></text>
          </view>
          <view class="voice-btn recording" @click="stopVoiceInput" v-else>
            <view class="recording-animation"></view>
            <text class="recording-time">{{ recordDuration }}s</text>
          </view>
        </view>
        
        <!-- 录音提示 -->
        <view class="recording-hint" v-if="isRecording">
          <text class="hint-icon">🎤</text>
          <text class="hint-text">正在录音，点击右下角完成</text>
        </view>

        <!-- 提示词建议 -->
        <view class="prompt-suggestions" v-if="showSuggestions">
          <view 
            v-for="(item, index) in suggestions" 
            :key="index" 
            class="suggestion-item"
            @click="applySuggestion(item)"
          >
            <text class="suggestion-text">{{ item }}</text>
          </view>
      </view>
    </view>

    <!-- 生成类型切换 -->
    <view class="section type-section">
      <view class="type-tabs">
        <view class="type-tab active">
          <text class="tab-text">图片生成</text>
        </view>
        <view class="type-tab" @click="goToVideoGenerate">
          <text class="tab-text">视频生成</text>
        </view>
      </view>
    </view>

    <!-- 配置选项 -->
    <view class="section config-section">
        <!-- 生成比例选择 -->
        <view class="ratio-section">
          <view class="ratio-header" @click="showRatioList = !showRatioList">
            <view class="ratio-title-wrapper">
              <text class="ratio-title">生成比例</text>
              <text class="ratio-current" v-if="!showRatioList">{{ selectedRatio }}</text>
            </view>
            <text class="iconfont" :class="showRatioList ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
          </view>
          
          <view class="ratio-content" v-if="showRatioList">
            <view class="ratio-list">
              <view 
                v-for="(ratio, index) in ratios" 
                :key="index"
                :class="['ratio-item', selectedRatio === ratio.value ? 'active' : '']"
                @click="selectRatio(ratio.value)"
              >
                <view class="ratio-box" :style="{ aspectRatio: ratio.aspect }"></view>
                <text class="ratio-text">{{ ratio.value }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 联想词助手开关 -->
        <view class="config-item assistant-item">
          <view class="assistant-info">
            <text class="assistant-title">联想词助手</text>
            <text class="assistant-desc">AI智能补充和优化提示词</text>
          </view>
          <switch 
            :checked="enableAssistant" 
            @change="toggleAssistant"
            color="#42ca4d"
          />
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

    <!-- AI生成内容标识 -->
    <view class="ai-notice">
      <text class="ai-notice-text">内容由AI生成，结果仅供参考</text>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <button class="generate-btn" @click="handleGenerate">
        <text class="btn-text">一键生成</text>
        <!-- <text class="btn-count">{{ generateCount }}/张</text> -->
      </button>
      
      <button class="gallery-btn" @click="goToGallery">
        <text class="iconfont icon-tupian"></text>
        <text class="btn-text">我的创作</text>
      </button>
    </view>

  </view>
</template>

<script>
import api from '@/api/models-api.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      scrollViewHeight: '100vh',
      
      // 参考图
      referenceImages: [],
      
      // 提示词
      promptText: '',
      showSuggestions: false,
      suggestions: [
        '618大促海报',
        '会员礼包banner',
        '新品上市宣传图',
        '优惠券设计'
      ],
      
      // 语音输入
      isRecording: false,
      recorderManager: null,
      recordDuration: 0,
      recordTimer: null,
      
      // 模型选择
      selectedModel: '4.0',
      showModelPicker: false,
      models: [
        {
          name: '4.0',
          value: '4.0',
          icon: '/static/images/model-4.0.png',
          desc: '最新模型，图片质量最高，速度适中',
          badge: 'New'
        },
        {
          name: '3.1',
          value: '3.1',
          icon: '/static/images/model-3.1.png',
          desc: '平衡模型，质量与速度兼顾'
        },
        {
          name: '3.0',
          value: '3.0',
          icon: '/static/images/model-3.0.png',
          desc: '稳定版本，生成速度快'
        },
        {
          name: '2.1',
          value: '2.1',
          icon: '/static/images/model-2.1.png',
          desc: '轻量模型，快速生成'
        },
        {
          name: '2.0 PRO',
          value: '2.0',
          icon: '/static/images/model-2.0.png',
          desc: '专业版，细节丰富'
        }
      ],
      
      // 生成比例
      selectedRatio: '9:16',
      ratios: [
        { value: '9:16', aspect: '9/16', label: '竖屏' },
        { value: '3:4', aspect: '3/4', label: '竖屏' },
        { value: '2:3', aspect: '2/3', label: '竖屏' },
        { value: '1:1', aspect: '1/1', label: '方形' },
        { value: '3:2', aspect: '3/2', label: '横屏' }
      ],
      showRatioList: false, // 比例列表展开状态
      
      // 图片质量
      selectedQuality: '2K',
      qualities: [
        { value: '2K', label: '2K' },
        { value: '4K', label: '4K' }
      ],
      
      // 联想词助手
      enableAssistant: true,
      
      // 生成类型
      generateType: 'image',
      generateCount: 4,
      sourceArticleId: ''
    };
  },
  
  onLoad(options) {
    this.initPage();
    if (options && options.description) {
      this.promptText = decodeURIComponent(options.description);
    }
    if (options && options.articleId) {
      this.sourceArticleId = options.articleId;
    }
    // 接收参考图片参数
    if (options && options.referenceImage) {
      const refImage = decodeURIComponent(options.referenceImage);
      this.referenceImages = [refImage];
    }
  },
  
  onUnload() {
    // 清理录音计时器
    this.stopRecordTimer();
    
    // 如果正在录音，停止录音
    if (this.isRecording && this.recorderManager) {
      this.recorderManager.stop();
    }
  },
  
  methods: {
    initPage() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
      
      // 计算滚动区域高度
      const navHeight = 44;
      const footerHeight = 120;
      this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight + footerHeight}px)`;
      
      // 初始化录音管理器
      this.initRecorder();
    },
    
    // 初始化录音管理器
    initRecorder() {
      // #ifdef MP-WEIXIN || APP-PLUS
      this.recorderManager = uni.getRecorderManager();
      
      // 录音开始事件
      this.recorderManager.onStart(() => {
        console.log('录音开始');
        this.recordDuration = 0;
        this.startRecordTimer();
      });
      
      // 录音结束事件
      this.recorderManager.onStop((res) => {
        console.log('录音结束', res);
        this.stopRecordTimer();
        
        if (res.duration < 1000) {
          uni.showToast({
            title: '录音时间太短',
            icon: 'none'
          });
          return;
        }
        
        // 处理录音结果
        this.handleRecordResult(res);
      });
      
      // 录音错误事件
      this.recorderManager.onError((err) => {
        console.error('录音错误:', err);
        this.isRecording = false;
        this.stopRecordTimer();
        uni.showToast({
          title: '录音失败，请重试',
          icon: 'none'
        });
      });
      // #endif
      
      // #ifdef H5
      // H5 环境提示
      console.log('H5环境暂不支持录音功能');
      // #endif
    },
    
    // 开始录音计时
    startRecordTimer() {
      this.recordTimer = setInterval(() => {
        this.recordDuration++;
        if (this.recordDuration >= 60) {
          // 录音超过60秒自动停止
          this.stopVoiceInput();
        }
      }, 1000);
    },
    
    // 停止录音计时
    stopRecordTimer() {
      if (this.recordTimer) {
        clearInterval(this.recordTimer);
        this.recordTimer = null;
      }
      this.recordDuration = 0;
    },
    
    // 返回
    goBack() {
      uni.navigateBack();
    },
    
    // 查看历史
    goToHistory() {
      uni.navigateTo({
        url: '/pages/ai-generate/history'
      });
    },
    
    // 跳转到我的图库
    goToGallery() {
      uni.navigateTo({
        url: '/pages/ai-generate/history'
      });
    },
    
    // 跳转到视频生成
    goToVideoGenerate() {
      uni.navigateTo({
        url: '/pages/ai-generate/oneclick'
      });
    },
    
    // 添加参考图
    async addReference() {
      if (this.referenceImages.length >= 3) {
        uni.showToast({
          title: '最多添加3张参考图',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 选择图片
        const res = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 3 - this.referenceImages.length,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          });
        });
        
        // 批量上传图片
        const uploadPromises = res.tempFilePaths.map(async (filePath, index) => {
          try {
            uni.showLoading({ 
              title: `上传中 ${index + 1}/${res.tempFilePaths.length}...`, 
              mask: true 
            });
            
            const uploadResult = await api.uploadFile(filePath, {
              model: 'user',
              pid: '7'
            });
            
            if (uploadResult && uploadResult.code === 200) {
              console.log('图片上传成功:', uploadResult.data);
              return uploadResult.data.fullUrl;
            } else {
              throw new Error(uploadResult?.message || '上传失败');
            }
          } catch (error) {
            console.error('图片上传失败:', error);
            throw error;
          }
        });
        
        // 等待所有图片上传完成
        const uploadedUrls = await Promise.all(uploadPromises);
        
        uni.hideLoading();
        
        // 添加到参考图列表
        this.referenceImages.push(...uploadedUrls);
        
        uni.showToast({
          title: `成功添加${uploadedUrls.length}张图片`,
          icon: 'success',
          duration: 2000
        });
        
      } catch (error) {
        uni.hideLoading();
        console.error('图片选择或上传失败:', error);
        
        let errorMsg = '图片上传失败';
        if (error.errMsg && error.errMsg.includes('cancel')) {
          // 用户取消选择，不显示错误提示
          return;
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        uni.showToast({
          title: errorMsg,
          icon: 'none',
          duration: 3000
        });
      }
    },
    
    // 移除参考图
    removeReference(index) {
      this.referenceImages.splice(index, 1);
    },
    
    // 提示词输入
    onPromptInput(e) {
      this.promptText = e.detail.value;
      // 显示建议（简化逻辑）
      this.showSuggestions = this.promptText.length > 0 && this.promptText.length < 10;
    },
    
    // 应用建议
    applySuggestion(text) {
      this.promptText = text;
      this.showSuggestions = false;
    },
    
    // 开始语音输入
    startVoiceInput() {
      // #ifdef H5
      uni.showModal({
        title: '提示',
        content: 'H5环境暂不支持语音输入，请使用小程序或APP',
        showCancel: false
      });
      return;
      // #endif
      
      // #ifdef MP-WEIXIN || APP-PLUS
      if (!this.recorderManager) {
        uni.showToast({
          title: '录音功能初始化失败',
          icon: 'none'
        });
        return;
      }
      
      // 检查录音权限
      uni.authorize({
        scope: 'scope.record',
        success: () => {
          this.startRecording();
        },
        fail: () => {
          uni.showModal({
            title: '需要录音权限',
            content: '请在设置中开启录音权限',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting();
              }
            }
          });
        }
      });
      // #endif
    },
    
    // 开始录音
    startRecording() {
      this.isRecording = true;
      
      uni.showToast({
        title: '开始录音',
        icon: 'none',
        duration: 1000
      });
      
      // 开始录音
      this.recorderManager.start({
        duration: 60000, // 最长录音60秒
        sampleRate: 16000,
        numberOfChannels: 1,
        encodeBitRate: 96000,
        format: 'mp3'
      });
    },
    
    // 停止语音输入
    stopVoiceInput() {
      if (!this.isRecording) {
        return;
      }
      
      this.isRecording = false;
      
      // #ifdef MP-WEIXIN || APP-PLUS
      if (this.recorderManager) {
        this.recorderManager.stop();
      }
      // #endif
      
      uni.showToast({
        title: '正在识别...',
        icon: 'loading',
        duration: 2000
      });
    },
    
    // 处理录音结果
    async handleRecordResult(res) {
      console.log('录音文件路径:', res.tempFilePath);
      console.log('录音时长:', res.duration, 'ms');
      
      try {
        // 这里可以调用语音识别API
        // 示例：将录音文件上传到服务器进行识别
        const recognizedText = await this.recognizeSpeech(res.tempFilePath);
        
        if (recognizedText) {
          // 将识别结果添加到提示词中
          if (this.promptText) {
            this.promptText += ' ' + recognizedText;
          } else {
            this.promptText = recognizedText;
          }
          
          uni.showToast({
            title: '识别成功',
            icon: 'success',
            duration: 1500
          });
        }
      } catch (error) {
        console.error('语音识别失败:', error);
        uni.showToast({
          title: '识别失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    
    // 语音识别（对接腾讯云语音识别服务）
    async recognizeSpeech(audioPath) {
      try {
        // 1. 上传录音文件到服务器
        console.log('开始上传录音文件:', audioPath);
        const uploadRes = await api.uploadFile(audioPath, {
          model: 'audio',
          pid: '8'
        });
        
        if (!uploadRes || uploadRes.code !== 200) {
          throw new Error('录音文件上传失败');
        }
        
        const audioUrl = uploadRes.data.fullUrl;
        console.log('录音文件上传成功，URL:', audioUrl);
        
        // 2. 创建语音识别任务
        console.log('创建语音识别任务...');
        const createTaskRes = await api.createAsrTask({
          url: audioUrl,
          engineModelType: '16k_zh',
          channelNum: 1,
          resTextFormat: 0,
          sourceType: 0
        });
        
        if (!createTaskRes || createTaskRes.code !== 200) {
          throw new Error('创建识别任务失败');
        }
        
        const taskId = createTaskRes.data.taskId;
        console.log('识别任务创建成功，任务ID:', taskId);
        
        // 3. 轮询查询识别结果
        const result = await this.pollAsrResult(taskId);
        
        // 4. 解析识别文本
        const text = this.parseAsrResult(result);
        
        if (!text) {
          throw new Error('识别结果为空');
        }
        
        console.log('语音识别成功，结果:', text);
        return text;
        
      } catch (error) {
        console.error('语音识别失败:', error);
        throw error;
      }
    },
    
    // 轮询查询ASR识别结果
    async pollAsrResult(taskId, maxAttempts = 30, interval = 2000) {
      let attempts = 0;
      
      while (attempts < maxAttempts) {
        attempts++;
        console.log(`查询识别状态，第${attempts}次尝试...`);
        
        try {
          const statusRes = await api.queryAsrStatus(taskId);
          
          if (!statusRes || statusRes.code !== 200) {
            throw new Error('查询识别状态失败');
          }
          
          const status = statusRes.data.status;
          const statusStr = statusRes.data.statusStr;
          
          console.log(`任务状态: ${statusStr} (${status})`);
          
          // status: 0-等待处理, 1-处理中, 2-识别成功, 3-识别失败
          if (status === 2) {
            // 识别成功
            console.log('识别成功！');
            return statusRes.data;
          } else if (status === 3) {
            // 识别失败
            throw new Error(statusRes.data.errorMsg || '识别失败');
          }
          
          // 等待一段时间后继续查询
          await new Promise(resolve => setTimeout(resolve, interval));
          
        } catch (error) {
          console.error('查询识别状态出错:', error);
          
          // 如果不是最后一次尝试，继续重试
          if (attempts < maxAttempts) {
            await new Promise(resolve => setTimeout(resolve, interval));
            continue;
          }
          
          throw error;
        }
      }
      
      throw new Error('识别超时，请重试');
    },
    
    // 解析ASR识别结果文本
    parseAsrResult(data) {
      if (!data || !data.result) {
        return '';
      }
      
      let text = data.result;
      
      // 去除时间戳标记，例如：[0:0.000,0:11.580]
      text = text.replace(/\[\d+:\d+\.\d+,\d+:\d+\.\d+\]\s*/g, '');
      
      // 去除多余的空格和换行
      text = text.replace(/\n+/g, ' ').trim();
      
      // 去除多余的空格
      text = text.replace(/\s+/g, ' ');
      
      return text;
    },
    
    // 选择模型
    selectModel(value) {
      this.selectedModel = value;
    },
    
    // 从选择器选择模型
    selectModelFromPicker(value) {
      this.selectedModel = value;
      this.showModelPicker = false;
    },
    
    // 选择比例
    selectRatio(value) {
      this.selectedRatio = value;
    },
    
    // 选择质量
    selectQuality(value) {
      this.selectedQuality = value;
    },
    
    // 切换联想词助手
    toggleAssistant(e) {
      this.enableAssistant = e.detail.value;
    },
    
    // 生成图片
    async handleGenerate() {
      // 验证
      if (!this.promptText.trim()) {
        uni.showToast({
          title: '请输入生成描述',
          icon: 'none'
        });
        return;
      }
      
      // 验证是否有参考图
      if (this.referenceImages.length === 0) {
        uni.showToast({
          title: '请至少添加一张参考图',
          icon: 'none'
        });
        return;
      }
      
      try {
        uni.showLoading({
          title: '生成中...'
        });
        
        // 调用图片编辑API
        const response = await api.createImageEditTask({
          prompt: this.promptText,
          image_urls: this.referenceImages,
          output_format: 'png',
          image_size: this.selectedRatio,
          title: this.promptText
        });
        
        console.log('图片编辑任务创建成功:', response);
        
        uni.hideLoading();
        
        // 跳转到结果页，携带生成参数
        const params = {
          promptText: encodeURIComponent(this.promptText),
          ratio: this.selectedRatio,
          model: this.selectedModel,
          referenceImages: encodeURIComponent(JSON.stringify(this.referenceImages)),
          generate: 'true'
        };
        
        const queryString = Object.keys(params)
          .map(key => `${key}=${params[key]}`)
          .join('&');
        
        uni.navigateTo({
          url: `/pages/ai-generate/result?${queryString}`,
          success: () => {
            uni.showToast({
              title: '任务已提交',
              icon: 'success'
            });
          }
        });
        
      } catch (error) {
        console.error('图片编辑任务创建失败:', error);
        uni.hideLoading();
        uni.showToast({
          title: error.message || '生成失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ai-generate-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

// 顶部导航
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  
  .nav-left,
  .nav-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 20px;
      color: #ffffff;
    }
  }
  
  .nav-title {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
  }
}

// AI生成内容标识
.ai-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: -8px 16px 1px 16px;
  background: rgba(66, 202, 77, 0.1);
  border: 1px solid rgba(66, 202, 77, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  
  .ai-notice-icon {
    font-size: 16px;
  }
  
  .ai-notice-text {
    font-size: 12px;
    color: #42ca4d;
    line-height: 1.4;
  }
}

// 主内容区
.main-content {
    padding: 0 16px; width:92%
}

// 区块样式
.section {
  margin-bottom: 20px; margin-top: 10rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
    
    .section-tip {
      font-size: 12px;
      color: #8f9bb3; margin-right: 20rpx;
    }
  }
}

// 参考图模块
.reference-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
  .reference-item {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    
    .ref-image {
      width: 100%;
      height: 100%;
    }
    
    .ref-delete {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 20px;
      height: 20px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 12px;
        color: #ffffff;
      }
    }
    
    .ref-tag {
      position: absolute;
      bottom: 4px;
      left: 4px;
      padding: 2px 6px;
      background: rgba(0, 214, 178, 0.9);
      border-radius: 4px;
      font-size: 10px;
      color: #ffffff;
    }
  }
  
  .reference-add {
    width: 100px;
    height: 100px;
    border: 2px dashed #3d4458;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(61, 68, 88, 0.2);
    
    .add-icon {
      font-size: 32px;
      color: #8f9bb3;
      margin-bottom: 4px;
    }
    
    .add-text {
      font-size: 12px;
      color: #8f9bb3;
    }
  }
}

// 提示词输入
.prompt-section {
  .prompt-input-wrapper {
    position: relative;
    background: rgba(61, 68, 88, 0.3);
    border-radius: 16px;
    padding: 16px;
    min-height: 120px;
    
    .prompt-input {
      width: 100%;
      min-height: 88px;
      font-size: 15px;
      color: #ffffff;
      line-height: 1.6;
    }
    
    .voice-btn {
      position: absolute;
      bottom: 16px;
      right: 16px;
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 24px;
        color: #ffffff;
      }
      
      &.recording {
        background: #ff6b6b;
        width: 56px;
        height: 56px;
        
        .recording-animation {
          width: 20px;
          height: 20px;
          background: #ffffff;
          border-radius: 50%;
          animation: pulse 1s infinite;
          margin-bottom: 2px;
        }
        
        .recording-time {
          font-size: 10px;
          color: #ffffff;
          font-weight: 500;
        }
      }
    }
  }
  
  // 录音提示
  .recording-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 107, 107, 0.3);
    animation: blink 1.5s infinite;
    
    .hint-icon {
      font-size: 16px;
    }
    
    .hint-text {
      font-size: 13px;
      color: #ff6b6b;
    }
  }
  
  .prompt-suggestions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .suggestion-item {
      padding: 6px 12px;
      background: rgba(61, 68, 88, 0.4);
      border-radius: 16px;
      
      .suggestion-text {
        font-size: 13px;
        color: #8f9bb3;
      }
    }
  }
}

// 生成类型切换
.type-section {
  background: rgba(61, 68, 88, 0.3);
  border-radius: 16px;
  padding: 0px;
  margin-bottom: 16px;
  
  .type-tabs {
    display: flex;
    gap: 8px;
    
    .type-tab {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border-radius: 12px;
      transition: all 0.3s ease;
      cursor: pointer;
      
      .tab-text {
        font-size: 15px;
        color: #8f9bb3;
        font-weight: 500;
        transition: all 0.3s ease;
      }
      
      &.active {
        background-color: #404641;
        
        .tab-text {
          color: #ffffff;
        }
      }
      
      &:not(.active):active {
        background: rgba(61, 68, 88, 0.5);
        transform: scale(0.98);
      }
    }
  }
}

// 配置选项
.config-section {
  // 比例选择区域
  .ratio-section {
    background: rgba(61, 68, 88, 0.3);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
    
    .ratio-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      
      .ratio-title-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .ratio-title {
          font-size: 15px;
          font-weight: 500;
          color: #ffffff;
        }
        
        .ratio-current {
          font-size: 14px;
          color: #42ca4d;
          font-weight: 500;
        }
      }
      
      .iconfont {
        font-size: 14px;
        color: #8f9bb3;
      }
    }
    
    .ratio-content {
      margin-top: 12px;
    }
  }
  
  .config-item {
    margin-bottom: 20px;
    
    .config-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      
      .config-label {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .iconfont {
          font-size: 18px;
          color: #42ca4d;
        }
        
        .label-text {
          font-size: 15px;
          color: #ffffff;
        }
        
        .label-version {
          font-size: 15px;
          color: #8f9bb3;
        }
      }
      
      .config-action {
        display: flex;
        align-items: center;
        gap: 4px;
        
        .action-text {
          font-size: 13px;
          color: #42ca4d;
        }
        
        .iconfont {
          font-size: 12px;
          color: #42ca4d;
        }
      }
    }
  }
}

// 比例列表
.ratio-list {
  display: flex;
  gap: 12px;
  
  .ratio-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: rgba(61, 68, 88, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    
    .ratio-box {
      width: 20px;
      background: #8f9bb3;
      border-radius: 4px;
      margin-bottom: 6px;
    }
    
    .ratio-text {
      font-size: 12px;
      color: #8f9bb3;
    }
    
    &.active {
      background: rgba(6, 67, 14, 0.1);
      border-color: #42ca4d;
      
      .ratio-box {
        background: #42ca4d;
      }
      
      .ratio-text {
        color: #42ca4d;
      }
    }
  }
}

// 联想词助手
.assistant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: rgba(61, 68, 88, 0.3);
  border-radius: 12px;
  
  .assistant-info {
    flex: 1;
    
    .assistant-title {
      display: block;
      font-size: 15px;
      color: #ffffff;
      margin-bottom: 4px;
    }
    
    .assistant-desc {
      display: block;
      font-size: 12px;
      color: #8f9bb3;
    }
  }
}

// 底部占位
.bottom-placeholder {
  height: 20px;
}

// 底部操作栏
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 24px;
  background: linear-gradient(0deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.8) 100%);
  backdrop-filter: blur(20px);
  display: flex;
  gap: 12px;
  
  .generate-btn {
    flex: 2;
    height: 50px;
    background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    
    .btn-text {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
    
    .btn-count {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .gallery-btn {
    flex: 1;
    height: 50px;
    background: rgba(61, 68, 88, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    
    .iconfont {
      font-size: 18px;
      color: #ffffff;
    }
    
    .btn-text {
      font-size: 14px;
      color: #ffffff;
    }
  }
}

// 动画
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>

