添加新手指南
Change-Id: Ida2104eac0c377b3a9ffdafa2c99d9fdafba6fec
diff --git a/src/components/Header.css b/src/components/Header.css
index f322e13..017ba1d 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -90,5 +90,28 @@
transform: scale(1.1); /* 选中项微微放大 */
line-height: 40px; /* 调整line-height，使文字更居中 */
}
+/* 新手指南按钮 */
+.guide-button {
+ display: flex;
+ align-items: center;
+ background-color: #a67c6a; /* 柔棕底色 */
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ padding: 6px 12px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.guide-button:hover {
+ background-color: #8d6e63; /* 深一点 hover */
+ transform: scale(1.05);
+}
+
+.guide-button span {
+ user-select: none;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 10e8efb..e0a8495 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -2,6 +2,7 @@
import './Header.css';
import logo from '../assets/logo.png';
import { useUser } from '../context/UserContext';
+import { BookOpen } from '@icon-park/react'; // 导入图标组件
const Header = () => {
const [currentPath, setCurrentPath] = useState(window.location.pathname);
@@ -39,7 +40,18 @@
<img src={logo} alt="网站 logo" className="logo" />
<span className="site-name">Echo</span>
</div>
- <div className="user-and-message">
+ <div className="user-and-message" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+ {/* 新手指南图标，放在头像左边 */}
+ <button
+ className="guide-button"
+ onClick={() => handleLinkClick('/new-user-guide')}
+ title="新手指南"
+ >
+ <BookOpen theme="outline" size="20" fill="#fff" />
+ <span style={{ marginLeft: '6px' }}>新手指南</span>
+ </button>
+
+
<a href="/user/profile">
<img
src={user?.avatarUrl}