docs: 🌈 Add Components overview page #24491

afc163 · 2020-05-27T03:54:36Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

本地访问 http://127.0.0.1:8001/components/overview/ 和 http://127.0.0.1:8001/components/overview-cn/ 进行调试。

提供全局视角，帮助更快地找组件
信息架构和左侧菜单保持一致。
注意响应式的表现。

可参考：

分类

组件 组件 组件 组件

分类

组件 组件 组件 组件

分类

组件 组件 组件 组件

📝 Changelog

Language	Changelog
🇺🇸 English	Add components overview page.
🇨🇳 Chinese	新增组件总览页面。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

View rendered README-pt_BR.md
View rendered README-zh_CN.md
View rendered README.md
View rendered components/button/index.en-US.md
View rendered components/button/index.zh-CN.md
View rendered components/overview/index.md
View rendered docs/react/introduce.en-US.md
View rendered docs/react/introduce.zh-CN.md

tests-checker

Could you please add tests to make sure this change works as expected?

ant-design-bot · 2020-05-27T03:57:51Z

ant-design-bot · 2020-05-27T03:57:53Z

afc163 · 2020-05-27T04:05:16Z

components/button/index.zh-CN.md

@@ -3,6 +3,7 @@ category: Components
 type: 通用
 title: Button
 subtitle: 按钮
+cover: https://gw.alipayobjects.com/zos/antfincdn/qZWIjVIkQ7/Button.svg


卡片封面图片在这里设置。

afc163 · 2020-05-27T04:05:25Z

site/theme/static/overview.less

@@ -0,0 +1,3 @@
+.components-overview {
+  padding: 0;
+}


样式可以写在这里。

codecov · 2020-05-27T04:18:17Z

Codecov Report

Merging #24491 into master will decrease coverage by 0.07%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #24491      +/-   ##
==========================================
- Coverage   99.17%   99.10%   -0.08%     
==========================================
  Files         362      363       +1     
  Lines        7291     7230      -61     
  Branches     2034     2013      -21     
==========================================
- Hits         7231     7165      -66     
- Misses         60       65       +5

Impacted Files	Coverage Δ
components/tabs/index.tsx	`96.77% <0.00%> (-3.23%)`	⬇️
components/list/index.tsx	`97.95% <0.00%> (-2.05%)`	⬇️
components/breadcrumb/Breadcrumb.tsx	`98.21% <0.00%> (-1.79%)`	⬇️
components/menu/SubMenu.tsx	`94.11% <0.00%> (-0.62%)`	⬇️
components/menu/MenuItem.tsx	`96.66% <0.00%> (-0.21%)`	⬇️
components/input/Password.tsx	`97.50% <0.00%> (-0.12%)`	⬇️
components/notification/index.tsx	`96.77% <0.00%> (-0.11%)`	⬇️
components/table/hooks/useSelection.tsx	`98.36% <0.00%> (-0.01%)`	⬇️
components/form/FormItem.tsx	`99.15% <0.00%> (-0.01%)`	⬇️
components/upload/UploadList.tsx	`99.24% <0.00%> (-0.01%)`	⬇️
... and 34 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e573ac4...f0d06c7. Read the comment docs.

lgtm-com · 2020-05-27T07:13:12Z

This pull request introduces 1 alert when merging a63985a into 89d7101 - view on LGTM.com

new alerts:

1 for Unused variable, import, function or class

lgtm-com · 2020-05-29T03:58:26Z

This pull request introduces 3 alerts when merging be392ea into 11bbd72 - view on LGTM.com

new alerts:

2 for Unused variable, import, function or class
1 for Potentially unsafe external link

afc163 · 2020-05-29T04:42:23Z

lint 有问题，检查一下。本地 npm run lint。
一行在 <=1680px 时 4 个卡片吧，6 个卡片显得有点窄。
hover 时加 transtion。
加个 skeleton 把，刷新页面的时候有点硬。
顶部文字居中会不会比较好？
文字超长出 ...。
组件顺序和菜单不一致。

afc163 · 2020-05-29T05:52:09Z

