测试台改仪表台:启动输入换成一封信;卡片化触发器与大模型;清掉 ⓘ 说教条

**测试台**
  · 启动输入不再是「调用参数」表 —— 这条流真实的起法就是客户来信,
    界面上就该是一封信(发件人 / 收件人 / 主题 / 正文 / BOM 附件)。
    服务端拿**真通道的抽键正则** + **真触发器的装配映射**推出调用入参:
    测试台自己不解析邮件,否则试通的是测试台而不是这条流。
    抽不出必填就如实报「哪个字段没命中、通道的正则要什么」,不静默起空单。
  · 一屏两大块:左选流,右两节 —— 01 输入配置、02 节点指派。
  · 起单钮只剩一枚(原来页头一枚、RUN 卡里一枚)。
  · 改暗色仪表台:调色板集中在 .g-tb/.g-rig 的一组变量上,
    TRACE 那张树 + 甘特的结构一行没动,只是纸变成了面板。

**触发器 / 大模型** 列表改卡片:一条规则、一个实例都要一眼看全
(何时起 · 起哪条流 · 开没开 / 谁家的 · 什么型号 · 密钥绑没绑)。
触发器卡是 div 不是 button —— 卡里还坐着「改规则」那枚真按钮。

**同类卡等高**:底栏钉在卡底、说明恒占两行、卡头一行截断。
实测同一货架内 13 张工具卡、6 张活动卡、3 张模型卡各自完全等高。

**删掉 19 条 ⓘ 说教横幅**(「只列有生效版的包…」那一类)。
留下的是三种:确认带里的影响说明(点了动作才出现,是决策依据)、
warn/ok 的真反馈、以及「X 不存在」这类空态。

删掉入站邮件演练整屏 —— 它验的那两步已经并进测试台的起单路径了。

新增一条接缝测试:通道抽出来的键叫 keys.customerCode,触发器映射也得照这名字取;
哪头改了名字单还是能起,只是入参悄悄变空、流走到 G1 才莫名其妙地停。

四闸绿;契约快照随本提交入库。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/features/gov-testbed/internal/simulate.tsx

@@ -13,11 +13,9 @@ import type { ProcessNode, ProcessPackage } from '@contracts';
 import { TERMINAL_STATE_LABEL, WORKFLOW_STATE_LABEL, testCurrentRoute, testRunRoute, testStopRoute } 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 { useGovChannels, useGovPackages, useGovStaff } from '@web-shared/gov/gov-api.ts';
