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

update

Browse Source
This commit is contained in:
toom1996
2026-09-20 00:44:14 +08:00
parent b04a511b26
commit 4b409b5a29
83 changed files with 12072 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/layouts/Layout.astro
View File

@ -40,7 +40,7 @@ const metaKeywords = keywords ?? defaultKeywords
// 后端据此选 *_en / *_cn 列。客户端 fetch 则自行按 URL path 推断，无需此处。
setApiLocale(locale)
// 经 data-* 属性把已翻译字符串传入打包型 <script>；define:vars 会让脚本变内联 classic，导致 import 报错，故改用 data 属性
// 经 data-* 属性把已翻译字符串传入打包型 script 标签；define:vars 会让脚本变内联 classic，导致 import 报错，故改用 data 属性
// （账号区现改为 Alpine 组件，译文直接在模板内用 t() 输出，无需 data 属性中转）
const pathName = Astro.url.pathname;
@ -51,7 +51,7 @@ const pathWithoutLocale = locales.includes(pathName.split('/')[1])
: pathName;
// 顶部导航数据模型（替代原 Alpine x-data 的 menu/state）。
// 下拉菜单与语言列表均由此驱动渲染，逻辑用 Astro 原生 <script> 控制开合。
// 下拉菜单与语言列表均由此驱动渲染，逻辑用 Astro 原生 script 控制开合。
const headers = {
// 走秀下拉菜单项：方案 A —— 全部 + 4 个真实 collection_type 分类（与列表页 COLLECTION 筛选一致），
// 深链带 ?collection= 参数，由 RunwayLooks 的 init() 读取并自动选中筛选。
@ -100,9 +100,9 @@ const headers = {
<meta name="description" content={metaDescription} />
<meta name="keywords" content={metaKeywords} />
</head>
<body class="bg-white text-black min-h-screen flex flex-col p-[30px_50px] font-sans">
<body class="bg-white text-black min-h-screen flex flex-col px-5 py-5 md:px-[50px] md:py-[30px] font-sans">
<!-- 加载动画屏：独立组件，标记/样式/隐藏逻辑封装在 LoadingScreen.astro -->
<!-- 加载动画屏：独立组件，标记/样式/隐藏逻辑封装在 LoadingOverlay.astro -->
<LoadingOverlay />
<!-- 顶部主导航栏 -->
@ -313,25 +313,24 @@ const headers = {
})
</script>
{/* Top Footer Grid */}
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-10 pb-10 border-b border-zinc-200">
<div class="grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-8 mb-10 pb-10 border-b border-black/10">
{/* Column 1: Brand & Manifesto */}
<div class="md:col-span-5 space-y-4">
<div class="flex items-center gap-2">
<span class="text-base font-black tracking-wider uppercase border-b-2 border-black pb-0.5">
Portfolio Studio
{SITE_NAME}
</span>
<span class="text-[10px] bg-black text-white px-2 py-0.5 font-bold uppercase tracking-widest">
2026 Edition
<span class="text-[10px] bg-black text-white px-2 py-0.5 font-bold uppercase tracking-widest rounded-full">
2026
</span>
</div>
<p class="text-xs text-zinc-600 leading-relaxed max-w-md">
<p class="text-xs text-[var(--c-gray-800)] leading-relaxed max-w-md">
{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 */}
<div class="flex flex-wrap gap-3 text-[11px] text-zinc-500 uppercase tracking-widest pt-1">
<div class="flex flex-wrap gap-3 text-[11px] text-[var(--c-gray-700)] uppercase tracking-widest pt-1">
<span>Paris</span>
<span>•</span>
<span>Milan</span>
@ -341,10 +340,30 @@ const headers = {
<span>New York</span>
</div>
</div>
{/* Column 2: Explore */}
<div class="md:col-span-4 md:col-start-7 space-y-3">
<h3 class="text-[11px] tracking-[0.26em] uppercase font-bold text-black">Explore</h3>
<ul class="space-y-2 text-[11px] uppercase tracking-[0.18em] text-[var(--c-gray-800)]">
<li><a href={href(locale, ROUTES.runwayLooks)} class="hover:text-black transition-colors">{t('all runway looks')}</a></li>
<li><a href={href(locale, ROUTES.streetSnaps)} class="hover:text-black transition-colors">{t('Street Style')}</a></li>
<li><a href={href(locale, ROUTES.account)} class="hover:text-black transition-colors">{t('my account')}</a></li>
</ul>
</div>
{/* Column 3: Connect */}
<div class="md:col-span-2 space-y-3">
<h3 class="text-[11px] tracking-[0.26em] uppercase font-bold text-black">Connect</h3>
<ul class="space-y-2 text-[11px] uppercase tracking-[0.18em] text-[var(--c-gray-800)]">
<li><a href="#" class="hover:text-black transition-colors">Instagram</a></li>
<li><a href="#" class="hover:text-black transition-colors">Newsletter</a></li>
<li><a href="#" class="hover:text-black transition-colors">Contact</a></li>
</ul>
</div>
</div>
<div class="mt-6 text-[11px] text-zinc-400 uppercase tracking-widest">
{t('© 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.')}
<div class="mt-6 text-[11px] text-[var(--c-gray-600)] uppercase tracking-widest">
© 2026 {SITE_NAME}. {t('all rights reserved.')}
</div>
</footer>