kn-cli 1.0.3 → 1.0.5

package/build/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "lib/index",
   "scripts": {
-    "dev": "cross-env webpack-dev-server --progress",
+    "dev": "cross-env webpack-dev-server",
     "start": "cross-env webpack-dev-server -d",
     "build": "cross-env webpack -p --progress --colors --mode production",
     "build:dev": "cross-env webpack -p --progress --colors --mode production",

package/build/webpack.config.js

@@ -119,7 +119,7 @@ module.exports = {
                   '@babel/preset-env',
                   {
                     targets: devMode
-                      ? { chrome: '80' }
+                      ? { chrome: '90' }
                       : {
                           chrome: '40',
                           ie: '11',
@@ -255,6 +255,7 @@ module.exports = {
     minimizer: [
       new TerserPlugin({
         parallel: true,
+        sourceMap:true
         // terserOptions:{
         //   compress:false,
         //   mangle:false
@@ -325,8 +326,8 @@ module.exports = {
     }),
     new webpack.SourceMapDevToolPlugin({
       filename: 'sourcemap/[file].map',
-      publicPath: resource_path_relative,
-      fileContext: 'js',
+      // publicPath: resource_path_relative,
+      // fileContext: 'js',
     })
   ],
 };

package/package.json

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

package/readme.md

@@ -1,38 +1,16 @@
 # kn-cli
+项目脚手架
 
+# 快速开始
+1. 安装: npm i kn-cli -g
+2. 创建项目: kn-cli --create
+3. 调试项目: kn-cli --dev
+4. 编译项目: kn-cli --build
+5. 当项目中需要添加第三方npm包时，务必使用--save参数`npm i 包名  --save`
 
-# 本地链接cli的方法
-1. 在本工程目录外任意新建一个文件夹,如:`/Users/myProject`  
-2. 在终端内定位文件夹位置`cd /Users/myProject`  
-3. nvm use v16.8.0  
-4. 链接当前kn-cli目录：`npm link /Users/kingnet-cli`  
-5. 接下来查看是否链接成功: `kn-cli -v` 如果能正常打印版本号则代表成功  
 
-# cli 基础使用方法
-1. 查看版本号： `kn-cli -v`  
-2. 创建项目: `kn-cli --create`  
-3. 启动调试: `kn-cli --dev`  
-3. 打包编译: `kn-cli --build`  
+> 项目创建后，记得执行sh init.sh 以激活git分支提交日志
 
+# cli 其它常用方法
+1. 查看版本号： `kn-cli -v`    
 
-# cli 扩展功能
-## iconfont   
-1. 将制作好的svg图标放入项目根目录`tools/iconfont/svg` 文件夹内  
-2. 执行 `kn-cli --iconfont`  
-3. 编译后的文件在 `tools/iconfont/dist/`文件夹下  
-## tinypnt 图片压缩  
-执行 `kn-cli --tinypng`,工具将自动扫描项目根目录下`src/assets/`内的所有图片，对可压缩的进行压缩并替换原有文件
-
-
-# 目录说明
-build: 编译相关的配置文件  
-temp: 每次项目调试、编译时的临时缓存文件夹,可完全删除  
-templates: 存放`kn-cli -i`创建的各类项目模板  
-
-# CICD构建流程
-1. sh frontend_build.sh 其中其实执行了  
-  a. npm i
-  b. kn-cli --build
-  c. mv dist ../release/
-
-  

package/templates/template_app/frontend_build.sh

@@ -29,6 +29,16 @@ checkNode(){
 }
 
 
+checkKnCli(){
+  if ! [ -x "$(command -v kn-cli)" ]
+  then
+    npm i kn-cli -g
+    return 0
+  fi
+  return 0
+}
+
+
 checkResult(){
   ret=$?
   if [ $ret != 0 ]
@@ -49,9 +59,11 @@ build(){
   rm -rf release
   checkResult "清理release"
 
-  cd public
-  npm i kn-cli@1.0.2 -g
-  checkResult "npm kn-cli"
+  checkKnCli
+  checkResult "检查kn-cli"
+
+  # npm i kn-cli@1.0.2 -g
+  # checkResult "npm kn-cli"
 
   kn-cli --build
   checkResult "kn-cli --build"
@@ -63,6 +75,7 @@ build(){
 checkNode
 checkResult "检查node"
 
+
 build
 checkResult "build"
 

package/templates/template_app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "mobile-app",
   "version": "1.0.0",
   "main": "lib/index",
   "scripts": {
@@ -7,13 +7,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "axios": "^1.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
+    "antd-mobile": "~5.27.0",
+    "axios": "~1.1.3",
+    "moment": "~2.29.4",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2",
+    "react-router": "~6.3.0",
+    "react-router-dom": "~6.3.0",
     "unstated-next": "~1.1.0",
-    "vconsole": "^3.9.5"
+    "vconsole": "~3.9.5"
   },
   "engines": {
     "node": "16.18.0"

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

@@ -9,12 +9,7 @@
     width:100vw;
     height: 100%;
     // height:100vh;
-    
-    padding:env(safe-area-inset-top) 
-    env(safe-area-inset-right) 
-    env(safe-area-inset-bottom) 
-    env(safe-area-inset-left);
-    padding-bottom:0;
+    padding:var(--safeTop) var(--safeRight) var(--safeBottom) var(--safeLeft);
   }
 
   body,#main-view{
@@ -103,7 +98,7 @@ a,div,p,span,section,hgroup{
 
 
   #__vconsole *{
-    font-size:24PX;
+    font-size:14PX;
   }
 
   body[data-debug-layout]{

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

@@ -4,8 +4,13 @@
 :root{
   --safeTop: constant(safe-area-inset-top);
   --safeBottom: constant(safe-area-inset-bottom);
+  --safeLeft: constant(safe-area-inset-left);
+  --safeRight: constant(safe-area-inset-right);
+
   --safeTop: env(safe-area-inset-top);
   --safeBottom: env(safe-area-inset-bottom);
+  --safeLeft: env(safe-area-inset-left);
+  --safeRight: env(safe-area-inset-right);
   
   --weight-Thin:100;
   --weight-Ultralight:200;

package/templates/template_app/public/src/assets/images/loading.svg

@@ -1,51 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
 <g transform="rotate(0 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8888888888888888s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(30 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+</g><g transform="rotate(40 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7777777777777778s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(60 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(90 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
+</g><g transform="rotate(80 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
     <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
   </rect>
 </g><g transform="rotate(120 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(150 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5555555555555556s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(180 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+</g><g transform="rotate(160 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4444444444444444s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(210 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
+</g><g transform="rotate(200 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
     <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
   </rect>
 </g><g transform="rotate(240 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
-  </rect>
-</g><g transform="rotate(270 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2222222222222222s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(300 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
-    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+</g><g transform="rotate(280 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1111111111111111s" repeatCount="indefinite"></animate>
   </rect>
-</g><g transform="rotate(330 50 50)">
-  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#1d3f72">
+</g><g transform="rotate(320 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
     <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
   </rect>
 </g>

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

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import ProviderApp from '@/provider/app';
+import { useNavigate } from 'react-router-dom';
+import {useLoading} from '@/hooks';
+
+export const AuthShow=(props)=>{
+  const {name} = props;
+  const app = ProviderApp.useContainer();
+  if(app?.user?.auth?.includes(name)){
+    return props.children;
+  }
+  return <></>
+}
+
+export const AuthLogin=(props)=>{
+  const navigate = useNavigate();
+  const [pass,setPass] = useState(false)
+  const app = ProviderApp.useContainer();
+  const loading = useLoading();
+
+  const check=async ()=>{
+    loading.setLoading(true);
+    console.log(`[Auth]检查用户登录态`)
+    const req =await app.isLogin();
+    loading.setLoading(false);
+    if(req){
+      console.log(`[Auth]检查用户登录态成功`)
+      setPass(true);
+    }else{
+      console.log(`[Auth]检查用户登录态失败`)
+      setPass(false);
+      navigate('/login');
+    }
+  }
+  useEffect(check,[]);
+
+  if(pass){
+    return props.children;
+  }
+  return <>检查登录态中...</>
+}
+
+
+export default {AuthShow,AuthLogin};

package/templates/template_app/public/src/components/Header/index.jsx

@@ -1,22 +1,56 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import IconFont from '../IconFont';
 import styles from './index.less';
 
 const Header=(props)=>{
-  const {title='标题'} = props;
-
-  const onBack=()=>{
+  const {
+    visible=true,
+    className='',
+    title='标题',
+    subTitle='',
+    leftLabel='',
+    rightLabel='',
+    left=<IconFont className={styles.leftIcon} icon='arrowBack' />,
+    right='',
+    syncDocumentTitle=false
+  } = props;
 
+  // 同步更新网页标题
+  useEffect(()=>{
+    if(syncDocumentTitle){
+      document.title= title;
+    }
+  },[title])
+  const onLeft=()=>{
+    window.history.back();
+  }
+  const onLeftLabel=()=>{
+    if(props.onLeftLabel){props.onLeftLabel()}
+  }
+  const onRight=()=>{
+    if(props.onRight){props.onRight()}
+  }
+  const onRightLabel=()=>{
+    if(props.onRightLabel){props.onRightLabel()}
+  }
+  const onTitle=()=>{
+    if(props.onTitle){props.onTitle()}
   }
   return (
-    <section className={styles.header}>
-      <section className={styles.left} onClick={onBack}>
-        <IconFont icon='arrowBack' />
-      </section>
+    <section className={`${styles.header} ${className}`} data-visible={visible}>
+      <hgroup className={styles.group}>
+        {left&&(<section className={styles.left} onClick={onLeft}>{left}</section>)}
+        {leftLabel&&<span className={styles.leftLabel} onClick={onLeftLabel}>{leftLabel}</span>}
+      </hgroup>
       <section className={styles.center}>
-        {title}
+        {title&&<span onClick={onTitle}>{title}</span>}
+        {subTitle&&<span>{subTitle}</span>}
       </section>
-      <section className={styles.right}></section>
+      <hgroup className={styles.group}>
+        {rightLabel&&<span className={styles.rightLabel} onClick={onRightLabel}>{rightLabel}</span>}
+        {right&&(<section className={styles.right} onClick={onRight}>{right}</section>)}
+      </hgroup>
+      
     </section>
   )
 }

package/templates/template_app/public/src/components/Header/index.less

@@ -2,30 +2,56 @@
 
 
 .header{
+  z-index: 1;
   height:var(--height-header);
+  background-color: white;
   width:100%;
   display: flex;
   align-items: center;
   box-shadow: 0 0 2px 0 #ccc;
   padding: 0 var(--padding-default);
-  .left{
+  &[data-visible='false']{
+    display: none;
+  }
+  .group{
     display: flex;
     align-items: center;
     height:100%;
+    min-width: 1px;
+  }
+  .right,
+  .left{
+    display: flex;
+    align-items: center;
     font-size: 24px;
-    width:48px;
+    .rightIcon,
+    .leftIcon{
+      margin-top: 6px;
+    }
+  }
+  .rightLabel,
+  .leftLabel{
+    &:not(:first-child){
+      margin-left:var(--padding-small)
+    }
   }
+
   .center{
     flex:1;
     height:100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    color:var(--color-text)
-  }
-  .right{
-    height:100%;
-    width:48px;
+    color:var(--color-text);
+    span:nth-child(1){
+      font-size: 16px;
+      color:inherit;
+    }
+    span:nth-child(2){
+      font-size: 12px;
+      color:inherit;
+    }
   }
 }
 

package/templates/template_app/public/src/components/Layout/App/index.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import {Outlet} from 'react-router-dom';
 import Header from '@/components/Header';
+import ProviderApp from '@/provider/app';
 import styles from './index.less';
 
 
 const LayoutApp=(props)=>{
+  const providerApp = ProviderApp.useContainer();
+  console.log('layoutApp.nav',providerApp.nav)
   return ( 
     <section className={styles.layoutAppWrap}>
-      <section className={styles.header}>
-        <Header />
-      </section>
+      <Header {...providerApp.nav} />
       <section className={styles.content}>
         <Outlet />
       </section>

package/templates/template_app/public/src/components/Layout/App/index.less

@@ -14,11 +14,7 @@
   padding-bottom: var(--safeBottom);
 
 }
-.header{
-  height:var(--height-header);
-  width:100%;
-  background-color: white;
-}
+
 .content{
   flex:1;
   width:100%;

package/templates/template_app/public/src/components/Layout/Provider/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Outlet} from 'react-router-dom';
+import ProviderApp from '@/provider/app';
+
+const LayoutProvider=(props)=>{
+  return ( 
+    <ProviderApp.Provider>
+      <Outlet />
+    </ProviderApp.Provider>
+  )
+}
+export default LayoutProvider;

package/templates/template_app/public/src/components/Layout/index.jsx

@@ -1,3 +1,4 @@
 import React from 'react';
 import LayoutApp from './App';
-export { LayoutApp };
+import LayoutProvider from './Provider';
+export { LayoutApp ,LayoutProvider};

package/templates/template_app/public/src/components/Page/PageLoading/index.jsx

@@ -1,7 +1,8 @@
 import React,{useEffect, useState} from 'react';
-
+import ReactDOM from 'react-dom';
 import CSS from './index.less';
-import Loading from '@/components/Loading';
+import Popup from '@/components/Popup';
+import imgLoading from '@/assets/images/loading.svg';
 
 const PageLoading = (props) => {
   const {visible=true} = props;
@@ -11,10 +12,19 @@ const PageLoading = (props) => {
   return (
     <div className={CSS.wrap } >
       <div className={CSS.box} data-show={visible}>
-        <Loading />
+        <img src={imgLoading} />
       </div>
     </div>
   );
 };
 
+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_app/public/src/components/Page/PageLoading/index.less

@@ -12,16 +12,16 @@
 
 .box {
 
-  width: 150px;
-  height: 150px;
+  width: 80px;
+  height: 80px;
   background: rgba(0,0,0,.3);
-  border-radius: 28px;
+  border-radius: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
   img{
     display: block;
-    width:150px;opacity: .5;
+    width:80%;
   }
   &[data-show=false]{
     opacity: 0;

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

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect,useMemo} from 'react';
-
+import {GET_USER_TYPE} from '@/services/user';
 
 const bookCreater=options=>{
   const {
@@ -91,6 +91,9 @@ const bookCreater=options=>{
   }
 }
 
+export const useUserType = bookCreater({
+  service:GET_USER_TYPE,
+})
 export const useTaskState=bookCreater({
   defaultTypes:[
     {label:'进行中',value:'1',key:'run'},

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

@@ -5,13 +5,14 @@ import useDelay from './useDelay';
 import usePreload from './usePreload';
 import useSearch from './useSearch';
 import useUpdate from './useUpdate';
-import useLogin from './useLogin';
-
+import useNextPage from './useNextPage';
+import useLoading from './useLoading';
 export {
   useImageLoader,
   useDelay,
   usePreload,
   useSearch,
   useUpdate,
-  useLogin
+  useNextPage,
+  useLoading
 }

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

@@ -0,0 +1,42 @@
+import { useRef,useState, useEffect } from 'react';
+import {ShowPageLoading} from '@/components/Page/PageLoading';
+
+const useLoading=(props={})=>{
+  const {canTouch=false} = props;
+  const [name] = useState(props?.name||'loading')
+  const [count,setCount] = useState(props?.loading?1:0);
+  const refPageLoading = useRef();
+
+  const setLoading=(state)=>{
+    if(state){
+      setCount(v=>v+1);
+    }else{
+      setCount(v=>v-1);
+    }
+  }
+  const reset=()=>{
+    setCount(v=>0);
+  }
+  useEffect(()=>{
+    if(count > 0 ){
+      if(!refPageLoading.current){
+        refPageLoading.current = ShowPageLoading({canTouch:canTouch});
+      }
+    }else{
+      if(refPageLoading.current){
+        refPageLoading.current();//销毁
+        refPageLoading.current=null;
+      }
+    }
+  },[count])
+
+  
+  return {
+    name,
+    reset,
+    setLoading,
+    loading:count
+  }
+}
+
+export default useLoading;