feat: 更新topicListParams接口，添加分页和用户ID参数，新增Mappop组件以支持图片和视频展示

package.json

@@ -37,6 +37,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@iceywu/utils": "^0.0.46",
     "@mapbox/mapbox-gl-language": "^1.0.1",
+    "@tweenjs/tween.js": "^25.0.0",
     "blurhash": "^2.0.5",
     "compressorjs": "^1.2.1",
     "dayjs": "^1.11.13",
@@ -49,7 +50,9 @@
     "spark-md5": "^3.0.2",
     "swiper": "^11.1.14",
     "upng-js": "^2.1.0",
+    "v-viewer": "^3.0.21",
     "v3-infinite-loading": "^1.3.2",
+    "viewerjs": "^1.11.6",
     "vite-plugin-use-modules": "^1.4.8",
     "vue-cropper": "^1.1.1",
     "vue-hooks-pure": "^0.0.2",

src/api/topic.ts

@@ -4,6 +4,10 @@ import { http } from '~/utils/http'
 // 继承listParams，并添加自定义参数
 export interface topicListParams extends listParams {
   tagId?: number
+	page?: number
+	size?: number
+	userId?: number
+	exif?: boolean
 }
 
 export function topicFindAll(params?: topicListParams) {

src/components/Mappop.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { api as viewerApi } from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+
+const props = defineProps<{
+  data: object
+  isSingle: boolean
+}>()
+
+const emit = defineEmits(['closePop'])
+const fileList = computed(() => {
+  if (props.isSingle) {
+    return [props.data]
+  }
+  else {
+    return props.data?.files || []
+  }
+})
+function getCover(data: any) {
+  const { fileType, file, cover } = data || {}
+  if (fileType === 'IMAGE') {
+    let preSrc = `${file}?x-oss-process=image/resize,l_100`
+    // const preSrc = `${file}`;
+    const fileSuffix = file.substring(file.lastIndexOf('.'))
+    if (fileSuffix.toUpperCase() === '.HEIC') {
+      preSrc = `${file}?x-oss-process=image/resize,l_100/format,jpg`
+    }
+    return preSrc
+  }
+  else if (fileType === 'VIDEO') {
+    const srcT
+      = cover
+      || `${file}?x-oss-process=video/snapshot,t_7000,f_jpg,w_0,h_0,m_fast`
+    return srcT
+  }
+}
+function handleClosePop() {
+  emit('closePop')
+}
+function showImgs(index: number) {
+  // eslint-disable-next-line array-callback-return
+  const images = fileList.value.map((item: any) => {
+    const { fileType, file, cover } = item || {}
+    if (fileType === 'IMAGE') {
+      const fileSuffix = file.substring(file.lastIndexOf('.'))
+      if (fileSuffix.toUpperCase() === '.HEIC') {
+        return `${file}?x-oss-process=image/format,jpg`
+      }
+      return file
+    }
+    else if (fileType === 'VIDEO') {
+      const srcT
+        = cover
+        || `${file}?x-oss-process=video/snapshot,t_7000,f_jpg,w_0,h_0,m_fast`
+      return srcT
+    }
+  })
+  viewerApi({
+    images,
+    options: {
+      initialViewIndex: index,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="rounded-md bg p-5 w-fit shadow-lg">
+    <!-- 头部 -->
+    <header class="header-part relative">
+      <h3 class="header-title">
+        {{ data?.title }}
+      </h3>
+      <span class="header-subTitle">{{ data?.content }}</span>
+      <button
+        class="close i-carbon-close-large absolute right-0 top-0 text-xl"
+        @click="handleClosePop"
+      />
+    </header>
+    <!-- 内容 -->
+    <div class="img-list">
+      <div
+        v-for="(item, index) in fileList"
+        :key="item.id"
+        class="img-item"
+        @click="showImgs(index)"
+      >
+        <img
+          :src="getCover(item)"
+          class="w-full h-full object-cover cursor-pointer"
+          alt=""
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.mapboxgl-popup {
+  z-index: 9999;
+}
+.mapboxgl-popup-tip {
+  display: none;
+}
+.mapboxgl-popup-content {
+  padding: 0;
+  background: transparent;
+}
+.header-part {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 75px;
+  padding-bottom: 10px;
+}
+.header-title {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--vibrant-color);
+  margin-bottom: 0.1em;
+  font-weight: 700;
+}
+.img-list {
+  width: fit-content;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-gap: 10px;
+  /* background: red; */
+}
+.img-item {
+  height: 100px;
+  width: 100px;
+}
+</style>