gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix filename case

This commit is contained in:
fantasticit 2022-03-28 22:21:36 +08:00
parent 19b8f3eb97
commit e2b42c8e80
4 changed files with 281 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/components/message/placeholder.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Skeleton } from '@douyinfe/semi-ui';
export const Placeholder = () => {
return (
<Skeleton
placeholder={
<>
{Array.from({ length: 6 }).fill(
<Skeleton.Title style={{ width: '100%', marginBottom: 12, marginTop: 12 }} />
)}
</>
}
loading={true}
></Skeleton>
);
};

16
packages/client/src/layouts/router-header/placeholder.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Skeleton } from '@douyinfe/semi-ui';
export const Placeholder = () => {
return (
<Skeleton
placeholder={
<>
{Array.from({ length: 8 }).fill(
<Skeleton.Title style={{ width: '100%', marginBottom: 12, marginTop: 12 }} />
)}
</>
}
loading={true}
></Skeleton>
);
};

90
packages/client/src/layouts/router-header/recent.tsx Normal file
View File

@ -0,0 +1,90 @@
import React from 'react';
import Link from 'next/link';
import { Typography, Space, Dropdown, Tabs, TabPane } from '@douyinfe/semi-ui';
import { IconChevronDown } from '@douyinfe/semi-icons';
import { useRecentDocuments } from 'data/document';
import { Empty } from 'components/empty';
import { DataRender } from 'components/data-render';
import { LocaleTime } from 'components/locale-time';
import { DocumentStar } from 'components/document/star';
import { IconDocumentFill } from 'components/icons/IconDocumentFill';
import { Placeholder } from './placeholder';
import styles from './index.module.scss';
const { Text } = Typography;
export const Recent = () => {
const { data: recentDocs, loading, error } = useRecentDocuments();
return (
<Dropdown
trigger="click"
spacing={16}
content={
<div style={{ width: 300, padding: '16px 16px 0' }}>
<Tabs type="line" size="small">
<TabPane tab="文档" itemKey="docs">
<DataRender
loading={loading}
loadingContent={<Placeholder />}
error={error}
normalContent={() => {
return (
<div className={styles.itemsWrap} style={{ margin: '0 -16px' }}>
{recentDocs.length ? (
recentDocs.map((doc) => {
return (
<div className={styles.itemWrap}>
<Link
href={{
pathname: '/wiki/[wikiId]/document/[documentId]',
query: {
wikiId: doc.wikiId,
documentId: doc.id,
},
}}
>
<a className={styles.item}>
<div className={styles.leftWrap}>
<IconDocumentFill style={{ marginRight: 12 }} />
<div>
<Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
{doc.title}
</Text>
<Text size="small" type="tertiary">
创建者：
{doc.createUser && doc.createUser.name} •{' '}
<LocaleTime date={doc.updatedAt} timeago />
</Text>
</div>
</div>
<div className={styles.rightWrap}>
<DocumentStar documentId={doc.id} />
</div>
</a>
</Link>
</div>
);
})
) : (
<Empty message="最近访问的文档会出现在此处" />
)}
</div>
);
}}
/>
</TabPane>
</Tabs>
</div>
}
>
<span>
<Space>
最近
<IconChevronDown />
</Space>
</span>
</Dropdown>
);
};

159
packages/client/src/layouts/router-header/wiki.tsx Normal file
View File

@ -0,0 +1,159 @@
import React from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { Avatar, Typography, Space, Dropdown } from '@douyinfe/semi-ui';
import { IconChevronDown } from '@douyinfe/semi-icons';
import { useStaredWikis, useWikiDetail } from 'data/wiki';
import { Empty } from 'components/empty';
import { DataRender } from 'components/data-render';
import { WikiStar } from 'components/wiki/star';
import { Placeholder } from './placeholder';
import styles from './index.module.scss';
const { Text } = Typography;
export const Wiki = () => {
const { query } = useRouter();
const { data: starWikis, loading, error, refresh: refreshStarWikis } = useStaredWikis();
const { data: currentWiki } = useWikiDetail(query.wikiId);
return (
<Dropdown
trigger="click"
spacing={16}
content={
<div
style={{
width: 300,
paddingBottom: 8,
}}
>
{currentWiki && (
<>
<div className={styles.titleWrap}>
<Text strong type="secondary">
当前
</Text>
</div>
<div className={styles.itemWrap}>
<Link
href={{
pathname: '/wiki/[wikiId]',
query: {
wikiId: currentWiki.id,
},
}}
>
<a className={styles.item}>
<div className={styles.leftWrap}>
<Avatar
shape="square"
size="small"
src={currentWiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{currentWiki.name.charAt(0)}
</Avatar>
<div>
<Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
{currentWiki.name}
</Text>
</div>
</div>
<div className={styles.rightWrap}>
<WikiStar wikiId={currentWiki.id} onChange={refreshStarWikis} />
</div>
</a>
</Link>
</div>
</>
)}
<div className={styles.titleWrap}>
<Text strong type="secondary">
已收藏
</Text>
</div>
<DataRender
loading={loading}
loadingContent={<Placeholder />}
error={error}
normalContent={() => {
return (
<div className={styles.itemsWrap}>
{starWikis.length ? (
starWikis.map((wiki) => {
return (
<div className={styles.itemWrap}>
<Link
href={{
pathname: '/wiki/[wikiId]',
query: {
wikiId: wiki.id,
},
}}
>
<a className={styles.item}>
<div className={styles.leftWrap}>
<Avatar
shape="square"
size="small"
src={wiki.avatar}
style={{
marginRight: 8,
width: 24,
height: 24,
borderRadius: 4,
}}
>
{wiki.name.charAt(0)}
</Avatar>
<div>
<Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
{wiki.name}
</Text>
</div>
</div>
<div className={styles.rightWrap}>
<WikiStar wikiId={wiki.id} onChange={refreshStarWikis} />
</div>
</a>
</Link>
</div>
);
})
) : (
<Empty message="收藏的知识库会出现在此处" />
)}
</div>
);
}}
/>
<Dropdown.Divider />
<div className={styles.itemWrap}>
<Link
href={{
pathname: '/wiki',
}}
>
<a className={styles.item} style={{ padding: '12px 16px' }}>
<Text>查看所有知识库</Text>
</a>
</Link>
</div>
</div>
}
>
<span>
<Space>
知识库
<IconChevronDown />
</Space>
</span>
</Dropdown>
);
};