CameraMachine/frontend/src/views/Photography/detail.vue

<template>

  <headerBar title="主图与详情生成" />

  <div class="detail-container">
    <div>
      <!-- 顶部：勾选服务内容（多选） -->
      <div class="service-section flex between top">
        <div class="section-title">
          <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
          勾选服务内容（多选）：
        </div>
        <div class="service-cards">
          <div class="service-card" :class="{ active: form.services.includes('is_product_scene') }" @click="toggleService('is_product_scene')" v-log="{ describe: { action: '点击服务卡片', service: '场景图生成' } }">
            <div class="service-checkbox" @click.stop>
                              <el-checkbox size="large" :model-value="form.services.includes('is_product_scene')" @change="toggleService('is_product_scene')" />
            </div>
            <div class="service-content">
              <div class="service-image">
                <img src="@/assets/images/Photography/cj.png" alt="场景图生成" />
                <div class="service-icon" @click.stop="openScenePromptDialog" v-log="{ describe: { action: '点击服务卡片图标', service: '场景图生成-弹窗' } }">
                  <el-icon><EditPen /></el-icon>
                </div>
              </div>
              <div class="service-name">场景图生成</div>
            </div>
          </div>
          <div class="service-card" :class="{ active: form.services.includes('is_upper_footer') }" @click="toggleService('is_upper_footer')" v-log="{ describe: { action: '点击服务卡片', service: '模特图生成' } }">
            <div class="service-checkbox" @click.stop>
                              <el-checkbox size="large" :model-value="form.services.includes('is_upper_footer')" @change="toggleService('is_upper_footer')" />
            </div>
            <div class="service-content">
              <div class="service-image">
                <img src="@/assets/images/Photography/mt.png" alt="模特图生成" />
                <div class="service-icon" @click.stop="openModelDialog" v-log="{ describe: { action: '点击服务卡片图标', service: '模特图生成-弹窗' } }">
                  <el-icon><EditPen /></el-icon>
                </div>
              </div>
              <div class="service-name">模特图生成</div>
            </div>
          </div>
          <div class="service-card" :class="{ active: form.services.includes('is_detail') }" @click="toggleService('is_detail')" v-log="{ describe: { action: '点击服务卡片', service: '详情页生成' } }">
            <div class="service-checkbox" @click.stop>
                              <el-checkbox size="large" :model-value="form.services.includes('is_detail')" @change="toggleService('is_detail')" />
            </div>
            <div class="service-content">
              <div class="service-image">
                <img src="@/assets/images/Photography/xq.png" alt="详情页生成" />
              </div>
              <div class="service-name">详情页生成</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 主图LOGO部分 -->
<!--
      <div class="logo-section flex left top" >
        <div class="section-title" style="margin-bottom: 0px;">
          <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
          主图LOGO 与 选择详情模板：
        </div>
      </div>
      <div class="logo-section flex left top multi-line">
        <upload v-for="item,index in logoList"   :value="item" :key="item"
                v-show="item"
                @input="onRemove(index)"
                class="mar-right-10 upload-item"
                :class="{
                    active: item === form.logo_path
                }"
                @click.native="form.logo_path = item"
        ></upload>
        <upload @input="onInput"></upload>
      </div>
-->

      <el-divider />
<!--      &lt;!&ndash; 图片抠图与货号图生成 &ndash;&gt;
      <div class="section">
        <div class="section-title">
          <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
          图片抠图与货号图生成
        </div>
        <div class="section-content">
          <div v-if="showTips" class="instruction-out flex top left">
            <img style="fill: #000" src="@/assets/images/xinxi.svg" />
            <ol class="instruction-list">
              <li>请在下方确认图片拍摄过程中的顺序，确保所有拍摄的图片的顺序一致。</li>
              <li>使用中英文语号分隔。</li>
              <li>图片的名称不能随意修改，否则无法正常生成详情页。</li>
              <li>现有图片名称有：俯视、侧视、后视、鞋底、内里</li>
            </ol>
            <el-icon @click="showTips = false" class="close-icon">
              <Close />
            </el-icon>
          </div>

          &lt;!&ndash; 货号文件夹 &ndash;&gt;
          &lt;!&ndash;    <div class="form-item">
            <div class="label">货号文件夹：</div>
            <div class="folder-warp">
              <div class="folder-input">
                <el-input style="width: 60%;" v-model="folderPath" type="textarea" :rows="2" readonly
                  placeholder="请选择货号文件夹" />
                <el-button class="check-button" type="primary" @click="selectFolder">
                  <img src="@/assets/images/Photography/wenjian.png" style="width: 14px; " />
                  选择目标文件夹</el-button>
              </div>
              <div class="hint">
                <el-icon>
                  <Warning />
                </el-icon> <text>选择货号的上级文件夹</text>
              </div>
            </div>
          </div>
         &ndash;&gt;

        </div>
      </div>
      <el-divider />-->

      <!-- 主图LOGO 与 选择详情模板：左右布局 -->
      <div class="logo-template-row">
        <!-- 左：主图LOGO -->
        <div class="logo-col">
          <div class="logo-section flex left top" >
            <div class="section-title" style="margin-bottom: 0px;">
              <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
              主图LOGO：
            </div>
          </div>
          <div class="logo-section flex left top multi-line">
            <upload v-for="item,index in logoList"   :value="item" :key="item"
                    v-show="item"
                    @input="onRemove(index)"
                    class="mar-right-10 upload-item"
                    :class="{
                        active: item === form.logo_path
                    }"
                    @click.native="selectLogo(item)"
            ></upload>
            <upload @input="onInput"></upload>
          </div>
        </div>

        <!-- 右：选择详情模板 -->
        <div class="template-col">
          <div class="template-section ">
            <div class="flex between">
              <div class="section-title">
                <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
                选择详情模版
              </div>
              <div class="template-pagination">
                <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.current"
                  v-model:page-size.sync="queryParams.size" :total="totalPage" @current-change="onCurrentChange"
                  @size-change="onSizeChange" />
              </div>
            </div>

            <div class="template-list">
              <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
                @click="selectTemplate(template)" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
                <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
                  style="width: 100%; display: block;" />
                <div class="select-warp" :class="form.selectTemplate?.id == template.id ? 'active' : ''">
                  <el-icon color="#FFFFFF">
                    <Select />
                  </el-icon>
                </div>
                <div class="template-info">
                  <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
                  <div class="template-view" @click="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
                </div>
              </div>
            </div>

            <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
              <el-icon><WarningFilled /></el-icon>
              <span class="mar-left-10">该模版要求拍摄图片：{{form.selectTemplate?.template_image_order}}
                <template v-if="form.selectTemplate?.template_image_order">，共{{form.selectTemplate?.template_image_order.split(',').length}}张。</template>
              </span>
            </div>

            <!-- 模板下：一键上架 和 电商平台（多选） -->
            <div class="publish-section flex left" v-if="onlineStoreTempList.length || onlineStoreTempListForeign.length">
              <div class="form-item flex left">
                <div class="fw-b">一键上架：</div>
               </div>
              <div class="form-item flex left mar-top-10" style="margin-right: 10px !important;"  v-if="onlineStoreTempList.length">
                <div class="label">国内电商平台：</div>
                <el-select  v-model="domesticPlatforms" multiple placeholder="请选择平台" style="min-width: 200px;">
                  <el-option
                    v-for="store in onlineStoreTempList"
                    :key="store.show_name"
                    :label="store.show_name"
                    :value="store.online_store_name"
                    :disabled="!store.channel_status"
                  />
                </el-select>
              </div>
              <div class="form-item flex left mar-top-10" v-if="onlineStoreTempListForeign.length">
                <div class="label">国外电商平台：</div>
                <el-select  v-model="foreignPlatforms" multiple placeholder="请选择平台" style="min-width: 200px;">
                  <el-option
                    v-for="store in onlineStoreTempListForeign"
                    :key="store.show_name"
                    :label="store.show_name"
                    :value="store.online_store_name"
                    :disabled="!store.channel_status"
                  />
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider />

      <!-- 详情高级配置 -->
