feat(Navbar): 订阅提示文案可点击跳转

- "点击管理订阅"文字改为可点击链接,直接跳转订阅页面
- 文案简化:移除"头像"二字
- 链接样式:蓝色文字 + 悬停下划线

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-15 16:27:54 +08:00
parent f304268af9
commit 293886b54a
2 changed files with 30 additions and 6 deletions

View File

@@ -60,7 +60,10 @@ const DesktopUserMenu = memo(({ user }) => {
_focus={{ outline: 'none' }} _focus={{ outline: 'none' }}
> >
<PopoverArrow bg={popoverBg} /> <PopoverArrow bg={popoverBg} />
<TooltipContent subscriptionInfo={subscriptionInfo} /> <TooltipContent
subscriptionInfo={subscriptionInfo}
onNavigate={handleAvatarClick}
/>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
); );

View File

@@ -13,10 +13,14 @@ import PropTypes from 'prop-types';
/** /**
* Tooltip 内容组件 - 显示详细的会员信息 * Tooltip 内容组件 - 显示详细的会员信息
* 导出此组件供头像也使用相同的 Tooltip 内容 * 导出此组件供头像也使用相同的 Tooltip 内容
*
* @param {Object} subscriptionInfo - 订阅信息
* @param {Function} onNavigate - 点击跳转回调(可选)
*/ */
export const TooltipContent = ({ subscriptionInfo }) => { export const TooltipContent = ({ subscriptionInfo, onNavigate }) => {
const tooltipText = useColorModeValue('gray.700', 'gray.100'); const tooltipText = useColorModeValue('gray.700', 'gray.100');
const dividerColor = useColorModeValue('gray.200', 'gray.600'); const dividerColor = useColorModeValue('gray.200', 'gray.600');
const linkColor = useColorModeValue('blue.500', 'blue.300');
const { type, days_left, is_active, end_date } = subscriptionInfo; const { type, days_left, is_active, end_date } = subscriptionInfo;
// 格式化到期日期 // 格式化到期日期
@@ -46,8 +50,16 @@ export const TooltipContent = ({ subscriptionInfo }) => {
<Text fontSize="sm" color={tooltipText} opacity={0.8}> <Text fontSize="sm" color={tooltipText} opacity={0.8}>
解锁更多高级功能 解锁更多高级功能
</Text> </Text>
<Text fontSize="xs" color={tooltipText} opacity={0.6} textAlign="center" mt={1}> <Text
点击头像升级会员 fontSize="xs"
color={linkColor}
textAlign="center"
mt={1}
cursor="pointer"
_hover={{ textDecoration: 'underline' }}
onClick={onNavigate}
>
点击升级会员
</Text> </Text>
</VStack> </VStack>
); );
@@ -100,8 +112,16 @@ export const TooltipContent = ({ subscriptionInfo }) => {
)} )}
{/* 操作提示 */} {/* 操作提示 */}
<Text fontSize="xs" color={tooltipText} opacity={0.6} textAlign="center" mt={1}> <Text
{isExpired || isUrgent ? '点击头像立即续费' : '点击头像管理订阅'} fontSize="xs"
color={linkColor}
textAlign="center"
mt={1}
cursor="pointer"
_hover={{ textDecoration: 'underline' }}
onClick={onNavigate}
>
{isExpired || isUrgent ? '点击立即续费' : '点击管理订阅'}
</Text> </Text>
</VStack> </VStack>
); );
@@ -156,4 +176,5 @@ TooltipContent.propTypes = {
is_active: PropTypes.bool, is_active: PropTypes.bool,
end_date: PropTypes.string, end_date: PropTypes.string,
}).isRequired, }).isRequired,
onNavigate: PropTypes.func,
}; };