oxy-uni-ui 2.1.0 → 2.1.2

package/components/oxy-voice-player/index.scss

@@ -4,7 +4,7 @@
 /* voice-player component variables */
 $-voice-player-bg: var(--oxy-voice-player-bg, resultColor(135deg, $-color-theme, 'dark' 'light', #4d80f0 #764ba2, 0% 100%)) !default;
 $-voice-player-bg-dark: var(--oxy-voice-player-bg-dark, linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)) !default;
-$-voice-player-radius: var(--oxy-voice-player-radius, 24rpx) !default;
+$-voice-player-radius: var(--oxy-voice-player-radius, $-radius-xl) !default;
 $-voice-player-shadow: var(--oxy-voice-player-shadow, 0 20rpx 60rpx rgba(0, 0, 0, 0.15)) !default;
 $-voice-player-playing-shadow: var(--oxy-voice-player-playing-shadow, 0 20rpx 60rpx rgba(102, 126, 234, 0.3)) !default;
 
@@ -76,7 +76,7 @@ $-voice-player-extra-btn-icon-shadow: var(--oxy-voice-player-extra-btn-icon-shad
 $-voice-player-extra-btn-favorite-color: var(--oxy-voice-player-extra-btn-favorite-color, #ff4757) !default;
 
 $-voice-player-volume-panel-bg: var(--oxy-voice-player-volume-panel-bg, rgba(255, 255, 255, 0.15)) !default;
-$-voice-player-volume-panel-radius: var(--oxy-voice-player-volume-panel-radius, 16rpx) !default;
+$-voice-player-volume-panel-radius: var(--oxy-voice-player-volume-panel-radius, $-radius-lg) !default;
 $-voice-player-volume-panel-shadow: var(--oxy-voice-player-volume-panel-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-volume-track-height: var(--oxy-voice-player-volume-track-height, 3rpx) !default;
 $-voice-player-volume-track-radius: var(--oxy-voice-player-volume-track-radius, 2rpx) !default;
@@ -207,7 +207,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     display: flex;
     justify-content: center;
     margin-bottom: 40rpx;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.4s $-transition-timing-function-base;
     opacity: 1;
     transform: translateX(0);
     max-height: 500rpx;
@@ -237,11 +237,11 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(cover-disc) {
     width: 100%;
     height: 100%;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     position: relative;
     overflow: hidden;
     box-shadow: $-voice-player-cover-shadow;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.4s $-transition-timing-function-base;
     transform-origin: center center;
 
     @include when(rotating) {
@@ -257,7 +257,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(cover-image) {
     width: 100%;
     height: 100%;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     display: block;
     object-fit: cover;
   }
@@ -269,7 +269,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     transform: translate(-50%, -50%);
     width: $-voice-player-cover-center-size;
     height: $-voice-player-cover-center-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     background: $-voice-player-cover-center-bg;
     box-shadow: $-voice-player-cover-center-shadow;
     z-index: 2;
@@ -282,7 +282,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       transform: translate(-50%, -50%);
       width: $-voice-player-cover-center-dot-size;
       height: $-voice-player-cover-center-dot-size;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       background: $-voice-player-cover-center-dot-bg;
       box-shadow: $-voice-player-cover-center-dot-shadow;
     }
@@ -291,7 +291,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(info) {
     text-align: center;
     margin-bottom: 40rpx;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.4s $-transition-timing-function-base;
     opacity: 1;
     transform: translateX(0);
     max-height: 200rpx;
@@ -311,7 +311,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(song-title) {
     display: block;
     font-size: $-voice-player-title-fs;
-    font-weight: 600;
+    font-weight: $-fw-semibold;
     color: $-voice-player-title-color;
     margin-bottom: 20rpx;
     text-shadow: $-voice-player-title-shadow;
@@ -335,7 +335,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(lyrics) {
     height: $-voice-player-lyric-height;
     margin-bottom: 32rpx;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.4s $-transition-timing-function-base;
     background: transparent;
     overflow: hidden;
 
@@ -361,7 +361,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     @include when(active) {
       .oxy-voice-player__lyric-text {
         font-size: $-voice-player-lyric-active-fs;
-        font-weight: 600;
+        font-weight: $-fw-semibold;
         color: $-voice-player-lyric-active-color;
         text-shadow: $-voice-player-lyric-active-shadow;
       }
@@ -405,14 +405,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(current-time) {
     font-size: $-voice-player-time-fs;
     color: $-voice-player-time-color;
-    font-weight: 500;
+    font-weight: $-fw-medium;
     text-shadow: $-voice-player-time-shadow;
   }
 
   @include e(total-time) {
     font-size: $-voice-player-time-fs;
     color: $-voice-player-time-color;
-    font-weight: 500;
+    font-weight: $-fw-medium;
     text-shadow: $-voice-player-time-shadow;
   }
 
@@ -466,9 +466,9 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: $-voice-player-progress-dot-size;
     height: $-voice-player-progress-dot-size;
     background: $-voice-player-progress-dot-bg;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     box-shadow: $-voice-player-progress-dot-shadow;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-base $-transition-timing-function-base;
     opacity: 0;
 
     @include when(dragging) {
@@ -510,13 +510,13 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(control-btn) {
     width: $-voice-player-control-btn-size;
     height: $-voice-player-control-btn-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     border: none;
     background: $-voice-player-control-btn-bg;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     box-shadow: $-voice-player-control-btn-shadow;
 
     &:active {
@@ -549,13 +549,13 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(extra-btn) {
     width: $-voice-player-extra-btn-size;
     height: $-voice-player-extra-btn-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     border: none;
     background: $-voice-player-extra-btn-bg;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     box-shadow: $-voice-player-extra-btn-shadow;
 
     &:active {
@@ -624,10 +624,10 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: $-voice-player-volume-dot-size;
     height: $-voice-player-volume-dot-size;
     background: $-voice-player-volume-dot-bg;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     box-shadow: $-voice-player-volume-dot-shadow;
     opacity: 0;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-base $-transition-timing-function-base;
   }
 
   @include e(volume-slider) {
@@ -643,7 +643,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(volume-text) {
     font-size: $-voice-player-volume-text-fs;
     color: $-voice-player-volume-text-color;
-    font-weight: 500;
+    font-weight: $-fw-medium;
     min-width: 70rpx;
     text-align: right;
     text-shadow: $-voice-player-volume-text-shadow;
@@ -658,7 +658,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     box-shadow: $-voice-player-mini-shadow;
     min-width: 0;
     overflow: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
   }
 
   @include e(mini-cover) {
@@ -673,11 +673,11 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-cover-disc) {
     width: $-voice-player-mini-cover-size;
     height: $-voice-player-mini-cover-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     position: relative;
     overflow: hidden;
     box-shadow: $-voice-player-mini-cover-shadow;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
 
     @include when(rotating) {
       animation: rotateDisc 20s linear infinite;
@@ -691,7 +691,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-cover-image) {
     width: $-voice-player-mini-cover-size;
     height: $-voice-player-mini-cover-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     display: block;
     object-fit: cover;
   }
@@ -703,7 +703,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     transform: translate(-50%, -50%);
     width: $-voice-player-mini-cover-center-size;
     height: $-voice-player-mini-cover-center-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     background: $-voice-player-mini-cover-center-bg;
     box-shadow: $-voice-player-mini-cover-center-shadow;
     z-index: 2;
@@ -716,7 +716,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       transform: translate(-50%, -50%);
       width: $-voice-player-mini-cover-center-dot-size;
       height: $-voice-player-mini-cover-center-dot-size;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       background: $-voice-player-cover-center-dot-bg;
       box-shadow: $-voice-player-mini-cover-center-dot-shadow;
     }
@@ -732,7 +732,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-title) {
     display: block;
     font-size: $-voice-player-mini-title-fs;
-    font-weight: 600;
+    font-weight: $-fw-semibold;
     color: $-voice-player-mini-title-color;
     margin-bottom: 8rpx;
     overflow: hidden;
@@ -759,13 +759,13 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-control-btn) {
     width: $-voice-player-mini-control-btn-size;
     height: $-voice-player-mini-control-btn-size;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     border: none;
     background: $-voice-player-control-btn-bg;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     box-shadow: $-voice-player-control-btn-shadow;
 
     &:active {
@@ -816,7 +816,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       width: $-voice-player-mini-progress-dot-size;
       height: $-voice-player-mini-progress-dot-size;
       background: $-voice-player-mini-progress-dot-bg;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       box-shadow: $-voice-player-mini-progress-dot-shadow;
       opacity: 0;
       transition: opacity 0.2s ease;
@@ -839,13 +839,13 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(simple-current-time) {
     font-size: $-voice-player-simple-time-fs;
     color: $-voice-player-simple-time-color;
-    font-weight: 500;
+    font-weight: $-fw-medium;
   }
 
   @include e(simple-total-time) {
     font-size: $-voice-player-simple-time-fs;
     color: $-voice-player-simple-time-color;
-    font-weight: 500;
+    font-weight: $-fw-medium;
   }
 
   @include e(simple-progress-section) {
@@ -888,7 +888,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       width: $-voice-player-simple-progress-dot-size;
       height: $-voice-player-simple-progress-dot-size;
       background: $-voice-player-simple-progress-dot-bg;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       box-shadow: $-voice-player-simple-progress-dot-shadow;
       opacity: 0;
       transition: opacity 0.2s ease;

package/components/oxy-watermark/index.scss

@@ -4,7 +4,7 @@
 @include b(watermark) {
   position: absolute;
   z-index: 1100;
-  opacity: 0.5;
+  opacity: $-opacity-muted;
   left: 0;
   right: 0;
   top: 0;

package/dev-tools.ts

@@ -0,0 +1,2 @@
+export { default as devTools } from './oxy-dev-tools/index'
+export { default as OxyDevTools } from './oxy-dev-tools/oxy-dev-tools.vue'

package/devTools/components/DevToolsOverlay.vue

@@ -0,0 +1,56 @@
+<template>
+  <view v-show="visible" class="devtools-overlay">
+    <view class="devtools-overlay__bg" @click="hide" />
+    <view class="devtools-overlay__panel" @click.stop>
+      <mainView />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import mainView from '../page/components/main.vue'
+
+const visible = ref(false)
+
+function show() {
+  visible.value = true
+}
+
+function hide() {
+  visible.value = false
+  uni.$emit('devTools_overlay_hidden')
+}
+
+onMounted(() => {
+  uni.$on('devTools_overlay_show', show)
+  uni.$on('devTools_overlay_hide', hide)
+})
+
+onBeforeUnmount(() => {
+  uni.$off('devTools_overlay_show', show)
+  uni.$off('devTools_overlay_hide', hide)
+})
+</script>
+
+<style lang="scss" scoped>
+.devtools-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  overflow: hidden;
+}
+
+.devtools-overlay__bg {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.devtools-overlay__panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>