├── .DS_Store
├── .dockerignore
├── .gitignore
├── Dockerfile
├── README.md
├── batch.py
├── deploy.sh
├── docker-compose.yml
├── docker-entrypoint.sh
├── docker.env.example
├── docs
    ├── .DS_Store
    └── images
    │   ├── account-add.png
    │   ├── account-management.png
    │   ├── api-docs.png
    │   └── email-list.png
├── main.py
├── requirements.txt
└── static
    └── index.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/.DS_Store


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
 1 | # Git相关文件
 2 | .git
 3 | .gitignore
 4 | 
 5 | # Python相关
 6 | __pycache__/
 7 | *.py[cod]
 8 | *$py.class
 9 | *.so
10 | .Python
11 | build/
12 | develop-eggs/
13 | dist/
14 | downloads/
15 | eggs/
16 | .eggs/
17 | lib/
18 | lib64/
19 | parts/
20 | sdist/
21 | var/
22 | wheels/
23 | *.egg-info/
24 | .installed.cfg
25 | *.egg
26 | 
27 | # 虚拟环境
28 | venv/
29 | env/
30 | ENV/
31 | 
32 | # IDE相关
33 | .vscode/
34 | .idea/
35 | *.swp
36 | *.swo
37 | *~
38 | 
39 | # 操作系统相关
40 | .DS_Store
41 | Thumbs.db
42 | 
43 | # 日志文件
44 | *.log
45 | 
46 | # 临时文件
47 | *.tmp
48 | *.temp
49 | 
50 | # 测试和开发文件
51 | demo.py
52 | demo2.py
53 | emails/
54 | 
55 | # Docker相关
56 | Dockerfile
57 | docker-compose.yml
58 | .dockerignore
59 | 
60 | # 文档和说明
61 | README.md
62 | Task*.md
63 | 
64 | # 用户数据（将通过数据卷挂载）
65 | accounts.json
66 | 
67 | # 其他不需要的文件夹
68 | 4.30caprun-微软注册/ 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | __pycache__
3 | accounts.json
4 | .DS_Store


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # 使用Python 3.11 Alpine作为基础镜像，体积更小
 2 | FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/python:3.11-alpine3.21
 3 | 
 4 | # 设置工作目录
 5 | WORKDIR /app
 6 | 
 7 | # 设置环境变量
 8 | ENV PYTHONDONTWRITEBYTECODE=1 \
 9 |     PYTHONUNBUFFERED=1 \
