react-toolkits 0.0.8 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-toolkits",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -28,6 +28,7 @@
     "antd": "^5.7.3",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
+    "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
     "react-router-dom": "^6.14.2",
     "swr": "^2.2.0",

package/src/components/GameSelect/index.tsx

@@ -0,0 +1,82 @@
+import { Select, Space, Typography } from 'antd'
+import { useCallback, useMemo } from 'react'
+import { useTokenStore } from '@/stores'
+import useSWRImmutable from 'swr/immutable'
+import { useReactToolkitsContext } from '@/components'
+
+const { Text } = Typography
+
+export interface GameType {
+  id: string
+  name: string
+  area: 'cn' | 'global'
+  Ctime: string
+}
+
+function useGames() {
+  const { isPermissionV2, isGlobalNS } = useReactToolkitsContext(state => state)
+  const user = useTokenStore(state => state.getUser())
+
+  const { data, isLoading } = useSWRImmutable<GameType[]>(
+    isPermissionV2 && !isGlobalNS && user
+      ? {
+          method: 'GET',
+          url: '/api/usystem/game/all',
+          params: { user: user.authorityId },
+          headers: {
+            'App-ID': 'global',
+          },
+        }
+      : null,
+  )
+
+  return {
+    games: data,
+    isLoading,
+  }
+}
+
+const GameSelect = () => {
+  const { game, setGame, isGlobalNS, isPermissionV2 } = useReactToolkitsContext(state => state)
+  const { games, isLoading } = useGames()
+
+  const options = useMemo(
+    () =>
+      games?.map(item => ({
+        label: item.name,
+        value: item.id,
+      })),
+    [games],
+  )
+
+  const onGameChange = useCallback(
+    (id: string) => {
+      const matchGame = (games ?? []).find(item => item.id === id) ?? null
+      setGame(matchGame)
+      // queryClient.clear()
+    },
+    [games, setGame],
+  )
+
+  if (!isPermissionV2 || isGlobalNS) {
+    return null
+  }
+
+  return (
+    <Space>
+      <Text>当前游戏</Text>
+      <Select
+        showSearch
+        optionFilterProp="label"
+        value={game?.id}
+        placeholder="请选择游戏"
+        loading={isLoading}
+        style={{ width: '200px' }}
+        options={options}
+        onChange={onGameChange}
+      />
+    </Space>
+  )
+}
+
+export default GameSelect

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