小程序渲染问题

pages/viewer/viewer.wxml

@@ -1,7 +1,7 @@
 <view class="page">
 
   <!-- ===== 预览区 ===== -->
-  <view class="stage">
+  <view class="stage" id="stageBox">
     <canvas
       id="spineCanvas"
       class="stage-canvas"
@@ -35,17 +35,24 @@
 
     <!-- 右上角信息徽标 -->
     <view wx:if="{{status === 'ready'}}" class="stage-badge">{{info}}</view>
+
   </view>
 
   <!-- ===== 控制面板 ===== -->
   <view class="sheet">
-    <!-- 文件 -->
-    <view class="section">
-      <button class="pick-btn" bindtap="chooseFiles">
-        <text class="pick-text">{{pickedCount ? '重新选择文件' : '选择文件'}}</text>
-      </button>
-      <view class="pick-sub">可一次选中多个文件 · .skel / .atlas / .png</view>
+    <!-- 画布下方：手势提示 + 缩放 -->
+    <view wx:if="{{status === 'ready'}}" class="tool-row">
+      <view class="tool-hint">单指拖动平移 · 双指捏合缩放</view>
+      <view class="zoom-group">
+        <view class="zoom-btn" bindtap="zoomOut">－</view>
+        <text class="zoom-val">{{scalePercent}}%</text>
+        <view class="zoom-btn" bindtap="zoomIn">＋</view>
+        <view class="zoom-reset" bindtap="resetView">重置</view>
+      </view>
+    </view>
 
+    <!-- 已选文件 -->
+    <view wx:if="{{pickedCount}}" class="section">
       <view wx:if="{{pickedCount}}" class="chips">
         <view wx:for="{{pickedFiles}}" wx:key="id" class="chip chip-{{item.kind}}">
           <text class="chip-dot"></text>
@@ -55,19 +62,19 @@
 
       <view wx:if="{{missingText}}" class="missing">{{missingText}}</view>
 
-      <view wx:if="{{pickedCount}}" class="link" bindtap="clearFiles">清空已选</view>
     </view>
 
     <!-- 播放 -->
     <view wx:if="{{animations.length}}" class="section">
-      <view class="section-title">播放</view>
-
-      <picker mode="selector" range="{{animations}}" value="{{animIndex}}" bindchange="onAnimChange">
-        <view class="select">
-          <text class="select-label">{{animations[animIndex]}}</text>
-          <text class="select-arrow">▾</text>
-        </view>
-      </picker>
+      <view class="section-head">
+        <view class="section-title">播放</view>
+        <picker class="anim-picker" mode="selector" range="{{animations}}" value="{{animIndex}}" bindchange="onAnimChange">
+          <view class="select">
+            <text class="select-label">{{animations[animIndex]}}</text>
+            <text class="select-arrow">▾</text>
+          </view>
+        </picker>
+      </view>
 
       <view class="segment">
         <view class="seg {{playing ? 'on' : ''}}" bindtap="togglePlay">{{playing ? '⏸ 暂停' : '▶ 播放'}}</view>
@@ -90,18 +97,17 @@
         />
         <text class="param-val">{{speed}}x</text>
       </view>
+    </view>
 
-      <view class="param">
-        <text class="param-name">缩放</text>
-        <view class="stepper">
-          <view class="step-btn" bindtap="zoomOut">－</view>
-          <text class="step-val">{{scalePercent}}%</text>
-          <view class="step-btn" bindtap="zoomIn">＋</view>
-        </view>
-        <view class="link inline" bindtap="resetView">重置</view>
+    <!-- 选择文件：固定放在最下面，随时能重新选 -->
+    <view class="section pick-section">
+      <view class="pick-row">
+        <view wx:if="{{pickedCount}}" class="clear-btn" bindtap="clearFiles">清空已选</view>
+        <button class="pick-btn" bindtap="chooseFiles">
+          <text class="pick-text">{{pickedCount ? '重新选择文件' : '选择文件'}}</text>
+        </button>
       </view>
-
-      <view class="gesture-hint">单指拖动平移 · 双指捏合缩放</view>
+      <view class="pick-sub">可一次选中多个文件 · .skel / .atlas / .png</view>
     </view>
   </view>