Merge pull request #84 from tclyjy/main
refactor(layouts): layout/header 反转色样式补充
This commit is contained in:
commit
b81143e55e
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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');
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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 = [
|
||||||
{
|
{
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user