oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-message-box/oxy-message-box.vue

@@ -5,14 +5,14 @@
       v-model="messageState.show"
       :close-on-click-modal="messageState.closeOnClickModal"
       :lazy-render="messageState.lazyRender"
-      :max-width="popupMaxWidth"
+      :max-width="popupWidth"
       custom-class="oxy-message-box"
       @click-modal="toggleModal('modal')"
       :z-index="messageState.zIndex"
       :duration="200"
       :root-portal="rootPortal"
     >
-      <view :class="rootClass" :style="containerStyle">
+      <view :class="rootClass">
         <view :class="bodyClass">
           <view v-if="messageState.title" class="oxy-message-box__title">
             {{ messageState.title }}
@@ -79,9 +79,8 @@ const bodyClass = computed(() => {
   return `oxy-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
 })
 
-const containerStyle = computed(() => {
-  const width = resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
-  return `width:${width};`
+const popupWidth = computed(() => {
+  return resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
 })
 
 const messageOptionKey = getMessageDefaultOptionKey(props.selector)

package/components/oxy-message-box/types.ts

@@ -134,11 +134,6 @@ export const messageBoxProps = {
    * @default '80%'
    */
   width: makeStringProp('80%'),
-  /**
-   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
-   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
-   */
-  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-navbar/index.scss

@@ -88,6 +88,6 @@
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 500;
+    z-index: $-z-index-fixed;
   }
 }

package/components/oxy-navbar/oxy-navbar.vue

@@ -52,7 +52,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-import { getRect, isDef, objToStyle, unitConvert } from '../common/util'
+import { convertPxToRpx, getRect, isDef, objToStyle, unitConvert } from '../common/util'
 import { navbarProps } from './types'
 
 const props = defineProps(navbarProps)
@@ -139,8 +139,7 @@ function setPlaceholderHeight() {
         const rectBottom = Number(res.bottom)
         const occupiedHeight =
           rectHeight > 0 ? rectHeight : !Number.isNaN(rectTop) && !Number.isNaN(rectBottom) ? Math.max(rectBottom - rectTop, 0) : 0
-        const pxPer100Rpx = uni.upx2px(100)
-        const occupiedHeightInRpx = pxPer100Rpx ? (occupiedHeight / pxPer100Rpx) * 100 : occupiedHeight * 2
+        const occupiedHeightInRpx = convertPxToRpx(occupiedHeight)
 
         placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
       })

package/components/oxy-pagination/index.scss

@@ -12,7 +12,7 @@
 
 @include b(pager) {
   user-select: none;
-  background-color: #fff;
+  background-color: $-pagination-bg;
 
   @include edeep(icon) {
     font-size: $-pagination-icon-size;
@@ -32,11 +32,12 @@
   }
   @include edeep(nav) {
     min-width: $-pagination-nav-width;
+    font-size: $-pagination-nav-fs;
     @include m(active){
-      color: rgba(0,0,0,0.65)      
+      color: $-pagination-nav-active-color;
     }
     @include m(disabled){
-      color: rgba(0,0,0,0.15)      
+      color: $-pagination-nav-disabled-color;
     }
   }
   @include e(size){
@@ -54,4 +55,4 @@
   @include e(current){
     color: $-pagination-nav-current-color;
   }
-}
+}

package/components/oxy-password-input/index.scss

@@ -51,11 +51,11 @@
     height: 100%;
     color: $-password-input-text-color;
     font-size: $-password-input-font-size;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     background: $-password-input-background;
 
     @include when(border) {
-      border: 1px solid $-password-input-border-color;
+      border: #{$-border-width-base} solid $-password-input-border-color;
 
       &:not(:last-child) {
         border-right: none;
@@ -80,7 +80,7 @@
     width: $-password-input-dot-size;
     height: $-password-input-dot-size;
     background: $-password-input-dot-color;
-    border-radius: 100%;
+    border-radius: $-radius-circle;
     transform: translate(-50%, -50%);
     visibility: hidden;
   }
@@ -121,4 +121,4 @@
   100% {
     opacity: 0;
   }
-}
+}

package/components/oxy-picker/index.scss

@@ -27,7 +27,7 @@
 
 @include b(picker) {
   @include edeep(popup) {
-    border-radius: 32rpx 32rpx 0 0;
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include edeep(cell) {
@@ -91,7 +91,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 48rpx 30rpx 28rpx 30rpx;
+    padding: 48rpx 32rpx 32rpx 32rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -109,23 +109,23 @@
   }
 
   @include e(search) {
-    padding: 0 32rpx 24rpx 32rpx;
-    background: #fff;
+    padding: 0 32rpx 28rpx 32rpx;
+    background: $-picker-search-bg;
   }
 
   @include e(search-input) {
     display: flex;
     align-items: center;
-    height: 72rpx;
+    height: 80rpx;
     padding: 0 24rpx;
-    background: #f5f5f5;
-    border-radius: 36rpx;
+    background: $-picker-column-select-bg;
+    border-radius: $-picker-search-radius;
 
     input {
       flex: 1;
       height: 100%;
-      margin-left: 16rpx;
-      font-size: 28rpx;
+      margin-left: 20rpx;
+      font-size: $-fs-content;
       background: transparent;
       border: none;
       outline: none;
@@ -133,8 +133,8 @@
   }
 
   @include e(search-icon) {
-    font-size: 32rpx;
-    color: #999;
+    font-size: $-picker-search-icon-size;
+    color: $-picker-search-icon-color;
   }
 
   @include e(search-clear) {
@@ -143,11 +143,11 @@
     justify-content: center;
     width: 32rpx;
     height: 32rpx;
-    margin-left: 8rpx;
+    margin-left: 12rpx;
   }
 
   @include e(search-clear-icon) {
-    font-size: 32rpx;
-    color: #999;
+    font-size: $-picker-search-icon-size;
+    color: $-picker-search-icon-color;
   }
 }

package/components/oxy-picker/types.ts

@@ -103,7 +103,7 @@ export const pickerProps = {
   /**
    * 选项总高度
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * 选项值对应的键名
    */

package/components/oxy-picker-view/index.scss

@@ -26,7 +26,7 @@
 
 @include b(picker-view) {
   position: relative;
-  padding: 20rpx 0;
+  padding: 24rpx 0;
 
   @include e(columns) {
     position: relative;
@@ -64,7 +64,7 @@
   }
 
   @include edeep(roller) {
-    background: rgba(245, 245, 245, 1);
+    background: $-picker-column-select-bg;
     z-index: 0;
 
     &::before,

package/components/oxy-picker-view/oxy-picker-view.vue

@@ -3,12 +3,12 @@
     <view class="oxy-picker-view__loading" v-if="loading">
       <oxy-loading :color="loadingColor" />
     </view>
-    <view :style="`height: ${(columnsHeight - 20) * 2}rpx;`">
+    <view :style="`height: ${innerColumnsHeight}rpx;`">
       <picker-view
         mask-class="oxy-picker-view__mask"
         indicator-class="oxy-picker-view__roller"
-        :indicator-style="`height: ${itemHeight * 2}rpx;`"
-        :style="`height: ${(columnsHeight - 20) * 2}rpx;`"
+        :indicator-style="`height: ${itemHeight}rpx;`"
+        :style="`height: ${innerColumnsHeight}rpx;`"
         :value="selectedIndex"
         :immediate-change="immediateChange"
         @change="onChange"
@@ -22,7 +22,7 @@
             :class="`oxy-picker-view-column__item ${row['disabled'] ? 'oxy-picker-view-column__item--disabled' : ''}  ${
               selectedIndex[colIndex] == rowIndex ? 'oxy-picker-view-column__item--active' : ''
             }`"
-            :style="`line-height: ${itemHeight * 2}rpx;`"
+            :style="`line-height: ${itemHeight}rpx;`"
           >
             {{ row[labelKey] }}
           </view>
@@ -44,13 +44,16 @@ export default {
 </script>
 <script lang="ts" setup>
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
-import { getCurrentInstance, ref, watch, nextTick } from 'vue'
+import { computed, getCurrentInstance, ref, watch, nextTick } from 'vue'
 import { deepClone, getType, isArray, isDef, isEqual, range } from '../common/util'
 import { formatArray, pickerViewProps, type ColumnItem, type PickerViewExpose } from './types'
 
 const props = defineProps(pickerViewProps)
 const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
 
+// Root has 24rpx vertical padding on top and bottom; compensate here to keep visual viewport stable.
+const innerColumnsHeight = computed(() => Math.max(props.columnsHeight - 48, props.itemHeight))
+
 const formatColumns = ref<ColumnItem[][]>([]) // 格式化后的列数据
 const selectedIndex = ref<Array<number>>([]) // 格式化之后，每列选中的下标集合
 

package/components/oxy-picker-view/types.ts

@@ -29,11 +29,11 @@ export const pickerViewProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * picker item的高度
    */
-  itemHeight: makeNumberProp(35),
+  itemHeight: makeNumberProp(70),
   /**
    * 选项对象中，value对应的 key
    */

package/components/oxy-popover/index.scss

@@ -5,17 +5,17 @@
   @include b(popover) {
 
     @include e(pos) {
-      background: rgb(75, 76, 77);
+      background: $-popover-dark-bg;
       color: $-dark-color;
-      box-shadow: 0 4rpx 20rpx 0 rgba(75, 76, 77, 0.1);
+      box-shadow: $-popover-dark-box-shadow;
     }
 
     @include e(menu) {
-      background: rgb(75, 76, 77);
+      background: $-popover-dark-bg;
     }
 
     @include e(inner) {
-      background-color: rgb(75, 76, 77);
+      background-color: $-popover-dark-bg;
     }
 
     @include e(menu-inner) {
@@ -23,7 +23,7 @@
       @include halfPixelBorder("top", 0, $-dark-border-color);
     }
 
-    @include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow);
+    @include squareArrow($-popover-arrow-size, $-popover-dark-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
 
   }
 }
@@ -34,8 +34,8 @@
 
   @include edeep(icon) {
     vertical-align: middle;
-    font-size: 36rpx;
-    margin-right: 10rpx;
+    font-size: $-popover-trigger-icon-size;
+    margin-right: 12rpx;
   }
 
   @include e(menu-inner) {
@@ -104,7 +104,7 @@
   }
 
   @include edeep(close-icon) {
-    font-size: 24rpx;
+    font-size: calc(2 * #{$-tooltip-close-size});
     position: absolute;
     right: -16rpx;
     top: -20rpx;

package/components/oxy-popup/index.scss

@@ -21,7 +21,7 @@
       position: fixed;
       max-height: 100%;
       overflow-y: auto;
-      background: #fff;
+      background: $-popup-bg;
     }
   }
 }
@@ -30,8 +30,8 @@
 @include b(popup) {
   @include edeep(close) {
     position: absolute;
-    top: 20rpx;
-    right: 20rpx;
+    top: 24rpx;
+    right: 24rpx;
     color: $-popup-close-color;
     font-size: $-popup-close-size;
     transform: rotate(-45deg);
@@ -81,4 +81,4 @@
     bottom: 0;
     left: 0;
   }
-}
+}

package/components/oxy-progress/index.scss

@@ -21,7 +21,7 @@
     position: relative;
     flex: 1;
     height: $-progress-height;
-    border-radius: calc($-progress-height / 2);
+    border-radius: $-progress-radius;
     background: $-progress-bg;
   }
   @include e(inner) {
@@ -30,7 +30,7 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-radius: calc($-progress-height / 2);
+    border-radius: $-progress-radius;
     background: $-progress-color;
     transition-property: width;
     transition-timing-function: linear;
@@ -48,7 +48,7 @@
   }
   @include edeep(label) {
     width: 60rpx;
-    margin-left: 18rpx;
+    margin-left: 20rpx;
     color: $-progress-label-color;
     font-size: $-progress-label-fs;
   }

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: 40rpx;
+    line-height: $-lh-base;
     word-break: break-all;
   }
   @include when(checked) {
@@ -109,8 +109,10 @@
 
   @include when(dot) {
     .oxy-radio__shape {
+      width: $-radio-dot-shape-size;
+      height: $-radio-dot-shape-size;
       border: 4rpx solid $-radio-dot-border-color;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       position: relative;
       display: inline-block;
       box-sizing: border-box;
@@ -123,8 +125,8 @@
         height: $-radio-dot-size;
         left: calc(50% - #{$-radio-dot-size / 2});
         top: calc(50% - #{$-radio-dot-size / 2});
-        border-radius: 50%;
-        background-color: #fff;
+        border-radius: $-radius-circle;
+        background-color: $-color-white;
         transform: scale(0);
         transition: transform .2s ease-in;
       }
@@ -145,17 +147,23 @@
   @include when(button) {
     display: inline-block;
     margin-top: 0;
-    margin-right: 20rpx;
+    margin-right: $-spacing-24;
 
     .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: 10rpx 30rpx;
+      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;
@@ -257,11 +265,11 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 26rpx 30rpx;
+    padding: 32rpx 32rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 28rpx 30rpx;
+      padding: 32rpx 32rpx;
     }
   }
 
@@ -288,6 +296,8 @@
 
     @include when(dot) {
       .oxy-radio__shape {
+        width: $-radio-dot-shape-large-size;
+        height: $-radio-dot-shape-large-size;
         &::before {
           width: $-radio-dot-large-size;
           height: $-radio-dot-large-size;

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

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

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

@@ -21,13 +21,9 @@
 
   }
 
-  :deep(.mp-html) {
-    // Styles are now handled via tagStyle prop
-  }
-
   .editor_toolbox {
     width: 100%;
-    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
+    background: $-rich-text-toolbox-bg-gradient;
     padding: 8rpx 16rpx;
     box-sizing: border-box;
     flex-wrap: wrap;
@@ -35,7 +31,7 @@
     display: flex;
     align-items: center;
     border-bottom: 1px solid $-color-border-light;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+    box-shadow: $-rich-text-toolbox-shadow;
 
     .oxy-icon {
       cursor: pointer;
@@ -44,18 +40,18 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      border-radius: 12rpx;
+      border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       color: $-color-secondary;
-      font-size: 36rpx;
+      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;
       }
     }
 
@@ -64,18 +60,18 @@
       height: 32rpx;
       cursor: pointer;
       padding: 16rpx;
-      border-radius: 12rpx;
+      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;
       }
     }
 
@@ -84,19 +80,19 @@
       width: 32rpx;
       height: 32rpx;
       padding: 16rpx;
-      border-radius: 12rpx;
+      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;
         transform: translateY(-2rpx);
       }
 
       &:active {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: $-rich-text-toolbox-icon-active-bg;
         transform: translateY(0);
       }
     }
@@ -107,10 +103,10 @@
   }
 
   .dialog-title {
-    font-size: 32rpx;
-    line-height: 92rpx;
+    font-size: $-fs-title;
+    line-height: 100rpx;
     text-align: center;
-    height: 92rpx;
+    height: 100rpx;
     font-weight: $-fw-semibold;
     color: $-color-black;
 
@@ -121,8 +117,8 @@
 
     .oxy-rich-text__emoji-content {
       display: flex;
-      font-size: 40rpx;
-      line-height: 70rpx;
+      font-size: $-rich-text-emoji-fs;
+      line-height: 80rpx;
       text-align: center;
 
       .oxy-rich-text__emoji-block {
@@ -138,12 +134,12 @@
     }
 
     .oxy-rich-text__link-input {
-      margin-bottom: 32rpx;
+      margin-bottom: $-spacing-32;
 
       .oxy-rich-text__link-label {
-        font-size: 28rpx;
+        font-size: $-fs-content;
         color: $-color-secondary;
-        margin-bottom: 16rpx;
+        margin-bottom: $-spacing-16;
       }
     }
 

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>