City-Lifeline-Cockpit/.scratch/cockpit-shell-panel-layout/verify/t12-work-order-timeline-walkthrough.mjs

/**
 * T12 真机走查：工单七态与动作轨迹真的画在了设备详情里（票 12）。
 *
 * 逻辑脚本（t12-work-order-timeline.mjs）已经把七态字典、动作判定（回退/取消/同态/认不出的码）、
 * 轨迹组装、七态路径视图与分区独立测透了；这里只补**只有在真机上才成立**的部分：
 *   1. 工单面板里**每张工单真的挂着它自己那条**时间线（DOM 实证，不是读 store）；
 *   2. 七态**七个节点一个不少**地画出来，且驳回**没有**多出第八个节点；
 *   3. 回退那一行在界面上带可见的「回退」标记（不是只靠颜色 —— 灰度下也要读得出）；
 *   4. 轨迹分区失败时说的是「没取到」，**不是**「没有动作记录」（两句不同的话），
 *      且七态路径**照常**画（"这张工单现在在哪一态"不因轨迹失败而丢）；
 *   5. 整屏可见文本零内部代号（票 05/11 的同一条回归）。
 *
 * 运行（需先起 `yarn dev`；端口见启动输出，默认 8000）：
 *   node .scratch/cockpit-shell-panel-layout/verify/t12-work-order-timeline-walkthrough.mjs
 *   COCKPIT_BASE=http://localhost:8001 node ...（端口不是 8000 时）
 *
 * **场景注入的关键**（与 t11 同一套）：用 `__COCKPIT_MOCK_ONLY__` 把样例**只**施加在设备详情
 * 聚合这一个端点上，地图与点位摘要保持 success —— 否则没有可点的标记，走查会退化成
 * "点不到东西"的假失败（票 08/09/11 都踩过这类坑）。
 *
 * 演示开关（宿主全局键注入，不改代码重新构建）：
 *   `__COCKPIT_MOCK_SCENARIO__='work-order-timeline'`        三张工单各一条轨迹（推进/回退/取消）
 *   `__COCKPIT_MOCK_SCENARIO__='work-order-timeline-failed'` 工单列表成功、只有轨迹分区失败
 */
import { join } from 'node:path'
import { tmpdir } from 'node:os'

const BASE = process.env.COCKPIT_BASE || 'http://localhost:8000'
const ENTRY_URL = process.env.COCKPIT_URL || `${BASE}/#/cockpit`
const CHROME = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
const PUPPETEER = 'file:///C:/Users/ASUS/.dsh/profiles/desktop/node_modules/puppeteer-core/lib/puppeteer/puppeteer-core.js'

/** 只让设备详情聚合走样例，地图与点位摘要保持 success（见文件头说明）。 */
const AGGREGATE_ONLY = '/equipments/*/detail-aggregate'

const results = []
/** `check(id, pass, evidence)` —— 第二参是**断言结果**，不是描述（票 08 踩过这个假绿）。 */
function check(id, pass, evidence) {
    results.push({ id, pass })
    const rest = evidence === undefined ? '' : String(evidence)
    console.log(`${pass ? 'PASS' : 'FAIL'}  ${id}  ::  ${rest}`)
}

const sleep = (ms) => new Promise((r) => setTimeout(r, ms))

const puppeteer = (await import(PUPPETEER)).default
const browser = await puppeteer.launch({
    executablePath: CHROME,
    headless: true,
    userDataDir: join(tmpdir(), 'cockpit-t12-profile'),
    defaultViewport: { width: 1680, height: 950 },
    args: ['--no-sandbox', '--disable-dev-shm-usage', '--no-first-run', '--no-default-browser-check'],
})
console.log(`Chrome: ${await browser.version()}`)

/**
 * 从 DOM 读工单面板的时间线：每张工单一条、每条的七态路径与动作轨迹。
 * 一切从 DOM 读 —— 走查的价值就在于证明界面真的画出来了，而不是 store 里有值。
 */
