@quansitech/antd-admin 1.1.1 → 1.1.2

package/components/Form/Action/Button.tsx

@@ -1,129 +0,0 @@
-import {FormActionType} from "./types";
-import {Button, Popconfirm} from "antd";
-import {useContext, useEffect, useState} from "react";
-import http from "../../../lib/http";
-import {FormContext} from "../../FormContext";
-import {modalShow, replaceParams, replaceUrl, routerNavigateTo} from "../../../lib/helpers";
-import {ModalContext} from "../../ModalContext";
-import {TableContext} from "../../TableContext";
-
-export default function (props: FormActionType & {
-    props: any,
-
-    // 操作
-    submit?: boolean | {
-        confirm?: string
-    },
-    request?: RequestOptions,
-    link?: {
-        url: string,
-    }
-    back?: boolean,
-    reset?: boolean,
-    modal?: ModalOptions,
-}) {
-
-    const [loading, setLoading] = useState(false)
-    const formContext = useContext(FormContext)
-    const tableContext = useContext(TableContext)
-    const modalContext = useContext(ModalContext)
-
-    const onClick = async () => {
-        try {
-            setLoading(true)
-            const handleAfterAction = async (req?: RequestOptions) => {
-                if (req?.afterAction?.includes('tableReload')) {
-                    if (modalContext.contexts) {
-                        modalContext.setAfterClose(() => {
-                            modalContext.contexts?.tableContext?.actionRef.reload()
-                        })
-                    }
-                    if (tableContext.actionRef) {
-                        await tableContext.actionRef.reload()
-                    }
-                }
-                if (req?.afterAction?.includes('closeModal') && modalContext.inModal) {
-                    modalContext.closeModal()
-                }
-            }
-
-            if (props.submit) {
-                formContext.formRef?.current?.submit()
-                return
-            }
-            if (props.request) {
-                await http({
-                    method: props.request.method,
-                    url: props.request.url,
-                    headers: props.request.headers || {},
-                    data: replaceParams(props.request.data || {}, {
-                        ...(await formContext.formRef?.current?.getFieldsValue()),
-                    })
-                })
-
-                await handleAfterAction(props.request)
-                return
-            }
-            if (props.modal) {
-                await modalShow({
-                    ...props.modal,
-                    content: {
-                        ...props.modal.content,
-                        url: replaceUrl(props.modal.content.url as string, formContext.formRef?.current?.getFieldsValue())
-                    }
-                })
-                return
-            }
-
-            if (props.link) {
-                routerNavigateTo(replaceUrl(props.link.url, await formContext.formRef?.current?.getFieldsValue()))
-                return
-            }
-            if (props.reset) {
-                formContext.formRef?.current?.resetFields()
-                return
-            }
-            if (props.back) {
-                if (modalContext.inModal) {
-                    modalContext.closeModal()
-                } else {
-                    history.back()
-                }
-                return
-            }
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    useEffect(() => {
-        if (props.submit) {
-            setLoading(props.loading || false)
-        }
-    }, [props.loading]);
-
-    const MyButton = ({onClick}: {
-        onClick?: () => void,
-    }) => {
-
-        return <>
-            <Button {...props.props}
-                    onClick={onClick}
-                    loading={loading}
-            >{props.title}</Button>
-        </>
-    }
-
-    const confirm = (typeof props.submit === 'object' ? props.submit.confirm : null)
-        || props.request?.confirm
-
-    return <>
-        {
-            confirm ?
-                <Popconfirm title={confirm} onConfirm={onClick}>
-                    <MyButton></MyButton>
-                </Popconfirm>
-                : <MyButton onClick={onClick}></MyButton>
-        }
-    </>
-}

package/components/Form/Actions.tsx

@@ -1,39 +0,0 @@
-import {FormActionType} from "./Action/types";
-import {lazy, useEffect, useState} from "react";
-import {ReactComponentLike} from "prop-types";
-import {Badge, Space} from "antd";
-import container from "../../lib/container";
-import {upperFirst} from "es-toolkit";
-
-export default function (props: {
-    actions?: FormActionType[]
-    loading?: boolean
-}) {
-    const [components, setComponents] = useState<{
-        Component: ReactComponentLike,
-        props: FormActionType,
-    }[]>([])
-
-    useEffect(() => {
-        setComponents(props.actions?.map(a => {
-            return {
-                Component: lazy(container.get('Form.Action.' + upperFirst(a.type))),
-                props: {
-                    ...a,
-                },
-            }
-        }) || [])
-    }, []);
-
-    return <>
-        <Space>
-            {components.map(item => (
-                item.props.badge ?
-                    <Badge key={item.props.title} count={item.props.badge} style={{zIndex: 100}}>
-                        <item.Component loading={props.loading} {...item.props}></item.Component>
-                    </Badge> :
-                    <item.Component key={item.props.title} loading={props.loading} {...item.props}></item.Component>
-            ))}
-        </Space>
-    </>
-}

package/components/Form.tsx

@@ -1,177 +0,0 @@
-import {BetaSchemaForm, ProFormColumnsType, ProFormInstance, ProSkeleton} from "@ant-design/pro-components";
-import type {FormSchema} from "@ant-design/pro-form/es/components/SchemaForm/typing";
-import React, {lazy, Suspense, useContext, useEffect, useRef, useState} from "react";
-import {cloneDeep, upperFirst} from "es-toolkit";
-import container from "../lib/container";
-import {FormActionType} from "./Form/Action/types";
-import Actions from "./Form/Actions";
-import {FormContext} from "./FormContext";
-import {Col, Row, Spin} from "antd";
-import http from "../lib/http";
-import customRule from "../lib/customRule";
-import {ModalContext} from "./ModalContext";
-import {TableContext} from "./TableContext";
-import {commonHandler} from "../lib/schemaHandler";
-import {Rule} from "antd/es/form";
-
-type SubmitRequestType = {
-    url: string,
-    method?: string,
-    data?: any,
-    afterSubmit?: () => void,
-    headers?: Record<string, string>
-    afterAction?: string[],
-}
-
-
-export default function (props: FormSchema & {
-    actions?: FormActionType[]
-    metaTitle?: string,
-    columns?: ProFormColumnsType[],
-    submitRequest?: SubmitRequestType,
-    extraRenderValues?: Record<string, any>,
-}) {
-
-    const [columns, setColumns] = useState<ProFormColumnsType[]>([])
-    const formRef = useRef<ProFormInstance>()
-    const [initialized, setInitialized] = useState(false)
-    const [loading, setLoading] = useState(false)
-    const hiddenField = useRef<Record<string, any>>({})
-
-    useEffect(() => {
-        setColumns((cloneDeep(props.columns)?.map((c: ProFormColumnsType & {
-            formItemProps?: {
-                rules?: (Rule & {
-                    customType?: string
-                })[]
-            }
-        }) => {
-            // rules
-            if (!c.formItemProps) {
-                c.formItemProps = {}
-            }
-            if (!c.formItemProps?.rules) {
-                c.formItemProps.rules = []
-            }
-            c.formItemProps.rules = c.formItemProps.rules.map(rule => {
-                if (rule.customType && customRule[rule.customType]) {
-                    rule.validator = customRule[rule.customType]
-                }
-                return rule
-            })
-
-            // hideInForm时增加
-            if (c.hideInForm) {
-                hiddenField.current[c.dataIndex as string] = props.initialValues?.[c.dataIndex as string]
-                return null
-            }
-
-            // item render
-            const formItemComponent = 'Column.' + upperFirst(c.valueType as string)
-            if (container.check(formItemComponent)) {
-                const Component = lazy(container.get(formItemComponent))
-                c.renderFormItem = (schema, config, form) =>
-                    <Suspense fallback={<Spin/>}>
-                        <Component config={config}
-                                   form={form}
-                                   fieldProps={c.fieldProps}
-                                   key={c.title as string}
-                                   rules={c.formItemProps?.rules}
-                                   dataIndex={c.dataIndex}
-                        ></Component>
-                    </Suspense>
-            }
-            // readonly render
-            const readonlyComponent = 'Column.Readonly.' + upperFirst(c.valueType as string)
-            if (container.check(readonlyComponent)) {
-                const Component = lazy(container.get(readonlyComponent))
-                c.render = (dom, entity, index, action, schema) =>
-                    <Suspense fallback={<Spin/>}>
-                        <Component key={c.title as string}
-                                   entity={entity}
-                                   index={index}
-                                   action={action}
-                                   schema={schema}
-                                   dom={dom}
-                        ></Component>
-                    </Suspense>
-            }
-
-            commonHandler(c)
-            if (container.schemaHandler[c.valueType as string]) {
-                return container.schemaHandler[c.valueType as string](c)
-            }
-
-            return c
-        }).filter(c => !!c) || []) as ProFormColumnsType[])
-
-        setInitialized(true)
-    }, []);
-
-    const modalContext = useContext(ModalContext)
-    const tableContext = useContext(TableContext)
-
-    const handleAfterAction = async (req?: SubmitRequestType) => {
-        if (req?.afterAction?.includes('tableReload')) {
-            if (modalContext.contexts) {
-                modalContext.setAfterClose(() => {
-                    modalContext.contexts?.tableContext?.actionRef.reload()
-                })
-            }
-            if (tableContext.actionRef) {
-                await tableContext.actionRef.reload()
-            }
-        }
-        if (req?.afterAction?.includes('closeModal') && modalContext.inModal) {
-            modalContext.closeModal()
-        }
-    }
-
-    const onFinish = async (values: any) => {
-        if (props.submitRequest) {
-            setLoading(true)
-            try {
-                await http({
-                    method: props.submitRequest.method,
-                    url: props.submitRequest.url,
-                    data: Object.assign({}, hiddenField.current, props.submitRequest.data, values),
-                    headers: props.submitRequest.headers,
-                })
-
-                handleAfterAction(props.submitRequest)
-            } finally {
-                setLoading(false)
-            }
-        }
-    }
-
-    return <>
-        <Row justify={'center'}>
-            <Col sm={24} md={22} lg={20}>
-                <FormContext.Provider value={{
-                    formRef: formRef,
-                    extraRenderValues: props.extraRenderValues,
-                }}>
-                    {!initialized
-                        ? <ProSkeleton type={"list"} list={2}></ProSkeleton>
-                        : <BetaSchemaForm columns={columns}
-                                          colProps={props.colProps}
-                                          readonly={props.readonly}
-                                          grid={true}
-                                          loading={loading}
-                                          formRef={formRef}
-                                          initialValues={props.initialValues}
-                                          onFinish={onFinish}
-                                          submitter={{
-                                              render: () => [
-                                                  <Actions key={'actions'} loading={loading}
-                                                           actions={props.actions}></Actions>
-                                              ]
-                                          }}
-                        ></BetaSchemaForm>
-                    }
-                </FormContext.Provider>
-            </Col>
-        </Row>
-    </>
-}

package/components/FormContext.ts

@@ -1,9 +0,0 @@
-import {ProFormInstance} from "@ant-design/pro-components";
-import {createContext, MutableRefObject} from "react";
-
-export type FormContextProps = {
-    formRef?: MutableRefObject<ProFormInstance | undefined>,
-    extraRenderValues?: Record<string, any>
-}
-
-export const FormContext = createContext<FormContextProps>({})

package/components/Layout/New.tsx

@@ -1,251 +0,0 @@
-import {MenuDataItem, PageContainer, ProConfigProvider, ProLayout} from "@ant-design/pro-components";
-import {Button, Dropdown, Menu, Space} from "antd";
-import type {LayoutProps} from "../LayoutContext";
-import {LayoutContext} from "../LayoutContext";
-import {useEffect, useRef, useState} from "react";
-import {usePage} from "@inertiajs/react";
-import {routerNavigateTo} from "../../lib/helpers";
-import {MenuInfo} from "rc-menu/lib/interface";
-import http from "../../lib/http";
-// @ts-ignore
-import {Route} from '@ant-design/pro-layout/lib/typing';
-import {MoonOutlined, SunOutlined} from "@ant-design/icons";
-
-export default function ({children, pageTitle, siteTitle}: {
-    children: React.ReactNode,
-    pageTitle: string,
-    siteTitle: string,
-}) {
-
-    const pageProps = usePage<{
-        layoutProps: LayoutProps,
-    }>().props
-
-    const layoutProps = pageProps.layoutProps
-    const contentRef = useRef<HTMLDivElement>(null)
-
-    const [props, setProps] = useState<LayoutProps>({
-        title: '',
-        metaTitle: '',
-        topMenuActiveKey: '',
-        menuActiveKey: '',
-        loading: false,
-        topMenu: [],
-        menuList: [],
-        logo: '',
-        userMenu: [],
-    })
-    const [theme, setTheme] = useState<'light' | 'realDark'>('light')
-
-    const assignProps = (newProps: LayoutProps) => {
-        setProps(Object.assign(props, newProps))
-    }
-
-    const headerContentRender = () => {
-        return <>
-            <Menu items={props.topMenu}
-                  mode={'horizontal'}
-                  activeKey={props.topMenuActiveKey}
-            />
-        </>
-    }
-
-    const [openKeys, setOpenKeys] = useState<string[]>([])
-    const [route, setRoute] = useState<Route>()
-
-    useEffect(() => {
-        function findKeyPath(key: string, list: MenuDataItem[]): string[] {
-            for (let i = 0; i < list.length; i++) {
-                const item = list[i];
-                if (item.key === key) {
-                    return [item.key]
-                } else if (item.children?.length) {
-                    const path = findKeyPath(key, item.children)
-                    if (path?.length) {
-                        return [item.key as string, ...path]
-                    }
-                }
-            }
-            return []
-        }
-
-        if (!props.menuActiveKey) {
-            return
-        }
-        setOpenKeys(findKeyPath(props.menuActiveKey, props.menuList || []))
-
-    }, [props.menuActiveKey]);
-
-    useEffect(() => {
-        if (pageProps.layoutProps?.menuActiveKey) {
-            assignProps({
-                menuActiveKey: pageProps.layoutProps.menuActiveKey
-            })
-        }
-
-        const title = props.title || layoutProps.title
-        if (pageProps.layoutProps?.metaTitle) {
-            assignProps({
-                metaTitle: pageProps.layoutProps.metaTitle + ' | ' + title
-            })
-        } else {
-            assignProps({
-                metaTitle: title
-            })
-        }
-    }, [pageProps.layoutProps]);
-
-
-    useEffect(() => {
-
-        setProps({
-            title: layoutProps.title || '',
-            metaTitle: '',
-            topMenuActiveKey: layoutProps.topMenuActiveKey,
-            menuActiveKey: layoutProps.menuActiveKey,
-            loading: false,
-            topMenu: layoutProps.topMenu,
-            menuList: layoutProps.menuList,
-            logo: layoutProps.logo,
-            userMenu: layoutProps.userMenu,
-        })
-
-        const r = {
-            key: '/',
-            routes: layoutProps.menuList?.map(menu => {
-                return {
-                    name: menu.name,
-                    key: menu.key,
-                    children: menu.children?.map(child => {
-                        return {
-                            name: child.name,
-                            key: child.key
-                        }
-                    })
-                }
-            })
-        }
-
-        setRoute(r)
-
-        // 设置内容高度
-        function onResize() {
-            if (contentRef.current) {
-                contentRef.current.style.minHeight = Math.max(window.innerHeight - 200, 200) + 'px'
-            }
-        }
-
-        onResize()
-        window.addEventListener('resize', onResize)
-        return () => {
-            window.removeEventListener('resize', onResize)
-        }
-
-    }, [])
-
-
-    const onMenuClick = (info: MenuInfo) => {
-        const keyPath = info.keyPath.reverse()
-        let menu: MenuDataItem | undefined = props.menuList?.find(menu => menu.key === keyPath[0]);
-        for (let i = 1; i < keyPath.length; i++) {
-            menu = menu?.children?.find(m => m.key === keyPath[i])
-        }
-        if (menu?.path) {
-            assignProps({
-                loading: true
-            })
-            routerNavigateTo(menu.path, {
-                onSuccess() {
-                    assignProps({
-                        menuActiveKey: info.key
-                    })
-                },
-                onFinish() {
-                    assignProps({
-                        loading: false
-                    })
-                }
-            })
-        }
-    }
-
-    const actionsRender = () => <>
-        <Space>
-            <Button type={'text'} onClick={() => {
-                setTheme(theme === 'light' ? 'realDark' : 'light')
-            }}>
-                {theme === 'realDark' ? <MoonOutlined/> : <SunOutlined/>}
-            </Button>
-        </Space>
-    </>
-
-    return <>
-        <LayoutContext.Provider value={{
-            assignProps,
-            props,
-        }}>
-            <ProConfigProvider dark={theme === 'realDark'}>
-                <ProLayout title={siteTitle}
-                           loading={props.loading}
-                           layout="mix"
-                           actionsRender={actionsRender}
-                           route={route}
-                           fixSiderbar={true}
-                           logo={props.logo}
-                           headerContentRender={headerContentRender}
-                           pageTitleRender={p => `${pageTitle} | ${siteTitle} 后台管理`}
-                           footerRender={() => <>
-                               <Space>
-                                   <a href="https://www.quansitech.com/" target={'_blank'}>全思科技</a>
-                                   <a href="https://github.com/quansitech/" target={'_blank'}>Github</a>
-                               </Space>
-                           </>}
-                           avatarProps={{
-                               title: 'admin',
-                               render(p, dom) {
-                                   return <>
-                                       <Dropdown menu={{
-                                           items: props.userMenu?.map(menu => {
-                                               return {
-                                                   label: menu.title,
-                                                   key: menu.url,
-                                                   onClick() {
-                                                       switch (menu.type) {
-                                                           case 'open':
-                                                               window.open(menu.url)
-                                                               break;
-                                                           case 'nav':
-                                                               routerNavigateTo(menu.url)
-                                                               break
-                                                           case 'ajax':
-                                                               http.get(menu.url).then(() => {
-                                                                   window.location.reload()
-                                                               })
-                                                               break
-                                                       }
-                                                   }
-                                               }
-                                           }) || [],
-                                       }}>
-                                           {dom}
-                                       </Dropdown>
-                                   </>
-                               }
-                           }}
-                           menuProps={{
-                               activeKey: props.menuActiveKey as string,
-                               selectedKeys: [props.menuActiveKey as string],
-                               openKeys: openKeys,
-                               onClick: onMenuClick,
-                               onOpenChange: setOpenKeys
-                           }}
-                >
-
-                    <PageContainer title={pageTitle}>
-                        <div ref={contentRef}>{children}</div>
-                    </PageContainer>
-                </ProLayout>
-            </ProConfigProvider>
-        </LayoutContext.Provider>
-    </>
-}

package/components/Layout.tsx

@@ -1,52 +0,0 @@
-import {Head, usePage} from "@inertiajs/react";
-import {useEffect, useState} from "react";
-import {PageProps} from "@inertiajs/core/types/types";
-import New from "./Layout/New";
-import {PageContainer} from "@ant-design/pro-components"
-import {App} from "antd";
-import global from "../lib/global";
-
-export default function ({children}: {
-    children: React.ReactNode
-}) {
-    const pageProps: PageProps & {
-        layoutProps?: {
-            metaTitle?: string,
-            enableNewLayout?: boolean
-            title?: string,
-        }
-    } = usePage().props
-    const {modal, notification, message} = App.useApp()
-    const [enableNewLayout, setEnableNewLayout] = useState(false)
-    const [pageTitle, setPageTitle] = useState('')
-    const [siteTitle, setSiteTitle] = useState('')
-
-    useEffect(() => {
-        console.log(pageProps)
-
-        if (pageProps.layoutProps?.enableNewLayout) {
-            setEnableNewLayout(true)
-        }
-
-        global.modal = modal
-        global.notification = notification
-        global.message = message
-    }, [])
-
-    useEffect(() => {
-        setPageTitle(pageProps.layoutProps?.metaTitle || '')
-        pageProps.layoutProps?.title && setSiteTitle(pageProps.layoutProps?.title + '')
-    }, [pageProps.layoutProps]);
-
-    return <>
-        {enableNewLayout
-            ? <New pageTitle={pageTitle} siteTitle={siteTitle} children={children}></New>
-            : <>
-                <Head title={pageTitle + ' | ' + siteTitle + ' 后台管理'}></Head>
-                <PageContainer title={pageTitle}>
-                    {children}
-                </PageContainer>
-            </>
-        }
-    </>
-}

package/components/LayoutContext.ts

@@ -1,26 +0,0 @@
-import {createContext} from "react";
-import {MenuDataItem} from "@ant-design/pro-components";
-
-declare type LayoutContextValue = {
-    assignProps: (props: LayoutProps) => void,
-    props: LayoutProps,
-}
-
-export declare type LayoutProps = {
-    title?: string,
-    metaTitle?: string,
-    topMenuActiveKey?: string,
-    menuActiveKey?: string,
-    loading?: boolean,
-    topMenu?: { name: string, key: string }[],
-    menuList?: MenuDataItem[],
-    logo?: string,
-    userMenu?: {
-        title: string,
-        url: string,
-        type: string,
-
-    }[]
-}
-
-export const LayoutContext = createContext<LayoutContextValue>({} as LayoutContextValue)