DeXun/sage-home
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 更新车间和产品页面UI设计并添加新图片资源

Browse Source 
更新多个页面的UI设计，包括产品卡片、车间详情页和列表页，采用现代化卡片设计和动画效果
添加新的车间图片资源并更新相关页面的图片引用路径
优化响应式布局和交互体验，增强视觉吸引力
This commit is contained in:
砂糖
2026-02-03 14:39:36 +08:00
parent 8600a01ce4
commit 86c20e5ef7
20 changed files with 179 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/[locale]/workshop/[slug]/page.tsx
View File

@@ -20,9 +20,6 @@ export async function generateMetadata({
}: MetadataProps): Promise<Metadata> {
const { locale, slug } = await params;
const workShop = await getWorkShop(locale, slug);
console.log(workShop);
console.log(workShop?.slug);
if (!workShop) {
return constructMetadata({
@@ -46,7 +43,6 @@ export async function generateMetadata({
// 页面主组件 - 仅保留字段展示+修复 Hydration 错误
export default async function WorkshopDetailPage({ params }: { params: Params }) {
// 🔴 核心修复1：移除不必要的 await（params 是同步对象）
const { locale, slug } = await params;
const workShop = await getWorkShop(locale, slug);
@@ -58,32 +54,29 @@ export default async function WorkshopDetailPage({ params }: { params: Params })
const workshopDesc = workShop.desc || "暂无车间描述";
return (
<div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
{/* 封面图区域 - 🔴 修复布局属性不一致 */}
<div className="relative rounded-2xl overflow-hidden shadow-lg h-[400px] sm:h-[500px] mb-8">
<div className="min-h-screen bg-gray-50 py-16 px-6 sm:px-8 lg:px-10">
<div className="max-w-7xl mx-auto space-y-12">
{/* 封面图区域 - 强化背景效果 */}
<div className="relative rounded-xl overflow-hidden shadow-lg h-[500px] sm:h-[600px] mb-12 group">
<img
src={coverSrc}
alt={coverAlt}
className="absolute inset-0 w-full h-full object-cover transition-transform hover:scale-105 duration-700"
// 显式设置属性，确保服务端/客户端一致
className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
loading="lazy"
decoding="async"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black opacity-40"></div>
</div>
{/* 标题+描述区域 */}
<div className="bg-white rounded-xl p-8 shadow-sm mb-10">
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
{workShop.title}
</h1>
<p className="text-lg text-gray-700 leading-relaxed">
{workshopDesc}
</p>
<div className="bg-white rounded-xl p-8 shadow-xl">
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">{workShop.title}</h1>
<p className="text-lg sm:text-xl text-gray-700 leading-relaxed mb-6">{workshopDesc}</p>
</div>
{/* 图片展示区域 */}
{workShop.images?.length > 0 && (
<div className="bg-white rounded-xl p-8 shadow-sm">
<div className="bg-white rounded-xl p-8 shadow-xl mt-12">
<h2 className="text-2xl font-semibold text-gray-800 mb-6 border-b pb-3 border-gray-200">
车间图片
</h2>
@@ -94,12 +87,12 @@ export default async function WorkshopDetailPage({ params }: { params: Params })
return (
<div
key={stableKey}
className="relative rounded-lg overflow-hidden shadow-md h-64 hover:shadow-xl transition-all duration-300"
className="relative rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300"
>
<img
src={img}
alt={imgAlt}
className="absolute inset-0 w-full h-full object-cover transition-transform hover:scale-110 duration-500"
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
loading="lazy"
decoding="async"
/>
@@ -126,7 +119,7 @@ export async function generateStaticParams() {
}))
);
} catch (error) {
console.error("生成产品静态参数失败:", error);
console.error("生成车间静态参数失败:", error);
return [];
}
}
}