diff --git a/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/LogService.java b/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/LogService.java
index 52cb7095..4b72467c 100644
--- a/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/LogService.java
+++ b/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/LogService.java
@@ -43,7 +43,7 @@ public interface LogService {
      *            分页查询条件
      * @return 操作日志分页信息
      */
-    PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery);
+    PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery);
 
     /**
      * 分页查询登录日志列表
@@ -54,7 +54,7 @@ public interface LogService {
      *            分页查询条件
      * @return 登录日志分页信息
      */
-    PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery);
+    PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery);
 
     /**
      * 分页查询系统日志列表
@@ -65,7 +65,7 @@ public interface LogService {
      *            分页查询条件
      * @return 系统日志分页信息
      */
-    PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery);
+    PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery);
 
     /**
      * 查看系统日志详情
@@ -74,5 +74,5 @@ public interface LogService {
      *            日志 ID
      * @return 系统日志详情
      */
-    SystemLogDetailVO detail(Long logId);
+    SystemLogDetailVO get(Long logId);
 }
diff --git a/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/impl/LogServiceImpl.java b/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/impl/LogServiceImpl.java
index 8a3c11fd..7302938f 100644
--- a/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/impl/LogServiceImpl.java
+++ b/continew-admin-monitor/src/main/java/top/charles7c/cnadmin/monitor/service/impl/LogServiceImpl.java
@@ -69,7 +69,7 @@ public class LogServiceImpl implements LogService {
     }
 
     @Override
