kn-cli 1.0.131 → 1.0.133

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

@@ -0,0 +1,146 @@
+import React from "react";
+// @ts-ignore
+import zhCN from 'antd/es/locale/zh_CN';
+
+import {
+  Form as AntdForm,
+  Input as AntdInput,
+  Button as AntdButton,
+  DatePicker as _DatePicker,
+  Alert,
+  Anchor,
+  Badge,
+  Card,
+  Checkbox,
+  Col,
+  ConfigProvider,
+  Drawer,
+  Dropdown,
+  Empty,
+  Image,
+  InputNumber,
+  Layout,
+  List,
+  Menu,
+  message,
+  Modal,
+  notification,
+  Pagination,
+  Popconfirm,
+  Popover,
+  Progress,
+  Radio,
+  Row,
+  Select as AntdSelect,
+  Space,
+  Spin,
+  Steps,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  TimePicker,
+  Tooltip as AntdTooltip,
+  TreeSelect,
+  Upload,
+  AutoComplete,
+  // @ts-ignore
+} from "antd";
+
+import Select from './select';
+export {Select};
+
+import Tooltip from './tooltip';
+import AsyncButton from '../button';
+
+export {AntdSelect}
+export { AsyncButton as Button };
+export {Alert}
+export {Anchor}
+export {Badge}
+export {Card}
+export {Checkbox}
+export {Col}
+export {ConfigProvider}
+
+/**@type {*} */
+const DatePicker = _DatePicker;
+export {DatePicker}
+export {Drawer}
+export {Dropdown}
+export {Empty}
+export {Image}
+export {InputNumber}
+export {Layout}
+export {List}
+export {Menu}
+export {message}
+export {Modal}
+export {notification}
+export {Pagination}
+export {Popconfirm}
+export {Popover}
+export {Progress}
+export {Radio}
+export {Row}
+export {Space}
+export {Spin}
+export {Steps}
+export {Switch}
+export {Table}
+export {Tabs}
+export {Tag}
+export {TimePicker}
+export {Tooltip}
+export {TreeSelect}
+export {Upload}
+export {AutoComplete}
+
+
+export {AntdTooltip}
+export {AntdButton}
+
+export {zhCN}
+
+
+
+const FormItem=(props,ref)=>{
+  const {validateFirst=true,children,...others} = props;
+  return <AntdForm.Item ref={ref||undefined} validateFirst={validateFirst} {...others}>{children}</AntdForm.Item>
+}
+
+/**
+ * @type {*}
+ */
+const Form={...AntdForm}
+// @ts-ignore
+Form.Item = FormItem;
+
+export {Form};
+
+
+
+const Input=(props)=>{
+  const {children,type,...others} = props;
+
+  if(type=='hidden'){
+    return <AntdInput type={type} {...others}>{children}</AntdInput>
+  }
+  return <AntdInput allowClear {...others}>{children}</AntdInput>
+}
+
+Input.Group=AntdInput.Group;
+Input.Search=AntdInput.Search;
+Input.TextArea=AntdInput.TextArea;
+Input.Password=AntdInput.Password;
+
+export {Input};
+
+const HiddenFormItem=(props)=>{
+  const {children,...others} = props;
+  return (
+    <AntdForm.Item {...others} noStyle><input type='hidden'/></AntdForm.Item>
+  )
+}
+
+export {HiddenFormItem}

package/templates/template_admin_antd5/public/src/components/antd/select/index.jsx

