oxy-uni-ui 2.1.2 → 2.1.4

package/components/oxy-tree/types.ts

@@ -35,20 +35,56 @@ export type TreeNode = {
 
 export const treeProps = {
   ...baseProps,
+  /**
+   * 树形数据源
+   */
   data: makeArrayProp<RawTreeNode>(),
+  /**
+   * 是否显示复选框
+   */
   showCheckbox: makeBooleanProp(false),
+  /**
+   * 子节点键名
+   */
   childrenKey: makeStringProp('children'),
+  /**
+   * 标签键名
+   */
   labelKey: makeStringProp('name'),
+  /**
+   * 节点唯一标识键名
+   */
   nodeKey: makeStringProp('id'),
+  /**
+   * 默认展开的节点 key 数组
+   */
   defaultExpandedKeys: makeArrayProp<string>(),
+  /**
+   * 是否默认展开所有节点
+   */
   expandAll: makeBooleanProp(false),
+  /**
+   * 是否严格模式，父子节点选中状态不关联
+   */
   checkStrictly: makeBooleanProp(false),
+  /**
+   * 是否显示连接线
+   */
   showLine: makeBooleanProp(false),
+  /**
+   * 选中的节点 key，单选为字符串，多选为数组
+   */
   modelValue: {
     type: [Array<string>, String],
     default: ''
   },
+  /**
+   * 空数据提示文案
+   */
   emptyText: makeStringProp('暂无数据'),
+  /**
+   * 容器高度，支持 `px/rpx`
+   */
   height: makeStringProp('600rpx'),
   /**
    * 是否显示回到顶部按钮
@@ -72,13 +108,33 @@ export const treeProps = {
    * 相邻级节点间的水平缩进，number 类型按 `rpx` 语义处理
    */
   indent: makeNumberProp(32),
+  /**
+   * 是否只能选择叶子节点
+   */
   selectionLeafOnly: makeBooleanProp(false),
+  /**
+   * 自定义筛选方法，接收关键字和节点数据，返回是否匹配
+   */
   filterMethod: {
     type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,
     default: null
   },
+  /**
+   * 是否显示筛选输入框
+   */
   showFilter: makeBooleanProp(false),
-  filterPlaceholder: makeStringProp('请输入节点名称')
+  /**
+   * 筛选输入框占位符
+   */
+  filterPlaceholder: makeStringProp('请输入节点名称'),
+  /**
+   * 展开图标名称
+   */
+  expandIcon: makeStringProp('chevron-down-circle'),
+  /**
+   * 收起图标名称
+   */
+  collapseIcon: makeStringProp('chevron-right-circle')
 }
 export type TreeExpose = {
   toggleExpand: (node: TreeNode, flag: boolean) => void

package/components/oxy-upload/index.scss

@@ -39,7 +39,7 @@
     font-size: $-upload-evoke-icon-size;
     background-color: $-upload-evoke-bg;
     color: $-upload-evoke-color;
-    margin-bottom: 28rpx;
+    margin-bottom: $-upload-item-margin-bottom;
 
     @include when(disabled) {
       color: $-upload-evoke-disabled-color;
@@ -53,7 +53,7 @@
   @include e(evoke-num) {
     font-size: $-fs-content;
     line-height: $-fs-content;
-    margin-top: 20rpx;
+    margin-top: $-spacing-20;
   }
 
   @include edeep(evoke-icon) {
@@ -75,7 +75,7 @@
     position: relative;
     width: $-upload-size;
     height: $-upload-size;
-    margin: 0 24rpx 28rpx 0;
+    margin: 0 24rpx $-upload-item-margin-bottom 0;
   }
 
   @include e(preview-list) {
@@ -106,9 +106,9 @@
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
     box-sizing: border-box;
-    padding: 0 12rpx;
+    padding: 0 $-spacing-12;
     text-align: center;
-    margin-top: 20rpx;
+    margin-top: $-spacing-20;
     @include lineEllipsis()
   }
 
@@ -131,7 +131,7 @@
     right: calc($-upload-close-icon-size / 2 * -1);
     top: calc($-upload-close-icon-size / 2 * -1);
     font-size: $-upload-close-icon-size;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     color: $-upload-close-icon-color;
     width: $-upload-close-icon-size;
     height: $-upload-close-icon-size;
@@ -159,7 +159,7 @@
   @include e(progress-txt) {
     font-size: $-upload-progress-fs;
     line-height: $-upload-progress-fs;
-    margin-top: 20rpx;
+    margin-top: $-spacing-20;
     color: $-color-white;
   }
 
@@ -208,9 +208,9 @@
       font-size: $-upload-preview-name-fs;
       color: $-upload-file-color;
       box-sizing: border-box;
-      padding: 0 12rpx;
+      padding: 0 $-spacing-12;
       text-align: center;
-      margin-top: 20rpx;
+      margin-top: $-spacing-20;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

package/components/oxy-upload/oxy-upload.vue

@@ -42,7 +42,7 @@
             <!-- #ifndef MP-DINGTALK -->
             <video
               :src="file.url"
-              :title="file.name || '视频' + index"
+              :title="file.name || translate('videoType') + index"
               object-fit="contain"
               :controls="false"
               :poster="file.thumb"
@@ -123,7 +123,9 @@ export default {
   name: 'oxy-upload',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -596,7 +598,7 @@ function handlePreviewImage(index: number, lists: string[]) {
           imgList: lists
         })
       } else {
-        uni.showToast({ title: '预览图片失败', icon: 'none' })
+        uni.showToast({ title: translate('previewImageFail'), icon: 'none' })
       }
     }
   })
