Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5097b7f

Browse files
committed
update
1 parent 9826ce4 commit 5097b7f

File tree

2 files changed

+76
-65
lines changed

2 files changed

+76
-65
lines changed

‎src/components/Header/index.tsx‎

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import "./index.less";
2626
// ==================
2727
// 类型声明
2828
// ==================
29+
import type { MenuProps } from "antd";
2930
import { UserInfo } from "@/models/index.type";
3031

3132
interface Element {
@@ -78,15 +79,12 @@ export default function HeaderCom(props: Props): JSX.Element {
7879
}, []);
7980

8081
// 退出登录
81-
const onMenuClick = useCallback(
82-
(e: any) => {
83-
// 退出按钮被点击
84-
if (e.key === "logout") {
85-
props.onLogout();
86-
}
87-
},
88-
[props]
89-
);
82+
const onMenuClick: MenuProps["onClick"] = (e) => {
83+
// 退出按钮被点击
84+
if (e.key === "logout") {
85+
props.onLogout();
86+
}
87+
};
9088

9189
const u = props.userinfo.userBasicInfo;
9290
return (
@@ -118,35 +116,50 @@ export default function HeaderCom(props: Props): JSX.Element {
118116
</Tooltip>
119117
{u ? (
120118
<Dropdown
121-
overlay={
122-
<Menu className="menu" selectedKeys={[]} onClick={onMenuClick}>
123-
<Menu.Item>
124-
<a
125-
href="https://blog.isluo.com"
126-
target="_blank"
127-
rel="noopener noreferrer"
128-
>
129-
<ChromeOutlined />
130-
blog.isluo.com
131-
</a>
132-
</Menu.Item>
133-
<Menu.Item>
134-
<a
135-
href="https://github.com/javaLuo/react-admin"
136-
target="_blank"
137-
rel="noopener noreferrer"
138-
>
139-
<GithubOutlined />
140-
GitHub
141-
</a>
142-
</Menu.Item>
143-
<Menu.Divider />
144-
<Menu.Item key="logout">
145-
<LogoutOutlined />
146-
退出登录
147-
</Menu.Item>
148-
</Menu>
149-
}
119+
menu={{
120+
className: "menu",
121+
onClick: onMenuClick,
122+
items: [
123+
{
124+
key: "item-1",
125+
label: (
126+
<a
127+
href="https://blog.isluo.com"
128+
target="_blank"
129+
rel="noopener noreferrer"
130+
>
131+
<ChromeOutlined />
132+
blog.isluo.com
133+
</a>
134+
),
135+
},
136+
{
137+
key: "item-2",
138+
label: (
139+
<a
140+
href="https://github.com/javaLuo/react-admin"
141+
target="_blank"
142+
rel="noopener noreferrer"
143+
>
144+
<GithubOutlined />
145+
GitHub
146+
</a>
147+
),
148+
},
149+
{
150+
type: "divider",
151+
},
152+
{
153+
key: "logout",
154+
label: (
155+
<>
156+
<LogoutOutlined />
157+
退出登录
158+
</>
159+
),
160+
},
161+
],
162+
}}
150163
placement="bottomRight"
151164
>
152165
<div className="userhead all_center">

‎src/components/Menu/index.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -72,33 +72,32 @@ export default function MenuCom(props: Props): JSX.Element {
7272
);
7373

7474
// 构建树结构
75-
const makeTreeDom = useCallback((data: Menu[]): JSX.Element[] => {
75+
const makeTreeDom = useCallback((data: Menu[]): any => {
7676
return data.map((item: Menu) => {
7777
if (item.children) {
78-
return (
79-
<SubMenu
80-
key={item.url}
81-
title={
82-
!item.parent && item.icon ? (
83-
<span>
84-
<Icon type={item.icon} />
85-
<span>{item.title}</span>
86-
</span>
87-
) : (
88-
item.title
89-
)
90-
}
91-
>
92-
{makeTreeDom(item.children)}
93-
</SubMenu>
94-
);
78+
return {
79+
key: item.url,
80+
label:
81+
!item.parent && item.icon ? (
82+
<span>
83+
<Icon type={item.icon} />
84+
<span>{item.title}</span>
85+
</span>
86+
) : (
87+
item.title
88+
),
89+
children: makeTreeDom(item.children),
90+
};
9591
} else {
96-
return (
97-
<Item key={item.url}>
98-
{!item.parent && item.icon ? <Icon type={item.icon} /> : null}
99-
<span>{item.title}</span>
100-
</Item>
101-
);
92+
return {
93+
label: (
94+
<>
95+
{!item.parent && item.icon ? <Icon type={item.icon} /> : null}
96+
<span>{item.title}</span>
97+
</>
98+
),
99+
key: item.url,
100+
};
102101
}
103102
});
104103
}, []);
@@ -136,13 +135,12 @@ export default function MenuCom(props: Props): JSX.Element {
136135
<MenuAntd
137136
theme="dark"
138137
mode="inline"
138+
items={treeDom}
139139
selectedKeys={chosedKey}
140140
{...(props.collapsed ? {} : { openKeys })}
141141
onOpenChange={(keys: string[]) => setOpenKeys(keys)}
142142
onSelect={onSelect}
143-
>
144-
{treeDom}
145-
</MenuAntd>
143+
/>
146144
</Sider>
147145
);
148146
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /