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

package/components/wd-upload/wd-upload.vue

@@ -0,0 +1,565 @@
+<template>
+  <view :class="['wd-upload', customClass]" :style="customStyle">
+    <!-- 预览列表 -->
+    <view :class="['wd-upload__preview', customPreviewClass]" v-for="(file, index) in uploadFiles" :key="index">
+      <!-- 成功时展示图片 -->
+      <view class="wd-upload__status-content">
+        <image v-if="isImage(file)" :src="file.url" :mode="imageMode" class="wd-upload__picture" @click="onPreviewImage(file)" />
+        <template v-else-if="isVideo(file)">
+          <view class="wd-upload__video" v-if="file.thumb" @click="onPreviewVideo(file)">
+            <image :src="file.thumb" :mode="imageMode" class="wd-upload__picture" />
+            <wd-icon name="play-circle-fill" custom-class="wd-upload__video-play"></wd-icon>
+          </view>
+          <view v-else class="wd-upload__video" @click="onPreviewVideo(file)">
+            <!-- #ifdef APP-PLUS || MP-DINGTALK -->
+            <wd-icon custom-class="wd-upload__video-icon" name="video-camera"></wd-icon>
+            <!-- #endif -->
+            <!-- #ifndef APP-PLUS -->
+            <!-- #ifndef MP-DINGTALK -->
+            <video
+              :src="file.url"
+              :title="file.name || '视频' + index"
+              object-fit="contain"
+              :controls="false"
+              :poster="file.thumb"
+              :autoplay="false"
+              :show-center-play-btn="false"
+              :show-fullscreen-btn="false"
+              :show-play-btn="false"
+              :show-loading="false"
+              :show-progress="false"
+              :show-mute-btn="false"
+              :enable-progress-gesture="false"
+              :enableNative="true"
+              class="wd-upload__video"
+            ></video>
+            <wd-icon name="play-circle-fill" custom-class="wd-upload__video-play"></wd-icon>
+            <!-- #endif -->
+            <!-- #endif -->
+          </view>
+        </template>
+
+        <view v-else class="wd-upload__file" @click="onPreviewFile(file)">
+          <wd-icon name="file" custom-class="wd-upload__file-icon"></wd-icon>
+          <view class="wd-upload__file-name">{{ file.name || file.url }}</view>
+        </view>
+      </view>
+
+      <view v-if="file[props.statusKey] !== 'success'" class="wd-upload__mask">
+        <!-- loading时展示loading图标和进度 -->
+        <view v-if="file[props.statusKey] === 'loading'" class="wd-upload__status-content">
+          <wd-loading :type="loadingType" :size="loadingSize" :color="loadingColor" />
+          <text class="wd-upload__progress-txt">{{ file.percent }}%</text>
+        </view>
+        <!-- 失败时展示失败图标以及失败信息 -->
+        <view v-if="file[props.statusKey] === 'fail'" class="wd-upload__status-content">
+          <wd-icon name="close-circle" custom-class="wd-upload__icon"></wd-icon>
+          <text class="wd-upload__progress-txt">{{ file.error || translate('error') }}</text>
+        </view>
+      </view>
+      <!-- 上传状态为上传中时不展示移除按钮 -->
+      <view class="wd-upload__close" v-if="file[props.statusKey] !== 'loading' && !disabled" @click="removeFile(index)">
+        <wd-icon name="close" custom-class="wd-upload__close-icon"></wd-icon>
+      </view>
+      <!-- 自定义预览样式 -->
+      <slot name="preview-cover" v-if="$slots['preview-cover']" :file="file" :index="index"></slot>
+    </view>
+
+    <block v-if="showUpload">
+      <view :class="['wd-upload__evoke-slot', customEvokeClass]" v-if="$slots.default" @click="onEvokeClick">
+        <slot></slot>
+      </view>
+      <!-- 唤起项 -->
+      <view v-else @click="onEvokeClick" :class="['wd-upload__evoke', disabled ? 'is-disabled' : '', customEvokeClass]">
+        <!-- 唤起项图标 -->
+        <wd-icon custom-class="wd-upload__evoke-icon" name="camera-fill"></wd-icon>
+        <!-- 有限制个数时确认是否展示限制个数 -->
+        <view v-if="limit && showLimitNum" class="wd-upload__evoke-num">（{{ uploadFiles.length }}/{{ limit }}）</view>
+      </view>
+    </block>
+  </view>
+  <!-- #ifndef MP-WEIXIN -->
+  <wd-video-preview :selector="videoPreviewId"></wd-video-preview>
+  <!-- #endif -->
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-upload',
+  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 wdVideoPreview from '../wd-video-preview/wd-video-preview.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+
+import { computed, ref, watch } from 'vue'
+import { context, isEqual, isImageUrl, isVideoUrl, isFunction, isDef, deepClone, uuid, isPromise } from '../../common/util'
+import { callInterceptor } from '../../common/interceptor'
+import { useTranslate } from '../../composables/useTranslate'
+import { useUpload } from '../../composables/useUpload'
+import {
+  uploadProps,
+  type UploadFileItem,
+  type ChooseFile,
+  type UploadExpose,
+  type UploadErrorEvent,
+  type UploadChangeEvent,
+  type UploadSuccessEvent,
+  type UploadProgressEvent,
+  type UploadOversizeEvent,
+  type UploadRemoveEvent
+} from './types'
+import { useVideoPreview } from '../wd-video-preview'
+
+const props = defineProps(uploadProps)
+
+const emit = defineEmits<{
+  (e: 'fail', value: UploadErrorEvent): void
+  (e: 'change', value: UploadChangeEvent): void
+  (e: 'success', value: UploadSuccessEvent): void
+  (e: 'progress', value: UploadProgressEvent): void
+  (e: 'oversize', value: UploadOversizeEvent): void
+  (e: 'chooseerror', value: any): void
+  (e: 'remove', value: UploadRemoveEvent): void
+  (e: 'update:fileList', value: UploadFileItem[]): void
+}>()
+
+defineExpose<UploadExpose>({
+  submit: () => startUploadFiles(),
+  abort: () => abort()
+})
+
+const { translate } = useTranslate('upload')
+
+const uploadFiles = ref<UploadFileItem[]>([])
+
+const showUpload = computed(() => !props.limit || uploadFiles.value.length < props.limit)
+
+const videoPreviewId = ref<string>(`videoPreview${uuid()}`)
+const { previewVideo } = useVideoPreview(videoPreviewId.value)
+
+const { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()
+
+watch(
+  () => props.fileList,
+  (val) => {
+    const { statusKey } = props
+    if (isEqual(val, uploadFiles.value)) return
+    const uploadFileList: UploadFileItem[] = val.map((item) => {
+      item[statusKey] = item[statusKey] || 'success'
+      item.response = item.response || ''
+      return { ...item, uid: context.id++ }
+    })
+    uploadFiles.value = uploadFileList
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.limit,
+  (val) => {
+    if (val && val < uploadFiles.value.length) {
+      console.error('[wot-design]Error: props limit must less than fileList.length')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function emitFileList() {
+  emit('update:fileList', uploadFiles.value)
+}
+
+/**
+ *  开始上传文件
+ */
+function startUploadFiles() {
+  const { buildFormData, formData = {}, statusKey } = props
+  const { action, name, header = {}, accept, successStatus, uploadMethod } = props
+  const statusCode = isDef(successStatus) ? successStatus : 200
+
+  for (const uploadFile of uploadFiles.value) {
+    // 仅开始未上传的文件
+    if (uploadFile[statusKey] === UPLOAD_STATUS.PENDING) {
+      if (buildFormData) {
+        const res = buildFormData({ file: uploadFile, formData })
+        if (isPromise(res)) {
+          res
+            .then((newFormData) => {
+              if (newFormData) {
+                startUpload(uploadFile, {
+                  action,
+                  header,
+                  name,
+                  formData: newFormData,
+                  fileType: accept as 'image' | 'video' | 'audio',
+                  statusCode,
+                  statusKey,
+                  uploadMethod,
+                  onSuccess: handleSuccess,
+                  onError: handleError,
+                  onProgress: handleProgress
+                })
+              }
+            })
+            .catch(() => {})
+        } else if (res) {
+          startUpload(uploadFile, {
+            action,
+            header,
+            name,
+            formData: res,
+            fileType: accept as 'image' | 'video' | 'audio',
+            statusCode,
+            statusKey,
+            uploadMethod,
+            onSuccess: handleSuccess,
+            onError: handleError,
+            onProgress: handleProgress
+          })
+        }
+      } else {
+        startUpload(uploadFile, {
+          action,
+          header,
+          name,
+          formData,
+          fileType: accept as 'image' | 'video' | 'audio',
+          statusCode,
+          statusKey,
+          uploadMethod,
+          onSuccess: handleSuccess,
+          onError: handleError,
+          onProgress: handleProgress
+        })
+      }
+    }
+  }
+}
+
+/**
+ * 获取图片信息
+ * @param img
+ */
+function getImageInfo(img: string) {
+  return new Promise<UniApp.GetImageInfoSuccessData>((resolve, reject) => {
+    uni.getImageInfo({
+      src: img,
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (error) => {
+        reject(error)
+      }
+    })
+  })
+}
+
+/**
+ * @description 初始化文件数据
+ * @param {Object} file 上传的文件
+ */
+function initFile(file: ChooseFile, currentIndex?: number) {
+  const { statusKey } = props
+  // 状态初始化
+  const initState: UploadFileItem = {
+    uid: context.id++,
+    // 仅h5支持 name
+    name: file.name || '',
+    thumb: file.thumb || '',
+    [statusKey]: 'pending',
+    size: file.size || 0,
+    url: file.path,
+    percent: 0
+  }
+  if (typeof currentIndex === 'number') {
+    uploadFiles.value.splice(currentIndex, 1, initState)
+  } else {
+    uploadFiles.value.push(initState)
+  }
+  if (props.autoUpload) {
+    startUploadFiles()
+  }
+}
+
+/**
+ * @description 上传失败捕获
+ * @param {Object} err 错误返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleError(err: Record<string, any>, file: UploadFileItem, formData: Record<string, any>) {
+  const { statusKey } = props
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index][statusKey] = 'fail'
+    uploadFiles.value[index].error = err.message
+    uploadFiles.value[index].response = err
+    emit('fail', { error: err, file, formData })
+    emitFileList()
+  }
+}
+
+/**
+ * @description 上传成功捕获
+ * @param {Object} res 接口返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleSuccess(res: Record<string, any>, file: UploadFileItem, formData: Record<string, any>) {
+  const { statusKey } = props
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index][statusKey] = 'success'
+    uploadFiles.value[index].response = res.data
+    emit('change', { fileList: uploadFiles.value })
+    emit('success', { file, fileList: uploadFiles.value, formData })
+    emitFileList()
+  }
+}
+
+/**
+ * @description 上传中捕获
+ * @param {Object} res 接口返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleProgress(res: UniApp.OnProgressUpdateResult, file: UploadFileItem) {
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index].percent = res.progress
+    emit('progress', { response: res, file })
+  }
+}
+
+/**
+ * @description 选择文件的实际操作，将chooseFile自己用promise包了一层
+ */
+function onChooseFile(currentIndex?: number) {
+  const { multiple, maxSize, accept, sizeType, limit, sourceType, compressed, maxDuration, camera, beforeUpload, extension } = props
+  chooseFile({
+    multiple: isDef(currentIndex) ? false : multiple,
+    sizeType,
+    sourceType,
+    maxCount: limit ? limit - uploadFiles.value.length : limit,
+    accept,
+    compressed,
+    maxDuration,
+    camera,
+    extension
+  })
+    .then((res) => {
+      // 成功选择初始化file
+      let files = res
+      // 单选只有一个
+      if (!multiple) {
+        files = files.slice(0, 1)
+      }
+      // 遍历列表逐个初始化上传参数
+      const mapFiles = async (files: ChooseFile[]) => {
+        for (let index = 0; index < files.length; index++) {
+          const file = files[index]
+          if (file.type === 'image' && !file.size) {
+            const imageInfo = await getImageInfo(file.path)
+            file.size = imageInfo.width * imageInfo.height
+          }
+          Number(file.size) <= maxSize ? initFile(file, currentIndex) : emit('oversize', { file })
+        }
+      }
+
+      // 上传前的钩子
+      callInterceptor(beforeUpload, {
+        args: [{ files, fileList: uploadFiles.value }],
+        done: () => mapFiles(files)
+      })
+    })
+    .catch((error) => {
+      emit('chooseerror', { error })
+    })
+}
+
+/**
+ * @description 处理唤起选择文件的点击事件
+ */
+function onEvokeClick() {
+  handleChoose()
+}
+
+/**
+ * @description 选择文件，内置拦截选择操作
+ */
+function handleChoose(index?: number) {
+  if (props.disabled) return
+  const { beforeChoose } = props
+
+  // 选择图片前的钩子
+  callInterceptor(beforeChoose, {
+    args: [{ fileList: uploadFiles.value }],
+    done: () => onChooseFile(index)
+  })
+}
+
+/**
+ * @description 移除文件
+ * @param {Object} file 上传的文件
+ * @param {Number} index 删除
+ */
+function handleRemove(file: UploadFileItem) {
+  uploadFiles.value.splice(
+    uploadFiles.value.findIndex((item) => item.uid === file.uid),
+    1
+  )
+  emit('change', {
+    fileList: uploadFiles.value
+  })
+  emit('remove', { file })
+  emitFileList()
+}
+
+function removeFile(index: number) {
+  const { beforeRemove } = props
+  const intIndex: number = index
+  const file = uploadFiles.value[intIndex]
+  callInterceptor(beforeRemove, {
+    args: [{ file, index: intIndex, fileList: uploadFiles.value }],
+    done: () => handleRemove(file)
+  })
+}
+
+/**
+ * 预览文件
+ * @param file
+ */
+function handlePreviewFile(file: UploadFileItem) {
+  uni.openDocument({
+    filePath: file.url,
+    showMenu: true
+  })
+}
+
+/**
+ * 预览图片
+ * @param index
+ * @param lists
+ */
+function handlePreviewImage(index: number, lists: string[]) {
+  const { onPreviewFail } = props
+  uni.previewImage({
+    urls: lists,
+    current: lists[index],
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          index,
+          imgList: lists
+        })
+      } else {
+        uni.showToast({ title: '预览图片失败', icon: 'none' })
+      }
+    }
+  })
+}
+
+/**
+ * 预览视频
+ * @param index
+ * @param lists
+ */
+function handlePreviewVieo(index: number, lists: UploadFileItem[]) {
+  const { onPreviewFail } = props
+  // #ifdef MP-WEIXIN
+  uni.previewMedia({
+    current: index,
+    sources: lists.map((file) => {
+      return {
+        url: file.url,
+        type: 'video',
+        poster: file.thumb
+      }
+    }),
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          index,
+          imgList: []
+        })
+      } else {
+        uni.showToast({ title: '预览视频失败', icon: 'none' })
+      }
+    }
+  })
+  // #endif
+
+  // #ifndef MP-WEIXIN
+  previewVideo({ url: lists[index].url, poster: lists[index].thumb, title: lists[index].name })
+  // #endif
+}
+
+function onPreviewImage(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  const imgList = fileList.filter((file) => isImage(file)).map((file) => file.url)
+  const imgIndex: number = imgList.findIndex((item) => item === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    callInterceptor(beforePreview, {
+      args: [{ file, index, fileList, imgList }],
+      done: () => handlePreviewImage(imgIndex, imgList)
+    })
+  }
+}
+
+function onPreviewVideo(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  const videoList = fileList.filter((file) => isVideo(file))
+  const videoIndex: number = videoList.findIndex((item) => item.url === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    callInterceptor(beforePreview, {
+      args: [{ file, index, fileList, imgList: [] }],
+      done: () => handlePreviewVieo(videoIndex, videoList)
+    })
+  }
+}
+
+function onPreviewFile(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    callInterceptor(beforePreview, {
+      args: [{ file, index, fileList, imgList: [] }],
+      done: () => handlePreviewFile(file)
+    })
+  }
+}
+
+function isVideo(file: UploadFileItem) {
+  return (file.name && isVideoUrl(file.name)) || isVideoUrl(file.url)
+}
+
+function isImage(file: UploadFileItem) {
+  return (file.name && isImageUrl(file.name)) || isImageUrl(file.url)
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-video-preview/index.scss

@@ -0,0 +1,54 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 预览背景色
+$video-preview-bg: var(--wot-video-preview-bg, $opac-9_75) !default;
+// 关闭图标尺寸
+$video-preview-close-size: var(--wot-video-preview-close-size, $n-24) !default;
+// 关闭图标颜色
+$video-preview-close-color: var(--wot-video-preview-close-color, $icon-white) !default;
+// 关闭按钮外边距
+$video-preview-close-margin: var(--wot-video-preview-close-margin, $spacing-extra-loose) !default;
+// 视频预览区域高度
+$video-preview-video-height: var(--wot-video-preview-video-height, $n-248) !default;
+// 预览层级
+$video-preview-z-index: var(--wot-video-preview-z-index, 1000) !default;
+// 关闭按钮层级
+$video-preview-close-z-index: var(--wot-video-preview-close-z-index, 10) !default;
+
+@include b(video-preview) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $video-preview-z-index;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: $video-preview-bg;
+
+  @include e(video) {
+    width: 100%;
+    height: $video-preview-video-height;
+    transition: all 0.3s ease;
+  }
+
+  @include e(close) {
+    position: absolute;
+    z-index: $video-preview-close-z-index;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: $video-preview-close-margin;
+    right: $video-preview-close-margin;
+    cursor: pointer;
+  }
+
+  @include edeep(close-icon) {
+    font-size: $video-preview-close-size;
+    line-height: $video-preview-close-size;
+    color: $video-preview-close-color;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { inject, provide, ref } from 'vue'
+import type { VideoPreview, VideoPreviewOptions, PreviewVideo } from './types'
+import { deepMerge } from '../../common/util'
+
+/**
+ * useVideoPreview 用到的 key
+ */
+const videoPreviewDefaultOptionKey = '__VIDEO_PREVIEW_OPTION__'
+
+/**
+ * 默认选项
+ */
+export const defaultOptions: VideoPreviewOptions = {
+  url: '',
+  poster: '',
+  title: '',
+  show: false,
+  zIndex: 1000
+}
+
+const None = Symbol('None')
+
+/**
+ * 视频预览 Hook
+ * @param selector 选择器，用于区分多个实例
+ */
+export function useVideoPreview(selector: string = ''): VideoPreview {
+  const videoPreviewOptionKey = getVideoPreviewOptionKey(selector)
+  const videoPreviewOption = inject(videoPreviewOptionKey, ref<VideoPreviewOptions | typeof None>(None))
+
+  if (videoPreviewOption.value === None) {
+    videoPreviewOption.value = defaultOptions
+    provide(videoPreviewOptionKey, videoPreviewOption)
+  }
+
+  /**
+   * 打开视频预览
+   * @param options 预览选项
+   */
+  const open = (options: VideoPreviewOptions | PreviewVideo) => {
+    const mergedOptions = deepMerge(defaultOptions, options) as VideoPreviewOptions
+    videoPreviewOption.value = deepMerge(mergedOptions, { show: true }) as VideoPreviewOptions
+  }
+
+  /**
+   * 关闭视频预览
+   */
+  const close = () => {
+    videoPreviewOption.value = { show: false } as VideoPreviewOptions
+  }
+
+  return {
+    previewVideo: open,
+    closeVideoPreview: close
+  }
+}
+
+/**
+ * 获取视频预览选项的 key
+ * @param selector 选择器
+ */
+export const getVideoPreviewOptionKey = (selector: string) => {
+  return selector ? `${videoPreviewDefaultOptionKey}${selector}` : videoPreviewDefaultOptionKey
+}