重构：重构登录日志前端代码

continew-admin-ui/src/api/monitor/log.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import qs from 'query-string';
 
+const BASE_URL = '/monitor/log';
+
 export interface LogRecord {
   logId: string;
   clientIp: string;
@@ -39,21 +41,23 @@ export interface SystemLogDetailRecord extends SystemLogRecord {
   responseBody: string;
 }
 
-export interface LoginLogParams extends Partial<LoginLogRecord> {
+export interface LoginLogParam extends Partial<LoginLogRecord> {
   page: number;
   size: number;
   sort: Array<string>;
 }
+
 export interface LoginLogListRes {
   list: LoginLogRecord[];
   total: number;
 }
-export function getLoginLogList(params: LoginLogParams) {
+
-  return axios.get<LoginLogListRes>('/monitor/log/login', {
+export function listLoginLogList(params: LoginLogParam) {
+  return axios.get<LoginLogListRes>(`${BASE_URL}/login`, {
     params,
     paramsSerializer: (obj) => {
       return qs.stringify(obj);
-    },
+    }
   });
 }
 
@@ -63,16 +67,18 @@ export interface OperationLogParams extends Partial<OperationLogRecord> {
   sort: Array<string>;
   uid?: string;
 }
+
 export interface OperationLogListRes {
   list: OperationLogRecord[];
   total: number;
 }
+
 export function getOperationLogList(params: OperationLogParams) {
-  return axios.get<OperationLogListRes>('/monitor/log/operation', {
+  return axios.get<OperationLogListRes>(`${BASE_URL}/operation`, {
     params,
     paramsSerializer: (obj) => {
       return qs.stringify(obj);
-    },
+    }
   });
 }
 
@@ -86,15 +92,16 @@ export interface SystemLogListRes {
   list: SystemLogRecord[];
   total: number;
 }
+
 export function getSystemLogList(params: SystemLogParams) {
-  return axios.get<SystemLogListRes>('/monitor/log/system', {
+  return axios.get<SystemLogListRes>(`${BASE_URL}/system`, {
     params,
     paramsSerializer: (obj) => {
       return qs.stringify(obj);
-    },
+    }
   });
 }
 
 export function getSystemLogDetail(logId: string) {
-  return axios.get<SystemLogDetailRecord>(`/monitor/log/system/${logId}`);
+  return axios.get<SystemLogDetailRecord>(`${BASE_URL}/system/${logId}`);
 }

continew-admin-ui/src/api/monitor/online.ts

@@ -1,7 +1,7 @@
-import axios from "axios";
+import axios from 'axios';
-import qs from "query-string";
+import qs from 'query-string';
 
-const BASE_URL = "/monitor/online/user";
+const BASE_URL = '/monitor/online/user';
 
 export interface OnlineUserRecord {
   token: string;

continew-admin-ui/src/components/date-range-picker/index.vue

@@ -5,6 +5,7 @@
     :show-time="showTime"
     :shortcuts="shortcuts"
     shortcuts-position="left"
+    style="height: 31px"
   />
 </template>
 

continew-admin-ui/src/views/monitor/log/login/index.vue

@@ -2,12 +2,14 @@
   <div class="container">
     <Breadcrumb :items="['menu.monitor', 'menu.log.login.list']" />
     <a-card class="general-card" :title="$t('menu.log.login.list')">
-      <a-row style="margin-bottom: 15px">
+      <!-- 头部区域 -->
-        <a-col :span="24">
+      <div class="head-container">
-          <a-form ref="queryFormRef" :model="queryFormData" layout="inline">
+        <!-- 搜索栏 -->
+        <div class="query-container">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
             <a-form-item field="status" hide-label>
               <a-select
-                v-model="queryFormData.status"
+                v-model="queryParams.status"
                 :options="statusOptions"
                 placeholder="登录状态搜索"
                 allow-clear
@@ -15,53 +17,62 @@
               />
             </a-form-item>
             <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-button type="primary" @click="toQuery">
+            <a-form-item hide-label>
-              <template #icon>
+              <a-space>
-                <icon-search />
+                <a-button type="primary" @click="handleQuery">
-              </template>
+                  <template #icon><icon-search /></template>查询
-              查询
                 </a-button>
                 <a-button @click="resetQuery">
-              <template #icon>
+                  <template #icon><icon-refresh /></template>重置
-                <icon-refresh />
-              </template>
-              重置
                 </a-button>
+              </a-space>
+            </a-form-item>
           </a-form>
-        </a-col>
+        </div>
-      </a-row>
+      </div>
+
+      <!-- 列表区域 -->
       <a-table
-        :columns="columns"
+        ref="tableRef"
-        :data="renderData"
-        :pagination="paginationProps"
         row-key="logId"
+        :loading="loading"
+        :pagination="{
+          showTotal: true,
+          showPageSize: true,
+          total: total,
+          current: queryParams.page,
+        }"
+        :data="loginLogList"
         :bordered="false"
         :stripe="true"
-        :loading="loading"
         size="large"
         @page-change="handlePageChange"
         @page-size-change="handlePageSizeChange"
       >
-        <template #index="{ rowIndex }">
+        <template #columns>
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
+          <a-table-column title="序号">
+            <template #cell="{ rowIndex }">
+              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
             </template>
-        <template #status="{ record }">
+          </a-table-column>
-          <a-space v-if="record.status === 1">
+          <a-table-column title="用户昵称" data-index="createUserString" />
-            <a-tag color="green">
+          <a-table-column title="登录行为" data-index="description" />
-              <span class="circle pass"></span>
+          <a-table-column title="登录状态" align="center">
-              成功
+            <template #cell="{ record }">
-            </a-tag>
+              <a-tag v-if="record.status === 1" color="green"><span class="circle pass" />成功</a-tag>
-          </a-space>
+              <a-tooltip v-else :content="record.errorMsg">
-          <a-space v-else>
-            <a-tooltip :content="record.errorMsg">
                 <a-tag color="red" style="cursor: pointer">
-                <span class="circle fail"></span>
+                  <span class="circle fail" />失败
-                失败
                 </a-tag>
               </a-tooltip>
-          </a-space>
+            </template>
+          </a-table-column>
+          <a-table-column title="登录 IP" data-index="clientIp" />
+          <a-table-column title="登录地点" data-index="location" />
+          <a-table-column title="浏览器" data-index="browser" />
+          <a-table-column title="登录时间" data-index="createTime" />
         </template>
       </a-table>
     </a-card>
@@ -69,123 +80,85 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, reactive } from 'vue';
+  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
-  import useLoading from '@/hooks/loading';
+  import { SelectOptionData } from '@arco-design/web-vue';
-  import { getLoginLogList, LoginLogRecord, LoginLogParams } from '@/api/monitor/log';
+  import {
-  import { Pagination } from '@/types/global';
+    LoginLogRecord,
-  import { PaginationProps } from '@arco-design/web-vue';
+    LoginLogParam,
-  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+    listLoginLogList,
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  } from '@/api/monitor/log';
-  import { FormInstance } from '@arco-design/web-vue/es/form';
 
-  const { loading, setLoading } = useLoading(true);
+  const { proxy } = getCurrentInstance() as any;
-  const queryFormRef = ref<FormInstance>();
+
-  const queryFormData = ref({
+  const loginLogList = ref<LoginLogRecord[]>([]);
+  const total = ref(0);
+  const loading = ref(false);
+  const statusOptions = ref<SelectOptionData[]>([
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 2 },
+  ]);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
       status: undefined,
-    createTime: [],
+      createTime: undefined,
-  });
+      page: 1,
-  const statusOptions = computed<SelectOptionData[]>(() => [
+      size: 10,
-    {
-      label: '成功',
-      value: 1,
-    },
-    {
-      label: '失败',
-      value: 2,
-    },
-  ]);
-
-  // 查询
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
       sort: ['createTime,desc'],
-      ...queryFormData.value,
+    },
-    } as unknown as LoginLogParams);
-  };
-
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
-  };
-
-  const renderData = ref<LoginLogRecord[]>([]);
-  const basePagination: Pagination = {
-    current: 1,
-    pageSize: 10,
-  };
-  const pagination = reactive({
-    ...basePagination,
   });
