diff --git a/apps/web-ele/src/views/crm/backlog/data.ts b/apps/web-ele/src/views/crm/backlog/data.ts
new file mode 100644
index 000000000..d0b66d13e
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/data.ts
@@ -0,0 +1,102 @@
+import type { Ref } from 'vue';
+
+export interface LeftSideItem {
+  name: string;
+  menu: string;
+  count: Ref<number>;
+}
+
+/** 跟进状态 */
+export const FOLLOWUP_STATUS = [
+  { label: '待跟进', value: false },
+  { label: '已跟进', value: true },
+];
+
+/** 归属范围 */
+export const SCENE_TYPES = [
+  { label: '我负责的', value: 1 },
+  { label: '我参与的', value: 2 },
+  { label: '下属负责的', value: 3 },
+];
+
+/** 联系状态 */
+export const CONTACT_STATUS = [
+  { label: '今日需联系', value: 1 },
+  { label: '已逾期', value: 2 },
+  { label: '已联系', value: 3 },
+];
+
+/** 审批状态 */
+export const AUDIT_STATUS = [
+  { label: '待审批', value: 10 },
+  { label: '审核通过', value: 20 },
+  { label: '审核不通过', value: 30 },
+];
+
+/** 回款提醒类型 */
+export const RECEIVABLE_REMIND_TYPE = [
+  { label: '待回款', value: 1 },
+  { label: '已逾期', value: 2 },
+  { label: '已回款', value: 3 },
+];
+
+/** 合同过期状态 */
+export const CONTRACT_EXPIRY_TYPE = [
+  { label: '即将过期', value: 1 },
+  { label: '已过期', value: 2 },
+];
+
+/** 左侧菜单 */
+export const useLeftSides = (
+  customerTodayContactCount: Ref<number>,
+  clueFollowCount: Ref<number>,
+  customerFollowCount: Ref<number>,
+  customerPutPoolRemindCount: Ref<number>,
+  contractAuditCount: Ref<number>,
+  contractRemindCount: Ref<number>,
+  receivableAuditCount: Ref<number>,
+  receivablePlanRemindCount: Ref<number>,
+): LeftSideItem[] => {
+  return [
+    {
+      name: '今日需联系客户',
+      menu: 'customerTodayContact',
+      count: customerTodayContactCount,
+    },
+    {
+      name: '分配给我的线索',
+      menu: 'clueFollow',
+      count: clueFollowCount,
+    },
+    {
+      name: '分配给我的客户',
+      menu: 'customerFollow',
+      count: customerFollowCount,
+    },
+    {
+      name: '待进入公海的客户',
+      menu: 'customerPutPoolRemind',
+      count: customerPutPoolRemindCount,
+    },
+    {
+      name: '待审核合同',
+      menu: 'contractAudit',
+      count: contractAuditCount,
+    },
+    {
+      name: '待审核回款',
+      menu: 'receivableAudit',
+      count: receivableAuditCount,
+    },
+    {
+      name: '待回款提醒',
+      menu: 'receivablePlanRemind',
+      count: receivablePlanRemindCount,
+    },
+    {
+      name: '即将到期的合同',
+      menu: 'contractRemind',
+      count: contractRemindCount,
+    },
+  ];
+};
diff --git a/apps/web-ele/src/views/crm/backlog/index.vue b/apps/web-ele/src/views/crm/backlog/index.vue
new file mode 100644
index 000000000..7e85c2d5d
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/index.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed, onActivated, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { ElBadge, ElCard } from 'element-plus';
+
+import { getFollowClueCount } from '#/api/crm/clue';
+import {
+  getAuditContractCount,
+  getRemindContractCount,
+} from '#/api/crm/contract';
+import {
+  getFollowCustomerCount,
+  getPutPoolRemindCustomerCount,
+  getTodayContactCustomerCount,
+} from '#/api/crm/customer';
+import { getAuditReceivableCount } from '#/api/crm/receivable';
+import { getReceivablePlanRemindCount } from '#/api/crm/receivable/plan';
+
+import { useLeftSides } from './data';
+import ClueFollowList from './modules/clue-follow-list.vue';
+import ContractAuditList from './modules/contract-audit-list.vue';
+import ContractRemindList from './modules/contract-remind-list.vue';
+import CustomerFollowList from './modules/customer-follow-list.vue';
+import CustomerPutPoolRemindList from './modules/customer-put-pool-remind-list.vue';
+import CustomerTodayContactList from './modules/customer-today-contact-list.vue';
+import ReceivableAuditList from './modules/receivable-audit-list.vue';
+import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
+
+const leftMenu = ref('customerTodayContact');
+
+const clueFollowCount = ref(0);
+const customerFollowCount = ref(0);
+const customerPutPoolRemindCount = ref(0);
+const customerTodayContactCount = ref(0);
+const contractAuditCount = ref(0);
+const contractRemindCount = ref(0);
+const receivableAuditCount = ref(0);
+const receivablePlanRemindCount = ref(0);
+
+const leftSides = useLeftSides(
+  customerTodayContactCount,
+  clueFollowCount,
+  customerFollowCount,
+  customerPutPoolRemindCount,
+  contractAuditCount,
+  contractRemindCount,
+  receivableAuditCount,
+  receivablePlanRemindCount,
+);
+
+const currentComponent = computed(() => {
+  const components = {
+    customerTodayContact: CustomerTodayContactList,
+    clueFollow: ClueFollowList,
+    contractAudit: ContractAuditList,
+    receivableAudit: ReceivableAuditList,
+    contractRemind: ContractRemindList,
+    customerFollow: CustomerFollowList,
+    customerPutPoolRemind: CustomerPutPoolRemindList,
+    receivablePlanRemind: ReceivablePlanRemindList,
+  } as const;
+  return components[leftMenu.value as keyof typeof components];
+});
+
+/** 侧边点击 */
+function sideClick(item: { menu: string }) {
+  leftMenu.value = item.menu;
+}
+
+/** 获取数量 */
+async function getCount() {
+  customerTodayContactCount.value = await getTodayContactCustomerCount();
+  customerPutPoolRemindCount.value = await getPutPoolRemindCustomerCount();
+  customerFollowCount.value = await getFollowCustomerCount();
+  clueFollowCount.value = await getFollowClueCount();
+  contractAuditCount.value = await getAuditContractCount();
+  contractRemindCount.value = await getRemindContractCount();
+  receivableAuditCount.value = await getAuditReceivableCount();
+  receivablePlanRemindCount.value = await getReceivablePlanRemindCount();
+}
+
+/** 激活时 */
+onActivated(() => {
+  getCount();
+});
+
+/** 初始化 */
+onMounted(() => {
+  getCount();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full w-full">
+      <ElCard class="w-1/5">
+        <div v-for="item in leftSides" :key="item.menu">
+          <div
+            class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-between px-4 py-3 border-b"
+            @click="sideClick(item)"
+          >
+            <div>{{ item.name }}</div>
+            <ElBadge
+              v-if="item.count.value > 0"
+              :value="item.count.value"
+              :type="item.menu === leftMenu ? 'primary' : 'danger'"
+            />
+          </div>
+        </div>
+      </ElCard>
+      <component class="ml-4 w-4/5" :is="currentComponent" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/clue-follow-list.vue b/apps/web-ele/src/views/crm/backlog/modules/clue-follow-list.vue
new file mode 100644
index 000000000..3a4841c1e
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -0,0 +1,79 @@
+<!-- 分配给我的线索 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmClueApi } from '#/api/crm/clue';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCluePage } from '#/api/crm/clue';
+import { useGridColumns } from '#/views/crm/clue/data';
+
+import { FOLLOWUP_STATUS } from '../data';
+
+const { push } = useRouter();
+
+/** 打开线索详情 */
+function handleDetail(row: CrmClueApi.Clue) {
+  push({ name: 'CrmClueDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'RadioGroup',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCluePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            transformStatus: false,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmClueApi.Clue>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)">{{
+        row.name
+      }}</ElButton>
+    </template>
+    <template #actions="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)"
+        >查看详情</ElButton
+      >
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/contract-audit-list.vue b/apps/web-ele/src/views/crm/backlog/modules/contract-audit-list.vue
new file mode 100644
index 000000000..5e4631c96
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -0,0 +1,124 @@
+<!-- 待审核合同 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
+
+import { AUDIT_STATUS } from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function handleProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开合同详情 */
+function handleContractDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+/** 打开联系人详情 */
+function handleContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 打开商机详情 */
+function handleBusinessDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: AUDIT_STATUS[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1, // 我负责的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleContractDetail(row)">
+        {{ row.name }}
+      </ElButton>
+    </template>
+    <template #customerName="{ row }">
+      <ElButton type="primary" link @click="handleCustomerDetail(row)">
+        {{ row.customerName }}
+      </ElButton>
+    </template>
+    <template #businessName="{ row }">
+      <ElButton type="primary" link @click="handleBusinessDetail(row)">
+        {{ row.businessName }}
+      </ElButton>
+    </template>
+    <template #contactName="{ row }">
+      <ElButton type="primary" link @click="handleContactDetail(row)">
+        {{ row.contactName }}
+      </ElButton>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'primary',
+            link: true,
+            icon: ACTION_ICON.VIEW,
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/contract-remind-list.vue b/apps/web-ele/src/views/crm/backlog/modules/contract-remind-list.vue
new file mode 100644
index 000000000..e35662ce9
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/contract-remind-list.vue
@@ -0,0 +1,125 @@
+<!-- 即将到期的合同 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
+
+import { CONTRACT_EXPIRY_TYPE } from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function handleProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开合同详情 */
+function handleContractDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+/** 打开联系人详情 */
+function handleContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 打开商机详情 */
+function handleBusinessDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'expiryType',
+        label: '到期状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTRACT_EXPIRY_TYPE,
+        },
+        defaultValue: CONTRACT_EXPIRY_TYPE[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1, // 自己负责的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleContractDetail(row)">
+        {{ row.name }}
+      </ElButton>
+    </template>
+    <template #customerName="{ row }">
+      <ElButton type="primary" link @click="handleCustomerDetail(row)">
+        {{ row.customerName }}
+      </ElButton>
+    </template>
+    <template #businessName="{ row }">
+      <ElButton type="primary" link @click="handleBusinessDetail(row)">
+        {{ row.businessName }}
+      </ElButton>
+    </template>
+    <template #signContactName="{ row }">
+      <ElButton type="primary" link @click="handleContactDetail(row)">
+        {{ row.signContactName }}
+      </ElButton>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'primary',
+            link: true,
+            auth: ['crm:contract:update'],
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/customer-follow-list.vue b/apps/web-ele/src/views/crm/backlog/modules/customer-follow-list.vue
new file mode 100644
index 000000000..292d3106d
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -0,0 +1,79 @@
+<!-- 分配给我的客户 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
+
+import { FOLLOWUP_STATUS } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function handleDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'RadioGroup',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)">{{
+        row.name
+      }}</ElButton>
+    </template>
+    <template #actions="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)"
+        >查看详情</ElButton
+      >
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue b/apps/web-ele/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
new file mode 100644
index 000000000..42fc3881e
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
@@ -0,0 +1,79 @@
+<!-- 待进入公海的客户 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
+
+import { SCENE_TYPES } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function handleDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: SCENE_TYPES[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            pool: true, // 固定 公海参数为 true
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)">{{
+        row.name
+      }}</ElButton>
+    </template>
+    <template #actions="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)"
+        >查看详情</ElButton
+      >
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/customer-today-contact-list.vue b/apps/web-ele/src/views/crm/backlog/modules/customer-today-contact-list.vue
new file mode 100644
index 000000000..9ed859690
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/customer-today-contact-list.vue
@@ -0,0 +1,89 @@
+<!-- 今日需联系客户 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
+
+import { CONTACT_STATUS, SCENE_TYPES } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function handleDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'contactStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTACT_STATUS,
+        },
+        defaultValue: CONTACT_STATUS[0]!.value,
+      },
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: SCENE_TYPES[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            pool: null, // 是否公海数据
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #name="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)">{{
+        row.name
+      }}</ElButton>
+    </template>
+    <template #actions="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)"
+        >查看详情</ElButton
+      >
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/receivable-audit-list.vue b/apps/web-ele/src/views/crm/backlog/modules/receivable-audit-list.vue
new file mode 100644
index 000000000..2aeb8910f
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/receivable-audit-list.vue
@@ -0,0 +1,106 @@
+<!-- 待审核回款 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { useRouter } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getReceivablePage } from '#/api/crm/receivable';
+import { useGridColumns } from '#/views/crm/receivable/data';
+
+import { AUDIT_STATUS } from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开回款详情 */
+function handleDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 打开合同详情 */
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmContractDetail', params: { id: row.contractId } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: AUDIT_STATUS[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #no="{ row }">
+      <ElButton type="primary" link @click="handleDetail(row)">
+        {{ row.no }}
+      </ElButton>
+    </template>
+    <template #customerName="{ row }">
+      <ElButton type="primary" link @click="handleCustomerDetail(row)">
+        {{ row.customerName }}
+      </ElButton>
+    </template>
+    <template #contractNo="{ row }">
+      <ElButton type="primary" link @click="handleContractDetail(row)">
+        {{ row.contractNo }}
+      </ElButton>
+    </template>
+    <template #actions="{ row }">
+      <ElButton type="primary" link @click="handleProcessDetail(row)"
+        >查看审批</ElButton
+      >
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/crm/backlog/modules/receivable-plan-remind-list.vue b/apps/web-ele/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
new file mode 100644
index 000000000..37f76b458
--- /dev/null
+++ b/apps/web-ele/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
@@ -0,0 +1,104 @@
+<!-- 待回款提醒 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getReceivablePlanPage } from '#/api/crm/receivable/plan';
+import Form from '#/views/crm/receivable/modules/form.vue';
+import { useGridColumns } from '#/views/crm/receivable/plan/data';
+
+import { RECEIVABLE_REMIND_TYPE } from '../data';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 打开回款详情 */
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ plan: row }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'remindType',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: RECEIVABLE_REMIND_TYPE,
+        },
+        defaultValue: RECEIVABLE_REMIND_TYPE[0]!.value,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+});
+</script>
+
+<template>
+  <div>
+    <FormModal />
+    <Grid>
+      <template #customerName="{ row }">
+        <ElButton type="primary" link @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </ElButton>
+      </template>
+      <template #period="{ row }">
+        <ElButton type="primary" link @click="handleDetail(row)">{{
+          row.period
+        }}</ElButton>
+      </template>
+      <template #actions="{ row }">
+        <ElButton type="primary" link @click="handleCreateReceivable(row)">
+          创建回款
+        </ElButton>
+      </template>
+    </Grid>
+  </div>
+</template>