kn-cli 1.0.133 → 1.0.135

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

@@ -4,8 +4,7 @@ import React, { useEffect, useState } from 'react';
 import {useNavigate,} from 'react-router-dom';
 
 // @ts-ignore
-import { Menu } from '@/components/antd';
-import Badge from '@/components/badge'
+import { Menu,Badge } from '@/components/antd';
 
 import {useLoading} from '@/hooks/index';
 import ProviderMenu from '@/provider/menu';

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

@@ -2,10 +2,10 @@
 
 
 .linkWrap{
-  color: var(--color-primary);
+  color: var(--theme-color-primary);
   font-size: 14px;
   &:hover{
-    color: var(--color-primary-hover);
+    color: var(--theme-color-primary-hover);
     cursor: pointer;
   }
 }

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

@@ -4,7 +4,7 @@
 .iconGroup{
   width: 17px;
   height: 100%;
-  margin-right: 12px;
+  margin-right: 8px;
   display: inline-flex;
   align-items: center;
   margin-left:-12px;
@@ -37,11 +37,11 @@
     font-weight: bold;
     a{
       font-weight: inherit;
-      color: #0974F2;
+      // color: #0974F2;
     }
   }
   :global(.ant-menu-submenu-arrow) {
-    color: #0974F2
+    // color: #0974F2
   }
 }
   :global(.ant-menu-inline.ant-menu-root .ant-menu-item > .ant-menu-title-content){

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

@@ -1,60 +1,101 @@
-// @ts-ignore
-import React from 'react';
-// @ts-ignore
-import ReactDOM from 'react-dom';
-
-// @ts-ignore
+import React, { useState } from 'react';
+import { ReactRender } from '@/components/react';
 import styles from './index.module.less';
-styles;
-
-export const popupList={
-  list:[],
-  remove:function(fn){
-    let list = popupList.list;
-    let idx = list.indexOf(fn);
-    if(idx>=0)list.splice(idx,1);
-  },
-  destroyAll:function(){
-    let list = popupList.list;
 
-    while(list.length>0){
-      let fn = list.shift();
-      fn(false);
+/**
+ * @typedef {Object} ShowPopupOptions
+ * @property {React.ReactNode} content - 居中显示的内容-该组件内接受close方法用于回调用户关闭窗口事件
+ * @property {boolean} [showMask=true] - 是否显示背景遮罩（rgba(0,0,0,.5)）
+ * @property {boolean} [canTouch=false] - 鼠标事件是否穿透浮层
+ * @property {boolean} [closeOnClick=false] - 点击浮层区域（非 content）是否关闭
+ */
+
+const Popup2 = ({ resolve, content, showMask, canTouch, closeOnClick }) => {
+  const [overlayEl, setOverlayEl] = useState(null);
+
+  const close = (result) => {
+    resolve(result);
+  };
+
+  const onOverlayClick = (e) => {
+    if (!closeOnClick) return;
+    if (e.target === e.currentTarget) {
+      close(false);
+    }
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      data-mask={showMask || undefined}
+      data-can-touch={canTouch || undefined}
+      onClick={onOverlayClick}
+    >
+      <div className={styles.content} ref={setOverlayEl}>
+        {overlayEl && React.cloneElement(content, { close, getContainer: () => overlayEl })}
+      </div>
+    </div>
+  );
+};
+
+export const popupList = {
+  _list: [],
+  add(close) {
+    this._list.push(close);
+  },
+  remove(close) {
+    const idx = this._list.indexOf(close);
+    if (idx >= 0) this._list.splice(idx, 1);
+  },
+  destroyAll() {
+    while (this._list.length > 0) {
+      this._list.shift()(false);
     }
   },
-  add:function(fn){
-    popupList.list.push(fn);
-  }
+};
+
+export const destoryAll=()=>{
+  popupList.destroyAll();
 }
 
 /**
- * 一个全屏置顶的遮罩层
- * @param {(result)=>void} reslove - 遮罩层的关闭回调
- * @param {Object} [options] - 参数
- * @param {boolean} [options.cantouch=false] - 是否允许被点击穿透
- * @param {boolean} [options.transparent=false] - 是否遮罩层完全透明
- * @param {string} [options.className=''] - 扩展样式
- * 
- * 
- * @returns { {dom:HTMLElement,destory:()=>void} }
+ * 显示一个全屏浮层
+ * @param {ShowPopupOptions} options
+ * @returns {Promise<boolean>} true 表示确认关闭，false 表示取消/点击遮罩关闭
  */
-const Popup = (reslove,options) => {
-  let rootDom = document.createElement('div');
-  rootDom.className='popup-box';
-  if(options&&options.className)rootDom.className += ` ${options.className}`
-  if(options&&options.cantouch)rootDom.setAttribute('data-can-touch','1');
-  if(options&&options.transparent)rootDom.setAttribute('data-transparent','1');
-
-  let destory = (result) => {
-    popupList.remove(destory);
-    ReactDOM.unmountComponentAtNode(rootDom);
-    rootDom.parentNode.removeChild(rootDom);
-    if (reslove) reslove(result);
-  };
-  popupList.add(destory);
-  document.body.appendChild(rootDom);
-  return { dom: rootDom, destory };
-};
+export const showPopup = (options = { content: <></> }) => {
+  const { content, showMask = true, canTouch = false, closeOnClick = true } = options;
+
+  return new Promise((resolve) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    let root;
 
+    const wrappedResolve = (result) => {
+      popupList.remove(wrappedResolve);
+      setTimeout(() => {
+        root && root.unmount();
+        if (container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      }, 0);
+      resolve(result);
+    };
+
+    popupList.add(wrappedResolve);
+
+    root = ReactRender(
+      <Popup2
+        resolve={wrappedResolve}
+        content={content}
+        showMask={showMask}
+        canTouch={canTouch}
+        closeOnClick={closeOnClick}
+      />,
+      container
+    );
+  });
+};
 
-export default Popup;
+export default showPopup;

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

@@ -1,18 +1,25 @@
+.overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  &[data-mask] {
+    background: rgba(0, 0, 0, 0.5);
+  }
 
-:global{
-  .popup-box{
-    position: absolute;
-    left:0;
-    top:0;
-    width:100%;
-    height:100%;
-    z-index: 99;
-    &[data-transparent]{
-      height:auto;
-    }
-    &[data-can-touch]{
-      pointer-events: none;
-    }
+  &[data-can-touch] {
+    pointer-events: none;
   }
-}
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+}

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

@@ -1,12 +1,26 @@
-import ReactDOM from 'react-dom/client'; // 注意这里增加了 /client
-
-export const ReactRender = (component, targetDom) => {
-  // 1. 创建 root
-  const root = ReactDOM.createRoot(targetDom);
-  // 2. 渲染组件
-  root.render(component);
-  
-  // 建议：返回这个 root，以便将来可以手动卸载 root.unmount()
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Antd5Provider from '@/components/antd/antProvider';
+
+/**
+ * 渲染 React 组件到指定 DOM
+ * @param {React.ReactElement} component - 要渲染的组件
+ * @param {HTMLElement} targetDom - 目标 DOM 节点
+ * @param {ReactDOM.Root} [existingRoot] - 可选的已存在的 root，如果提供则使用它
+ * @returns {ReactDOM.Root} React 18 的 root 对象
+ */
+export const ReactRender = (component, targetDom, existingRoot = null) => {
+  // 如果提供了 existingRoot，使用它；否则创建新的
+  const root = existingRoot || ReactDOM.createRoot(targetDom);
+
+  // 包裹 Antd5Provider，确保继承主题配置
+  root.render(
+    <Antd5Provider>
+      {component}
+    </Antd5Provider>
+  );
+
+  // 返回 root，以便将来可以手动卸载 root.unmount()
   return root;
 }
 

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

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import styles from './index.module.css';
+import styles from './index.module.less';
 
 const ResizableContainer = (props) => {
-  const { children, title = '', width: propWidth, height: propHeight, onResize } = props;
+  const { children, title = '', width: propWidth, height: propHeight, onResize,autoSize=false } = props;
   const [refreshKey, setRefreshKey] = useState(0);
-  const [containerSize, setContainerSize] = useState({ width: propWidth || 400, height: propHeight || 200 });
+  const [containerSize, setContainerSize] = useState({ width: propWidth || (autoSize?'auto':400), height: propHeight || (autoSize?'auto':200) });
   const [displaySize, setDisplaySize] = useState({ width: propWidth || 400, height: propHeight || 200 });
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState('');

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

@@ -3,27 +3,14 @@ import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } f
 // @ts-ignore
 import { Select } from "@/components/antd";
 import useSelectList from '../useSelectList';
+import {DEBUG_SELECT_ITEMS} from '@/config';
+import { hasValue } from '@/utils';
+import { isArray } from 'lodash';
 
-/**
- * @typedef SelectItemOption
- * @property {string} label - 显示的名称
- * @property {string} value - 唯一值
- * @property {object} [data] - 原始数据
- * 
- */
-
-/**
- * @typedef DefaultServicesSelectProps
- * @property {string} [name] - 调试用的名称
- * @property {object} services - api接口 符合输出的结果为{id:'',name:''}结构
- * @property {object} [servicesProps={}] - 接口传参
- * @property {(item:object)=>SelectItemOption} [formatOptionItem] - 用户格式化接口返回的数据成标准option数据
- * @property {(list:object[]|object)=>SelectItemOption[]} [formatOptionList] - 对整个response处理返回option
- */
 
 /**
  * 从字典生成下拉框
- * @param {import('../useSelectList').SelectListProps & DefaultServicesSelectProps} props 
+ * @param {SelectListProps & DefaultServicesSelectProps} props 
  * @returns {JSX.Element}
  */
 const DefaultServicesSelect=(props,ref)=>{
@@ -48,9 +35,18 @@ const DefaultServicesSelect=(props,ref)=>{
     formatOptionList,
     onDefaultSelect,
     onListUpdate,
+    onBlur,
     name,
-    required=false
+    required=false,
+    maxCount=Infinity,
+    debug=false,
+    onAfterListUpdate,
+    antd5=false
   } = props;
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef({});
 
   // 单选框默认带一键删除
   const allowClear = props.allowClear??((required==false)?true:false);
@@ -59,19 +55,38 @@ const DefaultServicesSelect=(props,ref)=>{
   const selectList = useSelectList(props);
   const [requestParams,setRequestParams] = useState(servicesProps)
   const refInitList=useRef([]);
+  const [loading,setLoading] = useState(false);
 
   // 初始化加载下拉框数据
   const init = async ()=>{
+    setLoading(true);
+    if(debug && name ){
+      console.log(`[${name}]-init1:`,services,servicesProps)
+    }
     const req = await services(servicesProps);
-    if(refDestory.current){return;}
+    if(debug && name ){
+      console.log(`[${name}]-init2:`,req)
+    }
+    if(refDestory.current){
+      if(debug && name ){
+        console.log(`[${name}]-init-destory1:`,refInitList.current.length)
+      }
+      return;
+    }
+    setLoading(false);
     let values=[];
     if(req?.code==0){
       let data=[];
       if(formatOptionList){
-        data = formatOptionList(req.data);
+        data = formatOptionList(req?.data||[]);
       }else{
-        data= req.data.map(item=>{
+        data= req?.data?.map(item=>{
           return formatOptionItem(item)
+        })||[]
+      }
+      if(DEBUG_SELECT_ITEMS){
+        data.forEach(item=>{
+          item.label = `${item.label}[${item.value}]`
         })
       }
       values=data;
@@ -80,18 +95,36 @@ const DefaultServicesSelect=(props,ref)=>{
       onListUpdate(values);
     }
     if(onDefaultSelect){
-      let defaultItem = onDefaultSelect(values);
-      if(defaultItem){
-        onValueChange(defaultItem.value,defaultItem,true)
+      if(hasValue(_value)==false){
+        let defaultItem = onDefaultSelect(values);
+        if(defaultItem){
+          onValueChange(defaultItem.value,defaultItem,true)
+        }
       }
     }
+    if(debug && name ){
+      console.log(`[${name}]-init3:`,values)
+    }
     const t= await selectList.init(values);
-    if(refDestory.current){return;}
+    if(debug && name ){
+      console.log(`[${name}]-init4:`,t)
+    }
+    if(refDestory.current){
+      if(debug && name ){
+        console.log(`[${name}]-init-destory2:`,refInitList.current.length)
+      }
+      return;
+
+    }
+    if(onAfterListUpdate){
+      onAfterListUpdate(values);
+    }
     refInitList.current.shift();
     if( refInitList.current.length >0 ){
       let fn = refInitList.current[0]
       fn();
     }
+
     return t;
   }
   const onFilter=(input,option)=>{
@@ -105,7 +138,29 @@ const DefaultServicesSelect=(props,ref)=>{
   const onValueChange= async (newValue,options,force=false)=>{
     if(!force && canChange){
       let req = await canChange(newValue,options);
-      if(!req)return;
+      if(!req){
+        if(refSelf.current.lastOption){
+          if(name){
+            // 强行将显示内容切换成上一次选择的内容
+            let dom = document.querySelector(`[data-select-name='${name}'] .ant5-select-selection-item`);
+            if(dom && refSelf?.current?.lastOption?.label){
+              console.log(`antd-select ${name}组件显示label切换为:`,refSelf.current.lastOption.label)
+              // @ts-ignore
+              dom.innerText = refSelf.current.lastOption.label;
+            }
+
+          }
+        }
+        return;
+      }
+    }
+    refSelf.current.lastOption=options;
+    if(mode == 'multiple' && maxCount && maxCount != Infinity){
+      if( newValue.length > maxCount ){
+        newValue.pop();
+        // message.warn(`最多选择${maxCount}个`);
+        return;
+      }
     }
     if(onChange)onChange(newValue,options);
   }
@@ -122,13 +177,23 @@ const DefaultServicesSelect=(props,ref)=>{
 
   useEffect(()=>{
     let keys = Object.keys(servicesProps)
-    if(keys.length<=0)return;
-    let changes = keys.some(key=>{
-      if(servicesProps[key] != requestParams[key]){
-        return true;
-      }
-      return false;
-    })
+    let oldKeys = Object.keys(requestParams);
+    if(keys.length<=0 && oldKeys.length<=0){
+      return;
+    }
+    let changes=false;
+    if( oldKeys.length != keys.length ){
+      changes=true;
+    }
+    if(!changes){
+      changes = keys.some(key=>{
+        if(servicesProps[key] != requestParams[key]){
+          return true;
+        }
+        return false;
+      })
+    }
+
     if(changes){
       setRequestParams(servicesProps)
     }
@@ -142,15 +207,53 @@ const DefaultServicesSelect=(props,ref)=>{
 
 
   useImperativeHandle(ref, () => ({
+    // 检查值是否合法
+    validateValue:(value)=>{
+      let _value=[];
+      if(mode=='single'){
+        _value = value==undefined?selectList.value:value;
+        _value = hasValue(_value)?[_value]:[];
+      }else{
+        _value = value==undefined?selectList.value:value;
+        if(isArray(_value)){
+          _value= [..._value]
+        }else{
+          _value=[];
+        }
+      }
+      let error=[];
+      _value.forEach(id=>{
+        let find=false;
+        for(let item of selectList.list){
+          if(item.value == id){
+            find=true;
+            if(item.isNoFind){
+              error.push(`${id}`);
+            }
+            break;
+          }
+        }
+        if(!find){
+          error.push(`${id}`);
+        }
+      });
+      return error;
+    },
     getSelectList:()=>{
       return selectList;
     },
+    refresh:()=>{
+      if(refInitList.current.length<=0){
+        refInitList.current.push(init)
+        init();
+      }else{
+        refInitList.current.push(init);
+      }
+    },
+    loading
   }));
 
-  let className=''
-  if(selectList.props.className){
-    className = selectList.props.className;
-  }
+  let className=props?.className||'';
   if(selectList.props.maxTagCount){
     if(Array.isArray(className)){
       className.push('antd-show-tag')
@@ -158,11 +261,15 @@ const DefaultServicesSelect=(props,ref)=>{
       className+= ' antd-show-tag';
     }
   }
+  if(name && debug ){
+    console.log(`[${name}]:`,loading,selectList.list)
+  }
   return (
     <Select
+      data-select-name={name||undefined}
       // getPopupContainer={trigger => trigger?.parentElement||document.body} 
-      loading={selectList.list===null}
-      disabled={selectList.list===null || disabled}
+      loading={loading||selectList.list===null}
+      disabled={loading||selectList.list===null || disabled}
       style={{..._style}}
       placeholder={placeholder}
       allowClear={allowClear}
@@ -172,9 +279,13 @@ const DefaultServicesSelect=(props,ref)=>{
       value={selectList.value}
       options={selectList.list}
       onChange={onValueChange}
-      filterOption={onFilter}
+      filterOption={props.onFilter??onFilter}
+      onBlur={onBlur}
+      showAll={props.showAll}
+      allValue={props.allValue}
       {...selectList.props}
       className={className}
+      maxCount={maxCount}
     />
   );
 }

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

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 // @ts-ignore
 import { Select } from "@/components/antd";
 import useSelectList from '../useSelectList';
@@ -11,7 +11,7 @@ import useSelectList from '../useSelectList';
 
 /**
  * 从字典生成下拉框
- * @param {import('../useSelectList').SelectListProps & DictSelectProps} props 
+ * @param {SelectListProps & DictSelectProps} props 
  * @returns {JSX.Element}
  */
 const DictSelect=(props)=>{
@@ -24,6 +24,7 @@ const DictSelect=(props)=>{
     disabled=false,
     emDict,
     required=false,
+    onDefaultSelect
   } = props;
 
   const allowClear = props.allowClear??((mode=='single'&&required==false)?true:false);
@@ -31,6 +32,7 @@ const DictSelect=(props)=>{
   const refDestory = useRef(false);
   const selectList = useSelectList(props);
 
+
   // 初始化加载下拉框数据
   const init = async ()=>{
     if(refDestory.current)return;
@@ -39,10 +41,19 @@ const DictSelect=(props)=>{
       return {
         label:item.label,
         value:`${item.id}`,
-        data:item
+        data:item,
+        disabled:item.disabled
       }
     })
     values=data;
+    
+    if(onDefaultSelect){
+      let defaultItem = onDefaultSelect(values);
+      if(defaultItem){
+        onValueChange(defaultItem.value,defaultItem)
+      }
+    }
+
     return await selectList.init(values);
   }
   const onFilter=(input,option)=>{
@@ -56,12 +67,15 @@ const DictSelect=(props)=>{
     if(onChange)onChange(newValue,options);
   }
 
+
   useEffect(()=>{
     init();
     return ()=>{refDestory.current=true}
   },[])
 
+
   
+
   return (
     <Select
       loading={selectList.list===null}
@@ -76,6 +90,8 @@ const DictSelect=(props)=>{
       options={selectList.list}
       onChange={onValueChange}
       filterOption={onFilter}
+      showAll={props.showAll}
+      allValue={props.allValue}
       {...selectList.props}
     />
   );