Merge pull request #84 from tclyjy/main

refactor(layouts): layout/header 反转色样式补充
This commit is contained in:
Soybean 2022-04-29 20:59:59 +08:00 committed by GitHub
commit b81143e55e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 30 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex-center text-18px hover:text-primary cursor-pointer" @click="handleSwitch"> <div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
<icon-mdi-moon-waning-crescent v-if="darkMode" /> <icon-mdi-moon-waning-crescent v-if="darkMode" />
<icon-mdi-white-balance-sunny v-else /> <icon-mdi-white-balance-sunny v-else />
</div> </div>

View File

@ -2,14 +2,14 @@
<div v-if="showTooltip"> <div v-if="showTooltip">
<n-tooltip :placement="placement" trigger="hover"> <n-tooltip :placement="placement" trigger="hover">
<template #trigger> <template #trigger>
<div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass"> <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
{{ tooltipContent }} {{ tooltipContent }}
</n-tooltip> </n-tooltip>
</div> </div>
<div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass"> <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -25,13 +25,20 @@ interface Props {
placement?: FollowerPlacement; placement?: FollowerPlacement;
/** class类 */ /** class类 */
contentClass?: string; contentClass?: string;
/** 反转模式下 */
inverted?: boolean;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
tooltipContent: '', tooltipContent: '',
placement: 'bottom', placement: 'bottom',
contentClass: '' contentClass: '',
inverted: false
}); });
const showTooltip = computed(() => Boolean(props.tooltipContent)); const showTooltip = computed(() => Boolean(props.tooltipContent));
const computedClass = computed(() =>
[props.contentClass, props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'].join(' ')
);
</script> </script>
<style scoped></style> <style scoped></style>

View File

@ -1,5 +1,5 @@
<template> <template>
<hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle"> <hover-container class="w-40px h-full" tooltip-content="全屏" :inverted="theme.header.inverted" @click="toggle">
<icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" /> <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
<icon-gridicons-fullscreen v-else class="text-18px" /> <icon-gridicons-fullscreen v-else class="text-18px" />
</hover-container> </hover-container>
@ -7,7 +7,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'; import { useFullscreen } from '@vueuse/core';
import { useThemeStore } from '@/store';
const { isFullscreen, toggle } = useFullscreen(); const { isFullscreen, toggle } = useFullscreen();
const theme = useThemeStore();
</script> </script>
<style scoped></style> <style scoped></style>

View File

@ -2,7 +2,7 @@
<hover-container <hover-container
tooltip-content="github" tooltip-content="github"
class="w-40px h-full" class="w-40px h-full"
content-class="hover:text-primary" :inverted="theme.header.inverted"
@click="handleClickLink" @click="handleClickLink"
> >
<icon-mdi-github class="text-20px" /> <icon-mdi-github class="text-20px" />
@ -10,6 +10,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useThemeStore } from '@/store';
const theme = useThemeStore();
function handleClickLink() { function handleClickLink() {
window.open('https://github.com/honghuangdc/soybean-admin', '_blank'); window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
} }

View File

@ -17,8 +17,9 @@
:is="breadcrumb.icon" :is="breadcrumb.icon"
v-if="theme.header.crumb.showIcon" v-if="theme.header.crumb.showIcon"
class="inline-block align-text-bottom mr-4px text-16px" class="inline-block align-text-bottom mr-4px text-16px"
:class="{ 'text-#BBBBBB': theme.header.inverted }"
/> />
<span>{{ breadcrumb.label }}</span> <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
</template> </template>
</n-breadcrumb-item> </n-breadcrumb-item>
</template> </template>

View File

@ -1,13 +1,14 @@
<template> <template>
<hover-container class="w-40px h-full" content-class="hover:text-primary" @click="app.toggleSiderCollapse"> <hover-container class="w-40px h-full" :inverted="theme.header.inverted" @click="app.toggleSiderCollapse">
<icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" /> <icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" />
<icon-line-md-menu-fold-left v-else class="text-16px" /> <icon-line-md-menu-fold-left v-else class="text-16px" />
</hover-container> </hover-container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useAppStore } from '@/store'; import { useAppStore, useThemeStore } from '@/store';
const app = useAppStore(); const app = useAppStore();
const theme = useThemeStore();
</script> </script>
<style scoped></style> <style scoped></style>

View File

@ -1,5 +1,5 @@
<template> <template>
<hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式"> <hover-container class="w-40px" :inverted="theme.header.inverted" tooltip-content="主题模式">
<dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" /> <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
</hover-container> </hover-container>
</template> </template>

View File

@ -1,6 +1,6 @@
<template> <template>
<n-dropdown :options="options" @select="handleDropdown"> <n-dropdown :options="options" @select="handleDropdown">
<hover-container class="px-12px" content-class="hover:text-primary"> <hover-container class="px-12px" :inverted="theme.header.inverted">
<icon-custom-avatar class="text-32px" /> <icon-custom-avatar class="text-32px" />
<span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span> <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
</hover-container> </hover-container>
@ -8,12 +8,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useAuthStore } from '@/store'; import { useAuthStore, useThemeStore } from '@/store';
import { iconifyRender } from '@/utils'; import { iconifyRender } from '@/utils';
type DropdownKey = 'user-center' | 'logout'; type DropdownKey = 'user-center' | 'logout';
const auth = useAuthStore(); const auth = useAuthStore();
const theme = useThemeStore();
const options = [ const options = [
{ {

View File

@ -3,7 +3,7 @@
<hover-container <hover-container
class="w-40px h-full" class="w-40px h-full"
tooltip-content="搜索" tooltip-content="搜索"
content-class="hover:text-primary" :inverted="theme.header.inverted"
@click="handleSearch" @click="handleSearch"
> >
<icon-uil-search class="text-20px" /> <icon-uil-search class="text-20px" />
@ -13,10 +13,12 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useThemeStore } from '@/store';
import { useBoolean } from '@/hooks'; import { useBoolean } from '@/hooks';
import { SearchModal } from './components'; import { SearchModal } from './components';
const { bool: show, toggle } = useBoolean(); const { bool: show, toggle } = useBoolean();
const theme = useThemeStore();
function handleSearch() { function handleSearch() {
toggle(); toggle();