kn-cli 1.0.91 → 1.0.93

package/templates/template_oa_jwt/public/src/components/dialog/index.jsx

@@ -0,0 +1,237 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import ReactDOM from 'react-dom';
+// @ts-ignore
+import { Button } from 'antd';
+
+import IconFont from '@/components/iconFont';
+
+import Popup from '@/components/popup';
+// @ts-ignore
+import styles from './index.less';
+
+
+/**
+ * 对话框组件
+ * @param {object} props 
+ * @param {string} props.title - 对话框的标题内容
+ * @param {string} [props.okText='确认'] - 确认按钮文案
+ * @param {string} [props.cancelText='取消'] - 取消按钮文案
+ * @param {boolean} [props.noCancel=false] - 不显示取消按钮
+ * @param {()=>Promise<boolean>} [props.onOk] - 点击确认按钮回调
+ * @param {()=>Promise<boolean>} [props.onClose] - 点击关闭的回调
+ * @param {()=>void} [props.destory] - 对话框销毁的回调
+ * @param {JSX.Element|any} [props.children] - 子组件
+ * 
+ * @returns {JSX.Element}
+ */
+const Dialog = (props) => {
+  const {
+    title='',
+    okText='确认',
+    cancelText='取消',
+    noCancel=false,
+    onOk:fnOnOk,
+    onClose:fnOnClose,
+    destory,
+    children
+  }= props;
+  async function onClose() {
+    if (fnOnClose) {
+      let ret = await fnOnClose();
+      if (ret) {
+        destory();
+      }
+    } else {
+      destory();
+    }
+  }
+  async function onOk() {
+    if (fnOnOk) {
+      let ret = await fnOnOk();
+      if (ret) {
+        destory();
+      }
+    } else {
+      destory();
+    }
+  }
+  return (
+    <section className={styles.body}>
+      <div className={styles.mask} />
+      <section className={styles.wrap}>
+        <div className={styles.header}>
+          <span>{title}</span>
+          <IconFont icon='close' className={styles.close} onClick={onClose} />
+        </div>
+
+        {children}
+
+        <div className={styles.footer}>
+          <Button type='primary' onClick={onOk}>
+            {okText}
+          </Button>
+          {noCancel ? (
+            ''
+          ) : (
+            <Button onClick={onClose} style={{ marginLeft: '10px' }}>
+              {cancelText}
+            </Button>
+          )}
+        </div>
+      </section>
+    </section>
+  );
+};
+
+/**
+ * 显示一个对话框
+ * @param {Object} props 
+ * @param {string} props.title - 对话框标题
+ * @param {string} [props.okText='确认'] - 确认按钮文案
+ * @param {string} [props.cancelText='取消'] - 取消按钮文案
+ * @param {boolean} [props.noCancel=false] - 不显示取消按钮
+ * @param {()=>Promise<boolean>} [props.onOk] - 点击确认按钮回调
+ * @param {()=>Promise<boolean>} [props.onClose] - 点击关闭的回调
+ * @param {JSX.Element|any} [props.component] - 对话框内的实际内容
+ * 
+ * @returns {Promise<boolean>}
+ */
+export const ShowDialog = (props={title:''}) => {
+  const {title,onOk,okText,cancelText,noCancel,onClose,component}= props;
+  return new Promise((reslove) => {
+    let popup = Popup(reslove);
+    ReactDOM.render(
+      <Dialog
+        title={title}
+        destory={popup.destory}
+        onOk={onOk}
+        okText={okText}
+        cancelText={cancelText}
+        noCancel={noCancel}
+        onClose={onClose}
+      >
+        {component}
+      </Dialog>,
+      popup.dom
+    );
+  });
+};
+
+/**
+ * 一个带确认和取消的确认对话框
+ * @param {Object} props 
+ * @param {string} props.title - 对话框标题
+ * @param {string} [props.okText='确认'] - 确认按钮文案
+ * @param {string} [props.cancelText='取消'] - 取消按钮文案
+ * @param {boolean} [props.noCancel=false] - 不显示取消按钮
+ * @param {JSX.Element|any} [props.content] - 对话框内的实际内容
+ * @returns {Promise<boolean>}
+ */
+export const ShowConfirm = async (props) => {
+  if (typeof props === 'string') {
+    // @ts-ignore
+    props = { content: props };
+  }
+  const {title='注意',okText='确认',cancelText='取消',noCancel=false,content}= props;
+
+  let result = false;
+  await ShowDialog({
+    title: title || '注意',
+    okText: okText || '确认',
+    cancelText: cancelText || '取消',
+    noCancel: noCancel,
+    onClose: async () => {
+      result = false;
+      return Promise.resolve(true);
+    },
+    onOk: async () => {
+      result = true;
+      return Promise.resolve(true);
+    },
+    component: (
+      <div className={styles.confirmWrap}>
+        {content}
+      </div>
+    ),
+  });
+  return result;
+};
+
+/**
+ * 一个只有确认按钮的提示框
+ * @param {Object} props 
+ * @param {string} [props.okText='确认'] - 确认按钮文案
+ * @param {JSX.Element|any} [props.content] - 对话框内的实际内容
+ * @param {()=>void} [props.onOk] - 点击确认的回调
+ * @param {()=>void} props.destory - 关闭对话框的回调
+ * @param {string} [props.type='error'] - 警告类型,'error'|'suuccess'
+ * 
+ * @returns {JSX.Element}
+ */
+const Alert = (props) => {
+  const {onOk:fnOnOk,destory,type,content,okText='确认'}= props;
+  function onOk() {
+    if (fnOnOk) fnOnOk();
+    destory();
+  }
+  return (
+    <section className={styles.body }>
+      <div className={styles.mask} />
+      <section className={styles.wrapAlert}>
+        <div className={styles.alertContent}>
+          <div className={type === 'success' ? styles.iconSuccess : styles.iconError} />
+          <span>{content}</span>
+        </div>
+        <div className={styles.alertFooter}>
+          <span onClick={onOk}>{okText}</span>
+        </div>
+      </section>
+    </section>
+  );
+};
+
+/**
+ * 显示一个alert
+ * @param {Object} props 
+ * @param {JSX.Element|any} [props.content] - 对话框内的实际内容
+ * @param {()=>void} [props.onOk] - 点击确认的回调
+ * @param {string} [props.type='success'] - 警告类型,'error'|'suuccess'
+ * 
+ * @returns {Promise<void>}
+ */
+export const ShowAlert = (props) => {
+  if (props.constructor === String) {
+    // @ts-ignore
+    props = { content: props };
+  }
+
+  const {type='success',onOk,content}=props;
+
+  return new Promise((reslove) => {
+    let popup = Popup(reslove);
+
+    ReactDOM.render(
+      <Alert destory={popup.destory} type={type} onOk={onOk} content={content} />,
+      popup.dom
+    );
+  });
+};
+
+/**
+ * 显示一个错误提示alert
+ * @param {Object} props 
+ * @param {JSX.Element|any} [props.content] - 对话框内的实际内容
+ * @param {()=>void} [props.onOk] - 点击确认的回调
+ * 
+ * @returns {Promise<void>}
+ */
+export const ShowErrorAlert = (props) => {
+  if (props.constructor === String) {
+    props = { content: props };
+  }
+  return ShowAlert({ ...props, type: 'fail' });
+};
+
+export default Dialog;

