M6(1/n): 工作台任务要素 —— 原型 1:1 平移的第一屏
样式整文件搬(README 平移规则 1):app.css 2767 行 + proto.vendor.css + theme.css + console.css 原样搬,设计令牌与全部 jc-* / g-* 类名不动。 前端(按 §9 重排,渲染输出 1:1): - shared/:Ico / ScrollArea / useChatWidth 自原型搬,去掉 "use client" 等 Next 专有件; 失效的 react-hooks disable 指令按 §17 清掉(不改渲染) - shared/typed-fetch.ts:服务端交互唯一通道,路由契约来自 @contracts/api; 不引 Hono RPC 客户端(那要求前端 import 后端类型,违反 §5.1) - app/query.ts:TanStack Query;缓存失效由订阅层驱动,组件不轮询 - features/desk-task:任务列表(一条 = 一个活动的一次运行,不是一整条工作流)/ 标题区 + 工作区四页签 / 对话区(气泡二元制 + 卡族 + **composer 锁**) - @ui:ViewContainer 用**沙箱 iframe(sandbox 不含 allow-scripts)** —— 结构上无脚本执行权, 不依赖净化算法的完备性;ViewBlocks 渲染十一种视图块 feature 不得自行 dangerouslySetInnerHTML,eslint 有规则守着 后端:工作台路由 /api/desk/*(任务清单 / 任务详情 / 工单回传 / 自由输入 / 消息); 回传与后端校验**同 schema**;任务详情是服务端投影 —— 前端零过程状态,刷新即重建 已验证(真机):任务卡「A1 RFQ需求分析 · 序位 1/7 · awaiting-event」、 预算 2/40 步、1 张工单(LLM 步失败后转人兜底那张)、7 行带归侧标签的任务日志 358 个测试通过,门禁五道全绿;web 构建通过 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
JCAI Main Agent
co-authored by
Claude Opus 5
Claude Opus 5
parent
3df8becf67
commit
3cfaa04098
@@ -0,0 +1,2 @@
|
||||
/** feature: desk-task —— 对外类型(编码规范 §9.1) */
|
||||
export type { TaskCard, TaskDetail } from '@contracts';
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* feature: desk-task —— 唯一出口(编码规范 §9.1)。
|
||||
* 任务要素四区:任务列表 / 标题区 / 工作区(工单两模式)/ 对话区(卡族 + composer 锁)。
|
||||
*/
|
||||
export type { TaskCard, TaskDetail } from './contract.ts';
|
||||
export { TaskList } from './internal/TaskList.tsx';
|
||||
export { ViewRegion } from './internal/ViewRegion.tsx';
|
||||
export { TaskChat } from './internal/TaskChat.tsx';
|
||||
@@ -0,0 +1,175 @@
|
||||
/**
|
||||
* 对话区 —— 自原型 `_components/TaskChat.tsx` 平移。
|
||||
*
|
||||
* 「对话区**只承载非结构化消息 + 决策选择题**;事件由系统 Agent(灰头像)发进来。」
|
||||
* 对话流是**一切回环输入的唯一入口**(OS 4.1);输入侧不参与控制权转交(AM 07)。
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import type { ChatMessage } from '@contracts';
|
||||
import { AI_TAG_LABEL, EVENT_TYPE_LABEL } from '@contracts';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import ScrollArea from '@web-shared/ScrollArea.tsx';
|
||||
|
||||
export type TaskChatProps = {
|
||||
readonly chat: readonly ChatMessage[];
|
||||
readonly locked: boolean;
|
||||
onSay(text: string): void;
|
||||
onDecide(cardId: string, value: string, note?: string): void;
|
||||
};
|
||||
|
||||
export function TaskChat({ chat, locked, onSay, onDecide }: TaskChatProps) {
|
||||
const [draft, setDraft] = useState('');
|
||||
|
||||
const submit = () => {
|
||||
const text = draft.trim();
|
||||
if (text === '' || locked) return;
|
||||
onSay(text);
|
||||
setDraft('');
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="session-chat">
|
||||
<header className="jc-chat-head">
|
||||
<span className="jc-chat-ico">
|
||||
<Ico name="messages-square" s={16} />
|
||||
</span>
|
||||
<div>
|
||||
<h2>任务助理</h2>
|
||||
<span>对话流 · 唯一回环输入口</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ScrollArea className="jc-sa--fill" vpClassName="jc-chat-body">
|
||||
{chat.map((msg) => (
|
||||
<Bubble key={msg.id} msg={msg} onDecide={onDecide} />
|
||||
))}
|
||||
{chat.length === 0 && (
|
||||
<div className="jc-list-empty">
|
||||
<Ico name="messages-square" s={18} />
|
||||
还没有对话
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* composer 锁:有卡在等作答时锁住自由输入,逼回卡上作答 */}
|
||||
<footer className={'jc-composer' + (locked ? ' locked' : '')}>
|
||||
<textarea
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder={locked ? '有卡在等你作答 —— 请先在卡上回答' : '说点什么…(Enter 发送)'}
|
||||
disabled={locked}
|
||||
rows={2}
|
||||
/>
|
||||
<button className="jc-btn primary" onClick={submit} disabled={locked || draft.trim() === ''}>
|
||||
发送
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** 气泡二元制:AI / 我;系统事件走灰头像 */
|
||||
function Bubble({ msg, onDecide }: { msg: ChatMessage; onDecide: TaskChatProps['onDecide'] }) {
|
||||
if (msg.k === 'ai') {
|
||||
return (
|
||||
<div className="jc-bubble side-ai">
|
||||
<span className="jc-ava ai">AI</span>
|
||||
<div className="jc-bubble-body">
|
||||
{msg.tag !== undefined && <b className={'jc-tag tag-' + msg.tag}>{AI_TAG_LABEL[msg.tag]}</b>}
|
||||
<p>{msg.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (msg.k === 'human') {
|
||||
return (
|
||||
<div className="jc-bubble side-me">
|
||||
<div className="jc-bubble-body">
|
||||
<p>{msg.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (msg.k === 'system') {
|
||||
return (
|
||||
<div className="jc-bubble side-sys">
|
||||
<span className="jc-ava sys">
|
||||
<Ico name="bot" s={14} />
|
||||
</span>
|
||||
<div className="jc-bubble-body">
|
||||
<b className="jc-tag tag-event">{EVENT_TYPE_LABEL[msg.type]}事件</b>
|
||||
<p>{msg.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (msg.k === 'decision') {
|
||||
// 对话区只做选择题 —— 决策卡
|
||||
return (
|
||||
<div className="jc-bubble side-ai">
|
||||
<span className="jc-ava ai">AI</span>
|
||||
<div className="jc-bubble-body jc-card-decide">
|
||||
<p className="jc-card-ask">{msg.ask}</p>
|
||||
<dl className="jc-basis">
|
||||
{msg.basis.map((b, i) => (
|
||||
<div key={i}>
|
||||
<dt>{b.k}</dt>
|
||||
<dd>{b.v}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<div className="jc-options">
|
||||
{msg.options.map((o) => (
|
||||
<button
|
||||
key={o.value}
|
||||
className={'jc-opt' + (o.recommended === true ? ' recommended' : '') + (msg.chosen?.value === o.value ? ' chosen' : '')}
|
||||
disabled={msg.chosen !== undefined}
|
||||
onClick={() => onDecide(msg.id, o.value)}
|
||||
>
|
||||
<b>{o.label}</b>
|
||||
{o.detail !== undefined && <span>{o.detail}</span>}
|
||||
{o.consequence !== undefined && <em>{o.consequence}</em>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (msg.k === 'elicitation') {
|
||||
return (
|
||||
<div className="jc-bubble side-ai">
|
||||
<span className="jc-ava ai">AI</span>
|
||||
<div className="jc-bubble-body jc-card-fill">
|
||||
<p className="jc-card-ask">{msg.ask}</p>
|
||||
<ul>
|
||||
{msg.fields.map((f) => (
|
||||
<li key={f.key}>{f.label}</li>
|
||||
))}
|
||||
</ul>
|
||||
{msg.done !== undefined && <p className="jc-card-done">已作答</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="jc-bubble side-ai">
|
||||
<span className="jc-ava ai">AI</span>
|
||||
<div className="jc-bubble-body jc-card-rate">
|
||||
<p className="jc-card-ask">{msg.ask}</p>
|
||||
{msg.done !== undefined && <p className="jc-card-done">已评价 {msg.done.score} 分</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
/**
|
||||
* 任务列表区 —— 自 `~/coding/JCAI_PRD/workbench/(proto)/page.tsx` 平移。
|
||||
*
|
||||
* **DOM 结构与类名原样保留**(`jc-*` 前缀、vendor 皮肤一并搬);
|
||||
* 只把 mock 数据换成服务端投影,渲染输出保持 1:1(README 平移规则 1/2/4)。
|
||||
*
|
||||
* 「清单里一条 = 一个任务 = 一个活动的一次运行,不是一整条工作流。」
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import type { TaskCard } from '@contracts';
|
||||
import { TERMINAL_STATE_LABEL } from '@contracts';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import ScrollArea from '@web-shared/ScrollArea.tsx';
|
||||
|
||||
const TASK_COLORS = ['#3370ff', '#ff8800', '#7f3bf5', '#0aa294', '#f14ba9'];
|
||||
|
||||
type Status = 'active' | 'done';
|
||||
|
||||
export type TaskListProps = {
|
||||
readonly tasks: readonly TaskCard[];
|
||||
readonly selectedId: string;
|
||||
readonly collapsed: boolean;
|
||||
onPick(id: string): void;
|
||||
onCollapse(): void;
|
||||
};
|
||||
|
||||
const statusOf = (task: TaskCard): Status => (task.terminal === undefined ? 'active' : 'done');
|
||||
|
||||
export function TaskList({ tasks, selectedId, collapsed, onPick, onCollapse }: TaskListProps) {
|
||||
const [filter, setFilter] = useState<Status>('active');
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
if (collapsed) return null;
|
||||
|
||||
const count = (s: Status) => tasks.filter((t) => statusOf(t) === s).length;
|
||||
const q = query.trim().toLowerCase();
|
||||
const visible = tasks.filter(
|
||||
(t) =>
|
||||
statusOf(t) === filter &&
|
||||
(q === '' || `${t.title} ${t.activity} ${t.workflowSubject}`.toLowerCase().includes(q)),
|
||||
);
|
||||
|
||||
return (
|
||||
<aside className="task-sidebar">
|
||||
<div className="sidebar-head jc-wl-head">
|
||||
<span className="jc-wl-ico">
|
||||
<Ico name="list-checks" s={16} />
|
||||
</span>
|
||||
<div>
|
||||
<h2>任务列表</h2>
|
||||
<span>我负责的任务 · 共 {tasks.length} 项</span>
|
||||
</div>
|
||||
<button type="button" className="icon-button jc-wl-collapse" title="收起任务栏" onClick={onCollapse}>
|
||||
<Ico name="panel-left-close" s={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="jc-flt-wrap" aria-label="任务清单筛选">
|
||||
<div className="jc-flt" role="tablist" aria-label="按状态">
|
||||
<button className={filter === 'active' ? 'active' : ''} onClick={() => setFilter('active')}>
|
||||
<span>进行中</span>
|
||||
<strong>{count('active')}</strong>
|
||||
</button>
|
||||
<button className={filter === 'done' ? 'active' : ''} onClick={() => setFilter('done')}>
|
||||
<span>已完成</span>
|
||||
<strong>{count('done')}</strong>
|
||||
</button>
|
||||
</div>
|
||||
<div className="jc-search">
|
||||
<Ico name="search" s={14} />
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索任务 / 活动 / 工作流…"
|
||||
aria-label="检索任务"
|
||||
/>
|
||||
{query !== '' && (
|
||||
<button type="button" className="jc-search-x" onClick={() => setQuery('')} aria-label="清空">
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="jc-sa--fill" vpClassName="task-list">
|
||||
{visible.length === 0 && (
|
||||
<div className="jc-list-empty">
|
||||
<Ico name="search" s={18} />
|
||||
无匹配任务
|
||||
</div>
|
||||
)}
|
||||
{visible.map((task, i) => (
|
||||
<TaskCardView
|
||||
key={task.id}
|
||||
task={task}
|
||||
index={i}
|
||||
selected={task.id === selectedId}
|
||||
onPick={() => onPick(task.id)}
|
||||
/>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 任务卡:定高信息卡 —— 图标 + 活动名 + 状态章 / 主题两行位 / 编号 + 流内序位 / 进度条。
|
||||
* 每行都有硬约束(单行省略或两行位),信息丰富但永不超限。
|
||||
*/
|
||||
function TaskCardView({
|
||||
task,
|
||||
index,
|
||||
selected,
|
||||
onPick,
|
||||
}: {
|
||||
task: TaskCard;
|
||||
index: number;
|
||||
selected: boolean;
|
||||
onPick: () => void;
|
||||
}) {
|
||||
const done = task.terminal !== undefined;
|
||||
const pct = done ? 100 : Math.round((task.position / task.total) * 100);
|
||||
return (
|
||||
<button
|
||||
className={'task-card jc-tc jc-tc3' + (selected ? ' selected' : '')}
|
||||
style={{ '--task-color': TASK_COLORS[index % TASK_COLORS.length] } as React.CSSProperties}
|
||||
onClick={onPick}
|
||||
>
|
||||
<span className="jc-tc3-head">
|
||||
<span className="jc-tc-ico">
|
||||
<Ico name="list-checks" s={14} />
|
||||
</span>
|
||||
<h3 className="jc-tc-title">{task.activity}</h3>
|
||||
{done ? (
|
||||
<span className="jc-tc-state st-done">
|
||||
<i />
|
||||
{TERMINAL_STATE_LABEL[task.terminal!]}
|
||||
</span>
|
||||
) : (
|
||||
<span className="jc-tc-state i-todo">
|
||||
<i />
|
||||
进行中
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="jc-tc2-sub jc-clamp2">{task.workflowSubject}</span>
|
||||
<span className="jc-tc3-meta">
|
||||
<code className="jc-mono">{task.id.slice(0, 8)}</code>
|
||||
<b className="jc-mono" title="它在工作流上的序位">
|
||||
{task.position}/{task.total}
|
||||
</b>
|
||||
</span>
|
||||
<span className="jc-tc-bar">
|
||||
<span style={{ width: `${pct}%` }} />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* 标题区 + 工作区 —— 自原型 `_components/ViewRegion.tsx` 平移(四页签结构)。
|
||||
*
|
||||
* 「视图区 = 全部结构化交互:HTML 交互界面(表单读写 + 图形展示)+ 工作事项列表 + 过程成果」;
|
||||
* 容器渲染活动推送的内容,**无脚本执行权**(AM 07);渲染一律经 @ui 的 ViewContainer。
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import type { TaskDetail, ViewBlock, WorkOrder } from '@contracts';
|
||||
import { ACTION_EFFECT_LABEL, WORK_ORDER_MODE_LABEL } from '@contracts';
|
||||
import { Ico } from '@web-shared/Ico.tsx';
|
||||
import ScrollArea from '@web-shared/ScrollArea.tsx';
|
||||
import { ViewBlocks } from '@ui';
|
||||
|
||||
type Tab = 'todo' | 'result' | 'detail' | 'log';
|
||||
|
||||
const TABS: ReadonlyArray<{ key: Tab; label: string; icon: string }> = [
|
||||
{ key: 'todo', label: '待处理', icon: 'list-checks' },
|
||||
{ key: 'result', label: '工作成果', icon: 'file-check' },
|
||||
{ key: 'detail', label: '任务详情', icon: 'bar-chart' },
|
||||
{ key: 'log', label: '工作日志', icon: 'notebook-pen' },
|
||||
];
|
||||
|
||||
export type ViewRegionProps = {
|
||||
readonly detail: TaskDetail;
|
||||
onReply(reply: Record<string, unknown>): void;
|
||||
};
|
||||
|
||||
export function ViewRegion({ detail, onReply }: ViewRegionProps) {
|
||||
const [tab, setTab] = useState<Tab>('todo');
|
||||
const open = detail.workOrders.filter((o) => o.done === undefined);
|
||||
|
||||
return (
|
||||
<main className="execution-panel jc-panel-card">
|
||||
<header className="jc-vr-head">
|
||||
<div className="jc-vr-title">
|
||||
<h1>{detail.card.title}</h1>
|
||||
<span className="jc-vr-sub">{detail.card.workflowSubject}</span>
|
||||
</div>
|
||||
<div className="jc-vr-budget jc-mono" title="预算与熔断由基座在环外强制">
|
||||
<span>步 {detail.budget.steps}</span>
|
||||
<span>token {detail.budget.tokens}</span>
|
||||
<span>时长 {detail.budget.activeMinutes}</span>
|
||||
<span>调人 {detail.budget.humanCalls}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav className="jc-vr-tabs" role="tablist">
|
||||
{TABS.map((t) => (
|
||||
<button key={t.key} className={tab === t.key ? 'active' : ''} onClick={() => setTab(t.key)} role="tab">
|
||||
<Ico name={t.icon} s={14} />
|
||||
<span>{t.label}</span>
|
||||
{t.key === 'todo' && open.length > 0 ? <b className="jc-vr-tab-badge">{open.length}</b> : null}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<ScrollArea className="jc-sa--fill" vpClassName="jc-vr-body">
|
||||
{tab === 'todo' &&
|
||||
(open.length === 0 ? (
|
||||
<div className="jc-list-empty">
|
||||
<Ico name="list-checks" s={18} />
|
||||
当前没有等你的工作事项
|
||||
</div>
|
||||
) : (
|
||||
open.map((order) => <WorkOrderCard key={order.id} order={order} onReply={onReply} />)
|
||||
))}
|
||||
|
||||
{tab === 'result' && <ViewBlocks blocks={detail.view as ViewBlock[]} />}
|
||||
|
||||
{tab === 'detail' && (
|
||||
<div className="jc-vr-detail">
|
||||
<ViewBlocks blocks={detail.view as ViewBlock[]} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'log' && (
|
||||
<ol className="jc-log">
|
||||
{detail.log.map((line) => (
|
||||
<li key={line.id} className={'jc-log-item side-' + line.side}>
|
||||
<span className="jc-log-side">{line.sideLabel}</span>
|
||||
<span className="jc-log-title">{line.title}</span>
|
||||
<time className="jc-mono">{line.at.slice(11, 19)}</time>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/** 工单两模式:执行 = 指导书 + 空表单;验收 = 可修订报告 + 判据核对 + 放行三选一 */
|
||||
function WorkOrderCard({ order, onReply }: { order: WorkOrder; onReply(reply: Record<string, unknown>): void }) {
|
||||
const [values, setValues] = useState<Record<string, string>>(() =>
|
||||
Object.fromEntries(
|
||||
(order.mode === 'execution' ? order.fields : order.fields).map((f) => [f.key, f.ai ?? '']),
|
||||
),
|
||||
);
|
||||
const [comment, setComment] = useState('');
|
||||
|
||||
const set = (key: string, value: string) => setValues((v) => ({ ...v, [key]: value }));
|
||||
|
||||
return (
|
||||
<article className="jc-wo jc-panel-card">
|
||||
<header className="jc-wo-head">
|
||||
<span className={'jc-wo-mode mode-' + order.mode}>{WORK_ORDER_MODE_LABEL[order.mode]}</span>
|
||||
<h3>{order.title}</h3>
|
||||
</header>
|
||||
|
||||
{/* 调用必附上下文 —— 依据快照 */}
|
||||
<dl className="jc-wo-basis">
|
||||
{order.basis.map((b, i) => (
|
||||
<div key={i}>
|
||||
<dt>{b.k}</dt>
|
||||
<dd>{b.v}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
|
||||
{order.mode === 'execution' ? (
|
||||
<>
|
||||
<p className="jc-wo-ask">{order.ask}</p>
|
||||
{order.standard !== undefined && <p className="jc-wo-standard">完成标准:{order.standard}</p>}
|
||||
{order.steps !== undefined && (
|
||||
<ol className="jc-wo-steps">
|
||||
{order.steps.map((s, i) => (
|
||||
<li key={i}>{s}</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
<div className="jc-wo-form">
|
||||
{order.fields.map((f) => (
|
||||
<label key={f.key} className={'jc-field' + (f.cols === 2 ? ' half' : '')}>
|
||||
<span>
|
||||
{f.label}
|
||||
{f.required === true ? <i className="jc-req">*</i> : null}
|
||||
</span>
|
||||
{f.kind === 'textarea' ? (
|
||||
<textarea value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)} rows={3} />
|
||||
) : f.kind === 'radio' || f.kind === 'select' ? (
|
||||
<select value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)}>
|
||||
<option value="">请选择</option>
|
||||
{(f.options ?? []).map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input value={values[f.key] ?? ''} onChange={(e) => set(f.key, e.target.value)} placeholder={f.placeholder} />
|
||||
)}
|
||||
{f.hint !== undefined && <em className="jc-hint">{f.hint}</em>}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<footer className="jc-wo-foot">
|
||||
<button
|
||||
className="jc-btn primary"
|
||||
onClick={() => onReply({ mode: 'execution', workOrderId: order.id, values })}
|
||||
>
|
||||
{order.submitLabel ?? '提交'}
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 判据逐条核对 —— 成果清单的成色标记 */}
|
||||
<ul className="jc-criteria">
|
||||
{order.criteria.map((c, i) => (
|
||||
<li key={i} className={c.pass ? 'pass' : 'fail'}>
|
||||
<b className="jc-lv">{c.level}</b>
|
||||
<span>{c.label}</span>
|
||||
<i>{c.pass ? '✓' : '○'}</i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{order.actions !== undefined && order.actions.length > 0 && (
|
||||
<ul className="jc-actions" title="预检全过才发卡:这里是已验证的动作清单">
|
||||
{order.actions.map((a, i) => (
|
||||
<li key={i}>
|
||||
<b className={'jc-eff eff-' + a.effect}>{ACTION_EFFECT_LABEL[a.effect]}</b>
|
||||
<span>{a.label}</span>
|
||||
<em>{a.detail}</em>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<label className="jc-field">
|
||||
<span>意见(驳回必填)</span>
|
||||
<textarea value={comment} onChange={(e) => setComment(e.target.value)} rows={2} />
|
||||
</label>
|
||||
<footer className="jc-wo-foot">
|
||||
{/* 三选一:放行通过 / 驳回重做 / 驳回迭代 —— 完成只出自放行通过 */}
|
||||
<button
|
||||
className="jc-btn primary"
|
||||
onClick={() =>
|
||||
onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'pass', values, selectedPorts: {} })
|
||||
}
|
||||
>
|
||||
{order.passLabel ?? '放行通过'}
|
||||
</button>
|
||||
<button
|
||||
className="jc-btn"
|
||||
onClick={() =>
|
||||
onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'revise', values, comment, selectedPorts: {} })
|
||||
}
|
||||
>
|
||||
驳回迭代
|
||||
</button>
|
||||
<button
|
||||
className="jc-btn danger"
|
||||
onClick={() =>
|
||||
onReply({ mode: 'acceptance', workOrderId: order.id, verdict: 'redo', values, comment, selectedPorts: {} })
|
||||
}
|
||||
>
|
||||
驳回重做
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user