kn-cli 1.0.47 → 1.0.49

package/build/cli.config.js

@@ -6,6 +6,9 @@ module.exports = {
     javascriptEnabled:false,//是否开启less js
   },
   version:'1.0',
+  // rules:{
+  //   compileNpmPackage:['kn-hooks'],//需要参与编译的npm包
+  // },
   // https:true,//是否使用https本地调试
   // pxtorem:false,//默认:true,开启px转rem模式
   // site_root_path:'/dist/',// 默认:'',站点根目录

package/build/webpack.config.js

@@ -110,88 +110,58 @@ if(!hashMode){
 ////////////// OUTPUT-END ///////////////
 
 /////////////// RULES ////////////////
+
+const LOADER_JS=[
+  {
+    loader: 'babel-loader',
+    options: {
+      presets: [
+        '@babel/preset-react',
+        [
+          '@babel/preset-env',
+          {
+            targets: devMode
+              ? { chrome: '90' }
+              : {
+                  chrome: '40',
+                  ie: '11',
+                },
+          },
+        ],
+      ],
+      plugins: [
+        ['@babel/plugin-transform-runtime', { corejs: 3 }],
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        ['@babel/plugin-proposal-private-methods', { loose: true }],
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        // ["import", {
+        //   style: false,//"css",
+        //   libraryName: "kn-hooks" ,
+        //   libraryDirectory:"src",
+        //   camel2DashComponentName:false,
+        // }],
+        // ["import", {
+        //   style: true,//"css",
+        //   libraryDirectory:"",
+        //   libraryName: "antd" ,
+        // }]
+      ],
+    },
+  },
+]
+
 const rules= [
   {
     test: /\.js[x]?$/,
     exclude: /node_modules/,
-    use: [
-      {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            '@babel/preset-react',
-            [
-              '@babel/preset-env',
-              {
-                targets: devMode
-                  ? { chrome: '90' }
-                  : {
-                      chrome: '40',
-                      ie: '11',
-                    },
-              },
-            ],
-          ],
-          plugins: [
-            ['@babel/plugin-transform-runtime', { corejs: 3 }],
-            '@babel/plugin-proposal-optional-chaining',
-            '@babel/plugin-proposal-nullish-coalescing-operator',
-            ['@babel/plugin-proposal-decorators', { legacy: true }],
-            ['@babel/plugin-proposal-private-methods', { loose: true }],
-            ['@babel/plugin-proposal-class-properties', { loose: true }],
-            // ["import", {
-            //   style: false,//"css",
-            //   libraryName: "kn-hooks" ,
-            //   libraryDirectory:"src",
-            //   camel2DashComponentName:false,
-            // }],
-            // ["import", {
-            //   style: true,//"css",
-            //   libraryDirectory:"",
-            //   libraryName: "antd" ,
-            // }]
-          ],
-        },
-      },
-    ],
+    use: LOADER_JS,
   },
   // {
   //   test: /\.json$/,
   //   use: 'json-loader'
   // },
-  {
-    test: /\.js[x]?$/,
-    include: /kn-hooks/,
-    use: [
-      {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            '@babel/preset-react',
-            [
-              '@babel/preset-env',
-              {
-                targets: devMode
-                  ? { chrome: '80' }
-                  : {
-                      chrome: '40',
-                      ie: '11',
-                    },
-              },
-            ],
-          ],
-          plugins: [
-            ['@babel/plugin-transform-runtime', { corejs: 3 }],
-            '@babel/plugin-proposal-optional-chaining',
-            '@babel/plugin-proposal-nullish-coalescing-operator',
-            ['@babel/plugin-proposal-decorators', { legacy: true }],
-            ['@babel/plugin-proposal-private-methods', { loose: true }],
-            ['@babel/plugin-proposal-class-properties', { loose: true }],
-          ],
-        },
-      },
-    ],
-  },
   {
     test: /\.(jpg|png|gif|svg)$/,
     loader: 'url-loader',
@@ -291,6 +261,16 @@ if(support_sass){
     ],
   })
 }
+if(CLI_CONFIG.rules){
+  if(CLI_CONFIG.rules.compileNpmPackage){
+    let JS_LIST= CLI_CONFIG.rules.compileNpmPackage.join('|');
+    rules.push({
+      test: /\.js[x]?$/,
+      include: new RegExp(`(${JS_LIST})`),
+      use: LOADER_JS
+    },)
+  }
+}
 ////////////// RULES-END ///////////////
 
 
