From 7242800607e202fd72c860fef837c9b995d62cf0 Mon Sep 17 00:00:00 2001
From: BQX <b22050106@njupt.edu.cn>
Date: Thu, 15 Feb 2024 13:35:51 +0800
Subject: [PATCH] style(ui): optimized code #1 scss

---
 .../ui/lib/Accordion/Accordion.module.scss    | 15 +--
 packages/ui/lib/Badge/Badge.module.scss       | 17 ++--
 packages/ui/lib/Calendar/Calendar.module.scss |  5 +-
 packages/ui/lib/Card/Card.module.scss         |  7 +-
 packages/ui/lib/Carousel/Carousel.module.scss |  3 +-
 packages/ui/lib/Carousel/Carousel.tsx         |  8 ++
 .../ui/lib/DatePicker/DatePicker.module.scss  | 14 +--
 packages/ui/lib/Radio/Radio.module.scss       | 99 +++++++++----------
 .../ui/lib/RadioGroup/RadioGroup.module.scss  |  5 +-
 packages/ui/lib/Select/Select.module.scss     |  5 +-
 packages/ui/lib/Switch/Switch.module.scss     | 93 +++++++++++------
 packages/ui/lib/Switch/Switch.tsx             |  4 +-
 packages/ui/lib/global.scss                   |  1 +
 13 files changed, 164 insertions(+), 112 deletions(-)

diff --git a/packages/ui/lib/Accordion/Accordion.module.scss b/packages/ui/lib/Accordion/Accordion.module.scss
index c231d88..3b3db36 100644
--- a/packages/ui/lib/Accordion/Accordion.module.scss
+++ b/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);
   }
 }
diff --git a/packages/ui/lib/Badge/Badge.module.scss b/packages/ui/lib/Badge/Badge.module.scss
index 065bf23..d4bb94a 100644
--- a/packages/ui/lib/Badge/Badge.module.scss
+++ b/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;
diff --git a/packages/ui/lib/Calendar/Calendar.module.scss b/packages/ui/lib/Calendar/Calendar.module.scss
index 4966775..15a9d90 100644
--- a/packages/ui/lib/Calendar/Calendar.module.scss
+++ b/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;
       }
     }
   }
diff --git a/packages/ui/lib/Card/Card.module.scss b/packages/ui/lib/Card/Card.module.scss
index 5acea9d..87cfbec 100644
--- a/packages/ui/lib/Card/Card.module.scss
+++ b/packages/ui/lib/Card/Card.module.scss
@@ -1,7 +1,8 @@
 @use '../variables' as *;
+$radius: $radius-8;
 .base {
   height: fit-content;
-  border-radius: 6px;
+  border-radius: $radius;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9,7 +10,7 @@
   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;
       }
diff --git a/packages/ui/lib/Carousel/Carousel.module.scss b/packages/ui/lib/Carousel/Carousel.module.scss
index 0838060..6fdb5b4 100644
--- a/packages/ui/lib/Carousel/Carousel.module.scss
+++ b/packages/ui/lib/Carousel/Carousel.module.scss
@@ -1,3 +1,4 @@
+@use '../variables' as *;
 .base {
   width: 400px;
   height: 200px;
@@ -5,7 +6,7 @@
   .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;
diff --git a/packages/ui/lib/Carousel/Carousel.tsx b/packages/ui/lib/Carousel/Carousel.tsx
index 8ede753..e5b9496 100644
--- a/packages/ui/lib/Carousel/Carousel.tsx
+++ b/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);
       }
diff --git a/packages/ui/lib/DatePicker/DatePicker.module.scss b/packages/ui/lib/DatePicker/DatePicker.module.scss
index bffb835..e92e30d 100644
--- a/packages/ui/lib/DatePicker/DatePicker.module.scss
+++ b/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,19 +12,19 @@
   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;
@@ -30,11 +32,11 @@
   }
   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);
     }
diff --git a/packages/ui/lib/Radio/Radio.module.scss b/packages/ui/lib/Radio/Radio.module.scss
index 0a79ce1..81e0a4b 100644
--- a/packages/ui/lib/Radio/Radio.module.scss
+++ b/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,7 +131,7 @@
       box-sizing: border-box;
       display: inline-block;
       border-radius: 50%;
