kn-cli 1.0.97 → 1.0.98

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

@@ -1,15 +1,15 @@
-
-
 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 useRouteMenu from './useRouteMenu';
+import useDebounceFn from './useDebounceFn';
+import useInToView from './useInToView';
+import useTimer from './useTimer';
 
 // @ts-ignore
-import {usePagination,usePaginationWithForm} from 'kn-hooks';
+import { usePagination, usePaginationWithForm } from 'kn-hooks';
 
 export {
   usePaginationWithForm,
@@ -20,5 +20,7 @@ export {
   useSearch,
   useUpdate,
   useLoading,
-  useRouteMenu
-}
+  useDebounceFn,
+  useInToView,
+  useTimer
+};

package/templates/template_admin/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/public/src/hooks/useInToView.jsx

@@ -0,0 +1,58 @@
+// @ts-ignore
+import React, { useEffect,useState,useMemo,useRef,useCallback } from 'react';
+
+
+const useInToView=()=>{
+  const [visible,setVisible]= useState(false);
+  const [visibled,setVisibled]= useState(false);
+  const refDom= useRef();
+  const refObserver=useRef();
+
+  const destory=()=>{
+    if(refObserver.current){
+      // @ts-ignore
+      refObserver.current=disconnect();
+      refObserver.current=null;
+    }
+  }
+
+  useEffect(()=>{
+    return ()=>{
+      destory();
+    }
+  },[refObserver]);
+
+  const watch=(dom)=>{
+    let observe;
+    destory();
+    setDom(dom);
+    if(!refDom.current)return;
+    observe = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio <= 0) {
+        setVisible(false);
+        return;
+      }
+      setVisible(true);
+      setVisibled(true);
+    });
+    observe.observe(refDom.current);
+    // @ts-ignore
+    refObserver.current=observe;
+  }
+  const setDom=(dom)=>{
+    if(typeof dom == 'string'){
+      refDom.current = document.querySelector(dom);
+      if(!refDom.current)return;
+    }else{
+      refDom.current= dom;
+    }
+  }
+
+  return {
+    visible,
+    visibled,
+    watch
+  }
+}
+
+export default useInToView;

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

@@ -5,31 +5,9 @@ import React,{ useRef, useState} from 'react';
 // @ts-ignore
 import { matchPath } from 'react-router-dom';
 
+import {CONSOLE_LOG} from '@/utils';
 
-/**
- * 设置菜单属性
- * @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 MODULE_NAME='useRouteMenu';
 
 // const MenuData=[
 //   {
@@ -82,6 +60,7 @@ import { matchPath } from 'react-router-dom';
 // ]
 
 
+
 const useRouteMenu=()=>{
   /**
    * @type [RouteMenuItem[], React.Dispatch<React.SetStateAction<RouteMenuItem[]>>]
@@ -98,6 +77,11 @@ const useRouteMenu=()=>{
    */
   const refKeyMap = useRef();
 
