feat(gui): 在技能信息框中显示技能类型图标并调整布局

- 扩展 IBoxComp 以支持技能类型数据，为近战、远程、支援技能显示对应图标
- 重构 applyLineTexts 为 applyLineData，接收包含文本和类型的对象数组
- 调整 ibox.prefab 中节点位置、尺寸和间距，优化视觉布局
- 默认隐藏未使用的行节点以减少初始渲染开销

assets/resources/gui/element/ibox.prefab

@@ -160,7 +160,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": -195.637,
-      "y": 94.223,
+      "y": 44.223,
       "z": 0
     },
     "_lrot": {
@@ -485,7 +485,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 700,
-      "height": 200
+      "height": 100
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -701,7 +701,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 0,
-      "y": 100,
+      "y": 25,
       "z": 0
     },
     "_lrot": {
@@ -1209,7 +1209,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 600,
-      "height": 50.4
+      "height": 29.5
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1244,13 +1244,13 @@
       "b": 255,
       "a": 255
     },
-    "_string": "这里是说明",
+    "_string": "这里是说明这里是说明这里是说明",
     "_horizontalAlign": 0,
     "_verticalAlign": 1,
     "_actualFontSize": 25,
     "_fontSize": 25,
     "_fontFamily": "Arial",
-    "_lineHeight": 28,
+    "_lineHeight": 25,
     "_overflow": 2,
     "_enableWrapText": false,
     "_font": null,
@@ -1453,7 +1453,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 0,
-      "y": 50,
+      "y": -25,
       "z": 0
     },
     "_lrot": {
@@ -1547,7 +1547,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 600,
-      "height": 50.4
+      "height": 29.5
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -2190,7 +2190,7 @@
         "__id__": 110
       }
     ],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 116
@@ -2205,7 +2205,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 0,
-      "y": 0,
+      "y": -50,
       "z": 0
     },
     "_lrot": {
@@ -2240,7 +2240,7 @@
       "__id__": 89
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 91
@@ -2299,7 +2299,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 600,
-      "height": 50.4
+      "height": 29.5
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -2438,7 +2438,7 @@
       "__id__": 89
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 99
@@ -2574,7 +2574,7 @@
       "__id__": 89
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 105
@@ -2713,7 +2713,7 @@
       "__id__": 89
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 111
@@ -2942,7 +2942,7 @@
         "__id__": 142
       }
     ],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 148
@@ -2957,7 +2957,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 0,
-      "y": -50,
+      "y": -75,
       "z": 0
     },
     "_lrot": {
@@ -2992,7 +2992,7 @@
       "__id__": 121
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 123
@@ -3051,7 +3051,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 600,
-      "height": 50.4
+      "height": 29.5
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -3190,7 +3190,7 @@
       "__id__": 121
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 131
@@ -3326,7 +3326,7 @@
       "__id__": 121
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 137
@@ -3465,7 +3465,7 @@
       "__id__": 121
     },
     "_children": [],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 143
@@ -3694,7 +3694,7 @@
         "__id__": 174
       }
     ],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 180
@@ -3803,7 +3803,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 600,
-      "height": 50.4
+      "height": 29.5
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -4439,7 +4439,7 @@
     "_contentSize": {
       "__type__": "cc.Size",
       "width": 650,
-      "height": 250
+      "height": 100
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",

assets/script/game/map/IBoxComp.ts

@@ -2,7 +2,7 @@ import { _decorator, Label, Node, NodeEventType, UITransform } from "cc";
 import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
 import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
 import { HeroInfo } from "../common/config/heroSet";
-import { SkillSet } from "../common/config/SkillSet";
+import { IType, SkillSet } from "../common/config/SkillSet";
 import { oops } from "db://oops-framework/core/Oops";
 const { ccclass, property } = _decorator;
 
@@ -52,37 +52,42 @@ export class IBoxComp extends CCComp {
         const hero = HeroInfo[heroUuid];
         if (!hero) {
             this.setHeroName("");
-            this.applyLineTexts(["暂无技能信息"]);
+            this.applyLineData([{ text: "暂无技能信息" }]);
             return;
         }
         this.setHeroName(hero.name);
         const runtimeSkills = args?.skills ? Object.values(args.skills) : [];
         const sourceSkills = runtimeSkills.length > 0 ? runtimeSkills : Object.values(hero.skills ?? {});
-        const skillTexts = sourceSkills.map(skill => {
+        const lineData = sourceSkills.map(skill => {
             const skillId = Math.floor(skill?.uuid ?? 0);
-            if (!skillId) return "";
+            if (!skillId) return null;
             const config = SkillSet[skillId];
-            if (!config) return "";
+            if (!config) return null;
             const runtimeLv = runtimeSkills.length > 0 ? Math.max(0, Math.floor(skill.lv ?? 0)) : Math.max(0, Math.floor((skill.lv ?? 1) + heroLv - 2));
             const cd = Number(skill?.cd ?? 0);
-            return `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`;
-        }).filter(Boolean);
-        this.applyLineTexts(skillTexts.length > 0 ? skillTexts : ["暂无技能信息"]);
+            return {
+                text: `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`,
+                iType: config.IType
+            };
+        }).filter(item => !!item) as Array<{ text: string; iType: IType }>;
+        this.applyLineData(lineData.length > 0 ? lineData : [{ text: "暂无技能信息" }]);
     }
 
-    private applyLineTexts(skillTexts: string[]) {
+    private applyLineData(skillLines: Array<{ text: string; iType?: IType }>) {
         const lines = [this.Line1, this.Line2, this.Line3, this.Line4, this.Line5];
-        const showCount = Math.max(1, Math.min(lines.length, skillTexts.length));
+        const showCount = Math.max(1, Math.min(lines.length, skillLines.length));
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
             if (!line) continue;
             const active = i < showCount;
             line.active = active;
             if (!active) continue;
-            const text = skillTexts[i] ?? "";
+            const data = skillLines[i];
+            const text = data?.text ?? "";
             const noteNode = line.getChildByName("note");
             const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
             if (label) label.string = text;
+            this.updateLineTypeIcon(line, data?.iType);
         }
         const targetHeight = this.baseHeight + Math.max(0, showCount - 1) * this.extraLineHeight;
         this.updateIBoxHeight(targetHeight);
@@ -106,6 +111,15 @@ export class IBoxComp extends CCComp {
         }
     }
 
+    private updateLineTypeIcon(line: Node, iType?: IType) {
+        const meleeNode = line.getChildByName("Melee");
+        const remoteNode = line.getChildByName("remote");
+        const supportNode = line.getChildByName("support");
+        if (meleeNode) meleeNode.active = iType === IType.Melee;
+        if (remoteNode) remoteNode.active = iType === IType.remote;
+        if (supportNode) supportNode.active = iType === IType.support;
+    }
+
     private onTapClose() {
         oops.gui.removeByNode(this.node);
     }