kn-cli 1.0.56 → 1.0.58

package/templates/template_oa/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_oa/public/src/hooks/useScrollTop.jsx

@@ -0,0 +1,32 @@
+import { useState, useMemo, useEffect } from 'react'
+import { createContainer } from 'unstated-next'
+
+const useActivity = () => {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerNode, setContainerNode] = useState();
+  const [clientHeight, setClientHeight] = useState(0);
+  const [titleRefs, setTitleRefs] = useState({});
+
+  useEffect(() => {
+    const node = document.getElementById('main-view');
+    setContainerNode(node);
+    setClientHeight(node.clientHeight)
+    node.addEventListener('scroll', (e) => {
+      setScrollTop(e.target.scrollTop);
+    })
+  }, [])
+
+  const action = useMemo(() => {
+    return {
+      scrollTop,
+      clientHeight,
+      titleRefs,
+      setTitleRefs,
+      containerNode,
+      setContainerNode,
+    }
+  }, [scrollTop, setScrollTop, clientHeight, titleRefs, setTitleRefs, containerNode, setContainerNode])
+  return action
+}
+const Activity = createContainer(useActivity);
+export default Activity;

package/templates/template_oa/public/src/hooks/useSearch.jsx

@@ -0,0 +1,137 @@
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+/**
+ * 管理表格数据的查询搜索及分页
+ */
+const useSearch=(props)=>{
+  const [search,setSearch] = useState(props.initSearch||{});
+  const [service] = useState(()=>props.service);
+  const [beforeSearch] = useState(()=>props.beforeSearch);
+  const [beforeService] = useState(()=>props.beforeService);
+  
+  const [pagination,setPagination] = useState(()=>{
+    let temp = {current:1,pageSize:10,total:0,startIdx:0,...props.pagination};
+    temp.startIdx = (temp.current-1)*temp.pageSize;
+    return temp;
+  });
+  const [updateData] = useState(()=>props.updateData);
+  const [orderInfo,setOrderInfo]=useState({});
+  
+  const onPaginationChange=async (pageInfo,sorterInfo)=>{
+    let {current,pageSize} = pagination;
+    let orderValue=orderInfo;
+    if(pageInfo){
+      current = pageInfo.current;
+      pageSize = pageInfo.pageSize;
+    }
+
+    if(sorterInfo){
+      const {field,order}= sorterInfo;
+      if(field){
+        if(order){
+          orderInfo[field] = order;
+        }else{
+          delete orderInfo[field];
+        }
+      }
+      orderValue = orderInfo;
+      setOrderInfo({...orderInfo});
+    }
+    
+
+    let searchValue = await getSearchValue();
+    refresh({
+      searchValue,
+      pageValue:{pageSize,current},
+      orderValue});
+  }
+
+  const onSorter=async (sorter)=>{
+    const {field,order}= sorter;
+    if(field){
+      if(order){
+        orderInfo[field] = order;
+      }else{
+        delete orderInfo[field];
+      }
+    }
+    setOrderInfo({...orderInfo});
+    console.log(`${JSON.stringify(orderInfo)}`);
+    refresh();
+    
+    
+    
+  }
+
+  const getSearchValue=async ()=>{
+    let value={};
+    value = search;
+
+    if(beforeSearch){
+      value = beforeSearch(value);
+    }
+    return value;
+
+  }
+  const btnSearch=async ()=>{
+    let value = await getSearchValue();
+    if(value){
+      refresh({searchValue:value});
+    }
+  }
+  const btnReset=()=>{
+    formRef.resetFields();
+  }
+
+  const refresh= async ({searchValue,pageValue,orderValue}={})=>{
+    searchValue = searchValue || search;
+    pageValue = pageValue || pagination;
+
+    // 排序暂无
+    // orderValue = orderValue || orderInfo;
+    // let order=[];
+    // if(orderValue){
+    //   Object.keys(orderValue).map(name=>{
+    //     if(orderValue[name]==='ascend'){
+    //       order.push(`${name}`);
+    //     }else if(orderValue[name]==='descend'){
+    //       order.push(`-${name}`);
+    //     }
+    //   })
+    // }
+
+    let {current,pageSize} = pageValue;
+    let params = {...searchValue,page:current,pageSize:pageSize};
+    if(beforeService)params=beforeService(params);
+    if(!params)return;
+    let ret = await service(params);
+    if(ret?.code==0){
+      const {page} = ret.data;
+      setPagination({
+        current:page.pageNum||1,
+        pageSize:page.pageSize||10,
+        total:page.total,
+        startIdx:(page.page-1)*page.pageSize
+      })
+    }
+
+    if(updateData)updateData(ret);
+    return ret;
+  }
+
+
+  return {
+    onPaginationChange,
+    pagination,
+    btnSearch,
+    search,
+    setSearch,
+    refresh,
+    btnReset,
+    onSorter
+    
+  };
+
+}
+
+export default useSearch;

package/templates/template_oa/public/src/hooks/useUpdate.jsx

