📦 按要求修改。增加清单页面

src/assets/scss/main.scss

@@ -223,6 +223,15 @@ $small-banner-height: 445px;
         }
       }
     }
+    .tab-button {
+      background-color: $primary-color;
+      color: $text-color-light;
+      padding: 10px 15px;
+      margin-right: 8px;
+      cursor: pointer;
+      user-select: none;
+      outline: none;
+    }
   }
 }
 

src/assets/scss/news.scss

@@ -35,6 +35,27 @@
     gap: 24px;
   }
 
+  .table-list {
+    margin-top: 10px;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      border: 1px solid $border-grey-color;
+
+  
+      td, th {
+        border: 1px solid $border-grey-color;
+        background-color: #fff; /* 表头背景颜色 */
+        padding: 8px; /* 单元格内边距，可根据需要调整 */
+        text-align: center; /* 单元格内容居中对齐 */
+      }
+      th {
+        background-color: #f2f2f2; /* 表头背景颜色 */
+        font-weight: bold; /* 表头文字加粗 */
+      }
+    }
+  }
 
   .item {
     display: flex;

src/components/NavBar.vue

@@ -18,7 +18,7 @@
           <RouterLink to="/">首页</RouterLink>
           <RouterLink to="/about">保护区概况</RouterLink> 
           <RouterLink to="/news">资讯动态</RouterLink>
-          <RouterLink to="/introduction">文化概况</RouterLink>
+          <RouterLink to="/introduction">文化常识</RouterLink>
           <RouterLink to="/inheritor">保护传承</RouterLink>
           <RouterLink to="/communicate">传播交流</RouterLink>
           <RouterLink to="/research">理论研究</RouterLink>
@@ -41,7 +41,7 @@
       <RouterLink to="/">首页</RouterLink>
       <RouterLink to="/about">保护区概况</RouterLink> 
       <RouterLink to="/news">资讯动态</RouterLink>
-      <RouterLink to="/introduction">文化概况</RouterLink>
+      <RouterLink to="/introduction">文化常识</RouterLink>
     </div>
     <div class="group center">
       <div class="headerlogos">

src/components/content/CommonListBlock.vue

@@ -41,6 +41,9 @@
             />
           </template>
         </SimpleInput>
+        <button class="tab-button" v-if="showTableSwitch" @click="tableListShow=!tableListShow">
+          ▼ 清单
+        </button>
       </div>
     </div>
   </div>
@@ -53,7 +56,25 @@
   >
     <!-- 新闻列表 -->
     <SimplePageContentLoader :loader="newsLoader">
-      <div class="list">
+      <div v-if="tableListShow" class="table-list">
+        <table>
+          <thead>
+            <tr>
+              <th>序号</th>
+              <th>{{ tableSwitchOptions.title ?? '标题'}}</th>
+              <th v-for="(t, k) in newsLoader.list.value[0]?.addItems || []" :key="k">{{ t.name }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, k) in newsLoader.list.value" :key="item.id">
+              <td>{{ k + 1 }}</td>
+              <td>{{ item.title }}</td>
+              <td v-for="(t, k) in item.addItems || []" :key="k">{{ t.text }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else class="list">
         <div 
           v-for="(item, k) in newsLoader.list.value"
           :key="item.id"
@@ -66,7 +87,7 @@
           />
           <TitleDescBlock
             :title="item.title"
-            :desc="item.desc || item.title"
+            :desc="item.desc"
           >
             <template #addon>
               <div v-if="item.bottomTags" class="tags">
@@ -133,11 +154,21 @@ export interface DropDownNames {
   defaultSelectedValue: number|string,
 }
 
+const tableListShow = ref(false);
+
 const props = defineProps({	
   title: {
     type: String,
     default: '',
   },
+  showTableSwitch: {
+    type: Boolean,
+    default: false,
+  },
+  tableSwitchOptions: {
+    type: Object,
+    default: () => ({}), 
+  },
   showNav: {
     type: Boolean,
     default: false,
@@ -266,7 +297,7 @@ function handleShowDetail(item: any) {
 }
 
 const newsLoader = useSimplePagerDataLoader(props.pageSize, (page, size) => props.load(
-  page, size, 
+  tableListShow.value ? 1 : page, tableListShow.value ? 100 : size, 
   selectedTag.value, 
   searchText.value,
   dropDownValues.value,
@@ -284,6 +315,9 @@ watch(() => props.dropDownNames, () => {
 watch(selectedTag, () => {
   newsLoader.loadData(undefined, true);
 })
+watch(tableListShow, () => {
+  newsLoader.loadData(undefined, true);
+})
 
 function loadDropValues() {
   dropDownValues.value = [];

src/components/content/CommonListPage.vue

@@ -47,6 +47,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  showTableSwitch: {
+    type: Boolean,
+    default: false, 
+  },
+  tableSwitchOptions: {
+    type: Object,
+    default: () => ({}), 
+  },
   tagsData: {
     type: Object as PropType<{
       id: number,

src/views/InheritorView.vue

@@ -186,11 +186,6 @@ const list1 = [
     image: Image5,
     onClick: () => navTo('/inheritor/seminar'),
   },
-  {
-    title: '',//'非遗管理',
-    desc: '',//'让文化因传承而永存',
-    image: '',//Image6,
-  }
 ]
 const list2 = [
   {

src/views/IntrodView.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 文化概况页 -->
+  <!-- 文化常识页 -->
   <div class="main-background main-background-type0">
     <!-- 轮播 -->
     <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">

src/views/inheritor/inheritor.vue

@@ -8,6 +8,10 @@
     :load="loadData"
     :loadDetail="loadDetail"
     :tagsData="tagsData"
+    showTableSwitch
+    :tableSwitchOptions="{
+      title: '传承人姓名',
+    }"
     :defaultSelectTag="tagsData[0].id"
     detailsPage="/inheritor/intangible-detail"
   />

src/views/inheritor/projects.vue

@@ -8,6 +8,10 @@
     :load="loadData"
     :loadDetail="loadDetail"
     :tagsData="tagsData"
+    showTableSwitch
+    :tableSwitchOptions="{
+      title: '项目名称',
+    }"
     :defaultSelectTag="tagsData[0].id"
     detailsPage="/inheritor/intangible-detail"
   />

src/views/introduction/building.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 建筑文化 -->
+  <!-- 文化常识 - 建筑文化 -->
    <CommonListPage
     :title="'建筑文化'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/introduction/character.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 历史人物 -->
+  <!-- 文化常识 - 历史人物 -->
    <CommonListPage
     :title="'历史人物'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :pageSize="8"
     :rowCount="2"

src/views/introduction/custom.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 民间习俗 -->
+  <!-- 文化常识 - 民间习俗 -->
    <CommonListPage
     :title="'民间习俗'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/introduction/feature.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 艺术特色 -->
+  <!-- 文化常识 - 艺术特色 -->
    <CommonListPage
     :title="'艺术特色'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/introduction/history.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 历史和地理背景 -->
+  <!-- 文化常识 - 历史和地理背景 -->
    <CommonListPage
     :title="'历史和地理背景'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/introduction/language.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 语言文化 -->
+  <!-- 文化常识 - 语言文化 -->
   <CommonListPage
     :title="'语言文化'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :showSearch="true"
     :tagsData="tagsData"

src/views/introduction/policy.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 相关政策 -->
+  <!-- 文化常识 - 相关政策 -->
    <CommonListPage
     :title="'相关政策'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :pageSize="8"
     :rowCount="1"

src/views/introduction/sea.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 海洋文化 -->
+  <!-- 文化常识 - 海洋文化 -->
    <CommonListPage
     :title="'海洋文化'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"

src/views/introduction/victuals.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 文化概况 - 饮食文化 -->
+  <!-- 文化常识 - 饮食文化 -->
    <CommonListPage
     :title="'饮食文化'"
-    :prevPage="{ title: '文化概况' }"
+    :prevPage="{ title: '文化常识' }"
     :dropDownNames="[]"
     :pageSize="8"
     :load="loadData"