diff --git a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/view_vue.btl b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/detail_vue.btl
similarity index 61%
rename from njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/view_vue.btl
rename to njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/detail_vue.btl
index 4e18e0f..c6671e2 100644
--- a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/view_vue.btl
+++ b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/detail_vue.btl
@@ -12,10 +12,10 @@ var apiTsName = dc + "-api.ts";
 var dTsName = dc + ".d.ts";
 %>
 <template>
-  <ElDialog v-model="showDialog"
-    destroy-on-close
-    width="fit-content"
-    @close="dialogCloseHandler">
+  <ADetailPanel
+      ref="detailPanel"
+      v-bind="detailPanelProps">
+    <template #default="detailData">
     <ElDescriptions title="${table.comment}" border>
       <%
       for(column in table.columns) {
@@ -26,35 +26,26 @@ var dTsName = dc + ".d.ts";
       </ElDescriptionsItem>
      <%}%>
     </ElDescriptions>
-    <template #footer>
-      <ElButton @click="showDialog = false" type="primary">关闭</ElButton>
     </template>
-  </ElDialog>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
 import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
-import Utils from '@/common/utils'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 
-const showDialog = ref(false)
-
-const detailData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result>({}))
-
-function dialogCloseHandler() {
-  detailData.$reset()
-}
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<${ucc}Types.Search${ucc}Result>>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<${ucc}Types.Search${ucc}Result>({
+  title: '${table.comment}详情',
+  detailsLoader: ${ucc}Api.detail,
+})
 
 defineExpose({
   open(data: ${ucc}Types.Search${ucc}Result) {
-    showDialog.value = true
-    ${ucc}Api.detail(data.id!)
-      .then(res => {
-        detailData.$reset(res.data)
-      })
-  }
+    detailPanelIns.value?.open(data)
+  },
 })
 </script>
-
-<style lang="stylus" scoped>
-
-</style>
diff --git a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/form_vue.btl b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/form_vue.btl
index d36014e..7bbb962 100644
--- a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/form_vue.btl
+++ b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/form_vue.btl
@@ -11,111 +11,83 @@ var apiTsName = dc + "-api.ts";
 var dTsName = dc + ".d.ts";
 %>
 <template>
-  <ElDialog v-model="showDialog"
-    :close-on-click-modal="false"
-    destroy-on-close
-    width="fit-content"
-    @close="dialogCloseHandler">
-    <ElForm :model="formData"
-      :rules="rules"
-      ref="${lcc}Form"
-      class="form-panel"
-      label-width="auto">
+  <AFormPanel
+      ref="formPanel"
+      v-bind="formPanelProps">
+    <template #default="formData">
+         <div class="form-items">
       <%
       for(column in table.columns) {
           var map = tsType(column.dataType);
       %>
        <ElFormItem label="${column.comment}" prop="${toCamelCase(column.name)}">
-        <ElInput
-          v-model="formData.${toCamelCase(column.name)}"
-          :disabled="status === 'view'"
-          placeholder="${column.comment}"/>
+        <ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}" />
       </ElFormItem>
      <%}%>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
-      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+      </div>
     </template>
-  </ElDialog>
+  </AFormPanel>
 </template>
 
 <script lang="ts" setup>
 import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 import Strings from '@/common/utils/strings.ts'
-import FormUtil from '@/common/utils/formUtil.ts'
-import Utils from '@/common/utils'
-import {
-  ElMessage,
-  type FormInstance,
-  type FormRules,
-} from 'element-plus'
 
