kn-cli 1.0.131 → 1.0.133

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

@@ -0,0 +1,20 @@
+// @ts-ignore
+import React from "react";
+// @ts-ignore
+import styles from'./index.module.less';
+
+/**
+ * iconFont图标
+ * @param {object} props 
+ * @param {string} [props.icon] - 图标名称
+ * @param {string} [props.className] - 扩展类名
+ * 
+ * @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_admin_antd5/public/src/components/iconFont/index.module.less

@@ -0,0 +1,5 @@
+
+
+.iconBox{
+  font-size:inherit;
+}

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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+// @ts-ignore
+import { Image } from '@/components/antd';
+import ShowPreview from './preview';
+// @ts-ignore
+import styles from './index.module.less';
+// @ts-ignore
+import imgFail from '@/assets/images/loadFail.png';
+
+
+const errorImg =imgFail;
+  // 'data:image/png;base64,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';
+  
+/**
+ * @typedef ParamsBasic
+ * @property {string} props.src - 必填项；显示的图片地址
+ * @property {boolean} [props.hidePreview] - 可选项；是否展示预览功能
+ * @property {Array} [props.previewSrcs] - 可选项；预览图片地址
+ * @property {boolean} [props.showBlurOSS] - 可选项；展示oss图片模糊效果，大图时渐进加载
+ * @property {string} [props.className] - 可选项；类名
+ * @property {'view'|'checkbox'} [props.mode='view'] - view为预览模式，点击后会放大，checkbox为选择模式点击后为选中
+ * @property {(checked:boolean)=>void} [props.onClick] - 点击后的回调
+ * @property {boolean} [props.checked=false] - 选中状态
+ * 
+ */
+
+/**
+ * 带预览功能的图片组件
+ * @param {ParamsBasic & OtherAny} props
+ * @returns {JSX.Element}
+ */
+const ImgPreview = (props) => {
+  const { src, hidePreview, showBlurOSS, className,mode='view',checked=false,onClick:_onClick, ...others } =props;
+  const previewSrcs = props.previewSrcs || [{ src,name:src }];
+
+  const onImgClick = ()=>{
+    if(mode=='checkbox'){
+      if(_onClick){
+        _onClick(!checked);
+      }
+      return;
+    }
+    if(hidePreview) return;
+    ShowPreview({
+      data:previewSrcs,
+    });
+  }
+
+  return (
+    <div className={`${styles.wrap} ${className}`} data-checked={checked} onClick={onImgClick}>
+      <Image
+        className={`${styles.imgWrap}`}
+        src={src || errorImg}
+        preview={false}
+        placeholder={
+          showBlurOSS ? (
+            <Image
+              preview={false}
+              src={`${src}?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200`}
+              className={`${className}`}
+            />
+          ) : (
+            false
+          )
+        }
+        fallback={errorImg}
+        {...others}
+      />
+    </div>
+  );
+};
+
+export default ImgPreview;

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

