1008 lines
40 KiB
Plaintext
1008 lines
40 KiB
Plaintext
---
|
||
import Layout from "../layouts/Layout.astro"
|
||
|
||
// 全部秀场档案库：HBX 风左筛选 + 右 4 列商品卡。
|
||
// 筛选交互（设计师多选 / 系列类型 / 季节 / 年份 / 排序）全部通过 querystring 同步到后端，
|
||
// 真正由 `/api/public/articles` 的 brand_ids / collection_type / season / year / sort 参数承担。
|
||
|
||
// 侧边栏品牌列表：featured=1 取 ~198 个有走秀档案的代表品牌，含 article_count 作为计数。
|
||
// dev 期（import.meta.env.DEV）自动兜底到本地后端，避免每次手敲环境变量；生产走 API_SSR 构建参数。
|
||
import { getBrands, getYears, type BrandEntry } from "../lib/api"
|
||
|
||
let sidebarBrands: BrandEntry[] = []
|
||
let yearChips: number[] = []
|
||
|
||
// SSR 期从后端拉精选品牌（有走秀档案的代表品牌，含计数），运行期前端用同一封装再拉。
|
||
try {
|
||
sidebarBrands = (await getBrands({ size: 300, only_with_articles: 1, featured: 1 }))
|
||
.filter((b) => b.id && b.name)
|
||
.sort((a, b) => a.name.localeCompare(b.name))
|
||
} catch {}
|
||
|
||
// 年份 chips：从 back-end 拉最近 30 条秀场，提取独特年份（按降序去重），构造最近 6 年。
|
||
// 为 SSR 提供稳健的初始值，运行期会按筛选再补；不可达时给一组 fallback 区间。
|
||
let yearSeed = [2026, 2025, 2024, 2023, 2022, 2021]
|
||
try {
|
||
const ys = await getYears(30)
|
||
if (ys.length) yearChips = ys
|
||
} catch {}
|
||
if (!yearChips.length) yearChips = yearSeed
|
||
|
||
// URL 链接：保留当前路径以便 client-side filter 同步到地址栏
|
||
const pathname = "/shows"
|
||
---
|
||
|
||
<Layout title="All Shows — Portfolio Studio">
|
||
<!-- 首屏绘制前同步侧边栏折叠状态，杜绝刷新时的宽度闪动（无闪烁） -->
|
||
<script is:inline>
|
||
try {
|
||
if (localStorage.getItem("showsaside-collapsed") === "1") {
|
||
document.documentElement.classList.add("showsaside-collapsed")
|
||
}
|
||
} catch (e) {}
|
||
</script>
|
||
<div class="showsroot">
|
||
|
||
<!-- 顶部：极简眉头 -->
|
||
<header class="showshead">
|
||
<div class="showshead-l">
|
||
<span class="showskicker">Runway Archive · 2026 Edition</span>
|
||
<h1 class="showsh1">All Shows</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 已激活筛选 pills -->
|
||
<div id="showspills" class="showspills" hidden></div>
|
||
|
||
<!-- 主体：左 sidebar + 右 4 列商品 grid -->
|
||
<div class="showsbody">
|
||
|
||
<!-- LEFT SIDEBAR -->
|
||
<aside class="showsaside" id="showsaside">
|
||
|
||
<div class="showsaside-head">
|
||
<h2 class="showsaside-h">REFINE</h2>
|
||
<button id="showstoggle" class="showsaside-toggle" type="button" aria-label="折叠/展开筛选">
|
||
<svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true">
|
||
<path d="M7.5 3l-4 3 4 3" stroke="currentColor" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="showsaside-body">
|
||
|
||
<!-- Designer 多选 -->
|
||
<section class="showsg">
|
||
<header class="showsg-h" data-group="designers" role="button" tabindex="0" aria-expanded="true">
|
||
<span>DESIGNERS</span>
|
||
<span class="showsg-right">
|
||
<span class="showsg-count" id="brand-count">0</span>
|
||
<span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||
</span>
|
||
</header>
|
||
<div class="showsg-b">
|
||
<input id="brand-search" class="showssearch" placeholder="Search designer…" autocomplete="off" />
|
||
<ul id="brand-list" class="showschecks">
|
||
<!-- 由 JS 把 sidebarBrands 渲染进来 -->
|
||
</ul>
|
||
<a id="brand-showmore" class="showsmore">Show all 198 designers ▾</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Collection type - 多选复选框 -->
|
||
<section class="showsg">
|
||
<header class="showsg-h" data-group="collection" role="button" tabindex="0" aria-expanded="true"><span>COLLECTION</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
|
||
<div class="showsg-b">
|
||
<ul id="ct-checks" class="showschecks showschecks--flat">
|
||
<li><label><input type="checkbox" value="rtw" /> <span>Ready-to-Wear</span></label></li>
|
||
<li><label><input type="checkbox" value="menswear" /> <span>Menswear</span></label></li>
|
||
<li><label><input type="checkbox" value="couture" /> <span>Couture</span></label></li>
|
||
<li><label><input type="checkbox" value="resort" /> <span>Resort</span></label></li>
|
||
<li><label><input type="checkbox" value="pre_fall" /> <span>Pre-Fall</span></label></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Season - 多选复选框 -->
|
||
<section class="showsg">
|
||
<header class="showsg-h" data-group="season" role="button" tabindex="0" aria-expanded="true"><span>SEASON</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
|
||
<div class="showsg-b">
|
||
<ul id="season-checks" class="showschecks showschecks--flat">
|
||
<li><label><input type="checkbox" value="spring" /> <span>Spring / Summer</span></label></li>
|
||
<li><label><input type="checkbox" value="fall" /> <span>Fall / Winter</span></label></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Year - 多选复选框 -->
|
||
<section class="showsg">
|
||
<header class="showsg-h" data-group="year" role="button" tabindex="0" aria-expanded="true"><span>YEAR</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
|
||
<div class="showsg-b">
|
||
<ul id="year-checks" class="showschecks showschecks--flat">
|
||
{yearChips.map((y) => (
|
||
<li><label><input type="checkbox" value={String(y)} /> <span>{y}</span></label></li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<button id="showsclear" class="showsclear" type="button">Clear all ×</button>
|
||
|
||
</div><!-- /.showsaside-body -->
|
||
</aside>
|
||
|
||
<!-- MAIN grid -->
|
||
<main class="showsmain">
|
||
<div id="showsgrid" class="showsgrid">
|
||
<!-- Skeletons 占位：避免 dev SSR 时空白闪烁 -->
|
||
{Array.from({ length: 12 }, () => (
|
||
<div class="showscard showscard--skel">
|
||
<div class="showscard-left">
|
||
<div class="showscard-img"></div>
|
||
</div>
|
||
<div class="showscard-right">
|
||
<div class="showscard-info">
|
||
<div class="showsline" style="height:40px;margin:0"></div>
|
||
<div class="showsline short" style="height:14px;margin:12px 0 0"></div>
|
||
<div class="showsline" style="height:34px;margin:14px 0 0"></div>
|
||
</div>
|
||
<div class="showscard-strip">
|
||
<div class="showscard-thumb"></div>
|
||
<div class="showscard-thumb"></div>
|
||
<div class="showscard-thumb"></div>
|
||
<div class="showscard-thumb"></div>
|
||
<div class="showscard-thumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div class="showsloadmore-wrap">
|
||
<button id="showsloadmore" class="showsloadmore" type="button">Load More ↓</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
|
||
<!-- 注入 SSR 期品牌数据：避免 client-side 再发一次请求 -->
|
||
<script id="showsbrands-data" type="application/json" set:html={JSON.stringify(sidebarBrands)}></script>
|
||
|
||
<style is:global>
|
||
@reference "tailwindcss";
|
||
|
||
.showsroot {
|
||
max-width: 1480px;
|
||
/* margin: auto; */
|
||
padding-top: 28px;
|
||
/* font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); */
|
||
color: #0a0a0a;
|
||
}
|
||
|
||
/* ---------- 顶部眉头 ---------- */
|
||
.showshead {
|
||
display: flex; justify-content: space-between; align-items: flex-end;
|
||
gap: 24px; padding: 22px 0 26px; border-bottom: 2px solid #000;
|
||
}
|
||
.showskicker {
|
||
display: inline-block;
|
||
font-family: var(--font-mono, ui-monospace, monospace);
|
||
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
|
||
color: #000; margin-bottom: 10px;
|
||
}
|
||
.showsh1 {
|
||
font-family: var(--font-serif, ui-serif, Georgia, serif);
|
||
font-size: clamp(40px, 6vw, 72px); line-height: .9; font-weight: 900;
|
||
letter-spacing: -.02em; margin: 0 0 10px;
|
||
}
|
||
.showscount-label {
|
||
font-family: var(--font-mono, ui-monospace, monospace);
|
||
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
|
||
color: #000; font-weight: 700; margin-right: 4px;
|
||
}
|
||
.showssortwrap {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
font-family: var(--font-mono, ui-monospace, monospace);
|
||
font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #000;
|
||
}
|
||
.showssort {
|
||
appearance: none; -webkit-appearance: none;
|
||
border: 1.5px solid #000; background: #fff; color: #000;
|
||
font-family: inherit; font-size: 11px; letter-spacing: .14em;
|
||
text-transform: uppercase; padding: 10px 32px 10px 14px;
|
||
cursor: pointer; border-radius: 0;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23000' fill='none' stroke-width='1.4'/></svg>");
|
||
background-repeat: no-repeat; background-position: right 10px center;
|
||
}
|
||
|
||
/* ---------- 已激活筛选 pills ---------- */
|
||
.showspills {
|
||
display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 0;
|
||
}
|
||
.showspill {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
border: 1.5px solid #000; padding: 6px 10px;
|
||
font-family: var(--font-mono, monospace); font-size: 10.5px;
|
||
text-transform: uppercase; letter-spacing: .14em; color: #000; background: #fff;
|
||
}
|
||
.showspill .x {
|
||
display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center;
|
||
border: none; background: #000; color: #fff; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1;
|
||
}
|
||
|
||
/* ---------- 主体：sidebar + grid ---------- */
|
||
.showsbody {
|
||
display: flex; gap: 36px;
|
||
align-items: flex-start;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.showsbody { flex-direction: column; gap: 18px; }
|
||
.showsaside { position: static !important; max-height: none !important; width: 100% !important; }
|
||
}
|
||
|
||
/* ---------- LEFT SIDEBAR（可折叠） ---------- */
|
||
.showsaside {
|
||
flex: 0 0 240px;
|
||
/* border: 1.5px solid #000; */
|
||
background: #fff;
|
||
position: sticky; top: 20px;
|
||
max-height: calc(100vh - 40px);
|
||
border-radius: 0;
|
||
transition: flex-basis .25s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
html.showsaside-collapsed .showsaside {
|
||
flex: 0 0 44px;
|
||
}
|
||
html.showsaside-collapsed .showsaside-body { display: none; }
|
||
|
||
.showsaside-head {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 14px 14px 12px;
|
||
border-bottom: 1px solid #000;
|
||
flex-shrink: 0;
|
||
}
|
||
.showsaside-h {
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
|
||
font-weight: 700; margin: 0; line-height: 1;
|
||
}
|
||
html.showsaside-collapsed .showsaside-h {
|
||
opacity: 0; pointer-events: none;
|
||
width: 0; overflow: hidden;
|
||
}
|
||
.showsaside-toggle {
|
||
appearance: none; -webkit-appearance: none;
|
||
background: #fff; border: 1.5px solid #000;
|
||
width: 22px; height: 22px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
cursor: pointer; border-radius: 0;
|
||
color: #000; padding: 0;
|
||
transition: transform .25s ease;
|
||
}
|
||
.showsaside-toggle:hover { background: #000; color: #fff; }
|
||
html.showsaside-collapsed .showsaside-toggle {
|
||
margin-left: auto;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.showsaside-body {
|
||
padding: 14px 14px 18px;
|
||
overflow-y: auto;
|
||
scrollbar-width: thin; scrollbar-color: #ccc #fff;
|
||
flex: 1; min-height: 0;
|
||
}
|
||
.showsaside-body::-webkit-scrollbar { width: 6px; }
|
||
.showsaside-body::-webkit-scrollbar-thumb { background: #ccc; }
|
||
|
||
.showsg { border-top: 1px solid #e6e6e6; padding: 12px 0 6px; }
|
||
.showsg:first-of-type { border-top: none; padding-top: 4px; }
|
||
.showsg-h {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
|
||
font-weight: 700; color: #000; margin-bottom: 8px;
|
||
cursor: pointer; user-select: none;
|
||
}
|
||
.showsg-h:hover { color: #000; }
|
||
.showsg-right { display: inline-flex; align-items: center; gap: 10px; }
|
||
.showsg-chev {
|
||
display: inline-block; font-size: 9px; line-height: 1; color: #999;
|
||
transition: transform .2s ease; margin-left: 4px;
|
||
}
|
||
.showsg.is-collapsed .showsg-chev { transform: rotate(-90deg); }
|
||
.showsg.is-collapsed .showsg-b { display: none; }
|
||
.showsg-count {
|
||
color: #999; font-weight: 400;
|
||
font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .14em;
|
||
}
|
||
|
||
.showssearch {
|
||
width: 100%; border: 1px solid #d4d4d4; padding: 7px 10px;
|
||
font-family: var(--font-mono, monospace); font-size: 11px;
|
||
text-transform: uppercase; letter-spacing: .08em; color: #000;
|
||
border-radius: 0; outline: none; background: #fafafa;
|
||
}
|
||
.showssearch:focus { border-color: #000; background: #fff; }
|
||
|
||
.showschecks { list-style: none; margin: 10px 0 0; padding: 0; max-height: 280px; overflow-y: auto; scrollbar-width: thin; }
|
||
.showschecks::-webkit-scrollbar { width: 4px; }
|
||
.showschecks::-webkit-scrollbar-thumb { background: #ddd; }
|
||
|
||
.showschecks li {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 5px 0;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
|
||
color: #000; cursor: pointer; user-select: none;
|
||
}
|
||
.showschecks li:hover { background: #f6f6f6; }
|
||
.showschecks li[data-letter] {
|
||
padding: 8px 0 3px; font-size: 10px; letter-spacing: .22em;
|
||
color: #8a8a8a; cursor: default; pointer-events: none;
|
||
border-top: 1px dotted #e6e6e6;
|
||
}
|
||
.showschecks li[data-letter]:first-child { border-top: none; padding-top: 4px; }
|
||
.showschecks input[type="checkbox"] {
|
||
appearance: none; -webkit-appearance: none;
|
||
width: 12px; height: 12px; border: 1.5px solid #000;
|
||
background: #fff; cursor: pointer; flex-shrink: 0;
|
||
border-radius: 0; display: inline-grid; place-content: center;
|
||
}
|
||
.showschecks input[type="checkbox"]:checked { background: #000; }
|
||
.showschecks input[type="checkbox"]:checked::after {
|
||
content: ""; width: 6px; height: 6px; background: #fff;
|
||
}
|
||
.showschecks .ct { color: #999; font-size: 10px; margin-left: auto; }
|
||
|
||
/* 扁平复选框组（COLLECTION / SEASON / YEAR）：不按字母分组，更紧凑 */
|
||
.showschecks--flat li { padding: 4px 0; }
|
||
.showschecks--flat li label {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
cursor: pointer; width: 100%;
|
||
}
|
||
.showschecks--flat li:hover { background: #f6f6f6; }
|
||
.showschecks--flat li input[type="checkbox"] {
|
||
width: 13px; height: 13px;
|
||
}
|
||
|
||
.showsmore {
|
||
display: inline-block; margin-top: 10px;
|
||
font-family: var(--font-mono, monospace); font-size: 10.5px;
|
||
text-transform: uppercase; letter-spacing: .16em; color: #555;
|
||
cursor: pointer;
|
||
}
|
||
.showsmore:hover { color: #000; }
|
||
|
||
.showsclear {
|
||
margin-top: 18px; width: 100%;
|
||
border: 1.5px solid #000; background: #fff; color: #000;
|
||
padding: 11px 12px; font-family: var(--font-mono, monospace);
|
||
font-size: 11px; text-transform: uppercase; letter-spacing: .22em;
|
||
font-weight: 700; cursor: pointer; border-radius: 0;
|
||
transition: all .15s;
|
||
}
|
||
.showsclear:hover { background: #000; color: #fff; }
|
||
|
||
/* ---------- MAIN GRID ---------- */
|
||
.showsmain { flex: 1; min-width: 0; }
|
||
.showsgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 22px;
|
||
position: relative;
|
||
}
|
||
/* 切换筛选时的顶部加载进度条 */
|
||
.showsgrid.is-loading::before {
|
||
content: ""; position: absolute; top: -4px; left: 0; height: 2px; width: 38%;
|
||
background: #000; z-index: 5; animation: hbxProg 1s ease-in-out infinite;
|
||
}
|
||
@keyframes hbxProg {
|
||
0% { left: -38%; } 100% { left: 100%; }
|
||
}
|
||
@media (max-width: 560px) { .showsgrid { grid-template-columns: repeat(1, 1fr); } }
|
||
|
||
.showscard {
|
||
position: relative; display: flex; gap: 14px;
|
||
text-decoration: none; color: inherit;
|
||
background: #fff;
|
||
/* border: 1px solid #e6e6e6; */
|
||
padding: 12px;
|
||
transition: border-color .2s;
|
||
}
|
||
/* .showscard:hover { border-color: #000; } */
|
||
.showscard:hover .showscard-img img { transform: scale(1.04); }
|
||
|
||
/* 左：主图（窄，占 ~30%） */
|
||
.showscard-left {
|
||
flex: 0 0 30%;
|
||
min-width: 110px;
|
||
}
|
||
.showscard-img {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 3 / 4;
|
||
background: #f1f1f1;
|
||
overflow: hidden;
|
||
border-radius: 0;
|
||
}
|
||
.showscard-img img {
|
||
width: 100%; height: 100%; object-fit: cover;
|
||
transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
|
||
opacity: 0; /* 固定灰底占位：图片未加载时显示容器灰底，加载完成后淡入 */
|
||
}
|
||
.showscard-img img.is-loaded { opacity: 1; }
|
||
|
||
/* 图片加载中的小 spinner：灰底之上居中显示，加载完成/失败淡出 */
|
||
.showsspin {
|
||
position: absolute; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #bdbdbd; opacity: 1;
|
||
transition: opacity .3s ease; pointer-events: none; z-index: 2;
|
||
}
|
||
.showscard-img.is-loaded .showsspin,
|
||
.showscard-thumb.is-loaded .showsspin { opacity: 0; }
|
||
.showsspin svg { width: 22px; height: 22px; display: block; }
|
||
.showscard-thumb .showsspin svg { width: 15px; height: 15px; }
|
||
.showsspin .ring { transform-origin: 12px 12px; animation: hbxSpin .8s linear infinite; }
|
||
@keyframes hbxSpin { to { transform: rotate(360deg); } }
|
||
|
||
.showsbadge {
|
||
position: absolute; top: 6px; right: 6px;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
|
||
font-weight: 700; color: #fff; background: #000; padding: 3px 6px;
|
||
}
|
||
.showsflag-featured {
|
||
position: absolute; top: 6px; left: 6px;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
|
||
font-weight: 700; color: #000; background: #fff; padding: 3px 6px;
|
||
border: 1px solid #000;
|
||
}
|
||
|
||
/* 右列：上信息 + 下缩略图（缩略图位于主图右侧） */
|
||
.showscard-right {
|
||
flex: 1; min-width: 0;
|
||
display: flex; flex-direction: column;justify-content: space-between;
|
||
}
|
||
.showscard-info {
|
||
flex: 0 0 auto; min-width: 0;
|
||
display: flex; flex-direction: column;
|
||
padding: 2px 2px 0;
|
||
}
|
||
.showscard-title {
|
||
font-family: var(--font-serif, serif);
|
||
font-size: 15.5px; font-weight: 700; line-height: 1.32;
|
||
margin: 0 0 10px; color: #111;
|
||
letter-spacing: -.01em;
|
||
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||
}
|
||
.showscard-meta {
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 9.5px; color: #888;
|
||
margin: 0 0 14px; line-height: 1.55;
|
||
letter-spacing: .04em; text-transform: uppercase;
|
||
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||
}
|
||
.showscard-meta-foot {
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
}
|
||
.showscard-meta-line {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
|
||
color: #444;
|
||
}
|
||
.showscard-meta-line svg {
|
||
flex-shrink: 0; color: #888;
|
||
}
|
||
|
||
/* 右列底部：5 列缩略图条、最后一张叠加 N+ 角标（位于主图右侧，与样图一致） */
|
||
.showscard-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
.showscard-thumb {
|
||
position: relative;
|
||
aspect-ratio: 3 / 4;
|
||
background: #f1f1f1;
|
||
overflow: hidden;
|
||
}
|
||
.showscard-thumb img {
|
||
width: 100%; height: 100%; object-fit: cover;
|
||
opacity: 0;
|
||
transition: opacity .45s ease;
|
||
}
|
||
.showscard-thumb img.is-loaded { opacity: 1; }
|
||
.showscard-thumb.placeholder {
|
||
background: #f6f6f6;
|
||
}
|
||
.showscard-thumb-more {
|
||
position: absolute; inset: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
color: #fff;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 11px; font-weight: 700;
|
||
letter-spacing: .04em;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.showscard { flex-direction: column; gap: 10px; }
|
||
.showscard-left { flex: none; width: 100%; }
|
||
.showscard-right { width: 100%; }
|
||
}
|
||
|
||
/* skeleton */
|
||
.showscard--skel .showscard-img,
|
||
.showscard--skel .showscard-thumb,
|
||
.showscard--skel .showsline {
|
||
background: #efefef;
|
||
animation: hbxShim 1.6s ease infinite;
|
||
}
|
||
.showscard--skel .showscard-img { background: #efefef; }
|
||
.showscard--skel .showsline {
|
||
height: 10px; margin: 8px 0 0;
|
||
}
|
||
.showscard--skel .showsline.short { width: 60%; }
|
||
@keyframes hbxShim {
|
||
0% { opacity: .85; }
|
||
50% { opacity: .55; }
|
||
100% { opacity: .85; }
|
||
}
|
||
|
||
/* 加载更多 */
|
||
.showsloadmore-wrap { display: flex; justify-content: center; margin-top: 38px; }
|
||
.showsloadmore {
|
||
border: 1.5px solid #000; background: #fff; color: #000;
|
||
padding: 13px 36px;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 700;
|
||
cursor: pointer; border-radius: 0; transition: all .2s;
|
||
}
|
||
.showsloadmore:hover { background: #000; color: #fff; }
|
||
.showsloadmore[disabled] { opacity: .4; cursor: default; }
|
||
|
||
.showsempty {
|
||
grid-column: 1 / -1;
|
||
padding: 80px 20px; text-align: center;
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
|
||
color: #999;
|
||
border: 1px dashed #ccc;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import { getArticles, toAbs, type ArticleItem, type BrandEntry } from "../lib/api"
|
||
|
||
type Item = ArticleItem
|
||
|
||
const root = document.querySelector<HTMLElement>(".showsroot")
|
||
const grid = document.getElementById("showsgrid") as HTMLElement | null
|
||
const totalEl = document.getElementById("showstotal")
|
||
const brandCountEl = document.getElementById("brand-count")
|
||
const brandListEl = document.getElementById("brand-list")
|
||
const brandSearchEl = document.getElementById("brand-search") as HTMLInputElement | null
|
||
const brandShowMore = document.getElementById("brand-showmore") as HTMLElement | null
|
||
const pillsEl = document.getElementById("showspills")
|
||
const sortEl = document.getElementById("showssort") as HTMLSelectElement | null
|
||
const loadBtn = document.getElementById("showsloadmore") as HTMLButtonElement | null
|
||
const brandnEl = document.getElementById("showsbrandn")
|
||
|
||
// SSR 期注入的品牌清单（包含 article_count）
|
||
const brandsData: BrandEntry[] = (() => {
|
||
const node = document.getElementById("showsbrands-data")
|
||
if (!node?.textContent) return []
|
||
try { return JSON.parse(node.textContent) } catch { return [] }
|
||
})()
|
||
if (brandnEl) brandnEl.textContent = String(brandsData.length || 198)
|
||
|
||
// 筛选状态（COLLECTION / SEASON / YEAR 用 Set 实现多选）
|
||
const state = {
|
||
brand_ids: new Set<number>(),
|
||
ct: new Set<string>(),
|
||
season: new Set<string>(),
|
||
year: new Set<string>(),
|
||
sort: "newest",
|
||
page: 1,
|
||
size: 24,
|
||
total: 0,
|
||
brandsExpanded: false,
|
||
keyword: "",
|
||
}
|
||
|
||
// ============ 侧边栏：DESIGNERS 按字母分组 ============
|
||
const grouped = (() => {
|
||
const map = new Map<string, BrandEntry[]>()
|
||
for (const b of brandsData) {
|
||
const letter = (b.name[0] || "?").toUpperCase()
|
||
if (!map.has(letter)) map.set(letter, [])
|
||
map.get(letter)!.push(b)
|
||
}
|
||
return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
|
||
})()
|
||
|
||
const renderBrands = () => {
|
||
if (!brandListEl) return
|
||
brandListEl.innerHTML = ""
|
||
const frag = document.createDocumentFragment()
|
||
const kw = state.keyword
|
||
let shown = 0
|
||
const MAX_INITIAL = 60
|
||
let truncated = false
|
||
|
||
const appendBrand = (b: BrandEntry) => {
|
||
const li = document.createElement("li")
|
||
const cb = document.createElement("input")
|
||
cb.type = "checkbox"; cb.value = String(b.id)
|
||
cb.checked = state.brand_ids.has(b.id)
|
||
cb.addEventListener("change", () => {
|
||
cb.checked ? state.brand_ids.add(b.id) : state.brand_ids.delete(b.id)
|
||
syncPills()
|
||
loadPage(1)
|
||
})
|
||
const name = document.createElement("span"); name.textContent = b.name
|
||
const ct = document.createElement("span"); ct.className = "ct"; ct.textContent = b.article_count ? String(b.article_count) : ""
|
||
li.appendChild(cb); li.appendChild(name); li.appendChild(ct)
|
||
frag.appendChild(li)
|
||
shown++
|
||
}
|
||
|
||
if (kw) {
|
||
// 搜索模式：跨字母平铺所有匹配项（忽略 60 上限 / 字母分组）
|
||
for (const [, list] of grouped) {
|
||
for (const b of list) {
|
||
if (b.name.toLowerCase().includes(kw)) appendBrand(b)
|
||
}
|
||
}
|
||
} else {
|
||
for (const [letter, list] of grouped) {
|
||
if (!state.brandsExpanded && shown >= MAX_INITIAL) { truncated = true; break }
|
||
const h = document.createElement("li")
|
||
h.dataset.letter = letter
|
||
h.textContent = letter
|
||
frag.appendChild(h)
|
||
for (const b of list) {
|
||
if (!state.brandsExpanded && shown >= MAX_INITIAL) { truncated = true; break }
|
||
appendBrand(b)
|
||
}
|
||
}
|
||
}
|
||
brandListEl.appendChild(frag)
|
||
if (brandShowMore) brandShowMore.style.display = (truncated && !kw) ? "" : "none"
|
||
if (brandCountEl) brandCountEl.textContent = String(state.brand_ids.size)
|
||
}
|
||
|
||
if (brandShowMore) {
|
||
brandShowMore.addEventListener("click", () => {
|
||
state.brandsExpanded = !state.brandsExpanded
|
||
brandShowMore.textContent = state.brandsExpanded ? "Show fewer ▴" : `Show all ${brandsData.length} designers ▾`
|
||
renderBrands()
|
||
})
|
||
brandShowMore.textContent = `Show all ${brandsData.length} designers ▾`
|
||
}
|
||
|
||
if (brandSearchEl) {
|
||
let timer: number | undefined
|
||
brandSearchEl.addEventListener("input", () => {
|
||
window.clearTimeout(timer)
|
||
timer = window.setTimeout(() => {
|
||
state.keyword = brandSearchEl.value.trim().toLowerCase()
|
||
renderBrands()
|
||
}, 120)
|
||
})
|
||
}
|
||
|
||
// ============ 侧边栏整体折叠（localStorage 记住状态） ============
|
||
// 初始折叠状态已由页面顶部 <script is:inline> 同步到 <html> 根类，
|
||
// 在首屏绘制前生效，避免「先展开后折叠」的宽度闪动。此处只绑定切换。
|
||
const asideToggle = document.getElementById("showstoggle")
|
||
const lsKey = "showsaside-collapsed"
|
||
if (asideToggle) {
|
||
asideToggle.addEventListener("click", () => {
|
||
const collapsed = document.documentElement.classList.toggle("showsaside-collapsed")
|
||
try { localStorage.setItem(lsKey, collapsed ? "1" : "") } catch (e) {}
|
||
})
|
||
}
|
||
|
||
// ============ 每个筛选分组可上下折叠（accordion，localStorage 记忆） ============
|
||
document.querySelectorAll<HTMLElement>(".showsg-h[data-group]").forEach((h) => {
|
||
const key = "showsg-" + (h.dataset.group || "")
|
||
const g = h.closest(".showsg")
|
||
try { if (localStorage.getItem(key) === "1" && g) { g.classList.add("is-collapsed"); h.setAttribute("aria-expanded", "false") } } catch (e) {}
|
||
const toggle = () => {
|
||
if (!g) return
|
||
const collapsed = g.classList.toggle("is-collapsed")
|
||
h.setAttribute("aria-expanded", collapsed ? "false" : "true")
|
||
try { localStorage.setItem(key, collapsed ? "1" : "") } catch (e) {}
|
||
}
|
||
h.addEventListener("click", toggle)
|
||
h.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle() }
|
||
})
|
||
})
|
||
|
||
// ============ 侧边栏多选复选框组：COLLECTION / SEASON / YEAR ============
|
||
// 用一组扁平复选框代替旧 chip。每个 input.change 写入对应的 Set，立即刷新数据。
|
||
const wireCheckboxGroup = (
|
||
set: Set<string>,
|
||
containerId: string,
|
||
onChange: () => void
|
||
) => {
|
||
const container = document.getElementById(containerId)
|
||
if (!container) return
|
||
container.querySelectorAll<HTMLInputElement>("input[type=checkbox]").forEach((cb) => {
|
||
cb.addEventListener("change", () => {
|
||
cb.checked ? set.add(cb.value) : set.delete(cb.value)
|
||
onChange()
|
||
})
|
||
})
|
||
}
|
||
wireCheckboxGroup(state.ct, "ct-checks", refreshAfterFilter)
|
||
wireCheckboxGroup(state.season, "season-checks", refreshAfterFilter)
|
||
wireCheckboxGroup(state.year, "year-checks", refreshAfterFilter)
|
||
|
||
function refreshAfterFilter() {
|
||
syncPills()
|
||
loadPage(1)
|
||
}
|
||
|
||
// ============ 排序 ============
|
||
if (sortEl) {
|
||
sortEl.addEventListener("change", () => {
|
||
state.sort = sortEl.value
|
||
syncPills()
|
||
loadPage(1)
|
||
})
|
||
}
|
||
|
||
// ============ Pills：已激活筛选清单 ============
|
||
const syncPills = () => {
|
||
if (!pillsEl) return
|
||
const list: { label: string; clear: () => void }[] = []
|
||
if (state.brand_ids.size) {
|
||
const idArr = [...state.brand_ids]
|
||
const labels = idArr.map((id) => brandsData.find((b) => b.id === id)?.name ?? `#${id}`).slice(0, 4)
|
||
const more = idArr.length > 4 ? ` +${idArr.length - 4}` : ""
|
||
list.push({
|
||
label: "DESIGNER · " + labels.join(", ") + more,
|
||
clear: () => { state.brand_ids.clear(); renderBrands(); }
|
||
})
|
||
}
|
||
if (state.ct.size) list.push({
|
||
label: "COLLECTION · " + [...state.ct].join("+").toUpperCase(),
|
||
clear: () => { state.ct.clear(); syncCheckboxGroup("ct-checks"); }
|
||
})
|
||
if (state.season.size) list.push({
|
||
label: "SEASON · " + [...state.season].join("+").toUpperCase(),
|
||
clear: () => { state.season.clear(); syncCheckboxGroup("season-checks"); }
|
||
})
|
||
if (state.year.size) list.push({
|
||
label: "YEAR · " + [...state.year].sort().join("+"),
|
||
clear: () => { state.year.clear(); syncCheckboxGroup("year-checks"); }
|
||
})
|
||
if (state.sort !== "newest") list.push({
|
||
label: "SORT · " + state.sort.replace("_", " ").toUpperCase(),
|
||
clear: () => { state.sort = "newest"; if (sortEl) sortEl.value = "newest" }
|
||
})
|
||
|
||
if (!list.length) { pillsEl.hidden = true; pillsEl.innerHTML = ""; return }
|
||
pillsEl.hidden = false
|
||
pillsEl.innerHTML = list.map((p, i) => `<span class="showspill" data-i="${i}">${p.label}<button class="x" type="button">×</button></span>`).join("")
|
||
pillsEl.querySelectorAll<HTMLElement>(".showspill").forEach((pill) => {
|
||
pill.querySelector(".x")?.addEventListener("click", () => {
|
||
const i = Number(pill.dataset.i)
|
||
list[i]?.clear()
|
||
syncPills()
|
||
loadPage(1)
|
||
})
|
||
})
|
||
if (brandCountEl) brandCountEl.textContent = String(state.brand_ids.size)
|
||
}
|
||
const syncCheckboxGroup = (containerId: string) => {
|
||
document.getElementById(containerId)?.querySelectorAll<HTMLInputElement>("input[type=checkbox]").forEach((cb) => { cb.checked = false })
|
||
}
|
||
|
||
// Clear all
|
||
document.getElementById("showsclear")?.addEventListener("click", () => {
|
||
state.brand_ids.clear()
|
||
state.ct.clear(); state.season.clear(); state.year.clear()
|
||
state.sort = "newest"
|
||
state.keyword = ""
|
||
if (brandSearchEl) brandSearchEl.value = ""
|
||
syncCheckboxGroup("ct-checks")
|
||
syncCheckboxGroup("season-checks")
|
||
syncCheckboxGroup("year-checks")
|
||
if (sortEl) sortEl.value = "newest"
|
||
renderBrands()
|
||
syncPills()
|
||
loadPage(1)
|
||
})
|
||
|
||
// ============ 卡片渲染（左大图 + 右上文字 + 下 5 张缩略图条） ============
|
||
const ICON_USER = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><circle cx="6" cy="4" r="2" stroke="currentColor" fill="none" stroke-width="1"/><path d="M2 10c0-2 1.8-3 4-3s4 1 4 3" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
|
||
const ICON_DATE = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><rect x="2" y="3" width="8" height="7" stroke="currentColor" fill="none" stroke-width="1"/><path d="M2 6h8M4 2v2M8 2v2" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
|
||
const ICON_CAM = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><rect x="1.5" y="3.5" width="9" height="6" stroke="currentColor" fill="none" stroke-width="1"/><circle cx="6" cy="6.5" r="1.8" stroke="currentColor" fill="none" stroke-width="1"/><path d="M4 3.5l1-1.2h2l1 1.2" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
|
||
// 加载中 spinner：细线旋转环 + 中心静态相机小图标（灰调，HBX 编辑风）
|
||
const SPIN_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<g class="ring" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="40 22">
|
||
<circle cx="12" cy="12" r="9"></circle>
|
||
</g>
|
||
<g opacity="0.55" fill="none" stroke="currentColor" stroke-width="1">
|
||
<rect x="8" y="9.6" width="8" height="5.4"></rect>
|
||
<circle cx="12" cy="12.3" r="1.6"></circle>
|
||
</g>
|
||
</svg>`
|
||
const fmtDate = (ts: number) => {
|
||
if (!ts) return ""
|
||
const d = new Date(ts * 1000)
|
||
const mm = String(d.getMonth() + 1).padStart(2, "0")
|
||
const dd = String(d.getDate()).padStart(2, "0")
|
||
return `${d.getFullYear()}-${mm}-${dd}`
|
||
}
|
||
const ctLabel = (ct?: string) => {
|
||
const map: Record<string, string> = {
|
||
rtw: "Ready-to-Wear", menswear: "Menswear", couture: "Couture",
|
||
resort: "Resort", pre_fall: "Pre-Fall",
|
||
}
|
||
return ct && map[ct] ? map[ct] : (ct || "")
|
||
}
|
||
|
||
const cardHtml = (it: Item) => {
|
||
const code = it.season_code || String(it.year || "")
|
||
const gallery = it.gallery || []
|
||
const totalCount = it.image_count || 0
|
||
// 角标：总数 > 30 一律 30+，否则展示 N+（即使 N<=5 也展示，保持与样图 5 槽位+末张叠加的视觉一致）
|
||
const moreLabel = totalCount > 30 ? "30+" : `${totalCount || 0}+`
|
||
|
||
// 永远渲染 5 个缩略图槽位（HBX 视觉一致性，不够补 .placeholder）
|
||
const SLOTS = 5
|
||
const slots: string[] = []
|
||
for (let i = 0; i < SLOTS; i++) {
|
||
const src = gallery[i]
|
||
const isLast = i === SLOTS - 1
|
||
if (src) {
|
||
slots.push(`<div class="showscard-thumb"><span class="showsspin" aria-hidden="true">${SPIN_SVG}</span><img src="${toAbs(src)}" alt="" loading="lazy" />${isLast && totalCount > 0 ? `<span class="showscard-thumb-more">${moreLabel}</span>` : ""}</div>`)
|
||
} else {
|
||
slots.push(`<div class="showscard-thumb placeholder">${isLast && totalCount > 0 ? `<span class="showscard-thumb-more">${moreLabel}</span>` : ""}</div>`)
|
||
}
|
||
}
|
||
|
||
const isNew = (Date.now() / 1000 - Number(it.published_at || 0) < 60 * 60 * 24 * 14)
|
||
const isFeatured = it.image_count > 70
|
||
|
||
return `
|
||
<a class="showscard" href="/article?id=${it.id}" aria-label="${it.brand_name} ${it.title}">
|
||
<div class="showscard-left">
|
||
<div class="showscard-img">
|
||
${isFeatured ? '<span class="showsflag-featured">Featured</span>' : ""}
|
||
<span class="showsspin" aria-hidden="true">${SPIN_SVG}</span>
|
||
<img src="${toAbs(it.cover)}" alt="${it.title}" loading="lazy" />
|
||
${isNew ? '<span class="showsbadge">New Added</span>' : ""}
|
||
</div>
|
||
</div>
|
||
<div class="showscard-right">
|
||
<div class="showscard-info">
|
||
<h3 class="showscard-title">${it.title}</h3>
|
||
<p class="showscard-meta">${code} · ${ctLabel(it.collection_type)} · ${it.brand_name}</p>
|
||
<div class="showscard-meta-foot">
|
||
<span class="showscard-meta-line">${ICON_USER}${it.brand_name}</span>
|
||
<span class="showscard-meta-line">${ICON_DATE}${fmtDate(it.published_at)}</span>
|
||
</div>
|
||
</div>
|
||
<div class="showscard-strip">${slots.join("")}</div>
|
||
</div>
|
||
</a>`
|
||
}
|
||
|
||
// 图片淡入 + spinner：网络图加载完成前显示容器灰底占位与居中 spinner，
|
||
// 加载完淡入图片并淡出 spinner，消除硬切换跳变
|
||
const revealImages = (root: ParentNode = document) => {
|
||
const imgs = root.querySelectorAll<HTMLImageElement>(".showscard-img img, .showscard-thumb img")
|
||
imgs.forEach((img) => {
|
||
if (img.classList.contains("is-loaded")) return
|
||
const wrap = img.closest(".showscard-img, .showscard-thumb")
|
||
const done = () => { img.classList.add("is-loaded"); wrap?.classList.add("is-loaded") }
|
||
if (img.complete && img.naturalWidth > 0) {
|
||
done()
|
||
} else {
|
||
img.addEventListener("load", done, { once: true })
|
||
// 加载失败：隐藏 img，保留容器灰底占位，并淡出 spinner
|
||
img.addEventListener("error", () => { img.style.display = "none"; wrap?.classList.add("is-loaded") }, { once: true })
|
||
}
|
||
})
|
||
}
|
||
|
||
const renderItems = (items: Item[], append: boolean) => {
|
||
if (!grid) return
|
||
if (!append) {
|
||
grid.innerHTML = ""
|
||
}
|
||
if (!items.length && !append) {
|
||
grid.innerHTML = `<div class="showsempty">No shows match the current filters · 暂无符合条件的秀场</div>`
|
||
return
|
||
}
|
||
grid.insertAdjacentHTML("beforeend", items.map(cardHtml).join(""))
|
||
revealImages(grid)
|
||
}
|
||
|
||
// ============ 拉数（统一走 src/lib/api 的 getArticles） ============
|
||
|
||
// 筛选/翻页时的骨架占位
|
||
const skeletonHtml = (n: number) => Array.from({ length: n }, () => `
|
||
<div class="showscard showscard--skel">
|
||
<div class="showscard-left">
|
||
<div class="showscard-img"></div>
|
||
</div>
|
||
<div class="showscard-right">
|
||
<div class="showscard-info">
|
||
<div class="showsline" style="height:40px;margin:0"></div>
|
||
<div class="showsline short" style="height:14px;margin:12px 0 0"></div>
|
||
<div class="showsline" style="height:34px;margin:14px 0 0"></div>
|
||
</div>
|
||
<div class="showscard-strip">
|
||
<div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>`).join("")
|
||
|
||
// 请求令牌：避免快速切换筛选时旧响应覆盖新结果
|
||
let reqToken = 0
|
||
|
||
const loadPage = async (page: number, append = false) => {
|
||
const myToken = ++reqToken
|
||
try {
|
||
if (loadBtn && append) { loadBtn.textContent = "Loading…"; loadBtn.disabled = true }
|
||
// 切换筛选（非追加）时立即进入 loading 态：显示骨架 + 顶部进度条
|
||
if (!append && grid) {
|
||
grid.innerHTML = skeletonHtml(12)
|
||
grid.classList.add("is-loading")
|
||
}
|
||
const json = await getArticles({
|
||
page,
|
||
size: state.size,
|
||
sort: state.sort,
|
||
brand_ids: [...state.brand_ids],
|
||
collection_type: [...state.ct],
|
||
season: [...state.season],
|
||
year: [...state.year],
|
||
with_images: 6,
|
||
})
|
||
if (myToken !== reqToken) return // 已有更新的请求，丢弃本次结果
|
||
const rows: Item[] = json.data
|
||
state.total = json.total
|
||
state.page = page
|
||
grid?.classList.remove("is-loading")
|
||
renderItems(rows, append)
|
||
if (totalEl) totalEl.textContent = `${state.total || (grid?.querySelectorAll(".showscard").length ?? rows.length)} Shows`
|
||
const last = json.last_page
|
||
if (page >= last || rows.length < state.size) {
|
||
if (loadBtn) { loadBtn.textContent = "— End of Archive —"; loadBtn.disabled = true }
|
||
} else if (loadBtn) {
|
||
loadBtn.textContent = "Load More ↓"
|
||
loadBtn.disabled = false
|
||
}
|
||
} catch {
|
||
if (myToken !== reqToken) return
|
||
grid?.classList.remove("is-loading")
|
||
renderItems([], false)
|
||
if (totalEl) totalEl.textContent = "—"
|
||
if (loadBtn) { loadBtn.textContent = "Retry"; loadBtn.disabled = false }
|
||
}
|
||
}
|
||
|
||
if (loadBtn) loadBtn.addEventListener("click", () => loadPage(state.page + 1, true))
|
||
|
||
// 初次渲染
|
||
renderBrands()
|
||
revealImages(document) // 首屏 SSR 已渲染的卡片图片同样淡入
|
||
loadPage(1, false)
|
||
</script>
|
||
</content>
|