Merge pull request #82 from tclyjy/main
feat(layouts): 添加侧边栏/头部的反转模式来增加对比度
This commit is contained in:
Soybean
GitHub
commit
889c859865
@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white text-[#333639] dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
|
||||
class="dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
|
||||
:class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
inverted?: boolean;
|
||||
}
|
||||
withDefaults(defineProps<Props>(), {
|
||||
inverted: false
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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[]);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
:options="routeStore.menus"
|
||||
:expanded-keys="expandedKeys"
|
||||
:indent="18"
|
||||
:inverted="theme.sider.inverted"
|
||||
@update:value="handleUpdateMenu"
|
||||
@update:expanded-keys="handleUpdateExpandedKeys"
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
"fixedHeaderAndTab": true,
|
||||
"showReload": true,
|
||||
"header": {
|
||||
"inverted": false,
|
||||
"height": 56,
|
||||
"crumb": {
|
||||
"visible": true,
|
||||
@ -82,6 +83,7 @@
|
||||
"isCache": true
|
||||
},
|
||||
"sider": {
|
||||
"inverted": false,
|
||||
"width": 220,
|
||||
"collapsedWidth": 64,
|
||||
"mixWidth": 80,
|
||||
|
||||
@ -52,6 +52,7 @@ const defaultThemeSetting: Theme.Setting = {
|
||||
fixedHeaderAndTab: true,
|
||||
showReload: true,
|
||||
header: {
|
||||
inverted: false,
|
||||
height: 56,
|
||||
crumb: {
|
||||
visible: true,
|
||||
@ -69,6 +70,7 @@ const defaultThemeSetting: Theme.Setting = {
|
||||
isCache: true
|
||||
},
|
||||
sider: {
|
||||
inverted: false,
|
||||
width: 220,
|
||||
collapsedWidth: 64,
|
||||
mixWidth: 80,
|
||||
|
||||
@ -38,6 +38,14 @@ export const useThemeStore = defineStore('theme-store', {
|
||||
setLayoutMode(mode: EnumType.ThemeLayoutMode) {
|
||||
this.layout.mode = mode;
|
||||
},
|
||||
/** 设置侧边栏反转色 */
|
||||
setSiderInverted(isInverted: boolean) {
|
||||
this.sider.inverted = isInverted;
|
||||
},
|
||||
/** 设置头部反转色 */
|
||||
setHeaderInverted(isInverted: boolean) {
|
||||
this.header.inverted = isInverted;
|
||||
},
|
||||
/** 设置系统主题颜色 */
|
||||
setThemeColor(themeColor: string) {
|
||||
this.themeColor = themeColor;
|
||||
|
||||
4
src/typings/system.d.ts
vendored
4
src/typings/system.d.ts
vendored
@ -147,6 +147,8 @@ declare namespace Theme {
|
||||
|
||||
/** 头部样式 */
|
||||
interface Header {
|
||||
/** 头部反转色 */
|
||||
inverted: boolean;
|
||||
/** 头部高度 */
|
||||
height: number;
|
||||
/** 面包屑样式 */
|
||||
@ -182,6 +184,8 @@ declare namespace Theme {
|
||||
|
||||
/** 侧边栏样式 */
|
||||
interface Sider {
|
||||
/** 侧边栏反转色 */
|
||||
inverted: boolean;
|
||||
/** 侧边栏宽度 */
|
||||
width: number;
|
||||
/** 侧边栏折叠时的宽度 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user