Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
141fd1da
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
141fd1da
编写于
1月 21, 2023
作者:
H
haoxr
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 新增主题颜色设置
Former-commit-id:
a9f1be70
上级
d12cb8c6
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
41 addition
and
15 deletion
+41
-15
src/layout/components/Settings/index.vue
src/layout/components/Settings/index.vue
+41
-15
未找到文件。
src/layout/components/Settings/index.vue
浏览文件 @
141fd1da
...
...
@@ -19,6 +19,21 @@ function changeLayout(layout: string) {
window
.
document
.
body
.
setAttribute
(
'
layout
'
,
settingsStore
.
layout
);
}
// 主题颜色
const
themeColors
=
ref
<
string
[]
>
([
'
#409EFF
'
,
'
#304156
'
,
'
#11a983
'
,
'
#13c2c2
'
,
'
#6959CD
'
,
'
#f5222d
'
]);
function
changeThemeColor
(
color
:
string
)
{
document
.
documentElement
.
style
.
setProperty
(
'
--el-color-primary
'
,
color
);
settingsStore
.
changeSetting
({
key
:
'
layout
'
,
value
:
color
});
}
onMounted
(()
=>
{
window
.
document
.
body
.
setAttribute
(
'
layout
'
,
settingsStore
.
layout
);
});
...
...
@@ -27,7 +42,21 @@ onMounted(() => {
<
template
>
<div
class=
"settings-container"
>
<h3
class=
"text-base font-bold"
>
项目配置
</h3>
<el-divider
/>
<el-divider>
主题
</el-divider>
<div
class=
"flex justify-center"
@
click.stop
>
<el-switch
v-model=
"isDark"
@
change=
"toggleDark"
inline-prompt
:active-icon=
"Moon"
:inactive-icon=
"Sunny"
active-color=
"var(--el-fill-color-dark)"
inactive-color=
"var(--el-color-primary)"
/>
</div>
<el-divider>
界面设置
</el-divider>
<div
class=
"py-[8px] flex justify-between"
>
<span
class=
"text-xs"
>
开启 Tags-View
</span>
<el-switch
v-model=
"settingsStore.tagsView"
/>
...
...
@@ -43,21 +72,19 @@ onMounted(() => {
<el-switch
v-model=
"settingsStore.sidebarLogo"
/>
</div>
<el-divider>
主题
</el-divider>
<el-divider>
主题
颜色
</el-divider>
<div
class=
"flex justify-center"
@
click.stop
>
<el-switch
v-model=
"isDark"
@
change=
"toggleDark"
inline-prompt
:active-icon=
"Moon"
:inactive-icon=
"Sunny"
active-color=
"var(--el-fill-color-dark)"
inactive-color=
"var(--el-color-primary)"
/>
</div>
<ul
class=
"w-full space-x-2 flex justify-center py-2"
>
<li
class=
"inline-block w-[30px] h-[30px] cursor-pointer"
v-for=
"(color, index) in themeColors"
:key=
"index"
:style=
"
{ background: color }"
@click="changeThemeColor(color)"
>
</li>
</ul>
<el-divider>
导航
栏布局
</el-divider>
<el-divider>
导航
设置
</el-divider>
<ul
class=
"layout"
>
<el-tooltip
content=
"左侧模式"
placement=
"bottom"
>
...
...
@@ -109,7 +136,6 @@ onMounted(() => {
justify-content
:
space-around
;
width
:
100%
;
height
:
50px
;
padding
:
0
;
&
-item
{
width
:
18%
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录