126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import useSWR from 'swr';
|
|
import { formatVersion } from '@/lib/utils';
|
|
|
|
const fetcher = async (url: string) => {
|
|
const res = await fetch(url);
|
|
if (!res.ok) {
|
|
throw new Error(`HTTP error: ${res.status}`);
|
|
}
|
|
return res.json();
|
|
};
|
|
|
|
interface Project {
|
|
name: string;
|
|
displayName: string;
|
|
}
|
|
|
|
interface SearchFormProps {
|
|
onSearch: (project: string, version: string, commitId: string) => void;
|
|
}
|
|
|
|
export default function SearchForm({ onSearch }: SearchFormProps) {
|
|
const [selectedProject, setSelectedProject] = useState('');
|
|
const [selectedVersion, setSelectedVersion] = useState('');
|
|
const [commitId, setCommitId] = useState('');
|
|
|
|
// 获取项目列表
|
|
const { data: projects, isLoading: loadingProjects } = useSWR<Project[]>(
|
|
'/api/projects',
|
|
fetcher
|
|
);
|
|
|
|
// 获取版本列表
|
|
const { data: versions, isLoading: loadingVersions } = useSWR<string[]>(
|
|
selectedProject ? `/api/versions?project=${selectedProject}` : null,
|
|
fetcher
|
|
);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (selectedProject && selectedVersion) {
|
|
onSearch(selectedProject, selectedVersion, commitId);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="project" className="block text-sm font-medium text-gray-700 mb-2">
|
|
项目
|
|
</label>
|
|
<select
|
|
id="project"
|
|
value={selectedProject}
|
|
onChange={(e) => {
|
|
setSelectedProject(e.target.value);
|
|
setSelectedVersion('');
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
|
required
|
|
>
|
|
<option value="">选择项目</option>
|
|
{loadingProjects ? (
|
|
<option disabled>加载中...</option>
|
|
) : (
|
|
projects?.map((project) => (
|
|
<option key={project.name} value={project.name}>
|
|
{project.displayName}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="version" className="block text-sm font-medium text-gray-700 mb-2">
|
|
版本
|
|
</label>
|
|
<select
|
|
id="version"
|
|
value={selectedVersion}
|
|
onChange={(e) => setSelectedVersion(e.target.value)}
|
|
disabled={!selectedProject}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-900"
|
|
required
|
|
>
|
|
<option value="">选择版本</option>
|
|
{loadingVersions ? (
|
|
<option disabled>加载中...</option>
|
|
) : (
|
|
versions?.map((version) => (
|
|
<option key={version} value={version}>
|
|
{formatVersion(version)}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="commit" className="block text-sm font-medium text-gray-700 mb-2">
|
|
Commit ID (可选)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="commit"
|
|
value={commitId}
|
|
onChange={(e) => setCommitId(e.target.value)}
|
|
placeholder="输入 commit id..."
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!selectedProject || !selectedVersion}
|
|
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
|
|
>
|
|
查询
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|