@@ -320,6 +300,13 @@ if(jsSplitMode){
   }
   optimization.splitChunks= {
     cacheGroups: {
+      knHooks:{
+        test: /(kn-hooks)/,
+        priority: 10220,
+        name: 'kn-hooks',
+        chunks: 'all',
+        enforce: true,
+      },
       react: {
         test: /(react)/,
         priority: 100,
@@ -381,7 +368,7 @@ const plugins= [
 
 
 if(indexHtml){
-  const shareJs = jsSplitMode?['react-bundle', 'modules-bundle', 'default-bundle', 'styles-bundle']:[];
+  const shareJs = jsSplitMode?['react-bundle', 'modules-bundle', 'default-bundle', 'styles-bundle','kn-hooks']:[];
   if(jsSplitMode===true || jsSplitMode?.runtime !== false){
     shareJs.splice(0,0,'runtime');
   }

package/package.json

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

package/readme.md

@@ -62,10 +62,20 @@ module.exports = {
   // }
   // pxtorem:false,//默认:true,开启px转rem模式
   // https:true,//是否使用https本地调试
+  // rules:{
+  //   compileNpmPackage:['kn-hooks'],//需要参与编译的npm包
+  // },
 };
 ```
 
 # 更新日志
+* 1.0.49  
+  更新app和admin模板，主要是编写了使用案例  
+  
+* 1.0.48  
+  1. cli.config增加rules:{compileNpmPackage:[]}配置，用于配置一些需要参与编译的npm包  
+  2. 更新app及后管项目的模板  
+
 * 1.0.47  
   后管模板工程对菜单路由的隐藏子路由控制方法  
 

package/templates/template_admin/cli.config.js

@@ -5,6 +5,9 @@ module.exports = {
   less:{
     javascriptEnabled:true,//是否开启less js
   },
+  rules:{
+    compileNpmPackage:['kn-hooks'],//需要参与编译的npm包
+  },
   cssModule: (resourcePath) => {
     console.log(resourcePath)
     // antd.less编译的时候使用global模式

package/templates/template_admin/package.json

@@ -10,6 +10,7 @@
     "antd": "~4.24.8",
     "axios": "~1.1.3",
     "moment": "~2.29.4",
+    "kn-hooks": "~0.0.16",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
     "react-router": "~6.3.0",

package/templates/template_admin/public/src/components/Auth/index.jsx

@@ -29,7 +29,7 @@ export const AuthLogin=(props)=>{
     }else{
       console.log(`[Auth]检查用户登录态失败`)
       setPass(false);
-      navigate('/login');
+      navigate('/superAdminLogin');
     }
   }
   useEffect(check,[]);

package/templates/template_admin/public/src/components/TopMenu/index.jsx

@@ -113,7 +113,7 @@ const TopMenu=(props)=>{
   const loadMenu=async ()=>{
     const isLogin= await app.isLogin();
     if(!isLogin){
-      navigate('/login')
+      navigate('/superAdminLogin')
       return;
     }
     let reqMenu = await GET_MENU();

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

@@ -1,103 +1,39 @@
 
 import React, { useState, useEffect,useMemo} from 'react';
 import {GET_USER_TYPE} from '@/services/user';
+import {useDictionary} from 'kn-hooks';
+import ShowToast from '@/components/Toast';
+export const SelectOption=(props)=>{
+  const {value}=props;
+  const name = props['data-keyname'];
+  const onClick=(e)=>{
+    ShowToast(`点击option name=${name},value=${value},label=${props.children}`)
+    if(props.onClick)props.onClick();
+  }
+  return <hgroup onClick={onClick} key={value} name={name} value={value}>{props.children}</hgroup>
+}
 
-const bookCreater=options=>{
-  const {
-    service,
-    idKey='value',
-    titleKey='label',
-    keyName='key',
-    defaultTypes=null
-  }=options;
-  
-  return (props)=>{
-    const [types,setTypes]=useState(defaultTypes||null);
-
-    const init=async ()=>{
-      let ret = await service();
-      if(+ret?.code===0){
-        setTypes(ret.data||[]);
-      }
-    }
-    useEffect(()=>{
-      if(defaultTypes)return;
-      init();
-    },[]);
-
-    const getData=({id,title,key}={})=>{
-      let name='';
-      if(id){
-        name=idKey
-      }
-      else if(title){
-        name=titleKey
-      }
-      else if(key){
-        name=keyName;
-      }
-
-      for(let i=0;i<types.length;i++){
-        if(''+types[i][name]===''+id){
-          return types[i];
-        }
-      }
-      return null;
-    }
+useDictionary.SetConfig({SelectOption})
 
-    const getTitle=(id)=>{
-      if(types){
-        for(let i=0;i<types.length;i++){
-          if(''+types[i][idKey]===''+id){
-            return types[i][titleKey];
-          }
-        }
-      }
-      return '';
-    }
-    const getId=(title)=>{
-      if(types){
-        for(let i=0;i<types.length;i++){
-          if(''+types[i][titleKey]===''+title){
-            return types[i][idKey];
-          }
-        }
-      }
-      return '';
-    }
 
-    const isReady=()=>{
-      return types!==null;
-    }
-    const reload=()=>{
-      if(defaultTypes)return;
-      init();
-    }
-    const getList=()=>{
-      let ret=[]
-      for(let i=0;i<types.length;i++){
-        let item = types[i];
-        ret.push({
-          label:item[titleKey],
-          value:item[idKey],
-          key:item[keyName]
-        })
-      }
-      return ret;
+export const useUserType = useDictionary.createDictionary({
+  api:GET_USER_TYPE,
+  afterApi:(response)=>{
+    if(response?.code==0){
+      let req= response.data.map(item=>{
+        const  {label,value:id,key:name}=item;
+        return {label,id,name}
+      });
+      return req;
     }
-    
-
-    return {types,getTitle,getId,isReady,reload,getData,getList}
+    return [];
   }
-}
+});
 
-export const useUserType = bookCreater({
-  service:GET_USER_TYPE,
-})
-export const useTaskState=bookCreater({
+export const useTaskState= useDictionary.createDictionary({
   defaultTypes:[
-    {label:'进行中',value:'1',key:'run'},
-    {label:'已完成',value:'5',key:'complete'},
+    {label:'进行中',id:'1',name:'run'},
+    {label:'已完成',id:'5',name:'complete'},
   ]
 });
 

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

@@ -5,14 +5,16 @@ import useDelay from './useDelay';
 import usePreload from './usePreload';
 import useSearch from './useSearch';
 import useUpdate from './useUpdate';
-import useNextPage from './useNextPage';
 import useLoading from './useLoading';
+import {usePagination,usePaginationWithForm} from 'kn-hooks';
+
 export {
+  usePaginationWithForm,
+  usePagination,
   useImageLoader,
   useDelay,
   usePreload,
   useSearch,
   useUpdate,
-  useNextPage,
   useLoading
 }

package/templates/template_admin/public/src/pages/material/index.jsx

@@ -1,11 +1,82 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+import {usePaginationWithForm} from '@/hooks';
+import {GET_LIST} from '@/services/video';
+import {Table,Pagination,Form,Input,Button} from 'antd';
 
 const Page = () => {
-  const query = useParams();
+  const [form] = Form.useForm();
 
+  const request = usePaginationWithForm({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+    form:form
+  })
+
+  useEffect(()=>{
+    request.update();
+  },[])
+
+  const columns=[{
+    dataIndex:'id',
+    title:'id',
+    render:(_,record,idx)=>{
+      return record.id;
+    }
+  },{
+    dataIndex:'value',
+    title:'数据值',
+    render:(_,record,idx)=>{
+      return record.value||'-'
+    }
+  }];
+
+  useEffect(()=>{
+    console.log(request)
+  },[request])
+
+  const getDataSource=()=>{
+    if(request?.data?.length>0){
+      let req=request?.data[request.pagination.current-1]||[];
+      return req;
+    }
+    return [];
+  }
+
+  const onPageChange=(current,pageSize)=>{
+    debugger;
+    request.update({pagination:{current,pageSize}})
+  }
+  const onSearch=()=>{
+    request.update();
+  }
+  const onReset=()=>{
+    request.reset();
+  }
   return (
-    <p>material</p>
+    <section>
+      <section style={{display:'flex'}}>
+        <Form form={form} >
+          <Form.Item name='keywords' label='关键字'>
+            <Input />
+          </Form.Item>
+        </Form>
+        <Button onClick={onSearch} type='primary' style={{margin:'0 12px'}}>查询</Button>
+        <Button onClick={onReset}>重置</Button>
+      </section>
+      <Table 
+        rowKey={'id'}
+        loading={!request?.data?.length>0}
+        columns={columns}
+        dataSource={getDataSource()}
+        pagination={false}
+      />
+      <Pagination 
+        current={request?.pagination?.current} 
+        pageSize={request?.pagination?.pageSize}
+        onChange={onPageChange}
+        total={request?.pagination?.total}
+      />
+    </section>
   )
 }
 

package/templates/template_admin/public/src/pages/video/index.jsx

@@ -1,11 +1,64 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+import {usePagination} from '@/hooks';
+import {GET_LIST} from '@/services/video';
+import {Table,Pagination} from 'antd';
 
 const Page = () => {
-  const query = useParams();
+  const request = usePagination({
+    service:GET_LIST,
+    pagination:{pageSize:10}
+  })
 
+  useEffect(()=>{
+    request.update();
+  },[])
+
+  const columns=[{
+    dataIndex:'id',
+    title:'id',
+    render:(_,record,idx)=>{
+      return record.id;
+    }
+  },{
+    dataIndex:'value',
+    title:'数据值',
+    render:(_,record,idx)=>{
+      return record.value||'-'
+    }
+  }];
+
+  useEffect(()=>{
+    console.log(request)
+  },[request])
+
+  const getDataSource=()=>{
+    if(request?.data?.length>0){
+      let req=request?.data[request.pagination.current-1]||[];
+      return req;
+    }
+    return [];
+  }
+
+  const onPageChange=(current,pageSize)=>{
+    debugger;
+    request.update({pagination:{current,pageSize}})
+  }
   return (
-    <p>video</p>
+    <section>
+        <Table 
+          rowKey={'id'}
+          loading={!request?.data?.length>0}
+          columns={columns}
+          dataSource={getDataSource()}
+          pagination={false}
+        />
+        <Pagination 
+          current={request?.pagination?.current} 
+          pageSize={request?.pagination?.pageSize}
+          onChange={onPageChange}
+          total={request?.pagination?.total}
+        />
+    </section>
   )
 }
 

package/templates/template_admin/public/src/provider/app.jsx

@@ -87,7 +87,7 @@ const useApp=() =>{
     setUser(null);
     setJwt('');
     localStorage.removeItem('user');
-    navigate('/login');
+    navigate('/superAdminLogin');
   }
   setLogout(logout);
 

package/templates/template_admin/public/src/route.jsx

@@ -21,12 +21,6 @@ const delayLoader=(loader)=>{
   })
 }
 
-// /*webpackChunkName:'subGroup'*/
-const Home = React.lazy(()=>import('@/pages/index.jsx'));
-const SubHome = React.lazy(()=>import('@/pages/subHome'));
-const SubHome2 = React.lazy(()=>import('@/pages/subHome2'));
-const SubHome3 = React.lazy(()=>import('@/pages/subHome3'));
-const CheckLogin = React.lazy(()=>import('@/pages/checkLogin'));
 
 
 const Video = React.lazy(()=>import('@/pages/video'));
@@ -66,10 +60,6 @@ export const RouteList = (
         <Route path='/user' element={<User />} />
         <Route path='/userData' element={<UserData />} />
 
-        {/* <Route path='/home/sub' element={<SubHome />} />
-        <Route path='/home/sub/:id' element={<Suspense fallback={<PageLoading />}><SubHome2 /></Suspense>} />
-        <Route path='/home/sub3/:id' element={<SubHome3 />} />
-        <Route path='/checkLogin' element={<AuthLogin><CheckLogin /></AuthLogin>} /> */}
       </Route>
     </Route>
   </Routes>

package/templates/template_admin/public/src/services/video.js

@@ -0,0 +1,33 @@
+
+
+export function GET_LIST(params={
+  current:1,
+  pageSize:10,
+  keywords:''
+}){
+  const {current,pageSize,keywords='-'}=params;
+  let list=[];
+  for(let i=0;i<200;i++){
+    list.push({
+      id:i,
+      value:`item-${i}-${keywords}`,
+    })
+  }
+  let total=200;
+  let startIdx = (current-1)*pageSize;
+  let data = list.splice(startIdx,pageSize);
+  let req= {
+    code:0,
+    data,
+    page:{
+      current,
+      pageSize,
+      total
+    }
+  };
+  return new Promise(resolve=>{
+    setTimeout(()=>{
+      resolve(req)
+    },500)
+  })
+}

package/templates/template_app/cli.config.js

@@ -6,6 +6,9 @@ module.exports = {
     javascriptEnabled:false,//是否开启less js
   },
   version:'1.0',
+  rules:{
+    compileNpmPackage:['kn-hooks'],//需要参与编译的npm包
+  },
   // 自定义多入口
   // entry:{
   //   'home/index': 'src/jsx/home/index.jsx',

package/templates/template_app/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "antd-mobile": "~5.28.0",
     "axios": "~1.1.3",
+    "kn-hooks": "~0.0.16",
     "moment": "~2.29.4",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",

package/templates/template_app/public/src/_reset.less

@@ -64,7 +64,7 @@ a,div,p,span,section,hgroup{
 
   * {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    position: relative;
+    // position: relative;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-text-size-adjust: none;
     -webkit-box-sizing: border-box;