fix(V0.2): 浮层 Portal 修复被遮挡 + 列表落点改为手指所在分组
Docker Build and Push / build-image (push) Successful in 1m1s
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:
@@ -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,
|
||||
)}
|
||||
|
||||
{/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user