@@ -626,7 +628,7 @@ function handlePreviewVieo(index: number, lists: UploadFileItem[]) {
           imgList: []
         })
       } else {
-        uni.showToast({ title: '预览视频失败', icon: 'none' })
+        uni.showToast({ title: translate('previewVideoFail'), icon: 'none' })
       }
     }
   })

package/components/oxy-verification-code/oxy-verification-code.vue

@@ -14,7 +14,9 @@ export default {
   name: 'oxy-verification-code',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -73,6 +75,10 @@ function randomNum(min: number, max: number) {
   return Math.floor(Math.random() * (max - min) + min)
 }
 
+/**
+ * 生成随机验证码字符串
+ * 根据 codeType 从数字/字母/混合字符集中随机选取指定长度
+ */
 function getcheckCode() {
   let code = ''
   const codeLength = props.codeLength
@@ -93,6 +99,10 @@ function drawTap() {
   }
 }
 
+/**
+ * 获取 Canvas 上下文（兼容微信小程序 2D canvas 和传统 canvas）
+ * 微信小程序通过 SelectorQuery.node 获取，其他平台通过 createCanvasContext
+ */
 function getContext() {
   return new Promise<UniApp.CanvasContext>((resolve) => {
     if (ctx) {
@@ -122,6 +132,10 @@ function getContext() {
   })
 }
 
+/**
+ * 主绘制方法：生成验证码并绘制到 canvas
+ * 包含背景填充、单个字符绘制（随机旋转/颜色/位置/大小）、干扰线绘制
+ */
 function drawPic() {
   if (props.securityCode) {
     identifyCode.value = props.securityCode
@@ -140,6 +154,12 @@ function drawPic() {
   })
 }
 
+/**
+ * 绘制单个验证码字符：随机颜色、字号、位置、旋转角度
+ * @param context - Canvas 上下文
+ * @param txt - 字符
+ * @param i - 字符索引（用于计算 x 坐标）
+ */
 function drawText(context: any, txt: string, i: number) {
   let a = Math.floor(Math.random() * props.colors.length)
   context.setFillStyle(props.colors[a])
@@ -158,6 +178,10 @@ function drawText(context: any, txt: string, i: number) {
   context.translate(-x, -y)
 }
 
+/**
+ * 绘制干扰线：随机起点、终点、颜色
+ * @param context - Canvas 上下文
+ */
 function drawLine(context: any) {
   for (let i = 0; i < props.lineLength; i++) {
     let a = Math.floor(Math.random() * props.lineColors.length)

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

@@ -16,19 +16,24 @@
 
   @include e(video) {
     width: 100%;
-    height: 484rpx;
+    height: $-video-preview-video-height;
     transition: all $-transition-duration-slow ease;
   }
 
-  @include edeep(close) {
+  @include e(close) {
     position: absolute;
-    box-sizing: border-box;
-    top: 0;
-    right: 0;
-    padding: 24rpx;
-    text-align: center;
+    z-index: $-video-preview-close-z-index;
+    top: $-video-preview-close-margin;
+    right: $-video-preview-close-margin;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
+  }
+
+  @include edeep(close-icon) {
     font-size: $-video-preview-close-font-size;
+    line-height: $-video-preview-close-font-size;
     color: $-video-preview-close-color;
   }
 }

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

@@ -0,0 +1,64 @@
+import { inject, provide, ref } from 'vue'
+import type { PreviewVideo, VideoPreview, VideoPreviewOptions } 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
+}

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

@@ -1,20 +1,31 @@
 <template>
-  <view :class="`oxy-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+  <oxy-overlay
+    :show="state.show"
+    :z-index="options.zIndex"
+    :lock-scroll="true"
+    :custom-class="`oxy-video-preview ${props.customClass}`"
+    :custom-style="props.customStyle"
+    @click="close"
+    @enter="handleEnter"
+    @after-leave="handleAfterLeave"
+  >
     <view class="oxy-video-preview__video" @click.stop="">
       <video
         class="oxy-video-preview__video"
-        v-if="previdewVideo.url"
+        v-if="state.visible && previewVideo.url"
         :controls="true"
-        :poster="previdewVideo.poster"
-        :title="previdewVideo.title"
+        :poster="previewVideo.poster"
+        :title="previewVideo.title"
         play-btn-position="center"
         :enableNative="true"
-        :src="previdewVideo.url"
+        :src="previewVideo.url"
         :enable-progress-gesture="false"
       ></video>
     </view>
-    <oxy-icon name="close" :custom-class="`oxy-video-preview__close`" @click="close" />
-  </view>
+    <view class="oxy-video-preview__close" @click.stop="close">
+      <oxy-icon name="close" custom-class="oxy-video-preview__close-icon" />
+    </view>
+  </oxy-overlay>
 </template>
 
 <script lang="ts">
@@ -22,7 +33,9 @@ export default {
   name: 'oxy-video-preview',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -30,43 +43,101 @@ export default {
 
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
-import { nextTick, reactive, ref } from 'vue'
-import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
-import { useLockScroll } from '../composables/useLockScroll'
-defineProps(videoPreviewProps)
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { defaultOptions, getVideoPreviewOptionKey } from './index'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose, type VideoPreviewOptions } from './types'
+import { isDef, isFunction } from '../common/util'
 
-const showPopup = ref<boolean>(false)
-const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+const props = defineProps(videoPreviewProps)
 
-function open(video: PreviewVideo) {
-  showPopup.value = true
-  previdewVideo.url = video.url
-  previdewVideo.poster = video.poster
-  previdewVideo.title = video.title
+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 }
+)
+
+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 close() {
-  showPopup.value = false
-  nextTick(() => {
-    handleClosed()
-  })
+function handleEnter() {
+  state.visible = true
 }
 
-function handleClosed() {
-  previdewVideo.url = ''
-  previdewVideo.poster = ''
-  previdewVideo.title = ''
+function handleAfterLeave() {
+  state.visible = false
+  previewVideo.url = ''
+  previewVideo.poster = ''
+  previewVideo.title = ''
 }
 
-// #ifdef H5
-useLockScroll(() => showPopup.value)
-// #endif
+function open(video: PreviewVideo) {
+  previewVideo.url = video.url
+  previewVideo.poster = video.poster
+  previewVideo.title = video.title
+  state.show = true
+}
+
+function close() {
+  state.show = false
+}
 
 defineExpose<VideoPreviewExpose>({
   open,
   close
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import './index.scss';
 </style>

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

@@ -1,23 +1,69 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps } from '../common/props'
+import { baseProps, makeNumberProp, makeStringProp } from '../common/props'
 
 export const videoPreviewProps = {
-  ...baseProps
+  ...baseProps,
+
+  /**
+   * 区分视频预览实例标识
+   * 类型：string
+   * 默认值：''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 预览层级
+   * 类型：number
+   * 默认值：1000
+   */
+  zIndex: makeNumberProp(1000),
+  /**
+   * 打开回调（优先级低于 useVideoPreview 传入的 onOpen）
+   * 类型：function
+   * 默认值：-
+   */
+  onOpen: Function as PropType<() => void>,
+  /**
+   * 关闭回调（优先级低于 useVideoPreview 传入的 onClose）
+   * 类型：function
+   * 默认值：-
+   */
+  onClose: Function as PropType<() => void>
 }
 
 export type PreviewVideo = {
-  url: string // 视频资源地址
-  poster?: string // 视频封面
-  title?: string // 视频标题
+  /** 视频资源地址 */
+  url: string
+  /** 视频封面地址，默认不展示封面 */
+  poster?: string
+  /** 视频标题，默认空字符串 */
+  title?: string
+}
+
+export interface VideoPreviewOptions extends PreviewVideo {
+  /** 是否显示预览层，默认 false */
+  show?: boolean
+  /** 预览层级，默认 1000 */
+  zIndex?: number
+  /** 打开时回调 */
+  onOpen?: () => void
+  /** 关闭时回调 */
+  onClose?: () => void
+}
+
+export type VideoPreview = {
+  /** 打开视频预览 */
+  previewVideo: (options: VideoPreviewOptions | PreviewVideo) => void
+  /** 关闭视频预览 */
+  closeVideoPreview: () => void
 }
 
 export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
 
 export type VideoPreviewExpose = {
-  // 打开弹框
+  /** 打开预览 */
   open: (video: PreviewVideo) => void
-  // 关闭弹框
+  /** 关闭预览 */
   close: () => void
 }
 
-export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewProps, VideoPreviewExpose>

package/components/oxy-virtual-scroll/index.scss

@@ -30,6 +30,6 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    z-index: 100;
+    z-index: $-virtual-scroll-back-top-z-index;
   }
 }

package/components/oxy-virtual-scroll/oxy-virtual-scroll.vue

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