refactor(V0.2): 拖动交互收紧 —— 仅把手触发 / 缩小把手 / 去多余元素 / 打卡跨组
Docker Build and Push / build-image (push) Successful in 1m3s
Docker Build and Push / build-image (push) Successful in 1m3s
- 打卡与列表: 去掉卡片整体长按拖动路径, 只有 ⠿ 把手可拖; 把手缩小 - 列表行去掉跟动的蓝色目标列徽标 (drag-pill), 占位/克隆浮层承担全部反馈 - 打卡支持跨组拖动: 落到其他周期组的目标卡 = 改周期 + 落位一次完成 (updateHabit period + reorder), 组内排序不变 - 看板: 去掉 ⠿ 把手, 恢复长按拖动
This commit is contained in:
@@ -100,18 +100,28 @@ export default function MergedView({ date, onDateChange }) {
|
||||
|
||||
const drag = useHabitDrag({ onDrop: reorderHabit })
|
||||
|
||||
// 组内拖动落位: 重排后按渲染分组顺序整体展平重写 sortOrder
|
||||
async function reorderHabit(dragged, targetId, after) {
|
||||
// 拖动落位: 组内排序; 落到其他周期组 = 同时改周期并落位。
|
||||
// 重排后按渲染分组顺序整体展平重写 sortOrder。
|
||||
async function reorderHabit(dragged, targetId, after, targetPeriod) {
|
||||
const snapshot = detail
|
||||
const g = groups.find((x) => x.key === (GROUP_ORDER.includes(dragged.period) ? dragged.period : 'other'))
|
||||
const g = groups.find((x) => x.items.some((i) => i.id === targetId))
|
||||
if (!g) return
|
||||
const target = g.items.find((i) => i.id === targetId)
|
||||
const rest = g.items.filter((i) => i.id !== dragged.id)
|
||||
const ti = rest.findIndex((i) => i.id === targetId)
|
||||
if (ti < 0) return
|
||||
rest.splice(after ? ti + 1 : ti, 0, dragged)
|
||||
const flat = groups.map((x) => (x.key === g.key ? rest : x.items)).flat()
|
||||
const crossed = targetPeriod && targetPeriod !== dragged.period
|
||||
const moved = crossed
|
||||
? { ...dragged, period: targetPeriod, periodLabel: GROUP_LABEL[targetPeriod] || target.periodLabel }
|
||||
: dragged
|
||||
rest.splice(after ? ti + 1 : ti, 0, moved)
|
||||
// 展平时把拖动项从原组剔除 (跨组场景原组可能仍包含它)
|
||||
const flat = groups
|
||||
.map((x) => (x.key === g.key ? rest : x.items.filter((i) => i.id !== dragged.id)))
|
||||
.flat()
|
||||
setDetail((d) => ({ ...d, items: flat.map((it, i) => ({ ...it, sortOrder: i })) }))
|
||||
try {
|
||||
if (crossed) await checkinApi.updateHabit(dragged.id, { period: targetPeriod })
|
||||
await checkinApi.reorderHabits(flat.map((i) => i.id))
|
||||
} catch (e) {
|
||||
setDetail(snapshot)
|
||||
@@ -324,7 +334,6 @@ export default function MergedView({ date, onDateChange }) {
|
||||
+ (drag.dragItem?.id === item.id ? ' dragging' : '')
|
||||
+ (drag.over?.id === item.id ? ` dragover ${drag.over.after ? 'after' : 'before'}` : '')
|
||||
}
|
||||
{...drag.bind(item)}
|
||||
>
|
||||
<span className="grip" title="拖动排序" {...drag.bindHandle(item)}>⠿</span>
|
||||
<RingProgress
|
||||
|
||||
@@ -40,7 +40,6 @@ export default function BoardView({
|
||||
task={t}
|
||||
dragging={drag.dragTask?.id === t.id}
|
||||
bindDrag={drag.bind}
|
||||
bindDragHandle={drag.bindHandle}
|
||||
onClick={() => { if (!drag.dragTask && !drag.justEnded()) onOpen?.(t) }}
|
||||
onToggleSub={onToggleSub}
|
||||
onToggle={onToggle}
|
||||
|
||||
@@ -52,9 +52,8 @@ export default function ListView({
|
||||
onToggle={onToggle}
|
||||
onClick={() => { if (!drag.justEnded()) onOpen(t) }}
|
||||
onMore={onMore}
|
||||
bindDrag={drag.bind}
|
||||
bindDragHandle={drag.bindHandle}
|
||||
dragTarget={dragging ? orderedCols[dragging.toIdx] : null}
|
||||
dragging={!!dragging}
|
||||
dragOver={drag.over?.id === t.id ? drag.over : null}
|
||||
/>
|
||||
{kids.length > 0 && (
|
||||
|
||||
Reference in New Issue
Block a user