oxy-uni-ui 2.0.0 → 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-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

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

package/components/oxy-tabbar/index.scss

@@ -24,7 +24,7 @@
   @include m(round) {
     margin-left: 32rpx;
     margin-right: 32rpx;
-    border-radius: 999rpx;
+    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-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;
@@ -115,7 +115,7 @@
         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 +160,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;
       }
     }
   }
@@ -34,7 +34,7 @@
       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 +43,4 @@
       border-bottom: none;
     }
   }
-}
+}

package/components/oxy-tabs/index.scss

@@ -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;
 
@@ -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: 24rpx;
     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;
     }
   }
 

package/components/oxy-tag/index.scss

@@ -1,30 +1,53 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-@mixin tag-type-style ($normalColor, $normalBg) {
+.oxy-theme-dark {
+  @include b(tag) {
+    @include when(default) {
+      background: $-dark-background4;
+      color: $-dark-color3;
+
+      @include when(plain) {
+        background: transparent;
+        border-color: $-dark-background7;
+      }
+
+      @include when(round) {
+        color: $-dark-color3;
+        border-color: $-dark-background7;
+      }
+    }
+
+    @include when(dynamic-input) {
+      border-color: $-dark-background7;
+    }
+  }
+}
+
+@mixin tag-type-style($normalColor, $normalBg) {
   background: $normalBg;
 
   @include when(plain) {
     background: transparent;
     color: $normalColor;
-    border: 1px solid $normalColor;
-    padding: 0 8rpx;
+    border-color: $normalColor;
+    padding: 12rpx 20rpx;
   }
+
   @include when(round) {
-    line-height: 1.2;
-    font-size: $-tag-fs;
-    padding: 8rpx 22rpx;
+    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
-    border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
+    border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
+
   @include when(mark) {
-    padding: 2rpx 12rpx;
+    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
 
     @include when(plain) {
-      padding: 0 12rpx;
+      padding: 8rpx 20rpx;
     }
   }
   @include when(active) {
@@ -32,15 +55,24 @@
     border-color: $-tag-primary-color;
   }
 }
+
 @include b(tag) {
-  font-size: $-tag-small-fs;
-  display: inline-block;
+  position: relative;
+  font-size: $-tag-fs;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  box-sizing: border-box;
   color: $-tag-color;
-  padding: 0 6rpx;
-  border-radius: 4rpx;
-  transition: opacity .3s;
+  padding: 12rpx 20rpx;
+  min-height: 64rpx;
+  border: 1px solid transparent;
+  border-radius: $-tag-radius;
+  transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
   vertical-align: middle;
-  line-height: initial;
+  line-height: 1.4;
+  white-space: nowrap;
 
   @include when(default) {
     @include tag-type-style($-tag-info-color, $-tag-info-bg);
@@ -58,58 +90,101 @@
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
   @include when(icon) {
-    font-size: $-tag-fs;
-    line-height: 1.2;
-    padding: 4rpx 10rpx;
+    padding: 12rpx 20rpx;
   }
+
   @include when(dynamic) {
     box-sizing: border-box;
-    width: 176rpx;
-    transition: .3s;
+    width: auto;
+    min-width: 176rpx;
+    justify-content: center;
+    transition: color .3s, border-color .3s, background-color .3s;
+
+    .oxy-tag__text {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: inherit;
+
+      :deep(text) {
+        display: inline-block;
+        line-height: inherit;
+      }
+    }
 
     &:active {
       color: $-tag-primary-color;
       border-color: $-tag-primary-color;
     }
   }
+
   @include when(dynamic-input) {
     border-color: $-tag-primary-color;
+    justify-content: flex-start;
   }
+
   @include edeep(icon) {
-    display: inline-block;
-    margin-right: 8rpx;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
     font-size: $-tag-fs;
-    line-height: 1.2;
-    vertical-align: baseline;
+    line-height: 1;
+    vertical-align: middle;
   }
+
   @include e(text) {
     display: inline-block;
-    vertical-align: text-top;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
   }
+
   @include e(add-text) {
-    width: 120rpx;
-    height: 28rpx;
-    min-height: 28rpx;
+    width: 100%;
+    min-width: 0;
+    height: 56rpx;
+    min-height: 56rpx;
     display: inline-block;
     font-size: $-tag-fs;
+    line-height: 56rpx;
     vertical-align: middle;
+    color: inherit;
     padding: 0;
+    border: none;
+    background: transparent;
+    text-align: left;
+
+    &::placeholder {
+      color: $-font-gray-3;
+    }
   }
+
   @include e(close) {
-    display: inline-block;
-    margin-left: 48rpx;
-    margin-right: -8rpx;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16rpx;
+    margin-right: 0;
     font-size: $-tag-close-size;
-    height: 28rpx;
-    line-height: 1.1;
-    vertical-align: text-bottom;
+    width: $-tag-close-size;
+    height: $-tag-close-size;
+    line-height: 1;
+    vertical-align: middle;
     color: $-tag-close-color;
+    opacity: 0.7;
+    transition: opacity .2s, color .2s;
 
     &:active {
+      opacity: 1;
       color: $-tag-close-active-color;
     }
   }
+
   @include edeep(add) {
-    vertical-align: bottom;
+    vertical-align: middle;
+    line-height: 1;
   }
-}
+}