react-toolkits 0.0.8 → 0.1.0

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

@@ -1,129 +1,28 @@
-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'
+import type { RoleV1, RoleV2 } from '@/features/permission'
+import { useReactToolkitsContext } from '@/components'
+import type { FC } from 'react'
+import PermissionListV1 from '../PermissionListV1'
+import PermissionListV2 from '../PermissionListV2'
 
-const { Text } = Typography
-
-const PermissionList = ({
-  expand = true,
-  value,
-  readonly,
-  onChange,
-}: {
+export interface PermissionListPropsBase {
   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
-  }
+interface PermissionListProps extends PermissionListPropsBase {
+  value?: RoleV1['permissions'] | RoleV2['permissions']
+  onChange?: (checkedValue: RoleV1['permissions'] | RoleV2['permissions']) => void
+}
 
-  const onCheckChange = (e: CheckboxChangeEvent, category: string, codes: string[]) => {
-    const checkedValue = getCheckedValue(e.target.checked, codes)
-    setInternalValue(checkedValue)
-    onChange?.(checkedValue)
-  }
+const PermissionList: FC<PermissionListProps> = (props: PermissionListProps) => {
+  const { value } = props
+  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
 
-  if (error) {
-    return (
-      <div className="flex justify-center">
-        <Text type="danger">权限获取失败</Text>
-      </div>
-    )
+  if (isPermissionV2) {
+    return <PermissionListV2 {...props} value={value as RoleV2['permissions']} />
   }
 
-  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>
-  )
+  return <PermissionListV1 {...props} value={value as RoleV1['permissions']} />
 }
 
 export default PermissionList

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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,146 @@
+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,7 +1,9 @@
 import { useHttpClient, usePermission } from '@/hooks'
 import useSWR from 'swr'
 import useSWRMutation from 'swr/mutation'
-import type { PermissionEnumItem, RoleEnumItem } from '../types'
+import type { PermissionEnumItem, RoleEnumItem, RoleV1, RoleV2 } from '../types'
+import type { GameType } from '@/components/GameSelect'
+import { useReactToolkitsContext } from '@/components'
 
 export function useAllPermissions() {
   return useSWR<PermissionEnumItem[]>({
@@ -9,6 +11,15 @@ export function useAllPermissions() {
   })
 }
 
+export function useAllPermissionsV2() {
+  return useSWR<{
+    game: GameType[]
+    permission: PermissionEnumItem[]
+  }>({
+    url: '/api/usystem/user/allPermissionsV2',
+  })
+}
+
 export function useAllRoles() {
   const { accessible } = usePermission('200005')
 
@@ -22,23 +33,26 @@ export function useAllRoles() {
 }
 
 export function useRole(name: string) {
-  return useSWR({
-    url: '/api/usystem/role/info',
+  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(
-    '/api/usystem/role/create',
+    isPermissionV2 ? '/api/usystem/role/createV2' : '/api/usystem/role/create',
     (
-      url,
+      url: string,
       {
         arg,
       }: {
-        arg: { name: string; permissions: string[] }
+        arg: { name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }
       },
     ) => httpClient.post(url, arg),
   )
@@ -46,15 +60,16 @@ export function useCreateRole() {
 
 export function useUpdateRole() {
   const httpClient = useHttpClient()
+  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
 
   return useSWRMutation(
-    '/api/usystem/role/update',
+    isPermissionV2 ? '/api/usystem/role/updateV2' : '/api/usystem/role/update',
     (
-      url,
+      url: string,
       {
         arg,
       }: {
-        arg: { id: number; name: string; permissions: string[] }
+        arg: { id: number; name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }
       },
     ) => httpClient.post(url, arg),
   )

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

@@ -18,13 +18,20 @@ export interface RoleListItem {
   ctime: string
 }
 
-export interface Role {
+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

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

@@ -2,6 +2,7 @@ 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<
@@ -31,6 +32,7 @@ export class HttpClientError extends Error {
 
 export function useHttpClient() {
   const token = useTokenStore(state => state.token)
+  const { game, isGlobalNS, isPermissionV2 } = useReactToolkitsContext(state => state)
 
   const defaultOptions: AxiosRequestConfig = {
     withCredentials: true,
@@ -41,6 +43,13 @@ export function useHttpClient() {
   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
   })
 

package/src/hooks/use-permission.tsx

@@ -1,21 +1,29 @@
 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[]) {
+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: '/api/usystem/user/check',
+          url,
           data: { permissions: codes },
+          headers: isGlobalNS
+            ? {
+                'App-ID': 'global',
+              }
+            : {},
         }
       : null,
     config =>

package/src/index.ts

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

package/src/pages/{NoMatch → base/NotFound}/index.tsx

@@ -1,14 +1,14 @@
 import { Button, Result } from 'antd'
 import { useNavigate } from 'react-router-dom'
 
-const NoMatch = () => {
+const NotFound = () => {
   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."
+        subTitle="访问的页面不存在"
         extra={
           <Button
             type="primary"
@@ -16,7 +16,7 @@ const NoMatch = () => {
               navigate('/')
             }}
           >
-            Back Home
+            返回页面
           </Button>
         }
       />
@@ -24,4 +24,4 @@ const NoMatch = () => {
   )
 }
 
-export default NoMatch
+export default NotFound

package/src/pages/base/index.tsx

@@ -0,0 +1,20 @@
+import { lazy } from 'react'
+import type { RouteObject } from 'react-router-dom'
+
+const Login = lazy(() => import('./Login'))
+const NotFound = lazy(() => import('./NotFound'))
+
+const routes: RouteObject = {
+  children: [
+    {
+      path: 'login',
+      element: <Login />,
+    },
+    {
+      path: '*',
+      element: <NotFound />,
+    },
+  ],
+}
+
+export default routes

package/src/pages/index.ts

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