@@ -0,0 +1,296 @@
+import React, { useEffect, useState } from 'react';
+import {
+  AntdSelect,
+  // @ts-ignore
+} from "@/components/antd";
+
+import { isMobile as isMobileFn } from '@/utils';
+
+import styles from './index.module.less';
+import Link from '@/components/link';
+import { useMemo } from 'react';
+
+/**
+ * 带全选、重置、已选功能的包装
+ */
+const Select=props=>{
+  const {mode,options:_options,children,value:_value,maxCount=Infinity,showAll,allValue, showSearch = true, antd5=false,...otherProps} = props;
+  const [searchValue,setSearchValue] = useState('')
+  const [value,setValue] = useState([]);
+  const [options,setOptions] = useState([]);
+  const [showChecked,setShowChecked] = useState(false);
+  const [isMobile] = useState(isMobileFn())
+  const Component=useMemo(()=>(AntdSelect),[]);
+
+  const getOptions=()=>{
+    return options;
+  }
+
+  const getOptionsByValue=(values)=>{
+    const valueSet = new Set(values.map(v=>`${v}`));
+    return options.filter(item=>valueSet.has(`${item.value}`));
+  }
+
+  const getSearchFilterOptions=()=>{
+    if(searchValue){
+      const valueSet = new Set((value||[]).map(v=>`${v}`));
+      let matchItems= options.filter(item=>{
+        let match=false;
+        if(props.filterOption){
+          match = props.filterOption(searchValue,item);
+        }else{
+          let keywords =searchValue.toLocaleLowerCase();
+          const {label} = item;
+          if( `${label}`.toLocaleLowerCase().indexOf(keywords) >=0  ){
+            match=true;
+          }
+        }
+
+        if(match){
+          if( !valueSet.has(`${item.value}`) ){
+            match = false;
+          }
+        }
+        return match;
+      })
+      return matchItems;
+    }else{
+      return options;
+    }
+  }
+  const isAllValueItem=(item)=>{
+    return item?.value == allValue
+  }
+  const onSelectAll=()=>{
+    let _values,_options;
+    let newValue=[];
+    const valueSet = new Set((value||[]).map(v=>`${v}`));
+    if(searchValue){
+      let matchItems= options.filter(item=>{
+        let match=false;
+        if(props.filterOption){
+          match = props.filterOption(searchValue,item);
+        }else{
+          let keywords =searchValue.toLocaleLowerCase();
+          const {label} = item;
+          if( `${label}`.toLocaleLowerCase().indexOf(keywords) >=0  ){
+            match=true;
+          }
+        }
+        if(match){
+          if( valueSet.has(`${item.value}`) ){
+            match = false;
+          }
+        }
+        return match;
+      })
+
+      matchItems.forEach(item=>{
+        if(showAll){
+          if( isAllValueItem(item) ){
+            return;
+          }
+        }
+        newValue.push(item.value);
+      });
+      if(newValue&&newValue.length>0){
+        if(maxCount && maxCount != Infinity){
+          let count = maxCount - value?.length;
+          if(count<=0){
+            newValue=[];
+          }else{
+            if(newValue.length > count){
+              newValue.splice(0,count);
+            }
+          }
+        }
+      }
+    }else{
+      if(maxCount && maxCount != Infinity){
+        let count = maxCount - value?.length;
+        if(count>0){
+          newValue=[];
+          let opts = getOptions();
+          for(let j=0;j<opts.length;j++){
+            if(count <=0 )break;
+            if( !valueSet.has(`${opts[j].value}`) ){
+              if(showAll){
+                if( isAllValueItem(opts[j]) ){
+                  break;
+                }
+              }
+              newValue.push(opts[j].value);
+              count--;
+            }
+          }
+        }
+      }else{
+        _values=[];
+        getOptions().forEach(item=>{
+          if(showAll){
+            if( isAllValueItem(item) ){
+              return;
+            }
+          }
+          _values.push(item.value)
+        });
+      }
+    }
+    _values= _values || [...value,...newValue];
+    _options=getOptionsByValue(_values);
+    setValue(_values);
+    if(props.onChange){
+      props.onChange(_values,_options)
+    }
+  }
+
+  const onDeSelectAll=()=>{
+    let _values,_options;
+    if(searchValue){
+      const valueSet = new Set((value||[]).map(v=>`${v}`));
+      let matchItems= options.filter(item=>{
+        let match=false;
+        if(props.filterOption){
+          match = props.filterOption(searchValue,item);
+        }else{
+          let keywords =searchValue.toLocaleLowerCase();
+          const {label} = item;
+          if( `${label}`.toLocaleLowerCase().indexOf(keywords) >=0  ){
+            match=true;
+          }
+        }
+        if(match){
+          if( !valueSet.has(`${item.value}`) ){
+            match = false;
+          }
+        }
+        return match;
+      })
+
+      const removeSet = new Set(matchItems.map(item=>`${item.value}`));
+      if(removeSet.size>0){
+        _values = (value||[]).filter(id=>!removeSet.has(`${id}`));
+        _options=getOptionsByValue(_values);
+      }
+    }else{
+      _values=[];
+      _options=[];
+    }
+    setValue(_values);
+    if(props.onChange){
+      props.onChange(_values,_options)
+    }
+  }
+
+  const onShowChcked=()=>{
+    setShowChecked(v=>!v);
+  }
+
+  const tagRender = (props) => {
+    const { label, closable, onClose } = props;
+    return (
+      <span className="ant-select-selection-item">
+        {label}
+      </span>
+    );
+  }
+      
+  useEffect(()=>{
+    if(_options){
+      setOptions(_options);
+    }
+    if(children){
+      let temp =  children.map(item=>{
+        let req = {...item.props};
+        req.label=req.children;
+        return req;
+      });
+      setOptions(temp);
+    }
+  },[_options,children]);
+
+  useEffect(()=>{
+    if(_value != value){
+      setValue(_value||[]);
+    }
+  },[_value]);
+
+  
+  const checkedValueSet = showChecked ? new Set((value||[]).map(v=>`${v}`)) : null;
+  return (
+    <Component
+      mode={mode}
+      autoClearSearchValue={isMobile ? true :false}
+      showSearch={isMobile ? false : showSearch}
+      {...otherProps}
+      tagRender={tagRender}
+
+      onDropdownVisibleChange={(open)=>{
+        if(!open){
+          setSearchValue('');
+          setShowChecked(false);
+        }
+        if(props.onDropdownVisibleChange)props.onDropdownVisibleChange(open);
+      }}
+      onSearch={(value)=>{
+        setSearchValue(value);
+        if(props.onSearch)props.onSearch(value);
+      }}
+      searchValue={searchValue}
+      dropdownRender={(node)=>{
+        if(props.dropdownRender)return props.dropdownRender(node);
+        if(mode=='multiple' || mode=='tags'){
+          let _options = getOptions();
+          if(!_options||_options.length < 5)return node;
+
+          let opers=[];
+          let rightOpers=[];
+          if(showChecked){
+            rightOpers.push(
+              <Link key='noShowChecked' className={styles.rightOpers} type='dark' onClick={onShowChcked}>返回</Link>
+            )
+          }else{
+            if(maxCount==Infinity || maxCount == undefined){
+              opers.push(<Link key='all' onClick={onSelectAll}>全选</Link>)
+            }
+            if(searchValue && value && value?.length >0 ){
+              let filterMatchItems = getSearchFilterOptions();
+              if(filterMatchItems.length>0){
+                opers.push(<Link key='reset' type='dark' onClick={onDeSelectAll}>重置</Link>)
+              }
+            }
+            if(value&&value.length>0){
+              rightOpers.push(<Link key='showChecked' className={styles.rightOpers}  type='dark' onClick={onShowChcked}>已选</Link>)
+            }
+          }
+          return <>
+            {node}
+            {
+              opers?.length>0||rightOpers?.length>0?(
+                <div className={styles.opers}>
+                  <div className={styles.left}>{opers}</div>
+                  <div className={styles.right}>{rightOpers}</div>
+                </div>
+              ):<></>
+            }
+            
+          </>;
+        }else{
+          return node;
+        }
+      }}
+      options={showChecked?options.filter(item=>checkedValueSet.has(`${item.value}`)):options}
+      value={value}
+      onChange={(values,options)=>{
+        setValue(values);
+        if(props.onChange)props.onChange(values,options)
+      }}
+    />
+  )
+}
+Select.Option = AntdSelect.Option;
+Select.OptGroup = AntdSelect.OptGroup;
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = AntdSelect.SECRET_COMBOBOX_MODE_DO_NOT_USE;
+
+
+export default Select;