const readTimelines = (page) =>
    page.evaluate(() => {
        const card = document.querySelector('[data-point-detail]')
        const host = document.querySelector('.cockpit-shell__map .map-canvas')
        const section = card && card.querySelector('[data-equipment-section="workOrders"]')
        const text = (el) => (el ? el.textContent.trim() : '')

        return {
            hasCard: !!card,
            level: card ? card.dataset.detailLevel : '',
            hasOrderSection: !!section,
            // 工单面板自己（列表）的分区状态
            orderPanelState: section ? section.dataset.panelState : '',
            // ---- 每张工单 ----
            orders: section
                ? Array.from(section.querySelectorAll('[data-work-order]')).map((el) => ({
                      code: el.dataset.workOrder || '',
                      state: el.dataset.workOrderState || '',
                      name: text(el.querySelector('.equipment-section__item-name')),
                      // 这张工单下面挂的时间线（票 12 验收第 2 条：每张工单有独立时间线）
                      timelines: el.querySelectorAll('[data-work-order-timeline]').length,
                      timelineCode: (el.querySelector('[data-work-order-timeline]') || {}).dataset?.woCode || '',
                      pathNodes: Array.from(el.querySelectorAll('[data-wo-path-node]')).map((node) => ({
                          code: node.dataset.woPathNode || '',
                          name: node.dataset.woPathName || '',
                          state: node.dataset.woPathState || '',
                          off: node.dataset.woPathOff === 'true',
                      })),
                      steps: Array.from(el.querySelectorAll('[data-wo-step]')).map((step) => ({
                          action: step.dataset.woStepAction || '',
                          state: step.dataset.woStepState || '',
                          text: step.textContent.replace(/\s+/g, ' ').trim(),
                          rollback: !!step.querySelector('[data-wo-rollback]'),
                      })),
                      rollbackRows: el.querySelectorAll('[data-wo-rollback]').length,
                      missingNote: text(el.querySelector('[data-wo-timeline-missing]')),
                  }))
                : [],
            placeholder: text(section && section.querySelector('[data-wo-timeline-placeholder]')),
            missingNotes: section ? Array.from(section.querySelectorAll('[data-wo-timeline-missing]')).map((el) => el.textContent.trim()) : [],
            // ---- 地图侧（证明打开详情没重建地图）----
            mapHosts: document.querySelectorAll('.cockpit-shell__map .map-canvas').length,
            engine: (host && host.dataset.mapEngine) || '',
            dsPlan: Number((host && host.dataset.mapMarkersPlan) || 0),
            cardText: card ? card.innerText || '' : '',
        }
    })

/** 打开页面并走真实的进入引导（点一下「点击进入系统」）。 */
async function openPage(scenario) {
    const page = await browser.newPage()
    const errors = []
    page.on('pageerror', (e) => errors.push(String(e && e.message ? e.message : e)))
    page.on('console', (m) => {
        if (m.type() === 'error') errors.push(`console.error: ${m.text()}`)
    })
    await page.evaluateOnNewDocument(
        ({ name, only }) => {
            window.__COCKPIT_MOCK_SCENARIO__ = name
            window.__COCKPIT_MOCK_ONLY__ = only
            window.__COCKPIT_MOCK_MAP__ = { pageSize: 10 }
        },
        { name: scenario, only: AGGREGATE_ONLY },
    )

    await page.goto(ENTRY_URL, { waitUntil: 'networkidle2', timeout: 60000 })
    await page.waitForSelector('.cockpit-shell', { timeout: 20000 })
    await page
        .waitForFunction(
            () => ['ready', 'failed', 'disabled'].includes(document.querySelector('.cockpit-shell__map .map-canvas')?.dataset.mapEngine),
            { timeout: 40000 },
        )
        .catch(() => {})

    if (await page.$('[data-cockpit-intro]')) {
        await page.click('[data-cockpit-intro]')
        await page.waitForSelector('[data-cockpit-intro]', { hidden: true, timeout: 10000 }).catch(() => {})
    }
    await sleep(1500)
    return { page, errors }
}

