feat(front): 谱面管理左侧列表搜索、1440 断点修复、右侧编辑区空态

MI
7h ago
+201-61

改动

1. 谱面管理左侧列表加搜索框 —— 按名称 / 作曲 / 谱师 / ID 过滤（补零的 6 位 ID 也能搜），复用 utils/musicSearch 的 matchMusicKeyword，与批量操作页同口径；过滤只作用于渲染列表，选中曲被过滤掉时右侧编辑面板不会变空。

搜索框

2. 修 1440 宽断点重叠 —— 抽屉布局的 max-[1440px] 与汉堡按钮的 min-[1440px]:hidden 在正好 1440px 时同时命中：左侧被推出屏幕、打开它的按钮又被隐藏，整页不可用；抽屉改为 max-[1439px]。上面这张和下面两张都是在 1440 宽下采集的，左侧列表固定展开即为修复后的效果。

3. A000 目录下编辑按钮保留但禁用 —— 按钮不再消失（避免位置跳动）；并且是真正禁用：按钮 disabled、保存的 Ctrl+S 快捷键与导入入口都在入口处拦截，不再只靠样式挡住鼠标；提示改为灰色小字放在按钮下面。

A000 禁用态

4. 未选中谱面时右侧给空态提示 —— 编辑区不再整块空白，居中「请选择谱面以编辑」，24px、0.5 不透明度，三语同步。

空态提示

验证

真实后端（1671 首）浏览器实测：Glorious→2、Mournfinale→4、1005→2、zzzz→0、夜→11；深位置跳转 scrollTop 0→83833 定位成功；1440 宽下 matchMedia('(max-width:1439px)') 为 false；pnpm typecheck 与 pnpm build 通过。两轮 code review。

AI-assisted-by: DeepSeek-V4-Flash (DeepSeek Harness)

Sourcery 摘要

改进谱面管理搜索和空状态，修复 1440px 布局边界问题，并确保 A000 目录为只读。

新功能：

  • 支持按标题、作曲者、谱师，以及原始和补零后的 ID 搜索筛选曲目列表，并提供本地化的无结果和清除搜索状态。
  • 编辑器未选中谱面时显示本地化的空状态。

错误修复：

  • 修复 1440px 响应式断点问题，确保在恰好 1440px 时谱面列表抽屉和菜单控件仍可正常使用。
  • 确保 A000 目录在编辑、保存、删除、导入、新建、替换和更新封面等操作中始终为只读，同时保留禁用的控件和说明信息。
  • 在筛选、切换面板或打开响应式抽屉时保留已选谱面，并确保列表导航可靠。
Original summary in English

Sourcery 总结

通过添加可搜索的导航、可靠的响应式行为、清晰的编辑器空状态，以及强制对 A000 目录进行只读处理，改进图表管理。

新功能：

  • 为图表列表添加本地化搜索和无匹配结果提示，并支持匹配原始歌曲 ID 和补零后的歌曲 ID。
  • 未选择图表进行编辑时，显示本地化提示。

错误修复：

  • 修复图表管理布局在宽度恰好为 1440px 时的响应式行为。
  • 在筛选、切换面板或打开响应式抽屉时，保留图表导航状态和选中项。

改进：

  • 将 A000 目录统一设为只读，同时保留已禁用的编辑控件和说明信息。
  • 在异步导入、替换、封面上传、保存、删除和创建流程中，针对目录变更和只读目标添加保护。
Original summary in English

Summary by Sourcery

Improve chart management with searchable navigation, reliable responsive behavior, a clear editor empty state, and enforced read-only handling for the A000 directory.

New Features:

  • Add localized search and empty-result feedback to the chart list, including matching raw and zero-padded song IDs.
  • Show a localized prompt when no chart is selected for editing.

Bug Fixes:

  • Fix responsive chart-management layout behavior at exactly 1440px.
  • Preserve chart navigation and selection when filtering, switching panels, or opening the responsive drawer.

Enhancements:

  • Make the A000 directory consistently read-only while retaining disabled editing controls and explanatory messaging.
  • Guard asynchronous import, replacement, cover-upload, save, delete, and creation flows against directory changes and read-only targets.