style(switch): adjust border-radius handling for square variant

Author: Ayideyia

frontend/src/components/Progress/index.vue

@@ -23,7 +23,7 @@ const circleStyle = computed(() => {
     props.status
   ]
   const radius = props.radius * 2 + 'px'
-  const percent = props.percent >= 100 ? 101 : props.percent || 0
+  const percent = Math.min(props.percent || 0, 100)
   const mask = `radial-gradient(transparent ${props.radius * 0.6}px, #fff 0px)`
   const bg = `conic-gradient(${color} 0%, ${color} ${percent}%, var(--progress-bg) ${percent}%, var(--progress-bg) 100%)`
   return {
@@ -38,7 +38,11 @@ const circleStyle = computed(() => {
 
 <template>
   <div v-if="type === 'line'" class="gui-progress-line h-10 rounded-8 overflow-hidden">
-    <div :style="innerStyle" :class="status" class="inner h-full rounded-8 duration-200"></div>
+    <div
+      :style="innerStyle"
+      :class="props.status"
+      class="inner h-full rounded-8 duration-200"
+    ></div>
   </div>
   <div
     v-if="type === 'circle'"

frontend/src/components/Switch/index.vue

@@ -35,10 +35,19 @@ const toggle = () => {
   <div
     @click="toggle"
     v-tips.slow="label"
-    :class="[size, border, model ? 'on' : 'off', disabled ? 'disabled' : '']"
-    class="gui-switch relative cursor-pointer h-24 inline-flex items-center rounded-full text-12"
+    :class="[
+      size,
+      border,
+      model ? 'on' : 'off',
+      disabled ? 'disabled' : '',
+      border === 'square' ? 'rounded-4' : 'rounded-full',
+    ]"
+    class="gui-switch relative cursor-pointer h-24 inline-flex items-center text-12"
   >
-    <div class="dot absolute h-18 w-18 rounded-full duration-200"></div>
+    <div
+      :class="[border === 'square' ? 'rounded-4' : 'rounded-full']"
+      class="dot absolute h-18 w-18 duration-200"
+    ></div>
 
     <div v-if="$slots.default || label" class="slot line-clamp-1 break-all">
       <span v-if="label">{{ t(label) }}</span>
@@ -64,10 +73,8 @@ const toggle = () => {
 }
 
 .square {
-  border-radius: 4px;
   .dot {
     width: 4px;
-    border-radius: 2px;
   }
 }