网页优化

src/views/Stage.vue

@@ -8,6 +8,20 @@
       alt=""
       aria-hidden="true"
     />
+    <button
+      type="button"
+      class="stage-home-btn"
+      :class="{ 'home-right': !store.settings.parameterPanelOnRight }"
+      :title="$t('welcome.backToTools')"
+      :aria-label="$t('welcome.backToTools')"
+      data-matomo-category="页面导航"
+      data-matomo-event="editor.open-welcome"
+      @click="returnToWelcome"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m3.5 10.5 8.5-7 8.5 7V21h-6v-6h-5v6h-6z" />
+      </svg>
+    </button>
 
     <StageToolbar
       :ctx="stageContext"
@@ -18,7 +32,6 @@
       @update:active-tool="activeTool = $event"
       @update:show-settings="showSettings = $event"
       @update:show-help="showHelp = $event"
-      @home="emit('home')"
       @clear-background="clearBackground"
       @background-file="onBackgroundFileChange"
     />
@@ -48,6 +61,7 @@ import { SpineRuntimeLayer } from '../spine/SpineRuntimeLayer'
 import { editorHistoryState, installEditorHistory, undoLastOperation } from '../editor/editorHistory'
 import { useEditorShortcuts } from '../editor/useEditorShortcuts'
 import { PROJECT_SAVE_EVENT } from '../editor/projectLibrary'
+import { translate } from '../i18n'
 import HelpDialog from './HelpDialog.vue'
 import StageToolbar from './StageToolbar.vue'
 import StageSettingsPanel from './StageSettingsPanel.vue'
@@ -179,6 +193,12 @@ function onBeforeUnload(event: BeforeUnloadEvent) {
   event.returnValue = ''
 }
 
+function returnToWelcome() {
+  if (store.settings.unsavedChangesPrompt && editorHistoryState.dirty
+    && !window.confirm(translate('settings.unsavedLeaveConfirm'))) return
+  emit('home')
+}
+
 function onWheelEvent(e: WheelEvent) {
   onWheel(stageContext, e)
 }
@@ -669,4 +689,15 @@ watch(() => [store.activeObjectType, store.activeObjectId], () => pathEditing.re
   opacity: .8; pointer-events: none; user-select: none;
 }
 .stage-watermark.watermark-left-panel { left: auto; right: 14px; }
+.stage-home-btn {
+  position: absolute; top: 14px; left: calc(24px + clamp(105px, 13.5vw, 150px)); z-index: 2;
+  display: grid; width: 32px; height: 32px; padding: 7px; place-items: center;
+  border: 1px solid rgba(66, 77, 99, .76); border-radius: 7px;
+  background: rgba(15, 18, 27, .8); color: #aeb8cc; cursor: pointer;
+  backdrop-filter: blur(6px);
+}
+.stage-home-btn.home-right { left: auto; right: calc(24px + clamp(105px, 13.5vw, 150px)); }
+.stage-home-btn:hover { border-color: #7774ff; background: rgba(43, 58, 92, .92); color: #fff; }
+.stage-home-btn:focus-visible { outline: 2px solid #8b86ff; outline-offset: 2px; }
+.stage-home-btn svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
 </style>