有些图片特别糊。

当前页面打开，不要另开新页面。

arvinxx · 2020-05-29T06:57:43Z

lint 有问题，检查一下。本地 npm run lint。

👌

一行在 <=1680px 时 4 个卡片吧，6 个卡片显得有点窄。

👌

hover 时加 transtion。

加了的，可能速度有点快（0.1s），我改慢点吧（0.3s）

顶部文字居中会不会比较好？

居左比较符合习惯吧，而且这样给右边预留了一些操作可能性，例如「预览」按钮，点击后出一个 Modal 或 Popover 预览组件。（怎么实现比较省事还没想好）

文字超长出 ...。

👌

组件顺序和菜单不一致。

👌

*[ ] 有些图片特别糊。

芮晗给的源文件里有些是位图，没法出svg，这个需要重新做下，要再花点时间弄

*[x] 当前页面打开，不要另开新页面。

👌

arvinxx · 2020-05-29T06:58:11Z

加个 skeleton 把，刷新页面的时候有点硬。

是给图片加 skeleton 吗？

afc163 · 2020-05-29T07:18:40Z

https://preview-24491-ant-design.surge.sh/components/overview-cn/ 这个页面刷新一下，看看数据没加载之前的样子。

afc163 · 2020-05-30T09:48:45Z

site/theme/template/utils.tsx

@@ -1,6 +1,6 @@
 import flattenDeep from 'lodash/flattenDeep';
 import flatten from 'lodash/flatten';
-import themeConfig from '../../../site/themeConfig';
+import themeConfig from "../../themeConfig";


Suggested change

import themeConfig from "../../themeConfig";

import themeConfig from '../../themeConfig';

afc163 · 2020-05-30T09:49:55Z

site/theme/template/Content/ComponentOverview.jsx

+                        <Link to={getLocalizedPathname(url, locale === 'zh-CN')}>
+                          <Card
+                            size="small"
+                            className="card"


这些类名容易冲突，加 components-overview 前缀吧。

afc163 · 2020-05-30T09:50:44Z

site/bisheng.config.js

+  //     '0.10.x': 'http://010x.ant.design',
+  //     '0.9.x': 'http://09x.ant.design',
+  //   },
+  // },


别注释，直接删掉。

afc163 · 2020-05-30T09:51:18Z

site/theme/template/Content/ComponentOverview.jsx

+import { Divider, Row, Col, Card, Typography, Skeleton } from 'antd';
+import { getChildren } from 'jsonml.js/lib/utils';
+import { getMetaDescription, getLocalizedPathname, getThemeConfig } from '../utils';
+import * as utils from '../utils';


这两行 import 可以合并。

afc163 · 2020-05-30T10:51:46Z

site/theme/static/overview.less

