651 lines
54 KiB
HTML
651 lines
54 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>sgRobot 目标态业务架构</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
/* 自定义一些特定颜色以更贴近原图 */
|
||
.theme-dark-blue { background-color: #0d2758; }
|
||
.theme-text-dark-blue { color: #0d2758; }
|
||
.theme-light-blue-bg { background-color: #f0f6fc; }
|
||
.theme-border-blue { border-color: #aec3db; }
|
||
.theme-text-gray { color: #5f7082; }
|
||
.theme-red { color: #d92d20; }
|
||
|
||
/* 连接线箭头样式辅助 */
|
||
.arrow-right-solid {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 5px solid transparent;
|
||
border-bottom: 5px solid transparent;
|
||
border-left: 8px solid #0d2758;
|
||
}
|
||
.arrow-down-solid {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-top: 8px solid #0d2758;
|
||
}
|
||
|
||
/* 用于核心闭环的虚线箭头 */
|
||
.dashed-arrow-line {
|
||
background-image: linear-gradient(to right, #d92d20 50%, transparent 50%);
|
||
background-size: 10px 2px;
|
||
background-repeat: repeat-x;
|
||
}
|
||
.arrow-right-red {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
border-left: 6px solid #d92d20;
|
||
}
|
||
.arrow-left-red {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
border-right: 6px solid #d92d20;
|
||
}
|
||
|
||
body {
|
||
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 汇报场景下整体字号再上调一档，兼顾投屏可读性 */
|
||
.text-xs { font-size: 0.92rem !important; }
|
||
.text-sm { font-size: 1.08rem !important; }
|
||
.text-base { font-size: 1.24rem !important; }
|
||
.text-lg { font-size: 1.4rem !important; }
|
||
.text-xl { font-size: 1.62rem !important; }
|
||
.text-3xl { font-size: 2.75rem !important; }
|
||
.text-\[9px\] { font-size: 0.82rem !important; }
|
||
.text-\[10px\] { font-size: 0.92rem !important; }
|
||
.text-\[11px\] { font-size: 1.02rem !important; }
|
||
.text-\[13px\] { font-size: 1.14rem !important; }
|
||
|
||
/* 放大后给各层卡片更多高度，避免文字贴边 */
|
||
.min-h-\[60px\] { min-height: 86px !important; }
|
||
.min-h-\[65px\] { min-height: 92px !important; }
|
||
.min-h-\[70px\] { min-height: 104px !important; }
|
||
|
||
[data-tip] {
|
||
cursor: help;
|
||
}
|
||
|
||
.term-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px 6px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.term {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border: 1px solid #c8d7e8;
|
||
border-radius: 999px;
|
||
background: #f8fbff;
|
||
padding: 2px 8px;
|
||
color: #5f7082;
|
||
font-size: 0.86rem;
|
||
line-height: 1.35;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
#sg-tooltip {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
max-width: 520px;
|
||
padding: 10px 12px;
|
||
border-radius: 6px;
|
||
background: #0d2758;
|
||
color: white;
|
||
font-size: 0.95rem;
|
||
line-height: 1.45;
|
||
white-space: pre-line;
|
||
box-shadow: 0 12px 32px rgba(13, 39, 88, 0.22);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transform: translateY(4px);
|
||
transition: opacity 0.12s ease, transform 0.12s ease;
|
||
}
|
||
|
||
#sg-tooltip.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white p-4 md:p-8 min-h-screen text-sm select-none">
|
||
|
||
<nav class="max-w-[1780px] mx-auto mb-5 flex flex-wrap items-center justify-between gap-3 border border-blue-200 rounded-lg px-4 py-3 shadow-sm bg-white">
|
||
<div class="flex items-center gap-2 theme-text-dark-blue font-bold text-base" data-tip="汇报专用静态网站，可直接双击 index.html 打开，不需要启动本地服务。">
|
||
<i class="fa-solid fa-display"></i>
|
||
<span>sgRobot 汇报静态网站</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<a href="index.html" class="theme-dark-blue text-white rounded px-4 py-2 font-bold shadow-sm" data-tip="查看 sgRobot 的目标态业务架构总览。">业务架构总览</a>
|
||
<a href="flows.html" class="border theme-border-blue theme-text-dark-blue rounded px-4 py-2 font-bold bg-white hover:bg-blue-50" data-tip="查看几类典型业务如何进入、执行、沉淀和被人工治理。">业务流程图</a>
|
||
<a href="roadmap.html" class="border theme-border-blue theme-text-dark-blue rounded px-4 py-2 font-bold bg-white hover:bg-blue-50" data-tip="查看五月底上线倒排的里程碑、分工边界和验收口径。">里程碑与分工</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="max-w-[1780px] mx-auto mb-6">
|
||
<div class="flex items-center mb-2">
|
||
<div class="w-10 h-10 theme-dark-blue text-white flex items-center justify-center rounded shadow-sm mr-3">
|
||
<i class="fa-solid fa-cube text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-3xl font-bold theme-text-dark-blue tracking-wide">sgRobot <span class="font-bold">目标态业务架构</span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="ml-14 text-[13px] font-medium text-gray-700 leading-relaxed">
|
||
围绕<span class="font-bold">业务入口</span>、<span class="font-bold">任务治理</span>、<span class="font-bold">自动执行</span>、<span class="theme-red font-bold">运营看板</span>四条主线，把目标接收、计划拆解、执行过程、人工决策、经验沉淀和后台服务统一纳入可管理的业务闭环。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-[1780px] mx-auto relative">
|
||
|
||
<!-- 顶层用户 -->
|
||
<div class="flex justify-center mb-[-12px] relative z-10">
|
||
<div class="bg-white border-2 theme-border-blue rounded-full px-10 py-2 flex items-center gap-3 shadow-sm" data-tip="系统的外部参与者。用户提交目标，运维关注健康与风险，审批人处理治理节点，外部业务系统可通过系统接口或业务事件触发任务。">
|
||
<i class="fa-solid fa-user-group text-blue-600 text-lg"></i>
|
||
<span class="font-bold theme-text-dark-blue text-base">
|
||
<span data-tip="用户是目标和需求的主要提出者，可以发起任务、补充输入和接受结果。">用户</span> /
|
||
<span data-tip="运维关注系统健康、服务状态、告警、失败恢复和上线风险。">运维</span> /
|
||
<span data-tip="审批人负责处理高风险动作、外部副作用、权限边界和人工治理节点。">审批人</span> /
|
||
<span data-tip="外部业务系统通过系统接口、消息或业务事件触发 sgRobot 工作流。">外部业务系统</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center mb-2 text-blue-600 text-lg">
|
||
<i class="fa-solid fa-arrow-down"></i>
|
||
</div>
|
||
|
||
<!-- 主结构外框 -->
|
||
<div class="border-2 theme-border-blue rounded-lg p-3 pt-6 flex flex-col gap-2 relative bg-white">
|
||
<div class="absolute right-[-10px] top-[15%] bottom-[15%] w-[20px] border-r-2 border-t-2 border-b-2 theme-border-blue rounded-r-lg z-0 opacity-50 hidden lg:block"></div>
|
||
|
||
<!-- Plane 1: 业务入口与协同 -->
|
||
<div class="flex items-stretch border theme-border-blue rounded bg-white relative z-10">
|
||
<div class="w-12 md:w-40 theme-dark-blue text-white flex flex-col items-center justify-center p-2 rounded-l flex-shrink-0" data-tip="业务入口与协同负责把人的需求、系统事件和业务审批统一接入，并把任务进展反馈给相关人员。">
|
||
<div class="bg-white/20 px-2 py-1 rounded text-xs mb-1 font-mono">1</div>
|
||
<span class="font-bold hidden md:block text-center leading-tight">业务入口与协同</span>
|
||
<span class="font-bold md:hidden text-center writing-vertical-lr text-xs">入口协同</span>
|
||
</div>
|
||
<div class="flex-1 theme-light-blue-bg p-3 grid grid-cols-1 md:grid-cols-2 gap-4 rounded-r">
|
||
<div class="bg-white border theme-border-blue rounded p-2 flex items-center gap-3 shadow-sm min-h-[60px] w-full" data-tip="业务需求入口把人工提交、接口调用、计划任务和事件触发统一登记为可跟踪的业务目标或处理请求。">
|
||
<i class="fa-solid fa-arrow-right-to-bracket text-2xl theme-text-dark-blue ml-2"></i>
|
||
<div>
|
||
<div class="font-bold theme-text-dark-blue text-sm">业务需求入口</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="人工提交是用户在控制台或对话入口主动发起的目标。">人工提交</span>
|
||
<span class="term" data-tip="系统接口让外部业务系统以结构化请求提交目标、状态或审批动作。">系统接口</span>
|
||
<span class="term" data-tip="计划任务是按时间、周期或排程触发的目标入口。">计划任务</span>
|
||
<span class="term" data-tip="事件触发来自邮件、系统通知、消息、文件变化或内部业务事件。">事件触发</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 flex items-center gap-3 shadow-sm min-h-[60px] w-full" data-tip="协同工作台让用户、运维和审批人查看进度、处理审批、回放过程和验收成果。">
|
||
<i class="fa-solid fa-desktop text-2xl theme-text-dark-blue ml-2"></i>
|
||
<div>
|
||
<div class="font-bold theme-text-dark-blue text-sm">协同工作台</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="查看用于读取目标、计划、任务、执行记录、服务状态和经验记忆。">查看</span>
|
||
<span class="term" data-tip="操作是用户对任务、服务、参数和视图发起的显式动作。">操作</span>
|
||
<span class="term" data-tip="审批用于确认高风险动作、外部副作用或权限敏感步骤。">审批</span>
|
||
<span class="term" data-tip="回放按事件时间线复原过程，用于诊断、复盘和追责。">回放</span>
|
||
<span class="term" data-tip="成果浏览用于查看报告、截图、文件、日志快照和结构化结果。">成果浏览</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plane 2: 任务治理与风控 -->
|
||
<div class="flex items-stretch border theme-border-blue rounded bg-white relative z-10">
|
||
<div class="w-12 md:w-40 theme-dark-blue text-white flex flex-col items-center justify-center p-2 rounded-l flex-shrink-0" data-tip="任务治理与风控负责把业务目标拆成计划和任务，并统一管理审批、风险、暂停、恢复、重试和服务占用规则。">
|
||
<i class="fa-solid fa-sliders text-xl mb-1"></i>
|
||
<span class="font-bold hidden md:block text-center leading-tight">任务治理与风控</span>
|
||
<span class="font-bold md:hidden text-center writing-vertical-lr text-xs mt-2">任务风控</span>
|
||
</div>
|
||
<div class="flex-1 theme-light-blue-bg p-3 grid grid-cols-1 md:grid-cols-4 gap-3 rounded-r">
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[70px]" data-tip="目标与计划管理把原始目标转成可审查、可冻结、可重规划的计划结构。">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<i class="fa-solid fa-bullseye theme-text-dark-blue text-lg"></i>
|
||
<span class="font-bold theme-text-dark-blue text-[13px]">目标计划管理</span>
|
||
</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="业务目标是用户或外部系统想达成的结果，也是后续计划拆解的源头。">业务目标</span>
|
||
<span class="term" data-tip="执行计划描述成功标准、风险、依赖和执行步骤。">执行计划</span>
|
||
<span class="term" data-tip="计划步骤是计划中的单个动作，用于生成可调度的工作任务。">计划步骤</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[70px]" data-tip="任务执行管理负责从步骤生成任务，并管理执行尝试、失败恢复、服务占用和最终状态。">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<i class="fa-solid fa-list-ul theme-text-dark-blue text-lg"></i>
|
||
<span class="font-bold theme-text-dark-blue text-[13px]">任务执行管理</span>
|
||
</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="工作任务是可调度的工作单元，绑定能力、输入、依赖和优先级。">工作任务</span>
|
||
<span class="term" data-tip="执行记录代表一次任务执行尝试，重试会产生新的执行记录。">执行记录</span>
|
||
<span class="term" data-tip="自动重试是失败或中断后的再执行策略，受预算和风险约束。">自动重试</span>
|
||
<span class="term" data-tip="恢复点是长任务的过程锚点，用于失败后恢复和问题诊断。">恢复点</span>
|
||
<span class="term" data-tip="超时管控防止任务无限运行，超时后进入恢复或人工介入路径。">超时管控</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[70px]" data-tip="人工治理把人的介入变成可记录、可回放、可追责的业务操作，而不是后台直接改结果。">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<i class="fa-solid fa-user-check theme-text-dark-blue text-lg"></i>
|
||
<span class="font-bold theme-text-dark-blue text-[13px]">人工治理</span>
|
||
</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="审批通过允许高风险步骤、外部副作用或权限敏感动作继续执行。">审批通过</span>
|
||
<span class="term" data-tip="暂停让人检查任务状态、参数、风险或依赖。">暂停</span>
|
||
<span class="term" data-tip="恢复从暂停点继续执行，通常需要保留上下文和服务占用状态。">恢复</span>
|
||
<span class="term" data-tip="取消终止任务或计划，并释放相关服务占用。">取消</span>
|
||
<span class="term" data-tip="人工接管把自动执行转交给人工或指定操作者处理。">人工接管</span>
|
||
<span class="term" data-tip="重新规划在现有目标下重新生成或修改执行路径。">重新规划</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[70px]" data-tip="风险与规则规定经验记忆怎么用、后台服务怎么占用、哪些动作必须审批、哪些状态必须进入看板。">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<i class="fa-solid fa-shield-halved theme-text-dark-blue text-lg"></i>
|
||
<span class="font-bold theme-text-dark-blue text-[13px]">风险与规则</span>
|
||
</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="记忆规则规定经验何时召回、写入、遗忘、替代或标记冲突。">记忆规则</span>
|
||
<span class="term" data-tip="服务占用记录任务对后台服务的使用关系，防止误停和资源泄漏。">服务占用</span>
|
||
<span class="term" data-tip="风险等级表示动作、任务、服务或记忆使用的风险级别和审批要求。">风险等级</span>
|
||
<span class="term" data-tip="健康状态汇总任务、服务、通道和看板等关键组件是否正常。">健康状态</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plane 3: 自动执行与能力 -->
|
||
<div class="flex items-stretch border theme-border-blue rounded bg-white relative z-10">
|
||
<div class="w-12 md:w-40 theme-dark-blue text-white flex flex-col items-center justify-center p-2 rounded-l flex-shrink-0" data-tip="自动执行与能力负责真正完成业务动作，包括脚本、流程、智能辅助、外部系统适配和按需后台服务。">
|
||
<i class="fa-solid fa-gears text-xl mb-1"></i>
|
||
<span class="font-bold hidden md:block text-center leading-tight">自动执行与能力</span>
|
||
<span class="font-bold md:hidden text-center writing-vertical-lr text-xs mt-2">自动执行</span>
|
||
</div>
|
||
<div class="flex-1 theme-light-blue-bg p-3 grid grid-cols-1 md:grid-cols-7 gap-3 rounded-r">
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="能力目录管理可治理自动化能力的登记、版本、使用约定、策略和健康。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-box mr-1"></i>能力目录</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="能力登记把脚本、流程、智能辅助或外部适配纳入统一目录。">能力登记</span>
|
||
<span class="term" data-tip="版本管理用于区分能力说明、实现和兼容边界。">版本管理</span>
|
||
<span class="term" data-tip="使用约定说明输入、输出、成果和过程记录要求。">使用约定</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="调度中枢负责检查前置条件、匹配自动化能力、安排执行顺序并处理失败恢复。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-sitemap mr-1"></i>调度中枢</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="前置检查判断任务、服务、记忆、成果和审批之间的依赖是否满足。">前置检查</span>
|
||
<span class="term" data-tip="能力匹配根据使用约定、风险、可用性和上下文选择合适能力。">能力匹配</span>
|
||
<span class="term" data-tip="失败恢复处理回滚、替代路径、重试和人工兜底。">失败恢复</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="自动脚本适合规则清楚、结果稳定、可重试、可审计的任务。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-code mr-1"></i>自动脚本</div>
|
||
<div class="term-list"><span class="term" data-tip="确定性任务适合明确输入输出，结果更容易测试和审计。">确定性任务</span></div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="流程编排承载组合能力和子流程，把多步骤操作纳入统一治理。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-diagram-project mr-1"></i>流程编排</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="组合能力把多个原子能力组合为一个可治理流程。">组合能力</span>
|
||
<span class="term" data-tip="子流程是在一个任务内部继续拆分的执行片段。">子流程</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="智能辅助用于规划、选择、解释和修复建议，但任务状态仍由治理流程统一管理。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-brain mr-1"></i>智能辅助</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="规划用于把目标拆成可审查的计划和步骤。">规划</span>
|
||
<span class="term" data-tip="修复建议用于失败诊断、替代能力和补偿路径建议。">修复建议</span>
|
||
<span class="term" data-tip="解释用于说明计划、风险、失败原因和人工介入建议。">解释</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="外部系统适配把网页、设备和机器人能力接入统一业务流程，避免各自独立运行、难以管理。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-robot mr-1"></i>外部系统适配</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="网页操作用于网页、控制台和浏览器自动化能力。">网页操作</span>
|
||
<span class="term" data-tip="设备接入用于连接硬件、串口、设备接口或外设能力。">设备接入</span>
|
||
<span class="term" data-tip="机器人控制用于机器人本体能力，如感知、运动和语音。">机器人控制</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[60px]" data-tip="按需后台服务负责邮件读取、监听器、浏览器环境、配套后台程序和外部服务进程的启动、占用、健康、日志和空闲回收。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-server mr-1"></i>按需后台服务</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="服务定义描述后台服务如何启动、停止、授权、检查健康和对外提供能力。">服务定义</span>
|
||
<span class="term" data-tip="运行实例是服务的一次实际运行，记录访问地址、进程和状态。">运行实例</span>
|
||
<span class="term" data-tip="占用关系表示某个任务正在依赖服务实例，决定服务是否能回收。">占用关系</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plane 4: 运营记录与看板 -->
|
||
<div class="flex items-stretch border theme-border-blue rounded bg-white relative z-10">
|
||
<div class="w-12 md:w-40 theme-dark-blue text-white flex flex-col items-center justify-center p-2 rounded-l flex-shrink-0" data-tip="运营记录与看板沉淀业务过程、成果、经验和服务状态，让管理者能看进度、看风险、看结果、看责任。">
|
||
<i class="fa-solid fa-database text-xl mb-1"></i>
|
||
<span class="font-bold hidden md:block text-center leading-tight">运营记录与看板</span>
|
||
<span class="font-bold md:hidden text-center writing-vertical-lr text-xs mt-2">运营看板</span>
|
||
</div>
|
||
<div class="flex-1 theme-light-blue-bg p-3 grid grid-cols-1 md:grid-cols-7 gap-3 rounded-r">
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="业务状态台账保存计划、任务、执行记录和审批记录的当前状态，是进度和责任判断的依据。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-lock mr-1"></i>业务状态台账</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="执行计划状态表示计划处于草稿、审核、激活、阻塞、完成或取消等阶段。">执行计划</span>
|
||
<span class="term" data-tip="工作任务状态表示任务是否待处理、排队、执行中、暂停、失败或完成。">工作任务</span>
|
||
<span class="term" data-tip="执行记录状态表示一次执行尝试的生命周期和健康信息。">执行记录</span>
|
||
<span class="term" data-tip="审批记录状态表示审批请求是否待处理、已通过、已拒绝、已过期或已取消。">审批记录</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="过程日志记录所有关键变化，是审计、回放、看板生成和问题追踪的基础。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-regular fa-file-lines mr-1"></i>过程日志</div>
|
||
<div class="term-list"><span class="term" data-tip="关键过程记录是已经发生的业务变化，如任务开始、执行失败、服务启动或经验更新。">关键过程记录</span></div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="成果资料库存放执行生成的文件、报告、截图和结构化数据结果。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-folder-open mr-1"></i>成果资料库</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="文件是执行生成或引用的本地或远端文件产物。">文件</span>
|
||
<span class="term" data-tip="报告是面向人或验收的总结性产物。">报告</span>
|
||
<span class="term" data-tip="截图用于证明界面、网页、浏览器或视觉状态。">截图</span>
|
||
<span class="term" data-tip="数据结果是可被系统继续读取的结构化数据、表格、记录或索引。">数据结果</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="经验与记忆库存放可复用知识，不代表当前任务状态，必须受来源、置信度、保留和遗忘规则约束。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-brain mr-1"></i>经验与记忆库</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="项目事实是相对稳定、可引用的信息，但仍应有来源和置信度。">项目事实</span>
|
||
<span class="term" data-tip="使用偏好记录用户、项目或团队的长期选择倾向。">使用偏好</span>
|
||
<span class="term" data-tip="关键决策记录已经确定的架构、流程、策略或边界选择。">关键决策</span>
|
||
<span class="term" data-tip="处理经验记录过去执行中的成功路径、失败模式和修复方法。">处理经验</span>
|
||
<span class="term" data-tip="观察摘要从邮件、消息、工单、服务日志或运行结果中提炼可复用结论。">观察摘要</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="运营看板面向管理、查询和协同，由状态、过程日志、成果、经验记忆和服务健康汇总生成。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-chart-column mr-1"></i>运营看板</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="任务看板展示任务状态、阻塞、风险和下一步动作。">任务看板</span>
|
||
<span class="term" data-tip="审批队列集中展示等待人工处理的治理节点。">审批队列</span>
|
||
<span class="term" data-tip="记忆索引让用户查看、修正、替代或遗忘长期记忆。">记忆索引</span>
|
||
<span class="term" data-tip="服务健康展示服务实例、占用关系、重启和最近错误。">服务健康</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="全程追踪按时间顺序展示计划、任务、执行、审批、服务和经验记忆变化。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-clock-rotate-left mr-1"></i>全程追踪</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="过程回放按时间顺序复原业务过程和人工操作。">过程回放</span>
|
||
<span class="term" data-tip="诊断用于定位失败原因、依赖问题、服务退化或策略阻塞。">诊断</span>
|
||
<span class="term" data-tip="追责用于确认谁在什么时候通过什么操作改变了什么状态。">追责</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white border theme-border-blue rounded p-2 shadow-sm min-h-[65px]" data-tip="运营指标用于验收、运营和持续改进，衡量服务时效、成功率、响应耗时和人工介入率。">
|
||
<div class="font-bold theme-text-dark-blue text-[13px]"><i class="fa-solid fa-chart-simple mr-1"></i>运营指标</div>
|
||
<div class="term-list">
|
||
<span class="term" data-tip="服务时效衡量任务、服务或工作流的服务水平和完成时限。">服务时效</span>
|
||
<span class="term" data-tip="成功率衡量任务、能力、服务或计划执行成功的比例。">成功率</span>
|
||
<span class="term" data-tip="响应耗时衡量目标接入、任务排队、执行、看板生成和审批等待时间。">响应耗时</span>
|
||
<span class="term" data-tip="人工介入率衡量有多少任务需要审批、暂停、接管或人工修复。">人工介入率</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- End of Main Architecture Container -->
|
||
|
||
<!-- 核心闭环 -->
|
||
<div class="mt-4 border border-blue-200 rounded flex overflow-hidden shadow-sm">
|
||
<div class="w-16 md:w-24 theme-dark-blue text-white flex flex-col items-center justify-center p-2 flex-shrink-0" data-tip="核心闭环展示一次业务目标从接入、计划、执行、沉淀、看板到人工决策的完整路径。">
|
||
<i class="fa-solid fa-rotate text-xl mb-1"></i>
|
||
<span class="font-bold text-center text-xs md:text-sm">核心闭环</span>
|
||
</div>
|
||
<div class="flex-1 bg-white p-4 relative overflow-x-auto">
|
||
<div class="flex items-center justify-between min-w-[1260px] mb-4 mt-2 px-4">
|
||
<div class="flex items-center gap-1 font-bold theme-text-dark-blue" data-tip="业务目标是用户或外部系统想达成的结果，进入系统后会先转成可治理的执行计划。"><i class="fa-solid fa-bullseye mr-1"></i>业务目标</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue" data-tip="执行计划描述为什么做、做成什么、如何拆，并支持人工审查、冻结和重新规划。"><i class="fa-regular fa-file-lines mr-1"></i>执行计划</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue" data-tip="工作任务是由计划步骤拆出来的可调度工作单元，负责绑定能力、输入、优先级和依赖。"><i class="fa-solid fa-list-ul mr-1"></i>工作任务</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue" data-tip="能力匹配为当前任务选择正式自动化能力或业务流程，必须满足版本、策略、权限和输入输出约定。"><i class="fa-solid fa-link mr-1"></i>能力匹配</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue" data-tip="执行前准备需要召回的经验记忆、需要启动或占用的后台服务，例如邮件读取、浏览器环境或外部服务进程。"><i class="fa-solid fa-server mr-1"></i>经验与服务准备</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue" data-tip="执行记录代表任务的一次执行尝试，记录执行人、服务占用、运行状态、恢复点和最终状态。"><i class="fa-regular fa-circle-play mr-1"></i>执行记录</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 font-bold theme-text-dark-blue" data-tip="自动执行阶段由脚本、流程、智能辅助或外部系统适配真正调用资源，并持续回写过程记录和状态。"><i class="fa-solid fa-gear mr-1"></i>自动执行</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 border border-blue-200 px-2 py-1 rounded theme-text-dark-blue bg-gray-50" data-tip="执行结果沉淀为业务状态、过程日志、成果资料和可复用经验，后续看板和审计都从这里生成。"><i class="fa-solid fa-database mr-1"></i>过程记录与成果沉淀</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 font-bold theme-text-dark-blue" data-tip="运营看板面向管理和查询，包括任务看板、全程追踪、审批队列、记忆索引和服务健康。"><i class="fa-solid fa-chart-column mr-1"></i>运营看板</div>
|
||
<i class="fa-solid fa-arrow-right text-blue-300 text-sm"></i>
|
||
<div class="flex items-center gap-1 font-bold theme-red border border-red-200 px-2 py-1 rounded" data-tip="人工决策允许审批、暂停、恢复、取消、接管和重新规划，并把每次干预记录下来。"><i class="fa-regular fa-user mr-1"></i>人工决策</div>
|
||
</div>
|
||
<!-- 底部虚线回环 -->
|
||
<div class="relative mt-6 min-w-[1260px] h-4">
|
||
<div class="absolute w-[80%] left-[10%] border-t border-dashed border-red-500 top-1/2"></div>
|
||
<div class="absolute left-[10%] top-1/2 -mt-1"><div class="arrow-left-red"></div></div>
|
||
<div class="absolute w-full flex justify-center -top-3">
|
||
<span class="bg-white px-2 text-xs font-bold theme-red" data-tip="人工决策会回到计划或任务层，改变后续执行路径，而不是直接绕过业务流程。">审批 / 暂停 / 恢复 / 取消 / 人工接管 / 重新规划</span>
|
||
</div>
|
||
<!-- 垂直连接线 -->
|
||
<div class="absolute left-[10%] bottom-1/2 h-4 border-l border-dashed border-red-500"></div>
|
||
<div class="absolute right-[10%] bottom-1/2 h-6 border-r border-dashed border-red-500"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
const tooltip = document.createElement("div");
|
||
tooltip.id = "sg-tooltip";
|
||
document.body.appendChild(tooltip);
|
||
|
||
let activeTipTarget = null;
|
||
|
||
const exampleRules = [
|
||
{ keys: ["汇报专用静态网站"], example: "双击 report-site/index.html 打开后，可在业务架构总览和业务流程图之间切换。" },
|
||
{ keys: ["业务架构总览"], example: "汇报开场先用这一页讲清楚 sgRobot 的四个业务分区。" },
|
||
{ keys: ["业务流程图"], example: "讲邮件触发流程时，可以切到流程页看它经过哪些架构模块。" },
|
||
{ keys: ["外部参与者"], example: "业务人员提交目标，运维看服务状态，审批人处理高风险动作。" },
|
||
{ keys: ["用户是目标"], example: "用户提出“把今天收到的客户邮件整理成日报”。" },
|
||
{ keys: ["运维关注"], example: "运维发现邮件读取服务连续失败后，查看健康状态并重启服务。" },
|
||
{ keys: ["审批人负责"], example: "系统要自动发送外部邮件前，审批人确认内容和收件人。" },
|
||
{ keys: ["外部业务系统"], example: "工单系统产生新工单后，通过系统接口触发 sgRobot 处理。" },
|
||
|
||
{ keys: ["业务入口与协同"], example: "用户提交巡检需求，外部系统推送消息，审批人在工作台确认风险动作。" },
|
||
{ keys: ["业务需求入口"], example: "每天 9 点的巡检计划、人工提交的日报需求、邮件到达事件都先进入这里。" },
|
||
{ keys: ["人工提交"], example: "负责人在工作台提交“生成本周设备巡检报告”。" },
|
||
{ keys: ["系统接口"], example: "CRM 系统把新客户资料同步过来，请求自动补全客户画像。" },
|
||
{ keys: ["计划任务"], example: "每个工作日 18 点自动汇总当天处理结果。" },
|
||
{ keys: ["事件触发"], example: "指定邮箱收到带附件的邮件后，自动触发读取和归档流程。" },
|
||
{ keys: ["协同工作台"], example: "审批人打开工作台查看待审批队列，运维查看失败任务。" },
|
||
{ keys: ["查看"], example: "查看某个任务当前是排队中、执行中还是等待审批。" },
|
||
{ keys: ["操作"], example: "用户手动暂停一个执行中的网页采集任务。" },
|
||
{ keys: ["审批"], example: "自动发送客户邮件前，需要审批人确认内容。" },
|
||
{ keys: ["回放"], example: "复盘昨天失败的巡检任务，查看它在哪一步超时。" },
|
||
{ keys: ["成果浏览"], example: "打开自动生成的报告、截图和数据表进行验收。" },
|
||
|
||
{ keys: ["任务治理与风控"], example: "把“处理客户邮件”拆成读取、分类、回复、归档，并在发信前要求审批。" },
|
||
{ keys: ["目标计划管理"], example: "把“生成月度巡检报告”拆成采集数据、生成报告、提交验收。" },
|
||
{ keys: ["业务目标"], example: "目标可以是“完成今日邮件分类并输出异常清单”。" },
|
||
{ keys: ["执行计划"], example: "计划中写明先读取邮件，再分类，再生成日报，最后等待验收。" },
|
||
{ keys: ["计划步骤"], example: "“登录系统下载报表”就是计划里的一个步骤。" },
|
||
{ keys: ["任务执行管理"], example: "同一计划下的多个采集任务可以排队、重试、暂停或取消。" },
|
||
{ keys: ["工作任务"], example: "“读取 inbox 中未处理邮件”是一项可调度工作任务。" },
|
||
{ keys: ["执行记录"], example: "第一次读取邮件失败后，第二次重试会形成新的执行记录。" },
|
||
{ keys: ["自动重试"], example: "网页临时超时后，系统在 3 分钟后自动再试一次。" },
|
||
{ keys: ["恢复点"], example: "长流程已经完成数据下载，失败后从报告生成环节继续。" },
|
||
{ keys: ["超时管控"], example: "浏览器操作超过 10 分钟未完成，就转入失败恢复或人工介入。" },
|
||
{ keys: ["人工治理"], example: "任务可以被审批、暂停、恢复、取消、接管或重新规划。" },
|
||
{ keys: ["审批通过"], example: "审批人确认发信内容无误后，允许流程继续发送。" },
|
||
{ keys: ["暂停"], example: "发现输入资料不完整时，先暂停任务等待补充。" },
|
||
{ keys: ["恢复"], example: "资料补齐后，从暂停点继续执行，不必从头开始。" },
|
||
{ keys: ["取消"], example: "业务目标已经撤销，取消计划并释放后台服务。" },
|
||
{ keys: ["人工接管"], example: "网页验证码无法自动处理时，转给人工完成后再继续。" },
|
||
{ keys: ["重新规划"], example: "原接口不可用，改走网页下载报表的替代路径。" },
|
||
{ keys: ["风险与规则"], example: "涉及外部发信、删除文件、控制设备的动作必须进入审批。" },
|
||
{ keys: ["记忆规则"], example: "用户偏好可以长期保留，但临时验证码不允许写入记忆。" },
|
||
{ keys: ["服务占用"], example: "某个任务正在使用邮件读取服务时，系统不会把该服务提前回收。" },
|
||
{ keys: ["风险等级"], example: "读取邮件是低风险，批量发信是高风险，需要审批。" },
|
||
{ keys: ["健康状态"], example: "邮件服务正常、浏览器环境异常、任务队列积压都能被展示出来。" },
|
||
|
||
{ keys: ["自动执行与能力"], example: "系统调用脚本、流程、智能辅助和外部系统适配来完成真实业务动作。" },
|
||
{ keys: ["能力目录"], example: "“读取邮件”“生成报告”“网页下载报表”都登记成可复用能力。" },
|
||
{ keys: ["能力登记"], example: "新增一个“登录后台下载销售报表”的自动化能力。" },
|
||
{ keys: ["版本管理"], example: "报表下载流程改版后，保留 v1 和 v2，避免影响旧任务。" },
|
||
{ keys: ["使用约定"], example: "规定输入必须包含日期范围，输出必须包含报告文件和数据结果。" },
|
||
{ keys: ["调度中枢"], example: "先检查账号和服务是否可用，再安排读取邮件、分类和生成报告。" },
|
||
{ keys: ["前置检查"], example: "执行前确认邮箱权限、浏览器环境、审批状态都满足条件。" },
|
||
{ keys: ["能力匹配"], example: "同样是取报表，优先走接口，接口失败再走网页自动化。" },
|
||
{ keys: ["失败恢复"], example: "下载失败后先重试，仍失败则换备用路径或转人工处理。" },
|
||
{ keys: ["自动脚本"], example: "每天固定导出报表、清洗数据、生成 CSV 文件。" },
|
||
{ keys: ["确定性任务"], example: "把固定格式表格转换成统一字段就是确定性任务。" },
|
||
{ keys: ["流程编排"], example: "把邮件读取、附件解析、报告生成、审批发送组合成一条流程。" },
|
||
{ keys: ["组合能力"], example: "“客户邮件处理”由读取、分类、回复草稿、归档四个能力组合。" },
|
||
{ keys: ["子流程"], example: "报告生成任务内部再拆成取数、制图、写摘要三个子流程。" },
|
||
{ keys: ["智能辅助"], example: "根据失败日志判断可能原因，并给出下一步处理建议。" },
|
||
{ keys: ["规划用于"], example: "把“做一份巡检报告”拆成采集、分析、生成、验收。" },
|
||
{ keys: ["修复建议"], example: "系统提示“登录页结构变化，建议改用备用选择器或人工接管”。" },
|
||
{ keys: ["解释用于"], example: "向审批人说明为什么这一步被判定为高风险。" },
|
||
{ keys: ["外部系统适配"], example: "同一业务流程可以同时操作网页后台、设备接口和机器人。" },
|
||
{ keys: ["网页操作"], example: "自动登录后台，下载当天订单报表。" },
|
||
{ keys: ["设备接入"], example: "读取设备状态或通过设备接口下发巡检命令。" },
|
||
{ keys: ["机器人控制"], example: "让机器人执行移动、拍照、语音播报等动作。" },
|
||
{ keys: ["按需后台服务"], example: "只有处理邮件任务时才启动邮件读取服务，空闲后自动回收。" },
|
||
{ keys: ["服务定义"], example: "定义邮件读取服务如何启动、检查健康、停止和授权。" },
|
||
{ keys: ["运行实例"], example: "当前启动了一个邮件读取实例，状态为运行中。" },
|
||
{ keys: ["占用关系"], example: "任务 A 正在使用浏览器环境，因此该环境不能被其他任务关闭。" },
|
||
|
||
{ keys: ["运营记录与看板"], example: "领导可以看到任务进度、风险节点、成果报告和人工介入情况。" },
|
||
{ keys: ["业务状态台账"], example: "某计划已激活，三个任务成功，一个任务等待审批。" },
|
||
{ keys: ["执行计划状态"], example: "计划当前处于“等待审批”或“执行中”。" },
|
||
{ keys: ["工作任务状态"], example: "任务当前是排队中、执行中、暂停、失败或完成。" },
|
||
{ keys: ["执行记录状态"], example: "第 2 次执行成功，第 1 次执行因网页超时失败。" },
|
||
{ keys: ["审批记录状态"], example: "发信审批已通过，删除文件审批被拒绝。" },
|
||
{ keys: ["过程日志"], example: "记录任务开始、服务启动、审批通过、执行失败等关键变化。" },
|
||
{ keys: ["关键过程记录"], example: "“09:03 邮件读取服务启动”“09:05 附件解析失败”。" },
|
||
{ keys: ["成果资料库"], example: "保存巡检报告、页面截图、附件解析结果和导出的表格。" },
|
||
{ keys: ["文件是"], example: "保存下载的 Excel、PDF 报告或邮件附件。" },
|
||
{ keys: ["报告是"], example: "自动生成日报、巡检报告或异常汇总。" },
|
||
{ keys: ["截图用于"], example: "保留网页提交成功页面，作为验收证据。" },
|
||
{ keys: ["数据结果"], example: "把邮件分类结果保存成结构化表格，供后续统计。" },
|
||
{ keys: ["经验与记忆库"], example: "记录某项目常用账号、报告格式偏好、失败处理经验。" },
|
||
{ keys: ["项目事实"], example: "某系统的报表入口固定在“运营中心 / 日报”菜单下。" },
|
||
{ keys: ["使用偏好"], example: "用户偏好报告用中文摘要，并保留原始数据表。" },
|
||
{ keys: ["关键决策"], example: "决定所有外部发信必须先进入人工审批。" },
|
||
{ keys: ["处理经验"], example: "某网页下载失败时，先刷新登录态再重试。" },
|
||
{ keys: ["观察摘要"], example: "最近三次失败都集中在同一个外部系统登录环节。" },
|
||
{ keys: ["运营看板"], example: "展示今日任务成功率、待审批数量、失败任务和服务健康。" },
|
||
{ keys: ["任务看板"], example: "看到哪些任务已完成、哪些阻塞、哪些需要人工介入。" },
|
||
{ keys: ["审批队列"], example: "所有等待确认的发信、删除、设备控制动作集中展示。" },
|
||
{ keys: ["记忆索引"], example: "查看并修正“用户偏好报告格式”的长期记忆。" },
|
||
{ keys: ["服务健康"], example: "邮件读取服务正常，浏览器环境重启 1 次，设备连接异常。" },
|
||
{ keys: ["全程追踪"], example: "按时间线查看一次任务从提交到验收的完整过程。" },
|
||
{ keys: ["过程回放"], example: "复盘某次失败，看到它在附件解析步骤出错。" },
|
||
{ keys: ["诊断"], example: "定位失败原因是账号过期、网页变化还是服务不可用。" },
|
||
{ keys: ["追责"], example: "确认是谁在什么时间批准了批量发信动作。" },
|
||
{ keys: ["运营指标"], example: "每周统计成功率、平均耗时和人工介入率。" },
|
||
{ keys: ["服务时效"], example: "巡检报告要求 30 分钟内完成并提交。" },
|
||
{ keys: ["成功率"], example: "本周邮件处理任务 100 次，成功 96 次。" },
|
||
{ keys: ["响应耗时"], example: "从邮件到达到生成处理结果平均耗时 2 分钟。" },
|
||
{ keys: ["人工介入率"], example: "本月 12% 的任务因审批或异常需要人工介入。" },
|
||
|
||
{ keys: ["核心闭环"], example: "一封客户邮件进入系统后，生成任务、自动处理、沉淀成果，再进入看板和复盘。" },
|
||
{ keys: ["经验与服务准备"], example: "执行前先读取用户偏好，并启动邮件读取或浏览器服务。" },
|
||
{ keys: ["过程记录与成果沉淀"], example: "任务完成后保存报告、截图、日志和可复用处理经验。" },
|
||
{ keys: ["人工决策"], example: "审批人确认批量发信、暂停异常任务或要求重新规划。" },
|
||
{ keys: ["审批 / 暂停"], example: "审批不通过时，流程回到计划层重新规划。" },
|
||
];
|
||
|
||
function normalizeText(value) {
|
||
return (value || "").replace(/\s+/g, " ").trim();
|
||
}
|
||
|
||
function tooltipExample(target) {
|
||
const label = normalizeText(target.textContent);
|
||
const base = normalizeText(target.dataset.tip);
|
||
const haystack = `${label} ${base}`;
|
||
const rule = exampleRules.find((item) => item.keys.every((key) => haystack.includes(key)));
|
||
if (rule) return rule.example;
|
||
return "领导查看该节点时，可以把它对应到一次人工交办、邮件触发、定时巡检或高风险审批中的具体动作。";
|
||
}
|
||
|
||
function tooltipText(target) {
|
||
const text = normalizeText(target.dataset.tip);
|
||
if (!text) return "";
|
||
if (text.includes("例：")) return text;
|
||
return `${text}\n例：${tooltipExample(target)}`;
|
||
}
|
||
|
||
function positionTooltip(event) {
|
||
const margin = 14;
|
||
const offset = 16;
|
||
const rect = tooltip.getBoundingClientRect();
|
||
let left = event.clientX + offset;
|
||
let top = event.clientY + offset;
|
||
|
||
if (left + rect.width + margin > window.innerWidth) {
|
||
left = Math.max(margin, event.clientX - rect.width - offset);
|
||
}
|
||
if (top + rect.height + margin > window.innerHeight) {
|
||
top = Math.max(margin, event.clientY - rect.height - offset);
|
||
}
|
||
|
||
tooltip.style.left = `${left}px`;
|
||
tooltip.style.top = `${top}px`;
|
||
}
|
||
|
||
function showTooltip(target, event) {
|
||
const text = tooltipText(target);
|
||
if (!text) return;
|
||
activeTipTarget = target;
|
||
tooltip.textContent = text;
|
||
tooltip.classList.add("is-visible");
|
||
positionTooltip(event);
|
||
}
|
||
|
||
function hideTooltip() {
|
||
activeTipTarget = null;
|
||
tooltip.classList.remove("is-visible");
|
||
}
|
||
|
||
document.addEventListener("pointerover", (event) => {
|
||
const target = event.target.closest("[data-tip]");
|
||
if (target) showTooltip(target, event);
|
||
});
|
||
|
||
document.addEventListener("pointermove", (event) => {
|
||
if (activeTipTarget) positionTooltip(event);
|
||
});
|
||
|
||
document.addEventListener("pointerout", (event) => {
|
||
if (!activeTipTarget) return;
|
||
const next = event.relatedTarget;
|
||
if (!next || !activeTipTarget.contains(next)) hideTooltip();
|
||
});
|
||
|
||
document.querySelectorAll("[data-tip]").forEach((element) => {
|
||
element.setAttribute("tabindex", "0");
|
||
element.setAttribute("aria-label", tooltipText(element));
|
||
element.addEventListener("focus", (event) => {
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
showTooltip(event.currentTarget, {
|
||
clientX: rect.left + rect.width / 2,
|
||
clientY: rect.top + rect.height / 2,
|
||
});
|
||
});
|
||
element.addEventListener("blur", hideTooltip);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|