108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import { Link } from 'wouter'
|
|
|
|
export default function IndexPage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Page Use Agent 测试页面
|
|
</h1>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300">
|
|
用于测试 AI Agent 网页操作能力的综合测试套件
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
<TestPageCard
|
|
title="表单测试"
|
|
description="测试输入、验证、提交等表单操作"
|
|
path="/form"
|
|
icon="📝"
|
|
difficulty="简单"
|
|
/>
|
|
<TestPageCard
|
|
title="导航测试"
|
|
description="测试菜单、下拉框、弹窗等交互"
|
|
path="/navigation"
|
|
icon="🧭"
|
|
difficulty="中等"
|
|
/>
|
|
<TestPageCard
|
|
title="列表测试"
|
|
description="测试滚动、分页、搜索、排序"
|
|
path="/list"
|
|
icon="📋"
|
|
difficulty="中等"
|
|
/>
|
|
<TestPageCard
|
|
title="复杂交互"
|
|
description="测试多步骤操作和状态管理"
|
|
path="/complex"
|
|
icon="⚙️"
|
|
difficulty="困难"
|
|
/>
|
|
<TestPageCard
|
|
title="错误处理"
|
|
description="测试错误识别和重试机制"
|
|
path="/errors"
|
|
icon="⚠️"
|
|
difficulty="困难"
|
|
/>
|
|
<TestPageCard
|
|
title="异步操作"
|
|
description="测试等待、加载状态识别"
|
|
path="/async"
|
|
icon="⏳"
|
|
difficulty="中等"
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Link href="/" className="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
|
|
← 回到 Page Use 首页
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface TestPageCardProps {
|
|
title: string
|
|
description: string
|
|
path: string
|
|
icon: string
|
|
difficulty: string
|
|
}
|
|
|
|
function TestPageCard({ title, description, path, icon, difficulty }: TestPageCardProps) {
|
|
const difficultyColors = {
|
|
'简单': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
|
'中等': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
|
'困难': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
|
}
|
|
|
|
return (
|
|
<Link href={path}>
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer border border-gray-200 dark:border-gray-700">
|
|
<div className="text-4xl mb-4">{icon}</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
{title}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">
|
|
{description}
|
|
</p>
|
|
<div className="flex justify-between items-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${difficultyColors[difficulty as keyof typeof difficultyColors]}`}>
|
|
{difficulty}
|
|
</span>
|
|
<span className="text-blue-600 dark:text-blue-400 text-sm font-medium">
|
|
开始测试 →
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|