feat(技能UI): 添加技能冷却遮罩显示功能

为SkillBoxComp组件新增CD遮罩的初始化与帧更新逻辑，根据技能触发间隔动态计算冷却进度
调整多个技能相关预制体的布局，添加cd_mask精灵节点以支持冷却UI展示
优化部分技能框的UI排版与节点配置

assets/resources/gui/element/heromove.prefab

@@ -99,7 +99,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": 200,
+      "x": 183.23,
       "y": 177,
       "z": 0
     },
@@ -446,6 +446,8 @@
       "__id__": 0
     },
     "fileId": "b7CXK9ttxDz5mrJpDB4qA4",
+    "instance": null,
+    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -476,7 +478,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 100,
-      "y": 200,
+      "y": 215.538,
       "z": 0
     },
     "_lrot": {
@@ -781,8 +783,6 @@
       "__id__": 0
     },
     "fileId": "adFmHHJ5BBAY0CazvLDgGw",
-    "instance": null,
-    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -822,6 +822,8 @@
       "__id__": 0
     },
     "fileId": "36Na+WXPtJRbtR9UQnCyaj",
+    "instance": null,
+    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -852,7 +854,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 100,
-      "y": 117.776,
+      "y": 100.445,
       "z": 0
     },
     "_lrot": {
@@ -1157,8 +1159,6 @@
       "__id__": 0
     },
     "fileId": "96QFNOz55OyZEByIPMUwVi",
-    "instance": null,
-    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -1198,6 +1198,8 @@
       "__id__": 0
     },
     "fileId": "06y3o47t5NjZX9yks6rQWL",
+    "instance": null,
+    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -1227,7 +1229,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": 0,
+      "x": 14.536,
       "y": 250,
       "z": 0
     },
@@ -1574,6 +1576,8 @@
       "__id__": 0
     },
     "fileId": "f2j7DYVutESIJc8Q7SiM91",
+    "instance": null,
+    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {
@@ -1603,7 +1607,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": 0,
+      "x": 9.847,
       "y": 74.669,
       "z": 0
     },
@@ -1950,6 +1954,8 @@
       "__id__": 0
     },
     "fileId": "cdrD/D+WdDiZtHCrbPOfP7",
