feat(projects): 添加svg logo自适应主题颜色

This commit is contained in:
Soybean
2021-10-15 02:25:52 +08:00
parent 3d1f41925d
commit e1e5579e8f
7 changed files with 100 additions and 12 deletions

View File

@ -1,18 +1,18 @@
<template>
<n-dropdown :options="options" @select="handleDropdown">
<hover-container class="px-12px" :show-tooltip="false">
<n-avatar :src="avatar" size="small" :round="true" />
<img :src="avatar" class="w-32px h-32px" />
<span class="pl-8px text-16px font-medium">Soybean</span>
</hover-container>
</n-dropdown>
</template>
<script lang="ts" setup>
import { NDropdown, NAvatar } from 'naive-ui';
import { NDropdown } from 'naive-ui';
import { UserAvatar, Logout } from '@vicons/carbon';
import { dynamicIconRender, resetAuthStorage } from '@/utils';
import { HoverContainer } from '@/components';
import avatar from '@/assets/img/common/logo-fill.png';
import avatar from '@/assets/svg/avatar/avatar01.svg';
type DropdownKey = 'user-center' | 'logout';

View File

@ -1,12 +1,13 @@
<template>
<a href="/" class="logo-height nowrap-hidden flex-center cursor-pointer">
<img src="@/assets/img/common/logo.png" alt="" class="w-32px h-32px" />
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
<system-logo class="w-32px h-32px" :color="primaryColor" />
<h2 v-show="showTitle" class="pl-8px text-16px font-bold" :style="{ color: primaryColor }">{{ title }}</h2>
</a>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { SystemLogo } from '@/components';
import { useAppStore, useThemeStore } from '@/store';
import { useAppTitle } from '@/hooks';
@ -17,6 +18,8 @@ const title = useAppTitle();
const showTitle = computed(
() => !theme.isVerticalNav || (!app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix')
);
const primaryColor = computed(() => theme.themeColor);
const headerHeight = computed(() => {
const { height } = theme.headerStyle;
return `${height}px`;