@antv/dumi-theme-antv 0.4.4 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,7 @@
1
- import React from 'react';
2
1
  import '../slots/global';
3
2
  import '../slots/_.less';
4
3
  /**
5
4
  * DocuLayout 是 dumi2 的内置 layout 入口,在这里使用页面路径进行区分成自己不同的 Layout。
6
5
  */
7
- declare const _default: () => React.JSX.Element;
6
+ declare const _default: () => any;
8
7
  export default _default;
@@ -13,7 +13,7 @@ import { Features } from "dumi/theme/slots/Features";
13
13
  import { Cases } from "dumi/theme/slots/Cases";
14
14
  import { Companies } from "dumi/theme/slots/Companies";
15
15
  import { Footer } from "dumi/theme/slots/Footer";
16
- import { size } from 'lodash-es';
16
+ import { isArray, size, get } from 'lodash-es';
17
17
 
18
18
  /**
19
19
  * Index 路由下的入口
@@ -52,7 +52,8 @@ export var Index = function Index() {
52
52
  news: news
53
53
  }, detail);
54
54
  var featuresProps = {
55
- features: features,
55
+ title: get(features, ['title']),
56
+ features: isArray(features) ? features : get(features, ['cards'], []),
56
57
  className: className,
57
58
  style: style,
58
59
  id: id
@@ -67,7 +68,7 @@ export var Index = function Index() {
67
68
  title: "".concat(metaTitle[locale.id]),
68
69
  titleSuffix: "AntV",
69
70
  lang: locale.id
70
- }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
71
+ }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
71
72
  title: /*#__PURE__*/React.createElement(FormattedMessage, {
72
73
  id: isAntVSite ? "2000+ 公司正在使用" : "感谢信赖"
73
74
  }),
@@ -88,12 +88,18 @@
88
88
  "标准版基础产品": "Standard basic products",
89
89
  "标准版扩展产品": "Standard extended products",
90
90
  "移动定制(F版)产品": "Mobile (F series) products",
91
- "感谢信赖":"WE ARE TRUSTED BY",
92
- "更多产品":"More Productions",
93
- "上一篇":"Previous",
94
- "下一篇":"Next",
91
+ "感谢信赖": "WE ARE TRUSTED BY",
92
+ "更多产品": "More Productions",
93
+ "上一篇": "Previous",
94
+ "下一篇": "Next",
95
95
  "演示代码报错,请检查": "演示代码报错,请检查",
96
- "阅读时间约":"Reading needs",
97
- "分钟":"minutes",
98
- "没有找到查询结果":"No query result found"
96
+ "阅读时间约": "Reading needs",
97
+ "分钟": "minutes",
98
+ "没有找到查询结果": "No query result found",
99
+ "企业级 UI 设计语言": "Enterprise UI design language",
100
+ "知识创作与分享工具": "Knowledge creation and Sharing tool",
101
+ "语雀": "Yuque",
102
+ "企业级 Node 开发框架": "Enterprise-class Node development framework",
103
+ "Sketch 工具集": "Sketch Tool set",
104
+ "蚂蚁体验科技": "Liven Experience technology"
99
105
  }
@@ -93,7 +93,13 @@
93
93
  "上一篇": "上一篇",
94
94
  "下一篇": "下一篇",
95
95
  "演示代码报错,请检查": "演示代码报错,请检查",
96
- "阅读时间约":"阅读时间约",
97
- "分钟":"分钟",
98
- "没有找到查询结果":"没有找到查询结果"
96
+ "阅读时间约": "阅读时间约",
97
+ "分钟": "分钟",
98
+ "没有找到查询结果": "没有找到查询结果",
99
+ "企业级 UI 设计语言": "企业级 UI 设计语言",
100
+ "知识创作与分享工具": "知识创作与分享工具",
101
+ "语雀": "语雀",
102
+ "企业级 Node 开发框架": "企业级 Node 开发框架",
103
+ "Sketch 工具集": "Sketch 工具集",
104
+ "蚂蚁体验科技": "蚂蚁体验科技"
99
105
  }
@@ -75,6 +75,9 @@
75
75
  line-height: 47px;
76
76
  border: 1px solid #a3b1bf;
77
77
  transition: all 0.3s;
78
+ display: flex;
79
+ justify-content: center;
80
+ align-items: center;
78
81
 
79
82
  &:hover {
80
83
  border: 1px solid #ced4d9;
@@ -86,7 +89,6 @@
86
89
  }
