refactor: 新增富文本描边工具并优化深色面板文案可读性
1. 新增RichOutline工具类,封装cc.RichText的outline标签包裹逻辑 2. 为所有道具/技能/英雄描述富文本添加黑色2px描边,提升深色背景下的可读性 3. 优化技能描述渲染逻辑: - 调整数值高亮色为更鲜亮的绿色 - 使用罗马数字作为技能等级徽章 - 移除升级预览弹窗的重复描述,改为当前/升级后双版本对比 - 简化升级确认弹窗的格式排版 4. 调整道具/技能预制体的文字颜色为白色,适配深色面板
This commit is contained in:
@@ -88,8 +88,8 @@ const ATTR_NAME: Partial<Record<Attrs, string>> = {
|
||||
[Attrs.hp_max]: "最大生命",
|
||||
};
|
||||
|
||||
/** 富文本数值高亮色(亮绿色,与项目绿色系同源,深色面板上清晰可读) */
|
||||
const RICH_VALUE_COLOR = "#27AE60";
|
||||
/** 富文本数值高亮色(鲜亮绿色,深色面板上高亮醒目) */
|
||||
const RICH_VALUE_COLOR = "#3CE66E";
|
||||
|
||||
/** 富文本技能名高亮色(蓝色,与数值绿色区分,标识技能名「」片段) */
|
||||
const RICH_NAME_COLOR = "#2E86C1";
|
||||
@@ -100,6 +100,9 @@ const RICH_LOCKED_COLOR = "#95A5A6";
|
||||
/** 技能名「」匹配模式(仅本模块行首/行中技能名片段使用) */
|
||||
const SKILL_NAME_PATTERN = /「([^」]*)」/g;
|
||||
|
||||
/** 技能等级罗马数字徽章(索引 = 技能等级 1~5),用于技能名后的品质感等级标识 */
|
||||
const SKILL_LV_BADGE = ["", "Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ"];
|
||||
|
||||
/** "持续X秒"匹配模式(卡片描述后处理:把持续时间数值也高亮) */
|
||||
const DURATION_PATTERN = /持续(\d+)秒/g;
|
||||
|
||||
@@ -510,8 +513,8 @@ export function buildEquipRich(fieldUuids: number[], showName: boolean = false):
|
||||
*
|
||||
* 格式:
|
||||
* 「技能名」 Lv.当前技能等级:当前档技能效果
|
||||
* 升级提示:Lv.当前 → Lv.下一级:下一级技能效果(金色,仅有更高档时出现)
|
||||
*
|
||||
* 仅展示当前生效档位,不含升级提示;升级前后对比由升级确认框单独提供。
|
||||
* 数据源为运行时 HeroAttrsComp(lv 取当前英雄等级),逐触发类型逐技能渲染。
|
||||
* 技能等级取 LvTriggerEntry.s_lv,未标注时按档位序号(1/2/3...)兜底。
|
||||
*
|
||||
@@ -555,19 +558,14 @@ export function buildSkillDescMoreRich(source: ISkillDescSource): string {
|
||||
const curIdx = activeIdx >= 0 ? activeIdx : 0;
|
||||
const cur = sorted[curIdx];
|
||||
const curSLv = cur.s_lv ?? (curIdx + 1);
|
||||
const curTrig = needCount ? `${trigName}×${cur.t_num}` : trigName;
|
||||
const curHead = `「${skillName}」 Lv.${curSLv}: ${curTrig},`;
|
||||
// 触发次数直接写为富文本(数字绿色高亮),如 "受伤3次"
|
||||
const curTrig = needCount
|
||||
? `${trigName}<color=${RICH_VALUE_COLOR}>${cur.t_num}</color>次`
|
||||
: trigName;
|
||||
// 技能名 + 罗马数字等级徽章(如 "不屈壁垒Ⅰ"),等级徽标随技能名一并蓝色高亮
|
||||
const badge = SKILL_LV_BADGE[curSLv] ?? `${curSLv}`;
|
||||
const curHead = `「${skillName}${badge}」: ${curTrig},`;
|
||||
lines.push(effectRich(buildEffectLine(curHead, mergeSkillParams(base, cur.overrides))));
|
||||
|
||||
// 升级提示:存在更高档时,金色预览下一档
|
||||
if (curIdx + 1 < sorted.length) {
|
||||
const next = sorted[curIdx + 1];
|
||||
const nextSLv = next.s_lv ?? (curIdx + 2);
|
||||
const nextTrig = needCount ? `${trigName}×${next.t_num}` : trigName;
|
||||
const nextLine = buildEffectLine(`${nextTrig},`, mergeSkillParams(base, next.overrides));
|
||||
const nextText = `${nextLine.prefix}${nextLine.value}${nextLine.suffix}`;
|
||||
lines.push(`<color=${RICH_UPGRADE_COLOR}>升级 Lv.${curSLv}→Lv.${nextSLv}: ${nextText}</color>`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -600,9 +598,6 @@ function highlightDuration(text: string): string {
|
||||
return text.replace(DURATION_PATTERN, `持续<color=${RICH_VALUE_COLOR}>$1</color>秒`);
|
||||
}
|
||||
|
||||
/** 富文本升级提示色(金色,标识"升级后"的下一档预览,与未激活灰区分) */
|
||||
const RICH_UPGRADE_COLOR = "#E8A33D";
|
||||
|
||||
/**
|
||||
* 结构化行 → 富文本串(技能名蓝色、数值绿色)。
|
||||
* buildEquipRich / buildCardDescRich / buildSkillDescRich 共用,保证渲染规则唯一。
|
||||
|
||||
Reference in New Issue
Block a user