From 292369578082658e427416b43e041b6498b675bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 29 Aug 2024 00:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=8A=B6=E6=80=81=EF=BC=9Aus?=
 =?UTF-8?q?eForm=E7=AD=89=EF=BC=8C=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=9E=8D=E5=85=A5config=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/cms/design/model/index.ts  |  2 +
 components/AppFooter.vue       | 21 +++++----
 components/AppHeader.vue       | 16 +++----
 components/Breadcrumb.vue      |  3 +-
 composables/configState.ts     | 11 +++++
 nuxt.config.ts                 |  2 -
 pages/[custom]/index.vue       | 78 ++++++++++++++++++++++-----------
 pages/page/[id].vue            | 80 ++++++++++++++++++++++++++++++++++
 pages/product/740a123.html.vue | 11 +++++
 types/global.d.ts              |  8 ++++
 10 files changed, 184 insertions(+), 48 deletions(-)
 create mode 100644 pages/page/[id].vue
 create mode 100644 pages/product/740a123.html.vue

diff --git a/api/cms/design/model/index.ts b/api/cms/design/model/index.ts
index 2a35f86..913e341 100644
--- a/api/cms/design/model/index.ts
+++ b/api/cms/design/model/index.ts
@@ -18,6 +18,8 @@ export interface Design {
   width?: string;
   // 高
   height?: string;
+  // 页面样式
+  styles?: string;
   // 附件
   images?: string;
   // 用户ID
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 287c323..0305045 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -1,17 +1,15 @@
 <template>
   <footer class="overflow-hidden">
     <div class="sm:h-[100px] h-[50px]"></div>
-    <div class="text-center bg-white text-red-7 py-10" style="display: none">
-      本网站为小象CMS演示站，提供的电视剧和电影资源均系收集于各大视频网站<br />
-      若本站收录的节目无意侵犯了贵司版权,请给我们留言,我们会及时逐步删除和规避程序自动搜索采集到的不提供分享的版权影视。<br />
-      本站仅供测试和学习交流。请大家支持正版。
+    <div class=" bg-white my-3 w-3/4 m-auto" v-if="config.copyrightForDemoData">
+      <el-alert :title="config.copyrightForDemoData" center show-icon type="warning" />
     </div>
     <div class="w-full flex flex-col sm:bg-black justify-between">
       <!-- PC版 -->
       <div class="sub-menu w-full md:w-3/4 m-auto flex justify-between py-10 text-center p-2 hidden-sm-and-down">
 
         <!-- 底部菜单 -->
-          <div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-8/12 flex-wrap w-full">
+          <div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-9/12 flex-wrap w-full">
             <template v-for="item in subMenu">
               <div class="sub-menu-item text-left">
                 <div class="pb-4">
@@ -29,10 +27,10 @@
           </div>
 
           <!-- 关注我们 -->
-          <div class="right w-3/12  pr-3 text-right flex justify-end">
+          <div class="right w-3/12  pr-3 text-right flex justify-end" v-if="config.wxQrcode">
             <div class="qrcode flex flex-col items-center">
-              <el-image src="https://oss.wsdns.cn/20240327/f1175cc5aae741d3af05484747270bd5.jpeg" class="w-[100px]" />
-              <text class="text-gray-400 py-2">扫一扫关注</text>
+              <el-image :src="config.wxQrcode" class="w-[100px]" />
+              <text class="text-gray-400 py-2">{{ config.wxQrcodeText }}</text>
             </div>
           </div>
         </div>
@@ -61,12 +59,13 @@
           <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
           <a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号：{{ config?.icpNo }}</a>
         </div>
-        <div class="tools flex gap-xl items-center">
+        <div class="tools flex gap-xl items-center opacity-80 hover:opacity-90">
 <!--          <a href="https://github.com" class="sm:flex hidden items-center" target="_blank"><img src="@/assets/svg/github-mark-white.svg" alt="github" width="20" class="text-gray-400" /></a>-->
 <!--          <a href="https://github.com" class="sm:hidden flex items-center" target="_blank"><img src="@/assets/svg/github-mark.svg" alt="github" width="20" class="text-gray-400" /></a>-->
-          <a :href="`https://${website.tenantId}.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="github" width="28" class="text-gray-400" /></a>
+          <el-tooltip :content="`管理后台`" v-if="config.showAdminIcon">
+            <a :href="`https://${website.tenantId}.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="github" width="28" class="text-gray-400" /></a>
+          </el-tooltip>
         </div>
-
       </div>
     </div>
   </footer>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 57e8b83..705b5cd 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -25,12 +25,12 @@
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse="true"
-            :ellipsis="false"
+            :ellipsis="true"
             style="border-bottom: none"
             @select="handleSelect"
           >
             <template v-for="(item, index) in navigations">
-              <el-menu-item :index="item.path" v-if="index < visibleNumber">
+              <el-menu-item :index="item.path" v-if="index < (config.elMenuMaxNumber || 6)">
                   <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${item.path}`">
                     <template #title>
                         <text class="text-[17px]">{{ item.title }}</text>
@@ -42,10 +42,10 @@
             </template>
 
             <!-- 顶部菜单超出数量折叠 -->
-            <el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber">
+            <el-sub-menu index="more" v-if="navigations && navigations.length > (config.elMenuMaxNumber || 6)">
               <template #title>更多菜单</template>
               <template v-for="(item, index) in navigations">
-                <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
+                <el-menu-item :index="item.path" :key="index" v-if="index >= (config.elMenuMaxNumber || 6)">
                   {{ item.title }}</el-menu-item
                 >
               </template>
@@ -54,7 +54,7 @@
         </nav>
       </div>
       <div class="header__right items-center">
-        <div class="sm:flex hidden">
+        <div class="sm:flex hidden" v-if="config.showSearchTools">
           <el-input
               class="w-20 mr-4"
               placeholder="站内搜索"
@@ -76,8 +76,8 @@
             </el-dropdown>
           </template>
           <template v-else>
-            <el-button circle :icon="ElIconSearch" @click="navigateTo('/search')"></el-button>
-            <el-button circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
+            <el-button v-if="config.showSearchIcon" circle :icon="ElIconSearch" @click="navigateTo('/search')"></el-button>
+            <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
           </template>
         </ClientOnly>
       </div>
@@ -99,7 +99,7 @@
   const affix = useProductAffix();
 
   // 顶部栏初始数
-  const visibleNumber = ref<number>(10);
+  const visibleNumber = ref<number>(6);
   // 当前激活菜单的 index
   const currentIndex = ref<string>('2');
 
diff --git a/components/Breadcrumb.vue b/components/Breadcrumb.vue
index ec34b7f..75eb073 100644
--- a/components/Breadcrumb.vue
+++ b/components/Breadcrumb.vue
@@ -3,8 +3,7 @@
     <el-breadcrumb :separator-icon="ArrowRight">
       <el-breadcrumb-item :to="{ path: '/' }"><el-icon class="cursor-pointer"><ElIconHouse /></el-icon></el-breadcrumb-item>
       <el-breadcrumb-item v-if="data?.parentName" :to="{ path: data.parentPath }">{{ data.parentName }}</el-breadcrumb-item>
-      <el-breadcrumb-item v-if="data?.categoryName" :to="{ path: data.categoryPath }">{{ data.categoryName }}</el-breadcrumb-item>
-      <el-breadcrumb-item v-if="title">{{ title }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="data?.categoryName">{{ title ? title : data.categoryName }}</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
 </template>
diff --git a/composables/configState.ts b/composables/configState.ts
index bcdb068..27ca78a 100644
--- a/composables/configState.ts
+++ b/composables/configState.ts
@@ -3,29 +3,40 @@ import type { Config } from '~/types/global';
 import type {Website} from "~/api/cms/website/model";
 import type {Navigation} from "~/api/cms/navigation/model";
 
+// 网站信息
 export const useWebsite = () =>
     useState<Website>('website', () => {
         return {};
     });
 
+// 参数配置
 export const useConfigInfo = () =>
   useState<Config>('config', () => {
     return {};
   });
 
+// 主导航
 export const useMenu = () =>
     useState<Navigation[]>('menu', () => {
         return [];
     });
 
+// 副导航
 export const useSubMenu = () =>
     useState<Navigation[]>('subMenu', () => {
         return [];
     });
 
+// 页面元素
+export const useForm = () => useState<Navigation>('form', () => {
+    return {};
+});
+
+// 固钉
 export const useProductAffix = () =>
     useState<boolean>('affixTop', () => {
         return false;
     });
 
+// 登录凭证
 export const useToken = () => useState('token', () => 'token xxx');
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 46c271e..f259aab 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,4 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import {domain} from "~/config";
-
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
     devtools: {enabled: false},
diff --git a/pages/[custom]/index.vue b/pages/[custom]/index.vue
index 16a7d4b..893b37b 100644
--- a/pages/[custom]/index.vue
+++ b/pages/[custom]/index.vue
@@ -1,69 +1,97 @@
 <template>
   <!-- Banner -->
   <Banner :data="form" />
-
+  {{ form }}
   <!-- 容器 -->
   <div class="container md:w-3/4 m-auto" v-if="form">
     <div class="flex flex-col">
       <Breadcrumb :data="form" />
-      <div class="page-main w-full  bg-white rounded-lg">
-        <div class="p-4 leading-7" v-html="form.design.content">
+      <div :class="form.design?.styles" class="page-main w-full bg-white rounded-lg">
+        <div class="p-4 leading-7" v-html="form.design?.content">
         </div>
       </div>
     </div>
   </div>
-
   <div v-if="!form">
     <el-empty description="404 页面不存在"></el-empty>
   </div>
 </template>
 <script setup lang="ts">
-import type {Design} from "~/api/cms/design/model";
 import type {ApiResult} from "~/api";
 import {useServerRequest} from "~/composables/useServerRequest";
-import {useConfigInfo, useToken} from "~/composables/configState";
+import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState";
 import Breadcrumb from "~/components/Breadcrumb.vue";
 import type {BreadcrumbItem} from "~/types/global";
 import type {Navigation} from "~/api/cms/navigation/model";
 
+// 引入状态管理
 const route = useRoute();
-const { params } = route;
-const { custom: path } = params;
-
-// 网站配置信息
+const website = useWebsite();
 const config = useConfigInfo();
 const token = useToken();
-// 页面信息
-const form = ref<Navigation | any>();
+const form = useForm();
 const breadcrumb = ref<BreadcrumbItem>();
 
 // 请求数据
-const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{
-  query: {
-    path: '/' + path
+const reload = async () => {
+  // 都不存在
+  if(!form.value.navigationId && !form.value.path){
+    return ;
+  }
+
+  // 存在spm(优先级高)
+  if(form.value.navigationId){
+    console.log('11111')
+    const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + form.value.navigationId)
+    if (nav.value?.data) {
+      form.value = nav.value.data
+    }
+  }
+
+  // 不存在spm的情况
+  if(!form.value.navigationId){
+    console.log('2222')
+    const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: form.value.path}})
+    if(nav.value?.data){
+      form.value = nav.value?.data;
+    }
   }
-})
 
-if (nav.value?.data) {
   // seo
-  form.value = nav.value.data
   useHead({
-    title: `${form.value.title} - 网宿软件`,
-    meta: [{ name: form.value.design.keywords, content: form.value.design.description }],
+    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('Hello World')",
+        children: `console.log(${JSON.stringify(form.value)})`,
       },
     ],
   });
   // 面包屑
-  breadcrumb.value = form.value.breadcrumb
+  breadcrumb.value = form.value
 }
-</script>
 
-<style scoped lang="scss">
+watch(
+    () => route.query.spm,
+    (spm) => {
+      // TODO 方案一(优先级高)：从spm参数提取商品ID
+      if(spm){
+        const spmValue = String(spm).split('.')
+        if(spmValue[5]){
+          form.value.navigationId = Number(spmValue[5])
+        }
+        return reload();
+      }
+
+      // TODO 方案二：从params获取商品ID
+      const { custom } = route.params
+      form.value.path = `/${custom}`;
 
-</style>
+      reload();
+    },
+    { immediate: true }
+);
+</script>
diff --git a/pages/page/[id].vue b/pages/page/[id].vue
new file mode 100644
index 0000000..0ef9050
--- /dev/null
+++ b/pages/page/[id].vue
@@ -0,0 +1,80 @@
+<template>
+  <!-- Banner -->
+  <Banner :data="form" />
+
+  <!-- 容器 -->
+  <div class="container md:w-3/4 m-auto" v-if="form">
+    <div class="flex flex-col">
+      <Breadcrumb :data="form" />
+      <div :class="form.design?.styles" class="page-main w-full bg-white rounded-lg">
+        <div class="p-4 leading-7" v-html="form.design?.content">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-if="!form">
+    <el-empty description="404 页面不存在"></el-empty>
+  </div>
+</template>
+<script setup lang="ts">
+import type {ApiResult} from "~/api";
+import {useServerRequest} from "~/composables/useServerRequest";
+import {useConfigInfo, useForm, useToken} from "~/composables/configState";
+import Breadcrumb from "~/components/Breadcrumb.vue";
+import type {BreadcrumbItem} from "~/types/global";
+import type {Navigation} from "~/api/cms/navigation/model";
+
+// 引入状态管理
+const route = useRoute();
+const config = useConfigInfo();
+const token = useToken();
+const form = useForm();
+const breadcrumb = ref<BreadcrumbItem>();
+
+// 请求数据
+const reload = async () => {
+  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/' + form.value.navigationId)
+  if (nav.value?.data) {
+    form.value = nav.value.data
+    // seo
+    useHead({
+      title: `${form.value.title} - ${config.value.siteName}`,
+      meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }],
+      bodyAttrs: {
+        class: "page-container",
+      },
+      script: [
+        {
+          children: "console.log('Hello World====')",
+        },
+      ],
+    });
+    // 面包屑
+    breadcrumb.value = form.value
+  }
+}
+
+watch(
+    () => route.query.spm,
+    (spm) => {
+      console.log(spm,'spm>>')
+      // TODO 方案一：从spm参数提取商品ID
+      const spmValue = String(spm).split('.')
+      if(spmValue[5]){
+        form.value.navigationId = Number(spmValue[5])
+      }
+
+      // TODO 方案二(优先级更高)：从params获取商品ID
+      console.log(route.params.id,'sdfsd');
+      // const str = String(custom).replaceAll(".html", "");
+      // const split = str.split('-');
+      // if(split[1]){
+      //   console.log('方案二：从params获取ID=' + split[1])
+      //   form.value.navigationId = Number(split[1])
+      // }
+
+      reload();
+    },
+    { immediate: true }
+);
+</script>
diff --git a/pages/product/740a123.html.vue b/pages/product/740a123.html.vue
new file mode 100644
index 0000000..d699313
--- /dev/null
+++ b/pages/product/740a123.html.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="h-[500px] w-[500px] m-auto text-3xl text-center justify-center bg-amber mt-[100px] items-center">a740a123740a123740a123740a123</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/types/global.d.ts b/types/global.d.ts
index 4eff37b..642b459 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -9,6 +9,14 @@ export interface Config {
     siteLogo?: string;
     subpageBanner?: string;
     bottomBg?: string;
+    elMenuMaxNumber?: number;
+    showSearchTools?: string;
+    showSearchIcon?: string;
+    showLoginButton?: string;
+    showAdminIcon?: string;
+    wxQrcode?: string;
+    wxQrcodeText?: string;
+    copyrightForDemoData?: string;
 }
 
 export interface BreadcrumbItem {