iframe引用说明

src/i18n/locales/de.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "Sie können Spine JSON, Bilder ZIP exportieren oder .spine-Projekte über den Connector generieren.",
     "connectorTitle": "Gebrauchsanweisung für den Spine-Stecker",
     "connectorIntro": "Der Connector übermittelt JSON und von der Webseite generierte Bilder an Spine, das auf dem lokalen Computer installiert und aktiviert wurde, und konvertiert sie in bearbeitbare .spine-Projekte.",
+    "embedTitle": "Editor einbetten",
+    "embedIntro": "Verwenden Sie zum Einbetten des Editors folgenden iframe:",
     "prerequisite": "Frontload",
     "prerequisiteDesc": "Auf dem Computer ist Spine installiert und aktiviert, und der Desktop-Connector wurde gestartet.",
     "download": "herunterladen",

src/i18n/locales/en.json

@@ -904,6 +904,8 @@
     "exportButtonsDesc": "Export Spine JSON, an images ZIP, or a complete .spine project through the connector.",
     "connectorTitle": "Spine Connector",
     "connectorIntro": "The connector sends generated JSON and images to a locally installed and activated Spine editor and converts them into an editable .spine project.",
+    "embedTitle": "Editor embedding",
+    "embedIntro": "To embed the editor, use the following iframe markup:",
     "prerequisite": "Requirements",
     "prerequisiteDesc": "Install and activate Spine, then start the desktop connector.",
     "download": "Download",

src/i18n/locales/es.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "Puede exportar Spine JSON, imágenes ZIP o generar proyectos .spine a través del conector.",
     "connectorTitle": "Instrucciones de uso del conector Spine",
     "connectorIntro": "El conector entrega el JSON y las imágenes generadas por la página web al Spine que se ha instalado y activado en la máquina local, y los convierte en proyectos .spine editables.",
+    "embedTitle": "Integración del editor",
+    "embedIntro": "Para integrar el editor, utilice el siguiente iframe:",
     "prerequisite": "carga frontal",
     "prerequisiteDesc": "La computadora tiene Spine instalado y activado, y se ha iniciado el conector de escritorio.",
     "download": "descargar",

src/i18n/locales/fr.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "Vous pouvez exporter Spine JSON, des images ZIP ou générer des projets .spine via le connecteur.",
     "connectorTitle": "Mode d'emploi du connecteur Spine",
     "connectorIntro": "Le connecteur transmet le JSON et les images générées par la page Web au Spine qui a été installé et activé sur la machine locale, et les convertit en projets .spine modifiables.",
+    "embedTitle": "Intégration de l’éditeur",
+    "embedIntro": "Pour intégrer l’éditeur, utilisez le code iframe suivant :",
     "prerequisite": "chargement initial",
     "prerequisiteDesc": "L'ordinateur a Spine installé et activé, et le connecteur de bureau a été lancé.",
     "download": "télécharger",

src/i18n/locales/ja.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "コネクタを介して、Spine JSON、画像 ZIP をエクスポートしたり、.spine プロジェクトを生成したりできます。",
     "connectorTitle": "Spine コネクタの使用説明書",
     "connectorIntro": "コネクタは、JSON と Web ページによって生成されたイメージを、ローカル マシンにインストールされアクティブ化されている Spine に配信し、編集可能な .spine プロジェクトに変換します。",
+    "embedTitle": "エディタの埋め込み",
+    "embedIntro": "エディタを埋め込むには、次の iframe を使用してください：",
     "prerequisite": "フロントロード",
     "prerequisiteDesc": "コンピューターには Spine がインストールされてアクティブ化されており、デスクトップ コネクタが起動されています。",
     "download": "ダウンロード",

src/i18n/locales/ko.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "커넥터를 통해 Spine JSON, 이미지 ZIP를 내보내거나 .spine 프로젝트를 생성할 수 있습니다.",
     "connectorTitle": "Spine 커넥터 사용 지침",
     "connectorIntro": "커넥터는 웹 페이지에서 생성된 JSON 및 이미지를 로컬 시스템에 설치 및 활성화된 Spine에 전달하고 이를 편집 가능한 .spine 프로젝트로 변환합니다.",
+    "embedTitle": "에디터 삽입",
+    "embedIntro": "에디터를 삽입하려면 다음 iframe을 사용하세요:",
     "prerequisite": "프론트로드",
     "prerequisiteDesc": "컴퓨터에 Spine가 설치 및 활성화되었으며 데스크탑 커넥터가 실행되었습니다.",
     "download": "다운로드",

src/i18n/locales/pt-BR.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "Você pode exportar Spine JSON, imagens ZIP ou gerar projetos .spine por meio do conector.",
     "connectorTitle": "Instruções de uso do conector Spine",
     "connectorIntro": "O conector entrega o JSON e as imagens geradas pela página da web ao Spine que foi instalado e ativado na máquina local e os converte em projetos .spine editáveis.",
+    "embedTitle": "Incorporação do editor",
+    "embedIntro": "Para incorporar o editor, use o seguinte iframe:",
     "prerequisite": "carregamento antecipado",
     "prerequisiteDesc": "O computador tem Spine instalado e ativado e o conector de desktop foi iniciado.",
     "download": "download",

