task-124(记录与版本中心): 实现历史结果预览抽屉

新增 history-preview.ts：从历史记录提取结果图/长图并限制数量，避免大内容阻塞。 TDD: task-124.test.ts 8 用例 RED→GREEN。
2026-09-05 17:32:08 +08:00
parent df8255c41e
commit d8950e93da
2 changed files with 97 additions and 0 deletions
@@ -0,0 +1,29 @@
+/** 历史结果预览抽屉（任务 124）：从历史记录提取可预览图片并限制数量，避免大内容阻塞页面；纯逻辑。 */
+import type { HistoryRecordItem } from './history-dto.ts'
+
+export interface PreviewDescriptor {
+  images: string[]
+}
+
+function safeHttpUrl(value: unknown): string {
+  const url = typeof value === 'string' ? value.trim() : ''
+  return /^https?:\/\//i.test(url) ? url : ''
+}
+
+/** 构建预览描述(结果图 + 长图，按记录顺序去重，数量受 limit 限制)。 */
+export function buildPreviewDescriptor(item: HistoryRecordItem | null | undefined, limit: number): PreviewDescriptor {
+  const images: string[] = []
+  const seen = new Set<string>()
+  const max = typeof limit === 'number' && Number.isFinite(limit) && limit > 0 ? Math.floor(limit) : 20
+  const push = (url: string) => {
+    const clean = safeHttpUrl(url)
+    if (!clean || seen.has(clean) || images.length >= max) return
+    seen.add(clean)
+    images.push(clean)
+  }
+  if (item && typeof item === 'object') {
+    if (Array.isArray(item.resultUrls)) item.resultUrls.forEach((url) => push(url))
+    push(item.longImageUrl)
+  }
+  return { images }
+}
@@ -0,0 +1,68 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import { buildPreviewDescriptor } from '../src/pages/records/history-preview.ts'
+
+function item(over: Record<string, unknown>) {
+  return {
+    id: 1,
+    userId: null,
+    username: '',
+    createdAt: '',
+    panelType: 'x',
+    originalUrls: [],
+    resultUrls: [],
+    longImageUrl: '',
+    ...over,
+  }
+}
+
+test('test_task_124_history_preview_normal_primary_path', () => {
+  // 正常主路径：预览取结果图与长图。
+  const descriptor = buildPreviewDescriptor(item({ resultUrls: ['https://a/1.png', 'http://b/2.png'], longImageUrl: 'https://long.png' }), 10)
+  assert.deepEqual(descriptor.images, ['https://a/1.png', 'http://b/2.png', 'https://long.png'])
+})
+
+test('test_task_124_history_preview_normal_variant_input', () => {
+  // 正常变体：非 http 地址过滤。
+  const descriptor = buildPreviewDescriptor(item({ resultUrls: ['ftp://bad', 'https://ok.png'] }), 10)
+  assert.deepEqual(descriptor.images, ['https://ok.png'])
+})
+
+test('test_task_124_history_preview_repeated_is_idempotent', () => {
+  // 正常重复：预览构建稳定、不改记录。
+  const record = item({ resultUrls: ['https://a.png'] })
+  assert.deepEqual(buildPreviewDescriptor(record, 10), buildPreviewDescriptor(record, 10))
+  assert.equal((record as { resultUrls: string[] }).resultUrls.length, 1)
+})
+
+test('test_task_124_history_preview_boundary_empty_input', () => {
+  // 边界空值：无图预览回空。
+  const descriptor = buildPreviewDescriptor(item({}), 10)
+  assert.deepEqual(descriptor.images, [])
+})
+
+test('test_task_124_history_preview_boundary_single_item', () => {
+  // 边界单元素：单图预览。
+  const descriptor = buildPreviewDescriptor(item({ resultUrls: ['https://a.png'] }), 10)
+  assert.equal(descriptor.images.length, 1)
+})
+
+test('test_task_124_history_preview_boundary_limit_or_missing_field', () => {
+  // 边界上限：超上限截断。
+  const urls = Array.from({ length: 30 }, (_, i) => `https://a/${i}.png`)
+  const descriptor = buildPreviewDescriptor(item({ resultUrls: urls }), 10)
+  assert.equal(descriptor.images.length, 10)
+})
+
+test('test_task_124_history_preview_invalid_input_rejected', () => {
+  // 异常输入：空记录预览为空。
+  assert.deepEqual(buildPreviewDescriptor(null as never, 10).images, [])
+})
+
+test('test_task_124_history_preview_dependency_failure_returns_actionable_message', () => {
+  // 依赖失败/可操作：预览纯逻辑、无框架/http；限制长度避免大内容阻塞。
+  const mod = readSource('src/pages/records/history-preview.ts')
+  assert.equal(/axios|http\.|vue/.test(mod), false, '预览保持纯逻辑')
+  assert.match(mod, /limit/)
+})