🎨 repoUI 组件样式库
一个纯 CSS 的现代化 Web UI 组件样式库，无需任何 JavaScript 依赖，即插即用。
repoUI 是一个轻量、美观、可主题化的前端组件样式库。它基于 CSS 变量（设计令牌） 构建，支持浅色 / 深色主题一键切换，内置完整的图标字体、布局系统与数十种常用 UI 组件。所有样式均为原生 CSS，无框架依赖，可直接引入任意 HTML 项目使用。
✨ 特性
| 特性 | 说明 |
|---|---|
| 🎨 设计令牌 | 完整 CSS 变量体系（颜色/字体/间距/圆角/阴影/层级） |
| 🌗 深浅主题 | 通过 data-theme="dark" 一键切换深色模式 |
| 🔠 图标字体 | 内置数百个常见图标，覆盖开发/协作/代码管理等场景 |
| 📦 纯 CSS 零依赖 | 无需 JavaScript 框架，直接引入即可用 |
| ♻️ 即插即用 | 单一 CSS 文件，<link> 引入即生效 |
| 🧩 组件丰富 | 内置 20+ 常用 UI 组件 |
🚀 快速开始
引入
<!-- 在 head 中引入 -->
<link rel="stylesheet" href="repoUI.css">
简单示例
<!-- 按钮 -->
<button class="repo-btn repo-btn--primary">主按钮</button>
<button class="repo-btn repo-btn--secondary">次按钮</button>
<button class="repo-btn repo-btn--danger">危险按钮</button>
<!-- 卡片 -->
<div class="repo-card">
<div class="repo-card__header"><h3 class="repo-card__title">标题</h3></div>
<div class="repo-card__body">卡片内容</div>
</div>
<!-- 标签 -->
<span class="repo-tag repo-tag--success">成功</span>
<span class="repo-tag repo-tag--warning">警告</span>
<span class="repo-tag repo-tag--danger">错误</span>
<!-- 标签页 -->
<div class="repo-tabs">
<div class="repo-tabs__item repo-tabs__item--active">概览</div>
<div class="repo-tabs__item">代码</div>
<div class="repo-tabs__item">历史</div>
</div>
深色主题
<!-- 在根元素上设置 data-theme 即可切换为深色 -->
<html data-theme="dark">
🧩 组件清单
布局与导航
.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 变量驱动，你可以非常方便地定制主题：
: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 内置图标字体，使用方式：
<!-- 基础操作图标 -->
<span class="icon-download"></span>
<span class="icon-copy"></span>
<span class="icon-edit"></span>
<span class="icon-delete"></span>
<!-- 状态图标 -->
<span class="icon-success"></span>
<span class="icon-error"></span>
<span class="icon-warning"></span>
<span class="icon-running"></span>
<!-- GitHub 等常用图标（兼容映射） -->
<span class="icon-github"></span>
<span class="icon-branch"></span>
<span class="icon-pull-request"></span>
<span class="icon-issue"></span>
图标类名格式：
icon-*
📁 项目结构
repoUI组件样式库/
├── repoUI.css # 完整样式库（单文件，约 60KB）
├── fonts/ # 图标字体文件
│ ├── repo-icons.eot
│ ├── repo-icons.ttf
│ └── repo-icons.woff
└── README.md # 本文档
📄 许可证
本项目采用 MIT License 开源协议，详见 LICENSE。你可以自由使用、修改和分发，但请保留版权声明。
🙏 致谢
感谢使用 repoUI 组件样式库！如果你觉得好用，欢迎 star ⭐ 或在项目中分享它。