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

6
src/components/ComingSoon.astro
View File

@ -1,6 +1,6 @@
---
import { getI18n } from '@/i18n/utils'
import { href, PATH } from '@/lib/routes'
import { href, ROUTES } from '@/lib/routes'
interface Props {
module?: string
@ -22,8 +22,8 @@ const { locale } = getI18n(Astro)
{note || "该模块正在筹备中，尚未对外开放。站点正按模块逐个完善，你可以先浏览已上线的走秀档案。"}
</p>
<div class="cs-actions">
<a class="cs-btn" href={href(locale, PATH.articles)}>浏览走秀档案 →</a>
<a class="cs-btn-ghost" href={href(locale, PATH.home)}>返回首页</a>
<a class="cs-btn" href={href(locale, ROUTES.articles)}>浏览走秀档案 →</a>
<a class="cs-btn-ghost" href={href(locale, ROUTES.home)}>返回首页</a>
</div>
</section>

19
src/components/Index.astro
View File

@ -3,7 +3,7 @@
import ComingSoon from "@/components/ComingSoon.astro"
import { toAbs } from "@/lib/api"
import { getI18n } from "@/i18n/utils"
import { href, PATH } from '@/lib/routes'
import { href, ROUTES } from '@/lib/routes'
import { getSsgPopularBrands } from "@/lib/api"
// 国际化：一行取当前语言 + 翻译函数
@ -39,34 +39,31 @@ const galleryItems: GalleryItem[] = popular
:class="{ 'is-active': activeTab === 'backstage' }"
@click="activeTab = 'backstage'"
>
A
<span class="text-xs uppercase tracking-widest bg-black text-white px-2 py-0.5 rounded-full font-mono font-bold align-super">Live</span>
Runway
<!-- <span class="text-xs uppercase tracking-widest bg-black text-white px-2 py-0.5 rounded-full font-mono font-bold align-super">Live</span> -->
</li>
<li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'shows' }"
@click="activeTab = 'shows'"
>
B
<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
Street Style
</li>
<li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'events' }"
@click="activeTab = 'events'"
>
C
<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
Social Media
</li>
<li
<!-- <li
class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap"
:class="{ 'is-active': activeTab === 'street' }"
@click="activeTab = 'street'"
>
D
<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
</li>
<a href={href(locale, PATH.brands)} class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap hover:opacity-80">E</a>
</li> -->
</ul>
</div>
@ -86,7 +83,7 @@ const galleryItems: GalleryItem[] = popular
{
galleryItems.map((g, i) => (
<div class="swiper-slide hs-slide">
<a class="hs-item" href={href(locale, PATH.item(g.articleId))} data-idx={i}>
<a class="hs-item" href={href(locale, ROUTES.item(g.articleId))} data-idx={i}>
<!-- Alpine 管理单张图片的加载/失败状态 -->
<div
class="hs-img-box"

10
src/components/Item.astro
View File

@ -2,7 +2,7 @@
import type { RawArticle } from "@/lib/data"
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getI18n } from "@/i18n/utils"
import { href, PATH } from '@/lib/routes'
import { href, ROUTES } from '@/lib/routes'
import { ssrBase } from "@/lib/api"
interface Props {
@ -32,8 +32,8 @@ const descParas = (article?.description || "")
.map((s) => s.trim())
.filter(Boolean)
const homeHref = href(locale, PATH.home)
const archiveHref = href(locale, PATH.shows)
const homeHref = href(locale, ROUTES.home)
const archiveHref = href(locale, ROUTES.shows)
const crumbs: { label: string; href: string }[] = [
// {
@ -58,11 +58,11 @@ if (article?.brand_id) {
{
article ? (
<article class="mx-auto max-w-[1600px] px-5 md:px-10 py-12 md:py-16">
<Breadcrumb items={crumbs}>
{/* <Breadcrumb items={crumbs}>
<span slot="current" class="max-w-[60vw] truncate">
{article.title}
</span>
</Breadcrumb>
</Breadcrumb> */}
<h1 class="font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
{article.title}

89
src/components/RunwayLooks.astro
View File

@ -1,7 +1,7 @@
---
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getBrands, getYears, type BrandEntry } from "@/lib/api"
import { clientHref, PATH } from '@/lib/routes'
import { clientHref, ROUTES } from '@/lib/routes'
import { getI18n } from '@/i18n/utils'
@ -33,7 +33,8 @@ if (!yearChips.length) yearChips = yearSeed
<Breadcrumb>
<span slot="current">{t('Runway looks')}</span>
</Breadcrumb>
<h1 class="showsh1">All Shows</h1>
<h1 class="showsh1">全部的 runway</h1>
</div>
</header>
@ -479,57 +480,91 @@ 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>
@ -809,7 +844,7 @@ if (!yearChips.length) yearChips = yearSeed
// 辅助辅助工具函数
toAbsUrl(url: string) { return toAbs(url) },
itemHref(it: { id: string | number }) { return clientHref(this.locale, PATH.runwayLooks(it.id)) },
itemHref(it: { id: string | number }) { return clientHref(this.locale, ROUTES.runwayLooks(it.id)) },
ctLabel(ct?: string) {
const map: Record<string, string> = { rtw: "Ready-to-Wear", menswear: "Menswear", couture: "Couture", resort: "Resort", pre_fall: "Pre-Fall" }
return ct && map[ct] ? map[ct] : (ct || "")

6
src/components/pages/articles.astro
View File

@ -1,6 +1,6 @@
---
import { getReports, fmtDate } from "@/lib/data"
import { href, PATH } from '@/lib/routes'
import { href, ROUTES } from '@/lib/routes'
import { getI18n } from "@/i18n/utils"
// 文章展示创意布局页：复用你现有的 Layout 外壳。
@ -25,7 +25,7 @@ const itemBase = href(locale, "/items")
<p>
走秀趋势报告档案库。支持网格 / 杂志 / 时间轴三种创意视图自由切换，彩色配图由后端接口动态渲染。
</p>
<a href={href(locale, PATH.home)} class="archive-back">← Index</a>
<a href={href(locale, ROUTES.home)} class="archive-back">← Index</a>
</div>
</header>
@ -69,7 +69,7 @@ const itemBase = href(locale, "/items")
style={`--ratio:${s.ratio}`}
>
<div class="card-datecol"><span class="card-date">{fmt(s.created_at)}</span></div>
<a class="card-media" href={href(locale, PATH.item(s.id))} aria-label={s.title}>
<a class="card-media" href={href(locale, ROUTES.item(s.id))} aria-label={s.title}>
<img src={s.cover} alt={s.title} loading="lazy" />
{s.featured && <span class="card-flag">Featured</span>}
</a>

4
src/components/pages/brands.astro
View File

@ -1,7 +1,7 @@
---
import { getSsgBrands, type SsgBrand } from "@/lib/api"
import { getI18n } from "@/i18n/utils"
import { href, PATH } from "@/lib/routes"
import { href, ROUTES } from "@/lib/routes"
type Brand = SsgBrand
@ -95,7 +95,7 @@ const total = orderedColumns.reduce((s, c) => s + c.items.length, 0)
<ul class="brow-items">
{col.items.map((b) => (
<li>
<a href={href(locale, PATH.articlesByBrand(b.id))}>{primaryName(b)}</a>
<a href={href(locale, ROUTES.articlesByBrand(b.id))}>{primaryName(b)}</a>
</li>
))}
</ul>

14
src/i18n/config.ts
View File

@ -9,10 +9,16 @@ export const LOCALES = ['en', 'cn'] as const;
export type Locale = (typeof LOCALES)[number];
/** 语言显示名（用于语言切换器等 UI）。 */
export const LOCALE_NAMES: Record<Locale, string> = {
en: 'English',
cn: '中文',
};
export const LOCALE_NAMES: Record<string, { name: string; nativeName: string }> = {
cn: {
name: '中文',
nativeName: '中文',
},
en: {
name: 'English',
nativeName: 'English',
},
} as const;
/** 浏览器 Accept-Language / navigator.language → 本项目支持的语言。 */
export const BROWSER_LOCALE_MAP: Record<string, Locale> = {

19
src/i18n/dictionary.ts
View File

@ -20,7 +20,7 @@ type TranslationEntry = Partial<Record<OtherLocale, string>>;
export const dict: Record<string, TranslationEntry> = {
// ── 导航 / Navigation ──
'About': { cn: '关于' },
'All Shows': { cn: '全部走秀' },
'全部的 runway': { cn: '全部的 runway' },
'Contact': { cn: '联系' },
'Contact Us': { cn: '联系我们' },
'Home': { cn: '首页' },
@ -47,6 +47,23 @@ export const dict: Record<string, TranslationEntry> = {
// ── 页脚 / Footer ──
'© 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.': { cn: '© 2026 PORTFOLIO STUDIO. 保留所有权利。' },
// ── 页脚工具 / Footer tools ──
'Color Studio Tools': { cn: '色彩工作室工具' },
'AI Color Trend Generator': { cn: 'AI 色彩趋势生成器' },
'Photo Swatch Extractor': { cn: '图片色板提取器' },
'Upload': { cn: '上传' },
'Reset B&W Theme': { cn: '重置黑白主题' },
'Default': { cn: '默认' },
// ── 页脚简介 / Manifesto ──
'Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.':
{ cn: '极简编辑风格作品集，记录高级定制秀场、后台试装与街头文化。集成 2026 色彩预测情报与 AI 调色板生成器。' },
// ── 登录态 / Auth ──
'Hi': { cn: '你好' },
'Logout': { cn: '退出' },
'Language': { cn: '语言' },
'Runway looks': {cn: '秀场造型'}
};

4
src/i18n/utils.ts
View File

@ -18,8 +18,8 @@ export function getLocaleFromUrl(url: URL | string): Locale {
/**
* 取翻译函数 t()：key 即英文原文，按当前语言自动匹配翻译。
* - 英文环境：t('All Shows') 直接返回 'All Shows'（key 本身）
* - 中文环境：t('All Shows') 返回字典里的 '全部走秀'（取不到则回退英文）
* - 英文环境：t('全部的 runway') 直接返回 '全部的 runway'（key 本身）
* - 中文环境：t('全部的 runway') 返回字典里的 '全部的 runway'（取不到则回退英文）
* - 支持 {name} 形式的插值参数。
*/
export function useTranslations(locale: Locale) {

72
src/layouts/Layout.astro
View File

@ -1,8 +1,11 @@
---
import '@/styles/global.css'
import { href, PATH } from '@/lib/routes'
import { href, ROUTES } from '@/lib/routes'
import { getI18n } from '@/i18n/utils'
import { LOCALES, LOCALE_NAMES } from '@/i18n/config'
import { i18n } from 'astro:config/client';
import { toCodes } from 'astro:i18n';
import LanguageDetector from '@/components/LanguageDetector.astro'
const {
@ -12,7 +15,11 @@ const {
activeThemePalette = null,
} = Astro.props;
const { locale, t } = getI18n(Astro)
const { locale, t, getRelativeLocaleUrl } = getI18n(Astro)
// 脚本内（打包型 <script>）无法用 {t()} 插值，需经 define:vars 把已翻译字符串传入
const hiLabel = t('Hi')
const logoutLabel = t('Logout')
// 当前路径（去掉语言前缀），供语言切换器「换前缀、留路径」用，例如 /cn/women → /women
const pathSegments = Astro.url.pathname.split('/');
@ -20,8 +27,10 @@ const firstSegment = pathSegments[1] || '';
const currentPath = (LOCALES as readonly string[]).includes(firstSegment)
? '/' + pathSegments.slice(2).filter(Boolean).join('/') || '/'
: Astro.url.pathname;
const queryString = Astro.url.search;
const pathName = Astro.url.pathname;
const queryString = Astro.url.search;
const locales = toCodes(i18n!.locales);
---
<!doctype html>
<html lang={locale === 'cn' ? 'zh-CN' : 'en'}>
@ -39,13 +48,26 @@ const queryString = Astro.url.search;
<!-- 顶部主导航栏 -->
<nav class="flex justify-between items-center text-[13px] font-bold tracking-[0.5px] uppercase">
<div class="flex flex-wrap items-center gap-6 md:gap-8">
<a href={href(locale, PATH.portfolio)} class="relative pb-[2px] cursor-pointer transition-opacity duration-200 flex items-center gap-1.5 hover:opacity-60 opacity-80 border-b-2 border-transparent">{t('Portfolio')}<span class="text-[10px] bg-black text-white px-1.5 py-0.5 rounded-full font-mono tracking-tight leading-none">
<a href={href(locale, ROUTES.portfolio)} class="relative pb-[2px] cursor-pointer transition-opacity duration-200 flex items-center gap-1.5 hover:opacity-60 opacity-80 border-b-2 border-transparent">{t('Portfolio')}<span class="text-[10px] bg-black text-white px-1.5 py-0.5 rounded-full font-mono tracking-tight leading-none">
2026
</span></a>
<a href={href(locale, PATH.shows)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('All Shows')}</a>
<a href={href(locale, PATH.latestProjects)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('Latest Projects')}</a>
<a href={href(locale, PATH.about)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('About')}</a>
<a href={href(locale, PATH.contact)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('Contact Us')}</a>
<!-- 全部的 runway：header 下拉（假数据预览） -->
<div class="relative" x-data="{ open: false, current: '全部的 runway', menu: ['全部的 runway','Spring / Summer 2026','Fall / Winter 2025','Resort 2026','Pre-Fall 2025','Couture FW25','Menswear SS26','Menswear FW25'] }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false" @keydown.escape.window="open = false">
<div class="flex items-center gap-1">
<a href={href(locale, ROUTES.shows)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('全部的 runway')}</a>
<button type="button" :aria-expanded="open" class="pb-[2px] hover:opacity-60 transition-opacity duration-200 flex items-center" aria-label="展开 runway 列表">
<svg class="w-2.5 h-2.5 transition-transform duration-200" :class="open ? 'rotate-180' : ''" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
</div>
<div x-show="open" style="display:none" class="absolute left-0 top-full mt-2 z-50 min-w-[240px] bg-white border border-black/10 shadow-sm py-1 before:content-[''] before:absolute before:-top-2 before:left-0 before:right-0 before:h-2">
<template x-for="item in menu" :key="item">
<a href={href(locale, ROUTES.shows)} @click="current = item; open = false" class="block px-4 py-2 text-[12px] uppercase tracking-[0.4px] hover:bg-black/5 transition-colors" :class="item === current ? 'font-bold' : ''" x-text="item"></a>
</template>
</div>
</div>
<a href={href(locale, ROUTES.latestProjects)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('Latest Projects')}</a>
<a href={href(locale, ROUTES.about)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('About')}</a>
<a href={href(locale, ROUTES.contact)} class="relative pb-[2px] cursor-pointer hover:opacity-60 transition-opacity duration-200">{t('Contact Us')}</a>
</div>
<div class="flex items-center gap-3">
@ -63,7 +85,7 @@ const queryString = Astro.url.search;
type="button"
@click="open = !open"
class="flex items-center gap-1.5 cursor-pointer hover:opacity-60 transition-opacity duration-200 p-1 -m-1 normal-case text-[13px] tracking-[0.5px]"
aria-label="Language"
aria-label={t('Language')}
aria-haspopup="listbox"
:aria-expanded="open"
>
@ -85,23 +107,23 @@ const queryString = Astro.url.search;
x-transition:leave-end="opacity-0 -translate-y-1"
class="absolute right-0 top-full min-w-[160px] bg-white border border-black/10 shadow-sm z-50 py-2"
>
{LOCALES.map((l) => (
{locales.map((l) => (
<li>
<a
href={href(l, currentPath) + queryString}
href={getRelativeLocaleUrl(l, pathName)}
@click="open = false"
class:list={[
'block px-4 py-1.5 text-[13px] uppercase tracking-[0.5px] hover:bg-black/5 transition-colors',
l === locale ? 'font-bold' : 'opacity-60',
]}
>{LOCALE_NAMES[l]}</a>
>{LOCALE_NAMES[l].name}</a>
</li>
))}
</ul>
</div>
<div class="flex items-center gap-2" id="auth-slot">
<a href={href(locale, PATH.login)} class="hover:opacity-60 transition-opacity duration-200">{t('Login')}</a>
<a href={href(locale, PATH.register)} class="hover:opacity-60 transition-opacity duration-200">{t('Signup')}</a>
<a href={href(locale, ROUTES.login)} class="hover:opacity-60 transition-opacity duration-200">{t('Login')}</a>
<a href={href(locale, ROUTES.register)} class="hover:opacity-60 transition-opacity duration-200">{t('Signup')}</a>
</div>
</div>
</nav>
@ -111,12 +133,12 @@ const queryString = Astro.url.search;
</div>
<footer class="relative z-[1] bg-white mt-20 pt-10 border-t-2 border-black text-black w-full font-sans">
<script>
<script define:vars={{ hiLabel, logoutLabel }}>
import { getUser, fetchMe, clearSession } from "@/lib/api"
const slot = document.getElementById("auth-slot")
function render(user) {
if (!user) return // 未登录：保留 SSR 渲染的 Login/Signup（已带语言前缀，无需重写）
slot.innerHTML = `<span class="opacity-70">Hi, ${user.username}</span><button id="logout-btn" class="hover:opacity-60 transition-opacity cursor-pointer bg-transparent border-0 p-0 font-bold text-[13px] uppercase tracking-[0.5px]">Logout</button>`
slot.innerHTML = `<span class="opacity-70">${hiLabel}, ${user.username}</span><button id="logout-btn" class="hover:opacity-60 transition-opacity cursor-pointer bg-transparent border-0 p-0 font-bold text-[13px] uppercase tracking-[0.5px]">${logoutLabel}</button>`
const btn = slot.querySelector("#logout-btn")
if (btn) btn.addEventListener("click", () => { clearSession(); location.reload() })
}
@ -139,7 +161,7 @@ const queryString = Astro.url.search;
</div>
<p class="text-xs text-zinc-600 leading-relaxed max-w-md">
Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
{t('Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.')}
</p>
{/* Location Badge */}
@ -157,7 +179,7 @@ const queryString = Astro.url.search;
{/* Column 3: Color Studio & Actions */}
<div class="md:col-span-4 space-y-3">
<span class="text-[11px] font-mono uppercase tracking-widest text-zinc-400 font-bold block mb-2">
Color Studio Tools
{t('Color Studio Tools')}
</span>
<div class="flex flex-col gap-2">
@ -167,7 +189,7 @@ const queryString = Astro.url.search;
>
<div class="flex items-center gap-2">
<!-- <Sparkles class="w-3.5 h-3.5 text-amber-300" /> -->
<span>AI Color Trend Generator</span>
<span>{t('AI Color Trend Generator')}</span>
</div>
<span class="text-[10px] text-zinc-400 font-normal">Gemini 2026</span>
</button>
@ -178,9 +200,9 @@ const queryString = Astro.url.search;
>
<div class="flex items-center gap-2">
<!-- <Layers class="w-3.5 h-3.5 text-zinc-600" /> -->
<span>Photo Swatch Extractor</span>
<span>{t('Photo Swatch Extractor')}</span>
</div>
<span class="text-[10px] text-zinc-500 font-normal">Upload</span>
<span class="text-[10px] text-zinc-500 font-normal">{t('Upload')}</span>
</button>
{activeThemePalette && (
@ -190,7 +212,7 @@ const queryString = Astro.url.search;
>
<div class="flex items-center gap-2">
{/* <RefreshCw class="w-3.5 h-3.5" /> */}
<span>Reset B&amp;W Theme</span>
<span>{t('Reset B&W Theme')}</span>
</div>
<span class="text-[10px] opacity-80">Default</span>
</button>
@ -203,18 +225,18 @@ const queryString = Astro.url.search;
{/* Bottom Legal & Back To Top */}
<div class="flex flex-col sm:flex-row justify-between items-center text-[12px] font-mono text-zinc-500 gap-4">
<div>
<span>© 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.</span>
<span>{t('© 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.')}</span>
</div>
<div class="flex items-center gap-6">
<a
href={href(locale, PATH.about)}
href={href(locale, ROUTES.about)}
class="nav-btn hover:text-black cursor-pointer uppercase font-bold"
>
{t('About')}
</a>
<a
href={href(locale, PATH.contact)}
href={href(locale, ROUTES.contact)}
class="nav-btn hover:text-black cursor-pointer uppercase font-bold"
>
{t('Contact')}

18
src/lib/routes.ts
View File

@ -1,12 +1,12 @@
// 全站 URL 路径集中管理
// - PATH：逻辑路径（不带 locale 前缀）。静态用字符串，动态用工厂函数。
// 全站 URL 路由集中管理
// - ROUTES：逻辑路由（不带 locale 前缀）。静态用字符串，动态用工厂函数。
// - href：服务端（.astro frontmatter）使用，跟随 astro.config 的 prefixDefaultLocale 规则拼前缀。
// - clientHref：客户端脚本（Alpine/Vue）使用，astro:i18n 在浏览器不可用，故自行拼接。
import { getRelativeLocaleUrl } from 'astro:i18n';
/** 逻辑路径片段（不含 locale 前缀）。 */
export const PATH = {
/** 逻辑路由片段（不含 locale 前缀）。 */
export const ROUTES = {
home: '/',
shows: '/shows',
brands: '/brands',
@ -16,7 +16,7 @@ export const PATH = {
contact: '/contact',
login: '/login',
register: '/register',
// 动态路径（工厂函数）
// 动态路由（工厂函数）
item: (id: string | number) => `/items/${id}`,
article: (id: string | number) => `/article?id=${id}`,
articlesByBrand: (id: string | number) => `/articles?brand_id=${id}`,
@ -24,8 +24,8 @@ export const PATH = {
} as const;
/** 服务端：生成带 locale 前缀的完整 URL（依赖 astro:i18n，遵循 astro.config）。 */
export function href(locale: string, path: string): string {
return getRelativeLocaleUrl(locale, path);
export function href(locale: string, route: string): string {
return getRelativeLocaleUrl(locale, route);
}
/**
@ -33,7 +33,7 @@ export function href(locale: string, path: string): string {
* 跟随 astro.config.mjs 的 prefixDefaultLocale: true（en 也带 /en 前缀）。
* 浏览器内无法使用 astro:i18n，故此处自行拼接，规则须与 astro.config 保持一致。
*/
export function clientHref(locale: string, path: string): string {
export function clientHref(locale: string, route: string): string {
const base = locale === 'en' ? '/en' : `/${locale}`;
return path === '/' ? base : `${base}${path}`;
return route === '/' ? base : `${base}${route}`;
}

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 ""