将popup移植了过去

cc-inspector/src/views/devtools/data.ts

@@ -0,0 +1,231 @@
+// @ts-ignore
+import {v4} from "uuid"
+
+export enum DataType {
+  Number,
+  String,
+  Text,
+  Vec2,
+  Vec3,
+  Enum,
+  Bool,
+  Color,
+  Invalid,
+  Array, // 暂时在控制台打印下
+  Object,
+  ObjectItem,
+  Image, // 图片
+  Engine,// 引擎的类型：cc.Node, cc.Sprite, cc.Label等。。。
+}
+
+export class Info {
+  public id: string | null = null;
+  public type: DataType = DataType.Number;
+  public data: any;
+  public readonly: boolean = false;
+  public path: Array<string> = [];// 属性对应的路径
+  constructor() {
+    this.id = v4();
+  }
+}
+
+export class TextData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.Text;
+  }
+}
+
+export interface ObjectItemRequestData {
+  id: string | null;
+  data: Property[];
+}
+
+export interface FrameDetails {
+  frameID: number;
+  url: string;
+}
+
+export class EngineData extends Info {
+  public engineType: string = "";
+  public engineUUID: string = "";
+  public engineName: string = "";
+
+  constructor() {
+    super();
+    this.type = DataType.Engine;
+  }
+}
+
+export class ArrayData extends Info {
+  data: Array<Property> = [];
+
+  constructor() {
+    super();
+    this.type = DataType.Array;
+  }
+
+  add(info: Property) {
+    this.data.push(info);
+    return this;
+  }
+}
+
+export class ObjectDataItem extends Info {
+
+}
+
+export class ObjectData extends Info {
+  data: string = "";// object的简单描述快照，类似chrome的console，{a:'fff',b:xxx}
+  constructor() {
+    super();
+    this.type = DataType.Object;
+  }
+}
+
+export class InvalidData extends Info {
+  data: "undefined" | "null" | "Infinity" | "NaN" | string;
+
+  constructor(data: any) {
+    super();
+    this.data = data;
+    this.type = DataType.Invalid;
+  }
+}
+
+export class ColorData extends Info {
+  constructor(color: string) {
+    super();
+    this.type = DataType.Color;
+    this.data = color;
+  }
+}
+
+export class StringData extends Info {
+  constructor(data: string) {
+    super();
+    this.type = DataType.String;
+    this.data = data;
+  }
+}
+
+export class NumberData extends Info {
+  constructor(data: number) {
+    super();
+    this.type = DataType.Number;
+    this.data = data;
+  }
+}
+
+export class BoolData extends Info {
+  constructor(bol: boolean) {
+    super();
+    this.type = DataType.Bool;
+    this.data = bol;
+  }
+}
+
+export class Vec2Data extends Info {
+  data: Array<Property> = [];
+
+  constructor() {
+    super();
+    this.type = DataType.Vec2
+    this.data = [];
+    return this;
+  }
+
+  add(info: Property) {
+    this.data.push(info);
+    return this;
+  }
+}
+
+export class Vec3Data extends Info {
+  data: Array<Property> = [];
+
+  constructor() {
+    super();
+    this.type = DataType.Vec3;
+    this.data = [];
+    return this;
+  }
+
+  add(info: Property) {
+    this.data.push(info);
+    return this;
+  }
+}
+
+export class ImageData extends Info {
+  data: string | null = null;
+
+  constructor() {
+    super();
+    this.type = DataType.Image;
+    this.data = null;
+    return this;
+  }
+}
+
+export class EnumData extends Info {
+  constructor() {
+    super();
+    this.type = DataType.Enum;
+  }
+}
+
+export class TreeData {
+  active: boolean = true;
+  uuid: string = "";
+  name: string = "";
+  children: Array<TreeData> = [];
+}
+
+export class Property {
+  public name: string = "property";
+  public value: Info = new Info();
+
+  constructor(name: string, info: Info) {
+    this.name = name;
+    this.value = info;
+  }
+}
+
+export class Group {
+  public id: string = "";
+  public name: string = "group";
+  public data: Array<Property> = [];
+
+  constructor(name: string,id?:string) {
+    this.name = name;
+    this.id=id||'';
+  }
+
+  addProperty(property: Property) {
+    this.data.push(property)
+  }
+
+  sort() {
+    let order = ["name", "active", "enabled", "uuid", "position", "rotation", "scale", "anchor", "size", "color", "opacity", "skew", "group"];
+    let orderKeys: Array<Property> = [];
+    let otherKeys: Array<Property> = [];
+    this.data.forEach(property => {
+      if (order.find(el => el === property.name)) {
+        orderKeys.push(property)
+      } else {
+        otherKeys.push(property);
+      }
+    })
+    orderKeys.sort((a, b) => {
+      return order.indexOf(a.name) - order.indexOf(b.name);
+    })
+    otherKeys.sort();
+    this.data = orderKeys.concat(otherKeys);
+  }
+}
+
+export interface NodeInfoData {
+  uuid: string;// 节点的uuid
+  group: Group[];
+}

