oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-fab/oxy-fab.vue

@@ -44,12 +44,13 @@ import OxyButton from '../oxy-button/oxy-button.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
-import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { getRect, isDef, isH5, objToStyle, unitConvert } from '../common/util'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
 import { reactive } from 'vue'
 import { useRaf } from '../composables/useRaf'
+import { useWindowResize } from '../composables/useWindowResize'
 
 const props = defineProps(fabProps)
 const emit = defineEmits(['update:active', 'click'])
@@ -121,6 +122,24 @@ async function getBounding() {
   bounding.maxTop = screen.height - fabSize.height - bottom
 }
 
+function clampPosition() {
+  if (!inited.value) return
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  left.value = Math.min(Math.max(left.value, minLeft), maxLeft)
+  top.value = Math.min(Math.max(top.value, minTop), maxTop)
+}
+
+const handleWindowResize = async () => {
+  await getBounding()
+  if (props.draggable) {
+    clampPosition()
+    return
+  }
+  initPosition()
+}
+
+useWindowResize(handleWindowResize)
+
 function initPosition() {
   const pos = props.position
   const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -210,8 +229,8 @@ function handleTouchEnd() {
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    top: top.value + 'px',
-    left: left.value + 'px',
+    top: unitConvert(top.value, 0, { output: 'px' }),
+    left: unitConvert(left.value, 0, { output: 'px' }),
     transition: attractTransition.value ? 'all ease 0.3s' : 'none'
   }
   if (isDef(props.zIndex)) {

package/components/oxy-file-list/index.scss

@@ -5,12 +5,12 @@
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -8px;
+  margin: 0 -16rpx;
   @include e(item) {
     position: relative;
-    width: calc(33.33% - 16px);
+    width: calc(33.33% - 32rpx);
     height: $-file-list-height;
-    margin: 0 8px 32px;
+    margin: 0 16rpx 64rpx;
   }
   @include e(content) {
     display: flex;
@@ -20,27 +20,28 @@
     width: 100%;
     height: 100%;
     border: 1px solid $-color-border;
-    border-radius: 8px;
+    border-radius: 16rpx;
+    position: relative;
   }
   @include e(picture) {
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 8px;
+    border-radius: 16rpx;
   }
   @include e(icon) {
-    width: 32px;
-    height: 32px;
+    width: 64rpx;
+    height: 64rpx;
   }
   @include e(name) {
     display: block;
     width: 100%;
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
-    padding: 0 4px;
+    padding: 0 8rpx;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 16rpx;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,15 +60,15 @@
     .oxy-file-list__list--item {
       width: 100%;
       background: #f8f9ff;
-      padding: 8px 12px;
-      border-radius: 4px;
+      padding: 16rpx 24rpx;
+      border-radius: 8rpx;
       display: flex;
       flex-direction: row;
       align-items: center;
       .oxy-file-list__icon {
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 16rpx;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -75,9 +76,35 @@
         margin: 0;
         padding: 0;
       }
+      .oxy-file-list__download {
+        font-size: 36rpx;
+        color: $-cell-arrow-color;
+      }
+      .oxy-file-list__delete {
+        font-size: 36rpx;
+        color: $-cell-arrow-color;
+        margin-left: 24rpx;
+      }
       & + .oxy-file-list__list--item {
-        margin-top: 8px;
+        margin-top: 16rpx;
       }
     }
   }
+
+  .oxy-file-list__download-btn {
+    position: absolute;
+    top: 12rpx;
+    right: 12rpx;
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 12rpx;
+    padding: 8rpx 10rpx;
+    display: flex;
+  }
+  .oxy-file-list__download {
+    color: $-color-white;
+  }
+  .oxy-file-list__delete {
+    color: $-color-white;
+    margin-left: 12rpx;
+  }
 }

package/components/oxy-file-list/oxy-file-list.vue

@@ -1,16 +1,34 @@
 <template>
   <view :class="['oxy-file-list', { 'oxy-file-list__list': props.type === 'list' }, customClass]">
     <block v-if="props.type === 'list'">
-      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="onPreview(file)">
+      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="handleClick(file, index)">
         <image :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" />
         <text class="oxy-file-list__name">{{ file.name }}</text>
+        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="36rpx" custom-class="oxy-file-list__download" />
+        <view @tap.stop="onDownload(file)" v-if="props.enableDownload && !isDownloading(file)">
+          <oxy-icon name="download" custom-class="oxy-file-list__download" />
+        </view>
+        <view v-if="props.enableDelete && !isDownloading(file)" @tap.stop="onDelete(file, index)">
+          <oxy-icon name="delete" custom-class="oxy-file-list__delete" />
+        </view>
       </view>
     </block>
     <block v-else>
       <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__item">
         <view class="oxy-file-list__content">
-          <image v-if="isImage(file)" :src="file.url" mode="aspectFill" class="oxy-file-list__picture" @click="onPreview(file)" />
-          <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="onPreview(file)" />
+          <image v-if="isImage(file)" :src="file.url" mode="aspectFill" class="oxy-file-list__picture" @click="handleClick(file, index)" />
+          <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="handleClick(file, index)" />
+          <view v-if="props.enableDownload || props.enableDelete" class="oxy-file-list__download-btn">
+            <template v-if="props.enableDownload">
+              <oxy-loading v-if="isDownloading(file)" size="36rpx" color="#ffffff" custom-class="oxy-file-list__download" />
+              <view @tap.stop="onDownload(file)">
+                <oxy-icon name="download" custom-class="oxy-file-list__download" />
+              </view>
+            </template>
+            <view v-if="props.enableDelete && !isDownloading(file)" @tap.stop="onDelete(file, index)">
+              <oxy-icon name="delete" custom-class="oxy-file-list__delete" />
+            </view>
+          </view>
         </view>
         <oxy-tooltip placement="top" :content="file.name">
           <text class="oxy-file-list__name">{{ file.name }}</text>
@@ -18,6 +36,8 @@
       </view>
     </block>
   </view>
+  <oxy-toast selector="oxy-file-list" />
+  <oxy-message-box selector="oxy-file-list" />
   <oxy-video-preview ref="videoPreview"></oxy-video-preview>
 </template>
 
@@ -39,7 +59,13 @@ import ImgVideo from '../oxy-upload/images/video.png'
 import ImgPic from '../oxy-upload/images/pic.png'
 import ImgOther from '../oxy-upload/images/other.png'
 import OxyVideoPreview from '../oxy-video-preview/oxy-video-preview.vue'
-import { ref } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyToast from '../oxy-toast/oxy-toast.vue'
+import OxyMessageBox from '../oxy-message-box/oxy-message-box.vue'
+import { useToast } from '../oxy-toast'
+import { useMessage } from '../oxy-message-box'
+import { ref, nextTick } from 'vue'
 import { isImageUrl, isVideoUrl, isAudioUrl, isPdfUrl, isDocUrl } from '../common/util'
 import { type FileListItem, fileListProps } from './types'
 import type { VideoPreviewInstance } from '../oxy-video-preview/types'
@@ -54,25 +80,41 @@ const imgs: AnyObject = {
 }
 
 const props = defineProps(fileListProps)
+const emit = defineEmits(['delete', 'click'])
 
 const videoPreview = ref<VideoPreviewInstance>()
+const toast = useToast('oxy-file-list')
+const message = useMessage('oxy-file-list')
+const downloading = ref<Record<string, boolean>>({})
+
+function isDownloading(file: FileListItem) {
+  return !!downloading.value[file.url]
+}
 /**
  * 预览图片
  * @param file
  */
 function handlePreviewImage(file: FileListItem) {
   const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   uni.previewImage({
     urls: [file.url],
     current: 0,
+    success() {
+      toast.close()
+    },
     fail() {
       if (onPreviewFail) {
         onPreviewFail({
           file
         })
       } else {
-        uni.showToast({ title: '预览图片失败', icon: 'none' })
+        toast.error({ msg: '预览图片失败', direction: 'vertical', position: 'middle' })
       }
+      toast.close()
+    },
+    complete() {
+      toast.close()
     }
   })
 }
@@ -81,8 +123,9 @@ function handlePreviewImage(file: FileListItem) {
  * 预览视频
  * @param file
  */
-function handlePreviewVieo(file: FileListItem) {
+function handlePreviewVideo(file: FileListItem) {
   const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   // #ifdef MP-WEIXIN
   uni.previewMedia({
     current: 0,
@@ -93,19 +136,29 @@ function handlePreviewVieo(file: FileListItem) {
         poster: file.thumb
       }
     ],
+    success() {
+      toast.close()
+    },
     fail() {
       if (onPreviewFail) {
         onPreviewFail({
           file
         })
       } else {
-        uni.showToast({ title: '预览视频失败', icon: 'none' })
+        toast.error({ msg: '预览视频失败', direction: 'vertical', position: 'middle' })
       }
+      toast.close()
+    },
+    complete() {
+      toast.close()
     }
   })
   // #endif
   // #ifndef MP-WEIXIN
   videoPreview.value?.open({ url: file.url, poster: file.thumb, title: file.name })
+  nextTick(() => {
+    toast.close()
+  })
   // #endif
 }
 
@@ -114,62 +167,183 @@ function handlePreviewVieo(file: FileListItem) {
  * @param file
  */
 function handlePreviewFile(file: FileListItem) {
+  const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   uni.openDocument({
     filePath: file.url,
-    showMenu: true
+    showMenu: true,
+    success() {
+      toast.close()
+    },
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          file
+        })
+      } else {
+        toast.error({ msg: '预览文件失败', direction: 'vertical', position: 'middle' })
+      }
+      toast.close()
+    },
+    complete() {
+      toast.close()
+    }
   })
 }
 
