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

2023-02-02 22:41:17 +08:00 · 2023-02-02 22:41:17 +08:00 · 754a09fa08
commit 754a09fa08
parent e2dd4e36c7
7 changed files with 150 additions and 166 deletions
--- a/continew-admin-ui/src/api/monitor/log.ts
+++ b/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}`);
 }
--- a/continew-admin-ui/src/api/monitor/online.ts
+++ b/continew-admin-ui/src/api/monitor/online.ts
@ -1,7 +1,7 @@
-import axios from "axios";
-import qs from "query-string";
+import axios from 'axios';
+import qs from 'query-string';

-const BASE_URL = "/monitor/online/user";
+const BASE_URL = '/monitor/online/user';

 export interface OnlineUserRecord {
  token: string;
--- a/continew-admin-ui/src/components/date-range-picker/index.vue
+++ b/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>

--- a/continew-admin-ui/src/views/monitor/log/login/index.vue
+++ b/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">
-          <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="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-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="loginLogList"
        :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 #status="{ record }">
-          <a-space v-if="record.status === 1">
-            <a-tag color="green">
-              <span class="circle pass"></span>
-              成功
-            </a-tag>
-          </a-space>
-          <a-space v-else>
-            <a-tooltip :content="record.errorMsg">
-              <a-tag color="red" style="cursor: pointer">
-                <span class="circle fail"></span>
-                失败
-              </a-tag>
-            </a-tooltip>
-          </a-space>
+        <template #columns>
+          <a-table-column title="序号">
+            <template #cell="{ rowIndex }">
+              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+            </template>
+          </a-table-column>
+          <a-table-column title="用户昵称" data-index="createUserString" />
+          <a-table-column title="登录行为" data-index="description" />
+          <a-table-column title="登录状态" align="center">
+            <template #cell="{ record }">
+              <a-tag v-if="record.status === 1" color="green"><span class="circle pass" />成功</a-tag>
+              <a-tooltip v-else :content="record.errorMsg">
+                <a-tag color="red" style="cursor: pointer">
+                  <span class="circle fail" />失败
+                </a-tag>
+              </a-tooltip>
+            </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 useLoading from '@/hooks/loading';
-  import { getLoginLogList, LoginLogRecord, LoginLogParams } from '@/api/monitor/log';
-  import { Pagination } from '@/types/global';
-  import { PaginationProps } from '@arco-design/web-vue';
-  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
+  import { SelectOptionData } from '@arco-design/web-vue';
+  import {
+    LoginLogRecord,
+    LoginLogParam,
+    listLoginLogList,
+  } from '@/api/monitor/log';

-  const { loading, setLoading } = useLoading(true);
-  const queryFormRef = ref<FormInstance>();
-  const queryFormData = ref({
-    status: undefined,
-    createTime: [],
-  });
-  const statusOptions = computed<SelectOptionData[]>(() => [
-    {
-      label: '成功',
-      value: 1,
-    },
-    {
-      label: '失败',
-      value: 2,
-    },
+  const { proxy } = getCurrentInstance() as any;
+
+  const loginLogList = ref<LoginLogRecord[]>([]);
+  const total = ref(0);
+  const loading = ref(false);
+  const statusOptions = ref<SelectOptionData[]>([
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 2 },
  ]);

-  // 查询
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      status: undefined,
+      createTime: undefined,
+      page: 1,
+      size: 10,
      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 => {
-    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 { queryParams } = toRefs(data);

-  // 分页查询列表
-  const fetchData = async (
-    params: LoginLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
-  ) => {
-    setLoading(true);
-    try {
-      const { data } = await getLoginLogList(params);
-      renderData.value = data.list;
-      pagination.current = params.page;
-      pagination.total = data.total;
-    } finally {
-      setLoading(false);
-    }
+  /**
+   * 查询列表
+   *
+   * @param params 查询参数
+   */
+  const getList = (params: LoginLogParam = { ...queryParams.value }) => {
+    loading.value = true;
+    listLoginLogList(params).then((res) => {
+      loginLogList.value = res.data.list;
+      total.value = res.data.total;
+      loading.value = 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 {
--- a/continew-admin-ui/src/views/monitor/online/index.vue
+++ b/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';
--- 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
@ -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);
    }
--- a/continew-admin-webapi/src/main/java/top/charles7c/cnadmin/webapi/controller/monitor/OnlineUserController.java
+++ b/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) {