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.
100 lines
3.8 KiB
100 lines
3.8 KiB
/**
|
|
* ProjectResourceLinkDemo - 项目与素材库联动演示
|
|
* 展示从项目面板切换到素材库的联动功能
|
|
*/
|
|
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useUIStore } from '@/stores/uiStore';
|
|
|
|
export function ProjectResourceLinkDemo() {
|
|
const [lastEvent, setLastEvent] = useState<{ projectId: string; projectName: string } | null>(null);
|
|
const { switchToLibraryWithProject, leftPanelActiveTab } = useUIStore();
|
|
|
|
// 监听项目选择事件
|
|
useEffect(() => {
|
|
const handleSelectProjectInLibrary = (event: CustomEvent) => {
|
|
const { projectId, projectName } = event.detail;
|
|
setLastEvent({ projectId, projectName });
|
|
};
|
|
|
|
window.addEventListener('selectProjectInLibrary', handleSelectProjectInLibrary as EventListener);
|
|
|
|
return () => {
|
|
window.removeEventListener('selectProjectInLibrary', handleSelectProjectInLibrary as EventListener);
|
|
};
|
|
}, []);
|
|
|
|
// 模拟项目数据
|
|
const mockProjects = [
|
|
{ id: 'project-1', name: '西游记之大圣归来 - 2015第一部' },
|
|
{ id: 'project-2', name: '琅琊榜 - 第一集' },
|
|
{ id: 'project-3', name: '琅琊榜 - 第二集' },
|
|
{ id: 'project-4', name: '琅琊榜 - 第三集' },
|
|
];
|
|
|
|
const handleTestProjectLink = (projectId: string, projectName: string) => {
|
|
switchToLibraryWithProject(projectId, projectName);
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-2xl mx-auto space-y-6">
|
|
<h2 className="text-lg font-semibold">项目与素材库联动演示</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-sm font-medium mb-2">当前状态</h3>
|
|
<div className="p-3 bg-muted rounded-md text-sm space-y-1">
|
|
<p><strong>当前面板:</strong> {leftPanelActiveTab === 'project' ? '项目面板' : '素材库面板'}</p>
|
|
{lastEvent && (
|
|
<>
|
|
<p><strong>最后选择的项目ID:</strong> {lastEvent.projectId}</p>
|
|
<p><strong>最后选择的项目名称:</strong> {lastEvent.projectName}</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-sm font-medium mb-2">测试联动功能</h3>
|
|
<p className="text-xs text-muted-foreground mb-3">
|
|
点击下面的按钮模拟在项目面板中右键点击"展开素材"
|
|
</p>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{mockProjects.map((project) => (
|
|
<Button
|
|
key={project.id}
|
|
variant="outline"
|
|
size="sm"
|
|
className="justify-start text-left"
|
|
onClick={() => handleTestProjectLink(project.id, project.name)}
|
|
>
|
|
📁 {project.name} → 展开素材
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
<p><strong>联动流程:</strong></p>
|
|
<ol className="list-decimal list-inside space-y-1 mt-1">
|
|
<li>用户在项目面板右键点击项目</li>
|
|
<li>选择"展开素材"菜单项</li>
|
|
<li>自动切换到素材库面板</li>
|
|
<li>智能搜索框显示项目名称</li>
|
|
<li>自动加载该项目的素材</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
<p><strong>技术实现:</strong></p>
|
|
<ul className="list-disc list-inside space-y-1 mt-1">
|
|
<li>UIStore 中的 switchToLibraryWithProject 方法</li>
|
|
<li>自定义事件 'selectProjectInLibrary' 进行组件间通信</li>
|
|
<li>ProjectResourcePanel 和 ProjectSmartSearchInput 监听事件并响应</li>
|
|
<li>自动切换面板并填充搜索框</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|