oxy-uni-ui 1.2.0 → 2.0.0

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 { withDefaultUnit, 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'] = withDefaultUnit(props.height)
+  }
+  if (isDef(props.width)) {
+    style['width'] = withDefaultUnit(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'),
+  /**
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
+   */
+  width: numericProp,
+  /**
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
+   */
+  height: numericProp,
+  /**
+   * 圆角大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
+   */
+  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-index-anchor/index.scss

@@ -22,8 +22,8 @@
 
 @include b(index-anchor) {
   background-color: $-color-gray-2;
-  padding: 10px;
-  font-size: 14px;
+  padding: 20rpx;
+  font-size: 28rpx;
   color: $-color-title;
 
   @include when(sticky){

package/components/oxy-index-anchor/oxy-index-anchor.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import { indexAnchorProps } from './type'
+import { indexAnchorProps } from './types'
 import { onMounted, getCurrentInstance, ref, computed } from 'vue'
-import { indexBarInjectionKey } from '../oxy-index-bar/type'
+import { indexBarInjectionKey } from '../oxy-index-bar/types'
 import { getRect, isDef, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 

package/components/oxy-index-anchor/{type.ts → types.ts}

@@ -3,6 +3,9 @@ import { baseProps, makeRequiredProp } from '../common/props'
 
 export const indexAnchorProps = {
   ...baseProps,
+  /**
+   * 索引项标识，可用于字母索引或数字索引
+   */
   index: makeRequiredProp([String, Number])
 }
 

package/components/oxy-index-bar/index.scss

@@ -22,15 +22,15 @@
   @include e(sidebar) {
     position: absolute;
     top: 50%;
-    right: 4px;
+    right: 8rpx;
     transform: translateY(-50%);
   }
 
   @include e(index) {
-    font-size: 12px;
+    font-size: 24rpx;
     font-weight: $-fw-medium;
     color: $-color-title;
-    padding: 4px 6px;
+    padding: 8rpx 12rpx;
 
     @include when(active) {
       color: $-color-theme;

package/components/oxy-index-bar/oxy-index-bar.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AnchorIndex } from './type'
-import { indexBarInjectionKey, indexBarProps } from './type'
+import type { AnchorIndex } from './types'
+import { indexBarInjectionKey, indexBarProps } from './types'
 import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
 import { getRect, isDef, uuid, pause } from '../common/util'
 import { useChildren } from '../composables/useChildren'
@@ -71,7 +71,7 @@ let offsetTop = 0
 let sidebarInfo = {
   // 侧边栏距离顶部的高度
   offsetTop: 0,
-  // 高度固定24px
+  // 高度固定48rpx
   indexHeight: 24
 }
 

package/components/oxy-index-bar/{type.ts → types.ts}

@@ -6,7 +6,7 @@ export type AnchorIndex = number | string
 
 export const indexBarProps = {
   /**
-   * @description 索引是否吸顶
+   * 索引栏是否启用吸顶效果
    */
   sticky: makeBooleanProp(false)
 }
@@ -16,7 +16,7 @@ export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
 export type InderBarProvide = {
   props: { sticky?: boolean }
   anchorState: {
-    activeIndex: AnchorIndex | null // 当前激活的索引
+    activeIndex: AnchorIndex | null
   }
 }
 

package/components/oxy-input/index.scss

@@ -301,7 +301,7 @@
   }
 
   @include e(count) {
-    margin-left: 15px;
+    margin-left: 30rpx;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;

package/components/oxy-input-number/index.scss

@@ -45,8 +45,8 @@
     &::after {
       position: absolute;
       content: "";
-      width: calc(200% - 2px);
-      height: calc(200% - 2px);
+      width: calc(200% - 4rpx);
+      height: calc(200% - 4rpx);
       left: 0;
       top: 0;
       border: 1px solid $-input-number-border-color;
@@ -77,7 +77,7 @@
     display: block;
     width: $-input-number-input-width;
     height: $-input-number-height;
-    padding: 0 2px;
+    padding: 0 4rpx;
     box-sizing: border-box;
     z-index: 1;
     background: transparent;
@@ -93,7 +93,7 @@
   @include e(input-border) {
     position: absolute;
     width: 100%;
-    height: calc(200% - 2px);
+    height: calc(200% - 4rpx);
     left: 0;
     top: 0;
     border-top: 1px solid $-input-number-border-color;
@@ -129,4 +129,4 @@
       border-left: none;
     }
   }
-}
+}

package/components/oxy-input-number/oxy-input-number.vue

@@ -13,7 +13,7 @@
     <view v-if="!withoutInput" class="oxy-input-number__inner" @click.stop="">
       <input
         class="oxy-input-number__input"
-        :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
+        :style="`${inputWidth ? 'width: ' + withDefaultUnit(inputWidth) : ''}`"
         :type="inputType"
         :input-mode="precision ? 'decimal' : 'numeric'"
         :disabled="disabled || disableInput"
@@ -52,7 +52,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { isDef, isEqual } from '../common/util'
+import { isDef, isEqual, withDefaultUnit } from '../common/util'
 import { inputNumberProps, type OperationType } from './types'
 import { callInterceptor } from '../common/interceptor'
 

package/components/oxy-input-number/types.ts

@@ -57,9 +57,10 @@ export const inputNumberProps = {
    */
   withoutInput: makeBooleanProp(false),
   /**
-   * 输入框宽度
+   * 输入框宽度。
+   * number 或纯数字字符串默认按 rpx 处理，支持传入带单位字符串（如 `px`、`rpx`、`%`）。
    */
-  inputWidth: makeNumericProp(36),
+  inputWidth: makeNumericProp(72),
   /**
    * 是否允许为空
    */

package/components/oxy-keyboard/index.scss

@@ -18,7 +18,7 @@
   user-select: none;
 
   @include m(with-title) {
-    border-radius: 20px 20px 0 0;
+    border-radius: 40rpx 40rpx 0 0;
   }
 
   @include e(header) {
@@ -28,7 +28,7 @@
     justify-content: center;
     box-sizing: content-box;
     height: $-keyboard-title-height;
-    padding-top: 6px;
+    padding-top: 12rpx;
     color: $-keyboard-title-color;
     font-size: $-keyboard-title-font-size;
   }
@@ -45,7 +45,7 @@
 
   @include e(body) {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: 12rpx 0 0 12rpx;
   }
 
   @include e(keys) {
@@ -57,7 +57,7 @@
   &-car {
     @include e(body) {
       display: flex;
-      padding: 6px 0 0 6px;
+      padding: 12rpx 0 0 12rpx;
     }
   }
 
@@ -68,7 +68,7 @@
       flex-wrap: wrap;
 
       .oxy-key-wrapper {
-        --oxy-keyboard-key-font-size: 18px;
+        --oxy-keyboard-key-font-size: 36rpx;
         flex-basis: 10%;
 
         @include m(wider) {

package/components/oxy-keyboard/key/index.scss

@@ -21,7 +21,7 @@
   flex: 1;
   flex-basis: 33%;
   box-sizing: border-box;
-  padding: 0 6px 6px 0;
+  padding: 0 12rpx 12rpx 0;
 
   @include m(wider) {
     flex-basis: 66%;
@@ -45,8 +45,8 @@
   @include m(large) {
     position: absolute;
     top: 0;
-    right: 6px;
-    bottom: 6px;
+    right: 12rpx;
+    bottom: 12rpx;
     left: 0;
     height: auto;
   }

package/components/oxy-keyboard/key/index.vue

@@ -11,13 +11,13 @@
         <template v-if="text">
           {{ text }}
         </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-delete" size="22px"></oxy-icon>
+        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-delete" size="44rpx"></oxy-icon>
       </template>
       <template v-else-if="type === 'extra'">
         <template v-if="text">
           {{ text }}
         </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-collapse" size="22px"></oxy-icon>
+        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-collapse" size="44rpx"></oxy-icon>
       </template>
       <template v-else>{{ text }}</template>
     </view>

package/components/oxy-keyboard/key/types.ts

@@ -3,9 +3,24 @@ import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/p
 export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
 
 export const keyProps = {
+  /**
+   * 按键类型
+   */
   type: makeStringProp<NumberKeyType>(''),
+  /**
+   * 按键显示文本
+   */
   text: makeNumericProp(''),
+  /**
+   * 是否为加宽按键
+   */
   wider: makeBooleanProp(false),
+  /**
+   * 是否为大号按键
+   */
   large: makeBooleanProp(false),
+  /**
+   * 是否显示加载状态
+   */
   loading: makeBooleanProp(false)
 }

package/components/oxy-keyboard/oxy-keyboard.vue

@@ -3,6 +3,7 @@
     v-model="show"
     position="bottom"
     :z-index="zIndex"
+    :max-width="popupMaxWidth"
     :safe-area-inset-bottom="safeAreaInsetBottom"
     :modal-style="modal ? '' : 'opacity: 0;'"
     :modal="hideOnClickOutside"