From 10baedfc078abc078e2d1719a8d1b1b851bc4d54 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 9 Apr 2025 11:42:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E5=9F=BA=E7=A1=80=E4=BF=A1=E6=81=AF=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codegen/components/BasicInfoForm.vue      | 96 -------------------
 apps/web-antd/src/views/infra/codegen/data.ts | 53 ++++++++++
 .../infra/codegen/modules/basic-info.vue      | 42 ++++++++
 3 files changed, 95 insertions(+), 96 deletions(-)
 delete mode 100644 apps/web-antd/src/views/infra/codegen/components/BasicInfoForm.vue
 create mode 100644 apps/web-antd/src/views/infra/codegen/modules/basic-info.vue

diff --git a/apps/web-antd/src/views/infra/codegen/components/BasicInfoForm.vue b/apps/web-antd/src/views/infra/codegen/components/BasicInfoForm.vue
deleted file mode 100644
index c5af46640..000000000
--- a/apps/web-antd/src/views/infra/codegen/components/BasicInfoForm.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script lang="ts" setup>
-import type { InfraCodegenApi } from '#/api/infra/codegen';
-
-import { CircleHelp } from '@vben/icons';
-import { Col, Form, FormItem, Input, Row, Textarea, Tooltip } from 'ant-design-vue';
-
-import { ref, unref, watch } from 'vue';
-
-defineOptions({ name: 'InfraCodegenBasicInfoForm' });
-
-const props = defineProps<{
-  table?: InfraCodegenApi.CodegenTable;
-}>();
-
-const formRef = ref();
-const formData = ref({
-  tableName: '',
-  tableComment: '',
-  className: '',
-  author: '',
-  remark: '',
-});
-
-const rules = {
-  tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
-  tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
-  className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
-  author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
-};
-
-/** 监听 table 属性，复制给 formData 属性 */
-watch(
-  () => props.table,
-  (table) => {
-    if (!table) return;
-    formData.value = { ...table };
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-
-defineExpose({
-  validate: async () => {
-    try {
-      await unref(formRef).validate();
-      return true;
-    } catch {
-      return false;
-    }
-  },
-});
-</script>
-<template>
-  <Form ref="formRef" :model="formData" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-    <Row :gutter="16">
-      <Col :span="12">
-        <FormItem label="表名称" name="tableName">
-          <Input v-model:value="formData.tableName" placeholder="请输入仓库名称" />
-        </FormItem>
-      </Col>
-      <Col :span="12">
-        <FormItem label="表描述" name="tableComment">
-          <Input v-model:value="formData.tableComment" placeholder="请输入" />
-        </FormItem>
-      </Col>
-      <Col :span="12">
-        <FormItem name="className">
-          <template #label>
-            <span>
-              实体类名称
-              <Tooltip
-                title="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
-                placement="top"
-              >
-                <CircleHelp />
-              </Tooltip>
-            </span>
-          </template>
-          <Input v-model:value="formData.className" placeholder="请输入" />
-        </FormItem>
-      </Col>
-      <Col :span="12">
-        <FormItem label="作者" name="author">
-          <Input v-model:value="formData.author" placeholder="请输入" />
-        </FormItem>
-      </Col>
-      <Col :span="24">
-        <FormItem label="备注" name="remark">
-          <Textarea v-model:value="formData.remark" :rows="3" />
-        </FormItem>
-      </Col>
-    </Row>
-  </Form>
-</template>
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index 3dc1f76a6..8accef7db 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -49,6 +49,59 @@ export function useImportTableFormSchema(
   ];
 }
 
+/** 基本信息表单的 schema */
+export function useBasicInfoFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'tableName',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'tableComment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'className',
+      label: '实体类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      rules: 'required',
+      help: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
+    },
+    {
+      fieldName: 'author',
+      label: '作者',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+      },
+      // 使用Tailwind的col-span-2让元素跨越两列
+      formItemClass: 'md:col-span-2',
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/infra/codegen/modules/basic-info.vue b/apps/web-antd/src/views/infra/codegen/modules/basic-info.vue
new file mode 100644
index 000000000..0ad411bcf
--- /dev/null
+++ b/apps/web-antd/src/views/infra/codegen/modules/basic-info.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { useVbenForm } from '#/adapter/form';
+import { watch } from 'vue';
+
+import { useBasicInfoFormSchema } from '../data';
+
+const props = defineProps<{
+  table: InfraCodegenApi.CodegenTable;
+}>();
+
+/** 表单实例 */
+const [Form, formApi] = useVbenForm({
+  // 配置表单布局为两列
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4',
+  schema: useBasicInfoFormSchema(),
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+/** 动态更新表单值 */
+watch(
+  () => props.table,
+  (val: any) => {
+    if (!val) {
+      return;
+    }
+    formApi.setValues(val);
+  },
+  { immediate: true },
+);
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: formApi.validate,
+  getValues: formApi.getValues,
+});
+</script>
+<template>
+  <Form />
+</template>