react-toolkits 0.1.1 → 0.1.2

package/src/components/Layout/index.tsx

@@ -1,99 +0,0 @@
-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'
-import { SWRConfig } from 'swr'
-
-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, game } = useReactToolkitsContext(state => state)
-
-  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',
-                }}
-              />
-            }
-          >
-            <SWRConfig
-              value={{
-                // GameSelect 组件内的 game 变化时，会触发 children 的重新渲染
-                // 为了避免 SWR 使用缓存导致数据不更新，需要设置 revalidateOnMount 为 true
-                revalidateOnMount: true,
-              }}
-            >
-              {React.createElement('div', { key: game?.id }, children)}
-            </SWRConfig>
-          </Suspense>
-        </Content>
-      </Antd.Layout>
-    </Antd.Layout>
-  )
-}
-
-export default Layout

package/src/components/NavMenu/index.tsx

@@ -1,142 +0,0 @@
-import {usePermissions} from '@/hooks'
-import {Menu} from 'antd'
-import type {
-  ItemType,
-  MenuDividerType,
-  MenuItemGroupType,
-  MenuItemType,
-  SubMenuType,
-} from 'antd/es/menu/hooks/useItems'
-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<
-  MenuItemType,
-  {
-    code /** 权限编号 **/?: string
-    route /** 前端路由地址 **/?: string
-  }
->
-
-type SubMenuType2 = Merge<
-  SubMenuType,
-  {
-    children?: ItemType2[]
-  }
->
-
-type MenuItemGroupType2 = Merge<MenuItemGroupType, { children?: ItemType2[] }>
-
-export type ItemType2 = MenuItemType2 | SubMenuType2 | MenuItemGroupType2 | MenuDividerType | null
-
-const withLink = (label?: ReactNode, route?: string): ReactNode => {
-  if (!label) {
-    return <></>
-  }
-
-  if (route) {
-    return <Link to={route}>{label}</Link>
-  }
-
-  return label
-}
-
-function transformItems(items: ItemType2[], permissions?: Record<string, boolean>) {
-  const result: ItemType[] = []
-
-  for (let i = 0; i < items.length; i++) {
-    if (items[i] === null) {
-      result[i] = null
-    } else if ((items[i] as MenuDividerType).type === 'divider') {
-      result[i] = { ...items[i] } as MenuDividerType
-    } else {
-      if ((items[i] as SubMenuType2 | MenuItemGroupType2).children) {
-        const { children, ...restProps } = items[i] as SubMenuType2 | MenuItemGroupType2
-        result[i] = {
-          ...restProps,
-          children: transformItems(children ?? [], permissions),
-        } as SubMenuType | MenuItemGroupType
-      } else {
-        const { route, label, code, ...restProps } = items[i] as MenuItemType2
-        const isPass = !code || !permissions || permissions[code]
-
-        result[i] = isPass
-          ? ({
-              ...restProps,
-              label: withLink(label, route),
-            } as MenuItemType)
-          : null
-      }
-    }
-  }
-
-  return result
-}
-
-// 拍平导航配置，并且注入 keypath 字段
-function flatItems(
-  items: ItemType2[],
-  result: Merge<MenuItemType2, { keypath?: string[] }>[] = [],
-  keypath: string[] = [],
-) {
-  for (const item of items) {
-    const children = (item as SubMenuType2 | MenuItemGroupType2)!.children as ItemType2[]
-
-    if (Array.isArray(children)) {
-      const _keys =
-        (item as MenuItemGroupType2)!.type !== 'group' && item!.key ? [...keypath, item!.key as string] : keypath
-      flatItems(children, result, _keys)
-    } else {
-      result.push(Object.assign(item as MenuItemType2, { keypath }))
-    }
-  }
-
-  return result
-}
-
-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, true)
-  const internalItems = useMemo(() => transformItems(items ?? [], permissions), [items, permissions])
-  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)
-      setOpenKeys((match?.keypath ?? [latestOpenKey]) as string[])
-    },
-    [flattenItems, openKeys, setOpenKeys],
-  )
-
-  useEffect(() => {
-    const match = flattenItems.find(item => location.pathname === item.route)
-
-    if (match) {
-      const key = match.key as string
-      const keypath = match.keypath as string[]
-      setSelectedKeys([key])
-      setOpenKeys(keypath)
-    }
-  }, [flattenItems, location, setOpenKeys, setSelectedKeys])
-
-  return (
-    <Menu
-      style={{ borderRight: 'none' }}
-      items={internalItems}
-      mode="inline"
-      openKeys={openKeys}
-      selectedKeys={selectedKeys}
-      onOpenChange={onOpenChange}
-    />
-  )
-}
-
-export default NavMenu

