更新记录

0.9.2（2026-08-02）下载此版本

为 bsx-accordion-item、bsx-collapse 与 bsx-collapse-group 增加展开 / 收起高度过渡、透明度和位移动画
组件演示页新增按组件名称和说明进行模糊搜索的功能，并支持与分类筛选叠加使用

平台兼容性

uni-app x(4.71)

Chrome	Chrome插件版本	Safari	Android	Android插件版本	iOS	鸿蒙	微信小程序
√	0.9.2	-	5.0	0.9.2	-	-	-

其他

多语言	暗黑模式	宽屏模式
√	√	×

bsx-ui

bsx-ui 是面向 uni-app x 的移动端优先的类Bootstrap的 UI 组件库，代码全部由AI实现。采用 uni_modules 插件规范组织，包含三部分能力：

bsx-* 工具类样式集
基于工具类构建的基础组件
轻量 API 入口与组件配套调用能力
内置 light / dark 两套主题模式
按 基础色板 -> 语义 token -> 组件 token 组织的色彩系统

目录结构

bsx-ui/
├── components/
│   ├── bsx-alert/
│   ├── bsx-avatar/
│   ├── bsx-badge/
│   ├── bsx-button/
│   ├── bsx-card/
│   ├── bsx-divider/
│   ├── bsx-form-item/
│   └── bsx-input/
├── index.scss
├── styles/
│   ├── base/
│   ├── internal/
│   ├── layout/
│   └── utilities/
├── theme/
│   ├── semantic.scss
│   └── tokens.scss
├── changelog.md
├── package.json
├── api/
│   ├── clipboard.uts
│   ├── feedback.uts
│   ├── registry.uts
│   └── theme.uts
└── readme.md

接入方式

1. 页面使用工具类

在宿主项目的 App.uvue 全局样式中引入：

@import "./uni_modules/bsx-ui/index.scss";

引入后，页面可以直接使用 bsx-* 工具类，例如：

<view class="bsx-d-flex bsx-flex-row bsx-items-center bsx-p-4 bsx-bg-white">
  <text class="bsx-text-base bsx-fw-semibold bsx-text-title">Hello bsx-ui</text>
</view>

3. 国际化

组件库内置 zh-CN 和 en-US 组件文案。宿主应用负责决定当前语言，并可只覆盖需要调整的 bsx.* key：

import { setBsxLocale, setBsxMessages } from './uni_modules/bsx-ui'

setBsxLocale('en-US')
setBsxMessages({
  'en-US': {
    'bsx.empty.title': 'Nothing here'
  }
})

组件显式传入的 title、text、placeholder 等文案优先于语言包。业务页面文案应由宿主自己的 t() 和语言资源管理，不要放入 bsx-ui。

2. 使用组件

组件符合 easycom 规范，无需手动注册：

<bsx-button text="确定" type="primary" theme="light" />
<bsx-card title="标题" body-text="正文内容" theme="dark" />
<bsx-form-item label="项目名称">
  <bsx-input placeholder="请输入内容"></bsx-input>
</bsx-form-item>

主题与定制

所有基础组件都提供 theme 属性，当前支持：

light
dark

示例：

<bsx-button text="保存" type="primary" theme="dark" />
<bsx-alert title="提示" description="暗色主题提示块" type="info" theme="dark" />

色彩系统

bsx-ui 的色彩系统采用三层结构：

基础色板：提供 gray / primary / success / warning / danger 以及 blue / cyan / green / lime / gold / orange / red / magenta / purple 等扩展色系，每个色系保留 10 档阶梯。
语义 token：负责把色板映射为页面背景、容器背景、标题文本、正文文本、弱化文本、边框、状态色、浅色填充等通用角色。
组件 token：负责把语义 token 绑定到具体组件槽位，例如 button primary bg、button secondary text。

当前已经将 Button、Input、Tag、Alert 接入组件 token，后续组件建议按同一模式演进。

命名约定

