新版本官网优化完成

pages/m/search/[id].vue

@@ -0,0 +1,147 @@
+<template>
+
+  <Banner :layout="layout" />
+
+  <!-- 主体部分 -->
+  <div class="p-5">
+
+    <div class="m-page">
+      <div class="sitemp h-[32px] flex justify-between">
+        <h2>
+          {{ $t('searchKeywords') }}：{{ where.keywords }}
+        </h2>
+      </div>
+      <el-alert v-if="where.keywords" :title="`${$t('search.results')}：${$t('search.find')} ${total} ${$t('search.nums')}`" type="warning" :closable="false" />
+      <div class="content">
+
+        <ul class="news_listn clearfix">
+          <template v-for="(item,index) in list" key="index">
+            <li class="clearfix">
+              <div class="">
+                <h3 class="text-lg"><a :href="mDetail(item)" :title="item.title" v-html="replaceKeywords(item.title)"></a></h3>
+                <div v-html="replaceKeywords(item.comments)" class="line-clamp-2 text-gray-400"></div>
+                <div class="date text-gray-400">{{ $t('createTime') }}：{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
+              </div>
+            </li>
+          </template>
+          <div class="clearboth"></div>
+        </ul>
+
+        <Pagination :total="total" @done="search" />
+
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Banner from "@/components/Banner.vue";
+import {useConfigInfo, useLayout, usePage} from "~/composables/configState";
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
+import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import dayjs from "dayjs";
+import {getPath} from "~/utils/common";
+import {listCmsNavigation} from "~/api/cms/cmsNavigation";
+import {pageCmsArticle} from "~/api/cms/cmsArticle";
+import {listCmsModel} from "~/api/cms/cmsModel";
+
+const route = useRoute();
+
+// 页面信息
+const runtimeConfig = useRuntimeConfig();
+const list = ref<CmsArticle[]>([]);
+const i18n = useI18n();
+const category = ref<CmsNavigation[]>([]);
+const total = ref(0);
+
+// 获取状态
+const page = usePage();
+const layout = useLayout();
+const config = useConfigInfo();
+
+// 搜索表单
+const where = reactive<CmsArticleParam>({
+  keywords: '',
+  page: 1,
+  limit: 10,
+  status: 0,
+  parentId: undefined,
+  categoryId: undefined,
+  lang: i18n.locale.value
+});
+
+const replaceKeywords = (text: any) => {
+  return text.replace(`${where.keywords}`,'<font color=#ff0000>' + where.keywords + '</font>');
+}
+
+// 加载页面数据
+const reload = async () => {
+  listCmsModel({
+    model: getPath(2)
+  }).then(response => {
+    const data = response[0];
+    if(data){
+      // 获取栏目信息
+      page.value = data
+      layout.value.banner = data.banner;
+
+      // 设置页面标题
+      useSeoMeta({
+        description: data?.comments || `${route.params.id}`,
+        keywords: `${route.params.id}`,
+        titleTemplate: `【搜索结果】${route.params.id}` + ' - %s',
+      })
+
+      // 二级栏目分类
+      listCmsNavigation({
+        parentId: i18n.locale.value == 'en' ? 1073 : 998,
+      }).then(categoryData => {
+        category.value = categoryData;
+        // 加载文章列表
+        if(!getPath(1)){
+          return ElMessage.error('请输入搜索关键词！');
+        }
+        where.keywords = `${route.params.id}`;
+        pageCmsArticle(where).then(response => {
+          if(response){
+            total.value = response?.count;
+            list.value = response?.list;
+          }
+        })
+      })
+    }
+
+  }).catch(err => {
+    console.log(err,'加载失败...')
+  })
+}
+
+
+useHead({
+  title: `搜索结果 - ${config.value.siteName || runtimeConfig.public.siteName}`,
+  bodyAttrs: {
+    class: "page-container",
+  }
+});
+
+/**
+ * 搜索
+ * @param data
+ */
+const search = (data: CmsArticleParam) => {
+  where.page = data.page;
+  reload();
+}
+
+watch(
+    () => route.path,
+    () => {
+      reload();
+    },
+    {immediate: true}
+);
+</script>
+<style scoped lang="less">
+.sitemp h2{
+  width: 500px !important;
+}
+</style>