react-toolkits 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-toolkits",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "sideEffects": [
     "**/*.css"
   ],

package/src/components/FilterForm/index.tsx

@@ -1,6 +1,7 @@
 import type { FormInstance, FormProps } from 'antd'
 import { Button, Col, Form, Row, Space, theme } from 'antd'
 import type { PropsWithChildren } from 'react'
+import * as React from 'react'
 
 export interface FilterFormProps<Values>
   extends Pick<

package/src/components/QueryList/index.tsx

@@ -1,8 +1,8 @@
-import { useFetcher, usePermission } from '@/hooks'
+import { useHttpClient, usePermission } from '@/hooks'
 import { useQueryTriggerStore } from '@/stores'
 import type { ListResponse, PaginationParams } from '@/types'
 import type { FormInstance, FormProps } from 'antd'
-import { Form, Result, Spin, Table } from 'antd'
+import { Form, Result, Table } from 'antd'
 import type { TableProps } from 'antd/es/table'
 import type { AxiosRequestConfig } from 'axios'
 import type { ReactNode } from 'react'
@@ -27,7 +27,7 @@ export interface QueryListProps<Item, Values>
 
 const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: QueryListProps<Item, Values>) => {
   const { code, confirmText, labelCol, swrKey, renderForm, transformArg, initialValues, ...tableProps } = props
-  const { accessible, isValidating } = usePermission(code)
+  const { accessible } = usePermission(code ?? '')
   const [form] = Form.useForm<Values>()
   const setTrigger = useQueryTriggerStore(state => state.setTrigger)
 
@@ -36,7 +36,7 @@ const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: Qu
     perPage: 10,
   })
 
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   const { data, isMutating, trigger } = useSWRMutation(
     swrKey,
@@ -62,10 +62,10 @@ const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: Qu
         ...newPaginationData,
       }
 
-      return fetcher<ListResponse<Item>>({
+      return httpClient.request<ListResponse<Item>>({
         ...key,
-        // TODO: 兼容 params 与 data
-        params: typeof transformArg === 'function' ? transformArg(fetcherArg) : fetcherArg,
+        [key.method === 'POST' ? 'data' : 'params']:
+          typeof transformArg === 'function' ? transformArg(fetcherArg) : fetcherArg,
       })
     },
   )
@@ -96,7 +96,7 @@ const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: Qu
 
   useEffect(() => {
     setTrigger(swrKey, trigger)
-  }, [swrKey, setTrigger, trigger])
+  }, [swrKey, trigger, setTrigger])
 
   useEffect(() => {
     ;(async () => {
@@ -109,19 +109,6 @@ const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: Qu
     })()
   }, [form, trigger])
 
-  if (isValidating) {
-    return (
-      <Spin
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: 200,
-        }}
-      />
-    )
-  }
-
   if (!accessible) {
     return <Result status={403} subTitle="无权限，请联系管理员进行授权" />
   }

package/src/constants/index.ts

@@ -1,3 +1 @@
 export const SSO_URL = 'https://idaas.ifunplus.cn/enduser/api/application/plugin_FunPlus/sso/v1'
-
-export const SECRET = new TextEncoder().encode('cc7e0d44fd473002f1c42167459001140ec6389b7353f8088f4d9a95f2f596f2')

package/src/features/permission/hooks/index.ts

@@ -1,4 +1,4 @@
-import { useFetcher, usePermission } from '@/hooks'
+import { useHttpClient, usePermission } from '@/hooks'
 import useSWR from 'swr'
 import useSWRMutation from 'swr/mutation'
 import type { PermissionEnumItem, RoleEnumItem } from '../types'
@@ -29,7 +29,7 @@ export function useRole(name: string) {
 }
 
 export function useCreateRole() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/role/create',
@@ -40,12 +40,12 @@ export function useCreateRole() {
       }: {
         arg: { name: string; permissions: string[] }
       },
