kn-cli 1.0.44 → 1.0.46

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

@@ -0,0 +1,126 @@
+
+import { Menu } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {useDelay,useLoading} from '@/hooks';
+import ProviderMenu from '@/provider/menu';
+
+
+import styles from './index.less';
+
+const ICON_NAME={
+  'AppstoreOutlined':<AppstoreOutlined />,
+  'MailOutlined':<MailOutlined />,
+  'SettingOutlined':<SettingOutlined />,
+}
+
+
+
+
+const LeftMenu=(props)=>{
+
+  const providerMenu = ProviderMenu.useContainer();
+  const delay = useDelay();
+  const loader = useLoading();
+  const [menus,setMenus] = useState([]);
+  const [openKeys,setOpenKeys] = useState([]);
+  const [selectedKeys,setSelectKeys] = useState([]);
+  const curRoute = useLocation();
+  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;
+  }
+
+
+  window.matchPath=matchPath;
+
+
+  const GET_ROUTE_MENU=(menuList)=>{
+    let groupKeys=[];
+    for(let key in menuList){
+      const menuItem = menuList[key];
+      const {path,routeTemplate}= menuItem.source;
+      if(path){
+        let fn = matchPath;
+        let match= fn(routeTemplate||path,curRoute.pathname);
+        if(match){
+          groupKeys = menuItem.routepath?menuItem.routepath.split('-'):'';
+        }
+      }
+    }
+    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);
+  }
+
+  useEffect(()=>{
+    loadMenu();
+  },[providerMenu])
+
+  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);
+    }
+  }
+  const onOpenChange=(keys)=>{
+    setOpenKeys(keys);
+  }
+  return (
+    <section className={styles.nav}>
+      <Menu
+        theme='dark'
+        selectedKeys={selectedKeys}
+        openKeys={openKeys}
+        onOpenChange={onOpenChange}
+        onClick={onClickMenuItem}
+        mode="inline"
+        items={loader.loading?[]:menus}
+      />
+    </section>
+  )
+}
+
+export default LeftMenu;

package/templates/template_admin/public/src/components/Menu/index.less

@@ -0,0 +1,19 @@
+@import '~@/_variable.less';
+
+
+.nav{
+  width: var(--nav-width);
+  height:100%;
+  background-color: var(--color-primary-dark);
+  transition: all .2s;
+  z-index: var(--z-nav-mobile);
+  overflow-y: auto;
+  &[data-nav-hide='true']{
+    display: none;
+  }
+  &[data-nav-mode='mobile']{
+    position: fixed;
+    z-index: var(--z-nav-mobile);
+    box-shadow: 0 0 20px #444;
+  }
+}

package/templates/template_admin/public/src/components/Page/PageLoading/index.jsx

@@ -0,0 +1,30 @@
+import React,{useEffect, useState} from 'react';
+import ReactDOM from 'react-dom';
+import CSS from './index.less';
+import Popup from '@/components/Popup';
+import imgLoading from '@/assets/images/loading.svg';
+
+const PageLoading = (props) => {
+  const {visible=true} = props;
+  if(!visible){
+    return '';
+  }
+  return (
+    <div className={CSS.wrap } >
+      <div className={CSS.box} data-show={visible}>
+        <img src={imgLoading} />
+      </div>
+    </div>
+  );
+};
+
+export const ShowPageLoading=(props={canTouch:false})=>{
+  let popup = Popup(()=>{},{cantouch:props.canTouch});
+  ReactDOM.render(
+    <PageLoading visible={true} />,
+    popup.dom
+  );
+  return popup.destory;
+}
+
+export default React.memo(PageLoading);

package/templates/template_admin/public/src/components/Page/PageLoading/index.less

