kn-cli 1.0.97 → 1.0.98

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

@@ -4,7 +4,11 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import ProviderApp from '@/provider/app';
+
 import {useLoading} from '@/hooks/index';
+// @ts-ignore
+import styles from './index.less';
+
 
 /**
  * 检查用户是否带有某个权限
@@ -17,7 +21,7 @@ import {useLoading} from '@/hooks/index';
 export const AuthShow=(props)=>{
   const {name} = props;
   const app = ProviderApp.useContainer();
-  if(app?.user?.authorities?.includes(name)){
+  if(app?.auths?.includes(name)){
     return props.children;
   }
   return <></>
@@ -47,7 +51,7 @@ export const AuthLogin=(props)=>{
     }else{
       console.log(`[Auth]检查用户登录态失败`)
       setPass(false);
-      navigate('/superAdminLogin');
+      navigate('/login');
     }
   }
   useEffect(()=>{check()},[]);
@@ -55,7 +59,7 @@ export const AuthLogin=(props)=>{
   if(pass){
     return props.children;
   }
-  return <>检查登录态中...</>
+  return <div className={styles.body}></div>
 }
 
 

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

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

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from "react";
+
+// @ts-ignore
+import styles from './index.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/public/src/components/badge/index.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/public/src/components/debug/index.jsx

@@ -0,0 +1,27 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import ReactJson from 'react-json-view'
+// @ts-ignore
+import {Tooltip} from 'antd';
+// @ts-ignore
+import styles from './index.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/public/src/components/debug/index.less

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

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

@@ -0,0 +1,28 @@
+// @ts-ignore
+import React from "react";
+// @ts-ignore
+import styles from './index.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/public/src/components/empty/index.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/public/src/components/image/index.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+// @ts-ignore
+import { Image } from 'antd';
+import ShowPreview from './preview';
+// @ts-ignore
+import styles from './index.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/public/src/components/image/index.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/public/src/components/image/preview.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import ReactDom from 'react-dom';
+import { Image,Button,Space } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import Popup from '@/components/popup';
+// @ts-ignore
+import styles from './index.less';
+
+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);
+    ReactDom.render(
+      <ModalPreview destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowPreview;

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

@@ -3,13 +3,13 @@ import React from 'react';
 // @ts-ignore
 import {Outlet} from 'react-router-dom';
 
-import {LayoutCenterBody} from '@/components/layout';
+import TopBar from '@/components/topMenu/topBar';
 
 // @ts-ignore
 import styles from './index.less';
 
 /**
- * 基础页面框架
+ * 登录后的页面主体框架，定义导航栏、路由主体部分位置
  * @param {object} props 
  * @param {JSX.Element} [props.nav] - 左侧导航栏组件
  * @param {JSX.Element} [props.topMenu] - 顶部导航栏组件
@@ -18,18 +18,31 @@ import styles from './index.less';
  */
 const LayoutBasic=(props)=>{
   const {nav="",topMenu=""} = props;
+
   return ( 
-    <LayoutCenterBody layout='x-center'>
-      <section className={styles.wrap} >
-        {topMenu}
-        <section className={styles.content}>
-          {nav}
-          <section className={styles.body}>
-            <Outlet />
+    <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>
-      </section>
-    </LayoutCenterBody>
+
+      </div>
+    </div>
   )
 }
 

package/templates/template_admin/public/src/components/layout/basic/index.less

@@ -1,37 +1,76 @@
 @import '~@/_variable.less';
+@import '~@/_mixin.less';
 
-.wrap{
+.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;
 }
 
-.content{
-  width:100%;
+.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;
-  .body{
-    overflow: auto;
-    background-color: var(--color-body-background);
+  .framePage{
+    overflow: hidden;
     flex:1;
     height:100%;
-    // &::-webkit-scrollbar {
-    //   display: none;
-    // }
+    position: relative;
+    .hideScrollBar;
+    background-color: #F5F6FB;
   }
-
-}
-.navBackground{
-  position: fixed;
-  left:0;
-  top:0;
-  background-color: rgba(0,0,0,.5);
-  width:100%;
-  height:100%;
-  z-index: var(--z-nav-mobile);
 }
 
 
+// body[data-debug-layout]{
+//   .leftWrap{
+//     border:1px solid red;
+//   }
+// }
+
+