jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(layouts): 添加侧边栏/头部的反转模式来增加对比度

Browse Source
This commit is contained in:
元家怿
2022-04-27 16:39:20 +08:00
committed by Soybean
parent a782461453
commit 861c8b9852
15 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/common/GlobalHeader/components/FullScreen.vue
View File

@ -1,5 +1,5 @@
<template>
<hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
<hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
<icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
<icon-gridicons-fullscreen v-else class="text-18px" />
</hover-container>

4
src/layouts/common/GlobalHeader/components/GithubSite.vue
View File

@ -1,7 +1,7 @@
<template>
<hover-container tooltip-content="github" class="w-40px h-full">
<hover-container tooltip-content="github" class="w-40px h-full" content-class="hover:text-primary">
<a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
<icon-mdi-github class="text-20px text-[#666]" />
<icon-mdi-github class="text-20px" />
</a>
</hover-container>
</template>

11
src/layouts/common/GlobalHeader/components/HeaderMenu.vue
View File

@ -1,16 +1,23 @@
<template>
<n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
<n-menu
:value="activeKey"
mode="horizontal"
:options="menus"
:inverted="theme.header.inverted"
@update:value="handleUpdateMenu"
/>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import type { MenuOption } from 'naive-ui';
import { useRouteStore } from '@/store';
import { useRouteStore, useThemeStore } from '@/store';
import { useRouterPush } from '@/composables';
const route = useRoute();
const routeStore = useRouteStore();
const theme = useThemeStore();
const { routerPush } = useRouterPush();
const menus = computed(() => routeStore.menus as GlobalMenuOption[]);

2
src/layouts/common/GlobalHeader/components/UserAvatar.vue
View File

@ -1,6 +1,6 @@
<template>
<n-dropdown :options="options" @select="handleDropdown">
<hover-container class="px-12px">
<hover-container class="px-12px" content-class="hover:text-primary">
<icon-custom-avatar class="text-32px" />
<span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
</hover-container>

2
src/layouts/common/GlobalHeader/index.vue
View File

@ -1,5 +1,5 @@
<template>
<dark-mode-container class="global-header flex-y-center h-full">
<dark-mode-container class="global-header flex-y-center h-full" :inverted="theme.header.inverted">
<global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
<div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
<menu-collapse v-if="showMenuCollapse" />

9
src/layouts/common/GlobalSearch/index.vue
View File

@ -1,7 +1,12 @@
<template>
<div>
<hover-container tooltip-content="搜索" class="w-40px h-full" @click="handleSearch">
<icon-uil-search class="text-20px text-[#666]" />
<hover-container
class="w-40px h-full"
tooltip-content="搜索"
content-class="hover:text-primary"
@click="handleSearch"
>
<icon-uil-search class="text-20px" />
</hover-container>
<search-modal v-model:value="show" />
</div>

2
src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
View File

@ -1,5 +1,5 @@
<template>
<dark-mode-container class="flex h-full" @mouseleave="resetFirstDegreeMenus">
<dark-mode-container class="flex h-full" :inverted="theme.sider.inverted" @mouseleave="resetFirstDegreeMenus">
<div class="flex-1 flex-col-stretch h-full">
<global-logo :show-title="false" :style="{ height: theme.header.height + 'px' }" />
<n-scrollbar class="flex-1-hidden">

1
src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
View File

@ -8,6 +8,7 @@
:options="routeStore.menus"
:expanded-keys="expandedKeys"
:indent="18"
:inverted="theme.sider.inverted"
@update:value="handleUpdateMenu"
@update:expanded-keys="handleUpdateExpandedKeys"
/>

2
src/layouts/common/GlobalSider/components/VerticalSider/index.vue
View File

@ -1,5 +1,5 @@
<template>
<dark-mode-container class="flex-col-stretch h-full">
<dark-mode-container class="flex-col-stretch h-full" :inverted="theme.sider.inverted">
<global-logo v-if="!isHorizontalMix" :show-title="showTitle" :style="{ height: theme.header.height + 'px' }" />
<vertical-menu />
</dark-mode-container>

6
src/layouts/common/SettingDrawer/components/PageFunc/index.vue
View File

@ -1,6 +1,12 @@
<template>
<n-divider title-placement="center">界面功能</n-divider>
<n-space vertical size="large">
<setting-menu label="侧边栏反转色">
<n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
</setting-menu>
<setting-menu label="头部反转色">
<n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
</setting-menu>
<setting-menu label="固定头部和多页签">
<n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
</setting-menu>