refactor(map): 抽象卡牌背景颜色逻辑，简化代码

将多个文件中重复的卡池颜色切换逻辑提取为CardBgComp组件，
减少重复代码，提高可维护性

assets/resources/gui/element/cardbg.prefab

@@ -44,10 +44,13 @@
       },
       {
         "__id__": 196
+      },
+      {
+        "__id__": 198
       }
     ],
     "_prefab": {
-      "__id__": 198
+      "__id__": 200
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -4380,6 +4383,24 @@
     "__type__": "cc.CompPrefabInfo",
     "fileId": "1fB2CjJqJFgo9e1LJ6EyaL"
   },
+  {
+    "__type__": "d42d0cGD3NLYoBJEImijeH3",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 199
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "1fQvT1A5hItJZd6AwSBLLo"
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/script/game/map/CardBgComp.ts

@@ -0,0 +1,18 @@
+import { _decorator, Component } from "cc";
+
+const { ccclass } = _decorator;
+
+const POOL_COLORS = ["green", "blue", "purple", "yellow", "red"];
+
+@ccclass('CardBgComp')
+export class CardBgComp extends Component {
+
+    apply(poolLv: number) {
+        const color = POOL_COLORS[Math.min(poolLv, 5) - 1];
+        this.node.children.forEach(c => c.active = c.name === color);
+    }
+
+    clear() {
+        this.node.children.forEach(c => c.active = false);
+    }
+}

assets/script/game/map/CardBgComp.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d42d0706-0f73-4b62-8049-1089a28de1f7",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/script/game/map/CardComp.ts

@@ -24,6 +24,7 @@ import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEven
 import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
 import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
 import { CardConfig, CardType, SpecialRefreshCardList, SpecialUpgradeCardList, CKind, CardPoolList } from "../common/config/CardSet";
+import { CardBgComp } from "./CardBgComp";
 import { HeroInfo } from "../common/config/heroSet";
 import { SkillSet } from "../common/config/SkillSet";
 import { GameEvent } from "../common/config/GameEvent";
@@ -605,22 +606,11 @@ export class CardComp extends CCComp {
         // ---- 卡牌种类标识（近战 / 远程 / 辅助等） ----
         const kindName = CKind[this.cardData.kind];
 
-        const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
-        const poolColorIdx = Math.min(this.cardData.pool_lv, 5) - 1;
-        const activeColor = poolColorNames[poolColorIdx];
-
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = (child.name === kindName);
-                if (child.active) {
+                const bg = child.getComponent(CardBgComp);
-                    child.children.forEach(colorChild => {
+                if (bg) child.active ? bg.apply(this.cardData.pool_lv) : bg.clear();
-                        colorChild.active = (colorChild.name === activeColor);
-                    });
-                } else {
-                    child.children.forEach(colorChild => {
-                        colorChild.active = false;
-                    });
-                }
             });
         }
 
@@ -882,9 +872,8 @@ export class CardComp extends CCComp {
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = false;
-                child.children.forEach(colorChild => {
+                const bg = child.getComponent(CardBgComp);
-                    colorChild.active = false;
+                if (bg) bg.clear();
-                });
             });
         }
 

assets/script/game/map/CardLiteComp.ts

@@ -23,6 +23,7 @@ import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEven
 import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
 import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
 import { CardConfig, CardType, SpecialRefreshCardList, SpecialUpgradeCardList, CKind, CardPoolList } from "../common/config/CardSet";
+import { CardBgComp } from "./CardBgComp";
 import { HeroInfo } from "../common/config/heroSet";
 import { SkillSet } from "../common/config/SkillSet";
 import { getLvColor } from "../common/config/GameSet";
@@ -218,22 +219,11 @@ export class CardLiteComp extends CCComp {
 
         const kindName = CKind[this.cardData.kind];
 
-        const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
-        const poolColorIdx = Math.min(this.cardData.pool_lv, 5) - 1;
-        const activeColor = poolColorNames[poolColorIdx];
-
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = (child.name === kindName);
-                if (child.active) {
+                const bg = child.getComponent(CardBgComp);
-                    child.children.forEach(colorChild => {
+                if (bg) child.active ? bg.apply(this.cardData.pool_lv) : bg.clear();
-                        colorChild.active = (colorChild.name === activeColor);
-                    });
-                } else {
-                    child.children.forEach(colorChild => {
-                        colorChild.active = false;
-                    });
-                }
             });
         }
 