-    public PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery) {
+    public PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery) {
         QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
 
         // 限定查询信息
@@ -93,7 +93,7 @@ public class LogServiceImpl implements LogService {
     }
 
     @Override
-    public PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery) {
+    public PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery) {
         QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
         queryWrapper.lambda()
             .and(qw -> qw.like(LogDO::getRequestUrl, "/auth/login").or().like(LogDO::getRequestUrl, "/auth/logout"));
@@ -114,7 +114,7 @@ public class LogServiceImpl implements LogService {
     }
 
     @Override
-    public PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery) {
+    public PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery) {
         QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
 
         // 限定查询信息
@@ -133,7 +133,7 @@ public class LogServiceImpl implements LogService {
     }
 
     @Override
-    public SystemLogDetailVO detail(Long logId) {
+    public SystemLogDetailVO get(Long logId) {
         LogDO logDO = logMapper.selectById(logId);
         CheckUtils.throwIfNull(logDO, String.format("ID为 [%s] 的日志已不存在", logId));
 
diff --git a/continew-admin-ui/src/api/monitor/log.ts b/continew-admin-ui/src/api/monitor/log.ts
index 2ca32586..38cef1f3 100644
--- a/continew-admin-ui/src/api/monitor/log.ts
+++ b/continew-admin-ui/src/api/monitor/log.ts
@@ -4,7 +4,7 @@ import qs from 'query-string';
 const BASE_URL = '/monitor/log';
 
 export interface LogRecord {
-  logId: string;
+  logId?: number;
   clientIp: string;
   location: string;
   browser: string;
@@ -52,7 +52,7 @@ export interface LoginLogListRes {
   total: number;
 }
 
-export function listLoginLogList(params: LoginLogParam) {
+export function listLoginLog(params: LoginLogParam) {
   return axios.get<LoginLogListRes>(`${BASE_URL}/login`, {
     params,
     paramsSerializer: (obj) => {
@@ -82,7 +82,7 @@ export function listOperationLog(params: OperationLogParam) {
   });
 }
 
-export interface SystemLogParams extends Partial<SystemLogRecord> {
+export interface SystemLogParam extends Partial<SystemLogRecord> {
   page: number;
   size: number;
   sort: Array<string>;
@@ -93,7 +93,7 @@ export interface SystemLogListRes {
   total: number;
 }
 
-export function getSystemLogList(params: SystemLogParams) {
+export function listSystemLog(params: SystemLogParam) {
   return axios.get<SystemLogListRes>(`${BASE_URL}/system`, {
     params,
     paramsSerializer: (obj) => {
@@ -102,6 +102,6 @@ export function getSystemLogList(params: SystemLogParams) {
   });
 }
 
-export function getSystemLogDetail(logId: string) {
+export function getSystemLog(logId: number) {
   return axios.get<SystemLogDetailRecord>(`${BASE_URL}/system/${logId}`);
 }
\ No newline at end of file
diff --git a/continew-admin-ui/src/views/monitor/log/login/index.vue b/continew-admin-ui/src/views/monitor/log/login/index.vue
index 6f6853d4..4d9e8382 100644
--- a/continew-admin-ui/src/views/monitor/log/login/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/login/index.vue
@@ -83,9 +83,9 @@
   import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import { SelectOptionData } from '@arco-design/web-vue';
   import {
-    LoginLogRecord,
     LoginLogParam,
-    listLoginLogList,
+    LoginLogRecord,
+    listLoginLog,
   } from '@/api/monitor/log';
 
   const { proxy } = getCurrentInstance() as any;
@@ -117,7 +117,7 @@
    */
   const getList = (params: LoginLogParam = { ...queryParams.value }) => {
     loading.value = true;
-    listLoginLogList(params).then((res) => {
+    listLoginLog(params).then((res) => {
       loginLogList.value = res.data.list;
       total.value = res.data.total;
       loading.value = false;
diff --git a/continew-admin-ui/src/views/monitor/log/system/index.vue b/continew-admin-ui/src/views/monitor/log/system/index.vue
index 6a7dbda4..8cff7903 100644
--- a/continew-admin-ui/src/views/monitor/log/system/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/system/index.vue
@@ -2,202 +2,210 @@
   <div class="container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
     <a-card class="general-card" :title="$t('menu.log.system.list')">
-      <!-- 查询 -->
-      <a-row style="margin-bottom: 15px">
-        <a-col :span="24">
-          <a-form ref="queryFormRef" :model="queryFormData" layout="inline">
+      <!-- 头部区域 -->
+      <div class="head-container">
+        <!-- 搜索栏 -->
+        <div class="query-container">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="createTime" hide-label>
-              <date-range-picker v-model="queryFormData.createTime" />
+              <date-range-picker v-model="queryParams.createTime" />
+            </a-form-item>
+            <a-form-item hide-label>
+              <a-space>
+                <a-button type="primary" @click="handleQuery">
+                  <template #icon><icon-search /></template>查询
+                </a-button>
+                <a-button @click="resetQuery">
+                  <template #icon><icon-refresh /></template>重置
+                </a-button>
+              </a-space>
             </a-form-item>
-            <a-button type="primary" @click="toQuery">
-              <template #icon>
-                <icon-search />
-              </template>
-              查询
-            </a-button>
-            <a-button @click="resetQuery">
-              <template #icon>
-                <icon-refresh />
-              </template>
-              重置
-            </a-button>
           </a-form>
-        </a-col>
-      </a-row>
+        </div>
+      </div>
 
-      <!-- 表格 -->
+      <!-- 列表区域 -->
       <a-table
-        :columns="columns"
-        :data="renderData"
-        :pagination="paginationProps"
+        ref="tableRef"
         row-key="logId"
+        :loading="loading"
+        :pagination="{
+          showTotal: true,
+          showPageSize: true,
+          total: total,
+          current: queryParams.page,
+        }"
+        :data="systemLogList"
         :bordered="false"
         :stripe="true"
-        :loading="loading"
         size="large"
         @page-change="handlePageChange"
         @page-size-change="handlePageSizeChange"
       >
-        <template #index="{ rowIndex }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
-        </template>
-        <template #statusCode="{ record }">
-          <a-space v-if="record.statusCode >= 400">
-            <a-tag color="red">{{ record.statusCode }}</a-tag>
-          </a-space>
-          <a-space v-else-if="record.statusCode === 200">
-            <a-tag color="green">{{ record.statusCode }}</a-tag>
-          </a-space>
-          <a-space v-else>
-            <a-tag color="orange">{{ record.statusCode }}</a-tag>
-          </a-space>
-        </template>
-        <template #requestUrl="{ record }">
-          <a-space :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</a-space>
-        </template>
-        <template #elapsedTime="{ record }">
-          <a-space v-if="record.elapsedTime > 500">
-            <a-tag color="red">{{ record.elapsedTime }} ms</a-tag>
-          </a-space>
-          <a-space v-else-if="record.elapsedTime > 200">
-            <a-tag color="orange">{{ record.elapsedTime }} ms</a-tag>
-          </a-space>
-          <a-space v-else>
-            <a-tag color="green">{{ record.elapsedTime }} ms</a-tag>
-          </a-space>
-        </template>
-        <template #operations="{ record }">
-          <a-button v-permission="['admin']" type="text" size="small" @click="handleClick(record.logId)">详情</a-button>
-          <a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" @click="handleExceptionDetail(record)">异常详情</a-button>
+        <template #columns>
+          <a-table-column title="序号">
+            <template #cell="{ rowIndex }">
+              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+            </template>
+          </a-table-column>
+          <a-table-column title="状态码" align="center">
+            <template #cell="{ record }">
+              <a-tag v-if="record.statusCode >= 400" color="red">{{ record.statusCode }}</a-tag>
+              <a-tag v-else-if="record.statusCode === 200" color="green">{{ record.statusCode }}</a-tag>
+              <a-tag v-else color="orange">{{ record.statusCode }}</a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="请求方式" align="center" data-index="requestMethod" />
+          <a-table-column title="请求 URI">
+            <template #cell="{ record }">
+              <span :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</span>
+            </template>
+          </a-table-column>
+          <a-table-column title="客户端 IP" data-index="clientIp" />
+          <a-table-column title="IP 归属地" data-index="location" />
+          <a-table-column title="浏览器" data-index="browser" />
+          <a-table-column title="请求耗时">
+            <template #cell="{ record }">
+              <a-tag v-if="record.elapsedTime > 500" color="red">{{ record.elapsedTime }} ms</a-tag>
+              <a-tag v-else-if="record.elapsedTime > 200" color="orange">{{ record.elapsedTime }} ms</a-tag>
+              <a-tag v-else color="green">{{ record.elapsedTime }} ms</a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="创建时间" data-index="createTime" />
+          <a-table-column title="操作" align="center">
+            <template #cell="{ record }">
+              <a-button v-permission="['admin']" type="text" size="small" title="查看详情" @click="toDetail(record.logId)">
+                <template #icon><icon-eye /></template>详情
+              </a-button>
+              <a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" title="查看异常详情" @click="toExceptionDetail(record)">
+                <template #icon><icon-bug /></template>异常
+              </a-button>
+            </template>
+          </a-table-column>
         </template>
       </a-table>
 
-      <!-- 窗口 -->
+      <!-- 详情区域 -->
       <a-drawer
-        :width="570"
+        title="日志详情"
         :visible="visible"
+        :width="570"
         :footer="false"
         unmount-on-close
-        @ok="handleOk"
+        render-to-body
         @cancel="handleCancel"
       >
-        <template #title>日志详情</template>
         <div style="margin: 10px 0 0 10px">
           <a-descriptions title="基础信息" :column="2" bordered>
             <a-descriptions-item label="客户端 IP">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :widths="['200px']" :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.clientIp }}</span>
+              <span v-else>{{ systemLog.clientIp }}</span>
             </a-descriptions-item>
             <a-descriptions-item label="浏览器">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :widths="['200px']" :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.browser }}</span>
+              <span v-else>{{ systemLog.browser }}</span>
             </a-descriptions-item>
             <a-descriptions-item label="IP 归属地">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :widths="['200px']" :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.location }}</span>
+              <span v-else>{{ systemLog.location }}</span>
             </a-descriptions-item>
             <a-descriptions-item label="请求耗时">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :widths="['200px']" :rows="1" />
               </a-skeleton>
               <span v-else>
-                <a-tag v-if="renderDetailData.elapsedTime > 500" color="red">
-                  {{ renderDetailData.elapsedTime }} ms
+                <a-tag v-if="systemLog.elapsedTime > 500" color="red">
+                  {{ systemLog.elapsedTime }} ms
                 </a-tag>
-                <a-tag v-else-if="renderDetailData.elapsedTime > 200" color="orange">
-                  {{ renderDetailData.elapsedTime }} ms
+                <a-tag v-else-if="systemLog.elapsedTime > 200" color="orange">
+                  {{ systemLog.elapsedTime }} ms
                 </a-tag>
-                <a-tag v-else color="green">{{ renderDetailData.elapsedTime }} ms</a-tag>
+                <a-tag v-else color="green">{{ systemLog.elapsedTime }} ms</a-tag>
               </span>
             </a-descriptions-item>
             <a-descriptions-item label="创建时间">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :widths="['200px']" :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.createTime }}</span>
+              <span v-else>{{ systemLog.createTime }}</span>
             </a-descriptions-item>
           </a-descriptions>
-          <a-descriptions
-            title="协议信息"
-            style="margin-top: 25px"
-            :column="2"
-            bordered
-          >
+          <a-descriptions title="协议信息" :column="2" bordered style="margin-top: 25px">
             <a-descriptions-item label="状态码">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="1" />
               </a-skeleton>
               <span v-else>
-                <a-tag v-if="renderDetailData.statusCode >= 400" color="red">{{ renderDetailData.statusCode }}</a-tag>
-                <a-tag v-else-if="renderDetailData.statusCode === 200" color="green">{{ renderDetailData.statusCode }}</a-tag>
-                <a-tag v-else color="orange">{{ renderDetailData.statusCode }}</a-tag>
+                <a-tag v-if="systemLog.statusCode >= 400" color="red">{{ systemLog.statusCode }}</a-tag>
+                <a-tag v-else-if="systemLog.statusCode === 200" color="green">{{ systemLog.statusCode }}</a-tag>
+                <a-tag v-else color="orange">{{ systemLog.statusCode }}</a-tag>
               </span>
             </a-descriptions-item>
             <a-descriptions-item label="请求方式">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.requestMethod }}</span>
+              <span v-else>{{ systemLog.requestMethod }}</span>
             </a-descriptions-item>
             <a-descriptions-item label="请求 URL" :span="2">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="1" />
               </a-skeleton>
-              <span v-else>{{ renderDetailData.requestUrl }}</span>
+              <span v-else>{{ systemLog.requestUrl }}</span>
             </a-descriptions-item>
             <a-descriptions-item label="响应体" :span="2">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="3" />
               </a-skeleton>
               <a-space v-else>
                 <VueJsonPretty
-                  v-if="renderDetailData.responseBody"
+                  v-if="systemLog.responseBody"
                   :path="'res'"
-                  :data="JSON.parse(renderDetailData.responseBody)"
+                  :data="JSON.parse(systemLog.responseBody)"
                   :show-length="true" />
                 <span v-else>无</span>
               </a-space>
             </a-descriptions-item>
             <a-descriptions-item label="响应头" :span="2">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="3" />
               </a-skeleton>
               <a-space v-else>
                 <VueJsonPretty
-                  v-if="renderDetailData.responseHeaders"
+                  v-if="systemLog.responseHeaders"
                   :path="'res'"
-                  :data="JSON.parse(renderDetailData.responseHeaders)"
+                  :data="JSON.parse(systemLog.responseHeaders)"
                   :show-length="true" />
                 <span v-else>无</span>
               </a-space>
             </a-descriptions-item>
             <a-descriptions-item label="请求体" :span="2">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="3" />
               </a-skeleton>
               <a-space v-else>
                 <VueJsonPretty
-                  v-if="renderDetailData.requestBody"
+                  v-if="systemLog.requestBody"
                   :path="'res'"
-                  :data="JSON.parse(renderDetailData.requestBody)"
+                  :data="JSON.parse(systemLog.requestBody)"
                   :show-length="true" />
                 <span v-else>无</span>
               </a-space>
             </a-descriptions-item>
             <a-descriptions-item label="请求头" :span="2">
-              <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton v-if="loading" :animation="true">
                 <a-skeleton-line :rows="3" />
               </a-skeleton>
               <a-space v-else>
                 <VueJsonPretty
-                  v-if="renderDetailData.requestHeaders"
-                  :data="JSON.parse(renderDetailData.requestHeaders)"
+                  v-if="systemLog.requestHeaders"
+                  :data="JSON.parse(systemLog.requestHeaders)"
                   :show-length="true" />
                 <span v-else>无</span>
               </a-space>
@@ -206,15 +214,16 @@
         </div>
       </a-drawer>
 
+      <!-- 异常详情区域 -->
       <a-modal
         title="异常详情"
-        render-to-body
-        top="30px"
-        width="83%"
         :visible="exceptionDetailVisible"
+        width="83%"
         :footer="false"
+        :mask-closable="false"
+        top="30px"
         unmount-on-close
-        @ok="handleExceptionDetailOk"
+        render-to-body
         @cancel="handleExceptionDetailCancel"
       >
         <pre>{{ exceptionDetail }}</pre>
@@ -224,49 +233,21 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, reactive } from 'vue';
-  import useLoading from '@/hooks/loading';
+  import { getCurrentInstance, ref, toRefs, reactive, } from 'vue';
   import {
-    getSystemLogDetail,
-    SystemLogDetailRecord,
-    getSystemLogList,
+    SystemLogParam,
     SystemLogRecord,
-    SystemLogParams,
+    SystemLogDetailRecord,
+    listSystemLog,
+    getSystemLog,
   } from '@/api/monitor/log';
-  import { Pagination } from '@/types/global';
-  import { PaginationProps } from '@arco-design/web-vue';
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-  import { FormInstance } from '@arco-design/web-vue/es/form';
   import VueJsonPretty from 'vue-json-pretty';
   import 'vue-json-pretty/lib/styles.css';
 
-  const { loading, setLoading } = useLoading(true);
-  const visible = ref(false);
-  const exceptionDetailVisible = ref(false);
-  const detailLoading = ref(false);
-  const exceptionDetail = ref();
-  const queryFormRef = ref<FormInstance>();
-  const queryFormData = ref({
-    createTime: [],
-  });
-  // 查询
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
-      sort: ['createTime,desc'],
-      ...queryFormData.value,
-    } as unknown as SystemLogParams);
-  };
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
-  };
-
-  const renderData = ref<SystemLogRecord[]>([]);
-  const renderDetailData = ref<SystemLogDetailRecord>({
-    logId: '',
+  const { proxy } = getCurrentInstance() as any;
+  
+  const systemLogList = ref<SystemLogRecord[]>([]);
+  const systemLog = ref<SystemLogDetailRecord>({
     requestUrl: '',
     requestMethod: '',
     requestHeaders: '',
@@ -280,125 +261,111 @@
     browser: '',
     createTime: '',
   });
-  const basePagination: Pagination = {
-    current: 1,
-    pageSize: 10,
-  };
-  const pagination = reactive({
-    ...basePagination,
-  });
-  const paginationProps = computed((): PaginationProps => {
-    return {
-      showTotal: true,
-      showPageSize: true,
-      total: pagination.total,
-      current: pagination.current,
-    }
-  });
-  const columns = computed<TableColumnData[]>(() => [
-    {
-      title: '序号',
-      dataIndex: 'index',
-      slotName: 'index',
-    },
-    {
-      title: '状态码',
-      dataIndex: 'statusCode',
-      slotName: 'statusCode',
-      align: 'center',
-    },
-    {
-      title: '请求方式',
-      dataIndex: 'requestMethod',
-      align: 'center',
-    },
-    {
-      title: '请求 URI',
-      dataIndex: 'requestUrl',
-      slotName: 'requestUrl',
-    },
-    {
-      title: '客户端 IP',
-      dataIndex: 'clientIp',
-    },
-    {
-      title: 'IP 归属地',
-      dataIndex: 'location',
-    },
-    {
-      title: '浏览器',
-      dataIndex: 'browser',
-    },
-    {
-      title: '请求耗时',
-      dataIndex: 'elapsedTime',
-      slotName: 'elapsedTime',
-      align: 'center',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-    },
-    {
-      title: '操作',
-      slotName: 'operations',
-      align: 'center',
-    },
-  ]);
+  const total = ref(0);
+  const exceptionDetail = ref('');
+  const loading = ref(false);
+  const visible = ref(false);
+  const exceptionDetailVisible = ref(false);
 
-  // 分页查询列表
-  const fetchData = async (
-    params: SystemLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
-  ) => {
-    setLoading(true);
-    try {
-      const { data } = await getSystemLogList(params);
-      renderData.value = data.list;
-      pagination.current = params.page;
-      pagination.total = data.total;
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handlePageChange = (current: number) => {
-    fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
-  };
-  const handlePageSizeChange = (pageSize: number) => {
-    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
-  };
-  fetchData();
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      createTime: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
 
-  // 查看详情
-  const handleClick = async (logId: string) => {
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: SystemLogParam = { ...queryParams.value }) => {
+    loading.value = true;
+    listSystemLog(params).then((res) => {
+      systemLogList.value = res.data.list;
+      total.value = res.data.total;
+      loading.value = false;
+    });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
     visible.value = true;
-    detailLoading.value = true;
-    try {
-      const { data } = await getSystemLogDetail(logId);
-      renderDetailData.value = data;
-    } finally {
-      detailLoading.value = false;
-    }
-  };
-  const handleOk = () => {
-    visible.value = false;
+    loading.value = true;
+    getSystemLog(id).then((res) => {
+      systemLog.value = res.data;
+      loading.value = false;
+    });
   };
+
+  /**
+   * 关闭详情
+   */
   const handleCancel = () => {
     visible.value = false;
   }
 
-  // 查看异常详情
-  const handleExceptionDetail = async (record: SystemLogRecord) => {
+  /**
+   * 查看异常详情
+   *
+   * @param record 记录信息
+   */
+  const toExceptionDetail = async (record: SystemLogRecord) => {
+    exceptionDetail.value = record.exceptionDetail || '';
     exceptionDetailVisible.value = true;
-    exceptionDetail.value = record.exceptionDetail;
-  };
-  const handleExceptionDetailOk = () => {
-    exceptionDetailVisible.value = false;
-    exceptionDetail.value = null;
   };
+
+  /**
+   * 关闭异常详情
+   */
   const handleExceptionDetailCancel = () => {
+    exceptionDetail.value = '';
     exceptionDetailVisible.value = false;
-    exceptionDetail.value = null;
   }
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
 </script>
 
 <script lang="ts">
@@ -410,6 +377,9 @@
 <style scoped lang="less">
   .container {
     padding: 0 20px 20px 20px;
+    .head-container {
+      margin-bottom: 16px
+    }
   }
   :deep(.arco-table-th) {
     &:last-child {
diff --git a/continew-admin-ui/src/views/monitor/online/index.vue b/continew-admin-ui/src/views/monitor/online/index.vue
index 3d1ce181..03f6e2bf 100644
--- a/continew-admin-ui/src/views/monitor/online/index.vue
+++ b/continew-admin-ui/src/views/monitor/online/index.vue
@@ -74,7 +74,7 @@
                   type="text"
                   size="small"
                   :disabled="currentToken === record.token"
-                  :title="currentToken === record.token ? '不能强退当前登录用户' : ''"
+                  :title="currentToken === record.token ? '不能强退当前登录用户' : '强退'"
                 >
                   <template #icon><icon-delete /></template>强退
                 </a-button>
diff --git a/continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/LogController.java b/continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/LogController.java
index 254f6dd5..0a15d434 100644
--- a/continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/LogController.java
+++ b/continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/LogController.java
@@ -58,7 +58,7 @@ public class LogController {
     @Operation(summary = "分页查询登录日志列表")
     @GetMapping("/login")
     public R<PageDataVO<LoginLogVO>> page(@Validated LoginLogQuery query, @Validated PageQuery pageQuery) {
-        PageDataVO<LoginLogVO> pageDataVO = logService.list(query, pageQuery);
+        PageDataVO<LoginLogVO> pageDataVO = logService.page(query, pageQuery);
         return R.ok(pageDataVO);
     }
 
@@ -66,7 +66,7 @@ public class LogController {
     @Operation(summary = "分页查询操作日志列表")
     @GetMapping("/operation")
     public R<PageDataVO<OperationLogVO>> page(@Validated OperationLogQuery query, @Validated PageQuery pageQuery) {
-        PageDataVO<OperationLogVO> pageDataVO = logService.list(query, pageQuery);
+        PageDataVO<OperationLogVO> pageDataVO = logService.page(query, pageQuery);
         return R.ok(pageDataVO);
     }
 
@@ -74,7 +74,7 @@ public class LogController {
     @Operation(summary = "分页查询系统日志列表")
     @GetMapping("/system")
     public R<PageDataVO<SystemLogVO>> page(@Validated SystemLogQuery query, @Validated PageQuery pageQuery) {
-        PageDataVO<SystemLogVO> pageDataVO = logService.list(query, pageQuery);
+        PageDataVO<SystemLogVO> pageDataVO = logService.page(query, pageQuery);
         return R.ok(pageDataVO);
     }
 
@@ -82,7 +82,7 @@ public class LogController {
     @Operation(summary = "查看系统日志详情")
     @GetMapping("/system/{logId}")
     public R<SystemLogDetailVO> get(@PathVariable Long logId) {
-        SystemLogDetailVO detailVO = logService.detail(logId);
+        SystemLogDetailVO detailVO = logService.get(logId);
         return R.ok(detailVO);
     }
 }