Archived
仿真测试台(界面):装配一次试跑 → 起单 → 全链 TRACE 看穿(frontend-design 专项)
测试台从「只能造一封邮件」升级成仿真试跑台,两种试法同屏切换: **装配态**:选生效版流程包 → 按 callInterface.input 现生成参数表单(必填标出)→ 节点指派表(每个活动点/审批点选账号,留空即轮值)→ 起单试跑; 起不来把后端判词原样上屏(如「must have required property 'rfqRef'」)。 **观测态**:WF 工作流图签 · DSK 任务落到了谁的工作台(明说测试台不代答)· **TRC 全链 TRACE(签名元素)** · NOD 节点实例。 TRACE 做成一张走查记录纸:左半 span 树(细线方角枝线),右半同轴甘特(方格纸底纹)。 三处判断值得留: - 轴的右端**只认已知时刻,不认 now** —— 按 now 收口会被不收尾的工作流 span 拉到 十几秒,真干活的两三毫秒压成发丝;而根 span 常常一辈子不收尾,拉到「此刻」 等于替它编了个结束时间 - 未收尾的段用剖面线 + 箭头(图纸的「未完待续」画法) - 包络(流/节点自己不干活)画尺寸线而非实心条 —— 实心会盖过真正干活的那几笔 颜色只花在动作三色(工具石青 / 模型靛 / 人黄铜),结构走灰阶。 顺带修:区头 desc 是纯文本渲染,里面的 markdown `**` 会原样露星号 —— 六处全清;测试台页签名改「联调试跑」(它现在不止入站邮件)。 实测:真起单三次,指派两处都落地(TRACE 的 attributes.assigneeId 与节点实例 受理人一致);浏览器核对装配态与观测态。五闸全过。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* 调用参数表单 —— 按流程包 `callInterface.input`(JSON Schema 2020-12 子集)现生成。
|
||||
*
|
||||
* 表单不认业务字段,只认声明:必填由 `required` 决定,控件由 `type` / `enum` 决定。
|
||||
* 前端这一层只做**填得顺手**,不做裁决 —— 合不合契约由后端 ajv 判,判词原样回显。
|
||||
* 少填一个必填就把按钮按灰,是为了不让人白跑一趟接口,不是替后端把关。
|
||||
*/
|
||||
import type { ReactNode } from 'react';
|
||||
import { Field } from '@web-shared/gov/primitives.tsx';
|
||||
|
||||
/** 控件五型:字符串 / 数值 / 真假 / 枚举 / 复合(对象与数组落 JSON 文本框) */
|
||||
export type CallFieldKind = 'text' | 'number' | 'bool' | 'enum' | 'json';
|
||||
|
||||
export type CallField = {
|
||||
readonly key: string;
|
||||
readonly required: boolean;
|
||||
readonly kind: CallFieldKind;
|
||||
readonly options: readonly string[];
|
||||
/** 声明里的人读名与说明(有就用,没有就退回字段名) */
|
||||
readonly title: string | undefined;
|
||||
readonly hint: string | undefined;
|
||||
};
|
||||
|
||||
export type CallValues = Readonly<Record<string, string>>;
|
||||
|
||||
function asRecord(v: unknown): Record<string, unknown> | undefined {
|
||||
return typeof v === 'object' && v !== null && !Array.isArray(v) ? (v as Record<string, unknown>) : undefined;
|
||||
}
|
||||
|
||||
function asStrings(v: unknown): string[] {
|
||||
return Array.isArray(v) ? v.filter((x): x is string => typeof x === 'string') : [];
|
||||
}
|
||||
|
||||
function kindOf(prop: Record<string, unknown>): CallFieldKind {
|
||||
if (asStrings(prop['enum']).length > 0) return 'enum';
|
||||
const t = prop['type'];
|
||||
if (t === 'number' || t === 'integer') return 'number';
|
||||
if (t === 'boolean') return 'bool';
|
||||
if (t === 'object' || t === 'array') return 'json';
|
||||
return 'text';
|
||||
}
|
||||
|
||||
/**
|
||||
* 声明 → 字段清单。**必填排前面**:properties 的键序来自库里的 jsonb,
|
||||
* 是存储顺序不是语义顺序,照抄等于把「哪几个非填不可」藏进随机次序里。
|
||||
*/
|
||||
export function callFieldsOf(schema: Readonly<Record<string, unknown>> | undefined): CallField[] {
|
||||
const props = asRecord(schema?.['properties']);
|
||||
if (props === undefined) return [];
|
||||
const required = new Set(asStrings(schema?.['required']));
|
||||
const fields = Object.entries(props).map(([key, raw]) => {
|
||||
const prop = asRecord(raw) ?? {};
|
||||
const title = typeof prop['title'] === 'string' ? prop['title'] : undefined;
|
||||
const desc = typeof prop['description'] === 'string' ? prop['description'] : undefined;
|
||||
const fmt = typeof prop['format'] === 'string' ? prop['format'] : undefined;
|
||||
const t = typeof prop['type'] === 'string' ? prop['type'] : 'any';
|
||||
return {
|
||||
key,
|
||||
required: required.has(key),
|
||||
kind: kindOf(prop),
|
||||
options: asStrings(prop['enum']),
|
||||
title,
|
||||
hint: desc ?? (fmt === undefined ? t : `${t} · ${fmt}`),
|
||||
};
|
||||
});
|
||||
return fields.sort((a, b) =>
|
||||
a.required === b.required ? a.key.localeCompare(b.key) : a.required ? -1 : 1,
|
||||
);
|
||||
}
|
||||
|
||||
/** 起单载荷 —— 空的选填字段不发出去,免得把 `""` 当成「填过了」 */
|
||||
export function buildCallData(
|
||||
fields: readonly CallField[],
|
||||
values: CallValues,
|
||||
): { data: Record<string, unknown>; errors: string[] } {
|
||||
const data: Record<string, unknown> = {};
|
||||
const errors: string[] = [];
|
||||
for (const f of fields) {
|
||||
const raw = (values[f.key] ?? '').trim();
|
||||
if (raw === '') {
|
||||
if (f.required) errors.push(`${f.key} 必填`);
|
||||
continue;
|
||||
}
|
||||
if (f.kind === 'number') {
|
||||
const n = Number(raw);
|
||||
if (Number.isNaN(n)) errors.push(`${f.key} 要是数字`);
|
||||
else data[f.key] = n;
|
||||
continue;
|
||||
}
|
||||
if (f.kind === 'bool') {
|
||||
data[f.key] = raw === 'true';
|
||||
continue;
|
||||
}
|
||||
if (f.kind === 'json') {
|
||||
try {
|
||||
data[f.key] = JSON.parse(raw) as unknown;
|
||||
} catch {
|
||||
errors.push(`${f.key} 不是合法 JSON`);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
data[f.key] = raw;
|
||||
}
|
||||
return { data, errors };
|
||||
}
|
||||
|
||||
/** 占位值:按类型各填一份能过契约的样子,让人一键就能跑通一趟再回头改 */
|
||||
export function placeholderValues(fields: readonly CallField[]): Record<string, string> {
|
||||
const out: Record<string, string> = {};
|
||||
for (const f of fields) {
|
||||
out[f.key] =
|
||||
f.kind === 'number'
|
||||
? '0'
|
||||
: f.kind === 'bool'
|
||||
? 'false'
|
||||
: f.kind === 'enum'
|
||||
? (f.options[0] ?? '')
|
||||
: f.kind === 'json'
|
||||
? '{}'
|
||||
: `${f.key}-占位`;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* 一格一字段。必填不靠星号靠**颜色**:整条注记转黄铜(黄铜在这套图纸语言里恒表
|
||||
* 「生效 / 裁定 / 人」这类要紧事),扫一眼就知道哪几格非填不可。
|
||||
*/
|
||||
export function CallForm({
|
||||
fields,
|
||||
values,
|
||||
onChange,
|
||||
}: {
|
||||
fields: readonly CallField[];
|
||||
values: CallValues;
|
||||
onChange: (key: string, v: string) => void;
|
||||
}): ReactNode {
|
||||
return (
|
||||
<>
|
||||
{fields.map((f) => {
|
||||
const v = values[f.key] ?? '';
|
||||
const hint = `${f.required ? '必填' : '选填'}${f.hint === undefined ? '' : ` · ${f.hint}`}`;
|
||||
return (
|
||||
<div key={f.key} className={'g-tb-f' + (f.required ? ' req' : '')}>
|
||||
<Field k={f.title ?? f.key} hint={hint}>
|
||||
{f.kind === 'enum' ? (
|
||||
<select className="g-select" value={v} onChange={(e) => onChange(f.key, e.target.value)}>
|
||||
<option value="">不填</option>
|
||||
{f.options.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : f.kind === 'bool' ? (
|
||||
<select className="g-select" value={v} onChange={(e) => onChange(f.key, e.target.value)}>
|
||||
<option value="">不填</option>
|
||||
<option value="true">是</option>
|
||||
<option value="false">否</option>
|
||||
</select>
|
||||
) : f.kind === 'json' ? (
|
||||
<textarea
|
||||
className="g-ta mono"
|
||||
rows={3}
|
||||
value={v}
|
||||
placeholder="{ }"
|
||||
onChange={(e) => onChange(f.key, e.target.value)}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
className={'g-input' + (f.kind === 'number' ? '' : ' mono')}
|
||||
type={f.kind === 'number' ? 'number' : 'text'}
|
||||
value={v}
|
||||
onChange={(e) => onChange(f.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
/**
|
||||
* 联调测试台 · 入站邮件演练 —— 从**外界**推一封信进来,看谁接。
|
||||
*
|
||||
* 造一封入站邮件(可带附件)投进通道,走的是**与真通道同一条**入站归一链路
|
||||
* (`POST /api/ingest/channel/:id/mail` → 归属解析 → 统一事件流 → 三级消费)。
|
||||
* 邮件通道是外界,模拟通道是允许的(README:mock 只许出现在外界);
|
||||
* 系统内部机制这里一行都不 mock —— 命中判定、起单、消息兜底全是真的。
|
||||
*
|
||||
* 这一屏要回答的是三个问题,所以结果就摆这三样:
|
||||
* · 归属判到谁了(哪一级、认领岗位)
|
||||
* · 谁接了(任务监听 / 触发器,各命中几个)
|
||||
* · 没人接的话落哪儿(消息兜底)
|
||||
*/
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import type { IngestMailOutput, InboundMail } from '@contracts';
|
||||
import { ingestMailRoute } from '@contracts';
|
||||
import { call } from '@web-shared/typed-fetch.ts';
|
||||
import { useGovChannels, useGovStaff } from '@web-shared/gov/gov-api.ts';
|
||||
import { Acts, Card, Field, Note, PageHead, Rows, Sec, St } from '@web-shared/gov/primitives.tsx';
|
||||
import type { Nav } from '@web-shared/gov/gov-route.ts';
|
||||
|
||||
/*
|
||||
* 出参形状**直接用契约类型**,不手搓。
|
||||
* 我手搓过一次(`level` / `kind` / `position` / `rationale`),四个字段名全是编的 ——
|
||||
* 页面上就摆出两个永远显示「—」的格子。归属解析真实是按 `outcome` 判别的联合:
|
||||
* owned 给 `rule` + `taskId`,unowned 给 `reason` + 可选的 `fallbackPosition`。
|
||||
*/
|
||||
type IngestResult = IngestMailOutput;
|
||||
|
||||
const RULE_LABEL: Readonly<Record<string, string>> = {
|
||||
thread: '①线程精确 —— 回信落在原线程上',
|
||||
'listener-key': '②关联键命中在途任务的监听',
|
||||
'address-window': '③地址 + 时间窗对上了',
|
||||
};
|
||||
|
||||
const REASON_LABEL: Readonly<Record<string, string>> = {
|
||||
'no-match': '三级都没对上',
|
||||
ambiguous: '对上多条,有歧义 —— 宁交人不错投',
|
||||
'extract-failed': '归属键抽不出来',
|
||||
};
|
||||
|
||||
type Attach = { name: string; contentType: string; size: number; ref: string };
|
||||
|
||||
/**
|
||||
* 样例邮件 —— 一键就能起单的那一封。
|
||||
*
|
||||
* 三件事都得对,少一件就不起单(这也正是这一屏要让人看见的):
|
||||
* ① 投给「公司询价邮箱」这个通道(触发器规则写死了 `channelId = "ch-rfq-mail"`)
|
||||
* ② 主题含「询价」或 RFQ(触发器规则的第二半)
|
||||
* ③ 正文或主题里有客户码 `C\d{3}` 与单号 `RFQ-[A-Z0-9]+` —— 通道的归属键提取规则按正则抽,
|
||||
* 抽不出来就没有关联键,起单装配拿不到 customerCode / rfqRef
|
||||
*/
|
||||
const SAMPLE = {
|
||||
from: 'buyer@sz-precision.com',
|
||||
to: 'rfq@we.com',
|
||||
subject: '【询价】RFQ-2607-501 精密车削件 6 项',
|
||||
body: [
|
||||
'你好,',
|
||||
'',
|
||||
'我方客户码 C014,本次询价单号 RFQ-2607-501,附件是 BOM 清单(6 项)。',
|
||||
'月需约 2000 套,请两周内回价。',
|
||||
'',
|
||||
'深圳精密件采购部',
|
||||
].join('\n'),
|
||||
};
|
||||
|
||||
const SAMPLE_ATTACH: Attach = {
|
||||
name: 'BOM-RFQ-2607-501.xlsx',
|
||||
contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
size: 18_432,
|
||||
ref: 'sim://attach/BOM-RFQ-2607-501.xlsx',
|
||||
};
|
||||
|
||||
export function InboundDrill({ nav }: { nav: Nav }) {
|
||||
const channels = useGovChannels();
|
||||
const rows = channels.data?.channels ?? [];
|
||||
// 岗位在出参里是 id;摆一串 UUID 等于没说 —— 换成人读的名字
|
||||
const staffQ = useGovStaff();
|
||||
const positionName = (id: string) =>
|
||||
(staffQ.data?.positions ?? []).find((p) => p.id === id)?.name ?? id;
|
||||
|
||||
const [channelId, setChannelId] = useState('');
|
||||
const [from, setFrom] = useState(SAMPLE.from);
|
||||
const [to, setTo] = useState(SAMPLE.to);
|
||||
const [subject, setSubject] = useState(SAMPLE.subject);
|
||||
const [body, setBody] = useState(SAMPLE.body);
|
||||
const [attachments, setAttachments] = useState<readonly Attach[]>([SAMPLE_ATTACH]);
|
||||
const [result, setResult] = useState<IngestResult | undefined>(undefined);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
// 没选通道时默认落到第一个 —— 让「一键投递」真的一键
|
||||
const effectiveChannel = channelId !== '' ? channelId : (rows[0]?.id ?? '');
|
||||
const channel = rows.find((c) => c.id === effectiveChannel);
|
||||
|
||||
/**
|
||||
* 起单前置自检 —— 把「为什么没起单」提前说出来,而不是让人投完了猜。
|
||||
* 判据与通道/触发器的真实配置同源:通道 id、主题关键词、两个归属键正则。
|
||||
*/
|
||||
const preflight = useMemo(() => {
|
||||
const text = `${subject}\n${body}`;
|
||||
return [
|
||||
{ ok: effectiveChannel === 'ch-rfq-mail', k: '投给公司询价邮箱', v: 'ch-rfq-mail' },
|
||||
{ ok: /询价|RFQ/.test(subject), k: '主题含「询价」或 RFQ', v: '触发器规则' },
|
||||
{ ok: /\bC\d{3}\b/.test(text), k: '含客户码', v: 'C000 形' },
|
||||
{ ok: /RFQ-[A-Z0-9]+/.test(text), k: '含询价单号', v: 'RFQ-XXXX 形' },
|
||||
];
|
||||
}, [effectiveChannel, subject, body]);
|
||||
const allGreen = preflight.every((p) => p.ok);
|
||||
|
||||
const send = useMutation({
|
||||
mutationFn: (mail: InboundMail) =>
|
||||
call<IngestResult>(ingestMailRoute, { params: { channelId: effectiveChannel as never }, body: mail }),
|
||||
onSuccess: (r) => {
|
||||
setResult(r);
|
||||
setError(undefined);
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
setResult(undefined);
|
||||
setError((e as { message?: string }).message ?? '投递失败');
|
||||
},
|
||||
});
|
||||
|
||||
const fire = () => {
|
||||
// messageId 每次不同 —— 同一封信重投在归属解析里会被当同一线程,那是另一回事
|
||||
const stamp = Date.now();
|
||||
send.mutate({
|
||||
messageId: `sim-${stamp}`,
|
||||
from,
|
||||
to: [to],
|
||||
cc: [],
|
||||
subject,
|
||||
body,
|
||||
receivedAt: new Date().toISOString(),
|
||||
attachments: [...attachments],
|
||||
} as InboundMail);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead
|
||||
ico="flask-conical"
|
||||
tone="brand"
|
||||
kicker="联调测试台 · 事件触发"
|
||||
title="入站邮件演练"
|
||||
desc="试跑测的是「调用接口起单」那条路,这一屏测的是另一条:外界来了封信,触发器接不接、起不起单。"
|
||||
chips={
|
||||
<>
|
||||
<St tone={allGreen ? 'ok' : 'warn'} ico={allGreen ? 'circle-check' : 'alert-circle'}>
|
||||
{allGreen ? '起单条件齐' : `差 ${preflight.filter((p) => !p.ok).length} 条`}
|
||||
</St>
|
||||
<St tone="mute" ico="paperclip">
|
||||
附件 {attachments.length}
|
||||
</St>
|
||||
</>
|
||||
}
|
||||
acts={[
|
||||
{
|
||||
label: send.isPending ? '投递中…' : '投递这封信',
|
||||
ico: 'send',
|
||||
primary: true,
|
||||
disabled: send.isPending || effectiveChannel === '',
|
||||
onClick: fire,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Note>
|
||||
走的是与真通道同一条入站链路:通道归一 → 归属解析 → 统一事件流 → 三级消费(任务监听 /
|
||||
触发器 / 消息兜底)。邮件通道是外界,模拟通道是允许的;命中判定与起单都是真的。
|
||||
</Note>
|
||||
|
||||
<Sec ico="mail" title="造一封信" extra="预填的是一键能起单的样例 —— 改坏了下面的自检会告诉你差哪条">
|
||||
<Card ico="inbox" title="信头">
|
||||
{/* `.g-card` 自己不带内距 —— 卡里放自带框的块(Rows / Note)刚好贴边,
|
||||
放裸表单件就得垫一层卡体;console.css 早备好了 `.g-card-b` */}
|
||||
<div className="g-card-b">
|
||||
<Field k="投给哪个通道" hint="触发器的规则里写死了通道 id,投错通道不会命中">
|
||||
<select className="g-select" value={effectiveChannel} onChange={(e) => setChannelId(e.target.value)}>
|
||||
{rows.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name} · {c.address}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
<Field k="发件人">
|
||||
<input className="g-input" value={from} onChange={(e) => setFrom(e.target.value)} />
|
||||
</Field>
|
||||
<Field k="收件地址" {...(channel === undefined ? {} : { hint: `通道地址:${channel.address}` })}>
|
||||
<input className="g-input" value={to} onChange={(e) => setTo(e.target.value)} />
|
||||
</Field>
|
||||
<Field k="主题">
|
||||
<input className="g-input" value={subject} onChange={(e) => setSubject(e.target.value)} />
|
||||
</Field>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card ico="file-text" title="正文">
|
||||
<div className="g-card-b">
|
||||
<textarea className="g-ta" rows={7} value={body} onChange={(e) => setBody(e.target.value)} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
ico="paperclip"
|
||||
title="附件"
|
||||
extra={
|
||||
<Acts
|
||||
align="end"
|
||||
items={[
|
||||
{
|
||||
label: '加一个附件',
|
||||
ico: 'plus',
|
||||
onClick: () =>
|
||||
setAttachments((a) => [
|
||||
...a,
|
||||
{
|
||||
name: `附件-${a.length + 1}.pdf`,
|
||||
contentType: 'application/pdf',
|
||||
size: 1024,
|
||||
ref: `sim://attach/${a.length + 1}`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{attachments.length === 0 ? (
|
||||
<Note>没有附件 —— 这封信也照样能起单(触发器判的是通道与主题,不判附件)。</Note>
|
||||
) : (
|
||||
<Rows
|
||||
items={attachments.map((a) => ({
|
||||
k: a.name,
|
||||
v: `${a.contentType.split('.').pop() ?? a.contentType} · ${a.size} B · ${a.ref}`,
|
||||
mono: true,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<Note>
|
||||
附件目前只走<b>登记</b>:名字、类型、大小与存证指针进事件信封,内容不解析 ——
|
||||
解析 Excel / PDF 是活动的事,活动还没实现。
|
||||
</Note>
|
||||
</Card>
|
||||
|
||||
<Card ico="list-checks" title="起单前置自检" extra="投之前就知道会不会命中,不用投完了猜">
|
||||
<Rows
|
||||
items={preflight.map((p) => ({
|
||||
k: p.k,
|
||||
v: (
|
||||
<St tone={p.ok ? 'ok' : 'warn'} ico={p.ok ? 'circle-check' : 'alert-circle'}>
|
||||
{p.ok ? '齐' : `缺:${p.v}`}
|
||||
</St>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
</Card>
|
||||
</Sec>
|
||||
|
||||
{error !== undefined && (
|
||||
<Note tone="warn">
|
||||
<b>投递失败:</b>
|
||||
{error}
|
||||
</Note>
|
||||
)}
|
||||
|
||||
{result !== undefined && (
|
||||
<Sec ico="git-merge" title="这封信的下场" extra="归属判到谁 · 谁接了 · 没人接落哪儿">
|
||||
<Card ico="fingerprint" title="归属解析" extra="匹配次序确定、逐级短路">
|
||||
<Rows
|
||||
items={[
|
||||
{ k: '事件 id', v: result.eventId, mono: true },
|
||||
...(result.resolution.outcome === 'owned'
|
||||
? [
|
||||
{ k: '判定', v: '有主' },
|
||||
{ k: '命中哪一级', v: RULE_LABEL[result.resolution.rule] ?? result.resolution.rule },
|
||||
{ k: '归到任务', v: result.resolution.taskId, mono: true },
|
||||
]
|
||||
: [
|
||||
{ k: '判定', v: '无主' },
|
||||
{ k: '为什么', v: REASON_LABEL[result.resolution.reason] ?? result.resolution.reason },
|
||||
...(result.resolution.fallbackPosition === undefined
|
||||
? []
|
||||
: [{ k: '默认认领岗位', v: positionName(result.resolution.fallbackPosition) }]),
|
||||
]),
|
||||
]}
|
||||
/>
|
||||
{result.resolution.outcome === 'unowned' && (
|
||||
<Note>
|
||||
无主不是错:新来的询价本来就没有在途任务可归。<b>无主入站不写台账</b>,只入事件流,
|
||||
由触发器决定要不要起单 —— 下面那格就是它的裁决。
|
||||
</Note>
|
||||
)}
|
||||
</Card>
|
||||
<Card ico="split" title="三级消费">
|
||||
<Rows
|
||||
items={[
|
||||
{ k: '命中任务监听', v: String(result.listenersHit) },
|
||||
{ k: '命中触发器', v: String(result.triggersHit) },
|
||||
{ k: '落消息兜底', v: result.fellBackToMessage ? '是' : '否' },
|
||||
]}
|
||||
/>
|
||||
{result.triggersHit > 0 ? (
|
||||
<Note tone="ok">
|
||||
触发器命中 {result.triggersHit} 个 —— 已按调起规则起单。去运营中心 · 任务看在途,
|
||||
或去工作台看落到谁工位上。
|
||||
</Note>
|
||||
) : result.listenersHit > 0 ? (
|
||||
<Note tone="ok">这封信被在途任务的监听接走了 —— 那一单的完成条件因此满足。</Note>
|
||||
) : (
|
||||
<Note tone="warn">
|
||||
没有任何监听或触发器接它,已落消息兜底 —— 认领岗位的人会在「消息」里看到它。
|
||||
想起单就回上面看自检差哪条。
|
||||
</Note>
|
||||
)}
|
||||
</Card>
|
||||
<Acts
|
||||
items={[
|
||||
{ label: '去运营中心看在途', ico: 'activity', onClick: () => nav.jump('tasks', 'list') },
|
||||
{ label: '再投一封', ico: 'rotate-ccw', primary: true, onClick: fire },
|
||||
]}
|
||||
/>
|
||||
</Sec>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,321 +1,50 @@
|
||||
/**
|
||||
* 联调测试台 · 入站邮件 —— 把定义**试着跑一遍**。
|
||||
* 联调测试台 —— 把定义**试着跑一遍**。
|
||||
*
|
||||
* 造一封入站邮件(可带附件)投进通道,走的是**与真通道同一条**入站归一链路
|
||||
* (`POST /api/ingest/channel/:id/mail` → 归属解析 → 统一事件流 → 三级消费)。
|
||||
* 邮件通道是外界,模拟通道是允许的(README:mock 只许出现在外界);
|
||||
* 系统内部机制这里一行都不 mock —— 命中判定、起单、消息兜底全是真的。
|
||||
* 测试台是**后端检测活动与流程**的地方,不是代人干活的地方:在这儿装配并起单,
|
||||
* 真实的任务照旧落到被指派人的工作台上。所以它只管两件事:
|
||||
* **把流跑起来** + **看穿它怎么跑的**。
|
||||
*
|
||||
* 这一屏要回答的是三个问题,所以结果就摆这三样:
|
||||
* · 归属判到谁了(哪一级、认领岗位)
|
||||
* · 谁接了(任务监听 / 触发器,各命中几个)
|
||||
* · 没人接的话落哪儿(消息兜底)
|
||||
* 一条流有两种起法,对应两个模式 —— 两条路都得能试:
|
||||
* · 仿真试跑:直接调流程包的**调用接口**起单(触发器起单走的也是这个口),带节点指派;
|
||||
* · 入站邮件演练:从**外界**推一封信进来,看归属解析怎么判、哪个触发器接、有没有起单。
|
||||
*
|
||||
* 模式不做成区页签(区页签由壳层的 `TABS` 定,测试台只占一格),做成本屏的一个控件 ——
|
||||
* 它选的是「用哪种刺激」,不是「看哪个维度」。
|
||||
*/
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import type { IngestMailOutput, InboundMail } from '@contracts';
|
||||
import { ingestMailRoute } from '@contracts';
|
||||
import { call } from '@web-shared/typed-fetch.ts';
|
||||
import { useGovChannels, useGovStaff } from '@web-shared/gov/gov-api.ts';
|
||||
import { Acts, Card, Field, Note, PageHead, Rows, Sec, St } from '@web-shared/gov/primitives.tsx';
|
||||
import { useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import type { Nav } from '@web-shared/gov/gov-route.ts';
|
||||
import { InboundDrill } from './inbound.tsx';
|
||||
import { SimulateRun } from './simulate.tsx';
|
||||
|
||||
/*
|
||||
* 出参形状**直接用契约类型**,不手搓。
|
||||
* 我手搓过一次(`level` / `kind` / `position` / `rationale`),四个字段名全是编的 ——
|
||||
* 页面上就摆出两个永远显示「—」的格子。归属解析真实是按 `outcome` 判别的联合:
|
||||
* owned 给 `rule` + `taskId`,unowned 给 `reason` + 可选的 `fallbackPosition`。
|
||||
*/
|
||||
type IngestResult = IngestMailOutput;
|
||||
type Mode = 'run' | 'mail';
|
||||
|
||||
const RULE_LABEL: Readonly<Record<string, string>> = {
|
||||
thread: '①线程精确 —— 回信落在原线程上',
|
||||
'listener-key': '②关联键命中在途任务的监听',
|
||||
'address-window': '③地址 + 时间窗对上了',
|
||||
};
|
||||
|
||||
const REASON_LABEL: Readonly<Record<string, string>> = {
|
||||
'no-match': '三级都没对上',
|
||||
ambiguous: '对上多条,有歧义 —— 宁交人不错投',
|
||||
'extract-failed': '归属键抽不出来',
|
||||
};
|
||||
|
||||
type Attach = { name: string; contentType: string; size: number; ref: string };
|
||||
|
||||
/**
|
||||
* 样例邮件 —— 一键就能起单的那一封。
|
||||
*
|
||||
* 三件事都得对,少一件就不起单(这也正是这一屏要让人看见的):
|
||||
* ① 投给「公司询价邮箱」这个通道(触发器规则写死了 `channelId = "ch-rfq-mail"`)
|
||||
* ② 主题含「询价」或 RFQ(触发器规则的第二半)
|
||||
* ③ 正文或主题里有客户码 `C\d{3}` 与单号 `RFQ-[A-Z0-9]+` —— 通道的归属键提取规则按正则抽,
|
||||
* 抽不出来就没有关联键,起单装配拿不到 customerCode / rfqRef
|
||||
*/
|
||||
const SAMPLE = {
|
||||
from: 'buyer@sz-precision.com',
|
||||
to: 'rfq@we.com',
|
||||
subject: '【询价】RFQ-2607-501 精密车削件 6 项',
|
||||
body: [
|
||||
'你好,',
|
||||
'',
|
||||
'我方客户码 C014,本次询价单号 RFQ-2607-501,附件是 BOM 清单(6 项)。',
|
||||
'月需约 2000 套,请两周内回价。',
|
||||
'',
|
||||
'深圳精密件采购部',
|
||||
].join('\n'),
|
||||
};
|
||||
|
||||
const SAMPLE_ATTACH: Attach = {
|
||||
name: 'BOM-RFQ-2607-501.xlsx',
|
||||
contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
size: 18_432,
|
||||
ref: 'sim://attach/BOM-RFQ-2607-501.xlsx',
|
||||
};
|
||||
|
||||
export function TestbedHome({ nav }: { tab: string; nav: Nav }) {
|
||||
const channels = useGovChannels();
|
||||
const rows = channels.data?.channels ?? [];
|
||||
// 岗位在出参里是 id;摆一串 UUID 等于没说 —— 换成人读的名字
|
||||
const staffQ = useGovStaff();
|
||||
const positionName = (id: string) =>
|
||||
(staffQ.data?.positions ?? []).find((p) => p.id === id)?.name ?? id;
|
||||
|
||||
const [channelId, setChannelId] = useState('');
|
||||
const [from, setFrom] = useState(SAMPLE.from);
|
||||
const [to, setTo] = useState(SAMPLE.to);
|
||||
const [subject, setSubject] = useState(SAMPLE.subject);
|
||||
const [body, setBody] = useState(SAMPLE.body);
|
||||
const [attachments, setAttachments] = useState<readonly Attach[]>([SAMPLE_ATTACH]);
|
||||
const [result, setResult] = useState<IngestResult | undefined>(undefined);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
// 没选通道时默认落到第一个 —— 让「一键投递」真的一键
|
||||
const effectiveChannel = channelId !== '' ? channelId : (rows[0]?.id ?? '');
|
||||
const channel = rows.find((c) => c.id === effectiveChannel);
|
||||
|
||||
/**
|
||||
* 起单前置自检 —— 把「为什么没起单」提前说出来,而不是让人投完了猜。
|
||||
* 判据与通道/触发器的真实配置同源:通道 id、主题关键词、两个归属键正则。
|
||||
*/
|
||||
const preflight = useMemo(() => {
|
||||
const text = `${subject}\n${body}`;
|
||||
return [
|
||||
{ ok: effectiveChannel === 'ch-rfq-mail', k: '投给公司询价邮箱', v: 'ch-rfq-mail' },
|
||||
{ ok: /询价|RFQ/.test(subject), k: '主题含「询价」或 RFQ', v: '触发器规则' },
|
||||
{ ok: /\bC\d{3}\b/.test(text), k: '含客户码', v: 'C000 形' },
|
||||
{ ok: /RFQ-[A-Z0-9]+/.test(text), k: '含询价单号', v: 'RFQ-XXXX 形' },
|
||||
];
|
||||
}, [effectiveChannel, subject, body]);
|
||||
const allGreen = preflight.every((p) => p.ok);
|
||||
|
||||
const send = useMutation({
|
||||
mutationFn: (mail: InboundMail) =>
|
||||
call<IngestResult>(ingestMailRoute, { params: { channelId: effectiveChannel as never }, body: mail }),
|
||||
onSuccess: (r) => {
|
||||
setResult(r);
|
||||
setError(undefined);
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
setResult(undefined);
|
||||
setError((e as { message?: string }).message ?? '投递失败');
|
||||
},
|
||||
});
|
||||
|
||||
const fire = () => {
|
||||
// messageId 每次不同 —— 同一封信重投在归属解析里会被当同一线程,那是另一回事
|
||||
const stamp = Date.now();
|
||||
send.mutate({
|
||||
messageId: `sim-${stamp}`,
|
||||
from,
|
||||
to: [to],
|
||||
cc: [],
|
||||
subject,
|
||||
body,
|
||||
receivedAt: new Date().toISOString(),
|
||||
attachments: [...attachments],
|
||||
} as InboundMail);
|
||||
};
|
||||
const MODES: ReadonlyArray<{ k: Mode; label: string; ico: string }> = [
|
||||
{ k: 'run', label: '仿真试跑', ico: 'flask-conical' },
|
||||
{ k: 'mail', label: '入站邮件演练', ico: 'mail' },
|
||||
];
|
||||
|
||||
export function TestbedHome({ nav }: { tab: string; nav: Nav }): ReactNode {
|
||||
const [mode, setMode] = useState<Mode>('run');
|
||||
return (
|
||||
<>
|
||||
<PageHead
|
||||
ico="flask-conical"
|
||||
tone="brand"
|
||||
kicker="联调测试台"
|
||||
title="入站邮件"
|
||||
chips={
|
||||
<>
|
||||
<St tone={allGreen ? 'ok' : 'warn'} ico={allGreen ? 'circle-check' : 'alert-circle'}>
|
||||
{allGreen ? '起单条件齐' : `差 ${preflight.filter((p) => !p.ok).length} 条`}
|
||||
</St>
|
||||
<St tone="mute" ico="paperclip">
|
||||
附件 {attachments.length}
|
||||
</St>
|
||||
</>
|
||||
}
|
||||
acts={[
|
||||
{
|
||||
label: send.isPending ? '投递中…' : '投递这封信',
|
||||
ico: 'send',
|
||||
primary: true,
|
||||
disabled: send.isPending || effectiveChannel === '',
|
||||
onClick: fire,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Note>
|
||||
走的是与真通道同一条入站链路:通道归一 → 归属解析 → 统一事件流 → 三级消费(任务监听 /
|
||||
触发器 / 消息兜底)。邮件通道是外界,模拟通道是允许的;命中判定与起单都是真的。
|
||||
</Note>
|
||||
|
||||
<Sec ico="mail" title="造一封信" extra="预填的是一键能起单的样例 —— 改坏了下面的自检会告诉你差哪条">
|
||||
<Card ico="inbox" title="信头">
|
||||
<Field k="投给哪个通道" hint="触发器的规则里写死了通道 id,投错通道不会命中">
|
||||
<select value={effectiveChannel} onChange={(e) => setChannelId(e.target.value)}>
|
||||
{rows.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name} · {c.address}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
<Field k="发件人">
|
||||
<input value={from} onChange={(e) => setFrom(e.target.value)} />
|
||||
</Field>
|
||||
<Field k="收件地址" {...(channel === undefined ? {} : { hint: `通道地址:${channel.address}` })}>
|
||||
<input value={to} onChange={(e) => setTo(e.target.value)} />
|
||||
</Field>
|
||||
<Field k="主题">
|
||||
<input value={subject} onChange={(e) => setSubject(e.target.value)} />
|
||||
</Field>
|
||||
</Card>
|
||||
|
||||
<Card ico="file-text" title="正文">
|
||||
<textarea rows={7} value={body} onChange={(e) => setBody(e.target.value)} />
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
ico="paperclip"
|
||||
title="附件"
|
||||
extra={
|
||||
<Acts
|
||||
align="end"
|
||||
items={[
|
||||
{
|
||||
label: '加一个附件',
|
||||
ico: 'plus',
|
||||
onClick: () =>
|
||||
setAttachments((a) => [
|
||||
...a,
|
||||
{
|
||||
name: `附件-${a.length + 1}.pdf`,
|
||||
contentType: 'application/pdf',
|
||||
size: 1024,
|
||||
ref: `sim://attach/${a.length + 1}`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{attachments.length === 0 ? (
|
||||
<Note>没有附件 —— 这封信也照样能起单(触发器判的是通道与主题,不判附件)。</Note>
|
||||
) : (
|
||||
<Rows
|
||||
items={attachments.map((a) => ({
|
||||
k: a.name,
|
||||
v: `${a.contentType.split('.').pop() ?? a.contentType} · ${a.size} B · ${a.ref}`,
|
||||
mono: true,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<Note>
|
||||
附件目前只走<b>登记</b>:名字、类型、大小与存证指针进事件信封,内容不解析 ——
|
||||
解析 Excel / PDF 是活动的事,活动还没实现。
|
||||
</Note>
|
||||
</Card>
|
||||
|
||||
<Card ico="list-checks" title="起单前置自检" extra="投之前就知道会不会命中,不用投完了猜">
|
||||
<Rows
|
||||
items={preflight.map((p) => ({
|
||||
k: p.k,
|
||||
v: (
|
||||
<St tone={p.ok ? 'ok' : 'warn'} ico={p.ok ? 'circle-check' : 'alert-circle'}>
|
||||
{p.ok ? '齐' : `缺:${p.v}`}
|
||||
</St>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
</Card>
|
||||
</Sec>
|
||||
|
||||
{error !== undefined && (
|
||||
<Note tone="warn">
|
||||
<b>投递失败:</b>
|
||||
{error}
|
||||
</Note>
|
||||
)}
|
||||
|
||||
{result !== undefined && (
|
||||
<Sec ico="git-merge" title="这封信的下场" extra="归属判到谁 · 谁接了 · 没人接落哪儿">
|
||||
<Card ico="fingerprint" title="归属解析" extra="匹配次序确定、逐级短路">
|
||||
<Rows
|
||||
items={[
|
||||
{ k: '事件 id', v: result.eventId, mono: true },
|
||||
...(result.resolution.outcome === 'owned'
|
||||
? [
|
||||
{ k: '判定', v: '有主' },
|
||||
{ k: '命中哪一级', v: RULE_LABEL[result.resolution.rule] ?? result.resolution.rule },
|
||||
{ k: '归到任务', v: result.resolution.taskId, mono: true },
|
||||
]
|
||||
: [
|
||||
{ k: '判定', v: '无主' },
|
||||
{ k: '为什么', v: REASON_LABEL[result.resolution.reason] ?? result.resolution.reason },
|
||||
...(result.resolution.fallbackPosition === undefined
|
||||
? []
|
||||
: [{ k: '默认认领岗位', v: positionName(result.resolution.fallbackPosition) }]),
|
||||
]),
|
||||
]}
|
||||
/>
|
||||
{result.resolution.outcome === 'unowned' && (
|
||||
<Note>
|
||||
无主不是错:新来的询价本来就没有在途任务可归。<b>无主入站不写台账</b>,只入事件流,
|
||||
由触发器决定要不要起单 —— 下面那格就是它的裁决。
|
||||
</Note>
|
||||
)}
|
||||
</Card>
|
||||
<Card ico="split" title="三级消费">
|
||||
<Rows
|
||||
items={[
|
||||
{ k: '命中任务监听', v: String(result.listenersHit) },
|
||||
{ k: '命中触发器', v: String(result.triggersHit) },
|
||||
{ k: '落消息兜底', v: result.fellBackToMessage ? '是' : '否' },
|
||||
]}
|
||||
/>
|
||||
{result.triggersHit > 0 ? (
|
||||
<Note tone="ok">
|
||||
触发器命中 {result.triggersHit} 个 —— 已按调起规则起单。去运营中心 · 任务看在途,
|
||||
或去工作台看落到谁工位上。
|
||||
</Note>
|
||||
) : result.listenersHit > 0 ? (
|
||||
<Note tone="ok">这封信被在途任务的监听接走了 —— 那一单的完成条件因此满足。</Note>
|
||||
) : (
|
||||
<Note tone="warn">
|
||||
没有任何监听或触发器接它,已落消息兜底 —— 认领岗位的人会在「消息」里看到它。
|
||||
想起单就回上面看自检差哪条。
|
||||
</Note>
|
||||
)}
|
||||
</Card>
|
||||
<Acts
|
||||
items={[
|
||||
{ label: '去运营中心看在途', ico: 'activity', onClick: () => nav.jump('tasks', 'list') },
|
||||
{ label: '再投一封', ico: 'rotate-ccw', primary: true, onClick: fire },
|
||||
]}
|
||||
/>
|
||||
</Sec>
|
||||
)}
|
||||
<div className="g-tbmode">
|
||||
<em>试法</em>
|
||||
{MODES.map((m) => (
|
||||
<button
|
||||
key={m.k}
|
||||
className={'g-tbmode-b' + (mode === m.k ? ' on' : '')}
|
||||
aria-pressed={mode === m.k}
|
||||
onClick={() => setMode(m.k)}
|
||||
>
|
||||
<Ico name={m.ico} s={12} />
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{mode === 'run' ? <SimulateRun nav={nav} /> : <InboundDrill nav={nav} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 试跑观测取数 —— 与 `shared/gov/gov-api.ts` 分开只为一件事:**这两把查询要轮询**。
|
||||
* 治理台其余画面是快照,取一次就够;观测态盯的是一条**正在跑**的流,不轮询就看不见它跑。
|
||||
* 流一到终态就停轮询 —— 已经不动的东西没必要每两秒问一遍。
|
||||
*/
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import type { UseQueryResult } from '@tanstack/react-query';
|
||||
import type { GovWorkflowOutput } from '@contracts';
|
||||
import { govWorkflowRoute, traceOfWorkflowRoute } from '@contracts';
|
||||
import { call } from '@web-shared/typed-fetch.ts';
|
||||
|
||||
/**
|
||||
* span 的形状**不手搓**。
|
||||
*
|
||||
* 契约在 `governance.ts` 里给十几个出参起了名(`Gov*Output`),trace 不在其列;
|
||||
* 而这一屏从前正是栽在手搓出参上(编出四个不存在的字段名,页面上摆出永远显示「—」的格子)。
|
||||
* 所以这里不照抄形状,改从 schema 自己的 `parse` 返回值上把类型接出来:
|
||||
* 契约一改,这里编译期就跟着变 —— 与 `z.infer` 等价,又不必让前端 import zod。
|
||||
*/
|
||||
type Parsed<S> = S extends { parse: (data: unknown) => infer O } ? O : never;
|
||||
|
||||
export type TraceOutput = Parsed<typeof traceOfWorkflowRoute.output>;
|
||||
export type TraceSpan = TraceOutput['spans'][number];
|
||||
export type SpanKind = TraceSpan['kind'];
|
||||
|
||||
/** 轮询间隔:人眼看得出「在动」,又不至于把接口打穿 */
|
||||
const LIVE_MS = 2000;
|
||||
|
||||
/** 一条流的全链 span(树由 `parentId` 拼,呈现层自己拼) */
|
||||
export const useRunTrace = (id: string | undefined, live: boolean): UseQueryResult<TraceOutput> =>
|
||||
useQuery({
|
||||
queryKey: ['gov', 'testbed', 'trace', id],
|
||||
queryFn: () => call<TraceOutput>(traceOfWorkflowRoute, { params: { id: id! } }),
|
||||
enabled: id !== undefined,
|
||||
refetchInterval: live ? LIVE_MS : false,
|
||||
});
|
||||
|
||||
/**
|
||||
* 工作流态 + 流程包定义 + 节点实例 —— 判「谁在跑」以它为准,不以 span 为准。
|
||||
* 停不停轮询由**它自己的出参**说了算(轮询判据读 `query.state.data`),
|
||||
* 不需要调用方先拿到状态再回头传进来 —— 那是个绕不开的环。
|
||||
*/
|
||||
export const useRunWorkflow = (id: string | undefined): UseQueryResult<GovWorkflowOutput> =>
|
||||
useQuery({
|
||||
queryKey: ['gov', 'testbed', 'workflow', id],
|
||||
queryFn: () => call<GovWorkflowOutput>(govWorkflowRoute, { params: { id: id! } }),
|
||||
enabled: id !== undefined,
|
||||
refetchInterval: (q) => (isLive(q.state.data?.workflow.state) ? LIVE_MS : false),
|
||||
});
|
||||
|
||||
/** 还在动的两态:running(有任务在跑)/ waiting(卡在人身上) */
|
||||
export const isLive = (state: string | undefined): boolean =>
|
||||
state === undefined || state === 'running' || state === 'waiting';
|
||||
@@ -0,0 +1,508 @@
|
||||
/**
|
||||
* 仿真试跑台 —— 装配一次试跑 → 起单 → 看穿全程。
|
||||
*
|
||||
* 这里检测的是**后端的活动与流程**,不是这一屏自己:起单走的是流程包的调用接口
|
||||
* (`POST /api/gov/testbed/run`),与触发器起单同一条路;起出来的是**真任务**,
|
||||
* 照旧落到被指派人的工作台上。测试台不代答 —— 它只管两件事:
|
||||
* ① 把流跑起来(装配态) ② 看穿它怎么跑的(观测态)
|
||||
*/
|
||||
import { useMemo, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import type { ProcessNode, ProcessPackage } from '@contracts';
|
||||
import { TERMINAL_STATE_LABEL, WORKFLOW_STATE_LABEL, testRunRoute } from '@contracts';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import { call } from '@web-shared/typed-fetch.ts';
|
||||
import { useGovPackages, useGovStaff } from '@web-shared/gov/gov-api.ts';
|
||||
import { Acts, Field, Note, PageHead, QueryGate, St } from '@web-shared/gov/primitives.tsx';
|
||||
import type { Nav } from '@web-shared/gov/gov-route.ts';
|
||||
import { CallForm, buildCallData, callFieldsOf, placeholderValues } from './call-form.tsx';
|
||||
import type { CallValues } from './call-form.tsx';
|
||||
import { isLive, useRunTrace, useRunWorkflow } from './run-api.ts';
|
||||
import { TraceSheet } from './trace-sheet.tsx';
|
||||
|
||||
type RunOutput = { workflowId: string; state: string };
|
||||
|
||||
/** 只有活动点与审批点会解析负责人 —— 起点终点没有「派给谁」这回事 */
|
||||
const isAssignable = (n: ProcessNode): boolean => n.kind === 'activity' || n.kind === 'approval';
|
||||
|
||||
const NODE_KIND_LABEL: Readonly<Record<string, string>> = {
|
||||
activity: '活动',
|
||||
approval: '审批',
|
||||
start: '起点',
|
||||
end: '终点',
|
||||
};
|
||||
|
||||
function Sheet({
|
||||
code,
|
||||
title,
|
||||
ico,
|
||||
extra,
|
||||
tight,
|
||||
children,
|
||||
}: {
|
||||
code: string;
|
||||
title: string;
|
||||
ico: string;
|
||||
extra?: ReactNode;
|
||||
tight?: boolean;
|
||||
children: ReactNode;
|
||||
}): ReactNode {
|
||||
return (
|
||||
<div className="g-sheet">
|
||||
<div className="g-sheet-h">
|
||||
<Ico name={ico} s={12} />
|
||||
{code} — {title}
|
||||
{extra !== undefined && <span className="x">{extra}</span>}
|
||||
</div>
|
||||
<div className={'g-sheet-b' + (tight === true ? ' tight' : '')}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
|
||||
const pkgQ = useGovPackages();
|
||||
const staffQ = useGovStaff();
|
||||
|
||||
/** 只列有生效版的:同一个包可能存着多版,能起单的只有 `active` 那一版 */
|
||||
const livePkgs = useMemo<ProcessPackage[]>(
|
||||
() => (pkgQ.data?.packages ?? []).filter((p) => p.state === 'active'),
|
||||
[pkgQ.data],
|
||||
);
|
||||
const staff = useMemo(() => (staffQ.data?.staff ?? []).filter((s) => s.state === 'active'), [staffQ.data]);
|
||||
const staffName = (id: string): string => staff.find((s) => s.id === id)?.name ?? id;
|
||||
|
||||
const [pickedId, setPicked] = useState('');
|
||||
const [subject, setSubject] = useState('测试台试跑');
|
||||
const [values, setValues] = useState<CallValues>({});
|
||||
const [assignments, setAssignments] = useState<Readonly<Record<string, string>>>({});
|
||||
const [workflowId, setWorkflowId] = useState<string | undefined>(undefined);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
// 没选就落到第一个有生效版的包 —— 常见情形只有一个包,不该逼人先点一下
|
||||
const pkg = livePkgs.find((p) => p.id === pickedId) ?? livePkgs[0];
|
||||
const fields = useMemo(() => callFieldsOf(pkg?.callInterface.input), [pkg]);
|
||||
const nodes = useMemo(() => (pkg?.nodes ?? []).filter(isAssignable), [pkg]);
|
||||
const built = useMemo(() => buildCallData(fields, values), [fields, values]);
|
||||
const ready = pkg !== undefined && subject.trim() !== '' && built.errors.length === 0;
|
||||
|
||||
const run = useMutation({
|
||||
mutationFn: (body: { packageId: string; subject: string; data: Record<string, unknown>; assignments: Record<string, string> }) =>
|
||||
call<RunOutput>(testRunRoute, { body }),
|
||||
onSuccess: (r) => {
|
||||
setWorkflowId(r.workflowId);
|
||||
setError(undefined);
|
||||
},
|
||||
// 后端的判词照抄:「输入不合调用接口契约」「流程包无生效版本」都是要人改配置的话,不该被我改写
|
||||
onError: (e: unknown) => setError((e as { message?: string }).message ?? '起单失败'),
|
||||
});
|
||||
|
||||
const fire = (): void => {
|
||||
if (pkg === undefined) return;
|
||||
run.mutate({
|
||||
packageId: pkg.id,
|
||||
subject: subject.trim(),
|
||||
data: built.data,
|
||||
assignments: Object.fromEntries(Object.entries(assignments).filter(([, v]) => v !== '')),
|
||||
});
|
||||
};
|
||||
|
||||
if (workflowId !== undefined) {
|
||||
return (
|
||||
<Observe
|
||||
id={workflowId}
|
||||
staffName={staffName}
|
||||
nav={nav}
|
||||
onBack={() => {
|
||||
setWorkflowId(undefined);
|
||||
run.reset();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pinned = Object.values(assignments).filter((v) => v !== '').length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead
|
||||
ico="flask-conical"
|
||||
tone="brand"
|
||||
kicker="联调测试台 · 装配态"
|
||||
title="仿真试跑"
|
||||
desc="装一次调用、把流真起起来,然后看穿它怎么跑。任务照旧落到被指派人的工作台 —— 测试台不代答。"
|
||||
chips={
|
||||
<>
|
||||
<St tone={pkg === undefined ? 'warn' : 'ok'} ico={pkg === undefined ? 'alert-circle' : 'circle-check'}>
|
||||
{pkg === undefined ? '没有可起单的流程包' : `${pkg.name} v${pkg.version}`}
|
||||
</St>
|
||||
<St tone="mute" ico="user-check">
|
||||
指派 {pinned}/{nodes.length}
|
||||
</St>
|
||||
</>
|
||||
}
|
||||
acts={[
|
||||
{
|
||||
label: run.isPending ? '起单中…' : '起单试跑',
|
||||
ico: 'play',
|
||||
primary: true,
|
||||
disabled: !ready || run.isPending,
|
||||
onClick: fire,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="g-tb">
|
||||
<QueryGate query={pkgQ}>
|
||||
{livePkgs.length === 0 ? (
|
||||
<div className="g-sheet">
|
||||
<div className="g-tb-empty">
|
||||
<Ico name="scan" s={26} />
|
||||
<b>没有可起单的流程包</b>
|
||||
<p>
|
||||
试跑要有一个<b>生效版</b>才起得来。去「流程包」里保存一版 —— 存得进去的版本就是生效的。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 一张装配单读下来就是一次试跑的次序:选包 → 填参 → 派人 → 起单 */}
|
||||
<div className="g-tb-rig">
|
||||
<Sheet code="PKG" title="流程包" ico="workflow" extra={`${livePkgs.length} 个生效`}>
|
||||
<div className="g-tbpkgs">
|
||||
{livePkgs.map((p) => (
|
||||
<button
|
||||
key={p.id}
|
||||
className={'g-tbpkg' + (p.id === pkg?.id ? ' on' : '')}
|
||||
onClick={() => {
|
||||
setPicked(p.id);
|
||||
setValues({});
|
||||
setAssignments({});
|
||||
}}
|
||||
>
|
||||
<b>{p.name}</b>
|
||||
<span className="id">
|
||||
{p.id}@v{p.version}
|
||||
</span>
|
||||
<span className="cnt">
|
||||
<span>节点 {p.nodes.length}</span>
|
||||
<span>边 {p.edges.length}</span>
|
||||
<span>入参 {callFieldsOf(p.callInterface.input).length}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Note>只列有生效版的包。在途的流按起单时那一版跑完,改包不影响它们。</Note>
|
||||
</Sheet>
|
||||
|
||||
<Sheet
|
||||
code="ARG"
|
||||
title="调用参数"
|
||||
ico="sliders-horizontal"
|
||||
extra={pkg === undefined ? '' : `按 ${pkg.id} 的调用接口`}
|
||||
>
|
||||
{fields.length === 0 ? (
|
||||
<Note>这个包的调用接口没声明入参 —— 直接起单即可。</Note>
|
||||
) : (
|
||||
<>
|
||||
<div className="g-tbargs">
|
||||
<CallForm
|
||||
fields={fields}
|
||||
values={values}
|
||||
onChange={(k, v) => setValues((prev) => ({ ...prev, [k]: v }))}
|
||||
/>
|
||||
</div>
|
||||
<Acts
|
||||
align="end"
|
||||
items={[
|
||||
{ label: '填占位值', ico: 'sparkles', onClick: () => setValues(placeholderValues(fields)) },
|
||||
{ label: '清空', ico: 'trash-2', onClick: () => setValues({}) },
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Sheet>
|
||||
</div>
|
||||
|
||||
<Sheet code="ASN" title="节点指派" ico="user-check" extra={`${nodes.length} 个可指派 · 已定 ${pinned}`}>
|
||||
{/* 分两栏排:一条流七八个节点,单栏会把这张卡拉得比整块装配单还长 */}
|
||||
<div className="g-asn-2">
|
||||
{[nodes.slice(0, Math.ceil(nodes.length / 2)), nodes.slice(Math.ceil(nodes.length / 2))]
|
||||
.filter((half) => half.length > 0)
|
||||
.map((half, i) => (
|
||||
<div key={i} className="g-asn">
|
||||
<div className="g-asn-h">
|
||||
<span>节点</span>
|
||||
<span>类型</span>
|
||||
<span>名称</span>
|
||||
<span>派给谁</span>
|
||||
</div>
|
||||
{half.map((n) => (
|
||||
<div key={n.id} className={'g-asn-r' + ((assignments[n.id] ?? '') === '' ? '' : ' pinned')}>
|
||||
<span className="nid">{n.id}</span>
|
||||
<span className="kd">{NODE_KIND_LABEL[n.kind] ?? n.kind}</span>
|
||||
<span className="lb">{n.label}</span>
|
||||
<select
|
||||
className="g-select"
|
||||
value={assignments[n.id] ?? ''}
|
||||
onChange={(e) => setAssignments((prev) => ({ ...prev, [n.id]: e.target.value }))}
|
||||
>
|
||||
<option value="">照旧轮值</option>
|
||||
{staff.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name} · {s.position.code}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Note>
|
||||
留空即<b>照旧轮值</b>(有员工组按组轮,没有按全员最闲者先)。指派只在那个人<b>接得了这个节点</b>
|
||||
时生效,接不了会退回轮值 —— 实际受理人以 TRACE 里那一行为准。
|
||||
</Note>
|
||||
</Sheet>
|
||||
|
||||
<Sheet code="RUN" title="起单" ico="play" extra={ready ? '装配齐了' : '还差料'}>
|
||||
<div className="g-tbrun">
|
||||
<div className="g-tb-f">
|
||||
<Field k="试跑标题" hint="落在工作流上的题,观测态与运营中心都按它认这一单">
|
||||
<input className="g-input" value={subject} onChange={(e) => setSubject(e.target.value)} />
|
||||
</Field>
|
||||
</div>
|
||||
<Acts
|
||||
items={[
|
||||
{
|
||||
label: run.isPending ? '起单中…' : '起单试跑',
|
||||
ico: 'play',
|
||||
primary: true,
|
||||
disabled: !ready || run.isPending,
|
||||
onClick: fire,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{built.errors.length > 0 && (
|
||||
<Note tone="warn">
|
||||
<b>还差 {built.errors.length} 项才起得来:</b>
|
||||
{built.errors.join(' · ')}
|
||||
</Note>
|
||||
)}
|
||||
{error !== undefined && (
|
||||
<Note tone="warn">
|
||||
<b>没起成:</b>
|
||||
{error}
|
||||
</Note>
|
||||
)}
|
||||
</Sheet>
|
||||
</>
|
||||
)}
|
||||
</QueryGate>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── 观测态 ─────────────────────────────────────────────────────────── */
|
||||
|
||||
function Observe({
|
||||
id,
|
||||
staffName,
|
||||
nav,
|
||||
onBack,
|
||||
}: {
|
||||
id: string;
|
||||
staffName: (sid: string) => string;
|
||||
nav: Nav;
|
||||
onBack: () => void;
|
||||
}): ReactNode {
|
||||
const wf = useRunWorkflow(id);
|
||||
const state = wf.data?.workflow.state;
|
||||
// 到终态就停轮询:已经不动的东西没必要每两秒问一遍
|
||||
const live = isLive(state);
|
||||
const trQ = useRunTrace(id, live);
|
||||
|
||||
const spans = trQ.data?.spans ?? [];
|
||||
const w = wf.data;
|
||||
const nodeLabel = (nid: string): string => w?.pkg.nodes.find((n) => n.id === nid)?.label ?? nid;
|
||||
/** 节点实例出参里没有受理人,受理人只在 span 的 attributes 上 —— 从 TRACE 反查 */
|
||||
const assigneeOfNode = (nid: string): string | undefined => {
|
||||
const s = spans.find((x) => x.kind === 'node' && x.nodeId === nid);
|
||||
const a = s?.attributes?.['assigneeId'];
|
||||
return typeof a === 'string' ? staffName(a) : undefined;
|
||||
};
|
||||
|
||||
const started = w === undefined ? undefined : new Date(w.workflow.startedAt);
|
||||
const refresh = (): void => {
|
||||
void wf.refetch();
|
||||
void trQ.refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead
|
||||
ico="activity"
|
||||
tone={state === 'abnormal' ? 'danger' : state === 'completed' ? 'ok' : 'brand'}
|
||||
kicker="联调测试台 · 观测态"
|
||||
title={w?.workflow.subject ?? '试跑中'}
|
||||
desc="流已经起了。下面这三样看穿它:全链 TRACE 看它怎么跑,节点实例看它跑到哪,派工带看它把活派给了谁。"
|
||||
chips={
|
||||
<>
|
||||
<St
|
||||
tone={state === 'abnormal' ? 'danger' : state === 'completed' ? 'ok' : 'brand'}
|
||||
ico={state === 'completed' ? 'circle-check' : state === 'abnormal' ? 'alert-triangle' : 'radio'}
|
||||
>
|
||||
{state === undefined ? '取数中' : (WORKFLOW_STATE_LABEL[state] ?? state)}
|
||||
</St>
|
||||
<St tone="mute" ico="hash">
|
||||
{id.slice(0, 8)}
|
||||
</St>
|
||||
{live && (
|
||||
<St tone="mute" ico="refresh-cw">
|
||||
每 2 秒自动刷新
|
||||
</St>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
acts={[
|
||||
{ label: '刷新', ico: 'refresh-cw', onClick: refresh },
|
||||
{ label: '再装一单', ico: 'rotate-ccw', primary: true, onClick: onBack },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="g-tb">
|
||||
<QueryGate query={wf}>
|
||||
{w !== undefined && (
|
||||
<>
|
||||
{/* 图签栏:工程图右下角那张表 —— 一条流的身份,一格一件事 */}
|
||||
<div className="g-sheet">
|
||||
<div className="g-sheet-h">
|
||||
<Ico name="file-text" s={12} />
|
||||
WF — 工作流
|
||||
<span className="x">{w.workflow.source.kind} · {w.workflow.source.ref}</span>
|
||||
</div>
|
||||
<div className="g-tblock">
|
||||
<div>
|
||||
<em>工作流号</em>
|
||||
<b>{id.slice(0, 8)}</b>
|
||||
</div>
|
||||
<div>
|
||||
<em>状态</em>
|
||||
<b className={state === 'running' || state === 'waiting' ? 'run' : 'brass'}>
|
||||
{WORKFLOW_STATE_LABEL[w.workflow.state] ?? w.workflow.state}
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
<em>流程包</em>
|
||||
<b>{w.workflow.packageId}@v{w.workflow.packageVersion}</b>
|
||||
</div>
|
||||
<div>
|
||||
<em>起单时刻</em>
|
||||
<b>{started?.toLocaleTimeString('zh-CN', { hour12: false }) ?? '—'}</b>
|
||||
</div>
|
||||
<div>
|
||||
<em>起单人</em>
|
||||
<b>{w.workflow.source.by === undefined ? '—' : staffName(w.workflow.source.by)}</b>
|
||||
</div>
|
||||
<div>
|
||||
<em>节点 / 边</em>
|
||||
<b>
|
||||
{w.pkg.nodes.length} / {w.pkg.edges.length}
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 派工带:测试台不代答,这句必须说满 */}
|
||||
<div className="g-tbdesk">
|
||||
<div className="g-tbdesk-h">
|
||||
<Ico name="briefcase" s={12} />
|
||||
DSK — 任务落到了谁的工作台
|
||||
<button className="g-btn xs" onClick={() => nav.jump('tasks', 'list')}>
|
||||
<Ico name="activity" s={11} />
|
||||
去运营中心 · 任务
|
||||
</button>
|
||||
</div>
|
||||
{w.tasks.length === 0 ? (
|
||||
<p>还没有任务落到任何工位 —— 流刚起,或者卡在审批点上(审批单不是任务,见下面的节点实例)。</p>
|
||||
) : (
|
||||
w.tasks.map((t) => (
|
||||
<div key={t.id} className="g-tbdesk-r">
|
||||
<span className="nid">{t.nodeId}</span>
|
||||
{t.title}
|
||||
<span>→</span>
|
||||
<b>{t.ownerName} 的工作台</b>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<p>
|
||||
测试台<b>不代答</b>:这些是真任务,要那个人在自己的工作台上答,这条流才会往下走。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<TraceSheet
|
||||
spans={spans}
|
||||
staffName={staffName}
|
||||
extra={
|
||||
<button className="g-btn xs" onClick={refresh} disabled={trQ.isFetching}>
|
||||
<Ico name="refresh-cw" s={11} />
|
||||
{trQ.isFetching ? '取数中' : '刷新'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="g-sheet">
|
||||
<div className="g-sheet-h">
|
||||
<Ico name="list-checks" s={12} />
|
||||
NOD — 节点实例
|
||||
<span className="x">{w.instances.length} 个已进入</span>
|
||||
</div>
|
||||
{w.instances.length === 0 ? (
|
||||
<div className="g-tb-empty">
|
||||
<Ico name="scan" s={26} />
|
||||
<b>还没有节点进入</b>
|
||||
<p>起点已过,第一个节点正在派工。</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="g-nins">
|
||||
<div className="g-nins-h">
|
||||
<span>节点</span>
|
||||
<span>名称</span>
|
||||
<span>状态</span>
|
||||
<span>终态</span>
|
||||
<span>受理人</span>
|
||||
</div>
|
||||
{w.instances.map((it) => {
|
||||
const bad = it.terminal !== undefined && it.terminal !== 'released';
|
||||
const cls = bad ? 'bad' : it.running ? 'run' : it.waiting ? 'wait' : it.terminal === undefined ? '' : 'done';
|
||||
const who = assigneeOfNode(it.nodeId);
|
||||
return (
|
||||
<div key={`${it.nodeId}#${it.instance}`} className="g-nins-r">
|
||||
<span className="nid">{it.nodeId}</span>
|
||||
<span className="lb">{nodeLabel(it.nodeId)}</span>
|
||||
<span className={`st ${cls}`}>
|
||||
<i />
|
||||
{bad ? '异常' : it.running ? '在跑' : it.waiting ? '等人' : it.terminal === undefined ? '已进入' : '已放行'}
|
||||
</span>
|
||||
<span className="lb">
|
||||
{it.terminal === undefined ? '—' : (TERMINAL_STATE_LABEL[it.terminal] ?? it.terminal)}
|
||||
</span>
|
||||
<span className="who">
|
||||
{who === undefined ? '—' : <b>{who}</b>}
|
||||
{it.instance > 1 && <span className="ins"> 第 {it.instance} 次</span>}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</QueryGate>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
/**
|
||||
* 全链 TRACE —— 这一屏的戏眼:一张**走查记录纸**。
|
||||
*
|
||||
* 一行读两件事:
|
||||
* · 左半是**结构** —— span 树按 `parentId` 拼出来,枝线是细线方角(与图框同一画法);
|
||||
* · 右半是**时间** —— 所有条画在同一条刻度轴上,底纹等距细格,谁套着谁跑、谁挨着谁跑,一眼看出来。
|
||||
* 未收尾的段按**剖面线**画(图纸里未定型的剖切面就是这么标的),右端出箭头 —— 不必写「还在跑」也知道。
|
||||
*
|
||||
* span 的语义分两层:workflow / node / step 是骨架(走灰阶),
|
||||
* tool / model / human 是**谁动的手**(各有其色)—— 全屏只有这三色是彩的。
|
||||
*/
|
||||
import { useMemo, useState } from 'react';
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import type { SpanKind, TraceSpan } from './run-api.ts';
|
||||
|
||||
const KIND: Readonly<Record<SpanKind, { code: string; ico: string; label: string }>> = {
|
||||
workflow: { code: 'FLOW', ico: 'workflow', label: '一条流' },
|
||||
node: { code: 'NODE', ico: 'circle-dot', label: '节点' },
|
||||
step: { code: 'STEP', ico: 'chevron-right', label: '步骤' },
|
||||
tool: { code: 'TOOL', ico: 'wrench', label: '工具' },
|
||||
model: { code: 'MODEL', ico: 'cpu', label: '模型' },
|
||||
human: { code: 'HUMAN', ico: 'user-round', label: '人卡' },
|
||||
};
|
||||
|
||||
const KIND_ORDER: readonly SpanKind[] = ['workflow', 'node', 'step', 'tool', 'model', 'human'];
|
||||
|
||||
/** 刻度阶梯:轴的读数要是人能一眼换算的整数,不是 `1.37s` 这种算出来的余数 */
|
||||
const STEPS = [
|
||||
10, 25, 50, 100, 250, 500, 1_000, 2_000, 5_000, 10_000, 15_000, 30_000, 60_000, 120_000, 300_000,
|
||||
600_000, 1_800_000, 3_600_000, 7_200_000, 21_600_000, 86_400_000,
|
||||
] as const;
|
||||
|
||||
const ms = (iso: string): number => Date.parse(iso);
|
||||
|
||||
function fmtDur(v: number): string {
|
||||
if (v < 1_000) return `${Math.round(v)}ms`;
|
||||
if (v < 60_000) return `${(v / 1_000).toFixed(v < 10_000 ? 2 : 1)}s`;
|
||||
const m = Math.floor(v / 60_000);
|
||||
return `${m}m${String(Math.floor((v % 60_000) / 1_000)).padStart(2, '0')}s`;
|
||||
}
|
||||
|
||||
function fmtOffset(v: number): string {
|
||||
if (v === 0) return 'T0';
|
||||
if (v < 60_000) return `+${(v / 1_000).toFixed(2)}s`;
|
||||
const m = Math.floor(v / 60_000);
|
||||
return `+${m}m${String(Math.floor((v % 60_000) / 1_000)).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
type Row = {
|
||||
readonly span: TraceSpan;
|
||||
/** 每一层祖先在这一行下面还有没有兄弟 —— 决定竖枝线画到哪 */
|
||||
readonly guides: readonly boolean[];
|
||||
readonly last: boolean;
|
||||
/**
|
||||
* 已知活跃到几时(毫秒)—— 未收尾的段画到这儿为止,再往后是**续画线**。
|
||||
* 收尾了就是 `endedAt`;没收尾就取子孙里最晚的一笔留痕:
|
||||
* 那是这一段**能证明自己还在动**的最后时刻,再往后没人知道。
|
||||
*/
|
||||
readonly known: number;
|
||||
/**
|
||||
* 有没有子段。有子段的是**包络**(流、节点)—— 它自己不干活,时长是子段的外框,
|
||||
* 所以按尺寸线画(细线 + 两端界限);没子段的才是真干了活的一笔,按实心条画。
|
||||
*/
|
||||
readonly envelope: boolean;
|
||||
};
|
||||
|
||||
/** 拍平成行:父在前、子按起始时刻排 —— 出参是按 startedAt 的平表,树得自己拼 */
|
||||
function layout(spans: readonly TraceSpan[]): Row[] {
|
||||
const known = new Set(spans.map((s) => s.id));
|
||||
const kids = new Map<string, TraceSpan[]>();
|
||||
const roots: TraceSpan[] = [];
|
||||
for (const s of spans) {
|
||||
const p = s.parentId;
|
||||
if (p === undefined || !known.has(p)) roots.push(s);
|
||||
else kids.set(p, [...(kids.get(p) ?? []), s]);
|
||||
}
|
||||
const byTime = (a: TraceSpan, b: TraceSpan): number => ms(a.startedAt) - ms(b.startedAt) || a.id.localeCompare(b.id);
|
||||
const knownOf = (s: TraceSpan): number => {
|
||||
if (s.endedAt !== undefined) return ms(s.endedAt);
|
||||
const sub = (kids.get(s.id) ?? []).map(knownOf);
|
||||
return Math.max(ms(s.startedAt), ...sub);
|
||||
};
|
||||
const out: Row[] = [];
|
||||
const walk = (list: readonly TraceSpan[], guides: readonly boolean[]): void => {
|
||||
const sorted = [...list].sort(byTime);
|
||||
sorted.forEach((s, i) => {
|
||||
const last = i === sorted.length - 1;
|
||||
out.push({ span: s, guides, last, known: knownOf(s), envelope: (kids.get(s.id) ?? []).length > 0 });
|
||||
walk(kids.get(s.id) ?? [], [...guides, !last]);
|
||||
});
|
||||
};
|
||||
walk(roots, []);
|
||||
return out;
|
||||
}
|
||||
|
||||
function payloadOf(s: TraceSpan): ReadonlyArray<{ cap: string; body: string; bad?: true }> {
|
||||
const parts: Array<{ cap: string; body: string; bad?: true }> = [];
|
||||
if (s.input !== undefined && Object.keys(s.input).length > 0)
|
||||
parts.push({ cap: '入参 IN', body: JSON.stringify(s.input, null, 2) });
|
||||
if (s.output !== undefined && Object.keys(s.output).length > 0)
|
||||
parts.push({ cap: '出参 OUT', body: JSON.stringify(s.output, null, 2) });
|
||||
if (s.attributes !== undefined && Object.keys(s.attributes).length > 0)
|
||||
parts.push({ cap: '属性 ATTR', body: JSON.stringify(s.attributes, null, 2) });
|
||||
if (s.error !== undefined) parts.push({ cap: '错误 ERR', body: s.error.message, bad: true });
|
||||
return parts;
|
||||
}
|
||||
|
||||
function assigneeOf(s: TraceSpan): string | undefined {
|
||||
const a = s.attributes?.['assigneeId'];
|
||||
return typeof a === 'string' ? a : undefined;
|
||||
}
|
||||
|
||||
export function TraceSheet({
|
||||
spans,
|
||||
staffName,
|
||||
extra,
|
||||
}: {
|
||||
spans: readonly TraceSpan[];
|
||||
/** 员工 id → 人名:span 的 `attributes.assigneeId` 是 UUID,摆 UUID 等于没说 */
|
||||
staffName: (id: string) => string;
|
||||
extra?: ReactNode;
|
||||
}): ReactNode {
|
||||
const [open, setOpen] = useState<ReadonlySet<string>>(new Set());
|
||||
const rows = useMemo(() => layout(spans), [spans]);
|
||||
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<div className="g-sheet">
|
||||
<div className="g-sheet-h">
|
||||
<Ico name="git-branch" s={12} />
|
||||
TRC — 全链 TRACE
|
||||
{extra !== undefined && <span className="x">{extra}</span>}
|
||||
</div>
|
||||
<div className="g-tb-empty">
|
||||
<Ico name="scan" s={26} />
|
||||
<b>还没有 span</b>
|
||||
<p>流刚起,第一段留痕还没写下来。等两秒,或者按上面的刷新。</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* 轴的右端只认**已知的时刻**,不认 `now`。
|
||||
*
|
||||
* 未收尾的段拉到「此刻」等于替它编了个结束时间 —— 而工作流根 span 常常一辈子不收尾
|
||||
* (它的收尾只挂在审批裁决那条路上),照 `now` 画,轴会一秒一秒地长,
|
||||
* 底下几笔真活(工具两三毫秒)就被压成看不见的发丝。
|
||||
* 所以轴按最后一笔留痕收口,未收尾的段用**续画线**画出右边界之外 —— 图纸里就是这么标「未完待续」的。
|
||||
*/
|
||||
const t0 = Math.min(...rows.map((r) => ms(r.span.startedAt)));
|
||||
const tEnd = Math.max(...rows.map((r) => r.known));
|
||||
const total = Math.max(tEnd - t0, 1);
|
||||
const step = STEPS.find((s) => total / s <= 5) ?? STEPS[STEPS.length - 1]!;
|
||||
const axis = Math.max(Math.ceil(total / step) * step, step);
|
||||
const ticks = Array.from({ length: Math.round(axis / step) + 1 }, (_, i) => i * step);
|
||||
|
||||
const counts = new Map<SpanKind, number>();
|
||||
for (const r of rows) counts.set(r.span.kind, (counts.get(r.span.kind) ?? 0) + 1);
|
||||
|
||||
return (
|
||||
<div className="g-sheet">
|
||||
<div className="g-sheet-h">
|
||||
<Ico name="git-branch" s={12} />
|
||||
TRC — 全链 TRACE
|
||||
<span className="x">
|
||||
<span>{rows.length} SPAN · 跨时 {fmtDur(total)}</span>
|
||||
{extra}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 刻度只算一次,挂在容器上 —— 每一行的方格底纹都读它,对得上不是碰巧 */}
|
||||
<div className="g-trc" style={{ '--tick': `${(step / axis) * 100}%` } as CSSProperties}>
|
||||
<div className="g-trc-legend">
|
||||
{KIND_ORDER.filter((k) => counts.has(k)).map((k) => (
|
||||
<span key={k} className={`g-trc-lg k-${k}`}>
|
||||
<i />
|
||||
<em>{KIND[k].code}</em>
|
||||
{KIND[k].label}
|
||||
<b>×{counts.get(k)}</b>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 刻度带:轴的读数在这儿,下面每一行的方格与它同一组百分比 */}
|
||||
<div className="g-trc-rule">
|
||||
<span className="t">时刻</span>
|
||||
<span>结构 · SPAN 树</span>
|
||||
<span className="d">耗时</span>
|
||||
<span className="g">
|
||||
{ticks.map((v, i) => (
|
||||
<span
|
||||
key={v}
|
||||
className={'tick' + (i === ticks.length - 1 ? ' last' : '')}
|
||||
style={{ left: `${(v / axis) * 100}%` }}
|
||||
>
|
||||
{v === 0 ? '0' : fmtDur(v)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{rows.map(({ span, guides, last, known, envelope }) => {
|
||||
const start = ms(span.startedAt) - t0;
|
||||
const end = known - t0;
|
||||
const live = span.endedAt === undefined;
|
||||
const parts = payloadOf(span);
|
||||
const who = assigneeOf(span);
|
||||
const isOpen = open.has(span.id);
|
||||
const body = (
|
||||
<>
|
||||
<span className={'g-trc-t' + (start === 0 ? ' zero' : '')}>{fmtOffset(start)}</span>
|
||||
<span className="g-trc-n">
|
||||
<span className="g-trc-tree">
|
||||
{guides.map((on, i) => (
|
||||
<i key={i} className={on ? 'on' : ''} />
|
||||
))}
|
||||
{guides.length > 0 && <i className={'elb' + (last ? '' : ' mid')} />}
|
||||
</span>
|
||||
<span className="g-trc-k">
|
||||
<Ico name={KIND[span.kind].ico} s={10} />
|
||||
</span>
|
||||
<span className="g-trc-kn">{KIND[span.kind].code}</span>
|
||||
<span className="g-trc-nm">{span.name}</span>
|
||||
{/* 只写受理人:节点号已经在 span 名字里(`A1 客户RFQ受理`),子行的 nodeId 又是继承来的 */}
|
||||
{who !== undefined && (
|
||||
<span className="g-trc-me">
|
||||
<span className="who">→ {staffName(who)}</span>
|
||||
</span>
|
||||
)}
|
||||
{parts.length > 0 && (
|
||||
<span className="g-trc-x-i">
|
||||
<Ico name={isOpen ? 'chevron-down' : 'chevron-right'} s={13} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className={'g-trc-d' + (live ? ' live' : '')}>{live ? '进行中' : fmtDur(end - start)}</span>
|
||||
<span className="g-trc-g">
|
||||
{/* 实条 = 真干了活的一笔;尺寸线 = 包络;续画线 = 还没收尾,右边界之外没人知道 */}
|
||||
<i
|
||||
className={'g-trc-bar' + (envelope ? ' env' : '') + (span.error === undefined ? '' : ' err')}
|
||||
style={{ left: `${(start / axis) * 100}%`, width: `${Math.max((end - start) / axis, 0.006) * 100}%` }}
|
||||
/>
|
||||
{live && (
|
||||
<i
|
||||
className={'g-trc-bar open' + (envelope ? ' env' : '')}
|
||||
style={{ left: `${(end / axis) * 100}%`, right: '0' }}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<div key={span.id} className={`g-trc-item k-${span.kind}`}>
|
||||
{parts.length === 0 ? (
|
||||
<div className="g-trc-row">{body}</div>
|
||||
) : (
|
||||
<button
|
||||
className={'g-trc-row' + (isOpen ? ' open-x' : '')}
|
||||
aria-expanded={isOpen}
|
||||
onClick={() =>
|
||||
setOpen((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (!next.delete(span.id)) next.add(span.id);
|
||||
return next;
|
||||
})
|
||||
}
|
||||
>
|
||||
{body}
|
||||
</button>
|
||||
)}
|
||||
{isOpen && (
|
||||
<div className="g-trc-x">
|
||||
{parts.map((p) => (
|
||||
<figure key={p.cap} className={p.bad === true ? 'bad' : ''}>
|
||||
<figcaption>{p.cap}</figcaption>
|
||||
<pre>{p.body}</pre>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user