-  const paginationProps = computed((): PaginationProps => {
+  const { queryParams } = toRefs(data);
-    return {
-      showTotal: true,
-      showPageSize: true,
-      total: pagination.total,
-      current: pagination.current,
-    }
-  });
-  const columns = computed<TableColumnData[]>(() => [
-    {
-      title: '序号',
-      dataIndex: 'index',
-      slotName: 'index',
-    },
-    {
-      title: '用户昵称',
-      dataIndex: 'createUserString',
-    },
-    {
-      title: '登录行为',
-      dataIndex: 'description',
-    },
-    {
-      title: '登录状态',
-      dataIndex: 'status',
-      slotName: 'status',
-      align: 'center',
-    },
-    {
-      title: '登录 IP',
-      dataIndex: 'clientIp',
-    },
-    {
-      title: '登录地点',
-      dataIndex: 'location',
-    },
-    {
-      title: '浏览器',
-      dataIndex: 'browser',
-    },
-    {
-      title: '登录时间',
-      dataIndex: 'createTime',
-    },
-  ]);
 
-  // 分页查询列表
+  /**
-  const fetchData = async (
+   * 查询列表
-    params: LoginLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
+   *
-  ) => {
+   * @param params 查询参数
-    setLoading(true);
+   */
-    try {
+  const getList = (params: LoginLogParam = { ...queryParams.value }) => {
-      const { data } = await getLoginLogList(params);
+    loading.value = true;
-      renderData.value = data.list;
+    listLoginLogList(params).then((res) => {
-      pagination.current = params.page;
+      loginLogList.value = res.data.list;
-      pagination.total = data.total;
+      total.value = res.data.total;
-    } finally {
+      loading.value = false;
-      setLoading(false);
+    });
-    }
   };