+    "instance": null,
+    "targetOverrides": null,
     "nestedPrefabInstanceRoots": null
   },
   {

assets/resources/gui/element/sbox.prefab

@@ -38,19 +38,25 @@
       },
       {
         "__id__": 56
+      },
+      {
+        "__id__": 64
+      },
+      {
+        "__id__": 72
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 62
+        "__id__": 78
       },
       {
-        "__id__": 64
+        "__id__": 80
       }
     ],
     "_prefab": {
-      "__id__": 66
+      "__id__": 82
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1151,7 +1157,7 @@
     "_lpos": {
       "__type__": "cc.Vec3",
       "x": 0,
-      "y": 35,
+      "y": 30.251,
       "z": 0
     },
     "_lrot": {
@@ -1163,8 +1169,8 @@
     },
     "_lscale": {
       "__type__": "cc.Vec3",
-      "x": 0.9,
+      "x": 0.7,
-      "y": 0.9,
+      "y": 0.7,
       "z": 1
     },
     "_mobility": 0,
@@ -1268,7 +1274,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "Label",
+    "_name": "cdui",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
@@ -1282,10 +1288,360 @@
       },
       {
         "__id__": 59
+      },
+      {
+        "__id__": 61
       }
     ],
     "_prefab": {
-      "__id__": 61
+      "__id__": 63
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 30,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0.7071067811865475,
+      "w": 0.7071067811865476
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 90
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 58
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 56,
+      "height": 56
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "8cuCMcJklDi6scy5fggLvA"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 60
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 114
+    },
+    "_spriteFrame": {
+      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@d8db6",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 3,
+    "_fillType": 2,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "cbySXykHtKaIF2cehy7c2w"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 56
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 62
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 2,
+    "_right": 2,
+    "_top": 2,
+    "_bottom": 2,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 56,
+    "_originalHeight": 58,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "8bo+PVCiFGga4aZPi+w2yF"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "b36dIBgWBNL7F+ZdA3AV7a",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "SkillFrame_01_Border_Blue",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 65
+      },
+      {
+        "__id__": 67
+      },
+      {
+        "__id__": 69
+      }
+    ],
+    "_prefab": {
+      "__id__": 71
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 30,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 0.4,
+      "y": 0.4,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 64
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 66
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 150,
+      "height": 150
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "bdhTW5lJ9PJamgUN/UmnC2"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 64
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 68
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@654c0",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "74QdiEVndDl5Vqf5Hjj8qY"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 64
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 70
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 56,
+    "_originalHeight": 58,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "17NmLP2VJDYqeNommRKja0"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "05/ViZ4x5CsKTMBvYgTNv7",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 73
+      },
+      {
+        "__id__": 75
+      }
+    ],
+    "_prefab": {
+      "__id__": 77
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1322,11 +1678,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 56
+      "__id__": 72
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 58
+      "__id__": 74
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -1350,11 +1706,11 @@
     "_objFlags": 0,
     "__editorExtras__": {},
     "node": {
-      "__id__": 56
+      "__id__": 72
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 60
+      "__id__": 76
     },
     "_customMaterial": null,
     "_srcBlendFactor": 2,
@@ -1435,12 +1791,12 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 63
+      "__id__": 79
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 70,
+      "width": 60,
-      "height": 70
+      "height": 60
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1463,13 +1819,16 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 65
+      "__id__": 81
     },
     "icon_node": {
       "__id__": 50
     },
     "info_label": {
-      "__id__": 59
+      "__id__": 75
+    },
+    "cd_mask": {
+      "__id__": 56
     },
     "_id": ""
   },

assets/resources/gui/role_controller.prefab

@@ -31,17 +31,17 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 444
+        "__id__": 445
       },
       {
-        "__id__": 446
+        "__id__": 447
       },
       {
-        "__id__": 448
+        "__id__": 449
       }
     ],
     "_prefab": {
-      "__id__": 450
+      "__id__": 451
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -1386,7 +1386,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": -270,
+      "x": -180,
       "y": 0,
       "z": 0
     },
@@ -2514,7 +2514,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": -90,
+      "x": 0,
       "y": 0,
       "z": 0
     },
@@ -3622,7 +3622,7 @@
         "__id__": 189
       }
     ],
-    "_active": true,
+    "_active": false,
     "_components": [
       {
         "__id__": 209
@@ -4764,7 +4764,7 @@
     },
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": 270,
+      "x": 180,
       "y": 0,
       "z": 0
     },
@@ -9317,7 +9317,7 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 720,
+      "width": 540,
       "height": 200
     },
     "_anchorPoint": {
@@ -9345,8 +9345,8 @@
     },
     "_alignFlags": 44,
     "_target": null,
-    "_left": 0,
+    "_left": 90,
-    "_right": 0,
+    "_right": 90,
     "_top": 0,
     "_bottom": -2,
     "_horizontalCenter": 0,
@@ -9714,6 +9714,9 @@
       },
       {
         "__id__": 443
+      },
+      {
+        "__id__": 444
       }
     ],
     "removedComponents": []
@@ -9816,6 +9819,16 @@
     ],
     "value": 1193.667
   },
+  {
+    "__type__": "CCPropertyOverrideInfo",
+    "targetInfo": {
+      "__id__": 436
+    },
+    "propertyPath": [
+      "_active"
+    ],
+    "value": false
+  },
   {
     "__type__": "cc.UITransform",
     "_name": "GameUI<UITransform>",
@@ -9826,7 +9839,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 445
+      "__id__": 446
     },
     "_contentSize": {
       "__type__": "cc.Size",
@@ -9854,7 +9867,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 447
+      "__id__": 448
     },
     "_alignFlags": 45,
     "_target": null,
