@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-video-preview/types.ts

@@ -0,0 +1,66 @@
+/*
+ * @Author: weisheng
+ * @Date: 2026-03-13 17:20:03
+ * @LastEditTime: 2026-04-06 21:50:37
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-video-preview/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../../common/props'
+
+import { makeStringProp, makeNumberProp } from '../../common/props'
+
+export const videoPreviewProps = {
+  ...baseProps,
+  /**
+   * 区分视频预览和组件自身实例
+   */
+  selector: makeStringProp(''),
+  /**
+   * 层级
+   * 类型: number
+   * 默认值: 1000
+   */
+  zIndex: makeNumberProp(1000),
+  /**
+   * 打开时的回调
+   */
+  onOpen: Function as PropType<() => void>,
+  /**
+   * 关闭时的回调
+   */
+  onClose: Function as PropType<() => void>
+}
+
+export type PreviewVideo = {
+  url: string // 视频资源地址
+  poster?: string // 视频封面
+  title?: string // 视频标题
+}
+
+export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
+
+export interface VideoPreviewOptions extends PreviewVideo {
+  show?: boolean
+  zIndex?: number
+  /** 打开时的回调 */
+  onOpen?: () => void
+  /** 关闭时的回调 */
+  onClose?: () => void
+}
+
+export type VideoPreview = {
+  previewVideo: (options: VideoPreviewOptions | PreviewVideo) => void
+  closeVideoPreview: () => void
+}
+
+export type VideoPreviewExpose = {
+  /** 打开预览 */
+  open: (video: PreviewVideo) => void
+  /** 关闭预览 */
+  close: () => void
+}
+
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>

package/components/wd-video-preview/wd-video-preview.vue

@@ -0,0 +1,141 @@
+<template>
+  <wd-overlay
+    :show="state.show"
+    :z-index="options.zIndex"
+    :lock-scroll="true"
+    :custom-class="`wd-video-preview ${customClass}`"
+    :custom-style="customStyle"
+    @click="close"
+    @enter="handleEnter"
+    @after-leave="handleAfterLeave"
+  >
+    <view class="wd-video-preview__video" @click.stop="">
+      <video
+        class="wd-video-preview__video"
+        v-if="state.visible && previewVideo.url"
+        :controls="true"
+        :poster="previewVideo.poster"
+        :title="previewVideo.title"
+        play-btn-position="center"
+        :enableNative="true"
+        :src="previewVideo.url"
+        :enable-progress-gesture="false"
+      ></video>
+    </view>
+    <view class="wd-video-preview__close" @click.stop="close">
+      <wd-icon name="close" custom-class="wd-video-preview__close-icon" />
+    </view>
+  </wd-overlay>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-video-preview',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import { reactive, ref, inject, watch, computed } from 'vue'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewOptions, type VideoPreviewExpose } from './types'
+import { defaultOptions, getVideoPreviewOptionKey } from './index'
+import { isDef, isFunction } from '../../common/util'
+
+const props = defineProps(videoPreviewProps)
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const state = reactive({
+  show: false,
+  visible: false
+})
+
+const previewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+
+// 获取注入的选项
+const videoPreviewOptionKey = getVideoPreviewOptionKey(props.selector)
+const videoPreviewOption = inject(videoPreviewOptionKey, ref<VideoPreviewOptions>(defaultOptions))
+
+const options = computed(() => ({
+  zIndex: isDef(videoPreviewOption.value.zIndex) ? videoPreviewOption.value.zIndex! : props.zIndex,
+  onOpen: videoPreviewOption.value.onOpen || props.onOpen || null,
+  onClose: videoPreviewOption.value.onClose || props.onClose || null
+}))
+
+// 监听选项变化
+watch(
+  () => videoPreviewOption.value,
+  (newVal: VideoPreviewOptions) => {
+    reset(newVal)
+  },
+  { deep: true, immediate: true }
+)
+
+// 监听 show 变化，触发事件
+watch(
+  () => state.show,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      emit('open')
+      if (isFunction(options.value.onOpen)) {
+        options.value.onOpen()
+      }
+    } else if (!newVal && oldVal) {
+      emit('close')
+      if (isFunction(options.value.onClose)) {
+        options.value.onClose()
+      }
+    }
+  }
+)
+
+function reset(option: VideoPreviewOptions) {
+  state.show = isDef(option.show) ? option.show! : false
+  if (state.show) {
+    previewVideo.url = option.url
+    previewVideo.poster = option.poster
+    previewVideo.title = option.title
+  }
+}
+
+function handleEnter() {
+  state.visible = true
+}
+
+function handleAfterLeave() {
+  state.visible = false
+  previewVideo.url = ''
+  previewVideo.poster = ''
+  previewVideo.title = ''
+}
+
+function close() {
+  state.show = false
+}
+
+function open(video: PreviewVideo) {
+  previewVideo.url = video.url
+  previewVideo.poster = video.poster
+  previewVideo.title = video.title
+  state.show = true
+}
+
+defineExpose<VideoPreviewExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-watermark/index.scss