/** 点「加载下一页」直到翻完（地图上的监测点标记要等它出现）。 */
async function advanceUntilSettled(page, maxSteps = 12) {
    for (let step = 0; step < maxSteps; step += 1) {
        const state = await page.evaluate(() => {
            const host = document.querySelector('.cockpit-shell__map .map-canvas')
            return { phase: (host && host.dataset.mapSummary) || '', loaded: Number((host && host.dataset.mapSummaryLoaded) || 0) }
        })
        if (['complete', 'empty', 'failed', 'expired'].includes(state.phase)) break
        const clicked = await page.evaluate(() => {
            const button = document.querySelector('[data-map-summary-action]')
            if (!button || button.disabled) return false
            button.click()
            return true
        })
        if (!clicked) break
        await page
            .waitForFunction(
                (previous) => {
                    const host = document.querySelector('.cockpit-shell__map .map-canvas')
                    const loaded = Number((host && host.dataset.mapSummaryLoaded) || 0)
                    const phase = (host && host.dataset.mapSummary) || ''
                    return loaded !== previous || ['failed', 'expired', 'empty', 'complete'].includes(phase)
                },
                { timeout: 10000 },
                state.loaded,
            )
            .catch(() => {})
        await sleep(350)
    }
}

/** 等相机真的落在目标上（阻尼飞行途中点屏幕中心必然点空）。 */
async function waitForCameraNear(page, target, timeout = 25000) {
    await page
        .waitForFunction(
            ({ lon, lat }) => {
                const dev = window.__cockpitMap
                const state = dev && dev.getCameraState ? dev.getCameraState() : null
                const shown = state && state.shownPivot
                return !!shown && Math.abs(shown.lon - lon) < 2e-4 && Math.abs(shown.lat - lat) < 2e-4
            },
            { timeout },
            { lon: target.lon, lat: target.lat },
        )
        .catch(() => {})
}

/** 相机中心对准第一个监测点标记。 */
async function focusOnPoint(page) {
    const target = await page.evaluate(() => {
        const dev = window.__cockpitMap
        const marker = dev.getPointMarkers().markers.find((item) => item.kind === 'monitoring-point')
        if (!marker) return null
        dev.setCameraFocus({ lon: marker.longitude, lat: marker.latitude, height: 0 })
        return { lon: marker.longitude, lat: marker.latitude, code: marker.code }
    })
    if (target) await waitForCameraNear(page, target)
    return target
}

/** 用引擎拾取在相机中心附近找监测点标记的真实屏幕坐标（贴地标记与中心有高程差）。 */
async function locatePoint(page, radius = 300, stride = 10) {
    return page.evaluate(
        ([max, step]) => {
            const dev = window.__cockpitMap
            const canvas = document.querySelector('.cockpit-shell__map canvas')
            const center = dev.projectCameraPivot()
            if (!center || !canvas) return { x: 0, y: 0, code: '' }

            for (let dy = -max; dy <= max; dy += step) {
                for (let dx = -max; dx <= max; dx += step) {
                    const x = Math.round(center.x + dx)
                    const y = Math.round(center.y + dy)
                    const hitElement = document.elementFromPoint(x, y)
                    if (!hitElement || (hitElement !== canvas && !canvas.contains(hitElement))) continue
                    const hit = dev.pickPoint(x, y)
                    if (hit && hit.kind === 'monitoring-point') return { x, y, dx, dy, code: hit.code }
                }
            }
            return { x: 0, y: 0, dx: 0, dy: 0, code: '' }
        },
        [radius, stride],
    )
}

/**
 * 打开设备详情（走 CONTEXT.md 的「两级详情」正路：点标记 → 点位摘要 → 点设备卡片）。
 * 到设备级后多等一拍：工单面板的时间线是随聚合一起画的，等它真的出现。
 */