package/templates/template_admin_antd5/public/src/components/antd/select/index.module.less

@@ -0,0 +1,21 @@
+@import '~@/_variable.module.less';
+
+
+.opers{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12px;
+  padding:0px 8px;
+  width: 100%;
+  height:40px;
+  border-top: 1px solid #DEE0E3;
+  .right,
+  .left{
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
+  }
+
+}
+

package/templates/template_admin_antd5/public/src/components/antd/theme.js

@@ -0,0 +1,173 @@
+/**
+ * antd 5 Table 主题配置
+ * 基于项目的 antd 4 样式定制（_antd.less）
+ *
+ * 主要特点：
+ * - 主色：#0974F2（项目自定义蓝色）
+ * - 表头背景：#F5F8FF（浅蓝色）
+ * - 斑马纹：奇数行 #F5F7FC
+ * - 悬停色：#E6F1FE（浅蓝色）
+ * - 边框色：#DEE0E3
+ * - 紧凑内边距：垂直4px，水平8px
+ */
+
+export const antd5TableTheme = {
+  token: {
+    // ===== 主色系（来自 _antd.less: @primary-color:#0974F2） =====
+    colorPrimary: '#0974F2',              // 主色
+    colorPrimaryHover: '#3D92F5',         // 主色悬停
+    colorPrimaryActive: '#0861D1',        // 主色激活
+
+    // ===== 基础色彩 =====
+    colorSuccess: '#52c41a',              // 成功色
+    colorWarning: '#faad14',              // 警告色
+    colorError: '#ff4d4f',                // 错误色
+    colorInfo: '#0974F2',                 // 信息色（使用主色）
+    colorTextBase: '#000000',             // 基础文本色
+    colorBgBase: '#ffffff',               // 基础背景色
+    colorBorder: '#DEE0E3',               // 边框色（来自 @table-border-color）
+
+    // ===== 字体 =====
+    fontSize: 14,                         // 主字号
+    fontSizeSM: 12,                       // 小字号
+    fontSizeLG: 16,                       // 大字号
+    fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+    lineHeight: 1.5715,                   // 行高
+
+    // ===== 圆角（来自 _antd.less） =====
+    borderRadius: 4,                      // 按钮圆角（@btn-border-radius-base:4px）
+    borderRadiusLG: 8,                    // 大圆角（@modal-border-radius:8px）
+    borderRadiusSM: 2,                    // 小圆角
+
+    // ===== 尺寸 =====
+    controlHeight: 32,                    // 控件高度
+    controlHeightSM: 24,                  // 小尺寸控件高度
+    controlHeightLG: 40,                  // 大尺寸控件高度
+
+    // ===== 边框 =====
+    lineWidth: 1,
+    lineType: 'solid',
+  },
+
+  components: {
+    Table: {
+      // ===== 表头样式（来自 _antd.less: @table-header-bg:#F5F8FF） =====
+      headerBg: '#F5F8FF',                           // 表头背景色（浅蓝色）
+      headerColor: 'rgba(0, 0, 0, 0.85)',           // 表头文字颜色
+      headerSortActiveBg: '#E6F1FE',                // 排序激活背景色
+      headerSortHoverBg: '#EDF4FF',                 // 排序悬停背景色
+      headerBorderRadius: 0,                         // 表头圆角（antd 4 默认无圆角）
+      fixedHeaderSortActiveBg: '#E6F1FE',
+
+      // ===== 表体样式 =====
+      // 悬停背景色（来自 _antd.less: line 47-50）
+      rowHoverBg: '#E6F1FE',                        // 行悬停背景色（浅蓝色）
+
+      // 选中行背景色
+      rowSelectedBg: '#E6F1FE',                     // 行选中背景色
+      rowSelectedHoverBg: '#D6E8FD',                // 选中行悬停背景色
+
+      // 展开行背景色
+      rowExpandedBg: '#FAFBFC',                     // 展开行背景色
+
+      // ===== 边框和分割线（来自 _antd.less: @table-border-color:#DEE0E3） =====
+      borderColor: '#DEE0E3',                       // 边框颜色
+      headerSplitColor: '#DEE0E3',                  // 表头分割线颜色
+
+      // ===== 单元格内边距（来自 _antd.less: @table-padding-vertical:4px; @table-padding-horizontal:8px） =====
+      // small size（项目中使用 size="small"）
+      cellPaddingBlockSM: 4,                        // 垂直内边距 4px
+      cellPaddingInlineSM: 8,                       // 水平内边距 8px
+
+      // middle size
+      cellPaddingBlockMD: 8,                        // 垂直内边距
+      cellPaddingInlineMD: 12,                      // 水平内边距
+
+      // large size
+      cellPaddingBlock: 12,                         // 垂直内边距
+      cellPaddingInline: 16,                        // 水平内边距
+
+      // ===== 表头特殊样式（来自 _antd.less: line 34-40） =====
+      // small size 表头内边距
+      headerPaddingBlockSM: 5,                      // 表头垂直内边距 5px
+      headerPaddingInlineSM: 8,                     // 表头水平内边距 8px
+
+      // ===== 字体 =====
+      cellFontSize: 14,                             // 单元格字号
+      cellFontSizeMD: 14,
+      cellFontSizeSM: 14,
+      headerFontSize: 14,                           // 表头字号
+
+      // 表头字重（来自 _antd.less: line 38: font-weight: normal）
+      // 注意：antd 5 没有直接的 headerFontWeight 配置，需要通过 CSS 覆盖
+
+      // ===== 固定列阴影 =====
+      fixedHeaderSortActiveBg: '#E6F1FE',
+      bodySortBg: '#F5F8FF',
+
+      // ===== 筛选器 =====
+      filterDropdownBg: '#ffffff',
+      filterDropdownMenuBg: '#ffffff',
+
+      // ===== 其他 =====
+      expandIconBg: '#ffffff',
+      selectionColumnWidth: 32,                     // 选择列宽度
+      stickyScrollBarBg: 'rgba(0, 0, 0, 0.35)',    // 滚动条背景色
+      stickyScrollBarBorderRadius: 4,
+
+      // ===== 分页器间距（来自 _antd.less: line 41-43） =====
+      // 注意：这个需要通过额外的 CSS 处理，antd 5 没有直接配置项
+    },
+
+    // ===== 其他相关组件配置 =====
+    Pagination: {
+      // 分页器间距（来自 _antd.less: line 41-43: margin:6px 0 4px 0）
+      // 注意：需要通过 CSS 覆盖
+    },
+
+    Checkbox: {
+      // 复选框配置（来自 _antd.less: line 188-214）
+      borderRadiusSM: 4,                            // 圆角 4px
+      colorPrimary: '#2C93F5',                      // 选中色
+      colorPrimaryHover: '#3D92F5',
+    },
+  },
+
+  // ===== 算法 =====
+  algorithm: undefined, // 使用默认算法
+};
+
+/**
+ * 额外的 CSS 样式（无法通过 theme 配置的部分）
+ * 需要在组件中通过 className 或 style 标签注入
+ */
+export const antd5TableExtraStyles = `
+  /* 斑马纹样式（来自 _antd.less: line 51-59） */
+  .ant-table-tbody > tr:nth-child(odd):not(.ant-table-row-selected) {
+    background-color: #F5F7FC;
+  }
+
+  /* 固定列的斑马纹背景 */
+  .ant-table-tbody > tr:nth-child(odd):not(.ant-table-row-selected) .ant-table-cell-fix-left,
+  .ant-table-tbody > tr:nth-child(odd):not(.ant-table-row-selected) .ant-table-cell-fix-right {
+    background-color: #F5F7FC;
+  }
+
+  /* 表头字重为 normal（来自 _antd.less: line 38） */
+  .ant-table-small .ant-table-thead > tr > th {
+    font-weight: normal;
+  }
+
+  /* 分页器间距（来自 _antd.less: line 41-43） */
+  .ant-table-pagination.ant-pagination {
+    margin: 6px 0 4px 0;
+  }
+
+  /* 悬停样式优先级（来自 _antd.less: line 47-50） */
+  .ant-table-tbody > tr.ant-table-row:hover > td,
+  .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background-color: #E6F1FE !important;
+  }
+`;
+
+export default antd5TableTheme;

