mirror of https://github.com/fantasticit/think.git
fix: fix filename case
This commit is contained in:
fantasticit
parent
19b8f3eb97
commit
e2b42c8e80
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue