切换 react-antd
This commit is contained in:
yml2213
+719
@@ -0,0 +1,719 @@
|
||||
import CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined";
|
||||
import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
|
||||
import ReloadOutlined from "@ant-design/icons/es/icons/ReloadOutlined";
|
||||
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
|
||||
import StarFilled from "@ant-design/icons/es/icons/StarFilled";
|
||||
import Alert from "antd/es/alert";
|
||||
import Button from "antd/es/button";
|
||||
import ConfigProvider from "antd/es/config-provider";
|
||||
import Empty from "antd/es/empty";
|
||||
import Input from "antd/es/input";
|
||||
import Pagination from "antd/es/pagination";
|
||||
import Select from "antd/es/select";
|
||||
import Spin from "antd/es/spin";
|
||||
import Tag from "antd/es/tag";
|
||||
import type { CSSProperties } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
fetchListingsPage,
|
||||
fetchMobileHomeConfig,
|
||||
type HomeBannerSlide,
|
||||
type Listing,
|
||||
type ListingPublishOptions,
|
||||
type PublicListingQuery,
|
||||
} from "./api";
|
||||
import {
|
||||
formatCoin,
|
||||
formatListingCode,
|
||||
formatRatio,
|
||||
getMainChips,
|
||||
getOnlineTimeText,
|
||||
getRegions,
|
||||
getResourceQuantity,
|
||||
getSkinNames,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from "./listingDisplay";
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
const initialOptions: ListingPublishOptions = {
|
||||
server_options: [],
|
||||
login_method_options: [],
|
||||
rank_options: [],
|
||||
insurance_options: [],
|
||||
level_options: [],
|
||||
skin_groups: [],
|
||||
};
|
||||
|
||||
const fallbackLevels = ["4级", "5级", "6级", "7级"];
|
||||
const fallbackInsurance = ["1*2", "2*2", "2*3", "3*3"];
|
||||
const fallbackLogins = ["QQ", "微信", "Steam", "不限"];
|
||||
const fallbackRanks = ["青铜", "白银", "黄金", "铂金", "钻石", "黑鹰", "巅峰"];
|
||||
const fallbackSkins = ["信条", "坠星者", "处刑者", "影锋", "暗星", "电锯", "蚀金玫瑰", "维什戴尔"];
|
||||
|
||||
const coinRanges = [
|
||||
{ label: "15-50", min: "15", max: "50" },
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-150", min: "100", max: "150" },
|
||||
{ label: "150-200", min: "150", max: "200" },
|
||||
{ label: "200-250", min: "200", max: "250" },
|
||||
{ label: "300以上", min: "300", max: "" },
|
||||
];
|
||||
|
||||
const priceRanges = [
|
||||
{ label: "0-50", min: "0", max: "50" },
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-150", min: "100", max: "150" },
|
||||
{ label: "150-200", min: "150", max: "200" },
|
||||
{ label: "200以上", min: "200", max: "" },
|
||||
];
|
||||
|
||||
const sortOptions = [
|
||||
{ key: "recommended", label: "默认排序" },
|
||||
{ key: "priceDesc", label: "价格排序" },
|
||||
{ key: "ratioDesc", label: "比例排序" },
|
||||
{ key: "coinDesc", label: "哈夫币排序" },
|
||||
{ key: "ratioAsc", label: "绝密KD排序" },
|
||||
{ key: "coinAsc", label: "AWM排序" },
|
||||
{ key: "priceAsc", label: "六头排序" },
|
||||
{ key: "loadDesc", label: "六甲排序" },
|
||||
];
|
||||
|
||||
interface Filters {
|
||||
keyword: string;
|
||||
minCoin: string;
|
||||
maxCoin: string;
|
||||
minPrice: string;
|
||||
maxPrice: string;
|
||||
minKd: string;
|
||||
maxKd: string;
|
||||
stamina: string[];
|
||||
load: string[];
|
||||
insurance: string[];
|
||||
skinNames: string[];
|
||||
loginMethods: string[];
|
||||
ranks: string[];
|
||||
zones: string[];
|
||||
}
|
||||
|
||||
const emptyFilters: Filters = {
|
||||
keyword: "",
|
||||
minCoin: "",
|
||||
maxCoin: "",
|
||||
minPrice: "",
|
||||
maxPrice: "",
|
||||
minKd: "",
|
||||
maxKd: "",
|
||||
stamina: [],
|
||||
load: [],
|
||||
insurance: [],
|
||||
skinNames: [],
|
||||
loginMethods: [],
|
||||
ranks: [],
|
||||
zones: [],
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#00d7a0",
|
||||
borderRadius: 5,
|
||||
fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
controlHeight: 31,
|
||||
borderRadius: 4,
|
||||
},
|
||||
Input: {
|
||||
controlHeight: 38,
|
||||
},
|
||||
Select: {
|
||||
controlHeight: 30,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Showcase />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function Showcase() {
|
||||
const [listings, setListings] = useState<Listing[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadError, setLoadError] = useState("");
|
||||
const [announcements, setAnnouncements] = useState<string[]>([]);
|
||||
const [banners, setBanners] = useState<HomeBannerSlide[]>([]);
|
||||
const [publishOptions, setPublishOptions] = useState<ListingPublishOptions>(initialOptions);
|
||||
const [filters, setFilters] = useState<Filters>(cloneFilters(emptyFilters));
|
||||
const [appliedFilters, setAppliedFilters] = useState<Filters>(cloneFilters(emptyFilters));
|
||||
const [activeSort, setActiveSort] = useState("recommended");
|
||||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||||
const [copiedCode, setCopiedCode] = useState("");
|
||||
|
||||
const levelOptions = useMemo(
|
||||
() => (publishOptions.level_options.length ? publishOptions.level_options : fallbackLevels),
|
||||
[publishOptions.level_options]
|
||||
);
|
||||
const insuranceOptions = useMemo(
|
||||
() => (publishOptions.insurance_options.length ? publishOptions.insurance_options : fallbackInsurance),
|
||||
[publishOptions.insurance_options]
|
||||
);
|
||||
const loginOptions = useMemo(
|
||||
() => (publishOptions.login_method_options.length ? publishOptions.login_method_options : fallbackLogins),
|
||||
[publishOptions.login_method_options]
|
||||
);
|
||||
const rankOptions = useMemo(
|
||||
() => (publishOptions.rank_options.length ? publishOptions.rank_options : fallbackRanks),
|
||||
[publishOptions.rank_options]
|
||||
);
|
||||
const zoneOptions = useMemo(() => publishOptions.server_options, [publishOptions.server_options]);
|
||||
const skinSections = useMemo(() => {
|
||||
const groups = publishOptions.skin_groups.filter((group) =>
|
||||
["melee", "operatorGold", "operatorRed", "weapon"].includes(group.key)
|
||||
);
|
||||
if (groups.length) {
|
||||
return groups.map((group) => ({
|
||||
key: group.key,
|
||||
title: groupTitle(group.key, group.title),
|
||||
options: group.options,
|
||||
}));
|
||||
}
|
||||
return [{ key: "skin", title: "稀有皮肤", options: fallbackSkins }];
|
||||
}, [publishOptions.skin_groups]);
|
||||
|
||||
const topBanner = useMemo(
|
||||
() =>
|
||||
banners[0] || {
|
||||
eyebrow: "三角洲行动账号专区",
|
||||
title: "高哈夫币账号实时展示",
|
||||
badge: "24H",
|
||||
pill: "安全交易 · 诚信服务 · 专业保障",
|
||||
tone: "green",
|
||||
},
|
||||
[banners]
|
||||
);
|
||||
|
||||
const displayListings = useMemo(() => {
|
||||
const items = [...listings];
|
||||
if (activeSort === "ratioAsc") return items.sort((a, b) => ratioValue(a) - ratioValue(b));
|
||||
if (activeSort === "ratioDesc") return items.sort((a, b) => ratioValue(b) - ratioValue(a));
|
||||
if (activeSort === "coinAsc") return items.sort((a, b) => a.haf_coin_amount - b.haf_coin_amount);
|
||||
if (activeSort === "loadDesc") {
|
||||
return items.sort((a, b) => getResourceQuantity(b, "armor6") - getResourceQuantity(a, "armor6"));
|
||||
}
|
||||
return items;
|
||||
}, [activeSort, listings]);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
fetchMobileHomeConfig()
|
||||
.then((home) => {
|
||||
if (disposed) return;
|
||||
setAnnouncements(home.announcements);
|
||||
setBanners(home.banners);
|
||||
setPublishOptions(home.publish_options);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!disposed) setPublishOptions(initialOptions);
|
||||
});
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
setLoading(true);
|
||||
setLoadError("");
|
||||
fetchListingsPage(buildQuery(page, appliedFilters, activeSort))
|
||||
.then((result) => {
|
||||
if (disposed) return;
|
||||
setListings(result.items);
|
||||
setTotal(result.total);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (disposed) return;
|
||||
setListings([]);
|
||||
setTotal(0);
|
||||
setLoadError(error instanceof Error ? error.message : "加载失败");
|
||||
})
|
||||
.finally(() => {
|
||||
if (!disposed) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [activeSort, appliedFilters, page]);
|
||||
|
||||
function updateFilter<K extends keyof Filters>(key: K, value: Filters[K]) {
|
||||
setFilters((current) => ({ ...current, [key]: value }));
|
||||
}
|
||||
|
||||
function toggleFilterList(key: "stamina" | "load" | "insurance" | "skinNames", value: string) {
|
||||
setFilters((current) => {
|
||||
const nextList = current[key].includes(value) ? current[key].filter((item) => item !== value) : [...current[key], value];
|
||||
return { ...current, [key]: nextList };
|
||||
});
|
||||
}
|
||||
|
||||
function applyFilters(nextFilters = filters) {
|
||||
setAppliedFilters(cloneFilters(nextFilters));
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
const nextFilters = cloneFilters(emptyFilters);
|
||||
setFilters(nextFilters);
|
||||
setAppliedFilters(cloneFilters(nextFilters));
|
||||
setActiveSort("recommended");
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
function selectRange(minKey: "minCoin" | "minPrice", maxKey: "maxCoin" | "maxPrice", min: string, max: string) {
|
||||
setFilters((current) => ({ ...current, [minKey]: min, [maxKey]: max }));
|
||||
}
|
||||
|
||||
function setSort(sortKey: string) {
|
||||
setActiveSort((current) => (current === sortKey && sortKey !== "recommended" ? "recommended" : sortKey));
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
async function copyListing(item: Listing) {
|
||||
const code = formatListingCode(item);
|
||||
const text = `${code} 纯币 ${formatCoin(item)} ￥${item.price} 比例 ${formatRatio(item)}`;
|
||||
try {
|
||||
await navigator.clipboard?.writeText(text);
|
||||
setCopiedCode(code);
|
||||
window.setTimeout(() => {
|
||||
setCopiedCode((current) => (current === code ? "" : current));
|
||||
}, 1500);
|
||||
} catch {
|
||||
setCopiedCode("");
|
||||
}
|
||||
}
|
||||
|
||||
const heroStyle: CSSProperties | undefined = topBanner.image_url
|
||||
? {
|
||||
backgroundImage: `linear-gradient(90deg, rgba(17, 28, 31, .9), rgba(17, 28, 31, .42)), url(${topBanner.image_url})`,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<main className="show-page">
|
||||
<header className="site-header">
|
||||
<div className="nav-inner">
|
||||
<div className="brand">
|
||||
<span className="brand-mark">
|
||||
<StarFilled />
|
||||
</span>
|
||||
<div>
|
||||
<strong>星逸电竞</strong>
|
||||
<span>哈夫币账号展示</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="nav-links">
|
||||
<a className="active">资源号租赁</a>
|
||||
<a>账号交易</a>
|
||||
<a>跑刀代肝</a>
|
||||
<a>租号须知</a>
|
||||
</nav>
|
||||
<div className="nav-actions">
|
||||
<span>安全交易 · 极速发货</span>
|
||||
<Button type="primary">24h在线客服</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning-line">禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。</div>
|
||||
</header>
|
||||
|
||||
<section className="hero-strip" style={heroStyle}>
|
||||
<div>
|
||||
<span>{topBanner.eyebrow || "三角洲行动账号专区"}</span>
|
||||
<strong>{topBanner.title || "高哈夫币账号实时展示"}</strong>
|
||||
</div>
|
||||
<Tag color="success">{topBanner.badge || "HOT"}</Tag>
|
||||
<p>{topBanner.pill || "安全交易 · 诚信服务 · 专业保障"}</p>
|
||||
</section>
|
||||
|
||||
<section className="search-stage">
|
||||
<Input.Search
|
||||
enterButton={<SearchOutlined />}
|
||||
onChange={(event) => updateFilter("keyword", event.target.value)}
|
||||
onSearch={() => applyFilters()}
|
||||
placeholder="请输入编号"
|
||||
value={filters.keyword}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{announcements[0] ? <div className="notice-line">{announcements[0]}</div> : null}
|
||||
|
||||
<section className="filter-board">
|
||||
<div className="section-title">筛选条件</div>
|
||||
<div className="filter-grid">
|
||||
<FilterRow
|
||||
active={(item) => filters.minCoin === item.min && filters.maxCoin === item.max}
|
||||
label="哈夫币(M)"
|
||||
options={coinRanges}
|
||||
render={(item) => item.label}
|
||||
onSelect={(item) => selectRange("minCoin", "maxCoin", item.min, item.max)}
|
||||
/>
|
||||
<FilterRow
|
||||
active={(item) => filters.minPrice === item.min && filters.maxPrice === item.max}
|
||||
label="租金"
|
||||
options={priceRanges}
|
||||
render={(item) => item.label}
|
||||
onSelect={(item) => selectRange("minPrice", "maxPrice", item.min, item.max)}
|
||||
/>
|
||||
<FilterRow
|
||||
active={(item) => filters.insurance.includes(item)}
|
||||
label="保险"
|
||||
options={insuranceOptions}
|
||||
render={insuranceLabel}
|
||||
onSelect={(item) => toggleFilterList("insurance", item)}
|
||||
/>
|
||||
<FilterRow
|
||||
active={(item) => filters.stamina.includes(item)}
|
||||
label="体力"
|
||||
options={levelOptions}
|
||||
render={(item) => item}
|
||||
onSelect={(item) => toggleFilterList("stamina", item)}
|
||||
/>
|
||||
<FilterRow
|
||||
active={(item) => filters.load.includes(item)}
|
||||
label="负重"
|
||||
options={levelOptions}
|
||||
render={(item) => item}
|
||||
onSelect={(item) => toggleFilterList("load", item)}
|
||||
/>
|
||||
<div className="filter-row compact-select">
|
||||
<span>IP地址</span>
|
||||
<Select
|
||||
allowClear
|
||||
mode="multiple"
|
||||
maxTagCount="responsive"
|
||||
options={zoneOptions.map((item) => ({ label: item, value: item }))}
|
||||
placeholder="全部"
|
||||
value={filters.zones}
|
||||
onChange={(value) => updateFilter("zones", value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="filter-row compact-select">
|
||||
<span>登录方式</span>
|
||||
<Select
|
||||
allowClear
|
||||
mode="multiple"
|
||||
maxTagCount="responsive"
|
||||
options={loginOptions.map((item) => ({ label: item, value: item }))}
|
||||
placeholder="不限"
|
||||
value={filters.loginMethods}
|
||||
onChange={(value) => updateFilter("loginMethods", value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="filter-row compact-select">
|
||||
<span>段位</span>
|
||||
<Select
|
||||
allowClear
|
||||
mode="multiple"
|
||||
maxTagCount="responsive"
|
||||
options={rankOptions.map((item) => ({ label: item, value: item }))}
|
||||
placeholder="不限"
|
||||
value={filters.ranks}
|
||||
onChange={(value) => updateFilter("ranks", value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={advancedOpen ? "advanced-panel open" : "advanced-panel"}>
|
||||
<div className="range-fields">
|
||||
<label>
|
||||
<span>哈夫币范围</span>
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
placeholder="最小"
|
||||
value={filters.minCoin}
|
||||
onChange={(event) => updateFilter("minCoin", event.target.value)}
|
||||
/>
|
||||
<Input
|
||||
inputMode="numeric"
|
||||
placeholder="最大"
|
||||
value={filters.maxCoin}
|
||||
onChange={(event) => updateFilter("maxCoin", event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>KD范围</span>
|
||||
<Input
|
||||
inputMode="decimal"
|
||||
placeholder="最小"
|
||||
value={filters.minKd}
|
||||
onChange={(event) => updateFilter("minKd", event.target.value)}
|
||||
/>
|
||||
<Input
|
||||
inputMode="decimal"
|
||||
placeholder="最大"
|
||||
value={filters.maxKd}
|
||||
onChange={(event) => updateFilter("maxKd", event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{skinSections.map((section) => (
|
||||
<FilterRow
|
||||
key={section.key}
|
||||
active={(item) => filters.skinNames.includes(item)}
|
||||
label={section.title}
|
||||
options={section.options.slice(0, 18)}
|
||||
render={(item) => item}
|
||||
onSelect={(item) => toggleFilterList("skinNames", item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="filter-footer">
|
||||
<Button type="link" onClick={() => setAdvancedOpen((open) => !open)}>
|
||||
{advancedOpen ? "收起高级筛选" : "展开高级筛选"} <DownOutlined rotate={advancedOpen ? 180 : 0} />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="result-area">
|
||||
<div className="sort-toolbar">
|
||||
<div className="sort-buttons">
|
||||
{sortOptions.map((option) => (
|
||||
<Button key={option.key} className={activeSort === option.key ? "active" : ""} onClick={() => setSort(option.key)}>
|
||||
{option.label} <DownOutlined />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="toolbar-actions">
|
||||
<Button icon={<ReloadOutlined />} onClick={resetFilters}>
|
||||
重置
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} type="primary" onClick={() => applyFilters()}>
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadError ? <Alert showIcon type="error" message={loadError} action={<Button onClick={() => applyFilters()}>重试</Button>} /> : null}
|
||||
|
||||
<Spin spinning={loading}>
|
||||
{displayListings.length ? (
|
||||
<div className="listing-list">
|
||||
{displayListings.map((item) => (
|
||||
<ListingRow key={item.id} copied={copiedCode === formatListingCode(item)} item={item} onCopy={copyListing} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Empty className="empty-state" description={loading ? "正在加载账号" : "暂无符合条件的账号"} />
|
||||
)}
|
||||
</Spin>
|
||||
|
||||
<div className="pagination-bar">
|
||||
<Pagination
|
||||
current={page}
|
||||
pageSize={pageSize}
|
||||
showSizeChanger={false}
|
||||
showTotal={(count) => `第 ${page} 页 / 共 ${Math.max(1, Math.ceil(count / pageSize))} 页`}
|
||||
total={total}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="site-footer">
|
||||
<strong>星逸电竞</strong>
|
||||
<span>安全交易 · 诚信服务 · 专业保障</span>
|
||||
<small>备案信息以实际站点公示为准</small>
|
||||
</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
interface FilterRowProps<T> {
|
||||
label: string;
|
||||
options: T[];
|
||||
active: (item: T) => boolean;
|
||||
render: (item: T) => string;
|
||||
onSelect: (item: T) => void;
|
||||
}
|
||||
|
||||
function FilterRow<T>({ active, label, onSelect, options, render }: FilterRowProps<T>) {
|
||||
return (
|
||||
<div className="filter-row">
|
||||
<span>{label}</span>
|
||||
<div className="chip-list">
|
||||
{options.map((item) => {
|
||||
const text = render(item);
|
||||
return (
|
||||
<button key={text} className={active(item) ? "selected" : ""} type="button" onClick={() => onSelect(item)}>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ListingRowProps {
|
||||
item: Listing;
|
||||
copied: boolean;
|
||||
onCopy: (item: Listing) => void;
|
||||
}
|
||||
|
||||
function ListingRow({ copied, item, onCopy }: ListingRowProps) {
|
||||
const code = formatListingCode(item);
|
||||
const cover = item.cover_url || item.screenshot_urls?.[0] || "";
|
||||
const totalPrice = Math.round(Number(item.price || 0) + Number(item.deposit_amount || 0));
|
||||
const remark = getAssetText(item, "remark");
|
||||
const regions = getRegions(item);
|
||||
const skinNames = getSkinNames(item);
|
||||
const fireLevel = readAssetNumber(item, "fire_level");
|
||||
const details = [
|
||||
["哈夫币", formatCoin(item)],
|
||||
["保险格", readAssetString(item, "season_insurance") || "-"],
|
||||
["体力", readAssetString(item, "stamina_level") || "-"],
|
||||
["负重", readAssetString(item, "load_level") || "-"],
|
||||
["六头", String(getResourceQuantity(item, "helmet6") || "-")],
|
||||
["六甲", String(getResourceQuantity(item, "armor6") || "-")],
|
||||
["AW子弹", String(getResourceQuantity(item, "awmAmmo") || "-")],
|
||||
["绝密KD", String(readAssetNumber(item, "secret_kd") || "0.00")],
|
||||
["比例", formatRatio(item)],
|
||||
["红皮", skinNames.slice(0, 2).join("、") || "-"],
|
||||
["登录方式", item.login_platform || "-"],
|
||||
["IP", regions[0] || item.server_region || "-"],
|
||||
];
|
||||
|
||||
return (
|
||||
<article className="listing-row">
|
||||
<div className="listing-cover">
|
||||
{cover ? <img alt={item.title || code} loading="lazy" src={cover} /> : <span>暂无截图</span>}
|
||||
</div>
|
||||
<div className="listing-main">
|
||||
<div className="listing-head">
|
||||
<div>
|
||||
<Tag color="green">编号</Tag>
|
||||
<strong>{code}</strong>
|
||||
<Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopy(item)}>
|
||||
{copied ? "已复制" : ""}
|
||||
</Button>
|
||||
</div>
|
||||
<Tag color={item.is_accelerated_sale ? "orange" : "gold"}>{item.is_accelerated_sale ? "爆卖" : item.rank_level || "展示"}</Tag>
|
||||
</div>
|
||||
|
||||
<div className="detail-grid">
|
||||
{details.map(([label, value]) => (
|
||||
<div key={`${code}-${label}`} className="detail-item">
|
||||
<span>{label}:</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="listing-meta">
|
||||
{getOnlineTimeText(item) ? <Tag color="cyan">{getOnlineTimeText(item)}</Tag> : null}
|
||||
{fireLevel ? <Tag color="volcano">烽火 {fireLevel}</Tag> : null}
|
||||
{getMainChips(item)
|
||||
.slice(0, 5)
|
||||
.map((chip) => (
|
||||
<Tag key={`${code}-${chip.label}`} className={`mini-tag tag-${chip.tone}`}>
|
||||
{chip.label}
|
||||
</Tag>
|
||||
))}
|
||||
{remark ? <span className="remark">备注：{remark}</span> : null}
|
||||
</div>
|
||||
|
||||
<div className="price-line">
|
||||
<span>
|
||||
租金(只含纯币) <strong>￥{Math.round(item.price || 0).toFixed(2)}</strong>
|
||||
</span>
|
||||
<span>
|
||||
押金 <strong>￥{Math.round(item.deposit_amount || 0).toFixed(2)}</strong>
|
||||
</span>
|
||||
<span>
|
||||
合计 <strong>￥{totalPrice.toFixed(2)}</strong>
|
||||
</span>
|
||||
<Button type="link">复制信息</Button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function buildQuery(nextPage: number, filters: Filters, sort: string): PublicListingQuery {
|
||||
return {
|
||||
page: nextPage,
|
||||
page_size: pageSize,
|
||||
keyword: filters.keyword.trim(),
|
||||
sort: backendSortKey(sort),
|
||||
zone: filters.zones.join(","),
|
||||
login_method: filters.loginMethods.join(","),
|
||||
rank: filters.ranks.join(","),
|
||||
min_coin: toNumber(filters.minCoin),
|
||||
max_coin: toNumber(filters.maxCoin),
|
||||
min_price: toNumber(filters.minPrice),
|
||||
max_price: toNumber(filters.maxPrice),
|
||||
min_secret_kd: toNumber(filters.minKd),
|
||||
max_secret_kd: toNumber(filters.maxKd),
|
||||
stamina: filters.stamina.join(","),
|
||||
load: filters.load.join(","),
|
||||
insurance: filters.insurance.join(","),
|
||||
skin_name: filters.skinNames.join(","),
|
||||
};
|
||||
}
|
||||
|
||||
function backendSortKey(sort: string) {
|
||||
if (sort === "priceAsc" || sort === "priceDesc" || sort === "coinDesc") return sort;
|
||||
return "recommended";
|
||||
}
|
||||
|
||||
function ratioValue(item: Listing) {
|
||||
const configuredRatio = readAssetNumber(item, "publish_ratio");
|
||||
if (configuredRatio > 0) return configuredRatio;
|
||||
if (!item.price) return 0;
|
||||
return Number(item.haf_coin_amount || 0) / 10000 / item.price;
|
||||
}
|
||||
|
||||
function toNumber(value: string) {
|
||||
if (!value.trim()) return undefined;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : undefined;
|
||||
}
|
||||
|
||||
function cloneFilters(filters: Filters): Filters {
|
||||
return {
|
||||
...filters,
|
||||
stamina: [...filters.stamina],
|
||||
load: [...filters.load],
|
||||
insurance: [...filters.insurance],
|
||||
skinNames: [...filters.skinNames],
|
||||
loginMethods: [...filters.loginMethods],
|
||||
ranks: [...filters.ranks],
|
||||
zones: [...filters.zones],
|
||||
};
|
||||
}
|
||||
|
||||
function groupTitle(key: string, title: string) {
|
||||
if (key === "melee") return "刀皮";
|
||||
if (key === "operatorGold") return "干员金皮";
|
||||
if (key === "operatorRed") return "干员红皮";
|
||||
if (key === "weapon") return "枪皮";
|
||||
return title;
|
||||
}
|
||||
|
||||
function insuranceLabel(value: string) {
|
||||
const [rows, cols] = value.split("*").map((item) => Number(item));
|
||||
if (rows > 0 && cols > 0) return `${rows * cols}格`;
|
||||
return value;
|
||||
}
|
||||
|
||||
function getAssetText(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
Reference in New Issue
Block a user