kn-cli 1.0.92 → 1.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.92",
+  "version": "1.0.93",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/template_admin/public/index.html

@@ -21,8 +21,11 @@
     var docEl = document.documentElement;
     function setRemUnit(type) {
       let w = Math.max(window.innerWidth, docEl.clientWidth, docEl.offsetWidth);
-      let defaultWidth = 1200;//填入设计稿上的宽度
-      // w = w > defaultWidth ? defaultWidth : w;
+      let defaultWidth = 1440;//填入设计稿上的宽度
+      let minWidth=1200;
+      let maxWidth=1440;
+      w = w < minWidth ? minWidth :w;
+      w = w > maxWidth ? maxWidth :w;
       var rem = w / defaultWidth * 100;
       docEl.style.fontSize = rem + 'px'
     }

package/templates/template_admin/public/src/_antd.less

@@ -1,4 +1,10 @@
 @import '~antd/dist/antd.less';
 
 // 这里可以重写antd的主题样式变量，参考 https://4x.ant.design/docs/react/customize-theme-cn
-@primary-color:#EB437C;
+@primary-color:#EB437C;
+
+:global{
+  .ant-menu-submenu{
+    color:white;
+  }
+}

package/templates/template_admin/public/src/components/menu/index.jsx

@@ -1,11 +1,10 @@
 // @ts-ignore
 import React, { useEffect, useRef, useState } from 'react';
 // @ts-ignore
-import { Menu } from 'antd';
+import { Menu,Badge } from 'antd';
 // @ts-ignore
-import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
-// @ts-ignore
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {useNavigate,} from 'react-router-dom';
+
 
 import {useLoading} from '@/hooks/index';
 import ProviderMenu from '@/provider/menu';
@@ -13,11 +12,6 @@ import ProviderMenu from '@/provider/menu';
 // @ts-ignore
 import styles from './index.less';
 
-const ICON_NAME={
-  'AppstoreOutlined':<AppstoreOutlined />,
-  'MailOutlined':<MailOutlined />,
-  'SettingOutlined':<SettingOutlined />,
-}
 
 
 
