From 98653f042b4b6ec514bff67afbd5827bab0939e9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 21 Oct 2025 15:43:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=88=AAUI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Navbars/HomeNavbar.js | 323 ++++++++++++++++----
src/components/Subscription/CrownTooltip.js | 137 +++++++++
2 files changed, 405 insertions(+), 55 deletions(-)
create mode 100644 src/components/Subscription/CrownTooltip.js
diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js
index 671bc2d8..8b017bf7 100644
--- a/src/components/Navbars/HomeNavbar.js
+++ b/src/components/Navbars/HomeNavbar.js
@@ -43,7 +43,7 @@ import { logger } from '../../utils/logger';
import { getApiBase } from '../../utils/apiConfig';
import SubscriptionButton from '../Subscription/SubscriptionButton';
import SubscriptionModal from '../Subscription/SubscriptionModal';
-import CrownTooltip, { TooltipContent } from '../Subscription/CrownTooltip';
+import { CrownIcon, TooltipContent } from '../Subscription/CrownTooltip';
/** 二级导航栏组件 - 显示当前一级菜单下的所有二级菜单项 */
const SecondaryNav = ({ showCompletenessAlert }) => {
@@ -186,6 +186,112 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
);
};
+/** 中屏"更多"菜单 - 用于平板和小笔记本 */
+const MoreNavMenu = ({ isAuthenticated, user }) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ // 辅助函数：判断导航项是否激活
+ const isActive = useCallback((paths) => {
+ return paths.some(path => location.pathname.includes(path));
+ }, [location.pathname]);
+
+ if (!isAuthenticated || !user) return null;
+
+ return (
+
+ );
+};
+
/** 桌面端导航 - 完全按照原网站
* @TODO 添加逻辑 不展示导航case
* 1.未登陆状态 && 是首页
@@ -360,6 +466,8 @@ export default function HomeNavbar() {
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const isMobile = useBreakpointValue({ base: true, md: false });
+ const isTablet = useBreakpointValue({ base: false, md: true, lg: false });
+ const isDesktop = useBreakpointValue({ base: false, md: false, lg: true });
const { user, isAuthenticated, logout, isLoading } = useAuth();
const { openAuthModal } = useAuthModal();
const { colorMode, toggleColorMode } = useColorMode();
@@ -746,15 +854,22 @@ export default function HomeNavbar() {
- {/* 移动端菜单按钮 */}
+ {/* 中间导航区域 - 响应式 */}
{isMobile ? (
+ // 移动端：汉堡菜单
}
variant="ghost"
onClick={onOpen}
aria-label="Open menu"
/>
- ) : }
+ ) : isTablet ? (
+ // 中屏（平板）："更多"下拉菜单
+
+ ) : (
+ // 大屏（桌面）：完整导航菜单
+
+ )}
{/* 右侧：日夜模式切换 + 登录/用户区 */}
@@ -774,8 +889,8 @@ export default function HomeNavbar() {
) : isAuthenticated && user ? (
// 已登录状态 - 用户菜单 + 功能菜单排列
- {/* 自选股 - 移动端隐藏 */}
- {!isMobile && (
+ {/* 自选股 - 仅大屏显示 */}
+ {isDesktop && (
) : (
// 未登录状态 - 单一按钮
diff --git a/src/components/Subscription/CrownTooltip.js b/src/components/Subscription/CrownTooltip.js
new file mode 100644
index 00000000..0eb40950
--- /dev/null
+++ b/src/components/Subscription/CrownTooltip.js
@@ -0,0 +1,137 @@
+// src/components/Subscription/CrownTooltip.js
+import React from 'react';
+import {
+ Box,
+ VStack,
+ HStack,
+ Text,
+ Divider,
+ useColorModeValue
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+/**
+ * Tooltip 内容组件 - 显示详细的会员信息
+ * 导出此组件供头像也使用相同的 Tooltip 内容
+ */
+export const TooltipContent = ({ subscriptionInfo }) => {
+ const tooltipText = useColorModeValue('gray.700', 'gray.100');
+ const dividerColor = useColorModeValue('gray.200', 'gray.600');
+ const { type, days_left, is_active } = subscriptionInfo;
+
+ // 基础版用户
+ if (type === 'free') {
+ return (
+
+
+ ✨ 基础版用户
+
+
+
+ 解锁更多高级功能
+
+
+ 点击头像升级会员
+
+
+ );
+ }
+
+ // 付费用户
+ const isExpired = !is_active;
+ const isUrgent = days_left < 7;
+ const isWarning = days_left < 30;
+
+ return (
+
+
+
+ {type === 'pro' ? '💎 Pro 会员' : '👑 Max 会员'}
+
+ {isExpired && 已过期}
+
+
+
+
+ {/* 状态信息 */}
+ {isExpired ? (
+
+ ❌
+
+ 会员已过期，续费恢复权益
+
+
+ ) : (
+
+
+
+ {isUrgent ? '⚠️' : isWarning ? '⏰' : '📅'}
+
+
+ {isUrgent && 紧急! }
+ 还有 {days_left} 天到期
+
+
+
+ 享受全部高级功能
+
+
+ )}
+
+ {/* 操作提示 */}
+
+ {isExpired || isUrgent ? '点击头像立即续费' : '点击头像管理订阅'}
+
+
+ );
+};
+
+/**
+ * 皇冠图标组件 - 显示在头像左上角的会员标识（纯图标，无 Tooltip）
+ * Tooltip 由外层统一包裹
+ *
+ * @param {Object} subscriptionInfo - 订阅信息
+ * @param {string} subscriptionInfo.type - 订阅类型: 'free' | 'pro' | 'max'
+ */
+export function CrownIcon({ subscriptionInfo }) {
+ // 基础版用户不显示皇冠
+ if (subscriptionInfo.type === 'free') {
+ return null;
+ }
+
+ return (
+
+
+ {subscriptionInfo.type === 'max' ? '👑' : '💎'}
+
+
+ );
+}
+
+CrownIcon.propTypes = {
+ subscriptionInfo: PropTypes.shape({
+ type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
+ }).isRequired,
+};
+
+TooltipContent.propTypes = {
+ subscriptionInfo: PropTypes.shape({
+ type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
+ days_left: PropTypes.number,
+ is_active: PropTypes.bool,
+ }).isRequired,
+};