feat:优化数据

index.html

@@ -160,11 +160,42 @@
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
       }
 
-      .card canvas {
+      .card-stage {
+        position: relative;
         width: 100%;
         aspect-ratio: 16 / 10;
-        display: block;
         background: #000;
+        overflow: hidden;
+      }
+
+      .card-thumb {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        vertical-align: middle;
+      }
+
+      .card-hover-canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        pointer-events: none;
+      }
+
+      .card-thumb--placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 120px;
+        padding: 12px;
+        text-align: center;
+        font-size: 12px;
+        line-height: 1.5;
+        color: #6a7088;
+        background: linear-gradient(145deg, #0a0c12 0%, #12151f 100%);
       }
 
       .card-meta {
@@ -304,9 +335,7 @@
           </div>
         </div>
         <div class="stats" id="stats">准备就绪</div>
-        <p class="view-hint">
-          列表默认仅显示首帧静态预览；鼠标悬停在卡片上时才会持续渲染动画。点击进入全屏仍为实时播放。
-        </p>
+    
         <section id="preview-grid" class="preview-grid"></section>
       </main>
     </div>
@@ -324,6 +353,7 @@
       </div>
     </section>
 
+    <script src="./thumb-renderer.js"></script>
     <script src="./display.js"></script>
   </body>
 </html>