feat(projects): 添加svg logo自适应主题颜色
This commit is contained in:
Soybean
parent
3d1f41925d
commit
e1e5579e8f
1
src/assets/svg/avatar/avatar01.svg
Normal file
1
src/assets/svg/avatar/avatar01.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.6 KiB |
38
src/components/common/SystemLogo/components/SvgFillLogo.vue
Normal file
38
src/components/common/SystemLogo/components/SvgFillLogo.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 158.88 158.88">
|
||||
<path
|
||||
d="M158.86.3q0,78.74,0,157.48c0,.9-.2,1.1-1.1,1.1q-78.77,0-157.52,0a2.61,2.61,0,0,1-.11-1.3q0-78,0-155.91C.14,0,0,.18,1.61.18h156A2.62,2.62,0,0,1,158.86.3Z"
|
||||
:style="{ fill: color }"
|
||||
/>
|
||||
<path
|
||||
d="M158.86.3H2C0,.31.27,0,.27,2q0,78.42,0,156.85c-.07-.05-.25.12-.24-.12s0-.64,0-1Q0,79.46,0,1.14C0,.24.2,0,1.1,0l156.68,0C158.13.08,158.59-.2,158.86.3Z"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
<path
|
||||
d="M93.65,51.52a68.65,68.65,0,0,1-6.47,28.81,1.72,1.72,0,0,0,.19,2c6.08,8.28,13.58,14.79,23.19,18.69a46.22,46.22,0,0,0,17.15,3.39,28.87,28.87,0,0,0,3.34-.25,6.2,6.2,0,0,1,7,5.12,6.07,6.07,0,0,1-5.15,7.14,50.39,50.39,0,0,1-18.06-1c-15.85-3.66-28-12.75-37.44-25.7a2.15,2.15,0,0,0-2.23-1.09C61.17,90,49,95.06,39.67,105.84a38.47,38.47,0,0,0-6.23,9.74A6.21,6.21,0,0,1,25.27,119,6.14,6.14,0,0,1,22,110.8a49.31,49.31,0,0,1,9.63-14.62c10.56-11.44,23.8-17.54,39.09-19.54a13.93,13.93,0,0,1,2.84-.34c1.61.14,2.18-.73,2.73-2A54.38,54.38,0,0,0,81.12,51a44,44,0,0,0-8-25,6.11,6.11,0,0,1-.65-6.46A6,6,0,0,1,77.75,16a6.34,6.34,0,0,1,5.66,3,53.61,53.61,0,0,1,7.17,14.28A59.33,59.33,0,0,1,93.65,51.52Z"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
<path
|
||||
d="M46.92,118.63a6,6,0,0,1,1.35-3.88,37.89,37.89,0,0,1,22.5-14,6.08,6.08,0,0,1,6.65,2.47,6.18,6.18,0,0,1-3.84,9.63,26.09,26.09,0,0,0-15.71,9.77,6.2,6.2,0,0,1-10.95-4Z"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
<path
|
||||
d="M124.3,92.8a34.66,34.66,0,0,1-9.82-2.48A35.46,35.46,0,0,1,99.83,79.87a6.19,6.19,0,0,1,2.84-9.93,5.79,5.79,0,0,1,6.44,1.73,26.79,26.79,0,0,0,16.51,8.85,6,6,0,0,1,5,5.54,6.21,6.21,0,0,1-4.29,6.46A6.55,6.55,0,0,1,124.3,92.8Z"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
<path
|
||||
d="M69.32,53.27a33.46,33.46,0,0,1-2.27,12.52,6.21,6.21,0,0,1-10.94,1,6.09,6.09,0,0,1-.65-5.4,26,26,0,0,0-.53-18.25,6.21,6.21,0,0,1,11.49-4.72A40.24,40.24,0,0,1,69.32,53.27Z"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: '#409EFF'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
39
src/components/common/SystemLogo/components/SvgLogo.vue
Normal file
39
src/components/common/SystemLogo/components/SvgLogo.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 158.88 158.88">
|
||||
<path
|
||||
d="M0,158.86Q0,80,0,1.1C0,.2.2,0,1.1,0Q79.44,0,157.78,0c.9,0,1.1.2,1.1,1.1q0,78.35,0,156.68c0,.9-.2,1.1-1.1,1.1Q78.9,158.83,0,158.86Z"
|
||||
transform="translate(0)"
|
||||
style="fill: #fefefe"
|
||||
/>
|
||||
<path
|
||||
d="M81.28,55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1,8.1,0,0,1,4-8.61,7.89,7.89,0,0,1,9.3,1.23,36,36,0,0,1,5.9,8.83,75.18,75.18,0,0,1,8.44,28.58,83.21,83.21,0,0,1-5.23,36.74c-.91,2.47-1.91,4.9-3,7.28a1.2,1.2,0,0,0,0,1.41c9.58,13.3,21.76,23,37.85,27.24a54.35,54.35,0,0,0,19.68,1.57,7.72,7.72,0,0,1,8.36,6.9,7.9,7.9,0,0,1-6.7,9,64.74,64.74,0,0,1-23-1.33,77.68,77.68,0,0,1-36.93-19.88,93.64,93.64,0,0,1-11.91-13.71A2.18,2.18,0,0,0,73.87,103a72.75,72.75,0,0,0-27.38,7.55c-11.6,6-20.67,14.58-26.4,26.45a10.13,10.13,0,0,1-3.7,4.7A8,8,0,0,1,7.2,141a7.86,7.86,0,0,1-2.36-9.28,60.32,60.32,0,0,1,8.72-14.52c12.2-15.43,28.21-24.59,47.32-28.57A85.08,85.08,0,0,1,73.07,87a1.22,1.22,0,0,0,1.18-.8A76.06,76.06,0,0,0,80.78,63.9,57.87,57.87,0,0,0,81.28,55.9Z"
|
||||
transform="translate(0)"
|
||||
:style="{ fill: color }"
|
||||
/>
|
||||
<path
|
||||
d="M136.26,108.34a44.72,44.72,0,0,1-11.13-2.87,46.11,46.11,0,0,1-19.66-13.76,8,8,0,0,1,5.72-13.22,7.93,7.93,0,0,1,6.54,2.93A33.27,33.27,0,0,0,136.6,92.17a14.76,14.76,0,0,1,4.48,1.18,8.08,8.08,0,0,1,3.84,9.21C144,106.08,140.79,108.37,136.26,108.34Z"
|
||||
transform="translate(0)"
|
||||
:style="{ fill: color }"
|
||||
/>
|
||||
<path
|
||||
d="M55.66,33.32a7.61,7.61,0,0,1,6.64,5,49.14,49.14,0,0,1,3.64,17,46.33,46.33,0,0,1-2.46,17.28c-2,5.77-8.24,7.79-12.89,4.15a8.1,8.1,0,0,1-2.39-9,31.68,31.68,0,0,0,1.68-12.36,35.77,35.77,0,0,0-2.43-11C45.35,38.94,49.2,33.32,55.66,33.32Z"
|
||||
transform="translate(0)"
|
||||
:style="{ fill: color }"
|
||||
/>
|
||||
<path
|
||||
d="M77.92,126.57a8,8,0,0,1-6.68,7.86,32.88,32.88,0,0,0-19.7,12.19,8.13,8.13,0,0,1-11.21,1.62,8,8,0,0,1-1.41-11.58A51.05,51.05,0,0,1,54,123.81a45.85,45.85,0,0,1,14-5.1C73.35,117.67,77.91,121.27,77.92,126.57Z"
|
||||
transform="translate(0)"
|
||||
:style="{ fill: color }"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: '#409EFF'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
4
src/components/common/SystemLogo/components/index.ts
Normal file
4
src/components/common/SystemLogo/components/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import SvgLogo from './SvgLogo.vue';
|
||||
import SvgFillLogo from './SvgFillLogo.vue';
|
||||
|
||||
export { SvgLogo, SvgFillLogo };
|
||||
@ -1,19 +1,22 @@
|
||||
<template>
|
||||
<img :src="logoSrc" alt="" />
|
||||
<div>
|
||||
<svg-fill-logo v-if="fill" :color="color" />
|
||||
<svg-logo v-else :color="color" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import logo from '@/assets/img/common/logo.png';
|
||||
import logoFill from '@/assets/img/common/logo-fill.png';
|
||||
import { SvgLogo, SvgFillLogo } from './components';
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
fill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#409EFF'
|
||||
}
|
||||
});
|
||||
|
||||
const logoSrc = computed(() => (props.fill ? logoFill : logo));
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user