// 全局变量 let videos = [ { "id": 1, "title": "透明なパレット (self cover)", "channel": "Aqu3ra", "views": "576,197", "uploadDate": "1 months ago", "duration": "3:03", "thumbnail": "img/cover/music-01.jpg", "category": "music", "type": "video" }, { "id": 2, "title": "【歌ってみた】Duvet / covered by ヰ世界情緒", "channel": "ヰ世界情緒 -Isekaijoucho-", "views": "721,627", "uploadDate": "5 days ago", "duration": "3:32", "thumbnail": "img/cover/music-02.jpg", "category": "music", "type": "video" }, { "id": 3, "title": "ヨルシカ　『 晴る 』　－文化祭2025－", "channel": "countben", "views": "142,561", "uploadDate": "2 months ago", "duration": "4:46", "thumbnail": "img/cover/music-03.jpg", "category": "music", "type": "video" }, { "id": 4, "title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER", "channel": "KitKit Lu", "views": "1,856,164", "uploadDate": "5 months ago", "duration": "2:39", "thumbnail": "img/cover/music-04.jpg", "category": "music", "type": "video" }, { "id": 5, "title": "I Can't Wait feat. GUMI", "channel": "d0tc0mmie", "views": "315,293", "uploadDate": "1 month ago", "duration": "1:35", "thumbnail": "img/cover/music-05.jpg", "category": "music", "type": "video" }, { "id": 6, "title": "MiSiDE: ZERO Update – Full Gameplay + Ending (Showcase)", "channel": "RUSH PLAY", "views": "900,156", "uploadDate": "4 weeks ago", "duration": "24:39", "thumbnail": "img/cover/game-06.jpg", "category": "game", "type": "video" }, { "id": 7, "title": "Minecraftの効果音でサイエンス", "channel": "gmailアカウント", "views": "651,192", "uploadDate": "11 months ago", "duration": "1:05", "thumbnail": "img/cover/game-07.jpg", "category": "game", "type": "video" }, { "id": 8, "title": "osu! NEEDS to Take Notes... (00PARTS World's 1st Clear)", "channel": "bmc", "views": "892,163", "uploadDate": "1 month ago", "duration": "8:21", "thumbnail": "img/cover/game-08.jpg", "category": "game", "type": "video" }, { "id": 9, "title": "React vs Vue vs Angular", "channel": "前端开发", "views": "1,876,543", "uploadDate": "3天前", "duration": "19:45", "thumbnail": "https://picsum.photos/id/9/640/360", "category": "live", "type": "live" }, { "id": 10, "title": "机器学习入门到精通", "channel": "AI 研究", "views": "2,345,678", "uploadDate": "5天前", "duration": "35:22", "thumbnail": "https://picsum.photos/id/10/640/360", "category": "AI", "type": "video" }, { "id": 11, "title": "编程技巧分享", "channel": "编程大师", "views": "456,789", "uploadDate": "1天前", "duration": "01:23", "thumbnail": "https://picsum.photos/id/11/360/640", "category": "编程", "type": "short" }, { "id": 12, "title": "JavaScript 小技巧", "channel": "前端开发", "views": "789,012", "uploadDate": "2天前", "duration": "00:58", "thumbnail": "https://picsum.photos/id/12/360/640", "category": "编程", "type": "short" }, { "id": 13, "title": "Python 一行代码", "channel": "数据科学", "views": "567,890", "uploadDate": "3天前", "duration": "01:15", "thumbnail": "https://picsum.photos/id/13/360/640", "category": "编程", "type": "short" }, { "id": 14, "title": "前端开发日常", "channel": "前端开发", "views": "987,654", "uploadDate": "1天前", "duration": "01:32", "thumbnail": "https://picsum.photos/id/14/360/640", "category": "编程", "type": "short" }, { "id": 15, "title": "AI 生成艺术", "channel": "AI 研究", "views": "1,234,567", "uploadDate": "2天前", "duration": "01:45", "thumbnail": "https://picsum.photos/id/15/360/640", "category": "AI", "type": "short" }, { "id": 16, "title": "数据可视化技巧", "channel": "数据科学", "views": "654,321", "uploadDate": "4天前", "duration": "01:05", "thumbnail": "https://picsum.photos/id/16/360/640", "category": "编程", "type": "short" }, { "id": 17, "title": "编程面试题", "channel": "编程大师", "views": "876,543", "uploadDate": "3天前", "duration": "01:20", "thumbnail": "https://picsum.photos/id/17/360/640", "category": "编程", "type": "short" }, { "id": 18, "title": "Web 设计趋势", "channel": "前端开发", "views": "765,432", "uploadDate": "5天前", "duration": "01:10", "thumbnail": "https://picsum.photos/id/18/360/640", "category": "设计", "type": "short" }, { "id": 19, "title": "机器学习模型训练", "channel": "AI 研究", "views": "1,098,765", "uploadDate": "2天前", "duration": "01:35", "thumbnail": "https://picsum.photos/id/19/360/640", "category": "AI", "type": "short" }, { "id": 20, "title": "Python 库推荐", "channel": "数据科学", "views": "543,210", "uploadDate": "1天前", "duration": "01:08", "thumbnail": "https://picsum.photos/id/20/360/640", "category": "编程", "type": "short" }, { "id": 21, "title": "2024年前端开发趋势", "channel": "前端开发", "views": "1,345,678", "uploadDate": "1周前", "duration": "18:32", "thumbnail": "https://picsum.photos/id/21/640/360", "category": "编程", "type": "video" }, { "id": 22, "title": "数据结构与算法基础", "channel": "编程大师", "views": "987,654", "uploadDate": "3天前", "duration": "25:45", "thumbnail": "https://picsum.photos/id/22/640/360", "category": "编程", "type": "video" }, { "id": 23, "title": "人工智能的未来发展", "channel": "AI 研究", "views": "2,123,456", "uploadDate": "5天前", "duration": "30:15", "thumbnail": "https://picsum.photos/id/23/640/360", "category": "AI", "type": "video" }, { "id": 24, "title": "Python Web 开发实战", "channel": "数据科学", "views": "765,432", "uploadDate": "2周前", "duration": "22:33", "thumbnail": "https://picsum.photos/id/24/640/360", "category": "编程", "type": "video" }, { "id": 25, "title": "CSS 高级技巧", "channel": "前端开发", "views": "876,543", "uploadDate": "1天前", "duration": "15:22", "thumbnail": "https://picsum.photos/id/25/640/360", "category": "编程", "type": "video" } ]; let currentCategory = 'All'; // DOM 元素 const searchInput = document.querySelector('.search-input'); const searchBtn = document.querySelector('.search-btn'); const searchResults = document.querySelector('.search-results'); const searchResultsContent = document.querySelector('.search-results-content'); const videoGrid = document.querySelector('.video-grid'); const shortsGrid = document.querySelector('.shorts-grid'); const categoryBtns = document.querySelectorAll('.category-btn'); const subscriptionsList = document.querySelector('.subscriptions-list'); // 初始化 async function init() { // 加载视频数据 await loadVideos(); // 渲染视频 renderVideos(); // 渲染 Shorts renderShorts(); // 渲染订阅内容 renderSubscriptions(); // 绑定事件 bindEvents(); } // 加载视频数据 async function loadVideos() { // 数据已在全局变量中定义，直接返回 return Promise.resolve(); } // 渲染视频 function renderVideos() { const filteredVideos = filterVideosByCategory(currentCategory); videoGrid.innerHTML = ''; filteredVideos.forEach(video => { if (video.type === 'video') { const videoCard = createVideoCard(video); videoGrid.appendChild(videoCard); } }); } // 渲染 Shorts function renderShorts() { const filteredVideos = filterVideosByCategory(currentCategory); shortsGrid.innerHTML = ''; filteredVideos.forEach(video => { if (video.type === 'short') { const shortsCard = createShortsCard(video); shortsGrid.appendChild(shortsCard); } }); } // 根据分类过滤视频 function filterVideosByCategory(category) { if (category === '全部') { return videos; } // 简单的分类映射 const categoryMap = { 'Music': ['music'], 'Game': ['game'], 'Live': ['live'], 'Album': ['album'], 'Animation': ['animation'], 'Art': ['art'], 'Recently': videos.filter(v => v.uploadDate.includes('days ago')), 'Watched': [], 'New': videos }; if (categoryMap[category]) { if (Array.isArray(categoryMap[category]) && categoryMap[category].length > 0 && typeof categoryMap[category][0] === 'string') { return videos.filter(v => categoryMap[category].includes(v.category)); } else if (Array.isArray(categoryMap[category])) { return categoryMap[category]; } } return videos; } // 创建视频卡片 function createVideoCard(video) { const card = document.createElement('div'); card.className = 'video-card'; card.innerHTML = `
${video.title} ${video.duration}