cc-inspector/src/views/popup/index.vue

@@ -1,20 +1,151 @@
 <template>
-    <div class="popup">popup</div>
-  </template>
-  <script lang="ts">
-  import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
-  export default defineComponent({
-    name: "popup",
-    components: {},
-    setup(props, ctx) {
-      return {}; 
-    },
-  });
-  </script>
-  <style scoped lang="less">
-  .popup {
-      widows: 10px;
-      height: 10px;
-      background-color: rebeccapurple;
+  <div class="popup">
+    <div class="head">
+      <div class="name">{{ title }}</div>
+      <div style="flex: 1"></div>
+      <el-button
+        class="el-icon-setting btn"
+        @click="onClickOptions"
+      ></el-button>
+    </div>
+
+    <div class="wechat">
+      <div class="money">
+        <img class="png" src="./res/money.png" alt="" />
+        <div class="tips">请我喝杯奶茶</div>
+      </div>
+      <div class="space"></div>
+      <div class="friends">
+        <img class="png" src="./res/friend.png" alt="" />
+        <div class="tips">交个朋友</div>
+      </div>
+    </div>
+
+    <div class="foot">
+      <a href="https://tidys.gitee.io/doc/#" target="_blank">
+        <img class="icon" src="./res/tiezi.png" alt="" />
+      </a>
+      <a
+        href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector"
+        target="_blank"
+      >
+        <img class="icon" src="./res/github.png" alt="" />
+      </a>
+      <a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
+        <img class="icon" src="./res/qq.png" alt="" />
+      </a>
+      <div class="space"></div>
+      <div v-if="version">ver:{{ version }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+import CCP from "cc-plugin/src/ccp/entry-render";
+import { ChromeConst } from "cc-plugin/src/chrome/const";
+export default defineComponent({
+  name: "popup",
+  components: {},
+  setup(props, ctx) {
+    const title = ref(CCP.manifest.name);
+    const version = ref(CCP.manifest.version);
+    let longConn: chrome.runtime.Port | null = null;
+    function _initLongConn() {
+      if (!longConn) {
+        console.log("[popup] 初始化长连接");
+        if (chrome && chrome.runtime) {
+          longConn = chrome.runtime.connect({ name: "popup" });
+          longConn.onMessage.addListener((data: any, sender: any) => {
+            _onLongConnMsg(data, sender);
+          });
+        }
+      }
+    }
+    function _onLongConnMsg(data: string, sender: any) {
+      // console.log( title);
+    }
+    onMounted(() => {
+      _initLongConn();
+    });
+    return {
+      title,
+      version,
+      onClickOptions() {
+        if (chrome && chrome.tabs) {
+          chrome.tabs.create({ url: ChromeConst.html.popup });
+        }
+      },
+      onBtnClickGitHub() {
+        console.log("onBtnClickGitHub");
+      },
+    };
+  },
+});
+</script>
+<style scoped lang="less">
+.popup {
+  widows: 10px;
+  height: 10px;
+  background-color: rebeccapurple;
+
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+
+  .head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .name {
+      user-select: none;
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .btn {
+    }
   }
-  </style>
+
+  .wechat {
+    margin: 10px 0;
+    display: flex;
+    flex-direction: row;
+
+    .space {
+      flex: 1;
+    }
+
+    .png {
+      width: auto;
+      height: 130px;
+    }
+
+    .tips {
+      font-size: 15px;
+      user-select: none;
+      text-align: center;
+      width: 100%;
+      color: #6d6d6d;
+    }
+  }
+
+  .foot {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    align-items: center;
+
+    .space {
+      flex: 1;
+    }
+
+    .icon {
+      margin: 0 3px;
+      width: auto;
+      height: 20px;
+    }
+  }
+}
+</style>