# LTD-UI-PRO

**Repository Path**: ltd_1/ltd-ui-pro

## Basic Information

- **Project Name**: LTD-UI-PRO
- **Description**: LTD-UI-PRO 是一个专注于高性能前端组件库的开源项目，提供丰富的 UI 组件和工具，助力开发者快速构建现代化 Web 应用。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-16
- **Last Updated**: 2026-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LTD-UI-PRO

基于 Vue 3 + TypeScript 的高性能 UI 组件库，提供丰富的组件和工具，助力开发者快速构建现代化 Web 应用。

## 特性

- **Vue 3 Composition API** — 使用 `<script setup>` 语法，充分利用 Vue 3 最新特性
- **TypeScript** — 完整的类型定义，提供优秀的 IDE 支持和类型安全
- **按需导入** — 支持按需加载，减少打包体积
- **主题定制** — 基于 Less 的样式系统，支持 CSS 变量动态主题切换
- **完整文档** — 提供详细的使用文档和交互式组件示例
- **单元测试** — 完善的测试覆盖，确保组件稳定性和可靠性

## 组件列表

### 基础组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Button 按钮 | 触发操作的按钮组件 | [查看文档](docs/components/button.md) |
| Icon 图标 | 图标展示组件 | [查看文档](docs/components/icon.md) |
| Typography 排版 | 文本排版组件 | [查看文档](docs/components/typography.md) |
| Layout 布局 | 栅格布局系统 | [查看文档](docs/components/layout.md) |

### 表单组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Input 输入框 | 文本输入组件 | [查看文档](docs/components/input.md) |
| Select 选择器 | 下拉选择组件 | [查看文档](docs/components/select.md) |
| Checkbox 复选框 | 多选组件 | [查看文档](docs/components/checkbox.md) |
| Radio 单选框 | 单选组件 | [查看文档](docs/components/radio.md) |
| Switch 开关 | 开关切换组件 | [查看文档](docs/components/switch.md) |
| Form 表单 | 表单容器与验证 | [查看文档](docs/components/form.md) |

### 数据展示组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Table 表格 | 数据表格，支持排序筛选 | [查看文档](docs/components/table.md) |
| List 列表 | 列表展示，支持虚拟滚动 | [查看文档](docs/components/list.md) |
| Card 卡片 | 内容容器组件 | [查看文档](docs/components/card.md) |
| Tag 标签 | 标记和分类标签 | [查看文档](docs/components/tag.md) |
| Badge 徽标 | 数字或状态标记 | [查看文档](docs/components/badge.md) |
| Steps 步骤条 | 步骤流程展示 | [查看文档](docs/components/steps.md) |
| Timeline 时间线 | 时间线展示 | [查看文档](docs/components/timeline.md) |
| Divider 分割线 | 内容分割 | [查看文档](docs/components/divider.md) |

### 反馈组件

| 组件 | 描述 | 文档 |
| --- | --- | --- |
| Modal 对话框 | 模态对话框 | [查看文档](docs/components/modal.md) |
| Message 消息提示 | 轻量级消息提示 | [查看文档](docs/components/message.md) |
| Notification 通知 | 通知提醒 | [查看文档](docs/components/notification.md) |
| Drawer 抽屉 | 抽屉式弹出层 | [查看文档](docs/components/drawer.md) |
| Loading 加载 | 加载状态指示器 | [查看文档](docs/components/loading.md) |

### 导航组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Menu 菜单 | 多级导航菜单 | [查看文档](docs/components/menu.md) |
| Tabs 标签页 | 选项卡切换 | [查看文档](docs/components/tabs.md) |
| Breadcrumb 面包屑 | 面包屑导航 | [查看文档](docs/components/breadcrumb.md) |
| Pagination 分页 | 分页器 | [查看文档](docs/components/pagination.md) |
| Dropdown 下拉菜单 | 下拉操作菜单 | [查看文档](docs/components/dropdown.md) |

