Merge branch 'master' of github.com:tidys/cc-inspector-chrome

 Conflicts:

	source/vue.config.js

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/plugins/copy.js

@@ -0,0 +1,31 @@
+const Fs = require("fs");
+const Path = require("path");
+const FsExtra = require("fs-extra");
+
+class Copy {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.plugin("done", (compilation, callback) => {
+      const cfg = this.options;
+      if (cfg && cfg.length > 0) {
+        cfg.forEach(({src, dest}) => {
+          let fullSrc = Path.join(compilation.compilation.options.context, src);
+          if (Fs.existsSync(fullSrc)) {
+            let distPath = compilation.compilation.options.output.path;
+            let outFile = Path.join(distPath, dest);
+            FsExtra.ensureFileSync(outFile);
+            FsExtra.copyFileSync(fullSrc, outFile);
+          } else {
+            console.error(`manifest文件不存在：${src}`);
+          }
+        });
+      }
+    });
+
+  }
+}
+
+module.exports = Copy;

source/src/content.ts

@@ -1 +1,58 @@
 console.log('content code')
+// 具有操作dom的能力
+// 加载其他脚本
+// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式
+import * as PluginMsg from './core/plugin-msg'
+
+function injectScriptToPage(url) {
+  let content = chrome.extension.getURL(url)
+  console.log(`[cc-inspector]注入脚本:${content}`);
+  let script = document.createElement('script')
+  script.setAttribute('type', 'text/javascript')
+  script.setAttribute('src', content)
+  script.onload = function () {
+    // 注入脚本执行完后移除掉
+    this.parentNode.removeChild(this);
+  }
+  document.body.appendChild(script)
+}
+debugger
+injectScriptToPage("js/inject.js");
+
+// 和background.js保持长连接通讯
+let conn = chrome.runtime.connect({name: PluginMsg.Page.Content})
+// conn.postMessage('test');
+conn.onMessage.addListener(function (data) {
+  // 将background.js的消息返回到injection.js
+  window.postMessage(data, "*");
+})
+// 接受来自inject.js的消息数据,然后中转到background.js
+window.addEventListener('message', function (event) {
+  let data = event.data;
+  if (data.data.log) {
+  }
+  console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19");
+  chrome.runtime.sendMessage(data);
+}, false);
+
+
+let gameCanvas = document.querySelector("#GameCanvas");
+if (gameCanvas) {
+  // console.log('find GameCanvas element');
+  // gameCanvas.addEventListener('click', function () {
+  //   console.log("click canvas");
+  // });
+  // gameCanvas.style.display = 'none';
+} else {
+  // console.log("can't find GameCanvas element");
+  // 和background.js保持短连接通讯
+  chrome.runtime.sendMessage({
+    msg: PluginMsg.Msg.Support,
+    data: {
+      support: false,
+      msg: "未发现GameCanvas,不支持调试游戏!"
+    }
+  }, function (data) {
+    // console.log(data)
+  });
+}

source/src/core/content.js

@@ -1,57 +0,0 @@
-// 具有操作dom的能力
-// 加载其他脚本
-// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式
-const PluginMsg = require("../core/plugin-msg");
-
-function injectScriptToPage(url) {
-  let content = chrome.extension.getURL(url)
-  console.log(`[cc-inspector]注入脚本:${content}`);
-  let script = document.createElement('script')
-  script.setAttribute('type', 'text/javascript')
-  script.setAttribute('src', content)
-  script.onload = function () {
-    // 注入脚本执行完后移除掉
-    this.parentNode.removeChild(this);
-  }
-  document.body.appendChild(script)
-}
-
-injectScriptToPage("js/inject.js");
-
-// 和background.js保持长连接通讯
-let conn = chrome.runtime.connect({name: PluginMsg.Page.Content})
-// conn.postMessage('test');
-conn.onMessage.addListener(function (data) {
-  // 将background.js的消息返回到injection.js
-  window.postMessage(data, "*");
-})
-// 接受来自inject.js的消息数据,然后中转到background.js
-window.addEventListener('message', function (event) {
-  let data = event.data;
-  if (data.data.log) {
-  }
-  console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19");
-  chrome.runtime.sendMessage(data);
-}, false);
-
-
-let gameCanvas = document.querySelector("#GameCanvas");
-if (gameCanvas) {
-  // console.log('find GameCanvas element');
-  // gameCanvas.addEventListener('click', function () {
-  //   console.log("click canvas");
-  // });
-  // gameCanvas.style.display = 'none';
-} else {
-  // console.log("can't find GameCanvas element");
-  // 和background.js保持短连接通讯
-  chrome.runtime.sendMessage({
-    msg: PluginMsg.Msg.Support,
-    data: {
-      support: false,
-      msg: "未发现GameCanvas,不支持调试游戏!"
-    }
-  }, function (data) {
-    // console.log(data)
-  });
-}

