减少筛选占用位置

src/App.vue

@@ -263,7 +263,6 @@
         </button>
         <div class="toggle-group">
           <label class="toggle-item">
-            <span class="toggle-hint">组框</span>
             <input
               :checked="showGroupBorder"
               class="toggle-input"
@@ -271,28 +270,29 @@
               @change="handleGroupBorderToggle"
             >
             <span class="toggle-track">
+              <span class="toggle-label">组框</span>
               <span class="toggle-thumb" />
             </span>
           </label>
           <label class="toggle-item">
-            <span class="toggle-hint">卡片</span>
             <input
               v-model="showTooltip"
               class="toggle-input"
               type="checkbox"
             >
             <span class="toggle-track">
+              <span class="toggle-label">卡片</span>
               <span class="toggle-thumb" />
             </span>
           </label>
           <label class="toggle-item theme-toggle">
-            <span class="toggle-hint">主题</span>
             <input
               v-model="isLightTheme"
               class="toggle-input"
               type="checkbox"
             >
             <span class="toggle-track">
+              <span class="toggle-label">主题</span>
               <span class="toggle-thumb" />
             </span>
           </label>
@@ -1280,12 +1280,6 @@ onBeforeUnmount(() => {
   color: var(--label-text);
 }
 
-.toggle-hint {
-  font-size: 11px;
-  color: var(--label-text);
-  white-space: nowrap;
-}
-
 .level-select {
   min-width: 0;
   width: auto;
@@ -1400,7 +1394,7 @@ onBeforeUnmount(() => {
 
 .toggle-track {
   position: relative;
-  width: 34px;
+  width: 48px;
   height: 18px;
   border-radius: 999px;
   background: var(--toggle-track-bg);
@@ -1409,6 +1403,18 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
+.toggle-label {
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: var(--label-text);
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 .toggle-thumb {
   position: absolute;
   top: 1px;
@@ -1426,7 +1432,7 @@ onBeforeUnmount(() => {
 }
 
 .toggle-input:checked + .toggle-track .toggle-thumb {
-  transform: translateX(16px);
+  transform: translateX(30px);
 }
 
 .level-select:hover,