+import { 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';
 
@@ -33,36 +31,10 @@ const NODE_KIND_LABEL: Readonly<Record<string, string>> = {
   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();
+  const chanQ = useGovChannels();
 
   /** 只列有生效版的:同一个包可能存着多版,能起单的只有 `active` 那一版 */
   const livePkgs = useMemo<ProcessPackage[]>(
@@ -71,10 +43,10 @@ export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
   );
   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 inbox = (chanQ.data?.channels ?? []).find((ch) => ch.kind === 'mail' && ch.enabled);
 
   const [pickedId, setPicked] = useState('');
-  const [subject, setSubject] = useState('测试台试跑');
-  const [values, setValues] = useState<CallValues>({});
+  const [mail, setMail] = useState<MailDraft>(SAMPLE_MAIL);
   const [assignments, setAssignments] = useState<Readonly<Record<string, string>>>({});
   const queryClient = useQueryClient();
   const [workflowId, setWorkflowId] = useState<string | undefined>(undefined);
@@ -102,19 +74,17 @@ export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
 
   // 没选就落到第一个有生效版的包 —— 常见情形只有一个包,不该逼人先点一下
   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 to = mail.to === '' ? (inbox?.address ?? '') : mail.to;
+  const ready = pkg !== undefined && mail.from.trim() !== '' && to !== '' && mail.subject.trim() !== '';
 
   const run = useMutation({
-    mutationFn: (body: { packageId: string; subject: string; data: Record<string, unknown>; assignments: Record<string, string> }) =>
-      call<RunOutput>(testRunRoute, { body }),
+    mutationFn: (input: RunInput) => call<RunOutput>(testRunRoute, { body: input }),
     onSuccess: (r) => {
       setWorkflowId(r.workflowId);
       setError(undefined);
     },
-    // 后端的判词照抄:「输入不合调用接口契约」「流程包无生效版本」都是要人改配置的话,不该被我改写
+    // 后端的判词照抄:「抽不出客户码」「无生效版」都是要人改配置的话,不该被我改写
     onError: (e: unknown) => setError((e as { message?: string }).message ?? '起单失败'),
   });
 
@@ -122,21 +92,14 @@ export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
     if (pkg === undefined) return;
     run.mutate({
       packageId: pkg.id,
-      subject: subject.trim(),
-      data: built.data,
+      mail: { ...mail, to },
       assignments: Object.fromEntries(Object.entries(assignments).filter(([, v]) => v !== '')),
     });
   };
 
   if (running !== undefined) {
     return (
-      <Observe
-        id={running}
-        staffName={staffName}
-        nav={nav}
-        stopping={stop.isPending}
-        onBack={() => stop.mutate(running)}
-      />
+      <Observe id={running} staffName={staffName} nav={nav} stopping={stop.isPending} onBack={() => stop.mutate(running)} />
     );
   }
 
@@ -149,7 +112,7 @@ export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
         tone="brand"
         kicker="联调测试台 · 装配态"
         title="仿真试跑"
-        desc="装一次调用、把流真起起来,然后看穿它怎么跑。任务照旧落到被指派人的工作台 —— 测试台不代答。"
+        desc="这条流真实的起法就是一封客户来信 —— 写这封信、指派每个节点归谁,起单看穿全程。任务照旧落到被指派人的工作台。"
         chips={
           <>
             <St tone={pkg === undefined ? 'warn' : 'ok'} ico={pkg === undefined ? 'alert-circle' : 'circle-check'}>
@@ -171,160 +134,194 @@ export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
         ]}
       />
 
