Archived
ChaiHaoandClaude Opus 5
70e83d0b09
从前一条只有一行标题,而人真想回看的东西全躺在留痕里没露过面 —— 凭什么算这一步办完了、那一笔落下哪几行、被拒到底拒在哪儿、发的是哪种卡送到哪儿。 现在每条可展开,细节由 detailOf 摘成**一句句人话**(不摆 execution 这类内部名); 摘不出就是空数组,前端据此不给展开钮 —— 点开是空抽屉比不给还糟。 不摆二级条目(用户定):细节不是「键:值」两栏 —— 那是把留痕的字段名搬到人面前, 人还得自己在脑子里连成句子。每句自带主语与语境,单拎出来也读得通。 连带修一处文档与实现不符:「一轮一句」的口径说埋头办事那几拍的交代「留进工作日志」, 而实现把 internal 整类滤掉了,那几句哪儿都看不到。现在带交代的放行, 章写「交代进展」、记在 AI 名下;排障用的内部痕照旧不摆。 两种交代统一「首句上行、全文进抽屉」,一句话说完的不重复摆;截了才加省略号。 契约:任务详情的日志行新增可选 detail(字符串数组),api-report 同批更新。 门禁:typecheck / lint / depcruise / test(1378)全绿;浏览器实测折叠行高 34-36px 齐平、 展开无键值两栏残留。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
890 lines
39 KiB
TypeScript
890 lines
39 KiB
TypeScript
/**
|
|
* 标题区 + 工作区 —— 自原型 `_components/ViewRegion.tsx` 平移(2026-07-26 定稿)。
|
|
*
|
|
* 「视图区**承担全部结构化交互**」:表单读写 + 过程成果的图形展示,全在这里完成;
|
|
* 决策不在这里 —— 它是对话区的选择题(AM 07)。
|
|
*
|
|
* 五页签:待处理 / 沟通记录 / 工作成果 / 任务详情 / 工作日志。
|
|
* DOM 与类名逐字照搬原型 —— 皮肤是原型的原样,自造类名等于没样式。
|
|
*
|
|
* **空态即常态**:文案从用人的角度写「你手上现在没有什么、将会有什么」,
|
|
* 不写「这块还没做」—— 后者是开发视角,用户不关心,也看不懂。
|
|
*/
|
|
import { useState } from 'react';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { markCommReadRoute, saveTableRoute } from '@contracts';
|
|
import { call } from '@web-shared/typed-fetch.ts';
|
|
import type { FileDoc, TaskDetail, WorkOrder, WorkOrderReply } from '@contracts';
|
|
import { TERMINAL_STATE_LABEL, isRejection } from '@contracts';
|
|
import { Ico } from '@web-shared/Ico.tsx';
|
|
import ScrollArea from '@web-shared/ScrollArea.tsx';
|
|
import { EmptyState } from '@web-shared/desk/module-kit.tsx';
|
|
import { ViewBlocks, ViewContainer } from '@ui';
|
|
import type { ViewEdits, ViewSave } from '@ui';
|
|
import { GuideCard, WorkOrderReport } from './work-order-report.tsx';
|
|
import { FileViewer } from './FileViewer.tsx';
|
|
import { atFull, atMinute } from '@web-shared/at.ts';
|
|
|
|
|
|
type Tab = 'open' | 'comms' | 'done' | 'wf' | 'log';
|
|
|
|
export type ViewRegionProps = {
|
|
readonly detail: TaskDetail;
|
|
/** 工单回传 —— 由壳层接路由,视图区只管把人填的东西交出去 */
|
|
onReplyOrder: (reply: WorkOrderReply) => void;
|
|
/**
|
|
* 填报值由**壳层持有** —— 不是这一份的局部状态。
|
|
*
|
|
* PRD 的口径:验收工单「AI 已填好、可编辑」,而**裁决在对话区的验收单上**。
|
|
* 编辑与裁决是同一件事的两半,却分在两个区里做 —— 缓冲只活在工作区里,
|
|
* 人在报告上改的值就到不了裁决那一刻:验收回传的 `values` 恒空,修订永远落不下来。
|
|
*/
|
|
readonly values: Readonly<Record<string, string>>;
|
|
onField: (key: string, value: string) => void;
|
|
/**
|
|
* 对话区点了「打开工单」→ 视图区跳转定位(PRD:locate)。
|
|
* `seq` 每点一次递增 —— 同一张卡点两次也要再跳一次(人就是想回到它)。
|
|
* 待办的跳「待处理」并翻到那一页;办结的跳「工作成果」并打开那份定稿报告。
|
|
*/
|
|
/*
|
|
* `orderId` 跳工单;`tab` 直接跳页签 —— 起单那句系统开场白的「查看邮件」用后者
|
|
* (它指的不是某张工单,是那封来件本身)。
|
|
*/
|
|
readonly locate?: { seq: number; orderId?: string; tab?: Tab } | null;
|
|
};
|
|
|
|
|
|
/**
|
|
* 件上改出来的行 → 回传载荷 —— **按台账地址对上工单声明的那张表**。
|
|
*
|
|
* 件里那几张可改的表各挂着 `data-edit="域.对象"`;工单的 `blocks[i]` 声明了
|
|
* `ledger`(写哪张表)与 `fields`(列在哪个位置)。这里按地址找到那一块,
|
|
* 再**照它的 `fields` 顺序**摆格子 —— 于是回传仍是老样子 `[列名, ...行]`,
|
|
* 服务端那道写回(`applyBoundTableEdits`)一个字都不用改。
|
|
*
|
|
* 按地址找而不是按位置找:件与卡是两份东西,位置对齐迟早会错开一位,
|
|
* 而错开一位的后果是把年用量写进目标价那一列 —— 那种错没人看得出来。
|
|
*/
|
|
function collectEdits(edits: ViewEdits, order: WorkOrder, onField: (k: string, v: string) => void): void {
|
|
const blocks = order.blocks ?? [];
|
|
for (const [address, rows] of Object.entries(edits)) {
|
|
const at = blocks.findIndex((b) => b.t === 'table' && b.ledger === address);
|
|
const block = blocks[at];
|
|
if (at < 0 || block === undefined || block.t !== 'table') continue;
|
|
const fields = block.fields ?? [];
|
|
if (fields.length === 0) continue;
|
|
const table = [block.cols, ...rows.map((row) => fields.map((f) => row[f] ?? ''))];
|
|
onField(`table:${at}`, JSON.stringify(table));
|
|
}
|
|
}
|
|
|
|
export function ViewRegion({ detail, onReplyOrder, values, onField, locate }: ViewRegionProps) {
|
|
const [view, setView] = useState<Tab>('open');
|
|
const [page, setPage] = useState(0);
|
|
/*
|
|
* **件内翻页**(2026-08-02 用户:「一个执行单可以派多个 HTML 待执行报告,
|
|
* 合理利用右上角的翻页和待处理的数字气泡」):件里带 `data-page` 的可见段
|
|
* 各算一页(A2 = 一颗待选型芯片一页)。单卡多页时,右上角那对箭头翻的是页。
|
|
*/
|
|
const [docPage, setDocPage] = useState(0);
|
|
const [docPages, setDocPages] = useState(1);
|
|
/** 工作成果:列表里点开的那份定稿报告 */
|
|
const [doneSel, setDoneSel] = useState<string | null>(null);
|
|
const [openFile, setOpenFile] = useState<FileDoc | undefined>(undefined);
|
|
|
|
const orders = detail.workOrders;
|
|
const openList = orders.filter((o) => o.done === undefined);
|
|
/* 未读条数 —— 页签那枚红气泡读的就是它;标记按钮按一下这个数才动 */
|
|
const unreadN = detail.comms.filter((m) => m.unread).length;
|
|
|
|
/*
|
|
* 标记已读 / 未读 —— 乐观更新交给失效:标完服务端广播 task 触点,
|
|
* 这一屏跟着重取。不在前端手写缓存(订阅层统一做,组件不自建过程状态)。
|
|
*/
|
|
const queryClient = useQueryClient();
|
|
/**
|
|
* 件上按下「保存」→ **落草稿层 + 让服务端按新数据重渲那一帧**。
|
|
*
|
|
* 不落库,人改的东西只活在浏览器里,刷新一次就没了;不重渲,由数据算出来的东西
|
|
* (类徽 A/B/C、分布条、结论横幅那条去向)会停在上一次渲染那一刻 ——
|
|
* 实测:人把三条料全改成 A 类,底下的去向还写着「去选型」。
|
|
* 落完重取任务投影,整份件跟着一起变。**工单不办结,放行门的位置没动。**
|
|
*/
|
|
const saveTable = useMutation({
|
|
mutationFn: (save: ViewSave) =>
|
|
call(saveTableRoute, {
|
|
params: { taskId: detail.card.id },
|
|
body: {
|
|
tables: save.tables as Record<string, Array<Record<string, string>>>,
|
|
drops: save.drops as Record<string, Array<Record<string, string>>>,
|
|
},
|
|
}),
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['desk', 'task', detail.card.id] }),
|
|
});
|
|
|
|
const markRead = useMutation({
|
|
mutationFn: (input: { commId: string; read: boolean }) =>
|
|
call(markCommReadRoute, { params: { commId: input.commId }, body: { read: input.read } }),
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['desk'] }),
|
|
});
|
|
const doneList = orders.filter((o) => o.done !== undefined);
|
|
/*
|
|
* **字签下了,但这一单还没收尾** —— 签完到收尾之间那一小段(合并 / 发口 / 落终态)。
|
|
* 认的是「有一张办结的验收单 + 还没有终态」:两者同时成立只有这一种局面。
|
|
*/
|
|
const signed =
|
|
detail.card.terminal === undefined &&
|
|
orders.some((o) => o.mode === 'acceptance' && o.done !== undefined && !isRejection(o.done.result));
|
|
const pos = Math.min(page, Math.max(0, openList.length - 1));
|
|
const cur = openList[pos];
|
|
const doneItem = doneSel === null ? undefined : doneList.find((o) => o.id === doneSel);
|
|
|
|
/*
|
|
* 对话区点击 → 跳到工单所在页签与页位(渲染期调整 state,seen 保证幂等 —— PRD 同款)。
|
|
* 办结的跳成果详情;待办的跳待处理并翻到那一页。
|
|
*/
|
|
const [seenLoc, setSeenLoc] = useState(0);
|
|
if (locate != null && locate.seq !== seenLoc) {
|
|
setSeenLoc(locate.seq);
|
|
if (locate.tab !== undefined) {
|
|
setOpenFile(undefined);
|
|
setView(locate.tab);
|
|
setPage(0);
|
|
setDoneSel(null);
|
|
}
|
|
const hit = orders.find((o) => o.id === locate.orderId);
|
|
if (hit !== undefined) {
|
|
setOpenFile(undefined);
|
|
if (hit.done !== undefined) {
|
|
setView('done');
|
|
setDoneSel(hit.id);
|
|
} else {
|
|
setView('open');
|
|
setPage(Math.max(0, openList.findIndex((o) => o.id === locate.orderId)));
|
|
}
|
|
}
|
|
}
|
|
|
|
const go = (to: Tab) => {
|
|
setView(to);
|
|
setPage(0);
|
|
setDoneSel(null);
|
|
};
|
|
|
|
const terminalLabel = detail.card.terminal === undefined ? undefined : TERMINAL_STATE_LABEL[detail.card.terminal];
|
|
|
|
return (
|
|
<main className="execution-panel">
|
|
{/* ① 标题区 —— **不滚**,两行定高:主题 · 工作流 · 状态 · 谁做 */}
|
|
<header className="jc-topbar" aria-label="标题区">
|
|
<div className="jc-tb-crumb">
|
|
<span className="jc-tb-tag">
|
|
<Ico name="list-checks" s={12} />
|
|
{detail.card.activity}
|
|
</span>
|
|
<span className="jc-tb-wf" title={detail.card.workflowSubject}>
|
|
<Ico name="git-branch" s={12} />
|
|
<b>{detail.card.workflowSubject}</b>
|
|
</span>
|
|
<span className="jc-tb-sp" />
|
|
<span className={'jc-cp-run-st' + (terminalLabel === undefined ? '' : ' done')}>
|
|
{terminalLabel === undefined ? (
|
|
<>
|
|
<i className="jc-pulse-dot" />
|
|
AI 推进中
|
|
</>
|
|
) : (
|
|
<>
|
|
<Ico name="circle-check" s={13} />
|
|
{terminalLabel}
|
|
</>
|
|
)}
|
|
</span>
|
|
<span className="jc-tb-owner" title={`负责人 · ${detail.owner.name} · ${detail.owner.role}`}>
|
|
<em>{detail.owner.name.charAt(0)}</em>
|
|
{detail.owner.name} · {detail.owner.role}
|
|
</span>
|
|
</div>
|
|
<div className="jc-tb-titlerow">
|
|
<span className="jc-tb-tico">
|
|
<Ico name="file-text" s={16} />
|
|
</span>
|
|
<h2 className="jc-tb-title" title={detail.card.title}>
|
|
{detail.card.title}
|
|
</h2>
|
|
<span className="jc-tb-node jc-mono">
|
|
{detail.card.position}/{detail.card.total}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
{/* ② 工作区 —— 页签与点位条**不滚**,只有正文滚 */}
|
|
<section className="wf-card jc-wc-fill">
|
|
<div className="jc-tnav">
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={view === 'open'}
|
|
className={'jc-tnav-tab' + (view === 'open' ? ' on' : '')}
|
|
onClick={() => go('open')}
|
|
>
|
|
<Ico name="list-checks" s={14} /> 待处理{openList.length > 0 && <em>{openList.length}</em>}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={view === 'comms'}
|
|
className={'jc-tnav-tab' + (view === 'comms' ? ' on' : '')}
|
|
onClick={() => go('comms')}
|
|
>
|
|
<Ico name="mail" s={14} /> 沟通记录
|
|
{/* 未读气泡:红的,数字是**未读条数**,不是总条数 —— 它要回答「有没有我还没看的」 */}
|
|
{unreadN > 0 && <em className="jc-unread">{unreadN}</em>}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={view === 'done'}
|
|
className={'jc-tnav-tab' + (view === 'done' ? ' on' : '')}
|
|
onClick={() => go('done')}
|
|
>
|
|
<Ico name="circle-check" s={14} /> 工作成果
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={view === 'wf'}
|
|
className={'jc-tnav-tab' + (view === 'wf' ? ' on' : '')}
|
|
onClick={() => go('wf')}
|
|
>
|
|
<Ico name="git-branch" s={14} /> 任务详情
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={view === 'log'}
|
|
className={'jc-tnav-tab' + (view === 'log' ? ' on' : '')}
|
|
onClick={() => go('log')}
|
|
>
|
|
<Ico name="archive" s={14} /> 工作日志
|
|
</button>
|
|
<span className="jc-tnav-sp" />
|
|
{/*
|
|
翻页**恒显示**:只有一件也出 1/1,两侧箭头灰显。
|
|
按件数隐藏会让点位条忽有忽无,右侧跟着跳 —— 页签条要定得住。
|
|
*/}
|
|
{/*
|
|
右槽两态:成果进二级界面时是「返回」,否则待处理位上是翻页。
|
|
顶部五个按钮**始终不变** —— 二级界面长在工作区内部,不是另一页。
|
|
*/}
|
|
{openFile !== undefined ? (
|
|
<button type="button" className="jc-tnav-btn jc-tnav-back" onClick={() => setOpenFile(undefined)}>
|
|
<Ico name="arrow-left" s={14} /> 返回
|
|
</button>
|
|
) : view === 'done' && doneItem !== undefined ? (
|
|
<button type="button" className="jc-tnav-btn back" onClick={() => setDoneSel(null)}>
|
|
<Ico name="chevron-left" s={14} /> 返回列表
|
|
</button>
|
|
) : view === 'open' ? (
|
|
/* 单卡多页时这对箭头翻**件里的页**(一颗芯片一页);多卡时照旧翻件 */
|
|
docPages > 1 && openList.length <= 1 ? (
|
|
<span className="jc-tnav-pg" aria-label="翻页">
|
|
<button
|
|
type="button"
|
|
className="jc-tnav-btn"
|
|
disabled={docPage === 0}
|
|
onClick={() => setDocPage(docPage - 1)}
|
|
aria-label="上一页"
|
|
>
|
|
<Ico name="chevron-left" s={15} />
|
|
</button>
|
|
<b className="jc-tnav-n jc-mono">
|
|
{docPage + 1}/{docPages}
|
|
</b>
|
|
<button
|
|
type="button"
|
|
className="jc-tnav-btn"
|
|
disabled={docPage >= docPages - 1}
|
|
onClick={() => setDocPage(docPage + 1)}
|
|
aria-label="下一页"
|
|
>
|
|
<Ico name="chevron-right" s={15} />
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<span className="jc-tnav-pg" aria-label="翻页">
|
|
<button
|
|
type="button"
|
|
className="jc-tnav-btn"
|
|
disabled={pos === 0}
|
|
onClick={() => setPage(pos - 1)}
|
|
aria-label="上一件"
|
|
>
|
|
<Ico name="chevron-left" s={15} />
|
|
</button>
|
|
<b className="jc-tnav-n jc-mono">
|
|
{openList.length === 0 ? 0 : pos + 1}/{openList.length}
|
|
</b>
|
|
<button
|
|
type="button"
|
|
className="jc-tnav-btn"
|
|
disabled={pos >= openList.length - 1}
|
|
onClick={() => setPage(pos + 1)}
|
|
aria-label="下一件"
|
|
>
|
|
<Ico name="chevron-right" s={15} />
|
|
</button>
|
|
</span>
|
|
)
|
|
) : null}
|
|
</div>
|
|
|
|
{/* key:换件 / 换页签即重挂载滚动区,回到正文顶部 */}
|
|
<ScrollArea
|
|
key={`${view}:${view === 'done' ? (doneSel ?? 'list') : (cur?.id ?? '-')}`}
|
|
className="jc-sa--fill"
|
|
vpClassName="wf-body"
|
|
inset={-6}
|
|
>
|
|
{openFile !== undefined ? (
|
|
<FileViewer doc={openFile} />
|
|
) : view === 'comms' ? (
|
|
/*
|
|
* 沟通记录 = 一单往来的**原件**。进来的那一封是开案的那份料 ——
|
|
* 人一点开这单就该看见「这单从哪来的」,不必等模型跑几拍再说。
|
|
*
|
|
* 附件那一行照抄基座读出来的说明:读出多少字 / 为什么读不出。
|
|
* **摆一个「已上传 ✓」是撒谎** —— 活动读不出内容的件,人得当场知道。
|
|
*/
|
|
detail.comms.length === 0 ? (
|
|
<EmptyState
|
|
ico="mail"
|
|
tone="muted"
|
|
title="这一单还没有往来记录"
|
|
desc="跟客户、供应商往来的邮件和消息会按单归到这里,连原件一起存:谈过什么、什么时候谈的,回头都查得到。"
|
|
/>
|
|
) : (
|
|
<div className="jc-comms">
|
|
{detail.comms.map((m) => (
|
|
<article key={m.id} className={'jc-comm t-' + m.direction + (m.unread ? ' unread' : '')}>
|
|
<header className="jc-comm-h">
|
|
<span className={'jc-comm-dir t-' + m.direction}>
|
|
<Ico name={m.direction === 'in' ? 'corner-down-left' : 'corner-up-right'} s={12} />
|
|
{m.direction === 'in' ? '收到' : '发出'}
|
|
</span>
|
|
<b className="jc-comm-sub">{m.subject}</b>
|
|
{/* 未读点:一眼扫得出哪几封还没看 —— 与右边那个按钮说的是同一件事 */}
|
|
{m.unread && <span className="jc-comm-new">未读</span>}
|
|
<span className="jc-comm-at jc-mono">{atMinute(m.at)}</span>
|
|
{/*
|
|
标记按钮 —— **气泡计数只跟着这一下走**。
|
|
不做「打开页签即已读」:那是替人宣布他看过了,而他可能只是路过。
|
|
反向也留着:看了一半想留个记号,标回未读。
|
|
*/}
|
|
<button
|
|
type="button"
|
|
className={'jc-comm-mark' + (m.unread ? '' : ' done')}
|
|
disabled={markRead.isPending}
|
|
aria-label={m.unread ? `把「${m.subject}」标为已读` : `把「${m.subject}」标回未读`}
|
|
onClick={() => markRead.mutate({ commId: m.id, read: m.unread })}
|
|
>
|
|
<Ico name={m.unread ? 'check' : 'rotate-ccw'} s={11} />
|
|
{m.unread ? '标为已读' : '标回未读'}
|
|
</button>
|
|
</header>
|
|
<div className="jc-comm-meta">
|
|
<span className="jc-mono">{m.channel}</span>
|
|
<span>{m.direction === 'in' ? '来自' : '发往'}</span>
|
|
<b>{m.party === '' ? '未署名' : m.party}</b>
|
|
{m.note !== '' && <em>{m.note}</em>}
|
|
</div>
|
|
{m.body !== '' && <pre className="jc-comm-body">{m.body}</pre>}
|
|
{m.attachments.length > 0 && (
|
|
<div className="jc-comm-att">
|
|
{m.attachments.map((a) => (
|
|
<span key={a.name} className={'jc-att' + (a.readable === true ? '' : ' blind')}>
|
|
<Ico name={a.readable === true ? 'file-text' : 'alert-triangle'} s={12} />
|
|
<b>{a.name}</b>
|
|
{a.size !== undefined && <i className="jc-mono">{(a.size / 1024).toFixed(0)} KB</i>}
|
|
{a.note !== undefined && <em>{a.note}</em>}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
))}
|
|
</div>
|
|
)
|
|
) : view === 'wf' ? (
|
|
<WfDetail detail={detail} openN={openList.length} doneN={orders.length - openList.length} />
|
|
) : view === 'log' ? (
|
|
detail.log.length > 0 ? (
|
|
<div className="jc-log">
|
|
{detail.log.map((line) => (
|
|
/*
|
|
* **三色一档一意**(2026-08-02 用户定):负责人绿 · 智能体蓝 · 系统灰。
|
|
* 从前按归侧上色,而归侧有五种 —— 那是**度量**的分法
|
|
* (自主率要把「等外面」与「机器干的」分开);人扫这一屏只问
|
|
* 「这一步是我办的、AI 办的,还是流程自己走到的」。
|
|
*/
|
|
<LogRow key={line.id} line={line} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
ico="archive"
|
|
tone="brand"
|
|
title="还没有进展"
|
|
desc="AI 每推进一步都记在这里,并标明是谁的产出:AI 完成、我填的、我确认的、等外部。"
|
|
/>
|
|
)
|
|
) : view === 'done' ? (
|
|
doneItem !== undefined ? (
|
|
/*
|
|
* **定稿归档 = 办结那一刻的件快照,1:1 静态重放**(2026-08-02 用户:
|
|
* 「HTML UI、数据、内容、布局都要 1:1 地从待处理状态转换为静态报告
|
|
* 放到工作成果」—— 反复强调过)。
|
|
*
|
|
* 从前两条路都不对:验收单渲**当下**的任务视图(随后续推进还会变),
|
|
* 执行单干脆退回 WorkOrderReport 卡壳(题头/编号带/blocks)——
|
|
* 没有一样是人办结时看到的那份。现在办结那一刻基座把渲好的件
|
|
* 存进工单(`finalHtml`),这里原样静态渲它;老单没有快照的,
|
|
* 退最近一帧任务视图,再没有才退卡壳(历史兼容)。
|
|
*/
|
|
doneItem.finalHtml !== undefined || detail.viewHtml !== undefined ? (
|
|
<ViewContainer
|
|
html={doneItem.finalHtml ?? detail.viewHtml ?? ''}
|
|
title={`${detail.card.activity} · 定稿报告`}
|
|
/>
|
|
) : (
|
|
<article className="jc-mst-doc">
|
|
<WorkOrderReport
|
|
order={doneItem}
|
|
detail={detail}
|
|
typeLine={doneItem.mode === 'acceptance' ? '验收工单 · 定稿归档' : '执行工单 · 定稿归档'}
|
|
blocks={doneItem.blocks !== undefined && doneItem.blocks.length > 0 ? doneItem.blocks : detail.view}
|
|
values={{}}
|
|
onField={() => undefined}
|
|
onReply={() => undefined}
|
|
/>
|
|
</article>
|
|
)
|
|
) : doneList.length > 0 ? (
|
|
/* 一行一份成果报告,点进去看整篇(PRD:jc-dvs 列表) */
|
|
<div className="jc-dvs">
|
|
{doneList.map((o) => {
|
|
const res = o.done?.result;
|
|
const bad = res !== undefined && isRejection(res);
|
|
return (
|
|
<button
|
|
key={o.id}
|
|
type="button"
|
|
/*
|
|
* **执行与验收两种颜色**(2026-08-02 用户定):一摞成果里
|
|
* 「我办过的那张单」与「我签过字的那一关」是两类东西 ——
|
|
* 同色排下来,人得逐行读标题才分得出。退回的仍压过颜色走警示色。
|
|
*/
|
|
className={
|
|
'jc-dv jc-dv-row ' + (bad ? 's-bad' : 's-ok') + (o.mode === 'acceptance' ? ' m-acc' : ' m-exe')
|
|
}
|
|
onClick={() => setDoneSel(o.id)}
|
|
>
|
|
<span className="jc-dv-h">
|
|
<span className="jc-dv-ico">
|
|
<Ico name={o.mode === 'acceptance' ? 'shield-check' : 'file-text'} s={16} />
|
|
</span>
|
|
<span className="jc-dv-t">
|
|
<em>
|
|
派发 {atMinute(o.at)}
|
|
{o.done !== undefined ? ` · 办结 ${atMinute(o.done.at)}` : ''}
|
|
</em>
|
|
<b>{o.title}</b>
|
|
</span>
|
|
<span className="jc-dv-st">
|
|
{bad ? '已退回' : o.mode === 'acceptance' ? '验收通过' : '已办结'}
|
|
</span>
|
|
<Ico name="chevron-right" s={15} />
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
ico="archive"
|
|
tone="brand"
|
|
title="还没有成果报告"
|
|
desc="办结一件工单,它就会定稿成一份可回看的报告,归档在这里 —— 一行一份、点开整篇看。"
|
|
hint="先去「待处理」把手上的事办完"
|
|
/>
|
|
)
|
|
) : cur !== undefined ? (
|
|
/*
|
|
* **工作区只放那份件本身**(2026-08-01 用户定)。
|
|
*
|
|
* 从前这里是 `WorkOrderReport`:它自带题头、编号带、依据带、判据表、
|
|
* 章节头,再把活动推的那一屏**包在自己里面** —— 于是人看到的是
|
|
* 「一份报告里嵌着另一份报告」,两套版面语言叠在一起。用户原话:
|
|
* 「你用你自己的报告格式嵌套了一层我要的报告格式」。
|
|
*
|
|
* 现在分家:件归工作区(整篇铺开、可就地改),
|
|
* **判据与作业指导书跟着「要你办的这件事」走,落在对话区的卡上**;
|
|
* 提交那一下也在那儿 —— 编辑与提交分在两个区,缓冲由壳层持有(values)。
|
|
*
|
|
* 活动没推件的(还没到推件那一拍、或包里就没有模版)才退回工单报告:
|
|
* 那时工作区总不能是白的。
|
|
*/
|
|
detail.viewHtml !== undefined ? (
|
|
<ViewContainer
|
|
html={detail.viewHtml}
|
|
title={`${detail.card.activity} · 汇报报告`}
|
|
page={docPage}
|
|
onPages={setDocPages}
|
|
editable
|
|
onEdits={(save) => {
|
|
/*
|
|
* **落库按地址走** —— 件自己说了它是哪张表(`data-edit="域.对象"`),
|
|
* 原样送上去即可。从前借道当下那张卡的 `blocks[i]` 收列名,于是
|
|
* 卡上没有那一块时(熔断卡就没有)**保存一格都送不出去**,
|
|
* 而屏上照旧有闸、有编辑、有保存 —— 界面给了个落不了地的口子。
|
|
*
|
|
* 缓冲那一份仍按卡的形状收(`table:N`):卡上那张表由提交那一下带走,
|
|
* 与件上这一张是两条路,卡没有对应的块时它自然收不到东西,不影响落库。
|
|
*/
|
|
saveTable.mutate(save);
|
|
collectEdits(save.tables, cur, onField);
|
|
}}
|
|
/>
|
|
) : (
|
|
<article className="jc-mst-doc">
|
|
<WorkOrderReport
|
|
order={cur}
|
|
detail={detail}
|
|
typeLine={cur.mode === 'acceptance' ? '验收工单 · 终局唯放行' : '执行工单 · 作业指导书 + 表单'}
|
|
blocks={cur.blocks !== undefined && cur.blocks.length > 0 ? cur.blocks : detail.view}
|
|
values={values}
|
|
onField={onField}
|
|
onReply={onReplyOrder}
|
|
/>
|
|
{cur.mode === 'execution' && <GuideCard order={cur} />}
|
|
</article>
|
|
)
|
|
) : (
|
|
/*
|
|
* 空待处理**四态分明** —— 状态如实,不许一句「没有待办」把四种局面糊成一种:
|
|
* 推进中 = AI 在自己转(动画场景);等外部 = 环停着听回音;
|
|
* 都办完了 = 你的活清零、单还在走;已收尾 = 一切定稿。
|
|
*/
|
|
detail.card.terminal !== undefined ? (
|
|
<EmptyState
|
|
ico="circle-check"
|
|
tone="ok"
|
|
title="这单已收尾"
|
|
desc="所有工单都定稿归档了。要回看哪一份,去「工作成果」一行一份点开整篇。"
|
|
/>
|
|
) : signed ? (
|
|
/*
|
|
* **签完到收尾之间那一小段**(2026-08-02 用户:「点完验收按钮后,
|
|
* 状态变化时交互上会闪一下中间态,视觉效果不好」)。
|
|
*
|
|
* 那一闪不是渲染毛病,是**真的中间态**:字签下去了,合并、发口、收尾还在跑。
|
|
* 从前这一段落在通用四态里 —— 待办清零 → 「都办完了」闪一下 → 再跳「已收尾」。
|
|
* 「都办完了」这句话在那一刻是对的,可它说的是**另一件事**(你手上没活了),
|
|
* 于是读起来像跳了一帧。
|
|
*
|
|
* 现在这一段有自己的话:**字已签下,正在落地**。它不是为了盖住中间态 ——
|
|
* 中间态本来就该说出来,只是要说对。
|
|
*/
|
|
<EmptyState
|
|
ico="hourglass"
|
|
tone="brand"
|
|
title="字已签下,正在落地"
|
|
desc="成果正在并进正式表、按去向发往下游。落完这一屏会换成收尾结果 —— 不用刷新。"
|
|
hint="通常几秒钟"
|
|
/>
|
|
) : detail.card.runtime === 'running' ? (
|
|
<WorkingScene doneN={doneList.length} />
|
|
) : detail.card.runtime === 'awaiting-event' ? (
|
|
<EmptyState
|
|
ico="hourglass"
|
|
tone="brand"
|
|
title="AI 在等一个外部回音"
|
|
desc="等的可能是一封回信、一批数据、或一个时点。回音一到它就接着推进;需要你出手时,工单会带着完整上下文出现在这里。"
|
|
hint="不用盯着 —— 轮到你时左侧列表会亮角标"
|
|
/>
|
|
) : doneList.length > 0 ? (
|
|
<EmptyState
|
|
ico="circle-check"
|
|
tone="ok"
|
|
title="都办完了"
|
|
desc="手上的工单清零。AI 接着往下推进,需要你执行或验收的,会第一时间送到这里。"
|
|
hint="工作成果里可以回看每一份定稿报告"
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
ico="list-checks"
|
|
tone="brand"
|
|
title="手上没有待办"
|
|
desc="需要你执行或验收的事会送到这里,带着办这件事要用的全部上下文 —— 不用你去别处找。"
|
|
hint="轮到你时会第一时间出现"
|
|
/>
|
|
)
|
|
)}
|
|
</ScrollArea>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
/* ═════════════════ AI 推进中 · 空工作区的工作场景 ═════════════════ */
|
|
|
|
/**
|
|
* AI 正在办这单、还没轮到人 —— 空待处理不是「没有东西」,是**有人在干活**。
|
|
* 涟漪说「环在转」,微光工作线说「报告正在一行行写出来」;
|
|
* 都是纯 CSS、只动 transform/opacity,prefers-reduced-motion 下静止但状态仍可读。
|
|
*/
|
|
/**
|
|
* 日志一行 —— **折叠时一行,展开才看细节**(2026-08-03 用户:「细节展开不够好」)。
|
|
*
|
|
* 这一屏的用法是**扫**:一眼看完这单走过哪几步、谁办的。所以密度不能破 ——
|
|
* 细节收进抽屉,想深究哪一条点哪一条。**没有细节的条目不给展开钮**:
|
|
* 摆一个点开是空的抽屉,比不给还糟(点一次才知道白点)。
|
|
*
|
|
* 展开不做动画高度:日志动辄几十条,一条一个过渡就是一屏都在抖。
|
|
*/
|
|
function LogRow({ line }: { line: TaskDetail['log'][number] }) {
|
|
const [open, setOpen] = useState(false);
|
|
const has = line.detail.length > 0;
|
|
return (
|
|
<div className={'jc-log-row t-' + line.who + (open ? ' on' : '')}>
|
|
<span className="jc-log-at jc-mono">{atMinute(line.at)}</span>
|
|
{/* 章摆的是**动作**(四字,与对话区同词),不是归侧 ——
|
|
归侧仍在 `t-${side}` 的配色里,度量也照旧靠它 */}
|
|
<span className="jc-log-side">{line.action}</span>
|
|
<span className="jc-log-t">
|
|
{has ? (
|
|
<button type="button" className="jc-log-more" onClick={() => setOpen(!open)} aria-expanded={open}>
|
|
<b>{line.title}</b>
|
|
<Ico name={open ? 'chevron-down' : 'chevron-right'} s={13} />
|
|
</button>
|
|
) : (
|
|
<b>{line.title}</b>
|
|
)}
|
|
{line.summary !== undefined && <em>{line.summary}</em>}
|
|
{/*
|
|
* **展开就是把话说完,不摆二级条目**(2026-08-03 用户定)。
|
|
*
|
|
* 从前展开出来是一摞「键:值」—— 那是把留痕的字段名搬到人面前,
|
|
* 人还得自己在脑子里把它们连成一句话。日志是给人读的:
|
|
* 该说的直接写成正文,一段说完;真有两三样要说的,一样一段。
|
|
*/}
|
|
{open && (
|
|
<div className="jc-log-body">
|
|
{line.detail.map((text, i) => (
|
|
<p key={i}>{text}</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WorkingScene({ doneN }: { doneN: number }) {
|
|
return (
|
|
<div className="jc-working" aria-live="polite">
|
|
<span className="jc-working-art" aria-hidden>
|
|
<i className="rp" />
|
|
<i className="rp rp2" />
|
|
<span className="jc-working-ico">
|
|
<Ico name="bot" s={26} />
|
|
</span>
|
|
</span>
|
|
<b>AI 正在推进这单</b>
|
|
<p>
|
|
看材料、写台账、调工具都由它来;需要你执行或验收的,工单会带着完整上下文出现在这里。
|
|
{doneN > 0 ? `此前你办结的 ${doneN} 件都在「工作成果」里。` : ''}
|
|
</p>
|
|
<span className="jc-working-lines" aria-hidden>
|
|
<i />
|
|
<i />
|
|
<i />
|
|
</span>
|
|
<span className="jc-working-hint">
|
|
<i className="jc-pulse-dot" />
|
|
实时盯着 · 有进展这里立即更新
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ═════════════════ 任务详情:KPI 带 + 流程链 + 上下文档案 ═════════════════ */
|
|
|
|
function WSec({ ico, label, aside }: { ico: string; label: string; aside?: React.ReactNode }) {
|
|
return (
|
|
<div className="jc-wfd-sec">
|
|
<span className="jc-wfd-sec-ico">
|
|
<Ico name={ico} s={12} />
|
|
</span>
|
|
<b>{label}</b>
|
|
<i className="ln" />
|
|
{aside}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WfDetail({ detail, openN, doneN }: { detail: TaskDetail; openN: number; doneN: number }) {
|
|
return (
|
|
<div className="jc-wfd-body">
|
|
<KpiBand budget={detail.budget} />
|
|
|
|
<WSec
|
|
ico="git-branch"
|
|
label="流程链"
|
|
aside={
|
|
<span className="jc-wfd-pos">
|
|
<i className="jc-pulse-dot" />
|
|
当前 · {detail.card.position}/{detail.card.total} {detail.card.activity}
|
|
</span>
|
|
}
|
|
/>
|
|
<div className="jc-wfg2">
|
|
{detail.chain.map((n, k) => (
|
|
<div
|
|
key={n.nodeId}
|
|
className={`jc-map-n s-${n.state === 'current' ? 'cur' : n.state}${n.kind === 'approval' ? ' apr' : ''}`}
|
|
title={`${n.nodeId} ${n.label} · ${n.ownerName} · ${n.ownerRole}${n.kind === 'approval' ? '(审批点)' : ''}`}
|
|
>
|
|
{n.state === 'current' && (
|
|
<span className="jc-map-me">
|
|
<i className="jc-pulse-dot" />
|
|
你在这
|
|
</span>
|
|
)}
|
|
<div className="jc-map-nh">
|
|
<em className="jc-mono">{k + 1}</em>
|
|
{n.state === 'done' ? (
|
|
<span className="jc-map-ok">
|
|
<Ico name="check" s={11} />
|
|
</span>
|
|
) : n.kind === 'approval' ? (
|
|
<span className="jc-map-ap">
|
|
<Ico name="shield-check" s={11} />
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<b>{n.label}</b>
|
|
<span className="jc-map-who">
|
|
<i>{n.ownerName.charAt(0)}</i>
|
|
{n.ownerName} · {n.ownerRole}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{detail.chain.length === 0 && <p className="jc-ck-none">这单不在流程上(直接起单)</p>}
|
|
</div>
|
|
|
|
<div className="jc-duo2">
|
|
<div className="jc-panel">
|
|
<div className="jc-panel-h">
|
|
<span className="jc-panel-ico">
|
|
<Ico name="bar-chart" s={12} />
|
|
</span>
|
|
<b>过程视图</b>
|
|
<em>活动推送</em>
|
|
</div>
|
|
<ViewBlocks blocks={detail.view} />
|
|
</div>
|
|
<div className="jc-panel">
|
|
<div className="jc-panel-h">
|
|
<span className="jc-panel-ico">
|
|
<Ico name="notebook-pen" s={12} />
|
|
</span>
|
|
<b>上下文</b>
|
|
<em className="jc-mono">{detail.card.id}</em>
|
|
</div>
|
|
<div className="jc-file-rows">
|
|
<div className="jc-file-row">
|
|
<i>
|
|
<Ico name="target" s={13} />
|
|
</i>
|
|
<em>本单目标</em>
|
|
<p>{detail.goal}</p>
|
|
</div>
|
|
<div className="jc-file-row">
|
|
<i>
|
|
<Ico name="git-branch" s={13} />
|
|
</i>
|
|
<em>所属工作流</em>
|
|
<p>
|
|
{detail.card.workflowSubject}
|
|
<span>
|
|
序位 {detail.card.position}/{detail.card.total}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div className="jc-file-row">
|
|
<i>
|
|
<Ico name="activity" s={13} />
|
|
</i>
|
|
<em>运行状态</em>
|
|
<p>
|
|
<b>已派 {openN + doneN} 件</b> · 办完 {doneN} · 待办 {openN}
|
|
<span>AI 边推进边派工,件数还会增加</span>
|
|
</p>
|
|
</div>
|
|
<div className="jc-file-row">
|
|
<i>
|
|
<Ico name="hash" s={13} />
|
|
</i>
|
|
<em>编号</em>
|
|
<p className="jc-mono">
|
|
{detail.card.id}
|
|
<span className="jc-mono">起于 {atFull(detail.card.startedAt)}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** KPI 指标带:四层卡解剖(维度徽 → 指标名 → 大数 → 限额条);限额是基座在环外强制的 */
|
|
function KpiBand({ budget }: { budget: TaskDetail['budget'] }) {
|
|
const meter = (p: string) => {
|
|
const [a = '0', z = '0'] = p.split('/').map((x) => x.trim());
|
|
const r = Math.max(0, Math.min(1, Number(a) / (Number(z) || 1)));
|
|
return { a, z, r, tone: r >= 0.85 ? 'hot' : r >= 0.6 ? 'warm' : 'cool' };
|
|
};
|
|
const KPI = [
|
|
{ dim: '步数', icon: 'activity', ...meter(budget.steps) },
|
|
{ dim: 'Tokens', icon: 'cpu', ...meter(budget.tokens) },
|
|
{ dim: '持续时长', icon: 'clock', ...meter(budget.activeMinutes) },
|
|
{ dim: '调人次数', icon: 'users', ...meter(budget.humanCalls) },
|
|
];
|
|
return (
|
|
<div className="jc-kpis">
|
|
{KPI.map((k) => (
|
|
<div key={k.dim} className="jc-kpi">
|
|
<span className="jc-kpi-dim d-act">
|
|
<Ico name={k.icon} s={10} />
|
|
当前活动
|
|
</span>
|
|
<em>{k.dim}</em>
|
|
<b className="jc-mono">
|
|
{k.a}
|
|
<i>/ {k.z}</i>
|
|
</b>
|
|
<span className={'jc-ck-bar t-' + k.tone}>
|
|
<i style={{ width: `${Math.round(k.r * 100)}%` }} />
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ═════════════════ 工单报告页 ═════════════════ */
|
|
|
|
|