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

1. 新增RichOutline工具类,封装cc.RichText的outline标签包裹逻辑
2. 为所有道具/技能/英雄描述富文本添加黑色2px描边,提升深色背景下的可读性
3. 优化技能描述渲染逻辑:
   - 调整数值高亮色为更鲜亮的绿色
   - 使用罗马数字作为技能等级徽章
   - 移除升级预览弹窗的重复描述,改为当前/升级后双版本对比
   - 简化升级确认弹窗的格式排版
4. 调整道具/技能预制体的文字颜色为白色,适配深色面板
This commit is contained in:
panFD
2026-08-09 14:16:16 +08:00
parent 158dbeecde
commit b7f64a5aa7
11 changed files with 1295 additions and 1604 deletions

View File

@@ -0,0 +1,37 @@
/**
* @file RichOutline.ts
* @description RichText 描边outlineBBCode 包裹工具
*
* 背景:
* Cocos Creator 3.x 的 cc.RichText 原生支持 <outline> 标签:
* <outline color=#000000 width=2>文本</outline>
* 无需新增组件即可为富文本提供描边能力。
*
* 使用:
* import { outlineRich } from "./RichOutline";
* this.info_rich.string = outlineRich(desc); // 默认黑色 2px
* this.info_rich.string = outlineRich(desc, "#000", 1); // 自定义
*
* 注意:
* - <outline> 为包裹型标签,需成对出现;内部可嵌套 <color>/<size> 等标签。
* - width 为像素宽度intcolor 支持 #RGB/#RRGGBB。
* - 空字符串直接返回,不包裹空标签。
*/
/** 默认描边颜色(深黑,深色面板通用) */
export const RICH_OUTLINE_COLOR = "#000000";
/** 默认描边宽度(像素) */
export const RICH_OUTLINE_WIDTH = 2;
/**
* 为 RichText 富文本串包裹描边标签
* @param text 原始 BBCode 富文本(可为空串)
* @param color 描边颜色(默认 #000000
* @param width 描边宽度像素(默认 2
* @returns 包裹 <outline> 后的富文本串;空串原样返回
*/
export function outlineRich(text: string, color: string = RICH_OUTLINE_COLOR, width: number = RICH_OUTLINE_WIDTH): string {
if (!text) return text;
return `<outline color=${color} width=${width}>${text}</outline>`;
}