user5
/
forge_admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酒店客房送餐系统 · 需求说明书</title>
<style>
  :root {
    --pri: #1E3A5F;
    --pri-lt: #2C5282;
    --acc: #2563EB;
    --bg: #F8FAFC;
    --bg-card: #FFFFFF;
    --txt: #1E293B;
    --txt-sub: #64748B;
    --bdr: #E2E8F0;
    --succ: #16A34A;
    --warn: #D97706;
    --dang: #DC2626;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--txt); line-height: 1.8; }
  
  /* 封面 */
  .cover {
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 50%, #1A365D 100%);
    color: #fff;
    padding: 80px 60px;
    text-align: center;
    page-break-after: always;
  }
  .cover .tag {
    display: inline-block;
    border: 1px solid rgba(255,255,255,.4);
    color: rgba(255,255,255,.8);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }
  .cover h1 { font-size: 36px; font-weight: 700; margin-bottom: 12px; letter-spacing: 4px; }
  .cover h2 { font-size: 18px; font-weight: 400; opacity: .8; margin-bottom: 40px; }
  .cover .meta { display: flex; justify-content: center; gap: 48px; font-size: 13px; opacity: .7; }
  .cover .meta span { display: flex; align-items: center; gap: 6px; }

  /* 内容区 */
  .container { max-width: 900px; margin: 0 auto; padding: 48px 40px; }

  /* 章节 */
  .section { margin-bottom: 56px; }
  .section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pri);
    border-left: 4px solid var(--acc);
    padding-left: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
  }
  .section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--pri-lt);
    margin: 28px 0 12px;
  }

  /* 文字 */
  p { color: var(--txt-sub); margin-bottom: 10px; }
  p strong { color: var(--txt); }

  /* 卡片 */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
  }

  /* 角色卡片 */
  .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .role-card {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 20px;
    border-top: 3px solid var(--acc);
  }
  .role-card .role-icon { font-size: 28px; margin-bottom: 8px; }
  .role-card .role-name { font-size: 15px; font-weight: 700; color: var(--pri); margin-bottom: 4px; }
  .role-card .role-device { font-size: 12px; color: var(--txt-sub); margin-bottom: 8px; }
  .role-card .role-desc { font-size: 13px; color: var(--txt-sub); line-height: 1.6; }

  /* 表格 */
  table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
  thead th {
    background: #F1F5F9;
    color: var(--pri);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--bdr);
  }
  tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bdr);
    color: var(--txt-sub);
  }
  tbody tr:hover td { background: #F8FAFC; }

  /* 流程图容器 */
  .flow-container {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    overflow-x: auto;
  }
  .flow-container .flow-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pri);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bdr);
  }

  /* 标签 */
  .tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
  }
  .tag-blue { background: #DBEAFE; color: #1E40AF; }
  .tag-green { background: #DCFCE7; color: #166534; }
  .tag-orange { background: #FEF3C7; color: #92400E; }
  .tag-red { background: #FEE2E2; color: #991B1B; }
  .tag-gray { background: #F1F5F9; color: #475569; }

  /* 要点列表 */
  .point-list { list-style: none; padding: 0; }
  .point-list li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    color: var(--txt-sub);
    font-size: 14px;
  }
  .point-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    background: var(--acc);
    border-radius: 50%;
  }

  /* 状态时间轴 */
  .status-bar {
    display: flex;
    gap: 0;
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    overflow: hidden;
  }
  .status-step {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    font-size: 12px;
    color: var(--txt-sub);
    position: relative;
    background: #F8FAFC;
  }
  .status-step + .status-step { border-left: 1px solid var(--bdr); }
  .status-step.active { background: #DBEAFE; color: var(--pri); font-weight: 600; }
  .status-step .step-num {
    display: block;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #E2E8F0;
    color: var(--txt-sub);
    line-height: 22px;
    margin: 0 auto 6px;
    font-size: 11px;
    font-weight: 700;
  }
  .status-step.active .step-num { background: var(--acc); color: #fff; }

  /* 打印 */
  @media print {
    .cover { page-break-after: always; }
    .section { page-break-inside: avoid; }
    .flow-container { page-break-inside: avoid; }
  }

  /* 页脚 */
  .footer {
    text-align: center;
    padding: 40px;
    color: var(--txt-sub);
    font-size: 12px;
    border-top: 1px solid var(--bdr);
    margin-top: 40px;
  }

  /* TOC */
  .toc { margin: 24px 0; }
  .toc a { display: block; padding: 6px 0; color: var(--acc); text-decoration: none; font-size: 14px; }
  .toc a:hover { text-decoration: underline; }
</style>
</head>
<body>

<!-- ==================== 封面 ==================== -->
<div class="cover">
  <div class="tag">需求说明书</div>
  <h1>酒店客房送餐系统</h1>
  <h2>智能点餐 · 五端协同 · 高效服务</h2>
  <div class="meta">
    <span>版本 v1.0</span>
    <span>2026年7月26日</span>
    <span>状态：需求确认中</span>
  </div>
</div>

<div class="container">

<!-- ==================== 目录 ==================== -->
<div class="section">
  <div class="section-title">目录</div>
  <div class="toc">
    <a href="#s1">1. 项目概述</a>
    <a href="#s2">2. 系统角色与架构</a>
    <a href="#s3">3. 核心业务流程图</a>
    <a href="#s4">4. 功能模块清单</a>
    <a href="#s5">5. 各端页面结构</a>
    <a href="#s6">6. 订单状态定义</a>
    <a href="#s7">7. 非功能性需求</a>
  </div>
</div>

<!-- ==================== 1. 项目概述 ==================== -->
<div class="section" id="s1">
  <div class="section-title">1. 项目概述</div>
  <p><strong>项目名称：</strong>酒店客房送餐系统（Hotel Room Service Ordering System）</p>
  <p><strong>项目定位：</strong>面向宾馆/酒店客房的数字化点餐解决方案。客人通过客房内扫码进入小程序完成点餐、支付、实时追踪订单状态；餐厅前台、厨房、宾馆前台、后台管理协同处理，实现从点单到送达的全链路闭环。</p>

  <div class="section-subtitle">1.1 核心特点</div>
  <ul class="point-list">
    <li><strong>聚合二维码：</strong>一个房间一个码，同时支持微信和支付宝扫码，系统自动判断入口环境并匹配对应支付方式。</li>
    <li><strong>房号自动绑定：</strong>二维码生成时绑定房间号，客人扫码后无需手动输入，确认即可。</li>
    <li><strong>五端协同：</strong>顾客端、餐厅前台、厨房端、宾馆前台、后台管理——五个端各司其职，形成完整服务链路。</li>
    <li><strong>实时状态追踪：</strong>6 节点订单状态 + 进度可视化，客人随时掌握餐食进度。</li>
    <li><strong>智能退单：</strong>接单前顾客自助退、接单后宾馆前台可介入退，灵活处理异常。</li>
  </ul>
</div>

<!-- ==================== 2. 系统角色 ==================== -->
<div class="section" id="s2">
  <div class="section-title">2. 系统角色与架构</div>
  <p>本系统共涉及 <strong>五个端</strong>、<strong>四个角色</strong>（餐厅前台与厨房端同属餐厅角色），覆盖从客人点餐到后台管理的完整链路。</p>

  <div class="role-grid">
    <div class="role-card">
      <div class="role-icon">📱</div>
      <div class="role-name">顾客端</div>
      <div class="role-device">微信小程序 / 支付宝小程序</div>
      <div class="role-desc">扫码点餐、下单支付、实时追踪订单状态</div>
    </div>
    <div class="role-card">
      <div class="role-icon">🖥️</div>
      <div class="role-name">餐厅前台</div>
      <div class="role-device">PAD / 移动端 / PC端</div>
      <div class="role-desc">接单/拒单、语音提醒、营业时间管理、安排送餐</div>
    </div>
    <div class="role-card">
      <div class="role-icon">👨‍🍳</div>
      <div class="role-name">厨房端</div>
      <div class="role-device">厨房大屏 + 打印机</div>
      <div class="role-desc">语音播报、小票打印、备餐、出餐</div>
    </div>
    <div class="role-card">
      <div class="role-icon">🏨</div>
      <div class="role-name">宾馆前台</div>
      <div class="role-device">PC端 / 移动端</div>
      <div class="role-desc">查看全部订单、任何阶段退单、状态总览</div>
    </div>
    <div class="role-card">
      <div class="role-icon">⚙️</div>
      <div class="role-name">后台管理</div>
      <div class="role-device">PC端</div>
      <div class="role-desc">数据看板、菜品/订单/房间管理、品牌风格设置</div>
    </div>
  </div>
</div>

<!-- ==================== 3. 核心流程图 ==================== -->
<div class="section" id="s3">
  <div class="section-title">3. 核心业务流程图</div>

  <!-- 3.1 扫码进入 -->
  <div class="flow-container">
    <div class="flow-title">3.1 扫码进入流程</div>
    <svg viewBox="0 0 860 520" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow1" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#64748B"/>
        </marker>
        <marker id="arrow1g" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#16A34A"/>
        </marker>
        <marker id="arrow1r" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#DC2626"/>
        </marker>
      </defs>
      
      <!-- 扫码 -->
      <rect x="330" y="20" width="140" height="44" rx="22" fill="#DBEAFE" stroke="#2563EB" stroke-width="2"/>
      <text x="400" y="48" text-anchor="middle" font-size="14" font-weight="700" fill="#1E40AF">客人扫聚合码</text>
      
      <line x1="400" y1="64" x2="400" y2="90" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow1)"/>
      
      <!-- 环境判断 -->
      <polygon points="400,95 480,125 400,155 320,125" fill="#FEF3C7" stroke="#D97706" stroke-width="1.5"/>
      <text x="400" y="130" text-anchor="middle" font-size="12" font-weight="600" fill="#92400E">环境判断</text>
      
      <!-- 微信分支 -->
      <line x1="320" y1="125" x2="200" y2="125" stroke="#64748B" stroke-width="1.5"/>
      <line x1="200" y1="125" x2="200" y2="200" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow1)"/>
      <rect x="120" y="200" width="160" height="40" rx="8" fill="#E8F5E9" stroke="#43A047" stroke-width="1.5"/>
      <text x="200" y="225" text-anchor="middle" font-size="13" font-weight="600" fill="#2E7D32">微信小程序</text>
      <text x="200" y="255" text-anchor="middle" font-size="10" fill="#64748B">→ 微信支付</text>

      <!-- 支付宝分支 -->
      <line x1="480" y1="125" x2="600" y2="125" stroke="#64748B" stroke-width="1.5"/>
      <line x1="600" y1="125" x2="600" y2="200" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow1)"/>
      <rect x="520" y="200" width="160" height="40" rx="8" fill="#E3F2FD" stroke="#1E88E5" stroke-width="1.5"/>
      <text x="600" y="225" text-anchor="middle" font-size="13" font-weight="600" fill="#1565C0">支付宝小程序</text>
      <text x="600" y="255" text-anchor="middle" font-size="10" fill="#64748B">→ 支付宝支付</text>

      <!-- 小程序→房号确认 -->
      <line x1="200" y1="260" x2="200" y2="300" stroke="#64748B" stroke-width="1.5"/>
      <line x1="600" y1="260" x2="600" y2="300" stroke="#64748B" stroke-width="1.5"/>
      <line x1="200" y1="300" x2="600" y2="300" stroke="#64748B" stroke-width="1.5"/>
      <line x1="400" y1="300" x2="400" y2="330" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow1)"/>

      <!-- 营业时间判断 -->
      <polygon points="400,335 480,365 400,395 320,365" fill="#FFF7ED" stroke="#EA580C" stroke-width="1.5"/>
      <text x="400" y="370" text-anchor="middle" font-size="11" font-weight="600" fill="#9A3412">营业时间?</text>

      <!-- 在营业 -->
      <line x1="320" y1="365" x2="170" y2="365" stroke="#16A34A" stroke-width="1.5"/>
      <line x1="170" y1="365" x2="170" y2="420" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow1g)"/>
      <rect x="90" y="420" width="160" height="40" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="170" y="445" text-anchor="middle" font-size="13" font-weight="600" fill="#166534">房号确认页</text>
      
      <line x1="170" y1="460" x2="170" y2="490" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow1g)"/>
      <rect x="90" y="490" width="160" height="40" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="170" y="515" text-anchor="middle" font-size="13" font-weight="600" fill="#166534">进入菜单</text>

      <!-- 不在营业 -->
      <line x1="480" y1="365" x2="660" y2="365" stroke="#DC2626" stroke-width="1.5"/>
      <line x1="660" y1="365" x2="660" y2="420" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrow1r)"/>
      <rect x="580" y="420" width="160" height="54" rx="8" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"/>
      <text x="660" y="443" text-anchor="middle" font-size="12" font-weight="600" fill="#991B1B">非营业时间</text>
      <text x="660" y="460" text-anchor="middle" font-size="10" fill="#991B1B">提示下次营业时段</text>

      <!-- 环境判断下方标签 -->
      <text x="120" y="170" font-size="9" fill="#64748B">User-Agent</text>
      <text x="680" y="170" font-size="9" fill="#64748B">User-Agent</text>
    </svg>
  </div>

  <!-- 3.2 点餐下单 -->
  <div class="flow-container">
    <div class="flow-title">3.2 点餐下单流程</div>
    <svg viewBox="0 0 860 580" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow2" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#64748B"/>
        </marker>
      </defs>

      <!-- 进入菜单 -->
      <rect x="330" y="15" width="140" height="44" rx="22" fill="#DBEAFE" stroke="#2563EB" stroke-width="2"/>
      <text x="400" y="43" text-anchor="middle" font-size="14" font-weight="700" fill="#1E40AF">进入菜单首页</text>

      <line x1="400" y1="59" x2="400" y2="88" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 分类浏览 -->
      <rect x="290" y="88" width="220" height="36" rx="6" fill="#F8FAFC" stroke="#94A3B8" stroke-width="1"/>
      <text x="400" y="111" text-anchor="middle" font-size="12" fill="#475569">按分类浏览 → 菜品列表</text>

      <line x1="400" y1="124" x2="400" y2="150" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 菜品详情 -->
      <rect x="290" y="150" width="220" height="36" rx="6" fill="#F8FAFC" stroke="#94A3B8" stroke-width="1"/>
      <text x="400" y="173" text-anchor="middle" font-size="12" fill="#475569">点击菜品 → 详情页（规格/数量）</text>

      <line x1="400" y1="186" x2="400" y2="212" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 加购 -->
      <rect x="290" y="212" width="220" height="36" rx="6" fill="#FFF7ED" stroke="#EA580C" stroke-width="1"/>
      <text x="400" y="235" text-anchor="middle" font-size="12" fill="#9A3412">加入购物车</text>

      <!-- 循环回选菜 -->
      <line x1="510" y1="230" x2="580" y2="230" stroke="#64748B" stroke-width="1" stroke-dasharray="4,2"/>
      <line x1="580" y1="230" x2="580" y2="106" stroke="#64748B" stroke-width="1" stroke-dasharray="4,2"/>
      <line x1="580" y1="106" x2="510" y2="106" stroke="#64748B" stroke-width="1" stroke-dasharray="4,2" marker-end="url(#arrow2)"/>
      <text x="590" y="170" font-size="10" fill="#94A3B8">继续选购</text>

      <line x1="400" y1="248" x2="400" y2="278" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 购物车 -->
      <rect x="290" y="278" width="220" height="36" rx="6" fill="#F8FAFC" stroke="#94A3B8" stroke-width="1"/>
      <text x="400" y="301" text-anchor="middle" font-size="12" fill="#475569">购物车（增减/备注/房号确认）</text>

      <line x1="400" y1="314" x2="400" y2="344" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 确认下单 -->
      <rect x="290" y="344" width="220" height="44" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="400" y="372" text-anchor="middle" font-size="13" font-weight="600" fill="#166534">确认下单页</text>

      <!-- 下单详情 -->
      <text x="400" y="408" text-anchor="middle" font-size="10" fill="#64748B">房号 · 联系人 · 送达时间 · 备注</text>

      <line x1="400" y1="416" x2="400" y2="446" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 支付 -->
      <rect x="290" y="446" width="220" height="36" rx="6" fill="#E8F5E9" stroke="#43A047" stroke-width="1"/>
      <text x="400" y="469" text-anchor="middle" font-size="12" fill="#2E7D32">选择支付（微信/支付宝→自动匹配）</text>

      <line x1="400" y1="482" x2="400" y2="510" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow2)"/>

      <!-- 支付成功 -->
      <rect x="290" y="510" width="220" height="44" rx="22" fill="#16A34A"/>
      <text x="400" y="538" text-anchor="middle" font-size="14" font-weight="700" fill="#FFFFFF">✅ 下单成功</text>

      <!-- 右侧标注 -->
      <text x="580" y="370" font-size="10" fill="#94A3B8">可选：立即送达</text>
      <text x="580" y="385" font-size="10" fill="#94A3B8">或预约送餐时间</text>
    </svg>
  </div>

  <!-- 3.3 订单状态流转 -->
  <div class="flow-container">
    <div class="flow-title">3.3 订单状态流转（6节点）</div>
    <svg viewBox="0 0 860 220" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow3" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#64748B"/>
        </marker>
      </defs>

      <!-- 状态: 已下单 -->
      <rect x="30" y="50" width="110" height="60" rx="8" fill="#DBEAFE" stroke="#2563EB" stroke-width="2"/>
      <text x="85" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#1E40AF">已下单</text>
      <text x="85" y="96" text-anchor="middle" font-size="10" fill="#3B82F6">顾客完成支付</text>

      <line x1="140" y1="80" x2="175" y2="80" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow3)"/>

      <!-- 已接单 -->
      <rect x="180" y="50" width="110" height="60" rx="8" fill="#DBEAFE" stroke="#2563EB" stroke-width="2"/>
      <text x="235" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#1E40AF">已接单</text>
      <text x="235" y="96" text-anchor="middle" font-size="10" fill="#3B82F6">餐厅前台确认</text>

      <line x1="290" y1="80" x2="325" y2="80" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow3)"/>

      <!-- 备餐中 -->
      <rect x="330" y="50" width="110" height="60" rx="8" fill="#FEF3C7" stroke="#D97706" stroke-width="2"/>
      <text x="385" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#92400E">备餐中</text>
      <text x="385" y="96" text-anchor="middle" font-size="10" fill="#B45309">厨房正在制作</text>

      <line x1="440" y1="80" x2="475" y2="80" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow3)"/>

      <!-- 已出餐 -->
      <rect x="480" y="50" width="110" height="60" rx="8" fill="#FEF3C7" stroke="#D97706" stroke-width="2"/>
      <text x="535" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#92400E">已出餐</text>
      <text x="535" y="96" text-anchor="middle" font-size="10" fill="#B45309">厨师点击出餐</text>

      <line x1="590" y1="80" x2="625" y2="80" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow3)"/>

      <!-- 配送中 -->
      <rect x="630" y="50" width="110" height="60" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="2"/>
      <text x="685" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#166534">配送中</text>
      <text x="685" y="96" text-anchor="middle" font-size="10" fill="#22C55E">前台安排送餐</text>

      <line x1="740" y1="80" x2="775" y2="80" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow3)"/>

      <!-- 已送达 -->
      <rect x="780" y="50" width="70" height="60" rx="8" fill="#16A34A"/>
      <text x="815" y="76" text-anchor="middle" font-size="12" font-weight="700" fill="#FFFFFF">已完成</text>
      <text x="815" y="96" text-anchor="middle" font-size="10" fill="#DCFCE7">送达客房</text>

      <!-- 角色标注栏 -->
      <text x="85" y="160" text-anchor="middle" font-size="10" fill="#64748B">顾客</text>
      <text x="235" y="160" text-anchor="middle" font-size="10" fill="#64748B">餐厅前台</text>
      <text x="385" y="160" text-anchor="middle" font-size="10" fill="#64748B">厨房</text>
      <text x="535" y="160" text-anchor="middle" font-size="10" fill="#64748B">厨房</text>
      <text x="685" y="160" text-anchor="middle" font-size="10" fill="#64748B">餐厅前台</text>
      <text x="815" y="160" text-anchor="middle" font-size="10" fill="#64748B">✓</text>

      <!-- 分隔线 -->
      <line x1="155" y1="125" x2="155" y2="145" stroke="#E2E8F0" stroke-width="1"/>
      <line x1="305" y1="125" x2="305" y2="145" stroke="#E2E8F0" stroke-width="1"/>
      <line x1="455" y1="125" x2="455" y2="145" stroke="#E2E8F0" stroke-width="1"/>
      <line x1="605" y1="125" x2="605" y2="145" stroke="#E2E8F0" stroke-width="1"/>
      <line x1="755" y1="125" x2="755" y2="145" stroke="#E2E8F0" stroke-width="1"/>
    </svg>
  </div>

  <!-- 3.4 退单流程 -->
  <div class="flow-container">
    <div class="flow-title">3.4 退单流程</div>
    <svg viewBox="0 0 860 380" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow4" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#64748B"/>
        </marker>
        <marker id="arrow4g" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#16A34A"/>
        </marker>
        <marker id="arrow4r" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#DC2626"/>
        </marker>
      </defs>

      <!-- 顾客发起退单 -->
      <rect x="290" y="20" width="220" height="44" rx="22" fill="#FEE2E2" stroke="#DC2626" stroke-width="2"/>
      <text x="400" y="48" text-anchor="middle" font-size="14" font-weight="700" fill="#991B1B">顾客发起退单</text>

      <line x1="400" y1="64" x2="400" y2="92" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrow4r)"/>

      <!-- 判断 -->
      <polygon points="400,97 480,127 400,157 320,127" fill="#FEF3C7" stroke="#D97706" stroke-width="1.5"/>
      <text x="400" y="132" text-anchor="middle" font-size="11" font-weight="600" fill="#92400E">已接单?</text>

      <!-- 分支: 未接单 -->
      <line x1="320" y1="127" x2="170" y2="127" stroke="#16A34A" stroke-width="1.5"/>
      <line x1="170" y1="127" x2="170" y2="205" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow4g)"/>
      <text x="120" y="168" font-size="10" fill="#16A34A">未接单</text>

      <rect x="70" y="210" width="200" height="44" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="170" y="228" text-anchor="middle" font-size="12" font-weight="600" fill="#166534">系统自动退单</text>
      <text x="170" y="245" text-anchor="middle" font-size="10" fill="#16A34A">原路退款（微信/支付宝）</text>

      <line x1="170" y1="254" x2="170" y2="290" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow4g)"/>
      <rect x="90" y="290" width="160" height="40" rx="20" fill="#16A34A"/>
      <text x="170" y="316" text-anchor="middle" font-size="13" font-weight="700" fill="#FFFFFF">退款完成</text>

      <!-- 分支: 已接单 -->
      <line x1="480" y1="127" x2="660" y2="127" stroke="#DC2626" stroke-width="1.5"/>
      <line x1="660" y1="127" x2="660" y2="205" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrow4r)"/>
      <text x="700" y="168" font-size="10" fill="#DC2626">已接单</text>

      <rect x="560" y="210" width="200" height="44" rx="8" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"/>
      <text x="660" y="228" text-anchor="middle" font-size="12" font-weight="600" fill="#991B1B">仅宾馆前台可退</text>
      <text x="660" y="245" text-anchor="middle" font-size="10" fill="#DC2626">任何阶段均可介入</text>

      <line x1="660" y1="254" x2="660" y2="290" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrow4r)"/>
      <rect x="560" y="290" width="200" height="40" rx="8" fill="#FFF7ED" stroke="#EA580C" stroke-width="1.5"/>
      <text x="660" y="308" text-anchor="middle" font-size="11" font-weight="600" fill="#9A3412">前台确认退单</text>
      <text x="660" y="323" text-anchor="middle" font-size="9" fill="#EA580C">→ 强制退款</text>

      <!-- 标注 -->
      <text x="160" y="360" text-anchor="middle" font-size="10" fill="#94A3B8">客人自助操作</text>
      <text x="660" y="360" text-anchor="middle" font-size="10" fill="#94A3B8">宾馆前台人工介入</text>
    </svg>
  </div>

  <!-- 3.5 餐厅端协作 -->
  <div class="flow-container">
    <div class="flow-title">3.5 餐厅端协���流程（前台+厨房）</div>
    <svg viewBox="0 0 860 420" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow5" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#64748B"/>
        </marker>
        <marker id="arrow5b" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#2563EB"/>
        </marker>
      </defs>

      <!-- 角色标签 -->
      <text x="100" y="22" font-size="11" font-weight="600" fill="#2563EB">顾客</text>
      <text x="310" y="22" font-size="11" font-weight="600" fill="#EA580C">餐厅前台</text>
      <text x="550" y="22" font-size="11" font-weight="600" fill="#16A34A">厨房</text>
      
      <line x1="0" y1="32" x2="860" y2="32" stroke="#E2E8F0" stroke-width="1"/>

      <!-- 顾客下单 -->
      <rect x="20" y="45" width="140" height="40" rx="6" fill="#DBEAFE" stroke="#2563EB" stroke-width="1.5"/>
      <text x="90" y="70" text-anchor="middle" font-size="12" font-weight="600" fill="#1E40AF">顾客完成下单</text>

      <line x1="160" y1="65" x2="230" y2="65" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>

      <!-- 前台语音提醒 -->
      <rect x="235" y="45" width="170" height="40" rx="6" fill="#FFF7ED" stroke="#EA580C" stroke-width="1.5"/>
      <text x="320" y="65" text-anchor="middle" font-size="12" font-weight="600" fill="#9A3412">🔔 语音提醒新订单</text>

      <line x1="320" y1="85" x2="320" y2="120" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>

      <!-- 接单/拒单 -->
      <polygon points="320,125 400,157 320,189 240,157" fill="#FEF3C7" stroke="#D97706" stroke-width="1.5"/>
      <text x="320" y="160" text-anchor="middle" font-size="11" font-weight="600" fill="#92400E">接单?</text>

      <!-- 拒单 -->
      <line x1="240" y1="157" x2="120" y2="157" stroke="#DC2626" stroke-width="1.5"/>
      <line x1="120" y1="157" x2="120" y2="220" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrow4r)"/>
      <rect x="40" y="220" width="160" height="44" rx="8" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"/>
      <text x="120" y="240" text-anchor="middle" font-size="11" font-weight="600" fill="#991B1B">拒单（填写原因）</text>
      <text x="120" y="256" text-anchor="middle" font-size="9" fill="#DC2626">→ 通知顾客退款</text>

      <!-- 接单 -->
      <line x1="320" y1="189" x2="320" y2="240" stroke="#2563EB" stroke-width="1.5" marker-end="url(#arrow5b)"/>
      <rect x="235" y="240" width="170" height="40" rx="6" fill="#DBEAFE" stroke="#2563EB" stroke-width="1.5"/>
      <text x="320" y="265" text-anchor="middle" font-size="12" font-weight="600" fill="#1E40AF">接单确认</text>

      <!-- 通知厨房 -->
      <line x1="405" y1="260" x2="470" y2="260" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>

      <!-- 厨房收到 -->
      <rect x="475" y="97" width="180" height="40" rx="6" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="565" y="113" text-anchor="middle" font-size="12" font-weight="600" fill="#166534">🔊 语音播报 + 打印小票</text>

      <line x1="565" y1="137" x2="565" y2="175" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>

      <!-- 备餐 -->
      <rect x="475" y="175" width="180" height="40" rx="6" fill="#FEF3C7" stroke="#D97706" stroke-width="1.5"/>
      <text x="565" y="200" text-anchor="middle" font-size="12" font-weight="600" fill="#92400E">厨师开始备餐</text>

      <line x1="565" y1="215" x2="565" y2="250" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>

      <!-- 出餐 -->
      <rect x="475" y="250" width="180" height="44" rx="6" fill="#16A34A" stroke="#16A34A" stroke-width="1.5"/>
      <text x="565" y="268" text-anchor="middle" font-size="12" font-weight="700" fill="#FFFFFF">点击「出餐」</text>
      <text x="565" y="284" text-anchor="middle" font-size="10" fill="#DCFCE7">→ 通知餐厅前台</text>

      <!-- 前台送餐 -->
      <line x1="475" y1="272" x2="420" y2="272" stroke="#64748B" stroke-width="1.5"/>
      <line x1="420" y1="272" x2="420" y2="320" stroke="#64748B" stroke-width="1.5" marker-end="url(#arrow5)"/>
      <rect x="235" y="315" width="170" height="40" rx="6" fill="#FFF7ED" stroke="#EA580C" stroke-width="1.5"/>
      <text x="320" y="340" text-anchor="middle" font-size="12" font-weight="600" fill="#9A3412">安排服务员送餐</text>

      <!-- 送达 -->
      <line x1="320" y1="355" x2="320" y2="390" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrow4g)"/>
      <rect x="235" y="385" width="170" height="40" rx="20" fill="#16A34A"/>
      <text x="320" y="410" text-anchor="middle" font-size="12" font-weight="700" fill="#FFFFFF">送达客房 ✓</text>
    </svg>
  </div>

  <!-- 3.6 五端全景 -->
  <div class="flow-container">
    <div class="flow-title">3.6 五端协作全景图</div>
    <svg viewBox="0 0 860 480" style="width:100%; max-width:860px;">
      <defs>
        <marker id="arrow6" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
          <path d="M0,0 L8,3 L0,6 Z" fill="#94A3B8"/>
        </marker>
      </defs>

      <!-- 顾客端 - 左上 -->
      <rect x="30" y="30" width="200" height="130" rx="12" fill="#DBEAFE" stroke="#2563EB" stroke-width="1.5"/>
      <text x="130" y="55" text-anchor="middle" font-size="14" font-weight="700" fill="#1E40AF">📱 顾客端</text>
      <text x="130" y="75" text-anchor="middle" font-size="11" fill="#3B82F6">微信/支付宝小程序</text>
      <line x1="50" y1="85" x2="210" y2="85" stroke="#BFDBFE" stroke-width="1"/>
      <text x="130" y="102" text-anchor="middle" font-size="11" fill="#475569">扫码 → 点餐 → 支付</text>
      <text x="130" y="120" text-anchor="middle" font-size="11" fill="#475569">实时追踪 → 退单</text>
      <text x="130" y="145" text-anchor="middle" font-size="10" fill="#94A3B8">（移动端）</text>

      <!-- 餐厅前台 - 右上 -->
      <rect x="330" y="30" width="200" height="130" rx="12" fill="#FFF7ED" stroke="#EA580C" stroke-width="1.5"/>
      <text x="430" y="55" text-anchor="middle" font-size="14" font-weight="700" fill="#9A3412">🖥️ 餐厅前台</text>
      <text x="430" y="75" text-anchor="middle" font-size="11" fill="#C2410C">PAD / 移动 / PC</text>
      <line x1="350" y1="85" x2="510" y2="85" stroke="#FED7AA" stroke-width="1"/>
      <text x="430" y="102" text-anchor="middle" font-size="11" fill="#475569">接单/拒单 · 语音提醒</text>
      <text x="430" y="120" text-anchor="middle" font-size="11" fill="#475569">营业时间 · 安排送餐</text>
      <text x="430" y="145" text-anchor="middle" font-size="10" fill="#94A3B8">（多端）</text>

      <!-- 厨房 - 右中 -->
      <rect x="630" y="30" width="200" height="130" rx="12" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"/>
      <text x="730" y="55" text-anchor="middle" font-size="14" font-weight="700" fill="#166534">👨‍🍳 厨房端</text>
      <text x="730" y="75" text-anchor="middle" font-size="11" fill="#22C55E">屏幕 + 打印机</text>
      <line x1="650" y1="85" x2="810" y2="85" stroke="#BBF7D0" stroke-width="1"/>
      <text x="730" y="102" text-anchor="middle" font-size="11" fill="#475569">语音播报 · 打印小票</text>
      <text x="730" y="120" text-anchor="middle" font-size="11" fill="#475569">备餐 → 出餐</text>
      <text x="730" y="145" text-anchor="middle" font-size="10" fill="#94A3B8">（厨房端）</text>

      <!-- 宾馆前台 - 左下 -->
      <rect x="30" y="250" width="200" height="130" rx="12" fill="#F3E8FF" stroke="#9333EA" stroke-width="1.5"/>
      <text x="130" y="275" text-anchor="middle" font-size="14" font-weight="700" fill="#6B21A8">🏨 宾馆前台</text>
      <text x="130" y="295" text-anchor="middle" font-size="11" fill="#A855F7">PC / 移动</text>
      <line x1="50" y1="305" x2="210" y2="305" stroke="#E9D5FF" stroke-width="1"/>
      <text x="130" y="322" text-anchor="middle" font-size="11" fill="#475569">全订单查看 · 状态总览</text>
      <text x="130" y="340" text-anchor="middle" font-size="11" fill="#475569">任何阶段退单</text>
      <text x="130" y="365" text-anchor="middle" font-size="10" fill="#94A3B8">（多端）</text>

      <!-- 后台管理 - 右下 -->
      <rect x="330" y="250" width="200" height="130" rx="12" fill="#F1F5F9" stroke="#475569" stroke-width="1.5"/>
      <text x="430" y="275" text-anchor="middle" font-size="14" font-weight="700" fill="#334155">⚙️ 后台管理</text>
      <text x="430" y="295" text-anchor="middle" font-size="11" fill="#64748B">PC</text>
      <line x1="350" y1="305" x2="510" y2="305" stroke="#E2E8F0" stroke-width="1"/>
      <text x="430" y="322" text-anchor="middle" font-size="11" fill="#475569">数据看板 · 订单管理</text>
      <text x="430" y="340" text-anchor="middle" font-size="11" fill="#475569">菜品/房间/品牌设置</text>
      <text x="430" y="365" text-anchor="middle" font-size="10" fill="#94A3B8">（PC端）</text>

      <!-- 虚线连接 -->
      <!-- 顾客 → 餐厅前台 -->
      <line x1="230" y1="95" x2="330" y2="95" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrow6)"/>
      <text x="280" y="88" text-anchor="middle" font-size="9" fill="#94A3B8">下单</text>

      <!-- 餐厅前台 → 厨房 -->
      <line x1="530" y1="95" x2="630" y2="95" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrow6)"/>
      <text x="580" y="88" text-anchor="middle" font-size="9" fill="#94A3B8">接单通知</text>

      <!-- 厨房 → 餐厅前台 -->
      <line x1="630" y1="140" x2="530" y2="140" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrow6)"/>
      <text x="580" y="133" text-anchor="middle" font-size="9" fill="#94A3B8">出餐通知</text>

      <!-- 顾客 → 宾馆前台 (退单) -->
      <path d="M30,200 Q30,225 130,225 Q230,225 230,250" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" fill="none" marker-end="url(#arrow6)"/>
      <text x="50" y="233" font-size="9" fill="#94A3B8">退单请求</text>

      <!-- 所有端 → 后台 -->
      <line x1="230" y1="315" x2="330" y2="315" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrow6)"/>
      <text x="280" y="308" text-anchor="middle" font-size="9" fill="#94A3B8">数据上报</text>

      <!-- 后台 → 顾客 -->
      <line x1="330" y1="360" x2="230" y2="360" stroke="#94A3B8" stroke-width="1" stroke-dasharray="5,3" marker-end="url(#arrow6)"/>
      <text x="280" y="353" text-anchor="middle" font-size="9" fill="#94A3B8">配置下发</text>

      <!-- 中央：核心数据 -->
      <rect x="630" y="260" width="200" height="100" rx="12" fill="#F8FAFC" stroke="#CBD5E1" stroke-width="1" stroke-dasharray="4,2"/>
      <text x="730" y="290" text-anchor="middle" font-size="12" font-weight="600" fill="#475569">核心数据</text>
      <text x="730" y="312" text-anchor="middle" font-size="10" fill="#94A3B8">订单 · 菜品 · 房间</text>
      <text x="730" y="330" text-anchor="middle" font-size="10" fill="#94A3B8">状态 · 营业时间</text>
    </svg>
  </div>