package/templates/template_oa_jwt/public/src/components/{Empty → empty}/index.jsx

@@ -1,9 +1,18 @@
+// @ts-ignore 
 import React from 'react';
+// @ts-ignore 
 import { Empty, Button } from 'antd';
+
+// @ts-ignore 
 import styles from './index.less';
 
 /**
  * 当table数据为空时下方有“添加数据”按钮
+ * @param {object} props 
+ * @param {()=>void} [props.onClick] - 点击添加数据的回调
+ * @param {boolean} [props.editmode] - 是否允许编辑模式，允许的话就会有添加数据的按钮
+ * 
+ * @returns {JSX.Element}
  */
 function TableEmpty(props) {
   return (

package/templates/{template_oa/public/src/components/FormRow → template_oa_jwt/public/src/components/formRow}/index.jsx

@@ -1,6 +1,16 @@
-import React, { useState } from 'react';
+// @ts-ignore
+import React from 'react';
+
+// @ts-ignore
 import styles from './index.less';
 
+/**
+ * 表单的行组件,用于将子组件按照一行2列方式排列
+ * @param {Object} props 
+ * @param {JSX.Element[]|JSX.Element} props.children
+ * 
+ * @returns {JSX.Element}
+ */
 const FormRow = (props) => {
   function createCol(item, idx) {
     if (!item) return '';
@@ -9,6 +19,7 @@ const FormRow = (props) => {
       <div key={idx} className={styles.formRow}>
         <hgroup className={styles.row}>
           <div className={styles.title}>
+            {/* @ts-ignore */}
             <div required={editmode && item.props.required}>{item.props.label}</div>
           </div>
           <div className={styles.data}>{item}</div>
@@ -18,20 +29,31 @@ const FormRow = (props) => {
   }
   return (
     <section className={styles.formRowBody}>
+      {/* @ts-ignore */}
       {props.children.length > 0 ? props.children.map(createCol) : createCol(props.children)}
     </section>
   );
 };
 
+/**
+ * 表单的行组件中的列组件
+ * @param {Object} props 
+ * @param {JSX.Element[]|JSX.Element} props.children
+ * @param {boolean} [props.editmode=true] - 可编辑模式
+ * @param {string} [props.txtdata='-'] - 列的标题
+ * @param {boolean} [props.textarea=false] - 是否多行显示文本
+ * 
+ * @returns {JSX.Element|JSX.Element[]|any}
+ */
 function HocEditControl(props) {
   const { editmode = true, txtdata ,textarea} = props;
   if (editmode) {
     return props.children;
   }
   if(textarea){
-    return <span style={{whiteSpace:'pre-wrap'}}>{txtdata||'-'}</span>
+    return <span style={{whiteSpace:'pre-wrap'}}>{txtdata}</span>
   }
-  return <span>{txtdata || '-'}</span>;
+  return <span>{txtdata}</span>;
 }
 
 FormRow.Col = HocEditControl;

package/templates/{template_oa/public/src/components/FormTable → template_oa_jwt/public/src/components/formTable}/index.jsx

@@ -1,6 +1,46 @@
+// @ts-ignore
 import React ,{useImperativeHandle,useState,forwardRef} from 'react';
+
+// @ts-ignore
 import uuid from 'js-uuid';
 
+// @ts-ignore
+import styles from './index.less';
+
+
+/**
+ * @typedef {object} ColumnsOptions
+ * @property {string} formItemName
+ * @property {(record:any,index:number,event:any)=>void} onDel
+ * @property {(record:any,index:number,event:any)=>void} onAdd
+ * @property {(record:any,index:number,event:any)=>void} onCopy
+ * @property {(initValue:[],event:any)=>void} onReset
+ */
+
+/**
+ * 表格表单组件
+ * @param {Object} props 
+ * @param {JSX.Element|any} props.Table - Table组件，一般为antd的Table组件 
+ * @param {Object} props.form - Form组件
+ * @param {string} props.formItemName - 表格FormItem的name
+ * @param {boolean} [props.saveLast=false] - 是否当没有数据时，默认保留一行数据
+ * @param {Object[]} [props.initialValue] - 初始数据
+ * 
+ * @param {(record:object,index:number)=>object[]} [props.onCopy] - 点击复制的回调
+ * @param {(record:object,index:number)=>object[]} [props.onAdd] - 点击添加的回调
+ * 
+ * @param {(value:any)=>void} [props.onChange] - 数据发生变动时的回调
+ * @param {(value:any)=>void} [props.onRefresh] - 刷新时的回调
+ * 
+ * @param {(options:ColumnsOptions)=>[]} props.columns - 获取列配置数据的回调
+ * 
+ * @param {Object} [props.newdata] - 添加新行的数据模版
+ * @param {Object} [props.antTableOptions] - antd的Table扩展参数
+ * 
+ * @param {any} ref 
+ * 
+ * @returns 
+ */
 const TableFormItem =(props,ref)=> {
   const {Table,form,formItemName,saveLast} = props;
   const getNewId=()=>{
@@ -119,10 +159,9 @@ const TableFormItem =(props,ref)=> {
     onReset,
   }));
 
-
   return (
-   
     <Table
+      className={styles.table}
       {...{rowKey: '_rowKey',...props.antTableOptions}}
       dataSource={value}
       columns={props.columns({formItemName,onDel, onAdd,onReset,onCopy})}

package/templates/template_oa_jwt/public/src/components/formTable/index.less

@@ -0,0 +1,18 @@
+.table {
+  tr {
+    th, th>div {
+      text-align: center;
+      &[required]:before {
+        font-size: 0.12rem;
+        content: '*';
+        color: #f04134;
+        margin-right: 10px;
+      }
+    }
+  }
+  :global {
+    .ant-form-item-explain-error {
+      text-align: left;
+    }
+  }
+}

package/templates/template_oa_jwt/public/src/components/iconFont/index.jsx

@@ -0,0 +1,22 @@
+// @ts-ignore
+import React from "react";
+
+// @ts-ignore
+import styles from'./index.less';
+
+/**
+ * iconFont图标
+ * @param {object} props 
+ * @param {string} [props.icon] - 图标名称
+ * @param {string} [props.className] - 扩展类名
+ * @param {()=>void} [props.onClick] - 点击回调
+ * 
+ * @returns {JSX.Element}
+ */
+const IconFont=(props)=>{
+  const {icon,className,...others} = props;
+  return (
+    <span {...others} className={`iconfont icon-${icon} ${styles.iconBox} ${className||''}`} ></span>
+  )
+}
+export default IconFont;

package/templates/template_oa_jwt/public/src/components/{IFrame → iframe}/index.jsx

@@ -1,8 +1,22 @@
+// @ts-ignore
 import React, { useEffect,useState,useRef } from 'react';
+
 import { setRefreshToken } from '@/services/token'
 import { setJwt } from '@/services';
+
+// @ts-ignore
 import styles from './index.less';
 
+/**
+ * iframe组件
+ * @param {object} props 
+ * @param {string} props.name - iframe的唯一名称
+ * @param {string} props.url - url地址
+ * 
+ * @param {string} [props.className] - 扩展样式名
+ * 
+ * @returns {JSX.Element}
+ */
 const Iframe=(props)=>{
   const {className=''}=props;
   const ref = useRef();
@@ -19,6 +33,7 @@ const Iframe=(props)=>{
       }else if(e?.data?.msg==='server'){
         setRefreshToken('');
         setJwt('');
+        // @ts-ignore
         const url = `${OA_KSSO_HOST}?target=${encodeURIComponent(location.href)}`;
         location.href=url;
       }else{

package/templates/template_oa_jwt/public/src/components/{Layout/Basic → layout/basic}/index.jsx

@@ -1,9 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import Iframe from '@/components/IFrame';
-import PageLoading from '@/components/Page/PageLoading';
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import {Outlet} from 'react-router-dom';
+
+import Iframe from '@/components/iframe';
 import ProviderApp from '@/provider/app';
-import { toHref, isNoAuth } from '@/utils';
+import { toHref } from '@/utils';
+
+// @ts-ignore
 import styles from './index.less';
 
 
@@ -19,10 +23,11 @@ const LayoutBasic = (props) => {
   return (
     <section className={styles.htmlWrap}>
       {
+        // @ts-ignore
         window?.knFeishu?.IS_FEISHU()
           ? null
           : <>
-
+            {/* @ts-ignore */}
             <Iframe name='header' url={OA_MENU_HOST} className={styles.iframeHeader} />
             <section className={styles.headerSpace}></section>
           </>

package/templates/{template_oa/public/src/components/Layout/CenterBody → template_oa_jwt/public/src/components/layout/centerBody}/index.jsx

@@ -1,5 +1,7 @@
+// @ts-ignore
 import React from 'react';
 
+// @ts-ignore
 import styles from './index.less';
 
 

package/templates/{template_oa/public/src/components/Layout/FormBlock → template_oa_jwt/public/src/components/layout/formBlock}/index.jsx

@@ -1,6 +1,8 @@
+// @ts-ignore
 import React from 'react';
-import styles from './index.less';
 
+// @ts-ignore
+import styles from './index.less';
 
 
 export const FormBlockByTitle = (props) => {

package/templates/template_oa_jwt/public/src/components/{Layout → layout}/index.jsx

@@ -1,13 +1,19 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import ProviderApp from '@/provider/app';
-
-
+// @ts-ignore
 import {Outlet} from 'react-router-dom';
+// @ts-ignore
 import { ConfigProvider } from 'antd';
-import LayoutBasic from './Basic';
-import LayoutCenterBody from './CenterBody';
+// @ts-ignore
 import zhCN from 'antd/lib/locale/zh_CN';
 
+import LayoutBasic from './basic';
+import LayoutCenterBody from './centerBody';
+
+
+// @ts-ignore
 import styles from './index.less';
 styles;
 

package/templates/{template_oa/public/src/components/Layout/Provider → template_oa_jwt/public/src/components/layout/provider}/index.jsx

@@ -1,5 +1,9 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import {Outlet} from 'react-router-dom';
+
+
 import ProviderApp from '@/provider/app';
 
 const LayoutProvider=(props)=>{

package/templates/template_oa_jwt/public/src/components/{Link → link}/index.jsx

@@ -1,7 +1,23 @@
+// @ts-ignore
 import React  from 'react';
+
 import { openLink,jumpUrl } from '@/utils';
+
+// @ts-ignore
 import styles from './index.less';
 
+
+/**
+ * 超链接组件
+ * @param {object} [props] 
+ * @param {JSX.Element|string} [props.children] - 子组件
+ * @param {string} [props.className] - 扩展类样式名称
+ * @param {Function} [props.onClick] - 点击链接的回调
+ * @param {string} [props.href] - 跳转链接
+ * @param {string} [props.target] - 当target='_blank'时代表新窗口打开
+ * 
+ * @returns {JSX.Element}
+ */
 const Link=(props)=>{
   const {children,className='',onClick,href='',target=''} = props;
 

package/templates/template_oa_jwt/public/src/components/{Nav → nav}/index.jsx

@@ -1,9 +1,15 @@
-import { Menu } from 'antd';
+// @ts-ignore
 import React, { useEffect, useRef, useState } from 'react';
+// @ts-ignore
 import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
+// @ts-ignore
+import { Menu } from 'antd';
+// @ts-ignore
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+
 import {useLoading} from '@/hooks';
 
+// @ts-ignore
 import styles from './index.less';
 
 const ICON_NAME={
@@ -15,11 +21,11 @@ const ICON_NAME={
 
 const SUB_MENU_CONFIG=[
   {
-    path:'/',//匹配菜单路由是/video的菜单
+    path:'/video',//匹配菜单路由是/video的菜单
     // routeTemplate:''匹配某个模板菜单的模板
     subRoute:[
       {
-        path:'/detail',//将video/detail这个路由匹配给菜单/video
+        path:'/video/detail',//将video/detail这个路由匹配给菜单/video
         // routeTemplate:''//也可以将某个路由模板匹配给某个菜单
       }
     ]
@@ -31,7 +37,7 @@ const MenuRoute=[
     label:'内容管理',
     icon:'AppstoreOutlined',
     children:[
-      {label:'剧集管理',path:'/'},
+      {label:'剧集管理',path:'/video'},
     ]
   },
   {
@@ -92,7 +98,7 @@ const LeftMenu=(props)=>{
     return item;
   }
 
-
+  // @ts-ignore
   window.matchPath=matchPath;
 
 

package/templates/{template_oa/public/src/components/Page/PageLoading → template_oa_jwt/public/src/components/page/pageLoading}/index.jsx

@@ -1,13 +1,27 @@
-import React,{useEffect, useState} from 'react';
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
 import ReactDOM from 'react-dom';
-import CSS from './index.less';
-import Popup from '@/components/Popup';
+
+import Popup from '@/components/popup';
+
+// @ts-ignore
 import imgLoading from '@/assets/images/loading.svg';
 
+// @ts-ignore
+import CSS from './index.less';
+
+/**
+ * 页面Loading状态
+ * @param {object} [props] 
+ * @param {boolean} [props.visible=true] - 是否显示状态
+ * 
+ * @returns {JSX.Element}
+ */
 const PageLoading = (props) => {
   const {visible=true} = props;
   if(!visible){
-    return '';
+    return <></>;
   }
   return (
     <div className={CSS.wrap } >
@@ -18,6 +32,13 @@ const PageLoading = (props) => {
   );
 };
 
+/**
+ * 全屏置顶显示一个页面loading组件
+ * @param {object} [props] 
+ * @param {boolean} [props.canTouch=false] - 是否允许用户点击屏幕穿透到下面的组件
+ * 
+ * @returns {(string)=>void}
+ */
 export const ShowPageLoading=(props={canTouch:false})=>{
   let popup = Popup(()=>{},{cantouch:props.canTouch});
   ReactDOM.render(

package/templates/template_oa_jwt/public/src/components/{Popup → popup}/index.jsx

@@ -1,8 +1,21 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import ReactDOM from 'react-dom';
+
+// @ts-ignore
 import styles from './index.less';
 styles;
 
+/**
+ * 一个全屏置顶的遮罩层
+ * @param {(result)=>void} reslove - 遮罩层的关闭回调
+ * @param {Object} [options] - 参数
+ * @param {boolean} [options.cantouch=false] - 是否允许被点击穿透
+ * @param {boolean} [options.transparent=false] - 是否遮罩层完全透明
+ * 
+ * @returns { {dom:HTMLElement,destory:()=>void} }
+ */
 const Popup = (reslove,options) => {
   let rootDom = document.createElement('div');
   rootDom.className='popup-box';