kn-cli 1.0.130 → 1.0.133

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

@@ -0,0 +1,79 @@
+// @ts-ignore
+import React,{useEffect} from 'react';
+// @ts-ignore
+import ReactDOM from 'react-dom';
+
+// @ts-ignore
+import Popup from '@/components/popup';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+const toastList=[];
+const runNext=()=>{
+  let props = toastList[0];
+  if(props){
+    const {message,delay,resolve,position}=props;
+    let popup = Popup(resolve,{cantouch:true});
+    ReactDOM.render(
+      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
+      popup.dom
+    );
+  }
+}
+
+const Toast=props=>{
+  const {
+    message,
+    delay=1000*2,
+    destory,
+    position='top'
+  }=props;
+  useEffect(()=>{
+    setTimeout(()=>{
+      destory();
+      toastList.shift();
+      runNext();
+    },delay);
+  },[])
+  const ANITYPE={
+    'center':'animate__slideInDown',
+    'top':'animate__slideInDown',
+    'bottom':'animate__slideInUp'
+  }
+  return (
+    <section className={styles.wrap} data-position={position}>
+      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * @typedef {object} ToastOptions
+ * @property {string} message - 吐司文案内容
+ * @property {number} [delay=2000] - 持续时间,毫秒
+ * @property {string} [position] - 显示位置,center|top|bottom
+ * @property {Function} [resolve] - 显示完毕的回调
+ */
+
+/**
+ * 显示一个吐司信息
+ * @param {ToastOptions|string} [props] - 文案内容或一个配置参数
+ * @returns { Promise }
+ */
+const ShowToast=props=>{
+  if(typeof props === 'string'){
+    props = {message:props}
+  }
+  return new Promise((resolve) => {
+    // @ts-ignore
+    props.resolve = resolve;
+    toastList.push(props);
+    if(toastList.length===1){
+      runNext();
+    }
+  });
+}
+
+export default ShowToast;

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

@@ -0,0 +1,43 @@
+@import '~@/_variable.module.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index:var(--z-toast);
+  &[data-position=top]{
+    justify-content: flex-start;
+    padding-top:80px;
+  }
+  &[data-position=bottom]{
+    justify-content: flex-end;
+    padding-bottom:80px;
+  }
+  .content{
+    min-height:30px;
+    min-width:60px;
+
+    background: rgba(0,0,0,.8);
+    opacity:.8;
+    border-radius: var(--radius-default);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
+
+
+  }
+}

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

@@ -0,0 +1,102 @@
+// @ts-ignore
+import React, { useState,useEffect } from 'react';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+
+import ProviderMenu from '@/provider/menu';
+// @ts-ignore
+import imgSlogan from '@/assets/images/nav/slogan.png';
+
+import TopBar from './topBar';
+import {DEBUG_ENV} from '@/config';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+const TopSlogan=()=>{
+  const navigate = useNavigate();
+  const onHome= ()=>{
+    navigate('/')
+  }
+  return (
+    <div className={styles.TopMenuSlogan} onClick={onHome}>
+      <img src={imgSlogan} />
+      {
+        // @ts-ignore
+        DEBUG_ENV!='prod'?<span className={styles.version}>V{APP_VERSION}{DEBUG_ENV}</span>:<></>
+      }
+    </div>
+  )
+}
+
+
+const TopMenu=(props)=>{
+  const providerMenu = ProviderMenu.useContainer();
+
+  const [menus,setMenus]=useState([]);
+  const navigate = useNavigate();
+
+  const menuOpen= true;//app.nav.leftNavOpen;
+
+
+  // // 推出登录
+  // const onAvatarClick = (e)=>{
+  //   if (e?.key === 'logout') {
+  //     app.logout();
+  //   }
+  // }
+
+  const onClickMenuItem=(menu,e)=>{
+    navigate(menu.url);
+  }
+  const reload= async ()=>{
+    providerMenu.reload();
+  }
+  useEffect(()=>{
+    setMenus(providerMenu.topMenu)
+  },[providerMenu.topMenu]);
+
+  useEffect(()=>{
+    reload();
+  },[])
+
+
+  // const getIcon=(iconName,active)=>{
+  //   import(`@/assets/images/nav/${iconName}.png`).then(item=>{
+  //     return item;
+  //   })
+  // }
+  return (
+
+
+    <div className={styles.topMenu} data-open={menuOpen}>
+      <hgroup className={styles.leftGroup}>
+        <TopSlogan />  
+        {
+          menus&&menus.length>1&&
+          menus.map((menu,idx)=>{
+            const {key,name:label,icon,msgCount}= menu;
+            const active = providerMenu.selectMenus.keys.includes(key);
+            return (
+              <div 
+                key={key} 
+                className={styles.menuItem} 
+                data-checked={active} 
+                onClick={onClickMenuItem.bind(this,menu)} 
+              >
+                <span><a href={'/#'+menu.url}>{label}</a></span>
+                {/* 未读标记 */}
+                <div className={styles.messageWrap}>
+                  {msgCount>0?<i className={styles.iconUnread}/>:''}
+                </div>
+              </div>
+            )
+          })
+        }   
+      </hgroup>
+      <TopBar />
+    </div>
+  )
+}
+
+export default TopMenu;

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

@@ -0,0 +1,89 @@
+@import '~@/_variable.module.less';
+@import '~@/_mixin.module.less';
+
+@menuWidth:70px;
+@openMenuWidth:128px;
+
+.TopMenuSlogan{
+  width: 152px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  img{
+    width: 73px;
+  }
+  .version{
+    font-size: 12px;
+    font-weight:700;
+    color:white;
+    background-color: rgba(255,255,255,.16);
+    padding:2px 4px;
+    border-radius: 2px;
+    margin-left: 4px;
+  }
+}
+
+.topMenu{
+  padding:0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  height: 100%;
+  width: 100%;
+
+  .leftGroup{
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  .menuItem{
+    position: relative;
+    width: 74px;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content:center;
+
+    cursor: pointer;
+
+    *{.no-select;}
+    font-size: 14px;
+    color:#fff;
+    background-color: transparent;
+    a,span{
+      font-weight: inherit;
+      font-size: inherit;
+      color:inherit;
+    }
+    &[data-checked='true']{
+      background: rgba(78,148,207,0.7);
+      font-weight: bold;
+    }
+    &:hover{
+      background-color: rgba(255,255,255,.1);
+    }
+
+  }
+  
+  .messageWrap{
+    position: absolute;
+    right:4px;
+    top:6px;
+  }
+
+}
+
+
+.iconUnread{
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background-color: red;
+  // position: absolute;
+  // right: 0;
+  // top: 0;
+}

package/templates/template_admin_antd5/public/src/components/topMenu/topBar/index.jsx

@@ -0,0 +1,81 @@
+// @ts-ignore
+import React, { useRef, useState } from 'react';
+// @ts-ignore
+import { Dropdown,message } from '@/components/antd'
+// @ts-ignore
+import { LogoutOutlined } from '@ant-design/icons';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+// @ts-ignore
+import imgUser from '@/assets/images/icon-user.png';
+import ProviderApp from '@/provider/app';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+
+const TopBar=()=>{
+  const app = ProviderApp.useContainer();
+  const navigate = useNavigate();
+
+  const [unreadNotify,setUnreadNotify]=useState(0);
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf =useRef();
+
+  refSelf.current={
+    unreadNotify,setUnreadNotify
+  }
+
+  // const onToggle=()=>{
+  //   const {leftNavOpen}= app.nav;
+  //   app.setNav({...app.nav,leftNavOpen:!leftNavOpen})
+  // }
+  const onAvatarClick=(type)=>{
+    switch(type){
+      case 'user':{
+        const {name,userId,realName} = app.user;
+        const {auths} = app;
+        let txt = <div>{`[${userId}]${name}(${realName})`}<br/>{`${auths}`}</div>
+        message.info( txt );
+      }break;
+      case 'logout':{
+        app.logout();
+      }break;
+      case 'message':{
+        // navigate('/message/my');
+      }break;
+    }
+  }
+
+  return (
+    <section className={styles.topUserInfo}>
+      <Dropdown menu={{items:[
+        {
+          key:'user',
+          label:<span  className={styles.userMenuItem}>Hi,{app?.user?.realName||'用户'}</span>
+        },
+        {
+          key:'version',
+          // @ts-ignore
+          label:<span  className={styles.userMenuItem}><hgroup className={styles.version} ><span>版本</span><span>V{APP_VERSION}</span></hgroup></span>
+        },
+        {
+          key:'logout',
+          label:<span onClick={onAvatarClick.bind(this,'logout')} className={styles.userMenuItem}><LogoutOutlined />退出登录</span>
+        }
+      ]}}>
+        <img className={styles.avatar} src={imgUser}/>
+      </Dropdown>
+
+      {/* <span className={styles.notifyWrap}>
+        <img src={imgNotice} className={styles.notice} onClick={onAvatarClick.bind(this,'message')} />
+        {unreadNotify>0?<i className={styles.noticeUnread}/>:''}
+      </span> */}
+      
+    </section>
+  )
+}
+
+export default TopBar;

package/templates/template_admin_antd5/public/src/components/topMenu/topBar/index.module.less

@@ -0,0 +1,97 @@
+@import '~@/_mixin.module.less';
+
+.toggle{
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  transition: transform .2s;
+  &[data-tooggle='true']{
+    transform: scaleX(-1);
+  }
+}
+
+.topUserInfo{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  width:100%;
+  z-index:var(--z-top-menu);
+  padding:0 10px;
+  
+  column-gap: 16px;
+
+
+
+  .noticeUnread{
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    background-color: red;
+    position: absolute;
+    right:0;
+    top:0;
+  }
+  .notice,
+  .avatar{
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+  }
+
+  .menu:global(.ant-menu){
+    line-height: var(--topMenu-height);
+    background-color: inherit;
+    border-bottom: none;
+    flex:1;
+    // min-width: 100px;
+
+    :global{
+      .ant-menu-item,
+      .ant-menu-item a{
+        color:rgba(104,114,126,1);
+        font-weight: var(--weight-Medium);
+      }
+      .ant-menu-item:hover a,
+      .ant-menu-item:hover,
+      .ant-menu-item-selected a{
+        color: rgba(255,255,255,.8);
+      }
+      .ant-menu-item-selected{
+        color: white;
+      }
+      .ant-menu-item:hover:after,
+      .ant-menu-item-selected:after{
+        border-bottom: 2px solid #fff;
+      }
+      .ant-menu-item{
+        padding: 0 24px;
+      }
+    }
+  }
+}
+
+.avatarMenu{
+  min-width: 100px;
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  
+  :global(.ant-dropdown-menu-item) {
+    min-width: 100px;
+  }
+}
+
+.userMenuItem{
+  display: flex;
+  column-gap: 6px;
+  .version{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    span:nth-child(2){
+      color:#8F959E;
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import ShowPreview from './preview';
+// @ts-ignore
+import moment from 'moment';
+// @ts-ignore
+import styles from './index.module.less';
+// @ts-ignore
+import imgFail from '@/assets/images/loadFail.png'; 
+
+/**
+ * 视频素材预览组件
+ * @param {object} [props] 
+ * @param {'view'|'checkbox'} [props.mode='view'] - 组件类型,view为展示预览，点击后放大预览，checkbox为选择模式
+ * @param {boolean} [props.checked=false] - 如果将该组件设定为选择组件，则这里代表是否选中状态
+ * @param {(checked:boolean)=>void} [props.onClick] - 点击回调
+ * 
+ * 
+ * @param {string|object} props.src - 素材下载地址
+ * @param {string|object} [props.preview] - 封面图地址
+ * 
+ * @param {string} [props.className] - 样式
+ * 
+ */
+const Video = props=>{
+  const { src,className,mode='view',checked=false,onClick:_onClick,preview,...others } = props;
+  const [time,setTime] = useState('');
+  const onPreview = ()=>{
+    if(mode=='checkbox'){
+      if(_onClick){
+        _onClick(!checked)
+      }
+      return;
+    }
+    ShowPreview({
+      src,
+    });  
+  }
+  const onLoadedMetaData=(e)=>{
+    const {target:{duration}} = e;
+    if(duration<=0||!duration){
+      setTime('');
+      return;
+    }
+    const _time = moment.duration(duration*1000);
+    const hours=_time.hours();
+    const minutes=_time.minutes();
+    const seconds=_time.seconds();
+    let req='';
+    if(hours>0){
+      req+= `${hours}`.padStart(2,'0') + ':';
+    }
+    req+= `${minutes}`.padStart(2,'0') + ':';
+    req+= `${seconds}`.padStart(2,'0');
+
+    setTime(`${req}`)
+  }
+
+  const load=()=>{
+    let video = document.createElement('video');
+    video.src= src;
+    video.addEventListener('loadedmetadata',onLoadedMetaData);
+
+  }
+  useEffect(()=>{
+    load();
+  },[])
+
+  return (
+    <div className={`${styles.wrap} ${className}`} onClick={onPreview} data-checked={checked}>
+      <img src={preview||imgFail} className={styles.video}/>
+
+      {/* <video
+        onLoadedMetadata={onLoadedMetaData}
+        src={src}
+        className={`${styles.video}`}
+        {...others}
+      >
+        <a href={src} download>
+          下载
+        </a>
+      </video> */}
+
+      {
+        time&&
+        <div className={styles.info}>
+          <div className={styles.iconPlay}></div>
+          <span className={styles.time}>{time}</span>
+        </div>
+      }
+                
+
+    </div>
+  );
+}
+
+export default Video;

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

@@ -0,0 +1,132 @@
+
+
+@keyframes loading {
+  0% { transform: rotateZ(0); }
+  100% { transform: rotateZ(360deg); }
+}
+
+
+.wrap{
+  width: 200px;
+  height: 200px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  
+  &[data-checked='true']{
+    &:before{
+      content:' ';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,.5);
+      left:0;
+      top:0;
+      z-index: 1;
+    }
+    &:after{
+      background-image: url('~@/assets/images/chat/checked.png');
+      background-size: contain;
+      width: 48px;
+      height: 48px;
+      position: absolute;
+      content: ' ';
+      z-index: 1;
+
+    }
+  }
+  
+  .loading{
+    width: 64px;
+    animation: loading 2s infinite normal;
+  }
+
+  .video{
+    width: 100%;
+    height: 100%;
+  }
+
+  .info{
+    display: flex;
+    align-items: center;
+    background: rgba(31,35,41,0.8);
+    position: absolute;
+    right:0;
+    bottom:0;
+    padding:2px 2px 2px 8px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    .iconPlay{
+      width: 0;
+      height: 0;
+      border-left:5px solid white;
+      border-right:5px solid transparent;
+      border-top:5px solid transparent;
+      border-bottom:5px solid transparent;
+    }
+    .time{
+      font-weight: 500;
+      font-size: 12px;
+      color: #FFFFFF;
+      line-height: 16px;
+      letter-spacing:-1px;
+    }
+  }
+
+
+}
+
+
+
+
+.main{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  .current{
+    margin-top: 30px;
+    flex:none;
+    width:70vh;
+    height: 70vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .video{
+      width:100%;
+      height: 100%;
+    }
+  }
+  .close{
+    position: absolute;
+    top: -30px;
+    right: -30px;
+    svg{
+      font-size: 24px;
+      color:rgba(255, 255, 255, 0.85)
+    }
+  }
+}
+.preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  position: relative;
+  
+}