oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-img-lazy/oxy-img-lazy.vue

@@ -0,0 +1,332 @@
+<template>
+  <view :class="`oxy-img-lazy ${customClass}`" :style="rootStyle">
+    <!-- 加载中 -->
+    <image
+      :src="loadSrc"
+      class="oxy-img-lazy__image oxy-img-lazy__load"
+      @load="init"
+      :show-menu-by-longpress="true"
+      :mode="mode"
+      :style="{
+        opacity: isShow ? '0' : '1',
+        borderRadius,
+        width,
+        height,
+        transition: `opacity ${duration / 1000}s ${effect}`
+      }"
+    />
+
+    <!-- 加载成功 -->
+    <image
+      class="oxy-img-lazy__image"
+      @load="load"
+      @error="error"
+      :show-menu-by-longpress="true"
+      :webp="true"
+      v-if="status === 1"
+      :src="imageSrc"
+      :mode="mode"
+      :style="{
+        opacity: isShow ? '1' : '0',
+        borderRadius,
+        width,
+        height,
+        transition: `opacity ${duration / 1000}s ${effect}`
+      }"
+    />
+    <!-- 加载失败 -->
+    <image
+      class="oxy-img-lazy__image"
+      v-if="status === 2"
+      :show-menu-by-longpress="true"
+      :src="errorSrc"
+      :mode="mode"
+      :style="{
+        opacity: isShow ? '1' : '0',
+        borderRadius,
+        width,
+        height,
+        transition: `opacity ${duration / 1000}s ${effect}`
+      }"
+    />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-img-lazy',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { imgLazyProps } from './types'
+
+const props = defineProps(imgLazyProps)
+const emit = defineEmits(['show', 'load', 'error', 'destroyed'])
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {}
+  if (isDef(props.height)) {
+    style['height'] = addUnit(props.height)
+  }
+  if (isDef(props.width)) {
+    style['width'] = addUnit(props.width)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+// 响应式数据
+const status = ref<number>(0) // 0加载中 1加载成功 2加载失败
+const isShow = ref<boolean>(false)
+const loadTimer = ref<number | null>(null)
+const observer = ref<any>(null)
+const renderCount = ref<number>(0) // 添加渲染计数器
+const lastSrc = ref<string>('') // 记录上一次的src值
+const scrollTimeout = ref<number | null>(null) // 滚动检测定时器
+const retryCount = ref<number>(0) // 重试次数计数器
+const maxRetries = ref<number>(3) // 最大重试次数
+const imageSrc = ref<string>('')
+// 获取当前组件实例
+const instance = getCurrentInstance()
+
+// 重置状态方法
+const resetStatus = () => {
+  status.value = 0
+  isShow.value = false
+  loadTimer.value = null
+}
+
+// 清理资源方法
+const cleanup = () => {
+  if (observer.value) {
+    observer.value.disconnect()
+    observer.value = null
+  }
+  if (loadTimer.value) {
+    clearTimeout(loadTimer.value)
+    loadTimer.value = null
+  }
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
+    scrollTimeout.value = null
+  }
+}
+
+// 开始加载方法
+const startLoad = () => {
+  status.value = 1
+  loadTimer.value = new Date().getTime()
+}
+
+// 图片加载成功
+const load = (event: any) => {
+  const minTimeOut = props.minTimeOut
+
+  if (minTimeOut <= 0) {
+    isShow.value = true
+  } else {
+    // 确保loadTimer存在
+    const timerDiff = loadTimer.value ? new Date().getTime() - loadTimer.value : 0
+
+    if (timerDiff < minTimeOut) {
+      loadTimer.value = setTimeout(() => {
+        isShow.value = true
+        loadTimer.value = null
+      }, minTimeOut - timerDiff) as unknown as number
+    } else {
+      isShow.value = true
+    }
+  }
+
+  setTimeout(() => {
+    emit('load', event)
+  }, props.duration)
+}
+
+// 图片加载失败
+const error = (event: any) => {
+  imageSrc.value = props.errorSrc
+  status.value = 2
+  isShow.value = true
+  cleanup() // 加载失败时清理资源
+  setTimeout(() => {
+    emit('error', event)
+  }, props.duration)
+}
+
+// 初始化懒加载
+const init = async () => {
+  // 确保清理之前的观察者
+  cleanup()
+
+  // 如果没有src，不进行懒加载
+  if (!props.src) return
+
+  // 如果组件已经在视口内，直接开始加载
+  const isInViewport = await isComponentInViewport()
+  if (isInViewport) {
+    startLoad()
+    return
+  }
+
+  try {
+    // 使用组件实例创建IntersectionObserver
+    observer.value = uni.createIntersectionObserver(instance)
+    let load = false
+
+    observer.value.relativeToViewport(props.showDistance).observe('.oxy-img-lazy__load', (res: any) => {
+      if (!load && res.intersectionRatio > 0) {
+        emit('show')
+        load = true
+        startLoad()
+        cleanup()
+      }
+    })
+  } catch (error) {
+    console.error('懒加载初始化失败:', error)
+    // 降级处理：如果IntersectionObserver失败，直接加载
+    startLoad()
+  }
+}
+
+// 检查组件是否在视口内
+const isComponentInViewport = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    try {
+      const query = uni.createSelectorQuery().in(instance)
+      query
+        .select('.oxy-img-lazy__load')
+        .boundingClientRect((rect: any) => {
+          if (rect) {
+            const windowHeight = uni.getSystemInfoSync().windowHeight
+            const windowWidth = uni.getSystemInfoSync().windowWidth
+
+            // 检查是否在可视区域内（考虑滚动容器的偏移）
+            const isInViewport = rect.top < windowHeight && rect.bottom > 0 && rect.left < windowWidth && rect.right > 0
+
+            resolve(isInViewport)
+          } else {
+            resolve(false)
+          }
+        })
+        .exec()
+    } catch (error) {
+      resolve(false)
+    }
+  })
+}
+
+// 监听src变化
+watch(
+  () => props.src,
+  (newSrc, oldSrc) => {
+    // 无论isShow状态如何，都重置加载状态
+    if (newSrc) {
+      imageSrc.value = newSrc
+    }
+    if (newSrc !== oldSrc) {
+      resetStatus()
+      // 如果组件已经可见，直接开始加载
+      if (isShow.value) {
+        startLoad()
+      } else {
+        // 重新初始化懒加载观察者
+        nextTick(() => {
+          init()
+        })
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 添加一个强制刷新方法
+const forceRefresh = () => {
+  resetStatus()
+  cleanup()
+  nextTick(() => {
+    init()
+  })
+}
+
+// 检查是否需要重新初始化
+const checkAndReinit = () => {
+  // 如果src发生变化，或者这是第一次渲染，则重新初始化
+  if (props.src !== lastSrc.value || renderCount.value === 0) {
+    lastSrc.value = props.src || ''
+    resetStatus()
+    nextTick(() => {
+      init()
+    })
+  }
+  renderCount.value++
+}
+
+// 滚动检测和手动触发机制
+const setupScrollDetection = () => {
+  // 监听页面滚动事件
+  uni.$on('pageScroll', () => {
+    if (scrollTimeout.value) {
+      clearTimeout(scrollTimeout.value)
+    }
+
+    // 防抖处理，滚动停止后检测可见性
+    scrollTimeout.value = setTimeout(() => {
+      checkVisibilityOnScroll()
+    }, 300) as unknown as number
+  })
+}
+
+// 滚动时检查可见性
+const checkVisibilityOnScroll = async () => {
+  if (status.value === 0) {
+    // 只有在未加载状态下检查
+    const isInViewport = await isComponentInViewport()
+    if (isInViewport) {
+      startLoad()
+      cleanup() // 清理观察器
+    }
+  }
+}
+
+// 手动触发加载（用于scroll-view和swiper等特殊情况）
+const manualTriggerLoad = () => {
+  if (status.value === 0) {
+    startLoad()
+    cleanup()
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  forceRefresh,
+  manualTriggerLoad
+})
+
+// 组件挂载后初始化
+onMounted(() => {
+  // 增加渲染计数并检查是否需要重新初始化
+  checkAndReinit()
+  // 设置滚动检测
+  setupScrollDetection()
+})
+
+// 组件销毁前清理资源
+onBeforeUnmount(() => {
+  cleanup()
+  emit('destroyed')
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-img-lazy/types.ts

@@ -0,0 +1,69 @@
+import { baseProps, makeNumberProp, makeStringProp, numericProp } from '../common/props'
+export type ImageMode =
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'heightFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right'
+
+export type ImageEffect = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
+
+export const imgLazyProps = {
+  ...baseProps,
+  /**
+   * 图片链接
+   */
+  src: String,
+  /**
+   * 填充模式：'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill'
+   */
+  mode: makeStringProp<ImageMode>('aspectFill'),
+  /**
+   * 宽度，默认单位为px
+   */
+  width: numericProp,
+  /**
+   * 高度，默认单位为px
+   */
+  height: numericProp,
+  /**
+   * 圆角大小，默认单位为px
+   */
+  borderRadius: makeStringProp('0'),
+  /**
+   * 懒加载延迟时间
+   */
+  minTimeOut: makeNumberProp(0),
+  /**
+   * 图片提前加载的距离阈值
+   */
+  showDistance: {
+    type: Object,
+    default: () => ({ bottom: 20 })
+  },
+  /**
+   * 图片懒加载时的视觉过渡效果
+   */
+  effect: makeStringProp<ImageEffect>('linear'),
+  /**
+   * 图片懒加载时的视觉过渡时间
+   */
+  duration: makeNumberProp(0),
+  /**
+   * 加载中时显示的图片链接
+   */
+  loadSrc: makeStringProp(''),
+  /**
+   * 加载失败时显示的图片链接
+   */
+  errorSrc: makeStringProp('')
+}

package/components/oxy-link/index.scss

@@ -0,0 +1,57 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(link) {
+  display: inline-block;
+  @include e(medium) {
+    font-size: $-link-font-size-medium;
+  }
+
+  @include e(small) {
+    font-size: $-link-font-size-small;
+  }
+
+  @include e(large) {
+    font-size: $-link-font-size-large;
+  }
+
+  @include e(icon) {
+    display: inline-block;
+  }
+
+  @include when(underline) {
+    text-decoration: underline;
+  }
+
+  @include when(default) {
+    color: $-link-info-color;
+  }
+
+  @include when(primary) {
+    color: $-link-primary-color;
+  }
+
+  @include when(error) {
+    color: $-link-error-color;
+  }
+
+  @include when(warning) {
+    color: $-link-warning-color;
+  }
+
+  @include when(success) {
+    color: $-link-success-color;
+  }
+
+  @include when(disabled) {
+    opacity: .6;
+  }
+
+  &__prefix-icon:not(:empty) + &__content:not(:empty) {
+	    padding-left: 4px;
+	}
+
+	&__content:not(:empty) + &__suffix-icon:not(:empty) {
+	    padding-left: 4px;
+	}
+}

package/components/oxy-link/oxy-link.vue

@@ -0,0 +1,130 @@
+<template>
+  <navigator
+    :class="rootClass"
+    :style="rootStyle"
+    :url="!disabled ? navigatorProps?.['url'] || url : ''"
+    :target="navigatorProps?.['target']"
+    :open-type="navigatorProps?.['openType'] || openType"
+    :delta="navigatorProps?.['delta']"
+    :app-id="navigatorProps?.['appId']"
+    :path="navigatorProps?.['path']"
+    :extra-data="navigatorProps?.['extraData']"
+    :version="navigatorProps?.['version']"
+    :short-link="navigatorProps?.['shortLink']"
+    :hover-class="hover && !disabled ? 'oxy-link__hover' : ''"
+    :hover-stop-propagation="navigatorProps?.['hoverStopPropagation']"
+    :hover-start-time="navigatorProps?.['hoverStartTime']"
+    :hover-stay-time="navigatorProps?.['hoverStayTime']"
+    @click="handleClick"
+  >
+    <slot name="prefix-icon">
+      <view class="oxy-link__icon oxy-link__prefix-icon" v-if="prefixIcon">
+        <oxy-icon :size="fontSize" :color="color" :name="prefixIcon"></oxy-icon>
+      </view>
+    </slot>
+    <text class="oxy-link__content" ref="textRef">
+      <slot>{{ content }}</slot>
+    </text>
+    <slot name="suffix-icon">
+      <view class="oxy-link__icon oxy-link__suffix-icon" v-if="suffixIcon">
+        <oxy-icon :size="fontSize" :color="color" :name="suffixIcon"></oxy-icon>
+      </view>
+    </slot>
+  </navigator>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-link',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { objToStyle } from '../common/util'
+import { linkProps } from './types'
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(linkProps)
+const emit = defineEmits(['click', 'success', 'fail', 'complete'])
+
+// 存储超链接类名的响应式变量
+const linkClass = ref<string>('')
+const fontSize = computed<string>(() => {
+  if (!['small', 'medium', 'large'].includes(props.size)) {
+    return props.size
+  }
+  return ''
+})
+
+// 监听 props 变化，合并 watch 逻辑
+watch(
+  () => ({
+    size: props.size,
+    type: props.type,
+    disabled: props.disabled,
+    underline: props.underline
+  }),
+  ({ type }) => {
+    // 验证 type 属性
+    const types = ['primary', 'danger', 'warning', 'success', 'default']
+    if (type && !types.includes(type)) {
+      console.error(`type must be one of ${types.toString()}`)
+    }
+    computeLinkClass()
+  },
+  { deep: true, immediate: true }
+)
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `oxy-link ${props.customClass} ${linkClass.value}`
+})
+
+// 计算根元素的样式
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.color) {
+    rootStyle['color'] = props.color
+  }
+  if (fontSize.value) {
+    rootStyle['font-size'] = fontSize.value
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+// 计算超链接类名的函数
+function computeLinkClass() {
+  const { size, type, disabled, underline } = props
+  const linkClassList: string[] = []
+  size && linkClassList.push(`oxy-link__${size}`)
+  type && linkClassList.push(`is-${type}`)
+  disabled && linkClassList.push('is-disabled')
+  underline && linkClassList.push('is-underline')
+  linkClass.value = linkClassList.join(' ')
+}
+
+function handleClick(event: Event) {
+  if (!props.url && props.href) {
+    // #ifdef APP-PLUS
+    plus.runtime.openURL(props.href)
+    // #endif
+    // #ifdef H5
+    window.open(props.href)
+    // #endif
+    // #ifdef MP
+    uni.setClipboardData({ data: props.href })
+    // #endif
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-link/types.ts

@@ -0,0 +1,81 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type OpenType = 'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack' | 'exit'
+export type LinkType = 'default' | 'primary' | 'error' | 'warning' | 'success'
+export type SizeEnum = 'small' | 'medium' | 'large'
+
+export const linkProps = {
+  ...baseProps,
+  /**
+   * 应用内跳转的链接
+   */
+  url: makeStringProp(''),
+  /**
+   * 应用外跳转的链接
+   */
+  href: makeStringProp(''),
+  /**
+   * 跳转方式
+   */
+  openType: makeStringProp<OpenType>('navigate'),
+  /**
+   * 链接内容
+   * 类型：string
+   */
+  content: makeStringProp(''),
+  /**
+   * 是否禁用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否开启点击反馈
+   * 类型：boolean
+   * 默认值：false
+   */
+  hover: makeBooleanProp(false),
+  /**
+   * 是否显示链接下划线
+   * 类型：boolean
+   * 默认值：false
+   */
+  underline: makeBooleanProp(false),
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<LinkType>('default'),
+  /**
+   * 字体大小
+   * 类型：string
+   * 默认值：'空字符串'
+   */
+  size: makeStringProp<SizeEnum>('medium'),
+  /**
+   * 文本颜色
+   * 类型：string
+   * 默认值：''
+   */
+  color: makeStringProp(''),
+  /**
+   * 前置图标
+   */
+  prefixIcon: makeStringProp(''),
+  /**
+   * 后置图标
+   */
+  suffixIcon: makeStringProp(''),
+  /**
+   * 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格
+   */
+  navigatorProps: {
+    type: Object,
+    default: null
+  }
+}
+
+export type LinkProps = ExtractPropTypes<typeof linkProps>

package/components/oxy-list/index.scss

@@ -1,4 +1,11 @@
 @import './../common/abstracts/_mixin.scss';
 @import './../common/abstracts/variable.scss';
+@import './../oxy-virtual-scroll/index.scss';
+
 @include b(list) {
-}
+  :deep(.oxy-loadmore) {
+    .oxy-divider {
+      margin: 0
+    }
+  }
+}