forked from click33/Sa-Admin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
367 lines (327 loc) · 12.9 KB
/
main.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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #EEE;
}
.app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.content-box {
margin: 1em;
padding: 1em;
background-color: #FFF;
color: #666;
}
.el-tag{border-radius: 1px;}
/*800之下*/
@media(max-width: 800px) {
.kapian {
width: 100% !important;
margin-right: 0px !important;
}
.saoma {
display: none;
}
}
</style>
</head>
<body>
<div class="app">
<div class="content-box">
<div style="padding: 1em; border-left: 5px #2D8CF0 solid; background-color: #EEE;">
<big><big>Welcome to SA-后台模板 </big></big>
<span style="display: inline-block; margin-left: 1em; color: #888;"> —— 一个基于iframe的多窗口后台模板</span>
</div>
</div>
<div class="content-box">
<div class="saoma" style="width: 20%; float: left; margin-right: 4%;">
<el-divider content-position="left">
<big><big>扫码加入QQ群交流</big></big>
</el-divider>
<div style="text-align: center;">
<img src="sa-resources/admin-qqq.png" style="width: 80%; ">
</div>
</div>
<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
<el-divider content-position="left">
<big><big>SA-ADMIN</big></big>
</el-divider>
<div style="font-size: 0.9em; line-height: 1.6em;">
<p>
虽然已经用过不少优秀的后台模板，但是一直都感觉不尽完美，于是在经过激烈的思想斗争后，我决定牺牲五一假期，亲自做一个尝试一下，
一来正好给以后自己的项目中使用，二来也算是为开源界做一点自己的贡献吧
</p>
<br>
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
<b>QQ群：</b>
<el-link type="primary" href="https://jq.qq.com/?_wv=1027&k=5DHN5Ib" target="_blank">782974737 点击加入</el-link>
</li>
<li>
<b>码云地址：</b>
<el-link type="primary" href="https://gitee.com/sz6/sa-admin" target="_blank">https://gitee.com/sz6/sa-admin</el-link>
</li>
<li>
<b>GitHub地址：</b>
<el-link type="primary" href="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/click33/sa-admin" target="_blank">https://github.com/click33/sa-admin</el-link>
</li>
<li>
开源不易，求鼓励，给个star吧
</li>
</ul>
</div>
</div>
<div class="kapian" style="width: 35%; float: left;">
<el-divider content-position="left">
<big><big>技术选型</big></big>
</el-divider>
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
<el-link type="primary" href="https://cn.vuejs.org/" target="_blank">JS引擎：Vue @2.6.10</el-link>
</li>
<li>
<el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">UI框架：Element-UI @2.8.2</el-link>
</li>
<li>
<el-link type="primary" href="https://layer.layui.com/" target="_blank">web弹层：layer @3.1.1</el-link>
</li>
<li>
<el-link type="primary" href="https://www.swiper.com.cn/" target="_blank">切页动画：Swiper @4.5.0</el-link>
</li>
<li>
<el-link type="primary" href="https://echarts.baidu.com/" target="_blank">图表引擎：ECharts @4.2.1</el-link>
</li>
<li>
<el-link type="primary" href="https://www.wangeditor.com/" target="_blank">富文本编辑器：wangEditor @3.1.1</el-link>
</li>
<li>
<el-link @click="meile">没了：占空</el-link>
</li>
<li>
以上几个框架即使你都没接触过，只要你阅读以下文档，也可以快速上手
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<div class="content-box">
<div class="kapian" style="font-size: 0.9em; line-height: 1.6em; width: 30%; float: left; margin-right: 5%;">
<el-divider content-position="left">
<big><big>功能介绍</big></big>
</el-divider>
<ul style="padding-left: 1em; line-height: 1.5em;">
<li>
架构：基于iframe，无后台代码，纯html模板，可以方便的适配任何后端语言
</li>
<li>
菜单：支持一、二、三级菜单
</li>
<li>
折叠： 折叠或收缩菜单，并且监听窗口大小变化，在拉伸窗口时自动折叠或收缩菜单，自动响应式
</li>
<li>
卡片： 多卡片堆积，与菜单双向关联，在卡片标签右击可以：刷新、关闭、关闭其它、关闭所有、悬浮打开、新窗口打开。
</li>
<li>
切换： 滑动、淡入、方块、3D流、3D翻转、、五种高大上切换动画，任你选择！
</li>
<li>
主题：目前保留四种主题：深蓝、墨绿、银灰、黑绿结合（切换主题时，可自动保存你的喜好，下次打开时仍然有效）
</li>
<li>
保留： 切换卡片时，可自动保留上个卡片的滚动条高度（目前没有见到其它任何一个模板做到这一点，或者说没有任何一个模板注意到这个细节功能点）
</li>
<li>
功能不断更新中... 你有好的想法也可以告诉我，加群一起交流吧
</li>
<li>
使用说明，
<a href="javascript:;" @click="openDoc">见文档</a>
</li>
</ul>
</div>
<div class="kapian" style="font-size: 0.9em; line-height: 1.6em; width: 60%; float: left;">
<el-divider content-position="left">
<big><big>疑问：</big></big>
</el-divider>
<h4>vue、element-ui、layer我都没用过，可以用这个模板吗？</h4>
<p style="margin-top: 5px;">
首先你要明白，模板分为两部分（index.html框架与框架内的模板页）<br>
如果你只使用index.html框架部分，可以不必掌握vue等技术，使用时甚至你都不用改动源码，
只重写几个属性函数就可以集成到你的项目中，<br>
如果你要使用框架内的模板页，则需要对vue等框架有一定的了解
</p>
<br>
<h4>为什么是iframe，而不是SPA？</h4>
<p style="margin-top: 5px;">
现在前端开发比较主流的三种方式：服务器渲染、前后端分离、SPA<br>
+ 服务器渲染：类似于jsp、asp、php等所有借助后端语言渲染视图的技术，这也是比较传统的一种方式 <br>
+ 前后端分离：脱离后端语言，只写html，就像是在写一个静态站，与服务器的交互全部走ajax<br>
+ SPA：在前后端分离的基础上更进一步，借助gulp、webpack等构件工具将项目打包成单页应用的一种方式 <br>
<b>本模板</b> 正是采用的第2种方式（so：本模板可能无法满足重度SPA患者）<br>
1、前后端分离，让我们脱离了后端语言的@include指令，不用为了代码的模块化再到处搜索xx技术如何热更新代码 <br>
2、不使用webpack、gulp等构建工具也可以写代码，不必再费尽心机搭建一个代码编译环境 <br>
3、网站头部底部等公共部分代码的复用是我们使用构建工具的主要目的，但是我们借助iframe标签，轻松巧妙的化解了这个难题，借助iframe，
让网站成为一个真正意义上的多窗口应用
（大多数服务器渲染方式每次切换窗口会造成窗口刷新，SPA将代码都塞到了一个页面中的方式使得我们写代码时变得瞻前顾后） <br>
4、返璞归真，像写静态站一样来写后台，一个html编辑器就可以强Lu所有代码，尝试一下，相信我，你会爱上这种开发模式的
<br>
</p>
</div>
<div style="clear: both;"></div>
</div>
<div class="content-box">
<el-divider content-position="left">
<big><big>更新日志</big></big>
</el-divider>
<div class="kapian" style="font-size: 0.9em; line-height: 1.6em;">
<ul style="padding-left: 1em; line-height: 1.5em;">
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.1.4</el-tag></b>
2019-10-17
</li>
<li>重写了一下简介</li>
<li>优化主题样式</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.1.3</el-tag></b>
2019-9-3
</li>
<li>更改初始化方式</li>
<li>优化UI样式</li>
<li>增加新主题：灰色-展开</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.1.2</el-tag></b>
2019-7-16
</li>
<li>增加右键菜单的失去焦点事件，失去焦点自动消失</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.1.1</el-tag></b>
2019-6-26
</li>
<li>优化卡片切换动画，更流畅了，并且添加loading图标，视觉上更加顺畅</li>
<li>新增悬浮窗口功能，在卡片标题处右击试试吧</li>
<li>更换登录模板页，更漂亮了</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.1.0</el-tag></b>
2019-6-24
</li>
<li>修复bug：鼠标悬浮page-title时，偶尔动画混乱的bug</li>
<li>修复bug：优化折叠动画，更流畅了</li>
<li>集成swiper，窗口切换，更加高大上了</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.8</el-tag></b>
2019-5-28
</li>
<li>修复bug：菜单折叠时，菜单项箭头仍然显示的问题</li>
<li>修复bug：在手机端菜单折叠时，右侧信息排版发生混乱的问题</li>
<li>调整了一下字体大小，看着更顺眼了</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.7</el-tag></b>
2019-5-25
</li>
<li>优化一些动画效果</li>
<li>增加模板页：轮播图管理</li>
<li>一些样式优化</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.6</el-tag></b>
2019-5-22
</li>
<li>添加了菜单预览模板(tree树)</li>
<li>修复bug：菜单分配权限时，父子级不关联的问题</li>
<li>一些样式优化</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.5</el-tag></b>
2019-5-18
</li>
<li>添加了权限中心模板(tree权限树)</li>
<li>优化用户列表模板，弹出式的修改</li>
<li>一些其它样式优化</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.4</el-tag></b>
2019-5-15
</li>
<li>优化折叠动画，避免文字闪动现象</li>
<li>sp.setMenuList();接口增加show_list参数，可灵活控制部分菜单的显示与隐藏</li>
<li>一些样式优化</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.2</el-tag></b>
2019-5-14
</li>
<li>添加文章管理模板(wangEditor富文本编辑器)</li>
<li>改写了表格里按钮的样式，更鲜艳，增加点击感</li>
<li>菜单列表里可以指定is_show=false，使菜单成为隐藏菜单</li>
<li>
重写了一些接口，可以更加方便的与你的系统集成
</li>
<div><br></div>
<li>
<b> <el-tag size="mini">版本 v1.0.1</el-tag></b>
2019-5-5
</li>
<li>
修复周日显示周0的bug
</li>
<li>
主题更换时高亮显示，方便区分
</li>
<li>增加三级菜单支持</li>
<div><br></div>
<li>
<b><el-tag size="mini">版本 v1.0.0</el-tag></b>
2019-5-2
</li>
<li>第一个版本出炉</li>
<li>功能持续更新中...</li>
</ul>
</div>
</div>
<br><br>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false;
</script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el: '.app',
data: {
},
methods: {
// 没了
meile: function() {
this.$message({
message: '没了还点',
type: 'warning'
});
},
// 显示文档页面
openDoc: function() {
parent.sp.selectMenu(11);
}
}
})
</script>
</body>
</html>