63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useMobile } from "@/hooks/use-mobile"
|
|
|
|
interface Step {
|
|
number: number
|
|
title: string
|
|
}
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number
|
|
steps: Step[]
|
|
}
|
|
|
|
export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
|
|
const isMobile = useMobile()
|
|
|
|
return (
|
|
<div className="w-full mb-6">
|
|
<div className="flex items-center justify-between">
|
|
{steps.map((step, index) => (
|
|
<div key={step.number} className="flex flex-col items-center relative w-full">
|
|
{/* 连接线 */}
|
|
{index > 0 && (
|
|
<div
|
|
className={cn(
|
|
"absolute h-[2px] w-full top-4 -left-1/2 z-0",
|
|
index < currentStep ? "bg-blue-500" : "bg-gray-200",
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{/* 步骤圆点 */}
|
|
<div
|
|
className={cn(
|
|
"w-8 h-8 rounded-full flex items-center justify-center z-10 mb-2 transition-all",
|
|
index + 1 < currentStep
|
|
? "bg-blue-500 text-white"
|
|
: index + 1 === currentStep
|
|
? "bg-blue-500 text-white"
|
|
: "bg-gray-200 text-gray-500",
|
|
)}
|
|
>
|
|
{step.number}
|
|
</div>
|
|
|
|
{/* 步骤标题 */}
|
|
<div className={cn("text-sm font-medium", index + 1 === currentStep ? "text-blue-500" : "text-gray-500")}>
|
|
{step.title}
|
|
</div>
|
|
{!isMobile && (
|
|
<div className="text-xs text-gray-500 mt-1 hidden md:block">
|
|
{index + 1 === 1 ? "设置群名称和微信号" : index + 1 === 2 ? "选择执行设备" : "设置流量池标签"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|