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

## 问题描述

项目树中点击项目节点时，分镜列表无法显示对应的分镜数据。原因是项目选择没有更新全局的 `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. 状态变化响应及时，用户体验流畅

## 测试验证

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