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
|
* @file HeroSkillDesc.ts
|
||||||
* @description 英雄技能/能力描述的【唯一文字表达标准层】
|
* @description 英雄技能/能力描述的【唯一文字表达标准层】
|
||||||
*
|
*
|
||||||
@@ -91,8 +91,21 @@ const ATTR_NAME: Partial<Record<Attrs, string>> = {
|
|||||||
/** 富文本数值高亮色(鲜亮绿色,深色面板上高亮醒目) */
|
/** 富文本数值高亮色(鲜亮绿色,深色面板上高亮醒目) */
|
||||||
const RICH_VALUE_COLOR = "#3CE66E";
|
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";
|
const RICH_LOCKED_COLOR = "#95A5A6";
|
||||||
@@ -476,11 +489,11 @@ export function buildSingleSkillRich(skillUuid: number, overrides?: SkillOverrid
|
|||||||
// SkillConfig 未定义 cd 字段,冷却时间由外部运行时数据传入;计时模式展示持续时间
|
// SkillConfig 未定义 cd 字段,冷却时间由外部运行时数据传入;计时模式展示持续时间
|
||||||
const dur = skill.buff_duration ?? (skill.timed_buff_id !== undefined ? BuffList[skill.timed_buff_id]?.duration : undefined) ?? 0;
|
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 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 为空避免重复触发类型前缀
|
// 复用结构化效果行,head 为空避免重复触发类型前缀
|
||||||
const line = buildEffectLine("", skill);
|
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
|
const effect = line.value
|
||||||
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
||||||
: `${prefix}${line.suffix}`;
|
: `${prefix}${line.suffix}`;
|
||||||
@@ -500,7 +513,7 @@ export function buildEquipRich(fieldUuids: number[], showName: boolean = false):
|
|||||||
for (const uuid of fieldUuids) {
|
for (const uuid of fieldUuids) {
|
||||||
const line = buildFieldLine("", uuid, showName);
|
const line = buildFieldLine("", uuid, showName);
|
||||||
if (!line) continue;
|
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
|
const text = line.value
|
||||||
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
||||||
: `${prefix}${line.suffix}`;
|
: `${prefix}${line.suffix}`;
|
||||||
@@ -528,7 +541,7 @@ export function buildSkillDescMoreRich(source: ISkillDescSource): string {
|
|||||||
|
|
||||||
// 单条效果 → 富文本(技能名蓝色、数值绿色高亮、持续秒数高亮)
|
// 单条效果 → 富文本(技能名蓝色、数值绿色高亮、持续秒数高亮)
|
||||||
const effectRich = (line: ISkillLine): 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
|
const text = line.value
|
||||||
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
? `${prefix}<color=${RICH_VALUE_COLOR}>${line.value}</color>${line.suffix}`
|
||||||
: `${prefix}${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);
|
const revive = resolveReviveByLv(source[SkillTriggerType.Revive] as LvReviveEntry[] | undefined, lv);
|
||||||
if (revive) {
|
if (revive) {
|
||||||
const reviveName = getTriggerSkillName(SkillTriggerType.Revive, revive.s_uuid);
|
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");
|
return lines.join("\n");
|
||||||
@@ -605,7 +618,7 @@ function highlightDuration(text: string): string {
|
|||||||
*/
|
*/
|
||||||
function renderLineRich(line: ISkillLine): string {
|
function renderLineRich(line: ISkillLine): string {
|
||||||
if (line.locked) return `<color=${RICH_LOCKED_COLOR}>${line.prefix}${line.value}${line.suffix}</color>`;
|
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 仍位于整段数值之后
|
// 未来档数值灰色追加在当前高亮数值后("15%/20%/30%"),suffix 仍位于整段数值之后
|
||||||
const next = line.nextValues?.length ? `<color=${RICH_LOCKED_COLOR}>/${line.nextValues.join("/")}</color>` : "";
|
const next = line.nextValues?.length ? `<color=${RICH_LOCKED_COLOR}>/${line.nextValues.join("/")}</color>` : "";
|
||||||
return line.value
|
return line.value
|
||||||
@@ -674,7 +687,7 @@ export function buildCardDescRich(card: CardConfig): string {
|
|||||||
return rich;
|
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>次`;
|
const times = `,共<color=${RICH_VALUE_COLOR}>${tTimes}</color>次`;
|
||||||
return `${rhythm},${rich}${times}`;
|
return `${rhythm},${rich}${times}`;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user