xlxumu/docs/design/system_architecture.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900">
  <style>
    .layer { fill: #e3f2fd; stroke: #1976d2; stroke-width: 1; }
    .subsystem { fill: #f3e5f5; stroke: #7b1fa2; stroke-width: 1; }
    .service { fill: #e8f5e9; stroke: #388e3c; stroke-width: 1; }
    .component { fill: #fff3e0; stroke: #f57c00; stroke-width: 1; }
    .database { fill: #ffebee; stroke: #d32f2f; stroke-width: 1; }
    .title { font: bold 16px sans-serif; }
    .label { font: 12px sans-serif; }
    .arrow { stroke: #666; stroke-width: 2; marker-end: url(#arrowhead); }
  </style>
  
  <!-- 定义箭头 -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#666" />
    </marker>
  </defs>
  
  <!-- 用户接入层 -->
  <rect x="50" y="20" width="1100" height="120" class="layer" />
  <text x="600" y="40" text-anchor="middle" class="title">用户接入层</text>
  
  <!-- 官网首页 -->
  <rect x="100" y="60" width="150" height="60" class="subsystem" />
  <text x="175" y="90" text-anchor="middle" class="label">官网首页</text>
  
  <!-- 专业管理系统 -->
  <rect x="300" y="60" width="500" height="60" class="subsystem" />
  <text x="550" y="90" text-anchor="middle" class="label">专业管理系统</text>
  
  <!-- 微信小程序矩阵 -->
  <rect x="850" y="60" width="200" height="60" class="subsystem" />
  <text x="950" y="90" text-anchor="middle" class="label">微信小程序矩阵</text>
  
  <!-- API服务层 -->
  <rect x="50" y="180" width="1100" height="120" class="layer" />
  <text x="600" y="200" text-anchor="middle" class="title">API服务层 (Node.js)</text>
  
  <!-- 各个API服务 -->
  <rect x="100" y="220" width="100" height="60" class="service" />
  <text x="150" y="245" text-anchor="middle" class="label">养殖管理</text>
  <text x="150" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="220" y="220" width="100" height="60" class="service" />
  <text x="270" y="245" text-anchor="middle" class="label">金融服务</text>
  <text x="270" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="340" y="220" width="100" height="60" class="service" />
  <text x="390" y="245" text-anchor="middle" class="label">政府监管</text>
  <text x="390" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="460" y="220" width="100" height="60" class="service" />
  <text x="510" y="245" text-anchor="middle" class="label">交易管理</text>
  <text x="510" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="580" y="220" width="100" height="60" class="service" />
  <text x="630" y="245" text-anchor="middle" class="label">商城管理</text>
  <text x="630" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="700" y="220" width="100" height="60" class="service" />
  <text x="750" y="245" text-anchor="middle" class="label">数据中台</text>
  <text x="750" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="820" y="220" width="100" height="60" class="service" />
  <text x="870" y="245" text-anchor="middle" class="label">AI能力</text>
  <text x="870" y="260" text-anchor="middle" class="label">API</text>
  
  <rect x="940" y="220" width="100" height="60" class="service" />
  <text x="990" y="245" text-anchor="middle" class="label">用户中心</text>
  <text x="990" y="260" text-anchor="middle" class="label">API</text>
  
  <!-- 数据处理与存储层 -->
  <rect x="50" y="340" width="1100" height="120" class="layer" />
  <text x="600" y="360" text-anchor="middle" class="title">数据处理与存储层</text>
  
  <!-- 数据库 -->
  <rect x="100" y="380" width="150" height="60" class="database" />
  <text x="175" y="410" text-anchor="middle" class="label">关系数据库 (MySQL)</text>
  
  <!-- 缓存系统 -->
  <rect x="300" y="380" width="150" height="60" class="component" />
  <text x="375" y="410" text-anchor="middle" class="label">缓存系统 (Redis)</text>
  
  <!-- 消息队列 -->
  <rect x="500" y="380" width="150" height="60" class="component" />
  <text x="575" y="410" text-anchor="middle" class="label">消息队列 (RabbitMQ)</text>
  
  <!-- 文件存储 -->
  <rect x="700" y="380" width="150" height="60" class="component" />
  <text x="775" y="410" text-anchor="middle" class="label">文件存储 (腾讯云)</text>
  
  <!-- 日志存储 -->
  <rect x="900" y="380" width="150" height="60" class="component" />
  <text x="975" y="410" text-anchor="middle" class="label">日志存储 (ES)</text>
  
  <!-- 数据分析与展示层 -->
  <rect x="50" y="500" width="1100" height="120" class="layer" />
  <text x="600" y="520" text-anchor="middle" class="title">数据分析与展示层</text>
  
  <!-- 大数据分析引擎 -->
  <rect x="100" y="540" width="150" height="60" class="component" />
  <text x="175" y="570" text-anchor="middle" class="label">大数据分析引擎</text>
  
  <!-- 智能预警系统 -->
  <rect x="300" y="540" width="150" height="60" class="component" />
  <text x="375" y="570" text-anchor="middle" class="label">智能预警系统</text>
  
  <!-- 可视化平台 -->
  <rect x="500" y="540" width="150" height="60" class="component" />
  <text x="575" y="570" text-anchor="middle" class="label">可视化平台</text>
  
  <!-- 实时数据推送 -->
  <rect x="700" y="540" width="150" height="60" class="component" />
  <text x="775" y="570" text-anchor="middle" class="label">实时数据推送</text>
  
  <!-- 大屏可视化系统 -->
  <rect x="900" y="540" width="150" height="60" class="subsystem" />
  <text x="975" y="570" text-anchor="middle" class="label">大屏可视化系统</text>
  
  <!-- 监控与日志层 -->
  <rect x="50" y="660" width="1100" height="120" class="layer" />
  <text x="600" y="680" text-anchor="middle" class="title">监控与日志层</text>
  
  <!-- 应用性能监控 -->
  <rect x="100" y="700" width="150" height="60" class="component" />
  <text x="175" y="730" text-anchor="middle" class="label">应用性能监控</text>
  
  <!-- 服务器资源监控 -->
  <rect x="300" y="700" width="150" height="60" class="component" />
  <text x="375" y="730" text-anchor="middle" class="label">服务器资源监控</text>
  
  <!-- 日志收集与分析 -->
  <rect x="500" y="700" width="150" height="60" class="component" />
  <text x="575" y="730" text-anchor="middle" class="label">日志收集与分析</text>
  
  <!-- 异常告警 -->
  <rect x="700" y="700" width="150" height="60" class="component" />
  <text x="775" y="730" text-anchor="middle" class="label">异常告警</text>
  
  <!-- 部署架构层 -->
  <rect x="50" y="780" width="1100" height="100" class="layer" />
  <text x="600" y="800" text-anchor="middle" class="title">部署架构层</text>
  
  <!-- 容器化部署 -->
  <rect x="100" y="820" width="150" height="60" class="component" />
  <text x="175" y="850" text-anchor="middle" class="label">容器化部署</text>
  
  <!-- 负载均衡 -->
  <rect x="300" y="820" width="150" height="60" class="component" />
  <text x="375" y="850" text-anchor="middle" class="label">负载均衡</text>
  
  <!-- CI/CD -->
  <rect x="500" y="820" width="150" height="60" class="component" />
  <text x="575" y="850" text-anchor="middle" class="label">自动化部署 (CI/CD)</text>
  
  <!-- 容灾备份 -->
  <rect x="700" y="820" width="150" height="60" class="component" />
  <text x="775" y="850" text-anchor="middle" class="label">容灾备份</text>
  
  <!-- 连接线 -->
  <!-- 用户接入层到API服务层 -->
  <line x1="600" y1="140" x2="600" y2="180" class="arrow" />
  
  <!-- API服务层到数据处理与存储层 -->
  <line x1="600" y1="300" x2="600" y2="340" class="arrow" />
  
  <!-- 数据处理与存储层到数据分析与展示层 -->
  <line x1="600" y1="460" x2="600" y2="500" class="arrow" />
  
  <!-- 数据分析与展示层到监控与日志层 -->
  <line x1="600" y1="620" x2="600" y2="660" class="arrow" />
  
  <!-- 监控与日志层到部署架构层 -->
  <line x1="600" y1="780" x2="600" y2="820" class="arrow" />
  
  <!-- 数据库到缓存系统 -->
  <line x1="250" y1="410" x2="300" y2="410" class="arrow" />
  
  <!-- 缓存系统到消息队列 -->
  <line x1="450" y1="410" x2="500" y2="410" class="arrow" />
  
  <!-- 消息队列到文件存储 -->
  <line x1="650" y1="410" x2="700" y2="410" class="arrow" />
  
  <!-- 文件存储到日志存储 -->
  <line x1="850" y1="410" x2="900" y2="410" class="arrow" />
</svg>