kn-cli 1.0.3 → 1.0.5

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

@@ -0,0 +1,89 @@
+import { useState,useRef } from 'react';
+
+
+const DEFAULT_PAGE_SIZE=20;
+const DEFAULT_PAGE_CURRENT=1;
+
+const useNextPage=(props)=>{
+  const [search,setSearch] = useState(props.initSearch||{});
+  const [service] = useState(()=>props.service);
+  const [beforeService] = useState(()=>props.beforeService);
+  const [pagination,setPagination] = useState(()=>{
+    let temp = {
+      current:DEFAULT_PAGE_CURRENT,
+      pageSize:DEFAULT_PAGE_SIZE,
+      total:0,
+      startIdx:0,
+      more:false,
+      ...props.pagination
+    };
+    temp.startIdx = (temp.current-1)*temp.pageSize;
+    return temp;
+  });
+  const resetCount = useRef(0);
+  const [data,setData] = useState([]);
+  
+  const reset= async ()=>{
+    resetCount.current++;
+    let page = {...pagination};
+    page.current =1;
+    return refresh({pageValue:page})
+  }
+  const nextPage= async ()=>{
+    if(!pagination.more){
+      return false;
+    }
+    let page = {...pagination};
+    page.current= +page.current+1;
+    return refresh({pageValue:page})
+  }
+  const refresh= async ({searchValue,pageValue}={})=>{
+    searchValue = searchValue || search;
+    pageValue = pageValue || pagination;
+    searchValue = {...search,...searchValue};
+    pageValue = {...pagination,...pageValue};
+
+    const {current,pageSize} = pageValue;
+    let params = {...searchValue,current:current,pageSize:pageSize};
+    if(beforeService)params=beforeService(params);
+    if(!params)return;
+
+    setSearch(searchValue);
+
+    let ret = await service(params);
+    if(ret?.code==0){
+      const {page} = ret.data;
+      const current= +(page.pageNum||DEFAULT_PAGE_CURRENT);
+      const pageSize= +(page.pageSize||DEFAULT_PAGE_SIZE);
+      const total= +page.total;
+      const startIdx= (current-1)*pageSize;
+      const more = current*pageSize<total;
+      setPagination({
+        current,pageSize,total,startIdx,more
+      })
+      if(ret.data.list){
+        ret.data.list.map(item=>{
+          item.resetCount = resetCount.current;
+        })
+        let newData = current==1?[]:data;
+        newData[current-1] = ret.data.list;
+        setData([...newData])
+      }
+    }
+    return ret;
+  }
+
+
+  return {
+    pagination,
+    search,
+    setSearch,
+    refresh,
+    reset,
+    nextPage,
+    data,
+  };
+
+}
+
+export default useNextPage;

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

@@ -1,5 +1,7 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
+import antd from 'antd-mobile';
+antd;
 
 import './_reset.less';
 

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

@@ -1,4 +1,5 @@
 import mock from 'mockjs-async';
