HI-VPN/ppanel-web
4
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix: Update platform handling in Content component to ensure available platforms are correctly filtered and displayed

Browse Source
This commit is contained in:
web 2025-09-17 02:55:33 -07:00
parent bd67ece479
commit 1dde7088bc
1 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
apps/user/app/(main)/(user)/dashboard/content.tsx
View File

@ -37,7 +37,7 @@ import { useTranslations } from 'next-intl';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { QRCodeCanvas } from 'qrcode.react'; import { QRCodeCanvas } from 'qrcode.react';
import { useState } from 'react'; import React, { useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard'; import CopyToClipboard from 'react-copy-to-clipboard';
import { toast } from 'sonner'; import { toast } from 'sonner';
import Subscribe from '../subscribe/page'; import Subscribe from '../subscribe/page';
@ -75,9 +75,39 @@ export default function Content() {
return data.data?.list || []; return data.data?.list || [];
}, },
}); });
const [platform, setPlatform] = useState<keyof API.DownloadLink>(
getPlatform() === 'macos' ? 'mac' : (getPlatform() as keyof API.DownloadLink), const availablePlatforms = React.useMemo(() => {
); if (!applications || applications.length === 0) return platforms;
const platformsSet = new Set<keyof API.DownloadLink>();
applications.forEach((app) => {
if (app.download_link) {
platforms.forEach((platform) => {
if (app.download_link?.[platform]) {
platformsSet.add(platform);
}
});
}
});
return platforms.filter((platform) => platformsSet.has(platform));
}, [applications]);
const [platform, setPlatform] = useState<keyof API.DownloadLink>(() => {
const detectedPlatform =
getPlatform() === 'macos' ? 'mac' : (getPlatform() as keyof API.DownloadLink);
return detectedPlatform;
});
React.useEffect(() => {
if (availablePlatforms.length > 0 && !availablePlatforms.includes(platform)) {
const firstAvailablePlatform = availablePlatforms[0];
if (firstAvailablePlatform) {
setPlatform(firstAvailablePlatform);
}
}
}, [availablePlatforms, platform]);
const { data } = useQuery({ const { data } = useQuery({
queryKey: ['getStat'], queryKey: ['getStat'],
@ -122,31 +152,33 @@ export default function Content() {
</div> </div>
</div> </div>
<div className='flex flex-wrap justify-between gap-4'> <div className='flex flex-wrap justify-between gap-4'>
<Tabs {availablePlatforms.length > 0 && (
value={platform} <Tabs
onValueChange={(value) => setPlatform(value as keyof API.DownloadLink)} value={platform}
className='w-full max-w-full md:w-auto' onValueChange={(value) => setPlatform(value as keyof API.DownloadLink)}
> className='w-full max-w-full md:w-auto'
<TabsList className='flex *:flex-auto'> >
{platforms.map((item) => ( <TabsList className='flex *:flex-auto'>
<TabsTrigger value={item} key={item} className='px-1 lg:px-3'> {availablePlatforms.map((item) => (
<Icon <TabsTrigger value={item} key={item} className='px-1 lg:px-3'>
icon={`${ <Icon
{ icon={`${
windows: 'mdi:microsoft-windows', {
mac: 'uil:apple', windows: 'mdi:microsoft-windows',
linux: 'uil:linux', mac: 'uil:apple',
ios: 'simple-icons:ios', linux: 'uil:linux',
android: 'uil:android', ios: 'simple-icons:ios',
harmony: 'simple-icons:harmonyos', android: 'uil:android',
}[item] harmony: 'simple-icons:harmonyos',
}`} }[item]
className='size-5' }`}
/> className='size-5'
</TabsTrigger> />
))} </TabsTrigger>
</TabsList> ))}
</Tabs> </TabsList>
</Tabs>
)}
{data?.protocol && data?.protocol.length > 1 && ( {data?.protocol && data?.protocol.length > 1 && (
<Tabs <Tabs
value={protocol} value={protocol}
@ -325,9 +357,8 @@ export default function Content() {
<div className='grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'> <div className='grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'>
{applications {applications
?.filter((application) => { ?.filter((application) => {
if (!application.download_link && !application.scheme) return false; return !!(
return ( application.download_link?.[platform] && application.scheme
!!application.download_link?.[platform] || !!application.scheme
); );
}) })
.map((application) => { .map((application) => {