feat(email): 新增 Outlook 收件箱功能

- 后端:GET /api/email-services/{id}/inbox 端点,通过 IMAPNewProvider 读取收件箱
- 前端:收件箱列表模态框(支持仅未读筛选、刷新)
- 前端:邮件正文弹窗
- Outlook 操作列新增「收件箱」按钮
This commit is contained in:
cnlimiter
2026-03-21 02:37:35 +08:00
parent 14ea1fd983
commit 4ae99659f2
3 changed files with 235 additions and 25 deletions

View File

@@ -62,16 +62,13 @@
</div>
<div class="card-body" id="outlook-import-body" style="display: none;">
<div class="import-info">
<p><strong>支持格式:</strong></p>
<ul>
<li><code>邮箱----密码</code> (密码认证)</li>
<li><code>邮箱----密码----client_id----refresh_token</code> XOAUTH2 认证,推荐)</li>
</ul>
<p>每行一个账户,使用四个连字符(----)分隔字段。以 # 开头的行将被忽略。</p>
<p><strong>格式(每行一个账户)</strong></p>
<p><code>邮箱----密码----client_id----refresh_token</code></p>
<p>使用四个连字符(----)分隔字段,以 # 开头的行将被忽略。</p>
</div>
<div class="form-group">
<label for="outlook-import-data">批量导入数据</label>
<textarea id="outlook-import-data" rows="8" placeholder="example@outlook.com----password123&#10;test@outlook.com----password456----client_id----refresh_token"></textarea>
<textarea id="outlook-import-data" rows="8" placeholder="example@outlook.com----password123----client_id----refresh_token"></textarea>
</div>
<div class="form-row">
<div class="form-group">
@@ -516,6 +513,55 @@
</div>
<!-- 收件箱模态框 -->
<div class="modal" id="inbox-modal">
<div class="modal-content" style="max-width:800px;width:95%;">
<div class="modal-header">
<h3>📬 收件箱 — <span id="inbox-modal-email"></span></h3>
<div style="display:flex;gap:8px;align-items:center;">
<label style="display:flex;align-items:center;gap:4px;font-size:13px;">
<input type="checkbox" id="inbox-only-unseen"> 仅未读
</label>
<button class="btn btn-secondary btn-sm" id="inbox-refresh-btn">刷新</button>
<button class="modal-close" id="close-inbox-modal">&times;</button>
</div>
</div>
<div class="modal-body" style="padding:0;max-height:70vh;overflow-y:auto;">
<div id="inbox-loading" style="padding:32px;text-align:center;">加载中...</div>
<table class="data-table" id="inbox-table" style="display:none;">
<thead>
<tr>
<th style="width:36px;"></th>
<th>主题</th>
<th style="width:200px;">发件人</th>
<th style="width:150px;">时间</th>
</tr>
</thead>
<tbody id="inbox-tbody"></tbody>
</table>
<div id="inbox-empty" style="display:none;padding:32px;text-align:center;color:var(--text-muted);">暂无邮件</div>
</div>
</div>
</div>
<!-- 邮件正文模态框 -->
<div class="modal" id="email-detail-modal">
<div class="modal-content" style="max-width:700px;width:95%;">
<div class="modal-header">
<div>
<h3 id="email-detail-subject" style="margin:0;"></h3>
<div style="font-size:12px;color:var(--text-muted);margin-top:4px;">
<span id="email-detail-sender"></span> · <span id="email-detail-date"></span>
</div>
</div>
<button class="modal-close" id="close-email-detail-modal">&times;</button>
</div>
<div class="modal-body" style="max-height:65vh;overflow-y:auto;">
<div id="email-detail-body" style="white-space:pre-wrap;word-break:break-word;font-size:13px;"></div>
</div>
</div>
</div>
<script src="/static/js/utils.js?v={{ static_version }}"></script>
<script src="/static/js/email_services.js?v={{ static_version }}"></script>
</body>