Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 f152c8dc5d add some function and fix some problems.

2025-10-01 16:05:43 +08:00

4.0 KiB

Raw Blame History

搜索栏功能添加说明

📅 更新日期

2025年10月1日

🎯 功能概述

为导航页面添加了实时搜索功能，支持按标题和描述搜索卡片内容。

📦 新增文件

1. SearchBar 组件

路径: /src/components/navigation/SearchBar.astro

功能特性:

✅ 实时搜索过滤
✅ 搜索结果计数
✅ 清除按钮
✅ 搜索高亮动画
✅ 符合莫兰蒂蓝主题
✅ 响应式设计

设计元素:

圆角搜索框（border-radius: 50px）
玻璃态效果（backdrop-filter: blur(10px)）
主题色边框（#2c4a6b）
搜索图标（Font Awesome）
渐入动画效果

🔄 修改文件

1. NavigationCard.astro

修改内容:

添加 data-card 属性用于搜索定位
添加 card-title 和 card-description 类名
新增 .search-highlight 样式
添加搜索脉冲动画（searchPulse）

CSS 新增:

.nav-card.search-highlight {
  animation: searchPulse 0.6s ease;
  border-color: #2c4a6b;
  box-shadow: 0 8px 30px rgba(44, 74, 107, 0.2);
}

@keyframes searchPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

2. 导航页面更新

index.astro（首页）

✅ 导入 SearchBar 组件
✅ 在 Hero 区域后添加搜索栏
✅ 占位符文本："搜索服务..."

report/index.astro（报告页）

✅ 导入 SearchBar 组件
✅ 在 Hero 区域后添加搜索栏
✅ 占位符文本："搜索报告..."

🎨 设计特点

1. 莫兰蒂蓝主题

主色: #2c4a6b (边框、高亮)
深色: #011a2d (文字)
浅色: #5b778e (占位符)

2. 交互效果

聚焦: 边框变蓝、阴影增强、轻微上移
输入: 实时过滤卡片、显示结果数
匹配: 卡片高亮、脉冲动画
清除: 一键重置、恢复所有卡片

3. 用户体验

实时搜索反馈
动画流畅自然
无结果自动隐藏提示
点击外部关闭结果面板

🔧 技术实现

搜索逻辑

// 1. 获取所有导航卡片
allCards = Array.from(navigationGrid.querySelectorAll('[data-card]'))

// 2. 搜索匹配
const matches = title.includes(query) || description.includes(query)

// 3. 显示/隐藏卡片
if (matches) {
  card.style.display = ''
  card.classList.add('search-highlight')
} else {
  card.style.display = 'none'
}

性能优化

使用 data-card 属性快速定位
避免重复查询 DOM
动画使用 CSS transform（GPU 加速）

📱 响应式设计

桌面端（>768px）

最大宽度: 600px
搜索框内边距: 0.75rem 1.5rem
字体大小: 1rem

移动端（≤768px）

宽度: 100%
搜索框内边距: 0.6rem 1.2rem
字体大小: 0.95rem

🚀 使用方法

在新页面中添加搜索栏

---
import SearchBar from '../components/navigation/SearchBar.astro';
---

<SearchBar placeholder="搜索..." />

确保导航卡片支持搜索

<NavigationCard
  title="卡片标题"
  description="卡片描述"
  href="/path"
  icon="fas fa-icon"
/>

📊 构建验证

构建结果

✓ 0 errors
✓ 0 warnings
✓ 20 pages built

文件统计

SearchBar.astro: ~6KB
修改文件: 3个
新增样式: ~2KB
新增脚本: ~1.5KB

🎯 应用页面

首页 (/)
- 搜索9个技术服务
- 占位符: "搜索服务..."
报告页 (/report)
- 搜索8个技术报告
- 占位符: "搜索报告..."

💡 未来改进建议

搜索增强
- 支持拼音搜索
- 支持模糊匹配
- 搜索历史记录
性能优化
- 添加防抖处理
- 虚拟滚动（卡片很多时）
功能扩展
- 支持标签筛选
- 支持分类过滤
- 搜索结果排序

🎉 总结

✅ 成功为导航页面添加了美观实用的搜索功能 ✅ 完美融合莫兰蒂蓝主题设计 ✅ 提供流畅的用户体验 ✅ 代码整洁、易于维护 ✅ 响应式设计支持所有设备

作者: GitHub Copilot
日期: 2025年10月1日
版本: 1.0.0

4.0 KiB Raw Blame History Unescape Escape