说明文档更新

src/views/Stage.vue

@@ -119,63 +119,7 @@
       <div class="sp-cache-note">整个系统设置会自动保存到当前浏览器</div>
     </div>
 
-    <div v-if="showHelp" class="help-overlay" role="presentation" @click.self="showHelp = false">
-      <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>
-          </div>
-          <button class="help-close" aria-label="关闭使用说明" title="关闭 (Esc)" @click="showHelp = false">✕</button>
-        </header>
-
-        <div class="help-body">
-          <section class="help-section help-start">
-            <h3>快速开始</h3>
-            <ol>
-              <li><b>创建对象：</b>在左侧“场景对象”中添加粒子、碰撞、路径或 Spine。</li>
-              <li><b>编辑粒子：</b>选中粒子系统，依次调整发射、形状、属性、外观资源和修改器。</li>
-              <li><b>查看效果：</b>使用底部时间轴播放、暂停或拖动到指定帧；修改参数后会自动重新计算。</li>
-              <li><b>保存成果：</b>配置文件用于继续编辑；“导出 Spine Json”支持 Spine 3.8、4.0、4.1、4.2 和 4.3。</li>
-            </ol>
-          </section>
-
-          <div class="help-grid">
-            <section class="help-section">
-              <h3>常用功能</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>保存当前项目数据、加载配置，或直接使用预设文件；不包含系统设置。</dd></div>
-                <div><dt>Spine 骨骼</dt><dd>在层级树搜索并选择骨骼，可用于粒子发射器跟随。</dd></div>
-              </dl>
-            </section>
-
-            <section class="help-section">
-              <h3>快捷键</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>
-              <p class="help-note">Q / W / E / R 需要先点击画布。光标位于输入框时，单键快捷键不会触发。</p>
-            </section>
-          </div>
-
-          <section class="help-section help-export">
-            <h3>配置与导出有什么区别？</h3>
-            <p><b>保存配置</b>会保存编辑器中的全部对象和参数，之后可以继续修改；<b>导出 Spine Json</b>只导出显示中的粒子系统，并把跟随、碰撞和拖尾结果烘焙为独立动画数据。</p>
-          </section>
-        </div>
-      </section>
-    </div>
+    <HelpDialog :show="showHelp" @close="showHelp = false" />
 
     <div class="hud" v-if="info">
       系统: <b class="hud-number hud-system-count">{{ info.systems }}</b> · 粒子(骨骼): <b class="hud-number hud-particle-count">{{ info.particles }}</b> · 根骨骼: <b>root</b>
@@ -198,6 +142,7 @@ import { editorHistoryState, installEditorHistory, setUndoLimit, undoLastOperati
 import { useEditorShortcuts } from '../editor/useEditorShortcuts'
 import { fileToDataUrl } from '../spine/spineSourceBundle'
 import { downloadEditorConfig } from '../editor/editorConfig'
+import HelpDialog from './HelpDialog.vue'
 
 const store = useParticleStore()
 const holder = ref<HTMLElement | null>(null)
@@ -329,10 +274,6 @@ function openHelp() {
   showBackgroundMenu.value = false
 }
 
-function onHelpKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && showHelp.value) showHelp.value = false
-}
-
 function toggleSettings() {
   showSettings.value = !showSettings.value
   if (showSettings.value) showBackgroundMenu.value = false
@@ -1711,7 +1652,6 @@ function loop() {
 }
 
 onMounted(async () => {
-  window.addEventListener('keydown', onHelpKeydown)
   const el = holder.value!
   app = new Application({ width: el.clientWidth || 800, height: el.clientHeight || 600, backgroundAlpha: 0, antialias: true })
   el.appendChild(app.view as unknown as HTMLCanvasElement)
@@ -1765,7 +1705,6 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  window.removeEventListener('keydown', onHelpKeydown)
   cancelAnimationFrame(raf)
   spineRuntime?.destroy()
   spineRuntime = null
@@ -1843,53 +1782,6 @@ onUnmounted(() => {
 }
 .help-btn:hover, .help-btn.on { border-color: #7774ff; background: #343b63; color: #fff; }
 .zoom-pct { margin-left: 0; font-variant-numeric: tabular-nums; color: #9aa; min-width: 44px; text-align: center; }
-.help-overlay {
-  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 72px 24px 28px;
-  box-sizing: border-box; background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px);
-}
-.help-dialog {
-  width: min(820px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
-  border: 1px solid #3a4864; border-radius: 14px; background: #141a27; color: #b8c3d8;
-  box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
-}
-.help-head {
-  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px 15px;
-  border-bottom: 1px solid #2b354a; background: linear-gradient(135deg, #202942, #181e2d);
-}
-.help-head h2 { margin: 0; color: #eef2ff; font-size: 19px; }
-.help-head p { margin: 5px 0 0; color: #7786a3; font-size: 11px; }
-.help-close {
-  width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #43516b; border-radius: 6px;
-  background: #273249; color: #ccd7ed; cursor: pointer;
-}
-.help-close:hover { border-color: #7774ff; background: #3b4670; color: #fff; }
-.help-body { min-height: 0; overflow: auto; padding: 18px 20px 21px; }
-.help-section { padding: 14px 15px; border: 1px solid #2c3850; border-radius: 10px; background: #181f2e; }
-.help-section h3 { margin: 0 0 11px; color: #9fb2ff; font-size: 13px; }
-.help-start ol { margin: 0; padding-left: 21px; color: #aab6cc; font-size: 12px; line-height: 1.75; }
-.help-start li::marker { color: #7774ff; font-weight: 700; }
-.help-section b { color: #dce4f7; }
-.help-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 12px; margin-top: 12px; }
-.help-list { display: grid; gap: 0; margin: 0; }
-.help-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 7px 0; border-bottom: 1px solid #263146; }
-.help-list > div:last-child { border-bottom: 0; }
-.help-list dt { color: #d3dcf0; font-size: 11px; font-weight: 700; }
-.help-list dd { margin: 0; color: #8795ae; font-size: 11px; line-height: 1.5; }
-.shortcut-list { display: grid; gap: 7px; }
-.shortcut-list > div { display: flex; align-items: center; min-height: 25px; gap: 5px; }
-.shortcut-list kbd {
-  min-width: 24px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #465470; border-bottom-width: 2px;
-  border-radius: 5px; background: #101623; color: #e0e7f6; font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
-}
-.shortcut-list span { color: #65728b; font-size: 10px; }
-.shortcut-list em { margin-left: auto; color: #9ca9c1; font-size: 11px; font-style: normal; }
-.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #2a3549; color: #697791; font-size: 10px; line-height: 1.55; }
-.help-export { margin-top: 12px; }
-.help-export p { margin: 0; color: #8997b0; font-size: 11px; line-height: 1.65; }
-@media (max-width: 760px) {
-  .help-overlay { padding: 66px 12px 14px; }
-  .help-grid { grid-template-columns: 1fr; }
-}
 .hud { position: absolute; bottom: 12px; left: 12px; padding: 8px 12px; background: rgba(20,20,32,0.75); border-radius: 8px; font-size: 12px; color: #a0a8cc; }
 .hud-number { display: inline-block; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
 .hud-system-count { width: 3ch; }