oxy-uni-ui 2.0.0 → 2.1.0

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

@@ -27,7 +27,7 @@
 
   .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 +35,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 +44,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 +64,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 +84,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 +107,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 +121,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 {
@@ -141,7 +141,7 @@
       margin-bottom: 32rpx;
 
       .oxy-rich-text__link-label {
-        font-size: 28rpx;
+        font-size: $-fs-content;
         color: $-color-secondary;
         margin-bottom: 16rpx;
       }

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

@@ -596,7 +596,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 +622,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 +663,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

@@ -948,7 +948,7 @@ export default {
 
 /deep/ .md-th,
 /deep/ .md-td {
-  padding: 12rpx 26rpx !important;
+  padding: 12rpx 28rpx !important;
   border: 1px solid #dfe2e5;
 }
 
@@ -1001,7 +1001,7 @@ export default {
   }
 /* a 标签默认效果 */
 ._a {
-  padding: 3rpx 0 3rpx 0;
+  padding: 4rpx 0 4rpx 0;
   color: #366092;
   word-break: break-all;
 }

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

@@ -111,7 +111,7 @@ const emit = defineEmits<{
 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 +148,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 +244,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;

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

@@ -40,21 +40,24 @@
   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: 1.2;
     padding: 0 24rpx;
-    font-size: 28rpx;
+    font-size: $-fs-content;
     color: $-segmented-item-color;
     font-weight: 400;
 
@@ -64,17 +67,17 @@
 
     @include when(large) {
       min-height: 64rpx;
-      line-height: 64rpx;
+      line-height: 1.2;
       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: 1.2;
+      padding: 0 16rpx;
+      font-size: $-fs-secondary;
     }
 
     @include when(disabled) {
@@ -84,7 +87,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;

package/components/oxy-select/index.scss

@@ -11,19 +11,19 @@
   text-align: left;
   .oxy-select__label {
     margin: auto 0;
-    color: $-cell-title-color;
-    margin-right: $-cell-padding;
+    color: $-select-label-color;
+    margin-right: $-select-label-gap;
     box-sizing: border-box;
-    font-size: $-input-fs;
+    font-size: $-select-fs;
   }
   .oxy-select__icon {
     position: absolute;
     right: 0;
-    font-size: $-input-icon-size;
-    color: $-input-icon-color;
+    font-size: $-select-icon-size;
+    color: $-select-icon-color;
   }
   .oxy-select__icon-clear {
-    color: $-input-clear-color;
+    color: $-select-clear-icon-color;
   }
   .oxy-select__icon-arrow {
     transition: transform .2s;
@@ -36,12 +36,12 @@
     flex: 1;
   }
   .oxy-select__wrapper {
-    font-size: $-input-fs;
-    color: $-input-color;
+    font-size: $-select-fs;
+    color: $-select-text-color;
     border: 1px solid $-color-border;
     box-sizing: border-box;
-    border-radius: 8rpx;
-    padding: 0 $-input-cell-padding;
+    border-radius: $-select-wrapper-radius;
+    padding: 0 $-select-wrapper-padding-x;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
@@ -50,7 +50,7 @@
     flex-direction: row;
     width: 100%;
     flex: 1;
-    min-height: $-input-inner-height;
+    min-height: $-select-wrapper-min-height;
     transition: all 0.2s;
 
     &:hover:not(.is-disabled):not(.is-readonly) {
@@ -59,7 +59,7 @@
 
     &.is-focus:not(.is-disabled):not(.is-readonly) {
       border-color: $-color-theme;
-      box-shadow: 0 0 0 4rpx rgba($-color-theme, 0.1);
+      box-shadow: $-select-focus-shadow;
     }
 
     &.is-disabled {
@@ -91,55 +91,71 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    padding: 8rpx 0;
-
-    &-item {
-      font-size: 24rpx;
-      border-radius: 8rpx;
-      white-space: nowrap;
-      height: 48rpx;
-      padding: 0 16rpx;
-      line-height: 44rpx;
-      box-sizing: border-box;
-      margin: 4rpx 8rpx 4rpx 0;
-      display: flex;
-      max-width: 100%;
-      align-items: center;
-      background-color: $-color-bg;
-      border: 1px solid $-color-border-light;
-      color: $-color-secondary;
-      transition: all 0.2s;
+    min-width: 0;
+    padding: 12rpx 0;
+  }
 
-      &:hover {
-        border-color: $-color-theme;
-        color: $-color-theme;
-      }
+  .oxy-select__tags-item {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    margin: 8rpx 8rpx 8rpx 0;
+  }
 
-      &-text {
-        font-size: 24rpx;
-        white-space: nowrap;
-        line-height: 44rpx;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .oxy-select__icon-error{
-      margin-left: 8rpx;
-      font-size: 28rpx;
-      color: $-color-aid;
-      cursor: pointer;
-
-      &:hover {
-        color: $-color-danger;
-      }
+  :deep(.oxy-select__tags-item-tag.oxy-tag.is-round) {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 56rpx;
+    max-width: 100%;
+    height: 56rpx;
+    padding: 0 20rpx;
+    background-color: $-color-bg;
+    border-color: $-color-border-light;
+    border-radius: $-select-tag-radius;
+    color: $-color-secondary;
+    font-size: $-select-tag-font-size;
+    line-height: 52rpx;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $-color-theme;
+      color: $-color-theme;
     }
   }
 
+  :deep(.oxy-select__tags-item-tag .oxy-tag__text) {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+    vertical-align: middle;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close) {
+    margin-left: 12rpx;
+    margin-right: 0;
+    height: auto;
+    line-height: 1;
+    color: $-color-aid;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close:active) {
+    color: $-color-danger;
+  }
+
+  .oxy-select__tags-item-text {
+    font-size: $-select-tag-font-size;
+  }
+
   .oxy-select__input {
     flex: 1;
     font-size: $-fs-content;
-    height: 44rpx;
-    line-height: 44rpx;
+    height: 52rpx;
+    line-height: 52rpx;
   }
 
   .oxy-select__input-plac {
@@ -173,13 +189,45 @@
     width: 100%;
     background-color: $-color-white;
     border: 1px solid $-color-border-light;
-    border-radius: 16rpx;
-    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+    border-radius: $-select-dropdown-radius;
+    box-shadow: $-select-dropdown-shadow;
     z-index: 100;
-    padding: 12rpx 0;
+    padding: 16rpx 0;
     overflow: hidden;
   }
 
+  .oxy-select__dropdown-transition {
+    .oxy-select__selector {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      will-change: transform, opacity;
+      transition-property: opacity, transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .oxy-select__selector__down {
+      transform-origin: center top;
+    }
+
+    .oxy-select__selector__upwards {
+      transform-origin: center bottom;
+    }
+
+    &.oxy-fade-enter,
+    &.oxy-fade-leave-to {
+      .oxy-select__selector.oxy-select__selector__down {
+        opacity: 0;
+        transform: translateY(-12rpx) scale(0.98);
+      }
+
+      .oxy-select__selector.oxy-select__selector__upwards {
+        opacity: 0;
+        transform: translateY(12rpx) scale(0.98);
+      }
+    }
+  }
+
   .oxy-select__selector-scroll {
     /* #ifndef APP-NVUE */
     max-height: 480rpx;
@@ -192,10 +240,10 @@
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
-    min-height: 80rpx;
+    min-height: 88rpx;
     line-height: 1.4;
     font-size: $-fs-content;
-    padding: 16rpx 32rpx;
+    padding: 20rpx 32rpx;
     box-sizing: border-box;
     transition: background-color 0.2s;
   }
@@ -213,7 +261,7 @@
 
     &.oxy-select_selector-item_active {
       color: $-color-theme;
-      background-color: rgba($-color-theme, 0.05);
+      background-color: $-select-active-bg;
       font-weight: 500;
     }
   }
@@ -256,10 +304,10 @@
   }
 
   .oxy-select__selector-arrow {
-    filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
+    filter: $-select-dropdown-filter-shadow;
 
     left: 10%;
-    margin-right: 6rpx;
+    margin-right: 8rpx;
     border-top-width: 0;
     border-bottom-color: $-color-border-light;
   }
@@ -274,8 +322,8 @@
 
   .oxy-select__input-text {
     width: 100%;
-    font-size: $-input-fs;
-    color: $-input-color;
+    font-size: $-select-fs;
+    color: $-select-text-color;
     outline: none;
     border: none;
     background: none;
@@ -287,11 +335,11 @@
   .oxy-select__input-selector {
     position: absolute;
     z-index: 1;
-    left: 20rpx;
+    left: 0;
     right: 60rpx;
     width: auto;
     &::-webkit-input-placeholder {
-      color: $-input-placeholder-color;
+      color: $-select-placeholder-color;
     }
   }
 
@@ -301,12 +349,12 @@
     margin-left: 8rpx;
     flex: 1;
     &::-webkit-input-placeholder {
-      color: $-input-placeholder-color;
+      color: $-select-placeholder-color;
     }
   }
 
   .oxy-select__input-placeholder {
-    color: $-input-placeholder-color;
+    color: $-select-placeholder-color;
   }
 
   .oxy-select--mask {
@@ -322,7 +370,7 @@
     .oxy-select__wrapper {
       border: 0;
       padding: 0;
-      min-height: $-input-cell-height;
+      min-height: $-select-no-border-min-height;
       &.is-focus:not(.is-disabled):not(.is-readonly) {
         box-shadow: none;
       }