kn-cli 1.0.131 → 1.0.134

package/templates/template_admin_antd5/public/src/provider/menu.jsx

@@ -0,0 +1,161 @@
+// @ts-ignore
+import React,{  useState,useMemo, useEffect } from 'react';
+// @ts-ignore
+import { useLocation } from 'react-router-dom';
+// @ts-ignore
+import { createContainer } from "unstated-next"
+
+import useRouteMenu from '@/hooks/useRouteMenu';
+import ProviderApp from '@/provider/app';
+
+import MenuConfig from '@/menuConfig';
+import { AUTH_ROUTE_DEBUG_OPEN } from '@/config';
+
+
+/**
+ * @typedef MenuContaniner
+ * @property {RouteMenuItem[]} topMenu - 顶部导航栏的菜单列表
+ * @property {RouteMenuItem[]} leftMenu - 侧边导航栏的菜单列表
+ * @property {{menu:RouteMenuItem[],keys:string[]}} selectMenus - 当前被选中的菜单路径
+ * @property {(key:string)=>RouteMenuItem} findMenuData - 通过key查找菜单数据
+ * @property {(params:MenuConfig[])=>void} setMenuConfig - 设置菜单属性
+ * @property {()=>Promise<void>} reload - 重新加载渲染菜单
+ * @property {(pathname:string,auths:string[])=>any} getMenuNavigateTo - 获取菜单跳转匹配结果
+ * @property {(menu:RouteMenuItem,userAuth:string[])=>RouteMenuItem} findHasAuthMenu - 寻找有权限的菜单
+ * 
+ */
+
+const useProvider=() =>{
+  const MenuRoute=MenuConfig;
+  const app = ProviderApp.useContainer();
+  const routeMenu = useRouteMenu({source:[...MenuRoute.map(menu=>{menu.key=menu.name;return menu})]});
+  const curLocation =useLocation();
+  const [topMenu,setTopMenu]=useState([]);
+  const [leftMenu,setLeftMenu]=useState([]);
+  const [selectMenus,setSelectMenus] = useState({menus:[],keys:[]});
+
+  const reload = async ()=>{
+    routeMenu.setSourceMap([...MenuRoute]);
+  }
+  const getTopMenu=(userAuth=[])=>{
+    const list = routeMenu.getMenu(routeMenu.source,userAuth);
+    setTopMenu(list||[]);
+  }
+  const getLeftMenu=(userAuth=[])=>{
+    const list = routeMenu.getMenu(routeMenu.source,userAuth);
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+
+    const req= list.filter(menu=>{
+      return menus.some(openMenu=>openMenu.key==menu.key)
+    })
+    
+    let subs=[];
+    if(req && req[0]){
+      subs=req[0].children||[];
+    }
+    setLeftMenu(subs);
+  }
+  const findMenuData=(menuKey)=>{
+    return routeMenu.findMenuData(menuKey);
+
+  }
+  const setMenuConfig=(params)=>{
+    routeMenu.setMenuConfig(params);
+  }
+
+  const checkAuthMenu=(menu,userAuth=[])=>{
+    if(AUTH_ROUTE_DEBUG_OPEN)return true;
+    let auth=true;
+    if(menu.auth && Array.isArray(menu.auth)){
+      if(menu.auth.some(menuAuthName=>userAuth?.includes(menuAuthName)) == false){
+        auth=false;
+      }
+    }else{
+      return menu.auth;
+    }
+    return auth;
+  }
+  const findHasAuthMenu=(menu,userAuth=[])=>{
+    let req;
+    req = checkAuthMenu(menu,userAuth);
+    if(req){return menu;}
+    if(!menu.parent)return null;
+    let {children} = menu.parent;
+    for(let i=0;i<children.length;i++){
+      let _menu = children[i];
+      req = checkAuthMenu(_menu,userAuth);
+      if(req)return _menu;
+    }
+    if(menu.parent.noPage)return null;
+    req = findHasAuthMenu(menu.parent,userAuth);
+    return req;
+  }
+  const getHasAuthMenu=(menus,userAuth=[])=>{
+    for(let i=0;i<menus.length;i++){
+      const menu = menus[i];
+      
+      if(!menu.noPage){
+        let  req = checkAuthMenu(menu,userAuth);
+        if(req)return menu;
+      }else{
+        if(checkAuthMenu(menu,userAuth)){
+          if(menu.children){
+            let req = getHasAuthMenu(menu.children,userAuth);
+            if(req)return req;
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 检查当前路由是否有权限访问，没有权限则匹配有权限访问的页面进行跳转
+   */
+  const getMenuNavigateTo= (pathname,userAuths=[])=>{
+    // if(pathname=='/401'||pathname=='/404'||pathname=='/')return;
+    let curMenu = routeMenu.getMatchMenu(pathname)
+    // 找不到页面
+    if(!curMenu){
+      console.error('匹配不到路由，跳转404:',pathname)
+      return 404;
+    } 
+    let req = checkAuthMenu(curMenu,userAuths);
+    // 有权限，不做任何处理
+    if(req)return curMenu;
+    let findMenu = findHasAuthMenu(curMenu,userAuths)
+    if(!findMenu){
+      return 403;
+    }else{
+      return findMenu;
+    }
+  }
+
+  useEffect(()=>{
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+    let keys=menus.map(item=>item.key);
+    setSelectMenus({menus,keys});
+  },[curLocation,routeMenu.source]);
+
+  useEffect(()=>{
+    getTopMenu(app.auths);
+    getLeftMenu(app.auths);
+  },[routeMenu.source,curLocation,app.auths])
+
+  return {leftMenu,topMenu,reload,selectMenus,findMenuData,setMenuConfig,getMenuNavigateTo,findHasAuthMenu}
+}
+
+/**
+ * @typedef {object} MenuProvider
+ * @property {function():MenuContaniner} useContainer
+ * @property {React.ComponentType<any>} Provider
+ */ 
+
+
+/**
+ * @type {MenuProvider}
+ */
+// @ts-ignore
+const App = createContainer(useProvider);
+
+export default App;

package/templates/template_admin_antd5/public/src/provider/menu.module.less

@@ -0,0 +1,35 @@
+
+
+
+.iconGroup{
+  width: 17px;
+  height: 100%;
+  margin-right: 12px;
+  display: inline-flex;
+  align-items: center;
+
+  img{width: 100%;}
+  .icon{
+    display: inline-block;
+  }
+  .iconActive{
+    display: none;
+  }
+}
+
+:global(.ant-menu-title-content){
+  font-size: 14px;
+}
+:global(.ant-menu-item-selected),
+:global(.ant-menu-item-active){
+  .iconGroup .iconActive{
+    display: inline-block;
+  }
+  .iconGroup .icon{
+    display: none;
+  }
+  :global(.ant-menu-title-content){
+    font-weight: bold;
+  }
+
+}

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

@@ -0,0 +1,127 @@
+import React,{Suspense, useEffect} from 'react';
+// @ts-ignore
+import { HashRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+// @ts-ignore
+import { LayoutBasic, AbsoluteLayout } from '@/components/layout';
+import ErrorBoundary from '@/components/error';
+
+
+import PageLoading from '@/components/page/pageLoading';
+import { AuthLogin } from '@/components/auth';
+import NavCheck from '@/components/auth/navCheck';
+
+
+import LeftMenu from '@/components/leftMenu';
+import TopMenu from '@/components/topMenu';
+import ProviderMenu from '@/provider/menu';
+import Login from '@/pages/login';
+import menuConfig from './menuConfig';
+import ProviderApp from '@/provider/app';
+
+
+
+const Page403 = React.lazy(() => import('@/pages/error/403'));
+const Page404 = React.lazy(() => import('@/pages/error/404'));
+const Page503 = React.lazy(() => import('@/pages/error/503'));
+
+const AntdComponents = React.lazy(() => import('@/pages/antdComponents'));
+
+
+
+const GetIndexRoute=()=>{
+  const app = ProviderApp.useContainer();
+  const menu = ProviderMenu.useContainer();
+  const nav = useNavigate();
+
+  
+  const findRoute=()=>{
+    for(let _menu of menu.topMenu){
+      let req = menu.findHasAuthMenu(_menu,app.auths);
+      if(req){
+        debugger;
+        nav(req.url);
+        return;
+      }
+    }
+  }
+  useEffect(()=>{
+    findRoute();
+  },[])
+  return <></>
+}
+
+
+const renderMenuConfig=(menu)=>{
+  let req=[];
+  if(!menu.noAutoMatch){
+    if(menu.component){
+      console.log(`${menu.routeTemplate||menu.url}->component`)
+      req.push(
+        <Route path={menu.routeTemplate||menu.url} element={menu.component} />
+      )
+    }else{
+      if(menu.children && menu.children[0]){
+        const childMenu = menu.children[0];
+        console.log(`${menu.routeTemplate||menu.url}->${childMenu.url}`)
+        if(!childMenu.url){
+          console.error('无法自动匹配下一个可跳转路由菜单:',menu)
+        }
+        req.push(
+          <Route path={menu.routeTemplate||menu.url} element={<NavCheck to={childMenu.url} />} />
+        ) 
+      }
+    }
+  }
+  if(menu.children){
+    menu.children.forEach(child=>{
+      let menus = renderMenuConfig(child);
+      req = [...req,...menus];
+    })
+  }
+  return req;
+}
+export const RouteList = (
+  <Routes>
+    <Route path='/' element={
+      <Suspense fallback={<PageLoading />}>
+        <AbsoluteLayout />
+      </Suspense>}
+    >
+      <Route path='login' element={<Login />} />
+
+      <Route
+        path='/'
+        element={
+          <ProviderMenu.Provider>
+            <AuthLogin><LayoutBasic nav={<LeftMenu />} topMenu={<TopMenu />} /></AuthLogin>
+          </ProviderMenu.Provider>
+        }
+      >
+
+        {/* 首页 */}
+        <Route path='/' element={<GetIndexRoute />} />
+
+        {
+          menuConfig.map(menu=>renderMenuConfig(menu))
+        }
+        
+        <Route path='/antd' element={<AntdComponents/>} />
+s       <Route path='/403' element={<Page403/>} />
+        <Route path='/404' element={<Page404/>} />
+        <Route path='/503' element={<Page503/>} />
+        <Route path='*' element={<Navigate to='/404' />} />
+      </Route>
+    </Route>
+  </Routes>
+);
+
+
+
+
+export default ()=>(
+  <HashRouter>
+    <ErrorBoundary>
+    {RouteList}
+    </ErrorBoundary>
+  </HashRouter>
+)

package/templates/template_admin_antd5/public/src/services/demo.js

@@ -0,0 +1,85 @@
+
+
+import moment from 'moment';
+import {GET_DEFAULT,POST_DEFAULT,API_ROOT} from './index';
+
+const MAX_TOTAL=100;
+let UPDATE_COUNT=0;
+let CREATE_COUNT=0;
+let LIST=null;
+
+const createData=(id)=>{
+  const selectValue=['1','2','3','4','5','6']
+  return {
+    id:`${id}`,
+    img:'https://image.knscq.com/216376107732045824-%E5%B0%8F%E7%A8%8B%E5%BA%8F1024.png',
+    updateCount:UPDATE_COUNT,
+    name: `名称`+ `${id}`.padStart(2,'0'),
+    phone: `1370000`+ `${id}`.padStart(4,'0'),
+    date: moment().add(id,'minute').unix()*1000,//format('YYYY-MM-DD HH:mm:ss'),
+    dateText:'2024-01-01 12:12:12',
+    dateRange: [moment().add(id,'minute').unix()*1000,moment().add(id,'day').unix()*1000],
+    select: selectValue[id%selectValue.length],
+    longName: `这是一个很长的名称`+ `${id}`.padStart(2,'0'),
+    imgName: 'https://nebula-api.oss-cn-shanghai.aliyuncs.com/20240329/24163932-85ea-4372-9ff7-ee7c71748bcb/1711691401353-95387929.jpeg',
+    previewSrcs:[
+      'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522544778-46413274',
+      'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522539477-71557179',
+      'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522552637-65222632',
+      'http://callcneter.oss-cn-shanghai.aliyuncs.com/140_zhangfan31711522549224-81138313',
+    ],
+    videoName:'https://nebula-api.oss-cn-shanghai.aliyuncs.com/20240329/fc172bf8-1f61-4464-8d48-29b98a42fb4a/1711701991414-12827489.mp4',
+    disabled:id%2?true:false,
+    state:id%2?1:2
+  }
+};
+
+function updateListData(){
+  let list=[];
+
+  for(let i=0;i<MAX_TOTAL;i++){
+    list.push(createData(i))
+  }
+  for(let i=0;i<CREATE_COUNT;i++){
+    list.push(createData(300+i))
+  }
+  LIST=list;
+} 
+
+
+
+export function GET_LIST(params) {
+  const {current,pageSize,...querys}= params;
+  if(!LIST)updateListData();
+  const strQuerys=JSON.stringify(querys);
+  let data=[];
+  let idx=(current-1)*pageSize;
+  for(let i=0;i<pageSize;i++){
+    if(idx>=MAX_TOTAL+CREATE_COUNT)break;
+    data.push({...LIST[idx],query:strQuerys});
+    idx++;
+  }
+  let req={
+    code:0,
+    data:{
+      records:data,
+      current,
+      pages:Math.floor(MAX_TOTAL/pageSize),
+      size:pageSize,
+      total:MAX_TOTAL
+    }
+  };
+  return Promise.resolve(req);
+}
+
+export function GET_DETAIL(params) {
+  return  GET_DEFAULT(`${API_ROOT}/api/demo/detail`,params);
+}
+export function CREATE(params) {
+  return POST_DEFAULT(`${API_ROOT}/api/demo/create`,params)
+}
+
+export function UPDATE(params) {
+  return POST_DEFAULT(`${API_ROOT}/api/demo/update`,params)
+}
+

package/templates/template_admin_antd5/public/src/services/excel.js

@@ -0,0 +1,43 @@
+// @ts-ignore
+import Axios from 'axios';
+// @ts-ignore
+import qs from 'qs';
+
+import {DefaultRequest} from './interceptor'
+
+const axiosExport = Axios.create();
+axiosExport.interceptors.request.use(DefaultRequest);
+
+export async function EXPORT_EXCEL(url, param, options) {
+  if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
+
+  let response = await axiosExport({
+    method: 'GET',
+    url: param ? `${url}?${param}` : url,
+    responseType: 'blob',
+    getResponse: true,
+    ...options,
+  });
+  // @ts-ignore
+  let fileType = response.headers.get('content-type');
+  // @ts-ignore
+  const disposition = response.headers.get('content-disposition');
+
+  const blob = new Blob([response.data], { type: `${fileType},charset=UTF-8` });
+  const fileName = decodeURI(
+        disposition ? disposition.split(';')[1].split('filename=')[1] : 'download.xlsx',
+  );
+  let blobUrl = window.URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = blobUrl;
+  link.download = fileName.replace(/"/g, '');
+  document.body.appendChild(link);
+  link.style.display='none';
+  link.click();
+  link.remove();
+  setTimeout(() => window.URL.revokeObjectURL(blobUrl), 1000);
+
+  return null;
+}
+

package/templates/template_admin_antd5/public/src/services/http/index.js

@@ -0,0 +1,155 @@
+
+// @ts-ignore
+import qs from 'qs';
+
+
+export const CreateHttpTools=(axios)=>{
+  let buffer = {};
+
+  /**
+   * GET请求
+   * @param {string} url - 接口地址 
+   * @param {Object} [param] - 接口参数
+   * @param {Object} [options] - 扩展参数
+   * @returns Promise<ServicesResponse>
+   */
+  const GET_DEFAULT= async (url, param, options) => {
+    if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
+    let now = Date.now();
+
+    let bufferItem;
+    if (options?.ttl) {
+      if (buffer[url]) {
+        bufferItem = buffer[url];
+        if (bufferItem.param == param && now <= bufferItem.endTime) {
+          return bufferItem?.response?.data || null;
+        }
+      }
+    }
+    let response = await axios({
+      method: 'GET',
+      url: param ? `${url}?${param}` : url,
+      ...options,
+    });
+
+    if (options?.ttl) {
+      if (!buffer[url]) {
+        buffer[url] = {};
+      }
+      buffer[url].param = param;
+      let ttl = options.ttl === true ? 1000 * 2 : options.ttl;
+      buffer[url].endTime = Date.now() + ttl;
+      buffer[url].response = response;
+    }
+
+    return response && response.data ? response.data : null;
+  }
+
+  /**
+   * GET请求
+   * @param {string} url - 接口地址 
+   * @param {Object} [param] - 接口参数
+   * @returns Promise<ServicesResponse>
+   */
+  const GET_DEFAULT_CROSS = async (url, param) => {
+    if (param) param = qs.stringify(param, { arrayFormat: 'indices' });
+
+    let response = await axios({
+      method: 'GET',
+      xsrfCookieName: '',
+      xsrfHeaderName: '',
+      withCredentials: true,
+      url: param ? `${url}?${param}` : url,
+    });
+    return response && response.data ? response.data : null;
+  }
+
+  /**
+   * POST请求
+   * @param {string} url - 接口地址 
+   * @param {Object} [params] - 接口参数
+   * @param {Object} [options] - 特殊参数
+   * 
+   * @returns Promise<ServicesResponse>
+   */
+  const POST_DEFAULT= async (url, params, options) => {
+    let data = params;
+    // if (params) params = qs.stringify(params, { arrayFormat: 'indices' });
+    // if (typeof params === 'string') {
+    //   data = params;
+    // } else {
+    //   data = { ...params };
+    // }
+    let response = await axios({
+      method: 'POST',
+      url: url,
+      data,
+      ...options,
+      // headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    });
+    return response && response.data ? response.data : null;
+  }
+
+
+  /**
+   * POST请求
+   * @param {string} url - 接口地址 
+   * @param {Object} [params] - 接口参数
+   * 
+   * @returns Promise<ServicesResponse>
+   */
+  const POST_DEFAULT_CROSS= async (url, params) => {
+    let data = {};
+    // if (params) params = qs.stringify(params, { arrayFormat: 'indices' });
+
+    if (typeof params === 'string') {
+      data = params;
+    } else {
+      data = { ...params };
+    }
+    let response = await axios({
+      method: 'POST',
+      url: url,
+      xsrfCookieName: '',
+      xsrfHeaderName: '',
+      withCredentials: true,
+      data,
+    });
+
+    return response && response.data ? response.data : null;
+  }
+
+  const PUT_DEFAULT= async (url,params,options)=> {
+    let data=params;
+
+    let response=await axios({
+      method: 'PUT',
+      url: url,
+      data,
+      ...options,
+    });
+    return response&&response.data? response.data:null;
+  }
+  
+  const DELETE_DEFAULT = async (url,params,options) => {
+    let data=params;
+
+    let response=await axios({
+      method: 'DELETE',
+      url: url,
+      data,
+      ...options,
+    });
+    return response&&response.data? response.data:null;
+  }
+
+  return {
+    GET_DEFAULT,
+    GET_DEFAULT_CROSS,
+    POST_DEFAULT,
+    POST_DEFAULT_CROSS,
+    PUT_DEFAULT,
+    DELETE_DEFAULT
+  }
+
+}