feat: 增加 useVbenForm 样式，去掉data.ts 中 字段class

apps/web-antd/src/views/system/area/modules/form.vue

@@ -10,6 +10,13 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/dept/data.ts

@@ -40,7 +40,6 @@ export function useFormSchema(): VbenFormSchema[] {
           });
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -64,7 +63,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },
@@ -76,7 +74,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        class: 'w-full',
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',

apps/web-antd/src/views/system/dept/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,

apps/web-antd/src/views/system/dict/data.ts

@@ -239,7 +239,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入显示排序',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -262,7 +261,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: colorOptions,
         placeholder: '请选择颜色类型',
-        class: 'w-full',
       },
     },
     {

apps/web-antd/src/views/system/dict/modules/data-form.vue

@@ -28,6 +28,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useDataFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/dict/modules/type-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: useTypeFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/mail/account/modules/form.vue

@@ -26,12 +26,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({

apps/web-antd/src/views/system/mail/template/data.ts

@@ -47,7 +47,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: async () => await getSimpleMailAccountList(),
-        class: 'w-full',
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',

apps/web-antd/src/views/system/mail/template/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,

apps/web-antd/src/views/system/mail/template/modules/send-form.vue

@@ -16,6 +16,13 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemMailTemplateApi.MailTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
 });

apps/web-antd/src/views/system/menu/data.ts

@@ -44,7 +44,6 @@ export function useFormSchema(): VbenFormSchema[] {
           } as SystemMenuApi.Menu);
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -203,7 +202,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },

apps/web-antd/src/views/system/menu/modules/form.vue

@@ -22,6 +22,13 @@ const getTitle = computed(() =>
 );
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/system/notice/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,

apps/web-antd/src/views/system/notify/template/data.ts

@@ -68,7 +68,6 @@ export function useFormSchema(): VbenFormSchema[] {
           DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
           'number',
         ),
-        class: 'w-full',
         placeholder: '请选择模板类型',
       },
       rules: 'required',

apps/web-antd/src/views/system/notify/template/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,

apps/web-antd/src/views/system/notify/template/modules/send-form.vue

@@ -17,11 +17,15 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/oauth2/client/data.ts

@@ -84,7 +84,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入访问令牌的有效期，单位：秒',
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
       },
       rules: 'required',
@@ -96,7 +95,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入刷新令牌的有效期，单位：秒',
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
       },
       rules: 'required',
@@ -109,7 +107,6 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE),
         mode: 'multiple',
         placeholder: '请输入授权类型',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -120,7 +117,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入授权范围',
         mode: 'tags',
-        class: 'w-full',
       },
     },
     {
@@ -130,7 +126,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入自动授权范围',
         mode: 'multiple',
-        class: 'w-full',
         // TODO @芋艿：根据权限，自动授权范围
       },
     },
@@ -141,7 +136,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入可重定向的 URI 地址',
         mode: 'tags',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -152,7 +146,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入权限',
         mode: 'tags',
-        class: 'w-full',
       },
     },
     {
@@ -162,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         mode: 'tags',
         placeholder: '请输入资源',
-        class: 'w-full',
       },
     },
     {

apps/web-antd/src/views/system/oauth2/client/modules/form.vue

@@ -26,12 +26,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({

apps/web-antd/src/views/system/role/data.ts

@@ -40,7 +40,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        class: 'w-full',
         controlsPosition: 'right',
         placeholder: '请输入显示顺序',
       },
@@ -97,7 +96,6 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
       fieldName: 'dataScope',
       label: '权限范围',
       componentProps: {
-        class: 'w-full',
         options: getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE, 'number'),
       },
     },

apps/web-antd/src/views/system/role/modules/assign-menu-form.vue

@@ -25,6 +25,13 @@ const isExpanded = ref(false); // 展开状态
 const expandedKeys = ref<number[]>([]); // 展开的节点
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useAssignMenuFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/role/modules/form.vue

@@ -22,6 +22,11 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/sms/channel/data.ts

@@ -37,7 +37,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
-        class: 'w-full',
         placeholder: '请选择短信渠道',
       },
       rules: 'required',

apps/web-antd/src/views/system/sms/channel/modules/form.vue

