kn-cli 1.0.97 → 1.0.98

package/templates/template_admin/public/src/components/topMenu/index.less

@@ -0,0 +1,80 @@
+@import '~@/_variable.less';
+@import '~@/_mixin.less';
+
+@menuWidth:70px;
+@openMenuWidth:128px;
+
+.TopMenuSlogan{
+  width: 152px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  img{
+    width: 73px;
+  }
+}
+
+.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;
+    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/public/src/components/topMenu/topBar/index.jsx

@@ -0,0 +1,76 @@
+// @ts-ignore
+import React, { useRef, useState } from 'react';
+// @ts-ignore
+import { Dropdown,message } from '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.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:'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/public/src/components/topMenu/topBar/index.less

@@ -0,0 +1,88 @@
+@import '~@/_mixin.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;
+}

package/templates/template_admin/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.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/public/src/components/video/index.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;
+  
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { CloseOutlined } from '@ant-design/icons';
+import Popup from '@/components/popup';
+// @ts-ignore
+import styles from './index.less';
+
+const ModalPreview = (props) => {
+  const { destory, src } = props;
+
+  const onCancel = () => {
+    destory && destory();
+  };
+
+  return (
+    <section className={styles.main}>
+      <div className={styles.current}>
+        <video controls src={src} className={styles.video}>
+          <a href={src} download>
+            下载
+          </a>
+        </video>
+        <CloseOutlined className={styles.close} onClick={onCancel} />
+      </div>
+    </section>
+  );
+};
+
+const ShowPreview = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactDom.render(
+      <ModalPreview destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowPreview;

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

@@ -3,13 +3,10 @@
 import React from 'react';
 // @ts-ignore
 import {useDictionary} from 'kn-hooks';
+
 // @ts-ignore
 import {Select,Radio} from 'antd';
 
-import {GET_ENUM_TYPE} from '@/services/demo'
-
-import ShowToast from '@/components/toast';
-
 
 
 /**
@@ -39,51 +36,123 @@ import ShowToast from '@/components/toast';
  */
 
 
+/**
+ * @typedef Dictionary
+ * @property {DictionaryItem[]}  list - 字典数据列表
+ * @property {(labelOrName:string)=>string|number}  getId - (labelOrName:string)=>string,搜索字典项中,label或name匹配labelOrName的项目，返回其id的值
+ * @property {(idOrLabel:string|number)=>string}  getName - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其name的值
+ * @property {(idOrName:string|number)=>string}  getLabel - (id:string)=>string,搜索字典项中,id匹配id的项目，返回其label的值
+ * @property {(text:string|number)=>DictionaryItem|null}  getItem - 匹配text为id\name\label中任何一个的对象
+ * @property {JSX.Element[]} [selectOptions] - antd-select渲染成员
+ */
+
+
 
-export const SelectOption=(props)=>{
-  const {value}=props;
-  const name = props['data-keyname'];
-  const onClick=(e)=>{
-    ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
-    if(props.onClick)props.onClick();
-  }
-  // @ts-ignore
-  return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
-}
 
-useDictionary.SetConfig({SelectOption:Select.Option, RadioOption: Radio })
+// export const SelectOption=(props)=>{
+//   const {value}=props;
+//   const name = props['data-keyname'];
+//   const onClick=(e)=>{
+//     ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
+//     if(props.onClick)props.onClick();
+//   }
+//   // @ts-ignore
+//   return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
+// }
 
+useDictionary.SetConfig({SelectOption:Select.Option,RadioOption:Radio})
 
-export const useDemoType = useDictionary.createDictionary({
-  api:GET_ENUM_TYPE,
-  afterApi:(response)=>{
-    if(response?.code==0){
-      let req= response.data.map(item=>{
-        const  {label,value:id,key:name}=item;
-        return {label,id,name}
-      });
-      return req;
+
+/**
+ * 
+ * @param {DictionaryItem[]|[]} list 
+ * @returns {Dictionary}
+ */
+const createDictionary=(list)=>{
+  const getId=(nameOrLabel)=>{
+    for(let i=0;i<list.length;i++){
+      if(list[i].label == nameOrLabel || list[i].name == nameOrLabel){
+        return list[i].id;
+      }
     }
-    return [];
+    return null;
   }
-});
+  const getLabel=(nameOrId)=>{
+    for(let i=0;i<list.length;i++){
+      if(list[i].id == nameOrId || list[i].name == nameOrId){
+        return list[i].label;
+      }
+    }
+    return null;
+  }
+  const getName=(idOrLabel)=>{
+    for(let i=0;i<list.length;i++){
+      if(list[i].id == idOrLabel || list[i].label == idOrLabel){
+        return list[i].name;
+      }
+    }
+    return null;
+  }
+  const getItem=(idOrNameOrLabel)=>{
+    for(let i=0;i<list.length;i++){
+      if(list[i].id == idOrNameOrLabel || list[i].label == idOrNameOrLabel || list[i].name== idOrNameOrLabel ){
+        return list[i];
+      }
+    }
+    return null;
+  }
+  
+  const selectOptions = list.map(item=>{
+    return <Select.Option value={item.id} >{item.label}</Select.Option>
+  })
+  return {
+    getId,getLabel,getName,getItem,list,selectOptions
+  }
+}
 
-export const useTaskState= useDictionary.createDictionary({
-  defaultTypes:[
-    {label:'进行中',id:'1',name:'run'},
-    {label:'已完成',id:'5',name:'complete'},
-  ]
-});
 
+/**
+ * 用户枚举数据
+ * @type UseDictionary
+ */
+// export const useUserEnum=useDictionary.createDictionary({
+//   beforeApi: () => ({
+//     status: 1 // 筛选已启用的数据
+//   }),
+//   api: USER_ENUM,
+//   labelKey: 'name',
+//   afterApi: res => {
+//     let list=[];
+//     if(res?.code===0) {
+//       list=res?.data||[];
+//     }
+//     return list;
+//   }
+// })
+
+
+/**
+ * 消息已读状态的
+ */
+export const DictMessageStatus=[
+  {label: '未读',id: '0',name: '0'},
+  {label: '已读',id: '1',name: '1'}
+]
 
 /**
- * 健康状态
+ * 消息已读状态
  * @type UseDictionary
  */
-export const useHealthy= useDictionary.createDictionary({
-  defaultTypes:[
-    {label:'正常',id:'normal',name:'normal'},
-    {label:'异常',id:'abnormal',name:'abnormal'},
-    {label:'禁用',id:'disabled',name:'disabled'},
-  ]
+export const useMessageStatus=useDictionary.createDictionary({
+  defaultTypes: DictMessageStatus
 });
+
+
+/**
+ * 用户状态
+ */
+export const emUserState=  createDictionary([
+  {label:'启用',id:'1',name:'open'},
+  {label:'禁用',id:'0',name:'disabled'},
+  {label:'离职',id:'2',name:'out'},
+]);