add css module compile rule and a login guard
Change-Id: I5c99e236f92d3b6c6d0060b36cf90a252df93a95
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index e954852..40d3ac3 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,28 +1,36 @@
import React from "react";
import { useAppSelector } from "../../hooks/store";
-import "./style.css"
+import style from "./style.module.css"
-const SelfStatus :React.FC = () => {
- const userName = useAppSelector(state => state.user.userName)
- const role = useAppSelector(state => state.user.role)
- const uploadTraffic = useAppSelector(state => state.user.uploadTraffic)
- const downloadTraffic = useAppSelector(state => state.user.downloadTraffic)
- const downloadPoints = useAppSelector(state => state.user.downloadPoints)
- const avatar = useAppSelector(state => state.user.avatar)
- const islogin = useAppSelector(state => state.user.isLogin)
- return <>
- <div className="user">
- <img className="avatar" src={avatar}></img>
- <p className="userName">{userName},欢迎你</p>
+const SelfStatus: React.FC = () => {
+ const userName = useAppSelector(state => state.user.userName);
+ const role = useAppSelector(state => state.user.role);
+ const uploadTraffic = useAppSelector(state => state.user.uploadTraffic);
+ const downloadTraffic = useAppSelector(state => state.user.downloadTraffic);
+ const downloadPoints = useAppSelector(state => state.user.downloadPoints);
+ const avatar = useAppSelector(state => state.user.avatar);
+ console.log(avatar)
+
+ return (
+ <div className={style.container}>
+ <div className={style.left}>
+ <img className={style.avatar} src={avatar} alt="User Avatar" />
</div>
- <div className="info" >
- <p className="uploadTraffic">上传量：{uploadTraffic}</p>
- <p>下载量：{downloadTraffic}</p>
- <p>下载积分：{downloadPoints}</p>
+ <div className={style.right}>
+ <div className={style.info}>
+ <p className={style.userName}>{userName}</p>
+ <p className={style.role}>角色: {role}</p>
+ <p className={style.uploadTraffic}>上传量: {uploadTraffic}</p>
+ <p className={style.downloadTraffic}>下载量: {downloadTraffic}</p>
+ <p className={style.shareRatio}>
+ 分享率: {uploadTraffic && downloadTraffic ? (uploadTraffic / downloadTraffic).toFixed(2) : "N/A"}
+ </p>
+ </div>
+ <button className={style.signInButton}>签到</button>
</div>
+ </div>
+ );
+};
- </>
-}
-
-export default SelfStatus
+export default SelfStatus;