288 lines
9.5 KiB
TypeScript
288 lines
9.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useSession } from "next-auth/react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { AlertCard } from "@/components/business/alert-card";
|
||
import { fetchWithAuth } from "@/lib/api/client";
|
||
import { Check } from "lucide-react";
|
||
|
||
interface ProjectResponse {
|
||
id: string;
|
||
brand_name: string;
|
||
brand_url: string;
|
||
description?: string;
|
||
status: string;
|
||
current_stage: string;
|
||
stages: string[];
|
||
}
|
||
|
||
type StepStatus = "waiting" | "active" | "completed";
|
||
|
||
interface ProgressStep {
|
||
id: string;
|
||
label: string;
|
||
status: StepStatus;
|
||
}
|
||
|
||
export default function NewProjectPage() {
|
||
const router = useRouter();
|
||
const { data: session } = useSession();
|
||
|
||
const [brandName, setBrandName] = useState("");
|
||
const [brandUrl, setBrandUrl] = useState("");
|
||
const [description, setDescription] = useState("");
|
||
const [touched, setTouched] = useState({ brandName: false, brandUrl: false });
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [steps, setSteps] = useState<ProgressStep[]>([
|
||
{ id: "create", label: "正在创建项目...", status: "waiting" },
|
||
{ id: "init", label: "正在初始化分析阶段...", status: "waiting" },
|
||
{ id: "agent", label: "正在配置AI Agent...", status: "waiting" },
|
||
{ id: "ready", label: "准备就绪！正在跳转...", status: "waiting" },
|
||
]);
|
||
|
||
const brandNameError = touched.brandName && !brandName.trim();
|
||
const brandUrlError = touched.brandUrl && !brandUrl.trim();
|
||
const canSubmit =
|
||
brandName.trim().length > 0 && brandUrl.trim().length > 0 && !submitting;
|
||
|
||
async function handleSubmit() {
|
||
if (!canSubmit) return;
|
||
setSubmitting(true);
|
||
setError(null);
|
||
|
||
const token = session?.accessToken as string | undefined;
|
||
|
||
try {
|
||
const data = await fetchWithAuth(
|
||
"/api/v1/lifecycle/projects/quick-start",
|
||
{
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
brand_name: brandName.trim(),
|
||
brand_url: brandUrl.trim(),
|
||
description: description.trim() || undefined,
|
||
}),
|
||
},
|
||
token
|
||
) as { project: ProjectResponse; message: string };
|
||
|
||
void data;
|
||
animateSteps();
|
||
} catch (err) {
|
||
setSubmitting(false);
|
||
setError(
|
||
err instanceof Error ? err.message : "网络错误，请检查连接后重试"
|
||
);
|
||
}
|
||
}
|
||
|
||
function animateSteps() {
|
||
const stepOrder = ["create", "init", "agent", "ready"] as const;
|
||
|
||
setSteps((prev) =>
|
||
prev.map((step, i) =>
|
||
i === 0 ? { ...step, status: "active" as StepStatus } : step
|
||
)
|
||
);
|
||
|
||
stepOrder.forEach((stepId, index) => {
|
||
setTimeout(() => {
|
||
setSteps((prev) =>
|
||
prev.map((step, i) => {
|
||
if (step.id === stepId) return { ...step, status: "completed" };
|
||
if (i === index + 1) return { ...step, status: "active" };
|
||
return step;
|
||
})
|
||
);
|
||
|
||
if (index === stepOrder.length - 1) {
|
||
setTimeout(() => {
|
||
router.push("/dashboard/lifecycle");
|
||
}, 800);
|
||
}
|
||
}, (index + 1) * 800);
|
||
});
|
||
}
|
||
|
||
function handleRetry() {
|
||
setError(null);
|
||
void handleSubmit();
|
||
}
|
||
|
||
if (submitting) {
|
||
return (
|
||
<div className="flex min-h-[60vh] flex-col items-center justify-center bg-geo-bg px-4">
|
||
<div className="w-full max-w-lg space-y-8">
|
||
<div className="text-center">
|
||
<h2 className="text-2xl font-bold text-geo-text-primary">
|
||
正在为您准备
|
||
</h2>
|
||
<p className="mt-2 text-geo-text-secondary">
|
||
AI正在自动初始化您的项目
|
||
</p>
|
||
</div>
|
||
<div className="space-y-4">
|
||
{steps.map((step) => (
|
||
<div key={step.id} className="flex items-center gap-4">
|
||
<div
|
||
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold transition-colors duration-300 ${
|
||
step.status === "completed"
|
||
? "bg-geo-green text-white"
|
||
: step.status === "active"
|
||
? "bg-geo-green/10 text-geo-green animate-pulse"
|
||
: "bg-gray-100 text-gray-400"
|
||
}`}
|
||
>
|
||
{step.status === "completed" ? (
|
||
<Check className="h-4 w-4" />
|
||
) : (
|
||
<span className="h-2 w-2 rounded-full bg-current" />
|
||
)}
|
||
</div>
|
||
<span
|
||
className={`text-sm font-medium transition-colors duration-300 ${
|
||
step.status === "completed"
|
||
? "text-geo-green"
|
||
: step.status === "active"
|
||
? "text-geo-text-primary"
|
||
: "text-gray-400"
|
||
}`}
|
||
>
|
||
{step.label}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex min-h-[60vh] flex-col items-center justify-center bg-geo-bg px-4 py-12">
|
||
<div className="w-full max-w-lg space-y-8">
|
||
{/* Header */}
|
||
<div className="text-center">
|
||
<h1 className="text-3xl font-bold text-geo-text-primary">
|
||
开始优化您的AI可见性
|
||
</h1>
|
||
<p className="mt-3 text-geo-text-secondary">
|
||
输入品牌信息，AI将自动分析并制定优化方案
|
||
</p>
|
||
</div>
|
||
|
||
{/* Error Alert */}
|
||
{error && (
|
||
<AlertCard
|
||
alerts={[
|
||
{
|
||
id: "submit-error",
|
||
title: "提交失败",
|
||
description: error,
|
||
severity: "critical",
|
||
actions: (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleRetry}
|
||
className="text-xs"
|
||
>
|
||
重试
|
||
</Button>
|
||
),
|
||
},
|
||
]}
|
||
maxVisible={1}
|
||
/>
|
||
)}
|
||
|
||
{/* Form Card */}
|
||
<div className="bg-white rounded-xl shadow-geo-card p-8 space-y-6">
|
||
<div className="space-y-2">
|
||
<Label
|
||
htmlFor="brandName"
|
||
className="text-sm font-medium text-geo-text-primary"
|
||
>
|
||
品牌名称 <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Input
|
||
id="brandName"
|
||
placeholder="例如：您的品牌名"
|
||
value={brandName}
|
||
onChange={(e) => setBrandName(e.target.value)}
|
||
onBlur={() =>
|
||
setTouched((prev) => ({ ...prev, brandName: true }))
|
||
}
|
||
className={
|
||
brandNameError
|
||
? "border-destructive focus-visible:ring-destructive"
|
||
: ""
|
||
}
|
||
/>
|
||
{brandNameError && (
|
||
<p className="text-xs text-destructive">请输入品牌名称</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label
|
||
htmlFor="brandUrl"
|
||
className="text-sm font-medium text-geo-text-primary"
|
||
>
|
||
品牌网址 <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Input
|
||
id="brandUrl"
|
||
type="url"
|
||
placeholder="https://example.com"
|
||
value={brandUrl}
|
||
onChange={(e) => setBrandUrl(e.target.value)}
|
||
onBlur={() =>
|
||
setTouched((prev) => ({ ...prev, brandUrl: true }))
|
||
}
|
||
className={
|
||
brandUrlError
|
||
? "border-destructive focus-visible:ring-destructive"
|
||
: ""
|
||
}
|
||
/>
|
||
{brandUrlError && (
|
||
<p className="text-xs text-destructive">请输入品牌网址</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label
|
||
htmlFor="description"
|
||
className="text-sm font-medium text-geo-text-primary"
|
||
>
|
||
品牌描述
|
||
</Label>
|
||
<textarea
|
||
id="description"
|
||
placeholder="简单描述您的品牌，帮助AI更好理解（可选）"
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
rows={3}
|
||
className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background transition-colors duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:border-primary hover:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted resize-none"
|
||
/>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={handleSubmit}
|
||
disabled={!canSubmit}
|
||
className="w-full h-12 bg-geo-green text-white hover:bg-geo-green/90 hover:shadow-md hover:scale-[1.02] active:scale-[0.98] text-base font-semibold transition-all duration-200 disabled:opacity-50 disabled:hover:scale-100 disabled:hover:shadow-none"
|
||
>
|
||
开始智能分析
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|