kn-cli 1.0.97 → 1.0.98

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

@@ -1,15 +1,20 @@
 // @ts-ignore
-import {  useState,useMemo, useEffect } from 'react';
+import {  useState,useMemo, useRef } from 'react';
 // @ts-ignore
 import {  useSearchParams,useNavigate } from 'react-router-dom';
 // @ts-ignore
 import { createContainer } from "unstated-next";
+
 // @ts-ignore
-import {useDelay} from '@/hooks/index';
+import { message } from "antd";
+
 import {setJwt,setLogout} from '@/services';
-import {GET_USER_INFO,Login,KssoLogin} from '@/services/demo';
+
 import {jumpUrl} from '@/utils';
+import { KSSO_LOGIN,Logout } from '@/services/login';
+
 
+const MODULE_NAME='ProviderApp';
 
 /**
  * @typedef AppContaniner
@@ -17,13 +22,14 @@ import {jumpUrl} from '@/utils';
  * @property {(open:boolean)=>void} setLoading - 设置加载状态
  * @property {()=>Promise<boolean>} isLogin - 检查是否已登录状态
  * @property {(username:string,password:string)=>Promise<boolean>} login - 触发登录
- * @property {object} nav - 导航栏配置
- * @property {(option:object)=>void} setNav - 设置导航栏配置
  * @property {()=>Promise} logout - 注销病退回登录界面
  * @property {(user:object)=>void} setUser - 注销病退回登录界面
+ * @property {(auths:string[])=>void} setAuths - 设置权限
  * @property {object} user - 注销病退回登录界面
  * @property {()=>Promise<boolean>} kssoLogin - 触发ksso登录
- * @property {()=>Promise} updateUserInfo - 更新用户信息
+ * @property {string[]} auths - 用户的权限列表
+ * @property {()=>void} clearLoginInfo - 清理用户登录信息
+ * 
  */
 
 
