kn-cli 1.0.56 → 1.0.58

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

@@ -0,0 +1,40 @@
+<?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: 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="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8888888888888888s" repeatCount="indefinite"></animate>
+  </rect>
+</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(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="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5555555555555556s" repeatCount="indefinite"></animate>
+  </rect>
+</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(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="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2222222222222222s" repeatCount="indefinite"></animate>
+  </rect>
+</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(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>
+<!-- [ldio] generated by https://loading.io/ --></svg>

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import styles from './index.less';
+import { isMobile } from '@/utils';
+
+
+const Footer = (props) => {
+  const {name='footer',defaultHeight='100%'}=props;
+  const [url, setUrl] = useState('');
+  const [height,setHeight] = useState(defaultHeight)
+  useEffect(() => {
+    window.addEventListener('message',(e)=>{
+      if(e?.data?.msg==='resize'){
+        if(e.data.id==='footer'){
+          setHeight(e.data.height+2+'px');
+        }
+      }
+    })
+
+    if(isMobile()){
+      setUrl(`${MICRO_FRONT}/offcial-footer/mobileFooter.html`);
+      return;
+    }
+    setUrl(`${MICRO_FRONT}/offcial-footer/pcFooter.html`)
+  }, [])
+  return (
+    <div className={styles.footer}  style={{width:'100%',height:height}}>
+      {url&&<iframe name={name} src={url}  ></iframe>}
+    </div>
+  )
+}
+
+export default Footer;

package/templates/template_offcial/public/src/components/Footer/index.less

@@ -0,0 +1,8 @@
+.footer {
+  width: 100%;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useRef, useState } from 'react';
+import useScroll from '@/hooks/useScroll';
+import styles from './index.less';
+
+const Header = () => {
+  const scroll = useScroll();
+  const menu = [
+    { label: '模块1', type: 'block1' },
+    { label: '模块2', type: 'block2' },
+    { label: '模块3', type: 'block3' },
+    { label: '模块4', type: 'block4' },
+  ]
+  const [activeMenu,setActiveMenu]= useState('block1');
+  const refSetActiveMenu = useRef();
+  const refScroll = useRef();
+
+  refScroll.current=scroll;
+  refSetActiveMenu.current=setActiveMenu;
+  
+  const onClick = (type) => {
+    let target=document.querySelector(`#${type}`);
+    target.scrollIntoView({behavior:'smooth',block:'center'});
+  }
+  useEffect(()=>{
+    let menusDom=[];
+    menu.forEach((item,idx)=>{
+      let dom= document.querySelector(`#${item.type}`);
+      menusDom.push(dom);
+    });
+
+    scroll.addEventListener('scroll',(top)=>{
+      if(top==0){
+        refSetActiveMenu.current(menu[0].type);
+        return;
+      }
+      for(let i=menusDom.length-1;i>0;i--){
+        if( menusDom[i] ){
+          let currentTop= menusDom[i].offsetTop;
+          if(top+refScroll.current.height*0.6 >= currentTop){
+            refSetActiveMenu.current(menu[i].type);
+            return;
+          }
+        }
+      }
+      refSetActiveMenu.current(menu[0].type);
+
+    })
+
+  },[])
+  return (
+    <section className={`${styles.container} ${scroll.isScroll? styles.white : ''}`}>
+      <section className={styles.warp}>
+        <section className={styles.logo}>
+          Logo
+        </section>
+        <section className={styles.menu}>
+          {
+            menu.map(i => {
+              return <div data-active={activeMenu==i.type} onClick={() => onClick(i.type)} key={i.label}>{i.label}</div>
+            })
+          }
+        </section>
+      </section>
+    </section>
+  )
+}
+
+export default Header;

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

@@ -0,0 +1,76 @@
+@import '~@/_variable.less';
+
+.container {
+  width: 100%;
+  height: var(--height-header);
+  display: flex;
+  position: fixed;
+  top: 0;
+  z-index: var(--z-top-menu);
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  .warp{
+    display: flex;
+    justify-content: space-between;
+    max-width: var(--body-max-width);
+    width:100%;
+    height: var(--height-header);
+
+  }
+
+  .logo{
+    display: flex;
+    align-items: center;
+    width:174px;
+    height:22px;
+    cursor: pointer;
+    margin-top: 27px;
+    border:1px solid #ccc;
+  }
+
+  .menu {
+    font-size: 20px;
+    color: #ab8d71;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex:1;
+    min-width: 500px;
+
+    >div {
+      cursor: pointer;
+      transition: color 0.3s;
+      &[data-active='true']{
+        color:red;
+      }
+      &:hover {
+        font-weight: bold;
+      }
+      &:not(:last-child) {
+        margin-right: 48px;
+      }
+    }
+  }
+
+  &.white {
+    backdrop-filter: blur(4px);
+    background-color: rgba(255,255,255,.5);
+    box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);
+    .menu {
+      color: #565656;
+    }
+    border-color: #ecb9b9;
+  }
+}
+@supports (position: sticky) {
+  .container{
+    position: sticky;
+  }
+}
+
+.container,
+.menu {
+  transition: all 0.3s;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from'./index.less';
+
+const IconFont=(props)=>{
+  const {icon,className,...others} = props;
+  return (
+    <span {...others} className={`iconfont icon-${icon} ${styles.iconBox} ${className||''}`} ></span>
+  )
+}
+export default IconFont;

package/templates/template_offcial/public/src/components/IconFont/index.less

@@ -0,0 +1,5 @@
+
+
+.iconBox{
+  font-size:inherit;
+}

package/templates/template_offcial/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_offcial/public/src/components/Layout/index.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import ProviderApp from '@/provider/app';
+import {Outlet} from 'react-router-dom';
+
+import styles from './index.less';
+
+// 站点最基础的layout，用于控制一些全局环境变量
+const Layout = (props) => {    
+  return (
+    <ProviderApp.Provider>
+      <section id="appLayout" className={styles.layout} >
+        <Outlet />
+      </section>
+    </ProviderApp.Provider>
+  );
+};
+
+
+
+export { Layout };

package/templates/template_offcial/public/src/components/Layout/index.less

@@ -0,0 +1,20 @@
+@import '~@/_variable.less';
+
+.layout {
+  width: 100%;
+  height:100%;
+  left:0;
+  top:0;
+  position: absolute;
+  margin: 0 auto;
+  z-index:0;
+  background:white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow:auto;
+}
+
+
+
+

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

@@ -0,0 +1,24 @@
+import React  from 'react';
+import { openLink,jumpUrl } from '@/utils';
+import styles from './index.less';
+
+const Link=(props)=>{
+  const {children,className='',onClick,href='',target=''} = props;
+
+  const onLink=()=>{
+    if(href){
+      if(target=='_blank'){
+        openLink(href);
+        // window.open(href);
+      }else{
+        jumpUrl(href);
+      }
+      return;
+    }
+    if(onClick)onClick();
+  }
+  return (
+    <span onClick={onLink} className={`${styles.linkWrap} ${className}`}>{children}</span>
+  )
+}
+export default React.memo(Link);

package/templates/template_offcial/public/src/components/Link/index.less

@@ -0,0 +1,11 @@
+@import '~@/_variable.less';
+
+
+.linkWrap{
+  color: var(--color-primary);
+  font-size: 14px;
+  &:hover{
+    color: var(--color-primary-hover);
+    cursor: pointer;
+  }
+}

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

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

@@ -0,0 +1,29 @@
+.wrap {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+
+  width: 80px;
+  height: 80px;
+  background: rgba(0,0,0,.3);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img{
+    display: block;
+    width:80%;
+  }
+  &[data-show=false]{
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+styles;
+
+const Popup = (reslove,options) => {
+  let rootDom = document.createElement('div');
+  rootDom.className='popup-box';
+  if(options&&options.cantouch)rootDom.setAttribute('data-can-touch','1');
+  if(options&&options.transparent)rootDom.setAttribute('data-transparent','1');
+
+  let destory = (result) => {
+    ReactDOM.unmountComponentAtNode(rootDom);
+    rootDom.parentNode.removeChild(rootDom);
+    if (reslove) reslove(result);
+  };
+  document.body.appendChild(rootDom);
+  return { dom: rootDom, destory };
+};
+
+
+export default Popup;

package/templates/template_offcial/public/src/components/Popup/index.less

@@ -0,0 +1,18 @@
+
+
+:global{
+  .popup-box{
+    position: absolute;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    z-index: 99;
+    &[data-transparent]{
+      height:auto;
+    }
+    &[data-can-touch]{
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import React,{useEffect} from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+const toastList=[];
+const runNext=()=>{
+  let props = toastList[0];
+  if(props){
+    const {message,delay,resolve,position}=props;
+    let popup = Popup(resolve,{cantouch:true});
+    ReactDOM.render(
+      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
+      popup.dom
+    );
+  }
+}
+
+const Toast=props=>{
+  const {
+    message,
+    delay=1000*2,
+    destory,
+    position='top'
+  }=props;
+  useEffect(()=>{
+    setTimeout(()=>{
+      destory();
+      toastList.shift();
+      runNext();
+    },delay);
+  },[])
+  const ANITYPE={
+    'center':'animate__slideInDown',
+    'top':'animate__slideInDown',
+    'bottom':'animate__slideInUp'
+  }
+  return (
+    <section className={styles.wrap} data-position={position}>
+      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
+      </div>
+    </section>
+  )
+}
+
+
+const ShowToast=props=>{
+  if(typeof props === 'string'){
+    props = {message:props}
+  }
+  return new Promise((resolve) => {
+    props.resolve = resolve;
+    toastList.push(props);
+    if(toastList.length===1){
+      runNext();
+    }
+  });
+}
+
+export default ShowToast;

package/templates/template_offcial/public/src/components/Toast/index.less

@@ -0,0 +1,43 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index:var(--z-toast);
+  &[data-position=top]{
+    justify-content: flex-start;
+    padding-top:80px;
+  }
+  &[data-position=bottom]{
+    justify-content: flex-end;
+    padding-bottom:80px;
+  }
+  .content{
+    min-height:30px;
+    min-width:60px;
+
+    background: rgba(0,0,0,.8);
+    opacity:.8;
+    border-radius: var(--radius-default);
+    padding:var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
+
+
+  }
+}

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

@@ -0,0 +1,12 @@
+
+
+import useImageLoader from './useImageLoader';
+import usePreload from './usePreload';
+import {usePagination,usePaginationWithForm} from 'kn-hooks';
+
+export {
+  usePaginationWithForm,
+  usePagination,
+  useImageLoader,
+  usePreload,
+}

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

@@ -0,0 +1,27 @@
+import React, { useEffect,useState,useMemo } from 'react';
+
+
+
+const useImageLoader=(img_src)=>{
+  const [src,setSrc] = useState('');
+  useEffect(() => {
+    if(img_src===src)return;
+    if(!img_src)return;
+    let img = new Image();
+    img.onload = () => {
+      setSrc(img_src);
+    };
+    img.onerror = () => {
+      setSrc('');
+      console.log(`图片加载失败:${img_src}`)
+    };
+    img.src = img_src;
+  }, [img_src]);
+
+  const actions=useMemo(()=>{
+    return src;
+  },[src]);
+  return actions;
+}
+
+export default useImageLoader;

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

@@ -0,0 +1,55 @@
+import React, { useEffect,useState,useMemo,useRef,useCallback } from 'react';
+
+
+const useInToView=(props)=>{
+  const [visible,setVisible]= useState(false);
+  const [visibled,setVisibled]= useState(false);
+  const refDom= useRef();
+  const refObserver=useRef();
+
+  const destory=()=>{
+    if(refObserver.current){
+      refObserver.current=disconnect();
+      refObserver.current=null;
+    }
+  }
+
+  useEffect(()=>{
+    return ()=>{
+      destory();
+    }
+  },[refObserver]);
+
+  const watch=(dom)=>{
+    let observe;
+    destory();
+    setDom(dom);
+    if(!refDom.current)return;
+    observe = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio <= 0) {
+        setVisible(false);
+        return;
+      }
+      setVisible(true);
+      setVisibled(true);
+    });
+    observe.observe(refDom.current);
+    refObserver.current=observe;
+  }
+  const setDom=(dom)=>{
+    if(typeof dom == 'string'){
+      refDom.current = document.querySelector(dom);
+      if(!refDom.current)return;
+    }else{
+      refDom.current= dom;
+    }
+  }
+
+  return {
+    visible,
+    visibled,
+    watch
+  }
+}
+
+export default useInToView;