kn-cli 1.0.89 → 1.0.91

package/build/webpack.config.js

@@ -109,7 +109,7 @@ if(CLI_CONFIG?.entry){
 ////////////// OUTPUT ///////////////
 const output= {
   // devtoolModuleFilenameTemplate:'webpack:///dist/[resource-path]',
-  filename: `[name]${hashMode ? '-[chunkhash]' : ''}.js`,
+  filename: hashMode?`[name]-[chunkhash].js`:`[name].js?v=${NowDateTime}`,
   path: path.join(dirname, distFolder,distJsFolder),
   publicPath: resource_path_relative,
 };
@@ -305,7 +305,7 @@ if(jsSplitMode){
   if(jsSplitMode===true||jsSplitMode?.runtime!==false){
     if(indexHtml){//只有当会注入到html内时才允许带runtime，避免多entry情况下入口js变为chunk.js
       optimization.runtimeChunk= {
-        name: 'runtime', // 所有入口有自己的runtime.js
+        name: `runtime`, // 所有入口有自己的runtime.js
       };
     }
   }
@@ -443,7 +443,7 @@ if (!devMode) {
 if(cssSplitMode){
   plugins.push(
     new MiniCssExtractPlugin({ 
-      filename: `[name]${hashMode ? '-[chunkhash:8]' : ''}.css`,
+      filename: hashMode?`[name]-[chunkhash:8].css`:`[name].css?v=${NowDateTime}`,
       ignoreOrder: true
     }),
   )

package/package.json

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

package/readme.md

@@ -140,6 +140,13 @@ report
 
 
 # 更新日志
+* 1.0.91  
+创建项目时自动将项目名称设置为当前文件夹的名称  
+模版内doc注释规范化、文件夹首字母大写更正    
+
+* 1.0.90  
+优化在hashMode=false的情况下，html内引用js、css资源时在尾部增加v=版本号  
+
 * 1.0.89  
 cli在npm i时，默认增加` export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true` 解决puppeteer包安装引起的异常  
 

package/src/create.js

@@ -2,7 +2,7 @@
 const chalk= require("chalk");
 const path= require( "path");
 const {Listr} = require('listr2');
-const {TaskNodeVersion,copyDir}= require('./utils');
+const {TaskNodeVersion,copyDir,replaceFileData}= require('./utils');
 const inquirer = require('inquirer');
 const ROOT=path.resolve(__dirname,"../");
 
@@ -13,6 +13,7 @@ const ROOT=path.resolve(__dirname,"../");
  */
 module.exports=async ()=> {
   const sourceDir = process.cwd();
+  const project_name = path.parse(sourceDir).base;//新建的项目名称以当前文件夹名为名
   const templatesDir = path.resolve(ROOT,"templates");
   let templateName='';
   const answer = await inquirer.prompt([
@@ -51,7 +52,26 @@ module.exports=async ()=> {
     },
     {
       title: "项目创建中",
-      task: () => copyDir(path.resolve(templatesDir,templateName),sourceDir)
+      task: async () => {
+        const project_dir = path.resolve(templatesDir,templateName);
+        // 将模版复制到目标目录
+        const req= await copyDir(project_dir,sourceDir);
+        if(req){
+          // 替换工程名称
+          const cliConfigName = path.resolve(sourceDir,'cli.config.js');
+          const packageConfigName = path.resolve(sourceDir,'package.json');
+          await replaceFileData(cliConfigName,function(data){
+            data = data.replace(/projectName/ig,project_name);
+            return data;
+          });
+          await replaceFileData(packageConfigName,function(data){
+            data = data.replace(/projectName/ig,project_name);
+            return data;
+          });
+          return true;
+        }
+        return false;
+      }
     },
   ]);
   try{

package/src/utils/index.js

@@ -12,7 +12,7 @@ module.exports = {
         if(err){
           throw new Error(err);
         }
-        resolve();
+        resolve(true);
       })
     })
   },

package/templates/template_admin/cli.config.js

@@ -1,6 +1,6 @@
 
 module.exports = {
-  name:'template-admin',
+  name:'projectName',
   registryType:'npm',//npm镜像源,taobao|npm
   less:{
     javascriptEnabled:true,//是否开启less js

package/templates/template_admin/jsconfig.json

@@ -3,8 +3,12 @@
     "baseUrl": ".",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "lib": ["dom", "ES2021"],
+    "allowJs":true,
+    "checkJs": true, 
+    "jsx": "react",
     "paths": {
       "@/*": ["./public/src/*"]
-    }
+    },
   }
 }

package/templates/template_admin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "template_admin",
+  "name": "projectName",
   "version": "1.0.0",
   "main": "lib/index",
   "scripts": {

package/templates/template_admin/public/index.html

@@ -21,8 +21,8 @@
     var docEl = document.documentElement;
     function setRemUnit(type) {
       let w = Math.max(window.innerWidth, docEl.clientWidth, docEl.offsetWidth);
-      let defaultWidth = 375;//填入设计稿上的宽度
-      w = w > defaultWidth ? defaultWidth : w;
+      let defaultWidth = 1200;//填入设计稿上的宽度
+      // w = w > defaultWidth ? defaultWidth : w;
       var rem = w / defaultWidth * 100;
       docEl.style.fontSize = rem + 'px'
     }

package/templates/template_admin/public/src/components/{Auth → auth}/index.jsx

@@ -1,8 +1,19 @@
+// @ts-ignore
 import React, { useEffect, useState } from 'react';
-import ProviderApp from '@/provider/app';
+// @ts-ignore
 import { useNavigate } from 'react-router-dom';
-import {useLoading} from '@/hooks';
 
+import ProviderApp from '@/provider/app';
+import {useLoading} from '@/hooks/index';
+
+/**
+ * 检查用户是否带有某个权限
+ * @param {object} props 
+ * @param {string} [props.name] - 权限的名称
+ * @param {JSX.Element} [props.children] - 子组件
+ * 
+ * @returns {JSX.Element}
+ */
 export const AuthShow=(props)=>{
   const {name} = props;
   const app = ProviderApp.useContainer();
@@ -12,6 +23,13 @@ export const AuthShow=(props)=>{
   return <></>
 }
 
+/**
+ * 用户登录态校验
+ * @param {object} props 
+ * @param {JSX.Element} [props.children] - 当登录校验合法后显示的子组件
+ * 
+ * @returns {JSX.Element}
+ */
 export const AuthLogin=(props)=>{
   const navigate = useNavigate();
   const [pass,setPass] = useState(false)
@@ -32,7 +50,7 @@ export const AuthLogin=(props)=>{
       navigate('/superAdminLogin');
     }
   }
-  useEffect(check,[]);
+  useEffect(()=>{check()},[]);
 
   if(pass){
     return props.children;

package/templates/template_admin/public/src/components/{IconFont → iconFont}/index.jsx

@@ -1,6 +1,16 @@
+// @ts-ignore
 import React from "react";
+// @ts-ignore
 import styles from'./index.less';
 
+/**
+ * iconFont图标
+ * @param {object} props 
+ * @param {string} [props.icon] - 图标名称
+ * @param {string} [props.className] - 扩展类名
+ * 
+ * @returns {JSX.Element}
+ */
 const IconFont=(props)=>{
   const {icon,className,...others} = props;
   return (

package/templates/template_admin/public/src/components/{Layout/Basic → layout/basic}/index.jsx

@@ -1,13 +1,23 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import {Outlet} from 'react-router-dom';
-import {LayoutCenterBody} from '@/components/Layout';
 
+import {LayoutCenterBody} from '@/components/layout';
 
+// @ts-ignore
 import styles from './index.less';
 
-
+/**
+ * 基础页面框架
+ * @param {object} props 
+ * @param {JSX.Element} [props.nav] - 左侧导航栏组件
+ * @param {JSX.Element} [props.topMenu] - 顶部导航栏组件
+ * 
+ * @returns {JSX.Element}
+ */
 const LayoutBasic=(props)=>{
-  const {className,nav="",topMenu=""} = props;
+  const {nav="",topMenu=""} = props;
   return ( 
     <LayoutCenterBody layout='x-center'>
       <section className={styles.wrap} >

package/templates/template_admin/public/src/components/layout/centerBody/index.jsx

@@ -0,0 +1,25 @@
+// @ts-ignore
+import React from 'react';
+
+// @ts-ignore
+import styles from './index.less';
+
+/**
+ * 居中定位的layout
+ * @param {object} props 
+ * @param {string} [props.className] - 扩展类样式
+ * @param {string} [props.layout='normal'] - 布局样式，xy-center|x-center|y-center
+ * @param {JSX.Element|string} [props.children] - 容器内的子组件
+ * 
+ * @returns {JSX.Element}
+ */
+const LayoutCenterBody=(props)=>{
+  const {className,layout='normal'} = props;
+
+  return ( 
+    <section data-layout={layout} className={ className?`${styles.contentBody} ${className}`:styles.contentBody  }>
+      {props.children}
+    </section>
+  )
+}
+export default LayoutCenterBody;

package/templates/template_admin/public/src/components/{Layout → layout}/index.jsx

@@ -1,16 +1,25 @@
+// @ts-ignore
 import React from 'react';
-import ProviderApp from '@/provider/app';
-
+// @ts-ignore
 import {Outlet} from 'react-router-dom';
+// @ts-ignore
 import { ConfigProvider } from 'antd';
-import LayoutBasic from './Basic';
-import LayoutCenterBody from './CenterBody';
+// @ts-ignore
 import zhCN from 'antd/lib/locale/zh_CN';
 
+import ProviderApp from '@/provider/app';
+import LayoutBasic from './basic/index';
+import LayoutCenterBody from './centerBody/index';
+
+// @ts-ignore
 import styles from './index.less';
 
-// 站点最基础的layout，用于控制一些全局环境变量
-const Layout = (props) => {
+/**
+ * 页面根框架，用于注入各类provider
+ * 
+ * @returns {JSX.Element}
+ */
+const Layout = () => {
   return (
     <ProviderApp.Provider>
         <ConfigProvider locale={zhCN}>

package/templates/{template_offcial/public/src/components/Layout/Provider → template_admin/public/src/components/layout/provider}/index.jsx

@@ -1,8 +1,15 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import {Outlet} from 'react-router-dom';
+
 import ProviderApp from '@/provider/app';
 
-const LayoutProvider=(props)=>{
+/**
+ * 注入AppProvider
+ * @returns {JSX.Element}
+ */
+const LayoutProvider=()=>{
   return ( 
     <ProviderApp.Provider>
       <Outlet />

package/templates/{template_app/public/src/components/Link → template_admin/public/src/components/link}/index.jsx

@@ -1,7 +1,22 @@
+// @ts-ignore
 import React  from 'react';
+
 import { openLink } from '@/utils';
+
+// @ts-ignore
 import styles from './index.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;
 

package/templates/template_admin/public/src/components/{Menu → menu}/index.jsx

@@ -1,12 +1,16 @@
-
-import { Menu } from 'antd';
+// @ts-ignore
 import React, { useEffect, useRef, useState } from 'react';
+// @ts-ignore
+import { Menu } from 'antd';
+// @ts-ignore
 import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
+// @ts-ignore
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
-import {useDelay,useLoading} from '@/hooks';
-import ProviderMenu from '@/provider/menu';
 
+import {useLoading} from '@/hooks/index';
+import ProviderMenu from '@/provider/menu';
 
+// @ts-ignore
 import styles from './index.less';
 
 const ICON_NAME={
@@ -17,11 +21,14 @@ const ICON_NAME={
 
 
 
-
-const LeftMenu=(props)=>{
+/**
+ * 左侧导航栏的demo组件
+ * 
+ * @returns {JSX.Element}
+ */
+const LeftMenu=()=>{
 
   const providerMenu = ProviderMenu.useContainer();
-  const delay = useDelay();
   const loader = useLoading();
   const [menus,setMenus] = useState([]);
   const [openKeys,setOpenKeys] = useState([]);
@@ -54,7 +61,7 @@ const LeftMenu=(props)=>{
     return item;
   }
 
-
+  // @ts-ignore
   window.matchPath=matchPath;
 
 

package/templates/template_admin/public/src/components/{Page/PageLoading → page/pageLoading}/index.jsx

@@ -1,13 +1,27 @@
-import React,{useEffect, useState} from 'react';
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
 import ReactDOM from 'react-dom';
-import CSS from './index.less';
-import Popup from '@/components/Popup';
+
+import Popup from '@/components/popup';
+
+// @ts-ignore
 import imgLoading from '@/assets/images/loading.svg';
 
+// @ts-ignore
+import CSS from './index.less';
+
+/**
+ * 页面Loading状态
+ * @param {object} [props] 
+ * @param {boolean} [props.visible=true] - 是否显示状态
+ * 
+ * @returns {JSX.Element}
+ */
 const PageLoading = (props) => {
   const {visible=true} = props;
   if(!visible){
-    return '';
+    return <></>;
   }
   return (
     <div className={CSS.wrap } >
@@ -18,6 +32,13 @@ const PageLoading = (props) => {
   );
 };
 
+/**
+ * 全屏置顶显示一个页面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(

package/templates/template_admin/public/src/components/{Popup → popup}/index.jsx

@@ -1,8 +1,21 @@
+// @ts-ignore
 import React from 'react';
+// @ts-ignore
 import ReactDOM from 'react-dom';
+
+// @ts-ignore
 import styles from './index.less';
 styles;
 
+/**
+ * 一个全屏置顶的遮罩层
+ * @param {(result)=>void} reslove - 遮罩层的关闭回调
+ * @param {Object} [options] - 参数
+ * @param {boolean} [options.cantouch=false] - 是否允许被点击穿透
+ * @param {boolean} [options.transparent=false] - 是否遮罩层完全透明
+ * 
+ * @returns { {dom:HTMLElement,destory:()=>void} }
+ */
 const Popup = (reslove,options) => {
   let rootDom = document.createElement('div');
   rootDom.className='popup-box';

package/templates/{template_app/public/src/components/Toast → template_admin/public/src/components/toast}/index.jsx

@@ -1,7 +1,13 @@
+// @ts-ignore
 import React,{useEffect} from 'react';
+// @ts-ignore
 import ReactDOM from 'react-dom';
+
+// @ts-ignore
+import Popup from '@/components/popup';
+
+// @ts-ignore
 import styles from './index.less';
-import Popup from '@/components/Popup/index.jsx';
 
 const toastList=[];
 const runNext=()=>{
@@ -43,12 +49,25 @@ const Toast=props=>{
   )
 }
 
+/**
+ * @typedef {object} ToastOptions
+ * @property {string} message - 吐司文案内容
+ * @property {number} [delay=2000] - 持续时间,毫秒
+ * @property {string} [position] - 显示位置,center|top|bottom
+ * @property {Function} [resolve] - 显示完毕的回调
+ */
 
+/**
+ * 显示一个吐司信息
+ * @param {ToastOptions|string} [props] - 文案内容或一个配置参数
+ * @returns { Promise }
+ */
 const ShowToast=props=>{
   if(typeof props === 'string'){
     props = {message:props}
   }
   return new Promise((resolve) => {
+    // @ts-ignore
     props.resolve = resolve;
     toastList.push(props);
     if(toastList.length===1){

package/templates/template_admin/public/src/components/{TopMenu → topMenu}/index.jsx

@@ -1,15 +1,20 @@
+// @ts-ignore
 import React, { useState,useEffect, useRef} from 'react';
+// @ts-ignore
 import { matchPath,useLocation,useNavigate } from 'react-router-dom';
-
-
+// @ts-ignore
 import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
-import imgAvatar from '@/assets/images/avatar.png';
-import { Menu,Dropdown } from 'antd'
+// @ts-ignore
+import { Menu,Dropdown } from 'antd';
+
 import ProviderApp from '@/provider/app';
 import ProviderMenu from '@/provider/menu';
-import styles from './index.less';
 import {GET_MENU} from '@/services/auth';
 
+// @ts-ignore
+import imgAvatar from '@/assets/images/avatar.png';
+// @ts-ignore
+import styles from './index.less';
 
 /**
  * 菜单下的隐藏子路由集
@@ -53,9 +58,9 @@ const SUB_MENU_CONFIG=[
   左侧导航栏数据为顶部导航栏数据的menus内子项{label,icon,children}组成
   routeTemplate用来识别动态参数的路由，同前端本地路由配置同步即可
   当顶部导航栏只有一项时，将自动隐藏顶部导航菜单
- * @returns 
+ * @returns {JSX.Element}
  */
-const TopMenu=(props)=>{
+const TopMenu=()=>{
   const app = ProviderApp.useContainer();
   const providerMenu = ProviderMenu.useContainer();
   const curRoute = useLocation();
@@ -187,7 +192,7 @@ const TopMenu=(props)=>{
     setSelectedKeys([]);
     providerMenu.setMenus([]);
   }
-  useEffect(loadMenu,[]);
+  useEffect(()=>{loadMenu()},[]);
 
   useEffect(()=>{
     reloadOpenMenu();

package/templates/template_admin/public/src/dictionary/index.js

@@ -1,8 +1,12 @@
 
-import React, { useState, useEffect,useMemo} from 'react';
-import {GET_USER_TYPE} from '@/services/user';
+// @ts-ignore
+import React from 'react';
+// @ts-ignore
 import {useDictionary} from 'kn-hooks';
-import ShowToast from '@/components/Toast';
+
+import {GET_USER_TYPE} from '@/services/user';
+import ShowToast from '@/components/toast';
+
 export const SelectOption=(props)=>{
   const {value}=props;
   const name = props['data-keyname'];
@@ -10,6 +14,7 @@ export const SelectOption=(props)=>{
     ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
     if(props.onClick)props.onClick();
   }
+  // @ts-ignore
   return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
 }
 

package/templates/template_admin/public/src/hooks/index.jsx

@@ -6,6 +6,7 @@ import usePreload from './usePreload';
 import useSearch from './useSearch';
 import useUpdate from './useUpdate';
 import useLoading from './useLoading';
+// @ts-ignore
 import {usePagination,usePaginationWithForm} from 'kn-hooks';
 
 export {

package/templates/template_admin/public/src/hooks/useDelay.jsx

@@ -1,18 +1,23 @@
+// @ts-ignore
 import { useRef,useState,useMemo, useEffect } from 'react';
 
 const useDelay=()=>{
   const [loading,setLoading] = useState(false);
   const refSet = useRef();
+  // @ts-ignore
   refSet.current = setLoading;
   useEffect(()=>{
+    // @ts-ignore
     refSet.current = setLoading;
   },[setLoading]);
 
   const actions=useMemo(()=>{
     const wait=(ms)=>{
+      // @ts-ignore
       refSet.current(true);
       return new Promise(res=>{
         setTimeout(()=>{
+          // @ts-ignore
           refSet.current(false);
           res();
         }, ms);

package/templates/template_admin/public/src/hooks/useImageLoader.jsx

@@ -1,7 +1,6 @@
+// @ts-ignore
 import React, { useEffect,useState,useMemo } from 'react';
 
-
-
 const useImageLoader=(img_src)=>{
   const [src,setSrc] = useState('');
   useEffect(() => {

package/templates/template_admin/public/src/hooks/useLoading.jsx

@@ -1,5 +1,7 @@
+// @ts-ignore
 import { useRef,useState, useEffect } from 'react';
-import {ShowPageLoading} from '@/components/Page/PageLoading';
+
+import {ShowPageLoading} from '@/components/page/pageLoading';
 
 const useLoading=(props={})=>{
   const {canTouch=false} = props;
@@ -20,10 +22,12 @@ const useLoading=(props={})=>{
   useEffect(()=>{
     if(count > 0 ){
       if(!refPageLoading.current){
+        // @ts-ignore
         refPageLoading.current = ShowPageLoading({canTouch:canTouch});
       }
     }else{
       if(refPageLoading.current){
+        // @ts-ignore
         refPageLoading.current();//销毁
         refPageLoading.current=null;
       }

package/templates/template_admin/public/src/hooks/usePreload.jsx

@@ -1,4 +1,5 @@
-import React, { useEffect,useState,useMemo,useRef,useCallback } from 'react';
+// @ts-ignore
+import React, { useState,useMemo,useCallback } from 'react';
 
 const usePreload=(files)=>{
   const [list] = useState(files);

package/templates/template_admin/public/src/hooks/useScrollTop.jsx

@@ -1,8 +1,19 @@
+// @ts-ignore
 import { useState, useMemo, useEffect } from 'react'
+// @ts-ignore
 import { createContainer } from 'unstated-next'
 
+/**
+ * @typedef {[HTMLElement,Function]} UseStateElement
+ */
+
+
 const useActivity = () => {
   const [scrollTop, setScrollTop] = useState(0);
+
+  /**
+   * @type UseStateElement
+   */
   const [containerNode, setContainerNode] = useState();
   const [clientHeight, setClientHeight] = useState(0);
   const [titleRefs, setTitleRefs] = useState({});
@@ -12,6 +23,7 @@ const useActivity = () => {
     setContainerNode(node);
     setClientHeight(node.clientHeight)
     node.addEventListener('scroll', (e) => {
+      // @ts-ignore
       setScrollTop(e.target.scrollTop);
     })
   }, [])