feat: --

packages/base/src/constants.js

@@ -202,44 +202,273 @@ export const STORY_LIST = [
 // 三维文物
 export const ANTIQUE_THREE = [
   {
-    value: 0,
-    text: "类别1",
+    label: "全部",
     children: [
       {
-        text: "一级解放",
-        // 封面
-        thumb: "/base/images/xxx",
-        // 模型链接
-        link: "https://xxxx",
-        desc: "1955 年 9 月，韩练成被授予中将军衔、一级解放勋章。授衔 前，周恩来曾经征求他的意见。",
+        label: "军衔（55式）",
+        thumb: "/base/images/01-军衔（55式）-1.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy01-1",
+        desc: "中华人民共和国韩练成将军55式军服军衔",
+      },
+      {
+        label: "军衔（55式）",
+        thumb: "/base/images/01-军衔（55式）-2.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy01-2",
+        desc: "中华人民共和国韩练成将军55式军服军衔",
+      },
+      {
+        label: "军衔（斜角）",
+        thumb: "/base/images/02-军衔（斜角）-1.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy02-1",
+        desc: "中华人民共和国韩练成将军军衔",
+      },
+      {
+        label: "军衔（斜角）",
+        thumb: "/base/images/02-军衔（斜角）-2.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy02-2",
+        desc: "中华人民共和国韩练成将军军衔",
+      },
+      {
+        label: "“五一式”指南针",
+        thumb: "/base/images/03-“五一式”指南针.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy03",
+        desc: "中华人民共和国韩练成将军“五一式”指南针",
+      },
+      {
+        label: "军帽",
+        thumb: "/base/images/04-军帽.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy04",
+        desc: "中华人民共和国韩练成将军军帽",
+      },
+      {
+        label: "绿军大衣（60年代）",
+        thumb: "/base/images/05-绿军大衣（60年代）.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy05",
+        desc: "中华人民共和国韩练成将军绿军大衣",
+      },
+      {
+        label: "黑呢大衣（40年代）",
+        thumb: "/base/images/06-黑呢大衣（40年代）.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy06",
+        desc: "中华人民共和国韩练成将军黑呢大衣",
+      },
+      {
+        label: "皮鞋（50年代）",
+        thumb: "/base/images/07-皮鞋（50年代）-右.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy07",
+        desc: "中华人民共和国韩练成将军皮鞋",
+      },
+      {
+        label: "皮鞋",
+        thumb: "/base/images/08-皮鞋.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy08",
+        desc: "中华人民共和国韩练成将军皮鞋",
+      },
+      {
+        label: "皮靴",
+        thumb: "/base/images/09-皮靴.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy09",
+        desc: "中华人民共和国韩练成将军皮靴",
+      },
+      {
+        label: "皮包",
+        thumb: "/base/images/10-皮包.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy10",
+        desc: "中华人民共和国韩练成将军皮包",
+      },
+      {
+        label: "一级解放勋章（复制）",
+        thumb: "/base/images/11-一级解放勋章（复制）.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy11",
+        desc: "中华人民共和国韩练成将军一级解放勋章",
+      },
+      {
+        label: "军事绘图模板",
+        thumb: "/base/images/12-军事绘图模板.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy12",
+        desc: "中华人民共和国韩练成将军军事绘图模板",
+      },
+      {
+        label: "傅作义赠单兴忠烈士挽幛",
+        thumb: "/base/images/13-傅作义赠单兴忠烈士挽幛.jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy13",
+        desc: "傅作义赠单兴忠烈士挽幛",
+      },
+      {
+        label: "单兴忠烈士挽联",
+        thumb: "/base/images/14-单兴忠烈士挽联jpg",
+        link: "https://4dscene.4dage.com/culturalrelics/NXGYBWG/Model.html?m=gy14",
+        desc: "单兴忠烈士挽联",
       },
     ],
   },
-  {
-    value: 1,
-    text: "类别2",
-    children: [],
-  },
 ];
 
 // 二维文物
 export const ANTIQUE_TWO = [
   {
-    value: 0,
-    text: "类别3",
+    label: "全部",
     children: [
       {
-        text: "一级解放勋章",
-        thumb: "/base/images/xxx",
-        // 图片列表
+        label: "《对韩练成同志的甄别结论》",
+        thumb: "/base/images/《对韩练成同志的甄别结论》-1.jpg",
+        imgs: ["/base/images/《对韩练成同志的甄别结论》.JPG"],
+        desc: "《对韩练成同志的甄别结论》",
+      },
+      {
+        label:
+          "1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀",
+        thumb:
+          "/base/images/1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀-1.jpg",
         imgs: ["/base/images/xxx"],
-        desc: "1955 年 9 月，韩练成被授予中将军衔、一级解放勋章。授衔 前，周恩来曾经征求他的意见。",
+        desc: "1945年9月，侵华日本海军海南警备府司令伍贺启次郎中将在受降仪式中上缴的指挥刀.jpg",
+      },
+      {
+        label: "1949年12月2日人民政府任命通知书",
+        thumb: "/base/images/1949年12月2日人民政府任命通知书-1.jpg",
+        imgs: ["/base/images/1949年12月2日人民政府任命通知书.jpg"],
+        desc: "1949年12月2日人民政府任命通知书",
+      },
+      {
+        label: "1953年1月14日中央人民政府任命通知书",
+        thumb: "/base/images/1953年1月14日中央人民政府任命通知书-1.jpg",
+        imgs: ["/base/images/1953年1月14日中央人民政府任命通知书.jpg"],
+        desc: "1953年1月14日中央人民政府任命通知书",
+      },
+      {
+        label: "1954年9月29日中华人民共和国任命通知书（第140号）",
+        thumb:
+          "/base/images/1954年9月29日中华人民共和国任命通知书（第140号）-1.jpg",
+        imgs: [
+          "/base/images/1954年9月29日中华人民共和国任命通知书（第140号）.jpg",
+        ],
+        desc: "1954年9月29日中华人民共和国任命通知书（第140号）",
+      },
+      {
+        label: "1959年4月28日中华人民共和国任命书（第169号）",
+        thumb:
+          "/base/images/1959年4月28日中华人民共和国任命书（第169号）-1.jpg",
+        imgs: ["/base/images/1959年4月28日中华人民共和国任命书（第169号）.jpg"],
+        desc: "1959年4月28日中华人民共和国任命书（第169号）",
+      },
+      {
+        label: "方唯若致韩练成信",
+        thumb: "/base/images/方唯若致韩练成信-1.jpg",
+        imgs: ["/base/images/方唯若致韩练成信.jpg"],
+        desc: "方唯若致韩练成信",
+      },
+      {
+        label: "韩练成生平与《将军的抉择》",
+        thumb: "/base/images/韩练成生平与《将军的抉择》.jpg",
+        imgs: ["/base/images/韩练成生平与《将军的抉择》-1.jpg"],
+        desc: "韩练成生平与《将军的抉择》",
+      },
+      {
+        label: "韩天佑致韩练成信",
+        thumb: "/base/images/韩天佑致韩练成信-1.jpg",
+        imgs: ["/base/images/韩天佑致韩练成信.jpg"],
+        desc: "韩天佑致韩练成信",
+      },
+      {
+        label: "特需供应证",
+        thumb: "/base/images/特需供应证-1.jpg",
+        imgs: ["/base/images/特需供应证.jpg"],
+        desc: "特需供应证",
+      },
+      {
+        label: "杨采衡致韩练成信",
+        thumb: "/base/images/杨采衡致韩练成信-1.jpg",
+        imgs: ["/base/images/杨采衡致韩练成信.jpg"],
+        desc: "杨采衡致韩练成信",
+      },
+      {
+        label: "中华人民共和国第三届全国人民代表大会代表当选证书",
+        thumb:
+          "/base/images/中华人民共和国第三届全国人民代表大会代表当选证书-1.jpg",
+        imgs: [
+          "/base/images/中华人民共和国第三届全国人民代表大会代表当选证书.jpg",
+        ],
+        desc: "中华人民共和国第三届全国人民代表大会代表当选证书",
+      },
+      {
+        label: "中华人民共和国第一届全国人民代表大会代表当选证书1",
+        thumb:
+          "/base/images/中华人民共和国第一届全国人民代表大会代表当选证书1-1.jpg",
+        imgs: [
+          "/base/images/中华人民共和国第一届全国人民代表大会代表当选证书1.jpg",
+        ],
+        desc: "中华人民共和国第一届全国人民代表大会代表当选证书1",
+      },
+      {
+        label: "中华人民共和国第一届全国人民代表大会代表当选证书2",
+        thumb:
+          "/base/images/中华人民共和国第一届全国人民代表大会代表当选证书2-1.jpg",
+        imgs: [
+          "/base/images/中华人民共和国第一届全国人民代表大会代表当选证书2.jpg",
+        ],
+        desc: "中华人民共和国第一届全国人民代表大会代表当选证书2",
       },
     ],
   },
+];
+
+export const AUDIOS = [
+  {
+    label: "这是一段音频",
+    content:
+      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
+    thumb: "/base/xxxxx",
+    src: "/base/audios/xxxx",
+  },
+  {
+    label: "这是一段音频",
+    content:
+      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
+    thumb: "/base/xxxxx",
+    src: "/base/audios/xxxx",
+  },
+  {
+    label: "这是一段音频",
+    content:
+      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
+    thumb: "/base/xxxxx",
+    src: "/base/audios/xxxx",
+  },
+];
+
+export const VIDEOS = [
+  {
+    label: "隐形将军韩练成",
+    content: "隐形将军韩练成",
+    thumb: "/base/videos",
+    src: "/base/videos/隐形将军韩练成.mp4",
+  },
+  {
+    label: "《身边的红色印记》 单家集",
+    content: "《身边的红色印记》 单家集",
+    thumb: "/base/videos",
+    src: "/base/videos/《身边的红色印记》 单家集.mp4",
+  },
+  {
+    label: "《身边的红色印记》 六盘山",
+    content: "《身边的红色印记》 六盘山",
+    thumb: "/base/videos",
+    src: "/base/videos/《身边的红色印记》 六盘山.mp4",
+  },
+];
+
+export const IMAGES = [
+  {
+    label: "这是一张图片",
+    thumb: "/base/xxxxx",
+    imgs: ["/base/Images/xxxx"],
+  },
+];
+
+export const DOCS = [
   {
-    value: 1,
-    text: "类别2",
-    children: [],
+    label: "这是一个文献",
+    thumb: "/base/xxxxx",
+    src: "/base/docs/xxxx",
   },
 ];

packages/base/src/index.js

@@ -2,3 +2,5 @@ export * from "./utils";
 export * from "./usePreloader";
 export * from "./constants";
 export { default as Apng } from "./apng";
+
+export const STATIC_URL = "https://houseoss.4dkankan.com/project/guyuan";

packages/mobile/src/components/DetailPopup.vue

@@ -4,33 +4,35 @@
     :close-on-click-overlay="false"
     class="detail-popup"
   >
-    <h3>一级解放勋章</h3>
+    <h3>{{ item?.label }}</h3>
 
-    <Swiper
-      :modules="[Navigation]"
-      class="detail-popup-swiper"
-      :slides-per-view="1"
-      :centered-slides="true"
-      :navigation="true"
-    >
-      <SwiperSlide>
-        <van-image
-          src="https://houseoss.4dkankan.com/project/guyuan/pc/assets/c1-min-Cebn0ppc.png"
-          fit="scale-down"
-        />
-      </SwiperSlide>
-      <SwiperSlide>
-        <van-image
-          src="https://houseoss.4dkankan.com/project/guyuan/pc/assets/c1-min-Cebn0ppc.png"
-          fit="scale-down"
-        />
-      </SwiperSlide>
-    </Swiper>
+    <template v-if="item">
+      <iframe v-if="item.link" :src="item.link" />
+
+      <Swiper
+        v-else
+        :modules="[Navigation]"
+        class="detail-popup-swiper"
+        :slides-per-view="1"
+        :centered-slides="true"
+        :navigation="true"
+      >
+        <SwiperSlide v-for="(i, idx) in item.imgs" :key="i">
+          <van-image
+            :src="STATIC_URL + i"
+            fit="scale-down"
+            lazy
+            preview-teleported
+            :preview-src-list="item.imgs.map((img) => STATIC_URL + img)"
+            :initial-index="idx"
+          />
+        </SwiperSlide>
+      </Swiper>
+    </template>
 
     <div class="detail-popup-info">
       <p>
-        1955 年 9 月，韩练成被授予中将军衔、一级解放勋章。授衔
-        前，周恩来曾经征求他的意见。
+        {{ item?.desc }}
       </p>
     </div>
 
@@ -44,12 +46,13 @@
 
 <script setup>
 import { computed } from "vue";
+import { STATIC_URL } from "@guyuan/base";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 
-const props = defineProps(["visible"]);
+const props = defineProps(["visible", "item"]);
 const emits = defineEmits(["update:visible"]);
 
 const show = computed({
@@ -71,6 +74,7 @@ const show = computed({
   flex-direction: column;
   align-items: center;
   padding: utils.vh-calc(50) 0 utils.vh-calc(40);
+  width: 100%;
   height: 100%;
 
   h3 {
@@ -78,6 +82,11 @@ const show = computed({
     font-weight: bold;
     color: #fcd97e;
   }
+  iframe {
+    width: 100%;
+    height: utils.vh-calc(988);
+    border: none;
+  }
   &-swiper {
     --swiper-navigation-sides-offset: -12px;
 

packages/mobile/src/components/VideoPopup.vue

@@ -4,7 +4,7 @@
     :close-on-click-overlay="false"
     class="video-popup"
   >
-    <video controls autoplay :src="src" />
+    <video controls autoplay :src="STATIC_URL + src" />
 
     <img
       class="video-popup__close"
@@ -16,6 +16,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { STATIC_URL } from "@guyuan/base";
 
 const props = defineProps(["visible", "src"]);
 const emits = defineEmits(["update:visible"]);

packages/mobile/src/views/Antique/index.scss

@@ -1,7 +1,7 @@
 .antique {
   position: absolute;
   inset: 0;
-  overflow-y: auto;
+  overflow: hidden;
   background: url("@/assets/images/bg-min.jpg") no-repeat center / cover;
 
   &-back {
@@ -97,6 +97,7 @@
     padding: 0 10px 40px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(auto-fill, 332px);
     column-gap: 30px;
     row-gap: 32px;
     overflow-y: auto;

packages/mobile/src/views/Antique/index.vue

@@ -13,26 +13,33 @@
         <van-dropdown-menu class="antique-class">
           <van-dropdown-item
             v-model="curCategory"
-            :options="TABS[activeTab].list"
+            :options="TABS[activeTab].category"
           />
         </van-dropdown-menu>
 
         <div class="antique-search">
-          <input placeholder="请输入文物名称" />
+          <input v-model="searchKeyword" placeholder="请输入文物名称" />
           <i class="icon" />
         </div>
       </div>
     </div>
 
     <ul class="antique-wrap">
-      <li v-for="item in 10" :key="item" @click="detailVisible = true">
-        <van-image src="" />
-        <p class="limit-line">一级解放勋章</p>
+      <li
+        v-for="item in filteredItems"
+        :key="item.label"
+        @click="
+          activeItem = item;
+          detailVisible = true;
+        "
+      >
+        <van-image :src="STATIC_URL + item.thumb" lazy-load />
+        <p class="limit-line">{{ item.label }}</p>
       </li>
     </ul>
   </div>
 
-  <DetailPopup v-model:visible="detailVisible" />
+  <DetailPopup v-model:visible="detailVisible" :item="activeItem" />
 </template>
 
 <script setup>
@@ -40,8 +47,8 @@ import Tab1Icon from "./images/tab1-min.png";
 import Tab1ActIcon from "./images/tab1-ac-min.png";
 import Tab2Icon from "./images/tab2-min.png";
 import Tab2ActIcon from "./images/tab2-ac-min.png";
-import { ref } from "vue";
-import { ANTIQUE_THREE, ANTIQUE_TWO } from "@guyuan/base";
+import { ref, computed } from "vue";
+import { ANTIQUE_THREE, ANTIQUE_TWO, STATIC_URL } from "@guyuan/base";
 import DetailPopup from "@/components/DetailPopup.vue";
 
 const TABS = [
@@ -50,18 +57,40 @@ const TABS = [
     img: Tab1Icon,
     img2: Tab1ActIcon,
     list: ANTIQUE_THREE,
+    category: ANTIQUE_THREE.map((i, idx) => ({ text: i.label, value: idx })),
   },
   {
     id: 1,
     img: Tab2Icon,
     img2: Tab2ActIcon,
     list: ANTIQUE_TWO,
+    category: ANTIQUE_TWO.map((i, idx) => ({ text: i.label, value: idx })),
   },
 ];
 
 const activeTab = ref(0);
 const detailVisible = ref(false);
 const curCategory = ref(0);
+const searchKeyword = ref("");
+
+const filteredItems = computed(() => {
+  const currentTab = TABS[activeTab.value].list[0];
+
+  if (!currentTab || !currentTab.children) {
+    return [];
+  }
+
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  if (!keyword) {
+    return currentTab.children;
+  }
+
+  return currentTab.children.filter((item) => {
+    const label = (item.label || "").toLowerCase();
+    const desc = (item.desc || "").toLowerCase();
+    return label.includes(keyword) || desc.includes(keyword);
+  });
+});
 </script>
 
 <style lang="scss" scoped>

packages/mobile/src/views/History/index.vue

@@ -18,9 +18,16 @@
     <div class="history-wrap">
       <panel v-if="activeTab === 1" title="视频">
         <ul class="video">
-          <li v-for="item in 10" :key="item" @click="videoVisible = true">
-            <van-image src="" />
-            <p class="limit-line">一级解放勋章</p>
+          <li
+            v-for="item in VIDEOS"
+            :key="item.label"
+            @click="
+              activeVideo = item;
+              videoVisible = true;
+            "
+          >
+            <van-image :src="STATIC_URL + item.thumb" />
+            <p class="limit-line">{{ item.label }}</p>
           </li>
         </ul>
       </panel>
@@ -37,14 +44,12 @@
   </div>
 
   <DetailPopup v-model:visible="detailVisible" />
-  <VideoPopup
-    v-model:visible="videoVisible"
-    src="https://houseoss.4dkankan.com/project/guyuan/base/videos/video1.mp4"
-  />
+  <VideoPopup v-model:visible="videoVisible" :src="activeVideo?.src" />
 </template>
 
 <script setup>
 import { ref } from "vue";
+import { VIDEOS, STATIC_URL } from "@guyuan/base";
 import DetailPopup from "@/components/DetailPopup.vue";
 import VideoPopup from "@/components/VideoPopup.vue";
 import Panel from "./components/Panel.vue";
@@ -83,6 +88,7 @@ const TABS = [
 const activeTab = ref(0);
 const detailVisible = ref(false);
 const videoVisible = ref(false);
+const activeVideo = ref(null);
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/components/VideoPopup.vue

@@ -6,12 +6,13 @@
     destroy-on-close
     append-to-body
   >
-    <video controls autoplay :src="src" />
+    <video v-if="src" controls autoplay :src="STATIC_URL + src" />
   </el-dialog>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { STATIC_URL } from "@guyuan/base";
 
 const props = defineProps(["visible", "title", "src"]);
 const emits = defineEmits(["update:visible"]);

packages/pc/src/views/Antique/components/Popup.vue

@@ -9,47 +9,46 @@
   >
     <i class="antique-popup__close" @click="show = false" />
 
-    <div class="antique-popup-wrap">
+    <div v-if="item" class="antique-popup-wrap">
+      <iframe v-if="item.link" :src="item.link" />
+
       <Swiper
+        v-else
         :modules="[Navigation]"
         class="antique-popup-swiper"
         :slides-per-view="1"
         :centered-slides="true"
         :navigation="true"
       >
-        <SwiperSlide>
+        <SwiperSlide v-for="(i, idx) in item.imgs" :key="i">
           <el-image
-            src="https://houseoss.4dkankan.com/project/guyuan/pc/assets/c1-min-Cebn0ppc.png"
-            fit="scale-down"
-          />
-        </SwiperSlide>
-        <SwiperSlide>
-          <el-image
-            src="https://houseoss.4dkankan.com/project/guyuan/pc/assets/c1-min-Cebn0ppc.png"
+            :src="STATIC_URL + i"
             fit="scale-down"
+            lazy
+            preview-teleported
+            :preview-src-list="item.imgs.map((img) => STATIC_URL + img)"
+            :initial-index="idx"
           />
         </SwiperSlide>
       </Swiper>
     </div>
 
     <div class="antique-popup-info">
-      <h2>一级解放勋章</h2>
-      <p>
-        1955 年 9 月，韩练成被授予中将军衔、一级解放勋章。授衔
-        前，周恩来曾经征求他的意见。
-      </p>
+      <h2>{{ item?.label }}</h2>
+      <p>{{ item?.desc }}</p>
     </div>
   </el-dialog>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { STATIC_URL } from "@guyuan/base";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 
-const props = defineProps(["visible"]);
+const props = defineProps(["visible", "item"]);
 const emits = defineEmits(["update:visible"]);
 
 const show = computed({
@@ -90,6 +89,12 @@ const show = computed({
   &-wrap {
     flex: 1;
     width: 0;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
   }
   &-swiper {
     height: 100%;

packages/pc/src/views/Antique/index.scss

@@ -159,6 +159,10 @@
       font-size: utils.vw-calc(16);
       color: #d6d6d6;
     }
+    .el-image {
+      border-radius: utils.vw-calc(16);
+      padding: utils.vw-calc(2) utils.vw-calc(6) utils.vw-calc(50);
+    }
     &-hover {
       position: absolute;
       inset: utils.vw-calc(-8);

packages/pc/src/views/Antique/index.vue

@@ -25,17 +25,19 @@
         </ul>
 
         <div class="antique-search">
-          <input placeholder="请输入文物名称" />
+          <input v-model="searchKeyword" placeholder="请输入文物名称" />
         </div>
       </div>
 
       <ul class="antique-list">
         <li
-          v-for="(item, index) in tabs[tab2Index].children"
+          v-for="(item, index) in filteredItems"
           :key="index"
           class="antique-item"
+          @click="handleDetail(item)"
         >
           <p class="limit-line">{{ item.label }}</p>
+          <ElImage fit="cover" :src="STATIC_URL + item.thumb" lazy />
 
           <div class="antique-item-hover">
             <el-scrollbar scroll-y>
@@ -47,27 +49,50 @@
     </div>
   </div>
 
-  <Popup v-model:visible="popupVisible" />
+  <Popup v-model:visible="popupVisible" :item="active" />
 </template>
 
 <script setup>
 import { ref, computed } from "vue";
+import { STATIC_URL } from "@guyuan/base";
 import { ANTIQUE_THREE, ANTIQUE_TWO } from "@guyuan/base";
 import Popup from "./components/Popup.vue";
 
 const tabIndex = ref(0);
 const tab2Index = ref(0);
-const popupVisible = ref(true);
+const popupVisible = ref(false);
+const active = ref(null);
+const searchKeyword = ref("");
+
 const tabs = computed(() => {
   const list = [...(tabIndex.value === 0 ? ANTIQUE_THREE : ANTIQUE_TWO)];
 
-  list.unshift({
-    label: "全部类别",
-    children: list.flatMap((item) => item.children),
-  });
-
   return list;
 });
+
+// 过滤后的文物列表
+const filteredItems = computed(() => {
+  const currentTab = tabs.value[tab2Index.value];
+  if (!currentTab || !currentTab.children) {
+    return [];
+  }
+
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  if (!keyword) {
+    return currentTab.children;
+  }
+
+  return currentTab.children.filter((item) => {
+    const label = (item.label || "").toLowerCase();
+    const desc = (item.desc || "").toLowerCase();
+    return label.includes(keyword) || desc.includes(keyword);
+  });
+});
+
+const handleDetail = (item) => {
+  active.value = item;
+  popupVisible.value = true;
+};
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/views/History/components/Audio.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import Panel from "./Panel.vue";
-import { AUDIOS } from "../constants";
+import { AUDIOS } from "@guyuan/base";
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/views/History/components/Doc.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import Panel from "./Panel.vue";
-import { DOCS } from "../constants";
+import { DOCS } from "@guyuan/base";
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/views/History/components/Image.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import Panel from "./Panel.vue";
-import { VIDEOS } from "../constants";
+import { VIDEOS } from "@guyuan/base";
 </script>
 
 <style lang="scss" scoped>

packages/pc/src/views/History/components/Video.vue

@@ -7,28 +7,27 @@
         class="video-item"
         @click="handleClick(item)"
       >
-        <el-image :src="item.thumb" />
+        <el-image :src="STATIC_URL + item.thumb" />
 
         <p class="limit-line">{{ item.label }}</p>
       </li>
     </ul>
 
-    <VideoPopup
-      v-model:visible="videoVisible"
-      src="https://houseoss.4dkankan.com/project/guyuan/base/videos/video1.mp4"
-    />
+    <VideoPopup v-model:visible="videoVisible" :src="active?.src" />
   </Panel>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import Panel from "./Panel.vue";
-import { VIDEOS } from "../constants";
+import { VIDEOS, STATIC_URL } from "@guyuan/base";
 import VideoPopup from "@/components/VideoPopup.vue";
 
 const videoVisible = ref(false);
+const active = ref(null);
 
 const handleClick = (item) => {
+  active.value = item;
   videoVisible.value = true;
 };
 </script>

packages/pc/src/views/History/constants.js

@@ -1,47 +0,0 @@
-export const AUDIOS = [
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
-  {
-    label: "这是一段音频",
-    content:
-      "这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍这是一段音频介绍",
-    thumb: "/base/xxxxx",
-    src: "/base/audios/xxxx",
-  },
-];
-
-export const VIDEOS = [
-  {
-    label: "这是一段音频",
-    thumb: "/base/xxxxx",
-    src: "/base/videos/xxxx",
-  },
-];
-
-export const IMAGES = [
-  {
-    label: "这是一张图片",
-    thumb: "/base/xxxxx",
-    imgs: ["/base/Images/xxxx"],
-  },
-];
-
-export const DOCS = [
-  {
-    label: "这是一个文献",
-    thumb: "/base/xxxxx",
-    src: "/base/docs/xxxx",
-  },
-];