docs(rich-text): 新增富文本描边规范文档

替换原有的SkillSet/heroSet配置规则文档,新增Cocos Creator富文本描边使用规范,包含使用示例和注意事项。同时重构英雄列表组件,添加升级属性提升说明的富文本展示功能,使用统一的描边工具类美化文本显示。
This commit is contained in:
panFD
2026-09-08 21:40:34 +08:00
parent 57a50578fa
commit cfaed3b63f
3 changed files with 5435 additions and 3417 deletions

View File

@@ -17,13 +17,14 @@
* - CardLiteComp —— 轻量卡片组件
* - buildHeroSkillDesc(HeroSkillText)—— 技能描述生成器(局外等级口径)
*/
import { _decorator, Animation, AnimationClip, Button, Label, Node, Prefab, Sprite, UITransform, Vec3, Widget, instantiate, resources, tween, Tween } from "cc";
import { _decorator, Animation, AnimationClip, Button, Label, Node, Prefab, RichText, Sprite, UITransform, Vec3, Widget, instantiate, resources, tween, Tween } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { oops } from "db://oops-framework/core/Oops";
import { mLogger } from "../common/Logger";
import { HeroInfo, HeroList, SkillTriggerType, LvFieldEntry, LvTriggerEntry, TriggerGrouped, HSkillInfo, getHeroDisplayStats, LvBonusAttrsEntry } from "../common/config/heroSet";
import { buildHeroSkillDesc } from "../common/HeroSkillText";
import { outlineRich } from "../common/RichOutline";
import { GameEvent } from "../common/config/GameEvent";
import { HERO_UPGRADE_NEED_FRAGMENTS, RARITY_BG_COLORS } from "../common/config/GameSet";
import { CardLiteComp } from "./CardLiteComp";
@@ -105,6 +106,14 @@ export class HerosListComp extends CCComp {
@property(Node)
upgrade_anim_node = null!
/** 碎片需求/总量 Label(显示 当前碎片 / 下级需求) */
@property(Label)
fragment_label = null!
/** 升级提升加成说明 RichText(展示升级后的属性提升,数值绿色高亮) */
@property(RichText)
upgrade_info_label = null!
// ======================== 运行时状态 ========================
huuid: number = 0
@@ -470,6 +479,16 @@ export class HerosListComp extends CCComp {
: `${growth.fragments} / ${needFragments}`
this.setLabelText(this.fragment_node, fragmentText)
}
// 独立碎片 Label(编辑器可直接绑定 Label 组件,与 fragment_node 二选一或并存)
if (this.fragment_label) {
const fragmentText = isMaxLv
? `${growth.fragments} / MAX`
: `${growth.fragments} / ${needFragments}`
this.fragment_label.string = fragmentText
}
// 升级提升加成说明
this.updateUpgradeInfoLabel(uuid, growth.lv, isMaxLv)
// 碎片图标:使用 ChipComp 渲染英雄图标(自动读取 HeroInfo 配置)
if (this.chip_node) {
@@ -488,6 +507,39 @@ export class HerosListComp extends CCComp {
// ======================== 技能图标列表 ========================
/**
* 刷新升级提升加成说明 RichText
* 展示口径:对比当前等级与下一等级,仅列出 AP/HP/DEF 属性差值,单行展示
* 数值用绿色高亮,整体通过 outlineRich 包裹描边标签
* @param uuid 英雄模板 uuid
* @param curLv 当前局外等级(≥1)
* @param isMaxLv 是否已满级
*/
private updateUpgradeInfoLabel(uuid: number, curLv: number, isMaxLv: boolean) {
if (!this.upgrade_info_label) return
const hero = HeroInfo[uuid]
if (!hero) { this.upgrade_info_label.string = ""; return }
if (isMaxLv) {
this.upgrade_info_label.string = outlineRich("已满级")
return
}
const nextLv = curLv + 1
const cur = getHeroDisplayStats(hero, curLv)
const nxt = getHeroDisplayStats(hero, nextLv)
// 属性提升差值:单行展示 AP/HP/DEF,数值绿色高亮
const parts: string[] = []
if (nxt.hp > cur.hp) parts.push(`生命<color=#00FF00>+${nxt.hp - cur.hp}</color>`)
if (nxt.ap > cur.ap) parts.push(`攻击<color=#00FF00>+${nxt.ap - cur.ap}</color>`)
if (nxt.def > cur.def) parts.push(`防御<color=#00FF00>+${nxt.def - cur.def}</color>`)
this.upgrade_info_label.string = parts.length > 0
? outlineRich(`升级属性提升:${parts.join(" ")}`)
: outlineRich(`升级至 Lv.${nextLv}`)
}
/** 图鉴面板展示的触发技能槽位(按触发时机排序:召唤→战斗开始→攻击后→受击后→死亡→常驻光环) */
private static readonly PANEL_TRIGGER_TYPES: SkillTriggerType[] = [
SkillTriggerType.Call,