曦寒官方文档

主题

XiHan UI 组件概述 ​

XiHan UI 是一个基于 Vue 3 开发的现代化 UI 组件库，专注于提供美观、易用且高性能的用户界面组件。组件库遵循一致的设计语言和交互模式，帮助开发者快速构建专业的应用界面。

设计原则 ​

XiHan UI 的设计遵循以下核心原则：

  • 简洁统一：保持视觉语言一致，减少不必要的装饰，让用户专注于内容
  • 直观易用：组件的交互方式符合用户的预期，降低学习成本
  • 灵活可定制：提供丰富的配置项和主题定制能力，满足不同场景的需求
  • 性能优先：优化组件的渲染性能，确保在大数据量场景下仍保持流畅
  • 响应式设计：组件自适应不同尺寸的屏幕，提供优秀的多端体验

组件架构 ​

XiHan UI 采用模块化的组件架构，每个组件由以下几个部分组成：

components/button/
├── src/              # 组件源码
│   ├── button.vue    # 主组件
│   ├── button-group.vue # 子组件
│   └── types.ts      # 类型定义
├── styles/           # 样式文件
│   ├── index.ts      # 样式入口
│   └── css/          # CSS 样式
└── __tests__/        # 测试文件
    └── button.test.ts # 单元测试

组件生命周期 ​

XiHan UI 组件的生命周期与 Vue 3 组件的生命周期相同，主要包括：

初始化阶段 → 挂载阶段 → 更新阶段 → 卸载阶段

初始化: setup() → beforeCreate → created
挂载: beforeMount → mounted
更新: beforeUpdate → updated
卸载: beforeUnmount → unmounted

组件开发流程 ​

XiHan UI 的组件开发遵循以下流程：

  1. 需求分析：确定组件的功能、API 设计和交互方式
  2. 原型设计：制作组件的设计原型，确定视觉风格
  3. 组件实现：使用 Vue 3 + TypeScript 实现组件逻辑
  4. 单元测试：编写单元测试，确保组件功能正确
  5. 文档编写：编写组件使用文档和示例
  6. 性能优化：优化组件性能，确保高效运行
  7. 发布集成：将组件集成到组件库并发布

组件分类 ​

XiHan UI 提供了丰富的组件，按照功能可分为以下几类：

基础组件 ​

基础组件是构建用户界面的基础元素，包括：

  • Button（按钮）
  • Typography（排版）
  • Icon（图标）
  • Grid（栅格）
  • Layout（布局）
  • Space（间距）
  • Divider（分割线）

表单组件 ​

表单组件用于数据录入和交互，包括：

  • Input（输入框）
  • Select（选择器）
  • Checkbox（复选框）
  • Radio（单选框）
  • DatePicker（日期选择器）
  • TimePicker（时间选择器）
  • Upload（上传）
  • Form（表单）
  • Switch（开关）
  • Slider（滑块）
  • Rate（评分）

数据展示 ​

数据展示组件用于呈现各种类型的数据，包括：

  • Table（表格）
  • List（列表）
  • Card（卡片）
  • Calendar（日历）
  • Carousel（轮播）
  • Collapse（折叠面板）
  • Tree（树形控件）
  • Timeline（时间线）
  • Tag（标签）
  • Badge（徽标）
  • Avatar（头像）

导航组件 ​

导航组件用于页面导航和内容组织，包括：

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

反馈组件 ​

反馈组件用于操作后的反馈和交互，包括：

  • Alert（警告提示）
  • Modal（对话框）
  • Notification（通知提示框）
  • Message（全局提示）
  • Progress（进度条）
  • Drawer（抽屉）
  • Popover（气泡卡片）
  • Tooltip（文字提示）
  • Skeleton（骨架屏）
  • Result（结果）
  • Spin（加载中）

构建系统 ​

XiHan UI 使用以下技术构建：

  • TurboRepo：用于任务编排和依赖管理
  • Unbuild：用于打包生成 ESM 和 CommonJS 模块
  • TypeScript：用于类型检查和编译
  • Vite：用于本地开发和测试

技术栈 ​

XiHan UI 基于以下技术栈开发：

  • Vue 3：使用 Vue 3 的 Composition API 开发，提供更好的性能和类型推导
  • TypeScript：全面使用 TypeScript 开发，提供完善的类型定义
  • Vite：使用 Vite 作为构建工具，提供快速的开发体验
  • SCSS：使用 SCSS 预处理器，提供更强大的样式组织能力
  • JSX/TSX：部分组件使用 JSX/TSX 编写，提供更灵活的模板逻辑

浏览器兼容性 ​

XiHan UI 支持所有现代浏览器，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

不支持 Internet Explorer 11 及以下版本。

版本策略 ​

XiHan UI 采用 语义化版本 进行版本管理：

  • 主版本号：包含不兼容的 API 变更
  • 次版本号：包含向下兼容的功能性新增
  • 修订号：包含向下兼容的问题修正

下一步 ​

Released under The MIT License.

Copyright ©2021-Present XiHanFun All Rights Reserved.