164 lines
6.2 KiB
HTML
164 lines
6.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>{% block title %}桌游厅点单系统管理后台{% endblock %}</title>
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.nav-link {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.container,
|
||
.container-lg,
|
||
.container-md,
|
||
.container-sm,
|
||
.container-xl {
|
||
max-width: 2000px !important;
|
||
}
|
||
}
|
||
|
||
/* 添加全局通知样式 */
|
||
.global-notification {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background-color: #ffc107;
|
||
color: #333;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||
z-index: 9999;
|
||
transition: bottom 0.3s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
|
||
<a class="navbar-brand" href="{{ url_for('dashboard.index') }}">桌游厅点单系统</a>
|
||
<div class="collapse navbar-collapse">
|
||
<ul class="navbar-nav mr-auto">
|
||
{% if session.token %}
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('dashboard.index') }}">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('users.list_users') }}">用户管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('orders.index') }}">订单管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('games.list_games') }}">游戏管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('tables.list_tables') }}">桌台管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('games.manage_tags') }}">游戏标签</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('groups.manage_groups') }}">拼团管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('announcements.manage_announcements') }}">公告管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('coupons.list_coupons') }}">优惠券</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('messages.list_messages') }}">留言管理</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('strategies.list_strategies') }}">策略管理</a>
|
||
</li>
|
||
<!-- 修改导航项为单个入口 -->
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="{{ url_for('config.manage_config') }}">
|
||
<i class="fas fa-cog"></i> 系统配置
|
||
</a>
|
||
</li>
|
||
|
||
{% endif %}
|
||
</ul>
|
||
{% if session.token %}
|
||
<span class="navbar-text">
|
||
<a class="btn btn-outline-danger" href="{{ url_for('auth.logout') }}">退出登录</a>
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
</nav>
|
||
<div class="container">
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
{% for category, message in messages %}
|
||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||
{{ message }}
|
||
<button aria-label="关闭" class="close" data-dismiss="alert" type="button">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
{% block content %}{% endblock %}
|
||
</div>
|
||
<!-- jQuery 和 Bootstrap JS -->
|
||
<!-- 1) 替换为完整版本的 jQuery，而非 slim -->
|
||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script>
|
||
// 建立全局WebSocket连接
|
||
const adminWS = new WebSocket(`ws://127.0.0.1:8000/bell/ws/admin`); // 修复WebSocket地址
|
||
|
||
// 处理接收到的消息
|
||
adminWS.onmessage = function (event) {
|
||
const tableNumber = event.data;
|
||
// 显示通知
|
||
if (Notification.permission === "granted") {
|
||
new Notification("用户呼叫", {
|
||
body: `桌号 ${tableNumber} 需要服务`,
|
||
icon: "/static/images/notification.png"
|
||
});
|
||
}
|
||
|
||
// 或在页面右下角显示浮动通知
|
||
showGlobalNotification(tableNumber);
|
||
};
|
||
|
||
function showGlobalNotification(tableNumber) {
|
||
const notifications = document.querySelectorAll('.global-notification');
|
||
const newNotification = document.createElement('div');
|
||
newNotification.className = 'global-notification';
|
||
newNotification.innerHTML = `桌号 ${tableNumber} 需要服务！`;
|
||
document.body.appendChild(newNotification);
|
||
|
||
// 旧的通知上移
|
||
notifications.forEach((notification, index) => {
|
||
const rect = notification.getBoundingClientRect();
|
||
const newBottom = parseFloat(getComputedStyle(notification).bottom) + rect.height + 10;
|
||
notification.style.bottom = `${newBottom}px`;
|
||
});
|
||
|
||
setTimeout(() => {
|
||
newNotification.remove();
|
||
// 重新调整剩余通知的位置
|
||
const remainingNotifications = document.querySelectorAll('.global-notification');
|
||
remainingNotifications.forEach((notification, index) => {
|
||
const newBottom = 20 + (remainingNotifications.length - 1 - index) * (notification.offsetHeight + 10);
|
||
notification.style.bottom = `${newBottom}px`;
|
||
});
|
||
}, 10000);
|
||
}
|
||
</script>
|
||
<!-- 2) 新增 scripts block，供子模板插入自定义脚本 -->
|
||
{% block scripts %}{% endblock %}
|
||
</body>
|
||
</html> |