diff --git a/src/api/link/log.ts b/src/api/link/log.ts
new file mode 100644
index 00000000..c0e68404
--- /dev/null
+++ b/src/api/link/log.ts
@@ -0,0 +1,7 @@
+import server from '@/utils/request';
+
+export const queryAccess = (data: object) =>
+    server.post(`/logger/access/_query`, data);
+
+export const querySystem = (data: object) =>
+    server.post(`/logger/system/_query`, data);
diff --git a/src/views/Log/Access/index.vue b/src/views/Log/Access/index.vue
new file mode 100644
index 00000000..48679537
--- /dev/null
+++ b/src/views/Log/Access/index.vue
@@ -0,0 +1,255 @@
+<template>
+    <div>
+        <Search :columns="columns" target="search" @search="handleSearch" />
+        <JTable
+            ref="tableRef"
+            model="TABLE"
+            :columns="columns"
+            :request="queryAccess"
+            :defaultParams="{
+                sorts: [{ name: 'responseTime', order: 'desc' }],
+            }"
+            :params="params"
+        >
+            <template #requestTime="slotProps">
+                {{
+                    moment(slotProps.requestTime).format('YYYY-MM-DD HH:mm:ss')
+                }}
+            </template>
+            <template #responseTime="slotProps">
+                <a-tag color="purple">
+                    {{ slotProps.responseTime - slotProps.requestTime }} ms
+                </a-tag>
+            </template>
+            <template #username="slotProps">
+                <a-tag color="geekblue">
+                    {{ slotProps.context.userName }}
+                </a-tag>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+    <a-modal
+        :width="1100"
+        v-model:visible="visible"
+        title="详情"
+        @ok="handleOk"
+    >
+        <a-descriptions :data="descriptionsData" title="" bordered :column="2">
+            <a-descriptions-item label="URL">
+                {{ descriptionsData?.url }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求方法">
+                {{ descriptionsData?.httpMethod }}
+            </a-descriptions-item>
+            <a-descriptions-item label="动作">
+                {{ descriptionsData?.action }}
+            </a-descriptions-item>
+            <a-descriptions-item label="类名">
+                {{ descriptionsData?.target }}
+            </a-descriptions-item>
+            <a-descriptions-item label="方法名">
+                {{ descriptionsData?.method }}
+            </a-descriptions-item>
+            <a-descriptions-item label="IP">
+                {{ descriptionsData?.ip }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求时间">
+                {{
+                    moment(descriptionsData?.requestTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求耗时">
+                {{
+                    descriptionsData?.responseTime -
+                    descriptionsData?.requestTime +
+                    'ms'
+                }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求头" :span="2">
+                {{ descriptionsData?.httpHeaders }}
+            </a-descriptions-item>
+            <a-descriptions-item label="请求参数" :span="2">
+                {{ descriptionsData?.parameters }}
+            </a-descriptions-item>
+            <a-descriptions-item label="异常信息" :span="2">
+                <a-textarea
+                    v-model:value="descriptionsData.exception"
+                    placeholder="暂无数据"
+                    :auto-size="{ minRows: 3, maxRows: 20 }"
+                />
+            </a-descriptions-item>
+        </a-descriptions>
+    </a-modal>
+</template>
+<script lang="ts" setup name="AccessLog">
+import type { ActionsType } from '@/components/Table/index.vue';
+import type { AccessLogItem } from '../typings';
+import { queryAccess } from '@/api/link/log';
+import moment from 'moment';
+
+import { modifySearchColumnValue } from '@/utils/comm';
+
+const tableRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: 'IP',
+        dataIndex: 'ip',
+        key: 'ip',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        width: 150,
+        fixed: 'left',
+    },
+    {
+        title: '请求路径',
+        dataIndex: 'url',
+        key: 'url',
+        search: {
+            type: 'string',
+        },
+        // width: 200,
+    },
+    {
+        title: '请求方法',
+        dataIndex: 'httpMethod',
+        key: 'httpMethod',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: 'POST',
+                    value: 'POST',
+                },
+                {
+                    label: 'GET',
+                    value: 'GET',
+                },
+                {
+                    label: 'PATCH',
+                    value: 'PATCH',
+                },
+                {
+                    label: 'DELETE',
+                    value: 'DELETE',
+                },
+                {
+                    label: 'PUT',
+                    value: 'PUT',
+                },
+            ],
+        },
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '请求时间',
+        dataIndex: 'requestTime',
+        key: 'requestTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+        width: 200,
+    },
+    {
+        title: '请求耗时',
+        dataIndex: 'responseTime',
+        key: 'responseTime',
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '请求用户',
+        dataIndex: 'username',
+        key: 'username',
+        search: {
+            type: 'string',
+        },
+        width: 150,
+        scopedSlots: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 150,
+        scopedSlots: true,
+    },
+];
+
+const descriptionsData = ref<AccessLogItem>();
+const visible = ref<boolean>(false);
+
+const handleOk = (e: MouseEvent) => {
+    visible.value = false;
+};
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: (data: AccessLogItem) => {
+                descriptionsData.value = data;
+                visible.value = true;
+            },
+        },
+    ];
+};
+
+const column = {
+    username: 'context.username',
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = modifySearchColumnValue(e, column);
+};
+</script>
diff --git a/src/views/Log/System/index.vue b/src/views/Log/System/index.vue
new file mode 100644
index 00000000..982cc922
--- /dev/null
+++ b/src/views/Log/System/index.vue
@@ -0,0 +1,246 @@
+<template>
+    <div>
+        <Search :columns="columns" target="search" @search="handleSearch" />
+        <JTable
+            ref="tableRef"
+            model="TABLE"
+            :columns="columns"
+            :request="querySystem"
+            :defaultParams="{
+                sorts: [{ name: 'createTime', order: 'desc' }],
+            }"
+            :params="params"
+        >
+            <template #level="slotProps">
+                <a-tag
+                    :color="
+                        slotProps.level === 'WARN'
+                            ? 'orange'
+                            : slotProps.level === 'ERROR'
+                            ? 'red'
+                            : slotProps.level === 'DEBUG'
+                            ? 'blue'
+                            : 'green'
+                    "
+                >
+                    {{ slotProps.level }}
+                </a-tag>
+            </template>
+            <template #createTime="slotProps">
+                {{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #server="slotProps">
+                {{ slotProps.context.server }}
+            </template>
+
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+    <a-modal
+        :width="1100"
+        v-model:visible="visible"
+        title="详情"
+        @ok="handleOk"
+    >
+        <div>
+            <span class="mr-10">[{{ descriptionsData?.threadName }}]</span>
+            <span class="mr-10">{{
+                moment(descriptionsData?.createTime).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+            }}</span>
+            <span>{{ descriptionsData?.className }}</span>
+        </div>
+        <div class="mb-10">
+            <a-tag
+                :color="
+                    descriptionsData?.level === 'WARN'
+                        ? 'orange'
+                        : descriptionsData?.level === 'ERROR'
+                        ? 'red'
+                        : descriptionsData?.level === 'DEBUG'
+                        ? 'blue'
+                        : 'green'
+                "
+            >
+                {{ descriptionsData?.level }}
+            </a-tag>
+            <span>{{ descriptionsData?.message }}</span>
+        </div>
+        <a-textarea
+            v-model:value="descriptionsData.exceptionStack"
+            placeholder="暂无数据"
+            :auto-size="{ minRows: 24, maxRows: 28 }"
+        />
+    </a-modal>
+</template>
+<script lang="ts" setup name="SystemLog">
+import type { ActionsType } from '@/components/Table/index.vue';
+import type { SystemLogItem } from '../typings';
+import { querySystem } from '@/api/link/log';
+import moment from 'moment';
+
+import { modifySearchColumnValue } from '@/utils/comm';
+
+const tableRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        width: 400,
+        fixed: 'left',
+        ellipsis: true,
+    },
+    {
+        title: '日志级别',
+        dataIndex: 'level',
+        key: 'level',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: 'ERROR',
+                    value: 'ERROR',
+                },
+                {
+                    label: 'INFO',
+                    value: 'INFO',
+                },
+                {
+                    label: 'DEBUG',
+                    value: 'DEBUG',
+                },
+                {
+                    label: 'WARN',
+                    value: 'WARN',
+                },
+            ],
+        },
+        scopedSlots: true,
+        width: 100,
+    },
+    {
+        title: '日志内容',
+        dataIndex: 'message',
+        key: 'message',
+        search: {
+            type: 'string',
+        },
+        scopedSlots: true,
+        ellipsis: true,
+    },
+    {
+        title: '服务名',
+        dataIndex: 'server',
+        key: 'server',
+        scopedSlots: true,
+        search: {
+            type: 'string',
+        },
+        width: 200,
+        ellipsis: true,
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        search: {
+            type: 'date',
+        },
+        scopedSlots: true,
+        width: 200,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 150,
+        scopedSlots: true,
+    },
+];
+
+const descriptionsData = ref<SystemLogItem>();
+const visible = ref<boolean>(false);
+
+const handleOk = (e: MouseEvent) => {
+    visible.value = false;
+};
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: (data: SystemLogItem) => {
+                descriptionsData.value = data;
+                visible.value = true;
+            },
+        },
+    ];
+};
+
+const column = {
+    server: 'context.server',
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = modifySearchColumnValue(e, column);
+};
+</script>
+
+<style scoped lang="less">
+.mr-10 {
+    margin-right: 10px;
+}
+.mb-10 {
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/Log/index.vue b/src/views/Log/index.vue
new file mode 100644
index 00000000..9193b21f
--- /dev/null
+++ b/src/views/Log/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <page-container :tabList="list" @tabChange="onTabChange">
+        <AccessLog v-if="activeKey === '1'" />
+        <SystemLog v-else />
+    </page-container>
+</template>
+<script lang="ts" setup name="LogPage">
+import { defineComponent, ref } from 'vue';
+import AccessLog from './Access/index.vue';
+import SystemLog from './System/index.vue';
+
+const activeKey = ref('1');
+
+const list = [
+    {
+        key: '1',
+        tab: '访问日志',
+    },
+    {
+        key: '2',
+        tab: '系统日志',
+    },
+];
+
+const onTabChange = (e: string) => {
+    activeKey.value = e;
+};
+</script>
diff --git a/src/views/Log/typings.d.ts b/src/views/Log/typings.d.ts
new file mode 100644
index 00000000..bccebed0
--- /dev/null
+++ b/src/views/Log/typings.d.ts
@@ -0,0 +1,31 @@
+export type AccessLogItem = {
+  id: string;
+  context: any;
+  describe: string;
+  exception: string;
+  httpHeaders: any;
+  httpMethod: string;
+  ip: string;
+  method: string;
+  parameters: any;
+  requestTime: number;
+  responseTime: number;
+  target: string;
+  url: string;
+  action: string;
+};
+
+export type SystemLogItem = {
+  id: string;
+  className: string;
+  context: any;
+  createTime: number;
+  exceptionStack: string;
+  level: string;
+  lineNumber: number;
+  message: string;
+  methodName: string;
+  name: string;
+  threadId: string;
+  threadName: string;
+};
diff --git a/src/views/link/Log/Access/index.vue b/src/views/link/Log/Access/index.vue
deleted file mode 100644
index 9c87e8c8..00000000
--- a/src/views/link/Log/Access/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>访问日志</div>
-</template>
-<script lang="ts" setup name="SystemLog">
-
-</script>
diff --git a/src/views/link/Log/System/index.vue b/src/views/link/Log/System/index.vue
deleted file mode 100644
index 1fd97c0d..00000000
--- a/src/views/link/Log/System/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>系统日志</div>
-</template>
-<script lang="ts" setup name="AccessLog">
-
-</script>
diff --git a/src/views/link/Log/index.vue b/src/views/link/Log/index.vue
deleted file mode 100644
index 4fbaf127..00000000
--- a/src/views/link/Log/index.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <a-tabs v-model:activeKey="activeKey">
-    <a-tab-pane key="1" tab="访问日志">
-      <AccessLog />
-    </a-tab-pane>
-    <a-tab-pane key="2" tab="系统日志" force-render>
-      <SystemLog />
-    </a-tab-pane>
-  </a-tabs>
-</template>
-<script lang="ts" setup name="LogPage">
-import { defineComponent, ref } from 'vue';
-import AccessLog from './Access/index.vue';
-import SystemLog from './System/index.vue';
-
-const activeKey = ref('1');
-</script>