# Ura Components 简介

Ura Components 是一套构建星光麒麟操作系统界面的组件式 UI 框架，可支撑开发者高效地构建跨端应用的 UI 界面。

## 拉取代码

```sh
git clone https://gitee.com/openkylin/ura-components.git
```

## 解决需求

1. 代码复用，提升界面开发效率，支撑系统 UI 的设计落地；
2. 跨端运行，提供响应式 UI 解决方案，做到一次开发多端部署；
3. 开发生态，为以后的开发者在星光麒麟上开发应用提供方法和工具；

## 自研原因

1. 普通的 UI 组件内聚程度较低、组合灵活度低。
2. 与操作系统功能深度融合，提供面向系统功能的组件支持；
3. 跨设备响应式解决方案，兼容多个平台（手机、平板、腕表、PC 等）上的 UI 表现。

## 架构概述

```
┌─────────────────────────────────────────────────────────────────────────┐
│            ┌─────────┐ ┌─────────────────────────────────┐ ┌──────────┐ │
│            │         │ │          ┌─────────┐ ┌─────────┐│ │          │ │
│            │  Actor  │ │Composite │  Actor  │ │  Actor  ││ │          │ │
│            │Component│ │Component │Component│ │Component││ │          │ │
│            │         │ │          └─────────┘ └─────────┘│ │          │ │
│            └─────────┘ └─────────────────────────────────┘ │Functional│ │
│            ┌─────────┐ ┌─────────────────────────────────┐ │Component │ │
│            │         │ │          ┌─────────┐ ┌─────────┐│ │          │ │
│            │  Actor  │ │Composite │Composite│ │  Actor  ││ │          │ │
│     Ura    │Component│ │Component │Component│ │Component││ │          │ │
│ Components │         │ │          └─────────┘ └─────────┘│ │          │ │
│            └─────────┘ └─────────────────────────────────┘ └──────────┘ │
│            ┌──────────────────────────────────────────────────────────┐ │
│            │         ┌─────────┐ ┌──────┐ ┌──────┐ ┌────────────────┐ │ │
│            │         │ Gesture │ │ Blur │ │ L10n │ │ Press Feedback │ │ │
│            │  Base   └─────────┘ └──────┘ └──────┘ └────────────────┘ │ │
│            │ Element ┌──────────┐ ┌─────────────────┐ ┌─────────────┐ │ │
│            │         │ Darkmode │ │ Adaptive Layout │ │ ...         │ │ │
│            │         └──────────┘ └─────────────────┘ └─────────────┘ │ │
│            └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│            ┌─────────────────┐ ┌────────────┐ ┌────────────┐ ┌────────┐ │
│ LitElement │ ReactiveElement │ │ Decorators │ │ Directives │ │ ...    │ │
│            └─────────────────┘ └────────────┘ └────────────┘ └────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│      Web       ┌────────────┐ ┌───────────────┐ ┌─────────────────────┐ │
│   Component    │ Shadow DOM │ │ HTML Template │ │ HTML Custom Element │ │
│ Specification  └────────────┘ └───────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
```

## 支持功能包括

- 深色模式
- 图标字体
- 国际化
- 按压反馈
- 复杂手势交互
- 侵入性样式修改

## 组件分类

目前分为三类组件：

- 原子组件
  - 特点：可独立执行、单一功能
  - 如：按钮、单选框、复选框、开关等
- 复合组件
  - 特点：由原子组件及由原子组件组成的复合组件之间的组合或嵌套
  - 如：组、行、块、窗等
- 功能卡片组件
  - 特点：结合系统硬件能力和接口，实现某一块功能
  - 如：解锁卡片、电池卡片、音乐卡片等