refactor(video-rendering): consolidate video and shorts rendering logic

Move shorts rendering into renderVideos function for better code organization
Update video grid layout and styling for improved responsiveness

css/style.css

@@ -304,7 +304,7 @@ body {
 /* 视频网格 */
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
     gap: 24px;
     margin-bottom: 48px;
 }
@@ -362,14 +362,14 @@ body {
 
 .video-info {
     display: flex;
-    padding: 12px;
+    padding: 16px;
 }
 
 .video-channel-avatar {
-    width: 36px;
-    height: 36px;
+    width: 48px;
+    height: 48px;
     border-radius: 50%;
-    margin-right: 12px;
+    margin-right: 16px;
     background-color: #e0e0e0;
 }
 
@@ -379,17 +379,19 @@ body {
 }
 
 .video-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 500;
     margin-bottom: 8px;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     color: #ffffff;
 }
 
 .video-meta {
-    font-size: 12px;
+    font-size: 14px;
     color: #909090;
     line-height: 1.4;
 }
@@ -466,7 +468,7 @@ body {
 }
 
 .shorts-section h3 {
-    font-size: 20px;
+    font-size: 25px;
     font-weight: 500;
     margin-bottom: 16px;
     color: #ffffff;
@@ -474,8 +476,8 @@ body {
 
 .shorts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 20px;
 }
 
 /* Shorts 卡片 */
@@ -624,9 +626,16 @@ body {
 }
 
 /* 响应式设计 */
+@media (max-width: 1600px) {
+    .video-grid {
+        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+        gap: 24px;
+    }
+}
+
 @media (max-width: 1200px) {
     .video-grid {
-        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
         gap: 20px;
     }
 }
@@ -637,7 +646,7 @@ body {
     }
     
     .video-grid {
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
         gap: 16px;
     }
 }

js/script.js

@@ -511,7 +511,6 @@ const subscriptionsList = document.querySelector('.subscriptions-list');
 async function init() {
     await loadVideos();
     renderVideos();
-    renderShorts();
     renderSubscriptions();
     bindEvents();
 }
@@ -522,27 +521,22 @@ async function loadVideos() {
 
 function renderVideos() {
     const filteredVideos = filterVideosByCategory(currentCategory);
+    const videosOnly = filteredVideos.filter(video => video.type === 'video');
+    const shortsOnly = filteredVideos.filter(video => video.type === 'short');
     
     videoGrid.innerHTML = '';
-    
-    filteredVideos.forEach(video => {
-        if (video.type === 'video') {
-            const videoCard = createVideoCard(video);
-            videoGrid.appendChild(videoCard);
-        }
-    });
-}
-
-function renderShorts() {
-    const filteredVideos = filterVideosByCategory(currentCategory);
-    
     shortsGrid.innerHTML = '';
     
-    filteredVideos.forEach(video => {
-        if (video.type === 'short') {
-            const shortsCard = createShortsCard(video);
-            shortsGrid.appendChild(shortsCard);
-        }
+    // 渲染长视频
+    videosOnly.forEach(video => {
+        const videoCard = createVideoCard(video);
+        videoGrid.appendChild(videoCard);
+    });
+    
+    // 渲染短视频
+    shortsOnly.forEach(video => {
+        const shortsCard = createShortsCard(video);
+        shortsGrid.appendChild(shortsCard);
     });
 }
 
@@ -778,7 +772,6 @@ function bindEvents() { // Bind events to the DOM elements
             currentCategory = btn.textContent;
             // Re-render videos and shorts
             renderVideos();
-            renderShorts();
         });
     });