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

packages/effects/common-ui/src/ui/about/about.vue

@@ -44,7 +44,7 @@ declare global {
 const renderLink = (href: string, text: string) =>
   h(
     'a',
-    { href, target: '_blank', class: 'text-primary hover:text-primary-hover' },
+    { href, target: '_blank', class: 'vben-link' },
     { default: () => text },
   );
 
@@ -114,11 +114,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
   <Page :title="title">
     <template #description>
       <p class="text-foreground mt-3 text-sm leading-6">
-        <a
-          :href="VBEN_GITHUB_URL"
-          class="text-primary hover:text-primary-hover"
-          target="_blank"
-        >
+        <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
           {{ name }}
         </a>
         {{ description }}

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -120,7 +120,7 @@ onMounted(() => {
 
       <span
         v-if="showForgetPassword"
-        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+        class="vben-link text-sm font-normal"
         @click="handleGo(forgetPasswordPath)"
       >
         {{ $t('authentication.forgetPassword') }}
@@ -169,7 +169,7 @@ onMounted(() => {
       <div v-if="showRegister" class="mt-3 text-center text-sm">
         {{ $t('authentication.accountTip') }}
         <span
-          class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+          class="vben-link text-sm font-normal"
           @click="handleGo(registerPath)"
         >
           {{ $t('authentication.createAccount') }}

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -107,10 +107,7 @@ function goToLogin() {
     </VbenButton>
     <div class="mt-4 text-center text-sm">
       {{ $t('authentication.alreadyHaveAccount') }}
-      <span
-        class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
-        @click="goToLogin()"
-      >
+      <span class="vben-link text-sm font-normal" @click="goToLogin()">
         {{ $t('authentication.goToLogin') }}
       </span>
     </div>