From 823aa2b3141375eaa2b8b05da0234ce6d747fcd7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 1 Jul 2026 05:21:27 +0000
Subject: [PATCH 1/4] Initial plan


From eee66864d2aef3e4439cff99096a185727bfa67e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 1 Jul 2026 05:30:20 +0000
Subject: [PATCH 2/4] feat(Switch): add round and line appearance variants

- Add `round` appearance: rectangular track with medium (6px) border-radius
  on the track and small (2px) border-radius on the handle
- Add `line` appearance: thin 4px track drawn via ::before pseudo-element
  with a full-height circle handle; suppresses active-state expansion animation
- Add CSS variables: @switch-round-track-border-radius,
  @switch-round-handle-border-radius, @switch-line-track-height,
  @switch-line-track-height-s
- Handle all sizes (l, default, s), states (hover, checked, loading, disabled)
  with correct CSS specificity for size variant overrides

Closes #2563
---
 style/web/components/switch/_index.less | 154 ++++++++++++++++++++++++
 style/web/components/switch/_var.less   |   8 ++
 2 files changed, 162 insertions(+)

diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index 94cf883d18..6ca20a5241 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -271,3 +271,157 @@
     }
   }
 }
+
+// Round appearance: rectangular track with rounded corners
+.@{prefix}-switch.@{prefix}-switch--round {
+  border-radius: @switch-round-track-border-radius;
+
+  .@{prefix}-switch__handle {
+    border-radius: @switch-round-handle-border-radius;
+
+    &::before {
+      border-radius: @switch-round-handle-border-radius;
+    }
+  }
+}
+
+// Line appearance: thin track line with a full-height circle handle
+.@{prefix}-switch--line {
+  background-color: transparent;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: @switch-line-track-height;
+    background-color: @switch-unchecked-bg-color;
+    border-radius: @border-radius-round;
+    transition: @switch-transition;
+  }
+
+  &:hover {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-hover;
+    }
+  }
+
+  &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+    .@{prefix}-switch__handle::before {
+      left: 0;
+      right: 0;
+    }
+
+    &.@{prefix}-is-checked {
+      .@{prefix}-switch__handle::before {
+        right: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .@{prefix}-switch__handle {
+    top: 0;
+    left: 0;
+    width: @switch-height-default;
+    height: @switch-height-default;
+  }
+
+  &.@{prefix}-is-checked {
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-checked-bg-color-hover;
+      }
+    }
+
+    &::before {
+      background-color: @switch-checked-bg-color;
+    }
+
+    .@{prefix}-switch__handle {
+      top: 0;
+      left: 100%;
+      transform: translate(-100%, 0);
+      width: @switch-height-default;
+      height: @switch-height-default;
+    }
+  }
+
+  &.@{prefix}-is-loading {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-loading;
+    }
+
+    &.@{prefix}-is-checked::before {
+      background-color: @switch-checked-bg-color-loading;
+    }
+  }
+
+  &.@{prefix}-is-disabled {
+    background-color: transparent;
+
+    &::before {
+      background-color: @switch-unchecked-bg-color-disabled;
+    }
+
+    &.@{prefix}-is-checked::before {
+      background-color: @switch-checked-bg-color-disabled;
+    }
+  }
+}
+
+.@{prefix}-switch--line.@{prefix}-size-l {
+  &::before {
+    height: @switch-line-track-height;
+  }
+
+  .@{prefix}-switch__handle {
+    top: 0;
+    left: 0;
+    width: @switch-height-l;
+    height: @switch-height-l;
+  }
+
+  &.@{prefix}-is-checked {
+    .@{prefix}-switch__handle {
+      top: 0;
+      left: 100%;
+      transform: translate(-100%, 0);
+      width: @switch-height-l;
+      height: @switch-height-l;
+    }
+  }
+}
+
+.@{prefix}-switch--line.@{prefix}-size-s {
+  &::before {
+    height: @switch-line-track-height-s;
+  }
+
+  .@{prefix}-switch__handle {
+    top: 0;
+    left: 0;
+    width: @switch-height-s;
+    height: @switch-height-s;
+  }
+
+  &.@{prefix}-is-checked {
+    .@{prefix}-switch__handle {
+      top: 0;
+      left: 100%;
+      transform: translate(-100%, 0);
+      width: @switch-height-s;
+      height: @switch-height-s;
+    }
+  }
+}
diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less
index 34a038da8b..38944f036d 100644
--- a/style/web/components/switch/_var.less
+++ b/style/web/components/switch/_var.less
@@ -72,3 +72,11 @@
 @switch-content-transition:
   padding @anim-duration-base @anim-time-fn-easing,
   opacity @anim-duration-base linear;
