docs/v1.0/client/rfcs/116-fix-project-storyboard.md

项目分镜关联功能实现修复

问题描述

项目树中点击项目节点时，分镜列表无法显示对应的分镜数据。原因是项目选择没有更新全局的 currentProjectId 状态。

解决方案

通过 UI Store 统一管理项目选择，实现项目选择与分镜列表的正确关联。

具体修复内容

1. 扩展 uiStore 添加项目选择功能

文件: client/src/stores/uiStore.ts

修改内容:

• 添加 selectedProjectId: string | null 状态字段
• 添加 selectProject(projectId: string | null, projectName?: string) 方法
• 在 selectProject 方法中：
  • 更新 uiStore 的 selectedProjectId
  • 调用 appStore.setCurrentProjectId 更新全局项目状态
  • 调用 editorStore.reset() 清理编辑器状态
  • 触发 projectSelected 自定义事件
• 将 selectedProjectId 添加到持久化配置中

2. 修改 ProjectTreeNode 集成项目选择逻辑

文件: client/src/components/features/project/ProjectTreeNode.tsx

修改内容:

• 移除本地 selectedId 状态管理和相关的 useState 导入
• 从 uiStore 获取 selectProject 方法和 selectedProjectId 状态
• 修改 handleClick 方法：
  • 当点击项目节点时，调用 selectProject(node.projectId.toString(), node.name)
• 更新选中状态判断逻辑：
  • 使用 selectedProjectId === node.projectId.toString() 判断选中状态
• 更新样式应用，使用新的 isSelected 变量

3. 状态同步验证

验证内容:

• 确认 StoryboardDescPanel 使用 useStoryboards(currentProjectId) 正确响应项目变化
• 验证项目选择时编辑器状态正确重置
• 确保状态持久化正常工作

技术要点

1. 状态管理统一: 通过 uiStore 统一管理项目选择，避免状态分散
2. 状态同步: 项目选择时同步更新多个 store 的相关状态
3. 组件解耦: 移除组件内部的选择状态管理，使用全局状态
4. 事件通信: 通过自定义事件支持跨组件通信

预期效果

1. 点击项目节点时，分镜列表自动显示对应项目的分镜数据
2. 项目选择状态在UI中有明确的视觉反馈
3. 项目切换时编辑器状态正确重置
4. 状态变化响应及时，用户体验流畅

测试验证

• 语法检查通过，无 TypeScript 错误
• 功能测试：点击不同项目验证分镜列表更新
• 状态测试：验证项目选择状态持久化
• 边界测试：处理项目不存在等异常情况