<!--      <div class="section">
        <div class="section-title">
          <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
          详情高级配置
        </div>
        <div class="section-content">
          &lt;!&ndash; 图片顺序 &ndash;&gt;
          <div class="form-item">
            <div class="label">图片顺序：</div>
            <el-input v-model="imageOrder" placeholder="请输入图片顺序" class="specific-page-input">
              <template #append>
                <el-button class="explain-btn" link type="primary">说明</el-button>
              </template>
            </el-input>
          </div>

          &lt;!&ndash; 同款检验 &ndash;&gt;
          &lt;!&ndash;   <div class="form-item">
            <div class="label">同款检验：</div>
            <el-checkbox v-model="checkSimilar">同款下货号必须齐全</el-checkbox>
          </div>
&ndash;&gt;
          &lt;!&ndash; 可指定页面独修改 &ndash;&gt;
          &lt;!&ndash;      <div class="form-item">
            <div class="label">可指定页面独修改：</div>
            <el-input v-model="specificPage" placeholder="请输入入需要单独修改的页面，示例：4:1 (需修改模版的编号：第一张)"
              class="specific-page-input">
              <template #append>
                <el-button class="explain-btn" link type="primary">说明</el-button>
              </template>
            </el-input>
          </div>
          &ndash;&gt;
        </div>
      </div>
      <el-divider />-->
      <!-- 详情资料准备部分 -->
      <div class="data-prep-section">
        <div class="flex-item left">
          <div class="section-title">
            <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
            详情资料准备 (2选1)

            <el-button v-if="form.dataType == '1'" type="text" class="mar-left-10 fs-16"  @click="downloadExcel" v-log="{ describe: { action: '点击下载Excel模板' } }">下载商品基础资料模版</el-button>
          </div>
        </div>

        <div class="flex-item left">
          <el-radio-group v-model="form.dataType" class="ml-4">
            <el-radio label="1" size="large">EXCEL文件选择</el-radio>
            <el-radio label="2" size="large">系统对接（和业务员联系）</el-radio>
          </el-radio-group>
        </div>
        <div v-if="form.dataType == '1'" class="excel-upload">
          <div class="flex bottom between">
            <div style="max-width: 160px;" class="mar-left-20">商品基础资料EXCEL文件选择：</div>
            <div class="flex bottom mar-left-20" style="flex-grow: 1;">
              <el-input type="textarea" v-model="form.excel_path" />
            </div>
            <el-button class="select-button button--primary1  mar-left-20" type="primary" @click="selectExcel" v-log="{ describe: { action: '点击选择Excel文件' } }">
              <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
              选择</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <!-- <el-button class="button--primary1 footer-button" type="primary" @click="saveConfig">保存配置</el-button> -->
      <!--  <el-button class="button--primary1 footer-button" type="primary" @click="startProcess">开始处理</el-button>  -->
      <el-button v-loading="requesting" class="button--primary1 footer-button" type="primary" @click="generate" v-log="{ describe: { action: '点击开始生成详情页' } }">开始生成</el-button>
    </div>
  </div>


  <loading-dialog v-if="loadingDialogVisible" v-model="loadingDialogVisible" :requesting="requesting" :progress="progress" :message="message"
    :disabled-button="disabledButton" :use-new-progress="useNewProgress" :progress-steps="progressSteps" @button-click="handleComplete">
    <template v-if="partErrList && partErrList.length > 0" #errList>
      <div v-for="(item, idx) in partErrList" :key="idx">
        <span v-if="item.goods_art_no">{{ item.goods_art_no }}：</span><span>{{ item.info }}</span>
      </div>
    </template>
    <template #progressMessages>
      <div class="progress-messages" v-if="progressMessages.length">
        <div class="message-header">
          <span>处理进度</span>
          <div class="flex right" style="gap:8px; align-items:center;">
            <el-button type="text" @click="openOutputDir" v-log="{ describe: { action: '点击打开输出目录' } }">打开目录</el-button>
            <el-button type="text" @click="showMessageHistory = !showMessageHistory" v-log="{ describe: { action: '点击查看进度详情' } }">
              {{ showMessageHistory ? '收起' : '查看详情' }}
            </el-button>
          </div>
        </div>
        <div class="message-list" v-if="showMessageHistory" ref="messageListRef">
          <div v-for="(msg, index) in progressMessages" :key="index" class="message-item flex left">
            <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
            <div class="message-content mar-left-10" v-if="msg">
              <span class="goods-no" v-if="msg.goods_art_nos && msg.goods_art_nos.length > 0">货号{{ msg.goods_art_nos.join(', ') }}：</span>
              <span class="message-text">{{ msg.msg }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </loading-dialog>
  <el-dialog v-model="dialogVisible">
    <img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

  <!-- 模特生成弹窗 -->
  <ModelGenerationDialog
    v-model="modelDialogVisible"
    :initial-models="selectedModels"
    @confirm="handleModelSelection"
    @cancel="modelDialogVisible = false"
  />

  <!-- 场景提示词弹窗 -->
  <ScenePromptDialog
    v-model="scenePromptDialogVisible"
    :initial-prompt="scenePrompt"
    @confirm="handleScenePromptConfirm"
    @cancel="scenePromptDialogVisible = false"
  />


</template>

<script lang="ts" setup>

import { getCompanyTemplatesApi } from '@/apis/other'
import tokenInfo from '@/stores/modules/token';
import useUserInfo from "@/stores/modules/user";
import { useRoute, useRouter } from 'vue-router'
import { clickLog, setLogInfo } from '@/utils/log'


import { ElMessage, ElMessageBox } from 'element-plus'

import headerBar from '@/components/header-bar/index.vue'
import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { Select, EditPen } from '@element-plus/icons-vue'
import upload from '@/components/upload'
import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
const clientStore = client();
import { getRouterUrl } from '@/utils/appfun'
import { useUuidStore } from '@/stores/modules/uuid'
import socket from "@/stores/modules/socket";
const socketStore = socket();
import ModelGenerationDialog from '@/components/ModelGeneration/index.vue'
import ScenePromptDialog from '@/components/ScenePromptDialog/index.vue'

import { Close, Warning } from '@element-plus/icons-vue'
import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'


import configInfo from "@/stores/modules/config";

const useConfigInfoStore = configInfo();



import { useCheckInfo } from '@/composables/userCheck';
useCheckInfo();

const showTips = ref(true)

const folderPath = ref('') //货号文件夹
// const reportMode = ref('normal') // 抠图模式
const imageOrder = ref('俯视、侧视、后跟、鞋底、内里、组合、组合2、组合3') // 图片顺序
const checkSimilar = ref(false) // 同款检验
const specificPage = ref('')  // 可指定页面独修改

// 路由和状态管理初始化
const route = useRoute();
const router = useRouter();
const uuidStore = useUuidStore();

// 完成目录
const completeDirectory = ref('')


const loadingDialogVisible = ref(false)
const progress = ref(0)
const message = ref('正在为您处理，请稍后')
const disabledButton = ref(true)

// 新的进度条相关数据
const useNewProgress = ref(false)
const progressSteps = ref<Array<{
  msg_type: string
  goods_art_no: string
  name: string
  status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
  current: number
  total: number
  error: number
}>>([])

// 更新进度步骤
const updateProgressStep = (msgType: string, stepData: any) => {
  console.log('updateProgressStep called:', msgType, stepData)
  const stepIndex = progressSteps.value.findIndex(step => step.msg_type === msgType)
  if (stepIndex !== -1) {
    // 更新现有步骤 - 使用新数组来确保响应式更新
    const newSteps = [...progressSteps.value]
    newSteps[stepIndex] = {
      ...newSteps[stepIndex],
      name: stepData.name, // 保持原有名称或使用新名称
      goods_art_no: stepData.goods_art_no,
      status: stepData.status,
      current: stepData.current || 0,
      total: stepData.total || 0,
      error: stepData.error || 0
    }
    progressSteps.value = newSteps
    console.log('Updated step:', newSteps[stepIndex])
  } else {
    // 添加新步骤
    progressSteps.value = [...progressSteps.value, {
      msg_type: msgType,
      name: stepData.name,
      goods_art_no: stepData.goods_art_no,
      status: stepData.status,
      current: stepData.current || 0,
      total: stepData.total || 0,
      error: stepData.error || 0
    }]
    console.log('Added new step:', progressSteps.value[progressSteps.value.length - 1])
  }
}

// 获取步骤名称
// 初始化进度步骤 - 从后端数据动态获取
const initProgressSteps = (backendSteps?: any[]) => {
  if (backendSteps && backendSteps.length > 0) {
    // 使用后端返回的步骤数据
    progressSteps.value = backendSteps.map(step => ({
      msg_type: step.msg_type,
      goods_art_no: step.goods_art_no,
      name: step.name,
      status: '等待处理',
      current: 0,
      total: step.total || 0,
      error: 0
    }))
  } else {
    // 默认步骤（当后端没有返回步骤数据时使用）
    progressSteps.value = []
  }
}
// 进度消息队列
const progressMessages = ref<Array<{
  goods_no: string
  temp_name: string
  status: string
  goods_art_nos: string[]
  msg: string
  timestamp: number
}>>([])
const showMessageHistory = ref(true)
const messageListRef = ref<HTMLElement | null>(null)

// 新消息时自动滚动到底部
const scrollMessageListToBottom = () => {
  nextTick(() => {
    const el = messageListRef.value
    if (el) {
      el.scrollTop = el.scrollHeight
    }
  })
}

let templates = ref([])
let goods_art_nos = ref([])
let partErrList = ref([])
const excel_template_url = ref('')
// 是否正在请求接口
const requesting = ref(false)





// 定义一个定时器变量
const INTERVAL = ref<number | NodeJS.Timeout | null>(null);




// 状态变量
const totalPage = ref(0);
const itemsPerPage = 4; // 每页显示的模板数量
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const queryParams = reactive({ // 分页查询参数
  size: 1,
  current: 1,
})
const form = reactive({
  selectTemplate: {}, //选中的模板
  dataType: '1', // 1: 选择excel文件 2: 系统对接
  logo_path: '', // 主图LOGO
  excel_path: '', // 商品基础资料EXCEL文件选择
  services: ['is_detail'], // 勾选服务内容（多选）默认包含详情页生成
})
onMounted(() => {
  // 页面访问埋点

  const goods_art_data = route.query.goods_art_nos
  goods_art_nos.value = Array.isArray(goods_art_data) ? goods_art_data : [goods_art_data]
  getCompanyTemplates()
  getLogolist()

  loadDetailCache()
})

// 监听数据类型变化，自动保存到缓存
watch(() => form.dataType, (newValue) => {
  if (newValue) {
    saveDataTypeToCache(newValue)
  }
})

// 页面卸载时清理监听器
onBeforeUnmount(() => {
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
  clearInterval(INTERVAL.value);
})


// 计算属性，获取当前页可见的模板
const visibleTemplates = computed(() => {
  const startIndex = (queryParams.current - 1) * itemsPerPage;
  const data = templates.value.slice(startIndex, startIndex + itemsPerPage);
  return data
});
// 查看模板详情
const viewTemplate = (template) => {
  // 展示大图
  dialogVisible.value = true
  dialogImageUrl.value = template.template_preview_image

};
// 获取模版列表
const getCompanyTemplates = async () => {
  const { data } = await getCompanyTemplatesApi()
  console.log(data);
  templates.value = data.list
  // 获取电商平台列表 - 支持新的数据结构
  if (data.online_store_temp_list) {
    onlineStoreTempList.value = data.online_store_temp_list
  }

  if (data.online_store_temp_list_foreign) {
    onlineStoreTempListForeign.value = data.online_store_temp_list_foreign
  }

  // 获取模板列表后，尝试从缓存恢复模板选择
  loadTemplateFromCache()

  excel_template_url.value = data.excel_template_url
  // 计算总页数
  totalPage.value = Math.ceil(templates.value.length / itemsPerPage);
}

const downloadExcel =  () => {
  const a = document.createElement('a')
  a.href = excel_template_url.value,
  a.download = '商品基础资料模版'
  document.body.appendChild(a)
  a.click()
  setTimeout(() => {
    document.body.removeChild(a);
  }, 1000);
}
// 服务内容切换
const toggleService = (key: string) => {
  const idx = form.services.indexOf(key)
  if (idx > -1) form.services.splice(idx, 1)
  else form.services.push(key)

  // 保存服务选择状态到缓存
  saveServicesToCache(form.services)
}

// 电商平台多选与一键上架
const domesticPlatforms = ref<string[]>([])
const foreignPlatforms = ref<string[]>([])
const onlineStoreTempList = ref<any[]>([]) // 国内电商平台列表
const onlineStoreTempListForeign = ref<any[]>([]) // 国外电商平台列表
// 模特与场景弹窗
const modelDialogVisible = ref(false)
const scenePromptDialogVisible = ref(false)
const selectedModels = ref<{ female: any; male: any } | null>(null)
const scenePrompt = ref('')

// 本地缓存键（与弹窗组件保持一致）
const DETAIL_MODEL_CACHE_KEY = 'model_selection_cache'
const DETAIL_SCENE_PROMPT_CACHE_KEY = 'scene_prompt_cache'
const DETAIL_LOGO_CACHE_KEY = 'detail_logo_cache'
const DETAIL_DATA_TYPE_CACHE_KEY = 'detail_data_type_cache'
const DETAIL_SERVICES_CACHE_KEY = 'detail_services_cache'

// 读取本地缓存
const loadDetailCache = () => {
  console.log('loadDetailCache');
  try {
    const m = localStorage.getItem(DETAIL_MODEL_CACHE_KEY)
    if (m) {
      const parsed = JSON.parse(m)
      if (parsed && (parsed.female || parsed.male)) {
        selectedModels.value = parsed
        console.log('loadDetailCache');
        console.log(selectedModels.value);
      }
    }
  } catch {}
  try {
    const p = localStorage.getItem(DETAIL_SCENE_PROMPT_CACHE_KEY)
    if (p) {
      console.log('scenePrompt');
      scenePrompt.value = p
      console.log(scenePrompt.value);
    }
  } catch {}

  // 加载LOGO缓存
  try {
    const logo = localStorage.getItem(DETAIL_LOGO_CACHE_KEY)
    if (logo) {
      form.logo_path = logo
      console.log('loadDetailCache - logo:', logo);
    }
  } catch {}

  // 加载数据类型缓存
  try {
    const dataType = localStorage.getItem(DETAIL_DATA_TYPE_CACHE_KEY)
    if (dataType) {
      form.dataType = dataType
      console.log('loadDetailCache - dataType:', dataType);
    }
  } catch {}

  // 模板缓存加载将在获取模板列表后执行

  // 加载服务选择状态缓存
  try {
    const services = localStorage.getItem(DETAIL_SERVICES_CACHE_KEY)
    if (services) {
      const parsed = JSON.parse(services)
      if (Array.isArray(parsed)) {
        form.services = parsed
        console.log('loadDetailCache - services:', parsed);
      }
    }
  } catch {}
}

// 保存到本地缓存（仅保存必要字段）
const saveModelsToCache = (models: { female: any; male: any }) => {
  try {
    const payload = {
      female: models?.female ? {
        id: models.female.id,
        name: models.female.name,
        image_url: models.female.image_url,
        gender: models.female.gender,
        keywords: models.female.keywords,
        status: models.female.status
      } : null,
      male: models?.male ? {
        id: models.male.id,
        name: models.male.name,
        image_url: models.male.image_url,
        gender: models.male.gender,
        keywords: models.male.keywords,
        status: models.male.status
      } : null
    }
    localStorage.setItem(DETAIL_MODEL_CACHE_KEY, JSON.stringify(payload))
  } catch {}
}
const saveScenePromptToCache = (prompt: string) => {
  try {
    const v = (prompt || '').trim()
    if (v) localStorage.setItem(DETAIL_SCENE_PROMPT_CACHE_KEY, v)
  } catch {}
}

// 保存LOGO到缓存
const saveLogoToCache = (logoPath: string) => {
  try {
    if (logoPath) {
      localStorage.setItem(DETAIL_LOGO_CACHE_KEY, logoPath)
      console.log('saveLogoToCache:', logoPath);
    }
  } catch {}
}

// 保存数据类型到缓存
const saveDataTypeToCache = (dataType: string) => {
  try {
    if (dataType) {
      localStorage.setItem(DETAIL_DATA_TYPE_CACHE_KEY, dataType)
      console.log('saveDataTypeToCache:', dataType);
    }
  } catch {}
}

const saveServicesToCache = (services: string[]) => {
  try {
    localStorage.setItem(DETAIL_SERVICES_CACHE_KEY, JSON.stringify(services))
    console.log('saveServicesToCache:', services);
  } catch {}
}

// 从缓存加载模板选择
const loadTemplateFromCache = () => {
  try {
    const template = localStorage.getItem('detail_template_cache')
    if (template) {
      const parsed = JSON.parse(template)
      if (parsed && parsed.id) {
        // 检查缓存的模板是否还在当前模板列表中
        const templateExists = templates.value.some(t => t.id === parsed.id)
        if (templateExists) {
          form.selectTemplate = parsed
          console.log('loadTemplateFromCache - template:', parsed);
        } else {
          console.log('缓存的模板不在当前模板列表中，使用默认模板');
          // 如果缓存的模板不存在，使用默认模板（第一个）
          if (templates.value.length > 0) {
            form.selectTemplate = templates.value[0]
          }
        }
      }
    } else {
      // 没有缓存时，使用默认模板
      if (templates.value.length > 0) {
        form.selectTemplate = templates.value[0]
      }
    }
  } catch (error) {
    console.error('加载模板缓存失败:', error);
    // 出错时使用默认模板
    if (templates.value.length > 0) {
      form.selectTemplate = templates.value[0]
    }
  }
}

const openModelDialog = () => {
  modelDialogVisible.value = true
}
const openScenePromptDialog = () => {
  scenePromptDialogVisible.value = true
}

// 选择模板
const selectTemplate = (template: any) => {
  form.selectTemplate = template
  // 保存模板选择到缓存
  try {
    localStorage.setItem('detail_template_cache', JSON.stringify(template))
    console.log('selectTemplate - saved to cache:', template);
  } catch {}
}

// 选择LOGO
const selectLogo = (logoPath: string) => {
  form.logo_path = logoPath
  // 保存LOGO选择到缓存
  saveLogoToCache(logoPath)
}
const handleModelSelection = (models: { female: any; male: any }) => {
  selectedModels.value = models
  saveModelsToCache(models)
  modelDialogVisible.value = false
  ElMessage.success('模特选择完成！')
}
const handleScenePromptConfirm = (prompt: string) => {
  scenePrompt.value = prompt
  saveScenePromptToCache(prompt)
}




const onCurrentChange = (page) => {
  queryParams.current = page;
};
const onSizeChange = (data) => {
};



// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}

// 处理进度消息
const handleProgressMessage = (data: any) => {
  console.log("detail_progress", data);

  if (data.code === 0 && data.msg_type === 'detail_progress') {
    const messageData = {
      goods_no: data.data.goods_no,
      temp_name: data.data.temp_name,
      status: data.data.status,
      goods_art_nos: data.data.goods_art_nos,
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    // 更新当前显示的消息
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条

    if (data.progress) {
      updateProgressStep('detail_progress', data.progress)
    }
  }
}

// 处理抠图进度消息
const handleSegmentProgressMessage = (data: any) => {
  console.log("segment_progress", data);

  if (data.code === 0 && data.msg_type === 'segment_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data.status,
      goods_art_nos: data.data.goods_art_nos,
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    // 更新当前显示的消息
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      if(['处理完成','处理失败'].includes( progressSteps.value[0].status)){
        return;
      }
      updateProgressStep('segment_progress', data.progress)
      if(data.progress?.folder){
       openOutputDir(data.progress?.folder)
      }
    }
  }
}

// 处理上脚图进度
const handleUpperFooterProgressMessage = (data: any) => {
  console.log("upper_footer_progress", data);
  if (data.code === 0 && data.msg_type === 'upper_footer_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('upper_footer_progress', data.progress)
    }
  }
}

// 处理场景图进度
const handleSceneProgressMessage = (data: any) => {
  console.log("scene_progress", data);
  if (data.code === 0 && data.msg_type === 'scene_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()

    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('scene_progress', data.progress)
    }
  }
}

// 处理商品上传进度
const handleUploadGoodsProgressMessage = (data: any) => {
  console.log("upload_goods_progress", data);
  if (data.code === 0 && data.msg_type === 'upload_goods_progress') {
    const messageData = {
      goods_no: '',
      temp_name: '',
      status: data.data?.status || '',
      goods_art_nos: data.data?.goods_art_nos || [],
      msg: data.msg,
      timestamp: Date.now()
    }
    progressMessages.value.push(messageData)
    message.value = data.data.goods_art_nos ? `货号${data.data.goods_art_nos.join(', ')}：${data.msg}` : `${data.msg}`
    scrollMessageListToBottom()
    // 更新新的进度条
    if (data.progress) {
      updateProgressStep('upload_goods_progress', data.progress)
    }
  }
}

// 打开输出目录：appConfig.appPath + '/build/extraResources/py/output'
const openOutputDir = (path) => {
  try {
    let fullPath = ''
    if(path){
      fullPath = path
    }else{

      const appPath = useConfigInfoStore?.appConfig?.appPath || ''
      if (!appPath) {
        ElMessage.error('未获取到应用目录 appPath')
        return
      }
      fullPath  = `${pyPath}\\output`
    }
    clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
    clientStore.ipc.send(icpList.utils.shellFun, {
      action: 'openPath',
      params: fullPath.replace(/\//g, '\\')
    });
  } catch (e) {
    console.error(e)
    ElMessage.error('打开目录失败')
  }
}

// 检测参数是否有效
const checkParams = async function () {
  const useConfigInfoStore = configInfo();
  const tokenInfoStore = tokenInfo();
  const token = tokenInfoStore.getToken;
  let temp_list = []
  templates.value.map(item => {
    temp_list.push({
      template_id: item.template_id,
      template_local_classes: item.template_local_classes,
    })
  })
  // 根据选择的服务内容设置参数
  const isDetail = form.services.includes('is_detail') ? 1 : 0
  const isProductScene = form.services.includes('is_product_scene') ? 1 : 0
  const isUpperFooter = form.services.includes('is_upper_footer') ? 1 : 0

  const params = {
    goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
    logo_path: form.logo_path || '',
    temp_name: form.selectTemplate?.template_id || '',
    excel_path: form.dataType == '1' ? form.excel_path : '',
    template_image_order: form.selectTemplate?.template_image_order,
    temp_list,
    token,
    uuid: uuidStore.getUuid || '',
    // 新增服务参数 - 合并国内和国外平台
    online_stores: [...(domesticPlatforms.value || []), ...(foreignPlatforms.value || [])],
    is_detail: isDetail,
    is_product_scene: isProductScene,
    is_upper_footer: isUpperFooter,
    upper_footer_params: selectedModels.value ? {
      man_id: selectedModels.value.male?.id || "",
      women_id: selectedModels.value.female?.id || ""
    } :  {},
    product_scene_prompt: scenePrompt.value || '',
    is_check: 1 // 仅检测，不生成
  }

  try {
    // 直接调用API进行检测，因为检测模式会直接返回结果
    const response = await clientStore.ipc.invoke(icpList.generate.generatePhotoDetail, params);
    console.log('=======checkParamscheckParamscheckParamscheckParams===========');
    console.log(params);
    console.log(response);
    if (response.code === 0) {
      return response;
    } else {
      throw new Error(response.msg || '检测失败');
    }
  } catch (error) {
    throw new Error(error.message || '检测失败');
  }
}

// 开始生成操作
const generate = async function () {
  if (requesting.value) {
    return
  }

  if(form.services.length == 0){
    ElMessage.error('请选择服务内容')
    return
  }

  // 必填验证
  if (form.services.includes('is_upper_footer') && !( selectedModels.value && selectedModels.value.male?.id  &&  selectedModels.value.female?.id)) {
    openModelDialog();
    setTimeout(()=>{
      ElMessage.error('请选择模特')
    },200)
    return
  }

  if (form.services.includes('is_product_scene') && !scenePrompt.value) {
    openScenePromptDialog();
    setTimeout(()=>{
      ElMessage.error('请设置场景提示词')
    },200)
    return
  }

  if(form.services.includes('is_detail')){
    if ( form.dataType == '1'  && !form.excel_path) {
      ElMessage.error('请上传商品基础资料')
      return
    }
  }

  // 埋点：开始生成详情页
  clickLog({
    describe: {
      action: '点击开始生成详情页',
      services: form.services,
      dataType: form.dataType,
      template_name: form.selectTemplate?.template_name,
      goods_count: goods_art_nos.value.length,
      goods_art_nos: goods_art_nos.value
    }
  }, route);
  // 先进行检测
  let checkResult;
  try {
    requesting.value =  true
   // ElMessage.info('正在检测参数，请稍候...');
    checkResult = await checkParams();
   // ElMessage.success('检测通过，开始生成...');
  } catch (error) {
    ElMessage.error(error.message || '检测失败，请检查参数');
    requesting.value =  false
    return;
  }

  const useConfigInfoStore = configInfo();
  console.log(useConfigInfoStore.appConfig);

  const tokenInfoStore = tokenInfo();
  const token = tokenInfoStore.getToken; // 使用 getToken() 获取 token
  let temp_list = []
  templates.value.map(item => {
    temp_list.push({
      template_id: item.template_id,
      template_local_classes: item.template_local_classes,
    })
  })
  // 根据选择的服务内容设置参数
  const isDetail = form.services.includes('is_detail') ? 1 : 0
  const isProductScene = form.services.includes('is_product_scene') ? 1 : 0
  const isUpperFooter = form.services.includes('is_upper_footer') ? 1 : 0

  const params = {
    goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
    logo_path: form.logo_path || '',
    temp_name: form.selectTemplate?.template_id || '',
    excel_path: form.dataType == '1' ? form.excel_path : '',
    template_image_order: form.selectTemplate?.template_image_order,
    temp_list,
    token,
    uuid: uuidStore.getUuid || '',
    // 新增服务参数 - 合并国内和国外平台
    online_stores: [...(domesticPlatforms.value || []), ...(foreignPlatforms.value || [])],
    is_detail: isDetail,
    is_product_scene: isProductScene,
    is_upper_footer: isUpperFooter,
    upper_footer_params: selectedModels.value ? {
      man_id: selectedModels.value.male?.id || "",
      women_id: selectedModels.value.female?.id || ""
    } :  {},
    product_scene_prompt: scenePrompt.value || '',
    is_check: 0 // 正式生成
  }

  console.log(params)
  // 开启进度弹窗
  requesting.value =  true
  partErrList.value = []
  message.value = '正在为您处理，请稍后'
  progress.value = 0
  // 清空之前的进度消息
  progressMessages.value = []
  showMessageHistory.value = true

  // 启用新的进度条并初始化步骤
  useNewProgress.value = true
  // 清空之前的进度步骤
  progressSteps.value = []
  // 从检测结果中获取步骤信息
  const backendSteps = checkResult?.data?.progress || []
  initProgressSteps(backendSteps)

  openLoadingDialog(goods_art_nos.value.length * 10)
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
  clientStore.ipc.send(icpList.generate.generatePhotoDetail, params);


  /*
  * detail_result_progress
  *
  * */
  // 监听进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
  clientStore.ipc.on(icpList.socket.message + '_detail_progress', (event, data) => {
    console.log('_detail_progress',data);
    handleProgressMessage(data)
  });

  // 监听抠图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
  clientStore.ipc.on(icpList.socket.message + '_segment_progress', (event, data) => {
    console.log('_segment_progress',data);
    handleSegmentProgressMessage(data)
  });
  // 监听上脚图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
  clientStore.ipc.on(icpList.socket.message + '_upper_footer_progress', (event, data) => {
    console.log('_upper_footer_progress',data);
    handleUpperFooterProgressMessage(data)
  });
  // 监听场景图进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
  clientStore.ipc.on(icpList.socket.message + '_scene_progress', (event, data) => {
    console.log('_scene_progress',data);
    handleSceneProgressMessage(data)
  });
  // 监听商品上传进度消息
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
  clientStore.ipc.on(icpList.socket.message + '_upload_goods_progress', (event, data) => {
    console.log('_upload_goods_progress',data);
    handleUploadGoodsProgressMessage(data)
  });

  clientStore.ipc.on(icpList.socket.message + '_detail_result_progress', (event, result) => {
    if(result.code !== 0 ){
     if(result.msg){
       handleFail(result.msg)
       message.value = 'result.msg'
     }
      progress.value = 0
      loadingDialogVisible.value = false
      requesting.value = false
      return;
    }

    console.log('result', result)
    requesting.value =  true
    setTimeout(() => {
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_result_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
      clientStore.ipc.removeAllListeners(icpList.socket.message + '_upload_goods_progress');
    }, 100)
    clearInterval(INTERVAL.value)
    if (result.code === 0) {
      const { output_folder, list } = result.data
      const allSuccess = list.every(item => item.success);
      const allFailure = list.every(item => !item.success);
      if (allSuccess) {
        console.log("全部成功")
        handleSuccess(output_folder, '全部生成成功')
      } else if (allFailure) {
        console.log("全部失败");
        handleFailure(list)
      } else {
        console.log("部分成功，部分失败");
        handlePartSuccess(output_folder, list)
      }
    } else {
      console.log('code全部生成失败')
      handleFail(result.msg)
    }
    //生成失败 (接口请求失败)
    function handleFail(errorMsg: string) {
     // loadingDialogVisible.value = false
     //  disabledButton.value = false
      if (errorMsg) {
        ElMessage.error(errorMsg)
      }
      requesting.value = false  // 重置请求状态，允许再次生成

      // 处理完成后停止监听进度消息
     // clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
    //  clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
    }

    // 全部生成成功
    function handleSuccess(href, loadingMsg) {
      // 埋点：生成完成
      setLogInfo(route, { action: '生成完成', output_folder: href, message: loadingMsg });

      completeDirectory.value = href
      progress.value = 100
      disabledButton.value = false
      message.value = loadingMsg
      requesting.value = false  // 重置请求状态，允许再次生成

      handleComplete()
    }
    // 部分成功
    function handlePartSuccess(output_folder: string, partSuccessList) {
      let errorList = []
      partSuccessList.map(item => {
        if (!item.success) {
          errorList.push(item)
        }
      })
      partErrList.value = errorList
      handleSuccess(output_folder, '部分货号生成失败')
    }
    // 全部生成失败
    function handleFailure(partSuccessList) {
      // 埋点：生成失败（携带货号）
      const failedGoods = (partSuccessList || []).map(item => item.goods_art_no).filter(Boolean)
      setLogInfo(route, { action: '生成失败', error_count: partSuccessList.length, goods_art_nos: goods_art_nos.value, failed_goods_art_nos: failedGoods });

      let errorList = []
      partSuccessList.map(item => {
        if (!item.success) {
          errorList.push(item)
        }
      })
      partErrList.value = errorList
      completeDirectory.value = ''
      progress.value = 100
      disabledButton.value = true
      message.value = '全部货号生成失败'
      requesting.value = false  // 重置请求状态，允许再次生成

    }
    requesting.value = false
  });
}
const openLoadingDialog = (timer: number) => {
  loadingDialogVisible.value = true

  disabledButton.value = true
  // 根据传入的秒数计算每次增加的进度值
  const step = 100 / timer
  INTERVAL.value = setInterval(() => {

    if (progress.value < 50) {
      progress.value = Math.min(progress.value + step, 100)
    } else if (progress.value < 70) {
      progress.value = Math.min(progress.value + step / 2, 100)
    } if (progress.value < 85) {
      progress.value = Math.min(progress.value + step / 5, 100)
    } else if (progress.value < 90) {
      progress.value = Math.min(progress.value + step / 10, 100)
    } else if (progress.value < 95) {
      progress.value = Math.min(progress.value + step / 50, 100)// 新增中间阶段
    } else {
      progress.value = Math.min(progress.value + step / 100, 100)
    }
  }, 1000)
}


//logo
const logoList = ref([])
const onInput = (value) => {
  addLogo(value)
}
const onRemove = (index) => {
  if(logoList.value[index] === form.logo_path){
    form.logo_path = ''
  }
  clientStore.ipc.send(icpList.generate.deleteLogo,{
    path:logoList.value[index]
  });
  logoList.value.splice(index, 1)
  clientStore.ipc.on(icpList.generate.deleteLogo, async (event, result) => {
    console.log('deleteLogo');
    console.log(result);

    clientStore.ipc.removeAllListeners(icpList.generate.deleteLogo);
  })
}

const getLogolist = async () => {
  clientStore.ipc.send(icpList.generate.getLogoList);
  clientStore.ipc.on(icpList.generate.getLogoList, async (event, result) => {
    logoList.value = result.data || []
    console.log('getLogoList')
    console.log(result.data)
    if(logoList.value.length && !form.logo_path){
      form.logo_path = logoList.value[0]
      // 保存默认LOGO到缓存
      saveLogoToCache(form.logo_path)
    }
    clientStore.ipc.removeAllListeners(icpList.generate.getLogoList);
  })
}


const addLogo = async (path) => {
  console.log(path);
  clientStore.ipc.send(icpList.generate.addLogo,{
    logo_path:path
  });
  clientStore.ipc.on(icpList.generate.addLogo, async (event, result) => {
    console.log(result);

    if (result.code === 0) {
        console.log("添加成功")
      console.log(result)
      if(result.data.logo){
        form.logo_path = result.data.logo
        // 保存新添加的LOGO到缓存
        saveLogoToCache(form.logo_path)
        if(logoList.value.indexOf(result.data.logo) <0){
          logoList.value.push(result.data.logo)
        }
      }
    }
    clientStore.ipc.removeAllListeners(icpList.generate.addLogo);
  })
}


function selectExcel() {
  clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  clientStore.ipc.send(icpList.utils.openFile, {
    filters: [
      { name: '支持xls,xlsx', extensions: ['xlsx', 'xls'] }
    ],
    title: "选择基础文件资料"
  });
  clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
    form.excel_path = result
    clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  })
}