-const emits = defineEmits(['editSucc'])
-const showDialog = ref(false)
-const submiting = ref(false)
-const status = ref<'add' | 'view' | 'modify'>('add')
-
-const ${lcc}FormIns = useTemplateRef<FormInstance>('${lcc}Form')
-
-const formData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result>({}))
-const rules = reactive<FormRules<${ucc}Types.Search${ucc}Result>>({
-<%
-for(column in table.columns) {
-%>
-${toCamelCase(column.name)}: [{ required: true, message: '请填写${column.comment}', trigger: 'blur' }],
-<%}%>
+const props = withDefaults(defineProps<{
+  research?: () => void
+}>(), {
+  research: () => {
+  },
+})
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<${ucc}Types.Search${ucc}Result>({
+  title: status.value === 'add' ? '新建${table.comment}' : '修改${table.comment}信息',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return ${ucc}Api
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return ${ucc}Api
+      .add(data)
+        .then(props.research)
+    } else {
+      return ${ucc}Api
+      .modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+         <%
+         for(column in table.columns) {
+         %>
+         ${toCamelCase(column.name)}: [{ required: true, message: '请填写${column.comment}', trigger: 'blur' }],
+         <%}%>
+         },
 })
-
-function dialogCloseHandler() {
-  formData.$reset()
-}
-
-function submitHandler() {
-  if (status.value === 'view') return
-  submiting.value = true
-  if (formData.id != null) {
-  FormUtil.submit(${lcc}FormIns, () => ${ucc}Api.modify(formData))
-      .then(() => {
-        ElMessage.success('修改成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  } else {
-  FormUtil.submit(${lcc}FormIns, () => ${ucc}Api.add(formData))
-      .then(() => {
-        ElMessage.success('添加成功')
-        emits('editSucc')
-        showDialog.value = false
-      })
-      .finally(() => {
-        submiting.value = false
-      })
-  }
-}
 
 defineExpose({
-  open(data: ${ucc}Types.Search${ucc}Result = {}) {
-    showDialog.value = true
-    if (!Strings.isBlank(data.id)) {
-      status.value = 'modify'
-      ${ucc}Api.detail(data.id!)
-        .then(res => {
-          formData.$reset(res.data)
-        })
-    } else {
-      status.value = 'add'
-      formData.$reset(data)
-    }
-  }
+  open(data?: ${ucc}Types.Search${ucc}Result) {
+    formPanelIns.value?.open(data?.id)
+  },
 })
+
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
-  padding 20px
+.form-items {
+  grid-template-columns: 1fr 1fr;
 }
 </style>
diff --git a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/page_vue.btl b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/page_vue.btl
index fa3aff1..d1284a4 100644
--- a/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/page_vue.btl
+++ b/njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/page_vue.btl
@@ -6,25 +6,32 @@ var dc = toDashCase(lcc);
 
 var pageVueName = ucc + ".vue";
 var formVueName = ucc + "Form.vue";
+var detailVueName = ucc + "Detail.vue";
 var pageTsName = "page.ts";
 var apiTsName = dc + "-api.ts";
 var dTsName = dc + ".d.ts";
 %>
 <template>
-    <FormPage
-      ref="formPage"
-      :action-column="actionColumn"
-      :left-tools="leftTools"
-      :paging="paging">
-    <template #searchFormItem="{ searchForm }">
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
        <%
        for(column in table.columns) {
            var map = tsType(column.dataType);
        %>
        <ElFormItem label="${column.comment}">
-        <ElInput
-          v-model="searchForm.${toCamelCase(column.name)}"
-          placeholder="${column.comment}"/>
+        <ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}"/>
+      </ElFormItem>
+     <%}%>
+    </template>
+    <template #simpleFormItem="formData">
+       <%
+       for(column in table.columns) {
+           var map = tsType(column.dataType);
+       %>
+       <ElFormItem>
+        <ElInput placeholder="${column.comment}" v-model="formData.${toCamelCase(column.name)}"/>
       </ElFormItem>
      <%}%>
     </template>
@@ -37,64 +44,81 @@ var dTsName = dc + ".d.ts";
         <ElTableColumn label="${column.comment}" prop="${toCamelCase(column.name)}"/>
        <%}%>
     </template>
-    <${ucc}Form ref="${lcc}Form" @edit-succ="research"/>
-  </Page>
+    <${ucc}Form ref="${lcc}Form" :research="research"/>
+    <${ucc}Detail ref="${lcc}Detail"/>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
 import ${ucc}Form from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${formVueName}'
-import FormPage, {
-  type ActionColumnType,
-  type ToolType,
-} from '@/components/page/FormPage.vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import ${ucc}Detail from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${detailVueName}'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 const ${lcc}FormIns = useTemplateRef<InstanceType<typeof ${ucc}Form>>('${lcc}Form')
+const ${lcc}DetailIns = useTemplateRef<InstanceType<typeof ${ucc}Detail>>('${lcc}Detail')
 
 function research() {
-  formPageIns.value?.doSearch()
+  tablePageIns.value?.doSearch()
 }
 
-function paging(params: ${ucc}Types.Search${ucc}Param) {
-  return ${ucc}Api.paging(params)
-}
-
-const leftTools: ToolType[] = [
-  {
-    icon: 'Plus',
-    label: '新建',
-    action() {
-      ${lcc}FormIns.value?.open()
+const tablePageProps = buildTablePageProps<${ucc}Types.Search${ucc}Param, ${ucc}Types.Search${ucc}Result>({
+  searchForm: {
+    paging: ${ucc}Api.paging,
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          ${lcc}FormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'info',
+          action({row}) {
+            ${lcc}DetailIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          type: 'primary',
+          action({row}) {
+            ${lcc}FormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return ${ucc}Api.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
     },
   },
-]
-const actionColumn = reactive<ActionColumnType<${ucc}Types.Search${ucc}Result>>({
-  tableActions: [
-    {
-      tooltip: '编辑',
-      icon: 'Edit',
-      action({row}) {
-        ${lcc}FormIns.value?.open(row)
-      },
-    },
-    {
-      icon: 'Delete',
-      loading: false,
-      type: 'danger',
-      tooltip: '删除',
-      confirm: {
-        title: '是否删除当前数据',
-      },
-      action({row}) {
-        return ${ucc}Api.del([ row.id! ])
-          .then(() => {
-            ElMessage.success('删除成功')
-            return true
-          })
-      },
-    },
-  ],
 })
+
 </script>