u

code/g3soft-libs/packages/ui/src/checkbox/Checkbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, useSlots, watch } from 'vue'
 import { Check, Minus } from '@lucide/vue'
 import { useNamespace } from '../_composables/useNamespace'
 import type { CheckboxProps } from './types'
@@ -29,6 +29,7 @@ const emit = defineEmits<{
 
 const { b, e, m, is } = useNamespace('checkbox')
 
+const slots = useSlots()
 const inputRef = ref<HTMLInputElement | null>(null)
 
 /** 选中态优先显示勾选；仅在未选中且半选时显示减号 */
@@ -44,6 +45,8 @@ const classes = computed(() => [
     [is('checked')]: props.modelValue,
     [is('indeterminate')]: props.indeterminate,
     [is('disabled')]: props.disabled,
+    // 有文案时才需要「勾选框对齐首行」的定位；无文案保持默认居中
+    [is('with-label')]: !!slots.default,
   },
 ])
 
@@ -91,6 +94,7 @@ watch(() => [props.indeterminate, props.modelValue], syncIndeterminate)
 
 .#{b('checkbox')} {
   display: inline-flex;
+  vertical-align: middle;
   align-items: center;
   gap: v('space-2', 8px);
   color: v('text-1', rgba(0, 0, 0, 0.88));
@@ -100,6 +104,16 @@ watch(() => [props.indeterminate, props.modelValue], syncIndeterminate)
   user-select: none;
 }
 
+/* 有文案时对齐到首行：root 顶对齐，勾选框下沉半行高差，使其中心落在
+   第一行文字中心；单行结果与默认 center 等价，多行富内容则对齐首行而非整块居中 */
+.#{b('checkbox')}.#{is('with-label')} {
+  align-items: flex-start;
+}
+
+.#{b('checkbox')}.#{is('with-label')} .#{e('checkbox', 'box')} {
+  margin-top: calc((v('line-height', 1.5) * 1em - v('checkbox-size', 16px)) / 2);
+}
+
 .#{e('checkbox', 'input')} {
   position: absolute;
   width: 1px;