react-toolkits 0.0.1

package/src/features/permission/components/PermissionList.tsx

@@ -0,0 +1,129 @@
+import { Checkbox, Collapse, Skeleton, Typography } from 'antd'
+import type { CheckboxChangeEvent } from 'antd/es/checkbox'
+import type { CheckboxValueType } from 'antd/es/checkbox/Group'
+import { useEffect, useState } from 'react'
+import { useAllPermissions } from '../hooks'
+
+const { Text } = Typography
+
+const PermissionList = ({
+  expand = true,
+  value,
+  readonly,
+  onChange,
+}: {
+  expand?: boolean
+  value?: CheckboxValueType[]
+  readonly?: boolean
+  onChange?: (checkedValue: CheckboxValueType[]) => void
+}) => {
+  const [activeKey, setActiveKey] = useState<string[]>([])
+  const [internalValue, setInternalValue] = useState<CheckboxValueType[]>(value ?? [])
+  const { data: permissions, isLoading, error } = useAllPermissions()
+
+  const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    setInternalValue(value ?? [])
+  }, [value])
+
+  useEffect(() => {
+    if (expand) {
+      setActiveKey((permissions ?? []).map(({ category }) => category))
+    }
+  }, [expand, permissions])
+
+  useEffect(() => {
+    const checkedValue = (permissions ?? []).reduce(
+      (acc, curr) => {
+        acc[curr.category] = curr.permissions.every(item => internalValue.includes(item.value))
+        return acc
+      },
+      {} as Record<string, boolean>,
+    )
+
+    setCheckedMap(checkedValue)
+  }, [internalValue, permissions])
+
+  const onCollapseChange = (key: string | string[]) => {
+    setActiveKey(key as string[])
+  }
+
+  const getCheckedValue = (checkedValue: boolean, codes: string[]) => {
+    let tempValue: CheckboxValueType[] = []
+
+    if (checkedValue) {
+      tempValue = [...new Set(internalValue.concat(codes))]
+    } else {
+      tempValue = internalValue.slice()
+
+      codes.forEach(code => {
+        const index = tempValue.findIndex(item => item === code)
+        if (index > -1) {
+          tempValue.splice(index, 1)
+        }
+      })
+    }
+
+    return tempValue
+  }
+
+  const onCheckChange = (e: CheckboxChangeEvent, category: string, codes: string[]) => {
+    const checkedValue = getCheckedValue(e.target.checked, codes)
+    setInternalValue(checkedValue)
+    onChange?.(checkedValue)
+  }
+
+  if (error) {
+    return (
+      <div className="flex justify-center">
+        <Text type="danger">权限获取失败</Text>
+      </div>
+    )
+  }
+
+  return (
+    <Skeleton active loading={isLoading}>
+      <Collapse
+        style={{ width: '100%' }}
+        collapsible="header"
+        activeKey={activeKey}
+        items={(permissions ?? []).map(item => ({
+          key: item.category,
+          label: item.category,
+          extra: !readonly && (
+            <Checkbox
+              checked={checkedMap[item.category]}
+              onChange={e => {
+                onCheckChange(
+                  e,
+                  item.category,
+                  item.permissions.map(permission => permission.value),
+                )
+              }}
+            >
+              全选
+            </Checkbox>
+          ),
+          children: (
+            <Checkbox.Group
+              style={{ width: '100%' }}
+              options={item.permissions.map(permission => ({
+                label: permission.label,
+                value: permission.value,
+                disabled: readonly,
+                onChange(e) {
+                  onCheckChange(e, item.category, [permission.value])
+                },
+              }))}
+              value={internalValue}
+            />
+          ),
+        }))}
+        onChange={onCollapseChange}
+      />
+    </Skeleton>
+  )
+}
+
+export default PermissionList

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

@@ -0,0 +1,140 @@
+import { useFetcher, usePermission } from '@/hooks'
+import useSWR from 'swr'
+import useSWRMutation from 'swr/mutation'
+import type { PermissionEnumItem, RoleEnumItem } from '../types'
+
+export function useAllPermissions() {
+  return useSWR<PermissionEnumItem[]>({
+    url: '/api/usystem/user/allPermssions',
+  })
+}
+
+export function useAllRoles() {
+  const { accessible } = usePermission('200005')
+
+  return useSWR<RoleEnumItem[]>(
+    accessible
+      ? {
+          url: '/api/usystem/role/all',
+        }
+      : null,
+  )
+}
+
+export function useRole(name: string) {
+  return useSWR({
+    url: '/api/usystem/role/info',
+    params: { name },
+  })
+}
+
+export function useCreateRole() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/role/create',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { name: string; permissions: string[] }
+      },
+    ) => fetcher({ method: 'POST', url, data: arg }),
+  )
+}
+
+export function useUpdateRole() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/role/update',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { id: number; name: string; permissions: string[] }
+      },
+    ) => fetcher({ method: 'POST', url, data: arg }),
+  )
+}
+
+export function useRemoveRole() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/role/delete',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { id: number; name: string }
+      },
+    ) => fetcher({ method: 'POST', url, data: arg }),
+  )
+}
+
+export function useCreateUser() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/user/create',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { name: string; roles: string[] }
+      },
+    ) =>
+      fetcher({
+        method: 'POST',
+        url,
+        data: arg,
+      }),
+  )
+}
+
+export function useUpdateUser() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/user/update',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { id: string; name: string; roles: string[] }
+      },
+    ) =>
+      fetcher({
+        method: 'POST',
+        url,
+        data: arg,
+      }),
+  )
+}
+
+export function useRemoveUser() {
+  const fetcher = useFetcher()
+
+  return useSWRMutation(
+    '/api/usystem/user/delete',
+    (
+      url,
+      {
+        arg,
+      }: {
+        arg: { id: string; name: string }
+      },
+    ) =>
+      fetcher({
+        method: 'POST',
+        url,
+        data: arg,
+      }),
+  )
+}

