feat: preview image task inputs in admin

apps/api/templates/admin/api/imagegenerationtask/change_form.html

@@ -0,0 +1,85 @@
+{% extends "admin/change_form.html" %}
+{% load static %}
+
+{% block extrastyle %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'api/admin/image-task-gallery.css' %}">
+{% endblock %}
+
+{% block after_field_sets %}
+{{ block.super }}
+{% if original %}
+  {% with input_images=original.input_images.all %}
+    {% if input_images or original.input_image or original.status == "succeeded" and original.result_url %}
+      <section class="image-task-gallery" aria-labelledby="image-task-gallery-title">
+        <h2 id="image-task-gallery-title">图片预览</h2>
+        <div class="image-task-gallery__grid">
+          {% for input_image in input_images %}
+            <figure class="image-task-gallery__item">
+              <button
+                type="button"
+                class="image-task-gallery__trigger"
+                data-image-preview
+                data-image-url="{{ input_image.image.url }}"
+                data-image-label="{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}"
+                title="双击查看大图"
+              >
+                <img src="{{ input_image.image.url }}" alt="{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}" loading="lazy">
+                <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
+              </button>
+              <figcaption>{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}</figcaption>
+            </figure>
+          {% empty %}
+            {% if original.input_image %}
+              <figure class="image-task-gallery__item">
+                <button
+                  type="button"
+                  class="image-task-gallery__trigger"
+                  data-image-preview
+                  data-image-url="{{ original.input_image.url }}"
+                  data-image-label="主图"
+                  title="双击查看大图"
+                >
+                  <img src="{{ original.input_image.url }}" alt="主图" loading="lazy">
+                  <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
+                </button>
+                <figcaption>主图</figcaption>
+              </figure>
+            {% endif %}
+          {% endfor %}
+          {% if original.status == "succeeded" and original.result_url %}
+            <figure class="image-task-gallery__item">
+              <button
+                type="button"
+                class="image-task-gallery__trigger"
+                data-image-preview
+                data-image-url="{{ original.result_url }}"
+                data-image-label="生成结果"
+                title="双击查看大图"
+              >
+                <img src="{{ original.result_url }}" alt="生成结果" loading="lazy">
+                <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
+              </button>
+              <figcaption>生成结果</figcaption>
+            </figure>
+          {% endif %}
+        </div>
+      </section>
+    {% endif %}
+  {% endwith %}
+
+  <dialog class="image-task-preview-dialog" data-image-preview-dialog aria-labelledby="image-task-preview-title">
+    <div class="image-task-preview-dialog__header">
+      <h2 id="image-task-preview-title" data-image-preview-label>图片预览</h2>
+      <button type="button" class="image-task-preview-dialog__close" data-image-preview-close aria-label="关闭图片预览">关闭</button>
+    </div>
+    <img class="image-task-preview-dialog__image" data-image-preview-image alt="">
+    <p class="image-task-preview-dialog__error" data-image-preview-error hidden>图片无法加载。</p>
+  </dialog>
+{% endif %}
+{% endblock %}
+
+{% block admin_change_form_document_ready %}
+{{ block.super }}
+<script src="{% static 'api/admin/image-task-gallery.js' %}" defer></script>
+{% endblock %}