package/src/components/PermissionButton/index.tsx

@@ -1,36 +0,0 @@
-import { usePermission } from '@/hooks'
-import type { ButtonProps } from 'antd'
-import { Button, Tooltip } from 'antd'
-import type { FC, PropsWithChildren } from 'react'
-
-export interface PermissionButtonProps extends Omit<ButtonProps, 'disabled'> {
-  code: string
-  showLoading?: boolean
-}
-
-const PermissionButton: FC<PropsWithChildren<PermissionButtonProps>> = props => {
-  const { children, code, showLoading, ...restProps } = props
-  const { accessible, isValidating } = usePermission(code)
-
-  if (isValidating) {
-    return (
-      <Button loading={showLoading} disabled={!showLoading} {...restProps}>
-        {children}
-      </Button>
-    )
-  }
-
-  if (!accessible) {
-    return (
-      <Tooltip defaultOpen={false} title="无权限，请联系管理员进行授权">
-        <Button disabled {...restProps}>
-          {children}
-        </Button>
-      </Tooltip>
-    )
-  }
-
-  return <Button {...restProps}>{children}</Button>
-}
-
-export default PermissionButton

package/src/components/QueryList/index.tsx

@@ -1,152 +0,0 @@
-import { useHttpClient, usePermission } from '@/hooks'
-import { useQueryListStore } from '@/stores'
-import type { ListResponse, PaginationParams } from '@/types'
-import type { FormInstance, FormProps } from 'antd'
-import { Form, Result, Table } from 'antd'
-import type { TableProps } from 'antd/es/table'
-import type { AxiosRequestConfig } from 'axios'
-import type { ReactNode } from 'react'
-import { useCallback, useEffect } from 'react'
-import useSWRMutation from 'swr/mutation'
-import FilterForm from '../FilterForm'
-
-export type QueryListKey = Omit<AxiosRequestConfig, 'data' | 'params'>
-
-export interface QueryListProps<Item, Values, Response>
-  extends Pick<TableProps<Item>, 'columns' | 'rowKey' | 'tableLayout' | 'expandable' | 'rowSelection' | 'bordered'>,
-    Pick<FormProps<Values>, 'initialValues' | 'labelCol'> {
-  // 由于表单的值和分页数据是封装在组件内部的，不便于在组件外部构造 swr key，
-  // 所以组件内部的 useSWRMutation hook 使用的 key 是不包含表单值和分页参数的。
-  // 因此 swr 并未按照分页缓存数据。
-  swrKey: QueryListKey
-  confirmText?: ReactNode
-  code?: string
-  renderForm?: (form: FormInstance<Values>) => ReactNode
-  // 把表单的值和分页数据转换成请求参数
-  transformArg?: (arg: Values & PaginationParams) => unknown
-  // 当请求的返回值不满足时进行转换
-  transformResponse?: (response: Response) => ListResponse<Item>
-}
-
-const QueryList = <Item extends object, Values = NonNullable<unknown>, Response = ListResponse<Item>>(
-  props: QueryListProps<Item, Values, Response>,
-) => {
-  const {
-    code,
-    confirmText,
-    labelCol,
-    swrKey,
-    initialValues,
-    renderForm,
-    transformArg,
-    transformResponse,
-    ...tableProps
-  } = props
-  const { accessible } = usePermission(code ?? '')
-  const [form] = Form.useForm<Values>()
-  const setRefresh = useQueryListStore(state => state.setRefresh)
-  const getPaginationData = useQueryListStore(state => state.getPaginationData)
-  const setPaginationData = useQueryListStore(state => state.setPaginationData)
-  const paginationData = getPaginationData(swrKey)
-
-  const httpClient = useHttpClient()
-
-  const { data, isMutating, trigger } = useSWRMutation(
-    swrKey,
-    async (key, { arg }: { arg?: Partial<PaginationParams> }) => {
-      const newPaginationData = {
-        page: arg?.page ?? paginationData.page,
-        size: arg?.size ?? paginationData.size,
-      }
-
-      setPaginationData(swrKey, arg)
-
-      const values = form.getFieldsValue()
-
-      const _arg = {
-        ...values,
-        ...newPaginationData,
-      }
-
-      return httpClient
-        .request<Response>({
-          ...key,
-          [key.method === 'POST' ? 'data' : 'params']: transformArg?.(_arg) ?? _arg,
-        })
-        .then(response => transformResponse?.(response) ?? (response as ListResponse<Item>))
-    },
-  )
-
-  const onFinish = async () => {
-    await trigger({ page: 1 })
-  }
-
-  const onReset = useCallback(async () => {
-    try {
-      form.resetFields()
-      await form.validateFields()
-      await trigger({ page: 1 })
-    } catch (_) {
-      console.log('表单校验失败')
-    }
-  }, [form, trigger])
-
-  const onPaginationChange = useCallback(
-    async (currentPage: number, currentSize: number) => {
-      await trigger({
-        page: currentPage,
-        size: currentSize,
-      })
-    },
-    [trigger],
-  )
-
-  useEffect(() => {
-    setRefresh(swrKey, trigger)
-  }, [swrKey, trigger, setRefresh])
-
-  useEffect(() => {
-    ;(async () => {
-      try {
-        await form.validateFields()
-        await trigger()
-      } catch (_) {
-        form.resetFields()
-      }
-    })()
-  }, [form, trigger])
-
-  if (!accessible) {
-    return <Result status={403} subTitle="无权限，请联系管理员进行授权" />
-  }
-
-  return (
-    <>
-      <FilterForm<Values>
-        initialValues={initialValues}
-        form={form}
-        labelCol={labelCol}
-        confirmText={confirmText}
-        onFinish={onFinish}
-        onReset={onReset}
-      >
-        {renderForm?.(form)}
-      </FilterForm>
-      <Table
-        {...tableProps}
-        dataSource={data?.List}
-        loading={isMutating}
-        pagination={{
-          showSizeChanger: true,
-          showQuickJumper: true,
-          current: paginationData.page,
-          pageSize: paginationData.size,
-          total: data?.Total,
-          onChange: onPaginationChange,
-        }}
-      />
-    </>
-  )
-}
-
-export default QueryList

