From caca52ef6ac6a21c19f5a3f7b814b6030633617c Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Mon, 2 Feb 2026 00:57:41 +0800
Subject: [PATCH] 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 | 35 ++++++++++++++++++++++-------------
 js/script.js  | 31 ++++++++++++-------------------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/css/style.css b/css/style.css
index f1f1230..7183d59 100644
--- a/css/style.css
+++ b/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;
     }
 }
diff --git a/js/script.js b/js/script.js
index 0c40c99..130fdce 100644
--- a/js/script.js
+++ b/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();
         });
     });