fix(V0.2): 浮层 Portal 修复被遮挡 + 列表落点改为手指所在分组

- 打卡/任务浮层 createPortal 挂 document.body: 页签滑动容器 transform
  破坏 position:fixed 包含块, 浮层被压进卡片流只能看到边缘
- 任务列表落点: 弃用 80px/列步进换算 (视觉位置与换算不一致, 落点随机),
  改为 elementFromPoint 命中 [data-column-id] 分组 —— 手指在哪个分组
  松手就落到哪, 与看板行为一致; 划出分组时保持上一目标

src/components/task/useRowDrag.js

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-// 列表视图卡片拖动换列 (2026-10-24, 替代「长按 → ActionSheet」:
+// 列表视图卡片拖动换列
-// 旧方案长按与复选框/行点击互相误触, 且菜单弹出时手指还按在屏上, 体验割裂)
+//   触发: 行长按 400ms, 或按住行尾 ⠿ 把手 (touch-action:none, 立即激活,
-//   手势与看板一致: 长按 400ms 行原位抬起(震动), 之后左右拖动;
+//   把手不受浏览器滚动接管影响, 是可靠入口)
-//   水平位移按 80px/列 步进切换目标列 (顺序同列表分组), 行尾实时显示
+//   拖动: 跟手浮层 (消费方渲染), 手指划到哪个分组 ([data-column-id])
-//   目标列名徽标, 松手落到目标列 (≠当前列才提交)。
+//   即目标列, 松手落到目标列 (≠当前列才提交)
-//   touch-action: pan-y —— 横向位移归拖动, 纵向仍归列表滚动;
+//   touch-action: pan-y + 激活后非 passive touchmove preventDefault 尽力
-//   激活后浏览器若接管纵向滚动 (pointercancel) 只放弃不提交。
+//   拦截滚动接管; pointercancel 只放弃不提交
 //   注: 列表只展示有任务的列, 空列拖不进去 (用看板视图可拖空列)。
-const STEP = 80
 
 export default function useRowDrag({ columns, onDrop }) {
   // { task, fromIdx, toIdx }: 拖动中的行 + 当前目标列下标 (徽标渲染)
@@ -49,10 +48,16 @@ export default function useRowDrag({ columns, onDrop }) {
     }
     ev.preventDefault()
     moveGhost(ev.clientX, ev.clientY)
-    const to = Math.max(0, Math.min(ordered.length - 1, s.fromIdx + Math.round((ev.clientX - s.startX) / STEP)))
+    // 手指划到哪个分组([data-column-id])就是目标列 —— 与视觉一致, 松手即落。
-    if (to !== s.toIdx) {
+    // 划出所有分组 (如页头/空白) 时保持上一个目标不变。
-      s.toIdx = to
+    const colEl = document.elementFromPoint(ev.clientX, ev.clientY)?.closest?.('[data-column-id]')
-      setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
+    const colId = colEl ? Number(colEl.dataset.columnId) : null
+    if (colId != null) {
+      const to = ordered.findIndex((c) => c.id === colId)
+      if (to >= 0 && to !== s.toIdx) {
+        s.toIdx = to
+        setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
+      }
     }
   }
 

src/pages/checkin/MergedView.jsx

@@ -5,6 +5,7 @@
 //   - 撤销 / 编辑 / 归档 收进「⋯」底部面板
 //   - 未来日期只读, 按钮灰显「计划」
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
 import {
   Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast,
 } from 'antd-mobile'
@@ -363,12 +364,14 @@ export default function MergedView({ date, onDateChange }) {
         ))}
       </div>
 
-      {/* 跟手浮层: 半透明副本随手指移动, 原位保留虚线占位 */}
+      {/* 跟手浮层: Portal 挂 body —— 页签滑动容器的 transform 会破坏
-      {drag.dragItem && (
+          position:fixed 的包含块, 浮层直接渲染在卡片流里会被压在下面 */}
+      {drag.dragItem && createPortal(
         <div ref={drag.ghostRef} className="drag-ghost">
           <i style={{ background: drag.dragItem.color }} />
           {drag.dragItem.name}
-        </div>
+        </div>,
+        document.body,
       )}
 
       {/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */}

src/pages/task/ListView.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import TaskRow from '../../components/task/TaskRow.jsx'
 import useRowDrag from '../../components/task/useRowDrag.js'
 
 // 列表视图 (T-VW-01, T-ST-04/05)
 //   按看板列分组展示; 子任务缩进 + 折叠展开
-//   换列手势与看板一致: 长按 400ms 行抬起, 左右拖动选列, 松手落列
+//   换列: 行/把手拖动, 跟手浮层, 手指划到哪个分组松手就落到哪 (与看板一致)
 //   (列表只展示有任务的列, 空列需到看板视图拖入)
 export default function ListView({
   tasks, columns, onToggle, onOpen, onMore, onMoveColumn,
@@ -34,7 +35,8 @@ export default function ListView({
 
   return (
     <div className="list-body">
-      {groups.map((g) => (        <div key={g.key}>
+      {groups.map((g) => (
+        <div key={g.key} data-column-id={g.key === 'other' ? undefined : g.key}>
           <div className="group-title">
             {g.name}
             <span className="cnt">{g.list.length}</span>
@@ -74,14 +76,15 @@ export default function ListView({
         </div>
       ))}
 
-      {/* 跟手浮层: 任务名 + 目标列, 原位保留半透明占位 */}
+      {/* 跟手浮层: Portal 挂 body, 任务名 + 手指所在分组 */}
-      {drag.drag && (
+      {drag.drag && createPortal(
         <div ref={drag.ghostRef} className="drag-ghost">
           {drag.drag.task.title}
           {orderedCols[drag.drag.toIdx] && (
             <b>→ {orderedCols[drag.drag.toIdx].name}</b>
           )}
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   )