-    transition: all @animation-duration-base @ease-in-out;
-    &:hover {
-      box-shadow: @shadow-1-down;
+  .components-overview- {


.components-overview { &-title {} }

这样写么。

hengkx · 2020-05-30T13:21:23Z

site/theme/static/index.less

afc163 · 2020-05-31T03:33:05Z

/rebase

pr-triage bot added the PR: draft label May 27, 2020

tests-checker bot suggested changes May 27, 2020

View reviewed changes

afc163 commented May 27, 2020

View reviewed changes

site/theme/static/overview.less Outdated

@@ -0,0 +1,3 @@

.components-overview {

padding: 0;

}

Copy link

Member Author

afc163 May 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

样式可以写在这里。

afc163 force-pushed the components-overview branch from 12f350f to 1d927df Compare May 27, 2020 06:08

afc163 commented May 30, 2020

View reviewed changes

afc163 marked this pull request as ready for review May 30, 2020 12:37

afc163 requested a review from zombieJ as a code owner May 30, 2020 12:37

pr-triage bot added PR: unreviewed and removed PR: draft labels May 30, 2020

afc163 force-pushed the components-overview branch from 0ce7fd4 to 7663951 Compare May 30, 2020 12:49

zombieJ approved these changes May 30, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels May 30, 2020

zombieJ reviewed May 30, 2020

View reviewed changes

site/theme/static/index.less Outdated Show resolved Hide resolved

afc163 and others added 23 commits May 31, 2020 03:33

docs: Add components overview page

037d13d

fix detail

4477e7b

remove ContributorsList form overview page

bee93f5

fix components url

58f1063

improve code style

a235eaa

remove extra file

25da3bb

fix detail

74f9b18

fix lint

cc4d76c

fix lint

896d659

docs: Finish components overview page

974fffa

fix lint

cc5da48

docs: Update cover

127328d

fix lint

e83246b

update cover

4aaa2bb

update menu

faf401e

improve overview page

27be4cd

refactor code

a0d7511

fix order

ac0527c

update title

43140ec

add components count

471ea7d

fix overview page ssr bug

2fef7a9

move less file

5e1c987

update title margin

f0d06c7

github-actions bot force-pushed the components-overview branch from e8583a7 to f0d06c7 Compare May 31, 2020 03:34

afc163 mentioned this pull request May 31, 2020

docs: 4.3.0 changelog #24607

Merged

13 tasks

afc163 merged commit 882cec6 into master May 31, 2020

afc163 deleted the components-overview branch May 31, 2020 03:48

pr-triage bot added PR: merged and removed PR: unreviewed labels May 31, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: 🌈 Add Components overview page #24491

docs: 🌈 Add Components overview page #24491

afc163 commented May 27, 2020 •

edited

Loading

tests-checker bot left a comment

ant-design-bot commented May 27, 2020 •

edited

Loading

ant-design-bot commented May 27, 2020 •

edited

Loading

afc163 May 27, 2020

afc163 May 27, 2020

codecov bot commented May 27, 2020 •

edited

Loading

lgtm-com bot commented May 27, 2020

lgtm-com bot commented May 29, 2020

afc163 commented May 29, 2020 •

edited

Loading

afc163 commented May 29, 2020 •

edited

Loading

arvinxx commented May 29, 2020

arvinxx commented May 29, 2020 •

edited

Loading

afc163 commented May 29, 2020

afc163 May 30, 2020

afc163 May 30, 2020

afc163 May 30, 2020

afc163 May 30, 2020

afc163 May 30, 2020

hengkx commented May 30, 2020

afc163 commented May 31, 2020

	import themeConfig from "../../themeConfig";
	import themeConfig from '../../themeConfig';

docs: 🌈 Add Components overview page #24491

docs: 🌈 Add Components overview page #24491

Conversation

afc163 commented May 27, 2020 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

tests-checker bot left a comment

Choose a reason for hiding this comment

ant-design-bot commented May 27, 2020 • edited Loading

ant-design-bot commented May 27, 2020 • edited Loading

afc163 May 27, 2020

Choose a reason for hiding this comment

afc163 May 27, 2020

Choose a reason for hiding this comment

codecov bot commented May 27, 2020 • edited Loading

Codecov Report

lgtm-com bot commented May 27, 2020

lgtm-com bot commented May 29, 2020

afc163 commented May 29, 2020 • edited Loading

afc163 commented May 29, 2020 • edited Loading

arvinxx commented May 29, 2020

arvinxx commented May 29, 2020 • edited Loading

afc163 commented May 29, 2020

afc163 May 30, 2020

Choose a reason for hiding this comment

afc163 May 30, 2020

Choose a reason for hiding this comment

afc163 May 30, 2020

Choose a reason for hiding this comment

afc163 May 30, 2020

Choose a reason for hiding this comment

afc163 May 30, 2020

Choose a reason for hiding this comment

hengkx commented May 30, 2020

afc163 commented May 31, 2020

afc163 commented May 27, 2020 •

edited

Loading

ant-design-bot commented May 27, 2020 •

edited

Loading

ant-design-bot commented May 27, 2020 •

edited

Loading

codecov bot commented May 27, 2020 •

edited

Loading

afc163 commented May 29, 2020 •

edited

Loading

afc163 commented May 29, 2020 •

edited

Loading

arvinxx commented May 29, 2020 •

edited

Loading