kn-cli 1.0.130 → 1.0.133

package/templates/template_admin_antd5/public/src/pages/error/permission.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+// @ts-ignore
+import { useNavigate, } from 'react-router-dom';
+import { Layout } from '@/pages/components/layout';
+// @ts-ignore
+import { Button } from "@/components/antd";
+// @ts-ignore
+import { px2rem } from '@/utils';
+// @ts-ignore
+import styles from './permission.module.less';
+
+/**
+ * permission页面
+ * @param {object} props 
+ * @param {string} props.img - 图片
+ * @param {string} props.title - 标题头
+ * @param {boolean} [props.backButton] - 返回按钮
+ * @returns {JSX.Element}
+ */
+
+const Permission = (props) => {
+  const { img, backButton = false, title } = props;
+  const navigator = useNavigate();
+
+  const onBack = () => navigator('/')
+
+  return (
+    <Layout>
+      <div className={styles.content}>
+        <img src={img} width={480} height={480} />
+        <div className={styles.info}>
+          <div className={styles.title} style={{ marginBottom: backButton ? px2rem(36) : '' }}>{title}</div>
+          {backButton && <Button type='primary' onClick={onBack}>返回首页</Button>}
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default Permission;

package/templates/template_admin_antd5/public/src/pages/error/permission.module.less

@@ -0,0 +1,16 @@
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}
+.info {
+  margin-left: 80px;
+}
+.title {
+  font-weight: 600;
+  font-size: 32px;
+  color: #1F2329;
+}

package/templates/template_admin_antd5/public/src/pages/home.jsx

@@ -0,0 +1,90 @@
+import React, { useRef } from 'react';
+
+import {
+  Button,
+  Select
+  // @ts-ignore
+} from '@/components/antd';
+
+import {Layout,SearchBar,TitleBar,Content,Panel} from './components/layout'
+
+import AppProvider from '@/provider/app';
+import MenuProvider from '@/provider/menu';
+import { AuthShow } from '@/components/auth';
+
+import {useMessageStatus} from '@/dictionary';
+// @ts-ignore
+import styles from './home.module.less';
+
+const Home = () => {
+
+  const app = AppProvider.useContainer();
+  const menu = MenuProvider.useContainer();
+
+  const emMessageStatus = useMessageStatus();
+
+  /**
+   * @type {React.MutableRefObject<number>}
+   */
+  const refMenuCount= useRef(1);
+
+  const onMenuMessage=()=>{
+    /**
+     * @type {MenuConfig[]}
+     */
+    let config=[
+      {
+        primaryId:'authUser',
+        key:'msgCount',
+        value:refMenuCount.current++
+      },
+    ];
+    menu.setMenuConfig(config);
+  }
+
+  const onAuthAdd=()=>{
+    let newAuth = [...app.auths];
+    if(newAuth.includes('authA'))return;
+    newAuth.push('authA');
+    app.setAuths(newAuth)
+  }
+  const onAuthRemove=()=>{
+    let newAuth = [...app.auths];
+    if(!newAuth.includes('authA'))return;
+    let idx = newAuth.indexOf('authA');
+    newAuth.splice(idx,1);
+    app.setAuths([...newAuth])
+  }
+  return (
+    <Layout>
+      <SearchBar>
+        <TitleBar label='首页'/>
+      </SearchBar>
+
+      <Content>
+        <Panel>
+          <TitleBar label='权限' />
+
+          <section className={styles.row}>
+            <Button onClick={onMenuMessage}>增加菜单未读消息数</Button>
+            <Button onClick={onAuthAdd}>增加权限A</Button>
+            <AuthShow name='authA'><Button onClick={onAuthRemove}>去除权限A(有authA时才能看见)</Button></AuthShow>
+          </section>
+
+          <TitleBar label='字典' />
+          <section className={styles.row}>
+            <Select style={{width:'300px'}}>
+              {emMessageStatus.render()}
+            </Select>
+          </section>
+
+
+
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default Home;

package/templates/template_admin_antd5/public/src/pages/home.module.less

@@ -0,0 +1,6 @@
+
+.row{
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+}

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

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import ProviderApp from '@/provider/app';
+// @ts-ignore
+import {  useSearchParams } from 'react-router-dom';
+
+import ruler from '@/utils/rule';
+// @ts-ignore
+import {Button,Tabs,Form,Input} from '@/components/antd';
+// @ts-ignore
+import styles from './index.module.less';
+
+import {jumpUrl} from '@/utils';
+// @ts-ignore
+import imgSlogan from '@/assets/images/login/slogan.png';
+// @ts-ignore
+import imgLogo2 from '@/assets/images/login/logo.png';
+
+
+const Page = () => {
+  const providerApp = ProviderApp.useContainer();
+  const [search] = useSearchParams();
+
+  const [state,setState]=useState('')
+
+  const [form] = Form.useForm();
+  
+  const kssoLogin=async ()=>{
+    const req= await providerApp.kssoLogin();
+    if(!req){
+      setState('login');
+      return;
+    }
+  }
+  const onLogin= async ()=>{
+    let nextURL = new URL(`${location.protocol}//${location.host}/static/kssoLogin.html`);
+    jumpUrl(nextURL.toString(),{replace:true})
+  }
+
+  const tabs=[
+    {
+      key: '1',
+      label: '内部账号',
+      children: <section className={styles.kssoLogin}>
+        <Button type='primary' block onClick={onLogin} size='large'>一键登录</Button>
+      </section>,
+    },
+    {
+      key: '2',
+      label: '外部账号',
+      children: (
+        <section className={styles.phoneLogin}>
+          <Form form={form} layout="vertical" initialValues={{status:'',keyword:'',dep:'',role:''}}>
+
+            <label className={styles.inputLabel}>手机号码<span className={styles.required}>*</span></label>
+
+            <Form.Item name={'phone'} rules={ruler.PHONE}>
+              <Input size='large' placeholder="请输入"/>
+            </Form.Item>
+
+            <hgroup className={styles.codeGroup}>
+              <label className={styles.inputLabel}>
+                验证码<span className={styles.required}>*</span>
+              </label>
+              <label className={styles.sendCode}>发送验证码</label>
+            </hgroup>
+            <Form.Item name={'code'} rules={ruler.INPUT}>
+              <Input size='large' placeholder="请输入验证码"/>
+            </Form.Item>
+            <Button type='primary' block onClick={onLogin} size='large'>登录</Button>
+          </Form>
+        </section>
+      ),
+
+    },
+  ];
+  const onTab=()=>{}
+
+  useEffect(()=>{
+    let code = search.get('code');
+    if(code){
+      kssoLogin();
+    }else{
+      providerApp.clearLoginInfo();
+      setState('login')
+    }
+  },[])
+
+  return (
+    <section className={styles.body}>
+      {/* 左上角slogan */}
+      <section className={styles.sloganWrap}>
+        <img src={imgSlogan} className={styles.slogan} />
+      </section>
+      
+      <section className={styles.loginWrap}>
+        
+        <div className={styles.centerWrap}>
+          <img src={imgLogo2} className={styles.logo} data-run={state!='login'} />
+          <p className={styles.title}>欢迎登录<b>宙斯系统</b></p>
+          {
+            state=='login'?<Tabs defaultActiveKey='1' items={tabs} onChange={onTab} />
+            :<p className={styles.logining}>登录中...</p>
+          }
+          
+
+        </div>
+      </section>
+
+    </section>
+  )
+}
+
+export default Page;

package/templates/template_admin_antd5/public/src/pages/login/index.module.less

@@ -0,0 +1,153 @@
+@import  '~@/_mixin.module.less';
+
+@keyframes rotate {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
+
+.link{
+  display: block;
+}
+.body{
+  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: cover;
+
+}
+.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;
+    margin-bottom:12px;
+    margin-top:32px;
+    .no-select;
+  }
+  .logo{
+    width: 64px;
+
+    &[data-run='true']{
+      animation: rotate 2s linear infinite;
+    }
+  }
+  .btn{
+    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_antd5/public/src/pages/pageTemplate.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Layout,SearchBar,TitleBar,Content,Panel} from './components/layout'
+
+// @ts-ignore
+import styles from './home.module.less';
+
+const PageTemplate = (props) => {
+  const {name} = props;
+
+  return (
+    <Layout>
+      <SearchBar>
+        <TitleBar label={name}/>
+      </SearchBar>
+
+      <Content>
+        <Panel>
+          <section className={styles.row}>
+          </section>
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default PageTemplate;

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

@@ -0,0 +1,201 @@
+// @ts-ignore
+import {  useState,useMemo } from 'react';
+// @ts-ignore
+import {  useSearchParams } from 'react-router-dom';
+// @ts-ignore
+import { createContainer } from "unstated-next";
+
+// @ts-ignore
+import { message } from "@/components/antd";
+
+import {setJwt,setLogout} from '@/services/token';
+
+import {jumpUrl} from '@/utils';
+import { KSSO_LOGIN } from '@/services/login';
+import _Storage from '@/utils/storage';
+
+
+/**
+ * @typedef AppContaniner
+ * @property {boolean} loading - 当前是否是加载状态
+ * @property {(open:boolean)=>void} setLoading - 设置加载状态
+ * @property {()=>Promise<boolean>} isLogin - 检查是否已登录状态
+ * @property {()=>Promise} logout - 注销病退回登录界面
+ * @property {(auths:string[])=>void} setAuths - 设置权限
+ * @property {object} user - 注销病退回登录界面
+ * @property {()=>Promise<boolean>} kssoLogin - 触发ksso登录
+ * @property {string[]} auths - 用户的权限列表
+ * @property {()=>void} clearLoginInfo - 清理用户登录信息
+ * @property {(authName:string|string[])=>boolean} hasAuth - 判断有误某些权限
+ * @property {(userData:any,reload?:boolean)=>Promise<boolean>} LoginSuccess - 登录成功后的校验
+ * 
+ */
+
+
+/**
+ * 应用全局Provider
+ * @returns 
+ */
+const useApp=() =>{
+  const [search] = useSearchParams();
+  const [loading,setLoading] = useState(true);
+  const [user,setUser] = useState(null);
+  /**
+   * @type {[string[],React.Dispatch<React.SetStateAction<string[]>>]}
+   */
+  const [auths,setAuths]= useState(null);
+
+  const isLogin=async ()=>{
+    if(!user){
+      try{
+        let userData = _Storage.load(_Storage.NAME.user)
+        if(userData){
+          setUser(userData);
+          // @ts-ignore
+          setJwt(userData.token);
+          if(!auths){
+            await updateAuth();
+          }
+          return true;
+        }else{
+          jumpUrl('/#/login');
+        }
+      }catch(ex){
+        jumpUrl('/#/login');
+      }
+    }else{
+      if(!auths){
+        await updateAuth();
+      }
+      return true;
+    }
+  }
+  const updateAuth=async ()=>{
+    setAuths(['auth1','auth2','auth3','auth4'])
+    return true;
+  }
+  
+  const LoginSuccess= async (userData,reload=false)=>{
+    const {token}= userData;
+    setUser(userData);
+    setJwt(token);
+    const authReq = await updateAuth();
+    if(authReq){
+      _Storage.write(_Storage.NAME.user,userData);
+      let redirect = _Storage.load(_Storage.NAME.redirect);
+      _Storage.remove(_Storage.NAME.redirect);
+      message.success('登录成功');
+      if(reload){
+        location.reload();
+        return;
+      }
+      if(redirect){
+        jumpUrl(redirect,{replace:true});
+        return true;
+      }
+      jumpUrl('/',{replace:true});
+      return true;
+    }else{
+      return false;
+    }
+  }
+
+  const kssoLogin=async ()=>{
+    let code = search.get('code');
+    if(code){
+      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 reqLogin = await LoginSuccess(userData);
+        return reqLogin;
+      }else{
+        message.error('ksso登录验证失败,即将重新登录');
+        setTimeout(()=>{
+          jumpUrl('/#/login',{replace:true});
+        },1000)
+        return false;
+      }
+    }else{
+      jumpUrl(`${location.protocol}//${location.host}/#/login`,{replace:true})
+    }
+    return true;
+  }
+  const logout=async (changeAccount=false)=>{
+    try{
+      clearLoginInfo();
+    }finally{
+      // 防止在登录页出现401导致重定向又回login页面反复
+      if( !/[#]\/login/.test(location.href)){
+        _Storage.write(_Storage.NAME.redirect,location.href)
+      }
+      const redirect = `${location.protocol}//${location.host}/#/login`;
+      if(!changeAccount || user?.type!=1){
+        jumpUrl(redirect,{replace:true});
+        return;
+      }
+      if(changeAccount){
+        jumpUrl(`https://ksso.kingnet.com/auth/logout?redirect=${encodeURIComponent(redirect)}`,{replace:true})
+      }
+    }
+  }
+  const clearLoginInfo=()=>{
+    _Storage.remove(_Storage.NAME.user);
+    setUser(null);
+    setAuths(null);
+    setJwt('');
+  }
+
+
+  const hasAuth=(name)=>{
+    let req=false;
+    if(Array.isArray(name)){
+      for(let i=0;i<name.length;i++){
+        let authName = name[i];
+        if(auths?.includes(authName)){
+          req=true;
+          break;
+        }
+      }
+    } else if(auths?.includes(name)){
+      req=true;
+    }
+    return req;
+  }
+
+  setLogout(logout);
+
+
+
+  const action=useMemo(()=>{
+    return {
+      loading,
+      setLoading,
+      isLogin,
+      logout,
+      user,
+      kssoLogin,
+      auths,
+      setAuths,
+      clearLoginInfo,
+      LoginSuccess,
+      hasAuth,
+    }
+  },[clearLoginInfo,loading,user,isLogin,kssoLogin,auths,LoginSuccess,hasAuth]);
+
+  return action
+}
+
+
+/**
+ * @typedef {object} AppProvider
+ * @property {function():AppContaniner} useContainer
+ * @property {React.ComponentType<any>} Provider
+ */ 
+
+/**
+ * @type {AppProvider}
+ */
+const App = createContainer(useApp);
+
+export default App;

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