kn-cli 1.0.133 → 1.0.135

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

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

@@ -1,44 +0,0 @@
-.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_antd5/public/src/components/page/pageLoading/index.jsx

@@ -1,51 +0,0 @@
-// @ts-ignore
-import React from 'react';
-// @ts-ignore
-import ReactDOM from 'react-dom';
-
-import Popup from '@/components/popup';
-
-// @ts-ignore
-import imgLoading from '@/assets/images/loading.svg';
-
-// @ts-ignore
-import CSS from './index.module.less';
-
-/**
- * 页面Loading状态
- * @param {object} [props] 
- * @param {boolean} [props.visible=true] - 是否显示状态
- * 
- * @returns {JSX.Element}
- */
-const PageLoading = (props) => {
-  const {visible=true} = props;
-  if(!visible){
-    return <></>;
-  }
-  return (
-    <div className={CSS.wrap } >
-      <div className={CSS.box} data-show={visible}>
-        <img src={imgLoading} />
-      </div>
-    </div>
-  );
-};
-
-/**
- * 全屏置顶显示一个页面loading组件
- * @param {object} [props] 
- * @param {boolean} [props.canTouch=false] - 是否允许用户点击屏幕穿透到下面的组件
- * 
- * @returns {(string)=>void}
- */
-export const ShowPageLoading=(props={canTouch:false})=>{
-  let popup = Popup(()=>{},{cantouch:props.canTouch});
-  ReactDOM.render(
-    <PageLoading visible={true} />,
-    popup.dom
-  );
-  return popup.destory;
-}
-
-export default React.memo(PageLoading);

package/templates/template_admin_antd5/public/src/components/page/pageLoading/index.module.less

@@ -1,29 +0,0 @@
-.wrap {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 99;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.box {
-
-  width: 80px;
-  height: 80px;
-  background: rgba(0,0,0,.3);
-  border-radius: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  img{
-    display: block;
-    width:80%;
-  }
-  &[data-show=false]{
-    opacity: 0;
-  }
-}

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

@@ -1,250 +0,0 @@
-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

@@ -1,105 +0,0 @@
-// 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/toast/index.jsx

@@ -1,79 +0,0 @@
-// @ts-ignore
-import React,{useEffect} from 'react';
-// @ts-ignore
-import ReactDOM from 'react-dom';
-
-// @ts-ignore
-import Popup from '@/components/popup';
-
-// @ts-ignore
-import styles from './index.module.less';
-
-const toastList=[];
-const runNext=()=>{
-  let props = toastList[0];
-  if(props){
-    const {message,delay,resolve,position}=props;
-    let popup = Popup(resolve,{cantouch:true});
-    ReactDOM.render(
-      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
-      popup.dom
-    );
-  }
-}
-
-const Toast=props=>{
-  const {
-    message,
-    delay=1000*2,
-    destory,
-    position='top'
-  }=props;
-  useEffect(()=>{
-    setTimeout(()=>{
-      destory();
-      toastList.shift();
-      runNext();
-    },delay);
-  },[])
-  const ANITYPE={
-    'center':'animate__slideInDown',
-    'top':'animate__slideInDown',
-    'bottom':'animate__slideInUp'
-  }
-  return (
-    <section className={styles.wrap} data-position={position}>
-      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
-      </div>
-    </section>
-  )
-}
-
-/**
- * @typedef {object} ToastOptions
- * @property {string} message - 吐司文案内容
- * @property {number} [delay=2000] - 持续时间,毫秒
- * @property {string} [position] - 显示位置,center|top|bottom
- * @property {Function} [resolve] - 显示完毕的回调
- */
-
-/**
- * 显示一个吐司信息
- * @param {ToastOptions|string} [props] - 文案内容或一个配置参数
- * @returns { Promise }
- */
-const ShowToast=props=>{
-  if(typeof props === 'string'){
-    props = {message:props}
-  }
-  return new Promise((resolve) => {
-    // @ts-ignore
-    props.resolve = resolve;
-    toastList.push(props);
-    if(toastList.length===1){
-      runNext();
-    }
-  });
-}
-
-export default ShowToast;

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

@@ -1,43 +0,0 @@
-@import '~@/_variable.module.less';
-
-.wrap{
-  position: fixed;
-  left:0;
-  top:0;
-  width:100%;
-  height:100%;
-  pointer-events: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  z-index:var(--z-toast);
-  &[data-position=top]{
-    justify-content: flex-start;
-    padding-top:80px;
-  }
-  &[data-position=bottom]{
-    justify-content: flex-end;
-    padding-bottom:80px;
-  }
-  .content{
-    min-height:30px;
-    min-width:60px;
-
-    background: rgba(0,0,0,.8);
-    opacity:.8;
-    border-radius: var(--radius-default);
-    padding:var(--padding-default);
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 14px;
-    color: #FFFFFF;
-    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
-
-
-  }
-}