-
Notifications
You must be signed in to change notification settings - Fork 62
/
App.tsx
154 lines (137 loc) · 3.7 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import React from 'react';
import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';
import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';
import axios from 'axios';
import copy from 'copy-to-clipboard';
import {render as renderAmis, ToastComponent, AlertComponent} from 'amis';
import {alert, confirm, toast} from 'amis-ui';
// amis 环境配置
const env = {
// 下面三个接口必须实现
fetcher: ({
url, // 接口地址
method, // 请求方法 get、post、put、delete
data, // 请求数据
responseType,
config, // 其他配置
headers // 请求头
}: any) => {
config = config || {};
config.withCredentials = true;
responseType && (config.responseType = responseType);
if (config.cancelExecutor) {
config.cancelToken = new (axios as any).CancelToken(
config.cancelExecutor
);
}
config.headers = headers || {};
if (method !== 'post' && method !== 'put' && method !== 'patch') {
if (data) {
config.params = data;
}
return (axios as any)[method](url, config);
} else if (data && data instanceof FormData) {
config.headers = config.headers || {};
config.headers['Content-Type'] = 'multipart/form-data';
} else if (
data &&
typeof data !== 'string' &&
!(data instanceof Blob) &&
!(data instanceof ArrayBuffer)
) {
data = JSON.stringify(data);
config.headers = config.headers || {};
config.headers['Content-Type'] = 'application/json';
}
return (axios as any)[method](url, data, config);
},
isCancel: (value: any) => (axios as any).isCancel(value),
copy: (content: string) => {
copy(content);
toast.success('内容已复制到粘贴板');
}
// 后面这些接口可以不用实现
// 默认是地址跳转
// jumpTo: (
// location: string /*目标地址*/,
// action: any /* action对象*/
// ) => {
// // 用来实现页面跳转, actionType:link、url 都会进来。
// },
// updateLocation: (
// location: string /*目标地址*/,
// replace: boolean /*是replace,还是push?*/
// ) => {
// // 地址替换,跟 jumpTo 类似
// },
// isCurrentUrl: (
// url: string /*url地址*/,
// ) => {
// // 用来判断是否目标地址当前地址
// },
// notify: (
// type: 'error' | 'success' /**/,
// msg: string /*提示内容*/
// ) => {
// toast[type]
// ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
// : console.warn('[Notify]', type, msg);
// },
// alert,
// confirm,
};
class AMISComponent extends React.Component<any, any> {
render() {
return renderAmis(
// 这里是 amis 的 Json 配置。
{
type: 'page',
body: {
type: 'form',
api: '/api/form',
body: [
{
type: 'input-text',
name: 'name',
label: '姓名'
},
{
name: 'email',
type: 'input-email',
label: '邮箱'
},
{
name: 'color',
type: 'input-color',
label: 'color'
},
{
type: 'editor',
name: 'editor',
label: '编辑器'
}
]
}
},
{
// props...
},
env
);
}
}
class APP extends React.Component<any, any> {
render() {
return (
<>
<ToastComponent key="toast" position={'top-right'} />
<AlertComponent key="alert" />
<AMISComponent />
</>
);
}
}
export default APP;