分页优化

Author: Layau-code

src/main/java/com/layor/tinyflow/repository/DailyClickRepository.java

@@ -1,7 +1,7 @@
 package com.layor.tinyflow.repository;
 
 import com.layor.tinyflow.entity.DailyClick;
-import io.lettuce.core.dynamic.annotation.Param;
+import org.springframework.data.repository.query.Param;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Modifying;
 import org.springframework.data.jpa.repository.Query;
@@ -24,6 +24,9 @@ List<DailyClick> findRecentTrend(@Param("shortCode") String shortCode,
     @Query("SELECT d.clicks FROM DailyClick d WHERE d.shortCode = :shortCode AND d.date = CURRENT_DATE")
     Integer getTodayClicksByShortCode(String shortCode);
 
+    @Query("SELECT d.shortCode, d.clicks FROM DailyClick d WHERE d.date = CURRENT_DATE AND d.shortCode IN (:codes)")
+    List<Object[]> findTodayClicksByShortCodes(@Param("codes") List<String> codes);
+
     DailyClick findByShortCode(String shortCode);
 
     void deleteByShortCode(String shortCode);

src/main/java/com/layor/tinyflow/service/ClickRecorderService.java

@@ -118,6 +118,7 @@ public void recordClickEvent(String shortCode, String referer, String ua, String
         clickEventRepository.save(ev);
     }
 
+
     @Scheduled(fixedDelay = 2000)
     @Transactional
     public void flushCounters() {

src/main/java/com/layor/tinyflow/service/ShortUrlService.java

@@ -248,14 +248,18 @@ public Page<UrlListResponseDTO> getAllUrls(int page, int size) {
             return new PageImpl<>(Collections.emptyList(), pageable, 0);
         }
 
-        List<UrlListResponseDTO> urlListResponseDTO= shortUrls.stream()
+        List<String> codes = shortUrls.stream().map(ShortUrl::getShortCode).toList();
+        Map<String, Integer> todayMap = dailyClickRepo.findTodayClicksByShortCodes(codes).stream()
+                .collect(Collectors.toMap(r -> (String) r[0], r -> ((Number) r[1]).intValue()));
+        List<UrlListResponseDTO> urlListResponseDTO = shortUrls.stream()
                 .map(shortUrl -> UrlListResponseDTO.builder()
                         .shortCode(shortUrl.getShortCode())
                         .longUrl(shortUrl.getLongUrl())
                         .totalVisits(Long.valueOf(shortUrl.getClickCount()))
-                        .todayVisits(dailyClickRepo.getTodayClicksByShortCode(shortUrl.getShortCode()))
+                        .todayVisits(todayMap.getOrDefault(shortUrl.getShortCode(), 0))
                         .createdAt(shortUrl.getCreatedAt())
-                        .build()).toList();
+                        .build())
+                .toList();
 
         return new PageImpl<>(urlListResponseDTO, pageable, shortUrlPage.getTotalElements());
 

web/src/composables/useStats.js

@@ -7,13 +7,16 @@ function createApiState() {
   return { data: ref(null), loading: ref(false), error: ref(null) }
 }
 
-export function useFetchList() {
+export function useFetchList(pageRef, sizeRef) {
   const state = createApiState()
+  state.meta = ref({ totalElements: 0, totalPages: 1, size: 10, number: 0 })
   const refresh = async () => {
     state.loading.value = true
     state.error.value = null
     try {
-      const res = await axios.get('/api/urls')
+      const p = (pageRef && typeof pageRef === 'object' && 'value' in pageRef) ? Number(pageRef.value) : Number(pageRef || 1)
+      const s = (sizeRef && typeof sizeRef === 'object' && 'value' in sizeRef) ? Number(sizeRef.value) : Number(sizeRef || 10)
+      const res = await axios.get('/api/urls', { params: { page: Math.max(0, p - 1), size: Math.max(1, s) } })
       const payload = res?.data ?? null
       // 兼容后端分页返回结构：PageResponseDTO { content, totalElements, ... }
       const list = Array.isArray(payload)
@@ -34,8 +37,20 @@ export function useFetchList() {
           const fixed = code ? `${SHORT_BASE}/${encodeURIComponent(code)}` : raw
           return { ...it, shortUrl: fixed }
         })
+        state.meta.value = {
+          totalElements: Number(payload?.data?.totalElements ?? payload?.totalElements ?? (Array.isArray(list) ? list.length : 0)),
+          totalPages: Number(payload?.data?.totalPages ?? payload?.totalPages ?? 1),
+          size: Number(payload?.data?.size ?? payload?.size ?? s),
+          number: Number(payload?.data?.number ?? payload?.number ?? Math.max(0, p - 1))
+        }
       } catch {
         state.data.value = list
+        state.meta.value = {
+          totalElements: Number(payload?.data?.totalElements ?? payload?.totalElements ?? (Array.isArray(list) ? list.length : 0)),
+          totalPages: Number(payload?.data?.totalPages ?? payload?.totalPages ?? 1),
+          size: Number(payload?.data?.size ?? payload?.size ?? s),
+          number: Number(payload?.data?.number ?? payload?.number ?? Math.max(0, p - 1))
+        }
       }
     } catch (e) {
       state.error.value = e

web/src/pages/DashboardPage.vue

@@ -103,7 +103,7 @@
         </div>
         <!-- Pagination -->
         <div class="flex items-center justify-between mt-4">
-          <div class="md-muted">{{ $t('dashboard.pagination.total', { count: filteredList.length, page: page, pages: totalPages }) }}</div>
+          <div class="md-muted">{{ $t('dashboard.pagination.total', { count: (meta?.value && meta.value.totalElements) || 0, page: page, pages: totalPages }) }}</div>
           <div class="flex items-center gap-3">
             <button @click="prev" class="md-btn-text">{{ $t('dashboard.pagination.prev') }}</button>
             <button @click="next" class="md-btn-text">{{ $t('dashboard.pagination.next') }}</button>
@@ -134,9 +134,9 @@ const { t } = useI18n()
 
 const query = ref('')
 const page = ref(1)
-const pageSize = 10
+const pageSize = ref(10)
 
-const { data: listRef, loading, error, refresh } = useFetchList()
+const { data: listRef, loading, error, refresh, meta } = useFetchList(page, pageSize)
 // 新增：点击统计（用于饼图）来源于 /api/urls/click-stats
 const { data: clickStatsRef, loading: clickLoading, error: clickError, refresh: refreshClickStats } = useFetchClickStats()
 const list = listRef
@@ -292,10 +292,10 @@ const filteredList = computed(() => {
   return base.sort((a,b) => Number(b.totalVisits||0) - Number(a.totalVisits||0))
 })
 
-const totalPages = computed(() => Math.max(1, Math.ceil(filteredList.value.length / pageSize)))
-const pagedList = computed(() => filteredList.value.slice((page.value-1)*pageSize, page.value*pageSize))
-function prev(){ page.value = Math.max(1, page.value-1) }
-function next(){ page.value = Math.min(totalPages.value, page.value+1) }
+const totalPages = computed(() => Math.max(1, Number((meta?.value && meta.value.totalPages) || 1)))
+const pagedList = computed(() => filteredList.value)
+async function prev(){ page.value = Math.max(1, page.value-1); await refresh() }
+async function next(){ page.value = Math.min(totalPages.value, page.value+1); await refresh() }
 
 // 已移除趋势与Top5对比相关逻辑