kn-cli 1.0.64 → 1.0.66

package/templates/template_oa_jwt/public/src/components/Layout/Basic/index.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Iframe from '@/components/IFrame';
+import PageLoading from '@/components/Page/PageLoading';
+import ProviderApp from '@/provider/app';
+import { toHref, isNoAuth } from '@/utils';
+import styles from './index.less';
+
+
+const LayoutBasic = (props) => {
+  const providerApp = ProviderApp.useContainer();
+
+
+  const onClick = () => {
+    toHref('/#/cases');
+  }
+
+  const { nav = "" } = props;
+  return (
+    <section className={styles.htmlWrap}>
+      {
+        window?.knFeishu?.IS_FEISHU()
+          ? null
+          : <>
+
+            <Iframe name='header' url={OA_MENU_HOST} className={styles.iframeHeader} />
+            <section className={styles.headerSpace}></section>
+          </>
+      }
+
+      <section className={styles.bodyWrap}>
+        <section className={styles.centerWrap}>
+          <div className={styles.crumbs}>
+            <b>当前位置：</b>
+            <span>部门</span>
+            <span style={{ margin: '0 4px' }}>{'>'}</span>
+            <a onClick={onClick}>{document.title}</a>
+          </div>
+          <section className={styles.content}>
+            {nav}
+            <section className={styles.body}>
+              <Outlet />
+            </section>
+          </section>
+        </section>
+      </section>
+
+    </section>
+  )
+}
+
+export default LayoutBasic;

package/templates/template_oa_jwt/public/src/components/Layout/Basic/index.less

