Ethan Young <EY />
返回文章
开发 前端 架构 复盘

一周开发复盘（技术版）：审批待办链路重构与稳定性治理

本周聚焦审批链路架构治理，包括待办数据模型归一化、审批详情与时间线组件重构、TabbedFrame 跳转策略优化，以及 OpenSeadragon 首屏问题排查

一周开发复盘（技术版）：审批待办链路重构与稳定性治理h1

时间：2026-03-16 ~ 2026-03-20
关键词：flowable、待办分流、审批详情、时间线组件、WebStorm MCP、OpenSeadragon

1. 问题背景h2

本周核心不是”修一个页面”，而是把审批相关能力从点状修补改成链路治理：

  1. 待办接口新增审批类型，现有渲染逻辑无法稳定识别。
  2. 审批列表、详情页、进度组件的字段契约不统一。
  3. Tab 切换和跳转链路在多入口下容易出现状态错乱或重复打开。
  4. 图像组件（OpenSeadragon）在首屏渲染存在延迟显示问题。
  5. 协作过程中文件引用和跨文件定位成本较高。

2. 架构目标h2

这周改造围绕三个目标推进：

  1. 数据契约统一：接口返回先归一化，再驱动 UI。
  2. 页面链路统一：待办 → 审批表 → 详情 → 进度，保持单向可追踪。
  3. 工具链统一：查文件、查引用优先走 WebStorm MCP，减少漏改风险。

3. 待办数据模型归一化h2

待办接口里审批类型典型特征：

  1. bizCode = DB-ZX-FLOWABLE-0001
  2. backlogUrl 指向 approval/flowable/detail?processInstanceId=...
  3. backlogContent 为 JSON 字符串（需容错解析）

3.1 归一化策略h3

type TodoType = 'WORK_ORDER' | 'APPROVAL' | 'UNKNOWN'


function safeParseContent(content?: string) {
  if (!content) return []
  try { return JSON.parse(content) } catch { return [] }
}


function detectTodoType(item: any): TodoType {
  if (item?.bizCode === 'DB-ZX-FLOWABLE-0001') return 'APPROVAL'
  if (String(item?.backlogUrl || '').includes('approval/flowable/detail')) return 'APPROVAL'
  return 'WORK_ORDER'
}


function normalizeTodoItem(item: any) {
  const type = detectTodoType(item)
  return {
    id: item.pkId || item.idBill,
    type,
    title: item.backlogTitle || '',
    actionText: item.backlogButton || '去处理',
    detailUrl: item.backlogUrl || '',
    detailPairs: safeParseContent(item.backlogContent),
    carNo: item.carNo || '',
    customerName: item.customerName || '',
    createTime: item.createTime || ''
  }
}

3.2 为什么先归一化h3

  1. 降低模板中 if/else 复杂度。
  2. 页面不会直接依赖后端字段细节。
  3. 新审批类型扩展时仅需改一处映射。

4. 审批列表与 businessStatus 传参h2

审批列表支持基于业务状态筛选。关键点不是”加参数”，而是保证默认态和切换态一致：

  1. 初始加载必须带默认 businessStatus（避免首屏与筛选后结果不一致）。
  2. Tab/筛选切换后，重置页码并重新请求。
  3. 保持参数来源单一，避免 URL、store、本地状态多头维护。
const statusMap = {
  all: '',
  pending: 'approvalStart',
  running: 'approvalRunning',
  passed: 'approvalPass',
  rejected: 'approvalReject'
}


function buildHistoryQuery(form: any, tabKey: keyof typeof statusMap) {
  return {
    processDefinitionKey: 'refundApprovalJiangSupecProcess',
    currentPage: form.pageNum || 1,
    pageSize: form.pageSize || 10,
    businessKey: form.businessKey || '',
    businessStatus: statusMap[tabKey] ?? '',
    startTimeStart: form.startTimeStart || '',
    startTimeEnd: form.startTimeEnd || '',
    endTimeStart: form.endTimeStart || '',
    endTimeEnd: form.endTimeEnd || ''
  }
}

5. 审批详情与时间线组件重构h2

这周把时间线组件输入收敛为三段式：

  1. triggerTask：发起节点（发起人、发起时间、发起原因）
  2. currentTasks：当前执行节点
  3. historicTasks：已执行节点

