diff --git a/apps/web-antd/src/views/crm/business/index.ts b/apps/web-antd/src/views/crm/business/index.ts
new file mode 100644
index 000000000..6ff97edf2
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/index.ts
@@ -0,0 +1,25 @@
+import { defineAsyncComponent } from 'vue';
+
+export const BusinessForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const BusinessDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const BusinessDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
+
+export const BusinessDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const BusinessDetailsListModal = defineAsyncComponent(
+  () => import('./modules/detail-list-modal.vue'),
+);
+
+export const UpStatusForm = defineAsyncComponent(
+  () => import('./modules/up-status-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/business/modules/detail.vue b/apps/web-antd/src/views/crm/business/modules/detail.vue
index 418d80467..81ff5863d 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmBusinessApi } from '#/api/crm/business';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -14,49 +14,20 @@ import { getBusiness } from '#/api/crm/business';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import {
+  BusinessDetailsInfo,
+  BusinessForm,
+  UpStatusForm,
+} from '#/views/crm/business';
+import { ContactDetailsList } from '#/views/crm/contact';
+import { ContractDetailsList } from '#/views/crm/contract';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import { ProductDetailsList } from '#/views/crm/product';
 
 import { useDetailSchema } from './detail-data';
 
-const BusinessDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
-const ContactDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/contact/modules/detail-list.vue'),
-);
-
-const ContractDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/contract/modules/detail-list.vue'),
-);
-
-const FollowUp = defineAsyncComponent(
-  () => import('#/views/crm/followup/index.vue'),
-);
-
-const ProductDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/product/modules/detail-list.vue'),
-);
-
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const TransferForm = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/transfer-form.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
-const BusinessForm = defineAsyncComponent(
-  () => import('#/views/crm/business/modules/form.vue'),
-);
-
-const UpStatusForm = defineAsyncComponent(
-  () => import('#/views/crm/business/modules/up-status-form.vue'),
-);
-
 const loading = ref(false);
 
 const route = useRoute();
@@ -204,7 +175,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="7" :force-render="true">
-          <OperateLog :log-list="businessLogList" />
+          <AsyncOperateLog :log-list="businessLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index 486da4c74..b2415bab5 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -15,26 +15,13 @@ import { getClue, transformClue } from '#/api/crm/clue';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from './detail-data';
 import ClueForm from './form.vue';
 
-const FollowUp = defineAsyncComponent(
-  () => import('#/views/crm/followup/index.vue'),
-);
-
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const TransferForm = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/transfer-form.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
 const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
 
 const loading = ref(false);
@@ -184,7 +171,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
-          <OperateLog :log-list="clueLogList" />
+          <AsyncOperateLog :log-list="clueLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/contact/index.ts b/apps/web-antd/src/views/crm/contact/index.ts
new file mode 100644
index 000000000..e19127cf3
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ContactDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ContactForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ContactDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ContactDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail.vue b/apps/web-antd/src/views/crm/contact/modules/detail.vue
index 4f20a5607..9aeb21eda 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmContactApi } from '#/api/crm/contact';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -14,37 +14,14 @@ import { getContact } from '#/api/crm/contact';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { BusinessDetailsList } from '#/views/crm/business';
+import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from './detail-data';
 
-const ContactDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
-const ContactForm = defineAsyncComponent(
-  () => import('#/views/crm/contact/modules/form.vue'),
-);
-
-const BusinessList = defineAsyncComponent(
-  () => import('#/views/crm/business/modules/detail-list.vue'),
-);
-
-const FollowUp = defineAsyncComponent(
-  () => import('#/views/crm/followup/index.vue'),
-);
-
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const TransferForm = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/transfer-form.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
 const loading = ref(false);
 
 const route = useRoute();
@@ -156,7 +133,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="商机" key="4" :force-render="true">
-          <BusinessList
+          <BusinessDetailsList
             :biz-id="contactId"
             :biz-type="BizTypeEnum.CRM_CONTACT"
             :contact-id="contactId"
@@ -164,7 +141,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="5" :force-render="true">
-          <OperateLog :log-list="contactLogList" />
+          <AsyncOperateLog :log-list="contactLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/contract/index.ts b/apps/web-antd/src/views/crm/contract/index.ts
new file mode 100644
index 000000000..7306f3e20
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ContractDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ContractForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ContractDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ContractDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail.vue b/apps/web-antd/src/views/crm/contract/modules/detail.vue
index 301cb4d0c..ad283e4e5 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmContractApi } from '#/api/crm/contract';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -15,41 +15,17 @@ import { getContract } from '#/api/crm/contract';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import { ProductDetailsList } from '#/views/crm/product';
+import {
+  ReceivableDetailsList,
+  ReceivablePlanDetailsList,
+} from '#/views/crm/receivable';
 
 import { useDetailSchema } from './detail-data';
