mzaxdandClaude
ba1fab65c6
完成 Next.js 14+ 全栈应用的 MVP 实现，包含以下功能： ## 项目设置 - 初始化 Next.js 14+ 项目，配置 TypeScript 严格模式 - 配置 Tailwind CSS、ESLint、Prettier 代码质量工具 - 集成 shadcn/ui 组件库和 next-intl 国际化方案 ## 数据层 - 配置 PostgreSQL + Prisma ORM - 定义 Project、Tag、ExternalLink 数据模型 - 实现种子数据脚本（5个AI项目） ## 用户故事 1：浏览和搜索 AI 项目 - 实现首页，展示热门标签云和精选项目 - 实现项目列表页，支持搜索和标签筛选 - 创建 TagCloud、ProjectCard、ProjectList、SearchBar 组件 - 实现 ISR 缓存策略优化性能 ## 用户故事 2：查看项目详细信息 - 实现项目详情页，显示完整信息 - 创建 ExternalLinkCard 组件展示外部链接 - 实现安全的 target="_blank" 外链跳转 ## 用户故事 4：数据更新和管理 - 实现 webhook API 端点接收 n8n 数据推送 - 实现 API Key 身份验证 - 支持部分成功模式的批量数据处理 - 完善的错误处理和日志记录 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
34 lines
940 B
TypeScript
34 lines
940 B
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
|
|
interface SearchBarProps {
|
|
locale: string
|
|
}
|
|
|
|
export function SearchBar({ locale }: SearchBarProps) {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const [query, setQuery] = useState(searchParams.get('search') || '')
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const params = new URLSearchParams()
|
|
if (query) params.set('search', query)
|
|
router.push(`/${locale}/projects?${params.toString()}`)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="w-full max-w-md mx-auto mb-8">
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="搜索 AI 项目..."
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</form>
|
|
)
|
|
}
|