feat(ui&config): 优化技能名富文本显示效果
1. 调整技能名高亮色为金黄并添加描边效果,提升视觉层级 2. 封装skillNameRich工具函数统一处理技能名富文本格式 3. 修复英雄prefab布局参数,适配新的文本显示样式
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user