10 |     PIP_NO_CACHE_DIR=1 \
11 |     PIP_DISABLE_PIP_VERSION_CHECK=1
12 | 
13 | # 安装系统依赖（如果需要）
14 | # RUN apk add --no-cache \
15 | #     gcc \
16 | #     musl-dev \
17 | #     libffi-dev \
18 | #     openssl-dev
19 | 
20 | # 复制requirements文件并安装Python依赖
21 | COPY requirements.txt .
22 | RUN pip install --no-cache-dir -r requirements.txt
23 | 
24 | # 复制应用代码
25 | COPY main.py .
26 | COPY static/ ./static/
27 | COPY docker-entrypoint.sh .
28 | 
29 | # 设置启动脚本权限
30 | RUN chmod +x docker-entrypoint.sh
31 | 
32 | # 创建数据目录用于持久化存储
33 | RUN mkdir -p /app/data && chown 777 /app/data
34 | 
35 | # 暴露端口
36 | EXPOSE 8000
37 | 
38 | # 健康检查
39 | HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
40 |     CMD python -c "import requests; requests.get('http://localhost:8000/api')" || exit 1
41 | 
42 | # 启动命令
43 | CMD ["./docker-entrypoint.sh"] 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 📧 Outlook邮件管理系统
  2 | 
  3 | 一个基于FastAPI和现代Web技术构建的Outlook邮件管理系统，支持多账户管理、邮件查看、搜索过滤等功能。
  4 | 
  5 | ## ✨ 功能特性
  6 | 
  7 | ### 🏠 主要功能
  8 | 
  9 | - **📧 邮件管理**: 支持查看、搜索、过滤邮件
 10 | - **👥 多账户管理**: 支持添加和管理多个Outlook邮箱账户
 11 | - **📦 批量操作**: 支持批量添加邮箱账户
 12 | - **🔍 智能搜索**: 实时搜索邮件标题、发件人等信息
 13 | - **📊 数据统计**: 显示邮件统计信息（总数、未读、今日邮件等）
 14 | - **📤 数据导出**: 支持导出邮件列表为CSV格式
 15 | - **🚀 高性能**: 连接池优化、智能缓存、批量处理
 16 | - **📖 API文档**: 完整的RESTful API接口文档
 17 | 
 18 | ### 🎨 用户界面
 19 | 
 20 | #### 邮件列表界面
 21 | ![邮件列表](docs/images/email-list.png)
 22 | *邮件列表页面，支持搜索、过滤和统计功能*
 23 | 
 24 | #### 邮箱账户管理
 25 | ![账户管理](docs/images/account-management.png)
 26 | ![账户批量管理](docs/images/account-add.png)
 27 | *邮箱账户管理页面，支持添加、删除和查看邮箱状态*
 28 | 
 29 | #### API接口文档
 30 | ![API文档](docs/images/api-docs.png)
 31 | *完整的API接口文档，支持在线测试*
 32 | 
 33 | ### 🔧 技术特性
 34 | 
 35 | - **🏗️ 现代架构**: FastAPI + HTML5 + CSS3 + JavaScript
 36 | - **⚡ 高性能**: IMAP连接池、智能缓存机制
 37 | - **🎯 用户友好**: 响应式设计、实时通知、键盘快捷键
 38 | - **🔒 安全可靠**: OAuth2认证、错误处理、连接管理
 39 | - **📱 移动适配**: 支持移动设备访问
 40 | - **🌐 RESTful API**: 标准化API接口设计
 41 | 
 42 | ## 🚀 快速开始
 43 | 
 44 | ### 📋 系统要求
 45 | 
 46 | - Python 3.8+
 47 | - 现代浏览器（Chrome、Firefox、Safari、Edge）
 48 | - 网络连接（用于访问Outlook IMAP服务器）
 49 | 
 50 | ### 📦 安装依赖
 51 | 
 52 | ```bash
 53 | # 克隆项目
 54 | git clone <repository-url>
 55 | cd OutlookManager
 56 | 
 57 | # 安装Python依赖
 58 | pip install -r requirements.txt
 59 | ```
 60 | 
 61 | ### ⚙️ 配置设置
 62 | 
 63 | 1. **Azure应用注册**（必需）
 64 |    - 访问 [Azure Portal](https://portal.azure.com)
 65 |    - 注册新的应用程序
 66 |    - 配置邮件读取权限
 67 |    - 获取Client ID和Refresh Token
 68 | 
 69 | 2. **环境配置**（可选）
 70 |    ```bash
 71 |    # 复制配置文件
 72 |    cp .env.example .env
 73 | 
 74 |    # 编辑配置文件
 75 |    nano .env
 76 |    ```
 77 | 
 78 | ### 🎯 启动服务
 79 | 
 80 | #### 开发环境
 81 | 
 82 | ```bash
 83 | # 启动开发服务器
 84 | python main.py
 85 | 
 86 | # 或使用uvicorn
 87 | uvicorn main:app --host 0.0.0.0 --port 8001 --reload
 88 | ```
 89 | 
 90 | #### 生产环境
 91 | 
 92 | ```bash
 93 | # 使用gunicorn启动
 94 | pip install gunicorn
 95 | gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker --bind 0.0.0.0:8001
 96 | 
 97 | # 或使用uvicorn
 98 | uvicorn main:app --host 0.0.0.0 --port 8001 --workers 4
 99 | ```
100 | 
101 | ### 🌐 访问系统
102 | 
103 | 启动成功后，在浏览器中访问：
104 | - **Web界面**: http://localhost:8001
105 | - **API文档**: http://localhost:8001/docs
106 | - **API状态**: http://localhost:8001/api
107 | 
108 | ## 📚 使用指南
109 | 
110 | ### 1️⃣ 添加邮箱账户
111 | 
112 | 1. 点击左侧菜单"添加账户"
113 | 2. 填写邮箱地址、刷新令牌和客户端ID
114 | 3. 点击"测试连接"验证配置
115 | 4. 点击"添加账户"完成添加
116 | 
117 | ### 2️⃣ 查看邮件
118 | 
119 | 1. 在账户列表中点击"查看邮件"
120 | 2. 使用搜索框查找特定邮件
121 | 3. 使用过滤器按条件筛选
122 | 4. 点击邮件查看详细内容
123 | 
124 | ### 3️⃣ 批量添加账户
125 | 
126 | 1. 点击左侧菜单"批量添加"
127 | 2. 按格式输入账户信息：`邮箱----密码----刷新令牌----客户端ID`
128 | 3. 点击"验证格式"检查数据
129 | 4. 点击"开始批量添加"执行
130 | 
131 | ### 4️⃣ API调用
132 | 
133 | 查看"API管理"页面获取完整的接口文档，支持：
134 | - 获取邮箱列表：`GET /accounts`
135 | - 获取邮件列表：`GET /emails/{email_id}`
136 | - 获取邮件详情：`GET /emails/{email_id}/{message_id}`
137 | 
138 | ## 🚀 部署指南
139 | 
140 | ### 🐳 Docker部署
141 | 
142 | ```bash
143 | # 构建镜像
144 | docker build -t outlook-manager .
145 | 
146 | # 运行容器
147 | docker run -d \
148 |   --name outlook-manager \
149 |   -p 8001:8001 \
150 |   -v $(pwd)/accounts.json:/app/accounts.json \
151 |   outlook-manager
152 | ```
153 | 
154 | ### ☁️ 云服务器部署
155 | 
156 | #### 1. 准备服务器
157 | ```bash
158 | # 更新系统
159 | sudo apt update && sudo apt upgrade -y
160 | 
161 | # 安装Python和依赖
162 | sudo apt install python3 python3-pip nginx -y
163 | ```
164 | 
165 | #### 2. 部署应用
166 | ```bash
167 | # 上传代码到服务器
168 | scp -r . user@server:/opt/outlook-manager/
169 | 
170 | # 安装依赖
171 | cd /opt/outlook-manager
172 | pip3 install -r requirements.txt
173 | ```
174 | 
175 | #### 3. 配置Nginx
176 | ```nginx
177 | server {
178 |     listen 80;
179 |     server_name your-domain.com;
180 | 
181 |     location / {
182 |         proxy_pass http://127.0.0.1:8001;
183 |         proxy_set_header Host $host;
184 |         proxy_set_header X-Real-IP $remote_addr;
185 |     }
186 | }
187 | ```
188 | 
189 | #### 4. 配置系统服务
190 | ```bash
191 | # 创建systemd服务文件
192 | sudo nano /etc/systemd/system/outlook-manager.service
193 | ```
194 | 
195 | ```ini
196 | [Unit]
197 | Description=Outlook Manager
198 | After=network.target
199 | 
200 | [Service]
201 | Type=exec
202 | User=www-data
203 | WorkingDirectory=/opt/outlook-manager
204 | ExecStart=/usr/bin/python3 -m uvicorn main:app --host 0.0.0.0 --port 8001
205 | Restart=always
206 | 
207 | [Install]
208 | WantedBy=multi-user.target
209 | ```
210 | 
211 | ```bash
212 | # 启动服务
213 | sudo systemctl daemon-reload
214 | sudo systemctl enable outlook-manager
215 | sudo systemctl start outlook-manager
216 | ```
217 | 
218 | ### 🔧 性能优化
219 | 
220 | #### 1. 数据库优化
221 | ```bash
222 | # 如果使用SQLite，定期优化
223 | sqlite3 accounts.db "VACUUM;"
224 | ```
225 | 
226 | #### 2. 缓存配置
227 | ```python
228 | # 在main.py中调整缓存设置
229 | CACHE_EXPIRE_TIME = 300  # 5分钟
230 | MAX_CONNECTIONS = 10     # 最大连接数
231 | ```
232 | 
233 | #### 3. 负载均衡
234 | ```bash
235 | # 使用多个worker进程
236 | gunicorn main:app -w 8 -k uvicorn.workers.UvicornWorker
237 | ```
238 | 
239 | ## 🛠️ 开发指南
240 | 
241 | ### 📁 项目结构
242 | ```
243 | OutlookManager/
244 | ├── main.py              # 主应用文件
245 | ├── static/
246 | │   └── index.html       # 前端页面
247 | ├── accounts.json        # 账户数据文件
248 | ├── requirements.txt     # Python依赖
249 | ├── README.md           # 项目文档
250 | └── docs/               # 文档和图片
251 |     └── images/
252 | ```
253 | 
254 | ### 🔧 开发环境设置
255 | ```bash
256 | # 安装开发依赖
257 | pip install -r requirements-dev.txt
258 | 
259 | # 启动开发服务器（热重载）
260 | uvicorn main:app --reload --host 0.0.0.0 --port 8001
261 | ```
262 | 
263 | ### 🧪 测试
264 | ```bash
265 | # 运行测试
266 | python -m pytest tests/
267 | 
268 | # 代码覆盖率
269 | python -m pytest --cov=main tests/
270 | ```
271 | 
272 | ## 📞 支持与反馈
273 | 
274 | - **问题报告**: 请在GitHub Issues中提交
275 | - **功能建议**: 欢迎提交Pull Request
276 | - **技术支持**: 查看API文档或联系开发团队
277 | ---
278 | 
279 | **🎉 感谢使用Outlook邮件管理系统！**


--------------------------------------------------------------------------------
/batch.py:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env python3
  2 | """
  3 | Outlook邮件批量获取工具
  4 | 
  5 | 批量获取多个邮箱账户的邮件列表，并保存为JSON格式
  6 | 基于IMAP协议和OAuth2认证
  7 | 
  8 | Author: Outlook Manager Team
  9 | Version: 1.0.0
 10 | """
 11 | 
 12 | import asyncio
 13 | import email
 14 | import imaplib
 15 | import json
 16 | import logging
 17 | import re
 18 | import socket
 19 | import time
 20 | from datetime import datetime
 21 | from email.header import decode_header
 22 | from email.utils import parsedate_to_datetime
 23 | from pathlib import Path
 24 | from queue import Empty, Queue
 25 | from typing import Dict, List, Optional
 26 | import httpx
 27 | import os
 28 | 
 29 | # ============================================================================
 30 | # 配置常量
 31 | # ============================================================================
 32 | 
 33 | # 文件路径配置
 34 | ACCOUNTS_FILE = "accounts.json"
 35 | OUTPUT_DIR = "email_lists"
 36 | OUTPUT_FILE_FORMAT = "{email_id}_{date}.json"
 37 | 
 38 | # OAuth2配置
 39 | TOKEN_URL = "https://login.microsoftonline.com/consumers/oauth2/v2.0/token"
 40 | OAUTH_SCOPE = "https://outlook.office.com/IMAP.AccessAsUser.All offline_access"
 41 | 
 42 | # IMAP服务器配置
 43 | IMAP_SERVER = "outlook.live.com"
 44 | IMAP_PORT = 993
 45 | 
 46 | # 连接池配置
 47 | MAX_CONNECTIONS = 5
 48 | CONNECTION_TIMEOUT = 30
 49 | SOCKET_TIMEOUT = 15
 50 | 
 51 | # 日志配置
 52 | logging.basicConfig(
 53 |     level=logging.INFO,
 54 |     format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
 55 | )
 56 | logger = logging.getLogger(__name__)
 57 | 
 58 | 
 59 | # ============================================================================
 60 | # 数据模型
 61 | # ============================================================================
 62 | 
 63 | class AccountCredentials:
 64 |     """账户凭证模型"""
 65 |     def __init__(self, email: str, refresh_token: str, client_id: str, tags: Optional[List[str]] = None):
 66 |         self.email = email
 67 |         self.refresh_token = refresh_token
 68 |         self.client_id = client_id
 69 |         self.tags = tags or []
 70 | 
 71 | 
 72 | class EmailItem:
 73 |     """邮件项目模型"""
 74 |     def __init__(self, message_id: str, folder: str, subject: str, from_email: str, date: str, 
 75 |                  is_read: bool = False, has_attachments: bool = False, sender_initial: str = "?"):
 76 |         self.message_id = message_id
 77 |         self.folder = folder
 78 |         self.subject = subject
 79 |         self.from_email = from_email
 80 |         self.date = date
 81 |         self.is_read = is_read
 82 |         self.has_attachments = has_attachments
 83 |         self.sender_initial = sender_initial
 84 |     
 85 |     def to_dict(self):
 86 |         """转换为字典格式"""
 87 |         return {
 88 |             "message_id": self.message_id,
 89 |             "folder": self.folder,
 90 |             "subject": self.subject,
 91 |             "from_email": self.from_email,
 92 |             "date": self.date,
 93 |             "is_read": self.is_read,
 94 |             "has_attachments": self.has_attachments,
 95 |             "sender_initial": self.sender_initial
 96 |         }
 97 | 
 98 | 
 99 | # ============================================================================
100 | # IMAP连接池管理
101 | # ============================================================================
102 | 
103 | class IMAPConnectionPool:
104 |     """
105 |     IMAP连接池管理器
106 | 
107 |     提供连接复用、自动重连、连接状态监控等功能
108 |     优化IMAP连接性能，减少连接建立开销
109 |     """
110 | 
111 |     def __init__(self, max_connections: int = MAX_CONNECTIONS):
112 |         """
113 |         初始化连接池
114 | 
115 |         Args:
116 |             max_connections: 每个邮箱的最大连接数
117 |         """
118 |         self.max_connections = max_connections
119 |         self.connections = {}  # {email: Queue of connections}
120 |         self.connection_count = {}  # {email: active connection count}
121 |         self.lock = asyncio.Lock()
122 |         logger.info(f"Initialized IMAP connection pool with max_connections={max_connections}")
123 | 
124 |     async def _create_connection(self, email: str, access_token: str) -> imaplib.IMAP4_SSL:
125 |         """
126 |         创建新的IMAP连接
127 | 
128 |         Args:
129 |             email: 邮箱地址
130 |             access_token: OAuth2访问令牌
131 | 
132 |         Returns:
133 |             IMAP4_SSL: 已认证的IMAP连接
134 | 
135 |         Raises:
136 |             Exception: 连接创建失败
137 |         """
138 |         try:
139 |             # 设置全局socket超时
140 |             socket.setdefaulttimeout(SOCKET_TIMEOUT)
141 | 
142 |             # 创建SSL IMAP连接
143 |             imap_client = imaplib.IMAP4_SSL(IMAP_SERVER, IMAP_PORT)
144 | 
145 |             # 设置连接超时
146 |             imap_client.sock.settimeout(CONNECTION_TIMEOUT)
147 | 
148 |             # XOAUTH2认证
149 |             auth_string = f"user={email}\x01auth=Bearer {access_token}\x01\x01".encode('utf-8')
150 |             imap_client.authenticate('XOAUTH2', lambda _: auth_string)
151 | 
152 |             logger.info(f"Successfully created IMAP connection for {email}")
153 |             return imap_client
154 | 
155 |         except Exception as e:
156 |             logger.error(f"Failed to create IMAP connection for {email}: {e}")
157 |             raise
158 | 
159 |     async def get_connection(self, email: str, access_token: str) -> imaplib.IMAP4_SSL:
160 |         """
161 |         获取IMAP连接（从池中复用或创建新连接）
162 | 
163 |         Args:
164 |             email: 邮箱地址
165 |             access_token: OAuth2访问令牌
166 | 
167 |         Returns:
168 |             IMAP4_SSL: 可用的IMAP连接
169 | 
170 |         Raises:
171 |             Exception: 无法获取连接
172 |         """
173 |         async with self.lock:
174 |             # 初始化邮箱的连接池
175 |             if email not in self.connections:
176 |                 self.connections[email] = Queue(maxsize=self.max_connections)
177 |                 self.connection_count[email] = 0
178 | 
179 |             connection_queue = self.connections[email]
180 | 
181 |             # 尝试从池中获取现有连接
182 |             try:
183 |                 connection = connection_queue.get_nowait()
184 |                 # 测试连接有效性
185 |                 try:
186 |                     connection.noop()
187 |                     logger.debug(f"Reused existing IMAP connection for {email}")
188 |                     return connection
189 |                 except Exception:
190 |                     # 连接已失效，需要创建新连接
191 |                     logger.debug(f"Existing connection invalid for {email}, creating new one")
192 |                     self.connection_count[email] -= 1
193 |             except Empty:
194 |                 # 池中没有可用连接
195 |                 pass
196 | 
197 |             # 检查是否可以创建新连接
198 |             if self.connection_count[email] < self.max_connections:
199 |                 connection = await self._create_connection(email, access_token)
200 |                 self.connection_count[email] += 1
201 |                 return connection
202 |             else:
203 |                 # 达到最大连接数，等待可用连接
204 |                 logger.warning(f"Max connections ({self.max_connections}) reached for {email}, waiting...")
205 |                 try:
206 |                     return connection_queue.get(timeout=30)
207 |                 except Exception as e:
208 |                     logger.error(f"Timeout waiting for connection for {email}: {e}")
209 |                     raise
210 | 
211 |     async def return_connection(self, email: str, connection: imaplib.IMAP4_SSL) -> None:
212 |         """
213 |         归还连接到池中
214 | 
215 |         Args:
216 |             email: 邮箱地址
217 |             connection: 要归还的IMAP连接
218 |         """
219 |         if email not in self.connections:
220 |             logger.warning(f"Attempting to return connection for unknown email: {email}")
221 |             return
222 | 
223 |         try:
224 |             # 测试连接状态
225 |             connection.noop()
226 |             # 连接有效，归还到池中
227 |             self.connections[email].put_nowait(connection)
228 |             logger.debug(f"Successfully returned IMAP connection for {email}")
229 |         except Exception as e:
230 |             # 连接已失效，减少计数并丢弃
231 |             async with self.lock:
232 |                 if email in self.connection_count:
233 |                     self.connection_count[email] = max(0, self.connection_count[email] - 1)
234 |             logger.debug(f"Discarded invalid connection for {email}: {e}")
235 | 
236 |     async def close_all_connections(self, email: str = None) -> None:
237 |         """
238 |         关闭所有连接
239 | 
240 |         Args:
241 |             email: 指定邮箱地址，如果为None则关闭所有邮箱的连接
242 |         """
243 |         async with self.lock:
244 |             if email:
245 |                 # 关闭指定邮箱的所有连接
246 |                 if email in self.connections:
247 |                     closed_count = 0
248 |                     while not self.connections[email].empty():
249 |                         try:
250 |                             conn = self.connections[email].get_nowait()
251 |                             conn.logout()
252 |                             closed_count += 1
253 |                         except Exception as e:
254 |                             logger.debug(f"Error closing connection: {e}")
255 | 
256 |                     self.connection_count[email] = 0
257 |                     logger.info(f"Closed {closed_count} connections for {email}")
258 |             else:
259 |                 # 关闭所有邮箱的连接
260 |                 total_closed = 0
261 |                 for email_key in list(self.connections.keys()):
262 |                     count_before = self.connection_count.get(email_key, 0)
263 |                     await self.close_all_connections(email_key)
264 |                     total_closed += count_before
265 |                 logger.info(f"Closed total {total_closed} connections for all accounts")
266 | 
267 | 
268 | # ============================================================================
269 | # 辅助函数
270 | # ============================================================================
271 | 
272 | def decode_header_value(header_value: str) -> str:
273 |     """
274 |     解码邮件头字段
275 | 
276 |     处理各种编码格式的邮件头部信息，如Subject、From等
277 | 
278 |     Args:
279 |         header_value: 原始头部值
280 | 
281 |     Returns:
282 |         str: 解码后的字符串
283 |     """
284 |     if not header_value:
285 |         return ""
286 | 
287 |     try:
288 |         decoded_parts = decode_header(str(header_value))
289 |         decoded_string = ""
290 | 
291 |         for part, charset in decoded_parts:
292 |             if isinstance(part, bytes):
293 |                 try:
294 |                     # 使用指定编码或默认UTF-8解码
295 |                     encoding = charset if charset else 'utf-8'
296 |                     decoded_string += part.decode(encoding, errors='replace')
297 |                 except (LookupError, UnicodeDecodeError):
298 |                     # 编码失败时使用UTF-8强制解码
299 |                     decoded_string += part.decode('utf-8', errors='replace')
300 |             else:
301 |                 decoded_string += str(part)
302 | 
303 |         return decoded_string.strip()
304 |     except Exception as e:
305 |         logger.warning(f"Failed to decode header value '{header_value}': {e}")
306 |         return str(header_value) if header_value else ""
307 | 
308 | 
309 | # ============================================================================
310 | # 账户凭证管理模块
311 | # ============================================================================
312 | 
313 | async def get_account_credentials() -> Dict[str, AccountCredentials]:
314 |     """
315 |     从accounts.json文件获取所有邮箱的账户凭证
316 | 
317 |     Returns:
318 |         Dict[str, AccountCredentials]: 邮箱地址到账户凭证的映射
319 | 
320 |     Raises:
321 |         Exception: 文件读取失败
322 |     """
323 |     try:
324 |         # 检查账户文件是否存在
325 |         accounts_path = Path(ACCOUNTS_FILE)
326 |         if not accounts_path.exists():
327 |             logger.error(f"Accounts file {ACCOUNTS_FILE} not found")
328 |             raise FileNotFoundError(f"Accounts file {ACCOUNTS_FILE} not found")
329 | 
330 |         # 读取账户数据
331 |         with open(accounts_path, 'r', encoding='utf-8') as f:
332 |             accounts_data = json.load(f)
333 | 
334 |         # 转换为AccountCredentials对象
335 |         credentials = {}
336 |         for email_id, account_info in accounts_data.items():
337 |             # 验证账户数据完整性
338 |             required_fields = ['refresh_token', 'client_id']
339 |             missing_fields = [field for field in required_fields if not account_info.get(field)]
340 | 
341 |             if missing_fields:
342 |                 logger.warning(f"Account {email_id} missing required fields: {missing_fields}")
343 |                 continue
344 | 
345 |             credentials[email_id] = AccountCredentials(
346 |                 email=email_id,
347 |                 refresh_token=account_info['refresh_token'],
348 |                 client_id=account_info['client_id'],
349 |                 tags=account_info.get('tags', [])
350 |             )
351 | 
352 |         logger.info(f"Loaded {len(credentials)} account(s) from {ACCOUNTS_FILE}")
353 |         return credentials
354 | 
355 |     except json.JSONDecodeError as e:
356 |         logger.error(f"Invalid JSON in accounts file: {e}")
357 |         raise
358 |     except Exception as e:
359 |         logger.error(f"Unexpected error getting account credentials: {e}")
360 |         raise
361 | 
362 | 
363 | # ============================================================================
364 | # OAuth2令牌管理模块
365 | # ============================================================================
366 | 
367 | async def get_access_token(credentials: AccountCredentials) -> str:
368 |     """
369 |     使用refresh_token获取access_token
370 | 
371 |     Args:
372 |         credentials: 账户凭证信息
373 | 
374 |     Returns:
375 |         str: OAuth2访问令牌
376 | 
377 |     Raises:
378 |         Exception: 令牌获取失败
379 |     """
380 |     # 构建OAuth2请求数据
381 |     token_request_data = {
382 |         'client_id': credentials.client_id,
383 |         'grant_type': 'refresh_token',
384 |         'refresh_token': credentials.refresh_token,
385 |         'scope': OAUTH_SCOPE
386 |     }
387 | 
388 |     try:
389 |         # 发送令牌请求，明确禁用代理
390 |         async with httpx.AsyncClient(timeout=30.0, proxies=None) as client:
391 |             response = await client.post(TOKEN_URL, data=token_request_data)
392 |             response.raise_for_status()
393 | 
394 |             # 解析响应
395 |             token_data = response.json()
396 |             access_token = token_data.get('access_token')
397 | 
398 |             if not access_token:
399 |                 logger.error(f"No access token in response for {credentials.email}")
400 |                 raise ValueError("Failed to obtain access token from response")
401 | 
402 |             logger.info(f"Successfully obtained access token for {credentials.email}")
403 |             return access_token
404 | 
405 |     except httpx.HTTPStatusError as e:
406 |         logger.error(f"HTTP {e.response.status_code} error getting access token for {credentials.email}: {e}")
407 |         raise
408 |     except httpx.RequestError as e:
409 |         logger.error(f"Request error getting access token for {credentials.email}: {e}")
410 |         raise
411 |     except Exception as e:
412 |         logger.error(f"Unexpected error getting access token for {credentials.email}: {e}")
413 |         raise
414 | 
415 | 
416 | # ============================================================================
417 | # IMAP核心服务 - 邮件列表
418 | # ============================================================================
419 | 
420 | async def list_emails(imap_pool: IMAPConnectionPool, credentials: AccountCredentials) -> List[Dict]:
421 |     """
422 |     获取邮件列表
423 | 
424 |     Args:
425 |         imap_pool: IMAP连接池
426 |         credentials: 账户凭证
427 | 
428 |     Returns:
429 |         List[Dict]: 邮件列表，每个邮件包含基本信息
430 |     """
431 |     access_token = await get_access_token(credentials)
432 |     email_items = []
433 | 
434 |     # 获取IMAP连接
435 |     imap_client = await imap_pool.get_connection(credentials.email, access_token)
436 |     
437 |     try:
438 |         # 检查要获取的文件夹
439 |         folders_to_check = ["INBOX", "Junk"]
440 |         
441 |         for folder_name in folders_to_check:
442 |             try:
443 |                 # 选择文件夹
444 |                 imap_client.select(f'"{folder_name}"', readonly=True)
445 |                 
446 |                 # 搜索所有邮件
447 |                 status, messages = imap_client.search(None, "ALL")
448 |                 if status != 'OK' or not messages or not messages[0]:
449 |                     logger.warning(f"No messages found in {folder_name} for {credentials.email}")
450 |                     continue
451 |                     
452 |                 message_ids = messages[0].split()
453 |                 
454 |                 # 通常ID越大越新，所以反转列表
455 |                 message_ids.reverse()
456 |                 
457 |                 # 批量获取邮件头
458 |                 for i in range(0, len(message_ids), 100):  # 每次处理100封邮件
459 |                     batch_ids = message_ids[i:i+100]
460 |                     msg_id_sequence = b','.join(batch_ids)
461 |                     
462 |                     # 只获取必要的头部信息
463 |                     status, msg_data = imap_client.fetch(msg_id_sequence, '(FLAGS BODY.PEEK[HEADER.FIELDS (SUBJECT DATE FROM MESSAGE-ID)])')
464 | 
465 |                     if status != 'OK':
466 |                         logger.warning(f"Failed to fetch emails from {folder_name} for {credentials.email}")
467 |                         continue
468 |                     
469 |                     # 解析批量获取的数据
470 |                     for j in range(0, len(msg_data), 2):
471 |                         if j+1 >= len(msg_data):
472 |                             continue
473 |                             
474 |                         header_data = msg_data[j][1]
475 |                         
476 |                         # 从返回的原始数据中解析出msg_id
477 |                         match = re.match(rb'(\d+)\s+\(', msg_data[j][0])
478 |                         if not match:
479 |                             continue
480 |                         fetched_msg_id = match.group(1)
481 | 
482 |                         msg = email.message_from_bytes(header_data)
483 |                         
484 |                         subject = decode_header_value(msg.get('Subject', '(No Subject)'))
485 |                         from_email = decode_header_value(msg.get('From', '(Unknown Sender)'))
486 |                         date_str = msg.get('Date', '')
487 |                         
488 |                         try:
489 |                             date_obj = parsedate_to_datetime(date_str) if date_str else datetime.now()
490 |                             formatted_date = date_obj.isoformat()
491 |                         except:
492 |                             date_obj = datetime.now()
493 |                             formatted_date = date_obj.isoformat()
494 |                         
495 |                         message_id = f"{folder_name}-{fetched_msg_id.decode()}"
496 |                         
497 |                         # 提取发件人首字母
498 |                         sender_initial = "?"
499 |                         if from_email:
500 |                             # 尝试提取邮箱用户名的首字母
501 |                             email_match = re.search(r'([a-zA-Z])', from_email)
502 |                             if email_match:
503 |                                 sender_initial = email_match.group(1).upper()
504 |                         
505 |                         # 检查是否已读
506 |                         is_read = b'\\Seen' in msg_data[j][0]
507 |                         
508 |                         email_item = {
509 |                             "email_id": credentials.email,
510 |                             "message_id": message_id,
511 |                             "folder": folder_name,
512 |                             "subject": subject,
513 |                             "from_email": from_email,
514 |                             "date": formatted_date,
515 |                             "is_read": is_read,
516 |                             "sender_initial": sender_initial
517 |                         }
518 |                         email_items.append(email_item)
519 | 
520 |             except Exception as e:
521 |                 logger.warning(f"Failed to fetch emails from {folder_name} for {credentials.email}: {e}")
522 |                 continue
523 | 
524 |         # 按日期重新排序最终结果
525 |         email_items.sort(key=lambda x: x["date"], reverse=True)
526 |         
527 |         # 归还连接到池中
528 |         await imap_pool.return_connection(credentials.email, imap_client)
529 |         
530 |         logger.info(f"Retrieved {len(email_items)} emails for {credentials.email}")
531 |         return email_items
532 | 
533 |     except Exception as e:
534 |         logger.error(f"Error listing emails for {credentials.email}: {e}")
535 |         try:
536 |             # 如果出错，尝试归还连接
537 |             if hasattr(imap_client, 'state') and imap_client.state != 'LOGOUT':
538 |                 await imap_pool.return_connection(credentials.email, imap_client)
539 |         except:
540 |             pass
541 |         raise
542 | 
543 | 
544 | # ============================================================================
545 | # 主函数
546 | # ============================================================================
547 | 
548 | async def main():
549 |     """主函数"""
550 |     try:
551 |         # 创建输出目录
552 |         os.makedirs(OUTPUT_DIR, exist_ok=True)
553 |         
554 |         # 获取所有账户凭证
555 |         accounts = await get_account_credentials()
556 |         if not accounts:
557 |             logger.error("No valid accounts found")
558 |             return
559 |             
560 |         logger.info(f"Processing {len(accounts)} accounts")
561 |         
562 |         # 创建IMAP连接池
563 |         imap_pool = IMAPConnectionPool()
564 |         
565 |         # 获取当前日期作为文件名的一部分
566 |         current_date = datetime.now().strftime("%Y%m%d")
567 |         
568 |         # 处理每个账户
569 |         for email_id, credentials in accounts.items():
570 |             try:
571 |                 logger.info(f"Processing account: {email_id}")
572 |                 
573 |                 # 获取邮件列表
574 |                 emails = await list_emails(imap_pool, credentials)
575 |                 
576 |                 # 保存为JSON文件
577 |                 output_file = os.path.join(OUTPUT_DIR, OUTPUT_FILE_FORMAT.format(
578 |                     email_id=email_id.replace("@", "_at_"),
579 |                     date=current_date
580 |                 ))
581 |                 
582 |                 with open(output_file, 'w', encoding='utf-8') as f:
583 |                     json.dump(emails, f, indent=2, ensure_ascii=False)
584 |                     
585 |                 logger.info(f"Saved {len(emails)} emails to {output_file}")
586 |                 
587 |             except Exception as e:
588 |                 logger.error(f"Failed to process account {email_id}: {e}")
589 |                 continue
590 |                 
591 |         # 关闭所有连接
592 |         await imap_pool.close_all_connections()
593 |         
594 |     except Exception as e:
595 |         logger.error(f"Error in main function: {e}")
596 | 
597 | 
598 | if __name__ == "__main__":
599 |     logger.info("Starting batch email retrieval")
600 |     asyncio.run(main())
601 |     logger.info("Batch email retrieval completed")


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # Outlook邮件客户端 - 一键部署脚本
 4 | # 作者: AI Assistant
 5 | # 描述: 自动化Docker部署流程
 6 | 
 7 | set -e
 8 | 
 9 | echo "🚀 Outlook邮件客户端 - 一键部署脚本"
10 | echo "======================================="
11 | 
12 | # 检查Docker和docker-compose是否安装
13 | check_dependencies() {
14 |     echo "📋 检查依赖..."
15 |     
16 |     if ! command -v docker &> /dev/null; then
17 |         echo "❌ Docker未安装，请先安装Docker"
18 |         echo "   安装指南: https://docs.docker.com/get-docker/"
19 |         exit 1
20 |     fi
21 |     
22 |     if ! command -v docker-compose &> /dev/null; then
23 |         echo "❌ docker-compose未安装，请先安装docker-compose"
24 |         echo "   安装指南: https://docs.docker.com/compose/install/"
25 |         exit 1
26 |     fi
27 |     
28 |     echo "✅ 依赖检查通过"
29 | }
30 | 
31 | # 创建必要的目录
32 | create_directories() {
33 |     echo "📁 创建数据目录..."
34 |     mkdir -p data
35 |     
36 |     # 创建空的accounts.json如果不存在
37 |     if [ ! -f "accounts.json" ]; then
38 |         echo "{}" > accounts.json
39 |         echo "✅ 创建空的账户配置文件"
40 |     fi
41 | }
42 | 
43 | # 构建和启动服务
44 | deploy_service() {
45 |     echo "🔨 构建Docker镜像..."
46 |     docker-compose build
47 |     
48 |     echo "🚀 启动服务..."
49 |     docker-compose up -d
50 |     
51 |     echo "⏳ 等待服务启动..."
52 |     sleep 10
53 |     
54 |     # 检查服务状态
55 |     if docker-compose ps | grep -q "Up"; then
56 |         echo "✅ 服务启动成功！"
57 |         echo ""
58 |         echo "📋 服务信息:"
59 |         echo "   - Web界面: http://localhost:8000"
60 |         echo "   - API文档: http://localhost:8000/docs"
61 |         echo "   - 服务状态: docker-compose ps"
62 |         echo "   - 查看日志: docker-compose logs -f"
63 |         echo ""
64 |         echo "🎉 部署完成！"
65 |     else
66 |         echo "❌ 服务启动失败，请检查日志:"
67 |         echo "   docker-compose logs"
68 |         exit 1
69 |     fi
70 | }
71 | 
72 | # 显示管理命令
73 | show_management_commands() {
74 |     echo ""
75 |     echo "🛠️  常用管理命令:"
76 |     echo "   启动服务: docker-compose up -d"
77 |     echo "   停止服务: docker-compose down"
78 |     echo "   重启服务: docker-compose restart"
79 |     echo "   查看日志: docker-compose logs -f"
80 |     echo "   查看状态: docker-compose ps"
81 |     echo ""
82 | }
83 | 
84 | # 主流程
85 | main() {
86 |     check_dependencies
87 |     create_directories
88 |     deploy_service
89 |     show_management_commands
90 | }
91 | 
92 | # 捕获中断信号
93 | trap 'echo "❌ 部署中断"; exit 1' INT
94 | 
95 | # 执行主流程
96 | main
97 | 
98 | echo "✨ 感谢使用Outlook邮件客户端!" 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | 
 3 | services:
 4 |   outlook-email-client:
 5 |     build: .
 6 |     container_name: outlook-email-api
 7 |     ports:
 8 |       - "8000:8000"
 9 |     volumes:
10 |       # 数据持久化 - 保存用户账户信息
11 |       - ./data:/app/data
12 |       # 可选：如果需要自定义配置文件
13 |       - ./accounts.json:/app/accounts.json
14 |     environment:
15 |       # 可以通过环境变量覆盖默认配置
16 |       - PYTHONUNBUFFERED=1
17 |       - HOST=0.0.0.0
18 |       - PORT=8000
19 |     restart: unless-stopped
20 |     healthcheck:
21 |       test: ["CMD", "python", "-c", "import requests; requests.get('http://localhost:8000/api')"]
22 |       interval: 30s
23 |       timeout: 10s
24 |       retries: 3
25 |       start_period: 40s
26 |     networks:
27 |       - outlook-network
28 | 
29 | networks:
30 |   outlook-network:
31 |     driver: bridge
32 | 
33 | volumes:
34 |   outlook-data:
35 |     driver: local 


--------------------------------------------------------------------------------
/docker-entrypoint.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | # 设置默认值
 4 | HOST=${HOST:-"0.0.0.0"}
 5 | PORT=${PORT:-8000}
 6 | WORKERS=${WORKERS:-1}
 7 | 
 8 | # 创建必要的目录
 9 | mkdir -p /app/data
10 | 
11 | # 如果accounts.json不存在，创建空的
12 | if [ ! -f "/app/accounts.json" ]; then
13 |     echo "{}" > /app/accounts.json
14 | fi
15 | 
16 | # 确保文件权限正确
17 | chown appuser:appuser /app/accounts.json 2>/dev/null || true
18 | chown appuser:appuser /app/data 2>/dev/null || true
19 | 
20 | echo "🚀 启动Outlook邮件API服务..."
21 | echo "📋 配置信息:"
22 | echo "   - 主机地址: $HOST"
23 | echo "   - 端口: $PORT"
24 | echo "   - 工作进程: $WORKERS"
25 | echo "   - 数据目录: /app/data"
26 | 
27 | # 启动应用
28 | exec python main.py 


--------------------------------------------------------------------------------
/docker.env.example:
--------------------------------------------------------------------------------
 1 | # Outlook邮件API服务 - Docker环境变量配置示例
 2 | # 复制此文件为 .env 并根据需要修改配置
 3 | 
 4 | # =============================================================================
 5 | # 服务配置
 6 | # =============================================================================
 7 | 
 8 | # 服务监听地址（默认: 0.0.0.0）
 9 | HOST=0.0.0.0
10 | 
11 | # 服务监听端口（默认: 8000）
12 | PORT=8000
13 | 
14 | # 工作进程数（默认: 1，建议设置为CPU核心数）
15 | WORKERS=1
16 | 
17 | # =============================================================================
18 | # Python运行时配置
19 | # =============================================================================
20 | 
21 | # 禁用Python字节码文件生成（默认: 1）
22 | PYTHONDONTWRITEBYTECODE=1
23 | 
24 | # 强制Python输出不缓冲（默认: 1）
25 | PYTHONUNBUFFERED=1
26 | 
27 | # =============================================================================
28 | # 应用配置
29 | # =============================================================================
30 | 
31 | # 日志级别（可选: DEBUG, INFO, WARNING, ERROR）
32 | LOG_LEVEL=INFO
33 | 
34 | # 是否启用调试模式（默认: false）
35 | DEBUG=false
36 | 
37 | # =============================================================================
38 | # IMAP配置（已内置，通常无需修改）
39 | # =============================================================================
40 | 
41 | # Outlook IMAP服务器（默认: outlook.live.com）
42 | # IMAP_SERVER=outlook.live.com
43 | 
44 | # IMAP端口（默认: 993）
45 | # IMAP_PORT=993
46 | 
47 | # =============================================================================
48 | # 使用说明
49 | # =============================================================================
50 | 
51 | # 1. 复制此文件：cp docker.env.example .env
52 | # 2. 根据需要修改配置值
53 | # 3. 在 docker-compose.yml 中引用：env_file: .env
54 | # 4. 重启Docker服务：docker-compose restart 


--------------------------------------------------------------------------------
/docs/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/docs/.DS_Store


--------------------------------------------------------------------------------
/docs/images/account-add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/docs/images/account-add.png


--------------------------------------------------------------------------------
/docs/images/account-management.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/docs/images/account-management.png


--------------------------------------------------------------------------------
/docs/images/api-docs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/docs/images/api-docs.png


--------------------------------------------------------------------------------
/docs/images/email-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ddCat-main/OutlookManager/ae56e58cb14866fc5b548f3d03b0e63f464c7338/docs/images/email-list.png


--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
   1 | """
   2 | Outlook邮件管理系统 - 主应用模块
   3 | 
   4 | 基于FastAPI和IMAP协议的高性能邮件管理系统
   5 | 支持多账户管理、邮件查看、搜索过滤等功能
   6 | 
   7 | Author: Outlook Manager Team
   8 | Version: 1.0.0
   9 | """
  10 | 
  11 | import asyncio
  12 | import email
  13 | import imaplib
  14 | import json
  15 | import logging
  16 | import re
  17 | import socket
  18 | import threading
  19 | import time
  20 | from contextlib import asynccontextmanager
  21 | from datetime import datetime
  22 | from itertools import groupby
  23 | from pathlib import Path
  24 | from queue import Empty, Queue
  25 | from typing import AsyncGenerator, List, Optional
  26 | 
  27 | import httpx
  28 | from email.header import decode_header
  29 | from email.utils import parsedate_to_datetime
  30 | from fastapi import FastAPI, HTTPException, Query
  31 | from fastapi.middleware.cors import CORSMiddleware
  32 | from fastapi.responses import FileResponse
  33 | from fastapi.staticfiles import StaticFiles
  34 | from pydantic import BaseModel, EmailStr, Field
  35 | 
  36 | 
  37 | 
  38 | # ============================================================================
  39 | # 配置常量
  40 | # ============================================================================
  41 | 
  42 | # 文件路径配置
  43 | ACCOUNTS_FILE = "accounts.json"
  44 | 
  45 | # OAuth2配置
  46 | TOKEN_URL = "https://login.microsoftonline.com/consumers/oauth2/v2.0/token"
  47 | OAUTH_SCOPE = "https://outlook.office.com/IMAP.AccessAsUser.All offline_access"
  48 | 
  49 | # IMAP服务器配置
  50 | IMAP_SERVER = "outlook.live.com"
  51 | IMAP_PORT = 993
  52 | 
  53 | # 连接池配置
  54 | MAX_CONNECTIONS = 5
  55 | CONNECTION_TIMEOUT = 30
  56 | SOCKET_TIMEOUT = 15
  57 | 
  58 | # 缓存配置
  59 | CACHE_EXPIRE_TIME = 60  # 缓存过期时间（秒）
  60 | 
  61 | # 日志配置
  62 | logging.basicConfig(
  63 |     level=logging.INFO,
  64 |     format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
  65 | )
  66 | logger = logging.getLogger(__name__)
  67 | 
  68 | 
  69 | # ============================================================================
  70 | # 数据模型 (Pydantic Models)
  71 | # ============================================================================
  72 | 
  73 | class AccountCredentials(BaseModel):
  74 |     """账户凭证模型"""
  75 |     email: EmailStr
  76 |     refresh_token: str
  77 |     client_id: str
  78 |     tags: Optional[List[str]] = Field(default=[])
  79 | 
  80 |     class Config:
  81 |         schema_extra = {
  82 |             "example": {
  83 |                 "email": "user@outlook.com",
  84 |                 "refresh_token": "0.AXoA...",
  85 |                 "client_id": "your-client-id",
  86 |                 "tags": ["工作", "个人"]
  87 |             }
  88 |         }
  89 | 
  90 | 
  91 | class EmailItem(BaseModel):
  92 |     """邮件项目模型"""
  93 |     message_id: str
  94 |     folder: str
  95 |     subject: str
  96 |     from_email: str
  97 |     date: str
  98 |     is_read: bool = False
  99 |     has_attachments: bool = False
 100 |     sender_initial: str = "?"
 101 | 
 102 |     class Config:
 103 |         schema_extra = {
 104 |             "example": {
 105 |                 "message_id": "INBOX-123",
 106 |                 "folder": "INBOX",
 107 |                 "subject": "Welcome to Augment Code",
 108 |                 "from_email": "noreply@augmentcode.com",
 109 |                 "date": "2024-01-01T12:00:00",
 110 |                 "is_read": False,
 111 |                 "has_attachments": False,
 112 |                 "sender_initial": "A"
 113 |             }
 114 |         }
 115 | 
 116 | 
 117 | class EmailListResponse(BaseModel):
 118 |     """邮件列表响应模型"""
 119 |     email_id: str
 120 |     folder_view: str
 121 |     page: int
 122 |     page_size: int
 123 |     total_emails: int
 124 |     emails: List[EmailItem]
 125 | 
 126 | 
 127 | class DualViewEmailResponse(BaseModel):
 128 |     """双栏视图邮件响应模型"""
 129 |     email_id: str
 130 |     inbox_emails: List[EmailItem]
 131 |     junk_emails: List[EmailItem]
 132 |     inbox_total: int
 133 |     junk_total: int
 134 | 
 135 | 
 136 | class EmailDetailsResponse(BaseModel):
 137 |     """邮件详情响应模型"""
 138 |     message_id: str
 139 |     subject: str
 140 |     from_email: str
 141 |     to_email: str
 142 |     date: str
 143 |     body_plain: Optional[str] = None
 144 |     body_html: Optional[str] = None
 145 | 
 146 | 
 147 | class AccountResponse(BaseModel):
 148 |     """账户操作响应模型"""
 149 |     email_id: str
 150 |     message: str
 151 | 
 152 | 
 153 | class AccountInfo(BaseModel):
 154 |     """账户信息模型"""
 155 |     email_id: str
 156 |     client_id: str
 157 |     status: str = "active"
 158 |     tags: List[str] = []
 159 | 
 160 | 
 161 | class AccountListResponse(BaseModel):
 162 |     """账户列表响应模型"""
 163 |     total_accounts: int
 164 |     page: int
 165 |     page_size: int
 166 |     total_pages: int
 167 |     accounts: List[AccountInfo]
 168 | 
 169 | class UpdateTagsRequest(BaseModel):
 170 |     """更新标签请求模型"""
 171 |     tags: List[str]
 172 | 
 173 | # ============================================================================
 174 | # IMAP连接池管理
 175 | # ============================================================================
 176 | 
 177 | class IMAPConnectionPool:
 178 |     """
 179 |     IMAP连接池管理器
 180 | 
 181 |     提供连接复用、自动重连、连接状态监控等功能
 182 |     优化IMAP连接性能，减少连接建立开销
 183 |     """
 184 | 
 185 |     def __init__(self, max_connections: int = MAX_CONNECTIONS):
 186 |         """
 187 |         初始化连接池
 188 | 
 189 |         Args:
 190 |             max_connections: 每个邮箱的最大连接数
 191 |         """
 192 |         self.max_connections = max_connections
 193 |         self.connections = {}  # {email: Queue of connections}
 194 |         self.connection_count = {}  # {email: active connection count}
 195 |         self.lock = threading.Lock()
 196 |         logger.info(f"Initialized IMAP connection pool with max_connections={max_connections}")
 197 | 
 198 |     def _create_connection(self, email: str, access_token: str) -> imaplib.IMAP4_SSL:
 199 |         """
 200 |         创建新的IMAP连接
 201 | 
 202 |         Args:
 203 |             email: 邮箱地址
 204 |             access_token: OAuth2访问令牌
 205 | 
 206 |         Returns:
 207 |             IMAP4_SSL: 已认证的IMAP连接
 208 | 
 209 |         Raises:
 210 |             Exception: 连接创建失败
 211 |         """
 212 |         try:
 213 |             # 设置全局socket超时
 214 |             socket.setdefaulttimeout(SOCKET_TIMEOUT)
 215 | 
 216 |             # 创建SSL IMAP连接
 217 |             imap_client = imaplib.IMAP4_SSL(IMAP_SERVER, IMAP_PORT)
 218 | 
 219 |             # 设置连接超时
 220 |             imap_client.sock.settimeout(CONNECTION_TIMEOUT)
 221 | 
 222 |             # XOAUTH2认证
 223 |             auth_string = f"user={email}\x01auth=Bearer {access_token}\x01\x01".encode('utf-8')
 224 |             imap_client.authenticate('XOAUTH2', lambda _: auth_string)
 225 | 
 226 |             logger.info(f"Successfully created IMAP connection for {email}")
 227 |             return imap_client
 228 | 
 229 |         except Exception as e:
 230 |             logger.error(f"Failed to create IMAP connection for {email}: {e}")
 231 |             raise
 232 | 
 233 |     def get_connection(self, email: str, access_token: str) -> imaplib.IMAP4_SSL:
 234 |         """
 235 |         获取IMAP连接（从池中复用或创建新连接）
 236 | 
 237 |         Args:
 238 |             email: 邮箱地址
 239 |             access_token: OAuth2访问令牌
 240 | 
 241 |         Returns:
 242 |             IMAP4_SSL: 可用的IMAP连接
 243 | 
 244 |         Raises:
 245 |             Exception: 无法获取连接
 246 |         """
 247 |         with self.lock:
 248 |             # 初始化邮箱的连接池
 249 |             if email not in self.connections:
 250 |                 self.connections[email] = Queue(maxsize=self.max_connections)
 251 |                 self.connection_count[email] = 0
 252 | 
 253 |             connection_queue = self.connections[email]
 254 | 
 255 |             # 尝试从池中获取现有连接
 256 |             try:
 257 |                 connection = connection_queue.get_nowait()
 258 |                 # 测试连接有效性
 259 |                 try:
 260 |                     connection.noop()
 261 |                     logger.debug(f"Reused existing IMAP connection for {email}")
 262 |                     return connection
 263 |                 except Exception:
 264 |                     # 连接已失效，需要创建新连接
 265 |                     logger.debug(f"Existing connection invalid for {email}, creating new one")
 266 |                     self.connection_count[email] -= 1
 267 |             except Empty:
 268 |                 # 池中没有可用连接
 269 |                 pass
 270 | 
 271 |             # 检查是否可以创建新连接
 272 |             if self.connection_count[email] < self.max_connections:
 273 |                 connection = self._create_connection(email, access_token)
 274 |                 self.connection_count[email] += 1
 275 |                 return connection
 276 |             else:
 277 |                 # 达到最大连接数，等待可用连接
 278 |                 logger.warning(f"Max connections ({self.max_connections}) reached for {email}, waiting...")
 279 |                 try:
 280 |                     return connection_queue.get(timeout=30)
 281 |                 except Exception as e:
 282 |                     logger.error(f"Timeout waiting for connection for {email}: {e}")
 283 |                     raise
 284 | 
 285 |     def return_connection(self, email: str, connection: imaplib.IMAP4_SSL) -> None:
 286 |         """
 287 |         归还连接到池中
 288 | 
 289 |         Args:
 290 |             email: 邮箱地址
 291 |             connection: 要归还的IMAP连接
 292 |         """
 293 |         if email not in self.connections:
 294 |             logger.warning(f"Attempting to return connection for unknown email: {email}")
 295 |             return
 296 | 
 297 |         try:
 298 |             # 测试连接状态
 299 |             connection.noop()
 300 |             # 连接有效，归还到池中
 301 |             self.connections[email].put_nowait(connection)
 302 |             logger.debug(f"Successfully returned IMAP connection for {email}")
 303 |         except Exception as e:
 304 |             # 连接已失效，减少计数并丢弃
 305 |             with self.lock:
 306 |                 if email in self.connection_count:
 307 |                     self.connection_count[email] = max(0, self.connection_count[email] - 1)
 308 |             logger.debug(f"Discarded invalid connection for {email}: {e}")
 309 | 
 310 |     def close_all_connections(self, email: str = None) -> None:
 311 |         """
 312 |         关闭所有连接
 313 | 
 314 |         Args:
 315 |             email: 指定邮箱地址，如果为None则关闭所有邮箱的连接
 316 |         """
 317 |         with self.lock:
 318 |             if email:
 319 |                 # 关闭指定邮箱的所有连接
 320 |                 if email in self.connections:
 321 |                     closed_count = 0
 322 |                     while not self.connections[email].empty():
 323 |                         try:
 324 |                             conn = self.connections[email].get_nowait()
 325 |                             conn.logout()
 326 |                             closed_count += 1
 327 |                         except Exception as e:
 328 |                             logger.debug(f"Error closing connection: {e}")
 329 | 
 330 |                     self.connection_count[email] = 0
 331 |                     logger.info(f"Closed {closed_count} connections for {email}")
 332 |             else:
 333 |                 # 关闭所有邮箱的连接
 334 |                 total_closed = 0
 335 |                 for email_key in list(self.connections.keys()):
 336 |                     count_before = self.connection_count.get(email_key, 0)
 337 |                     self.close_all_connections(email_key)
 338 |                     total_closed += count_before
 339 |                 logger.info(f"Closed total {total_closed} connections for all accounts")
 340 | 
 341 | # ============================================================================
 342 | # 全局实例和缓存管理
 343 | # ============================================================================
 344 | 
 345 | # 全局连接池实例
 346 | imap_pool = IMAPConnectionPool()
 347 | 
 348 | # 内存缓存存储
 349 | email_cache = {}  # 邮件列表缓存
 350 | email_count_cache = {}  # 邮件总数缓存，用于检测新邮件
 351 | 
 352 | 
 353 | def get_cache_key(email: str, folder: str, page: int, page_size: int) -> str:
 354 |     """
 355 |     生成缓存键
 356 | 
 357 |     Args:
 358 |         email: 邮箱地址
 359 |         folder: 文件夹名称
 360 |         page: 页码
 361 |         page_size: 每页大小
 362 | 
 363 |     Returns:
 364 |         str: 缓存键
 365 |     """
 366 |     return f"{email}:{folder}:{page}:{page_size}"
 367 | 
 368 | 
 369 | def get_cached_emails(cache_key: str, force_refresh: bool = False):
 370 |     """
 371 |     获取缓存的邮件列表
 372 | 
 373 |     Args:
 374 |         cache_key: 缓存键
 375 |         force_refresh: 是否强制刷新缓存
 376 | 
 377 |     Returns:
 378 |         缓存的数据或None
 379 |     """
 380 |     if force_refresh:
 381 |         # 强制刷新，删除现有缓存
 382 |         if cache_key in email_cache:
 383 |             del email_cache[cache_key]
 384 |             logger.debug(f"Force refresh: removed cache for {cache_key}")
 385 |         return None
 386 | 
 387 |     if cache_key in email_cache:
 388 |         cached_data, timestamp = email_cache[cache_key]
 389 |         if time.time() - timestamp < CACHE_EXPIRE_TIME:
 390 |             logger.debug(f"Cache hit for {cache_key}")
 391 |             return cached_data
 392 |         else:
 393 |             # 缓存已过期，删除
 394 |             del email_cache[cache_key]
 395 |             logger.debug(f"Cache expired for {cache_key}")
 396 | 
 397 |     return None
 398 | 
 399 | 
 400 | def set_cached_emails(cache_key: str, data) -> None:
 401 |     """
 402 |     设置邮件列表缓存
 403 | 
 404 |     Args:
 405 |         cache_key: 缓存键
 406 |         data: 要缓存的数据
 407 |     """
 408 |     email_cache[cache_key] = (data, time.time())
 409 |     logger.debug(f"Cache set for {cache_key}")
 410 | 
 411 | 
 412 | def clear_email_cache(email: str = None) -> None:
 413 |     """
 414 |     清除邮件缓存
 415 | 
 416 |     Args:
 417 |         email: 指定邮箱地址，如果为None则清除所有缓存
 418 |     """
 419 |     if email:
 420 |         # 清除特定邮箱的缓存
 421 |         keys_to_delete = [key for key in email_cache.keys() if key.startswith(f"{email}:")]
 422 |         for key in keys_to_delete:
 423 |             del email_cache[key]
 424 |         logger.info(f"Cleared cache for {email} ({len(keys_to_delete)} entries)")
 425 |     else:
 426 |         # 清除所有缓存
 427 |         cache_count = len(email_cache)
 428 |         email_cache.clear()
 429 |         email_count_cache.clear()
 430 |         logger.info(f"Cleared all email cache ({cache_count} entries)")
 431 | 
 432 | # ============================================================================
 433 | # 邮件处理辅助函数
 434 | # ============================================================================
 435 | 
 436 | def decode_header_value(header_value: str) -> str:
 437 |     """
 438 |     解码邮件头字段
 439 | 
 440 |     处理各种编码格式的邮件头部信息，如Subject、From等
 441 | 
 442 |     Args:
 443 |         header_value: 原始头部值
 444 | 
 445 |     Returns:
 446 |         str: 解码后的字符串
 447 |     """
 448 |     if not header_value:
 449 |         return ""
 450 | 
 451 |     try:
 452 |         decoded_parts = decode_header(str(header_value))
 453 |         decoded_string = ""
 454 | 
 455 |         for part, charset in decoded_parts:
 456 |             if isinstance(part, bytes):
 457 |                 try:
 458 |                     # 使用指定编码或默认UTF-8解码
 459 |                     encoding = charset if charset else 'utf-8'
 460 |                     decoded_string += part.decode(encoding, errors='replace')
 461 |                 except (LookupError, UnicodeDecodeError):
 462 |                     # 编码失败时使用UTF-8强制解码
 463 |                     decoded_string += part.decode('utf-8', errors='replace')
 464 |             else:
 465 |                 decoded_string += str(part)
 466 | 
 467 |         return decoded_string.strip()
 468 |     except Exception as e:
 469 |         logger.warning(f"Failed to decode header value '{header_value}': {e}")
 470 |         return str(header_value) if header_value else ""
 471 | 
 472 | 
 473 | def extract_email_content(email_message: email.message.EmailMessage) -> tuple[str, str]:
 474 |     """
 475 |     提取邮件的纯文本和HTML内容
 476 | 
 477 |     Args:
 478 |         email_message: 邮件消息对象
 479 | 
 480 |     Returns:
 481 |         tuple[str, str]: (纯文本内容, HTML内容)
 482 |     """
 483 |     body_plain = ""
 484 |     body_html = ""
 485 | 
 486 |     try:
 487 |         if email_message.is_multipart():
 488 |             # 处理多部分邮件
 489 |             for part in email_message.walk():
 490 |                 content_type = part.get_content_type()
 491 |                 content_disposition = str(part.get("Content-Disposition", ""))
 492 | 
 493 |                 # 跳过附件
 494 |                 if 'attachment' not in content_disposition.lower():
 495 |                     try:
 496 |                         charset = part.get_content_charset() or 'utf-8'
 497 |                         payload = part.get_payload(decode=True)
 498 | 
 499 |                         if payload:
 500 |                             decoded_content = payload.decode(charset, errors='replace')
 501 | 
 502 |                             if content_type == 'text/plain' and not body_plain:
 503 |                                 body_plain = decoded_content
 504 |                             elif content_type == 'text/html' and not body_html:
 505 |                                 body_html = decoded_content
 506 | 
 507 |                     except Exception as e:
 508 |                         logger.warning(f"Failed to decode email part ({content_type}): {e}")
 509 |         else:
 510 |             # 处理单部分邮件
 511 |             try:
 512 |                 charset = email_message.get_content_charset() or 'utf-8'
 513 |                 payload = email_message.get_payload(decode=True)
 514 | 
 515 |                 if payload:
 516 |                     content = payload.decode(charset, errors='replace')
 517 |                     content_type = email_message.get_content_type()
 518 | 
 519 |                     if content_type == 'text/plain':
 520 |                         body_plain = content
 521 |                     elif content_type == 'text/html':
 522 |                         body_html = content
 523 |                     else:
 524 |                         # 默认当作纯文本处理
 525 |                         body_plain = content
 526 | 
 527 |             except Exception as e:
 528 |                 logger.warning(f"Failed to decode single-part email body: {e}")
 529 | 
 530 |     except Exception as e:
 531 |         logger.error(f"Error extracting email content: {e}")
 532 | 
 533 |     return body_plain.strip(), body_html.strip()
 534 | 
 535 | 
 536 | # ============================================================================
 537 | # 账户凭证管理模块
 538 | # ============================================================================
 539 | 
 540 | async def get_account_credentials(email_id: str) -> AccountCredentials:
 541 |     """
 542 |     从accounts.json文件获取指定邮箱的账户凭证
 543 | 
 544 |     Args:
 545 |         email_id: 邮箱地址
 546 | 
 547 |     Returns:
 548 |         AccountCredentials: 账户凭证对象
 549 | 
 550 |     Raises:
 551 |         HTTPException: 账户不存在或文件读取失败
 552 |     """
 553 |     try:
 554 |         # 检查账户文件是否存在
 555 |         accounts_path = Path(ACCOUNTS_FILE)
 556 |         if not accounts_path.exists():
 557 |             logger.warning(f"Accounts file {ACCOUNTS_FILE} not found")
 558 |             raise HTTPException(status_code=404, detail="No accounts configured")
 559 | 
 560 |         # 读取账户数据
 561 |         with open(accounts_path, 'r', encoding='utf-8') as f:
 562 |             accounts = json.load(f)
 563 | 
 564 |         # 检查指定邮箱是否存在
 565 |         if email_id not in accounts:
 566 |             logger.warning(f"Account {email_id} not found in accounts file")
 567 |             raise HTTPException(status_code=404, detail=f"Account {email_id} not found")
 568 | 
 569 |         # 验证账户数据完整性
 570 |         account_data = accounts[email_id]
 571 |         required_fields = ['refresh_token', 'client_id']
 572 |         missing_fields = [field for field in required_fields if not account_data.get(field)]
 573 | 
 574 |         if missing_fields:
 575 |             logger.error(f"Account {email_id} missing required fields: {missing_fields}")
 576 |             raise HTTPException(status_code=500, detail="Account configuration incomplete")
 577 | 
 578 |         return AccountCredentials(
 579 |             email=email_id,
 580 |             refresh_token=account_data['refresh_token'],
 581 |             client_id=account_data['client_id']
 582 |         )
 583 | 
 584 |     except HTTPException:
 585 |         # 重新抛出HTTP异常
 586 |         raise
 587 |     except json.JSONDecodeError as e:
 588 |         logger.error(f"Invalid JSON in accounts file: {e}")
 589 |         raise HTTPException(status_code=500, detail="Accounts file format error")
 590 |     except Exception as e:
 591 |         logger.error(f"Unexpected error getting account credentials for {email_id}: {e}")
 592 |         raise HTTPException(status_code=500, detail="Internal server error")
 593 | 
 594 | 
 595 | async def save_account_credentials(email_id: str, credentials: AccountCredentials) -> None:
 596 |     """保存账户凭证到accounts.json"""
 597 |     try:
 598 |         accounts = {}
 599 |         if Path(ACCOUNTS_FILE).exists():
 600 |             with open(ACCOUNTS_FILE, 'r', encoding='utf-8') as f:
 601 |                 accounts = json.load(f)
 602 | 
 603 |         accounts[email_id] = {
 604 |             'refresh_token': credentials.refresh_token,
 605 |             'client_id': credentials.client_id,
 606 |             'tags': credentials.tags if hasattr(credentials, 'tags') else []
 607 |         }
 608 | 
 609 |         with open(ACCOUNTS_FILE, 'w', encoding='utf-8') as f:
 610 |             json.dump(accounts, f, indent=2, ensure_ascii=False)
 611 | 
 612 |         logger.info(f"Account credentials saved for {email_id}")
 613 |     except Exception as e:
 614 |         logger.error(f"Error saving account credentials: {e}")
 615 |         raise HTTPException(status_code=500, detail="Failed to save account")
 616 | 
 617 | 
 618 | async def get_all_accounts(
 619 |     page: int = 1, 
 620 |     page_size: int = 10, 
 621 |     email_search: Optional[str] = None,
 622 |     tag_search: Optional[str] = None
 623 | ) -> AccountListResponse:
 624 |     """获取所有已加载的邮箱账户列表，支持分页和搜索"""
 625 |     try:
 626 |         if not Path(ACCOUNTS_FILE).exists():
 627 |             return AccountListResponse(
 628 |                 total_accounts=0, 
 629 |                 page=page, 
 630 |                 page_size=page_size, 
 631 |                 total_pages=0, 
 632 |                 accounts=[]
 633 |             )
 634 | 
 635 |         with open(ACCOUNTS_FILE, 'r', encoding='utf-8') as f:
 636 |             accounts_data = json.load(f)
 637 | 
 638 |         all_accounts = []
 639 |         for email_id, account_info in accounts_data.items():
 640 |             # 验证账户状态（可选：检查token是否有效）
 641 |             status = "active"
 642 |             try:
 643 |                 # 简单验证：检查必要字段是否存在
 644 |                 if not account_info.get('refresh_token') or not account_info.get('client_id'):
 645 |                     status = "invalid"
 646 |             except Exception:
 647 |                 status = "error"
 648 | 
 649 |             account = AccountInfo(
 650 |                 email_id=email_id,
 651 |                 client_id=account_info.get('client_id', ''),
 652 |                 status=status,
 653 |                 tags=account_info.get('tags', [])
 654 |             )
 655 |             all_accounts.append(account)
 656 | 
 657 |         # 应用搜索过滤
 658 |         filtered_accounts = all_accounts
 659 |         
 660 |         # 邮箱账号模糊搜索
 661 |         if email_search:
 662 |             email_search_lower = email_search.lower()
 663 |             filtered_accounts = [
 664 |                 acc for acc in filtered_accounts 
 665 |                 if email_search_lower in acc.email_id.lower()
 666 |             ]
 667 |         
 668 |         # 标签模糊搜索
 669 |         if tag_search:
 670 |             tag_search_lower = tag_search.lower()
 671 |             filtered_accounts = [
 672 |                 acc for acc in filtered_accounts 
 673 |                 if any(tag_search_lower in tag.lower() for tag in acc.tags)
 674 |             ]
 675 | 
 676 |         # 计算分页信息
 677 |         total_accounts = len(filtered_accounts)
 678 |         total_pages = (total_accounts + page_size - 1) // page_size if total_accounts > 0 else 0
 679 |         
 680 |         # 应用分页
 681 |         start_index = (page - 1) * page_size
 682 |         end_index = start_index + page_size
 683 |         paginated_accounts = filtered_accounts[start_index:end_index]
 684 | 
 685 |         return AccountListResponse(
 686 |             total_accounts=total_accounts,
 687 |             page=page,
 688 |             page_size=page_size,
 689 |             total_pages=total_pages,
 690 |             accounts=paginated_accounts
 691 |         )
 692 | 
 693 |     except json.JSONDecodeError:
 694 |         logger.error("Failed to parse accounts.json")
 695 |         raise HTTPException(status_code=500, detail="Failed to read accounts file")
 696 |     except Exception as e:
 697 |         logger.error(f"Error getting accounts list: {e}")
 698 |         raise HTTPException(status_code=500, detail="Internal server error")
 699 | 
 700 | 
 701 | # ============================================================================
 702 | # OAuth2令牌管理模块
 703 | # ============================================================================
 704 | 
 705 | async def get_access_token(credentials: AccountCredentials) -> str:
 706 |     """
 707 |     使用refresh_token获取access_token
 708 | 
 709 |     Args:
 710 |         credentials: 账户凭证信息
 711 | 
 712 |     Returns:
 713 |         str: OAuth2访问令牌
 714 | 
 715 |     Raises:
 716 |         HTTPException: 令牌获取失败
 717 |     """
 718 |     # 构建OAuth2请求数据
 719 |     token_request_data = {
 720 |         'client_id': credentials.client_id,
 721 |         'grant_type': 'refresh_token',
 722 |         'refresh_token': credentials.refresh_token,
 723 |         'scope': OAUTH_SCOPE
 724 |     }
 725 | 
 726 |     try:
 727 |         # 发送令牌请求
 728 |         async with httpx.AsyncClient(timeout=30.0) as client:
 729 |             response = await client.post(TOKEN_URL, data=token_request_data)
 730 |             response.raise_for_status()
 731 | 
 732 |             # 解析响应
 733 |             token_data = response.json()
 734 |             access_token = token_data.get('access_token')
 735 | 
 736 |             if not access_token:
 737 |                 logger.error(f"No access token in response for {credentials.email}")
 738 |                 raise HTTPException(
 739 |                     status_code=401,
 740 |                     detail="Failed to obtain access token from response"
 741 |                 )
 742 | 
 743 |             logger.info(f"Successfully obtained access token for {credentials.email}")
 744 |             return access_token
 745 | 
 746 |     except httpx.HTTPStatusError as e:
 747 |         logger.error(f"HTTP {e.response.status_code} error getting access token for {credentials.email}: {e}")
 748 |         if e.response.status_code == 400:
 749 |             raise HTTPException(status_code=401, detail="Invalid refresh token or client credentials")
 750 |         else:
 751 |             raise HTTPException(status_code=401, detail="Authentication failed")
 752 |     except httpx.RequestError as e:
 753 |         logger.error(f"Request error getting access token for {credentials.email}: {e}")
 754 |         raise HTTPException(status_code=500, detail="Network error during token acquisition")
 755 |     except Exception as e:
 756 |         logger.error(f"Unexpected error getting access token for {credentials.email}: {e}")
 757 |         raise HTTPException(status_code=500, detail="Token acquisition failed")
 758 | 
 759 | 
 760 | # ============================================================================
 761 | # IMAP核心服务 - 邮件列表
 762 | # ============================================================================
 763 | 
 764 | async def list_emails(credentials: AccountCredentials, folder: str, page: int, page_size: int, force_refresh: bool = False) -> EmailListResponse:
 765 |     """获取邮件列表 - 优化版本"""
 766 | 
 767 |     # 检查缓存
 768 |     cache_key = get_cache_key(credentials.email, folder, page, page_size)
 769 |     cached_result = get_cached_emails(cache_key, force_refresh)
 770 |     if cached_result:
 771 |         return cached_result
 772 | 
 773 |     access_token = await get_access_token(credentials)
 774 | 
 775 |     def _sync_list_emails():
 776 |         imap_client = None
 777 |         try:
 778 |             # 从连接池获取连接
 779 |             imap_client = imap_pool.get_connection(credentials.email, access_token)
 780 |             
 781 |             all_emails_data = []
 782 |             
 783 |             # 根据folder参数决定要获取的文件夹
 784 |             folders_to_check = []
 785 |             if folder == "inbox":
 786 |                 folders_to_check = ["INBOX"]
 787 |             elif folder == "junk":
 788 |                 folders_to_check = ["Junk"]
 789 |             else:  # folder == "all"
 790 |                 folders_to_check = ["INBOX", "Junk"]
 791 |             
 792 |             for folder_name in folders_to_check:
 793 |                 try:
 794 |                     # 选择文件夹
 795 |                     imap_client.select(f'"{folder_name}"', readonly=True)
 796 |                     
 797 |                     # 搜索所有邮件
 798 |                     status, messages = imap_client.search(None, "ALL")
 799 |                     if status != 'OK' or not messages or not messages[0]:
 800 |                         continue
 801 |                         
 802 |                     message_ids = messages[0].split()
 803 |                     
 804 |                     # 按日期排序所需的数据（邮件ID和日期）
 805 |                     # 为了避免获取所有邮件的日期，我们假设ID顺序与日期大致相关
 806 |                     message_ids.reverse() # 通常ID越大越新
 807 |                     
 808 |                     for msg_id in message_ids:
 809 |                         all_emails_data.append({
 810 |                             "message_id_raw": msg_id,
 811 |                             "folder": folder_name
 812 |                         })
 813 | 
 814 |                 except Exception as e:
 815 |                     logger.warning(f"Failed to access folder {folder_name}: {e}")
 816 |                     continue
 817 |             
 818 |             # 对所有文件夹的邮件进行统一分页
 819 |             total_emails = len(all_emails_data)
 820 |             start_index = (page - 1) * page_size
 821 |             end_index = start_index + page_size
 822 |             paginated_email_meta = all_emails_data[start_index:end_index]
 823 | 
 824 |             email_items = []
 825 |             # 按文件夹分组批量获取
 826 |             paginated_email_meta.sort(key=lambda x: x['folder'])
 827 |             
 828 |             for folder_name, group in groupby(paginated_email_meta, key=lambda x: x['folder']):
 829 |                 try:
 830 |                     imap_client.select(f'"{folder_name}"', readonly=True)
 831 |                     
 832 |                     msg_ids_to_fetch = [item['message_id_raw'] for item in group]
 833 |                     if not msg_ids_to_fetch:
 834 |                         continue
 835 | 
 836 |                     # 批量获取邮件头 - 优化获取字段
 837 |                     msg_id_sequence = b','.join(msg_ids_to_fetch)
 838 |                     # 只获取必要的头部信息，减少数据传输
 839 |                     status, msg_data = imap_client.fetch(msg_id_sequence, '(FLAGS BODY.PEEK[HEADER.FIELDS (SUBJECT DATE FROM MESSAGE-ID)])')
 840 | 
 841 |                     if status != 'OK':
 842 |                         continue
 843 |                     
 844 |                     # 解析批量获取的数据
 845 |                     for i in range(0, len(msg_data), 2):
 846 |                         header_data = msg_data[i][1]
 847 |                         
 848 |                         # 从返回的原始数据中解析出msg_id
 849 |                         # e.g., b'1 (BODY[HEADER.FIELDS (SUBJECT DATE FROM)] {..}'
 850 |                         match = re.match(rb'(\d+)\s+\(', msg_data[i][0])
 851 |                         if not match:
 852 |                             continue
 853 |                         fetched_msg_id = match.group(1)
 854 | 
 855 |                         msg = email.message_from_bytes(header_data)
 856 |                         
 857 |                         subject = decode_header_value(msg.get('Subject', '(No Subject)'))
 858 |                         from_email = decode_header_value(msg.get('From', '(Unknown Sender)'))
 859 |                         date_str = msg.get('Date', '')
 860 |                         
 861 |                         try:
 862 |                             date_obj = parsedate_to_datetime(date_str) if date_str else datetime.now()
 863 |                             formatted_date = date_obj.isoformat()
 864 |                         except:
 865 |                             date_obj = datetime.now()
 866 |                             formatted_date = date_obj.isoformat()
 867 |                         
 868 |                         message_id = f"{folder_name}-{fetched_msg_id.decode()}"
 869 |                         
 870 |                         # 提取发件人首字母
 871 |                         sender_initial = "?"
 872 |                         if from_email:
 873 |                             # 尝试提取邮箱用户名的首字母
 874 |                             email_match = re.search(r'([a-zA-Z])', from_email)
 875 |                             if email_match:
 876 |                                 sender_initial = email_match.group(1).upper()
 877 |                         
 878 |                         email_item = EmailItem(
 879 |                             message_id=message_id,
 880 |                             folder=folder_name,
 881 |                             subject=subject,
 882 |                             from_email=from_email,
 883 |                             date=formatted_date,
 884 |                             is_read=False,  # 简化处理，实际可通过IMAP flags判断
 885 |                             has_attachments=False,  # 简化处理，实际需要检查邮件结构
 886 |                             sender_initial=sender_initial
 887 |                         )
 888 |                         email_items.append(email_item)
 889 | 
 890 |                 except Exception as e:
 891 |                     logger.warning(f"Failed to fetch bulk emails from {folder_name}: {e}")
 892 |                     continue
 893 | 
 894 |             # 按日期重新排序最终结果
 895 |             email_items.sort(key=lambda x: x.date, reverse=True)
 896 | 
 897 |             # 归还连接到池中
 898 |             imap_pool.return_connection(credentials.email, imap_client)
 899 | 
 900 |             result = EmailListResponse(
 901 |                 email_id=credentials.email,
 902 |                 folder_view=folder,
 903 |                 page=page,
 904 |                 page_size=page_size,
 905 |                 total_emails=total_emails,
 906 |                 emails=email_items
 907 |             )
 908 | 
 909 |             # 设置缓存
 910 |             set_cached_emails(cache_key, result)
 911 | 
 912 |             return result
 913 | 
 914 |         except Exception as e:
 915 |             logger.error(f"Error listing emails: {e}")
 916 |             if imap_client:
 917 |                 try:
 918 |                     # 如果出错，尝试归还连接或关闭
 919 |                     if hasattr(imap_client, 'state') and imap_client.state != 'LOGOUT':
 920 |                         imap_pool.return_connection(credentials.email, imap_client)
 921 |                     else:
 922 |                         # 连接已断开，从池中移除
 923 |                         pass
 924 |                 except:
 925 |                     pass
 926 |             raise HTTPException(status_code=500, detail="Failed to retrieve emails")
 927 |     
 928 |     # 在线程池中运行同步代码
 929 |     return await asyncio.to_thread(_sync_list_emails)
 930 | 
 931 | 
 932 | # ============================================================================
 933 | # IMAP核心服务 - 邮件详情
 934 | # ============================================================================
 935 | 
 936 | async def get_email_details(credentials: AccountCredentials, message_id: str) -> EmailDetailsResponse:
 937 |     """获取邮件详细内容 - 优化版本"""
 938 |     # 解析复合message_id
 939 |     try:
 940 |         folder_name, msg_id = message_id.split('-', 1)
 941 |     except ValueError:
 942 |         raise HTTPException(status_code=400, detail="Invalid message_id format")
 943 | 
 944 |     access_token = await get_access_token(credentials)
 945 | 
 946 |     def _sync_get_email_details():
 947 |         imap_client = None
 948 |         try:
 949 |             # 从连接池获取连接
 950 |             imap_client = imap_pool.get_connection(credentials.email, access_token)
 951 |             
 952 |             # 选择正确的文件夹
 953 |             imap_client.select(folder_name)
 954 |             
 955 |             # 获取完整邮件内容
 956 |             status, msg_data = imap_client.fetch(msg_id, '(RFC822)')
 957 |             
 958 |             if status != 'OK' or not msg_data:
 959 |                 raise HTTPException(status_code=404, detail="Email not found")
 960 |             
 961 |             # 解析邮件
 962 |             raw_email = msg_data[0][1]
 963 |             msg = email.message_from_bytes(raw_email)
 964 |             
 965 |             # 提取基本信息
 966 |             subject = decode_header_value(msg.get('Subject', '(No Subject)'))
 967 |             from_email = decode_header_value(msg.get('From', '(Unknown Sender)'))
 968 |             to_email = decode_header_value(msg.get('To', '(Unknown Recipient)'))
 969 |             date_str = msg.get('Date', '')
 970 |             
 971 |             # 格式化日期
 972 |             try:
 973 |                 if date_str:
 974 |                     date_obj = parsedate_to_datetime(date_str)
 975 |                     formatted_date = date_obj.isoformat()
 976 |                 else:
 977 |                     formatted_date = datetime.now().isoformat()
 978 |             except:
 979 |                 formatted_date = datetime.now().isoformat()
 980 |             
 981 |             # 提取邮件内容
 982 |             body_plain, body_html = extract_email_content(msg)
 983 | 
 984 |             # 归还连接到池中
 985 |             imap_pool.return_connection(credentials.email, imap_client)
 986 | 
 987 |             return EmailDetailsResponse(
 988 |                 message_id=message_id,
 989 |                 subject=subject,
 990 |                 from_email=from_email,
 991 |                 to_email=to_email,
 992 |                 date=formatted_date,
 993 |                 body_plain=body_plain if body_plain else None,
 994 |                 body_html=body_html if body_html else None
 995 |             )
 996 | 
 997 |         except HTTPException:
 998 |             raise
 999 |         except Exception as e:
1000 |             logger.error(f"Error getting email details: {e}")
1001 |             if imap_client:
1002 |                 try:
1003 |                     # 如果出错，尝试归还连接
1004 |                     if hasattr(imap_client, 'state') and imap_client.state != 'LOGOUT':
1005 |                         imap_pool.return_connection(credentials.email, imap_client)
1006 |                 except:
1007 |                     pass
1008 |             raise HTTPException(status_code=500, detail="Failed to retrieve email details")
1009 |     
1010 |     # 在线程池中运行同步代码
1011 |     return await asyncio.to_thread(_sync_get_email_details)
1012 | 
1013 | 
1014 | # ============================================================================
1015 | # FastAPI应用和API端点
1016 | # ============================================================================
1017 | 
1018 | @asynccontextmanager
1019 | async def lifespan(_app: FastAPI) -> AsyncGenerator[None, None]:
1020 |     """
1021 |     FastAPI应用生命周期管理
1022 | 
1023 |     处理应用启动和关闭时的资源管理
1024 |     """
1025 |     # 应用启动
1026 |     logger.info("Starting Outlook Email Management System...")
1027 |     logger.info(f"IMAP connection pool initialized with max_connections={MAX_CONNECTIONS}")
1028 | 
1029 |     yield
1030 | 
1031 |     # 应用关闭
1032 |     logger.info("Shutting down Outlook Email Management System...")
1033 |     logger.info("Closing IMAP connection pool...")
1034 |     imap_pool.close_all_connections()
1035 |     logger.info("Application shutdown complete.")
1036 | 
1037 | 
1038 | app = FastAPI(
1039 |     title="Outlook邮件API服务",
1040 |     description="基于FastAPI和IMAP协议的高性能邮件管理系统",
1041 |     version="1.0.0",
1042 |     lifespan=lifespan
1043 | )
1044 | 
1045 | app.add_middleware(
1046 |     CORSMiddleware,
1047 |     allow_origins=["*"],
1048 |     allow_credentials=True,
1049 |     allow_methods=["*"],
1050 |     allow_headers=["*"],
1051 | )
1052 | 
1053 | # 挂载静态文件服务
1054 | app.mount("/static", StaticFiles(directory="static"), name="static")
1055 | 
1056 | @app.get("/accounts", response_model=AccountListResponse)
1057 | async def get_accounts(
1058 |     page: int = Query(1, ge=1, description="页码，从1开始"),
1059 |     page_size: int = Query(10, ge=1, le=100, description="每页数量，范围1-100"),
1060 |     email_search: Optional[str] = Query(None, description="邮箱账号模糊搜索"),
1061 |     tag_search: Optional[str] = Query(None, description="标签模糊搜索")
1062 | ):
1063 |     """获取所有已加载的邮箱账户列表，支持分页和搜索"""
1064 |     return await get_all_accounts(page, page_size, email_search, tag_search)
1065 | 
1066 | 
1067 | @app.post("/accounts", response_model=AccountResponse)
1068 | async def register_account(credentials: AccountCredentials):
1069 |     """注册或更新邮箱账户"""
1070 |     try:
1071 |         # 验证凭证有效性
1072 |         await get_access_token(credentials)
1073 | 
1074 |         # 保存凭证
1075 |         await save_account_credentials(credentials.email, credentials)
1076 | 
1077 |         return AccountResponse(
1078 |             email_id=credentials.email,
1079 |             message="Account verified and saved successfully."
1080 |         )
1081 | 
1082 |     except HTTPException:
1083 |         raise
1084 |     except Exception as e:
1085 |         logger.error(f"Error registering account: {e}")
1086 |         raise HTTPException(status_code=500, detail="Account registration failed")
1087 | 
1088 | 
1089 | @app.get("/emails/{email_id}", response_model=EmailListResponse)
1090 | async def get_emails(
1091 |     email_id: str,
1092 |     folder: str = Query("all", regex="^(inbox|junk|all)$"),
1093 |     page: int = Query(1, ge=1),
1094 |     page_size: int = Query(100, ge=1, le=500),
1095 |     refresh: bool = Query(False, description="强制刷新缓存")
1096 | ):
1097 |     """获取邮件列表"""
1098 |     credentials = await get_account_credentials(email_id)
1099 |     print('credentials:' + str(credentials))
1100 |     return await list_emails(credentials, folder, page, page_size, refresh)
1101 | 
1102 | 
1103 | @app.get("/emails/{email_id}/dual-view")
1104 | async def get_dual_view_emails(
1105 |     email_id: str,
1106 |     inbox_page: int = Query(1, ge=1),
1107 |     junk_page: int = Query(1, ge=1),
1108 |     page_size: int = Query(20, ge=1, le=100)
1109 | ):
1110 |     """获取双栏视图邮件（收件箱和垃圾箱）"""
1111 |     credentials = await get_account_credentials(email_id)
1112 |     
1113 |     # 并行获取收件箱和垃圾箱邮件
1114 |     inbox_response = await list_emails(credentials, "inbox", inbox_page, page_size)
1115 |     junk_response = await list_emails(credentials, "junk", junk_page, page_size)
1116 |     
1117 |     return DualViewEmailResponse(
1118 |         email_id=email_id,
1119 |         inbox_emails=inbox_response.emails,
1120 |         junk_emails=junk_response.emails,
1121 |         inbox_total=inbox_response.total_emails,
1122 |         junk_total=junk_response.total_emails
1123 |     )
1124 | 
1125 | 
1126 | @app.put("/accounts/{email_id}/tags", response_model=AccountResponse)
1127 | async def update_account_tags(email_id: str, request: UpdateTagsRequest):
1128 |     """更新账户标签"""
1129 |     try:
1130 |         # 检查账户是否存在
1131 |         credentials = await get_account_credentials(email_id)
1132 |         
1133 |         # 更新标签
1134 |         credentials.tags = request.tags
1135 |         
1136 |         # 保存更新后的凭证
1137 |         await save_account_credentials(email_id, credentials)
1138 |         
1139 |         return AccountResponse(
1140 |             email_id=email_id,
1141 |             message="Account tags updated successfully."
1142 |         )
1143 |     except HTTPException:
1144 |         raise
1145 |     except Exception as e:
1146 |         logger.error(f"Error updating account tags: {e}")
1147 |         raise HTTPException(status_code=500, detail="Failed to update account tags")
1148 | 
1149 | @app.get("/emails/{email_id}/{message_id}", response_model=EmailDetailsResponse)
1150 | async def get_email_detail(email_id: str, message_id: str):
1151 |     """获取邮件详细内容"""
1152 |     credentials = await get_account_credentials(email_id)
1153 |     return await get_email_details(credentials, message_id)
1154 | 
1155 | @app.delete("/accounts/{email_id}", response_model=AccountResponse)
1156 | async def delete_account(email_id: str):
1157 |     """删除邮箱账户"""
1158 |     try:
1159 |         # 检查账户是否存在
1160 |         await get_account_credentials(email_id)
1161 |         
1162 |         # 读取现有账户
1163 |         accounts = {}
1164 |         if Path(ACCOUNTS_FILE).exists():
1165 |             with open(ACCOUNTS_FILE, 'r', encoding='utf-8') as f:
1166 |                 accounts = json.load(f)
1167 |         
1168 |         # 删除指定账户
1169 |         if email_id in accounts:
1170 |             del accounts[email_id]
1171 |             
1172 |             # 保存更新后的账户列表
1173 |             with open(ACCOUNTS_FILE, 'w', encoding='utf-8') as f:
1174 |                 json.dump(accounts, f, indent=2, ensure_ascii=False)
1175 |             
1176 |             return AccountResponse(
1177 |                 email_id=email_id,
1178 |                 message="Account deleted successfully."
1179 |             )
1180 |         else:
1181 |             raise HTTPException(status_code=404, detail="Account not found")
1182 |             
1183 |     except HTTPException:
1184 |         raise
1185 |     except Exception as e:
1186 |         logger.error(f"Error deleting account: {e}")
1187 |         raise HTTPException(status_code=500, detail="Failed to delete account")
1188 | 
1189 | @app.get("/")
1190 | async def root():
1191 |     """根路径 - 返回前端页面"""
1192 |     return FileResponse("static/index.html")
1193 | 
1194 | @app.delete("/cache/{email_id}")
1195 | async def clear_cache(email_id: str):
1196 |     """清除指定邮箱的缓存"""
1197 |     clear_email_cache(email_id)
1198 |     return {"message": f"Cache cleared for {email_id}"}
1199 | 
1200 | @app.delete("/cache")
1201 | async def clear_all_cache():
1202 |     """清除所有缓存"""
1203 |     clear_email_cache()
1204 |     return {"message": "All cache cleared"}
1205 | 
1206 | @app.get("/api")
1207 | async def api_status():
1208 |     """API状态检查"""
1209 |     return {
1210 |         "message": "Outlook邮件API服务正在运行",
1211 |         "version": "1.0.0",
1212 |         "endpoints": {
1213 |             "get_accounts": "GET /accounts",
1214 |             "register_account": "POST /accounts",
1215 |             "get_emails": "GET /emails/{email_id}?refresh=true",
1216 |             "get_dual_view_emails": "GET /emails/{email_id}/dual-view",
1217 |             "get_email_detail": "GET /emails/{email_id}/{message_id}",
1218 |             "clear_cache": "DELETE /cache/{email_id}",
1219 |             "clear_all_cache": "DELETE /cache"
1220 |         }
1221 |     }
1222 | 
1223 | 
1224 | # ============================================================================
1225 | # 启动配置
1226 | # ============================================================================
1227 | 
1228 | if __name__ == "__main__":
1229 |     import uvicorn
1230 | 
1231 |     # 启动配置
1232 |     HOST = "0.0.0.0"
1233 |     PORT = 8000
1234 | 
1235 |     logger.info(f"Starting Outlook Email Management System on {HOST}:{PORT}")
1236 |     logger.info("Access the web interface at: http://localhost:8000")
1237 |     logger.info("Access the API documentation at: http://localhost:8000/docs")
1238 | 
1239 |     uvicorn.run(
1240 |         app,
1241 |         host=HOST,
1242 |         port=PORT,
1243 |         log_level="info",
1244 |         access_log=True
1245 |     )


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | fastapi[all]==0.104.1
2 | httpx==0.25.2
3 | aioimaplib==2.0.1
4 | pydantic[email]==2.5.0
5 | requests==2.31.0 


--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="zh-CN">
   3 | <head>
   4 |     <meta charset="UTF-8">
   5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6 |     <title>Outlook邮件管理系统</title>
   7 |     <style>
   8 |         * { margin: 0; padding: 0; box-sizing: border-box; }
   9 | 
  10 |         body {
  11 |             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  12 |             background: #f8fafc;
  13 |             color: #334155;
  14 |             line-height: 1.6;
  15 |         }
  16 | 
  17 |         .app-container {
  18 |             display: flex;
  19 |             height: 100vh;
  20 |         }
  21 | 
  22 |         /* 左侧菜单 */
  23 |         .sidebar {
  24 |             width: 180px;
  25 |             background: #ffffff;
  26 |             border-right: 1px solid #e2e8f0;
  27 |             display: flex;
  28 |             flex-direction: column;
  29 |             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  30 |         }
  31 | 
  32 |         .sidebar-header {
  33 |             padding: 20px;
  34 |             border-bottom: 1px solid #e2e8f0;
  35 |         }
  36 | 
  37 |         .sidebar-header h1 {
  38 |             font-size: 1.5rem;
  39 |             font-weight: 600;
  40 |             color: #1e293b;
  41 |             margin-bottom: 4px;
  42 |         }
  43 | 
  44 |         .sidebar-header p {
  45 |             font-size: 0.875rem;
  46 |             color: #64748b;
  47 |         }
  48 | 
  49 |         .sidebar-nav {
  50 |             flex: 1;
  51 |             padding: 20px 0;
  52 |         }
  53 | 
  54 |         .nav-item {
  55 |             display: flex;
  56 |             align-items: center;
  57 |             padding: 12px 20px;
  58 |             color: #64748b;
  59 |             text-decoration: none;
  60 |             transition: all 0.2s;
  61 |             cursor: pointer;
  62 |             border: none;
  63 |             background: none;
  64 |             width: 100%;
  65 |             text-align: left;
  66 |             font-size: 0.875rem;
  67 |         }
  68 | 
  69 |         .nav-item:hover {
  70 |             background: #f1f5f9;
  71 |             color: #334155;
  72 |         }
  73 | 
  74 |         .nav-item.active {
  75 |             background: #3b82f6;
  76 |             color: white;
  77 |         }
  78 | 
  79 |         .nav-item .icon {
  80 |             margin-right: 12px;
  81 |             font-size: 1rem;
  82 |         }
  83 | 
  84 |         /* 主内容区域 */
  85 |         .main-content {
  86 |             flex: 1;
  87 |             display: flex;
  88 |             flex-direction: column;
  89 |             overflow: hidden;
  90 |         }
  91 | 
  92 |         .main-header {
  93 |             background: white;
  94 |             border-bottom: 1px solid #e2e8f0;
  95 |             padding: 16px 24px;
  96 |             display: flex;
  97 |             justify-content: between;
  98 |             align-items: center;
  99 |         }
 100 | 
 101 |         .main-header h2 {
 102 |             font-size: 1.25rem;
 103 |             font-weight: 600;
 104 |             color: #1e293b;
 105 |         }
 106 | 
 107 |         .main-body {
 108 |             flex: 1;
 109 |             padding: 24px;
 110 |             overflow-y: auto;
 111 |             background: #f8fafc;
 112 |         }
 113 | 
 114 |         .card {
 115 |             background: white;
 116 |             border-radius: 8px;
 117 |             padding: 24px;
 118 |             margin-bottom: 24px;
 119 |             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 120 |             border: 1px solid #e2e8f0;
 121 |         }
 122 | 
 123 |         /* 表单样式 */
 124 |         .form-group {
 125 |             margin-bottom: 20px;
 126 |         }
 127 | 
 128 |         .form-label {
 129 |             display: block;
 130 |             margin-bottom: 8px;
 131 |             font-weight: 500;
 132 |             color: #374151;
 133 |             font-size: 0.875rem;
 134 |         }
 135 | 
 136 |         .form-input {
 137 |             width: 100%;
 138 |             padding: 12px 16px;
 139 |             border: 1px solid #d1d5db;
 140 |             border-radius: 6px;
 141 |             font-size: 0.875rem;
 142 |             transition: all 0.2s;
 143 |             background: white;
 144 |         }
 145 | 
 146 |         .form-input:focus {
 147 |             outline: none;
 148 |             border-color: #3b82f6;
 149 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 150 |         }
 151 | 
 152 |         /* 表单控件 */
 153 |         .form-control {
 154 |             width: 100%;
 155 |             padding: 10px 12px;
 156 |             border: 1px solid #e2e8f0;
 157 |             border-radius: 6px;
 158 |             font-size: 0.875rem;
 159 |             background: white;
 160 |             color: #334155;
 161 |             transition: border-color 0.2s, box-shadow 0.2s;
 162 |         }
 163 | 
 164 |         .form-control:focus {
 165 |             outline: none;
 166 |             border-color: #3b82f6;
 167 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 168 |         }
 169 | 
 170 |         .form-control::placeholder {
 171 |             color: #9ca3af;
 172 |         }
 173 | 
 174 |         .form-input {
 175 |             width: 100%;
 176 |             padding: 10px 12px;
 177 |             border: 1px solid #e2e8f0;
 178 |             border-radius: 6px;
 179 |             font-size: 0.875rem;
 180 |             transition: border-color 0.2s, box-shadow 0.2s;
 181 |         }
 182 | 
 183 |         .form-input:focus {
 184 |             outline: none;
 185 |             border-color: #3b82f6;
 186 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 187 |         }
 188 | 
 189 |         .form-label {
 190 |             display: block;
 191 |             margin-bottom: 6px;
 192 |             font-weight: 500;
 193 |             color: #374151;
 194 |             font-size: 0.875rem;
 195 |         }
 196 | 
 197 |         .form-group {
 198 |             margin-bottom: 20px;
 199 |         }
 200 | 
 201 |         .form-textarea {
 202 |             resize: vertical;
 203 |             min-height: 80px;
 204 |         }
 205 | 
 206 |         /* 按钮样式 */
 207 |         .btn {
 208 |             display: inline-flex;
 209 |             align-items: center;
 210 |             padding: 10px 16px;
 211 |             border: none;
 212 |             border-radius: 6px;
 213 |             font-size: 0.875rem;
 214 |             font-weight: 500;
 215 |             cursor: pointer;
 216 |             transition: all 0.2s;
 217 |             text-decoration: none;
 218 |             gap: 8px;
 219 |         }
 220 | 
 221 |         .btn-primary {
 222 |             background: #3b82f6;
 223 |             color: white;
 224 |         }
 225 | 
 226 |         .btn-primary:hover {
 227 |             background: #2563eb;
 228 |         }
 229 | 
 230 |         .btn-secondary {
 231 |             background: #f8fafc;
 232 |             color: #64748b;
 233 |             border: 1px solid #e2e8f0;
 234 |         }
 235 | 
 236 |         .btn-secondary:hover {
 237 |             background: #f1f5f9;
 238 |             color: #475569;
 239 |         }
 240 | 
 241 |         .btn-danger {
 242 |             background: #ef4444;
 243 |             color: white;
 244 |         }
 245 | 
 246 |         .btn-danger:hover {
 247 |             background: #dc2626;
 248 |         }
 249 | 
 250 |         .btn-sm {
 251 |             padding: 6px 12px;
 252 |             font-size: 0.75rem;
 253 |         }
 254 | 
 255 |         /* 邮箱账户列表 */
 256 |         .account-list {
 257 |             display: grid;
 258 |             gap: 12px;
 259 |         }
 260 | 
 261 |         .account-item {
 262 |             display: flex;
 263 |             align-items: center;
 264 |             justify-content: space-between;
 265 |             padding: 16px;
 266 |             border: 1px solid #e2e8f0;
 267 |             border-radius: 8px;
 268 |             background: white;
 269 |             transition: all 0.2s;
 270 |             cursor: pointer;
 271 |         }
 272 | 
 273 |         .account-item:hover {
 274 |             border-color: #3b82f6;
 275 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 276 |         }
 277 | 
 278 |         .account-info {
 279 |             display: flex;
 280 |             align-items: center;
 281 |             gap: 12px;
 282 |         }
 283 | 
 284 |         .account-avatar {
 285 |             width: 40px;
 286 |             height: 40px;
 287 |             border-radius: 50%;
 288 |             background: #3b82f6;
 289 |             color: white;
 290 |             display: flex;
 291 |             align-items: center;
 292 |             justify-content: center;
 293 |             font-weight: 600;
 294 |             font-size: 1rem;
 295 |         }
 296 | 
 297 |         .account-details h4 {
 298 |             margin: 0;
 299 |             font-size: 0.875rem;
 300 |             font-weight: 500;
 301 |             color: #1e293b;
 302 |         }
 303 | 
 304 |         .account-details p {
 305 |             margin: 0;
 306 |             font-size: 0.75rem;
 307 |             color: #64748b;
 308 |         }
 309 | 
 310 |         .account-actions {
 311 |             display: flex;
 312 |             gap: 8px;
 313 |         }
 314 | 
 315 |         /* 邮件列表 */
 316 |         .email-list {
 317 |             display: grid;
 318 |             gap: 12px;
 319 |         }
 320 | 
 321 |         .email-item {
 322 |             display: flex;
 323 |             align-items: flex-start;
 324 |             padding: 16px;
 325 |             border: 1px solid #e2e8f0;
 326 |             border-radius: 8px;
 327 |             background: white;
 328 |             transition: all 0.2s;
 329 |             cursor: pointer;
 330 |         }
 331 | 
 332 |         .email-item:hover {
 333 |             border-color: #3b82f6;
 334 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 335 |         }
 336 | 
 337 |         .email-item.unread {
 338 |             border-left: 4px solid #3b82f6;
 339 |         }
 340 | 
 341 |         .email-avatar {
 342 |             width: 40px;
 343 |             height: 40px;
 344 |             border-radius: 50%;
 345 |             background: #3b82f6;
 346 |             color: white;
 347 |             display: flex;
 348 |             align-items: center;
 349 |             justify-content: center;
 350 |             font-weight: 600;
 351 |             font-size: 1rem;
 352 |             flex-shrink: 0;
 353 |             margin-right: 12px;
 354 |         }
 355 | 
 356 |         .email-content {
 357 |             flex: 1;
 358 |             min-width: 0;
 359 |         }
 360 | 
 361 |         .email-header {
 362 |             display: flex;
 363 |             justify-content: space-between;
 364 |             align-items: flex-start;
 365 |             margin-bottom: 8px;
 366 |         }
 367 | 
 368 |         .email-subject {
 369 |             font-weight: 600;
 370 |             color: #1e293b;
 371 |             font-size: 0.875rem;
 372 |             margin: 0;
 373 |             line-height: 1.4;
 374 |         }
 375 | 
 376 |         .email-date {
 377 |             font-size: 0.75rem;
 378 |             color: #64748b;
 379 |             white-space: nowrap;
 380 |             margin-left: 12px;
 381 |         }
 382 | 
 383 |         .email-from {
 384 |             font-size: 0.75rem;
 385 |             color: #64748b;
 386 |             margin-bottom: 4px;
 387 |         }
 388 | 
 389 |         .email-preview {
 390 |             font-size: 0.75rem;
 391 |             color: #9ca3af;
 392 |             line-height: 1.4;
 393 |             display: -webkit-box;
 394 |             -webkit-line-clamp: 2;
 395 |             -webkit-box-orient: vertical;
 396 |             overflow: hidden;
 397 |         }
 398 | 
 399 |         /* 邮件详情模态框 */
 400 |         .modal {
 401 |             position: fixed;
 402 |             top: 0;
 403 |             left: 0;
 404 |             width: 100%;
 405 |             height: 100%;
 406 |             background: rgba(0, 0, 0, 0.5);
 407 |             display: flex;
 408 |             align-items: center;
 409 |             justify-content: center;
 410 |             z-index: 1000;
 411 |         }
 412 | 
 413 |         .modal-content {
 414 |             background: white;
 415 |             border-radius: 8px;
 416 |             width: 90%;
 417 |             max-width: 800px;
 418 |             max-height: 90%;
 419 |             overflow: hidden;
 420 |             display: flex;
 421 |             flex-direction: column;
 422 |         }
 423 | 
 424 |         .modal-header {
 425 |             padding: 20px 24px;
 426 |             border-bottom: 1px solid #e2e8f0;
 427 |             display: flex;
 428 |             justify-content: space-between;
 429 |             align-items: center;
 430 |         }
 431 | 
 432 |         .modal-header h3 {
 433 |             margin: 0;
 434 |             font-size: 1.125rem;
 435 |             font-weight: 600;
 436 |             color: #1e293b;
 437 |         }
 438 | 
 439 |         .modal-close {
 440 |             background: none;
 441 |             border: none;
 442 |             font-size: 1.5rem;
 443 |             cursor: pointer;
 444 |             color: #64748b;
 445 |             padding: 4px;
 446 |         }
 447 | 
 448 |         .modal-body {
 449 |             padding: 24px;
 450 |             overflow-y: auto;
 451 |             flex: 1;
 452 |         }
 453 | 
 454 |         .email-detail-meta {
 455 |             margin-bottom: 24px;
 456 |             padding-bottom: 16px;
 457 |             border-bottom: 1px solid #e2e8f0;
 458 |         }
 459 | 
 460 |         .email-detail-meta p {
 461 |             margin: 8px 0;
 462 |             font-size: 0.875rem;
 463 |             color: #64748b;
 464 |         }
 465 | 
 466 |         .email-detail-meta strong {
 467 |             color: #374151;
 468 |             margin-right: 8px;
 469 |         }
 470 | 
 471 |         .email-content-tabs {
 472 |             display: flex;
 473 |             gap: 8px;
 474 |             margin-bottom: 16px;
 475 |         }
 476 | 
 477 |         .content-tab {
 478 |             padding: 8px 16px;
 479 |             border: 1px solid #e2e8f0;
 480 |             border-radius: 6px;
 481 |             background: white;
 482 |             color: #64748b;
 483 |             font-size: 0.75rem;
 484 |             font-weight: 500;
 485 |             cursor: pointer;
 486 |             transition: all 0.2s;
 487 |         }
 488 | 
 489 |         .content-tab:hover {
 490 |             border-color: #3b82f6;
 491 |             color: #3b82f6;
 492 |         }
 493 | 
 494 |         .content-tab.active {
 495 |             background: #3b82f6;
 496 |             color: white;
 497 |             border-color: #3b82f6;
 498 |         }
 499 | 
 500 |         .email-content-body {
 501 |             border: 1px solid #e2e8f0;
 502 |             border-radius: 6px;
 503 |             overflow: hidden;
 504 |         }
 505 | 
 506 |         .email-content-body iframe {
 507 |             width: 100%;
 508 |             min-height: 400px;
 509 |             border: none;
 510 |         }
 511 | 
 512 |         .email-content-body pre {
 513 |             padding: 16px;
 514 |             margin: 0;
 515 |             white-space: pre-wrap;
 516 |             font-family: inherit;
 517 |             line-height: 1.6;
 518 |         }
 519 | 
 520 |         /* 邮箱复制功能样式 */
 521 |         .email-copyable {
 522 |             transition: all 0.2s ease;
 523 |             border-radius: 4px;
 524 |             padding: 2px 4px;
 525 |             margin: 0 2px;
 526 |         }
 527 | 
 528 |         .email-copyable:hover {
 529 |             background-color: #f1f5f9;
 530 |             transform: translateY(-1px);
 531 |         }
 532 | 
 533 |         .email-copyable:active {
 534 |             transform: translateY(0);
 535 |             background-color: #e2e8f0;
 536 |         }
 537 | 
 538 |         .copy-icon {
 539 |             transition: opacity 0.2s ease;
 540 |         }
 541 | 
 542 |         .email-copyable:hover + .copy-icon {
 543 |             opacity: 1 !important;
 544 |         }
 545 | 
 546 |         /* 复制成功动画 */
 547 |         @keyframes copySuccess {
 548 |             0% { transform: scale(1); }
 549 |             50% { transform: scale(1.1); }
 550 |             100% { transform: scale(1); }
 551 |         }
 552 | 
 553 |         .copy-success {
 554 |             animation: copySuccess 0.3s ease;
 555 |             background-color: #dcfce7 !important;
 556 |             color: #16a34a !important;
 557 |         }
 558 | 
 559 |         /* 工具类 */
 560 |         .hidden { display: none !important; }
 561 | 
 562 |         /* 加载状态 */
 563 |         .loading {
 564 |             display: flex;
 565 |             align-items: center;
 566 |             justify-content: center;
 567 |             padding: 40px;
 568 |             color: #64748b;
 569 |             font-style: italic;
 570 |         }
 571 | 
 572 |         .loading-spinner {
 573 |             display: inline-block;
 574 |             width: 20px;
 575 |             height: 20px;
 576 |             border: 2px solid #e2e8f0;
 577 |             border-radius: 50%;
 578 |             border-top-color: #3b82f6;
 579 |             animation: spin 1s ease-in-out infinite;
 580 |             margin-right: 8px;
 581 |         }
 582 | 
 583 |         @keyframes spin {
 584 |             to { transform: rotate(360deg); }
 585 |         }
 586 | 
 587 |         /* 进度条 */
 588 |         .progress-bar {
 589 |             width: 100%;
 590 |             height: 4px;
 591 |             background: #e2e8f0;
 592 |             border-radius: 2px;
 593 |             overflow: hidden;
 594 |             margin: 16px 0;
 595 |         }
 596 | 
 597 |         .progress-fill {
 598 |             height: 100%;
 599 |             background: linear-gradient(90deg, #3b82f6, #1d4ed8);
 600 |             border-radius: 2px;
 601 |             transition: width 0.3s ease;
 602 |             width: 0%;
 603 |         }
 604 | 
 605 |         .progress-animated {
 606 |             background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
 607 |             background-size: 200% 100%;
 608 |             animation: progress-animation 2s linear infinite;
 609 |         }
 610 | 
 611 |         @keyframes progress-animation {
 612 |             0% { background-position: 200% 0; }
 613 |             100% { background-position: -200% 0; }
 614 |         }
 615 | 
 616 |         /* 通知系统 */
 617 |         .notification-container {
 618 |             position: fixed;
 619 |             top: 20px;
 620 |             right: 20px;
 621 |             z-index: 1000;
 622 |             max-width: 400px;
 623 |         }
 624 | 
 625 |         .notification {
 626 |             background: white;
 627 |             border-radius: 8px;
 628 |             padding: 16px;
 629 |             margin-bottom: 12px;
 630 |             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 631 |             border-left: 4px solid #3b82f6;
 632 |             display: flex;
 633 |             align-items: flex-start;
 634 |             gap: 12px;
 635 |             transform: translateX(100%);
 636 |             animation: slideIn 0.3s ease-out forwards;
 637 |         }
 638 | 
 639 |         .notification.success {
 640 |             border-left-color: #10b981;
 641 |         }
 642 | 
 643 |         .notification.error {
 644 |             border-left-color: #ef4444;
 645 |         }
 646 | 
 647 |         .notification.warning {
 648 |             border-left-color: #f59e0b;
 649 |         }
 650 | 
 651 |         .notification-icon {
 652 |             font-size: 1.25rem;
 653 |             flex-shrink: 0;
 654 |             margin-top: 2px;
 655 |         }
 656 | 
 657 |         .notification-content {
 658 |             flex: 1;
 659 |         }
 660 | 
 661 |         .notification-title {
 662 |             font-weight: 600;
 663 |             font-size: 0.875rem;
 664 |             margin-bottom: 4px;
 665 |             color: #1f2937;
 666 |         }
 667 | 
 668 |         .notification-message {
 669 |             font-size: 0.875rem;
 670 |             color: #6b7280;
 671 |             line-height: 1.4;
 672 |         }
 673 | 
 674 |         .notification-close {
 675 |             background: none;
 676 |             border: none;
 677 |             color: #9ca3af;
 678 |             cursor: pointer;
 679 |             font-size: 1.25rem;
 680 |             padding: 0;
 681 |             line-height: 1;
 682 |         }
 683 | 
 684 |         .notification-close:hover {
 685 |             color: #6b7280;
 686 |         }
 687 | 
 688 |         @keyframes slideIn {
 689 |             to { transform: translateX(0); }
 690 |         }
 691 | 
 692 |         @keyframes slideOut {
 693 |             to { transform: translateX(100%); }
 694 |         }
 695 | 
 696 |         .notification.slide-out {
 697 |             animation: slideOut 0.3s ease-in forwards;
 698 |         }
 699 | 
 700 |         /* 传统错误/成功消息样式（保留兼容性） */
 701 |         .error {
 702 |             background: #fef2f2;
 703 |             color: #dc2626;
 704 |             padding: 12px 16px;
 705 |             border-radius: 6px;
 706 |             margin-bottom: 16px;
 707 |             border: 1px solid #fecaca;
 708 |             font-size: 0.875rem;
 709 |             display: flex;
 710 |             align-items: center;
 711 |             gap: 8px;
 712 |         }
 713 | 
 714 |         .success {
 715 |             background: #f0fdf4;
 716 |             color: #16a34a;
 717 |             padding: 12px 16px;
 718 |             border-radius: 6px;
 719 |             margin-bottom: 16px;
 720 |             border: 1px solid #bbf7d0;
 721 |             font-size: 0.875rem;
 722 |             display: flex;
 723 |             align-items: center;
 724 |             gap: 8px;
 725 |         }
 726 | 
 727 |         .text-center { text-align: center; }
 728 |         .text-sm { font-size: 0.875rem; }
 729 |         .text-xs { font-size: 0.75rem; }
 730 |         .font-medium { font-weight: 500; }
 731 |         .font-semibold { font-weight: 600; }
 732 |         .mb-4 { margin-bottom: 1rem; }
 733 |         .mb-6 { margin-bottom: 1.5rem; }
 734 |         .mt-4 { margin-top: 1rem; }
 735 |         .flex { display: flex; }
 736 |         .items-center { align-items: center; }
 737 |         .justify-between { justify-content: space-between; }
 738 |         .gap-2 { gap: 0.5rem; }
 739 |         .gap-4 { gap: 1rem; }
 740 | 
 741 |         /* 分页 */
 742 |         .pagination {
 743 |             display: flex;
 744 |             justify-content: center;
 745 |             align-items: center;
 746 |             gap: 8px;
 747 |             margin-top: 20px;
 748 |         }
 749 |         
 750 |         .pagination .btn {
 751 |             min-width: 40px;
 752 |         }
 753 |         
 754 |         .pagination .page-number {
 755 |             min-width: 40px;
 756 |             height: 32px;
 757 |             display: flex;
 758 |             align-items: center;
 759 |             justify-content: center;
 760 |             border: 1px solid #e2e8f0;
 761 |             background: white;
 762 |             color: #64748b;
 763 |             cursor: pointer;
 764 |             border-radius: 4px;
 765 |             font-size: 0.875rem;
 766 |             transition: all 0.2s;
 767 |         }
 768 |         
 769 |         .pagination .page-number:hover {
 770 |             background: #f1f5f9;
 771 |             border-color: #3b82f6;
 772 |             color: #3b82f6;
 773 |         }
 774 |         
 775 |         .pagination .page-number.active {
 776 |             background: #3b82f6;
 777 |             border-color: #3b82f6;
 778 |             color: white;
 779 |         }
 780 |         
 781 |         .pagination .page-number.disabled {
 782 |             color: #cbd5e1;
 783 |             cursor: not-allowed;
 784 |         }
 785 |         
 786 |         .pagination .page-number.disabled:hover {
 787 |             background: white;
 788 |             border-color: #e2e8f0;
 789 |             color: #cbd5e1;
 790 |         }
 791 | 
 792 |         /* 右键菜单样式 */
 793 |         .context-menu {
 794 |             position: fixed;
 795 |             background: white;
 796 |             border: 1px solid #e2e8f0;
 797 |             border-radius: 8px;
 798 |             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 799 |             z-index: 10000;
 800 |             min-width: 180px;
 801 |             padding: 8px 0;
 802 |             display: none;
 803 |         }
 804 | 
 805 |         .context-menu-item {
 806 |             display: flex;
 807 |             align-items: center;
 808 |             padding: 10px 16px;
 809 |             cursor: pointer;
 810 |             font-size: 0.875rem;
 811 |             color: #374151;
 812 |             transition: background-color 0.2s;
 813 |             gap: 8px;
 814 |         }
 815 | 
 816 |         .context-menu-item:hover {
 817 |             background: #f3f4f6;
 818 |         }
 819 | 
 820 |         .context-menu-item.danger {
 821 |             color: #dc2626;
 822 |         }
 823 | 
 824 |         .context-menu-item.danger:hover {
 825 |             background: #fef2f2;
 826 |         }
 827 | 
 828 |         .context-menu-divider {
 829 |             height: 1px;
 830 |             background: #e5e7eb;
 831 |             margin: 4px 0;
 832 |         }
 833 | 
 834 |         /* 标签页 */
 835 |         .tabs {
 836 |             display: flex;
 837 |             border-bottom: 1px solid #e2e8f0;
 838 |             margin-bottom: 20px;
 839 |         }
 840 | 
 841 |         .tab {
 842 |             flex: 1;
 843 |             padding: 12px 16px;
 844 |             border: none;
 845 |             background: none;
 846 |             cursor: pointer;
 847 |             color: #64748b;
 848 |             font-weight: 500;
 849 |             transition: all 0.2s;
 850 |             font-size: 0.875rem;
 851 |         }
 852 | 
 853 |         .tab:hover {
 854 |             color: #374151;
 855 |         }
 856 | 
 857 |         .tab.active {
 858 |             color: #3b82f6;
 859 |             border-bottom: 2px solid #3b82f6;
 860 |         }
 861 | 
 862 |         /* 搜索和过滤 */
 863 |         .search-container {
 864 |             position: relative;
 865 |             margin-bottom: 20px;
 866 |         }
 867 | 
 868 |         .search-input {
 869 |             width: 100%;
 870 |             padding: 12px 16px 12px 40px;
 871 |             border: 1px solid #d1d5db;
 872 |             border-radius: 8px;
 873 |             font-size: 0.875rem;
 874 |             background: white;
 875 |             transition: all 0.2s;
 876 |         }
 877 | 
 878 |         .search-input:focus {
 879 |             outline: none;
 880 |             border-color: #3b82f6;
 881 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 882 |         }
 883 | 
 884 |         .search-icon {
 885 |             position: absolute;
 886 |             left: 12px;
 887 |             top: 50%;
 888 |             transform: translateY(-50%);
 889 |             color: #9ca3af;
 890 |             font-size: 1rem;
 891 |         }
 892 | 
 893 |         .filter-container {
 894 |             display: flex;
 895 |             gap: 12px;
 896 |             margin-bottom: 20px;
 897 |             flex-wrap: wrap;
 898 |             align-items: center;
 899 |         }
 900 | 
 901 |         .filter-group {
 902 |             display: flex;
 903 |             align-items: center;
 904 |             gap: 8px;
 905 |         }
 906 | 
 907 |         .filter-label {
 908 |             font-size: 0.875rem;
 909 |             color: #6b7280;
 910 |             font-weight: 500;
 911 |         }
 912 | 
 913 |         .filter-select {
 914 |             padding: 6px 12px;
 915 |             border: 1px solid #d1d5db;
 916 |             border-radius: 6px;
 917 |             font-size: 0.875rem;
 918 |             background: white;
 919 |             min-width: 120px;
 920 |         }
 921 | 
 922 |         .filter-select:focus {
 923 |             outline: none;
 924 |             border-color: #3b82f6;
 925 |         }
 926 | 
 927 |         /* 统计信息 */
 928 |         .stats-container {
 929 |             display: flex;
 930 |             gap: 16px;
 931 |             margin-bottom: 20px;
 932 |             flex-wrap: wrap;
 933 |         }
 934 | 
 935 |         .stat-item {
 936 |             background: white;
 937 |             padding: 12px 16px;
 938 |             border-radius: 8px;
 939 |             border: 1px solid #e2e8f0;
 940 |             min-width: 120px;
 941 |         }
 942 | 
 943 |         .stat-value {
 944 |             font-size: 1.5rem;
 945 |             font-weight: 600;
 946 |             color: #1e293b;
 947 |             margin-bottom: 4px;
 948 |         }
 949 | 
 950 |         .stat-label {
 951 |             font-size: 0.75rem;
 952 |             color: #64748b;
 953 |             text-transform: uppercase;
 954 |             letter-spacing: 0.05em;
 955 |         }
 956 | 
 957 |         /* 表单页面样式 */
 958 |         .form-page {
 959 |             max-width: 600px;
 960 |             margin: 0 auto;
 961 |         }
 962 | 
 963 |         .form-section {
 964 |             background: #f8fafc;
 965 |             padding: 16px;
 966 |             border-radius: 8px;
 967 |             border: 1px solid #e2e8f0;
 968 |             margin-bottom: 20px;
 969 |         }
 970 | 
 971 |         .form-section h4 {
 972 |             margin: 0 0 8px 0;
 973 |             font-size: 0.875rem;
 974 |             font-weight: 600;
 975 |             color: #374151;
 976 |         }
 977 | 
 978 |         .form-section ol, .form-section ul {
 979 |             margin: 0;
 980 |             padding-left: 20px;
 981 |             font-size: 0.75rem;
 982 |             color: #6b7280;
 983 |             line-height: 1.5;
 984 |         }
 985 | 
 986 |         .form-section a {
 987 |             color: #3b82f6;
 988 |             text-decoration: none;
 989 |         }
 990 | 
 991 |         .form-section a:hover {
 992 |             text-decoration: underline;
 993 |         }
 994 | 
 995 |         /* 代码样式 */
 996 |         code {
 997 |             background: #f1f5f9;
 998 |             padding: 2px 6px;
 999 |             border-radius: 4px;
1000 |             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1001 |             font-size: 0.875rem;
1002 |             color: #1e293b;
1003 |         }
1004 | 
1005 |         /* API文档样式 */
1006 |         .api-docs {
1007 |             max-width: 1000px;
1008 |         }
1009 | 
1010 |         .api-endpoint {
1011 |             background: white;
1012 |             border: 1px solid #e2e8f0;
1013 |             border-radius: 8px;
1014 |             margin-bottom: 24px;
1015 |             overflow: hidden;
1016 |         }
1017 | 
1018 |         .api-header {
1019 |             background: #f8fafc;
1020 |             padding: 16px 20px;
1021 |             border-bottom: 1px solid #e2e8f0;
1022 |             display: flex;
1023 |             align-items: center;
1024 |             justify-content: space-between;
1025 |         }
1026 | 
1027 |         .api-method {
1028 |             display: inline-block;
1029 |             padding: 4px 12px;
1030 |             border-radius: 4px;
1031 |             font-size: 0.75rem;
1032 |             font-weight: 600;
1033 |             text-transform: uppercase;
1034 |             margin-right: 12px;
1035 |         }
1036 | 
1037 |         .api-method.get {
1038 |             background: #dbeafe;
1039 |             color: #1d4ed8;
1040 |         }
1041 | 
1042 |         .api-method.post {
1043 |             background: #dcfce7;
1044 |             color: #16a34a;
1045 |         }
1046 | 
1047 |         .api-method.put {
1048 |             background: #fef3c7;
1049 |             color: #d97706;
1050 |         }
1051 | 
1052 |         .api-method.delete {
1053 |             background: #fee2e2;
1054 |             color: #dc2626;
1055 |         }
1056 | 
1057 |         .api-path {
1058 |             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1059 |             font-size: 0.875rem;
1060 |             color: #374151;
1061 |             font-weight: 500;
1062 |         }
1063 | 
1064 |         .api-body {
1065 |             padding: 20px;
1066 |         }
1067 | 
1068 |         .api-description {
1069 |             color: #6b7280;
1070 |             margin-bottom: 16px;
1071 |             line-height: 1.6;
1072 |         }
1073 | 
1074 |         .api-section {
1075 |             margin-bottom: 20px;
1076 |         }
1077 | 
1078 |         .api-section h4 {
1079 |             font-size: 0.875rem;
1080 |             font-weight: 600;
1081 |             color: #374151;
1082 |             margin-bottom: 8px;
1083 |         }
1084 | 
1085 |         .api-params {
1086 |             background: #f9fafb;
1087 |             border: 1px solid #e5e7eb;
1088 |             border-radius: 6px;
1089 |             overflow: hidden;
1090 |         }
1091 | 
1092 |         .api-param {
1093 |             padding: 12px 16px;
1094 |             border-bottom: 1px solid #e5e7eb;
1095 |             display: flex;
1096 |             align-items: flex-start;
1097 |             gap: 12px;
1098 |         }
1099 | 
1100 |         .api-param:last-child {
1101 |             border-bottom: none;
1102 |         }
1103 | 
1104 |         .api-param-name {
1105 |             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1106 |             font-size: 0.875rem;
1107 |             color: #1f2937;
1108 |             font-weight: 500;
1109 |             min-width: 120px;
1110 |         }
1111 | 
1112 |         .api-param-type {
1113 |             background: #e5e7eb;
1114 |             color: #374151;
1115 |             padding: 2px 8px;
1116 |             border-radius: 4px;
1117 |             font-size: 0.75rem;
1118 |             font-weight: 500;
1119 |             min-width: 60px;
1120 |             text-align: center;
1121 |         }
1122 | 
1123 |         .api-param-desc {
1124 |             color: #6b7280;
1125 |             font-size: 0.875rem;
1126 |             flex: 1;
1127 |         }
1128 | 
1129 |         .api-example {
1130 |             background: #1e293b;
1131 |             color: #e2e8f0;
1132 |             padding: 16px;
1133 |             border-radius: 6px;
1134 |             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1135 |             font-size: 0.875rem;
1136 |             overflow-x: auto;
1137 |             line-height: 1.5;
1138 |         }
1139 | 
1140 |         .api-try-button {
1141 |             background: #3b82f6;
1142 |             color: white;
1143 |             border: none;
1144 |             padding: 8px 16px;
1145 |             border-radius: 6px;
1146 |             font-size: 0.875rem;
1147 |             cursor: pointer;
1148 |             transition: all 0.2s;
1149 |         }
1150 | 
1151 |         .api-try-button:hover {
1152 |             background: #2563eb;
1153 |         }
1154 | 
1155 |         .api-response {
1156 |             margin-top: 16px;
1157 |             padding: 16px;
1158 |             background: #f0fdf4;
1159 |             border: 1px solid #bbf7d0;
1160 |             border-radius: 6px;
1161 |             display: none;
1162 |         }
1163 | 
1164 |         .api-response.show {
1165 |             display: block;
1166 |         }
1167 | 
1168 |         .api-response pre {
1169 |             margin: 0;
1170 |             font-size: 0.875rem;
1171 |             color: #15803d;
1172 |         }
1173 | 
1174 |         /* 账户标签样式 */
1175 |         .account-tags {
1176 |             display: flex;
1177 |             flex-wrap: wrap;
1178 |             gap: 4px;
1179 |             margin-top: 4px;
1180 |         }
1181 | 
1182 |         .account-tag {
1183 |             background-color: #e2e8f0;
1184 |             color: #475569;
1185 |             font-size: 0.75rem;
1186 |             padding: 2px 8px;
1187 |             border-radius: 12px;
1188 |         }
1189 | 
1190 |         /* 标签管理样式 */
1191 |         /* 修改标签模态框样式 */
1192 |         #tagsModal {
1193 |             display: none;
1194 |             position: fixed;
1195 |             top: 0;
1196 |             left: 0;
1197 |             width: 100%;
1198 |             height: 100%;
1199 |             background: rgba(0, 0, 0, 0.5);
1200 |             align-items: center;
1201 |             justify-content: center;
1202 |             z-index: 1000;
1203 |         }
1204 | 
1205 |         .tag-item {
1206 |             display: flex;
1207 |             align-items: center;
1208 |             background-color: #e2e8f0;
1209 |             border-radius: 16px;
1210 |             padding: 4px 12px;
1211 |             margin-right: 8px;
1212 |             margin-bottom: 8px;
1213 |         }
1214 |         .tags-list {
1215 |             display: flex;
1216 |             flex-wrap: wrap;
1217 |             gap: 8px;
1218 |             margin-top: 8px;
1219 |             margin-bottom: 16px;
1220 |         }
1221 | 
1222 |         .tag-name {
1223 |             margin-right: 8px;
1224 |         }
1225 | 
1226 |         .tag-delete {
1227 |             background: none;
1228 |             border: none;
1229 |             color: #64748b;
1230 |             cursor: pointer;
1231 |             font-size: 1rem;
1232 |             line-height: 1;
1233 |             padding: 0;
1234 |         }
1235 | 
1236 |         .tag-delete:hover {
1237 |             color: #ef4444;
1238 |         }
1239 | 
1240 |         .input-group {
1241 |             display: flex;
1242 |             gap: 8px;
1243 |         }
1244 | 
1245 |         .input-group .form-control {
1246 |             flex: 1;
1247 |         }
1248 | 
1249 |         /* 响应式设计 */
1250 |         @media (max-width: 768px) {
1251 |             .app-container {
1252 |                 flex-direction: column;
1253 |             }
1254 | 
1255 |             .sidebar {
1256 |                 width: 100%;
1257 |                 height: auto;
1258 |                 border-right: none;
1259 |                 border-bottom: 1px solid #e2e8f0;
1260 |             }
1261 | 
1262 |             .sidebar-nav {
1263 |                 display: flex;
1264 |                 overflow-x: auto;
1265 |                 padding: 10px 0;
1266 |             }
1267 | 
1268 |             .nav-item {
1269 |                 white-space: nowrap;
1270 |                 padding: 8px 16px;
1271 |                 margin: 0 4px;
1272 |                 border-radius: 6px;
1273 |             }
1274 | 
1275 |             .main-body {
1276 |                 padding: 16px;
1277 |             }
1278 | 
1279 |             .modal-content {
1280 |                 width: 95%;
1281 |                 max-height: 95%;
1282 |             }
1283 | 
1284 |             .modal-body {
1285 |                 padding: 16px;
1286 |             }
1287 | 
1288 |             .account-item {
1289 |                 padding: 12px;
1290 |             }
1291 | 
1292 |             .account-avatar {
1293 |                 width: 32px;
1294 |                 height: 32px;
1295 |                 font-size: 0.875rem;
1296 |             }
1297 | 
1298 |             .email-item {
1299 |                 padding: 12px;
1300 |             }
1301 | 
1302 |             .email-avatar {
1303 |                 width: 32px;
1304 |                 height: 32px;
1305 |                 font-size: 0.875rem;
1306 |             }
1307 |         }
1308 |     </style>
1309 | </head>
1310 | <body>
1311 |     <div class="app-container">
1312 |         <!-- 左侧菜单 -->
1313 |         <div class="sidebar">
1314 |             <div class="sidebar-header">
1315 |                 <h1>📧 邮件管理</h1>
1316 |                 <p>Outlook邮件管理系统</p>
1317 |             </div>
1318 |             <nav class="sidebar-nav">
1319 |                 <button class="nav-item active" onclick="showPage('accounts', this)">
1320 |                     <span class="icon">👥</span>
1321 |                     邮箱账户
1322 |                 </button>
1323 |                 <button class="nav-item" onclick="showPage('addAccount', this)">
1324 |                     <span class="icon">➕</span>
1325 |                     添加账户
1326 |                 </button>
1327 |                 <button class="nav-item" onclick="showPage('batchAdd', this)">
1328 |                     <span class="icon">📦</span>
1329 |                     批量添加
1330 |                 </button>
1331 |                 <button class="nav-item" onclick="showPage('apiDocs', this)">
1332 |                     <span class="icon">📖</span>
1333 |                     API管理
1334 |                 </button>
1335 |                 <button class="nav-item" onclick="showPage('emails', this)" oncontextmenu="showEmailsContextMenu(event)" id="emailsNav" style="display: none;">
1336 |                     <span class="icon">📧</span>
1337 |                     邮件列表
1338 |                 </button>
1339 |             </nav>
1340 |         </div>
1341 | 
1342 |         <!-- 主内容区域 -->
1343 |         <div class="main-content">
1344 |             <div class="main-header">
1345 |                 <h2 id="pageTitle">邮箱账户管理</h2>
1346 |                 <div id="headerActions"></div>
1347 |             </div>
1348 | 
1349 |             <div class="main-body">
1350 |                 <!-- 邮箱账户列表页面 -->
1351 |                 <div id="accountsPage" class="page">
1352 |                     <div class="card">
1353 |                         <div class="flex items-center justify-between mb-4">
1354 |                             <div>
1355 |                                 <h3 class="font-semibold">邮箱账户管理</h3>
1356 |                                 <p class="text-sm" style="color: #64748b;">管理所有已添加的邮箱账户</p>
1357 |                             </div>
1358 |                             <div class="flex gap-2">
1359 |                                 <button class="btn btn-primary btn-sm" onclick="showPage('addAccount')">
1360 |                                     <span>➕</span>
1361 |                                     添加账户
1362 |                                 </button>
1363 |                                 <button class="btn btn-secondary btn-sm" onclick="showPage('batchAdd')">
1364 |                                     <span>📦</span>
1365 |                                     批量添加
1366 |                                 </button>
1367 |                                 <button class="btn btn-secondary btn-sm" onclick="loadAccounts()">
1368 |                                     <span>🔄</span>
1369 |                                     刷新列表
1370 |                                 </button>
1371 |                             </div>
1372 |                         </div>
1373 |                         
1374 |                         <!-- 搜索和过滤区域 -->
1375 |                         <div class="search-container">
1376 |                             <div class="flex gap-3 mb-4">
1377 |                                 <div class="flex-1">
1378 |                                     <input type="text" id="emailSearch" class="form-control" placeholder="按邮箱账号搜索..." onkeypress="handleSearchKeyPress(event)">
1379 |                                 </div>
1380 |                                 <div class="flex-1">
1381 |                                     <input type="text" id="tagSearch" class="form-control" placeholder="按标签搜索..." onkeypress="handleSearchKeyPress(event)">
1382 |                                 </div>
1383 |                                 <button class="btn btn-primary" onclick="searchAccounts()">
1384 |                                     <span>🔍</span>
1385 |                                     搜索
1386 |                                 </button>
1387 |                                 <button class="btn btn-secondary" onclick="clearSearch()">
1388 |                                     <span>🗑️</span>
1389 |                                     清除
1390 |                                 </button>
1391 |                             </div>
1392 |                         </div>
1393 |                         
1394 |                         <!-- 统计信息 -->
1395 |                         <div id="accountsStats" class="mb-4" style="display: none;">
1396 |                             <div class="flex gap-4 text-sm">
1397 |                                 <span>总数：<strong id="totalAccounts">0</strong></span>
1398 |                                 <span>当前页：<strong id="currentPage">1</strong></span>
1399 |                                 <span>每页：<strong id="pageSize">10</strong></span>
1400 |                             </div>
1401 |                         </div>
1402 | 
1403 |                         <div id="accountsList" class="account-list">
1404 |                             <div class="loading">
1405 |                                 <div class="loading-spinner"></div>
1406 |                                 正在加载账户列表...
1407 |                             </div>
1408 |                         </div>
1409 |                         
1410 |                         <!-- 分页控件 -->
1411 |                         <div id="accountsPagination" class="pagination" style="display: none;">
1412 |                             <button class="btn btn-sm" id="prevPageBtn" onclick="changePage('prev')" disabled>
1413 |                                 <span>←</span>
1414 |                                 上一页
1415 |                             </button>
1416 |                             <div id="pageNumbers" class="flex gap-1"></div>
1417 |                             <button class="btn btn-sm" id="nextPageBtn" onclick="changePage('next')">
1418 |                                 下一页
1419 |                                 <span>→</span>
1420 |                             </button>
1421 |                         </div>
1422 |                     </div>
1423 |                 </div>
1424 | 
1425 |                 <!-- 添加单个账户页面 -->
1426 |                 <div id="addAccountPage" class="page hidden">
1427 |                     <div class="card">
1428 |                         <div class="flex items-center justify-between mb-6">
1429 |                             <div>
1430 |                                 <h3 class="font-semibold">添加邮箱账户</h3>
1431 |                                 <p class="text-sm" style="color: #64748b;">添加单个Outlook邮箱账户到系统</p>
1432 |                             </div>
1433 |                             <button class="btn btn-secondary btn-sm" onclick="showPage('accounts')">
1434 |                                 <span>←</span>
1435 |                                 返回列表
1436 |                             </button>
1437 |                         </div>
1438 | 
1439 |                         <div style="max-width: 600px;">
1440 |                             <div class="form-group">
1441 |                                 <label class="form-label">邮箱地址 *</label>
1442 |                                 <input type="email" id="email" class="form-input" placeholder="example@outlook.com" required>
1443 |                                 <p class="text-xs" style="color: #64748b; margin-top: 4px;">请输入有效的Outlook邮箱地址</p>
1444 |                             </div>
1445 | 
1446 |                             <div class="form-group">
1447 |                                 <label class="form-label">刷新令牌 (Refresh Token) *</label>
1448 |                                 <textarea id="refreshToken" class="form-input form-textarea" rows="4" placeholder="从Azure应用获取的refresh_token" required></textarea>
1449 |                                 <p class="text-xs" style="color: #64748b; margin-top: 4px;">
1450 |                                     从Azure应用程序注册中获取的刷新令牌，用于OAuth2认证
1451 |                                 </p>
1452 |                             </div>
1453 | 
1454 |                             <div class="form-group">
1455 |                                 <label class="form-label">客户端ID (Client ID) *</label>
1456 |                                 <input type="text" id="clientId" class="form-input" placeholder="Azure应用的client_id" required>
1457 |                                 <p class="text-xs" style="color: #64748b; margin-top: 4px;">
1458 |                                     Azure应用程序的客户端标识符
1459 |                                 </p>
1460 |                             </div>
1461 | 
1462 |                             <div class="form-group">
1463 |                                 <div style="background: #f8fafc; padding: 16px; border-radius: 8px; border: 1px solid #e2e8f0;">
1464 |                                     <h4 style="margin: 0 0 8px 0; font-size: 0.875rem; font-weight: 600; color: #374151;">📋 获取步骤：</h4>
1465 |                                     <ol style="margin: 0; padding-left: 20px; font-size: 0.75rem; color: #6b7280; line-height: 1.5;">
1466 |                                         <li>访问 <a href="https://portal.azure.com" target="_blank" style="color: #3b82f6;">Azure Portal</a></li>
1467 |                                         <li>注册应用程序并配置权限</li>
1468 |                                         <li>获取Client ID和Refresh Token</li>
1469 |                                         <li>确保应用有邮件读取权限</li>
1470 |                                     </ol>
1471 |                                 </div>
1472 |                             </div>
1473 | 
1474 |                             <div class="form-group">
1475 |                                 <label for="accountTags">标签 (可选，用逗号分隔)</label>
1476 |                                 <input type="text" id="accountTags" class="form-control" placeholder="工作,个人,重要">
1477 |                             </div>
1478 | 
1479 |                             <div class="flex gap-3">
1480 |                                 <button class="btn btn-primary" onclick="addAccount()" id="addAccountBtn">
1481 |                                     <span>➕</span>
1482 |                                     添加账户
1483 |                                 </button>
1484 |                                 <button class="btn btn-secondary" onclick="clearAddAccountForm()">
1485 |                                     <span>🗑️</span>
1486 |                                     清空表单
1487 |                                 </button>
1488 |                                 <button class="btn btn-secondary" onclick="testAccountConnection()" id="testBtn">
1489 |                                     <span>🔍</span>
1490 |                                     测试连接
1491 |                                 </button>
1492 |                             </div>
1493 |                         </div>
1494 |                     </div>
1495 |                 </div>
1496 | 
1497 |                 <!-- 批量添加账户页面 -->
1498 |                 <div id="batchAddPage" class="page hidden">
1499 |                     <div class="card">
1500 |                         <div class="flex items-center justify-between mb-6">
1501 |                             <div>
1502 |                                 <h3 class="font-semibold">批量添加邮箱账户</h3>
1503 |                                 <p class="text-sm" style="color: #64748b;">一次性添加多个邮箱账户到系统</p>
1504 |                             </div>
1505 |                             <button class="btn btn-secondary btn-sm" onclick="showPage('accounts')">
1506 |                                 <span>←</span>
1507 |                                 返回列表
1508 |                             </button>
1509 |                         </div>
1510 | 
1511 |                         <div style="max-width: 800px;">
1512 |                             <div class="form-group">
1513 |                                 <label class="form-label">批量账户信息</label>
1514 |                                 <p class="text-sm" style="color: #64748b; margin-bottom: 8px;">
1515 |                                     每行格式：<code>邮箱----密码----刷新令牌----客户端ID</code>
1516 |                                 </p>
1517 |                                 <p class="text-sm" style="color: #64748b; margin-bottom: 12px;">
1518 |                                     📧 推荐购买地址（非广告，只是推荐）：
1519 |                                     <a target="_blank" href="http://wmemail.com" style="color: #3b82f6; margin: 0 8px;">wmemail.com</a>
1520 |                                 </p>
1521 |                                 <textarea id="batchAccounts" class="form-input form-textarea" rows="12" placeholder="example1@outlook.com----password1----refresh_token1----client_id1
1522 | example2@outlook.com----password2----refresh_token2----client_id2
1523 | example3@outlook.com----password3----refresh_token3----client_id3"></textarea>
1524 |                                 <p class="text-xs" style="color: #64748b; margin-top: 8px;">
1525 |                                     💡 提示：每行一个账户，使用四个连字符(----)分隔字段
1526 |                                 </p>
1527 |                             </div>
1528 | 
1529 |                             <div class="form-group">
1530 |                                 <div style="background: #fef3c7; padding: 16px; border-radius: 8px; border: 1px solid #fbbf24;">
1531 |                                     <h4 style="margin: 0 0 8px 0; font-size: 0.875rem; font-weight: 600; color: #92400e;">⚠️ 注意事项：</h4>
1532 |                                     <ul style="margin: 0; padding-left: 20px; font-size: 0.75rem; color: #92400e; line-height: 1.5;">
1533 |                                         <li>确保所有账户信息格式正确</li>
1534 |                                         <li>建议先测试少量账户再批量添加</li>
1535 |                                         <li>添加过程中请勿关闭页面</li>
1536 |                                         <li>失败的账户会在结果中显示</li>
1537 |                                     </ul>
1538 |                                 </div>
1539 |                             </div>
1540 | 
1541 |                             <div class="flex gap-3">
1542 |                                 <button class="btn btn-primary" onclick="batchAddAccounts()" id="batchAddBtn">
1543 |                                     <span>📦</span>
1544 |                                     开始批量添加
1545 |                                 </button>
1546 |                                 <button class="btn btn-secondary" onclick="clearBatchForm()">
1547 |                                     <span>🗑️</span>
1548 |                                     清空表单
1549 |                                 </button>
1550 |                                 <button class="btn btn-secondary" onclick="validateBatchFormat()">
1551 |                                     <span>✅</span>
1552 |                                     验证格式
1553 |                                 </button>
1554 |                                 <button class="btn btn-secondary" onclick="loadSampleData()">
1555 |                                     <span>📝</span>
1556 |                                     加载示例
1557 |                                 </button>
1558 |                             </div>
1559 | 
1560 |                             <!-- 批量添加进度 -->
1561 |                             <div id="batchProgress" class="hidden" style="margin-top: 24px;">
1562 |                                 <h4 style="margin-bottom: 12px; font-size: 0.875rem; font-weight: 600;">添加进度：</h4>
1563 |                                 <div class="progress-bar">
1564 |                                     <div class="progress-fill" id="batchProgressFill"></div>
1565 |                                 </div>
1566 |                                 <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #64748b; margin-top: 8px;">
1567 |                                     <span id="batchProgressText">准备中...</span>
1568 |                                     <span id="batchProgressCount">0 / 0</span>
1569 |                                 </div>
1570 |                             </div>
1571 | 
1572 |                             <!-- 批量添加结果 -->
1573 |                             <div id="batchResults" class="hidden" style="margin-top: 24px;">
1574 |                                 <h4 style="margin-bottom: 12px; font-size: 0.875rem; font-weight: 600;">添加结果：</h4>
1575 |                                 <div id="batchResultsList"></div>
1576 |                             </div>
1577 |                         </div>
1578 |                     </div>
1579 |                 </div>
1580 | 
1581 |                 <!-- API文档页面 -->
1582 |                 <div id="apiDocsPage" class="page hidden">
1583 |                     <div class="card">
1584 |                         <div class="flex items-center justify-between mb-6">
1585 |                             <div>
1586 |                                 <h3 class="font-semibold">API接口文档</h3>
1587 |                                 <p class="text-sm" style="color: #64748b;">邮件管理系统的RESTful API接口说明</p>
1588 |                             </div>
1589 |                             <div class="flex gap-2">
1590 |                                 <button class="btn btn-secondary btn-sm" onclick="copyApiBaseUrl()">
1591 |                                     <span>📋</span>
1592 |                                     复制Base URL
1593 |                                 </button>
1594 |                                 <button class="btn btn-secondary btn-sm" onclick="downloadApiDocs()">
1595 |                                     <span>📥</span>
1596 |                                     下载文档
1597 |                                 </button>
1598 |                             </div>
1599 |                         </div>
1600 | 
1601 |                         <div class="api-docs">
1602 |                             <!-- API基础信息 -->
1603 |                             <div class="api-endpoint">
1604 |                                 <div class="api-header">
1605 |                                     <div>
1606 |                                         <h3 style="margin: 0; color: #1f2937;">📡 API基础信息</h3>
1607 |                                     </div>
1608 |                                 </div>
1609 |                                 <div class="api-body">
1610 |                                     <div class="api-section">
1611 |                                         <h4>Base URL</h4>
1612 |                                         <div class="api-example" id="baseUrlExample">http://localhost:8001</div>
1613 |                                     </div>
1614 |                                     <div class="api-section">
1615 |                                         <h4>认证方式</h4>
1616 |                                         <p class="api-description">当前版本无需认证，直接调用接口即可。</p>
1617 |                                     </div>
1618 |                                     <div class="api-section">
1619 |                                         <h4>响应格式</h4>
1620 |                                         <p class="api-description">所有接口返回JSON格式数据，HTTP状态码表示请求结果。</p>
1621 |                                     </div>
1622 |                                 </div>
1623 |                             </div>
1624 | 
1625 |                             <!-- 获取邮箱列表接口 -->
1626 |                             <div class="api-endpoint">
1627 |                                 <div class="api-header">
1628 |                                     <div style="display: flex; align-items: center;">
1629 |                                         <span class="api-method get">GET</span>
1630 |                                         <span class="api-path">/accounts</span>
1631 |                                     </div>
1632 |                                     <button class="api-try-button" onclick="tryApi('accounts')">🚀 试用接口</button>
1633 |                                 </div>
1634 |                                 <div class="api-body">
1635 |                                     <p class="api-description">获取系统中所有已添加的邮箱账户列表，支持分页和模糊搜索。</p>
1636 | 
1637 |                                     <div class="api-section">
1638 |                                         <h4>请求参数</h4>
1639 |                                         <div class="api-params">
1640 |                                             <div class="api-param">
1641 |                                                 <span class="api-param-name">page</span>
1642 |                                                 <span class="api-param-type">integer</span>
1643 |                                                 <span class="api-param-desc">页码，从1开始，默认: 1</span>
1644 |                                             </div>
1645 |                                             <div class="api-param">
1646 |                                                 <span class="api-param-name">page_size</span>
1647 |                                                 <span class="api-param-type">integer</span>
1648 |                                                 <span class="api-param-desc">每页数量，范围1-100，默认: 10</span>
1649 |                                             </div>
1650 |                                             <div class="api-param">
1651 |                                                 <span class="api-param-name">email_search</span>
1652 |                                                 <span class="api-param-type">string</span>
1653 |                                                 <span class="api-param-desc">邮箱账号模糊搜索，可选</span>
1654 |                                             </div>
1655 |                                             <div class="api-param">
1656 |                                                 <span class="api-param-name">tag_search</span>
1657 |                                                 <span class="api-param-type">string</span>
1658 |                                                 <span class="api-param-desc">标签模糊搜索，可选</span>
1659 |                                             </div>
1660 |                                         </div>
1661 |                                     </div>
1662 | 
1663 |                                     <div class="api-section">
1664 |                                         <h4>响应示例</h4>
1665 |                                         <div class="api-example">{
1666 |   "total_accounts": 25,
1667 |   "page": 1,
1668 |   "page_size": 10,
1669 |   "total_pages": 3,
1670 |   "accounts": [
1671 |     {
1672 |       "email_id": "example@outlook.com",
1673 |       "client_id": "your-client-id",
1674 |       "status": "active",
1675 |       "tags": ["工作", "个人"]
1676 |     }
1677 |   ]
1678 | }</div>
1679 |                                     </div>
1680 | 
1681 |                                     <div class="api-response" id="accountsResponse">
1682 |                                         <h4 style="margin-bottom: 8px; color: #15803d;">响应结果：</h4>
1683 |                                         <pre id="accountsResponseData"></pre>
1684 |                                     </div>
1685 |                                 </div>
1686 |                             </div>
1687 | 
1688 |                             <!-- 获取邮件列表接口 -->
1689 |                             <div class="api-endpoint">
1690 |                                 <div class="api-header">
1691 |                                     <div style="display: flex; align-items: center;">
1692 |                                         <span class="api-method get">GET</span>
1693 |                                         <span class="api-path">/emails/{email_id}</span>
1694 |                                     </div>
1695 |                                     <button class="api-try-button" onclick="tryApi('emails')">🚀 试用接口</button>
1696 |                                 </div>
1697 |                                 <div class="api-body">
1698 |                                     <p class="api-description">获取指定邮箱的邮件列表，支持分页和过滤。</p>
1699 | 
1700 |                                     <div class="api-section">
1701 |                                         <h4>路径参数</h4>
1702 |                                         <div class="api-params">
1703 |                                             <div class="api-param">
1704 |                                                 <span class="api-param-name">email_id</span>
1705 |                                                 <span class="api-param-type">string</span>
1706 |                                                 <span class="api-param-desc">邮箱地址，需要URL编码</span>
1707 |                                             </div>
1708 |                                         </div>
1709 |                                     </div>
1710 | 
1711 |                                     <div class="api-section">
1712 |                                         <h4>查询参数</h4>
1713 |                                         <div class="api-params">
1714 |                                             <div class="api-param">
1715 |                                                 <span class="api-param-name">folder</span>
1716 |                                                 <span class="api-param-type">string</span>
1717 |                                                 <span class="api-param-desc">邮件文件夹 (all, inbox, junk)，默认: all</span>
1718 |                                             </div>
1719 |                                             <div class="api-param">
1720 |                                                 <span class="api-param-name">page</span>
1721 |                                                 <span class="api-param-type">integer</span>
1722 |                                                 <span class="api-param-desc">页码，从1开始，默认: 1</span>
1723 |                                             </div>
1724 |                                             <div class="api-param">
1725 |                                                 <span class="api-param-name">page_size</span>
1726 |                                                 <span class="api-param-type">integer</span>
1727 |                                                 <span class="api-param-desc">每页数量，范围1-500，默认: 100</span>
1728 |                                             </div>
1729 |                                             <div class="api-param">
1730 |                                                 <span class="api-param-name">refresh</span>
1731 |                                                 <span class="api-param-type">boolean</span>
1732 |                                                 <span class="api-param-desc">是否强制刷新缓存，默认: false</span>
1733 |                                             </div>
1734 |                                         </div>
1735 |                                     </div>
1736 | 
1737 |                                     <div class="api-section">
1738 |                                         <h4>请求示例</h4>
1739 |                                         <div class="api-example">GET /emails/example%40outlook.com?folder=inbox&page=1&page_size=20&refresh=true</div>
1740 |                                     </div>
1741 | 
1742 |                                     <div class="api-section">
1743 |                                         <h4>响应示例</h4>
1744 |                                         <div class="api-example">{
1745 |   "email_id": "example@outlook.com",
1746 |   "folder_view": "inbox",
1747 |   "page": 1,
1748 |   "page_size": 20,
1749 |   "total_emails": 150,
1750 |   "emails": [
1751 |     {
1752 |       "message_id": "INBOX-1",
1753 |       "folder": "INBOX",
1754 |       "subject": "邮件主题",
1755 |       "from_email": "sender@example.com",
1756 |       "date": "2024-01-01T12:00:00Z",
1757 |       "is_read": false,
1758 |       "has_attachments": true,
1759 |       "sender_initial": "S"
1760 |     }
1761 |   ]
1762 | }</div>
1763 |                                     </div>
1764 | 
1765 |                                     <div class="api-response" id="emailsResponse">
1766 |                                         <h4 style="margin-bottom: 8px; color: #15803d;">响应结果：</h4>
1767 |                                         <pre id="emailsResponseData"></pre>
1768 |                                     </div>
1769 |                                 </div>
1770 |                             </div>
1771 | 
1772 |                             <!-- 获取邮件详情接口 -->
1773 |                             <div class="api-endpoint">
1774 |                                 <div class="api-header">
1775 |                                     <div style="display: flex; align-items: center;">
1776 |                                         <span class="api-method get">GET</span>
1777 |                                         <span class="api-path">/emails/{email_id}/{message_id}</span>
1778 |                                     </div>
1779 |                                     <button class="api-try-button" onclick="tryApi('emailDetail')">🚀 试用接口</button>
1780 |                                 </div>
1781 |                                 <div class="api-body">
1782 |                                     <p class="api-description">获取指定邮件的详细内容，包括邮件正文。</p>
1783 | 
1784 |                                     <div class="api-section">
1785 |                                         <h4>路径参数</h4>
1786 |                                         <div class="api-params">
1787 |                                             <div class="api-param">
1788 |                                                 <span class="api-param-name">email_id</span>
1789 |                                                 <span class="api-param-type">string</span>
1790 |                                                 <span class="api-param-desc">邮箱地址，需要URL编码</span>
1791 |                                             </div>
1792 |                                             <div class="api-param">
1793 |                                                 <span class="api-param-name">message_id</span>
1794 |                                                 <span class="api-param-type">string</span>
1795 |                                                 <span class="api-param-desc">邮件ID，格式: {folder}-{id}</span>
1796 |                                             </div>
1797 |                                         </div>
1798 |                                     </div>
1799 | 
1800 |                                     <div class="api-section">
1801 |                                         <h4>请求示例</h4>
1802 |                                         <div class="api-example">GET /emails/example%40outlook.com/INBOX-1</div>
1803 |                                     </div>
1804 | 
1805 |                                     <div class="api-section">
1806 |                                         <h4>响应示例</h4>
1807 |                                         <div class="api-example">{
1808 |   "message_id": "INBOX-1",
1809 |   "subject": "邮件主题",
1810 |   "from_email": "sender@example.com",
1811 |   "to_email": "example@outlook.com",
1812 |   "date": "2024-01-01T12:00:00Z",
1813 |   "body_plain": "纯文本邮件内容",
1814 |   "body_html": "&lt;html&gt;&lt;body&gt;HTML邮件内容&lt;/body&gt;&lt;/html&gt;"
1815 | }</div>
1816 |                                     </div>
1817 | 
1818 |                                     <div class="api-response" id="emailDetailResponse">
1819 |                                         <h4 style="margin-bottom: 8px; color: #15803d;">响应结果：</h4>
1820 |                                         <pre id="emailDetailResponseData"></pre>
1821 |                                     </div>
1822 |                                 </div>
1823 |                             </div>
1824 |                         </div>
1825 |                     </div>
1826 |                 </div>
1827 | 
1828 |                 <!-- 邮件列表页面 -->
1829 |                 <div id="emailsPage" class="page hidden">
1830 |                     <div class="card">
1831 |                         <!-- 账户信息和操作按钮 -->
1832 |                         <div class="flex items-center justify-between mb-4">
1833 |                             <div>
1834 |                                 <h3 class="font-semibold">当前账户：
1835 |                                     <span id="currentAccountEmail"
1836 |                                           class="text-sm font-medium email-copyable"
1837 |                                           style="color: #3b82f6; cursor: pointer; position: relative;"
1838 |                                           onclick="copyEmailAddress(this.textContent)"
1839 |                                           title="点击复制邮箱地址">
1840 |                                     </span>
1841 |                                     <span class="copy-icon" style="margin-left: 6px; opacity: 0.6; font-size: 0.8em;">📋</span>
1842 |                                 </h3>
1843 |                                 <p class="text-sm" style="color: #64748b;">最后更新：<span id="lastUpdateTime">-</span></p>
1844 |                             </div>
1845 |                             <div class="flex gap-2">
1846 |                                 <button class="btn btn-secondary btn-sm" onclick="refreshEmails()" id="refreshBtn">
1847 |                                     <span>🔄</span>
1848 |                                     刷新
1849 |                                 </button>
1850 |                                 <button class="btn btn-secondary btn-sm" onclick="clearCache()">
1851 |                                     <span>🗑️</span>
1852 |                                     清除缓存
1853 |                                 </button>
1854 |                                 <button class="btn btn-secondary btn-sm" onclick="exportEmails()">
1855 |                                     <span>📤</span>
1856 |                                     导出
1857 |                                 </button>
1858 |                                 <button class="btn btn-secondary btn-sm" onclick="backToAccounts()">
1859 |                                     <span>←</span>
1860 |                                     返回账户
1861 |                                 </button>
1862 |                             </div>
1863 |                         </div>
1864 | 
1865 |                         <!-- 统计信息 -->
1866 |                         <div class="stats-container">
1867 |                             <div class="stat-item">
1868 |                                 <div class="stat-value" id="totalEmailCount">0</div>
1869 |                                 <div class="stat-label">总邮件数</div>
1870 |                             </div>
1871 |                             <div class="stat-item">
1872 |                                 <div class="stat-value" id="unreadEmailCount">0</div>
1873 |                                 <div class="stat-label">未读邮件</div>
1874 |                             </div>
1875 |                             <div class="stat-item">
1876 |                                 <div class="stat-value" id="todayEmailCount">0</div>
1877 |                                 <div class="stat-label">今日邮件</div>
1878 |                             </div>
1879 |                             <div class="stat-item">
1880 |                                 <div class="stat-value" id="attachmentEmailCount">0</div>
1881 |                                 <div class="stat-label">带附件</div>
1882 |                             </div>
1883 |                         </div>
1884 | 
1885 |                         <!-- 搜索和过滤 -->
1886 |                         <div class="search-container">
1887 |                             <span class="search-icon">🔍</span>
1888 |                             <input type="text" class="search-input" id="emailSearch" placeholder="搜索邮件标题、发件人或内容..." onkeyup="searchEmails()">
1889 |                         </div>
1890 | 
1891 |                         <div class="filter-container">
1892 |                             <div class="filter-group">
1893 |                                 <label class="filter-label">文件夹:</label>
1894 |                                 <select class="filter-select" id="folderFilter" onchange="applyFilters()">
1895 |                                     <option value="all">全部邮件</option>
1896 |                                     <option value="inbox">收件箱</option>
1897 |                                     <option value="junk">垃圾邮件</option>
1898 |                                 </select>
1899 |                             </div>
1900 |                             <div class="filter-group">
1901 |                                 <label class="filter-label">状态:</label>
1902 |                                 <select class="filter-select" id="statusFilter" onchange="applyFilters()">
1903 |                                     <option value="all">全部状态</option>
1904 |                                     <option value="unread">未读</option>
1905 |                                     <option value="read">已读</option>
1906 |                                 </select>
1907 |                             </div>
1908 |                             <div class="filter-group">
1909 |                                 <label class="filter-label">时间:</label>
1910 |                                 <select class="filter-select" id="timeFilter" onchange="applyFilters()">
1911 |                                     <option value="all">全部时间</option>
1912 |                                     <option value="today">今天</option>
1913 |                                     <option value="week">本周</option>
1914 |                                     <option value="month">本月</option>
1915 |                                 </select>
1916 |                             </div>
1917 |                             <div class="filter-group">
1918 |                                 <label class="filter-label">附件:</label>
1919 |                                 <select class="filter-select" id="attachmentFilter" onchange="applyFilters()">
1920 |                                     <option value="all">全部</option>
1921 |                                     <option value="with">有附件</option>
1922 |                                     <option value="without">无附件</option>
1923 |                                 </select>
1924 |                             </div>
1925 |                             <button class="btn btn-secondary btn-sm" onclick="clearFilters()">
1926 |                                 <span>🗑️</span>
1927 |                                 清除筛选
1928 |                             </button>
1929 |                         </div>
1930 | 
1931 |                         <!-- 邮件列表 -->
1932 |                         <div id="emailsList" class="email-list">
1933 |                             <div class="loading">
1934 |                                 <div class="loading-spinner"></div>
1935 |                                 正在加载邮件...
1936 |                             </div>
1937 |                         </div>
1938 | 
1939 |                         <div id="emailsPagination" class="pagination hidden"></div>
1940 |                     </div>
1941 |                 </div>
1942 |             </div>
1943 |         </div>
1944 |     </div>
1945 | 
1946 |     <!-- 通知容器 -->
1947 |     <div id="notificationContainer" class="notification-container"></div>
1948 | 
1949 |     <!-- 邮件详情模态框 -->
1950 |     <div id="emailModal" class="modal hidden">
1951 |         <div class="modal-content">
1952 |             <div class="modal-header">
1953 |                 <h3 id="emailModalTitle">邮件详情</h3>
1954 |                 <button class="modal-close" onclick="closeEmailModal()">&times;</button>
1955 |             </div>
1956 |             <div class="modal-body">
1957 |                 <div id="emailModalContent">
1958 |                     <div class="loading">正在加载邮件详情...</div>
1959 |                 </div>
1960 |             </div>
1961 |         </div>
1962 |     </div>
1963 | 
1964 |     <!-- 标签管理模态框 -->
1965 |     <div id="tagsModal" class="modal">
1966 |         <div class="modal-content" style="max-width: 500px;">
1967 |             <div class="modal-header">
1968 |                 <h3>管理账户标签</h3>
1969 |                 <span class="close" onclick="closeTagsModal()">&times;</span>
1970 |             </div>
1971 |             <div class="modal-body">
1972 |                 <div class="form-group">
1973 |                     <label for="currentTags">当前标签</label>
1974 |                     <div id="currentTagsList" class="tags-list"></div>
1975 |                 </div>
1976 |                 <div class="form-group">
1977 |                     <label for="newTag">添加新标签</label>
1978 |                     <div class="input-group">
1979 |                         <input type="text" id="newTag" class="form-control" placeholder="输入标签名称">
1980 |                         <button class="btn btn-primary" onclick="addTag()">添加</button>
1981 |                     </div>
1982 |                 </div>
1983 |             </div>
1984 |             <div class="modal-footer">
1985 |                 <button class="btn btn-secondary" onclick="closeTagsModal()">取消</button>
1986 |                 <button class="btn btn-primary" onclick="saveAccountTags()">保存</button>
1987 |             </div>
1988 |         </div>
1989 |     </div>
1990 | 
1991 |     <!-- 右键菜单 -->
1992 |     <div id="contextMenu" class="context-menu">
1993 |         <div class="context-menu-item" onclick="openInNewTab()">
1994 |             <span>🔗</span>
1995 |             在新标签页中打开
1996 |         </div>
1997 |         <div class="context-menu-item" onclick="copyAccountLink()">
1998 |             <span>📋</span>
1999 |             复制链接
2000 |         </div>
2001 |         <div class="context-menu-divider"></div>
2002 |         <div class="context-menu-item" onclick="contextEditTags()">
2003 |             <span>🏷️</span>
2004 |             管理标签
2005 |         </div>
2006 |         <div class="context-menu-item danger" onclick="contextDeleteAccount()">
2007 |             <span>🗑️</span>
2008 |             删除账户
2009 |         </div>
2010 |     </div>
2011 | 
2012 |     <script>
2013 |         // 全局变量
2014 |         const API_BASE = '';
2015 |         let currentAccount = null;
2016 |         let currentEmailFolder = 'all';
2017 |         let currentEmailPage = 1;
2018 |         let accounts = [];
2019 |         
2020 |         // 账户管理分页相关变量
2021 |         let accountsCurrentPage = 1;
2022 |         let accountsPageSize = 10;
2023 |         let accountsTotalPages = 0;
2024 |         let accountsTotalCount = 0;
2025 |         let currentEmailSearch = '';
2026 |         let currentTagSearch = '';
2027 | 
2028 |         // 全局变量，用于存储当前编辑的账户信息
2029 |         let currentEditAccount = null;
2030 |         let currentEditTags = [];
2031 | 
2032 |         // 页面管理
2033 |         function showPage(pageName, targetElement = null) {
2034 |             // 隐藏所有页面
2035 |             document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'));
2036 | 
2037 |             // 显示指定页面
2038 |             document.getElementById(pageName + 'Page').classList.remove('hidden');
2039 | 
2040 |             // 更新导航状态
2041 |             document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
2042 | 
2043 |             // 如果有目标元素，激活它；否则根据页面名称查找对应的导航项
2044 |             if (targetElement) {
2045 |                 targetElement.classList.add('active');
2046 |             } else {
2047 |                 // 根据页面名称查找对应的导航按钮
2048 |                 const navButtons = document.querySelectorAll('.nav-item');
2049 |                 navButtons.forEach(button => {
2050 |                     if (button.onclick && button.onclick.toString().includes(`'${pageName}'`)) {
2051 |                         button.classList.add('active');
2052 |                     }
2053 |                 });
2054 |             }
2055 | 
2056 |             // 更新页面标题
2057 |             const titles = {
2058 |                 'accounts': '邮箱账户管理',
2059 |                 'addAccount': '添加邮箱账户',
2060 |                 'batchAdd': '批量添加账户',
2061 |                 'apiDocs': 'API接口文档',
2062 |                 'emails': '邮件列表'
2063 |             };
2064 |             document.getElementById('pageTitle').textContent = titles[pageName] || '';
2065 | 
2066 |             // 页面特定逻辑
2067 |             if (pageName === 'accounts') {
2068 |                 loadAccounts();
2069 |             } else if (pageName === 'addAccount') {
2070 |                 clearAddAccountForm();
2071 |             } else if (pageName === 'batchAdd') {
2072 |                 clearBatchForm();
2073 |                 hideBatchProgress();
2074 |             } else if (pageName === 'apiDocs') {
2075 |                 initApiDocs();
2076 |             } else if (pageName === 'emails') {
2077 |                 loadEmails();
2078 |             }
2079 |         }
2080 | 
2081 |         // 工具函数
2082 |         function formatEmailDate(dateString) {
2083 |             try {
2084 |                 if (!dateString) return '未知时间';
2085 | 
2086 |                 let date = new Date(dateString);
2087 | 
2088 |                 if (isNaN(date.getTime())) {
2089 |                     if (dateString.includes('T') && !dateString.includes('Z') && !dateString.includes('+')) {
2090 |                         date = new Date(dateString + 'Z');
2091 |                     }
2092 |                     if (isNaN(date.getTime())) {
2093 |                         return '日期格式错误';
2094 |                     }
2095 |                 }
2096 | 
2097 |                 const now = new Date();
2098 |                 const diffMs = now - date;
2099 |                 const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
2100 | 
2101 |                 if (diffDays === 0) {
2102 |                     return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
2103 |                 } else if (diffDays === 1) {
2104 |                     return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
2105 |                 } else if (diffDays < 7) {
2106 |                     return `${diffDays}天前`;
2107 |                 } else if (diffDays < 365) {
2108 |                     return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
2109 |                 } else {
2110 |                     return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' });
2111 |                 }
2112 |             } catch (error) {
2113 |                 console.error('Date formatting error:', error);
2114 |                 return '时间解析失败';
2115 |             }
2116 |         }
2117 | 
2118 |         // 新的通知系统
2119 |         function showNotification(message, type = 'info', title = '', duration = 5000) {
2120 |             const container = document.getElementById('notificationContainer');
2121 |             const notification = document.createElement('div');
2122 |             notification.className = `notification ${type}`;
2123 | 
2124 |             const icons = {
2125 |                 success: '✅',
2126 |                 error: '❌',
2127 |                 warning: '⚠️',
2128 |                 info: 'ℹ️'
2129 |             };
2130 | 
2131 |             const titles = {
2132 |                 success: title || '成功',
2133 |                 error: title || '错误',
2134 |                 warning: title || '警告',
2135 |                 info: title || '提示'
2136 |             };
2137 | 
2138 |             notification.innerHTML = `
2139 |                 <div class="notification-icon">${icons[type]}</div>
2140 |                 <div class="notification-content">
2141 |                     <div class="notification-title">${titles[type]}</div>
2142 |                     <div class="notification-message">${message}</div>
2143 |                 </div>
2144 |                 <button class="notification-close" onclick="closeNotification(this)">×</button>
2145 |             `;
2146 | 
2147 |             container.appendChild(notification);
2148 | 
2149 |             // 自动关闭
2150 |             if (duration > 0) {
2151 |                 setTimeout(() => {
2152 |                     closeNotification(notification.querySelector('.notification-close'));
2153 |                 }, duration);
2154 |             }
2155 |         }
2156 | 
2157 |         function closeNotification(closeBtn) {
2158 |             const notification = closeBtn.closest('.notification');
2159 |             notification.classList.add('slide-out');
2160 |             setTimeout(() => notification.remove(), 300);
2161 |         }
2162 | 
2163 |         // 兼容旧的消息提示函数
2164 |         function showError(msg) {
2165 |             showNotification(msg, 'error');
2166 |         }
2167 | 
2168 |         function showSuccess(msg) {
2169 |             showNotification(msg, 'success');
2170 |         }
2171 | 
2172 |         function showWarning(msg) {
2173 |             showNotification(msg, 'warning');
2174 |         }
2175 | 
2176 |         function showInfo(msg) {
2177 |             showNotification(msg, 'info');
2178 |         }
2179 | 
2180 |         // API请求
2181 |         async function apiRequest(url, options = {}) {
2182 |             try {
2183 |                 const response = await fetch(API_BASE + url, {
2184 |                     headers: {
2185 |                         'Content-Type': 'application/json',
2186 |                         ...options.headers
2187 |                     },
2188 |                     ...options
2189 |                 });
2190 | 
2191 |                 if (!response.ok) {
2192 |                     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
2193 |                 }
2194 | 
2195 |                 return await response.json();
2196 |             } catch (error) {
2197 |                 console.error('API请求失败:', error);
2198 |                 throw error;
2199 |             }
2200 |         }
2201 | 
2202 |         // 表单管理函数
2203 |         function clearAddAccountForm() {
2204 |             document.getElementById('email').value = '';
2205 |             document.getElementById('refreshToken').value = '';
2206 |             document.getElementById('clientId').value = '';
2207 |         }
2208 | 
2209 |         function clearBatchForm() {
2210 |             document.getElementById('batchAccounts').value = '';
2211 |         }
2212 | 
2213 |         function loadSampleData() {
2214 |             const sampleData = `example1@outlook.com----password1----refresh_token_here_1----client_id_here_1
2215 | example2@outlook.com----password2----refresh_token_here_2----client_id_here_2
2216 | example3@outlook.com----password3----refresh_token_here_3----client_id_here_3`;
2217 |             document.getElementById('batchAccounts').value = sampleData;
2218 |             showNotification('示例数据已加载，请替换为真实数据', 'info');
2219 |         }
2220 | 
2221 |         function validateBatchFormat() {
2222 |             const batchText = document.getElementById('batchAccounts').value.trim();
2223 |             if (!batchText) {
2224 |                 showNotification('请先输入账户信息', 'warning');
2225 |                 return;
2226 |             }
2227 | 
2228 |             const lines = batchText.split('\n').filter(line => line.trim());
2229 |             let validCount = 0;
2230 |             let invalidLines = [];
2231 | 
2232 |             lines.forEach((line, index) => {
2233 |                 const parts = line.split('----').map(p => p.trim());
2234 |                 if (parts.length === 4 && parts.every(part => part.length > 0)) {
2235 |                     validCount++;
2236 |                 } else {
2237 |                     invalidLines.push(index + 1);
2238 |                 }
2239 |             });
2240 | 
2241 |             if (invalidLines.length === 0) {
2242 |                 showNotification(`格式验证通过！共 ${validCount} 个有效账户`, 'success');
2243 |             } else {
2244 |                 showNotification(`发现 ${invalidLines.length} 行格式错误：第 ${invalidLines.join(', ')} 行`, 'error');
2245 |             }
2246 |         }
2247 | 
2248 |         async function testAccountConnection() {
2249 |             const email = document.getElementById('email').value.trim();
2250 |             const refreshToken = document.getElementById('refreshToken').value.trim();
2251 |             const clientId = document.getElementById('clientId').value.trim();
2252 | 
2253 |             if (!email || !refreshToken || !clientId) {
2254 |                 showNotification('请填写所有必需字段', 'warning');
2255 |                 return;
2256 |             }
2257 | 
2258 |             const testBtn = document.getElementById('testBtn');
2259 |             testBtn.disabled = true;
2260 |             testBtn.innerHTML = '<span>⏳</span> 测试中...';
2261 | 
2262 |             try {
2263 |                 // 这里可以调用一个测试接口
2264 |                 await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟测试
2265 |                 showNotification('连接测试成功！账户配置正确', 'success');
2266 |             } catch (error) {
2267 |                 showNotification('连接测试失败：' + error.message, 'error');
2268 |             } finally {
2269 |                 testBtn.disabled = false;
2270 |                 testBtn.innerHTML = '<span>🔍</span> 测试连接';
2271 |             }
2272 |         }
2273 | 
2274 |         async function loadAccounts(page = 1, resetSearch = false) {
2275 |             if (resetSearch) {
2276 |                 // 重置搜索条件
2277 |                 currentEmailSearch = '';
2278 |                 currentTagSearch = '';
2279 |                 document.getElementById('emailSearch').value = '';
2280 |                 document.getElementById('tagSearch').value = '';
2281 |                 page = 1;
2282 |             }
2283 |             
2284 |             accountsCurrentPage = page;
2285 |             
2286 |             const accountsList = document.getElementById('accountsList');
2287 |             const accountsStats = document.getElementById('accountsStats');
2288 |             const accountsPagination = document.getElementById('accountsPagination');
2289 |             
2290 |             accountsList.innerHTML = '<div class="loading">正在加载账户列表...</div>';
2291 |             accountsStats.style.display = 'none';
2292 |             accountsPagination.style.display = 'none';
2293 | 
2294 |             try {
2295 |                 // 构建请求参数
2296 |                 const params = new URLSearchParams({
2297 |                     page: accountsCurrentPage,
2298 |                     page_size: accountsPageSize
2299 |                 });
2300 |                 
2301 |                 if (currentEmailSearch) {
2302 |                     params.append('email_search', currentEmailSearch);
2303 |                 }
2304 |                 
2305 |                 if (currentTagSearch) {
2306 |                     params.append('tag_search', currentTagSearch);
2307 |                 }
2308 |                 
2309 |                 const data = await apiRequest(`/accounts?${params.toString()}`);
2310 |                 
2311 |                 accounts = data.accounts || [];
2312 |                 accountsTotalCount = data.total_accounts || 0;
2313 |                 accountsTotalPages = data.total_pages || 0;
2314 |                 
2315 |                 // 更新统计信息
2316 |                 updateAccountsStats();
2317 |                 
2318 |                 if (accounts.length === 0) {
2319 |                     accountsList.innerHTML = '<div class="text-center" style="padding: 40px; color: #64748b;">暂无符合条件的账户</div>';
2320 |                     return;
2321 |                 }
2322 | 
2323 |                 accountsList.innerHTML = accounts.map(account => {
2324 |                     // 生成标签HTML
2325 |                     const tagsHtml = account.tags && account.tags.length > 0 
2326 |                         ? `<div class="account-tags">${account.tags.map(tag => 
2327 |                             `<span class="account-tag">${tag}</span>`).join('')}</div>` 
2328 |                         : '';
2329 |                         
2330 |                     return `
2331 |                         <div class="account-item" onclick="viewAccountEmails('${account.email_id}')" oncontextmenu="showAccountContextMenu(event, '${account.email_id}')">
2332 |                             <div class="account-info">
2333 |                                 <div class="account-avatar">${account.email_id.charAt(0).toUpperCase()}</div>
2334 |                                 <div class="account-details">
2335 |                                     <h4>${account.email_id}</h4>
2336 |                                     <p>状态: ${account.status === 'active' ? '正常' : '异常'}</p>
2337 |                                     ${tagsHtml}
2338 |                                 </div>
2339 |                             </div>
2340 |                             <div class="account-actions" onclick="event.stopPropagation()">
2341 |                                 <button class="btn btn-primary btn-sm" onclick="viewAccountEmails('${account.email_id}')">
2342 |                                     <span>📧</span>
2343 |                                     查看邮件
2344 |                                 </button>
2345 |                                 <button class="btn btn-secondary btn-sm" onclick="editAccountTags('${account.email_id}', ${JSON.stringify(account.tags || [])})">
2346 |                                     <span>🏷️</span>
2347 |                                     管理标签
2348 |                                 </button>
2349 |                                 <button class="btn btn-danger btn-sm" onclick="deleteAccount('${account.email_id}')">
2350 |                                     <span>🗑️</span>
2351 |                                     删除
2352 |                                 </button>
2353 |                             </div>
2354 |                         </div>
2355 |                     `;
2356 |                 }).join('');
2357 |                 
2358 |                 // 更新分页控件
2359 |                 updateAccountsPagination();
2360 | 
2361 |             } catch (error) {
2362 |                 accountsList.innerHTML = '<div class="error">加载失败: ' + error.message + '</div>';
2363 |             }
2364 |         }
2365 | 
2366 |         async function addAccount() {
2367 |             const email = document.getElementById('email').value.trim();
2368 |             const refreshToken = document.getElementById('refreshToken').value.trim();
2369 |             const clientId = document.getElementById('clientId').value.trim();
2370 |             const tagsInput = document.getElementById('accountTags').value.trim();
2371 |             
2372 |             // 处理标签
2373 |             const tags = tagsInput ? tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag) : [];
2374 | 
2375 |             if (!email || !refreshToken || !clientId) {
2376 |                 showNotification('请填写所有必填字段', 'warning');
2377 |                 return;
2378 |             }
2379 | 
2380 |             const addBtn = document.getElementById('addAccountBtn');
2381 |             addBtn.disabled = true;
2382 |             addBtn.innerHTML = '<span>⏳</span> 添加中...';
2383 | 
2384 |             try {
2385 |                 const response = await apiRequest('/accounts', {
2386 |                     method: 'POST',
2387 |                     body: JSON.stringify({
2388 |                         email,
2389 |                         refresh_token: refreshToken,
2390 |                         client_id: clientId,
2391 |                         tags: tags
2392 |                     })
2393 |                 });
2394 | 
2395 |                 showSuccess('账户添加成功');
2396 |                 clearAddAccountForm();
2397 |                 showPage('accounts');
2398 |                 loadAccounts();
2399 |             } catch (error) {
2400 |                 showNotification('添加账户失败: ' + error.message, 'error');
2401 |             } finally {
2402 |                 addBtn.disabled = false;
2403 |                 addBtn.innerHTML = '<span>➕</span> 添加账户';
2404 |             }
2405 |         }
2406 | 
2407 |         async function batchAddAccounts() {
2408 |             const batchText = document.getElementById('batchAccounts').value.trim();
2409 |             if (!batchText) {
2410 |                 showNotification('请输入账户信息', 'warning');
2411 |                 return;
2412 |             }
2413 | 
2414 |             const lines = batchText.split('\n').filter(line => line.trim());
2415 |             if (lines.length === 0) {
2416 |                 showNotification('没有有效的账户信息', 'warning');
2417 |                 return;
2418 |             }
2419 | 
2420 |             // 显示进度
2421 |             showBatchProgress();
2422 |             const batchBtn = document.getElementById('batchAddBtn');
2423 |             batchBtn.disabled = true;
2424 |             batchBtn.innerHTML = '<span>⏳</span> 添加中...';
2425 | 
2426 |             let successCount = 0;
2427 |             let failCount = 0;
2428 |             const results = [];
2429 | 
2430 |             for (let i = 0; i < lines.length; i++) {
2431 |                 const line = lines[i];
2432 |                 const parts = line.split('----').map(p => p.trim());
2433 | 
2434 |                 // 更新进度
2435 |                 updateBatchProgress(i + 1, lines.length, `处理第 ${i + 1} 个账户...`);
2436 | 
2437 |                 if (parts.length !== 4) {
2438 |                     failCount++;
2439 |                     results.push({
2440 |                         email: parts[0] || '格式错误',
2441 |                         status: 'error',
2442 |                         message: '格式错误：应为 邮箱----密码----刷新令牌----客户端ID'
2443 |                     });
2444 |                     continue;
2445 |                 }
2446 | 
2447 |                 const [email, password, refreshToken, clientId] = parts;
2448 | 
2449 |                 try {
2450 |                     await apiRequest('/accounts', {
2451 |                         method: 'POST',
2452 |                         body: JSON.stringify({
2453 |                             email: email,
2454 |                             refresh_token: refreshToken,
2455 |                             client_id: clientId
2456 |                         })
2457 |                     });
2458 |                     successCount++;
2459 |                     results.push({
2460 |                         email: email,
2461 |                         status: 'success',
2462 |                         message: '添加成功'
2463 |                     });
2464 |                 } catch (error) {
2465 |                     failCount++;
2466 |                     results.push({
2467 |                         email: email,
2468 |                         status: 'error',
2469 |                         message: error.message
2470 |                     });
2471 |                 }
2472 | 
2473 |                 // 添加小延迟避免请求过快
2474 |                 await new Promise(resolve => setTimeout(resolve, 100));
2475 |             }
2476 | 
2477 |             // 完成进度
2478 |             updateBatchProgress(lines.length, lines.length, '批量添加完成！');
2479 | 
2480 |             // 显示结果
2481 |             showBatchResults(results);
2482 | 
2483 |             if (successCount > 0) {
2484 |                 showNotification(`批量添加完成！成功 ${successCount} 个，失败 ${failCount} 个`, 'success');
2485 |                 if (failCount === 0) {
2486 |                     setTimeout(() => {
2487 |                         clearBatchForm();
2488 |                         showPage('accounts');
2489 |                     }, 3000);
2490 |                 }
2491 |             } else {
2492 |                 showNotification('所有账户添加失败，请检查账户信息', 'error');
2493 |             }
2494 | 
2495 |             batchBtn.disabled = false;
2496 |             batchBtn.innerHTML = '<span>📦</span> 开始批量添加';
2497 |         }
2498 | 
2499 |         function showBatchProgress() {
2500 |             document.getElementById('batchProgress').classList.remove('hidden');
2501 |             document.getElementById('batchResults').classList.add('hidden');
2502 |         }
2503 | 
2504 |         function hideBatchProgress() {
2505 |             document.getElementById('batchProgress').classList.add('hidden');
2506 |             document.getElementById('batchResults').classList.add('hidden');
2507 |         }
2508 | 
2509 |         function updateBatchProgress(current, total, message) {
2510 |             const percentage = (current / total) * 100;
2511 |             document.getElementById('batchProgressFill').style.width = percentage + '%';
2512 |             document.getElementById('batchProgressText').textContent = message;
2513 |             document.getElementById('batchProgressCount').textContent = `${current} / ${total}`;
2514 |         }
2515 | 
2516 |         function showBatchResults(results) {
2517 |             const resultsContainer = document.getElementById('batchResultsList');
2518 |             const successResults = results.filter(r => r.status === 'success');
2519 |             const errorResults = results.filter(r => r.status === 'error');
2520 | 
2521 |             let html = '';
2522 | 
2523 |             if (successResults.length > 0) {
2524 |                 html += `<div style="margin-bottom: 16px;">
2525 |                     <h5 style="color: #16a34a; margin-bottom: 8px;">✅ 成功添加 (${successResults.length})</h5>
2526 |                     <div style="background: #f0fdf4; padding: 12px; border-radius: 6px; border: 1px solid #bbf7d0;">`;
2527 |                 successResults.forEach(result => {
2528 |                     html += `<div style="font-size: 0.875rem; color: #15803d; margin-bottom: 4px;">• ${result.email}</div>`;
2529 |                 });
2530 |                 html += `</div></div>`;
2531 |             }
2532 | 
2533 |             if (errorResults.length > 0) {
2534 |                 html += `<div>
2535 |                     <h5 style="color: #dc2626; margin-bottom: 8px;">❌ 添加失败 (${errorResults.length})</h5>
2536 |                     <div style="background: #fef2f2; padding: 12px; border-radius: 6px; border: 1px solid #fecaca;">`;
2537 |                 errorResults.forEach(result => {
2538 |                     html += `<div style="font-size: 0.875rem; color: #dc2626; margin-bottom: 8px;">
2539 |                         <strong>• ${result.email}</strong><br>
2540 |                         <span style="color: #991b1b; font-size: 0.75rem;">&nbsp;&nbsp;${result.message}</span>
2541 |                     </div>`;
2542 |                 });
2543 |                 html += `</div></div>`;
2544 |             }
2545 | 
2546 |             resultsContainer.innerHTML = html;
2547 |             document.getElementById('batchResults').classList.remove('hidden');
2548 |         }
2549 | 
2550 |         // API文档相关函数
2551 |         function initApiDocs() {
2552 |             // 更新Base URL
2553 |             const baseUrl = window.location.origin;
2554 |             document.getElementById('baseUrlExample').textContent = baseUrl;
2555 |         }
2556 | 
2557 |         function copyApiBaseUrl() {
2558 |             const baseUrl = window.location.origin;
2559 |             navigator.clipboard.writeText(baseUrl).then(() => {
2560 |                 showNotification('Base URL已复制到剪贴板', 'success');
2561 |             }).catch(() => {
2562 |                 showNotification('复制失败，请手动复制', 'error');
2563 |             });
2564 |         }
2565 | 
2566 |         function copyEmailAddress(emailAddress) {
2567 |             // 清理邮箱地址（去除可能的空格和特殊字符）
2568 |             const cleanEmail = emailAddress.trim();
2569 | 
2570 |             if (!cleanEmail) {
2571 |                 showNotification('邮箱地址为空', 'error');
2572 |                 return;
2573 |             }
2574 | 
2575 |             // 复制到剪贴板
2576 |             navigator.clipboard.writeText(cleanEmail).then(() => {
2577 |                 // 显示成功通知
2578 |                 showNotification(`邮箱地址已复制: ${cleanEmail}`, 'success');
2579 | 
2580 |                 // 添加视觉反馈
2581 |                 const emailElement = document.getElementById('currentAccountEmail');
2582 |                 if (emailElement) {
2583 |                     emailElement.classList.add('copy-success');
2584 |                     setTimeout(() => {
2585 |                         emailElement.classList.remove('copy-success');
2586 |                     }, 300);
2587 |                 }
2588 |             }).catch((error) => {
2589 |                 console.error('复制失败:', error);
2590 | 
2591 |                 // 降级方案：尝试使用旧的复制方法
2592 |                 try {
2593 |                     const textArea = document.createElement('textarea');
2594 |                     textArea.value = cleanEmail;
2595 |                     textArea.style.position = 'fixed';
2596 |                     textArea.style.opacity = '0';
2597 |                     document.body.appendChild(textArea);
2598 |                     textArea.select();
2599 |                     document.execCommand('copy');
2600 |                     document.body.removeChild(textArea);
2601 | 
2602 |                     showNotification(`邮箱地址已复制: ${cleanEmail}`, 'success');
2603 |                 } catch (fallbackError) {
2604 |                     console.error('降级复制方案也失败:', fallbackError);
2605 |                     showNotification('复制失败，请手动复制邮箱地址', 'error');
2606 | 
2607 |                     // 选中文本以便用户手动复制
2608 |                     const emailElement = document.getElementById('currentAccountEmail');
2609 |                     if (emailElement && window.getSelection) {
2610 |                         const selection = window.getSelection();
2611 |                         const range = document.createRange();
2612 |                         range.selectNodeContents(emailElement);
2613 |                         selection.removeAllRanges();
2614 |                         selection.addRange(range);
2615 |                     }
2616 |                 }
2617 |             });
2618 |         }
2619 | 
2620 |         function downloadApiDocs() {
2621 |             const apiDocs = generateApiDocsMarkdown();
2622 |             const blob = new Blob([apiDocs], { type: 'text/markdown;charset=utf-8;' });
2623 |             const link = document.createElement('a');
2624 |             const url = URL.createObjectURL(blob);
2625 |             link.setAttribute('href', url);
2626 |             link.setAttribute('download', 'outlook-email-api-docs.md');
2627 |             link.style.visibility = 'hidden';
2628 |             document.body.appendChild(link);
2629 |             link.click();
2630 |             document.body.removeChild(link);
2631 |             showNotification('API文档已下载', 'success');
2632 |         }
2633 | 
2634 |         function generateApiDocsMarkdown() {
2635 |             const baseUrl = window.location.origin;
2636 |             return `# Outlook邮件管理系统 API文档
2637 | 
2638 | ## 基础信息
2639 | 
2640 | - **Base URL**: ${baseUrl}
2641 | - **认证方式**: 无需认证
2642 | - **响应格式**: JSON
2643 | 
2644 | ## 接口列表
2645 | 
2646 | ### 1. 获取邮箱列表
2647 | 
2648 | **请求**
2649 | \`\`\`
2650 | GET /accounts
2651 | \`\`\`
2652 | 
2653 | **响应示例**
2654 | \`\`\`json
2655 | {
2656 |   "accounts": [
2657 |     {
2658 |       "email_id": "example@outlook.com",
2659 |       "status": "active",
2660 |       "last_sync": "2024-01-01T12:00:00Z"
2661 |     }
2662 |   ],
2663 |   "total_count": 1
2664 | }
2665 | \`\`\`
2666 | 
2667 | ### 2. 获取邮件列表
2668 | 
2669 | **请求**
2670 | \`\`\`
2671 | GET /emails/{email_id}?folder=inbox&page=1&page_size=20&refresh=false
2672 | \`\`\`
2673 | 
2674 | **参数说明**
2675 | - \`email_id\`: 邮箱地址（URL编码）
2676 | - \`folder\`: 文件夹 (all, inbox, junk)
2677 | - \`page\`: 页码
2678 | - \`page_size\`: 每页数量
2679 | - \`refresh\`: 是否强制刷新
2680 | 
2681 | **响应示例**
2682 | \`\`\`json
2683 | {
2684 |   "email_id": "example@outlook.com",
2685 |   "folder_view": "inbox",
2686 |   "page": 1,
2687 |   "page_size": 20,
2688 |   "total_emails": 150,
2689 |   "emails": [...]
2690 | }
2691 | \`\`\`
2692 | 
2693 | ### 3. 获取邮件详情
2694 | 
2695 | **请求**
2696 | \`\`\`
2697 | GET /emails/{email_id}/{message_id}
2698 | \`\`\`
2699 | 
2700 | **参数说明**
2701 | - \`email_id\`: 邮箱地址（URL编码）
2702 | - \`message_id\`: 邮件ID
2703 | 
2704 | **响应示例**
2705 | \`\`\`json
2706 | {
2707 |   "message_id": "INBOX-1",
2708 |   "subject": "邮件主题",
2709 |   "from_email": "sender@example.com",
2710 |   "to_email": "example@outlook.com",
2711 |   "date": "2024-01-01T12:00:00Z",
2712 |   "body_plain": "纯文本内容",
2713 |   "body_html": "HTML内容"
2714 | }
2715 | \`\`\`
2716 | 
2717 | ---
2718 | 生成时间: ${new Date().toLocaleString()}
2719 | `;
2720 |         }
2721 | 
2722 |         async function tryApi(apiType) {
2723 |             const baseUrl = window.location.origin;
2724 |             let url, responseElementId;
2725 | 
2726 |             switch (apiType) {
2727 |                 case 'accounts':
2728 |                     url = `${baseUrl}/accounts`;
2729 |                     responseElementId = 'accountsResponse';
2730 |                     break;
2731 |                 case 'emails':
2732 |                     // 需要先获取一个邮箱账户
2733 |                     try {
2734 |                         const accountsData = await apiRequest('/accounts');
2735 |                         if (accountsData.accounts && accountsData.accounts.length > 0) {
2736 |                             const emailId = encodeURIComponent(accountsData.accounts[0].email_id);
2737 |                             url = `${baseUrl}/emails/${emailId}?folder=inbox&page=1&page_size=5`;
2738 |                             responseElementId = 'emailsResponse';
2739 |                         } else {
2740 |                             showNotification('没有可用的邮箱账户，请先添加账户', 'warning');
2741 |                             return;
2742 |                         }
2743 |                     } catch (error) {
2744 |                         showNotification('获取邮箱账户失败: ' + error.message, 'error');
2745 |                         return;
2746 |                     }
2747 |                     break;
2748 |                 case 'emailDetail':
2749 |                     // 需要先获取一个邮件ID
2750 |                     try {
2751 |                         const accountsData = await apiRequest('/accounts');
2752 |                         if (accountsData.accounts && accountsData.accounts.length > 0) {
2753 |                             const emailId = encodeURIComponent(accountsData.accounts[0].email_id);
2754 |                             const emailsData = await apiRequest(`/emails/${emailId}?folder=all&page=1&page_size=1`);
2755 |                             if (emailsData.emails && emailsData.emails.length > 0) {
2756 |                                 const messageId = emailsData.emails[0].message_id;
2757 |                                 url = `${baseUrl}/emails/${emailId}/${messageId}`;
2758 |                                 responseElementId = 'emailDetailResponse';
2759 |                             } else {
2760 |                                 showNotification('该邮箱没有邮件', 'warning');
2761 |                                 return;
2762 |                             }
2763 |                         } else {
2764 |                             showNotification('没有可用的邮箱账户，请先添加账户', 'warning');
2765 |                             return;
2766 |                         }
2767 |                     } catch (error) {
2768 |                         showNotification('获取邮件数据失败: ' + error.message, 'error');
2769 |                         return;
2770 |                     }
2771 |                     break;
2772 |                 default:
2773 |                     return;
2774 |             }
2775 | 
2776 |             try {
2777 |                 showNotification('正在调用API...', 'info', '', 2000);
2778 |                 const response = await fetch(url);
2779 |                 const data = await response.json();
2780 | 
2781 |                 // 显示响应结果
2782 |                 const responseElement = document.getElementById(responseElementId);
2783 |                 const responseDataElement = document.getElementById(responseElementId.replace('Response', 'ResponseData'));
2784 | 
2785 |                 responseDataElement.textContent = JSON.stringify(data, null, 2);
2786 |                 responseElement.classList.add('show');
2787 | 
2788 |                 showNotification('API调用成功！', 'success');
2789 | 
2790 |             } catch (error) {
2791 |                 showNotification('API调用失败: ' + error.message, 'error');
2792 |             }
2793 |         }
2794 | 
2795 |         // 全局变量
2796 |         let allEmails = []; // 存储所有邮件数据
2797 |         let filteredEmails = []; // 存储过滤后的邮件数据
2798 |         let searchTimeout = null;
2799 | 
2800 |         // 邮件管理
2801 |         function viewAccountEmails(emailId) {
2802 |             currentAccount = emailId;
2803 |             document.getElementById('currentAccountEmail').textContent = emailId;
2804 |             document.getElementById('emailsNav').style.display = 'block';
2805 | 
2806 |             // 重置过滤器
2807 |             clearFilters();
2808 | 
2809 |             showPage('emails');
2810 |         }
2811 | 
2812 |         function backToAccounts() {
2813 |             currentAccount = null;
2814 |             document.getElementById('emailsNav').style.display = 'none';
2815 |             showPage('accounts');
2816 |         }
2817 | 
2818 |         function switchEmailTab(folder, targetElement = null) {
2819 |             currentEmailFolder = folder;
2820 |             currentEmailPage = 1;
2821 | 
2822 |             // 更新标签状态
2823 |             document.querySelectorAll('#emailsPage .tab').forEach(t => t.classList.remove('active'));
2824 | 
2825 |             if (targetElement) {
2826 |                 targetElement.classList.add('active');
2827 |             } else {
2828 |                 // 根据folder名称查找对应的标签按钮
2829 |                 document.querySelectorAll('#emailsPage .tab').forEach(t => {
2830 |                     if (t.onclick && t.onclick.toString().includes(`'${folder}'`)) {
2831 |                         t.classList.add('active');
2832 |                     }
2833 |                 });
2834 |             }
2835 | 
2836 |             loadEmails();
2837 |         }
2838 | 
2839 |         async function loadEmails(forceRefresh = false) {
2840 |             if (!currentAccount) return;
2841 | 
2842 |             const emailsList = document.getElementById('emailsList');
2843 |             const refreshBtn = document.getElementById('refreshBtn');
2844 | 
2845 |             // 显示加载状态
2846 |             emailsList.innerHTML = '<div class="loading"><div class="loading-spinner"></div>正在加载邮件...</div>';
2847 |             refreshBtn.disabled = true;
2848 |             refreshBtn.innerHTML = '<span>⏳</span> 加载中...';
2849 | 
2850 |             try {
2851 |                 const refreshParam = forceRefresh ? '&refresh=true' : '';
2852 |                 const url = `/emails/${currentAccount}?folder=${currentEmailFolder}&page=${currentEmailPage}&page_size=100${refreshParam}`;
2853 |                 const data = await apiRequest(url);
2854 | 
2855 |                 // 存储所有邮件数据
2856 |                 allEmails = data.emails || [];
2857 | 
2858 |                 // 更新统计信息
2859 |                 updateEmailStats(allEmails);
2860 | 
2861 |                 // 应用当前过滤器
2862 |                 applyFilters();
2863 | 
2864 |                 // 更新最后更新时间
2865 |                 document.getElementById('lastUpdateTime').textContent = new Date().toLocaleString();
2866 | 
2867 |                 if (forceRefresh) {
2868 |                     showNotification('邮件列表已刷新', 'success');
2869 |                 }
2870 | 
2871 |             } catch (error) {
2872 |                 emailsList.innerHTML = '<div class="error">❌ 加载失败: ' + error.message + '</div>';
2873 |                 showNotification('加载邮件失败: ' + error.message, 'error');
2874 |             } finally {
2875 |                 // 恢复刷新按钮状态
2876 |                 refreshBtn.disabled = false;
2877 |                 refreshBtn.innerHTML = '<span>🔄</span> 刷新';
2878 |             }
2879 |         }
2880 | 
2881 |         function updateEmailStats(emails) {
2882 |             const total = emails.length;
2883 |             const unread = emails.filter(email => !email.is_read).length;
2884 |             const today = emails.filter(email => {
2885 |                 const emailDate = new Date(email.date);
2886 |                 const today = new Date();
2887 |                 return emailDate.toDateString() === today.toDateString();
2888 |             }).length;
2889 |             const withAttachments = emails.filter(email => email.has_attachments).length;
2890 | 
2891 |             document.getElementById('totalEmailCount').textContent = total;
2892 |             document.getElementById('unreadEmailCount').textContent = unread;
2893 |             document.getElementById('todayEmailCount').textContent = today;
2894 |             document.getElementById('attachmentEmailCount').textContent = withAttachments;
2895 |         }
2896 | 
2897 |         // 搜索和过滤功能
2898 |         function searchEmails() {
2899 |             clearTimeout(searchTimeout);
2900 |             searchTimeout = setTimeout(() => {
2901 |                 applyFilters();
2902 |             }, 300); // 防抖，300ms后执行搜索
2903 |         }
2904 | 
2905 |         function applyFilters() {
2906 |             const searchTerm = document.getElementById('emailSearch').value.toLowerCase();
2907 |             const folderFilter = document.getElementById('folderFilter').value;
2908 |             const statusFilter = document.getElementById('statusFilter').value;
2909 |             const timeFilter = document.getElementById('timeFilter').value;
2910 |             const attachmentFilter = document.getElementById('attachmentFilter').value;
2911 | 
2912 |             filteredEmails = allEmails.filter(email => {
2913 |                 // 搜索过滤
2914 |                 if (searchTerm) {
2915 |                     const searchableText = `${email.subject || ''} ${email.from_email || ''}`.toLowerCase();
2916 |                     if (!searchableText.includes(searchTerm)) {
2917 |                         return false;
2918 |                     }
2919 |                 }
2920 | 
2921 |                 // 文件夹过滤
2922 |                 if (folderFilter !== 'all' && email.folder.toLowerCase() !== folderFilter) {
2923 |                     return false;
2924 |                 }
2925 | 
2926 |                 // 状态过滤
2927 |                 if (statusFilter === 'read' && !email.is_read) return false;
2928 |                 if (statusFilter === 'unread' && email.is_read) return false;
2929 | 
2930 |                 // 时间过滤
2931 |                 if (timeFilter !== 'all') {
2932 |                     const emailDate = new Date(email.date);
2933 |                     const now = new Date();
2934 | 
2935 |                     switch (timeFilter) {
2936 |                         case 'today':
2937 |                             if (emailDate.toDateString() !== now.toDateString()) return false;
2938 |                             break;
2939 |                         case 'week':
2940 |                             const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
2941 |                             if (emailDate < weekAgo) return false;
2942 |                             break;
2943 |                         case 'month':
2944 |                             const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
2945 |                             if (emailDate < monthAgo) return false;
2946 |                             break;
2947 |                     }
2948 |                 }
2949 | 
2950 |                 // 附件过滤
2951 |                 if (attachmentFilter === 'with' && !email.has_attachments) return false;
2952 |                 if (attachmentFilter === 'without' && email.has_attachments) return false;
2953 | 
2954 |                 return true;
2955 |             });
2956 | 
2957 |             renderFilteredEmails();
2958 |         }
2959 | 
2960 |         function renderFilteredEmails() {
2961 |             const emailsList = document.getElementById('emailsList');
2962 | 
2963 |             if (filteredEmails.length === 0) {
2964 |                 emailsList.innerHTML = '<div class="text-center" style="padding: 40px; color: #64748b;">没有找到匹配的邮件</div>';
2965 |                 return;
2966 |             }
2967 | 
2968 |             emailsList.innerHTML = filteredEmails.map(email => createEmailItem(email)).join('');
2969 |         }
2970 | 
2971 |         function clearFilters() {
2972 |             document.getElementById('emailSearch').value = '';
2973 |             document.getElementById('folderFilter').value = 'all';
2974 |             document.getElementById('statusFilter').value = 'all';
2975 |             document.getElementById('timeFilter').value = 'all';
2976 |             document.getElementById('attachmentFilter').value = 'all';
2977 | 
2978 |             filteredEmails = [...allEmails];
2979 |             renderFilteredEmails();
2980 |         }
2981 | 
2982 |         function createEmailItem(email) {
2983 |             const unreadClass = email.is_read ? '' : 'unread';
2984 |             const attachmentIcon = email.has_attachments ? '<span style="color: #8b5cf6;">📎</span>' : '';
2985 |             const readIcon = email.is_read ? '📖' : '📧';
2986 | 
2987 |             return `
2988 |                 <div class="email-item ${unreadClass}" onclick="showEmailDetail('${email.message_id}')">
2989 |                     <div class="email-avatar">${email.sender_initial}</div>
2990 |                     <div class="email-content">
2991 |                         <div class="email-header">
2992 |                             <div class="email-subject">${email.subject || '(无主题)'}</div>
2993 |                             <div class="email-date">${formatEmailDate(email.date)}</div>
2994 |                         </div>
2995 |                         <div class="email-from">${readIcon} ${email.from_email} ${attachmentIcon}</div>
2996 |                         <div class="email-preview">文件夹: ${email.folder} | 点击查看详情</div>
2997 |                     </div>
2998 |                 </div>
2999 |             `;
3000 |         }
3001 | 
3002 |         async function showEmailDetail(messageId) {
3003 |             document.getElementById('emailModal').classList.remove('hidden');
3004 |             document.getElementById('emailModalTitle').textContent = '邮件详情';
3005 |             document.getElementById('emailModalContent').innerHTML = '<div class="loading">正在加载邮件详情...</div>';
3006 | 
3007 |             try {
3008 |                 const data = await apiRequest(`/emails/${currentAccount}/${messageId}`);
3009 | 
3010 |                 document.getElementById('emailModalTitle').textContent = data.subject || '(无主题)';
3011 |                 document.getElementById('emailModalContent').innerHTML = `
3012 |                     <div class="email-detail-meta">
3013 |                         <p><strong>发件人:</strong> ${data.from_email}</p>
3014 |                         <p><strong>收件人:</strong> ${data.to_email}</p>
3015 |                         <p><strong>日期:</strong> ${formatEmailDate(data.date)} (${new Date(data.date).toLocaleString()})</p>
3016 |                         <p><strong>邮件ID:</strong> ${data.message_id}</p>
3017 |                     </div>
3018 |                     ${renderEmailContent(data)}
3019 |                 `;
3020 | 
3021 |             } catch (error) {
3022 |                 document.getElementById('emailModalContent').innerHTML = '<div class="error">加载失败: ' + error.message + '</div>';
3023 |             }
3024 |         }
3025 | 
3026 |         function renderEmailContent(email) {
3027 |             const hasHtml = email.body_html && email.body_html.trim();
3028 |             const hasPlain = email.body_plain && email.body_plain.trim();
3029 | 
3030 |             if (!hasHtml && !hasPlain) {
3031 |                 return '<p style="color: #9ca3af; font-style: italic;">此邮件无内容</p>';
3032 |             }
3033 | 
3034 |             if (hasHtml) {
3035 |                 const sanitizedHtml = email.body_html.replace(/"/g, '&quot;');
3036 | 
3037 |                 return `
3038 |                     <div class="email-content-tabs">
3039 |                         <button class="content-tab active" onclick="showEmailContentTab('html', this)">HTML视图</button>
3040 |                         ${hasPlain ? '<button class="content-tab" onclick="showEmailContentTab(\'plain\', this)">纯文本</button>' : ''}
3041 |                         <button class="content-tab" onclick="showEmailContentTab('raw', this)">源码</button>
3042 |                     </div>
3043 | 
3044 |                     <div class="email-content-body">
3045 |                         <div id="htmlContent">
3046 |                             <iframe srcdoc="${sanitizedHtml}" style="width: 100%; min-height: 400px; border: none;" sandbox="allow-same-origin"></iframe>
3047 |                         </div>
3048 |                         ${hasPlain ? `<div id="plainContent" class="hidden"><pre>${email.body_plain}</pre></div>` : ''}
3049 |                         <div id="rawContent" class="hidden"><pre style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 12px;">${email.body_html.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre></div>
3050 |                     </div>
3051 |                 `;
3052 |             } else {
3053 |                 return `<div class="email-content-body"><pre>${email.body_plain}</pre></div>`;
3054 |             }
3055 |         }
3056 | 
3057 |         function showEmailContentTab(type, targetElement = null) {
3058 |             // 更新标签状态
3059 |             document.querySelectorAll('.content-tab').forEach(tab => tab.classList.remove('active'));
3060 | 
3061 |             if (targetElement) {
3062 |                 targetElement.classList.add('active');
3063 |             } else {
3064 |                 // 根据type查找对应的标签按钮
3065 |                 document.querySelectorAll('.content-tab').forEach(tab => {
3066 |                     if (tab.onclick && tab.onclick.toString().includes(`'${type}'`)) {
3067 |                         tab.classList.add('active');
3068 |                     }
3069 |                 });
3070 |             }
3071 | 
3072 |             // 隐藏所有内容
3073 |             document.querySelectorAll('#htmlContent, #plainContent, #rawContent').forEach(content => {
3074 |                 content.classList.add('hidden');
3075 |             });
3076 | 
3077 |             // 显示对应内容
3078 |             document.getElementById(type + 'Content').classList.remove('hidden');
3079 |         }
3080 | 
3081 |         function closeEmailModal() {
3082 |             document.getElementById('emailModal').classList.add('hidden');
3083 |         }
3084 | 
3085 |         function refreshEmails() {
3086 |             loadEmails(true); // 强制刷新
3087 |         }
3088 | 
3089 |         async function clearCache() {
3090 |             if (!currentAccount) return;
3091 | 
3092 |             try {
3093 |                 await apiRequest(`/cache/${currentAccount}`, { method: 'DELETE' });
3094 |                 showNotification('缓存已清除', 'success');
3095 |                 loadEmails(true);
3096 |             } catch (error) {
3097 |                 showNotification('清除缓存失败: ' + error.message, 'error');
3098 |             }
3099 |         }
3100 | 
3101 |         function exportEmails() {
3102 |             if (!filteredEmails || filteredEmails.length === 0) {
3103 |                 showNotification('没有邮件可导出', 'warning');
3104 |                 return;
3105 |             }
3106 | 
3107 |             const csvContent = generateEmailCSV(filteredEmails);
3108 |             downloadCSV(csvContent, `emails_${currentAccount}_${new Date().toISOString().split('T')[0]}.csv`);
3109 |             showNotification(`已导出 ${filteredEmails.length} 封邮件`, 'success');
3110 |         }
3111 | 
3112 |         function generateEmailCSV(emails) {
3113 |             const headers = ['主题', '发件人', '日期', '文件夹', '是否已读', '是否有附件'];
3114 |             const rows = emails.map(email => [
3115 |                 `"${(email.subject || '').replace(/"/g, '""')}"`,
3116 |                 `"${email.from_email.replace(/"/g, '""')}"`,
3117 |                 `"${email.date}"`,
3118 |                 `"${email.folder}"`,
3119 |                 email.is_read ? '已读' : '未读',
3120 |                 email.has_attachments ? '有附件' : '无附件'
3121 |             ]);
3122 | 
3123 |             return [headers, ...rows].map(row => row.join(',')).join('\n');
3124 |         }
3125 | 
3126 |         function downloadCSV(content, filename) {
3127 |             const blob = new Blob(['\uFEFF' + content], { type: 'text/csv;charset=utf-8;' });
3128 |             const link = document.createElement('a');
3129 |             const url = URL.createObjectURL(blob);
3130 |             link.setAttribute('href', url);
3131 |             link.setAttribute('download', filename);
3132 |             link.style.visibility = 'hidden';
3133 |             document.body.appendChild(link);
3134 |             link.click();
3135 |             document.body.removeChild(link);
3136 |         }
3137 | 
3138 |         function updateEmailsPagination(totalEmails, pageSize) {
3139 |             const pagination = document.getElementById('emailsPagination');
3140 |             const totalPages = Math.ceil(totalEmails / pageSize);
3141 | 
3142 |             if (totalPages <= 1) {
3143 |                 pagination.classList.add('hidden');
3144 |                 return;
3145 |             }
3146 | 
3147 |             pagination.classList.remove('hidden');
3148 |             pagination.innerHTML = `
3149 |                 <button class="btn btn-secondary btn-sm" onclick="changeEmailPage(${currentEmailPage - 1})" ${currentEmailPage === 1 ? 'disabled' : ''}>‹ 上一页</button>
3150 |                 <span style="padding: 0 16px; color: #64748b;">${currentEmailPage} / ${totalPages}</span>
3151 |                 <button class="btn btn-secondary btn-sm" onclick="changeEmailPage(${currentEmailPage + 1})" ${currentEmailPage === totalPages ? 'disabled' : ''}>下一页 ›</button>
3152 |             `;
3153 |         }
3154 | 
3155 |         function changeEmailPage(page) {
3156 |             currentEmailPage = page;
3157 |             loadEmails();
3158 |         }
3159 | 
3160 |         // 打开标签管理模态框
3161 |         function editAccountTags(emailId, tags) {
3162 |             currentEditAccount = emailId;
3163 |             currentEditTags = Array.isArray(tags) ? [...tags] : [];
3164 |             
3165 |             // 更新模态框标题
3166 |             document.querySelector('#tagsModal .modal-header h3').textContent = `管理 ${emailId} 的标签`;
3167 |             
3168 |             // 显示当前标签
3169 |             renderCurrentTags();
3170 |             
3171 |             // 显示模态框
3172 |             document.getElementById('tagsModal').style.display = 'flex';
3173 |         }
3174 | 
3175 |         // 渲染当前标签列表
3176 |         function renderCurrentTags() {
3177 |             const tagsList = document.getElementById('currentTagsList');
3178 |             
3179 |             if (currentEditTags.length === 0) {
3180 |                 tagsList.innerHTML = '<p class="text-muted">暂无标签</p>';
3181 |                 return;
3182 |             }
3183 |             
3184 |             tagsList.innerHTML = currentEditTags.map(tag => `
3185 |                 <div class="tag-item">
3186 |                     <span class="tag-name">${tag}</span>
3187 |                     <button class="tag-delete" onclick="removeTag('${tag}')">×</button>
3188 |                 </div>
3189 |             `).join('');
3190 |         }
3191 | 
3192 |         // 添加新标签
3193 |         function addTag() {
3194 |             const newTagInput = document.getElementById('newTag');
3195 |             const newTag = newTagInput.value.trim();
3196 |             
3197 |             if (!newTag) {
3198 |                 showNotification('标签名称不能为空', 'warning');
3199 |                 return;
3200 |             }
3201 |             
3202 |             // 检查标签是否已存在
3203 |             if (currentEditTags.includes(newTag)) {
3204 |                 showNotification('标签已存在', 'warning');
3205 |                 return;
3206 |             }
3207 |             
3208 |             // 添加新标签
3209 |             currentEditTags.push(newTag);
3210 |             
3211 |             // 清空输入框
3212 |             newTagInput.value = '';
3213 |             
3214 |             // 重新渲染标签列表
3215 |             renderCurrentTags();
3216 |         }
3217 | 
3218 |         // 删除标签
3219 |         function removeTag(tag) {
3220 |             currentEditTags = currentEditTags.filter(t => t !== tag);
3221 |             renderCurrentTags();
3222 |         }
3223 | 
3224 |         // 关闭标签管理模态框
3225 |         function closeTagsModal() {
3226 |             document.getElementById('tagsModal').style.display = 'none';
3227 |             currentEditAccount = null;
3228 |             currentEditTags = [];
3229 |         }
3230 | 
3231 |         // 保存账户标签
3232 |         async function saveAccountTags() {
3233 |             if (!currentEditAccount) {
3234 |                 closeTagsModal();
3235 |                 return;
3236 |             }
3237 |             
3238 |             try {
3239 |                 const response = await apiRequest(`/accounts/${currentEditAccount}/tags`, {
3240 |                     method: 'PUT',
3241 |                     body: JSON.stringify({ tags: currentEditTags })
3242 |                 });
3243 |                 
3244 |                 showSuccess('标签更新成功');
3245 |                 closeTagsModal();
3246 |                 
3247 |                 // 重新加载账户列表
3248 |                 loadAccounts();
3249 |             } catch (error) {
3250 |                 showError('更新标签失败: ' + error.message);
3251 |             }
3252 |         }
3253 | 
3254 |         // 新增的账户管理辅助函数
3255 |         function updateAccountsStats() {
3256 |             const accountsStats = document.getElementById('accountsStats');
3257 |             document.getElementById('totalAccounts').textContent = accountsTotalCount;
3258 |             document.getElementById('currentPage').textContent = accountsCurrentPage;
3259 |             document.getElementById('pageSize').textContent = accountsPageSize;
3260 |             accountsStats.style.display = accountsTotalCount > 0 ? 'block' : 'none';
3261 |         }
3262 |         
3263 |         function updateAccountsPagination() {
3264 |             const accountsPagination = document.getElementById('accountsPagination');
3265 |             const prevBtn = document.getElementById('prevPageBtn');
3266 |             const nextBtn = document.getElementById('nextPageBtn');
3267 |             const pageNumbers = document.getElementById('pageNumbers');
3268 |             
3269 |             if (accountsTotalPages <= 1) {
3270 |                 accountsPagination.style.display = 'none';
3271 |                 return;
3272 |             }
3273 |             
3274 |             accountsPagination.style.display = 'flex';
3275 |             
3276 |             // 更新上一页/下一页按钮
3277 |             prevBtn.disabled = accountsCurrentPage <= 1;
3278 |             nextBtn.disabled = accountsCurrentPage >= accountsTotalPages;
3279 |             
3280 |             // 生成页码
3281 |             pageNumbers.innerHTML = generatePageNumbers();
3282 |         }
3283 |         
3284 |         function generatePageNumbers() {
3285 |             const maxVisiblePages = 5;
3286 |             let startPage = Math.max(1, accountsCurrentPage - Math.floor(maxVisiblePages / 2));
3287 |             let endPage = Math.min(accountsTotalPages, startPage + maxVisiblePages - 1);
3288 |             
3289 |             if (endPage - startPage < maxVisiblePages - 1) {
3290 |                 startPage = Math.max(1, endPage - maxVisiblePages + 1);
3291 |             }
3292 |             
3293 |             let html = '';
3294 |             
3295 |             // 第一页
3296 |             if (startPage > 1) {
3297 |                 html += `<span class="page-number" onclick="changePage(1)">1</span>`;
3298 |                 if (startPage > 2) {
3299 |                     html += `<span class="page-number disabled">...</span>`;
3300 |                 }
3301 |             }
3302 |             
3303 |             // 中间页码
3304 |             for (let i = startPage; i <= endPage; i++) {
3305 |                 const activeClass = i === accountsCurrentPage ? 'active' : '';
3306 |                 html += `<span class="page-number ${activeClass}" onclick="changePage(${i})">${i}</span>`;
3307 |             }
3308 |             
3309 |             // 最后一页
3310 |             if (endPage < accountsTotalPages) {
3311 |                 if (endPage < accountsTotalPages - 1) {
3312 |                     html += `<span class="page-number disabled">...</span>`;
3313 |                 }
3314 |                 html += `<span class="page-number" onclick="changePage(${accountsTotalPages})">${accountsTotalPages}</span>`;
3315 |             }
3316 |             
3317 |             return html;
3318 |         }
3319 |         
3320 |         function changePage(direction) {
3321 |             let newPage;
3322 |             if (direction === 'prev') {
3323 |                 newPage = Math.max(1, accountsCurrentPage - 1);
3324 |             } else if (direction === 'next') {
3325 |                 newPage = Math.min(accountsTotalPages, accountsCurrentPage + 1);
3326 |             } else {
3327 |                 newPage = parseInt(direction);
3328 |             }
3329 |             
3330 |             if (newPage !== accountsCurrentPage && newPage >= 1 && newPage <= accountsTotalPages) {
3331 |                 loadAccounts(newPage);
3332 |             }
3333 |         }
3334 |         
3335 |         function searchAccounts() {
3336 |             currentEmailSearch = document.getElementById('emailSearch').value.trim();
3337 |             currentTagSearch = document.getElementById('tagSearch').value.trim();
3338 |             loadAccounts(1); // 搜索时重置到第一页
3339 |         }
3340 |         
3341 |         function clearSearch() {
3342 |             document.getElementById('emailSearch').value = '';
3343 |             document.getElementById('tagSearch').value = '';
3344 |             currentEmailSearch = '';
3345 |             currentTagSearch = '';
3346 |             loadAccounts(1);
3347 |         }
3348 |         
3349 |         function handleSearchKeyPress(event) {
3350 |             if (event.key === 'Enter') {
3351 |                 searchAccounts();
3352 |             }
3353 |         }
3354 |         
3355 |         async function deleteAccount(emailId) {
3356 |             if (!confirm(`确定要删除账户 ${emailId} 吗？`)) {
3357 |                 return;
3358 |             }
3359 | 
3360 |             try {
3361 |                 await apiRequest(`/accounts/${emailId}`, { method: 'DELETE' });
3362 |                 showSuccess('账户删除成功');
3363 |                 loadAccounts(accountsCurrentPage); // 保持当前页码
3364 |             } catch (error) {
3365 |                 showError('删除账户失败: ' + error.message);
3366 |             }
3367 |         }
3368 |         
3369 |         // 右键菜单相关变量
3370 |         let contextMenuTarget = null;
3371 |         
3372 |         // 显示右键菜单
3373 |         function showAccountContextMenu(event, emailId) {
3374 |             event.preventDefault();
3375 |             event.stopPropagation();
3376 |             
3377 |             contextMenuTarget = emailId;
3378 |             const contextMenu = document.getElementById('contextMenu');
3379 |             
3380 |             // 设置菜单位置
3381 |             contextMenu.style.left = event.pageX + 'px';
3382 |             contextMenu.style.top = event.pageY + 'px';
3383 |             contextMenu.style.display = 'block';
3384 |             
3385 |             // 点击其他地方隐藏菜单
3386 |             setTimeout(() => {
3387 |                 document.addEventListener('click', hideContextMenu);
3388 |             }, 10);
3389 |         }
3390 |         
3391 |         // 隐藏右键菜单
3392 |         function hideContextMenu() {
3393 |             const contextMenu = document.getElementById('contextMenu');
3394 |             contextMenu.style.display = 'none';
3395 |             contextMenuTarget = null;
3396 |             document.removeEventListener('click', hideContextMenu);
3397 |         }
3398 |         
3399 |         // 在新标签页中打开
3400 |         function openInNewTab() {
3401 |             if (contextMenuTarget) {
3402 |                 const url = `${window.location.origin}/#/emails/${encodeURIComponent(contextMenuTarget)}`;
3403 |                 window.open(url, '_blank');
3404 |             }
3405 |             hideContextMenu();
3406 |         }
3407 |         
3408 |         // 复制账户链接
3409 |         function copyAccountLink() {
3410 |             if (contextMenuTarget) {
3411 |                 const url = `${window.location.origin}/#/emails/${encodeURIComponent(contextMenuTarget)}`;
3412 |                 
3413 |                 if (navigator.clipboard) {
3414 |                     navigator.clipboard.writeText(url).then(() => {
3415 |                         showNotification('链接已复制到剪贴板', 'success');
3416 |                     }).catch(() => {
3417 |                         fallbackCopyText(url);
3418 |                     });
3419 |                 } else {
3420 |                     fallbackCopyText(url);
3421 |                 }
3422 |             }
3423 |             hideContextMenu();
3424 |         }
3425 |         
3426 |         // 后备复制方法
3427 |         function fallbackCopyText(text) {
3428 |             const textArea = document.createElement('textarea');
3429 |             textArea.value = text;
3430 |             document.body.appendChild(textArea);
3431 |             textArea.select();
3432 |             try {
3433 |                 document.execCommand('copy');
3434 |                 showNotification('链接已复制到剪贴板', 'success');
3435 |             } catch (err) {
3436 |                 showNotification('复制失败，请手动复制', 'error');
3437 |             }
3438 |             document.body.removeChild(textArea);
3439 |         }
3440 |         
3441 |         // 从右键菜单编辑标签
3442 |         function contextEditTags() {
3443 |             if (contextMenuTarget) {
3444 |                 const account = accounts.find(acc => acc.email_id === contextMenuTarget);
3445 |                 if (account) {
3446 |                     editAccountTags(contextMenuTarget, account.tags || []);
3447 |                 }
3448 |             }
3449 |             hideContextMenu();
3450 |         }
3451 |         
3452 |         // 从右键菜单删除账户
3453 |         function contextDeleteAccount() {
3454 |             if (contextMenuTarget) {
3455 |                 deleteAccount(contextMenuTarget);
3456 |             }
3457 |             hideContextMenu();
3458 |         }
3459 |         
3460 |         // 邮件列表右键菜单
3461 |         function showEmailsContextMenu(event) {
3462 |             if (!currentAccount) {
3463 |                 return;
3464 |             }
3465 |             
3466 |             event.preventDefault();
3467 |             event.stopPropagation();
3468 |             
3469 |             const url = `${window.location.origin}/#/emails/${encodeURIComponent(currentAccount)}`;
3470 |             window.open(url, '_blank');
3471 |         }
3472 | 
3473 |         // 点击模态框外部关闭
3474 |         document.getElementById('emailModal').addEventListener('click', function(e) {
3475 |             if (e.target === this) {
3476 |                 closeEmailModal();
3477 |             }
3478 |         });
3479 | 
3480 |         // 键盘快捷键
3481 |         document.addEventListener('keydown', function(e) {
3482 |             // Ctrl/Cmd + R: 刷新邮件
3483 |             if ((e.ctrlKey || e.metaKey) && e.key === 'r' && currentAccount) {
3484 |                 e.preventDefault();
3485 |                 refreshEmails();
3486 |             }
3487 | 
3488 |             // Escape: 关闭模态框
3489 |             if (e.key === 'Escape') {
3490 |                 closeEmailModal();
3491 |             }
3492 | 
3493 |             // Ctrl/Cmd + F: 聚焦搜索框
3494 |             if ((e.ctrlKey || e.metaKey) && e.key === 'f' && document.getElementById('emailSearch')) {
3495 |                 e.preventDefault();
3496 |                 document.getElementById('emailSearch').focus();
3497 |             }
3498 |         });
3499 | 
3500 |         // 页面可见性变化时刷新数据
3501 |         document.addEventListener('visibilitychange', function() {
3502 |             if (!document.hidden && currentAccount) {
3503 |                 // 页面重新可见时，如果超过5分钟则自动刷新
3504 |                 const lastUpdate = document.getElementById('lastUpdateTime').textContent;
3505 |                 if (lastUpdate !== '-') {
3506 |                     const lastUpdateTime = new Date(lastUpdate);
3507 |                     const now = new Date();
3508 |                     const diffMinutes = (now - lastUpdateTime) / (1000 * 60);
3509 | 
3510 |                     if (diffMinutes > 5) {
3511 |                         showNotification('检测到数据可能过期，正在刷新...', 'info', '', 2000);
3512 |                         setTimeout(() => refreshEmails(), 1000);
3513 |                     }
3514 |                 }
3515 |             }
3516 |         });
3517 | 
3518 |         // 初始化
3519 |         window.addEventListener('load', function() {
3520 |             // 处理URL路由
3521 |             handleUrlRouting();
3522 |             
3523 |             // 如果没有路由匹配，显示默认页面
3524 |             if (!window.location.hash || window.location.hash === '#') {
3525 |                 showPage('accounts');
3526 |             }
3527 | 
3528 |             // 显示欢迎消息
3529 |             setTimeout(() => {
3530 |                 showNotification('欢迎使用邮件管理系统！', 'info', '欢迎', 3000);
3531 |             }, 500);
3532 |         });
3533 |         
3534 |         // URL路由处理
3535 |         function handleUrlRouting() {
3536 |             const hash = window.location.hash;
3537 |             
3538 |             if (hash.startsWith('#/emails/')) {
3539 |                 const emailId = decodeURIComponent(hash.replace('#/emails/', ''));
3540 |                 if (emailId) {
3541 |                     // 设置当前账户
3542 |                     currentAccount = emailId;
3543 |                     document.getElementById('currentAccountEmail').textContent = emailId;
3544 |                     document.getElementById('emailsNav').style.display = 'block';
3545 |                     
3546 |                     // 显示邮件页面
3547 |                     showPage('emails');
3548 |                     return;
3549 |                 }
3550 |             }
3551 |         }
3552 |         
3553 |         // 监听浏览器返回按钮
3554 |         window.addEventListener('popstate', function() {
3555 |             handleUrlRouting();
3556 |         });
3557 | 
3558 |     </script>
3559 | </body>
3560 | </html>
3561 |     </script>
3562 | </body>
3563 | </html>


--------------------------------------------------------------------------------