优化首页分页和图片上传

frontend/src/views/public/HomeView.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import {
   ArrowDown,
   Bell,
   Filter,
   Refresh,
-  Search,
 } from "@element-plus/icons-vue";
 
 import {
@@ -18,10 +17,9 @@ import {
   emptyListingPublishOptions,
   type ListingPublishOptions,
 } from "@/api/listingOptions";
-import { fetchListings, type Listing } from "@/api/listings";
+import { fetchListingsPage, type Listing, type PublicListingQuery } from "@/api/listings";
 import {
   formatHafCoinM,
-  getCoinM,
   getCoinWan,
   getListingDisplayPrice,
   getListingTitle,
@@ -41,7 +39,12 @@ import {
 } from "@/utils/listingDisplay";
 
 const loading = ref(false);
+const loadingMore = ref(false);
 const listings = ref<Listing[]>([]);
+const totalListings = ref(0);
+const zoneCounts = ref<Record<string, number>>({});
+const currentPage = ref(1);
+const hasMoreListings = ref(true);
 const announcements = ref<string[]>(defaultHomeAnnouncements);
 const banners = ref<HomeBannerSlide[]>(defaultHomeBanners);
 const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
@@ -69,6 +72,8 @@ const filters = reactive({
 });
 const sortBy = ref("recommended");
 const activeZone = ref("all");
+const homePageSize = 12;
+let listingRequestSeq = 0;
 type FilterPopoverKey =
   | "insurance"
   | "stamina"
@@ -156,90 +161,19 @@ const skinChipLabel = computed(() => {
 });
 
 const visibleListings = computed(() => {
-  const keyword = filters.keyword.trim().toLowerCase();
-  const filtered = listings.value.filter((item) => {
-    if (!matchesZone(item, activeZone.value)) return false;
-
-    const text = [
-      item.title,
-      item.description,
-      item.rank_level,
-      getServerRegion(item),
-      getLoginMethod(item),
-      ...assetRegions(item),
-      getListingTitle(item),
-      ...getSkinNames(item),
-    ]
-      .join(" ")
-      .toLowerCase();
-    
-    if (keyword && !text.includes(keyword)) return false;
-    if (filters.server && getServerRegion(item) !== filters.server) return false;
-    if (filters.region && !assetRegions(item).includes(filters.region)) return false;
-    if (filters.loginMethod && getLoginMethod(item) !== filters.loginMethod) return false;
-    if (filters.rank && item.rank_level !== filters.rank) return false;
-    if (filters.insurance && readAssetString(item, "season_insurance") !== filters.insurance) return false;
-    if (filters.stamina && readAssetString(item, "stamina_level") !== filters.stamina) return false;
-    if (filters.load && readAssetString(item, "load_level") !== filters.load) return false;
-    if (filters.skinName) {
-      const skins = filters.skinGroup ? getSkinGroup(item, filters.skinGroup) : getSkinNames(item);
-      if (!skins.includes(filters.skinName)) return false;
-    } else if (filters.skinGroup && getSkinGroup(item, filters.skinGroup).length === 0) {
-      return false;
-    }
-
-    // Range filters
-    const price = getListingDisplayPrice(item);
-    const deposit = item.deposit_amount || 0;
-    const total = price + deposit;
-
-    if (filters.minCoin && getCoinM(item) < filters.minCoin) return false;
-    if (filters.maxCoin && getCoinM(item) > filters.maxCoin) return false;
-    if (filters.minPrice && price < filters.minPrice) return false;
-    if (filters.maxPrice && price > filters.maxPrice) return false;
-    if (filters.minDeposit && deposit < filters.minDeposit) return false;
-    if (filters.maxDeposit && deposit > filters.maxDeposit) return false;
-    if (filters.minTotal && total < filters.minTotal) return false;
-    if (filters.maxTotal && total > filters.maxTotal) return false;
-    const fireLevel = readAssetNumber(item, "fire_level");
-    if (filters.minFireLevel && fireLevel < filters.minFireLevel) return false;
-    if (filters.maxFireLevel && fireLevel > filters.maxFireLevel) return false;
-    
-    return true;
-  });
-
-  return [...filtered].sort((a, b) => {
-    if (sortBy.value === "priceAsc") {
-      return getListingDisplayPrice(a) - getListingDisplayPrice(b);
-    }
-    if (sortBy.value === "priceDesc") {
-      return getListingDisplayPrice(b) - getListingDisplayPrice(a);
-    }
-    if (sortBy.value === "coinDesc") {
-      return getCoinWan(b) - getCoinWan(a);
-    }
-    if (sortBy.value === "awmDesc") {
-      return (
-        getResourceQuantity(b, "awmAmmo") - getResourceQuantity(a, "awmAmmo") ||
-        getCoinWan(b) - getCoinWan(a)
-      );
-    }
-    const bTime = Date.parse(b.published_at || b.created_at || "") || 0;
-    const aTime = Date.parse(a.published_at || a.created_at || "") || 0;
-    return getCoinWan(b) - getCoinWan(a) || bTime - aTime;
-  });
+  return listings.value;
 });
 
 const statCards = computed(() => [
-  { label: "可租账号", value: `${visibleListings.value.length}`, hint: "当前筛选结果" },
+  { label: "可租账号", value: `${totalListings.value}`, hint: "当前筛选结果" },
   {
     label: "高哈夫币",
-    value: `${listings.value.filter((item) => getCoinM(item) >= 100).length}`,
+    value: `${zoneCount("highCoin")}`,
     hint: "100M 以上",
   },
   {
     label: "账密登录",
-    value: `${listings.value.filter((item) => getLoginMethod(item) === "账号密码").length}`,
+    value: `${zoneCount("password")}`,
     hint: "交接更快",
   },
 ]);
@@ -249,50 +183,63 @@ const zoneOptions = computed(() => [
     key: "all",
     label: "全部专区",
     hint: "当前可租账号",
-    count: listings.value.length,
+    count: zoneCount("all"),
   },
   {
     key: "sale",
     label: "特惠专区",
     hint: "价格更划算",
-    count: listings.value.filter((item) => matchesZone(item, "sale")).length,
+    count: zoneCount("sale"),
   },
   {
     key: "gift",
     label: "赠送专区",
     hint: "含赠送物品",
-    count: listings.value.filter((item) => matchesZone(item, "gift")).length,
+    count: zoneCount("gift"),
   },
   {
     key: "night",
     label: "夜间专区",
     hint: "夜间也好上号",
-    count: listings.value.filter((item) => matchesZone(item, "night")).length,
+    count: zoneCount("night"),
   },
   {
     key: "password",
     label: "账密专区",
     hint: "交接更快",
-    count: listings.value.filter((item) => matchesZone(item, "password")).length,
+    count: zoneCount("password"),
   },
   {
     key: "highCoin",
     label: "高币专区",
     hint: "100M 以上",
-    count: listings.value.filter((item) => matchesZone(item, "highCoin")).length,
+    count: zoneCount("highCoin"),
   },
 ]);
 
-onMounted(loadHome);
+onMounted(() => {
+  loadHome();
+  window.addEventListener("scroll", handleWindowScroll, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", handleWindowScroll);
+});
+
+watch(
+  () => listingQuerySignature(),
+  () => {
+    loadListingsPage(true);
+  }
+);
 
 async function loadHome() {
   loading.value = true;
   try {
-    const [nextListings, config] = await Promise.all([
-      fetchListings(),
+    const [, config] = await Promise.all([
+      loadListingsPage(true),
       fetchMobileHomeConfig(),
     ]);
-    listings.value = nextListings;
     announcements.value = config.announcements;
     banners.value = config.banners;
     publishOptions.value = config.publish_options;
@@ -305,6 +252,80 @@ async function loadHome() {
   }
 }
 
+async function loadListingsPage(reset = false) {
+  if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return;
+  const requestSeq = ++listingRequestSeq;
+  if (reset) {
+    currentPage.value = 1;
+    hasMoreListings.value = true;
+  }
+  loadingMore.value = true;
+  try {
+    const page = await fetchListingsPage(buildListingQuery(currentPage.value));
+    if (requestSeq !== listingRequestSeq) return;
+    listings.value = reset ? page.items : [...listings.value, ...page.items];
+    totalListings.value = page.total;
+    zoneCounts.value = page.zone_counts;
+    hasMoreListings.value = listings.value.length < page.total;
+    currentPage.value = page.page + 1;
+    requestAnimationFrame(handleWindowScroll);
+  } catch {
+    if (reset) {
+      listings.value = [];
+      totalListings.value = 0;
+      zoneCounts.value = {};
+      hasMoreListings.value = false;
+    }
+  } finally {
+    if (requestSeq === listingRequestSeq) {
+      loadingMore.value = false;
+    }
+  }
+}
+
+function buildListingQuery(page: number): PublicListingQuery {
+  return {
+    page,
+    page_size: homePageSize,
+    keyword: filters.keyword.trim(),
+    sort: sortBy.value,
+    zone: activeZone.value,
+    server: filters.server,
+    region: filters.region,
+    login_method: filters.loginMethod,
+    rank: filters.rank,
+    insurance: filters.insurance,
+    stamina: filters.stamina,
+    load: filters.load,
+    skin_group: filters.skinGroup,
+    skin_name: filters.skinName,
+    min_coin: filters.minCoin,
+    max_coin: filters.maxCoin,
+    min_price: filters.minPrice,
+    max_price: filters.maxPrice,
+    min_deposit: filters.minDeposit,
+    max_deposit: filters.maxDeposit,
+    min_total: filters.minTotal,
+    max_total: filters.maxTotal,
+    min_fire_level: filters.minFireLevel,
+    max_fire_level: filters.maxFireLevel,
+  };
+}
+
+function listingQuerySignature() {
+  return JSON.stringify(buildListingQuery(1));
+}
+
+function handleWindowScroll() {
+  if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return;
+  loadListingsPage(false);
+}
+
+function zoneCount(key: string) {
+  if (key === "all") return zoneCounts.value.all ?? totalListings.value;
+  return zoneCounts.value[key] ?? 0;
+}
+
 function resetFilters() {
   filters.keyword = "";
   filters.server = "";
@@ -450,39 +471,6 @@ function resetSkinFilterAndClose() {
   closeFilterPopover();
 }
 
-function matchesZone(item: Listing, zoneKey: string) {
-  if (zoneKey === "all") return true;
-  if (zoneKey === "sale") return hasAcceleratedSaleRatio(item);
-  if (zoneKey === "gift") return hasGiftResources(item);
-  if (zoneKey === "night") return isNightAvailable(item);
-  if (zoneKey === "password") return /账密|账号密码/.test(getLoginMethod(item));
-  if (zoneKey === "highCoin") return getCoinM(item) >= 100;
-  return true;
-}
-
-function isNightAvailable(item: Listing) {
-  const onlineTime = item.asset_summary?.online_time;
-  if (typeof onlineTime !== "object" || onlineTime === null) return false;
-  const row = onlineTime as Record<string, unknown>;
-  const start = parseTimeHour(row.start);
-  const end = parseTimeHour(row.end);
-  if (start === undefined || end === undefined) return false;
-  return timeRangeCoversHour(start, end, 22) || timeRangeCoversHour(start, end, 23) || timeRangeCoversHour(start, end, 0);
-}
-
-function parseTimeHour(value: unknown) {
-  if (typeof value !== "string") return undefined;
-  const [hourText] = value.split(":");
-  const hour = Number(hourText);
-  if (!Number.isFinite(hour) || hour < 0 || hour > 23) return undefined;
-  return hour;
-}
-
-function timeRangeCoversHour(start: number, end: number, hour: number) {
-  if (start === end) return true;
-  if (start < end) return hour >= start && hour <= end;
-  return hour >= start || hour <= end;
-}
 </script>
 
 <template>
@@ -546,7 +534,7 @@ function timeRangeCoversHour(start: number, end: number, hour: number) {
           <div class="filter-title">
             <el-icon><Filter /></el-icon>
             <strong>筛选大厅</strong>
-            <span>{{ visibleListings.length }} 个结果</span>
+            <span>{{ totalListings }} 个结果</span>
           </div>
           <el-button :icon="Refresh" link @click="resetFilters">重置全部条件</el-button>
         </div>
@@ -879,7 +867,7 @@ function timeRangeCoversHour(start: number, end: number, hour: number) {
       />
       <div v-else v-loading="loading" class="enhanced-desktop-list">
         <RouterLink
-          v-for="item in visibleListings.slice(0, 12)"
+          v-for="item in visibleListings"
           :key="item.id"
           class="listing-card-v2"
           :to="`/listings/${item.id}`"
@@ -890,6 +878,8 @@ function timeRangeCoversHour(start: number, end: number, hour: number) {
               v-if="item.cover_url"
               :src="item.cover_url"
               :alt="getListingTitle(item)"
+              loading="lazy"
+              decoding="async"
             />
             <div v-else class="empty-cover">HFB</div>
             <div class="cover-badges">
@@ -996,6 +986,10 @@ function timeRangeCoversHour(start: number, end: number, hour: number) {
           </div>
         </RouterLink>
       </div>
+      <div v-if="!loading && visibleListings.length" class="infinite-load-state">
+        <span v-if="loadingMore">正在加载更多账号...</span>
+        <span v-else-if="!hasMoreListings">已经到底了</span>
+      </div>
     </main>
   </section>
 </template>
@@ -1043,6 +1037,14 @@ function timeRangeCoversHour(start: number, end: number, hour: number) {
   min-width: 0;
 }
 
+.infinite-load-state {
+  padding: 6px 0 18px;
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+}
+
 .hero-section {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 320px;