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

refactor: 暗黑模式自定义样式统一

Browse Source 
Former-commit-id: 83dc3250edd859af22c13cf12835327c71709f55
This commit is contained in:
haoxr
2023-01-18 14:07:21 +08:00
parent e4fd0f8600
commit 498298ef66
12 changed files with 43 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Breadcrumb/index.vue
View File

@@ -1,15 +1,12 @@
<template>
<el-breadcrumb
separator-class="el-icon-arrow-right"
class="h-[50px] flex items-center"
>
<el-breadcrumb class="h-[50px] flex items-center">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<span
v-if="
item.redirect === 'noredirect' || index === breadcrumbs.length - 1
"
class="text-[#97a8be]"
class="text-[var(--el-disabled-text-color)]"
>{{ translateRouteTitleI18n(item.meta.title) }}</span
>
<a v-else @click.prevent="handleLink(item)">
@@ -96,10 +93,11 @@ onBeforeMount(() => {
font-size: 14px;
line-height: 50px;
margin-left: 8px;
}
.no-redirect {
color: #97a8be;
cursor: text;
}
// 覆盖 element-plus 的样式
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
</style>

6
src/components/Hamburger/index.vue
View File

@@ -4,11 +4,11 @@
class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg
:class="{ 'is-active': isActive } "
:class="{ 'is-active': isActive }"
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
style="color:#FFF!important"
style="color: #fff !important"
>
<path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -37,7 +37,7 @@ function toggleClick() {
.hamburger {
width: 20px;
height: 20px;
vertical-align:-4px;
vertical-align: -4px;
&.is-active {
transform: rotate(180deg);
}

17
src/components/RightPanel/index.vue
View File

@@ -104,6 +104,7 @@ onBeforeUnmount(() => {
}
.right-panel {
background-color: var(--el-bg-color);
width: 100%;
max-width: 300px;
height: 100vh;
@@ -113,7 +114,6 @@ onBeforeUnmount(() => {
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
background: #fff;
z-index: 199;
.icon {
@@ -125,7 +125,6 @@ onBeforeUnmount(() => {
.show {
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
.right-panel-background {
z-index: 99;
opacity: 1;
@@ -139,22 +138,18 @@ onBeforeUnmount(() => {
}
.right-panel__button {
background-color: var(--el-color-primary);
color: var(--el-color-white);
width: 48px;
height: 48px;
position: absolute;
left: -48px;
line-height: 48px;
position: absolute;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
border-radius: 6px 0 0 6px;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;
}
}
</style>

1
src/layout/components/AppMain.vue
View File

@@ -23,6 +23,7 @@ const tagsViewStore = useTagsViewStore();
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--el-bg-color-page);
}
.fixed-header + .app-main {

47
src/layout/components/Settings/index.vue
View File

@@ -9,7 +9,7 @@ import { useDark, useToggle } from '@vueuse/core';
*/
const settingsStore = useSettingsStore();
const isDark = useDark();
const toggleDark = useToggle(isDark);
const toggleDark = () => useToggle(isDark);
/**
* 切换布局
@@ -28,30 +28,32 @@ onMounted(() => {
<div class="settings-container">
<h3 class="text-base font-bold">项目配置</h3>
<el-divider />
<div class="drawer-item">
<span>开启 Tags-View</span>
<el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
<div class="py-[8px] flex justify-between">
<span class="text-xs">开启 Tags-View</span>
<el-switch v-model="settingsStore.tagsView" />
</div>
<div class="drawer-item">
<span>固定 Header</span>
<el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
<div class="py-[8px] flex justify-between">
<span class="text-xs">固定 Header</span>
<el-switch v-model="settingsStore.fixedHeader" />
</div>
<div class="drawer-item">
<span>侧边栏 Logo</span>
<el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
<div class="py-[8px] flex justify-between">
<span class="text-xs">侧边栏 Logo</span>
<el-switch v-model="settingsStore.sidebarLogo" />
</div>
<el-divider>主题</el-divider>
<div class="flex justify-center" @click.stop>
<el-switch
<el-switch
v-model="isDark"
@change="toggleDark"
inline-prompt
:active-icon="Sunny"
:inactive-icon="Moon"
:active-icon="Moon"
:inactive-icon="Sunny"
active-color="var(--el-fill-color-dark)"
inactive-color="var(--el-color-primary)"
/>
</div>
@@ -101,25 +103,6 @@ onMounted(() => {
<style lang="scss" scoped>
.settings-container {
padding: 16px;
font-size: 14px;
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
line-height: 22px;
}
.drawer-item {
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
padding: 12px 0;
}
.drawer-switch {
float: right;
}
.layout {
display: flex;
flex-wrap: wrap;

2
src/layout/components/Sidebar/Logo.vue
View File

@@ -17,7 +17,7 @@ const logo = ref<string>(
</script>
<template>
<transition class="bg-gray-800">
<transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
<router-link
v-if="collapse"
key="collapse"

20
src/layout/components/Sidebar/index.vue
View File

@@ -8,7 +8,7 @@ import { useSettingsStore } from '@/store/modules/settings';
import { usePermissionStore } from '@/store/modules/permission';
import { useAppStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import variables from '@/styles/ts-variables.module.scss'
import variables from '@/styles/ts-variables.module.scss';
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
@@ -16,25 +16,15 @@ const appStore = useAppStore();
const { sidebarLogo } = storeToRefs(settingsStore);
const route = useRoute();
const isCollapse = computed(() => !appStore.sidebar.opened);
const activeMenu = computed<string>(() => {
const { meta, path } = route;
if (meta?.activeMenu) {
return meta.activeMenu;
}
return path;
});
</script>
<template>
<div :class="{ 'has-logo': sidebarLogo }">
<logo v-if="sidebarLogo" :collapse="isCollapse" />
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
<el-scrollbar>
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:default-active="route.path"
:collapse="!appStore.sidebar.opened"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:active-text-color="variables.menuActiveText"
@@ -47,7 +37,7 @@ const activeMenu = computed<string>(() => {
:item="route"
:key="route.path"
:base-path="route.path"
:is-collapse="isCollapse"
:is-collapse="!appStore.sidebar.opened"
/>
</el-menu>
</el-scrollbar>

16
src/styles/element.scss
View File

@@ -1,16 +0,0 @@
:root {
// 这里可以设置你自定义的颜色变量
// 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
--el-color-primary-dark: #0d84ff;
}
// 覆盖 element-plus 的样式
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
// 选中行背景色值
.el-table__body tr.current-row td {
background-color: #e1f3d8b5 !important;
}

3
src/styles/global.scss
View File

@@ -20,4 +20,5 @@ svg {
border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-border-color-light);
box-shadow: var(--el-box-shadow-light);
}
background-color: var(--el-bg-color-overlay);
}

1
src/styles/index.scss
View File

@@ -1,4 +1,3 @@
@import './element.scss';
@import './sidebar.scss';
@import './tailwind.scss';
@import './global.scss';

2
src/styles/sidebar.scss
View File

@@ -222,4 +222,4 @@
border-radius: 20px;
}
}
}
}

6
src/views/dashboard/index.vue
View File

@@ -116,7 +116,6 @@ import Team from './components/Team/index.vue';
<style lang="scss" scoped>
.dashboard-container {
padding: 24px;
background-color:var(--el-bg-color-page);
position: relative;
.github-corner {
@@ -156,7 +155,6 @@ import Team from './components/Team/index.vue';
}
}
.card-panel {
height: 108px;
cursor: pointer;
@@ -165,8 +163,8 @@ import Team from './components/Team/index.vue';
overflow: hidden;
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
box-shadow:var(--el-box-shadow-dark);
border-color:var(--el-border-color);
box-shadow: var(--el-box-shadow-dark);
border-color: var(--el-border-color);
.icon-message {
color: #36a3f7;