oxy-uni-ui 2.0.0 → 2.1.1

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-swiper-nav/index.scss

@@ -10,7 +10,7 @@
       transform: translateY(-50%);
       width: $-swiper-nav-btn-size;
       height: $-swiper-nav-btn-size;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       background: $-swiper-nav-btn-bg-color;
 
       &::after {
@@ -68,12 +68,12 @@
       width: $-swiper-nav-dot-size;
       height: $-swiper-nav-dot-size;
       background: $-swiper-nav-dot-color;
-      border-radius: 50%;
-      margin: 0 10rpx;
+      border-radius: $-radius-circle;
+      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

@@ -26,8 +26,8 @@
     height: $-switch-circle-size;
     top: 4rpx;
     left: 4rpx;
-    background: #fff;
-    border-radius: 50%;
+    background: $-switch-circle-bg;
+    border-radius: $-radius-circle;
     transition: left .3s ease-out;
     box-shadow: 0 4rpx 8rpx 0 $-switch-inactive-shadow-color;
 
@@ -40,7 +40,7 @@
       left: 50%;
       transform: translate(-50%, -50%) scale(0.5);
       border: 2rpx solid $-switch-border-color;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
     }
   }
   @include when(checked) {
@@ -53,6 +53,6 @@
     }
   }
   @include when(disabled) {
-    opacity: 0.5;
+    opacity: $-opacity-muted;
   }
-}
+}

package/components/oxy-tab/index.scss

@@ -10,17 +10,23 @@
   @include e(body) {
     @include m(inactive) {
       height: 0;
-      transition: height 0.3s ease-in-out;
+      transition: height $-transition-duration-slow ease-in-out;
     }
   }
 }
 
 .is-fullscreen {
   .oxy-tab {
-    height: 100%;
+    height: auto;
     overflow: hidden;
     .oxy-tab__body {
       height: 100%;
     }
   }
+
+  .oxy-tabs__body.is-animated {
+    .oxy-tab {
+      height: 100%;
+    }
+  }
 }

package/components/oxy-tabbar/index.scss

@@ -22,9 +22,9 @@
   }
 
   @include m(round) {
-    margin-left: 32rpx;
-    margin-right: 32rpx;
-    border-radius: 999rpx;
+    margin-left: $-spacing-32;
+    margin-right: $-spacing-32;
+    border-radius: $-tabbar-round-radius;
     box-shadow: $-tabbar-box-shadow;
 
     @include when(fixed) {
@@ -57,6 +57,6 @@
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: 500;
+    z-index: $-z-index-fixed;
   }
-}
+}

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

@@ -23,7 +23,7 @@ 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 { getRect, isDef, objToStyle } from '../common/util'
+import { convertPxToRpx, getRect, isDef, objToStyle } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { useWindowResize } from '../composables/useWindowResize'
 import { TABBAR_KEY, tabbarProps } from './types'
@@ -103,9 +103,9 @@ function setPlaceholderHeight() {
       .then((res) => {
         const rectHeight = Number(res.height) || 0
         const rectTop = Number(res.top)
-        const { windowHeight = 0, windowWidth = 0 } = uni.getSystemInfoSync()
+        const { windowHeight = 0 } = uni.getSystemInfoSync()
         const occupiedHeight = windowHeight && !Number.isNaN(rectTop) ? Math.max(windowHeight - rectTop, 0) : rectHeight
-        const occupiedHeightInRpx = windowWidth ? (occupiedHeight * 750) / windowWidth : occupiedHeight * 2
+        const occupiedHeightInRpx = convertPxToRpx(occupiedHeight)
 
         placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
       })

package/components/oxy-table/index.scss

@@ -24,7 +24,7 @@
 
       @include when(shadow) {
         &::after {
-          background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+          background: $-table-fixed-shadow-dark;
         }
       }
     }
@@ -86,10 +86,10 @@
     background: $-table-bg;
     width: 200rpx;
     min-height: 100rpx;
-    padding: 16rpx 20rpx;
+    padding: 20rpx 24rpx;
     font-size: $-table-font-size;
     color: $-table-color;
