kn-cli 1.0.134 → 1.0.135

package/templates/template_admin_antd5/public/src/components/topMenu/popmenu/index.jsx

@@ -0,0 +1,89 @@
+// @ts-ignore
+import React, { useState } from 'react';
+
+
+// @ts-ignore
+import styles from './index.module.less';
+import { useRef } from 'react';
+import { forwardRef } from 'react';
+import { useImperativeHandle } from 'react';
+
+
+const Popmenu=(props,ref)=>{
+  const {
+    activeKeys=[]
+  } = props;
+
+  /**
+   * @type {[object[],React.Dispatch<object[]>]}
+   */
+  const [menu,setMenu] = useState();
+  const [position,setPosition] = useState({x:0,y:0});
+
+  /**
+   * @type {React.MutableRefObject<object>}
+   */
+  const refSelf = useRef({timer:null});
+
+  refSelf.current.setMenu=setMenu;
+  const onMouseEnter=(_menu,_position)=>{
+    // console.log('mouse enter');
+    if(_menu){
+      setMenu(_menu);
+      setPosition(_position)
+    }
+
+    if(refSelf.current.timer){
+      // console.log('mouse enter clear timer');
+      window.clearTimeout(refSelf.current.timer);
+      refSelf.current.timer=null;
+    }
+
+  }
+  const onMouseLeave=()=>{
+    // console.log('mouse leave');
+    if(refSelf.current.timer){
+      window.clearTimeout(refSelf.current.timer)
+    }
+    refSelf.current.timer = setTimeout(()=>{
+    // console.log('mouse leave complete');
+      refSelf.current.setMenu(null)
+    },400)
+  }
+
+  useImperativeHandle(ref, () => ({
+    onMouseLeave,
+    onMouseEnter
+  }));
+
+  if(!menu)return <></>
+  
+  return (
+    <section className={styles.wrap} style={{left:`${position.x}px`,top:`${position.y}px`}} onMouseEnter={onMouseEnter.bind(this,null,null)} onMouseLeave={onMouseLeave}>
+      {
+        menu.map((group,idx)=>{
+          const hasChild = group.children?.length>0;
+          return (
+            <div className={styles.groupWrap} key={idx}>
+              <div className={styles.parent}>
+                <a href={hasChild?'javascript:void(0);':'/#'+group.url} className={styles.menu} data-no-child={!hasChild} data-checked={activeKeys.includes(group.key)}>{group.name}</a>
+              </div>
+              {
+                hasChild&&(
+                  <div className={styles.childs}>
+                    {group.children?.map((child,idx2)=>{
+                      return <a key={`${idx}-${idx2}`} href={'/#'+child.url} data-no-child='true' className={styles.menu} data-checked={activeKeys.includes(child.key)}>{child.name}</a>
+                    })}
+                  </div>
+                )
+              }
+              
+            </div>
+          )
+        })
+      }
+    </section>
+  )
+
+}
+export default forwardRef(Popmenu);

package/templates/template_admin_antd5/public/src/components/topMenu/popmenu/index.module.less

@@ -0,0 +1,76 @@
+@import '~@/_variable.module.less';
+@import '~@/_mixin.module.less';
+
+.wrap{
+  position: fixed;
+  z-index: var(--z-top-menu-pop);
+  background: #FFFFFF;
+  box-shadow: 1px 2px 6px 0px rgba(31,35,41,0.1);
+  border: 1px solid rgba(0,0,0,0.08);
+
+  border-radius: 8px;
+  padding:12px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  max-height: 85%;
+  overflow-y: auto;
+  padding-left: 10px;
+  .no-select;
+
+  .groupWrap{
+    max-width: 652px;
+    display: flex;
+    flex-direction: column;
+    column-gap: 8px;
+    row-gap: 8px;
+    .parent{
+      .menu{
+
+      }
+    }
+    .childs{
+      display: flex;
+      flex-wrap: wrap;
+      grid-gap: 8px;
+      padding-bottom: 8px;
+    }
+    &:not(:last-child){
+      .childs{
+        border-bottom: 1px dashed #DEE0E3;
+      }
+    }
+    &:not(:first-child){
+      padding-top: 8px;
+    }
+  }
+
+
+  .menu{
+    width: 124px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    padding:8px;
+    font-size: 14px;
+    color: #373C43;
+    font-weight: 400;
+  }
+  .menu[data-no-child='true'][data-checked='true']{
+    color:#0974F2;
+    background: #E8F3FF;
+    border-radius:4px;
+    font-weight: 500;
+  }
+
+  .menu[data-no-child='true']:hover{
+    color: #0974F2;
+  }
+  .menu[data-no-child='false']{
+    font-weight: 400;
+    font-size: 12px;
+    height: 16px;
+    color: #8F959E;
+    cursor: default;
+  }
+}

