<mxfile host="app.diagrams.net" modified="2026-02-27T16:05:00.000Z" agent="OpenCode" version="24.7.17" type="device">
  <diagram id="fig411" name="图4.11 预约挂号界面设计图">
    <mxGraphModel dx="1800" dy="1200" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="1000" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="10" value="预约挂号界面设计（依据 customer/AppointmentPage.vue）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;strokeWidth=2;fontSize=20;" vertex="1" parent="1"><mxGeometry x="220" y="20" width="1160" height="56" as="geometry"/></mxCell>
        <mxCell id="11" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="80" y="100" width="1440" height="800" as="geometry"/></mxCell>
        <mxCell id="12" value="CustomerLayout 顶部导航： 首页 | 我的宠物 | 预约挂号 | 检查报告 | 我的订单" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=12;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="80" y="100" width="1440" height="56" as="geometry"/></mxCell>
        <mxCell id="13" value="页面标题：预约挂号" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;align=left;spacingLeft=12;" vertex="1" parent="1"><mxGeometry x="110" y="180" width="980" height="48" as="geometry"/></mxCell>
        <mxCell id="14" value="按钮：新增预约" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="1210" y="180" width="280" height="48" as="geometry"/></mxCell>

        <mxCell id="20" value="预约列表（appointments）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="110" y="250" width="940" height="44" as="geometry"/></mxCell>
        <mxCell id="21" value="预约卡片：日期(月/日) + 宠物名(getPetName) + 时间(timeSlot) + 备注(remark) + 状态(getStatusText)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="110" y="294" width="940" height="66" as="geometry"/></mxCell>
        <mxCell id="22" value="状态为 PENDING 时显示操作按钮：取消" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="110" y="360" width="940" height="48" as="geometry"/></mxCell>
        <mxCell id="23" value="空状态：暂无预约记录 + 按钮“立即预约”" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="110" y="408" width="940" height="54" as="geometry"/></mxCell>

        <mxCell id="30" value="新增预约弹窗（t-dialog: 新增预约）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="1080" y="250" width="410" height="44" as="geometry"/></mxCell>
        <mxCell id="31" value="表单项1：选择宠物（t-select, petOptions）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="1080" y="294" width="410" height="54" as="geometry"/></mxCell>
        <mxCell id="32" value="表单项2：预约日期（t-date-picker）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="1080" y="348" width="410" height="54" as="geometry"/></mxCell>
        <mxCell id="33" value="表单项3：时间段（t-select, timeSlotOptions）\n09:00-10:00 ... 17:00-18:00" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="1080" y="402" width="410" height="74" as="geometry"/></mxCell>
        <mxCell id="34" value="表单项4：备注（t-textarea, maxlength=200）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="1080" y="476" width="410" height="54" as="geometry"/></mxCell>
        <mxCell id="35" value="确认提交：submit() -> createAppointment(payload) -> 状态默认 PENDING" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="1080" y="530" width="410" height="62" as="geometry"/></mxCell>

        <mxCell id="40" value="数据加载：loadData() 同时请求 appointments 与 pets；卡片宠物名来自 pets 映射。" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="110" y="490" width="940" height="52" as="geometry"/></mxCell>
        <mxCell id="41" value="路由：/appointments（顾客端） | 组件：frontend/src/pages/customer/AppointmentPage.vue" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="110" y="840" width="1380" height="42" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>

  <diagram id="fig412" name="图4.12 药品库存管理界面设计图">
    <mxGraphModel dx="1800" dy="1200" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="1000" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="110" value="药品库存管理界面设计（依据 DrugPage + StockInPage + StockOutPage）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;strokeWidth=2;fontSize=20;" vertex="1" parent="1"><mxGeometry x="180" y="20" width="1240" height="56" as="geometry"/></mxCell>
        <mxCell id="111" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="80" y="100" width="1440" height="800" as="geometry"/></mxCell>

        <mxCell id="112" value="MainLayout 左侧菜单（管理员）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="100" y="130" width="260" height="46" as="geometry"/></mxCell>
        <mxCell id="113" value="药品管理（/admin/drugs）\n入库流水（/admin/stock-in）\n出库流水（/admin/stock-out）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="100" y="176" width="260" height="138" as="geometry"/></mxCell>

        <mxCell id="120" value="A. 药品管理页面（DrugPage.vue）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="390" y="130" width="1110" height="44" as="geometry"/></mxCell>
        <mxCell id="121" value="标题：药品管理 | 查询区：关键词输入 + 查询按钮 + 新增药品按钮" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="174" width="1110" height="54" as="geometry"/></mxCell>
        <mxCell id="122" value="列表（t-table columns）：ID | 名称 | 规格 | 单位 | 库存 | 操作" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="390" y="228" width="1110" height="46" as="geometry"/></mxCell>
        <mxCell id="123" value="操作列：编辑 | 删除" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="274" width="1110" height="44" as="geometry"/></mxCell>
        <mxCell id="124" value="新增/编辑弹窗字段：名称、规格、单位、库存、状态(启用/禁用)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="318" width="1110" height="52" as="geometry"/></mxCell>

        <mxCell id="130" value="B. 入库流水页面（StockInPage.vue）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="390" y="390" width="540" height="44" as="geometry"/></mxCell>
        <mxCell id="131" value="标题：入库流水 | 按钮：刷新、新增入库" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="434" width="540" height="48" as="geometry"/></mxCell>
        <mxCell id="132" value="表格列：ID | 药品(drugId映射名称) | 数量 | 入库时间" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="482" width="540" height="52" as="geometry"/></mxCell>
        <mxCell id="133" value="新增入库弹窗字段：药品(t-select) | 数量" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="390" y="534" width="540" height="48" as="geometry"/></mxCell>

        <mxCell id="140" value="C. 出库流水页面（StockOutPage.vue）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="960" y="390" width="540" height="44" as="geometry"/></mxCell>
        <mxCell id="141" value="标题：出库流水 | 按钮：刷新、新增出库" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="960" y="434" width="540" height="48" as="geometry"/></mxCell>
        <mxCell id="142" value="表格列：ID | 药品(drugId映射名称) | 数量 | 出库时间" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="960" y="482" width="540" height="52" as="geometry"/></mxCell>
        <mxCell id="143" value="新增出库弹窗字段：药品(t-select) | 数量" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;" vertex="1" parent="1"><mxGeometry x="960" y="534" width="540" height="48" as="geometry"/></mxCell>

        <mxCell id="150" value="路由与组件：/admin/drugs -> DrugPage.vue；/admin/stock-in -> StockInPage.vue；/admin/stock-out -> StockOutPage.vue" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="100" y="840" width="1400" height="42" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>

  <diagram id="fig413" name="图4.13 病历书写界面设计图">
    <mxGraphModel dx="1800" dy="1200" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="1000" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="210" value="病历书写界面设计（依据 MedicalRecordPage.vue）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;strokeWidth=2;fontSize=20;" vertex="1" parent="1"><mxGeometry x="240" y="20" width="1120" height="56" as="geometry"/></mxCell>
        <mxCell id="211" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="80" y="100" width="1440" height="800" as="geometry"/></mxCell>
        <mxCell id="212" value="MainLayout 左侧菜单（医生/管理员）：就诊记录 | 病历管理 | 处方管理" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="100" y="130" width="300" height="70" as="geometry"/></mxCell>

        <mxCell id="220" value="页面标题：病历管理" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="130" width="1070" height="44" as="geometry"/></mxCell>
        <mxCell id="221" value="查询区（inline-form）：就诊ID 输入框 + 查询按钮 + 新增病历按钮" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="174" width="1070" height="52" as="geometry"/></mxCell>

        <mxCell id="222" value="病历列表（t-table）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="246" width="1070" height="42" as="geometry"/></mxCell>
        <mxCell id="223" value="列定义：ID | 就诊(visitId 插槽显示 getVisitLabel) | 主诉 | 诊断 | 状态(getStatusText) | 操作" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="288" width="1070" height="58" as="geometry"/></mxCell>
        <mxCell id="224" value="操作：编辑 | 删除" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="346" width="1070" height="42" as="geometry"/></mxCell>

        <mxCell id="230" value="新增/编辑病历弹窗（t-dialog）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="430" y="410" width="1070" height="42" as="geometry"/></mxCell>
        <mxCell id="231" value="字段1：就诊ID（t-select, visitOptions；选项标签=宠物名/医生名）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="452" width="1070" height="54" as="geometry"/></mxCell>
        <mxCell id="232" value="字段2：主诉（chiefComplaint）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="506" width="1070" height="46" as="geometry"/></mxCell>
        <mxCell id="233" value="字段3：诊断（diagnosis）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="552" width="1070" height="46" as="geometry"/></mxCell>
        <mxCell id="234" value="字段4：状态（status：DRAFT=草稿，COMPLETED=已完成）" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="598" width="1070" height="50" as="geometry"/></mxCell>
        <mxCell id="235" value="确认提交：submit() -> createMedicalRecord / updateMedicalRecord；保存成功后刷新列表" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="430" y="648" width="1070" height="56" as="geometry"/></mxCell>

        <mxCell id="240" value="辅助数据加载：onMounted 时加载 visits、pets、doctors，用于就诊下拉标签显示。" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=10;" vertex="1" parent="1"><mxGeometry x="430" y="724" width="1070" height="46" as="geometry"/></mxCell>
        <mxCell id="241" value="路由：/admin/records | 组件：frontend/src/pages/MedicalRecordPage.vue" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#000000;align=left;spacingLeft=8;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="100" y="840" width="1400" height="42" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
