更新tree组件的相关功能

cc-inspector/.vscode/settings.json

@@ -5,8 +5,8 @@
   "[typescript]": {
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
-    "prettier.printWidth": 1800,
-    "editor.defaultFormatter": "vscode.typescript-language-features"
+    "editor.defaultFormatter": "vscode.typescript-language-features",
+    "prettier.printWidth": 1000
   },
   "[json]": {
     "editor.quickSuggestions": {
@@ -18,7 +18,7 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
-    "prettier.printWidth": 800
+    "prettier.printWidth": 1000
   },
   "files.refactoring.autoSave": false,
   "search.exclude": {

cc-inspector/src/scripts/background.ts

@@ -60,18 +60,13 @@ class PortMan {
   }
 
   _updateFrames() {
-    let data: FrameDetails[] = this.content.map((item) => {
+    const data: FrameDetails[] = this.content.map((item) => {
       return {
         url: item.sender?.url || "",
         frameID: item.sender?.frameId || 0,
       };
     });
-    let event = new PluginEvent(
-      Page.Background,
-      Page.Devtools,
-      Msg.UpdateFrames,
-      data
-    );
+    const event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data);
     this.sendDevtoolMsg(event);
   }
 

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

@@ -3,7 +3,7 @@
     <Test @valid-game="testValidGame"> </Test>
     <div class="head" v-show="iframes.length > 1">
       <div class="label">inspect target:</div>
-      <CCSelect v-model:value="frameID" placeholder="please select ..." @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
+      <CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
     </div>
     <div v-show="isShowDebug" class="find">
       <div v-if="false">
@@ -14,40 +14,15 @@
       </div>
       <div class="left">
         <div class="tool-btn">
-          <div style="padding-left: 5px; flex: 1; user-select: none">Node Tree</div>
+          <div class="text">Node Tree</div>
           <CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
         </div>
-        <CCInput placeholder="enter keywords to filter" :data="filterText">
+        <CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
           <slot>
             <i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
           </slot>
         </CCInput>
-        <div class="treeList">
-          <CCTree :value="treeData" @node-click="handleNodeClick"></CCTree>
-          <!-- <el-tree
-            :data="treeData"
-            ref="tree"
-            style="display: inline-block"
-            :props="defaultProps"
-            :highlight-current="true"
-            :default-expand-all="false"
-            :default-expanded-keys="expandedKeys"
-            :filter-node-method="filterNode"
-            :expand-on-click-node="false"
-            node-key="uuid"
-            @node-expand="onNodeExpand"
-            @node-collapse="onNodeCollapse"
-            @node-click="handleNodeClick"
-          >
-            <span
-              slot-scope="{ node, data }"
-              class="leaf"
-              :class="data.active ? 'leaf-show' : 'leaf-hide'"
-            >
-              <span>{{ node.label }}</span>
-            </span>
-          </el-tree> -->
-        </div>
+        <CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"></CCTree>
       </div>
       <CCDivider></CCDivider>
       <div class="right">
@@ -55,10 +30,8 @@
       </div>
     </div>
     <div v-show="!isShowDebug" class="no-find">
-      <span>No games created by cocos creator found!</span>
-      <CCButton type="success" @click="onBtnClickUpdatePage">
-        <i class="iconfont icon_refresh"></i>
-      </CCButton>
+      <span>no games created by cocos creator found!</span>
+      <i class="fresh iconfont icon_refresh" @click="onBtnClickUpdatePage"></i>
     </div>
     <CCDialog></CCDialog>
     <CCFootBar :version="version"></CCFootBar>
@@ -213,7 +186,6 @@ export default defineComponent({
           updateNodeInfo();
           nextTick(() => {
             if (elTree.value) {
-              //@ts-ignore
               elTree.value.setCurrentKey(selectedUUID);
             }
           });
@@ -455,6 +427,7 @@ export default defineComponent({
         selectedUUID = data.id;
         updateNodeInfo();
       },
+      // TODO: 暂时这个版本先不实现
       filterNode(value: any, data: any) {
         if (!value) {
           return true;
@@ -477,16 +450,18 @@ export default defineComponent({
 
       onChangeFrame,
       onNodeExpand(data: TreeData) {
-        if (data.hasOwnProperty("uuid") && data.id) {
+        if (data.id) {
           expandedKeys.value.push(data.id);
         }
       },
       onNodeCollapse(data: TreeData) {
-        if (data.hasOwnProperty("uuid")) {
-          let index = expandedKeys.value.findIndex((el) => el === data.id);
+        if (data.id) {
+          const keys = toRaw(expandedKeys.value);
+          const index = keys.findIndex((el) => el === data.id);
           if (index !== -1) {
-            expandedKeys.value.splice(index, 1);
+            keys.splice(index, 1);
           }
+          expandedKeys.value = keys;
         }
       },
     };
@@ -503,15 +478,20 @@ export default defineComponent({
   overflow: hidden;
   background-color: #5c5c5c;
   color: white;
+
   .head {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 1px 0;
+    padding: 2px 0;
     border-bottom: solid 1px grey;
 
     .label {
+      color: white;
+      font-size: 12px;
       margin: 0 3px;
+      margin-right: 5px;
+      user-select: none;
     }
   }
 
@@ -521,9 +501,27 @@ export default defineComponent({
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    user-select: none;
 
     span {
       margin-right: 20px;
+      color: white;
+      font-size: 20px;
+      user-select: none;
+    }
+
+    .fresh {
+      cursor: pointer;
+      color: white;
+      font-size: 20px;
+
+      &:hover {
+        color: #cef57b;
+      }
+
+      &:active {
+        color: #ffaa00;
+      }
     }
   }
 
@@ -544,6 +542,14 @@ export default defineComponent({
         flex-direction: row;
         align-items: center;
         justify-content: center;
+
+        .text {
+          padding-left: 5px;
+          flex: 1;
+          user-select: none;
+          font-size: 12px;
+          color: white;
+        }
       }
 
       .matchCase {
@@ -554,40 +560,6 @@ export default defineComponent({
         align-items: center;
         justify-content: center;
       }
-
-      .treeList {
-        margin-top: 3px;
-        height: 100%;
-        border-radius: 4px;
-        min-height: 20px;
-        overflow: auto;
-        width: 100%;
-
-        .leaf {
-          width: 100%;
-        }
-
-        .leaf-show {
-          color: black;
-        }
-
-        .leaf-hide {
-          color: #c7bbbb;
-          text-decoration: line-through;
-        }
-
-        &::-webkit-scrollbar {
-          width: 6px;
-          height: 6px;
-          background: #999;
-          border-radius: 2px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background-color: #333;
-          border-radius: 2px;
-        }
-      }
     }
 
     .right {

cc-inspector/src/views/devtools/test/server.ts

@@ -107,6 +107,7 @@ export class TestServer {
       .buildProperty("un_known", new EngineData().init('name', 'un_known', 'uuid'))
 
     const c = this.testData.buildChild("str1")
+    c.active = false;
     c.buildComponent("group51").buildProperty("str1", new StringData("str1"))
     c.buildComponent("group52").buildProperty("num", new NumberData(200))
 

cc-inspector/src/views/devtools/test/test.vue

@@ -4,6 +4,7 @@
       <CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
       <CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
       <CCButton @click="onTestTree">init tree data</CCButton>
+      <CCButton @click="onFrames">test frame</CCButton>
     </CCSection>
   </div>
 </template>
@@ -13,8 +14,8 @@ import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 import { defineComponent, ref } from "vue";
 import { Msg, Page, PluginEvent } from "../../../core/types";
 import { connectBackground } from "../connectBackground";
-import { TreeData } from "../data";
-import { TestServer } from "./server";
+import { FrameDetails, TreeData } from "../data";
+import { testServer, TestServer } from "./server";
 const { CCButton, CCSection } = ccui.components;
 export default defineComponent({
   name: "test",
@@ -43,6 +44,14 @@ export default defineComponent({
         const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data);
         connectBackground.doCallback(event);
       },
+      onFrames() {
+        const data: FrameDetails[] = [
+          { url: "url1", frameID: 1 },
+          { url: "url2", frameID: 2 },
+        ];
+        const event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data);
+        testServer.send(event);
+      },
     };
   },
 });