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