From 7148dd97c20fd9b465f162db451416a16da911a5 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 13 Jan 2026 14:58:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor(navbar):=20=E5=AF=BC=E8=88=AA=E6=A0=8F?=
=?UTF-8?q?=E5=B8=83=E5=B1=80=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 新增 MySpaceButton 组件
- 删除 PersonalCenterMenu，功能合并到 DesktopUserMenu
- 桌面端布局：[我的空间] | [头像][用户名]
---
.../Navbars/components/CalendarButton.js | 10 +-
.../Navbars/components/NavbarActions/index.js | 60 +++--
.../components/Navigation/MySpaceButton.js | 38 +++
.../Navigation/PersonalCenterMenu.js | 116 --------
.../Navbars/components/Navigation/index.js | 3 +-
.../components/UserMenu/DesktopUserMenu.js | 253 ++++++++++++++----
6 files changed, 286 insertions(+), 194 deletions(-)
create mode 100644 src/components/Navbars/components/Navigation/MySpaceButton.js
delete mode 100644 src/components/Navbars/components/Navigation/PersonalCenterMenu.js
diff --git a/src/components/Navbars/components/CalendarButton.js b/src/components/Navbars/components/CalendarButton.js
index 3184de44..b2e2c056 100644
--- a/src/components/Navbars/components/CalendarButton.js
+++ b/src/components/Navbars/components/CalendarButton.js
@@ -32,10 +32,14 @@ const CalendarButton = memo(() => {
<>
}
+ _hover={{
+ bg: 'gray.100',
+ color: 'gray.900',
+ }}
onClick={() => setIsModalOpen(true)}
>
投资日历
diff --git a/src/components/Navbars/components/NavbarActions/index.js b/src/components/Navbars/components/NavbarActions/index.js
index 0994252b..b4394575 100644
--- a/src/components/Navbars/components/NavbarActions/index.js
+++ b/src/components/Navbars/components/NavbarActions/index.js
@@ -2,13 +2,12 @@
// Navbar 右侧功能区组件
import React, { memo } from 'react';
-import { HStack, IconButton, Box } from '@chakra-ui/react';
+import { HStack, IconButton, Box, Divider } from '@chakra-ui/react';
import { Menu } from 'lucide-react';
-// import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换
import LoginButton from '../LoginButton';
-import CalendarButton from '../CalendarButton';
+// import CalendarButton from '../CalendarButton'; // 暂时注释
import { DesktopUserMenu, TabletUserMenu } from '../UserMenu';
-import { PersonalCenterMenu, MoreMenu } from '../Navigation';
+import { MySpaceButton, MoreMenu } from '../Navigation';
/**
* Navbar 右侧功能区组件
@@ -48,35 +47,38 @@ const NavbarActions = memo(({
) : isAuthenticated && user ? (
// 已登录状态 - 用户菜单 + 功能菜单排列
- {/* 投资日历 - 仅大屏显示 */}
- {isDesktop && }
+ {/* 投资日历 - 暂时注释 */}
+ {/* {isDesktop && } */}
- {/* 头像区域 - 响应式 */}
+ {/* 桌面端布局：[我的空间] | [头像][用户名] */}
{isDesktop ? (
-
- ) : (
-
- )}
-
- {/* 头像右侧的菜单 - 响应式（互斥逻辑，确保只渲染一个） */}
- {isDesktop ? (
- // 桌面端：个人中心下拉菜单
-
+ <>
+
+
+
+
) : isTablet ? (
- // 平板端：MoreMenu 下拉菜单
-
+ // 平板端：头像 + MoreMenu
+ <>
+
+
+
) : (
- // 移动端：汉堡菜单（打开抽屉）
- }
- variant="ghost"
- onClick={onMenuOpen}
- aria-label="打开菜单"
- size="md"
- />
+ // 移动端：头像 + 汉堡菜单
+ <>
+
+ }
+ variant="ghost"
+ onClick={onMenuOpen}
+ aria-label="打开菜单"
+ size="md"
+ />
+
)}
) : (
diff --git a/src/components/Navbars/components/Navigation/MySpaceButton.js b/src/components/Navbars/components/Navigation/MySpaceButton.js
new file mode 100644
index 00000000..24191355
--- /dev/null
+++ b/src/components/Navbars/components/Navigation/MySpaceButton.js
@@ -0,0 +1,38 @@
+// src/components/Navbars/components/Navigation/MySpaceButton.js
+// 「我的空间」独立跳转按钮 - 点击直接跳转至个人中心
+
+import React, { memo } from 'react';
+import { Button } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * 「我的空间」独立按钮组件
+ * 点击直接跳转至个人中心页面
+ *
+ * 黑金主题配色：
+ * - 默认：金色文字 (#CC9C00)
+ * - hover：浅金背景 (#FFF9E6) + 深金文字 (#997500)
+ */
+const MySpaceButton = memo(() => {
+ const navigate = useNavigate();
+
+ return (
+
+ );
+});
+
+MySpaceButton.displayName = 'MySpaceButton';
+
+export default MySpaceButton;
diff --git a/src/components/Navbars/components/Navigation/PersonalCenterMenu.js b/src/components/Navbars/components/Navigation/PersonalCenterMenu.js
deleted file mode 100644
index 8817fe0a..00000000
--- a/src/components/Navbars/components/Navigation/PersonalCenterMenu.js
+++ /dev/null
@@ -1,116 +0,0 @@
-// src/components/Navbars/components/Navigation/PersonalCenterMenu.js
-// 个人中心下拉菜单 - 仅桌面版显示
-
-import React, { memo } from 'react';
-import {
- Menu,
- MenuButton,
- MenuList,
- MenuItem,
- MenuDivider,
- Button,
- Box,
- Text,
- Badge,
- useDisclosure
-} from '@chakra-ui/react';
-import { ChevronDown, Home, User, Settings, LogOut, Crown } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-
-/**
- * 个人中心下拉菜单组件
- * 仅在桌面版 (lg+) 显示
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
- * @param {Function} props.handleLogout - 退出登录回调
- */
-const PersonalCenterMenu = memo(({ user, handleLogout }) => {
- const navigate = useNavigate();
-
- // 🎯 为个人中心菜单创建 useDisclosure Hook
- const { isOpen, onOpen, onClose } = useDisclosure();
-
- // 获取显示名称
- const getDisplayName = () => {
- if (user.nickname) return user.nickname;
- if (user.username) return user.username;
- if (user.email) return user.email.split('@')[0];
- if (typeof user.phone === 'string' && user.phone) return user.phone;
- return '用户';
- };
-
- return (
-
- );
-});
-
-PersonalCenterMenu.displayName = 'PersonalCenterMenu';
-
-export default PersonalCenterMenu;
diff --git a/src/components/Navbars/components/Navigation/index.js b/src/components/Navbars/components/Navigation/index.js
index d9e405d5..98ef4f7a 100644
--- a/src/components/Navbars/components/Navigation/index.js
+++ b/src/components/Navbars/components/Navigation/index.js
@@ -3,4 +3,5 @@
export { default as DesktopNav } from './DesktopNav';
export { default as MoreMenu } from './MoreMenu';
-export { default as PersonalCenterMenu } from './PersonalCenterMenu';
+export { default as MySpaceButton } from './MySpaceButton';
+// PersonalCenterMenu 已废弃，功能合并到 DesktopUserMenu
diff --git a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js
index 76340e69..f742dc16 100644
--- a/src/components/Navbars/components/UserMenu/DesktopUserMenu.js
+++ b/src/components/Navbars/components/UserMenu/DesktopUserMenu.js
@@ -1,71 +1,234 @@
// src/components/Navbars/components/UserMenu/DesktopUserMenu.js
-// 桌面版用户菜单 - 头像点击跳转到订阅页面
+// 桌面版用户菜单 - 头像+用户名组合，点击展开综合下拉面板
import React, { memo } from 'react';
import {
- Popover,
- PopoverTrigger,
- PopoverContent,
- PopoverArrow,
- useColorModeValue
+ Menu,
+ MenuButton,
+ MenuList,
+ MenuItem,
+ MenuDivider,
+ Box,
+ HStack,
+ VStack,
+ Text,
+ Button,
+ useDisclosure
} from '@chakra-ui/react';
+import { Settings, LogOut } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import UserAvatar from './UserAvatar';
-import { TooltipContent } from '../../../Subscription/CrownTooltip';
import { useSubscription } from '../../../../hooks/useSubscription';
/**
- * 桌面版用户菜单组件
- * 大屏幕 (md+) 显示，头像点击跳转到订阅页面
- *
- * @param {Object} props
- * @param {Object} props.user - 用户信息
+ * 会员权益条组件
+ * 金色渐变背景，单行显示会员类型和到期时间
*/
-const DesktopUserMenu = memo(({ user }) => {
+const MembershipBar = memo(({ subscriptionInfo, onClose }) => {
const navigate = useNavigate();
- const { subscriptionInfo } = useSubscription();
+ const { type, days_left } = subscriptionInfo;
- const popoverBg = useColorModeValue('white', 'gray.800');
- const popoverBorderColor = useColorModeValue('gray.200', 'gray.600');
+ const getMemberText = () => {
+ if (type === 'free') return '基础版';
+ if (type === 'pro') return 'Pro会员';
+ return 'Max会员';
+ };
- const handleAvatarClick = () => {
+ const getMemberIcon = () => {
+ if (type === 'free') return '✨';
+ if (type === 'pro') return '💎';
+ return '👑';
+ };
+
+ const handleClick = () => {
+ onClose();
navigate('/home/pages/account/subscription');
};
+ // 金色渐变背景
+ const gradientBg = type === 'free'
+ ? 'linear(to-r, gray.100, gray.200)'
+ : 'linear(to-r, #F6E5A3, #D4AF37)';
+
return (
-
-
-
+
+
+ {getMemberIcon()}
+
+ {getMemberText()}
+ {type !== 'free' && (
+
+ {' '}· {days_left}天后到期
+
+ )}
+
+
+
+
+
+ );
+});
+
+MembershipBar.displayName = 'MembershipBar';
+
+/**
+ * 桌面版用户菜单组件
+ * 头像+用户名组合（去掉箭头），点击展开综合下拉面板
+ *
+ * 布局: [头像][用户名]
+ * 交互: hover 时显示浅色圆角背景，点击展开面板
+ *
+ * @param {Object} props
+ * @param {Object} props.user - 用户信息
+ * @param {Function} props.handleLogout - 退出登录回调
+ */
+const DesktopUserMenu = memo(({ user, handleLogout }) => {
+ const navigate = useNavigate();
+ const { subscriptionInfo } = useSubscription();
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
+ // 获取显示名称（含手机号脱敏逻辑）
+ const getDisplayName = () => {
+ // 1. 优先显示昵称
+ if (user.nickname) return user.nickname;
+ // 2. 其次显示用户名
+ if (user.username) return user.username;
+ // 3. 手机号脱敏
+ if (typeof user.phone === 'string' && user.phone) {
+ return user.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+ }
+ // 4. 默认显示
+ return '股票新用户';
+ };
+
+ // 跳转到我的空间
+ const handleNavigateToMySpace = () => {
+ onClose();
+ navigate('/home/center');
+ };
+
+ // 跳转到账户设置
+ const handleNavigateToSettings = () => {
+ onClose();
+ navigate('/home/settings');
+ };
+
+ // 退出登录
+ const handleLogoutClick = () => {
+ onClose();
+ handleLogout();
+ };
+
+ return (
+
-
-
-
-
-
-
+
+ {getDisplayName()}
+
+
+
+
+
+ {/* 顶部：用户信息区 - 深色背景 + 头像 + 用户名 */}
+
+
+
+
+
+ {getDisplayName()}
+
+
+ ID: {user.phone || user.id || '---'}
+
+
+
+
+
+ {/* 会员权益条 - 金色渐变背景 */}
+
+
+
+
+ {/* 列表区：快捷功能 */}
+ }
+ onClick={handleNavigateToSettings}
+ py={3}
+ >
+ 账户设置
+
+
+
+
+ {/* 底部：退出登录 */}
+ }
+ color="red.500"
+ onClick={handleLogoutClick}
+ py={3}
+ >
+ 退出登录
+
+
+
);
});