kn-cli 1.0.43 → 1.0.45

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+
+const useToast = () => {
+
+  const ref = useRef();
+
+  const runNext = (props) => {
+    console.log(props.popup.dom);
+    ReactDOM.render(
+      <Toast {...props} />,
+      props.popup.dom
+    );
+  }
+
+  const Toast = ({ children }) => {
+    return (
+      <section className={styles.wrap}>
+        <div className={styles.content + `  animate__animated animate__fast`}>
+          {children}
+        </div>
+      </section>
+    )
+  }
+
+  const hiddenToast = () => {
+    ref.current.destory();
+  }
+  const showToast = props => {
+    props = { children: props }
+    return new Promise((resolve) => {
+      let popup = Popup(resolve);
+      ref.current = popup;
+      props.popup = popup;
+      runNext(props);
+    });
+  }
+  return {
+    showToast, hiddenToast
+  }
+
+}
+
+export default useToast;

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

@@ -0,0 +1,32 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100vw;
+  height:100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 1000;
+  .content{
+    position: fixed;
+    left:0;
+    top:0;
+    width:100vw;
+    height:100vh;
+
+    background: rgba(0,0,0,.8);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+}

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

@@ -0,0 +1,103 @@
+
+import React, { useState, useEffect,useMemo} from 'react';
+import {GET_USER_TYPE} from '@/services/user';
+
+const bookCreater=options=>{
+  const {
+    service,
+    idKey='value',
+    titleKey='label',
+    keyName='key',
+    defaultTypes=null
+  }=options;
+  
+  return (props)=>{
+    const [types,setTypes]=useState(defaultTypes||null);
+
+    const init=async ()=>{
+      let ret = await service();
+      if(+ret?.code===0){
+        setTypes(ret.data||[]);
+      }
+    }
+    useEffect(()=>{
+      if(defaultTypes)return;
+      init();
+    },[]);
+
+    const getData=({id,title,key}={})=>{
+      let name='';
+      if(id){
+        name=idKey
+      }
+      else if(title){
+        name=titleKey
+      }
+      else if(key){
+        name=keyName;
+      }
+
+      for(let i=0;i<types.length;i++){
+        if(''+types[i][name]===''+id){
+          return types[i];
+        }
+      }
+      return null;
+    }
+
+    const getTitle=(id)=>{
+      if(types){
+        for(let i=0;i<types.length;i++){
+          if(''+types[i][idKey]===''+id){
+            return types[i][titleKey];
+          }
+        }
+      }
+      return '';
+    }
+    const getId=(title)=>{
+      if(types){
+        for(let i=0;i<types.length;i++){
+          if(''+types[i][titleKey]===''+title){
+            return types[i][idKey];
+          }
+        }
+      }
+      return '';
+    }
+
+    const isReady=()=>{
+      return types!==null;
+    }
+    const reload=()=>{
+      if(defaultTypes)return;
+      init();
+    }
+    const getList=()=>{
+      let ret=[]
+      for(let i=0;i<types.length;i++){
+        let item = types[i];
+        ret.push({
+          label:item[titleKey],
+          value:item[idKey],
+          key:item[keyName]
+        })
+      }
+      return ret;
+    }
+    
+
+    return {types,getTitle,getId,isReady,reload,getData,getList}
+  }
+}
+
+export const useUserType = bookCreater({
+  service:GET_USER_TYPE,
+})
+export const useTaskState=bookCreater({
+  defaultTypes:[
+    {label:'进行中',value:'1',key:'run'},
+    {label:'已完成',value:'5',key:'complete'},
+  ]
+});
+

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

@@ -0,0 +1,18 @@
+
+
+import useImageLoader from './useImageLoader';
+import useDelay from './useDelay';
+import usePreload from './usePreload';
+import useSearch from './useSearch';
+import useUpdate from './useUpdate';
+import useNextPage from './useNextPage';
+import useLoading from './useLoading';
+export {
+  useImageLoader,
+  useDelay,
+  usePreload,
+  useSearch,
+  useUpdate,
+  useNextPage,
+  useLoading
+}

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

@@ -0,0 +1,29 @@
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+const useDelay=()=>{
+  const [loading,setLoading] = useState(false);
+  const refSet = useRef();
+  refSet.current = setLoading;
+  useEffect(()=>{
+    refSet.current = setLoading;
+  },[setLoading]);
+
+  const actions=useMemo(()=>{
+    const wait=(ms)=>{
+      refSet.current(true);
+      return new Promise(res=>{
+        setTimeout(()=>{
+          refSet.current(false);
+          res();
+        }, ms);
+      })
+    }
+    return {
+      wait,
+      loading
+    };
+  },[loading]);
+  return actions;
+}
+
+export default useDelay;

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

@@ -0,0 +1,27 @@
+import React, { useEffect,useState,useMemo } from 'react';
+
+
+
+const useImageLoader=(img_src)=>{
+  const [src,setSrc] = useState('');
+  useEffect(() => {
+    if(img_src===src)return;
+    if(!img_src)return;
+    let img = new Image();
+    img.onload = () => {
+      setSrc(img_src);
+    };
+    img.onerror = () => {
+      setSrc('');
+      console.log(`图片加载失败:${img_src}`)
+    };
+    img.src = img_src;
+  }, [img_src]);
+
+  const actions=useMemo(()=>{
+    return src;
+  },[src]);
+  return actions;
+}
+
+export default useImageLoader;

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

