kn-cli 1.0.131 → 1.0.133

package/templates/template_admin_antd5/public/src/hooks/useInToView.jsx

@@ -0,0 +1,58 @@
+// @ts-ignore
+import React, { useEffect,useState,useMemo,useRef,useCallback } from 'react';
+
+
+const useInToView=()=>{
+  const [visible,setVisible]= useState(false);
+  const [visibled,setVisibled]= useState(false);
+  const refDom= useRef();
+  const refObserver=useRef();
+
+  const destory=()=>{
+    if(refObserver.current){
+      // @ts-ignore
+      refObserver.current=disconnect();
+      refObserver.current=null;
+    }
+  }
+
+  useEffect(()=>{
+    return ()=>{
+      destory();
+    }
+  },[refObserver]);
+
+  const watch=(dom)=>{
+    let observe;
+    destory();
+    setDom(dom);
+    if(!refDom.current)return;
+    observe = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio <= 0) {
+        setVisible(false);
+        return;
+      }
+      setVisible(true);
+      setVisibled(true);
+    });
+    observe.observe(refDom.current);
+    // @ts-ignore
+    refObserver.current=observe;
+  }
+  const setDom=(dom)=>{
+    if(typeof dom == 'string'){
+      refDom.current = document.querySelector(dom);
+      if(!refDom.current)return;
+    }else{
+      refDom.current= dom;
+    }
+  }
+
+  return {
+    visible,
+    visibled,
+    watch
+  }
+}
+
+export default useInToView;

package/templates/template_admin_antd5/public/src/hooks/useLoading.jsx

@@ -0,0 +1,46 @@
+// @ts-ignore
+import { useRef,useState, useEffect } from 'react';
+
+import {ShowPageLoading} from '@/components/page/pageLoading';
+
+const useLoading=(props={})=>{
+  const {canTouch=false} = props;
+  const [name] = useState(props?.name||'loading')
+  const [count,setCount] = useState(props?.loading?1:0);
+  const refPageLoading = useRef();
+
+  const setLoading=(state)=>{
+    if(state){
+      setCount(v=>v+1);
+    }else{
+      setCount(v=>v-1);
+    }
+  }
+  const reset=()=>{
+    setCount(v=>0);
+  }
+  useEffect(()=>{
+    if(count > 0 ){
+      if(!refPageLoading.current){
+        // @ts-ignore
+        refPageLoading.current = ShowPageLoading({canTouch:canTouch});
+      }
+    }else{
+      if(refPageLoading.current){
+        // @ts-ignore
+        refPageLoading.current();//销毁
+        refPageLoading.current=null;
+      }
+    }
+  },[count])
+
+  
+  return {
+    name,
+    reset,
+    setLoading,
+    loading:count
+  }
+}
+
+export default useLoading;

package/templates/template_admin_antd5/public/src/hooks/usePreload.jsx

@@ -0,0 +1,67 @@
+// @ts-ignore
+import React, { useState,useMemo,useCallback } from 'react';
+
+const usePreload=(files)=>{
+  const [list] = useState(files);
+  const [count,setCount] = useState(files.length);
+  const [state,setState]=useState('');
+
+  const load=useCallback((options)=>{
+    return new Promise(resolve=>{
+      if(count <= 0 ){
+        resolve(true);
+        return;
+      }
+      if(state=='loading'){
+        resolve(false);
+        return;
+      }
+      setState('loading');
+      let per = files.length;
+      list.forEach((item, idx) => {
+        if (typeof item === 'string') {
+          let img = new Image();
+          img.onload = () => {
+            console.log('加载成功')
+            per--;
+            if(per<=0){
+              setCount(0);
+              if(options?.delay){
+                setTimeout(resolve, options.delay);
+                return;
+              }
+              resolve(true);
+            }
+          };
+          img.onerror = () => {
+            per--;
+            if(per<=0){
+              setCount(0);
+              resolve(true);
+            }
+            console.log(`图片预加载失败`,item);
+          };
+          img.src = item;
+        } else {
+          console.log(`图片预加载失败异常图片`,item);
+          per--;
+          if(per<=0){
+            setCount(0);
+            resolve(true);
+          }
+        }
+      });
+    })
+    
+  },[state,setState,count]);
+
+  const actions=useMemo(()=>{
+    return {
+      count,
+      load,
+    };
+  },[count]);
+  return actions;
+}
+
+export default usePreload;

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

