307 lines
8.5 KiB
JavaScript
307 lines
8.5 KiB
JavaScript
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();
|