搜索页需语义分离入口与出口，采用form+ul结构并用aria-live等属性保障无障碍；双栏指功能分区而非视觉分栏；结果项应整行可点击；空/加载态须用真实DOM占位。
搜索框与结果列表必须语义分离
搜索页不是“一个输入框+一堆div”，而是两个明确角色：触发入口（form或带role="search"的容器）和结果出口（ul#result-list）。混在一起会导致键盘导航跳过结果、屏幕阅读器无法 announce 新内容、JS 重绘时焦点丢失。
常见错误是把 input 和 ul 套进同一个 div class="search-container" 后，再用 CSS 强行并排——这会让语义断裂。正确结构应为：
aria-live="polite" 是关键：结果动态插入时，屏幕阅读器会读出新增项；aria-busy 可在加载中设为 true，暂停播报。
双栏搜索页 ≠ 左右并列两个 div
所谓“双栏搜索页”，实际指「搜索操作区 + 结果展示区」在桌面端横向并置、移动端纵向堆叠。这不是视觉分栏，而是功能分区。强行用 grid-template-columns: 20% 80% 去套整个页面，会把搜索框压窄、让结果列表失去流式高度，反而破坏可用性。
推荐布局方式：
- 外层用
display: grid，定义两行三列：顶部搜索栏跨满第一行，结果列表在第二行左侧占主宽，右侧留空或放筛选面板（如需） - 结果列表本身仍保持垂直
ul流式结构，不拆成左右两列——搜索结果天然是线性序列，不是网格卡片 - 如果真要“双栏结果”（比如每行显示两条摘要），用
ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }，但仅限于#result-list内部，不影响整体结构语义
结果项点击区域必须包裹整条 li，不能只包 a
用户习惯点整条结果行，而不是只点标题文字。若写成：
苹果
一种常见水果...
会导致 tab 键聚焦两次才能跳到下一项，且鼠标悬停样式难统一。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
正确做法是把 a 提升为块级容器：
苹果
一种常见水果...
同时加 CSS：a { display: block; padding: 12px 16px; }。这样既满足语义（一条结果 = 一个可跳转目标），又避免 JS 绑定 click 的冗余逻辑。
空状态、加载态、无结果必须用真实 DOM 占位
别等 JS 渲染完才插入
- 正在搜索...
- 没找到相关结果
JS 加载时只需：document.querySelector('.loading').hidden = false，完成后 .hidden = true 并插入真实 li。这样 SSR 友好、SEO 可见、无障碍设备能提前感知结构。
容易被忽略的是：移动端切换单栏时，ul 的 grid 布局可能让 .loading 和 .empty 被挤到右侧——必须确保它们也参与 grid flow，或改用 flex-direction: column 控制主轴，而非依赖列数硬编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