const Router = useRouter()
//打开主图详情
function openPhotographySeniorDetail() {

  const { href } = Router.resolve({
    name: 'PhotographySeniorDetail'
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '详情高级配置',
    width: 1000,
    height: 630,
    frame: true,
    id: "PhotographySeniorDetail",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}




const handleComplete = () => {
  // loadingDialogVisible.value = false
  // 这里可以添加打开目录的逻辑
  if(!completeDirectory.value){
     openOutputDir()
    return
  }
  clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
  let params = {
    action: 'openPath',
    params: completeDirectory.value?.replace(/\//g, '\\')
  }
  clientStore.ipc.send(icpList.utils.shellFun, params);
}

const selectFolder = () => {
  clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
  clientStore.ipc.send(icpList.utils.openDirectory);
  clientStore.ipc.on(icpList.utils.openDirectory, async (event, result) => {
    folderPath.value = result
    clientStore.ipc.removeAllListeners(icpList.utils.openDirectory);
  })
}


</script>

<style lang="scss" scoped>
.detail-container {
  background-color: #EAECED;
  width: 100%;
  min-width: 600px;
  padding: 20px;
  overflow: hidden;
  min-height: calc(100vh - 30px);

}

.service-section {
  margin-bottom: 20px;
  .service-cards {
    display: flex;
    gap: 60px;
    margin-top: 16px;
  }
  .service-card {
    width: 240px;
    height: 140px;

    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: flex-start;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &:hover {
      border-color: #2957FF;
      box-shadow: 0 2px 8px rgba(41, 87, 255, 0.1);
    }

    &.active {
      border: 3px solid #2957FF;
      background: #f8f9ff;
      box-shadow: 0 4px 12px rgba(41, 87, 255, 0.25);
    }

          .service-checkbox {
        position: absolute;
        left: -40px;
        top: 10px;
        width: 30px;
        transform: scale(1.5);
        z-index: 10;
        ::v-deep{
          .el-checkbox {
            display: block;
            margin-right: 0;
          }
          .el-checkbox__input {
            cursor: pointer;
          }
        }
      }

    .service-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;;
    }

    .service-image {
      position: absolute;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }

      .service-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background: #2957FF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
      }
    }

    .service-name {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      position: absolute;
      background: rgba(0,0,0,.5);
      height: 30px;
      line-height: 30px;
      color: #fff;
      left: 0;
      right: 0;
      bottom:0px
    }
  }
}

