kn-cli 1.0.131 → 1.0.133

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

@@ -0,0 +1,250 @@
+import React, { useMemo } from 'react';
+// @ts-ignore
+import { BaseTable, useTablePipeline, features } from 'ali-react-table'; 
+import { Pagination,Checkbox,Radio, Spin } from '@/components/antd';
+import styles from './index.module.less';
+
+
+/**
+ * rowSelection 已实现功能
+ * @typedef RowSelection
+ * @property {string[]} selectedRowKeys - 已选项key
+ * @property {string} [type] - 多选/单选: checkbox | radio 
+ * @property {(selectedRowKeys:string[], selectedRows:object[], info: { type:string })=>void} onChange 
+ */
+
+/**
+ * expandable 已实现功能
+ * @typedef Expandable
+ * @property {string[]} expandedRowKeys - 已展开的key
+ * @property {(rows:string[])=>void} [onExpandedRowsChange]
+ */
+
+/**
+ * sorter 排序功能已实现
+ */
+
+/**
+ * 合并表头-已完成
+ */
+
+/**
+ * 行合并-已实现
+ */
+
+
+const AntdCompatibleTable = ({ 
+  columns, 
+  dataSource, 
+  rowKey = 'id',
+  pagination,
+  rowSelection,
+  expandable,
+  onChange:onTableChange,
+  loading
+}) => {
+
+  const formatColumn=(col)=>{
+    let req={
+      title: col.title,
+      // name:col.name,
+      code: col.dataIndex || col.key ||undefined,
+      width: col.width,
+      defaultColumnWidth:col?.width||100,
+      lock: col.fixed?true:false,
+      side: col.fixed=='right'?'right':'left',
+      features:col?.sorter?{
+        sortable:col.sorter
+      }:undefined,
+      // 这里的适配支持了合并单元格
+      getCellProps: col.onCell ? (value, record, index) => col.onCell(record, index) : col.getCellProps,
+      render: col.render,
+    };
+    if(col.children){
+      req.children = col.children.map(child=>formatColumn(child));
+    }
+    if (col.onHeaderCell) {
+      // 执行 antd 的 onHeaderCell 拿到属性对象
+      const antdProps = col.onHeaderCell(col);
+      
+      req.headerCellProps = {
+        ...req.headerCellProps,
+        ...antdProps,
+        // 合并 class 和 style
+        className: [req.headerCellProps?.className, antdProps.className].filter(Boolean).join(' '),
+        style: { ...req.headerCellProps?.style, ...antdProps.style },
+      };
+    }    
+    return req;
+  }
+  const adaptedColumns = useMemo(() => {
+    return columns.map(col => (formatColumn(col)));
+  }, [columns]);
+
+  const pipelineProps = { components: { Checkbox,Radio } }
+  const pipeline = useTablePipeline(pipelineProps)
+    .input({ dataSource, columns: adaptedColumns })
+    .use(
+      features.columnResize({
+        fallbackSize: 40,
+        handleBackground: '#ddd',
+        handleHoverBackground: '#aaa',
+        handleActiveBackground: '#89bff7',
+      }),
+    )
+    .primaryKey(rowKey);
+
+  // 处理折叠
+  if (expandable) {
+    const {
+      expandedRowKeys,
+      onExpandedRowsChange,
+    } = expandable;
+    pipeline.use(
+      features.treeMode({
+        // 绑定展开的 keys
+        openKeys: expandedRowKeys,
+        // 状态变更回调
+        onChangeOpenKeys: (nextKeys, key, action) => {
+          if (onExpandedRowsChange) {
+            onExpandedRowsChange(nextKeys);
+          }
+        },
+        clickArea:'cell',
+      })
+    );
+  }
+
+  // 处理可选项
+  if (rowSelection) {
+    const {
+      selectedRowKeys = [],
+      onChange,
+      getCheckboxProps,
+      type = 'checkbox', // checkbox 或 radio
+    } = rowSelection;
+    const isSingle = type=='radio';
+    const selectFeature = isSingle ? features.singleSelect : features.multiSelect;
+    const onChangeMulti=(nextKeys,key,keys,action) => {
+      if (onChange) {
+        const _nextKey = nextKeys
+        const nextRows = dataSource.filter((d) => _nextKey.includes(d[rowKey]));
+        let antdAction='';
+        switch(action){
+          case 'uncheck':
+          case 'check':{
+            antdAction='single';
+            if(keys?.length>1){
+              antdAction='multiple'
+            }
+          }break;
+          case 'check-all':
+          case 'uncheck-all':{
+            antdAction='all'
+          }break;
+        }
+        onChange(_nextKey, nextRows,{type:antdAction});
+      }
+    };
+    const onChangeSingle=(nextKeys) => {
+      if (onChange) {
+        let _nextKey = [nextKeys]
+        const nextRows = dataSource.filter((d) => _nextKey.includes(d[rowKey]));
+        let antdAction='single';
+        onChange(_nextKey, nextRows,{type:antdAction});
+      }
+    };
+    pipeline.use(
+      selectFeature({
+        // 绑定受控值
+        value: isSingle?(selectedRowKeys[0]??selectedRowKeys):selectedRowKeys,
+        // 状态变更回调
+        onChange: isSingle?onChangeSingle:onChangeMulti,
+        // 基础配置
+        clickArea: 'cell',
+        // 自定义选择列的属性
+        checkboxColumn: {
+          lock: true,
+        },
+        // 兼容禁用逻辑
+        isDisabled: (record,rowIdx) => {
+          const config = getCheckboxProps ? getCheckboxProps(record,rowIdx) : {disabled:false};
+          return config.disabled;
+        },
+      })
+    );
+  }
+
+  pipeline.use(
+    features.sort({
+      // mode: 'multiple' 或 'single'，antd 默认是 single
+      mode: 'single',
+      // 这里的逻辑：检查列配置中是否有 sorter 属性
+      // ali-react-table 会自动处理带有 features.sort 标记的列
+      keepDataSource:true,
+      // 状态改变时的回调，对接 antd 的 onChange
+      onChangeSorts: (nextSorts) => {
+        if(onTableChange){
+          const transOrder={
+            'desc':'descend',
+            'asc':'ascend'
+          }
+          let sorts=[];
+          nextSorts.forEach(col=>{
+            if(!col.order)return false;
+            sorts.push(
+              {
+                field:col.code,
+                order:transOrder[col.order]||'',
+              }
+            )
+          })
+          onTableChange(pagination,null,sorts,{action:'sort'});
+        }
+        // if (onChange) {
+        //   // 将 ali 的数据结构 [{ code, order }] 转换为 antd 风格的对象
+        //   const sorter = nextSorts.length > 0 ? {
+        //     field: nextSorts[0].code,
+        //     order: nextSorts[0].order === 'asc' ? 'ascend' : 'descend'
+        //   } : {};
+          
+        //   // 调用 antd 风格的 onChange(pagination, filters, sorter, extra)
+        //   // 这里为了简化，只传 sorter
+        //   onChange(null, null, sorter, { action: 'sort' });
+        // }
+      },
+    })
+  )
+
+
+  return (
+    <div className={styles.wrap} >
+      <BaseTable
+        {...pipeline.getProps()}
+        useVirtual={{
+          horizontal: true,
+          vertical: true,
+        }}
+        // 树形结构建议关闭简单的行高预估，或者设置一个合理的平均值
+        estimatedRowHeight={50} 
+        className={styles.table}
+      />
+      {
+        pagination?<Pagination {...pagination} className={styles.pagination} onChange={(current, pageSize)=>{
+          if(onTableChange){
+            onTableChange({...pagination,current,pageSize},null,null,{action:'paginate'})
+          }
+        }}/>:''
+      }
+      {
+        loading&&
+        <div className={styles.loading}>
+          <div className={styles.mask}/>
+          <Spin spinning/>
+        </div>
+      }
+    </div>
+  );
+};
+
+export default AntdCompatibleTable;

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

