🎨 新增界面：热点新鲜事

src/pages.json

@@ -27,6 +27,13 @@
       }
     },
     {
+      "path": "pages/introduction/news",
+      "style": {
+        "navigationBarTitleText": "热点新鲜事",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
       "path": "pages/introduction/character/list",
       "style": {
         "navigationBarTitleText": "历史人物列表",

src/pages/home.vue

@@ -38,7 +38,7 @@
           <HomeButton
             title="热点新鲜事"
             icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconDoc.png"
-            @click="handleGoTab('/pages/discover')"
+            @click="navTo('/pages/introduction/news')"
           />
           <HomeButton
             title="保护与传承"

src/pages/introduction/news.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
+import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
+import NewsIndexContent from '@/api/news/NewsIndexContent';
+import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
+import CommonRoot from '@/components/dialog/CommonRoot';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import SearchBar from '@/components/form/SearchBar.vue';
+import { type PickerItem } from '@/components/form/Picker.vue';
+import PickerField from '@/components/form/PickerField.vue';
+import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
+
+const searchText = ref('');
+const filterDate = ref(['']);
+
+const newsLoader = useSimplePageListLoader(10, async (page, pageSize) => {
+  return await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
+    keywords: searchText.value,
+    publishAt: filterDate.value[0],
+  }), page, pageSize);
+});
+
+const nowYear = new Date().getFullYear();
+const filterDates : PickerItem[] = [
+  { text: '全部', value: 0 },
+  ...(new Array(21).fill(0).map((_, index) => {
+    return { 
+      text: `${nowYear - index}`, 
+      value: nowYear - index 
+    }
+  }))
+];
+
+function loadNews() {
+  newsLoader.loadData(undefined, true);
+}
+function goDetails(item: GetContentListItem, id: number) {
+  uni.navigateTo({
+    url: '/pages/article/details?id=' + id,
+  });
+}
+
+watch(filterDate, () => {
+  loadNews();
+});
+onMounted(() => {
+  loadNews();
+});
+</script>
+
+<template>
+  <CommonRoot>
+    <FlexCol :padding="30" innerClass="bg-base">
+      <FlexRow>
+        <SearchBar
+          v-model="searchText"
+          placeholder="搜索新闻"
+          @search="loadNews"
+        />
+        <FlexRow align="center">
+          <text>选择日期：</text>
+          <PickerField 
+            v-model="filterDate"
+            placeholder="选择日期"
+            :columns="[filterDates]" 
+          />
+        </FlexRow>
+      </FlexRow>
+      <Box2LineImageRightShadow 
+        v-for="(item, i) in newsLoader.list.value"
+        :key="item.id"
+        :class="[
+          'position-relative d-flex flex-grow-1',
+        ]"
+        class="w-100"
+        titleColor="title-text"
+        :image="item.thumbnail || item.image"
+        :title="item.title"
+        :desc="`来源：${item.from}`"
+        :badge="item.badge"
+        :wideImage="true"
+        @click="goDetails(item, item.id)"
+      />
+      <SimplePageListLoader :loader="newsLoader" />
+    </FlexCol>
+  </CommonRoot>
+</template>