review：代码生成，相关功能

apps/web-antd/src/views/infra/codegen/modules/generation-info.vue

@@ -10,23 +10,21 @@ import { isEmpty } from '@vben/utils';
 
 import { useGenerationInfoBaseFormSchema, useSubTableFormSchema, useTreeTableFormSchema } from '../data';
 
-defineOptions({ name: 'InfraCodegenGenerateInfoForm' });
-
 const props = defineProps<{
   columns?: InfraCodegenApi.CodegenColumn[];
   table?: InfraCodegenApi.CodegenTable;
 }>();
 
 const tables = ref<InfraCodegenApi.CodegenTable[]>([]);
-const currentTemplateType = ref<number>();
-const wrapperClass = 'grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'; // 一行两列布局
+
 /** 计算当前模板类型 */
+const currentTemplateType = ref<number>();
 const isTreeTable = computed(() => currentTemplateType.value === InfraCodegenTemplateTypeEnum.TREE);
 const isSubTable = computed(() => currentTemplateType.value === InfraCodegenTemplateTypeEnum.SUB);
 
 /** 基础表单实例 */
 const [BaseForm, baseFormApi] = useVbenForm({
-  wrapperClass,
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
   layout: 'horizontal',
   showDefaultActions: false,
   schema: useGenerationInfoBaseFormSchema(),
@@ -40,7 +38,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
 
 /** 树表信息表单实例 */
 const [TreeForm, treeFormApi] = useVbenForm({
-  wrapperClass,
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
   layout: 'horizontal',
   showDefaultActions: false,
   schema: [],
@@ -48,7 +46,7 @@ const [TreeForm, treeFormApi] = useVbenForm({
 
 /** 主子表信息表单实例 */
 const [SubForm, subFormApi] = useVbenForm({
-  wrapperClass,
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
   layout: 'horizontal',
   showDefaultActions: false,
   schema: [],
@@ -56,29 +54,30 @@ const [SubForm, subFormApi] = useVbenForm({
 
 /** 更新树表信息表单 schema */
 function updateTreeSchema(): void {
-  const schema = useTreeTableFormSchema(props.columns);
-  treeFormApi.setState({ schema });
+  treeFormApi.setState({
+    schema: useTreeTableFormSchema(props.columns)
+  });
 }
 
 /** 更新主子表信息表单 schema */
 function updateSubSchema(): void {
-  const schema = useSubTableFormSchema(props.columns, tables.value);
-  subFormApi.setState({ schema });
+  subFormApi.setState({
+    schema: useSubTableFormSchema(props.columns, tables.value)
+  });
 }
 
 /** 获取合并的表单值 */
 async function getAllFormValues(): Promise<Record<string, any>> {
   // 基础表单值
   const baseValues = await baseFormApi.getValues();
-
   // 根据模板类型获取对应的额外表单值
+  // TODO @puhui999：使用二元表达式
   let extraValues = {};
   if (isTreeTable.value) {
     extraValues = await treeFormApi.getValues();
   } else if (isSubTable.value) {
     extraValues = await subFormApi.getValues();
   }
-
   // 合并表单值
   return { ...baseValues, ...extraValues };
 }
@@ -90,6 +89,7 @@ async function validateAllForms() {
   const { valid: baseFormValid } = await baseFormApi.validate();
   validateResult = baseFormValid;
   // 根据模板类型验证对应的额外表单
+  // TODO @puhui999：可以类似上面，抽个类似 extraValid，然后最后 validateResult && extraValid 类似这种哇？
   if (isTreeTable.value) {
     const { valid: treeFormValid } = await treeFormApi.validate();
     validateResult = baseFormValid && treeFormValid;
@@ -102,14 +102,15 @@ async function validateAllForms() {
 
 /** 设置表单值 */
 function setAllFormValues(values: Record<string, any>): void {
-  if (!values) return;
+  if (!values) {
+    return;
+  }
 
   // 记录模板类型
   currentTemplateType.value = values.templateType;
 
   // 设置基础表单值
   baseFormApi.setValues(values);
-
   // 根据模板类型设置对应的额外表单值
   if (isTreeTable.value) {
     treeFormApi.setValues(values);
@@ -125,7 +126,7 @@ watch(
     if (!val || isEmpty(val)) {
       return;
     }
-    // 初始化树表的schema
+    // 初始化树表的 schema
     updateTreeSchema();
     // 设置表单值
     setAllFormValues(val);
@@ -151,10 +152,8 @@ defineExpose({
   <div>
     <!-- 基础表单 -->
     <BaseForm />
-
     <!-- 树表信息表单 -->
     <TreeForm v-if="isTreeTable" />
-
     <!-- 主子表信息表单 -->
     <SubForm v-if="isSubTable" />
   </div>