From d19398fe7ef58fe50f8a5f12f59199d86386283b Mon Sep 17 00:00:00 2001 From: wzj <244142824@qq.com> Date: Wed, 9 Jul 2025 23:29:46 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8D=A1=E7=89=87=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E3=80=81=E5=9B=BA=E5=AE=9A=E6=BB=91=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/index.html | 146 +++++++++++++++++++++++++++---------------- 1 file changed, 91 insertions(+), 55 deletions(-) diff --git a/templates/index.html b/templates/index.html index 7663b67..207c575 100644 --- a/templates/index.html +++ b/templates/index.html @@ -24,10 +24,16 @@ --tooltip-text: black; --bg-image: none; --dark-bg-image: none; + --title-transition: color 0.15s ease-in-out; } * { box-sizing: border-box; } + /* 强制页面内容区域始终显示垂直滚动条 */ + html { + overflow-y: scroll; + } + body { font-family: 'Segoe UI', system-ui, sans-serif; max-width: 1400px; @@ -35,9 +41,10 @@ padding: 20px; background-color: #f8f9fa; color: #333; - transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.15s ease-in-out; overflow-x: hidden; width: 100%; + overflow-y: auto; } /* 新增私有卡片标记样式 */ @@ -81,7 +88,7 @@ background-repeat: no-repeat; z-index: -1; opacity: 0; - transition: opacity 0.5s ease; + transition: opacity 0.3s ease-in-out; } /* 视频背景容器 */ @@ -145,6 +152,7 @@ margin-bottom: 30px; font-weight: 600; position: relative; + transition: var(--title-transition); } /* 移除导航栏按钮样式 */ @@ -167,7 +175,7 @@ border: 1px solid #ddd; font-size: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .search-results { position: absolute; @@ -179,13 +187,13 @@ max-height: 300px; overflow-y: auto; display: none; - transition: background-color 0.3s ease; + transition: background-color 0.15s ease-in-out; } .search-result-item { padding: 10px 20px; border-bottom: 1px solid #eee; cursor: pointer; - transition: background-color 0.3s ease; + transition: background-color 0.15s ease-in-out; } .search-result-item:hover { background: #f5f5f5; @@ -367,7 +375,7 @@ body.dark-theme .floating-btn#addBtn { z-index: 10; padding: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.15s ease-in-out; margin-left: -15px; margin-right: -15px; padding-left: 20px; @@ -585,7 +593,7 @@ body.dark-theme .secondary-filters-container::after { border-bottom: 2px solid #e9ecef70; display: flex; align-items: center; - transition: color 0.3s ease, border-color 0.3s ease; + transition: var(--title-transition); } .category-title i { margin-right: 10px; @@ -600,6 +608,18 @@ body.dark-theme .secondary-filters-container::after { gap: 20px; width: 100%; } + + /* 新增卡片动画样式 */ + .app-item { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease; + } + .app-item.visible { + opacity: 1; + transform: translateY(0); + } + @media (max-width: 1200px) { .app-list { grid-template-columns: repeat(4, 1fr); @@ -675,7 +695,7 @@ body.dark-theme .secondary-filters-container::after { justify-content: center; font-size: 18px; color: var(--primary-color); - transition: background-color 0.3s ease; + transition: background-color 0.15s ease-in-out; overflow: hidden; } @@ -693,7 +713,7 @@ body.dark-theme .secondary-filters-container::after { .app-title { font-weight: 600; margin-bottom: 4px; - transition: color 0.3s ease; + transition: var(--title-transition); } .app-url { font-size: 13px; @@ -701,7 +721,7 @@ body.dark-theme .secondary-filters-container::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transition: color 0.3s ease; + transition: color 0.15s ease-in-out; } .app-tags { display: flex; @@ -1400,6 +1420,20 @@ body.dark-theme .secondary-filters-container::after { noResults.textContent = '没有找到匹配的应用'; appListContainer.appendChild(noResults); } + + // 添加卡片动画效果 + animateCards(); + } + + // 添加卡片动画效果 + function animateCards() { + const cards = document.querySelectorAll('.app-item'); + cards.forEach((card, index) => { + // 使用setTimeout实现卡片依次出现的效果 + setTimeout(() => { + card.classList.add('visible'); + }, index * 10); // 每个卡片间隔50ms + }); } // 辅助函数：计算对比色 @@ -1655,57 +1689,59 @@ body.dark-theme .secondary-filters-container::after { } // 主题切换功能 -// 主题切换功能 -function setupThemeSwitcher() { - const themeToggle = document.getElementById('themeToggle'); + function setupThemeSwitcher() { + const themeToggle = document.getElementById('themeToggle'); - themeToggle.addEventListener('click', () => { - // 确定新主题 - const newTheme = document.body.classList.contains('dark-theme') ? 'light' : 'dark'; + themeToggle.addEventListener('click', () => { + // 使用requestAnimationFrame确保在浏览器重绘前完成所有样式变更 + requestAnimationFrame(() => { + // 确定新主题 + const newTheme = document.body.classList.contains('dark-theme') ? 'light' : 'dark'; - // 更新界面主题 - document.body.classList.remove('dark-theme', 'light-theme'); - if (newTheme === 'dark') { - document.body.classList.add('dark-theme'); - // 更新视频背景显示状态 - document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'none'); - document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'block'); - } else { - document.body.classList.add('light-theme'); - // 更新视频背景显示状态 - document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'block'); - document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'none'); - } + // 更新界面主题 + document.body.classList.remove('dark-theme', 'light-theme'); + if (newTheme === 'dark') { + document.body.classList.add('dark-theme'); + // 更新视频背景显示状态 + document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'none'); + document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'block'); + } else { + document.body.classList.add('light-theme'); + // 更新视频背景显示状态 + document.querySelectorAll('.video-bg-container.bg-light').forEach(el => el.style.display = 'block'); + document.querySelectorAll('.video-bg-container.bg-dark').forEach(el => el.style.display = 'none'); + } - // 更新主题按钮图标 - updateThemeButtonIcon(); + // 更新主题按钮图标 + updateThemeButtonIcon(); - // 更新本地设置（仅主题） - settings.theme = newTheme; + // 更新本地设置（仅主题） + settings.theme = newTheme; - // 保存设置（不会影响后台的背景设置） - if (isLoggedIn) { - // 已登录用户只更新主题设置 - fetch('/api/settings', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ theme: newTheme }) - }).catch(error => { - console.error('保存主题设置失败:', error); + // 保存设置（不会影响后台的背景设置） + if (isLoggedIn) { + // 已登录用户只更新主题设置 + fetch('/api/settings', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ theme: newTheme }) + }).catch(error => { + console.error('保存主题设置失败:', error); + }); + } else { + // 游客保存到本地（仅保存主题、卡片样式和搜索历史） + const settingsToSave = { + theme: newTheme, + card_style: settings.card_style, + search_history: settings.search_history + }; + localStorage.setItem('navSettings', JSON.stringify(settingsToSave)); + } }); - } else { - // 游客保存到本地（仅保存主题、卡片样式和搜索历史） - const settingsToSave = { - theme: newTheme, - card_style: settings.card_style, - search_history: settings.search_history - }; - localStorage.setItem('navSettings', JSON.stringify(settingsToSave)); - } - }); -} + }); + } // 简洁模式切换 function setupCompactToggle() {