综合 Web 组件平台案例

案例与作品 作品分享
1

YC UI - 综合 Web 组件平台

一、项目简介

YC UI 是一个功能丰富、现代化的前端 UI 组件库，设计灵感来源于 Element Plus。项目提供了 70+ 高质量组件，涵盖了日常 Web 开发中的绝大多数场景，帮助开发者快速构建企业级应用程序。

项目定位

一个纯粹基于原生 HTML、CSS 构建的轻量级 UI 组件库，无需依赖任何前端框架即可使用。

设计理念

  • 简约至上：保持代码简洁，避免过度设计
  • 开箱即用：引入即用，零配置门槛
  • 高度可定制：基于 CSS 变量的灵活主题系统
  • 组件独立：每个组件独立维护，按需引入

image
image1920×1200 257 KB

image
image3072×1582 262 KB

image
image1920×989 161 KB

image
image3072×1582 403 KB

二、技术亮点

1. 纯原生实现

  • 不依赖任何 JavaScript 框架：无需 React、Vue、Angular
  • 基于原生 HTML5 + CSS3 构建：充分利用现代 Web 标准
  • 零构建依赖：无需 Webpack、Vite 等构建工具
  • 跨框架兼容：可在任何项目中使用，不受技术栈限制

2. 现代化的样式系统

CSS 自定义属性 (CSS Variables)

项目采用完整的 CSS 变量体系，包含 150+ 个设计变量，覆盖：

变量类别 数量 说明
颜色变量 40+ 主题色、成功、警告、危险、信息色及其变体
文本变量 4+ 主文本、常规文本、次要文本、占位符文本
背景变量 8+ 页面背景、元素背景、禁用状态背景等
边框变量 6+ 不同层级的边框颜色和样式
字体变量 8+ 字体族、字号（6级）、字重
间距变量 7+ 从 4px 到 32px 的标准间距
圆角变量 9+ 从 2px 到完全圆角的标准圆角
阴影变量 10+ 多层级阴影效果
动画变量 5+ 过渡时间和缓动函数
层级变量 3+ 普通、顶层、浮层
尺寸变量 3+ 大、中、小组件尺寸

主题切换机制

<!-- 浅色主题（默认） -->
<html yc-theme="light">

<!-- 深色主题 -->
<html yc-theme="dark">
  • 支持亮色/暗色双主题
  • 主题变量自动切换
  • 用户偏好本地存储
  • 无闪烁切换体验

3. 组件架构设计

  • 组件独立文件：70+ 个独立 CSS 文件，便于维护和按需引入
  • 模块化组织：按功能分类，结构清晰
  • 完善的演示系统：每个组件配有独立演示页面
  • BEM 命名规范：统一的类名命名规则

三、组件完整清单

基础组件 (15+)

组件 样式文件 演示页面 说明
Button 按钮 button.css demo-button.html 提供多种类型、尺寸和状态
Link 链接 link.css demo-link.html 文本链接组件
Tag 标签 tag.css demo-tag.html 标记和分类标签
Badge 徽标 badge.css demo-badge.html 数字和状态徽标
Avatar 头像 avatar.css demo-avatar.html 用户头像展示
Icon 图标 - - 集成 Font Awesome
Text 文本 text.css demo-text.html 文本排版组件
Divider 分割线 divider.css demo-divider.html 内容和区域分割
Skeleton 骨架屏 skeleton.css demo-skeleton.html 加载占位效果
Progress 进度条 progress.css demo-progress.html 线性/环形进度条
Result 结果 result.css demo-result.html 操作结果展示
Empty 空状态 empty.css demo-empty.html 空数据状态展示
Statistic 统计值 statistic.css demo-statistic.html 数值统计展示
Timeline 时间线 timeline.css demo-timeline.html 时间序列展示
Segmented 分段器 segmented.css demo-segmented.html 分段选择控件

表单组件 (15+)

