From 902d05b05a41211545631a934dbb7c45fe01e426 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Wed, 18 Jan 2023 14:41:01 +0800 Subject: [PATCH] =?UTF-8?q?(chore)=E6=9B=B4=E6=96=B0Ura=20Components?= =?UTF-8?q?=E7=9A=84README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 68 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 854c807..162c88a 100644 --- a/README.md +++ b/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运行示例 -``` +目前分为三类组件： + +- 原子组件 + - 特点：可独立执行、单一功能 + - 如：按钮、单选框、复选框、开关等 +- 复合组件 + - 特点：由原子组件及由原子组件组成的复合组件之间的组合或嵌套 + - 如：组、行、块、窗等 +- 功能卡片组件 + - 特点：结合系统硬件能力和接口，实现某一块功能 + - 如：解锁卡片、电池卡片、音乐卡片等