@para-ui/core 2.1.32 → 2.1.35

package/docs/view/pageHeader/api.tsx

@@ -0,0 +1,321 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'leftRender',
+        desc: '左侧自定义内容',
+        type: 'ReactNode'
+    },
+    {
+        name: 'menuListProps',
+        desc: '菜单配置',
+        type: 'MenuListProps'
+    },
+    {
+        name: 'footerProps',
+        desc: '尾部参数',
+        type: 'FooterProps'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    },
+];
+
+export const apiDataFooterProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'backSelfcareProps',
+        desc: '返回自助参数',
+        type: 'BackSelfcareProps'
+    },
+    {
+        name: 'languageProps',
+        desc: '语言参数',
+        type: 'LanguageProps'
+    },
+    {
+        name: 'btnListProps',
+        desc: '按钮list',
+        type: 'BtnListProps'
+    },
+    {
+        name: 'userProps',
+        desc: '用户参数',
+        type: 'UserProps'
+    },
+    {
+        name: 'render',
+        desc: '自定义',
+        type: 'ReactNode'
+    }
+];
+
+export const apiDataBackSelfcareProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'icon',
+        desc: '图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'render',
+        desc: '自定义',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onClick',
+        desc: '点击事件',
+        type: '(e: any) => void'
+    },
+];
+
+export const apiDataLanguageProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'selectLang',
+        desc: '当前选中的语言',
+        type: 'string'
+    },
+    {
+        name: 'language',
+        desc: '语言列表',
+        type: '{\n' +
+            '    /** 图标 */\n' +
+            '    icon?: ReactNode;\n' +
+            '    /** 文字 */\n' +
+            '    label?: ReactNode;\n' +
+            '    /** 值 */\n' +
+            '    value?: string;\n' +
+            '\n' +
+            '    [name: string]: any\n' +
+            '}[]'
+    },
+    {
+        name: 'render',
+        desc: '自定义',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onClick',
+        desc: '点击事件',
+        type: '(val: any, item: LanguageItemProps) => void'
+    },
+];
+
+export const apiDataBtnListProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'list',
+        desc: '按钮list',
+        type: '{\n' +
+            '    /** 图标 */\n' +
+            '    icon?: ReactNode;\n' +
+            '    /** 标题 */\n' +
+            '    label?: ReactNode;\n' +
+            '    /** 值 */\n' +
+            '    value?: string;\n' +
+            '    /** 标记 */\n' +
+            '    sign?: boolean;\n' +
+            '\n' +
+            '    [name: string]: any\n' +
+            '}[]'
+    },
+    {
+        name: 'render',
+        desc: '自定义',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onClick',
+        desc: '点击事件',
+        type: '(item: BtnListItemProps, e: any) => void'
+    },
+];
+
+export const apiDataUserProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'img',
+        desc: '图片地址',
+        type: 'string'
+    },
+    {
+        name: 'imgRender',
+        desc: 'imgRender',
+        type: 'ReactNode'
+    },
+    {
+        name: 'label',
+        desc: '显示名',
+        type: 'ReactNode'
+    },
+    {
+        name: 'render',
+        desc: '自定义',
+        type: 'ReactNode'
+    },
+    {
+        name: 'selectValue',
+        desc: '下拉菜单选中的值',
+        type: 'any'
+    },
+    {
+        name: 'list',
+        desc: '下拉菜单',
+        type: '{\n' +
+            '    /** 图标 */\n' +
+            '    icon?: ReactNode;\n' +
+            '    /** 标题 */\n' +
+            '    label?: ReactNode;\n' +
+            '    /** 值 */\n' +
+            '    value?: string;\n' +
+            '\n' +
+            '    [name: string]: any;\n' +
+            '}[]'
+    },
+    {
+        name: 'onClick',
+        desc: '点击事件',
+        type: '(e: any) => void'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击下拉菜单',
+        type: '(val: any, item: UserListProps) => void'
+    },
+];
+
+export const apiDataMenuListProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'list',
+        desc: '菜单列表参数',
+        type: 'MenuChildrenProps[]'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'moreCustomize',
+        desc: '自定义更多内容',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    },
+];
+
+export const apiDataMenuChildrenProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'label',
+        desc: '菜单名',
+        type: 'ReactNode'
+    },
+    {
+        name: 'type',
+        desc: '菜单类型',
+        type: 'redirect | router | iframe | snack | snackPage'
+    },
+    {
+        name: 'path',
+        desc: '菜单路径',
+        type: 'string'
+    },
+    {
+        name: 'icon',
+        desc: '菜单图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'component',
+        desc: '菜单组件',
+        type: 'any'
+    },
+    {
+        name: 'children',
+        desc: '子菜单',
+        type: 'MenuChildrenProps[]'
+    },
+    {
+        name: 'children',
+        desc: '子菜单',
+        type: 'MenuChildrenProps[]'
+    },
+    {
+        name: 'idMenuLast',
+        desc: '菜单最后一层所有上下级 一条线',
+        type: 'any'
+    },
+    {
+        name: 'selectMenu',
+        desc: '当前选中菜单',
+        type: 'string'
+    },
+    {
+        name: 'onClickMenu',
+        desc: '点击菜单',
+        type: '(item: MenuChildrenProps | false) => void'
+    },
+];
+
+export default apiData;

package/docs/view/pageHeader/codeString.tsx

