kn-cli 1.0.133 → 1.0.135

package/templates/template_admin_antd5/public/src/pages/antdComponents/message/index.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Button, Space, message as gMessage, App } from '@/components/antd';
+import { showModal, showDrawer } from '@/components/antd';
+import { InfoCircleFilled, InfoCircleOutlined } from '@/components/icon';
+import styles from './index.module.less';
+import showPopup,{destoryAll} from '@/components/popup';
+
+const Dialog=props=>{
+  const {close} = props;
+
+  
+  const onCancel = () => {
+    close(true);
+  };
+  return (
+    <section className={styles.wrap}>
+      <div>123</div>
+      <div onClick={onCancel}>确认</div>
+    </section>
+  )
+}
+
+
+const showPopupForm =async () =>{
+  const req = await showPopup({
+    content:<Dialog/>,
+    closeOnClick:true,
+  })
+  return req;
+}
+
+
+const MessageDemo = () => {
+  const { message } = App.useApp();
+  const [result, setResult] = useState('-');
+
+  const onCreate1= async ()=>{
+    const res = await showPopupForm();
+    setResult(res ? '确定' : '取消');
+  }
+  const onCreate3=()=>{
+    showPopupForm();
+    showPopupForm();
+    showPopupForm();
+  }
+  const onCloseAll=()=>{
+    destoryAll();
+  }
+
+  return (
+    <Space direction='horizontal' wrap>
+      <Button onClick={() => { message.info('测试', 0); }}>App.message.info</Button>
+
+      <Button onClick={() => { gMessage.info('测试', 0); }}>message.info</Button>
+
+      <Button onClick={() => {
+        showModal({
+          title: '标题',
+          content: '内容',
+          onOk: () => {
+            return new Promise(resolve => {
+              setTimeout(resolve, 5000);
+            });
+          }
+        });
+      }}>modal</Button>
+
+      <Button onClick={() => {
+        showDrawer({
+          title: '标题',
+          content: '内容',
+          onOk: () => {
+            return new Promise(resolve => {
+              setTimeout(resolve, 5000);
+            });
+          }
+        });
+      }}>showDrawer</Button>
+
+
+      <Button type="primary" onClick={onCreate1}>
+        创建一个
+      </Button>
+      <Button type="primary" onClick={onCreate3}>
+        创建3个
+      </Button>
+
+      <Button type="primary" onClick={onCloseAll}>
+        销毁所有Popup
+      </Button>
+      <div>上次操作结果：{result}</div>
+
+
+
+      <InfoCircleFilled />
+      <InfoCircleOutlined />
+      <span className={styles.text}>test css</span>
+    </Space>
+  );
+};
+
+export default MessageDemo;

package/templates/template_admin_antd5/public/src/pages/antdComponents/message/index.module.less

@@ -0,0 +1,17 @@
+@import '~@/_mixin.module.less';
+
+.text {
+  .no-select;
+}
+
+
+
+.wrap{
+  width: 400px;
+  height: 300px;
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}

package/templates/template_admin_antd5/public/src/pages/antdComponents/radio/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Radio, Space } from '@/components/antd';
+
+const RadioDemo = () => {
+  return (
+    <Space direction='horizontal' wrap>
+      <Radio.Group
+        options={[
+          { label: 'Apple', value: 'Apple' },
+          { label: 'Pear', value: 'Pear' },
+        ]}
+        optionType="button"
+        buttonStyle="solid"
+      />
+      <Radio.Group
+        options={[
+          { label: 'Apple', value: 'Apple' },
+          { label: 'Pear', value: 'Pear' },
+        ]}
+        buttonStyle="solid"
+      />
+    </Space>
+  );
+};
+
+export default RadioDemo;

package/templates/template_admin_antd5/public/src/pages/antdComponents/select/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Space } from '@/components/antd';
+import SelectUser from '@/pages/components/select/user';
+
+const SelectDemo = () => {
+  return (
+    <Space direction='horizontal' wrap>
+      <SelectUser mode={'multiple'} style={{ width: '200px' }} allowClear />
+    </Space>
+  );
+};
+
+export default SelectDemo;

package/templates/template_admin_antd5/public/src/pages/antdComponents/switch/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch, Space } from '@/components/antd';
+
+const SwitchDemo = () => {
+  return (
+    <Space direction='horizontal' wrap>
+      <Switch checkedChildren="开启" unCheckedChildren="关闭" />
+    </Space>
+  );
+};
+
+export default SwitchDemo;

