kn-cli 1.0.97 → 1.0.99

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

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

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

@@ -1,6 +1,7 @@
 @import '~@/_variable.less';
+@import '~@/_mixin.less';
 
-.layout {
+.absoluteLayout {
   width: 100%;
   height:100%;
   left:0;
@@ -11,15 +12,14 @@
   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;
-    &::-webkit-scrollbar {
-      display: none; 
-    }
+    .hideScrollBar;
   }
   
   .app-scroll-body-pull-load{

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

@@ -1,19 +1,32 @@
 // @ts-ignore
 import React from 'react';
 // @ts-ignore
-import {Outlet} from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+// @ts-ignore
+import zhCN from 'antd/lib/locale/zh_CN';
 
 import ProviderApp from '@/provider/app';
 
 /**
  * 注入AppProvider
- * @returns {JSX.Element}
  */
-const LayoutProvider=()=>{
+const LayoutProvider=(props)=>{
   return ( 
-    <ProviderApp.Provider>
-      <Outlet />
-    </ProviderApp.Provider>
+    <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/public/src/components/{menu → leftMenu}/index.jsx

@@ -1,10 +1,13 @@
 // @ts-ignore
-import React, { useEffect, useRef, useState } from 'react';
-// @ts-ignore
-import { Menu,Badge } from 'antd';
+import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import {useNavigate,} from 'react-router-dom';
 
+// @ts-ignore
+import { Menu } from 'antd';
+import Badge from '@/components/badge'
+// @ts-ignore
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
 
 import {useLoading} from '@/hooks/index';
 import ProviderMenu from '@/provider/menu';
@@ -15,18 +18,17 @@ import styles from './index.less';
 
 
 
+
 /**
  * 左侧导航栏的demo组件
  * 
  * @returns {JSX.Element}
  */
-const LeftMenu=()=>{
+const LeftMenu=(props)=>{
 
-  
   const providerMenu = ProviderMenu.useContainer();
   const loader = useLoading();
   const [menus,setMenus] = useState([]);
-  const [subMenuOpen,setSubMenuOpen]= useState([]);
   const nav = useNavigate();
   
   const translateMenu=(list)=>{
@@ -38,7 +40,9 @@ const LeftMenu=()=>{
         key,label,icon,url
       }
       if(msgCount&&msgCount>0){
-        item.label=<span>{label}<Badge size='small' count={msgCount} offset={[5,-5]} /></span>
+        item.label=<span className={styles.menuLabel}>{label}
+        <Badge count={msgCount}/>
+        </span>
       }
       if(menu.children){
         item.children = translateMenu(menu.children)
@@ -60,28 +64,16 @@ const LeftMenu=()=>{
     nav(menu.url);
   }
 
-  const onOpenSubMenu=(keys)=>{
-    setSubMenuOpen(keys)
-  }
-  useEffect(()=>{
-    if(providerMenu.selectMenus.keys && providerMenu.selectMenus.keys.length>0){
-      setSubMenuOpen([...subMenuOpen,...providerMenu.selectMenus.keys]);
-    }
-  },[providerMenu.selectMenus.keys])
   return (
-    <section className={styles.nav}>
-      {
-        providerMenu.selectMenus.keys&&
-        <Menu
-          theme='dark'
-          openKeys={subMenuOpen}
-          onOpenChange={onOpenSubMenu}
-          selectedKeys={providerMenu.selectMenus.keys}
-          onClick={onClickMenuItem}
-          mode="inline"
-          items={loader.loading?[]:menus}
-        />
-      }
+    <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>
   )
 }

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

@@ -0,0 +1,42 @@
+@import '~@/_variable.less';
+
+@import '~@/_mixin.less';
+
+
+.nav{
+  max-width: var(--nav-width);
+  min-width: var(--nav-min-width);
+  height:100%;
+  background-color: white;
+  transition: all .2s;
+  z-index: var(--z-nav-mobile);
+  overflow-y: auto;
+  border-right: 1px solid #DEE0E3;
+  .scrollBar;
+  &[data-nav-hide='true']{
+    display: none;
+  }
+  &[data-nav-mode='mobile']{
+    position: fixed;
+    z-index: var(--z-nav-mobile);
+    box-shadow: 0 0 20px #444;
+  }
+
+}
+.iconUnread{
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.menuLabel{
+  display: flex;
+  column-gap: 6px;
+  align-items: center;
+  font-size: inherit;
+  font-weight: inherit;
+  color:inherit;
+}

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

@@ -7,26 +7,51 @@ import ReactDOM from 'react-dom';
 import styles from './index.less';
 styles;
 
+export const popupList={
+  list:[],
+  remove:function(fn){
+    let list = popupList.list;
+    let idx = list.indexOf(fn);
+    if(idx>=0)list.splice(idx,1);
+  },
+  destroyAll:function(){
+    let list = popupList.list;
+
+    while(list.length>0){
+      let fn = list.shift();
+      fn(false);
+    }
+  },
+  add:function(fn){
+    popupList.list.push(fn);
+  }
+}
+
 /**
  * 一个全屏置顶的遮罩层
  * @param {(result)=>void} reslove - 遮罩层的关闭回调
  * @param {Object} [options] - 参数
  * @param {boolean} [options.cantouch=false] - 是否允许被点击穿透
  * @param {boolean} [options.transparent=false] - 是否遮罩层完全透明
+ * @param {string} [options.className=''] - 扩展样式
+ * 
  * 
  * @returns { {dom:HTMLElement,destory:()=>void} }
  */
 const Popup = (reslove,options) => {
   let rootDom = document.createElement('div');
   rootDom.className='popup-box';
+  if(options&&options.className)rootDom.className += ` ${options.className}`
   if(options&&options.cantouch)rootDom.setAttribute('data-can-touch','1');
   if(options&&options.transparent)rootDom.setAttribute('data-transparent','1');
 
   let destory = (result) => {
+    popupList.remove(destory);
     ReactDOM.unmountComponentAtNode(rootDom);
     rootDom.parentNode.removeChild(rootDom);
     if (reslove) reslove(result);
   };
+  popupList.add(destory);
   document.body.appendChild(rootDom);
   return { dom: rootDom, destory };
 };

package/templates/template_admin/public/src/components/table/column.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+// @ts-ignore
+import styles from './column.less';
+import {DebugTableItem} from '@/components/debug';
+
+
+/**
+ * 用于Table组件内渲染列用
+ * 一旦设置了width/minWidth/maxWidth后，则会自动根据宽度显示，超出的显示省略号
+ * @param {object} props 
+ * @param {string|number} [props.width] - 列宽限制，width和minWidth、maxWidth不要同时存在，2者取1
+ * @param {string|number} [props.minWidth] - 列宽限制范围
+ * @param {string|number} [props.maxWidth] - 列宽限制范围
+ * @param {boolean} [props.wrap=false] - 是否允许自动换行
+ * @param {number} [props.maxLine=3] - 最大限制换行数
+ * @param {object} [props.item] - 源数据对象
+ * @param {string|JSX.Element} [props.children] - 显示的列内容
+ * 
+ * 
+ * @returns {JSX.Element}
+ */
+const Column=(props)=>{
+  const {width,minWidth,maxWidth,wrap=false,maxLine=3,item={}} = props;
+  const myStyle = {
+  };
+  if(minWidth){myStyle.minWidth=minWidth;}
+  if(maxWidth){myStyle.maxWidth=maxWidth;}
+  if(width){myStyle.width=width;}
+
+  if(width || minWidth || maxWidth){
+    if(wrap && maxLine){
+      myStyle.display='-webkit-box';
+      myStyle.webkitBoxOrient='vertical';
+      myStyle.webkitLineClamp=''+maxLine;
+    }
+  }
+  return (
+    <DebugTableItem item={item}>
+      <div className={styles.column} style={myStyle} data-wrap={wrap}>
+        {props.children??'-'}
+      </div>
+    </DebugTableItem>
+  )
+}
+
+export default Column;

package/templates/template_admin/public/src/components/table/column.less

@@ -0,0 +1,12 @@
+
+
+.column{
+  flex-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  &[data-wrap='true']{
+    white-space: normal;
+    flex-wrap: wrap;
+  }
+}

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

@@ -1,6 +1,11 @@
 import React,{useCallback} from 'react';
 // @ts-ignore
 import { Table } from 'antd';
+// @ts-ignore
+import styles from './index.less';
+import Column from './column';
+
+export const SCROLL_CONFIG={x:'max-content',y:550} 
 
 /**
  * 页面公共Table组件
@@ -43,20 +48,24 @@ const PageTable = (props) => {
   }, [pagination, page]);
 
   return (
-    <Table
-      rowKey={rowKey ?? 'id'}
-      bordered
-      size="small"
-      loading={loading ?? page?.loading?.state}
-      columns={columns}
-      dataSource={
-        dataSource ?? (page?.data?.[page?.pagination?.current - 1] || [])
-      }
-      pagination={paginationFn()}
-      scroll={scroll ?? { y: 500 }}
-      {...others}
-    />
+    <section className={styles.tableScrollWrap}>
+      <Table
+        rowKey={rowKey ?? 'id'}
+        bordered
+        size="small"
+        loading={loading ?? page?.loading?.state}
+        columns={columns}
+        dataSource={
+          dataSource ?? (page?.data?.[page?.pagination?.current - 1] || [])
+        }
+        pagination={paginationFn()}
+        scroll={scroll?{...SCROLL_CONFIG,...scroll}: SCROLL_CONFIG }
+        {...others}
+      />
+    </section>
   );
 };
 
+
+PageTable.Column = Column;
 export default PageTable;

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

@@ -0,0 +1,15 @@
+
+
+.tableScrollWrap{
+  flex:1;
+  width: 100%;
+  overflow: auto;
+}
+
+.tableWrap{
+  flex:1;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+}

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useState, useRef } from 'react';
+// @ts-ignore
+import { Tooltip } from 'antd';
+import { getStrByteLen } from '@/utils';
+// @ts-ignore
+import styles from './index.less';
+
+/**
+ * 获取字符串末尾字节数的字符串、所在位置
+ * @param {string} str - 必填项；要处理的字符串 
+ * @param {number} bytes - 必填项；末尾字节数
+ * @returns {object}
+ */
+const endBytesStr = (str, bytes) => {
+  if (!str) return { index: 0, text: '' };
+  let num = 0;
+  let result = '';
+  let index = 0;
+  for (let i = str.length - 1; i >=0; i--) {
+    num += str.charCodeAt(i) > 255 ? 3 : 1; // 中文三个字节，英文一个字节
+    if (num > bytes) {
+      break;
+    }
+    result = str.substring(i, str.length);
+    index = i;
+  }
+  return {
+    index,
+    text:result,
+  };
+}
+
+/**
+ * 字符串省略效果：末尾省略 ｜ 中间省略
+ * @param {object} props 
+ * @param {string} props.str - 必填项；要处理的字符
+ * @param {number} [props.endBytes] - 可选项；不传默认末尾省略，中间省略时，字符串末尾显示几个“字节”
+ * @param {string} [props.className] - 可选项；类名
+ * @returns {JSX.Element}
+ */
+const Text = (props) => {
+  const { str, endBytes=null, className='' } = props;
+  const [strEnd, setStrEnd] = useState({
+    index: 0,
+    text: '',
+  });
+  const [isOverflow, setIsOverflow] = useState(false);
+  const prevRef = useRef(null);
+
+  useEffect(() => {
+    if(!str) return;
+    const strBytes = getStrByteLen(str);
+    if (endBytes && strBytes > endBytes) {
+      const { index, text } = endBytesStr(str, endBytes);
+      setStrEnd({
+        index,
+        text,
+      });
+    } else {
+      setStrEnd({
+        index: 0,
+        text: '',
+      });
+    }
+  }, [str, endBytes]);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (prevRef.current) {
+        const isOverflowing =
+          prevRef.current.scrollWidth > prevRef.current.clientWidth;
+        setIsOverflow(isOverflowing);
+      }
+    };
+
+    checkOverflow();
+  }, [strEnd]);
+
+  const ContentDom = (
+    <section className={`${styles.parent} ${className}`}>
+      {strEnd?.text ? (
+        <>
+          <div className={styles.prev} ref={prevRef}>
+            {str.slice(0, strEnd?.index)}
+          </div>
+          <div className={styles.next}>{strEnd?.text}</div>
+        </>
+      ) : (
+        <div className={styles.prev} ref={prevRef}>
+          {str}
+        </div>
+      )}
+    </section>
+  );
+  return isOverflow ? <Tooltip title={str}>{ContentDom}</Tooltip> : ContentDom;
+};
+
+export default React.memo(Text);

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

@@ -0,0 +1,13 @@
+.parent {
+  display: flex;
+  overflow: hidden;
+  .prev {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: keep-all;
+  }
+  .next {
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,97 @@
+// @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';
+
+// @ts-ignore
+import styles from './index.less';
+
+const TopSlogan=()=>{
+  const navigate = useNavigate();
+  const onHome= ()=>{
+    navigate('/')
+  }
+  return (
+    <div className={styles.TopMenuSlogan} onClick={onHome}>
+      <img src={imgSlogan} />
+    </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>{label}</span>
+                {/* 未读标记 */}
+                <div className={styles.messageWrap}>
+                  {msgCount>0?<i className={styles.iconUnread}/>:''}
+                </div>
+              </div>
+            )
+          })
+        }   
+      </hgroup>
+      <TopBar />
+    </div>
+  )
+}
+
+export default TopMenu;