forked from ChaiHao/BPOS-MVP
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
@@ -5,6 +5,9 @@
|
||||
import { z } from 'zod';
|
||||
import type { RouteContract } from './http.ts';
|
||||
import { sessionSchema } from '../org.ts';
|
||||
import { chatMessageSchema, deliverableSchema, stageSchema, viewBlockSchema, workOrderSchema } from '../card.ts';
|
||||
import { attributionSideSchema, taskRuntimeStateSchema, terminalStateSchema, workflowStateSchema } from '../terminal.ts';
|
||||
import { taskIdSchema } from '../id.ts';
|
||||
|
||||
export const sessionRoute = {
|
||||
method: 'GET',
|
||||
@@ -21,3 +24,97 @@ export const healthRoute = {
|
||||
db: z.enum(['up', 'down']),
|
||||
}),
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
/* ── 任务要素:四区(任务列表 / 标题区 / 工作区 / 对话区) ─────────────── */
|
||||
|
||||
/** 任务卡 —— 清单里一条 = 一个活动的一次运行,不是一整条工作流 */
|
||||
export const taskCardSchema = z.object({
|
||||
id: taskIdSchema,
|
||||
activity: z.string(),
|
||||
title: z.string(),
|
||||
runtime: taskRuntimeStateSchema,
|
||||
terminal: terminalStateSchema.optional(),
|
||||
/** 它在工作流上的序位 */
|
||||
position: z.number().int().min(1),
|
||||
total: z.number().int().min(1),
|
||||
workflowSubject: z.string(),
|
||||
workflowState: workflowStateSchema,
|
||||
startedAt: z.string(),
|
||||
});
|
||||
export type TaskCard = z.infer<typeof taskCardSchema>;
|
||||
|
||||
export const listTasksRoute = {
|
||||
method: 'GET',
|
||||
path: '/api/desk/tasks',
|
||||
output: z.object({ tasks: z.array(taskCardSchema) }),
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
/** 任务详情 —— 工作区与对话区的服务端投影(前端零过程状态,刷新即重建) */
|
||||
export const taskDetailSchema = z.object({
|
||||
card: taskCardSchema,
|
||||
goal: z.string(),
|
||||
budget: z.object({
|
||||
steps: z.string(),
|
||||
tokens: z.string(),
|
||||
activeMinutes: z.string(),
|
||||
humanCalls: z.string(),
|
||||
}),
|
||||
stages: z.array(stageSchema),
|
||||
deliverables: z.array(deliverableSchema),
|
||||
workOrders: z.array(workOrderSchema),
|
||||
chat: z.array(chatMessageSchema),
|
||||
view: z.array(viewBlockSchema),
|
||||
log: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
at: z.string(),
|
||||
side: attributionSideSchema,
|
||||
sideLabel: z.string(),
|
||||
title: z.string(),
|
||||
summary: z.string().optional(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
export type TaskDetail = z.infer<typeof taskDetailSchema>;
|
||||
|
||||
export const taskDetailRoute = {
|
||||
method: 'GET',
|
||||
path: '/api/desk/tasks/:taskId',
|
||||
params: z.object({ taskId: taskIdSchema }),
|
||||
output: taskDetailSchema,
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
/** 回传工单 —— 与后端回传校验同 schema(§9.2) */
|
||||
export const replyWorkOrderRoute = {
|
||||
method: 'POST',
|
||||
path: '/api/desk/work-orders/reply',
|
||||
body: z.object({ reply: z.record(z.string(), z.unknown()) }),
|
||||
output: z.object({ ok: z.boolean(), producesCompletion: z.boolean() }),
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
/** 负责人的自由输入 —— 人事件的第二形态 */
|
||||
export const sayRoute = {
|
||||
method: 'POST',
|
||||
path: '/api/desk/tasks/:taskId/say',
|
||||
params: z.object({ taskId: taskIdSchema }),
|
||||
body: z.object({ text: z.string().min(1) }),
|
||||
output: chatMessageSchema,
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
/** 消息要素 */
|
||||
export const listMessagesRoute = {
|
||||
method: 'GET',
|
||||
path: '/api/desk/messages',
|
||||
output: z.object({
|
||||
messages: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
kind: z.string(),
|
||||
title: z.string(),
|
||||
body: z.string(),
|
||||
at: z.string(),
|
||||
read: z.boolean(),
|
||||
}),
|
||||
),
|
||||
}),
|
||||
} as const satisfies RouteContract;
|
||||
|
||||
@@ -3,5 +3,11 @@
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": { ".": "./src/index.ts" }
|
||||
"exports": {
|
||||
".": "./src/index.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.17",
|
||||
"react": "^19.2.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* 视图块渲染 —— 无业务语义的展示原语(编码规范 §2 packages/ui-kit)。
|
||||
* DOM 与类名自原型平移(`jc-*`),渲染输出保持 1:1。
|
||||
*/
|
||||
import type { ViewBlock } from '@contracts';
|
||||
|
||||
export function ViewBlocks({ blocks }: { readonly blocks: readonly ViewBlock[] }) {
|
||||
return (
|
||||
<>
|
||||
{blocks.map((block, i) => (
|
||||
<Block key={i} block={block} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Block({ block }: { block: ViewBlock }) {
|
||||
switch (block.t) {
|
||||
case 'callout':
|
||||
return <p className={'jc-callout tone-' + block.tone}>{block.text}</p>;
|
||||
|
||||
case 'kv':
|
||||
return (
|
||||
<section className="jc-kv">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
<dl>
|
||||
{block.items.map((item, i) => (
|
||||
<div key={i}>
|
||||
<dt>{item.k}</dt>
|
||||
<dd>{item.v}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'badges':
|
||||
return (
|
||||
<section className="jc-badges">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
{block.items.map((item, i) => (
|
||||
<span key={i} className={item.on ? 'on' : ''}>
|
||||
{item.label}
|
||||
</span>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'table':
|
||||
return (
|
||||
<section className="jc-table-wrap">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
<table className="jc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{block.cols.map((c, i) => (
|
||||
<th key={i}>{c}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{block.rows.map((row, i) => (
|
||||
<tr key={i}>
|
||||
{row.map((cell, j) => (
|
||||
<td key={j}>{cell}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'bars':
|
||||
return (
|
||||
<section className="jc-bars">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
{block.items.map((item, i) => (
|
||||
<div key={i} className={'jc-bar tone-' + (item.tone ?? 'brand')}>
|
||||
<span className="jc-bar-label">{item.label}</span>
|
||||
<span className="jc-bar-track">
|
||||
<i style={{ width: `${Math.min((item.value / (block.max ?? 100)) * 100, 100)}%` }} />
|
||||
</span>
|
||||
<span className="jc-bar-value">{item.text ?? item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'donut':
|
||||
return (
|
||||
<section className="jc-donut">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
<ul>
|
||||
{block.items.map((item, i) => (
|
||||
<li key={i} className={'tone-' + item.tone}>
|
||||
<b>{item.value}</b>
|
||||
<span>{item.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'cards':
|
||||
return (
|
||||
<section className="jc-cards">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
{block.items.map((item, i) => (
|
||||
<article key={i} className={'jc-mini-card tone-' + (item.tone ?? 'brand')}>
|
||||
<span className="jc-mini-tag">{item.tag}</span>
|
||||
<h5>{item.title}</h5>
|
||||
{item.swap !== undefined && (
|
||||
<p className="jc-swap">
|
||||
<code>{item.swap.from}</code> → <code>{item.swap.to}</code>
|
||||
</p>
|
||||
)}
|
||||
<b className="jc-mini-big">{item.big}</b>
|
||||
{item.bigLabel !== undefined && <em>{item.bigLabel}</em>}
|
||||
{item.note !== undefined && <p className="jc-mini-note">{item.note}</p>}
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
|
||||
case 'waiting':
|
||||
return (
|
||||
<p className="jc-waiting">
|
||||
{block.label}
|
||||
{block.hint !== undefined && <em>{block.hint}</em>}
|
||||
</p>
|
||||
);
|
||||
|
||||
case 'mail':
|
||||
return (
|
||||
<article className={'jc-mail dir-' + block.dir}>
|
||||
<header>
|
||||
<b>{block.subject}</b>
|
||||
<span>
|
||||
{block.from} → {block.to}
|
||||
</span>
|
||||
<time>{block.time}</time>
|
||||
</header>
|
||||
<pre className="jc-mail-body">{block.body}</pre>
|
||||
</article>
|
||||
);
|
||||
|
||||
case 'files':
|
||||
return (
|
||||
<section className="jc-files">
|
||||
{block.title !== undefined && <h4>{block.title}</h4>}
|
||||
{block.items.map((item, i) => (
|
||||
<div key={i} className="jc-file">
|
||||
<b>{item.label}</b>
|
||||
<span>{item.desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* 视图区容器 —— **净化渲染,无脚本执行权**(编码规范 §9.2;语义出处 AM 07)。
|
||||
*
|
||||
* 「视图区容器渲染活动推送的 HTML:沙箱 iframe(srcdoc + sandbox)或净化后注入,
|
||||
* 二选一由 `ui-kit` 的 `ViewContainer` 统一实现,**feature 不得自行 dangerouslySetInnerHTML**。」
|
||||
*
|
||||
* 这里选沙箱 iframe:结构上就没有脚本执行权,不依赖净化算法的完备性。
|
||||
*/
|
||||
export type ViewContainerProps = {
|
||||
readonly html: string;
|
||||
readonly title?: string;
|
||||
};
|
||||
|
||||
export function ViewContainer({ html, title = '活动视图' }: ViewContainerProps) {
|
||||
return (
|
||||
<iframe
|
||||
className="jc-view-frame"
|
||||
title={title}
|
||||
// sandbox 不含 allow-scripts —— 无脚本执行权
|
||||
sandbox=""
|
||||
srcDoc={html}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
/**
|
||||
* @ui —— 无业务语义展示组件(卡片原语 / 时间线 / 净化视图容器 ViewContainer)。
|
||||
* @ui —— 无业务语义展示组件(卡片原语 / 时间线 / **净化视图容器**)。
|
||||
*/
|
||||
export const UI_KIT_VERSION = '0.0.0-m0';
|
||||
export type { ViewContainerProps } from './ViewContainer.tsx';
|
||||
export { ViewContainer } from './ViewContainer.tsx';
|
||||
export { ViewBlocks } from './ViewBlocks.tsx';
|
||||
|
||||
export const UI_KIT_VERSION = '0.1.0-m6';
|
||||
|
||||
Reference in New Issue
Block a user