react-toolkits 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-toolkits",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "sideEffects": [
     "**/*.css"
   ],
@@ -39,7 +39,6 @@
     "@types/react": "^18.2.16",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.14",
-    "eslint-import-resolver-typescript": "^3.5.5",
     "postcss": "^8.4.27",
     "prettier": "^3.0.0",
     "react": "^18.2.0",
@@ -48,7 +47,7 @@
     "ts-essentials": "^9.3.2",
     "tsup": "^7.1.0",
     "typescript": "^5.1.6",
-    "@flow97/eslint-config-mono": "0.0.1",
+    "@flow97/eslint-config-mono": "0.0.2",
     "tailwind-config": "0.0.1",
     "tsconfig": "0.0.1"
   },

package/src/hooks/use-permission.tsx

@@ -5,21 +5,21 @@ export interface PermissionCheckResult {
   [k: string]: boolean
 }
 
-export function usePermissions(codes: Record<string, string>) {
+export function usePermissions(codes: string[]) {
   const fetcher = useFetcher()
 
   const { data, isLoading } = useSWRImmutable(
-    Object.keys(codes).length > 0
+    codes.length > 0
       ? {
           method: 'POST',
           url: '/api/usystem/user/check',
-          data: { permissions: Object.values(codes) },
+          data: { permissions: codes },
         }
       : null,
     config =>
       fetcher<PermissionCheckResult>(config).then(res => {
         if (res.has_all) {
-          return Object.keys(codes).reduce(
+          return codes.reduce(
             (acc, curr) => {
               acc[curr] = true
               return acc
@@ -28,9 +28,9 @@ export function usePermissions(codes: Record<string, string>) {
           )
         }
 
-        return Object.entries(codes).reduce(
+        return codes.reduce(
           (acc, curr) => {
-            acc[curr[0]] = (res as Record<string, boolean>)[curr[1] as string]
+            acc[curr] = (res as Record<string, boolean>)[curr]
             return acc
           },
           {} as Record<string, boolean>,
@@ -42,7 +42,7 @@ export function usePermissions(codes: Record<string, string>) {
 }
 
 export function usePermission(code?: string) {
-  const { data, isLoading } = usePermissions(code ? { [code]: code } : {})
+  const { data, isLoading } = usePermissions(code ? [code] : [])
 
   if (!code) {
     return {

package/src/layouts/Layout.tsx

@@ -1,8 +1,7 @@
 import logo from '@/assets/512_orange_nobackground.png'
-import { Layout as AntdLayout, Spin, theme } from 'antd'
-import type { FC, ReactNode } from 'react'
-import { Suspense } from 'react'
-import { Link, Outlet } from 'react-router-dom'
+import { Layout as AntdLayout, theme } from 'antd'
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 import type { ItemType2 } from './NavBar'
 import NavBar from './NavBar'
 
@@ -14,8 +13,8 @@ export interface LayoutProps {
   header?: ReactNode
 }
 
-const Layout: FC<LayoutProps> = props => {
-  const { title, items, header } = props
+const Layout: FC<PropsWithChildren<LayoutProps>> = props => {
+  const { title, items, header, children } = props
   const {
     token: { colorBgContainer, colorBorder },
   } = theme.useToken()
@@ -38,7 +37,7 @@ const Layout: FC<LayoutProps> = props => {
         theme="light"
       >
         <div className="flex items-end px-6 py-4">
-          <img src={logo} alt="logo" className="w-8" />
+          <img src={logo} alt="logo" className="w-8 h-8" />
           <Link className="font-bold text-lg ml-2" to="/">
             {title}
           </Link>
@@ -57,22 +56,7 @@ const Layout: FC<LayoutProps> = props => {
         >
           {header}
         </Header>
-        <Content className="p-6 overflow-auto bg-gray-50">
-          <Suspense
-            fallback={
-              <Spin
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  height: '50vh',
-                }}
-              />
-            }
-          >
-            <Outlet />
-          </Suspense>
-        </Content>
+        <Content className="p-6 overflow-auto bg-gray-50">{children}</Content>
       </AntdLayout>
     </AntdLayout>
   )

package/src/layouts/NavBar.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { usePermissions } from '@/hooks'
 import { useMenuStore } from '@/stores'
-import Icon, * as Icons from '@ant-design/icons'
-import { Menu } from 'antd'
+import { Menu, Spin } from 'antd'
 import type {
   ItemType,
   MenuDividerType,
@@ -9,26 +8,24 @@ import type {
   MenuItemType,
   SubMenuType,
 } from 'antd/es/menu/hooks/useItems'
-import type { FC, ForwardRefExoticComponent, ReactNode } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { FC, ReactNode } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import type { Merge } from 'ts-essentials'
 
 // 扩展 antd Menu 的类型，使其支持一些我们想要的自定义字段。
 type MenuItemType2 = Merge<
-  Omit<MenuItemType, 'icon'>,
+  MenuItemType,
   {
     code /** 权限编号 **/?: string
     route /** 前端路由地址 **/?: string
-    icon?: string
   }
 >
 
 type SubMenuType2 = Merge<
-  Omit<SubMenuType, 'icon'>,
+  SubMenuType,
   {
     children?: ItemType2[]
-    icon?: string
   }
 >
 
@@ -48,12 +45,7 @@ const withLink = (label?: ReactNode, route?: string): ReactNode => {
   return label
 }
 
-/**
- * 转换导航配置，主要做了以下几件事情
- * 1. 用 Link 元素包装 route
- * 2. 收集 code，用于权限判断
- */
-function transformItems(items: ItemType2[]) {
+function transformItems(items: ItemType2[], permissions?: Record<string, boolean>) {
   const result: ItemType[] = []
 
   for (let i = 0; i < items.length; i++) {
@@ -62,35 +54,20 @@ function transformItems(items: ItemType2[]) {
     } else if ((items[i] as MenuDividerType).type === 'divider') {
       result[i] = { ...items[i] } as MenuDividerType
     } else {
-      // 引入 icon
-      const iconName = (items[i] as MenuItemType2 | SubMenuType2).icon
-
       if ((items[i] as SubMenuType2 | MenuItemGroupType2).children) {
         const { children, ...restProps } = items[i] as SubMenuType2 | MenuItemGroupType2
         result[i] = {
           ...restProps,
-          children: transformItems(children ?? []),
-          icon: iconName ? <Icon component={(Icons as any)[iconName] as ForwardRefExoticComponent<any>} /> : null,
+          children: transformItems(children ?? [], permissions),
         } as SubMenuType | MenuItemGroupType
       } else {
         const { route, label, code, ...restProps } = items[i] as MenuItemType2
-        // const isPass = code
-        //   ? await httpClient.post<PermissionCheckResult>('/usystem/user/check', { permissions: [code] }).then(res => {
-        //       if (res.has_all) {
-        //         return true
-        //       }
-        //
-        //       return res[code] ?? false
-        //     })
-        //   : true
-
-        const isPass = true
+        const isPass = !code || !permissions || permissions[code]
 
         result[i] = isPass
           ? ({
               ...restProps,
               label: withLink(label, route),
-              icon: iconName ? <Icon component={(Icons as any)[iconName] as ForwardRefExoticComponent<any>} /> : null,
             } as MenuItemType)
           : null
       }
@@ -129,11 +106,9 @@ const NavBar: FC<NavBarProps> = props => {
   const { items } = props
   const location = useLocation()
   const flattenItems = useMemo(() => flatItems(items ?? []), [items])
-  const [internalItems, setInternalItems] = useState<ItemType<MenuItemType>[]>([])
-
-  useEffect(() => {
-    setInternalItems(transformItems(items ?? []))
-  }, [items])
+  const codes = flattenItems.map(item => item.code).filter(Boolean) as string[]
+  const { data: permissions, isLoading } = usePermissions(codes)
+  const internalItems = useMemo(() => transformItems(items ?? [], permissions), [items, permissions])
 
   const openKeys = useMenuStore(state => state.openKeys)
   const selectedKeys = useMenuStore(state => state.selectedKeys)
@@ -161,6 +136,19 @@ const NavBar: FC<NavBarProps> = props => {
     }
   }, [flattenItems, location, setOpenKeys, setSelectedKeys])
 
+  if (isLoading) {
+    return (
+      <Spin
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 'calc(100vh - 64px)',
+        }}
+      />
+    )
+  }
+
   return (
     <Menu
       style={{ borderRight: 'none' }}