220 lines
10 KiB
HTML
220 lines
10 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>Mail SR - 多邮箱工作台</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 左侧边栏 -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M2 8L12 14L22 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span>Mail SR</span>
|
|
</div>
|
|
<button id="compose-btn" class="compose-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
写邮件
|
|
</button>
|
|
</div>
|
|
|
|
<div class="account-section">
|
|
<div class="section-header">
|
|
<span>我的邮箱</span>
|
|
</div>
|
|
<div id="channel-tree" class="account-list"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<button id="settings-btn" class="icon-btn" title="设置">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82.33l.06.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 邮件列表区 -->
|
|
<section class="mail-list-section">
|
|
<header class="mail-list-header">
|
|
<div class="header-left">
|
|
<h2 id="selected-account-title">选择邮箱帐号</h2>
|
|
<span id="selected-account-meta" class="account-info"></span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="refresh-mails-btn" class="action-btn" disabled title="刷新">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 20 10"></polyline>
|
|
<polyline points="1 20 1 14 4 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="load-mails-btn" class="action-btn" disabled title="加载缓存">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mail-list">
|
|
<div id="message-list" class="message-items">
|
|
<div class="empty-state">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
<p>选择邮箱帐号查看邮件</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 邮件详情区 -->
|
|
<section class="mail-detail-section">
|
|
<article id="message-detail" class="mail-detail empty">
|
|
<div class="empty-state">
|
|
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
<p>选择一封邮件查看详情</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 写邮件弹窗 -->
|
|
<div id="compose-modal" class="modal hidden">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content compose-modal-content">
|
|
<div class="modal-header">
|
|
<h3>写邮件</h3>
|
|
<button class="close-btn" id="close-compose">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="send-form" class="compose-form">
|
|
<div class="form-row">
|
|
<label>收件人</label>
|
|
<input type="text" name="to" placeholder="多个收件人用逗号分隔" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>抄送</label>
|
|
<input type="text" name="cc" placeholder="可选">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>主题</label>
|
|
<input type="text" name="subject" placeholder="邮件主题" required>
|
|
</div>
|
|
<div class="form-row body-row">
|
|
<textarea name="text" placeholder="撰写邮件内容..." required></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="send-btn" id="send-btn" disabled>发送</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设置弹窗 -->
|
|
<div id="settings-modal" class="modal hidden">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content settings-modal-content">
|
|
<div class="modal-header">
|
|
<h3>设置</h3>
|
|
<button class="close-btn" id="close-settings">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="settings-content">
|
|
<div class="settings-section">
|
|
<h4>新增邮箱渠道</h4>
|
|
<form id="channel-form" class="settings-form">
|
|
<div class="form-row compact">
|
|
<input name="name" placeholder="渠道名称，如 QQ邮箱" required>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="code" placeholder="渠道标识，如 qq" required>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="imap_host" placeholder="IMAP Host" required>
|
|
</div>
|
|
<div class="form-row compact split">
|
|
<input name="imap_port" type="number" placeholder="IMAP Port" required>
|
|
<label class="checkbox"><input name="imap_secure" type="checkbox" checked> SSL</label>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="smtp_host" placeholder="SMTP Host" required>
|
|
</div>
|
|
<div class="form-row compact split">
|
|
<input name="smtp_port" type="number" placeholder="SMTP Port" required>
|
|
<label class="checkbox"><input name="smtp_secure" type="checkbox" checked> SSL</label>
|
|
</div>
|
|
<button type="submit" class="add-btn">新增渠道</button>
|
|
</form>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h4>导入邮箱帐号</h4>
|
|
<form id="account-form" class="settings-form">
|
|
<div class="form-row compact">
|
|
<select name="channel_id" required>
|
|
<option value="">选择邮箱渠道</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="email" type="email" placeholder="邮箱帐号" required>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="auth_code" type="password" placeholder="授权码" required>
|
|
</div>
|
|
<div class="form-row compact">
|
|
<input name="display_name" placeholder="发件人名称（可选）">
|
|
</div>
|
|
<button type="submit" class="add-btn" id="account-submit-btn">导入帐号</button>
|
|
</form>
|
|
</div>
|
|
<div class="settings-section">
|
|
<h4>批量导入导出</h4>
|
|
<div class="batch-tip">每行一条，格式：渠道名----帐号----授权码</div>
|
|
<form id="batch-import-form" class="settings-form">
|
|
<div class="form-row compact">
|
|
<textarea id="batch-import-content" class="batch-textarea" placeholder="例如： QQ邮箱----demo@qq.com----xxxxxxxx 163邮箱----demo@163.com----yyyyyyyy"></textarea>
|
|
</div>
|
|
<div class="inline-actions">
|
|
<button type="submit" class="add-btn" id="batch-import-btn">批量导入</button>
|
|
<button type="button" class="secondary-btn" id="export-accounts-btn">导出全部</button>
|
|
<button type="button" class="secondary-btn" id="copy-export-btn">复制导出内容</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|