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();
|
||||
Reference in New Issue
Block a user