package/templates/template_admin_antd5/public/src/components/topMenu/topBar/index.module.less

@@ -17,7 +17,7 @@
   height: 100%;
   width:100%;
   z-index:var(--z-top-menu);
-  padding:0 10px;
+  padding:0 0 0 10px;
   
   column-gap: 16px;
 
@@ -35,8 +35,9 @@
   .notice,
   .avatar{
     cursor: pointer;
-    width: 24px;
-    height: 24px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
   }
 
   .menu:global(.ant-menu){

package/templates/template_admin_antd5/public/src/components/video/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ShowPreview from './preview';
 // @ts-ignore
-import moment from 'moment';
+import moment from '@/utils/moment';
 // @ts-ignore
 import styles from './index.module.less';
 // @ts-ignore

package/templates/template_admin_antd5/public/src/components/video/preview.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { CloseOutlined } from '@ant-design/icons';
-import Popup from '@/components/popup';
+import showPopup from '@/components/popup';
 // @ts-ignore
 import styles from './index.module.less';
-import { ReactRender } from '@/components/react';
 
 const ModalPreview = (props) => {
-  const { destory, src } = props;
+  const { close, src } = props;
 
   const onCancel = () => {
-    destory && destory();
+    close && close();
   };
 
   return (
@@ -27,12 +26,10 @@ const ModalPreview = (props) => {
 };
 
 const ShowPreview = (props = {}) => {
-  return new Promise((resolve) => {
-    let popup = Popup(resolve);
-    ReactRender(
-      <ModalPreview destory={popup.destory} {...props} />,
-      popup.dom
-    );
+  return showPopup({
+    content: <ModalPreview {...props} />,
+    showMask: false,
+    closeOnClick: false,
   });
 };
 export default ShowPreview;

package/templates/template_admin_antd5/public/src/config.js

@@ -13,6 +13,9 @@ export const DEBUG_ENV='local';
 // export const DEBUG_ENV='pre';
 // export const DEBUG_ENV='local';
 
+// 调试下拉框里的选项
+// @ts-ignore
+export const DEBUG_SELECT_ITEMS=BUILD_ENV=='prod'?false:false;
 
 
 const DEBUG_API_HOST_CONFIG={

package/templates/template_admin_antd5/public/src/hooks/useLoading.jsx

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { useRef,useState, useEffect } from 'react';
 
-import {ShowPageLoading} from '@/components/page/pageLoading';
+import {showLoading} from '@/components/antd';
 
 const useLoading=(props={})=>{
   const {canTouch=false} = props;
@@ -23,7 +23,7 @@ const useLoading=(props={})=>{
     if(count > 0 ){
       if(!refPageLoading.current){
         // @ts-ignore
-        refPageLoading.current = ShowPageLoading({canTouch:canTouch});
+        refPageLoading.current = showLoading({canTouch:canTouch});
       }
     }else{
       if(refPageLoading.current){

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

@@ -3,12 +3,10 @@ import React from 'react';
 import './_antd.less';
 import './_reset.module.less';
 import RouteList from './route';
-// @ts-ignore
-import moment from 'moment';
 import { ReactRender } from './components/react';
 import {DEBUG_VCONSOLE} from '@/config';
-moment.locale('zh-cn');
-
+import moment from '@/utils/moment';
+moment;
 
 let _error=window.console.error;
 window.console.error=(...args)=>{

package/templates/template_admin_antd5/public/src/mock/demo.js

@@ -2,7 +2,7 @@ import qs from 'qs';
 import {GET_REQUEST,waitTime} from './utils';
 import {RESPONSE_STRUCT} from '@/services';
 // @ts-ignore
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const MAX_TOTAL=98;
 let UPDATE_COUNT=0;
@@ -19,8 +19,8 @@ function updateListData(){
       updateCount:UPDATE_COUNT,
       name: `名称`+ `${id}`.padStart(2,'0'),
       phone: `1370000`+ `${id}`.padStart(4,'0'),
-      date: moment().add(id,'minute').unix()*1000,//format('YYYY-MM-DD HH:mm:ss'),
-      dateRange: [moment().add(id,'minute').unix()*1000,moment().add(id,'day').unix()*1000],
+      date: dayjs().add(id,'minute').unix()*1000,//format('YYYY-MM-DD HH:mm:ss'),
+      dateRange: [dayjs().add(id,'minute').unix()*1000,dayjs().add(id,'day').unix()*1000],
       select: selectValue[id%selectValue.length],
       longName: `这是一个很长的名称`+ `${id}`.padStart(2,'0'),
       imgName: 'https://nebula-api.oss-cn-shanghai.aliyuncs.com/20240329/24163932-85ea-4372-9ff7-ee7c71748bcb/1711691401353-95387929.jpeg',

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Space } from '@/components/antd';
+
+const ButtonDemo = () => {
+  const onButton = () => {
+    return new Promise(resolve => {
+      setTimeout(resolve, 3000);
+    });
+  };
+
+  return (
+    <Space direction='horizontal' wrap>
+      <Button type="primary" onClick={onButton}>Primary Button</Button>
+      <Button onClick={onButton}>Default Button</Button>
+      <Button type="dashed" onClick={onButton}>Dashed Button</Button>
+      <Button type="text" onClick={onButton}>Text Button</Button>
+      <Button type="link" onClick={onButton}>Link Button</Button>
+    </Space>
+  );
+};
+
+export default ButtonDemo;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Checkbox, Space } from '@/components/antd';
+
+const CheckDemo = () => {
+  return (
+    <Space direction='horizontal' wrap>
+      <Checkbox>选中</Checkbox>
+    </Space>
+  );
+};
+
+export default CheckDemo;

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

@@ -1,142 +1,85 @@
 import React from 'react';
 
-import {Layout,SearchBar,TitleBar,Content,Panel} from '@/pages/components/layout'
-
+import { Layout, SearchBar, TitleBar, Content } from '@/pages/components/layout';
 import ResizeBox from '@/components/resizeBox';
-import { Button,Space,Input,Switch, Radio, Checkbox, InputNumber,Alert, Form } from '@/components/antd';
-import Table, { DefaultPagination } from '@/components/table';
-import { usePaginationWithForm } from '@/hooks';
+import { Alert, Space } from '@/components/antd';
+
+import ButtonDemo from './button';
+import InputDemo from './input';
+import SelectDemo from './select';
+import SwitchDemo from './switch';
+import CheckDemo from './check';
+import RadioDemo from './radio';
+import MessageDemo from './message';
+import TableWithPageDemo from './tableWithPage';
+import TextDemo from './text';
+import LoadingDemo from './loading';
 
-import SelectUser from '@/pages/components/select/user';
-import { FormatGetRequest, FormatTableService } from '@/services';
-import { GET_LIST } from '@/services/demo';
-import form from 'antd/es/form';
 
 const PageTemplate = (props) => {
-  const {name} = props;
-  const [form] = Form.useForm();
-
-  const page = usePaginationWithForm({
-    afterService: [(req)=>{
-      debugger;
-      return req;
-    },FormatTableService],
-    beforeService:[FormatGetRequest],
-    service: GET_LIST,
-    pagination: DefaultPagination(),
-    form
-  });
-
-  const onSearch=()=>{
-    page.update({ pagination: { current: 1 }, clear: true });
-  }
-
-  const onButton= ()=>{
-    return new Promise(resolve=>{
-      setTimeout(resolve,3000);
-    })
-  }
+  const { name } = props;
+
   return (
     <Layout>
       <SearchBar>
-        <TitleBar label={`page1-${name}`}/>
-        <Alert message='antd5组件封装后效果预览'/>
+        <TitleBar label={`page1-${name}`} />
+        <Alert message='antd5组件封装后效果预览' />
       </SearchBar>
       <Content>
+
+
         <Space direction='horizontal' wrap>
-          <ResizeBox title="Button">
-            <Space direction='horizontal' wrap>
-              <Button type="primary" onClick={onButton}>Primary Button</Button>
-              <Button onClick={onButton}>Default Button</Button>
-              <Button type="dashed" onClick={onButton}>Dashed Button</Button>
-              <Button type="text" onClick={onButton}>Text Button</Button>
-              <Button type="link" onClick={onButton}>Link Button</Button>
-            </Space>
+          <ResizeBox title="Button" autoSize>
+            <ButtonDemo />
           </ResizeBox>
 
-          <ResizeBox title="Input">
-            <Space direction='horizontal' wrap>
-              <Input placeholder='input'/>
-              <InputNumber placeholder='number'/>
-              <Input.TextArea placeholder='textarea'/>
-            </Space>
+          <ResizeBox title="Input" autoSize>
+            <InputDemo />
           </ResizeBox>
 
-          <ResizeBox title="Select">
-            <Space direction='horizontal' wrap>
-              <SelectUser mode={'multiple'} style={{width:'200px'}} allowClear/>
-            </Space>
+          <ResizeBox title="Select" autoSize>
+            <SelectDemo />
           </ResizeBox>
 
-          <ResizeBox title="Switch">
-            <Space direction='horizontal' wrap>
-              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
-            </Space>
+          <ResizeBox title="Switch" autoSize>
+            <SwitchDemo />
           </ResizeBox>
 
-          <ResizeBox title="Check">
-            <Space direction='horizontal' wrap>
-              <Checkbox>选中</Checkbox>
-            </Space>
+          <ResizeBox title="Check" autoSize>
+            <CheckDemo />
           </ResizeBox>
 
-          <ResizeBox title="Radio">
-            <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>
+          <ResizeBox title="Radio" autoSize>
+            <RadioDemo />
           </ResizeBox>
-          
-          <ResizeBox title="Table">
-            <Form form={form}>
-              <Form.Item name='id'><Input /></Form.Item>
-              <Button onClick={onSearch}>查询</Button>
-            </Form>
-              <Table 
-                page={page} 
-                columns={[
-                  {
-                    title:'id',
-                    dataIndex:'id'
-                  },
-                  {
-                    title:'name',
-                    dataIndex:'name'
-                  }
-                ]}
-              />
+
+          <ResizeBox title="message" autoSize>
+            <MessageDemo />
+          </ResizeBox>
+
+          <ResizeBox title="Text" autoSize>
+            <TextDemo />
+          </ResizeBox>
+
+          <ResizeBox title="Loading" autoSize>
+            <LoadingDemo />
           </ResizeBox>
+
+          <ResizeBox title="TableWithPage" autoSize>
+            <TableWithPageDemo />
+          </ResizeBox>
+
+
+
+          
+
+
+          
+
         </Space>
       </Content>
-      
     </Layout>
-  )
-}
+  );
+};
 
-export default PageTemplate;
+export default PageTemplate;

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

@@ -0,0 +1,5 @@
+@import '~@/_mixin.module.less';
+
+.text{
+  .no-select;
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Input, InputNumber, Space } from '@/components/antd';
+
+const InputDemo = () => {
+  return (
+    <Space direction='horizontal' wrap>
+      <Input placeholder='input' />
+      <InputNumber placeholder='number' />
+      <Input.TextArea placeholder='textarea' />
+    </Space>
+  );
+};
+
+export default InputDemo;

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

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Button, message, Space } from '@/components/antd';
+
+import Spin,{showLoading} from '@/components/antd/spin';
+
+const Demo = () => {
+
+  return (
+    <Space direction='horizontal' wrap>
+      <Button onClick={()=>{
+        let destory= showLoading({showMask:true,tip:'疯狂加载'});
+        setTimeout(()=>{
+          destory();
+        },5000)
+      }}>弹出loading</Button>
+
+      <Spin tip='疯狂加载'>
+        <div style={{
+          position:'relative',
+          width:'200px',
+          height:'80px',
+          border:'1px solid red'
+        }}>
+          <span onClick={()=>{message.info('点击文案')}}>局部loading</span>
+        </div>
+      </Spin>
+    </Space>
+  );
+};
+
+export default Demo;