5.1 统一时间线节点模型h3

type TimelineStatus = 'completed' | 'active' | 'pending'


function toTimelineNodes(triggerTask: any, currentTasks: any[], historicTasks: any[]) {
  const startNode = {
    nodeId: 'trigger',
    name: triggerTask?.initiatorName || '发起人',
    status: 'completed' as TimelineStatus,
    time: triggerTask?.startTime || null,
    desc: triggerTask?.reason ? `发起申请（原因：${triggerTask.reason}）` : '发起申请'
  }


  const history = (historicTasks || []).map((x) => ({
    nodeId: x.taskId || x.taskDefinitionKey,
    name: x.taskName || '审批节点',
    status: 'completed' as TimelineStatus,
    time: x.endTime || x.startTime || null,
    desc: x.comment || ''
  }))


  const current = (currentTasks || []).map((x) => ({
    nodeId: x.id || x.taskDefinitionKey,
    name: x.name || '审批节点',
    status: 'active' as TimelineStatus,
    time: null,
    desc: ''
  }))


  return [startNode, ...history, ...current]
}

5.2 收益h3

  1. 组件只关心展示，不关心接口差异。
  2. 当前/历史状态颜色与文案可以纯函数化配置。
  3. 后续新增三级审批、驳回重提时可直接扩展节点映射。

6. TabbedFrame 与跳转策略h2

针对”审批/工单”分流，核心策略是避免重复 Tab 与状态串扰：

  1. Tab key 使用 route + stableQuery 生成。
  2. 切换到审批 Tab 时，统一跳转审批列表入口。
  3. 保留已打开页签的上下文，不在切换时销毁无关页签状态。
function makeTabKey(path: string, query: Record<string, any>) {
  const q = new URLSearchParams(Object.entries(query).sort()).toString()
  return `${path}?${q}`
}

7. OpenSeadragon 首屏不显示问题处理思路h2

问题表现：普通图片加载后首次不显示，缩放后出现。
这类问题通常来自”容器布局完成时机”和”viewer 首帧重绘”不一致。

处理思路：

  1. 在 open 事件后触发一次强制重绘/约束刷新。
  2. 保证容器可见且尺寸稳定后再初始化 viewer。
  3. 异步布局场景下在 nextTick/requestAnimationFrame 后执行一次 goHome 或 applyConstraints。

8. 研发方法：WebStorm MCP 驱动排查h2

本周把”查文件/查引用”流程固化成 MCP 优先，带来两个直接收益：

  1. 巨模块改造时，引用链更完整，不容易漏点。
  2. 方案评估速度更快，先确认影响面再改代码，返工更少。

9. 本周交付与下周计划h2

本周交付h3

  1. 审批待办逻辑增强提交：da07e8e
  2. 审批链路关键页面完成数据契约梳理
  3. MCP 协作流落地并纳入日常开发约束

下周计划h3

  1. 完成”待办 → 审批表 → 详情 → 进度”全链路联调
  2. 补齐回归测试清单：businessStatus、Tab 切换、审批类型渲染、图像首屏
  3. 输出字段映射文档（接口字段 → 领域模型 → 组件 props）

10. 复盘结论h2

这周最大的变化不是”多修了几个 bug”，而是把审批业务从”页面逻辑”提升到”领域模型 + 链路治理”。
一旦模型稳定，UI 只是渲染层，后续新增审批类型和流程节点的成本会明显下降。

技术栈：React、TypeScript、Flowable、WebStorm MCP
相关组件：审批列表、审批详情、时间线组件、TabbedFrame、OpenSeadragon

相关文章

May 26, 2026

每周速递：本周值得关注的 12 件事

2026-05-18 ~ 2026-05-24 本周科技、热点、金融、AI 领域的重要新闻汇总

May 20, 2026

高质量新闻来源推荐

Charles 精选的深度商业、科技、综合类新闻来源，覆盖国内外权威媒体

May 16, 2026

tmux 使用技巧与配置

整理 tmux 终端复用器的实用技巧、基础配置、插件管理、会话恢复、fzf 集成和日常开发中提升效率的命令集合。

讨论

评论