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

<template>
  <headerBar
      title="主图与详情高级配置"
  />
  <div class="image-config">
    <div class="config-card">
      <!-- 图片抠图与货号图生成 -->
      <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>

          <!-- 货号文件夹 -->
          <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>

          <!-- 抠图模式 -->
          <div class="form-item">
            <div class="label">抠图模式：</div>
            <el-radio-group v-model="reportMode">
              <el-radio label="normal">普通模式</el-radio>
              <el-radio label="optimized">精细化扣图</el-radio>
            </el-radio-group>
          </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">
          <!-- 图片顺序 -->
          <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>

          <!-- 同款检验 -->
          <div class="form-item">
            <div class="label">同款检验：</div>
            <el-checkbox v-model="checkSimilar">同款下货号必须齐全</el-checkbox>
          </div>

          <!-- 可指定页面独修改 -->
          <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>
        </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>
      </div>

    </div>


    <loading-dialog v-model="dialogVisible" :progress="progress" :message="message" :show-button="showButton"
      @button-click="handleComplete" />
  </div>

</template>

<script setup lang="ts">
import headerBar from '@/components/header-bar/index.vue'
import { ref } from 'vue'
import { Close, Warning } from '@element-plus/icons-vue'
import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'
import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
const clientStore = client();

const showTips = ref(true)

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


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

const saveConfig = () => {
  const params = {
    folderPath: folderPath.value,
    reportMode: reportMode.value,
    imageOrder: imageOrder.value,
    checkSimilar: checkSimilar.value,
    specificPage: specificPage.value
  }
  console.log("%c Line:139 🥕 params", "color:#93c0a4", params);
  // 保存配置逻辑
  console.log('保存配置')
}

const startProcess = () => {
  dialogVisible.value = true
  progress.value = 0
  showButton.value = true
  // 模拟进度更新
  const interval = setInterval(() => {
    if (progress.value < 100) {
      progress.value += 10
    } else {
      clearInterval(interval)
      message.value = '全部处理完毕'
      showButton.value = false
    }
  }, 500)
}

const handleComplete = () => {
  dialogVisible.value = false
  // 这里可以添加打开目录的逻辑
  console.log('打开目录')
}

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>
.image-config {

  .config-card {
    background: #EAECED;
    padding: 20px;
    overflow-x: hidden;
    height: calc(100vh  - 30px);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-icons {
        display: flex;
        gap: 8px;
      }
    }
  }

  .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;
}
</style>