yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页分页和图片上传

Browse Source
This commit is contained in:
yml
2026-06-02 13:24:04 +08:00
parent a094901b72
commit 6f4c8b59f9
23 changed files with 1232 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/files.ts
+7 -2
View File
@@ -1,17 +1,21 @@
import { apiClient } from './client'
import type { ApiResponse } from './types'
import { optimizeImageForUpload } from '@/utils/imageUpload'
export interface UploadedFile {
object_key: string
url: string
thumbnail_url?: string
medium_url?: string
filename: string
content_type: string
size: number
}
export async function uploadFile(file: File, scene: string) {
const uploadTarget = await optimizeImageForUpload(file, scene)
const form = new FormData()
form.append('file', file)
form.append('file', uploadTarget)
form.append('scene', scene)
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/files/upload', form, {
headers: { 'Content-Type': 'multipart/form-data' },
@@ -20,8 +24,9 @@ export async function uploadFile(file: File, scene: string) {
}
export async function uploadAdminFile(file: File, scene: string) {
const uploadTarget = await optimizeImageForUpload(file, scene)
const form = new FormData()
form.append('file', file)
form.append('file', uploadTarget)
form.append('scene', scene)
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/admin/files/upload', form, {
headers: { 'Content-Type': 'multipart/form-data' },
frontend/src/api/listings.ts
+61 -3
View File
@@ -43,9 +43,67 @@ export interface ListingPayload {
deposit_amount: number
}
export async function fetchListings() {
const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/listings')
return data.data.items
export interface PublicListingQuery {
page?: number
page_size?: number
keyword?: string
sort?: string
zone?: string
server?: string
region?: string
login_method?: string
rank?: string
insurance?: string
stamina?: string
load?: string
skin_group?: string
skin_name?: string
min_coin?: number
max_coin?: number
min_price?: number
max_price?: number
min_deposit?: number
max_deposit?: number
min_total?: number
max_total?: number
min_fire_level?: number
max_fire_level?: number
min_secret_kd?: number
max_secret_kd?: number
[key: `resource_${string}_min`]: number | undefined
[key: `resource_${string}_max`]: number | undefined
}
export interface PublicListingPage {
items: Listing[]
total: number
page: number
page_size: number
zone_counts: Record<string, number>
}
export async function fetchListings(query: PublicListingQuery = {}) {
const page = await fetchListingsPage(query)
return page.items
}
export async function fetchListingsPage(query: PublicListingQuery = {}) {
const params = Object.fromEntries(
Object.entries(query).filter(([, value]) => value !== '' && value !== undefined && value !== null)
)
const { data } = await apiClient.get<ApiResponse<Partial<PublicListingPage>>>('/listings', { params })
return normalizePublicListingPage(data.data, query)
}
function normalizePublicListingPage(data: Partial<PublicListingPage>, query: PublicListingQuery): PublicListingPage {
const items = Array.isArray(data.items) ? data.items : []
return {
items,
total: Number.isFinite(Number(data.total)) ? Number(data.total) : items.length,
page: Number.isFinite(Number(data.page)) ? Number(data.page) : Number(query.page || 1),
page_size: Number.isFinite(Number(data.page_size)) ? Number(data.page_size) : Number(query.page_size || items.length || 20),
zone_counts: data.zone_counts && typeof data.zone_counts === 'object' ? data.zone_counts : {},
}
}
export async function fetchListing(id: string | number) {
frontend/src/components/ChatAttachmentImage.vue
+1 -1
View File
@@ -55,7 +55,7 @@ onBeforeUnmount(revokeCurrentURL)
<template>
<button v-if="objectURL" class="chat-image-button" type="button" @click="openImage">
<img :src="objectURL" alt="聊天图片" loading="lazy">
<img :src="objectURL" alt="聊天图片" loading="lazy" decoding="async">
</button>
<span v-else class="chat-image-fallback">{{ failed ? '图片加载失败' : '图片加载中' }}</span>
</template>
frontend/src/utils/imageUpload.ts
+84
View File
@@ -0,0 +1,84 @@
const IMAGE_UPLOAD_MAX_SIDE: Record<string, number> = {
avatar: 512,
chat: 1280,
"home-banner": 1920,
listing: 1920,
dispute: 1920,
handoff: 1920,
realname: 1920,
};
const IMAGE_UPLOAD_QUALITY: Record<string, number> = {
avatar: 0.82,
chat: 0.8,
"home-banner": 0.84,
listing: 0.84,
dispute: 0.86,
handoff: 0.86,
realname: 0.86,
};
export async function optimizeImageForUpload(file: File, scene: string) {
if (!file.type.startsWith("image/")) return file;
if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) return file;
if (typeof document === "undefined") return file;
try {
const image = await loadImage(file);
const maxSide = IMAGE_UPLOAD_MAX_SIDE[scene] || 1600;
const quality = IMAGE_UPLOAD_QUALITY[scene] || 0.82;
const { width, height } = fitSize(image.naturalWidth, image.naturalHeight, maxSide);
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
if (!context) return file;
context.fillStyle = "#ffffff";
context.fillRect(0, 0, width, height);
context.drawImage(image, 0, 0, width, height);
const blob = await canvasToBlob(canvas, "image/webp", quality);
if (!blob || blob.size >= file.size) return file;
return new File([blob], replaceFileExt(file.name, "webp"), {
type: "image/webp",
lastModified: Date.now(),
});
} catch {
return file;
}
}
function loadImage(file: File) {
return new Promise<HTMLImageElement>((resolve, reject) => {
const url = URL.createObjectURL(file);
const image = new Image();
image.onload = () => {
URL.revokeObjectURL(url);
resolve(image);
};
image.onerror = () => {
URL.revokeObjectURL(url);
reject(new Error("图片读取失败"));
};
image.src = url;
});
}
function fitSize(width: number, height: number, maxSide: number) {
if (width <= 0 || height <= 0) return { width: 1, height: 1 };
const scale = Math.min(1, maxSide / Math.max(width, height));
return {
width: Math.max(1, Math.round(width * scale)),
height: Math.max(1, Math.round(height * scale)),
};
}
function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number) {
return new Promise<Blob | null>((resolve) => {
canvas.toBlob(resolve, type, quality);
});
}
function replaceFileExt(filename: string, ext: string) {
const base = filename.replace(/\.[^.]+$/, "");
return `${base || "image"}.${ext}`;
}
frontend/src/views/account/ChatView.vue
+1 -1
View File
@@ -147,7 +147,7 @@ async function handleImageChange(event: Event) {
uploading.value = true
try {
for (const file of files.slice(0, slots)) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 10 * 1024 * 1024) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 25 * 1024 * 1024) {
ElMessage.warning(`${file.name} 不符合图片规则`)
continue
}
frontend/src/views/admin/AdminChatsView.vue
+1 -1
View File
@@ -182,7 +182,7 @@ async function handleImageChange(event: Event) {
uploading.value = true
try {
for (const file of files.slice(0, slots)) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 10 * 1024 * 1024) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 25 * 1024 * 1024) {
ElMessage.warning(`${file.name} 不符合图片规则`)
continue
}
frontend/src/views/mobile/MobileChatView.vue
+1 -1
View File
@@ -145,7 +145,7 @@ async function handleImageChange(event: Event) {
uploading.value = true
try {
for (const file of files.slice(0, slots)) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 10 * 1024 * 1024) {
if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type) || file.size > 25 * 1024 * 1024) {
showToast(`${file.name} 不符合图片规则`)
continue
}
frontend/src/views/mobile/MobileHomeView.css
+8
View File
@@ -544,6 +544,14 @@
white-space: nowrap;
}
.mobile-load-state {
padding: 4px 0 18px;
color: #8a96a8;
font-size: 12px;
font-weight: 700;
text-align: center;
}
@media (max-width: 374px) {
.mobile-card {
grid-template-columns: 112px minmax(0, 1fr);
frontend/src/views/mobile/MobileHomeView.vue
+113 -104
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { RouterLink, useRouter } from "vue-router";
import { showToast } from "vant";
import MobileBottomNav from "@/components/MobileBottomNav.vue";
@@ -9,7 +9,7 @@ import {
emptyListingPublishOptions,
type ListingPublishOptions,
} from "@/api/listingOptions";
import { fetchListings, type Listing } from "@/api/listings";
import { fetchListingsPage, type Listing, type PublicListingQuery } from "@/api/listings";
import {
defaultHomeAnnouncements,
defaultHomeBanners,
@@ -20,30 +20,26 @@ import MobileHomeFilterSheet, {
type FilterSection,
} from "./MobileHomeFilterSheet.vue";
import {
assetRegions,
formatHafCoinM,
getCoinM,
getCoinWan,
getListingChips,
getListingDisplayPrice,
getListingSubtitle,
getListingTitle,
getLoginMethod,
getResourceQuantity,
getServerRegion,
getSkinGroup,
hasAcceleratedSaleRatio,
hasGiftResources,
readAssetNumber,
readAssetString,
} from "@/utils/listingDisplay";
import { useSessionStore } from "@/stores/session";
const router = useRouter();
const session = useSessionStore();
const loading = ref(false);
const loadingMore = ref(false);
const loadFailed = ref(false);
const listings = ref<Listing[]>([]);
const totalListings = ref(0);
const currentPage = ref(1);
const hasMoreListings = ref(true);
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
const sortOpen = ref(false);
const activeSort = ref("comprehensive");
@@ -55,6 +51,8 @@ const searchValue = ref("");
const announcements = ref<string[]>(defaultHomeAnnouncements);
const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
const supportLoading = ref(false);
const mobilePageSize = 10;
let listingRequestSeq = 0;
const sortOptions = [
{ key: "comprehensive", label: "综合排序" },
@@ -159,29 +157,56 @@ const activeFilterCount = computed(() => {
});
const displayListings = computed(() => {
const keyword = searchValue.value.trim().toLowerCase();
const filtered = listings.value.filter((item) => {
if (!matchesFilters(item)) return false;
if (!keyword) return true;
return searchText(item).includes(keyword);
});
return sortListings(filtered);
return listings.value;
});
onMounted(() => {
loadListings();
loadHomeConfig();
window.addEventListener("scroll", handleWindowScroll, { passive: true });
});
async function loadListings() {
loading.value = true;
onBeforeUnmount(() => {
window.removeEventListener("scroll", handleWindowScroll);
});
watch(
() => listingQuerySignature(),
() => {
loadListings(true);
}
);
async function loadListings(reset = true) {
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return;
const requestSeq = ++listingRequestSeq;
if (reset) {
loading.value = true;
currentPage.value = 1;
hasMoreListings.value = true;
}
loadingMore.value = true;
loadFailed.value = false;
try {
listings.value = await fetchListings();
const page = await fetchListingsPage(buildListingQuery(currentPage.value));
if (requestSeq !== listingRequestSeq) return;
listings.value = reset ? page.items : [...listings.value, ...page.items];
totalListings.value = page.total;
hasMoreListings.value = listings.value.length < page.total;
currentPage.value = page.page + 1;
requestAnimationFrame(handleWindowScroll);
} catch {
loadFailed.value = true;
if (reset) {
listings.value = [];
totalListings.value = 0;
hasMoreListings.value = false;
loadFailed.value = true;
}
} finally {
loading.value = false;
if (requestSeq === listingRequestSeq) {
loading.value = false;
loadingMore.value = false;
}
}
}
@@ -201,11 +226,10 @@ async function loadHomeConfig() {
async function onRefresh() {
refreshing.value = true;
try {
const [nextListings, nextHomeConfig] = await Promise.all([
fetchListings(),
const [, nextHomeConfig] = await Promise.all([
loadListings(true),
fetchMobileHomeConfig(),
]);
listings.value = nextListings;
announcements.value = nextHomeConfig.announcements;
bannerSlides.value = nextHomeConfig.banners;
publishOptions.value = nextHomeConfig.publish_options;
@@ -237,91 +261,70 @@ function clearFilters() {
searchValue.value = "";
}
function sortListings(items: Listing[]) {
const sorted = [...items];
if (activeSort.value === "comprehensive") {
return sorted;
}
if (activeSort.value === "priceAsc") {
return sorted.sort(
(a, b) => getListingDisplayPrice(a) - getListingDisplayPrice(b)
);
}
if (activeSort.value === "priceDesc") {
return sorted.sort(
(a, b) => getListingDisplayPrice(b) - getListingDisplayPrice(a)
);
}
if (activeSort.value === "awmDesc") {
return sorted.sort(
(a, b) =>
getResourceQuantity(b, "awmAmmo") - getResourceQuantity(a, "awmAmmo") ||
getCoinWan(b) - getCoinWan(a)
);
}
return sorted.sort((a, b) => {
const bTime = Date.parse(b.published_at || b.created_at || "") || 0;
const aTime = Date.parse(a.published_at || a.created_at || "") || 0;
return bTime - aTime || b.id - a.id;
});
}
function matchesFilters(item: Listing) {
const chipOk = Object.entries(selectedFilters.value).every(([key, values]) => {
if (!values.length) return true;
if (key === "server") return values.includes(getServerRegion(item));
if (key === "login") return values.includes(getLoginMethod(item));
if (key === "insurance") return values.includes(readAssetString(item, "season_insurance"));
if (key === "stamina") return values.includes(readAssetString(item, "stamina_level"));
if (key === "load") return values.includes(readAssetString(item, "load_level"));
if (key === "rank") return values.includes(item.rank_level);
if (isSkinGroupKey(key)) {
return getSkinGroup(item, key).some((skin) => values.includes(skin));
function buildListingQuery(page: number): PublicListingQuery {
const query: PublicListingQuery = {
page,
page_size: mobilePageSize,
keyword: searchValue.value.trim(),
sort: activeSort.value,
};
const skinGroups: string[] = [];
const skinNames: string[] = [];
for (const [key, values] of Object.entries(selectedFilters.value)) {
const value = values.filter(Boolean).join(",");
if (!value) continue;
if (key === "server") query.server = value;
else if (key === "login") query.login_method = value;
else if (key === "insurance") query.insurance = value;
else if (key === "stamina") query.stamina = value;
else if (key === "load") query.load = value;
else if (key === "rank") query.rank = value;
else if (isSkinGroupKey(key)) {
skinGroups.push(key);
skinNames.push(...values);
}
return true;
});
if (!chipOk) return false;
}
if (skinGroups.length) query.skin_group = skinGroups.join(",");
if (skinNames.length) query.skin_name = skinNames.join(",");
return Object.entries(rangeFilters.value).every(([key, range]) => {
if (!range.min && !range.max) return true;
let value = 0;
if (key === "price") value = getListingDisplayPrice(item);
if (key === "coin") value = getCoinM(item);
if (key === "secretKd") value = readAssetNumber(item, "secret_kd");
if (key === "deposit") value = Number(item.deposit_amount || 0);
if (key.startsWith("resource_")) {
value = getResourceQuantity(item, key.replace("resource_", ""));
for (const [key, range] of Object.entries(rangeFilters.value)) {
if (!range.min && !range.max) continue;
const min = parseOptionalNumber(range.min);
const max = parseOptionalNumber(range.max);
if (key === "price") {
query.min_price = min;
query.max_price = max;
} else if (key === "coin") {
query.min_coin = min;
query.max_coin = max;
} else if (key === "secretKd") {
query.min_secret_kd = min;
query.max_secret_kd = max;
} else if (key === "deposit") {
query.min_deposit = min;
query.max_deposit = max;
} else if (key.startsWith("resource_")) {
const resourceKey = key.replace("resource_", "");
query[`resource_${resourceKey}_min`] = min;
query[`resource_${resourceKey}_max`] = max;
}
return inRange(value, range);
});
}
return query;
}
function inRange(value: number, range: { min: string; max: string }) {
const min = range.min === "" ? undefined : Number(range.min);
const max = range.max === "" ? undefined : Number(range.max);
if (min !== undefined && Number.isFinite(min) && value < min) return false;
if (max !== undefined && Number.isFinite(max) && value > max) return false;
return true;
function listingQuerySignature() {
return JSON.stringify(buildListingQuery(1));
}
function searchText(item: Listing) {
return [
item.title,
item.description,
getServerRegion(item),
getLoginMethod(item),
item.rank_level,
readAssetString(item, "season_insurance"),
readAssetString(item, "stamina_level"),
readAssetString(item, "load_level"),
formatHafCoinM(getCoinWan(item)),
assetRegions(item).join(" "),
...publishOptions.value.skin_groups.map((group) =>
getSkinGroup(item, group.key).join(" ")
),
]
.join(" ")
.toLowerCase();
function parseOptionalNumber(value: string) {
if (value === "") return undefined;
const number = Number(value);
return Number.isFinite(number) ? number : undefined;
}
function handleWindowScroll() {
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 360) return;
loadListings(false);
}
function isSkinGroupKey(key: string) {
@@ -437,7 +440,7 @@ function uniqueOptions(values: string[]) {
</button>
</div>
<div class="result-count">
<strong>{{ displayListings.length }}</strong>
<strong>{{ totalListings }}</strong>
<span>个可租账号</span>
</div>
@@ -475,6 +478,8 @@ function uniqueOptions(values: string[]) {
v-if="item.cover_url"
:src="item.cover_url"
:alt="getListingTitle(item)"
loading="lazy"
decoding="async"
/>
<span v-else>图</span>
<div
@@ -514,6 +519,10 @@ function uniqueOptions(values: string[]) {
</div>
</RouterLink>
</div>
<div v-if="!loading && displayListings.length" class="mobile-load-state">
<span v-if="loadingMore">正在加载更多账号...</span>
<span v-else-if="!hasMoreListings">已经到底了</span>
</div>
</section>
</van-pull-refresh>
frontend/src/views/mobile/MobileListingDetailView.vue
+2 -1
View File
@@ -203,6 +203,7 @@ function isNavActive(path: string) {
:src="detailScreenshots[0].url"
:alt="getListingTitle(listing)"
class="cover-img"
decoding="async"
/>
<div v-else class="cover-placeholder">
<van-icon name="photo-o" :size="40" color="#ccc" />
@@ -307,7 +308,7 @@ function isNavActive(path: string) {
<h3 class="card-subtitle">账号截图</h3>
<div class="screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
<img :src="shot.url" class="screenshot-thumb" />
<img :src="shot.url" class="screenshot-thumb" loading="lazy" decoding="async" />
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
frontend/src/views/public/HomeView.vue
+126 -124
View File
@@ -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;
frontend/src/views/public/ListingDetailView.vue
+1 -1
View File
@@ -264,7 +264,7 @@ function listingPrice(item: Listing) {
</div>
<div class="detail-screenshot-grid">
<figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
<img :src="shot.url" :alt="shot.label" />
<img :src="shot.url" :alt="shot.label" loading="lazy" decoding="async" />
<figcaption>{{ shot.label }}</figcaption>
</figure>
</div>
frontend/src/views/public/ListingsView.vue
+2
View File
@@ -708,6 +708,8 @@ function parseQuantityUnit(price: string) {
v-if="item.cover_url"
:src="item.cover_url"
:alt="getListingTitle(item)"
loading="lazy"
decoding="async"
/>
<span v-else>图</span>
<div