@zhangxf01/xf-ui

基于 React 19 + shadcn/ui 的企业级组件库，用于解决现有项目中组件代码重复不统一的问题。

特性

• 🚀 基于 React 19 构建
• 🎨 使用 Tailwind CSS 4.0 样式系统
• 📦 支持按需引入
• 🔧 TypeScript 原生支持
• 📚 基于 shadcn/ui 组件封装

安装

# npm
npm install @zhangxf01/xf-ui

# pnpm
pnpm add @zhangxf01/xf-ui

# yarn
yarn add @zhangxf01/xf-ui

对等依赖

本组件库需要以下对等依赖：

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

使用方式

1. 引入样式

在入口文件（如 main.tsx 或 App.tsx）中引入样式：

import '@zhangxf01/xf-ui/style.css';

2. 按需引入组件

import { Button, DatePicker, SearchSelect, PaginationTable } from '@zhangxf01/xf-ui';

function App() {
  return (
    <div>
      <Button variant="default">点击按钮</Button>
      <DatePicker value="2024-01-01" onChange={(val) => console.log(val)} />
    </div>
  );
}

3. 引入工具函数

import { cn } from '@zhangxf01/xf-ui';

// 用于合并 Tailwind CSS 类名
const className = cn('base-class', condition && 'conditional-class');

组件列表

数据展示 (Data Display)

| 组件 | 说明 | |------|------| | Cascader | 级联选择器 | | XFEmpty | 空状态（业务封装版） | | SearchSelect | 搜索选择器 | | PaginationTable | 分页表格 |

数据录入 (Data Entry)

| 组件 | 说明 | |------|------| | DatePicker | 日期选择器 | | Form | 表单 |

反馈 (Feedback)

| 组件 | 说明 | |------|------| | Spin | 加载状态 |

导航 (Navigation)

| 组件 | 说明 | |------|------| | Pagination | 分页 |

布局 (Layout)

| 组件 | 说明 | |------|------| | Grid | 栅格 |

其他 (Other)

| 组件 | 说明 | |------|------| | Affix | 固钉 |

开发指南

安装依赖

cd sjkj-ui
pnpm install

开发模式

pnpm dev
# 监听文件变化，自动重新构建

构建

pnpm build

代码检查

pnpm lint
pnpm format

发布流程

1. 登录 npm

npm login

2. 更新版本号

# 更新补丁版本
npm version patch

# 更新次版本
npm version minor

# 更新主版本
npm version major

3. 发布

npm publish --access public

注意：发布前会自动执行 prepublishOnly 脚本进行构建。

项目结构

sjkj-ui/
├── src/
│   ├── components/
│   │   ├── ui/              # 基础 UI 组件
│   │   ├── dataDisplay/     # 数据展示组件
│   │   ├── dataEntry/       # 数据录入组件
│   │   ├── feedback/        # 反馈组件
│   │   ├── navigation/      # 导航组件
│   │   ├── layout/          # 布局组件
│   │   └── other/           # 其他组件
│   ├── lib/
│   │   └── utils.ts         # 工具函数
│   ├── index.css            # 样式入口
│   └── index.ts             # 导出入口
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

技术栈

• React 19 - UI 框架
• TypeScript - 类型系统
• Vite - 构建工具
• Tailwind CSS 4 - 样式方案
• shadcn/ui - 基础组件
• dayjs - 日期处理
• lucide-react - 图标库
• zod - 数据验证
• zustand - 状态管理

License

MIT