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.
317 lines
13 KiB
HTML
317 lines
13 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, #f5f8fb 0%, #edf2f7 100%);
|
|
color: #173654;
|
|
padding: 28px 18px 34px;
|
|
}
|
|
|
|
.page { max-width: 1760px; 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: #67798b; }
|
|
|
|
.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);
|
|
}
|
|
|
|
.external {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.ext-card {
|
|
background: linear-gradient(145deg, #1a3a5c, #2b5f8a);
|
|
color: #fff;
|
|
border-radius: 15px;
|
|
padding: 13px 14px;
|
|
min-height: 94px;
|
|
box-shadow: 0 14px 28px rgba(21, 44, 72, 0.12);
|
|
}
|
|
.ext-card .name { font-size: 14px; font-weight: 800; }
|
|
.ext-card .desc { font-size: 11px; line-height: 1.55; opacity: 0.88; margin-top: 6px; }
|
|
|
|
.vpc {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 2px solid #dbe4ec;
|
|
border-radius: 24px;
|
|
padding: 16px;
|
|
box-shadow: 0 16px 34px rgba(20, 40, 66, 0.08);
|
|
}
|
|
.vpc-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
padding: 0 2px;
|
|
}
|
|
.vpc-head .title { font-size: 18px; font-weight: 800; color: #18385b; }
|
|
.vpc-head .sub { font-size: 12px; color: #6f8191; }
|
|
|
|
.zone-grid {
|
|
display: grid;
|
|
grid-template-columns: 260px minmax(0, 1fr) 300px;
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
|
|
.zone,
|
|
.cluster,
|
|
.note-box {
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
border: 1.5px solid #dee6ee;
|
|
box-shadow: 0 10px 24px rgba(20, 40, 66, 0.05);
|
|
}
|
|
|
|
.zone-head,
|
|
.cluster-head,
|
|
.note-head {
|
|
padding: 11px 14px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.zone-body,
|
|
.cluster-body,
|
|
.note-body { padding: 13px 14px 14px; }
|
|
|
|
.blue-head { background: linear-gradient(135deg, #1a3a5c, #2b5f8a); }
|
|
.green-head { background: linear-gradient(135deg, #1b5e3b, #2d8b57); }
|
|
.orange-head { background: linear-gradient(135deg, #91580e, #c27a1d); }
|
|
.purple-head { background: linear-gradient(135deg, #5b2c8b, #7d3cb5); }
|
|
.teal-head { background: linear-gradient(135deg, #0e6655, #148f77); }
|
|
.gray-head { background: linear-gradient(135deg, #334150, #5d6d7e); }
|
|
.red-head { background: linear-gradient(135deg, #8b2018, #c0392b); }
|
|
|
|
.mini {
|
|
background: #f8fbfd;
|
|
border: 1px solid #e6edf4;
|
|
border-radius: 12px;
|
|
padding: 9px 10px;
|
|
margin-bottom: 9px;
|
|
}
|
|
.mini .name { font-size: 12.5px; font-weight: 800; color: #1f4569; }
|
|
.mini .desc { font-size: 11px; color: #70818f; line-height: 1.55; margin-top: 4px; }
|
|
|
|
.center { display: flex; flex-direction: column; gap: 14px; }
|
|
|
|
.cluster-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.infra-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.node {
|
|
background: #f8fbfd;
|
|
border: 1px solid #e5ecf3;
|
|
border-radius: 12px;
|
|
padding: 10px 11px;
|
|
}
|
|
.node .name { font-size: 12.5px; font-weight: 800; color: #1e4569; }
|
|
.node .desc { font-size: 11px; color: #6f8090; line-height: 1.55; margin-top: 4px; }
|
|
|
|
.note-item {
|
|
font-size: 11.5px;
|
|
color: #627586;
|
|
line-height: 1.6;
|
|
padding: 8px 0 8px 14px;
|
|
position: relative;
|
|
border-bottom: 1px solid #eef2f6;
|
|
}
|
|
.note-item:last-child { border-bottom: none; }
|
|
.note-item::before {
|
|
content: '•';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 7px;
|
|
color: #8ea1b3;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer { text-align: center; margin-top: 18px; font-size: 12px; color: #8a98a7; }
|
|
|
|
@media (max-width: 1500px) {
|
|
.zone-grid { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.external, .cluster-grid, .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
@media (max-width: 720px) {
|
|
body { padding: 18px 12px 24px; }
|
|
.external, .cluster-grid, .infra-grid { 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">企业私有云 / VPC / 数据中心</div>
|
|
<div class="chip">服务、Worker、模型、数据分区运行</div>
|
|
<div class="chip">治理与观测面独立</div>
|
|
</div>
|
|
|
|
<div class="external">
|
|
<div class="ext-card"><div class="name">企业用户</div><div class="desc">Web 门户、管理后台、审计台、法规发布台。</div></div>
|
|
<div class="ext-card"><div class="name">移动端 / 企业 Bot</div><div class="desc">巡检、待办、消息摘要、整改跟踪。</div></div>
|
|
<div class="ext-card"><div class="name">外部供应商</div><div class="desc">Partner Portal、声明上传、补证与协同。</div></div>
|
|
<div class="ext-card"><div class="name">企业系统</div><div class="desc">PLM、ERP、MES、OA、SharePoint、Confluence。</div></div>
|
|
<div class="ext-card"><div class="name">外部法规源</div><div class="desc">国标网、工信部、UN-ECE、EUR-Lex、碳交易平台。</div></div>
|
|
</div>
|
|
|
|
<div class="vpc">
|
|
<div class="vpc-head">
|
|
<div class="title">企业专有云 / VPC / 数据中心边界</div>
|
|
<div class="sub">DMZ 接入区 -> 应用服务区 -> 异步编排区 -> AI 推理区 -> 状态数据区 -> 治理运维区</div>
|
|
</div>
|
|
|
|
<div class="zone-grid">
|
|
<div>
|
|
<div class="zone">
|
|
<div class="zone-head blue-head">接入与边界区</div>
|
|
<div class="zone-body">
|
|
<div class="mini"><div class="name">WAF / LB / API Gateway</div><div class="desc">南北向流量入口、TLS 终止、限流、审计与灰度。</div></div>
|
|
<div class="mini"><div class="name">SSO / AD / LDAP</div><div class="desc">统一身份认证、企业账户、外部协作者和 MFA。</div></div>
|
|
<div class="mini"><div class="name">Partner Zone</div><div class="desc">供应商隔离域、数据水印、访问有效期与文件控制。</div></div>
|
|
<div class="mini"><div class="name">OpenAPI / Event Bus</div><div class="desc">向企业系统暴露 API、Webhook 和事件订阅。</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone" style="margin-top:14px;">
|
|
<div class="zone-head green-head">企业集成区</div>
|
|
<div class="zone-body">
|
|
<div class="mini"><div class="name">Connector Service</div><div class="desc">对接 PLM、ERP、MES、OA、SharePoint 和文档库。</div></div>
|
|
<div class="mini"><div class="name">Sync / Webhook Adapter</div><div class="desc">双向同步对象、事件、整改状态和审查结果。</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center">
|
|
<div class="cluster-grid">
|
|
<div class="cluster">
|
|
<div class="cluster-head green-head">应用服务命名空间</div>
|
|
<div class="cluster-body">
|
|
<div class="mini"><div class="name">Portal / BFF</div><div class="desc">页面聚合、会话上下文、角色视图适配。</div></div>
|
|
<div class="mini"><div class="name">Knowledge / Review Service</div><div class="desc">问答、研究摘要、文档审查、声明校验。</div></div>
|
|
<div class="mini"><div class="name">Regulation Awareness Service</div><div class="desc">法规感知、版本 Diff、影响分析、发布编排。</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cluster">
|
|
<div class="cluster-head orange-head">规则与工作流命名空间</div>
|
|
<div class="cluster-body">
|
|
<div class="mini"><div class="name">Rule Engine</div><div class="desc">义务、控制点、风险阈值与模板化判定逻辑。</div></div>
|
|
<div class="mini"><div class="name">Workflow / Case Service</div><div class="desc">整改工单、SLA、责任人、升级策略和归档。</div></div>
|
|
<div class="mini"><div class="name">Approval Console</div><div class="desc">法规发布门、人工复核、例外豁免和双人审批。</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cluster-grid">
|
|
<div class="cluster">
|
|
<div class="cluster-head purple-head">异步 Worker 与调度区</div>
|
|
<div class="cluster-body">
|
|
<div class="mini"><div class="name">Scheduler / Trigger</div><div class="desc">Cron、事件触发、批量重索引、超时提醒和月报任务。</div></div>
|
|
<div class="mini"><div class="name">Parse / Embedding Workers</div><div class="desc">文档解析、切分、向量化、索引写入和缓存预热。</div></div>
|
|
<div class="mini"><div class="name">Awareness / Notify Workers</div><div class="desc">法规 Diff、推送分发、整改催办和导出任务。</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cluster">
|
|
<div class="cluster-head red-head">AI 推理与解析区</div>
|
|
<div class="cluster-body">
|
|
<div class="mini"><div class="name">Model Gateway</div><div class="desc">统一接入 DeepSeek、Qwen、本地推理服务与模板版本。</div></div>
|
|
<div class="mini"><div class="name">vLLM / TGI / GPU Pool</div><div class="desc">在线生成与推理路由，支持配额、限速和弹性扩容。</div></div>
|
|
<div class="mini"><div class="name">OCR / MinerU Cluster</div><div class="desc">文档解析、复杂版面识别和回退链路。</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cluster">
|
|
<div class="cluster-head teal-head">状态数据与中间件区</div>
|
|
<div class="cluster-body infra-grid">
|
|
<div class="node"><div class="name">PostgreSQL</div><div class="desc">租户、权限、版本、任务、案例和主数据。</div></div>
|
|
<div class="node"><div class="name">Milvus</div><div class="desc">条款向量、文档向量和权限过滤标签。</div></div>
|
|
<div class="node"><div class="name">Neo4j</div><div class="desc">法规、义务、控制点、组织和案例图谱。</div></div>
|
|
<div class="node"><div class="name">MinIO / Archive</div><div class="desc">原始文件、解析产物、报告与归档包。</div></div>
|
|
<div class="node"><div class="name">RabbitMQ / Redis</div><div class="desc">队列、缓存、分布式锁和热点摘要。</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="note-box">
|
|
<div class="note-head gray-head">治理与运维区</div>
|
|
<div class="note-body">
|
|
<div class="note-item">Prometheus、Grafana、Loki / ELK、Tracing 构成统一观测面。</div>
|
|
<div class="note-item">KMS / Secrets、镜像扫描、配置中心和审计告警独立运行。</div>
|
|
<div class="note-item">CI / CD、发布回滚、环境隔离和灾备恢复流程纳入平台控制面。</div>
|
|
<div class="note-item">模型治理台负责模型版本、路由策略、评测回归和成本监控。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note-box" style="margin-top:14px;">
|
|
<div class="note-head purple-head">高可用设计</div>
|
|
<div class="note-body">
|
|
<div class="note-item">无状态服务多副本部署，入口网关支持灰度与故障摘除。</div>
|
|
<div class="note-item">Worker 可按任务类型水平扩展，法规感知和解析任务解耦运行。</div>
|
|
<div class="note-item">状态数据采用备份、快照、主从或托管高可用策略。</div>
|
|
<div class="note-item">GPU 池与解析集群独立扩容，避免在线问答被离线批任务挤占。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note-box" style="margin-top:14px;">
|
|
<div class="note-head orange-head">运行边界说明</div>
|
|
<div class="note-body">
|
|
<div class="note-item">该图表达运行拓扑，不展开业务流程与详细时序。</div>
|
|
<div class="note-item">法规发布门与人工复核台作为独立运行组件保留，不下沉为线下动作。</div>
|
|
<div class="note-item">证据库存储和审计日志作为生产组件处理，不仅是报表输出附件。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">AI+合规智能中枢 V2 | Deployment and Runtime Architecture | 2026.04</div>
|
|
</div>
|
|
</body>
|
|
</html>
|