kn-cli 1.0.47 → 1.0.49

package/templates/template_app/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_app/public/src/hooks/index.jsx

@@ -3,16 +3,13 @@
 import useImageLoader from './useImageLoader';
 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} from 'kn-hooks';
+
 export {
+  usePagination,
   useImageLoader,
   useDelay,
   usePreload,
-  useSearch,
-  useUpdate,
-  useNextPage,
-  useLoading
+  useLoading,
 }

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

@@ -33,13 +33,11 @@ async function GET_USER_LIST(req,res){
   }
   return {
     code:0,
-    data:{
-      list:data,
-      page:{
-        pageNum:current,
-        pageSize:pageSize,
-        total:MAX_TOTAL
-      }
+    data:data,
+    page:{
+      current:current,
+      pageSize:pageSize,
+      total:MAX_TOTAL
     }
   }
 }

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import {List} from 'antd-mobile';
+import {useUserType,useTaskState} from '@/dictionary';
+import styles from './index.less';
+import ProviderApp from '@/provider/app';
+
+const Page = () => {
+  const providerApp = ProviderApp.useContainer();
+
+  const emUserType= useUserType();
+  const emUseTaskState = useTaskState();
+
+  useEffect(()=>{
+    providerApp.setNav({title:'字典工具'})
+  },[])
+  return (
+    <section id="wall" className={styles.wall}>
+      <List header='emUseTaskState'>
+        {
+          emUseTaskState.isReady()&&emUseTaskState.selectOptions
+        }
+      </List>
+      <List header='emUserType'>
+        {
+          emUserType.isReady()&&emUserType.selectOptions
+        }
+      </List>
+
+    </section>
+  )
+}
+
+export default Page;

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

@@ -1,13 +1,11 @@
-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 React, { useEffect } from 'react';
+import {PullToRefresh ,List} from 'antd-mobile';
+import {useLoading} from '@/hooks';
 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';
