Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
new-api
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
d751fc73
authored
May 20, 2025
by
Apple\Apple
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
✨
feat(ui): Add control for the HeaderBar menu in the console routing under the Sidebar
parent
9934c978
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
25 additions
and
5 deletions
+25
-5
web/src/components/HeaderBar.js
+25
-5
No files found.
web/src/components/HeaderBar.js
View file @
d751fc73
import
React
,
{
useContext
,
useEffect
,
useState
}
from
'react'
;
import
React
,
{
useContext
,
useEffect
,
useState
}
from
'react'
;
import
{
Link
,
useNavigate
}
from
'react-router-dom'
;
import
{
Link
,
useNavigate
,
useLocation
}
from
'react-router-dom'
;
import
{
UserContext
}
from
'../context/User'
;
import
{
UserContext
}
from
'../context/User'
;
import
{
useSetTheme
,
useTheme
}
from
'../context/Theme'
;
import
{
useSetTheme
,
useTheme
}
from
'../context/Theme'
;
import
{
useTranslation
}
from
'react-i18next'
;
import
{
useTranslation
}
from
'react-i18next'
;
...
@@ -40,6 +40,7 @@ const HeaderBar = () => {
...
@@ -40,6 +40,7 @@ const HeaderBar = () => {
let
navigate
=
useNavigate
();
let
navigate
=
useNavigate
();
const
[
currentLang
,
setCurrentLang
]
=
useState
(
i18n
.
language
);
const
[
currentLang
,
setCurrentLang
]
=
useState
(
i18n
.
language
);
const
[
mobileMenuOpen
,
setMobileMenuOpen
]
=
useState
(
false
);
const
[
mobileMenuOpen
,
setMobileMenuOpen
]
=
useState
(
false
);
const
location
=
useLocation
();
const
systemName
=
getSystemName
();
const
systemName
=
getSystemName
();
const
logo
=
getLogo
();
const
logo
=
getLogo
();
...
@@ -337,6 +338,9 @@ const HeaderBar = () => {
...
@@ -337,6 +338,9 @@ const HeaderBar = () => {
}
}
};
};
// 检查当前路由是否以/console开头
const
isConsoleRoute
=
location
.
pathname
.
startsWith
(
'/console'
);
return
(
return
(
<
header
className
=
"text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg"
>
<
header
className
=
"text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg"
>
<
div
className
=
"w-full px-4"
>
<
div
className
=
"w-full px-4"
>
...
@@ -344,9 +348,25 @@ const HeaderBar = () => {
...
@@ -344,9 +348,25 @@ const HeaderBar = () => {
<
div
className
=
"flex items-center"
>
<
div
className
=
"flex items-center"
>
<
div
className
=
"md:hidden"
>
<
div
className
=
"md:hidden"
>
<
Button
<
Button
icon
=
{
mobileMenuOpen
?
<
IconClose
className
=
"text-lg"
/>
:
<
IconMenu
className
=
"text-lg"
/>
}
icon
=
{
aria
-
label
=
{
mobileMenuOpen
?
t
(
'关闭菜单'
)
:
t
(
'打开菜单'
)}
isConsoleRoute
onClick
=
{()
=>
setMobileMenuOpen
(
!
mobileMenuOpen
)}
?
(
styleState
.
showSider
?
<
IconClose
className
=
"text-lg"
/>
:
<
IconMenu
className
=
"text-lg"
/>
)
:
(
mobileMenuOpen
?
<
IconClose
className
=
"text-lg"
/>
:
<
IconMenu
className
=
"text-lg"
/>
)
}
aria
-
label
=
{
isConsoleRoute
?
(
styleState
.
showSider
?
t
(
'关闭侧边栏'
)
:
t
(
'打开侧边栏'
))
:
(
mobileMenuOpen
?
t
(
'关闭菜单'
)
:
t
(
'打开菜单'
))
}
onClick
=
{()
=>
{
if
(
isConsoleRoute
&&
styleState
.
isMobile
)
{
// 控制侧边栏的显示/隐藏
styleDispatch
({
type
:
'TOGGLE_SIDER'
});
}
else
{
// 控制HeaderBar自己的移动菜单
setMobileMenuOpen
(
!
mobileMenuOpen
);
}
}}
theme
=
"borderless"
theme
=
"borderless"
type
=
"tertiary"
type
=
"tertiary"
className
=
"!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700"
className
=
"!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700"
...
@@ -472,7 +492,7 @@ const HeaderBar = () => {
...
@@ -472,7 +492,7 @@ const HeaderBar = () => {
absolute top-16 left-0 right-0 bg-semi-color-bg-0
absolute top-16 left-0 right-0 bg-semi-color-bg-0
shadow-lg p-3
shadow-lg p-3
transform transition-all duration-300 ease-in-out
transform transition-all duration-300 ease-in-out
${
mobileMenuOpen
?
'translate-y-0 opacity-100 visible'
:
'-translate-y-4 opacity-0 invisible'
}
${
(
!
isConsoleRoute
&&
mobileMenuOpen
)
?
'translate-y-0 opacity-100 visible'
:
'-translate-y-4 opacity-0 invisible'
}
`
}
`
}
>
>
<
nav
className
=
"flex flex-col gap-1"
>
<
nav
className
=
"flex flex-col gap-1"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment