add office 365 mail console
This commit is contained in:
306
public/app.js
Normal file
306
public/app.js
Normal file
@@ -0,0 +1,306 @@
|
||||
const state = {
|
||||
users: [],
|
||||
filteredUsers: [],
|
||||
selectedUser: null,
|
||||
lastMessage: null,
|
||||
defaultMailboxAddress: '',
|
||||
initialAutoSelected: false,
|
||||
};
|
||||
|
||||
const elements = {
|
||||
userList: document.getElementById('user-list'),
|
||||
userCount: document.getElementById('user-count'),
|
||||
searchInput: document.getElementById('search-input'),
|
||||
refreshUsers: document.getElementById('refresh-users'),
|
||||
refreshMail: document.getElementById('refresh-mail'),
|
||||
emptyState: document.getElementById('empty-state'),
|
||||
mailPanel: document.getElementById('mail-panel'),
|
||||
mailStatus: document.getElementById('mail-status'),
|
||||
mailEmpty: document.getElementById('mail-empty'),
|
||||
mailCard: document.getElementById('mail-card'),
|
||||
mailFrom: document.getElementById('mail-from'),
|
||||
mailTime: document.getElementById('mail-time'),
|
||||
mailPreview: document.getElementById('mail-preview'),
|
||||
mailBodyFrame: document.getElementById('mail-body-frame'),
|
||||
};
|
||||
|
||||
function formatIdentity(user) {
|
||||
return user.mail || user.userPrincipalName || 'No mailbox address';
|
||||
}
|
||||
|
||||
function formatRecipient(recipient) {
|
||||
if (!recipient || (!recipient.name && !recipient.address)) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
return recipient.name && recipient.address
|
||||
? `${recipient.name} <${recipient.address}>`
|
||||
: recipient.name || recipient.address;
|
||||
}
|
||||
|
||||
function formatRecipientList(recipients) {
|
||||
if (!recipients || recipients.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
return recipients.map(formatRecipient).join(', ');
|
||||
}
|
||||
|
||||
function setStatus(message, tone = 'neutral') {
|
||||
elements.mailStatus.textContent = message;
|
||||
elements.mailStatus.className = `status ${tone}`;
|
||||
}
|
||||
|
||||
function clearStatus() {
|
||||
elements.mailStatus.textContent = '';
|
||||
elements.mailStatus.className = 'status hidden';
|
||||
}
|
||||
|
||||
function renderUserList() {
|
||||
elements.userCount.textContent = `共 ${state.filteredUsers.length} 个账号`;
|
||||
|
||||
if (state.filteredUsers.length === 0) {
|
||||
elements.userList.innerHTML = '<div class="user-empty">没有匹配的账号</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
state.filteredUsers.forEach((user) => {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = `user-item${state.selectedUser?.id === user.id ? ' active' : ''}`;
|
||||
button.dataset.userId = user.id;
|
||||
button.innerHTML = `
|
||||
<span class="user-name">${escapeHtml(user.displayName)}</span>
|
||||
<span class="user-address">${escapeHtml(formatIdentity(user))}</span>
|
||||
<span class="user-meta">${escapeHtml(user.department || user.jobTitle || '未设置部门 / 职位')}</span>
|
||||
`;
|
||||
fragment.appendChild(button);
|
||||
});
|
||||
|
||||
elements.userList.innerHTML = '';
|
||||
elements.userList.appendChild(fragment);
|
||||
}
|
||||
|
||||
function applyUserFilter() {
|
||||
const keyword = elements.searchInput.value.trim().toLowerCase();
|
||||
state.filteredUsers = state.users.filter((user) => {
|
||||
if (!keyword) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return [user.displayName, user.mail, user.userPrincipalName, user.department, user.jobTitle]
|
||||
.filter(Boolean)
|
||||
.some((value) => value.toLowerCase().includes(keyword));
|
||||
});
|
||||
|
||||
renderUserList();
|
||||
}
|
||||
|
||||
function showMailPanel() {
|
||||
elements.emptyState.classList.add('hidden');
|
||||
elements.mailPanel.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function renderEmptyMail(message) {
|
||||
showMailPanel();
|
||||
setStatus(message, 'warning');
|
||||
elements.mailCard.classList.add('hidden');
|
||||
elements.mailEmpty.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function buildEmailDocument(content) {
|
||||
const baseHeadContent = `
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base target="_blank" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
color: #111827;
|
||||
background: #ffffff;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
img,
|
||||
table {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>`;
|
||||
|
||||
if (/<!doctype html|<html[\s>]/i.test(content)) {
|
||||
if (/<head[\s>]/i.test(content)) {
|
||||
return content.replace(/<head([^>]*)>/i, `<head$1>${baseHeadContent}`);
|
||||
}
|
||||
|
||||
return content.replace(/<html([^>]*)>/i, `<html$1><head>${baseHeadContent}</head>`);
|
||||
}
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${baseHeadContent}
|
||||
</head>
|
||||
<body>${content}</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
function renderMessageBody(message) {
|
||||
const bodyContent = message.body?.content || message.bodyPreview || '暂无正文';
|
||||
const contentType = (message.body?.contentType || 'text').toLowerCase();
|
||||
const isHtml = contentType === 'html';
|
||||
|
||||
if (isHtml) {
|
||||
elements.mailBodyFrame.classList.remove('hidden');
|
||||
elements.mailPreview.classList.add('hidden');
|
||||
elements.mailBodyFrame.srcdoc = buildEmailDocument(bodyContent);
|
||||
return;
|
||||
}
|
||||
|
||||
elements.mailBodyFrame.classList.add('hidden');
|
||||
elements.mailBodyFrame.srcdoc = '';
|
||||
elements.mailPreview.classList.remove('hidden');
|
||||
elements.mailPreview.textContent = bodyContent;
|
||||
}
|
||||
|
||||
function renderMessage(message) {
|
||||
showMailPanel();
|
||||
clearStatus();
|
||||
elements.mailEmpty.classList.add('hidden');
|
||||
elements.mailCard.classList.remove('hidden');
|
||||
|
||||
elements.mailFrom.textContent = formatRecipient(message.from);
|
||||
elements.mailTime.textContent = message.receivedDateTime
|
||||
? new Date(message.receivedDateTime).toLocaleString('zh-CN', { hour12: false })
|
||||
: '-';
|
||||
renderMessageBody(message);
|
||||
}
|
||||
|
||||
async function requestJson(url) {
|
||||
const response = await fetch(url);
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.status === 401) {
|
||||
window.location.assign('/login');
|
||||
throw new Error('Authentication required');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(payload.error || 'Request failed');
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
elements.userCount.textContent = '加载账号中...';
|
||||
elements.refreshUsers.disabled = true;
|
||||
|
||||
try {
|
||||
const payload = await requestJson('/api/users');
|
||||
state.users = payload.users || [];
|
||||
state.defaultMailboxAddress = payload.defaultMailboxAddress || '';
|
||||
applyUserFilter();
|
||||
|
||||
if (state.selectedUser) {
|
||||
const nextSelected = state.users.find((user) => user.id === state.selectedUser.id);
|
||||
state.selectedUser = nextSelected || null;
|
||||
renderUserList();
|
||||
}
|
||||
|
||||
if (!state.selectedUser && !state.initialAutoSelected && state.defaultMailboxAddress) {
|
||||
const normalizedDefault = state.defaultMailboxAddress.toLowerCase();
|
||||
const defaultUser = state.users.find((user) => {
|
||||
return [user.mail, user.userPrincipalName]
|
||||
.filter(Boolean)
|
||||
.some((value) => value.toLowerCase() === normalizedDefault);
|
||||
});
|
||||
|
||||
if (defaultUser) {
|
||||
state.initialAutoSelected = true;
|
||||
loadLatestEmail(defaultUser.id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
elements.userList.innerHTML = `<div class="user-empty">${escapeHtml(error.message)}</div>`;
|
||||
elements.userCount.textContent = '加载失败';
|
||||
} finally {
|
||||
elements.refreshUsers.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLatestEmail(userId) {
|
||||
const user = state.users.find((entry) => entry.id === userId);
|
||||
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.selectedUser = user;
|
||||
state.lastMessage = null;
|
||||
renderUserList();
|
||||
showMailPanel();
|
||||
elements.mailEmpty.classList.add('hidden');
|
||||
elements.mailCard.classList.add('hidden');
|
||||
setStatus('正在读取最新邮件...', 'loading');
|
||||
elements.refreshMail.disabled = true;
|
||||
|
||||
try {
|
||||
const payload = await requestJson(`/api/users/${encodeURIComponent(userId)}/latest-email`);
|
||||
state.lastMessage = payload.message;
|
||||
|
||||
if (!payload.message) {
|
||||
renderEmptyMail('该账号收件箱当前没有邮件。');
|
||||
return;
|
||||
}
|
||||
|
||||
renderMessage(payload.message);
|
||||
} catch (error) {
|
||||
renderEmptyMail(error.message);
|
||||
} finally {
|
||||
elements.refreshMail.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
elements.userList.addEventListener('click', (event) => {
|
||||
const button = event.target.closest('[data-user-id]');
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadLatestEmail(button.dataset.userId);
|
||||
});
|
||||
|
||||
elements.searchInput.addEventListener('input', () => {
|
||||
applyUserFilter();
|
||||
});
|
||||
|
||||
elements.refreshUsers.addEventListener('click', () => {
|
||||
loadUsers();
|
||||
});
|
||||
|
||||
elements.refreshMail.addEventListener('click', () => {
|
||||
if (state.selectedUser) {
|
||||
loadLatestEmail(state.selectedUser.id);
|
||||
}
|
||||
});
|
||||
|
||||
loadUsers();
|
||||
78
public/index.html
Normal file
78
public/index.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!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>
|
||||
123
public/login.css
Normal file
123
public/login.css
Normal file
@@ -0,0 +1,123 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #07111f;
|
||||
--panel: rgba(10, 22, 41, 0.9);
|
||||
--line: rgba(154, 180, 220, 0.2);
|
||||
--text: #eef4ff;
|
||||
--muted: #94a6c4;
|
||||
--accent: #6ee7ff;
|
||||
--danger: #ff9c9c;
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
|
||||
font-family: Inter, "Segoe UI", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(59, 169, 255, 0.18), transparent 24%),
|
||||
radial-gradient(circle at bottom right, rgba(110, 231, 255, 0.1), transparent 28%),
|
||||
linear-gradient(180deg, #06101d 0%, #09172c 100%);
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: min(440px, 100%);
|
||||
padding: 32px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.auth-copy {
|
||||
margin: 12px 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
margin-top: 18px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 156, 156, 0.2);
|
||||
background: rgba(255, 156, 156, 0.08);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.auth-form label {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-form input,
|
||||
.auth-form button {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.auth-form input {
|
||||
padding: 13px 14px;
|
||||
color: var(--text);
|
||||
background: rgba(14, 28, 50, 0.9);
|
||||
}
|
||||
|
||||
.auth-form button {
|
||||
margin-top: 6px;
|
||||
padding: 12px 14px;
|
||||
color: #07213c;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--accent), #89f0ff);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.auth-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
33
public/login.html
Normal file
33
public/login.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>访问验证</title>
|
||||
<link rel="stylesheet" href="/login.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="auth-shell">
|
||||
<section class="auth-card">
|
||||
<p class="eyebrow">Protected Access</p>
|
||||
<h1>输入访问密码</h1>
|
||||
<p class="auth-copy">验证通过后才能进入 Office 365 邮件控制台。</p>
|
||||
|
||||
<div id="auth-error" class="auth-error hidden">访问密码错误，请重试。</div>
|
||||
|
||||
<form method="post" action="/auth/login" class="auth-form">
|
||||
<label for="password">访问密码</label>
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required autofocus />
|
||||
<button type="submit">进入控制台</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.get('error') === '1') {
|
||||
document.getElementById('auth-error').classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
295
public/styles.css
Normal file
295
public/styles.css
Normal file
@@ -0,0 +1,295 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #07111f;
|
||||
--panel: rgba(9, 20, 38, 0.88);
|
||||
--panel-strong: rgba(12, 28, 52, 0.96);
|
||||
--line: rgba(154, 180, 220, 0.18);
|
||||
--text: #eef4ff;
|
||||
--muted: #94a6c4;
|
||||
--accent: #6ee7ff;
|
||||
--accent-strong: #3ba9ff;
|
||||
--warning: #ffcf66;
|
||||
--danger: #ff8e8e;
|
||||
--shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
|
||||
font-family: Inter, "Segoe UI", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(59, 169, 255, 0.2), transparent 24%),
|
||||
radial-gradient(circle at bottom right, rgba(110, 231, 255, 0.12), transparent 28%),
|
||||
linear-gradient(180deg, #06101d 0%, #09172c 100%);
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 360px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--line);
|
||||
background: rgba(7, 17, 31, 0.72);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.sidebar-header h1,
|
||||
.panel h2,
|
||||
.mail-card h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-copy,
|
||||
.muted,
|
||||
.label,
|
||||
.user-address,
|
||||
.user-meta,
|
||||
.user-empty,
|
||||
.status,
|
||||
.empty-block p {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
|
||||
.search-box input,
|
||||
button {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
color: var(--text);
|
||||
background: rgba(15, 28, 51, 0.8);
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 11px 14px;
|
||||
transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
border-color: rgba(110, 231, 255, 0.5);
|
||||
background: rgba(18, 38, 68, 0.92);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.list-meta,
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
max-height: calc(100vh - 245px);
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.user-item,
|
||||
.panel,
|
||||
.mail-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.user-item {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.user-item.active {
|
||||
border-color: rgba(110, 231, 255, 0.55);
|
||||
background: linear-gradient(180deg, rgba(19, 39, 71, 0.96), rgba(11, 24, 45, 0.96));
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-address,
|
||||
.user-meta,
|
||||
.label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
padding: 28px;
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.panel-intro {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 20px 0;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.status.loading {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status.warning {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.status.neutral {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.mail-card {
|
||||
margin-top: 20px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.mail-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.mail-summary p,
|
||||
.preview-block pre,
|
||||
.empty-block h3,
|
||||
.empty-block p {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.preview-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.preview-block pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.6;
|
||||
color: #dce7ff;
|
||||
}
|
||||
|
||||
.mail-body-frame {
|
||||
width: 100%;
|
||||
min-height: 720px;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
margin-top: 20px;
|
||||
padding: 24px;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.user-list {
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
.panel-intro {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.sidebar,
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mail-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.list-meta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user