oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-file-list/index.scss

@@ -19,8 +19,8 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    border: 1px solid $-color-border;
-    border-radius: 16rpx;
+    border: #{$-border-width-base} solid $-color-border;
+    border-radius: $-file-list-card-radius;
     position: relative;
   }
   @include e(picture) {
@@ -28,7 +28,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 16rpx;
+    border-radius: $-file-list-card-radius;
   }
   @include e(icon) {
     width: 64rpx;
@@ -37,11 +37,11 @@
   @include e(name) {
     display: block;
     width: 100%;
-    font-size: $-upload-file-fs;
-    color: $-upload-file-color;
-    padding: 0 8rpx;
+    font-size: $-file-list-file-name-fs;
+    color: $-file-list-file-name-color;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 16rpx;
+    margin-top: 20rpx;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,16 +59,16 @@
     margin: 0;
     .oxy-file-list__list--item {
       width: 100%;
-      background: #f8f9ff;
-      padding: 16rpx 24rpx;
-      border-radius: 8rpx;
+      background: $-file-list-bg;
+      padding: 20rpx 24rpx;
+      border-radius: $-file-list-list-item-radius;
       display: flex;
       flex-direction: row;
       align-items: center;
       .oxy-file-list__icon {
         width: 48rpx;
         height: 48rpx;
-        margin-right: 16rpx;
+        margin-right: 20rpx;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -77,27 +77,27 @@
         padding: 0;
       }
       .oxy-file-list__download {
-        font-size: 36rpx;
-        color: $-cell-arrow-color;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
       }
       .oxy-file-list__delete {
-        font-size: 36rpx;
-        color: $-cell-arrow-color;
-        margin-left: 24rpx;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
+        margin-left: $-spacing-24;
       }
       & + .oxy-file-list__list--item {
-        margin-top: 16rpx;
+        margin-top: 20rpx;
       }
     }
   }
 
   .oxy-file-list__download-btn {
     position: absolute;
-    top: 12rpx;
-    right: 12rpx;
-    background: rgba(0, 0, 0, 0.45);
-    border-radius: 12rpx;
-    padding: 8rpx 10rpx;
+    top: 16rpx;
+    right: 16rpx;
+    background: $-file-list-download-bg;
+    border-radius: $-file-list-card-radius;
+    padding: 12rpx 16rpx;
     display: flex;
   }
   .oxy-file-list__download {

package/components/oxy-footer/index.scss

@@ -11,9 +11,9 @@
 @include b(footer) {
   overflow: visible;
   padding: 0;
-  background-color: $--footer-bg;
+  background-color: $-footer-bg;
   @include e(content) {
     overflow: visible;
-    padding: $--footer-padding;
+    padding: $-footer-padding;
   }
 }

package/components/oxy-footer/oxy-footer.vue

@@ -21,7 +21,7 @@ export default {
 <script setup lang="ts">
 import { getCurrentInstance, nextTick, onMounted, ref, computed, watch } from 'vue'
 import { footerProps } from './types'
-import { withDefaultUnit } from '../common/util'
+import { convertPxToRpx, withDefaultUnit } from '../common/util'
 import NodeInfo = UniNamespace.NodeInfo
 
 const props = defineProps(footerProps)
@@ -41,8 +41,7 @@ const contentStyle = computed(() => {
 
 // 设置内容高度（rpx 语义）
 function setHeight(val: number) {
-  const pxPer100Rpx = uni.upx2px(100)
-  const heightInRpx = pxPer100Rpx ? (val / pxPer100Rpx) * 100 : val * 2
+  const heightInRpx = convertPxToRpx(val)
   placeholderHeight.value = `${heightInRpx}rpx`
 }
 

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

@@ -1,11 +1,6 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-.oxy-theme-dark {
-  @include b(form-item) {
-  }
-}
-
 
 @include b(form-item) {
   @include e(error-message){

package/components/oxy-grid/oxy-grid.vue

@@ -73,7 +73,7 @@ watch(
 )
 
 const rootStyle = computed(() => {
-  return `${props.gutter ? 'padding-left:' + props.gutter * 2 + 'rpx;' + 'padding-bottom:' + props.gutter * 2 + 'rpx;' : ''}${props.customStyle}`
+  return `${props.gutter ? 'padding-left:' + props.gutter + 'rpx;' + 'padding-bottom:' + props.gutter + 'rpx;' : ''}${props.customStyle}`
 })
 
 const handleChildrenChange = debounce(() => {

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

@@ -140,7 +140,7 @@
   }
 
   @include e(text) {
-    margin-top: 16rpx;
+    margin-top: $-spacing-16;
     font-size: $-grid-item-fs;
     line-height: $-grid-item-fs;
     @include lineEllipsis;

package/components/oxy-guidance/index.scss

@@ -13,18 +13,18 @@
       box-sizing: content-box;
       height: 100%;
       width: 100%;
-      border: 1px dashed #fff;
-      border-radius: 8rpx;
+      border: 1px dashed $-guide-highlight-border-color;
+      border-radius: $-guide-highlight-radius;
       position: absolute;
       top: -8rpx;
       left: -8rpx;
-      padding: 6rpx;
+      padding: 8rpx;
     }
 
     @include e(arrow) {
       height: 20rpx;
       width: 20rpx;
-      background: #1cbbb4;
+      background: $-guide-tip-bg;
       position: absolute;
       top: 144rpx;
       left: 45%;
@@ -34,14 +34,14 @@
 
     @include e(tips) {
       width: 400rpx;
-      box-shadow: 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.1);
-      color: #fff;
+      box-shadow: $-guide-tip-shadow;
+      color: $-guide-tip-color;
       position: absolute;
       top: 152rpx;
       z-index: 10001;
-      padding: 15rpx 20rpx;
-      font-size: 28rpx;
-      border-radius: 12rpx;
+      padding: 16rpx 20rpx;
+      font-size: $-fs-content;
+      border-radius: $-guide-tip-radius;
       text-align: justify;
 
       @include e(tool-btn) {
@@ -52,14 +52,14 @@
         margin-top: 20rpx;
 
         @include e(next) {
-          background: #fff;
-          height: 48rpx;
+          background: $-guide-tip-action-bg;
+          height: $-size-48;
           width: 100rpx;
           text-align: center;
-          border-radius: 8rpx;
-          color: #666;
-          line-height: 48rpx;
-          font-size: 24rpx
+          border-radius: $-guide-tip-action-radius;
+          color: $-guide-tip-action-color;
+          line-height: $-lh-base;
+          font-size: $-fs-secondary;
         }
       }
     }

package/components/oxy-img/index.scss

@@ -14,6 +14,6 @@
 
   @include when(round) {
     overflow: hidden;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
   }
-}
+}

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;
@@ -204,22 +204,20 @@
       text-align: left;
       margin: 0 40rpx;
       padding-top: 4vh;
-      // line-height: 32px;
       box-sizing: border-box;
 
       .is-cancel {
         display: inline-block;
-        color: #fff;
-        font-size: 32rpx;
+        color: $-img-cropper-icon-color;
+        font-size: $-img-cropper-action-fs;
       }
 
       .is-confirm {
         position: absolute;
         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-img-lazy/index.scss

@@ -2,7 +2,6 @@
 @import "./../common/abstracts/variable.scss";
 
 @include b(img-lazy) {
-  // overflow: hidden;
   position: relative;
   @include e(image) {
     display: block;

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

@@ -10,26 +10,26 @@
 
 // #ifdef MP-DINGTALK
 @include b(index-anchor-ding) {
-  
+
   @include when(sticky){
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
   }
 }
 // #endif
 
 @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){
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: $-z-index-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

@@ -80,7 +80,7 @@
     height: 1px;
     background: $-input-border-color;
     transform: scaleY(0.5);
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color $-transition-duration-base ease-in-out;
   }
 
   @include when(not-empty) {
@@ -301,7 +301,7 @@
   }
 
   @include e(count) {
-    margin-left: 30rpx;
+    margin-left: $-spacing-32;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;

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

@@ -27,9 +27,9 @@
 }
 
 @include b(input-number) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   user-select: none;
-  line-height: 1.15;
 
   @include e(action) {
     position: relative;
@@ -61,6 +61,11 @@
       border-top-right-radius: calc($-input-number-radius * 2);
       border-bottom-right-radius: calc($-input-number-radius * 2);
     }
+
+    &:not(.is-disabled):active {
+      background-color: $-color-bg;
+    }
+
     @include when(disabled) {
       color: $-input-number-disabled-color;
     }
@@ -105,7 +110,10 @@
 
   @include edeep(action-icon) {
     position: absolute;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
     font-size: $-input-number-icon-size;
     width: $-input-number-icon-size;
     height: $-input-number-icon-size;
@@ -114,6 +122,16 @@
     transform: translate(-50%, -50%);
   }
 
+  @include when(focus) {
+    .oxy-input-number__action::after {
+      border-color: $-color-theme;
+    }
+    .oxy-input-number__input-border {
+      border-top-color: $-color-theme;
+      border-bottom-color: $-color-theme;
+    }
+  }
+
   @include when(disabled) {
     .oxy-input-number__input {
       color: $-input-number-disabled-color;

package/components/oxy-input-number/oxy-input-number.vue

@@ -1,5 +1,10 @@
 <template>
-  <view :class="`oxy-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
+  <view
+    :class="`oxy-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''} ${
+      isFocused ? 'is-focus' : ''
+    }`"
+    :style="customStyle"
+  >
     <!-- 减号按钮 -->
     <view
       :class="`oxy-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
@@ -76,6 +81,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: number | string): void
 }>()
 const inputValue = ref<string | number>(getInitValue())
+const isFocused = ref(false)
 let longPressTimer: ReturnType<typeof setTimeout> | null = null
 
 /**
@@ -414,6 +420,7 @@ function handleInput(event: any) {
  * 处理失焦事件
  */
 function handleBlur(event: any) {
+  isFocused.value = false
   const val = event.detail.value || ''
   updateValue(val)
   emit('blur', { value: val })
@@ -423,6 +430,7 @@ function handleBlur(event: any) {
  * 处理聚焦事件
  */
 function handleFocus(event: any) {
+  isFocused.value = true
   emit('focus', event.detail)
 }
 

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) {
@@ -90,7 +90,7 @@
     background-color: transparent;
     border: none;
     @include m(hover) {
-      opacity: 0.6;
+      opacity: $-opacity-disabled;
     }
   }
 

package/components/oxy-link/index.scss

@@ -3,15 +3,16 @@
 
 @include b(link) {
   display: inline-block;
-  @include e(medium) {
+
+  @include m(medium) {
     font-size: $-link-font-size-medium;
   }
 
-  @include e(small) {
+  @include m(small) {
     font-size: $-link-font-size-small;
   }
 
-  @include e(large) {
+  @include m(large) {
     font-size: $-link-font-size-large;
   }
 
@@ -44,14 +45,14 @@
   }
 
   @include when(disabled) {
-    opacity: .6;
+    opacity: $-opacity-disabled;
   }
 
-  &__prefix-icon:not(:empty) + &__content:not(:empty) {
-	    padding-left: 8rpx;
-	}
+  .#{$B}__prefix-icon:not(:empty) + .#{$B}__content:not(:empty) {
+    padding-left: 8rpx;
+  }
 
-	&__content:not(:empty) + &__suffix-icon:not(:empty) {
-	    padding-left: 8rpx;
-	}
+  .#{$B}__content:not(:empty) + .#{$B}__suffix-icon:not(:empty) {
+    padding-left: 8rpx;
+  }
 }

package/components/oxy-loading/index.scss

@@ -12,7 +12,7 @@
   @include e(body) {
     width: 100%;
     height: 100%;
-    animation: oxy-rotate 0.8s linear infinite;
+    animation: oxy-rotate linear infinite;
     animation-duration: 2s;
 
   }

package/components/oxy-loadmore/index.scss

@@ -15,7 +15,7 @@
 
   @include edeep(loading) {
     display: inline-block;
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
     vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;

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;
-    font-weight: 500;
-    padding-top: 10rpx;
-    padding-bottom: 20rpx;
+    line-height: $-lh-base;
+    font-weight: $-fw-medium;
+    padding-top: $-spacing-16;
+    padding-bottom: $-spacing-24;
   }
 
   @include e(content) {
@@ -59,7 +59,7 @@
     font-size: $-message-box-content-fs;
     text-align: center;
     overflow: auto;
-    line-height: 40rpx;
+    line-height: $-lh-base;
 
     &::-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;
 
@@ -89,7 +89,7 @@
   
   @include edeep(actions-btn) {
     &:not(:last-child) {
-      margin-right: 32rpx;
+      margin-right: $-spacing-32;
     }
   }
 
@@ -104,6 +104,6 @@
   }
 
   @include e(cancel) {
-    margin-right: 32rpx;
+    margin-right: $-spacing-32;
   }
 }