完成布局

app/pages/[...slug].vue

@@ -18,11 +18,52 @@ const pageFontSizeClass = computed(() => {
   return `text-${selectedFontSize.value}`
 })
 
-const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+// 根据路由参数构建内容路径
+const path = computed(() => {
+  const slug = route.params.slug;
+  
+  // 处理 slug 参数
+  if (!slug) {
+    return '/'; // 如果没有 slug，返回根路径
+  }
+  
+  const pathValue = Array.isArray(slug) ? slug.join("/") : slug;
+  
+  // 确保路径以 / 开头，不以 / 结尾
+  const normalizedPath = `/${pathValue}`.replace(/\/+$/, ""); // 使用 /+ 匹配多个连续的斜杠
+  
+  return normalizedPath;
+});
+
+// URL 解码并验证路径
+const queryPath = computed(() => {
+  try {
+    return decodeURIComponent(path.value);
+  } catch (error) {
+    console.error('URL decode error:', error);
+    return path.value; // 如果解码失败，返回原始路径
+  }
+});
+
+
+const { data: page } = await useAsyncData(
+  `page-${route.path}`, // 使用更具体的 key
+  () => queryCollection('docs').path(queryPath.value).first(),
+  {
+    default: () => null // 提供默认值
+  }
+);
+
 if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  throw createError({ 
+    statusCode: 404, 
+    statusMessage: '文档不存在', 
+    message: '当前页面不存在，请您检查路径是否正确',
+    fatal: true 
+  });
 }
 
+
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
   return queryCollectionItemSurroundings('docs', route.path, {
     fields: ['description']