feat: init

pages/test-pages/navigation-test.tsx

@@ -0,0 +1,453 @@
+import { useState } from 'react'
+import { Link } from 'wouter'
+
+export default function NavigationTestPage() {
+	const [activeTab, setActiveTab] = useState('home')
+	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+	const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
+	const [breadcrumbs, setBreadcrumbs] = useState(['首页', '产品', '手机'])
+	const [notifications, setNotifications] = useState([
+		{ id: 1, title: '新消息', content: '您有一条新的私信', time: '2分钟前', unread: true },
+		{ id: 2, title: '系统通知', content: '系统将于今晚维护', time: '1小时前', unread: true },
+		{ id: 3, title: '订单更新', content: '您的订单已发货', time: '3小时前', unread: false }
+	])
+
+	const handleBreadcrumbClick = (index: number) => {
+		const newBreadcrumbs = breadcrumbs.slice(0, index + 1)
+		setBreadcrumbs(newBreadcrumbs)
+	}
+
+	const markNotificationAsRead = (id: number) => {
+		setNotifications(prev => 
+			prev.map(notif => 
+				notif.id === id ? { ...notif, unread: false } : notif
+			)
+		)
+	}
+
+	const unreadCount = notifications.filter(n => n.unread).length
+
+	return (
+		<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+			{/* 顶部导航栏 */}
+			<nav className="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-200 dark:border-gray-700">
+				<div className="max-w-7xl mx-auto px-4">
+					<div className="flex justify-between items-center h-16">
+						{/* Logo */}
+						<div className="flex items-center">
+							<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+								TestNav
+							</div>
+						</div>
+
+						{/* 主导航菜单 */}
+						<div className="hidden md:flex space-x-8">
+							<a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+								首页
+							</a>
+							
+							{/* 产品下拉菜单 */}
+							<div className="relative">
+								<button
+									onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+									className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center"
+								>
+									产品
+									<svg className="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+									</svg>
+								</button>
+								
+								{isDropdownOpen && (
+									<div className="absolute top-full left-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+										<div className="py-1">
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												手机
+											</a>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												电脑
+											</a>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												平板
+											</a>
+											<div className="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												配件
+											</a>
+										</div>
+									</div>
+								)}
+							</div>
+
+							<a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+								服务
+							</a>
+							<a href="#" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+								支持
+							</a>
+						</div>
+
+						{/* 右侧菜单 */}
+						<div className="flex items-center space-x-4">
+							{/* 通知铃铛 */}
+							<div className="relative">
+								<button className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 p-2 rounded-full transition-colors">
+									<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM10.5 3.75a6 6 0 0 1 6 6v2.25l2.25 2.25v2.25H2.25V14.25L4.5 12V9.75a6 6 0 0 1 6-6z" />
+									</svg>
+									{unreadCount > 0 && (
+										<span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+											{unreadCount}
+										</span>
+									)}
+								</button>
+							</div>
+
+							{/* 用户菜单 */}
+							<div className="relative">
+								<button
+									onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+									className="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 p-2 rounded-full transition-colors"
+								>
+									<div className="h-8 w-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
+										U
+									</div>
+								</button>
+								
+								{isUserMenuOpen && (
+									<div className="absolute top-full right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+										<div className="py-1">
+											<div className="px-4 py-2 text-sm text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-600">
+												user@example.com
+											</div>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												个人资料
+											</a>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												设置
+											</a>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												帮助
+											</a>
+											<div className="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+											<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
+												退出登录
+											</a>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+			</nav>
+
+			{/* 面包屑导航 */}
+			<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+				<div className="max-w-7xl mx-auto px-4 py-3">
+					<nav className="flex" aria-label="Breadcrumb">
+						<ol className="flex items-center space-x-2">
+							{breadcrumbs.map((crumb, index) => (
+								<li key={index} className="flex items-center">
+									{index > 0 && (
+										<svg className="h-4 w-4 text-gray-400 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+										</svg>
+									)}
+									<button
+										onClick={() => handleBreadcrumbClick(index)}
+										className={`text-sm font-medium transition-colors ${
+											index === breadcrumbs.length - 1
+												? 'text-gray-500 dark:text-gray-400 cursor-default'
+												: 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300'
+										}`}
+									>
+										{crumb}
+									</button>
+								</li>
+							))}
+						</ol>
+					</nav>
+				</div>
+			</div>
+
+			{/* 主要内容区域 */}
+			<div className="max-w-7xl mx-auto px-4 py-8">
+				{/* 标签页导航 */}
+				<div className="mb-8">
+					<div className="border-b border-gray-200 dark:border-gray-700">
+						<nav className="-mb-px flex space-x-8">
+							{[
+								{ id: 'home', label: '概览', icon: '🏠' },
+								{ id: 'products', label: '产品列表', icon: '📱' },
+								{ id: 'orders', label: '订单管理', icon: '📦' },
+								{ id: 'analytics', label: '数据分析', icon: '📊' },
+								{ id: 'settings', label: '设置', icon: '⚙️' }
+							].map((tab) => (
+								<button
+									key={tab.id}
+									onClick={() => setActiveTab(tab.id)}
+									className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
+										activeTab === tab.id
+											? 'border-blue-500 text-blue-600 dark:text-blue-400'
+											: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
+									}`}
+								>
+									<span className="mr-2">{tab.icon}</span>
+									{tab.label}
+								</button>
+							))}
+						</nav>
+					</div>
+				</div>
+
+				{/* 标签页内容 */}
+				<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+					{activeTab === 'home' && (
+						<div>
+							<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">概览</h2>
+							<p className="text-gray-600 dark:text-gray-300 mb-6">
+								欢迎来到导航测试页面！这里展示了各种常见的导航模式。
+							</p>
+							<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+								<div className="bg-blue-50 dark:bg-blue-900 p-4 rounded-lg">
+									<h3 className="font-semibold text-blue-900 dark:text-blue-100">总销售额</h3>
+									<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">¥123,456</p>
+								</div>
+								<div className="bg-green-50 dark:bg-green-900 p-4 rounded-lg">
+									<h3 className="font-semibold text-green-900 dark:text-green-100">订单数量</h3>
+									<p className="text-2xl font-bold text-green-600 dark:text-green-400">1,234</p>
+								</div>
+								<div className="bg-purple-50 dark:bg-purple-900 p-4 rounded-lg">
+									<h3 className="font-semibold text-purple-900 dark:text-purple-100">用户数量</h3>
+									<p className="text-2xl font-bold text-purple-600 dark:text-purple-400">5,678</p>
+								</div>
+							</div>
+						</div>
+					)}
+
+					{activeTab === 'products' && (
+						<div>
+							<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">产品列表</h2>
+							<div className="space-y-4">
+								{['iPhone 15 Pro', 'MacBook Air', 'iPad Pro', 'Apple Watch'].map((product, index) => (
+									<div key={index} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-600 rounded-lg">
+										<div>
+											<h3 className="font-medium text-gray-900 dark:text-white">{product}</h3>
+											<p className="text-gray-500 dark:text-gray-400">产品描述...</p>
+										</div>
+										<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors">
+											查看详情
+										</button>
+									</div>
+								))}
+							</div>
+						</div>
+					)}
+
+					{activeTab === 'orders' && (
+						<div>
+							<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">订单管理</h2>
+							<div className="overflow-x-auto">
+								<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
+									<thead className="bg-gray-50 dark:bg-gray-700">
+										<tr>
+											<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">订单号</th>
+											<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">客户</th>
+											<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
+											<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">金额</th>
+										</tr>
+									</thead>
+									<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600">
+										{[
+											{ id: '#001', customer: '张三', status: '已发货', amount: '¥1,299' },
+											{ id: '#002', customer: '李四', status: '处理中', amount: '¥2,599' },
+											{ id: '#003', customer: '王五', status: '已完成', amount: '¥899' }
+										].map((order, index) => (
+											<tr key={index}>
+												<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{order.id}</td>
+												<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{order.customer}</td>
+												<td className="px-6 py-4 whitespace-nowrap">
+													<span className={`px-2 py-1 text-xs font-medium rounded-full ${
+														order.status === '已完成' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
+														order.status === '已发货' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+														'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+													}`}>
+														{order.status}
+													</span>
+												</td>
+												<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{order.amount}</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
+						</div>
+					)}
+
+					{activeTab === 'analytics' && (
+						<div>
+							<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">数据分析</h2>
+							<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+								<div className="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
+									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">销售趋势</h3>
+									<div className="h-32 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg flex items-center justify-center text-white">
+										📈 图表占位符
+									</div>
+								</div>
+								<div className="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
+									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">用户分布</h3>
+									<div className="h-32 bg-gradient-to-r from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white">
+										🗺️ 地图占位符
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+
+					{activeTab === 'settings' && (
+						<div>
+							<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">设置</h2>
+							<div className="space-y-6">
+								<div>
+									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">通知设置</h3>
+									<div className="space-y-2">
+										<label className="flex items-center">
+											<input type="checkbox" className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" defaultChecked />
+											<span className="ml-2 text-gray-700 dark:text-gray-300">邮件通知</span>
+										</label>
+										<label className="flex items-center">
+											<input type="checkbox" className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+											<span className="ml-2 text-gray-700 dark:text-gray-300">短信通知</span>
+										</label>
+									</div>
+								</div>
+								<div>
+									<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">隐私设置</h3>
+									<div className="space-y-2">
+										<label className="flex items-center">
+											<input type="checkbox" className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" defaultChecked />
+											<span className="ml-2 text-gray-700 dark:text-gray-300">公开个人资料</span>
+										</label>
+										<label className="flex items-center">
+											<input type="checkbox" className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" defaultChecked />
+											<span className="ml-2 text-gray-700 dark:text-gray-300">允许搜索</span>
+										</label>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* 操作按钮 */}
+				<div className="mt-8 flex flex-wrap gap-4">
+					<button
+						onClick={() => setIsModalOpen(true)}
+						className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition-colors"
+					>
+						打开模态框
+					</button>
+					<button
+						onClick={() => setBreadcrumbs([...breadcrumbs, `新页面${breadcrumbs.length}`])}
+						className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition-colors"
+					>
+						添加面包屑
+					</button>
+					<button
+						onClick={() => {
+							const newNotif = {
+								id: Date.now(),
+								title: '新通知',
+								content: `这是第 ${notifications.length + 1} 条通知`,
+								time: '刚刚',
+								unread: true
+							}
+							setNotifications(prev => [newNotif, ...prev])
+						}}
+						className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md transition-colors"
+					>
+						添加通知
+					</button>
+				</div>
+
+				{/* 通知列表 */}
+				{notifications.length > 0 && (
+					<div className="mt-8">
+						<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">通知中心</h3>
+						<div className="space-y-2">
+							{notifications.map((notification) => (
+								<div
+									key={notification.id}
+									className={`p-4 rounded-lg border cursor-pointer transition-colors ${
+										notification.unread
+											? 'bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700'
+											: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600'
+									}`}
+									onClick={() => markNotificationAsRead(notification.id)}
+								>
+									<div className="flex justify-between items-start">
+										<div className="flex-1">
+											<h4 className="font-medium text-gray-900 dark:text-white">{notification.title}</h4>
+											<p className="text-gray-600 dark:text-gray-300 text-sm">{notification.content}</p>
+										</div>
+										<div className="flex items-center space-x-2">
+											<span className="text-xs text-gray-500 dark:text-gray-400">{notification.time}</span>
+											{notification.unread && (
+												<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+											)}
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+
+			{/* 模态框 */}
+			{isModalOpen && (
+				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+					<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+						<div className="flex justify-between items-center mb-4">
+							<h3 className="text-lg font-medium text-gray-900 dark:text-white">模态框标题</h3>
+							<button
+								onClick={() => setIsModalOpen(false)}
+								className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+							>
+								<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						</div>
+						<p className="text-gray-600 dark:text-gray-300 mb-6">
+							这是一个模态框示例，用于测试弹窗交互。Agent 需要能够识别并操作这类覆盖层元素。
+						</p>
+						<div className="flex justify-end space-x-3">
+							<button
+								onClick={() => setIsModalOpen(false)}
+								className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+							>
+								取消
+							</button>
+							<button
+								onClick={() => setIsModalOpen(false)}
+								className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+							>
+								确认
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* 返回链接 */}
+			<div className="max-w-7xl mx-auto px-4 py-8">
+				<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
+					← 返回测试页面列表
+				</Link>
+			</div>
+		</div>
+	)
+}