kn-cli 1.0.106 → 1.0.108

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

@@ -4,10 +4,8 @@ import React, { useEffect, useState } from 'react';
 import {useNavigate,} from 'react-router-dom';
 
 // @ts-ignore
-import { Menu } from 'antd';
+import { Menu } from '@/components/antd';
 import Badge from '@/components/badge'
-// @ts-ignore
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
 
 import {useLoading} from '@/hooks/index';
 import ProviderMenu from '@/provider/menu';
@@ -30,6 +28,8 @@ const LeftMenu=(props)=>{
   const loader = useLoading();
   const [menus,setMenus] = useState([]);
   const nav = useNavigate();
+  const [openKeys,setOpenKeys] = useState([])
+
   
   const translateMenu=(list)=>{
     if(!list||list.length<=0)return [];
@@ -37,7 +37,10 @@ const LeftMenu=(props)=>{
       const {key,name:label,icon,url,msgCount}=menu;
 
       let item={
-        key,label,icon,url
+        key,
+        label: menu.children?.length > 0 ? label: <a href={'/#'+url}>{label}</a>,
+        icon,
+        url
       }
       if(msgCount&&msgCount>0){
         item.label=<span className={styles.menuLabel}>{label}
@@ -52,24 +55,46 @@ const LeftMenu=(props)=>{
     return req;
   }
 
+  const onOpenChange=(keys)=>{
+    setOpenKeys(keys);
+  }
+
   useEffect(()=>{
     let menuList = translateMenu(providerMenu.leftMenu);
     setMenus(menuList);
   },[providerMenu.leftMenu])
 
+  useEffect(()=>{
+    if(openKeys.length != providerMenu.selectMenus.keys.length){
+      setOpenKeys(providerMenu.selectMenus.keys)
+    }else{
+      let notSome= openKeys.some(key=>{
+        if( providerMenu.selectMenus.keys.includes(key) ){
+          return false;
+        }else{
+          return true;
+        }
+      })
+      if(notSome){
+        setOpenKeys(providerMenu.selectMenus.keys)
+      }
+    }
+  },[providerMenu.selectMenus.keys])
+
 
   const onClickMenuItem=(e)=>{
     const { item, key, keyPath, domEvent } = e;
     let menu = providerMenu.findMenuData(key);
     nav(menu.url);
   }
+  if(!menus||menus.length<=0)return <></>;
 
   return (
     <section className={styles.nav} data-nav-hide={!menus||menus.length<=0}>
       <Menu
         selectedKeys={providerMenu.selectMenus.keys}
-        // openKeys={openKeys}
-        // onOpenChange={onOpenChange}
+        openKeys={openKeys}
+        onOpenChange={onOpenChange}
         onClick={onClickMenuItem}
         mode="inline"
         items={loader.loading?[]:menus}

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

@@ -0,0 +1,33 @@
+
+import React,{  useState, useEffect } from 'react';
+// @ts-ignore
+import styles from './index.less';
+
+const MenuIcon=(props)=>{
+  
+  const [icon,setIcon]= useState('');
+  const [iconActive,setIconActive]= useState('');
+
+  const getIcon= async (iconName)=>{
+    const req = await new Promise(resolve=>{
+      let iconActive =import(`@/assets/images/nav/${iconName}-active.png`);
+      let icon = import(`@/assets/images/nav/${iconName}.png`);
+      Promise.all([icon,iconActive]).then(values=>{
+        setIcon(values[0].default);
+        setIconActive(values[1].default)
+      })
+    })
+  }
+  useEffect(()=>{
+    getIcon(props.name);
+  },[])
+
+  return (
+    <div className={styles.iconGroup}>
+      <img className={styles.icon} src={icon} />
+      <img className={styles.iconActive} src={iconActive} />
+    </div>
+  )
+
+}
+export default MenuIcon;

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

@@ -0,0 +1,49 @@
+
+
+
+.iconGroup{
+  width: 17px;
+  height: 100%;
+  margin-right: 12px;
+  display: inline-flex;
+  align-items: center;
+  margin-left:-12px;
+
+  img{width: 100%;}
+  .icon{
+    display: inline-block;
+  }
+  .iconActive{
+    display: none;
+  }
+}
+
+:global(.ant-menu-title-content){
+  font-size: 14px;
+}
+
+:global(.ant-menu-submenu-selected),
+:global(.ant-menu-item-selected),
+:global(.ant-menu-submenu-active),
+:global(.ant-menu-item-active){
+  .iconGroup .iconActive{
+    display: inline-block;
+  }
+  .iconGroup .icon{
+    display: none;
+  }
+  :global(.ant-menu-submenu-title .ant-menu-title-content),
+  :global(.ant-menu-item-selected .ant-menu-title-content){
+    font-weight: bold;
+    a{
+      font-weight: inherit;
+      color: #0974F2;
+    }
+  }
+  :global(.ant-menu-submenu-arrow) {
+    color: #0974F2
+  }
+}
+  :global(.ant-menu-inline.ant-menu-root .ant-menu-item > .ant-menu-title-content){
+    margin-left: -8px;
+  }

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

@@ -0,0 +1,7 @@
+import ReactDom from 'react-dom';
+
+export const ReactRender=(component,targetDom)=>{
+  ReactDom.render(component,targetDom);
+}
+
+export default {ReactRender}

package/templates/template_admin/public/src/components/select/defaultServicesSelect/index.jsx

@@ -0,0 +1,182 @@
+
+import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
+// @ts-ignore
+import { Select } from "@/components/antd";
+import useSelectList from '../useSelectList';
+
+/**
+ * @typedef SelectItemOption
+ * @property {string} label - 显示的名称
+ * @property {string} value - 唯一值
+ * @property {object} [data] - 原始数据
+ * 
+ */
+
+/**
+ * @typedef DefaultServicesSelectProps
+ * @property {string} [name] - 调试用的名称
+ * @property {object} services - api接口 符合输出的结果为{id:'',name:''}结构
+ * @property {object} [servicesProps={}] - 接口传参
+ * @property {(item:object)=>SelectItemOption} [formatOptionItem] - 用户格式化接口返回的数据成标准option数据
+ * @property {(list:object[]|object)=>SelectItemOption[]} [formatOptionList] - 对整个response处理返回option
+ */
+
+/**
+ * 从字典生成下拉框
+ * @param {import('../useSelectList').SelectListProps & DefaultServicesSelectProps} props 
+ * @returns {JSX.Element}
+ */
+const DefaultServicesSelect=(props,ref)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    placeholder='请选择',
+    onChange,
+    canChange,
+    disabled=false,
+    services,
+    servicesProps={},
+    formatOptionItem=(item)=>{
+      const {id,name} = item;
+      return {
+        label:`${name}`,
+        value:`${id}`,
+        data:item
+      }
+    },
+    formatOptionList,
+    onDefaultSelect,
+    onListUpdate,
+    name,
+    required=false
+  } = props;
+
+  // 单选框默认带一键删除
+  const allowClear = props.allowClear??((required==false)?true:false);
+
+  const refDestory = useRef(false);
+  const selectList = useSelectList(props);
+  const [requestParams,setRequestParams] = useState(servicesProps)
+  const refInitList=useRef([]);
+
+  // 初始化加载下拉框数据
+  const init = async ()=>{
+    const req = await services(servicesProps);
+    if(refDestory.current){return;}
+    let values=[];
+    if(req?.code==0){
+      let data=[];
+      if(formatOptionList){
+        data = formatOptionList(req.data);
+      }else{
+        data= req.data.map(item=>{
+          return formatOptionItem(item)
+        })
+      }
+      values=data;
+    }
+    if(onListUpdate){
+      onListUpdate(values);
+    }
+    if(onDefaultSelect){
+      let defaultItem = onDefaultSelect(values);
+      if(defaultItem){
+        onValueChange(defaultItem.value,defaultItem,true)
+      }
+    }
+    const t= await selectList.init(values);
+    if(refDestory.current){return;}
+    refInitList.current.shift();
+    if( refInitList.current.length >0 ){
+      let fn = refInitList.current[0]
+      fn();
+    }
+    return t;
+  }
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >=0 ){
+      return true;
+    }
+    return false;
+  }
+
+  const onValueChange= async (newValue,options,force=false)=>{
+    if(!force && canChange){
+      let req = await canChange(newValue,options);
+      if(!req)return;
+    }
+    if(onChange)onChange(newValue,options);
+  }
+
+
+  useEffect(()=>{
+    if(refInitList.current.length<=0){
+      refInitList.current.push(init)
+      init();
+    }else{
+      refInitList.current.push(init);
+    }
+  },[requestParams,services]);
+
+  useEffect(()=>{
+    let keys = Object.keys(servicesProps)
+    if(keys.length<=0)return;
+    let changes = keys.some(key=>{
+      if(servicesProps[key] != requestParams[key]){
+        return true;
+      }
+      return false;
+    })
+    if(changes){
+      setRequestParams(servicesProps)
+    }
+
+  },[servicesProps])
+  useEffect(()=>{
+    return ()=>{
+      refDestory.current=true
+    }
+  },[])
+
+
+  useImperativeHandle(ref, () => ({
+    getSelectList:()=>{
+      return selectList;
+    },
+  }));
+
+  let className=''
+  if(selectList.props.className){
+    className = selectList.props.className;
+  }
+  if(selectList.props.maxTagCount){
+    if(Array.isArray(className)){
+      className.push('antd-show-tag')
+    }else{
+      className+= ' antd-show-tag';
+    }
+  }
+  return (
+    <Select
+      // getPopupContainer={trigger => trigger?.parentElement||document.body} 
+      loading={selectList.list===null}
+      disabled={selectList.list===null || disabled}
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={selectList.value}
+      options={selectList.list}
+      onChange={onValueChange}
+      filterOption={onFilter}
+      {...selectList.props}
+      className={className}
+    />
+  );
+}
+
+export default forwardRef(DefaultServicesSelect);

package/templates/template_admin/public/src/components/select/dictSelect/index.jsx

@@ -0,0 +1,84 @@
+
+import React, { useEffect, useRef } from 'react';
+// @ts-ignore
+import { Select } from "@/components/antd";
+import useSelectList from '../useSelectList';
+
+/**
+ * @typedef DictSelectProps
+ * @property {object} emDict - 字典对象
+ */
+
+/**
+ * 从字典生成下拉框
+ * @param {import('../useSelectList').SelectListProps & DictSelectProps} props 
+ * @returns {JSX.Element}
+ */
+const DictSelect=(props)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    placeholder='请选择',
+    onChange,
+    disabled=false,
+    emDict,
+    required=false,
+  } = props;
+
+  const allowClear = props.allowClear??((mode=='single'&&required==false)?true:false);
+
+  const refDestory = useRef(false);
+  const selectList = useSelectList(props);
+
+  // 初始化加载下拉框数据
+  const init = async ()=>{
+    if(refDestory.current)return;
+    let values=[];
+    const data = emDict.list.map(item=>{
+      return {
+        label:item.label,
+        value:`${item.id}`,
+        data:item
+      }
+    })
+    values=data;
+    return await selectList.init(values);
+  }
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.indexOf(input) >=0 ){
+      return true;
+    }
+    return false;
+  }
+  const onValueChange=(newValue,options)=>{
+    if(onChange)onChange(newValue,options);
+  }
+
+  useEffect(()=>{
+    init();
+    return ()=>{refDestory.current=true}
+  },[])
+
+  
+  return (
+    <Select
+      loading={selectList.list===null}
+      disabled={selectList.list===null || disabled}
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear?true:false}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={selectList.value}
+      options={selectList.list}
+      onChange={onValueChange}
+      filterOption={onFilter}
+      {...selectList.props}
+    />
+  );
+}
+
+export default DictSelect;

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

