From 2b366ae7ca41b015176e9633b8331bfa30842bc2 Mon Sep 17 00:00:00 2001 From: rbetree Date: Mon, 22 Dec 2025 17:33:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 站点卡片改为紧凑布局并统一动态渲染 - 搜索框玻璃拟态与 Ctrl/Cmd+K 聚焦 --- assets/style.css | 183 ++++++++++++++++++++++------- src/script.js | 177 ++++++++++++++++++++++------ templates/components/site-card.hbs | 47 ++++---- templates/layouts/default.hbs | 2 +- 4 files changed, 310 insertions(+), 99 deletions(-) diff --git a/assets/style.css b/assets/style.css index 9c13514..28f29d3 100644 --- a/assets/style.css +++ b/assets/style.css @@ -698,9 +698,18 @@ body .content.expanded { position: relative; width: 100%; max-width: 600px; - background-color: var(--sidebar-bg); + background: rgba(var(--card-bg-rgb), 0.65); + border: 1px solid var(--border-color); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); border-radius: var(--radius-lg); - transition: background-color var(--transition-normal); + box-shadow: 0 4px 16px var(--shadow-color); + transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); +} + +.search-box:focus-within { + border-color: var(--border-color); + box-shadow: 0 6px 24px var(--shadow-color); } .search-box::after { @@ -735,14 +744,14 @@ body .content.expanded { background-color: transparent; color: var(--text-color); font-size: 1rem; - transition: all var(--transition-normal); - box-shadow: 0 2px 8px var(--shadow-color); + transition: background-color var(--transition-normal), color var(--transition-normal); + box-shadow: none; } .search-box input:focus { outline: none; - background-color: var(--secondary-bg); - box-shadow: 0 4px 12px var(--shadow-color); + background-color: rgba(var(--card-bg-rgb), 0.25); + box-shadow: none; } .search-box input::placeholder { @@ -758,11 +767,16 @@ body .content.expanded { transition: all 0.3s ease; } -.search-box.has-results i { +.search-box:focus-within .search-icon, +.search-box:focus-within .search-engine-toggle { + color: var(--accent-color); +} + +.search-box.has-results .search-icon { color: var(--success-color); } -.search-box.no-results i { +.search-box.no-results .search-icon { color: var(--error-color); } @@ -799,7 +813,9 @@ body .content.expanded { position: absolute; top: calc(100% + 5px); right: 1rem; - background-color: var(--sidebar-bg); + background: rgba(var(--card-bg-rgb), 0.9); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); border-radius: var(--radius-md); box-shadow: 0 4px 15px var(--shadow-color); display: none; @@ -1241,7 +1257,7 @@ body .content.expanded { .category-level-4 .sites-grid { margin-top: 0.8rem; gap: 0.8rem; - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* 响应式设计 - 嵌套结构 */ @@ -1305,8 +1321,8 @@ body .content.expanded { /* 网站卡片网格 */ .sites-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); - gap: 1.2rem; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: var(--spacing-md); position: relative; z-index: 1; width: 100%; @@ -1316,14 +1332,14 @@ body .content.expanded { .site-card { background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2)); border-radius: var(--radius-lg); - padding: var(--spacing-md); + padding: 0.85rem 1rem; text-decoration: none; color: inherit; - transition: all var(--transition-normal); + transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); display: flex; - flex-direction: column; align-items: center; - text-align: center; + gap: 0.75rem; + text-align: left; backface-visibility: hidden; transform: translateZ(0); will-change: transform; @@ -1332,19 +1348,40 @@ body .content.expanded { box-shadow: 0 4px 16px var(--shadow-color); border: 1px solid var(--border-color); z-index: 2; + overflow: hidden; } .site-card:hover { - transform: translateY(-4px); + transform: translateY(-3px); background: var(--site-card-hover-bg); border-color: var(--border-color); } -.site-card i { - font-size: 1.8rem; - margin-bottom: 1rem; +.site-card-icon { + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-md); + background: rgba(var(--card-bg-rgb), 0.35); + border: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.site-card .site-icon { + font-size: 1.4rem; color: var(--accent-color); - transition: all 0.3s ease; + transition: color 0.3s ease; +} + +.site-card:hover .site-card-icon { + transform: scale(1.06); +} + +.site-card:hover .site-icon { + color: var(--accent-hover); } /* 网站卡片 favicon 图片样式，与图标尺寸保持一致 */ @@ -1352,7 +1389,6 @@ body .content.expanded { display: inline-block; width: 1.8rem; height: 1.8rem; - margin-bottom: var(--spacing-md); border-radius: var(--radius-sm); object-fit: cover; transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -1363,14 +1399,14 @@ body .content.expanded { display: inline-block; width: 1.8rem; height: 1.8rem; - margin-bottom: var(--spacing-md); border-radius: var(--radius-sm); flex-shrink: 0; vertical-align: middle; text-align: center; line-height: 1.8rem; - font-size: 1.8rem; + font-size: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; + color: var(--accent-color); } /* 确保图标容器在加载过程中保持固定尺寸 */ @@ -1378,7 +1414,6 @@ body .content.expanded { display: inline-block; width: 1.8rem; height: 1.8rem; - margin-bottom: var(--spacing-md); position: relative; vertical-align: middle; } @@ -1427,19 +1462,20 @@ body .content.expanded { opacity: 1; } -.site-card:hover i { - transform: scale(1.1); +.site-card:hover .icon-placeholder, +.site-card:hover .icon-fallback { color: var(--accent-hover); } -.site-card:hover .favicon-icon { - transform: scale(1.1); - box-shadow: 0 0 0 1px var(--border-color); +.site-card-content { + flex: 1; + min-width: 0; + overflow: hidden; } .site-card h3 { - font-size: 1rem; - margin-bottom: 0.5rem; + font-size: 0.95rem; + margin-bottom: 0.25rem; color: var(--text-bright); font-weight: 500; letter-spacing: 0.3px; @@ -1451,7 +1487,7 @@ body .content.expanded { } .site-card p { - font-size: 0.9rem; + font-size: 0.82rem; color: var(--nav-item-color); margin: 0; line-height: 1.4; @@ -1834,14 +1870,41 @@ body .content.expanded { } .site-card { + flex-direction: column; + align-items: center; + text-align: center; padding: var(--spacing-md) var(--spacing-sm); + gap: 0.6rem; } - - .site-card i { + + .site-card-icon { + width: 2.2rem; + height: 2.2rem; + } + + .site-card .site-icon { font-size: 1.5rem; - margin-bottom: 0.8rem; } - + + .site-card .favicon-icon, + .site-card .icon-placeholder, + .site-card .icon-fallback, + .site-card .icon-container { + width: 1.5rem; + height: 1.5rem; + } + + .site-card .icon-placeholder, + .site-card .icon-fallback { + line-height: 1.5rem; + font-size: 1.3rem; + } + + .site-card-content { + width: 100%; + text-align: center; + } + .site-card h3 { font-size: 0.95rem; margin-bottom: 0.4rem; @@ -1914,11 +1977,30 @@ body .content.expanded { .site-card { padding: 0.75rem 0.5rem; + gap: 0.5rem; } - .site-card i { + .site-card-icon { + width: 2rem; + height: 2rem; + } + + .site-card .site-icon { font-size: 1.3rem; - margin-bottom: 0.6rem; + } + + .site-card .favicon-icon, + .site-card .icon-placeholder, + .site-card .icon-fallback, + .site-card .icon-container { + width: 1.35rem; + height: 1.35rem; + } + + .site-card .icon-placeholder, + .site-card .icon-fallback { + line-height: 1.35rem; + font-size: 1.2rem; } .site-card h3 { @@ -1953,11 +2035,30 @@ body .content.expanded { .site-card { padding: 0.6rem 0.4rem; + gap: 0.45rem; } - .site-card i { + .site-card-icon { + width: 1.9rem; + height: 1.9rem; + } + + .site-card .site-icon { font-size: 1.2rem; - margin-bottom: 0.5rem; + } + + .site-card .favicon-icon, + .site-card .icon-placeholder, + .site-card .icon-fallback, + .site-card .icon-container { + width: 1.25rem; + height: 1.25rem; + } + + .site-card .icon-placeholder, + .site-card .icon-fallback { + line-height: 1.25rem; + font-size: 1.1rem; } .site-card h3 { diff --git a/src/script.js b/src/script.js index 5f1dffc..2961bac 100644 --- a/src/script.js +++ b/src/script.js @@ -1,3 +1,22 @@ +function menavExtractDomain(url) { + if (!url) return ''; + + try { + // 移除协议部分 (http://, https://, etc.) + let domain = String(url).replace(/^[a-zA-Z]+:\/\//, ''); + + // 移除路径、查询参数和锚点 + domain = domain.split('/')[0].split('?')[0].split('#')[0]; + + // 移除端口号（如果有） + domain = domain.split(':')[0]; + + return domain; + } catch (e) { + return String(url); + } +} + // 全局MeNav对象 - 用于浏览器扩展 window.MeNav = { version: "1.0.0", @@ -53,10 +72,27 @@ window.MeNav = { element.setAttribute('data-description', newData.description); } if (newData.icon) { - // 优先更新站点卡片中的回退图标（favicon模式下存在） - const iconElement = element.querySelector('i.icon-fallback') || element.querySelector('i'); + const iconElement = + element.querySelector('i.icon-fallback') || + element.querySelector('i.site-icon') || + element.querySelector('.site-card-icon i') || + element.querySelector('i'); + if (iconElement) { - iconElement.className = newData.icon; + const nextIconClass = String(newData.icon || '').trim(); + const preservedClasses = []; + + if (iconElement.classList.contains('icon-fallback')) { + preservedClasses.push('icon-fallback'); + } + if (iconElement.classList.contains('site-icon')) { + preservedClasses.push('site-icon'); + } + + if (nextIconClass) { + iconElement.className = nextIconClass; + preservedClasses.forEach(cls => iconElement.classList.add(cls)); + } } element.setAttribute('data-icon', newData.icon); } @@ -169,46 +205,93 @@ window.MeNav = { // 创建新的站点卡片 const newSite = document.createElement('a'); newSite.className = 'site-card'; - newSite.href = data.url || '#'; - newSite.title = data.name + (data.description ? ' - ' + data.description : ''); + + const siteName = data.name || '未命名站点'; + const siteUrl = data.url || '#'; + const siteIcon = data.icon || 'fas fa-link'; + const siteDescription = data.description || (data.url ? menavExtractDomain(data.url) : ''); + + newSite.href = siteUrl; + newSite.title = siteName + (siteDescription ? ' - ' + siteDescription : ''); // 设置数据属性 newSite.setAttribute('data-type', 'site'); - newSite.setAttribute('data-name', data.name || '未命名站点'); + newSite.setAttribute('data-name', siteName); newSite.setAttribute('data-url', data.url || ''); - newSite.setAttribute('data-icon', data.icon || 'fas fa-link'); - newSite.setAttribute('data-description', data.description || ''); + newSite.setAttribute('data-icon', siteIcon); + newSite.setAttribute('data-description', siteDescription); - // 添加内容（根据图标模式渲染） + // 添加内容（根据图标模式渲染，避免 innerHTML 注入） + const iconWrapper = document.createElement('div'); + iconWrapper.className = 'site-card-icon'; + iconWrapper.setAttribute('aria-hidden', 'true'); + + const contentWrapper = document.createElement('div'); + contentWrapper.className = 'site-card-content'; + + const titleEl = document.createElement('h3'); + titleEl.textContent = siteName; + + const descEl = document.createElement('p'); + descEl.textContent = siteDescription; + + contentWrapper.appendChild(titleEl); + contentWrapper.appendChild(descEl); + + let iconsMode = 'favicon'; try { - const cfg = window.MeNav && typeof window.MeNav.getConfig === 'function' ? window.MeNav.getConfig() : null; - const iconsMode = (cfg && (cfg.data?.icons?.mode || cfg.icons?.mode)) || 'favicon'; - if (iconsMode === 'favicon' && data.url && /^https?:\/\//i.test(data.url)) { - const faviconUrl = `https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${encodeURIComponent(data.url)}&size=32`; - newSite.innerHTML = ` - - ${(data.name || '站点')} favicon - -

${data.name || '未命名站点'}

-

${data.description || ''}

- `; - } else { - newSite.innerHTML = ` - -

${data.name || '未命名站点'}

-

${data.description || ''}

- `; - } + const cfg = + window.MeNav && typeof window.MeNav.getConfig === 'function' + ? window.MeNav.getConfig() + : null; + iconsMode = (cfg && (cfg.data?.icons?.mode || cfg.icons?.mode)) || 'favicon'; } catch (e) { - newSite.innerHTML = ` - -

${data.name || '未命名站点'}

-

${data.description || ''}

- `; + iconsMode = 'favicon'; } + if (iconsMode === 'favicon' && data.url && /^https?:\/\//i.test(data.url)) { + const faviconUrl = `https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${encodeURIComponent(data.url)}&size=32`; + + const iconContainer = document.createElement('div'); + iconContainer.className = 'icon-container'; + + const placeholder = document.createElement('i'); + placeholder.className = 'fas fa-circle-notch fa-spin icon-placeholder'; + placeholder.setAttribute('aria-hidden', 'true'); + + const fallback = document.createElement('i'); + fallback.className = `${siteIcon} icon-fallback`; + fallback.setAttribute('aria-hidden', 'true'); + + const favicon = document.createElement('img'); + favicon.className = 'favicon-icon'; + favicon.src = faviconUrl; + favicon.alt = `${siteName} favicon`; + favicon.loading = 'lazy'; + favicon.addEventListener('load', () => { + favicon.classList.add('loaded'); + placeholder.classList.add('hidden'); + }); + favicon.addEventListener('error', () => { + favicon.classList.add('error'); + placeholder.classList.add('hidden'); + fallback.classList.add('visible'); + }); + + iconContainer.appendChild(placeholder); + iconContainer.appendChild(favicon); + iconContainer.appendChild(fallback); + iconWrapper.appendChild(iconContainer); + } else { + const iconEl = document.createElement('i'); + iconEl.className = `${siteIcon} site-icon`; + iconEl.setAttribute('aria-hidden', 'true'); + iconWrapper.appendChild(iconEl); + } + + newSite.appendChild(iconWrapper); + newSite.appendChild(contentWrapper); + // 添加到DOM sitesGrid.appendChild(newSite); @@ -222,13 +305,13 @@ window.MeNav = { // 触发元素添加事件 this.events.emit('elementAdded', { - id: data.name, + id: siteName, type: 'site', parentId: parentId, data: data }); - return data.name; + return siteName; } else if (type === 'category') { // 查找父级页面容器 parent = document.querySelector(`[data-container="categories"]`); @@ -772,6 +855,28 @@ document.addEventListener('DOMContentLoaded', () => { searchToggle.addEventListener('click', toggleSearch); overlay.addEventListener('click', closeAllPanels); + // 全局快捷键：Ctrl/Cmd + K 聚焦搜索 + document.addEventListener('keydown', e => { + const key = (e.key || '').toLowerCase(); + if (key !== 'k') return; + if ((!e.ctrlKey && !e.metaKey) || e.altKey) return; + + const target = e.target; + const isTypingTarget = + target && + (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable); + + if (isTypingTarget && target !== searchInput) return; + + e.preventDefault(); + + if (isMobile() && !isSearchOpen) { + toggleSearch(); + } + + searchInput && searchInput.focus(); + }); + // 检查是否是移动设备 function isMobile() { return window.innerWidth <= 768; diff --git a/templates/components/site-card.hbs b/templates/components/site-card.hbs index ab9fa91..e5ecf07 100644 --- a/templates/components/site-card.hbs +++ b/templates/components/site-card.hbs @@ -6,27 +6,32 @@ data-url="{{url}}" data-icon="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}" data-description="{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}"> - {{#ifEquals @root.icons.mode "favicon"}} - {{#ifHttpUrl url}} -
- - {{name}} favicon - -
+ + +
+

{{#if name}}{{name}}{{else}}未命名站点{{/if}}

+

{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}

+
{{/if}} diff --git a/templates/layouts/default.hbs b/templates/layouts/default.hbs index 19966e0..78d0c00 100644 --- a/templates/layouts/default.hbs +++ b/templates/layouts/default.hbs @@ -104,7 +104,7 @@
- +