fix(V0.2): 拖动可靠性重做 —— 把手入口 + 打卡排序接入实际渲染视图

问题定位:
- 打卡页实际渲染的是 MergedView (CheckinPage 路由), 上次改的 HabitView
  是未使用的旧组件, 打包时被 tree-shake, 线上自然无任何效果
- 任务列表长按抬起后一动即脱手: touch-action:pan-y 下手指出现纵向分量,
  WebView/渲染器直接把触摸判给滚动并 pointercancel, touchmove preventDefault
  拦不住已决定的滚动 (看板可用只因该模式下页面无纵向可滚祖先)

修复:
- 新增 ⠿ 拖动把手 (touch-action:none): 浏览器按规范完全不接管该触摸,
  按下立即拖动, CDP 触摸仿真验证: 垂直拖动穿过可滚列表正常落点,
  跨组(每天/每周/每月)正确拒绝; 任务行把手拖动换列, 打卡卡片把手组内排序
- useRowDrag/useHabitDrag 抽出 armListeners, 新增 bindHandle 立即激活路径
- MergedView: 组内排序改按 sortOrder (服务端已返回), 拖动落位乐观更新 +
  POST /checkin/habits/reorder, 失败回滚; 打卡点击加拖动余波保护
- 长按路径保留为补充入口 (不可滚场景仍可用)

src/components/checkin/useHabitDrag.js

@@ -1,12 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-// 打卡项组内拖动排序
-//   手势与任务列表/看板一致: 长按 400ms 原位抬起(震动), 之后拖动;
-//   elementFromPoint 命中同一周期组内的 [data-habit-row] 作为落点,
-//   按指针在目标卡上半/下半决定插到其前/后, 松手提交。
-//   只允许组内 (每天/每周/每月/每年) 排序, 命中其他组视为无效落点。
-//   激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管,
-//   保证纵向拖动期间指针事件持续派发 (同 useRowDrag 的教训)。
+// 打卡项组内拖动排序 (MergedView 分组列表)
+//   两条触发路径, 状态机共用:
+//   1. 把手 (bindHandle, 推荐): 卡片右侧 ⠿ 把手 touch-action:none,
+//      指针按下立即激活 —— 浏览器按规范完全不接管该触摸, 指针流不会被
+//      滚动抢占取消, 在 Android WebView 上 100% 可靠;
+//   2. 长按 (bind): 长按 400ms 原位抬起(震动)后拖动。pan-y 下列表一旦
+//      可滚动, 手指纵向抖动即触发浏览器滚动接管 (pointercancel), 手势
+//      被取消 —— 该路径在整页可滚的场景不可靠, 仅作补充入口。
+//   拖动中 elementFromPoint 命中同组 [data-habit-row] 作为落点 (data-habit-period
+//   必须与拖动项一致, 即只在 每天/每周/每月 组内排序), 按指针在目标卡
+//   上半/下半决定插到其前/后, 松手提交。
+//   激活后用非 passive touchmove preventDefault 尽力拦截滚动接管。
 export default function useHabitDrag({ onDrop }) {
   const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
   const [over, setOver] = useState(null)               // { id, after } 落点
@@ -30,8 +35,12 @@ export default function useHabitDrag({ onDrop }) {
     const el = document.elementFromPoint(x, y)
     const rowEl = el?.closest?.('[data-habit-row]')
     if (!rowEl) return null
+    // 只认同一周期组的落点
+    if (rowEl.dataset.habitPeriod !== st.current.item?.period) return null
     const r = rowEl.getBoundingClientRect()
-    return { id: Number(rowEl.dataset.habitId), after: y > r.top + r.height / 2 }
+    const id = Number(rowEl.dataset.habitId)
+    if (id === st.current.item.id) return null
+    return { id, after: y > r.top + r.height / 2 }
   }
 
   const onMove = (ev) => {
@@ -44,9 +53,8 @@ export default function useHabitDrag({ onDrop }) {
     }
     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) }