组件 样式文件 演示页面 说明
Input 输入框 input.css demo-input.html 基础文本输入
InputNumber 数字输入 input-number.css demo-input-number.html 数字范围输入
InputTag 标签输入 input-tag.css demo-input-tag.html 标签式输入
MaskedInput 掩码输入 masked-input.css demo-masked-input.html 格式化输入
Textarea 文本域 textarea.css - 多行文本输入
Select 选择器 select.css demo-select.html 下拉选择
Checkbox 多选框 checkbox.css demo-checkbox.html 多项选择
Radio 单选框 radio.css demo-radio.html 单项选择
Switch 开关 switch.css demo-switch.html 状态切换
Slider 滑块 slider.css demo-slider.html 范围滑块
Rating 评分 rating.css demo-rate.html 星级评分
Form 表单 form.css demo-form.html 表单布局和验证
Autocomplete 自动完成 autocomplete.css demo-autocomplete.html 搜索建议
Cascader 级联选择 cascader.css demo-cascader.html 多级级联选择
TreeSelect 树形选择 tree-select.css demo-tree-select.html 树形数据选择
Transfer 穿梭框 transfer.css demo-transfer.html 数据穿梭选择
Upload 上传 upload.css demo-upload.html 文件上传组件
ColorPicker 颜色选择 color-picker.css demo-color-picker.html 颜色选择器

数据展示 (12+)

组件 样式文件 演示页面 说明
Table 表格 table.css demo-table.html 数据表格展示
Tree 树形控件 tree.css demo-tree.html 层级数据展示
ListView 列表视图 listview.css demo-listview.html 复杂列表组件
Pagination 分页 pagination.css demo-pagination.html 数据分页导航
Descriptions 描述列表 descriptions.css demo-descriptions.html 键值对展示
Card 卡片 card.css demo-card.html 信息卡片容器
Collapse 折叠面板 collapse.css demo-collapse.html 内容折叠展示
Image 图片 image.css demo-image.html 图片展示组件
QRCode 二维码 qrcode.css demo-qrcode.html 二维码生成
PropertyGrid 属性网格 property-grid.css demo-property-grid.html 属性编辑表格
Filter 筛选器 filter.css demo-filter.html 数据筛选组件
Tour 漫游式引导 tour.css demo-tour.html 新用户引导

反馈组件 (6+)

组件 样式文件 演示页面 说明
Alert 警告提示 alert.css demo-alert.html 信息提示框
Dialog 对话框 dialog.css demo-dialog.html 模态对话框
Window 窗口 window.css demo-window.html 可移动窗口
Drawer 抽屉 drawer.css demo-drawer.html 侧边抽屉
Notification 通知 notification.css demo-notification.html 全局通知
MessageBox 消息框 messagebox.css demo-messagebox.html 确认消息框
Loading 加载 loading.css demo-loading.html 加载状态指示
Popover 弹出框 popover.css demo-popover.html 浮层提示框

布局组件 (8+)

组件 样式文件 演示页面 说明
Container 布局容器 container.css demo-container.html 页面布局框架
Layout 栅格布局 layout.css demo-layout.html 响应式栅格系统
Space 间距 space.css demo-space.html 自动间距管理
Splitter 分割面板 splitter.css demo-splitter.html 可调整面板
TileLayout 平铺布局 tilelayout.css demo-tilelayout.html 平铺式布局
Scrollbar 滚动条 scrollbar.css demo-scrollbar.html 自定义滚动条

导航组件 (6+)

组件 样式文件 演示页面 说明
Menu 菜单 menu.css demo-menu.html 导航菜单
Tabs 标签页 tabs.css demo-tabs.html 标签页切换
Breadcrumb 面包屑 breadcrumb.css demo-breadcrumb.html 路径导航
Anchor 锚点 anchor.css demo-anchor.html 页面锚点导航
Dropdown 下拉菜单 dropdown.css demo-dropdown.html 下拉操作菜单
Affix 固钉 affix.css demo-affix.html 固定定位组件
BackTop 回到顶部 backtop.css demo-backtop.html 快速回到顶部
PageHeader 页头 page-header.css demo-page-header.html 页面头部组件

日期时间 (4+)

组件 样式文件 演示页面 说明
DatePicker 日期选择 date-picker.css demo-date-picker.html 日期选择器
TimePicker 时间选择 time-picker.css demo-time-picker.html 时间选择器
Calendar 日历 calendar.css demo-calendar.html 日历组件
DateTimePicker 日期时间 - demo-date-time-picker.html 日期时间组合

高级组件 (10+)

组件 样式文件 演示页面 说明
Diagram 流程图 diagram.css demo-diagram.html 流程图组件
OrgChart 组织架构图 orgchart.css demo-orgchart.html 组织架构展示
Map 地图 map.css demo-map.html 地图组件
Spreadsheet 电子表格 spreadsheet.css demo-spreadsheet.html 电子表格组件
Captcha 验证码 captcha.css demo-captcha.html 验证码组件
Barcode 条形码 - demo-barcode.html 条形码组件

四、项目结构

yc-ui-components/
├── index.html                          # 主页/文档入口（含完整组件导航）
├── PROJECT_SUMMARY.md                  # 项目总结文档
│
├── styles/                             # 样式系统
│   ├── index.css                       # 主样式入口（聚合所有组件）
│   ├── demo.css                        # 演示页面通用样式
│   │
│   ├── base/                           # 基础样式
│   │   ├── variables.css               # CSS 变量定义（150+ 变量）
│   │   │   ├── 亮色主题变量
│   │   │   └── 暗色主题变量
│   │   └── reset.css                   # 浏览器样式重置
│   │
│   ├── components/                     # 组件样式 (70+ 文件)
│   │   ├── 基础组件
│   │   │   ├── button.css
│   │   │   ├── link.css
│   │   │   ├── tag.css
│   │   │   ├── badge.css
│   │   │   ├── avatar.css
│   │   │   └── ...
│   │   ├── 表单组件
│   │   │   ├── input.css
│   │   │   ├── select.css
│   │   │   ├── checkbox.css
│   │   │   └── ...
│   │   ├── 数据展示
│   │   │   ├── table.css
│   │   │   ├── tree.css
│   │   │   └── ...
│   │   ├── 反馈组件
│   │   │   ├── dialog.css
│   │   │   ├── alert.css
│   │   │   └── ...
│   │   └── ...
│   │
│   └── history/                        # 历史版本样式
│       └── index.css
│
└── views/                              # 演示页面 (70+ 页面)
    ├── demo-button.html                # 按钮演示
    ├── demo-form.html                  # 表单演示
    ├── demo-table.html                 # 表格演示
    ├── demo-dialog.html                # 对话框演示
    ├── ...                             # 各组件独立演示页面
    │
    └── table/                          # Table 专项演示
        ├── basic.html                  # 基础表格
        ├── selection.html              # 选择表格
        ├── sort-filter.html            # 排序过滤
        ├── edit-validate.html          # 编辑验证
        ├── tree.html                   # 树形表格
        ├── virtual-scroll.html         # 虚拟滚动
        ├── drag-resize.html            # 拖拽调整
        └── data-operation.html         # 数据操作

文件统计

类型 数量 说明
组件 CSS 文件 75+ 每个组件独立样式
演示 HTML 页面 80+ 组件使用和示例
基础 CSS 文件 3 变量、重置、入口
专项演示页面 8 Table 详细功能演示

五、核心特性

1. 主题定制能力

CSS 变量体系

/* 颜色系统 */
--yc-color-primary: #409EFF;      /* 主题色 */
--yc-color-success: #67C23A;      /* 成功色 */
--yc-color-warning: #E6A23C;      /* 警告色 */
--yc-color-danger: #F56C6C;       /* 危险色 */
--yc-color-info: #909399;         /* 信息色 */

/* 文本系统 */
--yc-color-text-primary: #303133;     /* 主文本 */
--yc-color-text-regular: #606266;     /* 常规文本 */
--yc-color-text-secondary: #909399;   /* 次要文本 */
--yc-color-text-placeholder: #C0C4CC; /* 占位符 */

/* 字体系统 */
--yc-font-size-extra-large: 20px;  /* 超大字号 */
--yc-font-size-large: 18px;        /* 大字号 */
--yc-font-size-medium: 16px;       /* 中字 */
--yc-font-size-base: 14px;         /* 基础字号 */
--yc-font-size-small: 13px;        /* 小字号 */
--yc-font-size-extra-small: 12px;  /* 超小字号 */

/* 间距系统 */
--yc-spacing-xs: 4px;    /* 超小间距 */
--yc-spacing-sm: 8px;    /* 小间距 */
--yc-spacing-md: 12px;   /* 中间距 */
--yc-spacing-base: 16px; /* 基础间距 */
--yc-spacing-lg: 20px;   /* 大间距 */
--yc-spacing-xl: 24px;   /* 超大间距 */
--yc-spacing-xxl: 32px;  /* 特大间距 */