-    ) => fetcher({ method: 'POST', url, data: arg }),
+    ) => httpClient.post(url, arg),
   )
 }
 
 export function useUpdateRole() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/role/update',
@@ -56,12 +56,12 @@ export function useUpdateRole() {
       }: {
         arg: { id: number; name: string; permissions: string[] }
       },
-    ) => fetcher({ method: 'POST', url, data: arg }),
+    ) => httpClient.post(url, arg),
   )
 }
 
 export function useRemoveRole() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/role/delete',
@@ -72,12 +72,12 @@ export function useRemoveRole() {
       }: {
         arg: { id: number; name: string }
       },
-    ) => fetcher({ method: 'POST', url, data: arg }),
+    ) => httpClient.post(url, arg),
   )
 }
 
 export function useCreateUser() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/user/create',
@@ -88,17 +88,12 @@ export function useCreateUser() {
       }: {
         arg: { name: string; roles: string[] }
       },
-    ) =>
-      fetcher({
-        method: 'POST',
-        url,
-        data: arg,
-      }),
+    ) => httpClient.post(url, arg),
   )
 }
 
 export function useUpdateUser() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/user/update',
@@ -109,17 +104,12 @@ export function useUpdateUser() {
       }: {
         arg: { id: string; name: string; roles: string[] }
       },
-    ) =>
-      fetcher({
-        method: 'POST',
-        url,
-        data: arg,
-      }),
+    ) => httpClient.post(url, arg),
   )
 }
 
 export function useRemoveUser() {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
 
   return useSWRMutation(
     '/api/usystem/user/delete',
@@ -130,11 +120,6 @@ export function useRemoveUser() {
       }: {
         arg: { id: string; name: string }
       },
-    ) =>
-      fetcher({
-        method: 'POST',
-        url,
-        data: arg,
-      }),
+    ) => httpClient.post(url, arg),
   )
 }

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './use-fetcher'
+export * from './use-http-client'
 export * from './use-permission'

package/src/hooks/{use-fetcher.tsx → use-http-client.tsx}

@@ -1,10 +1,7 @@
-import { useTokenStore } from '@/stores'
-import type { BackendResponse } from '@/types'
-import { App } from 'antd'
-import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
+import {useTokenStore} from '@/stores'
+import type {AxiosInstance, AxiosRequestConfig} from 'axios'
 import axios from 'axios'
-import { useNavigate } from 'react-router-dom'
-import type { Merge } from 'ts-essentials'
+import type {Merge} from 'ts-essentials'
 
 // 覆盖 AxiosInstance 各种请求方法的返回值，为了方便我们在 interceptors.response 里把 AxiosResponse 直接打平成后端返回的数据，去掉了 axios 的封装。
 type ShimmedAxiosInstance = Merge<
@@ -20,22 +17,19 @@ type ShimmedAxiosInstance = Merge<
   }
 >
 
