<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="drawio" version="26.0.0">
  <diagram name="架构图">
    <mxGraphModel dx="1400" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1800" pageHeight="1000" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- 标题 -->
        <mxCell id="title" value="12306旅客管理系统 - 前后端分离架构" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;fontSize=20;fontStyle=1" vertex="1" parent="1">
          <mxGeometry x="700" y="20" width="400" height="40" as="geometry" />
        </mxCell>

        <!-- ============ 客户端层 ============ -->
        <mxCell id="client" value="客户端层" style="swimlane;startSize=30;fillColor=#e3f2fd;strokeColor=#1976d2;fontStyle=1;fontSize=14;align=center;" vertex="1" parent="1">
          <mxGeometry x="50" y="80" width="200" height="100" as="geometry" />
        </mxCell>
        <mxCell id="web" value="Web浏览器" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;" vertex="1" parent="client">
          <mxGeometry x="20" y="40" width="70" height="40" as="geometry" />
        </mxCell>
        <mxCell id="app" value="移动App" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#bbdefb;strokeColor=#1976d2;" vertex="1" parent="client">
          <mxGeometry x="110" y="40" width="70" height="40" as="geometry" />
        </mxCell>

        <!-- ============ 前端层 ============ -->
        <mxCell id="frontend" value="前端层 (Frontend)" style="swimlane;startSize=30;fillColor=#e8f5e9;strokeColor=#388e3c;fontStyle=1;fontSize=14;align=center;" vertex="1" parent="1">
          <mxGeometry x="50" y="220" width="400" height="140" as="geometry" />
        </mxCell>
        <mxCell id="ng" value="Nginx&#xa;反向代理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#c8e6c9;strokeColor=#388e3c;" vertex="1" parent="frontend">
          <mxGeometry x="20" y="50" width="80" height="60" as="geometry" />
        </mxCell>
        <mxCell id="vue" value="Vue3应用" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#c8e6c9;strokeColor=#388e3c;" vertex="1" parent="frontend">
          <mxGeometry x="120" y="50" width="80" height="60" as="geometry" />
        </mxCell>
        <mxCell id="pin" value="Pinia&#xa;状态管理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#c8e6c9;strokeColor=#388e3c;" vertex="1" parent="frontend">
          <mxGeometry x="220" y="50" width="80" height="60" as="geometry" />
        </mxCell>
        <mxCell id="ax" value="Axios&#xa;HTTP客户端" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#c8e6c9;strokeColor=#388e3c;" vertex="1" parent="frontend">
          <mxGeometry x="320" y="50" width="80" height="60" as="geometry" />
        </mxCell>

        <!-- ============ 网关层 ============ -->
        <mxCell id="gateway" value="网关层" style="swimlane;startSize=30;fillColor=#fff3e0;strokeColor=#f57c00;fontStyle=1;fontSize=14;align=center;" vertex="1" parent="1">
          <mxGeometry x="500" y="220" width="180" height="140" as="geometry" />
        </mxCell>
        <mxCell id="gw" value="Spring Cloud&#xa;Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;" vertex="1" parent="gateway">
          <mxGeometry x="30" y="50" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- ============ 后端服务层 ============ -->
        <mxCell id="backend" value="后端服务层 (Backend)" style="swimlane;startSize=30;fillColor=#f3e5f5;strokeColor=#7b1fa2;fontStyle=1;fontSize=14;align=center;" vertex="1" parent="1">
          <mxGeometry x="730" y="80" width="500" height="280" as="geometry" />
        </mxCell>
        <mxCell id="auth" value="认证服务&#xa;:8080" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="20" y="50" width="70" height="60" as="geometry" />
        </mxCell>
        <mxCell id="user" value="用户服务&#xa;:8081" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="100" y="50" width="70" height="60" as="geometry" />
        </mxCell>
        <mxCell id="pass" value="旅客服务&#xa;:8082" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="180" y="50" width="70" height="60" as="geometry" />
        </mxCell>
        <mxCell id="train" value="车次服务&#xa;:8083" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="260" y="50" width="70" height="60" as="geometry" />
        </mxCell>
        <mxCell id="order" value="订单服务&#xa;:8084" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="340" y="50" width="70" height="60" as="geometry" />
        </mxCell>
        <mxCell id="pay" value="支付服务&#xa;:8085" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1bee7;strokeColor=#7b1fa2;" vertex="1" parent="backend">
          <mxGeometry x="420" y="50" width="70" height="60" as="geometry" />
        </mxCell>

        <!-- 服务层内部 -->
        <mxCell id="auth_svc" value="AuthService" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ce93d8;strokeColor=#7b1fa2;fontSize=10;" vertex="1" parent="backend">
          <mxGeometry x="20" y="130" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="user_svc" value="UserService" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ce93d8;strokeColor=#7b1fa2;fontSize=10;" vertex="1" parent="backend">
          <mxGeometry x="100" y="130" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="pass_svc" value="PassengerService" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ce93d8;strokeColor=#7b1fa2;fontSize=10;" vertex="1" parent="backend">
          <mxGeometry x="180" y="130" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="order_svc" value="OrderService" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ce93d8;strokeColor=#7b1fa2;fontSize=10;" vertex="1" parent="backend">
          <mxGeometry x="340" y="130" width="60" height="30" as="geometry" />
        </mxCell>

        <!-- ============ 数据层 ============ -->
        <mxCell id="data" value="数据层 (Data Layer)" style="swimlane;startSize=30;fillColor=#ffebee;strokeColor=#d32f2f;fontStyle=1;fontSize=14;align=center;" vertex="1" parent="1">
          <mxGeometry x="1280" y="80" width="200" height="280" as="geometry" />
        </mxCell>
        <mxCell id="mysql" value="MySQL 8.0&#xa;主数据库" style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#ffcdd2;strokeColor=#d32f2f;" vertex="1" parent="data">
          <mxGeometry x="40" y="60" width="120" height="80" as="geometry" />
        </mxCell>
        <mxCell id="redis" value="Redis 缓存" style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#ffcdd2;strokeColor=#d32f2f;" vertex="1" parent="data">
          <mxGeometry x="40" y="170" width="120" height="80" as="geometry" />
        </mxCell>

        <!-- ============ 外部服务 ============ -->
        <mxCell id="external" value="外部服务" style="swimlane;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;fontSize=14;align=center;dashed=1;" vertex="1" parent="1">
          <mxGeometry x="1530" y="80" width="180" height="280" as="geometry" />
        </mxCell>
        <mxCell id="pay_platform" value="支付宝/微信支付" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eeeeee;strokeColor=#666666;dashed=1;" vertex="1" parent="external">
          <mxGeometry x="30" y="60" width="120" height="50" as="geometry" />
        </mxCell>
        <mxCell id="gov_api" value="实名认证API" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eeeeee;strokeColor=#666666;dashed=1;" vertex="1" parent="external">
          <mxGeometry x="30" y="130" width="120" height="50" as="geometry" />
        </mxCell>

        <!-- ============ 连接线 ============ -->
        <mxCell id="c1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="web" target="ng">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c2" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="app" target="ng">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c3" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="ng" target="vue">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c4" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="vue" target="ax">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c5" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="ax" target="gw">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c6" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="gw" target="auth">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c7" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="gw" target="pass">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c8" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="gw" target="order">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c9" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="auth" target="redis">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c10" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="pass" target="mysql">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c11" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="order" target="mysql">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c12" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;" edge="1" parent="1" source="order" target="redis">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c13" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;dashed=1;" edge="1" parent="1" source="order" target="pay_platform">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="c14" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#666666;dashed=1;" edge="1" parent="1" source="user" target="gov_api">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