@@ -35,116 +41,116 @@ const useApp=() =>{
   const [search] = useSearchParams();
   const navigate= useNavigate();
   const [loading,setLoading] = useState(true);
-  const [nav,setNavConfig] = useState({visible:true,syncDocumentTitle:false});
   const [user,setUser] = useState(null);
-
-  const delay = useDelay();
-
+  /**
+   * @type {[string[],React.Dispatch<React.SetStateAction<string[]>>]}
+   */
+  const [auths,setAuths]= useState(null);
+ 
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef();
+  const LocalStorageName='zeus-user';
+
+  
   const isLogin=async ()=>{
-    await delay.wait(10);
     if(!user){
       try{
-        let userData = localStorage.getItem('user');
+        let userData = localStorage.getItem(LocalStorageName);
         if(userData){
           userData= JSON.parse(userData);
           if(userData){
             setUser(userData);
             // @ts-ignore
             setJwt(userData.token);
+            if(!auths){
+              await updateAuth();
+            }
             return true;
           }
+        }else{
+          navigate('/login');
         }
       }catch(ex){
-        return false;
+        navigate('/login');
       }
     }else{
+      if(!auths){
+        await updateAuth();
+      }
       return true;
     }
   }
-
+  const updateAuth=async ()=>{
+    setAuths(['auth1','auth2','auth3','auth4'])
+    return true;
+  }
+  
   const kssoLogin=async ()=>{
     let code = search.get('code');
     if(code){
-      var redirectUri = location.protocol + '//' + location.host + '/#/login';
-      //ksso auth登录
-      const req = await KssoLogin({code,redirectUri})
+      var redirect_uri = location.protocol + '//' + location.host + '/#/login';
+      const req = await KSSO_LOGIN({code,redirect_uri})
       if(req?.code==0){
         const userData = req?.data;
+        const {token}= userData;
         setUser(userData);
-        setJwt(userData.token);
-        localStorage.setItem('user',JSON.stringify(userData));
-
-        let redirect = search.get('redirect');
-        if(redirect){
-          jumpUrl(redirect,{replace:true});
-          return true;
+        setJwt(token);
+        const authReq = await updateAuth();
+        if(authReq){
+          localStorage.setItem(LocalStorageName,JSON.stringify(userData));
+          let redirect = search.get('redirect');
+          message.success('登录成功');
+          if(redirect){
+            jumpUrl(redirect,{replace:true});
+            return true;
+          }
+          navigate('/');
+        }else{
+          return false;
         }
-        navigate('/');
       }else{
+        navigate('/login');
+        setTimeout(() => {
+          jumpUrl('',{reload:true});
+        }, 1000);
         return false;
       }
     }else{
-      jumpUrl(`${location.protocol}//${location.host}/static/kssoLogin.html`,{replace:true})
-    }
-    return true;
-  }
-  const login=async (username,password)=>{
-    const req = await Login({username,password});
-    if(req?.code==0){
-      const userData = req?.data;
-      setUser(userData);
-      setJwt(userData.token);
-      localStorage.setItem('user',JSON.stringify(userData));
-      let redirect = search.get('redirect');
-      if(redirect){
-        jumpUrl(redirect,{replace:true});
-        return true;
-      }
-      navigate('/');
-    }else{
-      return false;
+      jumpUrl(`${location.protocol}//${location.host}/#/login`,{replace:true})
     }
     return true;
   }
-  const updateUserInfo= async ()=>{
-    const req= await GET_USER_INFO();
-    if(req?.code==0){
-      const userData = req.data;
-      setUser(userData);
-      localStorage.setItem('user',JSON.stringify(userData));
-    }
+  const logout=async ()=>{
+    const req = await Logout();
+    navigate('/login');
   }
+  const clearLoginInfo=()=>{
 
-  const logout=async ()=>{
+    localStorage.removeItem(LocalStorageName);
     setUser(null);
+    setAuths(null);
     setJwt('');
-    localStorage.removeItem('user');
-    navigate('/superAdminLogin');
   }
+
   setLogout(logout);
 
-  useEffect(()=>{
-    console.warn('[user]',user)
-  },[user])
 
-  const setNav=(config)=>{
-    setNavConfig({...nav,...config});
-  }
+
   const action=useMemo(()=>{
     return {
       loading,
       setLoading,
       isLogin,
-      login,
-      nav,
-      setNav,
       logout,
-      setUser,
       user,
       kssoLogin,
-      updateUserInfo
+      auths,
+      setAuths,
+      clearLoginInfo
     }
-  },[loading,nav,setNav,user,setUser,isLogin,kssoLogin,login,updateUserInfo]);
+  },[clearLoginInfo,loading,user,isLogin,kssoLogin,auths]);
 
   return action
 }

package/templates/template_admin/public/src/provider/loading.jsx

@@ -0,0 +1,47 @@
+
+// @ts-ignore
+import { useState } from 'react'
+
+// @ts-ignore
+import { createContainer } from "unstated-next"
+
+const useProviderLoading=() =>{
+
+  const [count,setCount]= useState(0);
+
+  const open=()=>{
+    setCount(v=>v+1)
+  }
+  const close=()=>{
+    setCount(v=>v-1)
+  }
+
+  return {
+    loading:count>0,
+    open,
+    close,
+    count
+  }
+}
+
+/**
+ * @typedef LoadingProviderContaniner
+ * @property {()=>void} open - 打开Loading
+ * @property {()=>void} close - 关闭Loading
+ * @property {boolean} loading - 当前loading状态
+ * @property {number} count - 当前loading计数器
+ */
+
+
+/**
+ * @typedef {object} LoadingProvider
+ * @property {function():LoadingProviderContaniner} useContainer
+ * @property {React.ComponentType<any>} Provider
+ */ 
+
+
+/**
+ * @type {LoadingProvider}
+ */
+const App = createContainer(useProviderLoading);
+export default App;

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

@@ -6,116 +6,142 @@ import { useLocation } from 'react-router-dom';
 import { createContainer } from "unstated-next"
 
 import useRouteMenu from '@/hooks/useRouteMenu';
-
+import ProviderApp from '@/provider/app';
 
 // @ts-ignore
-import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
+import styles from './menu.less';
+
+
+const MenuIcon=(props)=>{
+  
+  const [icon,setIcon]= useState('');
+  const [iconActive,setIconActive]= useState('');
+
+  const getIcon= async (iconName)=>{
+    const req = await new Promise(resolve=>{
+      let iconActive =import(`@/assets/images/nav/${iconName}-active.png`);
+      let icon = import(`@/assets/images/nav/${iconName}.png`);
+      Promise.all([icon,iconActive]).then(values=>{
+        setIcon(values[0].default);
+        setIconActive(values[1].default)
+      })
+    })
+  }
+  useEffect(()=>{
+    getIcon(props.name);
+  },[])
+
+  return (
+    <div className={styles.iconGroup}>
+      <img className={styles.icon} src={icon} />
+      <img className={styles.iconActive} src={iconActive} />
+    </div>
+  )
+
+}
 
 const MenuRoute=[
   {
-    name:'普通管理',
+    name:'仪表盘',
     url:'/',
+    children:[
+    ],
+
+  },
+  {
+    name:'发射场',
+    url:'/jet',
+    children:[],
+  },
+  {
+    name:'弹药库',
+    url:'/store',
+    children:[],
+  },
+  {
+    name:'配件仓',
+    url:'/parts',
+    children:[],
+  },
+  {
+    name:'基因库',
+    url:'/dna',
+    children:[],
+  },
+  {
+    name:'控制室',
+    url:'/auth',
+    msgCount:12,
+    primaryId:'auth',
     children:[
       {
-        name:'内容管理',
-        icon:<AppstoreOutlined />,
-        url:'/demo',
+        name: '用户',
+        icon:<MenuIcon name='icon-user'/>,
+        url: '/auth/user',
+        auth:true,
+        primaryId:'authUser',
+        msgCount:0,
         children:[
           {
-            name:'内容管理1',
-            url:'/demo/page1',
-            children:[
-              {hideMenu:true,name:'内容管理1详情',routeTemplate:'/demo/page1/detail/:id'},
-            ]
-          },
-          {
-            name:'内容管理2',
-            url:'/demo/page2',
-            msgCount:5,
-            children:[
-              {hideMenu:true,name:'内容管理2详情',routeTemplate:'/demo/page2/detail/:id'},
-            ]
-          },
+            name:'新建用户',
+            url:'/auth/user/create',
+            hideMenu:true
+          }
         ]
       },
       {
-        name:'数据管理',
-        icon:<AppstoreOutlined />,
-        url:'/demo/data',
-        children:[
-          {
-            name:'数据管理1',
-            url:'/demo/data/page1',
-            children:[
-              {hideMenu:true,name:'数据管理1详情',routeTemplate:'/demo/data/page1/detail/:id'},
-            ]
-          },
-          {
-            name:'数据管理2',
-            url:'/demo/data/page2',
-            msgCount:5,
-            children:[
-              {hideMenu:true,name:'数据管理1详情',routeTemplate:'/demo/data/page2/detail/:id'},
-            ]
-          },
-        ]
+        name: '部门',
+        icon:<MenuIcon name='icon-dep'/>,
+        url: '/auth/dep',
       },
-      
-    ]
-  },
-  {
-    name:'高级管理',
-    url:'/demo/admin',
-    auth:['admin'],
-    children:[
       {
-        name:'高级管理',
-        icon:<AppstoreOutlined />,
-        url:'/demo/admin',
-        children:[
-          {
-            name:'权限管理1',
-            url:'/demo/admin/page1',
-            children:[
-              {hideMenu:true,name:'权限管理1-详情',routeTemplate:'/demo/admin/page1/detail/:id'},
-            ]
-          },
-          {
-            name:'权限管理2',
-            url:'/demo/admin/page2',
-            msgCount:5,
-            children:[
-              {hideMenu:true,name:'权限管理2-详情',routeTemplate:'/demo/admin/page2/detail/:id'},
-            ]
-          },
-        ]
+        name: '角色',
+        icon:<MenuIcon name='icon-role'/>,
+        url: '/auth/role',
+      },
+      {
+        name: '操作记录',
+        icon:<MenuIcon name='icon-log'/>,
+        url: '/auth/log',
+        msgCount:12,
+      },
+      {
+        name: '登录日志',
+        icon:<MenuIcon name='icon-loginlog'/>,
+        url: '/auth/loginLog',
       },
-    ]
+    ],
   }
 ]
 
 
