From ed535d0481aa0cac295e6b85cc8ae4e9eee7235a Mon Sep 17 00:00:00 2001
From: cheney2013 <chyi2012@gmail.com>
Date: Fri, 2 Jun 2023 12:16:05 +0800
Subject: [PATCH] Update README.md

---
 README.md | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 8c8aff9..d7afacf 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,30 @@
-# UIState
-一个 Cocos Creator 3.x 的插件，能够方便的管理多个UI状态
-
 # 项目简介
 
-<b>使用方法简单，只需一个在需要记录状态的节点上添加UIState组件，即可记录所有子节点（包含子孙节点）的状态改变</b>
+<b>一个 Cocos Creator 3.x 的插件，能够方便的管理多个UI状态，只需一个在需要记录状态的节点上添加UIState组件，即可记录所有子节点（包含子孙节点）的状态改变</b>
 
 1. 支持嵌套UIState。子节点（子孙节点）也可以加UIState，维护自己的状态
 2. 数据量小。仅记录修改的节点
 3. 代码逻辑清晰易扩展。可以很方便的扩展记录的组件和属性，支持记录自定义组件
 
+![image](https://github.com/cheney2013/ImageRepo/blob/main/2023-06-02-11-25-41.gif)
+
+# 安装和使用
+
+1. 将 extensions 目录下的 uistate-inspector 拷贝到你项目的 extensions 目录下
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-08-08.png)
+
+2. 点击 Creator 工具栏的 扩展->扩展管理器，点击已安装扩展，点击刷新扩展，就可以看到 uistate-inspector 扩展
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-09-33.png)
+
+3. 点击扩展右边的 toggle button，启用扩展
+4. 将 assets\script\component 目录下的 UIState.ts 文件复制到你项目的任意位置
+
+![image](https://github.com/cheney2013/ImageRepo/blob/main/Snipaste_2023-06-02_12-10-06.png)
+
+5. 为你需要记录UI状态的节点添加 UIState 组件
+
 ## 测试场景
 
 嵌套UIState 		✔	父UIState节点不会保存子UIState节点的状态
@@ -38,16 +54,3 @@ Widget				✔
 ## 构建发布测试
 
 Web桌面				✔
-
-## 开发环境
-
-Node.js
-
-## 安装
-
-```bash
-# 安装依赖模块
-npm install
-# 构建
-npm run build
-```