COMPONENT LIBRARY / SOURCE READY

进度条控件库

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

IMPORT@/components/progress-kit

SOURCEcomponents/progress-kit/index.tsx

STYLEapp/globals.css

CORE

ProgressBarCore

基础填充、文本、分段、动画与前沿特效。

8 PROPS

58/100

USAGE / TSX

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

<ProgressBarCore
  value={58}
  maxValue={100}
  fillTone="amber"
  textMode="center"
  segmentMode="uniform"
  segmentCount={5}
  effectMode="increase"
  effectTick={effectTick}
  animate
/>

RESOURCE

ResourceProgressBar

左右资源插槽、遮挡补偿、分段和尺寸模式。

13 PROPS

36/100

∞

USAGE / TSX

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

<ResourceProgressBar
  value={36}
  maxValue={100}
  leftIcon="energy"
  rightIcon="potion"
  segmentMode="uniform"
  segmentCount={5}
  iconOcclusionPx={24}
  effectMode="always"
/>

MILESTONE

MilestoneProgressBar

奖励节点、手动领取、tips、大奖吸顶、惯性滚动和自定义节点插槽。

25 PROPS

已领取

点击领取

68/80

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
  nodeOcclusionPx={28}
/>

PUBLIC API CONTRACT

组合方式

ProgressBarCore

不包含业务图标，是所有进度条的基础绘制层。

→

ResourceProgressBar

在 Core 上增加左右资源插槽和图标遮挡补偿。

→

MilestoneProgressBar

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