kn-cli 1.0.131 → 1.0.134

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

@@ -0,0 +1,42 @@
+@import '~@/_variable.module.less';
+
+@import '~@/_mixin.module.less';
+
+
+.nav{
+  max-width: var(--nav-width);
+  min-width: var(--nav-min-width);
+  height:100%;
+  background-color: white;
+  transition: all .2s;
+  z-index: var(--z-nav-mobile);
+  overflow-y: auto;
+  border-right: 1px solid #DEE0E3;
+  .scrollBar;
+  &[data-nav-hide='true']{
+    display: none;
+  }
+  &[data-nav-mode='mobile']{
+    position: fixed;
+    z-index: var(--z-nav-mobile);
+    box-shadow: 0 0 20px #444;
+  }
+
+}
+.iconUnread{
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.menuLabel{
+  display: flex;
+  column-gap: 6px;
+  align-items: center;
+  font-size: inherit;
+  font-weight: inherit;
+  color:inherit;
+}

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

@@ -0,0 +1,39 @@
+// @ts-ignore
+import React  from 'react';
+
+import { openLink } from '@/utils';
+
+// @ts-ignore
+import styles from './index.module.less';
+
+/**
+ * 超链接组件
+ * @param {object} [props] 
+ * @param {JSX.Element|string} [props.children] - 子组件
+ * @param {string} [props.className] - 扩展类样式名称
+ * @param {Function} [props.onClick] - 点击链接的回调
+ * @param {string} [props.href] - 跳转链接
+ * @param {string} [props.target] - 当target='_blank'时代表新窗口打开
+ * 
+ * @returns {JSX.Element}
+ */
+const Link=(props)=>{
+  const {children,className='',onClick,href='',target=''} = props;
+
+  const onLink=()=>{
+    if(href){
+      if(target=='_blank'){
+        openLink(href);
+        // window.open(href);
+      }else{
+        location.href=href;
+      }
+      return;
+    }
+    if(onClick)onClick();
+  }
+  return (
+    <span onClick={onLink} className={`${styles.linkWrap} ${className}`}>{children}</span>
+  )
+}
+export default React.memo(Link);

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

@@ -0,0 +1,11 @@
+@import '~@/_variable.module.less';
+
+
+.linkWrap{
+  color: var(--color-primary);
+  font-size: 14px;
+  &:hover{
+    color: var(--color-primary-hover);
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,33 @@
+
+import React,{  useState, useEffect } from 'react';
+// @ts-ignore
+import styles from './index.module.less';
+
+const MenuIcon=(props)=>{
+  
+  const [icon,setIcon]= useState('');
+  const [iconActive,setIconActive]= useState('');
+
+  const getIcon= async (iconName)=>{
+    const req = await new Promise(resolve=>{
+      let iconActive =import(`@/assets/images/nav/${iconName}-active.png`);
+      let icon = import(`@/assets/images/nav/${iconName}.png`);
+      Promise.all([icon,iconActive]).then(values=>{
+        setIcon(values[0].default);
+        setIconActive(values[1].default)
+      })
+    })
+  }
+  useEffect(()=>{
+    getIcon(props.name);
+  },[])
+
+  return (
+    <div className={styles.iconGroup}>
+      <img className={styles.icon} src={icon} />
+      <img className={styles.iconActive} src={iconActive} />
+    </div>
+  )
+
+}
+export default MenuIcon;

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

@@ -0,0 +1,49 @@
+
+
+
+.iconGroup{
+  width: 17px;
+  height: 100%;
+  margin-right: 12px;
+  display: inline-flex;
+  align-items: center;
+  margin-left:-12px;
+
+  img{width: 100%;}
+  .icon{
+    display: inline-block;
+  }
+  .iconActive{
+    display: none;
+  }
+}
+
+:global(.ant-menu-title-content){
+  font-size: 14px;
+}
+
+:global(.ant-menu-submenu-selected),
+:global(.ant-menu-item-selected),
+:global(.ant-menu-submenu-active),
+:global(.ant-menu-item-active){
+  .iconGroup .iconActive{
+    display: inline-block;
+  }
+  .iconGroup .icon{
+    display: none;
+  }
+  :global(.ant-menu-submenu-title .ant-menu-title-content),
+  :global(.ant-menu-item-selected .ant-menu-title-content){
+    font-weight: bold;
+    a{
+      font-weight: inherit;
+      color: #0974F2;
+    }
+  }
+  :global(.ant-menu-submenu-arrow) {
+    color: #0974F2
+  }
+}
+  :global(.ant-menu-inline.ant-menu-root .ant-menu-item > .ant-menu-title-content){
+    margin-left: -8px;
+  }

package/templates/template_admin_antd5/public/src/components/page/pageLoading/index.jsx

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

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

@@ -0,0 +1,60 @@
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
+import ReactDOM from 'react-dom';
+
+// @ts-ignore
+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);
+    }
+  },
+  add:function(fn){
+    popupList.list.push(fn);
+  }
+}
+
+/**
+ * 一个全屏置顶的遮罩层
+ * @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} }
+ */
+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 default Popup;

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

@@ -0,0 +1,18 @@
+
+
+: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;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+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()
+  return root;
+}
+
+export default { ReactRender };

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

