Merge pull request #20 from BQXBQX/dev-bqx

style(ui): optimized code #1 scss

packages/ui/lib/Accordion/Accordion.module.scss

@@ -1,9 +1,10 @@
 @use '../variables' as *;
+$animation-duration: $duration-300;
 .base {
   display: grid;
   grid-template-rows: 0fr 0fr;
   overflow: hidden;
-  transition: all 0.2s $cubic-bezier;
+  transition: all $animation-duration $cubic-bezier;
   &.show {
     grid-template-rows: 0fr 1fr;
   }
@@ -16,14 +17,14 @@
     font-size: 14px;
     padding: 16px 20px;
     font-weight: bolder;
-    transition: all 0.1s $cubic-bezier;
+    transition: all $animation-duration $cubic-bezier;
     &:hover:not(.disabled) {
-      background-color: #fcfcfc;
+      background-color: var(--pale-white);
       text-decoration: underline;
-      transition: all 0.1s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
     }
     .icon {
-      transition: all 0.2s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
       &.rotate {
         transform: rotate(180deg);
       }
@@ -39,7 +40,7 @@
     .inner {
       padding: 10px 20px;
       opacity: 0;
-      transition: all 0.2s ease-in;
+      transition: all $animation-duration ease-in;
       &.show {
         opacity: 1;
       }
@@ -48,6 +49,6 @@
   .divider {
     height: 1px;
     width: 100%;
-    background-color: #e5e5e5;
+    background-color: var(--border-white);
   }
 }

packages/ui/lib/Badge/Badge.module.scss

@@ -1,21 +1,22 @@
+@mixin color-badge($color-name) {
+  background-color: rgba(var(--#{$color-name}-color-background-rgb), 1);
+  color: var(--#{$color-name}-color);
+}
+
 .base {
   padding: 3px 10px;
   border-radius: 5px;
   &.info {
-    background-color: rgba(var(--primary-color-background-rgb), 1);
-    color: var(--primary-color);
+    @include color-badge(primary);
   }
   &.success {
-    background-color: rgba(var(--success-color-background-rgb), 1);
-    color: var(--success-color);
+    @include color-badge(success);
   }
   &.warning {
-    background-color: rgba(var(--warning-color-background-rgb), 1);
-    color: var(--warning-color);
+    @include color-badge(warning);
   }
   &.error {
-    background-color: rgba(var(--danger-color-background-rgb), 1);
-    color: var(--danger-color);
+    @include color-badge(danger);
   }
   &.medium {
     font-size: 14px;

packages/ui/lib/Calendar/Calendar.module.scss

@@ -1,4 +1,5 @@
 @use '../variables' as *;
+$animation-duration: $duration-300;
 .base {
   height: fit-content;
   width: fit-content;
@@ -51,7 +52,7 @@
         background-color: var(--background-blue);
         color: var(--primary-color);
         border-radius: $radius-5;
-        transition: all $duration-200 $cubic-bezier;
+        transition: all $animation-duration $cubic-bezier;
       }
       &.today {
         background-color: var(--background-blue);
@@ -62,7 +63,7 @@
         background-color: var(--primary-color);
         border-radius: 5px;
         color: var(--white-color);
-        transition: all 0.2s $cubic-bezier;
+        transition: all $animation-duration $cubic-bezier;
       }
     }
   }

packages/ui/lib/Card/Card.module.scss

@@ -1,15 +1,16 @@
 @use '../variables' as *;
+$radius: $radius-8;
 .base {
   height: fit-content;
-  border-radius: 6px;
+  border-radius: $radius;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   box-sizing: border-box;
   .titleImage {
-    border-radius: 6px 6px 0 0;
+    border-radius: $radius $radius 0 0;
     overflow: hidden;
     height: 300px;
     width: 100% !important;
@@ -18,7 +19,7 @@
       padding: 0;
       height: 300px;
       object-fit: cover;
-      transition: all 0.3s $cubic-bezier;
+      transition: all $duration-300 $cubic-bezier;
       &:hover {
         scale: 1.1;
       }

packages/ui/lib/Carousel/Carousel.module.scss

@@ -1,11 +1,12 @@
+@use '../variables' as *;
 .base {
   width: 400px;
   height: 200px;
   overflow: hidden;
   .carouselAll {
     display: grid;
     grid-auto-flow: column;
-    transition: all 0.4s cubic-bezier(0.65, 0.22, 0.27, 0.74);
+    transition: all 0.4s $cubic-bezier;
     .item {
       width: 400px;
       height: 200px;

packages/ui/lib/Carousel/Carousel.tsx

@@ -39,6 +39,10 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     { width = 400, CarouselItems = undefined, height, onChange, defaultSelected, selected },
     ref,
   ) => {
+    // The definition judgment of this rotating chart is determined by two factors,
+    // one is whether it has reached the halfway position,
+    // and the second is the speed of movement, when the dragging speed is greater than 0.5, it is automatically switched.
+    // 这个轮播图的界定判断由两个因素决定，一个是是否到达了一半的位置，第二个是移动的速度，当拖拽速度大于0.5时，自动进行切换。
     const [select, setSelect] = useState<number>(defaultSelected || 0);
     const [startX, setStartX] = useState<number>(0);
     const [endX, setEndX] = useState<number>(0);
@@ -88,6 +92,8 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       }
     }, [select, width, difference]);
 
+    // This is a half-position judgment
+    // 这个是一半位置的判断
     const handleMouseUp = (e: React.MouseEvent) => {
       setEndX(e.clientX);
       setEndTime(Date.now());
@@ -120,6 +126,8 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         const duration = endTime - startTime;
         const space = endX - startX;
         const v = space / duration;
+        // This is a speed judgment.
+        // 这个是速度的判断
         v < -0.5 && select !== itemsNumber - 1 && setSelect(select + 1);
         v > 0.5 && select != 0 && setSelect(select - 1);
       }

packages/ui/lib/DatePicker/DatePicker.module.scss

@@ -1,7 +1,9 @@
 @use '../variables' as *;
+$animation-duration: $duration-300;
+$border: $border-1;
 @mixin animation($type) {
   animation-name: #{$type};
-  animation-duration: $duration-200;
+  animation-duration: $animation-duration;
   animation-timing-function: $cubic-bezier;
   animation-fill-mode: forwards;
 }
@@ -10,31 +12,31 @@
   align-items: center;
   gap: 10px;
   color: var(--shadow-color) !important;
-  transition: all $duration-200 $cubic-bezier;
+  transition: all $animation-duration $cubic-bezier;
   padding: 10px 15px !important;
   width: 250px;
   height: 42px;
   border-radius: $radius-10;
-  border: $border-1 solid var(--shadow-color) !important;
+  border: $border solid var(--shadow-color) !important;
   font-size: $font-size-14 !important;
   padding: 11px !important;
   .select-date {
     color: var(--black-color) !important;
   }
   &.is-select-date {
-    border: $border-1 solid var(--primary-color) !important;
+    border: $border solid var(--primary-color) !important;
     color: var(--primary-color) !important;
     svg {
       fill: var(--primary-color) !important;
     }
   }
   svg {
     fill: var(--shadow-color);
-    transition: all $duration-200 $cubic-bezier;
+    transition: all $animation-duration $cubic-bezier;
   }
   &:hover {
     color: var(--primary-color) !important;
-    border: $border-1 solid var(--primary-color) !important;
+    border: $border solid var(--primary-color) !important;
     svg {
       fill: var(--primary-color);
     }

packages/ui/lib/Radio/Radio.module.scss

@@ -1,4 +1,5 @@
 @use '../variables' as *;
+$animation-duration: $duration-300;
 @mixin medium {
   width: 20px;
   height: 20px;
@@ -11,6 +12,44 @@
   width: 16px;
   height: 16px;
 }
+@mixin size-radio-content($size-name) {
+  @if $size-name == 'small' {
+    @include small();
+  }
+  @if $size-name == 'medium' {
+    @include medium();
+  }
+  @if $size-name == 'large' {
+    @include large();
+  }
+}
+
+@mixin size-radio($size-name) {
+  .radioItem {
+    @include size-radio-content($size-name);
+
+    &::before {
+      @include size-radio-content($size-name);
+    }
+
+    &::after {
+      @include size-radio-content($size-name);
+    }
+
+    &:checked::before {
+      @include size-radio-content($size-name);
+    }
+  }
+}
+
+@mixin color-radio($color-name) {
+  .radioItem {
+    &:checked::before {
+      background-color: var(--#{$color-name}-color);
+      box-shadow: 0 0px 6px rgba(var(--#{$color-name}-color-rgb), 0.4);
+    }
+  }
+}
 
 .base {
   display: flex;
@@ -27,42 +66,18 @@
     cursor: pointer;
   }
   &.primary {
-    .radioItem {
-      &:checked::before {
-        background-color: var(--primary-color);
-        box-shadow: 0 0px 6px rgba(var(--primary-color-rgb), 0.4);
-      }
-    }
+    @include color-radio(primary);
   }
   &.warning {
-    .radioItem {
-      &:checked::before {
-        background-color: var(--warning-color);
-        box-shadow: 0 0px 6px rgba(var(--warning-color-rgb), 0.4);
-      }
-    }
+    @include color-radio(warning);
   }
   &.danger {
-    .radioItem {
-      &:checked::before {
-        background-color: var(--danger-color);
-        box-shadow: 0 0px 6px rgba(var(--danger-color-rgb), 0.4);
-      }
-    }
+    @include color-radio(danger);
   }
   &.large {
     gap: 7px;
+    @include size-radio(large);
     .radioItem {
-      @include large();
-      &::before {
-        @include large();
-      }
-      &::after {
-        @include large();
-      }
-      &:checked::before {
-        @include large();
-      }
       &:checked::after {
         width: 10px;
         height: 10px;
@@ -74,17 +89,8 @@
   }
   &.medium {
     gap: 5px;
+    @include size-radio(medium);
     .radioItem {
-      @include medium();
-      &::before {
-        @include medium();
-      }
-      &::after {
-        @include medium();
-      }
-      &:checked::before {
-        @include medium();
-      }
       &:checked::after {
         width: 8px;
         height: 8px;
@@ -96,17 +102,8 @@
   }
   &.small {
     gap: 3px;
+    @include size-radio(small);
     .radioItem {
-      @include small();
-      &::before {
-        @include small();
-      }
-      &::after {
-        @include small();
-      }
-      &:checked::before {
-        @include small();
-      }
       &:checked::after {
         width: 6px;
         height: 6px;
@@ -120,7 +117,7 @@
     cursor: pointer;
     appearance: none;
     position: relative;
-    transition: all 0.25s $cubic-bezier;
+    transition: all $animation-duration $cubic-bezier;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -134,15 +131,15 @@
       box-sizing: border-box;
       display: inline-block;
       border-radius: 50%;
-      transition: all 0.2s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
     }
     &::after {
       content: '';
       border-radius: 50%;
       position: absolute;
       width: 100%;
       height: 100%;
-      transition: all 0.2s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
     }
     &:active {
       scale: 0.95;