You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
3.1 KiB

{% extends "base.html" %}
{% block title %}通讯录 - 邮件系统{% endblock %}
{% block content %}
<div class="main-layout">
<div class="sidebar">
<a href="{{ url_for('inbox') }}">📥 收件箱</a>
<a href="{{ url_for('starred') }}">⭐ 星标邮件</a>
<a href="{{ url_for('sent') }}">📤 已发送</a>
<a href="{{ url_for('drafts') }}">📝 草稿箱</a>
<a href="{{ url_for('contacts') }}" class="active">📇 通讯录</a>
<a href="{{ url_for('compose') }}">✏️ 写邮件</a>
</div>
<div class="main-content">
<div class="card">
<h2 style="margin-bottom: 1rem;">添加联系人</h2>
<form method="POST" action="{{ url_for('add_contact') }}"
style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: end;">
<div class="form-group" style="margin: 0;">
<label>姓名</label>
<input type="text" name="name" required placeholder="联系人姓名">
</div>
<div class="form-group" style="margin: 0;">
<label>邮箱</label>
<input type="email" name="email" required placeholder="example@localhost">
</div>
<div class="form-group" style="margin: 0;">
<label>备注</label>
<input type="text" name="note" placeholder="可选备注">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
</div>
<div class="card">
<h2 style="margin-bottom: 1rem;">联系人列表</h2>
{% if contacts %}
<table>
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for c in contacts %}
<tr>
<td>{{ c.name }}</td>
<td>{{ c.email }}</td>
<td style="color: #6b7280;">{{ c.note or '-' }}</td>
<td>
<a href="{{ url_for('contact_emails', id=c.id) }}" class="btn btn-primary">查看往来</a>
<a href="{{ url_for('compose') }}?to={{ c.email }}" class="btn btn-success">发邮件</a>
<a href="{{ url_for('edit_contact', id=c.id) }}" class="btn btn-secondary">编辑</a>
<a href="{{ url_for('delete_contact', id=c.id) }}" class="btn btn-danger"
onclick="return confirm('确定删除?')">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p style="color: #6b7280; text-align: center; padding: 2rem;">暂无联系人</p>
{% endif %}
</div>
</div>
</div>
{% endblock %}