oxy-uni-ui 2.0.0 → 2.1.1

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: {
@@ -596,7 +597,7 @@ export default {
 /* #ifndef APP-PLUS-NVUE */
 /* 根节点样式 */
 ._root {
-  padding: 2rpx 0;
+  padding: 4rpx 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
@@ -622,10 +623,10 @@ export default {
   width: auto;
   max-width: 100%;
   height: 60rpx;
-  padding: 0 6rpx;
+  padding: 0 8rpx;
   overflow-x: auto;
   overflow-y: hidden;
-  font-size: 28rpx;
+  font-size: var(--oxy-fs-content, 32rpx);
   line-height: 60rpx;
   white-space: nowrap;
   padding-bottom: 4rpx;
@@ -663,7 +664,7 @@ export default {
   display: inline-block;
   width: 36rpx;
   height: 36rpx;
-  margin: 10rpx 2vw;
+  margin: 12rpx 2vw;
   border: 1px solid #dfe2e5;
   border-radius: 50%;
 }

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
@@ -948,7 +966,7 @@ export default {
 
 /deep/ .md-th,
 /deep/ .md-td {
-  padding: 12rpx 26rpx !important;
+  padding: 12rpx 28rpx !important;
   border: 1px solid #dfe2e5;
 }
 
@@ -1001,11 +1019,15 @@ export default {
   }
 /* a 标签默认效果 */
 ._a {
-  padding: 3rpx 0 3rpx 0;
+  padding: 4rpx 0 4rpx 0;
   color: #366092;
   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,15 +105,28 @@ 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 = [
   '<section style="text-align: center; margin: 0 auto;"><section style="border-radius: 8rpx; border: 1px solid #757576; display: inline-block; padding: 10rpx 40rpx;"><span style="font-size: 36rpx; color: #595959;">标题</span></section></section>',
-  '<div style="width: 100%; box-sizing: border-box; border-radius: 10rpx; background-color: #f6f6f6; padding: 20rpx; margin: 20rpx 0"><div>卡片</div><div style="font-size: 24rpx; color: gray">正文</div></div>',
+  '<div style="width: 100%; box-sizing: border-box; border-radius: 10rpx; background-color: #f6f6f6; padding: 20rpx; margin: 20rpx 0"><div>卡片</div><div style="font-size: 32rpx; color: gray">正文</div></div>',
   '<div style="border: 1px solid gray; box-shadow: 6rpx 6rpx 0 #cfcfce; padding: 20rpx; margin: 20rpx 0">段落</div>'
 ]
 const emojis = [
@@ -148,37 +163,37 @@ const customTagStyle = {
   `,
   h1: `
     margin: 36rpx 0 20rpx 0;
-    font-size: 48rpx;
+    font-size: 52rpx;
     font-weight: 700;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h2: `
     margin: 28rpx 0 20rpx 0;
-    font-size: 40rpx;
+    font-size: 44rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h3: `
     margin: 24rpx 0 16rpx 0;
-    font-size: 36rpx;
+    font-size: 40rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h4: `
     margin: 24rpx 0 16rpx 0;
-    font-size: 32rpx;
+    font-size: 36rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h5: `
     margin: 20rpx 0 16rpx 0;
-    font-size: 30rpx;
+    font-size: 34rpx;
     font-weight: 600;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   h6: `
     margin: 16rpx 0;
-    font-size: 28rpx;
+    font-size: 32rpx;
     color: var(--oxy-rich-text-title-color, #000);
   `,
   blockquote: `
@@ -244,7 +259,7 @@ const customTagStyle = {
     white-space: pre;
     background: var(--oxy-rich-text-code-bg, #2d2d2d);
     color: var(--oxy-rich-text-code-color, #f8f8f2);
-    font-size: 26rpx;
+    font-size: 30rpx;
     line-height: 1.65;
     padding: 24rpx;
     overflow: auto;
@@ -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

@@ -48,7 +48,7 @@
   display: flex;
   padding: $-search-padding;
   align-items: center;
-  background: #fff;
+  background: $-search-bg;
 
   @include e(block) {
     flex: 1;
@@ -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;
   }
@@ -116,7 +116,7 @@
   @include edeep(clear) {
     position: absolute;
     right: 0;
-    padding: 12rpx 18rpx 12rpx 14rpx;
+    padding: 16rpx 24rpx 16rpx 20rpx;
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {
@@ -135,14 +135,14 @@
     background: $-search-light-bg;
 
     .oxy-search__block {
-      background: #fff;
+      background: $-search-light-input-bg;
     }
 
     .oxy-search__cover {
-      background: #fff;
+      background: $-search-light-input-bg;
     }
   }
   @include when(without-cancel) {
     padding-right: $-search-side-padding;
   }
-}
+}

package/components/oxy-segmented/index.scss

@@ -24,7 +24,7 @@
         background-color: $-color-theme;
 
         @include when(disabled) {
-          opacity: 0.6;
+          opacity: $-opacity-disabled;
         }
       }
     }
@@ -40,41 +40,40 @@
   width: 100%;
   background-color: $-segmented-item-bg-color;
   padding: $-segmented-padding;
-  border-radius: 8rpx;
+  border-radius: $-segmented-radius;
   box-sizing: border-box;
 
 
   @include e(item) {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    border-radius: 8rpx;
+    border-radius: $-segmented-radius;
     flex: 1;
     min-width: 0;
     z-index: 1;
     min-height: 56rpx;
-    line-height: 56rpx;
+    line-height: $-line-height-base;
     padding: 0 24rpx;
-    font-size: 28rpx;
+    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: 64rpx;
+      line-height: $-line-height-base;
       padding: 0 24rpx;
-      font-size: 32rpx;
+      font-size: $-fs-title;
     }
 
 
     @include when(small) {
       min-height: 48rpx;
-      line-height: 48rpx;
-      padding: 0 14rpx;
-      font-size: 24rpx;
+      line-height: $-line-height-base;
+      padding: 0 16rpx;
+      font-size: $-fs-secondary;
     }
 
     @include when(disabled) {
@@ -84,7 +83,7 @@
 
     @include m(active) {
       background-color: $-segmented-item-acitve-bg;
-      border-radius: 8rpx;
+      border-radius: $-segmented-radius;
       height: calc(100% - $-segmented-padding * 2);
       @include when(disabled) {
         opacity: 0.8;