source/src/core/event-mgr.js

@@ -1,7 +0,0 @@
-// const PluginMsg = require("./plugin-msg");
-// module.exports = {
-//   id: "event-mgr",
-//   testInit(name) {
-//     chrome.runtime.connect({name: name})
-//   }
-// }

source/src/core/event.js

@@ -1,3 +0,0 @@
-module.exports = {
-  id: "event-id",
-}

source/src/core/page.ejs

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html style="width: 100%;height: 100%;">
-<head>
-  <meta charset="utf-8">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-</head>
-<body style="width: 100%;height: 100%;">
-<div id="app" style="width: 100%;height: 100%;"></div>
-</body>
-</html>

source/src/core/tools.js

@@ -1,17 +0,0 @@
-const path = require('path')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-module.exports = {
-  htmlPage(title, filename, chunks, template) {
-    return new HtmlWebpackPlugin({
-      title: title,
-      hash: true,
-      cache: true,
-      inject: 'body',
-      filename: './pages/' + filename + '.html',
-      template: template || path.resolve(__dirname, './page.ejs'),
-      appMountId: 'app',
-      chunks: chunks
-    });
-  }
-}

source/src/devtools/ccType/NodeBaseProperty.vue

@@ -1,150 +1,25 @@
 <template>
-  <div id="app">
-    <div>
-      <ui-prop name="uuid">
-        <span> {{ itemData.uuid }}</span>
-      </ui-prop>
-      <ui-prop name="name">
-        <span> {{ itemData.name }}</span>
-      </ui-prop>
-      <!--坐标-->
-      <ui-prop name="Position">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"
-                   @movestep="changePositionActionX"
-                   step="10">
-            <!--<span>{{itemData.x}}</span>-->
-            <input class="myInput"
-                   @change="changePosition"
-                   placeholder="itemData.x"
-                   v-model="itemData.x">
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
-                   @movestep="changePositionActionY"
-                   step="10">
-            <!--<span>{{itemData.y}}</span>-->
-            <input class="myInput"
-                   @change="changePosition"
-                   placeholder="itemData.y"
-                   v-model="itemData.y">
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--旋转-->
-      <!--rotationX, rotationY暂时舍弃显示-->
-      <ui-prop name="Rotation">
-        <span> {{ itemData.rotation }}</span>
-        <!--<input class="myInput"-->
-        <!--@change="changeRotation"-->
-        <!--placeholder="itemData.rotation"-->
-        <!--v-model="itemData.rotation"-->
-        <!--style="width: 98%">-->
-      </ui-prop>
-      <!--缩放-->
-      <ui-prop name="Scale">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.scaleX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.scaleY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--锚点-->
-      <ui-prop name="Anchor">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.anchorX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.anchorY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--尺寸-->
-      <ui-prop name="Size">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
-                   @movestep="changeSizeActionWidth"
-                   step="10">
-            <!--<span>{{itemData.width}}</span>-->
-            <input class="myInput"
-                   @change="changeSize"
-                   placeholder="itemData.width"
-                   v-model="itemData.width">
-          </ui-prop>
-          <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
-                   @movestep="changeSizeActionHeight"
-                   step="10">
-            <!--<span>{{itemData.height}}</span>-->
-            <input class="myInput"
-                   @change="changeSize"
-                   placeholder="itemData.height"
-                   v-model="itemData.height">
-          </ui-prop>
-        </div>
-      </ui-prop>
-      <!--透明度-->
-      <ui-prop name="Opacity">
-        <span>{{ itemData.opacity }}</span>
-      </ui-prop>
-      <!--斜切-->
-      <ui-prop name="Skew">
-        <div style="float: left;width: 100%;">
-          <ui-prop name="X" style="width: 50%;float: left;">
-            <span>{{ itemData.skewX }}</span>
-          </ui-prop>
-          <ui-prop name="Y" style="width: 50%;float:left;">
-            <span>{{ itemData.skewY }}</span>
-          </ui-prop>
-        </div>
-      </ui-prop>
-    </div>
-    <ui-prop name="zIndex">
-      <span>{{ itemData.zIndex }}</span>
-    </ui-prop>
-    <ui-prop name="childrenCount">
-      <span>{{ itemData.childrenCount }}</span>
-    </ui-prop>
-    <!--节点状态-->
-    <ui-prop name="active">
-      <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
-        <input type="checkbox"
-               style="width: 20px;height: 20px;"
-               :checked.sync="itemData.active"
-               @click="onBtnClickNodeHide">
-        隐藏节点
-      </p>
-
-      <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
-        <input type="checkbox"
-               style="width: 20px;height: 20px;"
-               :checked="itemData.active"
-               @click="onBtnClickNodeShow"
-        >
-        显示节点
-      </p>
-    </ui-prop>
-    <!--颜色-->
-    <ui-prop name="color">
-      <div style="display: flex;flex-direction: row;justify-content: center;">
-        <div style="display: flex;flex:1;">
-
-          <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"
-                           @change="changeColor"></el-color-picker>
-        </div>
-        <span style="width: 60px;">{{ itemData.color }}</span>
-
+  <div id="prop">
+    <div v-for="(group, index) in allGroup" :key="index" class="group">
+      <div class="header" @click="onClickHeader(group)">
+        <i v-if="group.fold" class="el-icon-caret-right"></i>
+        <i v-if="!group.fold" class="el-icon-caret-bottom"></i>
+        {{ group.name }}
       </div>