${video.title}

${video.channel}
${video.views} views ${video.uploadDate}
Add to Watch Later
Save to "Watch Later"
Save to Playlist
Download
Share
Not Interested
Report Channel
Report Video
`; // 绑定菜单事件 const menuToggle = card.querySelector('.menu-toggle'); const menuDropdown = card.querySelector('.menu-dropdown'); menuToggle.addEventListener('click', (e) => { e.stopPropagation(); menuDropdown.classList.toggle('show'); }); // 点击其他地方关闭菜单 document.addEventListener('click', () => { menuDropdown.classList.remove('show'); }); return card; } // 创建 Shorts 卡片 function createShortsCard(video) { const card = document.createElement('div'); card.className = 'shorts-card'; card.innerHTML = `
${video.title}

${video.title}

${video.views} ${video.uploadDate}
`; return card; } // 渲染订阅内容 function renderSubscriptions() { const subscriptions = [ { name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' }, { name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' }, { name: 'ヰ世界情緒', avatar: 'img/avatar/isekaijoucho.jpg' }, { name: 'MyGo!!!!!', avatar: 'img/avatar/mygo.png' }, { name: 'ZUTOMAYO', avatar: 'img/avatar/ztmy.jpg' }, { name: 'Aqu3ra', avatar: 'img/avatar/aqu3ra.png' }, { name: '『超かぐや姫 ! 』公式', avatar: 'img/avatar/cpk.png' }, { name: '礼衣 / Rei', avatar: 'img/avatar/rei.jpg' }, { name: 'tayori', avatar: 'img/avatar/tayori.jpg' } ]; subscriptionsList.innerHTML = ''; subscriptions.forEach(sub => { const item = document.createElement('div'); item.className = 'subscription-item'; item.innerHTML = `
${sub.name}
${sub.name}
`; subscriptionsList.appendChild(item); }); } // 执行搜索 function performSearch(query) { if (!query.trim()) { searchResults.style.display = 'none'; return; } const results = videos.filter(video => video.title.toLowerCase().includes(query.toLowerCase()) || video.channel.toLowerCase().includes(query.toLowerCase()) ); renderSearchResults(results, query); } // 渲染搜索结果 function renderSearchResults(results, query) { searchResultsContent.innerHTML = ''; if (results.length === 0) { searchResultsContent.innerHTML = '

No videos found related to your search.

'; searchResults.style.display = 'block'; return; } results.forEach(video => { const item = document.createElement('div'); item.className = 'search-result-item'; // 高亮关键词 const highlightedTitle = video.title.replace(new RegExp(`(${query})`, 'gi'), '$1'); const highlightedChannel = video.channel.replace(new RegExp(`(${query})`, 'gi'), '$1'); item.innerHTML = `
${video.title}

