feat: 优化调整卡片样式布局

- 站点卡片改为紧凑布局并统一动态渲染 - 搜索框玻璃拟态与 Ctrl/Cmd+K 聚焦
2025-12-22 17:33:16 +08:00
parent ecc5e287b5
commit 2b366ae7ca
4 changed files with 310 additions and 99 deletions
--- 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,12 +1870,39 @@ 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 {
@@ -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 {
--- 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';
+                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) {
+                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`;
-                    newSite.innerHTML = `
-                        <i class="fas fa-circle-notch fa-spin icon-placeholder" aria-hidden="true"></i>
-                        <img class="favicon-icon" src="${faviconUrl}" alt="${(data.name || '站点')} favicon" loading="lazy" style="opacity:0;"
-                             onload="this.style.opacity='1'; this.previousElementSibling.style.display='none';"
-                             onerror="this.style.display='none'; this.previousElementSibling.style.display='none'; this.nextElementSibling.style.display='inline-block';" />
-                        <i class="fas fa-link icon-fallback" aria-hidden="true" style="display:none;"></i>
-                        <h3>${data.name || '未命名站点'}</h3>
-                        <p>${data.description || ''}</p>
-                    `;
+
+                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 {
-                    newSite.innerHTML = `
-                        <i class="${data.icon || 'fas fa-link'}"></i>
-                        <h3>${data.name || '未命名站点'}</h3>
-                        <p>${data.description || ''}</p>
-                    `;
-                }
-            } catch (e) {
-                newSite.innerHTML = `
-                    <i class="${data.icon || 'fas fa-link'}"></i>
-                    <h3>${data.name || '未命名站点'}</h3>
-                    <p>${data.description || ''}</p>
-                `;
+                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;
--- a/templates/components/site-card.hbs
+++ b/templates/components/site-card.hbs
@@ -6,6 +6,7 @@
   data-url="{{url}}"
   data-icon="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"
   data-description="{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}">
+    <div class="site-card-icon" aria-hidden="true">
      {{#ifEquals @root.icons.mode "favicon"}}
        {{#ifHttpUrl url}}
          <div class="icon-container">
@@ -18,15 +19,19 @@
              onload="this.classList.add('loaded'); this.previousElementSibling.classList.add('hidden');"
              onerror="this.classList.add('error'); this.previousElementSibling.classList.add('hidden'); this.nextElementSibling.classList.add('visible');"
            />
-          <i class="fas fa-link icon-fallback" aria-hidden="true"></i>
+            <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} icon-fallback" aria-hidden="true"></i>
          </div>
        {{else}}
-        <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"></i>
+          <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
        {{/ifHttpUrl}}
      {{else}}
-      <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"></i>
+        <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}} site-icon" aria-hidden="true"></i>
      {{/ifEquals}}
+    </div>
+
+    <div class="site-card-content">
      <h3>{{#if name}}{{name}}{{else}}未命名站点{{/if}}</h3>
      <p>{{#if description}}{{description}}{{else}}{{extractDomain url}}{{/if}}</p>
+    </div>
 </a>
 {{/if}}
--- a/templates/layouts/default.hbs
+++ b/templates/layouts/default.hbs
@@ -104,7 +104,7 @@
            <!-- 搜索框容器 -->
            <div class="search-container">
                <div class="search-box">
-                    <input type="text" id="search" placeholder="搜索...">
+                    <input type="text" id="search" placeholder="搜索 Ctrl+K ..." aria-label="搜索" aria-keyshortcuts="Control+K Meta+K">
                    <i class="fas fa-search search-icon" title="本地搜索"></i>
                    <i class="fas fa-chevron-down search-engine-toggle" title="选择搜索引擎" role="button" aria-label="选择搜索引擎" aria-expanded="false" tabindex="0"></i>
                    <div class="search-engine-dropdown">