fix(V0.2): 浮层 Portal 修复被遮挡 + 列表落点改为手指所在分组
Docker Build and Push / build-image (push) Successful in 1m1s

- 打卡/任务浮层 createPortal 挂 document.body: 页签滑动容器 transform
  破坏 position:fixed 包含块, 浮层被压进卡片流只能看到边缘
- 任务列表落点: 弃用 80px/列步进换算 (视觉位置与换算不一致, 落点随机),
  改为 elementFromPoint 命中 [data-column-id] 分组 —— 手指在哪个分组
  松手就落到哪, 与看板行为一致; 划出分组时保持上一目标
This commit is contained in:
jif2.zhang
2026-10-25 01:51:17 +08:00
parent 83cc218c5e
commit 9a8313173d
3 changed files with 31 additions and 20 deletions
+6 -3
View File
@@ -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>
{/* 跟手浮层: 半透明副本随手指移动, 原位保留虚线占位 */}
{drag.dragItem && (
{/* 跟手浮层: Portal 挂 body —— 页签滑动容器的 transform 会破坏
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,
)}
{/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */}
+8 -5
View File
@@ -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>
))}
{/* 跟手浮层: 任务名 + 目标列, 原位保留半透明占位 */}
{drag.drag && (
{/* 跟手浮层: Portal 挂 body, 任务名 + 手指所在分组 */}
{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>
)