bj-web-components

bu-max-ui

企业级 UI 组件库，支持 Web、移动端、小程序三端，基于 React + TypeScript 构建。

安装

npm install bu-max-ui
# 或
pnpm add bu-max-ui

快速上手

引入组件时需同步引入样式文件：

import { SkuInputCard } from 'bu-max-ui';
import 'bu-max-ui/style';

基础用法

import { useState } from 'react';
import { SkuInputCard } from 'bu-max-ui';
import 'bu-max-ui/style';

function App() {
  const [name, setName] = useState('');
  const [lang, setLang] = useState<'zh' | 'en'>('zh');

  return (
    <SkuInputCard
      mode="bilingual"
      name={name}
      onNameChange={setName}
      activeLang={lang}
      onLangChange={setLang}
      onDelete={() => setName('')}
    />
  );
}

按需引入

支持按平台路径单独引入，减少构建体积：

// Web 组件
import { SkuInputCard } from 'bu-max-ui/web';

// 移动端组件
import { ... } from 'bu-max-ui/mobile';

// 小程序组件
import { ... } from 'bu-max-ui/miniapp';

// 通用组件
import { ... } from 'bu-max-ui/shared';

组件列表

Web

组件	说明
SkuInputCard	商品规格名称输入卡片，支持单语 / 双语模式、拖拽排序、图片上传
Button	按钮
Input	输入框
Card	卡片
Select	选择器
Tooltip	气泡提示

Mobile

组件	说明
Button	移动端按钮
Input	移动端输入框
Card	移动端卡片
TabBar	底部导航栏
Navbar	顶部导航栏
ActionSheet	动作面板
Toast	轻提示

小程序

组件	说明
Button	小程序按钮
Input	小程序输入框
Card	小程序卡片
TabBar	底部导航栏
Navbar	顶部导航栏
ActionSheet	动作面板
Modal	弹窗
Loading	加载态
Toast	轻提示
Cell	单元格列表

SkuInputCard Props

参数	类型	默认值	说明
name	string	''	产品名称输入值
onNameChange	(value: string) => void	—	名称变更回调
mode	'single' | 'bilingual'	'single'	单语或双语模式
activeLang	'zh' | 'en'	'zh'	双语模式下当前语言
onLangChange	(lang: 'zh' | 'en') => void	—	语言切换回调
showBody	boolean	true	是否显示内容区域
error	boolean	false	错误状态
onDelete	() => void	—	点击删除按钮回调
onUpload	(file: File) => string | Promise<string>	—	自定义上传方法，返回图片 URL
images	string[]	—	外部托管的图片列表
id	string	—	拖拽把手 id，供 DnD 库使用
className	string	—	自定义类名
style	CSSProperties	—	自定义样式

本地开发

# 克隆仓库
git clone <repo-url>
cd bu-max-ui

# 安装依赖
pnpm install

# 启动文档站（端口 3000）
pnpm dev

# 构建组件库
pnpm build:lib

# 监听模式（开发库时使用）
pnpm build:lib:watch

项目结构

├── lib/              # 组件库源码（npm 包）
│   ├── index.ts
│   ├── web/          # Web 平台组件
│   ├── mobile/       # 移动端组件
│   ├── miniapp/      # 小程序组件
│   ├── react/        # React 通用组件
│   └── shared/       # 共享工具 / 组件
├── src/              # 文档站源码
│   ├── pages/        # 各组件演示页面
│   └── components/   # 文档站内部组件
└── dist/             # 构建产物（发布到 npm）

技术栈

• 框架: React 19 + TypeScript
• 构建: Vite 6（双模式：文档站 / 组件库）
• 样式: Less（BEM 命名规范）
• 文档站: React Router DOM 6 + Tailwind CSS v4

许可证

MIT