stun-nav/public/admin.html

<!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?v=6" />
  </head>
  <body>
    <main class="shell admin-shell">
      <header class="topbar hero compact-hero">
        <div class="hero-copy">
          <p id="adminBrand" class="eyebrow">STUN NAV</p>
          <h1>导航管理</h1>
          <p class="subtitle">调整首页展示内容，也可以手动维护导航入口</p>
        </div>
        <div class="actions">
          <button class="quick-action primary-button compact-button" type="button" data-target="servicePanel" data-mode="new">新增导航</button>
          <button class="quick-action ghost-button compact-button" type="button" data-target="settingsPanel">页面设置</button>
          <a class="text-link" href="/">返回导航</a>
          <button id="refreshButton" class="icon-button" type="button" title="刷新">
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
              <path d="M21 12a9 9 0 0 1-15.18 6.57M3 12A9 9 0 0 1 18.18 5.43M21 5v6h-6M3 19v-6h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
        </div>
      </header>

      <section class="admin-console">
        <aside class="admin-sidebar">
          <label class="field token-field">
            <span>管理密钥</span>
            <input id="tokenInput" type="password" autocomplete="off" placeholder="填写 WEBHOOK_TOKEN" />
          </label>
          <nav class="admin-tabs" aria-label="后台栏目">
            <button class="tab-button active" type="button" data-target="settingsPanel">页面设置</button>
            <button class="tab-button" type="button" data-target="servicePanel" data-mode="new">新增导航</button>
            <button class="tab-button" type="button" data-target="listPanel">导航列表</button>
          </nav>
          <section id="statusBar" class="status admin-status" aria-live="polite">正在读取导航...</section>
        </aside>

        <section class="admin-workspace">
          <form id="settingsForm" class="admin-panel settings-form admin-section active" data-panel="settingsPanel">
            <div class="panel-heading">
              <div>
                <p class="panel-kicker">DISPLAY</p>
                <h2>页面设置</h2>
              </div>
            </div>
            <label class="field">
              <span>浏览器标题</span>
              <input id="browserTitleInput" name="browserTitle" autocomplete="off" placeholder="家中服务导航" />
            </label>
            <label class="field">
              <span>顶部标识</span>
              <input id="brandInput" name="brand" autocomplete="off" placeholder="STUN NAV" />
            </label>
            <label class="field">
              <span>首页标题</span>
              <input id="titleInput" name="title" autocomplete="off" placeholder="家中服务" />
            </label>
            <label class="field full">
              <span>首页副标题</span>
              <input id="subtitleInput" name="subtitle" autocomplete="off" placeholder="聚合 Lucky STUN 最新入口，一处打开所有家中应用" />
            </label>
            <div class="form-actions">
              <button class="primary-button" type="submit">保存页面设置</button>
            </div>
          </form>

          <form id="serviceForm" class="admin-panel service-form admin-section" data-panel="servicePanel">
            <div class="panel-heading">
              <div>
                <p class="panel-kicker">SERVICE</p>
                <h2 id="serviceFormTitle">新增导航</h2>
              </div>
            </div>
            <input id="originalIdInput" type="hidden" />
            <label class="field">
              <span>ID</span>
              <input id="idInput" name="id" autocomplete="off" required placeholder="alist" />
            </label>
            <label class="field">
              <span>名称</span>
              <input id="nameInput" name="name" autocomplete="off" required placeholder="AList" />
            </label>
            <label class="field">
              <span>分组</span>
              <input id="groupInput" name="group" autocomplete="off" placeholder="文件" />
            </label>
            <label class="field full">
              <span>地址</span>
              <input id="urlInput" name="url" autocomplete="off" required placeholder="http://1.2.3.4:12345" />
            </label>
            <label class="field full">
              <span>备注</span>
              <input id="noteInput" name="note" autocomplete="off" placeholder="可选" />
            </label>
            <div class="form-actions">
              <button id="resetButton" class="ghost-button" type="button">清空</button>
              <button class="primary-button" type="submit">保存导航</button>
            </div>
          </form>

          <section class="admin-section" data-panel="listPanel">
            <div class="admin-list-card">
              <div class="panel-heading list-heading">
                <div>
                  <p class="panel-kicker">ENTRIES</p>
                  <h2>导航列表</h2>
                </div>
                <button id="newFromListButton" class="primary-button compact-button" type="button">新增导航</button>
              </div>
              <div class="admin-list-wrap">
                <table class="admin-table">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>名称</th>
                      <th>分组</th>
                      <th>地址</th>
                      <th>更新</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody id="serviceRows"></tbody>
                </table>
              </div>
            </div>
          </section>
        </section>
      </section>
    </main>

    <script src="/admin.js?v=6" type="module"></script>
  </body>
</html>