@@ -0,0 +1,11 @@
+import { useState, useMemo } from 'react';
+
+const useUpdate=()=>{
+  const [count,setCount] = useState(1);
+  const action = useMemo(()=>{
+    return [count,()=>{setCount(count+1)}]
+  },[count,setCount])
+  return action;
+}
+
+export default useUpdate;

package/templates/template_oa/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_oa/public/src/mock/auth.js

@@ -0,0 +1,91 @@
+import {waitTime,REP_SUCCESS} from './utils.js';
+import qs from 'qs';
+import {GET_REQUEST} from './utils';
+
+async function GET_MENU(req,res){
+  await waitTime();
+  const MenuRoute=[
+    {
+      name:'顶部菜单',
+      url:'/video',
+      children:[
+        {
+          name:'内容管理',
+          icon:'AppstoreOutlined',
+          children:[
+            {name:'剧集管理',url:'/video'},
+            {name:'素材管理',url:'/material'},
+          ]
+
+        },
+        {
+          name:'数据管理',
+          icon:'AppstoreOutlined',
+          children:[
+            {name:'订单数据',url:'/order'},
+            {name:'用户数据',url:'/userData'},
+          ]
+        },
+        {
+          name:'用户管理',
+          icon:'UserOutlined',
+          url:'/user'
+        },
+        {
+          name:'客诉管理',
+          icon:'CustomerServiceOutlined',
+          url:'/suggest'
+        },
+        {
+          name:'权限配置',
+          icon:'CrownOutlined',
+          url:'/permission'
+        },
+      ]
+    }
+  ]
+  return {code:0,data:MenuRoute}
+}
+
+async function LOGIN(req,res){
+  await waitTime();
+  return {code:0,data:{
+    authorities:['admin'],
+    token:'token',
+    userId:'1',
+    username:'cx',
+    realName:'cx',
+    name:'cx'
+
+  }}
+}
+
+async function KSSOLOGIN(req,res){
+  await waitTime();
+  return {code:0,data:{
+    authorities:['admin'],
+    token:'token',
+    userId:'1',
+    username:'cx',
+    realName:'cx',
+    name:'cx'
+
+  }}
+}
+
+
+async function LOGOUT(req,res){
+  await waitTime();
+  return {code:0}
+}
+
+
+LOGOUT
+export default {
+  '/api/menu/nav':{get:GET_MENU},
+  '/api/login':{post:LOGIN},
+  '/api/ksso/auth':{post:KSSOLOGIN},
+  '/api/logout':{post:LOGOUT},
+
+
+}

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

@@ -0,0 +1,63 @@
+import mock from 'mockjs-async';
+
+import auth from './auth.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(auth);
+}else{
+  console.log(`=========MOCK CLOSE=======`)
+}
+/* eslint-enable */
+
+
+export default {};

package/templates/template_oa/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_oa/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_oa/public/src/pages/components/pageTitle/index.jsx

@@ -0,0 +1,13 @@
+import React, { useEffect, useState } from 'react';
+
+
+import styles from './index.less';
+const PageTitle=(props)=>{
+  return (
+    <section  className={styles.pageTitle}>
+      <div className={styles.flag} />
+      <h3 className={styles.text}>{props.children}</h3>
+    </section>
+  );
+}
+export default PageTitle;

package/templates/template_oa/public/src/pages/components/pageTitle/index.less

@@ -0,0 +1,20 @@
+
+.pageTitle{
+  display: flex;
+  align-items: center;
+  border-bottom:1px solid rgb(232, 232, 232);
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  .flag{
+    background-color: #2a96fc;
+    margin-right: 7px;
+    width: 4px;
+    height: 18px;
+    display: block;
+  }
+  .text{
+    font-size: 16px;
+    color:#555;
+    margin:0;
+  }
+}

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

@@ -0,0 +1,27 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+import ProviderApp from '@/provider/app';
+
+
+import styles from './index.less';
+
+const Page = () => {
+  const [search] = useSearchParams();
+  const providerApp = ProviderApp.useContainer();
+
+  const kssoLogin=async ()=>{
+    const req= await providerApp.kssoLogin();
+    if(!req){
+      return;
+    }
+  }
+  useEffect(kssoLogin,[])
+
+  return (
+    <section className={styles.body}>
+      登录跳转中...
+    </section>
+  )
+}
+
+export default Page;

package/templates/template_oa/public/src/pages/login/index.less

@@ -0,0 +1,44 @@
+
+.link{
+  display: block;
+}
+
+.body{
+  width: 100%;
+  height:100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+}
+.wrap{
+  padding:26px 32px;
+  background-color: #ccc;
+  .title{
+    font-size: 24px;
+    font-weight: var(--weight-Medium);
+    margin-bottom: 24px;
+  }
+ 
+  hgroup{
+    margin-bottom: 16px;
+    display: block;
+    .inputLabel{
+      display: block;
+      font-size: 13px;
+      font-weight: var(--weight-Medium);
+      color: #86909C;
+      line-height: 22px;
+    }
+  }
+  .input{
+    width: 336px;
+    border-radius: 4px;
+    border: 1px solid #E5E6EB;
+  }
+  .btn{
+    width: 336px;
+    margin-top: 18px;
+  }
+}