@@ -0,0 +1,21 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 水印透明度
+$watermark-opacity: var(--wot-watermark-opacity, $opacity-dimmer) !default;
+
+@include b(watermark) {
+  position: absolute;
+  z-index: 1100;
+  opacity: $watermark-opacity;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+
+  @include when(fullscreen) {
+    position: fixed;
+  }
+}

package/components/wd-watermark/types.ts

@@ -0,0 +1,130 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+/**
+ * 水印字体样式
+ * 可选值: 'normal' | 'italic' | 'oblique'
+ */
+export type WatermarkFontStyle = 'normal' | 'italic' | 'oblique'
+
+/**
+ * 水印布局
+ * 可选值: 'grid' | 'staggered'
+ */
+export type WatermarkLayout = 'grid' | 'staggered'
+
+export const watermarkProps = {
+  ...baseProps,
+  /**
+   * 显示内容
+   * 类型: string
+   * 默认值: ''
+   */
+  content: makeStringProp(''),
+  /**
+   * 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片）
+   * 类型: string
+   * 默认值: ''
+   */
+  image: makeStringProp(''),
+  /**
+   * 图片高度
+   * 类型: number
+   * 默认值: 100
+   */
+  imageHeight: makeNumberProp(100),
+  /**
+   * 图片宽度
+   * 类型: number
+   * 默认值: 100
+   */
+  imageWidth: makeNumberProp(100),
+  /**
+   * X轴间距，单位px
+   * 类型: number
+   * 默认值: 0
+   */
+  gutterX: makeNumberProp(0),
+  /**
+   * Y轴间距，单位px
+   * 类型: number
+   * 默认值: 0
+   */
+  gutterY: makeNumberProp(0),
+  /**
+   * canvas画布宽度，单位px
+   * 类型: number
+   * 默认值: 100
+   */
+  width: makeNumberProp(100),
+  /**
+   * canvas画布高度，单位px
+   * 类型: number
+   * 默认值: 100
+   */
+  height: makeNumberProp(100),
+  /**
+   * 是否为全屏水印
+   * 类型: boolean
+   * 默认值: true
+   */
+  fullScreen: makeBooleanProp(true),
+  /**
+   * 水印字体颜色
+   * 类型: string
+   * 默认值: '#C9CBD4'
+   */
+  color: makeStringProp('#C9CBD4'),
+  /**
+   * 水印字体大小，单位px
+   * 类型: number
+   * 默认值: 14
+   */
+  size: makeNumberProp(14),
+  /**
+   * 水印字体样式（仅微信、支付宝和h5支持）
+   * 类型: WatermarkFontStyle
+   * 可选值: 'normal' | 'italic' | 'oblique'
+   * 默认值: 'normal'
+   */
+  fontStyle: makeStringProp<WatermarkFontStyle>('normal'),
+  /**
+   * 水印字体的粗细（仅微信、支付宝和h5支持）
+   * 类型: string | number
+   * 默认值: 'normal'
+   */
+  fontWeight: makeNumericProp('normal'),
+  /**
+   * 水印字体系列（仅微信、支付宝和h5支持）
+   * 类型: string
+   * 默认值: 'PingFang SC'
+   */
+  fontFamily: makeStringProp('PingFang SC'),
+  /**
+   * 水印旋转角度
+   * 类型: number
+   * 默认值: -25
+   */
+  rotate: makeNumberProp(-25),
+  /**
+   * 自定义层级
+   * 类型: number
+   * 默认值: 1100
+   */
+  zIndex: makeNumberProp(1100),
+  /**
+   * 自定义透明度，取值 0~1
+   * 类型: number
+   * 默认值: undefined
+   */
+  opacity: Number,
+  /**
+   * 水印布局
+   * 类型: WatermarkLayout
+   * 可选值: 'grid' | 'staggered'
+   * 默认值: 'grid'
+   */
+  layout: makeStringProp<WatermarkLayout>('grid')
+}
+
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>