# purple-comp

**Repository Path**: npm_1/purple-comp

## Basic Information

- **Project Name**: purple-comp
- **Description**: 基于 element-plus 二开的组件库。
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-29
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Purple UI

Purple UI 是一个基于 Vue 3 和 Element Plus 的组件库，旨在提供一套简洁、易用、可扩展的 UI 组件，让开发像搭积木一样简单。

## 项目介绍

Purple UI 是一个组件库项目，使用 pnpm 工作空间管理多个包，包括：

- `packages/components`：组件库主体，提供了一系列基于 Element Plus 的扩展组件
- `packages/utils`：工具库，提供了一些常用的工具函数和类型定义
- `docs`：基于 VitePress 的文档站点，提供了组件的使用文档和示例

## 组件列表

Purple UI 目前提供以下组件：

- **PpOperate**：操作组件，用于统一管理操作按钮，支持 button、text、icon 三种形式
- **PpLogger**：日志组件，用于展示日志信息
- **PpDrawer**：抽屉组件，基于 Element Plus 的 Drawer 组件扩展
- **PpTheme**：主题组件，用于主题切换
- **PpWatermark**：水印组件，用于添加水印
- **PpTable**：表格组件，基于 Element Plus 的 Table 组件扩展
- **PpTableV2**：表格组件的 V2 版本，提供更多功能和优化

## 工具列表

Purple UI 提供以下工具：

- **Message**：消息提示工具，基于 Element Plus 的 Message 组件

## 开发环境要求

### Node.js 版本

项目要求 Node.js 版本 >= 22.0.0，推荐使用 Node.js 22。项目根目录包含 `.nvmrc` 文件，可以使用 nvm 自动切换到正确的 Node.js 版本：

```bash
nvm use
```

### 包管理工具

项目使用 pnpm 作为包管理工具，版本要求为 10.10.0 或以上：

```bash
# 安装 pnpm
npm install -g pnpm@10.10.0

# 检查 pnpm 版本
pnpm --version
```

## Monorepo 架构思路

Purple UI 采用 Monorepo（单体仓库）架构，使用 pnpm workspace 进行管理。这种架构有以下优势：

1. **代码共享与复用**：所有包都在同一个仓库中，便于代码共享和复用
2. **统一版本管理**：所有包的版本可以统一管理，避免版本不一致问题
3. **原子提交**：可以在一次提交中修改多个包，保证相关修改的一致性
4. **简化依赖管理**：使用 workspace 协议可以方便地引用项目内的其他包
5. **统一构建和测试**：可以统一构建和测试所有包，提高开发效率

项目结构设计遵循以下原则：

- **职责分离**：将不同功能的代码分离到不同的包中，如组件库、工具库、文档站点等
- **依赖清晰**：包之间的依赖关系清晰，避免循环依赖
- **版本独立**：每个包可以有自己的版本号，独立发布

## 安装使用

### 安装依赖

为整个项目安装依赖：

```bash
pnpm install
```

为特定子应用安装依赖：

```bash
# 为 docs 子应用安装依赖
pnpm install --filter docs

# 为 components 子应用安装依赖
pnpm install --filter purple-comp
```

### 子应用之间互相安装引用

在 Monorepo 架构中，子应用之间可以互相引用，使用 workspace 协议：

```bash
# 将 purple-comp 安装到 docs 中
pnpm add purple-comp -filter docs

# 将 purple-utils 安装到 components 中
pnpm add purple-utils -filter purple-comp
```

这种方式会在 package.json 中添加类似 `"purple-comp": "workspace:*"` 的依赖，表示使用工作空间中的包。

### 为特定子应用添加外部依赖

```bash
# 为 docs 添加 lodash 依赖
pnpm add lodash -filter docs

# 为所有子应用添加开发依赖
pnpm add typescript -D -w
```

### 启动文档站点

```bash
pnpm serve:docs
```

### 构建文档站点

```bash
pnpm build:docs
```

## 开发指南

### 代码规范

项目使用 ESLint 和 Prettier 进行代码规范检查和格式化：

```bash
# 代码规范检查
pnpm lint

# 代码格式化
pnpm format
```

### 提交规范

项目使用 commitlint 进行提交规范检查，提交信息需要符合 Conventional Commits 规范。

## 项目结构

```
purple-ui/
├── docs/                 # 文档站点
│   ├── components/       # 文档组件
│   ├── md/               # Markdown 文档
│   └── .vitepress/       # VitePress 配置
├── packages/             # 工作空间包
│   ├── components/       # 组件库
│   │   ├── src/          # 组件源码
│   │   └── styles/       # 组件样式
│   └── utils/            # 工具库
└── pnpm-workspace.yaml   # 工作空间配置
```

## 浏览器支持

- Chrome
- Firefox
- Safari
- Edge

## 许可证

ISC