react-toolkits 0.0.7 → 0.1.0

package/src/components/Layout/index.tsx

@@ -0,0 +1,90 @@
+import logo from '@/assets/512_orange_nobackground.png'
+import * as Antd from 'antd'
+import { Divider, Space } from 'antd'
+import type { FC, PropsWithChildren } from 'react'
+import * as React from 'react'
+import { Suspense } from 'react'
+import { Link } from 'react-router-dom'
+import { GameSelect, NavMenu, useReactToolkitsContext, UserWidget } from '@/components'
+
+const { Spin, theme } = Antd
+const { Header, Sider, Content } = Antd.Layout
+
+export interface LayoutProps extends PropsWithChildren {
+  extra?: React.ReactNode
+}
+
+const Layout: FC<LayoutProps> = props => {
+  const { children, extra } = props
+  const {
+    token: { colorBgContainer, colorBorder },
+  } = theme.useToken()
+  const title = useReactToolkitsContext(state => state.title)
+
+  return (
+    <Antd.Layout 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 h-8" />
+          <Link className="font-bold text-lg ml-2" to="/">
+            {title}
+          </Link>
+        </div>
+        <NavMenu />
+      </Sider>
+      <Antd.Layout className="ml-64">
+        <Header
+          style={{
+            padding: '0 24px',
+            background: colorBgContainer,
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: colorBorder,
+          }}
+        >
+          <div className="flex justify-between items-center h-full">
+            <div>
+              <GameSelect />
+            </div>
+            <Space size="small" split={<Divider type="vertical" />}>
+              {extra}
+              <UserWidget />
+            </Space>
+          </div>
+        </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>
+      </Antd.Layout>
+    </Antd.Layout>
+  )
+}
+
+export default Layout

package/src/{layouts/NavBar.tsx → components/NavMenu/index.tsx}

@@ -1,5 +1,4 @@
 import {usePermissions} from '@/hooks'
