From c9ccd2bbaba191bafb119a28bd420e60db3aaa3c Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Fri, 21 Feb 2025 11:14:59 +0800
Subject: [PATCH] fix: form label and control style (#5580)

* fix: form label and control style

* fix: empty label mark with required rules
---
 .../@core/ui-kit/form-ui/src/form-render/form-field.vue    | 5 +++--
 .../@core/ui-kit/form-ui/src/form-render/form-label.vue    | 3 +++
 playground/src/views/examples/form/basic.vue               | 7 +++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index f4e006cd..191c3019 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -301,17 +301,18 @@ function autofocus() {
           )
         "
         :help="help"
+        :colon="colon"
+        :label="label"
         :required="shouldRequired && !hideRequiredMark"
         :style="labelStyle"
       >
         <template v-if="label">
           <VbenRenderContent :content="label" />
-          <span v-if="colon" class="ml-[2px]">:</span>
         </template>
       </FormLabel>
       <div class="w-full overflow-hidden">
         <div :class="cn('relative flex w-full items-center', wrapperClass)">
-          <div class="flex-auto overflow-hidden">
+          <div class="flex-auto overflow-hidden p-[2px]">
             <FormControl :class="cn(controlClass)">
               <slot
                 v-bind="{
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
index 4ad10be2..9af4c133 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -10,7 +10,9 @@ import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   class?: string;
+  colon?: boolean;
   help?: CustomRenderType;
+  label?: CustomRenderType;
   required?: boolean;
 }
 
@@ -24,5 +26,6 @@ const props = defineProps<Props>();
     <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
       <VbenRenderContent :content="help" />
     </VbenHelpTooltip>
+    <span v-if="colon && label" class="ml-[2px]">:</span>
   </FormLabel>
 </template>
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
index 8d49209d..03534683 100644
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -235,7 +235,9 @@ const [BaseForm, baseFormApi] = useVbenForm({
           default: () => ['我已阅读并同意'],
         };
       },
-      rules: z.any().refine((v) => v, { message: '为什么不同意？勾上它！' }),
+      rules: z
+        .boolean()
+        .refine((v) => v, { message: '为什么不同意？勾上它！' }),
     },
     {
       component: 'Mentions',
@@ -266,7 +268,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
         class: 'w-auto',
       },
       fieldName: 'switch',
-      help: () => ['这是一个帮助信息', '第二行'].map((v) => h('p', () => v)),
+      help: () =>
+        ['这是一个多行帮助信息', '第二行', '第三行'].map((v) => h('p', v)),
       label: '开关',
     },
     {