115 lines
4.2 KiB
Plaintext
115 lines
4.2 KiB
Plaintext
<view class="page">
|
||
|
||
<!-- ===== 预览区 ===== -->
|
||
<view class="stage" id="stageBox">
|
||
<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">先把 .skel / .atlas / 图片发到「文件传输助手」，再在下方一次选中即可；文件只在本地解析，不会上传</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 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>
|
||
<text class="chip-name">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view wx:if="{{missingText}}" class="missing">{{missingText}}</view>
|
||
|
||
</view>
|
||
|
||
<!-- 播放 -->
|
||
<view wx:if="{{animations.length}}" class="section">
|
||
<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>
|
||
<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="#f2353b" backgroundColor="#2c2c35" block-color="#f2353b" block-size="16"
|
||
bindchange="onSpeedChange"
|
||
/>
|
||
<text class="param-val">{{speed}}x</text>
|
||
</view>
|
||
</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="pick-sub">可一次选中多个文件 · .skel / .atlas / .png</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|