feat: avater

Author: weiqinke

src/api/caravan/Login.ts

@@ -104,3 +104,13 @@ export const updateUserAvatarUrl = payload => {
 export const findAccountLogs = (payload: any) => {
   return request(`${BASE_URL}Accountlog/findAccountLogs`, "GET", payload);
 };
+
+/**
+ * 使用免费图床
+ * */
+export const saveUserAvatarUrl = payload => {
+  return request(`https://freeimg.cn/api/v1/upload`, "POST", payload, {
+    processData: false,
+    "Content-Type":"multipart/form-data"
+  });
+};

src/assets/login/1login.jpg

@@ -4,4 +4,7 @@
   right: 0;
   height: 20px;
   padding-right: 12px;
+  a{
+    color: #000;
+  }
 }

src/assets/login/login.jpg

@@ -7,7 +7,12 @@
   left: 50%;
   margin-top: -183px;
   margin-left: -162px;
-  background: #fff;
+  background: rgba(164,203,200,.3);
+  &:hover{
+    box-shadow: -4px 4px 16px 1px rgba(0, 0, 0, 0.15);
+    background: rgba(164,203,200,1);
+    transition: box-shadow 1s,background 1s, transform 2s;
+  }
 }
 
 .title {

src/components/Footer/LoginCopyright/index.module.scss

@@ -2,10 +2,11 @@ import { UserOutlined } from "@ant-design/icons";
 import { Avatar, Col, Form, Input, message, Modal, Radio, Row, Upload } from "antd";
 import type { FC } from "react";
 import React, { useEffect, useState } from "react";
-import { addOneUser, editOneUser, updateUserAvatarUrl } from "@/api/caravan/Login";
+import { addOneUser, editOneUser, saveUserAvatarUrl, updateUserAvatarUrl } from "@/api/caravan/Login";
 import { trim } from "lodash";
 
 import styles from "./index.module.scss";
+import axios from "axios";
 
 const layout = {
   labelCol: { span: 8 },
@@ -28,7 +29,7 @@ const UserEditModal: FC<any> = (props: any) => {
     reader.addEventListener("load", () => callback(reader.result));
     reader.readAsDataURL(img);
   };
-  const handleUpload = (uid: string) => {
+  const handleUpload = async (uid: string) => {
     if (fileList.length <= 0 || !uid) {
       return;
     }
@@ -41,19 +42,28 @@ const UserEditModal: FC<any> = (props: any) => {
     }
     formData.append("userUid", uid);
     setuploading(true);
-    updateUserAvatarUrl(formData)
-      .then(result => {
-        setAvatarUrl("");
-        if (result.data.code === 200) {
-          message.info("头像修改成功");
-          return;
-        }
-        message.info("头像修改失败");
-      })
-      .catch(() => {
-        setAvatarUrl("");
-        message.info("头像修改失败");
-      });
+    const avatar = await axios.post('https://freeimg.cn/api/v1/upload',{
+      file:fileList[0],
+      album_id:145
+    },{
+      headers:{
+        "Authorization": "Bearer 134|dfgG6kRMsd3SP6E0ZJvieEq98mOOhdaATYQRZruZ",
+        "Content-Type": "multipart/form-data"
+      }
+    }).then(result => {
+      setAvatarUrl("");
+      message.info(`头像上传${result?.data?.status?"成功":"失败"}`);
+      return result?.data?.data?.links?.url;
+    })
+    .catch(() => {
+      setAvatarUrl("");
+      message.info("头像修改失败");
+      return ''
+    });
+    updateUserAvatarUrl({
+      uid,
+      avatar
+    }).finally(()=>onOk(true))
   };
 
   const UpLoadProps = {
@@ -101,7 +111,6 @@ const UserEditModal: FC<any> = (props: any) => {
     message.info("操作成功");
     setuploading(false);
     handleUpload(initUser.uid || result.data.data.uid);
-    onOk(true);
   };
 
   const setInputType = () => {

src/components/Forms/LoginForm/index.module.scss

@@ -15,8 +15,8 @@ const LoginLog = () => {
       dataIndex: "bowser"
     },
     {
-      title: "IP地址",
-      dataIndex: "ip"
+      title: "来源",
+      dataIndex: "host"
     },
     {
       title: "登录设备",

src/components/Modals/UserEditModal/index.tsx

@@ -1,4 +1,6 @@
-$base-url: "@/assets/login/login.jpg";
+// $base-url: "@/assets/login/login.jpg";
+// 134|dfgG6kRMsd3SP6E0ZJvieEq98mOOhdaATYQRZruZ
+$base-url:'https://www.freeimg.cn/i/2024/01/13/65a28bad6be9e.jpg';
 .container {
   width: 100vw;
   height: 100vh;

src/components/Tables/LoginLog/index.tsx

@@ -37,7 +37,7 @@ const RoleList: FC = () => {
     findalluser({})
       .then(res => setUserDatasource(res.data.data || []))
       .catch(() => setUserDatasource([]));
-    findAllMenu({ isdeleted: 0 })
+    findAllMenu({ isdeleted: 0, version: 2 })
       .then((res: any) => setMenuDataSource(res.data.data || []))
       .catch(() => setMenuDataSource([]));
   }, []);

src/pages/Login/index.module.scss

@@ -59,7 +59,7 @@ const WsOnlineList: React.FC = () => {
         renderItem={(item: any) => (
           <List.Item>
             <List.Item.Meta title={<b>{item.name}</b>} description={webSocketManager.MySocketID === item.id ? "当前用户" : item.id} />
-            <div className="listinfo">
+            {webSocketManager.MySocketID === item.id ?null:<div className="listinfo">
               <Button
                 danger
                 type="primary"
@@ -69,7 +69,7 @@ const WsOnlineList: React.FC = () => {
               >
                 强制下线
               </Button>
-            </div>
+            </div>}
           </List.Item>
         )}
       />