完成适配移动端

pages/page/[id].vue

@@ -2,7 +2,7 @@
   <!-- Banner -->
   <Banner :layout="layout" />
   <!-- 主体部分 -->
-  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
+  <div class="xl:w-screen-xl m-auto py-4 px-4 sm:px-0">
     <el-page-header :icon="ArrowLeft" @back="goBack">
       <template #content>
         <span class="text-large font-600"> {{ page.title || '页面标题' }} </span>
@@ -30,6 +30,7 @@ import { ArrowLeft,View } from '@element-plus/icons-vue'
 import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
 import Content from "~/components/Content.vue";
 import Tags from "~/components/Tags.vue";
+import { useHead } from 'unhead';
 
 // 引入状态管理
 const route = useRoute();
@@ -45,24 +46,38 @@ const goBack = () => {
 
 // 加载页面布局
 const reload = async () => {
-  getCmsNavigation(navId.value).then(data => {
+  try {
+    const data = await getCmsNavigation(navId.value)
+    if (!data) return
+
     page.value = data
-    layout.value.banner = data.banner;
+    layout.value.banner = data.banner
+
+    // 更新 SEO
+    const title = data?.title || ''
+    const description = data.comments || data.title || ''
+    const appName = useRuntimeConfig().public.appName
+
+    useHead({
+      title,
+      meta: [
+        { name: 'description', content: description },
+        { name: 'keywords', content: title },
+        { property: 'og:title', content: title },
+        { property: 'og:description', content: description }
+      ]
+    })
+
     // 二级栏目分类
     if(data.parentId && data.parentId > 0){
-      listCmsNavigation({
+      const list = await listCmsNavigation({
         parentId: data.parentId == 0 ? data.navigationId : data.parentId
-      }).then(list => {
-        category.value = list
       })
+      category.value = list
     }
-    // seo
-    useSeoMeta({
-      description: data.comments || data.title,
-      keywords: data.title,
-      titleTemplate: `${data?.title}` + ' - %s',
-    })
-  })
+  } catch (error) {
+    console.error('Failed to load page data:', error)
+  }
 }
 
 watch(