fix: fix known issues with the form (#4696)

* fix: fix known issues with the form

* chore: typo

* chore: typo

packages/@core/base/design/src/css/global.css

@@ -142,6 +142,10 @@
     @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
   }
 
+  .vben-link {
+    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
+  }
+
   .card-box {
     @apply bg-card text-card-foreground border-border rounded-xl border;
   }

packages/@core/ui-kit/form-ui/src/form-render/expandable.ts

@@ -22,6 +22,7 @@ export function useExpandable(props: FormRenderProps) {
     for (let index = 1; index <= rows; index++) {
       maxItem += mapping?.[index] ?? 0;
     }
+    // 保持一行
     return maxItem - 1 || 1;
   });
 
@@ -35,6 +36,7 @@ export function useExpandable(props: FormRenderProps) {
       if (val) {
         await nextTick();
         rowMapping.value = {};
+        isCalculated.value = false;
         await calculateRowMapping();
       }
     },

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -279,7 +279,7 @@ function autofocus() {
             'flex leading-6',
             {
               'mr-2 flex-shrink-0 justify-end': !isVertical,
-              'flex-row': isVertical,
+              'mb-1 flex-row': isVertical,
             },
             labelClass,
           )

packages/@core/ui-kit/form-ui/src/form-render/form-label.vue

@@ -12,7 +12,7 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <FormLabel :class="cn('mb-1 flex items-center', props.class)">
+  <FormLabel :class="cn('flex items-center', props.class)">
     <span v-if="required" class="text-destructive mr-[2px]">*</span>
     <slot></slot>
     <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">

packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue

@@ -12,12 +12,7 @@ const collapsed = defineModel({ default: false });
 
 <template>
   <div
-    :class="
-      cn(
-        'text-primary hover:text-primary-hover inline-flex cursor-pointer items-center',
-        props.class,
-      )
-    "
+    :class="cn('vben-link inline-flex items-center', props.class)"
     @click="collapsed = !collapsed"
   >
     <slot :is-expanded="collapsed">