6.5 Search Bar

学习目标

完成本节后，你将能够：

1. 理解 Search Bar 为什么是契约型 UI。
2. 解释 URL filter state 为什么是单一事实源。
3. 修改筛选 UI 前知道必须读哪些文件。

---

6.5.1 状态模型

URL filter state
  = FilterState + searchQuery + searchType

Search Bar 是受控编辑器，facet sidebar 也是受控编辑器。二者都读写同一个事实源。

6.5.2 纯逻辑和 UI 的分离

区域	作用
lib/	parser、AST、validate、adapter、completion、reverse adapter
store/	draft-only Zustand store
hooks/useEventsSearchBar.ts	URL 状态和 draft 的桥
components/	composer、tokens、autocomplete、row

6.5.3 修改前必读

• web/src/features/search-bar/README.md
• packages/shared/src/interfaces/filters.ts
• events table column/filter registry
• query builder

下一篇

第 7 篇 · 二次开发