-    --oxy-sort-button-height: 60rpx;
+    --oxy-sort-button-height: 64rpx;
 
     @include when(border) {
       border-right: 1px solid $-table-border-color;
@@ -110,12 +110,11 @@
       &::after {
         content: ' ';
         position: absolute;
-        height: 100%;
         right: -30rpx;
         top: 0;
         width: 30rpx;
         height: 100%;
-        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+        background: $-table-fixed-shadow-light;
       }
     }
 
@@ -160,4 +159,4 @@
       @include multiEllipsis(2);
     }
   }
-}
+}

package/components/oxy-table-col/index.scss

@@ -7,7 +7,7 @@
   @include b(table-col) {
     @include when(shadow) {
       &::after {
-        background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+        background: $-table-fixed-shadow-dark;
       }
     }
   }
@@ -21,7 +21,7 @@
 
   @include m(fixed) {
     position: sticky;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     left: 0;
   }
 
@@ -33,8 +33,7 @@
       right: -30rpx;
       top: 0;
       width: 30rpx;
-      height: 100%;
-      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+      background: $-table-fixed-shadow-light;
     }
   }
 
@@ -43,4 +42,4 @@
       border-bottom: none;
     }
   }
-}
+}

package/components/oxy-tabs/index.scss

@@ -14,7 +14,7 @@
       color: $-dark-color3;
 
       @include when(active) {
-        font-weight: 600;
+        font-weight: $-fw-semibold;
         color: $-dark-color;
       }
 
@@ -36,7 +36,7 @@
 
       @include when(disabled) {
         color: $-dark-color-gray;
-        border-color: #f4f4f4;
+        border-color: $-tabs-nav-map-disabled-border-color;
       }
     }
 
@@ -63,14 +63,14 @@
 
 @include b(tabs) {
   position: relative;
-  background: #fff;
+  background: $-tabs-nav-bg;
   width: 100%;
 
   @include e(nav) {
     left: 0;
     right: 0;
     height: $-tabs-nav-height;
-    background-color: #fff;
+    background-color: $-tabs-nav-bg;
     width: 100%;
     position: relative;
 
@@ -103,7 +103,7 @@
     transition: color .3s;
 
     @include when(active) {
-      font-weight: 600;
+      font-weight: $-fw-semibold;
     }
 
     @include when(disabled) {
@@ -216,13 +216,13 @@
 
   @include e(map-header) {
     position: relative;
-    padding-left: 34rpx;
+    padding-left: 36rpx;
     height: $-tabs-nav-height;
     line-height: $-tabs-nav-height;
     font-size: $-tabs-nav-map-fs;
     color: $-tabs-nav-map-color;
     transition: opacity .3s;
-    background: #fff;
+    background: $-tabs-nav-bg;
     opacity: 0;
 
     @include halfPixelBorder;
@@ -235,8 +235,8 @@
   @include e(map-body) {
     display: flex;
     flex-wrap: wrap;
-    padding: 40rpx 30rpx 20rpx;
-    background: #fff;
+    padding: 40rpx 32rpx 24rpx;
+    background: $-tabs-nav-bg;
     transition: transform .3s;
     transform: scaleY(0);
     transform-origin: center top;
@@ -261,13 +261,15 @@
   @include e(map-nav-btn) {
     @include buttonClear;
     @include lineEllipsis;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 214rpx;
     height: 64rpx;
-    line-height: 64rpx;
+    line-height: 1.2;
     background-color: $-tabs-nav-map-button-back-color;
     border-color: transparent;
-    margin-bottom: 20rpx;
+    margin-bottom: $-spacing-24;
     border-radius: $-tabs-nav-map-button-radius;
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;
@@ -282,7 +284,7 @@
 
     @include when(disabled) {
       color: $-tabs-nav-disabled-color;
-      border-color: #f4f4f4;
+      border-color: $-tabs-nav-map-disabled-border-color;
     }
   }
 
@@ -300,7 +302,7 @@
   @include when(slide) {
     .oxy-tabs__nav-item {
       flex: 0 0 auto;
-      padding: 0 34rpx;
+      padding: 0 36rpx;
     }
   }