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