feat: 初始化项目

2026-03-07 19:37:38 +08:00
parent ea760bb71c
commit 382aa955ef
13 changed files with 447 additions and 166 deletions
--- a/index.html
+++ b/index.html
@@ -2,11 +2,12 @@
 <html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>全景查看</title>
  <link rel="stylesheet" href="lib/pannellum.css">
  <style>
-    html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
+    html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .pano-root { flex: 1 1 0%; position: relative; width: 100%; height: 100%; }
    #krp { position: absolute; inset: 0; z-index: 0; }
    #player_krp {
@@ -23,14 +24,17 @@
    }
    .load-error a { color: #08c; }

-    /* 弹幕层 */
+    /* 弹幕层：默认不显示，由后端 GET /api/config 的 danmakuEnabled 控制；位置在顶部 */
    #danmaku-wrap {
-      position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+      position: absolute; left: 0; top: 0; width: 100%; height: 22%;
      pointer-events: none; z-index: 5; overflow: hidden;
+      display: none;
    }
+    #danmaku-wrap.danmaku-on { display: block; }
    .danmaku-line {
      position: absolute; white-space: nowrap;
-      font-size: 14px; color: #fff; text-shadow: 0 0 2px #000, 0 1px 4px rgba(0,0,0,.8);
+      font-size: clamp(12px, 3.5vw, 15px); color: #fff;
+      text-shadow: 0 0 2px #000, 0 1px 4px rgba(0,0,0,.8);
      animation: danmaku-scroll 15s linear forwards;
    }
    @keyframes danmaku-scroll {
@@ -39,44 +43,71 @@
    }

    /* 顶部区域 */
-    .topWp { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 10; }
+    .topWp { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 10; padding: env(safe-area-inset-top) 0 0; }
    .topWp > * { pointer-events: auto; }