package/templates/template_admin_antd5/public/src/pages/antdComponents/tableWithPage/index.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button, Space, Input, Form } from '@/components/antd';
+import Table, { TableTools, DefaultPagination } from '@/components/table';
+import { usePaginationWithForm } from '@/hooks';
+import { GET_LIST } from '@/services/demo';
+
+const TableWithPageDemo = () => {
+  const [form] = Form.useForm();
+
+  const page = usePaginationWithForm({
+    afterService: [(req) => {
+      const { records, current, pages, size, total } = req.data;
+      return {
+        code: 0,
+        data: records,
+        page: { current, total, pageSize: size, cursor: '' }
+      };
+    }],
+    beforeService: [],
+    service: GET_LIST,
+    pagination: DefaultPagination(),
+    form
+  });
+
+  const onSearch = () => {
+    page.update({ pagination: { current: 1 }, clear: true });
+  };
+
+  return (
+    <>
+      <Space direction='horizontal' wrap>
+        <Form form={form} layout='inline'>
+          <Form.Item name='id'><Input /></Form.Item>
+          <Form.Item><Button onClick={onSearch}>查询</Button></Form.Item>
+        </Form>
+      </Space>
+      <div style={{ width: '1024px', height: '700px', overflow: 'hidden' }}>
+        <Table
+          page={page}
+          pagination={{
+            onChange: (current, pageSize) => {
+              page.update({ pagination: { current, pageSize }, clear: true });
+            }
+          }}
+          heightMode={TableTools.heightMode.inWrap}
+          columns={[
+            {
+              title: <div>
+                <p>id</p>
+                <p>fsajfkl</p>
+                <p>fsajfkl</p>
+              </div>,
+              dataIndex: 'id'
+            },
+            {
+              title: 'name',
+              dataIndex: 'name'
+            }
+          ]}
+          expandable={{
+            expandRowByClick: true,
+            expandIcon: TableTools.expandIcon
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TableWithPageDemo;

package/templates/template_admin_antd5/public/src/pages/antdComponents/text/index.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Tooltip } from '@/components/antd';
+import { Button, Space } from '@/components/antd';
+
+const Demo = () => {
+  const [text,setText] = useState(()=>{
+    let req='';
+    for(let i=0;i<1000;i++){
+      req+=`${i};`
+    }
+    return req;
+  })
+
+  return (
+    <Space direction='horizontal' wrap>
+      <Tooltip title={text}>详情</Tooltip>
+    </Space>
+  );
+};
+
+export default Demo;

package/templates/template_admin_antd5/public/src/pages/auth/user/dialog/index.jsx

@@ -1,96 +1,69 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
 // @ts-ignore
-import { Modal, Form, Input, message,Spin } from '@/components/antd';
-import Popup from '@/components/popup';
-import { UPDATE,GET_DETAIL } from '@/services/demo';
+import { showModal, Form, Input, message, Spin } from '@/components/antd';
+import { UPDATE, GET_DETAIL } from '@/services/demo';
 import rule from '@/utils/rule';
-import { ReactRender } from '@/components/react';
 
 
-
-
-const DialogEdit = (props) => {
-  const { destory, id=null } = props;
+const DialogEdit = React.forwardRef((props, ref) => {
+  const { id = null } = props;
   const [form] = Form.useForm();
-  const [record,setRecord]=useState(null)
+  const [record, setRecord] = useState(null);
 
-  const init=async ()=>{
-    if(id){
-      const req= await GET_DETAIL({id})
-      if(req?.code==0 && req?.data){
-        let item= req.data;
-        setRecord(item);
+  useImperativeHandle(ref, () => ({ onOk }));
+
+  const init = async () => {
+    if (id) {
+      const req = await GET_DETAIL({ id });
+      if (req?.code == 0 && req?.data) {
+        setRecord(req.data);
         return;
       }
     }
-    setRecord({})
-  }
-  const onOk = async () => {
-    try {
-      const values = await form.validateFields();
-      const params = {
-        ...values,
-      };
-      let res = null;
-      if (id) {
-        res = await UPDATE({id,...params});
-      } 
-      if (res?.code === 0) {
-        message.success('成功');
-        destory && destory(true);
-      }
-    } catch (errorInfo) {
-      console.log('Failed:', errorInfo);
-    }
+    setRecord({});
   };
 
-  const onCancel = () => {
-    form.resetFields();
-    destory && destory(false);
+  const onOk = async () => {
+    // const values = await form.validateFields();
+    // const res = await UPDATE({ id, ...values });
+    // if (res?.code === 0) {
+    //   message.success('成功');
+    // } else {
+    //   throw new Error('保存失败');
+    // }
+    message.success('成功');
+    return true;
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     init();
-  },[])
-  const isEdit=id?true:false;
-  return (
-    <Modal
-      maskClosable={false}
-      title={isEdit? '编辑用户' : '新增用户'}
-      width={600}
-      open={true}
-      onOk={onOk}
-      onCancel={onCancel}
-    >
-      {
-        !record?
-        <Spin/>:
-        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} form={form} initialValues={record||{}}>
-          <Form.Item
-            label="姓名"
-            name="userId"
-            ruler={rule.INPUT}
-            required
-          >
-            <Input placeholder="请输入" disabled={isEdit}/>
-          </Form.Item>
-          <Form.Item label="昵称" name="bindNickname" ruler={rule.INPUT}>
-            <Input placeholder="请输入" />
-          </Form.Item>
+  }, []);
 
-        </Form>
-      }
-    </Modal>
+  if (!record) return <Spin />;
+
+  return (
+    <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} form={form} initialValues={record}>
+      <Form.Item label="姓名" name="userId" ruler={rule.INPUT} required>
+        <Input placeholder="请输入" disabled={!!id} />
+      </Form.Item>
+      <Form.Item label="昵称" name="bindNickname" ruler={rule.INPUT}>
+        <Input placeholder="请输入" />
+      </Form.Item>
+    </Form>
   );
-};
+});
+
 
 const ShowEdit = (props = {}) => {
-  return new Promise((resolve) => {
-    let popup = Popup(resolve);
-    ReactRender(
-      <DialogEdit destory={popup.destory} {...props} />,
-      popup.dom
-    );
+  const { id = null } = props;
+
+  return showModal({
+    title: id ? '编辑用户' : '新增用户',
+    width: 600,
+    maskClosable: false,
+    content: <DialogEdit {...props} />,
+    hideCancel:true,
   });
 };
+
 export default ShowEdit;

package/templates/template_admin_antd5/public/src/pages/auth/user/index.jsx

@@ -4,9 +4,7 @@ import {
   Form,
   Button,
   Input,
-  Select,
   Tabs,
-  Badge
   // @ts-ignore
 } from '@/components/antd';
 // @ts-ignore
@@ -15,13 +13,13 @@ import {useNavigate,} from 'react-router-dom';
 import {PlusOutlined} from '@ant-design/icons';
 
 import ruler from '@/utils/rule';
-import {px2rem} from '@/utils';
 import {Layout,SearchBar,TitleBar,Content,Panel} from '@/pages/components/layout'
-import Table from '@/components/table';
+import Table,{TableTools} from '@/components/table';
 import { usePaginationWithForm } from '@/hooks';
 import Link from '@/components/link';
-import {FormatTableService,FormatGetRequest} from '@/services'
+import {FormatGetRequest} from '@/services'
 import {
+  FormatDemoTableService,
   GET_LIST,
 } from '@/services/demo';
 
@@ -35,7 +33,7 @@ const AuthUser = () => {
   const [form] = Form.useForm();
   
   const page = usePaginationWithForm({
-    afterService: [FormatTableService],
+    afterService: [FormatDemoTableService],
     beforeService:[FormatGetRequest],
     service: GET_LIST,
     pagination: { pageSize: 15 },
@@ -56,43 +54,39 @@ const AuthUser = () => {
   }
   const onEdit=async (record)=>{
     const req = await ShowEdit({id:record.id})
+    console.log('onEdit :',req)
   }
 
   const columnsInternalUsers = [
     {
       title: '姓名',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={88}>{text}</Table.Column>)
-    },
-    {
-      title: '用户名',
-      dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={80}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={60} maxWidth={88}>{text}</TableTools.Column>)
     },
     {
       title: '职位',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={94}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={60} maxWidth={94}>{text}</TableTools.Column>)
     },
     {
       title: '所在部门',
       dataIndex: 'longName',
-      render:(text,record)=>(<Table.Column minWidth={100} maxWidth={224}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={100} maxWidth={224}>{text}</TableTools.Column>)
     },
     {
       title: '角色',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={111}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={80} maxWidth={111}>{text}</TableTools.Column>)
     },
     {
       title: '模块权限(补充)',
       dataIndex: 'longName',
-      render:(text,record)=>(<Table.Column minWidth={120} maxWidth={187}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={120} maxWidth={187}>{text}</TableTools.Column>)
     },
     {
       title: '产品权限(补充)',
       dataIndex: 'longName',
-      render:(text,record)=>(<Table.Column minWidth={129} maxWidth={211}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={129} maxWidth={211}>{text}</TableTools.Column>)
     },
    
     {
@@ -112,33 +106,33 @@ const AuthUser = () => {
       title: '姓名',
       dataIndex: 'name',
       fixed:'left',
-      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={88} item={record}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={60} maxWidth={88} item={record}>{text}</TableTools.Column>)
 
     },
     {
       title: '公司',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={224}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={80} maxWidth={224}>{text}</TableTools.Column>)
     },
     {
       title: '所在部门',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={224}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={80} maxWidth={224}>{text}</TableTools.Column>)
     },
     {
       title: '角色',
       dataIndex: 'name',
-      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={110}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={60} maxWidth={110}>{text}</TableTools.Column>)
     },
     {
       title: '模块权限(补充)',
       dataIndex: 'longName',
-      render:(text,record)=>(<Table.Column minWidth={120} maxWidth={187}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={120} maxWidth={187}>{text}</TableTools.Column>)
     },
     {
       title: '产品权限(补充)',
       dataIndex: 'longName',
-      render:(text,record)=>(<Table.Column minWidth={129} maxWidth={211}>{text}</Table.Column>)
+      render:(text,record)=>(<TableTools.Column minWidth={129} maxWidth={211}>{text}</TableTools.Column>)
     },
     
     {

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LazyLoad = () => {
+  return (
+    <div>
+      <p>懒加载成功（延迟 5 秒）</p>
+    </div>
+  );
+};
+
+export default LazyLoad;

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

@@ -14,6 +14,8 @@ import {jumpUrl} from '@/utils';
 import imgSlogan from '@/assets/images/login/slogan.png';
 // @ts-ignore
 import imgLogo2 from '@/assets/images/login/logo.png';
+// @ts-ignore
+import imgBg from '@/assets/images/login/bg.png';
 
 
 const Page = () => {
@@ -87,16 +89,19 @@ const Page = () => {
 
   return (
     <section className={styles.body}>
+      <section className={styles.leftWrap}>
+        <img src={imgBg}/>
+      </section>
       {/* 左上角slogan */}
-      <section className={styles.sloganWrap}>
+      {/* <section className={styles.sloganWrap}>
         <img src={imgSlogan} className={styles.slogan} />
-      </section>
+      </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>
+          <p className={styles.title}>欢迎登录</p>
           {
             state=='login'?<Tabs defaultActiveKey='1' items={tabs} onChange={onTab} />
             :<p className={styles.logining}>登录中...</p>

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

@@ -18,10 +18,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
-  background-image: url('~@/assets/images/login/bg.png');
-  background-size: cover;
-
+  // flex-direction: column;
+  // background-image: url('~@/assets/images/login/bg.png');
+  // background-size: cover;
+}
+.leftWrap{
+  height:100%;
+  flex: 1;
+  img{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 }
 .bg2{
   width: 100%;
@@ -38,9 +46,9 @@
 
 
 .loginWrap{
-  position: fixed;
-  right:0;
-  top:0;
+  // position: fixed;
+  // right:0;
+  // top:0;
   height: 100%;
   max-width: 560px;
   min-width: 384px;
@@ -66,7 +74,7 @@
     .phoneLogin,
     .kssoLogin{
       width: 100%;
-      margin-top: 24px;
+      margin-top: 8px;
       min-height: 240px;
 
       .codeGroup{
@@ -76,7 +84,7 @@
         width: 100%;
         .sendCode{
           font-size: 14px;
-          color:#0974F2;
+          color:var(--theme-color-primary);
           cursor: pointer;
           .no-select;
         }
@@ -109,7 +117,7 @@
     .no-select;
   }
   .logo{
-    width: 64px;
+    width: 300px;
 
     &[data-run='true']{
       animation: rotate 2s linear infinite;