Files
AIRegulations-doc/01_分层次技术架构图_v2.html
guangfei.zhao 58050e7696 feat: Add detailed architecture HTML and README for AI+合规智能中枢 V2
- 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.
2026-04-16 23:02:05 +08:00

555 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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; }
:root {
--bg: #eef3f8;
--text: #16324f;
--muted: #607080;
--line: #d7e0ea;
--blue: #2b5f8a;
--green: #2d8b57;
--amber: #c27a1d;
--purple: #7d3cb5;
--teal: #148f77;
--gray: #5d6d7e;
--red: #c0392b;
}
body {
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(160deg, #f2f6fb 0%, #e8eef5 100%);
color: var(--text);
min-height: 100vh;
padding: 34px 22px 42px;
}
.page { max-width: 1680px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 20px; }
.header h1 {
font-size: 34px;
font-weight: 900;
letter-spacing: 1.5px;
color: #18385b;
}
.header .sub {
font-size: 16px;
color: var(--muted);
margin-top: 8px;
font-weight: 500;
}
.header .tag {
display: inline-block;
margin-top: 12px;
padding: 6px 18px;
border-radius: 999px;
background: linear-gradient(135deg, #1a3a5c, #2b5f8a);
color: #fff;
font-size: 12px;
letter-spacing: 0.4px;
}
.highlights {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 auto 24px;
}
.pill {
padding: 9px 14px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
color: #38506a;
box-shadow: 0 10px 26px rgba(21, 42, 68, 0.05);
}
.board {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 240px;
gap: 18px;
align-items: start;
}
.rail {
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
border-radius: 18px;
padding: 18px 16px;
box-shadow: 0 14px 32px rgba(22, 50, 79, 0.08);
}
.rail h3 {
font-size: 16px;
margin-bottom: 6px;
color: #173756;
}
.rail .sub {
font-size: 12px;
color: #7d8d9f;
margin-bottom: 14px;
line-height: 1.55;
}
.rail-item {
padding: 10px 10px 10px 12px;
border-radius: 12px;
background: #f8fbfd;
border: 1px solid #e4ebf2;
margin-bottom: 10px;
}
.rail-item .name {
font-size: 13px;
font-weight: 700;
color: #1d4368;
}
.rail-item .desc {
font-size: 11px;
color: #6d7d8d;
line-height: 1.55;
margin-top: 3px;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.layer {
border-radius: 18px;
border: 2px solid;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 16px 34px rgba(20, 45, 74, 0.07);
}
.layer-head {
padding: 14px 20px;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
.layer-head .title { font-size: 18px; font-weight: 800; }
.layer-head .en { font-size: 12px; opacity: 0.78; font-weight: 400; }
.layer-head .idx {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.14);
font-size: 13px;
font-weight: 800;
}
.layer-body {
padding: 16px 18px 18px;
display: grid;
gap: 12px;
}
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card {
background: rgba(255, 255, 255, 0.96);
border-radius: 13px;
border: 1.5px solid;
padding: 12px 14px;
min-height: 88px;
}
.card .name {
font-size: 14px;
font-weight: 800;
margin-bottom: 4px;
}
.card .desc {
font-size: 11.5px;
color: #70808f;
line-height: 1.55;
}
.flow-arrow {
width: 2px;
height: 18px;
background: #afbcc8;
margin: 0 auto;
position: relative;
}
.flow-arrow::after {
content: '';
position: absolute;
left: -4px;
bottom: -6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #afbcc8;
}
.loop-box {
border-radius: 18px;
border: 2px solid #d35749;
background: linear-gradient(180deg, #fff7f5 0%, #fff 100%);
overflow: hidden;
box-shadow: 0 16px 34px rgba(192, 57, 43, 0.09);
}
.loop-head {
padding: 14px 20px;
color: #fff;
background: linear-gradient(135deg, #8b2018, #c0392b);
display: flex;
align-items: center;
gap: 10px;
}
.loop-head .title { font-size: 17px; font-weight: 800; }
.loop-head .en { font-size: 12px; opacity: 0.8; }
.loop-body {
padding: 16px;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
}
.step {
background: #fff;
border: 1.5px solid #efb0a9;
border-radius: 14px;
padding: 12px 12px 14px;
position: relative;
}
.step .num {
width: 24px;
height: 24px;
border-radius: 50%;
background: #c0392b;
color: #fff;
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 7px;
}
.step .name {
font-size: 13px;
font-weight: 800;
color: #8e281e;
margin-bottom: 4px;
}
.step .desc {
font-size: 11px;
color: #7b7b87;
line-height: 1.55;
}
.legend {
margin-top: 18px;
padding: 16px 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #617283;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.footer {
text-align: center;
margin-top: 18px;
font-size: 12px;
color: #8a98a7;
}
.c1 { border-color: #2b5f8a; background: #edf4fb; }
.c1 .layer-head { background: linear-gradient(135deg, #1a3a5c, #2b5f8a); }
.c1 .card { border-color: #a8c8e8; }
.c1 .card .name { color: #1a3a5c; }
.c2 { border-color: #2d8b57; background: #ebf7f0; }
.c2 .layer-head { background: linear-gradient(135deg, #1b5e3b, #2d8b57); }
.c2 .card { border-color: #aedbbe; }
.c2 .card .name { color: #1b5e3b; }
.c3 { border-color: #c27a1d; background: #fff5e9; }
.c3 .layer-head { background: linear-gradient(135deg, #91580e, #c27a1d); }
.c3 .card { border-color: #efcf9d; }
.c3 .card .name { color: #8f570f; }
.c4 { border-color: #7d3cb5; background: #f4ecfb; }
.c4 .layer-head { background: linear-gradient(135deg, #5b2c8b, #7d3cb5); }
.c4 .card { border-color: #d3b5ef; }
.c4 .card .name { color: #5b2c8b; }
.c5 { border-color: #148f77; background: #e8f8f4; }
.c5 .layer-head { background: linear-gradient(135deg, #0e6655, #148f77); }
.c5 .card { border-color: #a8ddcf; }
.c5 .card .name { color: #0e6655; }
.c6 { border-color: #5d6d7e; background: #eef1f5; }
.c6 .layer-head { background: linear-gradient(135deg, #334150, #5d6d7e); }
.c6 .card { border-color: #c2ccd4; }
.c6 .card .name { color: #334150; }
@media (max-width: 1480px) {
.board { grid-template-columns: 1fr; }
.loop-body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
.grid-5, .grid-4, .grid-6, .loop-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.header h1 { font-size: 28px; }
}
@media (max-width: 680px) {
body { padding: 20px 14px 28px; }
.grid-5, .grid-4, .grid-6, .loop-body { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>AI+合规智能中枢 - 分层技术架构 V2</h1>
<div class="sub">补齐规则与工作流层、法规发布门、证据链与 AI 治理能力</div>
<div class="tag">T-Systems AI Regulations Team | V2 Blueprint | 2026.04</div>
</div>
<div class="highlights">
<div class="pill">新增 规则与工作流层</div>
<div class="pill">新增 法规确认与发布门</div>
<div class="pill">新增 证据链与版本血缘</div>
<div class="pill">增强 AI 评测与 Guardrails</div>
<div class="pill">增强 IAM / ABAC / 租户隔离</div>
</div>
<div class="board">
<aside class="rail">
<h3>横切能力 A</h3>
<div class="sub">安全与数据治理全链路覆盖,不再只放在基础设施层。</div>
<div class="rail-item">
<div class="name">IAM / SSO / ABAC</div>
<div class="desc">AD/LDAP/企业微信统一身份,角色 + 属性双重授权,工作区与租户隔离。</div>
</div>
<div class="rail-item">
<div class="name">数据分级与脱敏</div>
<div class="desc">法规公开数据、企业制度、审计记录、供应商材料分区存储与最小权限访问。</div>
</div>
<div class="rail-item">
<div class="name">证据留痕与审计</div>
<div class="desc">结论、引用、模型版本、审批动作、整改轨迹统一写入审计与证据库。</div>
</div>
<div class="rail-item">
<div class="name">密钥与数据主权</div>
<div class="desc">KMS/Secrets、私有化部署、PIPL/DSL 数据主权控制,支持数据不出厂。</div>
</div>
</aside>
<main class="stack">
<section class="layer c1">
<div class="layer-head">
<span class="idx">L1</span>
<div>
<div class="title">渠道与身份接入层</div>
<div class="en">Channels, Identity and Access Layer</div>
</div>
</div>
<div class="layer-body grid-5">
<div class="card"><div class="name">Web 门户与大屏</div><div class="desc">知识问答、文档审查、EHS 看板、法规影响分析与管理报表。</div></div>
<div class="card"><div class="name">移动端与企业 Bot</div><div class="desc">飞书、钉钉、Teams、巡检 App、消息摘要与待办提醒。</div></div>
<div class="card"><div class="name">外部供应商门户</div><div class="desc">供应商声明上传、证据回传、整改协同、访问域隔离。</div></div>
<div class="card"><div class="name">企业集成与 ESB</div><div class="desc">PLM、ERP、MES、OA、SharePoint、Confluence、Webhook / Event Bus。</div></div>
<div class="card"><div class="name">IAM / API Gateway</div><div class="desc">SSO、WAF、TLS、限流、路由、OpenAPI、服务调用审计。</div></div>
</div>
</section>
<div class="flow-arrow"></div>
<section class="layer c2">
<div class="layer-head">
<span class="idx">L2</span>
<div>
<div class="title">业务场景层</div>
<div class="en">Business Scenario Layer</div>
</div>
</div>
<div class="layer-body grid-6">
<div class="card"><div class="name">合规知识问答</div><div class="desc">中英双语问答、引文回溯、法规研究助手、专题空间。</div></div>
<div class="card"><div class="name">文档审查与声明校验</div><div class="desc">条款比对、风险标注、供应商声明校验、整改建议。</div></div>
<div class="card"><div class="name">法规感知与影响分析</div><div class="desc">法规监控、版本 Diff、影响范围分析、变更摘要发布。</div></div>
<div class="card"><div class="name">EHS 隐患与体系审计</div><div class="desc">隐患识别、SIF 风险评分、ISO 45001 / IATF 16949 审计支持。</div></div>
<div class="card"><div class="name">供应商合规协同</div><div class="desc">外部材料收集、证据追踪、差距闭环、跨组织整改协同。</div></div>
<div class="card"><div class="name">管理层报表与预警</div><div class="desc">风险热力图、整改 SLA、法规影响看板、月度合规报告。</div></div>
</div>
</section>
<div class="flow-arrow"></div>
<section class="layer c3">
<div class="layer-head">
<span class="idx">L3</span>
<div>
<div class="title">规则与工作流层</div>
<div class="en">Rules, Decision and Workflow Layer</div>
</div>
</div>
<div class="layer-body grid-5">
<div class="card"><div class="name">规则引擎</div><div class="desc">法规条款映射成义务、控制项、适用条件、判定逻辑与风险阈值。</div></div>
<div class="card"><div class="name">义务-控制-证据模型</div><div class="desc">把法规要求、企业控制措施、证明材料与审查结论串成可审计证据链。</div></div>
<div class="card"><div class="name">工单与案例管理</div><div class="desc">整改任务、责任人、SLA、升级策略、复审节点与归档。</div></div>
<div class="card"><div class="name">人工复核与审批</div><div class="desc">专家确认、法务发布门、例外豁免、变更生效审批、双人复核。</div></div>
<div class="card"><div class="name">通知编排与模板</div><div class="desc">按角色、组织、业务域推送摘要、待办、报告与整改指令。</div></div>
</div>
</section>
<div class="flow-arrow"></div>
<section class="layer c4">
<div class="layer-head">
<span class="idx">L4</span>
<div>
<div class="title">AI 与决策引擎层</div>
<div class="en">AI, Retrieval and Decision Engine Layer</div>
</div>
</div>
<div class="layer-body grid-5">
<div class="card"><div class="name">混合检索与精排</div><div class="desc">BM25 + 向量召回 + Cross-Encoder 精排,支持专题空间与权限过滤。</div></div>
<div class="card"><div class="name">Model Gateway</div><div class="desc">统一接入 DeepSeek / Qwen / 本地模型,管理 Prompt、模板、版本与路由策略。</div></div>
<div class="card"><div class="name">LLM 生成与推理</div><div class="desc">引用锚定输出、结构化 JSON 结果、摘要生成、整改建议与问答生成。</div></div>
<div class="card"><div class="name">NLP 与图谱推理</div><div class="desc">条款分类、实体抽取、义务识别、多跳图谱推理、影响范围分析。</div></div>
<div class="card"><div class="name">Guardrails 与评测</div><div class="desc">幻觉检查、注入防护、引用一致性校验、离线数据集评测与在线反馈闭环。</div></div>
</div>
</section>
<div class="flow-arrow"></div>
<section class="layer c5">
<div class="layer-head">
<span class="idx">L5</span>
<div>
<div class="title">数据与知识资产层</div>
<div class="en">Data, Knowledge and Evidence Layer</div>
</div>
</div>
<div class="layer-body grid-5">
<div class="card"><div class="name">法规知识库</div><div class="desc">车辆安全、数据安全、EHS、碳排放、质量体系、处罚案例与最佳实践。</div></div>
<div class="card"><div class="name">证据库与版本血缘</div><div class="desc">原文引用、条款版本、模型运行记录、审批动作、整改闭环全量留存。</div></div>
<div class="card"><div class="name">向量 / 图谱 / 关系库</div><div class="desc">Milvus、Neo4j、PostgreSQL 承载语义检索、实体关系和业务状态。</div></div>
<div class="card"><div class="name">对象存储与档案库</div><div class="desc">MinIO / S3 保存原始文件、解析产物、报告、截图与归档材料。</div></div>
<div class="card"><div class="name">主数据与标签体系</div><div class="desc">法规域、产品线、工厂、供应商、责任部门、风险等级、控制目录。</div></div>
</div>
</section>
<div class="flow-arrow"></div>
<section class="layer c6">
<div class="layer-head">
<span class="idx">L6</span>
<div>
<div class="title">运行与集成底座层</div>
<div class="en">Runtime, Orchestration and Platform Layer</div>
</div>
</div>
<div class="layer-body grid-5">
<div class="card"><div class="name">Worker 与调度编排</div><div class="desc">Celery / Cron / DAG 统一执行解析、索引、对比、推送与报表任务。</div></div>
<div class="card"><div class="name">消息队列与缓存</div><div class="desc">RabbitMQ / Kafka 异步分发Redis 用于热数据、会话、分布式锁。</div></div>
<div class="card"><div class="name">容器与推理集群</div><div class="desc">Kubernetes、Docker、GPU 集群、vLLM / TGI 推理加速与弹性扩缩容。</div></div>
<div class="card"><div class="name">观测与可靠性</div><div class="desc">日志、指标、Tracing、SLA 告警、容量规划、备份与灾备演练。</div></div>
<div class="card"><div class="name">DevSecOps</div><div class="desc">CI/CD、镜像治理、配置管理、密钥轮换、环境隔离与发布回滚。</div></div>
</div>
</section>
<section class="loop-box">
<div class="loop-head">
<div class="title">法规感知与发布闭环</div>
<div class="en">Regulation Awareness, Approval and Remediation Loop</div>
</div>
<div class="loop-body">
<div class="step"><div class="num">1</div><div class="name">法规源监控</div><div class="desc">国标网、工信部、UN-ECE、EUR-Lex、碳平台、行业通报定时采集。</div></div>
<div class="step"><div class="num">2</div><div class="name">Diff 变更感知</div><div class="desc">新旧版本比对,识别新增、修订、废止条款与适用对象。</div></div>
<div class="step"><div class="num">3</div><div class="name">解析与结构化</div><div class="desc">OCR / MinerU 解析,条款级切分、嵌入、索引、实体抽取与标签化。</div></div>
<div class="step"><div class="num">4</div><div class="name">影响范围分析</div><div class="desc">映射到产品、工厂、制度、供应商与历史问题单,形成影响评估。</div></div>
<div class="step"><div class="num">5</div><div class="name">人工复核与发布</div><div class="desc">专家校验权威性、确定生效范围、审批发布版本,避免自动误推。</div></div>
<div class="step"><div class="num">6</div><div class="name">分角色推送</div><div class="desc">向研发、EHS、采购、法务和管理层推送摘要、待办与制度更新建议。</div></div>
<div class="step"><div class="num">7</div><div class="name">整改复审归档</div><div class="desc">自动建单、跟踪整改、复审关闭、证据归档,再回到源头持续监控。</div></div>
</div>
</section>
</main>
<aside class="rail">
<h3>横切能力 B</h3>
<div class="sub">AI 治理与平台可靠性作为控制面独立表达。</div>
<div class="rail-item">
<div class="name">模型治理</div>
<div class="desc">模型注册、版本切换、灰度路由、成本治理、推理配额与模型可用性策略。</div>
</div>
<div class="rail-item">
<div class="name">评测与回归</div>
<div class="desc">引用准确率、命中率、误报漏报、回答稳定性、法规更新回归测试。</div>
</div>
<div class="rail-item">
<div class="name">内容安全与 Guardrails</div>
<div class="desc">Prompt Injection 防护、越权访问拦截、敏感输出过滤、置信度门槛控制。</div>
</div>
<div class="rail-item">
<div class="name">服务可靠性</div>
<div class="desc">SLO/SLA、链路追踪、容量治理、热备容灾、跨地域恢复与演练。</div>
</div>
</aside>
</div>
<div class="legend">
<div class="legend-item"><div class="dot" style="background:#2b5f8a"></div>接入与身份层强调 SSO、ABAC、Partner Portal 与 ESB 集成</div>
<div class="legend-item"><div class="dot" style="background:#2d8b57"></div>业务层面向知识问答、审查、EHS、供应商与管理报表</div>
<div class="legend-item"><div class="dot" style="background:#c27a1d"></div>规则与工作流层补齐人工复核、审批、例外豁免与整改闭环</div>
<div class="legend-item"><div class="dot" style="background:#7d3cb5"></div>AI 引擎层增加 Model Gateway、评测和 Guardrails</div>
<div class="legend-item"><div class="dot" style="background:#148f77"></div>数据层补齐证据库、版本血缘和主数据标签体系</div>
<div class="legend-item"><div class="dot" style="background:#c0392b"></div>法规感知闭环新增发布门,避免未经确认直接进入整改流程</div>
</div>
<div class="footer">AI+合规智能中枢 V2 | 面向车企与工厂的可审计合规智能平台 | 2026.04</div>
</div>
</body>
</html>