# 场景资源列表画幅比例修复

**日期**: 2026-02-09  
**类型**: Bug 修复  
**影响范围**: 前端 - 资源管理面板

## 问题描述

场景资源列表中的图片显示比例未按照项目画幅比例显示。例如，9:16 竖屏项目中，场景资源仍然显示为 16:9 横屏比例。

### 根本原因

代码逻辑错误地使用了 `currentProject?.settings?.resolution`（对象格式），而项目的画幅比例实际存储在 `currentProject?.aspectRatio`（字符串格式，如 "9:16"）。

## 解决方案

### 修改文件

`client/src/components/features/project/ProjectResourcePanel.tsx`

### 关键变更

1. **添加画幅比例转换逻辑**（第 204-210 行）
   ```typescript
   // 将项目的 aspectRatio 字符串转换为 { width, height } 格式
   const projectAspectRatioConfig = useMemo(() => {
     if (!currentProject?.aspectRatio) return undefined;
     const [width, height] = currentProject.aspectRatio.split(':').map(Number);
     if (!width || !height) return undefined;
     return { width, height };
   }, [currentProject]);
   ```

2. **更新 MediaCard 的 aspectRatio 传参**（第 453-456 行）
   ```typescript
   aspectRatio={getResourceContainerClass(
     item.data.type,
     projectAspectRatioConfig  // 修改：从 currentProject?.settings?.resolution 改为 projectAspectRatioConfig
   )}
   ```

3. **更新依赖数组**（第 508-516 行）
   ```typescript
   [
     selectedResources,
     selectedResourceId,
     handleSelectResource,
     handleRequestDeleteResource,
     projectAspectRatioConfig,  // 修改：从 currentProject?.settings?.resolution 改为 projectAspectRatioConfig
     columns,
   ]
   ```

## 技术细节

### 数据格式转换

- **原格式**：`aspectRatio: "9:16"` (字符串)
- **目标格式**：`{ width: 9, height: 16 }` (对象)
- **转换逻辑**：使用 `split(':')` 和 `map(Number)` 解析字符串

### 支持的画幅比例

根据 `client/src/constants/resource.ts` 中的 `getResourceContainerClass()` 函数，场景资源支持：
- `16:9` → `aspect-video`
- `9:16` → `aspect-[9/16]`
- `1:1` → `aspect-square`
- `4:3` → `aspect-[4/3]`
- `21:9` → `aspect-[21/9]`
- 自定义比例 → `aspect-[width/height]`

### 资源类型比例规则

- **角色** (`character`)：固定 3:4 比例
- **场景** (`location`)：跟随项目画幅比例 ✅
- **道具** (`prop`)：固定 1:1 比例
- **实拍** (`footage`)：固定 1:1 比例

## 测试建议

1. 创建不同画幅比例的项目（16:9、9:16、1:1、4:3、21:9）
2. 在每个项目中添加场景资源
3. 验证场景资源图片显示比例是否与项目画幅一致
4. 确认角色（3:4）、道具（1:1）、实拍（1:1）的显示比例不受影响

## 相关文件

- `client/src/components/features/project/ProjectResourcePanel.tsx` - 资源管理面板
- `client/src/constants/resource.ts` - 资源容器样式配置
- `client/src/types/project.ts` - 项目类型定义（第 94 行：`aspectRatio?: AspectRatioType`）

## 影响范围

- ✅ 场景资源列表显示
- ✅ 资源预览面板（已使用相同逻辑）
- ⚠️ 需确认其他使用 `getResourceContainerClass()` 的组件是否需要同步修复

## 后续优化建议

考虑创建统一的 Hook 用于获取项目画幅比例配置，避免重复的转换逻辑：

```typescript
// hooks/useProjectAspectRatio.ts
export function useProjectAspectRatio(project: Project | null | undefined) {
  return useMemo(() => {
    if (!project?.aspectRatio) return undefined;
    const [width, height] = project.aspectRatio.split(':').map(Number);
    if (!width || !height) return undefined;
    return { width, height };
  }, [project?.aspectRatio]);
}
```