index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>MailHub</title>
  7. <link rel="stylesheet" href="/styles.css">
  8. </head>
  9. <body>
  10. <main class="app-shell">
  11. <header class="topbar">
  12. <div>
  13. <h1>MailHub</h1>
  14. <p id="runtimeLine">加载中</p>
  15. </div>
  16. <div class="topbar-actions">
  17. <button class="icon-button" id="refreshButton" title="刷新">刷新</button>
  18. <button class="icon-button" id="logoutButton" title="退出登录">退出</button>
  19. </div>
  20. </header>
  21. <section class="notice hidden" id="securityNotice"></section>
  22. <div class="workspace">
  23. <aside class="sidebar">
  24. <form class="panel compact-form" id="addDomainForm">
  25. <h2>添加发信域名</h2>
  26. <label>
  27. 域名
  28. <input name="domain" placeholder="example.com" autocomplete="off" required>
  29. </label>
  30. <div class="form-grid">
  31. <label>
  32. DKIM selector
  33. <input name="selector" placeholder="mh202607">
  34. </label>
  35. <label>
  36. DMARC 策略
  37. <select name="dmarcPolicy">
  38. <option value="none">none</option>
  39. <option value="quarantine">quarantine</option>
  40. <option value="reject">reject</option>
  41. </select>
  42. </label>
  43. </div>
  44. <label>
  45. 发信主机
  46. <input name="senderHost" id="defaultSenderHost" autocomplete="off">
  47. </label>
  48. <label>
  49. 发信 IP
  50. <input name="sendingIp" id="defaultSendingIp" autocomplete="off">
  51. </label>
  52. <label>
  53. 兼容第三方 SPF
  54. <textarea name="spfExtra" id="defaultSpfExtra" rows="2"></textarea>
  55. </label>
  56. <button class="primary-button" type="submit">添加并生成 DNS</button>
  57. </form>
  58. <form class="panel compact-form" id="smtpCredentialForm">
  59. <div class="section-head">
  60. <h2>SMTP 凭据</h2>
  61. <span class="badge idle" id="smtpCredentialState">未加载</span>
  62. </div>
  63. <label>
  64. 用户名
  65. <input name="username" id="smtpUsername" autocomplete="off" required>
  66. </label>
  67. <label>
  68. 新密码
  69. <input name="password" id="smtpPassword" type="password" autocomplete="new-password" placeholder="留空则不修改">
  70. </label>
  71. <div class="button-row">
  72. <button class="secondary-button" id="generateSmtpPassword" type="button">生成密码</button>
  73. <button class="primary-button" type="submit">保存凭据</button>
  74. </div>
  75. <div class="credential-copy" id="smtpCredentialCopy"></div>
  76. <p class="muted">保存后立即生效,SMTP 客户端下一次认证会使用新凭据。</p>
  77. </form>
  78. <section class="panel domain-panel">
  79. <div class="section-head">
  80. <h2>域名</h2>
  81. <span class="count" id="domainCount">0</span>
  82. </div>
  83. <div class="domain-list" id="domainList"></div>
  84. </section>
  85. </aside>
  86. <section class="main-panel" id="detailPanel">
  87. <div class="empty-state">
  88. <h2>选择或添加一个域名</h2>
  89. <p>DNS 引导、验证结果、DKIM 记录和测试发送会显示在这里。</p>
  90. </div>
  91. </section>
  92. </div>
  93. </main>
  94. <template id="recordRowTemplate">
  95. <tr>
  96. <td class="record-label"></td>
  97. <td class="mono record-host"></td>
  98. <td class="record-type"></td>
  99. <td><code class="record-value"></code></td>
  100. <td class="record-status"></td>
  101. <td><button class="small-button copy-button" type="button">复制</button></td>
  102. </tr>
  103. </template>
  104. <script src="/app.js" type="module"></script>
  105. </body>
  106. </html>