+  /**
+   * @type React.MutableRefObject<object>
+   */
+  const refSelf = useRef();
+
   /**
    * 遍历菜单，给菜单创建key，并创建map表以便快速查找菜单数据
    * @param {RouteMenuItem[]} data - 菜单列表数据
@@ -143,8 +127,11 @@ const useRouteMenu=()=>{
       let auth= true;
       // 判断用户有没有权限可以访问这个菜单
       if(menu.auth){
-        if(menu.auth.some(menuAuthName=>userAuth.includes(menuAuthName)) == false){
-          auth=false;
+        // 不是数组的话代表menu.auth是一个boolean变量，代表长期展示菜单
+        if(Array.isArray(menu.auth)){
+          if(menu.auth.some(menuAuthName=>userAuth?.includes(menuAuthName)) == false){
+            auth=false;
+          }
         }
       }
       // 隐藏的菜单
@@ -158,12 +145,29 @@ const useRouteMenu=()=>{
         if(item.children&&item.children.length>0){
           const chidList= getMenu(item.children, userAuth);
           item.children = chidList.length>0?chidList:null;
+          if(item.children){
+            let msgCount=0;
+            item.children.forEach(subMenu=>{
+              if(subMenu.msgCount){
+                msgCount += Number(subMenu.msgCount);
+              }
+            })
+            item.msgCount = msgCount;
+            list.push(item)
+          }else{
+            // 如果子菜单全部隐藏了，但是父菜单显示写了自己的权限的话，只要有权限则展示父节点
+            if(menu.auth){
+              list.push(item);
+            }
+          }
+          // 如果子菜单都没有权限访问，则父菜单也没必要展示了
+          return;
         }
         list.push(item)
       }
     });
     if(menus == source){
-      console.warn('[useRouteMenu]getMenu:',list)
+      CONSOLE_LOG(MODULE_NAME,'getMenu:',list)
     }
     return list
   }
@@ -193,7 +197,7 @@ const useRouteMenu=()=>{
     }
     if(matchMenu){
       const menus= getParentMenus(matchMenu);
-      console.warn(`[useRouteMenu]openMenus:`,menus)
+      CONSOLE_LOG(MODULE_NAME,'openMenus:',menus)
       return menus;
     }
     return [];
@@ -225,6 +229,11 @@ const useRouteMenu=()=>{
     setSource([...source])
   }
 
+  refSelf.current={
+    setMenuConfig
+  }
+
+
   return {setSourceMap,getOpenMenus,getMenu,source,findMenuData,setMenuConfig}
 }
 

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

@@ -0,0 +1,42 @@
+// @ts-ignore
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+const useTimer=(ms)=>{
+  const [time,setTime] = useState(0);
+  const refTimer = useRef();
+  const refTime = useRef();
+
+  useEffect(()=>{
+    // @ts-ignore
+    refTime.current = {time,setTime};
+  })
+  useEffect(()=>{
+    return ()=>{
+      if(refTimer.current){
+        window.clearInterval(refTimer.current);
+      }
+    }
+  },[])
+  useEffect(()=>{
+    if(refTimer.current){
+      window.clearInterval(refTimer.current);
+    }
+    // @ts-ignore
+    refTimer.current = setInterval(()=>{
+      // @ts-ignore
+      refTime.current.setTime(v=>v+ms);
+    },ms);
+
+
+  },[ms]);
+
+  const actions=useMemo(()=>{
+    return {
+      time,
+    };
+  },[time]);
+
+  return actions;
+}
+
+export default useTimer;

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

@@ -9,6 +9,9 @@ import {HashRouter} from 'react-router-dom';
 import './_antd.less';
 import './_reset.less';
 import {RouteList} from './route';
+// @ts-ignore
+import moment from 'moment';
+moment.locale('zh-cn');
 
 // @ts-ignore
 if(MOCK){
@@ -25,13 +28,13 @@ window.appLog=(txt)=>{
 /* eslint-disable */
 // @ts-ignore
 if(BUILD_ENV!='prod'){
-  // @ts-ignore
-  let VConsole =  require('vconsole');
-  // @ts-ignore
-  const vConsole = new VConsole();
-  setTimeout(() => {
-    vConsole.setSwitchPosition(70, 10);
-  }, 2000);
+  // // @ts-ignore
+  // let VConsole =  require('vconsole');
+  // // @ts-ignore
+  // const vConsole = new VConsole();
+  // setTimeout(() => {
+  //   vConsole.setSwitchPosition(70, 10);
+  // }, 2000);
 }
 // @ts-ignore
 if(BUILD_ENV){

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

@@ -0,0 +1,33 @@
+import {GET_REQUEST,waitTime} from './utils';
+import {RESPONSE_STRUCT} from '@/services';
+
+async function KSSOLOGIN(req,res){
+  const params = GET_REQUEST(req);
+  
+  await waitTime();
+  return {
+    "code": 0,
+    "msg": "操作成功",
+    "data": {
+      "authorities": [],
+      "details": {
+        "remoteAddress": "172.16.32.116",
+        "sessionId": null
+      },
+      "authenticated": false,
+      "principal": "changx",
+      "credentials": null,
+      "token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjaGFuZ3giLCJtb2RpZnkiOjAsInJlYWxOYW1lIjoi5bi45petIiwiY3JlYXRlZCI6MTcxMTQ0MTA5NzU2NSwidXNlck5hbWUiOiJjaGFuZ3giLCJleHAiOjE3MTE0ODQyOTcsInVzZXJJZCI6MTQsImp0aSI6MTQsImF1dGhvcml0aWVzIjpbeyJhdXRob3JpdHkiOiJncm91cC5kZWxldGUifSx7ImF1dGhvcml0eSI6InVzZXIudmlldyJ9LHsiYXV0aG9yaXR5Ijoicm9sZSJ9LHsiYXV0aG9yaXR5IjoicGVybWlzc2lvbi52aWV3In0seyJhdXRob3JpdHkiOiJkZXZpY2VfZ3JvdXAifSx7ImF1dGhvcml0eSI6InJvbGUudmlldyJ9LHsiYXV0aG9yaXR5IjoicGVybWlzc2lvbiJ9LHsiYXV0aG9yaXR5IjoiZ3JvdXAudmlldyJ9LHsiYXV0aG9yaXR5IjoiZGV2aWNlX2dyb3VwLmRlbGV0ZSJ9LHsiYXV0aG9yaXR5IjoidXNlci5lZGl0In0seyJhdXRob3JpdHkiOiJncm91cC5lZGl0In0seyJhdXRob3JpdHkiOiJkZXZpY2VfZ3JvdXAuYWRkIn0seyJhdXRob3JpdHkiOiJkZXZpY2VfZ3JvdXAuZWRpdCJ9LHsiYXV0aG9yaXR5IjoiZGV2aWNlX2dyb3VwLnZpZXcifSx7ImF1dGhvcml0eSI6InVzZXIifV19.aedlb-P96FuWt_xhqLuTOcudcZqThzloxcJpTmlanCB9bm2e_5RGlcPWxBbi7mdj5VGIQ36gCf1SDxy7aPewbw",
+      "userId": "14",
+      "username": "changx",
+      "realName": "常旭",
+      "isAdmin": false,
+      "modify": null,
+      "name": "changx"
+    }
+  }
+}
+
+export default {
+  '/api/ksso/auth':{post:KSSOLOGIN},
+}

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

@@ -1,11 +1,9 @@
+import qs from 'qs';
 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;
@@ -22,8 +20,18 @@ function updateListData(){
       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'),
+      dateRange: [moment().add(id,'minute').unix()*1000,moment().add(id,'day').unix()*1000],
       select: selectValue[id%selectValue.length],
       longName: `这是一个很长的名称`+ `${id}`.padStart(2,'0'),
+      imgName: 'https://nebula-api.oss-cn-shanghai.aliyuncs.com/20240329/24163932-85ea-4372-9ff7-ee7c71748bcb/1711691401353-95387929.jpeg',
+      previewSrcs:[
+        'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522544778-46413274',
+        'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522539477-71557179',
+        'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522552637-65222632',
+        'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522549224-81138313',
+      ],
+      videoName:'https://nebula-api.oss-cn-shanghai.aliyuncs.com/20240329/fc172bf8-1f61-4464-8d48-29b98a42fb4a/1711701991414-12827489.mp4',
+      disabled:id%2?true:false
     }
   };
   
