kn-cli 1.0.92 → 1.0.94

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

@@ -0,0 +1,232 @@
+
+
+// @ts-ignore
+import React,{ useRef, useState} from 'react';
+// @ts-ignore
+import { matchPath } from 'react-router-dom';
+
+
+/**
+ * 设置菜单属性
+ * @typedef MenuConfig
+ * @property {string} primaryId - 菜单的primaryId值
+ * @property {('msgCount'|'icon'|'name')} key - 需要设置的字段名称
+ * @property {any} value - 字段值
+ */
+
+/**
+ * 菜单项
+ * @typedef RouteMenuItem
+ * @property {string} name - 菜单展示的名称
+ * @property {string|JSX.Element} [icon] - 菜单图标
+ * @property {string} [url] - 菜单的URL地址
+ * @property {string} [routeTemplate] - 菜单的路由模版，用于匹配动态路由
+ * @property {number} [msgCount] - 菜单的未读消息数量
+ * @property {boolean} [hideMenu=false] - 是否为隐藏的菜单，隐藏的菜单不会展示独立菜单，但是会匹配路由
+ * @property {string[]} [auth] - 允许访问该菜单的权限列表
+ * @property {RouteMenuItem[]} [children] - 子菜单
+ * @property {string} [primaryId] - 菜单的唯一ID，如果存在primaryId，则菜单的key同primaryId
+ * @property {string} [key] - 会自动生成的菜单唯一ID，如果菜单配置内存在了primaryId，则会取该id
+ * @property {string} [parentKey] - 父级菜单的key，自动生成的
+ * 
+ */
+
+// 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=()=>{
+  /**
+   * @type [RouteMenuItem[], React.Dispatch<React.SetStateAction<RouteMenuItem[]>>]
+   */
+  const [source,setSource]= useState([]);
+
+  /**
+   * @type React.MutableRefObject<number>
+   */
+  const refKey = useRef(1);
+
+  /**
+   * @type React.MutableRefObject<Object<string,RouteMenuItem>>
+   */
+  const refKeyMap = 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){
+        if(menu.auth.some(menuAuthName=>userAuth.includes(menuAuthName)) == false){
+          auth=false;
+        }
+      }
+      // 隐藏的菜单
+      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;
+        }
+        list.push(item)
+      }
+    });
+    if(menus == source){
+      console.warn('[useRouteMenu]getMenu:',list)
+    }
+    return list
+  }
+
+  /**
+   * 计算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.warn(`[useRouteMenu]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])
+  }
+
+  return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig}
+}
+
+export default useRouteMenu;
+

package/templates/template_admin/public/src/mock/demo.js

@@ -0,0 +1,177 @@
+import {GET_REQUEST,waitTime} from './utils';
+import {RESPONSE_STRUCT} from '@/services';
+// @ts-ignore
+import moment from 'moment';
+
+// @ts-ignore
+import avatar1 from '@/assets/images/avatars/1.png';
+
+const MAX_TOTAL=98;
+let UPDATE_COUNT=0;
+let CREATE_COUNT=0;
+let LIST=null;
+
+function updateListData(){
+  let list=[];
+  const selectValue=['1','2','3','4','5','6']
+
+  const createData=(id)=>{
+    return {
+      id:`${id}`,
+      updateCount:UPDATE_COUNT,
+      name: `名称`+ `${id}`.padStart(2,'0'),
+      phone: `1370000`+ `${id}`.padStart(4,'0'),
+      date: moment().add(id,'minute').unix()*1000,//format('YYYY-MM-DD HH:mm:ss'),
+      select: selectValue[id%selectValue.length],
+      longName: `这是一个很长的名称`+ `${id}`.padStart(2,'0'),
+    }
+  };
+  
+  for(let i=0;i<MAX_TOTAL;i++){
+    list.push(createData(i))
+  }
+  for(let i=0;i<CREATE_COUNT;i++){
+    list.push(createData(300+i))
+  }
+  LIST=list;
+} 
+
+
+async function CREATE(req,res){
+  CREATE_COUNT++;
+  updateListData();
+  const query = JSON.parse(req.body);
+  await waitTime();
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:query,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+async function UPDATE(req,res){
+  UPDATE_COUNT++;
+  updateListData();
+  const query = JSON.parse(req.body);
+  await waitTime();
+  
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:query,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+async function GET_LIST(req){
+  const params = GET_REQUEST(req);
+  const {current,pageSize,...querys}= params;
+  if(!LIST)updateListData();
+  const strQuerys=JSON.stringify(querys);
+  let data=[];
+  let idx=(current-1)*pageSize;
+  for(let i=0;i<pageSize;i++){
+    if(idx>=MAX_TOTAL+CREATE_COUNT)break;
+    data.push({...LIST[idx],query:strQuerys});
+    idx++;
+  }
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:data,
+    [RESPONSE_STRUCT.PAGINATION]:{
+      current:current,
+      pageSize:pageSize,
+      total:MAX_TOTAL
+    },
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+async function GET_DETAIL(req){
+  const params = GET_REQUEST(req);
+  const {id}= params;
+  if(!LIST)updateListData();
+  for(let item of LIST){
+    if(item.id == id){
+      return {
+        [RESPONSE_STRUCT.CODE]:0,
+        [RESPONSE_STRUCT.DATA]:item,
+        [RESPONSE_STRUCT.MSG]:''
+      }
+    }
+  }
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:null,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+
+}
+
+
+let USER_INFO={
+  authorities:['leader','admin'],
+  realName:'cx',
+  name:'cx',
+  avater:avatar1,
+  unreadMsg:5,
+  token:'token',
+  username:'fanta',
+};
+async function GET_USER_INFO(req){
+  await waitTime();
+
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:USER_INFO,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+
+async function Login(req,res){
+  const query = JSON.parse(req.body);
+  await waitTime();
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:USER_INFO,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+async function KssoLogin(req,res){
+  await waitTime();
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:USER_INFO,
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+
+async function GET_ENUM_TYPE(req){
+  await waitTime();
+
+  return {
+    [RESPONSE_STRUCT.CODE]:0,
+    [RESPONSE_STRUCT.DATA]:[
+      {label:'类型1',key:'type1',value:'value1'},
+      {label:'类型2',key:'type2',value:'value2'},
+      {label:'类型3',key:'type3',value:'value3'},
+    ],
+    [RESPONSE_STRUCT.MSG]:''
+  }
+}
+
+
+export default {
+  '/demo/list':{get:GET_LIST},
+  '/demo/create':{post:CREATE},
+  '/demo/update':{post:UPDATE},
+  '/demo/detail':{get:GET_DETAIL},
+  '/demo/userInfo':{get:GET_USER_INFO},
+  '/demo/login':{post:Login},
+  '/demo/ksso/auth':{post:KssoLogin},
+  '/demo/enumType':{get:GET_ENUM_TYPE},
+
+
+}

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

@@ -1,6 +1,8 @@
+// @ts-ignore
 import mock from 'mockjs-async';
 
-import auth from './auth.js';
+import demo from './demo.js';
+
 function regMock(list){
   if(list){
     let keys = Object.keys(list)
@@ -49,9 +51,10 @@ function regMock(list){
   }
 }
 /* eslint-disable */
