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
.gitignore
+6
View File
@@ -0,0 +1,6 @@
node_modules/
data/
uploads/
logs/
*.db
.DS_Store
data/sqlite.db
BIN
View File
Binary file not shown.
deploy.sh
+2 -3
View File
@@ -107,9 +107,8 @@ start_server() {
echo "=========================================" echo "========================================="
echo "" echo ""
echo "访问地址:" echo "访问地址:"
echo " 首页: http://localhost:3000" echo " 首页: http://localhost:80"
echo " 登录: http://localhost:3000/login" echo " 后台: http://localhost:16888"
echo " 后台: http://localhost:3000/admin"
echo "" echo ""
echo "默认账号: admin / admin123" echo "默认账号: admin / admin123"
echo "" echo ""
public/index.html
+101 -73
View File
@@ -16,30 +16,19 @@
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
position: relative;
} }
.user-icon { .content { padding: 30px; }
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;
}
.user-icon:hover { .group-label {
background: #e0e0e0; text-align: center;
margin-bottom: 20px;
font-size: 16px;
color: #333;
} }
.group-label .countdown {
.content { color: #1890ff;
padding: 30px; font-weight: 500;
} }
.image-grid { .image-grid {
@@ -49,15 +38,12 @@
} }
.image-item { .image-item {
width: 140px; width: 140px; height: 140px;
height: 140px;
background: #e8e8e8; background: #e8e8e8;
flex-shrink: 0; flex-shrink: 0;
} }
.image-item img { .image-item img {
width: 100%; width: 100%; height: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
@@ -67,6 +53,21 @@
color: #999; color: #999;
padding: 80px 0; 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> </style>
</head> </head>
<body> <body>
@@ -74,60 +75,77 @@
首页 首页
</div> </div>
<div class="content"> <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="image-grid" id="imageGrid"></div>
<div class="empty" id="empty">暂无图片</div> <div class="empty" id="empty">暂无图片</div>
<div class="indicator" id="indicator"></div>
</div> </div>
<script> <script>
let currentGroupIndex = 0; let ws;
let groups = []; let countdownTimer = null;
let timer = null; let remaining = 0;
function checkLogin() { function connectWS() {
if (!localStorage.getItem('token')) { const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
window.location.href = '/login'; ws = new WebSocket(protocol + '//' + location.host);
return false;
} ws.onmessage = function(e) {
return true; 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); function renderState(state) {
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];
const grid = document.getElementById('imageGrid'); 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 = ''; grid.innerHTML = '';
state.images.forEach(function(img) {
group.images.forEach(img => { var div = document.createElement('div');
const div = document.createElement('div');
div.className = 'image-item'; div.className = 'image-item';
var imgEl = document.createElement('img');
const imgEl = document.createElement('img');
imgEl.src = '/uploads/' + img.filename; imgEl.src = '/uploads/' + img.filename;
imgEl.loading = 'lazy'; imgEl.loading = 'lazy';
var pressTimer;
let pressTimer;
imgEl.addEventListener('touchstart', function() { imgEl.addEventListener('touchstart', function() {
pressTimer = setTimeout(function() { pressTimer = setTimeout(function() {
saveImage('/uploads/' + img.filename, img.original_name); saveImage('/uploads/' + img.filename, img.original_name);
@@ -135,19 +153,27 @@
}); });
imgEl.addEventListener('touchend', function() { clearTimeout(pressTimer); }); imgEl.addEventListener('touchend', function() { clearTimeout(pressTimer); });
imgEl.addEventListener('touchmove', function() { clearTimeout(pressTimer); }); imgEl.addEventListener('touchmove', function() { clearTimeout(pressTimer); });
div.appendChild(imgEl); div.appendChild(imgEl);
grid.appendChild(div); 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) { function updateCountdownDisplay() {
if (timer) clearInterval(timer); var el = document.getElementById('countdown');
timer = setInterval(function() { if (remaining < 0) {
showGroup(currentGroupIndex + 1); el.textContent = '持续展示';
}, seconds * 1000); } else if (remaining > 0) {
el.textContent = remaining + '秒';
} else {
el.textContent = '';
}
} }
function saveImage(url, name) { function saveImage(url, name) {
@@ -156,6 +182,8 @@
a.download = name || 'image.jpg'; a.download = name || 'image.jpg';
a.click(); a.click();
} }
connectWS();
</script> </script>
</body> </body>
</html> </html>
public/js/login.js
+1 -1
View File
@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (data.success) { if (data.success) {
localStorage.setItem('token', data.token); localStorage.setItem('token', data.token);
window.location.href = '/admin'; window.location.href = '/';
} else { } else {
errorDiv.textContent = data.error; errorDiv.textContent = data.error;
errorDiv.style.display = 'block'; errorDiv.style.display = 'block';
server.js
+7 -1
View File
@@ -202,9 +202,15 @@ wss.on('connection', (ws) => {
const adminApp = express(); const adminApp = express();
adminApp.use(express.json()); adminApp.use(express.json());
adminApp.use(express.urlencoded({ extended: true })); adminApp.use(express.urlencoded({ extended: true }));
adminApp.use(express.static(path.join(__dirname, 'public')));
adminApp.use('/uploads', express.static(path.join(__dirname, 'uploads'))); adminApp.use('/uploads', express.static(path.join(__dirname, 'uploads')));
// 路由 - 后台直接在根路径，未登录跳转登录页
adminApp.get('/login', (req, res) => res.sendFile(path.join(__dirname, 'public', 'login.html')));
adminApp.get('/', (req, res) => res.sendFile(path.join(__dirname, 'public', 'admin.html')));
// 静态文件（不自动serve index.html）
adminApp.use(express.static(path.join(__dirname, 'public'), { index: false }));
const authMiddleware = (req, res, next) => { const authMiddleware = (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1]; const token = req.headers.authorization?.split(' ')[1];
if (!token || token !== 'admin-token') return res.status(401).json({ error: '未授权' }); if (!token || token !== 'admin-token') return res.status(401).json({ error: '未授权' });
start.sh
+6 -8
View File
@@ -1,13 +1,9 @@
#!/bin/bash #!/bin/bash
# 后台启动脚本
cd "$(dirname "$0")" cd "$(dirname "$0")"
# 创建必要目录
mkdir -p data uploads logs mkdir -p data uploads logs
# 停止已运行的进程
if [ -f server.pid ]; then if [ -f server.pid ]; then
PID=$(cat server.pid) PID=$(cat server.pid)
if ps -p $PID > /dev/null 2>&1; then if ps -p $PID > /dev/null 2>&1; then
@@ -18,20 +14,22 @@ if [ -f server.pid ]; then
rm -f server.pid rm -f server.pid
fi fi
# 启动服务
echo "启动服务器..." echo "启动服务器..."
nohup node server.js > logs/server.log 2>&1 & nohup node server.js > logs/server.log 2>&1 &
echo $! > server.pid echo $! > server.pid
sleep 1
HOST=$(hostname -I 2>/dev/null | awk '{print $1}' || echo "localhost")
echo "" echo ""
echo "=========================================" echo "========================================="
echo " 服务器已启动" echo " 服务器已启动"
echo "=========================================" echo "========================================="
echo "" echo ""
echo "访问地址:" echo "访问地址:"
echo " 首页: http://38.55.107.61:3000" echo " 首页: http://${HOST}:80"
echo " 登录: http://38.55.107.61:3000/login" echo " 后台: http://${HOST}:16888"
echo " 后台: http://38.55.107.61:3000/admin"
echo "" echo ""
echo "默认账号: admin / admin123" echo "默认账号: admin / admin123"
echo "" echo ""