@@ -106,79 +114,9 @@ async function GET_DETAIL(req){
   }
 
 }
-
-
-let GET_USER_INFO_COUNT=0;
-let USER_INFO={
-  authorities:['leader','admin'],
-  realName:'cx',
-  name:'cx',
-  avater:avatar1,
-  unreadMsg:5,
-  token:'token',
-  username:'fanta',
-};
-function _GET_USER_INFO(){
-  let req = {...USER_INFO};
-  req.authorities = GET_USER_INFO_COUNT%2==0?['leader']:['leader','admin'];
-  GET_USER_INFO_COUNT++;
-  return req;
-}
-async function GET_USER_INFO(req){
-  await waitTime();
-
-  return {
-    [RESPONSE_STRUCT.CODE]:0,
-    [RESPONSE_STRUCT.DATA]:_GET_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]:_GET_USER_INFO(),
-    [RESPONSE_STRUCT.MSG]:''
-  }
-}
-
-async function KssoLogin(req,res){
-  await waitTime();
-  return {
-    [RESPONSE_STRUCT.CODE]:0,
-    [RESPONSE_STRUCT.DATA]:_GET_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},
-
-
+  '/demo/detail':{get:GET_DETAIL}
 }

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

@@ -50,6 +50,7 @@ function regMock(list){
     })
   }
 }
+
 /* eslint-disable */
 // @ts-ignore
 if(MOCK){

package/templates/template_admin/public/src/pages/auth/user/create/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Space,
+  Form,
+  Button,
+  Input,
+  Select,
+  Tabs,
+  Badge
+  // @ts-ignore
+} from 'antd';
+// @ts-ignore
+import {PlusOutlined} from '@ant-design/icons';
+
+import ruler from '@/utils/rule';
+import {px2rem} from '@/utils';
+import {Layout,SearchBar,TitleBar,Content,Panel} from '@/pages/components/layout'
+import {emUserState} from '@/dictionary';
+import Table from '@/components/table';
+import { usePaginationWithForm } from '@/hooks';
+import Link from '@/components/link';
+import {FormatTableService,FormatGetRequest} from '@/services'
+import {
+  GET_LIST,
+} from '@/services/demo';
+
+// @ts-ignore
+import styles from './index.less';
+
+const AuthUserCreate = () => {
+  return (
+    <Layout>
+      <SearchBar>
+        <TitleBar label='新建用户' showBack optionRight={
+          <div className={styles.btns}>
+            <Button type='primary'>保存</Button>
+            <Button>取消</Button>
+          </div>
+        }/>
+      </SearchBar>
+
+      <Content>
+        <Panel title='基础信息'>
+          <div>123123</div>
+        </Panel>
+        <Panel title='权限配置'>
+          <div>123123</div>
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default AuthUserCreate;

package/templates/template_admin/public/src/pages/auth/user/create/index.less

@@ -0,0 +1,6 @@
+
+.btns{
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}

package/templates/template_admin/public/src/pages/auth/user/dialog/index.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+// @ts-ignore
+import { Modal, Form, Input, message,Spin } from 'antd';
+import Popup from '@/components/popup';
+import { UPDATE,GET_DETAIL } 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;
+        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});
+      } 
+      if (res?.code === 0) {
+        message.success('成功');
+        destory && destory(true);
+      }
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  };
+
+  const onCancel = () => {
+    form.resetFields();
+    destory && destory(false);
+  };
+
+  useEffect(()=>{
+    init();
+  },[])
+  const isEdit=id?true:false;
+  return (
+    <Modal
+      maskClosable={false}
+      title={isEdit? '编辑用户' : '新增用户'}
+      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="userId"
+            ruler={rule.INPUT}
+            required
+          >
+            <Input placeholder="请输入" disabled={isEdit}/>
+          </Form.Item>
+          <Form.Item label="昵称" name="bindNickname" ruler={rule.INPUT}>
+            <Input placeholder="请输入" />
+          </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;