一套 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两端各得其所组件注册表registryhttps://zciyi.github.io/bivane/r/{name}.jsonGitHub 源码https://github.com/zciyi/bivanegitee源码https://gitee.com/z_ciyi/bivane用法文档组件可复制用法、prop 说明、两端差异Bivane 碧帆 · 一套 API两端各得其所单文件 Demo仓库根bivane-demo.htmlnpm run demo:single生成双击即开测试覆盖范围有限使用中遇到问题欢迎提 issue
一套 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两端各得其所组件注册表registryhttps://zciyi.github.io/bivane/r/{name}.jsonGitHub 源码https://github.com/zciyi/bivanegitee源码https://gitee.com/z_ciyi/bivane用法文档组件可复制用法、prop 说明、两端差异Bivane 碧帆 · 一套 API两端各得其所单文件 Demo仓库根bivane-demo.htmlnpm run demo:single生成双击即开测试覆盖范围有限使用中遇到问题欢迎提 issue
