refactor: 新增富文本描边工具并优化深色面板文案可读性

1. 新增RichOutline工具类，封装cc.RichText的outline标签包裹逻辑 2. 为所有道具/技能/英雄描述富文本添加黑色2px描边，提升深色背景下的可读性 3. 优化技能描述渲染逻辑： - 调整数值高亮色为更鲜亮的绿色 - 使用罗马数字作为技能等级徽章 - 移除升级预览弹窗的重复描述，改为当前/升级后双版本对比 - 简化升级确认弹窗的格式排版 4. 调整道具/技能预制体的文字颜色为白色，适配深色面板
2026-08-09 14:16:16 +08:00
parent 158dbeecde
commit b7f64a5aa7
11 changed files with 1295 additions and 1604 deletions
--- a/assets/script/game/map/CHeroComp.ts
+++ b/assets/script/game/map/CHeroComp.ts
@@ -23,6 +23,7 @@ import { CardConfig, CardType } from "../common/config/CardSet";
 import { HeroInfo } from "../common/config/heroSet";
 import { oops } from "db://oops-framework/core/Oops";
 import { GameEvent } from "../common/config/GameEvent";
+import { outlineRich } from "../common/RichOutline";
 import { smc } from "../common/SingletonModuleComp";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
 const { ccclass, property } = _decorator;
