Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
d20585a3
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d20585a3
编写于
11月 17, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor:foramt views/component-demo
上级
46b4f749
变更
35
隐藏空白更改
内联
并排
Showing
35 changed file
with
289 addition
and
446 deletion
+289
-446
src/components/GithubCorner/index.vue
src/components/GithubCorner/index.vue
+1
-1
src/components/JsonEditor/index.vue
src/components/JsonEditor/index.vue
+2
-3
src/components/MarkdownEditor/index.vue
src/components/MarkdownEditor/index.vue
+4
-5
src/components/Screenfull/index.vue
src/components/Screenfull/index.vue
+12
-2
src/components/SplitPane/Pane.vue
src/components/SplitPane/Pane.vue
+0
-44
src/components/SplitPane/Resizer.vue
src/components/SplitPane/Resizer.vue
+0
-72
src/components/SplitPane/index.vue
src/components/SplitPane/index.vue
+0
-111
src/components/Tinymce/index.vue
src/components/Tinymce/index.vue
+2
-2
src/icons/index.js
src/icons/index.js
+3
-3
src/mock/login.js
src/mock/login.js
+0
-7
src/permission.js
src/permission.js
+1
-1
src/router/index.js
src/router/index.js
+12
-11
src/store/modules/app.js
src/store/modules/app.js
+1
-1
src/store/modules/user.js
src/store/modules/user.js
+1
-1
src/styles/index.scss
src/styles/index.scss
+13
-0
src/utils/clipboard.js
src/utils/clipboard.js
+1
-1
src/views/components-demo/avatarUpload.vue
src/views/components-demo/avatarUpload.vue
+7
-4
src/views/components-demo/backToTop.vue
src/views/components-demo/backToTop.vue
+1
-0
src/views/components-demo/countTo.vue
src/views/components-demo/countTo.vue
+33
-16
src/views/components-demo/dndList.vue
src/views/components-demo/dndList.vue
+1
-0
src/views/components-demo/dropzone.vue
src/views/components-demo/dropzone.vue
+2
-1
src/views/components-demo/jsonEditor.vue
src/views/components-demo/jsonEditor.vue
+2
-1
src/views/components-demo/markdown.vue
src/views/components-demo/markdown.vue
+8
-3
src/views/components-demo/mixin.vue
src/views/components-demo/mixin.vue
+9
-8
src/views/components-demo/splitpane.vue
src/views/components-demo/splitpane.vue
+15
-14
src/views/components-demo/sticky.vue
src/views/components-demo/sticky.vue
+1
-0
src/views/components-demo/tinymce.vue
src/views/components-demo/tinymce.vue
+6
-3
src/views/dashboard/admin/components/BarChart.vue
src/views/dashboard/admin/components/BarChart.vue
+1
-0
src/views/dashboard/admin/components/PanelGroup.vue
src/views/dashboard/admin/components/PanelGroup.vue
+131
-0
src/views/dashboard/admin/index.vue
src/views/dashboard/admin/index.vue
+4
-118
src/views/dashboard/editor/index.vue
src/views/dashboard/editor/index.vue
+2
-2
src/views/layout/components/Navbar.vue
src/views/layout/components/Navbar.vue
+1
-1
src/views/layout/components/Sidebar/SidebarItem.vue
src/views/layout/components/Sidebar/SidebarItem.vue
+1
-1
src/views/login/index.vue
src/views/login/index.vue
+4
-4
src/views/svg-icons/index.vue
src/views/svg-icons/index.vue
+7
-5
未找到文件。
src/components/GithubCorner/index.vue
浏览文件 @
d20585a3
<
template
>
<a
href=
"https://github.com/PanJiaChen/vue-element-admin"
target=
"_blank"
class=
"github-corner"
aria-label=
"View source on Github"
>
<svg
width=
"80"
height=
"80"
viewBox=
"0 0 250 250"
style=
"fill:#4
AB7BD
; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
<svg
width=
"80"
height=
"80"
viewBox=
"0 0 250 250"
style=
"fill:#4
0c9c6
; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
aria-hidden=
"true"
>
<path
d=
"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
></path>
<path
d=
"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
...
...
src/components/JsonEditor/index.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
'json-editor'
>
<textarea
ref=
'textarea'
></textarea>
<div
class=
"json-editor"
>
<textarea
ref=
"textarea"
></textarea>
</div>
</
template
>
...
...
@@ -57,7 +57,6 @@ export default {
.CodeMirror
{
height
:
100%
;
}
.json-editor
.cm-s-rubyblue
span
.cm-string
{
color
:
#F08047
;
}
...
...
src/components/MarkdownEditor/index.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
'simplemde-container'
:style=
"
{height:height+'px',zIndex:zIndex}">
<textarea
:id=
'id'
>
<div
class=
"simplemde-container"
:style=
"
{height:height+'px',zIndex:zIndex}">
<textarea
:id=
"id"
>
</textarea>
</div>
</
template
>
...
...
@@ -15,8 +15,7 @@ export default {
props
:
{
value
:
String
,
id
:
{
type
:
String
,
default
:
'
markdown-editor
'
type
:
String
},
autofocus
:
{
type
:
Boolean
,
...
...
@@ -52,7 +51,7 @@ export default {
},
mounted
()
{
this
.
simplemde
=
new
SimpleMDE
({
element
:
document
.
getElementById
(
this
.
id
),
element
:
document
.
getElementById
(
this
.
id
||
'
markdown-editor-
'
+
+
new
Date
()
),
autoDownloadFontAwesome
:
false
,
autofocus
:
this
.
autofocus
,
toolbar
:
this
.
toolbar
,
...
...
src/components/Screenfull/index.vue
浏览文件 @
d20585a3
<
template
>
<div>
<svg
t=
"1508738709248"
@
click=
'click'
class=
"screenfull-svg"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"2069"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"32"
height=
"32"
><path
d=
"M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id=
"2070"
></path><path
d=
"M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id=
"2071"
></path><path
d=
"M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id=
"2072"
></path><path
d=
"M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id=
"2073"
></path></svg>
<div>
<svg
t=
"1508738709248"
@
click=
'click'
class=
"screenfull-svg"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"2069"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"32"
height=
"32"
>
<path
d=
"M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
p-id=
"2070"
></path>
<path
d=
"M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
p-id=
"2071"
></path>
<path
d=
"M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
p-id=
"2072"
></path>
<path
d=
"M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
p-id=
"2073"
></path>
</svg>
</div>
</
template
>
...
...
src/components/SplitPane/Pane.vue
已删除
100644 → 0
浏览文件 @
46b4f749
<
template
>
<div
:class=
"classes"
>
<slot></slot>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
Pane
'
,
data
()
{
const
classes
=
[
'
Pane
'
,
this
.
$parent
.
split
,
'
className
'
]
return
{
classes
:
classes
.
join
(
'
'
),
percent
:
50
}
}
}
</
script
>
<
style
scoped
>
.splitter-pane.vertical.splitter-paneL
{
position
:
absolute
;
left
:
0px
;
height
:
100%
;
}
.splitter-pane.vertical.splitter-paneR
{
position
:
absolute
;
right
:
0px
;
height
:
100%
;
}
.splitter-pane.horizontal.splitter-paneL
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
}
.splitter-pane.horizontal.splitter-paneR
{
position
:
absolute
;
bottom
:
0px
;
width
:
100%
;
}
</
style
>
src/components/SplitPane/Resizer.vue
已删除
100644 → 0
浏览文件 @
46b4f749
<
template
>
<div
:class=
"classes"
@
mousedown=
"onMouseDown"
></div>
</
template
>
<
script
>
export
default
{
props
:
{
split
:
{
validator
(
value
)
{
return
[
'
vertical
'
,
'
horizontal
'
].
indexOf
(
value
)
>=
0
},
required
:
true
},
onMouseDown
:
{
type
:
Function
,
required
:
true
}
},
data
()
{
const
classes
=
[
'
Resizer
'
,
this
.
split
,
'
className
'
]
return
{
classes
:
classes
.
join
(
'
'
)
}
}
}
</
script
>
<
style
scoped
>
.Resizer
{
-moz-box-sizing
:
border-box
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
background
:
#000
;
position
:
absolute
;
opacity
:
.2
;
z-index
:
1
;
/*-moz-background-clip: padding;*/
/*-webkit-background-clip: padding;*/
/*background-clip: padding-box;*/
}
/*.Resizer:hover {*/
/*-webkit-transition: all 2s ease;*/
/*transition: all 2s ease;*/
/*}*/
.Resizer.horizontal
{
height
:
11px
;
margin
:
-5px
0
;
border-top
:
5px
solid
rgba
(
255
,
255
,
255
,
0
);
border-bottom
:
5px
solid
rgba
(
255
,
255
,
255
,
0
);
cursor
:
row-resize
;
width
:
100%
;
}
.Resizer.horizontal
:hover
{
border-top
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
border-bottom
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
}
.Resizer.vertical
{
width
:
11px
;
height
:
100%
;
border-left
:
5px
solid
rgba
(
255
,
255
,
255
,
0
);
border-right
:
5px
solid
rgba
(
255
,
255
,
255
,
0
);
cursor
:
col-resize
;
}
.Resizer.vertical
:hover
{
border-left
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
border-right
:
5px
solid
rgba
(
0
,
0
,
0
,
0.5
);
}
</
style
>
src/components/SplitPane/index.vue
已删除
100644 → 0
浏览文件 @
46b4f749
<
template
>
<div
ref
:style=
"
{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
<pane
class=
"splitter-pane splitter-paneL"
:split=
"split"
:style=
"
{ [type]: percent+'%'}">
<slot
name=
"paneL"
></slot>
</pane>
<resizer
:style=
"
{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick">
</resizer>
<pane
class=
"splitter-pane splitter-paneR"
:split=
"split"
:style=
"
{ [type]: 100-percent+'%'}">
<slot
name=
"paneR"
></slot>
</pane>
</div>
</
template
>
<
script
>
import
Resizer
from
'
./Resizer
'
import
Pane
from
'
./Pane
'
export
default
{
name
:
'
splitPane
'
,
components
:
{
Resizer
,
Pane
},
props
:
{
margin
:
{
type
:
Number
,
default
:
10
},
split
:
{
validator
(
value
)
{
return
[
'
vertical
'
,
'
horizontal
'
].
indexOf
(
value
)
>=
0
},
required
:
true
}
},
data
()
{
return
{
active
:
false
,
hasMoved
:
false
,
height
:
null
,
percent
:
50
,
type
:
this
.
split
===
'
vertical
'
?
'
width
'
:
'
height
'
,
resizeType
:
this
.
split
===
'
vertical
'
?
'
left
'
:
'
top
'
}
},
computed
:
{
userSelect
()
{
return
this
.
active
?
'
none
'
:
''
},
cursor
()
{
return
this
.
active
?
'
col-resize
'
:
''
}
},
methods
:
{
onClick
()
{
if
(
!
this
.
hasMoved
)
{
this
.
percent
=
50
this
.
$emit
(
'
resize
'
)
}
},
onMouseDown
()
{
this
.
active
=
true
this
.
hasMoved
=
false
},
onMouseUp
()
{
this
.
active
=
false
},
onMouseMove
(
e
)
{
if
(
e
.
buttons
===
0
||
e
.
which
===
0
)
{
this
.
active
=
false
}
if
(
this
.
active
)
{
let
offset
=
0
let
target
=
e
.
currentTarget
if
(
this
.
split
===
'
vertical
'
)
{
while
(
target
)
{
offset
+=
target
.
offsetLeft
target
=
target
.
offsetParent
}
}
else
{
while
(
target
)
{
offset
+=
target
.
offsetTop
target
=
target
.
offsetParent
}
}
const
currentPage
=
this
.
split
===
'
vertical
'
?
e
.
pageX
:
e
.
pageY
const
targetOffset
=
this
.
split
===
'
vertical
'
?
e
.
currentTarget
.
offsetWidth
:
e
.
currentTarget
.
offsetHeight
const
percent
=
Math
.
floor
(((
currentPage
-
offset
)
/
targetOffset
)
*
10000
)
/
100
if
(
percent
>
this
.
margin
&&
percent
<
100
-
this
.
margin
)
{
this
.
percent
=
percent
}
this
.
$emit
(
'
resize
'
)
this
.
hasMoved
=
true
}
}
}
}
</
script
>
<
style
scoped
>
.clearfix
:after
{
visibility
:
hidden
;
display
:
block
;
font-size
:
0
;
content
:
" "
;
clear
:
both
;
height
:
0
;
}
.vue-splitter-container
{
height
:
100%
;
/*display: flex;*/
position
:
relative
;
}
</
style
>
src/components/Tinymce/index.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
'tinymce-container editor-container'
>
<textarea
class=
'tinymce-textarea'
:id=
"tinymceId"
></textarea>
<div
class=
"tinymce-container editor-container"
>
<textarea
class=
"tinymce-textarea"
:id=
"tinymceId"
></textarea>
<div
class=
"editor-custom-btn-container"
>
<editorImage
color=
"#20a0ff"
class=
"editor-upload-btn"
@
successCBK=
"imageSuccessCBK"
></editorImage>
</div>
...
...
src/icons/index.js
浏览文件 @
d20585a3
import
Vue
from
'
vue
'
import
SvgIcon
from
'
@/components/SvgIcon
'
// svg组件
import
generateIconsView
from
'
@/views/svg-icons/generateIconsView.js
'
// just for views/icons , you can delete it
// register globally
import
generateIconsView
from
'
@/views/svg-icons/generateIconsView.js
'
// just for @/views/icons , you can delete it
// register globally
Vue
.
component
(
'
svg-icon
'
,
SvgIcon
)
const
requireAll
=
requireContext
=>
requireContext
.
keys
().
map
(
requireContext
)
const
req
=
require
.
context
(
'
./svg
'
,
false
,
/
\.
svg$/
)
const
iconMap
=
requireAll
(
req
)
generateIconsView
.
generate
(
iconMap
)
// just for views/icons , you can delete it
generateIconsView
.
generate
(
iconMap
)
// just for
@/
views/icons , you can delete it
src/mock/login.js
浏览文件 @
d20585a3
...
...
@@ -14,13 +14,6 @@ const userMap = {
introduction
:
'
我是编辑
'
,
avatar
:
'
https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif
'
,
name
:
'
Normal Editor
'
},
developer
:
{
role
:
[
'
develop
'
],
token
:
'
develop
'
,
introduction
:
'
我是开发
'
,
avatar
:
'
https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif
'
,
name
:
'
工程师小王
'
}
}
...
...
src/permission.js
浏览文件 @
d20585a3
...
...
@@ -11,8 +11,8 @@ function hasPermission(roles, permissionRoles) {
return
roles
.
some
(
role
=>
permissionRoles
.
indexOf
(
role
)
>=
0
)
}
// register global progress.
const
whiteList
=
[
'
/login
'
,
'
/authredirect
'
]
// 不重定向白名单
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
NProgress
.
start
()
// 开启Progress
if
(
getToken
())
{
// 判断是否有token
...
...
src/router/index.js
浏览文件 @
d20585a3
...
...
@@ -87,22 +87,23 @@ export const asyncRouterMap = [
{
path
:
'
/components
'
,
component
:
Layout
,
name
:
'
component-demo
'
,
meta
:
{
title
:
'
components
'
,
icon
:
'
component
'
},
children
:
[
{
path
:
'
tinymce
'
,
component
:
_import
(
'
components-demo/tinymce
'
),
name
:
'
tinymce
'
,
meta
:
{
title
:
'
tinymce
'
}},
{
path
:
'
markdown
'
,
component
:
_import
(
'
components-demo/markdown
'
),
name
:
'
markdown
'
,
meta
:
{
title
:
'
markdown
'
}},
{
path
:
'
json-editor
'
,
component
:
_import
(
'
components-demo/jsonEditor
'
),
name
:
'
jsonEditor
'
,
meta
:
{
title
:
'
jsonEditor
'
}},
{
path
:
'
dnd-list
'
,
component
:
_import
(
'
components-demo/dndList
'
),
name
:
'
dndList
'
,
meta
:
{
title
:
'
dndList
'
}},
{
path
:
'
splitpane
'
,
component
:
_import
(
'
components-demo/splitpane
'
),
name
:
'
splitpane
'
,
meta
:
{
title
:
'
splitPane
'
}},
{
path
:
'
avatar-upload
'
,
component
:
_import
(
'
components-demo/avatarUpload
'
),
name
:
'
avatarUpload
'
,
meta
:
{
title
:
'
avatarUpload
'
}},
{
path
:
'
dropzone
'
,
component
:
_import
(
'
components-demo/dropzone
'
),
name
:
'
dropzone
'
,
meta
:
{
title
:
'
dropzone
'
}},
{
path
:
'
sticky
'
,
component
:
_import
(
'
components-demo/sticky
'
),
name
:
'
sticky
'
,
meta
:
{
title
:
'
sticky
'
}},
{
path
:
'
count-to
'
,
component
:
_import
(
'
components-demo/countTo
'
),
name
:
'
countTo
'
,
meta
:
{
title
:
'
countTo
'
}},
{
path
:
'
mixin
'
,
component
:
_import
(
'
components-demo/mixin
'
),
name
:
'
componentMixin
'
,
meta
:
{
title
:
'
componentMixin
'
}},
{
path
:
'
back-to-top
'
,
component
:
_import
(
'
components-demo/backToTop
'
),
name
:
'
backToTop
'
,
meta
:
{
title
:
'
backToTop
'
}}
{
path
:
'
tinymce
'
,
component
:
_import
(
'
components-demo/tinymce
'
),
name
:
'
tinymce
-demo
'
,
meta
:
{
title
:
'
tinymce
'
}},
{
path
:
'
markdown
'
,
component
:
_import
(
'
components-demo/markdown
'
),
name
:
'
markdown
-demo
'
,
meta
:
{
title
:
'
markdown
'
}},
{
path
:
'
json-editor
'
,
component
:
_import
(
'
components-demo/jsonEditor
'
),
name
:
'
jsonEditor
-demo
'
,
meta
:
{
title
:
'
jsonEditor
'
}},
{
path
:
'
dnd-list
'
,
component
:
_import
(
'
components-demo/dndList
'
),
name
:
'
dndList
-demo
'
,
meta
:
{
title
:
'
dndList
'
}},
{
path
:
'
splitpane
'
,
component
:
_import
(
'
components-demo/splitpane
'
),
name
:
'
splitpane
-demo
'
,
meta
:
{
title
:
'
splitPane
'
}},
{
path
:
'
avatar-upload
'
,
component
:
_import
(
'
components-demo/avatarUpload
'
),
name
:
'
avatarUpload
-demo
'
,
meta
:
{
title
:
'
avatarUpload
'
}},
{
path
:
'
dropzone
'
,
component
:
_import
(
'
components-demo/dropzone
'
),
name
:
'
dropzone
-demo
'
,
meta
:
{
title
:
'
dropzone
'
}},
{
path
:
'
sticky
'
,
component
:
_import
(
'
components-demo/sticky
'
),
name
:
'
sticky
-demo
'
,
meta
:
{
title
:
'
sticky
'
}},
{
path
:
'
count-to
'
,
component
:
_import
(
'
components-demo/countTo
'
),
name
:
'
countTo
-demo
'
,
meta
:
{
title
:
'
countTo
'
}},
{
path
:
'
mixin
'
,
component
:
_import
(
'
components-demo/mixin
'
),
name
:
'
componentMixin
-demo
'
,
meta
:
{
title
:
'
componentMixin
'
}},
{
path
:
'
back-to-top
'
,
component
:
_import
(
'
components-demo/backToTop
'
),
name
:
'
backToTop
-demo
'
,
meta
:
{
title
:
'
backToTop
'
}}
]
},
...
...
src/store/modules/app.js
浏览文件 @
d20585a3
...
...
@@ -50,7 +50,7 @@ const app = {
}
},
actions
:
{
T
oggleSideBar
({
commit
})
{
t
oggleSideBar
({
commit
})
{
commit
(
'
TOGGLE_SIDEBAR
'
)
},
setLanguage
({
commit
},
language
)
{
...
...
src/store/modules/user.js
浏览文件 @
d20585a3
...
...
@@ -50,8 +50,8 @@ const user = {
return
new
Promise
((
resolve
,
reject
)
=>
{
loginByUsername
(
username
,
userInfo
.
password
).
then
(
response
=>
{
const
data
=
response
.
data
setToken
(
response
.
data
.
token
)
commit
(
'
SET_TOKEN
'
,
data
.
token
)
setToken
(
response
.
data
.
token
)
resolve
()
}).
catch
(
error
=>
{
reject
(
error
)
...
...
src/styles/index.scss
浏览文件 @
d20585a3
...
...
@@ -110,6 +110,19 @@ code {
}
}
.warn-content
{
background
:
rgba
(
66
,
185
,
131
,.
1
);
border-radius
:
2px
;
padding
:
16px
;
padding
:
1rem
;
line-height
:
1
.6rem
;
word-spacing
:
.05rem
;
a
{
color
:
#42b983
;
font-weight
:
600
;
}
}
//main-container全局样式
.app-container
{
padding
:
20px
;
...
...
src/utils/clipboard.js
浏览文件 @
d20585a3
import
Clipboard
from
'
clipboard
'
import
Vue
from
'
vue
'
import
Clipboard
from
'
clipboard
'
function
clipboardSuccess
()
{
Vue
.
prototype
.
$message
({
...
...
src/views/components-demo/avatarUpload.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
这里核心代码用的是
<a
class=
'link-type'
href=
'//github.com/dai-siki/vue-image-crop-upload'
>
vue-image-crop-upload
</a>
由于我在使用时它只有vue@1版本,而且有些业务的需求耦合到七牛等等原因吧,自己改造了一下,如果大家要使用的话,优先还是使用官方component
<code>
这里核心代码用的是
<a
class=
"link-type"
href=
"//github.com/dai-siki/vue-image-crop-upload"
>
vue-image-crop-upload
</a>
由于我在使用时它只有vue@1版本,而且有些业务的需求耦合到七牛等等原因吧,自己改造了一下,如果大家要使用的话,优先还是使用官方component
</code>
<pan-thumb
:image=
'image'
></pan-thumb>
<pan-thumb
:image=
"image"
></pan-thumb>
<el-button
type=
"primary"
icon=
"upload"
style=
"position: absolute;bottom: 15px;margin-left: 40px;"
@
click=
"imagecropperShow=true"
>
修改头像
</el-button>
<image-cropper
:width=
"300"
:height=
"300"
url=
"https://httpbin.org/post"
@
close=
'close'
@
crop-upload-success=
"cropSuccess"
:key=
"imagecropperKey"
v-show=
"imagecropperShow"
></image-cropper>
<image-cropper
:width=
"300"
:height=
"300"
url=
"https://httpbin.org/post"
@
close=
'close'
@
crop-upload-success=
"cropSuccess"
:key=
"imagecropperKey"
v-show=
"imagecropperShow"
></image-cropper>
</div>
</
template
>
...
...
@@ -18,6 +20,7 @@ import ImageCropper from '@/components/ImageCropper'
import
PanThumb
from
'
@/components/PanThumb
'
export
default
{
name
:
'
avatarUpload-demo
'
,
components
:
{
ImageCropper
,
PanThumb
},
data
()
{
return
{
...
...
src/views/components-demo/backToTop.vue
浏览文件 @
d20585a3
...
...
@@ -138,6 +138,7 @@
import
BackToTop
from
'
@/components/BackToTop
'
export
default
{
name
:
'
backToTop-demo
'
,
components
:
{
BackToTop
},
data
()
{
return
{
...
...
src/views/components-demo/countTo.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
<a
href=
'https://github.com/PanJiaChen/vue-countTo'
target=
'_blank'
>
countTo component
</a></code>
<count-to
ref=
'example'
class=
'example'
:start-val=
'_startVal'
:end-val=
'_endVal'
:duration=
'_duration'
:decimals=
'_decimals'
:separator=
'_separator'
:prefix=
'_prefix'
:suffix=
'_suffix'
:autoplay=
'false'
></count-to>
<div
style=
'margin-left: 25%;margin-top: 40px;'
>
<label
class=
"label"
for=
"startValInput"
>
startVal:
<input
type=
"number"
v-model.number=
'setStartVal'
name=
'startValInput'
/></label>
<label
class=
"label"
for=
"endValInput"
>
endVal:
<input
type=
"number"
v-model.number=
'setEndVal'
name=
'endVaInput'
/></label>
<label
class=
"label"
for=
"durationInput"
>
duration:
<input
type=
"number"
v-model.number=
'setDuration'
name=
'durationInput'
/></label>
<div
class=
"startBtn example-btn"
@
click=
'start'
>
开始
</div>
<div
class=
"pause-resume-btn example-btn"
@
click=
'pauseResume'
>
暂停/恢复
</div>
<p
class=
"warn-content"
>
<a
href=
"https://github.com/PanJiaChen/vue-countTo"
target=
"_blank"
>
countTo-component
</a>
</p>
<count-to
ref=
"example"
class=
"example"
:start-val=
"_startVal"
:end-val=
"_endVal"
:duration=
"_duration"
:decimals=
"_decimals"
:separator=
"_separator"
:prefix=
"_prefix"
:suffix=
"_suffix"
:autoplay=
"false"
></count-to>
<div
style=
"margin-left: 25%;margin-top: 40px;"
>
<label
class=
"label"
for=
"startValInput"
>
startVal:
<input
type=
"number"
v-model.number=
"setStartVal"
name=
"startValInput"
/>
</label>
<label
class=
"label"
for=
"endValInput"
>
endVal:
<input
type=
"number"
v-model.number=
"setEndVal"
name=
"endVaInput"
/>
</label>
<label
class=
"label"
for=
"durationInput"
>
duration:
<input
type=
"number"
v-model.number=
"setDuration"
name=
"durationInput"
/>
</label>
<div
class=
"startBtn example-btn"
@
click=
"start"
>
开始
</div>
<div
class=
"pause-resume-btn example-btn"
@
click=
"pauseResume"
>
暂停/恢复
</div>
<br/>
<label
class=
"label"
for=
"decimalsInput"
>
decimals:
<input
type=
"number"
v-model.number=
'setDecimals'
name=
'decimalsInput'
/></label>
<label
class=
"label"
for=
"separatorInput"
>
separator:
<input
v-model=
'setSeparator'
name=
'separatorInput'
/></label>
<label
class=
"label"
for=
"prefixInput"
>
prefix:
<input
v-model=
'setPrefix'
name=
'prefixInput'
/></label>
<label
class=
"label"
for=
"suffixInput"
>
suffix:
<input
v-model=
'setSuffix'
name=
'suffixInput'
/></label>
<label
class=
"label"
for=
"decimalsInput"
>
decimals:
<input
type=
"number"
v-model.number=
"setDecimals"
name=
"decimalsInput"
/>
</label>
<label
class=
"label"
for=
"separatorInput"
>
separator:
<input
v-model=
"setSeparator"
name=
"separatorInput"
/>
</label>
<label
class=
"label"
for=
"prefixInput"
>
prefix:
<input
v-model=
"setPrefix"
name=
"prefixInput"
/>
</label>
<label
class=
"label"
for=
"suffixInput"
>
suffix:
<input
v-model=
"setSuffix"
name=
"suffixInput"
/>
</label>
</div>
<code>
<
count-to :start-val=
'
{{
_startVal
}}
'
:end-val=
'
{{
_endVal
}}
'
:duration=
'
{{
_duration
}}
'
:decimals=
'
{{
_decimals
}}
'
:separator=
'
{{
_separator
}}
'
:prefix=
'
{{
_prefix
}}
'
:suffix=
'
{{
_suffix
}}
'
:autoplay=false
>
</code>
<code>
<
count-to :start-val=
'
{{
_startVal
}}
'
:end-val=
'
{{
_endVal
}}
'
:duration=
'
{{
_duration
}}
'
:decimals=
'
{{
_decimals
}}
'
:separator=
'
{{
_separator
}}
'
:prefix=
'
{{
_prefix
}}
'
:suffix=
'
{{
_suffix
}}
'
:autoplay=false
>
</code>
</div>
</
template
>
...
...
@@ -25,6 +41,7 @@
import
countTo
from
'
vue-count-to
'
export
default
{
name
:
'
countTo-demo
'
,
components
:
{
countTo
},
data
()
{
return
{
...
...
src/views/components-demo/dndList.vue
浏览文件 @
d20585a3
...
...
@@ -12,6 +12,7 @@ import DndList from '@/components/DndList'
import
{
fetchList
}
from
'
@/api/article
'
export
default
{
name
:
'
dnd-list-demo
'
,
components
:
{
DndList
},
data
()
{
return
{
...
...
src/views/components-demo/dropzone.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
基于
<a
class=
'link-type'
href=
'https://github.com/rowanwins/vue-dropzone'
>
dropzone
</a>
封装 ,
基于
<a
class=
"link-type"
href=
"https://github.com/rowanwins/vue-dropzone"
>
dropzone
</a>
封装 ,
由于我司业务有特殊需求,而且要传七牛 所以没用第三方 选择了自己封装
</code>
<div
class=
"editor-container"
>
...
...
@@ -14,6 +14,7 @@
import
Dropzone
from
'
@/components/Dropzone
'
export
default
{
name
:
'
dropzone-demo
'
,
components
:
{
Dropzone
},
methods
:
{
dropzoneS
(
file
)
{
...
...
src/views/components-demo/jsonEditor.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
"components-container"
style=
"height:100vh"
>
<code>
JsonEditor is base on
<a
href=
"https://github.com/codemirror/CodeMirror"
target=
"_blank"
>
CodeMirrorr
</a>
, lint base on json-lint
</code>
<div
class=
"editor-container"
>
<json-editor
ref=
"jsonEditor"
v-model=
"value"
></json-editor>
...
...
@@ -13,6 +13,7 @@ import JsonEditor from '@/components/JsonEditor'
const
jsonData
=
'
[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]
'
export
default
{
name
:
'
jsonEditor-demo
'
,
components
:
{
JsonEditor
},
data
()
{
return
{
...
...
src/views/components-demo/markdown.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
Markdown 我们这里选用了
<a
href=
"https://github.com/sparksuite/simplemde-markdown-editor"
target=
"_blank"
>
simplemde-markdown-editor
</a>
,简单的用vue封装了一下
<a
target=
'_blank'
href=
'https://segmentfault.com/a/1190000009762198#articleHeader14'
>
相关文章
</a></code>
<code>
Markdown 我们这里选用了
<a
href=
"https://github.com/sparksuite/simplemde-markdown-editor"
target=
"_blank"
>
simplemde-markdown-editor
</a>
,简单的用vue封装了一下
<a
target=
"_blank"
href=
"https://segmentfault.com/a/1190000009762198#articleHeader14"
>
相关文章
</a>
</code>
<div
class=
"editor-container"
>
<markdown-editor
id=
'contentEditor'
ref=
"contentEditor"
v-model=
'content'
:height=
"300"
:zIndex=
'20'
></markdown-editor>
<markdown-editor
id=
"contentEditor"
ref=
"contentEditor"
v-model=
"content"
:height=
"300"
:zIndex=
"20"
></markdown-editor>
</div>
<el-button
@
click=
'markdown2Html'
style=
"margin-top:80px;"
type=
"primary"
>
转为HTML
<i
class=
"el-icon-document el-icon--right"
></i>
</el-button>
<el-button
@
click=
"markdown2Html"
style=
"margin-top:80px;"
type=
"primary"
icon=
"el-icon-document"
>
转为HTML
</el-button>
<div
v-html=
"html"
></div>
</div>
</
template
>
...
...
@@ -13,6 +17,7 @@
import
MarkdownEditor
from
'
@/components/MarkdownEditor
'
export
default
{
name
:
'
markdown-demo
'
,
components
:
{
MarkdownEditor
},
data
()
{
return
{
...
...
src/views/components-demo/mixin.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<el-row>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn blue-btn"
to=
"/components/index"
>
Components
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn light-blue-btn"
to=
"/charts/index"
>
Charts
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn pink-btn"
to=
"/excel/download"
>
Excel
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn green-btn"
to=
"/example/table/complex-table"
>
Table
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn tiffany-btn"
to=
"/form/edit-form"
>
Form
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<el-col
:span=
"4"
class=
"text-center"
>
<router-link
class=
"pan-btn yellow-btn"
to=
"/theme/index"
>
Theme
</router-link>
</el-col>
</el-row>
...
...
@@ -43,7 +43,7 @@
<span>
图片hover效果
</span>
</div>
<div
class=
"component-item"
>
<pan-thumb
width=
'100px'
height=
'100px'
image=
'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
>
<pan-thumb
width=
"100px"
height=
"100px"
image=
"https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191"
>
vue-element-admin
</pan-thumb>
</div>
...
...
@@ -67,7 +67,7 @@
<span>
hover text
</span>
</div>
<div
class=
"component-item"
>
<mallki
className=
'mallki-text'
text=
'vue-element-admin'
></mallki>
<mallki
className=
"mallki-text"
text=
"vue-element-admin"
></mallki>
</div>
</el-card>
</el-col>
...
...
@@ -83,6 +83,7 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
import
Mallki
from
'
@/components/TextHoverEffect/Mallki
'
export
default
{
name
:
'
componentMixin-demo
'
,
components
:
{
PanThumb
,
MdInput
,
...
...
src/views/components-demo/splitpane.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
splitPane 如果你用过
<a
href=
'http://codepen.io/'
target=
'_blank'
>
codepen
</a>
,
<a
href=
'https://jsfiddle.net/'
target=
'_blank'
>
jsfiddle
</a>
就不会陌生了
<a
href=
'https://github.com/PanJiaChen/vue-split-pane'
target=
'_blank'
>
项目地址
</a>
<code>
splitPane 如果你用过
<a
href=
"http://codepen.io/"
target=
"_blank"
>
codepen
</a>
,
<a
href=
"https://jsfiddle.net/"
target=
"_blank"
>
jsfiddle
</a>
就不会陌生了
<a
href=
"https://github.com/PanJiaChen/vue-split-pane"
target=
'_blank'
>
项目地址
</a>
</code>
<split-pane
v-on:resize=
"resize"
split=
"vertical"
>
<template
slot=
"paneL"
>
...
...
@@ -26,6 +26,7 @@
import
splitPane
from
'
vue-splitpane
'
export
default
{
name
:
'
splitpane-demo
'
,
components
:
{
splitPane
},
methods
:
{
resize
()
{
...
...
@@ -37,29 +38,29 @@ export default {
<
style
scoped
>
.components-container
{
position
:
relative
;
height
:
100vh
;
position
:
relative
;
height
:
100vh
;
}
.left-container
{
background-color
:
#F38181
;
height
:
100%
;
background-color
:
#F38181
;
height
:
100%
;
}
.right-container
{
background-color
:
#FCE38A
;
height
:
200px
;
background-color
:
#FCE38A
;
height
:
200px
;
}
.top-container
{
background-color
:
#FCE38A
;
width
:
100%
;
height
:
100%
;
background-color
:
#FCE38A
;
width
:
100%
;
height
:
100%
;
}
.bottom-container
{
width
:
100%
;
background-color
:
#95E1D3
;
height
:
100%
;
width
:
100%
;
background-color
:
#95E1D3
;
height
:
100%
;
}
</
style
>
src/views/components-demo/sticky.vue
浏览文件 @
d20585a3
...
...
@@ -97,6 +97,7 @@
import
Sticky
from
'
@/components/Sticky
'
export
default
{
name
:
'
sticky-demo
'
,
components
:
{
Sticky
},
data
()
{
return
{
...
...
src/views/components-demo/tinymce.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"components-container"
>
<code>
公司做的后台主要是一个cms系统,公司也是以自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了Tinymce
<a
target=
'_blank'
href=
'https://segmentfault.com/a/1190000009762198#articleHeader13'
>
相关文章
</a>
<a
target=
'_blank'
href=
'https://www.tinymce.com/'
>
官网
</a></code>
<code>
公司做的后台主要是一个cms系统,公司也是以自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了Tinymce
<a
target=
"_blank"
href=
"https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"
>
文档介绍
</a>
</code>
<div>
<tinymce
:height=
'200'
v-model=
"content"
></tinymce>
<tinymce
:height=
"200"
v-model=
"content"
></tinymce>
</div>
<div
class=
'editor-content'
v-html=
'content'
></div>
<div
class=
"editor-content"
v-html=
"content"
></div>
</div>
</
template
>
...
...
@@ -12,6 +14,7 @@
import
Tinymce
from
'
@/components/Tinymce
'
export
default
{
name
:
'
tinymce-demo
'
,
components
:
{
Tinymce
},
data
()
{
return
{
...
...
src/views/dashboard/admin/components/BarChart.vue
浏览文件 @
d20585a3
...
...
@@ -8,6 +8,7 @@ require('echarts/theme/macarons') // echarts 主题
import
{
debounce
}
from
'
@/utils
'
const
animationDuration
=
6000
export
default
{
props
:
{
className
:
{
...
...
src/views/dashboard/admin/components/PanelGroup.vue
0 → 100644
浏览文件 @
d20585a3
<
template
>
<el-row
class=
"panel-group"
:gutter=
"40"
>
<el-col
:span=
"6"
>
<div
class=
'card-panel'
@
click=
"handleSetLineChartData('newVisitis')"
>
<div
class=
"card-panel-icon-wrapper icon-people"
>
<svg-icon
icon-class=
"peoples"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
"card-panel-description"
>
<div
class=
"card-panel-text"
>
New Visits
</div>
<count-to
class=
"card-panel-num"
:startVal=
"0"
:endVal=
"102400"
:duration=
"3600"
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
"card-panel"
@
click=
"handleSetLineChartData('messages')"
>
<div
class=
"card-panel-icon-wrapper icon-message"
>
<svg-icon
icon-class=
"message"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
"card-panel-description"
>
<div
class=
"card-panel-text"
>
Messages
</div>
<count-to
class=
"card-panel-num"
:startVal=
"0"
:endVal=
"81212"
:duration=
"4000"
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
"card-panel"
@
click=
"handleSetLineChartData('purchases')"
>
<div
class=
"card-panel-icon-wrapper icon-money"
>
<svg-icon
icon-class=
"money"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
"card-panel-description"
>
<div
class=
"card-panel-text"
>
Purchases
</div>
<count-to
class=
"card-panel-num"
:startVal=
"0"
:endVal=
"9280"
:duration=
"4000"
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
"card-panel"
@
click=
"handleSetLineChartData('shoppings')"
>
<div
class=
"card-panel-icon-wrapper icon-shoppingCard"
>
<svg-icon
icon-class=
"shoppingCard"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
"card-panel-description"
>
<div
class=
"card-panel-text"
>
Shoppings
</div>
<count-to
class=
"card-panel-num"
:startVal=
"0"
:endVal=
"13600"
:duration=
"4600"
></count-to>
</div>
</div>
</el-col>
</el-row>
</
template
>
<
script
>
import
CountTo
from
'
vue-count-to
'
export
default
{
components
:
{
CountTo
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.panel-group
{
margin-top
:
20px
;
.card-panel
{
height
:
108px
;
cursor
:
pointer
;
font-size
:
12px
;
position
:
relative
;
overflow
:
hidden
;
color
:
#666
;
background
:
#fff
;
box-shadow
:
4px
4px
40px
rgba
(
0
,
0
,
0
,
.05
);
border-color
:
rgba
(
0
,
0
,
0
,
.05
);
&
:hover
{
.card-panel-icon-wrapper
{
color
:
#fff
;
}
.icon-people
{
background
:
#40c9c6
;
}
.icon-message
{
background
:
#36a3f7
;
}
.icon-money
{
background
:
#f4516c
;
}
.icon-shoppingCard
{
background
:
#34bfa3
}
}
.icon-people
{
color
:
#40c9c6
;
}
.icon-message
{
color
:
#36a3f7
;
}
.icon-money
{
color
:
#f4516c
;
}
.icon-shoppingCard
{
color
:
#34bfa3
}
.card-panel-icon-wrapper
{
float
:
left
;
margin
:
14px
0
0
14px
;
padding
:
16px
;
transition
:
all
0
.38s
ease-out
;
border-radius
:
6px
;
}
.card-panel-icon
{
float
:
left
;
font-size
:
48px
;
}
.card-panel-description
{
float
:
right
;
font-weight
:
bold
;
margin
:
26px
;
margin-left
:
0px
;
.card-panel-text
{
line-height
:
18px
;
color
:
rgba
(
0
,
0
,
0
,
0
.45
);
font-size
:
16px
;
margin-bottom
:
12px
;
}
.card-panel-num
{
font-size
:
20px
;
}
}
}
}
</
style
>
src/views/dashboard/admin/index.vue
浏览文件 @
d20585a3
...
...
@@ -2,55 +2,10 @@
<div
class=
"dashboard-editor-container"
>
<github-corner></github-corner>
<el-row
class=
"panel-group"
:gutter=
"40"
>
<el-col
:span=
"6"
>
<div
class=
'card-panel'
@
click=
"handleSetLineChartData('newVisitis')"
>
<div
class=
"card-panel-icon-wrapper icon-people"
>
<svg-icon
icon-class=
"peoples"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
'card-panel-description'
>
<div
class=
'card-panel-text'
>
New Visits
</div>
<count-to
class=
"card-panel-num"
:startVal=
'0'
:endVal=
'102400'
:duration=
'3600'
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
'card-panel'
@
click=
"handleSetLineChartData('messages')"
>
<div
class=
"card-panel-icon-wrapper icon-message"
>
<svg-icon
icon-class=
"message"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
'card-panel-description'
>
<div
class=
'card-panel-text'
>
Messages
</div>
<count-to
class=
"card-panel-num"
:startVal=
'0'
:endVal=
'81212'
:duration=
'4000'
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
'card-panel'
@
click=
"handleSetLineChartData('purchases')"
>
<div
class=
"card-panel-icon-wrapper icon-money"
>
<svg-icon
icon-class=
"money"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
'card-panel-description'
>
<div
class=
'card-panel-text'
>
Purchases
</div>
<count-to
class=
"card-panel-num"
:startVal=
'0'
:endVal=
'9280'
:duration=
'4000'
></count-to>
</div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div
class=
'card-panel'
@
click=
"handleSetLineChartData('shoppings')"
>
<div
class=
"card-panel-icon-wrapper icon-shoppingCard"
>
<svg-icon
icon-class=
"shoppingCard"
class-name=
"card-panel-icon"
/>
</div>
<div
class=
'card-panel-description'
>
<div
class=
'card-panel-text'
>
Shoppings
</div>
<count-to
class=
"card-panel-num"
:startVal=
'0'
:endVal=
'13600'
:duration=
'4600'
></count-to>
</div>
</div>
</el-col>
</el-row>
<panel-group></panel-group>
<el-row
style=
"margin-top:30px;background:#fff;padding:15px 15px 0;"
>
<line-chart
:chart-data=
'lineChartData'
></line-chart>
<line-chart
:chart-data=
"lineChartData"
></line-chart>
</el-row>
<el-row
style=
"margin-top:30px;"
:gutter=
"30"
>
...
...
@@ -87,8 +42,8 @@
</
template
>
<
script
>
import
CountTo
from
'
vue-count-to
'
import
GithubCorner
from
'
@/components/GithubCorner
'
import
PanelGroup
from
'
./components/PanelGroup
'
import
LineChart
from
'
./components/LineChart
'
import
RaddarChart
from
'
./components/RaddarChart
'
import
PieChart
from
'
./components/PieChart
'
...
...
@@ -119,8 +74,8 @@ const lineChartData = {
export
default
{
name
:
'
dashboard-admin
'
,
components
:
{
CountTo
,
GithubCorner
,
PanelGroup
,
LineChart
,
RaddarChart
,
PieChart
,
...
...
@@ -146,75 +101,6 @@ export default {
.dashboard-editor-container
{
padding
:
30px
;
background-color
:
rgb
(
240
,
242
,
245
);
.panel-group
{
margin-top
:
20px
;
}
.card-panel
{
height
:
108px
;
cursor
:
pointer
;
font-size
:
12px
;
position
:
relative
;
overflow
:
hidden
;
color
:
#666
;
background
:
#fff
;
box-shadow
:
4px
4px
40px
rgba
(
0
,
0
,
0
,
.05
);
border-color
:
rgba
(
0
,
0
,
0
,
.05
);
&
:hover
{
.card-panel-icon-wrapper
{
color
:
#fff
;
}
.icon-people
{
background
:
#36a3f7
;
}
.icon-message
{
background
:
#f4516c
;
}
.icon-money
{
background
:
#716aca
;
}
.icon-shoppingCard
{
background
:
#34bfa3
}
}
.icon-people
{
color
:
#36a3f7
;
}
.icon-message
{
color
:
#f4516c
;
}
.icon-money
{
color
:
#716aca
;
}
.icon-shoppingCard
{
color
:
#34bfa3
}
.card-panel-icon-wrapper
{
float
:
left
;
margin
:
14px
0
0
14px
;
padding
:
16px
;
transition
:
all
0
.38s
ease-out
;
border-radius
:
6px
;
}
.card-panel-icon
{
float
:
left
;
font-size
:
48px
;
}
.card-panel-description
{
float
:
right
;
font-weight
:
bold
;
margin
:
26px
;
margin-left
:
0px
;
.card-panel-text
{
line-height
:
18px
;
color
:
rgba
(
0
,
0
,
0
,
0
.45
);
font-size
:
16px
;
margin-bottom
:
12px
;
}
.card-panel-num
{
font-size
:
20px
;
}
}
}
.chart-wrapper
{
background
:
#fff
;
padding
:
15px
15px
0
;
...
...
src/views/dashboard/editor/index.vue
浏览文件 @
d20585a3
...
...
@@ -7,11 +7,11 @@
<github-corner></github-corner>
<div
class=
"info-container"
>
<span
class=
"display_name"
>
{{
name
}}
</span>
<span
style=
'font-size:20px;padding-top:20px;display:inline-block;'
>
普通编辑dashboard
</span>
<span
style=
"font-size:20px;padding-top:20px;display:inline-block;"
>
普通编辑dashboard
</span>
</div>
</div>
<div>
<img
class=
'emptyGif'
:src=
"emptyGif"
>
<img
class=
"emptyGif"
:src=
"emptyGif"
>
</div>
</div>
</
template
>
...
...
src/views/layout/components/Navbar.vue
浏览文件 @
d20585a3
...
...
@@ -83,7 +83,7 @@ export default {
},
methods
:
{
toggleSideBar
()
{
this
.
$store
.
dispatch
(
'
T
oggleSideBar
'
)
this
.
$store
.
dispatch
(
'
t
oggleSideBar
'
)
},
handleSetLanguage
(
lang
)
{
this
.
$i18n
.
locale
=
lang
...
...
src/views/layout/components/Sidebar/SidebarItem.vue
浏览文件 @
d20585a3
...
...
@@ -9,7 +9,7 @@
</el-menu-item>
</router-link>
<el-submenu
v-if=
"!item.hidden&&item.children&&item.children.length>1"
:index=
"item.name"
:key=
'item.name'
>
<el-submenu
v-if=
"!item.hidden&&item.children&&item.children.length>1"
:index=
"item.name
||item.path
"
:key=
'item.name'
>
<template
slot=
"title"
>
<svg-icon
v-if=
'item.meta&&item.meta.icon'
:icon-class=
"item.meta.icon"
></svg-icon>
<span
v-if=
'item.meta&&item.meta.title'
>
{{
generateTitle
(
item
.
meta
.
title
)
}}
</span>
...
...
src/views/login/index.vue
浏览文件 @
d20585a3
...
...
@@ -16,15 +16,15 @@
</span>
<el-input
name=
"password"
:type=
"pwdType"
@
keyup.enter.native=
"handleLogin"
v-model=
"loginForm.password"
autoComplete=
"on"
placeholder=
"密码"
/>
<span
class=
'show-pwd'
@
click=
'showPwd'
><svg-icon
icon-class=
"eye"
/></span>
<span
class=
"show-pwd"
@
click=
"showPwd"
><svg-icon
icon-class=
"eye"
/></span>
</el-form-item>
<el-button
type=
"primary"
style=
"width:100%;margin-bottom:30px;"
:loading=
"loading"
@
click.native.prevent=
"handleLogin"
>
登录
</el-button>
<div
class=
'tips'
>
账号:admin 密码随便填
</div>
<div
class=
'tips'
>
账号:editor 密码随便填
</div>
<div
class=
"tips"
>
账号:admin 密码随便填
</div>
<div
class=
"tips"
>
账号:editor 密码随便填
</div>
<el-button
class=
'thirdparty-button'
type=
"primary"
@
click=
'showDialog=true'
>
打开第三方登录
</el-button>
<el-button
class=
"thirdparty-button"
type=
"primary"
@
click=
"showDialog=true"
>
打开第三方登录
</el-button>
</el-form>
<el-dialog
title=
"第三方验证"
:visible.sync=
"showDialog"
>
...
...
src/views/svg-icons/index.vue
浏览文件 @
d20585a3
<
template
>
<div
class=
"icons-container"
>
<p
class=
"warn-content"
>
<a
href=
"https://panjiachen.github.io/vue-element-admin-site/#/icon"
target=
"_blank"
>
添加和使用方式
</a>
</p>
<div
class=
"icons-wrapper"
>
<div
v-for=
'item of iconsMap'
:key=
'item'
@
click=
'handleClipboard(generateIconCode(item),$event)'
>
<div
v-for=
"item of iconsMap"
:key=
"item"
@
click=
"handleClipboard(generateIconCode(item),$event)"
>
<el-tooltip
placement=
"top"
>
<div
slot=
"content"
>
{{
generateIconCode
(
item
)
}}
</div>
<div
class=
'icon-item'
>
<div
class=
"icon-item"
>
<svg-icon
:icon-class=
"item"
/>
<span>
{{
item
}}
</span>
</div>
...
...
@@ -16,10 +19,9 @@
</div>
</
template
>
<
script
>
import
icons
from
'
./generateIconsView
'
import
clipboard
from
'
@/utils/clipboard
'
// use clipboard directly
import
clipboard
from
'
@/utils/clipboard
'
export
default
{
name
:
'
icons
'
,
...
...
@@ -47,7 +49,7 @@ export default {
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.icons-container
{
margin
:
4
0px
20px
0
;
margin
:
1
0px
20px
0
;
overflow
:
hidden
;
.icons-wrapper
{
margin
:
0
auto
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录