wip: 临时提交

src/layouts/components/AppLogo/index.vue

@@ -40,56 +40,36 @@ defineProps({
 </style>
 
 <style lang="scss">
-// 全局样式：针对顶部布局和混合布局的特殊处理
+// 顶部布局和混合布局的特殊处理
 .layout-top,
 .layout-mix {
   .logo {
-    // 在顶部和混合布局中，移除背景色，使其透明
     background-color: transparent !important;
 
     .title {
-      // 确保标题颜色适配当前主题
       color: var(--menu-text);
     }
   }
 }
 
-// 顶部布局的响应式宽度控制
-.layout-top {
-  .layout__header-left .logo {
-    flex-shrink: 0; // 防止Logo被压缩
-    width: $sidebar-width; // 默认宽度：显示logo+文字
-    margin-right: 20px;
-
-    // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
-    @media (min-width: 768px) and (max-width: 1100px) {
-      width: 180px; // 缩小到180px，为菜单腾出空间
-      margin-right: 16px; // 减少右边距
-    }
-
-    // 小屏设备：只显示logo，使用收缩宽度
-    @media (max-width: 767px) {
-      width: $sidebar-width-collapsed; // 只显示logo：54px
-      margin-right: 12px; // 减少右边距
-    }
+// 宽屏时：openSidebar 状态下显示完整Logo+文字
+.openSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width; // 210px，显示logo+文字
   }
 }
 
-// 混合布局的响应式宽度控制
-.layout-mix {
-  .layout__header-logo .logo {
-    flex-shrink: 0;
-    width: $sidebar-width; // 默认宽度：显示logo+文字
+// 窄屏时：hideSidebar 状态下只显示Logo图标
+.hideSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width-collapsed; // 54px，只显示logo
+  }
 
-    // 中屏设备优化（800px-1100px）：适度缩小但保持显示文字
-    @media (min-width: 768px) and (max-width: 1100px) {
-      width: 180px; // 缩小到180px，为菜单腾出空间
-    }
-
-    // 小屏设备：只显示logo，使用收缩宽度
-    @media (max-width: 767px) {
-      width: $sidebar-width-collapsed; // 只显示logo：54px
-    }
+  // 隐藏文字，只显示图标
+  .logo .title {
+    display: none;
   }
 }
 </style>

src/layouts/components/Menu/components/MenuItem.vue

@@ -140,12 +140,6 @@ function resolvePath(routePath: string) {
   .submenu-title-noDropdown {
     position: relative;
 
-    .el-tooltip {
-      .sub-el-icon {
-        margin-left: 19px;
-      }
-    }
-
     & > span {
       display: inline-block;
       visibility: hidden;

src/layouts/components/Menu/components/MenuItemTitle.vue

@@ -1,16 +1,16 @@
 <template>
   <!-- 菜单图标 -->
   <template v-if="icon">
-    <el-icon v-if="isElIcon" class="el-icon">
+    <el-icon v-if="isElIcon" class="menu-icon">
       <component :is="iconComponent" />
     </el-icon>
-    <div v-else :class="`i-svg:${icon}`" />
+    <div v-else :class="`i-svg:${icon}`" class="menu-icon" />
   </template>
   <template v-else>
-    <div class="i-svg:menu" />
+    <div class="i-svg:menu menu-icon" />
   </template>
   <!-- 菜单标题 -->
-  <span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
+  <span v-if="title" class="menu-title ml-1">{{ translateRouteTitle(title) }}</span>
 </template>
 
 <script setup lang="ts">
@@ -26,28 +26,60 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
 </script>
 
 <style lang="scss" scoped>
+.menu-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  color: currentcolor;
+}
+
 .el-icon {
-  width: 14px !important;
-  margin-right: 0 !important;
+  width: 18px !important;
+  height: 18px !important;
   color: currentcolor;
 }
 
 [class^="i-svg:"] {
-  width: 14px;
-  height: 14px;
+  width: 18px;
+  height: 18px;
   color: currentcolor !important;
 }
 
+// 收缩状态下的样式优化
 .hideSidebar {
   .el-sub-menu,
   .el-menu-item {
-    .el-icon {
+    // 确保菜单项内容居中
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    .menu-icon {
+      width: 20px;
+      height: 20px;
       margin: 0 auto;
     }
-  }
 
-  [class^="i-svg:"] {
-    margin: 0 auto;
+    .el-icon {
+      width: 20px !important;
+      height: 20px !important;
+      margin: 0 auto;
+    }
+
+    [class^="i-svg:"] {
+      width: 20px;
+      height: 20px;
+      margin: 0 auto;
+    }
+
+    // 隐藏文字标题
+    .menu-title {
+      display: none;
+    }
   }
 }
 </style>

src/layouts/components/Settings/index.vue

@@ -146,7 +146,6 @@
 
 <script setup lang="ts">
 import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
-import { markRaw } from "vue";
 
 const { t } = useI18n();
 import { LayoutMode } from "@/enums/settings/layout.enum";
@@ -154,7 +153,7 @@ import { ThemeMode } from "@/enums/settings/theme.enum";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
-// 按钮图标 - 使用markRaw避免响应式警告
+// 按钮图标
 const copyIcon = markRaw(DocumentCopy);
 const resetIcon = markRaw(RefreshLeft);