chendeben
/
MailSend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MailHub</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <div>
          <h1>MailHub</h1>
          <p id="runtimeLine">加载中</p>
        </div>
        <div class="topbar-actions">
          <button class="icon-button" id="refreshButton" title="刷新">刷新</button>
          <button class="icon-button" id="logoutButton" title="退出登录">退出</button>
        </div>
      </header>

      <section class="notice hidden" id="securityNotice"></section>

      <div class="workspace">
        <aside class="sidebar">
          <section class="panel">
            <div class="section-head">
              <h2>账号</h2>
              <span class="badge idle" id="userRole">加载中</span>
            </div>
            <div class="live-list" id="accountBox"></div>
          </section>

          <form class="panel compact-form" id="addDomainForm">
            <h2>添加发信域名</h2>
            <label>
              域名
              <input name="domain" placeholder="example.com" autocomplete="off" required>
            </label>
            <label>
              DNS API
              <select name="dnsCredentialId" id="domainDnsCredential"></select>
            </label>
            <div class="form-grid">
              <label>
                DKIM selector
                <input name="selector" placeholder="mh202607">
              </label>
              <label>
                DMARC 策略
                <select name="dmarcPolicy">
                  <option value="none">none</option>
                  <option value="quarantine">quarantine</option>
                  <option value="reject">reject</option>
                </select>
              </label>
            </div>
            <label>
              发信主机
              <input name="senderHost" id="defaultSenderHost" autocomplete="off">
            </label>
            <label>
              发信 IP
              <input name="sendingIp" id="defaultSendingIp" autocomplete="off">
            </label>
            <label>
              兼容第三方 SPF
              <textarea name="spfExtra" id="defaultSpfExtra" rows="2"></textarea>
            </label>
            <button class="primary-button" type="submit">添加并生成 DNS</button>
          </form>

          <form class="panel compact-form" id="smtpCredentialForm">
            <div class="section-head">
              <h2>SMTP 凭据</h2>
              <span class="badge idle" id="smtpCredentialState">未加载</span>
            </div>
            <label>
              用户名
              <input name="username" id="smtpUsername" autocomplete="off" required>
            </label>
            <label>
              新密码
              <input name="password" id="smtpPassword" type="password" autocomplete="new-password" placeholder="留空则不修改">
            </label>
            <div class="button-row">
              <button class="secondary-button" id="generateSmtpPassword" type="button">生成密码</button>
              <button class="primary-button" type="submit">保存凭据</button>
            </div>
            <div class="credential-copy" id="smtpCredentialCopy"></div>
          </form>

          <form class="panel compact-form" id="dnsCredentialForm">
            <div class="section-head">
              <h2>DNS API</h2>
              <span class="count" id="dnsCredentialCount">0</span>
            </div>
            <label>
              名称
              <input name="name" placeholder="Cloudflare 主账号" required>
            </label>
            <div class="form-grid">
              <label>
                服务商
                <select name="provider" required>
                  <option value="cloudflare">Cloudflare</option>
                  <option value="aliyun">阿里云 DNS</option>
                  <option value="dnspod">腾讯云 DNSPod</option>
                </select>
              </label>
              <label>
                TTL
                <input name="defaultTtl" type="number" min="60" max="86400" value="600">
              </label>
            </div>
            <label>
              Zone / 根域名
              <input name="zoneName" placeholder="example.com" autocomplete="off" required>
            </label>
            <label>
              Cloudflare API Token
              <input name="apiToken" autocomplete="off">
            </label>
            <label>
              Cloudflare Zone ID
              <input name="zoneId" autocomplete="off">
            </label>
            <label>
              阿里云 AccessKeyId
              <input name="accessKeyId" autocomplete="off">
            </label>
            <label>
              阿里云 AccessKeySecret
              <input name="accessKeySecret" autocomplete="off">
            </label>
            <label>
              腾讯云 SecretId
              <input name="secretId" autocomplete="off">
            </label>
            <label>
              腾讯云 SecretKey
              <input name="secretKey" autocomplete="off">
            </label>
            <button class="primary-button" type="submit">保存 DNS 凭据</button>
            <div class="mini-list" id="dnsCredentialList"></div>
          </form>

          <form class="panel compact-form" id="apiTokenForm">
            <div class="section-head">
              <h2>发送 API Token</h2>
              <span class="count" id="apiTokenCount">0</span>
            </div>
            <label>
              名称
              <input name="name" placeholder="Production sender" required>
            </label>
            <button class="primary-button" type="submit">生成 Token</button>
            <div class="mini-list" id="apiTokenList"></div>
          </form>

          <section class="panel domain-panel">
            <div class="section-head">
              <h2>域名</h2>
              <span class="count" id="domainCount">0</span>
            </div>
            <div class="domain-list" id="domainList"></div>
          </section>

          <section class="panel hidden" id="adminPanel"></section>
        </aside>

        <section class="main-panel" id="detailPanel">
          <div class="empty-state">
            <h2>选择或添加一个域名</h2>
            <p>DNS 引导、验证结果、DKIM 记录和测试发送会显示在这里。</p>
          </div>
        </section>
      </div>
    </main>

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