wxcz_admin
/
biaoshu-ai-git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>埋点统计看板</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <main>
    <header class="hero">
      <div>
        <h1>埋点统计看板</h1>
        <p>Cloudflare Workers + Analytics Engine + Workers Static Assets</p>
      </div>
      <div class="status">
        <span id="statusDot" class="dot"></span>
        <span id="statusText">未连接</span>
      </div>
    </header>

    <section class="panel controls">
      <label>
        API 地址
        <input id="apiBase" value="https://analytics.agnet.top" />
      </label>
      <label>
        ADMIN_TOKEN
        <input id="adminToken" type="password" placeholder="输入 Worker Secret 中的 ADMIN_TOKEN" />
      </label>
      <label>
        项目
        <input id="projectName" value="yibiao-client" placeholder="输入项目名，例如 yibiao-client" list="projectOptions" />
        <datalist id="projectOptions"></datalist>
      </label>
      <label>
        时间范围
        <select id="days">
          <option value="7">最近 7 天</option>
          <option value="30" selected>最近 30 天</option>
          <option value="90">最近 90 天</option>
        </select>
      </label>
      <button id="refreshButton">刷新当前页</button>
    </section>

    <div class="panel hint">Token 只保存在当前浏览器 localStorage，不写入仓库，也不会提交到服务端。</div>
    <div id="errorBox" class="error"></div>

    <nav class="tabs" aria-label="看板标签页">
      <button class="tab-button" type="button" data-tab-button="overview">概览</button>
      <button class="tab-button" type="button" data-tab-button="traffic">访问分析</button>
      <button class="tab-button" type="button" data-tab-button="config">配置使用</button>
      <button class="tab-button" type="button" data-tab-button="latest">最近事件</button>
      <button class="tab-button" type="button" data-tab-button="notice">公告管理</button>
    </nav>

    <section id="tab-overview" class="tab-panel" data-tab-panel="overview">
      <section class="cards">
        <div class="panel card"><span>打开量</span><strong id="totalOpen">0</strong></div>
        <div class="panel card"><span>页面访问量</span><strong id="totalView">0</strong></div>
        <div class="panel card"><span>总客户端数</span><strong id="totalClients">0</strong></div>
        <div class="panel card"><span>今日活跃客户端</span><strong id="todayActiveClients">0</strong></div>
        <div class="panel card"><span>近 7 天活跃</span><strong id="wau">0</strong></div>
        <div class="panel card"><span>近 30 天活跃</span><strong id="mau">0</strong></div>
        <div class="panel card"><span>新增客户端</span><strong id="newClients">0</strong></div>
        <div class="panel card"><span>老客户端活跃</span><strong id="returningClients">0</strong></div>
      </section>

      <section class="grid">
        <div class="panel section">
          <h2>每日统计</h2>
          <div id="dailyTable"></div>
        </div>
        <div class="panel section">
          <h2>留存概览</h2>
          <div id="retentionTable"></div>
        </div>
      </section>
    </section>

    <section id="tab-traffic" class="tab-panel" data-tab-panel="traffic">
      <section class="grid">
        <div class="panel section">
          <h2>页面访问排行</h2>
          <div id="pagesTable"></div>
        </div>
        <div class="panel section">
          <h2>版本分布</h2>
          <div id="versionsTable"></div>
        </div>
      </section>
    </section>

    <section id="tab-config" class="tab-panel" data-tab-panel="config">
      <section class="panel section">
        <h2>配置使用情况</h2>
        <div id="configUsage"></div>
      </section>
    </section>

    <section id="tab-latest" class="tab-panel" data-tab-panel="latest">
      <section class="panel section">
        <div class="section-head">
          <h2>最近事件</h2>
          <div class="pager">
            <button id="prevLatestPage" type="button">上一页</button>
            <span id="latestPageInfo">第 1 页</span>
            <button id="nextLatestPage" type="button">下一页</button>
          </div>
        </div>
        <div id="latestTable"></div>
      </section>
    </section>

    <section id="tab-notice" class="tab-panel" data-tab-panel="notice">
      <section class="panel section notice-panel">
        <div class="section-head">
          <div>
            <h2>公告管理</h2>
            <p>发布后客户端会在启动和每 30 分钟轮询时拉取最新 Markdown 公告。同一公告关闭后不再显示，重新发布会生成新的公告 ID。</p>
          </div>
          <button id="loadNoticeButton" type="button">读取公告</button>
        </div>
        <div id="noticeMeta" class="notice-meta">当前未读取公告。</div>
        <div class="notice-form">
          <label>
            公告标题
            <input id="noticeTitle" maxlength="120" placeholder="例如：开源许可证提醒" />
          </label>
          <label>
            状态
            <select id="noticeEnabled">
              <option value="true" selected>启用</option>
              <option value="false">保存但不展示</option>
            </select>
          </label>
          <label class="notice-field-wide">
            Markdown 内容
            <textarea id="noticeContent" maxlength="20000" placeholder="输入 Markdown 公告内容。支持标题、列表、链接、加粗等语法。"></textarea>
          </label>
        </div>
        <div class="notice-actions">
          <button id="disableNoticeButton" class="danger-button" type="button">停用公告</button>
          <button id="publishNoticeButton" type="button">发布公告</button>
        </div>
        <div id="noticeStatus" class="notice-status"></div>
      </section>
    </section>
  </main>

  <script type="module" src="./src/main.js"></script>
</body>
</html>