.logo-section,
.template-section,
.data-prep-section {
  margin-bottom: 20px;
}

.logo-template-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  .logo-col { flex: 2; min-width: 300px; }
  .template-col { flex: 3; }
}

.logo-section {
  .upload-item {
    border: 2px solid rgba(0,0,0,0);

  }
  .active {
    border: 2px solid #2957FF;
    border-radius: 6px;
    overflow: hidden;;
  }

  &.multi-line {
    flex-direction: row; // 默认横向排列
    flex-wrap: wrap; // 允许换行
    align-items: flex-start; // 对齐方式调整为顶部对齐

    .upload-item {
      margin-bottom: 10px; // 每行之间增加间距
      width: 90px; // 每行显示 4 个元素，减去外边距
      box-sizing: border-box; // 确保宽度计算包含 padding 和 border
    }
  }
}
.logo-upload {
  border: 1px dashed #ccc;
  border-radius: 5px;
  padding: 50px 0;
  text-align: center;
  cursor: pointer;
}

.template-pagination button {
  margin-right: 5px;
}

.template-pagination span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}


.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;


  .template-item {
    width: calc(25% - 18px);
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    background: #f0f0f0;
    position: relative;
    overflow: hidden;

    .template-info {
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba($color: #000000, $alpha: .3);
      width: 100%;
      height: 36px;
      line-height: 36px;
      color: #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .template-view {
        background: #DFE2E3;
        color: #3366FF;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
      }
    }
  }
}

