3.6 KiB

Raw Blame History

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

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

问题描述

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

根本原因

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

解决方案

修改文件

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

关键变更

添加画幅比例转换逻辑（第 204-210 行）

// 将项目的 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]);

更新 MediaCard 的 aspectRatio 传参（第 453-456 行）

aspectRatio={getResourceContainerClass(
  item.data.type,
  projectAspectRatioConfig  // 修改：从 currentProject?.settings?.resolution 改为 projectAspectRatioConfig
)}

更新依赖数组（第 508-516 行）

[
  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 比例

测试建议

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

影响范围

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

后续优化建议

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

// 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]);
}

3.6 KiB Raw Blame History