feat: form support reverse action buttons (#5108)

* feat: form support reverse action buttons

* fix: submit button class

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -142,13 +142,29 @@ defineExpose({
     "
     :style="queryFormStyle"
   >
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
     <!-- 重置按钮前 -->
     <slot name="reset-before"></slot>
 
     <component
       :is="COMPONENT_MAP.DefaultButton"
       v-if="resetButtonOptions.show"
-      class="mr-3"
+      class="ml-3"
       type="button"
       @click="handleReset"
       v-bind="resetButtonOptions"
@@ -156,18 +172,21 @@ defineExpose({
       {{ resetButtonOptions.content }}
     </component>
 
-    <!-- 提交按钮前 -->
-    <slot name="submit-before"></slot>
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
 
-    <component
-      :is="COMPONENT_MAP.PrimaryButton"
-      v-if="submitButtonOptions.show"
-      type="button"
-      @click="handleSubmit"
-      v-bind="submitButtonOptions"
-    >
-      {{ submitButtonOptions.content }}
-    </component>
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
 
     <!-- 展开按钮前 -->
     <slot name="expand-before"></slot>

packages/@core/ui-kit/form-ui/src/types.ts

@@ -307,6 +307,10 @@ export interface VbenFormProps<
     FormRenderProps<T>,
     'componentBindEventMap' | 'componentMap' | 'form'
   > {
+  /**
+   * 操作按钮是否反转（提交按钮前置）
+   */
+  actionButtonsReverse?: boolean;
   /**
    * 表单操作区域class
    */