/* 圆角系统 */
--yc-border-radius-small: 2px;   /* 小圆角 */
--yc-border-radius-base: 4px;    /* 基础圆角 */
--yc-border-radius-medium: 6px;  /* 中圆角 */
--yc-border-radius-large: 8px;   /* 大圆角 */
--yc-border-radius-xl: 12px;     /* 超大圆角 */
--yc-border-radius-xxl: 16px;    /* 特大圆角 */
--yc-border-radius-round: 9999px;/* 完全圆角 */
--yc-border-radius-circle: 50%;  /* 圆形 */

/* 阴影系统 */
--yc-box-shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--yc-box-shadow-light: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--yc-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--yc-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), ...;
--yc-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), ...;
--yc-box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), ...;
--yc-box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

/* 动画系统 */
--yc-transition-duration-fast: 0.1s;   /* 快速动画 */
--yc-transition-duration-base: 0.2s;   /* 基础动画 */
--yc-transition-duration-slow: 0.3s;   /* 慢速动画 */
--yc-transition-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
--yc-transition-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--yc-transition-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

主题切换

<!-- 支持主题切换 -->
<html yc-theme="light">  <!-- 浅色主题 -->
<html yc-theme="dark">   <!-- 深色主题 -->
  • 通过 yc-theme 属性控制主题
  • 主题变量自动切换
  • 用户偏好保存到 localStorage
  • 无闪烁切换体验

2. 响应式设计

  • 采用 CSS Grid 和 Flexbox 布局
  • 支持各种屏幕尺寸自适应
  • 移动端友好的组件设计
  • 响应式断点适配

3. 精美的动画效果

Hero 区域动画

  • 旋转背景装饰（30s 循环）
  • Logo 浮动动画（3s 循环）
  • 渐变色标题文字
  • 渐显滚动动画

卡片交互效果

  • 悬停上浮动画（translateY -8px）
  • 阴影增强效果
  • 顶部渐变条显示
  • 图标旋转缩放

组件导航卡片

  • 左侧渐变指示条
  • 图标旋转高亮
  • 箭头滑入显示
  • 平滑过渡动画

4. 完善的文档系统

  • 主页展示所有组件分类
  • 每个组件独立演示页面
  • 包含代码示例和使用说明
  • Table 组件提供 8 个专项演示

六、使用方式

基础使用

<!-- 1. 引入样式文件 -->
<link rel="stylesheet" href="styles/index.css">

<!-- 2. 设置主题（可选，默认 light） -->
<html yc-theme="light">

<!-- 3. 使用组件 -->
<button class="yc-button yc-button--primary">主要按钮</button>
<button class="yc-button yc-button--success">成功按钮</button>
<button class="yc-button yc-button--warning">警告按钮</button>
<button class="yc-button yc-button--danger">危险按钮</button>

<!-- 输入框 -->
<input class="yc-input" type="text" placeholder="请输入内容">

<!-- 卡片 -->
<div class="yc-card">
    <div class="yc-card__header">标题</div>
    <div class="yc-card__body">内容区域</div>
    <div class="yc-card__footer">底部</div>
</div>

按需引入

<!-- 仅引入需要的组件样式 -->
<link rel="stylesheet" href="styles/base/variables.css">
<link rel="stylesheet" href="styles/base/reset.css">
<link rel="stylesheet" href="styles/components/button.css">
<link rel="stylesheet" href="styles/components/input.css">

自定义主题

/* 覆盖默认变量 */
:root {
    --yc-color-primary: #722ed1;        /* 修改主题色为紫色 */
    --yc-border-radius-base: 8px;       /* 修改圆角 */
    --yc-font-size-base: 16px;          /* 修改基础字号 */
}

七、命名规范

BEM 命名法

.yc-button                          /* Block */
.yc-button--primary                 /* Element with modifier */
.yc-button__icon                    /* Element */
.yc-button__icon--large             /* Element with modifier */

类名约定

  • 前缀：yc- 表示 YC UI
  • 组件：小写字母 + 连字符
  • 状态：is-active, is-disabled
  • 尺寸：--large, --small
  • 类型：--primary, --success, --warning, --danger

