@qingtian/design

基于 React 18 + Antd 5 + TypeScript 5 的现代化组件库。

✨ 特性

• 🚀 现代化技术栈: 基于 React 18、Antd 5、TypeScript 5
• 🎨 美观设计: 采用 Ant Design 设计语言，提供优秀的用户体验
• 🔧 高度可定制: 支持主题定制和样式覆盖
• 📱 响应式设计: 完美适配各种屏幕尺寸
• 🛠️ TypeScript 支持: 完整的类型定义
• 📊 图表支持: 集成 ECharts 和 Ant Design Charts
• 🎬 视频背景: 支持视频背景组件
• 📝 代码高亮: 集成代码高亮功能

📦 安装

npm install @qingtian/design
# 或
yarn add @qingtian/design
# 或
pnpm add @qingtian/design

🚀 快速开始

import React from 'react';
import { QTModal } from '@qingtian/design';

function App() {
  const [visible, setVisible] = React.useState(false);

  return (
    <div>
      <button onClick={() => setVisible(true)}>打开模态框</button>
      <QTModal visible={visible} onCancel={() => setVisible(false)}>
        这是模态框内容
      </QTModal>
    </div>
  );
}

🛠️ 开发

环境要求

• Node.js >= 12
• npm >= 6 或 yarn >= 1.22

安装依赖

npm install

构建

# 构建所有格式
npm run build

# 清理构建产物
npm run clean

代码检查

# 运行 lint
npm run lint

# 自动修复
npm run lint:fix

# F2E Lint 扫描
npm run f2elint-scan

# F2E Lint 修复
npm run f2elint-fix

🔧 技术栈

• React 18: 前端框架
• Ant Design 5: UI 组件库
• TypeScript 5: 类型系统
• ECharts: 图表库
• Ant Design Charts: 图表组件
• Ant Design Pro Components: 高级组件
• ahooks: React Hooks 库
• unstated-next: 状态管理
• dayjs: 日期处理
• lodash: 工具函数库

本项目基于 ISC 许可证开源。

🔗 相关链接

• Ant Design
• React
• TypeScript
• ECharts