feat(logger): add system/access log

src/pages/log/Access/index.tsx

@@ -0,0 +1,95 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import BaseService from '@/utils/BaseService';
+import React, { useRef } from 'react';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import type { AccessLogItem } from '@/pages/log/Access/typings';
+import moment from 'moment';
+import { Tag, Tooltip } from 'antd';
+import { CurdModel } from '@/components/BaseCrud/model';
+import { EditOutlined } from '@ant-design/icons';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import BaseCrud from '@/components/BaseCrud';
+
+const service = new BaseService('logger/access');
+const Access: React.FC = () => {
+  const actionRef = useRef<ActionType>();
+  const intl = useIntl();
+  const columns: ProColumns<AccessLogItem>[] = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48,
+    },
+    {
+      title: 'IP',
+      dataIndex: 'ip',
+      // ellipsis: true
+    },
+    {
+      title: '请求路径',
+      dataIndex: 'url',
+      // ellipsis: true,
+    },
+    {
+      title: '说明',
+      dataIndex: 'describe',
+      // ellipsis: true,
+      render: (text, record) => {
+        return `${record.action}-${record.describe}`;
+      },
+    },
+    {
+      title: '请求时间',
+      dataIndex: 'requestTime',
+      sorter: true,
+      defaultSortOrder: 'descend',
+      // ellipsis: true,
+      renderText: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      title: '请求耗时',
+      // width: 100,
+      renderText: (record: AccessLogItem) => (
+        <Tag color="purple">{record.responseTime - record.requestTime}ms</Tag>
+      ),
+    },
+    {
+      title: '请求用户',
+      dataIndex: 'context.username',
+      render: (text) => <Tag color="geekblue">{text}</Tag>,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (text, record) => [
+        <a key="editable" onClick={() => CurdModel.update(record)}>
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+  return (
+    <PageContainer>
+      <BaseCrud<AccessLogItem>
+        columns={columns}
+        service={service}
+        title="访问日志"
+        schema={{}}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
+};
+export default Access;

src/pages/log/Access/typings.d.ts

@@ -0,0 +1,16 @@
+export type AccessLogItem = {
+  id: string;
+  context: any;
+  describe: string;
+  exception: string;
+  httpHeaders: any;
+  httpMethod: string;
+  ip: string;
+  method: string;
+  parameters: any;
+  requestTime: number;
+  responseTime: number;
+  target: string;
+  url: string;
+  action: string;
+};

src/pages/log/System/index.tsx

@@ -0,0 +1,94 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { useRef } from 'react';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import type { SystemLogItem } from '@/pages/log/System/typings';
+import { Tag, Tooltip } from 'antd';
+import moment from 'moment';
+import BaseCrud from '@/components/BaseCrud';
+import BaseService from '@/utils/BaseService';
+import { CurdModel } from '@/components/BaseCrud/model';
+import { EditOutlined } from '@ant-design/icons';
+
+const service = new BaseService<SystemLogItem>('logger/system');
+const System = () => {
+  const intl = useIntl();
+  const actionRef = useRef<ActionType>();
+
+  const columns: ProColumns<SystemLogItem>[] = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48,
+    },
+    {
+      title: '线程',
+      dataIndex: 'threadName',
+      ellipsis: true,
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      ellipsis: true,
+    },
+    {
+      title: '级别',
+      dataIndex: 'level',
+      width: 80,
+      render: (text) => <Tag color={text === 'ERROR' ? 'red' : 'orange'}>{text}</Tag>,
+    },
+    {
+      title: '日志内容',
+      dataIndex: 'exceptionStack',
+      ellipsis: true,
+    },
+    {
+      title: '服务名',
+      dataIndex: 'context.server',
+      width: 150,
+      ellipsis: true,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      width: 200,
+      sorter: true,
+      ellipsis: true,
+      defaultSortOrder: 'descend',
+      renderText: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (text, record) => [
+        <a key="editable" onClick={() => CurdModel.update(record)}>
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+  return (
+    <PageContainer>
+      <BaseCrud<SystemLogItem>
+        columns={columns}
+        service={service}
+        title="系统日志"
+        schema={{}}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
+};
+export default System;

src/pages/log/System/typings.d.ts

@@ -0,0 +1,14 @@
+export type SystemLogItem = {
+  id: string;
+  className: string;
+  context: any;
+  createTime: number;
+  exceptionStack: string;
+  level: string;
+  lineNumber: number;
+  message: string;
+  methodName: string;
+  name: string;
+  threadId: string;
+  threadName: string;
+};