筛选作品
<button class="icen-btn" data-icen-popover-target="popover-demo-panel">筛选</button><div class="icen-popover" id="popover-demo-panel" role="dialog" aria-label="筛选条件" hidden> <div class="icen-popover-header"> <h3 class="icen-popover-title">筛选作品</h3> <button class="icen-popover-close" aria-label="关闭筛选"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button> </div> <div class="icen-popover-body"> <div class="icen-form-field"> <label class="icen-form-label" for="popover-demo-input">包含关键词</label> <input class="icen-form-input" id="popover-demo-input" data-icen-autofocus placeholder="例如：overlay" /> </div> </div> <div class="icen-popover-footer"> <button class="icen-btn icen-btn-sm icen-popover-close" type="button">取消</button> <button class="icen-btn icen-btn-sm icen-btn-primary" id="popover-demo-apply" type="button">应用</button> </div></div>特性
- 接入：触发器写
data-icen-popover-target指向面板 id，零 JS 接线 - 选侧：
computePopoverLayout按 prefer → 翻对侧 → 取大侧，避开视口边缘 - 关闭：外点 / Esc，焦点归还触发器；面板 portal 到 body，不受祖先裁切
- 动效：退场淡出可中断，快速重开从当前位置续接
- 程序面：
openPopover/closePopover同样可用
接口
- 初始化
initPopover()（kit 一行入口可直接命名导入）- 导出
-
openPopoverclosePopovercomputePopoverLayout - 类型
dist/behaviors/popover.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initPopover } from '@icen.ai/ui/kit/popover';initPopover();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add popover
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/popover.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initPopover, openPopover, closePopover } from '@icen.ai/ui/behaviors/popover';<button data-icen-popover-target="filter-panel">筛选</button><div class="icen-popover" id="filter-panel" role="dialog" aria-label="筛选" hidden> …面板内容；[data-icen-autofocus] 标记初始焦点…</div>const dispose = initPopover(); // 声明式委托；宿主卸载时 dispose()// 触发器可用 data-icen-side / data-icen-align 指定偏好侧与对齐// 程序面：openPopover(panel, { anchor, side: 'bottom', align: 'start' })