kn-cli 1.0.131 → 1.0.134

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

@@ -0,0 +1,12 @@
+@import '~@/_mixin.module.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_antd5/public/src/components/antd/tooltip/index.jsx

@@ -0,0 +1,69 @@
+
+import React from "react";
+import styles from './index.module.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_antd5/public/src/components/antd/tooltip/index.module.less

@@ -0,0 +1,28 @@
+@import '~@/_mixin.module.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_antd5/public/src/components/auth/index.jsx

@@ -0,0 +1,123 @@
+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+
+import ProviderApp from '@/provider/app';
+
+import {useLoading} from '@/hooks/index';
+// @ts-ignore
+import styles from './index.module.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|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(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 <>暂无权限</>
+}
+
+/**
+ * 用户登录态校验
+ * @param {object} props 
+ * @param {JSX.Element} [props.children] - 当登录校验合法后显示的子组件
+ * 
+ * @returns {JSX.Element}
+ */
+export const AuthLogin=(props)=>{
+  const navigate = useNavigate();
+  const [pass,setPass] = useState(false)
+  const app = ProviderApp.useContainer();
+  const loading = useLoading();
+
+  const check=async ()=>{
+    loading.setLoading(true);
+    console.log(`[Auth]检查用户登录态`)
+    const req =await app.isLogin();
+    loading.setLoading(false);
+    if(req){
+      console.log(`[Auth]检查用户登录态成功`)
+      setPass(true);
+    }else{
+      console.log(`[Auth]检查用户登录态失败`)
+      setPass(false);
+      navigate('/login');
+    }
+  }
+  useEffect(()=>{check()},[]);
+
+  if(pass){
+    return props.children;
+  }
+  return <div className={styles.body}></div>
+}
+
+
+export default {AuthShow,AuthLogin};

package/templates/template_admin_antd5/public/src/components/auth/index.module.less

@@ -0,0 +1,7 @@
+.body{
+  width: 100%;
+  height:100%;
+  position: fixed;
+  background-image: url('~@/assets/images/login/bg.png');
+
+}

package/templates/template_admin_antd5/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_antd5/public/src/components/badge/index.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from "react";
+
+// @ts-ignore
+import styles from './index.module.less';
+
+
+const Badge=(props)=>{
+  const {dot=false,overflowCount=99,offset} = props;
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refDom = useRef();
+
+  const [myStyle,setStyle]=useState(()=>{
+    if(offset){
+      return {
+        marginLeft:`${offset[0]}px`,
+        marginTop:`${offset[1]}px`,
+      }
+    }
+  });
+  const [count,setCount] = useState(0);
+
+
+  useEffect(()=>{
+    let _count = props.count;
+    if(_count != count){
+      setCount(+_count);
+    }
+  })
+  const getCountText=()=>{
+    if(count > overflowCount){
+      return `${overflowCount}+`
+    }else{
+      let req = Math.max(0,count);
+      return `${req}`;
+    }
+  }
+  let countLabel = getCountText();
+  return (
+    <div className={styles.wrap} data-hide={count <= 0}>
+      <div ref={refDom} style={myStyle} className={styles.badge} data-len={countLabel.length}>{countLabel}</div>
+    </div>
+  )
+}
+
+export default Badge;

package/templates/template_admin_antd5/public/src/components/badge/index.module.less

@@ -0,0 +1,44 @@
+.wrap{
+  display: inline-flex;
+  position: relative;
+  &[data-hide='true']{
+    display: none;
+  }
+}
+.hideBadge,
+.badge{
+  display: inline-flex;
+  background-color: red;
+  border-radius: 100%;
+  color:white;
+  font-size: 12px;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  line-height: 12px;
+  box-shadow: 0 0 0 1px #fff;
+  padding-bottom: 1px;
+
+  width: 16px;
+  height: 16px;
+  &[data-len='2']{
+    transform: scale(.9);
+    width: 26px;
+    height: 15px;
+    border-radius: 12px;
+  }
+  &[data-len='3']{
+    transform: scale(.9);
+    width: 34px;
+    height: 15px;
+    border-radius: 12px;
+  }
+}
+.hideBadge{
+  position: absolute;
+  left:0;
+  top:0;
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+}

