card.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!-- 大卡片模板:主预览区域 -->
  2. <template id="preview-card-template">
  3. <div class="preview-card">
  4. <div class="preview-card-stage">
  5. <!-- 顶部信息栏 -->
  6. <div class="preview-info-bar" hidden>
  7. <div class="folder-info">
  8. <svg class="folder-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
  9. <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"/>
  10. </svg>
  11. <span class="folder-name">--</span>
  12. </div>
  13. <div class="preview-action-btns">
  14. <button class="btn-action btn-ai" title="AI生图">
  15. <span class="ai-icon">AI</span>
  16. </button>
  17. <button class="btn-action btn-download" title="导出下载">
  18. <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  19. <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  20. </svg>
  21. </button>
  22. </div>
  23. </div>
  24. <img class="preview-image" alt="" />
  25. <div class="loading-overlay" aria-hidden="true">
  26. <div class="loading-spinner"></div>
  27. <p class="loading-text">正在加载图片...</p>
  28. </div>
  29. <div class="image-error" hidden>暂无可用帧</div>
  30. <div class="drop-hint">
  31. <p class="hint-text">从左边拖入文件夹预览动画</p>
  32. </div>
  33. </div>
  34. <div class="preview-card-controls">
  35. <label for="fps-slider-{{id}}" class="control-label">播放速度</label>
  36. <div class="slider-container">
  37. <input
  38. id="fps-slider-{{id}}"
  39. class="fps-slider"
  40. type="range"
  41. min="1"
  42. max="60"
  43. value="8"
  44. />
  45. <span class="fps-value">8 FPS</span>
  46. </div>
  47. </div>
  48. </div>
  49. </template>
  50. <!-- 小卡片模板:展示单个序列帧动画 -->
  51. <template id="card-template">
  52. <article class="sequence-card" data-folder="" data-index="" data-valid="true">
  53. <div class="card-content">
  54. <div class="image-container">
  55. <img class="card-image" alt="序列帧预览" />
  56. <div class="loading-spinner" style="display: none;"></div>
  57. <div class="image-error" hidden>加载失败</div>
  58. </div>
  59. <footer class="card-footer">
  60. <span class="card-label">--</span>
  61. <button class="card-download-btn" type="button" title="下载序列">
  62. <span class="icon">⬇</span>
  63. </button>
  64. </footer>
  65. </div>
  66. </article>
  67. </template>