Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

文章预览组件去掉padding

This commit is contained in:
qsc 2024-02-29 16:27:32 +08:00
parent 39fe9746e0
commit 7a09d50f70
8 changed files with 350 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/article/preview/web.module.less
View File

@ -1,6 +1,4 @@
.container {
background-color: #f3f5f7;
padding: 30px 200px;
min-height: 100vh;
}

1
src/components/article/treeList/index.ts
View File

@ -32,6 +32,7 @@ export default OakComponent({
}
],
formData({ data: rows }) {
console.log(rows);
return {
rows,
};

10
src/components/articleMenu/treeCell/index.ts
View File

@ -35,8 +35,6 @@ export default OakComponent({
data: {
id: 1,
},
indexFrom: 0,
count: 1,
},
article$articleMenu: {
$entity: 'article',
@ -44,8 +42,6 @@ export default OakComponent({
id: 1,
name: 1,
},
indexFrom: 0,
count: 1,
},
},
properties: {
@ -56,13 +52,13 @@ export default OakComponent({
getBreadcrumbItemsByParent: (breadcrumbItems: string[]) => undefined as void,
breadItems: [] as string[],
drawerOpen: false,
changeDrawerOpen: (open:boolean) => undefined as void,
changeDrawerOpen: (open: boolean) => undefined as void,
selectedArticleId: '',
openArray: [] as string[],
getTopInfo: (data: {name: string, date: number}) => undefined as void,
getTopInfo: (data: { name: string, date: number }) => undefined as void,
articleId: '',
articleMenuId: '',
getSideInfo: (data: {id: string, name: string, coverUrl: string}) => undefined as void,
getSideInfo: (data: { id: string, name: string, coverUrl: string }) => undefined as void,
currentArticle: '',
setCurrentArticle: (id: string) => undefined as void,
},

17
src/components/articleMenu/treeCell/web.pc.tsx
View File

@ -94,19 +94,22 @@ export default function Render(props: WebComponentProps<EntityDict, 'articleMenu
} else {
getSideInfo({ id: '', name: '帮助文档', coverUrl: '' });
}
}, [row])
}, [row]);
if (oakFullpath && row) {
if (!show) {
const Sub = showSub && hasSubArticles ? (
<ArticleTreeList
onChildEditArticleChange={onChildEditArticleChange}
articleMenuId={row.id}
oakPath={`${oakFullpath}.article$articleMenu`}
// oakPath={`${oakFullpath}.article$articleMenu`}
oakPath={`$article-articleMenu-${row.id}`}
/>
) : (
<ArticleMenuTreeList
oakAutoUnmount={true}
parentId={row.id}
oakPath={`${oakFullpath}.articleMenu$parent`}
// oakPath={`${oakFullpath}.articleMenu$parent`}
oakPath={`$articleMenu-parent-${row.id}`}
entity={row.entity}
entityId={row.entityId}
onGrandChildEditArticleChange={onChildEditArticleChange}
@ -380,9 +383,11 @@ export default function Render(props: WebComponentProps<EntityDict, 'articleMenu
} else {
const Sub = showSub && hasSubArticles ? (
<ArticleTreeList
oakAutoUnmount={true}
onChildEditArticleChange={onChildEditArticleChange}
articleMenuId={row.id}
oakPath={`${oakFullpath}.article$articleMenu`}
// oakPath={`${oakFullpath}.article$articleMenu`}
oakPath={`$article-articleMenu-${row.id}`}
show={show}
getBreadcrumbItemsByParent={getBreadcrumbItemsByParent}
breadcrumbItems={newBreadcrumbItems}
@ -397,8 +402,10 @@ export default function Render(props: WebComponentProps<EntityDict, 'articleMenu
/>
) : (
<ArticleMenuTreeList
oakAutoUnmount={true}
parentId={row.id}
oakPath={`${oakFullpath}.articleMenu$parent`}
// oakPath={`${oakFullpath}.articleMenu$parent`}
oakPath={`$articleMenu-parent-${row.id}`}
onGrandChildEditArticleChange={onChildEditArticleChange}
show={show}
getBreadcrumbItems={getBreadcrumbItemsByParent}

15
src/components/articleMenu/treeList/index.ts
View File

@ -39,16 +39,12 @@ export default OakComponent({
data: {
id: 1,
},
// indexFrom: 0,
// count: 1,
},
article$articleMenu: {
$entity: 'article',
data: {
id: 1,
},
// indexFrom: 0,
// count: 1,
},
extraFile$entity: {
$entity: 'extraFile',
@ -81,17 +77,6 @@ export default OakComponent({
}),
},
],
// listeners: {
// articleId(prev, next) {
// if (prev.articleId !== next.articleId) {
// this.getSearchArticle().then((getSearchArr: string[]) => {
// this.setState({
// getSearchArr,
// })
// })
// }
// }
// },
filters: [
{
filter() {

1
src/components/articleMenu/treeList/web.pc.tsx
View File

@ -129,6 +129,7 @@ export default function Render(props: WebComponentProps<EntityDict, 'articleMenu
(ele, idx) => (
<>
<TreeCell
oakAutoUnmount={true}
onChildEditArticleChange={onGrandChildEditArticleChange}
oakId={ele.id}
oakPath={`${oakFullpath}.${ele.id}`}

3
src/components/articleMenu/treeManager/web.pc.module.less
View File

@ -116,11 +116,12 @@
}
.editor {
flex: 1;
padding: 20px 48px;
// padding: 20px 48px;
.actions {
display: flex;
flex-direction: row-reverse;
padding: 20px 15px;
}
}
}

662
src/components/articleMenu/treeManager/web.pc.tsx
View File

@ -302,137 +302,35 @@ export default function Render(
)
} else {
return (
// <div className={Styles.container2}>
// <div className={Styles.menu}>
// <TreeList
// oakPath={`${oakFullpath}.articleMenus`}
// entity={entity}
// entityId={entityId}
// onGrandChildEditArticleChange={checkEditArticle}
// show={show}
// articleMenuId={articleMenuId ? articleMenuId : undefined}
// getBreadcrumbItems={getBreadcrumbItems}
// breadcrumbItems={[]}
// selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
// defaultOpen={defaultOpen}
// changeDefaultOpen={changeDefaultOpen}
// openArray={openArray ? openArray : undefined}
// />
// </div>
// <div className={Styles.editor}>
// {
// editArticle && (
// <div>
// <div style={{ fontSize: 14, display: 'flex', flexDirection: 'row', marginLeft: 10, marginBottom: 5 }}>
// {
// breadcrumbItems.length > 0 &&
// breadcrumbItems.map((breadcrumbItem: string, index: number) => {
// return index !== breadcrumbItems.length - 1 ? (
// <div style={{ color: '#B2B2B2' }} key={index}>
// {breadcrumbItem}
// <span style={{ margin: '0 6px' }}>/</span>
// </div>
// ) : (
// <div className={Styles.breadcrumbItem} key={index}>
// {breadcrumbItem}
// </div>
// )
// })
// }
// </div>
// <ArticleDetail
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-detail-${editArticle}`}
// />
// </div>
// )
// }
// </div>
// </div>
<div className={Styles.test}>
<div className={Styles.leftBox}>
<div className={Styles.topBox}>
<div className={Styles.boldFont}>{sideInfo.name}</div>
</div>
<div className={Styles.bottomBox}>
<div className={Styles.infoBox}>
<div className={Styles.top}>
<div className={Styles.left}>
<Image
preview={false}
style={{ borderRadius: '50%', width: 50, height: 50 }}
src={sideInfo.coverUrl}
/>
</div>
<div className={Styles.right}>
<div className={Styles.top}>{sideInfo.name}</div>
<div className={Styles.bottom}>
<div className={Styles.circle}></div>
<div className={Styles.font}>帮助文档</div>
</div>
</div>
</div>
<Input
placeholder='Search...'
suffix={<SearchOutlined />}
/>
<div className={Styles.helpFont}>帮助文档</div>
</div>
<div className={Styles.menu}>
<TreeList
oakPath={`${oakFullpath}.articleMenus`}
entity={entity}
entityId={entityId}
onGrandChildEditArticleChange={checkEditArticle}
show={show}
articleMenuId={articleMenuId ? articleMenuId : undefined}
articleId={articleId ? articleId : undefined}
getBreadcrumbItems={getBreadcrumbItems}
breadcrumbItems={[]}
selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
defaultOpen={defaultOpen}
changeDefaultOpen={changeDefaultOpen}
openArray={totalOpenArray ? totalOpenArray : undefined}
getSearchOpen={getSearchOpen}
getTopInfo={getTopInfo}
oakAutoUnmount={true}
getSideInfo={getSideInfo}
currentArticle={currentArticle}
setCurrentArticle={getCurrentArticle}
/>
</div>
</div>
<div className={Styles.container2}>
<div className={Styles.menu}>
<TreeList
oakPath={`${oakFullpath}.articleMenus`}
entity={entity}
entityId={entityId}
onGrandChildEditArticleChange={checkEditArticle}
show={show}
articleMenuId={articleMenuId ? articleMenuId : undefined}
getBreadcrumbItems={getBreadcrumbItems}
breadcrumbItems={[]}
selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
defaultOpen={defaultOpen}
changeDefaultOpen={changeDefaultOpen}
openArray={openArray ? openArray : undefined}
/>
</div>
<div className={Styles.rightBox}>
<div className={Styles.topBox}>
<MenuOutlined />
<div ref={dropdownRef}>
<Dropdown menu={{ items }} open={searchOpen}>
<Search
style={{ width: 300 }}
placeholder='Search...'
onChange={(val) => {
setSearchValue(val.target.value);
searchArticle(val.target.value);
}}
/>
</Dropdown>
</div>
</div>
<div className={Styles.editor}>
{
editArticle && (
<div className={Styles.bottomBox}>
<div className={Styles.breadcrumb}>
<div>
<div style={{ fontSize: 14, display: 'flex', flexDirection: 'row', marginLeft: 10, marginBottom: 5 }}>
{
breadcrumbItems.length > 0 &&
breadcrumbItems.map((breadcrumbItem: string, index: number) => {
return index !== breadcrumbItems.length - 1 ? (
<div style={{ color: '#B2B2B2' }} key={index}>
{breadcrumbItem}
<span style={{ margin: '0 6px' }}>
{'>'}
</span>
<span style={{ margin: '0 6px' }}>/</span>
</div>
) : (
<div className={Styles.breadcrumbItem} key={index}>
@ -442,194 +340,154 @@ export default function Render(
})
}
</div>
<div className={Styles.article}>
<div className={Styles.top}>
<div className={Styles.title}>
{topInfo.name}
</div>
<div className={Styles.date}>
{dayjs(topInfo.date).format('YYYY-MM-DD')}
</div>
</div>
<div className={Styles.editor}>
<ArticleDetail
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-detail-${editArticle}`}
/>
</div>
</div>
<ArticleDetail
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-detail-${editArticle}`}
/>
</div>
)
}
</div>
</div>
// <div className={Styles.test}>
// <div className={Styles.leftBox}>
// <div className={Styles.topBox}>
// <div className={Styles.boldFont}>{sideInfo.name}</div>
// </div>
// <div className={Styles.bottomBox}>
// <div className={Styles.infoBox}>
// <div className={Styles.top}>
// <div className={Styles.left}>
// <Image
// preview={false}
// style={{ borderRadius: '50%', width: 50, height: 50 }}
// src={sideInfo.coverUrl}
// />
// </div>
// <div className={Styles.right}>
// <div className={Styles.top}>{sideInfo.name}</div>
// <div className={Styles.bottom}>
// <div className={Styles.circle}></div>
// <div className={Styles.font}>帮助文档</div>
// </div>
// </div>
// </div>
// <Input
// placeholder='Search...'
// suffix={<SearchOutlined />}
// />
// <div className={Styles.helpFont}>帮助文档</div>
// </div>
// <div className={Styles.menu}>
// <TreeList
// oakPath={`${oakFullpath}.articleMenus`}
// entity={entity}
// entityId={entityId}
// onGrandChildEditArticleChange={checkEditArticle}
// show={show}
// articleMenuId={articleMenuId ? articleMenuId : undefined}
// articleId={articleId ? articleId : undefined}
// getBreadcrumbItems={getBreadcrumbItems}
// breadcrumbItems={[]}
// selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
// defaultOpen={defaultOpen}
// changeDefaultOpen={changeDefaultOpen}
// openArray={totalOpenArray ? totalOpenArray : undefined}
// getSearchOpen={getSearchOpen}
// getTopInfo={getTopInfo}
// oakAutoUnmount={true}
// getSideInfo={getSideInfo}
// currentArticle={currentArticle}
// setCurrentArticle={getCurrentArticle}
// />
// </div>
// </div>
// </div>
// <div className={Styles.rightBox}>
// <div className={Styles.topBox}>
// <MenuOutlined />
// <div ref={dropdownRef}>
// <Dropdown menu={{ items }} open={searchOpen}>
// <Search
// style={{ width: 300 }}
// placeholder='Search...'
// onChange={(val) => {
// setSearchValue(val.target.value);
// searchArticle(val.target.value);
// }}
// />
// </Dropdown>
// </div>
// </div>
// {
// editArticle && (
// <div className={Styles.bottomBox}>
// <div className={Styles.breadcrumb}>
// {
// breadcrumbItems.length > 0 &&
// breadcrumbItems.map((breadcrumbItem: string, index: number) => {
// return index !== breadcrumbItems.length - 1 ? (
// <div style={{ color: '#B2B2B2' }} key={index}>
// {breadcrumbItem}
// <span style={{ margin: '0 6px' }}>
// {'>'}
// </span>
// </div>
// ) : (
// <div className={Styles.breadcrumbItem} key={index}>
// {breadcrumbItem}
// </div>
// )
// })
// }
// </div>
// <div className={Styles.article}>
// <div className={Styles.top}>
// <div className={Styles.title}>
// {topInfo.name}
// </div>
// <div className={Styles.date}>
// {dayjs(topInfo.date).format('YYYY-MM-DD')}
// </div>
// </div>
// <div className={Styles.editor}>
// <ArticleDetail
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-detail-${editArticle}`}
// />
// </div>
// </div>
// </div>
// )
// }
// </div>
// </div>
)
}
} else {
return (
// <div className={Styles.container3}>
// <div className={Styles.menu}>
// <TreeList
// oakPath={`${oakFullpath}.articleMenus`}
// entity={entity}
// entityId={entityId}
// onGrandChildEditArticleChange={checkEditArticle}
// show={show}
// getBreadcrumbItems={getBreadcrumbItems}
// breadcrumbItems={[]}
// selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
// defaultOpen={defaultOpen}
// changeDefaultOpen={changeDefaultOpen}
// openArray={openArray ? openArray : undefined}
// />
// </div>
// <div className={Styles.editor}>
// {
// editArticle && (
// <div>
// <div className={Styles.actions}>
// <Space style={{ marginBottom: 10 }}>
// <Button
// onClick={() => {
// gotoArticleDetail(editArticle);
// }}
// >
// <EyeOutlined />
// 查看
// </Button>
// <Button
// onClick={() => {
// const url = `${window.location.host}/article/detail?oakId=${editArticle}`;
// copy(url);
// setMessage({
// content: '复制链接成功',
// type: 'success',
// });
// }}
// >
// <CopyOutlined />
// 复制链接
// </Button>
// <Button
// onClick={() => setIsEdit(true)}
// >
// <EditOutlined />
// 更新
// </Button>
// </Space>
// </div>
// <div style={{ fontSize: 14, display: 'flex', flexDirection: 'row', marginLeft: 10, marginBottom: 5 }}>
// {
// breadcrumbItems.length > 0 &&
// breadcrumbItems.map((breadcrumbItem: string, index: number) => {
// return index !== breadcrumbItems.length - 1 ? (
// <div style={{ color: '#B2B2B2' }} key={index}>
// {breadcrumbItem}
// <span style={{ margin: '0 6px' }}>/</span>
// </div>
// ) : (
// <div className={Styles.breadcrumbItem} key={index}>
// {breadcrumbItem}
// </div>
// )
// })
// }
// </div>
// {
// isEdit ? (
// <ArticleUpsert
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-upsert-${editArticle}`}
// changeIsEdit={changeIsEdit}
// />
// ) : (
// <ArticleDetail
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-detail-${editArticle}`}
// />
// )
// }
// </div>
// )
// }
// </div>
// </div>
<div className={Styles.test}>
<div className={Styles.leftBox}>
<div className={Styles.topBox}>
<div className={Styles.boldFont}>{sideInfo.name}</div>
</div>
<div className={Styles.bottomBox}>
<div className={Styles.infoBox}>
<div className={Styles.top}>
<div className={Styles.left}>
<Image
preview={false}
style={{ borderRadius: '50%', width: 50, height: 50 }}
src={sideInfo.coverUrl}
/>
</div>
<div className={Styles.right}>
<div className={Styles.top}>{sideInfo.name}</div>
<div className={Styles.bottom}>
<div className={Styles.circle}></div>
<div className={Styles.font}>帮助文档</div>
</div>
</div>
</div>
<Input
placeholder='Search...'
suffix={<SearchOutlined />}
/>
<div className={Styles.helpFont}>帮助文档</div>
</div>
<div className={Styles.menu}>
<TreeList
oakPath={`${oakFullpath}.articleMenus`}
entity={entity}
entityId={entityId}
onGrandChildEditArticleChange={checkEditArticle}
show={show}
articleMenuId={articleMenuId ? articleMenuId : undefined}
articleId={articleId ? articleId : undefined}
getBreadcrumbItems={getBreadcrumbItems}
breadcrumbItems={[]}
selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
defaultOpen={defaultOpen}
changeDefaultOpen={changeDefaultOpen}
openArray={totalOpenArray ? totalOpenArray : undefined}
getSearchOpen={getSearchOpen}
getTopInfo={getTopInfo}
oakAutoUnmount={true}
getSideInfo={getSideInfo}
currentArticle={currentArticle}
setCurrentArticle={getCurrentArticle}
/>
</div>
</div>
<div className={Styles.container3}>
<div className={Styles.menu}>
<TreeList
oakPath={`${oakFullpath}.articleMenus`}
entity={entity}
entityId={entityId}
onGrandChildEditArticleChange={checkEditArticle}
show={show}
getBreadcrumbItems={getBreadcrumbItems}
breadcrumbItems={[]}
selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
defaultOpen={defaultOpen}
changeDefaultOpen={changeDefaultOpen}
openArray={openArray ? openArray : undefined}
/>
</div>
<div className={Styles.rightBox}>
<div className={Styles.topBox}>
<MenuOutlined />
<div ref={dropdownRef}>
<Dropdown menu={{ items }} open={searchOpen}>
<Search
style={{ width: 300 }}
placeholder='Search...'
onChange={(val) => {
setSearchValue(val.target.value);
searchArticle(val.target.value);
}}
/>
</Dropdown>
</div>
</div>
<div className={Styles.editor}>
{
editArticle && (
<div className={Styles.bottomBox}>
<div>
<div className={Styles.actions}>
<Space style={{ marginBottom: 10 }}>
<Button
@ -661,16 +519,14 @@ export default function Render(
</Button>
</Space>
</div>
<div className={Styles.breadcrumb}>
<div style={{ fontSize: 14, display: 'flex', flexDirection: 'row', marginLeft: 10, marginBottom: 5 }}>
{
breadcrumbItems.length > 0 &&
breadcrumbItems.map((breadcrumbItem: string, index: number) => {
return index !== breadcrumbItems.length - 1 ? (
<div style={{ color: '#B2B2B2' }} key={index}>
{breadcrumbItem}
<span style={{ margin: '0 6px' }}>
{'>'}
</span>
<span style={{ margin: '0 6px' }}>/</span>
</div>
) : (
<div className={Styles.breadcrumbItem} key={index}>
@ -680,40 +536,184 @@ export default function Render(
})
}
</div>
<div className={Styles.article}>
<div className={Styles.top}>
<div className={Styles.title}>
{topInfo.name}
</div>
<div className={Styles.date}>
{dayjs(topInfo.date).format('YYYY-MM-DD')}
</div>
</div>
<div className={Styles.editor}>
{
isEdit ? (
<ArticleUpsert
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-upsert-${editArticle}`}
changeIsEdit={changeIsEdit}
/>
) : (
<ArticleDetail
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-detail-${editArticle}`}
/>
)
}
</div>
</div>
{
isEdit ? (
<ArticleUpsert
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-upsert-${editArticle}`}
changeIsEdit={changeIsEdit}
/>
) : (
<ArticleDetail
oakId={editArticle}
oakAutoUnmount={true}
oakPath={`article-detail-${editArticle}`}
/>
)
}
</div>
)
}
</div>
</div>
// <div className={Styles.test}>
// <div className={Styles.leftBox}>
// <div className={Styles.topBox}>
// <div className={Styles.boldFont}>{sideInfo.name}</div>
// </div>
// <div className={Styles.bottomBox}>
// <div className={Styles.infoBox}>
// <div className={Styles.top}>
// <div className={Styles.left}>
// <Image
// preview={false}
// style={{ borderRadius: '50%', width: 50, height: 50 }}
// src={sideInfo.coverUrl}
// />
// </div>
// <div className={Styles.right}>
// <div className={Styles.top}>{sideInfo.name}</div>
// <div className={Styles.bottom}>
// <div className={Styles.circle}></div>
// <div className={Styles.font}>帮助文档</div>
// </div>
// </div>
// </div>
// <Input
// placeholder='Search...'
// suffix={<SearchOutlined />}
// />
// <div className={Styles.helpFont}>帮助文档</div>
// </div>
// <div className={Styles.menu}>
// <TreeList
// oakPath={`${oakFullpath}.articleMenus`}
// entity={entity}
// entityId={entityId}
// onGrandChildEditArticleChange={checkEditArticle}
// show={show}
// articleMenuId={articleMenuId ? articleMenuId : undefined}
// articleId={articleId ? articleId : undefined}
// getBreadcrumbItems={getBreadcrumbItems}
// breadcrumbItems={[]}
// selectedArticleId={selectedArticleId ? selectedArticleId : undefined}
// defaultOpen={defaultOpen}
// changeDefaultOpen={changeDefaultOpen}
// openArray={totalOpenArray ? totalOpenArray : undefined}
// getSearchOpen={getSearchOpen}
// getTopInfo={getTopInfo}
// oakAutoUnmount={true}
// getSideInfo={getSideInfo}
// currentArticle={currentArticle}
// setCurrentArticle={getCurrentArticle}
// />
// </div>
// </div>
// </div>
// <div className={Styles.rightBox}>
// <div className={Styles.topBox}>
// <MenuOutlined />
// <div ref={dropdownRef}>
// <Dropdown menu={{ items }} open={searchOpen}>
// <Search
// style={{ width: 300 }}
// placeholder='Search...'
// onChange={(val) => {
// setSearchValue(val.target.value);
// searchArticle(val.target.value);
// }}
// />
// </Dropdown>
// </div>
// </div>
// {
// editArticle && (
// <div className={Styles.bottomBox}>
// <div className={Styles.actions}>
// <Space style={{ marginBottom: 10 }}>
// <Button
// onClick={() => {
// gotoArticleDetail(editArticle);
// }}
// >
// <EyeOutlined />
// 查看
// </Button>
// <Button
// onClick={() => {
// const url = `${window.location.host}/article/detail?oakId=${editArticle}`;
// copy(url);
// setMessage({
// content: '复制链接成功',
// type: 'success',
// });
// }}
// >
// <CopyOutlined />
// 复制链接
// </Button>
// <Button
// onClick={() => setIsEdit(true)}
// >
// <EditOutlined />
// 更新
// </Button>
// </Space>
// </div>
// <div className={Styles.breadcrumb}>
// {
// breadcrumbItems.length > 0 &&
// breadcrumbItems.map((breadcrumbItem: string, index: number) => {
// return index !== breadcrumbItems.length - 1 ? (
// <div style={{ color: '#B2B2B2' }} key={index}>
// {breadcrumbItem}
// <span style={{ margin: '0 6px' }}>
// {'>'}
// </span>
// </div>
// ) : (
// <div className={Styles.breadcrumbItem} key={index}>
// {breadcrumbItem}
// </div>
// )
// })
// }
// </div>
// <div className={Styles.article}>
// <div className={Styles.top}>
// <div className={Styles.title}>
// {topInfo.name}
// </div>
// <div className={Styles.date}>
// {dayjs(topInfo.date).format('YYYY-MM-DD')}
// </div>
// </div>
// <div className={Styles.editor}>
// {
// isEdit ? (
// <ArticleUpsert
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-upsert-${editArticle}`}
// changeIsEdit={changeIsEdit}
// />
// ) : (
// <ArticleDetail
// oakId={editArticle}
// oakAutoUnmount={true}
// oakPath={`article-detail-${editArticle}`}
// />
// )
// }
// </div>
// </div>
// </div>
// )
// }
// </div>
// </div>
)
}
}