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

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

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;
                 }
             }
         }