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

feat: 完成代码编写

Browse Source
This commit is contained in:
speakeloudest
2025-08-08 03:03:59 -07:00
parent 19fe24660e
commit aead2ff68f
26 changed files with 793 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/(content)/(user)/document/page.tsx
+7 -6
View File
@@ -5,7 +5,6 @@ import { getTutorialList } from '@/utils/tutorial';
import { useQuery } from '@tanstack/react-query';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { useLocale, useTranslations } from 'next-intl';
import { DocumentButton } from './document-button';
import { TutorialButton } from './tutorial-button';
export default function Page() {
@@ -35,7 +34,7 @@ export default function Page() {
return (
<div className='max-w-[532px] space-y-4'>
{DocumentList?.length > 0 && (
{/*{DocumentList?.length > 0 && (
<>
<h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
<Tabs defaultValue='all'>
@@ -59,14 +58,16 @@ export default function Page() {
))}
</Tabs>
</>
)}
)}*/}
{TutorialList && TutorialList?.length > 0 && (
<div className='rounded-[46px] bg-[#EAEAEA] px-[34px] py-[28px]'>
<div className='rounded-[46px] bg-[#EAEAEA] px-[23px] py-[19px] sm:px-[34px] sm:py-[28px]'>
<div className='font-semibold text-[#666]'>新手教程</div>
<div className={'mb-2.5 text-sm text-[#666]'}>选择对应操作系统，查看对应软件配置教程</div>
<div className={'mb-2.5 text-xs text-[#666] sm:text-sm'}>
选择对应操作系统，查看对应软件配置教程
</div>
<Tabs defaultValue={TutorialList?.[0]?.title}>
<TabsList className='h-full flex-wrap gap-1 bg-transparent'>
<TabsList className='h-full flex-wrap justify-start gap-1 bg-transparent'>
{TutorialList?.map((tutorial) => (
<TabsTrigger
key={tutorial.title}
apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx
+5 -5
View File
@@ -121,11 +121,11 @@ export function TutorialButton({ items }: { items: Item[] }) {
layoutId={`card-${item.title}-${id}`}
key={`card-${item.title}-${id}`}
onClick={() => setActive(item)}
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-4'
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-1 sm:p-4'
>
<div className='flex flex-row items-center gap-4'>
<motion.div layoutId={`image-${item.title}-${id}`}>
<Avatar className='size-12'>
<Avatar className='size-7 sm:size-12'>
<AvatarImage alt={item.title ?? ''} src={item.icon ?? ''} />
<AvatarFallback className='bg-primary/80 text-white'>
{item.title.split('')[0]}
@@ -135,14 +135,14 @@ export function TutorialButton({ items }: { items: Item[] }) {
<div className=''>
<motion.h3
layoutId={`title-${item.title}-${id}`}
className='font-medium text-[#225BA9]'
className='text-[10px] font-medium text-[#225BA9] sm:text-base'
>
{item.title}
</motion.h3>
{item.updated_at && (
<motion.p
layoutId={`description-${item.title}-${id}`}
className='text-center font-bold text-[#848484] md:text-left'
className='text-left text-[10px] font-bold text-[#848484] sm:text-base'
>
{formatDate(new Date(item.updated_at), false)}
</motion.p>
@@ -155,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
buttonVariants({
variant: 'secondary',
}),
'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold text-white hover:bg-[#225BA9] hover:text-white',
'rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xs font-bold text-white hover:bg-[#225BA9] hover:text-white sm:min-w-[150px] sm:text-xl',
)}
>
{t('read')}