pic/showpic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 双端口(首页80/后台16888) + WebSocket轮播 + 展示时间限制

Browse Source
This commit is contained in:
yinzhou.ma
2026-07-16 23:01:43 +08:00
parent 42aeb84c64
commit 9316422ef1
7 changed files with 135 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+113 -85
View File
@@ -7,7 +7,7 @@
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; }
.header {
display: flex;
justify-content: center;
@@ -16,57 +16,58 @@
font-size: 18px;
font-weight: 500;
border-bottom: 1px solid #eee;
position: relative;
}
.user-icon {
position: absolute;
right: 20px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
color: #666;
.content { padding: 30px; }
.group-label {
text-align: center;
margin-bottom: 20px;
font-size: 16px;
color: #333;
}
.user-icon:hover {
background: #e0e0e0;
.group-label .countdown {
color: #1890ff;
font-weight: 500;
}
.content {
padding: 30px;
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.image-item {
width: 140px;
height: 140px;
width: 140px; height: 140px;
background: #e8e8e8;
flex-shrink: 0;
}
.image-item img {
width: 100%;
height: 100%;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.empty {
text-align: center;
color: #999;
padding: 80px 0;
}
.indicator {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.indicator .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #ddd;
}
.indicator .dot.active {
background: #1890ff;
}
</style>
</head>
<body>
@@ -74,60 +75,77 @@
首页
</div>
<div class="content">
<div id="groupLabel" class="group-label" style="display:none;">
<span id="groupName"></span>
<span id="countdown" class="countdown"></span>
</div>
<div class="image-grid" id="imageGrid"></div>
<div class="empty" id="empty">暂无图片</div>
<div class="indicator" id="indicator"></div>
</div>
<script>
let currentGroupIndex = 0;
let groups = [];
let timer = null;
function checkLogin() {
if (!localStorage.getItem('token')) {
window.location.href = '/login';
return false;
}
return true;
let ws;
let countdownTimer = null;
let remaining = 0;
function connectWS() {
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
ws = new WebSocket(protocol + '//' + location.host);
ws.onmessage = function(e) {
try {
const data = JSON.parse(e.data);
if (data.type === 'state') renderState(data);
} catch(err) {}
};
ws.onclose = function() {
setTimeout(connectWS, 3000);
};
}
document.addEventListener('DOMContentLoaded', loadDisplay);
async function loadDisplay() {
try {
const res = await fetch('/api/display');
const data = await res.json();
if (!data.enabled || data.groups.length === 0) {
document.getElementById('empty').style.display = 'block';
return;
}
document.getElementById('empty').style.display = 'none';
groups = data.groups;
showGroup(0);
} catch (e) {
console.error(e);
}
}
function showGroup(index) {
if (index >= groups.length) index = 0;
currentGroupIndex = index;
const group = groups[index];
function renderState(state) {
const grid = document.getElementById('imageGrid');
const empty = document.getElementById('empty');
const groupLabel = document.getElementById('groupLabel');
const indicator = document.getElementById('indicator');
if (!state.playing || state.images.length === 0) {
grid.innerHTML = '';
empty.style.display = 'block';
groupLabel.style.display = 'none';
indicator.innerHTML = '';
if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
return;
}
empty.style.display = 'none';
groupLabel.style.display = 'block';
document.getElementById('groupName').textContent = state.group_name + ' ';
remaining = state.remaining;
updateCountdownDisplay();
if (countdownTimer) clearInterval(countdownTimer);
if (remaining > 0) {
countdownTimer = setInterval(function() {
remaining--;
if (remaining <= 0) {
clearInterval(countdownTimer);
countdownTimer = null;
}
updateCountdownDisplay();
}, 1000);
}
grid.innerHTML = '';
group.images.forEach(img => {
const div = document.createElement('div');
state.images.forEach(function(img) {
var div = document.createElement('div');
div.className = 'image-item';
const imgEl = document.createElement('img');
var imgEl = document.createElement('img');
imgEl.src = '/uploads/' + img.filename;
imgEl.loading = 'lazy';
let pressTimer;
var pressTimer;
imgEl.addEventListener('touchstart', function() {
pressTimer = setTimeout(function() {
saveImage('/uploads/' + img.filename, img.original_name);
@@ -135,27 +153,37 @@
});
imgEl.addEventListener('touchend', function() { clearTimeout(pressTimer); });
imgEl.addEventListener('touchmove', function() { clearTimeout(pressTimer); });
div.appendChild(imgEl);
grid.appendChild(div);
});
startTimer(group.display_seconds);
indicator.innerHTML = '';
for (var i = 0; i < state.total; i++) {
var dot = document.createElement('div');
dot.className = 'dot' + (i === state.current_index ? ' active' : '');
indicator.appendChild(dot);
}
}
function startTimer(seconds) {
if (timer) clearInterval(timer);
timer = setInterval(function() {
showGroup(currentGroupIndex + 1);
}, seconds * 1000);
function updateCountdownDisplay() {
var el = document.getElementById('countdown');
if (remaining < 0) {
el.textContent = '持续展示';
} else if (remaining > 0) {
el.textContent = remaining + '秒';
} else {
el.textContent = '';
}
}
function saveImage(url, name) {
var a = document.createElement('a');
a.href = url;
a.download = name || 'image.jpg';
a.click();
}
connectWS();
</script>
</body>
</html>
</html>