[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化

src/layout/components/Sidebar/Logo.vue

@@ -21,7 +21,6 @@
 </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;
@@ -37,28 +36,11 @@ defineProps({
 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
-})
+const isTopNav = computed(() => settingsStore.navType === NavTypeEnum.TOP);
+const isDarkSide = computed(() => !isTopNav.value && sideTheme.value === 'theme-dark');
+const logoSurface = computed(() => (isDarkSide.value ? 'rgba(255, 255, 255, 0.04)' : '#f8fafc'));
+const logoBorder = computed(() => (isDarkSide.value ? 'rgba(148, 163, 184, 0.12)' : '#e5e7eb'));
+const logoTextColor = computed(() => (isDarkSide.value ? '#f8fbff' : 'var(--app-text-title)'));
 </script>
 
 <style lang="scss" scoped>
@@ -73,39 +55,61 @@ const getLogoTextColor = computed(() => {
 
 .sidebar-logo-container {
   position: relative;
-  height: 50px;
-  line-height: 50px;
-  background: v-bind(getLogoBackground);
+  flex-shrink: 0;
+  height: 46px;
+  line-height: 46px;
+  padding: 0 8px;
+  margin-top: 8px;
+  background: transparent;
   text-align: center;
   overflow: hidden;
+  margin-bottom: 0;
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 14px;
+    background: v-bind(logoSurface);
+    border: 1px solid v-bind(logoBorder);
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 28px;
+      height: 28px;
       vertical-align: middle;
-      margin-right: 12px;
-      margin-left: 12px;
+      margin-right: 0;
+      margin-left: 0;
+      border-radius: 10px;
+      box-shadow: none;
     }
 
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: v-bind(getLogoTextColor);
+      color: v-bind(logoTextColor);
       font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      line-height: 1;
+      font-size: 15px;
+      letter-spacing: 0.02em;
+      font-family:
+        'MiSans',
+        'HarmonyOS Sans SC',
+        'PingFang SC',
+        sans-serif;
       vertical-align: middle;
     }
   }
 
   &.collapse {
+    .sidebar-logo-link {
+      padding: 0;
+    }
+
     .sidebar-logo {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 }