You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.8 KiB
57 lines
1.8 KiB
/**
|
|
* ProjectSearchDropdown 演示组件
|
|
* 用于测试项目搜索下拉功能
|
|
*/
|
|
import { useState } from 'react';
|
|
import { ProjectSearchDropdown } from './ProjectSearchDropdown';
|
|
|
|
export function ProjectSearchDropdownDemo() {
|
|
const [selectedProject, setSelectedProject] = useState<string>('');
|
|
const [selectedProjectName, setSelectedProjectName] = useState<string>('');
|
|
|
|
const handleProjectSelect = (projectId: string, projectName: string) => {
|
|
setSelectedProject(projectId);
|
|
setSelectedProjectName(projectName);
|
|
console.log('Selected project:', { projectId, projectName });
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-md mx-auto space-y-4">
|
|
<h2 className="text-lg font-semibold">项目搜索下拉演示</h2>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">选择项目</label>
|
|
<ProjectSearchDropdown
|
|
value={selectedProject}
|
|
onSelect={handleProjectSelect}
|
|
placeholder="搜索并选择项目..."
|
|
/>
|
|
</div>
|
|
|
|
{selectedProject && (
|
|
<div className="p-3 bg-muted rounded-md">
|
|
<p className="text-sm">
|
|
<strong>选中的项目:</strong>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
ID: {selectedProject}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
名称: {selectedProjectName}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
<p>功能特性:</p>
|
|
<ul className="list-disc list-inside space-y-1 mt-1">
|
|
<li>支持项目名称搜索</li>
|
|
<li>树形结构展示</li>
|
|
<li>搜索关键词高亮</li>
|
|
<li>智能展开匹配项</li>
|
|
<li>键盘导航支持</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|