fix init

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+  >
+    <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">
+          {{ title }}
+        </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">
+          {{ title }}
+        </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import variables from '@/assets/styles/variables.module.scss';
+import logo from '@/assets/logo/logo.png';
+import { useSettingsStore } from '@/store/modules/settings';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const title = import.meta.env.VITE_APP_LOGO_TITLE;
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
+
+// 获取Logo背景色
+const getLogoBackground = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-bg)'
+  }
+  if (settingsStore.navType == NavTypeEnum.TOP) {
+    return variables.menuLightBackground
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground
+})
+
+// 获取Logo文字颜色
+const getLogoTextColor = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-text)'
+  }
+  if (settingsStore.navType == NavTypeEnum.TOP) {
+    return variables.logoLightTitleColor
+  }
+  return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor
+})
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  height: 50px;
+  line-height: 50px;
+  background: v-bind(getLogoBackground);
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+      margin-left: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: v-bind(getLogoTextColor);
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>