@@ -0,0 +1,263 @@
+
+
+// @ts-ignore
+import React,{ useRef, useState} from 'react';
+// @ts-ignore
+import { matchPath } from 'react-router-dom';
+
+import {CONSOLE_LOG} from '@/utils';
+import { AUTH_ROUTE_DEBUG_OPEN } from '@/config';
+
+const MODULE_NAME='useRouteMenu';
+
+// 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=(props)=>{
+  /**
+   * @type [RouteMenuItem[], React.Dispatch<React.SetStateAction<RouteMenuItem[]>>]
+   */
+  const [source,setSource]= useState(props?.source||[]);
+
+  /**
+   * @type React.MutableRefObject<number>
+   */
+  const refKey = useRef(1);
+
+  /**
+   * @type React.MutableRefObject<Object<string,RouteMenuItem>>
+   */
+  const refKeyMap = useRef();
+
+  /**
+   * @type React.MutableRefObject<object>
+   */
+  const refSelf = 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){
+        // 不是数组的话代表menu.auth是一个boolean变量，代表长期展示菜单
+        if(Array.isArray(menu.auth)){
+          if(menu.auth.some(menuAuthName=>userAuth?.includes(menuAuthName)) == false){
+            auth=false;
+          }
+        }
+      }
+
+      if(AUTH_ROUTE_DEBUG_OPEN){
+        auth=true;
+      }
+      // 隐藏的菜单
+      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;
+          if(item.children){
+            let msgCount=0;
+            item.children.forEach(subMenu=>{
+              if(subMenu.msgCount){
+                msgCount += Number(subMenu.msgCount);
+              }
+            })
+            item.msgCount = msgCount;
+            list.push(item)
+          }else{
+            // 如果子菜单全部隐藏了，但是父菜单显示写了自己的权限的话，只要有权限则展示父节点
+            if(menu.auth){
+              list.push(item);
+            }
+          }
+          // 如果子菜单都没有权限访问，则父菜单也没必要展示了
+          return;
+        }
+        list.push(item)
+      }
+    });
+    if(menus == source){
+      CONSOLE_LOG(MODULE_NAME,'getMenu:',list)
+    }
+    return list
+  }
+
+  const getMatchMenu=(pathname,menu=source)=>{
+    for(let i=0;i<menu.length;i++){
+      const _menu = menu[i];
+      if( matchPath(_menu.routeTemplate||_menu.url, pathname) ){
+        return _menu;
+      }
+      if(_menu.children){
+        let req = getMatchMenu(pathname,_menu.children);
+        if(req){
+          return req;
+        }
+      }
+    }
+    return null;
+  }
+
+
+  /**
+   * 计算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_LOG(MODULE_NAME,'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])
+  }
+
+  refSelf.current={
+    setMenuConfig
+  }
+
+
+  return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig,getMatchMenu}
+}
+
+export default useRouteMenu;
+

package/templates/template_admin_antd5/public/src/hooks/useScrollTop.jsx

@@ -0,0 +1,44 @@
+// @ts-ignore
+import { useState, useMemo, useEffect } from 'react'
+// @ts-ignore
+import { createContainer } from 'unstated-next'
+
+/**
+ * @typedef {[HTMLElement,Function]} UseStateElement
+ */
+
+
+const useActivity = () => {
+  const [scrollTop, setScrollTop] = useState(0);
+
+  /**
+   * @type UseStateElement
+   */
+  const [containerNode, setContainerNode] = useState();
+  const [clientHeight, setClientHeight] = useState(0);
+  const [titleRefs, setTitleRefs] = useState({});
+
+  useEffect(() => {
+    const node = document.getElementById('main-view');
+    setContainerNode(node);
+    setClientHeight(node.clientHeight)
+    node.addEventListener('scroll', (e) => {
+      // @ts-ignore
+      setScrollTop(e.target.scrollTop);
+    })
+  }, [])
+
+  const action = useMemo(() => {
+    return {
+      scrollTop,
+      clientHeight,
+      titleRefs,
+      setTitleRefs,
+      containerNode,
+      setContainerNode,
+    }
+  }, [scrollTop, setScrollTop, clientHeight, titleRefs, setTitleRefs, containerNode, setContainerNode])
+  return action
+}
+const Activity = createContainer(useActivity);
+export default Activity;

package/templates/template_admin_antd5/public/src/hooks/useSearch.jsx

