Skip to content

简介

Birdpaper UI 是一套基于 Vue 3 的企业级中后台组件库,提供高质量的 UI 组件和完整的设计体系,帮助开发者快速构建一致、美观的 Web 应用。

设计理念

Birdpaper UI 遵循 简洁、一致、高效 的设计哲学:

  • 简洁:去除冗余装饰,让界面回归内容本身
  • 一致:统一的视觉语言和交互模式,降低用户认知成本
  • 高效:合理的信息层级和操作反馈,提升任务完成效率

设计体系

Birdpaper UI 的设计体系包含以下核心部分:

模块说明
色彩功能色 + 中性色,支持浅色/深色双模式
字体统一的字体族、字号和字重规范
尺寸4 级尺寸体系(mini / small / default / large)
圆角与尺寸联动的圆角规范
阴影分层级的阴影体系
动效统一的过渡时间和缓动函数
层级规范的 z-index 管理

技术特性

  • Vue 3:基于 Composition API,支持 <script setup> 语法
  • TypeScript:完整的类型定义,提供良好的开发体验
  • CSS Variables:基于 CSS 自定义变量,支持主题定制和深色模式
  • Tree-shakable:按需引入,减少打包体积
  • pnpm Monorepo:组件、主题、文档分包管理