名称：useFrameLayout

业务需求：

这个名字想好了好长时间，从名字可以简单看出来，这个hooks的目的是和操作框架布局相关，本来好长一段时间实在不想开发这个，觉得必要性不强，但是又被处处困扰，最后思路想去，决定还是写出来。

决策：

平台的页面布局，对于一个ToB的管理系统，被产品设计的像个多页的网站，框架内的布局五花八门，每个主功能的入口页面和子页的布局不一样，而且后期个别页面还有更复杂的，这里点到为止，别越引越深，搞的过于复杂化。

从上面简单的内容可以看出2种不同的布局方式，画一画吧

入口页面布局模式：

二级页面布局模式：

以下代码主要是，针对有些页面，需要控制banner区域和sidebar区域的隐藏和显示

代码实现：

import store from '@/store'
/**
 * 布局映射列表
 * key：页面布局区域
 * value: store控制命令
 */
const LayoutMapping = {
    "sidebar":"system/sidebarAction",
    "banner":"system/bannerAction",
}

const useFrameLayout = (name, status = false)=>{
    store.commit(LayoutMapping[name], status);
    return status
}
export default useFrameLayout

状态的响应使用的是 vuex的store来进行状态修改，store.commit

业务使用

useFrameLayout('sidebar',false) ---隐藏左侧菜单区域

import { useFrameLayout } from "@hooks";

/**
 * 显示隐藏逻辑控制
 */
const controlRun = (router) => {
  useFrameLayout('sidebar',true)
  useFrameLayout('banner',true)

  // 控制Sidebar
  controlSidebar(router)
  // 控制Banner
  controlBanner(router)
}

封装，完毕~~！老铁们，吐槽吧，
这个东西有点鸡肋，后期我还是要干掉的。
后期的做法就是：
使用布局模板来做，实现几套页面模板，进行继承或者对于区域内容填充。
等待吧。。。。

针对业务侧一系列的Hooks封装，请看下方：

业务层-hooks封装设计
 业务层-hooks封装之useAuth
业务层-hooks封装之useSessionStorage
业务层-hooks封装之usePreview
业务层-hooks封装之useExport
业务层-hooks封装之useBrowser

业务层-hooks封装之useFrameLayout

业务需求：

决策：

代码实现：

业务使用