@idolverse/components

一个基于 Base Web 构建的现代化 React 组件库，提供完整的企业级应用解决方案。

特性

• 🎨 统一设计语言 - 基于 Base Web 的设计系统
• 🔧 开箱即用 - 提供完整的布局、主题、权限等功能
• 🌓 主题定制 - 支持多主题和深度定制
• 🚀 TypeScript - 完整的类型定义支持
• 📱 响应式 - 移动端适配和响应式设计
• 🔐 权限管理 - 内置权限系统和路由守卫
• 🌐 请求管理 - 统一的 HTTP 请求和错误处理

快速开始

安装

# 使用 pnpm (推荐)
pnpm add @idolverse/components

# 使用 npm
npm install @idolverse/components

# 安装对等依赖
pnpm add baseui styletron-engine-monolithic styletron-react

基础使用

import { withIdolverseProvider, Button } from '@idolverse/components';

const MyApp = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <Button>Click me</Button>
    </div>
  );
};

// 使用高阶组件包装应用
export default withIdolverseProvider(MyApp, {
  defaultOwner: {
    name: 'My App',
    logo: '/logo.png',
  },
});

文档和示例

启动 Storybook 查看完整的组件文档和示例：

pnpm run storybook

访问 http://localhost:6006 查看：

• 📖 快速开始指南
• 🎨 主题系统
• 🔧 开发约定
• ⚡ 事件处理
• 🚀 进阶指南

主要组件

基础组件

• Button - 按钮组件，支持多种样式和状态
• Avatar - 头像组件，支持图片、图标、文字
• Icon - 图标组件，集成 Iconfont 和 Lucide
• Logo - Logo 组件，支持多种尺寸和类型

布局组件

• Layout - 完整的页面布局，包含 Header、Sidebar、Footer
• Navigation - 导航组件

功能组件

• Dialog - 对话框组件
• ErrorTip - 错误提示组件
• Spiner - 加载指示器
• PermissionGuard - 权限守卫组件

开发工作流

# 代码检查和格式化
pnpm lint

# 构建组件库
./scripts/build.sh

# 发布到 npm
./scripts/publish.sh

# 启动开发环境
pnpm dev

技术栈

• React - UI 框架
• TypeScript - 类型系统
• Base Web - 基础组件库
• Styletron - CSS-in-JS 样式系统
• Storybook - 组件文档和开发环境
• Rollup - 模块打包工具

浏览器支持

• Chrome >= 88
• Firefox >= 85
• Safari >= 14
• Edge >= 88

许可证

MIT

贡献

欢迎提交 Issues 和 Pull Requests！

查看 贡献指南 了解更多信息。

更新日志

查看 CHANGELOG.md 了解版本更新信息。