feat(V0.2): 列表拖动修复 + 打卡项组内拖动排序

- 任务列表/看板拖动: 激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管, 修复列表长按抬起后 pointercancel 导致无法真正拖动
- 打卡: 列表按周期分组展示(每天/每周/每月/每年), 长按拖动组内排序(上下落点指示), 新增 POST /checkin/habits/reorder 重写 sortOrder; 新建项排到末尾
- 打卡卡片加 touch-action/user-select 防长按误触; 拖动结束 350ms 内抑制点击余波

server/routes/checkin.js

@@ -76,6 +76,7 @@ function buildItem(habit, byDate, date, today) {
     id: habit.id,
     name: habit.name,
     period: habit.period,
+    sortOrder: habit.sortOrder,
     periodLabel: PERIOD_LABEL[habit.period] || '每天',
     target,
     color: habit.color,
@@ -141,8 +142,9 @@ router.post('/habits', async (req, res, next) => {
     if (!PERIODS.includes(period)) return res.status(400).json({ error: '周期类型不合法' })
     const t = Math.floor(Number(target))
     if (!Number.isFinite(t) || t < 1) return res.status(400).json({ error: '目标次数需为 ≥1 的整数' })
+    const last = await prisma.habit.findFirst({ where: { userId }, orderBy: { sortOrder: 'desc' }, select: { sortOrder: true } })
     const row = await prisma.habit.create({
-      data: { userId, name: cleanName, period, target: t, color: String(color), icon: String(icon), note: String(note || '') },
+      data: { userId, name: cleanName, period, target: t, color: String(color), icon: String(icon), note: String(note || ''), sortOrder: (last?.sortOrder ?? -1) + 1 },
     })
     res.json({ item: row })
   } catch (e) { next(e) }
@@ -182,6 +184,21 @@ router.put('/habits/:id', async (req, res, next) => {
   } catch (e) { next(e) }
 })
 
+// POST /api/checkin/habits/reorder  { ids: [习惯id 的新顺序] }  按数组下标重写 sortOrder
+router.post('/habits/reorder', async (req, res, next) => {
+  try {
+    const userId = req.user.sub
+    const ids = Array.isArray((req.body || {}).ids) ? req.body.ids.map(Number).filter(Number.isFinite) : []
+    if (!ids.length) return res.status(400).json({ error: 'ids 不能为空' })
+    const habits = await prisma.habit.findMany({ where: { userId, id: { in: ids } } })
+    if (habits.length !== new Set(ids).size) return res.status(400).json({ error: '包含无效的打卡项' })
+    await prisma.$transaction(
+      ids.map((id, i) => prisma.habit.update({ where: { id }, data: { sortOrder: i } })),
+    )
+    res.json({ ok: true })
+  } catch (e) { next(e) }
+})
+
 // DELETE /api/checkin/habits/:id?hard=1  默认归档(保留历史), hard=1 物理删除
 router.delete('/habits/:id', async (req, res, next) => {
   try {

src/api/checkin.js

@@ -16,6 +16,7 @@ export const checkinApi = {
   calendar: (month) => api('/checkin/calendar' + q({ month })),
   createHabit: (body) => api('/checkin/habits', { method: 'POST', body }),
   updateHabit: (id, body) => api(`/checkin/habits/${id}`, { method: 'PUT', body }),
+  reorderHabits: (ids) => api('/checkin/habits/reorder', { method: 'POST', body: { ids } }),
   deleteHabit: (id, hard) => api(`/checkin/habits/${id}${hard ? '?hard=1' : ''}`, { method: 'DELETE' }),
   check: (id, date, note) => api(`/checkin/habits/${id}/check`, { method: 'POST', body: { date, note } }),
   uncheck: (id, date) => api(`/checkin/habits/${id}/check` + q({ date }), { method: 'DELETE' }),

src/components/checkin/useHabitDrag.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// 打卡项组内拖动排序
+//   手势与任务列表/看板一致: 长按 400ms 原位抬起(震动), 之后拖动;
+//   elementFromPoint 命中同一周期组内的 [data-habit-row] 作为落点,
+//   按指针在目标卡上半/下半决定插到其前/后, 松手提交。
+//   只允许组内 (每天/每周/每月/每年) 排序, 命中其他组视为无效落点。
+//   激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管,
+//   保证纵向拖动期间指针事件持续派发 (同 useRowDrag 的教训)。
+export default function useHabitDrag({ onDrop }) {
+  const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
+  const [over, setOver] = useState(null)               // { id, after } 落点
+  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, item: null, over: null })
+  const lastEnd = useRef(0)
+
+  const cleanup = useCallback(() => {
+    if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
+    st.current.active = false
+    st.current.over = null
+    setDragItem(null)
+    setOver(null)
+  }, [])
+
+  useEffect(() => () => cleanup(), [cleanup])
+
+  /** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误触打卡 */
+  const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, [])
+
+  const hitRow = (x, y) => {
+    const el = document.elementFromPoint(x, y)
+    const rowEl = el?.closest?.('[data-habit-row]')
+    if (!rowEl) return null
+    const r = rowEl.getBoundingClientRect()
+    return { id: Number(rowEl.dataset.habitId), after: y > r.top + r.height / 2 }
+  }
+
+  const onMove = (ev) => {
+    const s = st.current
+    if (!s.active) {
+      if (s.timer && (Math.abs(ev.clientX - s.startX) > 10 || Math.abs(ev.clientY - s.startY) > 10)) {
+        clearTimeout(s.timer); s.timer = null
+      }
+      return
+    }
+    ev.preventDefault()
+    const hit = hitRow(ev.clientX, ev.clientY)
+    // 只认同一周期组的落点
+    if (hit && hit.id !== s.item.id) { s.over = hit; setOver(hit) }
+    else { s.over = null; setOver(null) }
+  }
+
+  const onUp = () => {
+    const s = st.current
+    if (s.active && s.item) {
+      lastEnd.current = Date.now()
+      if (s.over && s.over.id !== s.item.id) onDrop?.(s.item, s.over.id, s.over.after)
+    }
+    cleanup()
+  }
+
+  /** 绑定到卡片: 卡片元素需设置 touch-action: pan-y */
+  const bind = useCallback((item) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false }
+      st.current.timer = setTimeout(() => {
+        st.current.active = true
+        setDragItem(item)
+        if (navigator.vibrate) navigator.vibrate(15)
+      }, 400)
+      try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
+      const el = ev.currentTarget
+      const move = (e2) => onMove(e2)
+      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
+      const up = () => { onUp(); detach() }
+      const cancel = () => {
+        if (st.current.active) lastEnd.current = Date.now()
+        cleanup()
+        detach()
+      }
+      const detach = () => {
+        el.removeEventListener('pointermove', move)
+        el.removeEventListener('pointerup', up)
+        el.removeEventListener('pointercancel', cancel)
+        el.removeEventListener('touchmove', tm)
+      }
+      el.addEventListener('pointermove', move)
+      el.addEventListener('pointerup', up)
+      el.addEventListener('pointercancel', cancel)
+      el.addEventListener('touchmove', tm, { passive: false })
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [])
+
+  return { dragItem, over, bind, cancel: cleanup, justEnded }
+}

src/components/task/useColumnDrag.js

@@ -99,6 +99,8 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
       try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
       const el = ev.currentTarget
       const move = (e2) => onPointerMove(e2)
+      // 激活后拦截触摸滚动: 防纵向分量触发浏览器接管 (pointercancel), 同 useRowDrag
+      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
       const up = (e2) => { onPointerUp(e2); detach() }
       const cancel = () => {
         if (st.current.active) lastEnd.current = Date.now()
@@ -109,10 +111,12 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
         el.removeEventListener('pointermove', move)
         el.removeEventListener('pointerup', up)
         el.removeEventListener('pointercancel', cancel)
+        el.removeEventListener('touchmove', tm)
       }
       el.addEventListener('pointermove', move)
       el.addEventListener('pointerup', up)
       el.addEventListener('pointercancel', cancel)
+      el.addEventListener('touchmove', tm, { passive: false })
     },
     // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
     onContextMenu: (ev) => ev.preventDefault(),

src/components/task/useRowDrag.js

@@ -74,6 +74,10 @@ export default function useRowDrag({ columns, onDrop }) {
       try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
       const el = ev.currentTarget
       const move = (e2) => onMove(e2)
+      // 激活后拦截触摸滚动: pan-y 下纵向分量稍大浏览器即接管手势并派发
+      // pointercancel (列表是整页长滚动容器, 必现), 非 passive touchmove
+      // preventDefault 才能真正拦住, 拖动期间指针事件得以持续派发
+      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
       const up = () => { onUp(); detach() }
       const cancel = () => {
         if (st.current.active) lastEnd.current = Date.now()
@@ -84,10 +88,12 @@ export default function useRowDrag({ columns, onDrop }) {
         el.removeEventListener('pointermove', move)
         el.removeEventListener('pointerup', up)
         el.removeEventListener('pointercancel', cancel)
+        el.removeEventListener('touchmove', tm)
       }
       el.addEventListener('pointermove', move)
       el.addEventListener('pointerup', up)
       el.addEventListener('pointercancel', cancel)
+      el.addEventListener('touchmove', tm, { passive: false })
     },
     // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
     onContextMenu: (ev) => ev.preventDefault(),

src/pages/checkin/HabitView.jsx

@@ -3,6 +3,7 @@ import {
   Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast,
 } from 'antd-mobile'
 import RingProgress, { Celebrate } from '../../components/RingProgress.jsx'
+import useHabitDrag from '../../components/checkin/useHabitDrag.js'
 import { checkinApi } from '../../api/checkin.js'
 import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
 import { toDateStr, dayLabel } from './date.js'
@@ -38,10 +39,45 @@ export default function HabitView({ date, onDateChange }) {
 
   const items = useMemo(() => {
     const list = data?.items || []
-    // 未完成在前, 已完成在后 (F-CK-16 默认排序)
+    // 手动排序优先 (sortOrder), 拖动排序后覆盖 F-CK-16 的"未完成在前"
-    return [...list].sort((a, b) => Number(a.completed) - Number(b.completed) || a.id - b.id)
+    return [...list].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || a.id - b.id)
   }, [data])
 
+  // 按周期分组 (每天/每周/每月/每年), 组内顺序 = 手动排序
+  const groups = useMemo(() => {
+    const out = []
+    for (const p of PERIOD_OPTIONS) {
+      const list = items.filter((i) => i.period === p.value)
+      if (list.length) out.push({ key: p.value, label: p.label, list })
+    }
+    const known = new Set(PERIOD_OPTIONS.map((p) => p.value))
+    const rest = items.filter((i) => !known.has(i.period))
+    if (rest.length) out.push({ key: 'other', label: '其他', list: rest })
+    return out
+  }, [items])
+
+  const drag = useHabitDrag({ onDrop: reorderHabit })
+
+  // 组内拖动落位: 重排后按展平顺序整体重写 sortOrder
+  async function reorderHabit(dragged, targetId, after) {
+    const snapshot = data
+    const g = groups.find((x) => x.key === dragged.period)
+    if (!g) return
+    const rest = g.list.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.list)).flat()
+    const withOrder = flat.map((it, i) => ({ ...it, sortOrder: i }))
+    setData((d) => ({ ...d, items: withOrder }))
+    try {
+      await checkinApi.reorderHabits(flat.map((i) => i.id))
+    } catch (e) {
+      setData(snapshot)
+      Toast.show({ content: e.message || '排序保存失败' })
+    }
+  }
+
   const fireBurst = (id) => setBursts((m) => ({ ...m, [id]: (m[id] || 0) + 1 }))
 
   // 乐观更新: 先本地 +1, 成功用服务端结果覆盖, 失败回滚 (F-SY-06/E-02)
