feat: 整体调整偏好设置样式

packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue

@@ -66,7 +66,7 @@ const slots = useSlots();
     <NumberField v-model="inputValue" v-bind="$attrs" class="w-41.25">
       <NumberFieldContent>
         <NumberFieldDecrement />
-        <NumberFieldInput />
+        <NumberFieldInput class="h-8" />
         <NumberFieldIncrement />
       </NumberFieldContent>
     </NumberField>

packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue

@@ -64,7 +64,7 @@ const slots = useSlots();
       </VbenTooltip>
     </span>
     <Select v-model="selectValue">
-      <SelectTrigger class="h-8 w-41.25">
+      <SelectTrigger class="h-8 w-41.25" size="sm">
         <SelectValue :placeholder="placeholder" />
       </SelectTrigger>
       <SelectContent>

packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue

@@ -45,15 +45,15 @@ watch(
         :max="max"
         :min="min"
         :step="step"
-        class="w-full"
+        class="w-full mr-4"
       >
         <NumberFieldContent>
           <NumberFieldDecrement />
-          <NumberFieldInput />
+          <NumberFieldInput class="h-8" />
           <NumberFieldIncrement />
         </NumberFieldContent>
       </NumberField>
-      <span class="text-xs whitespace-nowrap text-muted-foreground">px</span>
+      <span class="text-sm whitespace-nowrap text-muted-foreground">px</span>
     </div>
     <div class="text-xs text-muted-foreground">
       {{ $t('preferences.theme.fontSizeTip') }}

packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue

@@ -19,13 +19,7 @@ const items = [
 </script>
 
 <template>
-  <ToggleGroup
+  <ToggleGroup v-model="modelValue" size="sm" type="single" variant="outline">
-    v-model="modelValue"
-    class="gap-2"
-    size="sm"
-    type="single"
-    variant="outline"
-  >
     <template v-for="item in items" :key="item.value">
       <ToggleGroupItem
         :value="item.value"

packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue

@@ -26,13 +26,7 @@ const modelValue = defineModel<string>();
     <span class="text-sm">
       <slot></slot>
     </span>
-    <ToggleGroup
+    <ToggleGroup v-model="modelValue" size="sm" type="single" variant="outline">
-      v-model="modelValue"
-      class="gap-2"
-      size="sm"
-      type="single"
-      variant="outline"
-    >
       <template v-for="item in items" :key="item.value">
         <ToggleGroupItem
           :value="item.value"