manyi_review/templates/review.html

{% extends "base.html" %}
{% block title %}复习汇总 - 满意错题本{% endblock %}
{% block page_title %}复习汇总{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <div class="flex items-center gap-4">
    <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center text-emerald-600">
      <i class="fa-solid fa-graduation-cap text-lg"></i>
    </div>
    <div>
      <p class="text-sm font-semibold text-gray-700">期中/期末复习汇总</p>
      <p class="text-xs text-gray-400 mt-0.5">按日期排序所有错题，方便系统复习</p>
    </div>
  </div>
  <button onclick="window.print()" class="inline-flex items-center gap-2 bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-xl text-sm font-medium hover:bg-gray-50 transition">
    <i class="fa-solid fa-print"></i>打印
  </button>
</div>

{% if review_data %}
<div class="space-y-8">
  {% for subject_id, data in review_data.items() %}
  {% set subject = data.subject %}
  <div>
    <!-- Subject header -->
    <div class="flex items-center gap-4 mb-4">
      <span class="w-4 h-4 rounded-full shadow-sm flex-shrink-0" style="background-color:{{ subject.color }};box-shadow:0 0 0 3px {{ subject.color }}20"></span>
      <h3 class="text-base font-bold text-gray-800">{{ subject.name }}</h3>
      <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">{{ data.images|length }} 张错题 · {{ data.dates|length }} 个日期</span>
      <a href="/subject/{{ subject_id }}" class="ml-auto text-xs text-primary hover:underline bg-indigo-50 px-3 py-1.5 rounded-lg flex items-center gap-1"><i class="fa-solid fa-pen"></i>管理</a>
    </div>
    <!-- Timeline of dates -->
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
      {% for date_str in data.dates %}
      {% set day_images = [] %}
      {% for img in data.images if img.date == date_str %}{% set x = day_images.append(img) %}{% endfor %}
      <div class="{% if not loop.last %}border-b border-gray-50{% endif %}">
        {% set day_imgs = [] %}
        {% set day_txts = [] %}
        {% for img in day_images %}{% if img.filename %}{% set x = day_imgs.append(img) %}{% else %}{% set x = day_txts.append(img) %}{% endif %}{% endfor %}
        <div class="px-5 py-2.5 bg-gray-50 flex items-center gap-3">
          <i class="fa-regular fa-calendar text-gray-400 text-sm"></i>
          <span class="text-sm font-semibold text-gray-600">{{ date_str }}</span>
          <span class="text-xs text-gray-400">{{ day_imgs|length }} 张{% if day_txts %} · {{ day_txts|length }} 条文字{% endif %}</span>
        </div>
        {% if day_imgs %}
        <div class="p-4 grid grid-cols-5 gap-3">
          {% for img in day_imgs %}
          <div class="group relative aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',reviewLb{{ subject_id }},{{ loop.index0 }})">
            <img src="/static/uploads/{{ img.filename }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition"></div>
            <div class="absolute bottom-1.5 left-1.5 right-1.5">
              <p class="text-[10px] text-white/80 truncate px-1 py-0.5 bg-black/30 rounded">{{ img.original_name }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
        {% if day_txts %}
        <div class="px-4 pb-3">
          <div class="flex items-center gap-2 mb-2">
            <span class="text-xs text-gray-400 flex items-center gap-1"><i class="fa-solid fa-keyboard"></i>{{ day_txts|length }} 条文字记录</span>
          </div>
          <div class="grid grid-cols-5 gap-3">
            {% for txt in day_txts %}
            <div class="rounded-xl overflow-hidden bg-violet-50 border border-violet-100 cursor-pointer hover:shadow-sm transition" onclick="toggleReviewAnswer(this)">
              <div class="p-3">
                <p class="text-xs font-medium text-gray-700 line-clamp-2 leading-relaxed">{{ txt.question[:40] }}</p>
              </div>
              <div class="review-answer hidden px-3 pb-3">
                <p class="text-[11px] text-gray-500 leading-relaxed">{{ txt.answer }}</p>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
  <div class="text-6xl text-gray-200 mb-4"><i class="fa-solid fa-book-open-reader"></i></div>
  <p class="text-gray-400 mb-2">暂无错题数据</p>
  <p class="text-sm text-gray-300 mb-6">上传错题后即可在此查看汇总</p>
  <a href="/subjects" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
    <i class="fa-solid fa-plus"></i>先去添加错题
  </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
{% for subject_id, data in review_data.items() %}
const reviewLb{{ subject_id }} = [
  {% for img in data.images %}{% if img.filename %}"/static/uploads/{{ img.filename }}",{% endif %}
  {% endfor %}
];
{% endfor %}
function toggleReviewAnswer(el) {
  var ans = el.querySelector('.review-answer');
  if (ans) ans.classList.toggle('hidden');
}
</script>
{% endblock %}