# 🎨 repoUI 组件样式库
> 一个**纯 CSS** 的现代化 Web UI 组件样式库，无需任何 JavaScript 依赖，即插即用。
**repoUI** 是一个轻量、美观、可主题化的前端组件样式库。它基于 **CSS 变量（设计令牌）** 构建，支持**浅色 / 深色主题**一键切换，内置完整的图标字体、布局系统与数十种常用 UI 组件。所有样式均为原生 CSS，无框架依赖，可直接引入任意 HTML 项目使用。
---
## ✨ 特性
| 特性 | 说明 |
|------|------|
| 🎨 **设计令牌** | 完整 CSS 变量体系（颜色/字体/间距/圆角/阴影/层级） |
| 🌗 **深浅主题** | 通过 `data-theme="dark"` 一键切换深色模式 |
| 🔠 **图标字体** | 内置数百个常见图标，覆盖开发/协作/代码管理等场景 |
| 📦 **纯 CSS 零依赖** | 无需 JavaScript 框架，直接引入即可用 |
| ♻️ **即插即用** | 单一 CSS 文件，`` 引入即生效 |
| 🧩 **组件丰富** | 内置 20+ 常用 UI 组件 |
---
## 🚀 快速开始
### 引入
```html
```
### 简单示例
```html
成功
警告
错误
```
### 深色主题
```html
```
---
## 🧩 组件清单
### 布局与导航
- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — 页面布局
- `.repo-row` / `.repo-col` — 栅格系统
- `.repo-container` / `.repo-container--fluid` — 容器
- `.repo-tabs` — 标签页
- `.repo-breadcrumb` — 面包屑导航
### 基础组件
- `.repo-btn`（+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`）— 按钮
- `.repo-input` / `.repo-textarea` / `.repo-input-group` — 输入框
- `.repo-select` — 选择器（下拉）
- `.repo-checkbox` / `.repo-radio` — 复选框 / 单选框
### 数据展示
- `.repo-tag`（+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`）— 标签
- `.repo-badge`（+ `--primary` `--success` `--danger` `--warning` `--dot`）— 徽章
- `.repo-avatar`（+ `--xs` `--sm` `--md` `--lg` `--xl`）— 头像
- `.repo-card` — 卡片
- `.repo-table`（+ `--border`）— 表格
- `.repo-pagination` — 分页
- `.repo-file-tree` — 文件树
- `.repo-diff` — 代码差异对比
### 反馈与浮层
- `.repo-tooltip`（+ `--top` `--bottom` `--left` `--right`）— 提示框
- `.repo-modal`（+ `--open`）— 模态框
- `.repo-drawer`（+ `--left`）— 抽屉
- `.repo-message`（+ `--success` `--error` `--warning` `--info`）— 消息通知
- `.repo-dropdown`（+ `--open`）— 下拉菜单
### 加载与状态
- `.repo-spinner`（+ `--sm` `--lg`）— 加载动画
- `.repo-skeleton`（+ `--text` `--circle` `--button`）— 骨架屏
- `.repo-progress` — 进度条
### 代码相关
- `.repo-code-block` — 代码块（含复制按钮、语言标识）
- `.repo-inline-code` — 行内代码
---
## 🎨 设计令牌（CSS 变量）
repoUI 的所有样式均由 CSS 变量驱动，你可以非常方便地定制主题：
```css
:root {
--repo-color-primary: #3b82f6; /* 主色 */
--repo-color-danger: #ef4444; /* 危险色 */
--repo-color-success: #10b981; /* 成功色 */
--repo-color-warning: #f59e0b; /* 警告色 */
--repo-font-family: -apple-system, "Segoe UI", sans-serif;
--repo-radius-md: 6px; /* 圆角 */
--repo-spacing-4: 16px; /* 间距 */
/* ...更多变量见 repoUI.css */
}
```
变量分组：
- **颜色**：`--repo-color-*`（primary/danger/success/warning/text/bg/border/link/icon）
- **字体**：`--repo-font-*`（family/size/line-height）
- **间距**：`--repo-spacing-*`（1~12）
- **圆角**：`--repo-radius-*`（sm/md/lg/xl/full）
- **阴影**：`--repo-shadow-*`（xs~xl）
- **层级**：`--repo-z-*`（dropdown/sticky/fixed/modal/popover/tooltip）
- **布局**：`--repo-header-height` / `--repo-sidebar-width`
---
## 🔠 图标使用
repoUI 内置图标字体，使用方式：
```html
```
> 图标类名格式：`icon-*`
---
## 📁 项目结构
```
repoUI组件样式库/
├── repoUI.css # 完整样式库（单文件，约 60KB）
├── fonts/ # 图标字体文件
│ ├── repo-icons.eot
│ ├── repo-icons.ttf
│ └── repo-icons.woff
└── README.md # 本文档
```
---
## 📄 许可证
本项目采用 **MIT License** 开源协议，详见 [LICENSE](LICENSE)。你可以自由使用、修改和分发，但请保留版权声明。
---
## 🙏 致谢
感谢使用 repoUI 组件样式库！如果你觉得好用，欢迎 star ⭐ 或在项目中分享它。