oxy-uni-ui 2.1.0 → 2.1.2

package/components/oxy-rich-text/index.scss

@@ -21,10 +21,6 @@
 
   }
 
-  :deep(.mp-html) {
-    // Styles are now handled via tagStyle prop
-  }
-
   .editor_toolbox {
     width: 100%;
     background: $-rich-text-toolbox-bg-gradient;
@@ -138,12 +134,12 @@
     }
 
     .oxy-rich-text__link-input {
-      margin-bottom: 32rpx;
+      margin-bottom: $-spacing-32;
 
       .oxy-rich-text__link-label {
         font-size: $-fs-content;
         color: $-color-secondary;
-        margin-bottom: 16rpx;
+        margin-bottom: $-spacing-16;
       }
     }
 

package/components/oxy-rich-text/mp-html/mp-html.d.ts

@@ -50,6 +50,8 @@ export interface MpHtmlEmits {
   (e: 'imgtap', attrs: { src: string; i: number }): void;
   /** 链接被点击时触发 */
   (e: 'linktap', attrs: { href: string }): void;
+  /** 自定义节点被点击时触发 */
+  (e: 'customtap', attrs: Record<string, any> & { innerText?: string }): void;
   /** 音视频播放时触发 */
   (e: 'play'): void;
   /** 媒体加载出错时触发 */

package/components/oxy-rich-text/mp-html/mp-html.vue

@@ -76,6 +76,7 @@
  * @event {Function} ready 所有图片加载完毕时触发
  * @event {Function} imgtap 图片被点击时触发
  * @event {Function} linktap 链接被点击时触发
+ * @event {Function} customtap 自定义节点被点击时触发
  * @event {Function} play 音视频播放时触发
  * @event {Function} error 媒体加载出错时触发
  * @event {Function} pause 音视频暂停时触发
@@ -159,7 +160,7 @@ export default {
     useAnchor: [Boolean, Number]
   },
   // #ifdef VUE3
-  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'customtap', 'play', 'error'],
   // #endif
   // #ifndef APP-PLUS-NVUE
   components: {

package/components/oxy-rich-text/mp-html/node/node.vue

@@ -37,6 +37,10 @@
       <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
         <node name="span" :childs="n.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children']" style="display:inherit" />
       </view>
+      <!-- 自定义节点 -->
+      <view v-else-if="n.name==='custom-node'" :id="n.attrs.id" :class="'_custom-node custom-node '+n.attrs.class" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="customTap">
+        <node name="span" :childs="n.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+'.'+i+'.children']" style="display:inherit" />
+      </view>
       <!-- 视频 -->
       <!-- #ifdef APP-PLUS -->
       <view v-else-if="n.html" :data-i="i" @tap="mediaTap" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
@@ -91,6 +95,7 @@ var inlineTags = {
   b: true,
   big: true,
   code: true,
+  'custom-node': true,
   del: true,
   em: true,
   i: true,
@@ -879,6 +884,19 @@ export default {
         })
       }
     },