-    .LeftBtn { position: absolute; left: 0; top: 12px; padding: 0 16px; }
-    .authorPvBox { margin-bottom: 8px; }
-    .Author { color: #fff; text-decoration: none; font-size: 13px; opacity: 1; }
-    .view-stats { color: rgba(255,255,255,.7); font-size: 12px; margin-top: 4px; }
-    .view-stats span { margin-right: 12px; }
+    .LeftBtn {
+      position: absolute; left: 0; top: 12px; padding: 0 12px 0 max(12px, env(safe-area-inset-left));
+      max-width: calc(100vw - 100px);
+    }
+    .authorPvBox { margin-bottom: 6px; }
+    .Author { color: #fff; text-decoration: none; font-size: clamp(12px, 3.2vw, 14px); opacity: 1; }
+    .view-stats {
+      color: rgba(255,255,255,.85); font-size: clamp(11px, 2.8vw, 13px);
+      margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
+    }
+    .view-stats .stat-item { white-space: nowrap; }

-    .RightBtn { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; align-items: center; }
+    .RightBtn {
+      position: absolute; right: max(12px, env(safe-area-inset-right)); top: 12px;
+      display: flex; gap: 6px; align-items: center;
+    }
    .RightBtn .btn-wrap {
      display: flex; flex-direction: column; align-items: center; cursor: pointer;
-      padding: 6px 10px; background: rgba(0,0,0,.3); border-radius: 6px; color: #fff;
-      font-size: 12px; border: none; font-family: inherit;
+      padding: clamp(6px, 2vw, 10px) clamp(8px, 2.5vw, 12px);
+      min-height: 44px; min-width: 44px; box-sizing: border-box;
+      justify-content: center;
+      background: rgba(0,0,0,.3); border-radius: 8px; color: #fff;
+      font-size: clamp(11px, 2.8vw, 13px); border: none; font-family: inherit;
    }
    .RightBtn .btn-wrap:hover { background: rgba(0,0,0,.5); }
    .RightBtn .btn-wrap svg { width: 24px; height: 24px; margin-bottom: 2px; }

    /* 底部区域 */
-    .bottom { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10; pointer-events: none; }
+    .bottom { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10; pointer-events: none; padding: 0 0 env(safe-area-inset-bottom) 0; }
    .bottom > * { pointer-events: auto; }
-    .bottomWp { display: flex; justify-content: flex-end; align-items: center; padding: 12px 16px; }
+    .bottomWp { display: flex; justify-content: flex-end; align-items: center; padding: 10px max(12px, env(safe-area-inset-right)) 10px 12px; gap: 6px; flex-wrap: wrap; }
    .bottom_right .CustomButton {
-      display: inline-flex; flex-direction: column; align-items: center; padding: 8px 12px;
+      display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
+      padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 14px);
+      min-height: 44px; min-width: 44px; box-sizing: border-box;
      background: rgba(0,0,0,.3); border-radius: 8px; color: #fff; cursor: pointer;
-      font-size: 12px; border: 2px solid transparent; margin: 0 4px;
+      font-size: clamp(11px, 2.8vw, 13px); border: 2px solid transparent; margin: 0;
    }
    .bottom_right .CustomButton:hover { background: rgba(0,0,0,.5); }
    .bottom_right .CustomButton.selected { border-color: #fa6400; }
-    .CustomButton .count { font-size: 10px; opacity: .9; margin-top: 2px; }
+    .CustomButton .btn-label { display: block; }
    .safeHeight { height: env(safe-area-inset-bottom, 0); }

+    /* 点赞飘字 */
+    #likeFloatWrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
+    .like-float {
+      position: absolute; left: 50%; bottom: clamp(100px, 25vh, 140px);
+      font-size: clamp(22px, 6vw, 30px); font-weight: bold; color: #ff6b6b;
+      text-shadow: 0 0 8px rgba(255,107,107,.8);
+      animation: like-float-up 0.9s ease-out forwards;
+    }
+    @keyframes like-float-up {
+      0% { transform: translate(-50%, 0) scale(0.8); opacity: 1; }
+      100% { transform: translate(-50%, -80px) scale(1.2); opacity: 0; }
+    }
+
    /* 留言弹窗 */
-    .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
+    .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
    .modal-mask.hide { display: none; }
-    .modal-box { background: #333; color: #fff; border-radius: 12px; padding: 20px; min-width: 280px; max-width: 90vw; }
-    .modal-box h3 { margin: 0 0 12px; font-size: 16px; }
-    .modal-box input, .modal-box textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 10px; border: 1px solid #555; border-radius: 6px; background: #222; color: #fff; font-size: 14px; }
-    .modal-box textarea { min-height: 72px; resize: vertical; }
+    .modal-box { background: #333; color: #fff; border-radius: 12px; padding: clamp(16px, 4vw, 20px); width: 100%; max-width: 360px; box-sizing: border-box; }
+    .modal-box h3 { margin: 0 0 12px; font-size: clamp(15px, 4vw, 17px); }
+    .modal-box input, .modal-box textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #555; border-radius: 8px; background: #222; color: #fff; font-size: 16px; -webkit-appearance: none; }
+    .modal-box textarea { min-height: 80px; resize: vertical; }
    .modal-box .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
    .modal-box .btns button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
    .modal-box .btns .btn-ok { background: #fa6400; color: #fff; }
@@ -104,8 +135,11 @@
            <a class="Author" href="#" target="_blank" rel="noopener" id="authorName">创作者：本地</a>
          </div>
          <div class="view-stats">
-            <span id="watchingNow">0 人在看</span>
-            <span id="viewCount">共 0 次播放</span>
+            <span class="stat-item" id="watchingNow">0 人在看</span>
+            <span class="stat-item" id="viewCount">共 0 次播放</span>
+            <span class="stat-item">赞 <span id="likeCount">0</span></span>
+            <span class="stat-item">分享 <span id="shareCount">0</span></span>
+            <span class="stat-item">留言 <span id="commentCount">0</span></span>
          </div>
        </div>
        <div class="RightBtn">
@@ -119,10 +153,10 @@
      <div class="bottom">
        <div class="bottomWp">
          <div class="bottom_right">
-            <div class="CustomButton" id="btnIntro" title="简介">简介</div>
-            <div class="CustomButton" id="btnShare" title="分享">分享 <span class="count" id="shareCount">0</span></div>
-            <div class="CustomButton" id="btnLike" title="赞">赞 <span class="count" id="likeCount">0</span></div>
-            <div class="CustomButton" id="btnComment" title="留言">留言</div>
+            <div class="CustomButton" id="btnIntro" title="简介"><span class="btn-label">简介</span></div>
+            <div class="CustomButton" id="btnShare" title="分享"><span class="btn-label">分享</span></div>
+            <div class="CustomButton" id="btnLike" title="赞"><span class="btn-label">赞</span></div>
+            <div class="CustomButton" id="btnComment" title="留言"><span class="btn-label">留言</span></div>
          </div>
        </div>
        <div class="safeHeight"></div>
@@ -130,10 +164,21 @@
    </div>
  </div>

+  <div id="likeFloatWrap" aria-hidden="true"></div>
+
+  <div id="introModal" class="modal-mask hide">
+    <div class="modal-box">
+      <h3>简介</h3>
+      <div id="introContent" style="white-space: pre-wrap; max-height: 60vh; overflow: auto; line-height: 1.5;"></div>
+      <div class="btns" style="margin-top: 12px;">
+        <button type="button" class="btn-ok" id="introModalClose">关闭</button>
+      </div>
+    </div>
+  </div>
+
  <div id="commentModal" class="modal-mask hide">
    <div class="modal-box">
      <h3>留言（弹幕）</h3>
-      <input type="text" id="commentNickname" placeholder="昵称（选填）" maxlength="32">
      <textarea id="commentContent" placeholder="说点什么…" maxlength="200"></textarea>
      <div class="btns">
        <button type="button" class="btn-cancel" id="commentCancel">取消</button>
@@ -210,11 +255,30 @@
        var w = document.getElementById('watchingNow');
        if (w) w.textContent = (stats.watchingNow || 0) + ' 人在看';
        var v = document.getElementById('viewCount');
-        if (v) v.textContent = '共 ' + (stats.viewCount || 0) + ' 次播放';
+        if (v) v.textContent = '共 ' + formatNum(stats.viewCount || 0) + ' 次播放';
        var l = document.getElementById('likeCount');
-        if (l) l.textContent = stats.likeCount || 0;
+        if (l) l.textContent = formatNum(stats.likeCount || 0);
        var s = document.getElementById('shareCount');
-        if (s) s.textContent = stats.shareCount || 0;
+        if (s) s.textContent = formatNum(stats.shareCount || 0);
+        var c = document.getElementById('commentCount');
+        if (c) c.textContent = formatNum(stats.commentCount || 0);
+      }
+      function formatNum(n) {
+        n = Number(n);
+        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+        return String(n);
+      }
+      function showLikeFloat() {
+        var wrap = document.getElementById('likeFloatWrap');
+        if (!wrap) return;
+        var el = document.createElement('span');
+        el.className = 'like-float';
+        el.textContent = '+1';
+        wrap.appendChild(el);
+        setTimeout(function() {
+          if (el.parentNode) el.parentNode.removeChild(el);
+        }, 950);
      }

      function fetchStats(cb) {
@@ -268,13 +332,13 @@
        viewerId = null;
      }

-      function addDanmakuLine(text, nickname) {
+      function addDanmakuLine(text) {
        var wrap = document.getElementById('danmaku-wrap');
-        if (!wrap) return;
+        if (!wrap || !wrap.classList.contains('danmaku-on')) return;
        var line = document.createElement('div');
        line.className = 'danmaku-line';
-        line.textContent = (nickname ? nickname + '：' : '') + text;
-        line.style.top = (10 + Math.random() * 75) + '%';
+        line.textContent = text || '';
+        line.style.top = (2 + Math.random() * 16) + '%';
        line.style.animationDuration = (12 + Math.random() * 8) + 's';
        wrap.appendChild(line);
        setTimeout(function() {
@@ -294,8 +358,8 @@
            list.forEach(function(c, i) {
              var line = document.createElement('div');
              line.className = 'danmaku-line';
-              line.textContent = (c.nickname || '游客') + '：' + (c.content || '');
-              line.style.top = (10 + (i % 8) * 10 + Math.random() * 5) + '%';
+              line.textContent = c.content || '';
+              line.style.top = (2 + (i % 6) * 3 + Math.random() * 2) + '%';
              line.style.animationDuration = (14 + (i % 5)) + 's';
              line.style.animationDelay = (i * 0.8) + 's';
              wrap.appendChild(line);
@@ -306,12 +370,24 @@
        xhr.send();
      }

+      function applyBackendConfig(cfg) {
+        var wrap = document.getElementById('danmaku-wrap');
+        if (!wrap) return;
+        if (cfg && cfg.danmakuEnabled === true) {
+          wrap.classList.add('danmaku-on');
+          loadDanmaku();
+        } else {
+          wrap.classList.remove('danmaku-on');
+        }
+      }
+
      function updateUIFromConfig(config) {
        var authorEl = document.getElementById('authorName');
        if (authorEl && config.authorName) {
          authorEl.textContent = config.authorName;
          if (config.authorUrl) authorEl.href = config.authorUrl;
        }
+        introText = (config.intro != null && config.intro !== '') ? String(config.intro) : '';
      }

      function loadFromConfig(cb) {
@@ -339,17 +415,34 @@
        xhr.send();
      }

-      loadFromConfig(function(config) {
-        if (!config) {
-          showError('无法加载 config.json 或图片，请通过 http 访问（如 npm start）。');
-          return;
-        }
-        fetchStats();
-        sendView();
-        sendJoin();
-        loadDanmaku();
-        statsInterval = setInterval(fetchStats, 8000);
-      });
+      function initApp() {
+        loadFromConfig(function(config) {
+          if (!config) {
+            showError('无法加载 config.json 或图片，请通过 http 访问。');
+            return;
+          }
+          fetchStats();
+          sendView();
+          sendJoin();
+          statsInterval = setInterval(fetchStats, 8000);
+        });
+      }
+
+      fetch('api.config.json').catch(function() { return { json: function() { return Promise.resolve({ apiBase: '' }); }; }; })
+        .then(function(r) { return typeof r.json === 'function' ? r.json() : Promise.resolve({ apiBase: '' }); })
+        .then(function(apiConfig) {
+          API = (apiConfig.apiBase || '').replace(/\/$/, '') + '/api';
+          var xhr = new XMLHttpRequest();
+          xhr.open('GET', API + '/config', true);
+          xhr.onload = function() {
+            if (xhr.status === 200) {
+              try { applyBackendConfig(JSON.parse(xhr.responseText)); } catch (e) {}
+            }
+            initApp();
+          };
+          xhr.onerror = function() { initApp(); };
+          xhr.send();
+        });

      window.addEventListener('beforeunload', sendLeave);
      window.addEventListener('pagehide', sendLeave);
@@ -362,8 +455,17 @@
        }
      });

+      var introText = '';
      document.getElementById('btnIntro').addEventListener('click', function() {
-        alert('简介：可在 config.json 中配置 intro 文案。');
+        if (introText) {
+          document.getElementById('introContent').textContent = introText;
+          document.getElementById('introModal').classList.remove('hide');
+        } else {
+          alert('暂无简介。可在 config.json 的 intro 字段中填写。');
+        }
+      });
+      document.getElementById('introModalClose').addEventListener('click', function() {
+        document.getElementById('introModal').classList.add('hide');
      });

      document.getElementById('btnShare').addEventListener('click', function() {
@@ -393,8 +495,7 @@
      }

      document.getElementById('btnLike').addEventListener('click', function() {
-        var btn = this;
-        if (btn.classList.contains('selected')) return;
+        showLikeFloat();
        var xhr = new XMLHttpRequest();
        xhr.open('POST', API + '/like', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
@@ -402,7 +503,6 @@
          if (xhr.status === 200) {
            try {
              var r = JSON.parse(xhr.responseText);
-              btn.classList.add('selected');
              updateStatsUI({ likeCount: r.likeCount });
            } catch (e) {}
          }
@@ -412,11 +512,9 @@

      var modal = document.getElementById('commentModal');
      var commentContent = document.getElementById('commentContent');
-      var commentNickname = document.getElementById('commentNickname');

      document.getElementById('btnComment').addEventListener('click', function() {
        commentContent.value = '';
-        commentNickname.value = localStorage.getItem('pano_nickname') || '';
        modal.classList.remove('hide');
        commentContent.focus();
      });
@@ -427,12 +525,10 @@

      document.getElementById('commentSubmit').addEventListener('click', function() {
        var content = (commentContent.value || '').trim();
-        var nickname = (commentNickname.value || '').trim();
        if (!content) {
          alert('请输入留言内容');
          return;
        }
-        localStorage.setItem('pano_nickname', nickname);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', API + '/comments', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
@@ -441,14 +537,15 @@
          if (xhr.status === 200) {
            try {
              var c = JSON.parse(xhr.responseText);
-              addDanmakuLine(c.content, c.nickname);
+              addDanmakuLine(c.content);
+              fetchStats();
            } catch (e) {}
          } else {
            alert('发送失败');
          }
        };
        xhr.onerror = function() { alert('发送失败'); };
-        xhr.send(JSON.stringify({ content: content, nickname: nickname || undefined }));
+        xhr.send(JSON.stringify({ content: content }));
      });
    })();
  </script>