.publish-section {
  .label {
    min-width: 120px;
    margin-right: 12px;
  }
}



.excel-upload {
  width: 100%;
  background: #F7F7F7;
  padding: 20px 0;
}

.generate-button {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.select-button {
  background: #DFE2E3 !important;
  color: #3366FF !important;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 550;

}

.select-warp {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: #fff;
  position: absolute;
  top: 10px;
  left: 10px;

  &.active {
    background-color: #1677FF;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #474747;
}



.section {
  margin-bottom: 24px;

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #474747;
  }

  .section-content {
    padding-left: 16px;
  }
}

.instruction-out {
  background: #EAF3FF;
  border-radius: 4px;
  border: 1px solid #CBE1FF;
  padding: 10px 20px;
  width: 80%;
  position: relative;

  .instruction-list {
    margin: 0px 0 0 10px;
    padding-left: 20px;
    padding-right: 40px;
    width: 100%;

    li {
      margin-bottom: 4px;
      text-align: left;
      font-size: 14px;
    }
  }

  .close-icon {
    position: absolute;
    top: 12px;
    right: 19px;
  }
}



.form-item {
  margin: 16px 0;
  display: flex;


  .label {
    min-width: 120px;
    margin-right: 12px;
  }

  .folder-warp {
    width: 100%;
    display: flex;
    flex-direction: column;

    .folder-input {
      flex: 1;
      display: flex;
      align-items: center;

      .check-button {
        background: #DFE2E3;
        border-radius: 6px;
        padding: 6px 12px;
        color: #2957FF;
        margin-left: 20px;
      }

    }
  }

  .hint {
    text-align: left;
    color: #999;
    margin-top: 6px;
    font-size: 14px;
    color: #FF4C00;
    font-style: normal;
  }

  .specific-page-input {
    flex: 1;
  }
}

.image-order {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;

  .footer-button {
    padding: 10px 20px;
  }
}

.explain-btn {
  padding-left: 20px;
  padding-right: 20px;
  color: #2957FF !important;
}

.progress-messages {
  margin-top: 20px;
  border-top: 1px solid #e4e7ed;
  padding-top: 20px;
  width: 100%;
  display: none;

  .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    color: #606266;
  }

  .message-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 10px;
    background: #fafafa;

    .message-item {
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .message-time {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }

      .message-content {
        font-size: 14px;
        line-height: 1.4;

        .goods-no {
          color: #2957FF;
          font-weight: 500;
        }

        .message-text {
          color: #606266;
        }
      }
    }
  }
}
</style>