From 9316422ef185637a4fdc9156226bcf7e92336383 Mon Sep 17 00:00:00 2001
From: "yinzhou.ma" <yinzhou.ma@clickzetta.com>
Date: Thu, 16 Jul 2026 23:01:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=8C=E7=AB=AF=E5=8F=A3(=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B580/=E5=90=8E=E5=8F=B016888)=20+=20WebSocket=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=20+=20=E5=B1=95=E7=A4=BA=E6=97=B6=E9=97=B4=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore         |   6 ++
 data/sqlite.db     | Bin 24576 -> 0 bytes
 deploy.sh          |   5 +-
 public/index.html  | 198 ++++++++++++++++++++++++++-------------------
 public/js/login.js |   2 +-
 server.js          |   8 +-
 start.sh           |  14 ++--
 7 files changed, 135 insertions(+), 98 deletions(-)
 create mode 100644 .gitignore
 delete mode 100644 data/sqlite.db

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..639a0c7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+data/
+uploads/
+logs/
+*.db
+.DS_Store
diff --git a/data/sqlite.db b/data/sqlite.db
deleted file mode 100644
index 5b1ff59fbe01bab7c7b883b99b4f840d582e25df..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 24576
zcmeI)O>YuG7zgl~LaFo(V`2#LGA9e6ZFq^)G#W)+O(Ufhw@G_2o0T14bb*##to7zw
z;}`H~;`i`Nc=QXHo;-4Qb{8nS6^$>K*8c={m*Lr+XMPVH1_%!yl!VP$t=(zrHp`Rq
zgi>;oF+xbBf0sMAh2%EeKX!I><apd+ge)JX=4RiM$(bIR|2SWs{V>y;ZHx;?KLj8E
z0SG_<0uX=z1R(Iw1@^*I@kD~Yyl(4{O<rxcYNGCKCvR7jqN*^pc&nr^ua70C*+_fJ
z516WKt8BBfwqC64u=~o+qA%i^Zg#mFGwe>KCnND22}(rE;Loi+Q!Y9*y=%AK$C@{g
zmi6||!sDDX>DS94H_^itH&M~l>)i6TVPB$NUm#Iou(h(P+*2x}sj}jhy0KQ4r>`qz
z)t`91)9&tSBj=SjR94<9mHc5fVe*#V^rpyu9MkTIx@hU9HVpJ%!xAs}Fugm<-QreB
zWf_0WzA)^@iJ;uoKv;u|dc*#8oXlBP`xs@AI2#O~^$%a|aNXvHCf9{-y$4}QLw4Ju
z$&(AM_WnXDbzJ4miAX%1raNxA`c=00UYED3Jn%5&D`4Qsq@%Vd&rH2~MBSIb+l%fs
z-3nRWcEWcBukWv40>g5RsjDHZT~j~MEaz=wSVQ#_nE61JepkP{>o9AM^Y}pmWBftI
z=H%Oq#=a1FLxTVWAOHafKmY;|fB*y_009U<;FJkmrc>k+jfV4I-yI%(dXv5OWczb9
zm&p~DGAm2j0?X!B^M%zbS#SN{BeC8on;_DK00bZa0SG_<0uX=z1Rwwb2teTH0#O=D
zM7<wOIO~7;qkl9AKmY;|fB*y_009U<00Izz00hpkfcO3X5s4k0;Yng@5P$##AOHaf
zKmY;|fB*y_0D=EQAWlQ+cuoGFL$|}V{$CN)bkpL~a{e^-jmR4s1Rwwb2tWV=5P$##
VAOHafKmY<~LEu6t9SwX4@Ev69KJEYj

diff --git a/deploy.sh b/deploy.sh
index 4f3758f..979740d 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -107,9 +107,8 @@ start_server() {
     echo "========================================="
     echo ""
     echo "访问地址:"
-    echo "  首页:   http://localhost:3000"
-    echo "  登录:   http://localhost:3000/login"
-    echo "  后台:   http://localhost:3000/admin"
+    echo "  首页:   http://localhost:80"
+    echo "  后台:   http://localhost:16888"
     echo ""
     echo "默认账号: admin / admin123"
     echo ""
diff --git a/public/index.html b/public/index.html
index af86529..7d41efa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
\ No newline at end of file
+</html>
diff --git a/public/js/login.js b/public/js/login.js
index 3b6b973..64462e6 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', function() {
             
             if (data.success) {
                 localStorage.setItem('token', data.token);
-                window.location.href = '/admin';
+                window.location.href = '/';
             } else {
                 errorDiv.textContent = data.error;
                 errorDiv.style.display = 'block';
diff --git a/server.js b/server.js
index 596d061..645b685 100644
--- a/server.js
+++ b/server.js
@@ -202,9 +202,15 @@ wss.on('connection', (ws) => {
 const adminApp = express();
 adminApp.use(express.json());
 adminApp.use(express.urlencoded({ extended: true }));
-adminApp.use(express.static(path.join(__dirname, 'public')));
 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 token = req.headers.authorization?.split(' ')[1];
     if (!token || token !== 'admin-token') return res.status(401).json({ error: '未授权' });
diff --git a/start.sh b/start.sh
index ac899a1..8ed656b 100755
--- a/start.sh
+++ b/start.sh
@@ -1,13 +1,9 @@
 #!/bin/bash
 
-# 后台启动脚本
-
 cd "$(dirname "$0")"
 
-# 创建必要目录
 mkdir -p data uploads logs
 
-# 停止已运行的进程
 if [ -f server.pid ]; then
     PID=$(cat server.pid)
     if ps -p $PID > /dev/null 2>&1; then
@@ -18,20 +14,22 @@ if [ -f server.pid ]; then
     rm -f server.pid
 fi
 
-# 启动服务
 echo "启动服务器..."
 nohup node server.js > logs/server.log 2>&1 &
 echo $! > server.pid
 
+sleep 1
+
+HOST=$(hostname -I 2>/dev/null | awk '{print $1}' || echo "localhost")
+
 echo ""
 echo "========================================="
 echo "  服务器已启动"
 echo "========================================="
 echo ""
 echo "访问地址:"
-echo "  首页:   http://38.55.107.61:3000"
-echo "  登录:   http://38.55.107.61:3000/login"
-echo "  后台:   http://38.55.107.61:3000/admin"
+echo "  首页:   http://${HOST}:80"
+echo "  后台:   http://${HOST}:16888"
 echo ""
 echo "默认账号: admin / admin123"
 echo ""