Toolbox/public/tools/token_lab/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="theme-color" content="#0b1020">
  <title>令牌工坊</title>
  <link rel="stylesheet" href="/tools/token_lab/token_lab.css">
</head>
<body>
  <section id="authScreen" class="auth-screen">
    <div class="auth-card">
      <input id="authUsername" class="input" type="text" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="账号">
      <input id="authPassword" class="input" type="password" autocomplete="off" placeholder="密码">
      <button id="btnAuthLogin" class="btn btn-primary auth-submit">登录</button>
      <div id="authHint" class="auth-hint"></div>
    </div>
  </section>

  <div id="workshopShell" class="page-shell" hidden>
    <header class="hero">
      <div>
        <div class="eyebrow">Token Lab</div>
        <h1>令牌工坊</h1>
        <p>首页导航令牌与 Tool 令牌的生成、验证、信息回看，都放在这里统一处理。</p>
      </div>
      <div class="hero-side">
        <div id="globalNotice" class="notice" hidden></div>
        <button id="btnAuthLogout" class="btn" hidden>退出工坊登录</button>
      </div>
    </header>

    <nav id="toolTabs" class="tab-nav" hidden>
      <button class="tab-btn active" data-tab="nav">首页导航生成器</button>
      <button class="tab-btn" data-tab="tool">Tool 令牌生成器</button>
    </nav>

    <main id="appMain" hidden>
      <section class="tab-panel active" data-panel="nav">
        <div class="layout-grid">
          <section class="card">
            <div class="card-head">
              <h2>生成首页导航令牌</h2>
            </div>
            <p class="card-desc">服务端使用当前导航私钥签发首页长链接，适合你自己的首页入口轮换。</p>
            <div class="form-grid">
              <label class="field">
                <span>基础地址</span>
                <input id="navBaseUrl" class="input" type="text" placeholder="https://traesite.umersoft.com:8975/">
              </label>
              <label class="field">
                <span>过期时间</span>
                <input id="navExpiry" class="input" type="datetime-local">
              </label>
            </div>
            <div class="actions">
              <button id="btnNavGenerate" class="btn btn-primary">生成首页令牌</button>
              <button id="btnNavCopy" class="btn">复制链接</button>
            </div>
            <label class="field">
              <span>生成结果</span>
              <textarea id="navLinkOutput" class="textarea mono" rows="5" readonly wrap="off"></textarea>
            </label>
            <div id="navGenerateMeta" class="result-grid"></div>
          </section>

          <section class="card">
            <div class="card-head">
              <h2>验证首页导航令牌</h2>
            </div>
            <p class="card-desc">可以粘贴完整链接或纯 token，快速看签名、过期时间、剩余时长和载荷字段。</p>
            <label class="field">
              <span>待验证内容</span>
              <textarea id="navVerifyInput" class="textarea mono" rows="6" placeholder="粘贴 https://.../?token=... 或直接粘贴 token" wrap="off"></textarea>
            </label>
            <div class="actions">
              <button id="btnNavVerify" class="btn btn-primary">验证首页令牌</button>
            </div>
            <div id="navVerifyMeta" class="result-grid"></div>
            <details class="raw-details">
              <summary>详细输出</summary>
              <pre id="navVerifyRaw" class="result-box"></pre>
            </details>
          </section>
        </div>
      </section>

      <section class="tab-panel" data-panel="tool">
        <div class="layout-grid">
          <section class="card">
            <div class="card-head">
              <h2>生成 Tool 令牌</h2>
            </div>
            <p class="card-desc">这部分沿用原 WinForm 的思路：浏览器本地持有 RSA 私钥，本地完成签名，不把 tool 私钥交给服务器。</p>

            <div class="form-grid">
              <label class="field">
                <span>站点预设</span>
                <select id="toolPresetSelect" class="input"></select>
              </label>
              <label class="field">
                <span>预设名称</span>
                <input id="toolPresetName" class="input" type="text" placeholder="expense">
              </label>
              <label class="field field-span-2">
                <span>基础地址</span>
                <input id="toolBaseUrl" class="input" type="text" placeholder="https://traesite.umersoft.com:8975/tools/expense">
              </label>
              <label class="field">
                <span>设备别名</span>
                <input id="toolAlias" class="input" type="text" placeholder="nav-private">
              </label>
              <label class="field">
                <span>过期时间</span>
                <input id="toolExpiry" class="input" type="datetime-local">
              </label>
              <label class="field field-span-2">
                <span>自定义密码</span>
                <input id="toolPassword" class="input" type="password" placeholder="可留空">
              </label>
            </div>

            <div class="actions wrap">
              <button id="btnToolGenerateKey" class="btn">生成 RSA 密钥</button>
              <button id="btnToolImportXml" class="btn">导入私钥 XML</button>
              <button id="btnToolExportXml" class="btn">导出私钥 XML</button>
              <button id="btnToolCopyJwk" class="btn">复制公钥 JWK</button>
              <button id="btnToolNewPreset" class="btn">新建预设</button>
              <button id="btnToolSavePreset" class="btn">保存当前预设</button>
              <button id="btnToolDeletePreset" class="btn">删除当前预设</button>
            </div>
            <input id="toolXmlFile" type="file" accept=".xml,text/xml" hidden>

            <div id="toolKeyMeta" class="result-grid"></div>

            <label class="field">
              <span>公钥 JWK</span>
              <textarea id="toolPublicJwk" class="textarea mono" rows="5" readonly wrap="off"></textarea>
            </label>

            <div class="actions">
              <button id="btnToolGenerateToken" class="btn btn-primary">生成 Tool 令牌</button>
              <button id="btnToolCopyLink" class="btn">复制链接</button>
            </div>
            <label class="field">
              <span>生成结果</span>
              <textarea id="toolLinkOutput" class="textarea mono" rows="5" readonly wrap="off"></textarea>
            </label>
            <div id="toolGenerateMeta" class="result-grid"></div>
          </section>

          <section class="card">
            <div class="card-head">
              <h2>验证 Tool 令牌</h2>
            </div>
            <p class="card-desc">粘贴旧链接或旧 token，马上就能看出 alias、到期时间、剩余时长，以及当前密钥是否验得过。</p>
            <label class="field">
              <span>待验证内容</span>
              <textarea id="toolVerifyInput" class="textarea mono" rows="6" placeholder="粘贴 https://.../?token=... 或直接粘贴 token" wrap="off"></textarea>
            </label>
            <div class="actions">
              <button id="btnToolVerify" class="btn btn-primary">验证 Tool 令牌</button>
            </div>
            <div id="toolVerifyMeta" class="result-grid"></div>
            <details class="raw-details">
              <summary>详细输出</summary>
              <pre id="toolVerifyRaw" class="result-box"></pre>
            </details>
          </section>
        </div>
      </section>
    </main>
  </div>

  <script src="/tools/token_lab/token_lab.js"></script>
</body>
</html>