feat: 让应用 Logo 跟随主题色 (#538)

* fix(login): show form with logo

* feat(theme): sync logos with primary color

* test(theme): cover favicon color sync

* chore(login): remove unused metal logo component

---------

Co-authored-by: jxxghp <jxxghp@gmail.com>

src/@layouts/components/VerticalNav.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Component } from 'vue'
 import { useDisplay } from 'vuetify'
-import logo from '@images/logo.svg?raw'
+import ThemeLogoMark from '@/components/misc/ThemeLogoMark.vue'
 
 interface Props {
   tag?: string | Component
@@ -51,7 +51,7 @@ function handleNavScroll(evt: Event) {
     <div class="nav-header">
       <slot name="nav-header">
         <RouterLink to="/" class="app-logo d-flex align-center app-title-wrapper">
-          <div class="d-flex" v-html="logo" />
+          <ThemeLogoMark />
 
           <h1 class="font-weight-bold leading-normal text-xl">
             MOVIEPILOT <span class="text-sm text-gray-500">v2</span>

src/@layouts/components/VerticalNavLayout.vue

@@ -273,16 +273,7 @@ export default defineComponent({
       transform: none !important;
     }
 
-    .app-logo > div {
-      display: flex;
-      overflow: hidden;
-      align-items: center;
-      justify-content: center;
-      block-size: 2.75rem;
-      inline-size: 2.75rem;
-    }
-
-    .app-logo svg {
+    .app-logo .theme-logo-mark {
       block-size: 2.5rem;
       inline-size: 2.5rem;
     }