feat(Logo): Add Logo component

src/components/Logo/index.ts

@@ -0,0 +1,3 @@
+import Logo from './src/Logo.vue'
+
+export { Logo }

src/components/Logo/src/Logo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const show = ref(true)
+
+const title = computed(() => appStore.getLogoTitle)
+
+const layout = computed(() => appStore.getLayout)
+
+const collapse = computed(() => appStore.getCollapse)
+
+watch(
+  () => collapse.value,
+  (collapse: boolean) => {
+    if (layout.value !== 'classic') {
+      show.value = true
+    } else {
+      if (!collapse) {
+        setTimeout(() => {
+          show.value = !collapse
+        }, 400)
+      } else {
+        show.value = !collapse
+      }
+    }
+  }
+)
+</script>
+
+<template>
+  <router-link
+    :class="[
+      'v-logo',
+      {
+        'v-logo__Top': layout !== 'classic'
+      },
+      'flex h-[var(--logo-height)] items-center cursor-pointer pl-8px'
+    ]"
+    to="/"
+  >
+    <img
+      src="@/assets/imgs/logo.png"
+      class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+    />
+    <div v-if="show" class="text-[var(--logo-title-text-color)] ml-10px text-16px font-700">{{
+      title
+    }}</div>
+  </router-link>
+</template>