feat(Navbar): 订阅提示文案可点击跳转
- "点击管理订阅"文字改为可点击链接,直接跳转订阅页面 - 文案简化:移除"头像"二字 - 链接样式:蓝色文字 + 悬停下划线 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -60,7 +60,10 @@ const DesktopUserMenu = memo(({ user }) => {
|
||||
_focus={{ outline: 'none' }}
|
||||
>
|
||||
<PopoverArrow bg={popoverBg} />
|
||||
<TooltipContent subscriptionInfo={subscriptionInfo} />
|
||||
<TooltipContent
|
||||
subscriptionInfo={subscriptionInfo}
|
||||
onNavigate={handleAvatarClick}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
|
||||
@@ -13,10 +13,14 @@ import PropTypes from 'prop-types';
|
||||
/**
|
||||
* 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 dividerColor = useColorModeValue('gray.200', 'gray.600');
|
||||
const linkColor = useColorModeValue('blue.500', 'blue.300');
|
||||
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>
|
||||
<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>
|
||||
</VStack>
|
||||
);
|
||||
@@ -100,8 +112,16 @@ export const TooltipContent = ({ subscriptionInfo }) => {
|
||||
)}
|
||||
|
||||
{/* 操作提示 */}
|
||||
<Text fontSize="xs" color={tooltipText} opacity={0.6} textAlign="center" mt={1}>
|
||||
{isExpired || isUrgent ? '点击头像立即续费' : '点击头像管理订阅'}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={linkColor}
|
||||
textAlign="center"
|
||||
mt={1}
|
||||
cursor="pointer"
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
onClick={onNavigate}
|
||||
>
|
||||
{isExpired || isUrgent ? '点击立即续费' : '点击管理订阅'}
|
||||
</Text>
|
||||
</VStack>
|
||||
);
|
||||
@@ -156,4 +176,5 @@ TooltipContent.propTypes = {
|
||||
is_active: PropTypes.bool,
|
||||
end_date: PropTypes.string,
|
||||
}).isRequired,
|
||||
onNavigate: PropTypes.func,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user