kn-cli 1.0.131 → 1.0.133

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

@@ -0,0 +1,475 @@
+import React,{useCallback} from 'react';
+// @ts-ignore
+import { Spin, Table } from "@/components/antd";
+
+// @ts-ignore
+import styles from './index.module.less';
+import Column,{Wrap} from './column';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import {useEsc} from '@/hooks';
+import useDebounceFn from '@/hooks/useDebounceFn';
+import { useLayoutEffect } from 'react';
+
+export {Wrap}
+export const SCROLL_CONFIG={x:'max-content',
+  // y:Math.max(320,window.innerHeight-500) 
+} 
+
+export const updatePageSizeToLocal=(size)=>{
+  localStorage.setItem('pageSize',''+size);
+}
+
+export const PAGE_SIZE_LIST=[10, 15, 20, 50, 100];
+export const PAGE_SIZE_OPTIONS=PAGE_SIZE_LIST.map(size=>{
+  return {value:`${size}`,label:`${size} 条/页`}
+});
+
+/**
+ * 页面公共Table组件
+ * @param {object} [props] 
+ * @param {string|function} [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必须指定值
+ * 
+ * @returns {JSX.Element}
+ */
+const PageTable = (props) => {
+  const {
+    rowKey='id',
+    loading,
+    columns,
+    dataSource,
+    pagination,
+    scroll,
+    page,
+    minWidth=undefined,
+    sticky,
+    heightMode='default',
+    fullScreen=false,
+    onCancelFullScreen,
+    footer=null,
+    updateCount=0,
+    ...others
+  } = props;
+  
+  // const Table = (props?.virtual?Antd5Table:Antd4Table);
+  const domTheadName= props?.virtual?`.ant5-table-thead`:`.ant-table-thead`;
+
+  const escControl = useEsc({name:'table'});
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refTable=useRef();
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef();
+  const refDestory = useRef(false);
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refFooter = useRef();
+
+  const refResize=useRef(()=>{
+    refSelf.current.setResize(1);
+  })
+  const [resizeLazy] = useDebounceFn(refResize.current,{wait:1000})
+
+  const paginationFn = useCallback(() => {
+    // pagination=false时不分页
+    if (typeof pagination === 'boolean') {
+      return pagination;
+    }
+
+    
+    if( page?.pagination?.pageSize){
+      updatePageSizeToLocal( page?.pagination?.pageSize )
+      let sizeList = pagination?.pageSizeOptions||PAGE_SIZE_LIST;
+      page.pagination.pageSize=  calPageSize(page.pagination.pageSize,sizeList);
+
+    }
+    return {
+      showSizeChanger:true,
+      showQuickJumper:true,
+      pageSizeOptions: PAGE_SIZE_LIST,
+      current: page?.pagination?.current,
+      pageSize: page?.pagination?.pageSize,
+      total: page?.pagination?.total,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+  }, [pagination, page]);
+
+
+
+  const [resize,setResize]=useState(0);
+
+  const getList=()=>{
+    if(dataSource)return dataSource;
+    if(page?.mode == 'scrollLoad'){
+      return page.scrollData || [];
+    }else{
+      return page?.data?.[page?.pagination?.current - 1] ||[];
+    }
+  }
+  let list = getList();
+
+  const [scrollConfig,setScrollConfig] = useState(()=>{
+    const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
+    // 当没数据时，列的宽度取minWidth
+    if(minWidth && (!list||list.length<=0) ){
+      scrollConfig.x = minWidth;
+    }
+    return scrollConfig;
+  });
+
+  const onCancelFull=()=>{
+    if(fullScreen){
+      if(onCancelFullScreen){
+        onCancelFullScreen();
+        return true;
+      }
+    }
+  }
+  // const scrollConfig = scroll?{...SCROLL_CONFIG,...scroll}: {...SCROLL_CONFIG};
+  // // 当没数据时，列的宽度取minWidth
+  // if(minWidth && (!list||list.length<=0) ){
+  //   scrollConfig.x = minWidth;
+  // }
+
+  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){
+      if(fullScreen){
+        let dom = refTable.current;
+        // @ts-ignore
+        const thead = dom.querySelector(domTheadName);
+        observer = new ResizeObserver((entries) => {
+          entries.forEach(entry => {
+            const height = entry.contentRect.height;
+            if(refSelf.current.resize != height){
+              refSelf.current.setResize(height)
+            }
+          });
+        });
+        observer.observe(thead);
+
+        let theadHeight=60;
+        if(thead){
+          theadHeight = thead.clientHeight+16;
+        }
+        // @ts-ignore
+        let maxHeight= dom.clientHeight;
+        let pagationHeight = pagination?24:0;
+        let footerHeight = footer?refFooter.current.clientHeight:0;
+        scrollConfig.y = maxHeight-(theadHeight+16+pagationHeight+footerHeight);
+      } 
+      else if(heightMode=='inWrap'){
+        let dom = refTable.current;
+        // @ts-ignore
+        const thead = dom.querySelector(domTheadName);
+        observer = new ResizeObserver((entries) => {
+          entries.forEach(entry => {
+            const height = entry.contentRect.height;
+            if(refSelf.current.resize != height){
+              refSelf.current.setResize(height)
+            }
+          });
+        });
+        observer.observe(thead);
+  
+        let theadHeight=60;
+        if(thead){
+          theadHeight = thead.clientHeight+16;
+        }
+        
+        // @ts-ignore
+        let maxHeight= dom.clientHeight;
+        let pagationHeight = pagination?28:0;
+        let footerHeight = footer?refFooter.current.clientHeight:0;
+        let h= maxHeight-(theadHeight+pagationHeight+footerHeight);
+        scrollConfig.y = h;
+      }  
+     
+    }
+    setScrollConfig(scrollConfig)
+    if(observer){
+      return ()=>{
+        observer.disconnect();
+      }
+    }
+
+  },[dataSource,page,fullScreen,resize,updateCount])
+
+  
+  useEffect(()=>{
+    const resize = ()=>{
+      resizeLazy();
+    }
+
+    window.addEventListener('resize',resize)
+    return ()=>{
+      window.removeEventListener('resize',resize);
+      refDestory.current=true;
+    }
+  },[])
+
+
+  // if(!scrollConfig)return <></>
+  return (
+    <section ref={refTable} className={`${styles.tableScrollWrap} ${sticky ? styles.sticky: ''}`} data-full={fullScreen}>
+      {
+        loading??(page?.loading?.state && page?.data?.length<=0)?
+        <Table 
+          bordered
+          size="small"
+          columns={columns} 
+          key='loading' 
+          loading={true}
+          scroll={ scrollConfig }
+        />:
+        <Table
+          rowKey={rowKey}
+          bordered
+          size="small"
+          // loading={loading ?? page?.loading?.state}
+          columns={columns}
+          dataSource={list}
+          pagination={paginationFn()}
+          scroll={ scrollConfig }
+          sticky={sticky}
+          {...others}
+        />
+      }
+      {footer?<div className={styles.footer} ref={refFooter}>{footer}</div>:''}
+      <div className={styles.loading} data-show={ loading || page?.loading?.state }><Spin /></div>
+      
+      {
+        fullScreen?<FullSizeIcon className={styles.resizeTable} full={fullScreen} onClick={onCancelFull}/>:<></>
+      }
+    </section>
+  );
+};
+
+
+/**
+ * 从 sizeList 中找出与 value 最接近的值，同等距离时优先返回较大的值
+ * @param {string|number} value
+ * @param {string[]|number[]} sizeList
+ * @return {number}
+ */
+export const calPageSize = (value, sizeList) => {
+  const num = Number(value);
+  if(!sizeList||sizeList?.length<=0)return num;
+  return sizeList
+    .map(Number)
+    .reduce((closest, current) => {
+      const closestDiff = Math.abs(closest - num);
+      const currentDiff = Math.abs(current - num);
+      if (currentDiff < closestDiff) return current;
+      if (currentDiff === closestDiff) return current > closest ? current :closest;
+      return closest;
+    });
+};
+
+const getPageSizeFromLocal=()=>{
+  let size;
+  try{
+    size = localStorage.getItem('pageSize');
+    if(size)size=+size || 20;
+  }catch(ex){
+    size=20;
+  }
+  return +size;
+}
+
+
+/**
+ * 默认分页配置
+ */
+export const DefaultPagination=()=>{
+  return {
+    pageSize:getPageSizeFromLocal()
+  }
+}
+
+PageTable.Column = Column;
+PageTable.onPageChange = (page, current, pageSize) => {
+  page.update({ pagination: { current, pageSize }, clear: true });
+};
+PageTable.onSearch = (page) => {
+  page.update({ pagination: { current: 1 }, clear: true });
+};
+PageTable.onRest = (page) => {
+  page.reset();
+};
+
+PageTable.expandIcon=({ expanded, onExpand:_onExpand, record }) =>{
+  const onExpand = (item,e)=>{
+    e.stopPropagation();
+    if(_onExpand){
+      _onExpand(item,e);
+    }
+  }
+  if(!record.children){return <></>}
+  if(expanded){
+    return <i className={styles.expanded} data-state='close' onClick={e => onExpand(record, e)} />
+  }
+  return <i className={styles.expanded} onClick={e => onExpand(record, e)} />;
+}
+PageTable.createExpandIcon=(props={})=>{
+  const {className=''} = props; 
+  return ({ expanded, onExpand, record }) =>{
+    if(!record.children){return <></>}
+    if(expanded){
+      return <i className={`${styles.expanded} ${className}`} data-state='close' onClick={e => {e.stopPropagation();onExpand(record, e)}} />
+    }
+    return <i className={`${styles.expanded} ${className}`} onClick={e => {e.stopPropagation();onExpand(record, e)}} />;
+  }
+}
+export const ExpandIcon=props=>{
+  const {expanded,onClick,className=''} = props;
+  if(expanded){
+    return <i className={`${styles.expanded} ${className}`} data-state='close' onClick={onClick} />
+  }
+  return <i className={`${styles.expanded} ${className}`} onClick={onClick} />;
+}
+
+
+export const FullSizeIcon=props=>{
+  const {full=false,onClick,className=''} = props;
+  return <div className={`${styles.fullSize} ${className}`} onClick={onClick} ><i className={`${styles.icon}`} data-full={full} /></div>;
+}
+
+/**
+ * @typedef  MergeCellConfig
+ * @property {string[]} row - 参与行合并计算的列名列表
+ */
+
+/**
+ * 动态计算合并单元格
+ * @param {object[]} list - 数据
+ * @param {MergeCellConfig} config 
+ * @param {number} [rowIndex] 
+ * @returns {object[]}
+ */
+const _mergeCells = (list, config, rowIndex = 0) => {
+  let result = [];
+  let _prevItem = {};
+  for (let row of list) {
+    let _row = { ...row };
+    if (_row.children) {
+      _row.children = _mergeCells(row.children, config, rowIndex);
+      _prevItem = {};
+      rowIndex += _row.children.length;
+      result.push(_row);
+    } else {
+      for (let attrName of config.row) {
+        let prevItem = _prevItem[attrName];
+        if (!prevItem) {
+          _prevItem[attrName] = _row;
+          continue;
+        }
+        let same = false;
+        if (_row[attrName] == prevItem[attrName]) {
+          same = true;
+        }
+        if (same) {
+          prevItem._rowSpanConfig = prevItem._rowSpanConfig || {};
+          const { _rowSpanConfig } = prevItem;
+          _rowSpanConfig[attrName] = _rowSpanConfig[attrName] || {
+            startIndex: rowIndex - 1,
+            endIndex: rowIndex,
+          };
+          _rowSpanConfig[attrName].endIndex = rowIndex;
+          _row._rowSpanConfig = _row._rowSpanConfig || {};
+          _row._rowSpanConfig[attrName] = {
+            rowSpan: 0,
+          };
+        } else {
+          _prevItem[attrName] = _row;
+        }
+      }
+      result.push(_row);
+      rowIndex++;
+    }
+  }
+  return result;
+};
+
+const _mergeCellsOnnCell = (key, item, index) => {
+  // console.log('合并 onCell ',index,item)
+  if (item._rowSpanConfig && item._rowSpanConfig[key]) {
+    const _config = item._rowSpanConfig[key];
+    if ('startIndex' in _config) {
+      // console.log("合并", key, item, index);
+      return {
+        rowSpan: _config.endIndex - _config.startIndex + 1,
+      };
+    } else if (_config.rowSpan == 0) {
+      // console.log("合并隐藏", key, item, index);
+      return { rowSpan: 0 };
+    }
+    return {};
+  }
+  return {};
+};
+
+/**
+ * 用于动态计算合并单元格的算法
+ */
+PageTable.MergeCells={
+  onCell:_mergeCellsOnnCell,
+  mergeCell:_mergeCells
+}
+
+
+PageTable.heightMode={
+  default:'default',
+  inWrap:'inWrap'
+}
+
+export default PageTable;

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

@@ -0,0 +1,133 @@
+
+
+.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%;
+  width: 20px;
+  height: 20px;
+  display: block;
+  transition: background .3s ease-in-out;
+  cursor: pointer;
+  
+
+  &:hover{
+    background-image: url('~@/assets/images/expand-hover.png');
+  }
+  &[data-state='close']{
+    background-image: url('~@/assets/images/unexpand.png');
+    &:hover{
+      background-image: url('~@/assets/images/unexpand-hover.png');
+    }
+  }
+}
+
+.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/text/index.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState, useRef } from 'react';
+// @ts-ignore
+import { Tooltip } from '@/components/antd';
+import { getStrByteLen } from '@/utils';
+// @ts-ignore
+import styles from './index.module.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_antd5/public/src/components/text/index.module.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;
+  }
+}