kn-cli 1.0.56 → 1.0.58

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

@@ -0,0 +1,66 @@
+import React, { useEffect,useState,useMemo,useRef,useCallback } from 'react';
+
+const usePreload=(files)=>{
+  const [list] = useState(files);
+  const [count,setCount] = useState(files.length);
+  const [state,setState]=useState('');
+
+  const load=useCallback((options)=>{
+    return new Promise(resolve=>{
+      if(count <= 0 ){
+        resolve(true);
+        return;
+      }
+      if(state=='loading'){
+        resolve(false);
+        return;
+      }
+      setState('loading');
+      let per = files.length;
+      list.forEach((item, idx) => {
+        if (typeof item === 'string') {
+          let img = new Image();
+          img.onload = () => {
+            console.log('加载成功')
+            per--;
+            if(per<=0){
+              setCount(0);
+              if(options?.delay){
+                setTimeout(resolve, options.delay);
+                return;
+              }
+              resolve(true);
+            }
+          };
+          img.onerror = () => {
+            per--;
+            if(per<=0){
+              setCount(0);
+              resolve(true);
+            }
+            console.log(`图片预加载失败`,item);
+          };
+          img.src = item;
+        } else {
+          console.log(`图片预加载失败异常图片`,item);
+          per--;
+          if(per<=0){
+            setCount(0);
+            resolve(true);
+          }
+        }
+      });
+    })
+    
+  },[state,setState,count]);
+
+  const actions=useMemo(()=>{
+    return {
+      count,
+      load,
+    };
+  },[count]);
+  return actions;
+}
+
+export default usePreload;

package/templates/template_offcial/public/src/hooks/useScroll.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+
+const useScroll=(targetDom='#appLayout')=>{
+
+  const [isScroll,setIsScroll] = useState(false);
+  const [listener,setListener]= useState({
+    scroll:[]
+  });
+  const [height,setHeight]= useState(0);
+
+  const refScrollDom = useRef();
+  const refSetIsScroll = useRef();
+  const refIsScroll = useRef();
+  refIsScroll.current= isScroll;
+  refSetIsScroll.current= setIsScroll;
+
+  useEffect(()=>{
+    if(typeof targetDom == 'string'){
+      refScrollDom.current = document.querySelector(targetDom);
+    }else{
+      refScrollDom.current = targetDom;
+    }
+    let dom = refScrollDom.current;
+    setHeight(dom.clientHeight)
+
+    const fn=(e)=>{
+      if(e.target.scrollTop>0){
+        if(!refIsScroll.current){
+          refSetIsScroll.current(true);
+        }
+      }else{
+        if(refIsScroll.current){
+          refSetIsScroll.current(false);
+        }
+      }
+      listener.scroll.forEach(fn=>{
+        fn(e.target.scrollTop);
+      })
+    }
+    dom.addEventListener('scroll',fn);
+    return ()=>{
+      dom.removeEventListener('scroll',fn);
+    }
+  },[]);
+
+  const addEventListener=(type,callback)=>{
+    listener[type].push(callback);
+    setListener({...listener})
+  }
+
+  const removeEventListener=(type,callback)=>{
+    let list = listener[type];
+    for(let i=0;i<list.length;i++){
+      if(list[i]==callback){
+        list.splice(i,1);
+        break;
+      }
+    }
+    setListener({...listener})
+  }
+  return {isScroll,height,addEventListener,removeEventListener}
+
+}
+
+export default useScroll;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter} from 'react-router-dom';
+// import {createRoot} from 'react-dom/client';
+// import { createHashRouter,RouterProvider } from 'react-router-dom';
+import './_antd.less';
+import './_reset.less';
+import {RouteList} from './route';
+
+
+if(MOCK){
+  let mock = require('@/mock');
+  mock;
+}
+
+window.appLog=(txt)=>{
+  console.log(txt);
+}
+
+/* eslint-disable */
+if(BUILD_ENV!='prod'){
+  let VConsole =  require('vconsole');
+  const vConsole = new VConsole();
+  setTimeout(() => {
+    vConsole.setSwitchPosition(70, 10);
+  }, 2000);
+}
+
+if(BUILD_ENV){
+  window.appLog(`代码环境类型：${BUILD_ENV}`);
+}
+if (VERSION_HASH) {
+  window.appLog(`VERSION_HASH：${VERSION_HASH}`);
+}
+window.appLog(`log init`);
+window.appLog(`${location.href}`);
+window.appLog(`ua:${navigator.userAgent}`);
+/* eslint-enable */
+
+const BasicRoute = () => {
+  return (
+  <HashRouter>
+    {RouteList}
+  </HashRouter>
+  );
+}
+
+ReactDOM.render(<BasicRoute />, document.getElementById('main-view'));
+
+// createRoot(document.getElementById('main-view')).render(<RouterProvider router={createHashRouter(router)} />);

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

