问题修复

1ssqq1lxr · 1ssqq1lxr · commit cd0e2a3b77c0 · 2026-04-27T14:52:33.000+08:00
diff --git a/public/solution-animations/energy-station.svg b/public/solution-animations/energy-station.svg
@@ -0,0 +1,84 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" role="img" aria-labelledby="title desc">
+  <title id="title">Renewable energy station animation</title>
+  <desc id="desc">Animated renewable energy devices sending telemetry through a secure FluxMQ cluster.</desc>
+  <defs>
+    <linearGradient id="sun" x1="0" x2="1">
+      <stop offset="0" stop-color="#f4b63a"/>
+      <stop offset="1" stop-color="#1eccbb"/>
+    </linearGradient>
+    <linearGradient id="panel" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#0f2724"/>
+      <stop offset="1" stop-color="#191c12"/>
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <style>
+      .bg{fill:#07100f}
+      .card{fill:url(#panel);stroke:#244641;stroke-width:1.4}
+      .wire{fill:none;stroke:#1eccbb;stroke-width:3;stroke-dasharray:8 13;animation:flow 3.4s linear infinite}
+      .wire2{animation-delay:.7s}
+      .label{font:600 18px Arial,sans-serif;fill:#f8fafc}
+      .small{font:500 13px Arial,sans-serif;fill:#bdb7a8}
+      .node{fill:#1eccbb;filter:url(#glow);animation:pulse 2.5s ease-in-out infinite}
+      .node2{animation-delay:.8s}
+      .blade{fill:#d9fff8;opacity:.8;animation:spin 5s linear infinite;transform-origin:210px 158px}
+      .bar{fill:url(#sun);animation:rise 3s ease-in-out infinite alternate}
+      @keyframes flow{to{stroke-dashoffset:-84}}
+      @keyframes pulse{0%,100%{opacity:.3;r:5}50%{opacity:1;r:9}}
+      @keyframes spin{to{transform:rotate(360deg)}}
+      @keyframes rise{from{height:20px;transform:translateY(42px)}to{height:62px;transform:translateY(0)}}
+    </style>
+  </defs>
+  <rect class="bg" width="760" height="420"/>
+  <circle cx="615" cy="72" r="42" fill="url(#sun)" opacity=".18"/>
+  <circle cx="615" cy="72" r="22" fill="url(#sun)" opacity=".8" filter="url(#glow)"/>
+
+  <g>
+    <polygon points="68,286 248,242 278,290 98,334" fill="#102623" stroke="#37625d" stroke-width="2"/>
+    <path d="M104 278l30 44M145 268l30 44M187 258l30 44M229 248l30 44M83 302l181-44M92 320l181-44" stroke="#1eccbb" opacity=".45"/>
+    <polygon points="98,342 278,298 302,334 122,378" fill="#102623" stroke="#37625d" stroke-width="2"/>
+    <path d="M134 335l25 38M176 325l25 38M218 315l25 38M260 305l25 38M111 354l181-44" stroke="#f4b63a" opacity=".45"/>
+  </g>
+
+  <g>
+    <line x1="210" y1="158" x2="210" y2="296" stroke="#bdb7a8" stroke-width="5"/>
+    <path class="blade" d="M210 158l-13-90c20 15 31 39 27 67z"/>
+    <path class="blade" d="M210 158l86 33c-22 13-48 13-72-3z"/>
+    <path class="blade" d="M210 158l-72 57c2-26 16-48 41-61z"/>
+    <circle cx="210" cy="158" r="13" fill="#1eccbb"/>
+  </g>
+
+  <g>
+    <rect class="card" x="363" y="84" width="153" height="116" rx="8"/>
+    <text class="label" x="397" y="130">FluxMQ</text>
+    <text class="small" x="391" y="152">7-node cluster</text>
+    <rect x="396" y="165" width="22" height="20" rx="4" fill="#1eccbb"/>
+    <rect x="429" y="165" width="22" height="20" rx="4" fill="#1eccbb" opacity=".7"/>
+    <rect x="462" y="165" width="22" height="20" rx="4" fill="#f4b63a" opacity=".8"/>
+  </g>
+  <g>
+    <rect class="card" x="571" y="68" width="123" height="75" rx="8"/>
+    <text class="label" x="605" y="108">Kafka</text>
+    <rect class="card" x="571" y="174" width="123" height="75" rx="8"/>
+    <text class="label" x="603" y="214">RDS</text>
+    <rect class="card" x="571" y="280" width="123" height="75" rx="8"/>
+    <text class="label" x="600" y="320">FCP</text>
+  </g>
+  <path class="wire" d="M280 285 C324 260 340 190 363 158"/>
+  <path class="wire wire2" d="M224 156 C282 120 314 113 363 122"/>
+  <path class="wire" d="M516 125 C543 112 552 107 571 106"/>
+  <path class="wire wire2" d="M516 145 C548 166 552 211 571 213"/>
+  <path class="wire" d="M516 165 C548 224 552 318 571 318"/>
+  <circle class="node" cx="318" cy="231" r="7"/>
+  <circle class="node node2" cx="544" cy="112" r="7"/>
+  <circle class="node" cx="544" cy="214" r="7"/>
+  <g>
+    <rect class="bar" x="392" y="319" width="17" height="62" rx="4"/>
+    <rect class="bar" x="421" y="319" width="17" height="62" rx="4" style="animation-delay:.4s"/>
+    <rect class="bar" x="450" y="319" width="17" height="62" rx="4" style="animation-delay:.8s"/>
+    <rect class="bar" x="479" y="319" width="17" height="62" rx="4" style="animation-delay:1.2s"/>
+    <text class="small" x="380" y="397">remote monitoring</text>
+  </g>
+</svg>
diff --git a/public/solution-animations/factory-edge.svg b/public/solution-animations/factory-edge.svg
@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" role="img" aria-labelledby="title desc">
+  <title id="title">Factory edge data animation</title>
+  <desc id="desc">Animated PLC and CNC data moving through Halia rules, FluxMQ messaging, and business systems.</desc>
+  <defs>
+    <linearGradient id="panel" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#102623"/>
+      <stop offset="1" stop-color="#1f1b12"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" x2="1">
+      <stop offset="0" stop-color="#1eccbb"/>
+      <stop offset="1" stop-color="#f4b63a"/>
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <style>
+      .bg{fill:#07100f}
+      .card{fill:url(#panel);stroke:#244641;stroke-width:1.4}
+      .line{fill:none;stroke:#1eccbb;stroke-width:3;stroke-dasharray:9 13;animation:flow 3.5s linear infinite}
+      .line2{animation-delay:.75s}
+      .label{font:600 18px Arial,sans-serif;fill:#f8fafc}
+      .small{font:500 13px Arial,sans-serif;fill:#bdb7a8}
+      .machine{fill:#152522;stroke:#37625d;stroke-width:2}
+      .lamp{fill:#1eccbb;filter:url(#glow);animation:pulse 1.8s ease-in-out infinite}
+      .arm{stroke:#d9fff8;stroke-width:10;stroke-linecap:round;animation:arm 4s ease-in-out infinite;transform-origin:153px 158px}
+      .gear{fill:none;stroke:url(#accent);stroke-width:4;stroke-dasharray:16 8;animation:spin 9s linear infinite;transform-origin:center}
+      @keyframes flow{to{stroke-dashoffset:-88}}
+      @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
+      @keyframes arm{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
+      @keyframes spin{to{transform:rotate(360deg)}}
+    </style>
+  </defs>
+  <rect class="bg" width="760" height="420"/>
+  <path d="M0 340 L760 260 L760 420 L0 420Z" fill="#10201e" opacity=".75"/>
+
+  <g>
+    <rect class="machine" x="64" y="203" width="150" height="112" rx="10"/>
+    <rect x="84" y="225" width="58" height="44" rx="6" fill="#0a1211" stroke="#1eccbb" opacity=".7"/>
+    <circle class="lamp" cx="187" cy="226" r="9"/>
+    <rect x="94" y="289" width="91" height="13" rx="6" fill="#f4b63a" opacity=".8"/>
+    <path class="arm" d="M153 158 L204 204"/>
+    <circle cx="153" cy="158" r="22" fill="#152522" stroke="#1eccbb" stroke-width="3"/>
+    <circle cx="213" cy="213" r="12" fill="#f4b63a"/>
+  </g>
+
+  <g>
+    <rect x="72" y="72" width="76" height="34" rx="17" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="97" y="94">PLC</text>
+    <rect x="160" y="72" width="82" height="34" rx="17" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="188" y="94">CNC</text>
+    <rect x="254" y="72" width="92" height="34" rx="17" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="279" y="94">SCADA</text>
+  </g>
+
+  <g>
+    <rect class="card" x="315" y="126" width="140" height="104" rx="8"/>
+    <text class="label" x="359" y="168">Halia</text>
+    <text class="small" x="337" y="191">edge rules</text>
+    <circle class="gear" cx="385" cy="274" r="38"/>
+    <text class="small" x="345" y="333">normalize / filter</text>
+  </g>
+
+  <g>
+    <rect class="card" x="533" y="82" width="135" height="86" rx="8"/>
+    <text class="label" x="566" y="123">FluxMQ</text>
+    <text class="small" x="568" y="145">message bus</text>
+    <rect class="card" x="533" y="212" width="135" height="86" rx="8"/>
+    <text class="label" x="563" y="253">FCP</text>
+    <text class="small" x="565" y="275">operations</text>
+  </g>
+
+  <path class="line" d="M214 244 C266 219 285 178 315 171"/>
+  <path class="line line2" d="M455 169 C490 141 506 126 533 126"/>
+  <path class="line" d="M455 203 C494 230 508 251 533 255"/>
+  <circle class="lamp" cx="276" cy="210" r="7"/>
+  <circle class="lamp" cx="493" cy="140" r="7" style="animation-delay:.7s"/>
+  <circle class="lamp" cx="492" cy="238" r="7" style="animation-delay:1.2s"/>
+
+  <g>
+    <rect x="590" y="333" width="35" height="34" rx="5" fill="#1eccbb" opacity=".35"/>
+    <rect x="631" y="316" width="35" height="51" rx="5" fill="#f4b63a" opacity=".35"/>
+    <rect x="672" y="292" width="35" height="75" rx="5" fill="#1eccbb" opacity=".25"/>
+  </g>
+</svg>
diff --git a/public/solution-animations/robot-fleet.svg b/public/solution-animations/robot-fleet.svg
@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" role="img" aria-labelledby="title desc">
+  <title id="title">Robot fleet edge animation</title>
+  <desc id="desc">Animated robot fleet data flowing from sensors and cameras through edge software to cloud systems.</desc>
+  <defs>
+    <linearGradient id="panel" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#102623"/>
+      <stop offset="1" stop-color="#1c1b12"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" x2="1">
+      <stop offset="0" stop-color="#1eccbb"/>
+      <stop offset="1" stop-color="#f4b63a"/>
+    </linearGradient>
+    <filter id="glow" x="-45%" y="-45%" width="190%" height="190%">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <style>
+      .bg{fill:#07100f}
+      .card{fill:url(#panel);stroke:#244641;stroke-width:1.4}
+      .line{fill:none;stroke:#1eccbb;stroke-width:3;stroke-dasharray:9 13;animation:flow 3.1s linear infinite}
+      .line2{animation-delay:.9s}
+      .label{font:600 18px Arial,sans-serif;fill:#f8fafc}
+      .small{font:500 13px Arial,sans-serif;fill:#bdb7a8}
+      .bot{animation:move 5s ease-in-out infinite}
+      .eye{fill:#1eccbb;animation:blink 3.2s ease-in-out infinite}
+      .scan{fill:none;stroke:url(#accent);stroke-width:3;opacity:.8;animation:scan 2.6s ease-in-out infinite}
+      .dot{fill:#1eccbb;filter:url(#glow);animation:pulse 2s ease-in-out infinite}
+      @keyframes flow{to{stroke-dashoffset:-88}}
+      @keyframes move{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
+      @keyframes blink{0%,88%,100%{opacity:1}92%{opacity:.2}}
+      @keyframes scan{0%{transform:scale(.75);opacity:.15;transform-origin:160px 236px}60%{transform:scale(1.25);opacity:.75;transform-origin:160px 236px}100%{transform:scale(1.5);opacity:0;transform-origin:160px 236px}}
+      @keyframes pulse{0%,100%{opacity:.35;transform:scale(.9);transform-origin:center}50%{opacity:1;transform:scale(1.15);transform-origin:center}}
+    </style>
+  </defs>
+  <rect class="bg" width="760" height="420"/>
+  <path d="M40 344 C160 270 249 381 352 316 C468 244 574 297 720 218" fill="none" stroke="#244641" stroke-width="2"/>
+
+  <g class="bot">
+    <rect x="98" y="176" width="124" height="88" rx="26" fill="#152522" stroke="#37625d" stroke-width="2"/>
+    <rect x="130" y="145" width="60" height="42" rx="12" fill="#102623" stroke="#1eccbb" stroke-width="2"/>
+    <circle class="eye" cx="146" cy="166" r="6"/>
+    <circle class="eye" cx="174" cy="166" r="6"/>
+    <path d="M120 264l-26 45M200 264l26 45" stroke="#bdb7a8" stroke-width="7" stroke-linecap="round"/>
+    <circle cx="94" cy="314" r="13" fill="#0a1211" stroke="#1eccbb" stroke-width="3"/>
+    <circle cx="226" cy="314" r="13" fill="#0a1211" stroke="#1eccbb" stroke-width="3"/>
+    <circle class="scan" cx="160" cy="236" r="44"/>
+  </g>
+
+  <g>
+    <rect class="card" x="326" y="72" width="133" height="82" rx="8"/>
+    <text class="label" x="367" y="111">Halia</text>
+    <text class="small" x="346" y="133">sensor hub</text>
+    <rect class="card" x="326" y="190" width="133" height="82" rx="8"/>
+    <text class="label" x="354" y="229">NodeMQ</text>
+    <text class="small" x="349" y="251">edge bus</text>
+  </g>
+  <g>
+    <rect class="card" x="554" y="95" width="132" height="96" rx="8"/>
+    <text class="label" x="586" y="136">FluxMQ</text>
+    <text class="small" x="582" y="158">cloud broker</text>
+    <rect class="card" x="554" y="230" width="132" height="96" rx="8"/>
+    <text class="label" x="588" y="271">Kafka</text>
+    <text class="small" x="584" y="293">analytics</text>
+  </g>
+
+  <path class="line" d="M223 199 C264 151 293 119 326 113"/>
+  <path class="line line2" d="M223 238 C268 236 293 232 326 231"/>
+  <path class="line" d="M459 113 C499 113 522 126 554 136"/>
+  <path class="line line2" d="M459 232 C503 247 523 272 554 278"/>
+  <circle class="dot" cx="282" cy="150" r="7"/>
+  <circle class="dot" cx="502" cy="121" r="7" style="animation-delay:.7s"/>
+  <circle class="dot" cx="506" cy="256" r="7" style="animation-delay:1.2s"/>
+
+  <g>
+    <rect x="86" y="58" width="74" height="30" rx="15" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="103" y="78">Sensor</text>
+    <rect x="172" y="58" width="77" height="30" rx="15" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="190" y="78">Camera</text>
+    <rect x="261" y="58" width="67" height="30" rx="15" fill="#0f1c1a" stroke="#37625d"/>
+    <text class="small" x="282" y="78">Voice</text>
+  </g>
+</svg>
diff --git a/public/solution-animations/vehicle-data.svg b/public/solution-animations/vehicle-data.svg
@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" role="img" aria-labelledby="title desc">
+  <title id="title">Vehicle data access animation</title>
+  <desc id="desc">Animated vehicle telemetry flowing from car terminals through FluxMQ to data platforms.</desc>
+  <defs>
+    <linearGradient id="panel" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#102623"/>
+      <stop offset="1" stop-color="#172016"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" x2="1">
+      <stop offset="0" stop-color="#1eccbb"/>
+      <stop offset="1" stop-color="#f4b63a"/>
+    </linearGradient>
+    <filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <style>
+      .bg{fill:#07100f}
+      .card{fill:url(#panel);stroke:#244641;stroke-width:1.4}
+      .line{fill:none;stroke:#1eccbb;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 14;animation:dash 3.8s linear infinite}
+      .pulse{fill:#1eccbb;filter:url(#glow);animation:pulse 2.4s ease-in-out infinite}
+      .pulse2{animation-delay:.8s}
+      .pulse3{animation-delay:1.4s}
+      .label{font:600 18px Arial,sans-serif;fill:#f8fafc}
+      .small{font:500 13px Arial,sans-serif;fill:#bdb7a8}
+      .chip{fill:#0f1c1a;stroke:#37625d;stroke-width:1}
+      .wheel{fill:#07100f;stroke:#1eccbb;stroke-width:3}
+      @keyframes dash{to{stroke-dashoffset:-96}}
+      @keyframes pulse{0%,100%{opacity:.35;transform:scale(.92);transform-origin:center}50%{opacity:1;transform:scale(1.08);transform-origin:center}}
+      @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
+      .float{animation:float 4s ease-in-out infinite}
+    </style>
+  </defs>
+  <rect class="bg" width="760" height="420"/>
+  <path d="M0 310 C130 250 235 380 380 292 C520 210 610 260 760 185 L760 420 L0 420Z" fill="#10201e" opacity=".65"/>
+
+  <g class="float">
+    <path d="M88 247h138l22 42h44c16 0 29 13 29 29v7H51v-18c0-20 17-37 37-37h21z" fill="#16312e" stroke="#2b5b54" stroke-width="2"/>
+    <path d="M124 224h91l35 47H93z" fill="#0d1c1a" stroke="#1eccbb" stroke-width="2"/>
+    <circle class="wheel" cx="113" cy="326" r="22"/>
+    <circle class="wheel" cx="260" cy="326" r="22"/>
+    <rect x="134" y="239" width="42" height="19" rx="4" fill="#1eccbb" opacity=".35"/>
+    <rect x="186" y="239" width="35" height="19" rx="4" fill="#f4b63a" opacity=".35"/>
+  </g>
+
+  <g>
+    <rect class="card" x="365" y="72" width="154" height="114" rx="8"/>
+    <circle cx="442" cy="116" r="32" fill="url(#accent)" opacity=".92"/>
+    <path d="M422 116h40M442 96v40" stroke="#07100f" stroke-width="5" stroke-linecap="round"/>
+    <text class="label" x="395" y="165">FluxMQ</text>
+    <text class="small" x="392" y="181">vehicle gateway</text>
+  </g>
+
+  <g>
+    <rect class="card" x="587" y="54" width="119" height="82" rx="8"/>
+    <text class="label" x="613" y="94">TSP</text>
+    <text class="small" x="609" y="115">services</text>
+    <rect class="card" x="587" y="166" width="119" height="82" rx="8"/>
+    <text class="label" x="610" y="206">Kafka</text>
+    <text class="small" x="608" y="227">big data</text>
+    <rect class="card" x="587" y="278" width="119" height="82" rx="8"/>
+    <text class="label" x="612" y="318">API</text>
+    <text class="small" x="609" y="339">control</text>
+  </g>
+
+  <path class="line" d="M318 285 C350 252 365 214 405 183"/>
+  <path class="line" d="M519 119 C552 103 561 96 587 95"/>
+  <path class="line" d="M519 133 C552 154 561 198 587 207"/>
+  <path class="line" d="M519 148 C552 205 561 308 587 319"/>
+  <circle class="pulse" cx="352" cy="248" r="8"/>
+  <circle class="pulse pulse2" cx="552" cy="107" r="7"/>
+  <circle class="pulse pulse3" cx="552" cy="209" r="7"/>
+
+  <g>
+    <rect class="chip" x="78" y="54" width="94" height="34" rx="17"/>
+    <text class="small" x="96" y="76">GB/T32960</text>
+    <rect class="chip" x="78" y="98" width="79" height="34" rx="17"/>
+    <text class="small" x="101" y="120">JT/T808</text>
+    <rect class="chip" x="78" y="142" width="71" height="34" rx="17"/>
+    <text class="small" x="101" y="164">MQTT</text>
+  </g>
+</svg>