@@ -0,0 +1,144 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import styles from './index.module.css';
+
+const ResizableContainer = (props) => {
+  const { children, title = '', width: propWidth, height: propHeight, onResize } = props;
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [containerSize, setContainerSize] = useState({ width: propWidth || 400, height: propHeight || 200 });
+  const [displaySize, setDisplaySize] = useState({ width: propWidth || 400, height: propHeight || 200 });
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const contentRef = useRef(null);
+  const wrapRef = useRef(null);
+  const refSize = useRef({ width: 0, height: 0 });
+  const inputRef = useRef(null);
+  const isManualResize = useRef(false);
+
+  // 同步外部传入的宽高
+  useEffect(() => {
+    if (propWidth) {
+      setContainerSize(prev => ({ ...prev, width: propWidth }));
+      setDisplaySize(prev => ({ ...prev, width: propWidth }));
+    }
+    if (propHeight) {
+      setContainerSize(prev => ({ ...prev, height: propHeight }));
+      setDisplaySize(prev => ({ ...prev, height: propHeight }));
+    }
+  }, [propWidth, propHeight]);
+
+  // 监听容器大小变化（用户手动拖拽 resize 手柄时）
+  useEffect(() => {
+    if (!wrapRef.current) return;
+
+    const observer = new ResizeObserver((entries) => {
+      // 如果是手动输入导致的尺寸变化，跳过
+      if (isManualResize.current) {
+        isManualResize.current = false;
+        return;
+      }
+
+      const entry = entries[0];
+      // 使用 borderBoxSize 获取包含边框的尺寸
+      const newWidth = entry.borderBoxSize?.[0]?.inlineSize || entry.contentRect.width;
+      const newHeight = entry.borderBoxSize?.[0]?.blockSize || entry.contentRect.height;
+
+      if (refSize?.current?.width !== newWidth || refSize?.current?.height !== newHeight) {
+        refSize.current.width = newWidth;
+        refSize.current.height = newHeight;
+        setDisplaySize({ width: newWidth, height: newHeight });
+        if (onResize) {
+          onResize({ width: newWidth, height: newHeight });
+        }
+      }
+    });
+
+    observer.observe(wrapRef.current);
+    return () => observer.disconnect();
+  }, [onResize]);
+
+  // 自动聚焦输入框
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // 双击显示输入框
+  const handleDoubleClick = useCallback(() => {
+    setEditValue(`${Math.round(displaySize.width)}x${Math.round(displaySize.height)}`);
+    setIsEditing(true);
+  }, [displaySize]);
+
+  // 处理输入变化
+  const handleInputChange = useCallback((e) => {
+    setEditValue(e.target.value);
+  }, []);
+
+  // 处理按键事件
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') {
+      // 解析输入值
+      const match = editValue.match(/^\s*(\d+)\s*[xX×]\s*(\d+)\s*$/);
+      if (match) {
+        const newWidth = parseInt(match[1], 10);
+        const newHeight = parseInt(match[2], 10);
+
+        if (newWidth >= 100 && newHeight >= 100) {
+          // 标记为手动调整，避免 ResizeObserver 回调覆盖
+          isManualResize.current = true;
+          setContainerSize({ width: newWidth, height: newHeight });
+          setDisplaySize({ width: newWidth, height: newHeight });
+          refSize.current.width = newWidth;
+          refSize.current.height = newHeight;
+          if (onResize) {
+            onResize({ width: newWidth, height: newHeight });
+          }
+        }
+      }
+      setIsEditing(false);
+    } else if (e.key === 'Escape') {
+      setIsEditing(false);
+    }
+  }, [editValue, onResize]);
+
+  // 失去焦点时取消编辑
+  const handleBlur = useCallback(() => {
+    setIsEditing(false);
+  }, []);
+
+  return (
+    <hgroup ref={wrapRef} className={styles.wrap} style={{ width: containerSize.width, height: containerSize.height }}>
+      <div className={styles.header}>
+        <p>{title}</p>
+        <div className={styles.sizeDisplay} onDoubleClick={handleDoubleClick} title="双击修改尺寸">
+          {isEditing ? (
+            <input
+              ref={inputRef}
+              className={styles.sizeInput}
+              value={editValue}
+              onChange={handleInputChange}
+              onKeyDown={handleKeyDown}
+              onBlur={handleBlur}
+              placeholder="宽x高"
+            />
+          ) : (
+            <span className={styles.sizeText}>{Math.round(displaySize.width)} x {Math.round(displaySize.height)}</span>
+          )}
+        </div>
+        <button
+          className={styles.refreshBtn}
+          onClick={() => setRefreshKey(k => k + 1)}
+          title="刷新"
+        >
+          ↻
+        </button>
+      </div>
+      <div key={refreshKey} ref={contentRef} className={styles.content}>
+        {children}
+      </div>
+    </hgroup>
+  );
+};
+
+export default ResizableContainer;

package/templates/template_admin_antd5/public/src/components/resizeBox/index.module.css

@@ -0,0 +1,90 @@
+
+.wrap{
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 300px;
+  padding: var(--padding-small);
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background-color: transparent;
+  overflow: hidden;
+  resize: both;
+  min-width: 100px;
+  min-height: 100px;
+  gap: var(--padding-small);
+}
+
+.header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+
+  &>p{
+    display: inline-block;
+    color:black;
+    background: #f0f0f0;
+    margin: 0;
+    padding: 2px 8px;
+    border-radius: 2px;
+  }
+}
+
+.sizeDisplay{
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 8px;
+  border-radius: 2px;
+  transition: background 0.2s;
+
+  &:hover{
+    background: #e6f7ff;
+  }
+}
+
+.sizeText{
+  font-size: 12px;
+  color: #666;
+  font-family: monospace;
+}
+
+.sizeInput{
+  width: 100px;
+  padding: 2px 6px;
+  border: 1px solid #1890ff;
+  border-radius: 2px;
+  font-size: 12px;
+  font-family: monospace;
+  text-align: center;
+  outline: none;
+
+  &:focus{
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}
+
+.refreshBtn{
+  cursor: pointer;
+  padding: 2px 6px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 1;
+
+  &:hover{
+    background: #f0f0f0;
+  }
+}
+
+.content{
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}