kn-cli 1.0.134 → 1.0.135

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Modal, App } from '@/components/antd';
+import Antd5Provider from '@/components/antd/antProvider';
+import {ReactRender} from '@/components/react';
+
+
+/**
+ * @typedef {Object} ShowModalConfig
+ * @property {React.ReactNode} content - Modal 内容（必填）
+ * @property {string} [title] - 标题
+ * @property {number} [width] - 宽度
+ * @property {Function} [onOk] - 确定回调，返回 Promise 可以控制关闭
+ * @property {Function} [onCancel] - 取消回调
+ * @property {boolean} [maskClosable] - 点击遮罩是否关闭
+ * @property {string} [okText] - 确定按钮文字
+ * @property {string} [cancelText] - 取消按钮文字
+ * @property {boolean} [hideOk] - 隐藏确定按钮
+ * @property {boolean} [hideCancel] - 隐藏取消按钮
+ * @property {Object} [modalProps] - 其他 antd Modal 属性
+ */
+
+/**
+ * 创建一个命令式调用的 Modal（推荐方式）
+ * 优点：
+ * - 自动继承主题配置
+ * - 代码更简洁
+ * - 符合 antd 5 最佳实践
+ * @param {ShowModalConfig} config - Modal 配置
+ * @returns {Promise<boolean>} 返回 Promise，resolve(true) 表示确定，resolve(false) 表示取消
+ * @example
+ * // 基础用法
+ * const result = await showModal({
+ *   title: '编辑用户',
+ *   content: <MyForm />,
+ *   width: 600,
+ * });
+ *
+ * // 带表单验证
+ * const result = await showModal({
+ *   title: '编辑用户',
+ *   content: <MyForm ref={formRef} />,
+ *   onOk: async () => {
+ *     await formRef.current.validateFields();
+ *     await saveData();
+ *   }
+ * });
+ */
+export const showModal = (config) => {
+  return new Promise((resolve) => {
+    let root;
+    // 清理函数
+    const cleanup = () => {
+      setTimeout(() => {
+        root.unmount();
+        if (container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      }, 300); // 等待动画结束
+    };
+
+    // 渲染 Modal
+    const ModalWrapper = () => {
+      const [open, setOpen] = React.useState(true);
+      const [confirmLoading, setConfirmLoading] = React.useState(false);
+      // 自动创建 ref，注入给 content，content 可通过 useImperativeHandle 暴露 onOk
+      const contentRef = React.useRef(null);
+
+      const handleOk = async () => {
+        try {
+          setConfirmLoading(true);
+          if (config.onOk) {
+            await config.onOk();
+          } else if (contentRef.current?.onOk) {
+            await contentRef.current.onOk();
+          }
+          setConfirmLoading(false);
+          setOpen(false);
+          cleanup();
+          resolve(true);
+        } catch (error) {
+          setConfirmLoading(false);
+          // 如果 onOk 抛出错误，不关闭 Modal
+          console.error('Modal onOk error:', error);
+        }
+      };
+
+      const handleCancel = () => {
+        if (config.onCancel) {
+          config.onCancel();
+        }
+        setOpen(false);
+        cleanup();
+        resolve(false);
+      };
+
+      const content = React.isValidElement(config.content)
+        ? React.cloneElement(config.content, { ref: contentRef })
+        : config.content;
+
+      return (
+        <Antd5Provider>
+          <Modal
+            title={config.title}
+            open={open}
+            onOk={handleOk}
+            onCancel={handleCancel}
+            width={config.width || 520}
+            maskClosable={config.maskClosable !== undefined ? config.maskClosable : false}
+            confirmLoading={confirmLoading}
+            okText={config.okText}
+            cancelText={config.cancelText}
+            okButtonProps={config.hideOk ? { style: { display: 'none' } } : undefined}
+            cancelButtonProps={config.hideCancel ? { style: { display: 'none' } } : undefined}
+            {...config.modalProps}
+          >
+            {content}
+          </Modal>
+        </Antd5Provider>
+      );
+    };
+
+    // 创建容器
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    root = ReactRender(<ModalWrapper />,container)
+  });
+};
+
+/**
+ * 使用 App.useApp() 的 Modal（在组件内使用）
+ * 优点：
+ * - 自动继承主题
+ * - 更轻量
+ * - 不需要手动管理 DOM
+ * @example
+ * function MyComponent() {
+ *   const { showModalInApp } = useModalHelper();
+ *
+ *   const handleEdit = async () => {
+ *     const result = await showModalInApp({
+ *       title: '编辑',
+ *       content: <MyForm />
+ *     });
+ *   };
+ * }
+ */
+export const useModalHelper = () => {
+  const { modal } = App.useApp();
+
+  const showModalInApp = (config) => {
+    return new Promise((resolve) => {
+      const modalInstance = modal.confirm({
+        title: config.title,
+        content: config.content,
+        width: config.width || 520,
+        icon: null,
+        okText: config.okText || '确定',
+        cancelText: config.cancelText || '取消',
+        maskClosable: config.maskClosable !== undefined ? config.maskClosable : false,
+        onOk: async () => {
+          try {
+            if (config.onOk) {
+              await config.onOk();
+            }
+            resolve(true);
+          } catch (error) {
+            console.error('Modal onOk error:', error);
+            return Promise.reject(error); // 阻止关闭
+          }
+        },
+        onCancel: () => {
+          if (config.onCancel) {
+            config.onCancel();
+          }
+          resolve(false);
+        },
+        ...config.modalProps,
+      });
+    });
+  };
+
+  return { showModalInApp, modal };
+};
+
+export default showModal;

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

@@ -189,7 +189,7 @@ const Select=props=>{
   const tagRender = (props) => {
     const { label, closable, onClose } = props;
     return (
-      <span className="ant-select-selection-item">
+      <span className="ant5-select-selection-item">
         {label}
       </span>
     );

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { AntdSpin } from '../';
+import { ReactRender } from '@/components/react';
+import styles from './index.module.less';
+
+/**
+ * @typedef {Object} SpinExtraProps
+ * @property {boolean} [showMask=true] - 是否在目标范围内显示遮罩（rgba(0,0,0,.5)）
+ * @property {boolean} [canTouch=false] - 是否允许点击穿透到下层 UI（默认关闭，即阻断点击）
+ */
+
+/**
+ * 扩展的 Spin 组件，支持遮罩和点击穿透控制
+ *
+ * 无 children 时等同于原始 antd Spin。
+ * 有 children 时在容器内叠加遮罩 + Spin 指示器。
+ *
+ * @param {import('antd').SpinProps & SpinExtraProps & { children?: React.ReactNode }} props
+ */
+const Spin = ({ children, showMask = true, canTouch = false, spinning = true, tip, ...rest }) => {
+  if (!children) {
+    return <AntdSpin spinning={spinning} tip={tip} {...rest} />;
+  }
+  return (
+    <div className={styles.container}>
+      {children}
+      {spinning && (
+        <div
+          className={styles.overlay}
+          data-mask={showMask || undefined}
+          data-can-touch={canTouch || undefined}
+        >
+          <div className={styles.spinWrap}>
+            <AntdSpin spinning {...rest} />
+            {tip && <div className={styles.tip}>{tip}</div>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const FullSpin=({showMask=true,canTouch=false,tip})=>{
+  return (
+    <div
+      className={styles.fullOverlay}
+      data-mask={showMask || undefined}
+      data-can-touch={canTouch || undefined}
+    >
+      <div className={styles.spinWrap}>
+        <AntdSpin spinning />
+        {tip && <div className={styles.tip}>{tip}</div>}
+      </div>
+    </div>
+  )
+}
+/**
+ * @typedef {Object} ShowLoadingOptions
+ * @property {boolean} [showMask=true] - 是否显示半透明遮罩
+ * @property {boolean} [canTouch=false] - 是否允许点击穿透
+ * @property {string} [tip] - 加载提示文字
+ */
+
+/**
+ * 激活覆盖整个页面的全屏 Loading
+ * @param {ShowLoadingOptions} [options]
+ * @returns {() => void} stop - 调用后关闭 Loading
+ * @example
+ * const stop = showLoading({ showMask: true });
+ * // ... 异步操作完成后
+ * stop();
+ */
+export const showLoading = (options = {}) => {
+  const { showMask = true, canTouch = false, tip } = options;
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  const root = ReactRender(
+    <FullSpin showMask={showMask} canTouch={canTouch} tip={tip}/>,
+    container
+  );
+
+  return () => {
+    root.unmount();
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  };
+};
+
+export default Spin;

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

@@ -0,0 +1,58 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+
+  &[data-mask] {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-can-touch] {
+    pointer-events: none;
+
+    // 穿透时 spin 指示器本身仍可见但不阻断事件
+    :global(.ant-spin) {
+      pointer-events: none;
+    }
+  }
+}
+
+.spinWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.tip {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+}
+
+.fullOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+
+  &[data-mask] {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &[data-can-touch] {
+    pointer-events: none;
+  }
+}

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

@@ -12,11 +12,16 @@
  */
 
 export const antd5TableTheme = {
+  cssVar:true,// 审查元素时使用CSS变量
   token: {
     // ===== 主色系（来自 _antd.less: @primary-color:#0974F2） =====
-    colorPrimary: '#0974F2',              // 主色
-    colorPrimaryHover: '#3D92F5',         // 主色悬停
-    colorPrimaryActive: '#0861D1',        // 主色激活
+    colorPrimary: '#5B50FA',              // 主色
+    colorPrimaryHover: '#887aff',         // 主色悬停
+    colorPrimaryBg:'#E7E7FA',             // 主色浅色背景色
+    colorPrimaryActive: '#3e39d4',        // 主色激活
+
+    // ===== 链接色 =====
+    colorLink:'#5B50FA',
 
     // ===== 基础色彩 =====
     colorSuccess: '#52c41a',              // 成功色
@@ -36,7 +41,7 @@ export const antd5TableTheme = {
 
     // ===== 圆角（来自 _antd.less） =====
     borderRadius: 4,                      // 按钮圆角（@btn-border-radius-base:4px）
-    borderRadiusLG: 8,                    // 大圆角（@modal-border-radius:8px）
+    borderRadiusLG: 4,                    // 大圆角（@modal-border-radius:8px）
     borderRadiusSM: 2,                    // 小圆角
 
     // ===== 尺寸 =====
@@ -52,7 +57,7 @@ export const antd5TableTheme = {
   components: {
     Table: {
       // ===== 表头样式（来自 _antd.less: @table-header-bg:#F5F8FF） =====
-      headerBg: '#F5F8FF',                           // 表头背景色（浅蓝色）
+      headerBg: '#F2F3F5',                           // 表头背景色（浅蓝色）
       headerColor: 'rgba(0, 0, 0, 0.85)',           // 表头文字颜色
       headerSortActiveBg: '#E6F1FE',                // 排序激活背景色
       headerSortHoverBg: '#EDF4FF',                 // 排序悬停背景色
@@ -127,9 +132,15 @@ export const antd5TableTheme = {
 
     Checkbox: {
       // 复选框配置（来自 _antd.less: line 188-214）
-      borderRadiusSM: 4,                            // 圆角 4px
-      colorPrimary: '#2C93F5',                      // 选中色
-      colorPrimaryHover: '#3D92F5',
+      borderRadiusSM: 2,                            // 圆角 4px
+      colorPrimary: '#5B50FA',                      // 选中色
+      colorPrimaryHover: '#887aff',
+    },
+
+    Menu: {
+      // 菜单组件配置（根据 UI 图优化）
+      itemBorderRadius: 4,                          // 选中项圆角
+      itemMarginInline: 16,                      // 内边距
     },
   },
 

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

@@ -1,70 +1,33 @@
 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 { showModal } from "@/components/antd";
 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 DetailContent = ({ content }) => {
+  const isJsx = React.isValidElement(content);
+  return isJsx
+    ? <div className={styles.content}>{content}</div>
+    : <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />;
 };
 
 const ShowDetail = (props = {}) => {
-  return new Promise((resolve) => {
-    let popup = Popup(resolve);
-    ReactRender(
-      <LayoutLanguage>
-        <Detail destory={popup.destory} {...props} />
-      </LayoutLanguage>,
-      popup.dom
-    );
+  const { title, content } = props;
+  return showModal({
+    title: title || '详情',
+    width: 720,
+    maskClosable: true,
+    content: (
+      <DetailContent content={content} />
+    ),
+    modalProps: {
+      footer: false,
+      keyboard: true,
+    },
   });
 };
+
 export default ShowDetail;

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

@@ -1,7 +1,7 @@
 // @ts-ignore
 import React from 'react';
 // @ts-ignore
-import ReactJson from 'react18-json-view'
+// import ReactJson from 'react18-json-view'
 // import 'react18-json-view/src/style.css'
 // @ts-ignore
 import {Tooltip} from '@/components/antd';
@@ -22,7 +22,12 @@ export const DebugTableItem=(props)=>{
     return props.children
   }
   const {children,item={}} = props;
-  return <Tooltip trigger='click' overlayClassName={styles.jsonView} color='white' title={<div className={styles.jsonView}><ReactJson src={item} /></div>}>
+  return <Tooltip trigger='click' overlayClassName={styles.jsonView} color='white' 
+    // title={
+    //   <div className={styles.jsonView}>
+    //     <ReactJson src={item} />
+    //   </div>}
+    >
     {children}
   </Tooltip>
 }

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useEffect } from 'react';
-import ReactDOM from 'react-dom';
 
 const ErrorBoundary = props => {
   const {children}= props;
@@ -13,10 +12,6 @@ const ErrorBoundary = props => {
     if (error.name.toLowerCase() =='ChunkLoadError'.toLowerCase() ) {
       setHasError(true);
       onReload()
-      // ReactDOM.render(<h1>站点已更新，即将重新加载...</h1>, document.getElementById('main-view'));
-      // setTimeout(()=>{
-      //   onReload()
-      // },2000)
     } 
   };
 

package/templates/template_admin_antd5/public/src/components/icon/expand/index.jsx

@@ -0,0 +1,17 @@
+
+import React from 'react';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+
+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 default ExpandIcon;

package/templates/template_admin_antd5/public/src/components/icon/expand/index.module.less

@@ -0,0 +1,22 @@
+
+
+.expanded{
+  display: inline-block;
+  background-image: url('~@/assets/images/expand.png');
+  background-size:100% 100%;
+  width: 20px;
+  height: 20px;
+  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');
+    }
+  }
+}

package/templates/template_admin_antd5/public/src/components/icon/fullSize/index.jsx

@@ -0,0 +1,13 @@
+
+import React from 'react';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+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>;
+}
+
+
+export default FullSizeIcon;

package/templates/template_admin_antd5/public/src/components/icon/fullSize/index.module.less

@@ -0,0 +1,28 @@
+
+
+.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');
+    }
+  }
+  
+
+}
+

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

@@ -1,5 +1,12 @@
 
 import PlayVideo from "@/components/icon/playVideo";
+export {PlayVideo};
+
+import ExpandIcon from "@/components/icon/expand";
+export {ExpandIcon};
+
+import FullSizeIcon from "@/components/icon/fullSize";
+export {FullSizeIcon};
 
 import {
   InfoCircleFilled,
@@ -124,5 +131,4 @@ export {
  * @property {string} [className]
  */
 
-export {PlayVideo};
 

package/templates/template_admin_antd5/public/src/components/image/preview.jsx

@@ -1,17 +1,16 @@
 import React, { useState } from 'react';
 import { Image,Button,Space } from '@/components/antd';
 import { CloseOutlined } from '@ant-design/icons';
-import Popup from '@/components/popup';
+import showPopup from '@/components/popup';
 // @ts-ignore
 import styles from './index.module.less';
-import { ReactRender } from '@/components/react';
 
 const ModalPreview = (props) => {
-  const { destory,data=[] } = props;
+  const { close, data=[] } = props;
   const [current,setCurrent] = useState(0);
 
   const onCancel = () => {
-    destory && destory();
+    close && close();
   };
   const prePage = (e)=>{
     e.stopPropagation();
@@ -74,12 +73,10 @@ const ModalPreview = (props) => {
 };
 
 const ShowPreview = (props = {}) => {
-  return new Promise((resolve) => {
-    let popup = Popup(resolve);
-    ReactRender(
-      <ModalPreview destory={popup.destory} {...props} />,
-      popup.dom
-    );
+  return showPopup({
+    content: <ModalPreview {...props} />,
+    showMask: false,
+    closeOnClick: false,
   });
 };
 export default ShowPreview;

package/templates/template_admin_antd5/public/src/components/layout/basic/index.module.less

@@ -25,7 +25,7 @@
   height: var(--topMenu-height);
   overflow: hidden;
   display: flex;
-  background: #1B243D;
+  background: #00054D;
 }
 .frameBottom{
   width: 100%;