react-toolkits 0.0.1

package/src/pages/Login/index.tsx

@@ -0,0 +1,111 @@
+import { SSO_URL } from '@/constants'
+import { useTokenStore } from '@/stores'
+import { AliyunOutlined } from '@ant-design/icons'
+import { Alert, Button, Card, Col, Divider, Row, Space, Spin, 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'
+
+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 { isLoading } = useSWRImmutable<{ token: string }>(
+    searchParams.has('ticket')
+      ? {
+          url: '/api/usystem/user/login',
+          params: {
+            ticket: searchParams.get('ticket'),
+          },
+        }
+      : null,
+    {
+      onSuccess: data => {
+        setToken(data.token)
+      },
+    },
+  )
+
+  useEffect(() => {
+    if (searchParams.has('not_registered')) {
+      setShowAlert(true)
+      searchParams.delete('not_registered')
+      setSearchParams(searchParams)
+    }
+  }, [searchParams, setSearchParams])
+
+  if (isLoading) {
+    return (
+      <Spin
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+          height: '100vh',
+        }}
+      />
+    )
+  }
+
+  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/index.ts

@@ -0,0 +1,4 @@
+import Login from './Login'
+import permission from './permission'
+
+export { Login, permission }

package/src/pages/permission/RoleDetail.tsx

@@ -0,0 +1,40 @@
+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.tsx

@@ -0,0 +1,226 @@
+import { Highlight, PermissionButton, QueryList } from '@/components'
+import { useFormModal } from '@/components/FormModal/hooks'
+import type { Role, RoleListItem } from '@/features/permission'
+import { PermissionList, useCreateRole, useRemoveRole, useUpdateRole } from '@/features/permission'
+import { useFetcher, usePermission } from '@/hooks'
+import { useQueryTriggerStore } 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 { Link } from 'react-router-dom'
+
+export const swrKey = {
+  url: '/api/usystem/role/list',
+}
+
+const RoleList = () => {
+  const { accessible: viewable } = usePermission('200005')
+  const { modal, message } = App.useApp()
+  const fetcher = useFetcher()
+  const create = useCreateRole()
+  const remove = useRemoveRole()
+  const update = useUpdateRole()
+  const trigger = useQueryTriggerStore(state => state.trigger)
+
+  const { showModal: showCreateModal, Modal: CreateModal } = useFormModal<{
+    name: string
+    permissions: string[]
+  }>({
+    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>
+      </>
+    ),
+    async onConfirm(values) {
+      await create.trigger(
+        {
+          name: `role_${values.name}`,
+          permissions: values.permissions,
+        },
+        {
+          async onSuccess() {
+            await message.success('角色创建成功')
+            trigger(swrKey)
+          },
+        },
+      )
+    },
+  })
+
+  const { showModal: showUpdateModal, Modal: UpdateModal } = useFormModal<{
+    id: number
+    name: string
+    permissions: string[]
+  }>({
+    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>
+      </>
+    ),
+    async onConfirm(values) {
+      await update.trigger(
+        {
+          id: values.id,
+          name: `role_${values.name}`,
+          permissions: values.permissions,
+        },
+        {
+          async onSuccess() {
+            await message.success('角色更新成功')
+            trigger(swrKey)
+          },
+        },
+      )
+    },
+  })
+
+  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 fetcher<Role>({
+                    method: 'GET',
+                    url: '/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('角色删除成功')
+                            trigger(swrKey)
+                          },
+                        },
+                      )
+                    },
+                  })
+                }}
+              >
+                删除
+              </PermissionButton>
+            </Space>
+          )
+        },
+      },
+    ],
+    [trigger, viewable, fetcher, modal, message, remove, showUpdateModal],
+  )
+
+  return (
+    <>
+      <Card
+        title="角色"
+        extra={
+          <PermissionButton
+            type="primary"
+            code="200002"
+            icon={<UsergroupAddOutlined />}
+            onClick={() => {
+              showCreateModal()
+            }}
+          >
+            创建角色
+          </PermissionButton>
+        }
+      >
+        <QueryList
+          rowKey="name"
+          columns={columns}
+          code="200001"
+          swrKey={swrKey}
+          transformArg={arg => {
+            const { page, perPage, ...restValues } = arg
+            return {
+              ...restValues,
+              page,
+              size: perPage,
+            }
+          }}
+        />
+      </Card>
+      {CreateModal}
+      {UpdateModal}
+    </>
+  )
+}
+
+export default RoleList

package/src/pages/permission/UserList.tsx

@@ -0,0 +1,248 @@
+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 { useQueryTriggerStore } 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 trigger = useQueryTriggerStore(state => state.trigger)
+
+  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('用户创建成功')
+          trigger(swrKey)
+        },
+      })
+    },
+  })
+}
+
+function useUpdatingUserModal() {
+  const { message } = App.useApp()
+  const update = useUpdateUser()
+  const { data: roles, isLoading } = useAllRoles()
+  const trigger = useQueryTriggerStore(state => state.trigger)
+
+  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('用户更新成功')
+          trigger(swrKey)
+        },
+      })
+    },
+  })
+}
+
+const UserList: FC = () => {
+  const { modal, message } = App.useApp()
+  const remove = useRemoveUser()
+  const trigger = useQueryTriggerStore(state => state.trigger)
+  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('用户删除成功')
+                          trigger(swrKey)
+                        },
+                      },
+                    )
+                  },
+                })
+              }}
+            >
+              删除
+            </PermissionButton>
+          </Space>
+        ),
+      },
+    ]
+  }, [trigger, 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}
+          transformArg={arg => {
+            const { page, perPage, ...restValues } = arg
+
+            return {
+              ...(restValues ?? {}),
+              page,
+              size: perPage,
+            }
+          }}
+        />
+      </Card>
+      {CreatingModal}
+      {UpdatingModal}
+    </>
+  )
+}
+
+export default UserList

package/src/pages/permission/index.tsx

@@ -0,0 +1,31 @@
+import { lazy } from 'react'
+import type { RouteObject } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
+
+const UserList = lazy(() => import('./UserList'))
+const RoleList = lazy(() => import('./RoleList'))
+const RoleDetail = lazy(() => import('./RoleDetail'))
+
+const routes: RouteObject = {
+  path: 'permission',
+  children: [
+    {
+      index: true,
+      element: <Navigate relative="path" to="user" />,
+    },
+    {
+      path: 'user',
+      element: <UserList />,
+    },
+    {
+      path: 'role',
+      element: <RoleList />,
+    },
+    {
+      path: 'role/:name',
+      element: <RoleDetail />,
+    },
+  ],
+}
+
+export default routes

package/src/shims.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.jpg' {
+  const content: any
+  export default content
+}
+
+declare module '*.png' {
+  const content: any
+  export default content
+}
+
+declare module '*.svg' {
+  const content: any
+  export default content
+}
+
+declare module '*.yaml' {
+  const content: any
+  export default content
+}

package/src/stores/index.ts

@@ -0,0 +1,3 @@
+export * from './menu'
+export * from './token'
+export * from './queryTrigger'