react-toolkits 0.1.1 → 0.1.2

package/src/pages/base/Login/index.tsx

@@ -1,101 +0,0 @@
-import { SSO_URL } from '@/constants'
-import { useTokenStore } from '@/stores'
-import { AliyunOutlined } from '@ant-design/icons'
-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'
-import useSWRImmutable from 'swr/immutable'
-import Default from './default'
-import { useHttpClient } from '@/hooks'
-
-const { Title } = Typography
-
-const Login: FC<PropsWithChildren> = props => {
-  const { children } = props
-  const [searchParams, setSearchParams] = useSearchParams()
-  const token = useTokenStore(state => state.token)
-  const setToken = useTokenStore(state => state.setToken)
-  const [showAlert, setShowAlert] = useState(false)
-  const httpClient = useHttpClient()
-
-  useSWRImmutable<{ token: string }>(
-    searchParams.has('ticket')
-      ? {
-          url: '/api/usystem/user/login',
-          params: {
-            ticket: searchParams.get('ticket'),
-          },
-        }
-      : null,
-    config => httpClient.request(config),
-    {
-      suspense: true,
-      onSuccess: data => {
-        setToken(data.token)
-      },
-    },
-  )
-
-  useEffect(() => {
-    if (searchParams.has('not_registered')) {
-      setShowAlert(true)
-      searchParams.delete('not_registered')
-      setSearchParams(searchParams)
-    }
-  }, [searchParams, setSearchParams])
-
-  if (token) {
-    return <Navigate replace to="/" />
-  }
-
-  return (
-    <Row>
-      <Col span={10} offset={3}>
-        <div className="h-screen flex justify-end items-center">
-          <Default />
-        </div>
-      </Col>
-      <Col span={5} offset={3}>
-        <div className="h-screen relative">
-          <Card hoverable className="absolute left-0 right-0 top-1/2 -translate-y-1/2">
-            {showAlert && (
-              <div className="absolute -top-12 left-0 right-0">
-                <Alert
-                  banner
-                  closable
-                  message="您还未在平台注册，请联系管理员"
-                  type="error"
-                  onClose={() => {
-                    setShowAlert(false)
-                  }}
-                />
-              </div>
-            )}
-            <div className="text-center mb-6">
-              <Title level={5}>登录方式</Title>
-              <div className="min-h-10">{children}</div>
-            </div>
-            <Divider plain>第三方登录方式</Divider>
-            <div className="w-full flex justify-center">
-              <Space size="small">
-                <Button
-                  type="link"
-                  size="small"
-                  shape="round"
-                  icon={<AliyunOutlined />}
-                  href={`${SSO_URL}/login?service=${encodeURIComponent(window.location.origin)}/login`}
-                  target="_self"
-                >
-                  IDass 登录
-                </Button>
-              </Space>
-            </div>
-          </Card>
-        </div>
-      </Col>
-    </Row>
-  )
-}
-
-export default Login

package/src/pages/base/NotFound/index.tsx

@@ -1,27 +0,0 @@
-import { Button, Result } from 'antd'
-import { useNavigate } from 'react-router-dom'
-
-const NotFound = () => {
-  const navigate = useNavigate()
-  return (
-    <div className="h-screen flex justify-center items-center">
-      <Result
-        status="404"
-        title="404"
-        subTitle="访问的页面不存在"
-        extra={
-          <Button
-            type="primary"
-            onClick={() => {
-              navigate('/')
-            }}
-          >
-            返回页面
-          </Button>
-        }
-      />
-    </div>
-  )
-}
-
-export default NotFound

package/src/pages/base/index.tsx

@@ -1,20 +0,0 @@
-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,4 +0,0 @@
-import baseRoutes from './base'
-import permissionRoutes from './permission'
-
-export { baseRoutes, permissionRoutes }

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