@@ -0,0 +1,7 @@
+import DictSelect from './dictSelect';
+import DefaultServicesSelect from './defaultServicesSelect';
+
+export {DictSelect};
+export {DefaultServicesSelect};
+
+export default {DictSelect,DefaultServicesSelect};

package/templates/template_admin/public/src/components/select/useSelectList.jsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import {Tooltip} from "@/components/antd";
+
+
+
+/**
+ * 各类选择框组件
+ * @typedef SelectListProps
+ * @property {string} [name] - 调试名称
+ * @property {'single'|'multiple'} [mode='single'] - 单选/多选模式
+ * @property {(value:string|string[],items:object|object[])=>void} [onChange] - 选择发生变化时的回调
+ * @property {string|string[]} [value] - 选择发生变化时的回调
+ * @property {object} [style={}] - 样式
+ * @property {string} [placeholder] - 提示
+ * @property {boolean} [allowClear=false] - 一键删除按钮
+ * @property {boolean} [showAll=false] - 是否第一个展示全部选项
+ * @property {string} [allValue=''] - 定义全部选项的值是哪种类型，''代表空字符串
+ * @property {(id:string)=>SelectItem} [onNoMatchData] - 当没有匹配到数据时的回调
+ * @property {{id:number|string,label:string}[]} [noMatchList] - 为匹配到数据时的备用匹配数据
+ * @property {string} [onNoMatchDataLabel] - 当单选时，默认选中的数据没有匹配到合法数据时展示的label
+ * @property {object} [params={}] - 扩展参数
+ * @property {boolean} [disabled=false] - 是否禁止编辑
+ * @property {boolean} [noCheckNotFound=false] 是否禁止做不匹配数据的检查补全
+ * @property {string} [className='']
+ * @property {number} [maxTagCount] - 多选时最多支持的标签数量
+ * @property {JSX.Element|string} [suffixIcon] 选择框尾部的icon
+ * @property {(value:string|string[],items:object|object[])=>Promise<boolean>} [canChange] - 用于在切换选项时拦截决定是否允许变更
+ * @property {boolean} [required=false] - 是否为必选，必选的话不允许allowClear
+ * @property {(list:SelectItem[])=>object} [onDefaultSelect] - 初始化后如果需要有默认选中项的计算的话，可以通过这里拦截
+ * @property {(list:SelectItem[])=>void} [onListUpdate] - 每当列表内的数据更新时回调
+ * 
+ */
+
+/**
+ * @typedef SelectItem
+ * @property {string} label - 文本下拉框里展示的文本
+ * @property {string} value - 文本下拉框里选项的值
+ * @property {any} data - 文本下拉框里选项对应的原始数据
+ * 
+ */
+
+/**
+ * @typedef UseSelectList
+ * @property {(list:SelectItem[])=>Promise<boolean>} init - 初始化函数
+ * @property {string|number|string[]|number[]} value - 值发生变化时的回调
+ * @property {SelectItem[]} list - 选择的数据列表
+ * @property {(value)=>void} setValue - 设置当前值
+ * @property {object} props - 继承给Select组件的通用属性
+ * @property {(value:string|string[])=>object[]} getItemByValue - 通过ID获取到所有匹配的对象数据
+ * 
+*/
+
+/**
+ * 通用的管理选择下拉框数据的hooks
+ * @param {SelectListProps} props 
+ * @returns {UseSelectList}
+ */
+const useSelectList=(props)=>{
+  const {
+    mode='single',
+    value:_value,
+    style:_style={},
+    showAll=false,
+    allValue='',
+    onNoMatchData,
+    onNoMatchDataLabel,
+    noCheckNotFound=false,
+    noMatchList=[],
+  } = props;
+
+  const [list,setList]= useState(null);
+  const [value,setValue]=useState(mode=='single'?'':[]);
+  const [maxTagCount] = useState(()=>{
+    if(mode=='multiple'){
+      if(props.maxTagCount == 0){
+        return undefined;
+      }
+      if(props.maxTagCount){
+        return props.maxTagCount;
+      }
+      return 'responsive';
+    }
+    return undefined;
+  })
+
+  const [suffixIcon] = useState(props.suffixIcon||undefined)
+
+  /**
+   * 初始化加载下拉框数据
+   * @param {{label:string,value:string,data:any}[]} values 
+   */
+  const init = async (values)=>{
+    if(showAll && values?.length>0){
+      let value =allValue;
+      values =[{label:'全部',value,data:values},...values]
+    }
+    setList(values);
+    return true;
+  }
+
+  /**
+   * 通过值获取到选项对象
+   * @param {string|string[]} value 
+   * @returns {object[]}
+   */
+  const getItemByValue=(value)=>{
+    if(!value)return [];
+    let finder = [];
+    if(Array.isArray(value)==false){
+      finder = [value];
+    }else{
+      finder= [...value];
+    }
+    let req=[];
+    list.filter(item=>{
+      for(let i=0;i<finder.length;i++){
+        if(finder[i]==item.value){
+          req.push(item.data);
+          finder.splice(i,1);
+          break;
+        }
+      }
+    })
+    return req;
+  }
+  /**
+   * 在备用数据内匹配数据
+   * @param {number} id 
+   */
+  const matchBackupList=(id)=>{
+    if(!noMatchList||noMatchList.length<=0){return null}
+      let matchData = noMatchList.filter(data=>data.id==id);
+      if(matchData&&matchData[0]){
+        return {value:''+id,label:matchData[0].label,data:null}
+      }
+      return null;
+  }
+
+  // 当数据变动时，检查当前选择值是否有匹配不到的数据，并处理
+  const checkNoFindData=()=>{
+    if(noCheckNotFound)return;
+    if(list === null)return;
+    if( [undefined,null].includes(value))return;
+    let noFindItems=[];
+    if(!Array.isArray(value)){
+      if(value==='')return;
+      noFindItems = [value]
+    }else{
+      noFindItems = [...value];
+    }
+    if(noFindItems.length<=0)return;
+
+    for(let i=0;i<list.length;i++){
+      let id = list[i].value;
+      let idx = noFindItems.indexOf(id);
+      // 找到了则移除
+      if( idx >= 0 ){
+        noFindItems.splice(idx,1);
+      }
+    }
+    if(noFindItems.length<=0)return;
+    noFindItems.forEach(id=>{
+      let matchData = matchBackupList(id);
+      if(matchData){
+        list.push(matchData);
+        return;
+      }
+      if(onNoMatchData){
+        let data = onNoMatchData(id);
+        if(data){
+          list.splice(0,0,data);
+          return;
+        }
+      }
+      if(onNoMatchDataLabel){
+        list.splice(0,0,{value:id,label:onNoMatchDataLabel,data:null});
+        return;
+      }
+      list.splice(0,0,{value:id,label:`${id}[不可用]`,data:null});
+    })
+    setList([...list]);
+  }
+
+  useEffect(()=>{
+    if(_value==null||_value==undefined){
+      setValue(undefined);
+      return;
+    }
+    let req;
+    if(mode=='multiple' && Array.isArray(_value)){
+      req= _value.map(id=>`${id}`)
+    }else{
+      req = `${_value}`
+    }
+    setValue(req);
+  },[_value]);
+
+  useEffect(()=>{
+    checkNoFindData();
+  },[value,list,noMatchList])
+
+  return {init,value,list,setValue,getItemByValue,props:{maxTagCount,suffixIcon,
+    maxTagPlaceholder:(omittedValues) => (
+      <Tooltip
+        overlayStyle={{
+          pointerEvents: 'none',
+        }}
+        title={omittedValues.map(({ label }) => label).join(', ')}
+      >
+        <span className='antd-show-tag-more-label'><i></i><i></i><i></i></span>
+      </Tooltip>
+    )
+
+  }}
+}
+export default useSelectList;

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

@@ -1,6 +1,6 @@
 import React,{useCallback} from 'react';
 // @ts-ignore
-import { Table } from 'antd';
+import { Table } from '@/components/antd';
 // @ts-ignore
 import styles from './index.less';
 import Column from './column';

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 // @ts-ignore
-import { Tooltip } from 'antd';
+import { Tooltip } from '@/components/antd';
 import { getStrByteLen } from '@/utils';
 // @ts-ignore
 import styles from './index.less';