@@ -0,0 +1,29 @@
+.wrap {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+
+  width: 80px;
+  height: 80px;
+  background: rgba(0,0,0,.3);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img{
+    display: block;
+    width:80%;
+  }
+  &[data-show=false]{
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+styles;
+
+const Popup = (reslove,options) => {
+  let rootDom = document.createElement('div');
+  rootDom.className='popup-box';
+  if(options&&options.cantouch)rootDom.setAttribute('data-can-touch','1');
+  if(options&&options.transparent)rootDom.setAttribute('data-transparent','1');
+
+  let destory = (result) => {
+    ReactDOM.unmountComponentAtNode(rootDom);
+    rootDom.parentNode.removeChild(rootDom);
+    if (reslove) reslove(result);
+  };
+  document.body.appendChild(rootDom);
+  return { dom: rootDom, destory };
+};
+
+
+export default Popup;

package/templates/template_admin/public/src/components/Popup/index.less

@@ -0,0 +1,18 @@
+
+
+:global{
+  .popup-box{
+    position: absolute;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    z-index: 99;
+    &[data-transparent]{
+      height:auto;
+    }
+    &[data-can-touch]{
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import React,{useEffect} from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+const toastList=[];
+const runNext=()=>{
+  let props = toastList[0];
+  if(props){
+    const {message,delay,resolve,position}=props;
+    let popup = Popup(resolve,{cantouch:true});
+    ReactDOM.render(
+      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
+      popup.dom
+    );
+  }
+}
+
+const Toast=props=>{
+  const {
+    message,
+    delay=1000*2,
+    destory,
+    position='top'
+  }=props;
+  useEffect(()=>{
+    setTimeout(()=>{
+      destory();
+      toastList.shift();
+      runNext();
+    },delay);
+  },[])
+  const ANITYPE={
+    'center':'animate__slideInDown',
+    'top':'animate__slideInDown',
+    'bottom':'animate__slideInUp'
+  }
+  return (
+    <section className={styles.wrap} data-position={position}>
+      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
+      </div>
+    </section>
+  )
+}
+
+
+const ShowToast=props=>{
+  if(typeof props === 'string'){
+    props = {message:props}
+  }
+  return new Promise((resolve) => {
+    props.resolve = resolve;
+    toastList.push(props);
+    if(toastList.length===1){
+      runNext();
+    }
+  });
+}
+
+export default ShowToast;

package/templates/template_admin/public/src/components/Toast/index.less

@@ -0,0 +1,43 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index:var(--z-toast);
+  &[data-position=top]{
+    justify-content: flex-start;
+    padding-top:80px;
+  }
+  &[data-position=bottom]{
+    justify-content: flex-end;
+    padding-bottom:80px;
+  }
+  .content{
+    min-height:30px;
+    min-width:60px;
+
+    background: rgba(0,0,0,.8);
+    opacity:.8;
+    border-radius: var(--radius-default);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
+
+
+  }
+}

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

@@ -0,0 +1,228 @@
+import React, { useState,useEffect, useRef} from 'react';
+import { matchPath,useLocation,useNavigate } from 'react-router-dom';
+
+
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
+import imgAvatar from '@/assets/images/avatar.png';
+import { Menu,Dropdown } from 'antd'
+import ProviderApp from '@/provider/app';
+import ProviderMenu from '@/provider/menu';
+import styles from './index.less';
+import {GET_MENU} from '@/services/auth';
+
+
+
+
+/**
+ * 顶部导航栏
+ * 左侧导航栏的路由也继顶部导航栏来控制
+ * 路由数据结构：
+ *  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 
+ */
+const TopMenu=(props)=>{
+  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 transServicesMenuChildren=(menu)=>{
+    let req=[];
+    for(let i=0;i<menu.length;i++){
+      let item= menu[i];
+      const {url:path,name:label,icon,children:menus}= item;
+      let children;
+      if(menus&&menus.length>0){
+        children= transServicesMenuChildren(menus);
+      }
+      req.push({
+        path,label,icon,children
+      })
+    }
+    return req;
+  }
+  const loadMenu=async ()=>{
+    const isLogin= await app.isLogin();
+    if(!isLogin){
+      navigate('/login')
+      return;
+    }
+    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} = menu;
+    const children = menu.children||menu.menus||null;
+    if(routeTemplate||path){
+      let match= matchPath(routeTemplate||path,curRoute.pathname);
+      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;

package/templates/template_admin/public/src/components/TopMenu/index.less

@@ -0,0 +1,105 @@
+@import '~@/_variable.less';
+
+
+.topMenu{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--topMenu-height);
+  width:100%;
+  z-index:var(--z-top-menu);
+  background-color: var(--color-primary-dark);
+  .left{
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+    width: var(--nav-width);
+    .logo{
+      cursor: pointer;
+      width: 110px;
+      height: 32px;
+      margin-right: 7px;
+      color:white;
+      display: flex;
+      align-items: center;
+      font-size: 32px;
+    }
+    .title {
+      cursor: pointer;
+      color: #fff;
+      font-size: 16px;
+      padding: 0 55px 0 7px;
+      font-weight: var(--weight-Light);
+    }
+  }
+  .center{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex:1;
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    flex:1;
+    justify-content: flex-end;
+    .username{
+      color:white;
+    }
+    .avatar{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin: 0 24px 0 24px;
+    }
+  }   
+
+  .menu:global(.ant-menu){
+    line-height: var(--topMenu-height);
+    background-color: inherit;
+    border-bottom: none;
+    flex:1;
+    // min-width: 100px;
+
+    :global{
+      .ant-menu-item,
+      .ant-menu-item a{
+        color:rgba(104,114,126,1);
+        font-weight: var(--weight-Medium);
+      }
+      .ant-menu-item:hover a,
+      .ant-menu-item:hover,
+      .ant-menu-item-selected a{
+        color: rgba(255,255,255,.8);
+      }
+      .ant-menu-item-selected{
+        color: white;
+      }
+      .ant-menu-item:hover:after,
+      .ant-menu-item-selected:after{
+        border-bottom: 2px solid #fff;
+      }
+      .ant-menu-item{
+        padding: 0 24px;
+      }
+    }
+  }
+}
+.avatarMenu{
+  min-width: 100px;
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  
+  :global(.ant-dropdown-menu-item) {
+    min-width: 100px;
+  }
+}
+
+.navShow{
+  font-size: 26px;
+  cursor: pointer;
+  &:hover{
+    color: var(--color-text-hover);
+  }
+}