TakeoutSaaS.Prototypes/pages/order-board.html

<!-- 订单大厅 - 实时看板 -->
<style>
/* ===== Page Layout ===== */
.ob-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--g-text);
  height: calc(100vh - var(--header-height) - var(--tabbar-height) - 32px);
}

/* ===== Toolbar ===== */
.ob-toolbar {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--g-shadow-sm);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ob-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-border-hover);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-text-secondary);
  transition: all var(--g-transition);
}
.ob-icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.ob-icon-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ===== Channel Filter Pills ===== */
.ob-channels {
  display: flex;
  gap: 6px;
}
.ob-channel {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid var(--g-border-hover);
  background: #fff;
  font-size: 12px;
  color: var(--g-text-secondary);
  cursor: pointer;
  transition: all var(--g-transition);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.ob-channel:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.ob-channel.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

/* ===== Stats Row ===== */
.ob-stats {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--g-shadow-sm);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.ob-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border-right: 1px solid var(--g-border);
}
.ob-stat-item:first-child { padding-left: 0; }
.ob-stat-item:last-child { border-right: none; }
.ob-stat-label {
  font-size: 12px;
  color: var(--g-text-muted);
}
.ob-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--g-text);
}
.ob-stat-item.highlight .ob-stat-value {
  color: var(--primary);
}

/* ===== Kanban Board ===== */
.ob-board {
  display: flex;
  gap: 16px;
  flex: 1;
  overflow-x: auto;
  min-height: 0;
  padding-bottom: 4px;
}
.ob-board::-webkit-scrollbar { height: 6px; }
.ob-board::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }

