mp_1787300862_s8r25x
01dcd83987
- 保留根目录 index.html 作为 v1 单文件原型（不参与构建） - app/ 下新建 Vite + React 工程（vite.config root 指向 app/，两版互不干扰） - 状态收敛到 useAppStore（表单/消息/串行确认/一键发品 + 4 条异步编排流） - 生成卡片重构为结构化数据驱动渲染，按钮为真实 React 事件 - 6 大表单模块卡片化；Agent 意图解析与偏好学习抽为独立 lib - 功能与视觉与 v1 完全一致，浏览器端全流程回归通过
34 lines
1.4 KiB
React
34 lines
1.4 KiB
React
import { useStore } from '../store/context'
|
||
|
||
/** Agent 任务清单卡片：8 步/多步执行状态实时更新 */
|
||
export default function TaskCardView({ task }) {
|
||
const { setAutoConfirm, autoConfirmMode } = useStore()
|
||
return (
|
||
<div className="agent-card">
|
||
<div className="ag-head">{task.title}</div>
|
||
<div className="ag-ctx">{task.ctxLine}</div>
|
||
<div className="ag-mode-row">
|
||
<span className="ag-mode-label">确认模式</span>
|
||
<button
|
||
className={'ag-mt-btn' + (autoConfirmMode ? ' active' : '')}
|
||
onClick={() => setAutoConfirm(true)}
|
||
>⚡ 自动确认</button>
|
||
<button
|
||
className={'ag-mt-btn' + (!autoConfirmMode ? ' active' : '')}
|
||
onClick={() => setAutoConfirm(false)}
|
||
>✋ 手动确认</button>
|
||
</div>
|
||
<div className="ag-steps">
|
||
{task.steps.map((s, i) => (
|
||
<div key={i} className={'ag-step ' + s.status}>
|
||
<span className="ag-ico">{s.status === 'done' ? '✓' : s.status === 'doing' ? '↻' : '·'}</span>
|
||
<span className="ag-lbl">{s.label}</span>
|
||
<span className="ag-note">{s.note}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="ag-foot">💡 每个工具生成后展示卡片，自动模式 5s 后自动确认填入，手动模式需您点击确认。可随时切换模式。</div>
|
||
</div>
|
||
)
|
||
}
|