kn-cli 1.0.131 → 1.0.134

package/templates/template_admin_antd5/public/src/components/video/preview.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import Popup from '@/components/popup';
+// @ts-ignore
+import styles from './index.module.less';
+import { ReactRender } from '@/components/react';
+
+const ModalPreview = (props) => {
+  const { destory, src } = props;
+
+  const onCancel = () => {
+    destory && destory();
+  };
+
+  return (
+    <section className={styles.main}>
+      <div className={styles.current}>
+        <video controls src={src} className={styles.video}>
+          <a href={src} download>
+            下载
+          </a>
+        </video>
+        <CloseOutlined className={styles.close} onClick={onCancel} />
+      </div>
+    </section>
+  );
+};
+
+const ShowPreview = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(
+      <ModalPreview destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowPreview;

package/templates/template_admin_antd5/public/src/config.js

@@ -0,0 +1,31 @@
+
+
+// 权限调试开关
+// @ts-ignore
+export const AUTH_DEBUG_OPEN= BUILD_ENV=='prod'?false:true;
+// 菜单权限调试开关
+export const AUTH_ROUTE_DEBUG_OPEN=false;
+
+
+// 当前你需要模拟调试哪个环境下的数据
+export const DEBUG_ENV='local';
+// export const DEBUG_ENV='dev';
+// export const DEBUG_ENV='pre';
+// export const DEBUG_ENV='local';
+
+
+
+const DEBUG_API_HOST_CONFIG={
+  // @ts-ignore
+  local:API_HOST,// 本地调试
+  dev:'/devapi/api',
+  pre:'/preapi/api',
+  prod:'/prodapi/api',
+}
+
+// 配置本地调试时api调用的接口地址,
+export const DEBUG_API_HOST=DEBUG_API_HOST_CONFIG[DEBUG_ENV]
+
+// 调试vconsole
+// @ts-ignore
+export const DEBUG_VCONSOLE= BUILD_ENV=='local';

package/templates/template_admin_antd5/public/src/declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.less';

package/templates/template_admin_antd5/public/src/dictionary/dictionary.js

@@ -0,0 +1,289 @@
+
+import React,{ useState, useMemo, useEffect } from 'react';
+
+
+/**
+ * @template [T=object]
+ * @callback Api
+ * @param {Object} params - 调用接口用到的参数
+ * @returns {Promise<T>}
+ */
+
+
+/**
+ * @typedef DictionaryItem
+ * 字典数据的结构
+ * @property {string} id  - 数据唯一ID
+ * @property {string} name  - 数据唯一id对应的别名
+ * @property {string} label  - 展示给用户看的文字
+ * @property {boolean} [disabled] - 是否禁用
+ * @property {object} [data] - 原始数据
+ * @property {string} [subLabel]  - 副标题
+ * @property {string} [type]  - 是不是多选框
+ */
+
+
+/**
+ * @typedef RenderOptions
+ * @property {(item:DictionaryItem)=>JSX.Element} [onRender] - 渲染拦截器
+ */
+
+/**
+ * @typedef CreateOptions
+ * @property {DictionaryItem[]}  [types] - 字典数据列表
+ * @property {string} [idKey='id'] - id的字段名
+ * @property {string} [nameKey='name'] - id的字段名
+ * @property {string} [labelKey='label'] - id的字段名
+ * @property {(item:DictionaryItem)=>JSX.Element} [onRender] - 渲染Item的拦截器
+ */
+
+
+/**
+ * @typedef GetOptionsProps
+ * @property {object} props
+ * @property {(item:DictionaryItem)=>boolean} [props.onFilter]  - 数据唯一id对应的别名
+ * @property {(item:DictionaryItem)=>boolean} [props.onDisabled]  - 数据唯一id对应的别名
+ */
+
+/**
+ * @typedef RenderOptionsProps
+ * @property {object} props
+ * @property {DictionaryItem[]} [props.options]  - 数据唯一id对应的别名
+ * @property {JSX.Element} [props.OptionComponent]  - 数据唯一id对应的别名
+ */
+
+
+
+/**
+ * @typedef EnumResult
+ * @property {DictionaryItem[]}  types - 字典数据列表
+ * @property {(labelOrName:string)=>string}  [getId] - 搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
+ * @property {(id:string)=>string}  [getName] - 匹配id复合的对象，返回其name的值
+ * @property {(id:string)=>string}  [getLabel] - 匹配id复合的对象，返回其label的值
+ * @property {(idOrNameOrLabel:string)=>DictionaryItem}  [getItem] - 匹配id,label,name只要符合的返回对象
+ * @property {(props?:GetOptionsProps)=>DictionaryItem[]} [getOptions] - 获取选项列表
+ * @property {(props?:RenderOptions)=>JSX.Element[]} [render] - 触发渲染
+ * 
+ */
+
+
+/**
+ * @typedef CreateApiDictionaryOptions
+ * @property {Api} [api] - 用于获取字典列表的接口
+ * @property {(request:object)=>object} [beforeApi] - (request:object)=>object 接口调用前的参数拦截器
+ * @property {(response:object)=>object} [afterApi] -  (reponse:object)=>object[] 接口调用后的拦截器
+ */
+
+/**
+ * @typedef {CreateOptions & CreateApiDictionaryOptions}  CreateDictionaryOptions
+ */
+
+/**
+ * @typedef  CreateDictoryResult
+ * @property {()=>boolean} isReady - 是否加载完毕
+ * @property {()=>void} reload - 重新加载
+ * 
+ */
+
+/**
+ * @typedef {CreateDictoryResult & EnumResult} UseDictionaryResult
+ */
+
+
+const DEFAULT_CONFIG={
+  beforeApi:null,
+  afterApi:null,
+  idKey:'id',
+  nameKey:'name',
+  labelKey:'label'
+};
+
+
+/**
+ * @function 
+ * @description 全局设置SelectOption和RadioOption  
+ * @param {Object} params
+ * 
+ * @returns {void}
+ */
+export const SetConfig = ({beforeApi,afterApi,idKey,nameKey,labelKey})=>{
+  if(beforeApi)DEFAULT_CONFIG.beforeApi = beforeApi;
+  if(afterApi)DEFAULT_CONFIG.afterApi = afterApi;
+  if(idKey)DEFAULT_CONFIG.idKey = idKey;
+  if(nameKey)DEFAULT_CONFIG.nameKey = nameKey;
+  if(labelKey)DEFAULT_CONFIG.labelKey = labelKey;
+};
+
+
+/**
+ * 创建一个静态的字典
+ * @param {CreateOptions} props 
+ * @returns {EnumResult}
+ */
+export const createEnum=props=>{
+  const { 
+    idKey = DEFAULT_CONFIG.idKey, 
+    nameKey = DEFAULT_CONFIG.nameKey, 
+    labelKey = DEFAULT_CONFIG.labelKey,
+    types,
+    onRender
+  } = props;
+
+  const idMap={};
+  const labelMap={};
+  const nameMap={};
+
+  if(types){
+    types.forEach(item=>{
+      idMap[''+item[idKey]] = item;
+      labelMap[''+item[labelKey]] = item;
+      nameMap[''+item[nameKey]] = item;
+    })
+  }
+
+  const getLabel = (id) => {
+    let key = ''+id;
+    if(!types)return '';
+    if(idMap[key]){
+      return idMap[key][labelKey]
+    }
+    return '';
+  };
+  const getName = (id) => {
+    let key = ''+id;
+    if(!types)return '';
+    if(idMap[key]){
+      return idMap[key][nameKey]
+    }
+    return '';
+  };
+  const getId = (labelOrName) => {
+    let key = ''+labelOrName;
+    if(!types)return '';
+    if(nameMap[key]){
+      return nameMap[key][idKey]
+    }
+    if(labelMap[key]){
+      return labelMap[key][idKey]
+    }
+    return '';
+  };
+  const getItem=(idOrNameOrLabel)=>{
+    let key = ''+idOrNameOrLabel;
+    if(!types)return null;
+    if(idMap[key]){
+      return idMap[key]
+    }
+    if(nameMap[key]){
+      return nameMap[key]
+    }
+    if(labelMap[key]){
+      return labelMap[key]
+    }
+    return null;
+  };
+  const getOptions=(props)=>{
+    const {onFilter,onDisabled}=props;
+    let req=[];
+    if(!types)return req;
+    types.forEach(item=>{
+      let show=true;
+      let disabled=false;
+      
+      if(onFilter){
+        show = onFilter(item);
+      }
+      if(onDisabled){
+        disabled = onDisabled(item);
+      }
+      if(show){
+        req.push({
+          ...item,
+          disabled:disabled,
+        })
+      }
+    })
+    return req;
+  }
+  const render=(props)=>{
+    const _onRender = props?.onRender || onRender;
+    let req=[];
+    if(!_onRender)return req;
+    types.forEach(item=>{
+      if(_onRender){
+        let component=_onRender(item);
+        if(component){
+          req.push(component);
+        }
+      }
+    })
+    return req;
+  }
+  return { types, getLabel, getId, getName,getItem,getOptions,render };
+}
+
+
+/**
+ * @function 
+ * @description 创建字典hooks工具
+ * @param {CreateDictionaryOptions} options
+ * 
+ * @returns {()=>UseDictionaryResult} 
+ */
+export const createDictionary=options=>{
+  const { 
+    api, 
+    beforeApi = DEFAULT_CONFIG.beforeApi,
+    afterApi = DEFAULT_CONFIG.afterApi,
+  } = options;
+  const defaultTypes = options.types || null;
+  return ()=>{
+    /**
+     * @type {[EnumResult,React.Dispatch<React.SetStateAction<EnumResult>>]}
+     */
+    const [enumItem, setEnumItem] = useState(()=>{
+      if(!api)return createEnum({...options,types:defaultTypes||[]})
+      return {types:null}
+    });
+
+    const init = async () => {
+      if(!api)return;
+      let params={};
+      let items=[];
+      if(beforeApi){
+        params = beforeApi();
+      }
+      let ret = await api(params);
+      if(afterApi){
+        items = afterApi(ret);
+      }else{
+        if (+ret?.code === 0) {
+          items = ret.data.body;
+        }
+      }
+      let value=createEnum({...options,types:items||[]});
+      setEnumItem(value);
+    };
+  
+    const isReady = () => {
+      return enumItem?.types !== null;
+    };
+    const reload = () => {
+      init();
+    };
+  
+    useEffect(() => {
+      init();
+    }, [api,beforeApi,afterApi]);
+
+    const actions = useMemo(() => {
+      return { isReady, reload,...enumItem };
+    }, [enumItem]);
+  
+    return actions;
+  }
+}
+
+
+
+

package/templates/template_admin_antd5/public/src/dictionary/index.jsx

@@ -0,0 +1,64 @@
+
+// @ts-ignore
+import React from 'react';
+
+import { Select,Radio } from '@/components/antd';
+// @ts-ignore
+import { createDictionary,SetConfig } from './dictionary';
+
+
+
+const BeforeApi=()=>{
+
+}
+const AfterApi=()=>{
+
+}
+
+SetConfig({
+  beforeApi:BeforeApi,
+  afterApi:AfterApi,
+})
+
+
+export const onRenderSelectItem=(item)=>{
+  return <Select.Option key={item.id} data={item}>{item.label}</Select.Option>
+}
+
+/**
+ * 消息已读状态的
+ */
+export const DictMessageStatus=[
+  {label: '未读',id: '0',name: '0'},
+  {label: '已读',id: '1',name: '1'}
+]
+
+/**
+ * 消息已读状态
+ */
+export const useMessageStatus= createDictionary({
+  types: DictMessageStatus,
+  onRender:onRenderSelectItem
+});
+
+
+/**
+ * 消息已读状态
+ */
+export const useEmDemos= createDictionary({
+  types: new Array(10000).fill(10000).map((item,idx)=>{
+    return {label:`${idx}`,id:`${idx}`,name:`${idx}`}
+  }),
+  onRender:onRenderSelectItem
+});
+
+/**
+ * 用户状态
+ */
+export const useState= createDictionary({
+  types:[
+    {label:'启用',id:'1',name:'open'},
+    {label:'禁用',id:'0',name:'disabled'},
+    {label:'离职',id:'2',name:'out'},
+  ]
+});

package/templates/template_admin_antd5/public/src/enum.js

@@ -0,0 +1,41 @@
+
+
+/**
+ * @enum {string}
+ */
+export const ENUM_MESSAGE_STATE={
+  Delivered:'Delivered',
+  Failed:'Failed',// 发送失败
+  Read:'Read', // 已读
+  RecallFailed:'RecallFailed',
+  Recalled:'Recalled', // 已撤回
+  Recalling:'Recalling',
+  Received:'Received',
+  Sending:'Sending',// 发送中
+  Sent:'Sent'
+}
+
+
+
+
+/**
+ * 消息中心的消息类型
+ * @enum {string}
+ */
+export const ENUM_EVENT_BUS_TYPE={
+  NEW_MSG:'new_msg',// 新消息
+  UPDATE_MSG:'update_msg',// 老消息状态变更
+  REMOVE_SESSION:'remove_session',
+  NEW_SESSION:'new_session',
+  CHANGE_INPUT_VALUE:'change_input_value',
+  NEW_NOTIFY:'new_notify',//有新的消息通知
+  ADD_WORK_USER:'add_work_user',//接入新账号
+  UPDATE_WORK_USER:'update_work_user',//工作账号内容变更
+  MSG_READ:'msg_read',//已读某个消息
+  UPDATE_NOTIFY_UNREAD:'update_notify_unread',//更新未读消息数量
+  CHAT_UNREAD_COUNT:'CHAT_UNREAD_COUNT',//更新聊天未读消息数
+  SEND_MESSAGE:'SEND_MESSAGE',//发送一条消息,
+  UPDATE_TIMELINE:'UPDATE_TIMELINE',//刷新TIMELINE
+
+
+}

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

@@ -0,0 +1,29 @@
+import useImageLoader from './useImageLoader';
+import useDelay from './useDelay';
+import usePreload from './usePreload';
+import useSearch from './useSearch';
+import useUpdate from './useUpdate';
+import useLoading from './useLoading';
+import useDebounceFn from './useDebounceFn';
+import useInToView from './useInToView';
+import useTimer from './useTimer';
+import useEsc from './useEsc';
+
+// @ts-ignore
+import { usePagination, usePaginationWithForm } from 'kn-hooks';
+
+export {
+  usePaginationWithForm,
+  usePagination,
+  useImageLoader,
+  useDelay,
+  usePreload,
+  useSearch,
+  useUpdate,
+  useLoading,
+  useDebounceFn,
+  useInToView,
+  useTimer,
+  useEsc
+
+};

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

@@ -0,0 +1,33 @@
+import React,{useRef} from 'react';
+
+/**
+ * 防抖函数(可延迟开始前执行或延迟后执行)
+ * @param {Function} fn - 必填项；要防抖处理的函数
+ * @param {object} [options] - 可选项；
+ * @param {number} [options.wait] - 可选项;等待时间，单位为毫秒
+ * @param {boolean} [options.leading] - 可选项；是否在延迟开始前调用函数,默认否
+ * @returns 
+ */
+const UseDebounceFn = (fn,options)=>{
+  const timer = useRef(null);
+
+  const run = function(){
+    const _arguments = arguments;
+    if (options?.leading && !timer.current) {
+      fn.apply(this, _arguments);
+    }
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    timer.current = setTimeout(function () {
+      timer.current = null;
+      if (!options?.leading) {
+        fn.apply(this, _arguments);
+      }
+    }, options?.wait || 300);
+  }
+  return [run];
+}
+
+export default UseDebounceFn;

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

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

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

@@ -0,0 +1,98 @@
+// @ts-ignore
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+
+const onEscList=[];
+let onEscCount=0;
+const onEsc=(e)=>{
+  if (e.key.toLocaleLowerCase() === 'escape' || e.key.toLocaleLowerCase() === 'esc') {
+    if(onEscList.length>0){
+      for (let i = onEscList.length - 1; i >= 0; i--) {
+        const fn = onEscList[i];
+        if( fn(e) ){
+          break;
+        }
+      }
+    }
+  }
+}
+
+
+const addEventListener=(fn)=>{
+  let find=false;
+  for(let _fn of onEscList){
+    if(_fn==fn){
+      find=true;
+      break;
+    }
+  }
+  if(find)return false;
+  onEscList.push(fn);
+  return true;
+}
+const removeEventListener=(fn)=>{
+  for(let i=0;i<onEscList.length;i++){
+    if(onEscList[i]==fn){
+      onEscList.splice(i,1);
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * @typedef {object} UseEsc
+ * @property {(fn:(event:*)=>boolean)=>void} addEventListener - 监听esc，返回true时会停止冒泡
+ * @property {(fn:(event:*)=>boolean)=>void} removeEventListener - 取消监听
+ */
+
+/**
+ * 
+ * @param {object} props 
+ * @param {string} props.name 
+ * 
+ * @returns {UseEsc}
+ */
+const useEsc=(props)=>{
+  let refFn = useRef();
+ 
+  const _addEventListener=(fn)=>{
+    if(addEventListener(fn)){
+      refFn.current=fn;
+    }
+  }
+  const _removeEventListener=(fn)=>{
+    if( removeEventListener(fn) ){
+      refFn.current=null;
+    }
+  }
+  useEffect(()=>{
+    // console.log('开始监听esc',props.name)
+    onEscCount++;
+    if(onEscCount == 1){
+      // console.log('初次加载监听esc',props.name)
+      window.addEventListener('keyup',onEsc)
+    }
+    return ()=>{
+      if(refFn.current){
+        _removeEventListener(refFn.current);
+      }
+      // console.log('取消监听esc',props.name)
+      onEscCount--;
+      if(onEscCount==0){
+        // console.log('最终销毁监听esc',props.name)
+        window.removeEventListener('keyup',onEsc)
+      }
+    }
+  },[]);
+
+  const actions=useMemo(()=>{
+    return {
+      addEventListener:_addEventListener,
+      removeEventListener:_removeEventListener
+    };
+  },[_addEventListener,_removeEventListener]);
+  return actions;
+}
+
+export default useEsc;

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

@@ -0,0 +1,26 @@
+// @ts-ignore
+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;