From 898503b29e31f7288dcabe418c278e54cbdd2b51 Mon Sep 17 00:00:00 2001
From: zhongming4762 <zhongming4762@hotmail.com>
Date: Thu, 21 Aug 2025 17:41:30 +0800
Subject: [PATCH 1/4] perf: perf the validation message for `VbenForm` in
 compact mode

---
 .../form-ui/src/form-render/form-field.vue    | 27 +++-----------
 .../shadcn-ui/src/ui/form/FormMessage.vue     | 36 +++++++++++++++++--
 playground/src/views/examples/form/rules.vue  | 11 ++++--
 3 files changed, 46 insertions(+), 28 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 d650b8499f3..76956923e02 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
@@ -5,7 +5,6 @@ import type { FormSchema, MaybeComponentProps } from '../types';
 
 import { computed, nextTick, onUnmounted, useTemplateRef, watch } from 'vue';
 
-import { CircleAlert } from '@vben-core/icons';
 import {
   FormControl,
   FormDescription,
@@ -13,7 +12,6 @@ import {
   FormItem,
   FormMessage,
   VbenRenderContent,
-  VbenTooltip,
 } from '@vben-core/shadcn-ui';
 import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
 
@@ -323,7 +321,7 @@ onUnmounted(() => {
           <VbenRenderContent :content="label" />
         </template>
       </FormLabel>
-      <div class="flex-auto overflow-hidden p-[1px]">
+      <div class="relative flex-auto p-[1px]">
         <div :class="cn('relative flex w-full items-center', wrapperClass)">
           <FormControl :class="cn(controlClass)">
             <slot
@@ -340,6 +338,7 @@ onUnmounted(() => {
                 :class="{
                   'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
                     isInValid,
+                  'hover:z-10 focus:z-10': compact,
                 }"
                 v-bind="createComponentProps(slotProps)"
                 :disabled="shouldDisabled"
@@ -356,24 +355,6 @@ onUnmounted(() => {
                 </template>
                 <!-- <slot></slot> -->
               </component>
-              <VbenTooltip
-                v-if="compact && isInValid"
-                :delay-duration="300"
-                side="left"
-              >
-                <template #trigger>
-                  <slot name="trigger">
-                    <CircleAlert
-                      :class="
-                        cn(
-                          'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
-                        )
-                      "
-                    />
-                  </slot>
-                </template>
-                <FormMessage />
-              </VbenTooltip>
             </slot>
           </FormControl>
           <!-- 自定义后缀 -->
@@ -385,8 +366,8 @@ onUnmounted(() => {
           </FormDescription>
         </div>
 
-        <Transition name="slide-up" v-if="!compact">
-          <FormMessage class="absolute" />
+        <Transition name="slide-up">
+          <FormMessage :compact="compact" class="absolute" />
         </Transition>
       </div>
     </FormItem>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index fb8a8b91556..8e88b098fcd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -1,10 +1,20 @@
 <script lang="ts" setup>
 import { toValue } from 'vue';
 
+import { cn } from '@vben-core/shared/utils';
+
 import { ErrorMessage } from 'vee-validate';
 
 import { useFormField } from './useFormField';
 
+interface Props {
+  compact?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compact: false,
+});
+
 const { formMessageId, name } = useFormField();
 </script>
 
@@ -12,7 +22,29 @@ const { formMessageId, name } = useFormField();
   <ErrorMessage
     :id="formMessageId"
     :name="toValue(name)"
-    as="p"
-    class="text-destructive text-[0.8rem]"
+    :as="props.compact ? 'div' : 'p'"
+    :class="
+      cn(
+        'text-[0.8rem]',
+        props.compact ? 'vben-form-message-compact' : 'text-destructive',
+      )
+    "
   />
 </template>
+
+<style>
+.vben-form-message-compact {
+  height: auto;
+  min-height: 1.5rem;
+  opacity: 1;
+  position: absolute;
+  top: 100%;
+  z-index: 1;
+  background: hsl(var(--destructive));
+  width: calc(100% - 1rem);
+  color: white;
+  border-radius: var(--radius);
+  left: 1rem;
+  padding: 2px 8px;
+}
+</style>
diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue
index 7ec9549398b..8383bfaf707 100644
--- a/playground/src/views/examples/form/rules.vue
+++ b/playground/src/views/examples/form/rules.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import { Button, Card, message } from 'ant-design-vue';
 
 import { useVbenForm, z } from '#/adapter/form';
 
+const isCompact = ref(true);
+
 const [Form, formApi] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
   commonConfig: {
@@ -17,7 +21,7 @@ const [Form, formApi] = useVbenForm({
   handleSubmit: onSubmit,
   // 垂直布局，label和input在不同行，值为vertical
   // 水平布局，label和input在同一行
-  layout: 'horizontal',
+  // layout: 'horizontal',
   schema: [
     {
       // 组件需要在 #/adapter.ts内注册，并加上类型
@@ -234,12 +238,13 @@ function onSubmit(values: Record<string, any>) {
   <Page description="表单校验示例" title="表单组件">
     <Card title="基础组件校验示例">
       <template #extra>
-        <Button @click="() => formApi.validate()">校验表单</Button>
+        <Button @click="isCompact = !isCompact">切换Compact</Button>
+        <Button class="mx-2" @click="() => formApi.validate()">校验表单</Button>
         <Button class="mx-2" @click="() => formApi.resetValidate()">
           清空校验信息
         </Button>
       </template>
-      <Form />
+      <Form :compact="isCompact" />
     </Card>
   </Page>
 </template>

From e4e9fc5f22158763f3252249ee811caa5fb0edd6 Mon Sep 17 00:00:00 2001
From: zhongming4762 <zhongming4762@hotmail.com>
Date: Thu, 21 Aug 2025 17:41:54 +0800
Subject: [PATCH 2/4] perf: perf the validation message for `VbenForm` in
 compact mode

---
 .../ui-kit/shadcn-ui/src/ui/form/FormMessage.vue     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index 8e88b098fcd..ed9e1d196c7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -34,17 +34,17 @@ const { formMessageId, name } = useFormField();
 
 <style>
 .vben-form-message-compact {
-  height: auto;
-  min-height: 1.5rem;
-  opacity: 1;
   position: absolute;
   top: 100%;
+  left: 1rem;
   z-index: 1;
-  background: hsl(var(--destructive));
   width: calc(100% - 1rem);
+  height: auto;
+  min-height: 1.5rem;
+  padding: 2px 8px;
   color: white;
+  background: hsl(var(--destructive));
   border-radius: var(--radius);
-  left: 1rem;
-  padding: 2px 8px;
+  opacity: 1;
 }
 </style>

From 49eb9bee1306e6b72ea927ef3b22f097062750f0 Mon Sep 17 00:00:00 2001
From: zhongming4762 <zhongming4762@hotmail.com>
Date: Mon, 25 Aug 2025 08:59:13 +0800
Subject: [PATCH 3/4] perf: perf the validation message for `VbenForm` in
 compact mode

---
 packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +-
 packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue  | 3 ++-
 2 files changed, 3 insertions(+), 2 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 76956923e02..546e609f4a0 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
@@ -338,7 +338,7 @@ onUnmounted(() => {
                 :class="{
                   'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
                     isInValid,
-                  'hover:z-10 focus:z-10': compact,
+                  'relative hover:z-10 focus:z-10': compact,
                 }"
                 v-bind="createComponentProps(slotProps)"
                 :disabled="shouldDisabled"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index ed9e1d196c7..65db72a5ba9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -42,9 +42,10 @@ const { formMessageId, name } = useFormField();
   height: auto;
   min-height: 1.5rem;
   padding: 2px 8px;
-  color: white;
+  color: hsl(var(--destructive-foreground));
   background: hsl(var(--destructive));
   border-radius: var(--radius);
   opacity: 1;
+  pointer-events: none;
 }
 </style>

From 0f1f4f1eed69cd298befcd8709b91dab912b542d Mon Sep 17 00:00:00 2001
From: zhongming4762 <zhongming4762@hotmail.com>
Date: Mon, 25 Aug 2025 08:59:28 +0800
Subject: [PATCH 4/4] perf: perf the validation message for `VbenForm` in
 compact mode

---
 packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index 65db72a5ba9..b2db356e6c0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -43,9 +43,9 @@ const { formMessageId, name } = useFormField();
   min-height: 1.5rem;
   padding: 2px 8px;
   color: hsl(var(--destructive-foreground));
+  pointer-events: none;
   background: hsl(var(--destructive));
   border-radius: var(--radius);
   opacity: 1;
-  pointer-events: none;
 }
 </style>