色板层：$bsx-{color}-{step}，例如 $bsx-primary-7
语义层：$bsx-color-{role}-{theme} 或 $bsx-{status}-soft
组件层：$bsx-{component}-{theme}-{variant}-{slot}

建议的品牌化开放层级

预置主题包：默认、暗色、高对比、品牌主题
品牌主色驱动：只改品牌主色，由系统生成状态阶梯和浅色填充
语义 token 覆盖：允许有设计能力的团队覆盖页面、文本、边框、状态色

不建议把全部组件 token 直接暴露给业务侧，否则组件升级和主题一致性会快速失控。

除内置主题外，组件还通过 externalClasses 暴露有限扩展点，可在页面中传入扩展 class 做品牌化定制：

<bsx-button
  text="品牌按钮"
  type="primary"
  content-class="brand-button-shell"
  text-class="brand-button-text"
/>

.brand-button-shell {
  background-color: #7a5af8 !important;
  border-color: #7a5af8 !important;
}

.brand-button-text {
  color: #ffffff !important;
}

API 入口

当前 index.uts 仅暴露与组件库本身强相关的轻量 API：

theme：主题模式查询
registry：组件与工具类导航元数据
feedback：轻量提示反馈
clipboard：示例代码与文本复制
overlay：为 modal、action-sheet、picker 预留的编程式控制结构

当前已导出的 API 包括：

getBsxThemeModes()
getBsxCurrentTheme()
isBsxDarkMode()
getBsxComponentItems()
getBsxComponentMeta(name)
getBsxUtilityItems()
showBsxToast(message)
showBsxSuccess(message)
showBsxError(message)
createBsxModalOverlayOptions()
openBsxModal(options)
closeBsxModal(options)
createBsxActionSheetOverlayOptions()
openBsxActionSheet(options)
closeBsxActionSheet(options)
createBsxPickerOverlayOptions()
openBsxPicker(options)
closeBsxPicker(options)
copyBsxText(content, successText?)
copyBsxSnippet(content)

这组 overlay API 当前只负责统一选项结构和开关控制，不直接创建全局弹层实例。这样可以先稳定对外接口，再按需要升级成真正的编程式挂载实现。

不建议在 bsx-ui 中继续整合完整的 uni 原子 API。请求、存储、路由、权限、设备环境这类基础能力，更适合拆到独立的 bsx-core。

当前实现概览

组件库当前覆盖以下移动端 UI 能力：

基础与排版：文本、标题、段落、链接、统计、卡片、分割线、头像、图标、图片、描述列表、水印与标签。
表单与选择：输入框、多行输入、搜索、开关、单选、多选、评分、滑条、步进器、选择器、日期/日历、级联、树选择、密码输入和数字键盘。
导航与内容组织：导航栏、标签页、底部导航、分段控制、菜单、宫格、列表、单元格、折叠面板、步骤条、时间轴、轮播和索引列表。
反馈与浮层：提示、加载、骨架、结果、空状态、进度、弹窗、抽屉、动作面板、浮动面板、气泡、提示气泡、二次确认、悬浮操作与回到顶部。
数据与媒体：轻量表格、刷新加载、分页、侧滑操作、图片选择上传与倒计时。

关键能力

bsx-form / bsx-form-item：支持基于 model 与 rules 的必填、最小长度、最大长度校验；组件实例可调用 validate()、resetFields()、clearValidate()。
bsx-table：面向移动端的静态数据表格，支持列宽、文本对齐、斑马纹和横向滚动；不包含排序、固定列或虚拟滚动。
bsx-tab-bar：支持图标、激活图标、角标、禁用态、固定底部和安全区；固定模式下由页面预留底部空间。
bsx-tree-select：首版为两级双栏选择，适合分类、权限和组织架构叶子节点选择；不递归展开三级及以上树。
bsx-watermark：支持数量与铺满区域；水印仅用于视觉标识，不能替代防截屏或数据安全措施。

已提供组件

