feat: 完成在线用户、登录日志、操作日志页面

.gitignore

@@ -267,8 +267,6 @@ dist
 .vscode
 /Yi.Abp.Net8/src/Yi.Abp.Web/appsettings.Development.json
 /Yi.Abp.Net8/src/Yi.Abp.Web/appsettings.Production.json
-Logs
-logs
 /Yi.Abp.Net8/test/Yi.Abp.Test/appsettings.Development.json
 /Yi.Abp.Net8/test/Yi.Abp.Test/appsettings.Production.json
 database_backup

Yi.Pure.Vue3/mock/asyncRoutes.ts

@@ -101,17 +101,17 @@ const systemMonitorRouter = {
         title: "menus.pureOperationLog",
         //roles: ["admin"]
       }
-    },
-    {
-      path: "/monitor/system-logs",
-      component: "monitor/logs/system/index",
-      name: "SystemLog",
-      meta: {
-        icon: "ri:file-search-line",
-        title: "menus.pureSystemLog",
-        //roles: ["admin"]
-      }
     }
+    // {
+    //   path: "/monitor/system-logs",
+    //   component: "monitor/logs/system/index",
+    //   name: "SystemLog",
+    //   meta: {
+    //     icon: "ri:file-search-line",
+    //     title: "menus.pureSystemLog",
+    //     //roles: ["admin"]
+    //   }
+    // }
   ]
 };
 

Yi.Pure.Vue3/src/api/monitor/online.ts

@@ -0,0 +1,12 @@
+import { http } from "@/utils/http";
+import type { Result, ResultPage } from "@/api/result";
+
+/** 查询在线用户列表 */
+export const getOnlineList = (query?: object) => {
+  return http.request<ResultPage>("get", "/online", { params: query });
+};
+
+/** 强退用户 */
+export const forceLogout = (tokenId?: object) => {
+  return http.request<Result>("delete", `/online/${tokenId}`, {});
+};

Yi.Pure.Vue3/src/views/login/index.vue

@@ -101,6 +101,9 @@ const onLogin = async (formEl: FormInstance | undefined) => {
             message(t("login.pureLoginFail"), { type: "error" });
           }
         })
+        .catch(err => {
+          getCode();
+        })
         .finally(() => (loading.value = false));
     }
   });

Yi.Pure.Vue3/src/views/monitor/logs/login/hook.tsx

@@ -0,0 +1,173 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+import { usePublicHooks } from "@/views/system/hooks";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+import { getLoginLoglist } from "@/api/log/loginLog";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    loginUser: "",
+    state: "",
+    creationTime: [],
+    skipCount: 1,
+    maxResultCount: 10
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { tagStyle } = usePublicHooks();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 90
+    },
+    {
+      label: "登录用户",
+      prop: "loginUser",
+      minWidth: 100
+    },
+    {
+      label: "登录 IP",
+      prop: "loginIp",
+      minWidth: 140
+    },
+    {
+      label: "登录地点",
+      prop: "loginLocation",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "os",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    {
+      label: "登录状态",
+      prop: "state",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(1)}>
+          {1 === 1 ? "成功" : "失败"}
+        </el-tag>
+      )
+    },
+    {
+      label: "登录行为",
+      prop: "logMsg",
+      minWidth: 100
+    },
+    {
+      label: "登录时间",
+      prop: "creationTime",
+      minWidth: 180,
+      formatter: ({ creationTime }) =>
+        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
+    }
+  ];
+  function handleSizeChange(val: number) {
+    form.maxResultCount = val;
+    onSearch();
+  }
+
+  function handleCurrentChange(val: number) {
+    form.skipCount = val;
+    onSearch();
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getLoginLoglist(
+      toRaw({
+        ...form,
+        startTime: form.creationTime[0],
+        endTime: form.creationTime[1]
+      })
+    );
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
+    loading.value = false;
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onSearch,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}

Yi.Pure.Vue3/src/views/monitor/logs/login/index.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "LoginLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="用户名" prop="loginUser">
+        <el-input
+          v-model="form.loginUser"
+          placeholder="请输入用户名"
+          clearable
+          class="!w-[150px]"
+        />
+      </el-form-item>
+      <el-form-item label="登录状态" prop="state">
+        <el-select
+          v-model="form.state"
+          placeholder="请选择"
+          clearable
+          class="!w-[150px]"
+        >
+          <el-option label="成功" :value="true" />
+          <el-option label="失败" :value="false" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="登录时间" prop="creationTime">
+        <el-date-picker
+          v-model="form.creationTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="登录日志"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        />
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/monitor/logs/operation/detail.vue

