S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 提交样式和侧边栏

Browse Source
This commit is contained in:
speakeloudest 2025-07-29 03:28:40 -07:00
parent a8c4ec4118
commit d6bb9f3683
13 changed files with 433 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/user/app/(main)/(content)/(user)/layout.tsx
View File

@ -7,9 +7,9 @@ import { SidebarRight } from './sidebar-right';
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider className='container'>
<SidebarLeft className='sticky top-[84px] hidden w-52 border-r-0 bg-transparent lg:flex' />
<SidebarLeft className='sticky w-[288px] border-r-0 bg-transparent lg:flex' />
<SidebarInset className='relative p-4'>{children}</SidebarInset>
<SidebarRight className='sticky top-[84px] hidden w-52 border-r-0 bg-transparent 2xl:flex' />
<SidebarRight className='sticky top-[84px] hidden w-[288px] border-r-0 bg-transparent 2xl:flex' />
<Announcement type='popup' Authorization={(await cookies()).get('Authorization')?.value} />
</SidebarProvider>
);

60
apps/user/app/(main)/(content)/(user)/sidebar-left.tsx
View File

@ -1,17 +1,16 @@
'use client';
import { UserNav } from '@/components/user-nav';
import { navs } from '@/config/navs';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@workspace/ui/components/sidebar';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
@ -19,34 +18,39 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
const t = useTranslations('menu');
const pathname = usePathname();
return (
<Sidebar collapsible='none' side='left' {...props}>
<SidebarContent>
<SidebarMenu>
{navs.map((nav) => (
<SidebarGroup key={nav.title}>
{nav.items && <SidebarGroupLabel>{t(nav.title)}</SidebarGroupLabel>}
<SidebarGroupContent>
<SidebarMenu>
{(nav.items || [nav]).map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
tooltip={t(item.title)}
isActive={item.url === pathname}
>
<Link href={item.url}>
{item.icon && <Icon icon={item.icon} />}
<span>{t(item.title)}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<Sidebar collapsible='none' side='left' {...props} className={'h-auto bg-white'}>
<div className='pb-7 pt-12'>
<Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
</div>
<SidebarContent className={''}>
<SidebarMenu className={'gap-2.5'}>
{navs.map((nav, navIndex) => (
<SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 0}>
{(nav.items || [nav]).map((item) => (
<SidebarMenuItem key={item.title} className={''}>
<SidebarMenuButton
className={
'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#0F2C53] active:bg-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
}
asChild
tooltip={t(item.title)}
isActive={item.url === pathname}
>
<Link href={item.url}>
{item.icon && <Icon className={'!size-6'} icon={item.icon} />}
<span>{t(item.title)}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
))}
</SidebarMenu>
</SidebarContent>
<div>
<UserNav from='profile' />
</div>
</Sidebar>
);
}

11
apps/user/app/(main)/(content)/layout.tsx
View File

@ -1,12 +1,3 @@
import Footer from '@/components/footer';
import Header from '@/components/Header/header';
export default async function MainLayout({ children }: { children: React.ReactNode }) {
return (
<>
<Header />
{children}
<Footer />
</>
);
return <>{children}</>;
}

3
apps/user/app/(main)/page.tsx
View File

@ -5,7 +5,6 @@ import { Stats } from '@/components/main/stats';*/
import NewHeader from '@/components/Header/NewHeader';
import { queryUserInfo } from '@/services/user/user';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import FooterCopyright from '@/components/main/FooterCopyright';
import FullScreenVideoBackground from '@/components/main/FullScreenVideoBackground';
@ -26,7 +25,7 @@ export default async function Home() {
}
if (user) {
redirect('/dashboard');
// redirect('/dashboard');
}
}

8
apps/user/app/auth/email/login-form.tsx
View File

@ -59,7 +59,7 @@ export default function LoginForm({
<FormItem className={'mb-5'}>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='Email'
type='email'
{...field}
@ -76,7 +76,7 @@ export default function LoginForm({
<FormItem className={'mb-2'}>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='password'
type='password'
{...field}
@ -104,14 +104,14 @@ export default function LoginForm({
<Button
variant='link'
type='button'
className='p-0'
className='p-0 text-[#225BA9]'
onClick={() => onSwitchForm('reset')}
>
{t('forgotPassword')}
</Button>
<Button
variant='link'
className='p-0'
className='p-0 text-[#225BA9]'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('register');

14
apps/user/app/auth/email/register-form.tsx
View File

@ -102,7 +102,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='Enter your email...'
type='email'
{...field}
@ -119,7 +119,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='Enter your password...'
type='password'
{...field}
@ -136,7 +136,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
disabled={loading}
placeholder='Enter password again...'
type='password'
@ -157,7 +157,9 @@ export default function RegisterForm({
<div className='flex items-center gap-8'>
<Input
disabled={loading}
className={'h-[60px] flex-1 text-xl'}
className={
'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Enter code...'
type='text'
{...field}
@ -184,7 +186,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
disabled={loading || !!localStorage.getItem('invite')}
placeholder={t('invite')}
{...field}
@ -215,7 +217,7 @@ export default function RegisterForm({
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
className='p-0 text-[#225BA9]'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');

8
apps/user/app/auth/email/reset-form.tsx
View File

@ -65,7 +65,7 @@ export default function ResetForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='Enter your email...'
type='email'
{...field}
@ -83,7 +83,7 @@ export default function ResetForm({
<FormControl>
<div className='flex items-center gap-8'>
<Input
className={'h-[60px] flex-1 text-xl'}
className={'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
disabled={loading}
placeholder='Enter code...'
type='text'
@ -110,7 +110,7 @@ export default function ResetForm({
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'}
placeholder='Enter your new password...'
type='password'
{...field}
@ -139,7 +139,7 @@ export default function ResetForm({
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
className='p-0 text-[#225BA9]'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');

3
apps/user/components/Header/NewHeader.tsx
View File

@ -11,7 +11,6 @@ import LanguageSwitch from '../language-switch';
import EmailAuthDialog, { EmailAuthDialogRef } from '@/app/auth/EmailAuthDialog/EmailAuthDialog';
import { useRef } from 'react';
import { UserNav } from '../user-nav';
import ImageLogo from './image.png';
export default function Header() {
const t = useTranslations('common');
@ -19,7 +18,7 @@ export default function Header() {
const { user } = useGlobalStore();
const Logo = (
<Link href='/' className='-mt-2.5 flex items-center gap-2 font-bold'>
<Image src={ImageLogo} width={102} height={49} alt='logo' unoptimized />
<Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
</Link>
);

323
apps/user/components/main/OfferDialog/index.tsx
View File

@ -1,7 +1,131 @@
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
import { getSubscription } from '@/services/user/portal';
import { useQuery } from '@tanstack/react-query';
import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import Image from 'next/image';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
// 定义数据类型
interface SubscriptionData {
id: string;
name: string;
price: number;
originalPrice: number;
duration: string;
features: {
traffic: string;
duration: string;
onlineIPs: string;
connections: string;
bandwidth: string;
nodes: string;
stability: number; // 星级 1-5
};
}
// 套餐卡片组件
const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: boolean }) => {
return (
<div
className={`relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 sm:p-6 md:p-8 ${
isSelected
? 'border-[#0F2C53] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
: 'shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] hover:border-[#0F2C53]'
} `}
>
{/* 套餐名称 */}
<h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
{/* 价格区域 */}
<div className='mb-6 sm:mb-8'>
<div className='mb-2 flex items-baseline gap-2'>
<span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
¥{plan.originalPrice}
</span>
<span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
${plan.price}
</span>
<span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
/月
</span>
</div>
<p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
</div>
{/* 订阅按钮 */}
<button
className={`h-8 w-full rounded-full bg-[#0F2C53] text-xs font-medium leading-[1.9285714285714286em] text-white shadow-md transition-all duration-300 hover:bg-[#0A2C47] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]`}
>
订阅
</button>
{/* 功能列表 */}
<div className='mt-6 space-y-0 sm:mt-8'>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
可用流量：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.traffic}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
套餐时长：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.duration}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
在线IP：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.onlineIPs}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
在线连接数：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.connections}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
峰值带宽：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.bandwidth}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
可用节点：
</span>
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{plan.features.nodes}
</span>
</div>
<div className='flex items-start justify-between py-1'>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
网络稳定指数:
</span>
<div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
{Array.from({ length: plan.features.stability }, (_, i) => (
<span key={i} className='text-black'>
✭
</span>
))}
</div>
</div>
</div>
</div>
);
};
export interface OfferDialogRef {
show: () => void;
@ -11,26 +135,215 @@ export interface OfferDialogRef {
const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
const [open, setOpen] = useState(false);
// 使用 useQuery 来管理请求
const { data, isLoading, error, refetch } = useQuery({
queryKey: ['subscription'],
queryFn: async () => {
try {
const response = await getSubscription({ skipErrorHandler: true });
// 确保返回有效的数组，避免 undefined
const list = response.data?.data?.list || [];
return list as SubscriptionData[];
} catch (err) {
// 自定义错误处理
console.error('获取订阅数据失败:', err);
// 返回空数组而不是抛出错误，避免 queryFn 返回 undefined
return [] as SubscriptionData[];
}
},
enabled: false, // 初始不执行，手动控制
retry: 1, // 失败时重试1次
});
// 监听对话框打开状态，触发请求
useEffect(() => {
if (open) {
refetch(); // 对话框打开时重新获取数据
}
}, [open, refetch]);
useImperativeHandle(ref, () => ({
show: () => setOpen(true),
hide: () => setOpen(false),
}));
// 处理数据
const processedData =
data?.map((item) => ({
...item,
displayPrice: `¥${item.price}`,
displayDuration: item.duration === 'year' ? '年付' : '月付',
})) || [];
// 如果没有数据，使用模拟数据
const mockData: SubscriptionData[] = [
{
id: '1',
name: 'Basic Plan',
price: 8,
originalPrice: 10,
duration: 'year',
isPopular: false,
features: {
traffic: '140G',
duration: '30天',
onlineIPs: '3个',
connections: '300',
bandwidth: '200Mbps',
nodes: '15个',
stability: 3,
},
},
{
id: '2',
name: 'Standard Plan',
price: 24,
originalPrice: 30,
duration: 'year',
features: {
traffic: '160G',
duration: '30天',
onlineIPs: '3个',
connections: '300',
bandwidth: '300Mbps',
nodes: '15个',
stability: 4,
},
},
{
id: '3',
name: 'Pro Plan',
price: 48,
originalPrice: 60,
duration: 'year',
isPopular: false,
features: {
traffic: '180G',
duration: '30天',
onlineIPs: '3个',
connections: '300',
bandwidth: '500Mbps',
nodes: '29个',
stability: 5,
},
},
];
// 使用真实数据或模拟数据
const displayData = mockData;
// 按类型分组数据
const yearlyPlans = displayData.filter((item) => item.duration === 'year');
const monthlyPlans = displayData.filter((item) => item.duration === 'month');
console.log(processedData);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
className={
'rounded-0 !container h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
'rounded-0 !container h-full w-full px-8 py-8 md:h-auto md:w-[1000px] md:!rounded-[32px] md:px-12 md:py-12'
}
closeIcon={<Image src={CloseSvg} alt={'close'} />}
closeClassName={
'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
}
>
<DialogTitle className={'text-center text-5xl font-bold text-[#0F2C53]'}>
<DialogTitle className={'mb-4 text-center text-4xl font-bold text-[#0F2C53] md:text-5xl'}>
选择套餐
</DialogTitle>
<div className={'min-h-[524px]'}>套餐内容</div>
<div className={'min-h-[600px]'}>
<div className={'mb-8 text-center text-lg font-medium text-[#666666]'}>
选择最适合您的服务套餐
</div>
<div className={'mt-8'}>
<Tabs defaultValue='year' className={'text-center'}>
<TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
<TabsTrigger
className={
'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
}
value='year'
>
年付套餐
</TabsTrigger>
<TabsTrigger
className={
'rounded-full px-12 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white'
}
value='month'
>
月付套餐
</TabsTrigger>
</TabsList>
<TabsContent value='year'>
{isLoading ? (
<div className='py-12 text-center'>
<div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
<p className='mt-4 text-gray-600'>加载中...</p>
</div>
) : error ? (
<div className='py-12 text-center'>
<p className='text-lg text-red-500'>加载失败，请重试</p>
<button
onClick={() => refetch()}
className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
>
重新加载
</button>
</div>
) : yearlyPlans.length > 0 ? (
<div className='relative'>
{/* 卡片容器 */}
<div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
{yearlyPlans.map((plan, index) => (
<PlanCard key={plan.id} plan={plan} />
))}
</div>
</div>
) : (
<div className='py-12 text-center'>
<p className='text-lg text-gray-500'>暂无年付套餐</p>
</div>
)}
</TabsContent>
<TabsContent value='month'>
{isLoading ? (
<div className='py-12 text-center'>
<div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
<p className='mt-4 text-gray-600'>加载中...</p>
</div>
) : error ? (
<div className='py-12 text-center'>
<p className='text-lg text-red-500'>加载失败，请重试</p>
<button
onClick={() => refetch()}
className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
>
重新加载
</button>
</div>
) : monthlyPlans.length > 0 ? (
<div className='relative'>
{/* 连接线 */}
<div className='absolute left-1/2 top-0 h-8 w-0.5 -translate-x-1/2 transform bg-gradient-to-b from-[#0F2C53] to-transparent opacity-60'></div>
{/* 卡片容器 */}
<div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
{monthlyPlans.map((plan, index) => (
<PlanCard key={plan.id} plan={plan} />
))}
</div>
</div>
) : (
<div className='py-12 text-center'>
<p className='text-lg text-gray-500'>暂无月付套餐</p>
</div>
)}
</TabsContent>
</Tabs>
</div>
</div>
</DialogContent>
</Dialog>
);

97
apps/user/components/user-nav.tsx
View File

@ -1,61 +1,76 @@
'use client';
import { navs } from '@/config/navs';
import useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common';
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@workspace/ui/components/dropdown-menu';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { usePathname, useRouter } from 'next/navigation';
export function UserNav() {
export function UserNav({ from }: { from: string }) {
const t = useTranslations('menu');
const { user, setUser } = useGlobalStore();
const router = useRouter();
const pathname = usePathname();
if (user) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className='bg-background hover:bg-accent flex cursor-pointer items-center gap-2 rounded-full border px-2 py-1.5 transition-colors duration-200'>
<Avatar className='h-6 w-6'>
{from === 'profile' ? (
<div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
<Avatar className='h-[52px] w-[52px]'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className='object-cover'
/>
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[40px] font-bold'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className='flex flex-1 items-center justify-between'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</div>
<Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
</div>
) : (
<Avatar className='h-16 w-16 cursor-pointer'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
className='object-cover'
/>
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br font-medium'>
<AvatarFallback className='text-background bg-[#0F2C53] bg-gradient-to-br text-5xl font-bold'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<span className='max-w-[40px] truncate text-sm sm:max-w-[100px]'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</span>
<Icon icon='lucide:chevron-down' className='text-muted-foreground size-4' />
</div>
)}
</DropdownMenuTrigger>
<DropdownMenuContent forceMount align='end' className='w-64'>
<div className='flex items-center justify-start gap-2 p-2'>
<Avatar className='h-10 w-10'>
<DropdownMenuContent
forceMount
align='end'
side={from === 'profile' ? 'right' : ''}
className='w-64 gap-3 rounded-[42px] p-3'
>
<div className='mb-3 flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
<Avatar className='h-[52px] w-[52px]'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className='object-cover'
/>
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br'>
<AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-2xl font-bold'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className='flex flex-col space-y-0.5'>
<p className='text-sm font-medium leading-none'>
<p className='text-xl font-medium leading-none'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</p>
<p className='text-muted-foreground text-xs'>
@ -63,36 +78,34 @@ export function UserNav() {
</p>
</div>
</div>
<DropdownMenuSeparator />
{navs.map((nav) => (
<DropdownMenuGroup key={nav.title}>
{(nav.items || [nav]).map((item) => (
<DropdownMenuItem
key={item.title}
onClick={() => {
router.push(`${item.url}`);
}}
className='flex cursor-pointer items-center gap-2 py-2'
>
<Icon className='text-muted-foreground size-4 flex-none' icon={item.icon!} />
<span className='flex-grow truncate'>{t(item.title)}</span>
<Icon
icon='lucide:chevron-right'
className='text-muted-foreground size-4 opacity-50'
/>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
{[
{
title: 'profile',
url: '/profile',
icon: 'uil:dashboard',
},
].map((item) => (
<DropdownMenuItem
key={item.title}
data-active={pathname === item.url}
onClick={() => {
if (pathname === item.url) return;
router.push(`${item.url}`);
}}
className='mb-3 flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white'
>
<Icon className='!size-6 flex-none' icon={item.icon!} />
<span className='flex-grow truncate'>{t(item.title)}</span>
</DropdownMenuItem>
))}
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
Logout();
setUser();
}}
className='text-destructive focus:text-destructive flex cursor-pointer items-center gap-2 py-2'
className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white'
>
<Icon className='size-4 flex-none' icon='uil:exit' />
<Icon className='!size-6 flex-none' icon='uil:exit' />
<span className='flex-grow'>{t('logout')}</span>
</DropdownMenuItem>
</DropdownMenuContent>

14
apps/user/config/navs.ts
View File

@ -4,16 +4,6 @@ export const navs = [
url: '/dashboard',
icon: 'uil:dashboard',
},
{
title: 'personal',
items: [
{
title: 'profile',
url: '/profile',
icon: 'uil:user',
},
],
},
{
title: 'server',
items: [
@ -52,11 +42,11 @@ export const navs = [
icon: 'uil:book-alt',
title: 'document',
},
{
/*{
url: '/announcement',
icon: 'uil:megaphone',
title: 'announcement',
},
},*/
{
url: '/ticket',
icon: 'uil:message',

10
apps/user/locales/zh-CN/menu.json
View File

@ -1,8 +1,8 @@
{
"affiliate": "我的邀请",
"affiliate": "邀请返利",
"announcement": "公告列表",
"dashboard": "主页",
"document": "使用文档",
"dashboard": "账户概览",
"document": "新手教程",
"finance": "财务",
"help": "帮助",
"logout": "退出登录",
@ -11,7 +11,7 @@
"personal": "个人",
"profile": "个人中心",
"server": "服务",
"subscribe": "购买订阅",
"subscribe": "套餐购买",
"ticket": "我的工单",
"wallet": "财务中心"
"wallet": "钱包管理"
}

0
apps/user/components/Header/image.png → apps/user/public/image.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB