kn-cli 1.0.134 → 1.0.136

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

@@ -1,72 +1,5 @@
 
 
-.tableScrollWrap{
-  flex:1;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  position: relative;
-  &.sticky {
-    overflow: visible;
-    :global {
-      .ant-table-body:has(+ .ant-table-sticky-scroll) {
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    }
-  }
-  &[data-full='true']{
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    padding:8px;
-    background-color: #fff;
-    left:0;
-    top:0;
-    z-index:9999;
-  }
-  .resizeTable{
-    position: absolute;
-    right:4px;
-    top:4px;
-    z-index: 20;
-    box-shadow: 0 0 2px #000;
-  }
-  .close{
-    font-size: 24px;
-    position: absolute;
-    right:16px;
-    top:16px;
-    z-index: 2;
-  }
-  :global {
-    .ant-table-selection-extra {
-      left: 18px;
-    }
-  }
-}
-.footer{
-  width: 100%;
-  position: relative;
-}
-
-.tableWrap{
-  flex:1;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.iconAdd{
-  background-image: url('~@/assets/images/icon-add.png');
-  background-size: contain;
-  width: 24px;
-  height:24px;
-}
-
 .expanded{
   background-image: url('~@/assets/images/expand.png');
   background-size:100% 100%;
@@ -88,46 +21,3 @@
   }
 }
 
-.fullSize{
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  border:1px solid #ccc;
-
-  .icon{
-    display: inline-block;
-    background-image: url('~@/assets/images/icon-full-size.png');
-    background-size:100% 100%;
-    width: 20px;
-    height: 20px;
-    &[data-full='true']{
-      background-image: url('~@/assets/images/icon-resize.png');
-    }
-  }
-  
-
-}
-
-
-
-.loading{
-  position: absolute;
-  display: none;
-  left:0;
-  top:0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255,255,255,.8);
-  z-index: 3;
-  &[data-show='true']{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

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

@@ -0,0 +1,242 @@
+import React,{useCallback,useEffect,useRef,useState} from 'react';
+// @ts-ignore
+import { Spin, Table } from "@/components/antd";
+// @ts-ignore
+import styles from './index.module.less';
+
+import {useEsc} from '@/hooks';
+import useDebounceFn from '@/hooks/useDebounceFn';
+import { useLayoutEffect } from 'react';
+import {SCROLL_CONFIG,PAGE_SIZE_LIST,FullSizeIcon} from '../';
+
+const getDomHeight=dom=>{
+  if(!dom)return 0;
+  const rect = dom.getBoundingClientRect();
+  const style = window.getComputedStyle(dom);
+  const totalHeight = rect.height +  parseFloat(style.marginTop) +  parseFloat(style.marginBottom);
+  return totalHeight;
+}
+
+
+/**
+ * 页面公共Table组件
+ * @param {object} [props] 
+ * @param {string|((item:object)=>string)} [props.rowKey] - Table主键
+ * @param {string} [props.className] - 自定义类名
+ * @param {boolean} [props.loading] - 是否加载中
+ * @param {Array} [props.columns] - 表格列
+ * @param {Array} [props.dataSource] - 数据数组
+ * @param {object} [props.pagination] - 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
+ * @param {object} [props.scroll] - 表格是否可滚动
+ * @param {object} [props.page] - 表格数据，包括数据数组、分页参数、loading等
+ * @param {number} [props.minWidth] - 表格无数据时的最小宽度限制
+ * @param {*} [props.rowSelection] - 行配置
+ * @param {*} [props.expandable] - antd的展开配置
+ * @param {boolean} [props.sticky] - 表头是否吸附固定
+ * @param {string} [props.heightMode] - 高度适配模式，默认为无限向下拓展，'inWrap':最大高度不超过父容器
+ * @param {boolean} [props.fullScreen=false] - 是否全屏展示
+ * @param {()=>void} [props.onCancelFullScreen] - 退出全屏的回调
+ * @param {(column,index)=>object} [props.onHeaderRow] - 
+ * @param {JSX.Element} [props.footer] - 表格底部额外的东西
+ * @param {string|number} [props.updateCount] - 用于强制刷新table
+ * @param {array} [props.sortDirections] - 排序的顺序
+ * @param {boolean} [props.virtual=false] - 是否开启虚拟滚动，如果开启scroll必须指定值
+ * @param {*} [props.onChange]
+ * 
+ * @returns {JSX.Element}
+ */
+const AutoSizeTable = (props) => {
+  const {
+    rowKey='id',
+    loading,
+    columns,
+    dataSource,
+    pagination=false,
+    scroll,
+    minWidth=undefined,
+    sticky,
+    heightMode='default',
+    fullScreen=false,
+    onCancelFullScreen,
+    footer=null,
+    updateCount=0,
+    onChange:_onChange,
+    ...others
+  } = props;
+  
+  const domTheadName= `.ant5-table-thead`;
+  const domPagination='.ant5-pagination';
+  const escControl = useEsc({name:'table'});
+
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refTable=useRef();
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef();
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refFooter = useRef();
+
+  const [resize,setResize]=useState(0);
+  const refResize=useRef(()=>{
+    refSelf.current.setResize(1);
+  })
+  const [resizeLazy] = useDebounceFn(refResize.current,{wait:1000})
+
+  const paginationFn = useCallback(() => {
+    if(!pagination)return false;
+    // pagination=false时不分页
+    if (typeof pagination === 'boolean') {
+      return pagination;
+    }
+    return {
+      showSizeChanger:true,
+      showQuickJumper:true,
+      pageSizeOptions: PAGE_SIZE_LIST,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+  }, [pagination]);
+
+
+  const getList=useCallback(()=>{
+    return dataSource;
+  },[dataSource]);
+
+  const [scrollConfig,setScrollConfig] = useState(()=>{
+    const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
+    let list =getList();
+    // 当没数据时，列的宽度取minWidth
+    if(minWidth && (!list||list.length<=0) ){
+      scrollConfig.x = minWidth;
+    }
+    return scrollConfig;
+  });
+
+  const onCancelFull=()=>{
+    if(fullScreen){
+      if(onCancelFullScreen){
+        onCancelFullScreen();
+        return true;
+      }
+    }
+  }
+  const onChange=(pagination, filters, sorter, extra)=>{
+    if(_onChange){
+      _onChange(pagination, filters, sorter, extra)
+    }
+    if(pagination){
+      resizeLazy();
+    }
+  }
+
+  refSelf.current={
+    onCancelFull,
+    setResize,
+    resize,
+  }
+
+  useEffect(()=>{
+    escControl.addEventListener(onCancelFull);
+    return ()=>{
+      escControl.removeEventListener(onCancelFull);
+    }
+  },[onCancelFull])
+
+
+  useLayoutEffect(()=>{
+    let list = getList();
+    let observer;
+    const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
+    // 当没数据时，列的宽度取minWidth
+    if(minWidth && (!list||list.length<=0) ){
+      scrollConfig.x = minWidth;
+    }
+    if(refTable?.current){
+      let dom = refTable.current;
+      let theadHeight= 0;
+      let pagationHeight= 0;
+      if(fullScreen || heightMode=='inWrap'){
+        const thead = dom.querySelector(domTheadName);
+        if(thead){
+          observer = new ResizeObserver((entries) => {
+            entries.forEach(entry => {
+              const height = entry.contentRect.height;
+              if(refSelf.current.resize != height){
+                refSelf.current.setResize(height)
+              }
+            });
+          });
+          observer.observe(thead);
+          theadHeight = getDomHeight(thead)+16;
+        }
+        if(pagination){
+          const _domPagination = dom.querySelector(domPagination);
+          pagationHeight= _domPagination?getDomHeight(_domPagination):28;
+        }
+        let maxHeight= dom.clientHeight;
+        let footerHeight = footer?getDomHeight(refFooter.current):0;
+        let h= maxHeight-(theadHeight+pagationHeight+footerHeight);
+        scrollConfig.y = h;
+      }
+    }
+    setScrollConfig(scrollConfig)
+    if(observer){
+      return ()=>{
+        observer.disconnect();
+      }
+    }
+
+  },[dataSource,fullScreen,resize,updateCount])
+
+  
+  useEffect(()=>{
+    const resize = ()=>{
+      resizeLazy();
+    }
+    window.addEventListener('resize',resize)
+    return ()=>{
+      window.removeEventListener('resize',resize);
+    }
+  },[])
+
+  return (
+    <section ref={refTable} className={`${styles.tableScrollWrap} ${sticky ? styles.sticky: ''}`} data-full={fullScreen}>
+      {
+        loading?
+        <Table 
+          bordered
+          size="small"
+          columns={columns} 
+          key='loading' 
+          loading={true}
+          scroll={ scrollConfig }
+        />:
+        <Table
+          rowKey={rowKey}
+          bordered
+          size="small"
+          columns={columns}
+          dataSource={getList()}
+          pagination={paginationFn()}
+          scroll={ scrollConfig }
+          sticky={sticky}
+          onChange={onChange}
+          {...others}
+        />
+      }
+      {footer?<div className={styles.footer} ref={refFooter}>{footer}</div>:''}
+      <div className={styles.loading} data-show={ loading }><Spin /></div>
+      {
+        fullScreen?<FullSizeIcon className={styles.resizeTable} full={fullScreen} onClick={onCancelFull}/>:<></>
+      }
+    </section>
+  );
+};
+
+
+export default AutoSizeTable;

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

@@ -0,0 +1,85 @@
+
+
+.tableScrollWrap{
+  flex:1;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  position: relative;
+  &.sticky {
+    overflow: visible;
+    // :global {
+    //   .ant-table-body:has(+ .ant-table-sticky-scroll) {
+    //     &::-webkit-scrollbar {
+    //       display: none;
+    //     }
+    //   }
+    // }
+  }
+  &[data-full='true']{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    padding:8px;
+    background-color: #fff;
+    left:0;
+    top:0;
+    z-index:9999;
+  }
+  .resizeTable{
+    position: absolute;
+    right:4px;
+    top:4px;
+    z-index: 20;
+    box-shadow: 0 0 2px #000;
+  }
+  .close{
+    font-size: 24px;
+    position: absolute;
+    right:16px;
+    top:16px;
+    z-index: 2;
+  }
+  // :global {
+  //   .ant-table-selection-extra {
+  //     left: 18px;
+  //   }
+  // }
+}
+.footer{
+  width: 100%;
+  position: relative;
+}
+
+.tableWrap{
+  flex:1;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.iconAdd{
+  background-image: url('~@/assets/images/icon-add.png');
+  background-size: contain;
+  width: 24px;
+  height:24px;
+}
+
+
+.loading{
+  position: absolute;
+  display: none;
+  left:0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,.8);
+  z-index: 3;
+  &[data-show='true']{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/templates/template_admin_antd5/public/src/components/table/withPage.jsx

@@ -0,0 +1,53 @@
+
+import React from 'react';
+import Table from './table';
+import {PAGE_SIZE_LIST} from './';
+
+
+/**
+ * 通过usePaginationWithForm管理页面分页和查询的封装
+ * @param {*} props 
+ */
+const WithPage=props=>{
+  const {page,pagination,...others}=props;
+
+  const getDataSource=()=>{
+    if(page){
+      if(page?.mode=='scrollLoad'){
+        return page.scrollData || [];
+      }else{
+        return page?.data?.[page?.pagination?.current - 1] ||[];
+      }
+    }
+    
+    return []
+  }
+  const getPagination=()=>{
+    if( typeof pagination === 'boolean'){
+      return pagination;
+    }
+    const {current,pageSize,total} = page?.pagination;
+
+    const req= {
+      showSizeChanger:true,
+      showQuickJumper:true,
+      pageSizeOptions: PAGE_SIZE_LIST,
+      current,
+      pageSize,
+      total,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+    return req;
+  }
+  return (
+    <Table 
+      pagination={getPagination()}
+      dataSource={getDataSource()}
+      {...others}
+    />
+  )
+}
+export default WithPage;
+
+

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

@@ -3,15 +3,21 @@ 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';
+import Popmenu from '@/components/topMenu/popmenu';
+
 
 // @ts-ignore
 import styles from './index.module.less';
+import { useRef } from 'react';
+
+import {DEBUG_ENV} from '@/config';
+
 
 const TopSlogan=()=>{
   const navigate = useNavigate();
@@ -19,12 +25,14 @@ const TopSlogan=()=>{
     navigate('/')
   }
   return (
-    <div className={styles.TopMenuSlogan} onClick={onHome}>
+    <div className={styles.topMenuSlogan} onClick={onHome}>
       <img src={imgSlogan} />
       {
         // @ts-ignore
-        DEBUG_ENV!='prod'?<span className={styles.version}>V{APP_VERSION}{DEBUG_ENV}</span>:<></>
+        
+        BUILD_ENV!='prod'?<span className={styles.version}>V{APP_VERSION}{BUILD_ENV=='localdebug'?DEBUG_ENV:BUILD_ENV}</span>:<></>
       }
+
     </div>
   )
 }
@@ -35,9 +43,12 @@ const TopMenu=(props)=>{
 
   const [menus,setMenus]=useState([]);
   const navigate = useNavigate();
-
+  const refMenus=useRef({})
   const menuOpen= true;//app.nav.leftNavOpen;
-
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refPopmenu = useRef();
 
   // // 推出登录
   // const onAvatarClick = (e)=>{
@@ -52,8 +63,26 @@ const TopMenu=(props)=>{
   const reload= async ()=>{
     providerMenu.reload();
   }
+
+  const onMouseEnter=(menu,key,e)=>{
+    const dom = refMenus.current[key];
+    const {offsetLeft,offsetTop,offsetHeight} = dom;
+    // console.log('mouse father enter')
+    if(refPopmenu?.current?.onMouseEnter){
+      refPopmenu.current.onMouseEnter(menu.children,{x:offsetLeft,y:offsetTop + offsetHeight + 4});
+    }
+  }
+
+  const onMouseLeave=(menu,key,e)=>{
+    // console.log('mouse father level')
+    if(refPopmenu?.current?.onMouseLeave){
+      refPopmenu.current.onMouseLeave();
+    }
+  }
+
   useEffect(()=>{
-    setMenus(providerMenu.topMenu)
+    setMenus(providerMenu.topMenu);
+
   },[providerMenu.topMenu]);
 
   useEffect(()=>{
@@ -73,28 +102,34 @@ const TopMenu=(props)=>{
       <hgroup className={styles.leftGroup}>
         <TopSlogan />  
         {
-          menus&&menus.length>1&&
+          menus&&menus.length>0&&
           menus.map((menu,idx)=>{
             const {key,name:label,icon,msgCount}= menu;
             const active = providerMenu.selectMenus.keys.includes(key);
             return (
-              <div 
+               <a 
+                href={'/#'+menu.url}
+                ref={(el) => (refMenus.current[key] = el)} // 动态分配 ref
+                onMouseEnter={onMouseEnter.bind(this,menu,key)}
+                onMouseLeave={onMouseLeave.bind(this,menu,key)}
                 key={key} 
                 className={styles.menuItem} 
                 data-checked={active} 
-                onClick={onClickMenuItem.bind(this,menu)} 
               >
-                <span><a href={'/#'+menu.url}>{label}</a></span>
+                <span>{label}</span>
                 {/* 未读标记 */}
                 <div className={styles.messageWrap}>
                   {msgCount>0?<i className={styles.iconUnread}/>:''}
                 </div>
-              </div>
+              </a>
             )
           })
         }   
       </hgroup>
       <TopBar />
+      <Popmenu ref={refPopmenu} 
+        activeKeys={providerMenu.selectMenus.keys}
+      />
     </div>
   )
 }

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

@@ -4,14 +4,14 @@
 @menuWidth:70px;
 @openMenuWidth:128px;
 
-.TopMenuSlogan{
-  width: 152px;
+.topMenuSlogan{
+  width: 230px;
   height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;
   img{
-    width: 73px;
+    width: 152px;
   }
   .version{
     font-size: 12px;
@@ -25,7 +25,7 @@
 }
 
 .topMenu{
-  padding:0 24px;
+  padding:0 16px;
   display: flex;
   justify-content: space-between;
   align-self: center;
@@ -36,11 +36,14 @@
     display: flex;
     height: 100%;
     align-items: center;
+    column-gap: 8px;
   }
 
   .menuItem{
     position: relative;
-    width: 74px;
+    width: auto;
+    white-space: nowrap;
+    padding: 0 16px;
     height: 100%;
 
     display: flex;
@@ -59,11 +62,11 @@
       color:inherit;
     }
     &[data-checked='true']{
-      background: rgba(78,148,207,0.7);
+      background: var(--theme-color-primary); // 使用 CSS 变量
       font-weight: bold;
     }
     &:hover{
-      background-color: rgba(255,255,255,.1);
+      background-color: var(--theme-color-primary);
     }
 
   }