@quansitech/antd-admin 1.0.0 → 1.1.0

package/components/Layout.tsx

@@ -1,237 +1,52 @@
-import {MenuDataItem, PageContainer, ProLayout} from "@ant-design/pro-components";
-import {App, 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 global from "../lib/global";
-import assign from "lodash/assign";
-
-export default function ({children}: {
-    children: React.ReactNode
-}) {
-
-    const pageProps = usePage<{
-        layoutProps: LayoutProps,
-    }>().props
-
-    const layoutProps = pageProps.layoutProps
-    const {modal, notification, message} = App.useApp()
-    const contentRef = useRef<HTMLDivElement>(null)
-
-    const [props, setProps] = useState<LayoutProps>({
-        title: '',
-        metaTitle: '',
-        topMenuActiveKey: '',
-        menuActiveKey: '',
-        loading: false,
-        topMenu: [],
-        menuList: [],
-        logo: '',
-        userMenu: [],
-    })
-
-    const assignProps = (newProps: LayoutProps) => {
-        setProps(assign(props, newProps))
-    }
-
-    const headerContentRender = () => {
-        return <>
-            <Menu items={props.topMenu}
-                  mode={'horizontal'}
-                  activeKey={props.topMenuActiveKey}
-            />
-        </>
-    }
-
-    const [openKeys, setOpenKeys] = useState<string[]>([])
-    const [pageTitle, setPageTitle] = 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) {
-            setPageTitle(pageProps.layoutProps.metaTitle + ' - ' + title)
-            assignProps({
-                metaTitle: pageProps.layoutProps.metaTitle + ' - ' + title
-            })
-        } else {
-            setPageTitle(title as string)
-            assignProps({
-                metaTitle: title
-            })
-        }
-    }, [pageProps]);
-
-
-    useEffect(() => {
-        console.log(pageProps)
-
-        global.modal = modal
-        global.notification = notification
-        global.message = message
-
-        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)
-
-        // 设置内容高度
-        if (contentRef.current) {
-            contentRef.current.style.minHeight = (window.innerHeight - 200) + 'px'
-        }
-
-    }, [])
-
-
-    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
-                    })
-                }
-            })
-        }
-    }
-
-    return <>
-        <LayoutContext.Provider value={{
-            assignProps,
-            props,
-        }}>
-            <ProLayout title={props.title}
-                       loading={props.loading}
-                       layout="mix"
-                       route={route}
-                       fixSiderbar={true}
-                       logo={props.logo}
-                       headerContentRender={headerContentRender}
-                       pageTitleRender={p => pageTitle}
-                       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={props.metaTitle}>
-                    <div ref={contentRef}>{children}</div>
-                </PageContainer>
-            </ProLayout>
-        </LayoutContext.Provider>
-    </>
-}
+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 +1,26 @@
-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,
-
-    }[]
-}
-
+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)

package/components/ModalContext.ts