@@ -0,0 +1,105 @@
+// 1. 定义你的 Antd 风格变量（方便统一修改）
+@antd-table-header-bg: red;
+@antd-table-border-color: #f0f0f0;
+@antd-table-row-hover-bg: #E6F1FE;
+@antd-table-row-hover-bg: #F5F7FC;
+
+
+@antd-font-size: 14px;
+
+@table-bg:#fff;
+@table-bg-hover:#E6F1FE;
+@table-bg-light:#F5F7FC;
+@table-border-color:#DEE0E3;
+
+.loading{
+  position: absolute;
+  left:0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .mask{
+    position: absolute;
+    left:0;
+    top:0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: rgba(255,255,255,.5);
+  }
+}
+.pagination{
+  display: flex;
+  justify-content: end;
+  margin-top:6px;
+}
+.wrap {
+  width:100%;
+  height:100%;
+  display: flex;
+  flex-direction: column;
+  .table{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  // 这里的 .art-table 是库内置的类名
+  :global{
+    .resize-handle{
+      background-color: rgba(0,0,0,0);
+      height:50%;
+      width: 2px;
+      top:25%;
+      right:0px;
+    }
+    .art-table{
+      .art-table-header-cell:has(.resize-handle){
+        // border-right: 0;
+      }
+    }
+    .art-table {
+      // 注入变量
+      --cell-padding:5px;
+      --line-height: 1.5715;
+      --font-size: 14px;
+      --row-height: 32px;
+      --header-row-height: 36px;
+
+      --lock-shadow: rgba(0, 0, 0, 0.2) 0 0 10px 0px;
+      --cell-border:1px solid @table-border-color;
+      --header-cell-border:1px solid @table-border-color;
+
+      --border-color: @table-border-color;
+      --color: rgba(0, 0, 0, 0.85);
+      --bgcolor: @table-bg;
+      --hover-bgcolor: @table-bg-hover;
+      --highlight-bgcolor: #fafafa;
+      --header-color: rgba(0, 0, 0, 0.85);
+      --header-bgcolor: @table-bg-light;
+      --header-hover-bgcolor: @table-bg-hover;
+      --header-highlight-bgcolor: @table-bg;
+
+      // 如果你想针对 400 列做特殊的边框处理
+      .art-table-header-cell, .art-table-cell {
+        border-right: 1px solid var(--border-color);
+        &:last-child {
+          border-right: none;
+        }
+      }
+      .art-table-row:not(:hover).odd{
+        .art-table-cell{
+          background-color: @table-bg-light;
+        }
+      }
+      th{font-weight: 500;}
+      th,td{
+        padding:4px 8px;
+      }
+      
+    }
+  } 
+}

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

@@ -0,0 +1,128 @@
+import React from 'react';
+// @ts-ignore
+import {Tooltip} from "@/components/antd";
+
+// @ts-ignore
+import styles from './column.module.less';
+import {DebugTableItem} from '@/components/debug';
+import { useState } from 'react';
+import { useEffect } from 'react';
+// @ts-ignore
+import {EditOutlined} from '@/components/icon';
+
+export const Wrap=props=>{
+  const {className='',myStyle={},wrap} = props;
+  return (
+    <div className={`${styles.column} ${className}`} style={myStyle} data-wrap={wrap}>
+      {props.children}
+    </div>
+  )
+}
+
+/**
+ * 用于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 {string} [props.className] - 列样式
+ * @param {boolean} [props.wrap=false] - 是否允许自动换行
+ * @param {number} [props.maxLine=3] - 最大限制换行数
+ * @param {object} [props.item] - 源数据对象
+ * @param {string|JSX.Element} [props.children] - 显示的列内容
+ * @param {boolean} [props.withTips=false] - 是否强制鼠标聚焦后显示tooltips
+ * 
+ * 
+ * 
+ * @returns {JSX.Element}
+ */
+const Column=(props)=>{
+  const {wrap=false,maxLine=2,item,className='',withTips=false} = props;
+  let {minWidth,maxWidth,width} = props;
+
+  const [component,setComponent] = useState(<></>)
+  const myStyle = {
+  };
+  if(minWidth){
+    minWidth = Number.isInteger(minWidth)?`${minWidth}px`:minWidth;
+    myStyle.minWidth= minWidth;//`max(${minWidth},100%)`;
+  }
+  if(maxWidth){
+    myStyle.maxWidth= Number.isInteger(maxWidth)?`${maxWidth}px`:maxWidth;
+  }
+  if(width){myStyle.width= Number.isInteger(width)?`${width}px`:width;}
+
+  if(width || minWidth || maxWidth){
+    if(wrap && maxLine){
+      myStyle.display='-webkit-box';
+      myStyle.WebkitBoxOrient='vertical';
+      myStyle.WebkitLineClamp=''+maxLine;
+    }
+  }
+
+  const renderChild=()=>{
+    if(props.children===''||props.children===undefined||props.children===null){
+      setComponent(<Wrap className={className} myStyle={myStyle} wrap={wrap}>-</Wrap>);
+      return;
+    }
+    if( ['string','number'].includes(typeof props.children) ){
+      if(wrap){
+        setComponent(
+          <Wrap className={className} myStyle={myStyle} wrap={wrap}>
+            <Tooltip placement='top' title={props.children}>{props.children}</Tooltip>
+          </Wrap>
+        )
+        return;
+      }
+      setComponent(
+        <Wrap className={className} myStyle={myStyle} wrap={wrap}>
+          <Tooltip placement='top' title={props.children} className={styles.tips}>{props.children}</Tooltip>
+        </Wrap>
+      );
+      return;
+    }
+    if(props.withTips){
+      setComponent( <Wrap className={className} myStyle={myStyle} wrap={wrap}><Tooltip placement='top' title={props.children}>{props.children}</Tooltip></Wrap>);
+    }else{
+      setComponent(<Wrap className={className} myStyle={myStyle} wrap={wrap}>{props.children}</Wrap>);
+    }
+  }
+  useEffect(()=>{
+    renderChild();
+  },[wrap,maxLine,item,className,minWidth,maxWidth,width,props.children])
+  
+  return component;
+  return (
+    <DebugTableItem item={item}>
+      {/* @ts-ignore */}
+      <div className={`${styles.column} ${className}`} style={myStyle} data-wrap={wrap}>
+        {renderChild()}
+      </div>
+    </DebugTableItem>
+  )
+}
+
+
+
+export const EditTextColumn=props=>{
+  const {text='-',showEdit=true,onEdit,className=''} = props;
+
+  const onClick=(e)=>{
+    e.stopPropagation();
+    if(onEdit)onEdit();
+  }
+  return (
+     <div className={`${styles.editTextColumn} ${className}`}>
+      <div className={styles.name}>
+        <Tooltip title={text||'-'}>{text||'-'}</Tooltip>
+      </div>
+      <div className={styles.btnIcon}>
+        {
+          showEdit&&<span onClick={onClick}><EditOutlined /></span>
+        }
+      </div>
+    </div>
+  )
+}
+export default Column;

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

@@ -0,0 +1,50 @@
+
+
+.column{
+  flex-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-flex;
+  &[data-wrap='true']{
+    white-space: normal;
+    flex-wrap: wrap;
+  }
+  .tips{
+    max-width: 100%;
+    overflow: hidden; //把超出的内容进行隐藏
+    text-overflow: ellipsis;
+    white-space: nowrap; //设置内容不换行
+    display: inline-block;
+  }
+}
+
+
+
+
+
+.editTextColumn{
+  min-width: 80px;
+  // max-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .btnIcon{
+    margin-left:4px;
+    width:32px;
+    color:#0974F2;
+    font-size: 18px;
+    cursor: pointer;
+    & > span{font-size: inherit;}
+  }
+  .name{
+    max-width: 200px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+  }
+}