Skip to content

feat(ui): search enhancement — debounce, mark highlight, clear button (v1.18 D) - #51

Merged
argszero merged 1 commit into
mainfrom
feat/ui-ue-round3-search
Aug 17, 2026
Merged

argszero merged 1 commit into
mainfrom
feat/ui-ue-round3-search

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

Implements item D (搜索增强 / Search enhancement) of the UI/UE round-3 wave (rant 2026-08-17T18:06:09, branch feat/ui-ue-round3, version v1.18).

Three acceptance points, all covered across the four search boxes (#mk-search market / #ak-search API keys / #od-search departments / #ops-search operator users):

  1. Debounce (~150ms) — new wireSearch(input, render) helper: typing no longer re-renders the whole table on every keystroke; consecutive inputs coalesce into a single render.
  2. Keyword highlight — new hl(text, rawQ) helper: escape HTML first, then wrap case-insensitive matches in <mark> (regex-escaped user input, & < > aligned with the escaped text). Highlight is cleared automatically when the query is reset. mark styled with --accent-soft background + --accent-text color (WCAG-friendly in both dark and light themes).
  3. Clear × button — each search input is wrapped in a .search-box with a .search-clear button that appears only when the input has content; clicking clears the field, re-renders immediately (no debounce wait), and refocuses. Programmatic clears (resetSearch) keep the × button state in sync — already wired into the existing empty-state "清除搜索 / 清除筛选" buttons.

Design notes

  • Zero external dependencies (pure CSS/SVG/JS), consistent with the wave's constraints.
  • Reuses existing semantic CSS variables so the light theme (v1.18 B) is covered automatically.
  • wireSearch binds both the debounced render and the clear button in one place, keeping the four search boxes consistent.

Verification

  • node --check on app.js / data.js ✓
  • DOM-stub smoke test (25 assertions): debounce coalescing, <mark> highlight + clearing, × button show/hide/sync, empty-state reset paths for market & dept, operator email highlight ✓
  • cargo test ✓ · cargo fmt --check ✓

Rant (verbatim)

D. 搜索增强

  • 市场搜索输入防抖(~150ms,避免每次按键整表重绘闪烁)
  • 搜索结果中匹配关键词高亮(<mark> 样式,accent 背景),重置后清除
  • 搜索框加「清空 ×」小按钮(有内容时显示)

Docs

  • docs/user-stories.md v1.18 entry extended with item D (remaining E–G noted)
  • ui/README.md: new "搜索增强约定" section + page-list mentions updated

@argszero
argszero merged commit 4eca272 into main Aug 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant