@unicom-blockchain/common-layout

项目简介

@unicom-blockchain/common-layout 封装了普通系统的左侧菜单视图与顶部的菜单

功能

• 管理系统主界面布局

安装

使用 pnpm 安装：

pnpm i @unicom-blockchain/common-layout

配置布局

import { registerLayout } from '@unicom-blockchain/common-layout';
import { ElDropdownItem } from 'element-plus';
import ProjectIcon from 'assets/logo.png';
const Menu = <ElDropdownItem>123123</ElDropdownItem>;
registerLayout({
  logo: ProjectIcon,
  iconClass: 'iconfront',
  extraHeaderMenu: Menu,
});

使用布局

import { Layout as LayoutComponent } from '@unicom-blockchain/common-layout';
import { Layout, Page } from '@unicom-blockchain/app-base';
@Page()
@Layout(LayoutComponent)
class Page3 {
  component = () => import('./Page2.vue');
}

CSS变量

| 名称 | 描述 | | -------------------------------------- | -------------- | | --commonlayout-header-height | 头部高度 | | --commonlayout-header-background-color | 头部背景颜色 | | --commonlayout-header-main-padding | 头部与主体间距 | | --commonlayout-main-bottom-padding | 主体与底部间距 | | --commonlayout-menu-width | 菜单栏宽度 | | --commonlayout-menu-border-radius | 菜单栏边框圆角 | | --commonlayout-menu-background-color | 菜单栏背景颜色 | | --commonlayout-main-padding-left | 主体左侧间距 | | --commonlayout-main-padding-right | 主体右侧边距 | | --commonlayout-main-border-radius | 主体边框圆角 | | --commonlayout-main-background-color | 主体背景颜色 |