update

2026-08-26 19:42:10 +08:00
parent d64a046f82
commit eee2265e15
29 changed files with 337 additions and 2506 deletions
--- a/src/components/Index.astro
+++ b/src/components/Index.astro
@ -4,15 +4,15 @@ import ComingSoon from "@/components/ComingSoon.astro"
 import { toAbs } from "@/lib/api"
 import { getI18n } from "@/i18n/utils"
 import { href, ROUTES } from '@/lib/routes'
-import { getSsgPopularBrands } from "@/lib/api"
+import { getSsgIndexRunway } from "@/lib/api"

 // 国际化：一行取当前语言 + 翻译函数
 const { locale, t } = getI18n(Astro)

-// 首页「热门品牌」区块：构建期（SSG 内部接口，server-only）拉取 20 个热门品牌，
-// 封面/标题取自每个品牌代表走秀，直接烧入静态 HTML，运行期不再请求；后端不可达则静默留空（区块隐藏）。
-// 具体 base 地址 + token 拼接已在 @/lib/api 的 SSG 函数内封装。
-const popular = await getSsgPopularBrands(20)
+// 首页「热门品牌」区块：构建期走 SSG 内部接口 /api/v1/ssg/index/runway（server-only），
+// 首页 runway 数据含多模块，hotBrand 为其中之一；封面/标题取自每个品牌代表走秀，
+// 直接烧入静态 HTML，运行期不再请求；后端不可达则静默留空（区块隐藏）。
+const popular = (await getSsgIndexRunway()).hotBrand

 type GalleryItem = {
  src: string
--- a/src/components/RunwayLooks.astro
+++ b/src/components/RunwayLooks.astro
@ -1,20 +1,14 @@
 ---
 import Breadcrumb from "@/components/Breadcrumb.astro"
-import { getBrands, getSsgPopularBrands, type BrandEntry } from "@/lib/api"
+import { getSsgHotBrands } from "@/lib/api"
 import { getI18n } from '@/i18n/utils'


 const { locale, t, getRelativeLocaleUrl } = getI18n(Astro)

-let sidebarBrands: BrandEntry[] = []
-
-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 {}
-
-// 热门品牌：构建期走 SSG 内部接口（/api/ssg/brands/popular），不可用时回落假数据先看效果
+// 热门品牌：走 SSG 专属接口 /api/v1/ssg/brands/hot，后端固定返回热度前 30 个、按热度顺序排列。
+// 侧栏 filter 展示前 10 个（模板内 slice(0,10)），品牌弹窗 HOT 标签展示全部 30 个。
+// 接口不可用时回落假数据先看效果。
 const FAKE_HOT_BRANDS = [
  { id: "hot-chanel", name: "Chanel", article_count: 342 },
  { id: "hot-dior", name: "Dior", article_count: 318 },
@ -31,8 +25,9 @@ const FAKE_HOT_BRANDS = [
 ]
 let hotBrands: { id: string; name: string; article_count: number }[] = []
 try {
-  const ssg = await getSsgPopularBrands(12)
-  if (ssg.length) hotBrands = ssg.map((b) => ({ id: String(b.id), name: b.brand || "", article_count: 0 }))
+  hotBrands = (await getSsgHotBrands())
+    .filter((b) => b.id && b.name)
+    .map((b) => ({ id: String(b.id), name: b.name, article_count: b.article_count }))
 } catch {}
 if (!hotBrands.length) hotBrands = FAKE_HOT_BRANDS

@ -284,7 +279,7 @@ const seasonOptions: { value: string; label: string }[] = [
                    :disabled="!modalSelected.includes(b.id) && modalMaxReached"
                    @change="toggleModalBrand(b.id)"
                    />
-                    <span class="showsmodal-name" x-text="b.name"></span>
+                    <span class="showsmodal-name" x-text="b.display || b.name"></span>
                    <span class="showsmodal-ct" x-text="b.article_count ? b.article_count : ''"></span>
                </label>
                </li>
@ -302,7 +297,6 @@ const seasonOptions: { value: string; label: string }[] = [
 </div>


-<script id="showsbrands-data" type="application/json" set:html={JSON.stringify(sidebarBrands)}></script>
 <script id="showshotbrands-data" type="application/json" set:html={JSON.stringify(hotBrands)}></script>

 <style>
@ -609,14 +603,11 @@ const seasonOptions: { value: string; label: string }[] = [

  document.addEventListener("alpine:init", () => {
    Alpine.data("showsPage", () => {
-      const node = document.getElementById("showsbrands-data")
-      const allBrands: BrandEntry[] = node?.textContent ? JSON.parse(node.textContent) : []
      const hotNode = document.getElementById("showshotbrands-data")
      const hotBrands = hotNode?.textContent ? JSON.parse(hotNode.textContent) : []

      return {
        locale: '',
-        allBrands,
        hotBrands,
        SPIN_SVG,
        collapsedGroups: {
@ -629,7 +620,6 @@ const seasonOptions: { value: string; label: string }[] = [
        selectedCt: [] as string[],
        selectedSeason: [] as string[],
        selectedYear: [] as string[],
-        brandsExpanded: false,

        // 品牌筛选弹窗状态
        modalOpen: false,
@ -656,35 +646,6 @@ const seasonOptions: { value: string; label: string }[] = [
          this.loadPage(1, false)
        },

-        // 计算属性：侧边栏设计师列表的分组渲染
-        get visibleBrandItems() {
-          const result: any[] = []
-          const map = new Map<string, BrandEntry[]>()
-          for (const b of this.allBrands) {
-            const letter = (b.name[0] || "?").toUpperCase()
-            if (!map.has(letter)) map.set(letter, [])
-            map.get(letter)!.push(b)
-          }
-          const grouped = [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
-
-          let shown = 0
-          const MAX_INITIAL = 60
-          for (const [letter, list] of grouped) {
-            if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-            result.push({ type: "letter", letter, key: `letter-${letter}` })
-            for (const b of list) {
-              if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-              result.push({ type: "brand", id: b.id, name: b.name, count: b.article_count, key: b.id })
-              shown++
-            }
-          }
-          return result
-        },
-
-        get hasMoreBrands() {
-          return this.allBrands.length > 60
-        },
-
        // 骨架屏数量与首屏 data 数量一致，保证「加载中」与「数据完成」两阶段的网格高度相同，消除抖动
        get skeletonCount() {
          return this.size
@ -694,7 +655,7 @@ const seasonOptions: { value: string; label: string }[] = [
        get pills() {
          const list: { label: string; clear: () => void }[] = []
          if (this.selectedBrands.length) {
-            const findName = (id: any) => this.allBrands.find((b) => b.id === id)?.name ?? this.hotBrands.find((b) => b.id === id)?.name ?? `#${id}`
+            const findName = (id: any) => this.hotBrands.find((b) => b.id === id)?.name ?? this.modalResults.find((b) => b.id === id)?.name ?? `#${id}`
            const labels = this.selectedBrands
              .map((id) => findName(id))
              .slice(0, 4)
@ -755,9 +716,9 @@ const seasonOptions: { value: string; label: string }[] = [
          this.modalLetter = "HOT"
          this.modalOpen = true
          // 锁根滚动并补偿滚动条宽度，避免背景页面横向偏移
-          const sbw = window.innerWidth - document.documentElement.clientWidth
-          document.documentElement.style.overflow = "hidden"
-          if (sbw > 0) document.documentElement.style.paddingRight = sbw + "px"
+          // const sbw = window.innerWidth - document.documentElement.clientWidth
+          // document.documentElement.style.overflow = "hidden"
+          // if (sbw > 0) document.documentElement.style.paddingRight = sbw + "px"
          await this.modalLoadHot()
        },
        closeBrandModal() {
@ -769,9 +730,7 @@ const seasonOptions: { value: string; label: string }[] = [
          this.modalLetter = "HOT"
          this.modalLoading = true
          try {
-            this.modalResults = this.hotBrands.length
-              ? this.hotBrands.map((b) => ({ id: b.id, name: b.name, article_count: b.article_count || 0 }))
-              : this.allBrands.slice(0, 50)
+            this.modalResults = this.hotBrands.map((b) => ({ id: b.id, name: b.name, article_count: b.article_count || 0 }))
          } finally {
            this.modalLoading = false
          }
--- a/src/components/pages/AuthForm.astro
+++ b/src/components/pages/AuthForm.astro
@ -230,7 +230,7 @@ const registerHref = href(locale, ROUTES.register)
      }

      try {
-        const endpoint = mode === "login" ? "/api/auth/login" : "/api/auth/register"
+        const endpoint = mode === "login" ? "/api/v1/auth/login" : "/api/v1/auth/register"
        const res = await fetch(endpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
--- a/src/components/pages/brands.astro
+++ b/src/components/pages/brands.astro
@ -1,240 +0,0 @@
---
-import { getSsgBrands, type SsgBrand } from "@/lib/api"
-import { getI18n } from "@/i18n/utils"
-import { href, ROUTES } from "@/lib/routes"
-
-type Brand = SsgBrand
-
-// 品牌索引页（HBX 风格：每个字母一行，品牌名横向展开）
-// - 数据：一次 SSR 拉完全部精选集合，前端按 name 首字母分桶渲染；数据量小，无需懒加载。
-// - 风格：极简编辑风（黑白 + monospace + 细线）。
-//        · 顶部单行 BRANDS 标题 + 总数
-//        · sticky A-Z 字母条（点击平滑滚动）
-//        · 每个字母一行：左侧字母标签 + 右侧该字母下品牌名横向铺成多列
-//        · 无副标题、无数字 badge、无大字标题、无悬停黑底、无搜索框
-// 构建期 SSR 拉数据走 SSG 内部接口 /api/ssg/brands（不对外暴露，位于独立内部端口 8091）；
-// base 地址 + token 拼接已在 @/lib/api 的 SSG 函数内封装。后端不可达则回落空数组（页面显示空索引）。
-const { locale } = getI18n(Astro)
-const brands = await getSsgBrands({ size: 300, only_with_articles: 1, featured: 1 })
-const loadError = brands.length === 0
-
-const LETTERS = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
-
-// 主显示名：拉丁/英文名优先（用于 A-Z 归类与展示），无拉丁名时回退中文
-const primaryName = (b: Brand): string => {
-  const name = (b.name || "").trim()
-  const show = (b.show_name || "").trim()
-  if (/^[A-Za-z]/.test(name)) return name
-  if (show) {
-    const segs = show.split("/")
-    const lat = segs.find((s) => /^[A-Za-z]/.test(s.trim()))
-    if (lat) return lat.trim()
-  }
-  return name || show || "Unnamed"
-}
-
-// 按首字母归类到 A-Z（中文/符号开头的品牌不再单独成桶，直接忽略）
-type Bucket = Record<string, Brand[]>
-const buckets: Bucket = {}
-LETTERS.forEach((l) => (buckets[l] = []))
-
-for (const b of brands) {
-  const p = primaryName(b)
-  const first = (p[0] || "").toUpperCase()
-  if (first >= "A" && first <= "Z") buckets[first].push(b)
-}
-
-// 按字母顺序输出行
-const orderedColumns: { key: string; label: string; items: Brand[] }[] = []
-LETTERS.forEach((l) => {
-  if (buckets[l].length > 0) orderedColumns.push({ key: l, label: l, items: buckets[l] })
-})
-
-const total = orderedColumns.reduce((s, c) => s + c.items.length, 0)
---
-
-  <div class="brands" id="top">
-    <!-- 页头：单行 BRANDS 标题 + 总数 -->
-    <header class="brands-head">
-      <h1 class="brands-title">
-        <span class="brands-mark">Brands</span>
-        <span class="brands-count">{total.toLocaleString()}</span>
-      </h1>
-    </header>
-
-    <!-- A-Z 字母 tabbar（sticky 顶部） -->
-    <nav class="azbar" id="azbar" aria-label="Brand index by letter">
-      <div class="azbar-inner">
-        <a href="#top" class="azbar-logo" id="az-all">All</a>
-        <ol class="azbar-letters" id="azbar-letters">
-          {LETTERS.map((l) => (
-            <li>
-              <a
-                href={`#letter-${l}`}
-                class="az-letter"
-                data-letter={l}
-                data-empty={buckets[l].length > 0 ? "false" : "true"}
-              >{l}</a>
-            </li>
-          ))}
-        </ol>
-      </div>
-    </nav>
-
-    <!-- 每个字母一行：字母标签 + 品牌名横向铺成多列 -->
-    <main class="brands-main">
-      {loadError ? (
-        <p class="brands-error">Failed to load brands. Please try again later.</p>
-      ) : total === 0 ? (
-        <p class="brands-error">No brands indexed yet.</p>
-      ) : (
-        <div class="brows">
-          {orderedColumns.map((col) => (
-            <section class="brow" id={`letter-${col.key}`} data-letter={col.key}>
-              <h2 class="brow-letter">{col.label}</h2>
-              <ul class="brow-items">
-                {col.items.map((b) => (
-                  <li>
-                    <a href={href(locale, ROUTES.articlesByBrand(b.id))}>{primaryName(b)}</a>
-                  </li>
-                ))}
-              </ul>
-            </section>
-          ))}
-        </div>
-      )}
-    </main>
-  </div>
-
-<style is:global>
-  @reference "tailwindcss";
-
-  /* 布局容器 */
-  .brands { @apply max-w-[1440px] mx-auto; }
-
-  /* ---------- 页头：单行 ---------- */
-  .brands-head {
-    margin-top: clamp(48px, 8vw, 110px);
-    border-top: 1px solid #000;
-    padding-top: 18px;
-  }
-  .brands-title {
-    @apply flex items-baseline gap-[18px] mb-[14px] font-serif font-black leading-[0.9] tracking-[-0.02em];
-    margin-top: 0;
-    font-size: clamp(32px, 5vw, 56px);
-  }
-  .brands-mark { @apply text-black; }
-  .brands-count { @apply font-mono text-[12px] font-normal tracking-[0.06em] text-[#999]; }
-
-  /* ---------- A-Z Tabbar（sticky） ---------- */
-  .azbar {
-    position: sticky; top: 0; z-index: 30;
-    background: #fff;
-    border-bottom: 1px solid #000;
-    margin-top: 4px;
-  }
-  .azbar-inner { @apply flex items-center gap-[14px] py-[10px]; }
-  .azbar-logo {
-    @apply font-mono uppercase tracking-[0.18em] text-[11px] font-bold text-black shrink-0 px-[9px] py-[4px] no-underline hover:bg-black hover:text-white;
-  }
-  .azbar-logo.is-active { @apply bg-black text-white; }
-
-  .azbar-letters { @apply flex flex-wrap list-none flex-1; margin: 0; padding: 0; gap: 0; }
-  .az-letter {
-    @apply inline-flex items-center justify-center min-w-[22px] h-[24px] px-[5px] font-mono text-[11px] font-bold tracking-[0.04em] text-black no-underline hover:bg-black hover:text-white;
-  }
-  .az-letter[data-empty="true"] { @apply text-[#cfcfcf] cursor-not-allowed pointer-events-none; }
-  .az-letter.is-active { @apply bg-black text-white; }
-
-  @media (max-width: 768px) {
-    .azbar-inner { gap: 8px; padding: 8px 0; }
-    .azbar-letters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
-    .az-letter { min-width: 20px; height: 22px; font-size: 10px; flex-shrink: 0; }
-  }
-
-  /* ---------- 每个字母一行 ---------- */
-  .brands-main { @apply pt-[10px] pb-[80px]; }
-  .brands-error { @apply font-mono uppercase tracking-[0.15em] text-[11px] text-[#999] py-[60px]; }
-
-  .brows { @apply border-t border-black; }
-  .brow {
-    @apply grid gap-[20px] pt-[14px] pb-[18px] border-b border-[#ececec];
-    grid-template-columns: 48px 1fr;
-    scroll-margin-top: 70px;
-  }
-  .brow-letter { @apply font-mono uppercase tracking-[0.12em] text-[14px] font-bold text-black; margin: 0; }
-
-  .brow-items { @apply list-none grid; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); }
-  .brow-items li { @apply leading-[1.5] pl-[14px] pr-[16px] py-[3px] border-l border-[#ececec]; }
-  /* 每列首元素去掉左边线，避免与左侧字母标签粘连 */
-  .brow-items li:nth-child(4n+1) { border-left: none; padding-left: 0; }
-  .brow-items a {
-    @apply font-mono uppercase tracking-[0.05em] text-[12px] text-black no-underline inline-block py-[2px] hover:underline underline-offset-[3px];
-  }
-
-  @media (max-width: 1024px) {
-    .brow-items { grid-template-columns: repeat(3, 1fr); }
-    .brow-items li:nth-child(4n+1) { border-left: 1px solid #ececec; padding-left: 14px; }
-    .brow-items li:nth-child(3n+1) { border-left: none; padding-left: 0; }
-  }
-  @media (max-width: 768px) {
-    .brow { grid-template-columns: 36px 1fr; gap: 12px; }
-    .brow-letter { font-size: 13px; }
-    .brow-items { grid-template-columns: repeat(2, 1fr); }
-    .brow-items li:nth-child(3n+1) { border-left: 1px solid #ececec; padding-left: 14px; }
-    .brow-items li:nth-child(2n+1) { border-left: none; padding-left: 0; }
-  }
-  @media (max-width: 480px) {
-    .brow { grid-template-columns: 1fr; gap: 8px; }
-    .brow-letter { font-size: 15px; }
-    .brow-items { grid-template-columns: 1fr; }
-    .brow-items li { border-left: none !important; padding-left: 0 !important; }
-  }
-</style>
-
-<script>
-  // 字母点击平滑滚动 + 滚动高亮当前字母
-  const bar = document.getElementById("azbar")
-  const links = Array.from(document.querySelectorAll<HTMLAnchorElement>(".az-letter"))
-  const sections = Array.from(document.querySelectorAll<HTMLElement>(".brow"))
-  const linkByLetter = new Map(links.map((a) => [a.dataset.letter!, a]))
-  const sectionByLetter = new Map(sections.map((s) => [s.dataset.letter!, s]))
-  const barH = () => (bar ? bar.getBoundingClientRect().height + 10 : 70)
-
-  links.forEach((a) => {
-    a.addEventListener("click", (e) => {
-      if (a.dataset.empty === "true") { e.preventDefault(); return }
-      const l = a.dataset.letter
-      if (!l) return
-      e.preventDefault()
-      const target = sectionByLetter.get(l)
-      if (!target) return
-      const y = target.getBoundingClientRect().top + window.scrollY - barH()
-      window.scrollTo({ top: y, behavior: "smooth" })
-    })
-  })
-
-  const allLink = document.getElementById("az-all")
-  if (allLink) {
-    allLink.addEventListener("click", (e) => {
-      e.preventDefault()
-      window.scrollTo({ top: 0, behavior: "smooth" })
-    })
-  }
-
-  if ("IntersectionObserver" in window) {
-    const io = new IntersectionObserver(
-      (entries) => {
-        const visible = entries
-          .filter((e) => e.isIntersecting)
-          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
-        if (visible.length) {
-          const l = (visible[0].target as HTMLElement).dataset.letter
-          if (l) links.forEach((x) => x.classList.toggle("is-active", x.dataset.letter === l))
-        }
-      },
-      { rootMargin: "-90px 0px -60% 0px", threshold: 0 }
-    )
-    sections.forEach((s) => io.observe(s))
-  }
-</script>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -3,6 +3,7 @@ import '@/styles/global.css'
 import { href, ROUTES } from '@/lib/routes'
 import { getI18n } from '@/i18n/utils'
 import { LOCALES, LOCALE_NAMES } from '@/i18n/config'
+import { setApiLocale } from '@/lib/api'
 import { i18n } from 'astro:config/client';
 import { toCodes } from 'astro:i18n';

@ -13,6 +14,10 @@ const siteTitle = title ? `${title} — Portfolio Studio` : "Portfolio Studio"

 const { locale, t, getRelativeLocaleUrl } = getI18n(Astro)

+// 把当前语言注入 API 请求层：所有服务端（SSG/SSR）取数统一带上 ?locale=，
+// 后端据此选 *_en / *_cn 列。客户端 fetch 则自行按 URL path 推断，无需此处。
+setApiLocale(locale)
+
 // 经 data-* 属性把已翻译字符串传入打包型 <script>；define:vars 会让脚本变内联 classic，导致 import 报错，故改用 data 属性
 const hiLabel = t('Hi')
 const logoutLabel = t('Logout')
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@ -1,7 +1,7 @@
 // src/lib/api.ts — 后端 API 统一客户端（所有接口的唯一出入口）
 //
-// 集中封装全部 /api 调用：公开查询（/api/public/*）、账号体系（/api/auth/*）、
-// 以及构建期专用的 SSG 接口（/api/ssg/*，仅在 Node 构建期使用）。
+// 集中封装全部 /api/v1 调用：公开查询（/api/v1/public/*）、账号体系（/api/v1/auth/*）、
+// 以及构建期专用的 SSG 接口（/api/v1/ssg/*，仅在 Node 构建期使用）。
 // 任何模块需要后端数据，都只从这里取，不要再自己写 fetch。
 //
 // base URL 解析规则（全项目统一两个基准地址，命名见下）：
@ -18,6 +18,10 @@
 // 加载即安装全局 fetch 拦截器：把 API 请求/响应记录到调试日志（控制台/文件）。
 import "@/lib/http"

+// i18n：把"当前语言"透传到后端，让 /api 按 locale 选 *_en / *_cn 列。
+import { getLocaleFromUrl } from "@/i18n/utils"
+import { DEFAULT_LOCALE } from "@/i18n/config"
+
 // 公开/运行期基址 BASE_API：Astro 7 中声明在 env.schema（access:public）的变量，
 // 浏览器端须从 astro:env/client 读取（不会像 PUBLIC_ 前缀那样自动进 import.meta.env）。
 // 该模块在 SSR（服务端）也会回退到 process.env，因此服务端/客户端共用同一份值。
@ -27,7 +31,9 @@ import { BASE_API } from "astro:env/client"

 export interface BrandEntry {
  id: string // 后端返回 hashid 编码串（非自增主键），防爬虫顺序枚举
-  name: string
+  name: string // 英文名（name_en 回落 name）
+  nameCn?: string // 中文名（name_cn，可能为空）
+  display?: string // 展示名：中文语境下为 "英文名 (中文名)"，否则为英文名
  article_count: number
 }

@ -97,17 +103,13 @@ export interface SsgPopularBrand {
  cover: string
  title: string
 }
-export interface SsgBrand {
-  id: string
-  name: string
-  show_name: string
-  article_count: number
-}
+
+

 // ===================== base 解析 =====================

 export function getBase(): string {
-  if (import.meta.env.DEV) return "https://seo.23cm.cn"
+  // if (import.meta.env.DEV) return "https://seo.23cm.cn"
  // 运行期/预渲染统一走 BASE_API（空则同源相对 /api）
  return (BASE_API || "").replace(/\/$/, "")
 }
@ -134,12 +136,44 @@ export function ssrBase(): string {
  return (BASE_API || "http://localhost:8090").replace(/\/$/, "")
 }

+// ===================== i18n：请求语言透传 =====================
+// 后端 /api/v1/public/* 与 /api/v1/ssg/* 都通过 ?locale=cn|en（优先级最高，高于 Accept-Language）
+// 决定 name / title / brand_name 选用 *_en 还是 *_cn 列（service.pickLocale 选列并缺翻译回落），
+// 出参字段名保持不变，故前端契约无需改动，仅需在请求上带上当前语言。
+//
+// 当前语言来源分两端：
+//   - 浏览器端（<script> 里的 fetch）：从 URL path 推断（/cn/ → cn，其余 → en），调用方无需关心。
+//   - 服务端（SSG 构建 / 按需渲染）：由各页面/布局在前置 frontmatter 调 setApiLocale() 注入，
+//     因绝大多数页面是 SSG 单线程构建，模块级 _ssrLocale 安全；本文件也允许按需渲染时显式传参。
+let _ssrLocale: string | null = null
+export function setApiLocale(locale: string | null | undefined): void {
+  _ssrLocale = locale || DEFAULT_LOCALE
+}
+
+// 解析当前语言：浏览器端走 URL path，服务端回落注入值或默认语言。
+function currentLocale(): string {
+  if (typeof window !== "undefined" && window.location) {
+    return getLocaleFromUrl(window.location.pathname)
+  }
+  return _ssrLocale || DEFAULT_LOCALE
+}
+
+// 把当前语言追加进 query（locale 非空才加，避免污染 URL；DEFAULT_LOCALE 也显式带，语义清晰）。
+function withLocale(params?: URLSearchParams, override?: string): URLSearchParams {
+  const p = params ? new URLSearchParams(params) : new URLSearchParams()
+  const loc = override || currentLocale()
+  if (loc) p.set("locale", loc)
+  return p
+}
+
 // ===================== 内部请求原语 =====================

-// 通用请求原语：走 getBase() + /api + path（公开接口）。GET-only。
+// 通用请求原语：走 getBase() + /api/v1 + path（公开接口）。GET-only。
+// 自动追加 ?locale=（当前语言），让后端按语言选列返回。
 async function request<T>(path: string, params?: URLSearchParams): Promise<T> {
-  const qs = params && params.toString() ? "?" + params.toString() : ""
-  const url = getBase() + "/api" + path + qs
+  const p = withLocale(params)
+  const qs = p.toString() ? "?" + p.toString() : ""
+  const url = getBase() + "/api/v1" + path + qs
  const res = await fetch(url)
  if (!res.ok) throw new Error(`API ${res.status} ${url}`)
  return (await res.json()) as T
@ -185,14 +219,18 @@ export async function getArticlesRaw(opts?: {

 // 接口：GET /api/public/articles/:id
 // 文章详情（含完整图片集）。base 默认走 ssrBase()（运行期按需渲染取数），也可显式传入。
+// locale 显式传入时优先（按需渲染 SSR 用它避免并发串 locale），否则走 currentLocale()。
 export async function fetchArticleById(
  id: number | string,
-  base: string = ssrBase()
+  base: string = ssrBase(),
+  locale?: string
 ): Promise<RawArticle | null> {
  const b = base.replace(/\/$/, "")
  if (!b) return null
+  const p = withLocale(undefined, locale)
+  const qs = p.toString() ? "?" + p.toString() : ""
  try {
-    const res = await fetch(`${b}/api/public/articles/${id}`)
+    const res = await fetch(`${b}/api/v1/public/articles/${id}${qs}`)
    if (!res.ok) return null
    const json: any = await res.json()
    return (json?.data ?? null) as RawArticle | null
@ -204,17 +242,19 @@ export async function fetchArticleById(
 // 服务端按需渲染（on-demand）取文章详情：在 fetchArticleById 之上包揽
 // 「缺 id / 取数失败 / 成功」三态，.astro 页面只调这一行即可。
 // 内部 base 走 ssrBase()（运行期取数，BASE_API > 本地 8090）。
+// locale 显式传入（如 Astro.currentLocale）以绑定当前语言，避免并发串 locale。
 export type SsrArticleResult = {
  article: RawArticle | null
  error: "missing" | "failed" | null
 }

 export async function getSsrArticle(
-  id: string | null | undefined
+  id: string | null | undefined,
+  locale?: string
 ): Promise<SsrArticleResult> {
  if (!id) return { article: null, error: "missing" }
  try {
-    const article = await fetchArticleById(id)
+    const article = await fetchArticleById(id, ssrBase(), locale)
    return { article, error: article ? null : "failed" }
  } catch {
    return { article: null, error: "failed" }
@ -256,38 +296,14 @@ export async function fetchArticlesList(opts?: {
  if (opts?.collection_type) p.set("collection_type", opts.collection_type)
  if (opts?.season) p.set("season", opts.season)
  if (opts?.brand_id) p.set("brand_id", opts.brand_id)
-  const res = await fetch(`${base}/api/public/articles?${p.toString()}`)
+  // 浏览器端按 URL path 自动推断当前语言并追加 ?locale=
+  p.set("locale", currentLocale())
+  const res = await fetch(`${base}/api/v1/public/articles?${p.toString()}`)
  if (!res.ok) throw new Error(`list ${res.status}`)
  const json = await res.json()
  return json?.data ?? []
 }

-// 接口：GET /api/public/articles（经 getArticlesRaw，sort=year_desc）
-// 最近若干条秀场中提取的独特年份（降序去重，最多 6 个），用于筛选年份 chips。
-export async function getYears(sample = 30): Promise<number[]> {
-  const { data } = await getArticlesRaw({ size: sample, sort: "year_desc" })
-  const ys = Array.from(
-    new Set(data.map((it: any) => Number(it.year)).filter((y: number) => y > 0))
-  ) as number[]
-  return ys.slice(0, 6)
-}
-
-// 接口：GET /api/public/colors（客户端运行期，base 走 BASE_API）
-// 颜色接口（后端暂无独立颜色接口时返回 null，由调用方回落）。
-export async function fetchColors(): Promise<any[] | null> {
-  const base = publicBase()
-  if (!base) return null
-  try {
-    const res = await fetch(`${base}/api/public/colors`)
-    if (!res.ok) return null
-    const json: any = await res.json()
-    const data: any[] = json?.data ?? []
-    return data.length ? data : null
-  } catch {
-    return null
-  }
-}
-
 // ===================== 品牌（/api/public/brands） =====================

 // 接口：GET /api/public/brands
@ -300,16 +316,27 @@ export async function getBrands(opts?: {
 }): Promise<BrandEntry[]> {
  const qs = new URLSearchParams()
  if (opts?.size) qs.set("size", String(opts.size))
-  if (opts?.only_with_articles != null) qs.set("only_with_articles", String(opts.only_with_articles))
+  // 关键词搜索：用户按名字找品牌，不应被"必须有走秀档案"过滤。
+  // 后端已对 keyword 跳过该限制，这里再显式置 0 双保险，使正在运行的后端也立即生效。
+  const onlyWA = opts?.keyword ? 0 : (opts?.only_with_articles ?? 1)
+  qs.set("only_with_articles", String(onlyWA))
  if (opts?.featured != null) qs.set("featured", String(opts.featured))
  if (opts?.keyword) qs.set("keyword", opts.keyword)
  if (opts?.letter) qs.set("letter", opts.letter)
  const j = await request<{ data?: any[] }>("/public/brands", qs)
-  return (j.data ?? []).map((b: any) => ({
-    id: String(b.id),
-    name: (b.name || b.show_name || "").toString(),
-    article_count: Number(b.article_count ?? 0),
-  }))
+  return (j.data ?? []).map((b: any) => {
+    const nameEn = (b.name_en || b.name || "").toString()
+    const nameCn = (b.name_cn || "").toString()
+    // 品牌名始终展示英文（即便是中文语境），不再拼接中文名，保持英文观感。
+    const display = nameEn
+    return {
+      id: String(b.id),
+      name: nameEn,
+      nameCn,
+      display,
+      article_count: Number(b.article_count ?? 0),
+    }
+  })
 }

 // ===================== 账号体系（/api/auth/*） =====================
@ -343,7 +370,7 @@ export async function fetchMe(): Promise<AuthUser | null> {
  if (!token) return null
  try {
    // 接口：GET /api/auth/me（需 Bearer token，客户端运行期 base 走 BASE_API）
-    const res = await fetch(`${BASE_API_URL}/api/auth/me`, {
+    const res = await fetch(`${BASE_API_URL}/api/v1/auth/me?locale=${encodeURIComponent(currentLocale())}`, {
      headers: { Authorization: `Bearer ${token}` },
    })
    if (!res.ok) {
@ -384,14 +411,14 @@ function ssgToken(): string {
  return (ssgEnv("SSG_TOKEN") || "").toString().trim()
 }

-function withToken(path: string): string {
-  const t = ssgToken()
-  if (!t) return path
-  return path + (path.includes("?") ? "&" : "?") + "token=" + encodeURIComponent(t)
-}
-
 async function ssgRequest<T>(path: string): Promise<T | null> {
-  const url = ssgBase() + withToken(path)
+  // 组合 SSG_TOKEN 与 ?locale=（构建期按当前语言选列，后端 parseLocale 已支持）。
+  const t = ssgToken()
+  const parts: string[] = []
+  if (t) parts.push("token=" + encodeURIComponent(t))
+  const loc = currentLocale()
+  if (loc) parts.push("locale=" + encodeURIComponent(loc))
+  const url = ssgBase() + path + (parts.length ? (path.includes("?") ? "&" : "?") + parts.join("&") : "")
  try {
    const res = await fetch(url)
    if (!res.ok) return null
@ -401,28 +428,29 @@ async function ssgRequest<T>(path: string): Promise<T | null> {
  }
 }

-// 接口：GET /api/ssg/brands/popular?limit=N（SSG 内部端口，构建期 Node 调用）
-export async function getSsgPopularBrands(limit = 20): Promise<SsgPopularBrand[]> {
-  const j = await ssgRequest<{ data?: SsgPopularBrand[] }>(`/api/ssg/brands/popular?limit=${limit}`)
-  return j?.data ?? []
+// 接口：GET /api/v1/ssg/index/runway（SSG 内部端口，构建期 Node 调用）
+// 首页（/index/）runway 区块数据，含多个模块；hotBrand 为其中之一（当前仅此模块）。
+export async function getSsgIndexRunway(): Promise<{ hotBrand: SsgPopularBrand[] }> {
+  const j = await ssgRequest<{ data?: { hotBrand?: SsgPopularBrand[] } }>(`/api/v1/ssg/index/runway`)
+  return j?.data ?? { hotBrand: [] }
 }

 // 接口：GET /api/ssg/brands（SSG 内部端口，构建期 Node 调用）
-export async function getSsgBrands(opts?: {
-  size?: number
-  only_with_articles?: number
-  featured?: number
-}): Promise<SsgBrand[]> {
-  const qs = new URLSearchParams()
-  if (opts?.size) qs.set("size", String(opts.size))
-  if (opts?.only_with_articles != null) qs.set("only_with_articles", String(opts.only_with_articles))
-  if (opts?.featured != null) qs.set("featured", String(opts.featured))
-  const j = await ssgRequest<{ data?: SsgBrand[] }>(`/api/ssg/brands?${qs.toString()}`)
-  return j?.data ?? []
+// SSG 构建期：走秀页热门品牌（按图片总数排名，结果按热度顺序）。
+// 后端固定返回前 30 个；侧栏 filter 展示前 10，品牌弹窗 HOT 标签展示全部。
+export async function getSsgHotBrands(): Promise<BrandEntry[]> {
+  const j = await ssgRequest<{ data?: any[] }>("/api/v1/ssg/brands/hot")
+  return (j?.data ?? []).map((b: any) => {
+    const nameEn = (b.name_en || b.name || "").toString()
+    return {
+      id: String(b.id),
+      name: nameEn,
+      nameCn: (b.name_cn || "").toString(),
+      display: nameEn,
+      article_count: Number(b.article_count ?? 0),
+    }
+  })
 }

-// 接口：GET /api/ssg/articles/ids（SSG 内部端口，构建期 Node 调用，供 getStaticPaths 枚举详情路由）
-export async function getSsgArticleIds(): Promise<string[]> {
-  const j = await ssgRequest<{ data?: string[] }>(`/api/ssg/articles/ids`)
-  return j?.data ?? []
-}
+
+
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@ -1,289 +0,0 @@
-// 网站统一数据层
-// 复用 api.ts 的公开接口拉取真实数据，并适配为前端各模块
-// (site / shows / trends / colors / street，以及首页 backstage 面板、文章画廊 reports) 所需结构。
-//
-// 设计原则：
-//  1. 单一数据源：所有 getter 共享一次分页拉取 (loadArticles)，避免重复请求。
-//  2. 优雅回落：后端不可达或返回空时，回落到内置示例，保证 SSG 构建与离线预览不报错。
-//  3. 颜色模块：后端暂无独立颜色接口，getColors() 先尝试 /api/public/colors，
-//     失败则从 runway 文章封面派生占位（接入颜色接口后即可自动生效）。
-//
-// 所有 fetch 都已收敛到 @/lib/api，本文件只做数据映射与缓存。
-
-import {
-  getArticlesRaw,
-  fetchArticleById,
-  fetchColors,
-  toAbs,
-  type RawArticle,
-} from "@/lib/api"
-
-export type { RawArticle }
-// 供仍从 data 取详情的函数（ssr.ts 等）透传
-export { fetchArticleById }
-
-export function seasonLabel(y: number | string): string {
-  const n = Number(y)
-  return n ? `AW${String(n).slice(2)}` : ""
-}
-
-// 系列类型 → 展示名（用于首页/列表的系列标签与筛选）
-export const SERIES_LABELS: Record<string, string> = {
-  rtw: "成衣 RTW",
-  menswear: "男装",
-  couture: "高定",
-  resort: "度假",
-  pre_fall: "早秋",
-}
-export function seriesLabel(ct?: string): string {
-  return (ct && SERIES_LABELS[ct]) || "成衣 RTW"
-}
-
-export function fmtDate(t: number | string): string {
-  const n = Number(t)
-  const d = new Date(n < 1e12 ? n * 1000 : n)
-  const p = (x: number) => String(x).padStart(2, "0")
-  return `${d.getUTCFullYear()}.${p(d.getUTCMonth() + 1)}.${p(d.getUTCDate())}`
-}
-
-// ---------- 内置示例（后端不可达时回落） ----------
-const BRANDS = ["MAISON LUMEN", "STUDIO VANTA", "ATELIER NOIR", "KÔ", "CÉLESTE", "RIVE GAUCHE"]
-const SAMPLE: RawArticle[] = Array.from({ length: 24 }, (_, i) => ({
-  id: String(i + 1),
-  title: `Collection ${String(i + 1).padStart(2, "0")}`,
-  brand_name: BRANDS[i % BRANDS.length],
-  year: 2023 + (i % 4),
-  cover: `https://picsum.photos/seed/s${i + 1}/800/1000`,
-  image_count: 3 + (i % 12),
-  published_at: Math.floor(Date.UTC(2026, 0, 1) / 1000) - i * 86400,
-}))
-
-// ---------- 底层：一次性拉取并缓存 ----------
-type Loaded = {
-  items: RawArticle[]
-  total: number
-  brandCount: number
-  yearMin: number
-  yearMax: number
-  latest: RawArticle | null
-  sampled: boolean
-}
-let _loaded: Promise<Loaded> | null = null
-
-function compute(items: RawArticle[], total: number): Loaded {
-  const brandCount = new Set(items.map((r) => r.brand_name).filter(Boolean)).size
-  const years = items.map((r) => Number(r.year)).filter((y) => y > 0)
-  const yearMin = years.length ? Math.min(...years) : 0
-  const yearMax = years.length ? Math.max(...years) : 0
-  const latest =
-    [...items].sort((a, b) => Number(b.published_at) - Number(a.published_at))[0] || null
-  return { items, total, brandCount, yearMin, yearMax, latest, sampled: false }
-}
-
-function fromSample(): Loaded {
-  return { ...compute(SAMPLE, SAMPLE.length), sampled: true }
-}
-
-export function loadArticles(): Promise<Loaded> {
-  if (_loaded) return _loaded
-  _loaded = (async () => {
-    try {
-      const { data, total } = await getArticlesRaw({ page: 1, size: 60 })
-      if (!data.length) return fromSample()
-      return compute(data, Number(total || data.length))
-    } catch {
-      return fromSample()
-    }
-  })()
-  return _loaded
-}
-
-// ---------- 模块 getter ----------
-export type ArticleCard = {
-  id: string | number
-  brand: string
-  title: string
-  season: string // 季节码，如 AW16
-  year: number
-  img: string
-  count: number
-  gallery: string[]
-  collection_type?: string // rtw/menswear/couture/resort/pre_fall
-  season_code?: string // SS26/FW25/RES26/PF25
-}
-
-function mapArticle(r: RawArticle): ArticleCard {
-  return {
-    id: r.id,
-    brand: r.brand_name || "Unknown",
-    title: r.title || "",
-    season: seasonLabel(r.year),
-    year: Number(r.year) || 0,
-    img: toAbs(r.cover || ""),
-    count: r.image_count || 0,
-    gallery: [],
-    collection_type: r.collection_type,
-    season_code: r.season_code,
-  }
-}
-
-export async function getShows(limit = 8): Promise<ArticleCard[]> {
-  const items = await loadArticlesWithImages(40)
-  return items.slice(0, limit)
-}
-
-export async function getBackstage(limit = 8): Promise<ArticleCard[]> {
-  const items = await loadArticlesWithImages(40)
-  return items.slice(8, 8 + limit)
-}
-
-export async function getTrends(limit = 9): Promise<ArticleCard[]> {
-  const items = await loadArticlesWithImages(40)
-  return items.slice(16, 16 + limit)
-}
-
-export async function getStreet(limit = 8): Promise<ArticleCard[]> {
-  const items = await loadArticlesWithImages(40)
-  return items.slice(24, 24 + limit)
-}
-
-// 列表带图拉取：一次请求即带回每篇文章前 5 张图（后端 with_images 参数），
-// 用于首页卡片缩略图，避免此前逐篇详情请求导致的缓慢。
-let _loadedWithImages: Promise<ArticleCard[]> | null = null
-export function loadArticlesWithImages(size = 40): Promise<ArticleCard[]> {
-  if (_loadedWithImages) return _loadedWithImages
-  _loadedWithImages = (async () => {
-    try {
-      const { data } = await getArticlesRaw({ page: 1, size, with_images: 5 })
-      return data.map((r) => {
-        const base = mapArticle(r)
-        base.gallery = (r.images || [])
-          .map((im: any) => toAbs(im.image || ""))
-          .filter(Boolean)
-          .slice(0, 5)
-        return base
-      })
-    } catch {
-      return []
-    }
-  })()
-  return _loadedWithImages
-}
-
-// attachGallery 在构建期（SSG）为每个展示文章预取其真实多图（前 3 张），
-// 供首页卡片直接渲染"图片堆"，无需等到悬停才拉取。后端不可达时 gallery 为空。
-async function attachGallery<T extends { id: string | number; gallery: string[] }>(
-  items: T[]
-): Promise<T[]> {
-  return await Promise.all(
-    items.map(async (it) => {
-      let gallery: string[] = []
-      const art = await fetchArticleById(it.id)
-      if (art?.images?.length) {
-        gallery = art.images
-          .slice(0, 5)
-          .map((im: any) => toAbs(im.image || ""))
-          .filter(Boolean)
-      }
-      return { ...it, gallery }
-    })
-  )
-}
-
-export type ColorItem = {
-  id: string | number
-  name: string
-  brand: string
-  season: string
-  img: string
-}
-export async function getColors(limit = 12): Promise<ColorItem[]> {
-  // 后端暂无独立颜色接口：优先尝试 /api/public/colors，失败则从 runway 文章封面派生占位。
-  const colors = await fetchColors()
-  if (colors && colors.length) {
-    return colors.slice(0, limit).map((c: any) => ({
-      id: c.id ?? 0,
-      name: c.name || c.title || "",
-      brand: c.brand_name || "",
-      season: seasonLabel(c.year),
-      img: toAbs(c.cover || c.image || ""),
-    }))
-  }
-  const { items } = await loadArticles()
-  return items.slice(0, limit).map((r) => ({
-    id: r.id,
-    name: r.title,
-    brand: r.brand_name,
-    season: seasonLabel(r.year),
-    img: toAbs(r.cover || ""),
-  }))
-}
-
-export type SiteInfo = {
-  totalReports: number
-  brandCount: number
-  seasonRange: string
-  latest: { title: string; brand: string; date: string; href: string }
-}
-export async function getSite(): Promise<SiteInfo> {
-  const loaded = await loadArticles()
-  if (loaded.sampled) {
-    return {
-      totalReports: 12,
-      brandCount: 6,
-      seasonRange: "2023–26",
-      latest: {
-        title: "Paper Light",
-        brand: "MAISON LUMEN",
-        date: "2026.03.14",
-        href: "/article?id=1",
-      },
-    }
-  }
-  const { total, brandCount, yearMin, yearMax, latest } = loaded
-  const seasonRange =
-    yearMin && yearMax ? `${yearMin}–${String(yearMax).slice(2)}` : "2023–26"
-  return {
-    totalReports: total || 12,
-    brandCount: brandCount || 6,
-    seasonRange,
-    latest: latest
-      ? {
-          title: latest.title,
-          brand: latest.brand_name,
-          date: fmtDate(latest.published_at),
-          href: `/article?id=${latest.id}`,
-        }
-      : { title: "Paper Light", brand: "MAISON LUMEN", date: "2026.03.14", href: "/article?id=1" },
-  }
-}
-
-// ---------- 文章画廊（/articles）所需结构 ----------
-export type ReportItem = {
-  id: string | number
-  brand: string
-  title: string
-  year: number
-  cover: string
-  excerpt: string
-  image_count: number
-  featured: boolean
-  ratio: string
-  created_at: number
-}
-const RATIOS = ["3 / 4", "4 / 5", "1 / 1", "5 / 4"]
-export async function getReports(limit = 30): Promise<ReportItem[]> {
-  const { items } = await loadArticles()
-  return items.slice(0, limit).map((r, i) => ({
-    id: r.id,
-    brand: r.brand_name || "Unknown",
-    title: r.title || "",
-    year: Number(r.year) || 0,
-    cover: toAbs(r.cover || ""),
-    excerpt: (r.summary || r.description || r.title || "").slice(0, 120),
-    image_count: r.image_count || 0,
-    featured: i % 4 === 0,
-    ratio: RATIOS[i % RATIOS.length],
-    created_at: Number(r.published_at) || 0,
-  }))
-}
--- a/src/pages/brands.astro
+++ b/src/pages/brands.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Brands from "@/components/pages/brands.astro"
---
-
-<Layout>
-  <Brands />
-</Layout>
--- a/src/pages/cn/about.astro
+++ b/src/pages/cn/about.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import About from "@/components/pages/About.astro"
---
-
-<Layout title="About — 暂未上线">
-  <About />
-</Layout>
--- a/src/pages/cn/article.astro
+++ b/src/pages/cn/article.astro
@ -3,13 +3,13 @@ import Layout from "@/layouts/Layout.astro"
 import Article from "@/components/pages/article.astro"
 import { getSsrArticle } from "@/lib/api"

-// 按需 SSR：服务端按 ?id= 取数并渲染（保留既有 /cn/article?id= 链接，无需改动其他页面）
+// 按需 SSR：服务端按 ?id= 取数并渲染（保留既有 /en/article?id= 链接，无需改动其他页面）
 export const prerender = false

 const id = Astro.url.searchParams.get("id")
-const { article, error } = await getSsrArticle(id)
+const { article, error } = await getSsrArticle(id, Astro.currentLocale)
 ---

 <Layout>
-  <Article article={article} locale="cn" error={error} />
+  <Article article={article} locale="en" error={error} />
 </Layout>
--- a/src/pages/cn/item/[id].astro
+++ b/src/pages/cn/item/[id].astro
@ -0,0 +1,15 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import Item from "@/components/Item.astro"
+import { getSsrArticle } from "@/lib/api"
+
+// 按需 SSR：服务端按 ?id= 取数并渲染（保留既有 /en/items/:id 链接，无需改动其他页面）
+export const prerender = false
+
+const { id } = Astro.params
+const { article, error } = await getSsrArticle(id, Astro.currentLocale)
+---
+
+<Layout>
+  <Item article={article} error={error} />
+</Layout>
--- a/src/pages/cn/runway-looks/index.astro
+++ b/src/pages/cn/runway-looks/index.astro
@ -0,0 +1,7 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import RunwayLooks from '@/components/RunwayLooks.astro'
+---
+<Layout>
+    <RunwayLooks />
+</Layout>
--- a/src/pages/cn/shows.astro
+++ b/src/pages/cn/shows.astro
@ -1,939 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Breadcrumb from "@/components/Breadcrumb.astro"
-import { getBrands, getSsgPopularBrands, type BrandEntry } from "@/lib/api"
-import { getI18n } from '@/i18n/utils'
-import { clientHref, ROUTES, href } from '@/lib/routes'
-
-const { locale } = getI18n(Astro)
-let sidebarBrands: BrandEntry[] = []
-
-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 {}
-
-// 热门品牌：构建期走 SSG 内部接口（/api/ssg/brands/popular），不可用时回落假数据先看效果
-const FAKE_HOT_BRANDS = [
-  { id: "hot-chanel", name: "Chanel", article_count: 342 },
-  { id: "hot-dior", name: "Dior", article_count: 318 },
-  { id: "hot-gucci", name: "Gucci", article_count: 287 },
-  { id: "hot-prada", name: "Prada", article_count: 254 },
-  { id: "hot-louisvuitton", name: "Louis Vuitton", article_count: 241 },
-  { id: "hot-saintlaurent", name: "Saint Laurent", article_count: 219 },
-  { id: "hot-balenciaga", name: "Balenciaga", article_count: 198 },
-  { id: "hot-valentino", name: "Valentino", article_count: 176 },
-  { id: "hot-givenchy", name: "Givenchy", article_count: 162 },
-  { id: "hot-burberry", name: "Burberry", article_count: 153 },
-  { id: "hot-fendi", name: "Fendi", article_count: 141 },
-  { id: "hot-bottega", name: "Bottega Veneta", article_count: 128 },
-]
-let hotBrands: { id: string; name: string; article_count: number }[] = []
-try {
-  const ssg = await getSsgPopularBrands(12)
-  if (ssg.length) hotBrands = ssg.map((b) => ({ id: String(b.id), name: b.brand || "", article_count: 0 }))
-} catch {}
-if (!hotBrands.length) hotBrands = FAKE_HOT_BRANDS
-
-// 年份筛选：写死，按需增删（数据最早约 2005 年，如需更老年份往数组里加即可）
-// 年份：从当今年份往前推 15 年（含），末项加"X年前"兜底
-const currentYear = new Date().getFullYear()
-const yearFloor = currentYear - 15
-const yearOptions: { value: number | string; label: string }[] = []
-for (let y = currentYear; y >= yearFloor; y--) {
-  yearOptions.push({ value: y, label: String(y) })
-}
-yearOptions.push({ value: `before${yearFloor}`, label: `${yearFloor}年前` })
-
-// 系列类型 / 季节：写死静态数据（先用示例/假数据预览，确认后直接改这两个数组即可）
-const collectionOptions: { value: string; label: string }[] = [
-  { value: "rtw", label: "Ready-to-Wear" },
-  { value: "menswear", label: "Menswear" },
-  { value: "womenswear", label: "Womenswear" },
-  { value: "couture", label: "Couture" },
-  { value: "resort", label: "Resort" },
-  { value: "pre_fall", label: "Pre-Fall" },
-  { value: "bridal", label: "Bridal" },
-  { value: "swimwear", label: "Swimwear" },
-]
-const seasonOptions: { value: string; label: string }[] = [
-  { value: "spring", label: "Spring / Summer" },
-  { value: "fall", label: "Fall / Winter" },
-  { value: "cruise", label: "Cruise" },
-  { value: "holiday", label: "Holiday" },
-]
---
-
-<Layout title="全部的 runway — Portfolio Studio">
-  <div class="showsroot w-full" x-data="showsPage()" data-locale={locale}>
-    <!-- 顶部：极简眉头 -->
-    <header class="showshead">
-      <div>
-        <Breadcrumb
-          items={[
-            { label: 'Home', href: href(locale, ROUTES.home) },
-            { label: 'Runway Archive', href: href(locale, ROUTES.shows) },
-          ]}
-        >
-          <span slot="current" x-text="crumbYear">2026 Edition</span>
-        </Breadcrumb>
-
-        <h1 class="showsh1">全部的 runway</h1>
-      </div>
-    </header>
-
-    <!-- 已激活筛选 pills -->
-    <div class="showspills" x-show="pills.length > 0" x-cloak>
-      <template x-for="(p, i) in pills" :key="i">
-        <span class="showspill">
-          <span x-text="p.label"></span>
-          <button class="x" type="button" @click="p.clear()">×</button>
-        </span>
-      </template>
-    </div>
-
-    <!-- 主体：左 sidebar + 右 4 列商品 grid -->
-    <div class="showsbody">
-      <!-- LEFT SIDEBAR -->
-      <aside class="showsaside">
-        <div class="showsaside-head">
-          <h2 class="showsaside-h">REFINE</h2>
-        </div>
-
-        <div class="showsaside-body">
-          <!-- Designer 多选 -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('designers')">
-              <span>DESIGNERS</span>
-              <span class="showsg-right">
-                <span class="showsg-count" x-text="selectedBrands.length">0</span>
-                <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.designers }">
-                  <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" x-show="!collapsedGroups.designers">
-              <div class="showshot" x-show="hotBrands.length">
-                <div class="mb-2 text-[10px] uppercase tracking-[0.18em] text-black/45">热门品牌 · HOT</div>
-                <div class="flex flex-wrap gap-1.5">
-                  <template x-for="b in hotBrands" :key="b.id">
-                    <label class="inline-flex items-center gap-1.5 border border-black/15 px-2 py-1 text-[11px] cursor-pointer transition-colors has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white">
-                      <input type="checkbox" :value="b.id" :checked="selectedBrands.includes(b.id)" @change="toggleBrand(b.id)" />
-                      <span x-text="b.name"></span>
-                    </label>
-                  </template>
-                </div>
-              </div>
-              <ul class="showschecks">
-                <template x-for="item in visibleBrandItems" :key="item.key">
-                  <li>
-                    <!-- Letter Header -->
-                    <template x-if="item.type === 'letter'">
-                      <div class="letter-head" x-text="item.letter"></div>
-                    </template>
-
-                    <!-- Brand Item -->
-                    <template x-if="item.type === 'brand'">
-                      <label class="flex items-center gap-2 w-full cursor-pointer">
-                        <input 
-                          type="checkbox" 
-                          :value="item.id" 
-                          :checked="selectedBrands.includes(item.id)" 
-                          @change="toggleBrand(item.id)"
-                        >
-                        <span x-text="item.name"></span>
-                        <span class="ct" x-text="item.count ? item.count : ''"></span>
-                      </label>
-                    </template>
-                  </li>
-                </template>
-              </ul>
-              <a class="showsmore" @click="openBrandModal()" x-text="'浏览全部品牌 +'"></a>
-            </div>
-          </section>
-
-          <!-- Collection type -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('collection')">
-              <span>COLLECTION</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.collection }">
-                <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" x-show="!collapsedGroups.collection">
-              <ul class="showschecks showschecks--flat">
-                {collectionOptions.map((o) => (
-                  <li><label><input type="checkbox" value={o.value} x-model="selectedCt" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <!-- Season -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('season')">
-              <span>SEASON</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.season }">
-                <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" x-show="!collapsedGroups.season">
-              <ul class="showschecks showschecks--flat">
-                {seasonOptions.map((o) => (
-                  <li><label><input type="checkbox" value={o.value} x-model="selectedSeason" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <!-- Year -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('year')">
-              <span>YEAR</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.year }">
-                <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" x-show="!collapsedGroups.year">
-              <ul class="showschecks showschecks--flat">
-                {yearOptions.map((o) => (
-                  <li><label><input type="checkbox" value={String(o.value)} x-model="selectedYear" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <button class="showsclear" type="button" @click="clearAll()">Clear all ×</button>
-        </div>
-      </aside>
-
-      <!-- MAIN GRID -->
-      <main class="showsmain">
-        <div class="showsgrid" :class="{ 'is-loading': loading }">
-          
-          <!-- 骨架屏：结构与真实卡片完全一致，loading 期间占位，杜绝 加载中→数据完成 的尺寸抖动 -->
-          <template x-if="loading && items.length === 0">
-            <template x-for="i in skeletonCount" :key="'skel-'+i">
-              <div class="showscard showscard--skel" aria-hidden="true">
-                <div class="showscard-left">
-                  <div class="showscard-img"></div>
-                </div>
-                <div class="showscard-right">
-                  <div class="showscard-info">
-                    <div class="showsline h-[41px] mb-[10px] rounded-[2px]"></div>
-                    <div class="showsline h-[29px] mb-[14px] rounded-[2px]"></div>
-                    <div class="showsline h-[38px] rounded-[2px]"></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>
-            </template>
-          </template>
-
-          <!-- Empty State -->
-          <template x-if="!loading && items.length === 0">
-            <div class="showsempty">No shows match the current filters</div>
-          </template>
-
-          <!-- Card List -->
-          <template x-for="it in items" :key="it.id">
-            <a class="showscard" :href="articleHref(it)" :aria-label="`${it.brand_name} ${it.title}`">
-              <div class="showscard-left">
-                <div class="showscard-img" :class="{ 'is-loaded': it._imgLoaded }">
-                  <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG"></span>
-                  <img :src="toAbsUrl(it.cover)" :alt="it.title" loading="lazy" @load="it._imgLoaded = true" @error="it._imgLoaded = true" :class="{ 'is-loaded': it._imgLoaded }" />
-                  <!-- <span class="showsbadge" x-show="isNewAdded(it.published_at)">New</span> -->
-                </div>
-              </div>
-              <div class="showscard-right">
-                <div class="showscard-info">
-                  <h3 class="showscard-title" x-text="it.title"></h3>
-                  <p class="showscard-meta" x-text="`${it.season_code || it.year || ''} · ${ctLabel(it.collection_type)} · ${it.brand_name}`"></p>
-                  <div class="showscard-meta-foot">
-                    <span class="showscard-meta-line"><span x-html="ICON_USER"></span><span x-text="it.brand_name"></span></span>
-                    <span class="showscard-meta-line"><span x-html="ICON_DATE"></span><span x-text="fmtDate(it.published_at)"></span></span>
-                  </div>
-                </div>
-                <div class="showscard-strip">
-                  <template x-for="(slot, idx) in getCardSlots(it)" :key="idx">
-                    <div class="showscard-thumb" :class="{ 'placeholder': !slot.src, 'is-loaded': slot.loaded }">
-                      <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG" x-show="slot.src"></span>
-                      <img x-show="slot.src" :src="toAbsUrl(slot.src)" alt="" loading="lazy" @load="slot.loaded = true" @error="slot.loaded = true" :class="{ 'is-loaded': slot.loaded }" />
-                      <span class="showscard-thumb-more" x-show="slot.isLast && slot.moreLabel" x-text="slot.moreLabel"></span>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </a>
-          </template>
-        </div>
-
-        <div class="showsloadmore-wrap" x-show="items.length > 0">
-          <button class="showsloadmore" type="button" :disabled="loadingMore || isEnd" @click="loadPage(page + 1, true)" x-text="loadBtnText"></button>
-        </div>
-      </main>
-    </div>
-
-    <!-- 品牌筛选弹窗：搜索 + A-Z 跳转 + 热门推荐，按需加载，避免一次拉全量 -->
-    <div class="showsmodal" x-show="modalOpen" x-cloak>
-      <div class="showsmodal-mask" @click="closeBrandModal()"></div>
-      <div class="showsmodal-panel">
-        <header class="showsmodal-head">
-          <h3>全部品牌</h3>
-          <button class="showsmodal-x" type="button" @click="closeBrandModal()" aria-label="关闭">✕</button>
-        </header>
-        <div class="showsmodal-search">
-          <input
-            class="showsmodal-input"
-            type="text"
-            x-model="modalKeyword"
-            @input.debounce.300ms="modalSearch()"
-            placeholder="搜索品牌名…"
-            autocomplete="off"
-          />
-        </div>
-        <div class="showsmodal-az">
-          <button class="az az-hot" type="button" :class="{ active: modalLetter === 'HOT' }" @click="modalPickLetter('HOT')">HOT</button>
-          <template x-for="l in 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('')" :key="l">
-            <button class="az" type="button" :class="{ active: modalLetter === l }" @click="modalPickLetter(l)" x-text="l"></button>
-          </template>
-        </div>
-        <div class="showsmodal-body">
-          <div class="showsmodal-hint" x-show="!modalKeyword && modalLetter === 'HOT'">热门推荐</div>
-          <div class="showsmodal-loading" x-show="modalLoading" x-html="SPIN_SVG"></div>
-          <ul class="showsmodal-list">
-            <template x-for="b in modalResults" :key="b.id">
-              <li>
-                <label class="showsmodal-row">
-                  <input
-                    type="checkbox"
-                    :value="b.id"
-                    :checked="modalSelected.includes(b.id)"
-                    @change="toggleModalBrand(b.id)"
-                  />
-                  <span class="showsmodal-name" x-text="b.name"></span>
-                  <span class="showsmodal-ct" x-text="b.article_count ? b.article_count : ''"></span>
-                </label>
-              </li>
-            </template>
-            <li class="showsmodal-empty" x-show="!modalLoading && modalResults.length === 0">未找到匹配的品牌</li>
-          </ul>
-        </div>
-        <footer class="showsmodal-foot">
-          <span class="showsmodal-counter" x-text="`已选 ${modalSelected.length} / 1 个品牌`"></span>
-          <button class="showsmodal-ok" type="button" @click="confirmBrandModal()">确定</button>
-        </footer>
-      </div>
-    </div>
-
-  </div>
-</Layout>
-
-<script id="showsbrands-data" type="application/json" set:html={JSON.stringify(sidebarBrands)}></script>
-<script id="showshotbrands-data" type="application/json" set:html={JSON.stringify(hotBrands)}></script>
-
-<style>
-  @reference "tailwindcss";
-  [x-cloak] { display: none !important; }
-
-
-  /* 使用 @apply 精简并重构样式 */
-  .showsroot {
-    @apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
-  }
-
-  .showshead {
-    @apply flex justify-between items-end gap-6 py-5 pb-[26px] ;
-  }
-  .showsh1 {
-    @apply text-[clamp(40px,6vw,72px)] leading-[0.9] font-black tracking-[-0.02em] my-0 mb-[10px];
-  }
-
-  .showspills {
-    @apply flex flex-wrap gap-2 pt-3.5;
-  }
-  .showspill {
-    @apply inline-flex items-center gap-2 border-[1.5px] border-black p-[6px_10px] text-[10.5px] uppercase tracking-[0.14em] text-black bg-white;
-  }
-  .showspill .x {
-    @apply inline-flex w-3.5 h-3.5 items-center justify-center border-none bg-black text-white cursor-pointer text-xs leading-none;
-  }
-
-  .showsbody {
-    @apply flex gap-[36px] items-start max-md:flex-col max-md:gap-[18px];
-  }
-
-  .showsaside {
-    @apply flex-none w-[240px] bg-white sticky top-5 max-h-[calc(100vh-40px)] rounded-none transition-[flex-basis] duration-250 ease-in-out flex flex-col max-md:static max-md:max-h-none max-md:w-full;
-  }
-
-  .showsaside-head {
-    @apply flex items-center justify-between p-[14px_14px_12px] border-b border-black shrink-0;
-  }
-  .showsaside-h {
-    @apply text-[11px] tracking-[0.26em] uppercase font-bold m-0 leading-none transition-opacity duration-200;
-  }
-
-  .showsaside-body {
-    @apply p-[14px_14px_18px] overflow-y-auto flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#ccc_#fff];
-  }
-
-  .showsg {
-    @apply border-t border-[#e6e6e6] py-[12px] pb-[6px] first-of-type:border-t-0 first-of-type:pt-1;
-  }
-  .showsg-h {
-    @apply flex justify-between items-center text-[11px] tracking-[0.22em] uppercase font-bold text-black mb-2 cursor-pointer select-none;
-  }
-  .showsg-right {
-    @apply inline-flex items-center gap-2.5;
-  }
-  .showsg-chev {
-    @apply inline-block text-[9px] leading-none text-[#999] transition-transform duration-200 ml-1;
-  }
-  .showsg-chev.is-collapsed {
-    @apply -rotate-90;
-  }
-  .showsg-count {
-    @apply text-[#999] font-normal text-[10px] tracking-[0.14em];
-  }
-
-
-
-  .showschecks {
-    @apply list-none mt-[10px] mb-0 p-0 max-h-[280px] overflow-y-auto [scrollbar-width:thin];
-  }
-  .showschecks li {
-    @apply flex items-center gap-2 py-[5px] text-[11.5px] uppercase tracking-[0.04em] text-black cursor-pointer select-none hover:bg-[#f6f6f6];
-  }
-  .showschecks li.letter-head {
-    @apply p-[8px_0_3px] text-[10px] tracking-[0.22em] text-[#8a8a8a] cursor-default pointer-events-none border-t border-dotted border-[#e6e6e6] first:border-t-0 first:pt-1;
-  }
-  .showschecks input[type="checkbox"] {
-    @apply appearance-none w-3 h-3 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-none inline-grid place-content-center checked:bg-black;
-  }
-  .showschecks input[type="checkbox"]:checked::after {
-    content: "";
-    @apply w-[6px] h-[6px] bg-white;
-  }
-  .showschecks .ct {
-    @apply text-[#999] text-[10px] ml-auto;
-  }
-
-  .showschecks--flat li {
-    @apply py-[4px];
-  }
-  .showschecks--flat li label {
-    @apply inline-flex items-center gap-2 cursor-pointer w-full;
-  }
-
-  .showsmore {
-    @apply inline-block mt-[10px] text-[10.5px] uppercase tracking-[0.16em] text-[#555] cursor-pointer hover:text-black;
-  }
-  .showsclear {
-    @apply mt-[18px] w-full border-[1.5px] border-black bg-white text-black p-[11px_12px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-150 hover:bg-black hover:text-white;
-  }
-
-  .showsmain {
-    @apply flex-1 min-w-0;
-  }
-  .showsgrid {
-    @apply grid grid-cols-2 gap-[22px] relative max-[560px]:grid-cols-1;
-  }
-  .showsgrid.is-loading::before {
-    content: "";
-    @apply absolute -top-1 left-0 h-[2px] w-[38%] bg-black z-10;
-    animation: hbxProg 1s ease-in-out infinite;
-  }
-
-  .showscard {
-    @apply relative flex gap-[14px] no-underline text-inherit bg-white p-3 transition-colors duration-200 hover:border-black max-[700px]:flex-col max-[700px]:gap-[10px];
-  }
-  .showscard:hover .showscard-img img {
-    @apply scale-104;
-  }
-
-  .showscard-left {
-    @apply flex-none w-[30%] min-w-[110px] max-[700px]:w-full max-[700px]:flex-none;
-  }
-  .showscard-img {
-    @apply relative w-full aspect-[3/4] bg-[#f1f1f1] overflow-hidden rounded-none;
-  }
-  .showscard-img img {
-    @apply w-full h-full object-cover transition-transform duration-600 opacity-0;
-  }
-  .showscard-img img.is-loaded {
-    @apply opacity-100;
-  }
-
-  .showsspin {
-    @apply absolute inset-0 flex items-center justify-center text-[#bdbdbd] opacity-100 transition-opacity duration-300 pointer-events-none z-10;
-  }
-  .showscard-img.is-loaded .showsspin,
-  .showscard-thumb.is-loaded .showsspin {
-    @apply opacity-0;
-  }
-
-  .showsbadge {
-    @apply absolute top-[6px] right-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-white bg-black p-[3px_6px];
-  }
-  .showsflag-featured {
-    @apply absolute top-[6px] left-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-black bg-white p-[3px_6px] border border-black;
-  }
-
-  .showscard-right {
-    @apply flex-1 min-w-0 flex flex-col justify-between max-[700px]:w-full;
-  }
-  .showscard-info {
-    @apply flex-none min-w-0 flex flex-col p-[2px_2px_0];
-  }
-  .showscard-title {
-    @apply text-[15.5px] font-bold leading-[1.32] my-0 mb-[10px] text-[#111] tracking-[-0.01em] line-clamp-2 h-[41px] overflow-hidden;
-  }
-  .showscard-meta {
-    @apply text-[9.5px] text-[#888] my-0 mb-[14px] leading-[1.55] tracking-[0.04em] uppercase line-clamp-2 h-[29px] overflow-hidden;
-  }
-  .showscard-meta-foot {
-    @apply flex flex-col gap-[6px] h-[38px] overflow-hidden;
-  }
-  .showscard-meta-line {
-    @apply inline-flex items-center gap-[6px] text-[10.5px] tracking-[0.06em] uppercase text-[#444] h-[16px] leading-[16px] overflow-hidden whitespace-nowrap;
-  }
-
-  .showscard-strip {
-    @apply grid grid-cols-5 gap-1 mt-[10px];
-  }
-  .showscard-thumb {
-    @apply relative aspect-[3/4] bg-[#f1f1f1] overflow-hidden;
-  }
-  .showscard-thumb img {
-    @apply w-full h-full object-cover opacity-0 transition-opacity duration-450 ease-in-out;
-  }
-  .showscard-thumb img.is-loaded {
-    @apply opacity-100;
-  }
-  .showscard-thumb.placeholder {
-    @apply bg-[#f6f6f6];
-  }
-  .showscard-thumb-more {
-    @apply absolute inset-0 bg-black/55 text-white text-[11px] font-bold tracking-[0.04em] flex items-center justify-center;
-  }
-
-  .showscard--skel .showscard-img,
-  .showscard--skel .showscard-thumb,
-  .showscard--skel .showsline {
-    @apply bg-[#efefef];
-    animation: hbxShim 1.6s ease infinite;
-  }
-
-  .showsloadmore-wrap {
-    @apply flex justify-center mt-[38px];
-  }
-  .showsloadmore {
-    @apply border-[1.5px] border-black bg-white text-black p-[13px_36px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-200 hover:bg-black hover:text-white disabled:opacity-40 disabled:cursor-default;
-  }
-
-  .showsempty {
-    @apply col-span-full p-[80px_20px] text-center text-xs tracking-[0.22em] uppercase text-[#999] border border-dashed border-[#ccc];
-  }
-
-  @keyframes hbxProg { 0% { left: -38%; } 100% { left: 100%; } }
-  @keyframes hbxShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
-  /* ===== 品牌筛选弹窗（语言切换器风格：无 mask、顶部小箭头、干净白底列表） ===== */
-  .showsmodal {
-    @apply fixed inset-0 z-[60] flex items-start justify-center pt-[14vh] pointer-events-none;
-  }
-  .showsmodal-mask {
-    @apply absolute inset-0 pointer-events-auto cursor-default;
-    background: transparent;
-  }
-  .showsmodal-panel {
-    @apply relative w-full max-w-[460px] max-h-[72vh] bg-white flex flex-col border border-black/10 pointer-events-auto;
-    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
-  }
-  /* 顶部小三角箭头（语言切换器同款：白底 + 浅边框） */
-  .showsmodal-panel::before {
-    content: "";
-    position: absolute;
-    top: -5px;
-    left: 50%;
-    width: 10px;
-    height: 10px;
-    background: white;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    transform: translateX(-50%) rotate(45deg);
-  }
-  .showsmodal-head {
-    @apply flex items-center justify-between px-4 pt-4 pb-2 shrink-0;
-  }
-  .showsmodal-head h3 {
-    @apply m-0 text-[12px] tracking-[0.22em] uppercase font-bold;
-  }
-  .showsmodal-x {
-    @apply appearance-none bg-transparent border-0 w-6 h-6 inline-flex items-center justify-center cursor-pointer text-[14px] leading-none text-[#999] transition-colors hover:text-black;
-  }
-  .showsmodal-search {
-    @apply px-4 pt-1 pb-3 shrink-0;
-  }
-  .showsmodal-input {
-    @apply w-full border border-black/15 px-3 py-2 text-[13px] outline-none bg-[#fafafa] focus:bg-white focus:border-black;
-  }
-  .showsmodal-az {
-    @apply flex flex-wrap gap-1 px-4 pb-3 shrink-0;
-  }
-  .showsmodal-az .az {
-    @apply appearance-none bg-white border border-black/10 w-6 h-6 text-[10px] cursor-pointer leading-none font-mono transition-colors hover:bg-black/5;
-  }
-  .showsmodal-az .az.active {
-    @apply bg-black text-white border-black;
-  }
-  .showsmodal-az .az-hot {
-    @apply w-auto px-2 font-sans font-bold tracking-[0.12em] text-[9px];
-  }
-  .showsmodal-body {
-    @apply flex-1 min-h-0 overflow-y-auto px-2 py-1;
-  }
-  .showsmodal-hint {
-    @apply text-[10px] tracking-[0.22em] uppercase text-[#999] px-3 py-2;
-  }
-  .showsmodal-loading {
-    @apply flex justify-center py-6 text-[#bdbdbd];
-  }
-  .showsmodal-list {
-    @apply list-none m-0 p-0;
-  }
-  .showsmodal-row {
-    @apply flex items-center gap-2 w-full cursor-pointer px-3 py-2 text-[13px] transition-colors hover:bg-black/5;
-  }
-  .showsmodal-name {
-    @apply flex-1 truncate;
-  }
-  .showsmodal-ct {
-    @apply text-[#999] text-[10px] ml-auto;
-  }
-  .showsmodal-empty {
-    @apply py-6 text-center text-[#999] text-[13px];
-  }
-  .showsmodal-foot {
-    @apply flex items-center justify-between px-4 py-3 border-t border-black/5 shrink-0 text-[11px] text-[#888];
-  }
-  .showsmodal-counter {
-    @apply tracking-[0.06em];
-  }
-  .showsmodal-ok {
-    @apply appearance-none bg-black text-white border border-black px-4 py-1.5 cursor-pointer text-[12px] tracking-[0.1em] transition-colors hover:bg-black/85;
-  }
-
-
-</style>
-
-<script>
-  import Alpine from "alpinejs"
-  import { getArticles, getBrands, toAbs, type ArticleItem, type BrandEntry } from "@/lib/api"
-  import { clientHref, ROUTES } from "@/lib/routes"
-
-  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 SPIN_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true" class="w-[22px] h-[22px] block"><g class="ring origin-[12px_12px] animate-spin" 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>`
-
-  document.addEventListener("alpine:init", () => {
-    Alpine.data("showsPage", () => {
-      const node = document.getElementById("showsbrands-data")
-      const allBrands: BrandEntry[] = node?.textContent ? JSON.parse(node.textContent) : []
-      const hotNode = document.getElementById("showshotbrands-data")
-      const hotBrands = hotNode?.textContent ? JSON.parse(hotNode.textContent) : []
-
-      return {
-        allBrands,
-        hotBrands,
-        locale: '',
-        ICON_USER,
-        ICON_DATE,
-        SPIN_SVG,
-        collapsedGroups: {
-          designers: localStorage.getItem("showsg-designers") === "1",
-          collection: localStorage.getItem("showsg-collection") === "1",
-          season: localStorage.getItem("showsg-season") === "1",
-          year: localStorage.getItem("showsg-year") === "1",
-        },
-        selectedBrands: [] as number[],
-        selectedCt: [] as string[],
-        selectedSeason: [] as string[],
-        selectedYear: [] as string[],
-        brandsExpanded: false,
-
-        // 品牌筛选弹窗状态
-        modalOpen: false,
-        modalKeyword: "",
-        modalLetter: "",
-        modalResults: [] as BrandEntry[],
-        modalLoading: false,
-        modalSelected: [] as number[],
-
-        items: [] as (ArticleItem & { _imgLoaded?: boolean })[],
-        loading: false,
-        loadingMore: false,
-        page: 1,
-        size: 24,
-        total: 0,
-        isEnd: false,
-        reqToken: 0,
-
-        init() {
-          this.locale = this.$el.dataset.locale || 'en'
-          this.loadPage(1, false)
-        },
-
-        // 计算属性：侧边栏设计师列表的分组渲染
-        get visibleBrandItems() {
-          const result: any[] = []
-          const map = new Map<string, BrandEntry[]>()
-          for (const b of this.allBrands) {
-            const letter = (b.name[0] || "?").toUpperCase()
-            if (!map.has(letter)) map.set(letter, [])
-            map.get(letter)!.push(b)
-          }
-          const grouped = [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
-
-          let shown = 0
-          const MAX_INITIAL = 60
-          for (const [letter, list] of grouped) {
-            if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-            result.push({ type: "letter", letter, key: `letter-${letter}` })
-            for (const b of list) {
-              if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-              result.push({ type: "brand", id: b.id, name: b.name, count: b.article_count, key: b.id })
-              shown++
-            }
-          }
-          return result
-        },
-
-        get hasMoreBrands() {
-          return this.allBrands.length > 60
-        },
-
-        // 面包屑末级：未选年份时显示默认的「2026 Edition」，选中后显示对应年份
-        get crumbYear() {
-          if (this.selectedYear.length) {
-            const ys = [...this.selectedYear].sort()
-            return ys.length === 1 ? `${ys[0]} Edition` : `${ys.join(" / ")}`
-          }
-          return "2026 Edition"
-        },
-
-        // 骨架屏数量与首屏 data 数量一致，保证「加载中」与「数据完成」两阶段的网格高度相同，消除抖动
-        get skeletonCount() {
-          return this.size
-        },
-
-        // 已筛选选项 Pills 视图数据
-        get pills() {
-          const list: { label: string; clear: () => void }[] = []
-          if (this.selectedBrands.length) {
-            const findName = (id: any) => this.allBrands.find((b) => b.id === id)?.name ?? this.hotBrands.find((b) => b.id === id)?.name ?? `#${id}`
-            const labels = this.selectedBrands
-              .map((id) => findName(id))
-              .slice(0, 4)
-            const more = this.selectedBrands.length > 4 ? ` +${this.selectedBrands.length - 4}` : ""
-            list.push({
-              label: "DESIGNER · " + labels.join(", ") + more,
-              clear: () => { this.selectedBrands = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedCt.length) {
-            list.push({
-              label: "COLLECTION · " + this.selectedCt.join("+").toUpperCase(),
-              clear: () => { this.selectedCt = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedSeason.length) {
-            list.push({
-              label: "SEASON · " + this.selectedSeason.join("+").toUpperCase(),
-              clear: () => { this.selectedSeason = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedYear.length) {
-            list.push({
-              label: "YEAR · " + [...this.selectedYear].sort().join("+"),
-              clear: () => { this.selectedYear = []; this.refreshFilter(); }
-            })
-          }
-          return list
-        },
-
-        get loadBtnText() {
-          if (this.loadingMore) return "Loading…"
-          if (this.isEnd) return "— End of Archive —"
-          return "Load More ↓"
-        },
-
-        // 事件处理方法
-        toggleGroup(group: "designers" | "collection" | "season" | "year") {
-          this.collapsedGroups[group] = !this.collapsedGroups[group]
-          localStorage.setItem(`showsg-${group}`, this.collapsedGroups[group] ? "1" : "")
-        },
-
-        toggleBrand(id: number) {
-          if (this.selectedBrands.includes(id)) this.selectedBrands = []
-          else this.selectedBrands = [id]
-          this.refreshFilter()
-        },
-
-        refreshFilter() {
-          this.loadPage(1, false)
-        },
-
-        // ===== 品牌筛选弹窗方法 =====
-        async openBrandModal() {
-          this.modalSelected = [...this.selectedBrands]
-          this.modalKeyword = ""
-          this.modalLetter = "HOT"
-          this.modalOpen = true
-          await this.modalLoadHot()
-        },
-        closeBrandModal() {
-          this.modalOpen = false
-        },
-        async modalLoadHot() {
-          this.modalLetter = "HOT"
-          this.modalLoading = true
-          try {
-            this.modalResults = this.hotBrands.length
-              ? this.hotBrands.map((b) => ({ id: b.id, name: b.name, article_count: b.article_count || 0 }))
-              : this.allBrands.slice(0, 50)
-          } finally {
-            this.modalLoading = false
-          }
-        },
-        async modalSearch() {
-          const kw = this.modalKeyword.trim()
-          if (kw) {
-            this.modalLetter = ""
-            this.modalLoading = true
-            try {
-              this.modalResults = await getBrands({ keyword: kw, size: 60 })
-            } catch {
-              this.modalResults = []
-            } finally {
-              this.modalLoading = false
-            }
-          } else if (this.modalLetter) {
-            await this.modalPickLetter(this.modalLetter)
-          } else {
-            await this.modalLoadHot()
-          }
-        },
-        async modalPickLetter(l: string) {
-          if (l === "HOT") {
-            this.modalKeyword = ""
-            await this.modalLoadHot()
-            return
-          }
-          this.modalLetter = l
-          this.modalKeyword = ""
-          this.modalLoading = true
-          try {
-            const letter = l === "#" ? "OTHER" : l
-            this.modalResults = await getBrands({ letter, size: 200 })
-          } catch {
-            this.modalResults = []
-          } finally {
-            this.modalLoading = false
-          }
-        },
-        toggleModalBrand(id: number) {
-          if (this.modalSelected.includes(id)) this.modalSelected = []
-          else this.modalSelected = [id]
-        },
-        confirmBrandModal() {
-          this.selectedBrands = [...this.modalSelected]
-          this.modalOpen = false
-          this.refreshFilter()
-        },
-
-        clearAll() {
-          this.selectedBrands = []
-          this.selectedCt = []
-          this.selectedSeason = []
-          this.selectedYear = []
-          this.refreshFilter()
-        },
-
-        // API 加载
-        async loadPage(page: number, append = false) {
-          const myToken = ++this.reqToken
-          if (append) {
-            this.loadingMore = true
-          } else {
-            this.loading = true
-            this.items = []
-          }
-
-          try {
-            const json = await getArticles({
-              page,
-              size: this.size,
-              sort: "newest",
-              brand_ids: this.selectedBrands,
-              collection_type: this.selectedCt,
-              season: this.selectedSeason,
-              year: this.selectedYear,
-              with_images: 6,
-            })
-
-            if (myToken !== this.reqToken) return
-
-            const rows = json.data.map((item: ArticleItem) => ({ ...item, _imgLoaded: false }))
-            this.total = json.total
-            this.page = page
-            this.items = append ? [...this.items, ...rows] : rows
-
-            this.isEnd = page >= json.last_page || rows.length < this.size
-          } catch {
-            if (myToken !== this.reqToken) return
-            if (!append) this.items = []
-          } finally {
-            if (myToken === this.reqToken) {
-              this.loading = false
-              this.loadingMore = false
-            }
-          }
-        },
-
-        // 辅助辅助工具函数
-        toAbsUrl(url: string) { return toAbs(url) },
-        articleHref(it: { id: string | number }) { return clientHref(this.locale, ROUTES.article(it.id)) },
-        isNewAdded(pubAt?: number) { return Date.now() / 1000 - Number(pubAt || 0) < 60 * 60 * 24 * 14 },
-        fmtDate(ts: number) {
-          if (!ts) return ""
-          const d = new Date(ts * 1000)
-          return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
-        },
-        ctLabel(ct?: string) {
-          const map: Record<string, string> = { rtw: "Ready-to-Wear", menswear: "Menswear", womenswear: "Womenswear", couture: "Couture", resort: "Resort", pre_fall: "Pre-Fall", bridal: "Bridal", swimwear: "Swimwear" }
-          return ct && map[ct] ? map[ct] : (ct || "")
-        },
-        getCardSlots(it: ArticleItem) {
-          const gallery = it.gallery || []
-          const totalCount = it.image_count || 0
-          const moreLabel = totalCount > 30 ? "30+" : `${totalCount || 0}+`
-          const slots = []
-          for (let i = 0; i < 5; i++) {
-            const src = gallery[i]
-            const isLast = i === 4
-            slots.push({ src, loaded: false, isLast, moreLabel: (isLast && totalCount > 0) ? moreLabel : "" })
-          }
-          return slots
-        }
-      }
-    })
-  })
-</script>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Contact from "@/components/pages/Contact.astro"
---
-
-<Layout title="Contact — 暂未上线">
-  <Contact />
-</Layout>
--- a/src/pages/en/about.astro
+++ b/src/pages/en/about.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import About from "@/components/pages/About.astro"
---
-
-<Layout title="About — 暂未上线">
-  <About />
-</Layout>
--- a/src/pages/en/article.astro
+++ b/src/pages/en/article.astro
@ -7,7 +7,7 @@ import { getSsrArticle } from "@/lib/api"
 export const prerender = false

 const id = Astro.url.searchParams.get("id")
-const { article, error } = await getSsrArticle(id)
+const { article, error } = await getSsrArticle(id, Astro.currentLocale)
 ---

 <Layout>
--- a/src/pages/en/item/[id].astro
+++ b/src/pages/en/item/[id].astro
@ -7,7 +7,7 @@ import { getSsrArticle } from "@/lib/api"
 export const prerender = false

 const { id } = Astro.params
-const { article, error } = await getSsrArticle(id)
+const { article, error } = await getSsrArticle(id, Astro.currentLocale)
 ---

 <Layout>
--- a/src/pages/en/login.astro
+++ b/src/pages/en/login.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import AuthForm from "@/components/pages/AuthForm.astro"
---
-
-<Layout title="Sign In">
-  <AuthForm mode="login" />
-</Layout>
--- a/src/pages/en/register.astro
+++ b/src/pages/en/register.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import AuthForm from "@/components/pages/AuthForm.astro"
---
-
-<Layout title="Create Account">
-  <AuthForm mode="register" />
-</Layout>
--- a/src/pages/latest-projects.astro
+++ b/src/pages/latest-projects.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import LatestProjects from "@/components/pages/LatestProjects.astro"
---
-
-<Layout title="Latest Projects — 暂未上线">
-  <LatestProjects />
-</Layout>
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Login from "@/components/pages/Login.astro"
---
-
-<Layout title="Sign In — 暂未上线">
-  <Login />
-</Layout>
--- a/src/pages/portfolio.astro
+++ b/src/pages/portfolio.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Portfolio from "@/components/pages/Portfolio.astro"
---
-
-<Layout title="Portfolio — 暂未上线">
-  <Portfolio />
-</Layout>
--- a/src/pages/register.astro
+++ b/src/pages/register.astro
@ -1,8 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Register from "@/components/pages/Register.astro"
---
-
-<Layout title="Create Account — 暂未上线">
-  <Register />
-</Layout>
--- a/src/pages/shows.astro
+++ b/src/pages/shows.astro
@ -1,765 +0,0 @@
---
-import Layout from "@/layouts/Layout.astro"
-import Breadcrumb from "@/components/Breadcrumb.astro"
-import { getBrands, getSsgPopularBrands, type BrandEntry } from "@/lib/api"
-import { getI18n } from '@/i18n/utils'
-import { clientHref, ROUTES, href } from '@/lib/routes'
-
-const { locale } = getI18n(Astro)
-let sidebarBrands: BrandEntry[] = []
-
-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 {}
-
-// 热门品牌：构建期走 SSG 内部接口（/api/ssg/brands/popular），不可用时回落假数据先看效果
-const FAKE_HOT_BRANDS = [
-  { id: "hot-chanel", name: "Chanel", article_count: 342 },
-  { id: "hot-dior", name: "Dior", article_count: 318 },
-  { id: "hot-gucci", name: "Gucci", article_count: 287 },
-  { id: "hot-prada", name: "Prada", article_count: 254 },
-  { id: "hot-louisvuitton", name: "Louis Vuitton", article_count: 241 },
-  { id: "hot-saintlaurent", name: "Saint Laurent", article_count: 219 },
-  { id: "hot-balenciaga", name: "Balenciaga", article_count: 198 },
-  { id: "hot-valentino", name: "Valentino", article_count: 176 },
-  { id: "hot-givenchy", name: "Givenchy", article_count: 162 },
-  { id: "hot-burberry", name: "Burberry", article_count: 153 },
-  { id: "hot-fendi", name: "Fendi", article_count: 141 },
-  { id: "hot-bottega", name: "Bottega Veneta", article_count: 128 },
-]
-let hotBrands: { id: string; name: string; article_count: number }[] = []
-try {
-  const ssg = await getSsgPopularBrands(12)
-  if (ssg.length) hotBrands = ssg.map((b) => ({ id: String(b.id), name: b.brand || "", article_count: 0 }))
-} catch {}
-if (!hotBrands.length) hotBrands = FAKE_HOT_BRANDS
-
-// 年份筛选：写死，按需增删（数据最早约 2005 年，如需更老年份往数组里加即可）
-// 年份：从当今年份往前推 15 年（含），末项加"X年前"兜底
-const currentYear = new Date().getFullYear()
-const yearFloor = currentYear - 15
-const yearOptions: { value: number | string; label: string }[] = []
-for (let y = currentYear; y >= yearFloor; y--) {
-  yearOptions.push({ value: y, label: String(y) })
-}
-yearOptions.push({ value: `before${yearFloor}`, label: `${yearFloor}年前` })
-
-// 系列类型 / 季节：写死静态数据（先用示例/假数据预览，确认后直接改这两个数组即可）
-const collectionOptions: { value: string; label: string }[] = [
-  { value: "rtw", label: "Ready-to-Wear" },
-  { value: "menswear", label: "Menswear" },
-  { value: "womenswear", label: "Womenswear" },
-  { value: "couture", label: "Couture" },
-  { value: "resort", label: "Resort" },
-  { value: "pre_fall", label: "Pre-Fall" },
-  { value: "bridal", label: "Bridal" },
-  { value: "swimwear", label: "Swimwear" },
-]
-const seasonOptions: { value: string; label: string }[] = [
-  { value: "spring", label: "Spring / Summer" },
-  { value: "fall", label: "Fall / Winter" },
-  { value: "cruise", label: "Cruise" },
-  { value: "holiday", label: "Holiday" },
-]
---
-
-<Layout title="全部的 runway — Portfolio Studio">
-  <!-- 首屏绘制前同步侧边栏折叠状态，杜绝刷新时的闪烁 -->
-  <script is:inline>
-    try {
-      if (localStorage.getItem("showsaside-collapsed") === "1") {
-        document.documentElement.classList.add("showsaside-collapsed")
-      }
-    } catch (e) {}
-  </script>
-
-  <div class="showsroot w-full" x-data="showsPage()" data-locale={locale}>
-    <!-- 顶部：极简眉头 -->
-    <header class="showshead">
-      <div>
-        <Breadcrumb
-          items={[
-            { label: 'Home', href: href(locale, ROUTES.home) },
-            { label: 'Runway Archive', href: href(locale, ROUTES.shows) },
-          ]}
-        >
-          <span slot="current" x-text="crumbYear">2026 Edition</span>
-        </Breadcrumb>
-
-        <h1 class="showsh1">全部的 runway</h1>
-      </div>
-    </header>
-
-    <!-- 已激活筛选 pills -->
-    <div class="showspills" x-show="pills.length > 0" x-cloak>
-      <template x-for="(p, i) in pills" :key="i">
-        <span class="showspill">
-          <span x-text="p.label"></span>
-          <button class="x" type="button" @click="p.clear()">×</button>
-        </span>
-      </template>
-    </div>
-
-    <!-- 主体：左 sidebar + 右 4 列商品 grid -->
-    <div class="showsbody">
-      <!-- LEFT SIDEBAR -->
-      <aside class="showsaside" :class="{ 'is-collapsed': asideCollapsed }">
-        <div class="showsaside-head">
-          <h2 class="showsaside-h">REFINE</h2>
-          <button class="showsaside-toggle" type="button" aria-label="折叠/展开筛选" @click="toggleAside()">
-            <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" x-show="!asideCollapsed">
-          <!-- Designer 多选 -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('designers')">
-              <span>DESIGNERS</span>
-              <span class="showsg-right">
-                <span class="showsg-count" x-text="selectedBrands.length">0</span>
-                <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.designers }">
-                  <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" x-show="!collapsedGroups.designers">
-              <div class="showshot" x-show="hotBrands.length">
-                <div class="mb-2 text-[10px] uppercase tracking-[0.18em] text-black/45">HOT · Popular</div>
-                <div class="flex flex-wrap gap-1.5">
-                  <template x-for="b in hotBrands" :key="b.id">
-                    <label class="inline-flex items-center gap-1.5 border border-black/15 px-2 py-1 text-[11px] cursor-pointer transition-colors has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white">
-                      <input type="checkbox" :value="b.id" :checked="selectedBrands.includes(b.id)" @change="toggleBrand(b.id)" />
-                      <span x-text="b.name"></span>
-                    </label>
-                  </template>
-                </div>
-              </div>
-              <ul class="showschecks">
-                <template x-for="item in visibleBrandItems" :key="item.key">
-                  <li>
-                    <!-- Letter Header -->
-                    <template x-if="item.type === 'letter'">
-                      <div class="letter-head" x-text="item.letter"></div>
-                    </template>
-
-                    <!-- Brand Item -->
-                    <template x-if="item.type === 'brand'">
-                      <label class="flex items-center gap-2 w-full cursor-pointer">
-                        <input 
-                          type="checkbox" 
-                          :value="item.id" 
-                          :checked="selectedBrands.includes(item.id)" 
-                          @change="toggleBrand(item.id)"
-                        >
-                        <span x-text="item.name"></span>
-                        <span class="ct" x-text="item.count ? item.count : ''"></span>
-                      </label>
-                    </template>
-                  </li>
-                </template>
-              </ul>
-              <a class="showsmore" x-show="hasMoreBrands" @click="brandsExpanded = !brandsExpanded" x-text="brandsExpanded ? 'Show fewer ▴' : `Show all ${allBrands.length} designers ▾`"></a>
-            </div>
-          </section>
-
-          <!-- Collection type -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('collection')">
-              <span>COLLECTION</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.collection }">
-                <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" x-show="!collapsedGroups.collection">
-              <ul class="showschecks showschecks--flat">
-                {collectionOptions.map((o) => (
-                  <li><label><input type="checkbox" value={o.value} x-model="selectedCt" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <!-- Season -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('season')">
-              <span>SEASON</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.season }">
-                <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" x-show="!collapsedGroups.season">
-              <ul class="showschecks showschecks--flat">
-                {seasonOptions.map((o) => (
-                  <li><label><input type="checkbox" value={o.value} x-model="selectedSeason" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <!-- Year -->
-          <section class="showsg">
-            <header class="showsg-h" @click="toggleGroup('year')">
-              <span>YEAR</span>
-              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.year }">
-                <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" x-show="!collapsedGroups.year">
-              <ul class="showschecks showschecks--flat">
-                {yearOptions.map((o) => (
-                  <li><label><input type="checkbox" value={String(o.value)} x-model="selectedYear" @change="refreshFilter()" /> <span>{o.label}</span></label></li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
-          <button class="showsclear" type="button" @click="clearAll()">Clear all ×</button>
-        </div>
-      </aside>
-
-      <!-- MAIN GRID -->
-      <main class="showsmain">
-        <div class="showsgrid" :class="{ 'is-loading': loading }">
-          
-          <!-- 骨架屏：结构与真实卡片完全一致，loading 期间占位，杜绝 加载中→数据完成 的尺寸抖动 -->
-          <template x-if="loading && items.length === 0">
-            <template x-for="i in skeletonCount" :key="'skel-'+i">
-              <div class="showscard showscard--skel" aria-hidden="true">
-                <div class="showscard-left">
-                  <div class="showscard-img"></div>
-                </div>
-                <div class="showscard-right">
-                  <div class="showscard-info">
-                    <div class="showsline h-[41px] mb-[10px] rounded-[2px]"></div>
-                    <div class="showsline h-[29px] mb-[14px] rounded-[2px]"></div>
-                    <div class="showsline h-[38px] rounded-[2px]"></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>
-            </template>
-          </template>
-
-          <!-- Empty State -->
-          <template x-if="!loading && items.length === 0">
-            <div class="showsempty">No shows match the current filters · 暂无符合条件的秀场</div>
-          </template>
-
-          <!-- Card List -->
-          <template x-for="it in items" :key="it.id">
-            <a class="showscard" :href="articleHref(it)" :aria-label="`${it.brand_name} ${it.title}`">
-              <div class="showscard-left">
-                <div class="showscard-img" :class="{ 'is-loaded': it._imgLoaded }">
-                  <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG"></span>
-                  <img :src="toAbsUrl(it.cover)" :alt="it.title" loading="lazy" @load="it._imgLoaded = true" @error="it._imgLoaded = true" :class="{ 'is-loaded': it._imgLoaded }" />
-                  <!-- <span class="showsbadge" x-show="isNewAdded(it.published_at)">New</span> -->
-                </div>
-              </div>
-              <div class="showscard-right">
-                <div class="showscard-info">
-                  <h3 class="showscard-title" x-text="it.title"></h3>
-                  <p class="showscard-meta" x-text="`${it.season_code || it.year || ''} · ${ctLabel(it.collection_type)} · ${it.brand_name}`"></p>
-                  <div class="showscard-meta-foot">
-                    <span class="showscard-meta-line"><span x-html="ICON_USER"></span><span x-text="it.brand_name"></span></span>
-                    <span class="showscard-meta-line"><span x-html="ICON_DATE"></span><span x-text="fmtDate(it.published_at)"></span></span>
-                  </div>
-                </div>
-                <div class="showscard-strip">
-                  <template x-for="(slot, idx) in getCardSlots(it)" :key="idx">
-                    <div class="showscard-thumb" :class="{ 'placeholder': !slot.src, 'is-loaded': slot.loaded }">
-                      <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG" x-show="slot.src"></span>
-                      <img x-show="slot.src" :src="toAbsUrl(slot.src)" alt="" loading="lazy" @load="slot.loaded = true" @error="slot.loaded = true" :class="{ 'is-loaded': slot.loaded }" />
-                      <span class="showscard-thumb-more" x-show="slot.isLast && slot.moreLabel" x-text="slot.moreLabel"></span>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </a>
-          </template>
-        </div>
-
-        <div class="showsloadmore-wrap" x-show="items.length > 0">
-          <button class="showsloadmore" type="button" :disabled="loadingMore || isEnd" @click="loadPage(page + 1, true)" x-text="loadBtnText"></button>
-        </div>
-      </main>
-    </div>
-  </div>
-</Layout>
-
-<script id="showsbrands-data" type="application/json" set:html={JSON.stringify(sidebarBrands)}></script>
-<script id="showshotbrands-data" type="application/json" set:html={JSON.stringify(hotBrands)}></script>
-
-<style>
-  @reference "tailwindcss";
-  [x-cloak] { display: none !important; }
-
-
-  /* 使用 @apply 精简并重构样式 */
-  .showsroot {
-    @apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
-  }
-
-  .showshead {
-    @apply flex justify-between items-end gap-6 py-5 pb-[26px] ;
-  }
-  .showsh1 {
-    @apply text-[clamp(40px,6vw,72px)] leading-[0.9] font-black tracking-[-0.02em] my-0 mb-[10px];
-  }
-
-  .showspills {
-    @apply flex flex-wrap gap-2 pt-3.5;
-  }
-  .showspill {
-    @apply inline-flex items-center gap-2 border-[1.5px] border-black p-[6px_10px] text-[10.5px] uppercase tracking-[0.14em] text-black bg-white;
-  }
-  .showspill .x {
-    @apply inline-flex w-3.5 h-3.5 items-center justify-center border-none bg-black text-white cursor-pointer text-xs leading-none;
-  }
-
-  .showsbody {
-    @apply flex gap-[36px] items-start max-md:flex-col max-md:gap-[18px];
-  }
-
-  .showsaside {
-    @apply flex-none w-[240px] bg-white sticky top-5 max-h-[calc(100vh-40px)] rounded-none transition-[flex-basis] duration-250 ease-in-out flex flex-col max-md:static max-md:max-h-none max-md:w-full;
-  }
-  html.showsaside-collapsed .showsaside,
-  .showsaside.is-collapsed {
-    @apply flex-none w-[44px];
-  }
-
-  .showsaside-head {
-    @apply flex items-center justify-between p-[14px_14px_12px] border-b border-black shrink-0;
-  }
-  .showsaside-h {
-    @apply text-[11px] tracking-[0.26em] uppercase font-bold m-0 leading-none transition-opacity duration-200;
-  }
-  html.showsaside-collapsed .showsaside-h,
-  .showsaside.is-collapsed .showsaside-h {
-    @apply opacity-0 pointer-events-none w-0 overflow-hidden;
-  }
-
-  .showsaside-toggle {
-    @apply appearance-none bg-white border-[1.5px] border-black w-[22px] h-[22px] inline-flex items-center justify-center cursor-pointer rounded-none text-black p-0 transition-transform duration-250 ease-in-out hover:bg-black hover:text-white;
-  }
-  html.showsaside-collapsed .showsaside-toggle,
-  .showsaside.is-collapsed .showsaside-toggle {
-    @apply ml-auto rotate-180;
-  }
-
-  .showsaside-body {
-    @apply p-[14px_14px_18px] overflow-y-auto flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#ccc_#fff];
-  }
-  html.showsaside-collapsed .showsaside-body {
-    @apply hidden;
-  }
-
-  .showsg {
-    @apply border-t border-[#e6e6e6] py-[12px] pb-[6px] first-of-type:border-t-0 first-of-type:pt-1;
-  }
-  .showsg-h {
-    @apply flex justify-between items-center text-[11px] tracking-[0.22em] uppercase font-bold text-black mb-2 cursor-pointer select-none;
-  }
-  .showsg-right {
-    @apply inline-flex items-center gap-2.5;
-  }
-  .showsg-chev {
-    @apply inline-block text-[9px] leading-none text-[#999] transition-transform duration-200 ml-1;
-  }
-  .showsg-chev.is-collapsed {
-    @apply -rotate-90;
-  }
-  .showsg-count {
-    @apply text-[#999] font-normal text-[10px] tracking-[0.14em];
-  }
-
-
-
-  .showschecks {
-    @apply list-none mt-[10px] mb-0 p-0 max-h-[280px] overflow-y-auto [scrollbar-width:thin];
-  }
-  .showschecks li {
-    @apply flex items-center gap-2 py-[5px] text-[11.5px] uppercase tracking-[0.04em] text-black cursor-pointer select-none hover:bg-[#f6f6f6];
-  }
-  .showschecks li.letter-head {
-    @apply p-[8px_0_3px] text-[10px] tracking-[0.22em] text-[#8a8a8a] cursor-default pointer-events-none border-t border-dotted border-[#e6e6e6] first:border-t-0 first:pt-1;
-  }
-  .showschecks input[type="checkbox"] {
-    @apply appearance-none w-3 h-3 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-none inline-grid place-content-center checked:bg-black;
-  }
-  .showschecks input[type="checkbox"]:checked::after {
-    content: "";
-    @apply w-[6px] h-[6px] bg-white;
-  }
-  .showschecks .ct {
-    @apply text-[#999] text-[10px] ml-auto;
-  }
-
-  .showschecks--flat li {
-    @apply py-[4px];
-  }
-  .showschecks--flat li label {
-    @apply inline-flex items-center gap-2 cursor-pointer w-full;
-  }
-
-  .showsmore {
-    @apply inline-block mt-[10px] text-[10.5px] uppercase tracking-[0.16em] text-[#555] cursor-pointer hover:text-black;
-  }
-  .showsclear {
-    @apply mt-[18px] w-full border-[1.5px] border-black bg-white text-black p-[11px_12px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-150 hover:bg-black hover:text-white;
-  }
-
-  .showsmain {
-    @apply flex-1 min-w-0;
-  }
-  .showsgrid {
-    @apply grid grid-cols-2 gap-[22px] relative max-[560px]:grid-cols-1;
-  }
-  .showsgrid.is-loading::before {
-    content: "";
-    @apply absolute -top-1 left-0 h-[2px] w-[38%] bg-black z-10;
-    animation: hbxProg 1s ease-in-out infinite;
-  }
-
-  .showscard {
-    @apply relative flex gap-[14px] no-underline text-inherit bg-white p-3 transition-colors duration-200 hover:border-black max-[700px]:flex-col max-[700px]:gap-[10px];
-  }
-  .showscard:hover .showscard-img img {
-    @apply scale-104;
-  }
-
-  .showscard-left {
-    @apply flex-none w-[30%] min-w-[110px] max-[700px]:w-full max-[700px]:flex-none;
-  }
-  .showscard-img {
-    @apply relative w-full aspect-[3/4] bg-[#f1f1f1] overflow-hidden rounded-none;
-  }
-  .showscard-img img {
-    @apply w-full h-full object-cover transition-transform duration-600 opacity-0;
-  }
-  .showscard-img img.is-loaded {
-    @apply opacity-100;
-  }
-
-  .showsspin {
-    @apply absolute inset-0 flex items-center justify-center text-[#bdbdbd] opacity-100 transition-opacity duration-300 pointer-events-none z-10;
-  }
-  .showscard-img.is-loaded .showsspin,
-  .showscard-thumb.is-loaded .showsspin {
-    @apply opacity-0;
-  }
-
-  .showsbadge {
-    @apply absolute top-[6px] right-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-white bg-black p-[3px_6px];
-  }
-  .showsflag-featured {
-    @apply absolute top-[6px] left-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-black bg-white p-[3px_6px] border border-black;
-  }
-
-  .showscard-right {
-    @apply flex-1 min-w-0 flex flex-col justify-between max-[700px]:w-full;
-  }
-  .showscard-info {
-    @apply flex-none min-w-0 flex flex-col p-[2px_2px_0];
-  }
-  .showscard-title {
-    @apply text-[15.5px] font-bold leading-[1.32] my-0 mb-[10px] text-[#111] tracking-[-0.01em] line-clamp-2 h-[41px] overflow-hidden;
-  }
-  .showscard-meta {
-    @apply text-[9.5px] text-[#888] my-0 mb-[14px] leading-[1.55] tracking-[0.04em] uppercase line-clamp-2 h-[29px] overflow-hidden;
-  }
-  .showscard-meta-foot {
-    @apply flex flex-col gap-[6px] h-[38px] overflow-hidden;
-  }
-  .showscard-meta-line {
-    @apply inline-flex items-center gap-[6px] text-[10.5px] tracking-[0.06em] uppercase text-[#444] h-[16px] leading-[16px] overflow-hidden whitespace-nowrap;
-  }
-
-  .showscard-strip {
-    @apply grid grid-cols-5 gap-1 mt-[10px];
-  }
-  .showscard-thumb {
-    @apply relative aspect-[3/4] bg-[#f1f1f1] overflow-hidden;
-  }
-  .showscard-thumb img {
-    @apply w-full h-full object-cover opacity-0 transition-opacity duration-450 ease-in-out;
-  }
-  .showscard-thumb img.is-loaded {
-    @apply opacity-100;
-  }
-  .showscard-thumb.placeholder {
-    @apply bg-[#f6f6f6];
-  }
-  .showscard-thumb-more {
-    @apply absolute inset-0 bg-black/55 text-white text-[11px] font-bold tracking-[0.04em] flex items-center justify-center;
-  }
-
-  .showscard--skel .showscard-img,
-  .showscard--skel .showscard-thumb,
-  .showscard--skel .showsline {
-    @apply bg-[#efefef];
-    animation: hbxShim 1.6s ease infinite;
-  }
-
-  .showsloadmore-wrap {
-    @apply flex justify-center mt-[38px];
-  }
-  .showsloadmore {
-    @apply border-[1.5px] border-black bg-white text-black p-[13px_36px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-200 hover:bg-black hover:text-white disabled:opacity-40 disabled:cursor-default;
-  }
-
-  .showsempty {
-    @apply col-span-full p-[80px_20px] text-center text-xs tracking-[0.22em] uppercase text-[#999] border border-dashed border-[#ccc];
-  }
-
-  @keyframes hbxProg { 0% { left: -38%; } 100% { left: 100%; } }
-  @keyframes hbxShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
-
-</style>
-
-<script>
-  import Alpine from "alpinejs"
-  import { getArticles, toAbs, type ArticleItem, type BrandEntry } from "@/lib/api"
-  import { clientHref, ROUTES } from "@/lib/routes"
-
-  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 SPIN_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true" class="w-[22px] h-[22px] block"><g class="ring origin-[12px_12px] animate-spin" 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>`
-
-  document.addEventListener("alpine:init", () => {
-    Alpine.data("showsPage", () => {
-      const node = document.getElementById("showsbrands-data")
-      const allBrands: BrandEntry[] = node?.textContent ? JSON.parse(node.textContent) : []
-      const hotNode = document.getElementById("showshotbrands-data")
-      const hotBrands = hotNode?.textContent ? JSON.parse(hotNode.textContent) : []
-
-      return {
-        allBrands,
-        hotBrands,
-        locale: '',
-        ICON_USER,
-        ICON_DATE,
-        SPIN_SVG,
-        asideCollapsed: localStorage.getItem("showsaside-collapsed") === "1",
-        collapsedGroups: {
-          designers: localStorage.getItem("showsg-designers") === "1",
-          collection: localStorage.getItem("showsg-collection") === "1",
-          season: localStorage.getItem("showsg-season") === "1",
-          year: localStorage.getItem("showsg-year") === "1",
-        },
-        selectedBrands: [] as number[],
-        selectedCt: [] as string[],
-        selectedSeason: [] as string[],
-        selectedYear: [] as string[],
-        brandsExpanded: false,
-
-        items: [] as (ArticleItem & { _imgLoaded?: boolean })[],
-        loading: false,
-        loadingMore: false,
-        page: 1,
-        size: 24,
-        total: 0,
-        isEnd: false,
-        reqToken: 0,
-
-        init() {
-          this.locale = this.$el.dataset.locale || 'en'
-          this.loadPage(1, false)
-        },
-
-        // 计算属性：侧边栏设计师列表的分组渲染
-        get visibleBrandItems() {
-          const result: any[] = []
-          const map = new Map<string, BrandEntry[]>()
-          for (const b of this.allBrands) {
-            const letter = (b.name[0] || "?").toUpperCase()
-            if (!map.has(letter)) map.set(letter, [])
-            map.get(letter)!.push(b)
-          }
-          const grouped = [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
-
-          let shown = 0
-          const MAX_INITIAL = 60
-          for (const [letter, list] of grouped) {
-            if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-            result.push({ type: "letter", letter, key: `letter-${letter}` })
-            for (const b of list) {
-              if (!this.brandsExpanded && shown >= MAX_INITIAL) break
-              result.push({ type: "brand", id: b.id, name: b.name, count: b.article_count, key: b.id })
-              shown++
-            }
-          }
-          return result
-        },
-
-        get hasMoreBrands() {
-          return this.allBrands.length > 60
-        },
-
-        // 面包屑末级：未选年份时显示默认的「2026 Edition」，选中后显示对应年份
-        get crumbYear() {
-          if (this.selectedYear.length) {
-            const ys = [...this.selectedYear].sort()
-            return ys.length === 1 ? `${ys[0]} Edition` : `${ys.join(" / ")}`
-          }
-          return "2026 Edition"
-        },
-
-        // 骨架屏数量与首屏 data 数量一致，保证「加载中」与「数据完成」两阶段的网格高度相同，消除抖动
-        get skeletonCount() {
-          return this.size
-        },
-
-        // 已筛选选项 Pills 视图数据
-        get pills() {
-          const list: { label: string; clear: () => void }[] = []
-          if (this.selectedBrands.length) {
-            const findName = (id: any) => this.allBrands.find((b) => b.id === id)?.name ?? this.hotBrands.find((b) => b.id === id)?.name ?? `#${id}`
-            const labels = this.selectedBrands
-              .map((id) => findName(id))
-              .slice(0, 4)
-            const more = this.selectedBrands.length > 4 ? ` +${this.selectedBrands.length - 4}` : ""
-            list.push({
-              label: "DESIGNER · " + labels.join(", ") + more,
-              clear: () => { this.selectedBrands = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedCt.length) {
-            list.push({
-              label: "COLLECTION · " + this.selectedCt.join("+").toUpperCase(),
-              clear: () => { this.selectedCt = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedSeason.length) {
-            list.push({
-              label: "SEASON · " + this.selectedSeason.join("+").toUpperCase(),
-              clear: () => { this.selectedSeason = []; this.refreshFilter(); }
-            })
-          }
-          if (this.selectedYear.length) {
-            list.push({
-              label: "YEAR · " + [...this.selectedYear].sort().join("+"),
-              clear: () => { this.selectedYear = []; this.refreshFilter(); }
-            })
-          }
-          return list
-        },
-
-        get loadBtnText() {
-          if (this.loadingMore) return "Loading…"
-          if (this.isEnd) return "— End of Archive —"
-          return "Load More ↓"
-        },
-
-        // 事件处理方法
-        toggleAside() {
-          this.asideCollapsed = !this.asideCollapsed
-          localStorage.setItem("showsaside-collapsed", this.asideCollapsed ? "1" : "")
-          document.documentElement.classList.toggle("showsaside-collapsed", this.asideCollapsed)
-        },
-
-        toggleGroup(group: "designers" | "collection" | "season" | "year") {
-          this.collapsedGroups[group] = !this.collapsedGroups[group]
-          localStorage.setItem(`showsg-${group}`, this.collapsedGroups[group] ? "1" : "")
-        },
-
-        // 单选：每次只保留一个品牌，再次点击已选项则取消
-        toggleBrand(id: number) {
-          if (this.selectedBrands.includes(id)) this.selectedBrands = []
-          else this.selectedBrands = [id]
-          this.refreshFilter()
-        },
-
-        refreshFilter() {
-          this.loadPage(1, false)
-        },
-
-        clearAll() {
-          this.selectedBrands = []
-          this.selectedCt = []
-          this.selectedSeason = []
-          this.selectedYear = []
-          this.refreshFilter()
-        },
-
-        // API 加载
-        async loadPage(page: number, append = false) {
-          const myToken = ++this.reqToken
-          if (append) {
-            this.loadingMore = true
-          } else {
-            this.loading = true
-            this.items = []
-          }
-
-          try {
-            const json = await getArticles({
-              page,
-              size: this.size,
-              sort: "newest",
-              brand_ids: this.selectedBrands,
-              collection_type: this.selectedCt,
-              season: this.selectedSeason,
-              year: this.selectedYear,
-              with_images: 6,
-            })
-
-            if (myToken !== this.reqToken) return
-
-            const rows = json.data.map((item: ArticleItem) => ({ ...item, _imgLoaded: false }))
-            this.total = json.total
-            this.page = page
-            this.items = append ? [...this.items, ...rows] : rows
-
-            this.isEnd = page >= json.last_page || rows.length < this.size
-          } catch {
-            if (myToken !== this.reqToken) return
-            if (!append) this.items = []
-          } finally {
-            if (myToken === this.reqToken) {
-              this.loading = false
-              this.loadingMore = false
-            }
-          }
-        },
-
-        // 辅助辅助工具函数
-        toAbsUrl(url: string) { return toAbs(url) },
-        articleHref(it: { id: string | number }) { return clientHref(this.locale, ROUTES.article(it.id)) },
-        isNewAdded(pubAt?: number) { return Date.now() / 1000 - Number(pubAt || 0) < 60 * 60 * 24 * 14 },
-        fmtDate(ts: number) {
-          if (!ts) return ""
-          const d = new Date(ts * 1000)
-          return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
-        },
-        ctLabel(ct?: string) {
-          const map: Record<string, string> = { rtw: "Ready-to-Wear", menswear: "Menswear", womenswear: "Womenswear", couture: "Couture", resort: "Resort", pre_fall: "Pre-Fall", bridal: "Bridal", swimwear: "Swimwear" }
-          return ct && map[ct] ? map[ct] : (ct || "")
-        },
-        getCardSlots(it: ArticleItem) {
-          const gallery = it.gallery || []
-          const totalCount = it.image_count || 0
-          const moreLabel = totalCount > 30 ? "30+" : `${totalCount || 0}+`
-          const slots = []
-          for (let i = 0; i < 5; i++) {
-            const src = gallery[i]
-            const isLast = i === 4
-            slots.push({ src, loaded: false, isLast, moreLabel: (isLast && totalCount > 0) ? moreLabel : "" })
-          }
-          return slots
-        }
-      }
-    })
-  })
-</script>