Toolbox/public/tools/wall/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Yang's Toolbox · 告知墙</title>
  <link rel="icon" href="/icons/wall.svg" type="image/svg+xml" />
  <link rel="stylesheet" href="/common/common.css" />
  <link rel="stylesheet" href="/tools/wall/wall.css" />
</head>
<body>
  <main>
    <section class="debug" id="w-debug-section" style="display:none">
      <div class="debug-actions">
        <button id="w-btn-copy" class="btn">复制调试信息</button>
        <button id="w-btn-refresh" class="btn">刷新</button>
        <button id="w-btn-clear" class="btn">清空</button>
      </div>
      <div id="w-debug-output" class="debug-output"></div>
    </section>
    <section id="wall" class="wall" aria-label="提醒墙">
      <div id="cards" class="cards" tabindex="0"></div>
      <div id="preview" class="preview"></div>
      <div class="controls">
        <button id="btn-prev-card" class="btn" title="上一屏">⬅️</button>
        <button id="btn-next-card" class="btn" title="下一屏">➡️</button>
        <button id="btn-settings" class="btn" onclick="window.wallOpenSettings ? window.wallOpenSettings() : (function(){var m=document.getElementById('settings-modal'); if(m) m.classList.remove('hidden')})()">设置</button>
        <button id="btn-cards-maintain" class="btn">数据维护</button>
        <div id="status" class="status" style="display:none"></div>
      </div>
    </section>
    <div class="modal hidden" id="settings-modal">
      <div class="modal-body wall-settings-modal">
        <h3>告知墙设置</h3>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px">
          <div><label>自动播放(ms)</label><input id="autoplay-ms" type="number" value="45000" /></div>
          <div><label>滑动暂停(ms)</label><input id="swipe-pause-ms" type="number" value="300000" /></div>
          <div><label>同时展示卡片数</label><input id="max-cards" type="number" value="2" min="1" max="3" /></div>
        </div>
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px">
          <div style="grid-column:1 / span 2"><label>背景图URL</label><input id="bg-url" type="text" placeholder="https://.../bg.png" /></div>
          <div><label>模式</label><select id="bg-mode"><option value="tile">平铺</option><option value="cover">铺满</option></select></div>
          <div><label>平铺尺寸(px)</label><input id="bg-size" type="number" value="120" /></div>
          <div><label>透明度(0-1)</label><input id="bg-opacity" type="number" step="0.01" min="0" max="1" value="0.08" /></div>
        </div>
        <div class="modal-actions">
          <button id="btn-save" class="btn">保存</button>
          <button id="btn-close" class="btn">关闭</button>
        </div>
      </div>
    </div>
    <div class="modal hidden" id="cards-modal">
      <div class="modal-body wall-cards-modal">
        <h3>公告数据维护</h3>
        <div class="cards-modal-toolbar">
          <div>
            <button id="cards-btn-add" class="btn">新增卡片</button>
          </div>
        </div>
        <div class="cards-modal-main">
          <div class="cards-modal-list">
            <table class="table cards-table">
            <thead>
              <tr>
                <th style="text-align:left">标题</th>
                <th style="text-align:left">备注</th>
                <th style="text-align:left">操作</th>
              </tr>
            </thead>
            <tbody id="cards-table-body"></tbody>
          </table>
          </div>
          <div class="cards-modal-editor">
            <div>
              <label>标题</label>
              <input id="cards-edit-title" type="text" />
            </div>
            <div class="cards-modal-textarea">
              <label>内容（每行一条）</label>
              <textarea id="cards-edit-items" rows="6"></textarea>
            </div>
            <div>
              <label>备注</label>
              <input id="cards-edit-meta" type="text" />
            </div>
          </div>
        </div>
        <div class="modal-actions">
          <button id="cards-btn-save" class="btn">保存</button>
          <button id="cards-btn-cancel" class="btn">关闭</button>
        </div>
      </div>
    </div>
    
  </main>
  <script src="/common/common.js"></script>
  <script src="/tools/wall/wall.js"></script>
  <script>
    (async function(){
      try {
        const res = await fetch('/api/flags')
        const data = await res.json()
        if (data && data.debug && data.debug.wall) {
          const sec = document.getElementById('w-debug-section')
          if (sec) sec.style.display = ''
        }
      } catch {}
    })()
  </script>
</body>
</html>