package/src/components/ReactToolkitsProvider/context.ts

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

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

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

@@ -1,51 +0,0 @@
-import type { DynamicTagsProps } from './DynamicTags'
-import DynamicTags from './DynamicTags'
-import type { FilterFormProps } from './FilterForm'
-import FilterForm from './FilterForm'
-import type { FormModalProps, FormModalRef } from './FormModal'
-import FormModal from './FormModal'
-import type { UseFormModalProps } from './FormModal/hooks'
-import { useFormModal } from './FormModal/hooks'
-import type { HighlightTextsProps } from './Highlight'
-import Highlight from './Highlight'
-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,
-  useReactToolkitsContext,
-  ReactToolkitsProvider,
-  GameSelect,
-  UserWidget,
-  NavMenu,
-  Layout,
-}
-export type {
-  DynamicTagsProps,
-  FilterFormProps,
-  UseFormModalProps,
-  FormModalProps,
-  FormModalRef,
-  QueryListProps,
-  QueryListKey,
-  HighlightTextsProps,
-  PermissionButtonProps,
-  ItemType2,
-  LayoutProps,
-}

package/src/constants/index.ts

@@ -1 +0,0 @@
-export const SSO_URL = 'https://idaas.ifunplus.cn/enduser/api/application/plugin_FunPlus/sso/v1'