diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
new file mode 100644
index 0000000..b5cc431
--- /dev/null
+++ b/src/components/AuthButton.jsx
@@ -0,0 +1,22 @@
+import {useContext} from "react";
+import { UserContext } from "../context/UserContext";
+import toast from "react-hot-toast";
+const AuthButton = ({children, roles,onClick, ...rest }) => {
+    const {user} = useContext(UserContext);
+    const {levelRole} = user;
+    let clickFunc = onClick
+    if(!roles || roles.length === 0 || roles.includes(levelRole)){
+      clickFunc = onClick;
+    }else{
+        clickFunc = () => {
+            toast.error("权限不足");
+        }
+    }
+   
+    return (
+        <button onClick={clickFunc} {...rest}>
+            {children}
+        </button>
+    )
+}
+export default AuthButton;
\ No newline at end of file
diff --git a/src/components/Header.css b/src/components/Header.css
index 017ba1d..66fe1a0 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -3,9 +3,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px; /* 增加左右间距，避免元素靠得太近 */
-  background-color: #5F4437; /* 深棕色背景 */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
+  padding: 10px 20px;
+  background-color: #6b4f3b; /* 深棕色背景 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 /* Logo 和网站名称 */
@@ -20,9 +20,9 @@
 }
 
 .site-name {
-  font-size:32px;
+  font-size: 32px;
   font-weight: bold;
-  color: #FBF2E3; /* 更加柔和的字体颜色 */
+  color: #fbf2e3; /* 柔和淡米色字体 */
 }
 
 /* 用户头像和消息中心 */
@@ -33,69 +33,68 @@
 
 .user-avatar {
   height: 50px;
-  width: 50px; /* 确保头像是圆形 */
-  border-radius: 50%; /* 圆形 */
+  width: 50px;
+  border-radius: 50%;
   margin-right: 10px;
 }
 
 .message-center {
   font-size: 24px;
-  color: #FBF2E3; /* 统一字体颜色 */
+  color: #fbf2e3;
   cursor: pointer;
-  transition: color 0.3s ease; /* 平滑过渡 */
+  transition: color 0.3s ease;
 }
 
 .message-center:hover {
-  color: #D8C0A1; /* 当鼠标悬停时字体颜色变亮 */
+  color: #eecfc1; /* 清透粉 hover */
 }
 
 /* 导航栏样式 */
 .nav {
   display: flex;
   justify-content: center;
-  background-color: #dab8c2;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
-  transition: background 0.3s ease; 
+  background-color: #fffaf7; /* 粉米底 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid #e2cfc3;
 }
 
 /* 每个导航项 */
 .nav-item {
   padding: 14px 12px;
   text-decoration: none;
-  color: #FBF2E3;
+  color: #6b4f3b; /* 主文字棕色 */
   font-size: 18px;
   font-weight: 500;
   text-align: center;
-  border-radius: 8px; /* 圆角效果 */
-  transition: background-color 0.3s, color 0.3s, transform 0.3s ease; /* 平滑过渡 */
-  position: relative; /* 为阴影和动画提供定位 */
+  border-radius: 8px;
+  transition: background-color 0.3s, color 0.3s, transform 0.3s ease;
+  position: relative;
 }
 
-/* 鼠标悬停时 */
 .nav-item:hover {
-  background-color: #5F4437; /* 背景色变深 */
-  color: #FBF2E3; /* 字体颜色与背景形成对比 */
-  transform: scale(1.05); /* 微微放大，增加互动感 */
+  background-color: #f3ded7; /* 柔粉 hover 背景 */
+  color: #4b3325;
+  transform: scale(1.05);
 }
 
 /* 选中状态 */
 .nav-item.active {
-  background-color: #5F4437; /* 活动状态时的背景色 */
-  color: #FBF2E3; /* 活动状态时的字体颜色 */
+  background-color: #eecfc1;
+  color: #3c271b;
   font-weight: bold;
-  border-radius: 16px; /* 更圆的圆角效果 */
-  padding: 4px 12px; /* 减小上下和左右的padding，框变小 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 增加阴影，带来浮动感 */
-  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease; /* 平滑过渡 */
-  transform: scale(1.1); /* 选中项微微放大 */
-  line-height: 40px; /* 调整line-height，使文字更居中 */
+  border-radius: 16px;
+  padding: 4px 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  transform: scale(1.1);
+  line-height: 40px;
 }
+
 /* 新手指南按钮 */
 .guide-button {
   display: flex;
   align-items: center;
-  background-color: #a67c6a; /* 柔棕底色 */
-  color: #fff;
+  background-color: #eecfc1; /* 清透粉底色 */
+  color: #4e342e; /* 深棕文字 */
   border: none;
   border-radius: 20px;
   padding: 6px 12px;
@@ -106,12 +105,10 @@
 }
 
 .guide-button:hover {
-  background-color: #8d6e63; /* 深一点 hover */
+  background-color: #f3ded7; /* 更柔和 hover */
   transform: scale(1.05);
 }
 
 .guide-button span {
   user-select: none;
 }
-
-