+
+// round 外观变量
+@switch-round-track-border-radius: @border-radius-medium;
+@switch-round-handle-border-radius: @border-radius-small;
+
+// line 外观变量
+@switch-line-track-height: 4px;
+@switch-line-track-height-s: 3px;

From 8a5204a64f141c29d620d1eb21c548667bab124d Mon Sep 17 00:00:00 2001
From: Wesley <985189328@qq.com>
Date: Thu, 2 Jul 2026 14:04:01 +0800
Subject: [PATCH 3/4] chore: optimize

---
 style/web/components/switch/_index.less | 89 +++++++++++++------------
 style/web/components/switch/_var.less   | 13 +++-
 2 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index 6ca20a5241..b46ca907cc 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -272,21 +272,41 @@
   }
 }
 
-// Round appearance: rectangular track with rounded corners
-.@{prefix}-switch.@{prefix}-switch--round {
-  border-radius: @switch-round-track-border-radius;
+// 矩形风格
+.@{prefix}-switch.@{prefix}-switch--rectangle {
+  border-radius: @switch-rectangle-track-border-radius;
 
   .@{prefix}-switch__handle {
-    border-radius: @switch-round-handle-border-radius;
+    border-radius: @switch-rectangle-handle-border-radius;
 
     &::before {
-      border-radius: @switch-round-handle-border-radius;
+      border-radius: @switch-rectangle-handle-border-radius;
     }
   }
 }
 
-// Line appearance: thin track line with a full-height circle handle
-.@{prefix}-switch--line {
+.@{prefix}-switch--rectangle.@{prefix}-size-l {
+  .@{prefix}-switch__handle {
+    border-radius: @switch-rectangle-handle-border-radius-l;
+
+    &::before {
+      border-radius: @switch-rectangle-handle-border-radius-l;
+    }
+  }
+}
+
+.@{prefix}-switch--rectangle.@{prefix}-size-s {
+  .@{prefix}-switch__handle {
+    border-radius: @switch-rectangle-handle-border-radius-s;
+
+    &::before {
+      border-radius: @switch-rectangle-handle-border-radius-s;
+    }
+  }
+}
+
+// 线形风格
+.@{prefix}-switch.@{prefix}-switch--line {
   background-color: transparent;
 
   &::before {
@@ -310,25 +330,10 @@
     }
   }
 
-  &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
-    .@{prefix}-switch__handle::before {
-      left: 0;
-      right: 0;
-    }
-
-    &.@{prefix}-is-checked {
-      .@{prefix}-switch__handle::before {
-        right: 0;
-        left: 0;
-      }
-    }
-  }
-
   .@{prefix}-switch__handle {
-    top: 0;
     left: 0;
-    width: @switch-height-default;
-    height: @switch-height-default;
+    width: calc(@switch-height-default - 2 * @switch-width-border-default);
+    height: calc(@switch-height-default - 2 * @switch-width-border-default);
   }
 
   &.@{prefix}-is-checked {
@@ -347,11 +352,11 @@
     }
 
     .@{prefix}-switch__handle {
-      top: 0;
+      top: @switch-width-border-check-default;
       left: 100%;
       transform: translate(-100%, 0);
-      width: @switch-height-default;
-      height: @switch-height-default;
+      width: calc(@switch-height-default - 2 * @switch-width-border-check-default);
+      height: calc(@switch-height-default - 2 * @switch-width-border-check-default);
     }
   }
 
@@ -380,48 +385,48 @@
   }
 }
 
