kn-cli 1.0.97 → 1.0.99

package/templates/template_admin/public/src/pages/components/select/groupUser/index.jsx

@@ -0,0 +1,172 @@
+
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { Select } from 'antd';
+
+import {USERGROUP_ENUM} from '@/services/authAdmin/userGroup';
+import {USER_ENUM} from '@/services/authAdmin/user';
+import {formatUserName} from '@/utils/format';
+
+const GROUP_PRE_NAME='group-';
+
+/**
+ * 将组ID和用户ID，转义为 SelectGroupUser 能识别的id
+ * @param {number[]|number|string|string[]} groupId - 组ID列表
+ * @param {number[]|number|string|string[]} groupId - 用户ID列表
+ * @returns {string[]}
+ */
+const encodeValue=(groupId=[],userId=[])=>{
+  let req=[];
+  if(Array.isArray(groupId)){
+    req = groupId.map(id=>`${GROUP_PRE_NAME}${id}`);
+  }else{
+    if(groupId){
+      req.push(`${GROUP_PRE_NAME}${groupId}`)
+    }
+  }
+  if(Array.isArray(userId)){
+    let temp= userId.map(id=>`${id}`);
+    req=[...req,...temp]
+  }else{
+    if(userId){
+      req.push(`${userId}`)
+    }
+  }
+  return req;
+}
+
+/***
+ * 将 SelectGroupUser 组件的值转义回需要提交给接口的 groupId和userId
+ * @param {string[]|string} value - 当前选中的值
+ * 
+ * @returns {{groupId:string[],userId:string[]}} 
+ */
+const decodeValue=(value)=>{
+  let groupId=[];
+  let userId=[];
+
+  if(Array.isArray(value)){
+    value.forEach(v=>{
+      if(`${v}`.indexOf(GROUP_PRE_NAME)>=0){
+        groupId.push(`${v}`.split(GROUP_PRE_NAME)[1]);
+      }else{
+        userId.push(`${v}`);
+      }
+    })
+  }else{
+    if(`${value}`.indexOf(GROUP_PRE_NAME)>=0){
+      groupId.push( `${value}`.split(GROUP_PRE_NAME)[1] );
+    }
+  }
+  return {groupId,userId}
+}
+
+export const convert = {setValue:encodeValue,getValue:decodeValue};
+
+/**
+ * 选择用户组和用户的下拉选择框组件
+ * @param {object} props 
+ * @param {string|string[]} [props.value] - 值,值为组ID和用户ID混合的，组ID由group-前缀打头:['group-组id','用户id']，所以需要进行转义
+ * @param {(newValue:string[])=>void} [props.onChange] - 值 
+ * 
+ * @returns {JSX.Element}
+ */
+const SelectGroupUser=(props)=>{
+  const {value:_value,onChange=null}= props;
+
+  const [groupList,setGroupList] = useState([]);
+
+  const [value,setValue]=useState(_value||[]);
+
+  const init=async ()=>{
+    let req1 =  USERGROUP_ENUM();
+    let req2 =  USER_ENUM({status:1});
+
+    /**
+     * @type  {ServicesResponse}
+     */
+    let reqUserGroup = await req1;
+    /**
+     * @type  {ServicesResponse}
+     */
+    let reqUsers = await req2;
+    let list=[];
+    if(reqUserGroup?.code==0){
+      const groupList = reqUserGroup.data.map(group=>{
+        const {id,name:label}=group;
+        let groupId = `${GROUP_PRE_NAME}${id}`;
+        const groupInfo = {
+          label,
+          value:groupId,
+        }
+        return groupInfo;
+      });
+      list.push({
+        label:'用户组',
+        title:'group',
+        options:groupList
+      });
+    }
+    if(reqUsers?.code==0){
+      const userList = reqUsers.data.map(user=>{
+        const {id:value,name:label}=user;
+        let userName =  formatUserName(user);
+        const userInfo = {
+          label:userName,
+          value:`${value}`,
+          data:user
+        }
+        return userInfo;
+      });
+
+      list.push({
+        label:'用户',
+        title:'users',
+        options:userList
+      });
+    }
+    setGroupList(list);
+  }
+
+  const onGroupUserChange = (newValue) => {
+    console.log('onChange ', newValue);
+    if(onChange)onChange(newValue);
+  };
+
+  const onFilter=(input,option)=>{
+    if(option.options)return false;
+    const {label,value,data}= option;
+    if( `${label}`.indexOf(input) >=0 ||
+      `${value}`.indexOf(input) >=0 
+    ){
+      return true;
+    }
+    if(data && data.account.indexOf(input) >=0 ){
+      return true;
+    }
+    return false;
+  }
+
+  useEffect(()=>{
+    if(!_value){setValue([]);return;}
+    setValue(_value)
+  },[_value]);
+
+  useEffect(()=>{
+    init();
+  },[])
+
+  return (
+    <Select 
+      mode="multiple"
+      showSearch
+      value={value}
+      options={groupList}
+      onChange={onGroupUserChange}
+      filterOption={onFilter}
+      placeholder='请选择组名或用户名'
+    />
+  )
+}
+
+export default SelectGroupUser;

