微信小程序-省心预览工具

pages/viewer/viewer.wxml

@@ -0,0 +1,113 @@
+<view class="page">
+
+  <!-- ===== 预览区 ===== -->
+  <view class="stage">
+    <canvas
+      id="spineCanvas"
+      class="stage-canvas"
+      type="webgl"
+      bindtouchstart="onTouchStart"
+      bindtouchmove="onTouchMove"
+      bindtouchend="onTouchEnd"
+      bindtouchcancel="onTouchEnd"
+    ></canvas>
+
+    <!-- 空状态 -->
+    <view wx:if="{{status === 'idle'}}" class="stage-mask">
+      <view class="empty-icon">🎬</view>
+      <view class="empty-title">Spine 动画预览</view>
+      <view class="empty-sub">支持 Spine 4.2 导出的 .skel / .atlas / .png</view>
+      <view class="empty-tip">把三个文件发到「文件传输助手」后在下方选择；真机可一次多选，PC 可分多次选</view>
+    </view>
+
+    <!-- 加载中 -->
+    <view wx:if="{{status === 'loading'}}" class="stage-mask">
+      <view class="empty-icon">⏳</view>
+      <view class="empty-sub">{{statusText}}</view>
+    </view>
+
+    <!-- 出错 -->
+    <view wx:if="{{status === 'error'}}" class="stage-mask">
+      <view class="empty-icon">⚠️</view>
+      <view class="empty-title error">加载失败</view>
+      <view class="empty-sub">{{errorMsg}}</view>
+    </view>
+
+    <!-- 右上角信息徽标 -->
+    <view wx:if="{{status === 'ready'}}" class="stage-badge">{{info}}</view>
+  </view>
+
+  <!-- ===== 控制面板 ===== -->
+  <view class="sheet">
+    <view class="grabber"></view>
+
+    <!-- 文件 -->
+    <view class="section">
+      <view class="section-title">文件</view>
+
+      <button class="pick-btn" bindtap="chooseFiles">
+        <text class="pick-icon">📁</text>
+        <text class="pick-text">选择文件</text>
+        <text class="pick-hint">可多选</text>
+      </button>
+
+      <view wx:if="{{pickedCount}}" class="chips">
+        <view wx:for="{{pickedFiles}}" wx:key="id" class="chip chip-{{item.kind}}">
+          <text class="chip-dot"></text>
+          <text class="chip-name">{{item.name}}</text>
+        </view>
+      </view>
+
+      <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="segment">
+        <view class="seg {{playing ? 'on' : ''}}" bindtap="togglePlay">{{playing ? '⏸ 暂停' : '▶ 播放'}}</view>
+        <view class="seg {{loop ? 'on' : ''}}" bindtap="toggleLoop">🔁 循环</view>
+        <view class="seg {{premultiplied ? 'on' : ''}}" bindtap="togglePremultiplied">✨ 预乘</view>
+      </view>
+    </view>
+
+    <!-- 参数 -->
+    <view wx:if="{{animations.length}}" class="section">
+      <view class="section-title">参数</view>
+
+      <view class="param">
+        <text class="param-name">速度</text>
+        <slider
+          class="param-slider"
+          min="0.1" max="3" step="0.1" value="{{speed}}"
+          activeColor="#4a6cf7" backgroundColor="#e9ecf5" block-color="#4a6cf7" block-size="16"
+          bindchange="onSpeedChange"
+        />
+        <text class="param-val">{{speed}}x</text>
+      </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>
+
+      <view class="gesture-hint">单指拖动平移 · 双指捏合缩放</view>
+    </view>
+  </view>
+
+</view>