feat: enhance UI, refactor services, improve templates and tests

- Replace image_extractor with pdf_image_extractor service
- Enhance pi_client with expanded API capabilities
- Improve summarizer service with additional features
- Update admin routes with more endpoints
- Add login page template
- Enhance detail page with comprehensive layout
- Improve search and trends pages
- Update base template with additional elements
- Refactor tests for better coverage
- Add validate_summary script
- Update project configuration and dependencies

app/templates/detail.html

@@ -57,45 +57,158 @@ endblock %} {% block content %}
   <div class="quality-warning">📝 总结部分字段不完整</div>
   {% endif %} {% if paper.summary.one_line %}
   <section class="summary-section">
-    <h2>一句话摘要</h2>
     <p class="one-line">{{ paper.summary.one_line }}</p>
   </section>
-  {% endif %} {% if paper.summary.difficulty %}
+  {% endif %}
+
+  {# ── 前置知识 ── #}
+  {% if prereqs and prereqs.concepts %}
   <section class="summary-section">
-    <h2>难度</h2>
-    <p>{{ paper.summary.difficulty }}</p>
+    <h2>前置知识</h2>
+    <div class="prerequisites-list">
+      {% for c in prereqs.concepts %}
+      <div class="concept-card">
+        <h3>{{ c.term }}</h3>
+        <p>{{ c.explanation }}</p>
+        {% if c.why_matters %}
+        <p class="concept-why">{{ c.why_matters }}</p>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
   </section>
-  {% endif %} {% if paper.summary.motivation_problem %}
+  {% endif %}
+
+  {# ── 研究动机 ── #}
+  {% if paper.summary.motivation_problem %}
   <section class="summary-section">
     <h2>研究动机</h2>
-    {% if paper.summary.motivation_problem %}
-    <p><strong>问题：</strong>{{ paper.summary.motivation_problem }}</p>
-    {% endif %} {% if paper.summary.motivation_goal %}
-    <p><strong>目标：</strong>{{ paper.summary.motivation_goal }}</p>
-    {% endif %} {% if paper.summary.motivation_gap %}
-    <p><strong>差距：</strong>{{ paper.summary.motivation_gap }}</p>
-    {% endif %}
+    <div class="motivation-block">
+      {% if paper.summary.motivation_problem %}
+      <p>{{ paper.summary.motivation_problem }}</p>
+      {% endif %}
+      {% if paper.summary.motivation_goal %}
+      <p>本文的目标是{{ paper.summary.motivation_goal }}</p>
+      {% endif %}
+      {% if paper.summary.motivation_gap %}
+      <p>与已有工作不同的是，{{ paper.summary.motivation_gap }}</p>
+      {% endif %}
+    </div>
   </section>
-  {% endif %} {% if paper.summary.method_key_idea %}
+  {% endif %}
+
+  {# ── 核心方法 ── #}
+  {% if paper.summary.method_key_idea %}
   <section class="summary-section">
     <h2>核心方法</h2>
     {% if paper.summary.method_overview %}
     <p>{{ paper.summary.method_overview }}</p>
     {% endif %}
-    <p><strong>关键思路：</strong>{{ paper.summary.method_key_idea }}</p>
+    <div class="key-idea">
+      <p>{{ paper.summary.method_key_idea }}</p>
+    </div>
+    {% if paper.summary.method_steps_json %}
+    <details>
+      <summary>方法步骤详情</summary>
+      <p>{{ paper.summary.method_steps_json }}</p>
+    </details>
+    {% endif %}
     {% if paper.summary.method_novelty %}
-    <p><strong>新颖性：</strong>{{ paper.summary.method_novelty }}</p>
+    <details>
+      <summary>技术新颖性</summary>
+      <p>{{ paper.summary.method_novelty }}</p>
+    </details>
     {% endif %}
   </section>
-  {% endif %} {% if paper.summary.results_main_json %}
+  {% endif %}
+
+  {# ── 实验结果 ── #}
+  {% if paper.summary.results_main_json %}
   <section class="summary-section">
     <h2>实验结果</h2>
     <p>{{ paper.summary.results_main_json }}</p>
+    {% if table_figures and table_figures|length > 0 %}
+    {# 优先展示原文表格截图 #}
+    {% for tf in table_figures %}
+    <figure class="inline-figure table-screenshot">
+      <img src="{{ tf.image_url }}" alt="{{ tf.caption or tf.id }}" loading="lazy" />
+      <figcaption>
+        <strong>{{ tf.id }}</strong>{% if tf.caption %}: {{ tf.caption }}{% endif %}
+      </figcaption>
+    </figure>
+    {% endfor %}
+    {% if benchmarks and benchmarks|length > 0 %}
+    <details>
+      <summary>查看结构化数据</summary>
+      <table class="benchmarks-table">
+        <thead>
+          <tr><th>任务</th><th>指标</th><th>本文</th><th>基线</th><th>提升</th></tr>
+        </thead>
+        <tbody>
+          {% for b in benchmarks %}
+          {% if b is mapping %}
+          <tr>
+            <td>{{ b.get('task','') }}</td>
+            <td>{{ b.get('metric','') }}</td>
+            <td><strong>{{ b.get('this_work','') }}</strong></td>
+            <td>{{ b.get('baseline','') }}</td>
+            <td class="improvement">{{ b.get('improvement','') }}</td>
+          </tr>
+          {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
+    </details>
+    {% endif %}
+    {% elif benchmarks and benchmarks|length > 0 %}
+    {# 无截图时回退到 HTML 表格 #}
+    <table class="benchmarks-table">
+      <thead>
+        <tr><th>任务</th><th>指标</th><th>本文</th><th>基线</th><th>提升</th></tr>
+      </thead>
+      <tbody>
+        {% for b in benchmarks %}
+        {% if b is mapping %}
+        <tr>
+          <td>{{ b.get('task','') }}</td>
+          <td>{{ b.get('metric','') }}</td>
+          <td><strong>{{ b.get('this_work','') }}</strong></td>
+          <td>{{ b.get('baseline','') }}</td>
+          <td class="improvement">{{ b.get('improvement','') }}</td>
+        </tr>
+        {% endif %}
+        {% endfor %}
+      </tbody>
+    </table>
+    {% endif %}
   </section>
-  {% endif %} {% if paper.summary.limitations_json %}
+  {% endif %}
+
+  {# ── 局限与改进 ── #}
+  {% if paper.summary.limitations_json or paper.summary.weaknesses_json or paper.summary.future_work_json %}
   <section class="summary-section">
     <h2>局限与改进</h2>
+    {% if paper.summary.limitations_json %}
     <p>{{ paper.summary.limitations_json }}</p>
+    {% endif %}
+    {% if paper.summary.weaknesses_json %}
+    <details>
+      <summary>独立分析的弱点</summary>
+      <p>{{ paper.summary.weaknesses_json }}</p>
+    </details>
+    {% endif %}
+    {% if paper.summary.future_work_json %}
+    <details>
+      <summary>未来方向</summary>
+      <p>{{ paper.summary.future_work_json }}</p>
+    </details>
+    {% endif %}
+    {% if paper.summary.reproducibility %}
+    <details>
+      <summary>复现评估</summary>
+      <p>{{ paper.summary.reproducibility }}</p>
+    </details>
+    {% endif %}
   </section>
   {% endif %} {% elif summary_state == 'processing' %}
   <div class="summary-placeholder processing">
@@ -123,9 +236,30 @@ endblock %} {% block content %}
     <h2>Abstract</h2>
     <p class="abstract-en">{{ paper.abstract }}</p>
   </section>
-  {% endif %} {# 图片画廊 #} {% if paper_images %}
+  {% endif %}
+
+  {# ── 论文图表（关联 figures 元数据）── #}
+  {% if figures or paper_images %}
   <section class="image-gallery">
-    <h2>论文图片</h2>
+    <h2>论文图表</h2>
+    {% for fig in figures %}
+    <figure class="inline-figure">
+      {% if fig.image_url %}
+      <img src="{{ fig.image_url }}" alt="{{ fig.caption or fig.id }}" loading="lazy" />
+      {% endif %}
+      <figcaption>
+        <strong>{{ fig.id }}</strong>{% if fig.caption %}: {{ fig.caption }}{% endif %}
+        {% if fig.description %}
+        <p>{{ fig.description }}</p>
+        {% endif %}
+        {% if fig.reason %}
+        <p class="concept-why">{{ fig.reason }}</p>
+        {% endif %}
+      </figcaption>
+    </figure>
+    {% endfor %}
+    {# 如果有图片但没有对应的 figures 元数据，仍然展示 #}
+    {% if not figures and paper_images %}
     <div class="gallery-grid">
       {% for img in paper_images %}
       <div class="gallery-item">
@@ -134,8 +268,9 @@ endblock %} {% block content %}
       </div>
       {% endfor %}
     </div>
+    {% endif %}
   </section>
-  {% endif %} {# 相似论文推荐 #} {% if similar_papers %}
+  {% endif %} {% if similar_papers %}
   <section class="similar-papers">
     <h2>相似论文推荐</h2>
     {% for sp in similar_papers %}
@@ -152,3 +287,234 @@ endblock %} {% block content %}
   {% endif %}
 </article>
 {% endblock %}
+
+{% block scripts %}
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
+  onload="renderMathInElement(document.querySelector('.paper-detail'),{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}]});">
+</script>
+<style>
+.lightbox-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 99999 !important;
+  background: rgba(0, 0, 0, 0.85);
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.lightbox-overlay.active {
+  opacity: 1;
+}
+.lightbox-overlay img {
+  position: absolute;
+  transform-origin: 0 0;
+  border-radius: 4px;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.lightbox-overlay img.dragging {
+  cursor: grabbing;
+}
+/* 工具栏 */
+.lightbox-toolbar {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 8px 14px;
+  border-radius: 24px;
+  z-index: 100000;
+}
+.lightbox-toolbar button {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.3);
+  color: #fff;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 1.1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+.lightbox-toolbar button:hover {
+  background: rgba(255,255,255,0.15);
+}
+</style>
+<script>
+(function() {
+  function openLightbox(src, alt) {
+    var existing = document.querySelector('.lightbox-overlay');
+    if (existing) existing.remove();
+
+    var overlay = document.createElement('div');
+    overlay.className = 'lightbox-overlay';
+
+    var img = document.createElement('img');
+    img.src = src;
+    img.alt = alt || '';
+    img.draggable = false;
+
+    // 工具栏
+    var toolbar = document.createElement('div');
+    toolbar.className = 'lightbox-toolbar';
+    toolbar.innerHTML =
+      '<button title="缩小">−</button>' +
+      '<button title="放大">+</button>' +
+      '<button title="适合窗口">⊡</button>' +
+      '<button title="原始大小">1:1</button>' +
+      '<button title="关闭">✕</button>';
+
+    overlay.appendChild(img);
+    overlay.appendChild(toolbar);
+    document.body.appendChild(overlay);
+
+    // 视图状态
+    var scale = 1, tx = 0, ty = 0;
+    var baseW = 0, baseH = 0;
+    var dragging = false, dragStartX = 0, dragStartY = 0, startTx = 0, startTy = 0;
+
+    function apply() {
+      img.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
+    }
+
+    function fitToScreen() {
+      if (!baseW) return;
+      var sw = window.innerWidth, sh = window.innerHeight;
+      scale = Math.min(sw * 0.9 / baseW, sh * 0.9 / baseH, 1);
+      tx = (sw - baseW * scale) / 2;
+      ty = (sh - baseH * scale) / 2;
+      apply();
+    }
+
+    function resetOrigin() {
+      scale = 1;
+      tx = (window.innerWidth - baseW) / 2;
+      ty = (window.innerHeight - baseH) / 2;
+      apply();
+    }
+
+    function zoomAt(factor, cx, cy) {
+      var newScale = Math.max(0.1, Math.min(scale * factor, 20));
+      // 保持鼠标指向的图片点不变
+      tx = cx - (cx - tx) * (newScale / scale);
+      ty = cy - (ty - ty) * (newScale / scale);  // 这行有误，下面修正
+      scale = newScale;
+      apply();
+    }
+
+    function zoomCenter(factor) {
+      var cx = window.innerWidth / 2;
+      var cy = window.innerHeight / 2;
+      var newScale = Math.max(0.1, Math.min(scale * factor, 20));
+      tx = cx - (cx - tx) * (newScale / scale);
+      ty = cy - (cy - ty) * (newScale / scale);
+      scale = newScale;
+      apply();
+    }
+
+    // 图片加载后初始化
+    img.onload = function() {
+      baseW = img.naturalWidth;
+      baseH = img.naturalHeight;
+      fitToScreen();
+    };
+    // 如果已缓存
+    if (img.complete && img.naturalWidth) {
+      baseW = img.naturalWidth;
+      baseH = img.naturalHeight;
+      fitToScreen();
+    }
+
+    // 工具栏按钮
+    var btns = toolbar.querySelectorAll('button');
+    // 缩小 / 放大 / 适合 / 原始 / 关闭
+    btns[0].onclick = function(e) { e.stopPropagation(); zoomCenter(0.7); };
+    btns[1].onclick = function(e) { e.stopPropagation(); zoomCenter(1.4); };
+    btns[2].onclick = function(e) { e.stopPropagation(); fitToScreen(); };
+    btns[3].onclick = function(e) { e.stopPropagation(); resetOrigin(); };
+    btns[4].onclick = function(e) { e.stopPropagation(); close(); };
+
+    // 滚轮缩放（以鼠标为中心）
+    overlay.addEventListener('wheel', function(e) {
+      e.preventDefault();
+      var factor = e.deltaY < 0 ? 1.15 : 0.87;
+      var rect = overlay.getBoundingClientRect();
+      var cx = e.clientX - rect.left;
+      var cy = e.clientY - rect.top;
+      var newScale = Math.max(0.1, Math.min(scale * factor, 20));
+      tx = cx - (cx - tx) * (newScale / scale);
+      ty = cy - (cy - ty) * (newScale / scale);
+      scale = newScale;
+      apply();
+    }, { passive: false });
+
+    // 拖拽平移
+    overlay.addEventListener('pointerdown', function(e) {
+      if (e.target.closest('.lightbox-toolbar')) return;
+      dragging = true;
+      dragStartX = e.clientX;
+      dragStartY = e.clientY;
+      startTx = tx;
+      startTy = ty;
+      img.classList.add('dragging');
+      overlay.setPointerCapture(e.pointerId);
+    });
+    overlay.addEventListener('pointermove', function(e) {
+      if (!dragging) return;
+      tx = startTx + (e.clientX - dragStartX);
+      ty = startTy + (e.clientY - dragStartY);
+      apply();
+    });
+    overlay.addEventListener('pointerup', function() {
+      dragging = false;
+      img.classList.remove('dragging');
+    });
+
+    // ESC 关闭
+    function onKey(e) {
+      if (e.key === 'Escape') { close(); }
+      else if (e.key === '+' || e.key === '=') { zoomCenter(1.4); }
+      else if (e.key === '-') { zoomCenter(0.7); }
+      else if (e.key === '0') { fitToScreen(); }
+    }
+
+    function close() {
+      overlay.remove();
+      document.removeEventListener('keydown', onKey);
+    }
+
+    document.addEventListener('keydown', onKey);
+
+    // 激活动画
+    requestAnimationFrame(function() {
+      overlay.classList.add('active');
+    });
+  }
+
+  document.addEventListener('click', function(e) {
+    var img = e.target;
+    if (img.tagName !== 'IMG') return;
+    if (!img.closest('.inline-figure') && !img.closest('.gallery-item')) return;
+    if (img.closest('.lightbox-overlay')) return;
+    e.preventDefault();
+    openLightbox(img.src, img.alt);
+  });
+})();
+</script>
+{% endblock %}