79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Office 365 Mail Console</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<p class="eyebrow">Microsoft 365</p>
|
|
<h1>邮箱控制台</h1>
|
|
<p class="sidebar-copy">列出租户账号，点击后读取该账号收件箱中的最新一封邮件。</p>
|
|
</div>
|
|
|
|
<label class="search-box" for="search-input">
|
|
<span>搜索账号</span>
|
|
<input id="search-input" type="search" placeholder="按姓名、邮箱或 UPN 搜索" />
|
|
</label>
|
|
|
|
<div class="list-meta">
|
|
<span id="user-count">加载中...</span>
|
|
<button id="refresh-users" type="button">刷新</button>
|
|
</div>
|
|
|
|
<div id="user-list" class="user-list" aria-live="polite"></div>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<section class="panel panel-intro" id="empty-state">
|
|
<p class="eyebrow">Latest Mail</p>
|
|
<h2>选择一个账号</h2>
|
|
<p>右侧会显示该账号收件箱最新一封邮件的核心信息。</p>
|
|
</section>
|
|
|
|
<section class="panel hidden" id="mail-panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="eyebrow">Latest Mail</p>
|
|
<h2>邮件正文</h2>
|
|
</div>
|
|
<button id="refresh-mail" type="button">刷新邮件</button>
|
|
</div>
|
|
|
|
<div id="mail-status" class="status hidden"></div>
|
|
|
|
<div id="mail-empty" class="hidden empty-block">
|
|
<h3>没有可显示的邮件</h3>
|
|
<p>该账号收件箱为空，或者当前应用无权访问此邮箱。</p>
|
|
</div>
|
|
|
|
<article id="mail-card" class="mail-card hidden">
|
|
<div class="mail-summary">
|
|
<div>
|
|
<span class="label">发件人</span>
|
|
<p id="mail-from"></p>
|
|
</div>
|
|
<div>
|
|
<span class="label">接收时间</span>
|
|
<p id="mail-time"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-block">
|
|
<span class="label">邮件全文</span>
|
|
<iframe id="mail-body-frame" class="mail-body-frame hidden" sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>
|
|
<pre id="mail-preview" class="hidden"></pre>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/app.js" defer></script>
|
|
</body>
|
|
</html>
|