+    /**
+     * @description 自定义节点点击事件
+     * @param {Event} e
+     */
+    customTap (e) {
+      if (!this.opts[5]) {
+        const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+        const attrs = node.attrs || e
+        this.root.$emit('customtap', Object.assign({
+          innerText: this.root.getText(node.children || [])
+        }, attrs))
+      }
+    },
     /**
      * @description 错误事件
      * @param {Event} e
@@ -1006,6 +1024,10 @@ export default {
   word-break: break-all;
 }
 
+._custom-node {
+  display: inline;
+}
+
 /* a 标签点击态效果 */
 ._hover {
   text-decoration: underline;
@@ -1150,6 +1172,7 @@ export default {
 ._abbr,
 ._b,
 ._code,
+._custom-node,
 ._del,
 ._em,
 ._i,

package/components/oxy-rich-text/mp-html/parser.js

@@ -5,14 +5,14 @@
 // 配置
 const config = {
   // 信任的标签（保持标签名不变）
-  trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,ruby,rt,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'),
+  trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,custom-node,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,ruby,rt,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'),
 
   // 块级标签（转为 div，其他的非信任标签转为 span）
   blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,pre,section'),
 
   // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
   // 行内标签
-  inlineTags: makeMap('abbr,b,big,code,del,em,i,ins,label,q,small,span,strong,sub,sup'),
+  inlineTags: makeMap('abbr,b,big,code,custom-node,del,em,i,ins,label,q,small,span,strong,sub,sup'),
   // #endif
 
   // 要移除的标签
@@ -212,7 +212,7 @@ Parser.prototype.expose = function () {
   // #ifndef APP-PLUS-NVUE
   for (let i = this.stack.length; i--;) {
     const item = this.stack[i]
-    if (item.c || item.name === 'a' || item.name === 'video' || item.name === 'audio') return
+    if (item.c || item.name === 'a' || item.name === 'custom-node' || item.name === 'video' || item.name === 'audio') return
     item.c = 1
   }
   // #endif
@@ -369,8 +369,8 @@ Parser.prototype.onAttrName = function (name) {
     if (name === 'data-src' && !this.attrs.src) {
       // data-src 自动转为 src
       this.attrName = 'src'
-    } else if (this.tagName === 'img' || this.tagName === 'a') {
-      // a 和 img 标签保留 data- 的属性，可以在 imgtap 和 linktap 事件中使用
+    } else if (this.tagName === 'img' || this.tagName === 'a' || this.tagName === 'custom-node') {
+      // a、img、custom-node 标签保留 data- 的属性，可以在相应点击事件中使用
       this.attrName = name
     } else {
       // 剩余的移除以减小大小
@@ -825,7 +825,7 @@ Parser.prototype.popNode = function () {
     node.name = 'span'
   }
 
-  if (node.name === 'a' || node.name === 'ad'
+  if (node.name === 'a' || node.name === 'ad' || node.name === 'custom-node'
     // #ifdef H5 || APP-PLUS
     || node.name === 'iframe' // eslint-disable-line
     // #endif

package/components/oxy-rich-text/oxy-rich-text.vue

@@ -16,6 +16,8 @@
         :tag-style="tagStyle"
         :markdown="true"
         :content="contentAi"
+        @linktap="handleLinkTap"
+        @customtap="handleCustomTap"
         @remove="remove"
       ></mp-html>
     </view>
@@ -103,10 +105,23 @@ import title from './icon/title.svg'
 
 const props = defineProps(richTextProps)
 
+type LinkTapEvent = {
+  href: string
+  innerText?: string
+  [key: string]: unknown
+}
+
+type CustomTapEvent = {
+  innerText?: string
+  [key: string]: unknown
+}
+
 const emit = defineEmits<{
   save: [value: string]
   clear: [void]
   remove: [event: RemoveEvent]
+  linktap: [event: LinkTapEvent]
+  customtap: [event: CustomTapEvent]
 }>()
 const { translate } = useTranslate('richText')
 const templates = [
@@ -396,6 +411,14 @@ function remove(e: RemoveEvent): void {
   emit('remove', e)
 }
 
+function handleLinkTap(e: LinkTapEvent): void {
+  emit('linktap', e)
+}
+
+function handleCustomTap(e: CustomTapEvent): void {
+  emit('customtap', e)
+}
+
 // 处理底部弹窗
 function openDialog(btn: ToolButton): void {
   dialog.value = true

package/components/oxy-search/index.scss

@@ -97,7 +97,7 @@
     align-items: center;
   }
   @include edeep(search-icon) {
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
     color: $-search-icon-color;
     font-size: $-search-icon-size;
   }

package/components/oxy-segmented/index.scss

@@ -24,7 +24,7 @@
         background-color: $-color-theme;
 
         @include when(disabled) {
-          opacity: 0.6;
+          opacity: $-opacity-disabled;
         }
       }
     }
@@ -55,19 +55,15 @@
     min-width: 0;
     z-index: 1;
     min-height: 56rpx;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     padding: 0 24rpx;
     font-size: $-fs-content;
     color: $-segmented-item-color;
     font-weight: 400;
 
-    @include when(active) {
-      font-weight: 550;
-    }
-
     @include when(large) {
       min-height: 64rpx;
-      line-height: 1.2;
+      line-height: $-line-height-base;
       padding: 0 24rpx;
       font-size: $-fs-title;
     }
@@ -75,7 +71,7 @@
 
     @include when(small) {
       min-height: 48rpx;
-      line-height: 1.2;
+      line-height: $-line-height-base;
       padding: 0 16rpx;
       font-size: $-fs-secondary;
     }

package/components/oxy-select/index.scss

@@ -92,7 +92,7 @@
     display: flex;
     flex-wrap: wrap;
     min-width: 0;
-    padding: 12rpx 0;
+    padding: 8rpx 0;
   }
 
   .oxy-select__tags-item {
@@ -230,7 +230,7 @@
 
   .oxy-select__selector-scroll {
     /* #ifndef APP-NVUE */
-    max-height: 480rpx;
+    max-height: 400rpx;
     box-sizing: border-box;
     /* #endif */
   }
@@ -240,10 +240,10 @@
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
-    min-height: 88rpx;
+    min-height: 72rpx;
     line-height: 1.4;
     font-size: $-fs-content;
-    padding: 20rpx 32rpx;
+    padding: 16rpx 24rpx;
     box-sizing: border-box;
     transition: background-color 0.2s;
   }
@@ -262,7 +262,7 @@
     &.oxy-select_selector-item_active {
       color: $-color-theme;
       background-color: $-select-active-bg;
-      font-weight: 500;
+      font-weight: $-fw-medium;
     }
   }
 
@@ -281,7 +281,7 @@
     font-size: $-fs-secondary;
 
     &-icon {
-      margin-right: 16rpx;
+      margin-right: $-spacing-16;
       animation: rotate 1s linear infinite;
     }
   }

package/components/oxy-sidebar-item/index.scss

@@ -17,7 +17,7 @@
 
     @include m(disabled) {
       color: $-dark-color-gray;
-  
+
       &:active {
         background-color: $-dark-background2;
       }
@@ -39,26 +39,35 @@
   box-sizing: border-box;
   white-space: wrap;
   line-height: $-sidebar-item-line-height;
+  transition: background-color $-sidebar-transition-duration $-sidebar-transition-timing-function,
+    border-radius $-sidebar-transition-duration $-sidebar-transition-timing-function;
 
   &:active {
     background-color: $-sidebar-hover-bg;
   }
 
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: $-sidebar-active-border-width;
+    height: $-sidebar-active-border-height;
+    background: $-sidebar-active-color;
+    transform: translateY(-50%) scaleY(0.5);
+    transform-origin: center;
+    opacity: 0;
+    content: '';
+    border-radius: $-sidebar-active-border-width;
+    transition: all $-sidebar-transition-duration $-sidebar-transition-timing-function;
+  }
+
   @include m(active) {
-    font-weight: 600;
     background: $-sidebar-active-bg;
     color: $-sidebar-active-color;
 
     &::before {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: $-sidebar-active-border-width;
-      height: $-sidebar-active-border-height;
-      background: $-sidebar-active-color;
-      transform: translateY(-50%);
-      content: '';
-      border-radius: $-sidebar-active-border-width;
+      transform: translateY(-50%) scaleY(1);
+      opacity: 1;
     }
 
     &:active {

package/components/oxy-slider/index.scss

@@ -34,12 +34,11 @@
   @include e(label) {
     text-align: center;
     width: calc($-slider-handle-radius * 2);
-    line-height: calc($-slider-handle-radius * 2);
     font-size: $-slider-fs;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     color: $-slider-color;
     background-color: $-slider-label-bg;
-    border-radius: 100%;
+    border-radius: $-radius-circle;
     position: absolute;
     bottom: calc($-slider-handle-radius * 2 + 16rpx);
   }
@@ -76,8 +75,8 @@
     height: calc($-slider-handle-radius * 2);
     width: calc($-slider-handle-radius * 2);
     background: $-slider-handle-bg;
-    border-radius: 100%;
-    border: 1px solid $-slider-axie-bg;
+    border-radius: $-radius-circle;
+    border: #{$-border-width-base} solid $-slider-axie-bg;
     box-sizing: border-box;
     box-shadow: 0 4rpx 8rpx 0 $-slider-button-shadow-color;
   }

package/components/oxy-sort-button/index.scss

@@ -64,26 +64,23 @@
     min-width: 28rpx;
     margin-left: 4rpx;
     vertical-align: middle;
-    line-height: 1.1;
+    line-height: $-line-height-tight;
 
-    @include when(active) {
-
-      :deep(.oxy-sort-button__icon-up),
-      :deep(.oxy-sort-button__icon-down) {
-        transform: scale(calc((10 / 14)));
-      }
+    :deep(.oxy-sort-button__icon-up),
+    :deep(.oxy-sort-button__icon-down) {
+      transform: scale(calc((10 / 14)));
     }
   }
 
   @include edeep(icon-up) {
     display: block !important;
-    line-height: 1.1;
+    line-height: $-line-height-tight;
     transform: scale(calc((10 / 14))) translate(0, 14rpx);
   }
 
   @include edeep(icon-down) {
     display: block !important;
-    line-height: 1.1;
+    line-height: $-line-height-tight;
     transform: scale(calc((10 / 14))) translate(0, -14rpx);
   }
 }

package/components/oxy-splitter-panel/index.scss

@@ -23,7 +23,7 @@
     justify-content: center;
     flex-shrink: 0;
     background-color: transparent;
-    transition: background-color 0.16s ease, box-shadow 0.16s ease;
+    transition: background-color $-transition-duration-fast ease, box-shadow $-transition-duration-fast ease;
 
     &::before {
       position: absolute;
@@ -31,7 +31,7 @@
       content: '';
       background-color: $-splitter-line-color;
       border-radius: $-splitter-bar-radius;
-      transition: background-color 0.16s ease, opacity 0.16s ease;
+      transition: background-color $-transition-duration-fast ease, opacity $-transition-duration-fast ease;
     }
 
     &::after {
@@ -42,7 +42,7 @@
       background-color: $-splitter-grip-active-color;
       opacity: 0;
       pointer-events: none;
-      transition: opacity 0.16s ease, transform 0.16s ease;
+      transition: opacity $-transition-duration-fast ease, transform $-transition-duration-fast ease;
     }
 
     &.has-action {
@@ -157,11 +157,11 @@
     width: calc(#{$-splitter-action-size} - 2rpx);
     height: calc(#{$-splitter-action-size} * 1.72);
     border-radius: $-splitter-action-radius;
-    border: 1px solid $-splitter-action-border;
+    border: #{$-border-width-base} solid $-splitter-action-border;
     background-color: $-splitter-action-bg;
     box-shadow: $-splitter-action-shadow;
     color: $-splitter-arrow-color;
-    transition: opacity 0.16s ease, box-shadow 0.16s ease;
+    transition: opacity $-transition-duration-fast ease, box-shadow $-transition-duration-fast ease;
 
     .oxy-splitter-panel__bar--horizontal & {
       left: 50%;
@@ -189,11 +189,11 @@
     align-items: center;
     justify-content: center;
     border-radius: $-splitter-action-group-radius;
-    border: 1px solid $-splitter-action-border;
+    border: #{$-border-width-base} solid $-splitter-action-border;
     background-color: $-splitter-action-bg;
     box-shadow: $-splitter-action-shadow;
     overflow: hidden;
-    transition: opacity 0.16s ease, box-shadow 0.16s ease;
+    transition: opacity $-transition-duration-fast ease, box-shadow $-transition-duration-fast ease;
 
     .oxy-splitter-panel__bar--horizontal & {
       left: 50%;
@@ -249,7 +249,7 @@
     border-radius: $-splitter-grip-radius;
     background-color: $-splitter-grip-color;
     opacity: 0.9;
-    transition: background-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
+    transition: background-color $-transition-duration-fast ease, opacity $-transition-duration-fast ease, transform $-transition-duration-fast ease;
 
     .oxy-splitter-panel__bar--horizontal & {
       top: 50%;

package/components/oxy-step/index.scss

@@ -30,7 +30,7 @@
     }
 
     :deep(.oxy-step__icon-outer),:deep(.oxy-step__icon-inner){
-      color: $-dark-color3; 
+      color: $-dark-color3;
       border-color: $-dark-color-gray;
     }
   }
@@ -67,9 +67,9 @@
     @include when(dot) {
       width: $-steps-dot-size;
       height: $-steps-dot-size;
-      border: 1px solid transparent;
+      border: #{$-border-width-base} solid transparent;
       margin-left: -1px;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       background: transparent;
     }
   }
@@ -80,11 +80,11 @@
   @include e(icon-outer) {
     width: calc($-steps-icon-size - 4rpx);
     height: calc($-steps-icon-size - 4rpx);
-    border: 1px solid $-steps-inactive-color;
+    border: #{$-border-width-base} solid $-steps-inactive-color;
     color: $-steps-inactive-color;
     text-align: center;
     line-height: calc($-steps-icon-size - 4rpx);
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     font-size: $-steps-icon-text-fs;
   }
   @include e(line) {
@@ -101,17 +101,17 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     background: $-steps-line-color;
   }
   @include e(content){
-    margin-top: 16rpx;
+    margin-top: $-spacing-16;
     color: $-steps-inactive-color;
     font-size: $-steps-label-fs;
   }
   @include e(title) {
     font-weight: $-steps-title-fw;
-    line-height: 1.43;
+    line-height: $-line-height-loose;
 
     @include when(description) {
       font-size: $-steps-title-fs;
@@ -167,7 +167,7 @@
           height: $-steps-dot-size + 20rpx;
           left: -10rpx;
           top: -10rpx;
-          border-radius: 50%;
+          border-radius: $-radius-circle;
           background: $-steps-finished-color;
           opacity: 0.2;
         }

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,7 +68,7 @@
       width: $-swiper-nav-dot-size;
       height: $-swiper-nav-dot-size;
       background: $-swiper-nav-dot-color;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       margin: 0 12rpx;
       transition: all 0.4s ease-in;
 

package/components/oxy-switch/index.scss

@@ -27,7 +27,7 @@
     top: 4rpx;
     left: 4rpx;
     background: $-switch-circle-bg;
-    border-radius: 50%;
+    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,8 +22,8 @@
   }
 
   @include m(round) {
-    margin-left: 32rpx;
-    margin-right: 32rpx;
+    margin-left: $-spacing-32;
+    margin-right: $-spacing-32;
     border-radius: $-tabbar-round-radius;
     box-shadow: $-tabbar-box-shadow;
 
@@ -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

@@ -110,7 +110,6 @@
       &::after {
         content: ' ';
         position: absolute;
-        height: 100%;
         right: -30rpx;
         top: 0;
         width: 30rpx;