react-toolkits 0.0.7 → 0.1.0

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/{Login → base/Login}/index.tsx

@@ -1,7 +1,7 @@
 import { SSO_URL } from '@/constants'
 import { useTokenStore } from '@/stores'
 import { AliyunOutlined } from '@ant-design/icons'
-import { Alert, Button, Card, Col, Divider, Row, Space, Spin, Typography } from 'antd'
+import { Alert, Button, Card, Col, Divider, Row, Space, Typography } from 'antd'
 import type { FC, PropsWithChildren } from 'react'
 import { useEffect, useState } from 'react'
 import { Navigate, useSearchParams } from 'react-router-dom'
@@ -19,7 +19,7 @@ const Login: FC<PropsWithChildren> = props => {
   const [showAlert, setShowAlert] = useState(false)
   const httpClient = useHttpClient()
 
-  const { isLoading } = useSWRImmutable<{ token: string }>(
+  useSWRImmutable<{ token: string }>(
     searchParams.has('ticket')
       ? {
           url: '/api/usystem/user/login',
@@ -30,6 +30,7 @@ const Login: FC<PropsWithChildren> = props => {
       : null,
     config => httpClient.request(config),
     {
+      suspense: true,
       onSuccess: data => {
         setToken(data.token)
       },
@@ -44,20 +45,6 @@ const Login: FC<PropsWithChildren> = props => {
     }
   }, [searchParams, setSearchParams])
 
-  if (isLoading) {
-    return (
-      <Spin
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '100vw',
-          height: '100vh',
-        }}
-      />
-    )
-  }
-
   if (token) {
     return <Navigate replace to="/" />
   }

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 }

package/src/pages/permission/RoleList/index.tsx

@@ -1,13 +1,13 @@
-import { Highlight, PermissionButton, QueryList } from '@/components'
+import { Highlight, PermissionButton, QueryList, useReactToolkitsContext } from '@/components'
 import { useFormModal } from '@/components/FormModal/hooks'
-import type { Role, RoleListItem } from '@/features/permission'
+import type { RoleListItem, RoleV1, RoleV2 } from '@/features/permission'
 import { PermissionList, useCreateRole, useRemoveRole, useUpdateRole } from '@/features/permission'
 import { useHttpClient, usePermission } from '@/hooks'
 import { useQueryListStore } from '@/stores'
 import { UsergroupAddOutlined } from '@ant-design/icons'
 import type { TableColumnsType } from 'antd'
 import { App, Card, Form, Input, Space } from 'antd'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import type { ListResponse } from '@/types'
 
@@ -15,18 +15,32 @@ export const swrKey = {
   url: '/api/usystem/role/list',
 }
 
-const RoleList = () => {
-  const { accessible: viewable } = usePermission('200005')
-  const { modal, message } = App.useApp()
-  const httpClient = useHttpClient()
-  const create = useCreateRole()
-  const remove = useRemoveRole()
-  const update = useUpdateRole()
+const useCreateModal = () => {
+  const { message } = App.useApp()
   const refresh = useQueryListStore(state => state.refresh)
+  const create = useCreateRole()
 
-  const { showModal: showCreateModal, Modal: CreateModal } = useFormModal<{
+  const onConfirm = useCallback(
+    async (values: { name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }) => {
+      await create.trigger(
+        {
+          name: `role_${values.name}`,
+          permissions: values.permissions,
+        },
+        {
+          async onSuccess() {
+            await message.success('角色创建成功')
+            refresh(swrKey, { page: 1 })
+          },
+        },
+      )
+    },
+    [create, refresh, message],
+  )
+
+  return useFormModal<{
     name: string
-    permissions: string[]
+    permissions: RoleV1['permissions'] | RoleV2['permissions']
   }>({
     title: '创建角色',
     width: '50vw',
@@ -41,26 +55,38 @@ const RoleList = () => {
         </Form.Item>
       </>
     ),
-    async onConfirm(values) {
-      await create.trigger(
+    onConfirm,
+  })
+}
+
+const useUpdateModal = () => {
+  const { message } = App.useApp()
+  const refresh = useQueryListStore(state => state.refresh)
+  const update = useUpdateRole()
+
+  const onConfirm = useCallback(
+    async (values: { id: number; name: string; permissions: RoleV1['permissions'] | RoleV2['permissions'] }) => {
+      await update.trigger(
         {
+          id: values.id,
           name: `role_${values.name}`,
           permissions: values.permissions,
         },
         {
           async onSuccess() {
-            await message.success('角色创建成功')
+            await message.success('角色更新成功')
             refresh(swrKey, { page: 1 })
           },
         },
       )
     },
-  })
+    [update, refresh, message],
+  )
 
-  const { showModal: showUpdateModal, Modal: UpdateModal } = useFormModal<{
+  return useFormModal<{
     id: number
     name: string
-    permissions: string[]
+    permissions: RoleV1['permissions'] | RoleV2['permissions']
   }>({
     title: '更新角色',
     width: '50vw',
@@ -78,22 +104,19 @@ const RoleList = () => {
         </Form.Item>
       </>
     ),
-    async onConfirm(values) {
-      await update.trigger(
-        {
-          id: values.id,
-          name: `role_${values.name}`,
-          permissions: values.permissions,
-        },
-        {
-          async onSuccess() {
-            await message.success('角色更新成功')
-            refresh(swrKey, { page: 1 })
-          },
-        },
-      )
-    },
+    onConfirm,
   })
+}
+
+const RoleList = () => {
+  const { accessible: viewable } = usePermission('200005')
+  const { modal, message } = App.useApp()
+  const httpClient = useHttpClient()
+  const isPermissionV2 = useReactToolkitsContext(state => state.isPermissionV2)
+  const remove = useRemoveRole()
+  const refresh = useQueryListStore(state => state.refresh)
+  const { showModal: showCreateModal, Modal: CreateModal } = useCreateModal()
+  const { showModal: showUpdateModal, Modal: UpdateModal } = useUpdateModal()
 
   const columns = useMemo<TableColumnsType<RoleListItem>>(
     () => [
@@ -130,9 +153,13 @@ const RoleList = () => {
                 size="small"
                 type="link"
                 onClick={async () => {
-                  const role = await httpClient.get<Role>('/api/usystem/role/info', {
-                    params: { name: value.name },
-                  })
+                  const role = await httpClient.get<RoleV1 | RoleV2>(
+                    isPermissionV2 ? '/api/usystem/role/infoV2' : '/api/usystem/role/info',
+                    {
+                      params: { name: value.name },
+                    },
+                  )
+
                   showUpdateModal({
                     initialValues: {
                       id: role?.id,

package/src/pages/permission/UserList/index.tsx

@@ -23,7 +23,7 @@ function useCreatingUserModal() {
   const refresh = useQueryListStore(state => state.refresh)
 
   return useFormModal<{ id: string; name: string; roles: string[] }>({
-    title: '创建角色',
+    title: '创建用户',
     labelCol: { flex: '80px' },
     content: (
       <>
@@ -63,7 +63,7 @@ function useUpdatingUserModal() {
   const refresh = useQueryListStore(state => state.refresh)
 
   return useFormModal<{ id: string; name: string; roles: string[] }>({
-    title: '更新角色',
+    title: '更新用户',
     labelCol: { flex: '80px' },
     content: (
       <>

package/src/pages/permission/index.tsx

@@ -1,13 +1,38 @@
 import { lazy } from 'react'
 import type { RouteObject } from 'react-router-dom'
-import { Navigate } from 'react-router-dom'
+import { Navigate, Outlet } from 'react-router-dom'
+import { Layout, ReactToolkitsProvider, useReactToolkitsContext } from '@/components'
+import { SWRConfig } from 'swr'
+import { useHttpClient } from '@/hooks'
 
 const UserList = lazy(() => import('./UserList'))
 const RoleList = lazy(() => import('./RoleList'))
 const RoleDetail = lazy(() => import('./RoleDetail'))
 
+const PermissionRoot = () => {
+  const httpClient = useHttpClient()
+  const configs = useReactToolkitsContext(state => state)
+
+  return (
+    // NOTE: 目前嵌套的 ReactToolkitsProvider 只能手动注入父级 ReactToolkitsProvider 的配置
+    <ReactToolkitsProvider {...configs} isGlobalNS>
+      <SWRConfig
+        value={{
+          fetcher: httpClient.request,
+          shouldRetryOnError: false,
+        }}
+      >
+        <Layout>
+          <Outlet />
+        </Layout>
+      </SWRConfig>
+    </ReactToolkitsProvider>
+  )
+}
+
 const routes: RouteObject = {
   path: 'permission',
+  element: <PermissionRoot />,
   children: [
     {
       index: true,

package/src/stores/index.ts

@@ -1,3 +1,2 @@
-export * from './menu'
 export * from './token'
 export * from './query-list'

package/src/stores/token.ts

@@ -1,16 +1,30 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+import jwtDecode from 'jwt-decode'
+
+interface UserInfo {
+  authorityId: string
+  exp: number
+}
 
 export interface TokenState {
   token: string
+  getUser: () => UserInfo | null
   setToken: (token: string) => void
   clearToken: () => void
 }
 
 export const useTokenStore = create<TokenState>()(
   persist(
-    set => ({
+    (set, get) => ({
       token: '',
+      getUser: () => {
+        try {
+          return jwtDecode(get().token) as UserInfo
+        } catch (_) {
+          return null
+        }
+      },
       setToken: token => set({ token }),
       clearToken: () => {
         set({ token: '' })