oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-qrcode/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+// 二维码样式
+export type ClQrcodeMode = 'rect' | 'circular' | 'line' | 'rectSmall'
+
+export const qrcodeProps = {
+  ...baseProps,
+  /** 二维码内容 */
+  text: makeStringProp(''),
+  /** 二维码中心图标 */
+  logo: makeStringProp(''),
+  /** 二维码宽度，number 与纯数字字符串按 rpx 处理 */
+  width: makeNumericProp(400),
+  /** 二维码高度，number 与纯数字字符串按 rpx 处理 */
+  height: makeNumericProp(400),
+  /** 二维码中心图标大小，number 与纯数字字符串按 rpx 处理 */
+  logoSize: makeNumericProp(80),
+  /** 二维码内边距，number 与纯数字字符串按 rpx 处理 */
+  padding: makeNumericProp(0),
+  /** 二维码前景色 */
+  foreground: makeStringProp('#000'),
+  /** 二维码背景颜色 */
+  background: makeStringProp('#FFFFFF'),
+  /** 二维码错误级别
+   *  默认值：H
+   *  可选值：L、M、Q、H
+   * */
+  ecc: {
+    type: String as PropType<'L' | 'M' | 'Q' | 'H'>,
+    default: 'H'
+  },
+  /** 二维码样式 rect 普通矩形、circular 小圆点、line 线条、rectSmall 小方格*/
+  mode: {
+    type: String as PropType<ClQrcodeMode>,
+    default: 'circular'
+  },
+  /** 二维码边框颜色 */
+  pdColor: makeStringProp(''),
+  /** 二维码边框圆角，number 与纯数字字符串按 rpx 处理 */
+  pdRadius: makeNumericProp(0)
+}

package/components/oxy-radio/index.scss

@@ -32,25 +32,25 @@
 
       @include when(button) {
         .oxy-radio__label {
-          border-color: #c8c9cc;
-          background: #3a3a3c;
+          border-color: $-color-gray-5;
+          background: $-dark-border-color;
           color: $-dark-color-gray;
         }
         @include when(checked) {
           .oxy-radio__label {
-            border-color: #c8c9cc;
-            background: #3a3a3c;
-            color: #c8c9cc;
+            border-color: $-color-gray-5;
+            background: $-dark-border-color;
+            color: $-color-gray-5;
           }
         }
       }
 
       @include when(dot) {
         .oxy-radio__shape {
-          border-color: #c8c9cc;
-          background: #3a3a3c;
+          border-color: $-color-gray-5;
+          background: $-dark-border-color;
           &::before {
-            background-color: #c8c9cc;
+            background-color: $-color-gray-5;
           }
         }
       }
@@ -92,7 +92,7 @@
     vertical-align: top;
     font-size: $-radio-label-fs;
     color: $-radio-label-color;
