docs/v1.0/.archive/client/project-storyboard-link.md

项目分镜关联实现计划

任务背景

当前项目树中点击项目节点时，分镜列表无法显示对应的分镜数据。需要实现点击项目后在分镜列表展示该项目对应的所有分镜数据的功能。

技术分析

• 当前状况：ProjectTreeNode 点击项目时只设置本地 selectedId，未更新全局 currentProjectId
• 数据关联：分镜数据通过 projectId 与项目关联，StoryboardDescPanel 通过 useStoryboards(currentProjectId) 获取分镜
• 状态管理：appStore 管理 currentProjectId，editorStore 管理分镜选择，uiStore 管理UI状态

实施方案

采用方案2：通过 UI Store 统一管理项目选择，提供更好的状态管理架构。

详细步骤

步骤1：扩展 uiStore 添加项目选择功能

文件：client/src/stores/uiStore.ts 操作：

• 添加 selectedProjectId: string | null 状态
• 添加 selectProject(projectId: string | null, projectName?: string) 方法
• 在 selectProject 中调用 appStore.setCurrentProjectId
• 在 selectProject 中调用 editorStore.reset() 清理编辑器状态 预期结果：uiStore 具备统一的项目选择管理能力

步骤2：修改 ProjectTreeNode 集成项目选择逻辑

文件：client/src/components/features/project/ProjectTreeNode.tsx 操作：

• 导入 useAppStore 和修改后的 useUIStore
• 修改 handleClick 方法，当节点类型为项目时调用 selectProject
• 更新选中状态的判断逻辑，使用 uiStore.selectedProjectId
• 移除本地的 selectedId 状态管理 预期结果：点击项目节点能正确触发项目选择

步骤3：处理状态同步和数据流

文件：验证 StoryboardDescPanel 的数据获取逻辑 操作：

• 确认 useStoryboards(currentProjectId) 能正确响应 currentProjectId 变化
• 验证项目切换时分镜数据的重新加载 预期结果：项目切换时分镜列表自动更新

步骤4：优化用户体验

操作：

• 添加项目切换时的加载状态提示
• 确保项目选择的视觉反馈清晰
• 处理项目不存在或加载失败的边界情况 预期结果：用户体验流畅，状态反馈明确

技术要点

• 使用 Zustand 的状态管理模式
• 保持状态更新的原子性
• 确保组件重渲染的性能优化
• 维护状态持久化的一致性

验收标准

1. 点击项目节点时，分镜列表显示对应项目的分镜数据
2. 项目选择状态在UI中有明确的视觉反馈
3. 项目切换时编辑器状态正确重置
4. 状态变化响应及时，用户体验流畅
5. 边界情况处理完善，无异常错误