-import ClueForm from './form.vue';
-
-const FollowUp = defineAsyncComponent(
-  () => import('#/views/crm/followup/index.vue'),
-);
-
-const ProductDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/product/modules/detail-list.vue'),
-);
-
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const TransferForm = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/transfer-form.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
-const ContractDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
-const ReceivableDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/receivable/modules/detail-list.vue'),
-);
-
-const ReceivablePlanDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/receivable/plan/modules/detail-list.vue'),
-);
 
 const loading = ref(false);
 
@@ -79,7 +55,7 @@ const [Description] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ClueForm,
+  connectedComponent: ContractForm,
   destroyOnClose: true,
 });
 
@@ -185,7 +161,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
-          <OperateLog :log-list="contractLogList" />
+          <AsyncOperateLog :log-list="contractLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/customer/index.ts b/apps/web-antd/src/views/crm/customer/index.ts
new file mode 100644
index 000000000..3c2e882ae
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const CustomerDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const CustomerForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const CustomerDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const DistributeForm = defineAsyncComponent(
+  () => import('./poolConfig/distribute-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
index 23fa189dc..0dded9c8f 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from '../data';
+import { useDetailBaseSchema } from './detail-data';
 
 defineProps<{
   customer: CrmCustomerApi.Customer; // 客户信息
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
deleted file mode 100644
index 8e6c73393..000000000
--- a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <div>customerList</div>
-</template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail.vue b/apps/web-antd/src/views/crm/customer/modules/detail.vue
index 1ee9c00db..9a3452ae9 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmCustomerApi } from '#/api/crm/customer';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
@@ -14,56 +14,23 @@ import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { BusinessDetailsList } from '#/views/crm/business';
+import { ContactDetailsList } from '#/views/crm/contact';
+import { ContractDetailsList } from '#/views/crm/contract';
+import {
+  CustomerDetailsInfo,
+  CustomerForm,
+  DistributeForm,
+} from '#/views/crm/customer';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import {
+  ReceivableDetailsList,
+  ReceivablePlanDetailsList,
+} from '#/views/crm/receivable';
 
-import { useDetailSchema } from '../data';
-
-const BusinessList = defineAsyncComponent(
-  () => import('#/views/crm/business/modules/detail-list.vue'),
-);
-
-const CustomerDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
-const ContactDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/contact/modules/detail-list.vue'),
-);
-
-const ContractDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/contract/modules/detail-list.vue'),
-);
-
-const CustomerForm = defineAsyncComponent(
-  () => import('#/views/crm/customer/modules/form.vue'),
-);
-
-const DistributeForm = defineAsyncComponent(
-  () => import('#/views/crm/customer/poolConfig/distribute-form.vue'),
-);
-
-const FollowUp = defineAsyncComponent(
-  () => import('#/views/crm/followup/index.vue'),
-);
-
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const TransferForm = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/transfer-form.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
-const ReceivableDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/receivable/modules/detail-list.vue'),
-);
-
-const ReceivablePlanDetailsList = defineAsyncComponent(
-  () => import('#/views/crm/receivable/plan/modules/detail-list.vue'),
-);
+import { useDetailSchema } from './detail-data';
 
 const loading = ref(false);
 