+/**
+ * @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 - 重新加载渲染菜单
+ */
+
 const useProvider=() =>{
 
+  const app = ProviderApp.useContainer();
   const routeMenu = useRouteMenu();
-
   const curLocation =useLocation();
-
-  const [userAuth,setUserAuth]= useState([]);
   const [topMenu,setTopMenu]=useState([]);
   const [leftMenu,setLeftMenu]=useState([]);
-
   const [selectMenus,setSelectMenus] = useState({menus:[],keys:[]});
 
-  
   const reload = async ()=>{
     routeMenu.setSourceMap([...MenuRoute]);
   }
-  const getTopMenu=()=>{
+  const getTopMenu=(userAuth=[])=>{
     const list = routeMenu.getMenu(routeMenu.source,userAuth);
     setTopMenu(list||[]);
   }
-  const getLeftMenu=()=>{
+  const getLeftMenu=(userAuth=[])=>{
     const list = routeMenu.getMenu(routeMenu.source,userAuth);
     let menus= routeMenu.getOpenMenus(curLocation.pathname);
 
@@ -129,7 +155,6 @@ const useProvider=() =>{
     }
     setLeftMenu(subs);
   }
-
   const findMenuData=(menuKey)=>{
     return routeMenu.findMenuData(menuKey);
 
@@ -138,7 +163,6 @@ const useProvider=() =>{
     routeMenu.setMenuConfig(params);
   }
 
-
   useEffect(()=>{
     let menus= routeMenu.getOpenMenus(curLocation.pathname);
     let keys=menus.map(item=>item.key);
@@ -146,14 +170,24 @@ const useProvider=() =>{
   },[curLocation,routeMenu.source]);
 
   useEffect(()=>{
-    getTopMenu();
-    getLeftMenu();
-  },[routeMenu.source,curLocation,userAuth])
+    getTopMenu(app.auths);
+    getLeftMenu(app.auths);
+  },[routeMenu.source,curLocation,app.auths])
+
+  return {leftMenu,topMenu,reload,selectMenus,findMenuData,setMenuConfig}
+}
 
+/**
+ * @typedef {object} MenuProvider
+ * @property {function():MenuContaniner} useContainer
+ * @property {React.ComponentType<any>} Provider
+ */ 
 
 
-  return {leftMenu,topMenu,reload,selectMenus,findMenuData,setMenuConfig,setUserAuth}
-}
+/**
+ * @type {MenuProvider}
+ */
+// @ts-ignore
 const App = createContainer(useProvider);
 
 export default App;

package/templates/template_admin/public/src/provider/menu.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/public/src/route.jsx

@@ -1,43 +1,39 @@
-
-// @ts-ignore
 import React,{Suspense} from 'react';
 // @ts-ignore
 import { Routes, Route, Navigate } from 'react-router-dom';
-
-import { LayoutBasic, Layout } from '@/components/layout';
+// @ts-ignore
+import { LayoutBasic, AbsoluteLayout } from '@/components/layout';
 import PageLoading from '@/components/page/pageLoading';
+import { AuthLogin } from '@/components/auth';
 
-import Login from '@/pages/login';
-import {AuthLogin} from '@/components/auth';
-import LeftMenu from '@/components/menu';
-import TopMenu from '@/components/menu/topMenu';
-
+import LeftMenu from '@/components/leftMenu';
+import TopMenu from '@/components/topMenu';
 import ProviderMenu from '@/provider/menu';
 
-const delayLoader=(loader)=>{
-  return new Promise(resolve=>{
-    loader.then(req=>{
-      setTimeout(()=>{
-        resolve(req);
-      },5000)
-    })
-  })
-}
+import Login from '@/pages/login';
+import Home from '@/pages/home';
 
+const AuthUser = React.lazy(() => import('@/pages/auth/user'));
+const AuthUserCreate = React.lazy(() => import('@/pages/auth/user/create'));
 
-const Page1 = React.lazy(()=>import('@/pages/demo/page1'));
-const Page1Detail = React.lazy(()=>import('@/pages/demo/detail'));
 
-import SuperAdminLogin from '@/pages/superAdminLogin';
+
+import Test from '@/pages/test';
 
 
 
 
 export const RouteList = (
   <Routes>
-    <Route path='/' element={<Suspense fallback={<PageLoading />}><Layout /></Suspense>}>
+    <Route path='/' element={
+      <Suspense fallback={<PageLoading />}>
+        <AbsoluteLayout />
+      </Suspense>}
+    >
       <Route path='login' element={<Login />} />
-      <Route path='superAdminLogin' element={<SuperAdminLogin />} />
+      <Route path='test' element={
+              <Test />
+        } />
 
       <Route
         path='/'
@@ -47,23 +43,28 @@ export const RouteList = (
           </ProviderMenu.Provider>
         }
       >
-        <Route path='/' element={<Navigate to="/demo/page1"></Navigate> } />
-        <Route path='/demo/page1' element={<Page1 label='内容管理1' />} />
-        <Route path='/demo/page2' element={<Page1 label='内容管理2' />} />
-        <Route path='/demo/page1/detail/:id' element={<Page1Detail />} />
-        <Route path='/demo/page2/detail/:id' element={<Page1Detail />} />
-
-
-        <Route path='/demo/data/page1' element={<Page1 label='数据管理1' />} />
-        <Route path='/demo/data/page2' element={<Page1 label='数据管理2' />} />
-        <Route path='/demo/data/page1/detail/:id' element={<Page1Detail />} />
-        <Route path='/demo/data/page2/detail/:id' element={<Page1Detail />} />
-
-        <Route path='/demo/admin' element={<Navigate to="/demo/admin/page1"></Navigate> } />
-        <Route path='/demo/admin/page1' element={<Page1 label='权限管理1' />} />
-        <Route path='/demo/admin/page2' element={<Page1 label='权限管理2' />} />
-        <Route path='/demo/admin/page1/detail/:id' element={<Page1Detail />} />
-        <Route path='/demo/admin/page2/detail/:id' element={<Page1Detail />} />
+        <Route path='/' element={<Navigate to="/auth/user" />} />
+        <Route path='/auth' element={<Navigate to="/auth/user" />} />
+
+        {/* 控制室-用户 */}
+        <Route path='/auth/user' element={<AuthUser />} />
+        {/* 控制室-用户-新建用户 */}
+        <Route path='/auth/user/create' element={<AuthUserCreate />} />
+        {/* 控制室-角色 */}
+        <Route path='/auth/role' element={<Home />} />
+        {/* 控制室-操作记录 */}
+        <Route path='/auth/log' element={<Home />} />
+        {/* 控制室-登录日志 */}
+        <Route path='/auth/loginLog' element={<Home />} />
+
+
+        <Route path='/jet' element={<Home />} />
+        <Route path='/store' element={<Home />} />
+        <Route path='/parts' element={<Home />} />
+        <Route path='/dna' element={<Home />} />
+        <Route path='/auth/dep' element={<Home />} />
+
+
 
 
       </Route>