oxy-uni-ui 2.1.1 → 2.1.3

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

@@ -46,7 +46,9 @@ export default {
   name: 'oxy-file-list',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -69,6 +71,7 @@ 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'
+import { useTranslate } from '../composables/useTranslate'
 
 const imgs: AnyObject = {
   pdf: ImgPdf,
@@ -81,6 +84,7 @@ const imgs: AnyObject = {
 
 const props = defineProps(fileListProps)
 const emit = defineEmits(['delete', 'click'])
+const { translate } = useTranslate('fileList')
 
 const videoPreview = ref<VideoPreviewInstance>()
 const toast = useToast('oxy-file-list')
@@ -96,7 +100,7 @@ function isDownloading(file: FileListItem) {
  */
 function handlePreviewImage(file: FileListItem) {
   const { onPreviewFail } = props
-  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
+  toast.loading({ msg: translate('openingPreview'), direction: 'vertical', position: 'middle' })
   uni.previewImage({
     urls: [file.url],
     current: 0,
@@ -109,7 +113,7 @@ function handlePreviewImage(file: FileListItem) {
           file
         })
       } else {
-        toast.error({ msg: '预览图片失败', direction: 'vertical', position: 'middle' })
+        toast.error({ msg: translate('previewImageFail'), direction: 'vertical', position: 'middle' })
       }
       toast.close()
     },
@@ -125,7 +129,7 @@ function handlePreviewImage(file: FileListItem) {
  */
 function handlePreviewVideo(file: FileListItem) {
   const { onPreviewFail } = props
-  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
+  toast.loading({ msg: translate('openingPreview'), direction: 'vertical', position: 'middle' })
   // #ifdef MP-WEIXIN
   uni.previewMedia({
     current: 0,
@@ -145,7 +149,7 @@ function handlePreviewVideo(file: FileListItem) {
           file
         })
       } else {
-        toast.error({ msg: '预览视频失败', direction: 'vertical', position: 'middle' })
+        toast.error({ msg: translate('previewVideoFail'), direction: 'vertical', position: 'middle' })
       }
       toast.close()
     },
@@ -168,7 +172,7 @@ function handlePreviewVideo(file: FileListItem) {
  */
 function handlePreviewFile(file: FileListItem) {
   const { onPreviewFail } = props
-  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
+  toast.loading({ msg: translate('openingPreview'), direction: 'vertical', position: 'middle' })
   uni.openDocument({
     filePath: file.url,
     showMenu: true,
@@ -181,7 +185,7 @@ function handlePreviewFile(file: FileListItem) {
           file
         })
       } else {
-        toast.error({ msg: '预览文件失败', direction: 'vertical', position: 'middle' })
+        toast.error({ msg: translate('previewFileFail'), direction: 'vertical', position: 'middle' })
       }
       toast.close()
     },
@@ -217,6 +221,14 @@ function handleClick(file: FileListItem, index: number) {
   }
 }
 
+/**
+ * 下载文件。跨平台实现：
+ * - 微信小程序：uni.downloadFile → uni.saveFile
+ * - H5：创建隐藏 <a> 标签触发下载
+ * - App：uni.downloadFile → uni.saveFile
+ * 支持 beforeDownload 拦截，通过 resolve(true) 继续下载。
+ * @param file - 文件项
+ */
 function onDownload(file: FileListItem) {
   const { beforeDownload, onDownloadSuccess, onDownloadFail } = props
 
@@ -234,7 +246,7 @@ function onDownload(file: FileListItem) {
             if (onDownloadSuccess) {
               onDownloadSuccess({ file, tempFilePath })
             } else {
-              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+              toast.success({ msg: translate('downloadSuccess') + filename, direction: 'vertical', position: 'middle' })
             }
             downloading.value[file.url] = false
           },
@@ -242,7 +254,7 @@ function onDownload(file: FileListItem) {
             if (onDownloadFail) {
               onDownloadFail({ file })
             } else {
-              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+              toast.error({ msg: translate('downloadFail') + filename, direction: 'vertical', position: 'middle' })
             }
             downloading.value[file.url] = false
           }
@@ -252,7 +264,7 @@ function onDownload(file: FileListItem) {
         if (onDownloadFail) {
           onDownloadFail({ file })
         } else {
-          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+          toast.error({ msg: translate('downloadFail') + filename, direction: 'vertical', position: 'middle' })
         }
         downloading.value[file.url] = false
       }
@@ -270,14 +282,14 @@ function onDownload(file: FileListItem) {
       if (onDownloadSuccess) {
         onDownloadSuccess({ file })
       } else {
-        toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+        toast.success({ msg: translate('downloadSuccess') + 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' })
+        toast.error({ msg: translate('downloadFail') + filename, direction: 'vertical', position: 'middle' })
       }
       downloading.value[file.url] = false
     }
@@ -293,7 +305,7 @@ function onDownload(file: FileListItem) {
             if (onDownloadSuccess) {
               onDownloadSuccess({ file, tempFilePath })
             } else {
-              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+              toast.success({ msg: translate('downloadSuccess') + filename, direction: 'vertical', position: 'middle' })
             }
             downloading.value[file.url] = false
           },
@@ -301,7 +313,7 @@ function onDownload(file: FileListItem) {
             if (onDownloadFail) {
               onDownloadFail({ file })
             } else {
-              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+              toast.error({ msg: translate('downloadFail') + filename, direction: 'vertical', position: 'middle' })
             }
             downloading.value[file.url] = false
           }
@@ -311,7 +323,7 @@ function onDownload(file: FileListItem) {
         if (onDownloadFail) {
           onDownloadFail({ file })
         } else {
-          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+          toast.error({ msg: translate('downloadFail') + filename, direction: 'vertical', position: 'middle' })
         }
         downloading.value[file.url] = false
       }
@@ -333,10 +345,10 @@ function onDownload(file: FileListItem) {
 
 function onDelete(file: FileListItem, index: number) {
   const execDelete = () => {
-    const title = '确认删除文件'
-    const msg = file.name || '确认删除该文件？'
+    const title = translate('confirmDeleteTitle')
+    const msg = file.name || translate('confirmDeleteMsg')
     message
-      .confirm({ title, msg, confirmButtonText: '删除', cancelButtonText: '取消' })
+      .confirm({ title, msg, confirmButtonText: translate('delete'), cancelButtonText: translate('cancel') })
       .then(() => {
         emit('delete', { file, index })
       })

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

@@ -1,13 +1,12 @@
 <template>
-  <view
-    :class="`oxy-floating-panel ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`"
-    :style="rootStyle"
-    @touchstart.passive="handleTouchStart"
-    @touchmove.passive="handleTouchMove"
-    @touchend="handleTouchEnd"
-    @touchcancel="handleTouchEnd"
-  >
-    <view :class="`oxy-floating-panel__header`">
+  <view :class="`oxy-floating-panel ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`" :style="rootStyle">
+    <view
+      :class="`oxy-floating-panel__header`"
+      @touchstart.passive="handleTouchStart"
+      @touchmove.stop.prevent="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @touchcancel="handleTouchEnd"
+    >
       <view :class="`oxy-floating-panel__header-bar`"></view>
     </view>
 
@@ -16,7 +15,10 @@
       data-id="content"
       :show-scrollbar="showScrollbar"
       scroll-y
+      @touchstart.stop.passive="handleTouchStart"
       @touchmove.stop.prevent="handleTouchMove"
+      @touchend.stop="handleTouchEnd"
+      @touchcancel.stop="handleTouchEnd"
     >
       <slot />
     </scroll-view>
@@ -27,7 +29,9 @@
 export default {
   name: 'oxy-floating-panel',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -49,7 +53,7 @@ const emit = defineEmits(['update:height', 'height-change'])
 const heightValue = ref<number>(props.height)
 
 const DAMP = 0.2 // 阻尼系数
-let startY: number // 起始位置
+let startY = 0 // 起始位置
 const windowHeight = ref<number>(0)
 const dragging = ref<boolean>(false) // 是否正在拖拽
 
@@ -76,6 +80,9 @@ const updateHeight = (value: number) => {
 }
 
 const handleTouchStart = (event: TouchEvent) => {
+  const target = event.currentTarget as any
+  if (target.dataset.id == 'content' && !props.contentDraggable) return
+
   touch.touchStart(event)
   dragging.value = true
   startY = -heightValue.value
@@ -86,12 +93,23 @@ const handleTouchMove = (event: TouchEvent) => {
   if (target.dataset.id == 'content') {
     if (!props.contentDraggable) return
   }
+
+  if (!dragging.value) {
+    handleTouchStart(event)
+  }
+
   touch.touchMove(event)
   const moveY = touch.deltaY.value + startY
   updateHeight(-ease(moveY))
 }
 
+/**
+ * 触摸结束，将面板吸附到最近的锚点。
+ * 使用 closest 工具函数找到最近的 anchors 值，emit height-change 事件。
+ */
 const handleTouchEnd = () => {
+  if (!dragging.value) return
+
   dragging.value = false
   updateHeight(closest(anchors.value, heightValue.value))
 
@@ -100,6 +118,12 @@ const handleTouchEnd = () => {
   }
 }
 
+/**
+ * 弹性阻尼函数，限制拖拽范围。
+ * 超出边界 max 或低于边界 min 时应用阻尼系数 DAMP，产生越界回弹效果。
+ * @param y - 当前拖拽偏移量
+ * @returns 阻尼处理后的偏移量
+ */
 const ease = (y: number) => {
   const absDistance = Math.abs(y)
   const { min, max } = boundary.value

package/components/oxy-footer/index.scss

@@ -12,6 +12,13 @@
   overflow: visible;
   padding: 0;
   background-color: $-footer-bg;
+
+  @include when(safe) {
+    box-sizing: content-box;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
   @include e(content) {
     overflow: visible;
     padding: $-footer-padding;

package/components/oxy-footer/oxy-footer.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="oxy-footer-placeholder" :style="{ height: placeholderHeight }"></view>
   <view class="oxy-footer-wrapper">
-    <view :class="`oxy-footer ${customClass}`" :style="`background-color: ${backgroundColor};${customStyle}`">
+    <view :class="`oxy-footer ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`" :style="`background-color: ${backgroundColor};${customStyle}`">
       <view class="oxy-footer__content" :style="contentStyle">
         <slot></slot>
       </view>
@@ -13,7 +13,9 @@ export default {
   name: 'oxy-footer',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -67,7 +69,7 @@ onMounted(() => {
   getHeight()
 })
 
-watch([() => props.height, () => props.customStyle, () => props.customClass, () => props.backgroundColor], () => {
+watch([() => props.height, () => props.customStyle, () => props.customClass, () => props.backgroundColor, () => props.safeAreaInsetBottom], () => {
   getHeight()
 })
 </script>

package/components/oxy-footer/types.ts

@@ -1,17 +1,20 @@
-import { baseProps, makeStringProp, makeNumberProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeStringProp, makeNumberProp } from '../common/props'
 
 export const footerProps = {
   ...baseProps,
   /**
    * 固定的内容高度
-   * 类型：number
-   * 默认值：'id'
+   * 默认行为：0 表示由内容自适应
    */
   height: makeNumberProp(0),
   /**
    * 背景色
-   * 类型：string
-   * 默认值：''
+   * 默认行为：空字符串，使用组件默认背景色
    */
-  backgroundColor: makeStringProp('')
+  backgroundColor: makeStringProp(''),
+  /**
+   * 是否设置底部安全距离（iPhone X 等机型）
+   * 默认行为：true，自动补齐底部安全区
+   */
+  safeAreaInsetBottom: makeBooleanProp(true)
 }

package/components/oxy-form/oxy-form.vue

@@ -10,7 +10,9 @@ export default {
   name: 'oxy-form',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -143,7 +145,11 @@ async function validate(prop?: string | string[]): Promise<{ valid: boolean; err
   }
 }
 
-// 合并子组件的rules到父组件的rules
+/**
+ * 合并父组件 rules 与子组件 rules。
+ * 过滤掉在 children 中不存在对应子组件的父级规则，再将子组件 rules 合并到同名 prop 下。
+ * @returns 合并后的完整校验规则
+ */
 function getMergeRules() {
   const mergedRules: FormRules = deepClone(props.rules)
   const childrenProps = children.map((child) => child.prop)
@@ -167,6 +173,12 @@ function getMergeRules() {
   return mergedRules
 }
 
+/**
+ * 根据 errorType 展示错误提示。
+ * toast 模式：显示排序后的第一条错误。
+ * message 模式：将所有错误写入 errorMessages，由各子组件自行展示。
+ * @param errors - 校验错误列表
+ */
 function showMessage(errors: ErrorMessage[]) {
   const childrenProps = children.map((e) => e.prop).filter(Boolean)
   const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))

package/components/oxy-form-item/oxy-form-item.vue

@@ -17,7 +17,9 @@ export default {
   name: 'oxy-form-item',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -35,15 +37,15 @@ const props = defineProps(formItemProps)
 const { parent: form, index } = useParent(FORM_KEY)
 
 const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
+  if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
+    return form.value.errorMessages[props.prop]
   } else {
     return ''
   }
 })
 
 const border = computed(() => {
-  if (index.value > 0 && form && form.props.border) {
+  if (index.value > 0 && form.value && form.value.props.border) {
     return true
   } else {
     return false

package/components/oxy-gap/oxy-gap.vue

@@ -7,7 +7,9 @@ export default {
   name: 'oxy-gap',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }

package/components/oxy-global-loading/oxy-global-loading.vue

@@ -3,13 +3,20 @@ import { ref, nextTick, watch } from 'vue'
 import { useToast } from '../oxy-toast'
 import { storeToRefs } from 'pinia'
 import { useGlobalLoading } from '../composables/useGlobalLoading'
-import { getCurrentPath } from '../common/path'
+import { getCurrentPageStackDepth, getCurrentPath } from '../common/path'
 
 const { loadingOptions, currentPage } = storeToRefs(useGlobalLoading())
 
 const { close: closeGlobalLoading } = useGlobalLoading()
 
 const loading = useToast('globalLoading')
+const ownerPage = getCurrentPath()
+const ownerPageDepth = getCurrentPageStackDepth()
+
+function isCurrentPage() {
+  if (!ownerPage) return currentPage.value === getCurrentPath()
+  return currentPage.value === ownerPage && getCurrentPageStackDepth() === ownerPageDepth
+}
 
 // #ifdef MP-ALIPAY
 const hackAlipayVisible = ref(false)
@@ -23,12 +30,16 @@ watch(
   () => loadingOptions.value,
   (newVal) => {
     if (newVal && newVal.show) {
-      if (currentPage.value === getCurrentPath()) {
-        loading.loading(loadingOptions.value)
+      if (!isCurrentPage()) {
+        loading.close()
+        return
       }
-    } else {
-      loading.close()
+
+      loading.loading(loadingOptions.value)
+      return
     }
+
+    loading.close()
   }
 )
 </script>
@@ -36,7 +47,9 @@ watch(
 <script lang="ts">
 export default {
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-global-message/oxy-global-message.vue

@@ -4,11 +4,18 @@ import { useMessage } from '../oxy-message-box'
 import { deepClone, isFunction } from '../common/util'
 import { storeToRefs } from 'pinia'
 import { useGlobalMessage } from '../composables/useGlobalMessage'
-import { getCurrentPath } from '../common/path'
+import { getCurrentPageStackDepth, getCurrentPath } from '../common/path'
 
 const { messageOptions, currentPage } = storeToRefs(useGlobalMessage())
 
 const messageBox = useMessage('globalMessage')
+const ownerPage = getCurrentPath()
+const ownerPageDepth = getCurrentPageStackDepth()
+
+function isCurrentPage() {
+  if (!ownerPage) return currentPage.value === getCurrentPath()
+  return currentPage.value === ownerPage && getCurrentPageStackDepth() === ownerPageDepth
+}
 
 // #ifdef MP-ALIPAY
 const hackAlipayVisible = ref(false)
@@ -22,24 +29,28 @@ watch(
   () => messageOptions.value,
   (newVal) => {
     if (newVal) {
-      if (currentPage.value === getCurrentPath()) {
-        const option = deepClone(newVal)
-        messageBox
-          .show(option)
-          .then((res) => {
-            if (isFunction(option.success)) {
-              option.success(res)
-            }
-          })
-          .catch((err) => {
-            if (isFunction(option.fail)) {
-              option.fail(err)
-            }
-          })
+      if (!isCurrentPage()) {
+        messageBox.close()
+        return
       }
-    } else {
-      messageBox.close()
+
+      const option = deepClone(newVal)
+      messageBox
+        .show(option)
+        .then((res) => {
+          if (isFunction(option.success)) {
+            option.success(res)
+          }
+        })
+        .catch((err) => {
+          if (isFunction(option.fail)) {
+            option.fail(err)
+          }
+        })
+      return
     }
+
+    messageBox.close()
   }
 )
 </script>
@@ -47,7 +58,9 @@ watch(
 <script lang="ts">
 export default {
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-global-toast/oxy-global-toast.vue

@@ -3,13 +3,20 @@ import { ref, nextTick, watch } from 'vue'
 import { useToast } from '../oxy-toast'
 import { storeToRefs } from 'pinia'
 import { useGlobalToast } from '../composables/useGlobalToast'
-import { getCurrentPath } from '../common/path'
+import { getCurrentPageStackDepth, getCurrentPath } from '../common/path'
 
 const { toastOptions, currentPage } = storeToRefs(useGlobalToast())
 
 const { close: closeGlobalToast } = useGlobalToast()
 
 const toast = useToast('globalToast')
+const ownerPage = getCurrentPath()
+const ownerPageDepth = getCurrentPageStackDepth()
+
+function isCurrentPage() {
+  if (!ownerPage) return currentPage.value === getCurrentPath()
+  return currentPage.value === ownerPage && getCurrentPageStackDepth() === ownerPageDepth
+}
 
 // #ifdef MP-ALIPAY
 const hackAlipayVisible = ref(false)
@@ -23,12 +30,16 @@ watch(
   () => toastOptions.value,
   (newVal) => {
     if (newVal && newVal.show) {
-      if (currentPage.value === getCurrentPath()) {
-        toast.show(toastOptions.value)
+      if (!isCurrentPage()) {
+        toast.close()
+        return
       }
-    } else {
-      toast.close()
+
+      toast.show(toastOptions.value)
+      return
     }
+
+    toast.close()
   }
 )
 </script>
@@ -36,7 +47,9 @@ watch(
 <script lang="ts">
 export default {
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-grid/oxy-grid.vue

@@ -9,7 +9,9 @@
 export default {
   name: 'oxy-grid',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -80,6 +82,10 @@ const handleChildrenChange = debounce(() => {
   init()
 }, 50)
 
+/**
+ * 初始化子项样式类。
+ * border 模式下根据 column 列数标记首行(is-first)、末行(is-last)、右边界(is-right)项，非 border 模式仅标记首行。
+ */
 function init() {
   if (!children) return
   children.forEach((item, index) => {

package/components/oxy-grid-item/index.scss

@@ -55,7 +55,7 @@
       background-color: $-grid-item-border-color;
       top: 0;
       left: 0;
-      z-index: 1;
+      z-index: $-z-index-sticky;
     }
     &::after {
       content: "";