package/src/features/permission/index.ts

@@ -0,0 +1,5 @@
+import PermissionList from './components/PermissionList'
+
+export * from './hooks'
+export * from './types'
+export { PermissionList }

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

@@ -0,0 +1,33 @@
+export interface PermissionEnumItem {
+  category: string
+  permissions: {
+    label: string
+    value: string
+    route: string
+  }[]
+}
+
+export interface RoleEnumItem {
+  id: string
+  name: string
+}
+
+export interface RoleListItem {
+  id: number
+  name: string
+  ctime: string
+}
+
+export interface Role {
+  id: number
+  name: string
+  ctime: string
+  permissions: string[]
+}
+
+export interface UserListItem {
+  id: string
+  name: string
+  ctime: string
+  roles: string[]
+}

package/src/hooks/index.ts

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

package/src/hooks/use-fetcher.tsx

@@ -0,0 +1,102 @@
+import { useTokenStore } from '@/stores'
+import type { BackendResponse } from '@/types'
+import { App } from 'antd'
+import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
+import axios from 'axios'
+import { useNavigate } from 'react-router-dom'
+import type { Merge } from 'ts-essentials'
+
+// 覆盖 AxiosInstance 各种请求方法的返回值，为了方便我们在 interceptors.response 里把 AxiosResponse 直接打平成后端返回的数据，去掉了 axios 的封装。
+type ShimmedAxiosInstance = Merge<
+  AxiosInstance,
+  {
+    request<T = unknown, D = unknown>(config: AxiosRequestConfig<D>): Promise<T>
+    get<T = unknown, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T>
+    delete<T = unknown, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T>
+    head<T = unknown, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T>
+    post<T = unknown, D = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig<D>): Promise<T>
+    put<T = unknown, D = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig<D>): Promise<T>
+    patch<T = unknown, D = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig<D>): Promise<T>
+  }
+>
+
+export class FetcherError extends Error {
+  code: number
+  // 跳过错误提示
+  skip: boolean
+
+  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()
+  const token = useTokenStore(state => state.token)
+
+  const defaultOptions: AxiosRequestConfig = {
+    withCredentials: true,
+  }
+
+  const instance = axios.create(defaultOptions) as ShimmedAxiosInstance
+
+  instance.interceptors.request.use(config => {
+    const headers = config.headers
+    headers.set('Authorization', `Bearer ${token}`)
+    return config
+  })
+
+  instance.interceptors.response.use(
+    response => {
+      if (response.data.code === 0 || response.data.status === 0) {
+        return response.data.data
+      }
+
+      throw new FetcherError(response.data.msg, 0)
+    },
+    (error: AxiosError<BackendResponse<unknown>>) => {
+      if (error.response) {
+        // 请求成功发出且服务器也响应了状态码，但状态码超出了 2xx 的范围
+        if (error.response.status === 401) {
+          throw new FetcherError('未登录或登录已过期', error.response.status)
+        } else if (error.response.status === 403) {
+          throw new FetcherError('无权限，请联系管理员进行授权', error.response.status)
+        } else if ([404, 405].includes(error.response.status)) {
+          throw new FetcherError('Not Found or Method not Allowed', error.response.status, true)
+        } else if (error.response.status === 412) {
+          throw new FetcherError('未注册用户', error.response.status)
+        } else {
+          throw new FetcherError(error.response.data?.msg, error.response.status)
+        }
+      } else if (error.request) {
+        // 请求已经成功发起，但没有收到响应
+        console.log(error.request)
+      }
+
+      return Promise.reject(error)
+    },
+  )
+
+  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
+    })
+}

package/src/hooks/use-permission.tsx

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

package/src/index.ts

@@ -0,0 +1,7 @@
+import './styles/index.css'
+
+export * from './components'
+export * from './hooks'
+export * from './stores'
+export * from './pages'
+export * from './layouts'

package/src/layouts/Layout.tsx

@@ -0,0 +1,81 @@
+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 type { ItemType2 } from './NavBar'
+import NavBar from './NavBar'
+
+const { Header, Sider, Content } = AntdLayout
+
+export interface LayoutProps {
+  title?: ReactNode
+  items: ItemType2[]
+  header?: ReactNode
+}
+
+const Layout: FC<LayoutProps> = props => {
+  const { title, items, header } = props
+  const {
+    token: { colorBgContainer, colorBorder },
+  } = theme.useToken()
+
+  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" />
+          <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',
+                }}
+              />
+            }
+          >
+            <Outlet />
+          </Suspense>
+        </Content>
+      </AntdLayout>
+    </AntdLayout>
+  )
+}
+
+export default Layout