lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 暗黑模式自定义样式调整

This commit is contained in:
haoxr 2023-01-18 00:57:06 +08:00
parent 7af83db7f0
commit 3857806786
9 changed files with 106 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc-auto-import.json
View File

@ -107,7 +107,6 @@
"useArrayMap": true,
"useArrayReduce": true,
"useArraySome": true,
"useArrayUnique": true,
"useAsyncQueue": true,
"useAsyncState": true,
"useAttrs": true,

2
src/components/LangSelect/index.vue
View File

@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
@command="handleLanguageChange"
>
<div
class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
class="cursor-pointer text-[#5a5e66] h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon icon-class="language" />
</div>

2
src/components/Screenfull/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"

2
src/components/SizeSelect/index.vue
View File

@ -18,7 +18,7 @@ function handleSizeChange(size: string) {
<template>
<el-dropdown trigger="click" @command="handleSizeChange">
<div
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg-icon icon-class="size" />
</div>

136
src/layout/components/TagsView/index.vue
View File

@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
function openTagMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105;
console.log("test",proxy?.$el)
console.log('test', proxy?.$el);
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width
@ -242,62 +242,59 @@ onMounted(() => {
</script>
<template>
<div class="tags-container">
<scroll-pane
ref="scrollPaneRef"
@scroll="handleScroll"
>
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"
v-for="tag in visitedViews"
:key="tag.path"
:data-path="tag.path"
:to="{ path: tag.path, query: tag.query }"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openTagMenu(tag, $event)"
>
{{ translateRouteTitleI18n(tag.meta?.title) }}
<span
v-if="!isAffix(tag)"
class="tags-item-close"
@click.prevent.stop="closeSelectedTag(tag)"
<div class="tags-container">
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
<router-link
:class="'tags-item ' + (isActive(tag) ? 'active' : '')"
v-for="tag in visitedViews"
:key="tag.path"
:data-path="tag.path"
:to="{ path: tag.path, query: tag.query }"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openTagMenu(tag, $event)"
>
<i-ep-close class="text-[10px]" />
</span>
</router-link>
</scroll-pane>
{{ translateRouteTitleI18n(tag.meta?.title) }}
<span
v-if="!isAffix(tag)"
class="tags-item-close"
@click.prevent.stop="closeSelectedTag(tag)"
>
<i-ep-close class="text-[10px]" />
</span>
</router-link>
</scroll-pane>
<!-- tag标签操作菜单 -->
<ul
v-show="tagMenuVisible"
class="tag-menu"
:style="{ left: left + 'px', top: top + 'px' }"
>
<li @click="refreshSelectedTag(selectedTag)">
<svg-icon icon-class="refresh" />
刷新
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<svg-icon icon-class="close" />
关闭
</li>
<li @click="closeOtherTags">
<svg-icon icon-class="close_other" />
关闭其它
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<svg-icon icon-class="close_left" />
关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<svg-icon icon-class="close_right" />
关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
<svg-icon icon-class="close_all" />
关闭所有
</li>
</ul>
<!-- tag标签操作菜单 -->
<ul
v-show="tagMenuVisible"
class="tag-menu"
:style="{ left: left + 'px', top: top + 'px' }"
>
<li @click="refreshSelectedTag(selectedTag)">
<svg-icon icon-class="refresh" />
刷新
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<svg-icon icon-class="close" />
关闭
</li>
<li @click="closeOtherTags">
<svg-icon icon-class="close_other" />
关闭其它
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<svg-icon icon-class="close_left" />
关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<svg-icon icon-class="close_right" />
关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
<svg-icon icon-class="close_all" />
关闭所有
</li>
</ul>
</div>
</template>
@ -331,7 +328,7 @@ onMounted(() => {
background-color: var(--el-color-primary);
color: #fff;
border-color: var(--el-color-primary);
&::before {
&::before {
content: '';
background: #fff;
display: inline-block;
@ -340,37 +337,36 @@ onMounted(() => {
border-radius: 50%;
margin-right: 5px;
}
.tags-item-close{
&:hover{
background:rgb(0 0 0 / 0.16)
}
.tags-item-close {
&:hover {
background: rgb(0 0 0 / 0.16);
}
}
&-close{
border-radius:100%;
&:hover{
color:#FFF;
background:rgb(0 0 0 / 0.16)
}
}
&-close {
border-radius: 100%;
&:hover {
color: #fff;
background: rgb(0 0 0 / 0.16);
}
}
}
}
.tag-menu {
background: #fff;
background: var(--el-bg-color-overlay);
z-index: 99;
position: absolute;
border-radius: 4px;
font-size: 12px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: var(--el-box-shadow-light);
li {
padding: 8px 16px;
cursor: pointer;
&:hover {
background: #eee;
background: var(--el-fill-color-light);
}
}
}

14
src/styles/dark.scss
View File

@ -1,12 +1,3 @@
// only scss variables
$--colors: (
"primary": ("base": red),
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
html.dark {
.navbar {
background-color: var(--el-bg-color);
@ -16,4 +7,7 @@ html.dark {
.hamburger {
fill: var(--el-text-color-regular);
}
}
}

26
src/styles/index.scss
View File

@ -2,4 +2,28 @@
@import './sidebar.scss';
@import './tailwind.scss';
@import './global.scss';
@import './dark.scss';
@import './dark.scss';
// 自定义全局CSS变量
:root{
--menuBg:#304156;
--menuText:#bfcbd9;
--menuActiveText:#409eff;
--menuHover:#263445;
--subMenuBg: #1f2d3d;
--subMenuActiveText: #f4f4f5;
--subMenuHover: #001528;
}
html.dark{
--menuBg:var(--el-menu-bg-color);
--menuText:var(----el-menu-text-color);
--menuActiveText:var(--el-menu-active-color);
--menuHover:var(--el-menu-hover-bg-color);
--subMenuBg: var(--el-menu-bg-color);
--subMenuActiveText:var(--el-menu-active-color);
--subMenuHover: var(--el-menu-hover-bg-color);
}

16
src/styles/variables.module.scss
View File

@ -1,11 +1,11 @@
// 全局SCSS变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;
$menuBg: var(--menuBg);
$menuText: var(--menuText);
$menuActiveText: var(--menuActiveText);
$menuHover: var(--menuHover);
$subMenuBg: #1f2d3d;
$subMenuActiveText: #f4f4f5;
$subMenuHover: #001528;
$subMenuBg:var(--subMenuBg);
$subMenuActiveText:var(--subMenuActiveText);
$subMenuHover:var(--subMenuHover);
$sideBarWidth: 210px;
$sideBarWidth: 210px;

2
src/types/auto-imports.d.ts vendored
View File

@ -108,7 +108,6 @@ declare global {
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs']
@ -374,7 +373,6 @@ declare module 'vue' {
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>