📦 文化概况页面对接

src/api/CommonContent.ts

@@ -10,10 +10,28 @@ export class GetColumListParams extends DataModel<GetColumListParams> {
     this.setNameMapperCase('Camel', 'Snake');
   }
 
+  setModelId(val: number) {
+    this.modelId = val;
+    return this;
+  }
+  setMainBodyColumnId(val: number) {
+    this.mainBodyColumnId = val;
+    return this;
+  }
+  setFlag(val: 'hot'|'recommend'|'top') {
+    this.flag = val;
+    return this; 
+  }
+  setSize(val: number) {
+    this.size = val;
+    return this; 
+  }
+
+  modelId?: number;
   /**
    * 	主体栏目id
    */
-  mainBodyColumnId: number|number[] = 0;
+  mainBodyColumnId: number = 0;
   /**
    * 标志：hot=热门，recommend=推荐，top=置顶
    */
@@ -36,10 +54,36 @@ export class GetContentListParams extends DataModel<GetContentListParams> {
     }
   }
 
+
+  setMainBodyColumnId(val: number) {
+    this.mainBodyColumnId = val;
+    return this;
+  }
+  setFlag(val: 'hot'|'recommend'|'top') {
+    this.flag = val;
+    return this; 
+  }
+  setIds(val: number[]) {
+    this.ids = val;
+    return this; 
+  }
+  setType(val: 1|2|3|4) {
+    this.type = val;
+    return this;
+  }
+  setSize(val: number) {
+    this.size = val;
+    return this;
+  }
+  setKeywords(val: string) {
+    this.keywords = val;
+    return this; 
+  }
+
   /**
    * 主体栏目id
    */
-  mainBodyColumnId: number|number[] = 0;
+  mainBodyColumnId: number = 0;
   /**
    * 标志：hot=热门，recommend=推荐，top=置顶
    */

src/api/communicate/CommunicateContent.ts

@@ -3,7 +3,7 @@ import { CommonContentApi } from '../CommonContent';
 export class CommunicateContentApi extends CommonContentApi {
 
   constructor() {
-    super(16, "文化交流");
+    super(18, "文化交流");
   }
 }
 

src/assets/scss/news.scss

@@ -3,9 +3,34 @@
 @use '@/assets/scss/colors.scss' as *;
 
 .news-list {
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+
+  &.grid {
+    .list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
+      column-gap: 0;
+    }
+    .item {
+      img {
+        width: 200px;
+        height: 130px;
+        margin-right: 25px;
+      }
+    }
+  }
+
+  .list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
 
   .item {
     display: flex;
@@ -13,6 +38,11 @@
     padding: 25px;
     border-radius: 6px;
     background-color: $box-color;
+    width: 100%;
+
+    &.empty {
+      background-color: transparent;
+    }
 
     &:hover { 
       background-color: $box-hover-color;
@@ -25,6 +55,8 @@
       width: 320px;
       height: 180px;
       margin-right: 25px;
+      border-radius: 5px;
+      object-fit: cover;
     }
 
    
@@ -47,6 +79,16 @@
         margin-right: 25px;
       }
     }
+
+    &.grid {
+      .item {
+        img {
+          width: 120px;
+          height: 90px;
+          margin-right: 15px;
+        }
+      }
+    }
   }
 }
 @media (max-width: 540px) {

src/common/ConstStrings.ts

@@ -0,0 +1 @@
+export const NO_CONTENT_STRING = '无内容，请添加内容！';

src/components/content/CommonListPage.vue

@@ -7,7 +7,8 @@
       <div class="content mb-2">
         <!-- 路径 -->
         <a-breadcrumb>
-          <a-breadcrumb-item><a href="" @click="navTo('/')">首页</a></a-breadcrumb-item>
+          <a-breadcrumb-item><a href="javascript:;" @click="navTo('/')">首页</a></a-breadcrumb-item>
+          <a-breadcrumb-item v-if="prevPage"><a href="javascript:;" @click="prevPage.url ? navTo(prevPage.url) : back()">{{ prevPage.title }}</a></a-breadcrumb-item>
           <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
         </a-breadcrumb>
       </div>
@@ -33,7 +34,7 @@
             />
             <SimpleInput v-if="showSearch" v-model="searchText" placeholder="请输入关键词" @enter="handleSearch">
               <template #suffix>
-                <img
+                <IconSearch
                   class="search-icon"
                   src="@/assets/images/news/IconSearch.png"
                   alt="搜索" 
@@ -44,31 +45,45 @@
           </div>
         </div>
       </div>
-      <div class="content news-list">
+      <div 
+        :class="[
+          'content', 
+          'news-list',
+          rowCount === 1 ? '' : 'grid',
+        ]"
+      >
         <!-- 新闻列表 -->
         <SimplePageContentLoader :loader="newsLoader">
