# CommonLayer 系统整体布局

### 基础用法

:::demo 
```vue

<script setup lang="ts">
import { ref } from 'vue';
// import { useRoute } from 'vue-router';
// import logo from './assets/images/hd-logo.svg';

const menuList = ref<any>([
  {
    label: '表格示例',
    name: 'table',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/table'
  },
  {
    label: '栅格示例',
    name: 'grid',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/grid'
  },
  {
    label: '卡片示例',
    name: 'card',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/card'
  },
  {
    label: '标签页示例',
    name: 'tabs',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/tabs'
  },
  {
    label: '描述页示例',
    name: 'info',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/info'
  },
  {
    label: '复杂表格',
    name: 'complex-form',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/complex-form'
  },
  {
    label: '弹窗demo',
    name: 'dialog',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/dialog'
  },
  {
    label: '上传组件demo',
    name: 'upload',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/upload'
  },
  {
    label: '图标集合',
    name: 'icons',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/icons'
  }
]);

const headerInfo = ref<any>({
  // title: 'AIoT Edge管理平台',
  // logo
});
// const route = useRoute();

const userInfo = ref<any>({
  userAccount: 'deployer'
});
const commonds = ref<any>([
  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('260px');
const isCollapse = ref<any>(false);

function handleChangeCollapse(collapse: any) {
  isCollapse.value = collapse;
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '260px';
  }
}
</script>

<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    @handle-change-collapse="handleChangeCollapse"
  ></common-layer>
</template>
```


### 配置参数

menu相关字段
| 参数                | 说明                     | 类型             | 是否必须 |
| :------------------ | :-------------------- | :--------------- | :------- |
| isCollapse | 侧边栏折叠与展开，默认为false | Boolean  |  false |
| menuList | 菜单栏menu列表，如果没有菜单时，可以不传 | Array[]  |  false |
| ----label | 菜单展示项 | String |  true |
| ----name | 菜单路由名称，与path中的路劲保持一致  | String |  true |
| ----icon | 菜单左侧的icon，默认可以从common-icon中去做选择 | String | false  |
| ----level | 菜单层级 | Number | true  |
| ----path | 菜单路径，默认语name相同 | String | true  |


header相关字段

| 参数                | 说明                     | 类型             | 是否必须 |
| :------------------ | :-------------------- | :--------------- | :------- |
| headerInfo |  | Object  |  false |
| ----logo | 产品logo路劲，遵循vue静态文件引入方式即可 | File |  true |
| ----title | 产品名称 | String |  true |
| ----menus | todo： header中菜单方式 | String | false  |
| showMore | 是否显示加载更多按钮文字 | Boolean  |  false |
| showLang | 是否显示切换语言文字 |  Boolean |  false |
| showSearch | 是否显示header中的搜索按钮 |  Boolean |  false |
| showInformation | 是否显示说明文档图标或者文字 |  Boolean |  false |
| showMessage | 是否显示message icon |  Boolean |  false |
| userInfo | 用户信息 |  Object |  true |
| ----src | 用户头像连接 |  String |  true |
| ----userAccount | 用户名称 |  String |  true |
| commonds | header中点击头像时触发的下拉时间列表 |  Object |  true |
| ----commond | 触发commond的name，例如logout/goInfo |  String |  true |
| ----label | commond展示文本 |  String |  true |




其他字段

| 参数                | 说明                     | 类型             | 是否必须 |
| :------------------ | :-------------------- | :--------------- | :------- |
| breads | 整体框架中的面包屑展示，需要与router信息配合，此字段取自route-> meta -> breadcrumb 中的breadcrumb字段，所以需要引入route后方可实现| Array  |  false |
| asideWidth | 侧边栏位宽度，默认'260px'  | String  |  false |



### 事件
| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| handleChangeCollapse |  点击collape时，收缩时的宽度 | -- |