feat: blank and frame page init

src/locales/lang/en_US/sys.json

@@ -97,7 +97,11 @@
       "menulevel_2a": "Menu Level 2a",
       "menulevel_2b": "Menu Level 2b",
       "menulevel_3a": "Menu Level 3a",
-      "menulevel_3b": "Menu Level 3b"
+      "menulevel_3b": "Menu Level 3b",
+      "frame": "External",
+      "external_link": "External Link",
+      "iframe": "Iframe",
+      "blank": "Blank"
     }
   }
 }

src/locales/lang/zh_CN/sys.json

@@ -96,7 +96,11 @@
       "menulevel_2a": "菜单 2a",
       "menulevel_2b": "菜单 2b",
       "menulevel_3a": "菜单 3a",
-      "menulevel_3b": "菜单 3b"
+      "menulevel_3b": "菜单 3b",
+      "frame": "外部链接",
+      "external_link": "外链",
+      "iframe": "内嵌",
+      "blank": "空白"
     }
   }
 }

src/pages/sys/iframe/external-link.tsx

@@ -0,0 +1,15 @@
+import { useLayoutEffect } from 'react';
+
+import { useRouter } from '@/router/hooks';
+
+type Props = {
+  to: string;
+};
+export default function ExternalLink({ to }: Props) {
+  const { back } = useRouter();
+  useLayoutEffect(() => {
+    window.open(to, '_black');
+    back();
+  });
+  return <div />;
+}

src/pages/sys/iframe/index.tsx

@@ -0,0 +1,10 @@
+type Props = {
+  src: string;
+};
+export default function Iframe({ src = '' }: Props) {
+  return (
+    <div className="h-full w-full">
+      <iframe src={src} title="iframe-page" className="h-full w-full" />
+    </div>
+  );
+}

src/router/routes/modules/others.tsx

@@ -0,0 +1,49 @@
+import { lazy } from 'react';
+
+import Card from '@/components/card';
+import { SvgIcon } from '@/components/icon';
+
+import { AppRouteObject } from '#/router';
+
+const ExternalLink = lazy(() => import('@/pages/sys/iframe/external-link'));
+const Iframe = lazy(() => import('@/pages/sys/iframe'));
+
+const others: AppRouteObject[] = [
+  {
+    path: 'frame',
+    meta: {
+      title: 'sys.menu.frame',
+      icon: <SvgIcon icon="ic_external" className="ant-menu-item-icon" size="24" />,
+      key: '/frame',
+    },
+    children: [
+      {
+        path: 'external_link',
+        element: <ExternalLink to="https://ant.design/index-cn" />,
+        meta: {
+          title: 'sys.menu.external_link',
+          key: '/frame/external_link',
+        },
+      },
+      {
+        path: 'iframe',
+        element: <Iframe src="https://ant.design/index-cn" />,
+        meta: {
+          title: 'sys.menu.iframe',
+          key: '/frame/iframe',
+        },
+      },
+    ],
+  },
+  {
+    path: 'blank',
+    element: <Card />,
+    meta: {
+      title: 'sys.menu.blank',
+      icon: <SvgIcon icon="ic_blank" className="ant-menu-item-icon" size="24" />,
+      key: '/blank',
+    },
+  },
+];
+
+export default others;

src/router/utils.ts

@@ -8,7 +8,7 @@ import { AppRouteObject, RouteMeta } from '#/router';
 export const menuFilter = (items: AppRouteObject[]) => {
   return items
     .filter((item) => {
-      const show = !item.meta?.hideMenu && item.path;
+      const show = !item.meta?.hideMenu && item.meta?.key;
       if (show && item.children) {
         item.children = menuFilter(item.children);
       }

types/router.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { RouteObject } from 'react-router-dom';
 
 export interface RouteMeta {
-  // unique
+  // antd menu selectedKeys
   key: string;
   title: string;
   icon?: ReactNode;
@@ -14,10 +14,7 @@ export interface RouteMeta {
   auth?: boolean;
 }
 export type AppRouteObject = {
-  index?: boolean;
-  path?: RouteObject['path'];
-  element?: RouteObject['element'];
-  children?: AppRouteObject[];
-  meta?: RouteMeta;
   order?: number;
-};
+  meta?: RouteMeta;
+  children?: AppRouteObject[];
+} & Omit<RouteObject, 'children'>;