合并分支 '3.0' 到 'main'

3.0

查看合并请求 !7

package.json

@@ -135,7 +135,7 @@
         "postcss-html": "^1.5.0",
         "postcss-less": "^6.0.0",
         "prettier": "^2.8.4",
-        "rimraf": "^4.3.1",
+        "rimraf": "^4.4.0",
         "sass": "^1.58.3",
         "sort-package-json": "^2.4.1",
         "stylelint": "^14.16.1",

pnpm-lock.yaml

@@ -63,7 +63,7 @@ specifiers:
   postcss-less: ^6.0.0
   prettier: ^2.8.4
   qs: ~6.9.7
-  rimraf: ^4.3.1
+  rimraf: ^4.4.0
   sass: ^1.58.3
   sort-package-json: ^2.4.1
   stompjs: ^2.3.3
@@ -157,7 +157,7 @@ devDependencies:
   postcss-html: 1.5.0
   postcss-less: 6.0.0_postcss@8.4.21
   prettier: 2.8.4
-  rimraf: 4.3.1
+  rimraf: 4.4.0
   sass: 1.58.3
   sort-package-json: 2.4.1
   stylelint: 14.16.1
@@ -3741,7 +3741,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.5
-      caniuse-lite: 1.0.30001462
+      caniuse-lite: 1.0.30001464
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -3955,8 +3955,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001462
-      electron-to-chromium: 1.4.322
+      caniuse-lite: 1.0.30001464
+      electron-to-chromium: 1.4.325
       node-releases: 2.0.10
       update-browserslist-db: 1.0.10_browserslist@4.21.5
 
@@ -4035,8 +4035,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite/1.0.30001462:
-    resolution: {integrity: sha512-PDd20WuOBPiasZ7KbFnmQRyuLE7cFXW2PVd7dmALzbkUXEP46upAuCDm9eY9vho8fgNMGmbAX92QBZHzcnWIqw==}
+  /caniuse-lite/1.0.30001464:
+    resolution: {integrity: sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==}
 
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -4248,7 +4248,7 @@ packages:
     resolution: {integrity: sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==}
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   /content-disposition/0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
@@ -4437,7 +4437,7 @@ packages:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
   /cookie-signature/1.0.6:
-    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
+    resolution: {integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw=}
     dev: true
 
   /cookie/0.5.0:
@@ -4858,11 +4858,11 @@ packages:
     dev: true
 
   /ee-first/1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
     dev: true
 
-  /electron-to-chromium/1.4.322:
-    resolution: {integrity: sha512-KovjizNC9XB7dno/2GjxX8VS0SlfPpCjtyoKft+bCO+UfD8bFy16hY4Sh9s0h9BDxbRH2U0zX5VBjpM1LTcNlg==}
+  /electron-to-chromium/1.4.325:
+    resolution: {integrity: sha512-K1C03NT4I7BuzsRdCU5RWkgZxtswnKDYM6/eMhkEXqKu4e5T+ck610x3FPzu1y7HVFSiQKZqP16gnJzPpji1TQ==}
 
   /emittery/0.8.1:
     resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
@@ -7367,7 +7367,7 @@ packages:
     dev: true
 
   /media-typer/0.3.0:
-    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    resolution: {integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=}
     engines: {node: '>= 0.6'}
     dev: true
 
@@ -7412,7 +7412,7 @@ packages:
     dev: true
 
   /merge-descriptors/1.0.1:
-    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
+    resolution: {integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=}
     dev: true
 
   /merge-stream/2.0.0:
@@ -7559,7 +7559,7 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
   /mute-stream/0.0.7:
-    resolution: {integrity: sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==}
+    resolution: {integrity: sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=}
     dev: true
 
   /mute-stream/0.0.8:
@@ -8612,8 +8612,8 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rimraf/4.3.1:
-    resolution: {integrity: sha512-GfHJHBzFQra23IxDzIdBqhOWfbtdgS1/dCHrDy+yvhpoJY5TdwdT28oWaHWfRpKFDLd3GZnGTx6Mlt4+anbsxQ==}
+  /rimraf/4.4.0:
+    resolution: {integrity: sha512-X36S+qpCUR0HjXlkDe4NAOhS//aHH0Z+h8Ckf2auGJk3PTnx5rLmrHkwNdbVQuCSUhOyFrlRvFEllZOYE+yZGQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
@@ -9715,7 +9715,7 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
   /utils-merge/1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
     engines: {node: '>= 0.4.0'}
     dev: true
 
@@ -9882,6 +9882,7 @@ packages:
 
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
+    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
     dependencies:
       browser-process-hrtime: 1.0.0
     dev: true
@@ -10124,7 +10125,7 @@ packages:
     dev: false
 
   /xregexp/3.1.0:
-    resolution: {integrity: sha512-4Y1x6DyB8xRoxosooa6PlGWqmmSKatbzhrftZ7Purmm4B8R4qIEJG1A2hZsdz5DhmIqS0msC0I7KEq93GphEVg==}
+    resolution: {integrity: sha1-FNhGHgvdOCJL/uUDmgiY/EL80zY=}
 
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}

src/components/ThumbnailPreview/index.vue