+// @ts-ignore
 if(MOCK){
   console.log(`=========MOCK OPEN=======`)
-  regMock(auth);
+  regMock(demo);
 }else{
   console.log(`=========MOCK CLOSE=======`)
 }

package/templates/template_admin/public/src/pages/demo/detail/index.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState, useRef } from 'react';
+// @ts-ignore
+import { useParams,useNavigate } from 'react-router-dom';
+
+// @ts-ignore
+import {Button} from 'antd';
+
+// @ts-ignore
+import styles from '@/pages/demo/index.less';
+
+
+
+const Detail=()=>{
+  const {id} = useParams();
+  const navigate= useNavigate();
+  const onBack=()=>{
+    window.history.back();
+  }
+  return (
+    <section className={styles.contentWrap}>
+      <p>id:{id}</p>
+      <Button type='primary' onClick={onBack}>返回</Button>
+    </section>
+  )
+}
+
+export default Detail;

package/templates/template_admin/public/src/pages/demo/edit/index.jsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+// @ts-ignore
+import moment from 'moment';
+// @ts-ignore
+import { Modal, Form, Input, Select, message, DatePicker,Spin } from 'antd';
+import Popup from '@/components/popup';
+import { GET_DETAIL,CREATE,UPDATE } from '@/services/demo';
+import rule from '@/utils/rule';
+
+
+
+const DialogEdit = (props) => {
+  const { destory, id=null } = props;
+  const [form] = Form.useForm();
+  const [record,setRecord]=useState(null)
+
+  const init=async ()=>{
+    if(id){
+      const req= await GET_DETAIL({id})
+      if(req?.code==0 && req?.data){
+        let item= req.data;
+        item.date = moment(item.date);
+        setRecord(item);
+        return;
+      }
+    }
+    setRecord({
+
+    })
+  }
+  const onOk = async () => {
+    try {
+      const values = await form.validateFields();
+      const params = {
+        ...values,
+      };
+      let res = null;
+      if (id) {
+        res = await UPDATE({id,...params});
+      } else {
+        res = await CREATE(params);
+      }
+      if (res?.code === 0) {
+        message.success('成功');
+        destory && destory(true);
+      }
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  };
+
+  const onCancel = () => {
+    form.resetFields();
+    destory && destory(false);
+  };
+  useEffect(()=>{
+    init();
+  },[])
+
+  return (
+      <Modal
+        title={id? '编辑用户' : '新增用户'}
+        width={600}
+        open={true}
+        onOk={onOk}
+        onCancel={onCancel}
+      >
+        {
+          !record?
+          <Spin/>:
+          <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} form={form} initialValues={record||{}}>
+            <Form.Item label="姓名" name="name">
+              <Input placeholder="请输入" />
+            </Form.Item>
+            <Form.Item label="创建时间" name="date" rules={rule.SELECT} required>
+              <DatePicker style={{width:'100%'}}/>
+            </Form.Item>
+
+            <Form.Item
+              label="手机号码"
+              name="phone"
+            >
+              <Input  />
+            </Form.Item>
+
+            <Form.Item label="绑定号码" name="select" required rules={rule.SELECT}>
+              <Select>
+                <Select.Option value={1}>1</Select.Option>
+                <Select.Option value={2}>2</Select.Option>
+              </Select>
+            </Form.Item>
+          </Form>
+        }
+      </Modal>
+
+  );
+};
+
+const ShowEdit = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactDom.render(
+      <DialogEdit destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowEdit;

package/templates/template_admin/public/src/pages/demo/index.less

@@ -0,0 +1,9 @@
+
+.contentWrap{
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding:var(--padding-small);
+}