有ai的协助下，我用 React + TypeScript 撸了一个开箱即用的企业级组件库 😍😍😍

前端小小栈
4 阅读5分钟

在开始之前，首先贴上项目地址：

GitHub 地址：github.com/hezihua/Kag…

如果这个项目对你有帮助，欢迎 star ⭐️⭐️⭐️，如果你想进群学习或者参与开发，欢迎提 Issue 或 PR！

📖 简介

Kage UI 是一款现代化的 React 组件库，专为构建优雅、高效的企业级 Web 应用而生。它融合了 Ant Design 的实用性与 Material Design 的美学理念，通过统一的视觉规范、完整的 TypeScript 类型支持和灵活的主题定制，帮助开发者快速构建高质量的用户界面。

我们希望通过精心设计的组件和规范的代码组织，让前端开发从重复劳动中解放出来。无论是后台管理系统、SaaS 平台还是数据可视化大屏，Kage UI 都能提供一致的开发体验和可靠的工程质量。

✨ 核心特性

Kage UI 参考了主流组件库的设计思想，但在工程化和易用性上做了深度优化，让开发者用起来更舒心。

🎨 60+ 企业级组件：涵盖 Button、Form、Table、Modal、DatePicker、Upload 等常用场景，每个组件都经过精心设计和充分测试。

💎 完整 TypeScript 支持：100% TypeScript 编写，提供准确的类型提示和自动补全，让开发体验更流畅。

🎯 开箱即用：精心设计的默认样式和交互，无需过多配置即可直接使用，同时支持深度定制。

🌳 Tree Shaking 优化：基于 ES Module 构建，支持按需加载，打包体积最小化。

🧩 Monorepo 架构：基于 pnpm workspaces 管理，组件库和图标库独立维护，依赖关系清晰。

🛠️ 技术选型

Kage UI 采用现代化的前端工程实践，通过合理的工具链配置保证了开发效率和代码质量。

🎨 组件开发

React 18+ 基于 React 18 的 Hooks API 和并发特性开发，组件响应迅速，交互流畅。充分利用 React 的生态优势，兼容主流框架。

TypeScript 5.0 全程 TypeScript 类型约束，组件 Props 接口设计规范，提供完整的类型推导。编译期即可发现大部分类型错误，减少运行时异常。

Less CSS 预处理器 使用 Less 进行样式编写，支持变量、嵌套、混合等特性，便于主题定制和样式复用。每个组件独立的样式文件，避免全局污染。

🏗️ 工程化体系

Father 打包工具 使用 Umi 团队的 Father 进行打包，支持 ESM 和 CJS 两种格式输出，自动生成类型声明文件。零配置即可完成构建，同时保持高度可定制性。

Dumi 文档系统 集成 Dumi 作为文档生成工具，支持组件文档的编写、预览和构建。内置组件演示区、代码高亮和 API 自动生成，文档即代码，维护成本低。

pnpm Workspaces Monorepo 架构基于 pnpm workspaces，组件库和图标库在同一个仓库中管理，共享依赖配置，提升开发效率。

Changesets 版本管理 使用 Changesets 进行自动化版本管理和 CHANGELOG 生成，规范发版流程，支持多包的版本联动。

📦 组件生态

Kage UI 提供了丰富的组件，覆盖了企业级应用的大部分场景。

📝 数据录入

Input、InputNumber、AutoComplete、Select、Cascader、DatePicker、TimePicker、ColorPicker、Upload 等表单控件，支持完整的表单验证和联动逻辑。

📊 数据展示

Table、Card、List、Descriptions、Timeline、Statistic、Tree、Badge、Progress 等展示组件，支持复杂的数据场景和自定义渲染。

🎯 导航路由

Menu、Breadcrumb、Tabs、Anchor、Steps、Pagination 等导航组件，提供清晰的页面结构和导航路径。

💬 反馈组件

Modal、Message、Notification、Drawer、Popover、Tooltip、Popconfirm 等反馈组件，支持丰富的交互场景和自定义配置。

🎨 布局组件

Layout、Grid、Flex、Space、Divider、Splitter 等布局组件，轻松构建响应式页面结构。

🖼️ 其他组件

Avatar、Image、QRCode、Carousel、Masonry、Watermark、Skeleton、Spin、Empty、Result 等通用组件，满足各种特殊场景需求。

🚀 快速开始

环境要求

Node.js >= 16 pnpm >= 8

安装组件库

# npm
npm install wssf-kage-ui

# yarn
yarn add wssf-kage-ui

# pnpm
pnpm add wssf-kage-ui

安装图标库（可选）

# npm
npm install wssf-kage-icon

# yarn
yarn add wssf-kage-icon

# pnpm
pnpm add wssf-kage-icon

使用示例

import { Button, Form, Input, Table } from 'wssf-kage-ui';
import { Icon } from 'wssf-kage-icon';

function App() {
  return (
    <div>
      <Button type="primary" icon={<Icon name="home" />}>
        点击我
      </Button>
      {/* 更多组件 */}
    </div>
  );
}

本地开发

# 克隆仓库
git clone https://github.com/hezihua/Kage_UI.git
cd Kage_UI

# 安装依赖
pnpm install

# 启动文档开发服务器
pnpm dev

# 打开浏览器访问
http://localhost:8000

构建

# 构建所有包
pnpm build

# 单独构建组件库
pnpm build:ui

# 单独构建图标库
pnpm build:icon

🎙️ 未来计划

Kage UI 将持续优化组件质量和开发体验，同时扩展组件生态。

🏗️ 组件生态扩展

  • 新增更多高级组件：虚拟滚动列表、可编辑表格、富文本编辑器
  • 增强现有组件：Table 性能优化、Form 联动能力增强
  • 支持更多主题：预设多套企业级主题方案

📚 文档与工具完善

  • 完善组件最佳实践文档
  • 提供 Storybook 组件预览
  • 新增组件设计规范指南

🌍 国际化支持

  • 完整的国际化方案
  • 多语言组件文档
  • RTL 布局支持

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

在提交代码前，请确保：

运行 pnpm lint 通过代码检查
运行 pnpm format 格式化代码
遵循项目的代码规范和提交规范

Kage UI —— 让 React 开发更优雅 🎨

avatar
文章
阅读
粉丝