bsx-text
bsx-heading
bsx-paragraph
bsx-link
bsx-stat
bsx-form
bsx-progress
bsx-result
bsx-countdown
bsx-count-to
bsx-segmented
bsx-carousel-shell
bsx-radio-group
bsx-checkbox-group
bsx-popup
bsx-floating
bsx-overlay-host
bsx-search-bar
bsx-picker
bsx-cell
bsx-cell-group
bsx-button
bsx-badge
bsx-back-top
bsx-card
bsx-alert
bsx-input
bsx-icon
bsx-image-uploader
bsx-form-item
bsx-grid
bsx-divider
bsx-date-picker
bsx-avatar
bsx-switch
bsx-swipe-action
bsx-checkbox
bsx-radio
bsx-rate
bsx-textarea
bsx-timeline
bsx-table
bsx-select
bsx-dropdown
bsx-modal
bsx-toast
bsx-action-sheet
bsx-popover
bsx-tooltip
bsx-drawer
bsx-tabs
bsx-tab-bar
bsx-nav-bar
bsx-pagination
bsx-stepper
bsx-slider
bsx-steps
bsx-notice-bar
bsx-loading
bsx-load-more
bsx-skeleton
bsx-empty
bsx-tag
bsx-collapse
bsx-accordion-item
bsx-collapse-group
bsx-list
bsx-list-item
bsx-menu
bsx-refresh
bsx-password-input
bsx-index-list
bsx-cascader
bsx-tree-select
bsx-calendar
bsx-popconfirm
bsx-number-keyboard
bsx-fab
bsx-descriptions
bsx-watermark

工具类分层

base：基础显示与页面壳层类
layout：flex、尺寸、定位类
utilities：spacing、typography、color、background、border、radius、shadow
theme：SCSS token 与语义色映射

样式约束

仅使用 class 选择器
所有 display: flex 都显式声明 flex-direction
文本样式必须直接写在 <text> 节点上
优先使用 px，仅在确有需要时使用其他单位

样式隔离 2.0

组件默认按 styleIsolation: 'isolated' 设计：

页面可以使用全局 bsx-* 工具类
组件内部不会直接引用页面级 class
组件通过 externalClasses 暴露有限样式扩展入口

这意味着：

页面布局与演示可以依赖全局工具类
组件内部仍然复用同一套工具类文件，但在组件私有样式上下文内生效

开发约定

组件使用 .uvue 文件和 <script setup lang="uts">
UTS 数据结构优先使用 type
组件目录使用 components/组件名/组件名.uvue
新增组件时统一使用 bsx- 前缀
发布前同步更新 package.json 和 changelog.md

平台兼容性

当前 package.json 平台状态仍使用待验证标记。每个平台完成实际编译与交互测试后，再将对应平台更新为 √。

bsx-ui bsx bsx-ui UI组件库 uni-app-x easycom

更新记录

0.9.2（2026-08-02）下载此版本

平台兼容性

uni-app x(4.71)

其他

bsx-ui

目录结构

接入方式

1. 页面使用工具类

3. 国际化

2. 使用组件

主题与定制

色彩系统

命名约定

建议的品牌化开放层级

API 入口

当前实现概览

关键能力

已提供组件

工具类分层

样式约束

样式隔离 2.0

开发约定

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

bsx-tv-button TV应用按钮示例

bsx-scancode-input

bsx-voicechat-wx

bsx-keystore 安全的存储KEY-VAL

bsx-saveas-api

bsx-ui bsx bsx-ui UI组件库 uni-app-x easycom

更新记录

0.9.2（2026-08-02） 下载此版本

平台兼容性

uni-app x(4.71)

其他

bsx-ui

目录结构

接入方式

1. 页面使用工具类

3. 国际化

2. 使用组件

主题与定制

色彩系统

命名约定

建议的品牌化开放层级

API 入口

当前实现概览

关键能力

已提供组件

工具类分层

样式约束

样式隔离 2.0

开发约定

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

bsx-tv-button TV应用按钮示例

bsx-scancode-input

bsx-voicechat-wx

bsx-keystore 安全的存储KEY-VAL

bsx-saveas-api

Modal title

0.9.2（2026-08-02）下载此版本