增加登录日志

src/pages/setting/index.tsx

@@ -29,6 +29,7 @@ import {
   ReloadOutlined,
 } from '@ant-design/icons';
 import SecuritySettings from './security';
+import LoginLog from './loginLog';
 
 const { Text } = Typography;
 const optionsWithDisabled = [
@@ -37,7 +38,7 @@ const optionsWithDisabled = [
   { label: '跟随系统', value: 'auto' },
 ];
 
-const Setting = ({ headerStyle, isPhone, user }: any) => {
+const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
   const columns = [
     {
       title: '名称',
@@ -110,6 +111,7 @@ const Setting = ({ headerStyle, isPhone, user }: any) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [editedApp, setEditedApp] = useState();
   const [tabActiveKey, setTabActiveKey] = useState('security');
+  const [loginLogData, setLoginLogData] = useState<any[]>([]);
 
   const themeChange = (e: any) => {
     setTheme(e.target.value);
@@ -219,10 +221,23 @@ const Setting = ({ headerStyle, isPhone, user }: any) => {
     setDataSource(result);
   };
 
+  const getLoginLog = () => {
+    request
+      .get(`${config.apiPrefix}user/login-log`)
+      .then((data: any) => {
+        setLoginLogData(data.data);
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
   const tabChange = (activeKey: string) => {
     setTabActiveKey(activeKey);
     if (activeKey === 'app') {
       getApps();
+    } else if (activeKey === 'login') {
+      getLoginLog();
     }
   };
 
@@ -261,7 +276,7 @@ const Setting = ({ headerStyle, isPhone, user }: any) => {
         onChange={tabChange}
       >
         <Tabs.TabPane tab="安全设置" key="security">
-          <SecuritySettings user={user} />
+          <SecuritySettings user={user} userChange={reloadUser} />
         </Tabs.TabPane>
         <Tabs.TabPane tab="应用设置" key="app">
           <Table
@@ -274,6 +289,9 @@ const Setting = ({ headerStyle, isPhone, user }: any) => {
             loading={loading}
           />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="登陆日志" key="login">
+          <LoginLog data={loginLogData} />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="其他设置" key="theme">
           <Form layout="vertical">
             <Form.Item label="主题设置" name="theme" initialValue={theme}>

src/pages/setting/loginLog.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Table, Tag, Button, Spin, message } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const { Text, Link } = Typography;
+
+enum LoginStatus {
+  '成功',
+  '失败',
+}
+
+enum LoginStatusColor {
+  'success',
+  'error',
+}
+
+const columns = [
+  {
+    title: '序号',
+    align: 'center' as const,
+    width: 50,
+    render: (text: string, record: any, index: number) => {
+      return <span style={{ cursor: 'text' }}>{index + 1} </span>;
+    },
+  },
+  {
+    title: '时间',
+    dataIndex: 'timestamp',
+    key: 'timestamp',
+    align: 'center' as const,
+    render: (text: string, record: any) => {
+      return <span>{new Date(record.timestamp).toLocaleString()}</span>;
+    },
+  },
+  {
+    title: '地址',
+    dataIndex: 'address',
+    key: 'address',
+    align: 'center' as const,
+  },
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    key: 'ip',
+    align: 'center' as const,
+  },
+  {
+    title: '登陆状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center' as const,
+    render: (text: string, record: any) => {
+      return (
+        <Tag color={LoginStatusColor[record.status]} style={{ marginRight: 0 }}>
+          {LoginStatus[record.status]}
+        </Tag>
+      );
+    },
+  },
+];
+
+const LoginLog = ({ data }: any) => {
+  return (
+    <>
+      <Table
+        columns={columns}
+        pagination={false}
+        dataSource={data}
+        rowKey="_id"
+        size="middle"
+        scroll={{ x: 768 }}
+      />
+    </>
+  );
+};
+
+export default LoginLog;

src/pages/setting/security.tsx

@@ -7,7 +7,7 @@ import QRCode from 'qrcode.react';
 
 const { Title, Link } = Typography;
 
-const SecuritySettings = ({ user }: any) => {
+const SecuritySettings = ({ user, userChange }: any) => {
   const [loading, setLoading] = useState(false);
   const [twoFactorActived, setTwoFactorActived] = useState<boolean>();
   const [twoFactoring, setTwoFactoring] = useState(false);
@@ -46,6 +46,7 @@ const SecuritySettings = ({ user }: any) => {
       .then((data: any) => {
         if (data.data) {
           setTwoFactorActived(false);
+          userChange();
         }
       })
       .catch((error: any) => {
@@ -61,6 +62,7 @@ const SecuritySettings = ({ user }: any) => {
           message.success('激活成功');
           setTwoFactoring(false);
           setTwoFactorActived(true);
+          userChange();
         }
       })
       .catch((error: any) => {