@@ -26,12 +26,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: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/sms/template/data.ts

@@ -29,7 +29,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
-        class: 'w-full',
         placeholder: '请选择短信类型',
       },
       rules: 'required',
@@ -58,7 +57,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: async () => await getSimpleSmsChannelList(),
-        class: 'w-full',
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',

apps/web-antd/src/views/system/sms/template/modules/form.vue

@@ -26,12 +26,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({

apps/web-antd/src/views/system/sms/template/modules/send-form.vue

@@ -16,11 +16,15 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   showDefaultActions: false,
-  commonConfig: {
-    labelWidth: 120,
-  },
 });
 
 const [Modal, modalApi] = useVbenModal({

apps/web-antd/src/views/system/social/client/data.ts

@@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
-        class: 'w-full',
       },
       rules: 'required',
     },

apps/web-antd/src/views/system/social/client/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,

apps/web-antd/src/views/system/tenant/data.ts

@@ -27,9 +27,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '租户名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入租户名称',
-      },
       rules: 'required',
     },
     {
@@ -38,7 +35,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: () => getTenantPackageList(),
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
@@ -49,26 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'contactName',
       label: '联系人',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入联系人',
-      },
       rules: 'required',
     },
     {
       fieldName: 'contactMobile',
       label: '联系手机',
       component: 'Input',
-      componentProps: {
+      rules: 'mobile',
-        placeholder: '请输入联系手机',
-      },
     },
     {
       label: '用户名称',
       fieldName: 'username',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户名称',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -79,9 +67,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户密码',
       fieldName: 'password',
       component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入用户密码',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -92,10 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '账号额度',
       fieldName: 'accountCount',
       component: 'InputNumber',
-      componentProps: {
-        class: 'w-full',
-        placeholder: '请输入账号额度',
-      },
       rules: 'required',
     },
     {
@@ -105,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD',
         valueFormat: 'x',
-        class: 'w-full',
         placeholder: '请选择过期时间',
       },
       rules: 'required',
@@ -114,9 +94,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '绑定域名',
       fieldName: 'website',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入绑定域名',
-      },
       rules: 'required',
     },
     {

apps/web-antd/src/views/system/tenant/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,

apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -26,9 +26,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '套餐名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入套餐名称',
-      },
       rules: 'required',
     },
     {
@@ -52,9 +49,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
     },
   ];
 }

apps/web-antd/src/views/system/tenantPackage/modules/form.vue

@@ -34,6 +34,13 @@ const isExpanded = ref(false); // 展开状态
 const expandedKeys = ref<number[]>([]); // 展开的节点
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/data.ts

@@ -29,18 +29,12 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'username',
       label: '用户名称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户名称',
-      },
       rules: 'required',
     },
     {
       label: '用户密码',
       fieldName: 'password',
       component: 'InputPassword',
-      componentProps: {
-        placeholder: '请输入用户密码',
-      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -51,9 +45,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'nickname',
       label: '用户昵称',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入用户昵称',
-      },
       rules: 'required',
     },
     {
@@ -65,7 +56,6 @@ export function useFormSchema(): VbenFormSchema[] {
           const data = await getDeptList();
           return handleTree(data);
         },
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -79,7 +69,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimplePostList,
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -90,18 +79,12 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入邮箱',
-      },
       rules: z.string().email('邮箱格式不正确').optional(),
     },
     {
       fieldName: 'mobile',
       label: '手机号码',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入手机号码',
-      },
     },
     {
       fieldName: 'sex',
@@ -129,9 +112,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
     },
   ];
 }
@@ -210,7 +190,6 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleRoleList,
-        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',

apps/web-antd/src/views/system/user/modules/assign-role-form.vue

@@ -13,6 +13,13 @@ import { useAssignRoleFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useAssignRoleFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/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,

apps/web-antd/src/views/system/user/modules/import-form.vue

@@ -15,6 +15,13 @@ import { useImportFormSchema } from '../data';
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useImportFormSchema(),
   showDefaultActions: false,

apps/web-antd/src/views/system/user/modules/reset-password-form.vue

@@ -13,6 +13,13 @@ import { useResetPasswordFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useResetPasswordFormSchema(),
   showDefaultActions: false,