liuchengsen
/
zhijiayun-pharmacy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>技术架构图</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #f5f7fa;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    min-height: 100vh;
  }
  .container {
    max-width: 1200px;
    width: 100%;
  }
  h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 6px;
  }
  .subtitle {
    font-size: 13px;
    color: #718096;
    margin-bottom: 24px;
  }
  svg {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }
</style>
</head>
<body>
<div class="container">
  <h1>技术架构图</h1>
  <p class="subtitle">三层架构 · 数据流 · 模块间调用关系</p>
  <svg viewBox="0 0 1160 940" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M0 0L10 5L0 10z" fill="#94a3b8"/>
      </marker>
      <marker id="arrB" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M0 0L10 5L0 10z" fill="#3b82f6"/>
      </marker>
      <marker id="arrO" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M0 0L10 5L0 10z" fill="#f97316"/>
      </marker>
      <filter id="shadow" x="-4%" y="-4%" width="108%" height="112%">
        <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.06"/>
      </filter>
      <linearGradient id="gAccess" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#eff6ff"/>
        <stop offset="100%" stop-color="#dbeafe"/>
      </linearGradient>
      <linearGradient id="gInfra" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#f5f3ff"/>
        <stop offset="100%" stop-color="#ede9fe"/>
      </linearGradient>
    </defs>

    <!-- ══════ Layer 1: 接入层 ══════ -->
    <rect x="20" y="16" width="1120" height="130" rx="14" fill="url(#gAccess)" stroke="#93c5fd" stroke-width="1.5"/>
    <text x="40" y="40" fill="#3b82f6" font-size="13" font-weight="700">接入层</text>

    <!-- Web/移动端 -->
    <rect x="80" y="58" width="210" height="48" rx="10" fill="#fff" stroke="#93c5fd" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="185" y="86" text-anchor="middle" fill="#1e293b" font-size="14" font-weight="500">Web / 移动端前端</text>

    <!-- 第三方H5 -->
    <rect x="340" y="58" width="210" height="48" rx="10" fill="#fff" stroke="#93c5fd" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="445" y="86" text-anchor="middle" fill="#1e293b" font-size="14" font-weight="500">第三方 H5 入口</text>

    <!-- API网关 -->
    <rect x="640" y="58" width="240" height="48" rx="10" fill="#3b82f6" stroke="#2563eb" stroke-width="2" filter="url(#shadow)"/>
    <text x="760" y="86" text-anchor="middle" fill="#fff" font-size="14" font-weight="600">统一 API 网关</text>

    <!-- Access arrows -->
    <line x1="290" y1="82" x2="636" y2="82" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>
    <line x1="550" y1="82" x2="636" y2="82" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>

    <!-- ══════ Layer 2: 核心业务模块 ══════ -->
    <rect x="20" y="170" width="1120" height="470" rx="14" fill="#fff" stroke="#e2e8f0" stroke-width="1.5"/>
    <text x="40" y="196" fill="#475569" font-size="13" font-weight="700">核心业务模块</text>

    <!-- Row 1: 3 modules -->
    <!-- B1: 用户账户管理 -->
    <rect x="56" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#3b82f6" stroke-width="2" filter="url(#shadow)"/>
    <text x="221" y="244" text-anchor="middle" fill="#1e40af" font-size="15" font-weight="700">用户账户管理模块</text>
    <line x1="76" y1="258" x2="366" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    <text x="221" y="280" text-anchor="middle" fill="#64748b" font-size="12">注册 / 登录 / 第三方授权</text>
    <text x="221" y="302" text-anchor="middle" fill="#64748b" font-size="12">用户信息 &amp; 角色权限</text>

    <!-- B2: 邀请系统 -->
    <rect x="415" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#14b8a6" stroke-width="2" filter="url(#shadow)"/>
    <text x="580" y="244" text-anchor="middle" fill="#0f766e" font-size="15" font-weight="700">邀请系统模块</text>
    <line x1="435" y1="258" x2="725" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    <text x="580" y="280" text-anchor="middle" fill="#64748b" font-size="12">邀请码 / 邀请链接生成</text>
    <text x="580" y="302" text-anchor="middle" fill="#64748b" font-size="12">邀请关系 &amp; 记录管理</text>

    <!-- B3: 额度&调用限制 -->
    <rect x="774" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#22c55e" stroke-width="2" filter="url(#shadow)"/>
    <text x="939" y="244" text-anchor="middle" fill="#15803d" font-size="15" font-weight="700">额度 &amp; 调用限制模块</text>
    <line x1="794" y1="258" x2="1084" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    <text x="939" y="280" text-anchor="middle" fill="#64748b" font-size="12">免费 / 会员额度配置</text>
    <text x="939" y="302" text-anchor="middle" fill="#64748b" font-size="12">调用次数限流 &amp; 扣减</text>

    <!-- Row 2: 3 modules -->
    <!-- B4: 邀请奖励 -->
    <rect x="56" y="370" width="330" height="110" rx="12" fill="#fff" stroke="#8b5cf6" stroke-width="2" filter="url(#shadow)"/>
    <text x="221" y="398" text-anchor="middle" fill="#6d28d9" font-size="15" font-weight="700">邀请奖励模块</text>
    <line x1="76" y1="412" x2="366" y2="412" stroke="#e2e8f0" stroke-width="1"/>
    <text x="221" y="434" text-anchor="middle" fill="#64748b" font-size="12">爬取次数奖励发放</text>
    <text x="221" y="456" text-anchor="middle" fill="#64748b" font-size="12">奖励记录统计</text>

    <!-- B5: 支付&会员 -->
    <rect x="415" y="370" width="330" height="130" rx="12" fill="#fff" stroke="#eab308" stroke-width="2" filter="url(#shadow)"/>
    <text x="580" y="398" text-anchor="middle" fill="#a16207" font-size="15" font-weight="700">支付 &amp; 会员模块</text>
    <line x1="435" y1="412" x2="725" y2="412" stroke="#e2e8f0" stroke-width="1"/>
    <text x="580" y="434" text-anchor="middle" fill="#64748b" font-size="12">多渠道支付</text>
    <text x="580" y="456" text-anchor="middle" fill="#64748b" font-size="12">会员套餐 &amp; 权限开通</text>
    <text x="580" y="478" text-anchor="middle" fill="#64748b" font-size="12">订单 &amp; 退款管理</text>

    <!-- B6: 商品爬取服务 (核心) -->
    <rect x="774" y="370" width="330" height="110" rx="12" fill="#fff7ed" stroke="#f97316" stroke-width="2.5" filter="url(#shadow)"/>
    <rect x="1032" y="376" width="52" height="22" rx="11" fill="#f97316"/>
    <text x="1058" y="391" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">核心</text>
    <text x="939" y="404" text-anchor="middle" fill="#c2410c" font-size="15" font-weight="700">商品爬取服务</text>
    <line x1="794" y1="418" x2="1084" y2="418" stroke="#fed7aa" stroke-width="1"/>
    <text x="939" y="444" text-anchor="middle" fill="#9a3412" font-size="12">核心爬取引擎</text>
    <text x="939" y="464" text-anchor="middle" fill="#9a3412" font-size="12">数据采集 &amp; 解析</text>

    <!-- API Gateway → B1 & B3 -->
    <path d="M760,106 L760,160 Q760,170 750,170 L221,170 Q211,170 211,180 L211,212" fill="none" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>
    <path d="M760,106 L760,160 Q760,170 770,170 L939,170 Q949,170 949,180 L949,212" fill="none" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>

    <!-- Inter-module: B1→B2 dashed -->
    <line x1="386" y1="271" x2="411" y2="271" stroke="#8b5cf6" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <!-- B1→B5 dashed curve -->
    <path d="M221,326 Q221,350 400,350 Q580,350 580,366" fill="none" stroke="#eab308" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <!-- B2→B4 dashed curve -->
    <path d="M500,326 Q500,350 350,350 Q221,350 221,366" fill="none" stroke="#8b5cf6" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <!-- B4→B3 dashed curve -->
    <path d="M386,425 Q580,425 580,380 Q580,340 770,271" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <!-- B5→B3 dashed -->
    <line x1="745" y1="430" x2="770" y2="290" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <!-- B3→B6 solid -->
    <line x1="939" y1="326" x2="939" y2="366" stroke="#f97316" stroke-width="2" marker-end="url(#arrO)"/>

    <!-- ══════ Layer 3: 基础中间件 ══════ -->
    <rect x="20" y="664" width="1120" height="140" rx="14" fill="url(#gInfra)" stroke="#c4b5fd" stroke-width="1.5"/>
    <text x="40" y="690" fill="#7c3aed" font-size="13" font-weight="700">基础中间件 &amp; 存储</text>

    <!-- C1: 数据库 -->
    <rect x="52" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="147" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">数据库</text>
    <text x="147" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">用户 / 邀请 / 订单 / 日志</text>

    <!-- C2: Redis -->
    <rect x="262" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="357" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">Redis 缓存</text>
    <text x="357" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">Token / 额度 / 邀请码</text>

    <!-- C3: 消息队列 -->
    <rect x="472" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="567" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">消息队列</text>
    <text x="567" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">异步奖励 / 支付回调 / 爬取</text>

    <!-- C4: 日志监控 -->
    <rect x="682" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="777" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">日志 &amp; 监控 &amp; 告警</text>
    <text x="777" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">全链路可观测</text>

    <!-- C5: 安全组件 -->
    <rect x="892" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="987" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">安全组件</text>
    <text x="987" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">加密 / 鉴权 / 防攻击</text>

    <!-- Business → Infra arrows -->
    <!-- B1→C1,C4,C5 -->
    <line x1="150" y1="326" x2="147" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="200" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <line x1="250" y1="326" x2="987" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <!-- B2→C1,C2,C4 -->
    <line x1="520" y1="326" x2="147" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <line x1="560" y1="326" x2="357" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="600" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <!-- B3→C2,C4 -->
    <line x1="900" y1="326" x2="357" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="940" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <!-- B4→C3,C4 -->
    <line x1="200" y1="480" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="240" y1="480" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <!-- B5→C3,C4,C5 -->
    <line x1="560" y1="500" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="590" y1="500" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <line x1="620" y1="500" x2="987" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    <!-- B6→C3,C4 -->
    <line x1="920" y1="480" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    <line x1="950" y1="480" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>

    <!-- ══════ Legend ══════ -->
    <rect x="20" y="840" width="1120" height="60" rx="12" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
    <text x="60" y="876" fill="#64748b" font-size="12" font-weight="600">图例：</text>

    <line x1="120" y1="870" x2="160" y2="870" stroke="#94a3b8" stroke-width="2" marker-end="url(#arr)"/>
    <text x="170" y="875" fill="#64748b" font-size="12">数据流</text>

    <line x1="240" y1="870" x2="280" y2="870" stroke="#94a3b8" stroke-width="2" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    <text x="290" y="875" fill="#64748b" font-size="12">模块间调用</text>

    <rect x="400" y="860" width="20" height="20" rx="6" fill="#fff7ed" stroke="#f97316" stroke-width="2"/>
    <text x="428" y="875" fill="#64748b" font-size="12">核心服务</text>

    <rect x="520" y="860" width="20" height="20" rx="6" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
    <text x="548" y="875" fill="#64748b" font-size="12">接入层</text>

    <rect x="620" y="860" width="20" height="20" rx="6" fill="#f5f3ff" stroke="#8b5cf6" stroke-width="1.5"/>
    <text x="648" y="875" fill="#64748b" font-size="12">中间件</text>
  </svg>
</div>
</body>
</html>