bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: improve the dark theme

Browse Source
This commit is contained in:
vince
2024-07-15 23:59:22 +08:00
parent f95d9aa609
commit cf16c7bdde
12 changed files with 124 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@@ -107,13 +107,11 @@ const asideRef = shallowRef<HTMLDivElement | null>();
const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
const isDark = computed(() => props.theme === 'dark');
const style = computed((): CSSProperties => {
const { isSidebarMixed, paddingTop, zIndex } = props;
return {
'--scroll-shadow': isDark.value ? 'var(--menu-dark)' : 'var(--menu)',
'--scroll-shadow': 'var(--sidebar)',
...calcMenuWidthStyle(false),
paddingTop: `${paddingTop}px`,
zIndex,
@@ -124,12 +122,7 @@ const style = computed((): CSSProperties => {
const extraStyle = computed((): CSSProperties => {
const { extraWidth, show, width, zIndex } = props;
const backgroundColor = isDark.value
? 'hsl(var(--menu-dark))'
: 'hsl(var(--menu))';
return {
backgroundColor,
left: `${width}px`,
width: extraVisible.value && show ? `${extraWidth}px` : 0,
zIndex,
@@ -175,7 +168,6 @@ const headerStyle = computed((): CSSProperties => {
const extraContentStyle = computed((): CSSProperties => {
const { collapseHeight, headerHeight } = props;
return {
color: 'red',
height: `calc(100% - ${headerHeight + collapseHeight}px)`,
};
});
@@ -203,21 +195,8 @@ function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
widthValue = `${collapseWidth}px`;
}
let backgroundColor = '';
if (isDark.value) {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-dark-deep))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixed
? 'hsl(var(--menu-deep))'
: 'hsl(var(--menu))';
}
return {
...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
backgroundColor,
flex: `0 0 ${widthValue}`,
marginLeft: show ? 0 : `-${widthValue}`,
maxWidth: widthValue,
@@ -252,20 +231,26 @@ function handleMouseleave() {
<template>
<div
v-if="domVisible"
:class="theme"
:style="hiddenSideStyle"
class="h-full transition-all duration-200"
></div>
<aside
:data-theme="theme"
:class="[
theme,
{
'bg-sidebar-deep': isSidebarMixed,
'bg-sidebar': !isSidebarMixed,
},
]"
:style="style"
class="data-[theme=dark]:border-border-dark border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>
<SidebarFixedButton
v-if="!collapse && !isSidebarMixed"
v-model:expand-on-hover="expandOnHover"
:theme="theme"
/>
<div v-if="slots.logo" :style="headerStyle">
<slot name="logo"></slot>
@@ -278,33 +263,28 @@ function handleMouseleave() {
<SidebarCollapseButton
v-if="showCollapseButton && !isSidebarMixed"
v-model:collapsed="collapse"
:theme="theme"
/>
<div
v-if="isSidebarMixed"
ref="asideRef"
:data-theme="theme"
:style="extraStyle"
class="data-[theme=dark]:border-border-dark border-border fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"
v-model:collapsed="extraCollapse"
:theme="theme"
/>
<SidebarFixedButton
v-if="!extraCollapse"
v-model:expand-on-hover="expandOnHover"
:theme="theme"
/>
<div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
<slot name="extra-title"></slot>
</div>
<VbenScrollbar
:data-theme="theme"
:style="extraContentStyle"
class="data-[theme=dark]:border-border-dark border-border border-t py-2"
class="border-border border-t py-2"
shadow
>
<slot name="extra"></slot>

9
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -1,12 +1,6 @@
<script setup lang="ts">
import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
interface Props {
theme: string;
}
defineProps<Props>();
const collapsed = defineModel<boolean>('collapsed');
function handleCollapsed() {
@@ -16,8 +10,7 @@ function handleCollapsed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" />

9
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@@ -1,12 +1,6 @@
<script setup lang="ts">
import { MdiPin, MdiPinOff } from '@vben-core/icons';
interface Props {
theme: string;
}
defineProps<Props>();
const expandOnHover = defineModel<boolean>('expandOnHover');
function toggleFixed() {
@@ -16,8 +10,7 @@ function toggleFixed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent data-[theme=dark]:hover:bg-accent-dark-hover data-[theme=dark]:bg-accent-dark data-[theme=dark]:text-foreground-dark/60 data-[theme=dark]:hover:text-foreground-dark absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
@click="toggleFixed"
>
<MdiPinOff v-if="!expandOnHover" />

11
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -322,6 +322,7 @@ function removeMenuItem(item: MenuItemRegistered) {
<ul
ref="menu"
:class="[
theme,
b(),
is(mode, true),
is(theme, true),
@@ -427,7 +428,7 @@ $namespace: vben;
--menu-item-padding-x: 12px;
--menu-item-popup-padding-y: 20px;
--menu-item-popup-padding-x: 12px;
--menu-item-margin-y: 4px;
--menu-item-margin-y: 3px;
--menu-item-margin-x: 0px;
--menu-item-collapse-padding-y: 25px;
--menu-item-collapse-padding-x: 0px;
@@ -443,14 +444,14 @@ $namespace: vben;
--menu-background-color: hsl(var(--menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground-dark) / 80%);
--menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--foreground-dark));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-color: hsl(var(--foreground-dark));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--foreground-dark));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}

3
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -38,6 +38,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
<template>
<ul
:class="[
theme,
b(),
is('collapse', collapse),
is(theme, true),
@@ -77,7 +78,7 @@ $namespace: vben;
&.is-dark {
.#{$namespace}-normal-menu__item {
color: hsl(var(--foreground-dark) / 80%);
color: hsl(var(--foreground) / 80%);
&:not(.is-active):hover {
color: hsl(var(--primary-foreground));

4
packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
View File

@@ -51,7 +51,7 @@ const logoClass = computed(() => {
</script>
<template>
<div :class="logoClass" class="group flex h-full items-center text-lg">
<div :class="logoClass" class="flex h-full items-center text-lg">
<a
:class="$attrs.class"
:href="href"
@@ -66,7 +66,7 @@ const logoClass = computed(() => {
/>
<span
v-if="!collapse"
class="text-primary group-[.dark]:text-foreground-dark truncate text-nowrap"
class="text-primary dark:text-foreground truncate text-nowrap"
>
{{ text }}
</span>