feat(ui&config): 优化技能名富文本显示效果

1. 调整技能名高亮色为金黄并添加描边效果,提升视觉层级
2. 封装skillNameRich工具函数统一处理技能名富文本格式
3. 修复英雄prefab布局参数,适配新的文本显示样式
This commit is contained in:
panFD
2026-08-09 20:40:10 +08:00
parent 2d49c82590
commit 2872b643f8
2 changed files with 182 additions and 208 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,4 +1,4 @@
/**
/**
* @file HeroSkillDesc.ts
* @description 英雄技能/能力描述的【唯一文字表达标准层】
*
@@ -91,8 +91,21 @@ const ATTR_NAME: Partial<Record<Attrs, string>> = {
/** 富文本数值高亮色(鲜亮绿色,深色面板上高亮醒目) */
const RICH_VALUE_COLOR = "#3CE66E";
/** 富文本技能名高亮色(蓝色,与数值绿色区分,标识技能名「」片段 */
const RICH_NAME_COLOR = "#2E86C1";
/** 富文本技能名高亮色(明亮金黄,品质感强,与绿色数值/白色正文拉开层级 */
const RICH_NAME_COLOR = "#F1C40F";
/** 技能名描边色(深棕,衬托金黄填充,深色面板上清晰立体) */
const RICH_NAME_OUTLINE = "#6E4A0E";
/**
* 技能名富文本片段:金黄填充 + 深棕描边。
* 仅技能名单独包裹描边,正文/数值不描边,突出技能名视觉层级。
* @param name 技能名(纯文本)
* @returns <outline><color> 包裹的富文本片段
*/
function skillNameRich(name: string): string {
return `<outline color=${RICH_NAME_OUTLINE} width=1><color=${RICH_NAME_COLOR}>${name}</color></outline>`;
}
/** 富文本未激活档位整行灰色(低饱和,深色面板上可读但明显弱化) */
const RICH_LOCKED_COLOR = "#95A5A6";
@@ -476,11 +489,11 @@ export function buildSingleSkillRich(skillUuid: number, overrides?: SkillOverrid
// SkillConfig 未定义 cd 字段,冷却时间由外部运行时数据传入;计时模式展示持续时间
const dur = skill.buff_duration ?? (skill.timed_buff_id !== undefined ? BuffList[skill.timed_buff_id]?.duration : undefined) ?? 0;
const cdTag = dur > 0 ? `<color=${RICH_VALUE_COLOR}>持续:${dur}s</color>` : "";
const nameTag = `「<color=${RICH_NAME_COLOR}>${skill.name}</color>」 Lv.${lv}`;
const nameTag = `${skillNameRich(skill.name)} Lv.${lv}`;
// 复用结构化效果行head 为空避免重复触发类型前缀
const line = buildEffectLine("", skill);
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, `「<color=${RICH_NAME_COLOR}>$1</color>」`);
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, (m, g1) => skillNameRich(g1));
const effect = line.value
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
: `${prefix}${line.suffix}`;
@@ -500,7 +513,7 @@ export function buildEquipRich(fieldUuids: number[], showName: boolean = false):
for (const uuid of fieldUuids) {
const line = buildFieldLine("", uuid, showName);
if (!line) continue;
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, `「<color=${RICH_NAME_COLOR}>$1</color>」`);
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, (m, g1) => skillNameRich(g1));
const text = line.value
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
: `${prefix}${line.suffix}`;
@@ -528,7 +541,7 @@ export function buildSkillDescMoreRich(source: ISkillDescSource): string {
// 单条效果 → 富文本(技能名蓝色、数值绿色高亮、持续秒数高亮)
const effectRich = (line: ISkillLine): string => {
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, `「<color=${RICH_NAME_COLOR}>$1</color>」`);
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, (m, g1) => skillNameRich(g1));
const text = line.value
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
: `${prefix}${line.suffix}`;
@@ -583,7 +596,7 @@ export function buildSkillDescMoreRich(source: ISkillDescSource): string {
const revive = resolveReviveByLv(source[SkillTriggerType.Revive] as LvReviveEntry[] | undefined, lv);
if (revive) {
const reviveName = getTriggerSkillName(SkillTriggerType.Revive, revive.s_uuid);
lines.push(`「<color=${RICH_NAME_COLOR}>${reviveName}</color>」: 每回合拥有<color=${RICH_VALUE_COLOR}>${revive.r_num}</color>次重生机会,死亡后以<color=${RICH_VALUE_COLOR}>${Math.round(revive.upr * 100)}%</color>血量原地重生`);
lines.push(`${skillNameRich(reviveName)}: 每回合拥有<color=${RICH_VALUE_COLOR}>${revive.r_num}</color>次重生机会,死亡后以<color=${RICH_VALUE_COLOR}>${Math.round(revive.upr * 100)}%</color>血量原地重生`);
}
return lines.join("\n");
@@ -605,7 +618,7 @@ function highlightDuration(text: string): string {
*/
function renderLineRich(line: ISkillLine): string {
if (line.locked) return `<color=${RICH_LOCKED_COLOR}>${line.prefix}${line.value}${line.suffix}</color>`;
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, `「<color=${RICH_NAME_COLOR}>$1</color>」`);
const prefix = line.prefix.replace(SKILL_NAME_PATTERN, (m, g1) => skillNameRich(g1));
// 未来档数值灰色追加在当前高亮数值后("15%/20%/30%"suffix 仍位于整段数值之后
const next = line.nextValues?.length ? `<color=${RICH_LOCKED_COLOR}>/${line.nextValues.join("/")}</color>` : "";
return line.value
@@ -674,7 +687,7 @@ export function buildCardDescRich(card: CardConfig): string {
return rich;
}
const rhythm = `每<color=${RICH_VALUE_COLOR}>${tInv}</color>秒召唤<color=${RICH_VALUE_COLOR}>${(card.overrides?.num ?? 0) + 1}</color>个「<color=${RICH_NAME_COLOR}>${skill.name}</color>」攻击敌人`;
const rhythm = `每<color=${RICH_VALUE_COLOR}>${tInv}</color>秒召唤<color=${RICH_VALUE_COLOR}>${(card.overrides?.num ?? 0) + 1}</color>个${skillNameRich(skill.name)}攻击敌人`;
const times = `,共<color=${RICH_VALUE_COLOR}>${tTimes}</color>次`;
return `${rhythm}${rich}${times}`;
}