Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
f42c6775
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
333
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f42c6775
编写于
6月 29, 2021
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加自定义皮肤功能 清理无用文件
上级
7e8eddf1
变更
9
显示空白变更内容
内联
并排
Showing
9 changed file
with
192 addition
and
9882 deletion
+192
-9882
server/model/sys_user.go
server/model/sys_user.go
+3
-0
web/src/components/themeChange/index.vue
web/src/components/themeChange/index.vue
+0
-151
web/src/store/module/user.js
web/src/store/module/user.js
+49
-13
web/src/style/main.scss
web/src/style/main.scss
+6
-21
web/src/view/layout/aside/historyComponent/history.vue
web/src/view/layout/aside/historyComponent/history.vue
+24
-6
web/src/view/layout/aside/index.vue
web/src/view/layout/aside/index.vue
+28
-4
web/src/view/layout/index.vue
web/src/view/layout/index.vue
+21
-149
web/src/view/layout/setting/index.vue
web/src/view/layout/setting/index.vue
+61
-28
web/yarn.lock
web/yarn.lock
+0
-9510
未找到文件。
server/model/sys_user.go
浏览文件 @
f42c6775
...
...
@@ -14,4 +14,7 @@ type SysUser struct {
HeaderImg
string
`json:"headerImg" gorm:"default:http://qmplusimg.henrongyi.top/head.png;comment:用户头像"`
// 用户头像
Authority
SysAuthority
`json:"authority" gorm:"foreignKey:AuthorityId;references:AuthorityId;comment:用户角色"`
AuthorityId
string
`json:"authorityId" gorm:"default:888;comment:用户角色ID"`
// 用户角色ID
SideMode
string
`json:"sideMode" gorm:"default:dark;comment:用户角色ID"`
// 用户侧边主题
ActiveColor
string
`json:"activeColor" gorm:"default:#1890ff;comment:用户角色ID"`
// 活跃颜色
BaseColor
string
`json:"baseColor" gorm:"default:#fff;comment:用户角色ID"`
// 基础颜色
}
web/src/components/themeChange/index.vue
已删除
100644 → 0
浏览文件 @
7e8eddf1
<
template
>
<el-color-picker
v-model=
"theme"
:predefine=
"['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class=
"theme-picker"
popper-class=
"theme-picker-dropdown"
/>
</
template
>
<
script
>
const
version
=
require
(
'
element-ui/package.json
'
).
version
// element-ui version from node_modules
const
ORIGINAL_THEME
=
'
#409EFF
'
// default color
export
default
{
data
()
{
return
{
chalk
:
''
,
// content of theme-chalk css
theme
:
''
}
},
computed
:
{
defaultTheme
()
{
return
this
.
$store
.
state
.
user
.
theme
}
},
watch
:
{
defaultTheme
:
{
handler
:
function
(
val
,
oldVal
)
{
this
.
theme
=
val
},
immediate
:
true
},
async
theme
(
val
)
{
const
oldVal
=
this
.
chalk
?
this
.
theme
:
ORIGINAL_THEME
if
(
typeof
val
!==
'
string
'
)
return
const
themeCluster
=
this
.
getThemeCluster
(
val
.
replace
(
'
#
'
,
''
))
const
originalCluster
=
this
.
getThemeCluster
(
oldVal
.
replace
(
'
#
'
,
''
))
const
$message
=
this
.
$message
({
message
:
'
修改主题色中
'
,
customClass
:
'
theme-message
'
,
type
:
'
success
'
,
duration
:
0
,
iconClass
:
'
el-icon-loading
'
})
const
getHandler
=
(
variable
,
id
)
=>
{
return
()
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
'
#
'
,
''
))
const
newStyle
=
this
.
updateStyle
(
this
[
variable
],
originalCluster
,
themeCluster
)
let
styleTag
=
document
.
getElementById
(
id
)
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
'
style
'
)
styleTag
.
setAttribute
(
'
id
'
,
id
)
document
.
head
.
appendChild
(
styleTag
)
}
styleTag
.
innerText
=
newStyle
}
}
if
(
!
this
.
chalk
)
{
const
url
=
`https://unpkg.com/element-ui@
${
version
}
/lib/theme-chalk/index.css`
await
this
.
getCSSString
(
url
,
'
chalk
'
)
}
const
chalkHandler
=
getHandler
(
'
chalk
'
,
'
chalk-style
'
)
chalkHandler
()
const
styles
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'
style
'
))
.
filter
(
style
=>
{
const
text
=
style
.
innerText
return
new
RegExp
(
oldVal
,
'
i
'
).
test
(
text
)
&&
!
/Chalk Variables/
.
test
(
text
)
})
styles
.
forEach
(
style
=>
{
const
{
innerText
}
=
style
if
(
typeof
innerText
!==
'
string
'
)
return
style
.
innerText
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
)
})
this
.
$emit
(
'
change
'
,
val
)
$message
.
close
()
}
},
methods
:
{
updateStyle
(
style
,
oldCluster
,
newCluster
)
{
let
newStyle
=
style
oldCluster
.
forEach
((
color
,
index
)
=>
{
newStyle
=
newStyle
.
replace
(
new
RegExp
(
color
,
'
ig
'
),
newCluster
[
index
])
})
return
newStyle
},
getCSSString
(
url
,
variable
)
{
return
new
Promise
(
resolve
=>
{
const
xhr
=
new
XMLHttpRequest
()
xhr
.
onreadystatechange
=
()
=>
{
if
(
xhr
.
readyState
===
4
&&
xhr
.
status
===
200
)
{
this
[
variable
]
=
xhr
.
responseText
.
replace
(
/@font-face{
[^
}
]
+}/
,
''
)
resolve
()
}
}
xhr
.
open
(
'
GET
'
,
url
)
xhr
.
send
()
})
},
getThemeCluster
(
theme
)
{
const
tintColor
=
(
color
,
tint
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
if
(
tint
===
0
)
{
// when primary color is in its rgb space
return
[
red
,
green
,
blue
].
join
(
'
,
'
)
}
else
{
red
+=
Math
.
round
(
tint
*
(
255
-
red
))
green
+=
Math
.
round
(
tint
*
(
255
-
green
))
blue
+=
Math
.
round
(
tint
*
(
255
-
blue
))
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
}
const
shadeColor
=
(
color
,
shade
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
red
=
Math
.
round
((
1
-
shade
)
*
red
)
green
=
Math
.
round
((
1
-
shade
)
*
green
)
blue
=
Math
.
round
((
1
-
shade
)
*
blue
)
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
const
clusters
=
[
theme
]
for
(
let
i
=
0
;
i
<=
9
;
i
++
)
{
clusters
.
push
(
tintColor
(
theme
,
Number
((
i
/
10
).
toFixed
(
2
))))
}
clusters
.
push
(
shadeColor
(
theme
,
0.1
))
return
clusters
}
}
}
</
script
>
<
style
>
.theme-message
,
.theme-picker-dropdown
{
z-index
:
99999
!important
;
}
.theme-picker
.el-color-picker__trigger
{
height
:
26px
!important
;
width
:
26px
!important
;
padding
:
2px
;
}
.theme-picker-dropdown
.el-color-dropdown__link-btn
{
display
:
none
;
}
</
style
>
web/src/store/module/user.js
浏览文件 @
f42c6775
import
{
login
}
from
'
@/api/user
'
import
{
jsonInBlacklist
}
from
'
@/api/jwt
'
import
router
from
'
@/router/index
'
import
variables
from
'
@/style/element_visiable.scss
'
import
{
setUserInfo
}
from
'
@/api/user
'
import
{
Message
}
from
'
element-ui
'
export
const
user
=
{
namespaced
:
true
,
state
:
{
...
...
@@ -10,8 +12,9 @@ export const user = {
nickName
:
''
,
headerImg
:
''
,
authority
:
''
,
sideMode
:
'
dark
'
,
theme
:
variables
.
colorPrimary
,
sideMode
:
'
dark
'
,
activeColor
:
'
#1890ff
'
,
baseColor
:
'
#fff
'
},
token
:
''
},
...
...
@@ -42,11 +45,14 @@ export const user = {
...
userInfo
}
},
CHANGETHEME
:
(
state
,
value
)
=>
{
state
.
theme
=
value
ChangeActiveColor
:
async
(
state
,
val
)
=>
{
state
.
userInfo
.
activeColor
=
val
},
ChangeSideMode
:
async
(
state
,
val
)
=>
{
state
.
userInfo
.
sideMode
=
val
},
C
HANGESIDEMODE
:
(
state
,
val
)
=>
{
state
.
sideMode
=
val
C
hangeBaseColor
:
(
state
,
val
)
=>
{
state
.
userInfo
.
baseColor
=
val
}
},
actions
:
{
...
...
@@ -74,11 +80,35 @@ export const user = {
commit
(
'
LoginOut
'
)
}
},
changeTheme
({
commit
},
data
)
{
commit
(
'
CHANGETHEME
'
,
data
)
async
changeActiveColor
({
commit
,
state
},
data
)
{
const
res
=
await
setUserInfo
({
activeColor
:
data
,
ID
:
state
.
userInfo
.
ID
})
if
(
res
.
code
===
0
)
{
commit
(
'
ChangeActiveColor
'
,
data
)
Message
({
type
:
'
success
'
,
message
:
'
设置成功
'
})
}
},
changeSideMode
({
commit
},
data
)
{
commit
(
'
CHANGESIDEMODE
'
,
data
)
async
changeSideMode
({
commit
,
state
},
data
)
{
const
res
=
await
setUserInfo
({
sideMode
:
data
,
ID
:
state
.
userInfo
.
ID
})
if
(
res
.
code
===
0
)
{
commit
(
'
ChangeSideMode
'
,
data
)
Message
({
type
:
'
success
'
,
message
:
'
设置成功
'
})
}
},
async
changeBaseColor
({
commit
,
state
},
data
)
{
const
res
=
await
setUserInfo
({
baseColor
:
data
,
ID
:
state
.
userInfo
.
ID
})
if
(
res
.
code
===
0
)
{
commit
(
'
ChangeBaseColor
'
,
data
)
Message
({
type
:
'
success
'
,
message
:
'
设置成功
'
})
}
}
},
getters
:
{
...
...
@@ -88,8 +118,14 @@ export const user = {
token
(
state
)
{
return
state
.
token
},
getSideMode
(
state
)
{
return
state
.
sideMode
sideMode
(
state
)
{
return
state
.
userInfo
.
sideMode
},
baseColor
(
state
)
{
return
state
.
userInfo
.
baseColor
},
activeColor
(
state
)
{
return
state
.
userInfo
.
activeColor
}
}
...
...
web/src/style/main.scss
浏览文件 @
f42c6775
...
...
@@ -569,7 +569,7 @@ li {
line-height
:
$height-aside-tilte
;
background
:
$bg-aside
;
text-align
:
center
;
transition
:
all
0
.3s
;
.logoimg
{
width
:
$width-aside-img
;
height
:
$height-aside-img
;
...
...
@@ -593,6 +593,7 @@ li {
.aside
{
.el-menu-vertical
{
transition
:
all
0
.3s
;
background-color
:
$bg-aside
;
}
.el-submenu
{
...
...
@@ -1090,21 +1091,6 @@ li {
border-left
:
1px
solid
$border-color
;
}
.
el-tabs__item
:
:
before
{
content
:
""
;
width
:
9px
;
height
:
9px
;
margin-right
:
8px
;
display
:
inline-block
;
background-color
:
#ddd
;
border-radius
:
50%
;
transition
:
background-color
.2s
;
}
.
el-tabs__item
.
is-active
:
:
before
{
background-color
:
#409eff
;
}
.el-tabs__item.is-active
{
background-color
:
rgba
(
64
,
158
,
255
,
.08
);
}
...
...
@@ -1284,7 +1270,6 @@ $mainHight: 100vh;
.el-menu-vertical
{
height
:
calc
(
100vh
-
64px
)
!
important
;
visibility
:
auto
;
&
:not
(
.el-menu--collapse
)
{
width
:
220px
;
}
...
...
web/src/view/layout/aside/historyComponent/history.vue
浏览文件 @
f42c6775
<
template
>
<
template
>
<div
class=
"router-history"
>
<el-tabs
v-model=
"activeValue"
...
...
@@ -10,11 +10,14 @@
>
<el-tab-pane
v-for=
"item in historys"
:key=
"
item.name + JSON.stringify(item.query)+JSON.stringify(item.params
)"
:key=
"
name(item
)"
:label=
"item.meta.title"
:name=
"
item.name + JSON.stringify(item.query)+JSON.stringify(item.params
)"
:name=
"
name(item
)"
:tab=
"item"
/>
class=
"gva-tab"
>
<span
slot=
"label"
:style=
"
{color: activeColor}">
<i
class=
"dot"
:style=
"
{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" />
{{
item
.
meta
.
title
}}
</span>
</el-tab-pane>
</el-tabs>
<!--自定义右键菜单html代码-->
...
...
@@ -49,7 +52,7 @@ export default {
}
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
]),
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
,
'
activeColor
'
]),
defaultRouter
()
{
return
this
.
userInfo
.
authority
.
defaultRouter
}
...
...
@@ -108,7 +111,9 @@ export default {
this
.
$bus
.
off
(
'
mobile
'
)
},
methods
:
{
name
(
item
)
{
return
item
.
name
+
JSON
.
stringify
(
item
.
query
)
+
JSON
.
stringify
(
item
.
params
)
},
openContextMenu
(
e
)
{
if
(
this
.
historys
.
length
===
1
&&
this
.
$route
.
name
===
this
.
defaultRouter
)
{
return
false
...
...
@@ -277,6 +282,19 @@ export default {
color
:
#333
;
box-shadow
:
2px
2px
3px
0
rgba
(
0
,
0
,
0
,
0
.2
);
}
.el-tabs__item
.el-icon-close
{
color
:
initial
!
important
;
}
.el-tabs__item
.dot
{
content
:
""
;
width
:
9px
;
height
:
9px
;
margin-right
:
8px
;
display
:
inline-block
;
border-radius
:
50%
;
transition
:
background-color
.2s
;
}
.contextmenu
li
{
margin
:
0
;
padding
:
7px
16px
;
...
...
web/src/view/layout/aside/index.vue
浏览文件 @
f42c6775
...
...
@@ -6,10 +6,10 @@
:collapse=
"isCollapse"
:collapse-transition=
"true"
:default-active=
"active"
:active-text-color=
"$store.getters['user/getSideMode'] === 'dark' ? '#1890ff' : '#1890ff'"
:background-color=
"$store.getters['user/getSideMode'] === 'dark' ? '#191a23 ' : '#fff'"
:background-color=
"backgroundColor"
:active-text-color=
"activeColor"
:text-color=
"textColor"
class=
"el-menu-vertical"
text-color=
"#999"
unique-opened
@
select=
"selectMenuItem"
>
...
...
@@ -37,7 +37,26 @@ export default {
}
},
computed
:
{
...
mapGetters
(
'
router
'
,
[
'
asyncRouters
'
])
...
mapGetters
(
'
router
'
,
[
'
asyncRouters
'
]),
...
mapGetters
(
'
user
'
,
[
'
baseColor
'
,
'
activeColor
'
,
'
sideMode
'
]),
backgroundColor
()
{
if
(
this
.
sideMode
===
'
dark
'
)
{
return
'
#191a23
'
}
else
if
(
this
.
sideMode
===
'
light
'
)
{
return
'
#fff
'
}
else
{
return
this
.
sideMode
}
},
textColor
()
{
if
(
this
.
$store
.
getters
[
'
user/sideMode
'
]
===
'
dark
'
)
{
return
'
#fff
'
}
else
if
(
this
.
$store
.
getters
[
'
user/sideMode
'
]
===
'
light
'
)
{
return
'
#191a23
'
}
else
{
return
this
.
baseColor
}
}
},
watch
:
{
$route
()
{
...
...
@@ -83,6 +102,11 @@ export default {
</
script
>
<
style
lang=
"scss"
>
.el-submenu__title
,
.el-menu-item
{
i
{
color
:
inherit
!
important
;
}
}
.el-scrollbar
{
.el-scrollbar__view
{
height
:
100%
;
...
...
web/src/view/layout/index.vue
浏览文件 @
f42c6775
...
...
@@ -3,9 +3,9 @@
<el-container
:class=
"[isSider?'openside':'hideside',isMobile ? 'mobile': '']"
>
<el-row
:class=
"[isShadowBg?'shadowBg':'']"
@
click.native=
"changeShadow()"
/>
<el-aside
class=
"main-cont main-left"
>
<div
class=
"tilte"
:
class=
"$store.getters['user/getSideMode']
"
>
<div
class=
"tilte"
:
style=
"
{background: backgroundColor}
">
<img
alt
class=
"logoimg"
:src=
"$GIN_VUE_ADMIN.appLogo"
>
<h2
v-if=
"isSider"
class=
"tit-text"
:
class=
"$store.getters['user/getSideMode']
"
>
{{
$GIN_VUE_ADMIN
.
appName
}}
</h2>
<h2
v-if=
"isSider"
class=
"tit-text"
:
style=
"
{color:textColor}
">
{{
$GIN_VUE_ADMIN
.
appName
}}
</h2>
</div>
<Aside
class=
"aside"
/>
</el-aside>
...
...
@@ -114,7 +114,25 @@ export default {
}
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
]),
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
,
'
sideMode
'
,
'
baseColor
'
]),
textColor
()
{
if
(
this
.
$store
.
getters
[
'
user/sideMode
'
]
===
'
dark
'
)
{
return
'
#fff
'
}
else
if
(
this
.
$store
.
getters
[
'
user/sideMode
'
]
===
'
light
'
)
{
return
'
#191a23
'
}
else
{
return
this
.
baseColor
}
},
backgroundColor
()
{
if
(
this
.
sideMode
===
'
dark
'
)
{
return
'
#191a23
'
}
else
if
(
this
.
sideMode
===
'
light
'
)
{
return
'
#fff
'
}
else
{
return
this
.
sideMode
}
},
title
()
{
return
this
.
$route
.
meta
.
title
||
'
当前页面
'
},
...
...
@@ -196,152 +214,6 @@ export default {
<
style
lang=
"scss"
>
@import
'@/style/mobile.scss'
;
// $headerHigh: 52px;
// $mainHight: 100vh;
// .dropdown-group {
// min-width: 100px;
// }
// .topfix {
// position: fixed;
// top: 0;
// box-sizing: border-box;
// z-index: 999;
// }
// .admin-box {
// min-height: calc(100vh - 240px);
// background-color: rgb(255, 255, 255);
// margin-top: 100px;
// }
// .el-scrollbar__wrap {
// padding-bottom: 17px;
// }
// .layout-cont {
// .right-box {
// text-align: center;
// vertical-align: middle;
// img {
// vertical-align: middle;
// border: 1px solid #ccc;
// border-radius: 6px;
// }
// }
// .header-cont {
// height: $headerHigh !important;
// background: #fff;
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// line-height: $headerHigh;
// }
// .main-cont {
// .breadcrumb {
// line-height: 48px;
// display: inline-block;
// padding: 0 24px;
// // padding: 6px;
// // border-bottom: 1px solid #eee;
// }
// &.el-main {
// overflow: auto;
// background: #fff;
// // padding: 0px 10px;
// // background: #fff;
// }
// height: $mainHight !important;
// overflow: visible;
// position: relative;
// .menu-total {
// // z-index: 5;
// // position: absolute;
// // top: 10px;
// // right: -35px;
// margin-left: -10px;
// float: left;
// margin-top: 10px;
// width: 30px;
// height: 30px;
// line-height: 30px;
// font-size: 30px;
// // border: 0 solid #ffffff;
// // border-radius: 50%;
// // background: #fff;
// }
// .aside {
// overflow: auto;
// // background: #fff;
// &::-webkit-scrollbar {
// display: none;
// }
// }
// .el-menu-vertical {
// height: calc(100vh - 64px) !important;
// visibility: auto;
// &:not(.el-menu--collapse) {
// width: 220px;
// }
// }
// .el-menu--collapse {
// width: 54px;
// li {
// .el-tooltip,
// .el-submenu__title {
// padding: 0px 15px !important;
// }
// }
// }
// &::-webkit-scrollbar {
// display: none;
// }
// &.main-left {
// width: auto !important;
// }
// &.main-right {
// .admin-title {
// float: left;
// font-size: 16px;
// vertical-align: middle;
// margin-left: 20px;
// img {
// vertical-align: middle;
// }
// &.collapse {
// width: 53px;
// }
// }
// }
// }
// }
// .tilte {
// background: #001529;
// min-height: 64px;
// line-height: 64px;
// background: #002140;
// text-align: center;
// .logoimg {
// width: 30px;
// height: 30px;
// vertical-align: middle;
// background: #fff;
// border-radius: 50%;
// padding: 3px;
// }
// .tit-text {
// display: inline-block;
// color: #fff;
// font-weight: 600;
// font-size: 20px;
// vertical-align: middle;
// }
// }
// .screenfull {
// display: inline-block;
// }
// .header-avatar{
// display: flex;
// justify-content: center;
// align-items: center;
// }
.dark
{
background-color
:
#191a23
!
important
;
color
:
#fff
!
important
;
...
...
web/src/view/layout/setting/index.vue
浏览文件 @
f42c6775
<
template
>
<div>
<el-button
type=
"primary"
class=
"drawer-container"
icon=
"el-icon-setting"
@
click=
"showSettingDraw
a
r"
/>
<el-button
type=
"primary"
class=
"drawer-container"
icon=
"el-icon-setting"
@
click=
"showSettingDraw
e
r"
/>
<el-drawer
title=
"系统配置"
:visible.sync=
"drawer"
...
...
@@ -11,22 +11,32 @@
<div
class=
"setting_card"
>
<div
class=
"setting_title"
>
侧边栏主题
</div>
<div
class=
"setting_content"
>
<div
class=
"item"
@
click=
"chageMode('light')"
>
<div
class=
"theme-box"
>
<div
class=
"item"
@
click=
"changeMode('light')"
>
<i
v-if=
"sideMode === 'light'"
class=
"el-icon-check check"
/>
<img
src=
"https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"
>
</div>
<div
class=
"item"
@
click=
"cha
geMode('dark')"
>
<div
class=
"item"
@
click=
"chan
geMode('dark')"
>
<i
v-if=
"sideMode === 'dark'"
class=
"el-icon-check check"
/>
<img
src=
"https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"
>
</div>
</div>
<div
class=
"color-box"
>
<div>
<div
class=
"setting_title"
>
自定义背景色
</div>
<el-color-picker
:value=
"sideMode"
@
change=
"changeMode"
/>
</div>
<div>
<div
class=
"setting_title"
>
自定义基础色
</div>
<el-color-picker
:value=
"baseColor"
@
change=
"changeBaseColor"
/>
</div>
<div>
<div
class=
"setting_title"
>
活跃色
</div>
<el-color-picker
:value=
"activeColor"
@
change=
"activeColorChange"
/>
</div>
</div>
</div>
</div>
<!--
<div
class=
"setting_card"
>
-->
<!--
<div
class=
"setting_title"
>
主题色
</div>
-->
<!--
<div
class=
""
>
-->
<!--
<theme-change
style=
"width: 30px;height: 30px;margin-top: 20px"
@
change=
"themeChange"
/>
-->
<!--
</div>
-->
<!--
</div>
-->
</div>
</el-drawer>
...
...
@@ -34,31 +44,44 @@
</
template
>
<
script
>
import
themeChange
from
'
@/components/themeChange
'
import
{
mapGetters
}
from
'
vuex
'
export
default
{
data
()
{
return
{
drawer
:
false
,
direction
:
'
rtl
'
,
sideMode
:
'
dark
'
direction
:
'
rtl
'
}
},
comp
onents
:
{
themeChange
comp
uted
:
{
...
mapGetters
(
'
user
'
,
[
'
sideMode
'
,
'
baseColor
'
,
'
activeColor
'
])
},
methods
:
{
handleClose
()
{
this
.
drawer
=
false
},
showSettingDraw
a
r
()
{
showSettingDraw
e
r
()
{
this
.
drawer
=
true
},
chageMode
(
e
)
{
this
.
sideMode
=
e
this
.
$store
.
dispatch
(
'
user/changeSideMode
'
,
e
)
changeMode
(
e
)
{
if
(
e
===
null
)
{
this
.
$store
.
dispatch
(
'
user/changeSideMode
'
,
'
dark
'
)
return
}
this
.
$store
.
dispatch
(
'
user/changeSideMode
'
,
e
)
},
themeChange
(
val
)
{
this
.
$store
.
dispatch
(
'
user/changeTheme
'
,
val
)
changeBaseColor
(
e
)
{
if
(
e
===
null
)
{
this
.
$store
.
dispatch
(
'
user/changeBaseColor
'
,
'
#fff
'
)
return
}
this
.
$store
.
dispatch
(
'
user/changeBaseColor
'
,
e
)
},
activeColorChange
(
e
)
{
if
(
e
===
null
)
{
this
.
$store
.
dispatch
(
'
user/changeActiveColor
'
,
'
#1890ff
'
)
return
}
this
.
$store
.
dispatch
(
'
user/changeActiveColor
'
,
e
)
}
}
}
...
...
@@ -88,6 +111,16 @@ export default {
.setting_content
{
margin-top
:
20px
;
display
:
flex
;
flex-direction
:
column
;
>
.theme-box
{
display
:
flex
;
}
>
.color-box
{
div
{
display
:
flex
;
flex-direction
:
column
;
}
}
.item
{
position
:
relative
;
display
:
flex
;
...
...
web/yarn.lock
已删除
100644 → 0
浏览文件 @
7e8eddf1
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录