Ptengine UI V2

Ptengine UI V2 是一个基于 Vue 3 的现代化UI组件库，为Ptengine产品线提供统一的设计语言和高质量组件。

✨ 特性

• 🔥 基于 Vue 3 + TypeScript 开发
• 📦 开箱即用的高质量组件
• 🎨 可定制的主题系统
• 💪 完善的类型定义
• 🌍 国际化支持

📦 安装

pnpm install @ptengine/ptengine-ui-v2

🔨 快速开始

import { createApp } from 'vue';
import PtengineUIV2 from '@ptengine/ptengine-ui-v2';
import '@ptengine/ptengine-ui-v2/dist/styles/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(PtengineUIV2);
app.mount('#app');

🎯 按需引入

import { Button, Select } from '@ptengine/ptengine-ui-v2';
import '@ptengine/ptengine-ui-v2/dist/styles/button.css';
import '@ptengine/ptengine-ui-v2/dist/styles/select.css';

📚 组件列表

通用组件

• Button 按钮
  • 支持多种类型：主要、次要、文本、链接
  • 支持不同尺寸
  • 支持禁用状态
  • 支持图标按钮
• Icon 图标
  • 丰富的图标集合
  • 支持自定义颜色和大小
• Loading 加载
  • 支持全屏加载
  • 可自定义加载图标
  • 支持加载文本提示

布局组件

• Banner 横幅
  • 支持多种类型的通知展示
  • 可关闭和自动关闭
• Scrollbar 滚动条
  • 自定义滚动条样式
  • 支持横向和纵向滚动

表单组件

• Input 输入框
  • 支持文本和密码输入
  • 支持清除功能
  • 支持前缀和后缀图标
• Select 选择器
  • 单选和多选模式
  • 支持选项分组
  • 支持搜索过滤
  • 支持自定义选项模板
• Checkbox 复选框
  • 支持单独使用和组合使用
  • 支持禁用状态
  • 支持中间状态
• Radio 单选框
  • 支持按钮样式
  • 支持禁用状态
• Switch 开关
  • 支持自定义开关文本
  • 支持禁用状态
• DatePicker 日期选择器
  • 支持日期/时间范围选择
  • 支持多种日期格式
  • 支持禁用日期

数据展示

• Table 表格
  • 支持固定表头和列
  • 支持排序和筛选
  • 支持自定义单元格内容
• Tag 标签
  • 支持多种类型和颜色
  • 可关闭
  • 支持自定义样式
• Tooltip 文字提示
  • 支持多个方向
  • 支持自定义内容
  • 支持主题定制
• Empty 空状态
  • 支持自定义图片
  • 支持自定义描述文本
• Skeleton 骨架屏
  • 支持多种占位类型
  • 支持自定义样式
  • 支持动画效果

反馈组件

• Alert 警告
  • 支持多种类型：成功、警告、错误、信息
  • 支持关闭按钮
  • 支持自定义图标
• Modal 对话框
  • 支持自定义头部和底部
  • 支持确认对话框
  • 支持自定义宽度
• Message 消息提示
  • 支持多种类型
  • 支持自动关闭
  • 支持自定义时长

导航组件

• Tabs 标签页
  • 支持多种样式
  • 支持自定义标签内容
  • 支持新增和删除标签
• Pagination 分页
  • 支持多种分页布局
  • 支持快速跳转
  • 支持自定义每页显示条数

其他

• Virtualized 虚拟滚动
  • 支持大数据列表渲染
  • 支持自定义项高度
  • 优化性能

🎨 主题定制

PTEngine UI V2 使用 CSS 变量实现主题定制，你可以轻松覆盖默认主题：

:root {
    --p-primary-color: #1890ff;
    --p-success-color: #52c41a;
    --p-warning-color: #faad14;
    --p-error-color: #f5222d;
}

🌍 国际化

import { locale } from '@ptengine/ptengine-ui-v2';
import enUS from '@ptengine/ptengine-ui-v2/locale/en-US';

locale(enUS);

💻 本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 运行单元测试
npm run test

🤝 贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的更改 (git commit -m 'feat: Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

📝 开源协议

MIT License