package/templates/template_admin/public/src/pages/components/select/user/index.jsx

@@ -0,0 +1,119 @@
+
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { Select } from 'antd';
+import {USER_ENUM} from '@/services/authAdmin/user';
+
+/**
+ * @typedef userEnumPrams
+ * @property {1|0|''} status - 1启用中的 0禁用中的 空为所有
+ */
+
+/**
+ * 用户选择框
+ * 数据来源：用户管理-所有枚举
+ * @param {object} props 
+ * @param {'single'|'multiple'} [props.mode='single'] - 单选/多选模式
+ * @param {(value:string|string[],items:object[])=>void} [props.onChange] - 选择发生变化时的回调
+ * @param {string|string[]} [props.value] - 选择发生变化时的回调
+ * @param {userEnumPrams} [props.userType={status:1}] - 选择发生变化时的回调
+ * @param {boolean} [props.withData=false] - 返回的数据是否包含原始用户数据
+ * @param {object} [props.style={}] - 样式
+ * @param {string} [props.placeholder] - 提示
+ * @param {boolean} [props.allowClear=falsse] - 一键删除按钮
+ * 
+ * 
+ * 
+ * @returns {JSX.Element}
+ */
+const SelectUser=(props)=>{
+  const {mode='single',value:_value,userType={status:1},onChange,withData=false,style:_style={},placeholder='',allowClear=false} = props;
+  const [list,setList]= useState([]);
+
+  const [value,setValue]=useState(mode=='single'?'':[]);
+
+  const init = async ()=>{
+    const req = await USER_ENUM(userType);
+    if(req?.code==0){
+      let users= req.data.map(user=>{
+        const {id,name,account,status} = user;
+        
+        // return <Select.Option value={`${id}`} data={user}>{`${name}(${account})`}</Select.Option>
+        return {
+          label:status==0?`${name}(${account})[已禁用]`:`${name}(${account})`,
+          value:`${id}`,
+          data:user
+        }
+      })
+      setList(users);
+    }else{setList([])}
+  }
+
+
+  const onUserChange=(newValue,options)=>{
+    if(onChange)onChange(newValue,options);
+  }
+
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.indexOf(input) >=0 ){
+      return true;
+    }
+    return false;
+  }
+
+  // useEffect(()=>{
+  //   if(list&&list.length>0){
+  //     if(mode=='single'){
+  //       let find = list.filter(user=>user.value == value);
+  //       if(!find || !find[0]){
+  //         if(onChange)onChange(undefined);
+  //       }
+  //     }else{
+  //       let newValue=[];
+  //       value.forEach(id=>{
+  //         let find = list.filter(user=>user.value == id);
+  //         if(find && find[0]){
+  //           newValue.push(id);
+  //         }
+  //       })
+  //       if(onChange)onChange(newValue);
+
+  //     }
+  //   }
+  // },[list])
+
+  useEffect(()=>{
+    init();
+  },[])
+  useEffect(()=>{
+    if(!_value){
+      setValue(undefined);
+      return;
+    }
+    let req;
+    if(mode=='multiple' && Array.isArray(_value)){
+      req= _value.map(id=>`${id}`)
+    }else{
+      req = `${_value}`
+    }
+    setValue(req)
+  },[_value]);
+
+  return (
+    <Select
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear?true:false}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={value}
+      options={list}
+      onChange={onUserChange}
+      filterOption={onFilter}
+    />
+  );
+}
+
+export default SelectUser;

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

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react';
+
+import {
+  Button
+  // @ts-ignore
+} from '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';
+// @ts-ignore
+import styles from './home.less';
+
+const Home = () => {
+
+  const app = AppProvider.useContainer();
+  const menu = MenuProvider.useContainer();
+
+  /**
+   * @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>
+          <section className={styles.row}>
+            <Button onClick={onMenuMessage}>增加菜单未读消息数</Button>
+
+            <Button onClick={onAuthAdd}>增加权限A</Button>
+            <AuthShow name='authA'><Button onClick={onAuthRemove}>去除权限A(有authA时才能看见)</Button></AuthShow>
+            
+
+          </section>
+
+
+
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default Home;

package/templates/template_admin/public/src/pages/home.less

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

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

@@ -1,26 +1,110 @@
-import React, { useEffect, useState, useRef } from 'react';
-// @ts-ignore
-import { useSearchParams } from 'react-router-dom';
+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 'antd';
 // @ts-ignore
 import styles from './index.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 [search] = useSearchParams();
   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;
     }
   }
-  useEffect(()=>{kssoLogin()},[])
+  const onLogin= async ()=>{
+    jumpUrl(`${location.protocol}//${location.host}/static/kssoLogin.html`,{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}>
-      ksso登录跳转中...
+      {/* 左上角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>
   )
 }

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;}
 }