-    </ui-prop>
+      <div class="content" v-show="!group.fold">
+        <ui-prop v-for="(item, index) in group.data" :key="index"
+                 :name="item.name" :value="item.value">
+        </ui-prop>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue"
-import {Component, Prop, Emit} from "vue-property-decorator"
+import {Component, Prop} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
+import {DataType, testData} from "../data";
 
 @Component({
   components: {UiProp},
@@ -152,6 +27,15 @@ import UiProp from "./ui-prop.vue"
 export default class NodeBaseProperty extends Vue {
   name: string = "node-base"
 
+  @Prop({default: () => testData,})
+  allGroup: Array<Record<string, any>> | undefined;
+
+  onClickHeader(group: any) {
+    if (group && group.hasOwnProperty('fold')) {
+      group.fold = !group.fold;
+    }
+  }
+
   @Prop({default: "label"})
   private label?: string | undefined
 
@@ -159,14 +43,14 @@ export default class NodeBaseProperty extends Vue {
   private itemData: any;
 
   setup() {
-    // computed({
-    //   get: () => {
-    //
-    //   }
-    // })
   }
 
   created() {
+    if (this.allGroup) {
+      this.allGroup.forEach(item => {
+        this.$set(item, 'fold', false);
+      })
+    }
   }
 
   changeSizeActionWidth(step: number) {
@@ -198,8 +82,6 @@ export default class NodeBaseProperty extends Vue {
 
 
   changePosition() {
-    // console.log("change changePositionX:" + this.itemData.x);
-    // console.log("change changePositionY:" + this.itemData.y);
     this._evalCode(
         "window.ccinspector.pluginSetNodePosition(" +
         "'" + this.itemData.uuid + "'," +
@@ -211,8 +93,6 @@ export default class NodeBaseProperty extends Vue {
 
 
   changeSize() {
-    // console.log("change width:" + this.itemData.width);
-    // console.log("change height:" + this.itemData.height);
     this._evalCode(
         "window.ccinspector.pluginSetNodeSize(" +
         "'" + this.itemData.uuid + "'," +
@@ -283,36 +163,26 @@ export default class NodeBaseProperty extends Vue {
 }
 </script>
 
-<style scoped>
-span {
-  color: #fd942b;
-}
+<style scoped lang="less">
+#prop {
+  .group {
+    .header {
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      user-select: none;
+      cursor: pointer;
+      border-bottom: 1px #6d6d6d solid;
+    }
 
-.btnSize {
-  padding: 5px 10px;
-}
+    .header:hover {
+      color: #6d6d6d;
+    }
 
-.comp {
-  border: 2px solid #a1a1a1;
-  padding: 5px 5px;
-  background: #dddddd;
-  width: 100%;
-  border-radius: 5px;
-  -moz-border-radius: 5px; /* 老的 Firefox */
-}
-
-.float-left {
-  float: left;
-}
-
-.compBorder {
-  border: 1px solid #b3b3b3;
-  background: #ffffff
-}
-
-.myInput {
-  width: 90%;
-  border-radius: 5px;
-  color: #fd942b;
+    .content {
+      padding: 0 5px;
+    }
+  }
 }
 </style>

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

@@ -1,16 +1,45 @@
 <template>
-  <div id="app" style="height: 30px;overflow: hidden;width: 100%;">
-    <div style="width: 20%;float: left;background-color: #4a4a4a;text-align: left;"
-         @mousedown="changePositionMouseAction"
-         onselectstart="return false;"
-         class="noselect">
-      <span onselectstart="return false;" class="noselect font"
-            style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
-        {{ name }}
-      </span>
+  <div id="ui-prop">
+    <div @mousedown="onPropNameMouseDown" class="key">
+      <div class="text">{{ name }}</div>
     </div>
-    <div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
-      <div style="line-height: 30px;height: 100%;">
+    <div class="value">
+      <el-input v-if="isString()" v-model="value.data"></el-input>
+      <el-input v-if="isText()"
+                type="textarea"
+                :autosize="{minRows:3,maxRows:5}"
+                placeholder="请输入内容"
+
+                v-model="value.data">
+      </el-input>
+      <el-input-number v-if="isNumber()"
+                       style="width: 100%;text-align: left"
+                       v-model="value.data"
+                       :step="step"
+                       controls-position="right"
+      ></el-input-number>
+
+      <div v-if="isVec2()||isVec3()" class="vec">
+        <ui-prop v-for="(vec, index) in value.data"
+                 :key="index"
+                 :value="vec.value"
+                 :name="vec.name">
+
+        </ui-prop>
+      </div>
+      <el-select v-model="value.data" v-if="isEnum()" style="width: 100%;">
+        <el-option v-for="(opt, index) in value.values"
+                   :key="index"
+                   :label="opt.name"
+                   :value="opt.value">
+        </el-option>
+      </el-select>
+      <el-checkbox v-model="value.data" v-if="isBool()"></el-checkbox>
+      <div class="color" v-if="isColor()">
+        <el-color-picker style="position: absolute;" v-model="value.data"></el-color-picker>
+        <div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
+      </div>
+      <div class="slot">
         <slot></slot>
       </div>
     </div>
@@ -18,25 +47,75 @@
 </template>
 
 <script lang="ts">
+
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
+import {DataType} from '../data'
 
-@Component({})
+@Component({
+  components: {}
+})
 export default class UiProp extends Vue {
   @Prop({default: ""})
   name: string | undefined;
 
+
+  @Prop()
+  value: Record<string, any> | undefined | any;
+
+  isString() {
+    return this.value && (this.value.type === DataType.String);
+  }
+
+  isText() {
+    return this.value && (this.value.type === DataType.Text);
+  }
+
+  isNumber() {
+    return this.value && (this.value.type === DataType.Number);
+  }
+
+  isVec2() {
+    return this.value && (this.value.type === DataType.Vec2);
+  }
+
+  isVec3() {
+    return this.value && (this.value.type === DataType.Vec3);
+  }
+
+  isEnum() {
+    return this.value && (this.value.type === DataType.Enum);
+  }
+
+  isBool() {
+    return this.value && (this.value.type === DataType.Bool);
+  }
+
+  isColor() {
+    return this.value && (this.value.type === DataType.Color);
+  }
+
+  created() {
+  }
+
   @Prop({default: 1})
   step: number | undefined;
 
+
   clientX: number = 0;
 
-  changePositionMouseAction(event: MouseEvent) {
+  onPropNameMouseDown(event: MouseEvent) {
     document.addEventListener("mousemove", this._onMouseMove);
     document.addEventListener("mouseup", this._onMouseUp);
     document.addEventListener("onselectstart", this._onSelect);
   }
 
+  colorReverse(OldColorValue: string) {
+    OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
+    var str = "000000" + (0xFFFFFF - OldColorValue).toString(16);
+    return '#' + str.substring(str.length - 6, str.length);
+  }
+
   _onSelect() {
     return false;
   }
@@ -63,19 +142,72 @@ export default class UiProp extends Vue {
 };
 </script>
 
-<style scoped>
-.font {
-  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
-}
+<style scoped lang="less">
+#ui-prop {
+  margin: 0;
+  min-height: 30px;
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  -khtml-user-select: none; /* Konqueror */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
-  /* Non-prefixed version, currently
- not supported by any browser */
+
+  .key {
+    flex: 1;
+    float: left;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .text {
+      user-select: none;
+      line-height: 30px;
+      font-size: 12px;
+      margin: 3px;
+    }
+  }
+
+  .value {
+    flex: 3;
+    text-align: left;
+    height: 100%;
+
+    .color {
+      position: relative;
+      height: 30px;
+
+      .hex {
+        line-height: 30px;
+        position: relative;
+        text-align: center;
+        user-select: none;
+        pointer-events: none;
+      }
+    }
+
+    .vec {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      #ui-prop {
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-right: 20px;
+      }
+
+      #ui-prop:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .slot {
+      display: flex;
+      width: 100%;
+    }
+  }
 }
 </style>

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/global.less

@@ -0,0 +1,13 @@
+.el-color-picker--mini {
+  width: 100% !important;
+
+  .el-color-picker__trigger {
+    width: 100% !important;
+    height: 30px !important;
+    padding: 0;
+
+    .el-color-picker__icon {
+      display: none;
+    }
+  }
+}

source/src/devtools/index.ts

@@ -1,9 +1,9 @@
 import Vue from "vue";
 import ElementUI from "element-ui"
 import "element-ui/lib/theme-chalk/index.css"
+import "./global.less"
 import index from "./index.vue";
 import './register-panel';
-
 Vue.use(ElementUI, {size: "mini"});
 new Vue({
   el: "#app",

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>
-          <SceneProperty v-show="treeItemData.type === 'cc_Scene'"></SceneProperty>
-          <ComponentsProperty components.sync="treeItemData.components"></ComponentsProperty>
-        </div>
+        <NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
       </div>
-
     </div>
     <div v-show="!isShowDebug" class="no-find">
       <span>未发现cocos creator的游戏!</span>
@@ -60,7 +55,7 @@ const PluginMsg = require("../core/plugin-msg");
   }
 })
 export default class Index extends Vue {
-  private isShowDebug: boolean = true;
+  private isShowDebug: boolean = false;
   treeItemData: Record<string, any> = {};
   treeData: Array<Record<string, any>> = []
   bgConn: chrome.runtime.Port | null = null// 与background.js的链接
@@ -347,8 +342,6 @@ export default class Index extends Vue {
 
   onBtnClickTest3() {
     // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
-    let f = require("../core/event-mgr");
-    console.log(f.id);
   }
 
   onMemoryTest() {
@@ -421,21 +414,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>

source/vue.config.js

@@ -1,5 +1,5 @@
+const Copy = require("./plugins/copy");
 const Path = require("path");
-
 module.exports = {
   publicPath: "/",
   outputDir: "dist",
@@ -17,7 +17,8 @@ module.exports = {
       componentOptions: {
         contentScripts: {
           entries: {
-            content: "src/content.ts"
+            content: "src/content.ts",
+            inject: "src/inject.js"
           },
         },
         background: {
@@ -32,5 +33,8 @@ module.exports = {
     entry: {
       inject: Path.join(__dirname, "src/inject.js"),
     }
+    plugins: [
+      // new Copy([{src: "src/inject.js", dest: "js/inject.js"}]),
+    ]
   }
 };