client: update tocs style

This commit is contained in:
fantasticit 2022-06-23 18:18:54 +08:00
parent 5f05715ed1
commit 860e2471e5
3 changed files with 332 additions and 314 deletions

View File

@ -3,6 +3,16 @@
height: 100%; height: 100%;
padding-top: 12px; padding-top: 12px;
overflow: auto; overflow: auto;
display: flex;
flex-direction: column;
overflow: hidden;
> main {
flex: 1;
overflow: auto;
}
} }
.titleWrap { .titleWrap {

View File

@ -48,252 +48,256 @@ export const WikiTocs: React.FC<IProps> = ({
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
<DataRender <header>
loading={wikiLoading} <DataRender
loadingContent={ loading={wikiLoading}
<div className={styles.titleWrap}> loadingContent={
<Skeleton
placeholder={
<div style={{ display: 'flex' }}>
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
<Skeleton.Title style={{ width: 120 }} />
</div>
}
loading={true}
/>
</div>
}
error={wikiError}
normalContent={() => (
<Dropdown
trigger={'click'}
position="bottomRight"
render={
<Dropdown.Menu style={{ width: 180 }}>
{(starWikis || [])
.filter((wiki) => wiki.id !== wikiId)
.map((wiki) => {
return (
<Dropdown.Item key={wiki.id}>
<Link
href={{
pathname: `/wiki/[wikiId]`,
query: { wikiId: wiki.id },
}}
>
<a
style={{
display: 'flex',
width: '100%',
}}
>
<span>
<Avatar
shape="square"
size="small"
src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
<Text strong ellipsis={{ rows: 1 }}>
{wiki.name}
</Text>
</span>
</a>
</Link>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<div className={styles.titleWrap}> <div className={styles.titleWrap}>
<span> <Skeleton
<Avatar placeholder={
shape="square" <div style={{ display: 'flex' }}>
size="small" <Skeleton.Avatar
src={wiki.avatar} size="small"
style={{ style={{
marginRight: 8, marginRight: 8,
width: 24, width: 24,
height: 24, height: 24,
borderRadius: 4, borderRadius: 4,
}} }}
> ></Skeleton.Avatar>
{wiki.name.charAt(0)} <Skeleton.Title style={{ width: 120 }} />
</Avatar> </div>
<Text strong>{wiki.name}</Text> }
</span> loading={true}
<IconSmallTriangleDown />
</div>
</Dropdown>
)}
/>
<DataRender
loading={wikiLoading}
loadingContent={
<div className={styles.titleWrap}>
<Skeleton
placeholder={
<div style={{ display: 'flex' }}>
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
<Skeleton.Title style={{ width: 120 }} />
</div>
}
loading={true}
/>
</div>
}
error={wikiError}
normalContent={() => (
<div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]' && styles.isActive)}>
<Link
href={{
pathname: `/wiki/[wikiId]`,
query: { wikiId },
}}
>
<a>
<IconOverview style={{ fontSize: '1em' }} />
<span></span>
</a>
</Link>
</div>
)}
/>
<DataRender
loading={wikiLoading}
loadingContent={
<div className={styles.titleWrap}>
<Skeleton
placeholder={
<div style={{ display: 'flex' }}>
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
<Skeleton.Title style={{ width: 120 }} />
</div>
}
loading={true}
/>
</div>
}
error={wikiError}
normalContent={() => (
<div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]/setting' && styles.isActive)}>
<Link
href={{
pathname: `/wiki/[wikiId]/setting`,
query: { tab: 'base', wikiId },
}}
>
<a>
<IconSetting style={{ fontSize: '1em' }} />
<span></span>
</a>
</Link>
</div>
)}
/>
<div className={styles.treeWrap}>
<DataRender
loading={starDocumentsLoading}
loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
error={starDocumentsError}
normalContent={() => (
<div className={styles.title}>
<Text type="tertiary" size="small">
</Text>
</div>
)}
/>
<DataRender
loading={starDocumentsLoading}
loadingContent={<div>1</div>}
error={starDocumentsError}
normalContent={() => (
<Tree
data={starDocuments || []}
docAsLink={docAsLink}
getDocLink={getDocLink}
parentIds={parentIds}
activeId={documentId}
/>
)}
/>
</div>
<div className={styles.treeWrap}>
<DataRender
loading={tocsLoading}
loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
error={wikiError}
normalContent={() => (
<div className={styles.title}>
<Text type="tertiary" size="small">
</Text>
<Button
style={{ fontSize: '1em' }}
theme="borderless"
type="tertiary"
icon={<IconPlus style={{ fontSize: '1em' }} />}
size="small"
onClick={() => {
triggerCreateDocument({ wikiId: wiki.id, documentId: null });
}}
/> />
</div> </div>
)} }
/> error={wikiError}
<DataRender
loading={tocsLoading}
loadingContent={<div>1</div>}
error={tocsError}
normalContent={() => ( normalContent={() => (
<Tree <Dropdown
needAddDocument trigger={'click'}
data={tocs || []} position="bottomRight"
docAsLink={docAsLink} render={
getDocLink={getDocLink} <Dropdown.Menu style={{ width: 180 }}>
parentIds={parentIds} {(starWikis || [])
activeId={documentId} .filter((wiki) => wiki.id !== wikiId)
/> .map((wiki) => {
return (
<Dropdown.Item key={wiki.id}>
<Link
href={{
pathname: `/wiki/[wikiId]`,
query: { wikiId: wiki.id },
}}
>
<a
style={{
display: 'flex',
width: '100%',
}}
>
<span>
<Avatar
shape="square"
size="small"
src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
<Text strong ellipsis={{ rows: 1 }}>
{wiki.name}
</Text>
</span>
</a>
</Link>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
}
>
<div className={styles.titleWrap}>
<span>
<Avatar
shape="square"
size="small"
src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
<Text strong>{wiki.name}</Text>
</span>
<IconSmallTriangleDown />
</div>
</Dropdown>
)} )}
/> />
</div>
<DataRender
loading={wikiLoading}
loadingContent={
<div className={styles.titleWrap}>
<Skeleton
placeholder={
<div style={{ display: 'flex' }}>
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
<Skeleton.Title style={{ width: 120 }} />
</div>
}
loading={true}
/>
</div>
}
error={wikiError}
normalContent={() => (
<div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]' && styles.isActive)}>
<Link
href={{
pathname: `/wiki/[wikiId]`,
query: { wikiId },
}}
>
<a>
<IconOverview style={{ fontSize: '1em' }} />
<span></span>
</a>
</Link>
</div>
)}
/>
<DataRender
loading={wikiLoading}
loadingContent={
<div className={styles.titleWrap}>
<Skeleton
placeholder={
<div style={{ display: 'flex' }}>
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
<Skeleton.Title style={{ width: 120 }} />
</div>
}
loading={true}
/>
</div>
}
error={wikiError}
normalContent={() => (
<div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]/setting' && styles.isActive)}>
<Link
href={{
pathname: `/wiki/[wikiId]/setting`,
query: { tab: 'base', wikiId },
}}
>
<a>
<IconSetting style={{ fontSize: '1em' }} />
<span></span>
</a>
</Link>
</div>
)}
/>
</header>
<main>
<div className={styles.treeWrap}>
<DataRender
loading={starDocumentsLoading}
loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
error={starDocumentsError}
normalContent={() => (
<div className={styles.title}>
<Text type="tertiary" size="small">
</Text>
</div>
)}
/>
<DataRender
loading={starDocumentsLoading}
loadingContent={<div>1</div>}
error={starDocumentsError}
normalContent={() => (
<Tree
data={starDocuments || []}
docAsLink={docAsLink}
getDocLink={getDocLink}
parentIds={parentIds}
activeId={documentId}
/>
)}
/>
</div>
<div className={styles.treeWrap}>
<DataRender
loading={tocsLoading}
loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
error={wikiError}
normalContent={() => (
<div className={styles.title}>
<Text type="tertiary" size="small">
</Text>
<Button
style={{ fontSize: '1em' }}
theme="borderless"
type="tertiary"
icon={<IconPlus style={{ fontSize: '1em' }} />}
size="small"
onClick={() => {
triggerCreateDocument({ wikiId: wiki.id, documentId: null });
}}
/>
</div>
)}
/>
<DataRender
loading={tocsLoading}
loadingContent={<div>1</div>}
error={tocsError}
normalContent={() => (
<Tree
needAddDocument
data={tocs || []}
docAsLink={docAsLink}
getDocLink={getDocLink}
parentIds={parentIds}
activeId={documentId}
/>
)}
/>
</div>
</main>
</div> </div>
); );
}; };

View File

@ -43,72 +43,17 @@ export const WikiPublicTocs: React.FC<IProps> = ({
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.navItemWrap}> <header>
<div className={styles.navItem}> <div className={styles.navItemWrap}>
<Space> <div className={styles.navItem}>
<LogoImage /> <LogoText /> <Space>
</Space> <LogoImage /> <LogoText />
</Space>
</div>
</div> </div>
</div>
<DataRender
loading={wikiLoading}
loadingContent={
<NavItem
icon={
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
}
text={<Skeleton.Title style={{ width: 120 }} />}
/>
}
error={wikiError}
normalContent={() => (
<>
<Seo title={wiki.name + ' - ' + pageTitle} />
<NavItem
icon={
<Avatar
shape="square"
size="small"
src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
}
text={<Text strong>{wiki.name}</Text>}
hoverable={false}
/>
</>
)}
/>
<NavItem
icon={<IconOverview />}
text={'概述'}
href={{
pathname: `/share/wiki/[wikiId]`,
query: { wikiId },
}}
isActive={pathname === '/share/wiki/[wikiId]'}
/>
<div className={styles.treeWrap} style={{ marginTop: 12 }}>
<DataRender <DataRender
loading={tocsLoading} loading={wikiLoading}
loadingContent={ loadingContent={
<NavItem <NavItem
icon={ icon={
@ -123,22 +68,81 @@ export const WikiPublicTocs: React.FC<IProps> = ({
></Skeleton.Avatar> ></Skeleton.Avatar>
} }
text={<Skeleton.Title style={{ width: 120 }} />} text={<Skeleton.Title style={{ width: 120 }} />}
rightNode={<IconPlus />}
/> />
} }
error={tocsError} error={wikiError}
normalContent={() => ( normalContent={() => (
<Tree <>
data={tocs || []} <Seo title={wiki.name + ' - ' + pageTitle} />
docAsLink={docAsLink} <NavItem
getDocLink={getDocLink} icon={
parentIds={parentIds} <Avatar
activeId={documentId} shape="square"
isShareMode size="small"
/> src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
}
text={<Text strong>{wiki.name}</Text>}
hoverable={false}
/>
</>
)} )}
/> />
</div>
<NavItem
icon={<IconOverview />}
text={'概述'}
href={{
pathname: `/share/wiki/[wikiId]`,
query: { wikiId },
}}
isActive={pathname === '/share/wiki/[wikiId]'}
/>
</header>
<main>
<div className={styles.treeWrap}>
<DataRender
loading={tocsLoading}
loadingContent={
<NavItem
icon={
<Skeleton.Avatar
size="small"
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
></Skeleton.Avatar>
}
text={<Skeleton.Title style={{ width: 120 }} />}
rightNode={<IconPlus />}
/>
}
error={tocsError}
normalContent={() => (
<Tree
data={tocs || []}
docAsLink={docAsLink}
getDocLink={getDocLink}
parentIds={parentIds}
activeId={documentId}
isShareMode
/>
)}
/>
</div>
</main>
</div> </div>
); );
}; };