@@ -0,0 +1,63 @@
+import mock from 'mockjs-async';
+
+import user from './user.js';
+function regMock(list){
+  if(list){
+    let keys = Object.keys(list)
+    keys.map(key=>{
+      let pattern;
+      if(typeof key === 'string'){
+        pattern = new RegExp(key)
+      }else{
+        pattern=key;
+      }
+      let config = list[key];
+      if(typeof config == 'function'){
+        console.log(`[mock]注册 ()${pattern}`)
+        mock.mock(pattern,(options)=>{
+          return new Promise(reslove=>{
+            if(config){
+              config(options).then(ret=>{
+                console.log(`[mock]response ()${pattern}`,options,ret)
+                reslove(ret);
+              });
+            }else{
+              reslove();
+            }
+          })
+          i
+        });
+      }else{
+        let methods = Object.keys(config);
+        methods.forEach(method=>{
+          console.log(`[mock]注册 (${method})${pattern}`)
+          mock.mock(pattern,method,(options)=>{
+            return new Promise(reslove=>{
+              if(config[method]){
+                config[method](options).then(ret=>{
+                  console.log(`[mock]response (${method})${pattern}`,options,ret)
+                  reslove(ret);
+                });
+              }else{
+                reslove();
+              }
+            })
+            i
+          });
+        })
+        
+      }
+    })
+  }
+}
+/* eslint-disable */
+if(MOCK){
+  console.log(`=========MOCK OPEN=======`)
+  regMock(user);
+}else{
+  console.log(`=========MOCK CLOSE=======`)
+}
+/* eslint-enable */
+
+
+export default {};

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

@@ -0,0 +1,70 @@
+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;
+  await waitTime();
+  return {code:0,data:{name}}
+}
+
+async function SET_USER(req,res){
+  const query = JSON.parse(req.body);
+  const {name,age}= query;
+  await waitTime();
+  
+  return {
+    "code": 0,
+    "data":{name,age}
+  }
+}
+
+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_offcial/public/src/mock/utils.js

