open-index/open-npm huggingface dataset:
npm package: @idolverse/components
Description: A lightweight React component library
Latest version: 0.3.29

# @idolverse/components

一个基于 [Base Web](https://baseweb.design/) 构建的现代化 React 组件库，提供完整的企业级应用解决方案。

## 特性

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

## 快速开始

### 安装

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

# 使用 npm
npm install @idolverse/components

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

### 基础使用

```tsx
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 查看完整的组件文档和示例：

```bash
pnpm run storybook
```

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

- 📖 [快速开始指南](http://localhost:6006/?path=/story/quick-start--docs)
- 🎨 [主题系统](http://localhost:6006/?path=/story/theme--docs)
- 🔧 [开发约定](http://localhost:6006/?path=/story/convention--docs)
- ⚡ [事件处理](http://localhost:6006/?path=/story/events--docs)
- 🚀 [进阶指南](http://localhost:6006/?path=/story/advanced-guide--docs)

## 主要组件

### 基础组件

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

### 布局组件

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

### 功能组件

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

## 开发工作流

```bash
# 代码检查和格式化
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！

查看 [贡献指南](./CONTRIBUTING.md) 了解更多信息。

## 更新日志

查看 [CHANGELOG.md](./CHANGELOG.md) 了解版本更新信息。
npm package: @idolverse/forerunner
Description: ## 简介
Latest version: 0.5.10

# Forerunner

## 简介

Forerunner 是一个用于生成内容的 React 组件。


## 安装

```sh
pnpm add @idolverse/forerunner
```

```tsx
import { Forerunner } from '@idolverse/forerunner';


export const ButtonSample = () => {
  const [message, setMessage] = useState('Some Data Analysis Prompt Message');
  return (
    <>
      <textarea
        style={{ width: '600px', height: '600px' }}
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <hr />
      <Forerunner
        difyConfig={{
          baseUrl: 'http://your-dify-server-url',
          apiKey: 'your-api-key',
        }}
        onFinish={(message) => {
          console.log('end:', message);
        }}
        message={message}
        variants={{
          panelWidth: '80vw',
          panelHeight: '90vh',
        }}
      />
    </>
  );
};
```

## 示例

请查阅 `stories/Forerunner.stories.tsx` 文件。