@@ -0,0 +1,163 @@
+// @ts-ignore
+import React,{ useState } from 'react';
+
+
+/**
+ * @typedef {object} UseSearch
+ * @property {(pageInfo:Pagination,sorterInfo:any)=>Promise} onPaginationChange - 监听分页信息发生变更
+ * @property {Pagination} pagination - 当前分页信息
+ * @property {object} search - 当前分页查询参数
+ * @property {()=>Promise} btnSearch - 出发查询
+ * @property {(object)=>void} setSearch - 设置查询参数
+ * @property {(object)=>Promise<ServicesResponse>} refresh - 设置查询参数
+ * @property {()=>void} btnReset - 重置查询参数
+ * @property {(sorter:object)=>void} onSorter - 监听排序变更
+ * 
+ */
+
+
+/**
+ * 管理表格数据的查询搜索及分页
+ * @param {object} props 
+ * @param {object} [props.initSearch={}] - 初始的分页搜索参数
+ * @param {(params)=>Promise} [props.service] - 分页接口提交方法
+ * @param {(params:any)=>object} [props.beforeSearch] - 参数拦截器
+ * @param {(params:any)=>object} [props.beforeService] - 提交接口前的参数拦截器
+ * @param {(response:any)=>void} [props.updateData] - 接口返回后的回调
+ * @param {Pagination} [props.pagination] - 接口返回后的回调
+ * 
+ * @returns {UseSearch}
+ */
+const useSearch=(props)=>{
+  const [search,setSearch] = useState(props.initSearch||{});
+  const [service] = useState(()=>props.service);
+  const [beforeSearch] = useState(()=>props.beforeSearch);
+  const [beforeService] = useState(()=>props.beforeService);
+  
+  const [pagination,setPagination] = useState(()=>{
+    let temp = {current:1,pageSize:10,total:0,startIdx:0,...props.pagination};
+    temp.startIdx = (temp.current-1)*temp.pageSize;
+    return temp;
+  });
+  const [updateData] = useState(()=>props.updateData);
+  const [orderInfo,setOrderInfo]=useState({});
+  
+  const onPaginationChange=async (pageInfo,sorterInfo)=>{
+    let {current,pageSize} = pagination;
+    let orderValue=orderInfo;
+    if(pageInfo){
+      current = pageInfo.current;
+      pageSize = pageInfo.pageSize;
+    }
+
+    if(sorterInfo){
+      const {field,order}= sorterInfo;
+      if(field){
+        if(order){
+          orderInfo[field] = order;
+        }else{
+          delete orderInfo[field];
+        }
+      }
+      orderValue = orderInfo;
+      setOrderInfo({...orderInfo});
+    }
+    
+
+    let searchValue = await getSearchValue();
+    refresh({
+      searchValue,
+      pageValue:{pageSize,current},
+      orderValue});
+  }
+
+  const onSorter=async (sorter)=>{
+    const {field,order}= sorter;
+    if(field){
+      if(order){
+        orderInfo[field] = order;
+      }else{
+        delete orderInfo[field];
+      }
+    }
+    setOrderInfo({...orderInfo});
+    console.log(`${JSON.stringify(orderInfo)}`);
+    refresh();
+    
+    
+    
+  }
+
+  const getSearchValue=async ()=>{
+    let value={};
+    value = search;
+
+    if(beforeSearch){
+      value = beforeSearch(value);
+    }
+    return value;
+
+  }
+  const btnSearch=async ()=>{
+    let value = await getSearchValue();
+    if(value){
+      refresh({searchValue:value});
+    }
+  }
+  const btnReset=()=>{
+    // @ts-ignore
+    formRef.resetFields();
+  }
+
+  const refresh= async ({searchValue=null,pageValue=null,orderValue=null}={})=>{
+    searchValue = searchValue || search;
+    pageValue = pageValue || pagination;
+
+    // 排序暂无
+    // orderValue = orderValue || orderInfo;
+    // let order=[];
+    // if(orderValue){
+    //   Object.keys(orderValue).map(name=>{
+    //     if(orderValue[name]==='ascend'){
+    //       order.push(`${name}`);
+    //     }else if(orderValue[name]==='descend'){
+    //       order.push(`-${name}`);
+    //     }
+    //   })
+    // }
+
+    let {current,pageSize} = pageValue;
+    let params = {...searchValue,page:current,pageSize:pageSize};
+    if(beforeService)params=beforeService(params);
+    if(!params)return;
+    let ret = await service(params);
+    if(ret?.code==0){
+      const {page} = ret.data;
+      setPagination({
+        current:page.pageNum||1,
+        pageSize:page.pageSize||10,
+        total:page.total,
+        startIdx:(page.page-1)*page.pageSize
+      })
+    }
+
+    if(updateData)updateData(ret);
+    return ret;
+  }
+
+
+  return {
+    onPaginationChange,
+    pagination,
+    btnSearch,
+    search,
+    setSearch,
+    refresh,
+    btnReset,
+    onSorter
+    
+  };
+
+}
+
+export default useSearch;