2021-03-19 23:03:04 +08:00
|
|
|
/* eslint-disable react/no-array-index-key */
|
|
|
|
import * as React from 'react';
|
2022-02-14 14:40:40 +08:00
|
|
|
import dayjs from 'dayjs';
|
2022-11-10 16:36:20 +08:00
|
|
|
import { FormattedMessage, useIntl } from 'dumi';
|
2021-06-15 19:15:41 +08:00
|
|
|
import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd';
|
2022-11-30 11:05:41 +08:00
|
|
|
import { css } from '@emotion/react';
|
2022-11-09 12:28:04 +08:00
|
|
|
import { useSiteData } from '../../../pages/index/components/util';
|
|
|
|
import type { Article, Authors } from '../../../pages/index/components/util';
|
|
|
|
import useSiteToken from '../../../hooks/useSiteToken';
|
|
|
|
|
|
|
|
const useStyle = () => {
|
|
|
|
const { token } = useSiteToken();
|
|
|
|
const { antCls } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
articles: css`
|
|
|
|
h4 {
|
|
|
|
margin: 40px 0 24px;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
${antCls}-skeleton {
|
|
|
|
h3 {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
ul li {
|
|
|
|
display: block;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
${antCls}-tabs-nav::before {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
table {
|
|
|
|
width: 100%;
|
|
|
|
table-layout: fixed;
|
|
|
|
|
|
|
|
td {
|
|
|
|
width: 50%;
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
articleList: css`
|
|
|
|
li {
|
|
|
|
margin: 1em 0;
|
|
|
|
padding: 0;
|
|
|
|
font-size: 14px;
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
${antCls}-avatar > img {
|
|
|
|
max-width: unset;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
};
|
2021-03-19 23:03:04 +08:00
|
|
|
|
|
|
|
interface ArticleListProps {
|
|
|
|
name: React.ReactNode;
|
|
|
|
data: Article[];
|
2021-05-29 23:59:30 +08:00
|
|
|
authors: Authors;
|
2021-03-19 23:03:04 +08:00
|
|
|
}
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = [] }) => {
|
|
|
|
const { articleList } = useStyle();
|
|
|
|
return (
|
|
|
|
<td>
|
|
|
|
<h4>{name}</h4>
|
|
|
|
<ul css={articleList}>
|
|
|
|
{data.length === 0 ? (
|
|
|
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
|
|
) : (
|
|
|
|
data.map((article, index) => {
|
2022-11-19 13:47:33 +08:00
|
|
|
const author = authors.find((auth) => auth.name === article.author);
|
2022-11-09 12:28:04 +08:00
|
|
|
return (
|
|
|
|
<li key={index}>
|
|
|
|
<a href={author?.href} target="_blank" rel="noreferrer">
|
|
|
|
<Avatar size="small" src={author?.avatar} />
|
|
|
|
</a>
|
|
|
|
<Divider type="vertical" />
|
|
|
|
<a href={article.href} target="_blank" rel="noreferrer">
|
2022-12-01 12:21:42 +08:00
|
|
|
{article?.title}
|
2022-11-09 12:28:04 +08:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
</td>
|
|
|
|
);
|
|
|
|
};
|
2021-03-19 23:03:04 +08:00
|
|
|
|
|
|
|
export default () => {
|
|
|
|
const { locale } = useIntl();
|
|
|
|
const isZhCN = locale === 'zh-CN';
|
2022-09-27 21:50:35 +08:00
|
|
|
const [{ articles = { cn: [], en: [] }, authors = [] }, loading] = useSiteData();
|
2021-03-19 23:03:04 +08:00
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
const styles = useStyle();
|
|
|
|
|
2021-03-19 23:03:04 +08:00
|
|
|
// ========================== Data ==========================
|
|
|
|
const mergedData = React.useMemo(() => {
|
|
|
|
const yearData: Record<number | string, Record<string, Article[]>> = {};
|
2022-11-19 13:47:33 +08:00
|
|
|
articles[isZhCN ? 'cn' : 'en']?.forEach((article) => {
|
2022-02-14 14:40:40 +08:00
|
|
|
const year = dayjs(article.date).year();
|
2021-03-19 23:03:04 +08:00
|
|
|
yearData[year] = yearData[year] || {};
|
|
|
|
yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
|
|
|
|
});
|
|
|
|
return yearData;
|
2021-05-29 23:59:30 +08:00
|
|
|
}, [articles]);
|
2021-03-19 23:03:04 +08:00
|
|
|
|
|
|
|
// ========================= Render =========================
|
|
|
|
let content: React.ReactNode;
|
|
|
|
|
2021-05-29 23:59:30 +08:00
|
|
|
if (loading) {
|
2021-03-19 23:03:04 +08:00
|
|
|
content = <Skeleton active />;
|
|
|
|
} else {
|
|
|
|
const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
|
|
|
|
content = yearList.length ? (
|
|
|
|
<Tabs>
|
2022-11-19 13:47:33 +08:00
|
|
|
{yearList.map((year) => (
|
2021-05-29 23:59:30 +08:00
|
|
|
<Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
|
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<ArticleList
|
|
|
|
name={<FormattedMessage id="app.docs.resource.design" />}
|
|
|
|
data={mergedData[year].design}
|
|
|
|
authors={authors}
|
|
|
|
/>
|
|
|
|
<ArticleList
|
|
|
|
name={<FormattedMessage id="app.docs.resource.develop" />}
|
|
|
|
data={mergedData[year].develop}
|
|
|
|
authors={authors}
|
|
|
|
/>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</Tabs.TabPane>
|
|
|
|
))}
|
2021-03-19 23:03:04 +08:00
|
|
|
</Tabs>
|
|
|
|
) : null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2022-11-09 12:28:04 +08:00
|
|
|
<div id="articles" css={styles.articles}>
|
2021-03-19 23:03:04 +08:00
|
|
|
{content}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|