wip: 布局问题修复和登陆样式优化

src/layouts/components/Menu/BasicMenu.vue

@@ -37,7 +37,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, PropType } from "vue";
 import { useRoute } from "vue-router";
 import path from "path-browserify";
 import type { MenuInstance } from "element-plus";

src/layouts/components/Menu/MixTopMenu.vue

@@ -21,13 +21,17 @@
     @select="handleMenuSelect"
   >
     <el-menu-item v-for="menuItem in processedTopMenus" :key="menuItem.path" :index="menuItem.path">
-      <MenuItemTitle v-if="menuItem.meta" :icon="menuItem.meta.icon" :title="menuItem.meta.title" />
+      <MenuItemContent
+        v-if="menuItem.meta"
+        :icon="menuItem.meta.icon"
+        :title="menuItem.meta.title"
+      />
     </el-menu-item>
   </el-menu>
 </template>
 
 <script lang="ts" setup>
-import MenuItemTitle from "./components/MenuItemTitle.vue";
+import MenuItemContent from "./components/MenuItemContent.vue";
 
 defineOptions({
   name: "MixTopMenu",

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

@@ -22,7 +22,8 @@
           :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
-          <MenuItemTitle
+          <MenuItemContent
+            v-if="onlyOneChild.meta"
             :icon="onlyOneChild.meta.icon || item.meta?.icon"
             :title="onlyOneChild.meta.title"
           />
@@ -33,7 +34,7 @@
     <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
     <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
       <template #title>
-        <MenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+        <MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
       </template>
 
       <MenuItem
@@ -48,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import MenuItemTitle from "./MenuItemTitle.vue";
+import MenuItemContent from "./MenuItemContent.vue";
 
 defineOptions({
   name: "MenuItem",

src/layouts/components/Menu/components/MenuItemContent.vue

@@ -34,52 +34,7 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
   width: 18px;
   height: 18px;
   margin-right: 5px;
+  font-size: 18px;
   color: currentcolor;
 }
-
-.el-icon {
-  width: 18px !important;
-  height: 18px !important;
-  color: currentcolor;
-}
-
-[class^="i-svg:"] {
-  width: 18px;
-  height: 18px;
-  color: currentcolor !important;
-}
-
-// 收缩状态下的样式优化
-.hideSidebar {
-  .el-sub-menu,
-  .el-menu-item {
-    // 确保菜单项内容居中
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-
-    .menu-icon {
-      width: 20px;
-      height: 20px;
-      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/styles/index.scss

@@ -10,6 +10,67 @@
   background-color: var(--el-color-primary);
 }
 
+// 混合布局左侧菜单的hover样式
+.layout-mix .layout__sidebar--left .el-menu {
+  .el-menu-item {
+    &:hover {
+      // 极简白主题：使用浅灰色背景
+      background-color: var(--el-fill-color-light) !important;
+    }
+  }
+
+  .el-sub-menu__title {
+    &:hover {
+      // 极简白主题：使用浅灰色背景
+      background-color: var(--el-fill-color-light) !important;
+    }
+  }
+}
+
+// 深色主题或深蓝色侧边栏配色下的左侧菜单hover样式
+html.dark .layout-mix .layout__sidebar--left .el-menu,
+html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
+  .el-menu-item {
+    &:hover {
+      // 深色背景：使用CSS变量
+      background-color: var(--menu-hover) !important;
+    }
+  }
+
+  .el-sub-menu__title {
+    &:hover {
+      // 深色背景：使用CSS变量
+      background-color: var(--menu-hover) !important;
+    }
+  }
+}
+
+// 窄屏时隐藏菜单文字，只显示图标
+.hideSidebar {
+  // Top布局和Mix布局的水平菜单
+  &.layout-top .layout__header .el-menu--horizontal,
+  &.layout-mix .layout__header .el-menu--horizontal {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"]):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+
+  // Mix布局的左侧菜单
+  &.layout-mix .layout__sidebar--left .el-menu {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"]):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+}
+
 // 全局搜索区域样式
 .search-container {
   padding: 18px 16px 0;

src/views/login/components/Login.vue

@@ -86,22 +86,26 @@
     </div>
 
     <!-- 第三方登录 -->
-    <el-divider>
+    <div class="third-party-login">
-      <el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
+      <div class="divider-container">
-    </el-divider>
+        <div class="divider-line"></div>
-    <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
+        <span class="divider-text">{{ t("login.otherLoginMethods") }}</span>
-      <CommonWrapper>
+        <div class="divider-line"></div>
-        <div text-20px class="i-svg:wechat" />
+      </div>
-      </CommonWrapper>
+      <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
-      <CommonWrapper>
+        <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:qq" />
+          <div text-20px class="i-svg:wechat" />
-      </CommonWrapper>
+        </CommonWrapper>
-      <CommonWrapper>
+        <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:github" />
+          <div text-20px cursor-pointer class="i-svg:qq" />
-      </CommonWrapper>
+        </CommonWrapper>
-      <CommonWrapper>
+        <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:gitee" />
+          <div text-20px cursor-pointer class="i-svg:github" />
-      </CommonWrapper>
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:gitee" />
+        </CommonWrapper>
+      </div>
     </div>
   </div>
 </template>
@@ -257,3 +261,26 @@ function toOtherForm(type: "register" | "resetPwd") {
   emit("update:modelValue", type);
 }
 </script>
+
+<style lang="scss" scoped>
+.third-party-login {
+  .divider-container {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+
+    .divider-line {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(to right, transparent, var(--el-border-color-light), transparent);
+    }
+
+    .divider-text {
+      padding: 0 16px;
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      white-space: nowrap;
+    }
+  }
+}
+</style>