@@ -284,9 +285,10 @@ export class CHeroComp extends CCComp {
        this.updateBgNode();

        // 描述富文本：直接取 heroSet 的 info 字段（单条手写文案）
+        // outlineRich 为整段富文本包裹描边，提升深色面板可读性
        if (this.info_rich) {
            const desc = hero?.info || this.cardData.info || "";
-            this.info_rich.string = desc;
+            this.info_rich.string = outlineRich(desc);
            this.info_rich.node.active = !!desc;
        }

--- a/assets/script/game/map/EquipListComp.ts
+++ b/assets/script/game/map/EquipListComp.ts
@@ -18,6 +18,7 @@ import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/modu
 import { CardConfig } from "../common/config/CardSet";
 import { EquipPoolList } from "../common/config/EquipSet";
 import { buildEquipRich } from "../common/config/HeroSkillDesc";
+import { outlineRich } from "../common/RichOutline";
 import { oops } from "db://oops-framework/core/Oops";
 import { getCardIconId, setSpriteFrame } from "../common/CardIconHelper";
 import { GameEvent } from "../common/config/GameEvent";
@@ -155,9 +156,10 @@ export class EquipListComp extends CCComp {
        this.updateBgNode();

        // 属性词条富文本（多词条装备由 buildEquipRich 按 \n 多行渲染，数值实时高亮）
+        // outlineRich 为整段富文本包裹描边，提升深色面板可读性
        if (this.info_rich) {
            const desc = buildEquipRich(this.cardData.field || []);
-            this.info_rich.string = desc;
+            this.info_rich.string = outlineRich(desc);
            this.info_rich.node.active = !!desc;
        }

--- a/assets/script/game/map/HeroBoxComp.ts
+++ b/assets/script/game/map/HeroBoxComp.ts
@@ -22,7 +22,7 @@ import { HeroInfo } from "../common/config/heroSet";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
 import { Hero } from "../hero/Hero";
 import { FacSet, FightSet, getLvColor, NumberFormatter } from "../common/config/GameSet";
-import { buildSkillDesc, ISkillDescSource } from "../common/config/HeroSkillDesc";
+import { buildSkillDescMoreRich, ISkillDescSource } from "../common/config/HeroSkillDesc";
 import { MissionEconomy } from "./MissionEconomy";
 import { UIID } from "../common/config/GameUIConfig";
 import { HeroMoreCom } from "./HeroMoreCom";
@@ -180,12 +180,12 @@ export class HeroBoxComp extends CCComp {
            oops.message.dispatchEvent(GameEvent.ShowSmallTip, { type: "buy_coin", text: "金币不足" });
            return;
        }
-        const preview = this.buildUpgradePreview(nextLv);
+        const preview = this.buildUpgradePreview(heroLv, nextLv);

        // oops.gui 公共确认窗口（自定义 CommonPrompt：内容支持富文本高亮）
        oops.gui.open(UIID.Window, {
            title: `升级英雄`,
-            content: `<color=#C0392B>${heroName}</color> Lv.${heroLv} → <color=#1E8449>Lv.${nextLv}</color>\n消耗 <color=#E67E22>${cost}</color> 金币\n\n<b>升级后获得：</b>\n${preview}`,
+            content: `<color=#C0392B>${heroName}</color> Lv.${heroLv} → <color=#1E8449>Lv.${nextLv}</color>\n消耗 <color=#E67E22>${cost}</color> 金币\n\n${preview}`,
            okWord: "升级",
            cancelWord: "取消",
            needCancel: true,
@@ -205,28 +205,20 @@ export class HeroBoxComp extends CCComp {
    }

    /**
-     * 构建升级后新能力预览富文本。
-     * 数据源取 HeroInfo 静态配置（lv 置为目标等级），由描述标准层统一渲染，
-     * 与面板技能描述同一套文案规则，杜绝数值漂移。
+     * 构建升级前后对比富文本（当前能力 vs 升级后能力）。
+     * 数据源取 HeroInfo 静态配置，分别按当前 lv 与 nextLv 渲染同一份技能描述，
+     * 与英雄信息弹窗（buildSkillDescMoreRich）同一套文案规则，杜绝数值漂移。
     *
+     * @param heroLv 当前英雄等级
     * @param nextLv 目标等级
-     * @returns 多行富文本：属性成长 + 下一档触发技能/光环/复活/加成
+     * @returns 多行富文本：当前属性→升级后属性 + 当前技能 vs 升级后技能
     */
-    private buildUpgradePreview(nextLv: number): string {
+    private buildUpgradePreview(heroLv: number, nextLv: number): string {
        const hero = HeroInfo[this.model?.hero_uuid ?? 0];
        if (!hero) return "";

-        // ---- 属性成长（按 HERO_LV_MULTIPLIER 幂成长 + 等级额外加成） ----
-        const mult = Math.pow(FightSet.HERO_LV_MULTIPLIER, nextLv - 1);
-        const nextAp = Math.floor(hero.ap * mult + HeroBoxComp.sumBonus(hero.ap_bonus, nextLv));
-        const nextHp = Math.floor(hero.hp * mult + HeroBoxComp.sumBonus(hero.hp_bonus, nextLv));
-        const lines: string[] = [
-            `攻击 <color=#27AE60>${nextAp}</color>　生命 <color=#27AE60>${nextHp}</color>`
-        ];
-
-        // ---- 新能力（触发技能 / 驻场光环 / 复活 / 额外加成，取目标等级生效档） ----
-        const source: ISkillDescSource = {
-            lv: nextLv,
+        const buildSource = (lv: number): ISkillDescSource => ({
+            lv: lv,
            call: hero.call,
            dead: hero.dead,
            fstart: hero.fstart,
@@ -235,11 +227,29 @@ export class HeroBoxComp extends CCComp {
            atked: hero.atked,
            field: hero.field,
            revive: hero.revive,
-            // 预览仅展示增量，额外加成由上方属性成长体现，避免重复
+        });
+
+        // ---- 属性成长（按 HERO_LV_MULTIPLIER 幂成长 + 等级额外加成） ----
+        const attrLine = (lv: number): string => {
+            const mult = Math.pow(FightSet.HERO_LV_MULTIPLIER, lv - 1);
+            const ap = Math.floor(hero.ap * mult + HeroBoxComp.sumBonus(hero.ap_bonus, lv));
+            const hp = Math.floor(hero.hp * mult + HeroBoxComp.sumBonus(hero.hp_bonus, lv));
+            return `攻击 <color=#27AE60>${ap}</color>　生命 <color=#27AE60>${hp}</color>`;
        };
-        const skillDesc = buildSkillDesc(source);
-        if (skillDesc) lines.push(skillDesc);
-        return lines.join("\n");
+
+        // ---- 升级前后能力对比（当前 vs 升级后，同一份文案规则按 lv 渲染） ----
+        const curDesc = buildSkillDescMoreRich(buildSource(heroLv));
+        const nextDesc = buildSkillDescMoreRich(buildSource(nextLv));
+
+        return [
+            `<b>当前 Lv.${heroLv}：</b>`,
+            attrLine(heroLv),
+            curDesc,
+            ``,
+            `<b>升级后 Lv.${nextLv}：</b>`,
+            attrLine(nextLv),
+            nextDesc,
+        ].filter(s => s !== undefined).join("\n");
    }

    /** 累加等级额外加成（≤目标等级的所有档位） */
--- a/assets/script/game/map/ItemListComp.ts
+++ b/assets/script/game/map/ItemListComp.ts
@@ -20,6 +20,7 @@ import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/modu
 import { CardConfig, CardTriggerType, CKind } from "../common/config/CardSet";
 import { EquipPoolList } from "../common/config/EquipSet";
 import { buildCardDescRich, buildEquipRich } from "../common/config/HeroSkillDesc";
+import { outlineRich } from "../common/RichOutline";
 import { oops } from "db://oops-framework/core/Oops";
 import { getCardIconId, setSpriteFrame } from "../common/CardIconHelper";
 import { GameEvent } from "../common/config/GameEvent";
@@ -172,7 +173,7 @@ export class ItemListComp extends CCComp {
            } else {
                desc = this.cardData.info || "";
            }
-            this.info_rich.string = desc;
+            this.info_rich.string = outlineRich(desc);
            this.info_rich.node.active = !!desc;
        }

--- a/assets/script/game/map/SCardComp.ts
+++ b/assets/script/game/map/SCardComp.ts
@@ -18,6 +18,7 @@ import { CardConfig } from "../common/config/CardSet";
 import { SkillCardList } from "../common/config/SCardSet";
 import { SkillSet } from "../common/config/SkillSet";
 import { buildCardDescRich } from "../common/config/HeroSkillDesc";
+import { outlineRich } from "../common/RichOutline";
 import { oops } from "db://oops-framework/core/Oops";
 import { getCardIconId, setSpriteFrame } from "../common/CardIconHelper";
 import { GameEvent } from "../common/config/GameEvent";
@@ -196,9 +197,10 @@ export class SCardComp extends CCComp {
        this.updateBgNode();

        // 描述富文本（数值随 overrides 档位自动同步高亮）
+        // outlineRich 为整段富文本包裹描边，提升深色面板可读性
        if (this.info_rich) {
            const desc = buildCardDescRich(this.cardData);
-            this.info_rich.string = desc;
+            this.info_rich.string = outlineRich(desc);
            this.info_rich.node.active = !!desc;
        }