@uiw-admin/basic-layouts

页面整体布局

何时使用

当项目需要默认布局的使用

安装

npm i @uiw-admin/basic-layouts --save # yarn add @uiw-admin/basic-layouts

在项目中，BasicLayouts组件下如果不使用LayoutTabs组件内容放react-router-dom 的Outlet组件。否则只需要放LayoutTabs组件即可。

import { Outlet } from '@kkt/pro';
import BasicLayout from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

// 不使用 LayoutTabs 组件
const Layouts = () => {
  return (
    <BasicLayout routes={[]}>
      <Outlet />
    </BasicLayout>
  )
}

// 使用 LayoutTabs 组件
const Layouts = () => {
  return (
    <BasicLayout routes={[]}>
      <LayoutTabs routes={[]} />
    </BasicLayout>
  )
}

基本使用

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts'
import LayoutTabs from "@uiw-admin/layout-tabs";

function BasicLayoutScreen() {
  const routerArrs = [
    {
      path: "/components/authorized",
      name: "权限组件",
      icon: 'appstore',
      element: <div>测试</div>,
    },
    {
      path: "/components/basic-layouts",
      name: "页面布局",
      icon: 'appstore',
      element: <div>测试2</div>,
    },
    {
      path: "/components/document-title",
      name: "页面标题",
      icon: 'appstore',
      element: <div>测试2</div>,
    }
  ]
  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        isDefaultContentStyle={false}
        routes={routerArrs}
      >
        内容
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

头部布局

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts'
import LayoutTabs from "@uiw-admin/layout-tabs";

function BasicLayoutScreen() {
  const routerArrs =[
    {
      path: "/components/authorized",
      name: "权限组件",
      icon: 'appstore',
      element: <div>测试</div>,
    },
    {
      path: "/components/basic-layouts",
      name: "页面布局",
      icon: 'appstore',
      element: <div>测试2</div>,
    },
    {
      path: "/components/document-title",
      name: "页面标题",
      icon: 'appstore',
      element: <div>测试2</div>,
    }
  ]
  const basicLayoutProps = {
    headerLayout: 'top',
    headerBackground: '#343a40',
    headerFontColor: '#fff',
  }
  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps} 
        isDefaultContentStyle={false}
        routes={routerArrs}
      >
        内容
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

菜单搜索功能

在根目录.kktprc.js文件配置 SEARCH_MENU 参数，类型：boolen 默认true

// .kktprc.ts 
export default {
  define:{
    SEARCH_MENU:true
  }
}

右侧头像部分配置

• menus配置右侧下拉菜单内容;
• profile配置头像以及下拉菜单左侧内容;
• onReloadAuth调用刷新权限接口;
• layouts.closeMenu关闭菜单事件;

window.SEARCH_MENU = true
import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

const routerArrs = [
  {
    path: "/components/authorized",
    name: "权限组件",
    icon: 'appstore',
    element: <div>测试</div>,
  },
  {
    path: "/components/basic-layouts",
    name: "页面布局",
    icon: 'appstore',
    element: <div>测试2</div>,
  },
  {
    path: "/components/document-title",
    name: "页面标题",
    icon: 'appstore',
    element: <div>测试2</div>,
  }
]

function BasicLayoutScreen() {
  const layouts = useLayouts()
  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '修改密码',
        icon: 'setting',
      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
  }

  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps}
        isDefaultContentStyle={false}
        routes={routerArrs}  >
        内容
      </BasicLayout>
    </div>
  )
}

export default BasicLayoutScreen;

自定义退出

通过隐藏系统默认的退出登录，自定义退出登录

import React from 'react';
import BasicLayout, { useLayouts } from '@uiw-admin/basic-layouts';
import LayoutTabs from "@uiw-admin/layout-tabs";

const routerArrs = [
  {
    path: "/components/authorized",
    name: "权限组件",
    icon: 'appstore',
    element: <div>测试</div>,
  },
  {
    path: "/components/basic-layouts",
    name: "页面布局",
    icon: 'appstore',
    element: <div>测试2</div>,
  },
  {
    path: "/components/document-title",
    name: "页面标题",
    icon: 'appstore',
    element: <div>测试2</div>,
  }
]

function BasicLayoutScreen() {
  const layouts = useLayouts();

  const basicLayoutProps = {
    // 右侧下拉菜单内容
    menus: [
      {
        title: '欢迎来到uiw',
        icon: 'smile',
        // 调用关闭菜单事件
        onClick: () => layouts.closeMenu(),
      },
      {
        title: '退出登录',
        icon: 'setting',
        onClick: () => { console.log('退出'); layouts.closeMenu() },

      },
    ],
    profile: {
      // 头像地址
      avatar: '',
      // 下拉菜单左侧内容
      menuLeft:<div style={{ marginRight: 15 }}>可做自定义dom</div>
    },
    // 调用刷新接口
    onReloadAuth: () => {},
    layouts,
    hideReloadButton: true,
    hideUserInfo: true,
    hideLogoutButton: true
  }

  return (
    <div style={{ height: 400 }}>
      <BasicLayout
        {...basicLayoutProps}
        isDefaultContentStyle={false}
        routes={routerArrs}  >
        <div style={{ padding: 14 }}>
          <LayoutTabs routes={routerArrs} /> 
          <div>注意：项目中使用 不需要设置 padding 样式</div>
        </div>
      </BasicLayout>
    </div>
  )
}
export default BasicLayoutScreen;

Props

参数	说明	必填	类型	默认值
className	BasicLayout 外层className	否	string	-
style	BasicLayout 外层最外层样式式	否	object	-
logo	logo图标	否	string	-
projectName	项目名称	否	string	-
footer	页脚	否	React.ReactElement	-
routes	菜单路由数据	否	KktproRoutesProps[]	-
children	内容	否	React.ReactNode	-
headerLayout	头部布局	否	枚举类型："top" | "default"	default
headerBackground	头部背景色	否	string	"#fff"
headerFontColor	头部字体颜色	否	string	"#000"
menuHide	菜单隐藏(可从路由组件router-control组件带参数hiddenMainMenu控制)	否	boolen	false
menus	右侧点击头像展示菜单	否	HeaderMenuItemsProps[]	-
profile	头像部分	否	{avatar(头像)?:string,userName(用户名)?:string,menuLeft(菜单左侧)?:React.ReactElement}	-
onReloadAuth	重新加载权限	否	() => void
layouts	右侧点击头像展示菜单配置	否	UseLayoutsProps	-
isDefaultContentStyle	内容区域默认样式展示	否	boolean	true
hideReloadButton	隐藏刷新权限按钮	-	Boolean	false
hideLogoutButton	隐藏退出登录按钮	-	Boolean	false
hideUserInfo	隐藏用户信息	-	Boolean	false
onLogout	覆盖原始退出事件	否	(navigate: NavigateFunction) => void	-
onLogoClick	logo 点击事件	否	(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void	-

建议：在使用 @uiw-admin/layout-tabs 组件渲染的时候，建议 isDefaultContentStyle 设置为 false

useLayouts

response

参数	说明	必填	类型	默认值
headerRightvisible	关闭右上角menu菜单	否	boolen	-
closeMenu	关闭右上角menu菜单事件	否	() => void	-
updateStore	更新数据	否	({ headerRightvisible: boolean }) => void	-

贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.