初始化

pages/page/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <!-- Banner -->
+  <Banner :layout="layout" />
+
+  <!-- 简单模式(常规单页面) -->
+  <PageContainer :form="form" :layout="layout" />
+
+  <!-- 高级模式(自定义组件) -->
+  <div class="flex flex-col" v-if="layout?.showLayout">
+    {{ layout }}
+  </div>
+
+</template>
+<script setup lang="ts">
+import type {ApiResult} from "~/api";
+import {useServerRequest} from "~/composables/useServerRequest";
+import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState";
+import type {BreadcrumbItem} from "~/types/global";
+import type {Navigation} from "~/api/cms/navigation/model";
+import {getIdBySpm} from "~/utils/common";
+import PageContainer from "~/components/PageContainer.vue";
+
+// 引入状态管理
+const route = useRoute();
+const website = useWebsite();
+const layout = ref<any>();
+const config = useConfigInfo();
+const token = useToken();
+const form = useForm();
+const breadcrumb = ref<BreadcrumbItem>();
+
+// 请求数据
+const reload = async () => {
+
+  // 存在spm(优先级高)
+  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/' + getIdBySpm(5))
+  if (nav.value?.data) {
+    form.value = nav.value.data
+  }else{
+    const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/getNavigationByPath',{query: {path: route.path}})
+    if(nav.value?.data){
+      form.value = nav.value?.data;
+    }
+  }
+  // 页面布局
+  if(form.value?.layout){
+    layout.value = JSON.parse(form.value?.layout)
+  }
+
+  // seo
+  useHead({
+    title: `${form.value.title} - ${website.value.websiteName}`,
+    meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }],
+    bodyAttrs: {
+      class: "page-container",
+    },
+    script: [
+      {
+        children: `console.log(${JSON.stringify(form.value)})`,
+      },
+    ],
+  });
+  // 面包屑
+  breadcrumb.value = form.value
+}
+
+watch(
+    () => route.path,
+    (path) => {
+      console.log(path,'=>Path')
+
+      reload();
+    },
+    { immediate: true }
+);
+</script>