@@ -9890,7 +9903,7 @@
     },
     "_enabled": true,
     "__prefab": {
-      "__id__": 449
+      "__id__": 450
     },
     "debugMode": false,
     "_id": ""

assets/script/game/map/CardComp.ts

@@ -298,7 +298,7 @@ export class CardComp extends CCComp {
                 reason: "",
                 uuid: this.cardData.uuid,
                 hero_lv: this.cardData.hero_lv ?? 1,
-                card_lv: this.cardData.pool_lv ?? 1
+                card_lv: this.cardData.base_pool_lv ?? this.cardData.pool_lv ?? 1
             };
             oops.message.dispatchEvent(GameEvent.UseHeroCard, guard);
             if (guard.cancel) {
@@ -355,9 +355,6 @@ export class CardComp extends CCComp {
             case CardType.Hero:
                 oops.message.dispatchEvent(GameEvent.CallHero, payload);
                 break;
-            case CardType.Skill:
-                oops.message.dispatchEvent(GameEvent.UseSkillCard, payload);
-                break;
             case CardType.SpecialUpgrade:
             case CardType.SpecialRefresh:
                 oops.message.dispatchEvent(GameEvent.UseSpecialCard, payload);
@@ -507,10 +504,7 @@ export class CardComp extends CCComp {
             }
         }
         
-        // 技能卡不支持上划移动
+        this.node.setPosition(this.restPosition.x, this.restPosition.y + deltaY, this.restPosition.z);
-        if (this.cardData.type !== CardType.Skill) {
-            this.node.setPosition(this.restPosition.x, this.restPosition.y + deltaY, this.restPosition.z);
-        }
     }
 
     /**
@@ -533,24 +527,13 @@ export class CardComp extends CCComp {
             oops.gui.remove(UIID.HInfo);
         }
 
-        // 技能卡改为点击使用
+        // 英雄卡保持上划使用
-        if (this.cardData.type === CardType.Skill) {
+        if (deltaY >= this.dragUseThreshold) {
-            if (Math.abs(deltaY) < 20 && Math.abs(deltaX) < 20) {
+            const used = this.useCard();
-                const used = this.useCard();
+            if (!used) {
-                if (!used) {
+                this.playReboundAnim();
-                    this.playReboundAnim();
-                }
-                return;
-            }
-        } else {
-            // 英雄卡保持上划使用
-            if (deltaY >= this.dragUseThreshold) {
-                const used = this.useCard();
-                if (!used) {
-                    this.playReboundAnim();
-                }
-                return;
             }
+            return;
         }
 
         this.playReboundAnim();
@@ -722,19 +705,6 @@ export class CardComp extends CCComp {
             this.hp_node.active = true;
             // 英雄卡：隐藏技能信息节点
             if (this.info_node) this.info_node.active = false;
-        } else if (this.card_type === CardType.Skill) {
-            if (this.lvl_node) this.lvl_node.node.active = false;
-            // 技能卡：显示技能名 + 品质后缀 + 描述
-            const skill = SkillSet[this.card_uuid];
-            const skillCard = CardPoolList.find(c => c.uuid === this.card_uuid);
-            const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1));
-            const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : "";
-            this.setLabel(this.name_node, `${spSuffix}${skillCard?.name || skill?.name || ""}${spSuffix}`);
-
-            this.ap_node.active = false;
-            this.hp_node.active = false;
-            // 技能卡：显示技能信息节点
-            if (this.info_node) this.info_node.active = true;
         } else {
             if (this.lvl_node) this.lvl_node.node.active = false;
             // 特殊卡（升级 / 刷新）：显示卡名 + 品质后缀 + 描述
@@ -758,11 +728,6 @@ export class CardComp extends CCComp {
             }
         }
 
-        if (this.name_node) {
-            const currentPos = this.name_node.position;
-            this.name_node.setPosition(currentPos.x, -70, currentPos.z);
-        }
-
         // ---- 图标 ----
         const iconNode = this.icon_node as Node;
         if (this.card_type === CardType.Hero) {
@@ -880,10 +845,6 @@ export class CardComp extends CCComp {
             });
         });
 
-        if (this.name_node) {
-            const currentPos = this.name_node.position;
-            this.name_node.setPosition(currentPos.x, -70, currentPos.z);
-        }
         this.iconVisualToken += 1;
         this.setLabel(this.name_node, "");
         if (this.cost_node) {
@@ -936,9 +897,6 @@ export class CardComp extends CCComp {
      * @returns     图标帧名称
      */
     private resolveCardIconId(type: CardType, uuid: number): string {
-        if (type === CardType.Skill) {
-            return SkillSet[uuid]?.icon || `${uuid}`;
-        }
         if (type === CardType.Hero) {
             return HeroInfo[uuid]?.icon || `${uuid}`;
         }

assets/script/game/map/MissionCardComp.ts

@@ -39,6 +39,7 @@ import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/modu
 import { GameEvent } from "../common/config/GameEvent";
 import { CARD_POOL_INIT_LEVEL, CARD_POOL_MAX_LEVEL, CARD_POOL_UPGRADE_DISCOUNT_PER_WAVE, CardConfig, CardType, CardsUpSet, drawCardsByRule, getCardsByLv, SpecialRefreshCardList, SpecialRefreshHeroType, SpecialUpgradeCardList } from "../common/config/CardSet";
 import { CardComp } from "./CardComp";
+import { SCardComp } from "./SCardComp";
 import { oops } from "db://oops-framework/core/Oops";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
 import { smc } from "../common/SingletonModuleComp";
@@ -138,7 +139,7 @@ export class MissionCardComp extends CCComp {
     /** 四个槽位对应的 CardComp 控制器缓存（有序数组） */
     private cardComps: CardComp[] = [];
     /** 技能卡槽控制器缓存 */
-    private skillCardComps: CardComp[] = [];
+    private skillCardComps: SCardComp[] = [];
     /** 当前卡池等级（仅影响抽卡来源，不直接改卡槽现有内容） */
     private poolLv: number = CARD_POOL_INIT_LEVEL;
     /** 是否已缓存卡牌面板基准缩放 */
@@ -671,8 +672,8 @@ export class MissionCardComp extends CCComp {
 
         const skillNodes = [this.skill_card1, this.skill_card2, this.skill_card3];
         this.skillCardComps = skillNodes
-            .map(node => node?.getComponent(CardComp))
+            .map(node => node?.getComponent(SCardComp))
-            .filter((comp): comp is CardComp => !!comp);
+            .filter((comp): comp is SCardComp => !!comp);
     }
 
     // ======================== 核心业务：抽卡 & 升级 ========================

assets/script/game/map/SCardComp.ts

@@ -0,0 +1,387 @@
+/**
+ * @file SCardComp.ts
+ * @description 技能卡牌槽位组件（UI 视图层）
+ *
+ * 职责：
+ *   1. 管理技能卡牌槽位的显示和交互（点击使用）。
+ *   2. 渲染技能卡面。
+ *   3. 触发使用时扣除费用并分发 UseSkillCard 事件。
+ */
+import { mLogger } from "../common/Logger";
+import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteAtlas, Tween, tween, UIOpacity, Vec3, UITransform, Widget } 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, CardType, CKind, CardPoolList } from "../common/config/CardSet";
+import { CardBgComp } from "./CardBgComp";
+import { SkillSet } from "../common/config/SkillSet";
+import { GameEvent } from "../common/config/GameEvent";
+import { oops } from "db://oops-framework/core/Oops";
+import { smc } from "../common/SingletonModuleComp";
+import { MissionEconomy } from "./MissionEconomy";
+
+const { ccclass, property } = _decorator;
+
+@ccclass('SCardComp')
+@ecs.register('SCardComp', false)
+export class SCardComp extends CCComp {
+    private debugMode: boolean = true;
+
+    @property(Node)
+    name_node: Node = null!
+    @property(Node)
+    icon_node: Node = null!
+    @property(Node)
+    cost_node: Node = null!
+    @property(Node)
+    Ckind_node: Node = null!
+    @property(Node)
+    BG_node: Node = null!
+    @property(Node)
+    info_node: Node = null!
+
+    card_cost: number = 0
+    card_type: CardType = CardType.Skill
+    card_uuid: number = 0
+
+    private cardData: CardConfig | null = null;
+    private touchStartY: number = 0;
+    private touchStartX: number = 0;
+    private isDragging: boolean = false;
+    private isUsing: boolean = false;
+    private restPosition: Vec3 = new Vec3();
+    private hasFixedBasePosition: boolean = false;
+    private fixedBaseY: number = 0;
+    private fixedBaseZ: number = 0;
+    private opacityComp: UIOpacity | null = null;
+    private iconVisualToken: number = 0;
+
+    onLoad() {
+        this.bindEvents();
+        this.restPosition = this.node.position.clone();
+        this.opacityComp = this.node.getComponent(UIOpacity) || this.node.addComponent(UIOpacity);
+        this.opacityComp.opacity = 255;
+        this.applyEmptyUI();
+    }
+
+    onDestroy() {
+        super.onDestroy();
+        this.unbindEvents();
+    }
+
+    init() { }
+    start() {
+        this.node.active = true;
+    }
+
+    applyDrawCard(data: CardConfig | null): boolean {
+        if (!data) return false;
+        this.cardData = data;
+        this.card_uuid = data.uuid;
+        this.card_type = data.type;
+        this.card_cost = Math.floor(data.cost ?? 0);
+
+        this.node.active = true;
+        this.applyCardUI();
+        this.playRefreshAnim();
+        mLogger.log(this.debugMode, "SCardComp", "skill card updated", {
+            uuid: this.card_uuid,
+            cost: this.card_cost
+        });
+        return true;
+    }
+
+    useCard(): CardConfig | null {
+        if (!this.cardData || this.isUsing) return null;
+        const cardCost = this.card_cost;
+
+        const success = MissionEconomy.spendCoin(cardCost);
+        if (!success) {
+            oops.gui.toast(`金币不足，需要${cardCost}`);
+            this.playReboundAnim();
+            return null;
+        }
+
+        smc.vmdata.scores.refresh_hit_count++;
+        this.isUsing = true;
+        const used = this.cardData;
+        
+        this.playUseDisappearAnim(() => {
+            this.clearAfterUse();
+            this.isUsing = false;
+            oops.message.dispatchEvent(GameEvent.UseSkillCard, used);
+        });
+        return used;
+    }
+
+    hasCard(): boolean {
+        return !!this.cardData;
+    }
+
+    setSlotPosition(x: number) {
+        const current = this.node.position;
+        if (!this.hasFixedBasePosition) {
+            this.fixedBaseY = current.y;
+            this.fixedBaseZ = current.z;
+            this.hasFixedBasePosition = true;
+        }
+        this.restPosition = new Vec3(x, this.fixedBaseY, this.fixedBaseZ);
+        if (!this.isDragging && !this.isUsing) {
+            this.node.setPosition(this.restPosition);
+        }
+    }
+
+    clearBySystem() {
+        Tween.stopAllByTarget(this.node);
+        if (this.opacityComp) {
+            Tween.stopAllByTarget(this.opacityComp);
+            this.opacityComp.opacity = 255;
+        }
+        this.cardData = null;
+        this.card_uuid = 0;
+        this.card_cost = 0;
+        this.isDragging = false;
+        this.isUsing = false;
+        this.node.setPosition(this.restPosition);
+        this.node.setScale(new Vec3(1, 1, 1));
+        this.applyEmptyUI();
+        this.node.active = false;
+    }
+
+    private clearAfterUse() {
+        Tween.stopAllByTarget(this.node);
+        if (this.opacityComp) {
+            Tween.stopAllByTarget(this.opacityComp);
+            this.opacityComp.opacity = 255;
+        }
+        this.cardData = null;
+        this.card_uuid = 0;
+        this.card_cost = 0;
+        this.isDragging = false;
+        this.node.setPosition(this.restPosition);
+        this.node.setScale(new Vec3(1, 1, 1));
+        this.applyEmptyUI();
+        this.node.active = false;
+    }
+
+    private bindEvents() {
+        this.node.on(NodeEventType.TOUCH_START, this.onCardTouchStart, this);
+        this.node.on(NodeEventType.TOUCH_MOVE, this.onCardTouchMove, this);
+        this.node.on(NodeEventType.TOUCH_END, this.onCardTouchEnd, this);
+        this.node.on(NodeEventType.TOUCH_CANCEL, this.onCardTouchCancel, this);
+    }
+
+    private unbindEvents() {
+        if (this.node && this.node.isValid) {
+            this.node.off(NodeEventType.TOUCH_START, this.onCardTouchStart, this);
+            this.node.off(NodeEventType.TOUCH_MOVE, this.onCardTouchMove, this);
+            this.node.off(NodeEventType.TOUCH_END, this.onCardTouchEnd, this);
+            this.node.off(NodeEventType.TOUCH_CANCEL, this.onCardTouchCancel, this);
+        }
+    }
+
+    private onCardTouchStart(event: EventTouch) {
+        if (!this.cardData || this.isUsing) return;
+        this.touchStartY = event.getUILocation().y;
+        this.touchStartX = event.getUILocation().x;
+        this.isDragging = true;
+    }
+
+    private onCardTouchMove(event: EventTouch) {
+        if (!this.isDragging || !this.cardData || this.isUsing) return;
+        // 技能卡不支持上拉移动
+    }
+
+    private onCardTouchEnd(event: EventTouch) {
+        if (!this.isDragging || !this.cardData || this.isUsing) return;
+        const endY = event.getUILocation().y;
+        const endX = event.getUILocation().x;
+        const deltaY = endY - this.touchStartY;
+        const deltaX = endX - this.touchStartX;
+        this.isDragging = false;
+
+        // 点击触发
+        if (Math.abs(deltaY) < 20 && Math.abs(deltaX) < 20) {
+            const used = this.useCard();
+            if (!used) {
+                this.playReboundAnim();
+            }
+            return;
+        }
+        this.playReboundAnim();
+    }
+
+    private onCardTouchCancel() {
+        if (!this.isDragging || this.isUsing) return;
+        this.isDragging = false;
+        this.playReboundAnim();
+    }
+
+    private applyCardUI() {
+        if (!this.cardData) {
+            this.applyEmptyUI();
+            return;
+        }
+        this.iconVisualToken += 1;
+        if (this.opacityComp) this.opacityComp.opacity = 255;
+        this.node.setPosition(this.restPosition.x, this.restPosition.y, this.restPosition.z);
+
+        const kindName = CKind[this.cardData.kind];
+
+        if (this.BG_node) {
+            const bgLv = this.cardData.base_pool_lv ?? this.cardData.pool_lv;
+            this.BG_node.children.forEach(child => {
+                child.active = (child.name === kindName);
+                const bg = child.getComponent(CardBgComp);
+                if (bg) child.active ? bg.apply(bgLv) : bg.clear();
+            });
+        }
+
+        if (this.Ckind_node) {
+            this.Ckind_node.children.forEach(child => {
+                child.active = (child.name === kindName);
+            });
+        }
+
+        this.node.children.forEach(child => {
+            const widget = child.getComponent(Widget);
+            if (widget) widget.updateAlignment();
+            child.children.forEach(subChild => {
+                const subWidget = subChild.getComponent(Widget);
+                if (subWidget) subWidget.updateAlignment();
+            });
+        });
+
+        const skill = SkillSet[this.card_uuid];
+        const skillCard = CardPoolList.find(c => c.uuid === this.card_uuid);
+        const card_lv = Math.max(1, Math.floor(this.cardData.card_lv ?? 1));
+        const spSuffix = card_lv >= 2 ? "★".repeat(card_lv - 1) : "";
+        this.setLabel(this.name_node, `${spSuffix}${skillCard?.name || skill?.name || ""}${spSuffix}`);
+
+        if (this.info_node) this.info_node.active = true;
+
+        if (this.cost_node) {
+            this.cost_node.active = true;
+            const numNode = this.cost_node.getChildByName("num");
+            if (numNode) {
+                this.setLabel(numNode, `${this.card_cost}`);
+            }
+        }
+
+        const iconNode = this.icon_node as Node;
+        if (iconNode) {
+            iconNode.setScale(new Vec3(1, 1, 1));
+            this.clearIconAnimation(iconNode);
+            const iconId = skill?.icon || `${this.card_uuid}`;
+            this.updateIcon(iconNode, iconId);
+        }
+    }
+
+    private playRefreshAnim() {
+        Tween.stopAllByTarget(this.node);
+        this.node.setPosition(this.restPosition);
+        this.node.setScale(new Vec3(0.92, 0.92, 1));
+        tween(this.node)
+            .to(0.08, { scale: new Vec3(1.06, 1.06, 1) })
+            .to(0.1, { scale: new Vec3(1, 1, 1) })
+            .start();
+    }
+
+    private playReboundAnim() {
+        Tween.stopAllByTarget(this.node);
+        tween(this.node)
+            .to(0.12, {
+                position: new Vec3(this.restPosition.x, this.restPosition.y, this.restPosition.z),
+                scale: new Vec3(1, 1, 1)
+            })
+            .start();
+    }
+
+    private playUseDisappearAnim(onComplete: () => void) {
+        const targetPos = new Vec3(this.restPosition.x, this.restPosition.y + 120, this.restPosition.z);
+        Tween.stopAllByTarget(this.node);
+        if (this.opacityComp) {
+            Tween.stopAllByTarget(this.opacityComp);
+            this.opacityComp.opacity = 255;
+            tween(this.opacityComp)
+                .to(0.18, { opacity: 0 })
+                .start();
+        }
+        tween(this.node)
+            .to(0.18, {
+                position: targetPos,
+                scale: new Vec3(0.8, 0.8, 1)
+            })
+            .call(onComplete)
+            .start();
+    }
+
+    private applyEmptyUI() {
+        if (this.BG_node) {
+            this.BG_node.children.forEach(child => {
+                child.active = false;
+                const bg = child.getComponent(CardBgComp);
+                if (bg) bg.clear();
+            });
+        }
+        this.node.children.forEach(child => {
+            const widget = child.getComponent(Widget);
+            if (widget) widget.updateAlignment();
+            child.children.forEach(subChild => {
+                const subWidget = subChild.getComponent(Widget);
+                if (subWidget) subWidget.updateAlignment();
+            });
+        });
+        this.iconVisualToken += 1;
+        this.setLabel(this.name_node, "");
+        if (this.cost_node) {
+            const numNode = this.cost_node.getChildByName("num");
+            if (numNode) {
+                this.setLabel(numNode, "");
+            }
+            this.cost_node.active = false;
+        }
+        if (this.Ckind_node) {
+            this.Ckind_node.children.forEach(child => {
+                child.active = false;
+            });
+        }
+        if (this.info_node) this.info_node.active = false;
+
+        if (this.icon_node) {
+            (this.icon_node as Node).setScale(new Vec3(1, 1, 1));
+            this.clearIconAnimation(this.icon_node as Node);
+            const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.getComponentInChildren(Sprite);
+            if (sprite) sprite.spriteFrame = null;
+        }
+    }
+
+    private setLabel(node: Node | null, value: string) {
+        if (!node) return;
+        const label = node.getComponent(Label) || node.getComponentInChildren(Label);
+        if (label) label.string = value;
+    }
+
+    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;
+        }
+    }
+
+    private clearIconAnimation(node: Node) {
+        const anim = node?.getComponent(Animation);
+        if (!anim) return;
+        anim.stop();
+        const clips = (anim as any).clips as AnimationClip[] | undefined;
+        if (!clips || clips.length === 0) return;
+        [...clips].forEach(clip => anim.removeClip(clip, true));
+    }
+
+    /** ECS 组件移除时的释放钩子：销毁节点 */
+    reset() {
+        this.node.destroy();
+    }
+}

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