-import {useMenuStore} from '@/stores'
 import {Menu} from 'antd'
 import type {
   ItemType,
@@ -8,10 +7,11 @@ import type {
   MenuItemType,
   SubMenuType,
 } from 'antd/es/menu/hooks/useItems'
-import type {FC, ReactNode} from 'react'
+import type {ReactNode} from 'react'
 import {useCallback, useEffect, useMemo} from 'react'
 import {Link, useLocation} from 'react-router-dom'
 import type {Merge} from 'ts-essentials'
+import {useReactToolkitsContext} from '@/components'
 
 // 扩展 antd Menu 的类型，使其支持一些我们想要的自定义字段。
 type MenuItemType2 = Merge<
@@ -98,29 +98,20 @@ function flatItems(
   return result
 }
 
-export interface NavBarProps {
-  items: ItemType2[]
-}
-
-const NavBar: FC<NavBarProps> = props => {
-  const { items } = props
+const NavMenu = () => {
   const location = useLocation()
+  const items = useReactToolkitsContext(state => state.menuItems)
   const flattenItems = useMemo(() => flatItems(items ?? []), [items])
   const codes = flattenItems.map(item => item.code).filter(Boolean) as string[]
-  const { data: permissions } = usePermissions(codes)
+  const { data: permissions } = usePermissions(codes, true)
   const internalItems = useMemo(() => transformItems(items ?? [], permissions), [items, permissions])
-
-  const openKeys = useMenuStore(state => state.openKeys)
-  const selectedKeys = useMenuStore(state => state.selectedKeys)
-  const setOpenKeys = useMenuStore(state => state.setOpenKeys)
-  const setSelectedKeys = useMenuStore(state => state.setSelectedKeys)
+  const { openKeys, selectedKeys, setOpenKeys, setSelectedKeys } = useReactToolkitsContext(state => state)
 
   const onOpenChange = useCallback(
     (keys: string[]) => {
       const latestOpenKey = keys?.find(key => openKeys?.indexOf(key) === -1)
       const match = flattenItems.find(item => latestOpenKey === item.key)
-      const _openKeys = (match?.keypath ?? [latestOpenKey]) as string[]
-      setOpenKeys(_openKeys)
+      setOpenKeys((match?.keypath ?? [latestOpenKey]) as string[])
     },
     [flattenItems, openKeys, setOpenKeys],
   )
@@ -148,4 +139,4 @@ const NavBar: FC<NavBarProps> = props => {
   )
 }
 
-export default NavBar
+export default NavMenu

package/src/components/ReactToolkitsProvider/context.ts

@@ -0,0 +1,76 @@
+import {create, useStore} from 'zustand'
+import {createContext, useContext} from 'react'
+import type {StateStorage} from 'zustand/middleware'
+import {createJSONStorage, persist} from 'zustand/middleware'
+import type {GameType} from '../GameSelect'
+import type {ItemType2} from '../NavMenu'
+
+// SessionStorage 在同一域下的不同页面间是隔离的，用于防止多开页面时的数据冲突
+const mixedStorage: StateStorage = {
+  getItem: (name: string): string | null => {
+    return sessionStorage.getItem(name) || localStorage.getItem(name)
+  },
+  setItem: (name: string, value: string) => {
+    localStorage.setItem(name, value)
+    sessionStorage.setItem(name, value)
+  },
+  removeItem: async (name: string) => {
+    localStorage.removeItem(name)
+    sessionStorage.removeItem(name)
+  },
+}
+
+export interface ReactToolkitsState {
+  title: string
+  isPermissionV2: boolean
+  isGlobalNS: boolean
+  game: GameType | null
+  setGame: (game: GameType | null) => void
+  openKeys: string[]
+  selectedKeys: string[]
+  setOpenKeys: (keys: string[]) => void
+  setSelectedKeys: (keys: string[]) => void
+  menuItems: ItemType2[]
+}
+
+export type ReactToolkitsStore = ReturnType<typeof createReactToolkitsStore>
+
+export const createReactToolkitsStore = () => {
+  return create<ReactToolkitsState>()(
+    persist(
+      set => ({
+        title: '',
+        isPermissionV2: false,
+        isGlobalNS: false,
+        game: null,
+        setGame: game => set({ game }),
+        openKeys: [],
+        setOpenKeys: keys => set({ openKeys: keys }),
+        selectedKeys: [],
+        setSelectedKeys: keys => set({ selectedKeys: keys }),
+        menuItems: [],
+      }),
+      {
+        name: 'ReactToolkits',
+        storage: createJSONStorage(() => mixedStorage),
+        partialize: state => ({
+          title: state.title,
+          game: state.game,
+          openKeys: state.openKeys,
+          selectedKeys: state.selectedKeys,
+        }),
+      },
+    ),
+  )
+}
+
+export const ReactToolkitsContext = createContext<ReactToolkitsStore | null>(null)
+
+export function useReactToolkitsContext<T>(
+  selector: (state: ReactToolkitsState) => T,
+  equalityFn?: (left: T, right: T) => boolean,
+): T {
+  const store = useContext(ReactToolkitsContext)
+  if (!store) throw new Error('Missing ReactToolkitsContext.Provider in the tree')
+  return useStore(store, selector, equalityFn)
+}

package/src/components/ReactToolkitsProvider/index.tsx

@@ -0,0 +1,23 @@
+import type { FC, PropsWithChildren } from 'react'
+import { useEffect, useRef } from 'react'
+import type { ReactToolkitsState, ReactToolkitsStore } from './context'
+import { createReactToolkitsStore, ReactToolkitsContext } from './context'
+
+const ReactToolkitsProvider: FC<
+  PropsWithChildren<Partial<Pick<ReactToolkitsState, 'isPermissionV2' | 'isGlobalNS' | 'menuItems' | 'title'>>>
+> = props => {
+  const { children, ...restProps } = props
+  const storeRef = useRef<ReactToolkitsStore>()
+
+  if (!storeRef.current) {
+    storeRef.current = createReactToolkitsStore()
+  }
+
+  useEffect(() => {
+    storeRef.current?.setState(restProps)
+  }, [restProps])
+
+  return <ReactToolkitsContext.Provider value={storeRef.current}>{children}</ReactToolkitsContext.Provider>
+}
+
+export default ReactToolkitsProvider

package/src/components/UserWidget/index.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Dropdown, Space } from 'antd'
+import Link from 'antd/es/typography/Link'
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons'
+import { useTokenStore } from '@/stores'
+
+const UserWidget: FC = props => {
+  const navigate = useNavigate()
+  const clearToken = useTokenStore(state => state.clearToken)
+  const user = useTokenStore(state => state.getUser())
+
+  return (
+    <Dropdown
+      menu={{
+        selectable: true,
+        items: [
+          {
+            key: '1',
+            label: (
+              <Link
+                onClick={() => {
+                  clearToken()
+                  navigate('/login')
+                }}
+              >
+                登出
+              </Link>
+            ),
+            icon: <LogoutOutlined />,
+          },
+        ],
+      }}
+      placement="bottomRight"
+    >
+      <Link>
+        <Space align="center">
+          <span>{user?.authorityId}</span>
+          <UserOutlined style={{ fontSize: '16px' }} />
+        </Space>
+      </Link>
+    </Dropdown>
+  )
+}
+
+export default UserWidget

package/src/components/index.ts

@@ -12,8 +12,30 @@ import type { PermissionButtonProps } from './PermissionButton'
 import PermissionButton from './PermissionButton'
 import type { QueryListKey, QueryListProps } from './QueryList'
 import QueryList from './QueryList'
+import { useReactToolkitsContext } from './ReactToolkitsProvider/context'
+import ReactToolkitsProvider from './ReactToolkitsProvider'
+import GameSelect from './GameSelect'
+import UserWidget from './UserWidget'
+import type { ItemType2 } from './NavMenu'
+import NavMenu from './NavMenu'
+import type { LayoutProps } from './Layout'
+import Layout from './Layout'
 
-export { FormModal, PermissionButton, DynamicTags, QueryList, FilterForm, Highlight, useFormModal }
+export {
+  FormModal,
+  PermissionButton,
+  DynamicTags,
+  QueryList,
+  FilterForm,
+  Highlight,
+  useFormModal,
+  useReactToolkitsContext,
+  ReactToolkitsProvider,
+  GameSelect,
+  UserWidget,
+  NavMenu,
+  Layout,
+}
 export type {
   DynamicTagsProps,
   FilterFormProps,
@@ -24,4 +46,6 @@ export type {
   QueryListKey,
   HighlightTextsProps,
   PermissionButtonProps,
+  ItemType2,
+  LayoutProps,
 }

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

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