iframe引用说明

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;