Browse Source

feat(asset): extract brand logo to svg file

main
Mohan 1 month ago
parent
commit
02315cc291
  1. 24
      src/App.vue
  2. 14
      src/assets/brand-logo.svg

24
src/App.vue

@ -3,6 +3,7 @@ import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useTheme } from '@/composables/useTheme'
import brandLogo from '@/assets/brand-logo.svg'
const auth = useAuthStore()
const router = useRouter()
@ -30,28 +31,7 @@ async function handleLogout() {
<div>
<header class="app-header">
<router-link to="/" class="brand" aria-label="Mach-CMS 首页">
<svg class="brand-logo" viewBox="0 0 116 30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mach">
<defs>
<filter id="brand-glow" x="-40%" y="-80%" width="180%" height="260%">
<feGaussianBlur stdDeviation="1.6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<text
x="1" y="24"
fill="#ffffff"
font-family="'Noto Sans SC','Source Code Pro',monospace"
font-size="21"
font-weight="700"
letter-spacing="5"
filter="url(#brand-glow)"
>Mach</text>
<line x1="2" y1="28" x2="100" y2="28" stroke="#7ff0ff" stroke-width="1.2" opacity="0.9" stroke-linecap="round" />
</svg>
<img :src="brandLogo" class="brand-logo" alt="Mach" />
</router-link>
<span v-if="pageTitle" class="header-page-title"><span class="header-title-sep">×</span>{{ pageTitle }}</span>
<nav class="nav-links">

14
src/assets/brand-logo.svg

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="116" height="30" viewBox="0 0 116 30" role="img" aria-label="Mach">
<defs>
<filter id="brand-glow" x="-40%" y="-80%" width="180%" height="260%">
<feGaussianBlur stdDeviation="1.6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<text x="1" y="24" fill="#ffffff" font-family="'Noto Sans SC','Source Code Pro',monospace" font-size="21" font-weight="700" letter-spacing="5" filter="url(#brand-glow)">Mach</text>
<line x1="2" y1="28" x2="100" y2="28" stroke="#7ff0ff" stroke-width="1.2" opacity="0.9" stroke-linecap="round" />
</svg>
Loading…
Cancel
Save