取消ObjectItem的设计，实现起来问题太多

2025-10-23 00:35:23 +00:00 · 2025-01-06 14:21:06 +08:00
parent 527327eb14
commit f633c4fa55
9 changed files with 117 additions and 124 deletions
--- a/cc-inspector/src/views/devtools/bus.ts
+++ b/cc-inspector/src/views/devtools/bus.ts
@@ -2,7 +2,6 @@ import { TinyEmitter } from "tiny-emitter";

 export enum BusMsg {
  ShowPlace = "ShowPlace",
-  RequestObjectData = "RequestObjectData",
  FoldAllGroup = "FoldAllGroup",
  UpdateSettings = "UpdateSettings",
  /**
--- a/cc-inspector/src/views/devtools/data.ts
+++ b/cc-inspector/src/views/devtools/data.ts
@@ -165,17 +165,25 @@ export class ArrayData extends Info {
    this.data.push(info);
    return this;
  }
-  test() {
-    this.add(new Property("item1", new TextData("text")));
-    this.add(new Property("item2", new BoolData(true)));
-    this.add(new Property("item3", new NumberData(100)));
+  testNormal() {
+    this.add(new Property("arr-text", new TextData("text")));
+    this.add(new Property("arr-bool", new BoolData(true)));
+    this.add(new Property("arr-number", new NumberData(100)));
+    return this;
+  }
+  testObject() {
+    this.add(new Property("obj", new ObjectData().testNormal()));
+    return this;
+  }
+  testArray() {
+    this.add(new Property("arr", new ArrayData().testNormal()));
    return this;
  }
  testSub() {
-    this.add(new Property("item1", new TextData("text")));
+    this.add(new Property("text", new TextData("text")));
    const sub = new ArrayData();
-    sub.add(new Property("sub", new StringData("sub")));
-    this.add(new Property("arr", sub));
+    sub.add(new Property("string", new StringData("sub")));
+    this.add(new Property("array", sub));
    return this;
  }
  public isArray(): boolean {
@@ -185,42 +193,43 @@ export class ArrayData extends Info {
    return true;
  }
 }
-
-export class ObjectDataItem extends Info {}
-
 export class ObjectData extends Info {
  /**
-   * object的简单描述快照，类似chrome的console，{a:'fff',b:xxx}
-   * 主要是为了防止Object的数据过大，无限递归
+   * 对于object无限递归的情况，会自动中断
+   * 本质上和Array区别不是很大
   */
-  data: string = "";
+  data: Array<Property> = [];
  constructor() {
    super();
    this.type = DataType.Object;
  }
  parse(data: ObjectData) {
    super.parse(data);
-    this.data = data.data;
+    for (let i = 0; i < data.data.length; i++) {
+      const item = data.data[i];
+      const property = new Property(item.name, item.value).parse(item);
+      this.data.push(property);
+    }
    return this;
  }

-  test() {
-    this.data = JSON.stringify({ fack: "test" });
+  add(info: Property) {
+    this.data.push(info);
    return this;
  }
-  testProperty(): Property[] {
-    const obj: Object = JSON.parse(this.data);
-    const properties: Property[] = [];
-    for (let key in obj) {
-      if (typeof obj[key] === "string") {
-        properties.push(new Property(key, new StringData(obj[key])));
-      } else if (typeof obj[key] === "number") {
-        properties.push(new Property(key, new NumberData(obj[key])));
-      } else if (typeof obj[key] === "boolean") {
-        properties.push(new Property(key, new BoolData(obj[key])));
-      }
-    }
-    return properties;
+  testNormal() {
+    this.add(new Property("obj-text", new TextData("text")));
+    this.add(new Property("obj-bool", new BoolData(true)));
+    this.add(new Property("obj-number", new NumberData(100)));
+    return this;
+  }
+  testObject() {
+    this.add(new Property("obj", new ObjectData().testNormal()));
+    return this;
+  }
+  testArray() {
+    this.add(new Property("array", new ArrayData().testNormal()));
+    return this;
  }
  public isObject(): boolean {
    return true;
@@ -228,6 +237,9 @@ export class ObjectData extends Info {
  public isArrayOrObject(): boolean {
    return true;
  }
+  public getInfo() {
+    return `${this.id}: ${this.path.join("/")}`;
+  }
 }

 export class InvalidData extends Info {
@@ -566,6 +578,7 @@ export class Group {
    this.data.push(property);
  }
  buildProperty(name: string, info: Info) {
+    info.path.push(name);
    const property = new Property(name, info);
    this.addProperty(property);
    return this;
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -108,6 +108,10 @@ export default defineComponent({
    bridge.on(Msg.MemoryInfo, (eventData: any) => {
      memory.value = eventData;
    });
+    bridge.on(Msg.ResponseError, (event: PluginEvent) => {
+      const err: string = event.data;
+      ccui.footbar.showError(err);
+    });
    bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => {
      let resFrames: FrameDetails[] = event.data;
      iframes.value = resFrames.map((item) => {
--- a/cc-inspector/src/views/devtools/inspector.vue
+++ b/cc-inspector/src/views/devtools/inspector.vue
@@ -11,10 +11,10 @@
 import ccui from "@xuyanfeng/cc-ui";
 import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
 import { defineComponent, onMounted, onUnmounted, ref } from "vue";
-import { Msg, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types";
+import { Msg, PluginEvent, RequestNodeInfoData, ResponseSupportData } from "../../core/types";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
-import { NodeInfoData, ObjectData } from "./data";
+import { NodeInfoData } from "./data";
 import { Timer } from "./timer";
 import Properties from "./ui/propertys.vue";
 const { CCDock } = ccui.components;
@@ -73,27 +73,7 @@ export default defineComponent({
        ccui.footbar.showError(error, { title: "parse property error" });
      }
    });
-    /**
-     * 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
-     */
-    const requestList: Array<{ id: string; cb: Function }> = [];
-    bridge.on(Msg.ResponseObjectItemData, (event: PluginEvent) => {
-      const requestData: ResponseObjectData = event.data;
-      if (requestData.id !== null) {
-        let findIndex = requestList.findIndex((el) => el.id === requestData.id);
-        if (findIndex > -1) {
-          let del = requestList.splice(findIndex, 1)[0];
-          del.cb(requestData.data);
-        }
-      }
-    });
-    Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
-      if (!data.id || requestList.find((el) => el.id === data.id)) {
-        return;
-      }
-      requestList.push({ id: data.id, cb });
-      bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
-    });
+
    return {
      treeItemData,
      onMenu(evnet: MouseEvent) {
--- a/cc-inspector/src/views/devtools/test/server.ts
+++ b/cc-inspector/src/views/devtools/test/server.ts
@@ -1,6 +1,6 @@
 import { v4 } from "uuid";
-import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
-import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
+import { Msg, Page, PluginEvent, RequestNodeInfoData, ResponseNodeInfoData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
+import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
 export class TestClient {
  recv(event: PluginEvent) {}
 }
@@ -81,9 +81,41 @@ export class TestServer {
  private clients: TestClient[] = [];
  private testData: Node = new Node("scene");
  constructor() {
-    this.testData.buildChild("base").buildComponent("group1").buildProperty("bool", new BoolData(true)).buildProperty("text", new TextData("text")).buildProperty("number", new NumberData(100)).buildProperty("string", new StringData("string")).buildProperty("enum", new EnumData().test()).buildProperty("color", new ColorData("#f00")).buildProperty("image", new ImageData().test());
-    this.testData.buildChild("vec").buildComponent("group2").buildProperty("number", new NumberData(200)).buildProperty("vec2", new Vec2Data().test()).buildProperty("vec3", new Vec3Data().test()).buildProperty("vec4", new Vec4Data().test());
-    this.testData.buildChild("obj/arr").buildComponent("group3").buildProperty("array", new ArrayData().test()).buildProperty("object", new ObjectData().test()).buildProperty("arr_arr", new ArrayData().testSub());
+    this.testData
+      .buildChild("base")
+      .buildComponent("group-base") //
+      .buildProperty("bool", new BoolData(true))
+      .buildProperty("text", new TextData("text"))
+      .buildProperty("number", new NumberData(100))
+      .buildProperty("string", new StringData("string"))
+      .buildProperty("enum", new EnumData().test())
+      .buildProperty("color", new ColorData("#f00"))
+      .buildProperty("image", new ImageData().test());
+    this.testData
+      .buildChild("vec")
+      .buildComponent("group-vec") //
+      .buildProperty("number", new NumberData(200))
+      .buildProperty("vec2", new Vec2Data().test())
+      .buildProperty("vec3", new Vec3Data().test())
+      .buildProperty("vec4", new Vec4Data().test());
+    this.testData
+      .buildChild("arr")
+      .buildComponent("group-arr") //
+      .buildProperty("array[t/b/n]", new ArrayData().testNormal()); //
+    this.testData
+      .buildChild("obj") //
+      .buildComponent("group-obj")
+      .buildProperty("object", new ObjectData().testNormal()); //
+
+    this.testData
+      .buildChild("arr[arr]")
+      .buildComponent("group-arr[arr]") //
+      .buildProperty("arr", new ArrayData().testArray()); //
+
+    this.testData
+      .buildChild("arr[obj]")
+      .buildComponent("group-arr[obj]") //
+      .buildProperty("arr", new ArrayData().testObject()); //
    this.testData.buildChild("engine").buildComponent("group4").buildProperty("node", new EngineData().init("name", "cc_Node", "uuid")).buildProperty("sprite", new EngineData().init("name", "cc_Sprite", "uuid")).buildProperty("label", new EngineData().init("name", "cc_Label", "uuid")).buildProperty("un_known", new EngineData().init("name", "un_known", "uuid"));

    const c = this.testData.buildChild("str1");
@@ -132,22 +164,8 @@ export class TestServer {
        break;
      }
      case Msg.RequestSetProperty: {
-        console.log(data);
-        break;
-      }
-      case Msg.RequestObjectItemData: {
-        const objData: RequestObjectData = data as ObjectData;
-        const info = this.testData.findInfo(objData.id);
-        if (info && info instanceof ObjectData) {
-          const ret: ObjectItemRequestData = {
-            id: objData.id,
-            data: info.testProperty(),
-          };
-          const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseObjectItemData, ret as ResponseObjectData);
-          this.send(event);
-        } else {
-          console.warn("not found data: ", objData.id);
-        }
+        const i = data as Info;
+        console.log(i);
        break;
      }
      case Msg.RequestLogData: {
--- a/cc-inspector/src/views/devtools/ui/ui-prop.vue
+++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue
@@ -16,12 +16,12 @@
        <CCColor v-if="value.isColor()" :show-color-text="true" :disabled="value.readonly" v-model:color="value.data" @change="onChangeValue"> </CCColor>
        <PropertyImage v-if="value.isImage()" v-model:data="(value as ImageData)"></PropertyImage>
        <Engine v-if="value.isEngine()" v-model:data="(value as EngineData)"> </Engine>
-        <div v-if="value.isObject() && !expand" class="objectDesc">{{ value.data }}</div>
+        <div v-if="value.isObject() && !expand" class="objectDesc"></div>
        <div v-if="value.isArray()" class="array">Array[{{ value.data.length }}]</div>
      </div>
    </CCProp>
    <div v-if="value && value.isArrayOrObject()">
-      <div v-show="expand && subData">
+      <div v-show="expand && subData && subData.length">
        <UiProp v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </UiProp>
      </div>
    </div>
@@ -34,8 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
 import { Msg, RequestSetPropertyData } from "../../../core/types";
 import { bridge } from "../bridge";
-import { Bus, BusMsg } from "../bus";
-import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
+import { ArrayData, EngineData, EnumData, ImageData, Info, NumberData, ObjectData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
 import Engine from "./property-engine.vue";
 import PropertyImage from "./property-image.vue";
 const { CCInput, CCTextarea, CCProp, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
@@ -66,30 +65,25 @@ export default defineComponent({
        if (newData.id !== oldData.id) {
          // 只有id不相等了，才折叠，因为数据是在定时刷新
          expand.value = false;
+          subData.value = [];
        }
        freshSubData(newData);
      }
    );
-    const subData = ref<Array<Property> | null>(null);
+    const subData = ref<Array<Property>>([]);
    function freshSubData(data: Info) {
      const rawExpand = toRaw(expand.value);
      if (!rawExpand) {
        return;
      }
-      const rawSubData = toRaw(subData.value);
-      if (rawSubData !== null) {
-        return;
-      }
      const rawValue = toRaw(data);
      if (!rawValue) {
        return;
      }
      if (rawValue.isArray()) {
-        subData.value = data.data;
+        subData.value = (data as ArrayData).data;
      } else if (rawValue.isObject()) {
-        Bus.emit(BusMsg.RequestObjectData, rawValue, (info: Property[]) => {
-          subData.value = info;
-        });
+        subData.value = (data as ObjectData).data;
      }
    }
    return {