@aishu/dip-ui

一个基于 React + Ant Design 的 UI 组件库。

📦 安装

# 安装组件库
npm install @aishu/dip-ui

# 安装必需的 peerDependencies
npm install react react-dom antd @ant-design/icons

⚠️ 依赖要求

本组件库需要以下 peerDependencies：

• react >= 18.0.0
• react-dom >= 18.0.0
• antd >= 6.0.0
• @ant-design/icons >= 6.1.0

注意：这些依赖需要由使用方自行安装，组件库不会自动安装它们。

🚀 快速开始

import { DipHeader } from '@aishu/dip-ui'
import type { BreadcrumbItem } from '@aishu/dip-ui'

const breadcrumbItems: BreadcrumbItem[] = [
  {
    key: 'home',
    icon: '/icon.png',
    name: '首页',
    path: '/',
  },
]

function App() {
  return <DipHeader username="admin" breadcrumbItems={breadcrumbItems} />
}

🎨 Tailwind CSS 配置

本组件库使用 Tailwind CSS，使用方需要配置 Tailwind。

重要：在 tailwind.config.js 的 content 中必须包含组件库路径：

// tailwind.config.js
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@aishu/dip-ui/dist/**/*.js', // 重要：包含组件库路径
  ],
}

说明：

• 组件库使用 Tailwind 的任意值语法（如 px-[13px]、h-[52px]）
• 不需要额外的自定义配置
• 只需要确保 content 路径包含组件库即可

详细说明请查看 Tailwind CSS 配置指南。

📚 文档

• 组件库架构说明
• 快速开始指南
• 依赖管理策略
• 库模式构建说明
• Tailwind CSS 配置指南
• npm 发布指南

🔧 开发

# 开发模式
yarn dev

# 构建
yarn build

# 预览构建结果
yarn preview

📝 License

MIT