面板布局更新

src/views/Stage.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="stage-wrap">
     <div ref="holder" class="stage-holder" :class="{ grid: store.settings.showGrid }" tabindex="0" @wheel.prevent="onWheelEvent" @pointerdown="onPanDown" @dblclick.prevent="onStageDoubleClick"></div>
+    <img
+      class="stage-watermark"
+      :class="{ 'watermark-left-panel': !store.settings.parameterPanelOnRight }"
+      src="/images/yeomai-watermark.png"
+      alt=""
+      aria-hidden="true"
+    />
 
     <StageToolbar
       :ctx="stageContext"
       :active-tool="activeTool"
+      :hud="info"
       :show-settings="showSettings"
       :show-help="showHelp"
       @update:active-tool="activeTool = $event"
@@ -18,10 +26,6 @@
 
     <HelpDialog :show="showHelp" @close="showHelp = false" />
 
-    <div class="hud" v-if="info">
-      {{ $t('app.systems') }}: <b class="hud-number hud-system-count">{{ info.systems }}</b> · {{ $t('app.particlesBones') }}: <b class="hud-number hud-particle-count">{{ info.particles }}</b> · {{ $t('app.rootBone') }}: <b>root</b>
-      <span class="hud-tip">{{ $t('app.hudTip') }}</span>
-    </div>
   </div>
 </template>
 
@@ -584,10 +588,10 @@ watch(() => [store.activeObjectType, store.activeObjectId], () => pathEditing.re
 </script>
 
 <style scoped>
-.stage-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
+.stage-wrap { position: relative; display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
 /* 画布:默认纯色;开启网格时显示深色棋盘格 */
 .stage-holder {
-  width: 100%; height: 100%; cursor: grab; touch-action: none;
+  width: 100%; min-height: 0; flex: 1; cursor: grab; touch-action: none;
   background-color: #0e1219;
   outline: none;
 }
@@ -596,10 +600,10 @@ watch(() => [store.activeObjectType, store.activeObjectId], () => pathEditing.re
   background-size: 28px 28px;
 }
 .stage-holder:active { cursor: grabbing; }
-.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; }
-.hud-particle-count { width: 7ch; text-align: left; }
-.hud-tip { margin-left: 12px; color: #5f6a8a; font-size: 11px; }
-b { color: #ffcc33; }
+.stage-watermark {
+  position: absolute; top: 14px; left: 14px; z-index: 1;
+  width: clamp(105px, 13.5vw, 150px); height: auto;
+  opacity: .8; pointer-events: none; user-select: none;
+}
+.stage-watermark.watermark-left-panel { left: auto; right: 14px; }
 </style>