272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useParams } from 'next/navigation'
|
|
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
|
|
import Image from 'next/image'
|
|
|
|
// 按钮组件
|
|
interface MobileButtonProps {
|
|
showIcon?: boolean
|
|
icon?: React.ReactNode | null
|
|
btnTxt?: string
|
|
showTxt?: boolean
|
|
size?: 'Large' | 'Medium' | 'Small'
|
|
variant?: 'Contrast' | 'Basic' | 'Ghost'
|
|
type?: 'Primary' | 'Secondary' | 'Tertiary' | 'Destructive' | 'VIP'
|
|
state?: 'Default' | 'Disabled' | 'Pressed'
|
|
onClick?: () => void
|
|
}
|
|
|
|
function MobileButton({
|
|
showIcon = true,
|
|
icon = null,
|
|
btnTxt = 'Button',
|
|
showTxt = true,
|
|
size = 'Large',
|
|
variant = 'Basic',
|
|
type = 'Primary',
|
|
state = 'Default',
|
|
onClick,
|
|
}: MobileButtonProps) {
|
|
if (size === 'Small' && variant === 'Contrast' && type === 'Tertiary' && state === 'Default') {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="relative box-border flex h-8 content-stretch items-center justify-center gap-1 overflow-clip rounded-[999px] bg-[rgba(0,0,0,0.65)] px-4 py-1.5 transition-colors hover:bg-[rgba(0,0,0,0.8)]"
|
|
>
|
|
{showIcon &&
|
|
(icon || (
|
|
<div className="relative h-[15.999px] w-4 shrink-0">
|
|
<div
|
|
className="absolute right-[17.15%] left-1/4 aspect-[9.25554/12.1612] translate-y-[-50%]"
|
|
style={{ top: 'calc(50% + 0.065px)' }}
|
|
>
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path d="M3 2l6 4-6 4V2z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{showTxt && (
|
|
<div className="relative flex shrink-0 flex-col justify-center text-center text-[12px] leading-[0] font-medium text-nowrap text-white not-italic">
|
|
<p className="leading-[20px] whitespace-pre">{btnTxt}</p>
|
|
</div>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="relative box-border flex h-8 content-stretch items-center justify-center gap-1 overflow-clip rounded-[999px] bg-[rgba(0,0,0,0.65)] px-4 py-1.5 transition-colors hover:bg-[rgba(0,0,0,0.8)]"
|
|
>
|
|
{showIcon && icon}
|
|
{showTxt && <span className="text-[12px] font-medium text-white">{btnTxt}</span>}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const SharePage = () => {
|
|
const { userId } = useParams()
|
|
|
|
const { data: userInfo } = useGetAIUserBaseInfo({
|
|
aiId: userId ? Number(userId) : 0,
|
|
})
|
|
|
|
const { homeImageUrl } = userInfo || {}
|
|
|
|
const handleChatClick = () => {
|
|
// 跳转到应用或下载页面
|
|
window.open('https://crushlevel.com/download', '_blank')
|
|
}
|
|
|
|
return (
|
|
<div className="relative mx-auto h-screen max-w-[750px] overflow-hidden">
|
|
{/* 背景图片 */}
|
|
<div
|
|
className="absolute inset-0 overflow-clip"
|
|
style={{
|
|
background:
|
|
'linear-gradient(180deg, #211A2B 0%, rgba(33, 26, 43, 0.00) 20%, rgba(33, 26, 43, 0.00) 50%, #211A2B 100%)',
|
|
}}
|
|
>
|
|
<div className="absolute inset-0">
|
|
<Image src={homeImageUrl || ''} alt="Background" fill className="object-cover" priority />
|
|
</div>
|
|
<div className="absolute inset-0 bg-black/20" />
|
|
</div>
|
|
|
|
{/* 内容容器 */}
|
|
<div className="relative z-10 box-border flex min-h-screen flex-col content-stretch items-start justify-start px-0 pt-4 pb-0">
|
|
{/* 头部用户信息 */}
|
|
<div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start overflow-clip px-6 py-0">
|
|
<div className="relative flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-center justify-start gap-2 self-stretch">
|
|
{/* 用户头像 */}
|
|
<div className="relative size-10 shrink-0 overflow-clip rounded-[99px]">
|
|
{userInfo?.headImg ? (
|
|
<Image
|
|
src={userInfo.headImg}
|
|
alt={userInfo.nickname || 'User'}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-purple-400 to-pink-400">
|
|
<span className="text-lg font-bold text-white">
|
|
{userInfo?.nickname?.charAt(0) || 'U'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 用户名和点赞数 */}
|
|
<div className="relative flex shrink-0 flex-col content-stretch items-start justify-start text-center leading-[0] text-nowrap text-white not-italic">
|
|
<div className="relative shrink-0 text-[20px] font-semibold">
|
|
<p className="leading-[24px] text-nowrap whitespace-pre">
|
|
{userInfo?.nickname || 'Loading...'}
|
|
</p>
|
|
</div>
|
|
<div className="relative shrink-0 text-[12px] font-medium">
|
|
<p className="leading-[20px] text-nowrap whitespace-pre">0 likes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 主要内容区域 */}
|
|
<div className="relative flex min-h-px w-full min-w-px shrink-0 grow basis-0 flex-col content-stretch items-start justify-end">
|
|
{/* 消息内容 */}
|
|
<div className="relative inline-grid shrink-0 grid-cols-[max-content] grid-rows-[max-content] place-items-start px-6 leading-[0]">
|
|
{/* AI信息卡片 */}
|
|
<div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-start justify-start gap-1 px-0 py-2">
|
|
<div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-start justify-start gap-2 rounded-[16px] border border-[rgba(251,222,255,0.2)] bg-[rgba(251,222,255,0.08)] p-[16px] backdrop-blur-[32px] backdrop-filter">
|
|
{/* 介绍文本 */}
|
|
<div className="font-regular relative line-clamp-3 w-full shrink-0 overflow-hidden text-[14px] leading-[20px] text-white">
|
|
<p>
|
|
<span className="font-semibold">Intro: </span>
|
|
<span>
|
|
{userInfo?.introduction ||
|
|
'This is an AI character with unique personality and charm. Start chatting to discover more about them!'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* 标签 */}
|
|
<div className="relative flex w-full shrink-0 content-stretch items-start justify-start gap-2">
|
|
{userInfo?.tagName ? (
|
|
userInfo.tagName
|
|
.split(',')
|
|
.slice(0, 2)
|
|
.map((tag: string, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter"
|
|
>
|
|
<div className="text-[12px] leading-[20px] font-medium text-white">
|
|
{tag.trim()}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<>
|
|
<div className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter">
|
|
<div className="text-[12px] leading-[20px] font-medium text-white">
|
|
Sensual
|
|
</div>
|
|
</div>
|
|
<div className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter">
|
|
<div className="text-[12px] leading-[20px] font-medium text-white">
|
|
Romantic
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI生成内容提示 */}
|
|
<div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-center justify-start gap-1 px-0 py-2">
|
|
<div className="relative box-border flex shrink-0 content-stretch items-center justify-center gap-2 rounded-[4px] bg-[rgba(251,222,255,0.08)] px-2 py-1 backdrop-blur-[32px] backdrop-filter">
|
|
<div className="font-regular text-center text-[12px] leading-[20px] text-white">
|
|
Content generated by AI
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 示例对话消息 */}
|
|
<div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start gap-4 pt-4 pr-20 pb-2 pl-0">
|
|
<div className="relative box-border flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-start justify-start gap-2.5 rounded-[16px] bg-[rgba(0,0,0,0.65)] px-4 pt-5 pb-4 backdrop-blur-[32px] backdrop-filter">
|
|
{/* 语音标签 */}
|
|
<div className="absolute top-[-12px] left-0 box-border flex content-stretch items-center justify-center gap-2 overflow-clip rounded-tl-[8px] rounded-tr-[8px] rounded-br-[8px] bg-[#484151] px-3 py-1">
|
|
<div className="relative size-3 shrink-0">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
|
<path d="M3 2l6 4-6 4V2z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
<div className="text-[12px] leading-[20px] font-medium text-nowrap text-white">
|
|
2''
|
|
</div>
|
|
</div>
|
|
|
|
{/* 消息内容 */}
|
|
<div className="font-regular min-h-px min-w-px grow basis-0 text-[14px] leading-[20px] text-white">
|
|
<span className="text-[#958e9e]">
|
|
(Watching her parents toast you respectfully, I feel very sad.){' '}
|
|
</span>
|
|
<span>Are you?</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 底部品牌区域 */}
|
|
<div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start gap-1 overflow-clip px-2 py-4">
|
|
<div className="relative box-border flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-center justify-start gap-3 rounded-[16px] bg-gradient-to-r from-[#f264a4] to-[#c241e6] px-4 py-2">
|
|
{/* App图标 */}
|
|
<div className="relative size-[24px] shrink-0 overflow-clip rounded-[12px]">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="Crushlevel Logo"
|
|
width={24}
|
|
height={24}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* 品牌信息 */}
|
|
<div className="relative flex min-h-px min-w-px shrink-0 grow basis-0 flex-col content-stretch items-start justify-start">
|
|
<div className="relative h-[14.422px] shrink-0 overflow-clip">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="Crushlevel"
|
|
width={47}
|
|
height={14}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="text-center text-[12px] leading-[20px] font-medium text-nowrap text-white">
|
|
Chat. Crush. AI Date
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat按钮 */}
|
|
<MobileButton
|
|
showIcon={false}
|
|
btnTxt="Chat"
|
|
size="Small"
|
|
variant="Contrast"
|
|
type="Tertiary"
|
|
onClick={handleChatClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SharePage
|