oxy-uni-ui 2.0.0 → 2.1.0

package/components/oxy-img-cropper/index.scss

@@ -2,7 +2,7 @@
 @import "./../common/abstracts/variable.scss";
 
 @include b(img-cropper) {
-  background: rgba(0, 0, 0, 1);
+  background: $-img-cropper-bg;
   position: fixed;
   top: 0;
   left: 0;
@@ -13,7 +13,7 @@
   // 裁剪框包裹器
   @include e(wrapper) {
     position: relative;
-    background: rgba(0, 0, 0, 0.45);
+    background: $-img-cropper-wrapper-bg;
   }
 
   @include e(cut) {
@@ -30,11 +30,11 @@
     .oxy-img-cropper__cut--left,
     .oxy-img-cropper__cut--right {
       // 拖动中背景蒙层为0 拖动结束为0.85
-      background-color: rgba(0, 0, 0, 0.85);
+      background-color: $-img-cropper-mask-bg;
       transition: background 0.2s;
 
       @include when(hightlight) {
-        background-color: rgba(0, 0, 0, 0);
+        background-color: transparent;
       }
     }
 
@@ -55,7 +55,7 @@
       // 节选框的窗体最外部边缘线
       &::before {
         content: "";
-        border: 1px solid #fff;
+        border: 1px solid $-img-cropper-border-color;
         width: calc(200% - 1px);
         height: calc(200% - 1px);
         position: absolute;
@@ -77,7 +77,7 @@
           position: absolute;
           width: $border-size;
           height: 40rpx;
-          background-color: #fff;
+          background-color: $-img-cropper-border-color;
         }
 
         &::after {
@@ -85,7 +85,7 @@
           position: absolute;
           width: 40rpx;
           height: $border-size;
-          background-color: #fff;
+          background-color: $-img-cropper-border-color;
         }
       }
 
@@ -144,7 +144,7 @@
           display: inline-block;
           width: 66.66%;
           height: 200%;
-          border: 1px solid #fff;
+          border: 1px solid $-img-cropper-border-color;
           border-top: none;
           border-bottom: none;
           transform: scale(0.5) translate(0, -50%);
@@ -161,7 +161,7 @@
           display: inline-block;
           width: 200%;
           height: 66.66%;
-          border: 1px solid #fff;
+          border: 1px solid $-img-cropper-border-color;
           border-left: none;
           border-right: none;
           transform: scale(0.5) translate(-50%, 0);
@@ -183,7 +183,7 @@
 
   @include e(canvas) {
     position: fixed;
-    background: white;
+    background: $-img-cropper-canvas-bg;
     width: 300rpx;
     height: 300rpx;
     z-index: 10;
@@ -209,8 +209,8 @@
 
       .is-cancel {
         display: inline-block;
-        color: #fff;
-        font-size: 32rpx;
+        color: $-img-cropper-icon-color;
+        font-size: $-img-cropper-action-fs;
       }
 
       .is-confirm {
@@ -218,8 +218,8 @@
         right: 0;
         // height: 32px;
         width: 112rpx;
-        border-radius: 32rpx;
-        font-size: 32rpx;
+        border-radius: $-img-cropper-action-radius;
+        font-size: $-img-cropper-action-fs;
       }
     }
   }

package/components/oxy-index-anchor/index.scss

@@ -22,8 +22,8 @@
 
 @include b(index-anchor) {
   background-color: $-color-gray-2;
-  padding: 20rpx;
-  font-size: 28rpx;
+  padding: 24rpx;
+  font-size: $-fs-content;
   color: $-color-title;
 
   @include when(sticky){

package/components/oxy-index-bar/index.scss

@@ -22,15 +22,15 @@
   @include e(sidebar) {
     position: absolute;
     top: 50%;
-    right: 8rpx;
+    right: 12rpx;
     transform: translateY(-50%);
   }
 
   @include e(index) {
-    font-size: 24rpx;
+    font-size: $-index-bar-index-font-size;
     font-weight: $-fw-medium;
     color: $-color-title;
-    padding: 8rpx 12rpx;
+    padding: 12rpx 16rpx;
 
     @include when(active) {
       color: $-color-theme;

package/components/oxy-input/index.scss

@@ -301,7 +301,7 @@
   }
 
   @include e(count) {
-    margin-left: 30rpx;
+    margin-left: 32rpx;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;

package/components/oxy-keyboard/index.scss

@@ -18,7 +18,7 @@
   user-select: none;
 
   @include m(with-title) {
-    border-radius: 40rpx 40rpx 0 0;
+    border-radius: $-keyboard-panel-radius $-keyboard-panel-radius 0 0;
   }
 
   @include e(header) {
@@ -68,7 +68,7 @@
       flex-wrap: wrap;
 
       .oxy-key-wrapper {
-        --oxy-keyboard-key-font-size: 36rpx;
+        --oxy-keyboard-key-font-size: #{$-keyboard-car-key-font-size};
         flex-basis: 10%;
 
         @include m(wider) {

package/components/oxy-long-press-menu/index.scss

@@ -16,7 +16,7 @@
     width: 100%;
 
     @include when(active) {
-      background-color: rgba(0, 0, 0, 0.05); /* 长按时的高亮背景 */
+      background-color: $-long-press-menu-active-bg; /* 长按时的高亮背景 */
     }
   }
 
@@ -55,7 +55,7 @@
       top: 24rpx;
       bottom: 24rpx;
       width: 1px;
-      background-color: rgba(255, 255, 255, 0.2);
+      background-color: $-long-press-menu-divider-color;
     }
   }
 

package/components/oxy-message-box/index.scss

@@ -39,7 +39,7 @@
     padding: $-message-box-padding;
 
     @include when(no-title) {
-      padding: 50rpx 48rpx 0rpx;
+      padding: 56rpx 48rpx 0rpx;
     }
   }
 
@@ -47,10 +47,10 @@
     text-align: center;
     font-size: $-message-box-title-fs;
     color: $-message-box-title-color;
-    line-height: 40rpx;
+    line-height: 48rpx;
     font-weight: 500;
-    padding-top: 10rpx;
-    padding-bottom: 20rpx;
+    padding-top: 16rpx;
+    padding-bottom: 24rpx;
   }
 
   @include e(content) {
@@ -59,7 +59,7 @@
     font-size: $-message-box-content-fs;
     text-align: center;
     overflow: auto;
-    line-height: 40rpx;
+    line-height: 48rpx;
 
     &::-webkit-scrollbar {
       width: $-message-box-content-scrollbar-width;
@@ -73,8 +73,8 @@
   }
 
   @include e(input-error) {
-    min-height: 36rpx;
-    margin-top: 4rpx;
+    min-height: 40rpx;
+    margin-top: 8rpx;
     color: $-message-box-input-error-color;
     text-align: left;
 

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-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-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-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-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

@@ -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: 48rpx;
     word-break: break-all;
   }
   @include when(checked) {
@@ -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: 20rpx;
+    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: 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 +263,11 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 26rpx 30rpx;
+    padding: 32rpx 32rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 28rpx 30rpx;
+      padding: 32rpx 32rpx;
     }
   }
 

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

@@ -11,11 +11,11 @@
   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;