@@ -307,9 +297,8 @@ export class CardLiteComp extends CCComp {
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = false;
-                child.children.forEach(colorChild => {
+                const bg = child.getComponent(CardBgComp);
-                    colorChild.active = false;
+                if (bg) bg.clear();
-                });
             });
         }
         if (this.icon_node) {

assets/script/game/map/HInfoComp.ts

@@ -37,6 +37,7 @@ import { MissionHeroComp } from "./MissionHeroComp";
 import { MoveComp } from "../hero/MoveComp";
 import { FacSet, getLvColor } from "../common/config/GameSet";
 import { CKind } from "../common/config/CardSet";
+import { CardBgComp } from "./CardBgComp";
 import { MissionEconomy } from "./MissionEconomy";
 
 const {property, ccclass } = _decorator;
@@ -158,22 +159,12 @@ export class HInfoComp extends CCComp {
             this.lv_node.color = getLvColor(heroLv);
         }
 
-        const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
-        const poolColorIdx = Math.min(this.previewPoolLv, 5) - 1;
-        const activeColor = poolColorNames[poolColorIdx];
         const kindName = CKind[CKind.Hero];
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = (child.name === kindName);
-                if (child.active) {
+                const bg = child.getComponent(CardBgComp);
-                    child.children.forEach(colorChild => {
+                if (bg) child.active ? bg.apply(this.previewPoolLv) : bg.clear();
-                        colorChild.active = (colorChild.name === activeColor);
-                    });
-                } else {
-                    child.children.forEach(colorChild => {
-                        colorChild.active = false;
-                    });
-                }
             });
         }
 
@@ -279,22 +270,12 @@ export class HInfoComp extends CCComp {
         }
         
         // ---- 卡池等级标识 ----
-        const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
-        const poolColorIdx = Math.min(this.model.pool_lv ?? 1, 5) - 1;
-        const activeColor = poolColorNames[poolColorIdx];
         const kindName = CKind[CKind.Hero];
         if (this.BG_node) {
             this.BG_node.children.forEach(child => {
                 child.active = (child.name === kindName);
-                if (child.active) {
+                const bg = child.getComponent(CardBgComp);
-                    child.children.forEach(colorChild => {
+                if (bg) child.active ? bg.apply(this.model.pool_lv ?? 1) : bg.clear();
-                        colorChild.active = (colorChild.name === activeColor);
-                    });
-                } else {
-                    child.children.forEach(colorChild => {
-                        colorChild.active = false;
-                    });
-                }
             });
         }
         

assets/script/game/map/HerosListComp.ts

@@ -25,6 +25,7 @@ import { mLogger } from "../common/Logger";
 import { HeroInfo, HeroList } from "../common/config/heroSet";
 import { buildSkillDesc } from "../common/config/HeroSkillDesc";
 import { CKind } from "../common/config/CardSet";
+import { CardBgComp } from "./CardBgComp";
 import { CardLiteComp } from "./CardLiteComp";
 
 const { property, ccclass } = _decorator;
@@ -212,21 +213,11 @@ export class HerosListComp extends CCComp {
 
     private updatePoolLvBg(poolLv: number) {
         if (!this.BG_node) return
-        const poolColorNames = ["green", "blue", "purple", "yellow", "red"];
-        const poolColorIdx = Math.min(poolLv, 5) - 1;
-        const activeColor = poolColorNames[poolColorIdx];
         const kindName = CKind[CKind.Hero];
         this.BG_node.children.forEach(child => {
             child.active = (child.name === kindName);
-            if (child.active) {
+            const bg = child.getComponent(CardBgComp);
-                child.children.forEach(colorChild => {
+            if (bg) child.active ? bg.apply(poolLv) : bg.clear();
-                    colorChild.active = (colorChild.name === activeColor);
-                });
-            } else {
-                child.children.forEach(colorChild => {
-                    colorChild.active = false;
-                });
-            }
         });
     }