bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Simplify AudioPlayer component by removing mobile detection logic and streamline download handling; enhance Home layout for better responsiveness

Browse Source
This commit is contained in:
bdim404
2026-02-05 23:30:07 +08:00
parent d01fbe8171
commit f9eaf88807
2 changed files with 45 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
qwen3-tts-frontend/src/pages/Home.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useRef, lazy, Suspense, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Navbar } from '@/components/Navbar'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Card, CardContent } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { User, Palette, Copy } from 'lucide-react'
import type { CustomVoiceFormHandle } from '@/components/tts/CustomVoiceForm'
@@ -47,49 +47,47 @@ function Home() {
onOpenChange={setSidebarOpen}
/>
<main className="flex-1 overflow-y-auto container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">
<Card>
<CardHeader>
<Tabs value={currentTab} onValueChange={setCurrentTab}>
<TabsList className="grid w-full grid-cols-3 h-9">
<TabsTrigger value="custom-voice" variant="default">
<User className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('customVoiceTab')}</span>
</TabsTrigger>
<TabsTrigger value="voice-design" variant="secondary">
<Palette className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('voiceDesignTab')}</span>
</TabsTrigger>
<TabsTrigger value="voice-clone" variant="outline">
<Copy className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('voiceCloneTab')}</span>
</TabsTrigger>
</TabsList>
</Tabs>
</CardHeader>
<main className="flex-1 overflow-y-auto flex items-start md:items-center justify-center">
<div className="w-full container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">
<Tabs value={currentTab} onValueChange={setCurrentTab}>
<TabsList className="grid w-full grid-cols-3 h-9 mb-3">
<TabsTrigger value="custom-voice" variant="default">
<User className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('customVoiceTab')}</span>
</TabsTrigger>
<TabsTrigger value="voice-design" variant="secondary">
<Palette className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('voiceDesignTab')}</span>
</TabsTrigger>
<TabsTrigger value="voice-clone" variant="outline">
<Copy className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">{t('voiceCloneTab')}</span>
</TabsTrigger>
</TabsList>
<CardContent className="pt-0 px-3 md:px-6">
<Tabs value={currentTab}>
<TabsContent value="custom-voice" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<CustomVoiceForm ref={customVoiceFormRef} />
</Suspense>
</TabsContent>
<Card>
<CardContent className="pt-6 px-3 md:px-6 pb-6">
<TabsContent value="custom-voice" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<CustomVoiceForm ref={customVoiceFormRef} />
</Suspense>
</TabsContent>
<TabsContent value="voice-design" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<VoiceDesignForm ref={voiceDesignFormRef} />
</Suspense>
</TabsContent>
<TabsContent value="voice-design" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<VoiceDesignForm ref={voiceDesignFormRef} />
</Suspense>
</TabsContent>
<TabsContent value="voice-clone" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<VoiceCloneForm />
</Suspense>
</TabsContent>
</Tabs>
</CardContent>
</Card>
<TabsContent value="voice-clone" className="mt-0">
<Suspense fallback={<FormSkeleton />}>
<VoiceCloneForm />
</Suspense>
</TabsContent>
</CardContent>
</Card>
</Tabs>
</div>
</main>
</div>
</div>