个人中心 · 作品集支持自定义排序
变更日志
交付研发后如有调整将在此记录
一、背景与目标
当前作品集列表按创建时间固定排序，用户无法调整展示顺序，导致无法突出最想展示的内容。支持自定义排序，让用户掌控个人主页的作品集展示位置。
二、产品描述
2.1 需求描述
在个人中心作品集列表页，为作品集所有者提供自定义排序能力：
- 提供「自定义排序」入口，点击进入排序模式
- 排序模式下可拖拽卡片调整顺序，也可点击「置顶」快速移至第一位
- 「全部作品」固定第一位，不参与排序
- 点击「完成排序」保存并退出；点击「取消」放弃变更退出
- 排序结果持久化，本人刷新页面和访客访问均按自定义顺序展示
本期范围
仅针对主站 Web 端，不含 H5。
2.2 整体流程
主流程
| 步骤 | 操作 | 结果 |
|---|---|---|
| 1 | 访问自己的个人主页 → 作品集 Tab | 作品集列表右上角展示「自定义排序」按钮（作品集 ≥ 2 时） |
| 2 | 点击「自定义排序」 | 进入排序模式：卡片出现置顶按钮，按钮变为「完成排序」+「取消」 |
| 3a | 拖拽卡片 或 点击「置顶」 | 列表顺序实时更新（未保存） |
| 4a | 点击「完成排序」 | 保存成功后退出排序模式，Toast 提示"排序已保存" |
| 4b | 点击「取消」 | 不保存，恢复进入排序模式前的顺序，退出排序模式 |
| 4c | 保存失败 | 停留排序模式，Toast 提示"保存失败，请重试" |
2.3 全局说明
排序入口显示规则
- 仅在本人访问自己主页时展示；访客不可见
- 作品集（不含"全部作品"）数量 ≥ 2 时展示排序入口，否则隐藏
- 排序模式激活时，入口变为「完成排序」+「取消」双按钮状态
全部作品锁定规则
- 始终固定为列表第一项，不可被拖拽移动
- 排序模式下无置顶按钮，视觉上区分于其他卡片（如角标"固定"）
默认顺序
未设置自定义排序时，按作品集创建时间倒序排列，"全部作品"固定第一位。
排序模式限制
- 排序模式下，编辑、删除等其他操作入口隐藏或禁用
新增 / 删除作品集对排序的影响
- 新增作品集：追加到自定义排序末尾
- 删除作品集：从排序中移除，其余顺序不变
三、功能需求
3.1 排序入口
作为作品集所有者，我希望在自己的个人主页作品集 Tab 看到排序按钮，以便随时管理展示顺序。
普通模式 — 入口位置
普通模式（本人视角）
SeaArt
用户昵称
关注 128 · 粉丝 3.2k
作品
作品集
喜欢
收藏
🖼
全部作品
127件
🎨
二次元精选
32件
🌿
写实风格
18件
🔥
赛博朋克
24件
✨
梦幻场景
11件
「自定义排序」按钮位于作品集列表区域右上角，仅本人可见。
规则说明
- 作品集（不含"全部作品"）数量 ≥ 2 时展示排序按钮，否则隐藏
- 访客访问他人主页，不展示此按钮
3.2 排序模式
作为作品集所有者，我希望进入排序模式后可以自由调整顺序，完成后一键保存，也能随时取消放弃。
进入排序模式
排序模式激活
作品
作品集
喜欢
🖼
固定
全部作品
127件
🎨
⬆ 置顶
二次元精选
32件
🌿
⬆ 置顶
写实风格
18件
🔥
⬆ 置顶
赛博朋克
24件
✨
⬆ 置顶
梦幻场景
11件
保存成功后退出
普通模式恢复 + Toast
作品
作品集
喜欢
🖼
全部作品
127件
🌿
写实风格
18件
🎨
二次元精选
32件
🔥
赛博朋克
24件
✨
梦幻场景
11件
✓ 排序已保存
左：排序模式下「全部作品」显示"固定"角标且无置顶按钮；其余卡片显示「⬆ 置顶」。右：保存成功后退出排序模式，顺序更新，Toast 提示。
规则说明
- 进入排序模式：「自定义排序」按钮变为「完成排序」+「取消」双按钮
- 保存成功：退出排序模式，Toast "排序已保存"
- 保存失败：停留排序模式，Toast "保存失败，请重试"
- 点击「取消」：不保存，列表恢复进入排序前的顺序，无弹窗确认
- 排序模式下编辑、删除等操作入口隐藏
3.3 拖拽 + 置顶排序交互
作为作品集所有者，我希望既能拖拽精细调整顺序，也能一键置顶，不用在网格里费力拖很长距离。
拖拽中状态
拖拽进行中示意
🖼
固定
全部作品
127件
🔥
赛博朋克
🌿
⬆ 置顶
写实风格
18件
🔥
⬆ 置顶
赛博朋克
24件
✨
⬆ 置顶
梦幻场景
11件
蓝色虚线框为拖拽目标位，半透明卡片为正在被拖拽的卡片（opacity 0.5）。
置顶操作示意
点击「置顶」前
操作前
🖼
固定
全部作品
🎨
⬆ 置顶
二次元精选
① 当前第2位
🌿
⬆ 置顶
写实风格
← 即将置顶
🔥
⬆ 置顶
赛博朋克
点击「置顶」后
操作后
🖼
固定
全部作品
🌿
⬆ 置顶
写实风格
✓ 已移至第2位
🎨
⬆ 置顶
二次元精选
顺移至第3位
🔥
⬆ 置顶
赛博朋克
已在第2位的卡片置顶按钮置灰不可点；点击其他卡片置顶后，绿色边框高亮新位置，原第2位卡片顺移。
规则说明
- 拖拽触发区域：整个卡片
- 拖拽至"全部作品"之前的位置，卡片自动落到第二位
- 拖拽至视口边缘时页面自动滚动
- 点击「置顶」：目标卡片移至第二位，原第二位卡片顺移至第三位
- 已在第二位时置顶按钮置灰
- 拖拽和置顶的顺序变更，点击「完成排序」后生效
边界情况
| 场景 | 处理规则 |
|---|---|
| 拖拽至第一位（全部作品位置） | 卡片弹回至第二位 |
| 置顶目标卡片已在第二位 | 按钮置灰，不触发操作 |
| 拖拽和置顶混用 | 两种操作均作用于本地顺序，最终统一保存 |
3.4 排序持久化
作为作品集所有者，我希望排序设置保存后刷新页面或他人访问时仍然有效，而不是每次都要重新设置。
展示顺序
- 作品集列表按用户自定义顺序展示
- 若用户从未设置自定义排序，按创建时间倒序展示
- "全部作品"始终排在第一位
排序数据维护
- 新增作品集：追加到自定义排序末尾
- 删除作品集：从排序中移除，其余顺序不变
3.5 访客展示
作为访客，我希望访问他人主页时看到其设定的作品集顺序，以便按对方的意图浏览作品。
访客视角（无排序入口）
他人主页
关注 88 · 粉丝 1.1k
作品
作品集
喜欢
🖼
全部作品
127件
🌿
写实风格
18件
🎨
二次元精选
32件
🔥
赛博朋克
24件
✨
梦幻场景
11件
访客视角：按所有者自定义顺序展示，不显示「自定义排序」按钮。
规则说明
- 按所有者自定义顺序展示，"全部作品"始终第一位
- 若所有者未设置自定义排序，按创建时间倒序展示
- 不展示「自定义排序」按钮