锘军svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 540 450" font-family="'HYQiHei','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif" style="max-width: 540px;">
  <defs>
    <linearGradient id="appGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#172554"/>
      <stop offset="100%" stop-color="#1E3A8A"/>
    </linearGradient>
    <marker id="arrowhead-blue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#3B82F6"/>
    </marker>
    <style>
      .arrow-path { stroke: #a3b8d3; stroke-width: 2.5; stroke-dasharray: 6 3; marker-end: url(#arrowhead-blue); }
      .arrow-text { font-size: 13px; font-weight: 600; fill: #2563EB; }
      .base-block { fill: #3B82F6; rx: 8; ry: 8; }
      .base-title { font-size: 16px; font-weight: bold; fill: #FFFFFF; letter-spacing: 1px; }
      .inner-block { fill: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); rx: 6; ry: 6; }
      .inner-title { font-size: 15px; font-weight: bold; fill: #FFFFFF; }
      .inner-desc { font-size: 11px; fill: #E0E0E0; }
      .pill { rx: 14; ry: 14; fill: #FFFFFF; }
      .pill-text { font-size: 11px; font-weight: 600; }
      .text-red { fill: #E11D48; }
      .text-green { fill: #047857; }
      .text-blue { fill: #1E3A8A; }
      .text-dark { fill: #334155; }
      .output-block { fill: url(#appGradient); rx: 8; ry: 8; }
      .output-title { font-size: 16px; font-weight: bold; fill: #FFFFFF; letter-spacing: 1px; }
      .output-desc { font-size: 11px; background-color: rgba(255,255,255,0.15); padding: 3px 12px; border-radius: 20px; font-weight: 500; color: #E0E0E0; }
    </style>
  </defs>
  
  <g transform="translate(180, 20)">
    <rect width="180" height="70" fill="#f8fafc" style="stroke:#cbd5e1; stroke-width:1.5px; rx: 6; ry: 6;"/>
    <text x="90" y="36" text-anchor="middle" font-size="16px" font-weight="600" fill="#1E3A8A">鐢ㄦ埛鎰忓浘</text>
    <text x="90" y="59" text-anchor="middle" font-size="13px" fill="#475569">(鑷劧璇█)</text>
  </g>
  
  <path d="M 270 90 V 110" class="arrow-path"/>
  <text x="305" y="108" text-anchor="middle" dx="8" class="arrow-text">鎰忓浘鐞嗚В</text>
  
  <g transform="translate(20, 115)">
    <rect width="500" height="220" class="base-block"/>
    <text x="250" y="30" text-anchor="middle" class="base-title">鍏冨惎路鐏电爜 AI铻嶅悎寮€鍙戝钩鍙?/text>
    
    <g transform="translate(40, 55)">
      <rect width="420" height="85" class="inner-block"/>
      <text x="210" y="20" text-anchor="middle" class="inner-title">Spec (缁撴瀯鍖栬鑼?</text>
      
      <g transform="translate(15, 40)">
        <rect width="90" height="24" class="pill"/><text x="45" y="16" text-anchor="middle" class="pill-text text-green">鏁版嵁妯″瀷</text>
      </g>
      <g transform="translate(115, 40)">
        <rect width="90" height="24" class="pill"/><text x="45" y="16" text-anchor="middle" class="pill-text text-green">椤甸潰缁勪欢</text>
      </g>
      <g transform="translate(215, 40)">
        <rect width="90" height="24" class="pill"/><text x="45" y="16" text-anchor="middle" class="pill-text text-red">鏉冮檺瀹夊叏</text>
      </g>
      <g transform="translate(315, 40)">
        <rect width="90" height="24" class="pill"/><text x="45" y="16" text-anchor="middle" class="pill-text text-dark">鏋舵瀯瑙勮寖</text>
      </g>
    </g>
    
    <g transform="translate(40, 150)">
      <rect width="130" height="55" class="inner-block"/>
      <text x="65" y="23" text-anchor="middle" class="inner-title">浣庝唬鐮?/text>
      <text x="65" y="42" text-anchor="middle" class="inner-desc">瀹堝簳绾柯风ǔ鍩哄骇</text>
    </g>
    <g transform="translate(185, 150)">
      <rect width="130" height="55" class="inner-block"/>
      <text x="65" y="23" text-anchor="middle" class="inner-title">楂樹唬鐮?/text>
      <text x="65" y="42" text-anchor="middle" class="inner-desc">鎷撲笂闄惵峰簲澶嶆潅</text>
    </g>
    <g transform="translate(330, 150)">
      <rect width="130" height="55" class="inner-block"/>
      <text x="65" y="23" text-anchor="middle" class="inner-title">宸ョ▼鍖朁/text>
      <text x="65" y="42" text-anchor="middle" class="inner-desc">瀹氳鑼兟蜂繚浜や粯</text>
    </g>
  </g>
  
  <path d="M 270 335 V 355" class="arrow-path"/>
  <text x="305" y="353" text-anchor="middle" dx="8" class="arrow-text">纭畾鎬х敓鎴忺/text>
  
  <g transform="translate(20, 360)">
    <rect width="500" height="70" class="output-block"/>
    <text x="65" y="40" text-anchor="middle" class="output-title">浼佷笟绾ц蒋浠迭/text>
    
    <g transform="translate(130, 23)">
      <rect width="115" height="24" class="pill"/><text x="57.5" y="16" text-anchor="middle" class="pill-text text-blue">鏁版嵁妯″瀷浠ｇ爜</text>
    </g>
    <g transform="translate(255, 23)">
      <rect width="115" height="24" class="pill"/><text x="57.5" y="16" text-anchor="middle" class="pill-text text-blue">椤甸潰涓庝笟鍔￠€昏緫</text>
    </g>
    <g transform="translate(380, 23)">
      <rect width="100" height="24" class="pill"/><text x="50" y="16" text-anchor="middle" class="pill-text text-blue">閮ㄧ讲涓庢潈闄忺/text>
    </g>
  </g>
</svg>