react-toolkits 0.1.1 → 0.1.2

package/src/features/permission/components/PermissionCollapse/index.tsx

@@ -1,121 +0,0 @@
-import type { PermissionEnumItem } from '@/features/permission'
-import type { FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
-import type { CheckboxChangeEvent } from 'antd/es/checkbox'
-import { Checkbox, Col, Collapse, Row } from 'antd'
-
-const { Panel } = Collapse
-
-interface PermissionCollapseProps {
-  expand?: boolean
-  permissions?: PermissionEnumItem[]
-  readonly?: boolean
-  value?: string[]
-  onChange?: (value: string[]) => void
-}
-
-const PermissionCollapse: FC<PermissionCollapseProps> = props => {
-  const { permissions, readonly, expand, value, onChange } = props
-  const [activeKey, setActiveKey] = useState<string[]>([])
-  const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>({})
-  const [internalValue, setInternalValue] = useState<string[]>(value ?? [])
-
-  const onCollapseChange = useCallback((key: string | string[]) => {
-    setActiveKey(key as string[])
-  }, [])
-
-  const getCheckedValue = (checkedValue: boolean, codes: string[]) => {
-    let tempValue: string[] = []
-
-    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)
-  }
-
-  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])
-
-  return (
-    <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%' }} value={internalValue}>
-            <Row gutter={[10, 10]} style={{ width: '100%' }}>
-              {item.permissions.map(permission => (
-                <Col key={permission.value} span={6}>
-                  <Checkbox
-                    disabled={readonly}
-                    value={permission.value}
-                    onChange={e => {
-                      onCheckChange(e, item.category, [permission.value])
-                    }}
-                  >
-                    {permission.label}
-                  </Checkbox>
-                </Col>
-              ))}
-            </Row>
-          </Checkbox.Group>
-        ),
-      }))}
-      onChange={onCollapseChange}
-    />
-  )
-}
-
-export default PermissionCollapse

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

@@ -1,28 +0,0 @@
-import type { RoleV1, RoleV2 } from '@/features/permission'
-import { useReactToolkitsContext } from '@/components'
-import type { FC } from 'react'
-import PermissionListV1 from '../PermissionListV1'
-import PermissionListV2 from '../PermissionListV2'
-
-export interface PermissionListPropsBase {
-  expand?: boolean
-  readonly?: boolean
-}
-
-interface PermissionListProps extends PermissionListPropsBase {
-  value?: RoleV1['permissions'] | RoleV2['permissions']
-  onChange?: (checkedValue: RoleV1['permissions'] | RoleV2['permissions']) => void
-}
-
-const PermissionList: FC<PermissionListProps> = (props: PermissionListProps) => {
-  const { value } = props
-  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
-
-  if (isPermissionV2) {
-    return <PermissionListV2 {...props} value={value as RoleV2['permissions']} />
-  }
-
-  return <PermissionListV1 {...props} value={value as RoleV1['permissions']} />
-}
-
-export default PermissionList

package/src/features/permission/components/PermissionListV1/index.tsx

@@ -1,42 +0,0 @@
-import { Skeleton, Typography } from 'antd'
-import { useAllPermissions } from '../../hooks'
-import PermissionCollapse from '../PermissionCollapse'
-import type { RoleV1 } from '../../types'
-import type { PermissionListPropsBase } from '../PermissionList'
-import type { FC } from 'react'
-
-const { Text } = Typography
-
-interface PermissionListV1Props extends PermissionListPropsBase {
-  value?: RoleV1['permissions']
-  onChange?: (checkedValue: RoleV1['permissions']) => void
-}
-
-const PermissionListV1: FC<PermissionListV1Props> = props => {
-  const { expand = true, value, readonly, onChange } = props
-  const { data: permissions, isLoading, error } = useAllPermissions()
-
-  if (error) {
-    return (
-      <div className="flex justify-center">
-        <Text type="danger">权限获取失败</Text>
-      </div>
-    )
-  }
-
-  return (
-    <Skeleton active loading={isLoading}>
-      <PermissionCollapse
-        value={value}
-        permissions={permissions}
-        readonly={readonly}
-        expand={expand}
-        onChange={newValue => {
-          onChange?.(newValue)
-        }}
-      />
-    </Skeleton>
-  )
-}
-
-export default PermissionListV1

