kn-cli 1.0.93 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/template_admin/public/src/components/layout/basic/index.less

@@ -17,9 +17,9 @@
     background-color: var(--color-body-background);
     flex:1;
     height:100%;
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
   }
 
 }

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

@@ -42,6 +42,7 @@ const TopMenu=()=>{
     return req;
   }
 
+
   const reload= async ()=>{
     providerMenu.reload();
   }
@@ -53,15 +54,24 @@ const TopMenu=()=>{
     setMenus(menuList);
   },[providerMenu.topMenu]);
 
+  useEffect(()=>{
+    providerMenu.setUserAuth(app.user.authorities||[]);
+  },[app.user])
+  
   useEffect(()=>{
     reload();
   },[])
 
 
   // 推出登录
-  const onAvatarClick = (e)=>{
-    if (e?.key === 'logout') {
+  const onAvatarClick = (key)=>{
+    if(key==='user'){
+      app.updateUserInfo();
+    }
+    else if (key === 'logout') {
       app.logout();
+    }else if(key=='relogin'){
+      navigate('/superAdminLogin')
     }
   }
   const onHome=()=>{
@@ -73,6 +83,7 @@ const TopMenu=()=>{
     navigate(menu.url);
   }
 
+
   return (
     <section className={styles.topMenu}>
       <div className={styles.left}>
@@ -81,7 +92,7 @@ const TopMenu=()=>{
       
       <div className={styles.center}>
         {
-          menus&&menus.length>1&&
+          menus&&menus.length>=1&&
           <Menu 
             items={menus}
             mode="horizontal" 
@@ -94,19 +105,21 @@ const TopMenu=()=>{
       <div className={styles.right}>
         
         <span className={styles.username}>Hi,{app?.user?.username||''}!</span>
-        <Dropdown menu={(
-          <Menu onClick={onAvatarClick} className={styles.avatarMenu}>
-            <Menu.Item key="user">
-            <UserOutlined />
-            用户名
-            </Menu.Item>
+        <Dropdown menu={{items:[
+            {
+              key:'user',
+              label:<span onClick={onAvatarClick.bind(this,'user')}><UserOutlined />刷新用户权限</span>
+            },
+            {
+              key:'relogin',
+              label:<span onClick={onAvatarClick.bind(this,'relogin')}><UserOutlined />重新登录</span>
+            },
+            {
+              key:'logout',
+              label:<span onClick={onAvatarClick.bind(this,'logout')}><LogoutOutlined />退出登录</span>
+            }
             
-            <Menu.Item key="logout">
-              <LogoutOutlined />
-              退出登录
-            </Menu.Item>
-          </Menu>
-        )}>
+          ]}}>
           <img className={styles.avatar} src={imgAvatar}/>
         </Dropdown>
         

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

@@ -0,0 +1,62 @@
+import React,{useCallback} from 'react';
+// @ts-ignore
+import { Table } from 'antd';
+
+/**
+ * 页面公共Table组件
+ * @param {object} [props] 
+ * @param {string} [props.rowKey] - Table主键
+ * @param {boolean} [props.loading] - 是否加载中
+ * @param {Array} [props.columns] - 表格列
+ * @param {Array} [props.dataSource] - 数据数组
+ * @param {object} [props.pagination] - 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
+ * @param {object} [props.scroll] - 表格是否可滚动
+ * @param {object} [props.page] - 表格数据，包括数据数组、分页参数、loading等
+ * 
+ * @returns {JSX.Element}
+ */
+const PageTable = (props) => {
+  const {
+    rowKey,
+    loading,
+    columns,
+    dataSource,
+    pagination,
+    scroll,
+    page,
+    ...others
+  } = props;
+
+  const paginationFn = useCallback(() => {
+    // pagination=false时不分页
+    if (typeof pagination === 'boolean') {
+      return pagination;
+    }
+    return {
+      pageSizeOptions: [10, 15, 20, 50, 100],
+      current: page?.pagination?.current,
+      pageSize: page?.pagination?.pageSize,
+      total: page?.pagination?.total,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+  }, [pagination, page]);
+
+  return (
+    <Table
+      rowKey={rowKey ?? 'id'}
+      bordered
+      size="small"
+      loading={loading ?? page?.loading?.state}
+      columns={columns}
+      dataSource={
+        dataSource ?? (page?.data?.[page?.pagination?.current - 1] || [])
+      }
+      pagination={paginationFn()}
+      scroll={scroll ?? { y: 500 }}
+      {...others}
+    />
+  );
+};
+
+export default PageTable;

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

@@ -6,10 +6,40 @@ import {useDictionary} from 'kn-hooks';
 // @ts-ignore
 import {Select,Radio} from 'antd';
 
-import {GET_USER_TYPE} from '@/services/user';
+import {GET_ENUM_TYPE} from '@/services/demo'
+
 import ShowToast from '@/components/toast';
 
 
+
+/**
+ * @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}
+ */
+
+
+
 export const SelectOption=(props)=>{
   const {value}=props;
   const name = props['data-keyname'];
@@ -24,8 +54,8 @@ export const SelectOption=(props)=>{
 useDictionary.SetConfig({SelectOption:Select.Option, RadioOption: Radio })
 
 
-export const useUserType = useDictionary.createDictionary({
-  api:GET_USER_TYPE,
+export const useDemoType = useDictionary.createDictionary({
+  api:GET_ENUM_TYPE,
   afterApi:(response)=>{
     if(response?.code==0){
       let req= response.data.map(item=>{
@@ -45,3 +75,15 @@ export const useTaskState= useDictionary.createDictionary({
   ]
 });
 
+
+/**
+ * 健康状态
+ * @type UseDictionary
+ */
+export const useHealthy= useDictionary.createDictionary({
+  defaultTypes:[
+    {label:'正常',id:'normal',name:'normal'},
+    {label:'异常',id:'abnormal',name:'abnormal'},
+    {label:'禁用',id:'disabled',name:'disabled'},
+  ]
+});

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

@@ -0,0 +1,184 @@
+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 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},
+
+
+}

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);
+}