@@ -0,0 +1,79 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const columns = [
+  {
+    label: "IP 地址",
+    prop: "operIp"
+  },
+  {
+    label: "地点",
+    prop: "operLocation"
+  },
+  {
+    label: "所属模块",
+    prop: "title"
+  },
+  {
+    label: "请求时间",
+    prop: "creationTime"
+  },
+  {
+    label: "请求方法",
+    prop: "requestMethod"
+  },
+  {
+    label: "请求接口",
+    prop: "method",
+    copy: true
+  }
+];
+
+const dataList = ref([
+  {
+    title: "响应体",
+    name: "requestResult",
+    data:
+      (props.data[0] as any).requestResult == null
+        ? ""
+        : JSON.parse((props.data[0] as any).requestResult)
+  },
+  {
+    title: "请求体",
+    name: "requestParam",
+    data:
+      (props.data[0] as any).requestParam == null
+        ? ""
+        : JSON.parse((props.data[0] as any).requestParam)
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-scrollbar>
+      <PureDescriptions border :data="data" :columns="columns" :column="5" />
+    </el-scrollbar>
+    <el-tabs :modelValue="'requestResult'" type="border-card" class="mt-4">
+      <el-tab-pane
+        v-for="(item, index) in dataList"
+        :key="index"
+        :name="item.name"
+        :label="item.title"
+      >
+        <el-scrollbar max-height="calc(100vh - 240px)">
+          <vue-json-pretty v-model:data="item.data" />
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/monitor/logs/operation/hook.tsx

@@ -0,0 +1,192 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+import { usePublicHooks } from "@/views/system/hooks";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+import { getOperLoglist } from "@/api/log/operLog";
+import { addDialog } from "@/components/ReDialog/index";
+import Detail from "./detail.vue";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    title: "",
+    state: "",
+    creationTime: [],
+    skipCount: 1,
+    maxResultCount: 10
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { tagStyle } = usePublicHooks();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 200
+    },
+    {
+      label: "操作人员",
+      prop: "operUser",
+      minWidth: 100
+    },
+    {
+      label: "所属模块",
+      prop: "title",
+      minWidth: 140
+    },
+    {
+      label: "操作类型",
+      prop: "operType",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(1)}>
+          {row.operType}
+        </el-tag>
+      )
+    },
+    {
+      label: "操作 IP",
+      prop: "operIp",
+      minWidth: 100
+    },
+    {
+      label: "操作地点",
+      prop: "operLocation",
+      minWidth: 140
+    },
+    {
+      label: "操作状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(1)}>
+          {1 === 1 ? "成功" : "失败"}
+        </el-tag>
+      )
+    },
+    {
+      label: "操作时间",
+      prop: "operatingTime",
+      minWidth: 180,
+      formatter: ({ operatingTime }) =>
+        dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getOperLoglist(
+      toRaw({
+        ...form,
+        startTime: form.creationTime[0],
+        endTime: form.creationTime[1]
+      })
+    );
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
+    loading.value = false;
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  function onDetail(row) {
+    addDialog({
+      title: "操作日志详情",
+      fullscreen: true,
+      hideFooter: true,
+      contentRenderer: () => Detail,
+      props: {
+        data: [row]
+      }
+    });
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onDetail,
+    onSearch,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}

Yi.Pure.Vue3/src/views/monitor/logs/operation/index.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+import View from "@iconify-icons/ep/view";
+
+defineOptions({
+  name: "OperationLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  timeQuery,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange,
+  onDetail
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="所属模块" prop="title">
+        <el-input
+          v-model="form.title"
+          placeholder="请输入所属模块"
+          clearable
+          class="!w-[170px]"
+        />
+      </el-form-item>
+      <el-form-item label="操作状态" prop="state">
+        <el-select
+          v-model="form.state"
+          placeholder="请选择"
+          clearable
+          class="!w-[150px]"
+        >
+          <el-option label="成功" :value="true" />
+          <el-option label="失败" :value="false" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间" prop="creationTime">
+        <el-date-picker
+          v-model="form.creationTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar title="操作日志" :columns="columns" @refresh="onSearch">
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin !outline-none"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(View)"
+              @click="onDetail(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/monitor/logs/system/detail.vue

@@ -0,0 +1,73 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const columns = [
+  {
+    label: "IP 地址",
+    prop: "operIp"
+  },
+  {
+    label: "地点",
+    prop: "operLocation"
+  },
+  {
+    label: "所属模块",
+    prop: "title"
+  },
+  {
+    label: "请求时间",
+    prop: "creationTime"
+  },
+  {
+    label: "请求方法",
+    prop: "requestMethod"
+  },
+  {
+    label: "请求接口",
+    prop: "method",
+    copy: true
+  }
+];
+
+const dataList = ref([
+  {
+    title: "响应体",
+    name: "requestResult",
+    data: (props.data[0] as any).requestResult
+  },
+  {
+    title: "请求体",
+    name: "requestParam",
+    data: (props.data[0] as any).requestParam
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-scrollbar>
+      <PureDescriptions border :data="data" :columns="columns" :column="5" />
+    </el-scrollbar>
+    <el-tabs :modelValue="'requestResult'" type="border-card" class="mt-4">
+      <el-tab-pane
+        v-for="(item, index) in dataList"
+        :key="index"
+        :name="item.name"
+        :label="item.title"
+      >
+        <el-scrollbar max-height="calc(100vh - 240px)">
+          <vue-json-pretty v-model:data="item.data" />
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/monitor/logs/system/hook.tsx

@@ -0,0 +1,244 @@
+import dayjs from "dayjs";
+import Detail from "../detail.vue";
+import { message } from "@/utils/message";
+import { addDialog } from "@/components/ReDialog";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
+import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
+import Info from "@iconify-icons/ri/question-line";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    module: "",
+    requestTime: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { copied, update } = useCopyToClipboard();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+
+  // const getLevelType = (type, text = false) => {
+  //   switch (type) {
+  //     case 0:
+  //       return text ? "debug" : "primary";
+  //     case 1:
+  //       return text ? "info" : "success";
+  //     case 2:
+  //       return text ? "warn" : "info";
+  //     case 3:
+  //       return text ? "error" : "warning";
+  //     case 4:
+  //       return text ? "fatal" : "danger";
+  //   }
+  // };
+
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "ID",
+      prop: "id",
+      minWidth: 90
+    },
+    {
+      label: "所属模块",
+      prop: "module",
+      minWidth: 100
+    },
+    {
+      headerRenderer: () => (
+        <span class="flex-c">
+          请求接口
+          <iconifyIconOffline
+            icon={Info}
+            class="ml-1 cursor-help"
+            v-tippy={{
+              content: "双击下面请求接口进行拷贝"
+            }}
+          />
+        </span>
+      ),
+      prop: "url",
+      minWidth: 140
+    },
+    {
+      label: "请求方法",
+      prop: "method",
+      minWidth: 140
+    },
+    {
+      label: "IP 地址",
+      prop: "ip",
+      minWidth: 100
+    },
+    {
+      label: "地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    // {
+    //   label: "级别",
+    //   prop: "level",
+    //   minWidth: 90,
+    //   cellRenderer: ({ row, props }) => (
+    //     <el-tag size={props.size} type={getLevelType(row.level)} effect="plain">
+    //       {getLevelType(row.level, true)}
+    //     </el-tag>
+    //   )
+    // },
+    {
+      label: "请求耗时",
+      prop: "takesTime",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.takesTime < 1000 ? "success" : "warning"}
+          effect="plain"
+        >
+          {row.takesTime} ms
+        </el-tag>
+      )
+    },
+    {
+      label: "请求时间",
+      prop: "requestTime",
+      minWidth: 180,
+      formatter: ({ requestTime }) =>
+        dayjs(requestTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 拷贝请求接口，表格单元格被双击时触发 */
+  function handleCellDblclick({ url }, { property }) {
+    if (property !== "url") return;
+    update(url);
+    copied.value
+      ? message(`${url} 已拷贝`, { type: "success" })
+      : message("拷贝失败", { type: "warning" });
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  function onDetail(row) {
+    getSystemLogsDetail({ id: row.id }).then(res => {
+      addDialog({
+        title: "系统日志详情",
+        fullscreen: true,
+        hideFooter: true,
+        contentRenderer: () => Detail,
+        props: {
+          data: [res]
+        }
+      });
+    });
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getSystemLogsList(toRaw(form));
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onSearch,
+    onDetail,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCellDblclick,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}

Yi.Pure.Vue3/src/views/monitor/logs/system/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import View from "@iconify-icons/ep/view";
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "SystemLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  onDetail,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCellDblclick,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="所属模块" prop="module">
+        <el-input
+          v-model="form.module"
+          placeholder="请输入所属模块"
+          clearable
+          class="!w-[170px]"
+        />
+      </el-form-item>
+      <el-form-item label="请求时间" prop="requestTime">
+        <el-date-picker
+          v-model="form.requestTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="系统日志（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+          @cell-dblclick="handleCellDblclick"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin !outline-none"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(View)"
+              @click="onDetail(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/monitor/online/hook.tsx

@@ -3,10 +3,13 @@ import { message } from "@/utils/message";
 import { getOnlineLogsList } from "@/api/system";
 import { reactive, ref, onMounted, toRaw } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
+import {forceLogout, getOnlineList} from "@/api/monitor/online";
 
 export function useRole() {
   const form = reactive({
-    username: ""
+    userName: "",
+    skipCount: 1,
+    maxResultCount: 10
   });
   const dataList = ref([]);
   const loading = ref(true);
@@ -19,27 +22,27 @@ export function useRole() {
   const columns: TableColumnList = [
     {
       label: "序号",
-      prop: "id",
+      prop: "connnectionId",
-      minWidth: 60
+      minWidth: 200
     },
     {
       label: "用户名",
-      prop: "username",
+      prop: "userName",
       minWidth: 100
     },
     {
       label: "登录 IP",
-      prop: "ip",
+      prop: "ipaddr",
       minWidth: 140
     },
     {
       label: "登录地点",
-      prop: "address",
+      prop: "loginLocation",
       minWidth: 140
     },
     {
       label: "操作系统",
-      prop: "system",
+      prop: "os",
       minWidth: 100
     },
     {
@@ -49,10 +52,10 @@ export function useRole() {
     },
     {
       label: "登录时间",
-      prop: "loginTime",
+      prop: "creationTime",
       minWidth: 180,
-      formatter: ({ loginTime }) =>
+      formatter: ({ creationTime }) =>
-        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
@@ -62,33 +65,32 @@ export function useRole() {
   ];
 
   function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
+    form.maxResultCount = val;
+    onSearch();
   }
 
   function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
+    form.skipCount = val;
+    onSearch();
   }
 
+  /** 当CheckBox选择项发生变化时会触发该事件 */
   function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
+    console.log(val);
   }
 
-  function handleOffline(row) {
+  async function handleOffline(row) {
-    message(`${row.username}已被强制下线`, { type: "success" });
+    await forceLogout(row.connnectionId);
+    message(`${row.userName}已被强制下线`, { type: "success" });
     onSearch();
   }
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getOnlineLogsList(toRaw(form));
+    const { data } = await getOnlineList(toRaw(form));
-    dataList.value = data.list;
+    dataList.value = data.items;
-    pagination.total = data.total;
+    pagination.total = data.totalCount;
-    pagination.pageSize = data.pageSize;
+    loading.value = false;
-    pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
   }
 
   const resetForm = formEl => {

Yi.Pure.Vue3/src/views/monitor/online/index.vue

@@ -35,9 +35,9 @@ const {
       :model="form"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
-      <el-form-item label="用户名" prop="username">
+      <el-form-item label="用户名" prop="userName">
         <el-input
-          v-model="form.username"
+          v-model="form.userName"
           placeholder="请输入用户名"
           clearable
           class="!w-[180px]"
@@ -58,11 +58,7 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar
+    <PureTableBar title="在线用户" :columns="columns" @refresh="onSearch">
-      title="在线用户（仅演示，操作后不生效）"
-      :columns="columns"
-      @refresh="onSearch"
-    >
       <template v-slot="{ size, dynamicColumns }">
         <pure-table
           align-whole="center"
@@ -85,7 +81,7 @@ const {
         >
           <template #operation="{ row }">
             <el-popconfirm
-              :title="`是否强制下线${row.username}`"
+              :title="`是否强制下线${row.userName}`"
               @confirm="handleOffline(row)"
             >
               <template #reference>