async function openDeviceDetail(scenario) {
    const { page, errors } = await openPage(scenario)
    await advanceUntilSettled(page)

    await focusOnPoint(page)
    const locatedPoint = await locatePoint(page)
    if (await page.$('[data-detail-close]')) {
        await page.click('[data-detail-close]')
        await sleep(250)
    }

    if (locatedPoint.code) {
        await page.mouse.click(locatedPoint.x, locatedPoint.y)
        await sleep(700)
    }

    const cards = await page.evaluate(() =>
        Array.from(document.querySelectorAll('[data-device-card]')).map((el) => el.dataset.deviceCode || ''),
    )

    if (cards.length) {
        await page.click('[data-device-card="0"]')
        await page.waitForSelector('[data-equipment-section]', { timeout: 10000 }).catch(() => {})
        // 时间线要跟聚合一起到（等它比只等"分区存在"更严）。
        await page.waitForSelector('[data-work-order-timeline], [data-wo-timeline-placeholder]', { timeout: 10000 }).catch(() => {})
        await sleep(600)
    }

    return { page, errors, cards, view: await readTimelines(page) }
}

/** 整屏可见文本里的内部代号（票 05/11 的泄漏回归）。 */
const REASON_CODES = ['READY', 'SAMPLE_OUTDATED', 'NO_EVENTS', 'NO_METRICS', 'NO_ARCHIVE', 'NO_WORK_ORDERS', 'NO_IMAGE', 'READ_FAILURE', 'SOURCE_SECTION_FAILED', 'SUCCESS', 'FAILED', 'STALE', 'EMPTY']

