From 32f404ac904d39ce686338c4e018c7240907d067 Mon Sep 17 00:00:00 2001 From: "jif2.zhang" Date: Tue, 27 Oct 2026 10:06:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=BB=E5=8A=A1):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8E=E7=9C=8B=E6=9D=BF=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E3=80=8C=E8=83=BD=E8=A7=A6=E5=8F=91=E4=BD=86=E6=94=BE=E4=B8=8D?= =?UTF-8?q?=E4=B8=8B=E3=80=8D=E2=80=94=E2=80=94=20uuid=20=E4=B8=BB?= =?UTF-8?q?=E9=94=AE=E8=A2=AB=20Number()=20=E6=88=90=20NaN?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 0.2.1 切本地库后 Task.id / BoardColumn.id 为 uuid 字符串, 拖拽落点却用 Number(dataset.xxxId) 取值得到 NaN: - 看板 hitColumn 返回 NaN -> NaN 为 falsy, onDrop 永不触发; 目标列也不高亮 - 列表 colId/taskId 为 NaN -> 组内命中与换列 findIndex 恒失败, 松手无操作 (打卡侧仍走 REST 数字 id, 故未受影响) - 新增 src/pages/task/ids.js: idStr / sameId / datasetId, 统一按字符串比对 - useColumnDrag / useRowDrag: 落点、组内命中、换列、提交判定改用 sameId - ProjectView: moveToColumn / reorderTask / changeStatus 改用 sameId, 落点为空直接忽略, 不把坏 id 写进本地库 - api/task.js: update 拦截 "NaN"/"undefined" 列 id, 报「看板列无效」 验证: headless Edge + CDP 派发真实指针事件驱动两个 hook (uuid 数据), 修复前 4 条落点断言全挂, 修复后全部通过。 --- src/api/task.js | 9 ++++++++- src/components/task/useColumnDrag.js | 6 ++++-- src/components/task/useRowDrag.js | 17 +++++++++-------- src/pages/task/ProjectView.jsx | 19 +++++++++++-------- src/pages/task/ids.js | 26 ++++++++++++++++++++++++++ 5 files changed, 58 insertions(+), 19 deletions(-) create mode 100644 src/pages/task/ids.js diff --git a/src/api/task.js b/src/api/task.js index b8e44ba..30061e8 100644 --- a/src/api/task.js +++ b/src/api/task.js @@ -536,10 +536,17 @@ export const taskApi = { } // 列 / 状态联动裁决 (与 server/task-domain/resolveStatus.js 同口径) + // 本地库主键是 uuid 字符串: 若调用方把 id 过了一道 Number() 会变成 NaN / "NaN", + // 这里直接拦下并给出可定位的错误, 而不是让后续比对静默失败 let status = task.status let columnId = String(task.columnId) const patch = {} - if (body?.columnId !== undefined) patch.columnId = String(body.columnId) + if (body?.columnId !== undefined) { + const cid = body.columnId === null ? '' : String(body.columnId) + if (!cid) throw new Error('看板列不能为空') + if (cid === 'NaN' || cid === 'undefined') throw new Error('看板列无效（编号已损坏）') + patch.columnId = cid + } if (body?.status !== undefined) { if (!['todo', 'doing', 'done'].includes(body.status)) throw new Error('任务状态取值非法') patch.status = body.status diff --git a/src/components/task/useColumnDrag.js b/src/components/task/useColumnDrag.js index 58d477f..6c177dd 100644 --- a/src/components/task/useColumnDrag.js +++ b/src/components/task/useColumnDrag.js @@ -1,4 +1,5 @@ import { useCallback, useEffect, useRef, useState } from 'react' +import { datasetId, sameId } from '../../pages/task/ids.js' // 看板卡片列拖动 (重点设计 §7.1) // 方案要点: @@ -60,10 +61,11 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' } /** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误开详情页 */ const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, []) + // 命中列 id: 本地库列 id 是 uuid 字符串, 不能 Number() (会变 NaN -> 落不下去) const hitColumn = (x, y) => { const el = document.elementFromPoint(x, y) const colEl = el?.closest?.('[data-column-id]') - return colEl ? Number(colEl.dataset.columnId) : null + return colEl ? datasetId(colEl.dataset.columnId) : null } // 边缘自动滚动 (±36px 触发, 每帧 10px) @@ -105,7 +107,7 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' } if (s.active) { lastEnd.current = Date.now() const col = hitColumn(ev.clientX, ev.clientY) - if (col && s.task && col !== s.task.columnId) onDropRef.current?.(s.task, col) + if (col && s.task && !sameId(col, s.task.columnId)) onDropRef.current?.(s.task, col) } cleanup() } diff --git a/src/components/task/useRowDrag.js b/src/components/task/useRowDrag.js index c47943c..96db8ba 100644 --- a/src/components/task/useRowDrag.js +++ b/src/components/task/useRowDrag.js @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { datasetId, sameId } from '../../pages/task/ids.js' // 列表视图任务行拖动: 组间换列 + 组内排序 // 触发: 行长按 400ms, 或按住行首 ⠿ 把手 (touch-action:none + touchstart @@ -78,15 +79,15 @@ export default function useRowDrag({ columns, onDrop, onReorder }) { moveGhost(ev.clientX, ev.clientY) // 组内落点: 命中本组 ([data-column-id]=当前列) 的某条顶层行 + // 本地库的列/任务 id 均为 uuid 字符串 -> 一律按字符串比对, 不要 Number() const hitEl = document.elementFromPoint(ev.clientX, ev.clientY) const rowEl = hitEl?.closest?.('[data-task-id]') const colEl = hitEl?.closest?.('[data-column-id]') - const colId = colEl ? Number(colEl.dataset.columnId) : null - const curCol = orderedRef.current[s.toIdx]?.id + const colId = colEl ? datasetId(colEl.dataset.columnId) : null - if (rowEl && colId === s.task.columnId) { - const id = Number(rowEl.dataset.taskId) - if (id !== s.task.id) { + if (rowEl && sameId(colId, s.task.columnId)) { + const id = datasetId(rowEl.dataset.taskId) + if (id && !sameId(id, s.task.id)) { const r = rowEl.getBoundingClientRect() const hit = { id, after: ev.clientY > r.top + r.height / 2 } if (!s.over || s.over.id !== hit.id || s.over.after !== hit.after) { @@ -100,7 +101,7 @@ export default function useRowDrag({ columns, onDrop, onReorder }) { // 换列: 手指划到哪个分组就是目标列, 划出所有分组时保持上一目标 if (colId != null) { - const to = orderedRef.current.findIndex((c) => c.id === colId) + const to = orderedRef.current.findIndex((c) => sameId(c.id, colId)) if (to >= 0 && to !== s.toIdx) { s.toIdx = to setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to }) @@ -116,7 +117,7 @@ export default function useRowDrag({ columns, onDrop, onReorder }) { onReorderRef.current?.(s.task, s.over.id, s.over.after) } else { const target = orderedRef.current[s.toIdx] - if (target && target.id !== s.task.columnId) onDropRef.current?.(s.task, target.id) + if (target && !sameId(target.id, s.task.columnId)) onDropRef.current?.(s.task, target.id) } } cleanup() @@ -152,7 +153,7 @@ export default function useRowDrag({ columns, onDrop, onReorder }) { } const startDrag = (ev, task, instant) => { - const fromIdx = orderedRef.current.findIndex((c) => c.id === task.columnId) + const fromIdx = orderedRef.current.findIndex((c) => sameId(c.id, task.columnId)) if (fromIdx < 0) return // 不在任何列 (如「其他」组) 的任务不支持拖动 st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, diff --git a/src/pages/task/ProjectView.jsx b/src/pages/task/ProjectView.jsx index c9c995d..c2ae325 100644 --- a/src/pages/task/ProjectView.jsx +++ b/src/pages/task/ProjectView.jsx @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react' import { ActionSheet, Dialog, DotLoading, Toast } from 'antd-mobile' import { projectApi, taskApi } from '../../api/task.js' import { filterVisible, msToNextBoundary } from './date.js' +import { sameId } from './ids.js' import { getViewMode, setViewMode } from './prefs.js' import { parseTimePrefix, splitTitle } from './quickAdd.js' import ListView from './ListView.jsx' @@ -100,10 +101,12 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit /** 拖拽换列 (T-BD-04/07) */ const moveToColumn = async (task, columnId) => { - const col = columns.find((c) => c.id === columnId) + // columnId 来自拖动落点 (uuid 字符串); 空值直接忽略, 不要把坏 id 写进本地库 + if (columnId === null || columnId === undefined || columnId === '') return + const col = columns.find((c) => sameId(c.id, columnId)) try { await updateTask(task.id, { columnId }) - const target = columns.find((c) => c.id === columnId) + const target = columns.find((c) => sameId(c.id, columnId)) if (target?.boundStatus && target.boundStatus !== task.status) { Toast.show({ content: `已移入 ${col?.name}，状态改为「${target.boundStatus === 'done' ? '完成' : target.boundStatus === 'doing' ? '执行中' : '未开始'}」` }) } else { @@ -116,11 +119,11 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit const reorderTask = async (task, targetId, after) => { const snapshot = tasks const orderedCols = [...(columns || [])].sort((a, b) => a.sortOrder - b.sortOrder) - const groups = orderedCols.map((c) => (tasks || []).filter((t) => t.columnId === c.id)).filter((l) => l.length) - const g = groups.find((l) => l.some((t) => t.id === task.id)) + const groups = orderedCols.map((c) => (tasks || []).filter((t) => sameId(t.columnId, c.id))).filter((l) => l.length) + const g = groups.find((l) => l.some((t) => sameId(t.id, task.id))) if (!g) return - const rest = g.filter((t) => t.id !== task.id) - const ti = rest.findIndex((t) => t.id === targetId) + const rest = g.filter((t) => !sameId(t.id, task.id)) + const ti = rest.findIndex((t) => sameId(t.id, targetId)) if (ti < 0) return rest.splice(after ? ti + 1 : ti, 0, task) const flat = groups.map((l) => (l === g ? rest : l)).flat() @@ -143,9 +146,9 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit const changeStatus = async (task, status) => { try { const fresh = await updateTask(task.id, { status }) - const moved = fresh && fresh.columnId !== task.columnId + const moved = fresh && !sameId(fresh.columnId, task.columnId) if (moved) { - const col = columns.find((c) => c.id === fresh.columnId) + const col = columns.find((c) => sameId(c.id, fresh.columnId)) Toast.show({ content: `已移至 ${col?.name || '目标列'}` }) } } catch { /* ignore */ } diff --git a/src/pages/task/ids.js b/src/pages/task/ids.js new file mode 100644 index 0000000..f83dd6a --- /dev/null +++ b/src/pages/task/ids.js @@ -0,0 +1,26 @@ +// 任务模块: 主键比对工具 +// +// 为什么要单独一个模块: +// 0.2.1 把任务模块切到 PowerSync 本地库后, 主键不再是数据库自增整数, +// 而是 **uuid 字符串** (`Task.id` / `BoardColumn.id` / `Project.id` 均为 uuid)。 +// 旧代码里大量 `Number(el.dataset.xxxId)` / `Number(key)` 的写法会得到 NaN, +// 而 NaN 与任何值都不相等 (且为 falsy), 表现为「拖拽能激活但松手落不下去」 +// 「换列提示看板列不存在」这类静默失败。 +// 凡是从 DOM dataset / ActionSheet key / 本地存储读回来的 id, 一律走这里比对。 + +/** 统一成字符串再比较; 空值 (null/undefined/'') 返回 '' */ +export function idStr(v) { + return v === null || v === undefined ? '' : String(v) +} + +/** 两个 id 是否相同 (uuid 字符串 / 数字都适用) */ +export function sameId(a, b) { + const x = idStr(a) + return x !== '' && x === idStr(b) +} + +/** DOM dataset 里的 id: 空/缺失返回 null, 便于 `if (id)` 判空 */ +export function datasetId(v) { + const s = idStr(v) + return s === '' || s === 'undefined' || s === 'null' ? null : s +}