菜单管理列表新增类型显示

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -74,6 +74,8 @@
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      height: 44px !important;
+      line-height: 44px !important;
     }
 
     // menu hover
@@ -105,6 +107,96 @@
         background-color: $base-sub-menu-hover !important;
       }
     }
+
+    // theme-dark 深色主题
+    &.theme-dark {
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
+      border-right: none;
+
+      .el-menu-item.is-active {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-submenu.is-active > .el-submenu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active),
+      .submenu-title-noDropdown,
+      .el-submenu__title {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: transparent;
+          pointer-events: none;
+          z-index: 1;
+          transition: background-color 0.2s;
+        }
+
+        &:hover::before {
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+        }
+      }
+    }
+    
+    // theme-light 浅色主题
+    &.theme-light {
+      border-right: 1px solid #e8eaf0;
+      box-shadow: none;
+
+      .el-menu-item,
+      .el-submenu__title {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      .el-menu-item.is-active {
+        color: var(--current-color, #409eff) !important;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-light, #ecf5ff);
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-submenu.is-active > .el-submenu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active):hover,
+      .submenu-title-noDropdown:hover,
+      .el-submenu__title:hover {
+        background-color: #f5f7fa !important;
+        color: rgba(0, 0, 0, 0.85) !important;
+      }
+
+      .nest-menu .el-submenu > .el-submenu__title,
+      .el-submenu .el-menu-item {
+        background-color: #fafafa !important;
+
+        &:hover {
+          background-color: #f0f5ff !important;
+        }
+      }
+    }
   }
 
   .hideSidebar {

ruoyi-ui/src/assets/styles/variables.scss

@@ -9,32 +9,17 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #ffffff;
+$base-menu-background: #1a1f2e;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
-
-// 自定义暗色菜单风格
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
+$base-sub-menu-background: #141824;
+$base-sub-menu-hover: rgba(255,255,255,.06);
 
 $base-sidebar-width: 200px;
 

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, settings.sideTheme]" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
         <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu

ruoyi-ui/src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33'}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">

ruoyi-ui/src/views/system/menu/index.vue

@@ -66,10 +66,19 @@
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="220">
         <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon" />
+            <svg-icon :icon-class="scope.row.icon" />
+            <span class="ml5">{{ scope.row.menuName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="menuName" label="类型" :show-overflow-tooltip="true" width="100">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.menuType === 'M' && scope.row.isFrame === '0'" type="danger" size="small">外链</el-tag>
+          <el-tag v-else-if="scope.row.menuType === 'M'" type="primary" size="small">目录</el-tag>
+          <el-tag v-else-if="scope.row.menuType === 'C' && scope.row.isFrame === '0'" type="danger" size="small">外链</el-tag>
+          <el-tag v-else-if="scope.row.menuType === 'C'" type="success" size="small">菜单</el-tag>
+          <el-tag v-else-if="scope.row.menuType === 'F'" type="warning" size="small">按钮</el-tag>
         </template>
       </el-table-column>
       <el-table-column prop="orderNum" label="排序" width="200">
@@ -77,16 +86,11 @@
           <el-input-number v-model="scope.row.orderNum" controls-position="right" :min="0" size="mini" style="width: 88px" />
         </template>
       </el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true" />
+      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
       <el-table-column prop="status" label="状态" width="80">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">