跳到主要内容

UI 组件包

UI 组件包提供统一的 UI 组件库，基于 TDesign Vue Next 构建，提供一致的设计语言和用户体验。

设计原则​

一致性​

  • 统一的设计语言
  • 一致的交互体验
  • 标准化的组件规范
  • 统一的视觉风格

可用性​

  • 良好的可访问性
  • 直观的交互设计
  • 清晰的状态反馈
  • 友好的错误提示

可维护性​

  • 组件化设计
  • 清晰的 API 设计
  • 完善的文档
  • 易于扩展

组件分类​

基础组件​

  • Button 按钮
  • Input 输入框
  • Select 选择器
  • Checkbox 复选框
  • Radio 单选框
  • Switch 开关
  • Slider 滑块
  • Rate 评分

布局组件​

  • Grid 栅格
  • Flex 弹性布局
  • Space 间距
  • Divider 分割线
  • Container 容器
  • Layout 布局

导航组件​

  • Menu 菜单
  • Breadcrumb 面包屑
  • Pagination 分页
  • Tabs 标签页
  • Steps 步骤条
  • Dropdown 下拉菜单

反馈组件​

  • Message 消息
  • Notification 通知
  • Modal 模态框
  • Drawer 抽屉
  • Popover 气泡卡片
  • Tooltip 文字提示

数据展示​

  • Table 表格
  • List 列表
  • Card 卡片
  • Collapse 折叠面板
  • Timeline 时间线
  • Tree 树形控件

表单组件​

  • Form 表单
  • FormItem 表单项
  • DatePicker 日期选择器
  • TimePicker 时间选择器
  • Upload 上传
  • Transfer 穿梭框

开发指南​

安装使用​

# 在应用中安装
pnpm add @jingyun/ui

# 在组件中使用
import { Button, Input } from '@jingyun/ui'

主题定制​

// 主题配置
import { createApp } from 'vue'
import TDesign from 'tdesign-vue-next'
import '@jingyun/ui/dist/index.css'

const app = createApp(App)
app.use(TDesign)

项目结构​

packages/ui/
├── src/
│   ├── components/     # 组件
│   ├── styles/         # 样式
│   ├── hooks/          # Hooks
│   ├── utils/          # 工具函数
│   ├── types/          # 类型定义
│   └── index.ts        # 入口文件
├── docs/               # 文档
├── tests/              # 测试
└── package.json        # 包配置

组件开发​

组件结构​

ComponentName/
├── index.vue           # 组件入口
├── ComponentName.vue   # 组件实现
├── types.ts            # 类型定义
├── style.less          # 样式文件
└── README.md           # 组件文档

开发规范​

  • 组件命名：PascalCase
  • 属性命名：kebab-case
  • 事件命名：kebab-case
  • 样式命名：BEM 规范

主题系统​

设计令牌​

  • 颜色系统
  • 字体系统
  • 间距系统
  • 阴影系统

主题定制​

  • CSS 变量
  • 主题配置
  • 动态切换
  • 暗色模式

开发工具​

Storybook​

  • 组件展示
  • 交互测试
  • 文档生成
  • 设计系统

组件测试​

  • 单元测试
  • 视觉回归测试
  • 可访问性测试
  • 性能测试

发布流程​

版本管理​

  • 语义化版本
  • 变更日志
  • 发布自动化
  • 版本兼容性

文档更新​

  • API 文档
  • 使用示例
  • 设计规范
  • 最佳实践