优化prop组件

source/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-watch": "vue-cli-service build --watch",
+    "lint": "vue-cli-service lint",
-    "lint": "vue-cli-service lint"
+    "build-watch": "vue-cli-service build --watch"
   },
   "dependencies": {
     "@types/fs-extra": "^9.0.9",
@@ -37,8 +37,8 @@
     "lint-staged": "^9.5.0",
     "prettier": "^2.2.1",
     "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11",
+    "vue-cli-plugin-browser-extension": "latest",
-    "vue-cli-plugin-browser-extension": "latest"
+    "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [
     "> 1%",

source/src/devtools/ccType/NodeBaseProperty.vue

@@ -19,7 +19,7 @@
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
-import {DataType} from "../data";
+import {DataType, testData} from "../data";
 
 @Component({
   components: {UiProp},
@@ -27,7 +27,7 @@ import {DataType} from "../data";
 export default class NodeBaseProperty extends Vue {
   name: string = "node-base"
 
-  @Prop()
+  @Prop({default: () => testData,})
   allGroup: Array<Record<string, any>> | undefined;
 
   onClickHeader(group) {
@@ -44,83 +44,11 @@ export default class NodeBaseProperty extends Vue {
   }
 
   created() {
-    this.setTestData()
     this.allGroup.forEach(item => {
       this.$set(item, 'fold', false);
     })
   }
 
-  setTestData() {
-    this.allGroup = [
-      {
-        name: "group1",
-        data: [
-          {name: "uuid", value: {type: DataType.String, data: 'abc'}},
-          {name: "opacity", value: {type: DataType.Number, data: 100}},
-
-          {
-            name: "size",
-            value: {
-              type: DataType.Vec2,
-              data: [
-                {name: "X", value: {type: DataType.Number, data: 100}},
-                {name: "Y", value: {type: DataType.Number, data: 200}},
-              ]
-            }
-          },
-          {
-            name: "position",
-            value: {
-              type: DataType.Vec3,
-              data: [
-                {name: "X", value: {type: DataType.Number, data: 100}},
-                {name: "Y", value: {type: DataType.Number, data: 200}},
-                {name: "Z", value: {type: DataType.Number, data: 300}},
-              ]
-            }
-          },
-          {
-            name: "layout",
-            value: {
-              type: DataType.Enum,
-              data: 1,
-              values: [
-                {name: "horizontal", value: 1},
-                {name: "vertical", value: 2},
-              ]
-            }
-          },
-          {
-            name: "text",
-            value: {
-              type: DataType.Text,
-              data: 'aaaaaaaaafsf',
-            }
-          }
-        ]
-      },
-      {
-        name: "group2",
-        data: [
-          {
-            name: "bool", value: {
-              type: DataType.Bool,
-              data: true,
-            }
-          },
-          {
-            name: 'color',
-            value: {
-              type: DataType.Color,
-              data: '#ff0000'
-            }
-          }
-        ]
-      },
-    ];
-
-  }
-
   changeSizeActionWidth(step: number) {
     let w = parseFloat(this.itemData.width);
     // this.itemData.width = w + step;

source/src/devtools/data.ts

@@ -0,0 +1,149 @@
+export enum DataType {
+  Number,
+  String,
+  Text,
+  Vec2,
+  Vec3,
+  Enum,
+  Bool,
+  Color,
+}
+
+class Info {
+  public type: DataType = DataType.Number;
+}
+
+export class TextData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.Text;
+  }
+}
+
+export class StringData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.String;
+  }
+}
+
+export class NumberData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.Number;
+  }
+
+}
+
+export class Vec2Data extends Info {
+  public v1: number = 0;
+  public v2: number = 0;
+
+  constructor(v1: number, v2: number) {
+    super();
+    this.type = DataType.Vec2
+    this.v1 = v1;
+    this.v2 = v2;
+  }
+}
+
+export class Vec3Data extends Info {
+  public v1: number = 0;
+  public v2: number = 0;
+  public v3: number = 0;
+
+  constructor(v1: number, v2: number, v3: number) {
+    super();
+    this.type = DataType.Vec3
+    this.v1 = v1;
+    this.v2 = v2;
+    this.v3 = v3;
+  }
+}
+
+export class EnumData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.Enum;
+  }
+
+}
+
+class NodeInfo {
+  public type: string = ''; // 类型
+
+
+}
+
+class CompInfo {
+
+}
+
+export const testData = [
+  {
+    name: "group1",
+    data: [
+      {name: "uuid", value: {type: DataType.String, data: 'abc'}},
+      {name: "opacity", value: {type: DataType.Number, data: 100}},
+
+      {
+        name: "size",
+        value: {
+          type: DataType.Vec2,
+          data: [
+            {name: "X", value: {type: DataType.Number, data: 100}},
+            {name: "Y", value: {type: DataType.Number, data: 200}},
+          ]
+        }
+      },
+      {
+        name: "position",
+        value: {
+          type: DataType.Vec3,
+          data: [
+            {name: "X", value: {type: DataType.Number, data: 100}},
+            {name: "Y", value: {type: DataType.Number, data: 200}},
+            {name: "Z", value: {type: DataType.Number, data: 300}},
+          ]
+        }
+      },
+      {
+        name: "layout",
+        value: {
+          type: DataType.Enum,
+          data: 1,
+          values: [
+            {name: "horizontal", value: 1},
+            {name: "vertical", value: 2},
+          ]
+        }
+      },
+      {
+        name: "text",
+        value: {
+          type: DataType.Text,
+          data: 'aaaaaaaaafsf',
+        }
+      }
+    ]
+  },
+  {
+    name: "group2",
+    data: [
+      {
+        name: "bool", value: {
+          type: DataType.Bool,
+          data: true,
+        }
+      },
+      {
+        name: 'color',
+        value: {
+          type: DataType.Color,
+          data: '#ff0000'
+        }
+      }
+    ]
+  },
+];
+

source/src/devtools/index.vue

@@ -28,13 +28,8 @@
         </div>
       </div>
       <div class="right">
-        <div class="  bg-purple-light treeInfo">
+        <NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
-          <NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
-          <SceneProperty v-show="treeItemData.type === 'cc_Scene'"></SceneProperty>
-          <ComponentsProperty components.sync="treeItemData.components"></ComponentsProperty>
-        </div>
       </div>
-
     </div>
     <div v-show="!isShowDebug" class="no-find">
       <span>未发现cocos creator的游戏!</span>
@@ -421,21 +416,9 @@ export default class Index extends Vue {
 
     .right {
       flex: 2;
+      background: #e5e9f2;
+      overflow: scroll;
     }
   }
 }
-
-
-.treeInfo {
-  height: 100%
-}
-
-.bg-purple {
-  background: #d3dce6;
-}
-
-
-.bg-purple-light {
-  background: #e5e9f2;
-}
 </style>