@@ -1,16 +1,16 @@
-import {createContext} from "react";
-
-export type ModalContextProps = {
-    inModal: boolean,
-    closeModal: () => void,
-    contexts?: Record<string, any>
-    setAfterClose(callback: () => void): void
-}
-
-export const ModalContext = createContext<ModalContextProps>({
-    inModal: false,
-    closeModal: () => {
-    },
-    setAfterClose: (fn: Function) => {
-    },
+import {createContext} from "react";
+
+export type ModalContextProps = {
+    inModal: boolean,
+    closeModal: () => void,
+    contexts?: Record<string, any>
+    setAfterClose(callback: () => void): void
+}
+
+export const ModalContext = createContext<ModalContextProps>({
+    inModal: false,
+    closeModal: () => {
+    },
+    setAfterClose: (fn: Function) => {
+    },
 })

package/components/Table/Action/Button.tsx

@@ -1,89 +1,89 @@
-import {Button, Popconfirm} from "antd";
-import {useContext, useEffect, useState} from "react";
-import {TableContext} from "../../TableContext";
-import http from "../../../lib/http";
-import {modal, routerNavigateTo} from "../../../lib/helpers";
-import {TableActionProps} from "./types";
-
-export default function (props: TableActionProps & {
-    props: Record<string, any>,
-    link?: {
-        url: string,
-    },
-    request?: RequestOptions,
-    modal?: ModalOptions,
-}) {
-    const tableContext = useContext(TableContext)
-
-    const onClick = async () => {
-        const rowKey = tableContext.getTableProps().rowKey
-        if (props.link) {
-            routerNavigateTo(props.link.url)
-            return
-        }
-
-        if (props.request) {
-            setLoading(true)
-            const data = props.request.data || {}
-            if (props.relateSelection) {
-                data.selection = props.selectedRows?.map(item => item[rowKey])
-                for (const key in data) {
-                    if (typeof data[key] !== 'string') {
-                        continue
-                    }
-                    const matches = data[key].match(/^__(\w+)__$/)
-                    if (!matches) {
-                        continue
-                    }
-                    data[key] = props.selectedRows?.map(item => item[matches[1]])
-                }
-            }
-            try {
-                await http({
-                    url: props.request.url,
-                    method: props.request.method,
-                    headers: props.request.headers || {},
-                    data: data,
-                })
-            } finally {
-                setLoading(false)
-            }
-            return
-        }
-
-        if (props.modal) {
-            await modal(props.modal)
-            return
-        }
-
-        await tableContext.actionRef?.reload()
-    }
-
-    const [loading, setLoading] = useState(false)
-
-    const [disabled, setDisabled] = useState(props.props.disabled)
-
-    useEffect(() => {
-        if (!props.relateSelection) {
-            return
-        }
-        setDisabled(props.selectedRows?.length === 0)
-
-    }, [props.selectedRows]);
-
-
-    const ButtonComponent = () => {
-        if (props.request?.confirm) {
-            return <Popconfirm title={props.request.confirm} onConfirm={onClick}>
-                <Button loading={loading} {...props.props} disabled={disabled}>{props.title}</Button>
-            </Popconfirm>
-        } else {
-            return <Button loading={loading} onClick={onClick} {...props.props}
-                           disabled={disabled}>{props.title}</Button>
-        }
-    }
-
-    return <>
-        <ButtonComponent></ButtonComponent>
-    </>
+import {Button, Popconfirm} from "antd";
+import {useContext, useEffect, useState} from "react";
+import {TableContext} from "../../TableContext";
+import http from "../../../lib/http";
+import {modalShow, routerNavigateTo} from "../../../lib/helpers";
+import {TableActionProps} from "./types";
+
+export default function (props: TableActionProps & {
+    props: Record<string, any>,
+    link?: {
+        url: string,
+    },
+    request?: RequestOptions,
+    modal?: ModalOptions,
+}) {
+    const tableContext = useContext(TableContext)
+
+    const onClick = async () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        if (props.link) {
+            routerNavigateTo(props.link.url)
+            return
+        }
+
+        if (props.request) {
+            setLoading(true)
+            const data = props.request.data || {}
+            if (props.relateSelection) {
+                data.selection = props.selectedRows?.map(item => item[rowKey])
+                for (const key in data) {
+                    if (typeof data[key] !== 'string') {
+                        continue
+                    }
+                    const matches = data[key].match(/^__(\w+)__$/)
+                    if (!matches) {
+                        continue
+                    }
+                    data[key] = props.selectedRows?.map(item => item[matches[1]])
+                }
+            }
+            try {
+                await http({
+                    url: props.request.url,
+                    method: props.request.method,
+                    headers: props.request.headers || {},
+                    data: data,
+                })
+            } finally {
+                setLoading(false)
+            }
+            return
+        }
+
+        if (props.modal) {
+            await modalShow(props.modal)
+            return
+        }
+
+        await tableContext.actionRef?.reload()
+    }
+
+    const [loading, setLoading] = useState(false)
+
+    const [disabled, setDisabled] = useState(props.props.disabled)
+
+    useEffect(() => {
+        if (!props.relateSelection) {
+            return
+        }
+        setDisabled(props.selectedRows?.length === 0)
+
+    }, [props.selectedRows]);
+
+
+    const ButtonComponent = () => {
+        if (props.request?.confirm) {
+            return <Popconfirm title={props.request.confirm} onConfirm={onClick}>
+                <Button loading={loading} {...props.props} disabled={disabled}>{props.title}</Button>
+            </Popconfirm>
+        } else {
+            return <Button loading={loading} onClick={onClick} {...props.props}
+                           disabled={disabled}>{props.title}</Button>
+        }
+    }
+
+    return <>
+        <ButtonComponent></ButtonComponent>
+    </>
 }

package/components/Table/Action/StartEditable.tsx

@@ -1,59 +1,59 @@
-import {Button, ButtonProps, Space} from "antd";
-import {TableContext} from "../../TableContext";
-import {useContext, useState} from "react";
-import http from "../../../lib/http";
-import {TableActionProps} from "./types";
-
-export default function (props: TableActionProps & {
-    props: ButtonProps,
-    saveRequest: {
-        url: string,
-        method: string,
-    },
-}) {
-    const tableContext = useContext(TableContext)
-
-    const onStartClick = () => {
-        const rowKey = tableContext.getTableProps().rowKey
-        tableContext.getTableProps().dataSource.map(item => {
-            tableContext.actionRef?.startEditable(item[rowKey], item)
-        })
-    }
-
-    const onCancelClick = () => {
-        const rowKey = tableContext.getTableProps().rowKey
-        tableContext.getTableProps().dataSource.map(item => {
-            tableContext.actionRef?.cancelEditable(item[rowKey])
-        })
-    }
-
-    const [loading, setLoading] = useState(false)
-
-    const onSaveClick = async () => {
-        setLoading(true)
-
-        try {
-            await http({
-                method: props.saveRequest.method,
-                url: props.saveRequest.url,
-                data: tableContext.getEditedValues(),
-            })
-
-            await tableContext.actionRef?.reload()
-        } finally {
-            setLoading(false)
-        }
-        onCancelClick()
-    }
-
-    return <>
-        {tableContext.editableKeys.length > 0
-            ?
-            <Space>
-                <Button loading={loading} type={'primary'} onClick={onSaveClick}>保存</Button>
-                <Button danger={true} onClick={onCancelClick}>取消</Button>
-            </Space>
-            : <Button {...props.props} onClick={onStartClick}>{props.title}</Button>
-        }
-    </>
+import {Button, ButtonProps, Space} from "antd";
+import {TableContext} from "../../TableContext";
+import {useContext, useState} from "react";
+import http from "../../../lib/http";
+import {TableActionProps} from "./types";
+
+export default function (props: TableActionProps & {
+    props: ButtonProps,
+    saveRequest: {
+        url: string,
+        method: string,
+    },
+}) {
+    const tableContext = useContext(TableContext)
+
+    const onStartClick = () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        tableContext.getTableProps().dataSource.map(item => {
+            tableContext.actionRef?.startEditable(item[rowKey], item)
+        })
+    }
+
+    const onCancelClick = () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        tableContext.getTableProps().dataSource.map(item => {
+            tableContext.actionRef?.cancelEditable(item[rowKey])
+        })
+    }
+
+    const [loading, setLoading] = useState(false)
+
+    const onSaveClick = async () => {
+        setLoading(true)
+
+        try {
+            await http({
+                method: props.saveRequest.method,
+                url: props.saveRequest.url,
+                data: tableContext.getEditedValues(),
+            })
+
+            await tableContext.actionRef?.reload()
+        } finally {
+            setLoading(false)
+        }
+        onCancelClick()
+    }
+
+    return <>
+        {tableContext.editableKeys.length > 0
+            ?
+            <Space>
+                <Button loading={loading} type={'primary'} onClick={onSaveClick}>保存</Button>
+                <Button danger={true} onClick={onCancelClick}>取消</Button>
+            </Space>
+            : <Button {...props.props} onClick={onStartClick}>{props.title}</Button>
+        }
+    </>
 }