diff --git a/src/views/infra/apiAccessLog/index.vue b/src/views/infra/apiAccessLog/index.vue
index 3b64cfc4f..7813f5fd7 100644
--- a/src/views/infra/apiAccessLog/index.vue
+++ b/src/views/infra/apiAccessLog/index.vue
@@ -1,3 +1,97 @@
 <template>
-  <div>开发中</div>
+		<div>
+		<BasicTable @register="registerTable">
+			<template #toolbar>
+			<a-button type="primary" @click="handleCreate"> 新增 </a-button>
+			<a-button type="warning" @click="handleExport"> 导出 </a-button>
+			</template>
+			<template #bodyCell="{ column, record }">
+			<template v-if="column.key === 'action'">
+				<TableAction
+				:actions="[
+					{
+					icon: 'clarity:note-edit-line',
+					label: '修改',
+					onClick: handleEdit.bind(null, record)
+					},
+					{
+					icon: 'ant-design:delete-outlined',
+					color: 'error',
+					label: '删除',
+					popConfirm: {
+						title: '是否确认删除',
+						placement: 'left',
+						confirm: handleDelete.bind(null, record)
+					}
+					}
+				]"
+				/>
+			</template>
+			</template>
+		</BasicTable>
+		<ApiAccessLogModel @register="registerModal" @success="reload()" />
+		</div>
 </template>
+<script lang="ts" setup name="ApiAccessLog">
+import { BasicTable, useTable, TableAction } from '@/components/Table'
+import { ApiAccessLogExportReqVO, exportApiAccessLogApi, getApiAccessLogPageApi,deleteApiAccessLogApi} from '@/api/infra/apiAccessLog'
+import { useModal } from '@/components/Modal'
+import ApiAccessLogModel from './ApiAccessLogModel.vue'
+import { columns, searchFormSchema } from './ApiAccessLog.data'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+
+const { t } = useI18n()
+const { createConfirm, createMessage } = useMessage()
+const [registerModal, { openModal }] = useModal()
+const [registerTable, { getForm, reload }] = useTable({
+		title: 'API 访问日志表列表',
+		api: getApiAccessLogPageApi,
+		columns,
+		formConfig: {
+		labelWidth: 120,
+		schemas: searchFormSchema
+		},
+		useSearchForm: true,
+		showTableSetting: true,
+		showIndexColumn: false,
+		actionColumn: {
+		width: 160,
+		title: '操作',
+		dataIndex: 'action',
+		fixed: 'right'
+		}
+})
+
+function handleCreate() {
+		openModal(true, {
+		isUpdate: false
+		})
+}
+
+function handleEdit(record: Recordable) {
+		openModal(true, {
+		record,
+		isUpdate: true
+		})
+}
+
+async function handleExport() {
+		createConfirm({
+		title: '导出',
+		iconType: 'warning',
+		content: '是否要导出数据？',
+		async onOk() {
+			await exportApiAccessLogApi(getForm().getFieldsValue() as ApiAccessLogExportReqVO)
+			createMessage.success(t('common.exportSuccessText'))
+		}
+		})
+}
+
+async function handleDelete(record: Recordable) {
+  await deleteApiAccessLogApi(record.id)
+  createMessage.success(t('common.delSuccessText'))
+  reload()
+}
+
+</script>