refactor(common): 抽离卡牌图标处理逻辑为通用工具类

1. 新建CardIconHelper工具类统一处理卡牌图标解析和设置逻辑
2. 移除SkillBoxComp、SCardComp、EquipListComp、ItemListComp中的重复图标处理代码
3. 统一所有卡牌组件的图标加载优先级和处理流程
4. 新增卡牌背景颜色随等级切换的通用逻辑

assets/script/game/map/ItemListComp.ts

@@ -14,7 +14,7 @@
  *   本组件同时服务于装备商店和商品商店，通过 cardData 的 trigger_type / kind 自动判断类型。
  */
 import { mLogger } from "../common/Logger";
-import { _decorator, Node, Sprite, Label, NodeEventType, Vec3, UIOpacity, tween, Tween } from "cc";
+import { _decorator, Node, Label, NodeEventType, Vec3, UIOpacity, tween, Tween } 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 { CardConfig, CardTriggerType, CKind } from "../common/config/CardSet";
@@ -22,8 +22,8 @@ import { EquipPoolList } from "../common/config/EquipSet";
 import { SkillCardList } from "../common/config/SCardSet";
 import { FieldSkillSet, SkillSet } from "../common/config/SkillSet";
 import { oops } from "db://oops-framework/core/Oops";
+import { getCardIconId, setSpriteFrame } from "../common/CardIconHelper";
 import { GameEvent } from "../common/config/GameEvent";
-import { smc } from "../common/SingletonModuleComp";
 import { UIID } from "../common/config/GameUIConfig";
 import { MissionEconomy } from "./MissionEconomy";
 
@@ -46,7 +46,7 @@ export class ItemListComp extends CCComp {
     @property({ type: Node })
     private icon_node: Node = null;
 
-    /** 背景节点 */
+    /** 背景节点（含 green/blue/purple/red/yellow 颜色子节点，按 card_lv 激活） */
     @property({ type: Node })
     private bg_node: Node = null;
 
@@ -175,6 +175,9 @@ export class ItemListComp extends CCComp {
             this.level_label.string = lv >= 2 ? "★".repeat(lv - 1) : "";
         }
 
+        // 背景：按 card_lv 激活对应颜色子节点（1→green 2→blue 3→purple 4→red 5→yellow）
+        this.updateBgNode();
+
         // 描述/属性词条（最多显示 3 条）
         const fieldLabels = [this.fied1, this.fied2, this.fied3];
         if (isEquip) {
@@ -218,21 +221,11 @@ export class ItemListComp extends CCComp {
             }
         }
 
-        // 图标：优先用卡牌自定义 icon，装备取第一个 field 词条图标，商品取技能图标
+        // 图标（共享工具解析：cardData.icon → FieldSkillSet → SkillSet）
         if (this.icon_node) {
-            let iconId = "";
-            if (this.cardData.icon) {
-                iconId = this.cardData.icon;
-            } else if (isEquip) {
-                const fields = this.cardData.field || [];
-                if (fields.length > 0) {
-                    iconId = FieldSkillSet[fields[0]]?.icon || "";
-                }
-            } else if (isPotion && this.cardData.skill) {
-                iconId = SkillSet[this.cardData.skill]?.icon || "";
-            }
+            const iconId = getCardIconId(this.cardData);
             if (iconId) {
-                this.updateIcon(this.icon_node, iconId);
+                setSpriteFrame(this.icon_node, iconId);
             }
         }
 
@@ -250,6 +243,30 @@ export class ItemListComp extends CCComp {
         this.playEnterAnim();
     }
 
+    /**
+     * 根据 card_lv 切换 bg_node 下的颜色子节点显示。
+     * 等级与颜色对应关系：
+     *   card_lv 1 → green
+     *   card_lv 2 → blue
+     *   card_lv 3 → purple
+     *   card_lv 4 → red
+     *   card_lv 5 → yellow
+     */
+    private updateBgNode() {
+        if (!this.bg_node || !this.cardData) return;
+        const lvToColor: Record<number, string> = {
+            1: "green",
+            2: "blue",
+            3: "purple",
+            4: "red",
+            5: "yellow",
+        };
+        const targetColor = lvToColor[this.cardData.card_lv ?? 1];
+        this.bg_node.children.forEach(child => {
+            child.active = (child.name === targetColor);
+        });
+    }
+
     // ======================== 动画 ========================
 
     /** 播放入场动画：卡牌由小变大（scale 0→1）+ 淡入 */
@@ -348,17 +365,6 @@ export class ItemListComp extends CCComp {
             .start();
     }
 
-    /** 更新图标精灵 */
-    private updateIcon(node: Node, iconId: string) {
-        if (!node || !iconId) return;
-        const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
-        if (!sprite) return;
-        if (smc.uiconsAtlas) {
-            const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
-            sprite.spriteFrame = frame || null;
-        }
-    }
-
     // ======================== 长按信息框 ========================
 
     /** 长按时长（秒） */