"use client"; // 新手引导区块 —— 横向 Steps 步骤条 + 当前步卡片内容 + 进度条 + 上一步/下一步。 // 4 步：创建账号 → 连接仓库 → 配置环境 → 上线发布。每步卡片是占位表单/选项。 // 复制后改：STEPS 步骤定义、各步卡片内容、完成态文案。 // 用 useState 维护 current；点击 Steps 项也可跳转（onChange）。 import { useState } from "react"; import { Button, Field, Heading, Input, Progress, Result, Steps, Text, type StepsItem, } from "@hulianui/ui"; import { ArrowLeft, ArrowRight, Check, Cloud, GitBranch, Settings2, UserPlus } from "lucide-react"; const STEPS: StepsItem[] = [ { title: "创建账号", description: "基本信息" }, { title: "连接仓库", description: "代码来源" }, { title: "配置环境", description: "运行参数" }, { title: "上线发布", description: "完成部署" }, ]; const STEP_ICONS = [UserPlus, GitBranch, Settings2, Cloud]; export function OnboardingBlock() { const [current, setCurrent] = useState(0); const total = STEPS.length; const isLast = current === total - 1; // 进度按"已完成步数"计：到达最后一步即已配置完前 3 步 const progress = Math.round((current / (total - 1)) * 100); const Icon = STEP_ICONS[current]; return (

欢迎来到瀚云只需 4 步，即可把你的第一个应用部署上线。

{/* 步骤条 */} {/* 当前步卡片 */}

{STEPS[current].title} 第 {current + 1} 步 / 共 {total} 步

{/* 每步占位内容 */} {current === 0 && (

先告诉我们一些基本信息，方便为你创建工作区。

)} {current === 1 && (

选择代码来源，瀚云将自动拉取并构建你的项目。

{["GitHub", "GitLab", "上传压缩包"].map((src, i) => ( ))}

)} {current === 2 && (

配置运行环境与构建命令，留空将使用智能默认值。

)} {current === 3 && ( } title="一切就绪，准备上线" subTitle="配置已完成。点击下方按钮，瀚云将开始构建并把你的应用部署到全球边缘节点。" /> )} {/* 进度条 */}

引导进度 {progress}%

{/* 操作按钮 */}

{isLast ? ( ) : ( )}

); }