feat(skillBox): 优化技能框UI表现与图标逻辑

1. 调整ui3.plist.meta的边框内边距为25
2. 新增技能框背景颜色节点，根据等级切换对应配色
3. 增加自定义图标支持，优化多类型技能图标加载逻辑

assets/resources/gui/ui3.plist.meta

@@ -6878,10 +6878,10 @@
         "height": 58,
         "rawWidth": 56,
         "rawHeight": 58,
-        "borderTop": 0,
-        "borderBottom": 0,
-        "borderLeft": 0,
-        "borderRight": 0,
+        "borderTop": 25,
+        "borderBottom": 25,
+        "borderLeft": 25,
+        "borderRight": 25,
         "packable": true,
         "pixelsToUnit": 100,
         "pivotX": 0.5,

assets/script/game/common/config/CardSet.ts

@@ -86,6 +86,7 @@ export interface CardConfig {
 
     // 技能卡扩展属性
     skill?: number          // 关联的技能 UUID
+    icon?: string           // 图标ID（可选，优先使用；未设置时按 trigger_type 从 SkillSet/FieldSkillSet 自动取）
     name?: string           // 卡牌名称
     info?: string           // 卡牌描述信息
     is_inst?: boolean       // 是否即时起效
@@ -262,9 +263,10 @@ SkillCardData.forEach(data => {
         pool_lv: waveToPoolLv[data.wave] as CardLV,
         wave: data.wave,
         kind: CKind.Skill,
-        card_lv: 1,
+        card_lv: waveToPoolLv[data.wave],    // wave 1→1, 5→2, 8→3
         name: data.name,
         info: data.info,
+        icon: data.icon,                   // 【新增】透传自定义图标ID（优先级最高）
         is_inst: data.is_inst,
         t_times: data.t_times || (data.is_inst ? 1 : 999),
         t_inv: data.t_inv || 0,

assets/script/game/map/HInfoComp.ts

@@ -35,7 +35,7 @@ import { mLogger } from "../common/Logger";
 import { MissionHeroComp } from "./MissionHeroComp";
 import { MoveComp } from "../hero/MoveComp";
 import { FacSet, getLvColor } from "../common/config/GameSet";
-import { CKind, CardPoolList } from "../common/config/CardSet";
+import { CKind, CardPoolList, CardConfig, CardTriggerType } from "../common/config/CardSet";
 import { SkillSet } from "../common/config/SkillSet";
 import { CardBgComp } from "./CardBgComp";
 import { MissionEconomy } from "./MissionEconomy";
@@ -54,6 +54,9 @@ export class HInfoComp extends CCComp {
     /** 英雄 idle 动画图标节点 */
     @property(Node)
     icon_node=null!
+    /** 技能图标节点 */
+    @property(Node)
+    skill_icon_node=null!
     /** 出售按钮节点 */
     @property(Node)
     sell_node=null!
@@ -169,6 +172,10 @@ export class HInfoComp extends CCComp {
 
         if (this.isSkillCard) {
             // ================= 技能卡预览 =================
+            // 互斥：技能卡只显示技能图标，隐藏英雄图标
+            if (this.icon_node) this.icon_node.active = false;
+            if (this.skill_icon_node) this.skill_icon_node.active = true;
+
             const config = CardPoolList.find(c => c.uuid === heroUuid);
             if (!config) return;
 
@@ -192,10 +199,14 @@ export class HInfoComp extends CCComp {
             if (heroUuid !== this.iconHeroUuid) {
                 this.iconHeroUuid = heroUuid;
                 this.iconVisualToken += 1;
-                this.updateSkillAnimation(this.icon_node, config.skill ?? heroUuid, this.iconVisualToken);
+                this.updateSkillAnimation(this.skill_icon_node, config, this.iconVisualToken);
             }
         } else {
             // ================= 英雄卡预览 =================
+            // 互斥：英雄卡只显示英雄图标，隐藏技能图标
+            if (this.icon_node) this.icon_node.active = true;
+            if (this.skill_icon_node) this.skill_icon_node.active = false;
+
             const hero = HeroInfo[heroUuid];
             if (!hero) return;
 
@@ -461,31 +472,35 @@ export class HInfoComp extends CCComp {
 
     /**
      * 为技能图标加载静态图片。
-     * @param node   图标节点
-     * @param skillUuid 技能 UUID
-     * @param token  视觉令牌
+     * 图标来源优先级：config.icon > 按 trigger_type 自动取（Interval→SkillSet，Field→FieldSkillSet）。
+     * @param node    图标节点
+     * @param config  卡牌配置
+     * @param token   视觉令牌
      */
-    private updateSkillAnimation(node: Node, skillUuid: number, token: number) {
+    private updateSkillAnimation(node: Node, config: CardConfig, token: number) {
         if (!node) return;
-        this.clearIconAnimation(node); // 停止之前的动画
+        this.clearIconAnimation(node);
         const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
         if (!sprite) return;
+        sprite.spriteFrame = null;
 
-        const skillData = SkillSet[skillUuid];
-        if (!skillData || !skillData.icon) {
-            sprite.spriteFrame = null;
-            return;
-        }
-
-        if (smc.uiconsAtlas) {
-            const frame = smc.uiconsAtlas.getSpriteFrame(skillData.icon);
-            if (frame && token === this.iconVisualToken) {
-                sprite.spriteFrame = frame;
+        // 优先使用卡牌自定义 icon；未定义则按 trigger_type 自动取
+        let iconId: string | undefined = config.icon;
+        if (!iconId) {
+            if (config.trigger_type === CardTriggerType.Interval) {
+                iconId = config.skill ? SkillSet[config.skill]?.icon : undefined;
+            } else if (config.trigger_type === CardTriggerType.Field) {
+                const fieldUuid = config.field?.[0];
+                iconId = fieldUuid ? FieldSkillSet[fieldUuid]?.icon : undefined;
             }
-        } else {
-            const sf = oops.res.get("game/heros/cards/" + skillData.icon, SpriteFrame) as SpriteFrame;
-            if (sf && token === this.iconVisualToken) {
-                sprite.spriteFrame = sf;
+        }
+        if (!iconId) return;
+
+        // 与 CardComp / SCardComp 一致：仅信任全局缓存的 uiconsAtlas
+        if (smc.uiconsAtlas) {
+            const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
+            if (token === this.iconVisualToken) {
+                sprite.spriteFrame = frame || null;
             }
         }
     }

assets/script/game/map/SkillBoxComp.ts

@@ -34,7 +34,7 @@ import { _decorator, Node, Prefab, Sprite, Label, Vec3, resources, SpriteAtlas,
 import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
 import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
 import { CardPoolList, CardTriggerType } from "../common/config/CardSet";
-import { SkillSet, SkillOverrides } from "../common/config/SkillSet";
+import { SkillSet, SkillOverrides, FieldSkillSet } from "../common/config/SkillSet";
 import { oops } from "db://oops-framework/core/Oops";
 import { GameEvent } from "../common/config/GameEvent";
 import { smc } from "../common/SingletonModuleComp";
@@ -57,6 +57,10 @@ export class SkillBoxComp extends CCComp {
     @property({ type: Node })
     private icon_node: Node = null;
 
+    /** 技能图标节点：下面有 green blue purple red yellow 5个不同颜色节点*/
+    @property({ type: Node })
+    private bg_node: Node = null;
+
     /** 剩余次数标签 */
     @property(Label)
     private info_label: Label = null;
@@ -82,6 +86,8 @@ export class SkillBoxComp extends CCComp {
     private overrides?: SkillOverrides;
     /** 驻场技能 UUID 列表 */
     public field: number[] = [];
+    /** 卡牌自定义图标ID（优先级最高，未定义则按 trigger_type 自动取） */
+    private card_icon?: string;
 
     // ======================== 触发类型化扩展 ========================
 
@@ -172,6 +178,7 @@ export class SkillBoxComp extends CCComp {
             this.keep_waves = config.keep_waves ?? 0;
             this.overrides = config.overrides;
             this.field = config.field || [];
+            this.card_icon = config.icon;  // 保存卡牌自定义图标（优先级最高）
             // 读取触发类型与上限（兜底默认值，避免 undefined）
             this.trigger_type = config.trigger_type ?? CardTriggerType.Instant;
             this.trigger_limit = config.trigger_limit ?? Infinity;
@@ -294,8 +301,29 @@ export class SkillBoxComp extends CCComp {
         }
     }
 
+    /**
+     * 根据技能等级切换 bg_node 下的颜色子节点显示。
+     * 等级与颜色对应关系（技能卡 wave 档位）：
+     *   card_lv 1 (wave 1) → green
+     *   card_lv 2 (wave 5) → blue
+     *   card_lv 3 (wave 8) → purple
+     */
+    private updateBgNode() {
+        if (!this.bg_node) return;
+        const lvToColor: Record<number, string> = {
+            1: "green",
+            2: "blue",
+            3: "purple",
+        };
+        const targetColor = lvToColor[this.card_lv];
+        this.bg_node.children.forEach(child => {
+            child.active = (child.name === targetColor);
+        });
+    }
+
     /**
      * 更新 UI：
+     *   - 背景：根据技能等级切换对应颜色子节点显示
      *   - 图标：从 uicons 图集获取
      *   - 剩余次数标签：
      *     * Interval / 事件型：显示剩余次数（按各自上限计算）
@@ -303,14 +331,28 @@ export class SkillBoxComp extends CCComp {
      *   - CD 遮罩：仅 Interval 类型展示冷却进度
      */
     updateUI() {
+        // 按技能等级切换背景颜色节点（与 getLvColor 等级配色一致）
+        this.updateBgNode();
+
         // 加载技能图标
         if (this.icon_node) {
-            const iconId = SkillSet[this.s_uuid]?.icon || `${this.s_uuid}`;
-            if (smc.uiconsAtlas) {
-                const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
-                if (frame && this.icon_node && this.icon_node.isValid) {
-                    let sprite = this.icon_node.getComponent(Sprite) || this.icon_node.addComponent(Sprite);
-                    sprite.spriteFrame = frame;
+            // 优先使用卡牌自定义 icon；未定义则按 trigger_type 自动取
+            let iconId: string | undefined = this.card_icon;
+            if (!iconId) {
+                if (this.trigger_type === CardTriggerType.Interval) {
+                    iconId = this.s_uuid ? SkillSet[this.s_uuid]?.icon : undefined;
+                } else if (this.trigger_type === CardTriggerType.Field) {
+                    const fieldUuid = this.field?.[0];
+                    iconId = fieldUuid ? FieldSkillSet[fieldUuid]?.icon : undefined;
+                }
+            }
+            if (this.icon_node && this.icon_node.isValid) {
+                let sprite = this.icon_node.getComponent(Sprite) || this.icon_node.addComponent(Sprite);
+                if (smc.uiconsAtlas && iconId) {
+                    const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
+                    sprite.spriteFrame = frame || null;  // 取不到时清空，避免残留
+                } else {
+                    sprite.spriteFrame = null;
                 }
             }
         }