perf(video): perf

This commit is contained in:
2026-03-09 10:01:31 +08:00
parent 2402d685d7
commit 3b118e3304
12 changed files with 1284 additions and 328 deletions

View File

@@ -8,6 +8,7 @@ import {
Flex,
Menu,
NavLink,
ScrollArea,
Space,
Stack,
Tooltip,
@@ -227,101 +228,103 @@ export default function AppLayout({
</AppShell.Header>
<AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
<Stack justify="start" gap={4} flex={1}>
{activeHeaderMenu?.items?.map((item) => {
if (item.items?.length) {
if (matches) {
if (isOpen) {
return (
<LinksGroup
key={item.url}
item={item}
toggleMobile={toggleMobile}
routerUrl={activeHeaderMenu.url}
initiallyOpened={true}
/>
)
<ScrollArea h="calc(100vh - 95px)">
{activeHeaderMenu?.items?.map((item) => {
if (item.items?.length) {
if (matches) {
if (isOpen) {
return (
<LinksGroup
key={item.url}
item={item}
toggleMobile={toggleMobile}
routerUrl={activeHeaderMenu.url}
initiallyOpened={true}
/>
)
} else {
return (
<Menu
width={"auto"}
key={item.url + "desktop"}
position="right-start"
trigger="hover"
openDelay={100}
closeDelay={200}>
<Menu.Target>
<NavLink
noWrap={true}
leftSection={
item.icon && (
<ClientIcon
icon={item.icon}
style={{ width: "1rem", height: "1rem" }}
/>
)
}
label={item.title}
/>
</Menu.Target>
<Menu.Dropdown>
{item.items?.map((sub) =>
renderMenuItem(
sub,
`${activeHeaderMenu.url}/${item.url}`
)
)}
</Menu.Dropdown>
</Menu>
)
}
} else {
return (
<Menu
width={"auto"}
key={item.url + "desktop"}
position="right-start"
trigger="hover"
openDelay={100}
closeDelay={200}>
<Menu.Target>
<NavLink
noWrap={true}
leftSection={
item.icon && (
<ClientIcon
icon={item.icon}
style={{ width: "1rem", height: "1rem" }}
/>
)
}
label={item.title}
/>
</Menu.Target>
<Menu.Dropdown>
{item.items?.map((sub) =>
renderMenuItem(
sub,
`${activeHeaderMenu.url}/${item.url}`
)
)}
</Menu.Dropdown>
</Menu>
<Box key={item.url + "mobile"} hiddenFrom="sm">
<LinksGroup
item={item}
toggleMobile={toggleMobile}
routerUrl={activeHeaderMenu.url}
initiallyOpened={true}
/>
</Box>
)
}
} else {
return (
<Box key={item.url + "mobile"} hiddenFrom="sm">
<LinksGroup
item={item}
toggleMobile={toggleMobile}
routerUrl={activeHeaderMenu.url}
initiallyOpened={true}
<Tooltip
key={item.url}
events={{
hover: !isOpen && !mobileOpened,
focus: false,
touch: false,
}}
label={item.title || ""}
position="right"
openDelay={100}
closeDelay={200}
transitionProps={{ duration: 100 }}>
<NavLink
// href={`/${activeHeaderMenu.url}/${item.url}`}
onClick={() => {
toggleMobile()
router.push(`/${activeHeaderMenu.url}/${item.url}`)
}}
noWrap={true}
active={pathname.startsWith(
`/${activeHeaderMenu.url}/${item.url}`
)}
leftSection={
<ClientIcon
icon={item.icon}
style={{ width: "1rem", height: "1rem" }}
/>
}
label={item.title}
/>
</Box>
</Tooltip>
)
}
} else {
return (
<Tooltip
key={item.url}
events={{
hover: !isOpen && !mobileOpened,
focus: false,
touch: false,
}}
label={item.title || ""}
position="right"
openDelay={100}
closeDelay={200}
transitionProps={{ duration: 100 }}>
<NavLink
// href={`/${activeHeaderMenu.url}/${item.url}`}
onClick={() => {
toggleMobile()
router.push(`/${activeHeaderMenu.url}/${item.url}`)
}}
noWrap={true}
active={pathname.startsWith(
`/${activeHeaderMenu.url}/${item.url}`
)}
leftSection={
<ClientIcon
icon={item.icon}
style={{ width: "1rem", height: "1rem" }}
/>
}
label={item.title}
/>
</Tooltip>
)
}
})}
})}
</ScrollArea>
</Stack>
<Stack justify="center" gap={0}>
<Flex