/* ===== Column ===== */
.ob-column {
  min-width: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fb;
  border-radius: 10px;
  overflow: hidden;
}
.ob-col-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-text);
  flex-shrink: 0;
  border-left: 3px solid transparent;
}
.ob-col-hd.pending   { border-left-color: #fa8c16; }
.ob-col-hd.making    { border-left-color: var(--primary); }
.ob-col-hd.delivering { border-left-color: #52c41a; }
.ob-col-hd.done      { border-left-color: #d9d9d9; }

.ob-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.ob-col-hd.pending .ob-col-count   { background: #fa8c16; }
.ob-col-hd.making .ob-col-count    { background: var(--primary); }
.ob-col-hd.delivering .ob-col-count { background: #52c41a; }
.ob-col-hd.done .ob-col-count      { background: #d9d9d9; color: #666; }

.ob-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-col-body::-webkit-scrollbar { width: 4px; }
.ob-col-body::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 2px; }

/* ===== Order Card ===== */
.ob-order {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--g-shadow-sm);
  padding: 14px;
  border-left: 3px solid transparent;
  transition: box-shadow var(--g-transition);
  cursor: default;
}
.ob-order:hover {
  box-shadow: var(--g-shadow-md);
}
.ob-order.border-orange   { border-left-color: #fa8c16; }
.ob-order.border-blue     { border-left-color: var(--primary); }
.ob-order.border-green    { border-left-color: #52c41a; }
.ob-order.border-gray     { border-left-color: #d9d9d9; }
.ob-order.dimmed          { opacity: 0.6; }

/* Pulse animation for new orders */
@keyframes ob-pulse-border {
  0%, 100% { border-left-color: #fa8c16; }
  50%      { border-left-color: #ffd591; }
}
.ob-order.pulse {
  animation: ob-pulse-border 2s ease-in-out infinite;
}

/* ===== Order Header ===== */
.ob-order-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.ob-order-no {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-text);
}
.ob-order-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--g-text-muted);
}

/* ===== Order Info ===== */
.ob-order-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--g-text-secondary);
}
.ob-order-info-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ob-order-info-row i {
  width: 14px;
  height: 14px;
  color: var(--g-text-muted);
  flex-shrink: 0;
}
.ob-order-items {
  color: var(--g-text);
  line-height: 1.5;
}
.ob-order-total {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ob-order-total-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--g-text-muted);
}
.ob-tag-reserve {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #fff7e6;
  color: #d46b08;
  border: 1px solid #ffe58f;
}
.ob-tag-urge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #fff1f0;
  color: var(--g-danger);
  border: 1px solid #ffa39e;
  animation: ob-urge-blink 1.2s ease-in-out infinite;
}
@keyframes ob-urge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ob-order-status-line {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}
.ob-order-status-line.green {
  color: #52c41a;
}
.ob-order-complete-time {
  font-size: 12px;
  color: var(--g-text-muted);
}
.ob-order-rider, .ob-order-pickup, .ob-order-table {
  font-size: 12px;
  color: var(--g-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== Order Footer ===== */
.ob-order-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}
.ob-order-ft .g-btn { flex: 1; }
</style>

<div class="ob-page">
  <!-- Toolbar -->
  <div class="ob-toolbar">
    <select class="g-select" style="width:200px;">
      <option>万达广场店</option>
      <option>银泰城店</option>
      <option>大学城店</option>
      <option>火车站店</option>
      <option>科技园店</option>
    </select>

    <div class="ob-channels">
      <span class="ob-channel active" onclick="filterObChannel(this)">全部</span>
      <span class="ob-channel" onclick="filterObChannel(this)">外卖</span>
      <span class="ob-channel" onclick="filterObChannel(this)">自提</span>
      <span class="ob-channel" onclick="filterObChannel(this)">堂食</span>
    </div>

    <div class="ob-toolbar-right">
      <button class="ob-icon-btn active" title="提示音" onclick="this.classList.toggle('active')">
        <i data-lucide="volume-2" style="width:16px;height:16px;"></i>
      </button>
      <button class="ob-icon-btn" title="刷新" onclick="refreshBoard()">
        <i data-lucide="refresh-cw" style="width:16px;height:16px;"></i>
      </button>
    </div>
  </div>

  <!-- Stats -->
  <div class="ob-stats">
    <div class="ob-stat-item highlight">
      <span class="ob-stat-label">今日订单</span>
      <span class="ob-stat-value">128</span>
    </div>
    <div class="ob-stat-item">
      <span class="ob-stat-label">待接单</span>
      <span class="ob-stat-value" style="color:#fa8c16;">5</span>
    </div>
    <div class="ob-stat-item">
      <span class="ob-stat-label">制作中</span>
      <span class="ob-stat-value" style="color:var(--primary);">8</span>
    </div>
    <div class="ob-stat-item">
      <span class="ob-stat-label">配送中</span>
      <span class="ob-stat-value" style="color:#52c41a;">12</span>
    </div>
    <div class="ob-stat-item">
      <span class="ob-stat-label">已完成</span>
      <span class="ob-stat-value">103</span>
    </div>
  </div>

  <!-- Kanban Board -->
  <div class="ob-board">

    <!-- Column: 待接单 -->
    <div class="ob-column">
      <div class="ob-col-hd pending">
        <span>待接单</span>
        <span class="ob-col-count">3</span>
      </div>
      <div class="ob-col-body">

        <!-- Order 1 -->
        <div class="ob-order border-orange pulse">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212001</span>
            <span class="g-tag g-tag-blue">外卖</span>
            <span class="ob-order-time">3分钟前</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>张** 138****6789</span>
            </div>
            <div class="ob-order-items">宫保鸡丁x1, 米饭x1 等3件</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;68.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
            <button class="g-btn g-btn-sm">拒单</button>
          </div>
        </div>

        <!-- Order 2 -->
        <div class="ob-order border-orange pulse">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212002</span>
            <span class="g-tag g-tag-green">自提</span>
            <span class="ob-tag-reserve"><i data-lucide="clock" style="width:11px;height:11px;"></i>预约 18:00</span>
            <span class="ob-order-time">5分钟前</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>李** 159****3210</span>
            </div>
            <div class="ob-order-items">麻辣香锅(大份)x1, 可乐x2</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;95.50</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
            <button class="g-btn g-btn-sm">拒单</button>
          </div>
        </div>

        <!-- Order 3 -->
        <div class="ob-order border-orange pulse">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212003</span>
            <span class="g-tag g-tag-orange">堂食</span>
            <span class="ob-order-time">1分钟前</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>王** (桌号 B5)</span>
            </div>
            <div class="ob-order-items">鱼香肉丝x1, 蛋炒饭x2, 紫菜蛋花汤x1</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;52.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">接单</button>
            <button class="g-btn g-btn-sm">拒单</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Column: 制作中 -->
    <div class="ob-column">
      <div class="ob-col-hd making">
        <span>制作中</span>
        <span class="ob-col-count">3</span>
      </div>
      <div class="ob-col-body">

        <!-- Order 4 -->
        <div class="ob-order border-blue">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212004</span>
            <span class="g-tag g-tag-blue">外卖</span>
            <span class="ob-order-time">12:08 接单</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-status-line">已接单 5分钟</div>
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>赵** 136****8877</span>
            </div>
            <div class="ob-order-items">红烧牛肉面x2, 凉拌黄瓜x1</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;76.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
          </div>
        </div>

        <!-- Order 5 -->
        <div class="ob-order border-blue">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212005</span>
            <span class="g-tag g-tag-green">自提</span>
            <span class="ob-order-time">12:02 接单</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-status-line">已接单 11分钟</div>
            <span class="ob-tag-urge"><i data-lucide="alert-circle" style="width:11px;height:11px;"></i>顾客催单</span>
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>孙** 177****4455</span>
            </div>
            <div class="ob-order-items">烤鸭套餐x1, 酸梅汤x2 等5件</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;138.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
          </div>
        </div>

        <!-- Order 6 -->
        <div class="ob-order border-blue">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212006</span>
            <span class="g-tag g-tag-orange">堂食</span>
            <span class="ob-order-time">12:10 接单</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-status-line">已接单 3分钟</div>
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>周** (桌号 A1)</span>
            </div>
            <div class="ob-order-items">水煮鱼x1, 米饭x3</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;89.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">出餐完成</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Column: 配送/取餐中 -->
    <div class="ob-column">
      <div class="ob-col-hd delivering">
        <span>配送/取餐中</span>
        <span class="ob-col-count">2</span>
      </div>
      <div class="ob-col-body">

        <!-- Order 7 - 外卖配送 -->
        <div class="ob-order border-green">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212007</span>
            <span class="g-tag g-tag-blue">外卖</span>
            <span class="ob-order-time">11:50 出餐</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-status-line green">配送中</div>
            <div class="ob-order-rider">
              <i data-lucide="bike" style="width:14px;height:14px;"></i>
              <span>骑手: 李师傅 138****5678</span>
            </div>
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>陈** 150****9900</span>
            </div>
            <div class="ob-order-items">黄焖鸡米饭x1, 加辣 等2件</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;35.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">确认送达</button>
          </div>
        </div>

        <!-- Order 8 - 自提 -->
        <div class="ob-order border-green">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212008</span>
            <span class="g-tag g-tag-green">自提</span>
            <span class="ob-order-time">11:55 出餐</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-status-line green">等待取餐</div>
            <div class="ob-order-pickup">
              <i data-lucide="hash" style="width:14px;height:14px;"></i>
              <span>取餐码: <strong style="font-size:16px;color:var(--g-text);">A088</strong></span>
            </div>
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>吴** 133****2211</span>
            </div>
            <div class="ob-order-items">炸鸡桶x1, 薯条x2, 可乐x2</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;79.00</div>
          </div>
          <div class="ob-order-ft">
            <button class="g-btn g-btn-primary g-btn-sm">确认取餐</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Column: 已完成 -->
    <div class="ob-column">
      <div class="ob-col-hd done">
        <span>已完成</span>
        <span class="ob-col-count">103</span>
      </div>
      <div class="ob-col-body">

        <!-- Order 9 -->
        <div class="ob-order border-gray dimmed">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212009</span>
            <span class="g-tag g-tag-blue">外卖</span>
            <span class="ob-order-time">12:35 完成</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>刘** 186****7766</span>
            </div>
            <div class="ob-order-items">麻婆豆腐x1, 米饭x1</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;32.00</div>
          </div>
          <div class="ob-order-ft">
            <a class="g-action">查看详情</a>
          </div>
        </div>

        <!-- Order 10 -->
        <div class="ob-order border-gray dimmed">
          <div class="ob-order-hd">
            <span class="ob-order-no">#20250212010</span>
            <span class="g-tag g-tag-orange">堂食</span>
            <span class="ob-order-time">12:20 完成</span>
          </div>
          <div class="ob-order-info">
            <div class="ob-order-info-row">
              <i data-lucide="user"></i>
              <span>杨** (桌号 A3)</span>
            </div>
            <div class="ob-order-items">剁椒鱼头x1, 蒜蓉西兰花x1, 米饭x2</div>
            <div class="ob-order-total"><span class="ob-order-total-label">实付</span>&yen;118.00</div>
          </div>
          <div class="ob-order-ft">
            <a class="g-action">查看详情</a>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<script>
  /* 渠道筛选切换 */
  function filterObChannel(el) {
    el.parentElement.querySelectorAll('.ob-channel').forEach(function(c) {
      c.classList.remove('active');
    });
    el.classList.add('active');
  }

  /* 刷新看板（原型占位） */
  function refreshBoard() {
    // 原型演示，无真实刷新逻辑
  }

  /* 初始化 Lucide 图标 */
  if (typeof lucide !== 'undefined') {
    lucide.createIcons();
  }
</script>