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.
This commit is contained in:
2026-04-16 23:02:05 +08:00
parent af392c2d9b
commit 58050e7696
6 changed files with 2167 additions and 0 deletions

View File

@@ -0,0 +1,554 @@
<!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>