+<script lang="ts" setup>
+    import type { PropType } from 'vue'
+    import { nanoid } from 'nanoid'
+    import { isImage, isVideo, getPoster } from './utils'
+
+    type URLs = { url: string }[]
+    const props = defineProps({
+        width: {
+            type: [String, Number],
+            default: '96',
+        },
+        height: {
+            type: [String, Number],
+            default: '96',
+        },
+        mode: {
+            type: String,
+            default: 'aspectFit',
+        },
+        assets: {
+            type: Array as PropType<Recordable & URLs>,
+        },
+    })
+
+    // 生成预览容器高度
+    const containerHeight = `${props.height}rpx`
+    // 分离图片和视频资源地址
+    const images = computed(() => props.assets.filter((item) => isImage(item.url)))
+    const videos = computed(() => props.assets.filter((item) => isVideo(item.url)))
+
+    // 预览图片
+    const preview = (index: number) => {
+        uni.previewImage({
+            urls: images.value.map((item) => item.url),
+            current: index,
+        })
+    }
+
+    // 初始化视频组件配置
+    const videoId = nanoid()
+    const videoContext = ref()
+    const playVideoSrc = ref()
+    // 播放视频
+    const play = (index: number) => {
+        playVideoSrc.value = videos.value[index].url
+        videoContext.value?.requestFullScreen()
+        videoContext.value?.play()
+    }
+    const videoFullScreenChange = (e: any) => {
+        // 非全屏状态下停止播放
+        if (!e.detail.fullScreen) {
+            videoContext.value?.stop()
+        }
+    }
+
+    onMounted(() => {
+        // 初始化视频组件上下文对象
+        videoContext.value = uni.createVideoContext(videoId)
+    })
+</script>
+
+<template>
+    <view class="preview-wrap">
+        <!-- 视频预览 -->
+        <fui-lazyload
+            class="preview-video"
+            :mode="props.mode"
+            v-for="(item, index) in videos"
+            :key="item.url"
+            :src="getPoster(item.url)"
+            :width="props.width"
+            :height="props.height"
+            :radius="10"
+            @tap="play(index)"
+        >
+            <view class="icon-wrap" :style="{ width: props.width, height: props.height }">
+                <fui-icon class="video-play-icon" name="suspend" size="40" color="#fff" />
+            </view>
+        </fui-lazyload>
+
+        <!-- 图片预览 -->
+        <fui-lazyload
+            class="preview-image"
+            :mode="props.mode"
+            v-for="(item, index) in images"
+            :key="item.url"
+            :src="getPoster(item.url)"
+            :width="props.width"
+            :height="props.height"
+            :radius="10"
+            @tap="preview(index)"
+        />
+
+        <!-- 视频 -->
+        <video
+            :id="videoId"
+            :src="playVideoSrc"
+            class="video"
+            autoplay
+            controls
+            @fullscreenchange="videoFullScreenChange"
+        ></video>
+    </view>
+</template>
+
+<style lang="less" scoped>
+    .preview-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -10rpx;
+
+        .preview-image,
+        .preview-video {
+            margin: 10rpx !important;
+            position: relative;
+
+            :deep(.fui-lazyload__img) {
+                height: v-bind(containerHeight) !important;
+            }
+
+            .icon-wrap {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+                border-radius: 10rpx;
+
+                .video-play-icon {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
+
+        .video {
+            position: absolute;
+            top: -999999px;
+        }
+    }
+</style>

src/components/ThumbnailPreview/utils.ts

+export type FileType = 'image' | 'video' | 'audio'
+
+export function isImage(url: string) {
+    return /\.(png|jpe?g|gif|svg)(\?.*)?$/i.test(url)
+}
+
+export function isVideo(url: string) {
+    return /\.(mp4|m3u8)(\?.*)?$/i.test(url)
+}
+
+export function getPoster(url: string) {
+    if (!isVideo(url)) {
+        return url
+    }
+
+    return url + '.jpg'
+}

src/components/firstui/fui-upload-video/fui-upload-video.vue

@@ -2,8 +2,9 @@
 	<view class="fui-uploadv__wrap">
 		<view class="fui-uploadv__item" :style="{width:width+'rpx',height:height+'rpx'}" v-for="(item,index) in urls"
 			:key="index">
+            <view :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx',background:'#000'}" v-if="!showVideo"></view>
 			<video class="fui-upload__video" :style="{width:width+'rpx',height:height-(isView?0:40)+'rpx'}"
-				:src="getVideoSrc(item)"></video>
+				:src="getVideoSrc(item)" v-if="showVideo"></video>
 			<view class="fui-uploadv__del-wrap" :style="{width:width+'rpx'}" v-if="!isView">
 				<view class="fui-uploadv__flex-row" @tap.stop="reUpload(index)">
 					<fui-icon name="checkbox" color="#fff" :size="32" v-if="progress[index]===100"></fui-icon>
@@ -49,6 +50,11 @@
 				type: [Number, String],
 				default: 320
 			},
+            // 防止原生组件层级问题的视频显示
+            hideVideo: {
+                type: Boolean,
+                default: false
+            },
 			fileList: {
 				type: Array,
 				default () {
@@ -146,6 +152,7 @@
 				//preupload、uploading、success、error
 				status: [],
 				progress: [],
+                showVideo: true,
 			};
 		},
 		created() {
@@ -154,7 +161,16 @@
 		watch: {
 			fileList(vals) {
 				this.initData(vals)
-			}
+			},
+            hideVideo(value) {
+                if (value) {
+                    this.showVideo = false
+                } else {
+                    setTimeout(() => {
+                        this.showVideo = true
+                    }, 300)
+                }
+            }
 		},
 		computed: {
 			showAdd() {

src/pages/index/index.vue

@@ -31,7 +31,7 @@
         // #endif
 
         // #ifndef APP-PLUS
-        Message.toast(`使用 APP 运行点击有惊喜~ ╰(*°▽°*)╯`)
+        Message.toast(`在手机上运行点击有惊喜~ ╰(*°▽°*)╯`)
         // #endif
     }
 

stylelint.config.js

@@ -69,6 +69,7 @@ module.exports = {
         ],
         'selector-type-no-unknown': null,
         'comment-empty-line-before': null,
+        'function-no-unknown': null,
     },
     ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
     overrides: [