@@ -0,0 +1,82 @@
+@import '~@/_variable.less';
+
+.htmlWrap{
+  width:100%;
+  height:100%;
+  overflow: hidden;
+  display: block;
+  display: flex;
+  flex-direction: column;
+}
+.bodyWrap{
+  flex:1;
+  width: 100%;
+  overflow: auto;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.centerWrap {
+  min-width: 1200px;
+  max-width: 1600px;
+  position: relative;
+  margin: 0 auto;
+  padding: 0 20px;
+  z-index:0;
+  // padding-bottom: var(--height-footer);
+
+}
+
+.iframeHeader{
+  min-width: 100%;
+  width: 1200px;
+  height: var(--height-header);
+  min-height: var(--height-header);
+  position: fixed;
+  left:0;
+  top:0;
+  z-index: 2;
+  font-size: 60px;
+  overflow: hidden;
+}
+.headerSpace{
+  width: 100%;
+  height: var(--height-header);
+}
+
+.crumbs{
+  height: 36px;
+  width: 100%;
+  max-width: 1600px;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  p,
+  span {
+    font-size: inherit;
+    color: inherit;
+  }
+  span {
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
+
+.content{
+  display: flex;
+  box-shadow: 0 0 5px 0 rgba(0,0,0,.15);
+  .body {
+    overflow: auto;
+    flex:1;
+    height:100%;
+    position: relative;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+}
+
+
+
+

package/templates/template_oa_jwt/public/src/components/Layout/CenterBody/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './index.less';
+
+
+const LayoutCenterBody=(props)=>{
+  const {className,layout='normal'} = props;
+
+  return ( 
+    <section data-layout={layout} className={ className?`${styles.contentBody} ${className}`:styles.contentBody  }>
+      {props.children}
+    </section>
+  )
+}
+export default LayoutCenterBody;

package/templates/template_oa_jwt/public/src/components/Layout/CenterBody/index.less

@@ -0,0 +1,36 @@
+@import '~@/_variable.less';
+
+
+.contentBody{
+  width:100%;
+  height:100%;
+  overflow: auto;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+
+
+  &[data-layout='xy-center']{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  &[data-layout='x-center']{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &[data-layout='y-center']{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+body[data-debug-layout]{
+  .contentBody{
+    border:1px solid red;
+  }
+}
+

package/templates/template_oa_jwt/public/src/components/Layout/FormBlock/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+
+
+
+export const FormBlockByTitle = (props) => {
+  const {className=''}=props;
+  return (
+    <section id={props.title} className={`${styles.blockByTitle} ${className}`}>
+      {props.title || props.rightBtns ? (
+        <div className={styles.titleLine}>
+          <div>{props.title ? <div className={styles.title}>{props.title}</div> : ''}</div>
+          <div className={styles.rightBtns}>{props.rightBtns}</div>
+        </div>
+      ) : (
+        <div className={styles.titleNone} />
+      )}
+      {props.children}
+    </section>
+  );
+};
+
+export default FormBlockByTitle;

package/templates/template_oa_jwt/public/src/components/Layout/FormBlock/index.less

@@ -0,0 +1,37 @@
+
+.blockByTitle {
+  border: 1px solid #eaeaea;
+  padding: 0 19px 15px;
+  background: white;
+  border-radius: 3px;
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.titleLine {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  min-width: 78px;
+  padding: 0 6px;
+  color: #fffefe;
+  border-radius: 0 0 4px 4px;
+  background-color: #2a96fc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.titleNone{
+  height: 15px;
+  width: 100%;
+}
+
+.rightBtns{
+  margin-top: 10px;
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import ProviderApp from '@/provider/app';
+
+
+import {Outlet} from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import LayoutBasic from './Basic';
+import LayoutCenterBody from './CenterBody';
+import zhCN from 'antd/lib/locale/zh_CN';
+
+import styles from './index.less';
+styles;
+
+// 站点最基础的layout，用于控制一些全局环境变量
+const Layout = (props) => {
+  return (
+    <ProviderApp.Provider>
+        <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
+          <Outlet />
+        </ConfigProvider>
+    </ProviderApp.Provider>
+  );
+};
+
+
+
+export { Layout,LayoutCenterBody,LayoutBasic };

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

@@ -0,0 +1,8 @@
+@import '~@/_variable.less';
+
+
+body[data-debug-layout]{
+  .layout .center{
+    border:4px solid #4366a0;
+  }
+}

package/templates/template_oa_jwt/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_oa_jwt/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_oa_jwt/public/src/components/Loading/index.jsx

@@ -0,0 +1,16 @@
+
+
+import React,{useMemo} from 'react';
+import styles from './index.less';
+styles;
+export const Loading=()=>{
+  return (
+    <div className='loading-container'>
+      <div className="ldio-2oha7mxue8v">
+        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Loading);

package/templates/template_oa_jwt/public/src/components/Loading/index.less

@@ -0,0 +1,96 @@
+
+:global{
+@color:#000;
+@keyframes ldio-2oha7mxue8v {
+  0% { opacity: 1 }
+  100% { opacity: 0 }
+}
+.ldio-2oha7mxue8v div:local {
+  left:0px;
+  top:0px;
+  position: absolute;
+  animation: ldio-2oha7mxue8v linear 1s infinite;
+  background: @color;
+  width: 12px;
+  height: 24px;
+  border-radius: 6px / 12px;
+  transform-origin: 40px 40px;
+}
+.ldio-2oha7mxue8v div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -0.9166666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -0.8333333333333334s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.75s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.6666666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.5833333333333334s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.5s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.4166666666666667s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.3333333333333333s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.25s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.16666666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.08333333333333333s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+  background: @color;
+}
+.loadingio-spinner-spinner-vviroavveu {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  overflow: hidden;
+  background: transparent;
+}
+.ldio-2oha7mxue8v {
+  width: 80px;
+  height: 80px;
+  position: absolute;
+  transform: translateZ(0) scale(0.5) translate(-50%, 0);
+  backface-visibility: hidden;
+  transform-origin: 0 0; /* see note above */
+  top: 200px;
+  left: 50%;
+  z-index: 99999;
+}
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+}
+.ldio-2oha7mxue8v div { box-sizing: content-box; }
+/* generated by https://loading.io/ */
+}

package/templates/template_oa_jwt/public/src/components/Nav/index.jsx

@@ -0,0 +1,184 @@
+import { Menu } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {useLoading} from '@/hooks';
+
+import styles from './index.less';
+
+const ICON_NAME={
+  'AppstoreOutlined':<AppstoreOutlined />,
+  'MailOutlined':<MailOutlined />,
+  'SettingOutlined':<SettingOutlined />,
+}
+
+
+const SUB_MENU_CONFIG=[
+  {
+    path:'/',//匹配菜单路由是/video的菜单
+    // routeTemplate:''匹配某个模板菜单的模板
+    subRoute:[
+      {
+        path:'/detail',//将video/detail这个路由匹配给菜单/video
+        // routeTemplate:''//也可以将某个路由模板匹配给某个菜单
+      }
+    ]
+  },
+]
+
+const MenuRoute=[
+  {
+    label:'内容管理',
+    icon:'AppstoreOutlined',
+    children:[
+      {label:'剧集管理',path:'/'},
+    ]
+  },
+  {
+    label:'用户中心',
+    icon:'CustomerServiceOutlined',
+    path:'/my'
+  },
+]
+
+const LeftMenu=(props)=>{
+
+  const loader = useLoading();
+  const [menus,setMenus] = useState([]);
+  const [openKeys,setOpenKeys] = useState([]);
+  const [selectedKeys,setSelectKeys] = useState([]);
+  const curRoute = useLocation();
+  const nav = useNavigate();
+
+  const MENU_KEY_COUNTER=useRef(1);
+  const MENU_KEY=useRef({});
+
+  const getSubConfig=(menu)=>{
+    const {path,routeTemplate}= menu;
+    for(let i=0;i<SUB_MENU_CONFIG.length;i++){
+      let sub= SUB_MENU_CONFIG[i];
+      if(routeTemplate&&sub.routeTemplate&&routeTemplate==sub.routeTemplate){
+        return sub.subRoute;
+      }
+      if(path&&sub.path&&path==sub.path){
+        return sub.subRoute;
+      }
+    }
+    return null;
+  }
+
+  const translateMenu=(data={},parent)=>{
+    const {label,icon,children,path}= data;
+    let myKey = `${MENU_KEY_COUNTER.current}`
+    let item ={
+      key:myKey,
+      label,
+      source:data,
+      path,
+      routepath:parent?`${parent.key}-${myKey}`:myKey
+    } 
+    MENU_KEY.current[myKey] = item;
+    MENU_KEY_COUNTER.current++;
+    if(icon){
+      item.icon= ICON_NAME[icon];
+    }
+    let subRoute= getSubConfig(data);
+    item.source.subRoute= subRoute;
+    if(children){
+      item.children = children.map(childData=>{
+        return translateMenu(childData,item)
+      })
+    }
+    return item;
+  }
+
+
+  window.matchPath=matchPath;
+
+
+  const GET_ROUTE_MENU=(menuList)=>{
+    let groupKeys=[];
+    for(let key in menuList){
+      const menuItem = menuList[key];
+      const {path,routeTemplate,subRoute}= menuItem.source;
+      if(path){
+        let fn = matchPath;
+        let match= fn(routeTemplate||path,curRoute.pathname);
+        if(!match&&subRoute){
+          match= subRoute.some(sub=>{
+            let subMatch= fn(sub.routeTemplate||sub.path,curRoute.pathname);
+            if(subMatch){
+              return true;
+            }
+            return false;
+          })
+        }
+        if(match){
+          groupKeys = menuItem.routepath?menuItem.routepath.split('-'):'';
+        }
+      }
+    }
+    return groupKeys;
+  }
+
+  const loadMenu= async ()=>{
+    loader.setLoading(true);
+    // const req= await GET_LEFT_MENU();
+
+
+    const req= {code:0,info:MenuRoute}
+    if(req.info){
+      const menuList= req.info.map(menu=>{
+        return translateMenu(menu)
+      })
+      setMenus(menuList);
+    }else{
+      setMenus([]);
+    }
+    loader.setLoading(false);
+  }
+
+  useEffect(()=>{
+    loadMenu();
+  },[])
+
+  useEffect(()=>{
+    let groupKeys= GET_ROUTE_MENU(MENU_KEY.current);
+    setOpenKeys(groupKeys);
+    let selectKey =groupKeys[groupKeys.length-1];
+    setSelectKeys([selectKey])
+  },[curRoute,menus]);
+
+  const onClickMenuItem=(e)=>{
+    const { item, key, keyPath, domEvent } = e;
+    const menuData = MENU_KEY.current[key];
+    if(menuData.path){
+      nav(menuData.path);
+    }
+  }
+  const onOpenChange=(keys)=>{
+    setOpenKeys(keys);
+  }
+  return (
+    <section
+      className={styles.wrap}
+    >
+    
+        <Menu
+          selectedKeys={selectedKeys}
+          className={styles.nav}
+          openKeys={openKeys}
+          onOpenChange={onOpenChange}
+          onClick={onClickMenuItem}
+          mode="inline"
+          items={loader.loading?[]:menus}
+        />
+
+    </section>
+
+   
+  )
+}
+
+export default LeftMenu;
+

package/templates/template_oa_jwt/public/src/components/Nav/index.less

@@ -0,0 +1,38 @@
+@import '~@/_variable.less';
+
+.wrap{
+  display: flex;
+  background:white;
+  margin-bottom: 20px;;
+  width: 160px;
+}
+
+.nav{
+  width: 160px;
+  padding: 20px 0px;
+  height:100%;
+  overflow: hidden;
+  overflow-y: auto;
+
+}
+
+.loadingWrap{
+  padding:60px;
+  width: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.contentWrap{
+  flex:1;
+  min-width: var(--min-width);
+  padding:10px;
+  overflow: auto;
+}
+.titleBar{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e8e8e8;
+}

package/templates/template_oa_jwt/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);