Stooland Docs

Appearance

Midjourney工具紧急修复清单 ​

✅ 已完成修复 ​

1. process.env错误 ✅ ​

  • 问题: process is not defined
  • 原因: Vite不支持process.env
  • 修复: 改用import.meta.env.VITE_BASE_API
  • 文件: web/src/api/midjourney.js

2. 预览按钮无反应 ✅ ​

  • 问题: 预览按钮不显示/点击无效
  • 原因: 判断条件只检查preview_url,但实际是oss_url
  • 修复:
    • 按钮条件: video.preview_url || video.oss_url
    • 视频源: currentPreviewVideo.preview_url || currentPreviewVideo.oss_url
  • 文件: web/src/views/tool/MidjourneyTool.vue

3. 下载ZIP失败 ✅ ​

  • 问题: ZIP无法解压
  • 原因: createZipArchive依赖local_path,但PyBridge只返回oss_url
  • 修复: 改为返回URL列表,前端逐个触发下载
  • 文件:
    • 后端: api/app/common/controller/MidjourneyTool.php - batchDownload()
    • 前端: web/src/views/tool/MidjourneyTool.vue - downloadAll()

📋 待实施功能(按优先级) ​

P0 - 紧急(本周) ​

1. 智能提示优化 ​

位置调整: 将引导说明移到页面顶部,使用折叠面板

vue
<!-- 页面顶部 -->
<el-alert type="info" :closable="false" style="margin-bottom: 20px;">
  <template #title>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <span>🎬 Midjourney案例视频生成器</span>
      <el-button type="text" @click="showGuideVisible = !showGuideVisible">
        {{ showGuideVisible ? '收起引导' : '查看引导' }}
      </el-button>
    </div>
  </template>
  
  <el-collapse-transition>
    <div v-show="showGuideVisible" class="guide-content">
      <el-steps :active="currentStep" finish-status="success">
        <el-step title="解析JSON" description="粘贴MJ JSON数据"></el-step>
        <el-step title="下载视频" description="使用脚本批量下载"></el-step>
        <el-step title="上传OSS" description="选择本地视频文件"></el-step>
        <el-step title="开始合成" description="配置参数并生成"></el-step>
      </el-steps>
      
      <el-divider></el-divider>
      
      <!-- 根据当前步骤显示提示 -->
      <el-alert v-if="currentStep === 0" type="warning" :closable="false">
        💡 请在Midjourney网站复制视频JSON数据,粘贴到下方输入框
      </el-alert>
      
      <el-alert v-else-if="currentStep === 1" type="warning" :closable="false">
        💡 点击"生成下载脚本",复制到浏览器控制台运行(F12)
      </el-alert>
      
      <el-alert v-else-if="currentStep === 2" type="warning" :closable="false">
        💡 将下载的视频文件选择上传(文件名格式: [ID].mp4)
      </el-alert>
      
      <el-alert v-else-if="currentStep === 3" type="success" :closable="false">
        ✅ 准备就绪! 选择素材主题并配置参数后即可生成
      </el-alert>
    </div>
  </el-collapse-transition>
</el-alert>

2. 业务逻辑提示 ​

50个视频 ÷ 4案例/视频 = 13个混剪视频

vue
<el-form-item label="每视频案例数">
  <el-select v-model="uploadConfig.mixConfig.casesPerVideo">
    <el-option :value="3" label="3个案例/视频"></el-option>
    <el-option :value="4" label="4个案例/视频"></el-option>
    <el-option :value="5" label="5个案例/视频"></el-option>
  </el-select>
  
  <!-- 智能计算提示 -->
  <div v-if="uploadFileList.length > 0" class="form-tip" style="margin-top: 10px;">
    <el-tag type="info" size="small">
      {{ calculateOutputVideos() }}
    </el-tag>
  </div>
</el-form-item>

<script>
methods: {
  calculateOutputVideos() {
    const total = this.uploadFileList.length
    const perVideo = this.uploadConfig.mixConfig.casesPerVideo
    
    const full = Math.floor(total / perVideo)
    const remaining = total % perVideo
    
    if (remaining === 0) {
      return `将生成 ${full} 个完整视频(每个${perVideo}案例)`
    } else {
      return `将生成 ${full} 个完整视频 + 1个残缺视频(${remaining}案例)\n建议: 再上传${perVideo - remaining}个视频可得${full + 1}个完整视频`
    }
  }
}
</script>

P1 - 重要(下周) ​

3. 生成记录管理 ​

创建数据表和管理界面

sql
-- 已在设计文档中提供
CREATE TABLE `mj_generation_batch` ...

前端添加"历史记录"Tab:

vue
<el-tabs v-model="activeTab">
  <el-tab-pane label="视频生成" name="generate">
    <!-- 当前UI -->
  </el-tab-pane>
  
  <el-tab-pane label="生成记录" name="history">
    <el-table :data="batches">
      <el-table-column prop="name" label="批次名称"></el-table-column>
      <el-table-column prop="total_inputs" label="输入数"></el-table-column>
      <el-table-column prop="total_outputs" label="输出数"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{row}">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button @click="viewBatch(row)">查看</el-button>
          <el-button @click="downloadBatch(row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-tab-pane>
</el-tabs>

P2 - 可选(未来) ​

4. 批次命名 ​

生成时允许输入批次名称

5. 配置模板 ​

保存常用配置为模板,快速应用

6. 统计面板 ​

显示总计生成数、成功率、存储空间等

🚀 实施计划 ​

Week 1 (当前周) ​

  • [x] 修复下载ZIP问题
  • [x] 修复预览功能
  • [x] 修复process.env错误
  • [ ] 优化引导说明位置
  • [ ] 添加业务逻辑提示

Week 2 ​

  • [ ] 创建数据库表
  • [ ] 实现生成记录API
  • [ ] 实现历史记录UI

Week 3 ​

  • [ ] 批次命名功能
  • [ ] 配置模板功能
  • [ ] 优化细节体验

📝 测试清单 ​

功能测试 ​

  • [ ] JSON解析(单个/多个/数组格式)
  • [ ] 下载脚本生成和执行
  • [ ] OSS上传(单个/批量/断点续传)
  • [ ] 混剪生成(3案例/4案例/5案例)
  • [ ] 任务轮询和状态更新
  • [ ] 视频预览(完成/失败状态)
  • [ ] 批量下载(1个/多个视频)
  • [ ] 历史记录查看

边界测试 ​

  • [ ] 0个视频
  • [ ] 1-2个视频(不足最小要求)
  • [ ] 50个视频
  • [ ] 100+个视频
  • [ ] 超大文件上传
  • [ ] 网络中断恢复

兼容性测试 ​

  • [ ] Chrome/Edge/Safari
  • [ ] Windows/Mac
  • [ ] 移动端(iPad/Phone)

🔗 相关文档 ​