From f15c2cb9794e3d964ffa00b2d91e056472527c77 Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Fri, 23 May 2025 15:59:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E7=BD=AE=20node=20i?=
 =?UTF-8?q?con=20=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/inject/inspector.ts  | 96 ++++++++++++++++++++++++++++----
 src/views/devtools/comp/index.ts | 10 +++-
 2 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/scripts/inject/inspector.ts b/src/scripts/inject/inspector.ts
index 8a79aa3..3ea8d5a 100644
--- a/src/scripts/inject/inspector.ts
+++ b/src/scripts/inject/inspector.ts
@@ -314,23 +314,91 @@ export class Inspector extends InjectEvent {
 
     const components = node._components;
     if (components) {
-      const types: CompType[] = [];
-      // widget组件的优先级低于其他渲染组件
+      const names: string[] = [];
       for (let i = 0; i < components.length; i++) {
         const component = components[i];
-        const type = this.checkComponent(component);
-        if (type) {
-          types.push(type);
+        const name = this.getCompName(component);
+        if (name) {
+          names.push(name);
         }
       }
-      if (types.length) {
-        //按照字母的顺序排序，目前是符合预期
-        types.sort();
-        return getNodeIcon(types[0]);
+      if (names.length) {
+        const t = this.bestName(names);
+        if (t) {
+          return getNodeIcon(t);
+        }
       }
     }
     return getNodeIcon(CompType.Node);
   }
+  /**挑选出最合适的组件图标依据的类型 */
+  private bestName(names: string[]): CompType | null {
+    if (names.length === 1 && names[0] === CompType.UITransform) {
+      return CompType.Node;
+    }
+    const typePriority: CompType[] = [
+      // 越靠前，优先级越搞
+      CompType.Camera,
+      CompType.Canvas,
+      CompType.Scene,
+      // 动画组件
+      CompType.Animation,
+      // 基础组件
+      CompType.Button,
+      CompType.Spirte,
+      CompType.Label,
+      CompType.RichText,
+      CompType.Prefab,
+      // UI组件
+      CompType.EditBox,
+      CompType.ScrollView,
+      CompType.Mask,
+      CompType.TiledTile,
+      CompType.Graphics,
+      CompType.ProgressBar,
+      CompType.Slider,
+      CompType.PageView,
+      CompType.Toggle,
+      CompType.ToggleGroup,
+      CompType.ToggleContainer,
+      //
+      CompType.ParticleSystem,
+      CompType.ParticleSystem2D,
+      CompType.Light,
+      CompType.VideoPlayer,
+      CompType.Webview,
+      CompType.MeshRenderer,
+      // UI组件
+      CompType.BlockInputEvents,
+      CompType.Layout,
+      CompType.Widget,
+      // 兜底
+      CompType.Node,
+    ];
+    for (const key in CompType) {
+      const type = CompType[key];
+      if (type === CompType.UITransform) {
+        continue;
+      }
+      const b = typePriority.find((el) => el === type);
+      if (!b) {
+        console.log(`${type} is not in typePriority`);
+        debugger;
+      }
+    }
+    for (let i = 0; i < typePriority.length; i++) {
+      const name = typePriority[i];
+      if (names.indexOf(name) !== -1) {
+        return name;
+      }
+    }
+    if (names.length) {
+      // 没有从手动排序中找到，就用第一个
+      names.sort();
+      return names[0] as CompType;
+    }
+    return null;
+  }
   private checkComponent(comp: any): CompType | null {
     const map = {};
     map[CompType.Animation] = [cc.Animation];
@@ -348,12 +416,16 @@ export class Inspector extends InjectEvent {
     map[CompType.ProgressBar] = [cc.ProgressBar];
     map[CompType.Layout] = [cc.Layout];
     map[CompType.Graphics] = [cc.Graphics];
+    map[CompType.ParticleSystem] = [cc.ParticleSystem, cc.ParticleSystemComponent];
+    // widget组件的优先级低于其他渲染组件
     map[CompType.Widget] = [cc.Widget];
     for (let key in map) {
       const item = map[key];
-      const ret = item.find((el: any) => {
-        return el && comp instanceof el;
-      });
+      const ret = item
+        .filter((el) => !!el)
+        .find((el: any) => {
+          return el && comp instanceof el;
+        });
       if (ret) {
         return key as CompType;
       }
diff --git a/src/views/devtools/comp/index.ts b/src/views/devtools/comp/index.ts
index cce6514..b7a6895 100644
--- a/src/views/devtools/comp/index.ts
+++ b/src/views/devtools/comp/index.ts
@@ -12,6 +12,7 @@ export enum CompType {
   ScrollView = "cc.ScrollView",
   UITransform = "cc.UITransform",
   ParticleSystem = "cc.ParticleSystem",
+  ParticleSystem2D = "cc.ParticleSystem2D",
   EditBox = "cc.EditBox",
   TiledTile = "cc.TiledTile",
   Light = "cc.Light",
@@ -305,7 +306,14 @@ export function getNodeIcon(comp: CompType): string {
   map[CompType.Mask] = "icon_mask";
   map[CompType.Widget] = "icon_widget";
   map[CompType.ProgressBar] = "icon_progress";
+  map[CompType.ParticleSystem] = "icon_effect";
+  map[CompType.ParticleSystem2D] = "icon_effect";
   map[CompType.Layout] = "icon_layout";
   map[CompType.Graphics] = "icon_graphics";
-  return map[comp] || "";
+  let ret = map[comp];
+  if (!ret) {
+    console.log(`get node icon fail: ${comp}, please check.`);
+    ret = map[CompType.Node];
+  }
+  return ret;
 }