@@ -169,8 +205,25 @@ export default function HabitView({ date, onDateChange }) {
       )}
 
       <div className="habit-list">
-        {items.map((item) => (
+        {groups.map((g) => (
-          <div key={item.id} className={'habit-card' + (item.completed ? ' done' : '')}>
+          <div key={g.key}>
+            <div className="habit-group-title">
+              {g.label}
+              <span className="cnt">{g.list.length}</span>
+            </div>
+            {g.list.map((item) => (
+              <div
+                key={item.id}
+                data-habit-row
+                data-habit-id={item.id}
+                className={
+                  'habit-card'
+                  + (item.completed ? ' done' : '')
+                  + (drag.dragItem?.id === item.id ? ' dragging' : '')
+                  + (drag.over?.id === item.id ? ` dragover ${drag.over.after ? 'after' : 'before'}` : '')
+                }
+                {...drag.bind(item)}
+              >
                 <RingProgress
                   percent={item.percent}
                   done={item.done}
@@ -178,7 +231,7 @@ export default function HabitView({ date, onDateChange }) {
                   over={item.over}
                   completed={item.completed}
                   color={item.color}
-              onClick={() => doCheck(item)}
+                  onClick={() => { if (!drag.justEnded()) doCheck(item) }}
                 />
                 <div className="habit-main">
                   <div className="habit-name">{item.name}</div>
@@ -198,28 +251,31 @@ export default function HabitView({ date, onDateChange }) {
                   <Button
                     size="mini"
                     color={item.completed ? 'default' : 'primary'}
-                onClick={() => doCheck(item)}
+                    onClick={() => { if (!drag.justEnded()) doCheck(item) }}
                   >
                     {item.completed ? '再打一次' : '打卡'}
                   </Button>
                 </div>
                 <div className="habit-foot">
                   {item.done > 0 && (
-                <span className="habit-link" onClick={() => doUncheck(item)}>撤销</span>
+                    <span className="habit-link" onClick={() => { if (!drag.justEnded()) doUncheck(item) }}>撤销</span>
                   )}
                   <span
                     className="habit-link"
                     onClick={() => {
+                      if (drag.justEnded()) return
                       setForm({ id: item.id, name: item.name, period: item.period, target: item.target, color: item.color, note: item.note })
                       setShowForm(true)
                     }}
                   >编辑</span>
-              <span className="habit-link danger" onClick={() => removeHabit(item)}>归档</span>
+                  <span className="habit-link danger" onClick={() => { if (!drag.justEnded()) removeHabit(item) }}>归档</span>
                 </div>
                 <Celebrate fire={bursts[item.id] || 0} color={item.color} />
               </div>
             ))}
           </div>
+        ))}
+      </div>
 
       {/* 新建 / 编辑 */}
       <Popup

src/styles/globals.css

@@ -663,6 +663,21 @@ body.me-safe-top .app-safe-top { height: 0; }
 .habit-link { font-size: 12px; color: var(--color-primary); cursor: pointer; }
 .habit-link.danger { color: var(--color-danger); }
 
+/* 打卡项分组 + 长按拖动排序 (组内) */
+.habit-view { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+.habit-view input, .habit-view textarea { -webkit-user-select: text; user-select: text; }
+.habit-group-title {
+  display: flex; align-items: center; gap: 7px; padding: 10px 2px 4px;
+  font-size: 12px; color: var(--color-muted); font-weight: 600;
+}
+.habit-group-title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--color-primary); }
+.habit-group-title .cnt { color: #b8bcc4; font-weight: 400; }
+.habit-card { touch-action: pan-y; }
+.habit-card.dragging { opacity: 0.55; outline: 2px dashed var(--color-primary); outline-offset: 1px; }
+.habit-card.dragover { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+.habit-card.dragover.after { border-bottom: 3px solid var(--color-primary); }
+.habit-card.dragover.before { border-top: 3px solid var(--color-primary); }
+
 /* ----- 日历视图 ----- */
 .calendar-view { padding: 0 12px 20px; }
 .cal-month-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }