docs: update docs (#4466)

* chore: fixed known issues with form components

* docs: add vben form doc

apps/web-antd/src/adapter/form.ts

@@ -27,13 +27,13 @@ import {
   Select,
   Space,
   Switch,
+  Textarea,
   TimePicker,
   TreeSelect,
   Upload,
 } from 'ant-design-vue';
 
-// 业务表单组件适配
-
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type FormComponentType =
   | 'AutoComplete'
   | 'Checkbox'
@@ -51,6 +51,7 @@ export type FormComponentType =
   | 'Select'
   | 'Space'
   | 'Switch'
+  | 'Textarea'
   | 'TimePicker'
   | 'TreeSelect'
   | 'Upload'
@@ -83,12 +84,16 @@ setupVbenForm<FormComponentType>({
     Select,
     Space,
     Switch,
+    Textarea,
     TimePicker,
     TreeSelect,
     Upload,
   },
   config: {
+    // ant design vue组件库默认都是 v-model:value
     baseModelPropName: 'value',
+
+    // 一些组件是 v-model:checked 或者 v-model:fileList
     modelPropNameMap: {
       Checkbox: 'checked',
       Radio: 'checked',
@@ -97,12 +102,14 @@ setupVbenForm<FormComponentType>({
     },
   },
   defineRules: {
+    // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      if (value === undefined || value === null || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;
     },
+    // 选择项目必填国际化适配
     selectRequired: (value, _params, ctx) => {
       if (value === undefined || value === null) {
         return $t('formRules.selectRequired', [ctx.label]);

apps/web-ele/src/adapter/form.ts

@@ -73,7 +73,7 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      if (value === undefined || value === null || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;

apps/web-naive/src/adapter/form.ts

@@ -82,7 +82,7 @@ setupVbenForm<FormComponentType>({
   },
   defineRules: {
     required: (value, _params, ctx) => {
-      if ((!value && value !== 0) || value.length === 0) {
+      if (value === undefined || value === null || value.length === 0) {
         return $t('formRules.required', [ctx.label]);
       }
       return true;