feat: router/layout example

README.md

@@ -4,7 +4,7 @@
 
 # 后台管理系统的前端解决方案
 
-[在线预览](https://template.react-antd-console.site) | [个人pro版在线预览](https://react-antd-console.site) | [文档](https://doc.react-antd-console.site)
+[在线预览](https://template.react-antd-console.site) | [拓展pro版在线预览](https://react-antd-console.site) | [文档](https://doc.react-antd-console.site)
 
 <p align="center">
   <img width="100%" src="https://static.react-antd-console.site/template.png">
@@ -64,9 +64,9 @@ npm run build:prod
 
 ## Pro edition
 
-本项目作为基础模板，是通用的。下面是根据本项目模板拓展出来的个人pro版本（未完待续），如果你认为哪些功能是通用的，有必要放进模板中，可以提出意见和建议，我们根据实际情况考虑放进去
+本项目作为基础模板，是通用的。下面是根据本项目模板拓展出来的拓展pro版本（未完待续），如果你认为哪些功能是通用的，有必要放进模板中，可以提出意见和建议，我们根据实际情况考虑放进去
 
-[个人pro版本预览](https://react-antd-console.site)
+[拓展pro版在线预览](https://react-antd-console.site)
 
 ### 深/浅色主题
 
@@ -102,4 +102,4 @@ npm run build:prod
 
 <img width="100%" src="https://static.react-antd-console.site/theme-config.png">
 
-[在线预览](https://template.react-antd-console.site) | [个人pro版在线预览](https://react-antd-console.site) | [文档](https://doc.react-antd-console.site)
+[在线预览](https://template.react-antd-console.site) | [拓展pro版在线预览](https://react-antd-console.site) | [文档](https://doc.react-antd-console.site)

docs/.vitepress/config.ts

@@ -15,7 +15,8 @@ export default withMermaid({
     nav: [
       { text: '主页', link: '/' },
       { text: '文档', link: '/guide/what' },
-      { text: '在线预览', link: 'https://react-antd-console.site' }
+      { text: '在线预览', link: 'https://template.react-antd-console.site' },
+      { text: '拓展pro版在线预览', link: 'https://react-antd-console.site' }
     ],
 
     sidebar: [

docs/index.md

@@ -13,6 +13,9 @@ hero:
       link: /guide/what
     - theme: alt
       text: 在线预览
+      link: https://template.react-antd-console.site
+    - theme: alt
+      text: 拓展pro版在线预览
       link: https://react-antd-console.site
 
 features:

package.json

@@ -13,6 +13,7 @@
   "types": "./dist-lib/react-antd-console.d.ts",
   "scripts": {
     "start": "vite --mode localhost",
+    "start:force": "vite --force --mode localhost",
     "build:dev": "vite build --mode dev",
     "build:test": "vite build --mode test",
     "build:uat": "vite build --mode uat",
@@ -46,7 +47,7 @@
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^15.0.2",
     "react-router-dom": "^6.26.2",
-    "react-router-toolset": "^0.0.2",
+    "react-router-toolset": "^0.0.5",
     "react-use": "^17.5.1",
     "store2": "^2.14.3"
   },

src/App.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 import '@/styles/index.less';
 
 function App() {
-  const { curRoute } = useRouter(router);
-  const element = useRoutes(router.reactRoutes);
+  const { curRoute, reactRoutes } = useRouter(router);
+  const element = useRoutes(reactRoutes);
   const { t: t_menu } = useTranslation('menu');
 
   return (

src/components/Back/index.less

@@ -0,0 +1,18 @@
+.console__back {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 16px;
+  .ant-divider {
+    margin-inline: 16px;
+  }
+}
+
+.console__back-icon {
+  margin-right: 4px;
+}
+
+.console__back-action {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}

src/components/Back/index.tsx

@@ -0,0 +1,41 @@
+import { Divider } from 'antd';
+import { history } from '@/router';
+import { useTranslation } from 'react-i18next';
+import { FC } from 'react';
+import SvgIcon from '@/components/SvgIcon';
+import './index.less';
+
+interface Props {
+  title?: string;
+  backUrl?: string;
+}
+
+/**
+ * 页面返回
+ */
+const Back: FC<Props> = ({ title, backUrl }) => {
+  const { t: t_components } = useTranslation('components');
+
+  function onClickBack() {
+    if (backUrl) {
+      history.push(backUrl);
+    } else {
+      history.back();
+    }
+  }
+
+  return (
+    <div className="console__back">
+      <span className="console__back-action" onClick={onClickBack}>
+        <SvgIcon className="console__back-icon" name="back" />
+        {t_components('返回')}
+      </span>
+      {title && <>
+        <Divider type="vertical" orientationMargin={60} />
+        <h3>{title}</h3>
+      </>}
+    </div>
+  );
+};
+
+export default Back;

src/layouts/Footer/index.less

@@ -5,6 +5,7 @@
   align-items: center;
   height: 60px;
   background-color: #fff;
+  border-top: 1px solid #0505050f;
   .anticon, svg {
     margin: 0 4px;
   }

src/layouts/SideMenu/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Menu } from 'antd';
-import router from '@/router';
+import router, { useRouter } from '@/router';
 import { history } from '@/router';
 import type { MenuInfo } from 'rc-menu/lib/interface.d';
 import { useMenuStatus } from './hooks';
@@ -9,21 +9,22 @@ import { baseModel } from '@/models/base';
 import { withAuthModel } from '@/models/withAuth';
 import { useModel } from '@zhangsai/model';
 import { generateMenuItems } from './utils';
-import { logo } from '@/consts';
 import SvgIcon from '@/components/SvgIcon';
 import './index.less';
 
 /**
  * Layout菜单
  */
 const SideMenu = () => {
+  const logo = useModel(baseModel, 'logo');
   const permissions = useModel(withAuthModel, 'permissions');
   const language = useModel(baseModel, 'language');
+  const { routes, flattenRoutes } = useRouter(router);
   /** 根据权限和语言生成菜单数据 */
   const menuItems = useMemo(() => {
-    return generateMenuItems(router.routes, permissions);
+    return generateMenuItems(routes, permissions);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [permissions, language, router.routes]);
+  }, [permissions, language, routes]);
   /** 展开菜单 */
   const [collapsed, setCollapsed] = useState(false);
 
@@ -34,10 +35,16 @@ const SideMenu = () => {
   } = useMenuStatus();
 
   function onClickMenuItem(info: MenuInfo) {
-    const { key, keyPath } = info;
-    setOpenKeys(keyPath.slice(1));
-    setSelectedKeys([key]);
-    history.push(router.getPathname(key));
+    const { key } = info;
+    const clickingRoute = flattenRoutes.get(key);
+    if (clickingRoute?.external) {
+      window.open(clickingRoute.path);
+    } else {
+      const { key, keyPath } = info;
+      setOpenKeys(keyPath.slice(1));
+      setSelectedKeys([key]);
+      history.push(router.getPathname(key));
+    }
   }
 
   function onOpenChange(_openKeys: string[]) {

src/layouts/SideMenu/utils.ts

@@ -7,6 +7,7 @@ export interface ItemType extends MenuItemType {
   title?: string;
   children?: ItemType[];
   parent?: ItemType;
+  external?: boolean;
   popupClassName?: string;
 }
 
@@ -16,7 +17,7 @@ export interface ItemType extends MenuItemType {
 export function generateMenuItems(_routes: RouteConfig[], _permissions: Record<string, boolean>, parent?: ItemType): ItemType[] {
   const ret: ItemType[] = [];
   for (let i = 0; i < _routes.length; i++) {
-    const { collecttedPathname = [], icon, name, hidden, flatten, children, redirect, permission } = _routes[i];
+    const { collecttedPathname = [], icon, name, hidden, flatten, children, redirect, permission, external } = _routes[i];
     if (redirect || (permission && !_permissions?.[permission])) {
       continue;
     }
@@ -30,6 +31,7 @@ export function generateMenuItems(_routes: RouteConfig[], _permissions: Record<s
       label: i18n.t(`menu:${name}`),
       icon,
       parent,
+      external,
       popupClassName: 'side-menu__antd-submenu',
     };
     if (children) {