### 弹出与辅助组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Tooltip 文字提示 | 文字提示气泡 | [查看文档](docs/components/tooltip.md) |
| Popover 气泡卡片 | 弹出气泡卡片 | [查看文档](docs/components/popover.md) |
| Popconfirm 气泡确认框 | 气泡确认框 | [查看文档](docs/components/popconfirm.md) |
| BackTop 回到顶部 | 回到顶部按钮 | [查看文档](docs/components/back-top.md) |
| Affix 固钉 | 固钉组件 | [查看文档](docs/components/affix.md) |
| Result 结果页 | 操作结果反馈页 | [查看文档](docs/components/result.md) |

### 内容组件

| 组件 | 描述 | 文档 |
|------|------|------|
| Calendar 日历 | 日期选择日历 | [查看文档](docs/components/calendar.md) |
| Image 图片 | 图片展示与预览 | [查看文档](docs/components/image.md) |
| Watermark 水印 | 页面水印覆盖 | [查看文档](docs/components/watermark.md) |

## 快速开始

### 安装

```bash
# 使用 pnpm（推荐）
pnpm add ltd-ui-pro

# 使用 npm
npm install ltd-ui-pro
```

### 完整导入

```typescript
import { createApp } from 'vue';
import LTDUIPro from 'ltd-ui-pro';
import 'ltd-ui-pro/dist/index.css';
import App from './App.vue';

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

### 按需导入

```vue
<template>
  <LButton type="primary">按钮</LButton>
</template>

<script setup>
import { LButton } from 'ltd-ui-pro';
</script>
```

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

# 启动文档站点
pnpm docs:dev
```

## 项目结构

```text
ltd-ui-pro/
├── src/
│   ├── components/       # 组件源码
│   │   ├── button/       # Button 按钮
│   │   ├── icon/         # Icon 图标
│   │   ├── typography/   # Typography 排版
│   │   ├── layout/       # Layout 布局
│   │   ├── input/        # Input 输入框
│   │   ├── select/       # Select 选择器
│   │   ├── checkbox/     # Checkbox 复选框
│   │   ├── radio/        # Radio 单选框
│   │   ├── switch/       # Switch 开关
│   │   ├── form/         # Form 表单
│   │   ├── table/        # Table 表格
│   │   ├── list/         # List 列表
│   │   ├── card/         # Card 卡片
│   │   ├── tag/          # Tag 标签
│   │   ├── badge/        # Badge 徽标
│   │   ├── steps/        # Steps 步骤条
│   │   ├── timeline/     # Timeline 时间线
│   │   ├── divider/      # Divider 分割线
│   │   ├── modal/        # Modal 对话框
│   │   ├── message/      # Message 消息提示
│   │   ├── notification/ # Notification 通知
│   │   ├── drawer/       # Drawer 抽屉
│   │   ├── loading/      # Loading 加载
│   │   ├── menu/         # Menu 菜单
│   │   ├── tabs/         # Tabs 标签页
│   │   ├── breadcrumb/   # Breadcrumb 面包屑
│   │   ├── pagination/   # Pagination 分页
│   │   ├── dropdown/     # Dropdown 下拉菜单
│   │   ├── tooltip/      # Tooltip 文字提示
│   │   ├── popover/      # Popover 气泡卡片
│   │   ├── popconfirm/   # Popconfirm 气泡确认框
│   │   ├── back-top/     # BackTop 回到顶部
│   │   ├── affix/        # Affix 固钉
│   │   ├── result/       # Result 结果页
│   │   ├── calendar/     # Calendar 日历
│   │   ├── image/        # Image 图片
│   │   └── watermark/    # Watermark 水印
│   ├── styles/           # 全局样式与主题变量
│   ├── utils/            # 工具函数
│   └── index.ts          # 组件库入口
├── docs/                 # VitePress 文档站点
├── dev/                  # 开发预览页面
└── package.json
```

## 测试状态

```text
✅ 37 个测试文件
✅ 650+ 个测试用例通过
```

## 贡献

欢迎贡献代码！请查看 [贡献指南](CONTRIBUTING.md)。

## 许可证

[MIT License](LICENSE)