一套 API，两端各得其所。 One API. Screen-aware.

Bivane 是一个React 组件库：基于 React + Tailwind CSS 实现，以 Vant 的设计语言为视觉源，以 shadcn copy-paste 形态分发进你的项目。

它的核心做法只有一句话——PC 和 H5 的交互，分开适配：

• 小屏（H5）走移动端交互：底部弹层、滚轮选择、手势滑动

• 大屏（PC）走桌面交互：锚定浮层、日历面板、键盘导航

• 两套交互在组件内部各自实现，开发者只写一份<Select options={...} />，需要锁死形态时才传forceMode

这里说的「自适应」不是把 PC 界面缩一缩塞进手机，而是同一个组件在两端各有一套符合该端习惯的交互，按视口自动切换。

同一份代码，两端自动各就各位

下面两张图是同一个 Bivane 验证台、同一份组件代码，只把浏览器窗口从 390px 拉到 1200px——注意顶部那个标识会从「H5 交互」切到「PC 交互」，同一个<Select>会从底部弹层列表变成桌面控件：

手机视图（390px）：同一个<Select>自动打开为底部弹层列表（北京 / 上海 / 广州 / 深圳 …）。

桌面视图（1200px）：同一份代码渲染为桌面控件，顶部标识切到「PC 交互」。

你写的就是<Select options={...} />，不用判断屏幕、不用写任何「如果是手机就怎样」的逻辑。

三个专业维度，读懂 Bivane 的设计取舍

设计系统 · token 驱动视觉全部来自语义 token（--bv-*），组件零硬编码。换肤、深色主题只换一个 CSS 文件，组件一行不动。

交互设计 · PC/H5 分开适配关键在「分开」二字：当移动端滚轮和桌面端日历这类交互范式冲突时，组件两套都实现、按模式自动挑，而不是强行用一套响应式去将就两端。机制上遵循「能 A 不 B，能 B 不 C」：纯 CSS 差异（A）→ 同 primitive 换壳（B）→ 范式冲突才双实现（C）。同一份 props，小屏滚轮、大屏月历各就各位。

前端工程 · 九道质量防线前四道常规（类型/规范/单测/构建），后五道来自真实事故且独立于单测——因为类型系统和 jsdom 不做 CSS 级联，遮罩透明、视觉无差异这类问题只有真浏览器才验得出。consumer:check在空白项目真跑安装+编译，保证离开仓库依然可用。

适合谁

维护既要 H5 又要 PC 的业务、用 React + Tailwind、想要 Vant 验证过的移动端审美、又喜欢「代码进我项目」掌控感的人。

链接与资源

• 在线演示 / 文档站：Bivane 碧帆 · 一套 API，两端各得其所

• 组件注册表（registry）：https://zciyi.github.io/bivane/r/{name}.json

• GitHub 源码：https://github.com/zciyi/bivane
• gitee源码：https://gitee.com/z_ciyi/bivane

• 用法文档（组件可复制用法、prop 说明、两端差异）：Bivane 碧帆 · 一套 API，两端各得其所

• 单文件 Demo（仓库根bivane-demo.html，npm run demo:single生成，双击即开）

测试覆盖范围有限，使用中遇到问题欢迎提 issue