mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2026-02-04 06:31:13 +00:00
Refactor extension page layout and tab handling
Improves the layout of the extension page by adjusting container heights and restructuring the header to better support responsive design. Moves the tab navigation to the header and displays only the selected extension page in the main content area, simplifying the rendering logic and improving user experience.
This commit is contained in:
手瓜一十雪
parent
3b7ca1a08f
commit
71f8504849
@ -89,75 +89,74 @@ export default function ExtensionPage () {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<title>扩展页面 - NapCat WebUI</title>
|
<title>扩展页面 - NapCat WebUI</title>
|
||||||
<div className='p-2 md:p-4 relative h-full flex flex-col'>
|
<div className='p-2 md:p-4 relative h-[calc(100vh-6rem)] md:h-[calc(100vh-4rem)] flex flex-col'>
|
||||||
<PageLoading loading={loading} />
|
<PageLoading loading={loading} />
|
||||||
|
|
||||||
<div className='flex mb-4 items-center gap-4'>
|
<div className='flex mb-4 items-center justify-between gap-4 flex-wrap'>
|
||||||
<div className='flex items-center gap-2 text-default-600'>
|
<div className='flex items-center gap-4'>
|
||||||
<MdExtension size={24} />
|
<div className='flex items-center gap-2 text-default-600'>
|
||||||
<span className='text-lg font-medium'>插件扩展页面</span>
|
<MdExtension size={24} />
|
||||||
|
<span className='text-lg font-medium'>插件扩展页面</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
isIconOnly
|
||||||
|
className='bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md'
|
||||||
|
radius='full'
|
||||||
|
onPress={refresh}
|
||||||
|
>
|
||||||
|
<IoMdRefresh size={24} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
{extensionPages.length > 0 && (
|
||||||
isIconOnly
|
<Tabs
|
||||||
className='bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md'
|
aria-label='Extension Pages'
|
||||||
radius='full'
|
className='max-w-full'
|
||||||
onPress={refresh}
|
selectedKey={selectedTab}
|
||||||
>
|
onSelectionChange={(key) => setSelectedTab(key as string)}
|
||||||
<IoMdRefresh size={24} />
|
classNames={{
|
||||||
</Button>
|
tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
|
||||||
|
cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
|
||||||
|
panel: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<Tab
|
||||||
|
key={tab.key}
|
||||||
|
title={
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
{tab.icon && <span>{tab.icon}</span>}
|
||||||
|
<span>{tab.title}</span>
|
||||||
|
<span className='text-xs text-default-400'>({tab.pluginName})</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{extensionPages.length === 0 && !loading
|
{extensionPages.length === 0 && !loading ? (
|
||||||
? (
|
<div className='flex-1 flex flex-col items-center justify-center text-default-400'>
|
||||||
<div className='flex-1 flex flex-col items-center justify-center text-default-400'>
|
<MdExtension size={64} className='mb-4 opacity-50' />
|
||||||
<MdExtension size={64} className='mb-4 opacity-50' />
|
<p className='text-lg'>暂无插件扩展页面</p>
|
||||||
<p className='text-lg'>暂无插件扩展页面</p>
|
<p className='text-sm mt-2'>插件可以通过注册页面来扩展 WebUI 功能</p>
|
||||||
<p className='text-sm mt-2'>插件可以通过注册页面来扩展 WebUI 功能</p>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
)
|
<div className='flex-1 min-h-0 bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden relative'>
|
||||||
: (
|
{iframeLoading && (
|
||||||
<div className='flex-1 flex flex-col min-h-0'>
|
<div className='absolute inset-0 flex items-center justify-center bg-default-100/50 z-10'>
|
||||||
<Tabs
|
<Spinner size='lg' />
|
||||||
aria-label='Extension Pages'
|
</div>
|
||||||
className='max-w-full'
|
)}
|
||||||
selectedKey={selectedTab}
|
<iframe
|
||||||
onSelectionChange={(key) => setSelectedTab(key as string)}
|
src={currentPageUrl}
|
||||||
classNames={{
|
className='w-full h-full border-0'
|
||||||
tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
|
onLoad={handleIframeLoad}
|
||||||
cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
|
title='extension-page'
|
||||||
panel: 'flex-1 min-h-0 p-0',
|
sandbox='allow-scripts allow-same-origin allow-forms allow-popups'
|
||||||
}}
|
/>
|
||||||
>
|
</div>
|
||||||
{tabs.map((tab) => (
|
)}
|
||||||
<Tab
|
|
||||||
key={tab.key}
|
|
||||||
title={
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
{tab.icon && <span>{tab.icon}</span>}
|
|
||||||
<span>{tab.title}</span>
|
|
||||||
<span className='text-xs text-default-400'>({tab.pluginName})</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className='relative w-full h-[calc(100vh-220px)] bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden'>
|
|
||||||
{iframeLoading && (
|
|
||||||
<div className='absolute inset-0 flex items-center justify-center bg-default-100/50 z-10'>
|
|
||||||
<Spinner size='lg' />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<iframe
|
|
||||||
src={currentPageUrl}
|
|
||||||
className='w-full h-full border-0'
|
|
||||||
onLoad={handleIframeLoad}
|
|
||||||
title={tab.title}
|
|
||||||
sandbox='allow-scripts allow-same-origin allow-forms allow-popups'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tab>
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user