kn-cli 1.0.107 → 1.0.109

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

@@ -8,6 +8,7 @@ import ProviderMenu from '@/provider/menu';
 import imgSlogan from '@/assets/images/nav/slogan.png';
 
 import TopBar from './topBar';
+import {DEBUG_ENV} from '@/config';
 
 // @ts-ignore
 import styles from './index.less';
@@ -20,6 +21,10 @@ const TopSlogan=()=>{
   return (
     <div className={styles.TopMenuSlogan} onClick={onHome}>
       <img src={imgSlogan} />
+      {
+        // @ts-ignore
+        DEBUG_ENV!='prod'?<span className={styles.version}>V{APP_VERSION}{DEBUG_ENV}</span>:<></>
+      }
     </div>
   )
 }
@@ -79,7 +84,7 @@ const TopMenu=(props)=>{
                 data-checked={active} 
                 onClick={onClickMenuItem.bind(this,menu)} 
               >
-                <span>{label}</span>
+                <span><a href={'/#'+menu.url}>{label}</a></span>
                 {/* 未读标记 */}
                 <div className={styles.messageWrap}>
                   {msgCount>0?<i className={styles.iconUnread}/>:''}

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

@@ -13,6 +13,15 @@
   img{
     width: 73px;
   }
+  .version{
+    font-size: 12px;
+    font-weight:700;
+    color:white;
+    background-color: rgba(255,255,255,.16);
+    padding:2px 4px;
+    border-radius: 2px;
+    margin-left: 4px;
+  }
 }
 
 .topMenu{
@@ -44,7 +53,7 @@
     font-size: 14px;
     color:#fff;
     background-color: transparent;
-    span{
+    a,span{
       font-weight: inherit;
       font-size: inherit;
       color:inherit;

package/templates/template_admin/public/src/components/topMenu/topBar/index.jsx

@@ -1,7 +1,7 @@
 // @ts-ignore
 import React, { useRef, useState } from 'react';
 // @ts-ignore
-import { Dropdown,message } from 'antd'
+import { Dropdown,message } from '@/components/antd'
 // @ts-ignore
 import { LogoutOutlined } from '@ant-design/icons';
 // @ts-ignore
@@ -56,6 +56,11 @@ const TopBar=()=>{
           key:'user',
           label:<span  className={styles.userMenuItem}>Hi,{app?.user?.realName||'用户'}</span>
         },
+        {
+          key:'version',
+          // @ts-ignore
+          label:<span  className={styles.userMenuItem}><hgroup className={styles.version} ><span>版本</span><span>V{APP_VERSION}</span></hgroup></span>
+        },
         {
           key:'logout',
           label:<span onClick={onAvatarClick.bind(this,'logout')} className={styles.userMenuItem}><LogoutOutlined />退出登录</span>

package/templates/template_admin/public/src/components/topMenu/topBar/index.less

@@ -85,4 +85,13 @@
 .userMenuItem{
   display: flex;
   column-gap: 6px;
+  .version{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    span:nth-child(2){
+      color:#8F959E;
+    }
+  }
 }

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

@@ -0,0 +1,28 @@
+
+
+// 权限调试开关
+// @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]
+

package/templates/template_admin/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/public/src/dictionary/index.js

@@ -1,135 +1,29 @@
 
 // @ts-ignore
 import React from 'react';
-// @ts-ignore
-import {useDictionary} from 'kn-hooks';
 
+import { Select,Radio } from '@/components/antd';
 // @ts-ignore
-import {Select,Radio} from 'antd';
-
+import { createDictionary,SetConfig } from './dictionary';
 
 
-/**
- * @typedef DictionaryItem
- * 字典数据的结构
- * @property {string} id  - 数据唯一ID
- * @property {string} name  - 数据唯一id对应的别名
- * @property {string} label  - 展示给用户看的文字
- * 
- */
-
-/**
- * @typedef UseDictionaryResult
- * @property {DictionaryItem[]}  types - 字典数据列表
- * @property {ReactDOM[]} selectOptions - 供Antd渲染\<Select\>的列表
- * @property {ReactDOM[]} radioOptions - 供Antd渲染\<Radio\>的列表
- * @property {function}  getId - (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
- * @property {function}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
- * @property {function}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
- * @property {function}  reload - ()=>void,重新调用字典接口刷新字典列表
- * 
- */
 
-/**
- * @callback UseDictionary
- * @returns {UseDictionaryResult}
- */
-
-
-/**
- * @typedef Dictionary
- * @property {DictionaryItem[]}  list - 字典数据列表
- * @property {(labelOrName:string)=>string|number}  getId - (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
- * @property {(idOrLabel:string|number)=>string}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
- * @property {(idOrName:string|number)=>string}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
- * @property {(text:string|number)=>DictionaryItem|null}  getItem - 匹配text为id\name\label中任何一个的对象
- * @property {JSX.Element[]} [selectOptions] - antd-select渲染成员
- */
-
-
-
-
-// export const SelectOption=(props)=>{
-//   const {value}=props;
-//   const name = props['data-keyname'];
-//   const onClick=(e)=>{
-//     ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
-//     if(props.onClick)props.onClick();
-//   }
-//   // @ts-ignore
-//   return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
-// }
-
-useDictionary.SetConfig({SelectOption:Select.Option,RadioOption:Radio})
+const BeforeApi=()=>{
 
+}
+const AfterApi=()=>{
 
-/**
- * 
- * @param {DictionaryItem[]|[]} list 
- * @returns {Dictionary}
- */
-const createDictionary=(list)=>{
-  const getId=(nameOrLabel)=>{
-    for(let i=0;i<list.length;i++){
-      if(list[i].label == nameOrLabel || list[i].name == nameOrLabel){
-        return list[i].id;
-      }
-    }
-    return null;
-  }
-  const getLabel=(nameOrId)=>{
-    for(let i=0;i<list.length;i++){
-      if(list[i].id == nameOrId || list[i].name == nameOrId){
-        return list[i].label;
-      }
-    }
-    return null;
-  }
-  const getName=(idOrLabel)=>{
-    for(let i=0;i<list.length;i++){
-      if(list[i].id == idOrLabel || list[i].label == idOrLabel){
-        return list[i].name;
-      }
-    }
-    return null;
-  }
-  const getItem=(idOrNameOrLabel)=>{
-    for(let i=0;i<list.length;i++){
-      if(list[i].id == idOrNameOrLabel || list[i].label == idOrNameOrLabel || list[i].name== idOrNameOrLabel ){
-        return list[i];
-      }
-    }
-    return null;
-  }
-  
-  const selectOptions = list.map(item=>{
-    return <Select.Option value={item.id} >{item.label}</Select.Option>
-  })
-  return {
-    getId,getLabel,getName,getItem,list,selectOptions
-  }
 }
 
+SetConfig({
+  beforeApi:BeforeApi,
+  afterApi:AfterApi,
+})
 
-/**
- * 用户枚举数据
- * @type UseDictionary
- */
-// export const useUserEnum=useDictionary.createDictionary({
-//   beforeApi: () => ({
-//     status: 1 // 筛选已启用的数据
-//   }),
-//   api: USER_ENUM,
-//   labelKey: 'name',
-//   afterApi: res => {
-//     let list=[];
-//     if(res?.code===0) {
-//       list=res?.data||[];
-//     }
-//     return list;
-//   }
-// })
 
+export const onRenderSelectItem=(item)=>{
+  return <Select.Option key={item.id} data={item}>{item.label}</Select.Option>
+}
 
 /**
  * 消息已读状态的
@@ -141,18 +35,20 @@ export const DictMessageStatus=[
 
 /**
  * 消息已读状态
- * @type UseDictionary
  */
-export const useMessageStatus=useDictionary.createDictionary({
-  defaultTypes: DictMessageStatus
+export const useMessageStatus= createDictionary({
+  types: DictMessageStatus,
+  onRender:onRenderSelectItem
 });
 
 
 /**
  * 用户状态
  */
-export const emUserState=  createDictionary([
-  {label:'启用',id:'1',name:'open'},
-  {label:'禁用',id:'0',name:'disabled'},
-  {label:'离职',id:'2',name:'out'},
-]);
+export const useState= createDictionary({
+  types:[
+    {label:'启用',id:'1',name:'open'},
+    {label:'禁用',id:'0',name:'disabled'},
+    {label:'离职',id:'2',name:'out'},
+  ]
+});

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

@@ -6,6 +6,7 @@ import React,{ useRef, useState} from 'react';
 import { matchPath } from 'react-router-dom';
 
 import {CONSOLE_LOG} from '@/utils';
+import { AUTH_ROUTE_DEBUG_OPEN } from '@/config';
 
 const MODULE_NAME='useRouteMenu';
 
@@ -61,11 +62,11 @@ const MODULE_NAME='useRouteMenu';
 
 
 
-const useRouteMenu=()=>{
+const useRouteMenu=(props)=>{
   /**
    * @type [RouteMenuItem[], React.Dispatch<React.SetStateAction<RouteMenuItem[]>>]
    */
-  const [source,setSource]= useState([]);
+  const [source,setSource]= useState(props?.source||[]);
 
   /**
    * @type React.MutableRefObject<number>
@@ -134,6 +135,10 @@ const useRouteMenu=()=>{
           }
         }
       }
+
+      if(AUTH_ROUTE_DEBUG_OPEN){
+        auth=true;
+      }
       // 隐藏的菜单
       if(menu.hideMenu){
         auth=false;
@@ -172,6 +177,23 @@ const useRouteMenu=()=>{
     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 - 需要匹配的路由路径
@@ -234,7 +256,7 @@ const useRouteMenu=()=>{
   }
 
 
-  return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig}
+  return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig,getMatchMenu}
 }
 
 export default useRouteMenu;