refactor: 移除WebSocket，改用fetch一次性请求

public/index.html

@@ -30,7 +30,6 @@
         .image-item {
             width: 140px; height: 140px;
             background: #e8e8e8;
-            flex-shrink: 0;
         }
         .image-item img {
             width: 100%; height: 100%;
@@ -53,37 +52,18 @@
     </div>
 
     <script>
-        var ws;
-
-        function connectWS() {
-            var protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-            ws = new WebSocket(protocol + '//' + location.host);
-
-            ws.onmessage = function(e) {
-                try {
-                    var data = JSON.parse(e.data);
-                    if (data.type === 'state') renderState(data);
-                } catch(err) {}
-            };
-
-            ws.onclose = function() {
-                setTimeout(connectWS, 3000);
-            };
-        }
-
-        function renderState(state) {
+        fetch('/api/state').then(function(res) {
+            return res.json();
+        }).then(function(state) {
             var grid = document.getElementById('imageGrid');
             var empty = document.getElementById('empty');
 
             if (!state.playing || state.images.length === 0) {
-                grid.innerHTML = '';
                 empty.style.display = 'block';
                 return;
             }
 
             empty.style.display = 'none';
-
-            grid.innerHTML = '';
             state.images.forEach(function(img) {
                 var div = document.createElement('div');
                 div.className = 'image-item';
@@ -93,9 +73,7 @@
                 div.appendChild(imgEl);
                 grid.appendChild(div);
             });
-        }
-
-        connectWS();
+        });
     </script>
 </body>
 </html>