@antv/dumi-theme-antv 0.3.0-beta.4 → 0.3.0-beta.5
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.
- package/dist/layouts/DocLayout.js +12 -6
- package/dist/plugin/examples.d.ts +9 -5
- package/dist/plugin/examples.js +3 -2
- package/dist/slots/Cases/index.d.ts +1 -0
- package/dist/slots/CodeEditor/index.js +8 -2
- package/dist/slots/CodePreview/index.module.less +3 -5
- package/dist/slots/CodeRunner/index.d.ts +2 -2
- package/dist/slots/CodeRunner/index.js +3 -2
- package/dist/slots/CodeRunner/utils.d.ts +3 -2
- package/dist/slots/CodeRunner/utils.js +1 -1
- package/dist/slots/Detail/News.d.ts +1 -0
- package/dist/slots/Detail/index.d.ts +1 -0
- package/dist/slots/Features/FeatureCard.d.ts +1 -0
- package/dist/slots/Header/index.js +6 -6
- package/dist/slots/Loading/index.d.ts +6 -1
- package/dist/slots/Loading/index.js +24 -10
- package/dist/slots/Loading/index.module.less +276 -9
- package/dist/slots/ManualContent/index.js +2 -1
- package/dist/types.d.ts +83 -0
- package/dist/typings.d.ts +0 -101
- package/package.json +1 -1
- package/dist/slots/Loading.d.ts +0 -5
- package/dist/slots/Loading.js +0 -8
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import { useOutlet, useLocation } from 'dumi';
|
|
3
3
|
import { Index } from "./entry/Index";
|
|
4
4
|
import { API } from "./entry/API";
|
|
@@ -11,23 +11,29 @@ import "../slots/_.less";
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export default (function () {
|
|
14
|
+
// 打印控制台文案
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
console.log("%cAntV 让数据栩栩如生", "color:#5B7102; font-size: 20px;"), console.log("%c新一代数据可视化解决方案", "color:#5B7102;"), console.log("--------------------------"), console.log("%c关注我们的微信公众号 %c“数据可视化 AntV”%c,获取我们团队最新的进展、动态、分享,也欢迎加入我们!", "color: red", "color: pink", "color: red");
|
|
17
|
+
}, []);
|
|
14
18
|
var outlet = useOutlet();
|
|
15
19
|
|
|
16
20
|
var _useLocation = useLocation(),
|
|
17
21
|
pathname = _useLocation.pathname;
|
|
18
22
|
|
|
19
|
-
var
|
|
23
|
+
var path = pathname.toLowerCase(); // 统一去掉中英文前缀
|
|
24
|
+
|
|
25
|
+
var p = path.replace('/zh/', '/').replace('/en/', '/'); // 首页
|
|
20
26
|
|
|
21
27
|
if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // API 页面
|
|
22
28
|
|
|
23
|
-
if (p.startsWith('/api') ||
|
|
24
|
-
p.startsWith('/
|
|
29
|
+
if (p.startsWith('/api') || // 这两个是兼容之前的
|
|
30
|
+
p.startsWith('/docs/api')) {
|
|
25
31
|
return /*#__PURE__*/React.createElement(API, null, " ", outlet, " ");
|
|
26
32
|
} // 教程页面
|
|
27
33
|
|
|
28
34
|
|
|
29
|
-
if (p.startsWith('/manual') ||
|
|
30
|
-
p.startsWith('/
|
|
35
|
+
if (p.startsWith('/manual') || // 这两个是兼容之前的
|
|
36
|
+
p.startsWith('/docs/manual')) {
|
|
31
37
|
return /*#__PURE__*/React.createElement(Manual, null, " ", outlet, " ");
|
|
32
38
|
} // More router, add here...
|
|
33
39
|
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
+
import { Example, ExampleTopic } from '../types';
|
|
1
2
|
/**
|
|
2
3
|
* 获取案例页面的所有主题
|
|
3
4
|
*
|
|
4
|
-
* @returns {
|
|
5
|
+
* @returns {ExampleTopic[]} 案例主题列表
|
|
5
6
|
* @author YuZhanglong <loveyzl1123@gmail.com>
|
|
6
7
|
*/
|
|
7
|
-
export declare const getExamplesPageTopics: (exampleTopics:
|
|
8
|
+
export declare const getExamplesPageTopics: (exampleTopics: ExampleTopic[]) => {
|
|
8
9
|
id: string;
|
|
9
|
-
title:
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
title: {
|
|
11
|
+
zh: string;
|
|
12
|
+
en: string;
|
|
13
|
+
};
|
|
14
|
+
icon: string;
|
|
15
|
+
examples: Example[];
|
|
12
16
|
childrenKey: string;
|
|
13
17
|
}[];
|
package/dist/plugin/examples.js
CHANGED
|
@@ -64,10 +64,11 @@ var getTopicExamples = (topicPath) => {
|
|
|
64
64
|
en: exampleMetaEnContent.attributes.title,
|
|
65
65
|
zh: exampleMetaZhContent.attributes.title
|
|
66
66
|
},
|
|
67
|
-
childrenKey: "demos"
|
|
67
|
+
childrenKey: "demos",
|
|
68
|
+
order: exampleMetaZhContent.attributes.order || 0
|
|
68
69
|
};
|
|
69
70
|
return example;
|
|
70
|
-
});
|
|
71
|
+
}).sort((a, b) => a.order - b.order);
|
|
71
72
|
};
|
|
72
73
|
var getExamplesPageTopics = (exampleTopics) => {
|
|
73
74
|
return exampleTopics.map(({ id, slug, title, icon }) => {
|
|
@@ -16,6 +16,7 @@ import { useSiteData, useLocale } from 'dumi';
|
|
|
16
16
|
import { debounce, noop } from 'lodash-es';
|
|
17
17
|
import { replaceInsertCss, execute, compile } from "./utils";
|
|
18
18
|
import { Toolbar, EDITOR_TABS } from "./Toolbar";
|
|
19
|
+
import { Loading } from "../Loading";
|
|
19
20
|
import styles from "./index.module.less";
|
|
20
21
|
loader.config({
|
|
21
22
|
'vs/nls': {
|
|
@@ -149,6 +150,11 @@ export var CodeEditor = function CodeEditor(_ref) {
|
|
|
149
150
|
});
|
|
150
151
|
}
|
|
151
152
|
}, []);
|
|
153
|
+
useEffect(function () {
|
|
154
|
+
if (monacoRef.current) {
|
|
155
|
+
monacoRef.current.setValue(currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2));
|
|
156
|
+
}
|
|
157
|
+
}, [currentEditorTab]);
|
|
152
158
|
var onCodeChange = useCallback(function (value) {
|
|
153
159
|
if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
|
|
154
160
|
setCode(value);
|
|
@@ -177,9 +183,9 @@ export var CodeEditor = function CodeEditor(_ref) {
|
|
|
177
183
|
}
|
|
178
184
|
}, /*#__PURE__*/React.createElement(MonacoEditor, {
|
|
179
185
|
language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
|
|
180
|
-
value:
|
|
186
|
+
value: code,
|
|
181
187
|
path: relativePath,
|
|
182
|
-
loading:
|
|
188
|
+
loading: /*#__PURE__*/React.createElement(Loading, null),
|
|
183
189
|
options: {
|
|
184
190
|
readOnly: currentEditorTab === EDITOR_TABS.DATA,
|
|
185
191
|
automaticLayout: true,
|
|
@@ -10,24 +10,22 @@
|
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
|
|
12
12
|
.header {
|
|
13
|
-
flex: 0
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
.content {
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
16
|
position: relative;
|
|
17
|
+
flex: 1;
|
|
18
|
+
min-height: 0;
|
|
20
19
|
|
|
21
20
|
:global(#playgroundScriptContainer) {
|
|
22
|
-
flex: 1;
|
|
23
21
|
position: relative;
|
|
24
22
|
width: 100%;
|
|
25
23
|
height: 100%;
|
|
26
24
|
|
|
27
25
|
:global(#container) {
|
|
26
|
+
position: relative;
|
|
28
27
|
width: 100%;
|
|
29
28
|
height: 100%;
|
|
30
|
-
position: relative;
|
|
31
29
|
}
|
|
32
30
|
}
|
|
33
31
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ExampleTopic } from '../../types';
|
|
3
3
|
declare type CodeRunnerProps = {
|
|
4
4
|
topic: string;
|
|
5
5
|
example: string;
|
|
6
6
|
demo: string;
|
|
7
|
-
exampleTopics:
|
|
7
|
+
exampleTopics: ExampleTopic[];
|
|
8
8
|
notFound?: React.Element;
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
@@ -40,7 +40,8 @@ export var CodeRunner = function CodeRunner(_ref) {
|
|
|
40
40
|
var _useSiteData = useSiteData(),
|
|
41
41
|
themeConfig = _useSiteData.themeConfig;
|
|
42
42
|
|
|
43
|
-
var githubUrl = themeConfig.githubUrl
|
|
43
|
+
var githubUrl = themeConfig.githubUrl,
|
|
44
|
+
playground = themeConfig.playground;
|
|
44
45
|
|
|
45
46
|
var _useState = useState(),
|
|
46
47
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -72,6 +73,6 @@ export var CodeRunner = function CodeRunner(_ref) {
|
|
|
72
73
|
onFullscreen: setFullscreen,
|
|
73
74
|
onDestroy: noop,
|
|
74
75
|
onReady: noop,
|
|
75
|
-
playground:
|
|
76
|
+
playground: playground
|
|
76
77
|
}));
|
|
77
78
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { Demo, ExampleTopic } from '../../types';
|
|
1
2
|
/**
|
|
2
3
|
* 将数据结构转化成 map,便于后续检索的速度
|
|
3
4
|
* @param exampleTopics
|
|
4
5
|
* @returns
|
|
5
6
|
*/
|
|
6
|
-
export declare function getExampleTopicMap(exampleTopics:
|
|
7
|
+
export declare function getExampleTopicMap(exampleTopics: ExampleTopic[]): Map<string, Demo>;
|
|
7
8
|
/**
|
|
8
9
|
* 从 Context 信息中,获取到 Example 相关的信息,用于页面渲染
|
|
9
10
|
*/
|
|
10
|
-
export declare function getDemoInfo(exampleTopics:
|
|
11
|
+
export declare function getDemoInfo(exampleTopics: ExampleTopic[], topic: string, example: string, demo: string): Demo;
|
|
@@ -5,12 +5,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
5
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
|
|
7
7
|
import { map } from 'lodash-es';
|
|
8
|
+
|
|
8
9
|
/**
|
|
9
10
|
* 将数据结构转化成 map,便于后续检索的速度
|
|
10
11
|
* @param exampleTopics
|
|
11
12
|
* @returns
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
14
|
export function getExampleTopicMap(exampleTopics) {
|
|
15
15
|
var exampleTopicMap = new Map();
|
|
16
16
|
map(exampleTopics, function (topic) {
|
|
@@ -22,7 +22,7 @@ import { useMedia } from 'react-use';
|
|
|
22
22
|
import { useNavigate } from "react-router-dom";
|
|
23
23
|
import cx from 'classnames';
|
|
24
24
|
import { useSiteData, useLocale } from 'dumi';
|
|
25
|
-
import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined,
|
|
25
|
+
import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LinkOutlined, CheckOutlined } from '@ant-design/icons';
|
|
26
26
|
import { Popover, Menu, Dropdown, Select } from 'antd';
|
|
27
27
|
import { map, size } from 'lodash-es';
|
|
28
28
|
import { Search } from "./Search";
|
|
@@ -173,12 +173,12 @@ var HeaderComponent = function HeaderComponent(_ref) {
|
|
|
173
173
|
className: cx(styles.menu, (_cx = {}, _defineProperty(_cx, styles.popup, !isWide), _defineProperty(_cx, styles.popupHidden, !popupMenuVisible), _cx))
|
|
174
174
|
},
|
|
175
175
|
/** 最左侧的菜单,一般是 教程、API、示例,或者其他自定义,有配置文件中的 `navs` 决定 */
|
|
176
|
-
size(navs)
|
|
176
|
+
size(navs) ? /*#__PURE__*/React.createElement(Navs, {
|
|
177
177
|
navs: navs,
|
|
178
178
|
path: window.location.pathname
|
|
179
|
-
}),
|
|
179
|
+
}) : null,
|
|
180
180
|
/** 生态产品 */
|
|
181
|
-
size(ecosystems)
|
|
181
|
+
size(ecosystems) ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, {
|
|
182
182
|
className: styles.ecoSystems,
|
|
183
183
|
overlay: /*#__PURE__*/React.createElement(Menu, null, map(ecosystems, function (_ref2) {
|
|
184
184
|
var url = _ref2.url,
|
|
@@ -189,13 +189,13 @@ var HeaderComponent = function HeaderComponent(_ref) {
|
|
|
189
189
|
target: "_blank",
|
|
190
190
|
rel: "noreferrer",
|
|
191
191
|
href: url
|
|
192
|
-
}, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(
|
|
192
|
+
}, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(LinkOutlined, null)));
|
|
193
193
|
}))
|
|
194
194
|
}, /*#__PURE__*/React.createElement("span", null, useT('周边生态'), /*#__PURE__*/React.createElement(DownOutlined, {
|
|
195
195
|
style: {
|
|
196
196
|
marginLeft: '6px'
|
|
197
197
|
}
|
|
198
|
-
})))),
|
|
198
|
+
})))) : null,
|
|
199
199
|
/** 产品列表 */
|
|
200
200
|
showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, useT('所有产品'), !isAntVHome ? /*#__PURE__*/React.createElement("img", {
|
|
201
201
|
src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import styles from "./index.module.less";
|
|
3
|
+
/**
|
|
4
|
+
* Loading
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
var Loading = function Loading() {
|
|
3
8
|
return /*#__PURE__*/React.createElement("div", {
|
|
4
|
-
style: {
|
|
5
|
-
height: '100vh'
|
|
6
|
-
}
|
|
7
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
8
9
|
style: {
|
|
9
10
|
position: 'relative',
|
|
10
|
-
height: '100%'
|
|
11
|
+
height: '100%',
|
|
12
|
+
width: '100%'
|
|
11
13
|
}
|
|
12
14
|
}, /*#__PURE__*/React.createElement("div", {
|
|
13
|
-
className:
|
|
14
|
-
}, /*#__PURE__*/React.createElement("div",
|
|
15
|
+
className: styles.loading
|
|
16
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
17
|
+
className: "container"
|
|
18
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
15
19
|
className: "loader"
|
|
16
20
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
17
21
|
viewBox: "0 0 80 80"
|
|
@@ -61,5 +65,15 @@ export var Loading = function Loading() {
|
|
|
61
65
|
stroke: "url(#gradient)"
|
|
62
66
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
63
67
|
className: "loading-text"
|
|
64
|
-
}, /*#__PURE__*/React.createElement("p", null, "Loading...")))))
|
|
65
|
-
};
|
|
68
|
+
}, /*#__PURE__*/React.createElement("p", null, "Loading...")))));
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var PageLoading = function PageLoading() {
|
|
72
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
style: {
|
|
74
|
+
height: '100vh'
|
|
75
|
+
}
|
|
76
|
+
}, /*#__PURE__*/React.createElement(Loading, null));
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export { Loading, PageLoading };
|
|
@@ -1,12 +1,279 @@
|
|
|
1
|
-
|
|
1
|
+
.loading {
|
|
2
|
+
position: absolute;
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
|
+
z-index: 9999;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
background-color: #fff;
|
|
9
|
+
border: 1px solid #f0f0f0;
|
|
2
10
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
11
|
+
:global {
|
|
12
|
+
.container {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
position: absolute;
|
|
15
|
+
left: 50%;
|
|
16
|
+
top: 50%;
|
|
17
|
+
margin: -50px 0 0 -120px;
|
|
18
|
+
}
|
|
19
|
+
.loader {
|
|
20
|
+
--duration: 3s;
|
|
21
|
+
width: 44px;
|
|
22
|
+
height: 44px;
|
|
23
|
+
position: relative;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
margin: 0 16px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.loader:before {
|
|
29
|
+
content: ' ';
|
|
30
|
+
width: 6px;
|
|
31
|
+
height: 6px;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
position: absolute;
|
|
34
|
+
display: block;
|
|
35
|
+
background: #ff700a;
|
|
36
|
+
top: 37px;
|
|
37
|
+
left: 19px;
|
|
38
|
+
-webkit-transform: translate(-18px, -18px);
|
|
39
|
+
transform: translate(-18px, -18px);
|
|
40
|
+
-webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
41
|
+
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.loader svg {
|
|
45
|
+
display: block;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.loader svg rect,
|
|
51
|
+
.loader svg polygon,
|
|
52
|
+
.loader svg circle {
|
|
53
|
+
fill: none;
|
|
54
|
+
stroke-width: 10px;
|
|
55
|
+
stroke-linejoin: round;
|
|
56
|
+
stroke-linecap: round;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.loader svg polygon {
|
|
60
|
+
stroke-dasharray: 145 76 145 76;
|
|
61
|
+
stroke-dashoffset: 0;
|
|
62
|
+
-webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
63
|
+
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.loader svg rect {
|
|
67
|
+
stroke-dasharray: 192 64 192 64;
|
|
68
|
+
stroke-dashoffset: 0;
|
|
69
|
+
-webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
70
|
+
animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.loader svg circle {
|
|
74
|
+
stroke-dasharray: 150 50 150 50;
|
|
75
|
+
stroke-dashoffset: 75;
|
|
76
|
+
-webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
77
|
+
animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.loader.triangle {
|
|
81
|
+
width: 48px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.loader.triangle:before {
|
|
85
|
+
left: 21px;
|
|
86
|
+
-webkit-transform: translate(-10px, -18px);
|
|
87
|
+
transform: translate(-10px, -18px);
|
|
88
|
+
-webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
89
|
+
animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.loading-text {
|
|
93
|
+
text-align: center;
|
|
94
|
+
height: 40px;
|
|
95
|
+
line-height: 40px;
|
|
96
|
+
font-size: 12px;
|
|
97
|
+
letter-spacing: 0.1em;
|
|
98
|
+
color: #666;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@-webkit-keyframes ~":global(pathTriangle)" {
|
|
104
|
+
33% {
|
|
105
|
+
stroke-dashoffset: 74;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
66% {
|
|
109
|
+
stroke-dashoffset: 147;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
100% {
|
|
113
|
+
stroke-dashoffset: 221;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@keyframes ~":global(pathTriangle)" {
|
|
118
|
+
33% {
|
|
119
|
+
stroke-dashoffset: 74;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
66% {
|
|
123
|
+
stroke-dashoffset: 147;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
100% {
|
|
127
|
+
stroke-dashoffset: 221;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@-webkit-keyframes ~":global(dotTriangle)" {
|
|
132
|
+
33% {
|
|
133
|
+
-webkit-transform: translate(0, 0);
|
|
134
|
+
transform: translate(0, 0);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
66% {
|
|
138
|
+
-webkit-transform: translate(10px, -18px);
|
|
139
|
+
transform: translate(10px, -18px);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
100% {
|
|
143
|
+
-webkit-transform: translate(-10px, -18px);
|
|
144
|
+
transform: translate(-10px, -18px);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@keyframes ~":global(dotTriangle)" {
|
|
149
|
+
33% {
|
|
150
|
+
-webkit-transform: translate(0, 0);
|
|
151
|
+
transform: translate(0, 0);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
66% {
|
|
155
|
+
-webkit-transform: translate(10px, -18px);
|
|
156
|
+
transform: translate(10px, -18px);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
100% {
|
|
160
|
+
-webkit-transform: translate(-10px, -18px);
|
|
161
|
+
transform: translate(-10px, -18px);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@-webkit-keyframes ~":global(pathRect)" {
|
|
166
|
+
25% {
|
|
167
|
+
stroke-dashoffset: 64;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
50% {
|
|
171
|
+
stroke-dashoffset: 128;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
75% {
|
|
175
|
+
stroke-dashoffset: 192;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
100% {
|
|
179
|
+
stroke-dashoffset: 256;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@keyframes ~":global(pathRect)" {
|
|
184
|
+
25% {
|
|
185
|
+
stroke-dashoffset: 64;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
50% {
|
|
189
|
+
stroke-dashoffset: 128;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
75% {
|
|
193
|
+
stroke-dashoffset: 192;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
100% {
|
|
197
|
+
stroke-dashoffset: 256;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@-webkit-keyframes ~":global(dotRect)" {
|
|
202
|
+
25% {
|
|
203
|
+
-webkit-transform: translate(0, 0);
|
|
204
|
+
transform: translate(0, 0);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
50% {
|
|
208
|
+
-webkit-transform: translate(18px, -18px);
|
|
209
|
+
transform: translate(18px, -18px);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
75% {
|
|
213
|
+
-webkit-transform: translate(0, -36px);
|
|
214
|
+
transform: translate(0, -36px);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
100% {
|
|
218
|
+
-webkit-transform: translate(-18px, -18px);
|
|
219
|
+
transform: translate(-18px, -18px);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@keyframes ~":global(dotRect)" {
|
|
224
|
+
25% {
|
|
225
|
+
-webkit-transform: translate(0, 0);
|
|
226
|
+
transform: translate(0, 0);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
50% {
|
|
230
|
+
-webkit-transform: translate(18px, -18px);
|
|
231
|
+
transform: translate(18px, -18px);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
75% {
|
|
235
|
+
-webkit-transform: translate(0, -36px);
|
|
236
|
+
transform: translate(0, -36px);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
100% {
|
|
240
|
+
-webkit-transform: translate(-18px, -18px);
|
|
241
|
+
transform: translate(-18px, -18px);
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
@-webkit-keyframes ~":global(pathCircle)" {
|
|
246
|
+
25% {
|
|
247
|
+
stroke-dashoffset: 125;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
50% {
|
|
251
|
+
stroke-dashoffset: 175;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
75% {
|
|
255
|
+
stroke-dashoffset: 225;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
100% {
|
|
259
|
+
stroke-dashoffset: 275;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
@keyframes ~":global(pathCircle)" {
|
|
264
|
+
25% {
|
|
265
|
+
stroke-dashoffset: 125;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
50% {
|
|
269
|
+
stroke-dashoffset: 175;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
75% {
|
|
273
|
+
stroke-dashoffset: 225;
|
|
274
|
+
}
|
|
6
275
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
color: @primary-color;
|
|
10
|
-
text-align: center;
|
|
276
|
+
100% {
|
|
277
|
+
stroke-dashoffset: 275;
|
|
11
278
|
}
|
|
12
|
-
}
|
|
279
|
+
}
|
|
@@ -205,9 +205,10 @@ export var ManualContent = function ManualContent(_ref) {
|
|
|
205
205
|
// 兜底 如果 nav 指定有误则重定向到 indexDocRoute
|
|
206
206
|
if (window.location.pathname !== indexRoute) {
|
|
207
207
|
navigate(indexRoute);
|
|
208
|
-
return;
|
|
209
208
|
}
|
|
209
|
+
}, []); // 改变菜单栏选中状态
|
|
210
210
|
|
|
211
|
+
useEffect(function () {
|
|
211
212
|
setDefaultSelectedKey([window.location.pathname]);
|
|
212
213
|
}, [window.location.pathname]);
|
|
213
214
|
useEffect(function () {
|
package/dist/types.d.ts
CHANGED
|
@@ -2,3 +2,86 @@ export interface IThemeConfig {
|
|
|
2
2
|
[key: string]: any;
|
|
3
3
|
}
|
|
4
4
|
export declare type Status = 'responded' | 'error' | 'timeout';
|
|
5
|
+
/**
|
|
6
|
+
* 配置文件中的国际化配置
|
|
7
|
+
*/
|
|
8
|
+
export declare type IC = string | {
|
|
9
|
+
zh: string;
|
|
10
|
+
en: string;
|
|
11
|
+
};
|
|
12
|
+
interface TreeNode {
|
|
13
|
+
/**
|
|
14
|
+
* id
|
|
15
|
+
*/
|
|
16
|
+
id: string;
|
|
17
|
+
/**
|
|
18
|
+
* 孩子节点 key
|
|
19
|
+
*/
|
|
20
|
+
childrenKey?: string;
|
|
21
|
+
/**
|
|
22
|
+
* 标题(支持国际化)
|
|
23
|
+
*/
|
|
24
|
+
title: {
|
|
25
|
+
zh: string;
|
|
26
|
+
en: string;
|
|
27
|
+
};
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}
|
|
30
|
+
/** 案例 DEMO */
|
|
31
|
+
export interface Demo extends TreeNode {
|
|
32
|
+
/**
|
|
33
|
+
* 截图
|
|
34
|
+
*/
|
|
35
|
+
screenshot: string;
|
|
36
|
+
/**
|
|
37
|
+
* TypeScript 源码文件
|
|
38
|
+
*/
|
|
39
|
+
source: string;
|
|
40
|
+
/**
|
|
41
|
+
* DEMO 代码文件名称
|
|
42
|
+
*/
|
|
43
|
+
filename: string;
|
|
44
|
+
/**
|
|
45
|
+
* 衍生属性,通过 topic.id + example.id + demo.id 可以计算获取
|
|
46
|
+
*/
|
|
47
|
+
relativePath?: string;
|
|
48
|
+
/**
|
|
49
|
+
* 是否为新品
|
|
50
|
+
*/
|
|
51
|
+
isNew?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* 目标 example
|
|
54
|
+
*/
|
|
55
|
+
targetExample?: Example;
|
|
56
|
+
/**
|
|
57
|
+
* 目标主题
|
|
58
|
+
*/
|
|
59
|
+
targetTopic?: ExampleTopic;
|
|
60
|
+
}
|
|
61
|
+
/** 示例 */
|
|
62
|
+
export interface Example extends TreeNode {
|
|
63
|
+
/**
|
|
64
|
+
* 图标
|
|
65
|
+
*/
|
|
66
|
+
icon: string;
|
|
67
|
+
/**
|
|
68
|
+
* DEMO
|
|
69
|
+
*/
|
|
70
|
+
demos: Demo[];
|
|
71
|
+
}
|
|
72
|
+
/** 案例主题 */
|
|
73
|
+
export interface ExampleTopic extends TreeNode {
|
|
74
|
+
/**
|
|
75
|
+
* 图标
|
|
76
|
+
*/
|
|
77
|
+
icon: string;
|
|
78
|
+
/**
|
|
79
|
+
* slug 和 id 一样,兼容旧配置
|
|
80
|
+
*/
|
|
81
|
+
slug?: string;
|
|
82
|
+
/**
|
|
83
|
+
* 所有案例
|
|
84
|
+
*/
|
|
85
|
+
examples: Example[];
|
|
86
|
+
}
|
|
87
|
+
export {};
|
package/dist/typings.d.ts
CHANGED
|
@@ -22,104 +22,3 @@ declare module '\*.svg' {
|
|
|
22
22
|
const content: any;
|
|
23
23
|
export default content;
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
declare namespace ExamplesPage {
|
|
27
|
-
export interface TreeNode {
|
|
28
|
-
/**
|
|
29
|
-
* id
|
|
30
|
-
*/
|
|
31
|
-
id: string;
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* 孩子节点 key
|
|
35
|
-
*/
|
|
36
|
-
childrenKey?: string;
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* 标题(支持国际化)
|
|
40
|
-
*/
|
|
41
|
-
title: {
|
|
42
|
-
zh: string;
|
|
43
|
-
en: string;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
[key: string]: any;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/** 案例 DEMO */
|
|
50
|
-
export interface Demo extends TreeNode {
|
|
51
|
-
/**
|
|
52
|
-
* 截图
|
|
53
|
-
*/
|
|
54
|
-
screenshot: string;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* TypeScript 源码文件
|
|
58
|
-
*/
|
|
59
|
-
source: string;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* DEMO 代码文件名称
|
|
63
|
-
*/
|
|
64
|
-
filename: string;
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* 衍生属性,通过 topic.id + example.id + demo.id 可以计算获取
|
|
68
|
-
*/
|
|
69
|
-
relativePath?: string;
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* 是否为新品
|
|
73
|
-
*/
|
|
74
|
-
isNew?: boolean;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* 目标 example
|
|
78
|
-
*/
|
|
79
|
-
targetExample?: ExamplesPage.Example;
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* 目标主题
|
|
83
|
-
*/
|
|
84
|
-
targetTopic?: ExamplesPage.ExampleTopic;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/** 示例 */
|
|
88
|
-
export interface Example extends TreeNode {
|
|
89
|
-
/**
|
|
90
|
-
* 图标
|
|
91
|
-
*/
|
|
92
|
-
icon: string;
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
* DEMO
|
|
96
|
-
*/
|
|
97
|
-
demos: Demo[];
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/** 案例主题 */
|
|
101
|
-
export interface ExampleTopic extends TreeNode {
|
|
102
|
-
/**
|
|
103
|
-
* 图标
|
|
104
|
-
*/
|
|
105
|
-
icon: string;
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* slug 和 id 一样,兼容旧配置
|
|
109
|
-
*/
|
|
110
|
-
slug?: string;
|
|
111
|
-
|
|
112
|
-
/**
|
|
113
|
-
* 所有案例
|
|
114
|
-
*/
|
|
115
|
-
examples: Example[];
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* 配置文件中的国际化配置
|
|
121
|
-
*/
|
|
122
|
-
declare type IC = string | {
|
|
123
|
-
zh: string;
|
|
124
|
-
en: string;
|
|
125
|
-
}
|
package/package.json
CHANGED
package/dist/slots/Loading.d.ts
DELETED