输入即反馈：给作品页加上实时搜索

你在淘宝搜索框打字时，下面的结果立刻就变了——不需要点"搜索"按钮。这种"输入即反馈"的体验，是现代应用的标配。

这一关在作品页加上这个功能。

为什么"实时搜索"比"点击搜索"体验更好？

传统的搜索流程是：输入关键词 → 点击搜索按钮 → 等待结果。

实时搜索的流程是：输入关键词 → 结果立刻更新。

少了"点击"和"等待"两个步骤，用户的认知负担大幅降低。用户不需要思考"我要不要点搜索"，结果就已经出来了。

这种设计模式叫 即时反馈（Instant Feedback），是现代 UX 设计的核心原则之一。Google 搜索的自动补全、淘宝的实时搜索、Notion 的快速查找，都是这个原则的体现。

实时搜索的技术原理

实时搜索的实现原理很简单：

1. 监听输入框的 onChange 事件
2. 每次用户输入，更新搜索关键词的状态
3. 根据关键词过滤数据，只显示匹配的卡片

const [searchQuery, setSearchQuery] = useState('');

// 过滤逻辑
const filteredWorks = works.filter(work => 
  work.title.includes(searchQuery) || 
  work.description.includes(searchQuery)
);

状态变化 → React 重新渲染 → 只显示过滤后的卡片。整个过程在毫秒内完成，用户感觉是"实时"的。

第一步：加搜索框

对 AI 说：

在作品页（/works）的顶部加一个搜索框：

- 宽度占满内容区域，最宽 480px，居中
- 左侧有搜索图标
- placeholder 文字："搜索作品名称或描述..."
- 圆角，有边框，focus 时边框变成强调色
- 有清除按钮（输入内容后出现，点击清空）

---

第二步：实现实时过滤

对 AI 说：

实现实时搜索过滤功能：

- 用户输入关键词时，作品卡片实时过滤
- 过滤规则：卡片的标题或描述包含关键词就显示，否则隐藏
- 过滤时有淡入淡出动画（卡片消失和出现都有过渡）
- 搜索框清空时恢复显示所有卡片
- 没有匹配结果时，显示一个友好的空状态（比如"没有找到相关作品"）

在搜索框里输入一些关键词，看看卡片是否实时过滤。

---

第三步：加标签过滤

对 AI 说：

在搜索框下方加上标签过滤：

- 从作品数据中提取所有标签，显示为可点击的标签按钮
- 点击标签后，只显示包含该标签的作品
- 选中的标签有高亮样式
- 可以和搜索框组合使用（同时满足搜索词和标签）
- 点击已选中的标签取消选中

---

关于"防抖"（Debounce）

实时搜索有一个潜在问题：用户每输入一个字符，就触发一次过滤。如果数据量大，或者需要发请求到服务器，这会造成性能问题。

解决方案是防抖（Debounce）：用户停止输入 300ms 后，才触发搜索。

// 防抖示例
const debouncedSearch = debounce((query) => {
  // 执行搜索
}, 300);

对于这一关的前端过滤来说，数据量小，不需要防抖。但如果你以后做后端搜索（发请求到服务器），一定要加防抖，否则用户每输入一个字就发一个请求，服务器会被打爆。

你可以告诉 AI："给搜索框加上 300ms 的防抖"，AI 会帮你实现。

---

关于"空状态"设计

当搜索结果为空时，不要只显示一片空白——这会让用户困惑，不知道是出了问题还是真的没有结果。

好的空状态设计应该：

• 有一个图标或插图（让页面不那么空洞）
• 清楚地说明"没有找到结果"
• 给用户一个行动建议（比如"清除搜索词"或"换个关键词试试"）

帮我优化搜索结果为空时的状态：
- 显示一个搜索图标（大号，灰色）
- 文字："没有找到"[搜索词]"相关的作品"
- 下方有一个"清除搜索"按钮

---

通关条件

完成以下三步即可通关：

1. 加搜索框，输入内容后有清除按钮
2. 实时过滤正常工作，有动画效果
3. 搜索效果符合预期（输入关键词，不相关的卡片消失）

卡住了？

• 搜索不生效？让 AI 检查事件监听是否绑定到了正确的输入框元素
• 过滤逻辑不对？告诉 AI 具体是什么情况——比如"输入'设计'但设计相关的卡片也消失了"
• 动画不流畅？让 AI 用 CSS transition 配合 opacity 和 transform 实现，避免用 display: none
• 标签过滤和搜索框不能同时工作？让 AI 检查过滤逻辑，确保两个条件是"AND"关系（同时满足）