+  getList();
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
   const handlePageChange = (current: number) => {
-    fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
+    queryParams.value.page = current;
+    getList();
   };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
   const handlePageSizeChange = (pageSize: number) => {
-    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
+    queryParams.value.size = pageSize;
+    getList();
   };
-  fetchData();
 </script>
 
 <script lang="ts">
@@ -197,6 +170,9 @@
 <style scoped lang="less">
   .container {
     padding: 0 20px 20px 20px;
+    .head-container {
+      margin-bottom: 16px
+    }
   }
   :deep(.arco-table-th) {
     &:last-child {

continew-admin-ui/src/views/monitor/online/index.vue

@@ -90,9 +90,9 @@
 <script lang="ts" setup>
   import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
   import {
-    listOnlineUser,
-    OnlineUserRecord,
     OnlineUserParam,
+    OnlineUserRecord,
+    listOnlineUser,
     kickout
   } from '@/api/monitor/online';
   import { getToken } from '@/utils/auth';

continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/LogController.java

@@ -57,7 +57,7 @@ public class LogController {
     @Log(module = "登录日志")
     @Operation(summary = "分页查询登录日志列表")
     @GetMapping("/login")
-    public R<PageDataVO<LoginLogVO>> list(@Validated LoginLogQuery query, @Validated PageQuery pageQuery) {
+    public R<PageDataVO<LoginLogVO>> page(@Validated LoginLogQuery query, @Validated PageQuery pageQuery) {
         PageDataVO<LoginLogVO> pageDataVO = logService.list(query, pageQuery);
         return R.ok(pageDataVO);
     }
@@ -65,7 +65,7 @@ public class LogController {
     @Log(module = "操作日志")
     @Operation(summary = "分页查询操作日志列表")
     @GetMapping("/operation")
-    public R<PageDataVO<OperationLogVO>> list(@Validated OperationLogQuery query, @Validated PageQuery pageQuery) {
+    public R<PageDataVO<OperationLogVO>> page(@Validated OperationLogQuery query, @Validated PageQuery pageQuery) {
         PageDataVO<OperationLogVO> pageDataVO = logService.list(query, pageQuery);
         return R.ok(pageDataVO);
     }
@@ -73,7 +73,7 @@ public class LogController {
     @Log(module = "系统日志")
     @Operation(summary = "分页查询系统日志列表")
     @GetMapping("/system")
-    public R<PageDataVO<SystemLogVO>> list(@Validated SystemLogQuery query, @Validated PageQuery pageQuery) {
+    public R<PageDataVO<SystemLogVO>> page(@Validated SystemLogQuery query, @Validated PageQuery pageQuery) {
         PageDataVO<SystemLogVO> pageDataVO = logService.list(query, pageQuery);
         return R.ok(pageDataVO);
     }
@@ -81,7 +81,7 @@ public class LogController {
     @Log(module = "系统日志")
     @Operation(summary = "查看系统日志详情")
     @GetMapping("/system/{logId}")
-    public R<SystemLogDetailVO> detail(@PathVariable Long logId) {
+    public R<SystemLogDetailVO> get(@PathVariable Long logId) {
         SystemLogDetailVO detailVO = logService.detail(logId);
         return R.ok(detailVO);
     }

continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/OnlineUserController.java

@@ -60,7 +60,7 @@ public class OnlineUserController {
 
     @Operation(summary = "分页查询列表")
     @GetMapping
-    public R<PageDataVO<OnlineUserVO>> list(@Validated OnlineUserQuery query, @Validated PageQuery pageQuery) {
+    public R<PageDataVO<OnlineUserVO>> page(@Validated OnlineUserQuery query, @Validated PageQuery pageQuery) {
         List<LoginUser> loginUserList = new ArrayList<>();
         List<String> tokenKeyList = StpUtil.searchTokenValue("", 0, -1, false);
         for (String tokenKey : tokenKeyList) {