Initial commit: repoUI 组件样式库 v1.0.0

2026-08-28 08:57:22 +08:00
commit 1d022a7381
4 changed files with 2521 additions and 0 deletions
@@ -0,0 +1,4 @@
+# 系统文件
+Thumbs.db
+.DS_Store
+desktop.ini
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DVS (dvs-dvsxt)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,184 @@
+# 🎨 repoUI 组件样式库
+
+> 一个**纯 CSS** 的现代化 Web UI 组件样式库，无需任何 JavaScript 依赖，即插即用。
+
+**repoUI** 是一个轻量、美观、可主题化的前端组件样式库。它基于 **CSS 变量（设计令牌）** 构建，支持**浅色 / 深色主题**一键切换，内置完整的图标字体、布局系统与数十种常用 UI 组件。所有样式均为原生 CSS，无框架依赖，可直接引入任意 HTML 项目使用。
+
+---
+
+## ✨ 特性
+
+| 特性 | 说明 |
+|------|------|
+| 🎨 **设计令牌** | 完整 CSS 变量体系（颜色/字体/间距/圆角/阴影/层级） |
+| 🌗 **深浅主题** | 通过 `data-theme="dark"` 一键切换深色模式 |
+| 🔠 **图标字体** | 内置数百个常见图标，覆盖开发/协作/代码管理等场景 |
+| 📦 **纯 CSS 零依赖** | 无需 JavaScript 框架，直接引入即可用 |
+| ♻️ **即插即用** | 单一 CSS 文件，`<link>` 引入即生效 |
+| 🧩 **组件丰富** | 内置 20+ 常用 UI 组件 |
+
+---
+
+## 🚀 快速开始
+
+### 引入
+
+```html
+<!-- 在 head 中引入 -->
+<link rel="stylesheet" href="repoUI.css">
+```
+
+### 简单示例
+
+```html
+<!-- 按钮 -->
+<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>
+```
+
+### 深色主题
+
+```html
+<!-- 在根元素上设置 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 变量驱动，你可以非常方便地定制主题：
+
+```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
+<!-- 基础操作图标 -->
+<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）
+└── README.md      # 本文档
+```
+
+---
+
+## 📄 许可证
+
+本项目采用 **MIT License** 开源协议，详见 [LICENSE](LICENSE)。你可以自由使用、修改和分发，但请保留版权声明。
+
+---
+
+## 🙏 致谢
+
+感谢使用 repoUI 组件样式库！如果你觉得好用，欢迎 star ⭐ 或在项目中分享它。