try {
    // ================================================================ A 三张工单各一条独立时间线
    {
        const { page, errors, cards, view } = await openDeviceDetail('work-order-timeline')

        if (!cards.length) {
            check('A0-scenario-has-device-card', false, '点位摘要里没有设备卡片')
        } else {
            check(
                'A1-work-order-panel-lists-three-orders',
                view.hasOrderSection && view.orders.length === 3,
                `工单面板画出 ${view.orders.length} 张：${view.orders.map((o) => `${o.code}(${o.name})`).join(' · ')}`,
            )
            // 验收第 2 条：每张工单有独立时间线 —— 数量与工单数相等，且编码一一对上。
            check(
                'A2-every-order-has-its-own-timeline',
                view.orders.every((order) => order.timelines === 1) &&
                    view.orders.every((order) => order.timelineCode === order.code) &&
                    view.orders.length === 3,
                view.orders.map((o) => `${o.code}→${o.timelineCode}`).join(' · '),
            )
            // 条数各不相同 ⇒ 不是同一份轨迹抄三遍（这一刻意在对齐逻辑闸门的 E2）。
            const counts = view.orders.map((order) => order.steps.length)
            check(
                'A3-tracks-are-not-the-same-one-copied',
                new Set(counts).size === 3 && counts.includes(6) && counts.includes(5) && counts.includes(3),
                `三张的步数：${view.orders.map((o, i) => `${o.code}=${counts[i]}`).join(' / ')}`,
            )
            check(
                'A4-timeline-section-succeeded',
                view.placeholder === '' && view.orderPanelState === 'success',
                `工单面板 ${view.orderPanelState}，轨迹无占位说明`,
            )
        }
        await page.close()
    }

    // ================================================================ B 七态路径 + 回退动作（本票核心）
    {
        const { page, errors, cards, view } = await openDeviceDetail('work-order-timeline')

        const rollbackOrder = view.orders.find((order) => order.code === 'WO-TL-ROLLBACK')
        const forwardOrder = view.orders.find((order) => order.code === 'WO-TL-FORWARD')
        const cancelledOrder = view.orders.find((order) => order.code === 'WO-TL-CANCELLED')

        if (!rollbackOrder) {
            check('B0-rollback-order-present', false, `没有找到 WO-TL-ROLLBACK：${view.orders.map((o) => o.code).join(',')}`)
        } else {
            // 验收第 1 条：七态完整展示 —— **七个节点一个不少**。
            check(
                'B1-path-shows-all-seven-states',
                rollbackOrder.pathNodes.length === 7 &&
                    rollbackOrder.pathNodes.map((node) => node.code).join('') === '1234567' &&
                    rollbackOrder.pathNodes.map((node) => node.name).join(',') === '待派单,待接单,已接单,处理中,待验收,已结案,已取消',
                `七态节点：${rollbackOrder.pathNodes.map((node) => node.name).join('→')}`,
            )
            // 验收第 3 条：驳回**不**多出第八个节点。
            check(
                'B2-reject-adds-no-eighth-node',
                rollbackOrder.pathNodes.length === 7 &&
                    !rollbackOrder.pathNodes.some((node) => /驳回/.test(node.name)) &&
                    !/驳回/.test(rollbackOrder.pathNodes.map((node) => node.name).join('')),
                '七态路径里没有「已驳回」这种第八个节点（驳回只出现在动作流水里）',
            )
            // 回退在界面上是一行带可见标记的记录。
            check(
                'B3-rollback-is-a-visible-action-row',
                rollbackOrder.rollbackRows === 1 &&
                    rollbackOrder.steps.some((step) => step.rollback && step.action === 'rollback') &&
                    rollbackOrder.steps.some((step) => step.rollback && step.text.includes('回退')),
                `回退行：${(rollbackOrder.steps.find((step) => step.rollback) || {}).text}`,
            )
            check(
                'B4-rollback-row-says-where-it-came-from',
                rollbackOrder.steps.some((step) => step.rollback && step.text.includes('待验收')) &&
                    rollbackOrder.steps.some((step) => step.rollback && step.text.includes('验收驳回')),
                '回退那一行同时说得出「自待验收」与动作名「验收驳回」（不靠颜色也读得出）',
            )
            // 当前态与"走到过"分开：当前处理中，待验收标 reached 而不标 current。
            check(
                'B5-current-and-reached-are-distinct',
                (rollbackOrder.pathNodes.find((node) => node.code === '4') || {}).state === 'current' &&
                    (rollbackOrder.pathNodes.find((node) => node.code === '5') || {}).state === 'reached',
                `处理中=${(rollbackOrder.pathNodes.find((n) => n.code === '4') || {}).state}，待验收=${(rollbackOrder.pathNodes.find((n) => n.code === '5') || {}).state}`,
            )
            // 对照：一路推进的那张零回退（证明 B3 不是恒真）。
            check(
                'B6-forward-order-has-no-rollback',
                forwardOrder && forwardOrder.rollbackRows === 0 && forwardOrder.steps.every((step) => !step.rollback),
                `WO-TL-FORWARD 零回退（${forwardOrder ? forwardOrder.steps.length : 0} 步），因此 B3 的"恰一次回退"有信息量`,
            )
            // 已取消是路径外节点，不接在已结案后面冒充第八步。
            check(
                'B7-cancelled-is-off-path',
                cancelledOrder &&
                    (cancelledOrder.pathNodes.find((node) => node.code === '7') || {}).off === true &&
                    (cancelledOrder.pathNodes.find((node) => node.code === '7') || {}).state === 'current' &&
                    cancelledOrder.pathNodes.filter((node) => node.off).length === 1,
                cancelledOrder ? '已取消标 offPath 且是当前态；推进路径六个节点都不算走到过' : '没有 WO-TL-CANCELLED',
            )
            // 验收第 4 条：不提供任何写操作。
            const writeButtons = await page.evaluate(() =>
                Array.from(document.querySelectorAll('[data-point-detail] button')).map((el) => (el.textContent || '').trim()),
            )
            check(
                'B8-no-work-order-write-actions',
                !writeButtons.some((label) => /派单|接单|处置|结案|取消工单|验收|提交/.test(label)),
                `详情里的按钮只有：${writeButtons.join(' / ') || '（无）'}`,
            )
            check('B9-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        }
        await page.close()
    }

    // ================================================================ C 轨迹分区失败 ≠ 没有动作记录
    {
        const { page, errors, cards, view } = await openDeviceDetail('work-order-timeline-failed')

        if (!cards.length) {
            check('C0-scenario-has-device-card', false, '点位摘要里没有设备卡片')
        } else {
            check(
                'C1-timeline-failure-says-not-fetched',
                view.placeholder.includes('加载失败') && !/没有动作记录/.test(view.placeholder),
                `轨迹分区失败时说「${view.placeholder}」`,
            )
            // "没取到" ≠ "没有"：失败时**不许**出现「这张工单没有动作记录」。
            check(
                'C2-failure-is-not-drawn-as-no-records',
                view.missingNotes.length === 0 && view.orders.every((order) => order.steps.length === 0 && order.rollbackRows === 0),
                `**没有**把它画成「这张工单没有动作记录」（该措辞出现 ${view.missingNotes.length} 次，动作流水 0 条）`,
            )
            // 反面：轨迹没拿到，"这张工单现在在哪一态"仍要看得出来（验收第 1 条不因轨迹失败而丢）。
            check(
                'C2b-path-survives-without-tracks',
                view.orders.length >= 1 && view.orders.every((order) => order.pathNodes.length === 7),
                `轨迹没拿到时七态路径仍在：${view.orders.map((o) => `${o.code}=${o.pathNodes.length}节点`).join(' / ')}`,
            )
            // 分区独立：工单列表照常成功，只有轨迹分区坏掉（票 11 的立场在本票的延续）。
            check(
                'C3-order-list-still-renders-alongside',
                view.orderPanelState === 'success' && view.orders.length >= 1,
                `工单面板照常 ${view.orderPanelState}（${view.orders.length} 张工单仍在），只有轨迹没取到`,
            )
            check('C4-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        }
        await page.close()
    }

    // ================================================================ D 泄漏回归（票 05/11 的同一条）
    {
        const { page, errors, cards, view } = await openDeviceDetail('work-order-timeline')
        if (!cards.length) {
            check('D0-scenario-has-device-card', false, '点位摘要里没有设备卡片')
        } else {
            const codeLeaks = REASON_CODES.filter((code) => new RegExp(`\\b${code}\\b`).test(view.cardText))
            // 字段路径（`archive.deviceName` 这类）也属接口词汇；时间线里不该冒出 `timelineEntries` 之类。
            const pathLeaks = (view.cardText.match(/\b[a-zA-Z]+\.[a-zA-Z]+\b/g) || []).filter((token) => !token.includes('.webp') && !token.includes('.js'))
            check(
                'D1-visible-text-has-no-internal-codes',
                codeLeaks.length === 0 && pathLeaks.length === 0,
                codeLeaks.length || pathLeaks.length
                    ? `可见文案泄漏：代号 ${codeLeaks.join(',') || '无'} · 字段路径 ${pathLeaks.join(',') || '无'}`
                    : '整卡可见文本零内部代号、零字段路径',
            )
            // 打开详情不重建地图（票 10 的常驻语义不回退）。
            check(
                'D2-detail-does-not-rebuild-map',
                view.mapHosts === 1 && view.dsPlan >= 0,
                `地图宿主 ${view.mapHosts} 个（未重建）`,
            )
            check('D3-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        }
        await page.close()
    }
} finally {
    await browser.close()
}

const failed = results.filter((item) => !item.pass)
console.log(`\nT12 走查：${results.length - failed.length}/${results.length} 项通过${failed.length ? `，未通过：${failed.map((r) => r.id).join(', ')}` : ''}`)
process.exit(failed.length ? 1 : 0)