package/src/features/permission/components/PermissionListV2/index.tsx

@@ -1,146 +0,0 @@
-import { Button, Card, Divider, Empty, Select, Skeleton, Space, Typography } from 'antd'
-import type { FC } from 'react'
-import { useEffect, useState } from 'react'
-import type { RoleV2 } from '../../types'
-import { useAllPermissionsV2 } from '../../hooks'
-import PermissionCollapse from '../PermissionCollapse'
-import type { PermissionListPropsBase } from '../PermissionList'
-
-const { Text } = Typography
-const { Option } = Select
-
-interface PermissionListV2Props extends PermissionListPropsBase {
-  value?: RoleV2['permissions']
-  onChange?: (checkedValue: RoleV2['permissions']) => void
-}
-
-const PermissionListV2: FC<PermissionListV2Props> = props => {
-  const { expand = true, value, readonly, onChange } = props
-  const { data: permissions, isLoading, error } = useAllPermissionsV2()
-  const [gameList, setGameList] = useState<{ gameId: string; permissions: string[] }[]>([])
-
-  useEffect(() => {
-    const list: { gameId: string; permissions: string[] }[] = []
-
-    Object.keys(value ?? {}).forEach(key => {
-      if (key !== 'global') {
-        list.push({ gameId: key, permissions: value?.[key] ?? [] })
-      }
-    })
-
-    setGameList(list)
-  }, [value])
-
-  if (error) {
-    return (
-      <div className="flex justify-center">
-        <Text type="danger">权限获取失败</Text>
-      </div>
-    )
-  }
-
-  const addGame = () => {
-    setGameList(prev => [...prev, { gameId: '', permissions: [] }])
-  }
-
-  const removeGame = (index: number) => {
-    setGameList(prev => prev.filter((_, i) => i !== index))
-  }
-
-  return (
-    <div className="flex flex-col w-full">
-      <div className="mb-12">
-        <Divider dashed>平台基础权限</Divider>
-      </div>
-      <Skeleton active loading={isLoading}>
-        <PermissionCollapse
-          value={value?.global}
-          readonly={readonly}
-          permissions={permissions?.permission?.slice(0, 2)}
-          expand={expand}
-          onChange={newValue => {
-            onChange?.({
-              ...value,
-              global: newValue,
-            })
-          }}
-        />
-      </Skeleton>
-      <div className="my-12">
-        <Divider dashed>游戏权限</Divider>
-      </div>
-      {gameList.map((item, index) => (
-        <Card
-          title={
-            <Space>
-              <Text>游戏</Text>
-              {readonly ? (
-                <Text>{permissions?.game?.find(game => game.id === item.gameId)?.name}</Text>
-              ) : (
-                <Select
-                  disabled={readonly}
-                  value={gameList[index].gameId || undefined}
-                  style={{ width: '160px' }}
-                  placeholder="请选择游戏"
-                  onChange={selectedValue => {
-                    setGameList(pev => {
-                      const temp = pev.slice()
-                      temp[index].gameId = selectedValue
-                      return temp
-                    })
-                  }}
-                >
-                  {permissions?.game?.map(game => (
-                    <Option key={game.id} value={game.id} disabled={gameList.some(({ gameId }) => gameId === game.id)}>
-                      {game.name}
-                    </Option>
-                  ))}
-                </Select>
-              )}
-            </Space>
-          }
-          key={index}
-          className="mb-6"
-          extra={
-            !readonly && (
-              <Button
-                type="link"
-                onClick={() => {
-                  removeGame(index)
-                }}
-              >
-                移除
-              </Button>
-            )
-          }
-        >
-          {gameList[index].gameId ? (
-            <Skeleton active loading={isLoading}>
-              <PermissionCollapse
-                value={value?.[gameList[index].gameId]}
-                readonly={readonly}
-                expand={expand}
-                permissions={permissions?.permission?.slice(2)}
-                onChange={newValue => {
-                  onChange?.({
-                    ...value,
-                    [gameList[index].gameId]: newValue,
-                  })
-                }}
-              />
-            </Skeleton>
-          ) : (
-            <Empty description="请先选择游戏" />
-          )}
-        </Card>
-      ))}
-      {!readonly && (
-        <Button block type="dashed" onClick={addGame}>
-          添加游戏权限
-        </Button>
-      )}
-    </div>
-  )
-}
-
-export default PermissionListV2

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

@@ -1,140 +0,0 @@
-import { useHttpClient, usePermission } from '@/hooks'
-import useSWR from 'swr'
-import useSWRMutation from 'swr/mutation'
-import type { PermissionEnumItem, RoleEnumItem, RoleV1, RoleV2 } from '../types'
-import type { GameType } from '@/components/GameSelect'
-import { useReactToolkitsContext } from '@/components'
-
-export function useAllPermissions() {
-  return useSWR<PermissionEnumItem[]>({
-    url: '/api/usystem/user/allPermssions',
-  })
-}
-
-export function useAllPermissionsV2() {
-  return useSWR<{
-    game: GameType[]
-    permission: PermissionEnumItem[]
-  }>({
-    url: '/api/usystem/user/allPermissionsV2',
-  })
-}
-
-export function useAllRoles() {
-  const { accessible } = usePermission('200005')
-
-  return useSWR<RoleEnumItem[]>(
-    accessible
-      ? {
-          url: '/api/usystem/role/all',
-        }
-      : null,
-  )
-}
-
-export function useRole(name: string) {
-  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
-
-  return useSWR<RoleV1 | RoleV2>({
-    url: isPermissionV2 ? '/api/usystem/role/infoV2' : '/api/usystem/role/info',
-    params: { name },
-  })
-}
-
-export function useCreateRole() {
-  const httpClient = useHttpClient()
-  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
-
-  return useSWRMutation(
-    isPermissionV2 ? '/api/usystem/role/createV2' : '/api/usystem/role/create',
-    (
-      url: string,
-      {
-        arg,
-      }: {
-        arg: { name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}
-
-export function useUpdateRole() {
-  const httpClient = useHttpClient()
-  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
-
-  return useSWRMutation(
-    isPermissionV2 ? '/api/usystem/role/updateV2' : '/api/usystem/role/update',
-    (
-      url: string,
-      {
-        arg,
-      }: {
-        arg: { id: number; name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}
-
-export function useRemoveRole() {
-  const httpClient = useHttpClient()
-
-  return useSWRMutation(
-    '/api/usystem/role/delete',
-    (
-      url,
-      {
-        arg,
-      }: {
-        arg: { id: number; name: string }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}
-
-export function useCreateUser() {
-  const httpClient = useHttpClient()
-
-  return useSWRMutation(
-    '/api/usystem/user/create',
-    (
-      url,
-      {
-        arg,
-      }: {
-        arg: { name: string; roles: string[] }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}
-
-export function useUpdateUser() {
-  const httpClient = useHttpClient()
-
-  return useSWRMutation(
-    '/api/usystem/user/update',
-    (
-      url,
-      {
-        arg,
-      }: {
-        arg: { id: string; name: string; roles: string[] }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}
-
-export function useRemoveUser() {
-  const httpClient = useHttpClient()
-
-  return useSWRMutation(
-    '/api/usystem/user/delete',
-    (
-      url,
-      {
-        arg,
-      }: {
-        arg: { id: string; name: string }
-      },
-    ) => httpClient.post(url, arg),
-  )
-}

package/src/features/permission/index.ts

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

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

@@ -1,40 +0,0 @@
-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 RoleV1 {
-  id: number
-  name: string
-  ctime: string
-  permissions: string[]
-}
-
-export interface RoleV2 {
-  id: number
-  name: string
-  ctime: string
-  permissions: Record<string, string[]>
-}
-
-export interface UserListItem {
-  id: string
-  name: string
-  ctime: string
-  roles: string[]
-}

package/src/hooks/index.ts

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

package/src/hooks/use-http-client.ts

@@ -1,85 +0,0 @@
-import {useTokenStore} from '@/stores'
-import type {AxiosInstance, AxiosRequestConfig} from 'axios'
-import axios from 'axios'
-import type {Merge} from 'ts-essentials'
-import {useReactToolkitsContext} from '@/components'
-
-// 覆盖 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 HttpClientError extends Error {
-  code?: number
-  // 跳过错误提示
-  skip: boolean
-
-  constructor(message: string, code?: number, skip = false) {
-    super(message)
-    this.code = code
-    this.skip = skip
-  }
-}
-
-export function useHttpClient() {
-  const token = useTokenStore(state => state.token)
-  const { game, isGlobalNS, isPermissionV2 } = useReactToolkitsContext(state => state)
-
-  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}`)
-
-    if (isPermissionV2) {
-      if (!headers.has('App-ID')) {
-        headers.set('App-ID', isGlobalNS ? 'global' : game?.id)
-      }
-    }
-
-    return config
-  })
-
-  instance.interceptors.response.use(
-    response => {
-      if (response.data.code === 0 || response.data.status === 0) {
-        return response.data.data
-      }
-
-      throw new HttpClientError(response.data.msg, 0)
-    },
-    error => {
-      if (error.response) {
-        // 请求成功发出且服务器也响应了状态码，但状态码超出了 2xx 的范围
-        if (error.response.status === 401) {
-          throw new HttpClientError('未登录或登录已过期', error.response.status)
-        } else if (error.response.status === 403) {
-          throw new HttpClientError('无权限，请联系管理员进行授权', error.response.status)
-        } else if ([404, 405].includes(error.response.status)) {
-          throw new HttpClientError('Not Found or Method not Allowed', error.response.status, true)
-        } else if (error.response.status === 412) {
-          throw new HttpClientError('未注册用户', error.response.status)
-        } else {
-          throw new HttpClientError(error.response.data?.msg, error.response.status)
-        }
-      }
-
-      throw new HttpClientError('无响应')
-    },
-  )
-
-  return instance
-}

package/src/hooks/use-permission.ts

@@ -1,75 +0,0 @@
-import useSWRImmutable from 'swr/immutable'
-import { useNavigate } from 'react-router-dom'
-import { useHttpClient } from './use-http-client'
-import { useReactToolkitsContext } from '@/components'
-
-export interface PermissionCheckResult {
-  [k: string]: boolean
-}
-
-export function usePermissions(codes: string[], isGlobalNS = false) {
-  const httpClient = useHttpClient()
-  const navigate = useNavigate()
-  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
-  const url = isPermissionV2 ? '/api/usystem/user/checkV2' : '/api/usystem/user/check'
-
-  const { data, isLoading } = useSWRImmutable(
-    codes.length > 0
-      ? {
-          method: 'POST',
-          url,
-          data: { permissions: codes },
-          headers: isGlobalNS
-            ? {
-                'App-ID': 'global',
-              }
-            : {},
-        }
-      : null,
-    config =>
-      httpClient.request<PermissionCheckResult>(config).then(res => {
-        if (res.has_all) {
-          return codes.reduce(
-            (acc, curr) => {
-              acc[curr] = true
-              return acc
-            },
-            {} as Record<string, boolean>,
-          )
-        }
-
-        return codes.reduce(
-          (acc, curr) => {
-            acc[curr] = (res as Record<string, boolean>)[curr]
-            return acc
-          },
-          {} as Record<string, boolean>,
-        )
-      }),
-    {
-      suspense: true,
-      shouldRetryOnError: false,
-      onError() {
-        navigate('/login')
-      },
-    },
-  )
-
-  return { data, isLoading }
-}
-
-export function usePermission(code: string) {
-  const { data, isLoading } = usePermissions(code ? [code] : [])
-
-  if (!code) {
-    return {
-      accessible: true,
-      isValidating: false,
-    }
-  }
-
-  return {
-    accessible: data?.[code] ?? false,
-    isValidating: isLoading,
-  }
-}

package/src/index.ts

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