${highlightedTitle}

${highlightedChannel}
${video.views} views · ${video.uploadDate}
`; searchResultsContent.appendChild(item); }); searchResults.style.display = 'block'; } // 绑定事件 function bindEvents() { // 搜索事件 searchInput.addEventListener('input', (e) => { performSearch(e.target.value); }); searchBtn.addEventListener('click', () => { performSearch(searchInput.value); }); // 点击其他地方关闭搜索结果 document.addEventListener('click', (e) => { if (!e.target.closest('.search-container') && !e.target.closest('.search-results')) { searchResults.style.display = 'none'; } }); // 分类按钮事件 categoryBtns.forEach(btn => { btn.addEventListener('click', () => { // 移除所有活动状态 categoryBtns.forEach(b => b.classList.remove('active')); // 添加当前活动状态 btn.classList.add('active'); // 更新当前分类 currentCategory = btn.textContent; // 重新渲染视频 renderVideos(); renderShorts(); }); }); // 侧边栏导航按钮事件 const navBtns = document.querySelectorAll('.nav-btn'); navBtns.forEach(btn => { btn.addEventListener('click', () => { navBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); }); }); // 订阅板块展开/收起 const subscriptionTitle = document.querySelector('.nav-section-title'); subscriptionTitle.addEventListener('click', () => { const subscriptionsList = document.querySelector('.subscriptions-list'); const chevron = subscriptionTitle.querySelector('i'); if (subscriptionsList.style.display === 'none') { subscriptionsList.style.display = 'block'; chevron.style.transform = 'rotate(0deg)'; } else { subscriptionsList.style.display = 'none'; chevron.style.transform = 'rotate(-90deg)'; } }); } // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', init);