Docker
Change-Id: I2aefd96a43bcf3a3c41c079ecfc04a3fee48bed6
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index a5156f4..3745736 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,12 +1,15 @@
import React from "react";
import { useAppSelector } from "../../hooks/store";
import style from "./style.module.css"
+import { useNavigate } from "react-router";
interface SelfStatusProps {
className?: string;
}
const SelfStatus: React.FC<SelfStatusProps> = () => {
+
+ const nav = useNavigate()
const userName = useAppSelector(state => state.user.userName);
const role = useAppSelector(state => state.user.role);
const uploadTraffic = useAppSelector(state => state.user.uploadTraffic);
@@ -14,10 +17,14 @@
const downloadPoints = useAppSelector(state => state.user.downloadPoints);
const avatar = useAppSelector(state => state.user.avatar);
+ function handleAvatarClick(){
+ nav('/homepage')
+ }
+
return (
<div className={style.container}>
<div className={style.left}>
- <img className={style.avatar} src={avatar} alt="User Avatar" />
+ <img className={style.avatar} onClick={handleAvatarClick} src={avatar} alt="User Avatar" />
</div>
<div className={style.right}>
<div className={style.info}>
diff --git a/src/components/upload/upload.module.css b/src/components/upload/upload.module.css
new file mode 100644
index 0000000..2fb6278
--- /dev/null
+++ b/src/components/upload/upload.module.css
@@ -0,0 +1,39 @@
+.uploadContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 2px dashed #1890ff;
+ padding: 40px;
+ border-radius: 8px;
+ background-color: #f0f5ff;
+ transition: border-color 0.3s;
+}
+
+.uploadContainer:hover {
+ border-color: #40a9ff;
+}
+
+.uploadLabel {
+ font-size: 16px;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+.uploadInput {
+ display: none;
+}
+
+.uploadButton {
+ padding: 8px 16px;
+ background-color: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.uploadButton:hover {
+ background-color: #40a9ff;
+}
diff --git a/src/components/upload/upload.tsx b/src/components/upload/upload.tsx
new file mode 100644
index 0000000..708e9d1
--- /dev/null
+++ b/src/components/upload/upload.tsx
@@ -0,0 +1,44 @@
+// src/component/upload/upload.tsx
+import React, { useState } from 'react'
+import './upload.css'
+
+const UploadComponent: React.FC = () => {
+ const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+ const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (e.target.files && e.target.files.length > 0) {
+ setSelectedFile(e.target.files[0])
+ }
+ }
+
+ const handleUpload = () => {
+ if (selectedFile) {
+ console.log('上传文件：', selectedFile)
+ // 此处可以添加实际上传逻辑
+ }
+ }
+
+ return (
+ <div className="uploadContainer">
+ <label className="uploadLabel" htmlFor="upload-input">请选择文件上传：</label>
+ <input
+ type="file"
+ id="upload-input"
+ className="uploadInput"
+ data-testid="upload-input"
+ onChange={handleFileChange}
+ />
+ <label htmlFor="upload-input">
+ <div
+ className="uploadButton"
+ data-testid="upload-button"
+ onClick={handleUpload}
+ >
+ 点击上传
+ </div>
+ </label>
+ </div>
+ )
+}
+
+export default UploadComponent