图片翻译iframe精修工具

{
// 固定值
"name": "XJ_IMAGE_EDITOR_URL",
// 当前图片的精修url
"url": "https://i.tosoiot.com/a.png",
// 当前图片的requestId
"requestId": "f350044c1c722a35",
// 本次批量精修中所有图片的requestId与精修后url映射，包括当前正在编辑的图片
// 注意：没有经过精修工具编辑的图片url仍为通过api翻译的图片url
"all": {
  "f350044c1c722a35": "https://i.tosoiot.com/a.png",
  "3dca52098ecd4550": "https://i.tosoiot.com/b.png"
}
}

<template>
  <div>
    <!-- 弹窗组件 -->
    <el-dialog v-model="visible" title="图片精修工具" width="80%" height="80%">
      <!-- 只有在弹窗可见时才加载 iframe，确保 onload 与监听逻辑生效 -->
      <iframe
        v-if="visible"
        id="xiangji-image-editor"
        ref="editorIframe"
        title="象寄图片精修工具"
        style="width: 100%; height: 80vh;"
        :src="editorUrl"
        frameborder="0"
        @load="onIframeLoad"
      ></iframe>
    </el-dialog>

    <!-- 示例按钮 -->
    <el-button type="primary" @click="openEditor">打开精修工具</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const visible = ref(false);
const editorIframe = ref(null);
const editorUrl = 'https://www.xiangjifanyi.com/image-editor/#/?lang=CHS';

function openEditor() {
  visible.value = true;
}

// iframe 加载完成后发送 postMessage
function onIframeLoad() {
  const iframe = editorIframe.value;
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage(
      {
        name: 'XJ_IMAGE_EDITOR_REQUESTIDS',
        requestIds: ['f350044c1c722a35'],
      },
      'https://www.xiangjifanyi.com'
    );
  }
}

// 监听来自 iframe 的消息
function handleMessage(e) {
  const { name, all } = e.data || {};
  if (e.origin === 'https://www.xiangjifanyi.com' && name === 'XJ_IMAGE_EDITOR_URL') {
    console.log('精修结果：', all);
  }
}

onMounted(() => {
  window.addEventListener('message', handleMessage);
});

onBeforeUnmount(() => {
  window.removeEventListener('message', handleMessage);
});
</script>