@@ -1,40 +0,0 @@
-import { PermissionList, useRole } from '@/features/permission'
-import { Breadcrumb, Card, Descriptions, Skeleton } from 'antd'
-import { Link, useParams } from 'react-router-dom'
-
-const RoleDetail = () => {
-  const params = useParams()
-  const { data, isLoading } = useRole(params.name as string)
-
-  return (
-    <>
-      <Breadcrumb
-        style={{ marginBottom: 24 }}
-        items={[
-          {
-            key: '1',
-            title: <Link to="/permission/role">角色</Link>,
-          },
-          {
-            key: '2',
-            title: params.name,
-          },
-        ]}
-      />
-      <Card title="权限详情">
-        <Skeleton loading={isLoading}>
-          <Descriptions column={3} layout="vertical">
-            <Descriptions.Item label="名称">{data?.name}</Descriptions.Item>
-            <Descriptions.Item label="ID">{data?.id}</Descriptions.Item>
-            <Descriptions.Item label="创建时间">{data?.ctime}</Descriptions.Item>
-            <Descriptions.Item label="权限" span={3}>
-              <PermissionList readonly value={data?.permissions} />
-            </Descriptions.Item>
-          </Descriptions>
-        </Skeleton>
-      </Card>
-    </>
-  )
-}
-
-export default RoleDetail

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

@@ -1,251 +0,0 @@
-import { Highlight, PermissionButton, QueryList, useReactToolkitsContext } from '@/components'
-import { useFormModal } from '@/components/FormModal/hooks'
-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 { useCallback, useMemo } from 'react'
-import { Link } from 'react-router-dom'
-import type { ListResponse } from '@/types'
-
-export const swrKey = {
-  url: '/api/usystem/role/list',
-}
-
-const useCreateModal = () => {
-  const { message } = App.useApp()
-  const refresh = useQueryListStore(state => state.refresh)
-  const create = useCreateRole()
-
-  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: RoleV1['permissions'] | RoleV2['permissions']
-  }>({
-    title: '创建角色',
-    width: '50vw',
-    layout: 'vertical',
-    content: (
-      <>
-        <Form.Item label="名称" name="name" rules={[{ required: true }]}>
-          <Input addonBefore="role_" />
-        </Form.Item>
-        <Form.Item label="权限" name="permissions">
-          <PermissionList />
-        </Form.Item>
-      </>
-    ),
-    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('角色更新成功')
-            refresh(swrKey, { page: 1 })
-          },
-        },
-      )
-    },
-    [update, refresh, message],
-  )
-
-  return useFormModal<{
-    id: number
-    name: string
-    permissions: RoleV1['permissions'] | RoleV2['permissions']
-  }>({
-    title: '更新角色',
-    width: '50vw',
-    layout: 'vertical',
-    content: (
-      <>
-        <Form.Item hidden label="ID" name="id">
-          <Input />
-        </Form.Item>
-        <Form.Item label="名称" name="name" rules={[{ required: true }]}>
-          <Input disabled addonBefore="role_" />
-        </Form.Item>
-        <Form.Item label="权限" name="permissions">
-          <PermissionList />
-        </Form.Item>
-      </>
-    ),
-    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>>(
-    () => [
-      {
-        title: '名称',
-        key: 'name',
-        render(value: RoleListItem) {
-          if (viewable) {
-            return <Link to={`${value.name}`}>{value.name}</Link>
-          } else {
-            return <>{value.name}</>
-          }
-        },
-      },
-      {
-        title: 'ID',
-        dataIndex: 'id',
-        key: 'id',
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'ctime',
-        key: 'ctime',
-      },
-      {
-        title: '操作',
-        width: 150,
-        align: 'center',
-        render: (value: RoleListItem) => {
-          return (
-            <Space size="small">
-              <PermissionButton
-                code="200003"
-                size="small"
-                type="link"
-                onClick={async () => {
-                  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,
-                      permissions: role?.permissions,
-                      name: role?.name.replace(/^role_/, ''),
-                    },
-                  })
-                }}
-              >
-                更新
-              </PermissionButton>
-              <PermissionButton
-                danger
-                code="200004"
-                size="small"
-                type="link"
-                onClick={() => {
-                  modal.confirm({
-                    title: '删除角色',
-                    content: (
-                      <Highlight texts={[value.name]}>
-                        确定要删除角色&nbsp;
-                        {value.name}
-                        &nbsp;吗？
-                      </Highlight>
-                    ),
-                    async onOk() {
-                      await remove.trigger(
-                        {
-                          id: value.id,
-                          name: value.name,
-                        },
-                        {
-                          async onSuccess() {
-                            await message.success('角色删除成功')
-                            refresh(swrKey, { page: 1 })
-                          },
-                        },
-                      )
-                    },
-                  })
-                }}
-              >
-                删除
-              </PermissionButton>
-            </Space>
-          )
-        },
-      },
-    ],
-    [refresh, viewable, httpClient, modal, message, remove, showUpdateModal],
-  )
-
-  return (
-    <>
-      <Card
-        title="角色"
-        extra={
-          <PermissionButton
-            type="primary"
-            code="200002"
-            icon={<UsergroupAddOutlined />}
-            onClick={() => {
-              showCreateModal()
-            }}
-          >
-            创建角色
-          </PermissionButton>
-        }
-      >
-        <QueryList<RoleListItem, NonNullable<unknown>, ListResponse<RoleListItem>>
-          rowKey="name"
-          columns={columns}
-          code="200001"
-          swrKey={swrKey}
-          // NOTE: 后端接口返回的数据不满足时转换一下
-          transformResponse={response => {
-            const { List, Total } = response
-            return { List, Total }
-          }}
-        />
-      </Card>
-      {CreateModal}
-      {UpdateModal}
-    </>
-  )
-}
-
-export default RoleList

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

