From a21f6f77a3ac090506e142c9c13f4fae012958c9 Mon Sep 17 00:00:00 2001
From: Leo <leo@qi-cloud.com>
Date: Sat, 29 Nov 2025 22:35:02 +0800
Subject: [PATCH] 1

---
 src/api/jarvis/marketingImage.js           |   20 +
 src/views/system/marketing-image/index.vue | 1067 ++++++++++++++++++++
 2 files changed, 1087 insertions(+)
 create mode 100644 src/api/jarvis/marketingImage.js
 create mode 100644 src/views/system/marketing-image/index.vue

diff --git a/src/api/jarvis/marketingImage.js b/src/api/jarvis/marketingImage.js
new file mode 100644
index 0000000..be13d64
--- /dev/null
+++ b/src/api/jarvis/marketingImage.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// 生成单张营销图片
+export function generateMarketingImage(data) {
+  return request({
+    url: '/jarvis/marketing-image/generate',
+    method: 'post',
+    data: data
+  })
+}
+
+// 批量生成营销图片
+export function batchGenerateMarketingImages(data) {
+  return request({
+    url: '/jarvis/marketing-image/batch-generate',
+    method: 'post',
+    data: data
+  })
+}
+
diff --git a/src/views/system/marketing-image/index.vue b/src/views/system/marketing-image/index.vue
new file mode 100644
index 0000000..157f127
--- /dev/null
+++ b/src/views/system/marketing-image/index.vue
@@ -0,0 +1,1067 @@
+<template>
+  <div class="marketing-image-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span class="card-title">
+          <i class="el-icon-picture"></i>
+          营销图片合成工具
+        </span>
+        <el-button 
+          style="float: right; padding: 3px 0" 
+          type="text" 
+          @click="showHelp = !showHelp">
+          {{ showHelp ? '隐藏帮助' : '显示帮助' }}
+        </el-button>
+      </div>
+
+      <!-- 帮助说明 -->
+      <el-collapse-transition>
+        <div v-show="showHelp" class="help-section">
+          <el-alert
+            title="使用说明"
+            type="info"
+            :closable="false"
+            show-icon>
+            <div slot="default">
+              <p><strong>功能说明：</strong></p>
+              <ul>
+                <li>自动将商品主图和价格信息合成为营销对比图</li>
+                <li>支持单张生成和批量生成</li>
+                <li>输出尺寸：1080x1080（适合小红书等平台）</li>
+                <li>支持从解析接口结果中快速导入商品信息</li>
+              </ul>
+              <p><strong>使用步骤：</strong></p>
+              <ol>
+                <li>方式一：手动输入商品信息（图片URL、原价、到手价）</li>
+                <li>方式二：从解析接口结果中导入（点击"从解析结果导入"按钮）</li>
+                <li>点击"生成图片"按钮</li>
+                <li>预览生成的图片，可以下载或复制</li>
+              </ol>
+            </div>
+          </el-alert>
+        </div>
+      </el-collapse-transition>
+
+      <!-- 操作区域 -->
+      <div class="operation-section">
+        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+          <!-- 单张生成 -->
+          <el-tab-pane label="单张生成" name="single">
+            <el-form :model="singleForm" label-width="120px" class="single-form">
+              <el-form-item label="商品主图URL" required>
+                <el-input
+                  v-model="singleForm.productImageUrl"
+                  placeholder="请输入商品主图URL（支持京东图片链接）"
+                  clearable>
+                  <el-button slot="append" @click="handlePreviewImage(singleForm.productImageUrl)" :disabled="!singleForm.productImageUrl">
+                    预览
+                  </el-button>
+                </el-input>
+              </el-form-item>
+              
+              <el-form-item label="商品名称" required>
+                <el-input
+                  v-model="singleForm.productName"
+                  placeholder="请输入商品名称（可选，系统会自动提取关键部分）"
+                  clearable>
+                </el-input>
+                <div class="form-tip">留空则系统自动提取关键部分</div>
+              </el-form-item>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="官网价" required>
+                    <el-input-number
+                      v-model="singleForm.originalPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="1"
+                      placeholder="官网原价"
+                      style="width: 100%">
+                    </el-input-number>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="到手价" required>
+                    <el-input-number
+                      v-model="singleForm.finalPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="1"
+                      placeholder="到手价"
+                      style="width: 100%">
+                    </el-input-number>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-form-item>
+                <el-button 
+                  type="primary" 
+                  icon="el-icon-magic-stick"
+                  @click="handleGenerateSingle"
+                  :loading="generating">
+                  生成图片
+                </el-button>
+                <el-button 
+                  icon="el-icon-refresh-left"
+                  @click="handleResetSingle">
+                  重置
+                </el-button>
+                <el-button 
+                  type="info"
+                  icon="el-icon-download"
+                  @click="handleImportFromParse">
+                  从解析结果导入
+                </el-button>
+                <el-button 
+                  type="warning"
+                  icon="el-icon-connection"
+                  @click="showParseDialog = true">
+                  调用解析接口
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+
+          <!-- 批量生成 -->
+          <el-tab-pane label="批量生成" name="batch">
+            <div class="batch-section">
+              <div class="batch-toolbar">
+                <el-button 
+                  type="primary" 
+                  icon="el-icon-plus"
+                  @click="handleAddBatchItem">
+                  添加商品
+                </el-button>
+                <el-button 
+                  type="success"
+                  icon="el-icon-upload2"
+                  @click="handleImportFromParseBatch">
+                  从解析结果批量导入
+                </el-button>
+                <el-button 
+                  type="warning"
+                  icon="el-icon-connection"
+                  @click="showParseDialog = true">
+                  调用解析接口
+                </el-button>
+                <el-button 
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleClearBatch"
+                  :disabled="batchList.length === 0">
+                  清空列表
+                </el-button>
+                <el-button 
+                  type="primary"
+                  icon="el-icon-magic-stick"
+                  @click="handleGenerateBatch"
+                  :loading="batchGenerating"
+                  :disabled="batchList.length === 0">
+                  批量生成 ({{ batchList.length }})
+                </el-button>
+              </div>
+
+              <!-- 批量列表 -->
+              <el-table
+                :data="batchList"
+                border
+                stripe
+                style="width: 100%; margin-top: 20px;"
+                max-height="500">
+                <el-table-column type="index" label="序号" width="60" align="center" />
+                <el-table-column label="商品主图" width="120" align="center">
+                  <template slot-scope="scope">
+                    <el-image
+                      :src="scope.row.productImageUrl"
+                      :preview-src-list="[scope.row.productImageUrl]"
+                      fit="cover"
+                      style="width: 80px; height: 80px; cursor: pointer;"
+                      :lazy="true">
+                      <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline"></i>
+                      </div>
+                    </el-image>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品名称" prop="productName" min-width="200">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.productName"
+                      placeholder="商品名称（可选）"
+                      size="small">
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="官网价" width="120" align="center">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      v-model="scope.row.originalPrice"
+                      :min="0"
+                      :precision="2"
+                      size="small"
+                      style="width: 100%">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="到手价" width="120" align="center">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      v-model="scope.row.finalPrice"
+                      :min="0"
+                      :precision="2"
+                      size="small"
+                      style="width: 100%">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="danger"
+                      icon="el-icon-delete"
+                      size="mini"
+                      @click="handleRemoveBatchItem(scope.$index)">
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <!-- 预览区域 -->
+      <div v-if="previewImages.length > 0" class="preview-section">
+        <el-divider content-position="left">
+          <span style="font-size: 16px; font-weight: bold;">
+            <i class="el-icon-view"></i>
+            生成结果预览 ({{ previewImages.length }})
+          </span>
+        </el-divider>
+        
+        <div class="preview-grid">
+          <div 
+            v-for="(item, index) in previewImages" 
+            :key="index"
+            class="preview-item">
+            <div class="preview-card">
+              <div class="preview-image-wrapper">
+                <img 
+                  :src="item.imageBase64" 
+                  alt="营销图片"
+                  class="preview-image"
+                  @click="handlePreviewLargeImage(item.imageBase64)">
+                <div class="preview-overlay">
+                  <el-button-group>
+                    <el-button 
+                      type="primary" 
+                      size="mini"
+                      icon="el-icon-download"
+                      @click="handleDownloadImage(item.imageBase64, item.filename || `营销图片_${index + 1}.jpg`)">
+                      下载
+                    </el-button>
+                    <el-button 
+                      type="success" 
+                      size="mini"
+                      icon="el-icon-document-copy"
+                      @click="handleCopyImage(item.imageBase64)">
+                      复制
+                    </el-button>
+                  </el-button-group>
+                </div>
+              </div>
+              <div class="preview-info">
+                <div v-if="item.productName" class="preview-name">{{ item.productName }}</div>
+                <div class="preview-price">
+                  <span class="original-price">¥{{ item.originalPrice }}</span>
+                  <span class="arrow">→</span>
+                  <span class="final-price">¥{{ item.finalPrice }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="preview-actions">
+          <el-button 
+            type="primary"
+            icon="el-icon-download"
+            @click="handleDownloadAll">
+            下载全部 ({{ previewImages.length }})
+          </el-button>
+          <el-button 
+            icon="el-icon-delete"
+            @click="handleClearPreview">
+            清空预览
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 大图预览对话框 -->
+    <el-dialog
+      title="图片预览"
+      :visible.sync="previewDialogVisible"
+      width="80%"
+      :before-close="handleClosePreview">
+      <div class="large-preview">
+        <img 
+          :src="previewLargeImageUrl" 
+          alt="预览"
+          style="max-width: 100%; height: auto;">
+      </div>
+    </el-dialog>
+
+    <!-- 解析接口对话框 -->
+    <el-dialog
+      title="调用解析接口"
+      :visible.sync="showParseDialog"
+      width="70%"
+      :close-on-click-modal="false">
+      <div>
+        <el-alert
+          title="输入格式：每行一个商品，格式为：京东短链接 + Tab/空格 + 到手价"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 20px;">
+          <div slot="default">
+            <p>示例：</p>
+            <pre style="background: #f5f7fa; padding: 10px; border-radius: 4px; margin-top: 10px;">https://u.jd.com/W17zHk2	199
+https://u.jd.com/W17zcSF	349</pre>
+          </div>
+        </el-alert>
+        
+        <el-input
+          v-model="parseText"
+          type="textarea"
+          :rows="10"
+          placeholder="请输入商品链接和价格，每行一个..."
+          style="margin-bottom: 20px;">
+        </el-input>
+        
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="showParseDialog = false">取消</el-button>
+          <el-button 
+            type="primary" 
+            @click="handleCallParse"
+            :loading="parsing">
+            解析
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 从解析结果导入对话框 -->
+    <el-dialog
+      title="从解析结果导入"
+      :visible.sync="importDialogVisible"
+      width="80%"
+      :close-on-click-modal="false">
+      <div v-if="parseResultData && parseResultData.length > 0">
+        <el-alert
+          title="选择要导入的商品"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 20px;">
+        </el-alert>
+        
+        <el-table
+          :data="parseResultData"
+          border
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" width="60" align="center" />
+          <el-table-column label="商品图片" width="100" align="center">
+            <template slot-scope="scope">
+              <el-image
+                :src="scope.row.productImage"
+                fit="cover"
+                style="width: 60px; height: 60px;"
+                :lazy="true">
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品名称" prop="productName" min-width="200" show-overflow-tooltip />
+          <el-table-column label="官网价" prop="price" width="100" align="center">
+            <template slot-scope="scope">
+              ¥{{ scope.row.price }}
+            </template>
+          </el-table-column>
+          <el-table-column label="到手价" width="120" align="center">
+            <template slot-scope="scope">
+              <el-input-number
+                v-model="scope.row.finalPrice"
+                :min="0"
+                :precision="2"
+                size="small"
+                style="width: 100%"
+                placeholder="请输入">
+              </el-input-number>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="importDialogVisible = false">取消</el-button>
+          <el-button 
+            type="primary" 
+            @click="handleConfirmImport"
+            :disabled="selectedItems.length === 0">
+            导入选中项 ({{ selectedItems.length }})
+          </el-button>
+        </div>
+      </div>
+      <div v-else>
+        <el-alert
+          title="暂无解析结果数据"
+          type="warning"
+          :closable="false">
+          <div slot="default">
+            请先调用解析接口获取商品数据，然后才能导入
+          </div>
+        </el-alert>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { generateMarketingImage, batchGenerateMarketingImages } from '@/api/jarvis/marketingImage'
+import { parseLineReport } from '@/api/jarvis/batchPublish'
+
+export default {
+  name: 'MarketingImage',
+  data() {
+    return {
+      showHelp: false,
+      activeTab: 'single',
+      
+      // 单张生成表单
+      singleForm: {
+        productImageUrl: '',
+        productName: '',
+        originalPrice: null,
+        finalPrice: null
+      },
+      
+      // 批量生成列表
+      batchList: [],
+      
+      // 预览图片列表
+      previewImages: [],
+      
+      // 加载状态
+      generating: false,
+      batchGenerating: false,
+      
+      // 预览对话框
+      previewDialogVisible: false,
+      previewLargeImageUrl: '',
+      
+      // 导入对话框
+      importDialogVisible: false,
+      parseResultData: [],
+      selectedItems: [],
+      
+      // 解析接口对话框
+      showParseDialog: false,
+      parseText: '',
+      parsing: false
+    }
+  },
+  mounted() {
+    // 尝试从localStorage获取解析结果
+    this.loadParseResultFromStorage()
+  },
+  methods: {
+    /** 切换标签 */
+    handleTabClick(tab) {
+      // 可以在这里添加切换逻辑
+    },
+    
+    /** 生成单张图片 */
+    async handleGenerateSingle() {
+      // 验证表单
+      if (!this.singleForm.productImageUrl) {
+        this.$message.warning('请输入商品主图URL')
+        return
+      }
+      if (this.singleForm.originalPrice === null || this.singleForm.originalPrice <= 0) {
+        this.$message.warning('请输入有效的官网价')
+        return
+      }
+      if (this.singleForm.finalPrice === null || this.singleForm.finalPrice <= 0) {
+        this.$message.warning('请输入有效的到手价')
+        return
+      }
+      
+      this.generating = true
+      try {
+        const res = await generateMarketingImage({
+          productImageUrl: this.singleForm.productImageUrl,
+          productName: this.singleForm.productName || undefined,
+          originalPrice: this.singleForm.originalPrice,
+          finalPrice: this.singleForm.finalPrice
+        })
+        
+        if (res.code === 200 && res.data && res.data.imageBase64) {
+          this.previewImages.push({
+            imageBase64: res.data.imageBase64,
+            productName: this.singleForm.productName,
+            originalPrice: this.singleForm.originalPrice,
+            finalPrice: this.singleForm.finalPrice,
+            filename: `营销图片_${this.singleForm.productName || '商品'}_${Date.now()}.jpg`
+          })
+          this.$message.success('图片生成成功！')
+          // 滚动到预览区域
+          this.$nextTick(() => {
+            const previewSection = document.querySelector('.preview-section')
+            if (previewSection) {
+              previewSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '生成失败')
+        }
+      } catch (error) {
+        console.error('生成图片失败', error)
+        this.$message.error('生成图片失败：' + (error.message || '未知错误'))
+      } finally {
+        this.generating = false
+      }
+    },
+    
+    /** 重置单张表单 */
+    handleResetSingle() {
+      this.singleForm = {
+        productImageUrl: '',
+        productName: '',
+        originalPrice: null,
+        finalPrice: null
+      }
+    },
+    
+    /** 添加批量项 */
+    handleAddBatchItem() {
+      this.batchList.push({
+        productImageUrl: '',
+        productName: '',
+        originalPrice: null,
+        finalPrice: null
+      })
+    },
+    
+    /** 移除批量项 */
+    handleRemoveBatchItem(index) {
+      this.batchList.splice(index, 1)
+    },
+    
+    /** 清空批量列表 */
+    handleClearBatch() {
+      this.$confirm('确定要清空批量列表吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.batchList = []
+        this.$message.success('已清空')
+      }).catch(() => {})
+    },
+    
+    /** 批量生成 */
+    async handleGenerateBatch() {
+      // 验证列表
+      const validList = this.batchList.filter(item => 
+        item.productImageUrl && 
+        item.originalPrice !== null && item.originalPrice > 0 &&
+        item.finalPrice !== null && item.finalPrice > 0
+      )
+      
+      if (validList.length === 0) {
+        this.$message.warning('请至少添加一个有效的商品信息')
+        return
+      }
+      
+      if (validList.length < this.batchList.length) {
+        this.$message.warning(`有 ${this.batchList.length - validList.length} 个商品信息不完整，将跳过`)
+      }
+      
+      this.batchGenerating = true
+      try {
+        const requests = validList.map(item => ({
+          productImageUrl: item.productImageUrl,
+          productName: item.productName || undefined,
+          originalPrice: item.originalPrice,
+          finalPrice: item.finalPrice
+        }))
+        
+        const res = await batchGenerateMarketingImages({ requests })
+        
+        if (res.code === 200 && res.data && res.data.results) {
+          const results = res.data.results
+          let successCount = 0
+          
+          results.forEach((result, index) => {
+            if (result.success && result.imageBase64) {
+              const item = validList[result.index]
+              this.previewImages.push({
+                imageBase64: result.imageBase64,
+                productName: item.productName,
+                originalPrice: item.originalPrice,
+                finalPrice: item.finalPrice,
+                filename: `营销图片_${item.productName || '商品'}_${Date.now()}_${index}.jpg`
+              })
+              successCount++
+            }
+          })
+          
+          this.$message.success(`批量生成完成！成功：${successCount}，失败：${results.length - successCount}`)
+          
+          // 滚动到预览区域
+          this.$nextTick(() => {
+            const previewSection = document.querySelector('.preview-section')
+            if (previewSection) {
+              previewSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '批量生成失败')
+        }
+      } catch (error) {
+        console.error('批量生成失败', error)
+        this.$message.error('批量生成失败：' + (error.message || '未知错误'))
+      } finally {
+        this.batchGenerating = false
+      }
+    },
+    
+    /** 预览图片 */
+    handlePreviewImage(url) {
+      if (!url) return
+      this.previewLargeImageUrl = url
+      this.previewDialogVisible = true
+    },
+    
+    /** 预览大图 */
+    handlePreviewLargeImage(base64) {
+      this.previewLargeImageUrl = base64
+      this.previewDialogVisible = true
+    },
+    
+    /** 关闭预览 */
+    handleClosePreview() {
+      this.previewDialogVisible = false
+      this.previewLargeImageUrl = ''
+    },
+    
+    /** 下载图片 */
+    handleDownloadImage(base64, filename) {
+      try {
+        // 将base64转换为blob
+        const base64Data = base64.split(',')[1] || base64
+        const byteCharacters = atob(base64Data)
+        const byteNumbers = new Array(byteCharacters.length)
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i)
+        }
+        const byteArray = new Uint8Array(byteNumbers)
+        const blob = new Blob([byteArray], { type: 'image/jpeg' })
+        
+        // 创建下载链接
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+        
+        this.$message.success('下载成功')
+      } catch (error) {
+        console.error('下载失败', error)
+        this.$message.error('下载失败')
+      }
+    },
+    
+    /** 复制图片 */
+    async handleCopyImage(base64) {
+      try {
+        // 将base64转换为blob
+        const base64Data = base64.split(',')[1] || base64
+        const byteCharacters = atob(base64Data)
+        const byteNumbers = new Array(byteCharacters.length)
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i)
+        }
+        const byteArray = new Uint8Array(byteNumbers)
+        const blob = new Blob([byteArray], { type: 'image/jpeg' })
+        
+        // 使用Clipboard API复制
+        if (navigator.clipboard && navigator.clipboard.write) {
+          await navigator.clipboard.write([
+            new ClipboardItem({ 'image/jpeg': blob })
+          ])
+          this.$message.success('图片已复制到剪贴板')
+        } else {
+          // 降级方案：提示用户手动保存
+          this.$message.info('浏览器不支持直接复制图片，请使用下载功能')
+        }
+      } catch (error) {
+        console.error('复制失败', error)
+        this.$message.error('复制失败')
+      }
+    },
+    
+    /** 下载全部 */
+    handleDownloadAll() {
+      if (this.previewImages.length === 0) {
+        this.$message.warning('没有可下载的图片')
+        return
+      }
+      
+      this.previewImages.forEach((item, index) => {
+        setTimeout(() => {
+          this.handleDownloadImage(item.imageBase64, item.filename || `营销图片_${index + 1}.jpg`)
+        }, index * 200) // 延迟下载，避免浏览器阻止
+      })
+      
+      this.$message.success(`开始下载 ${this.previewImages.length} 张图片`)
+    },
+    
+    /** 清空预览 */
+    handleClearPreview() {
+      this.$confirm('确定要清空所有预览图片吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.previewImages = []
+        this.$message.success('已清空')
+      }).catch(() => {})
+    },
+    
+    /** 从解析结果导入（单张） */
+    handleImportFromParse() {
+      this.loadParseResultFromStorage()
+      if (!this.parseResultData || this.parseResultData.length === 0) {
+        this.$message.warning('请先调用解析接口获取商品数据')
+        return
+      }
+      this.importDialogVisible = true
+    },
+    
+    /** 从解析结果批量导入 */
+    handleImportFromParseBatch() {
+      this.loadParseResultFromStorage()
+      if (!this.parseResultData || this.parseResultData.length === 0) {
+        this.$message.warning('请先调用解析接口获取商品数据')
+        return
+      }
+      this.importDialogVisible = true
+    },
+    
+    /** 选择变化 */
+    handleSelectionChange(selection) {
+      this.selectedItems = selection
+    },
+    
+    /** 确认导入 */
+    handleConfirmImport() {
+      if (this.selectedItems.length === 0) {
+        this.$message.warning('请至少选择一个商品')
+        return
+      }
+      
+      if (this.activeTab === 'single') {
+        // 单张模式：导入第一个选中的
+        const item = this.selectedItems[0]
+        this.singleForm = {
+          productImageUrl: item.productImage || '',
+          productName: item.productName || '',
+          originalPrice: item.price || null,
+          finalPrice: item.finalPrice || null
+        }
+        this.$message.success('导入成功')
+      } else {
+        // 批量模式：导入所有选中的
+        this.selectedItems.forEach(item => {
+          if (item.finalPrice && item.finalPrice > 0) {
+            this.batchList.push({
+              productImageUrl: item.productImage || '',
+              productName: item.productName || '',
+              originalPrice: item.price || null,
+              finalPrice: item.finalPrice || null
+            })
+          }
+        })
+        this.$message.success(`成功导入 ${this.selectedItems.length} 个商品`)
+      }
+      
+      this.importDialogVisible = false
+      this.selectedItems = []
+    },
+    
+    /** 从localStorage加载解析结果 */
+    loadParseResultFromStorage() {
+      try {
+        const stored = localStorage.getItem('parseResultData')
+        if (stored) {
+          const data = JSON.parse(stored)
+          if (Array.isArray(data) && data.length > 0) {
+            // 为每个商品添加finalPrice字段（用于输入到手价）
+            this.parseResultData = data.map(item => ({
+              ...item,
+              finalPrice: null
+            }))
+          }
+        }
+      } catch (error) {
+        console.error('加载解析结果失败', error)
+      }
+    },
+    
+    /** 调用解析接口 */
+    async handleCallParse() {
+      if (!this.parseText || !this.parseText.trim()) {
+        this.$message.warning('请输入要解析的内容')
+        return
+      }
+      
+      this.parsing = true
+      try {
+        const res = await parseLineReport({
+          text: this.parseText.trim()
+        })
+        
+        if (res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
+          // 保存解析结果到localStorage
+          localStorage.setItem('parseResultData', JSON.stringify(res.data))
+          
+          // 为每个商品添加finalPrice字段（从输入文本中提取）
+          const lines = this.parseText.trim().split('\n')
+          const priceMap = new Map()
+          
+          lines.forEach(line => {
+            const parts = line.trim().split(/\s+/)
+            if (parts.length >= 2) {
+              const url = parts[0]
+              const price = parseFloat(parts[1])
+              if (!isNaN(price)) {
+                priceMap.set(url, price)
+              }
+            }
+          })
+          
+          this.parseResultData = res.data.map(item => {
+            // 尝试从原始URL匹配价格
+            let finalPrice = null
+            if (item._raw && item._raw.originalUrl) {
+              finalPrice = priceMap.get(item._raw.originalUrl) || null
+            }
+            
+            return {
+              ...item,
+              finalPrice: finalPrice || item.finalPrice || null
+            }
+          })
+          
+          this.$message.success(`解析成功！共 ${this.parseResultData.length} 个商品`)
+          this.showParseDialog = false
+          
+          // 自动打开导入对话框
+          this.$nextTick(() => {
+            this.importDialogVisible = true
+          })
+        } else {
+          this.$message.error(res.msg || '解析失败')
+        }
+      } catch (error) {
+        console.error('调用解析接口失败', error)
+        this.$message.error('解析失败：' + (error.message || '未知错误'))
+      } finally {
+        this.parsing = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.marketing-image-container {
+  padding: 20px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.help-section {
+  margin-bottom: 20px;
+}
+
+.help-section ul,
+.help-section ol {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.help-section li {
+  margin: 5px 0;
+}
+
+.operation-section {
+  margin-top: 20px;
+}
+
+.single-form {
+  max-width: 800px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.batch-section {
+  margin-top: 20px;
+}
+
+.batch-toolbar {
+  margin-bottom: 20px;
+}
+
+.batch-toolbar .el-button {
+  margin-right: 10px;
+}
+
+.preview-section {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #EBEEF5;
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.preview-item {
+  position: relative;
+}
+
+.preview-card {
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  transition: all 0.3s;
+}
+
+.preview-card:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.preview-image-wrapper {
+  position: relative;
+  width: 100%;
+  padding-top: 100%; /* 1:1 比例 */
+  background: #f5f7fa;
+  overflow: hidden;
+}
+
+.preview-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.preview-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.preview-image-wrapper:hover .preview-overlay {
+  opacity: 1;
+}
+
+.preview-info {
+  padding: 15px;
+}
+
+.preview-name {
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-price {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.original-price {
+  font-size: 16px;
+  color: #909399;
+  text-decoration: line-through;
+}
+
+.arrow {
+  color: #909399;
+  font-size: 14px;
+}
+
+.final-price {
+  font-size: 20px;
+  color: #F56C6C;
+  font-weight: bold;
+}
+
+.preview-actions {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.large-preview {
+  text-align: center;
+  max-height: 70vh;
+  overflow: auto;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 20px;
+}
+
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+</style>
+