-
Notifications
You must be signed in to change notification settings - Fork 0
/
automan.html
349 lines (294 loc) · 10.7 KB
/
automan.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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Automan 可视化开发平台</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<link rel="stylesheet" href="css/default.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<h2>Automan 可视化开发平台</h2>
<p class="sub">介绍 Automan 可视化开发平台前端和后端的一些实现方式</p>
<p>
<small><a href="https://codeigniter.org.cn" target="_blank">Hex</a> 为您分享 / Github: <a href="https://github.com/hex-ci" target="_blank">@hex-ci</a></small>
</p>
</section>
<section>
<h3>目录</h3>
<br>
<ul>
<li>简介</li>
<li>整体架构</li>
<li>编辑器</li>
<li>渲染器</li>
<li>管理后台</li>
<li>服务端</li>
</ul>
</section>
<section>
<h3>Automan 简介</h3>
<p>
Automan 是一套基于 Vue.js – Node.js 架构下的,支持多团队的,<br>
集开发与部署为一体的可视化 Web 页面制作平台
</p>
<br>
<div class="fragment">
<p>有什么特点?</p>
<ul>
<li>项目管理方便</li>
<li>网页编辑操作高效</li>
<li>灵活丰富的扩展</li>
<li>组件接入简单</li>
</ul>
</div>
</section>
<section>
<h3>部署架构</h3>
<div>
<img width="43%" style="background-color: white;" data-src="images/automan/1.png">
</div>
</section>
<section>
<h3>核心架构</h3>
<p>
定义一套标准的数据规范,提供一个编辑器去编辑这个数据,<br>
同时提供一个解析器去解析该数据,然后渲染出页面
</p>
<div>
<img width="55%" style="background-color: white;" data-src="images/automan/2.png">
</div>
</section>
<section>
<h3>核心架构</h3>
<p>这是上图中一个 node 的数据格式</p>
<pre><code class="hljs json" style="max-height: 100%;" data-trim>
{
"id": "main/button1l",
"type": "main/button",
"label": "按钮1l",
"version": "0.1.0",
"visible": true,
"style": {
"position": "absolute",
"width": "100px",
"height": "40px"
},
"animate": [],
"props": {
"text": "输入文字",
"type": "danger",
"click": []
},
"path": "https://domain.com/main/button/0.1.0/index.js",
"script": "",
"events": []
}
</code></pre>
</section>
<section>
<h3>组件结构</h3>
<p>
组件自有逻辑 mixin 自定义脚本
</p>
<div>
<img width="63%" style="background-color: white;" data-src="images/automan/3.png">
</div>
</section>
<section>
<h3>组件结构</h3>
<p>这是上图中一个 node 的 DOM 结构</p>
<pre><code class="hljs html" style="max-height: 100%;" data-trim>
<div v-show="visible" :style="nodeInfo.style">
<component :is="nodeInfo.id" v-bind="nodeInfo.props" :style="componentStyle"></component>
<node v-if="nodeInfo.child" v-for="item in nodeInfo.child" :info="item" :key="item.id"></node>
</div>
</code></pre>
<div class="fragment">
<p>
一个 node 的逻辑功能=组件逻辑+脚本1+脚本2+脚本3...<br>
核心代码如下
</p>
<pre><code class="hljs js" data-trim>
// 通过加载到的组件代码所获得的全局对象来创建 Vue 对象
// window['image_1.0.3'] 是加载组件代码后生成的对象
let component = Vue.extend(window['image_1.0.3'])
// 遍历所有加入的脚本 mixin 到组件对象中
nodeInfo.script.forEach(value => {
component = component.extend(value)
})
// 以节点 id 为组件名,注册最终组件对象
Vue.component(nodeInfo.id, component)
</code></pre>
</div>
</section>
<section>
<h3>组件结构</h3>
<p>
组件如何暴露可编辑的属性
</p>
<div>
<img width="45%" style="background-color: white;" data-src="images/automan/4.png">
</div>
</section>
<section>
<h3>组件结构</h3>
<p>
组件默认支持下列属性类型
</p>
<ol>
<li>input: 单行输入框</li>
<li>text: 多行输入框</li>
<li>enum: 列表单选</li>
<li>image: 图片选择</li>
<li>audio: 音频选择</li>
<li>video: 视频选择</li>
<li>richtext: 富文本</li>
<li>number: 数字</li>
<li>function: 方法设置</li>
<li>data: JSON数据</li>
<li>date: 时间选择</li>
<li>checkbox: 多选框</li>
<li>radio: 单选框</li>
</ol>
</section>
<section>
<h3>组件结构</h3>
<p>
组件如何支持更多的属性类型?
</p>
<div>
<img width="58%" style="background-color: white;" data-src="images/automan/5.png">
</div>
</section>
<section>
<h3>编辑器</h3>
<p>
编辑器的基础是一个 Dock 系统<br>
系统所有部件采用观察者模式通信
</p>
<div>
<img width="58%" style="background-color: white;" data-src="images/automan/6.png">
</div>
</section>
<section>
<h3>组件的拖动与缩放</h3>
<div>
<img width="45%" style="background-color: white;" data-src="images/automan/7.png">
</div>
</section>
<section>
<h3>渲染器</h3>
<p>
渲染器就是一个编辑器的反转<br>
把编辑器生成的数据,反向解析成 DOM
</p>
<div>
<img width="45%" style="background-color: white;" data-src="images/automan/8.png">
</div>
</section>
<section>
<h3>管理后台</h3>
<p>
管理后台是一个常规的基于 Element-UI 的项目<br>
比较有意思的是其中的动态路由部分
</p>
<div>
<img width="65%" style="background-color: white;" data-src="images/automan/9.png">
</div>
</section>
<section>
<h3>服务端</h3>
<p>
服务端是基于 Egg.js + MySQL + Redis 开发的一套 RESTful API 接口<br>
实现了 Automan 所有的业务逻辑
</p>
<div>
<img width="55%" style="background-color: white;" data-src="images/automan/10.png">
</div>
</section>
<section>
<h3>服务端</h3>
<p>
服务端主要包含以下内容
</p>
<ol>
<li>身份验证</li>
<li>组件管理</li>
<li>分组管理</li>
<li>项目管理</li>
<li>页面管理</li>
<li>模板管理</li>
<li>资源管理</li>
<li>标签管理</li>
<li>用户管理</li>
</ol>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>谢谢!</p>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<small>
参考资料:
<ol>
<li><a href="https://github.com/ymm-tech/gods-pen/wiki/%E7%A0%81%E8%89%AF%E7%B3%BB%E7%BB%9F%E6%A0%B8%E5%BF%83%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF" target="_blank">Gods-Pen 文档</a></li>
<li><a href="https://eggjs.org/zh-cn/intro/" target="_blank">Egg.js 文档</a></li>
</ol>
</small>
</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: false,
width: '100%',
height: '100%',
// margin: 100,
transition: 'slide',
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>