COMPONENT LIBRARY / SOURCE READY

进度条控件库

三个控件已经整理为可导入的 React + TypeScript 组件。这里展示默认实例、核心参数和可复制的接入代码。

IMPORT@/components/progress-kit

SOURCEcomponents/progress-kit/index.tsx

STYLEapp/globals.css

CORE

ProgressBarCore

基础填充、多层容量与配色、跨层增量高亮、满值外光与前沿特效。

15 PROPS

58/100

×2

USAGE / TSX

import { ProgressBarCore } from "@/components/progress-kit";

<ProgressBarCore
  value={158}
  maxValue={100}
  layerCount={3}
  layerMaxValues={[100, 100, 120]}
  layerColors={["#75e45f", "#55d9ff", "#a984ff"]}
  showRemainingLayers
  fillTone="amber"
  textMode="center"
  segmentMode="uniform"
  segmentCount={5}
  effectMode="increase"
  effectTick={effectTick}
  animate
  stackedIncreaseHighlight
  stackedIncreaseCatchUpDurationMs={900}
  pauseAtStageRewards
  stageRewardPauseDurationMs={1200}
  scrollFollowMode="actual"
  showFullGlow
/>

RESOURCE

ResourceProgressBar

左右资源插槽、每层奖励切换、跨层高亮、遮挡补偿、分段和尺寸模式。

21 PROPS

26/100

×2

USAGE / TSX

import { ResourceProgressBar } from "@/components/progress-kit";

<ResourceProgressBar
  value={126}
  maxValue={100}
  layerCount={3}
  layerMaxValues={[100, 100, 100]}
  layerColors={["#75e45f", "#55d9ff", "#a984ff"]}
  showRemainingLayers
  leftIcon="energy"
  rightIcon="potion"
  layerRewardIcons={["potion", "energy", "potion"]}
  segmentMode="uniform"
  segmentCount={5}
  iconOcclusionPx={24}
  effectMode="always"
  stackedIncreaseHighlight
  stackedIncreaseCatchUpDurationMs={900}
  showFullGlow
/>

MILESTONE

MilestoneProgressBar

当前总数、阶段暂停、双进度跟随、奖励节点、手动领取、Tips、大奖吸顶和惯性滚动。

34 PROPS

100

68/100

USAGE / TSX

import { MilestoneProgressBar } from "@/components/progress-kit";

<MilestoneProgressBar
  value={68}
  maxValue={100}
  milestones={[20, 40, 60, 80, 100]}
  placementMode="proportional"
  claimMode="manual"
  claimedMilestones={claimed}
  onClaim={(milestone) =>
    setClaimed((current) => [...current, milestone])
  }
  grandPrizeMilestones={[60, 100]}
  featuredItemMilestones={[40, 60, 100]}
  showFeaturedItemBubble
  visibleMilestoneCount={3}
  scrollable
  showNextRewardDock
  showCurrentValueBadge
  nodeOcclusionPx={28}
  stackedIncreaseHighlight
  stackedIncreaseCatchUpDurationMs={900}
  showFullGlow
/>

PUBLIC API CONTRACT

组合方式

ProgressBarCore

不包含业务图标，负责单层/多层容量映射、颜色和跨层动画。

→

ResourceProgressBar

在 Core 上增加左右资源插槽、逐层奖励切换和图标遮挡补偿。

→

MilestoneProgressBar

使用同一进度语义，增加奖励状态机、滚动窗口与 renderRewardNode 自定义插槽。