toom1996/frontend_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
Some checks failed
deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
toom1996
2026-08-23 22:26:37 +08:00
parent d75ba896e2
commit 52ad7497e8
15 changed files with 301 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/cn/shows.astro
View File

@ -3,7 +3,7 @@ import Layout from "@/layouts/Layout.astro"
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getBrands, getYears, type BrandEntry } from "@/lib/api"
import { getI18n } from '@/i18n/utils'
import { clientHref, PATH, href } from '@/lib/routes'
import { clientHref, ROUTES, href } from '@/lib/routes'
const { locale } = getI18n(Astro)
let sidebarBrands: BrandEntry[] = []
@ -23,20 +23,21 @@ try {
if (!yearChips.length) yearChips = yearSeed
---
<Layout title="All Shows — Portfolio Studio">
<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, PATH.home) },
{ label: 'Runway Archive', href: href(locale, PATH.shows) },
{ 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">All Shows</h1>
<h1 class="showsh1">全部的 runway</h1>
</div>
</header>
@ -492,57 +493,90 @@ if (!yearChips.length) yearChips = yearSeed
@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-center justify-center p-[16px];
@apply fixed inset-0 z-[60] flex items-start justify-center pt-[14vh] pointer-events-none;
}
.showsmodal-mask {
@apply absolute inset-0 bg-black/45;
@apply absolute inset-0 pointer-events-auto cursor-default;
background: transparent;
}
.showsmodal-panel {
@apply relative w-full max-w-[680px] max-h-[86vh] bg-white flex flex-col border border-black;
@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-[16px] py-[13px] border-b border-black shrink-0;
@apply flex items-center justify-between px-4 pt-4 pb-2 shrink-0;
}
.showsmodal-head h3 {
@apply m-0 text-[13px] tracking-[0.2em] uppercase font-bold;
@apply m-0 text-[12px] tracking-[0.22em] uppercase font-bold;
}
.showsmodal-x {
@apply appearance-none bg-white border border-black w-[24px] h-[24px] inline-flex items-center justify-center cursor-pointer text-[12px] leading-none;
@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-x:hover { @apply bg-black text-white; }
.showsmodal-search { @apply px-[16px] pt-[12px] pb-[8px] shrink-0; }
.showsmodal-input {
@apply w-full border border-black px-[10px] py-[8px] text-[13px] outline-none;
@apply w-full border border-black/15 px-3 py-2 text-[13px] outline-none bg-[#fafafa] focus:bg-white focus:border-black;
}
.showsmodal-input:focus { @apply ring-1 ring-black; }
.showsmodal-az {
@apply flex flex-wrap gap-[4px] px-[16px] pb-[10px] border-b border-[#e6e6e6] shrink-0;
@apply flex flex-wrap gap-1 px-4 pb-3 shrink-0;
}
.showsmodal-az .az {
@apply appearance-none bg-white border border-[#ccc] w-[22px] h-[22px] text-[11px] cursor-pointer leading-none;
@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-body {
@apply flex-1 min-h-0 overflow-y-auto px-2 py-1;
}
.showsmodal-az .az.active { @apply bg-black text-white border-black; }
.showsmodal-body { @apply flex-1 min-h-0 overflow-y-auto px-[16px] py-[8px]; }
.showsmodal-hint {
@apply text-[11px] tracking-[0.2em] uppercase text-[#888] py-[6px] pb-[8px];
@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-loading { @apply flex justify-center py-[28px] text-[#bdbdbd]; }
.showsmodal-list { @apply list-none m-0 p-0; }
.showsmodal-row {
@apply flex items-center gap-[8px] w-full cursor-pointer py-[7px] border-b border-[#f0f0f0] text-[13px];
@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-name { @apply flex-1 truncate; }
.showsmodal-ct { @apply text-[#999] text-[11px] ml-auto; }
.showsmodal-empty { @apply py-[28px] text-center text-[#999] text-[13px]; }
.showsmodal-foot {
@apply flex items-center justify-between px-[16px] py-[12px] border-t border-black shrink-0 text-[12px];
@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-[22px] py-[8px] cursor-pointer text-[12px] tracking-[0.1em];
@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>
@ -831,7 +865,7 @@ if (!yearChips.length) yearChips = yearSeed
// 辅助辅助工具函数
toAbsUrl(url: string) { return toAbs(url) },
articleHref(it: { id: string | number }) { return clientHref(this.locale, PATH.article(it.id)) },
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 ""

14
src/pages/shows.astro
View File

@ -3,7 +3,7 @@ import Layout from "@/layouts/Layout.astro"
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getBrands, getYears, type BrandEntry } from "@/lib/api"
import { getI18n } from '@/i18n/utils'
import { clientHref, PATH, href } from '@/lib/routes'
import { clientHref, ROUTES, href } from '@/lib/routes'
const { locale } = getI18n(Astro)
let sidebarBrands: BrandEntry[] = []
@ -23,7 +23,7 @@ try {
if (!yearChips.length) yearChips = yearSeed
---
<Layout title="All Shows — Portfolio Studio">
<Layout title="全部的 runway — Portfolio Studio">
<!-- 首屏绘制前同步侧边栏折叠状态，杜绝刷新时的闪烁 -->
<script is:inline>
try {
@ -39,13 +39,14 @@ if (!yearChips.length) yearChips = yearSeed
<div>
<Breadcrumb
items={[
{ label: 'Home', href: href(locale, PATH.home) },
{ label: 'Runway Archive', href: href(locale, PATH.shows) },
{ 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">All Shows</h1>
<h1 class="showsh1">全部的 runway</h1>
</div>
</header>
@ -472,6 +473,7 @@ if (!yearChips.length) yearChips = yearSeed
@keyframes hbxProg { 0% { left: -38%; } 100% { left: 100%; } }
@keyframes hbxShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
</style>
<script>
@ -689,7 +691,7 @@ if (!yearChips.length) yearChips = yearSeed
// 辅助辅助工具函数
toAbsUrl(url: string) { return toAbs(url) },
articleHref(it: { id: string | number }) { return clientHref(this.locale, PATH.article(it.id)) },
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 ""