Files
diary-family/core/templates/core/index.html

394 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends 'core/base.html' %}
{% block content %}
{% if user.is_authenticated %}
<!-- 欢迎区域 -->
<div class="row mb-4">
<div class="col-12">
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<div class="card-body d-flex align-items-center justify-content-between py-4">
<div>
<h3 class="mb-1"><i class="bi bi-sun-fill me-2"></i>早上好,{{ user.username }}</h3>
<p class="mb-0 opacity-75"><i class="bi bi-calendar3 me-2"></i>今天是 {{ today }},祝您有美好的一天!</p>
</div>
<div class="text-end d-none d-md-block">
<i class="bi bi-house-heart" style="font-size: 4rem; opacity: 0.3;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- 今日概览 -->
<div class="col-lg-8">
<div class="card h-100">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0"><i class="bi bi-speedometer2 me-2"></i>今日概览</h5>
<span class="badge bg-light text-primary">{{ today }}</span>
</div>
<div class="card-body">
<div class="mt-2">
<h6 class="mb-3"><i class="bi bi-calendar-check me-2 text-primary"></i>今日计划</h6>
{% if today_plan %}
<div class="list-group">
{% for plan in today_plan %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="me-3">
{% if plan.status == 'completed' %}
<i class="bi bi-check-circle-fill text-success" style="font-size: 1.2rem;"></i>
{% else %}
<i class="bi bi-circle text-warning" style="font-size: 1.2rem;"></i>
{% endif %}
</div>
<div>
<strong>{{ plan.content }}</strong>
<div class="small text-muted">
<i class="bi bi-tag me-1"></i>{{ plan.get_type_display }}
<span class="mx-1">|</span>
<i class="bi bi-flag me-1"></i>{{ plan.get_priority_display }}
</div>
</div>
</div>
<span class="badge {% if plan.status == 'completed' %}bg-success{% else %}bg-warning{% endif %} status-badge">
{{ plan.get_status_display }}
</span>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-4">
<i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
<p class="text-muted mt-2">今天还没有计划,快去添加吧!</p>
<a href="{% url 'today_plan' %}" class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>添加计划
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- 待处理事项 -->
<div class="col-lg-4">
<div class="card h-100">
<div class="card-header bg-warning text-white d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0"><i class="bi bi-exclamation-triangle me-2"></i>待处理事项</h5>
<span class="badge bg-light text-warning">{{ pending_family_tasks|length }}</span>
</div>
<div class="card-body">
{% if pending_family_tasks %}
<div class="list-group">
{% for task in pending_family_tasks %}
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div>
<strong>{{ task.content }}</strong>
<div class="small text-muted mt-1">
<i class="bi bi-folder me-1"></i>{{ task.get_type_display }}
</div>
</div>
<span class="badge {% if task.priority == 'high' %}bg-danger{% elif task.priority == 'medium' %}bg-warning{% else %}bg-info{% endif %}">
{{ task.get_priority_display }}
</span>
</div>
{% if task.deadline %}
<div class="mt-2 small">
<i class="bi bi-clock me-1 text-muted"></i>
<span class="{% if task.is_overdue %}text-danger{% else %}text-muted{% endif %}">
截止:{{ task.deadline }}
</span>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-4">
<i class="bi bi-check-all text-success" style="font-size: 3rem;"></i>
<p class="text-muted mt-2">没有待处理的家庭事项</p>
</div>
{% endif %}
<a href="{% url 'family_tasks' %}" class="btn btn-outline-warning w-100 mt-3">
<i class="bi bi-list-check me-1"></i>查看所有家庭事项
</a>
</div>
</div>
</div>
</div>
<!-- 快捷操作 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-info text-dark">
<h5 class="card-title mb-0"><i class="bi bi-lightning-charge me-2"></i>快捷操作</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-6 col-md-4 col-lg">
<a href="{% url 'today_records' %}" class="btn btn-outline-primary w-100 py-3">
<i class="bi bi-plus-circle" style="font-size: 1.5rem;"></i>
<div class="mt-2 small">添加今日信息</div>
</a>
</div>
<div class="col-6 col-md-4 col-lg">
<a href="{% url 'yesterday_records' %}" class="btn btn-outline-success w-100 py-3">
<i class="bi bi-journal-plus" style="font-size: 1.5rem;"></i>
<div class="mt-2 small">追加昨日信息</div>
</a>
</div>
<div class="col-6 col-md-4 col-lg">
<a href="{% url 'today_plan' %}" class="btn btn-outline-info w-100 py-3">
<i class="bi bi-calendar-plus" style="font-size: 1.5rem;"></i>
<div class="mt-2 small">管理今日计划</div>
</a>
</div>
<div class="col-6 col-md-4 col-lg">
<a href="{% url 'generate_report' %}" class="btn btn-outline-warning w-100 py-3">
<i class="bi bi-file-earmark-pdf" style="font-size: 1.5rem;"></i>
<div class="mt-2 small">预览日报PDF</div>
</a>
</div>
<div class="col-6 col-md-4 col-lg">
<a href="{% url 'send_email' %}" class="btn btn-outline-success w-100 py-3">
<i class="bi bi-envelope-check" style="font-size: 1.5rem;"></i>
<div class="mt-2 small">发送今日邮件</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 昨日记录 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0"><i class="bi bi-clock-history me-2"></i>昨日记录</h5>
<span class="badge bg-light text-secondary">{{ yesterday }}</span>
</div>
<div class="card-body">
<div class="row">
<!-- 昨日阅读 -->
<div class="col-md-4">
<h6 class="mb-3"><i class="bi bi-book me-2 text-primary"></i>阅读记录</h6>
{% if yesterday_reading %}
<div class="list-group">
{% for reading in yesterday_reading %}
<div class="list-group-item">
<div class="d-flex align-items-start">
<i class="bi bi-bookmark-fill text-primary me-2 mt-1"></i>
<div>
<strong>{{ reading.title }}</strong>
<div class="small text-muted">
<span class="badge bg-secondary">{{ reading.get_type_display }}</span>
</div>
{% if reading.source %}
<div class="small text-muted mt-1">
<i class="bi bi-link-45deg me-1"></i>{{ reading.source }}
</div>
{% endif %}
{% if reading.progress %}
<div class="mt-2">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: {{ reading.progress }}%"></div>
</div>
<small class="text-muted">进度:{{ reading.progress }}%</small>
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-3">
<i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
<p class="text-muted small mt-2">昨日没有阅读记录</p>
</div>
{% endif %}
</div>
<!-- 昨日感悟 -->
<div class="col-md-4">
<h6 class="mb-3"><i class="bi bi-lightbulb me-2 text-success"></i>感悟记录</h6>
{% if yesterday_insight %}
<div class="list-group">
{% for insight in yesterday_insight %}
<div class="list-group-item">
<div class="d-flex align-items-start">
<i class="bi bi-chat-quote-fill text-success me-2 mt-1"></i>
<div>
<p class="mb-1">{{ insight.content|truncatechars:100 }}</p>
{% if insight.file %}
<a href="{{ insight.file.url }}" class="file-link small" target="_blank">
<i class="bi bi-paperclip me-1"></i>查看附件
</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-3">
<i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
<p class="text-muted small mt-2">昨日没有感悟记录</p>
</div>
{% endif %}
</div>
<!-- 昨日汇总记录 -->
<div class="col-md-4">
<h6 class="mb-3"><i class="bi bi-collection me-2 text-info"></i>汇总记录</h6>
{% if yesterday_summary %}
<div class="list-group">
{% for summary in yesterday_summary %}
<div class="list-group-item">
<div class="d-flex align-items-start">
<i class="bi bi-journal-text text-info me-2 mt-1"></i>
<div>
<div class="d-flex align-items-center mb-1">
<span class="badge bg-primary me-2">{{ summary.category.name }}</span>
<small class="text-muted">{{ summary.speaker.name }}</small>
</div>
<p class="mb-1 small">{{ summary.content|truncatechars:80 }}</p>
{% if summary.source %}
<small class="text-muted">
<i class="bi bi-link-45deg me-1"></i>{{ summary.source }}
</small>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-3">
<i class="bi bi-inbox text-muted" style="font-size: 2rem;"></i>
<p class="text-muted small mt-2">昨日没有汇总记录</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 历史记录查询 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0"><i class="bi bi-clock-history me-2"></i>历史记录查询</h5>
<span class="badge bg-light text-dark">导出PDF</span>
</div>
<div class="card-body">
<form id="historyForm" method="GET" action="{% url 'history_records' %}">
<div class="row align-items-end">
<div class="col-md-3">
<label class="form-label"><i class="bi bi-calendar-minus me-1"></i>开始时间</label>
<input type="date" class="form-control" id="start_date" name="start_date" required>
</div>
<div class="col-md-3">
<label class="form-label"><i class="bi bi-calendar-plus me-1"></i>结束时间</label>
<input type="date" class="form-control" id="end_date" name="end_date" required>
</div>
<div class="col-md-6">
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="setCurrentQuarter()">
<i class="bi bi-calendar3 me-1"></i>当季
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="setCurrentYear()">
<i class="bi bi-calendar-year me-1"></i>本年度
</button>
<button type="submit" class="btn btn-primary">
<i class="bi bi-search me-1"></i>查询记录
</button>
<button type="button" class="btn btn-success" onclick="exportHistoryPDF()">
<i class="bi bi-file-earmark-pdf me-1"></i>导出PDF
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
// 设置当季时间范围最近3个月
function setCurrentQuarter() {
const today = new Date();
const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
document.getElementById('start_date').value = formatDate(threeMonthsAgo);
document.getElementById('end_date').value = formatDate(today);
}
// 设置本年度时间范围
function setCurrentYear() {
const today = new Date();
const yearStart = new Date(today.getFullYear(), 0, 1);
document.getElementById('start_date').value = formatDate(yearStart);
document.getElementById('end_date').value = formatDate(today);
}
// 格式化日期为 YYYY-MM-DD
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
// 导出历史记录PDF
function exportHistoryPDF() {
const startDate = document.getElementById('start_date').value;
const endDate = document.getElementById('end_date').value;
if (!startDate || !endDate) {
alert('请先选择开始时间和结束时间');
return;
}
if (new Date(startDate) > new Date(endDate)) {
alert('开始时间不能晚于结束时间');
return;
}
window.location.href = `{% url 'history_pdf' %}?start_date=${startDate}&end_date=${endDate}`;
}
// 页面加载时默认设置为本年度
document.addEventListener('DOMContentLoaded', function() {
setCurrentYear();
});
</script>
{% else %}
<!-- 未登录欢迎区域 -->
<div class="row">
<div class="col-12">
<div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<div class="card-body text-center py-5">
<i class="bi bi-house-heart" style="font-size: 5rem; opacity: 0.8;"></i>
<h2 class="mt-4 mb-3">欢迎使用家庭日报系统</h2>
<p class="mb-4 opacity-90">请先登录以使用系统功能</p>
<a href="{% url 'login' %}" class="btn btn-light btn-lg px-5">
<i class="bi bi-box-arrow-in-right me-2"></i>登录系统
</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}