feat: ✨ 菜单新增目录在只有一个子路由情况下是否始终显示的设置

Former-commit-id: fcbd963b9c74b7bdf09c59420bd62ad2bf2592bd

src/api/menu/types.ts

@@ -112,4 +112,13 @@ export interface MenuForm {
    * 权限标识
    */
   perm?: string;
+  /**
+   * 【菜单】是否开启页面缓存
+   */
+  keepAlive?: number;
+
+  /**
+   * 【目录】只有一个子路由是否始终显示
+   */
+  alwaysShow?: number;
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,12 +3,11 @@ import path from "path-browserify";
 import { isExternal } from "@/utils/index";
 import AppLink from "./Link.vue";
 
-import { translateRouteTitleI18n } from "@/utils/i18n";
+import Item from "./Item.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
 
 const props = defineProps({
   /**
-   * 路由(eg:level_3_1)
+   * 路由(eg:user)
    */
   item: {
     type: Object,
@@ -16,12 +15,16 @@ const props = defineProps({
   },
 
   /**
-   * 父层级完整路由路径(eg:/level/level_3/level_3_1)
+   * 父层级完整路由路径(eg:/system)
    */
   basePath: {
     type: String,
     required: true,
   },
+  isNest: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const onlyOneChild = ref(); // 临时变量，唯一子路由
@@ -36,32 +39,33 @@ const onlyOneChild = ref(); // 临时变量，唯一子路由
  * @param parent 当前路由
  */
 function hasOneShowingChild(children = [], parent: any) {
-  // 需要显示的子路由数组
+  // 子路由集合
   const showingChildren = children.filter((item: any) => {
     if (item.meta?.hidden) {
-      return false; // 过滤不显示的子路由
+      // 过滤不显示的子路由
+      return false;
     } else {
-      onlyOneChild.value = item; // 唯一子路由赋值（多个子路由情况 onlyOneChild 变量是用不上的）
+      // 临时变量（多个子路由 onlyOneChild 变量是用不上的）
+      onlyOneChild.value = item;
       return true;
     }
   });
 
-  // 1：如果只有一个子路由, 返回 true
+  // 如果只有一个子路由, 返回 true
   if (showingChildren.length === 1) {
     return true;
   }
 
-  // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
+  // 如果没有子路由，显示父级路由
   if (showingChildren.length === 0) {
     onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
-
     return true;
   }
   return false;
 }
 
 /**
- * 解析路径
+ *  解析路由路径(相对路径 → 绝对路径)
  *
  * @param routePath 路由路径
  */
@@ -73,53 +77,48 @@ function resolvePath(routePath: string) {
     return props.basePath;
   }
 
-  // 完整路径 = 父级路径(/level/level_3) + 路由路径
+  // 完整路径(/system/user) = 父级路径(/system) + 路由路径(user)
-  const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
+  const fullPath = path.resolve(props.basePath, routePath);
   return fullPath;
 }
 </script>
 <template>
   <div v-if="!item.meta || !item.meta.hidden">
-    <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
+    <!-- 无子路由 || 一个子路由（始终显示 alwaysShow = false 情况） -->
     <template
       v-if="
         hasOneShowingChild(item.children, item) &&
-        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.meta?.alwaysShow
       "
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)">
+        <el-menu-item
-          <svg-icon
+          :index="resolvePath(onlyOneChild.path)"
-            class="mr-1"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
-            :icon-class="
+        >
-              onlyOneChild.meta && onlyOneChild.meta.icon
+          <item
-                ? onlyOneChild.meta.icon
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
-                : 'menu'
+            :title="onlyOneChild.meta.title"
-            "
           />
-
-          <template #title>
-            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
-          </template>
         </el-menu-item>
       </app-link>
     </template>
 
-    <!-- 包含多个子路由  -->
+    <!-- 有子路由  -->
     <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
       <template #title>
-        <svg-icon
+        <item
-          v-if="item.meta && item.meta.icon"
+          v-if="item.meta"
-          :icon-class="item.meta.icon"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
         />
-        <span v-if="item.meta && item.meta.title">{{
-          translateRouteTitleI18n(item.meta.title)
-        }}</span>
       </template>
 
       <sidebar-item
         v-for="child in item.children"
         :key="child.path"
+        :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"
       />

src/router/index.ts

@@ -38,6 +38,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           icon: "homepage",
           affix: true,
           keepAlive: true,
+          alwaysShow: false,
         },
       },
       {

src/views/system/menu/index.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+defineOptions({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Menu",
+  inheritAttrs: false,
+});
+
 import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
 import {
   listMenus,
@@ -14,12 +20,6 @@ import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";
 
-defineOptions({
-  // eslint-disable-next-line vue/no-reserved-component-names
-  name: "Menu",
-  inheritAttrs: false,
-});
-
 const queryFormRef = ref(ElForm);
 const menuFormRef = ref(ElForm);
 
@@ -38,6 +38,8 @@ const formData = reactive<MenuForm>({
   visible: 1,
   sort: 1,
   type: MenuTypeEnum.MENU,
+  alwaysShow: 0,
+  keepAlive: 0,
 });
 
 const rules = reactive({
@@ -45,9 +47,9 @@ const rules = reactive({
   name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
   type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
   path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
-  component: [
+
-    { required: true, message: "请输入组件完整路径", trigger: "blur" },
+  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
-  ],
+  visible: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
 });
 
 // 选择表格的行菜单ID
@@ -183,6 +185,8 @@ function resetForm() {
   formData.component = undefined;
   formData.path = undefined;
   formData.redirect = undefined;
+  formData.alwaysShow = undefined;
+  formData.keepAlive = undefined;
 }
 
 onMounted(() => {
@@ -214,7 +218,7 @@ onMounted(() => {
       </el-form>
     </div>
 
-    <el-card shadow="never" size="small">
+    <el-card shadow="never" class="table-container">
       <template #header>
         <el-button
           v-hasPerm="['sys:menu:add']"
@@ -230,25 +234,17 @@ onMounted(() => {
         v-loading="loading"
         :data="menuList"
         highlight-current-row
+        row-key="id"
+        :expand-row-keys="['1']"
+        @row-click="onRowClick"
         :tree-props="{
           children: 'children',
           hasChildren: 'hasChildren',
         }"
-        row-key="id"
-        default-expand-all
-        border
-        size="small"
-        @row-click="onRowClick"
       >
         <el-table-column label="菜单名称" min-width="200">
           <template #default="scope">
-            <svg-icon
+            <svg-icon :icon-class="scope.row.icon" />
-              :icon-class="
-                scope.row.type === MenuTypeEnum.BUTTON
-                  ? 'button'
-                  : scope.row.icon
-              "
-            />
             {{ scope.row.name }}
           </template>
         </el-table-column>
@@ -343,14 +339,15 @@ onMounted(() => {
       :title="dialog.title"
       destroy-on-close
       append-to-body
-      width="750px"
+      width="1000px"
       @close="closeDialog"
+      top="5vh"
     >
       <el-form
         ref="menuFormRef"
         :model="formData"
         :rules="rules"
-        label-width="100px"
+        label-width="160px"
       >
         <el-form-item label="父级菜单" prop="parentId">
           <el-tree-select
@@ -420,9 +417,62 @@ onMounted(() => {
           </el-input>
         </el-form-item>
 
+        <el-form-item
+          v-if="formData.type !== MenuTypeEnum.BUTTON"
+          prop="visible"
+          label="显示状态"
+        >
+          <el-radio-group v-model="formData.visible">
+            <el-radio :label="1">显示</el-radio>
+            <el-radio :label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type === MenuTypeEnum.CATALOG"
+          label="根目录始终显示"
+        >
+          <template #label>
+            <div>
+              根目录始终显示
+              <el-tooltip placement="bottom" effect="light">
+                <template #content
+                  >是：根目录只有一个子路由显示目录
+                  <br />否：根目录只有一个子路由不显示目录，只显示子路由
+                </template>
+                <i-ep-QuestionFilled class="inline-block" />
+              </el-tooltip>
+            </div>
+          </template>
+
+          <el-radio-group v-model="formData.alwaysShow">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type === MenuTypeEnum.MENU"
+          label="是否缓存"
+        >
+          <el-radio-group v-model="formData.keepAlive">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            style="width: 100px"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+
         <!-- 权限标识 -->
         <el-form-item
-          v-if="formData.type == 'BUTTON'"
+          v-if="formData.type == MenuTypeEnum.BUTTON"
           label="权限标识"
           prop="perm"
         >
@@ -430,7 +480,7 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item
-          v-if="formData.type !== 'BUTTON'"
+          v-if="formData.type !== MenuTypeEnum.BUTTON"
           label="图标"
           prop="icon"
         >
@@ -444,22 +494,6 @@ onMounted(() => {
         >
           <el-input v-model="formData.redirect" placeholder="跳转路由" />
         </el-form-item>
-
-        <el-form-item v-if="formData.type !== 'BUTTON'" label="状态">
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
       </el-form>
 
       <template #footer>