update layout by @rainbow_deer/layout

Author: 甚平(郭建强)

README.md

@@ -11,7 +11,7 @@
 git地址 [https://github.com/guo-jianqiang/react-antd-admin](https://github.com/guo-jianqiang/react-antd-admin)
 
 ## 单独使用Layout
-详情请查看[little-deer-ui](https://gitee.com/gjq0208/little-deer-ui)
+详情请查看[rainbow_deer/layout](https://guo-jianqiang.github.io/rainbow_deer/Components/ReactComponent/layout#/)
 
 ## 1.ConfigurationDrawer
 

package-lock.json

@@ -20,12 +20,7 @@
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
-      "lint-fix",
-      "git add"
-    ],
-    "src/**/**/*.less": [
-      "lint:style-fix",
-      "git add"
+      "eslint src --fix --ext .ts,.tsx"
     ]
   },
   "repository": {
@@ -104,13 +99,13 @@
     "webpackbar": "^5.0.0-3"
   },
   "dependencies": {
-    "antd": "^4.11.2",
+    "@rainbow_deer/layout": "^0.1.6",
+    "antd": "^4.16.2",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "common-tree-func": "^1.0.3",
     "history": "4.10.1",
     "js-base64": "^3.6.0",
-    "little-deer-ui": "^1.5.1",
     "npm": "^7.6.3",
     "nprogress": "^0.2.0",
     "react": "^17.0.1",

package.json

@@ -3,6 +3,7 @@
 import React from 'react'
 import ReactDom from 'react-dom'
 import App from './App'
+import 'antd/dist/antd.css'
 import './style/index.less'
 
 ReactDom.render(<App />, document.getElementById('root'))

push.sh

@@ -1,6 +1,7 @@
+/** @format */
 
 // 深拷贝
-export const deepAssign: (to: { [key: string]: any }, from: { [key: string]: any }) => Object = (to, from) => {
+export const deepAssign: (to: {[key: string]: any}, from: {[key: string]: any}) => Object = (to, from) => {
   Object.keys(from).forEach(key => {
     const val = from[key]
     if (typeof val === 'object') {
@@ -12,7 +13,7 @@ export const deepAssign: (to: { [key: string]: any }, from: { [key: string]: any
   return to
 }
 
-export const deepClone: (obj: Object) => Object = (obj) => {
+export const deepClone: (obj: Object) => Object = obj => {
   if (Array.isArray(obj)) {
     return obj.map(item => deepClone(item))
   }
@@ -23,25 +24,25 @@ export const deepClone: (obj: Object) => Object = (obj) => {
 }
 
 // 广度优先
-export function treeForeach<T extends { routes?: Array<T> }>(tree: Array<T>, func: (node: T) => void) {
+export function treeForeach<T extends {routes?: Array<T>}>(tree: Array<T>, func: (node: T) => void) {
   let node
   const list = [...tree]
   while ((node = list.shift())) {
     func(node)
     node.routes && list.push(...node.routes)
   }
 }
-type nodeType = { [index: string]: any }
+type nodeType = {[index: string]: any}
 /**
  * 深度优先遍历，返回节点信息及深度
- * @param tree 
- * @param func 
- * @param childrenKey 
+ * @param tree
+ * @param func
+ * @param childrenKey
  */
 export const treeDeepForeach = (
   tree: Array<any> | Object,
   func: (node: nodeType, deep: number) => void,
-  childrenKey = 'children'
+  childrenKey = 'children',
 ) => {
   let deep = 0
   const each = (node: nodeType) => {
@@ -65,25 +66,25 @@ export const treeDeepForeach = (
 /**
  * @author guojianqiang
  * @description 查找匹配树节点并返回当前节点信息及深度
- * @param tree 
- * @param func 
+ * @param tree
+ * @param func
  * @param childrenKey
  */
 export const findTreeNode = (
   tree: Array<any> | Object,
   func: (node: nodeType) => boolean,
-  childrenKey = 'children'
+  childrenKey = 'children',
 ) => {
   let deep = 0
-  const find: (node: nodeType) => any = (node) => {
+  const find: (node: nodeType) => any = node => {
     deep++
     if (func(node)) {
-      return { ...node, deep }
+      return {...node, deep}
     }
     if (node[childrenKey] && node[childrenKey].length) {
       for (let item of node[childrenKey]) {
         const rnode = find(item)
-        if (rnode) return { ...rnode, deep }
+        if (rnode) return {...rnode, deep}
       }
     }
     deep--
@@ -100,15 +101,11 @@ export const findTreeNode = (
 }
 /**
  * 树条件过滤
- * @param tree 
- * @param func 
- * @param childrenKey 
+ * @param tree
+ * @param func
+ * @param childrenKey
  */
-export const filterTree = (
-  tree: any,
-  func: (node: nodeType) => boolean,
-  childrenKey = 'children'
-) => {
+export const filterTree = (tree: any, func: (node: nodeType) => boolean, childrenKey = 'children') => {
   let _tree
   if (typeof tree !== 'object') {
     console.warn('the tree is not object')
@@ -118,20 +115,22 @@ export const filterTree = (
     _tree = [tree]
   }
   _tree = [...tree]
-  const filter: (arr: Array<any>) => Array<any> = (arr) => {
-    return arr.map(node => ({...node})).filter((item) => {
-      if (item[childrenKey] && item[childrenKey].length) item[childrenKey] = filter(item[childrenKey])
-      if (item[childrenKey] && !item[childrenKey].length) delete item[childrenKey]
-      return (item[childrenKey] && item[childrenKey]) || func(item)
-    })
+  const filter: (arr: Array<any>) => Array<any> = arr => {
+    return arr
+      .map(node => ({...node}))
+      .filter(item => {
+        if (item[childrenKey] && item[childrenKey].length) item[childrenKey] = filter(item[childrenKey])
+        if (item[childrenKey] && !item[childrenKey].length) delete item[childrenKey]
+        return (item[childrenKey] && item[childrenKey]) || func(item)
+      })
   }
   return filter(_tree)
 }
 
-type listNodeType = {parentId: number | string, id: number | string, [key: string]: any}
+type listNodeType = {parentId: number | string; id: number | string; [key: string]: any}
 /**
  * 数组转树
- * @param list 
+ * @param list
  * @param childrenKey 孩子键
  * @param parentIdKey 父id键
  * @param defaultRootId 默认根级id
@@ -140,7 +139,7 @@ export const listToTree = (
   list: Array<listNodeType>,
   childrenKey = 'children',
   parentIdKey = 'parentId',
-  defaultRootId = 0
+  defaultRootId = 0,
 ) => {
   const map = list.reduce((prevMap: any, current) => {
     prevMap[current.id] = current
@@ -156,17 +155,18 @@ export const listToTree = (
 }
 /**
  * 树转数组
- * @param tree 
- * @param childrenKey 
+ * @param tree
+ * @param childrenKey
  */
-export const treeToList = (
-  tree: any,
-  childrenKey = 'children'
-) => {
+export const treeToList = (tree: any, childrenKey = 'children') => {
   const list: Array<any> = []
-  treeDeepForeach(tree, node => {
-    list.push(node)
-  }, childrenKey)
+  treeDeepForeach(
+    tree,
+    node => {
+      list.push(node)
+    },
+    childrenKey,
+  )
   return list
 }
 
@@ -197,4 +197,4 @@ export function getTreePath<T>(nodes: Array<T>, handler: (node: T) => {}, key =
     return []
   }
   return getPaths(nodes)
-}
+}

src/index.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import { RouteItem } from '../route/routeItems'
+import {RouteItem} from '../route/routeItems'
 
 /**
  * @description 判空
@@ -19,25 +19,25 @@ export const isEmpty = (obj: any) => {
 }
 
 // 广度优先
-export function treeForeach<T extends { routes?: Array<T> }>(tree: Array<T>, func: (node: T) => void) {
+export function treeForeach<T extends {routes?: Array<T>}>(tree: Array<T>, func: (node: T) => void) {
   let node
   const list = [...tree]
   while ((node = list.shift())) {
     func(node)
     node.routes && list.push(...node.routes)
   }
 }
-type nodeType = { [index: string]: any }
+type nodeType = {[index: string]: any}
 /**
  * 深度优先遍历，返回节点信息及深度
- * @param tree 
- * @param func 
- * @param childrenKey 
+ * @param tree
+ * @param func
+ * @param childrenKey
  */
 export const treeDeepForeach = (
   tree: Array<any> | Object,
   func: (node: nodeType, deep: number) => void,
-  childrenKey = 'children'
+  childrenKey = 'children',
 ) => {
   let deep = 0
   const each = (node: nodeType) => {
@@ -61,17 +61,17 @@ export const treeDeepForeach = (
 /**
  * @author guojianqiang
  * @description 查找匹配树节点并返回当前节点信息及深度
- * @param tree 
- * @param func 
+ * @param tree
+ * @param func
  * @param childrenKey
  */
 export const findTreeNode = (
   tree: Array<any> | Object,
   func: (node: nodeType) => boolean,
-  childrenKey = 'children'
+  childrenKey = 'children',
 ) => {
   let deep = 0
-  const find: (node: nodeType) => any = (node) => {
+  const find: (node: nodeType) => any = node => {
     deep++
     if (func(node)) {
       return {...node, deep}
@@ -157,7 +157,7 @@ export const getObjectURL = (file: File) => {
   return url
 }
 
-export const deepAssign: (to: { [key: string]: any }, from: { [key: string]: any }) => Object = (to, from) => {
+export const deepAssign: (to: {[key: string]: any}, from: {[key: string]: any}) => Object = (to, from) => {
   Object.keys(from).forEach(key => {
     const val = from[key]
     if (typeof val === 'object') {
@@ -169,7 +169,7 @@ export const deepAssign: (to: { [key: string]: any }, from: { [key: string]: any
   return to
 }
 
-export const deepClone: (obj: Object) => Object = (obj) => {
+export const deepClone: (obj: Object) => Object = obj => {
   if (Array.isArray(obj)) {
     return obj.map(item => deepClone(item))
   }
@@ -179,10 +179,10 @@ export const deepClone: (obj: Object) => Object = (obj) => {
   return obj
 }
 
-export const getValue: (origin: { [key: string]: any }, path: string) => any = (origin, path) => {
+export const getValue: (origin: {[key: string]: any}, path: string) => any = (origin, path) => {
   const reg = /\["?([0-9a-zA-Z_-]+)"?\]/g
   const pathArr: any[] = path.replace(reg, '.$1').split('.')
-  let val = { ...origin }
+  let val = {...origin}
   for (let i = 0; i < pathArr.length; i++) {
     const key = pathArr[i]
     if (!val) return val

src/lib/tree.ts

@@ -15,7 +15,7 @@ import Login from '../view/login'
 import routeItems, {RouteItem} from './routeItems'
 // import Layout from '../layout/Layout'
 import pkg from '../../package.json'
-import {Layout} from 'little-deer-ui'
+import Layout from '@rainbow_deer/layout'
 import {removeUserData, UserInterface} from '../lib/userData'
 import userContext from '../context/userContext'
 import {getFirstRoute, isEmpty} from '../lib/until'
@@ -83,8 +83,7 @@ const Routes = () => {
             username={userData?.username || ''}
             history={history}
             aliveControl={aliveControl}
-            onClickDrop={handleClickDrop}
-          >
+            onClickDrop={handleClickDrop}>
             {renderRoutes()}
           </Layout>
         </CacheSwitch>