tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Former-commit-id: 3857806786944e41c688cb6e81a5d90276720e2a
This commit is contained in:
haoxr
2023-01-18 00:57:06 +08:00
parent f7df411480
commit e4fd0f8600
9 changed files with 106 additions and 95 deletions
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, "useArrayMap": true,
"useArrayReduce": true, "useArrayReduce": true,
"useArraySome": true, "useArraySome": true,
"useArrayUnique": true,
"useAsyncQueue": true, "useAsyncQueue": true,
"useAsyncState": true, "useAsyncState": true,
"useAttrs": true, "useAttrs": true,

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

@@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
@command="handleLanguageChange" @command="handleLanguageChange"
> >
<div <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" /> <svg-icon icon-class="language" />
</div> </div>

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

@@ -1,6 +1,6 @@
<template> <template>
<div <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 <svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"

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

@@ -18,7 +18,7 @@ function handleSizeChange(size: string) {
<template> <template>
<el-dropdown trigger="click" @command="handleSizeChange"> <el-dropdown trigger="click" @command="handleSizeChange">
<div <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" /> <svg-icon icon-class="size" />
</div> </div>

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

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

26
src/styles/index.scss
View File

@@ -2,4 +2,28 @@
@import './sidebar.scss'; @import './sidebar.scss';
@import './tailwind.scss'; @import './tailwind.scss';
@import './global.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变量 // 全局SCSS变量
$menuText: #bfcbd9; $menuBg: var(--menuBg);
$menuActiveText: #409eff; $menuText: var(--menuText);
$menuBg: #304156; $menuActiveText: var(--menuActiveText);
$menuHover: #263445; $menuHover: var(--menuHover);
$subMenuBg: #1f2d3d; $subMenuBg:var(--subMenuBg);
$subMenuActiveText: #f4f4f5; $subMenuActiveText:var(--subMenuActiveText);
$subMenuHover: #001528; $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 useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome'] const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs'] const useAttrs: typeof import('vue')['useAttrs']
@@ -374,7 +373,6 @@ declare module 'vue' {
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']> readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']> readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']> 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 useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']> readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']> readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>