-          <div 
-            v-for="(item, k) in newsLoader.list.value"
-            :key="item.id"
-            class="item user-select-none main-clickable"
-            :style="{ width: rowWidth }"
-            @click="navTo('/news/detail', { id: item.id })"
-          >
-            <img :src="item.image" alt="新闻图片" />
-            <TitleDescBlock
-              :title="item.title"
-              :desc="item.desc || item.title"
-              :date="DateUtils.formatDate(item.publish_at, DateUtils.FormatStrings.YearCommon)"
-              @click="handleShowDetail(item)"
+          <div class="list">
+            <div 
+              v-for="(item, k) in newsLoader.list.value"
+              :key="item.id"
+              class="item user-select-none main-clickable"
+              :style="{ width: rowWidth }"
+              @click="navTo('/news/detail', { id: item.id })"
+            >
+              <img :src="item.image" alt="新闻图片" />
+              <TitleDescBlock
+                :title="item.title"
+                :desc="item.desc || item.title"
+                :date="DateUtils.formatDate(item.publish_at, DateUtils.FormatStrings.YearCommon)"
+                @click="handleShowDetail(item)"
+              />
+            </div>
+            <div 
+              v-for="count of placeholderItemCount"
+              :key="count"
+              class="item empty"
+              :style="{ width: rowWidth }"
             />
           </div>
         </SimplePageContentLoader>
-        <!-- 分页 -->
-        <Pagination
-          v-model:currentPage="newsLoader.page.value"
-          :totalPages="newsLoader.totalPages.value"
-        />
       </div>
+      <!-- 分页 -->
+      <Pagination
+        v-model:currentPage="newsLoader.page.value"
+        :totalPages="newsLoader.totalPages.value"
+      />
     </section>
   </div>
 </template>
@@ -84,8 +99,9 @@ import SimpleInput from '../controls/SimpleInput.vue';
 import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
 import Pagination from '../controls/Pagination.vue';
 import TitleDescBlock from '../parts/TitleDescBlock.vue';
+import IconSearch from '../icons/IconSearch.vue';
 
