feat: add useVbenForm common config class

2025-04-28 11:42:33 +08:00
parent bb72b91a1d
commit 3e6d9cb1cd
20 changed files with 85 additions and 17 deletions
--- a/apps/web-antd/src/views/infra/config/modules/form.vue
+++ b/apps/web-antd/src/views/infra/config/modules/form.vue
@@ -22,6 +22,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo02/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo02/data.ts
@@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
          });
          return handleTree(data);
        },
-        class: 'w-full',
        labelField: 'name',
        valueField: 'id',
        childrenField: 'children',
--- a/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
@@ -31,6 +31,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useDemo03CourseFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useDemo03GradeFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
@@ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
 const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
@@ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
 const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/infra/file/modules/form.vue
+++ b/apps/web-antd/src/views/infra/file/modules/form.vue
@@ -14,12 +14,17 @@ import { useFormSchema } from '../data';
 const emit = defineEmits(['success']);

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    hideLabel: true,
+  },
  layout: 'horizontal',
  schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
  showDefaultActions: false,
-  commonConfig: {
-    hideLabel: true,
-  },
 });

 const [Modal, modalApi] = useVbenModal({
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
        placeholder: '请选择存储器',
-        class: 'w-full',
      },
      rules: 'required',
      dependencies: {
@@ -87,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        min: 0,
-        class: 'w-full',
        controlsPosition: 'right',
        placeholder: '请输入主机端口',
      },
--- a/apps/web-antd/src/views/infra/fileConfig/modules/form.vue
+++ b/apps/web-antd/src/views/infra/fileConfig/modules/form.vue
@@ -27,7 +27,11 @@ const getTitle = computed(() => {

 const [Form, formApi] = useVbenForm({
  commonConfig: {
-    labelWidth: 120,
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -65,7 +65,6 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        placeholder: '请输入重试次数。设置为 0 时，不进行重试',
        min: 0,
-        class: 'w-full',
      },
      rules: 'required',
    },
@@ -76,7 +75,6 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
        min: 0,
-        class: 'w-full',
      },
      rules: 'required',
    },
@@ -87,7 +85,6 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        placeholder: '请输入监控超时时间，单位：毫秒',
        min: 0,
-        class: 'w-full',
      },
    },
  ];
--- a/apps/web-antd/src/views/infra/job/modules/form.vue
+++ b/apps/web-antd/src/views/infra/job/modules/form.vue
@@ -22,12 +22,16 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 140,
-  },
 });

 const [Modal, modalApi] = useVbenModal({