@@ -17,54 +15,11 @@ const Page = () => {
   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();
-  },[]);
-
+    providerApp.setNav({title:'APP演示'})
+  },[])
   return (
     <section id="wall" className={styles.wall}>
       <PullToRefresh className={styles.wrap}
@@ -134,31 +89,15 @@ const Page = () => {
             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 header='UI组件'>
+          <List.Item key='scrollList' onClick={()=>{navigate('/list')}}>下拉刷新及滚动加载</List.Item>
         </List>
 
-        <List header='下拉刷新，滚动加载案例'>
-          {
-            list.map((item,idx)=>{
-              return (
-                <List.Item key={item.name}>{item.name}-{item.resetCount}</List.Item>
-              )
-            })
-          }
+        <List header='其它'>
+          <List.Item key='dictionary' onClick={()=>{navigate('/dictionary')}}>字典工具</List.Item>
         </List>
     
       </PullToRefresh>
-      <InfiniteScroll threshold={40} loadMore={onNextPage} hasMore={request.pagination.more} />
 
     </section>
   )

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

@@ -0,0 +1,88 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {PullToRefresh ,InfiniteScroll,List} from 'antd-mobile';
+import {usePagination,useLoading} from '@/hooks';
+import {GET_USER_LIST} from '@/services/user';
+import ProviderApp from '@/provider/app';
+
+
+import styles from './index.less';
+
+const Page = () => {
+  const providerApp = ProviderApp.useContainer();
+
+  const request = usePagination({
+    service:GET_USER_LIST,
+  })
+  const [list,setList]= useState([]);
+  const loading = useLoading();
+
+  useEffect(()=>{
+    providerApp.setNav({title:'下拉刷新和滚动加载'})
+  },[])
+
+
+  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.update(); 
+    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.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/list/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

@@ -7,7 +7,6 @@ const Page = () => {
   const navigate= useNavigate();
   const [search] = useSearchParams();
   const providerApp = ProviderApp.useContainer();
-
   const kssoLogin=async ()=>{
     let code = search.get('code');
     if(code){

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

@@ -1,7 +1,16 @@
+/**
+ * @module ProviderApp
+ */
 import {  useState,useMemo } from 'react';
 import { createContainer } from "unstated-next"
 import {useDelay} from '@/hooks';
 import {logout as apiLogout} from '@/services';
+
+/**
+ * @function
+ * @description app状态管理的Provider
+ * @returns {UseAppResult}
+ */
 const useApp=() =>{
   const [loading,setLoading] = useState(true);
   const [nav,setNavConfig] = useState({visible:true,syncDocumentTitle:false});
@@ -44,6 +53,19 @@ const useApp=() =>{
   return action
 }
 
+/**
+ * @typedef UseAppResult
+ * @property {boolean} loading=true - loading状态
+ * @property {function} setLoading - 设置loading状态
+ * @property {Promise<boolean>} isLogin - 用户是否已登录
+ * @property {Promise<boolean>} login - 触发登录
+ * @property {Promise<boolean>} logout - 触发注销
+ * @property {Object} nav={visible:true} - 导航栏配置
+ * @property {function} setNav - 设置导航栏配置
+ * @property {function} setUser - 设置用户信息
+ * @property {Object} user=null - 用户信息
+ */
+
 const App = createContainer(useApp);
 
 export default App;

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

@@ -3,6 +3,10 @@ import { Routes, Route, Navigate} from 'react-router-dom';
 import Home from '@/pages/index.jsx';
 import Login from '@/pages/login';
 import User from '@/pages/user';
+import List from '@/pages/list';
+import Dictionary from '@/pages/dictionary';
+
+
 import {LayoutApp,LayoutProvider} from '@/components/Layout';
 import {AuthLogin} from '@/components/Auth';
 export const RouteList = (
@@ -13,6 +17,10 @@ export const RouteList = (
         <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 path='/list'  element={<List />} />
+        <Route path='/dictionary'  element={<Dictionary />} />
+        
+
       </Route>
       <Route path='/login' element={<Login />} />
     </Route>

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

@@ -1,3 +1,6 @@
+/**
+ * @module Services
+ */
 import Axios from 'axios';
 import qs from 'qs';
 const axios = Axios.create();
@@ -82,8 +85,23 @@ axios.interceptors.response.use(
 
 
 
+/**
+ * @typedef RequestOptions
+ * @description 发送请求的扩展信息
+ * @property {number|boolean} ttl=false - 接口缓存周期，开启后默认为2秒，ttl单位为毫秒
+ * @property {string|boolean} noInterceptors=false - 关闭拦截类型，'all'为关闭包括401、403在内的所有异常，默认情况下只拦截response.code不为0的情况
+ * 
+ */
 
 let buffer = {};
+/**
+ * @function
+ * @description 发送一个GET请求
+ * @param {string} url - 请求地址 
+ * @param {Object} param - 请求的参数
+ * @param {RequestOptions} options - 扩展参数
+ * @returns {Promise<Object>}
+ */
 export async function GET_DEFAULT(url, param, options) {
   if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
   let now = Date.now();
@@ -116,6 +134,10 @@ export async function GET_DEFAULT(url, param, options) {
   return response && response.data ? response.data : null;
 }
 
+/**
+ * @function
+ * @description 带允许cookie跨域的GET_DEFAULT
+ */
 export async function GET_DEFAULT_CROSS(url, param) {
   if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
 
@@ -129,6 +151,14 @@ export async function GET_DEFAULT_CROSS(url, param) {
   return response && response.data ? response.data : null;
 }
 
+/**
+ * @function
+ * @description 发送一个POST请求
+ * @param {string} url - 请求地址 
+ * @param {Object} param - 请求的参数
+ * @param {RequestOptions} options - 扩展参数
+ * @returns {Promise<Object>}
+ */
 export async function POST_DEFAULT(url, params, method, options) {
   let data = params;
   // if (params) params = qs.stringify(params, { arrayFormat: 'indices' });
@@ -147,7 +177,10 @@ export async function POST_DEFAULT(url, params, method, options) {
   });
   return response && response.data ? response.data : null;
 }
-
+/**
+ * @function
+ * @description 带cookie跨域的POST_DEFAULT
+ */
 export async function POST_DEFAULT_CROSS(url, params) {
   let data = {};
   // if (params) params = qs.stringify(params, { arrayFormat: 'indices' });

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

@@ -1,89 +0,0 @@
-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_admin/public/src/pages/checkLogin/index.jsx

@@ -1,13 +0,0 @@
-import React, { useEffect } from 'react';
-import ProviderApp from '@/provider/app';
-
-const Page = () => {
-  const providerApp = ProviderApp.useContainer();
-  return (
-    <div>
-      <p>当前用户态:{JSON.stringify(providerApp.user)}</p>
-    </div>
-  )
-}
-
-export default Page;

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

@@ -1,23 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
-
-import ProviderApp from '@/provider/app';
-
-import {Button} from 'antd';
-
-import styles from './index.less';
-
-const Page = () => {
-  const navigate= useNavigate();
-  const providerApp = ProviderApp.useContainer();
-  const query = useParams();
-  const [search] = useSearchParams();
-
-  return (
-    <section id="wall" className={styles.wall}>
-      <Button type='primary'>i am home {JSON.stringify(query)}</Button>
-    </section>
-  )
-}
-
-export default Page;