pref: 代码优化
This commit is contained in:
@@ -51,6 +51,8 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
|
|||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navbarBg = useColorModeValue('gray.50', 'gray.700');
|
const navbarBg = useColorModeValue('gray.50', 'gray.700');
|
||||||
const itemHoverBg = useColorModeValue('white', 'gray.600');
|
const itemHoverBg = useColorModeValue('white', 'gray.600');
|
||||||
|
// ⚠️ 必须在组件顶层调用所有Hooks(不能在JSX中调用)
|
||||||
|
const borderColorValue = useColorModeValue('gray.200', 'gray.600');
|
||||||
|
|
||||||
// 定义二级导航结构
|
// 定义二级导航结构
|
||||||
const secondaryNavConfig = {
|
const secondaryNavConfig = {
|
||||||
@@ -108,7 +110,7 @@ const SecondaryNav = ({ showCompletenessAlert }) => {
|
|||||||
<Box
|
<Box
|
||||||
bg={navbarBg}
|
bg={navbarBg}
|
||||||
borderBottom="1px"
|
borderBottom="1px"
|
||||||
borderColor={useColorModeValue('gray.200', 'gray.600')}
|
borderColor={borderColorValue}
|
||||||
py={2}
|
py={2}
|
||||||
position="sticky"
|
position="sticky"
|
||||||
top={showCompletenessAlert ? "120px" : "60px"}
|
top={showCompletenessAlert ? "120px" : "60px"}
|
||||||
@@ -301,6 +303,9 @@ const NavItems = ({ isAuthenticated, user }) => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
|
// ⚠️ 必须在组件顶层调用所有Hooks(不能在JSX中调用)
|
||||||
|
const contactTextColor = useColorModeValue('gray.500', 'gray.300');
|
||||||
|
|
||||||
// 辅助函数:判断导航项是否激活
|
// 辅助函数:判断导航项是否激活
|
||||||
const isActive = useCallback((paths) => {
|
const isActive = useCallback((paths) => {
|
||||||
return paths.some(path => location.pathname.includes(path));
|
return paths.some(path => location.pathname.includes(path));
|
||||||
@@ -452,7 +457,7 @@ const NavItems = ({ isAuthenticated, user }) => {
|
|||||||
联系我们
|
联系我们
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
<MenuList minW="260px" p={4}>
|
<MenuList minW="260px" p={4}>
|
||||||
<Text fontSize="sm" color={useColorModeValue('gray.500', 'gray.300')}>敬请期待</Text>
|
<Text fontSize="sm" color={contactTextColor}>敬请期待</Text>
|
||||||
</MenuList>
|
</MenuList>
|
||||||
</Menu>
|
</Menu>
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|||||||
Reference in New Issue
Block a user