AnimationManager/client/page/seq_ani_player/card.html

<!-- 大卡片模板：主预览区域 -->
<template id="preview-card-template">
  <div class="preview-card">
    <div class="preview-card-stage">
      <!-- 顶部信息栏 -->
      <div class="preview-info-bar" hidden>
        <div class="folder-info">
          <svg class="folder-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
            <path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h3.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A.5.5 0 0 0 9.207 4H14.5A1.5 1.5 0 0 1 16 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1 3.5z"/>
          </svg>
          <span class="folder-name">--</span>
        </div>
        <div class="preview-action-btns">
          <button class="btn-action btn-ai" title="AI生图">
            <span class="ai-icon">AI</span>
          </button>
          <button class="btn-action btn-download" title="导出下载">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
      
      <img class="preview-image" alt="" />
      <div class="loading-overlay" aria-hidden="true">
        <div class="loading-spinner"></div>
        <p class="loading-text">正在加载图片...</p>
      </div>
      <div class="image-error" hidden>暂无可用帧</div>
      <div class="drop-hint">
        <p class="hint-text">从左边拖入文件夹预览动画</p>
      </div>
    </div>
    <div class="preview-card-controls">
      <label for="fps-slider-{{id}}" class="control-label">播放速度</label>
      <div class="slider-container">
        <input
          id="fps-slider-{{id}}"
          class="fps-slider"
          type="range"
          min="1"
          max="60"
          value="8"
        />
        <span class="fps-value">8 FPS</span>
      </div>
    </div>
  </div>
</template>

<!-- 小卡片模板：展示单个序列帧动画 -->
<template id="card-template">
  <article class="sequence-card" data-folder="" data-index="" data-valid="true">
    <div class="card-content">
      <div class="image-container">
        <img class="card-image" alt="序列帧预览" />
        <div class="loading-spinner" style="display: none;"></div>
        <div class="image-error" hidden>加载失败</div>
      </div>
      <footer class="card-footer">
        <span class="card-label">--</span>
        <button class="card-download-btn" type="button" title="下载序列">
          <span class="icon">⬇</span>
        </button>
      </footer>
    </div>
  </article>
</template>