diff --git a/assets/scene/Main.scene b/assets/scene/Main.scene
index 46f40c8..4ac7a64 100644
--- a/assets/scene/Main.scene
+++ b/assets/scene/Main.scene
@@ -180,7 +180,7 @@
     "_priority": 0,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 592.3774954627949,
+    "_orthoHeight": 813.9650872817955,
     "_near": 0,
     "_far": 1000,
     "_color": {
@@ -292,8 +292,8 @@
       "__type__": "cc.Quat",
       "x": 0,
       "y": 0,
-      "z": -0.09771317388476722,
-      "w": 0.995214617883683
+      "z": 0,
+      "w": 1
     },
     "_lscale": {
       "__type__": "cc.Vec3",
@@ -307,7 +307,7 @@
       "__type__": "cc.Vec3",
       "x": 0,
       "y": 0,
-      "z": -11.215
+      "z": 0
     },
     "_id": "b5DhQMg8ZDBYEyXztSbxBs"
   },
@@ -322,7 +322,7 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 240,
+      "width": 210,
       "height": 50.4
     },
     "_anchorPoint": {
@@ -342,10 +342,10 @@
     "_enabled": true,
     "__prefab": null,
     "_lineHeight": 40,
-    "_string": "<color=#ff0000>五</color><color=#00ff00>彩</color><color=#0000ff>斑</color><color=#f700f5>斓</color><color=#f6f600>的</color><color=#0fffff>黑</color>",
+    "_string": "我是外层的背景",
     "_horizontalAlign": 0,
     "_verticalAlign": 0,
-    "_fontSize": 40,
+    "_fontSize": 30,
     "_maxWidth": 0,
     "_fontFamily": "Arial",
     "_font": null,
@@ -543,7 +543,7 @@
         "__id__": 14
       }
     ],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 17
@@ -639,7 +639,7 @@
     "node": {
       "__id__": 14
     },
-    "_enabled": true,
+    "_enabled": false,
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
@@ -660,7 +660,7 @@
     "node": {
       "__id__": 14
     },
-    "_enabled": true,
+    "_enabled": false,
     "__prefab": null,
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -776,7 +776,7 @@
       "__id__": 9
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 21
@@ -882,7 +882,7 @@
       "__id__": 9
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 24
@@ -988,7 +988,7 @@
       "__id__": 9
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 27
@@ -1094,7 +1094,7 @@
       "__id__": 9
     },
     "_children": [],