@@ -1,236 +0,0 @@
-import { Highlight, PermissionButton, QueryList } from '@/components'
-import { useFormModal } from '@/components/FormModal/hooks'
-import type { UserListItem } from '@/features/permission'
-import { useAllRoles, useCreateUser, useRemoveUser, useUpdateUser } from '@/features/permission'
-import { useQueryListStore } from '@/stores'
-import { UserAddOutlined } from '@ant-design/icons'
-import type { TableColumnsType } from 'antd'
-import { App, Card, Col, Form, Input, Row, Select, Space, Tag } from 'antd'
-import type { FC } from 'react'
-import { useMemo } from 'react'
-import { Link } from 'react-router-dom'
-
-const { Option } = Select
-
-export const swrKey = {
-  url: '/api/usystem/user/list',
-}
-
-function useCreatingUserModal() {
-  const { message } = App.useApp()
-  const create = useCreateUser()
-  const { data: roles, isLoading } = useAllRoles()
-  const refresh = useQueryListStore(state => state.refresh)
-
-  return useFormModal<{ id: string; name: string; roles: string[] }>({
-    title: '创建用户',
-    labelCol: { flex: '80px' },
-    content: (
-      <>
-        <Form.Item noStyle shouldUpdate={(prevValues, currentValue) => prevValues.type !== currentValue.type}>
-          {({ getFieldValue }) => (
-            <Form.Item label="名称" name="name" rules={[{ required: true }]}>
-              <Input disabled={getFieldValue('id')} />
-            </Form.Item>
-          )}
-        </Form.Item>
-        <Form.Item label="角色" name="roles">
-          <Select allowClear mode="multiple" loading={isLoading}>
-            {(roles ?? []).map(role => (
-              <Option value={role.name} key={role.id}>
-                {role.name}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-      </>
-    ),
-    async onConfirm(values) {
-      await create.trigger(values, {
-        onSuccess() {
-          message.success('用户创建成功')
-          refresh(swrKey, { page: 1 })
-        },
-      })
-    },
-  })
-}
-
-function useUpdatingUserModal() {
-  const { message } = App.useApp()
-  const update = useUpdateUser()
-  const { data: roles, isLoading } = useAllRoles()
-  const refresh = useQueryListStore(state => state.refresh)
-
-  return useFormModal<{ id: string; name: string; roles: string[] }>({
-    title: '更新用户',
-    labelCol: { flex: '80px' },
-    content: (
-      <>
-        <Form.Item hidden name="id">
-          <Input />
-        </Form.Item>
-        <Form.Item noStyle shouldUpdate={(prevValues, currentValue) => prevValues.type !== currentValue.type}>
-          {({ getFieldValue }) => (
-            <Form.Item label="名称" name="name" rules={[{ required: true }]}>
-              <Input disabled={getFieldValue('id')} />
-            </Form.Item>
-          )}
-        </Form.Item>
-        <Form.Item label="角色" name="roles">
-          <Select allowClear mode="multiple" loading={isLoading}>
-            {(roles ?? []).map(role => (
-              <Option value={role.name} key={role.id}>
-                {role.name}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
-      </>
-    ),
-    async onConfirm(values) {
-      await update.trigger(values, {
-        onSuccess() {
-          message.success('用户更新成功')
-          refresh(swrKey, { page: 1 })
-        },
-      })
-    },
-  })
-}
-
-const UserList: FC = () => {
-  const { modal, message } = App.useApp()
-  const remove = useRemoveUser()
-  const refresh = useQueryListStore(state => state.refresh)
-  const { showModal: showCreatingModal, Modal: CreatingModal } = useCreatingUserModal()
-  const { showModal: showUpdatingModal, Modal: UpdatingModal } = useUpdatingUserModal()
-
-  const columns = useMemo<TableColumnsType<UserListItem>>(() => {
-    return [
-      {
-        title: '名称',
-        dataIndex: 'name',
-        key: 'name',
-      },
-      {
-        title: 'ID',
-        dataIndex: 'id',
-        key: 'id',
-      },
-      {
-        title: '角色',
-        dataIndex: 'roles',
-        key: 'roles',
-        width: '40%',
-        render(value: string[]) {
-          return (
-            <Row gutter={[4, 4]}>
-              {(value || []).map((item: string) => (
-                <Col key={item}>
-                  {item === 'root' ? (
-                    <Tag color="#f50">{item}</Tag>
-                  ) : (
-                    <Tag color="#ff5a00">
-                      <Link to={`/permission/role/${item}`}>{item}</Link>
-                    </Tag>
-                  )}
-                </Col>
-              ))}
-            </Row>
-          )
-        },
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'Ctime',
-        key: 'ctime',
-      },
-      {
-        title: '操作',
-        width: 150,
-        align: 'center',
-        render: (value: UserListItem) => (
-          <Space>
-            <PermissionButton
-              size="small"
-              type="link"
-              code="100003"
-              onClick={() => {
-                showUpdatingModal({
-                  initialValues: {
-                    id: value.id,
-                    name: value.name,
-                    roles: value.roles,
-                  },
-                })
-              }}
-            >
-              更新
-            </PermissionButton>
-            <PermissionButton
-              danger
-              size="small"
-              code="100004"
-              type="link"
-              onClick={() => {
-                modal.confirm({
-                  title: '删除用户',
-                  content: (
-                    <Highlight texts={[value.name]}>
-                      确定要删除用户&nbsp;
-                      {value.name}
-                      &nbsp;吗？
-                    </Highlight>
-                  ),
-                  async onOk() {
-                    await remove.trigger(
-                      {
-                        id: value.id,
-                        name: value.name,
-                      },
-                      {
-                        async onSuccess() {
-                          await message.success('用户删除成功')
-                          refresh(swrKey, { page: 1 })
-                        },
-                      },
-                    )
-                  },
-                })
-              }}
-            >
-              删除
-            </PermissionButton>
-          </Space>
-        ),
-      },
-    ]
-  }, [refresh, remove, message, modal, showUpdatingModal])
-
-  return (
-    <>
-      <Card
-        title="用户"
-        extra={
-          <PermissionButton
-            type="primary"
-            icon={<UserAddOutlined />}
-            code="100002"
-            onClick={() => {
-              showCreatingModal()
-            }}
-          >
-            创建用户
-          </PermissionButton>
-        }
-      >
-        <QueryList code="100001" swrKey={swrKey} rowKey="id" columns={columns} />
-      </Card>
-      {CreatingModal}
-      {UpdatingModal}
-    </>
-  )
-}
-
-export default UserList