package/templates/template_admin_antd5/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_antd5/public/src/components/debug/index.jsx

@@ -0,0 +1,28 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import ReactJson from 'react18-json-view'
+// import 'react18-json-view/src/style.css'
+// @ts-ignore
+import {Tooltip} from '@/components/antd';
+// @ts-ignore
+import styles from './index.module.less';
+
+/**
+ * 测试调试时用于点击对象后显示数据用
+ * @param {object} props 
+ * @param {JSX.Element} props.children - 真正展示的对象
+ * @param {object} props.item - 需要被调试展示的对象数据
+ * 
+ * @returns {JSX.Element}
+ */
+export const DebugTableItem=(props)=>{
+  // @ts-ignore
+  if(BUILD_ENV==='prod'){
+    return props.children
+  }
+  const {children,item={}} = props;
+  return <Tooltip trigger='click' overlayClassName={styles.jsonView} color='white' title={<div className={styles.jsonView}><ReactJson src={item} /></div>}>
+    {children}
+  </Tooltip>
+}

package/templates/template_admin_antd5/public/src/components/debug/index.module.less

@@ -0,0 +1,10 @@
+
+
+
+.jsonView{
+  max-width: 520px;
+  width:520px;
+  height: 400px;
+  overflow:auto;
+  position: relative;
+}

package/templates/template_admin_antd5/public/src/components/empty/index.jsx

@@ -0,0 +1,28 @@
+// @ts-ignore
+import React from "react";
+// @ts-ignore
+import styles from './index.module.less';
+// @ts-ignore
+import imgEmpty from '@/assets/images/noData.png';
+// @ts-ignore
+import imgEmptySelect from '@/assets/images/noSelect.png';
+
+
+/**
+ * 当前没数据的占位图
+ * @param {object} props 
+ * @param {string} [props.label='暂无数据 ，请稍后再试'] - 提示文案
+ * @param {string} [props.type='data'] - 图标类型 'data':无数据 , ‘select':没有选择提示
+ * @returns {JSX.Element}
+ */
+const EmptyData=(props)=>{
+  const {label='暂无数据 ，请稍后再试',type='data'}= props;
+  return (
+    <section className={styles.wrap}>
+      <img src={type=='select'?imgEmptySelect:imgEmpty} />
+      <span>{label}</span>
+    </section>
+  )
+}
+
+export default EmptyData;

package/templates/template_admin_antd5/public/src/components/empty/index.module.less

@@ -0,0 +1,20 @@
+
+
+.wrap{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 16px;
+  img{
+    width: 96px;
+  }
+  span{
+    font-weight: 400;
+    font-size: 14px;
+    color: #8F959E;
+    line-height: 16px;
+  }
+}

package/templates/template_admin_antd5/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_antd5/public/src/components/icon/index.jsx