-function onPreviewImage(file: FileListItem) {
+function handleClick(file: FileListItem, index: number) {
+  emit('click', { file, index })
+  if (!props.enablePreview) return
+  const execPreview = () => {
+    if (isImage(file)) {
+      handlePreviewImage(file)
+    } else if (isVideo(file)) {
+      handlePreviewVideo(file)
+    } else {
+      handlePreviewFile(file)
+    }
+  }
+
   const { beforePreview } = props
   if (beforePreview) {
     beforePreview({
       file,
       resolve: (isPass: boolean) => {
-        isPass && handlePreviewImage(file)
+        isPass && execPreview()
       }
     })
   } else {
-    handlePreviewImage(file)
+    execPreview()
   }
 }
 
-function onPreviewVideo(file: FileListItem) {
-  const { beforePreview } = props
-  if (beforePreview) {
-    beforePreview({
-      file,
-      resolve: (isPass: boolean) => {
-        isPass && handlePreviewVieo(file)
+function onDownload(file: FileListItem) {
+  const { beforeDownload, onDownloadSuccess, onDownloadFail } = props
+
+  const execDownload = () => {
+    const filename = file.name || file.url
+    downloading.value[file.url] = true
+    // #ifdef MP-WEIXIN
+    uni.downloadFile({
+      url: file.url,
+      success(res) {
+        const tempFilePath = res.tempFilePath
+        uni.saveFile({
+          tempFilePath,
+          success() {
+            if (onDownloadSuccess) {
+              onDownloadSuccess({ file, tempFilePath })
+            } else {
+              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          },
+          fail() {
+            if (onDownloadFail) {
+              onDownloadFail({ file })
+            } else {
+              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          }
+        })
+      },
+      fail() {
+        if (onDownloadFail) {
+          onDownloadFail({ file })
+        } else {
+          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+        }
+        downloading.value[file.url] = false
       }
     })
-  } else {
-    handlePreviewVieo(file)
+    // #endif
+    // #ifdef H5
+    try {
+      const a = document.createElement('a')
+      a.href = file.url
+      a.download = file.name || ''
+      a.target = '_blank'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      if (onDownloadSuccess) {
+        onDownloadSuccess({ file })
+      } else {
+        toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+      }
+      downloading.value[file.url] = false
+    } catch (e) {
+      if (onDownloadFail) {
+        onDownloadFail({ file })
+      } else {
+        toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+      }
+      downloading.value[file.url] = false
+    }
+    // #endif
+    // #ifdef APP-PLUS
+    uni.downloadFile({
+      url: file.url,
+      success(res) {
+        const tempFilePath = res.tempFilePath
+        uni.saveFile({
+          tempFilePath,
+          success() {
+            if (onDownloadSuccess) {
+              onDownloadSuccess({ file, tempFilePath })
+            } else {
+              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          },
+          fail() {
+            if (onDownloadFail) {
+              onDownloadFail({ file })
+            } else {
+              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          }
+        })
+      },
+      fail() {
+        if (onDownloadFail) {
+          onDownloadFail({ file })
+        } else {
+          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+        }
+        downloading.value[file.url] = false
+      }
+    })
+    // #endif
   }
-}
 
-function onPreviewFile(file: FileListItem) {
-  const { beforePreview } = props
-  if (beforePreview) {
-    beforePreview({
+  if (beforeDownload) {
+    beforeDownload({
       file,
       resolve: (isPass: boolean) => {
-        isPass && handlePreviewFile(file)
+        isPass && execDownload()
       }
     })
   } else {
-    handlePreviewFile(file)
+    execDownload()
   }
 }
 
-function onPreview(file: FileListItem) {
-  if (isImage(file)) {
-    onPreviewImage(file)
-  } else if (isVideo(file)) {
-    onPreviewVideo(file)
-  } else {
-    onPreviewFile(file)
+function onDelete(file: FileListItem, index: number) {
+  const execDelete = () => {
+    const title = '确认删除文件'
+    const msg = file.name || '确认删除该文件？'
+    message
+      .confirm({ title, msg, confirmButtonText: '删除', cancelButtonText: '取消' })
+      .then(() => {
+        emit('delete', { file, index })
+      })
+      .catch(() => {})
   }
+
+  execDelete()
 }
 
 function isVideo(file: FileListItem) {

package/components/oxy-file-list/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeStringProp } from '../common/props'
+import { baseProps, makeArrayProp, makeStringProp, makeBooleanProp } from '../common/props'
 
 export type FileListItem = {
   [key: string]: any
@@ -22,6 +22,29 @@ export type FileListOnPreviewFailOption = {
 }
 export type FileListOnPreviewFail = (option: FileListOnPreviewFailOption) => void
 
+export type FileListBeforeDownloadOption = {
+  file: FileListItem
+  resolve: (isPass: boolean) => void
+}
+export type FileListBeforeDownload = (option: FileListBeforeDownloadOption) => void
+
+export type FileListOnDownloadSuccessOption = {
+  file: FileListItem
+  tempFilePath?: string
+}
+export type FileListOnDownloadSuccess = (option: FileListOnDownloadSuccessOption) => void
+
+export type FileListOnDownloadFailOption = {
+  file: FileListItem
+}
+export type FileListOnDownloadFail = (option: FileListOnDownloadFailOption) => void
+
+export type FileListBeforeDeleteOption = {
+  file: FileListItem
+  resolve: (isPass: boolean) => void
+}
+export type FileListBeforeDelete = (option: FileListBeforeDeleteOption) => void
+
 export const fileListProps = {
   ...baseProps,
 
@@ -37,6 +60,24 @@ export const fileListProps = {
    * 默认值：'card'
    */
   type: makeStringProp<FileListType>('list'),
+  /**
+   * 是否启用文件预览
+   * 类型：boolean
+   * 默认值：true
+   */
+  enablePreview: makeBooleanProp(true),
+  /**
+   * 是否启用文件下载
+   * 类型：boolean
+   * 默认值：true
+   */
+  enableDownload: makeBooleanProp(true),
+  /**
+   * 是否启用删除按钮
+   * 类型：boolean
+   * 默认值：true
+   */
+  enableDelete: makeBooleanProp(true),
   /**
    * 文件预览前的钩子，参数为预览的文件，若返回false或者返回Promise且被reject，则停止预览。
    * 类型：function({file,resolve})
@@ -48,7 +89,22 @@ export const fileListProps = {
    * 类型：function({file})
    * 默认值：-
    */
-  onPreviewFail: Function as PropType<FileListOnPreviewFail>
+  onPreviewFail: Function as PropType<FileListOnPreviewFail>,
+  /**
+   * 文件下载前钩子
+   * 类型：function({file,resolve})
+   */
+  beforeDownload: Function as PropType<FileListBeforeDownload>,
+  /**
+   * 文件下载成功回调
+   * 类型：function({file,tempFilePath})
+   */
+  onDownloadSuccess: Function as PropType<FileListOnDownloadSuccess>,
+  /**
+   * 文件下载失败回调
+   * 类型：function({file})
+   */
+  onDownloadFail: Function as PropType<FileListOnDownloadFail>
 }
 
 export type CornerProps = ExtractPropTypes<typeof fileListProps>

package/components/oxy-floating-panel/oxy-floating-panel.vue

@@ -35,10 +35,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
-import { floatingPanelProps } from './type'
-import { addUnit, closest, objToStyle } from '../common/util'
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './types'
+import { closest, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 
 const touch = useTouch()
 
@@ -61,8 +62,8 @@ const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [bou
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    height: addUnit(boundary.value.max),
-    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    height: unitConvert(boundary.value.max, 0, { output: 'px' }),
+    transform: `translateY(calc(100% + ${unitConvert(-heightValue.value, 0, { output: 'px' })}))`,
     transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
   }
 
@@ -129,10 +130,13 @@ watch(
   { immediate: true }
 )
 
-onBeforeMount(() => {
-  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
-  windowHeight.value = _windowHeight
-})
+const syncWindowHeight = (res?: WindowResizeResult) => {
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  const systemHeight = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemHeight
+}
+
+useWindowResize(syncWindowHeight, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

package/components/oxy-floating-panel/{type.ts → types.ts}

@@ -1,30 +1,30 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, truthProp } from '../common/props'
 
 export const floatingPanelProps = {
   ...baseProps,
   /**
-   * 面板的显示高度
+   * 面板当前高度
    */
   height: makeNumberProp(0),
   /**
-   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   * 拖拽吸附锚点列表
    */
   anchors: makeArrayProp<number>(),
   /**
-   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 是否预留底部安全区
    */
   safeAreaInsetBottom: makeBooleanProp(false),
   /**
-   * 是否显示滚动条，默认值为 true
+   * 内容区是否显示滚动条
    */
   showScrollbar: truthProp,
   /**
-   * 动画时长，单位毫秒，默认值为 300ms
+   * 高度变化动画时长，单位毫秒
    */
-  duration: makeNumericProp(300),
+  duration: makeNumberProp(300),
   /**
-   * 是否允许内容区容器拖拽，默认值为 true
+   * 内容区是否允许拖拽
    */
   contentDraggable: truthProp
 }