mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
docs: New design of articles (#29827)
* docs: New design of articles * update * format
This commit is contained in:
二货机器人
GitHub
parent
8ff10277e1
commit
4ba53c2cb3
@ -71,6 +71,12 @@ Please find below some of the design resources and tools about Ant Design that w
|
||||
|
||||
Do you want to know the story behind the Ant Design design system? How can I better apply Ant Design? You can check out our well selected articles below. Also welcome to follow [Ant Design Official Column](https://www.zhihu.com/column/c_1310524851418480640). There are often the latest sharing and discussions on related topics under the Ant Design design system, such as Ant Design, AntV visualization, Kitchen design Plug-ins, B-side product design, SaaS product design, natural interaction, growth design, intelligent design, design engineering, etc.
|
||||
|
||||
```__react
|
||||
import Articles from '../site/theme/template/Resources/Articles';
|
||||
|
||||
ReactDOM.render(<Articles />, mountNode);
|
||||
```
|
||||
|
||||
## Reference
|
||||
|
||||
Please find below the books that inspired us, saved our time and helped us to overcome difficulties when designing components and patterns. If you want to know more about UI design, we recommend you these awesome design systems: [Fiori Design](https://experience.sap.com/fiori-design-web/), [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/themes/), [Lightning Design System](https://lightningdesignsystem.com/getting-started/), [Material Design](https://material.io/).
|
||||
|
||||
@ -67,40 +67,11 @@ toc: false
|
||||
|
||||
想要了解 Ant Design 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注 [Ant Design 官方专栏](https://www.zhihu.com/column/c_1310524851418480640)，这里常有关于 Ant Design 设计体系下相关话题内容的最新分享和讨论，如 Ant Design、AntV 可视化、Kitchen 设计插件、B 端产品设计、SaaS 产品设计、自然交互、增长设计、智能设计、设计工程化等。
|
||||
|
||||
### 设计
|
||||
```__react
|
||||
import Articles from '../site/theme/template/Resources/Articles';
|
||||
|
||||
- [Ant Design 4.0：创造快乐工作](https://zhuanlan.zhihu.com/p/269913164)
|
||||
- [「自然交互」Ant Design 设计价值观解析](https://zhuanlan.zhihu.com/p/44809866)
|
||||
- [这几个 Ant Design 色彩的小知识，我猜你不知道！](https://zhuanlan.zhihu.com/p/268168773)
|
||||
- [2020，贴地飞行的 AntV 设计](https://zhuanlan.zhihu.com/p/308495829)
|
||||
- [Ant Design 设计工程化——SEE Conf 分享（含视频）](https://zhuanlan.zhihu.com/p/344336425)
|
||||
- [AntV 图可视分析解决方案（设计篇）— SEE Conf 分享](https://zhuanlan.zhihu.com/p/345721015)
|
||||
|
||||
<div class="next-block-use-avatars"></div>
|
||||
|
||||
- [](https://www.zhihu.com/people/lyndonliu)
|
||||
- [](https://www.zhihu.com/people/a-li-zai-nu-li)
|
||||
- [](https://www.zhihu.com/people/caicaicaizw)
|
||||
- [](https://www.zhihu.com/people/su-gu-niang-18)
|
||||
- [](https://www.zhihu.com/people/noideaser)
|
||||
- [](https://www.zhihu.com/people/sever-li)
|
||||
- [](https://www.zhihu.com/people/nan-guo-xi-chuang)
|
||||
|
||||
### 技术
|
||||
|
||||
- [Ant Design 4.0 的一些杂事儿 - Overflow 篇](https://zhuanlan.zhihu.com/p/340673293)
|
||||
- [AntV 图可视分析解决方案，来啦～](https://zhuanlan.zhihu.com/p/309424089)
|
||||
- [html2sketch：一名设计工程师的 C2D 探索之路](https://zhuanlan.zhihu.com/p/312306021)
|
||||
- [发布 Umi 3.2.0 — 可能是西湖区最好用的 SSR 框架](https://zhuanlan.zhihu.com/p/141988506)
|
||||
- [Tensorflow.js 海量图标，毫秒级识别！](https://zhuanlan.zhihu.com/p/128669062)
|
||||
- [Ant Design 4.0 的一些杂事儿 - Select 篇](https://zhuanlan.zhihu.com/p/102555441)
|
||||
|
||||
<div class="next-block-use-avatars"></div>
|
||||
|
||||
- [](https://www.zhihu.com/people/afc163)
|
||||
- [](https://www.zhihu.com/people/chi-zi-you)
|
||||
- [](https://www.zhihu.com/people/kong-gu-2013)
|
||||
- [](https://www.zhihu.com/people/smith-jiang)
|
||||
ReactDOM.render(<Articles />, mountNode);
|
||||
```
|
||||
|
||||
## 致敬
|
||||
|
||||
|
||||
@ -143,6 +143,8 @@ module.exports = {
|
||||
'app.docs.components.icon.pic-searcher.result-tip': 'Matched the following icons for you:',
|
||||
'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
|
||||
'app.docs.components.icon.pic-searcher.th-score': 'Probability',
|
||||
'app.docs.resource.design': 'Design',
|
||||
'app.docs.resource.develop': 'Develop',
|
||||
'app.components.overview.search': 'Search in components',
|
||||
},
|
||||
};
|
||||
|
||||
@ -16,10 +16,13 @@ export default () => {
|
||||
const [fixedId, setFixedId] = React.useState<string | null>(null);
|
||||
|
||||
function scrollToId(id: string) {
|
||||
const newTop =
|
||||
document.getElementById(id)!.offsetTop - containerRef.current!.offsetHeight - VIEW_BALANCE;
|
||||
const targetNode = document.getElementById(id);
|
||||
|
||||
if (targetNode) {
|
||||
const newTop = targetNode.offsetTop - containerRef.current!.offsetHeight - VIEW_BALANCE;
|
||||
scrollTo(newTop);
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
idsRef.current = Array.from(document.querySelectorAll('h2[id]')).map(({ id }) => id);
|
||||
|
||||
74
site/theme/template/Resources/Articles/index.less
Normal file
74
site/theme/template/Resources/Articles/index.less
Normal file
@ -0,0 +1,74 @@
|
||||
@import (reference) '../index.less';
|
||||
|
||||
#articles {
|
||||
h4 {
|
||||
margin: 48px 0 16px 0;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ant-skeleton {
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-nav::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
td {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-avatars {
|
||||
vertical-align: top;
|
||||
|
||||
ul {
|
||||
margin-top: 24px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 20px 20px 0;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
max-width: none;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
background: #d8d8d8;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
153
site/theme/template/Resources/Articles/index.tsx
Normal file
153
site/theme/template/Resources/Articles/index.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
|
||||
import * as React from 'react';
|
||||
import moment from 'moment';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { Tabs, Skeleton } from 'antd';
|
||||
import { useSiteData } from '../../Home/util';
|
||||
import './index.less';
|
||||
|
||||
interface Author {
|
||||
avatar: string;
|
||||
href: string;
|
||||
type: 'design' | 'develop';
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Article {
|
||||
title: string;
|
||||
href: string;
|
||||
date: string;
|
||||
type: 'design' | 'develop';
|
||||
}
|
||||
|
||||
interface Articles {
|
||||
author: Author[];
|
||||
cn: Article[];
|
||||
en: Article[];
|
||||
}
|
||||
|
||||
interface ArticleListProps {
|
||||
name: React.ReactNode;
|
||||
data: Article[];
|
||||
}
|
||||
|
||||
const ArticleList = ({ name, data }: ArticleListProps) => (
|
||||
<td>
|
||||
<h4>{name}</h4>
|
||||
<ul className="article-list">
|
||||
{data.map((article, index) => (
|
||||
<li key={index}>
|
||||
<a href={article.href} target="_blank" rel="noreferrer">
|
||||
{article.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
);
|
||||
|
||||
interface AuthorsProps {
|
||||
data: Author[];
|
||||
}
|
||||
|
||||
const Authors = ({ data }: AuthorsProps) => (
|
||||
<td className="resource-avatars">
|
||||
<ul>
|
||||
{data.map(author => (
|
||||
<li key={author.avatar}>
|
||||
<a href={author.href} target="_blank" rel="noreferrer">
|
||||
<img alt={author.name} src={author.avatar} />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
);
|
||||
|
||||
export default () => {
|
||||
const { locale } = useIntl();
|
||||
const isZhCN = locale === 'zh-CN';
|
||||
const data = useSiteData<Articles>('articles');
|
||||
|
||||
// ========================== Data ==========================
|
||||
const mergedData = React.useMemo(() => {
|
||||
if (!data) {
|
||||
return data;
|
||||
}
|
||||
|
||||
const articles = data[isZhCN ? 'cn' : 'en'];
|
||||
const yearData: Record<number | string, Record<string, Article[]>> = {};
|
||||
|
||||
articles.forEach(article => {
|
||||
const year = moment(article.date).year();
|
||||
yearData[year] = yearData[year] || {};
|
||||
|
||||
yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
|
||||
});
|
||||
|
||||
return yearData;
|
||||
}, [data]);
|
||||
|
||||
const mergedAuthors = React.useMemo(() => {
|
||||
if (!data) {
|
||||
return data;
|
||||
}
|
||||
|
||||
const authors: Record<string, Author[]> = {};
|
||||
|
||||
(data.author || []).forEach(author => {
|
||||
authors[author.type] = [...(authors[author.type] || []), author];
|
||||
});
|
||||
|
||||
return authors;
|
||||
}, [data]);
|
||||
|
||||
// ========================= Render =========================
|
||||
let content: React.ReactNode;
|
||||
|
||||
if (!data) {
|
||||
content = <Skeleton active />;
|
||||
} else {
|
||||
const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
|
||||
|
||||
content = yearList.length ? (
|
||||
<Tabs>
|
||||
{yearList.map(year => {
|
||||
const showAuthors = String(moment().year()) === year;
|
||||
|
||||
return (
|
||||
<Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<ArticleList
|
||||
name={<FormattedMessage id="app.docs.resource.design" />}
|
||||
data={mergedData[year].design}
|
||||
/>
|
||||
<ArticleList
|
||||
name={<FormattedMessage id="app.docs.resource.develop" />}
|
||||
data={mergedData[year].develop}
|
||||
/>
|
||||
</tr>
|
||||
{showAuthors && (
|
||||
<tr>
|
||||
<Authors data={mergedAuthors.design} />
|
||||
<Authors data={mergedAuthors.develop} />
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</Tabs.TabPane>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="articles" className="antd-articles">
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -105,35 +105,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.resource-avatars {
|
||||
margin-top: 24px;
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 20px 0 0;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
max-width: none;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
background: #d8d8d8;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 176px;
|
||||
|
||||
|
||||
@ -110,10 +110,6 @@ function injectCards(content: ContentUnit[]): ContentUnit[] {
|
||||
if (isClassNameType(unit, 'next-block-use-cards')) {
|
||||
newContent.push(toCardList(content[i + 1] as any));
|
||||
|
||||
i += 1;
|
||||
} else if (isClassNameType(unit, 'next-block-use-avatars')) {
|
||||
newContent.push(['div', { className: 'resource-avatars' }, content[i + 1]]);
|
||||
|
||||
i += 1;
|
||||
} else {
|
||||
newContent.push(unit);
|
||||
|
||||
@ -137,6 +137,8 @@ module.exports = {
|
||||
'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
|
||||
'app.docs.components.icon.pic-searcher.th-icon': '图标',
|
||||
'app.docs.components.icon.pic-searcher.th-score': '匹配度',
|
||||
'app.docs.resource.design': '设计',
|
||||
'app.docs.resource.develop': '开发',
|
||||
'app.components.overview.search': '搜索组件',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user