@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	主体背景颜色