feat: 新增作品和动态详情页
✨ Work 详情页 (/work/[slug]): - Hero 大图 + 渐变遮罩 - 项目概述、挑战、解决方案 - 项目截图画廊 - 右侧信息卡片（客户、年份、周期、服务） - 访问项目按钮 - 相关项目推荐 - 返回列表按钮 - 完整中英文内容 ✨ News 详情页 (/news/[slug]): - Hero 大图 + 渐变遮罩 - 分类标签 + 日期 + 阅读时间 + 作者 - 文章正文（多段落 + 引用 + 图片） - 分享按钮（Twitter、LinkedIn、复制链接） - 相关文章推荐 - 返回列表按钮 - 完整中英文内容 🔧 列表页更新: - work.vue → work/index.vue - news.vue → news/index.vue - 卡片链接改为 NuxtLink 到详情页 🌍 国际化: - 6 个作品详情（中文 + 英文） - 6 篇文章详情（中文 + 英文） Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<main class="min-h-screen">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="fixed top-28 left-4 md:left-8 z-30">
|
||||
<NuxtLink
|
||||
to="/work"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-white/90 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 text-sm font-semibold text-black hover:-translate-x-1"
|
||||
>
|
||||
<Icon name="ph:arrow-left" class="w-5 h-5" />
|
||||
{{ t('work.backToList') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Hero 大图 -->
|
||||
<section class="relative h-[60vh] md:h-[70vh] overflow-hidden">
|
||||
<img
|
||||
:src="project.image"
|
||||
:alt="project.title"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-8 md:p-16">
|
||||
<div class="max-w-[1200px] mx-auto">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 text-xs md:text-sm bg-white/20 backdrop-blur-sm text-white rounded-full"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-white/80 max-w-2xl">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 项目信息 -->
|
||||
<section class="max-w-[1200px] mx-auto px-6 md:px-10 py-16 md:py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
|
||||
<!-- 左侧：项目详情 -->
|
||||
<div class="lg:col-span-2 space-y-12">
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.overview') }}</h2>
|
||||
<p class="text-gray-700 text-base md:text-lg leading-relaxed">
|
||||
{{ t(`work.detail.items.${slug}.overview`) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.challenge') }}</h2>
|
||||
<p class="text-gray-700 text-base md:text-lg leading-relaxed">
|
||||
{{ t(`work.detail.items.${slug}.challenge`) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.solution') }}</h2>
|
||||
<p class="text-gray-700 text-base md:text-lg leading-relaxed">
|
||||
{{ t(`work.detail.items.${slug}.solution`) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 项目截图 -->
|
||||
<div class="space-y-6">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-black">{{ t('work.detail.gallery') }}</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div
|
||||
v-for="(img, index) in project.gallery"
|
||||
:key="index"
|
||||
class="rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300"
|
||||
>
|
||||
<img :src="img" :alt="`${project.title} screenshot ${index + 1}`" class="w-full h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：项目信息卡片 -->
|
||||
<div class="space-y-8">
|
||||
<div class="bg-gray-50 rounded-2xl p-6 md:p-8 sticky top-32">
|
||||
<h3 class="text-lg font-bold text-black mb-6">{{ t('work.detail.projectInfo') }}</h3>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">{{ t('work.detail.client') }}</p>
|
||||
<p class="text-base font-semibold text-black">{{ t(`work.detail.items.${slug}.client`) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">{{ t('work.detail.year') }}</p>
|
||||
<p class="text-base font-semibold text-black">{{ project.year }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">{{ t('work.detail.duration') }}</p>
|
||||
<p class="text-base font-semibold text-black">{{ t(`work.detail.items.${slug}.duration`) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mb-1">{{ t('work.detail.services') }}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 text-xs bg-black text-white rounded-full"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 访问项目按钮 -->
|
||||
<a
|
||||
v-if="project.url"
|
||||
:href="project.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="mt-8 w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-black text-white font-semibold hover:bg-gray-800 transition-colors duration-300"
|
||||
>
|
||||
{{ t('work.detail.visitProject') }}
|
||||
<Icon name="ph:arrow-up-right" class="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 相关项目 -->
|
||||
<section class="bg-gray-50 py-16 md:py-24">
|
||||
<div class="max-w-[1200px] mx-auto px-6 md:px-10">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-black mb-10 text-center">{{ t('work.detail.relatedProjects') }}</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<NuxtLink
|
||||
v-for="related in relatedProjects"
|
||||
:key="related.id"
|
||||
:to="`/work/${related.id}`"
|
||||
class="group block rounded-2xl overflow-hidden bg-white shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
|
||||
>
|
||||
<div class="relative aspect-[4/3] overflow-hidden">
|
||||
<img :src="related.image" :alt="related.title" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-black group-hover:text-gray-600 transition-colors">{{ related.title }}</h3>
|
||||
<p class="text-sm text-gray-500 mt-1">{{ related.tags[0] }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useSeoMeta, createError } from '#imports'
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
interface WorkItem {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
image: string
|
||||
tags: string[]
|
||||
category: string
|
||||
year: string
|
||||
url?: string
|
||||
gallery: string[]
|
||||
}
|
||||
|
||||
const workData: Record<string, WorkItem> = {
|
||||
'forma-digital': {
|
||||
id: 'forma-digital',
|
||||
title: 'Forma Digital',
|
||||
description: 'A modern e-commerce platform with seamless user experience and dynamic product showcases.',
|
||||
image: 'https://picsum.photos/id/201/1200/800',
|
||||
tags: ['Web Design', 'E-commerce', 'React'],
|
||||
category: 'webDesign',
|
||||
year: '2026',
|
||||
url: '#',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/201/800/600',
|
||||
'https://picsum.photos/id/202/800/600',
|
||||
'https://picsum.photos/id/203/800/600',
|
||||
'https://picsum.photos/id/204/800/600',
|
||||
]
|
||||
},
|
||||
'one-step': {
|
||||
id: 'one-step',
|
||||
title: 'One Step',
|
||||
description: 'Brand identity and marketing campaign for a fitness app focused on sustainable habits.',
|
||||
image: 'https://picsum.photos/id/180/1200/800',
|
||||
tags: ['Branding', 'Marketing', 'UI/UX'],
|
||||
category: 'branding',
|
||||
year: '2024',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/180/800/600',
|
||||
'https://picsum.photos/id/181/800/600',
|
||||
'https://picsum.photos/id/182/800/600',
|
||||
'https://picsum.photos/id/183/800/600',
|
||||
]
|
||||
},
|
||||
'nero-vision': {
|
||||
id: 'nero-vision',
|
||||
title: 'Nero Vision',
|
||||
description: 'Full-stack web application for creative professionals to manage their portfolios.',
|
||||
image: 'https://picsum.photos/id/119/1200/800',
|
||||
tags: ['Development', 'Vue.js', 'Node.js'],
|
||||
category: 'development',
|
||||
year: '2025',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/119/800/600',
|
||||
'https://picsum.photos/id/120/800/600',
|
||||
'https://picsum.photos/id/121/800/600',
|
||||
'https://picsum.photos/id/122/800/600',
|
||||
]
|
||||
},
|
||||
'bold-moves': {
|
||||
id: 'bold-moves',
|
||||
title: 'Bold Moves',
|
||||
description: 'Interactive website showcasing innovative architectural designs with 3D visualizations.',
|
||||
image: 'https://picsum.photos/id/164/1200/800',
|
||||
tags: ['Web Design', '3D', 'Three.js'],
|
||||
category: 'webDesign',
|
||||
year: '2024',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/164/800/600',
|
||||
'https://picsum.photos/id/165/800/600',
|
||||
'https://picsum.photos/id/166/800/600',
|
||||
'https://picsum.photos/id/167/800/600',
|
||||
]
|
||||
},
|
||||
'echo-labs': {
|
||||
id: 'echo-labs',
|
||||
title: 'Echo Labs',
|
||||
description: 'Corporate branding and visual identity for a tech startup in the AI space.',
|
||||
image: 'https://picsum.photos/id/101/1200/800',
|
||||
tags: ['Branding', 'Visual Identity', 'Corporate'],
|
||||
category: 'branding',
|
||||
year: '2025',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/101/800/600',
|
||||
'https://picsum.photos/id/102/800/600',
|
||||
'https://picsum.photos/id/103/800/600',
|
||||
'https://picsum.photos/id/104/800/600',
|
||||
]
|
||||
},
|
||||
'flux-api': {
|
||||
id: 'flux-api',
|
||||
title: 'Flux API',
|
||||
description: 'Scalable REST API with comprehensive documentation and developer tools.',
|
||||
image: 'https://picsum.photos/id/326/1200/800',
|
||||
tags: ['Development', 'API', 'Python'],
|
||||
category: 'development',
|
||||
year: '2025',
|
||||
gallery: [
|
||||
'https://picsum.photos/id/326/800/600',
|
||||
'https://picsum.photos/id/327/800/600',
|
||||
'https://picsum.photos/id/328/800/600',
|
||||
'https://picsum.photos/id/329/800/600',
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const project = workData[slug]
|
||||
|
||||
if (!project) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Project not found' })
|
||||
}
|
||||
|
||||
const relatedProjects = computed(() => {
|
||||
return Object.values(workData)
|
||||
.filter(p => p.id !== slug)
|
||||
.slice(0, 3)
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: () => `${project.title} - ${t('work.title')}`,
|
||||
description: () => project.description,
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<main class="page-container min-h-screen pt-32 pb-20 px-4 md:px-8 mx-auto max-w-[1200px]">
|
||||
<div
|
||||
ref="headerWrapRef"
|
||||
class="flex flex-col items-center justify-center text-center mb-10 md:mb-16"
|
||||
>
|
||||
<h1 ref="titleRef" class="text-3xl md:text-5xl font-bold mb-4 md:mb-6 tracking-tight text-black">{{ t('work.title') }}</h1>
|
||||
<p ref="descRef" class="text-base md:text-lg text-gray-600 max-w-2xl">{{ t('work.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="filterWrapRef"
|
||||
class="flex justify-center gap-3 md:gap-4 mb-10 md:mb-14 flex-wrap"
|
||||
>
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
@click="activeCategory = category"
|
||||
class="px-5 md:px-6 py-2 md:py-2.5 rounded-full text-sm md:text-base font-semibold transition-all duration-300"
|
||||
:class="activeCategory === category
|
||||
? 'bg-black text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
|
||||
>
|
||||
{{ t(`work.categories.${category}`) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="projectsWrapRef"
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="project in filteredWorkData"
|
||||
:key="project.id"
|
||||
:to="`/work/${project.id}`"
|
||||
class="work-card group relative block rounded-2xl md:rounded-3xl overflow-hidden cursor-pointer hover:shadow-2xl transition-all duration-500"
|
||||
>
|
||||
<div class="relative aspect-[4/3] overflow-hidden bg-gray-100">
|
||||
<img
|
||||
:src="project.image"
|
||||
:alt="project.title"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 md:p-8 bg-white">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<h3 class="text-xl md:text-2xl font-bold text-black group-hover:text-gray-700 transition-colors duration-300">{{ project.title }}</h3>
|
||||
<div class="w-9 h-9 md:w-10 md:h-10 rounded-full flex items-center justify-center bg-gray-50 text-gray-400 group-hover:bg-black group-hover:text-white transition-all duration-300 flex-shrink-0 ml-3">
|
||||
<Icon name="ph:arrow-up-right" class="w-4 h-4 md:w-5 md:h-5" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm md:text-base text-gray-600 mb-4">{{ project.description }}</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 text-xs md:text-sm bg-gray-50 text-gray-700 rounded-full"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useSeoMeta } from '#imports'
|
||||
import gsap from 'gsap'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const headerWrapRef = ref<HTMLElement | null>(null)
|
||||
const titleRef = ref<HTMLElement | null>(null)
|
||||
const descRef = ref<HTMLElement | null>(null)
|
||||
const filterWrapRef = ref<HTMLElement | null>(null)
|
||||
const projectsWrapRef = ref<HTMLElement | null>(null)
|
||||
const activeCategory = ref('all')
|
||||
|
||||
const categories = ['all', 'webDesign', 'branding', 'development']
|
||||
|
||||
const filteredWorkData = computed(() => {
|
||||
if (activeCategory.value === 'all') {
|
||||
return workData
|
||||
}
|
||||
return workData.filter(item => item.category === activeCategory.value)
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: () => t('work.title'),
|
||||
description: () => t('work.description'),
|
||||
})
|
||||
|
||||
const playPageIntro = async () => {
|
||||
await nextTick()
|
||||
if (!headerWrapRef.value || !titleRef.value || !descRef.value || !filterWrapRef.value || !projectsWrapRef.value) return
|
||||
|
||||
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
|
||||
|
||||
tl.fromTo(titleRef.value, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.85, ease: 'power4.out', clearProps: 'transform' })
|
||||
tl.fromTo(descRef.value, { autoAlpha: 0, y: 16 }, { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power4.out', clearProps: 'transform' }, '-=0.45')
|
||||
|
||||
const filterButtons = gsap.utils.toArray<HTMLElement>('button', filterWrapRef.value!)
|
||||
tl.fromTo(filterButtons, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.7, stagger: 0.08, clearProps: 'transform' }, '-=0.3')
|
||||
|
||||
const projectCards = gsap.utils.toArray<HTMLElement>('.work-card', projectsWrapRef.value!)
|
||||
tl.fromTo(projectCards, { autoAlpha: 0, y: 34, scale: 0.965 }, { autoAlpha: 1, y: 0, scale: 1, duration: 0.95, stagger: 0.13, clearProps: 'transform' }, '+=0.08')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!appStore.isAppLoading) {
|
||||
playPageIntro()
|
||||
} else {
|
||||
window.addEventListener('app-loading-done', playPageIntro, { once: true })
|
||||
}
|
||||
})
|
||||
|
||||
interface WorkItem {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
image: string
|
||||
tags: string[]
|
||||
category: string
|
||||
}
|
||||
|
||||
const workData: WorkItem[] = [
|
||||
{
|
||||
id: 'forma-digital',
|
||||
title: 'Forma Digital',
|
||||
description: 'A modern e-commerce platform with seamless user experience and dynamic product showcases.',
|
||||
image: 'https://picsum.photos/id/201/800/600',
|
||||
tags: ['Web Design', 'E-commerce', 'React'],
|
||||
category: 'webDesign'
|
||||
},
|
||||
{
|
||||
id: 'one-step',
|
||||
title: 'One Step',
|
||||
description: 'Brand identity and marketing campaign for a fitness app focused on sustainable habits.',
|
||||
image: 'https://picsum.photos/id/180/800/600',
|
||||
tags: ['Branding', 'Marketing', 'UI/UX'],
|
||||
category: 'branding'
|
||||
},
|
||||
{
|
||||
id: 'nero-vision',
|
||||
title: 'Nero Vision',
|
||||
description: 'Full-stack web application for creative professionals to manage their portfolios.',
|
||||
image: 'https://picsum.photos/id/119/800/600',
|
||||
tags: ['Development', 'Vue.js', 'Node.js'],
|
||||
category: 'development'
|
||||
},
|
||||
{
|
||||
id: 'bold-moves',
|
||||
title: 'Bold Moves',
|
||||
description: 'Interactive website showcasing innovative architectural designs with 3D visualizations.',
|
||||
image: 'https://picsum.photos/id/164/800/600',
|
||||
tags: ['Web Design', '3D', 'Three.js'],
|
||||
category: 'webDesign'
|
||||
},
|
||||
{
|
||||
id: 'echo-labs',
|
||||
title: 'Echo Labs',
|
||||
description: 'Corporate branding and visual identity for a tech startup in the AI space.',
|
||||
image: 'https://picsum.photos/id/101/800/600',
|
||||
tags: ['Branding', 'Visual Identity', 'Corporate'],
|
||||
category: 'branding'
|
||||
},
|
||||
{
|
||||
id: 'flux-api',
|
||||
title: 'Flux API',
|
||||
description: 'Scalable REST API with comprehensive documentation and developer tools.',
|
||||
image: 'https://picsum.photos/id/326/800/600',
|
||||
tags: ['Development', 'API', 'Python'],
|
||||
category: 'development'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p { word-break: break-word; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user