-    line-height: 20px;
+    line-height: 48rpx;
     word-break: break-all;
   }
   @include when(checked) {
@@ -109,7 +109,7 @@
 
   @include when(dot) {
     .oxy-radio__shape {
-      border: 2px solid $-radio-dot-border-color;
+      border: 4rpx solid $-radio-dot-border-color;
       border-radius: 50%;
       position: relative;
       display: inline-block;
@@ -124,7 +124,7 @@
         left: calc(50% - #{$-radio-dot-size / 2});
         top: calc(50% - #{$-radio-dot-size / 2});
         border-radius: 50%;
-        background-color: #fff;
+        background-color: $-color-white;
         transform: scale(0);
         transition: transform .2s ease-in;
       }
@@ -145,17 +145,23 @@
   @include when(button) {
     display: inline-block;
     margin-top: 0;
-    margin-right: 10px;
+    margin-right: 24rpx;
 
     .oxy-radio__shape {
       display: none;
     }
     .oxy-radio__label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       height: $-radio-button-height;
       min-width: $-radio-button-min-width;
       max-width: $-radio-button-max-width;
-      padding: 5px 15px;
+      padding: 16rpx 32rpx;
       margin-right: 0;
+      line-height: 1.2;
+      text-align: center;
+      vertical-align: middle;
       border-radius: $-radio-button-radius;
       background-color: $-radio-button-bg;
       font-size: $-radio-button-fs;
@@ -187,7 +193,7 @@
     }
     .oxy-radio__shape {
       display: block;
-      margin-right: 4px;
+      margin-right: 8rpx;
       float: left;
       &::after {
         content: "";
@@ -198,7 +204,7 @@
 
     @include when(dot) {
       .oxy-radio__shape {
-        margin-top: 2px;
+        margin-top: 4rpx;
       }
       @include when(large) {
         .oxy-radio__shape {
@@ -210,7 +216,7 @@
     &.icon-placement-right {
       .oxy-radio__shape {
         margin-right: 0;
-        margin-left: 4px;
+        margin-left: 8rpx;
         float: right;
       }
     }
@@ -257,18 +263,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 13px 15px;
+    padding: 32rpx 32rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 32rpx 32rpx;
     }
   }
 
   @include when(button-radio) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 12px 12px 0px 0px;
+    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-radio__label {

package/components/oxy-radio-group/index.scss

@@ -11,11 +11,11 @@
   background-color: $-radio-bg;
   font-size: 0;
 
-  // 上下20px 左右15px 内部间隔12px
+  // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
     height: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 24rpx 32rpx 40rpx 32rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-rate/types.ts

@@ -31,16 +31,16 @@ export const rateProps = {
   /**
    * 图标大小
    * 类型: string
-   * 默认值: '16px'
+   * 默认值: '32rpx'
    */
-  size: makeStringProp('16px'),
+  size: makeStringProp('32rpx'),
 
   /**
    * 图标间距
    * 类型: string
-   * 默认值: '4px'
+   * 默认值: '8rpx'
    */
-  space: makeStringProp('4px'),
+  space: makeStringProp('8rpx'),
 
   /**
    * 未选中的图标颜色

package/components/oxy-resize/index.scss

@@ -5,8 +5,8 @@
 
   @include e(container) {
     position: absolute;
-    min-width: 1px;
-    min-height: 1px;
+    min-width: 2rpx;
+    min-height: 2rpx;
   }
 
   @include e(wrapper) {

package/components/oxy-resize/oxy-resize.vue

@@ -13,7 +13,7 @@
         :scroll-left="expandScrollLeft"
         @scroll="onScrollHandler"
       >
-        <view class="oxy-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+        <view class="oxy-resize__wrapper--placeholder" style="height: 200000rpx; width: 200000rpx"></view>
       </scroll-view>
       <!--监听插槽变小-->
       <scroll-view
@@ -43,7 +43,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { objToStyle, unitConvert, uuid } from '../common/util'
 import { resizeProps } from './types'
 
 const props = defineProps(resizeProps)
@@ -59,8 +59,8 @@ const scrollEventCount = ref<number>(0)
 
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {
-    width: addUnit(width.value),
-    height: addUnit(height.value)
+    width: unitConvert(width.value, 0, { output: 'px' }),
+    height: unitConvert(height.value, 0, { output: 'px' })
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-resize/types.ts

@@ -2,5 +2,8 @@ import { baseProps, makeStringProp } from '../common/props'
 
 export const resizeProps = {
   ...baseProps,
+  /**
+   * 自定义容器类名
+   */
   customContainerClass: makeStringProp('')
 }

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

@@ -6,6 +6,7 @@
   flex-direction: column;
   overflow: hidden;
   height: 100%;
+  text-align: left;
 
   &.editable {
     border: 1px solid $-rich-text-editable-border-color;
@@ -15,7 +16,7 @@
   .rich-text-main {
     flex: 1;
     overflow-y: auto;
-    padding: 8px;
+    padding: 16rpx;
     position: relative;
 
   }
@@ -26,76 +27,76 @@
 
   .editor_toolbox {
     width: 100%;
-    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-    padding: 4px 8px;
+    background: $-rich-text-toolbox-bg-gradient;
+    padding: 8rpx 16rpx;
     box-sizing: border-box;
     flex-wrap: wrap;
-    gap: 4px;
+    gap: 8rpx;
     display: flex;
     align-items: center;
     border-bottom: 1px solid $-color-border-light;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+    box-shadow: $-rich-text-toolbox-shadow;
 
     .oxy-icon {
       cursor: pointer;
-      width: 32px;
-      height: 32px;
+      width: 64rpx;
+      height: 64rpx;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      border-radius: 6px;
+      border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       color: $-color-secondary;
-      font-size: 18px;
+      font-size: $-rich-text-toolbox-icon-size;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: $-rich-text-toolbox-icon-hover-bg;
         color: $-color-theme;
       }
 
       &:active {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: $-rich-text-toolbox-icon-active-bg;
       }
     }
 
     image {
-      width: 16px;
-      height: 16px;
+      width: 32rpx;
+      height: 32rpx;
       cursor: pointer;
-      padding: 8px;
-      border-radius: 6px;
+      padding: 16rpx;
+      border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       box-sizing: content-box;
       display: inline-block;
       vertical-align: middle;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: $-rich-text-toolbox-icon-hover-bg;
       }
 
       &:active {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: $-rich-text-toolbox-icon-active-bg;
       }
     }
 
     svg {
       cursor: pointer;
-      width: 16px;
-      height: 16px;
-      padding: 8px;
-      border-radius: 6px;
+      width: 32rpx;
+      height: 32rpx;
+      padding: 16rpx;
+      border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       box-sizing: content-box;
       display: inline-block;
       vertical-align: middle;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-        transform: translateY(-1px);
+        background-color: $-rich-text-toolbox-icon-hover-bg;
+        transform: translateY(-2rpx);
       }
 
       &:active {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: $-rich-text-toolbox-icon-active-bg;
         transform: translateY(0);
       }
     }
@@ -106,22 +107,22 @@
   }
 
   .dialog-title {
-    font-size: 16px;
-    line-height: 46px;
+    font-size: $-fs-title;
+    line-height: 100rpx;
     text-align: center;
-    height: 46px;
+    height: 100rpx;
     font-weight: $-fw-semibold;
     color: $-color-black;
 
   }
 
   .oxy-rich-text__popup {
-    padding: 0 12px 12px 12px;
+    padding: 0 24rpx 24rpx 24rpx;
 
     .oxy-rich-text__emoji-content {
       display: flex;
-      font-size: 20px;
-      line-height: 35px;
+      font-size: $-rich-text-emoji-fs;
+      line-height: 80rpx;
       text-align: center;
 
       .oxy-rich-text__emoji-block {
@@ -133,23 +134,23 @@
       border-top: 1px dashed $-rich-text-popup-divider-color;
       width: 80%;
       height: 0;
-      margin: 20px auto;
+      margin: 40rpx auto;
     }
 
     .oxy-rich-text__link-input {
-      margin-bottom: 16px;
+      margin-bottom: 32rpx;
 
       .oxy-rich-text__link-label {
-        font-size: 14px;
+        font-size: $-fs-content;
         color: $-color-secondary;
-        margin-bottom: 8px;
+        margin-bottom: 16rpx;
       }
     }
 
     .oxy-rich-text__link-buttons {
       display: flex;
-      gap: 12px;
-      margin-top: 20px;
+      gap: 24rpx;
+      margin-top: 40rpx;
 
       .oxy-button {
         flex: 1;

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

@@ -71,7 +71,7 @@
     .card {
         
         width: 80%;
-        margin: 10rpx auto;
+        margin: 12rpx auto;
         max-width: 700rpx;
         max-height: 140rpx;
         
@@ -82,7 +82,7 @@
         justify-content: space-between;
         align-items: center;
         
-        padding: 20rpx 0 20rpx 10rpx;
+        padding: 20rpx 0 20rpx 12rpx;
         border-radius: 12rpx;
         
         &-img {
@@ -119,4 +119,4 @@
             line-height: 37rpx;
         }
     }
-</style>
+</style>

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

@@ -3,7 +3,7 @@
     id="_root"
     class="mp-html"
     :class="(selectable ? '_select ' : '') + '_root'"
-    :style="(editable ? 'min-height:200px;' : '') + containerStyle"
+    :style="(editable ? 'min-height:400rpx;' : '') + containerStyle"
     @tap="_containTap"
   >
     <slot v-if="!nodes[0]" />
@@ -11,14 +11,19 @@
     <node v-else :childs="nodes" :opts="[lazyLoad, loadingImg, errorImg, showImgMenu, selectable, editable, placeholder, 'nodes']" name="span" />
     <!-- #endif -->
     <!-- #ifdef APP-PLUS-NVUE -->
-    <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <web-view
+      ref="web"
+      src="/static/app-plus/mp-html/local.html"
+      :style="'margin-top:' + toPx(-2) + ';height:' + toPx(height)"
+      @onPostMessage="_onMessage"
+    />
     <!-- #endif -->
-    <view v-if="tooltip" class="_tooltip_contain" :style="'top:' + tooltip.top + 'px'">
+    <view v-if="tooltip" class="_tooltip_contain" :style="'top:' + toPx(tooltip.top)">
       <view class="_tooltip">
         <view v-for="(item, index) in tooltip.items" v-bind:key="index" class="_tooltip_item" :data-i="index" @tap="_tooltipTap">{{ item }}</view>
       </view>
     </view>
-    <view v-if="slider" class="_slider" :style="'top:' + slider.top + 'px'">
+    <view v-if="slider" class="_slider" :style="'top:' + toPx(slider.top)">
       <slider
         :value="slider.value"
         :min="slider.min"
@@ -27,12 +32,12 @@
         block-size="14"
         show-value
         activeColor="white"
-        style="padding: 3px"
+        style="padding: 6rpx"
         @changing="_sliderChanging"
         @change="_sliderChange"
       />
     </view>
-    <view v-if="color" class="_tooltip_contain" :style="'top:' + color.top + 'px'">
+    <view v-if="color" class="_tooltip_contain" :style="'top:' + toPx(color.top)">
       <view class="_tooltip" style="overflow-y: hidden">
         <view
           v-for="(item, index) in color.items"
@@ -85,6 +90,7 @@ import highlight from './highlight/index.js'
 import latex from './latex/index.js'
 import style from './style/index.js'
 import editable from './editable/index.js'
+import { unitConvert } from '../../common/util'
 const plugins = [markdown, highlight, latex, style, editable]
 // #ifdef APP-PLUS-NVUE
 const dom = weex.requireModule('dom')
@@ -184,6 +190,9 @@ export default {
     this._hook('onDetached')
   },
   methods: {
+    toPx(value) {
+      return unitConvert(value, 0, { output: 'px' })
+    },
     _containTap() {
       if (!this._lock && !this.slider && !this.color) {
         this._edit = undefined
@@ -587,7 +596,7 @@ export default {
 /* #ifndef APP-PLUS-NVUE */
 /* 根节点样式 */
 ._root {
-  padding: 1px 0;
+  padding: 4rpx 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
@@ -602,8 +611,8 @@ export default {
 /* 提示条 */
 ._tooltip_contain {
   position: absolute;
-  right: 20px;
-  left: 20px;
+  right: 40rpx;
+  left: 40rpx;
   text-align: center;
 }
 
@@ -612,29 +621,29 @@ export default {
   display: inline-block;
   width: auto;
   max-width: 100%;
-  height: 30px;
-  padding: 0 3px;
+  height: 60rpx;
+  padding: 0 8rpx;
   overflow-x: auto;
   overflow-y: hidden;
-  font-size: 14px;
-  line-height: 30px;
+  font-size: var(--oxy-fs-content, 32rpx);
+  line-height: 60rpx;
   white-space: nowrap;
-  padding-bottom: 2px;
+  padding-bottom: 4rpx;
   border: 1px solid transparent;
 }
 
 ._tooltip::-webkit-scrollbar {
-  height: 4px;
+  height: 8rpx;
 }
 
 ._tooltip::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
+  border-radius: 4rpx;
 }
 
 ._tooltip::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 1);
-  border-radius: 2px;
+  border-radius: 4rpx;
 }
 
 ._tooltip::-webkit-scrollbar-thumb:hover {
@@ -645,16 +654,16 @@ export default {
   display: inline-block;
   width: auto;
   padding: 0 2vw;
-  line-height: 30px;
+  line-height: 60rpx;
   background-color: black;
   color: white;
 }
 
 ._color_item {
   display: inline-block;
-  width: 18px;
-  height: 18px;
-  margin: 5px 2vw;
+  width: 36rpx;
+  height: 36rpx;
+  margin: 12rpx 2vw;
   border: 1px solid #dfe2e5;
   border-radius: 50%;
 }
@@ -662,14 +671,14 @@ export default {
 /* 图片宽度滚动条 */
 ._slider {
   position: absolute;
-  left: 20px;
-  width: 220px;
+  left: 40rpx;
+  width: 440rpx;
 }
 
 ._tooltip,
 ._slider {
   background-color: black;
-  border-radius: 3px;
+  border-radius: 6rpx;
   opacity: 0.75;
 }
 </style>