(chore)更新Ura Components的README

README.md

@@ -1,28 +1,81 @@
-# Star-Web-Components
+# Ura Components 简介
 
-星光 Web 组件
+Ura Components 是一套构建星光麒麟操作系统界面的组件式 UI 框架，可支撑开发者高效地构建跨端应用的 UI 界面。
 
-## 拉取
+## 拉取代码
 
 ```sh
-git clone ssh://git@172.20.184.160:7999/yr/star-web-components.git
+git clone https://gitee.com/openkylin/ura-components.git
 ```
 
-## 提交
+## 解决需求
 
-从主线分支切出对应的 feature|bugfix|optimize 等关键词的分支。
+1. 代码复用，提升界面开发效率，支撑系统 UI 的设计落地；
+2. 跨端运行，提供响应式 UI 解决方案，做到一次开发多端部署；
+3. 开发生态，为以后的开发者在星光麒麟上开发应用提供方法和工具；
 
-```sh
+## 自研原因
-git checkout -b feature-component-button master
+
+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  └────────────┘ └───────────────┘ └─────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────────┘
 ```
 
-## 示例运行
+## 支持功能包括
 
-pnpm 是 npm 包管理领域一个新的、领先的包管理器。
+- 深色模式
+- 图标字体
+- 国际化
+- 按压反馈
+- 复杂手势交互
+- 侵入性样式修改
 
-若无 pnpm，请先进行全局安装及切换 npm 源至[国内镜像源](https://www.npmmirror.com/)。
+## 组件分类
 
-```sh
+目前分为三类组件：
-pnpm install # 安装开发调试依赖包
+
-pnpm vite    # 使用vite运行示例
+- 原子组件
-```
+  - 特点：可独立执行、单一功能
+  - 如：按钮、单选框、复选框、开关等
+- 复合组件
+  - 特点：由原子组件及由原子组件组成的复合组件之间的组合或嵌套
+  - 如：组、行、块、窗等
+- 功能卡片组件
+  - 特点：结合系统硬件能力和接口，实现某一块功能
+  - 如：解锁卡片、电池卡片、音乐卡片等