feat: 歌单拖拽排序功能

[WorldSansha]

Summary

• 新增 useDragSort composable，统一拖拽排序逻辑，支持 handle（手柄）和 longpress（长按）两种触发模式
• 播放列表侧边栏使用手柄拖拽，收藏/歌单页面使用长按拖拽
• 支持在线歌单（调用 /song/order/update API）和本地歌单的排序持久化
• 虚拟滚动列表兼容：自动滚动、插入位置计算、拖拽指示线

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求引入了歌单歌曲的拖拽排序功能，极大地提升了用户管理播放列表的灵活性和便捷性。通过将复杂的拖拽逻辑抽象为一个可复用的 composable，不仅简化了代码，还确保了在不同列表组件中行为的一致性。现在用户可以直观地重新排列他们的歌曲，并且这些更改会得到妥善的保存，无论是对于在线还是本地歌单。

Highlights

• 统一拖拽排序逻辑: 新增 useDragSort composable，封装了拖拽排序的核心逻辑，支持手柄（handle）和长按（longpress）两种触发模式，并兼容虚拟滚动列表的自动滚动、插入位置计算和拖拽指示线。
• 歌单排序持久化: 实现了在线歌单（通过 /song/order/update API）和本地歌单的歌曲排序持久化功能，确保用户调整的顺序能够被保存。
• 多场景应用: 在播放列表侧边栏使用手柄拖拽模式，而在收藏/歌单页面则使用长按拖拽模式，以适应不同交互场景的需求。

Changelog

• src/api/playlist.ts
  • 新增 songOrderUpdate API，用于更新在线歌单中的歌曲顺序。
• src/components/List/SongList.vue
  • 引入 useDragSort composable，为歌曲列表添加拖拽排序功能。
  • 新增 draggable prop，控制列表是否可拖拽。
  • 添加拖拽放置指示线和拖拽浮动标签的UI元素及样式。
• src/components/List/SongPlayList.vue
  • 重构了拖拽逻辑，替换了原有的手动拖拽实现，改为使用 useDragSort composable。
  • 将拖拽事件绑定到 handlePointerDown 方法，并配置为手柄触发模式。
• src/composables/List/useDragSort.ts
  • 新增 useDragSort composable，集中管理拖拽排序的状态、事件监听、自动滚动、目标索引计算等逻辑。
  • 定义了 DragSortOptions 接口，支持配置虚拟滚动引用、项目数量、重排序回调、内边距、触发模式和长按延迟。
• src/stores/local.ts
  • 新增 reorderSongsInLocalPlaylist 方法，用于重排本地歌单中的歌曲顺序并持久化。
• src/views/List/liked.vue
  • 在 SongList 组件中启用了拖拽功能，并绑定 reorder 事件。
  • 添加 canDragSort 计算属性，限制拖拽排序仅在默认排序且非搜索模式下可用。
  • 实现了 handleReorder 方法，处理歌曲重排序后的视图更新和通过 songOrderUpdate API进行持久化。
• src/views/List/playlist.vue
  • 在 SongList 组件中启用了拖拽功能，并绑定 reorder 事件。
  • 添加 canDragSort 计算属性，限制拖拽排序仅在用户自建歌单、默认排序且非搜索模式下可用。
  • 实现了 handleReorder 方法，根据歌单类型（本地或在线）分别调用 localStore.reorderSongsInLocalPlaylist 或 songOrderUpdate API进行持久化。

Activity

• 此拉取请求引入了歌单歌曲拖拽排序的新功能，提升了用户体验。
• 核心拖拽逻辑被抽象为可复用的 useDragSort composable。
• 在线和本地歌单的排序持久化功能已实现并集成。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

本次 PR 实现了歌单的拖拽排序功能，这是一个非常实用的特性。代码实现质量很高，特别是将复杂的拖拽逻辑抽象为 useDragSort 这个 composable，极大地提高了代码的可维护性和复用性。在 SongPlayList 组件中，原有的拖拽逻辑被新 composable 替代，使得组件代码更加简洁。同时，在 liked 和 playlist 视图中也集成了此功能，并对在线和本地歌单的排序持久化做了区分处理，考虑得很周全。乐观更新的 UI 策略以及失败回滚的逻辑也值得称赞。我只发现了一个小的样式语法问题，除此之外，整体实现非常出色。