kn-cli 1.0.96 → 1.0.98

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

@@ -1,8 +1,17 @@
+@import  '~@/_mixin.less';
+
+@keyframes rotate {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
 
 .link{
   display: block;
 }
-
 .body{
   width: 100%;
   height:100%;
@@ -10,35 +19,135 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  background-image: url('~@/assets/images/login/bg.png');
+  background-size: cover;
 
 }
-.wrap{
-  padding:26px 32px;
-  background-color: #ccc;
+.bg2{
+  width: 100%;
+  height:100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-image: url('~@/assets/images/login/bg.png');
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+}
+
+
+
+.loginWrap{
+  position: fixed;
+  right:0;
+  top:0;
+  height: 100%;
+  max-width: 560px;
+  min-width: 384px;
+  width:29%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position-x: right;
+  background-position-y: top;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 14px;
+  background-color: white;
+  padding:24px;
+
+  .centerWrap{
+    margin-top:-124px;
+    width: 336px;
+    display: flex;
+    flex-direction: column;
+
+    .phoneLogin,
+    .kssoLogin{
+      width: 100%;
+      margin-top: 24px;
+      min-height: 240px;
+
+      .codeGroup{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        .sendCode{
+          font-size: 14px;
+          color:#0974F2;
+          cursor: pointer;
+          .no-select;
+        }
+      }
+      .inputLabel{
+        font-weight: bold;
+        color:#000;
+        font-size: 14px;
+        .no-select;
+        .required{
+          color:#FF1111;
+          font-size: 14px;
+          margin-left:6px;
+        }
+      }
+    }
+  }
+
+  .logining{
+    font-size: 18px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+  }
   .title{
+    color:#1F2329;
     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;
-    }
+    margin-bottom:12px;
+    margin-top:32px;
+    .no-select;
   }
-  .input{
-    width: 336px;
-    border-radius: 4px;
-    border: 1px solid #E5E6EB;
+  .logo{
+    width: 64px;
+
+    &[data-run='true']{
+      animation: rotate 2s linear infinite;
+    }
   }
   .btn{
-    width: 336px;
-    margin-top: 18px;
+    width: 208px;
+    height: 56px;
+    span{
+      font-size: 20px; 
+    }
+  }
+  .errorText{
+    color:#FF1111;
+    font-size: 14px;
+  }
+  .footer{
+    position: absolute;
+    bottom: 24px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 4px;
+    p{
+      margin-bottom: 0;
+      color:#0974F2;
+      font-size: 14px;
+    }
   }
+}
+
+.sloganWrap{
+  position: fixed;
+  left:24px;
+  top:24px;
+  display: flex;
+  align-items: center;
+  .slogan{width:73px;}
 }

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;