kn-cli 1.0.134 → 1.0.136

package/build/package.json

@@ -45,7 +45,8 @@
     "webpack-cli": "~3.3.11",
     "webpack-dev-server": "~3.10.3",
     "@pmmmwh/react-refresh-webpack-plugin": "~0.4.3",
-    "react-refresh": "~0.9.0"
+    "react-refresh": "~0.9.0",
+    "hard-source-webpack-plugin": "~0.13.1"
   },
   "overrides": {
     "@jridgewell/gen-mapping": "0.3.5"

package/build/vite.config.js

@@ -76,6 +76,7 @@ warn(`build_env:${process.env.build_env}`);
 warn(`mock:${process.env.mock}`);
 warn(`noSkipNpmInstall:${process.env.noSkipNpmInstall}`);
 warn(`build_log_level:${process.env.build_log_level}`);
+warn(`host:${host}`);
 warn(`=====================env end=========================`);
 
 export default defineConfig({

package/build/webpack.config.js

@@ -11,6 +11,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const NowDateTime = Date.now();
+var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
 //////////// CONFIG ENV ///////////////
 const API_CONFIG = require('./webpack.api.js');
@@ -132,7 +133,8 @@ if(!hashMode){
 
 /////////////// RULES ////////////////
 const BABEL_PLUGINS=[
-    ['@babel/plugin-transform-runtime', { corejs: 3 }],
+    ['@babel/plugin-transform-runtime', { corejs: 3}],
+    '@babel/plugin-transform-class-properties'
 ]
 const BABEL_PLUGINS_777=[
   ['@babel/plugin-transform-runtime', { corejs: 3 }],
@@ -148,6 +150,7 @@ const LOADER_JS=[
   {
     loader: 'babel-loader',
     options: {
+      // cacheDirectory: true, // 👈 必须开启！默认是 false
       presets: [
         '@babel/preset-react',
         [
@@ -396,6 +399,7 @@ if(devMode){
       overlay:false//关闭全局的错误提示
     }) ) // 添加 React Refresh 插件
   }
+
   plugins.push(new webpack.SourceMapDevToolPlugin({
     filename: 'sourcemap/[file].map',
     // filename: false, // 避免生成额外的 .map 文件，提高构建速度
@@ -476,6 +480,16 @@ if(cssSplitMode){
   )
 }
 
+if(CLI_CONFIG?.hardSourceWebpackPlugin){
+  const cacheDir = path.resolve(dirname, '.webpack_cache/[confighash]')
+  warn(`hardSourceWebpackPlugin cacheDir:${cacheDir}`);
+  plugins.push(
+    new HardSourceWebpackPlugin({
+      cacheDirectory: cacheDir,
+    })
+  )
+}
+
 //////////////// PLUGINS-END //////////////////
 
 ///////////// SPA-RENDER ///////////////
@@ -543,7 +557,7 @@ const config={
   optimization: optimization,
   plugins: plugins,
   // watchOptions: {
-  //   aggregateTimeout: 5000, // 文件变化后延迟 300 毫秒再重新构建
+  //   // aggregateTimeout: 5000, // 文件变化后延迟 300 毫秒再重新构建
   //   ignored: /node_modules/ // 忽略 node_modules 目录
   // }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.134",
+  "version": "1.0.136",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/build.js

@@ -54,7 +54,7 @@ module.exports= async (options={})=> {
   // 构建模板
   const tempWebpackDir = path.resolve(tempProjectDir,"_webpack");
   const tempWebpackPackagePath = path.resolve(tempWebpackDir,'package.json');
-  const tempWebpackBabelPackagePath = path.resolve(tempWebpackDir,'babel.package.json');
+  const tempWebpackBabelPackagePath = path.resolve(tempWebpackDir,cliConfig?.babelConfigName??'babel.package.json');
 
   const tempVitePackagePath = path.resolve(tempWebpackDir,'vite.package.json');
   const tempWebpackConfigPath = path.resolve(tempWebpackDir,'webpack.config.js');

package/templates/template_admin_antd5/package.json

@@ -7,15 +7,15 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@ant-design/icons": "~5.6.1",
     "ali-oss": "~6.20.0",
-    "antd": "~5.22.0",
+    "antd": "~5.29.0",
     "axios": "~1.1.3",
+    "dayjs": "~1.11.20",
     "jszip": "~3.10.1",
     "kn-hooks": "~1.0.2",
-    "moment": "~2.29.4",
     "react": "~18.3.0",
     "react-dom": "~18.3.0",
-    "react18-json-view": "~0.2.9",
     "react-router": "~6.3.0",
     "react-router-dom": "~6.3.0",
     "unstated-next": "~1.1.0",

package/templates/template_admin_antd5/public/src/_antd.less

@@ -3,10 +3,10 @@
 
 
 // 这里可以重写antd的主题样式变量，参考 https://4x.ant.design/docs/react/customize-theme-cn
-@primary-color:#0974F2;
-@table-header-bg:#F5F8FF;
-@btn-border-radius-base:4px;
-@modal-border-radius:8px;
+// @primary-color:#0974F2;
+// @table-header-bg:#F5F8FF;
+// @btn-border-radius-base:4px;
+// @modal-border-radius:8px;
 
 :global{
   .ant-form-inline{

package/templates/template_admin_antd5/public/src/_reset.module.less

@@ -48,7 +48,7 @@
     letter-spacing: inherit;
   }
   a{
-    color: var(--color-primary);
+    color: var(--theme-color-primary);
   }
 
 

package/templates/template_admin_antd5/public/src/_variable.module.less

@@ -21,11 +21,11 @@
 
   --font-Regular:14px;
 
-
-  --color-primary-dark:#001529;
-  --color-primary-light:#F5F8FF;
-  --color-primary:#0974F2;
-  --color-primary-hover:#1565c0;
+  // 不用此变量，使用theme配置的主题相关颜色
+  // --color-primary-dark:#001529;
+  // --color-primary-light:#F5F8FF;
+  // --color-primary:#0974F2;
+  // --color-primary-hover:#1565c0;
 
   --color-font-bold:#141414;
   --color-font-gray:#8C8C8C;

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

@@ -1,18 +1,30 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, App } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
 import {antd5TableTheme} from './theme';
+import styles from './index.module.less';
+styles;
 
 const Antd5Provider=props=>{
   const {children} = props;
+
+  // 将主题色注入到 CSS 变量中
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--theme-color-primary', antd5TableTheme.token.colorPrimary);
+    root.style.setProperty('--theme-color-primary-hover', antd5TableTheme.token.colorPrimaryHover);
+  }, []);
+
   return (
     <ConfigProvider 
       locale={zhCN} 
       theme={antd5TableTheme} 
-      // prefixCls="ant5" 
+      prefixCls="ant5" 
     >
-      {children}
+      <App>
+        {children}
+      </App>
     </ConfigProvider>
   )
 };

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

@@ -0,0 +1,336 @@
+# Drawer 组件使用指南
+
+## 概述
+
+提供了两种方式来创建 Drawer（侧边弹窗）：
+
+1. **showDrawer** - 函数式调用（推荐）
+2. **useDrawerHelper** - Hook 方式（在组件内使用）
+
+两种方式都自动继承 antd 5 的主题配置。
+
+---
+
+## 方式 1：showDrawer（推荐）
+
+### 特点
+- ✅ 可以在任何地方调用（不限于组件内）
+- ✅ 自动继承主题配置
+- ✅ 支持异步操作
+- ✅ 自动管理 loading 状态
+- ✅ 错误时不关闭 Drawer
+
+### 基础用法
+
+```jsx
+import { showDrawer } from '@/components/drawer';
+
+// 简单的确认对话框
+const result = await showDrawer({
+  title: '确认操作',
+  content: <div>确定要执行这个操作吗？</div>,
+});
+
+if (result) {
+  console.log('用户点击了确定');
+} else {
+  console.log('用户点击了取消');
+}
+```
+
+### 带表单的 Drawer
+
+```jsx
+import { showDrawer } from '@/components/drawer';
+import { Form, Input, message } from 'antd';
+
+const handleEdit = async (id) => {
+  let formRef = null;
+
+  const result = await showDrawer({
+    title: '编辑用户',
+    width: 600,
+    content: (
+      <Form ref={(ref) => (formRef = ref)} layout="vertical">
+        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item label="邮箱" name="email" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
+          <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
+showDrawer({
+  title: '详情',
+  placement: 'right',  // 默认值，可省略
+  content: <DetailContent />,
+});
+```
+
+### 从左侧滑出
+
+```jsx
+showDrawer({
+  title: '导航菜单',
+  placement: 'left',
+  content: <NavigationMenu />,
+});
+```
+
+### 从顶部滑出
+
+```jsx
+showDrawer({
+  title: '通知',
+  placement: 'top',
+  height: 300,  // 设置高度
+  content: <NotificationList />,
+  drawerProps: {
+    height: 300,
+  },
+});
+```
+
+### 从底部滑出
+
+```jsx
+showDrawer({
+  title: '操作面板',
+  placement: 'bottom',
+  content: <ActionSheet />,
+  drawerProps: {
+    height: 400,
+  },
+});
+```
+
+### 隐藏底部按钮
+
+```jsx
+showDrawer({
+  title: '纯展示内容',
+  footer: false,  // 隐藏底部按钮
+  content: <SomeContent />,
+});
+```
+
+### 完整配置项
+
+```jsx
+showDrawer({
+  title: '标题',                    // Drawer 标题
+  content: <YourComponent />,       // Drawer 内容（JSX）
+  width: 600,                       // 宽度（默认 480，placement 为 top/bottom 时忽略）
+  placement: 'right',               // 弹出方向：'left' | 'right' | 'top' | 'bottom'（默认 'right'）
+  maskClosable: true,               // 点击遮罩是否关闭（默认 true）
+  closable: true,                   // 是否显示关闭按钮（默认 true）
+  okText: '确定',                   // 确定按钮文字
+  cancelText: '取消',               // 取消按钮文字
+  footer: true,                     // 是否显示底部按钮（默认 true，设为 false 隐藏）
+  onOk: async () => {               // 确定回调（支持异步）
+    // 返回 Promise 可以控制关闭
+    // 抛出错误会阻止关闭
+  },
+  onCancel: () => {                 // 取消回调
+    // 可选
+  },
+  drawerProps: {                    // 其他 antd Drawer 属性
+    // 例如：
+    // height: 300,                 // 当 placement 为 top/bottom 时设置高度
+    // destroyOnClose: true,        // 关闭时销毁子元素
+    // zIndex: 1000,                // 层级
+    // ...
+  }
+});
+```
+
+---
+
+## 方式 2：useDrawerHelper（组件内使用）
+
+### 特点
+- ✅ 在组件内使用，更集成
+- ✅ 自动管理状态
+- ✅ 自动继承主题
+- ⚠️ 只能在组件内使用
+
+### 基础用法
+
+```jsx
+import { useDrawerHelper } from '@/components/drawer';
+import { Form, Input } from 'antd';
+
+function MyComponent() {
+  const { openDrawer, DrawerComponent } = useDrawerHelper();
+  const [form] = Form.useForm();
+
+  const handleEdit = async () => {
+    let formRef = null;
+    
+    const result = await openDrawer({
+      title: '编辑用户',
+      width: 600,
+      content: (
+        <Form ref={(ref) => (formRef = ref)} layout="vertical">
+          <Form.Item label="姓名" name="name" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+        </Form>
+      ),
+      onOk: async () => {
+        const values = await formRef.validateFields();
+        await saveData(values);
+      },
+    });
+
+    if (result) {
+      console.log('保存成功');
+    }
+  };
+
+  return (
+    <>
+      <button onClick={handleEdit}>编辑</button>
+      <DrawerComponent />
+    </>
+  );
+}
+```
+
+---
+
+## 与 Modal 的区别
+
+| 特性 | Modal | Drawer |
+|------|-------|--------|
+| 显示方式 | 居中弹窗 | 侧边滑出 |
+| 默认宽度 | 520px | 480px |
+| 遮罩关闭 | 默认 false | 默认 true |
+| 适用场景 | 简短确认、表单编辑 | 复杂表单、详情展示、多步骤操作 |
+
+### 何时使用 Drawer
+
+- 需要展示较多内容时
+- 需要保持上下文可见（如列表页）
+- 多步骤操作流程
+- 详情查看页面
+- 复杂表单编辑
+
+### 何时使用 Modal
+
+- 简单的确认对话框
+- 简短的表单输入
+- 需要用户立即注意的重要信息
+
+---
+
+## 常见问题
+
+### Q1: 如何在 onOk 中阻止 Drawer 关闭？
+
+**A:** 抛出错误即可：
+
+```jsx
+onOk: async () => {
+  const values = await form.validateFields();
+  const res = await saveData(values);
+  
+  if (res.code !== 0) {
+    throw new Error('保存失败'); // 抛出错误，Drawer 不会关闭
+  }
+}
+```
+
+### Q2: 如何访问表单实例？
+
+**A:** 使用 ref：
+
+```jsx
+let formRef = null;
+
+showDrawer({
+  content: <Form ref={(ref) => (formRef = ref)}>{/* ... */}</Form>,
+  onOk: async () => {
+    const values = await formRef.validateFields();
+  }
+});
+```
+
+### Q3: 如何设置 Drawer 的高度？
+
+**A:** 当 `placement` 为 `top` 或 `bottom` 时，通过 `drawerProps.height` 设置：
+
+```jsx
+showDrawer({
+  title: '通知',
+  placement: 'top',
+  content: <NotificationList />,
+  drawerProps: {
+    height: 300,
+  },
+});
+```
+
+### Q4: 如何自定义底部按钮？
+
+**A:** 通过 `drawerProps.footer` 自定义：
+
+```jsx
+showDrawer({
+  title: '自定义按钮',
+  content: <SomeContent />,
+  drawerProps: {
+    footer: (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+        <Button onClick={handleCustomAction}>自定义操作</Button>
+        <Button type="primary">提交</Button>
+      </div>
+    ),
+  },
+});
+```
+
+### Q5: 如何在关闭时销毁内容？
+
+**A:** 使用 `destroyOnClose`：
+
+```jsx
+showDrawer({
+  title: '详情',
+  content: <DetailContent />,
+  drawerProps: {
+    destroyOnClose: true,
+  },
+});
+```
+
+---
+
+## 总结
+
+- **推荐使用 showDrawer**：代码简洁，功能完整
+- **自动继承主题**：无需额外配置
+- **逐步使用**：根据场景选择 Modal 或 Drawer