mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-07 01:56:53 +00:00
feat(ui): refine default frontend layouts
This commit is contained in:
@@ -182,23 +182,32 @@ export function SidebarModulesCard() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className='flex items-center gap-2'>
|
||||
<LayoutDashboard className='h-4 w-4' />
|
||||
{t('Sidebar Personal Settings')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('Customize sidebar display content')}
|
||||
</CardDescription>
|
||||
<Card className='overflow-hidden'>
|
||||
<CardHeader className='border-b'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
|
||||
<LayoutDashboard className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='min-w-0'>
|
||||
<CardTitle className='text-xl tracking-tight'>
|
||||
{t('Sidebar Personal Settings')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('Customize sidebar display content')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-6'>
|
||||
<CardContent className='space-y-5 pt-6'>
|
||||
{sectionDefs.map((section) => {
|
||||
const sectionEnabled = config[section.key]?.enabled !== false
|
||||
return (
|
||||
<div key={section.key} className='space-y-3'>
|
||||
<div className='bg-muted/50 flex items-center justify-between rounded-lg border p-3'>
|
||||
<div>
|
||||
<div
|
||||
key={section.key}
|
||||
className='bg-background/60 rounded-xl border p-3'
|
||||
>
|
||||
<div className='flex items-start justify-between gap-3'>
|
||||
<div className='min-w-0'>
|
||||
<p className='text-sm font-medium'>{section.title}</p>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{section.description}
|
||||
@@ -209,11 +218,11 @@ export function SidebarModulesCard() {
|
||||
onCheckedChange={(v) => toggleSection(section.key, v)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-2 gap-2 sm:grid-cols-3'>
|
||||
<div className='mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-1'>
|
||||
{section.modules.map((mod) => (
|
||||
<div
|
||||
key={mod.key}
|
||||
className={`flex items-center justify-between rounded-lg border p-3 transition-opacity ${
|
||||
className={`flex min-h-16 items-center justify-between rounded-lg border p-3 transition-opacity ${
|
||||
sectionEnabled ? '' : 'opacity-50'
|
||||
}`}
|
||||
>
|
||||
@@ -239,7 +248,7 @@ export function SidebarModulesCard() {
|
||||
)
|
||||
})}
|
||||
|
||||
<div className='flex justify-end gap-2 border-t pt-4'>
|
||||
<div className='flex flex-col-reverse gap-2 border-t pt-4 sm:flex-row sm:justify-end'>
|
||||
<Button variant='outline' onClick={handleReset}>
|
||||
{t('Reset to Default')}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user