-      <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>
+      <QueryGate query={pkgQ}>
+        {livePkgs.length === 0 ? (
+          <div className="g-rig">
+            <div className="g-tb-empty">
+              <Ico name="scan" s={26} />
+              <b>没有可起单的流程包</b>
+              <p>
+                试跑要有一个<b>生效版</b>才起得来。去「流程包」里保存一版 —— 存得进去的版本就是生效的。
+              </p>
             </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>
+          </div>
+        ) : (
+          /* 左选流,右配置 —— 一屏两大块,不再把装配单摞成一长条 */
+          <div className="g-rig">
+            <aside className="g-rig-l">
+              <div className="g-rig-h">
+                <Ico name="workflow" s={11} />
+                流程包
+                <span className="x">{livePkgs.length}</span>
+              </div>
+              <div className="g-rig-pk">
+                {livePkgs.map((p) => (
+                  <button
+                    key={p.id}
+                    className={'g-pk' + (p.id === pkg?.id ? ' on' : '')}
+                    onClick={() => {
+                      setPicked(p.id);
+                      setAssignments({});
+                    }}
+                  >
+                    <b>{p.name}</b>
+                    <span className="id">
+                      {p.id}@v{p.version}
+                    </span>
+                    <span className="cnt">
+                      <i>节点 {p.nodes.length}</i>
+                      <i>边 {p.edges.length}</i>
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </aside>
 
-                <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>
+            <section className="g-rig-r">
+              <div className="g-rig-h">
+                <span className="n">01</span>
+                输入配置
+                <span className="x">启动这条流的那封信</span>
+              </div>
+              <MailForm draft={{ ...mail, to }} onChange={setMail} inbox={inbox?.address} />
+
+              <div className="g-rig-h">
+                <span className="n">02</span>
+                节点指派
+                <span className="x">
+                  {pinned}/{nodes.length} 已定 · 留空即照旧轮值
+                </span>
+              </div>
+              <div className="g-asn">
+                {nodes.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>
 
-              <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 里那一行为准。
+              {error !== undefined && (
+                <Note tone="warn">
+                  <b>没起成:</b>
+                  {error}
                 </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>
+              )}
+            </section>
+          </div>
+        )}
+      </QueryGate>
     </>
   );
 }
 
-/* ── 观测态 ─────────────────────────────────────────────────────────── */
+/* ==================== 启动输入:一封信 ==================== */
+
+type MailDraft = {
+  from: string;
+  to: string;
+  subject: string;
+  body: string;
+  attachments: ReadonlyArray<{ name: string; contentType: string; size: number }>;
+};
+
+type RunInput = { packageId: string; mail: MailDraft; assignments: Record<string, string> };
+
+const XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+
+/**
+ * 预填的是一封**抽得出键**的信 —— 主题里带客户码与询价单号,
+ * 通道的抽键正则就是照着这两样写的;改坏了起单会如实报「抽不出哪个」。
+ */
+const SAMPLE_MAIL: MailDraft = {
+  from: 'buyer@sz-machinery.com',
+  to: '',
+  subject: '【询价】C014 / RFQ-2607-001 工控主板 BOM 12 项',
+  body: '你好,附件是本次询价的 BOM,共 12 项,请按标准交期报价。\n付款方式沿用上次合同。',
+  attachments: [{ name: 'BOM-RFQ-2607-001.xlsx', contentType: XLSX, size: 28_416 }],
+};
+
+function MailForm({
+  draft,
+  onChange,
+  inbox,
+}: {
+  draft: MailDraft;
+  onChange: (next: MailDraft) => void;
+  inbox: string | undefined;
+}): ReactNode {
+  const set = <K extends keyof MailDraft>(k: K, v: MailDraft[K]): void => onChange({ ...draft, [k]: v });
+  return (
+    <div className="g-ml">
+      <label className="g-ml-r">
+        <em>发件人</em>
+        <input className="g-ml-i" value={draft.from} onChange={(e) => set('from', e.target.value)} />
+      </label>
+      <label className="g-ml-r">
+        <em>收件人</em>
+        <input
+          className="g-ml-i"
+          value={draft.to}
+          placeholder={inbox ?? '公司询价邮箱'}
+          onChange={(e) => set('to', e.target.value)}
+        />
+        <span className="g-ml-t">投给哪个信箱决定用哪套抽键规则</span>
+      </label>
+      <label className="g-ml-r">
+        <em>主题</em>
+        <input className="g-ml-i" value={draft.subject} onChange={(e) => set('subject', e.target.value)} />
+        <span className="g-ml-t">客户码与询价单号从这里抽</span>
+      </label>
+      <label className="g-ml-r tall">
+        <em>正文</em>
+        <textarea className="g-ml-i" rows={4} value={draft.body} onChange={(e) => set('body', e.target.value)} />
+      </label>
+      <div className="g-ml-r tall">
+        <em>附件</em>
+        <div className="g-ml-at">
+          {draft.attachments.map((a, i) => (
+            <span key={a.name} className="g-att">
+              <Ico name="paperclip" s={11} />
+              {a.name}
+              <i>{(a.size / 1024).toFixed(0)} KB</i>
+              <button
+                aria-label={`移除 ${a.name}`}
+                onClick={() => set('attachments', draft.attachments.filter((_, j) => j !== i))}
+              >
+                <Ico name="x" s={10} />
+              </button>
+            </span>
+          ))}
+          <button
+            className="g-att-add"
+            onClick={() =>
+              set('attachments', [
+                ...draft.attachments,
+                { name: `BOM-${draft.attachments.length + 1}.xlsx`, contentType: XLSX, size: 20_480 },
+              ])
+            }
+          >
+            <Ico name="plus" s={11} />
+            加一个 BOM
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 function Observe({
   id,