React Component Library

一个基于 React + Vite + Ant Design + LESS 的现代化组件库。

特性

• 🚀 基于 Vite 构建，开发体验极佳
• 💎 使用 Ant Design 作为基础 UI 组件库
• 🎨 支持 LESS 预处理器，样式定制灵活
• 📦 完善的 TypeScript 支持
• 🔧 可发布到 NPM 的完整配置
• 📱 响应式设计，适配多种设备

快速开始

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 代码检查
npm run lint

安装使用

npm i yh-ui-core

使用示例

import { CustomButton, DataCard, SearchForm } from "yh-ui-core";
import "yh-ui-core/dist/style.css";

function App() {
  return (
    <div>
      <CustomButton variant="primary" withIcon>
        点击我
      </CustomButton>

      <DataCard
        title="总销售额"
        value={125679}
        prefix="¥"
        trend="up"
        trendValue={12.5}
        progress={75}
      />

      <SearchForm
        onSearch={(values) => console.log(values)}
        onReset={() => console.log("reset")}
      />
    </div>
  );
}

组件

CustomButton

自定义按钮组件，支持多种样式变体和图标。

Props:

• variant: 按钮样式 ('primary' | 'secondary' | 'gradient')
• withIcon: 是否显示图标
• loading: 加载状态
• 继承 Ant Design Button 的所有属性

DataCard

数据展示卡片组件，支持趋势和进度条。

Props:

• title: 卡片标题
• value: 数据值
• suffix: 后缀
• prefix: 前缀
• trend: 趋势方向 ('up' | 'down' | 'neutral')
• trendValue: 趋势值
• progress: 进度百分比

SearchForm

搜索表单组件，支持多种表单控件类型。

Props:

• onSearch: 搜索回调函数
• onReset: 重置回调函数
• loading: 搜索加载状态
• fields: 表单字段配置

发布到 NPM

1. 更新 package.json 中的包名、版本号等信息
2. 构建组件库：npm run build:lib
3. 发布到 NPM：npm publish

许可证

MIT