feat: add useVbenForm common config class

2025-04-28 11:42:33 +08:00 · 2025-04-28 11:42:33 +08:00 · 3e6d9cb1cd
parent bb72b91a1d
commit 3e6d9cb1cd
20 changed files with 85 additions and 17 deletions
--- a/apps/web-antd/src/views/bpm/category/data.ts
+++ b/apps/web-antd/src/views/bpm/category/data.ts
@ -63,7 +63,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        min: 0,
-        class: 'w-full',
        controlsPosition: 'right',
        placeholder: '请输入分类排序',
      },
--- 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({
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@ -204,7 +204,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
        return {
          api: getSimpleDictTypeList,
          placeholder: '请输入字典类型',
-          class: 'w-full',
          labelField: 'name',
          valueField: 'type',
          disabled: !!values.id,
--- a/apps/web-antd/src/views/system/menu/data.ts
+++ b/apps/web-antd/src/views/system/menu/data.ts
@ -166,7 +166,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'AutoComplete',
      componentProps: {
        allowClear: true,
-        class: 'w-full',
        filterOption(input: string, option: { value: string }) {
          return option.value.toLowerCase().includes(input.toLowerCase());
        },
--- a/apps/web-antd/src/views/system/notify/template/data.ts
+++ b/apps/web-antd/src/views/system/notify/template/data.ts
@ -200,7 +200,6 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleUserList,
-        class: 'w-full',
        labelField: 'nickname',
        valueField: 'id',
        placeholder: '请选择接收人',
--- a/apps/web-antd/src/views/system/role/modules/form.vue
+++ b/apps/web-antd/src/views/system/role/modules/form.vue
@ -26,6 +26,8 @@ const [Form, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
  },
  layout: 'horizontal',
  schema: useFormSchema(),