+    if (hit) { s.over = hit; setOver(hit) }
+    else if (s.over) { s.over = null; setOver(null) }
   }
 
   const onUp = () => {
@@ -58,40 +66,64 @@ export default function useHabitDrag({ onDrop }) {
     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 }
+  // 指针监听装配: instant=true 时按下即激活 (把手路径), 否则长按 400ms 激活
+  const armListeners = (ev, instant, item) => {
+    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 })
+
+    if (instant) {
+      st.current.active = true
+      setDragItem(item)
+      if (navigator.vibrate) navigator.vibrate(15)
+    } else {
       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 })
+    }
+  }
+
+  /** 绑定到卡片: 卡片需 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, over: null }
+      armListeners(ev, false, item)
     },
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [])
 
-  return { dragItem, over, bind, cancel: cleanup, justEnded }
+  /** 绑定到拖动把手: 把手需 touch-action: none, 按下即拖 */
+  const bindHandle = useCallback((item) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      ev.stopPropagation() // 不触发卡片自身的长按路径
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null }
+      armListeners(ev, true, item)
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [])
+
+  return { dragItem, over, bind, bindHandle, cancel: cleanup, justEnded }
 }

src/components/task/TaskRow.jsx

@@ -8,7 +8,7 @@ const statusLabel = (s) => (s === 'done' ? '完成' : s === 'doing' ? '执行中
 //   复选框 / ⋯ 是独立控件: pointerdown 不冒泡, 不发起拖动,
 //   避免长按行后抬手时合成的 click 落在控件上误触状态切换
 export default function TaskRow({
-  task, onToggle, onClick, onMore, bindDrag, dragTarget, indent = false, children,
+  task, onToggle, onClick, onMore, bindDrag, bindDragHandle, dragTarget, indent = false, children,
 }) {
   const done = task.status === 'done'
   return (
@@ -58,6 +58,13 @@ export default function TaskRow({
                   → {dragTarget.name}
                 </span>
               )}
+              {bindDragHandle && (
+                <span
+                  className="grip"
+                  title="拖动换列"
+                  {...bindDragHandle(task)}
+                >⠿</span>
+              )}
               <span
                 className="more"
                 onClick={(e) => { e.stopPropagation(); onMore?.(task) }}

src/components/task/useRowDrag.js

@@ -59,7 +59,31 @@ export default function useRowDrag({ columns, onDrop }) {
     cleanup()
   }
 
-  /** 绑定到列表行: 行元素需设置 touch-action: pan-y */
+  // 指针监听装配 (capture + 非 passive touchmove: 激活后尽力拦截滚动接管)
+  const armListeners = (ev) => {
+    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 })
+  }
+
+  /** 绑定到列表行: 行元素需设置 touch-action: pan-y (长按路径, 可滚场景不可靠) */
   const bind = useCallback((task) => ({
     onPointerDown: (ev) => {
       if (ev.button !== undefined && ev.button !== 0) return
@@ -71,34 +95,31 @@ export default function useRowDrag({ columns, onDrop }) {
         if (navigator.vibrate) navigator.vibrate(15)
         setDrag({ task, fromIdx, toIdx: fromIdx })
       }, 400)
-      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()
-        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 })
+      armListeners(ev)
     },
     // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [ordered, onDrop])
 
-  return { drag, bind, cancel: cleanup, justEnded }
+  /** 绑定到行尾拖动把手: 把手需 touch-action: none, 按下立即拖动。
+   *  pan-y 下整页可滚时浏览器滚动接管会取消指针流 (Android WebView 必现),
+   *  把手路径浏览器完全不接管, 是可靠入口。 */
+  const bindHandle = useCallback((task) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      const fromIdx = ordered.findIndex((c) => c.id === task.columnId)
+      if (fromIdx < 0) return
+      ev.stopPropagation() // 不触发行自身的长按路径
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
+      st.current.active = true
+      if (navigator.vibrate) navigator.vibrate(15)
+      setDrag({ task, fromIdx, toIdx: fromIdx })
+      armListeners(ev)
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [ordered, onDrop])
+
+  return { drag, bind, bindHandle, cancel: cleanup, justEnded }
 }