TakeoutSaaS.Prototypes/Tenant-Admin-UI-Prototype/pages/msg-center.html

<!-- 消息中心 -->
<style>
  .msg-page { display:flex; flex-direction:column; gap:16px; }
  .msg-topbar { display:flex; align-items:center; justify-content:space-between; }
  .msg-list { display:flex; flex-direction:column; gap:10px; }
  .msg-item {
    display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
    background:#fff; border-radius:var(--g-radius); box-shadow:var(--g-shadow-sm);
    transition:var(--g-transition); cursor:pointer;
  }
  .msg-item:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
  .msg-icon {
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; color:#fff;
  }
  .msg-icon svg { width:18px; height:18px; }
  .msg-icon.msg-sys { background:var(--primary); }
  .msg-icon.msg-order { background:var(--g-success); }
  .msg-icon.msg-promo { background:var(--g-warning); }
  .msg-icon.msg-warn { background:var(--g-danger); }
  .msg-body { flex:1; min-width:0; }
  .msg-title-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .msg-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; }
  .msg-title { font-size:14px; font-weight:600; color:var(--g-text); }
  .msg-summary {
    font-size:13px; color:var(--g-text-muted); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; line-height:1.6;
  }
  .msg-time { font-size:12px; color:var(--g-text-muted); white-space:nowrap; flex-shrink:0; padding-top:2px; }
  .msg-load-more {
    display:flex; justify-content:center; padding:14px 0;
  }
  .msg-load-btn {
    background:none; border:1px dashed var(--g-border); border-radius:var(--g-radius-sm);
    padding:8px 32px; font-size:13px; color:var(--g-text-secondary); cursor:pointer;
    transition:var(--g-transition);
  }
  .msg-load-btn:hover { border-color:var(--primary); color:var(--primary); }
</style>

<div class="msg-page">
  <!-- 顶部栏 -->
  <div class="msg-topbar">
    <div class="g-seg">
      <div class="g-seg-item active" onclick="msgSwitchTab(event)">全部消息</div>
      <div class="g-seg-item" onclick="msgSwitchTab(event)">系统通知</div>
      <div class="g-seg-item" onclick="msgSwitchTab(event)">订单消息</div>
      <div class="g-seg-item" onclick="msgSwitchTab(event)">营销提醒</div>
    </div>
    <button class="g-btn g-btn-sm"><i data-lucide="check-check" style="width:14px;height:14px;margin-right:4px;"></i>全部已读</button>
  </div>

  <!-- 消息列表 -->
  <div class="msg-list">
    <!-- 未读 - 系统通知 -->
    <div class="msg-item">
      <div class="msg-icon msg-sys"><i data-lucide="monitor"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-dot"></span><span class="msg-title">系统将于今晚 23:00 进行维护升级</span></div>
        <div class="msg-summary">预计维护时间 2 小时，届时部分功能可能无法正常使用，请提前做好准备。</div>
      </div>
      <div class="msg-time">5分钟前</div>
    </div>
    <!-- 未读 - 订单消息 -->
    <div class="msg-item">
      <div class="msg-icon msg-order"><i data-lucide="shopping-bag"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-dot"></span><span class="msg-title">新订单 #ORD20260213089 待接单</span></div>
        <div class="msg-summary">用户下单 3 件商品，订单金额 ¥86.50，请尽快处理。</div>
      </div>
      <div class="msg-time">12分钟前</div>
    </div>
    <!-- 未读 - 预警 -->
    <div class="msg-item">
      <div class="msg-icon msg-warn"><i data-lucide="alert-triangle"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-dot"></span><span class="msg-title">食品经营许可证将于30天后到期</span></div>
        <div class="msg-summary">请及时续办相关资质证件，避免影响正常经营。</div>
      </div>
      <div class="msg-time">1小时前</div>
    </div>
    <!-- 已读 - 系统通知 -->
    <div class="msg-item">
      <div class="msg-icon msg-sys"><i data-lucide="monitor"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-title">v2.3.1 版本更新说明</span></div>
        <div class="msg-summary">新增库存预警功能、优化订单打印模板、修复已知问题若干。</div>
      </div>
      <div class="msg-time">3小时前</div>
    </div>
    <!-- 已读 - 订单消息 -->
    <div class="msg-item">
      <div class="msg-icon msg-order"><i data-lucide="shopping-bag"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-title">退款申请 #RF20260213002 待处理</span></div>
        <div class="msg-summary">用户申请退款 ¥32.00，原因：商品与描述不符，请及时审核。</div>
      </div>
      <div class="msg-time">5小时前</div>
    </div>
    <!-- 已读 - 营销提醒 -->
    <div class="msg-item">
      <div class="msg-icon msg-promo"><i data-lucide="megaphone"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-title">优惠券「满50减10」今日到期</span></div>
        <div class="msg-summary">该优惠券已发放 326 张，核销率 41%，到期后将自动失效。</div>
      </div>
      <div class="msg-time">昨天</div>
    </div>
    <!-- 已读 - 系统通知 -->
    <div class="msg-item">
      <div class="msg-icon msg-sys"><i data-lucide="monitor"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-title">2月账单已生成，请查看</span></div>
        <div class="msg-summary">2026年2月平台服务费账单已出，合计 ¥1,280.00，请前往财务中心查看。</div>
      </div>
      <div class="msg-time">2天前</div>
    </div>
    <!-- 已读 - 订单消息 -->
    <div class="msg-item">
      <div class="msg-icon msg-order"><i data-lucide="shopping-bag"></i></div>
      <div class="msg-body">
        <div class="msg-title-row"><span class="msg-title">订单 #ORD20260211045 客户已评价</span></div>
        <div class="msg-summary">客户给出 5 星好评："味道很好，配送也快，下次还会再点！"</div>
      </div>
      <div class="msg-time">3天前</div>
    </div>
  </div>

  <!-- 加载更多 -->
  <div class="msg-load-more">
    <button class="msg-load-btn">加载更多</button>
  </div>
</div>

<script>
function msgSwitchTab(e) {
  var items = e.currentTarget.parentElement.querySelectorAll('.g-seg-item');
  items.forEach(function(i){ i.classList.remove('active'); });
  e.currentTarget.classList.add('active');
}
if(typeof lucide!=='undefined'){lucide.createIcons();}
</script>