@@ -0,0 +1,252 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicPageHeader = `
+import PageHeader from '@para-ui/core/PageHeader';
+import {MenuListProps} from '@para-ui/core/PageHeader/interface';
+
+const [menuId, setMenuId] = useState<string>('');
+const [selectLang, setSelectLang] = useState<string>('zh');
+const [userSelect, setUserSelect] = useState<string>('');
+const menu: MenuListProps[] = [
+    {
+        label: "默认跳转",
+        type: "redirect",
+        path: "/",
+        icon: "Application"
+    },
+    {
+        label: "按钮",
+        type: "router",
+        path: "/button",
+        children: [
+            {
+                label: "按钮1",
+                type: "router",
+                path: "/button1",
+                children: [
+                    {
+                        label: "按钮1-1",
+                        type: "router",
+                        path: "/button11",
+
+                    },
+                    {
+                        label: "按钮1-2",
+                        type: "router",
+                        path: "/button12",
+                    },
+                    {
+                        label: "按钮1-3",
+                        type: "router",
+                        path: "/button13",
+                    },
+                    {
+                        label: "按钮1-4",
+                        type: "router",
+                        path: "/button14",
+                    },
+                    {
+                        label: "按钮1-5",
+                        type: "router",
+                        path: "/button15",
+                    }
+                ]
+            },
+            {
+                label: "按钮2",
+                type: "router",
+                path: "/button2",
+            }
+        ]
+    },
+    {
+        label: "面包屑",
+        type: "router",
+        path: "/breadcrumbs",
+        icon: 'StartCircle'
+    },
+    {
+        label: "菜单",
+        type: "router",
+        path: "/caidan",
+        icon: "Application",
+        children: [
+            {
+                label: "菜单1",
+                type: "router",
+                path: "/caidan1",
+                icon: "Application"
+            },
+            {
+                label: "菜单2",
+                type: "router",
+                path: "/caidan2",
+                icon: "Application",
+                children: [
+                    {
+                        label: "菜单2-1",
+                        type: "router",
+                        path: "/caidan21"
+                    },
+                    {
+                        label: "菜单2-2",
+                        type: "router",
+                        path: "/caidan22",
+                        icon: "Application",
+                        children: [
+                            {
+                                label: "菜单2-2-1",
+                                type: "router",
+                                path: "/caidan221",
+                                icon: "Application"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+
+const clickMenu = (item: any) => {
+    console.log(item)
+    setMenuId(item.path);
+}
+
+const onClickLang = (val: string, item: any) => {
+    console.log(item)
+    setSelectLang(val);
+}
+
+const clickBtn = (item: any) => {
+    console.log(item)
+}
+
+const clickSelfcare = () => {
+    console.log('点击自助服务');
+}
+
+const clickUser = () => {
+    console.log('点击用户')
+}
+
+const clickUserMenu = (val: any, item: any) => {
+    console.log(item)
+    setUserSelect(val)
+}
+
+<div className="page-header-box">
+    <PageHeader
+        leftRender={'当前菜单'}
+        menuListProps={{
+            list: menu
+        }}
+        selectMenu={menuId}
+        onClickMenu={clickMenu}
+        footerProps={
+            {
+                backSelfcareProps: {
+                    icon: <ArrowRightFull />,
+                    label: '回到自助服务',
+                    onClick: clickSelfcare
+                },
+                languageProps: {
+                    selectLang: selectLang,
+                    language: [
+                        {
+                            label: '中文',
+                            icon: <LanguageChinese />,
+                            value: 'zh'
+                        },
+                        {
+                            label: '英文',
+                            icon: <LanguageEnglish />,
+                            value: 'en'
+                        }
+                    ],
+                    onClick: onClickLang
+                },
+                btnListProps: {
+                    list: [
+                        {
+                            label: '消息',
+                            icon: <Voice />
+                        },
+                        {
+                            label: '退出',
+                            icon: <Quit />
+                        }
+                    ],
+                    onClick: clickBtn
+                },
+                userProps: {
+                    img: './logo.png',
+                    label: '林海东',
+                    onClick: clickUser
+                }
+            }
+        }
+    />
+</div>
+<div className="page-header-box">
+    <PageHeader
+        leftRender={'当前菜单'}
+        footerProps={
+            {
+                languageProps: {
+                    selectLang: selectLang,
+                    language: [
+                        {
+                            //label: '中文',
+                            icon: <LanguageChinese />,
+                            value: 'zh'
+                        },
+                        {
+                            //label: '英文',
+                            icon: <LanguageEnglish />,
+                            value: 'en'
+                        }
+                    ],
+                    onClick: onClickLang
+                },
+                btnListProps: {
+                    list: [
+                        {
+                            //label: '消息',
+                            icon: <Voice />,
+                            sign: true
+                        },
+                        {
+                            //label: '退出',
+                            icon: <Quit />
+                        }
+                    ],
+                    onClick: clickBtn
+                },
+                userProps: {
+                    img: './logo.png',
+                    label: '林海东sssssssssssssss',
+                    list: [
+                        {
+                            label: '个人信息',
+                            //icon: <LanguageChinese/>,
+                            value: 'user'
+                        },
+                        {
+                            label: '安全管理',
+                            //icon: <LanguageEnglish/>,
+                            value: 'selasfd'
+                        }
+                    ],
+                    selectValue: userSelect,
+                    onClick: clickUser,
+                    onClickMenu: clickUserMenu
+                }
+            }
+        }
+    />
+</div>
+`;

package/docs/view/pageHeader/index.scss

@@ -0,0 +1,6 @@
+.paraui-page-header-demo {
+  .page-header-box {
+    height: 60px;
+    margin-bottom: 100px;
+  }
+}