@@ -278,7 +245,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="商机" key="5" :force-render="true">
-          <BusinessList
+          <BusinessDetailsList
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :customer-id="customerId"
@@ -295,7 +262,7 @@ onMounted(() => {
           <ReceivableDetailsList :customer-id="customerId" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
-          <OperateLog :log-list="customerLogList" />
+          <AsyncOperateLog :log-list="customerLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/followup/index.ts b/apps/web-antd/src/views/crm/followup/index.ts
new file mode 100644
index 000000000..560abe8c7
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/index.ts
@@ -0,0 +1,3 @@
+import { defineAsyncComponent } from 'vue';
+
+export const FollowUp = defineAsyncComponent(() => import('./index.vue'));
diff --git a/apps/web-antd/src/views/crm/permission/index.ts b/apps/web-antd/src/views/crm/permission/index.ts
index a175bff47..4d9f097cd 100644
--- a/apps/web-antd/src/views/crm/permission/index.ts
+++ b/apps/web-antd/src/views/crm/permission/index.ts
@@ -1,2 +1,13 @@
-export { default as PermissionList } from './modules/permission-list.vue';
-export { default as TransferForm } from './modules/transfer-form.vue';
+import { defineAsyncComponent } from 'vue';
+
+export const PermissionList = defineAsyncComponent(
+  () => import('./modules/permission-list.vue'),
+);
+
+export const PermissionForm = defineAsyncComponent(
+  () => import('./modules/permission-form.vue'),
+);
+
+export const TransferForm = defineAsyncComponent(
+  () => import('./modules/transfer-form.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/product/index.ts b/apps/web-antd/src/views/crm/product/index.ts
new file mode 100644
index 000000000..09e7043b1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/index.ts
@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ProductDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ProductForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ProductDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ProductDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/product/modules/detail.vue b/apps/web-antd/src/views/crm/product/modules/detail.vue
index 71f756098..1255e4671 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/product/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmProductApi } from '#/api/crm/product';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -14,17 +14,11 @@ import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getProduct } from '#/api/crm/product';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { ProductDetailsInfo } from '#/views/crm/product';
 
 import { useDetailSchema } from './detail-data';
 
-const ProductDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
 const loading = ref(false);
 
 const route = useRoute();
@@ -87,7 +81,7 @@ onMounted(() => {
           <ProductDetailsInfo :product="product" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
-          <OperateLog :log-list="productLogList" />
+          <AsyncOperateLog :log-list="productLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/receivable/index.ts b/apps/web-antd/src/views/crm/receivable/index.ts
new file mode 100644
index 000000000..bd8a2aed4
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/index.ts
@@ -0,0 +1,29 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ReceivableDetailsInfo = defineAsyncComponent(
+  () => import('./modules/detail-info.vue'),
+);
+
+export const ReceivableForm = defineAsyncComponent(
+  () => import('./modules/form.vue'),
+);
+
+export const ReceivableDetails = defineAsyncComponent(
+  () => import('./modules/detail.vue'),
+);
+
+export const ReceivableDetailsList = defineAsyncComponent(
+  () => import('./modules/detail-list.vue'),
+);
+
+export const ReceivablePlanDetailsInfo = defineAsyncComponent(
+  () => import('./plan/modules/detail-info.vue'),
+);
+
+export const ReceivablePlanDetailsList = defineAsyncComponent(
+  () => import('./plan/modules/detail-list.vue'),
+);
+
+export const ReceivablePlanDetails = defineAsyncComponent(
+  () => import('./plan/modules/detail.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
index b249fb332..8fddd38b5 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -15,22 +15,13 @@ import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getReceivable } from '#/api/crm/receivable';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { PermissionList } from '#/views/crm/permission';
+import { ReceivableDetailsInfo } from '#/views/crm/receivable';
 
 import { useDetailSchema } from './detail-data';
 import ReceivableForm from './form.vue';
 
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
-const ReceivableDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
 const loading = ref(false);
 
 const route = useRoute();
@@ -131,7 +122,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <OperateLog :log-list="receivableLogList" />
+          <AsyncOperateLog :log-list="receivableLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
index e92610c25..287804065 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmReceivableApi.Receivable>();
+    const data = modalApi.getData();
     if (!data) {
       return;
     }
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
index 04be42a3e..573f97cb4 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
@@ -2,7 +2,7 @@
 import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -15,22 +15,13 @@ import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getReceivablePlan } from '#/api/crm/receivable/plan';
 import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { PermissionList } from '#/views/crm/permission';
+import { ReceivablePlanDetailsInfo } from '#/views/crm/receivable';
 
 import { useDetailSchema } from './detail-data';
 import ReceivablePlanForm from './form.vue';
 
-const PermissionList = defineAsyncComponent(
-  () => import('#/views/crm/permission/modules/permission-list.vue'),
-);
-
-const OperateLog = defineAsyncComponent(
-  () => import('#/components/operate-log'),
-);
-
-const ReceivablePlanDetailsInfo = defineAsyncComponent(
-  () => import('./detail-info.vue'),
-);
-
 const loading = ref(false);
 
 const route = useRoute();
@@ -135,7 +126,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <OperateLog :log-list="receivablePlanLogList" />
+          <AsyncOperateLog :log-list="receivablePlanLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>