kn-cli 1.0.92 → 1.0.94

package/templates/template_admin/public/src/pages/demo/page1.jsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState, useRef } from 'react';
+// @ts-ignore
+import {Input,Button,Form,Badge,Space,Popconfirm} from 'antd';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+// @ts-ignore
+import moment from 'moment';
+
+import Table from '@/components/table';
+import Link from '@/components/link';
+import {usePaginationWithForm} from '@/hooks';
+import {GET_LIST,FormatTableService} from '@/services/demo';
+import {formatText,formatPhone} from '@/utils/format';
+import {useHealthy} from '@/dictionary';
+
+import ShowEdit from './edit';
+
+// @ts-ignore
+import styles from './index.less';
+
+const Page = (props) => {
+  const {label=''}= props;
+  const [form] = Form.useForm();
+  const emHealthy = useHealthy();
+  const navigate = useNavigate();
+
+  const page = usePaginationWithForm({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+    form,
+    afterService: [FormatTableService],
+  })
+
+  const columns=[
+    {
+      dataIndex:'id',
+      title:'id',
+      width:30,
+      render:(text)=>formatText(text)
+    },
+    {
+      dataIndex:'query',
+      title:'查询内容',
+      width:90,
+      render:(text)=>formatText(text)
+    },
+    {
+      dataIndex:'name',
+      title:'名称',
+      width:90,
+      render:(text)=>formatText(text)
+    },
+    {
+      dataIndex:'date',
+      title:'时间',
+      width:90,
+      render:(date)=>date?moment(date).format('YYYY-MM-DD'):'-'
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phone',
+      width:100,
+      align:'center',
+      render:(phone)=>formatPhone(phone)
+    },
+    {
+      title: '状态',
+      dataIndex: 'select',
+      width:90,
+      align:'center',
+      render:(state,record,idx)=>{
+        state=['normal','abnormal','disabled'][idx%3];
+        const colors={
+          normal:'green',
+          abnormal:'#FAAD14',
+          disabled:'red'
+        }
+        return  <Badge
+            color={colors[state]}
+            text={emHealthy.getLabel(state)}
+          />
+      }
+    },
+    {
+      title: '操作',
+      key: 'option',
+      width:80,
+      fixed:'right',
+      align:'center',
+      render: (_, record) => (
+        <Space>
+          <Link  onClick={onDetail.bind(this,record)}>详情</Link>
+          <Link  onClick={onEdit.bind(this,record)}>编辑</Link>
+          <Popconfirm
+            title={`确定要${'禁用'}此用户吗？`}
+            onConfirm={onDel.bind(this,record)}
+          >
+            <Link>删除</Link>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  const onEdit= async (record)=>{
+    const req= await ShowEdit({id:record.id});
+    if(req){
+      onSearch();
+    }
+  }
+  const onDetail= async (record)=>{
+    
+    navigate(`detail/${record.id}`)
+  }
+  const onDel=()=>{}
+
+  // 搜索
+  const onSearch = () => {
+    page.update({ pagination: { current: 1 }, clear: true });
+  };
+  // 重置
+  const onReset = () => {
+    page.reset();
+  };
+  const onPageChange = (current, pageSize) => {
+    page.update({ pagination: { current, pageSize }, clear: true });
+  };
+
+  useEffect(() => {
+    onSearch();
+  }, []);
+
+  return (
+    <section className={styles.contentWrap}>
+      <p>页面名称:{label}</p>
+      <Form form={form} layout="inline">
+        <Form.Item label="关键字" name={'key1'}>
+          <Input placeholder="请输入用户组/描述" allowClear />
+        </Form.Item>
+        <Form.Item label="用户" name={'key2'}>
+          <Input placeholder="请输入用户全名" allowClear />
+        </Form.Item>
+        <Space>
+          <Button onClick={onSearch} type="primary">
+            搜索
+          </Button>
+          <Button onClick={onReset}>重置</Button>
+        </Space>
+      </Form>
+      <Table
+        columns={columns}
+        pagination={{
+          onChange: onPageChange,
+        }}
+        page={page}
+      />
+    </section>
+  )
+}
+
+export default Page;

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+// @ts-ignore
+import { useSearchParams } from 'react-router-dom';
 import ProviderApp from '@/provider/app';
 
-
+// @ts-ignore
 import styles from './index.less';
 
 const Page = () => {
@@ -15,11 +16,11 @@ const Page = () => {
       return;
     }
   }
-  useEffect(kssoLogin,[])
+  useEffect(()=>{kssoLogin()},[])
 
   return (
     <section className={styles.body}>
-      登录跳转中...
+      ksso登录跳转中...
     </section>
   )
 }

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

@@ -1,10 +1,16 @@
 import React, { useState, useRef } from 'react';
-import ProviderApp from '@/provider/app';
-
+// @ts-ignore
 import {Input,Button} from 'antd';
 
+import ProviderApp from '@/provider/app';
+
+// @ts-ignore
 import styles from './index.less';
 
+/**
+ * 本地模拟账号密码登录的页面
+ * @returns 
+ */
 const Page = () => {
   const providerApp = ProviderApp.useContainer();
   const [username,setUsername]=useState('');
@@ -28,6 +34,7 @@ const Page = () => {
     const {key:code}= e;
     if(code.toLocaleLowerCase()=='enter'){
       if(type=='id'){
+        // @ts-ignore
         refPassword.current.focus();
       }else{
         onAccountLogin();

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

@@ -1,5 +1,5 @@
 // @ts-ignore
-import {  useState,useMemo } from 'react';
+import {  useState,useMemo, useEffect } from 'react';
 // @ts-ignore
 import {  useSearchParams,useNavigate } from 'react-router-dom';
 // @ts-ignore
@@ -7,7 +7,7 @@ import { createContainer } from "unstated-next";
 // @ts-ignore
 import {useDelay} from '@/hooks/index';
 import {setJwt,setLogout} from '@/services';
-import {KSSO_LOGIN,LOGIN,LOGOUT} from '@/services/auth';
+import {GET_USER_INFO,Login,KssoLogin} from '@/services/demo';
 import {jumpUrl} from '@/utils';
 
 
@@ -67,7 +67,7 @@ const useApp=() =>{
     if(code){
       var redirectUri = location.protocol + '//' + location.host + '/#/login';
       //ksso auth登录
-      const req = await KSSO_LOGIN({code,redirectUri})
+      const req = await KssoLogin({code,redirectUri})
       if(req?.code==0){
         const userData = req?.data;
         setUser(userData);
@@ -89,13 +89,12 @@ const useApp=() =>{
     return true;
   }
   const login=async (username,password)=>{
-    const req = await LOGIN({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});
@@ -107,8 +106,16 @@ const useApp=() =>{
     }
     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 ()=>{
-    LOGOUT();
     setUser(null);
     setJwt('');
     localStorage.removeItem('user');
@@ -116,7 +123,9 @@ const useApp=() =>{
   }
   setLogout(logout);
 
-
+  useEffect(()=>{
+    console.warn('[user]',user)
+  },[user])
 
   const setNav=(config)=>{
     setNavConfig({...nav,...config});
@@ -132,7 +141,8 @@ const useApp=() =>{
       logout,
       setUser,
       user,
-      kssoLogin
+      kssoLogin,
+      updateUserInfo
     }
   },[loading,nav,setNav,user,setUser,isLogin,kssoLogin,login]);
 

package/templates/template_admin/public/src/provider/menu.jsx

@@ -1,22 +1,158 @@
 // @ts-ignore
-import React,{  useState,useMemo } from 'react';
+import React,{  useState,useMemo, useEffect } from 'react';
+// @ts-ignore
+import { useLocation } from 'react-router-dom';
 // @ts-ignore
 import { createContainer } from "unstated-next"
 
-import {GET_MENU} from '@/services/auth';
+import useRouteMenu from '@/hooks/useRouteMenu';
+
+
+// @ts-ignore
+import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
+
+const MenuRoute=[
+  {
+    name:'普通管理',
+    url:'/',
+    children:[
+      {
+        name:'内容管理',
+        icon:<AppstoreOutlined />,
+        url:'/demo',
+        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:'数据管理',
+        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:'高级管理',
+    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'},
+            ]
+          },
+        ]
+      },
+    ]
+  }
+]
+
 
 const useProvider=() =>{
-  const [menus,setMenus]= useState([]);
 
-  const reload= async ()=>{
-    await GET_MENU();
+  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 list = routeMenu.getMenu(routeMenu.source,userAuth);
+    setTopMenu(list||[]);
   }
-  const action=useMemo(()=>{
-    return {
-      menus,setMenus
+  const getLeftMenu=()=>{
+    const list = routeMenu.getMenu(routeMenu.source,userAuth);
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+
+    const req= list.filter(menu=>{
+      return menus.some(openMenu=>openMenu.key==menu.key)
+    })
+    
+    let subs=[];
+    if(req && req[0]){
+      subs=req[0].children||[];
     }
-  },[menus,setMenus]);
-  return action
+    setLeftMenu(subs);
+  }
+
+  const findMenuData=(menuKey)=>{
+    return routeMenu.findMenuData(menuKey);
+
+  }
+  const setMenuConfig=(params)=>{
+    routeMenu.setMenuConfig(params);
+  }
+
+
+  useEffect(()=>{
+    let menus= routeMenu.getOpenMenus(curLocation.pathname);
+    let keys=menus.map(item=>item.key);
+    setSelectMenus({menus,keys});
+  },[curLocation,routeMenu.source]);
+
+  useEffect(()=>{
+    getTopMenu();
+    getLeftMenu();
+  },[routeMenu.source,curLocation,userAuth])
+
+
+
+  return {leftMenu,topMenu,reload,selectMenus,findMenuData,setMenuConfig,setUserAuth}
 }
 const App = createContainer(useProvider);
 

package/templates/template_admin/public/src/route.jsx

@@ -10,7 +10,7 @@ import PageLoading from '@/components/page/pageLoading';
 import Login from '@/pages/login';
 import {AuthLogin} from '@/components/auth';
 import LeftMenu from '@/components/menu';
-import TopMenu from '@/components/topMenu';
+import TopMenu from '@/components/menu/topMenu';
 
 import ProviderMenu from '@/provider/menu';
 
@@ -25,15 +25,8 @@ const delayLoader=(loader)=>{
 }
 
 
-
-const Video = React.lazy(()=>import('@/pages/video'));
-const Suggest = React.lazy(()=>import('@/pages/suggest'));
-const Order = React.lazy(()=>import('@/pages/order'));
-const Permission = React.lazy(()=>import('@/pages/permission'));
-const Material = React.lazy(()=>import('@/pages/material'));
-
-const User = React.lazy(()=>import('@/pages/user'));
-const UserData = React.lazy(()=>import('@/pages/userData'));
+const Page1 = React.lazy(()=>import('@/pages/demo/page1'));
+const Page1Detail = React.lazy(()=>import('@/pages/demo/detail'));
 
 import SuperAdminLogin from '@/pages/superAdminLogin';
 
@@ -54,14 +47,24 @@ export const RouteList = (
           </ProviderMenu.Provider>
         }
       >
-        <Route path='/' element={<Navigate to="/video"></Navigate> } />
-        <Route path='/video' element={<Video />} />
-        <Route path='/suggest' element={<Suggest />} />
-        <Route path='/order' element={<Order />} />
-        <Route path='/permission' element={<Permission />} />
-        <Route path='/material' element={<Material />} />
-        <Route path='/user' element={<User />} />
-        <Route path='/userData' element={<UserData />} />
+        <Route path='/' element={<Navigate to="/demo/page1"></Navigate> } />
+        <Route path='/demo/page1' element={<Page1 label='内容管理1' />} />
+        <Route path='/demo/page2' element={<Page1 label='内容管理2' />} />
+        <Route path='/demo/page1/detail/:id' element={<Page1Detail />} />
+        <Route path='/demo/page2/detail/:id' element={<Page1Detail />} />
+
+
+        <Route path='/demo/data/page1' element={<Page1 label='数据管理1' />} />
+        <Route path='/demo/data/page2' element={<Page1 label='数据管理2' />} />
+        <Route path='/demo/data/page1/detail/:id' element={<Page1Detail />} />
+        <Route path='/demo/data/page2/detail/:id' element={<Page1Detail />} />
+
+        <Route path='/demo/admin' element={<Navigate to="/demo/admin/page1"></Navigate> } />
+        <Route path='/demo/admin/page1' element={<Page1 label='权限管理1' />} />
+        <Route path='/demo/admin/page2' element={<Page1 label='权限管理2' />} />
+        <Route path='/demo/admin/page1/detail/:id' element={<Page1Detail />} />
+        <Route path='/demo/admin/page2/detail/:id' element={<Page1Detail />} />
+
 
       </Route>
     </Route>

package/templates/template_admin/public/src/services/demo.js

@@ -0,0 +1,54 @@
+
+
+import {GET_DEFAULT,POST_DEFAULT,API_ROOT,RESPONSE_STRUCT} from './index.js';
+
+
+
+export function GET_LIST(params) {
+  return  GET_DEFAULT(`${API_ROOT}/api/demo/list`,params);
+}
+export function GET_DETAIL(params) {
+  return  GET_DEFAULT(`${API_ROOT}/api/demo/detail`,params);
+}
+export function CREATE(params) {
+  return POST_DEFAULT(`${API_ROOT}/api/demo/create`,params)
+}
+export function UPDATE(params) {
+  return POST_DEFAULT(`${API_ROOT}/api/demo/update`,params)
+}
+export function GET_USER_INFO(){
+  return  GET_DEFAULT(`${API_ROOT}/api/demo/userInfo`);
+}
+
+export function GET_ENUM_TYPE(){
+  return  GET_DEFAULT(`${API_ROOT}/api/demo/enumType`);
+}
+
+export const FormatTableService = (response)=>{
+  let req={
+    code:response[RESPONSE_STRUCT.CODE]||0,
+    data:response[RESPONSE_STRUCT.DATA]||null,
+    msg:response[RESPONSE_STRUCT.MSG]||''
+  };
+  if(response[RESPONSE_STRUCT.PAGINATION]){
+    req.page = response[RESPONSE_STRUCT.PAGINATION]
+  }
+  return req;
+};
+
+
+export function Login(params={
+  username:'',
+  password:'',
+}){
+  return POST_DEFAULT(`${API_ROOT}/api/demo/login`,params)
+
+}
+
+export function KssoLogin(params={
+  code:'',
+  redirectUri:'',
+}){
+  return POST_DEFAULT(`${API_ROOT}/api/demo/ksso/auth`,params)
+
+}

package/templates/template_admin/public/src/services/index.js

@@ -13,6 +13,15 @@ export const API_ROOT = API_HOST;
 const tokenMode='header';//header,cookie
 const tokenName='Authorization';
 
+
+
+export const RESPONSE_STRUCT={
+  CODE:'code',
+  MSG:'msg',
+  DATA:'data',
+  PAGINATION:'pagination'
+}
+
 let Modal = {
   error: (options) => {
     message.error(options.content);

package/templates/template_admin/public/src/utils/format.js

@@ -0,0 +1,51 @@
+
+/**
+ * 格式化为货币格式
+ * @param {string|number} value - 数值
+ * @param {number} decimal=2 - 格式化到小数点后几位
+ * @param {object} extra - 扩展参数
+ * @returns {string} 格式化后的字符串 
+ */
+export const formatMoney=(value,decimal=2,extra={noValue:'-',carry:false})=>{
+  const {noValue='-',carry=false}=extra;
+  try{
+    value = parseFloat(`${value}`);
+    if(Number.isNaN(value)){
+      value='';
+      return;
+    }
+    if(carry){
+      value = value.toFixed(decimal);
+    }else{
+      value = value.toFixed(decimal+1);
+      value = value.slice(0,-1);
+    }
+  }
+  catch(ex){
+    value='';
+  }finally{
+    if(value===''){
+      return noValue||'';
+    }
+    return `${value}`;
+  }
+}
+
+export const formatText=(value,extra={noValue:'-'})=>{
+  const {noValue='-'}= extra;
+  if(!value){
+    if(noValue)return noValue;
+  }
+  return value;
+}
+
+
+export const formatPhone=(value,extra={noValue:'-'})=>{
+  const {noValue='-'}= extra;
+  if(!value){
+    if(noValue)return noValue;
+  }
+  return value.replace(/(\d)(?=(\d{4})+$)/g, '$1-');
+}
+
+