-export class FetcherError extends Error {
-  code: number
+export class HttpClientError extends Error {
+  code?: number
   // 跳过错误提示
   skip: boolean
 
-  constructor(message: string, code: number, skip = false) {
+  constructor(message: string, code?: number, skip = false) {
     super(message)
     this.code = code
     this.skip = skip
   }
 }
 
-export function useFetcher() {
-  const { notification } = App.useApp()
-  const clearToken = useTokenStore(state => state.clearToken)
-  const navigate = useNavigate()
+export function useHttpClient() {
   const token = useTokenStore(state => state.token)
 
   const defaultOptions: AxiosRequestConfig = {
@@ -56,47 +50,27 @@ export function useFetcher() {
         return response.data.data
       }
 
-      throw new FetcherError(response.data.msg, 0)
+      throw new HttpClientError(response.data.msg, 0)
     },
-    (error: AxiosError<BackendResponse<unknown>>) => {
+    error => {
       if (error.response) {
         // 请求成功发出且服务器也响应了状态码，但状态码超出了 2xx 的范围
         if (error.response.status === 401) {
-          throw new FetcherError('未登录或登录已过期', error.response.status)
+          throw new HttpClientError('未登录或登录已过期', error.response.status)
         } else if (error.response.status === 403) {
-          throw new FetcherError('无权限，请联系管理员进行授权', error.response.status)
+          throw new HttpClientError('无权限，请联系管理员进行授权', error.response.status)
         } else if ([404, 405].includes(error.response.status)) {
-          throw new FetcherError('Not Found or Method not Allowed', error.response.status, true)
+          throw new HttpClientError('Not Found or Method not Allowed', error.response.status, true)
         } else if (error.response.status === 412) {
-          throw new FetcherError('未注册用户', error.response.status)
+          throw new HttpClientError('未注册用户', error.response.status)
         } else {
-          throw new FetcherError(error.response.data?.msg, error.response.status)
+          throw new HttpClientError(error.response.data?.msg, error.response.status)
         }
-      } else if (error.request) {
-        // 请求已经成功发起，但没有收到响应
-        console.log(error.request)
       }
 
-      return Promise.reject(error)
+      throw new HttpClientError('无响应')
     },
   )
 
-  return <T = unknown,>(config: AxiosRequestConfig) =>
-    instance.request<T>(config).catch((err: FetcherError) => {
-      switch (err.code) {
-        case 401:
-        case 412:
-          clearToken()
-          navigate(err.code === 401 ? '/login' : '/login?not_registered=1', { replace: true })
-          break
-        default:
-          if (!err.skip) {
-            notification.error({
-              message: '请求出错',
-              description: err.message,
-            })
-          }
-      }
-      throw err
-    })
+  return instance
 }

package/src/hooks/use-permission.tsx

@@ -1,12 +1,14 @@
 import useSWRImmutable from 'swr/immutable'
-import { useFetcher } from './use-fetcher'
+import { useNavigate } from 'react-router-dom'
+import { useHttpClient } from './use-http-client'
 
 export interface PermissionCheckResult {
   [k: string]: boolean
 }
 
 export function usePermissions(codes: string[]) {
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
+  const navigate = useNavigate()
 
   const { data, isLoading } = useSWRImmutable(
     codes.length > 0
@@ -17,7 +19,7 @@ export function usePermissions(codes: string[]) {
         }
       : null,
     config =>
-      fetcher<PermissionCheckResult>(config).then(res => {
+      httpClient.request<PermissionCheckResult>(config).then(res => {
         if (res.has_all) {
           return codes.reduce(
             (acc, curr) => {
@@ -37,14 +39,18 @@ export function usePermissions(codes: string[]) {
         )
       }),
     {
+      suspense: true,
       shouldRetryOnError: false,
+      onError() {
+        navigate('/login')
+      },
     },
   )
 
   return { data, isLoading }
 }
 
-export function usePermission(code?: string) {
+export function usePermission(code: string) {
   const { data, isLoading } = usePermissions(code ? [code] : [])
 
   if (!code) {

package/src/index.ts

@@ -5,3 +5,4 @@ export * from './hooks'
 export * from './stores'
 export * from './pages'
 export * from './layouts'
+export * from './constants'

package/src/layouts/Layout.tsx

@@ -1,11 +1,14 @@
 import logo from '@/assets/512_orange_nobackground.png'
-import { Layout as AntdLayout, theme } from 'antd'
+import { Alert, Layout as AntdLayout, Spin, theme } from 'antd'
 import type { FC, PropsWithChildren, ReactNode } from 'react'
+import { Suspense } from 'react'
 import { Link } from 'react-router-dom'
 import type { ItemType2 } from './NavBar'
 import NavBar from './NavBar'
+import { usePermission } from '@/hooks'
 
 const { Header, Sider, Content } = AntdLayout
+const { ErrorBoundary } = Alert
 
 export interface LayoutProps {
   title?: ReactNode
@@ -19,45 +22,80 @@ const Layout: FC<PropsWithChildren<LayoutProps>> = props => {
     token: { colorBgContainer, colorBorder },
   } = theme.useToken()
 
+  // 为了验证 token 是否过期的请求，此处无其他用处。
+  usePermission('100001')
+
   return (
     <AntdLayout hasSider className="h-screen">
-      <Sider
-        width={256}
-        style={{
-          overflow: 'auto',
-          height: '100vh',
-          position: 'fixed',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          borderRightWidth: 1,
-          borderRightStyle: 'solid',
-          borderRightColor: colorBorder,
-        }}
-        theme="light"
-      >
-        <div className="flex items-end px-6 py-4">
-          <img src={logo} alt="logo" className="w-8 h-8" />
-          <Link className="font-bold text-lg ml-2" to="/">
-            {title}
-          </Link>
-        </div>
-        <NavBar items={items} />
-      </Sider>
-      <AntdLayout className="ml-64">
-        <Header
-          style={{
-            padding: '0 24px',
-            background: colorBgContainer,
-            borderBottomWidth: 1,
-            borderBottomStyle: 'solid',
-            borderBottomColor: colorBorder,
-          }}
+      <ErrorBoundary>
+        <Suspense
+          fallback={
+            <Spin
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100vw',
+                height: '100vh',
+              }}
+            />
+          }
         >
-          {header}
-        </Header>
-        <Content className="p-6 overflow-auto bg-gray-50">{children}</Content>
-      </AntdLayout>
+          <Sider
+            width={256}
+            style={{
+              overflow: 'auto',
+              height: '100vh',
+              position: 'fixed',
+              left: 0,
+              top: 0,
+              bottom: 0,
+              borderRightWidth: 1,
+              borderRightStyle: 'solid',
+              borderRightColor: colorBorder,
+            }}
+            theme="light"
+          >
+            <div className="flex items-end px-6 py-4">
+              <img src={logo} alt="logo" className="w-8 h-8" />
+              <Link className="font-bold text-lg ml-2" to="/">
+                {title}
+              </Link>
+            </div>
+
+            <NavBar items={items} />
+          </Sider>
+          <AntdLayout className="ml-64">
+            <Header
+              style={{
+                padding: '0 24px',
+                background: colorBgContainer,
+                borderBottomWidth: 1,
+                borderBottomStyle: 'solid',
+                borderBottomColor: colorBorder,
+              }}
+            >
+              {header}
+            </Header>
+            <Content className="p-6 overflow-auto bg-gray-50">
+              <Suspense
+                fallback={
+                  <Spin
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      height: '50vh',
+                    }}
+                  />
+                }
+              >
+                {children}
+              </Suspense>
+            </Content>
+          </AntdLayout>
+        </Suspense>
+      </ErrorBoundary>
     </AntdLayout>
   )
 }

package/src/layouts/NavBar.tsx

@@ -1,6 +1,6 @@
-import { usePermissions } from '@/hooks'
-import { useMenuStore } from '@/stores'
-import { Menu, Spin } from 'antd'
+import {usePermissions} from '@/hooks'
+import {useMenuStore} from '@/stores'
+import {Menu} from 'antd'
 import type {
   ItemType,
   MenuDividerType,
@@ -8,10 +8,10 @@ import type {
   MenuItemType,
   SubMenuType,
 } from 'antd/es/menu/hooks/useItems'
-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'
+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<
@@ -107,7 +107,7 @@ const NavBar: FC<NavBarProps> = props => {
   const location = useLocation()
   const flattenItems = useMemo(() => flatItems(items ?? []), [items])
   const codes = flattenItems.map(item => item.code).filter(Boolean) as string[]
-  const { data: permissions, isLoading } = usePermissions(codes)
+  const { data: permissions } = usePermissions(codes)
   const internalItems = useMemo(() => transformItems(items ?? [], permissions), [items, permissions])
 
   const openKeys = useMenuStore(state => state.openKeys)
@@ -136,19 +136,6 @@ 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' }}

package/src/pages/Login/index.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react'
 import { Navigate, useSearchParams } from 'react-router-dom'
 import useSWRImmutable from 'swr/immutable'
 import Default from './default'
+import { useHttpClient } from '@/hooks'
 
 const { Title } = Typography
 
@@ -16,6 +17,7 @@ const Login: FC<PropsWithChildren> = props => {
   const token = useTokenStore(state => state.token)
   const setToken = useTokenStore(state => state.setToken)
   const [showAlert, setShowAlert] = useState(false)
+  const httpClient = useHttpClient()
 
   const { isLoading } = useSWRImmutable<{ token: string }>(
     searchParams.has('ticket')
@@ -26,6 +28,7 @@ const Login: FC<PropsWithChildren> = props => {
           },
         }
       : null,
+    config => httpClient.request(config),
     {
       onSuccess: data => {
         setToken(data.token)

package/src/pages/NoMatch/index.tsx

@@ -0,0 +1,27 @@
+import { Button, Result } from 'antd'
+import { useNavigate } from 'react-router-dom'
+
+const NoMatch = () => {
+  const navigate = useNavigate()
+  return (
+    <div className="h-screen flex justify-center items-center">
+      <Result
+        status="404"
+        title="404"
+        subTitle="Sorry, the page you visited does not exist."
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              navigate('/')
+            }}
+          >
+            Back Home
+          </Button>
+        }
+      />
+    </div>
+  )
+}
+
+export default NoMatch

package/src/pages/index.ts

@@ -1,4 +1,5 @@
 import Login from './Login'
+import NoMatch from './NoMatch'
 import permission from './permission'
 
-export { Login, permission }
+export { Login, NoMatch, permission }

package/src/pages/permission/RoleList.tsx

@@ -2,7 +2,7 @@ import { Highlight, PermissionButton, QueryList } from '@/components'
 import { useFormModal } from '@/components/FormModal/hooks'
 import type { Role, RoleListItem } from '@/features/permission'
 import { PermissionList, useCreateRole, useRemoveRole, useUpdateRole } from '@/features/permission'
-import { useFetcher, usePermission } from '@/hooks'
+import { useHttpClient, usePermission } from '@/hooks'
 import { useQueryTriggerStore } from '@/stores'
 import { UsergroupAddOutlined } from '@ant-design/icons'
 import type { TableColumnsType } from 'antd'
@@ -17,7 +17,7 @@ export const swrKey = {
 const RoleList = () => {
   const { accessible: viewable } = usePermission('200005')
   const { modal, message } = App.useApp()
-  const fetcher = useFetcher()
+  const httpClient = useHttpClient()
   const create = useCreateRole()
   const remove = useRemoveRole()
   const update = useUpdateRole()
@@ -129,9 +129,7 @@ const RoleList = () => {
                 size="small"
                 type="link"
                 onClick={async () => {
-                  const role = await fetcher<Role>({
-                    method: 'GET',
-                    url: '/api/usystem/role/info',
+                  const role = await httpClient.get<Role>('/api/usystem/role/info', {
                     params: { name: value.name },
                   })
                   showUpdateModal({
@@ -153,11 +151,13 @@ const RoleList = () => {
                 onClick={() => {
                   modal.confirm({
                     title: '删除角色',
-                    content: <Highlight texts={[value.name]}>
-                      确定要删除角色&nbsp;
-                      {value.name}
-&nbsp;吗？
-                    </Highlight>,
+                    content: (
+                      <Highlight texts={[value.name]}>
+                        确定要删除角色&nbsp;
+                        {value.name}
+                        &nbsp;吗？
+                      </Highlight>
+                    ),
                     async onOk() {
                       await remove.trigger(
                         {
@@ -182,7 +182,7 @@ const RoleList = () => {
         },
       },
     ],
-    [trigger, viewable, fetcher, modal, message, remove, showUpdateModal],
+    [trigger, viewable, httpClient, modal, message, remove, showUpdateModal],
   )
 
   return (