package/templates/template_admin_antd5/public/src/components/antd/tooltip/detail/index.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { ReactRender } from "@/components/react";
+
+import {  Modal } from "@/components/antd";
+// @ts-ignore
+import Popup from "@/components/popup";
+import { LayoutLanguage } from "@/components/layout/provider";
+import styles from './index.module.less';
+import { useEffect } from "react";
+
+/**
+ * 控制室 - 操作记录 - 事件内容详情
+ * @returns {JSX.Element}
+ */
+
+const Detail = (props) => {
+  const { destory,title,content } = props;
+  const onCancel = () => {
+    destory && destory(false);
+  };
+
+  const onOk = () => {
+    destory && destory(true);
+  };
+
+  let isJsx = React.isValidElement(content)
+
+  const onEsc=(e)=>{
+    if (e.key.toLocaleLowerCase() === 'escape' || e.key.toLocaleLowerCase() === 'esc') {
+      onCancel();
+    }
+  }
+
+  useEffect(()=>{
+    window.addEventListener('keyup',onEsc)
+    return ()=>{
+      window.removeEventListener('keyup',onEsc)
+    }
+  },[])
+  
+  return (
+    <Modal
+      maskClosable={true}
+      title={title||'详情'}
+      width={720}
+      open={true}
+      footer={false}
+      onCancel={onCancel}
+      onOk={onOk}
+    >
+      {
+        isJsx?<div className={styles.content}>{isJsx?content:''}</div>:<div className={styles.content} dangerouslySetInnerHTML={{__html:content}}></div>
+      }
+      
+    </Modal>
+  );
+};
+
+const ShowDetail = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(
+      <LayoutLanguage>
+        <Detail destory={popup.destory} {...props} />
+      </LayoutLanguage>,
+      popup.dom
+    );
+  });
+};
+export default ShowDetail;