-.@{prefix}-switch--line.@{prefix}-size-l {
+.@{prefix}-switch.@{prefix}-switch--line.@{prefix}-size-l {
   &::before {
-    height: @switch-line-track-height;
+    height: @switch-line-track-height-l;
   }
 
   .@{prefix}-switch__handle {
-    top: 0;
+    top: @switch-width-border-l;
     left: 0;
-    width: @switch-height-l;
-    height: @switch-height-l;
+    width: calc(@switch-height-l - 2 * @switch-width-border-l);
+    height: calc(@switch-height-l - 2 * @switch-width-border-l);
   }
 
   &.@{prefix}-is-checked {
     .@{prefix}-switch__handle {
-      top: 0;
+      top: @switch-width-border-check-l;
       left: 100%;
       transform: translate(-100%, 0);
-      width: @switch-height-l;
-      height: @switch-height-l;
+      width: calc(@switch-height-l - 2 * @switch-width-border-check-l);
+      height: calc(@switch-height-l - 2 * @switch-width-border-check-l);
     }
   }
 }
 
-.@{prefix}-switch--line.@{prefix}-size-s {
+.@{prefix}-switch.@{prefix}-switch--line.@{prefix}-size-s {
   &::before {
     height: @switch-line-track-height-s;
   }
 
   .@{prefix}-switch__handle {
-    top: 0;
+    top: @switch-width-border-s;
     left: 0;
-    width: @switch-height-s;
-    height: @switch-height-s;
+    width: calc(@switch-height-s - 2 * @switch-width-border-s);
+    height: calc(@switch-height-s - 2 * @switch-width-border-s);
   }
 
   &.@{prefix}-is-checked {
     .@{prefix}-switch__handle {
-      top: 0;
+      top: @switch-width-border-check-s;
       left: 100%;
       transform: translate(-100%, 0);
-      width: @switch-height-s;
-      height: @switch-height-s;
+      width: calc(@switch-height-s - 2 * @switch-width-border-check-s);
+      height: calc(@switch-height-s - 2 * @switch-width-border-check-s);
     }
   }
 }
diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less
index 38944f036d..a274a055c5 100644
--- a/style/web/components/switch/_var.less
+++ b/style/web/components/switch/_var.less
@@ -73,10 +73,17 @@
   padding @anim-duration-base @anim-time-fn-easing,
   opacity @anim-duration-base linear;
 
-// round 外观变量
-@switch-round-track-border-radius: @border-radius-medium;
-@switch-round-handle-border-radius: @border-radius-small;
+// rectangle 外观变量
+@switch-rectangle-track-border-radius: @border-radius-default;
+@switch-rectangle-handle-border-radius: @border-radius-small;
+
+@switch-rectangle-track-border-radius-s: @border-radius-small;
+@switch-rectangle-handle-border-radius-s: @border-radius-small;
+
+@switch-rectangle-track-border-radius-l: @border-radius-medium;
+@switch-rectangle-handle-border-radius-l: @border-radius-default;
 
 // line 外观变量
 @switch-line-track-height: 4px;
+@switch-line-track-height-l: 5px;
 @switch-line-track-height-s: 3px;

From 920ea806ccb334d4c866d63d9929af9bea75ff43 Mon Sep 17 00:00:00 2001
From: Wesley <985189328@qq.com>
Date: Thu, 2 Jul 2026 22:22:01 +0800
Subject: [PATCH 4/4] chore: optimize

---
 style/web/components/switch/_index.less | 12 ++++++------
 style/web/components/switch/_var.less   | 10 +---------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index b46ca907cc..9572889984 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -287,20 +287,20 @@
 
 .@{prefix}-switch--rectangle.@{prefix}-size-l {
   .@{prefix}-switch__handle {
-    border-radius: @switch-rectangle-handle-border-radius-l;
+    border-radius: @switch-rectangle-handle-border-radius;
 
     &::before {
-      border-radius: @switch-rectangle-handle-border-radius-l;
+      border-radius: @switch-rectangle-handle-border-radius;
     }
   }
 }
 
 .@{prefix}-switch--rectangle.@{prefix}-size-s {
   .@{prefix}-switch__handle {
-    border-radius: @switch-rectangle-handle-border-radius-s;
+    border-radius: @switch-rectangle-handle-border-radius;
 
     &::before {
-      border-radius: @switch-rectangle-handle-border-radius-s;
+      border-radius: @switch-rectangle-handle-border-radius;
     }
   }
 }
@@ -387,7 +387,7 @@
 
 .@{prefix}-switch.@{prefix}-switch--line.@{prefix}-size-l {
   &::before {
-    height: @switch-line-track-height-l;
+    height: @switch-line-track-height;
   }
 
   .@{prefix}-switch__handle {
@@ -410,7 +410,7 @@
 
 .@{prefix}-switch.@{prefix}-switch--line.@{prefix}-size-s {
   &::before {
-    height: @switch-line-track-height-s;
+    height: @switch-line-track-height;
   }
 
   .@{prefix}-switch__handle {
diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less
index a274a055c5..b60691d007 100644
--- a/style/web/components/switch/_var.less
+++ b/style/web/components/switch/_var.less
@@ -77,13 +77,5 @@
 @switch-rectangle-track-border-radius: @border-radius-default;
 @switch-rectangle-handle-border-radius: @border-radius-small;
 
-@switch-rectangle-track-border-radius-s: @border-radius-small;
-@switch-rectangle-handle-border-radius-s: @border-radius-small;
-
-@switch-rectangle-track-border-radius-l: @border-radius-medium;
-@switch-rectangle-handle-border-radius-l: @border-radius-default;
-
 // line 外观变量
-@switch-line-track-height: 4px;
-@switch-line-track-height-l: 5px;
-@switch-line-track-height-s: 3px;
+@switch-line-track-height: 6px;