-    "_active": false,
+    "_active": true,
     "_components": [
       {
         "__id__": 30
@@ -1264,7 +1264,7 @@
       "levelUp",
       "fullLevel"
     ],
-    "_state": 0,
+    "_state": 1,
     "_records": {
       "0": [
         {
@@ -1277,14 +1277,14 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
             "width": 120,
             "height": 50.4,
             "anchorX": 0.5,
             "anchorY": 0.5,
             "enabled": true
           },
-          "Label": {
+          "cc.Label": {
             "color": "329646",
             "string": "已满级",
             "horizontalAlign": 1,
@@ -1307,14 +1307,14 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
             "width": 300,
             "height": 15,
             "anchorX": 0.5,
             "anchorY": 0.5,
             "enabled": true
           },
-          "Sprite": {
+          "cc.Sprite": {
             "color": "ffffff",
             "spriteFrame": "9fd900dd-221b-4f89-8f2c-fba34243c835@f9941",
             "grayscale": false,
@@ -1334,14 +1334,14 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
             "width": 31.12,
             "height": 50.4,
             "anchorX": 0.5,
             "anchorY": 0.5,
             "enabled": true
           },
-          "Label": {
+          "cc.Label": {
             "color": "000000",
             "string": "1级",
             "horizontalAlign": 1,
@@ -1367,14 +1367,14 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
             "width": 62,
             "height": 34,
             "anchorX": 0.5,
             "anchorY": 0.5,
             "enabled": true
           },
-          "Sprite": {
+          "cc.Sprite": {
             "color": "ffffff",
             "spriteFrame": "88b7887e-b33d-40bb-9eb0-76fd4b99feca@f9941",
             "grayscale": false,
@@ -1394,14 +1394,14 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
             "width": 31.12,
             "height": 50.4,
             "anchorX": 0.5,
             "anchorY": 0.5,
             "enabled": true
           },
-          "Label": {
+          "cc.Label": {
             "color": "000000",
             "string": "2级",
             "horizontalAlign": 1,
@@ -1419,6 +1419,61 @@
           "node": {
             "__id__": 26
           }
+        },
+        {
+          "node": {
+            "__id__": 9
+          },
+          "active": true,
+          "x": 0,
+          "y": -68.485,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1
+        },
+        {
+          "node": {
+            "__id__": 10
+          },
+          "active": true,
+          "x": -214.096,
+          "y": 133.719,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "cc.UITransform": {
+            "enabled": true,
+            "width": 120,
+            "height": 50.4,
+            "anchorX": 0.5,
+            "anchorY": 0.5
+          },
+          "cc.Label": {
+            "enabled": true,
+            "color": "000000",
+            "string": "我是内层的框",
+            "horizontalAlign": 1,
+            "verticalAlign": 1,
+            "fontSize": 20,
+            "fontFamily": "Arial",
+            "lineHeight": 40,
+            "overflow": 0,
+            "isBold": false,
+            "isItalic": false,
+            "isUnderline": false,
+            "underlineHeight": 2
+          }
+        },
+        {
+          "node": {
+            "__id__": 14
+          },
+          "active": true,
+          "x": -150,
+          "y": 0,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1
         }
       ],
       "1": [
@@ -1429,14 +1484,15 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 120,
             "height": 50.4,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Label": {
+          "cc.Label": {
+            "enabled": true,
             "color": "329646",
             "string": "已满级",
             "horizontalAlign": 1,
@@ -1448,8 +1504,7 @@
             "isBold": false,
             "isItalic": false,
             "isUnderline": false,
-            "underlineHeight": 2,
-            "enabled": true
+            "underlineHeight": 2
           },
           "node": {
             "__id__": 29
@@ -1465,21 +1520,21 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 300,
             "height": 15,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Sprite": {
+          "cc.Sprite": {
+            "enabled": true,
             "color": "ffffff",
             "spriteFrame": "9fd900dd-221b-4f89-8f2c-fba34243c835@f9941",
             "grayscale": false,
             "sizeMode": 0,
             "type": 1,
-            "trim": true,
-            "enabled": true
+            "trim": true
           }
         },
         {
@@ -1492,14 +1547,15 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 31.12,
             "height": 50.4,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Label": {
+          "cc.Label": {
+            "enabled": true,
             "color": "000000",
             "string": "1级",
             "horizontalAlign": 1,
@@ -1511,8 +1567,7 @@
             "isBold": false,
             "isItalic": false,
             "isUnderline": false,
-            "underlineHeight": 2,
-            "enabled": true
+            "underlineHeight": 2
           }
         },
         {
@@ -1525,21 +1580,21 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 62,
             "height": 34,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Sprite": {
+          "cc.Sprite": {
+            "enabled": true,
             "color": "ffffff",
             "spriteFrame": "88b7887e-b33d-40bb-9eb0-76fd4b99feca@f9941",
             "grayscale": false,
             "sizeMode": 1,
             "type": 0,
-            "trim": true,
-            "enabled": true
+            "trim": true
           }
         },
         {
@@ -1552,14 +1607,15 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 31.12,
             "height": 50.4,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Label": {
+          "cc.Label": {
+            "enabled": true,
             "color": "000000",
             "string": "2级",
             "horizontalAlign": 1,
@@ -1571,8 +1627,62 @@
             "isBold": false,
             "isItalic": false,
             "isUnderline": false,
-            "underlineHeight": 2,
-            "enabled": true
+            "underlineHeight": 2
+          }
+        },
+        {
+          "active": true,
+          "x": 0,
+          "y": -68.485,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "node": {
+            "__id__": 9
+          }
+        },
+        {
+          "active": true,
+          "x": -214.096,
+          "y": 133.719,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "node": {
+            "__id__": 10
+          },
+          "cc.UITransform": {
+            "enabled": true,
+            "width": 120,
+            "height": 50.4,
+            "anchorX": 0.5,
+            "anchorY": 0.5
+          },
+          "cc.Label": {
+            "enabled": true,
+            "color": "000000",
+            "string": "我是内层的框",
+            "horizontalAlign": 1,
+            "verticalAlign": 1,
+            "fontSize": 20,
+            "fontFamily": "Arial",
+            "lineHeight": 40,
+            "overflow": 0,
+            "isBold": false,
+            "isItalic": false,
+            "isUnderline": false,
+            "underlineHeight": 2
+          }
+        },
+        {
+          "active": true,
+          "x": -150,
+          "y": 0,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "node": {
+            "__id__": 14
           }
         }
       ]
@@ -1694,7 +1804,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "Label",
+    "_name": "cccLabel",
     "_objFlags": 512,
     "_parent": {
       "__id__": 37
@@ -1750,7 +1860,7 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 160,
+      "width": 171.12,
       "height": 50.4
     },
     "_anchorPoint": {
@@ -1761,7 +1871,7 @@
     "_id": "580tLaJFRPaYhXLsOp/Nxz"
   },
   {
-    "__type__": "cc.Label",
+    "__type__": "8154aeTa6xKYo/6cBryQ/EG",
     "_name": "",
     "_objFlags": 0,
     "node": {
@@ -1779,7 +1889,7 @@
       "b": 255,
       "a": 255
     },
-    "_string": "点我切换外层状态",
+    "_string": "点我切换外层状态2",
     "_horizontalAlign": 1,
     "_verticalAlign": 1,
     "_actualFontSize": 20,
@@ -1787,7 +1897,7 @@
     "_fontFamily": "Arial",
     "_lineHeight": 40,
     "_overflow": 0,
-    "_enableWrapText": false,
+    "_enableWrapText": true,
     "_font": null,
     "_isSystemFontUsed": true,
     "_spacingX": 0,
@@ -1796,7 +1906,8 @@
     "_isUnderline": false,
     "_underlineHeight": 2,
     "_cacheMode": 0,
-    "_id": "2dStRy2CdOfKSDyimgKLmU"
+    "customProp": "test2",
+    "_id": "c33L+0hhFOfZC6VvYXFguE"
   },
   {
     "__type__": "cc.UITransform",
@@ -2285,6 +2396,40 @@
     "_state": 1,
     "_records": {
       "0": [
+        {
+          "active": true,
+          "x": 0,
+          "y": 3,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "cc.UITransform": {
+            "enabled": true,
+            "width": 171.12,
+            "height": 50.4,
+            "anchorX": 0.5,
+            "anchorY": 0.5
+          },
+          "node": {
+            "__id__": 38
+          },
+          "CustomLabel": {
+            "enabled": true,
+            "customProp": "test1",
+            "color": "ffffff",
+            "string": "点我切换外层状态1",
+            "horizontalAlign": 1,
+            "verticalAlign": 1,
+            "fontSize": 20,
+            "fontFamily": "Arial",
+            "lineHeight": 40,
+            "overflow": 0,
+            "isBold": false,
+            "isItalic": false,
+            "isUnderline": false,
+            "underlineHeight": 2
+          }
+        },
         {
           "active": true,
           "x": 0,
@@ -2292,56 +2437,62 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 720,
             "height": 1560,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Sprite": {
+          "cc.Sprite": {
+            "enabled": true,
             "color": "ffffff",
             "spriteFrame": "475bdcef-71c8-422c-9ac0-76197650e12b@f9941",
             "grayscale": false,
             "sizeMode": 1,
             "type": 0,
-            "trim": true,
-            "enabled": true
+            "trim": true
           },
           "node": {
             "__id__": 5
           }
-        },
-        {
-          "active": true,
-          "x": 0,
-          "y": 382.95,
-          "angle": 0,
-          "scaleX": 1,
-          "scaleY": 1,
-          "UITransform": {
-            "width": 210,
-            "height": 50.4,
-            "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
-          },
-          "RichText": {
-            "string": "我是外层的背景",
-            "horizontalAlign": 0,
-            "verticalAlign": 0,
-            "fontSize": 30,
-            "fontFamily": "Arial",
-            "maxWidth": 0,
-            "lineHeight": 40,
-            "enabled": true
-          },
-          "node": {
-            "__id__": 6
-          }
         }
       ],
       "1": [
+        {
+          "active": true,
+          "x": 0,
+          "y": 3,
+          "angle": 0,
+          "scaleX": 1,
+          "scaleY": 1,
+          "cc.UITransform": {
+            "enabled": true,
+            "width": 171.12,
+            "height": 50.4,
+            "anchorX": 0.5,
+            "anchorY": 0.5
+          },
+          "node": {
+            "__id__": 38
+          },
+          "CustomLabel": {
+            "enabled": true,
+            "customProp": "test2",
+            "color": "ffffff",
+            "string": "点我切换外层状态2",
+            "horizontalAlign": 1,
+            "verticalAlign": 1,
+            "fontSize": 20,
+            "fontFamily": "Arial",
+            "lineHeight": 40,
+            "overflow": 0,
+            "isBold": false,
+            "isItalic": false,
+            "isUnderline": false,
+            "underlineHeight": 2
+          }
+        },
         {
           "node": {
             "__id__": 5
@@ -2352,49 +2503,21 @@
           "angle": 0,
           "scaleX": 1,
           "scaleY": 1,
-          "UITransform": {
+          "cc.UITransform": {
+            "enabled": true,
             "width": 720,
             "height": 1560,
             "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
+            "anchorY": 0.5
           },
-          "Sprite": {
+          "cc.Sprite": {
+            "enabled": true,
             "color": "ffffff",
             "spriteFrame": "bde4de98-18d7-47fa-ae16-b5c0651b5ab3@f9941",
             "grayscale": false,
             "sizeMode": 1,
             "type": 0,
-            "trim": true,
-            "enabled": true
-          }
-        },
-        {
-          "node": {
-            "__id__": 6
-          },
-          "active": true,
-          "x": 0,
-          "y": 382.95,
-          "angle": 0,
-          "scaleX": 1,
-          "scaleY": 1,
-          "UITransform": {
-            "width": 180,
-            "height": 50.4,
-            "anchorX": 0.5,
-            "anchorY": 0.5,
-            "enabled": true
-          },
-          "RichText": {
-            "string": "<color=#ff0000>五</color><color=#00ff00>彩</color><color=#0000ff>斑</color><color=#f700f5>斓</color><color=#f6f600>的</color><color=#0fffff>黑</color>",
-            "horizontalAlign": 0,
-            "verticalAlign": 0,
-            "fontSize": 30,
-            "fontFamily": "Arial",
-            "maxWidth": 0,
-            "lineHeight": 40,
-            "enabled": true
+            "trim": true
           }
         }
       ]
diff --git a/assets/scene/scene-2d.scene b/assets/scene/scene-2d.scene
new file mode 100644
index 0000000..e011c72
--- /dev/null
+++ b/assets/scene/scene-2d.scene
@@ -0,0 +1,370 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "scene-2d",
+    "_objFlags": 0,
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "scene-2d",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": null,
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 8
+    },
+    "_id": "c77ecaa8-c936-46c4-a5b0-98692673ed87"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 5
+      },
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 480,
+      "y": 320.00000000000006,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 10,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 9
+    },
+    "shadows": {
+      "__id__": 10
+    },
+    "_skybox": {
+      "__id__": 11
+    },
+    "fog": {
+      "__id__": 12
+    },
+    "octree": {
+      "__id__": 13
+    }
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  }
+]
\ No newline at end of file
diff --git a/assets/scene/scene-2d.scene.meta b/assets/scene/scene-2d.scene.meta
new file mode 100644
index 0000000..655ab5c
--- /dev/null
+++ b/assets/scene/scene-2d.scene.meta
@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.43",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "baf162cd-abd4-45af-982a-9891aff69e7a",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/assets/script/component/CustomLabel.ts b/assets/script/component/CustomLabel.ts
new file mode 100644
index 0000000..801c61e
--- /dev/null
+++ b/assets/script/component/CustomLabel.ts
@@ -0,0 +1,9 @@
+import { Label, _decorator } from "cc";
+
+const { ccclass, property } = _decorator;
+
+@ccclass
+export class CustomLabel extends Label{
+    @property
+    customProp:string = "test";
+}
\ No newline at end of file
diff --git a/assets/script/component/CustomLabel.ts.meta b/assets/script/component/CustomLabel.ts.meta
new file mode 100644
index 0000000..5139d69
--- /dev/null
+++ b/assets/script/component/CustomLabel.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "8154a793-6bac-4a62-8ffa-701af243f106",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/assets/script/component/UIState.ts b/assets/script/component/UIState.ts
index b9c3665..99250e2 100644
--- a/assets/script/component/UIState.ts
+++ b/assets/script/component/UIState.ts
@@ -14,7 +14,7 @@ import {
     Enum,
     Label,
     Node,
-    RichText, Sprite, SpriteFrame, UIRenderer,
+    RichText, Sprite, SpriteFrame,
     Widget,
     _decorator, assetManager
 } from "cc";
@@ -30,15 +30,15 @@ enum States {
  * 会记录的组件及其属性
  */
 const COMP_ATTR_RECORD = <const>{
-    "UITransform": ["width", "height", "anchorX", "anchorY"],
-    "Widget": ["isAlignBottom", "isAlignTop", "isAlignLeft", "isAlignRight", "isAlignVerticalCenter", "isAlignHorizontalCenter", 
+    "cc.UITransform": ["width", "height", "anchorX", "anchorY"],
+    "cc.Widget": ["isAlignBottom", "isAlignTop", "isAlignLeft", "isAlignRight", "isAlignVerticalCenter", "isAlignHorizontalCenter", 
                 "isAbsoluteTop", "isAbsoluteBottom", "isAbsoluteLeft", "isAbsoluteRight", "isAbsoluteHorizontalCenter", "isAbsoluteVerticalCenter",
                 "left", "right", "top", "bottom", "horizontalCenter", "verticalCenter", "alignMode", "alignFlags"],
-    "UIOpacity": ["opacity"],
-    "UIRenderer": ["color"],
-    "Label": ["color", "string", "horizontalAlign", "verticalAlign", "fontSize", "fontFamily", "lineHeight", "overflow", "isBold", "isItalic", "isUnderline", "underlineHeight"],
-    "RichText": ["string", "horizontalAlign", "verticalAlign", "fontSize", "fontFamily", "maxWidth", "lineHeight"],
-    "Sprite": ["color", "spriteFrame", "grayscale", "sizeMode", "type", "trim"]
+    "cc.UIOpacity": ["opacity"],
+    "cc.Label": ["color", "string", "horizontalAlign", "verticalAlign", "fontSize", "fontFamily", "lineHeight", "overflow", "isBold", "isItalic", "isUnderline", "underlineHeight"],
+    "cc.RichText": ["string", "horizontalAlign", "verticalAlign", "fontSize", "fontFamily", "maxWidth", "lineHeight"],
+    "cc.Sprite": ["color", "spriteFrame", "grayscale", "sizeMode", "type", "trim"],
+    "CustomLabel": ["customProp"]
 }
 
 type KEY_OF_COMP_ATTR_RECORD = keyof typeof COMP_ATTR_RECORD;
@@ -124,7 +124,6 @@ export default class UIState extends Component {
         if (REAL_EDITOR) {
             this.walkNode(this.node, child => {
                 this.recordBeforeStateChange(child);
-                // this.removeListener(child);
             });
         }
         
@@ -202,11 +201,6 @@ export default class UIState extends Component {
         CCClass.Attr.setClassAttr(this, "state", "enumList", enumList);
     }
 
-    onDestroy() {
-        if (REAL_EDITOR) this.saveCurrentState();
-        
-    }
-
     /**
      * 保存当前状态
      */
@@ -246,60 +240,50 @@ export default class UIState extends Component {
             }
 
             if (node === this.node) continue;
-            node.active = record.active!;
             node.angle = record.angle;
             node.setScale(record.scaleX, record.scaleY);
 
-            // 在编辑器模式下设置属性会有额外的操作，比如很多组件的属性都会影响 Widget 的属性
-            // 为了避免异常，先从节点树移除
-            let temp:Node;
-            let tempSiblingIndex:number;
-            if (REAL_EDITOR){
-                tempSiblingIndex = node.getSiblingIndex();
-                temp = node.parent;
-                node.parent = null;
-            }
-            Object.keys(COMP_ATTR_RECORD).forEach(compName=>{
-                const comp = node.getComponent(`cc.${compName}`);
-                if (comp){
-                    const recordCompAttr = record[compName as keyof RecordProps];
-                    if (recordCompAttr) {
-                        switch(compName){
-                            case "Label":
-                                Object.keys(recordCompAttr).forEach(attr => {
-                                    this.applyLabelAttr(attr, comp as Label, recordCompAttr);
-                                });
-                                break;
-                            case "Sprite":
-                                Object.keys(recordCompAttr).forEach(attr => {
-                                    this.applySpriteAttr(attr, comp as Sprite, recordCompAttr);
-                                });
-                                break;
-                            case "UIRenderer":
-                                Object.keys(recordCompAttr).forEach(attr => {
-                                    this.applyUIRendererAttr(attr, comp as UIRenderer, recordCompAttr);
-                                });
-                                break;
-                            case "Widget":
-                                Object.assign(comp, recordCompAttr);
-                                break;
-                            default:
-                                Object.assign(comp, recordCompAttr);
-                                break;
-                        }
+            node.components.forEach(comp=>{
+                const compName = (comp as any).__proto__.__classname__ as keyof KEY_OF_COMP_ATTR_RECORD;
+                const recordCompAttr = record[compName as keyof RecordProps];
+
+                if (!recordCompAttr) return;
+
+                const registerComps = this.getNeedRecordComps(comp);
+
+                if (!registerComps.length) return;
+
+                registerComps.forEach(compName=>{
+                    let compAttrs:string[] = COMP_ATTR_RECORD[compName];
+                    switch(compName){
+                        case "cc.Label":
+                            Object.values(compAttrs).forEach(attr => {
+                                this.applyLabelAttr(attr, comp as Label, recordCompAttr);
+                            });
+                            break;
+                        case "cc.Sprite":
+                            Object.values(compAttrs).forEach(attr => {
+                                this.applySpriteAttr(attr, comp as Sprite, recordCompAttr);
+                            });
+                            break;
+                        default:
+                            Object.values(compAttrs).forEach(attr => {
+                                comp[attr] = recordCompAttr[attr];
+                            });
+                            break;
                     }
-                }
+                });
+                if (record[(comp as any).__proto__.__classname__])
+                    comp.enabled = record[(comp as any).__proto__.__classname__].enabled;
             });
-            if (REAL_EDITOR){
-                temp.insertChild(node, tempSiblingIndex);
-            }
+            node.active = record.active!;
 
             // 应用组件启用状态
             node.components.forEach((comp, index) => {
-                const compName = (comp as any).__proto__.constructor.name as keyof RecordProps;
+                const compName = (comp as any).__proto__.__classname__ as keyof RecordProps;
                 const recordCompAttr = record[compName];
                 // 没有记录且没在 COMP_ATTR_RECORD 中表明是在其他状态新增的组件,那么在当前状态就需要禁用
-                if(!recordCompAttr && COMP_ATTR_RECORD[compName as KEY_OF_COMP_ATTR_RECORD]){
+                if(!recordCompAttr && this.isNeedRecordComp(comp)){
                     comp.enabled = false;
                 }
             });
@@ -341,31 +325,38 @@ export default class UIState extends Component {
         
         // 记录组件启用状态
         node.components.forEach(comp => {
-            const compName = (comp as any).__proto__.constructor.name as KEY_OF_COMP_ATTR_RECORD;
-            if (COMP_ATTR_RECORD[compName]){
-                const compAttrs = COMP_ATTR_RECORD[compName].slice();
-                // 记录组件的 enabled 
-                compAttrs.push("enabled" as never);
-                const recordCompAttr:any = {};
-                record![compName] = recordCompAttr;
-                switch(compName){
-                    case "Label":
-                        compAttrs.forEach(attr => {
-                            this.recordLabelAttr(attr, comp as Label, recordCompAttr);
-                        });
-                        break;
-                    case "Sprite":
-                        compAttrs.forEach(attr => {
-                            this.recordSpriteAttr(attr, comp as Sprite, recordCompAttr);
-                        });
-                        break;
-                    default:
-                        compAttrs.forEach(attr => {
-                            recordCompAttr[attr] = comp[attr as keyof typeof comp];
-                        });
-                        break;
+            const registerComps = this.getNeedRecordComps(comp);
+            let recordCompAttr:any;
+            if (!registerComps.length)
+                return;
+
+            recordCompAttr = {
+                enabled: comp.enabled
+            };
+            record[(comp as any).__proto__.__classname__] = recordCompAttr;
+            
+            registerComps.forEach(compName=>{
+                let compAttrs = COMP_ATTR_RECORD[compName];
+                if (compAttrs){
+                    switch(compName){
+                        case "cc.Label":
+                            compAttrs.forEach(attr => {
+                                this.recordLabelAttr(attr, comp as Label, recordCompAttr);
+                            });
+                            break;
+                        case "cc.Sprite":
+                            compAttrs.forEach(attr => {
+                                this.recordSpriteAttr(attr, comp as Sprite, recordCompAttr);
+                            });
+                            break;
+                        default:
+                            compAttrs.forEach(attr => {
+                                recordCompAttr[attr] = comp[attr as keyof typeof comp];
+                            });
+                            break;
+                    }
                 }
-            }
+            });
         });
 
         return record;
@@ -440,18 +431,6 @@ export default class UIState extends Component {
         }
     }
 
-    private applyUIRendererAttr(attr:string, comp:UIRenderer, recordCompAttr:any){
-        switch(attr){
-            case "color":
-                comp.color.fromHEX(recordCompAttr[attr]);
-                (comp as any)["_updateColor"]();
-                break;
-            default:
-                (comp as any)[attr] = recordCompAttr[attr];
-                break;
-        }
-    }
-
     /** 
      * 保存状态
      * 新增的节点不需要处理
@@ -472,7 +451,7 @@ export default class UIState extends Component {
         let record = this._uuidRecordMap?.get(node.uuid);
         // 清理已经删除的组件
         Object.keys(COMP_ATTR_RECORD).some(compName=>{
-            if (node.getComponent(`cc.${compName}`)) return false;
+            if (node.getComponent(compName)) return false;
 
             if (defaultNodeState[compName as keyof RecordProps]){
                 isModify = true;
@@ -499,12 +478,10 @@ export default class UIState extends Component {
         if (!isModify)
             // 检查节点是否有增加或修改
             isModify = node.components.some(component =>{
-                const compName = (component as any).__proto__.constructor.name as keyof RecordProps;
-
                 // 不在 COMP_ATTR_RECORD 里的组件不记录
-                if (!COMP_ATTR_RECORD[compName as KEY_OF_COMP_ATTR_RECORD])
-                    return false;
+                if (!this.isNeedRecordComp(component)) return false;
 
+                const compName = (component as any).__proto__.__classname__ as keyof RecordProps;
                 // 新增的组件
                 if (!defaultNodeState[compName])
                     return true;
@@ -541,6 +518,41 @@ export default class UIState extends Component {
             }
         }
     }
+
+    /**
+     * 是否是需要记录的组件，继承自 COMP_ATTR_RECORD 列出的组件也算
+     * @param component 
+     * @returns 
+     */
+    private isNeedRecordComp(component: Component): boolean{
+        let isRegister = false;
+        let compProto = (component as any).__proto__;
+        while(compProto){
+            const compName = compProto.__classname__ as keyof KEY_OF_COMP_ATTR_RECORD;
+            if (COMP_ATTR_RECORD[compName]){
+                isRegister = true;
+                break;
+            }
+            compProto = compProto.__proto__;
+        }
+        return isRegister;
+    }
+
+    /**
+     * 获取需要记录的组件
+     * @param component 
+     * @returns 一个字符串数组，包含需要记录的组件
+     */
+    private getNeedRecordComps(component:Component):string[]{
+        const ret = [];
+        let compProto = (component as any).__proto__;
+        while(compProto){
+            const compName = compProto.__classname__ as keyof KEY_OF_COMP_ATTR_RECORD;
+            if (COMP_ATTR_RECORD[compName]) ret.push(compName);
+            compProto = compProto.__proto__;
+        }
+        return ret;
+    }
     
     /**
      * 遍历时包括拥有UIState的子节点