@yueglobal/ui

粤链全球 - React 组件库

如需vue版本，请前往 @yueglobal/vue-ui

安装使用

yarn add @yueglobal/ui

import {
  // 页面头部组件
  YuePageHeader,
  // 页面底部组件
  YuePageFooter,
} from '@yueglobal/ui';

YuePageHeader

页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。

属性

| 属性 | 说明 | 类型 | 默认值 | | ----------------- | ----------------------------------- | ------------------------------------------- | ---------- | | width | 内容宽度 | string | number | 80% | | backgroundColor | 头部背景色 | string | #fff | | activeLabel | 当前选中的一级菜单项的标题 | string | | | rightContent | 顶部右侧的登录/用户信息按钮 | ReactNode | | | onLocaleChange | 切换语言时的回调事件 | ({locale: string}) => void | | | | 以下二级导航栏的配置 | | | | menuItems | 各业务系统的菜单 | YueMenuItem[] | | | pageTitle | 缺值时从一级菜单匹配值 | string | | | pageIcon | 页面图标 | ReactNode | | | breadcrumbs | 自定义面包屑数据 | YueBreadcrumb[] | | | routes | 路由数据,用于自动生成面包屑 | any | | | pathname | 当前的路由 | string | | | subMenuLayout | 二级导航栏的菜单弹出层布局 | vertical | horizontal | vertical | | onRouteChange | 点击菜单/面包屑时触发的路由切换事件 | ({ key: string; label?: string }) => void | |

• 业务子系统：pageTitle或pageIcon缺省时会根据url自动从一级菜单匹配值

• 面包屑：若breadcrumbs缺省，则会根据routes、pathname自动生成面包屑的数据

• routes是umijs的路由列表，需按如下方式取值：

import { useAppData } from '@umijs/max';
// .......
const { routes } = useAppData();

YueMenuItem

| 属性 | 说明 | 类型 | 备注 | | ---------- | ---------- | --------------- | ------------------------------ | | key | 唯一标识 | string | 必填，可传路由地址如 /home | | label | 菜单项文案 | string | 必填 | | children | 子菜单项 | YueMenuItem[] | |

YueBreadcrumb

| 属性 | 说明 | 类型 | 备注 | | ------- | ---------------------- | -------- | ---------------------- | | key | 唯一标识，用于路由跳转 | string | 可传路由地址如 /home | | label | 面包屑项文案 | string | |

使用示例

import React from 'react';
import { YuePageHeader } from '@yueglobal/ui';
import { useAppData, useLocation, useModel, history } from '@umijs/max';

const Index = () => {
  const { routes } = useAppData();
  const { pathname } = useLocation();
  const { initialState } = useModel('@@initialState');

  const menuItems = [
    { key: '/home', label: '首页' },
    {
      key: '/exhibition',
      label: '展会',
      children: [
        { key: '/exhibition/international', label: '国际展会' },
        { key: '/exhibition/domestic', label: '国内展会' },
      ],
    },
    { key: '/business', label: '商务' },
  ];

  const onRouteChange = (item: { key: string; label?: string }) => {
    console.log('点击的菜单key: ', item.key);
    // 在这里处理路由跳转逻辑, 比如
    if (item.key.startsWith('/')) {
      history.push(item.key);
    }
  };

  const onLocaleChange = ({ locale }: { locale: string }) => {
    console.log('切换语言为：', locale);
  };

  return (
    <YuePageHeader
      width={1440}
      pageTitle="会展服务"
      menuItems={menuItems}
      pathname={pathname}
      routes={routes}
      rightContent={
        !!initialState?.isLogin ? <div>用户名</div> : <div>登录</div>
      }
      onRouteChange={onRouteChange}
      onLocaleChange={onLocaleChange}
    />
  );
};

export default Index;

YuePageFooter

页面底部组件，显示版权信息、联系方式和相关链接。

属性

| 属性 | 说明 | 类型 | 默认值 | | ------- | -------- | -------------------- | ------ | | width | 内容宽度 | string | number | 80% |

使用示例

import React from 'react';
import { YuePageFooter } from '@yueglobal/ui';

const Index = () => {
  return <YuePageFooter width={1440} />;
};

export default Index;