refactor: tailwindcss样式优化

Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87

src/layout/components/Sidebar/Logo.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useSettingsStore } from '@/store/modules/settings';
+
+const settingsStore = useSettingsStore();
 
 defineProps({
   collapse: {
@@ -14,71 +17,25 @@ const logo = ref<string>(
 </script>
 
 <template>
-  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
-    <transition name="sidebarLogoFade">
-      <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">vue3-element-admin</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">vue3-element-admin</h1>
-      </router-link>
-    </transition>
-  </div>
+  <transition class="bg-gray-800">
+    <router-link
+      v-if="collapse"
+      key="collapse"
+      class="h-[50px] flex items-center justify-center"
+      to="/"
+    >
+      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+      <h1 v-else>vue3-element-admin</h1>
+    </router-link>
+
+    <router-link
+      v-else
+      key="expand"
+      class="h-[50px] flex items-center justify-center"
+      to="/"
+    >
+      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+      <span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span>
+    </router-link>
+  </transition>
 </template>
-
-<style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
-.sidebar-logo-container {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
-  overflow: hidden;
-
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 20px;
-      height: 20px;
-      vertical-align: middle;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-      margin-left: 12px;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
-}
-</style>