From ab7c131fce31c86d6951b570a931468a4a081867 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Fri, 4 Aug 2023 19:43:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20switch=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/switch.md                     |  6 ++-
 .../fighting-design/switch/src/switch.vue     |  6 ++-
 .../fighting-theme/src/checkbox-group.scss    | 40 ++++++++-----------
 packages/fighting-theme/src/switch.scss       | 15 +++++++
 4 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/docs/components/switch.md b/docs/components/switch.md
index 240ba0e227..1cd39a9772 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -90,7 +90,6 @@
 
 :::
 
-
 ## 加载状态
 
 `loading` 属性可以加载 `switch`
@@ -222,6 +221,7 @@
 | `modelValue / v-model` | 绑定值                     | string                                                             | ——                              | false  |
 | `size`                 | 组件尺寸                   | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
 | `disabled`             | 是否禁用                   | boolean                                                            | ——                              | false  |
+| `loading`              | 是否为加载状态             | boolean                                                            | ——                              | false  |
 | `icon`                 | 自定义 icon                | <a href="/components/interface.html#fightingicon">FightingIcon</a> | ——                              | ——     |
 | `close-color`          | 自定义关闭状态背景色       | string                                                             | ——                              | ——     |
 | `active-color`         | 自定义开启状态背景色       | string                                                             | ——                              | ——     |
@@ -249,6 +249,10 @@ import type { SwitchInstance, SwitchProps } from 'fighting-design'
   <f-avatar round src="https://avatars.githubusercontent.com/u/34115313?v=4" />
 </a>
 
+<a href="https://github.com/zhoufanglu" target="_blank">
+  <f-avatar round src="https://avatars.githubusercontent.com/u/24451091?v=4" />
+</a>
+
 <script setup lang="ts">
   import { ref } from 'vue'
   import { FIconSnowflake } from '@fighting-design/fighting-icon'
diff --git a/packages/fighting-design/switch/src/switch.vue b/packages/fighting-design/switch/src/switch.vue
index 2208c0b03d..52c8ae4f2b 100644
--- a/packages/fighting-design/switch/src/switch.vue
+++ b/packages/fighting-design/switch/src/switch.vue
@@ -34,7 +34,7 @@
 <template>
   <div
     role="switch"
-    :class="['f-switch', { 'f-switch__disabled': disabled | loading }]"
+    :class="['f-switch', { 'f-switch__disabled': disabled || loading }]"
     :style="styleList"
   >
     <!-- 左侧文字描述 -->
@@ -49,9 +49,11 @@
     <div :class="[classList, { 'f-switch__active': modelValue }]" @click="handleClick">
       <span :class="['f-switch__roll', { 'f-switch__roll-active': modelValue }]">
         <f-svg-icon v-if="icon && !loading" :icon="icon" :size="iconSize" />
+
+        <!-- loading icon -->
         <f-svg-icon
           v-if="loading"
-          class="f-button__loading-animation"
+          class="f-switch__loading-animation"
           :icon="FIconLoadingA"
           :size="iconSize"
         />
diff --git a/packages/fighting-theme/src/checkbox-group.scss b/packages/fighting-theme/src/checkbox-group.scss
index 73ce1b4d27..86f47480f4 100644
--- a/packages/fighting-theme/src/checkbox-group.scss
+++ b/packages/fighting-theme/src/checkbox-group.scss
@@ -35,43 +35,35 @@
     }
 
     // 不同尺寸
-    &.f-checkbox-group__large {
-      .f-checkbox {
-        padding: 4px 30px;
+    &.f-checkbox-group__large .f-checkbox {
+      padding: 4px 30px;
 
-        .f-checkbox__text {
-          font-size: 16px;
-        }
+      .f-checkbox__text {
+        font-size: 16px;
       }
     }
 
-    &.f-checkbox-group__middle {
-      .f-checkbox {
-        padding: 3px 25px;
+    &.f-checkbox-group__middle .f-checkbox {
+      padding: 3px 25px;
 
-        .f-checkbox__text {
-          font-size: 15px;
-        }
+      .f-checkbox__text {
+        font-size: 15px;
       }
     }
 
-    &.f-checkbox-group__small {
-      .f-checkbox {
-        padding: 2px 20px;
+    &.f-checkbox-group__small .f-checkbox {
+      padding: 2px 20px;
 
-        .f-checkbox__text {
-          font-size: 14px;
-        }
+      .f-checkbox__text {
+        font-size: 14px;
       }
     }
 
-    &.f-checkbox-group__mini {
-      .f-checkbox {
-        padding: 2px 15px;
+    &.f-checkbox-group__mini .f-checkbox {
+      padding: 2px 15px;
 
-        .f-checkbox__text {
-          font-size: 12px;
-        }
+      .f-checkbox__text {
+        font-size: 12px;
       }
     }
   }
diff --git a/packages/fighting-theme/src/switch.scss b/packages/fighting-theme/src/switch.scss
index 24757f6b9a..27b137ef16 100644
--- a/packages/fighting-theme/src/switch.scss
+++ b/packages/fighting-theme/src/switch.scss
@@ -44,6 +44,21 @@
         font-size: var(--switch-font-size);
         color: var(--switch-close-color, #bbbbbb);
       }
+
+      .f-switch__loading-animation {
+        animation: f-switch-loading-animation 1s linear infinite;
+      }
+
+      // loading 动画
+      @keyframes f-switch-loading-animation {
+        from {
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+        }
+      }
     }
 
     // 选中状态