oxy-uni-ui 2.1.1 → 2.1.3

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

@@ -15,7 +15,9 @@ export default {
   },
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   },
   data() {
@@ -47,6 +49,11 @@ export default {
         })
         .join('\n')
     },
+    /**
+     * 从输入流中提取完整的 JSON 对象。使用深度计数器和字符串状态机，
+     * 支持字符串内转义和嵌套 JSON，处理流式传输中 JSON 对象可能跨 chunk 的情况。
+     * @returns {{ texts: string[], rest: string }} texts 为完整 JSON 字符串数组，rest 为未完成的部分
+     */
     extractJsonObjects(input) {
       const texts = []
       let start = -1
@@ -90,6 +97,10 @@ export default {
       const rest = start !== -1 ? input.slice(start) : ''
       return { texts, rest }
     },
+    /**
+     * 解析流数据并向外 emit。累积 pendingText，strip SSE 前缀，提取完整 JSON 对象逐个 emit。
+     * finished 为 true 时，清空缓冲区并 emit finished 事件。
+     */
     emitParsedStreamData({ chunk, finished }) {
       if (finished) {
         if (this.pendingText) {
@@ -121,6 +132,10 @@ export default {
       merged.set(b, a.length)
       return merged
     },
+    /**
+     * 分割可能不完整的 UTF-8 字节序列。从末尾向前扫描 continuation bytes，
+     * 通过首字节判断期望的字节数，期望数 > 实际数时截断为 pending 供下次拼接。
+     */
     splitIncompleteUtf8(bytes) {
       const len = bytes.length
       if (len === 0) {
@@ -157,6 +172,10 @@ export default {
 
       return { complete: bytes, pending: null }
     },
+    /**
+     * 手写 UTF-8 解码器（用于小程序等不支持 TextDecoder 的环境）。
+     * 支持 1-4 字节编码，包括 BMP 内字符和代理对（surrogate pair）。
+     */
     utf8Decode(bytes) {
       let out = ''
       for (let i = 0; i < bytes.length; i++) {
@@ -219,6 +238,10 @@ export default {
       }
       return out
     },
+    /**
+     * 小程序端 chunk 解码。将 Uint8Array chunk 合并到 pending buffer，
+     * 分割 UTF-8 边界后解码文本。finished 时清空 pending。
+     */
     decodeMpChunk(data, finished) {
       if (finished) {
         let tail = null
@@ -258,6 +281,12 @@ export default {
       this.$emit('stream-error', { message, type })
     },
     // #ifndef H5 || APP-PLUS
+    /**
+     * 小程序端流式请求处理。
+     * - cancel 模式：abort 请求并 finished
+     * - 正常请求：创建 uni.request（enableChunked），通过 onChunkReceived 逐块解码，
+     *   success/fail 后清理缓冲区并 finish/error
+     */
     handleStreamRequest(newVal) {
       if (newVal && newVal.cancel) {
         if (this.requestTask) {

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

@@ -29,7 +29,9 @@ export default {
   name: 'oxy-swipe-action',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -102,6 +104,12 @@ onBeforeUnmount(() => {
   }
 })
 
+/**
+ * 根据 modelValue 控制滑动状态
+ * 获取按钮宽度后，switch 到对应状态（close/left/right）
+ * @param value - 目标状态
+ * @param old - 旧状态（用于关闭时避免重复动画）
+ */
 function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
   if (props.disabled) {
     return

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

@@ -80,7 +80,9 @@ export default {
   name: 'oxy-swiper',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -151,6 +153,10 @@ const swiperIndicator = computed(() => {
   return swiperIndicator
 })
 
+/**
+ * 判断元素是否为视频/图片类型
+ * 支持字符串 URL 和对象格式（通过 type 属性或 URL 后缀判断）
+ */
 const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
   const checkType = (url: string) => (type === 'video' ? isVideoUrl(url) : isImageUrl(url))
 

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

@@ -30,7 +30,7 @@
       left: 30rpx;
 
       &::after {
-        margin-left: 4rpx;
+        margin-left: $-spacing-4;
         border-width: 2rpx 0 0 2rpx;
         transform: translate(-50%, -50%) rotateZ(-45deg);
       }
@@ -53,7 +53,7 @@
   }
 
   @include m(fraction) {
-    padding: 0 16rpx;
+    padding: 0 $-spacing-16;
     height: $-swiper-nav-fraction-height;
     line-height: $-swiper-nav-fraction-height;
     border-radius: calc($-swiper-nav-fraction-height / 2);
@@ -69,11 +69,11 @@
       height: $-swiper-nav-dot-size;
       background: $-swiper-nav-dot-color;
       border-radius: $-radius-circle;
-      margin: 0 12rpx;
+      margin: 0 $-spacing-12;
       transition: all 0.4s ease-in;
 
       @include when(vertical) {
-        margin: 12rpx 0;
+        margin: $-spacing-12 0;
       }
 
       @include when(active) {

package/components/oxy-switch/index.scss

@@ -6,10 +6,13 @@
   position: relative;
   width: $-switch-width;
   height: $-switch-height;
+  vertical-align: middle;
+  line-height: 1;
+  box-sizing: border-box;
   border-radius: $-switch-circle-size;
   background: $-switch-inactive-color;
   font-size: $-switch-size;
-  transition: all .3s;
+  transition: all $-transition-duration-slow;
 
   @include e(checkbox) {
     position: absolute;
@@ -28,7 +31,7 @@
     left: 4rpx;
     background: $-switch-circle-bg;
     border-radius: $-radius-circle;
-    transition: left .3s ease-out;
+    transition: left $-transition-duration-slow ease-out;
     box-shadow: 0 4rpx 8rpx 0 $-switch-inactive-shadow-color;
 
     &::after {
@@ -53,6 +56,6 @@
     }
   }
   @include when(disabled) {
-    opacity: $-opacity-muted;
+    opacity: $-opacity-disabled;
   }
 }

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

@@ -8,7 +8,9 @@ export default {
   name: 'oxy-switch',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -45,6 +47,10 @@ const circleStyle = computed(() => {
   return circleStyle
 })
 
+/**
+ * 切换开关状态。
+ * 支持 beforeChange 异步校验，通过 resolve(true/false) 决定是否执行切换。
+ */
 function switchValue() {
   if (props.disabled) return
   const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue
@@ -69,6 +75,10 @@ function switchValue() {
   }
 }
 
+/**
+ * 初始化时校验 modelValue 是否在 activeValue/inactiveValue 范围内，
+ * 不在范围内则重置为 inactiveValue。
+ */
 onBeforeMount(() => {
   if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
     emit('update:modelValue', props.inactiveValue)

package/components/oxy-tab/index.scss

@@ -17,16 +17,10 @@
 
 .is-fullscreen {
   .oxy-tab {
-    height: auto;
+    height: 100%;
     overflow: hidden;
     .oxy-tab__body {
       height: 100%;
     }
   }
-
-  .oxy-tabs__body.is-animated {
-    .oxy-tab {
-      height: 100%;
-    }
-  }
 }

package/components/oxy-tab/oxy-tab.vue

@@ -1,6 +1,6 @@
 <template>
-  <view :class="`oxy-tab ${customClass}`" :style="customStyle">
-    <view :class="['oxy-tab__body', { 'oxy-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
+  <view :class="`oxy-tab ${customClass}`" :style="tabStyle">
+    <view :class="['oxy-tab__body', { 'oxy-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabStyle">
       <slot />
     </view>
   </view>
@@ -10,7 +10,9 @@ export default {
   name: 'oxy-tab',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -30,17 +32,17 @@ const { parent: tabs, index } = useParent(TABS_KEY)
 
 // 激活项下标
 const active = computed(() => {
-  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
+  return isDef(tabs.value) ? tabs.value.state.activeIndex === index.value : false
 })
 
-const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs.value来设置painted使tab渲染
 
-const tabBodyStyle = computed(() => {
+const tabStyle = computed(() => {
   const style: CSSProperties = {}
-  if (!active.value && (!isDef(tabs) || !tabs.props.animated)) {
+  if (!active.value && (!isDef(tabs.value) || !tabs.value.props.animated)) {
     style.display = 'none'
   }
-  return objToStyle(style)
+  return `${objToStyle(style)}${props.customStyle}`
 })
 
 const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
@@ -56,7 +58,7 @@ watch(
       console.error('[Oxy ui] error(oxy-tab): the type of name should be number or string')
       return
     }
-    if (tabs) {
+    if (tabs.value) {
       checkName(proxy)
     }
   },
@@ -75,8 +77,8 @@ function checkName(self: any) {
   if (myName === undefined || myName === null || myName === '') {
     return
   }
-  tabs &&
-    tabs.children.forEach((child: any) => {
+  tabs.value &&
+    tabs.value.children.forEach((child: any) => {
       if (child.$.uid !== self.$.uid && child.name === myName) {
         console.error(`The tab's bound value: ${myName} has been used`)
       }

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

@@ -15,7 +15,9 @@ export default {
   name: 'oxy-tabbar',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -92,6 +94,9 @@ function handleWindowResize() {
 
 useWindowResize(handleWindowResize)
 
+/**
+ * 计算占位高度。fixed 模式下查询 tabbar 的 rect，计算底部占用高度并转换为 rpx，用于占位撑开内容。
+ */
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
     placeholderHeight.value = ''

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

@@ -22,7 +22,9 @@ export default {
   name: 'oxy-tabbar-item',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -61,12 +63,12 @@ const customBadgeProps = computed(() => {
 
 const textStyle = computed(() => {
   const style: CSSProperties = {}
-  if (tabbar) {
-    if (active.value && tabbar.props.activeColor) {
-      style['color'] = tabbar.props.activeColor
+  if (tabbar.value) {
+    if (active.value && tabbar.value.props.activeColor) {
+      style['color'] = tabbar.value.props.activeColor
     }
-    if (!active.value && tabbar.props.inactiveColor) {
-      style['color'] = tabbar.props.inactiveColor
+    if (!active.value && tabbar.value.props.inactiveColor) {
+      style['color'] = tabbar.value.props.inactiveColor
     }
   }
 
@@ -75,8 +77,8 @@ const textStyle = computed(() => {
 
 const active = computed(() => {
   const name = isDef(props.name) ? props.name : index.value
-  if (tabbar) {
-    if (tabbar.props.modelValue === name) {
+  if (tabbar.value) {
+    if (tabbar.value.props.modelValue === name) {
       return true
     } else {
       return false
@@ -87,11 +89,11 @@ const active = computed(() => {
 })
 
 /**
- * 点击tabbar选项
+ * 点击 tabbar 选项
  */
 function handleClick() {
   const name: string | number = isDef(props.name) ? props.name : index.value
-  tabbar && tabbar.setChange({ name })
+  tabbar.value && tabbar.value.setChange({ name })
 }
 </script>
 <style lang="scss" scoped>

package/components/oxy-table/index.scss

@@ -86,7 +86,7 @@
     background: $-table-bg;
     width: 200rpx;
     min-height: 100rpx;
-    padding: 20rpx 24rpx;
+    padding: $-spacing-20 $-spacing-24;
     font-size: $-table-font-size;
     color: $-table-color;
     --oxy-sort-button-height: 64rpx;

package/components/oxy-table/oxy-table.vue

@@ -112,7 +112,9 @@ export default {
   name: 'oxy-table',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -165,6 +167,9 @@ const tableStyle = computed(() => {
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+/**
+ * 表格实际宽度样式：根据所有列宽计算总宽度
+ */
 const realWidthStyle = computed(() => {
   const style: CSSProperties = {
     display: 'flex'
@@ -177,6 +182,9 @@ const realWidthStyle = computed(() => {
   return objToStyle(style)
 })
 
+/**
+ * 表体高度样式：根据 rowHeight 和数据量计算
+ */
 const bodyStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {

package/components/oxy-table/types.ts

@@ -40,6 +40,9 @@ export const tableProps = {
     type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
     default: false
   },
+  /**
+   * 是否固定表头
+   */
   fixedHeader: makeBooleanProp(true)
 }
 

package/components/oxy-table-col/oxy-table-col.vue

@@ -21,7 +21,9 @@ export default {
   name: 'oxy-table-col',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -41,8 +43,8 @@ const sortDirection = ref<SortDirection>(0) // 排序方向
 
 // 是否开启斑马纹
 const stripe = computed(() => {
-  if (isDef(table)) {
-    return table.props.stripe
+  if (isDef(table.value)) {
+    return table.value.props.stripe
   } else {
     return false
   }
@@ -52,8 +54,8 @@ const stripe = computed(() => {
  * 是否有边框
  */
 const border = computed(() => {
-  if (isDef(table)) {
-    return table.props.border
+  if (isDef(table.value)) {
+    return table.value.props.border
   } else {
     return false
   }
@@ -63,8 +65,8 @@ const border = computed(() => {
  * 是否超出省略
  */
 const ellipsis = computed(() => {
-  if (isDef(table)) {
-    return table.props.ellipsis
+  if (isDef(table.value)) {
+    return table.value.props.ellipsis
   } else {
     return false
   }
@@ -75,8 +77,8 @@ const ellipsis = computed(() => {
  */
 const isLastFixed = computed(() => {
   let isLastFixed: boolean = false
-  if (props.fixed && isDef(table)) {
-    isLastFixed = table.getIsLastFixed(props)
+  if (props.fixed && isDef(table.value)) {
+    isLastFixed = table.value.getIsLastFixed(props)
   }
   return isLastFixed
 })
@@ -89,8 +91,8 @@ const columnStyle = computed(() => {
   if (isDef(props.width)) {
     style['width'] = withDefaultUnit(props.width)
   }
-  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
-    style = table.getFixedStyle(columnIndex.value, style)
+  if (props.fixed && isDef(table.value) && isFunction(table.value.getFixedStyle)) {
+    style = table.value.getFixedStyle(columnIndex.value, style)
   }
   return style
 })
@@ -100,23 +102,23 @@ const columnStyle = computed(() => {
  */
 const cellStyle = computed(() => {
   let style: CSSProperties = {}
-  const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
+  const rowHeight: string | number = isDef(table.value) && isDef(table.value.props) ? table.value.props.rowHeight : 50 // 自定义行高
   if (isDef(rowHeight)) {
     style['height'] = withDefaultUnit(rowHeight)
   }
-  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
-    style = table.getFixedStyle(columnIndex.value, style)
+  if (props.fixed && isDef(table.value) && isFunction(table.value.getFixedStyle)) {
+    style = table.value.getFixedStyle(columnIndex.value, style)
   }
   return objToStyle(style)
 })
 
 // 列数据
 const column = computed(() => {
-  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+  if (!isDef(table.value) || !isDef(table.value.props) || !isDef(table.value.props.data) || !Array.isArray(table.value.props.data)) {
     return []
   }
 
-  const column: any[] = table.props.data.map((item) => {
+  const column: any[] = table.value.props.data.map((item) => {
     return item[props.prop]
   })
   return column
@@ -127,18 +129,18 @@ const column = computed(() => {
  * @param index 行下标
  */
 function handleRowClick(index: number) {
-  if (!isDef(table)) {
+  if (!isDef(table.value)) {
     return
   }
-  isFunction(table.rowClick) && table.rowClick(index)
+  isFunction(table.value.rowClick) && table.value.rowClick(index)
 }
 
 // 行数据
 function getScope(index: number) {
-  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+  if (!isDef(table.value) || !isDef(table.value.props) || !isDef(table.value.props.data) || !Array.isArray(table.value.props.data)) {
     return {}
   }
-  return table.props.data[index] || {}
+  return table.value.props.data[index] || {}
 }
 
 defineExpose({ sortDirection: sortDirection })

package/components/oxy-tabs/index.scss

@@ -100,7 +100,7 @@
     height: $-tabs-nav-height;
     font-size: $-tabs-nav-fs;
     color: $-tabs-nav-color;
-    transition: color .3s;
+    transition: color $-transition-duration-slow;
 
     @include when(active) {
       font-weight: $-fw-semibold;
@@ -127,7 +127,7 @@
     position: absolute;
     bottom: 8rpx;
     left: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     height: $-tabs-nav-line-height;
     width: $-tabs-nav-line-width;
     background: $-tabs-nav-line-bg-color;
@@ -178,7 +178,7 @@
     top: 0;
     left: 0;
     right: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
   }
 
   @include e(map-btn) {
@@ -190,7 +190,7 @@
     line-height: $-tabs-nav-height;
     text-align: center;
     color: $-tabs-nav-map-arrow-color;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     background: $-tabs-nav-bg;
     -webkit-tap-highlight-color: transparent;
 
@@ -207,7 +207,7 @@
 
   @include e(map-arrow) {
     display: block;
-    transition: transform .3s;
+    transition: transform $-transition-duration-slow;
 
     @include when(open) {
       transform: rotate(180deg);
@@ -221,23 +221,23 @@
     line-height: $-tabs-nav-height;
     font-size: $-tabs-nav-map-fs;
     color: $-tabs-nav-map-color;
-    transition: opacity .3s;
+    transition: opacity $-transition-duration-slow;
     background: $-tabs-nav-bg;
     opacity: 0;
 
     @include halfPixelBorder;
 
     &::after {
-      z-index: 3;
+      z-index: $-z-index-sticky;
     }
   }
 
   @include e(map-body) {
     display: flex;
     flex-wrap: wrap;
-    padding: 40rpx 32rpx 24rpx;
+    padding: $-spacing-40 $-spacing-32 $-spacing-24;
     background: $-tabs-nav-bg;
-    transition: transform .3s;
+    transition: transform $-transition-duration-slow;
     transform: scaleY(0);
     transform-origin: center top;
 
@@ -274,7 +274,7 @@
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;
     text-align: center;
-    transition: color .3s, border-color .3s;
+    transition: color $-transition-duration-slow, border-color $-transition-duration-slow;
 
     @include when(active) {
       color: $-tabs-nav-active-color;
@@ -296,7 +296,7 @@
     bottom: 0;
     background: $-tabs-nav-map-modal-bg;
     opacity: 0;
-    transition: opacity .3s;
+    transition: opacity $-transition-duration-slow;
   }
 
   @include when(slide) {

package/components/oxy-tabs/oxy-tabs.vue

@@ -169,7 +169,9 @@ export default {
   name: 'oxy-tabs',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -326,6 +328,9 @@ onMounted(() => {
   })
 })
 
+/**
+ * 切换 Tab Map（全部标签面板）的显隐，带淡入淡出动画
+ */
 function toggleMap() {
   if (state.mapShow) {
     state.animating = false
@@ -390,6 +395,10 @@ function setActiveTab() {
   }
 }
 
+/**
+ * scroll-view 滚动到 active tab 居中位置。
+ * 若计算位置与当前相同，加微小随机偏移强制触发 scroll-view 重滚动。
+ */
 function scrollIntoView() {
   if (!state.inited) return
   Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)]).then(([navItemsRects, navRect]) => {
@@ -438,6 +447,9 @@ function onTouchMove(event: any) {
   if (!props.swipeable) return
   touch.touchMove(event)
 }
+/**
+ * 触摸滑动结束：检测水平滑动方向和距离，满足阈值则切换 tab
+ */
 function onTouchEnd() {
   if (!props.swipeable) return
   const { direction, deltaX, offsetX } = touch
@@ -450,6 +462,11 @@ function onTouchEnd() {
     }
   }
 }
+/**
+ * 根据 modelValue 查找对应的 tabs 索引
+ * number 类型：直接使用（超出范围则回退到 0）
+ * string 类型：通过 children.name 匹配（匹配不到回退到 0）
+ */
 function getActiveIndex(value: number | string) {
   // name代表的索引超过了children长度的边界，自动用0兜底
   if (isNumber(value) && value >= children.length) {