-
Notifications
You must be signed in to change notification settings - Fork 1
/
template.html
318 lines (289 loc) · 9.89 KB
/
template.html
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
One Icon
</title>
<link
rel="shortcut icon"
href="//gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
type="image/x-icon"
/>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
h2 {
text-align: center;
}
.sync-btn {
padding: 4px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
margin-left: 13px;
background: #3f68e8;
font-weight: lighter;
}
body {
margin: 0;
padding: 20px;
}
.icons {
padding-top: 30px;
}
.icon {
min-width: 250px;
line-height: 32px;
padding-bottom: 20px;
display: inline-block;
position: relative;
font-size: 18px;
text-align: center;
border: 2px solid white;
color: #555555;
}
.icon .name {
text-align: center;
display: block;
font-size: 14px;
color: yellowgreen;
font-weight: bolder;
}
.icon i {
display: block;
font-size: 24px;
}
.svg-icon {
width: 24px;
height: 24px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-btn {
color: #999;
}
button {
cursor: pointer;
border-radius: 4px;
}
button + button {
margin-left: 4px;
}
textarea {
position: 'fixed';
top: '0px';
right: '0px';
width: '2em';
height: '2em';
padding: '0px';
border: 'none';
outline: 'none';
box-shadow: 'none';
background: 'transparent';
}
</style>
</head>
<body>
<div id="root"></div>
<script>
function flatten(arr) {
return arr.reduce(function(prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next);
}, []);
}
function copy(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
let result = false;
try {
result = !!document.execCommand('copy');
} catch (err) {}
document.body.removeChild(textArea);
return result;
}
const Utils = {
copyIcon(fontName, option, type) {
let extraClasses = type === 'svg' ? option.svgClassNameList : option.classNameList;
let iconCode = type === 'svg' ? option.svgIconCode : option.iconCode;
extraClasses = extraClasses && extraClasses.join(' ');
if (!iconCode) {
return copy("<Icon type='icon-" + fontName + ' ' + (extraClasses || '') + "'>");
}
iconCode = iconCode.replace('{fontName}', fontName);
iconCode = iconCode.replace('{extraClasses}', extraClasses);
return copy(iconCode);
},
addJsFile(jsFile, cb) {
let script = document.getElementById('svg-js');
if (script) {
// 如果已经存在，移除重新加载最近的脚本
document.body.removeChild(script);
}
script = document.createElement('script');
script.id = 'svg-js';
script.src = 'https:' + jsFile;
document.body.appendChild(script);
script.onload = cb();
}
};
</script>
<script type="text/babel">
const iconUrl = "http://www.iconfont.cn/open/project/detail.json";
const refreshUrl = "http://www.iconfont.cn/open/project/cdn.json";
const projectList = <%=projectList%>;
/** 用于免登陆，http://gitlab.alibaba-inc.com/mm/iconfont-plus-egg/wikis/token-login */
const uuid = "<%=uuid%>";
const authUrl = "http://www.iconfont.cn/open/auth/" + uuid;
const tokenUrl = "http://www.iconfont.cn/open/auth/check/" + uuid;
/** 用于node端接受，自动更新文件的请求 */
const reGenerateFileUrl = "/regenerateFile";
class IconList extends React.Component {
constructor(){
super();
this.state = {
openStatus: {},
// key-map的形式
projectDetailList: this.initProjectDetailList(),
/** 是否能自动更新，取决于是否能自动打开授权窗口*/
canAutoRefresh: true
}
}
initProjectDetailList(){
let result = {};
projectList.forEach(project => {
const key = project.id;
result[key] = project;
})
return result;
}
componentDidMount(){
this.getAllIconData();
/** 每隔10分钟，自动去刷新数据，看是否数据需要更新 */
setInterval(()=> {
this.getAllIconData();
}, 1000*10*60);
}
componentWillUpdate(nextProps, nextState){
if( nextState.canAutoRefresh ){
const projectDetailList = nextState.projectDetailList;
Object.keys(projectDetailList).forEach(projectId => {
const project = projectDetailList[projectId];
const shouldUpdate = project.font_is_old
/** 自动更新 */
shouldUpdate && this.refreshByProjectId(projectId);
});
}
}
getAllIconData(){
console.log('getAllIconData');
const { projectDetailList } = this.state;
Object.keys(projectDetailList).forEach(projectId => {
this.getIconDataById(projectId);
});
this.forceUpdate();
}
/** 获取Icon的所有数据 */
getIconDataById(id){
console.log('getIconDataById', id);
fetch(iconUrl + "?pid=" + id)
.then((response) => {
return response.json();
}).then((myJson) => {
const data = myJson.data;
console.log('icon 数据', data);
this.state.projectDetailList[id] = { ...this.state.projectDetailList[id], ...data};
Utils.addJsFile(data.font.js_file, this.forceUpdate.bind(this));
});
}
refreshByProjectId(projectId) {
/** 自动打开登录授权窗口 */
if( !window.open(authUrl) ){
this.setState({
canAutoRefresh: false
})
return alert("由于您浏览器设置，无法为您进行自动更新！请点击手动更新！");
}
fetch(tokenUrl)
.then(response => {
return response.json();
})
.then(res=>{
if(res.data && res.data.token){
this.getLastestData(res.data.token, projectId);
} else {
alert("请先登录授权! ");
}
})
}
getLastestData(token, id){
fetch(refreshUrl + "?LG_TOKEN=" + token,{
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams([["pid", id]]).toString(),
})
.then((response) => {
console.log('重新请求项目数据', id);
this.getIconDataById(id);
/** 通知node，重新获取最新的css、js文件 */
fetch(reGenerateFileUrl)
.catch(error => console.error('Error:', error));
});
}
changeOpenStatus(projectId){
const { openStatus } = this.state;
openStatus[projectId] = !openStatus[projectId];
this.setState({
openStatus: openStatus
});
}
render(){
const { projectDetailList, openStatus } = this.state;
console.log('projectDetailList',projectDetailList);
return Object.keys(projectDetailList).map(projectId => {
const item = projectDetailList[projectId];
const { project, font, icons} = item;
if(!project) {
return null;
}
return (<div>
<h2> { project.name } </h2>
<h3> 最近更新时间：{font.updated_at && font.updated_at.slice(0, 10)}，目前{project.font_is_old?"不是": "是"}最新版本。
{ !!project.font_is_old && <button className="sync-btn" onClick={() => this.refreshByProjectId(project.id)} > 手动更新 </button> }
<button className="sync-btn" onClick={() => this.changeOpenStatus(projectId)}> {openStatus[projectId]? '收起': '展开'} </button>
</h3>
<div className="icons">
{ icons && icons.map((icon, index) => {
return openStatus[projectId] && <div className="icon" key={index}>
<svg className="svg-icon" aria-hidden="true">
<use xlinkHref={"#icon-"+ icon.font_class}></use>
</svg>
<span className="name">
{'icon-' + icon.font_class }
</span>
<span>
<button onClick={() => Utils.copyIcon(icon.font_class, {
iconCode: item.iconCode,
classNameList: item.classNameList
})} > 复制Iconfont </button>
<button onClick={() => Utils.copyIcon(icon.font_class, {
svgClassNameList: item.svgClassNameList,
svgIconCode: item.svgIconCode
}, 'svg')} className="svg-btn"> 复制SVG </button>
</span>
</div> })
}
</div>
</div>)});
}
}
ReactDOM.render(<IconList/>, document.getElementById('root'));
</script>
</body>
</html>