八、项目优势

  1. 轻量无依赖：无需安装 npm 包，直接引入 CSS 即可使用
  2. 易于集成：可无缝集成到任何 Web 项目中
  3. 易于定制：基于 CSS 变量，轻松修改主题色、圆角、阴影等
  4. 组件丰富：70+ 组件覆盖绝大多数业务场景
  5. 文档完善：每个组件都有独立的演示页面
  6. 视觉精美：现代化的 UI 设计，支持暗色主题
  7. 代码规范：BEM 命名，结构清晰，易于维护
  8. 性能优秀：无 JavaScript 运行时开销，纯 CSS 渲染
  9. 按需加载：支持单独引入组件样式，减小体积
  10. 跨平台：兼容所有现代浏览器

九、适合场景

企业级应用

  • 后台管理系统
  • ERP/CRM 系统
  • 数据看板/仪表盘
  • 工作流程系统

快速开发

  • 原型开发
  • MVP 产品验证
  • 内部工具开发
  • 演示项目

学习参考

  • CSS 组件设计模式
  • BEM 命名规范实践
  • CSS 变量应用
  • 响应式设计案例

集成场景

  • 传统 jQuery 项目
  • 原生 HTML/JS 项目
  • 作为框架底层样式库
  • 微前端子应用

十、Trae 挑战赛亮点

1. 纯手工打造

  • 完全基于原生技术，展示扎实的前端功底
  • 无框架依赖，回归 Web 本质
  • 每个组件精心设计和实现

2. 系统化设计

  • 完整的 CSS 变量体系（150+ 变量）
  • 统一的命名规范（BEM）
  • 模块化文件组织
  • 清晰的架构层次

3. 零框架依赖

  • 展示 CSS 的强大能力
  • 无需构建工具
  • 降低技术门槛
  • 提高兼容性

4. 开箱即用

  • 无需复杂配置
  • 引入即用
  • 完善的文档演示
  • 低学习成本

5. 持续扩展

  • 70+ 组件持续增加
  • 良好的扩展性设计
  • 组件间解耦
  • 易于添加新组件

6. 工程化思维

  • 文件分类清晰
  • 职责单一原则
  • 可维护性高
  • 便于团队协作

十一、技术细节

颜色系统

主题色

Primary:   #409EFF  (蓝)
Success:   #67C23A  (绿)
Warning:   #E6A23C  (橙)
Danger:    #F56C6C  (红)
Info:      #909399  (灰)

色阶变化

每个主题色都有多个变体：

  • light-3, light-5, light-7, light-8, light-9 (透明度渐变)
  • dark-2 (深色变体)
  • hover (悬停状态色)

阴影层次

base:   0 1px 2px 0 rgba(0, 0, 0, 0.05)
light:  0 0.5rem 1rem rgba(0, 0, 0, 0.15)
sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
md:     0 4px 6px -1px rgba(0, 0, 0, 0.1), ...
lg:     0 10px 15px -3px rgba(0, 0, 0, 0.1), ...
xl:     0 20px 25px -5px rgba(0, 0, 0, 0.1), ...
2xl:    0 25px 50px -12px rgba(0, 0, 0, 0.25)

组件尺寸

Large:  40px
Base:   32px
Small:  24px

字体系统

Family:    system-ui, -apple-system, "Segoe UI", Roboto, ...
Mono:      SFMono-Regular, Menlo, Monaco, Consolas, ...

Sizes:     12px, 13px, 14px, 16px, 18px, 20px
Weights:   400 (regular), 500 (medium), 600 (semibold), 700 (bold)

十二、未来规划

功能增强

  • 添加 JavaScript 交互支持
  • 提供 Vue/React 封装版本
  • 增加更多高级组件
  • 完善无障碍访问 (a11y)
  • 添加单元测试

工程化

  • 添加构建工具支持
  • 提供 npm 包发布
  • 自动化文档生成
  • 持续集成部署

生态建设

  • 在线演示网站
  • 组件 Playground
  • 主题生成器
  • 社区贡献指南

十三、一句话介绍

YC UI 是一个基于原生 HTML/CSS 构建的现代化 UI 组件库，提供 70+ 高质量组件，拥有完整的 CSS 变量主题系统、精美的动画效果和完善的文档演示，支持亮色/暗色主题切换，帮助开发者快速构建企业级 Web 应用。

十四、项目统计

指标 数值
组件总数 70+
CSS 文件数 75+
演示页面数 80+
CSS 变量数 150+
主题支持 Light / Dark
框架依赖 无
浏览器兼容 现代浏览器
代码规范 BEM

本项目由 Trae AI 辅助开发，展示了现代前端开发的工程化实践和创新设计理念。