-
+
-
-
RPA工作站 原型
-本地优先 AI + RPA 视觉标注与托管执行平台
+RPA工作站 原型
+本地优先 AI + RPA 视觉标注与托管执行平台
-
-
+
+
+
-
-
+
-
+
+
RPA工作站
-
-
-
+
+
+
-
+
-
-
+
- RPA工作站
+ RPA工作站
-
+
+
-
@@ -119,8 +164,8 @@ const prototypeState = {
};
function clsBadge(kind){
- const map = {ready:'bg-emerald-50 text-emerald-700 ring-emerald-200', indexing:'bg-amber-50 text-amber-700 ring-amber-200', pending:'bg-blue-50 text-blue-700 ring-blue-200', failed:'bg-red-50 text-red-700 ring-red-200', running:'bg-indigo-50 text-indigo-700 ring-indigo-200', idle:'bg-slate-100 text-slate-700 ring-slate-200', waiting_user:'bg-orange-50 text-orange-700 ring-orange-200', succeeded:'bg-emerald-50 text-emerald-700 ring-emerald-200', canceled:'bg-slate-100 text-slate-700 ring-slate-200', queued:'bg-blue-50 text-blue-700 ring-blue-200'};
- return 'inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ring-1 ' + (map[kind] || map.idle);
+ const map = {ready:'rpa-chip rpa-chip-success', succeeded:'rpa-chip rpa-chip-success', indexing:'rpa-chip rpa-chip-warning', waiting_user:'rpa-chip rpa-chip-warning', pending:'rpa-chip rpa-chip-info', queued:'rpa-chip rpa-chip-info', failed:'rpa-chip rpa-chip-danger', running:'rpa-chip rpa-chip-primary', idle:'rpa-chip rpa-chip-neutral', canceled:'rpa-chip rpa-chip-neutral'};
+ return map[kind] || map.idle;
}
function icon(name, c='h-4 w-4'){ return ``; }
function toast(text, type='success'){ prototypeState.toast.push({text,type,id:Date.now()}); setTimeout(()=>{ prototypeState.toast.shift(); renderAll(); }, 2400); renderAll(); }
@@ -133,16 +178,17 @@ function init(){
function renderRoot(root){
root.dataset.appRoot = '';
const nav = root.querySelector('[data-nav]');
- nav.innerHTML = ``;
+ const hosting = prototypeState.rpaHosting;
+ nav.innerHTML = ``;
const header = root.querySelector('[data-header]');
- header.innerHTML = `${table(['名称','类型','索引状态','引用次数','更新时间','权限模式'], prototypeState.kbs.map((k,i)=>[``;
+ return `${table(['名称','类型','索引状态','引用次数','更新时间','权限模式'], prototypeState.kbs.map((k,i)=>[``;
}
function agentPage(){
- return `${actionBtn(icon('plus')+'创建 AI 员工','data-modal-open="agent"',true)}${table(['名称','角色','状态','可访问知识库','可操作标注应用','最近执行时间','操作'], prototypeState.agents.map((a,i)=>[a.name,a.role,`${a.status}`,a.kb,a.apps,a.last,actionBtn('启动任务',`data-modal-open="agent-confirm" data-index="${i}"`)]))}`;
+ return `${actionBtn(icon('plus')+'创建 AI 员工','data-modal-open="agent"',true)}${table(['名称','角色','状态','可访问知识库','可操作标注应用','最近执行时间','操作'], prototypeState.agents.map((a,i)=>[a.name,a.role,`${a.status}`,a.kb,a.apps,a.last,actionBtn('启动任务',`data-modal-open="agent-confirm" data-index="${i}"`)]))}`;
}
function annotationPage(){
const tab = prototypeState.activeAppTab;
- const tabHtml = ['概览','窗口','节点','流程'].map(t=>``).join('');
+ const tabHtml = ['概览','窗口','节点','流程'].map(t=>``).join('');
let panel = tab==='节点' ? table(['节点名','node_type','bounds','allowed_actions','confidence'], prototypeState.nodes.map(n=>[n.name,n.type,n.bounds,n.actions,n.confidence])) : tab==='窗口' ? `` : tab==='流程' ? ``;
- return `${actionBtn(icon('scan-line')+'进入标注模式 Ctrl+E','data-overlay-open="annotation"',true)}
`; }
+function table(headers, rows){ return `
`; }
function renderOverlay(root){
const layer = root.querySelector('[data-overlay-layer]');
@@ -207,34 +253,34 @@ function renderOverlay(root){
if (prototypeState.modal) { layer.innerHTML = modalHtml(prototypeState.modal); return; }
layer.innerHTML = '';
}
-function modalFrame(title, body, wide=false){ return `${body}`; }
+function modalFrame(title, body, wide=false){ return `${body}`; }
function modalHtml(type){
if(type==='config') return configModal();
- if(type==='knowledge') return modalFrame('上传/创建知识库', ``);
- if(type==='agent') return modalFrame('创建/编辑 AI 员工', ``);
+ if(type==='knowledge') return modalFrame('上传/创建知识库', ``);
+ if(type==='agent') return modalFrame('创建/编辑 AI 员工', ``);
if(type==='permission') return modalFrame('权限模式', ``);
+ if(type==='agent-confirm' || type==='hosting-confirm') return modalFrame('启动前确认', ``);
return '';
}
function configModal(){
const steps=['权限检查','模型配置','性能评估','存储位置','安全说明']; const s=prototypeState.configStep;
const status=['通过','通过','通过','通过','需手动处理'];
- return modalFrame('首次配置与环境检查', ``, true);
+ return modalFrame('首次配置与环境检查', ``, true);
}
function annotationOverlay(){
const b=prototypeState.draftBounds;
- return `${actionBtn('退出','data-overlay-close')}`;
+ return `${actionBtn('退出','data-overlay-close')}`;
}
function hostingOverlay(){
const actions=['读取报销规则','填写金额输入框','定位提交按钮','提交报销单'];
const current=actions[Math.min(prototypeState.hostingStep, actions.length-1)];
- return ``;
+ return ``;
}
-function highRiskOverlay(){ return ``; }
+function highRiskOverlay(){ return ``; }
document.addEventListener('click', event => {
const platformTab = event.target.closest('[data-platform-tab]');
- if(platformTab){ const target=platformTab.dataset.platformTab; prototypeState.activePlatform=target; document.querySelectorAll('[data-platform-panel]').forEach(p=>p.classList.toggle('hidden',p.dataset.platformPanel!==target)); document.querySelectorAll('[data-platform-tab]').forEach(b=>{b.className='focus-ring h-10 rounded-full px-5 text-sm font-medium text-slate-600';}); platformTab.className='focus-ring h-10 rounded-full bg-[var(--primary)] px-5 text-sm font-medium text-white'; return; }
+ if(platformTab){ const target=platformTab.dataset.platformTab; prototypeState.activePlatform=target; document.querySelectorAll('[data-platform-panel]').forEach(p=>p.classList.toggle('hidden',p.dataset.platformPanel!==target)); document.querySelectorAll('[data-platform-tab]').forEach(b=>{b.className='focus-ring h-10 rounded-full px-5 text-sm font-medium text-[var(--rpa-muted)]';}); platformTab.className='focus-ring h-10 rounded-full bg-[var(--rpa-primary)] px-5 text-sm font-medium text-white'; return; }
const page = event.target.closest('[data-page]'); if(page){ prototypeState.page=page.dataset.page; renderAll(); return; }
const tab = event.target.closest('[data-tab]'); if(tab){ prototypeState.activeAppTab=tab.dataset.tab; renderAll(); return; }
const open = event.target.closest('[data-modal-open]'); if(open){ prototypeState.modal=open.dataset.modalOpen; renderAll(); return; }
${pages.map(([p,ic]) => { const active = prototypeState.page===p; return ``; }).join('')}
${icon('circle-dot','h-3.5 w-3.5')}本地在线
${pages.map(([p,ic]) => { const active = prototypeState.page===p; return ``; }).join('')}
${icon('circle-dot','h-3.5 w-3.5')}${hosting?'托管中':'本地在线'}
${prototypeState.page}
${pageSummaries[prototypeState.page]}
${chip('模型 在线','activity','emerald')}${chip(prototypeState.rpaHosting?'RPA 托管中':'RPA 空闲','radio','indigo')}${chip('本地模式','hard-drive','slate')}${chip('试用 14天','badge-check','amber')}
`;
+ header.innerHTML = `${prototypeState.page}
${pageSummaries[prototypeState.page]}
${chip('模型 在线','activity','emerald')}${chip(prototypeState.rpaHosting?'RPA 托管中':'RPA 空闲','radio','indigo')}${chip('本地模式','hard-drive','slate')}${chip('试用 14天','badge-check','amber')}
`;
root.querySelector('[data-content]').innerHTML = renderPage();
- root.querySelector('[data-toasts]').innerHTML = prototypeState.toast.map(t => `${icon(t.type==='error'?'circle-alert':'circle-check','mt-0.5 h-4 w-4 shrink-0')}${t.text}
`).join('');
+ root.querySelector('[data-toasts]').innerHTML = prototypeState.toast.map(t => `${icon(t.type==='error'?'circle-alert':'circle-check','mt-0.5 h-4 w-4 shrink-0')}${t.text}
`).join('');
renderOverlay(root);
}
-function chip(text, ic, tone){ return `${icon(ic)}${text}`; }
-function card(title, body, footer=''){ return `${body.icon||''}${title}
${body.html||body}${footer}
- ${card('环境状态',{icon:icon('shield-check'),html:``})}
+ ${card('环境状态',{icon:icon('shield-check'),html:``})}
${card('资产状态',{icon:icon('boxes'),html:``})}
+ ${card('执行状态',{icon:icon('activity'),html:``})}
- 权限3/4
模型连通通过
本地 GPU中档
存储可用
${actionBtn('查看首次配置','data-modal-open="config"')}权限3/4
模型连通通过
本地 GPU中档
存储可用
${actionBtn('查看首次配置','data-modal-open="config"')}知识库 3就绪索引 2AI 员工 2标注应用 1
`})}
- ${card('执行状态',{icon:icon('activity'),html:`运行中0
失败任务1
最近托管成功
RPA${prototypeState.rpaHosting?'托管中':'空闲'}
运行中0
失败任务1
最近托管成功
RPA${prototypeState.rpaHosting?'托管中':'空闲'}
快速入口
+
`;
}
function kbPage(){
- return `快速入口
${actionBtn(icon('database')+'创建知识库','data-modal-open="knowledge"',true)}
${actionBtn(icon('bot')+'创建 AI 员工','data-modal-open="agent"',true)}
${actionBtn(icon('scan-line')+'进入标注模式 Ctrl+E','data-overlay-open="annotation"')}
${actionBtn(icon('play')+'启动自动化任务','data-modal-open="hosting-confirm"')}
${actionBtn(icon('package-check')+'导出诊断包','data-action="diagnostic"')}
核心闭环
${['首次配置','知识库','AI 员工','标注应用','自动化任务','托管执行','审计复盘'].map((s,i)=>`
${i+1}${s}
${i<6?'':''}`).join('')}核心闭环
${['首次配置','知识库','AI 员工','标注应用','自动化任务','托管执行','审计复盘'].map((s,i)=>`
${i+1}${s}
${i<6?'':''}`).join('')}${icon('search','absolute left-3 top-3 h-4 w-4 text-slate-400')}
${actionBtn('来源','')}${actionBtn('类型','')}${actionBtn('按更新时间','')}${actionBtn(icon('upload')+'上传/创建知识库','data-modal-open="knowledge"',true)}${k.name}
`,k.type,`${k.status}`,k.refs,k.updated,``]))}${k.description}${k.error?` · ${k.error} ${actionBtn('重试',`data-action="retry-kb" data-index="${i}"`)}`:''}
${icon('search','absolute left-3 top-3 h-4 w-4 text-slate-400')}
${actionBtn('来源','')}${actionBtn('类型','')}${actionBtn('按更新时间','')}${actionBtn(icon('upload')+'上传/创建知识库','data-modal-open="knowledge"',true)}${k.name}
`,k.type,`${k.status}`,k.refs,k.updated,``]))}${k.description}${k.error?` · ${k.error} ${actionBtn('重试',`data-action="retry-kb" data-index="${i}"`)}`:''}
AI 员工
启动任务前必须展示知识库、应用和停止方式。
AI 员工
启动任务前必须展示知识库、应用和停止方式。
主窗口
1180×760 · 已标注
审批弹窗
520×360 · 已标注
- 1. 读取制度规则
- 2. 填写金额输入框
- 3. 点击提交按钮前暂停确认
窗口数
2
节点数
${prototypeState.nodes.length}
流程数
3
最近更新
今天 09:20
企业报销系统
窗口数 2、节点数 ${prototypeState.nodes.length}、流程数 3、最近更新 今天
${tabHtml}
${panel}企业报销系统
窗口数 2、节点数 ${prototypeState.nodes.length}、流程数 3、最近更新 今天
${tabHtml}
${panel}${t.error}
${actionBtn('重试',`data-action="retry-task" data-index="${i}"`)}
`:actionBtn('查看','')]);
+ const rows = prototypeState.tasks.map((t,i)=>[t.name,t.type,`${t.status}`,t.employee,t.app,t.updated,t.error?`${t.code}${actionBtn('重试',`data-action="retry-task" data-index="${i}"`)}
${t.error}
${actionBtn('重试',`data-action="retry-task" data-index="${i}"`)}
`:actionBtn('查看','')]);
let audits = prototypeState.audits.filter(a=>(!prototypeState.auditFilters.employee||a.employee===prototypeState.auditFilters.employee)&&(!prototypeState.auditFilters.status||a.status===prototypeState.auditFilters.status));
- return `${t.code}${actionBtn('重试',`data-action="retry-task" data-index="${i}"`)}
自动化任务
状态只使用 queued | running | succeeded | failed | canceled。
${['运行中任务','历史任务','失败任务'].map((s,i)=>``).join('')}
${table(['任务名','类型','状态','员工','目标应用','更新时间','操作'], rows)}${s}
${i===0?prototypeState.tasks.filter(t=>t.status==='running').length:i===1?prototypeState.tasks.filter(t=>t.status==='succeeded').length:prototypeState.tasks.filter(t=>t.status==='failed').length}
${table(['时间','员工','应用','知识库','状态','记录'], audits.map(a=>[a.time,a.employee,a.app,a.kb,`${a.status}`,a.text]))}
自动化任务
状态只使用 queued | running | succeeded | failed | canceled。
${['运行中任务','历史任务','失败任务'].map((s,i)=>``).join('')}
${table(['任务名','类型','状态','员工','目标应用','更新时间','操作'], rows)}${s}
${i===0?prototypeState.tasks.filter(t=>t.status==='running').length:i===1?prototypeState.tasks.filter(t=>t.status==='succeeded').length:prototypeState.tasks.filter(t=>t.status==='failed').length}
${table(['时间','员工','应用','知识库','状态','记录'], audits.map(a=>[a.time,a.employee,a.app,a.kb,`${a.status}`,a.text]))}
${groups.map(g=>`
`;
+ return `${g[0]}
${g[1]}
${groups.map(g=>`
`;
}
-function table(headers, rows){ return `${g[0]}
${g[1]}
| ${h} | `).join('')}
|---|
| ${c} | `).join('')}
| ${h} | `).join('')}
|---|
| ${c} | `).join('')}
${title}
${title}
${['private','selected_agents','workspace'].map(p=>``).join('')}
`);
- if(type==='agent-confirm' || type==='hosting-confirm') return modalFrame('启动前确认', `AI 员工
报销审核员
将访问的知识库
财务报销制度
将控制的应用
企业报销系统
预计动作范围
读取报销规则、填写金额、点击提交前暂停确认
停止方式
ESC 或遮罩上的停止托管按钮
${actionBtn('取消','data-modal-close')}${actionBtn('确认启动托管','data-action="start-hosting"',true)}
AI 员工
报销审核员
将访问的知识库
财务报销制度
将控制的应用
企业报销系统
预计动作范围
读取报销规则、填写金额、点击提交前暂停确认
停止方式
ESC 或遮罩上的停止托管按钮
${actionBtn('取消','data-modal-close')}${actionBtn('确认启动托管','data-action="start-hosting"',true)}
状态枚举：未检查 | 检查中 | 通过 | 失败 | 需手动处理
${s===0?`${['屏幕录制','辅助功能/自动化控制','文件访问','网络访问'].map((x,i)=>`
${x}${i===1?status[4]:'通过'}
`).join('')}原因：辅助功能权限需手动授权；恢复：打开系统设置或重新检测。
${actionBtn('打开系统设置','data-action="open-settings"')}${actionBtn('重新检测','data-action="recheck-permission"',true)}${actionBtn('跳过并以后配置','data-modal-close')}
`:`${steps[s]}
`}当前状态：通过。本页用于演示 ${steps[s]} 配置检查。
状态枚举：未检查 | 检查中 | 通过 | 失败 | 需手动处理
${s===0?`${['屏幕录制','辅助功能/自动化控制','文件访问','网络访问'].map((x,i)=>`
${x}${i===1?status[4]:'通过'}
`).join('')}原因：辅助功能权限需手动授权；恢复：打开系统设置或重新检测。
${actionBtn('打开系统设置','data-action="open-settings"')}${actionBtn('重新检测','data-action="recheck-permission"',true)}${actionBtn('跳过并以后配置','data-modal-close')}
`:`${steps[s]}
`}当前状态：通过。本页用于演示 ${steps[s]} 配置检查。
Ctrl+E 标注模式
选择当前标注应用 → 框选窗口/节点 → 命名节点 → 保存
企业报销系统模拟桌面截图
Ctrl+E 标注模式
选择当前标注应用 → 框选窗口/节点 → 命名节点 → 保存
企业报销系统模拟桌面截图
RPA 托管执行中
ESC 紧急停止始终可用
当前动作
${current}
${prototypeState.hostingLogs.map(l=>`
${l}
`).join('') || '等待下一步动作。
'}${actionBtn('下一步动作','data-action="next-hosting"',true)}
RPA 托管执行中
ESC 紧急停止始终可用
当前动作
${current}
${prototypeState.hostingLogs.map(l=>`
${l}
`).join('') || '等待下一步动作。
'}${actionBtn('下一步动作','data-action="next-hosting"',true)}
高风险动作：提交
确认后将向业务系统提交单据。
${actionBtn('取消并等待人工','data-action="cancel-high-risk"')}${actionBtn('确认提交','data-action="confirm-high-risk"',true)}
高风险动作：提交
确认后将向业务系统提交单据。
${actionBtn('取消并等待人工','data-action="cancel-high-risk"')}