Yeomai/SpineParticlesWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中英双语

Browse Source
This commit is contained in:
tianmo committed 2026-10-22 18:13:43 +08:00
1 parent ea26af26ee
commit b98c0333e6
50 files changed
+4082 -2049
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/HelpDialog.vue
+80 -86
View File
@@ -3,197 +3,191 @@
<section class="help-dialog" role="dialog" aria-modal="true" aria-labelledby="help-title">
<header class="help-head">
<div>
<h2 id="help-title">使用说明</h2>
<p>从创建粒子到保存、导出的快速入门</p>
<h2 id="help-title">{{ $t('help.title') }}</h2>
<p>{{ $t('help.subtitle') }}</p>
</div>
<button class="help-close" aria-label="关闭使用说明" title="关闭 (Esc)" @click="close">✕</button>
<button class="help-close" :aria-label="$t('help.close')" :title="$t('help.closeShort')" @click="close">✕</button>
</header>
<div class="help-body">
<section class="help-section help-start">
<h3>快速开始</h3>
<h3>{{ $t('help.quickStart') }}</h3>
<ol>
<li><b>创建对象：</b>在左侧“场景对象”中用 ＋粒子 / ＋碰撞 / ＋路径 / ＋Spine 添加场景对象。</li>
<li><b>编辑粒子：</b>选中某个粒子系统，依次调整“发射模式 → 发射器形状 → 粒子属性 → 外观与资源 → 修改器”。</li>
<li><b>查看效果：</b>底部时间轴可播放、暂停、逐帧或拖动；修改任意参数后会自动重新计算。</li>
<li><b>保存与导出：</b>用“保存配置”保留工程；“导出 Spine Json / images 包 / .spine 包”输出成品。</li>
<li>{{ $t('help.stepCreate') }}</li>
<li>{{ $t('help.stepEdit') }}</li>
<li>{{ $t('help.stepPreview') }}</li>
<li>{{ $t('help.stepExport') }}</li>
</ol>
<p class="help-note">每个模块组标题右侧的“重置”可把该组参数恢复默认；系统设置会自动保存在当前浏览器。</p>
<p class="help-note">{{ $t('help.quickNote') }}</p>
</section>
<div class="help-grid">
<section class="help-section">
<h3>常用操作</h3>
<h3>{{ $t('help.commonOps') }}</h3>
<dl class="help-list">
<div><dt>小眼睛</dt><dd>单独显示/隐藏对象；隐藏的粒子系统不会被导出。</dd></div>
<div><dt>+Copy</dt><dd>完整复制当前选中对象，方便对比不同参数。</dd></div>
<div><dt>背景图</dt><dd>上传参考图并调整位置和透明度，只用于画布预览。</dd></div>
<div><dt>系统设置</dt><dd>管理界面布局、辅助显示、刻度等，自动存入浏览器。</dd></div>
<div><dt>撤销/重做</dt><dd>Ctrl+Z 撤回一步；可达成的步数在系统设置中调整。</dd></div>
<div><dt>Spine 骨骼</dt><dd>在层级树搜索并选择骨骼，可用于粒子发射器跟随。</dd></div>
<div><dt>{{ $t('help.eye') }}</dt><dd>{{ $t('help.eyeDesc') }}</dd></div>
<div><dt>+Copy</dt><dd>{{ $t('help.copyDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.background') }}</dt><dd>{{ $t('help.backgroundDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.settings') }}</dt><dd>{{ $t('help.settingsDesc') }}</dd></div>
<div><dt>{{ $t('help.undoShortcut') }}</dt><dd>{{ $t('help.undoDesc') }}</dd></div>
<div><dt>Spine Bone</dt><dd>{{ $t('help.spineBoneDesc') }}</dd></div>
</dl>
</section>
<section class="help-section">
<h3>快捷键</h3>
<h3>{{ $t('help.shortcuts') }}</h3>
<div class="shortcut-list">
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>Z</kbd><em>撤回上一步</em></div>
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>S</kbd><em>保存配置</em></div>
<div><kbd>Q</kbd><em>拖动画布</em></div>
<div><kbd>W</kbd><em>位移工具</em></div>
<div><kbd>E</kbd><em>旋转工具</em></div>
<div><kbd>R</kbd><em>缩放工具</em></div>
<div><kbd>D</kbd><em>播放 / 暂停</em></div>
<div><kbd>S</kbd><em>回到第一帧</em></div>
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>Z</kbd><em>{{ $t('help.undoShortcut') }}</em></div>
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>S</kbd><em>{{ $t('help.saveShortcut') }}</em></div>
<div><kbd>Q</kbd><em>{{ $t('help.panShortcut') }}</em></div>
<div><kbd>W</kbd><em>{{ $t('help.translateShortcut') }}</em></div>
<div><kbd>E</kbd><em>{{ $t('help.rotateShortcut') }}</em></div>
<div><kbd>R</kbd><em>{{ $t('help.scaleShortcut') }}</em></div>
<div><kbd>D</kbd><em>{{ $t('help.playShortcut') }}</em></div>
<div><kbd>S</kbd><em>{{ $t('help.startShortcut') }}</em></div>
</div>
<p class="help-note">Q / W / E / R 需先点击画布；光标位于输入框时，单键快捷键不会触发。</p>
<p class="help-note">{{ $t('help.shortcutNote') }}</p>
</section>
</div>
<div class="help-doc-title">功能模块详解</div>
<div class="help-doc-title">{{ $t('help.modules') }}</div>
<section class="help-section help-module" :class="{ open: openModules[0] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[0] ? 'true' : 'false'" @click="openModules[0] = !openModules[0]">
<span class="mnum">1</span><span class="mtitle">配置管理</span><span class="caret">{{ openModules[0] ? '▾' : '▸' }}</span>
<span class="mnum">1</span><span class="mtitle">{{ $t('help.configTitle') }}</span><span class="caret">{{ openModules[0] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[0]" class="help-module-body">
<dl class="help-list">
<div><dt>保存配置</dt><dd>把当前全部场景对象和参数保存为工程 JSON 文件（也支持 Ctrl+S）。</dd></div>
<div><dt>加载配置</dt><dd>选择本地配置文件，恢复完整工程。</dd></div>
<div><dt>预设</dt><dd>从下拉中选择已保存的预设快速套用；点击下拉即可刷新列表。</dd></div>
<div><dt>范围</dt><dd>配置只含对象与参数，不含“系统设置”；系统设置单独存于浏览器。</dd></div>
<div><dt>{{ $t('config.save') }}</dt><dd>{{ $t('help.saveConfigDesc') }}</dd></div>
<div><dt>{{ $t('config.load') }}</dt><dd>{{ $t('help.loadConfigDesc') }}</dd></div>
<div><dt>{{ $t('config.selectPreset') }}</dt><dd>{{ $t('help.presetDesc') }}</dd></div>
<div><dt>{{ $t('help.configScope') }}</dt><dd>{{ $t('help.configScopeDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[1] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[1] ? 'true' : 'false'" @click="openModules[1] = !openModules[1]">
<span class="mnum">2</span><span class="mtitle">场景对象</span><span class="caret">{{ openModules[1] ? '▾' : '▸' }}</span>
<span class="mnum">2</span><span class="mtitle">{{ $t('help.sceneTitle') }}</span><span class="caret">{{ openModules[1] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[1]" class="help-module-body">
<dl class="help-list">
<div><dt>粒子</dt><dd>核心对象。可设名称、位置 X/Y、偏移、旋转、缩放 X/Y，以及“随机种子”——相同种子可精确复现同一次效果。</dd></div>
<div><dt>碰撞</dt><dd>圆形/椭圆/矩形/多边形/自定义；启用开关、碰撞响应（物理弹跳/暂停/销毁）、弹性与摩擦，还可沿某条路径移动并带进度曲线。</dd></div>
<div><dt>路径</dt><dd>贝塞尔路径，可双击新建/删除锚点、拖手柄调曲线；内置圆/方/多边形/星形预设，支持闭合与颜色。</dd></div>
<div><dt>Spine</dt><dd>加载 .json+.atlas+.png 预览骨骼动画，可查看/搜索骨骼层级树，用于粒子“发射器跟随”。</dd></div>
<div><dt>通用</dt><dd>每个对象都有小眼睛显隐；“+Copy”可以复制当前对象；隐藏的粒子系统不会进入导出。</dd></div>
<div><dt>{{ $t('scene.particle') }}</dt><dd>{{ $t('help.particleDesc') }}</dd></div>
<div><dt>{{ $t('scene.collision') }}</dt><dd>{{ $t('help.colliderDesc') }}</dd></div>
<div><dt>{{ $t('scene.path') }}</dt><dd>{{ $t('help.pathDesc') }}</dd></div>
<div><dt>Spine</dt><dd>{{ $t('help.spineDesc') }}</dd></div>
<div><dt>{{ $t('help.commonOps') }}</dt><dd>{{ $t('help.sceneCommonDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[2] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[2] ? 'true' : 'false'" @click="openModules[2] = !openModules[2]">
<span class="mnum">3</span><span class="mtitle">发射模式</span><span class="caret">{{ openModules[2] ? '▾' : '▸' }}</span>
<span class="mnum">3</span><span class="mtitle">{{ $t('emission.title') }}</span><span class="caret">{{ openModules[2] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[2]" class="help-module-body">
<dl class="help-list">
<div><dt>持续</dt><dd>按“每秒发射数量”持续喷射；再分“常规持续”（发射时长）与“循环持续”（三段式：开始循环 / 纯循环 / 结束循环，可自动或自定义帧长，做到无缝衔接）。</dd></div>
<div><dt>爆发</dt><dd>一次性发射“单次数量”颗粒子。</dd></div>
<div><dt>延迟时间</dt><dd>粒子条左端位置，表示发射开始前的等待时间。</dd></div>
<div><dt>注意</dt><dd>循环持续模式不支持骨骼跟随和路径跟随；开关时会把跟随设置恢复默认。</dd></div>
<div><dt>{{ $t('emission.stream') }}</dt><dd>{{ $t('help.emissionDesc') }}</dd></div>
<div><dt>{{ $t('emission.burst') }}</dt><dd>{{ $t('help.burstDesc') }}</dd></div>
<div><dt>{{ $t('emission.delay') }}</dt><dd>{{ $t('help.delayDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.showShape') }}</dt><dd>{{ $t('help.loopNote') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[3] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[3] ? 'true' : 'false'" @click="openModules[3] = !openModules[3]">
<span class="mnum">4</span><span class="mtitle">发射器形状</span><span class="caret">{{ openModules[3] ? '▾' : '▸' }}</span>
<span class="mnum">4</span><span class="mtitle">{{ $t('emission.shapeTitle') }}</span><span class="caret">{{ openModules[3] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[3]" class="help-module-body">
<dl class="help-list">
<div><dt>形状</dt><dd>点 / 圆形 / 矩形 / 锥形 / 路径。</dd></div>
<div><dt>圆·锥</dt><dd>内半径与外半径，形成环形或锥形发射区；锥形额外有“锥形朝向”和“开口角度”。</dd></div>
<div><dt>矩形</dt><dd>“外框 − 内框”形成环带，可分别设置内外宽高。</dd></div>
<div><dt>路径</dt><dd>选一条场景路径作为出生线；出生分布可选等距固定或随机。</dd></div>
<div><dt>发射角度</dt><dd>固定 / 随机（基准角度 + 随机范围）/ 径向（圆、矩、锥中心向外）/ 垂直于路径 / 沿路径方向。</dd></div>
<div><dt>{{ $t('emission.shape') }}</dt><dd>{{ $t('help.shapeDesc') }}</dd></div>
<div><dt>{{ $t('emission.emissionAngle') }}</dt><dd>{{ $t('help.angleDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[4] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[4] ? 'true' : 'false'" @click="openModules[4] = !openModules[4]">
<span class="mnum">5</span><span class="mtitle">粒子属性</span><span class="caret">{{ openModules[4] ? '▾' : '▸' }}</span>
<span class="mnum">5</span><span class="mtitle">{{ $t('attributes.title') }}</span><span class="caret">{{ openModules[4] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[4]" class="help-module-body">
<dl class="help-list">
<div><dt>初始参数</dt><dd>生命周期、速度、缩放（统一或 X/Y 分离）、初始旋转（可跟随发射方向）。每个属性支持固定 / 随机 / 曲线三种取值。</dd></div>
<div><dt>生命周期变化</dt><dd>速度倍率、缩放倍率（统一/分离）、旋转速度，均可用“生命周期 → 倍率”曲线控制。</dd></div>
<div><dt>曲线含义</dt><dd>横轴为粒子生命周期 0→1，纵轴为倍率或对应数值。</dd></div>
<div><dt>{{ $t('attributes.initialParams') }}</dt><dd>{{ $t('help.initialDesc') }}</dd></div>
<div><dt>{{ $t('attributes.lifecycleTitle') }}</dt><dd>{{ $t('help.overLifeDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[5] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[5] ? 'true' : 'false'" @click="openModules[5] = !openModules[5]">
<span class="mnum">6</span><span class="mtitle">外观与资源</span><span class="caret">{{ openModules[5] ? '▾' : '▸' }}</span>
<span class="mnum">6</span><span class="mtitle">{{ $t('appearance.title') }}</span><span class="caret">{{ openModules[5] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[5]" class="help-module-body">
<dl class="help-list">
<div><dt>透明度</dt><dd>曲线或固定；曲线模式可选“跟随导出 / 线性 / 贝塞尔”。</dd></div>
<div><dt>图片资源</dt><dd>“＋”新增，可上传单图或序列帧；多张图片按权重随机。每张可调缩放、轴心、颜色（固定/随机/生命周期渐变）、混合模式（正常/相加/相乘/滤色）、独立透明度（关/固定/曲线）。</dd></div>
<div><dt>序列帧</dt><dd>播放方式：单次隐藏 / 单次定格 / 正向循环 / 反向循环，可设每秒帧数。</dd></div>
<div><dt>{{ $t('appearance.opacity') }}</dt><dd>{{ $t('help.alphaDesc') }}</dd></div>
<div><dt>{{ $t('appearance.imageResources') }}</dt><dd>{{ $t('help.imageDesc') }}</dd></div>
<div><dt>{{ $t('image.sequence') }}</dt><dd>{{ $t('help.sequenceDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[6] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[6] ? 'true' : 'false'" @click="openModules[6] = !openModules[6]">
<span class="mnum">7</span><span class="mtitle">修改器</span><span class="caret">{{ openModules[6] ? '▾' : '▸' }}</span>
<span class="mnum">7</span><span class="mtitle">{{ $t('modifiers.title') }}</span><span class="caret">{{ openModules[6] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[6]" class="help-module-body">
<dl class="help-list">
<div><dt>移动噪声</dt><dd>强度、波动范围、时间流速，让粒子轨迹产生抖动。</dd></div>
<div><dt>重力 / 风力</dt><dd>固定或随机强度、方向，以及生命周期内强度曲线。</dd></div>
<div><dt>力场</dt><dd>中心 X/Y、强度（正吸负斥）、半径、衰减（恒定/线性/反比）。</dd></div>
<div><dt>吸附</dt><dd>延迟后把粒子吸到指定点，到达范围即死亡；可直线或曲线。</dd></div>
<div><dt>拖尾</dt><dd>独立拖尾图片（多资源按权重）、旋转、拖尾骨骼数、拖尾比例；长度/宽度可固定或随机并支持放大；可加生命周期长度曲线与形状曲线；颜色/透明度可跟随粒子、固定或曲线。</dd></div>
<div><dt>发射器跟随</dt><dd>跟随某条路径（局部/世界、正/反向、进度曲线），或跟随 Spine 骨骼（选中的骨骼 + 偏移）。</dd></div>
<div><dt>碰撞 + 阻尼</dt><dd>选择场景中已启用的碰撞对象参与，并设置速度阻尼。</dd></div>
<div><dt>{{ $t('modifiers.enableNoise') }}</dt><dd>{{ $t('help.noiseDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.enableGravity') }} / {{ $t('modifiers.enableWind') }}</dt><dd>{{ $t('help.gravityDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.enableForceField') }} / {{ $t('modifiers.enableVortex') }} / {{ $t('modifiers.enableAttraction') }}</dt><dd>{{ $t('help.forceDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.enableTrail') }}</dt><dd>{{ $t('help.trailDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.enableFollow') }}</dt><dd>{{ $t('help.followDesc') }}</dd></div>
<div><dt>{{ $t('modifiers.enableCollision') }} / {{ $t('modifiers.damping') }}</dt><dd>{{ $t('help.collisionDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module" :class="{ open: openModules[7] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[7] ? 'true' : 'false'" @click="openModules[7] = !openModules[7]">
<span class="mnum">8</span><span class="mtitle">导出设置</span><span class="caret">{{ openModules[7] ? '▾' : '▸' }}</span>
<span class="mnum">8</span><span class="mtitle">{{ $t('export.title') }}</span><span class="caret">{{ openModules[7] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[7]" class="help-module-body">
<dl class="help-list">
<div><dt>图片路径</dt><dd>写入 Spine 的 images 路径，例如 ./images/。</dd></div>
<div><dt>Spine 版本</dt><dd>3.8 / 4.0 / 4.1 / 4.2 / 4.3。</dd></div>
<div><dt>关键帧曲线</dt><dd>线性或平滑贝塞尔；出生、死亡、突变仍使用阶跃关键帧。</dd></div>
<div><dt>导出 FPS</dt><dd>修改 FPS 会保持动画实际秒数不变；“不写 fps”只省略元数据。</dd></div>
<div><dt>其它</dt><dd>整数帧对齐、骨骼对象池、排除无内容动画。</dd></div>
<div><dt>导出按钮</dt><dd>“导出 Spine Json”生成骨骼动画文件；“导出 images 包”单独下载图片 ZIP；“导出 .spine 包”需要连接器。</dd></div>
<div><dt>{{ $t('export.imagesPath') }}</dt><dd>{{ $t('help.exportDesc') }}</dd></div>
<div><dt>{{ $t('export.spineVersion') }}</dt><dd>3.8 / 4.0 / 4.1 / 4.2 / 4.3</dd></div>
<div><dt>{{ $t('export.keyframeCurve') }}</dt><dd>{{ $t('export.bezierHelp') }}</dd></div>
<div><dt>{{ $t('export.fps') }}</dt><dd>{{ $t('export.fpsHelp') }}</dd></div>
<div><dt>{{ $t('export.title') }}</dt><dd>{{ $t('help.exportButtonsDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-module help-connector" :class="{ open: openModules[8] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[8] ? 'true' : 'false'" @click="openModules[8] = !openModules[8]">
<span class="mnum">9</span><span class="mtitle">连接器（Spine 连接器）使用说明</span><span class="caret">{{ openModules[8] ? '▾' : '▸' }}</span>
<span class="mnum">9</span><span class="mtitle">{{ $t('help.connectorTitle') }}</span><span class="caret">{{ openModules[8] ? '▾' : '▸' }}</span>
</button>
<div v-show="openModules[8]" class="help-module-body">
<p class="connector-intro">连接器用于把网页生成的 JSON 和图片，调用你电脑上<b>已安装并激活</b>的 Spine，转换成可编辑的 <b>.spine</b> 工程。</p>
<p class="connector-intro">{{ $t('help.connectorIntro') }}</p>
<dl class="help-list">
<div><dt>前置</dt><dd>电脑已安装并激活 Spine；并已启动桌面版连接器APP。</dd></div>
<div><dt>下载</dt><dd>
<a class="dl-link" href="/downloads/connector/SpineParticleConnector-windows-x64.exe" download>Windows 版<br><small>SpineParticleConnector-windows-x64.exe</small></a>
<a class="dl-link" href="/downloads/connector/SpineParticleConnector-macos-universal.zip" download>macOS 版（Universal）<br><small>SpineParticleConnector-macos-universal.zip</small></a>
<div><dt>{{ $t('help.prerequisite') }}</dt><dd>{{ $t('help.prerequisiteDesc') }}</dd></div>
<div><dt>{{ $t('help.download') }}</dt><dd>
<a class="dl-link" href="/downloads/connector/SpineParticleConnector-windows-x64.exe" download>Windows<br><small>SpineParticleConnector-windows-x64.exe</small></a>
<a class="dl-link" href="/downloads/connector/SpineParticleConnector-macos-universal.zip" download>macOS (Universal)<br><small>SpineParticleConnector-macos-universal.zip</small></a>
</dd></div>
<div><dt>网页端</dt><dd>导出区状态显示“连接器可用 · Spine 已就绪”后，点击“导出 .spine 包”。</dd></div>
<div><dt>首次授权</dt><dd>生产网站首次连接会显示“授权当前网站”；点击后在本机确认页核对完整来源（协议 + 域名 + 端口），再点“允许此网站”。授权一次后本机会保存白名单。本地 127.0.0.1:5173 默认允许。</dd></div>
<div><dt>路径设置</dt><dd>连接器自动检测 Spine 安装位置；检测不到时可在桌面窗口手动指定：Windows 选 Spine.com，macOS 选 Spine.app/Contents/MacOS/Spine。</dd></div>
<div><dt>下载结果</dt><dd>得到 ZIP 包，内含 .spine 工程和图片目录（如 images/star.png）。</dd></div>
<div><dt>版本</dt><dd>连接器按请求与 JSON 内的版本自动匹配 3.8～4.3，使用最新可用补丁。</dd></div>
<div><dt>安全</dt><dd>仅监听本机 127.0.0.1:27843；授权与白名单保存在连接器里；文件在临时目录转换后清理，并有大小限制。</dd></div>
<div><dt>{{ $t('help.webSide') }}</dt><dd>{{ $t('help.webSideDesc') }}</dd></div>
<div><dt>{{ $t('help.authorization') }}</dt><dd>{{ $t('help.authorizationDesc') }}</dd></div>
<div><dt>{{ $t('help.pathSetup') }}</dt><dd>{{ $t('help.pathSetupDesc') }}</dd></div>
<div><dt>{{ $t('help.downloadResult') }}</dt><dd>{{ $t('help.downloadResultDesc') }}</dd></div>
<div><dt>{{ $t('help.version') }}</dt><dd>{{ $t('help.versionDesc') }}</dd></div>
<div><dt>{{ $t('help.security') }}</dt><dd>{{ $t('help.securityDesc') }}</dd></div>
</dl>
</div>
</section>
<section class="help-section help-export">
<h3>配置与导出有什么区别？</h3>
<p><b>保存配置</b>会保存编辑器中的全部对象和参数，之后可以继续修改；<b>导出 Spine Json</b>只导出显示中的粒子系统，并把跟随、碰撞和拖尾结果烘焙为独立动画数据。</p>
<h3>{{ $t('help.differenceTitle') }}</h3>
<p>{{ $t('help.differenceDesc') }}</p>
</section>
</div>
</section>