</div>

<!-- ==================== 4. 功能模块清单 ==================== -->
<div class="section" id="s4">
  <div class="section-title">4. 功能模块清单</div>

  <div class="section-subtitle">4.1 顾客端</div>
  <table>
    <thead><tr><th>功能模块</th><th>说明</th><th>优先级</th></tr></thead>
    <tbody>
      <tr><td>扫码进入</td><td>扫聚合码 → 环境判断 → 自动进入微信/支付宝小程序</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>房号确认</td><td>扫码后展示房号+欢迎语，客人确认后进入菜单</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>营业时间提示</td><td>非营业时段扫码，展示提示页+下次营业时间</td><td><span class="tag tag-green">P1</span></td></tr>
      <tr><td>菜单浏览</td><td>分类导航、菜品列表、搜索、售罄标识</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>菜品详情</td><td>大图、描述、规格选择、数量加减</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>购物车</td><td>菜品清单、增减、备注、房号确认</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>确认下单</td><td>房号、联系人、备注、立即/预约送达时间</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>在线支付</td><td>根据扫码环境自动匹配微信支付或支付宝支付</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>订单状态追踪</td><td>6节点进度可视化，实时更新状态</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>退单（接单前）</td><td>接单前客人可自助退单，原路退款</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>我的订单</td><td>历史订单列表，状态标签，订单详情</td><td><span class="tag tag-green">P1</span></td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">4.2 餐厅前台</div>
  <table>
    <thead><tr><th>功能模块</th><th>说明</th><th>优先级</th></tr></thead>
    <tbody>
      <tr><td>新订单语音提醒</td><td>新订单到达时语音播报+弹窗提醒</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>接单/拒单</td><td>查看订单详情后接单确认；拒单需填写原因</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>订单处理流转</td><td>待接单→已接单→备餐中→已出餐→配送中→已送达</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>出餐通知接收</td><td>收到厨房出餐通知 → 安排服务员送餐</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>营业时间设置</td><td>多时段设置（如早7-10、午11:30-14、晚17-21），每天固定</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>临时暂停接单</td><td>一键暂停/恢复接单（厨房故障等突发情况）</td><td><span class="tag tag-green">P1</span></td></tr>
      <tr><td>当日订单看板</td><td>进行中订单一览、预计送达时间</td><td><span class="tag tag-green">P1</span></td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">4.3 厨房端</div>
  <table>
    <thead><tr><th>功能模块</th><th>说明</th><th>优先级</th></tr></thead>
    <tbody>
      <tr><td>语音播报</td><td>新订单到达时语音播报菜品内容</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>自动打印小票</td><td>接单后自动打印厨房小票（菜品、房号、备注）</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>待做订单列表</td><td>按接单时间排序的待备餐订单</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>出餐操作</td><td>厨师完成备餐后点击出餐 → 通知餐厅前台</td><td><span class="tag tag-blue">P0</span></td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">4.4 宾馆前台</div>
  <table>
    <thead><tr><th>功能模块</th><th>说明</th><th>优先级</th></tr></thead>
    <tbody>
      <tr><td>全订单查看</td><td>查看所有订餐信息，不限状态</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>订单状态总览</td><td>各状态订单列表、筛选、搜索</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>退单（任何阶段）</td><td>可在任意订单阶段介入退单，含接单后、备餐后</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>订单详情查看</td><td>查看单个订单的完整信息和状态时间线</td><td><span class="tag tag-green">P1</span></td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">4.5 后台管理</div>
  <table>
    <thead><tr><th>功能模块</th><th>说明</th><th>优先级</th></tr></thead>
    <tbody>
      <tr><td>数据看板</td><td>今日订单数、营业额、热门菜品、平均送达时长</td><td><span class="tag tag-green">P1</span></td></tr>
      <tr><td>菜品管理</td><td>菜品列表、上架/下架、价格编辑、售罄设置</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>订单管理</td><td>全部订单、状态筛选、订单详情</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>房间管理</td><td>房间列表、二维码生成/重生成/补打、启停点餐</td><td><span class="tag tag-blue">P0</span></td></tr>
      <tr><td>系统设置</td><td>品牌风格（配色方案选择，五端同步生效）</td><td><span class="tag tag-green">P1</span></td></tr>
    </tbody>
  </table>
</div>

<!-- ==================== 5. 各端页面结构 ==================== -->
<div class="section" id="s5">
  <div class="section-title">5. 各端页面结构</div>

  <div class="section-subtitle">5.1 顾客端（小程序）— 8页</div>
  <table>
    <thead><tr><th width="40">#</th><th>页面</th><th>路由</th><th>说明</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>房号确认页</td><td>/room-confirm</td><td>显示房号、酒店欢迎语、营业时间；确认进入</td></tr>
      <tr><td>2</td><td>菜单首页</td><td>/menu</td><td>分类导航、推荐banner、菜品卡片、售罄标识</td></tr>
      <tr><td>3</td><td>菜品详情页</td><td>/dish/:id</td><td>大图、描述、规格选择、数量、加购按钮</td></tr>
      <tr><td>4</td><td>购物车</td><td>/cart</td><td>菜品清单、数量增减、备注、去结算</td></tr>
      <tr><td>5</td><td>确认下单页</td><td>/order-confirm</td><td>房号、联系人、送达时间、支付方式</td></tr>
      <tr><td>6</td><td>支付页面</td><td>/pay/:id</td><td>微信支付/支付宝（根据环境自动匹配）</td></tr>
      <tr><td>7</td><td>订单状态页</td><td>/order/:id</td><td>6节点进度条、预计送达时间、退单按钮（未接单时）</td></tr>
      <tr><td>8</td><td>我的订单</td><td>/orders</td><td>历史订单列表、状态标签</td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">5.2 餐厅前台 — 4页</div>
  <table>
    <thead><tr><th width="40">#</th><th>页面</th><th>说明</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>订单提醒弹窗</td><td>新订单语音+弹窗提醒</td></tr>
      <tr><td>2</td><td>订单处理页</td><td>待接单列表、订单详情、接单/拒单操作</td></tr>
      <tr><td>3</td><td>当日订单看板</td><td>进行中订单总览、送达时间</td></tr>
      <tr><td>4</td><td>营业时间设置</td><td>多时段编辑、临时暂停开关</td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">5.3 厨房端 — 2页</div>
  <table>
    <thead><tr><th width="40">#</th><th>页面</th><th>说明</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>待备餐列表</td><td>按时间排序的待做列表、语音播报、小票打印</td></tr>
      <tr><td>2</td><td>订单详情</td><td>菜品明细、房号、备注、出餐按钮</td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">5.4 宾馆前台 — 2页</div>
  <table>
    <thead><tr><th width="40">#</th><th>页面</th><th>说明</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>订单总览</td><td>全部订单列表、状态筛选、搜索</td></tr>
      <tr><td>2</td><td>订单详情+退单</td><td>订单完整信息、状态时间线、退单操作</td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">5.5 后台管理 — 5页</div>
  <table>
    <thead><tr><th width="40">#</th><th>页面</th><th>说明</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>数据看板</td><td>今日订单、营业额、热门菜品、趋势图</td></tr>
      <tr><td>2</td><td>菜品管理</td><td>列表、上下架、价格编辑、售罄</td></tr>
      <tr><td>3</td><td>订单管理</td><td>全部订单、筛选、详情</td></tr>
      <tr><td>4</td><td>房间管理</td><td>房间列表、二维码生成/重生成、启停</td></tr>
      <tr><td>5</td><td>系统设置</td><td>品牌风格配色切换</td></tr>
    </tbody>
  </table>
