manyi_review/templates/subject_detail.html

{% extends "base.html" %}
{% block title %}{{ subject.name }} - 满意错题本{% endblock %}
{% block page_title %}{{ subject.name }}{% endblock %}

{% block content %}
<div class="flex items-center gap-3 mb-6">
  <a href="/subjects" class="text-sm text-gray-400 hover:text-gray-600 transition flex items-center gap-1">
    <i class="fa-solid fa-arrow-left"></i>返回
  </a>
  <span class="w-2.5 h-2.5 rounded-full" style="background-color:{{ subject.color }}"></span>
  <span class="text-xs text-gray-400">{{ images|length }} 条记录</span>
</div>

<!-- Date nav -->
<div class="bg-white rounded-2xl border border-gray-100 p-4 mb-6">
  <div class="flex items-center gap-3 overflow-x-auto pb-1">
    {% if prev_date %}
    <a href="?date={{ prev_date }}" class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 hover:bg-gray-100 flex items-center justify-center text-gray-500 transition" title="上一日期">
      <i class="fa-solid fa-chevron-left text-sm"></i>
    </a>
    {% else %}
    <span class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 flex items-center justify-center text-gray-200">
      <i class="fa-solid fa-chevron-left text-sm"></i>
    </span>
    {% endif %}

    {% for d in dates %}
    <a href="?date={{ d }}" class="date-chip flex-shrink-0 px-3 py-1.5 rounded-xl text-xs font-medium transition {% if d == current_date %}bg-primary text-white shadow-sm{% else %}bg-gray-50 text-gray-500 hover:bg-gray-100{% endif %}">
      {{ d }}
    </a>
    {% endfor %}

    {% if next_date %}
    <a href="?date={{ next_date }}" class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 hover:bg-gray-100 flex items-center justify-center text-gray-500 transition" title="下一日期">
      <i class="fa-solid fa-chevron-right text-sm"></i>
    </a>
    {% else %}
    <span class="flex-shrink-0 w-9 h-9 rounded-xl bg-gray-50 flex items-center justify-center text-gray-200">
      <i class="fa-solid fa-chevron-right text-sm"></i>
    </span>
    {% endif %}

    <span class="text-gray-200 flex-shrink-0">|</span>
    <form method="GET" action="" class="flex-shrink-0 flex items-center gap-2">
      <input type="date" name="date" value="{{ current_date }}"
        onchange="this.form.submit()"
        class="border border-gray-200 rounded-xl px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-primary/30 text-gray-500">
    </form>
  </div>
</div>

<!-- Upload form -->
<div class="bg-white rounded-2xl border border-dashed border-gray-200 p-5 mb-6">
  <h4 class="font-semibold text-gray-700 text-sm mb-3"><i class="fa-solid fa-cloud-arrow-up mr-2 text-primary"></i>上传错题图片</h4>
  <form method="POST" action="/subject/{{ subject.id }}/upload" enctype="multipart/form-data" id="uploadForm">
    <input type="hidden" name="date" value="{{ current_date }}">
    <div class="flex items-start gap-4">
      <label class="flex-1 cursor-pointer">
        <div class="border-2 border-dashed border-gray-200 rounded-xl p-6 text-center hover:border-primary/50 hover:bg-indigo-50/30 transition" id="dropZone">
          <i class="fa-solid fa-images text-2xl text-gray-300 mb-2 block"></i>
          <p class="text-sm text-gray-500">点击选择或拖拽图片到此</p>
          <p class="text-xs text-gray-300 mt-1">支持 JPG、PNG、WEBP，可多选</p>
          <input type="file" name="files" multiple accept="image/*" class="hidden" id="fileInput" onchange="updateFileLabel()">
        </div>
      </label>
      <button type="submit" class="flex-shrink-0 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition shadow-sm">
        <i class="fa-solid fa-upload mr-1.5"></i>上传
      </button>
    </div>
    <p id="fileLabel" class="text-xs text-primary mt-2 min-h-[18px]"></p>
  </form>
</div>

<!-- Image grid -->
{% if images %}
<div class="mb-4 flex items-center justify-between">
  <h3 class="font-semibold text-gray-700 text-sm">{{ current_date }} 的错题（{{ images|length }} 张）</h3>
  <span class="text-xs text-gray-400">点击可放大查看</span>
</div>
<div class="grid grid-cols-4 gap-4">
  {% for img in images %}
  <div class="image-card group relative aspect-[3/4] rounded-2xl overflow-hidden bg-gray-100 shadow-sm cursor-pointer" onclick="openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',lbAllImages,{{ 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="image-actions absolute inset-0 bg-black/30 opacity-0 transition flex items-center justify-center gap-2">
      <button onclick="event.stopPropagation();openLightbox('/static/uploads/{{ img.filename }}','{{ img.original_name }}',lbAllImages,{{ loop.index0 }})" class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-gray-700 hover:bg-white transition" title="查看">
        <i class="fa-solid fa-magnifying-glass-plus text-sm"></i>
      </button>
      <form method="POST" action="/image/{{ img.id }}/delete" onsubmit="return confirm('确定删除这张错题图片？')" onclick="event.stopPropagation()">
        <button type="submit" class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-red-500 hover:bg-red-50 transition" title="删除">
          <i class="fa-solid fa-trash-can text-sm"></i>
        </button>
      </form>
    </div>
    <div class="absolute bottom-2 left-2 right-2">
      <p class="text-[10px] text-white/80 truncate px-1.5 py-0.5 bg-black/30 rounded">{{ img.original_name }}</p>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-2xl border border-gray-100 p-12 text-center">
  <div class="text-5xl text-gray-200 mb-4"><i class="fa-regular fa-folder-open"></i></div>
  <p class="text-gray-400 text-sm">该日期暂无错题记录</p>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
const lbAllImages = [
  {% for img in images %}
  "/static/uploads/{{ img.filename }}",
  {% endfor %}
];
function updateFileLabel(){
  const f=document.getElementById('fileInput').files;
  document.getElementById('fileLabel').textContent=f.length?f.length+' 个文件已选择':'';
}
const dz=document.getElementById('dropZone');
dz.addEventListener('dragover',e=>{e.preventDefault();dz.classList.add('border-primary','bg-indigo-50/30');});
dz.addEventListener('dragleave',()=>dz.classList.remove('border-primary','bg-indigo-50/30'));
dz.addEventListener('drop',e=>{e.preventDefault();dz.classList.remove('border-primary','bg-indigo-50/30');document.getElementById('fileInput').files=e.dataTransfer.files;updateFileLabel();});
</script>
{% endblock %}