feat(任务): 即时同步 —— 订阅本地库变更, 跨端改动无需切页自动刷新
Docker Build and Push / build-image (push) Failing after 1m48s

现象: 多端同时打开同一项目时, 一端改完, 另一端必须切到别的页面再切回来才更新。

根因: 不是同步没到, 而是 UI 从未订阅本地库变化 ——
PowerSync 的下行推送 (PG 逻辑复制 → sync service → 客户端本地 SQLite) 本身正常,
但任务模块的读全是命令式 db().getAll() (api/task.js), 读完不再看;
lib/powersync/react.jsx 虽然导出了 useQuery/useStatus, 全项目一次都没用过;
TaskPage/ProjectView 只在 useEffect 里 load() 一次, 连 useRefreshOnVisible 都没接
(只有打卡与宏观页面在用)。「切面板能刷新」纯粹是因为组件重新挂载又 load 了一次。

实现 (docs/V0.2/离线编辑模块/即时同步方案.md, 方案 C):
- 新增 lib/powersync/useDbSignal.js: 用 db.watch() 的表级过滤 (tables) + 节流
  (throttleMs) + AbortSignal, 订阅本地库变更; 跳过订阅时的首次通知, 避免与
  挂载时的 load() 重复。
  (初版设计是手写 count/sum/max(updatedAt) 的「信号 SQL」, 实施时发现 SDK 原生
   支持 tables 过滤, 更可靠, 已改为表过滤并在文档中记录变更。)
- api/task.js 新增 TASK_TABLES / PROJECT_TABLES 常量 (表名须与客户端 schema 一致)。
- ProjectView: 订阅任务域 (Task/BoardColumn/TaskMember/TaskTag) → 重算;
  TaskPage: 订阅项目域 (Project/ProjectMember) → 重算。
- 不打断操作: BoardView/ListView 上报 onDragActiveChange, 拖拽期间收到变更只记
  pending, 松手后补一次刷新, 避免卡片在手指下跳位。
- 回前台兜底: 两页都接 useRefreshOnVisible (WebView 后台可能节流订阅回调)。

验证 (真实 Windows 外壳 + CDP, 服务端直接改库模拟另一端):
- 服务端改任务标题后, 页面在**无任何操作**的情况下自动更新 (三次复测均成功);
- 改回原标题后同样自动还原; 测试数据已恢复。

已知瓶颈 (不在 UI 层, 另见文档 §7.0):
- 实测端到端延迟约 13~14s, 未达 ≤1s 目标;
- CDP Network 观察客户端: 无 WebSocket, 仅 /sync/stream 长连接;
- NPM (baishe nginx-app-1, proxy_host/5.conf) 未关闭 proxy_buffering,
  流式响应被 nginx 缓冲后按批下发, 与观测到的固定批次延迟吻合;
- 修复属运维配置 (proxy_buffering off 等), 需单独评估后执行。
This commit is contained in:
jif2.zhang
2026-10-27 20:57:05 +08:00
parent 86335dfaa4
commit fd4079c9c3
7 changed files with 418 additions and 6 deletions
+28 -2
View File
@@ -1,6 +1,8 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { ActionSheet, Dialog, DotLoading, Toast } from 'antd-mobile'
import { projectApi, taskApi } from '../../api/task.js'
import { projectApi, taskApi, TASK_TABLES } from '../../api/task.js'
import useDbSignal from '../../lib/powersync/useDbSignal.js'
import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
import { filterVisible, msToNextBoundary } from './date.js'
import { sameId } from './ids.js'
import { getViewMode, setViewMode } from './prefs.js'
@@ -40,6 +42,28 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit
useEffect(() => { setTasks(null); load() }, [load])
// ---- 即时同步 (docs/V0.2/离线编辑模块/即时同步方案.md) ----
// 任务域任一相关表在本地库变化 -> 重算。变化来源既包括本端写入, 也包括
// PowerSync 从其它端推下来的改动, 所以跨端状态无需切页面即可刷新。
const draggingRef = useRef(false)
const pendingRef = useRef(false) // 拖拽期间收到的变更, 松手后补一次
const onDragActiveChange = useCallback((active) => {
draggingRef.current = active
if (!active && pendingRef.current) {
pendingRef.current = false
load()
}
}, [load])
useDbSignal(TASK_TABLES, () => {
// 拖拽中不刷新: 否则卡片会在手指下跳位
if (draggingRef.current) { pendingRef.current = true; return }
load()
})
// 兜底: 应用回到前台/窗口聚焦时补一次 (WebView 在后台可能节流订阅回调)
useRefreshOnVisible(() => { if (!draggingRef.current) load() })
// 切换视图并记忆 (T-VW-02/03/06)
const switchMode = (next) => {
setMode(next)
@@ -291,6 +315,7 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit
onMore={openTaskMenu}
onMoveColumn={moveToColumn}
onReorder={reorderTask}
onDragActiveChange={onDragActiveChange}
/>
) : (
<BoardView
@@ -301,6 +326,7 @@ export default function ProjectView({ projectId, onProjectChanged, onProjectExit
onToggleSub={(c) => toggleDone(c)}
onToggle={(t) => toggleDone(t)}
onMore={openTaskMenu}
onDragActiveChange={onDragActiveChange}
onQuickAdd={() => { setAdding(true) }}
/>
)}