src/i18n/locales/ru.json

@@ -904,6 +904,8 @@
     "exportButtonsDesc": "Экспорт Spine JSON, ZIP-архива images или создание проекта .spine через коннектор.",
     "connectorTitle": "Справка по коннектору Spine",
     "connectorIntro": "Коннектор передаёт созданные на веб-странице JSON и изображения в установленный и активированный локальный Spine и преобразует их в редактируемый проект .spine.",
+    "embedTitle": "Встраивание редактора",
+    "embedIntro": "Чтобы встроить редактор, используйте следующий iframe:",
     "prerequisite": "Предварительные требования",
     "prerequisiteDesc": "Spine должен быть установлен и активирован, а настольная версия коннектора — запущена.",
     "download": "Скачать",

src/i18n/locales/zh-CN.json

@@ -904,6 +904,8 @@
     "exportButtonsDesc": "可导出 Spine JSON、images ZIP，或通过连接器生成 .spine 工程。",
     "connectorTitle": "Spine 连接器使用说明",
     "connectorIntro": "连接器把网页生成的 JSON 和图片交给本机已安装并激活的 Spine，转换成可编辑的 .spine 工程。",
+    "embedTitle": "编辑器嵌入",
+    "embedIntro": "如需嵌入编辑器，请使用以下 iframe 方式：",
     "prerequisite": "前置",
     "prerequisiteDesc": "电脑已安装并激活 Spine，并已启动桌面版连接器。",
     "download": "下载",

src/i18n/locales/zh-TW.json

@@ -881,6 +881,8 @@
     "exportButtonsDesc": "可導出 Spine JSON、images ZIP，或透過連接器產生 .spine 工程。",
     "connectorTitle": "Spine 連接器使用說明",
     "connectorIntro": "連接器把網頁產生的 JSON 和圖片交給本機已安裝並啟動的 Spine，轉換成可編輯的 .spine 工程。",
+    "embedTitle": "編輯器嵌入",
+    "embedIntro": "如需嵌入編輯器，請使用以下 iframe 方式：",
     "prerequisite": "前置",
     "prerequisiteDesc": "電腦已安裝並啟動 Spine，並已啟動桌面版連接器。",
     "download": "下載",

src/views/HelpDialog.vue

@@ -208,6 +208,16 @@
           </div>
         </section>
 
+        <section class="help-section help-module" :class="{ open: openModules[9] }">
+          <button type="button" class="help-module-head" :aria-expanded="openModules[9] ? 'true' : 'false'" @click="openModules[9] = !openModules[9]">
+            <span class="mnum">10</span><span class="mtitle">{{ $t('help.embedTitle') }}</span><span class="caret">{{ openModules[9] ? '▾' : '▸' }}</span>
+          </button>
+          <div v-show="openModules[9]" class="help-module-body">
+            <p class="embed-intro">{{ $t('help.embedIntro') }}</p>
+            <pre class="embed-code"><code>{{ embedCode }}</code></pre>
+          </div>
+        </section>
+
           <section class="help-section help-export">
             <h3>{{ $t('help.differenceTitle') }}</h3>
             <p>{{ $t('help.differenceDesc') }}</p>
@@ -253,7 +263,14 @@ const emit = defineEmits<{ (event: 'close'): void }>()
 const activeTab = ref<'guide' | 'updates'>('guide')
 
 // 功能模块详解：默认全部收起，点击标题栏展开/收起单个模块。
-const openModules = ref<boolean[]>(Array.from({ length: 9 }, () => false))
+const openModules = ref<boolean[]>(Array.from({ length: 10 }, () => false))
+const embedCode = `<iframe style="width: 75%;height: 80%;border: 10px solid #ccc;border-radius: 10px;display: block;margin: 0 auto;"
+    src="https://spineparticles.yeomai.site/#/editor"
+    title="SpineParticlesEditor"
+    allow="clipboard-read; clipboard-write; fullscreen"
+    allowfullscreen
+    referrerpolicy="strict-origin-when-cross-origin"
+  ></iframe>`
 
 const releases = [
   {
@@ -406,6 +423,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
 .help-module.help-connector .help-module-head { color: var(--ui-accent-text-soft); }
 .help-module .connector-intro { margin: 0 0 10px; color: var(--ui-text-body); font-size: 11px; line-height: 1.6; }
 .help-module .connector-intro b { color: var(--ui-text-strong); }
+.help-module .embed-intro { margin: 0 0 10px; color: var(--ui-text-body); font-size: 11px; line-height: 1.6; }
+.help-module .embed-code {
+  margin: 0; padding: 11px 12px; overflow-x: auto; border: 1px solid var(--ui-border-strong); border-radius: 7px;
+  background: var(--ui-control-deep); color: var(--ui-text-body); font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
+  user-select: text; white-space: pre; tab-size: 2;
+}
 .help-module .dl-link {
   display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 10px 6px 0; padding: 6px 12px;
   border: 1px solid var(--ui-accent-button); border-radius: 6px; background: var(--ui-accent-bg); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;