首页/新闻资讯/正文详情

Bivane:React 组件库,PC 和 H5 交互分开适配

发布时间:2026/11/3 10:37:07 来源:云帆数科 栏目:资讯中心
Bivane:React 组件库,PC 和 H5 交互分开适配
一套 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

相关推荐

本源之大美| 赵杰 | 量子哲学
本源之大美| 赵杰 | 量子哲学

作者:赵杰清华大学硕士、微美全息云科技(NASDAQ:WIMI)董事长、微算法科技(NASDAQ:MLGO)董事长、育杰奖学金创始人1. 《量子意识爱子论》本体根基宇宙最基础单元为爱子,同步承载意识、… · 2026/11/3 10:37:07

把决策模型从 API 里抢回来:33 毫秒定乾坤,这个 421M 的开源小模型正在重写 AI 成本账
把决策模型从 API 里抢回来:33 毫秒定乾坤,这个 421M 的开源小模型正在重写 AI 成本账

把决策模型从 API 里抢回来:33 毫秒定乾坤,这个 421M 的开源小模型正在重写 AI 成本账 先说一个很多公司每天都在上演的荒诞场景。 一封客户邮件进来,标题写着“三月被重复扣款,今天不退钱就退订”。系统其实只想知道三件事&#… · 2026/11/3 10:37:07

两条 OCR 路线正面撞:专用小模型和大模型解析,谁更适合你的业务
两条 OCR 路线正面撞:专用小模型和大模型解析,谁更适合你的业务

两条 OCR 路线正面撞:专用小模型和大模型解析,谁更适合你的业务 【免费下载链接】Unlimited-OCR-2 项目地址: https://ai.gitcode.com/hf_mirrors/baidu/Unlimited-OCR-2 前阵子有个做行政的朋友跟我吐槽:公司要归档十年的纸质合同&a… · 2026/11/3 10:37:07

美妆电商智能推荐系统:协同过滤算法实战
美妆电商智能推荐系统:协同过滤算法实战

1. 项目背景与核心价值美妆电商平台每天面临海量商品与用户行为的匹配难题。传统人工推荐效率低下,而基于协同过滤的智能推荐系统能有效解决这个问题。我在实际项目中验证过,这套算法能将用户点击率提升35%以上,转化率提升28%左右。这个系统最… · 2026/11/4 4:38:45

Elasticsearch中文分词优化:IK分词器扩展与实战
Elasticsearch中文分词优化:IK分词器扩展与实战

1. 为什么需要自定义Elasticsearch分词器在搜索引擎和文本处理场景中,分词器的选择直接影响搜索结果的准确性和相关性。Elasticsearch默认提供的标准分词器(Standard Analyzer)对中文支持有限,它只能简单地将中文文本按单个字符切… · 2026/11/4 4:38:45

WPS教育考试版隐藏功能:应用中心与稻壳高效使用指南
WPS教育考试版隐藏功能:应用中心与稻壳高效使用指南

不少老师和同学装了WPS教育考试版之后,就把它当成一个“能打字、能排版”的普通Office来用,打开文档、敲完字、保存关闭,一套动作行云流水,然后就没有然后了。我最初也是这么干的,直到有一次帮同事处理一份带复杂公式的… · 2026/11/4 4:38:45

Java 服务中决策模型选型实测:乱码场景下 Jev 与 Laya 准确率与置信度对比
Java 服务中决策模型选型实测:乱码场景下 Jev 与 Laya 准确率与置信度对比

最近在给工单自动分类系统做模型选型,测了一轮候选之后,最后把 Jev 和 Laya 两个决策模型留在台上做了个 PK。先说结论:Jev 在标准中文测试集上 100% 正确,连乱码输入都接近满分命中,而且置信度稳得不像话;… · 2026/11/4 4:38:45

无人机集群路径规划:杜鹃鲶鱼优化算法实战
无人机集群路径规划:杜鹃鲶鱼优化算法实战

1. 项目背景与核心价值在无人机集群协同作业场景中,路径规划算法直接决定了任务执行效率与安全性。传统方法常面临三维空间搜索效率低、多约束条件难以平衡、避障实时性不足等痛点。这个项目创新性地将杜鹃鲶鱼优化算法(Cuckoo Catfish Optimization, CC… · 2026/11/4 4:38:45

遗留系统接手难?用Zread从祖传代码生成可维护文档
遗留系统接手难?用Zread从祖传代码生成可维护文档

“祖传代码”这四个字,是从业者对遗留系统最客气的称呼。上周深夜有人发消息给我,说他接手了一个五年前的项目,仓库拉下来,README 六百字,三百字在讲怎么装环境,另外三百字介绍的是一个早就被删掉的模块。他… · 2026/11/4 4:37:45

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

AI辅助技术栈评估:提升研发决策效率60%
AI辅助技术栈评估:提升研发决策效率60%

1. 项目背景与核心价值技术决策一直是研发团队面临的重大挑战。随着技术生态的快速演进,技术栈的选择、维护和迭代变得愈发复杂。我们团队在过去两年里,先后经历了三次重大技术栈迁移,每次都需要投入大量人力进行技术评估和风险分析。直到去年… · 2026/11/4 0:00:17

从生成Token到直接决策:Jev如何重塑AI Agent工程实践
从生成Token到直接决策:Jev如何重塑AI Agent工程实践

1. 从"生成文字"到"拍板决策":Jev 到底在解决什么问题大多数人第一次接触大模型,脑子里建立的模型是"输入问题、输出文字"。你问它今天天气怎么样,它给你一段描述;你让它写个周报,它给你… · 2026/11/4 0:00:17

32G统一内存跑大模型:内存账、TPS实测与端云分流
32G统一内存跑大模型:内存账、TPS实测与端云分流

想在一台 32G 统一内存的小主机上把大模型跑成"日常可用",这件事我前后折腾了小半年。标题里说的这台 Mac mini M6,是我们这次讨论的目标平台,具体到手规格以实物为准;但下面这套推算方法和实测思路,对任何统… · 2026/11/4 0:00:17

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码