调整部分前端布局和后端增删改逻辑

shierfeng-fastapi-frontend/src/layout/components/Sidebar/Logo.vue

@@ -1,21 +1,19 @@
 <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">{{ title }}</h1>
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" :aria-label="title" to="/">
+        <img :src="logoMark" :alt="title" class="sidebar-logo sidebar-logo-mark" />
       </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 v-else key="expand" class="sidebar-logo-link" :aria-label="title" to="/">
+        <img :src="logo" :alt="title" class="sidebar-logo sidebar-logo-full" />
       </router-link>
     </transition>
   </div>
 </template>
 
 <script setup>
-import logo from '@/assets/logo/logo.png'
-import useSettingsStore from '@/store/modules/settings'
+import logo from '@/assets/logo/sylvan-logo.svg'
+import logoMark from '@/assets/logo/sylvan-mark.svg'
 import variables from '@/assets/styles/variables.module.scss'
 
 defineProps({
@@ -26,30 +24,7 @@ defineProps({
 })
 
 const title = import.meta.env.VITE_APP_TITLE;
-const settingsStore = useSettingsStore();
-const sideTheme = computed(() => settingsStore.sideTheme);
-
-// 获取Logo背景色
-const getLogoBackground = computed(() => {
-  if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)';
-  }
-  if (settingsStore.navType == 3) {
-    return variables.menuLightBg
-  }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
-});
-
-// 获取Logo文字颜色
-const getLogoTextColor = computed(() => {
-  if (settingsStore.isDark) {
-    return 'var(--sidebar-text)';
-  }
-  if (settingsStore.navType == 3) {
-    return variables.menuLightText
-  }
-  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
-});
+const logoBackground = variables.menuBg;
 </script>
 
 <style lang="scss" scoped>
@@ -66,37 +41,39 @@ const getLogoTextColor = computed(() => {
   position: relative;
   height: 50px;
   line-height: 50px;
-  background: v-bind(getLogoBackground);
+  background: v-bind(logoBackground);
   text-align: center;
   overflow: hidden;
 
   & .sidebar-logo-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
     width: 100%;
+    box-sizing: border-box;
+    padding: 4px 12px;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
+      display: block;
+      object-fit: contain;
     }
 
-    & .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;
+    & .sidebar-logo-full {
+      width: 132px;
+      height: 42px;
+    }
+
+    & .sidebar-logo-mark {
+      width: 32px;
+      height: 32px;
     }
   }
 
   &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
+    .sidebar-logo-link {
+      padding: 4px;
     }
   }
 }
-</style>
+</style>