</div>

<!-- ==================== 6. 订单状态定义 ==================== -->
<div class="section" id="s6">
  <div class="section-title">6. 订单状态定义</div>

  <div class="status-bar">
    <div class="status-step active"><span class="step-num">1</span>已下单</div>
    <div class="status-step"><span class="step-num">2</span>已接单</div>
    <div class="status-step"><span class="step-num">3</span>备餐中</div>
    <div class="status-step"><span class="step-num">4</span>已出餐</div>
    <div class="status-step"><span class="step-num">5</span>配送中</div>
    <div class="status-step"><span class="step-num">6</span>已完成</div>
  </div>

  <table>
    <thead><tr><th>状态</th><th>触发人</th><th>触发动作</th><th>下一步</th><th>可退单</th></tr></thead>
    <tbody>
      <tr><td><span class="tag tag-blue">已下单</span></td><td>顾客</td><td>完成支付</td><td>等待餐厅接单</td><td><span class="tag tag-green">✓ 自助退</span></td></tr>
      <tr><td><span class="tag tag-blue">已接单</span></td><td>餐厅前台</td><td>点击接单</td><td>通知厨房</td><td><span class="tag tag-orange">仅宾馆前台</span></td></tr>
      <tr><td><span class="tag tag-orange">备餐中</span></td><td>厨房</td><td>开始制作</td><td>完成后出餐</td><td><span class="tag tag-orange">仅宾馆前台</span></td></tr>
      <tr><td><span class="tag tag-orange">已出餐</span></td><td>厨房</td><td>点击出餐</td><td>通知前台送餐</td><td><span class="tag tag-orange">仅宾馆前台</span></td></tr>
      <tr><td><span class="tag tag-green">配送中</span></td><td>餐厅前台</td><td>安排送餐</td><td>送达客房</td><td><span class="tag tag-orange">仅宾馆前台</span></td></tr>
      <tr><td><span class="tag tag-green">已完成</span></td><td>—</td><td>送达确认</td><td>终态</td><td><span class="tag tag-gray">不可退</span></td></tr>
    </tbody>
  </table>

  <div class="section-subtitle">拒单状态（异常分支）</div>
  <table>
    <thead><tr><th>状态</th><th>触发人</th><th>触发动作</th><th>结果</th></tr></thead>
    <tbody>
      <tr><td><span class="tag tag-red">已拒单</span></td><td>餐厅前台</td><td>拒绝接单（填写原因）</td><td>通知顾客退款，自动原路返回</td></tr>
    </tbody>
  </table>
