nuxt初始化

nuxt-web/pages/cases/[slug].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const route = useRoute()
+const casePath = `/cases/${route.params.slug}`
+
+const { data: caseDoc } = await useAsyncData(`case-${route.params.slug}`, () => {
+  return queryCollection('cases').path(casePath).first()
+})
+
+if (!caseDoc.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Case not found: ${route.params.slug}`
+  })
+}
+
+useSeo({
+  title: caseDoc.value.title,
+  description: caseDoc.value.description,
+  keywords: caseDoc.value.keywords,
+  ogImage: caseDoc.value.cover,
+  canonicalPath: casePath
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '客户案例', to: '/cases' },
+  { label: caseDoc.value.title }
+]
+
+const relatedProducts = (caseDoc.value.relatedProducts || []).map((item) => ({
+  to: item,
+  label: item
+}))
+</script>
+
+<template>
+  <ProductDetailLayout
+    :title="caseDoc!.title"
+    :description="caseDoc!.summary"
+    :banner-image="caseDoc!.cover"
+    :breadcrumb-items="breadcrumbItems"
+    :related-products="relatedProducts"
+  >
+    <ContentRenderer :value="caseDoc" />
+  </ProductDetailLayout>
+</template>