Package Exports

@uiw-admin/basic-layouts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw-admin/basic-layouts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

页面整体布局

何时使用

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

安装

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.