fix(V0.2): 三轮反馈 5 项 —— 回滚键盘方案 / 列表卡片拖动 / 看板防误触 / 横滑整屏 / 详情页恢复
Docker Build and Push / build-image (push) Successful in 4m9s
Docker Build and Push / build-image (push) Successful in 4m9s
1. 回滚键盘遮挡统一方案 (真机测试不通过, 需求搁置): 恢复 TaskDetail/ UserPicker/CopyTaskPopup/ProjectManage 与 useKeyboardInset 到 9fea1a5^, 删除 useKeyboardInsetWatcher / .kb-safe / interactive-widget=resizes-content 2. 任务详情页样式随 1 一并恢复提交前状态 (含底部拷贝/删除按钮) 3. 列表视图换列改为卡片拖动: 新 useRowDrag (长按 400ms 行抬起, 左右 80px/列步进, 行尾徽标显示目标列, 松手落列), 移除长按 ActionSheet —— 旧长按与复选框/行点击互相误触, 抬手合成 click 落在控件上触发状态切换 4. 看板拖动防误触: 任务区禁长按文字选择与系统菜单 (输入框除外); pointercancel 只放弃不提交; 拖动结束 350ms 内抑制 click 误开详情; 状态点/⋯/子任务行 pointerdown 不冒泡, 不发起拖动 5. 看板横滑扩展到整屏: .page-transition 补 height:100% 打通 app-main → page-with-navbar 百分比链, board-wrap 撑满剩余高度 已验证: kb-safe/Watcher/onLongPress 残留引用清零, 逐文件 diff 审阅通过; 本机无 Node 运行时, 未跑 vite build
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
// 列表视图卡片拖动换列 (2026-10-24, 替代「长按 → ActionSheet」:
|
||||
// 旧方案长按与复选框/行点击互相误触, 且菜单弹出时手指还按在屏上, 体验割裂)
|
||||
// 手势与看板一致: 长按 400ms 行原位抬起(震动), 之后左右拖动;
|
||||
// 水平位移按 80px/列 步进切换目标列 (顺序同列表分组), 行尾实时显示
|
||||
// 目标列名徽标, 松手落到目标列 (≠当前列才提交)。
|
||||
// touch-action: pan-y —— 横向位移归拖动, 纵向仍归列表滚动;
|
||||
// 激活后浏览器若接管纵向滚动 (pointercancel) 只放弃不提交。
|
||||
// 注: 列表只展示有任务的列, 空列拖不进去 (用看板视图可拖空列)。
|
||||
const STEP = 80
|
||||
|
||||
export default function useRowDrag({ columns, onDrop }) {
|
||||
// { task, fromIdx, toIdx }: 拖动中的行 + 当前目标列下标 (徽标渲染)
|
||||
const [drag, setDrag] = useState(null)
|
||||
const st = useRef({ timer: null, active: false, startX: 0, startY: 0, task: null, fromIdx: 0, toIdx: 0 })
|
||||
const lastEnd = useRef(0) // 拖动结束时刻
|
||||
|
||||
// 目标列顺序 = 列表分组顺序 (sortOrder)
|
||||
const ordered = useMemo(
|
||||
() => [...(columns || [])].sort((a, b) => a.sortOrder - b.sortOrder),
|
||||
[columns],
|
||||
)
|
||||
|
||||
const cleanup = useCallback(() => {
|
||||
if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
|
||||
st.current.active = false
|
||||
setDrag(null)
|
||||
}, [])
|
||||
|
||||
useEffect(() => () => cleanup(), [cleanup])
|
||||
|
||||
/** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误开详情页 */
|
||||
const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, [])
|
||||
|
||||
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 to = Math.max(0, Math.min(ordered.length - 1, s.fromIdx + Math.round((ev.clientX - s.startX) / STEP)))
|
||||
if (to !== s.toIdx) {
|
||||
s.toIdx = to
|
||||
setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
|
||||
}
|
||||
}
|
||||
|
||||
const onUp = () => {
|
||||
const s = st.current
|
||||
if (s.active && s.task) {
|
||||
lastEnd.current = Date.now()
|
||||
const target = ordered[s.toIdx]
|
||||
if (target && target.id !== s.task.columnId) onDrop?.(s.task, target.id)
|
||||
}
|
||||
cleanup()
|
||||
}
|
||||
|
||||
/** 绑定到列表行: 行元素需设置 touch-action: pan-y */
|
||||
const bind = 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 // 不在任何列 (如「其他」组) 的任务不支持拖动
|
||||
st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
|
||||
st.current.timer = setTimeout(() => {
|
||||
st.current.active = true
|
||||
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)
|
||||
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.addEventListener('pointermove', move)
|
||||
el.addEventListener('pointerup', up)
|
||||
el.addEventListener('pointercancel', cancel)
|
||||
},
|
||||
// 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
|
||||
onContextMenu: (ev) => ev.preventDefault(),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}), [ordered, onDrop])
|
||||
|
||||
return { drag, bind, cancel: cleanup, justEnded }
|
||||
}
|
||||
Reference in New Issue
Block a user