@@ -0,0 +1,33 @@
+import qs from 'qs';
+
+export const waitTime = (time = 500) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+
+export const REP_SUCCESS=async (req,res)=>{
+    await waitTime();
+    return res.json({code:0,data:{}})
+}
+export const REP_FAIL=async (req,res)=>{
+  await waitTime();
+  return res.json({code:1,message:'mock失败',data:{}})
+}
+
+export const REP_500=async (req,res)=>{
+  await waitTime();
+  // 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_offcial/public/src/pages/index.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { isMobile } from '@/utils';
+import { useNavigate } from 'react-router-dom';
+
+
+
+
+const Home = () => {
+  console.log('🌹🌹🌹 Home 🌹🌹🌹')
+  const navigate = useNavigate();
+  useEffect(() => {
+    const flag = isMobile();
+    if(flag){
+      navigate('/mobile')
+    }else{
+      navigate('/pc');
+    }
+  }, [])
+
+  return <span>home</span>;
+}
+
+export default Home;

package/templates/template_offcial/public/src/pages/mobile/index.jsx

@@ -0,0 +1,11 @@
+
+import React, { useState, useEffect } from 'react';
+
+
+const MobileHome=()=>{
+  console.log('🌹🌹🌹 MOBILE 🌹🌹🌹')
+
+  return <span> mobile </span>
+}
+
+export default MobileHome;

package/templates/template_offcial/public/src/pages/pc/index.jsx

@@ -0,0 +1,45 @@
+
+import React, { useState, useEffect } from 'react';
+import Header from '@/components/Header';
+import styles from './index.less';
+import Footer from '@/components/Footer';
+import useInToView from '@/hooks/useInToView';
+
+const PcHome=()=>{
+  console.log('🌹🌹🌹 PC 🌹🌹🌹')
+  const intoViewBlock4= useInToView();
+  const intoViewBlock3= useInToView();
+
+  
+  useEffect(()=>{
+    console.log('pc home effect');
+    intoViewBlock4.watch('#block4');
+    intoViewBlock3.watch('#block3');
+  },[])
+
+
+  return (
+    <>
+    <Header />
+    <section className={styles.bodyWrap}>
+      
+      <section className={styles.contentWrap}>
+
+        <div className={styles.blockWrap} id='block1'>
+          模块
+        </div>
+        <div className={styles.stickyHeader}>粘顶模块</div>
+
+        <div className={styles.blockWrap} id='block2'>模块2</div>
+        <div className={`${styles.blockWrap} ${styles.animationIn}`} id='block3' data-visible={intoViewBlock3.visibled}>模块3</div>
+        <div className={`${styles.blockWrap} ${styles.animationIn}`} id='block4' data-visible={intoViewBlock4.visibled}>模块4</div>
+      </section>
+      <Footer />
+    </section>
+
+
+    </>
+  );
+}
+
+export default PcHome;

package/templates/template_offcial/public/src/pages/pc/index.less

@@ -0,0 +1,42 @@
+@import '~@/_variable.less';
+
+.bodyWrap{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fcfcfc;
+  .contentWrap{
+    background-color: #f2f2f2;
+    min-width: var(--body-min-width);
+    max-width: var(--body-max-width);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top:var(--height-header);
+    position: relative;
+  }
+}
+.blockWrap{
+  width: 1100px;
+  min-height:800px;
+  border:1px solid #ccc;
+}
+.stickyHeader{
+  width: 1100px;
+  height:60px;
+  box-shadow: 0 0 4px 0 #e89c55;
+  position: sticky;
+  top:var(--height-header);
+  backdrop-filter: blur(4px);
+}
+
+.animationIn{
+  transition: all .5s ease-in-out;
+  margin-top:100px;
+  opacity: 0;
+  &[data-visible='true']{
+    margin-top:0;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,26 @@
+import {  useState,useMemo, useEffect } from 'react';
+import {  useSearchParams,useNavigate } from 'react-router-dom';
+import { createContainer } from "unstated-next"
+
+const useApp=() =>{
+  const navigate= useNavigate();
+  const [loading,setLoading] = useState(true);
+  const [nav,setNavConfig] = useState({visible:true,syncDocumentTitle:false});
+  const setNav=(config)=>{
+    setNavConfig({...nav,...config});
+  }
+  const action=useMemo(()=>{
+    return {
+      loading,
+      setLoading,
+      nav,
+      setNav,
+    }
+  },[loading,nav,setNav]);
+
+  return action
+}
+
+const App = createContainer(useApp);
+
+export default App;

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

@@ -0,0 +1,26 @@
+import React,{Suspense} from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+import {Layout} from '@/components/Layout';
+import PageLoading from '@/components/Page/PageLoading';
+
+import Home from '@/pages/index.jsx';
+
+const Pc = React.lazy(()=>import('@/pages/pc'));
+const Mobile = React.lazy(()=>import('@/pages/mobile'));
+
+
+export const RouteList = (
+  <Routes>
+      <Route path='/' element={<Home />} />
+      <Route path='/' element={
+        <Suspense fallback={<PageLoading />}>
+          <Layout />
+        </Suspense>
+      }>
+        <Route path='/pc' element={<Pc />} />
+        <Route path='/mobile' element={<Mobile />} />
+      </Route>
+  </Routes>
+);
+