@@ -0,0 +1 @@
+{"ver":"4.0.24","importer":"typescript","imported":true,"uuid":"3fe4ed29-26ed-4aef-9feb-a7a451a31f99","files":[],"subMetas":{},"userData":{}}

assets/script/game/map/SkillBoxComp.ts

@@ -26,7 +26,7 @@
  *   - smc.mission —— 游戏运行状态
  */
 import { mLogger } from "../common/Logger";
-import { _decorator, Node, Prefab, Sprite, Label, Vec3, resources, SpriteAtlas } from "cc";
+import { _decorator, Node, Prefab, Sprite, Label, Vec3, resources, SpriteAtlas, tween, v3, 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 { CardPoolList } from "../common/config/CardSet";
@@ -56,6 +56,9 @@ export class SkillBoxComp extends CCComp {
     @property(Label)
     private info_label: Label = null;
 
+    /** cd计时遮罩 */
+    @property({ type: Node })
+    private cd_mask: Node = null;
     // ======================== 技能配置 ========================
 
     /** 技能 UUID */
@@ -175,11 +178,23 @@ export class SkillBoxComp extends CCComp {
         if (this.info_label) {
             if (!this.is_instant) {
                 const remain = Math.max(0, this.trigger_times - this.current_trigger_times);
-                this.info_label.string = `${remain}次`;
+                this.info_label.string = `${remain}`;
             } else {
                 this.info_label.string = "";
             }
         }
+
+        // 初始化或重置 CD 遮罩表现
+        if (this.cd_mask && this.cd_mask.isValid) {
+            let sprite = this.cd_mask.getComponent(Sprite);
+            if (sprite) {
+                if (this.is_instant || this.trigger_interval <= 0) {
+                    sprite.fillRange = 0; // 无需冷却，直接归 0
+                } else {
+                    sprite.fillRange = Math.max(0, 1 - (this.timer / this.trigger_interval));
+                }
+            }
+        }
     }
 
     // ======================== 战斗状态事件 ========================
@@ -271,6 +286,15 @@ export class SkillBoxComp extends CCComp {
 
         if (this.current_trigger_times < this.trigger_times) {
             this.timer += dt;
+            
+            // 更新 CD 遮罩 (fillRange 从 1 降到 0)
+            if (this.cd_mask && this.cd_mask.isValid && this.trigger_interval > 0) {
+                let sprite = this.cd_mask.getComponent(Sprite);
+                if (sprite) {
+                    sprite.fillRange = Math.max(0, 1 - (this.timer / this.trigger_interval));
+                }
+            }
+
             if (this.timer >= this.trigger_interval) {
                 this.timer = 0;
                 this.triggerSkill();
@@ -304,6 +328,17 @@ export class SkillBoxComp extends CCComp {
         const parentPos = this.node.parent ? this.node.parent.position : new Vec3(0, 0, 0);
         targetPos.set(parentPos.x + localPos.x, parentPos.y + localPos.y, 0);
 
+        // 播放技能释放缓动动画：图标放大再缩回
+        if (this.node && this.node.isValid) {
+            // 停止之前的缓动，防止快速重复触发导致缩放异常
+            Tween.stopAllByTarget(this.node);
+            this.node.scale = v3(1, 1, 1);
+            tween(this.node)
+                .to(0.1, { scale: v3(1.3, 1.3, 1.3) })
+                .to(0.15, { scale: v3(1, 1, 1) })
+                .start();
+        }
+
         oops.message.dispatchEvent(GameEvent.TriggerSkill, {
             s_uuid: this.s_uuid,
             isCardSkill: true,       // 标记为卡牌技能（区别于英雄自身技能）