76 lines
4.2 KiB
TypeScript
76 lines
4.2 KiB
TypeScript
"use client";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { useLang } from "@/lib/language";
|
|
|
|
const t = {
|
|
zh: {
|
|
badge: "工作流程",
|
|
h2: "从登录到上线，一条主流程",
|
|
subtitle: "不需要直接操作 CodeGW 后台，也不需要管理密钥保管器",
|
|
steps: [
|
|
{ step: "01", title: "登录 Heicode", desc: "注册登录 code.xinghanlab.com，进入工作区。下载客户端并完成 OAuth 授权。" },
|
|
{ step: "02", title: "输入产品想法", desc: "在客户端用自然语言描述要做的产品或任务。Heicode 生成需求摘要和任务草案。" },
|
|
{ step: "03", title: "绑定资源", desc: "在 Manager 绑定 Git 仓库、云账号、SK 工具包。凭证由密钥保管器托管，不落入代码。" },
|
|
{ step: "04", title: "生成 AI 开发团队", desc: "Heicode 推荐子 Agnet 角色，确认权限范围和审批规则，生成 Resource Grant。" },
|
|
{ step: "05", title: "执行与审批", desc: "Agnet 按需求→开发→测试→修复→部署持续推进，高危操作在客户端弹出审批。" },
|
|
{ step: "06", title: "交付与持续维护", desc: "Agnet 完成部署并回传交付结果。后续迭代复用上下文和权限，持续进入开发闭环。" },
|
|
],
|
|
footer: ["客户端", "Manager", "Agnet 平台", "CodeGW", "密钥保管器"],
|
|
},
|
|
en: {
|
|
badge: "Workflow",
|
|
h2: "From login to launch, one pipeline",
|
|
subtitle: "No direct CodeGW backend access or secret vault management required",
|
|
steps: [
|
|
{ step: "01", title: "Log in to Heicode", desc: "Register and log in at code.xinghanlab.com. Download the client and complete OAuth authorization." },
|
|
{ step: "02", title: "Input product idea", desc: "Describe your product or task in natural language in the client. Heicode generates a requirements summary and task draft." },
|
|
{ step: "03", title: "Bind resources", desc: "In Manager, bind Git repos, cloud accounts, SK toolkits. Credentials are managed by the secret vault, never in code." },
|
|
{ step: "04", title: "Generate AI dev team", desc: "Heicode recommends sub-Agnet roles, confirms permission scope and approval rules, generates Resource Grants." },
|
|
{ step: "05", title: "Execute & approve", desc: "Agnets continuously push forward (plan→dev→test→fix→deploy). High-risk operations trigger client approval prompts." },
|
|
{ step: "06", title: "Deliver & maintain", desc: "Agnets complete deployment and return delivery results. Future iterations reuse context and permissions." },
|
|
],
|
|
footer: ["Client", "Manager", "Agnet Platform", "CodeGW", "Secret Vault"],
|
|
},
|
|
};
|
|
|
|
export function Workflow() {
|
|
const { lang } = useLang();
|
|
const tx = t[lang];
|
|
|
|
return (
|
|
<section id="workflow" className="py-20 sm:py-32">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<p className="text-sm font-medium uppercase tracking-widest text-accent">{tx.badge}</p>
|
|
<h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{tx.h2}</h2>
|
|
<p className="mt-4 text-muted-foreground">{tx.subtitle}</p>
|
|
</div>
|
|
|
|
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{tx.steps.map((item) => (
|
|
<div
|
|
key={item.step}
|
|
className="relative rounded-xl border border-border bg-card/50 p-6"
|
|
>
|
|
<span className="absolute top-4 right-4 font-mono text-5xl font-bold text-secondary/60">
|
|
{item.step}
|
|
</span>
|
|
<h3 className="relative text-base font-semibold">{item.title}</h3>
|
|
<p className="relative mt-2 text-sm leading-relaxed text-muted-foreground">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-10 flex items-center justify-center gap-2 text-xs text-muted-foreground">
|
|
{tx.footer.map((item, i, arr) => (
|
|
<span key={item} className="flex items-center gap-2">
|
|
<span className="rounded-full border border-border bg-secondary/50 px-3 py-1">{item}</span>
|
|
{i < arr.length - 1 && <ArrowRight className="h-3 w-3 text-muted-foreground/40" />}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|