@@ -0,0 +1,117 @@
+
+.wrap{
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+  width: 174px;
+  height: 174px;
+  :global{
+    .ant-image{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .imgWrap{width: 100%;height: 100%;}
+  &[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;
+    }
+  }
+}
+
+.main{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.preview {
+  padding: 30px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  overflow: auto;
+  .current{
+    margin-top: 30px;
+    margin-bottom: 8px;
+    flex:none;
+    width:70vh;
+    height: 70vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .image{
+      max-width:70vh;
+      max-height: 70vh;
+      object-fit: contain;
+    }
+  }
+  .name{
+    flex: none;
+    color: #FFFFFF;
+    font-weight: var(--weight-Medium);
+    line-height: 16px;
+    padding-bottom: 24px;
+  }
+  .thumb{
+    flex: none;
+    width: 100%;
+    padding-bottom: 24px;
+    display: flex;
+    justify-content: center;
+    column-gap: 24px;
+    overflow-x: auto;
+    .item{
+      border: 1px solid rgba(31,35,41,0.15);
+      border-radius: 4px;
+      cursor: pointer;
+      .itemImage{
+        width: 45px;
+        height: 80px;
+        object-fit: cover;
+        border-radius: 4px;
+      }
+    }
+    .active{
+      border: 2px solid #fff;
+    }
+  }
+  .close{
+    position: absolute;
+    top: -30px;
+    right: -30px;
+    svg{
+      font-size: 24px;
+      color:rgba(255, 255, 255, 0.85)
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { Image,Button,Space } from '@/components/antd';
+import { CloseOutlined } from '@ant-design/icons';
+import Popup from '@/components/popup';
+// @ts-ignore
+import styles from './index.module.less';
+import { ReactRender } from '@/components/react';
+
+const ModalPreview = (props) => {
+  const { destory,data=[] } = props;
+  const [current,setCurrent] = useState(0);
+
+  const onCancel = () => {
+    destory && destory();
+  };
+  const prePage = (e)=>{
+    e.stopPropagation();
+    if(!current) return;
+    setCurrent(current - 1);
+  }
+  const nextPage = (e)=>{
+    e.stopPropagation(); 
+    setCurrent(current+1);
+  }
+
+
+  return (
+    <section className={styles.main}>
+      <section className={styles.preview}>
+        <div className={styles.current}>
+          <Image
+            preview={false}
+            src={data?.[current]?.src}
+            className={styles.image}
+          />
+          <CloseOutlined className={styles.close} onClick={onCancel} />
+        </div>
+        {data?.length > 1 && (
+          <>
+            <div className={styles.name}>{data?.[current]?.name}</div>
+            <section className={styles.thumb}>
+              {data.map((item, index) => (
+                <div
+                  key={index}
+                  className={`${styles.item} ${
+                    current === index ? styles.active : ''
+                  }`}
+                  onClick={() => setCurrent(index)}
+                >
+                  <Image
+                    preview={false}
+                    src={item?.src}
+                    className={styles.itemImage}
+                  />
+                </div>
+              ))}
+            </section>
+            <Space size={'middle'}>
+              <Button disabled={!current} onClick={prePage}>
+                上一页
+              </Button>
+              <Button
+                disabled={!(current < data?.length - 1)}
+                onClick={nextPage}
+              >
+                下一页
+              </Button>
+            </Space>
+          </>
+        )}
+      </section>
+    </section>
+  );
+};
+
+const ShowPreview = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(
+      <ModalPreview destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowPreview;

package/templates/template_admin_antd5/public/src/components/layout/basic/index.jsx

@@ -0,0 +1,49 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import {Outlet} from 'react-router-dom';
+
+import TopBar from '@/components/topMenu/topBar';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+/**
+ * 登录后的页面主体框架，定义导航栏、路由主体部分位置
+ * @param {object} props 
+ * @param {JSX.Element} [props.nav] - 左侧导航栏组件
+ * @param {JSX.Element} [props.topMenu] - 顶部导航栏组件
+ * 
+ * @returns {JSX.Element}
+ */
+const LayoutBasic=(props)=>{
+  const {nav="",topMenu=""} = props;
+
+  return ( 
+    <div className={styles.layout}>
+      {/* 设置站点主体最小尺寸，窗口小于该尺寸将触发滚动条 */}
+      <div className={styles.frameMinSize} >
+
+        {/* 定义站点基础框架圣杯布局 */}
+        <section className={styles.frameTop}>
+          {/* 一级导航栏 */}
+          {topMenu}
+        </section>
+
+        <section className={styles.frameBottom}>
+          <section className={styles.frameContent}>
+            {/* 二级导航栏 */}
+            {nav}
+            {/* 路由内的页面部分 */}
+            <section className={styles.framePage}>
+              <Outlet />
+            </section>
+          </section>
+        </section>
+
+      </div>
+    </div>
+  )
+}
+
+export default LayoutBasic;

package/templates/template_admin_antd5/public/src/components/layout/basic/index.module.less

@@ -0,0 +1,76 @@
+@import '~@/_variable.module.less';
+@import '~@/_mixin.module.less';
+
+.layout{
+  position: relative;
+  width:100%;
+  height:100%;
+  overflow: auto;
+}
+
+.frameMinSize{
+  position: relative;
+  width:100%;
+  height:100%;
+  min-width: 1200PX;
+  min-height: 600PX;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.frameTop{
+  width: 100%;
+  height: var(--topMenu-height);
+  overflow: hidden;
+  display: flex;
+  background: #1B243D;
+}
+.frameBottom{
+  width: 100%;
+  flex:1;
+  overflow: hidden;
+}
+.frameLeft{
+  height: 100%;
+  min-width: var(--nav-min-width);
+  // width:var(--nav-width);
+  z-index: 1;  
+}
+
+.frameRight{
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  padding-left:6px;
+  padding-right: 6px;
+  padding-bottom: 6px;
+  overflow: hidden;
+}
+
+.frameContent{
+  width:100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  .framePage{
+    overflow: hidden;
+    flex:1;
+    height:100%;
+    position: relative;
+    .hideScrollBar;
+    background-color: #F5F6FB;
+  }
+}
+
+
+// body[data-debug-layout]{
+//   .leftWrap{
+//     border:1px solid red;
+//   }
+// }
+
+
+

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

@@ -0,0 +1,39 @@
+// @ts-ignore
+import React, { useEffect } from 'react';
+// @ts-ignore
+import {Outlet,useLocation} from 'react-router-dom';
+
+import ProviderApp from '@/provider/app';
+import LayoutBasic from './basic/index';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+import { popupList } from '@/components/popup';
+
+import Antd5Provider from '@/components/antd/antProvider';
+/**
+ * 页面根框架，用于注入各类provider
+ * @returns {JSX.Element}
+ */
+const AbsoluteLayout = () => {
+  const curLocation =useLocation();
+
+  useEffect(() => {
+    popupList.destroyAll();
+  }, [curLocation]);
+
+  return (
+    <Antd5Provider>
+      <ProviderApp.Provider>
+        <section className={styles.absoluteLayout} >
+          <Outlet />
+        </section>
+      </ProviderApp.Provider>
+    </Antd5Provider>
+  );
+};
+
+
+
+export { AbsoluteLayout,LayoutBasic };

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

@@ -0,0 +1,63 @@
+@import '~@/_variable.module.less';
+@import '~@/_mixin.module.less';
+
+.absoluteLayout {
+  width: 100%;
+  height:100%;
+  left:0;
+  top:0;
+  position: absolute;
+  margin: 0 auto;
+  z-index:0;
+  background:white;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  .app-scroll-body-pull-load-box{
+    width:100%;
+    height:100%;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    .hideScrollBar;
+  }
+  
+  .app-scroll-body-pull-load{
+    height:@pullLoadHeight+PX;
+    background:#F2F5FA;
+    width:100%;
+    color:#aaa;
+    z-index:1;
+
+    position: absolute;
+    left:0;
+    top:0;
+    transform: translate3d(0,-@pullLoadHeight+PX,0);
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    div,img{
+      // width:56*2+px;
+      max-height: 100%;
+    }
+
+  }
+  .app-scroll-body{
+    width:100%;
+    min-height:100%;
+  }
+
+}
+
+body[data-debug-layout]{
+  .layout .center{
+    border:4px solid #4366a0;
+  }
+}
+
+
+
+

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

@@ -0,0 +1,32 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import { ConfigProvider } from '@/components/antd';
+// @ts-ignore
+import {zhCN} from '@/components/antd';
+
+import ProviderApp from '@/provider/app';
+
+/**
+ * 注入AppProvider
+ */
+const LayoutProvider=(props)=>{
+  return ( 
+    <ConfigProvider locale={zhCN}>
+      <ProviderApp.Provider>
+        {props.children}
+      </ProviderApp.Provider>
+    </ConfigProvider>
+  )
+}
+
+export const LayoutLanguage=(props)=>{
+  return (
+    <ConfigProvider locale={zhCN}>
+      {props.children}
+    </ConfigProvider>
+  )
+}
+
+
+export default LayoutProvider;

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

@@ -0,0 +1,106 @@
+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import {useNavigate,} from 'react-router-dom';
+
+// @ts-ignore
+import { Menu } from '@/components/antd';
+import Badge from '@/components/badge'
+
+import {useLoading} from '@/hooks/index';
+import ProviderMenu from '@/provider/menu';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+
+
+
+
+/**
+ * 左侧导航栏的demo组件
+ * 
+ * @returns {JSX.Element}
+ */
+const LeftMenu=(props)=>{
+
+  const providerMenu = ProviderMenu.useContainer();
+  const loader = useLoading();
+  const [menus,setMenus] = useState([]);
+  const nav = useNavigate();
+  const [openKeys,setOpenKeys] = useState([])
+
+  
+  const translateMenu=(list)=>{
+    if(!list||list.length<=0)return [];
+    let req=list.map(menu=>{
+      const {key,name:label,icon,url,msgCount}=menu;
+
+      let item={
+        key,
+        label: menu.children?.length > 0 ? label: <a href={'/#'+url}>{label}</a>,
+        icon,
+        url
+      }
+      if(msgCount&&msgCount>0){
+        item.label=<span className={styles.menuLabel}>{label}
+        <Badge count={msgCount}/>
+        </span>
+      }
+      if(menu.children){
+        item.children = translateMenu(menu.children)
+      }
+      return item;
+    })
+    return req;
+  }
+
+  const onOpenChange=(keys)=>{
+    setOpenKeys(keys);
+  }
+
+  useEffect(()=>{
+    let menuList = translateMenu(providerMenu.leftMenu);
+    setMenus(menuList);
+  },[providerMenu.leftMenu])
+
+  useEffect(()=>{
+    if(openKeys.length != providerMenu.selectMenus.keys.length){
+      setOpenKeys(providerMenu.selectMenus.keys)
+    }else{
+      let notSome= openKeys.some(key=>{
+        if( providerMenu.selectMenus.keys.includes(key) ){
+          return false;
+        }else{
+          return true;
+        }
+      })
+      if(notSome){
+        setOpenKeys(providerMenu.selectMenus.keys)
+      }
+    }
+  },[providerMenu.selectMenus.keys])
+
+
+  const onClickMenuItem=(e)=>{
+    const { item, key, keyPath, domEvent } = e;
+    let menu = providerMenu.findMenuData(key);
+    nav(menu.url);
+  }
+  if(!menus||menus.length<=0)return <></>;
+
+  return (
+    <section className={styles.nav} data-nav-hide={!menus||menus.length<=0}>
+      <Menu
+        selectedKeys={providerMenu.selectMenus.keys}
+        openKeys={openKeys}
+        onOpenChange={onOpenChange}
+        onClick={onClickMenuItem}
+        mode="inline"
+        items={loader.loading?[]:menus}
+      />
+    </section>
+  )
+}
+
+export default LeftMenu;