-const { navTo } = usePageAction();
+const { navTo, back } = usePageAction();
 
 export interface DropdownCommonItem {
   value: number; 
@@ -101,6 +117,13 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  prevPage: {
+    type: Object as PropType<{
+      title: string,
+      url?: string,
+    }>,
+    default: null,
+  },
   dropDownNames: {
     type: Object as PropType<DropDownNames[]>,
     default: null,
@@ -148,26 +171,29 @@ const props = defineProps({
   },
 })
 
+const realRowCount = computed(() => {
+  if (window.innerWidth < 768) 
+    return 1;
+  return props.rowCount;
+});
 const rowWidth = computed(() => {
-  switch (props.rowCount) {
+  switch (realRowCount.value) {
     case 2:
-      return `calc(50% - 100px)`;
+      return `calc(50% - 25px)`;
     case 3:
-      return `calc(33% - 100px)`;
+      return `calc(33% - 25px)`;
     case 4:
-      return `calc(25% - 100px)`;
+      return `calc(25% - 25px)`;
   }
 });
-const rowMargin = computed(() => {
-  switch (props.rowCount) {
+const placeholderItemCount = computed(() => {
+  switch (realRowCount.value) {
     case 2:
-      return 30;
     case 3:
-      return 30;
     case 4:
-      return 30;
+      return newsLoader.list.value.length % realRowCount.value;
   }
-  return '0';
+  return 0;
 });
 const searchText = ref('');
 const dropDownValues = ref<any>([]);
@@ -202,10 +228,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+@use "@/assets/scss/colors";
+
 .search-icon {
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   cursor: pointer;
+  color: colors.$primary-color;
 }
 </style>
 

src/components/content/SimplePageContentLoader.vue

@@ -19,6 +19,7 @@
   <div
     v-if="showEmpty || loader?.loadStatus.value == 'nomore'"
     style="min-height: 200rpx"
+    class="empty"
   >
     <a-empty :description="emptyView?.text ?? '暂无数据'">
       <a-button

src/router/index.ts

@@ -33,6 +33,51 @@ const router = createRouter({
       name: 'introduction',
       component: () => import('../views/IntrodView.vue'),
     },
+{
+      path: '/introduction/history',
+      name: 'IntroductionHistory',
+      component: () => import('../views/introduction/history.vue'),
+    },
+    {
+      path: '/introduction/character',
+      name: 'IntroductionCharacter',
+      component: () => import('../views/introduction/character.vue'),
+    },
+    {
+      path: '/introduction/language',
+      name: 'IntroductionLanguage',
+      component: () => import('../views/introduction/language.vue'),
+    },
+    {
+      path: '/introduction/custom',
+      name: 'IntroductionCustom',
+      component: () => import('../views/introduction/custom.vue'),
+    },
+    {
+      path: '/introduction/feature',
+      name: 'IntroductionFeature',
+      component: () => import('../views/introduction/feature.vue'),
+    },
+    {
+      path: '/introduction/building',
+      name: 'IntroductionBuilding',
+      component: () => import('../views/introduction/building.vue'),
+    },
+    {
+      path: '/introduction/victuals',
+      name: 'IntroductionVictuals',
+      component: () => import('../views/introduction/victuals.vue'),
+    },
+    {
+      path: '/introduction/sea',
+      name: 'IntroductionSea',
+      component: () => import('../views/introduction/sea.vue'),
+    },
+    {
+      path: '/introduction/policy',
+      name: 'IntroductionPolicy',
+      component: () => import('../views/introduction/policy.vue'),
+    },
     {
       path: '/communicate',
       name: 'communicate',
@@ -49,11 +94,6 @@ const router = createRouter({
       component: () => import('../views/communicate/hk-macao-and-taiwan.vue'),
     },
     {
-      path: '/communicate/south-asian',
-      name: 'CommunicateSouthAsian',
-      component: () => import('../views/communicate/south-asian.vue'),
-    },
-    {
       path: '/communicate/activity',
       name: 'CommunicateActivity',
       component: () => import('../views/communicate/activity.vue'),

src/views/CommunicateView.vue

@@ -21,14 +21,14 @@
 
         <LeftRightBox 
           title="闽南地区文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词..---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :desc="overviewsLoader.content.value?.[0]"
           :image="Image1"
           @moreClick="navTo('/communicate/fujian-and-taiwan')"
         />
         <LeftRightBox 
           class="mt-4"
-          title="台港澳地区文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          title="台湾地区文化交流"
+          :desc="overviewsLoader.content.value?.[1]"
           :image="Image2"
           left
           @moreClick="navTo('/communicate/hk-macao-and-taiwan')"
@@ -36,9 +36,9 @@
         <LeftRightBox 
           class="mt-4"
           title="对外文化交流"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词....---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :desc="overviewsLoader.content.value?.[2]"
           :image="Image3"
-          @moreClick="navTo('/communicate/south-asian')"
+          @moreClick="navTo('/communicate/outside')"
         />
       
       </div>
@@ -52,10 +52,14 @@
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
 import { onMounted, ref } from 'vue';
 import { usePageAction } from '@/composeable/PageAction';
+import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
 import Image1 from '@/assets/images/communicate/Image1.jpg'
 import Image2 from '@/assets/images/communicate/Image2.jpg'
 import Image3 from '@/assets/images/communicate/Image3.jpg'
 import LeftRightBox from '@/components/parts/LeftRightBox.vue';
+import CommonContent, { GetColumListParams } from '@/api/CommonContent';
+import CommunicateContent from '@/api/communicate/CommunicateContent';
+import { NO_CONTENT_STRING } from '@/common/ConstStrings';
 
 const carouselConfig = {
   itemsToShow: 1,
@@ -65,6 +69,20 @@ const carouselConfig = {
 
 const { navTo } = usePageAction();
 
+const overviewsLoader = useSimpleDataLoader(async () => {
+  return [
+    (await CommunicateContent.getColumList(
+      new GetColumListParams().setMainBodyColumnId(260)
+    )).list[0]?.overview || NO_CONTENT_STRING,
+    (await CommunicateContent.getColumList(
+      new GetColumListParams().setMainBodyColumnId(261)
+    )).list[0]?.overview || NO_CONTENT_STRING,
+    (await CommunicateContent.getColumList(
+      new GetColumListParams().setMainBodyColumnId(262)
+    )).list[0]?.overview || NO_CONTENT_STRING,
+  ]
+});
+
 </script>
 
 <style lang="scss">

src/views/IntrodView.vue

@@ -21,8 +21,9 @@
 
         <LeftRightBox 
           title="闽南历史和地理背景"
-          desc="闽南地区总人口约一千余万，河南地区包括泉州、厦门、州三个地级市以及龙岩市的新罗区和漳平市。闽南地区的泉州港在未元时期是世界第一大港，闽南人分布广泛，海内外使用闽南方言的人很多，不少被闽南人影响的当地民族和马来人也会使用闽南语。闽南这个词.."
+          :desc="overviewsLoader.content.value?.[0]"
           :image="Image1"
+          @moreClick="navTo('/introduction/history')"
         />
       </div>
     </section>
@@ -36,9 +37,10 @@
 
         <LeftRightBox 
           title="闽南方言"
-          desc="北末时期，在泉州等口岸相继设立了学管外贸的市舶司，使泉州发展成当时国际上的著名商港，对外海线交通十分方便，在这以后，闽南等地区使有不少人民，因为政治、经济或其他因素而移民外地，也因此带去了他们的母语---闽南方言。明末时，闽南发生大旱，郑芝龙....."
+          :desc="overviewsLoader.content.value?.[1]"
           :image="Image2"
           left
+          @moreClick="navTo('/introduction/language')"
         />
       </div>
     </section>
@@ -59,7 +61,7 @@
 
 <script setup lang="ts">
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
-import { onMounted, ref } from 'vue';
+import IndexContent from '@/api/introduction/IndexContent';
 import Image1 from '@/assets/images/introduction/Image1.png';
 import Image2 from '@/assets/images/introduction/Image2.png';
 import CategoryImage1 from '@/assets/images/introduction/CategoryImage1.png';
@@ -70,6 +72,12 @@ import CategoryImage5 from '@/assets/images/introduction/CategoryImage5.png';
 import CategoryImage6 from '@/assets/images/introduction/CategoryImage6.png';
 import LeftRightBox from '@/components/parts/LeftRightBox.vue';
 import ThreeImageList from '@/components/parts/ThreeImageList.vue';
+import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
+import { GetColumListParams } from '@/api/CommonContent';
+import { NO_CONTENT_STRING } from '@/common/ConstStrings';
+import { usePageAction } from '@/composeable/PageAction';
+
+const { navTo } = usePageAction();
 
 const carouselConfig = {
   itemsToShow: 1,
@@ -81,33 +89,54 @@ const list = [
     title: '历史人物',
     desc: '让文化因传承而永存',
     image: CategoryImage1,
+    onClick: () => navTo('/introduction/character'),
   },
   {
     title: '民间习俗',
     desc: '让文化因传承而永存',
     image: CategoryImage2,
+    onClick: () => navTo('/introduction/custom'),
   },
   {
     title: '艺术特色',
     desc: '让文化因传承而永存',
     image: CategoryImage3,
+    onClick: () => navTo('/introduction/feature'),
   },
   {
     title: '建筑文化',
     desc: '让文化因传承而永存',
     image: CategoryImage4,
+    onClick: () => navTo('/introduction/building'),
   },
   {
     title: '饮食文化',
     desc: '让文化因传承而永存',
     image: CategoryImage5,
+    onClick: () => navTo('/introduction/victuals'),
   },
   {
     title: '海洋文化',
     desc: '让文化因传承而永存',
     image: CategoryImage6,
+    onClick: () => navTo('/introduction/sea'),
   }
 ]
 
+const overviewsLoader = useSimpleDataLoader(async () => {
+  return [
+    (await IndexContent.getColumList(
+      new GetColumListParams()
+        .setModelId(14)
+        .setMainBodyColumnId(233)
+    )).list[0]?.overview || NO_CONTENT_STRING,
+    (await IndexContent.getColumList(
+      new GetColumListParams()
+        .setModelId(5)
+        .setMainBodyColumnId(235)
+    )).list[0]?.overview || NO_CONTENT_STRING,
+  ]
+});
+
 </script>
 

src/views/NewsDetailView.vue

@@ -127,10 +127,17 @@ function back() {
 
   .news-content {
     position: relative;
+    min-height: 50vh;
 
     img {
       max-width: 100%;
       text-align: center;
+      border-radius: 5px;
+    }
+
+    p > img {
+      display: block;
+      margin: 0 auto;
     }
   }
 }

src/views/ResearchView.vue

@@ -47,7 +47,7 @@ const list = [
     desc: '让文化因传承而永存',
     image: Image1,
     onClick: () => {
-      navTo('/research/team');
+      navTo('/research/teams');
     }
   },
   {

src/views/communicate/fujian-and-taiwan.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 闽台文化交流 -->
    <CommonListPage
     :title="'闽台文化交流'"
+    :prevPage="{ title: '传播交流' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/communicate/hk-macao-and-taiwan.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 台港澳地区文化交流 -->
    <CommonListPage
     :title="'港澳台地区文化交流'"
+    :prevPage="{ title: '传播交流' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/communicate/outside.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 对外文化交流 -->
    <CommonListPage
     :title="'对外文化交流'"
+    :prevPage="{ title: '传播交流' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/fusion/demo-site.vue

@@ -2,6 +2,7 @@
   <!-- 文旅融合 - 文旅融合示范点 -->
    <CommonListPage
     :title="'文旅融合示范点'"
+    :prevPage="{ title: '文旅融合' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/fusion/fashion.vue

@@ -2,6 +2,7 @@
   <!-- 文旅融合 - 闽南时尚 -->
    <CommonListPage
     :title="'闽南时尚'"
+    :prevPage="{ title: '文旅融合' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/fusion/products.vue

@@ -2,6 +2,7 @@
   <!-- 文旅融合 - 文创产品 -->
    <CommonListPage
     :title="'文创产品'"
+    :prevPage="{ title: '文旅融合' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/fusion/route.vue

@@ -2,6 +2,7 @@
   <!-- 文旅融合 - 文化旅游路线 -->
    <CommonListPage
     :title="'文化旅游路线'"
+    :prevPage="{ title: '文旅融合' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/fusion/scenic-spot.vue

@@ -2,6 +2,7 @@
   <!-- 文化传承 - 文化景区 -->
    <CommonListPage
     :title="'文化文化景区'"
+    :prevPage="{ title: '文旅融合' }"
     :dropDownNames="[]"
     :showSearch="true"
     :pageSize="8"

src/views/introduction/building.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 文化概况 - 建筑文化 -->
+   <CommonListPage
+    :title="'建筑文化'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :pageSize="8"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '@/api/CommonContent';
+import BulidingContent from '@/api/introduction/BulidingContent';
+
+async function loadDetail(id: number, item: any) {
+  return await BulidingContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await BulidingContent.getContentList(new GetContentListParams(), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+

src/views/communicate/south-asian.vue

@@ -1,9 +1,11 @@
 <template>
-  <!-- 传播交流 - 东南亚地区文化交流 -->
+  <!-- 文化概况 - 历史人物 -->
    <CommonListPage
-    :title="'东南亚地区文化交流'"
+    :title="'历史人物'"
+    :prevPage="{ title: '文化概况' }"
     :dropDownNames="[]"
     :pageSize="8"
+    :rowCount="2"
     :load="loadData"
     :loadDetail="loadDetail"
   />
@@ -11,14 +13,10 @@
 
 <script setup lang="ts">
 import { GetContentListParams } from '@/api/CommonContent';
-import CommunicateContent from '@/api/communicate/CommunicateContent';
+import CharacterContentApi from '@/api/introduction/CharacterContent';
 
 async function loadDetail(id: number, item: any) {
-  const res = await CommunicateContent.getContentDetail(id);
-  res.content = res.content || res.intro as string;
-  res.addItems = [
-  ];
-  return res;
+  return await CharacterContentApi.getContentDetail(id);
 }
 async function loadData(
   page: number, 
@@ -28,21 +26,20 @@ async function loadData(
   dropDownValues: number[]
 ) {
 
-  const res = await CommunicateContent.getContentList(new GetContentListParams().setSelfValues({
-    mainBodyColumnId: 296
-  }), page, pageSize);
+  const res = await CharacterContentApi.getContentList(new GetContentListParams(), page, pageSize);
 
   return { 
     page: page,
     total: res.total,
     data: res.list.map((item, index) => {
+      console.log(item);
+      
       return {
         id: item.id,
         title: item.title,
         desc: item.desc,
         image: item.image,
-        addItems: [
-        ],
+        keywords: item.keywords,
       };
     }),
   }

src/views/introduction/custom.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- 文化概况 - 民间习俗 -->
+   <CommonListPage
+    :title="'民间习俗'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :tagsData="tagsData"
+    :pageSize="8"
+    :defaultSelectTag="245"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GetContentListParams } from '@/api/CommonContent';
+import CustomContent from '@/api/introduction/CustomContent';
+
+async function loadDetail(id: number, item: any) {
+  return await CustomContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await CustomContent.getContentList(new GetContentListParams().setSelfValues({
+    mainBodyColumnId: selectedTag,
+    keywords: searchText,
+  }), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+
+//子分类
+const tagsData = ref([
+  { id: 245, name: '全部' },
+  { id: 246, name: '婚丧嫁娶' },
+  { id: 247, name: '民俗节庆' },
+  { id: 248, name: '信仰' },
+]);
+</script>
+
+<style>
+</style>
+

src/views/introduction/feature.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- 文化概况 - 艺术特色 -->
+   <CommonListPage
+    :title="'艺术特色'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :tagsData="tagsData"
+    :pageSize="8"
+    :defaultSelectTag="243"
+    :loadDetail="loadDetail"
+    :load="loadData"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GetContentListParams } from '@/api/CommonContent';
+import FeatureContentApi from '@/api/introduction/FeatureContent';
+
+async function loadDetail(id: number, item: any) {
+  return await FeatureContentApi.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await FeatureContentApi.getContentList(new GetContentListParams().setSelfValues({
+    mainBodyColumnId: selectedTag,
+    keywords: searchText,
+  }), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+
+//子分类
+const tagsData = ref([
+  { id: 243, name: '全部' },
+  { id: 238, name: '音乐' },
+  { id: 239, name: '舞蹈' },
+  { id: 240, name: '戏曲' },
+  { id: 241, name: '曲艺' },
+  { id: 242, name: '民间工艺' },
+]);
+</script>
+
+<style>
+</style>
+

src/views/introduction/history.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- 文化概况 - 历史和地理背景 -->
+   <CommonListPage
+    :title="'历史和地理背景'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :tagsData="tagsData"
+    :pageSize="8"
+    :defaultSelectTag="233"
+    :loadDetail="loadDetail"
+    :load="loadData"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GetContentListParams } from '@/api/CommonContent';
+import HistoryContent from '@/api/introduction/HistoryContent';
+
+async function loadDetail(id: number, item: any) {
+  return await HistoryContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await HistoryContent.getContentList(new GetContentListParams().setSelfValues({
+    mainBodyColumnId: selectedTag,
+    keywords: searchText,
+  }), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+
+//子分类
+const tagsData = ref([
+  { id: 233, name: '历史和地理背景' },
+  { id: 250, name: '历史沿革' },
+  { id: 251, name: '地理条件' },
+]);
+</script>
+
+<style>
+</style>
+
+

src/views/introduction/language.vue

@@ -0,0 +1,60 @@
+<template>
+  <!-- 文化概况 - 语言文化 -->
+  <CommonListPage
+    :title="'语言文化'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :tagsData="tagsData"
+    :pageSize="8"
+    :defaultSelectTag="235"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GetContentListParams } from '@/api/CommonContent';
+import LanguageContent from '@/api/introduction/LanguageContent';
+
+async function loadDetail(id: number, item: any) {
+  return await LanguageContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await LanguageContent.getContentList(new GetContentListParams().setSelfValues({
+    mainBodyColumnId: selectedTag,
+    keywords: searchText,
+  }), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+
+//子分类
+const tagsData = ref([
+  { id: 235, name: '全部' },
+  { id: 237, name: '方言历史' },
+]);
+</script>
+
+<style>
+</style>
+

src/views/introduction/policy.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- 文化概况 - 相关政策 -->
+   <CommonListPage
+    :title="'相关政策'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :pageSize="8"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '@/api/CommonContent';
+import PolicyContent from '@/api/introduction/PolicyContent';
+
+async function loadDetail(id: number, item: any) {
+  return await PolicyContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await PolicyContent.getContentList(new GetContentListParams(), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+
+

src/views/introduction/sea.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 文化概况 - 海洋文化 -->
+   <CommonListPage
+    :title="'海洋文化'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :pageSize="8"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '@/api/CommonContent';
+import SeaContent from '@/api/introduction/SeaContent';
+
+async function loadDetail(id: number, item: any) {
+  return await SeaContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await SeaContent.getContentList(new GetContentListParams(), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+

src/views/introduction/victuals.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 文化概况 - 饮食文化 -->
+   <CommonListPage
+    :title="'饮食文化'"
+    :prevPage="{ title: '文化概况' }"
+    :dropDownNames="[]"
+    :pageSize="8"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '@/api/CommonContent';
+import VictualsContent from '@/api/introduction/VictualsContent';
+
+async function loadDetail(id: number, item: any) {
+  return await VictualsContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await VictualsContent.getContentList(new GetContentListParams(), page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+

src/views/research/discuss.vue

@@ -1,7 +1,8 @@
 <template>
-  <!-- 传播交流 - 理论研讨 -->
+  <!-- 理论研究 - 理论研讨 -->
    <CommonListPage
     :title="'理论研讨'"
+    :prevPage="{ title: '理论研究' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/research/expert.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 专家学者 -->
    <CommonListPage
     :title="'专家学者'"
+    :prevPage="{ title: '理论研究' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/research/projects.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 研究项目 -->
    <CommonListPage
     :title="'研究项目'"
+    :prevPage="{ title: '理论研究' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/research/result.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 研究成果 -->
    <CommonListPage
     :title="'研究成果'"
+    :prevPage="{ title: '理论研究' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/research/teams.vue

@@ -2,6 +2,7 @@
   <!-- 传播交流 - 研究团队 -->
    <CommonListPage
     :title="'研究团队'"
+    :prevPage="{ title: '理论研究' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"