@@ -0,0 +1,128 @@
+
+import PlayVideo from "@/components/icon/playVideo";
+
+import {
+  InfoCircleFilled,
+  PlusOutlined,
+  DeleteOutlined,
+  LockOutlined, 
+  UnlockOutlined,
+  CaretDownOutlined,
+  EditOutlined, 
+  InfoCircleOutlined,
+  CloseOutlined, 
+  SearchOutlined,
+  CheckCircleFilled,
+  EditFilled,
+  DownOutlined,
+  ExclamationCircleOutlined,
+  EyeFilled,
+  LinkOutlined,
+  QuestionCircleOutlined,
+  CloseCircleFilled,
+  DownloadOutlined,
+  LoadingOutlined,
+  ArrowDownOutlined,
+  EyeOutlined,
+  UploadOutlined,
+  SyncOutlined,
+  PlayCircleOutlined,
+  PlayCircleFilled,
+  ExclamationCircleFilled,
+  DoubleLeftOutlined,
+  PlusSquareOutlined,
+  CaretUpOutlined,
+  DownCircleOutlined,
+  UpCircleOutlined,
+  LeftOutlined,
+  RightOutlined,
+  MenuOutlined,
+  ArrowUpOutlined,
+  LogoutOutlined,
+  CloseCircleOutlined,
+  CheckCircleOutlined,
+  EyeTwoTone,
+  DeleteFilled,
+  CheckOutlined,
+  EyeInvisibleOutlined,
+  CalendarOutlined,
+  MinusCircleOutlined,
+  FormOutlined,
+  QuestionCircleFilled,
+  CaretDownFilled,
+  FileTextFilled,
+  UserOutlined,
+  HolderOutlined,
+  StepBackwardOutlined,
+  SmallDashOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+
+
+export {
+  InfoCircleFilled,
+  PlusOutlined,
+  DeleteOutlined,
+  LockOutlined, 
+  UnlockOutlined,
+  CaretDownOutlined,
+  EditOutlined, 
+  InfoCircleOutlined,
+  CloseOutlined, 
+  SearchOutlined,
+  CheckCircleFilled,
+  EditFilled,
+  DownOutlined,
+  ExclamationCircleOutlined,
+  EyeFilled,
+  LinkOutlined,
+  QuestionCircleOutlined,
+  CloseCircleFilled,
+  DownloadOutlined,
+  LoadingOutlined,
+  ArrowDownOutlined,
+  EyeOutlined,
+  UploadOutlined,
+  SyncOutlined,
+  PlayCircleOutlined,
+  PlayCircleFilled,
+  ExclamationCircleFilled,
+  DoubleLeftOutlined,
+  CaretUpOutlined,
+  PlusSquareOutlined,
+  DownCircleOutlined,
+  UpCircleOutlined,
+  LeftOutlined,
+  RightOutlined,
+  MenuOutlined,
+  ArrowUpOutlined,
+  LogoutOutlined,
+  CloseCircleOutlined,
+  CheckCircleOutlined,
+  EyeTwoTone,
+  DeleteFilled,
+  CheckOutlined,
+  EyeInvisibleOutlined,
+  CalendarOutlined,
+  MinusCircleOutlined,
+  FormOutlined,
+  QuestionCircleFilled,
+  CaretDownFilled,
+  FileTextFilled,
+  UserOutlined,
+  HolderOutlined,
+  StepBackwardOutlined,
+  SmallDashOutlined,
+  UpOutlined,
+}
+
+
+/**
+ * @typedef IconProps
+ * @property {number} [size=24] - 尺寸，代表宽度的px值
+ * @property {function} [onClick] - 点击回调
+ * @property {string} [className]
+ */
+
+export {PlayVideo};
+

package/templates/template_admin_antd5/public/src/components/icon/playVideo/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+// @ts-ignore
+import iconPlay from '@/assets/images/play.png';
+
+import styles from './index.module.less';
+
+/**
+ * 播放按钮
+ * @param {import('@/components/icon').IconProps} props 
+ * @returns {JSX.Element}
+ */
+const PlayVideo=props=>{
+  const {size=24,className='',onClick:_onClick}=props;
+  const onClick=(...args)=>{
+    if(_onClick)_onClick(...args);
+  }
+  return (
+    <i onClick={onClick} className={`${styles.icon} ${className}`} style={{width:`${size/100}rem`,height:`${size/100}rem`}}><img src={iconPlay}/></i>
+  )
+}
+export default PlayVideo;

package/templates/template_admin_antd5/public/src/components/icon/playVideo/index.module.less

@@ -0,0 +1,16 @@
+
+.icon{
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: rgba(0,0,0,.5);
+  cursor: pointer;
+  img{
+    display: inline-block;
+    width: 50%;
+    height:50%;
+    margin-left: 10%;
+  }
+}