oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-stream-render/oxy-stream-render.vue

@@ -20,7 +20,10 @@ export default {
   },
   data() {
     return {
-      requestTask: null
+      requestTask: null,
+      mpTextDecoder: null,
+      mpUtf8Pending: null,
+      pendingText: ''
     }
   },
   watch: {
@@ -34,10 +37,224 @@ export default {
     }
   },
   methods: {
+    stripSseFields(input) {
+      return input
+        .replace(/\r/g, '')
+        .split('\n')
+        .map((line) => {
+          if (line.startsWith('data:')) return line.slice(5).trimStart()
+          return line
+        })
+        .join('\n')
+    },
+    extractJsonObjects(input) {
+      const texts = []
+      let start = -1
+      let depth = 0
+      let inString = false
+      let escape = false
+
+      for (let i = 0; i < input.length; i++) {
+        const ch = input[i]
+        if (escape) {
+          escape = false
+          continue
+        }
+
+        if (inString) {
+          if (ch === '\\') escape = true
+          else if (ch === '"') inString = false
+          continue
+        }
+
+        if (ch === '"') {
+          inString = true
+          continue
+        }
+
+        if (ch === '{') {
+          if (depth === 0) start = i
+          depth++
+          continue
+        }
+
+        if (ch === '}') {
+          if (depth > 0) depth--
+          if (depth === 0 && start !== -1) {
+            texts.push(input.slice(start, i + 1))
+            start = -1
+          }
+        }
+      }
+
+      const rest = start !== -1 ? input.slice(start) : ''
+      return { texts, rest }
+    },
+    emitParsedStreamData({ chunk, finished }) {
+      if (finished) {
+        if (this.pendingText) {
+          const normalized = this.stripSseFields(this.pendingText)
+          const { texts, rest } = this.extractJsonObjects(normalized)
+          texts.forEach((text) => {
+            this.$emit('stream-data', { chunk: text, finished: false })
+          })
+          this.pendingText = rest
+        }
+        this.pendingText = ''
+        this.$emit('stream-data', { chunk: null, finished: true })
+        return
+      }
+
+      if (!chunk) return
+
+      this.pendingText += chunk
+      const normalized = this.stripSseFields(this.pendingText)
+      const { texts, rest } = this.extractJsonObjects(normalized)
+      texts.forEach((text) => {
+        this.$emit('stream-data', { chunk: text, finished: false })
+      })
+      this.pendingText = rest
+    },
+    mergeUint8Array(a, b) {
+      const merged = new Uint8Array(a.length + b.length)
+      merged.set(a, 0)
+      merged.set(b, a.length)
+      return merged
+    },
+    splitIncompleteUtf8(bytes) {
+      const len = bytes.length
+      if (len === 0) {
+        return { complete: bytes, pending: null }
+      }
+
+      let i = len
+      let cont = 0
+      while (i > 0 && cont < 3 && (bytes[i - 1] & 0xc0) === 0x80) {
+        cont++
+        i--
+      }
+
+      const leadIndex = i - 1
+      if (leadIndex < 0) {
+        return { complete: new Uint8Array(0), pending: bytes }
+      }
+
+      const lead = bytes[leadIndex]
+      let expected = 1
+      if ((lead & 0x80) === 0x00) expected = 1
+      else if ((lead & 0xe0) === 0xc0) expected = 2
+      else if ((lead & 0xf0) === 0xe0) expected = 3
+      else if ((lead & 0xf8) === 0xf0) expected = 4
+      else expected = 1
+
+      const actual = len - leadIndex
+      if (expected > actual) {
+        return {
+          complete: bytes.slice(0, leadIndex),
+          pending: bytes.slice(leadIndex)
+        }
+      }
+
+      return { complete: bytes, pending: null }
+    },
+    utf8Decode(bytes) {
+      let out = ''
+      for (let i = 0; i < bytes.length; i++) {
+        const b0 = bytes[i]
+        if (b0 < 0x80) {
+          out += String.fromCharCode(b0)
+          continue
+        }
+
+        if ((b0 & 0xe0) === 0xc0) {
+          if (i + 1 >= bytes.length) {
+            out += '\uFFFD'
+            break
+          }
+          const b1 = bytes[++i]
+          if ((b1 & 0xc0) !== 0x80) {
+            out += '\uFFFD'
+            continue
+          }
+          const code = ((b0 & 0x1f) << 6) | (b1 & 0x3f)
+          out += String.fromCharCode(code)
+          continue
+        }
+
+        if ((b0 & 0xf0) === 0xe0) {
+          if (i + 2 >= bytes.length) {
+            out += '\uFFFD'
+            break
+          }
+          const b1 = bytes[++i]
+          const b2 = bytes[++i]
+          if ((b1 & 0xc0) !== 0x80 || (b2 & 0xc0) !== 0x80) {
+            out += '\uFFFD'
+            continue
+          }
+          const code = ((b0 & 0x0f) << 12) | ((b1 & 0x3f) << 6) | (b2 & 0x3f)
+          out += String.fromCharCode(code)
+          continue
+        }
+
+        if ((b0 & 0xf8) === 0xf0) {
+          if (i + 3 >= bytes.length) {
+            out += '\uFFFD'
+            break
+          }
+          const b1 = bytes[++i]
+          const b2 = bytes[++i]
+          const b3 = bytes[++i]
+          if ((b1 & 0xc0) !== 0x80 || (b2 & 0xc0) !== 0x80 || (b3 & 0xc0) !== 0x80) {
+            out += '\uFFFD'
+            continue
+          }
+          let codePoint = ((b0 & 0x07) << 18) | ((b1 & 0x3f) << 12) | ((b2 & 0x3f) << 6) | (b3 & 0x3f)
+          codePoint -= 0x10000
+          out += String.fromCharCode(0xd800 + (codePoint >> 10), 0xdc00 + (codePoint & 0x3ff))
+          continue
+        }
+
+        out += '\uFFFD'
+      }
+      return out
+    },
+    decodeMpChunk(data, finished) {
+      if (finished) {
+        let tail = null
+        if (this.mpTextDecoder) {
+          try {
+            tail = this.mpTextDecoder.decode()
+          } catch (e) {
+            tail = null
+          }
+        } else if (this.mpUtf8Pending && this.mpUtf8Pending.length) {
+          tail = this.utf8Decode(this.mpUtf8Pending)
+        }
+        this.mpTextDecoder = null
+        this.mpUtf8Pending = null
+        return tail && tail.length ? tail : null
+      }
+
+      let bytes
+      if (data instanceof Uint8Array) bytes = data
+      else if (data instanceof ArrayBuffer) bytes = new Uint8Array(data)
+      else bytes = new Uint8Array(data)
+
+      if (this.mpUtf8Pending && this.mpUtf8Pending.length) {
+        bytes = this.mergeUint8Array(this.mpUtf8Pending, bytes)
+        this.mpUtf8Pending = null
+      }
+
+      const { complete, pending } = this.splitIncompleteUtf8(bytes)
+      this.mpUtf8Pending = pending
+      return this.utf8Decode(complete)
+    },
     handleAppStreamData({ chunk, finished }) {
-      this.$emit('stream-data', { chunk, finished })
+      this.emitParsedStreamData({ chunk, finished })
     },
     handleAppStreamError({ message, type }) {
+      this.pendingText = ''
       this.$emit('stream-error', { message, type })
     },
     // #ifndef H5 || APP-PLUS
@@ -47,6 +264,7 @@ export default {
           this.requestTask.abort()
           this.requestTask = null
         }
+        this.decodeMpChunk(new Uint8Array(0), true)
         this.handleAppStreamData({
           chunk: null,
           finished: true
@@ -62,6 +280,7 @@ export default {
         this.requestTask.abort()
         this.requestTask = null
       }
+      this.decodeMpChunk(new Uint8Array(0), true)
 
       const { url, method, headers, body } = newVal
 
@@ -72,6 +291,13 @@ export default {
         data: body,
         enableChunked: true,
         success: (res) => {
+          const tail = this.decodeMpChunk(new Uint8Array(0), true)
+          if (tail) {
+            this.handleAppStreamData({
+              chunk: tail,
+              finished: false
+            })
+          }
           this.handleAppStreamData({
             chunk: null,
             finished: true
@@ -79,6 +305,7 @@ export default {
           this.requestTask = null
         },
         fail: (err) => {
+          this.decodeMpChunk(new Uint8Array(0), true)
           this.handleAppStreamError({
             message: err.errMsg || 'Request failed',
             type: err.errMsg === 'request:fail abort' ? 'AbortError' : 'Error'
@@ -88,8 +315,7 @@ export default {
       })
       // 这里监听消息
       this.requestTask.onChunkReceived((res) => {
-        let decoder = new TextDecoder('utf-8')
-        let chunk = decoder.decode(new Uint8Array(res.data))
+        const chunk = this.decodeMpChunk(res.data, false)
         this.handleAppStreamData({
           chunk,
           finished: false

package/components/oxy-stream-render/types.ts

@@ -1,5 +1,8 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 
+/**
+ * 流式渲染组件属性
+ */
 export const streamRenderProps = {}
 
 export type StreamRenderProps = ExtractPropTypes<typeof streamRenderProps>

package/components/oxy-swipe-action/oxy-swipe-action.vue

@@ -39,7 +39,7 @@ import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted,
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { useTouch } from '../composables/useTouch'
-import { getRect } from '../common/util'
+import { getRect, unitConvert } from '../common/util'
 import { swipeActionProps, type SwipeActionPosition, type SwipeActionReason, type SwipeActionStatus } from './types'
 
 const props = defineProps(swipeActionProps)
@@ -55,6 +55,10 @@ const originOffset = ref<number>(0)
 const wrapperOffset = ref<number>(0)
 // 是否处于滑动状态
 const touching = ref<boolean>(false)
+// 标记本次触摸周期是否发生过横向滑动，用于抑制触摸后的合成 click
+const swiping = ref<boolean>(false)
+// 拖拽计算版本号，避免异步获取宽度结果乱序导致位移回退
+const dragVersion = ref<number>(0)
 
 const touch = useTouch()
 
@@ -139,7 +143,7 @@ function getWidths() {
  */
 function swipeMove(offset = 0) {
   // this.offset = offset
-  const transform = `translate3d(${offset}px, 0, 0)`
+  const transform = `translate3d(${unitConvert(offset, 0, { output: 'px' })}, 0, 0)`
   // 跟随手指滑动，不需要动画
   const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
   wrapperStyle.value = `
@@ -156,6 +160,11 @@ function swipeMove(offset = 0) {
  * @param event
  */
 function onClick(position?: SwipeActionPosition) {
+  if (swiping.value) {
+    swiping.value = false
+    return
+  }
+
   if (props.disabled || wrapperOffset.value === 0) {
     return
   }
@@ -172,6 +181,8 @@ function onClick(position?: SwipeActionPosition) {
 function startDrag(event: TouchEvent) {
   if (props.disabled) return
 
+  dragVersion.value += 1
+  swiping.value = false
   originOffset.value = wrapperOffset.value
   touch.touchStart(event)
   if (queue && queue.closeOther) {
@@ -196,10 +207,17 @@ function onDrag(event: TouchEvent) {
   }
 
   touching.value = true
+  swiping.value = true
+  const currentDragVersion = ++dragVersion.value
 
   // 本次滑动，wrapper应该设置的偏移量
   const offset = originOffset.value + touch.deltaX.value
   getWidths().then(([leftWidth, rightWidth]) => {
+    // 忽略过期的拖拽帧，避免异步返回顺序打乱造成回弹
+    if (!touching.value || currentDragVersion !== dragVersion.value) {
+      return
+    }
+
     // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
     if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
       swipeMove(0)
@@ -224,6 +242,7 @@ function endDrag() {
   // 滑出"操作按钮"的阈值
   const THRESHOLD = 0.3
   touching.value = false
+  dragVersion.value += 1
 
   getWidths().then(([leftWidth, rightWidth]) => {
     if (
@@ -261,6 +280,12 @@ function endDrag() {
       close('swipe')
     }
   })
+
+  if (swiping.value) {
+    setTimeout(() => {
+      swiping.value = false
+    }, 0)
+  }
 }
 /**
  * @description 关闭操过按钮，并在合适的时候调用 beforeClose

package/components/oxy-swiper/oxy-swiper.vue

@@ -14,11 +14,11 @@
         :circular="loop"
         :vertical="direction == 'vertical'"
         :easing-function="easingFunction"
-        :previous-margin="addUnit(previousMargin)"
-        :next-margin="addUnit(nextMargin)"
+        :previous-margin="withDefaultUnit(previousMargin)"
+        :next-margin="withDefaultUnit(nextMargin)"
         :snap-to-edge="snapToEdge"
         :display-multiple-items="displayMultipleItems"
-        :style="{ height: addUnit(height) }"
+        :style="{ height: withDefaultUnit(height) }"
         @change="handleChange"
         @animationfinish="handleAnimationfinish"
       >
@@ -27,7 +27,7 @@
             <video
               v-if="isVideo(item)"
               :id="`video-${index}-${uid}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :src="isObj(item) ? item[valueKey] : item"
               :poster="isObj(item) ? item.poster : ''"
               :class="`oxy-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@@ -44,7 +44,7 @@
               v-else
               :src="isObj(item) ? item[valueKey] : item"
               :class="`oxy-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :mode="imageMode"
               @click="handleClick(index, item)"
             />
@@ -89,7 +89,7 @@ export default {
 <script lang="ts" setup>
 import OxySwiperNav from '../oxy-swiper-nav/oxy-swiper-nav.vue'
 import { computed, watch, ref, getCurrentInstance, useSlots } from 'vue'
-import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
+import { withDefaultUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../oxy-swiper-nav/types'
 const slots = useSlots()

package/components/oxy-swiper/types.ts

@@ -86,10 +86,10 @@ export const swiperProps = {
 
   /**
    * 轮播的高度
-   * 类型：number 或 string（数字或可转换为数字的字符串）
-   * 默认值：'192'
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
+   * 默认值：'384'
    */
-  height: makeNumericProp('192'),
+  height: makeNumericProp('384'),
 
   /**
    * 轮播间隔时间，单位为毫秒
@@ -131,7 +131,7 @@ export const swiperProps = {
 
   /**
    * 后边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   nextMargin: makeNumericProp('0'),
@@ -144,7 +144,7 @@ export const swiperProps = {
   indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
   /**
    * 前边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   previousMargin: makeNumericProp('0'),

package/components/oxy-swiper-nav/index.scss

@@ -69,11 +69,11 @@
       height: $-swiper-nav-dot-size;
       background: $-swiper-nav-dot-color;
       border-radius: 50%;
-      margin: 0 10rpx;
+      margin: 0 12rpx;
       transition: all 0.4s ease-in;
 
       @include when(vertical) {
-        margin: 10rpx 0;
+        margin: 12rpx 0;
       }
 
       @include when(active) {
@@ -156,4 +156,4 @@
     flex-direction: column;
   }
 
-}
+}

package/components/oxy-switch/index.scss

@@ -24,22 +24,22 @@
     display: inline-block;
     width: $-switch-circle-size;
     height: $-switch-circle-size;
-    top: 2px;
-    left: 2px;
-    background: #fff;
+    top: 4rpx;
+    left: 4rpx;
+    background: $-switch-circle-bg;
     border-radius: 50%;
     transition: left .3s ease-out;
-    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+    box-shadow: 0 4rpx 8rpx 0 $-switch-inactive-shadow-color;
 
     &::after {
       position: absolute;
       content: '';
-      width: calc(200% - 2px);
-      height: calc(200% - 2px);
+      width: calc(200% - 4rpx);
+      height: calc(200% - 4rpx);
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0.5);
-      border: 1px solid $-switch-border-color;
+      border: 2rpx solid $-switch-border-color;
       border-radius: 50%;
     }
   }
@@ -48,11 +48,11 @@
     border-color: $-switch-active-color;
 
     .oxy-switch__circle {
-      left: calc($-switch-width - $-switch-circle-size - 2px);
-      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+      left: calc($-switch-width - $-switch-circle-size - 4rpx);
+      box-shadow: 0 4rpx 8rpx 0 $-switch-active-shadow-color
     }
   }
   @include when(disabled) {
     opacity: 0.5;
   }
-}
+}

package/components/oxy-switch/oxy-switch.vue

@@ -16,7 +16,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, type CSSProperties, onBeforeMount } from 'vue'
-import { addUnit, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isFunction, objToStyle } from '../common/util'
 import { switchProps } from './types'
 
 const props = defineProps(switchProps)
@@ -32,7 +32,7 @@ const rootStyle = computed(() => {
     'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
   }
   if (props.size) {
-    rootStyle['font-size'] = addUnit(props.size)
+    rootStyle['font-size'] = withDefaultUnit(props.size)
   }
   return `${objToStyle(rootStyle)}${props.customStyle}`
 })

package/components/oxy-switch/types.ts

@@ -45,7 +45,7 @@ export const switchProps = {
    */
   inactiveColor: String,
   /**
-   * 大小
+   * 大小，number 类型按 `rpx` 语义处理
    */
   size: {
     type: numericProp

package/components/oxy-tab/index.scss

@@ -13,4 +13,14 @@
       transition: height 0.3s ease-in-out;
     }
   }
-}
+}
+
+.is-fullscreen {
+  .oxy-tab {
+    height: 100%;
+    overflow: hidden;
+    .oxy-tab__body {
+      height: 100%;
+    }
+  }
+}

package/components/oxy-tabbar/index.scss

@@ -24,7 +24,7 @@
   @include m(round) {
     margin-left: 32rpx;
     margin-right: 32rpx;
-    border-radius: 999px;
+    border-radius: $-tabbar-round-radius;
     box-shadow: $-tabbar-box-shadow;
 
     @include when(fixed) {
@@ -59,4 +59,4 @@
     right: 0;
     z-index: 500;
   }
-}
+}

package/components/oxy-tabbar/oxy-tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="placeholderStyle">
     <view
       :class="`oxy-tabbar oxy-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
         bordered ? 'is-border' : ''
@@ -23,14 +23,15 @@ export default {
 <script lang="ts" setup>
 import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
 import type { TabbarItem } from '../oxy-tabbar-item/types'
-import { addUnit, getRect, isDef, objToStyle } from '../common/util'
+import { getRect, isDef, objToStyle } from '../common/util'
 import { useChildren } from '../composables/useChildren'
+import { useWindowResize } from '../composables/useWindowResize'
 import { TABBAR_KEY, tabbarProps } from './types'
 
 const props = defineProps(tabbarProps)
 const emit = defineEmits(['change', 'update:modelValue'])
 
-const height = ref<number | string>('') // 占位高度
+const placeholderHeight = ref<number | string>('') // 占位高度（rpx 语义）
 const { proxy } = getCurrentInstance() as any
 
 const { linkChildren } = useChildren(TABBAR_KEY)
@@ -48,19 +49,26 @@ const rootStyle = computed(() => {
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+const placeholderStyle = computed(() => {
+  if (!props.fixed || !props.placeholder) {
+    return {}
+  }
+  return {
+    height: `${Number(placeholderHeight.value) || 0}rpx`
+  }
+})
+
 watch(
-  [() => props.fixed, () => props.placeholder],
+  [() => props.fixed, () => props.placeholder, () => props.safeAreaInsetBottom, () => props.shape, () => props.customStyle],
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false }
+  { immediate: false }
 )
 
 onMounted(() => {
   if (props.fixed && props.placeholder) {
-    nextTick(() => {
-      setPlaceholderHeight()
-    })
+    setPlaceholderHeight()
   }
 })
 
@@ -76,13 +84,34 @@ function setChange(child: TabbarItem) {
   })
 }
 
+function handleWindowResize() {
+  if (props.fixed && props.placeholder) {
+    setPlaceholderHeight()
+  }
+}
+
+useWindowResize(handleWindowResize)
+
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
+    placeholderHeight.value = ''
     return
   }
 
-  getRect('.oxy-tabbar', false, proxy).then((res) => {
-    height.value = Number(res.height)
+  nextTick(() => {
+    getRect('.oxy-tabbar', false, proxy)
+      .then((res) => {
+        const rectHeight = Number(res.height) || 0
+        const rectTop = Number(res.top)
+        const { windowHeight = 0, windowWidth = 0 } = uni.getSystemInfoSync()
+        const occupiedHeight = windowHeight && !Number.isNaN(rectTop) ? Math.max(windowHeight - rectTop, 0) : rectHeight
+        const occupiedHeightInRpx = windowWidth ? (occupiedHeight * 750) / windowWidth : occupiedHeight * 2
+
+        placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
+      })
+      .catch(() => {
+        placeholderHeight.value = ''
+      })
   })
 }
 </script>