YaoThink Frontend Kit

一个基于 React + TypeScript + Vite 构建的前端组件库，提供高质量的 UI 组件和工具函数。

✨ 特性

• 🚀 现代化技术栈 - 基于 React 18 + TypeScript + Vite
• 📦 组件化设计 - 提供可复用的高质量 UI 组件
• 🎯 TypeScript 支持 - 完整的类型定义和智能提示
• 📱 响应式设计 - 适配各种屏幕尺寸
• 🎨 Ant Design 集成 - 基于 Ant Design 设计语言
• 🔧 开发友好 - 支持热重载和快速开发

📦 安装

# 使用 npm
npm install yaothink-frontend-kit

# 使用 yarn
yarn add yaothink-frontend-kit

# 使用 pnpm
pnpm add yaothink-frontend-kit

🚀 快速开始

基础使用

import React from "react";
import { YUpload } from "yaothink-frontend-kit";
import axios from "axios";

// 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
});

function App() {
  return (
    <YUpload
      axiosInstance={axiosInstance}
      listType="picture-card"
      onChange={({ file }) => {
        if (file.status === "done") {
          console.log("上传成功:", file.response);
        }
      }}
    >
      <div>点击上传</div>
    </YUpload>
  );
}

按需引入

// 只引入需要的组件
import { YUpload } from "yaothink-frontend-kit/components/Upload";

📚 组件列表

🔄 Upload 组件

功能强大的文件上传组件，支持分块上传、进度显示、取消上传等特性。

import { YUpload } from "yaothink-frontend-kit";

<YUpload
  axiosInstance={axiosInstance}
  listType="text"
  maxCount={5}
  accept="image/*"
>
  <button>选择文件</button>
</YUpload>;

查看 Upload 组件详细文档

🛠️ 开发指南

本地开发

# 克隆项目
git clone https://github.com/yaothink/frontend-kit.git
cd frontend-kit

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 类型检查
npm run type-check

项目结构

src/
├── components/          # 组件目录
│   └── Upload/         # Upload 组件
│       ├── YUpload.tsx # 主组件
│       ├── useUpload.ts # 自定义 Hook
│       ├── index.ts    # 导出文件
│       └── README.md   # 组件文档
├── utils/              # 工具函数
│   └── validate/       # 验证工具
└── index.ts           # 主入口文件

📦 构建输出

项目构建后生成以下目录结构：

dist/
├── es/         # ES 模块格式
├── lib/        # CommonJS 格式
└── types/      # TypeScript 类型定义

🔧 配置说明

package.json 关键字段

{
  "main": "./dist/lib/index.js", // CommonJS 入口
  "module": "./dist/es/index.js", // ES 模块入口
  "types": "./dist/types/index.d.ts", // 类型定义入口
  "files": ["dist"], // 发布到 npm 的文件
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/es/index.js",
      "require": "./dist/lib/index.js"
    },
    "./components/*": {
      "types": "./dist/types/components/*.d.ts",
      "import": "./dist/es/components/*.js",
      "require": "./dist/lib/components/*.js"
    }
  }
}

🤝 贡献指南

我们欢迎任何形式的贡献！请查看我们的贡献指南：

1. Fork 本项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情。

📞 联系我们

• 📧 邮箱: [email protected]
• 💬 问题反馈: GitHub Issues
• 📖 文档: GitHub Wiki

🙏 致谢

感谢以下开源项目：

• React - 用户界面库
• TypeScript - JavaScript 的超集
• Vite - 前端构建工具
• Ant Design - 企业级 UI 设计语言

⭐ 如果这个项目对您有帮助，请给我们一个星标！