fix: form label and control style (#5580)

* fix: form label and control style

* fix: empty label mark with required rules

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>