fixed: 进入404页面不会触发获取菜单.

orion-ops-ui/src/components/menu/tree/index.vue

@@ -33,13 +33,22 @@
       /**
        * 跳转
        */
-      const goto = (item: RouteRecordRaw) => {
+      const goto = (e: any, item: RouteRecordRaw) => {
         // 打开外链
         if (regexUrl.test(item.path)) {
           openWindow(item.path);
           selectedKey.value = [item.name as string];
           return;
         }
+        // 新页面打开
+        if (e.ctrlKey) {
+          const { href } = router.resolve({
+            name: item.name,
+          });
+          openWindow(href);
+          selectedKey.value = [item.name as string];
+          return;
+        }
         // 设置 selectedKey
         const { hideInMenu, activeMenu } = item.meta as RouteMeta;
         if (route.name === item.name && !hideInMenu && !activeMenu) {
@@ -124,7 +133,7 @@
                   <a-menu-item
                     key={element?.name}
                     v-slots={{ icon }}
-                    onClick={() => goto(element)}
+                    onClick={($event: any) => goto($event, element)}
                   >
                     {element?.meta?.locale || ''}
                   </a-menu-item>

orion-ops-ui/src/components/navbar/index.vue

@@ -192,7 +192,7 @@
   import useLocale from '@/hooks/locale';
   import useUser from '@/hooks/user';
   import { triggerMouseEvent } from '@/utils';
-  import Menu from '@/components/menu/index.vue';
+  import Menu from '@/components/menu/tree/index.vue';
   import MessageBox from '../message-box/index.vue';
 
   const appStore = useAppStore();

orion-ops-ui/src/hooks/permission.ts

@@ -1,6 +1,6 @@
 import { RouteLocationNormalized, RouteRecordNormalized, RouteRecordRaw } from 'vue-router';
 import { useAppStore, useUserStore } from '@/store';
-import { WHITE_ROUTER_LIST } from '@/router/constants';
+import { STATUS_ROUTER_LIST, WHITE_ROUTER_LIST } from '@/router/constants';
 
 export default function usePermission() {
   const appStore = useAppStore();
@@ -10,8 +10,12 @@ export default function usePermission() {
      * 是否可访问路由
      */
     accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
+      // 没有名字证明路由不存在
+      if (route.name === undefined) {
+        return false;
+      }
       // 检查路由是否存在于授权路由中
-      const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST];
+      const menuConfig = [...appStore.appAsyncMenus, ...WHITE_ROUTER_LIST, ...STATUS_ROUTER_LIST];
       let exist = false;
       while (menuConfig.length && !exist) {
         const element = menuConfig.shift();

orion-ops-ui/src/layout/default-layout.vue

@@ -52,7 +52,7 @@
   import { useRoute, useRouter } from 'vue-router';
   import { useAppStore } from '@/store';
   import NavBar from '@/components/navbar/index.vue';
-  import Menu from '@/components/menu/index.vue';
+  import Menu from '@/components/menu/tree/index.vue';
   import Footer from '@/components/footer/index.vue';
   import TabBar from '@/components/tab-bar/index.vue';
   import useResponsive from '@/hooks/responsive';

orion-ops-ui/src/router/constants.ts

@@ -18,9 +18,15 @@ export const DEFAULT_ROUTE_FULL_PATH = '/dashboard/workplace';
  */
 export const WHITE_ROUTER_LIST = [
   { name: LOGIN_ROUTE_NAME, children: [] },
+  { name: REDIRECT_ROUTE_NAME, children: [] },
+];
+
+/**
+ * 状态路由
+ */
+export const STATUS_ROUTER_LIST = [
   { name: NOT_FOUND_ROUTER_NAME, children: [] },
   { name: FORBIDDEN_ROUTER_NAME, children: [] },
-  { name: REDIRECT_ROUTE_NAME, children: [] },
 ];
 
 /**

orion-ops-ui/src/router/routes/base.ts

@@ -53,7 +53,7 @@ export const REDIRECT_ROUTER: RouteRecordRaw = {
  * 403 页面
  */
 export const FORBIDDEN_ROUTE: RouteRecordRaw = {
-  path: '/:pathMatch(.*)*',
+  path: '/403',
   name: FORBIDDEN_ROUTER_NAME,
   component: () => import('@/views/exception/forbidden/index.vue'),
 };
@@ -62,7 +62,8 @@ export const FORBIDDEN_ROUTE: RouteRecordRaw = {
  * 404 页面
  */
 export const NOT_FOUND_ROUTE: RouteRecordRaw = {
-  path: '/:pathMatch(.*)*',
+  // path: '/:pathMatch(.*)*',
+  path: '/404',
   name: NOT_FOUND_ROUTER_NAME,
   component: () => import('@/views/exception/not-found/index.vue'),
 };

orion-ops-ui/src/router/routes/modules/user.ts

@@ -7,14 +7,14 @@ const USER: AppRouteRecordRaw = {
   component: DEFAULT_LAYOUT,
   children: [
     {
-      path: '/user/userChild1',
+      name: 'userRole',
-      name: 'userChild1',
+      path: '/user/role',
-      component: () => import('@/views/user/child1/index.vue'),
+      component: () => import('@/views/user/role/index.vue'),
     },
     {
-      path: '/user/userChild2',
+      name: 'userUser',
-      name: 'userChild2',
+      path: '/user/user',
-      component: () => import('@/views/user/child2/index.vue'),
+      component: () => import('@/views/user/user/index.vue'),
     },
   ],
 };

orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue

@@ -114,8 +114,9 @@
   import { MenuTypeEnum, MenuVisibleEnum, MenuCacheEnum } from '../types/enum.types';
   import { toOptions } from '@/utils/enum';
   import IconPicker from '@sanqi377/arco-vue-icon-picker';
-  import MenuTreeSelector from '@/views/system/menu/components/menu-tree-selector.vue';
+  import MenuTreeSelector from './menu-tree-selector.vue';
   import { createMenu, updateMenu } from '@/api/system/menu';
+  import { Message } from '@arco-design/web-vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
@@ -155,7 +156,11 @@
   const openAdd = (record: any) => {
     title.value = '添加菜单';
     isAddHandle.value = true;
-    renderForm({ ...defaultForm(), ...record });
+    renderForm({ ...defaultForm(), parentId: record.parentId });
+    // 如果是父菜单默认选中子菜单 如果是子菜单默认选中功能
+    if (record.type === 1 || record.type === 2) {
+      formModel.type = record.type + 1;
+    }
     setVisible(true);
   };
 
@@ -185,13 +190,20 @@
       if (error) {
         return false;
       }
+      if (formModel.parentId === 0
+        && (formModel.type === MenuTypeEnum.SUB_MENU.value || formModel.type === MenuTypeEnum.FUNCTION.value)) {
+        Message.error('创建子目录或功能时 父菜单不能为根目录');
+        return false;
+      }
       if (isAddHandle.value) {
         // 新增
         await createMenu(formModel as any);
+        Message.success('创建成功');
         emits('added');
       } else {
         // 修改
         await updateMenu(formModel as any);
+        Message.success('修改成功');
         emits('updated');
       }
       // 清空

orion-ops-ui/src/views/system/menu/components/menu-table.vue

@@ -122,7 +122,7 @@
                     size="mini"
                     v-if="record.type !== MenuTypeEnum.FUNCTION.value"
                     v-permission="['infra:system-menu:create']"
-                    @click="emits('openAdd', { parentId: record.id })">
+                    @click="emits('openAdd', { parentId: record.id, type: record.type })">
             新增
           </a-button>
           <!-- 修改 -->
@@ -276,7 +276,7 @@
     await loadMenuData();
   };
 
-  // 卸载时清除 store
+  // 卸载时清除 menu cache
   onUnmounted(() => {
     cacheStore.resetMenu();
   });

orion-ops-ui/src/views/system/menu/components/menu-tree-selector.vue

@@ -4,7 +4,7 @@
                  :disabled="disabled"
                  :allow-search="true"
                  :filter-tree-node="filterTreeNode"
-                 placeholder="请选择上级菜单" />
+                 placeholder="请选择菜单" />
 </template>
 
 <script lang="ts">
@@ -20,7 +20,7 @@
 
   const props = defineProps({
     modelValue: Number,
-    disabled: Boolean
+    disabled: Boolean,
   });
 
   const emits = defineEmits(['update:modelValue']);

orion-ops-ui/src/views/system/menu/index.vue

@@ -4,7 +4,7 @@
     <menu-table ref="table"
                 @openAdd="(e) => modal.openAdd(e)"
                 @openUpdate="(e) => modal.openUpdate(e)" />
-    <!-- 添加修改框 -->
+    <!-- 添加修改模态框 -->
     <menu-form-modal ref="modal"
                      @added="() => table.addedCallback()"
                      @updated="() => table.updatedCallback()" />