kn-cli 1.0.106 → 1.0.108

package/build/webpack.config.js

@@ -372,7 +372,8 @@ const plugins= [
     MOCK: process.env.mock == 1 ? '1' : false, //JSON.stringify(process.env.mock)
     ...API_HOST,
     PM_TYPE: JSON.stringify(process.env.pm_type),
-    APP_VERSION:JSON.stringify(appVersion)
+    APP_VERSION:JSON.stringify(appVersion),
+    SITE_NAME:JSON.stringify(CLI_CONFIG.name),
   }),
 ];
 

package/package.json

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

package/templates/template_admin/cli.config.js

@@ -1,6 +1,7 @@
 
 module.exports = {
   name:'projectName',
+  version:'1.0.0',
   registryType:'npm',//npm镜像源,taobao|npm
   less:{
     javascriptEnabled:true,//是否开启less js

package/templates/template_admin/package.json

@@ -11,7 +11,7 @@
     "antd": "~4.24.8",
     "axios": "~1.1.3",
     "jszip": "~3.10.1",
-    "kn-hooks": "~0.0.33",
+    "kn-hooks": "~0.0.35",
     "moment": "~2.29.4",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",

package/templates/template_admin/public/src/_mixin.less

@@ -34,6 +34,44 @@
 }
 
 
+.scrollBarLarge{
+
+  &::-webkit-scrollbar{
+    width:6px;//竖向滚动条宽度
+    height: 6px;//横向滚动条高度
+    display:block;//强制一直显示
+  }
+  //整个滚动条的轨道
+  &::-webkit-scrollbar-track
+  {
+    background-color: transparent;//整个滚动条背景颜色
+  }
+  //滚动条当前可拖动的bar的样式
+  &::-webkit-scrollbar-thumb{
+    background-color: rgba(0,0,0,0.15);
+    border-radius: 5px 5px 5px 5px;
+
+  }
+}
+
+
+.scrollBarDark{
+  &::-webkit-scrollbar{
+    width:3px;//竖向滚动条宽度
+    height: 3px;//横向滚动条高度
+    display:block;//强制一直显示
+  }
+  //整个滚动条的轨道
+  &::-webkit-scrollbar-track
+  {
+    background-color: #acacac22;//整个滚动条背景颜色
+  }
+  //滚动条当前可拖动的bar的样式
+  &::-webkit-scrollbar-thumb{
+    background-color: #f2f2f2;
+  }
+}
+
 .hideScrollBar{
   &::-webkit-scrollbar {
     display: none;

package/templates/template_admin/public/src/_reset.less

@@ -3,13 +3,6 @@
 @import './_variable.less';
 
 :global {
-  .dg.ac{
-    input{height: 100%;color:white;}
-    select{
-      color:black;
-      width: 100%;
-    }
-  }
   html{
     // ios webview 进入后高度不正确的问题
     background-color: white;   

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

@@ -0,0 +1,145 @@
+import React from "react";
+// @ts-ignore
+import zhCN from 'antd/lib/locale/zh_CN';
+
+import {
+  Form as AntdForm,
+  Input as AntdInput,
+  Button as AntdButton,
+  DatePicker as _DatePicker,
+  Alert,
+  Anchor,
+  Badge,
+  Card,
+  Checkbox,
+  Col,
+  ConfigProvider,
+  Drawer,
+  Dropdown,
+  Empty,
+  Image,
+  InputNumber,
+  Layout,
+  List,
+  Menu,
+  message,
+  Modal,
+  notification,
+  Pagination,
+  Popconfirm,
+  Popover,
+  Progress,
+  Radio,
+  Row,
+  Select,
+  Space,
+  Spin,
+  Steps,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  TimePicker,
+  Tooltip as AntdTooltip,
+  TreeSelect,
+  Upload,
+  AutoComplete,
+  // @ts-ignore
+} from "antd";
+
+
+import Tooltip from './tooltip';
+import AsyncButton from '../button';
+
+
+export { AsyncButton as Button };
+export {Alert}
+export {Anchor}
+export {Badge}
+export {Card}
+export {Checkbox}
+export {Col}
+export {ConfigProvider}
+
+/**@type {*} */
+const DatePicker = _DatePicker;
+export {DatePicker}
+export {Drawer}
+export {Dropdown}
+export {Empty}
+export {Image}
+export {InputNumber}
+export {Layout}
+export {List}
+export {Menu}
+export {message}
+export {Modal}
+export {notification}
+export {Pagination}
+export {Popconfirm}
+export {Popover}
+export {Progress}
+export {Radio}
+export {Row}
+export {Select}
+export {Space}
+export {Spin}
+export {Steps}
+export {Switch}
+export {Table}
+export {Tabs}
+export {Tag}
+export {TimePicker}
+export {Tooltip}
+export {TreeSelect}
+export {Upload}
+export {AutoComplete}
+
+
+export {AntdTooltip}
+export {AntdButton}
+
+export {zhCN}
+
+
+
+const FormItem=(props,ref)=>{
+  const {validateFirst=true,children,...others} = props;
+  return <AntdForm.Item ref={ref||undefined} validateFirst={validateFirst} {...others}>{children}</AntdForm.Item>
+}
+
+/**
+ * @type {*}
+ */
+const Form={...AntdForm}
+// @ts-ignore
+Form.Item = FormItem;
+
+export {Form};
+
+
+
+const Input=(props)=>{
+  const {children,type,...others} = props;
+
+  if(type=='hidden'){
+    return <AntdInput type={type} {...others}>{children}</AntdInput>
+  }
+  return <AntdInput allowClear {...others}>{children}</AntdInput>
+}
+
+Input.Group=AntdInput.Group;
+Input.Search=AntdInput.Search;
+Input.TextArea=AntdInput.TextArea;
+Input.Password=AntdInput.Password;
+
+export {Input};
+
+const HiddenFormItem=(props)=>{
+  const {children,...others} = props;
+  return (
+    <AntdForm.Item {...others} noStyle><input type='hidden'/></AntdForm.Item>
+  )
+}
+
+export {HiddenFormItem}

package/templates/template_admin/public/src/components/antd/tooltip/detail/index.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { ReactRender } from "@/components/react";
+
+import {  Modal } from "@/components/antd";
+// @ts-ignore
+import Popup from "@/components/popup";
+import { LayoutLanguage } from "@/components/layout/provider";
+import styles from './index.less';
+import { useEffect } from "react";
+
+/**
+ * 控制室 - 操作记录 - 事件内容详情
+ * @returns {JSX.Element}
+ */
+
+const Detail = (props) => {
+  const { destory,title,content } = props;
+  const onCancel = () => {
+    destory && destory(false);
+  };
+
+  const onOk = () => {
+    destory && destory(true);
+  };
+
+  let isJsx = React.isValidElement(content)
+
+  const onEsc=(e)=>{
+    if (e.key.toLocaleLowerCase() === 'escape' || e.key.toLocaleLowerCase() === 'esc') {
+      onCancel();
+    }
+  }
+
+  useEffect(()=>{
+    window.addEventListener('keyup',onEsc)
+    return ()=>{
+      window.removeEventListener('keyup',onEsc)
+    }
+  },[])
+  
+  return (
+    <Modal
+      maskClosable={true}
+      title={title||'详情'}
+      width={720}
+      open={true}
+      footer={false}
+      onCancel={onCancel}
+      onOk={onOk}
+    >
+      {
+        isJsx?<div className={styles.content}>{isJsx?content:''}</div>:<div className={styles.content} dangerouslySetInnerHTML={{__html:content}}></div>
+      }
+      
+    </Modal>
+  );
+};
+
+const ShowDetail = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(
+      <LayoutLanguage>
+        <Detail destory={popup.destory} {...props} />
+      </LayoutLanguage>,
+      popup.dom
+    );
+  });
+};
+export default ShowDetail;

package/templates/template_admin/public/src/components/antd/tooltip/detail/index.less

@@ -0,0 +1,12 @@
+@import '~@/_mixin.less';
+
+.content{
+  width: 100%;
+  max-height:492px;
+  min-height: 212px;
+  overflow: auto;
+  border:1px solid #f0f0f0;
+  border-radius: 4px;
+  padding:12px;
+  .scrollBarLarge;
+}

package/templates/template_admin/public/src/components/antd/tooltip/index.jsx

@@ -0,0 +1,69 @@
+
+import React from "react";
+import styles from './index.less';
+import { AntdTooltip } from "@/components/antd";
+import { useState } from "react";
+import { useEffect } from "react";
+
+import ShowDetail from './detail'
+
+
+function countRenderableText(node) {
+  if (typeof node === 'string') {
+    return node.length;
+  }
+  
+  if (Array.isArray(node)) {
+    // 如果 node 是一个数组，递归统计所有子节点的文字数量
+    return node.reduce((acc, child) => acc + countRenderableText(child), 0);
+  }
+
+  if (React.isValidElement(node) && node.props.children) {
+    // 如果 node 是一个有效的 React 元素且有 children，则递归统计子节点
+    return countRenderableText(node.props.children);
+  }
+
+  return 0; // 非文本内容返回 0
+}
+
+
+const More=props=>{
+  const {children} = props;
+
+  const [len,setLen] = useState(0);
+  const onViewMore=(content)=>{
+    ShowDetail({content});
+  }
+
+  useEffect(()=>{
+    if(!children){
+      setLen(0);
+      return;
+    }
+    if( ['string','number'].includes(typeof children) ){
+       setLen(`${children}`.length);
+    }else{
+      let len = countRenderableText(children);
+      setLen(len);
+    }
+  },[children])
+  
+
+  return (
+    <div className={styles.moreWrap}>
+      <div className={styles.text}>
+        {children}
+      </div>
+      <div className={styles.btnMoreWrap}>
+        {len>=100?<span className={styles.btnMore} onClick={onViewMore.bind(this,children)}>查看详情</span>:<></>}
+      </div>
+    </div>
+  )
+}
+const TooltipMore=props=>{
+  const {title,children,...others}=props;
+
+  return <AntdTooltip {...others} title={<More>{title}</More>} >{children}</AntdTooltip>
+}
+export default TooltipMore;
+

package/templates/template_admin/public/src/components/antd/tooltip/index.less

@@ -0,0 +1,28 @@
+@import '~@/_mixin.less';
+
+.moreWrap{
+  display: flex;
+  flex-direction: column;
+  max-height: 300px;
+  overflow: hidden;
+  .text{
+    max-height: 240px;
+    overflow: auto;
+    .scrollBarDark;
+  }
+  .btnMoreWrap{
+    display: flex;
+    align-items: center;
+
+    .btnMore{
+      color:#479CFF;
+      font-size: 14px;
+      font-weight: bold;
+      cursor: pointer;
+      &:hover{
+        color:#70A9FF;
+      }
+    }
+  }
+
+}

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

@@ -8,23 +8,80 @@ import ProviderApp from '@/provider/app';
 import {useLoading} from '@/hooks/index';
 // @ts-ignore
 import styles from './index.less';
+import { AUTH_DEBUG_OPEN } from '@/config';
+import Page403 from '@/pages/error/403';
 
 
+const AuthShowDebug=props=>{
+  return <div className={styles.authDebug} data-auth={props.auth}>
+    {props.children}
+  </div>
+}
+
 /**
  * 检查用户是否带有某个权限
  * @param {object} props 
- * @param {string} [props.name] - 权限的名称
+ * @param {string|string[]} [props.name] - 权限的名称
  * @param {JSX.Element} [props.children] - 子组件
+ * @param {JSX.Element} [props.noAuthComponent=<></>] - 没权限时展示的内容
+ * @param {boolean} [props.noDebugShow=false] - 禁止调试模式下的强制显示
+ * @param {import('@/provider/app').AppContaniner} [props.appProvider] - appProivder
  * 
  * @returns {JSX.Element}
  */
 export const AuthShow=(props)=>{
+  const {name,noAuthComponent=<></>,appProvider,noDebugShow} = props;
+  const app = appProvider||ProviderApp.useContainer();
+
+  let hasAuth = app.hasAuth(name);
+  if(AUTH_DEBUG_OPEN&&!noDebugShow){
+    return <AuthShowDebug auth={hasAuth}>{props.children}</AuthShowDebug>;
+  }
+  return hasAuth?props.children:noAuthComponent
+}
+
+
+/**
+ * 检查用户是否带有某个权限
+ * @param {object} props 
+ * @param {string|string[]} [props.name] - 权限的名称
+ * @param {JSX.Element} [props.children] - 子组件
+ * @param {JSX.Element} [props.noAuthComponent=<></>] - 没权限时展示的内容
+ * @param {import('@/provider/app').AppContaniner} [props.appProvider] - appProivder
+ * 
+ * @returns {JSX.Element}
+ */
+export const AuthPage=(props)=>{
+  const {name,noAuthComponent=<Page403 />,appProvider} = props;
+  const app = appProvider||ProviderApp.useContainer();
+
+  let hasAuth = app.hasAuth(name);
+  // if(AUTH_DEBUG_OPEN){
+  //   return <AuthShowDebug auth={hasAuth}>{props.children}</AuthShowDebug>;
+  // }
+  
+  if(!hasAuth){
+    return noAuthComponent;
+  }
+  return props.children;
+}
+
+
+export const AuthRoute=(props)=>{
   const {name} = props;
   const app = ProviderApp.useContainer();
-  if(app?.auths?.includes(name)){
+  if(Array.isArray(name)){
+    for(let i=0;i<name.length;i++){
+      let authName = name[i];
+      if(app?.auths?.includes(authName)){
+        return props.children;
+      }
+    }
+  }
+  else if(app?.auths?.includes(name)){
     return props.children;
   }
-  return <></>
+  return <>暂无权限</>
 }
 
 /**

package/templates/template_admin/public/src/components/auth/navCheck.jsx

@@ -0,0 +1,27 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import { Navigate } from 'react-router-dom';
+import ProviderMenu from '@/provider/menu';
+import ProviderApp from '@/provider/app';
+ 
+
+const NavCheck=(props)=>{
+  const {to} = props;
+  const providerMenu = ProviderMenu.useContainer();
+  const providerApp = ProviderApp.useContainer();
+  if(to=='/auth/user'){
+    debugger;
+  }
+  let menu = providerMenu.getMenuNavigateTo(to,providerApp.auths);
+  if(menu == 404){
+    return <Navigate to='/401'/>
+  }else if( menu == 403){
+    return <Navigate to='/403'/>
+  }
+  else if(menu){
+    return <Navigate to={menu.url||to} />
+  }
+
+}
+export default NavCheck;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import {AntdButton} from "@/components/antd";
+import useThrottole from '@/hooks/useThrottole';
+
+/**
+ * 增加了节流的AntdButton
+ */
+const AsyncButton=props=>{
+  const {children,onClick:_onClick,throttle=100,disabled,...others} = props;
+  const _useThrottole = useThrottole({throttle})
+  const onClick=_useThrottole.makeThrottole( _onClick )
+
+  return <AntdButton onClick={onClick} disabled={_useThrottole.throttleing||disabled} {...others}>{children}</AntdButton>
+}
+AsyncButton.Group = AntdButton.Group;
+
+export default AsyncButton;

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

@@ -3,7 +3,7 @@ import React from 'react';
 // @ts-ignore
 import ReactJson from 'react-json-view'
 // @ts-ignore
-import {Tooltip} from 'antd';
+import {Tooltip} from '@/components/antd';
 // @ts-ignore
 import styles from './index.less';
 

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+const ErrorBoundary = props => {
+  const {children}= props;
+  const [hasError, setHasError] = useState(false);
+
+  const onReload=()=>{
+    window.location.reload();
+  }
+  const handleError = (error, errorInfo) => {
+    if (error.name.toLowerCase() =='ChunkLoadError'.toLowerCase() ) {
+      setHasError(true);
+      onReload()
+      // ReactDOM.render(<h1>站点已更新，即将重新加载...</h1>, document.getElementById('main-view'));
+      // setTimeout(()=>{
+      //   onReload()
+      // },2000)
+    } 
+  };
+
+  useEffect(() => {
+    const errorListener = (event) => {
+      handleError(event.error, event.errorInfo);
+    };
+    window.addEventListener('error', errorListener);
+    return () => {
+      window.removeEventListener('error', errorListener);
+    };
+  }, []);
+
+  if (hasError) {
+    return <></>;
+  }
+  return children;
+};
+
+export default ErrorBoundary;

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 // @ts-ignore
-import { Image } from 'antd';
+import { Image } from '@/components/antd';
 import ShowPreview from './preview';
 // @ts-ignore
 import styles from './index.less';

package/templates/template_admin/public/src/components/image/preview.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ReactDom from 'react-dom';
-import { Image,Button,Space } from 'antd';
+import { Image,Button,Space } from '@/components/antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Popup from '@/components/popup';
 // @ts-ignore

package/templates/template_admin/public/src/components/layout/provider/index.jsx

@@ -1,9 +1,9 @@
 // @ts-ignore
 import React from 'react';
 // @ts-ignore
-import { ConfigProvider } from 'antd';
+import { ConfigProvider } from '@/components/antd';
 // @ts-ignore
-import zhCN from 'antd/lib/locale/zh_CN';
+import {zhCN} from '@/components/antd';
 
 import ProviderApp from '@/provider/app';