优化了布局结构并增强了自定义图片上传功能的用户体验

[Sheyiyuan]

概述

本次更新优化了布局结构并增强了自定义图片上传功能的用户体验。

---

修改内容

1. 布局调整：ExportPanel 位置优化

问题：ExportPanel 原本独占一行，布局不够紧凑。

解决方案：

• 桌面端：将 ExportPanel 移至 Canvas Section 下方，与 Controls Section 形成左右两列布局
• 移动端：保持原位置（单独一行），确保按钮正常显示

涉及文件：

• src/App.tsx - 调整 Grid 布局，添加响应式显示控制

原理：

• Material-UI Grid 断点基于视口宽度，而非父容器宽度
• 通过 display: { xs: 'none', md: 'block' } 实现响应式显示

---

2. 自定义角色功能增强

问题：上传自定义图片后，角色名称和导出文件名仍显示原角色，且可以切换角色造成混淆。

解决方案：

功能	修改
角色名称显示	有自定义图片时显示"自定义图片"
选择角色按钮	禁用按钮，悬停提示"请先清除自定义图片"
导出文件名	使用"自定义角色"作为文件名前缀

涉及文件：

• src/components/Picker.tsx - 添加 disabled、tooltip 属性，支持禁用状态下的提示
• src/hooks/useExport.ts - 添加 customImage 参数，修改文件名生成逻辑
• src/App.tsx - 传递 customImage 参数，控制 Picker 禁用状态

---

技术细节

禁用按钮显示 Tooltip：

• disabled 按钮不响应鼠标事件，需在外层容器监听 onMouseEnter/onMouseLeave
• 使用 Popover 或外层 <span> 包裹实现提示显示

文件名生成逻辑：

const characterName = customImage 
  ? '自定义图片' 
  : sanitize(typedCharacters[character].name)

---

测试要点

• 桌面端：ExportPanel 显示在 Canvas 下方，Controls 右侧
• 移动端：ExportPanel 保持单独一行，按钮正常换行
• 上传自定义图片后，角色名称显示"自定义角色"
• 上传自定义图片后，Picker 按钮禁用并显示提示
• 导出自定义图片时，文件名为"自定义角色.xxx"

[Copilot]

Pull request overview

该 PR 主要围绕两点改进：在桌面端将导出面板（ExportPanel）布局更紧凑地放置到画布区域下方，以及在上传自定义图片时优化角色选择与导出命名的用户体验。

Changes:

• 调整 App 中的响应式布局：桌面端将 ExportPanel 移到 Canvas 区域下方，移动端保持单独一行显示
• 增强自定义图片场景：为 Picker 增加 disabled/tooltip 入参，并在 App 中根据 customImage 禁用角色选择入口
• 更新导出文件名生成逻辑：useExport 在存在自定义图片时使用“自定义角色”作为文件名前缀

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/App.tsx	调整 Grid/响应式展示逻辑；在自定义图片存在时禁用 Picker 并更新角色名展示；桌面端新增 Canvas 下方的 ExportPanel
src/components/Picker.tsx	新增 disabled、tooltip 参数，并在禁用时阻止打开选择器
src/hooks/useExport.ts	useExport 新增 customImage 参数；导出文件名在自定义图片场景下使用“自定义角色”前缀
src/components/sections/ExportPanel.tsx	调整导出按钮在 md 断点下的 Grid 宽度以适配新的布局宽度
src/hooks/useCharacter.ts	上传回调的结构/格式调整（无明显行为变更）

Comments suppressed due to low confidence (1)

src/components/Picker.tsx:108

• Picker 接收了 disabled，但触发器 IconButton 没有设置 disabled/aria-disabled，目前只是通过 onClick 里 return 来阻止打开：按钮视觉与可访问性状态仍是可用的（键盘/读屏也会认为可点击）。建议把 disabled={disabled} 传给 IconButton，并用外层 <span> 包裹以确保禁用时 Tooltip 仍可触发。

      <IconButton
        color="secondary"
        onClick={handleOpen}
        sx={{ color: color }}
        size="small"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

generateFileName 的回调里读取了 customImage，但依赖数组里没有包含它，导致上传/清除自定义图片后文件名可能仍使用旧的角色前缀（闭包值不更新）。请把 customImage（以及如果需要的话 typedCharacters/sanitize 的稳定引用）加入依赖，或改为基于参数/局部变量避免闭包过期。

Suggested change

	[character, text]
	[character, text, customImage]

[Copilot]

这里自定义图片时显示的是“自定义图片”，但 PR 描述与 useExport 的文件名前缀使用的是“自定义角色”。同一概念在 UI 与导出命名不一致会让用户困惑。建议统一为同一个文案（按描述应为“自定义角色”），并确保其它相关提示（Tooltip/文件名）也一致。