@@ -28,113 +22,66 @@ const ICON_NAME={
  */
 const LeftMenu=()=>{
 
+  
   const providerMenu = ProviderMenu.useContainer();
   const loader = useLoading();
   const [menus,setMenus] = useState([]);
-  const [openKeys,setOpenKeys] = useState([]);
-  const [selectedKeys,setSelectKeys] = useState([]);
-  const curRoute = useLocation();
+  const [subMenuOpen,setSubMenuOpen]= useState([]);
   const nav = useNavigate();
-
-  const MENU_KEY_COUNTER=useRef(1);
-  const MENU_KEY=useRef({});
-  const translateMenu=(data={},parent)=>{
-    const {label,icon,children,path}= data;
-    let myKey = `${MENU_KEY_COUNTER.current}`
-    let item ={
-      key:myKey,
-      label:`${label}`,
-      source:data,
-      path,
-      routepath:parent?`${parent.key}-${myKey}`:myKey
-    } 
-    MENU_KEY.current[myKey] = item;
-    MENU_KEY_COUNTER.current++;
-    if(icon){
-      item.icon= ICON_NAME[icon];
-    }
-    if(children){
-      item.children = children.map(childData=>{
-        return translateMenu(childData,item)
-      })
-    }
-    return item;
-  }
-
-  // @ts-ignore
-  window.matchPath=matchPath;
-
-
-  const GET_ROUTE_MENU=(menuList)=>{
-    let groupKeys=[];
-    for(let key in menuList){
-      const menuItem = menuList[key];
-      const {path,routeTemplate,subRoute}= menuItem.source;
-      if(path){
-        let fn = matchPath;
-        let match= fn(routeTemplate||path,curRoute.pathname);
-        if(!match&&subRoute){
-          match= subRoute.some(sub=>{
-            let subMatch= fn(sub.routeTemplate||sub.path,curRoute.pathname);
-            if(subMatch){
-              return true;
-            }
-            return false;
-          })
-        }
-        if(match){
-          groupKeys = menuItem.routepath?menuItem.routepath.split('-'):'';
-        }
+  
+  const translateMenu=(list)=>{
+    if(!list||list.length<=0)return [];
+    let req=list.map(menu=>{
+      const {key,name:label,icon,url,msgCount}=menu;
+
+      let item={
+        key,label,icon,url
       }
-    }
-    return groupKeys;
-  }
-
-  const loadMenu=  ()=>{
-    loader.setLoading(true);
-    if(providerMenu.menus){
-      const menuList= providerMenu.menus.map(menu=>{
-        return translateMenu(menu)
-      })
-      setMenus(menuList);
-    }else{
-      setMenus([]);
-    }
-    loader.setLoading(false);
+      if(msgCount&&msgCount>0){
+        item.label=<span>{label}<Badge size='small' count={msgCount} offset={[5,-5]} /></span>
+      }
+      if(menu.children){
+        item.children = translateMenu(menu.children)
+      }
+      return item;
+    })
+    return req;
   }
 
   useEffect(()=>{
-    loadMenu();
-  },[providerMenu])
+    let menuList = translateMenu(providerMenu.leftMenu);
+    setMenus(menuList);
+  },[providerMenu.leftMenu])
 
-  useEffect(()=>{
-    let groupKeys= GET_ROUTE_MENU(MENU_KEY.current);
-    setOpenKeys(groupKeys);
-    let selectKey =groupKeys[groupKeys.length-1];
-    setSelectKeys([selectKey])
-  },[curRoute,menus]);
 
   const onClickMenuItem=(e)=>{
     const { item, key, keyPath, domEvent } = e;
-    const menuData = MENU_KEY.current[key];
-    if(menuData.path){
-      nav(menuData.path);
-    }
+    let menu = providerMenu.findMenuData(key);
+    nav(menu.url);
   }
-  const onOpenChange=(keys)=>{
-    setOpenKeys(keys);
+
+  const onOpenSubMenu=(keys)=>{
+    setSubMenuOpen(keys)
   }
+  useEffect(()=>{
+    if(providerMenu.selectMenus.keys && providerMenu.selectMenus.keys.length>0){
+      setSubMenuOpen([...subMenuOpen,...providerMenu.selectMenus.keys]);
+    }
+  },[providerMenu.selectMenus.keys])
   return (
     <section className={styles.nav}>
-      <Menu
-        theme='dark'
-        selectedKeys={selectedKeys}
-        openKeys={openKeys}
-        onOpenChange={onOpenChange}
-        onClick={onClickMenuItem}
-        mode="inline"
-        items={loader.loading?[]:menus}
-      />
+      {
+        providerMenu.selectMenus.keys&&
+        <Menu
+          theme='dark'
+          openKeys={subMenuOpen}
+          onOpenChange={onOpenSubMenu}
+          selectedKeys={providerMenu.selectMenus.keys}
+          onClick={onClickMenuItem}
+          mode="inline"
+          items={loader.loading?[]:menus}
+        />
+      }
     </section>
   )
 }

package/templates/template_admin/public/src/components/menu/topMenu/index.jsx

@@ -0,0 +1,119 @@
+// @ts-ignore
+import React, { useState,useEffect, useRef} from 'react';
+// @ts-ignore
+import { useLocation,useNavigate } from 'react-router-dom';
+// @ts-ignore
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
+// @ts-ignore
+import { Menu,Dropdown,Badge } from 'antd';
+
+import ProviderApp from '@/provider/app';
+import ProviderMenu from '@/provider/menu';
+
+// @ts-ignore
+import imgAvatar from '@/assets/images/avatar.png';
+// @ts-ignore
+import styles from './index.less';
+
+const TopMenu=()=>{
+  const app = ProviderApp.useContainer();
+  const providerMenu = ProviderMenu.useContainer();
+  const navigate = useNavigate();
+
+  const [menus,setMenus]=useState([]);
+  
+    
+  const translateMenu=(list)=>{
+    if(!list||list.length<=0)return [];
+    let req=list.map(menu=>{
+      const {key,name:label,icon,url,msgCount}=menu;
+
+      let item={
+        key,label,icon,url
+      }
+      if(msgCount&&msgCount>0){
+        item.label=<span>{label}<Badge size='small' count={msgCount} offset={[5,-5]} /></span>
+      }
+      if(menu.children){
+        item.children = translateMenu(menu.children)
+      }
+      return item;
+    })
+    return req;
+  }
+
+  const reload= async ()=>{
+    providerMenu.reload();
+  }
+  useEffect(()=>{
+    let menuList = translateMenu(providerMenu.topMenu);
+    menuList.forEach(menu=>{
+      menu.children=null;//顶级菜单这里设计为不需要展示子菜单
+    })
+    setMenus(menuList);
+  },[providerMenu.topMenu]);
+
+  useEffect(()=>{
+    reload();
+  },[])
+
+
+  // 推出登录
+  const onAvatarClick = (e)=>{
+    if (e?.key === 'logout') {
+      app.logout();
+    }
+  }
+  const onHome=()=>{
+    navigate('/');
+  }
+  const onClickMenuItem=(e)=>{
+    const { item, key, keyPath, domEvent } = e;
+    let menu = providerMenu.findMenuData(key);
+    navigate(menu.url);
+  }
+
+  return (
+    <section className={styles.topMenu}>
+      <div className={styles.left}>
+        <span className={styles.title} onClick={onHome}>后管系统</span>
+      </div>
+      
+      <div className={styles.center}>
+        {
+          menus&&menus.length>1&&
+          <Menu 
+            items={menus}
+            mode="horizontal" 
+            onClick={onClickMenuItem}
+            selectedKeys={providerMenu.selectMenus.keys}
+            className={styles.menu}
+          />
+        }
+      </div>
+      <div className={styles.right}>
+        
+        <span className={styles.username}>Hi,{app?.user?.username||''}!</span>
+        <Dropdown menu={(
+          <Menu onClick={onAvatarClick} className={styles.avatarMenu}>
+            <Menu.Item key="user">
+            <UserOutlined />
+            用户名
+            </Menu.Item>
+            
+            <Menu.Item key="logout">
+              <LogoutOutlined />
+              退出登录
+            </Menu.Item>
+          </Menu>
+        )}>
+          <img className={styles.avatar} src={imgAvatar}/>
+        </Dropdown>
+        
+      </div>
+      
+    </section>
+  )
+}
+
+export default TopMenu;

package/templates/template_admin/public/src/dictionary/index.js

@@ -3,10 +3,13 @@
 import React from 'react';
 // @ts-ignore
 import {useDictionary} from 'kn-hooks';
+// @ts-ignore
+import {Select,Radio} from 'antd';
 
 import {GET_USER_TYPE} from '@/services/user';
 import ShowToast from '@/components/toast';
 
+
 export const SelectOption=(props)=>{
   const {value}=props;
   const name = props['data-keyname'];
@@ -18,7 +21,7 @@ export const SelectOption=(props)=>{
   return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
 }
 
-useDictionary.SetConfig({SelectOption})
+useDictionary.SetConfig({SelectOption:Select.Option, RadioOption: Radio })
 
 
 export const useUserType = useDictionary.createDictionary({

package/templates/template_admin/public/src/hooks/index.jsx

@@ -6,6 +6,8 @@ import usePreload from './usePreload';
 import useSearch from './useSearch';
 import useUpdate from './useUpdate';
 import useLoading from './useLoading';
+import useRouteMenu from './useRouteMenu';
+
 // @ts-ignore
 import {usePagination,usePaginationWithForm} from 'kn-hooks';
 
@@ -17,5 +19,6 @@ export {
   usePreload,
   useSearch,
   useUpdate,
-  useLoading
+  useLoading,
+  useRouteMenu
 }

package/templates/template_admin/public/src/hooks/useRouteMenu.jsx

@@ -0,0 +1,232 @@
+
+
+// @ts-ignore
+import React,{ useRef, useState} from 'react';
+// @ts-ignore
+import { matchPath } from 'react-router-dom';
+
+
+/**
+ * 设置菜单属性
+ * @typedef MenuConfig
+ * @property {string} primaryId - 菜单的primaryId值
+ * @property {('msgCount'|'icon'|'name')} key - 需要设置的字段名称
+ * @property {any} value - 字段值
+ */
+
+/**
+ * 菜单项
+ * @typedef RouteMenuItem
+ * @property {string} name - 菜单展示的名称
+ * @property {string|JSX.Element} [icon] - 菜单图标
+ * @property {string} [url] - 菜单的URL地址
+ * @property {string} [routeTemplate] - 菜单的路由模版，用于匹配动态路由
+ * @property {number} [msgCount] - 菜单的未读消息数量
+ * @property {boolean} [hideMenu=false] - 是否为隐藏的菜单，隐藏的菜单不会展示独立菜单，但是会匹配路由
+ * @property {string[]} [auth] - 允许访问该菜单的权限列表
+ * @property {RouteMenuItem[]} [children] - 子菜单
+ * @property {string} [primaryId] - 菜单的唯一ID，如果存在primaryId，则菜单的key同primaryId
+ * @property {string} [key] - 会自动生成的菜单唯一ID，如果菜单配置内存在了primaryId，则会取该id
+ * @property {string} [parentKey] - 父级菜单的key，自动生成的
+ * 
+ */
+
+// const MenuData=[
+//   {
+//     name:'用户中心',
+//     icon:'AppstoreOutlined',
+//     url:'/user',
+//     children:[
+//       {
+//         key:'myAccount',
+//         name:'账号管理',
+//         url:'/user/accouunt',
+//         msgCount:0,
+//       },
+//     ]
+//   },
+//   {
+//     name:'消息中心',
+//     icon:'AppstoreOutlined',
+//     url:'/message',
+//     children:[
+//       {
+//         name:'我的消息',
+//         url:'/message/my',
+//         msgCount:3,
+//         children:[
+//           {
+//             label: '创建消息',
+//             url: '/message/edit/create',
+//             routeTemplate:'/message/edit/:type',
+//             msgCount:0,
+//           },
+//           {
+//             label: '编辑消息',
+//             url: '/message/edit/edit',
+//             routeTemplate:'/message/edit/:type',
+//             msgCount:0,
+//             auth:['super'],
+//           },
+//           {
+//             url:'/message/detail',
+//             hideMenu:true,//是否是隐藏
+//             routeTemplate:'/message/detail/:id',
+//           },
+          
+//         ]
+//       },
+
+//     ]
+//   }
+// ]
+
+
+const useRouteMenu=()=>{
+  /**
+   * @type [RouteMenuItem[], React.Dispatch<React.SetStateAction<RouteMenuItem[]>>]
+   */
+  const [source,setSource]= useState([]);
+
+  /**
+   * @type React.MutableRefObject<number>
+   */
+  const refKey = useRef(1);
+
+  /**
+   * @type React.MutableRefObject<Object<string,RouteMenuItem>>
+   */
+  const refKeyMap = useRef();
+
+  /**
+   * 遍历菜单，给菜单创建key，并创建map表以便快速查找菜单数据
+   * @param {RouteMenuItem[]} data - 菜单列表数据
+   * @param {RouteMenuItem} [parent] - 父级菜单数据,如果没有则代表是顶层菜单
+   */
+  const setSourceMap=(data,parent=null)=>{
+    if(parent==null){
+      // 重置
+      refKey.current=1;
+      refKeyMap.current={};
+    }
+    data.forEach(menu=>{
+      if(menu.primaryId){
+        menu.key = menu.primaryId
+      }else{
+        menu.key=`${refKey.current++}`;
+      }
+      refKeyMap.current[menu.key] = menu;
+
+      if(parent){
+        menu.parentKey = parent.key;
+      }
+      if(menu.children && menu.children.length>0){
+        setSourceMap(menu.children,menu);
+      }
+    });
+    if(parent==null){
+      setSource([...data]);
+    }
+
+  }
+
+  /**
+   * 获取当前菜单数据，用于渲染
+   * 会将没权限的菜单、隐藏菜单过滤掉
+   * @param {RouteMenuItem[]} menus - 需要被检查的菜单列表
+   * @param {string[]} userAuth - 用户当前的权限列表
+   * @returns {RouteMenuItem[]}
+   */
+  const getMenu=(menus=source, userAuth=[])=>{
+    const list = [];
+    menus.forEach(menu=>{
+      let auth= true;
+      // 判断用户有没有权限可以访问这个菜单
+      if(menu.auth){
+        if(menu.auth.some(menuAuthName=>userAuth.includes(menuAuthName)) == false){
+          auth=false;
+        }
+      }
+      // 隐藏的菜单
+      if(menu.hideMenu){
+        auth=false;
+      }
+
+      // 只有当前菜单有权限的前提下，才可以继续遍历子菜单查询子菜单是否有权限
+      if(auth){
+        const item= {...menu};
+        if(item.children&&item.children.length>0){
+          const chidList= getMenu(item.children, userAuth);
+          item.children = chidList.length>0?chidList:null;
+        }
+        list.push(item)
+      }
+    });
+    if(menus == source){
+      console.warn('[useRouteMenu]getMenu:',list)
+    }
+    return list
+  }
+
+  /**
+   * 计算pathname路由路径下的菜单路径
+   * @param {string} pathname - 需要匹配的路由路径
+   * @returns {RouteMenuItem[]}
+   */
+  const getOpenMenus=(pathname='/')=>{
+    /** @type RouteMenuItem */
+    let matchMenu;
+    for(const menuKeyName in refKeyMap.current){
+      const menu= refKeyMap.current[menuKeyName];
+      if( matchPath(menu.routeTemplate||menu.url, pathname)  ){
+        matchMenu = menu;
+        break;
+      }
+    }
+
+    const getParentMenus = (menu,menus=[])=>{
+      menus.push(menu);
+      if(menu.parentKey){
+        return getParentMenus( refKeyMap.current[menu.parentKey],menus );
+      }
+      return menus;
+    }
+    if(matchMenu){
+      const menus= getParentMenus(matchMenu);
+      console.warn(`[useRouteMenu]openMenus:`,menus)
+      return menus;
+    }
+    return [];
+  }
+
+  /**
+   * 根据menu的key来查找menu数据
+   * @param {string} menuKey - 菜单的key
+   * @returns {RouteMenuItem}
+   */
+  const findMenuData= (menuKey)=>{
+    return refKeyMap.current[menuKey]
+  }
+
+  /**
+   * 设置菜单的属性
+   * @param {MenuConfig[]} params 
+   */
+  const setMenuConfig=(params)=>{
+
+    params.forEach(param=>{
+      const {primaryId,key,value}= param;
+      const menu = refKeyMap.current[primaryId];
+      if(menu){
+        // @ts-ignore
+        menu[`${key}`] = value;
+      }
+    })
+    setSource([...source])
+  }
+
+  return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig}
+}
+
+export default useRouteMenu;
+

package/templates/template_admin/public/src/provider/menu.jsx

@@ -1,22 +1,273 @@
 // @ts-ignore
-import React,{  useState,useMemo } from 'react';
+import React,{  useState,useMemo, useEffect } from 'react';
+// @ts-ignore
+import { useLocation } from 'react-router-dom';
 // @ts-ignore
 import { createContainer } from "unstated-next"
 
-import {GET_MENU} from '@/services/auth';
+import useRouteMenu from '@/hooks/useRouteMenu';
+
+
+// @ts-ignore
+import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
+
+const MenuRoute=[
+  {
+    name:'常用管理',
+    url:'/',
+    children:[
+      {
+        name:'内容管理',
+        icon:<AppstoreOutlined />,
+        url:'/content',
+        children:[
+          {name:'剧集管理',url:'/content/video'},
+          {name:'素材管理',url:'/content/material'},
+        ]
+
+      },
+      {
+        name:'数据管理',
+        icon:<MailOutlined />,
+        url:'/data',
+        children:[
+          {primaryId:'orderData',name:'订单数据',msgCount:3,url:'/data/order'},
+          {name:'用户数据',url:'/data/userData'},
+        ]
+      },
+      {
+        name:'用户管理',
+        url:'/user',
+        children:[
+          {name:'账户管理',url:'/user/user'},
+          {name:'客诉管理',url:'/user/suggest'},
+        ]
+      },
+    ]
+  },
+  {
+    name:'权限管理',
+    url:'/auth',
+    children:[
+      {
+        name:'权限设置',
+        icon:<AppstoreOutlined />,
+        url:'/auth/config',
+        children:[
+          {name:'角色配置',url:'/auth/config/permission'},
+        ]
+      },
+    ]
+  }
+]
+
+const MenuRoute2=[
+  {
+    name:'数据管理',
+    icon:'AppstoreOutlined',
+    url:'/order',
+    auth:['super'],
+    children:[
+      {
+        name:'数据管理',
+        // icon:'AppstoreOutlined',
+        url:'/order',
+        // children:[
+        //   {name:'剧集管理',url:'/video'},
+        //   {name:'素材管理',url:'/material'},
+        // ]
+
+      },
+    ]
+  },
+  {
+    name:'手机管理',
+    url:'/device',
+    icon:'AppstoreOutlined',
+    children:[]
+  },
+  {
+    name:'服务设置',
+    url:'/service',
+    icon:'AppstoreOutlined',
+    children:[
+      {
+        name:'账号管理',
+        url:'/service/account'
+      },
+      // {
+      //   name:'账号健康设置',
+      //   url:'/service/accountHealth'
+      // },
+      // {
+      //   name:'排班管理',
+      //   url:'/service/workforce'
+      // },
+      // {
+      //   name:'表单设置',
+      //   url:'/service/workforce'
+      // },
+
+    ]
+
+  },
+  {
+    name:'内容管理',
+    url:'/video',
+    icon:'AppstoreOutlined',
+    children:[
+      {
+        name:'内容管理',
+        url:'/video',
+        // children:[
+        //   {name:'剧集管理',url:'/video'},
+        //   {name:'素材管理',url:'/material'},
+        // ]
+
+      },
+      // {
+      //   name:'数据管理',
+      //   icon:'AppstoreOutlined',
+      //   children:[
+      //     {name:'订单数据',url:'/order'},
+      //     {name:'用户数据',url:'/userData'},
+      //   ]
+      // },
+      // {
+      //   name:'用户管理',
+      //   icon:'UserOutlined',
+      //   url:'/user'
+      // },
+      // {
+      //   name:'客诉管理',
+      //   icon:'CustomerServiceOutlined',
+      //   url:'/suggest'
+      // },
+      // {
+      //   name:'权限配置',
+      //   icon:'CrownOutlined',
+      //   url:'/permission'
+      // },
+    ]
+  },
+  {
+    name: '权限设置',
+    url: '/authUser',
+    icon: 'AppstoreOutlined',
+    children: [
+      {
+        name: '用户管理',
+        url: '/authUser',
+      },
+      {
+        name: '角色管理',
+        url: '/authRole',
+      },
+      {
+        name: '用户组',
+        url: '/authUserGroup',
+      },
+    ]
+  },
+  {
+    name:'消息中心',
+    url:'/message',
+    icon:'AppstoreOutlined',
+    children:[
+      {
+        primaryId:'myMessage',
+        name:'我的消息',
+        // msgCount:MSG_COUNT++,
+        url:'/message/my',
+      },
+      {
+        name:'消息设置',
+        url:'/message/config',
+        children:[
+          {
+            name:'消息查询-2',
+            url:'/message/config/2',
+          },
+          {
+            name:'消息查询-3',
+            url:'/message/config/3',
+          },
+        ]
+      },
+      {
+        name:'消息查询',
+        url:'/message/query',
+        children:[
+          {
+            name:'消息查询-设置',
+            hideMenu:true,
+            routeTemplate:'/message/query/:type',
+          },
+        ]
+      },
+
+    ]
+
+  },
+]
+
 
 const useProvider=() =>{
-  const [menus,setMenus]= useState([]);
 
-  const reload= async ()=>{
-    await GET_MENU();
+  const routeMenu = useRouteMenu();
+
+  const curLocation =useLocation();
+
+  const [topMenu,setTopMenu]=useState([]);
+  const [leftMenu,setLeftMenu]=useState([]);
+
+  const [selectMenus,setSelectMenus] = useState({menus:[],keys:[]});
+
+  
+  const reload = async ()=>{
+    routeMenu.setSourceMap([...MenuRoute]);
+  }
+  const getTopMenu=(userAuth=[])=>{
+    const list = routeMenu.getMenu(routeMenu.source,userAuth);
+    setTopMenu(list||[]);
   }
-  const action=useMemo(()=>{
-    return {
-      menus,setMenus
+  const getLeftMenu=(userAuth=[])=>{
+    const list = routeMenu.getMenu(routeMenu.source,userAuth);
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+
+    const req= list.filter(menu=>{
+      return menus.some(openMenu=>openMenu.key==menu.key)
+    })
+    
+    let subs=[];
+    if(req && req[0]){
+      subs=req[0].children||[];
     }
-  },[menus,setMenus]);
-  return action
+    setLeftMenu(subs);
+  }
+
+  const findMenuData=(menuKey)=>{
+    return routeMenu.findMenuData(menuKey);
+
+  }
+  const setMenuConfig=(params)=>{
+    routeMenu.setMenuConfig(params);
+  }
+
+  useEffect(()=>{
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+    let keys=menus.map(item=>item.key);
+    setSelectMenus({menus,keys});
+  },[curLocation,routeMenu.source]);
+
+  useEffect(()=>{
+    getTopMenu();
+    getLeftMenu();
+  },[routeMenu.source,curLocation])
+
+
+
+  return {leftMenu,topMenu,reload,selectMenus,findMenuData,setMenuConfig}
 }
 const App = createContainer(useProvider);
 

package/templates/template_admin/public/src/route.jsx

@@ -10,7 +10,7 @@ import PageLoading from '@/components/page/pageLoading';
 import Login from '@/pages/login';
 import {AuthLogin} from '@/components/auth';
 import LeftMenu from '@/components/menu';
-import TopMenu from '@/components/topMenu';
+import TopMenu from '@/components/menu/topMenu';
 
 import ProviderMenu from '@/provider/menu';
 
@@ -54,14 +54,23 @@ export const RouteList = (
           </ProviderMenu.Provider>
         }
       >
-        <Route path='/' element={<Navigate to="/video"></Navigate> } />
-        <Route path='/video' element={<Video />} />
-        <Route path='/suggest' element={<Suggest />} />
-        <Route path='/order' element={<Order />} />
-        <Route path='/permission' element={<Permission />} />
-        <Route path='/material' element={<Material />} />
-        <Route path='/user' element={<User />} />
-        <Route path='/userData' element={<UserData />} />
+        <Route path='/' element={<Navigate to="/content/video"></Navigate> } />
+        <Route path='/content/video' element={<Video />} />
+        <Route path='/content/material' element={<Material />} />
+
+
+        <Route path='/data' element={<Navigate to="/data/order"></Navigate> } />
+        <Route path='/data/order' element={<Order />} />
+        <Route path='/data/userData' element={<UserData />} />
+
+        <Route path='/user' element={<Navigate to="/user/user"></Navigate> } />
+        <Route path='/user/user' element={<User />} />
+        <Route path='/user/suggest' element={<Suggest />} />
+
+        <Route path='/auth' element={<Navigate to="/auth/config/permission"></Navigate> } />
+        <Route path='/auth/config/permission' element={<Permission />} />
+
+
 
       </Route>
     </Route>

package/templates/template_admin/public/src/components/topMenu/index.jsx

@@ -1,267 +0,0 @@
-// @ts-ignore
-import React, { useState,useEffect, useRef} from 'react';
-// @ts-ignore
-import { matchPath,useLocation,useNavigate } from 'react-router-dom';
-// @ts-ignore
-import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
-// @ts-ignore
-import { Menu,Dropdown } from 'antd';
-
-import ProviderApp from '@/provider/app';
-import ProviderMenu from '@/provider/menu';
-import {GET_MENU} from '@/services/auth';
-
-// @ts-ignore
-import imgAvatar from '@/assets/images/avatar.png';
-// @ts-ignore
-import styles from './index.less';
-
-/**
- * 菜单下的隐藏子路由集
- * 当这些隐藏子路由打开的时候，导航栏的选中菜单会显示被匹配的这个子菜单
- */
-const SUB_MENU_CONFIG=[
-  {
-    path:'/video',//匹配菜单路由是/video的菜单
-    // routeTemplate:''匹配某个模板菜单的模板
-    subRoute:[
-      {
-        path:'/video/detail',//将video/detail这个路由匹配给菜单/video
-        // routeTemplate:''//也可以将某个路由模板匹配给某个菜单
-      }
-    ]
-  },
-]
-
-/**
- * 顶部导航栏
- * 左侧导航栏的路由也继顶部导航栏来控制
- * 路由数据结构：
- *  const MenuRoute=[
-    {
-      label:'顶部菜单A',
-      path:'/home/sub/1',
-      menus:[
-        {
-          label:'菜单组A-1',
-          icon:'MailOutlined',
-          children:[
-            {label:'菜单组A-1-home',path:'/',},
-            {label:'菜单组A-1-sub:id',path:'/home/sub/1',routeTemplate:'/home/sub/:id'},
-            {label:'菜单组A-1-sub3:id',path:'/home/sub3/2',routeTemplate:'/home/sub3/:id'},
-          ]
-        },
-      ]
-    }
-  ]
-  顶部的导航栏结构为{label,path,menus}
-  左侧导航栏数据为顶部导航栏数据的menus内子项{label,icon,children}组成
-  routeTemplate用来识别动态参数的路由，同前端本地路由配置同步即可
-  当顶部导航栏只有一项时，将自动隐藏顶部导航菜单
- * @returns {JSX.Element}
- */
-const TopMenu=()=>{
-  const app = ProviderApp.useContainer();
-  const providerMenu = ProviderMenu.useContainer();
-  const curRoute = useLocation();
-
-  const [menus,setMenus]=useState([]);
-  const navigate = useNavigate();
-  const [selectedKeys,setSelectedKeys] = useState([]);
-
-
-  const MENU_KEY_COUNTER=useRef(1);
-  const MENU_KEY=useRef({})
-  const translateMenu=(data={})=>{
-    const {label,path}= data;
-    let myKey = `${MENU_KEY_COUNTER.current}`
-    let item ={
-      key:myKey,
-      label:`${label}`,
-      path,
-      source:data,
-    } 
-    MENU_KEY.current[myKey] = item;
-    MENU_KEY_COUNTER.current++;
-    return item;
-  }
-
-  const getSubConfig=(menu)=>{
-    const {url,routeTemplate}= menu;
-    for(let i=0;i<SUB_MENU_CONFIG.length;i++){
-      let sub= SUB_MENU_CONFIG[i];
-      if(routeTemplate&&sub.routeTemplate&&routeTemplate==sub.routeTemplate){
-        return sub.subRoute;
-      }
-      if(url&&sub.path&&url==sub.path){
-        return sub.subRoute;
-      }
-    }
-    return null;
-  }
-  const transServicesMenuChildren=(menu)=>{
-    let req=[];
-    for(let i=0;i<menu.length;i++){
-      let item= menu[i];
-      const {url:path,name:label,icon,children:menus,routeTemplate}= item;
-      let children;
-      if(menus&&menus.length>0){
-        children= transServicesMenuChildren(menus);
-      }
-      let subRoute= getSubConfig(item);
-      req.push({
-        path,label,icon,children,routeTemplate,subRoute
-      })
-    }
-    return req;
-  }
-  const loadMenu=async ()=>{
-    let reqMenu = await GET_MENU();
-    if(reqMenu?.code==0){
-      let originMenu= reqMenu.data;
-      reqMenu=[];
-      for(let i=0;i<originMenu.length;i++){
-        let topMenu= originMenu[i];
-        const {url:path,children,name:label}=topMenu;
-        const menus = transServicesMenuChildren(children);
-        reqMenu.push({
-          path,menus,label
-        })
-      }
-    }
-    if(!reqMenu){
-      setMenus([]);
-      return;
-    }
-    const data = reqMenu.map(topMenu=>{
-      return translateMenu(topMenu);
-    })
-    setMenus(data);    
-  }
-
-  const GET_ROUTE_MENU=(menu)=>{
-    const {routeTemplate,path,subRoute} = menu;
-    const children = menu.children||menu.menus||null;
-    if(routeTemplate||path){
-      let match= matchPath(routeTemplate||path,curRoute.pathname);
-      if(!match&&subRoute){
-        match= subRoute.some(sub=>{
-          let subMatch= matchPath(sub.routeTemplate||sub.path,curRoute.pathname);
-          if(subMatch){
-            console.log(`match sub route: ${sub.routeTemplate||sub.path} -> ${curRoute.pathname}` )
-            return true;
-          }
-          return false;
-        });
-      }
-      if(match){
-        console.log(`match route: ${routeTemplate||path} -> ${curRoute.pathname}` )
-        return true;
-      }
-    }
-    if(children){
-      for(let subMenu of children){
-        let match = GET_ROUTE_MENU(subMenu);
-        if(match){
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  const reloadOpenMenu=()=>{
-    for(let menuKey in MENU_KEY.current){
-      const topMenu = MENU_KEY.current[menuKey];
-      const match= GET_ROUTE_MENU(topMenu.source);
-      if(match){
-        let changeLeftMenu=false;//是否重新设置左侧导航菜单数据
-        if(selectedKeys[0] != menuKey){
-          changeLeftMenu= true;
-        }
-        if(!providerMenu.menus||providerMenu.menus.length<=0){
-          changeLeftMenu= true;
-        }
-        setSelectedKeys([menuKey]);
-        if(changeLeftMenu){
-          providerMenu.setMenus(topMenu.source.menus);
-        }
-        return;
-      }
-    }
-    setSelectedKeys([]);
-    providerMenu.setMenus([]);
-  }
-  useEffect(()=>{loadMenu()},[]);
-
-  useEffect(()=>{
-    reloadOpenMenu();
-  },[curRoute,menus]);
-
-
-
-  // 推出登录
-  const onAvatarClick = (e)=>{
-    if (e?.key === 'logout') {
-      app.logout();
-    }
-  }
-  const onHome=()=>{
-    navigate('/');
-  }
-  const onClickMenuItem=(e)=>{
-    const { item, key, keyPath, domEvent } = e;
-    const menuData = MENU_KEY.current[key];
-    const {path,source:{menus}} = menuData;
-    providerMenu.setMenus(menus);
-    if(path){
-      navigate(path)
-    }
-    setSelectedKeys([key])
-  }
-
-  return (
-    <section className={styles.topMenu}>
-      <div className={styles.left}>
-        <span className={styles.title} onClick={onHome}>后管系统</span>
-      </div>
-      
-      <div className={styles.center}>
-        {
-          menus&&menus.length>1&&
-          <Menu 
-            items={menus}
-            mode="horizontal" 
-            onClick={onClickMenuItem}
-
-            selectedKeys={selectedKeys}
-            className={styles.menu}
-          />
-        }
-      </div>
-      <div className={styles.right}>
-        
-        <span className={styles.username}>Hi,{app?.user?.username||''}!</span>
-        <Dropdown overlay={(
-          <Menu onClick={onAvatarClick} className={styles.avatarMenu}>
-            <Menu.Item key="user">
-            <UserOutlined />
-            用户名
-            </Menu.Item>
-            
-            <Menu.Item key="logout">
-              <LogoutOutlined />
-              退出登录
-            </Menu.Item>
-          </Menu>
-        )}>
-          <img className={styles.avatar} src={imgAvatar}/>
-        </Dropdown>
-        
-      </div>
-      
-    </section>
-  )
-}
-
-export default TopMenu;