refactor: ♻️ 重构VideoPreview视频预览组件

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -885,4 +885,9 @@ $-text-info-color: var(--wot-text-info-color, $-color-info) !default;
 $-text-primary-color: var(--wot-text-primary-color, $-color-theme) !default;
 $-text-error-color: var(--wot-text-error-color, $-color-danger) !default;
 $-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default;
-$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
+$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
+
+/* video-preview */
+$-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
+$-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
+$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小

src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts

@@ -929,6 +929,12 @@ export type textThemeVars = {
   textSuccessColor?: string
 }
 
+export type videoPreviewThemeVars = {
+  videoPreviewBg?: string
+  videoPreviewCloseColor?: string
+  videoPreviewCloseFontSize?: string
+}
+
 export type ConfigProviderThemeVars = baseThemeVars &
   actionSheetThemeVars &
   badgeThemeVars &
@@ -987,4 +993,5 @@ export type ConfigProviderThemeVars = baseThemeVars &
   formItemThemeVars &
   backtopThemeVars &
   indexBarThemeVars &
-  textThemeVars
+  textThemeVars &
+  videoPreviewThemeVars

src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss

@@ -5,14 +5,14 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 101;
+  z-index: 999;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #000;
+  background: $-video-preview-bg;
 
   @include e(video) {
     width: 100%;
@@ -20,9 +20,15 @@
     transition: all 0.3s ease;
   }
 
-  @include edeep(close){
-    margin-top: 64px;
-    padding: 6px;
-    color: $-curtain-content-close-color;
+  @include edeep(close) {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0px;
+    right: 0px;
+    padding: 12px;
+    text-align: center;
+    cursor: pointer;
+    font-size: $-video-preview-close-font-size;
+    color: $-video-preview-close-color;
   }
 }

src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue

@@ -1,18 +1,19 @@
 <template>
-  <view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup">
-    <video
-      class="wd-video-preview__video"
-      v-if="previdewVideo.url"
-      :controls="true"
-      :poster="previdewVideo.poster"
-      :title="previdewVideo.title"
-      play-btn-position="center"
-      :enableNative="true"
-      :src="previdewVideo.url"
-      :enable-progress-gesture="false"
-    ></video>
-
-    <wd-icon name="close-circle" size="48px" :custom-class="`wd-video-preview__close`" @click="close" />
+  <view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+    <view class="wd-video-preview__video" @click.stop="">
+      <video
+        class="wd-video-preview__video"
+        v-if="previdewVideo.url"
+        :controls="true"
+        :poster="previdewVideo.poster"
+        :title="previdewVideo.title"
+        play-btn-position="center"
+        :enableNative="true"
+        :src="previdewVideo.url"
+        :enable-progress-gesture="false"
+      ></video>
+    </view>
+    <wd-icon name="close" :custom-class="`wd-video-preview__close`" @click="close" />
   </view>
 </template>
 
@@ -28,7 +29,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
 defineProps(videoPreviewProps)
 
@@ -44,6 +45,9 @@ function open(video: PreviewVideo) {
 
 function close() {
   showPopup.value = false
+  nextTick(() => {
+    handleClosed()
+  })
 }
 
 function handleClosed() {