优化

source/src/devtools/ccType/NodeBaseProperty.vue

@@ -20,7 +20,6 @@ import Vue from "vue"
 
 import {Component, Prop, Watch} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
-import {DataType, testData} from "../data";
 
 @Component({
   components: {UiProp},
@@ -28,7 +27,7 @@ import {DataType, testData} from "../data";
 export default class NodeBaseProperty extends Vue {
   name: string = "node-base"
 
-  @Prop({default: () => testData,})
+  @Prop({default: () => [],})
   allGroup: Array<Record<string, any>> | undefined;
 
   onClickHeader(group: any) {

source/src/devtools/ccType/ui-prop.vue

@@ -4,7 +4,7 @@
       <div class="text">{{ name }}</div>
     </div>
     <div class="value">
-      <el-input v-if="isString()" v-model="value.data"></el-input>
+      <el-input v-if="isString()" v-model="value.data" @change="onChangeValue"></el-input>
       <el-input v-if="isText()"
                 type="textarea"
                 :autosize="{minRows:3,maxRows:5}"
@@ -118,7 +118,42 @@ export default class UiProp extends Vue {
   }
 
   onShowValueInConsole() {
-    console.log(this.value.data)
+    if (Array.isArray(this.value.path)) {
+      let uuid = this.value.path[0];
+      let key = this.value.path[1]; // todo 暂时只支持一级key
+      if (uuid && key) {
+        chrome.devtools.inspectedWindow.eval(`window.ccinspector.logValue('${uuid}','${key}')`)
+      }
+    }
+  }
+
+  onChangeValue() {
+    window.postMessage({a: 1, b: 2}, '*')
+    return
+    if (Array.isArray(this.value.path)) {
+      let uuid = this.value.path[0];
+      let key = this.value.path[1]; // todo 暂时只支持一级key
+      if (uuid && key && this.value.hasOwnProperty('data')) {
+        let cmd = null;
+        let data = this.value.data;
+        switch (this.value.type) {
+          case DataType.Number:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', ${data})`;
+            break
+          case DataType.Bool:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', ${data})`;
+            break;
+          case DataType.String:
+          case DataType.Text:
+            cmd = `window.ccinspector.setValue('${uuid}','${key}', '${data}')`;
+            break
+        }
+        if (cmd) {
+          chrome.devtools.inspectedWindow.eval(cmd)
+        } else {
+        }
+      }
+    }
   }
 
   @Prop({default: 1})
@@ -183,6 +218,7 @@ export default class UiProp extends Vue {
     display: flex;
     flex-direction: row;
     align-items: center;
+    min-width: 90px;
 
     .text {
       user-select: none;
@@ -197,6 +233,7 @@ export default class UiProp extends Vue {
     text-align: left;
     height: 100%;
     overflow: hidden;
+    min-width: 400px;
 
     .color {
       position: relative;
@@ -221,6 +258,14 @@ export default class UiProp extends Vue {
         margin-top: 0;
         margin-bottom: 0;
         margin-right: 20px;
+
+        .value {
+          min-width: 100px;
+        }
+
+        .key {
+          min-width: 20px;
+        }
       }
 
       #ui-prop:last-child {
@@ -229,7 +274,7 @@ export default class UiProp extends Vue {
     }
 
     .array-object {
-      flex:1;
+      flex: 1;
       max-width: 100%;
       overflow: hidden;
       display: flex;
@@ -237,7 +282,7 @@ export default class UiProp extends Vue {
       align-items: center;
 
       .text {
-        flex:1;
+        flex: 1;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

source/src/devtools/data.ts

@@ -15,6 +15,7 @@ export enum DataType {
 class Info {
   public type: DataType = DataType.Number;
   public data: any;
+  public path: Array<string> = [];// 属性对应的路径
 }
 
 export class TextData extends Info {
@@ -151,8 +152,9 @@ class CompInfo {
 export const testData = [
   {
     name: "group1",
+    uuid: 'node/comp uuid',
     data: [
-      {name: "uuid", value: {type: DataType.String, data: 'abc'}},
+      {name: "uuid", value: {type: DataType.String, data: 'abc', path: 'uuid'}},
       {name: "opacity", value: {type: DataType.Number, data: 100}},
 
       {

source/src/devtools/global.less

@@ -11,3 +11,8 @@
     }
   }
 }
+.el-input{
+  input{
+    text-align: left !important;
+  }
+}

source/src/devtools/index.vue

@@ -37,9 +37,6 @@
 </template>
 
 <script lang="ts">
-// import injectScript from '../injectScript.js'
-// import EvalCode from "./evalCodeString.js";
-
 import Vue from "vue";
 import {Component, Prop} from "vue-property-decorator";
 import SceneProperty from "@/devtools/ccType/SceneProperty.vue";
@@ -54,7 +51,7 @@ const PluginMsg = require("../core/plugin-msg");
   }
 })
 export default class Index extends Vue {
-  private isShowDebug: boolean = true;
+  private isShowDebug: boolean = false;
   treeItemData: Array<Record<string, any>> = [];
   treeData: Array<Record<string, any>> = []
   bgConn: chrome.runtime.Port | null = null// 与background.js的链接
@@ -213,6 +210,7 @@ export default class Index extends Vue {
     display: flex;
     flex: 1;
     flex-direction: row;
+    overflow: hidden;
 
     .left {
       display: flex;
@@ -230,7 +228,7 @@ export default class Index extends Vue {
         height: 100%;
         border-radius: 4px;
         min-height: 20px;
-        overflow: scroll;
+        overflow: auto;
         width: 300px;
 
 
@@ -251,7 +249,19 @@ export default class Index extends Vue {
     .right {
       flex: 1;
       background: #e5e9f2;
-      overflow: scroll;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 0;
+        background: #999;
+        border-radius: 2px;
+        height: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #333;
+        border-radius: 2px;
+      }
     }
   }
 }