前端: 添加面包屑导航组件
This commit is contained in:
parent
78e945f31b
commit
36004cd96c
37
frontend/src/renderer/components/Breadcrumb.jsx
Normal file
37
frontend/src/renderer/components/Breadcrumb.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Breadcrumb as AntBreadcrumb } from 'antd';
|
||||||
|
import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
|
function Breadcrumb({ path, onNavigate }) {
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
title: <HomeOutlined />,
|
||||||
|
href: '#',
|
||||||
|
onClick: (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNavigate?.(null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...path.map((item, index) => ({
|
||||||
|
title: (
|
||||||
|
<span
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNavigate?.(item.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FolderOutlined /> {item.name}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}))
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AntBreadcrumb
|
||||||
|
items={items}
|
||||||
|
style={{ margin: '16px 0' }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Breadcrumb;
|
||||||
Loading…
Reference in New Issue
Block a user