components.config.json
{
"component": "ResourceProgressBar",
"core": {
"value": 88,
"maxValue": 100,
"layerCount": 3,
"layerCapacityMode": "equal",
"layerMaxValues": [
100,
100,
100
],
"totalMaxValue": 300,
"layerColorMode": "fightingPreset",
"layerColors": [
"#75e45f",
"#55d9ff",
"#a984ff"
],
"showRemainingLayers": true,
"fillTone": "amber",
"textMode": "center",
"animate": true,
"stackedIncreaseHighlight": true,
"stackedIncreaseCatchUpDurationMs": 900,
"showFullGlow": true,
"effectMode": "increase"
},
"composition": {
"leftIcon": "energy",
"rightIcon": "potion",
"layerRewardIcons": [
"potion",
"energy",
"potion"
],
"layerRewardBehavior": "activateOnLayerCompleteThenAdvance",
"segmentMode": "uniform",
"segmentCount": 5,
"size": "standard",
"iconOcclusionCompensation": 24
}
}参数说明路径与上方当前实例 JSON 保持一致25 项实例与核心进度
componentResourceProgressBar
资源型组合进度条组件类型标识。
core.valuenumber
业务输入进度；里程碑开启阶段暂停时作为预进度目标，其他模式为当前进度。
core.maxValuenumber
单层最大值；多层时作为每管默认容量，必须大于 0。
core.fillToneamber | lime | coral | cyan
进度填充色主题。
core.textModenone | center | follow
进度文本隐藏、居中或跟随进度头显示。
core.animateboolean
业务值变化时是否播放平滑追帧动画。
core.stackedIncreaseHighlightboolean
连续增长时是否先叠加独立白色增量块，再让填充追上；跨管增量会在当前管显示余量并继续投射到下一管。
core.stackedIncreaseCatchUpDurationMsnumber
白色增量块出现后，正常填充追到目标值所需的毫秒数；数值越大，增长越慢，建议范围 300–1800。
core.showFullGlowboolean
进度达到或超过 maxValue 时是否显示轨道外发光与星点；离开满值后立即隐藏。
core.effectModeoff | increase | always
关闭特效、增长时播放一次或持续显示前沿特效。
core.layerCountnumber (1–10)
进度条管数；1 为普通单层，2–10 时 value 按累计总进度映射到当前管。
core.layerCapacityModeequal | perLayer
equal 表示所有管共用 maxValue；perLayer 表示逐项读取 layerMaxValues。
core.layerMaxValuesnumber[]
每管容量数组；缺少或非法的项自动回退到 maxValue。
core.totalMaxValuenumber
所有管容量之和，也是累计 value 的最终满值。
core.layerColorModefightingPreset | custom
格斗血条默认色序或逐层自定义颜色；默认色会从绿、蓝、紫过渡到暖色与同色相变体。
core.layerColorsstring[]
解析后的逐层 CSS 颜色数组；进入下一管时立即切换到对应颜色。
core.showRemainingLayersboolean
多层模式下是否在轨道右侧显示 ×N；N 为包含当前未完成管在内的剩余管数。
资源组合
composition.leftIconresource | null
左侧消耗图标；为 null 时隐藏。
composition.rightIconresource | null
右侧目标图标；为 null 时隐藏。
composition.layerRewardIcons(resource | null)[]
每管对应的右侧奖励资源；缺少时回退到 rightIcon。
composition.layerRewardBehavioractivateOnLayerCompleteThenAdvance | static
填满当前管时先播放奖励激活动效，再切换到下一管的奖励资源。
composition.segmentModenone | uniform
资源型轨道的连续或均匀分段模式。
composition.segmentCountnumber
分段数量；连续模式下输出 0。
composition.sizestandard | compact
标准或紧凑尺寸。
composition.iconOcclusionCompensationnumber
单侧图标遮挡轨道的补偿像素；0 表示关闭。