fix: form label and control style (#5580)

* fix: form label and control style

* fix: empty label mark with required rules

Author: mynetfan

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="{

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>

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: '开关',
     },
     {