新版本官网优化完成

pages/search/[id].vue

@@ -0,0 +1,146 @@
+<template>
+
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+    <el-row :gutter="24" id="container" class="clearfix">
+      <el-col :span="5" class="left">
+        <!-- 内页左侧组件 -->
+        <Left :category="category"  />
+      </el-col>
+      <el-col :span="19" class="right">
+        <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">
+                <a :href="detail(item)" target="_blank" class="n-left fl">
+                  <el-image :src="item.image" :fit="`scale-down`" class="w-[240px] h-[158px]" :alt="item.title" />
+                </a>
+                <div class="n-right fr">
+                  <h3><a :href="detail(item)" target="_blank" :title="item.title" v-html="replaceKeywords(item.title)"></a></h3>
+                  <div v-html="replaceKeywords(item.comments)" class="line-clamp-2"></div>
+                  <div class="date">{{ $t('createTime') }}：{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
+                  <div class="date">{{ $t('search.column') }}：{{ item.categoryName }}</div>
+                  <div class="n-more"><a :href="detail(item)">{{ $t('seeMore') }}>></a></div>
+                </div>
+              </li>
+            </template>
+            <div class="clearboth"></div>
+          </ul>
+
+          <Pagination :total="total" @done="search" />
+
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import Banner from "@/components/Banner.vue";
+import {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 {ArrowRight} from '@element-plus/icons-vue'
+import {detail, getPath} from "~/utils/common";
+import Left from "~/components/Left.vue";
+import {listCmsNavigation} from "~/api/cms/cmsNavigation";
+import {pageCmsArticle} from "~/api/cms/cmsArticle";
+import {listCmsModel} from "~/api/cms/cmsModel";
+
+const route = useRoute();
+
+// 页面信息
+const list = ref<CmsArticle[]>([]);
+const i18n = useI18n();
+const category = ref<CmsNavigation[]>([]);
+const total = ref(0);
+
+// 获取状态
+const page = usePage();
+const layout = useLayout();
+
+// 搜索表单
+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(1)
+  }).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: 2847,
+      }).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,'加载失败...')
+  })
+}
+
+/**
+ * 搜索
+ * @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>

pages/search/index.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="login-layout mt-[100px] min-h-2xl m-auto sm:w-screen-sm w-full">
-    <div class="title text-xl text-gray-700 px-4 py-2 font-500 text-center">
-      <div class="sm:w-screen-sm w-full">
-        <el-input
-            v-model="where.keywords"
-            class="w-full"
-            size="large"
-            placeholder="搜索"
-            :prefix-icon="Search"
-            @keydown.enter="handleClick"
-        >
-          <template #append>
-            <el-button size="large" type="primary" @click="handleClick">搜索</el-button>
-          </template>
-        </el-input>
-        <el-tabs v-model="activeName" class="my-3" @tab-click="handleClick">
-          <el-tab-pane label="应用" name="web"></el-tab-pane>
-          <el-tab-pane label="公众号" name="mp-official"></el-tab-pane>
-          <el-tab-pane label="小程序" name="mp-weixin"></el-tab-pane>
-          <el-tab-pane label="移动应用" name="app"></el-tab-pane>
-          <el-tab-pane label="小商店" name="mp-shop"></el-tab-pane>
-          <el-tab-pane label="其他" name="other"></el-tab-pane>
-        </el-tabs>
-      </div>
-    </div>
-    <template v-if="activeName === 'web'">
-      <div class="search bg-white rounded-lg p-3 w-full" v-if="websites.length > 0">
-        <div class="title text-gray-400 px-4 py-2 mb-4">网站应用</div>
-        <div class="result px-3">
-          <div v-for="(item,index) in websites" :key="index" class="app-item block border-solid rounded-lg border-gray-300 border-1 mb-4 p-3 flex flex-row items-center hover:border-blue-4 hover:border-2 cursor-pointer">
-            <el-space @click="navTo(item)">
-              <div class="avatar">
-                <el-avatar :src="item.websiteLogo" style="background-color: #f3f3f3" size="large" />
-              </div>
-              <div class="app-info flex flex-col">
-                <div class="text-lg">{{ item.websiteName }}</div>
-                <div class="text-gray-400">{{ item.comments }}</div>
-                <div class="text-gray-300 text-xs-1">{{ item.websiteType }}</div>
-              </div>
-            </el-space>
-          </div>
-        </div>
-      </div>
-    </template>
-    <div v-else class="px-1 text-center text-gray-500 min-h-xs">
-      {{ resultText }}
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-import type {ApiResult, PageResult} from "~/api";
-import {useServerRequest} from "~/composables/useServerRequest";
-import {useWebsite} from "~/composables/configState";
-import type {Navigation} from "~/api/cms/navigation/model";
-import {getPath} from "~/utils/common";
-import type {CompanyParam} from "~/api/system/company/model";
-import type {Tenant} from "~/api/system/tenant/model";
-import {navigateTo} from "#imports";
-import type {Website} from "~/api/cms/website/model";
-
-const route = useRoute();
-
-// 页面信息
-const runtimeConfig = useRuntimeConfig();
-const list = ref<Tenant[]>([]);
-const websites = ref<Website[]>([]);
-const activeName = ref('web');
-const page = ref<number>(0);
-const resultText = ref('');
-const layout = ref<any>();
-
-// 获取状态
-const form = ref<Navigation>();
-const website = useWebsite();
-
-// 搜索表单
-const where = reactive<CompanyParam>({
-  keywords: ''
-});
-
-const navTo = (item: Website) => {
-  if(item.domain){
-    openSpmUrl(`https://${item.domain}`,item,item.tenantId)
-    return;
-  }
-  openSpmUrl(`https://${item.websiteCode}.wsdns.cn`,item,item.tenantId)
-}
-
-// 请求数据
-const reload = async () => {
-
-  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/getNavigationByPath',{query: {path: getPath()}})
-  if(nav.value?.data){
-    form.value = nav.value?.data;
-  }
-  // 页面布局
-  if(form.value?.layout){
-    layout.value = JSON.parse(form.value?.layout)
-  }
-  useHead({
-    title: `搜索结果 - ${website.value.websiteName}`,
-    bodyAttrs: {
-      class: "page-container",
-    }
-  });
-}
-
-// 搜索结果
-const handleClick = async () => {
-  if (where.keywords == '') {
-    return false;
-  }
-  if(activeName.value == 'web'){
-    const {data: response} = await useServerRequest<ApiResult<PageResult<Website>>>('/cms/cms-website/page',{baseURL: runtimeConfig.public.apiServer, params: {
-        page: page.value, keywords: where.keywords
-      }})
-    if(response.value?.data){
-      if (response.value?.data.list) {
-        websites.value = response.value?.data.list;
-      }
-      if(response.value.data.count == 0){
-        resultText.value = '暂无相关结果'
-      }
-    }
-  }
-}
-
-watch(
-    () => route,
-    () => {
-      reload();
-    },
-    { immediate: true }
-);
-
-</script>