</div>

<!-- ==================== 7. 非功能性需求 ==================== -->
<div class="section" id="s7">
  <div class="section-title">7. 非功能性需求</div>

  <div class="card">
    <strong>性能要求</strong>
    <ul class="point-list">
      <li>扫码到进入小程序 &lt; 2 秒</li>
      <li>菜单加载 &lt; 1.5 秒</li>
      <li>订单状态更新延迟 &lt; 3 秒</li>
    </ul>
  </div>

  <div class="card">
    <strong>兼容性要求</strong>
    <ul class="point-list">
      <li>顾客端：微信小程序（iOS 14+ / Android 8+）、支付宝小程序</li>
      <li>餐厅前台/宾馆前台：Chrome 90+ / Safari 14+ / 移动端浏览器</li>
      <li>厨房端：大屏显示器（1920×1080）+ 热敏打印机</li>
      <li>后台管理：Chrome 90+ / Edge 90+</li>
    </ul>
  </div>

  <div class="card">
    <strong>语音要求</strong>
    <ul class="point-list">
      <li>餐厅前台：新订单语音提醒（可暂停/调整音量）</li>
      <li>厨房端：新订单语音播报菜品名称和房号</li>
    </ul>
  </div>

  <div class="card">
    <strong>视觉要求</strong>
    <ul class="point-list">
      <li>整体风格：简洁商务风，留白多、扁平化</li>
      <li>三套候选配色方案（商务深蓝 / 暖金雅致 / 墨绿清新），待客户确认</li>
      <li>品牌风格设置后五端同步生效</li>
      <li>移动端（顾客、PAD）：手机/平板外框模拟，底部 Tab 导航</li>
      <li>PC 端（后台、宾馆前台）：左侧导航 + 右侧内容区</li>
    </ul>
  </div>

  <div class="card">
    <strong>安全要求</strong>
    <ul class="point-list">
      <li>支付环境自动判断，防止支付方式注入攻击</li>
      <li>退单操作权限控制（接单前顾客自退、接单后仅宾馆前台）</li>
      <li>订单数据隔离，各端仅可见本端权限范围内数据</li>
    </ul>
  </div>
</div>

<!-- ==================== 页脚 ==================== -->
<div class="footer">
  <p>酒店客房送餐系统 · 需���说明书 v1.0</p>
  <p>2026年7月26日 · 需求确认阶段</p>
  <p style="margin-top:8px;color:#94A3B8;">本文档为需求阶段产物，页面结构及流程以最终原型稿为准</p>
</div>

</div>
</body>
</html>