@@ -0,0 +1,42 @@
+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){
+        refPageLoading.current = ShowPageLoading({canTouch:canTouch});
+      }
+    }else{
+      if(refPageLoading.current){
+        refPageLoading.current();//销毁
+        refPageLoading.current=null;
+      }
+    }
+  },[count])
+
+  
+  return {
+    name,
+    reset,
+    setLoading,
+    loading:count
+  }
+}
+
+export default useLoading;

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

@@ -0,0 +1,33 @@
+
+
+import React, { useEffect, useState, useRef } from 'react';
+import {IS_LOGIN,SET_TOKEN,LOGIN} from '@/services/wish';
+import ShowLogin from '@/pages/components/dialog/alert/login';
+
+
+const useLogin=(props)=>{
+  const [isLogin,setLogin] = useState(IS_LOGIN());
+
+  const login=async ()=>{
+    if(IS_LOGIN()){
+      setLogin(true);
+      return true;
+    }else{
+      setLogin(false);
+      const phone = await ShowLogin();
+      if(phone){
+        const loginReq = await LOGIN({phone});
+        if(loginReq?.code==0){
+          SET_TOKEN(loginReq.data.api_token);
+          setLogin(IS_LOGIN());
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  return {login,isLogin}
+}
+
+export default useLogin;

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

@@ -0,0 +1,89 @@
+import { useState,useRef } from 'react';
+
+
+const DEFAULT_PAGE_SIZE=20;
+const DEFAULT_PAGE_CURRENT=1;
+
+const useNextPage=(props)=>{
+  const [search,setSearch] = useState(props.initSearch||{});
+  const [service] = useState(()=>props.service);
+  const [beforeService] = useState(()=>props.beforeService);
+  const [pagination,setPagination] = useState(()=>{
+    let temp = {
+      current:DEFAULT_PAGE_CURRENT,
+      pageSize:DEFAULT_PAGE_SIZE,
+      total:0,
+      startIdx:0,
+      more:false,
+      ...props.pagination
+    };
+    temp.startIdx = (temp.current-1)*temp.pageSize;
+    return temp;
+  });
+  const resetCount = useRef(0);
+  const [data,setData] = useState([]);
+  
+  const reset= async ()=>{
+    resetCount.current++;
+    let page = {...pagination};
+    page.current =1;
+    return refresh({pageValue:page})
+  }
+  const nextPage= async ()=>{
+    if(!pagination.more){
+      return false;
+    }
+    let page = {...pagination};
+    page.current= +page.current+1;
+    return refresh({pageValue:page})
+  }
+  const refresh= async ({searchValue,pageValue}={})=>{
+    searchValue = searchValue || search;
+    pageValue = pageValue || pagination;
+    searchValue = {...search,...searchValue};
+    pageValue = {...pagination,...pageValue};
+
+    const {current,pageSize} = pageValue;
+    let params = {...searchValue,current:current,pageSize:pageSize};
+    if(beforeService)params=beforeService(params);
+    if(!params)return;
+
+    setSearch(searchValue);
+
+    let ret = await service(params);
+    if(ret?.code==0){
+      const {page} = ret.data;
+      const current= +(page.pageNum||DEFAULT_PAGE_CURRENT);
+      const pageSize= +(page.pageSize||DEFAULT_PAGE_SIZE);
+      const total= +page.total;
+      const startIdx= (current-1)*pageSize;
+      const more = current*pageSize<total;
+      setPagination({
+        current,pageSize,total,startIdx,more
+      })
+      if(ret.data.list){
+        ret.data.list.map(item=>{
+          item.resetCount = resetCount.current;
+        })
+        let newData = current==1?[]:data;
+        newData[current-1] = ret.data.list;
+        setData([...newData])
+      }
+    }
+    return ret;
+  }
+
+
+  return {
+    pagination,
+    search,
+    setSearch,
+    refresh,
+    reset,
+    nextPage,
+    data,
+  };
+
+}
+
+export default useNextPage;

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

@@ -0,0 +1,66 @@
+import React, { useEffect,useState,useMemo,useRef,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/public/src/hooks/useScrollTop.jsx

@@ -0,0 +1,32 @@
+import { useState, useMemo, useEffect } from 'react'
+import { createContainer } from 'unstated-next'
+
+const useActivity = () => {
+  const [scrollTop, setScrollTop] = useState(0);
+  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) => {
+      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/public/src/hooks/useSearch.jsx

@@ -0,0 +1,137 @@
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+/**
+ * 管理表格数据的查询搜索及分页
+ */
+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=()=>{
+    formRef.resetFields();
+  }
+
+  const refresh= async ({searchValue,pageValue,orderValue}={})=>{
+    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;

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

@@ -0,0 +1,11 @@
+import { useState, useMemo } from 'react';
+
+const useUpdate=()=>{
+  const [count,setCount] = useState(1);
+  const action = useMemo(()=>{
+    return [count,()=>{setCount(count+1)}]
+  },[count,setCount])
+  return action;
+}
+
+export default useUpdate;