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

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;
     }
   }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -11,7 +11,7 @@
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" :popper-offset="isNest ? 4 : 12" :popper-class="popperClass" teleported>
       <template v-if="item.meta" #title>
         <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
         <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
@@ -22,6 +22,7 @@
         :key="child.path + index"
         :is-nest="true"
         :item="child"
+        :popper-class="popperClass"
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
@@ -47,6 +48,10 @@ const props = defineProps({
   basePath: {
     type: String,
     default: ''
+  },
+  popperClass: {
+    type: String,
+    default: ''
   }
 });
 

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
+  <div class="sidebar-shell" :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
@@ -24,7 +24,6 @@
 <script setup lang="ts">
 import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
-import variables from '@/assets/styles/variables.module.scss';
 import { useAppStore } from '@/store/modules/app';
 import { useSettingsStore } from '@/store/modules/settings';
 import { usePermissionStore } from '@/store/modules/permission';
@@ -51,6 +50,37 @@ const activeMenu = computed(() => {
   return path;
 });
 
-const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
-const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
+const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? '#111827' : '#ffffff'));
+const textColor = computed(() => (sideTheme.value === 'theme-dark' ? '#e5edf8' : '#1f2937'));
 </script>
+
+<style lang="scss" scoped>
+.sidebar-shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 8px 12px;
+  border: 1px solid var(--app-sidebar-border);
+  border-radius: 22px;
+  box-shadow: var(--app-shadow-sm);
+  background: v-bind(bgColor) !important;
+  overflow: hidden;
+}
+
+:deep(.el-scrollbar__view) {
+  min-height: 0;
+  padding-bottom: 12px;
+}
+
+:deep(.el-scrollbar) {
+  flex: 1;
+  min-height: 0;
+  height: auto !important;
+}
+
+:deep(.el-scrollbar__wrap) {
+  height: 100%;
+  overflow-x: hidden;
+}
+</style>