-      transition: all 0.2s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
     }
     &::after {
       content: '';
@@ -142,7 +139,7 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      transition: all 0.2s $cubic-bezier;
+      transition: all $animation-duration $cubic-bezier;
     }
     &:active {
       scale: 0.95;
diff --git a/packages/ui/lib/RadioGroup/RadioGroup.module.scss b/packages/ui/lib/RadioGroup/RadioGroup.module.scss
index be6d8cf..0a1eb56 100644
--- a/packages/ui/lib/RadioGroup/RadioGroup.module.scss
+++ b/packages/ui/lib/RadioGroup/RadioGroup.module.scss
@@ -1,12 +1,13 @@
+$gap: 5px;
 .base {
   &.vertical {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: $gap;
   }
   &.horizontal {
     display: flex;
     flex-direction: row;
-    gap: 5px;
+    gap: $gap;
   }
 }
diff --git a/packages/ui/lib/Select/Select.module.scss b/packages/ui/lib/Select/Select.module.scss
index 5e20d35..69c5a0e 100644
--- a/packages/ui/lib/Select/Select.module.scss
+++ b/packages/ui/lib/Select/Select.module.scss
@@ -1,4 +1,5 @@
 @use '../variables' as *;
+$animation-duration: $duration-300;
 .options {
   position: absolute;
   width: 280px;
@@ -17,7 +18,7 @@
   opacity: 0;
   transform: scaleY(0);
   background-color: var(--white-color);
-  transition: all 0.2s $cubic-bezier;
+  transition: all $animation-duration $cubic-bezier;
   display: flex;
   .nothing-img-container {
     margin: 15px;
@@ -38,7 +39,7 @@
     height: 35px;
     display: flex;
     align-items: center;
-    transition: all 0.3s $cubic-bezier;
+    transition: all $animation-duration $cubic-bezier;
     &:hover {
       background-color: rgba(var(--shadow-color-rgb), 0.1);
       padding: 0 0 0 4px;
diff --git a/packages/ui/lib/Switch/Switch.module.scss b/packages/ui/lib/Switch/Switch.module.scss
index a6d157d..102192d 100644
--- a/packages/ui/lib/Switch/Switch.module.scss
+++ b/packages/ui/lib/Switch/Switch.module.scss
@@ -10,7 +10,7 @@ $animation-duration: $duration-300;
 $ball-margin: 5px;
 //这个是当滑动的圆球滚动到中间时拉长的宽度的倍数
 // This is a multiple of the elongated width of the sliding orb when it rolls to the center.
-$ball-center-width: 1.3;
+$ball-center-width: 1.1;
 
 $switch-sizes: (
   small: $switch-size-small,
@@ -22,6 +22,19 @@ $switch-sizes: (
   height: $size;
   width: 2 * $size;
   border-radius: calc(#{$size} / 2);
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -$size;
+    border-radius: 50%;
+    height: $size;
+    width: $size;
+    transform: translateY(-50%);
+    background-color: var(--primary-color);
+    z-index: 0;
+    transition: all $animation-duration $cubic-bezier;
+  }
   &::before {
     height: calc($size - $ball-margin);
     width: calc($size - $ball-margin);
@@ -31,6 +44,13 @@ $switch-sizes: (
   &.isChecked::before {
     animation-name: slide-not-checked-#{$size-name};
   }
+  &.isChecked::after {
+    content: '';
+    height: $size * 2;
+    width: $size * 2;
+    left: 0px;
+    transition: all $animation-duration $cubic-bezier;
+  }
 }
 
 @mixin animation($isChecked) {
@@ -69,41 +89,58 @@ $switch-sizes: (
 
 @include generate-animations($switch-sizes, $ball-margin, $ball-center-width);
 
-.base {
+@mixin background-size($size) {
+  border-radius: calc(#{$size} / 2);
+}
+
+.background {
   position: relative;
-  all: unset;
-  display: block;
-  background-color: var(--shadow-color);
-  box-shadow: $shadow-inner;
-  cursor: pointer;
-  transition: all $animation-duration $cubic-bezier;
+  overflow: hidden;
   &.medium {
     $switch-size-anim: $switch-size-medium;
-    @include switch-size($switch-size-medium, 'medium');
+    @include background-size($switch-size-medium);
   }
   &.large {
-    @include switch-size($switch-size-large, 'large');
+    @include background-size($switch-size-large);
   }
   &.small {
-    @include switch-size($switch-size-small, 'small');
+    @include background-size($switch-size-small);
   }
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    background-color: var(--white-color);
-    transform: translate(0, -50%);
-    @include animation('not-checked');
-  }
-  &.isChecked::before {
-    content: '';
-    @include animation('checked');
-  }
-  &.isChecked {
-    background-color: var(--primary-color);
+  .base {
+    position: relative;
+    all: unset;
+    display: block;
+    background-color: var(--shadow-color);
+    z-index: -1;
+    box-shadow: $shadow-inner;
+    cursor: pointer;
     transition: all $animation-duration $cubic-bezier;
-  }
-  &.disabled {
-    @include disabled;
+    &.medium {
+      $switch-size-anim: $switch-size-medium;
+      @include switch-size($switch-size-medium, 'medium');
+    }
+    &.large {
+      @include switch-size($switch-size-large, 'large');
+    }
+    &.small {
+      @include switch-size($switch-size-small, 'small');
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      background-color: var(--white-color);
+      transform: translate(0, -50%);
+      @include animation('not-checked');
+      z-index: 1;
+    }
+    &.isChecked::before {
+      content: '';
+      @include animation('checked');
+    }
+    &.disabled {
+      @include disabled;
+    }
   }
 }
diff --git a/packages/ui/lib/Switch/Switch.tsx b/packages/ui/lib/Switch/Switch.tsx
index deb145c..74cc392 100644
--- a/packages/ui/lib/Switch/Switch.tsx
+++ b/packages/ui/lib/Switch/Switch.tsx
@@ -52,14 +52,14 @@ export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     }, [isChecked, onchange]);
     return (
       <>
-        <div style={{ position: 'relative' }}>
+        <div className={`${styles['background']} ${styles[size]}`}>
           <button
             className={switchClass}
             onClick={() => setIsChecked(!isChecked)}
             ref={ref}
             disabled={disabled}
             {...rest}
-          />
+          ></button>
         </div>
       </>
     );
diff --git a/packages/ui/lib/global.scss b/packages/ui/lib/global.scss
index 66732b5..64d6d20 100644
--- a/packages/ui/lib/global.scss
+++ b/packages/ui/lib/global.scss
@@ -28,6 +28,7 @@
   font-family: sans-serif;
   --background-blue: #ecf2ff;
   --border-white: #f1f1f1;
+  --pale-white: #fcfcfc;
 }
 
 ::-webkit-scrollbar {