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

feat: Update Navbar and HistorySidebar layout for improved navigation and styling

Browse Source
This commit is contained in:
bdim404
2026-02-06 14:28:13 +08:00
parent d0dcd655fd
commit 9966652542
3 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
qwen3-tts-frontend/src/components/HistorySidebar.tsx
View File

@@ -1,5 +1,6 @@
import { useRef, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { useHistoryContext } from '@/contexts/HistoryContext'
import { HistoryItem } from '@/components/HistoryItem'
import { ScrollArea } from '@/components/ui/scroll-area'
@@ -36,7 +37,13 @@ function HistorySidebarContent() {
return (
<div className="flex flex-col h-full">
<div className="px-4 pt-4 pb-6">
<div className="px-4 pt-4 pb-3">
<Link to="/" className="flex items-center gap-2 mb-6">
<img src="/qwen.svg" alt="Qwen" className="h-6 w-6" />
<h1 className="text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity">
Qwen3-TTS-WebUI
</h1>
</Link>
<h2 className="text-lg font-semibold">{t('historyTitle')}</h2>
<p className="text-sm text-muted-foreground">{t('historyCount', { count: jobs.length })}</p>
</div>

87
qwen3-tts-frontend/src/components/Navbar.tsx
View File

@@ -22,69 +22,58 @@ export function Navbar({ onToggleSidebar }: NavbarProps) {
const { t, i18n } = useTranslation(['nav', 'constants'])
return (
<nav className="h-16 border-b bg-background flex items-center px-4 gap-4">
<nav className="h-16 bg-background flex items-center justify-end px-4 gap-2">
{onToggleSidebar && (
<Button
variant="ghost"
size="icon"
onClick={onToggleSidebar}
className="lg:hidden"
className="lg:hidden mr-auto"
>
<Menu className="h-5 w-5" />
</Button>
)}
<div className="flex-1">
<Link to="/" className="flex items-center gap-2">
<img src="/qwen.svg" alt="Qwen" className="h-6 w-6" />
<h1 className="hidden md:block text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity">
Qwen3-TTS-WebUI
</h1>
</Link>
</div>
<div className="flex items-center gap-2">
{user?.is_superuser && (
<Link to="/users">
<Button variant="ghost" size="icon">
<Users className="h-5 w-5" />
</Button>
</Link>
)}
<Link to="/settings">
{user?.is_superuser && (
<Link to="/users">
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
<Users className="h-5 w-5" />
</Button>
</Link>
<ThemeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Globe className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => changeLanguage('zh-CN')}>
{t('constants:uiLanguages.zh-CN')} {i18n.language === 'zh-CN' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('zh-TW')}>
{t('constants:uiLanguages.zh-TW')} {i18n.language === 'zh-TW' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('en-US')}>
{t('constants:uiLanguages.en-US')} {i18n.language === 'en-US' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('ja-JP')}>
{t('constants:uiLanguages.ja-JP')} {i18n.language === 'ja-JP' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('ko-KR')}>
{t('constants:uiLanguages.ko-KR')} {i18n.language === 'ko-KR' && '✓'}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button variant="ghost" size="icon" onClick={logout}>
<LogOut className="h-5 w-5" />
)}
<Link to="/settings">
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
</div>
</Link>
<ThemeToggle />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Globe className="h-5 w-5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => changeLanguage('zh-CN')}>
{t('constants:uiLanguages.zh-CN')} {i18n.language === 'zh-CN' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('zh-TW')}>
{t('constants:uiLanguages.zh-TW')} {i18n.language === 'zh-TW' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('en-US')}>
{t('constants:uiLanguages.en-US')} {i18n.language === 'en-US' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('ja-JP')}>
{t('constants:uiLanguages.ja-JP')} {i18n.language === 'ja-JP' && '✓'}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => changeLanguage('ko-KR')}>
{t('constants:uiLanguages.ko-KR')} {i18n.language === 'ko-KR' && '✓'}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button variant="ghost" size="icon" onClick={logout}>
<LogOut className="h-5 w-5" />
</Button>
</nav>
)
}

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

@@ -33,19 +33,19 @@ function Home() {
return (
<div className="h-screen overflow-hidden flex flex-col bg-background">
<div className="h-screen overflow-hidden flex bg-background">
<OnboardingDialog
open={showOnboarding}
onComplete={() => setShowOnboarding(false)}
/>
<Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
<HistorySidebar
open={sidebarOpen}
onOpenChange={setSidebarOpen}
/>
<div className="flex-1 flex overflow-hidden">
<HistorySidebar
open={sidebarOpen}
onOpenChange={setSidebarOpen}
/>
<div className="flex-1 flex flex-col overflow-hidden">
<Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
<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]">