react-toolkits 0.0.8 → 0.1.0

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/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: '' })

package/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   entry: ['src/index.ts'],
   format: ['esm'],
   sourcemap: true,
-  minify: isProduction,
+  minify: false,
   treeshake: true,
   splitting: false,
   dts: true,

package/src/layouts/Layout.tsx

@@ -1,103 +0,0 @@
-import logo from '@/assets/512_orange_nobackground.png'
-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
-  items: ItemType2[]
-  header?: ReactNode
-}
-
-const Layout: FC<PropsWithChildren<LayoutProps>> = props => {
-  const { title, items, header, children } = props
-  const {
-    token: { colorBgContainer, colorBorder },
-  } = theme.useToken()
-
-  // 为了验证 token 是否过期的请求，此处无其他用处。
-  usePermission('100001')
-
-  return (
-    <AntdLayout hasSider className="h-screen">
-      <ErrorBoundary>
-        <Suspense
-          fallback={
-            <Spin
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                width: '100vw',
-                height: '100vh',
-              }}
-            />
-          }
-        >
-          <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>
-  )
-}
-
-export default Layout

package/src/layouts/index.ts

@@ -1,6 +0,0 @@
-import type { LayoutProps } from './Layout'
-import Layout from './Layout'
-import type { ItemType2, NavBarProps } from './NavBar'
-
-export { Layout }
-export type { ItemType2, LayoutProps, NavBarProps }

package/src/stores/menu.ts

@@ -1,27 +0,0 @@
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-
-export interface MenuState {
-  openKeys: string[]
-  selectedKeys: string[]
-  setOpenKeys: (keys: string[]) => void
-  setSelectedKeys: (keys: string[]) => void
-}
-
-export const useMenuStore = create<MenuState>()(
-  persist(
-    set => ({
-      openKeys: [],
-      selectedKeys: [],
-      setOpenKeys: keys => set({ openKeys: keys }),
-      setSelectedKeys: keys => set({ selectedKeys: keys }),
-    }),
-    {
-      name: 'menu',
-      partialize: state => ({
-        openKeys: state.openKeys,
-        selectedKeys: state.selectedKeys,
-      }),
-    },
-  ),
-)