+
 import user from './user.js';
 
 function regMock(list){

package/templates/template_app/public/src/mock/user.js

@@ -1,6 +1,6 @@
 import {waitTime,REP_SUCCESS} from './utils.js';
 import qs from 'qs';
-
+import {GET_REQUEST} from './utils';
 async function GET_USER(req,res){
   const query = qs.parse(req.url.split('?')[1]);
   const {name} = query;
@@ -19,6 +19,52 @@ async function SET_USER(req,res){
   }
 }
 
+async function GET_USER_LIST(req,res){
+  const {current,pageSize} = GET_REQUEST(req,res);
+  const MAX_TOTAL=98;
+  let data=[];
+  let idx=(current-1)*pageSize;
+
+  for(let i=0;i<pageSize;i++){
+    if(idx>=MAX_TOTAL)break;
+    data.push({
+      name:`${idx++}小朋友`
+    })
+  }
+  return {
+    code:0,
+    data:{
+      list:data,
+      page:{
+        pageNum:current,
+        pageSize:pageSize,
+        total:MAX_TOTAL
+      }
+    }
+  }
+}
+
+async function GET_USER_TYPE(req,res){
+  let data=[];
+  for(let i=0;i<10;i++){
+    data.push({
+      label:`标题${i}`,
+      value:i,
+      key:`title${i}`
+    })
+  }
+  return {
+    code:0,
+    data:data
+  }
+}
+
+
+
+
 export default {
+  '/userType':{get:GET_USER_TYPE},
+  '/userList':{get:GET_USER_LIST},
   '/user':{get:GET_USER,post:SET_USER},
+
 }

package/templates/template_app/public/src/mock/utils.js

@@ -1,3 +1,5 @@
+import qs from 'qs';
+
 export const waitTime = (time = 500) => {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -21,3 +23,11 @@ export const REP_500=async (req,res)=>{
   // console.log(res);
   return res.status(500).send({})
 }
+
+
+export const GET_REQUEST=(req)=>{
+  if(req.type=='GET'){
+    return qs.parse(req.url.split('?')[1]);
+  }
+  return JSON.parse(req.body);
+}

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

@@ -1,8 +1,167 @@
 import React, { useEffect, useState, useRef } from 'react';
+import {PullToRefresh ,InfiniteScroll,List} from 'antd-mobile';
+import {useNextPage,useLoading} from '@/hooks';
+import {GET_USER_LIST} from '@/services/user';
+import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+
+import ProviderApp from '@/provider/app';
+import moment from 'moment';
+import ShowToast from '@/components/Toast';
+import {useUserType} from '@/dictionary';
+import {AuthShow} from '@/components/Auth';
+
 import styles from './index.less';
 
 const Page = () => {
-  return (<p>welcome</p>)
+  const navigate= useNavigate();
+  const providerApp = ProviderApp.useContainer();
+  const query = useParams();
+  const [search] = useSearchParams();
+  const request = useNextPage({
+    service:GET_USER_LIST,
+  })
+  const [list,setList]= useState([]);
+  const loading = useLoading();
+  const loadingCanTouch = useLoading({canTouch:true});
+
+  const emUserType= useUserType();
+
+  useEffect(()=>{
+    let ret=[];
+    request?.data?.forEach(page=>{
+      try{
+      ret = [...ret,...page];
+      }catch(ex){
+        console.error(ex)
+        debugger;
+      }
+    })
+    setList(ret);
+
+  },[request.data])
+
+
+  const onReset= async ()=>{
+    return request.reset();
+  }
+
+  const onNextPage= async ()=>{
+    if(loading.loading>0){
+      return;
+    }
+    loading.setLoading(true)
+    let dom = document.querySelector('#wall');
+    dom.scrollTop-=200;
+    await request.nextPage();
+    loading.setLoading(false)
+    return true;
+  }
+  const refresh=async ()=>{
+    loading.setLoading(true)
+    await request.refresh(); 
+    loading.setLoading(false);
+  }
+  useEffect(()=>{
+    refresh();
+  },[]);
+
+  return (
+    <section id="wall" className={styles.wall}>
+      <PullToRefresh className={styles.wrap}
+        onRefresh={async () => {
+          await onReset();
+          return true;
+        }}
+      >
+        <List header='导航栏'>
+          <List.Item key='navShow' onClick={()=>{
+            providerApp.setNav({visible:!providerApp.nav.visible});
+          }}>隐藏/隐藏导航栏</List.Item>
+
+          <List.Item key='navTitle' onClick={()=>{
+            providerApp.setNav({title:moment().format('YYYY-MM-DD HH:mm:ss')});
+          }}>修改标题</List.Item>
+
+          <List.Item key='navSyncTitle' onClick={()=>{
+            providerApp.setNav({syncDocumentTitle:!providerApp.nav.syncDocumentTitle});
+          }}>开启/关闭同步导航栏和网页标签标题</List.Item>
+
+        </List>
+
+        <List header='路由'>
+          <List.Item key='query'>动态路由id:{query.id}</List.Item>
+          <List.Item key='search'>url search:{search.toString()}</List.Item>
+        </List>
+
+        <List header='登录态'>
+          <List.Item key='loginStatus'>登录状态：{providerApp?.user?.id?`已登录:${providerApp?.user?.id}`:'未登录'}</List.Item>
+          {
+            providerApp?.user?.id?
+            <List.Item key='logout' onClick={()=>{
+              providerApp.logout()}
+            }>注销</List.Item>:
+            <List.Item key='login' onClick={async ()=>{
+                loading.setLoading(true);
+                await providerApp.login();
+                loading.setLoading(false)
+              }
+            }>登录</List.Item>
+          }
+          <List.Item key='toUserPage' onClick={()=>{
+            navigate('/user');
+          }}>前往用户信息页面</List.Item>
+
+          <AuthShow name='normal'><List.Item key='user'>用户登录完才能看到这行</List.Item></AuthShow>
+        </List>
+
+        <List header='消息框'>
+          <List.Item key='toast' onClick={()=>{ShowToast(`现在时间:${moment().format('HH:mm:ss')}`)}}>Toast</List.Item>
+        </List>
+        
+        <List header='Loading'>
+          <List.Item key='loading' onClick={async ()=>{
+            loading.setLoading(true);
+            await new Promise(resolve=>{
+              setTimeout(resolve,3000);
+            });
+            loading.setLoading(false);
+          }}>打开全局loading-持续3秒(阻止其它交互)</List.Item>
+          <List.Item key='loadingCanTouch' onClick={async ()=>{
+            loadingCanTouch.setLoading(true);
+            await new Promise(resolve=>{
+              setTimeout(resolve,3000);
+            });
+            loadingCanTouch.setLoading(false);
+          }}>打开全局loading-持续3秒(不阻止交互)</List.Item>
+        </List>
+        
+        <List header='字典'>
+          {
+            emUserType.isReady()&&emUserType.getList().map(item=>{
+              return <List.Item key={item.key} data-value={item.value} onClick={ (e)=>{
+                let value = e.currentTarget.getAttribute('data-value');
+                let item = emUserType.getData({id:value});
+                ShowToast(`${JSON.stringify(item)}`)
+              }}>{item.label}</List.Item>
+            })
+          }
+        </List>
+
+        <List header='下拉刷新，滚动加载案例'>
+          {
+            list.map((item,idx)=>{
+              return (
+                <List.Item key={item.name}>{item.name}-{item.resetCount}</List.Item>
+              )
+            })
+          }
+        </List>
+    
+      </PullToRefresh>
+      <InfiniteScroll threshold={40} loadMore={onNextPage} hasMore={request.pagination.more} />
+
+    </section>
+  )
 }
 
 export default Page;

package/templates/template_app/public/src/pages/index.less

@@ -0,0 +1,22 @@
+
+.wall{
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+.wrap{
+  height:100%;
+  width:100%;
+}
+.item{
+  font-size: 40px;
+}
+.tips{
+  font-size: 36px;
+}
+
+.btnGroup{
+  :global(.adm-button ){
+    margin-bottom: 24px;
+  }
+}

package/templates/template_app/public/src/pages/login/index.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+import ProviderApp from '@/provider/app';
+
+import Link from '@/components/Link';
+const Page = () => {
+  const navigate= useNavigate();
+  const [search] = useSearchParams();
+  const providerApp = ProviderApp.useContainer();
+
+  const kssoLogin=async ()=>{
+    let code = search.get('code');
+    if(code){
+      //ksso auth登录
+      const req = await providerApp.login(code);
+      if(req){
+        navigate('/');//回到首页
+      }
+    }
+  }
+  useEffect(kssoLogin,[])
+  return (
+    <div>
+      <p>您未登录，当前是登录页</p>
+      <Link href={'/'}>点击返回首页</Link>
+    </div>
+  )
+}
+
+export default Page;

package/templates/template_app/public/src/pages/user/index.jsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Link from '@/components/Link';
+
+const Page = () => {
+  return (
+    <div>
+      <p>用户信息页：用户已登录才可以看到本页，不然会跳转登录页面</p>
+      <Link href={'/'}>点击返回首页</Link>
+    </div>
+  )
+}
+
+export default Page;

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

@@ -1,14 +1,45 @@
 import {  useState,useMemo } from 'react';
 import { createContainer } from "unstated-next"
-
+import {useDelay} from '@/hooks';
+import {logout as apiLogout} from '@/services';
 const useApp=() =>{
   const [loading,setLoading] = useState(true);
+  const [nav,setNavConfig] = useState({visible:true,syncDocumentTitle:false});
+  const [user,setUser] = useState(null);
+
+  const delay = useDelay();
+
+  const isLogin=async ()=>{
+    await delay.wait(2000);
+    return user?true:false;
+  }
+  const login=async (code)=>{
+    await delay.wait(2000);
+    setUser({id:'1001',auth:['normal','admin']});
+    return true;
+  }
+  const logout=async ()=>{
+    apiLogout();
+    setUser(null);
+  }
+
+
+  const setNav=(config)=>{
+    setNavConfig({...nav,...config});
+  }
   const action=useMemo(()=>{
     return {
       loading,
-      setLoading
+      setLoading,
+      isLogin,
+      login,
+      nav,
+      setNav,
+      logout,
+      setUser,
+      user
     }
-  },[loading]);
+  },[loading,nav,setNav,user,setUser,isLogin]);
 
   return action
 }

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

@@ -1,11 +1,20 @@
 import React from 'react';
-import { Routes, Route} from 'react-router-dom';
+import { Routes, Route, Navigate} from 'react-router-dom';
 import Home from '@/pages/index.jsx';
-import {LayoutApp} from '@/components/Layout'
+import Login from '@/pages/login';
+import User from '@/pages/user';
+import {LayoutApp,LayoutProvider} from '@/components/Layout';
+import {AuthLogin} from '@/components/Auth';
 export const RouteList = (
   <Routes>
-    <Route path='/' element={<LayoutApp />}>
-      <Route path='/' element={<Home />} />
+    <Route path='/' element={<LayoutProvider />}>
+      <Route path='/' element={<LayoutApp />}>
+        
+        <Route path='/' element={<Navigate to='/demo/1001?type=test&name=demo' />} />
+        <Route path='/demo/:id' element={<Home />} />
+        <Route path='/user'  element={<AuthLogin><User /></AuthLogin>} />
+      </Route>
+      <Route path='/login' element={<Login />} />
     </Route>
   </Routes>
 );

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

@@ -1,44 +1,35 @@
 import Axios from 'axios';
 import qs from 'qs';
 const axios = Axios.create();
-
 console.log(`========API_ROOT:${API_HOST}========`);
-export const API_ROOT = API_HOST;
 
-function filterFun(pre, v) {
-  if (pre && (v === '' || v === undefined)) {
-    // 处理空字符串丢失
-    return '';
-  }
-  if (v && v.constructor === Array && v.length <= 0) {
-    // 处理空数组丢失
-    return '';
-  }
-  return v;
-}
+export const API_ROOT = API_HOST;
+const tokenMode='header';//header,cookie
+const tokenName='token';
 
 let Modal = {
   error: (options) => {
     alert(options.content);
-    // ShowAlert({ label: options.title, text: `${options.content}` });
   },
 };
 
 let jwt = '';
-let logout;
+export const logout = ()=>{
+  localStorage.removeItem('jwt');
+  jwt='';
+}
 export const setJwt = (value) => {
   localStorage.setItem('jwt', value);
   jwt = value;
 };
 
-export const setLogout = (fn) => {
-  logout = fn;
-};
 
 axios.interceptors.request.use(function (config) {
   const header = { 'X-Requested-With': 'XMLHttpRequest' };
-  if (jwt) {
-    header.token = jwt;
+  if(tokenMode=='header'){
+    if (jwt) {
+      header[tokenName] = jwt;
+    }
   }
   if (config.headers) {
     config.headers = { ...config.headers, ...header };
@@ -60,7 +51,6 @@ axios.interceptors.response.use(
     if (response.config.noInterceptors) {
       return response;
     }
-
     if (Number(response.data.code) !== 0) {
       console.log(`${JSON.stringify(response.data)}`);
       Modal.error({ title: `注意`, content: `${response.data.msg}(${response.data.code})` });
@@ -73,12 +63,6 @@ axios.interceptors.response.use(
     }
     // jwt失效
     if (error.response.status === 401) {
-      // setJwt('');
-      //重新登录
-      // Modal.error({
-      //   title: '提示',
-      //   content: `请重新登录`,
-      // });
       if(logout)logout();
       return;
     } else if (error.response.status === 403) {
@@ -96,6 +80,9 @@ axios.interceptors.response.use(
   }
 );
 
+
+
+
 let buffer = {};
 export async function GET_DEFAULT(url, param, options) {
   if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
@@ -161,13 +148,6 @@ export async function POST_DEFAULT(url, params, method, options) {
   return response && response.data ? response.data : null;
 }
 
-export async function PUT_DEFAULT(url, params, options) {
-  return POST_DEFAULT(url, params, 'PUT', options);
-}
-export async function DELETE_DEFAULT(url, params, options) {
-  return POST_DEFAULT(url, params, 'DELETE', options);
-}
-
 export async function POST_DEFAULT_CROSS(url, params) {
   let data = {};
   // if (params) params = qs.stringify(params, { arrayFormat: 'indices' });

package/templates/template_app/public/src/services/user.js

@@ -1,6 +1,7 @@
 import {GET_DEFAULT,PUT_DEFAULT,POST_DEFAULT,API_ROOT} from './index.js';
 
 
+
 export function GET_USER(){
   return GET_DEFAULT(`${HOST}/user`);
 }
@@ -10,4 +11,16 @@ export function SET_USER(params={
   age:''
 }){
   return POST_DEFAULT(`${HOST}/user`,params)
+}
+
+
+export function GET_USER_LIST(params={
+  current:1,
+  pageSize:20
+}){
+  return GET_DEFAULT(`${API_ROOT}/userList`,params)
+}
+
+export function GET_USER_TYPE(){
+  return GET_DEFAULT(`${API_ROOT}/userType`)
 }

package/templates/template_app/public/static/kssoLogin.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover" />
+  <meta name="format-detection" content="telephone=no,email=no,adress=no">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <title></title>
+  <script>
+    var url = location.protocol + '//' + location.host+'/#/login';
+    location.replace('https://ksso.kingnet.com/oauth2/auth?client_id=填入分配的ID&response_type=code&redirect_uri=' + encodeURIComponent(url));
+  </script>
+</head>
+
+<body>
+</body>
+
+</html>

package/templates/template_app/readme.md

@@ -1,7 +1,7 @@
 # oa-app
 
 ### 初始化项目    
-1. sh init.sh  
+git仓库建立完毕后，执行`sh init.sh`  
 
 ### 本地调试  
 kn-cli --dev
@@ -22,7 +22,7 @@ kn-cli --dev
     部署方式：将构建完成的文件夹下的 `release` 内的内容部署到目标服务器  
     参考应用：oa-app
 
-  ```
+  ```  
 2. 进入CICD，构建相应环境  
 3. 快速发布  
 4. 进入域名访问  

package/templates/template_app/webpack.api.js

@@ -1,15 +1,15 @@
 const configs = {
   // 本地研发环境（npm start）
   localdebug: {
-    apiHost: '/api',
+    API_HOST: '/api',
   },
   // cicd构建时研发环境
   dev: {
-    apiHost: 'http://dev-api.com',
+    API_HOST: 'http://dev-api.com',
   },
   // cicd构建时生产环境
   prod: {
-    apiHost: 'http://api.com',
+    API_HOST: 'http://api.com',
   },
 };