msumshk/TakeoutSaaS.Prototypes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init project with pages and index

Browse Source
This commit is contained in:
MSuMshk
2026-02-15 22:50:30 +08:00
commit f407288701
79 changed files with 25642 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

662
pages/order-board.html Normal file
View File

@@ -0,0 +1,662 @@
<!-- 订单大厅 - 实时看板 -->
<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>