87
90
 
88
91
  .controlButtonIcon {
89
- width: 100%;
90
92
  color: #a3b1bf;
91
93
  transition: all 0.3s;
92
94
  }
@@ -18,9 +18,6 @@ export var Companies = function Companies(_ref) {
18
18
  key: "title",
19
19
  className: styles.title
20
20
  }, title), /*#__PURE__*/React.createElement("div", {
21
- key: "slicer",
22
- className: styles.slicer
23
- }), /*#__PURE__*/React.createElement("div", {
24
21
  key: "companies-container",
25
22
  className: styles.companiesContainer
26
23
  }, /*#__PURE__*/React.createElement(Row, {
@@ -23,22 +23,14 @@
23
23
  margin: 118px 0 0 0;
24
24
  position: relative;
25
25
  height: min-content;
26
+ text-align: center;
26
27
  color: rgba(0, 0, 0, 1);
27
28
  }
28
29
 
29
- .slicer {
30
- width: 32px;
31
- height: 6px;
32
- background: linear-gradient(145deg,
33
- fade(@primary-color, 70%),
34
- shade(@primary-color, 20%));
35
- margin-top: 64px;
36
- }
37
-
38
30
  .companiesContainer {
39
31
  position: relative;
40
32
  margin: auto;
41
- margin-top: 52px;
33
+ margin-top: 48px;
42
34
 
43
35
  .company {
44
36
  margin-bottom: 20px;
@@ -57,12 +49,6 @@
57
49
  margin: 98px 0 0 0;
58
50
  }
59
51
 
60
- .slicer {
61
- width: 25px;
62
- height: 6px;
63
- margin: 44px 0 44px 0;
64
- }
65
-
66
52
  .content {
67
53
  margin-left: 4.27%;
68
54
  width: 91.64%;
@@ -6,5 +6,7 @@ export interface NewsProps {
6
6
  title: IC;
7
7
  date: string;
8
8
  link: string;
9
+ subTitle?: string;
10
+ img?: string;
9
11
  }
10
12
  export declare const News: React.FC<NewsProps>;
@@ -9,22 +9,25 @@ export var News = function News(_ref) {
9
9
  type = _ref.type,
10
10
  title = _ref.title,
11
11
  date = _ref.date,
12
+ subTitle = _ref.subTitle,
13
+ img = _ref.img,
12
14
  _ref$link = _ref.link,
13
15
  link = _ref$link === void 0 ? '' : _ref$link;
14
16
  var lang = useLocale().id;
15
17
  var children = /*#__PURE__*/React.createElement("div", {
16
18
  className: styles.container
17
- }, /*#__PURE__*/React.createElement("img", {
18
- className: styles.number,
19
- src: numberImages[index],
20
- alt: index.toString()
21
- }), /*#__PURE__*/React.createElement("div", {
19
+ }, /*#__PURE__*/React.createElement("div", {
22
20
  className: styles.content
23
21
  }, /*#__PURE__*/React.createElement("p", {
24
22
  className: styles.description
25
- }, ic(type), " \u2027 ", ic(title)), /*#__PURE__*/React.createElement("p", {
23
+ }, img && /*#__PURE__*/React.createElement("img", {
24
+ src: img,
25
+ alt: "message_title"
26
+ }), type ? "".concat(ic(type), " \u2027 ") : '', ic(title)), date && /*#__PURE__*/React.createElement("p", {
26
27
  className: styles.date
27
- }, date)));
28
+ }, date), subTitle && /*#__PURE__*/React.createElement("p", {
29
+ className: styles.subTitle
30
+ }, ic(subTitle))));
28
31
  if (link.startsWith('http')) {
29
32
  return /*#__PURE__*/React.createElement("a", {
30
33
  href: link,
@@ -1,44 +1,61 @@
1
1
  .news {
2
2
  width: 50%;
3
3
  margin-right: 2%;
4
+ background-color: #FFFFFF;
5
+ border: 1px solid #E5E8EF;
6
+ box-shadow: 0 8px 28px 0 rgba(0,0,0,0.05);
7
+ border-radius: 16px;
8
+ height: 100%;
4
9
 
5
10
  &:last-child {
6
11
  margin-right: 0;
7
12
  }
8
13
 
9
14
  .container {
10
- height: 44px;
11
- display: flex;
12
-
13
- .number {
14
- height: 100%;
15
- width: 44px;
16
- }
15
+ height: 100%;
16
+ color: #1D2129;
17
+ letter-spacing: 0;
17
18
 
18
19
  .content {
19
- padding-left: 20px;
20
- color: rgba(49, 70, 89, 1);
21
- text-align: left;
20
+ height: 100%;
21
+ padding: 0 20px;
22
+ display: flex;
23
+ align-items: center;
24
+ flex-direction: column;
25
+ justify-content: center;
22
26
 
23
27
  .description {
24
28
  top: 0;
25
- font-size: 1.14em;
26
29
  margin-bottom: 0;
27
30
  transition: all 0.3s;
31
+ font-family: PingFangSC;
32
+ font-weight: 500;
33
+ font-size: 20px;
34
+ text-align: center;
35
+ position: relative;
36
+
37
+ >img {
38
+ width: 24px;
39
+ height: 24px;
40
+ position: relative;
41
+ top: -2px;
42
+ left: -4px;
43
+ }
28
44
  }
29
45
 
30
- .date {
31
- color: rgba(216, 203, 249, 1);
46
+ .date,.subTitle {
47
+ color: #424E66;
32
48
  bottom: 0;
33
49
  font-size: 1em;
34
50
  margin-top: 4px;
35
51
  margin-bottom: 0;
52
+ text-align: center;
36
53
  }
37
54
  }
38
55
  }
39
56
 
40
57
  &:hover .description {
41
- color: rgba(89, 126, 247, 1);
58
+ color: #691EFF;
42
59
  }
43
60
  }
44
61
 
@@ -48,12 +65,17 @@
48
65
  width: 100%;
49
66
 
50
67
  &:nth-child(1) {
51
- animation: showAndHide0 6s infinite;
68
+ animation: showAndHide0 9s infinite;
52
69
  }
53
70
 
54
71
  &:nth-child(2) {
55
72
  top: 44px;
56
- animation: showAndHide1 6s infinite;
73
+ animation: showAndHide1 9s infinite;
74
+ }
75
+
76
+ &:nth-child(3) {
77
+ top: 44px;
78
+ animation: showAndHide2 9s infinite;
57
79
  }
58
80
  }
59
81
  }
@@ -68,53 +90,77 @@
68
90
  0% {
69
91
  opacity: 1;
70
92
  top: 0px;
93
+ z-index: 1;
71
94
  }
72
95
 
73
96
  33.3% {
74
- opacity: 1;
75
- top: 0px;
76
- }
77
-
78
- 50% {
79
97
  opacity: 0;
80
- top: -30px;
98
+ top: 0px;
99
+ z-index: 0;
81
100
  }
82
101
 
83
- 83.3% {
102
+ 66.6% {
84
103
  opacity: 0;
85
104
  top: 30px;
105
+ z-index: 0;
86
106
  }
87
107
 
88
108
  100% {
89
109
  opacity: 1;
90
110
  top: 0px;
111
+ z-index: 1;
91
112
  }
92
113
  }
93
114
 
94
- /* Standard syntax */
95
115
  @keyframes showAndHide1 {
96
116
  0% {
97
117
  opacity: 0;
98
118
  top: 30px;
119
+ z-index: 0;
99
120
  }
100
121
 
101
122
  33.3% {
123
+ opacity: 1;
124
+ top: 0px;
125
+ z-index: 1;
126
+ }
127
+
128
+ 66.6% {
129
+ opacity: 0;
130
+ top: 0px;
131
+ z-index: 0;
132
+ }
133
+
134
+ 100% {
102
135
  opacity: 0;
103
136
  top: 30px;
137
+ z-index: 0;
104
138
  }
139
+ }
105
140
 
106
- 50% {
107
- opacity: 1;
108
- top: 0px;
141
+ @keyframes showAndHide2 {
142
+ 0% {
143
+ opacity: 0;
144
+ top: 30px;
145
+ z-index: 0;
146
+ }
147
+
148
+ 33.3% {
149
+ opacity: 0;
150
+ top: 30px;
151
+ z-index: 0;
109
152
  }
110
153
 
111
- 83.3% {
154
+ 66.6% {
112
155
  opacity: 1;
113
156
  top: 0px;
157
+ z-index: 1;
114
158
  }
115
159
 
116
160
  100% {
117
161
  opacity: 0;
118
- top: -30px;
162
+ top: 0px;
163
+ z-index: 0;
119
164
  }
120
165
  }
166
+
@@ -22,8 +22,6 @@ import { useLocale } from 'dumi/dist/client/theme-api';
22
22
  import { ic } from "../hooks";
23
23
  import { News } from "./News";
24
24
  import styles from "./index.module.less";
25
- var AssetsNewsURL = 'https://assets.antv.antgroup.com/antv/news.json';
26
-
27
25
  /**
28
26
  * Index.技术栈的描述区域!
29
27
  * 各自配置
@@ -49,7 +47,7 @@ export var Detail = function Detail(_ref) {
49
47
  setRemoteNews = _useState2[1];
50
48
  var lang = useLocale().id;
51
49
  useEffect(function () {
52
- fetch(AssetsNewsURL).then(function (res) {
50
+ fetch('https://site-data-pre.alipay.com/antv/banner-messages.json').then(function (res) {
53
51
  return res.json();
54
52
  }).then(function (data) {
55
53
  setRemoteNews(data);
@@ -107,7 +105,7 @@ export var Detail = function Detail(_ref) {
107
105
  repo: githubObj.name
108
106
  })))), /*#__PURE__*/React.createElement("div", {
109
107
  className: cx(styles.news, 'news')
110
- }, (news || remoteNews).slice(0, 2).map(function (n, i) {
108
+ }, (news || remoteNews).slice(0, 3).map(function (n, i) {
111
109
  return /*#__PURE__*/React.createElement(News, _extends({
112
110
  key: i,
113
111
  index: i
@@ -66,11 +66,17 @@
66
66
  font-family: AlibabaPuHuiTiR;
67
67
  font-size: 18px;
68
68
  color: #424E66;
69
+ max-height: 145px;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ -webkit-line-clamp: 4;
73
+ display: -webkit-box;
74
+ -webkit-box-orient: vertical;
69
75
  }
70
76
 
71
77
  .buttons {
72
78
  display: flex;
73
- margin-top: 5.56%;
79
+ margin-top: max(3%, 40px);
74
80
 
75
81
  .buttonLink {
76
82
  display: flex;
@@ -83,7 +89,8 @@
83
89
  transition: all 0.3s;
84
90
  text-align: center;
85
91
  height: 54px;
86
- width: 166px;
92
+ min-width: 166px;
93
+ padding: 0 10px;
87
94
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.10);
88
95
  background-color: #691EFF;
89
96
  font-size: 18px;
@@ -192,12 +199,14 @@
192
199
  }
193
200
 
194
201
  .news {
195
- width: 80%;
202
+ width: 100%;
196
203
  display: flex;
197
- bottom: 40px;
204
+ bottom: 30px;
198
205
  position: absolute;
199
206
  z-index: 3;
200
- margin-left: 4.5%;
207
+ height: 128px;
208
+ box-sizing: border-box;
209
+ padding: 0 4.5%;
201
210
  }
202
211
 
203
212
  .teaser {
@@ -284,11 +293,11 @@
284
293
  }
285
294
 
286
295
  .news {
287
- width: 100%;
296
+ width: 91%;
297
+ padding: 0;
288
298
  display: block;
289
- bottom: 20px;
290
- height: 44px;
291
- overflow: hidden;
299
+ bottom: 10x;
300
+ left: 4.5%;
292
301
  }
293
302
 
294
303
  .teaser {
@@ -328,10 +337,16 @@
328
337
  .text {
329
338
  .buttons {
330
339
  margin-top: 70%;
340
+ position: relative;
341
+ top: -170px;
331
342
 
332
343
  .githubWrapper {
333
344
  display: none;
334
345
  }
346
+
347
+ .buttonLink:nth-child(2) {
348
+ margin-right: 0;
349
+ }
335
350
  }
336
351
  }
337
352
 
@@ -354,20 +369,14 @@
354
369
  .wrapper {
355
370
  .text {
356
371
  height: 70%;
372
+ }
357
373
 
358
- .buttons {
359
- bottom: 10px;
360
- margin-top: unset;
361
- z-index: 1;
362
- position: absolute;
363
- left: 0;
364
- width: 100%;
365
- justify-content: center;
366
- }
374
+ .news {
375
+ height: 160px;
367
376
  }
368
377
 
369
378
  .teaser {
370
- top: 14%;
379
+ top: 10%;
371
380
  }
372
381
  }
373
382
  }
@@ -1,10 +1,15 @@
1
1
  .card {
2
2
  background-color: #fff;
3
- height: auto;
3
+ height: 100%;
4
+ padding: 36px 70px;
5
+ box-sizing: border-box;
4
6
 
5
7
  .content {
6
- padding-left: 15.9%;
7
- padding-right: 15.9%;
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: space-between;
12
+ height: 100%;
8
13
 
9
14
  .icon {
10
15
  height: 60px;
@@ -13,8 +18,12 @@
13
18
  .title {
14
19
  font-size: 1.714em;
15
20
  color: #000;
16
- margin-top: 40px;
17
- margin-bottom: 0;
21
+ margin-top: 28px;
22
+ margin-bottom: 11px;
23
+ font-family: AlibabaPuHuiTiM;
24
+ color: #1D2129;
25
+ text-align: center;
26
+ line-height: 32px;
18
27
  }
19
28
 
20
29
  .description {
@@ -23,13 +32,13 @@
23
32
  color: rgba(105, 123, 140, 1);
24
33
  font-size: 1em;
25
34
  line-height: 1.8em;
26
- margin-top: 24px;
35
+ margin-top: 11px;
27
36
  margin-bottom: 0;
28
37
  }
29
38
  }
30
39
  }
31
40
 
32
- @media (max-width: 768px) {
41
+ @media (max-width: 900px) {
33
42
  .cards {
34
43
  .cardWrapper {
35
44
  .card {
@@ -22,69 +22,18 @@ export var Features = function Features(_ref) {
22
22
  });
23
23
  return children;
24
24
  };
25
-
26
- // for small screen
27
- var getDots = function getDots() {
28
- var dots = [];
29
- var length = features.length;
30
- var startTop = 45;
31
- var cardHeight = 350;
32
- var startLeftPercent = 0.028;
33
- var rows = length + 1;
34
- for (var i = 0; i < rows; i += 1) {
35
- var yOffset = 1;
36
- var top = "".concat(startTop + cardHeight * i - yOffset, "px");
37
- var leftColLeft = "".concat(startLeftPercent * 100, "%");
38
- var rigthColLeft = "".concat((startLeftPercent + 0.892) * 100, "%");
39
- dots.push( /*#__PURE__*/React.createElement("div", {
40
- key: "".concat(i, "-0"),
41
- className: styles.dot,
42
- style: {
43
- marginLeft: leftColLeft,
44
- marginTop: top
45
- }
46
- }));
47
- dots.push( /*#__PURE__*/React.createElement("div", {
48
- key: "".concat(i, "-1"),
49
- className: styles.dot,
50
- style: {
51
- marginLeft: rigthColLeft,
52
- marginTop: top
53
- }
54
- }));
55
- }
56
- return dots;
57
- };
58
25
  return /*#__PURE__*/React.createElement("div", {
59
26
  id: id,
60
27
  className: cx(styles.wrapper, className),
61
28
  style: style
62
- }, title ? /*#__PURE__*/React.createElement("div", {
63
- className: cx(styles.lefttopWithTitle, styles.lefttop)
64
- }) : /*#__PURE__*/React.createElement("div", {
65
- className: cx(styles.lefttopWithoutTitle, styles.lefttop)
66
- }), /*#__PURE__*/React.createElement("div", {
67
- className: title ? styles.rightbottom : cx(styles.rightbottomWithoutTitle, styles.rightbottom)
68
29
  }, /*#__PURE__*/React.createElement("div", {
69
- className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)
70
- }), /*#__PURE__*/React.createElement("div", {
71
- className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)
72
- }), /*#__PURE__*/React.createElement("div", {
73
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)
74
- }), /*#__PURE__*/React.createElement("div", {
75
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)
76
- }), /*#__PURE__*/React.createElement("div", {
77
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)
78
- }), /*#__PURE__*/React.createElement("div", {
79
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh4)
80
- }), getDots()), /*#__PURE__*/React.createElement("div", {
81
30
  className: styles.content
82
31
  }, /*#__PURE__*/React.createElement("div", {
83
32
  key: "content"
84
33
  }, /*#__PURE__*/React.createElement("p", {
85
34
  key: "title",
86
35
  className: styles.title
87
- }, title ? title : ''), /*#__PURE__*/React.createElement("div", {
36
+ }, title ? ic(title) : ''), /*#__PURE__*/React.createElement("div", {
88
37
  key: "block",
89
38
  className: styles.cardsContainer
90
39
  }, /*#__PURE__*/React.createElement(Row, {