kn-cli 1.0.92 → 1.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "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/layout/basic/index.less

@@ -17,9 +17,9 @@
     background-color: var(--color-body-background);
     flex:1;
     height:100%;
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
   }
 
 }

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,129 @@
+// @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(()=>{
+    providerMenu.setUserAuth(app.user.authorities||[]);
+  },[app.user])
+  
+  useEffect(()=>{
+    reload();
+  },[])
+
+
+  // 推出登录
+  const onAvatarClick = (key)=>{
+    if (key === 'logout') {
+      app.logout();
+    }else if(key=='relogin'){
+      navigate('/superAdminLogin')
+    }
+  }
+  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={{items:[
+            {
+              key:'user',
+              label:<span onClick={onAvatarClick.bind(this,'user')}><UserOutlined />用户名</span>
+            },
+            {
+              key:'relogin',
+              label:<span onClick={onAvatarClick.bind(this,'relogin')}><UserOutlined />重新登录</span>
+            },
+            {
+              key:'logout',
+              label:<span onClick={onAvatarClick.bind(this,'logout')}><LogoutOutlined />退出登录</span>
+            }
+            
+          ]}}>
+          <img className={styles.avatar} src={imgAvatar}/>
+        </Dropdown>
+        
+      </div>
+      
+    </section>
+  )
+}
+
+export default TopMenu;

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

@@ -0,0 +1,62 @@
+import React,{useCallback} from 'react';
+// @ts-ignore
+import { Table } from 'antd';
+
+/**
+ * 页面公共Table组件
+ * @param {object} [props] 
+ * @param {string} [props.rowKey] - Table主键
+ * @param {boolean} [props.loading] - 是否加载中
+ * @param {Array} [props.columns] - 表格列
+ * @param {Array} [props.dataSource] - 数据数组
+ * @param {object} [props.pagination] - 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
+ * @param {object} [props.scroll] - 表格是否可滚动
+ * @param {object} [props.page] - 表格数据，包括数据数组、分页参数、loading等
+ * 
+ * @returns {JSX.Element}
+ */
+const PageTable = (props) => {
+  const {
+    rowKey,
+    loading,
+    columns,
+    dataSource,
+    pagination,
+    scroll,
+    page,
+    ...others
+  } = props;
+
+  const paginationFn = useCallback(() => {
+    // pagination=false时不分页
+    if (typeof pagination === 'boolean') {
+      return pagination;
+    }
+    return {
+      pageSizeOptions: [10, 15, 20, 50, 100],
+      current: page?.pagination?.current,
+      pageSize: page?.pagination?.pageSize,
+      total: page?.pagination?.total,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+  }, [pagination, page]);
+
+  return (
+    <Table
+      rowKey={rowKey ?? 'id'}
+      bordered
+      size="small"
+      loading={loading ?? page?.loading?.state}
+      columns={columns}
+      dataSource={
+        dataSource ?? (page?.data?.[page?.pagination?.current - 1] || [])
+      }
+      pagination={paginationFn()}
+      scroll={scroll ?? { y: 500 }}
+      {...others}
+    />
+  );
+};
+
+export default PageTable;

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

@@ -3,10 +3,43 @@
 import React from 'react';
 // @ts-ignore
 import {useDictionary} from 'kn-hooks';
+// @ts-ignore
+import {Select,Radio} from 'antd';
+
+import {GET_ENUM_TYPE} from '@/services/demo'
 
-import {GET_USER_TYPE} from '@/services/user';
 import ShowToast from '@/components/toast';
 
+
+
+/**
+ * @typedef DictionaryItem
+ * 字典数据的结构
+ * @property {string} id  - 数据唯一ID
+ * @property {string} name  - 数据唯一id对应的别名
+ * @property {string} label  - 展示给用户看的文字
+ * 
+ */
+
+/**
+ * @typedef UseDictionaryResult
+ * @property {DictionaryItem[]}  types - 字典数据列表
+ * @property {ReactDOM[]} selectOptions - 供Antd渲染\<Select\>的列表
+ * @property {ReactDOM[]} radioOptions - 供Antd渲染\<Radio\>的列表
+ * @property {function}  getId - (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
+ * @property {function}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
+ * @property {function}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
+ * @property {function}  reload - ()=>void,重新调用字典接口刷新字典列表
+ * 
+ */
+
+/**
+ * @callback UseDictionary
+ * @returns {UseDictionaryResult}
+ */
+
+
+
 export const SelectOption=(props)=>{
   const {value}=props;
   const name = props['data-keyname'];
@@ -18,11 +51,11 @@ 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({
-  api:GET_USER_TYPE,
+export const useDemoType = useDictionary.createDictionary({
+  api:GET_ENUM_TYPE,
   afterApi:(response)=>{
     if(response?.code==0){
       let req= response.data.map(item=>{
@@ -42,3 +75,15 @@ export const useTaskState= useDictionary.createDictionary({
   ]
 });
 
+
+/**
+ * 健康状态
+ * @type UseDictionary
+ */
+export const useHealthy= useDictionary.createDictionary({
+  defaultTypes:[
+    {label:'正常',id:'normal',name:'normal'},
+    {label:'异常',id:'abnormal',name:'abnormal'},
+    {label:'禁用',id:'disabled',name:'disabled'},
+  ]
+});

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
 }