kn-cli 1.0.91 → 1.0.93

package/package.json

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

package/readme.md

@@ -140,6 +140,9 @@ report
 
 
 # 更新日志
+* 1.0.92  
+所有模版文件夹首字母大写问题修正  
+
 * 1.0.91  
 创建项目时自动将项目名称设置为当前文件夹的名称  
 模版内doc注释规范化、文件夹首字母大写更正    

package/templates/template_admin/.gitignore

@@ -0,0 +1,6 @@
+**/node_modules
+**/package-lock.json
+**/.DS_Store
+**/dist
+**/release
+

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;
+