A:添加虚拟列表类型文件

U:调整时间线组件列表展示

src/front/argus-front/.env.development

@@ -1,2 +1,2 @@
 VITE_MODE='development'
-VITE_APP_API_URL='http://localhost:8080/api'
+VITE_APP_API_URL='http://127.0.0.1:9484/api'

src/front/argus-front/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@vicons/ionicons5": "^0.13.0",
     "axios": "^1.9.0",
+    "justified-layout": "^4.1.0",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

src/front/argus-front/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.9.0
         version: 1.9.0
+      justified-layout:
+        specifier: ^4.1.0
+        version: 4.1.0
       pinia:
         specifier: ^3.0.1
         version: 3.0.3(typescript@5.8.3)(vue@3.5.16(typescript@5.8.3))
@@ -1640,6 +1643,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==, tarball: https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz}
 
+  justified-layout@4.1.0:
+    resolution: {integrity: sha512-M5FimNMXgiOYerVRGsXZ2YK9YNCaTtwtYp7Hb2308U1Q9TXXHx5G0p08mcVR5O53qf8bWY4NJcPBxE6zuayXSg==, tarball: https://registry.npmmirror.com/justified-layout/-/justified-layout-4.1.0.tgz}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==, tarball: https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz}
 
@@ -3983,6 +3989,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  justified-layout@4.1.0: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1

src/front/argus-front/src/config/httpConfig.ts

@@ -13,7 +13,7 @@ import type { HttpConfig } from '@/types/http.ts'
 // 2. 配置管理器 (config/httpConfig.ts)
 class HttpConfigManager {
   private config: HttpConfig = {
-    baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:8726',
+    baseURL: import.meta.env.VITE_APP_API_URL || 'http://127.0.0.1:9484',
     timeout: 10000,
     headers: {
       'Content-Type': 'application/json'

src/front/argus-front/src/router/index.ts

@@ -10,7 +10,7 @@ const router = createRouter({
     {
       path: '/photos',
       name: 'photos',
-      component: () => import('@/views/PhotosView.vue'),
+      component: () => import('@/views/PhotosView2.vue'),
       meta: { title: '照片' }
     },
     {

src/front/argus-front/src/types/vue-virtual-scroller.d.ts

@@ -0,0 +1,53 @@
+declare module 'vue-virtual-scroller' {
+  import { DefineComponent } from 'vue'
+
+  export const RecycleScroller: DefineComponent<{
+    items: any[]
+    itemSize: number | string
+    keyField?: string
+    direction?: 'vertical' | 'horizontal'
+    listTag?: string
+    itemTag?: string
+    listClass?: string | object | any[]
+    itemClass?: string | object | any[]
+    gridItems?: number
+    sizeField?: string
+    typeField?: string
+    buffer?: number
+    pageMode?: boolean
+    prerender?: number
+    emitUpdate?: boolean
+  }>
+
+  export const DynamicScroller: DefineComponent<{
+    items: any[]
+    minItemSize: number | string
+    keyField?: string
+    direction?: 'vertical' | 'horizontal'
+    listTag?: string
+    itemTag?: string
+    listClass?: string | object | any[]
+    itemClass?: string | object | any[]
+    buffer?: number
+    pageMode?: boolean
+    prerender?: number
+    emitUpdate?: boolean
+  }>
+
+  export const DynamicScrollerItem: DefineComponent<{
+    item: any
+    index: number
+    active: boolean
+    sizeDependencies?: any[]
+    watchData?: boolean
+    tag?: string
+    emitResize?: boolean
+    onResize?: () => void
+  }>
+
+  const plugin: {
+    install: (app: any, options?: any) => void
+  }
+
+  export default plugin
+}

src/front/argus-front/src/views/PhotosView.vue

@@ -550,10 +550,6 @@ onUnmounted(() => {
   display: none; /* Webkit browsers */
 }
 
-.photo-period {
-  margin-bottom: 48px;
-}
-
 .period-header {
   display: flex;
   align-items: baseline;

src/front/argus-front/src/views/PhotosView1.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="timeline-container">
+    <RecycleScroller
+      :items="blocks"
+      :key-field="'id'"
+      :min-item-size="100"
+      class="scroller"
+      v-slot="{ item }"
+    >
+      <!-- 日期标题 -->
+      <div v-if="item.type === 'header'" class="header">
+        {{ item.label }}
+      </div>
+
+      <!-- 照片行 -->
+      <div v-else-if="item.type === 'photoRow'" class="photo-row" :style="{ height: item.rowHeight + 'px' }">
+        <div
+          v-for="photo in item.photos"
+          :key="photo.hash"
+          class="photo"
+          :style="{
+            backgroundColor: photo.color,
+            width: photo.displayWidth + 'px',
+            height: item.rowHeight + 'px'
+          }"
+        ></div>
+      </div>
+
+      <!-- 未来可能出现的卡片 -->
+      <div v-else-if="item.type === 'card'" class="card">
+        {{ item.text }}
+      </div>
+    </RecycleScroller>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RecycleScroller } from 'vue-virtual-scroller'
+
+// 模拟接口返回的数据结构
+const photoApiData = {
+  hash: [
+    "9df97ccc44529d1d377b36f50f79cd5ab9c0920dd58352630412e4b3f8eceaf5",
+    "70886b5e8bf59eeb3cc5fbb1f714c3da5c371e1a0c83ac5ad9c20621c703ff4f"
+  ],
+  isImage: [true, true],
+  takenAt: ["2025-08-02T14:16:36", "2025-08-02T14:16:36"],
+  ratio: [1, 0.46153846]
+}
+
+const timelineApiData = [
+  { date: "2024-10-05", count: 1202 },
+  { date: "2024-11-01", count: 1 },
+  { date: "2024-11-04", count: 4 },
+  { date: "2025-08-02", count: 3 }
+]
+
+// 随机颜色生成
+function randomColor() {
+  const colors = ['#f87171', '#fbbf24', '#34d399', '#60a5fa', '#a78bfa', '#f472b6']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
+// 生成模拟照片
+function generatePhotos(count) {
+  const photos = []
+  for (let i = 0; i < count; i++) {
+    const ratio = (Math.random() * 1.5 + 0.5).toFixed(2) // 比例 0.5 ~ 2.0
+    photos.push({
+      hash: Math.random().toString(36).substring(2, 15),
+      color: randomColor(),
+      ratio: parseFloat(ratio)
+    })
+  }
+  return photos
+}
+
+// 将照片按行布局，每行总宽度接近 containerWidth
+function buildPhotoRows(photos, containerWidth, rowHeight) {
+  const rows = []
+  let currentRow = []
+  let currentRatioSum = 0
+
+  photos.forEach(photo => {
+    currentRow.push(photo)
+    currentRatioSum += photo.ratio
+
+    // 如果行里照片太多，就换行
+    if (currentRatioSum >= containerWidth / rowHeight) {
+      const scale = containerWidth / (currentRatioSum * rowHeight)
+      rows.push({ photos: currentRow, scale })
+      currentRow = []
+      currentRatioSum = 0
+    }
+  })
+
+  if (currentRow.length > 0) {
+    const scale = containerWidth / (currentRatioSum * rowHeight)
+    rows.push({ photos: currentRow, scale })
+  }
+
+  return rows
+}
+
+// 生成完整 blocks
+function generateBlocks() {
+  const blocks = []
+  let idCounter = 0
+  const containerWidth = 800 // 假设容器宽度 800px
+  const rowHeight = 200 // 每行高度 200px
+
+  timelineApiData.forEach(entry => {
+    // 日期标题
+    blocks.push({ id: idCounter++, type: 'header', label: entry.date })
+
+    // 生成该日期对应的照片
+    const photos = generatePhotos(entry.count)
+    const rows = buildPhotoRows(photos, containerWidth, rowHeight)
+
+    rows.forEach(row => {
+      const scaledHeight = rowHeight * row.scale
+      const scaledPhotos = row.photos.map(p => ({
+        ...p,
+        displayWidth: p.ratio * scaledHeight
+      }))
+
+      blocks.push({
+        id: idCounter++,
+        type: 'photoRow',
+        rowHeight: scaledHeight,
+        photos: scaledPhotos
+      })
+    })
+  })
+
+  return blocks
+}
+
+const blocks = generateBlocks()
+</script>
+
+<style>
+@import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
+.timeline-container {
+  padding: 16px;
+}
+
+.scroller {
+  height: 100vh;
+  overflow-y: auto;
+  display: block;
+}
+
+.header {
+  font-size: 18px;
+  font-weight: bold;
+  padding: 12px 0;
+  background: #f5f5f5;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.photo-row {
+  display: flex;
+  gap: 4px;
+  margin: 8px 0;
+}
+
+.photo {
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.card {
+  padding: 12px;
+  margin: 8px 0;
+  border-radius: 12px;
+  background: #ddd;
+}
+</style>

src/front/argus-front/src/views/PhotosView2.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="photos-timeline">
+    <DynamicScroller
+      ref="scrollerRef"
+      :items="timelineItems"
+      :min-item-size="100"
+      key-field="id"
+      class="scroller"
+      :buffer="200"
+    >
+      <template #default="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :index="index"
+          :active="active"
+          :size-dependencies="[containerWidth]"
+          :key="item.id"
+        >
+          <!-- 月份标题 -->
+          <div v-if="item.type === 'month'" class="month-header">
+            <h2 class="month-title">{{ item.title }}</h2>
+            <div class="month-subtitle">{{ item.subtitle }}</div>
+          </div>
+
+          <!-- 回忆卡片 -->
+          <div v-else-if="item.type === 'memory'" class="memory-card">
+            <div class="memory-icon">📸</div>
+            <div class="memory-content">
+              <div class="memory-title">{{ item.title }}</div>
+              <div class="memory-subtitle">{{ item.subtitle }}</div>
+            </div>
+          </div>
+
+          <!-- 时间卡片 -->
+          <div v-else-if="item.type === 'date'" class="date-card">
+            <div class="date-label">{{ item.title }}</div>
+          </div>
+
+          <!-- 照片网格 -->
+          <div v-else-if="item.type === 'photos'" class="photos-grid" :style="{ height: item.height + 'px' }">
+            <div
+              v-for="photo in item.photos"
+              :key="photo.id"
+              class="photo-item"
+              :style="{
+                position: 'absolute',
+                top: photo.box.top + 'px',
+                left: photo.box.left + 'px',
+                width: photo.box.width + 'px',
+                height: photo.box.height + 'px',
+                backgroundColor: photo.color
+              }"
+            >
+              <div class="photo-placeholder">
+                <span class="photo-ratio">{{ photo.ratio.toFixed(2) }}</span>
+              </div>
+            </div>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
+import justifiedLayout from 'justified-layout'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+interface Photo {
+  id: string
+  width: number
+  height: number
+  ratio: number
+  color: string
+  box: {
+    top: number
+    left: number
+    width: number
+    height: number
+  }
+}
+
+interface TimelineItem {
+  id: string
+  type: 'month' | 'memory' | 'date' | 'photos'
+  title?: string
+  subtitle?: string
+  height?: number
+  photos?: Photo[]
+}
+
+const scrollerRef = ref()
+const containerWidth = ref(1200)
+
+// 生成随机颜色
+function generateRandomColor(): string {
+  const colors = [
+    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
+    '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9',
+    '#F8C471', '#82E0AA', '#F1948A', '#85C1E9', '#D7BDE2'
+  ]
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
+// 生成随机照片数据
+function generateRandomPhotos(count: number): Photo[] {
+  const photos: Photo[] = []
+  for (let i = 0; i < count; i++) {
+    const width = Math.floor(Math.random() * 400) + 200 // 200-600px
+    const height = Math.floor(Math.random() * 400) + 200 // 200-600px
+    const ratio = width / height
+    
+    photos.push({
+      id: `photo-${i}`,
+      width,
+      height,
+      ratio,
+      color: generateRandomColor(),
+      box: { top: 0, left: 0, width: 0, height: 0 } // 先设置默认值，后面会计算
+    })
+  }
+  return photos
+}
+
+// 使用 justified-layout 计算照片布局
+function calculatePhotosLayout(photos: Photo[]): { photos: Photo[], height: number } {
+  const photoInputs = photos.map(photo => ({
+    width: photo.width,
+    height: photo.height
+  }))
+
+  const geometry = justifiedLayout(photoInputs, {
+    containerWidth: containerWidth.value - 40, // 减去左右边距
+    targetRowHeight: 220,
+    targetRowHeightTolerance: 0.25,
+    boxSpacing: 4,
+    containerPadding: 0
+  })
+
+  const layoutPhotos = photos.map((photo, index) => ({
+    ...photo,
+    box: geometry.boxes[index]
+  }))
+
+  return {
+    photos: layoutPhotos,
+    height: geometry.containerHeight
+  }
+}
+
+// 生成时间线数据
+function generateTimelineData(): TimelineItem[] {
+  const items: TimelineItem[] = []
+  const months = [
+    { title: '2024年1月', subtitle: '128张照片' },
+    { title: '2023年12月', subtitle: '95张照片' },
+    { title: '2023年11月', subtitle: '156张照片' }
+  ]
+
+  months.forEach((month, monthIndex) => {
+    // 添加月份标题
+    items.push({
+      id: `month-${monthIndex}`,
+      type: 'month',
+      title: month.title,
+      subtitle: month.subtitle
+    })
+
+    // 添加回忆卡片 (随机)
+    if (Math.random() > 0.6) {
+      items.push({
+        id: `memory-${monthIndex}`,
+        type: 'memory',
+        title: '回忆',
+        subtitle: '一年前的今天'
+      })
+    }
+
+    // 添加日期和照片组
+    const daysInMonth = Math.floor(Math.random() * 8) + 3 // 3-10天
+    for (let day = 1; day <= daysInMonth; day++) {
+      const dayId = `day-${monthIndex}-${day}`
+      
+      // 添加日期卡片
+      items.push({
+        id: `date-${dayId}`,
+        type: 'date',
+        title: `${month.title.slice(0, 7)}${day}日`
+      })
+
+      // 添加照片组
+      const photoCount = Math.floor(Math.random() * 20) + 5 // 5-24张照片
+      const photos = generateRandomPhotos(photoCount)
+      const layout = calculatePhotosLayout(photos)
+
+      items.push({
+        id: `photos-${dayId}`,
+        type: 'photos',
+        height: layout.height,
+        photos: layout.photos
+      })
+    }
+  })
+
+  return items
+}
+
+// 响应式数据
+const timelineItems = ref<TimelineItem[]>([])
+
+// 初始化数据
+onMounted(async () => {
+  await nextTick()
+  
+  // 获取容器宽度
+  const container = document.querySelector('.photos-timeline')
+  if (container) {
+    containerWidth.value = container.clientWidth
+  }
+  
+  // 生成时间线数据
+  timelineItems.value = generateTimelineData()
+  
+  // 监听窗口大小变化
+  const handleResize = () => {
+    if (container) {
+      const newWidth = container.clientWidth
+      if (Math.abs(newWidth - containerWidth.value) > 50) { // 只有明显变化时才重新计算
+        containerWidth.value = newWidth
+        // 重新计算所有照片布局
+        timelineItems.value = timelineItems.value.map(item => {
+          if (item.type === 'photos' && item.photos) {
+            const layout = calculatePhotosLayout(item.photos)
+            return {
+              ...item,
+              height: layout.height,
+              photos: layout.photos
+            }
+          }
+          return item
+        })
+      }
+    }
+  }
+  
+  window.addEventListener('resize', handleResize)
+  
+  // 清理事件监听器
+  return () => {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+</script>
+
+<style scoped>
+.photos-timeline {
+  height: 100vh;
+  width: 100%;
+  background: var(--bg-color);
+}
+
+.scroller {
+  height: 100%;
+}
+
+/* 月份标题样式 */
+.month-header {
+  padding: 40px 20px 20px 20px;
+  background: var(--bg-color);
+}
+
+.month-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-color);
+  margin: 0 0 4px 0;
+}
+
+.month-subtitle {
+  font-size: 14px;
+  color: var(--text-color-secondary);
+  opacity: 0.7;
+}
+
+/* 回忆卡片样式 */
+.memory-card {
+  margin: 16px 20px;
+  padding: 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.memory-icon {
+  font-size: 24px;
+}
+
+.memory-content {
+  flex: 1;
+}
+
+.memory-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 4px;
+}
+
+.memory-subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 日期卡片样式 */
+.date-card {
+  padding: 16px 20px 12px 20px;
+  background: var(--bg-color);
+}
+
+.date-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+/* 照片网格样式 */
+.photos-grid {
+  position: relative;
+  margin: 0 20px 24px 20px;
+  background: var(--bg-color);
+}
+
+.photo-item {
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.photo-item:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.photo-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: white;
+  font-weight: bold;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.photo-ratio {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* 深色主题适配 */
+.dark .month-header {
+  background: var(--bg-color);
+}
+
+.dark .date-card {
+  background: var(--bg-color);
+}
+
+.dark .photos-grid {
+  background: var(--bg-color);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .month-header {
+    padding: 32px 16px 16px 16px;
+  }
+  
+  .month-title {
+    font-size: 24px;
+  }
+  
+  .memory-card {
+    margin: 12px 16px;
+  }
+  
+  .date-card {
+    padding: 12px 16px 8px 16px;
+  }
+  
+  .photos-grid {
+    margin: 0 16px 20px 16px;
+  }
+}
+</style>