guangfei.zhao
58050e7696
- Created a new HTML file for the detailed architecture diagram (02_详细技术架构图_v2.html) with comprehensive layout and styling. - Added a README.md file to provide navigation and descriptions for the architecture diagrams, including original and V2 versions, as well as specialized views.
251 lines
14 KiB
HTML
251 lines
14 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>AI+合规智能中枢 - 核心数据流闭环时序图 V2</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
||
background: linear-gradient(180deg, #f4f8fb 0%, #edf2f7 100%);
|
||
color: #183552;
|
||
padding: 28px 18px 34px;
|
||
}
|
||
|
||
.page { max-width: 1720px; margin: 0 auto; }
|
||
.header { text-align: center; margin-bottom: 18px; }
|
||
.header h1 { font-size: 34px; font-weight: 900; color: #18385b; }
|
||
.header .sub { margin-top: 8px; font-size: 16px; color: #687a8b; }
|
||
|
||
.chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.chip {
|
||
padding: 8px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.92);
|
||
border: 1px solid #dce4ec;
|
||
font-size: 12px;
|
||
color: #54687a;
|
||
box-shadow: 0 8px 20px rgba(22, 42, 68, 0.05);
|
||
}
|
||
|
||
.panel {
|
||
background: rgba(255,255,255,0.95);
|
||
border: 2px solid #dde5ee;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 14px 32px rgba(20, 40, 66, 0.08);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.panel-head {
|
||
padding: 13px 18px;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.panel-head .title { font-size: 17px; font-weight: 800; }
|
||
.panel-head .sub { font-size: 12px; opacity: 0.84; }
|
||
.head-red { background: linear-gradient(135deg, #8b2018, #c0392b); }
|
||
.head-green { background: linear-gradient(135deg, #1b5e3b, #2d8b57); }
|
||
.head-blue { background: linear-gradient(135deg, #1a3a5c, #2b5f8a); }
|
||
|
||
.panel-body { padding: 16px; }
|
||
|
||
.actors {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.actor {
|
||
background: #f7fbfd;
|
||
border: 1px solid #e3ebf2;
|
||
border-radius: 13px;
|
||
padding: 10px 11px;
|
||
text-align: center;
|
||
}
|
||
.actor .name { font-size: 12.5px; font-weight: 800; color: #1f4569; }
|
||
.actor .role { font-size: 10.5px; color: #708291; margin-top: 4px; line-height: 1.5; }
|
||
|
||
.sequence {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
gap: 10px 12px;
|
||
align-items: start;
|
||
}
|
||
|
||
.event {
|
||
background: #fff;
|
||
border: 1.5px solid #e2e8ef;
|
||
border-radius: 13px;
|
||
padding: 10px 12px;
|
||
box-shadow: 0 6px 16px rgba(20, 40, 66, 0.04);
|
||
}
|
||
.event .step {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
margin-right: 7px;
|
||
vertical-align: middle;
|
||
}
|
||
.event .name { font-size: 12.5px; font-weight: 800; color: #1e4569; }
|
||
.event .desc { font-size: 11px; color: #6e8090; line-height: 1.58; margin-top: 6px; }
|
||
|
||
.red { background: #c0392b; }
|
||
.green { background: #2d8b57; }
|
||
.blue { background: #2b5f8a; }
|
||
.orange { background: #c27a1d; }
|
||
.purple { background: #7d3cb5; }
|
||
.teal { background: #148f77; }
|
||
|
||
.legend {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
.legend-item {
|
||
background: rgba(255,255,255,0.95);
|
||
border: 1px solid #e1e8ef;
|
||
border-radius: 13px;
|
||
padding: 11px 12px;
|
||
}
|
||
.legend-item .name { font-size: 13px; font-weight: 800; color: #1f4569; }
|
||
.legend-item .desc { font-size: 11px; color: #70818f; line-height: 1.58; margin-top: 4px; }
|
||
|
||
.footer { text-align: center; margin-top: 18px; font-size: 12px; color: #8a98a7; }
|
||
|
||
@media (max-width: 1180px) {
|
||
.actors, .sequence, .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.event[style] { grid-column: auto !important; }
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
body { padding: 18px 12px 24px; }
|
||
.actors, .sequence, .legend { grid-template-columns: 1fr; }
|
||
.header h1 { font-size: 28px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<div class="header">
|
||
<h1>AI+合规智能中枢 - 核心数据流闭环时序图 V2</h1>
|
||
<div class="sub">聚焦关键业务链路的时序责任分工，表达同步调用、异步处理、人工审批与证据回写</div>
|
||
</div>
|
||
|
||
<div class="chips">
|
||
<div class="chip">时序视图</div>
|
||
<div class="chip">法规发布闭环</div>
|
||
<div class="chip">文档审查闭环</div>
|
||
<div class="chip">问答证据闭环</div>
|
||
</div>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head head-red">
|
||
<div class="title">A. 法规感知 -> 发布 -> 整改闭环</div>
|
||
<div class="sub">Regulation Awareness, Approval and Remediation Loop</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="actors">
|
||
<div class="actor"><div class="name">法规源</div><div class="role">国标网 / 工信部 / UN-ECE / EUR-Lex</div></div>
|
||
<div class="actor"><div class="name">采集感知服务</div><div class="role">轮询、Diff、版本识别</div></div>
|
||
<div class="actor"><div class="name">解析 / AI 引擎</div><div class="role">OCR、抽取、影响分析</div></div>
|
||
<div class="actor"><div class="name">审批发布台</div><div class="role">专家 / 法务复核</div></div>
|
||
<div class="actor"><div class="name">工作流 / 通知</div><div class="role">建单、分派、推送</div></div>
|
||
<div class="actor"><div class="name">知识 / 证据库</div><div class="role">版本、引用、归档</div></div>
|
||
</div>
|
||
<div class="sequence">
|
||
<div class="event" style="grid-column:1 / 3;"><span class="step red">1</span><span class="name">法规源发布新版本，采集服务轮询命中</span><div class="desc">记录来源、发布日期、版本号和原始下载地址。</div></div>
|
||
<div class="event" style="grid-column:2 / 4;"><span class="step red">2</span><span class="name">执行 Diff 检测与适用范围初判</span><div class="desc">识别新增、修订、废止条款，并打上法规域与影响对象标签。</div></div>
|
||
<div class="event" style="grid-column:3 / 6;"><span class="step red">3</span><span class="name">OCR / 结构化 / 义务抽取 / 影响分析</span><div class="desc">触发解析、条款切分、义务识别、制度映射和影响范围分析。</div></div>
|
||
<div class="event" style="grid-column:3 / 7;"><span class="step red">4</span><span class="name">写入草稿版知识、Diff 结果和证据快照</span><div class="desc">草稿版本先进入证据库和待发布区，不直接进入生产检索与整改链路。</div></div>
|
||
<div class="event" style="grid-column:4 / 5;"><span class="step red">5</span><span class="name">专家 / 法务执行发布门审批</span><div class="desc">确认法规权威性、生效日期、适用范围和解析质量。</div></div>
|
||
<div class="event" style="grid-column:4 / 7;"><span class="step red">6</span><span class="name">正式发布版本生效并回写规则、索引和图谱</span><div class="desc">发布后更新主知识库、规则映射、向量索引和图谱关系。</div></div>
|
||
<div class="event" style="grid-column:5 / 6;"><span class="step red">7</span><span class="name">按角色推送摘要并自动创建整改任务</span><div class="desc">向研发、EHS、采购、法务和管理层分发差异摘要与待办。</div></div>
|
||
<div class="event" style="grid-column:5 / 7;"><span class="step red">8</span><span class="name">整改回执、复审结论和归档材料持续回写</span><div class="desc">所有整改证据、审批动作和关闭结论沉淀回证据库与案例库。</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head head-green">
|
||
<div class="title">B. 文档审查 -> 人工复核 -> 整改闭环</div>
|
||
<div class="sub">Document Review, Human Validation and Remediation Loop</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="actors">
|
||
<div class="actor"><div class="name">用户 / 供应商</div><div class="role">上传制度、声明、合同附件</div></div>
|
||
<div class="actor"><div class="name">Portal / API</div><div class="role">登记任务、选择模板</div></div>
|
||
<div class="actor"><div class="name">解析服务</div><div class="role">OCR、切分、结构化</div></div>
|
||
<div class="actor"><div class="name">规则 / AI 审查</div><div class="role">比对、评分、建议</div></div>
|
||
<div class="actor"><div class="name">专家复核台</div><div class="role">人工确认和签发</div></div>
|
||
<div class="actor"><div class="name">任务 / 证据库</div><div class="role">报告、整改、归档</div></div>
|
||
</div>
|
||
<div class="sequence">
|
||
<div class="event" style="grid-column:1 / 3;"><span class="step green">1</span><span class="name">上传文件并选择审查模板</span><div class="desc">输入材料类型、适用法规域和目标审查场景。</div></div>
|
||
<div class="event" style="grid-column:2 / 4;"><span class="step green">2</span><span class="name">Portal 登记任务并投递解析队列</span><div class="desc">保存原始文件、任务 ID、操作者和版本快照。</div></div>
|
||
<div class="event" style="grid-column:3 / 5;"><span class="step green">3</span><span class="name">解析、条款切分与领域识别</span><div class="desc">抽取结构化段落、表格和关键条款候选。</div></div>
|
||
<div class="event" style="grid-column:4 / 6;"><span class="step green">4</span><span class="name">规则判定 + 语义比对 + 风险评分</span><div class="desc">输出缺项、冲突条款、证据要求和整改建议草稿。</div></div>
|
||
<div class="event" style="grid-column:5 / 6;"><span class="step green">5</span><span class="name">专家复核高风险项与误报项</span><div class="desc">允许补充说明、人工修订和例外豁免说明。</div></div>
|
||
<div class="event" style="grid-column:5 / 7;"><span class="step green">6</span><span class="name">生成正式报告并固化证据快照</span><div class="desc">报告、引用、审批记录和材料版本统一写入证据库。</div></div>
|
||
<div class="event" style="grid-column:6 / 7;"><span class="step green">7</span><span class="name">触发整改任务、SLA 跟踪与复验关闭</span><div class="desc">整改轨迹和复审结果回灌到案例库和知识空间。</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head head-blue">
|
||
<div class="title">C. 问答检索 -> 引用校验 -> 评测反馈闭环</div>
|
||
<div class="sub">Retrieval QA, Citation Validation and Evaluation Feedback Loop</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="actors">
|
||
<div class="actor"><div class="name">用户</div><div class="role">法规提问、研究问题、场景问答</div></div>
|
||
<div class="actor"><div class="name">BFF / API</div><div class="role">权限注入、空间选择</div></div>
|
||
<div class="actor"><div class="name">检索引擎</div><div class="role">召回、精排、过滤</div></div>
|
||
<div class="actor"><div class="name">Model Gateway / LLM</div><div class="role">生成、结构化输出</div></div>
|
||
<div class="actor"><div class="name">Guardrails</div><div class="role">引用一致性、防越权、防注入</div></div>
|
||
<div class="actor"><div class="name">Evidence / Eval</div><div class="role">日志、反馈、评测集</div></div>
|
||
</div>
|
||
<div class="sequence">
|
||
<div class="event" style="grid-column:1 / 3;"><span class="step blue">1</span><span class="name">用户提问，BFF 注入身份、空间与权限上下文</span><div class="desc">确定问题所属法规域、项目空间和可访问知识边界。</div></div>
|
||
<div class="event" style="grid-column:2 / 4;"><span class="step blue">2</span><span class="name">执行关键词 + 向量混合召回</span><div class="desc">同时检索条款级和文档级候选，并应用权限过滤与版本过滤。</div></div>
|
||
<div class="event" style="grid-column:3 / 4;"><span class="step blue">3</span><span class="name">Reranker 精排并返回最佳上下文</span><div class="desc">确保进入生成环节的片段具备高相关性和可引用性。</div></div>
|
||
<div class="event" style="grid-column:4 / 5;"><span class="step blue">4</span><span class="name">LLM 生成结构化答案与引用</span><div class="desc">输出条款、页码、来源文件、版本号和结论摘要。</div></div>
|
||
<div class="event" style="grid-column:5 / 6;"><span class="step blue">5</span><span class="name">Guardrails 校验引用一致性与越权风险</span><div class="desc">发现引用不支撑、越权内容或注入风险时拒答或降级。</div></div>
|
||
<div class="event" style="grid-column:5 / 7;"><span class="step blue">6</span><span class="name">返回答案并写入证据日志与评测样本</span><div class="desc">保留输入、上下文、输出、模型版本和检索命中结果。</div></div>
|
||
<div class="event" style="grid-column:1 / 7;"><span class="step blue">7</span><span class="name">用户反馈回流到评测与模板优化闭环</span><div class="desc">用于回归测试、Prompt 优化、路由策略调整和知识空间清理。</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item"><div class="name">时序图使用方式</div><div class="desc">适合汇报关键业务闭环、解释为什么需要规则层、审批门和证据库。</div></div>
|
||
<div class="legend-item"><div class="name">和逻辑图的关系</div><div class="desc">逻辑图讲职责边界，这张图讲跨组件协同顺序和关键回写动作。</div></div>
|
||
<div class="legend-item"><div class="name">和部署图的关系</div><div class="desc">部署图讲运行位置与网络分区，这张图不再展开 K8s、GPU 和状态数据部署细节。</div></div>
|
||
</div>
|
||
|
||
<div class="footer">AI+合规智能中枢 V2 | Core Flows and Sequence Loops | 2026.04</div>
|
||
</div>
|
||
</body>
|
||
</html>
|