From bdfec03e9b2bd952463acce26222c62ce4efdc95 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 27 May 2025 16:15:30 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=92=8C=E7=99=BB=E9=99=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Menu/BasicMenu.vue     |  1 -
 src/layouts/components/Menu/MixTopMenu.vue    |  8 ++-
 .../components/Menu/components/MenuItem.vue   |  7 ++-
 ...{MenuItemTitle.vue => MenuItemContent.vue} | 47 +-------------
 src/styles/index.scss                         | 61 +++++++++++++++++++
 src/views/login/components/Login.vue          | 59 +++++++++++++-----
 6 files changed, 115 insertions(+), 68 deletions(-)
 rename src/layouts/components/Menu/components/{MenuItemTitle.vue => MenuItemContent.vue} (55%)

diff --git a/src/layouts/components/Menu/BasicMenu.vue b/src/layouts/components/Menu/BasicMenu.vue
index 9787e4ef..f023b2be 100644
--- a/src/layouts/components/Menu/BasicMenu.vue
+++ b/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";
diff --git a/src/layouts/components/Menu/MixTopMenu.vue b/src/layouts/components/Menu/MixTopMenu.vue
index 6e18cc05..a03372d0 100644
--- a/src/layouts/components/Menu/MixTopMenu.vue
+++ b/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",
diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue
index 4fa3e52d..2f39454e 100644
--- a/src/layouts/components/Menu/components/MenuItem.vue
+++ b/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",
diff --git a/src/layouts/components/Menu/components/MenuItemTitle.vue b/src/layouts/components/Menu/components/MenuItemContent.vue
similarity index 55%
rename from src/layouts/components/Menu/components/MenuItemTitle.vue
rename to src/layouts/components/Menu/components/MenuItemContent.vue
index b9d49364..f995608d 100644
--- a/src/layouts/components/Menu/components/MenuItemTitle.vue
+++ b/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>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 22a4d9e8..95335687 100644
--- a/src/styles/index.scss
+++ b/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;
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index b1741992..1e45fca7 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -86,22 +86,26 @@
     </div>
 
     <!-- 第三方登录 -->
-    <el-divider>
-      <el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
-    </el-divider>
-    <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
-      <CommonWrapper>
-        <div text-20px class="i-svg:wechat" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:qq" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:github" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:gitee" />
-      </CommonWrapper>
+    <div class="third-party-login">
+      <div class="divider-container">
+        <div class="divider-line"></div>
+        <span class="divider-text">{{ t("login.otherLoginMethods") }}</span>
+        <div class="divider-line"></div>
+      </div>
+      <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
+        <CommonWrapper>
+          <div text-20px class="i-svg:wechat" />
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:qq" />
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:github" />
+        </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>