صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
liuchengsen
/
zhijiayun-pharmacy
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: 1dd1b1d6ff
شاخه‌ها تگ‌ها
zhijiayun-pharm...
/
docs
/
技术架构图.html

技术架构图.html 14 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>技术架构图</title>
    7. 

  7. <style>
    8. 

  8.   * { margin: 0; padding: 0; box-sizing: border-box; }
    9. 

  9.   body {
    10. 

  10.     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    11. 

  11.     background: #f5f7fa;
    12. 

  12.     display: flex;
    13. 

  13.     justify-content: center;
    14. 

  14.     padding: 32px 16px;
    15. 

  15.     min-height: 100vh;
    16. 

  16.   }
    17. 

  17.   .container {
    18. 

  18.     max-width: 1200px;
    19. 

  19.     width: 100%;
    20. 

  20.   }
    21. 

  21.   h1 {
    22. 

  22.     font-size: 24px;
    23. 

  23.     font-weight: 700;
    24. 

  24.     color: #1a202c;
    25. 

  25.     margin-bottom: 6px;
    26. 

  26.   }
    27. 

  27.   .subtitle {
    28. 

  28.     font-size: 13px;
    29. 

  29.     color: #718096;
    30. 

  30.     margin-bottom: 24px;
    31. 

  31.   }
    32. 

  32.   svg {
    33. 

  33.     width: 100%;
    34. 

  34.     height: auto;
    35. 

  35.     background: #fff;
    36. 

  36.     border-radius: 16px;
    37. 

  37.     border: 1px solid #e2e8f0;
    38. 

  38.   }
    39. 

  39. </style>
    40. 

  40. </head>
    41. 

  41. <body>
    42. 

  42. <div class="container">
    43. 

  43.   <h1>技术架构图</h1>
    44. 

  44.   <p class="subtitle">三层架构 · 数据流 · 模块间调用关系</p>
    45. 

  45.   <svg viewBox="0 0 1160 940" xmlns="http://www.w3.org/2000/svg">
    46. 

  46.     <defs>
    47. 

  47.       <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
    48. 

  48.         <path d="M0 0L10 5L0 10z" fill="#94a3b8"/>
    49. 

  49.       </marker>
    50. 

  50.       <marker id="arrB" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
    51. 

  51.         <path d="M0 0L10 5L0 10z" fill="#3b82f6"/>
    52. 

  52.       </marker>
    53. 

  53.       <marker id="arrO" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
    54. 

  54.         <path d="M0 0L10 5L0 10z" fill="#f97316"/>
    55. 

  55.       </marker>
    56. 

  56.       <filter id="shadow" x="-4%" y="-4%" width="108%" height="112%">
    57. 

  57.         <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.06"/>
    58. 

  58.       </filter>
    59. 

  59.       <linearGradient id="gAccess" x1="0" y1="0" x2="0" y2="1">
    60. 

  60.         <stop offset="0%" stop-color="#eff6ff"/>
    61. 

  61.         <stop offset="100%" stop-color="#dbeafe"/>
    62. 

  62.       </linearGradient>
    63. 

  63.       <linearGradient id="gInfra" x1="0" y1="0" x2="0" y2="1">
    64. 

  64.         <stop offset="0%" stop-color="#f5f3ff"/>
    65. 

  65.         <stop offset="100%" stop-color="#ede9fe"/>
    66. 

  66.       </linearGradient>
    67. 

  67.     </defs>
    68. 

  68. 

  69.     <!-- ══════ Layer 1: 接入层 ══════ -->
    70. 

  70.     <rect x="20" y="16" width="1120" height="130" rx="14" fill="url(#gAccess)" stroke="#93c5fd" stroke-width="1.5"/>
    71. 

  71.     <text x="40" y="40" fill="#3b82f6" font-size="13" font-weight="700">接入层</text>
    72. 

  72. 

  73.     <!-- Web/移动端 -->
    74. 

  74.     <rect x="80" y="58" width="210" height="48" rx="10" fill="#fff" stroke="#93c5fd" stroke-width="1.5" filter="url(#shadow)"/>
    75. 

  75.     <text x="185" y="86" text-anchor="middle" fill="#1e293b" font-size="14" font-weight="500">Web / 移动端前端</text>
    76. 

  76. 

  77.     <!-- 第三方H5 -->
    78. 

  78.     <rect x="340" y="58" width="210" height="48" rx="10" fill="#fff" stroke="#93c5fd" stroke-width="1.5" filter="url(#shadow)"/>
    79. 

  79.     <text x="445" y="86" text-anchor="middle" fill="#1e293b" font-size="14" font-weight="500">第三方 H5 入口</text>
    80. 

  80. 

  81.     <!-- API网关 -->
    82. 

  82.     <rect x="640" y="58" width="240" height="48" rx="10" fill="#3b82f6" stroke="#2563eb" stroke-width="2" filter="url(#shadow)"/>
    83. 

  83.     <text x="760" y="86" text-anchor="middle" fill="#fff" font-size="14" font-weight="600">统一 API 网关</text>
    84. 

  84. 

  85.     <!-- Access arrows -->
    86. 

  86.     <line x1="290" y1="82" x2="636" y2="82" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>
    87. 

  87.     <line x1="550" y1="82" x2="636" y2="82" stroke="#3b82f6" stroke-width="2" marker-end="url(#arrB)"/>
    88. 

  88. 

  89.     <!-- ══════ Layer 2: 核心业务模块 ══════ -->
    90. 

  90.     <rect x="20" y="170" width="1120" height="470" rx="14" fill="#fff" stroke="#e2e8f0" stroke-width="1.5"/>
    91. 

  91.     <text x="40" y="196" fill="#475569" font-size="13" font-weight="700">核心业务模块</text>
    92. 

  92. 

  93.     <!-- Row 1: 3 modules -->
    94. 

  94.     <!-- B1: 用户账户管理 -->
    95. 

  95.     <rect x="56" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#3b82f6" stroke-width="2" filter="url(#shadow)"/>
    96. 

  96.     <text x="221" y="244" text-anchor="middle" fill="#1e40af" font-size="15" font-weight="700">用户账户管理模块</text>
    97. 

  97.     <line x1="76" y1="258" x2="366" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    98. 

  98.     <text x="221" y="280" text-anchor="middle" fill="#64748b" font-size="12">注册 / 登录 / 第三方授权</text>
    99. 

  99.     <text x="221" y="302" text-anchor="middle" fill="#64748b" font-size="12">用户信息 &amp; 角色权限</text>
    100. 

  100. 

  101.     <!-- B2: 邀请系统 -->
    102. 

  102.     <rect x="415" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#14b8a6" stroke-width="2" filter="url(#shadow)"/>
    103. 

  103.     <text x="580" y="244" text-anchor="middle" fill="#0f766e" font-size="15" font-weight="700">邀请系统模块</text>
    104. 

  104.     <line x1="435" y1="258" x2="725" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    105. 

  105.     <text x="580" y="280" text-anchor="middle" fill="#64748b" font-size="12">邀请码 / 邀请链接生成</text>
    106. 

  106.     <text x="580" y="302" text-anchor="middle" fill="#64748b" font-size="12">邀请关系 &amp; 记录管理</text>
    107. 

  107. 

  108.     <!-- B3: 额度&调用限制 -->
    109. 

  109.     <rect x="774" y="216" width="330" height="110" rx="12" fill="#fff" stroke="#22c55e" stroke-width="2" filter="url(#shadow)"/>
    110. 

  110.     <text x="939" y="244" text-anchor="middle" fill="#15803d" font-size="15" font-weight="700">额度 &amp; 调用限制模块</text>
    111. 

  111.     <line x1="794" y1="258" x2="1084" y2="258" stroke="#e2e8f0" stroke-width="1"/>
    112. 

  112.     <text x="939" y="280" text-anchor="middle" fill="#64748b" font-size="12">免费 / 会员额度配置</text>
    113. 

  113.     <text x="939" y="302" text-anchor="middle" fill="#64748b" font-size="12">调用次数限流 &amp; 扣减</text>
    114. 

  114. 

  115.     <!-- Row 2: 3 modules -->
    116. 

  116.     <!-- B4: 邀请奖励 -->
    117. 

  117.     <rect x="56" y="370" width="330" height="110" rx="12" fill="#fff" stroke="#8b5cf6" stroke-width="2" filter="url(#shadow)"/>
    118. 

  118.     <text x="221" y="398" text-anchor="middle" fill="#6d28d9" font-size="15" font-weight="700">邀请奖励模块</text>
    119. 

  119.     <line x1="76" y1="412" x2="366" y2="412" stroke="#e2e8f0" stroke-width="1"/>
    120. 

  120.     <text x="221" y="434" text-anchor="middle" fill="#64748b" font-size="12">爬取次数奖励发放</text>
    121. 

  121.     <text x="221" y="456" text-anchor="middle" fill="#64748b" font-size="12">奖励记录统计</text>
    122. 

  122. 

  123.     <!-- B5: 支付&会员 -->
    124. 

  124.     <rect x="415" y="370" width="330" height="130" rx="12" fill="#fff" stroke="#eab308" stroke-width="2" filter="url(#shadow)"/>
    125. 

  125.     <text x="580" y="398" text-anchor="middle" fill="#a16207" font-size="15" font-weight="700">支付 &amp; 会员模块</text>
    126. 

  126.     <line x1="435" y1="412" x2="725" y2="412" stroke="#e2e8f0" stroke-width="1"/>
    127. 

  127.     <text x="580" y="434" text-anchor="middle" fill="#64748b" font-size="12">多渠道支付</text>
    128. 

  128.     <text x="580" y="456" text-anchor="middle" fill="#64748b" font-size="12">会员套餐 &amp; 权限开通</text>
    129. 

  129.     <text x="580" y="478" text-anchor="middle" fill="#64748b" font-size="12">订单 &amp; 退款管理</text>
    130. 

  130. 

  131.     <!-- B6: 商品爬取服务 (核心) -->
    132. 

  132.     <rect x="774" y="370" width="330" height="110" rx="12" fill="#fff7ed" stroke="#f97316" stroke-width="2.5" filter="url(#shadow)"/>
    133. 

  133.     <rect x="1032" y="376" width="52" height="22" rx="11" fill="#f97316"/>
    134. 

  134.     <text x="1058" y="391" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">核心</text>
    135. 

  135.     <text x="939" y="404" text-anchor="middle" fill="#c2410c" font-size="15" font-weight="700">商品爬取服务</text>
    136. 

  136.     <line x1="794" y1="418" x2="1084" y2="418" stroke="#fed7aa" stroke-width="1"/>
    137. 

  137.     <text x="939" y="444" text-anchor="middle" fill="#9a3412" font-size="12">核心爬取引擎</text>
    138. 

  138.     <text x="939" y="464" text-anchor="middle" fill="#9a3412" font-size="12">数据采集 &amp; 解析</text>
    139. 

  139. 

  140.     <!-- API Gateway → B1 & B3 -->
    141. 

  141.     <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)"/>
    142. 

  142.     <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)"/>
    143. 

  143. 

  144.     <!-- Inter-module: B1→B2 dashed -->
    145. 

  145.     <line x1="386" y1="271" x2="411" y2="271" stroke="#8b5cf6" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    146. 

  146.     <!-- B1→B5 dashed curve -->
    147. 

  147.     <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)"/>
    148. 

  148.     <!-- B2→B4 dashed curve -->
    149. 

  149.     <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)"/>
    150. 

  150.     <!-- B4→B3 dashed curve -->
    151. 

  151.     <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)"/>
    152. 

  152.     <!-- B5→B3 dashed -->
    153. 

  153.     <line x1="745" y1="430" x2="770" y2="290" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    154. 

  154.     <!-- B3→B6 solid -->
    155. 

  155.     <line x1="939" y1="326" x2="939" y2="366" stroke="#f97316" stroke-width="2" marker-end="url(#arrO)"/>
    156. 

  156. 

  157.     <!-- ══════ Layer 3: 基础中间件 ══════ -->
    158. 

  158.     <rect x="20" y="664" width="1120" height="140" rx="14" fill="url(#gInfra)" stroke="#c4b5fd" stroke-width="1.5"/>
    159. 

  159.     <text x="40" y="690" fill="#7c3aed" font-size="13" font-weight="700">基础中间件 &amp; 存储</text>
    160. 

  160. 

  161.     <!-- C1: 数据库 -->
    162. 

  162.     <rect x="52" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    163. 

  163.     <text x="147" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">数据库</text>
    164. 

  164.     <text x="147" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">用户 / 邀请 / 订单 / 日志</text>
    165. 

  165. 

  166.     <!-- C2: Redis -->
    167. 

  167.     <rect x="262" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    168. 

  168.     <text x="357" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">Redis 缓存</text>
    169. 

  169.     <text x="357" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">Token / 额度 / 邀请码</text>
    170. 

  170. 

  171.     <!-- C3: 消息队列 -->
    172. 

  172.     <rect x="472" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    173. 

  173.     <text x="567" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">消息队列</text>
    174. 

  174.     <text x="567" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">异步奖励 / 支付回调 / 爬取</text>
    175. 

  175. 

  176.     <!-- C4: 日志监控 -->
    177. 

  177.     <rect x="682" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    178. 

  178.     <text x="777" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">日志 &amp; 监控 &amp; 告警</text>
    179. 

  179.     <text x="777" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">全链路可观测</text>
    180. 

  180. 

  181.     <!-- C5: 安全组件 -->
    182. 

  182.     <rect x="892" y="706" width="190" height="60" rx="10" fill="#fff" stroke="#8b5cf6" stroke-width="1.5" filter="url(#shadow)"/>
    183. 

  183.     <text x="987" y="728" text-anchor="middle" fill="#1e293b" font-size="13" font-weight="600">安全组件</text>
    184. 

  184.     <text x="987" y="748" text-anchor="middle" fill="#94a3b8" font-size="10">加密 / 鉴权 / 防攻击</text>
    185. 

  185. 

  186.     <!-- Business → Infra arrows -->
    187. 

  187.     <!-- B1→C1,C4,C5 -->
    188. 

  188.     <line x1="150" y1="326" x2="147" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    189. 

  189.     <line x1="200" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    190. 

  190.     <line x1="250" y1="326" x2="987" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    191. 

  191.     <!-- B2→C1,C2,C4 -->
    192. 

  192.     <line x1="520" y1="326" x2="147" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    193. 

  193.     <line x1="560" y1="326" x2="357" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    194. 

  194.     <line x1="600" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    195. 

  195.     <!-- B3→C2,C4 -->
    196. 

  196.     <line x1="900" y1="326" x2="357" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    197. 

  197.     <line x1="940" y1="326" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    198. 

  198.     <!-- B4→C3,C4 -->
    199. 

  199.     <line x1="200" y1="480" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    200. 

  200.     <line x1="240" y1="480" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    201. 

  201.     <!-- B5→C3,C4,C5 -->
    202. 

  202.     <line x1="560" y1="500" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    203. 

  203.     <line x1="590" y1="500" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    204. 

  204.     <line x1="620" y1="500" x2="987" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.4"/>
    205. 

  205.     <!-- B6→C3,C4 -->
    206. 

  206.     <line x1="920" y1="480" x2="567" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    207. 

  207.     <line x1="950" y1="480" x2="777" y2="702" stroke="#cbd5e1" stroke-width="1" opacity="0.5"/>
    208. 

  208. 

  209.     <!-- ══════ Legend ══════ -->
    210. 

  210.     <rect x="20" y="840" width="1120" height="60" rx="12" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
    211. 

  211.     <text x="60" y="876" fill="#64748b" font-size="12" font-weight="600">图例：</text>
    212. 

  212. 

  213.     <line x1="120" y1="870" x2="160" y2="870" stroke="#94a3b8" stroke-width="2" marker-end="url(#arr)"/>
    214. 

  214.     <text x="170" y="875" fill="#64748b" font-size="12">数据流</text>
    215. 

  215. 

  216.     <line x1="240" y1="870" x2="280" y2="870" stroke="#94a3b8" stroke-width="2" stroke-dasharray="6,4" marker-end="url(#arr)"/>
    217. 

  217.     <text x="290" y="875" fill="#64748b" font-size="12">模块间调用</text>
    218. 

  218. 

  219.     <rect x="400" y="860" width="20" height="20" rx="6" fill="#fff7ed" stroke="#f97316" stroke-width="2"/>
    220. 

  220.     <text x="428" y="875" fill="#64748b" font-size="12">核心服务</text>
    221. 

  221. 

  222.     <rect x="520" y="860" width="20" height="20" rx="6" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
    223. 

  223.     <text x="548" y="875" fill="#64748b" font-size="12">接入层</text>
    224. 

  224. 

  225.     <rect x="620" y="860" width="20" height="20" rx="6" fill="#f5f3ff" stroke="#8b5cf6" stroke-width="1.5"/>
    226. 

  226.     <text x="648" y="875" fill="#64748b" font-size="12">中间件</text>
    227. 

  227.   </svg>
    228. 

  228. </div>
    229. 

  229. </body>
    230. 

  230. </html>
    231.