kn-cli 1.0.134 → 1.0.136

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

@@ -0,0 +1,264 @@
+import React from 'react';
+import {  Drawer, Button, Space } from '@/components/antd';
+import Antd5Provider from '@/components/antd/antProvider';
+import {ReactRender} from '@/components/react';
+
+/**
+ * @typedef {Object} ShowDrawerConfig
+ * @property {React.ReactNode} content - Drawer 内容（必填）
+ * @property {string} [title] - 标题
+ * @property {number} [width] - 宽度（默认 480）
+ * @property {string} [placement] - 弹出方向：'left' | 'right' | 'top' | 'bottom'（默认 'right'）
+ * @property {Function} [onOk] - 确定回调，返回 Promise 可以控制关闭
+ * @property {Function} [onCancel] - 取消回调
+ * @property {boolean} [maskClosable] - 点击遮罩是否关闭（默认 true）
+ * @property {boolean} [closable] - 是否显示关闭按钮（默认 true）
+ * @property {string} [okText] - 确定按钮文字
+ * @property {string} [cancelText] - 取消按钮文字
+ * @property {boolean} [footer] - 底部区域，设为 false 隐藏底部
+ * @property {Object} [drawerProps] - 其他 antd Drawer 属性
+ */
+
+/**
+ * 创建一个命令式调用的 Drawer（推荐方式）
+ * 优点：
+ * - 自动继承主题配置
+ * - 代码更简洁
+ * - 符合 antd 5 最佳实践
+ * @param {ShowDrawerConfig} config - Drawer 配置
+ * @returns {Promise<boolean>} 返回 Promise，resolve(true) 表示确定，resolve(false) 表示取消
+ * @example
+ * // 基础用法
+ * const result = await showDrawer({
+ *   title: '编辑用户',
+ *   content: <MyForm />,
+ *   width: 600,
+ * });
+ *
+ * // 带表单验证
+ * const result = await showDrawer({
+ *   title: '编辑用户',
+ *   content: <MyForm ref={formRef} />,
+ *   onOk: async () => {
+ *     await formRef.current.validateFields();
+ *     await saveData();
+ *   }
+ * });
+ */
+export const showDrawer = (config) => {
+  return new Promise((resolve) => {
+    let root;
+    // 清理函数
+    const cleanup = () => {
+      setTimeout(() => {
+        root.unmount();
+        if (container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      }, 300); // 等待动画结束
+    };
+
+    // 渲染 Drawer
+    const DrawerWrapper = () => {
+      const [open, setOpen] = React.useState(true);
+      const [confirmLoading, setConfirmLoading] = React.useState(false);
+
+      const handleOk = async () => {
+        try {
+          if (config.onOk) {
+            setConfirmLoading(true);
+            await config.onOk();
+            setConfirmLoading(false);
+          }
+          setOpen(false);
+          cleanup();
+          resolve(true);
+        } catch (error) {
+          setConfirmLoading(false);
+          // 如果 onOk 抛出错误，不关闭 Drawer
+          console.error('Drawer onOk error:', error);
+        }
+      };
+
+      const handleCancel = () => {
+        if (config.onCancel) {
+          config.onCancel();
+        }
+        setOpen(false);
+        cleanup();
+        resolve(false);
+      };
+
+      const handleClose = () => {
+        handleCancel();
+      };
+
+      const renderFooter = () => {
+        // 如果明确设置 footer 为 false，则不显示底部
+        if (config.footer === false) {
+          return null;
+        }
+
+        return (
+          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button onClick={handleCancel}>
+              {config.cancelText || '取消'}
+            </Button>
+            <Button type="primary" loading={confirmLoading} onClick={handleOk}>
+              {config.okText || '确定'}
+            </Button>
+          </Space>
+        );
+      };
+
+      return (
+        <Antd5Provider>
+          <Drawer
+            title={config.title}
+            open={open}
+            onClose={handleClose}
+            width={config.width || 480}
+            placement={config.placement || 'right'}
+            maskClosable={config.maskClosable !== undefined ? config.maskClosable : true}
+            closable={config.closable !== undefined ? config.closable : true}
+            footer={renderFooter()}
+            bodyStyle={{ paddingBottom: '16px' }}
+            {...config.drawerProps}
+          >
+            {config.content}
+          </Drawer>
+        </Antd5Provider>
+      );
+    };
+    // 创建容器
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    root = ReactRender(<DrawerWrapper />,container)
+  });
+};
+
+/**
+ * 使用 App.useApp() 的 Drawer（在组件内使用）
+ * 优点：
+ * - 自动继承主题
+ * - 更轻量
+ * - 不需要手动管理 DOM
+ * 
+ * 注意：此 Hook 返回一个配置对象，需要在组件中配合 useState 使用
+ * @example
+ * function MyComponent() {
+ *   const { DrawerComponent, openDrawer } = useDrawerHelper();
+ *   const [form] = Form.useForm();
+ *
+ *   const handleEdit = async () => {
+ *     openDrawer({
+ *       title: '编辑',
+ *       content: <MyForm />,
+ *       onOk: async () => {
+ *         const values = await form.validateFields();
+ *         await saveData(values);
+ *       }
+ *     });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleEdit}>编辑</button>
+ *       <DrawerComponent />
+ *     </>
+ *   );
+ * }
+ */
+export const useDrawerHelper = () => {
+  const [drawerConfig, setDrawerConfig] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const pendingPromise = React.useRef(null);
+
+  const handleOk = async () => {
+    if (!drawerConfig) return;
+    try {
+      if (drawerConfig.onOk) {
+        setConfirmLoading(true);
+        await drawerConfig.onOk();
+        setConfirmLoading(false);
+      }
+      setOpen(false);
+      setDrawerConfig(null);
+      if (pendingPromise.current) {
+        pendingPromise.current.resolve(true);
+        pendingPromise.current = null;
+      }
+    } catch (error) {
+      setConfirmLoading(false);
+      console.error('Drawer onOk error:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    if (drawerConfig?.onCancel) {
+      drawerConfig.onCancel();
+    }
+    setOpen(false);
+    setDrawerConfig(null);
+    if (pendingPromise.current) {
+      pendingPromise.current.resolve(false);
+      pendingPromise.current = null;
+    }
+  };
+
+  const handleClose = () => {
+    handleCancel();
+  };
+
+  const renderFooter = () => {
+    if (!drawerConfig) return null;
+    if (drawerConfig.footer === false) {
+      return null;
+    }
+
+    return (
+      <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button onClick={handleCancel}>
+          {drawerConfig?.cancelText || '取消'}
+        </Button>
+        <Button type="primary" loading={confirmLoading} onClick={handleOk}>
+          {drawerConfig?.okText || '确定'}
+        </Button>
+      </Space>
+    );
+  };
+
+  const openDrawer = (config) => {
+    return new Promise((resolve) => {
+      pendingPromise.current = { resolve };
+      setDrawerConfig(config);
+      setOpen(true);
+    });
+  };
+
+  const DrawerComponent = () => {
+    if (!drawerConfig) return null;
+
+    return (
+      <Drawer
+        title={drawerConfig.title}
+        open={open}
+        onClose={handleClose}
+        width={drawerConfig.width || 480}
+        placement={drawerConfig.placement || 'right'}
+        maskClosable={drawerConfig.maskClosable !== undefined ? drawerConfig.maskClosable : true}
+        closable={drawerConfig.closable !== undefined ? drawerConfig.closable : true}
+        footer={renderFooter()}
+        bodyStyle={{ paddingBottom: '16px' }}
+        {...drawerConfig.drawerProps}
+      >
+        {drawerConfig.content}
+      </Drawer>
+    );
+  };
+
+  return { openDrawer, DrawerComponent };
+};
+
+export default showDrawer;

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

@@ -14,6 +14,7 @@ import {
   Checkbox,
   Col,
   ConfigProvider,
+  App,
   Drawer,
   Dropdown,
   Empty,
@@ -33,7 +34,7 @@ import {
   Row,
   Select as AntdSelect,
   Space,
-  Spin,
+  Spin as AntdSpin,
   Steps,
   Switch,
   Table,
@@ -50,8 +51,22 @@ import {
 import Select from './select';
 export {Select};
 
+import showModal,{useModalHelper} from './modal';
+export {showModal,useModalHelper};
+export {Modal}
+
+
+import showDrawer,{useDrawerHelper} from './drawer';
+export {showDrawer,useDrawerHelper};
+export {Drawer}
+
+import Spin, { showLoading } from './spin';
+export { Spin, showLoading };
+export {AntdSpin}
+
+
 import Tooltip from './tooltip';
-import AsyncButton from '../button';
+import AsyncButton from './button';
 
 export {AntdSelect}
 export { AsyncButton as Button };
@@ -62,11 +77,11 @@ export {Card}
 export {Checkbox}
 export {Col}
 export {ConfigProvider}
+export {App}
 
 /**@type {*} */
 const DatePicker = _DatePicker;
 export {DatePicker}
-export {Drawer}
 export {Dropdown}
 export {Empty}
 export {Image}
@@ -75,7 +90,6 @@ export {Layout}
 export {List}
 export {Menu}
 export {message}
-export {Modal}
 export {notification}
 export {Pagination}
 export {Popconfirm}
@@ -84,7 +98,7 @@ export {Progress}
 export {Radio}
 export {Row}
 export {Space}
-export {Spin}
+
 export {Steps}
 export {Switch}
 export {Table}
@@ -95,8 +109,6 @@ export {Tooltip}
 export {TreeSelect}
 export {Upload}
 export {AutoComplete}
-
-
 export {AntdTooltip}
 export {AntdButton}
 

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

@@ -0,0 +1,26 @@
+
+
+
+.antd5Theme {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  
+}
+
+:global {
+  .ant5-btn{
+  }
+  .ant5-table-cell.ant5-table-cell-scrollbar{
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+    // .ant-table-container {
+    //   border-top: 0 !important;
+    //   .ant-table-selection-extra{
+    //     margin-left: 0;
+    //     padding:0;
+    //   }
+    // }
+  }

package/templates/template_admin_antd5/public/src/components/antd/modal/README.md

@@ -0,0 +1,324 @@
+# Modal 组件使用指南
+
+## 概述
+
+提供了两种方式来创建 Modal：
+
+1. **showModal** - 函数式调用（推荐）
+2. **useModalHelper** - Hook 方式（在组件内使用）
+
+两种方式都自动继承 antd 5 的主题配置。
+
+---
+
+## 方式 1：showModal（推荐）
+
+### 特点
+- ✅ 可以在任何地方调用（不限于组件内）
+- ✅ 自动继承主题配置
+- ✅ 支持异步操作
+- ✅ 自动管理 loading 状态
+- ✅ 错误时不关闭 Modal
+
+### 基础用法
+
+```jsx
+import { showModal } from '@/components/modal';
+
+// 简单的确认对话框
+const result = await showModal({
+  title: '确认删除',
+  content: <div>确定要删除这条记录吗？</div>,
+});
+
+if (result) {
+  console.log('用户点击了确定');
+} else {
+  console.log('用户点击了取消');
+}
+```
+
+### 带表单的 Modal
+
+```jsx
+import { showModal } from '@/components/modal';
+import { Form, Input, message } from '@/components/antd';
+
+const handleEdit = async (id) => {
+  let formRef = null;
+
+  const result = await showModal({
+    title: '编辑用户',
+    width: 600,
+    content: (
+      <Form ref={(ref) => (formRef = ref)}>
+        <Form.Item label="姓名" name="name" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+    ),
+    onOk: async () => {
+      // 验证表单
+      const values = await formRef.validateFields();
+      
+      // 提交数据
+      const res = await saveData(values);
+      
+      if (res.code === 0) {
+        message.success('保存成功');
+        return; // 成功后关闭
+      } else {
+        throw new Error('保存失败'); // 抛出错误阻止关闭
+      }
+    },
+  });
+
+  return result;
+};
+```
+
+### 完整配置项
+
+```jsx
+showModal({
+  title: '标题',                    // Modal 标题
+  content: <YourComponent />,       // Modal 内容（JSX）
+  width: 600,                       // 宽度（默认 520）
+  maskClosable: false,              // 点击遮罩是否关闭（默认 false）
+  okText: '确定',                   // 确定按钮文字
+  cancelText: '取消',               // 取消按钮文字
+  onOk: async () => {               // 确定回调（支持异步）
+    // 返回 Promise 可以控制关闭
+    // 抛出错误会阻止关闭
+  },
+  onCancel: () => {                 // 取消回调
+    // 可选
+  },
+  modalProps: {                     // 其他 antd Modal 属性
+    footer: null,
+    // ...
+  }
+});
+```
+
+---
+
+## 方式 2：useModalHelper（组件内使用）
+
+### 特点
+- ✅ 使用 antd 5 的 App.useApp() hook
+- ✅ 更轻量，不需要手动管理 DOM
+- ✅ 自动继承主题
+- ⚠️ 只能在组件内使用
+
+### 基础用法
+
+```jsx
+import { useModalHelper } from '@/components/modal';
+import { Form, Input } from '@/components/antd';
+
+function MyComponent() {
+  const { showModalInApp } = useModalHelper();
+  const [form] = Form.useForm();
+
+  const handleEdit = async () => {
+    const result = await showModalInApp({
+      title: '编辑用户',
+      width: 600,
+      content: (
+        <Form form={form}>
+          <Form.Item label="姓名" name="name">
+            <Input />
+          </Form.Item>
+        </Form>
+      ),
+      onOk: async () => {
+        const values = await form.validateFields();
+        await saveData(values);
+      },
+    });
+
+    if (result) {
+      console.log('保存成功');
+    }
+  };
+
+  return <button onClick={handleEdit}>编辑</button>;
+}
+```
+
+---
+
+## 对比：旧方式 vs 新方式
+
+### 旧方式（Popup + ReactRender）
+
+```jsx
+// 需要创建单独的组件文件
+const DialogEdit = (props) => {
+  const { destory, id } = props;
+  return (
+    <Modal open={true} onCancel={() => destory(false)}>
+      {/* ... */}
+    </Modal>
+  );
+};
+
+const ShowEdit = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(
+      <DialogEdit destory={popup.destory} {...props} />,
+      popup.dom,
+      popup.root
+    );
+  });
+};
+
+// 使用
+await ShowEdit({ id: 1 });
+```
+
+**缺点：**
+- 代码冗长
+- 需要手动管理 destory
+- 需要创建单独的组件
+- 容易出错
+
+### 新方式（showModal）
+
+```jsx
+// 直接调用，一行搞定
+await showModal({
+  title: '编辑用户',
+  content: <MyForm />,
+  onOk: async () => { /* ... */ }
+});
+```
+
+**优点：**
+- 代码简洁
+- 自动管理生命周期
+- 不需要单独的组件文件
+- 更易维护
+
+---
+
+## 迁移指南
+
+### 从旧方式迁移到新方式
+
+**旧代码：**
+```jsx
+// dialog/index.jsx
+const DialogEdit = (props) => {
+  const { destory, id } = props;
+  const [form] = Form.useForm();
+  
+  return (
+    <Modal
+      open={true}
+      onOk={async () => {
+        const values = await form.validateFields();
+        await saveData(values);
+        destory(true);
+      }}
+      onCancel={() => destory(false)}
+    >
+      <Form form={form}>
+        {/* ... */}
+      </Form>
+    </Modal>
+  );
+};
+
+export default (props) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactRender(<DialogEdit destory={popup.destory} {...props} />, popup.dom, popup.root);
+  });
+};
+```
+
+**新代码：**
+```jsx
+// dialog/index.jsx
+import { showModal } from '@/components/modal';
+
+export default async (id) => {
+  let formRef = null;
+  
+  return showModal({
+    title: '编辑用户',
+    content: (
+      <Form ref={(ref) => (formRef = ref)}>
+        {/* ... */}
+      </Form>
+    ),
+    onOk: async () => {
+      const values = await formRef.validateFields();
+      await saveData(values);
+    },
+  });
+};
+```
+
+---
+
+## 常见问题
+
+### Q1: 如何在 onOk 中阻止 Modal 关闭？
+
+**A:** 抛出错误即可：
+
+```jsx
+onOk: async () => {
+  const values = await form.validateFields();
+  const res = await saveData(values);
+  
+  if (res.code !== 0) {
+    throw new Error('保存失败'); // 抛出错误，Modal 不会关闭
+  }
+}
+```
+
+### Q2: 如何访问表单实例？
+
+**A:** 使用 ref：
+
+```jsx
+let formRef = null;
+
+showModal({
+  content: <Form ref={(ref) => (formRef = ref)}>{/* ... */}</Form>,
+  onOk: async () => {
+    const values = await formRef.validateFields();
+  }
+});
+```
+
+### Q3: 旧的 Popup 方式还能用吗？
+
+**A:** 可以，已经修复了兼容性问题。但推荐使用新方式，代码更简洁。
+
+### Q4: 新方式支持自定义 footer 吗？
+
+**A:** 支持，通过 modalProps 传递：
+
+```jsx
+showModal({
+  title: '标题',
+  content: <div>内容</div>,
+  modalProps: {
+    footer: <CustomFooter />
+  }
+});
+```
+
+---
+
+## 总结
+
+- **推荐使用 showModal**：代码简洁，功能完整
+- **旧方式保留**：已修复兼容性，可以继续使用
+- **逐步迁移**：新功能用新方式，旧代码可以保持不变