一个文笔一般，想到哪是哪的唯心论前端小白。

🧠 - 简介

layout 在一个项目中的作用就是一个地基。

当然，所谓的 layout 并不只是 <el-container> ，而是与 <el-container> 配套的一些通用组件：Header、Footer、BreadCrumb、Menu。除此之外也包含了一个项目中必备的业务页面 Login、404、营销页。

所以这篇就是记录这些内容的。

👁️ - 分析

先粘两个效果图出来吧！

主要页面：

根据现有项目经验，右边面包屑下面的就是 <router-view> ，有了核心地方，其他四个板块也就很清晰了。需要考虑的就是样式问题，除了router-view部分自适应宽高之外，都是固定的位置。

所以我就设计了四个参数来控制各个部分：

const layoutConfig = reactive({
  hasBread: true,
  hasFooter: true,
  hasAside: true,
  hasHeader: true,
  
  ignoreMainPadding: false,
})

登录页面：

和主要页面相比，登录页面则是代表了没有周边板块的一类页面。

🫀 - 拆解

💪 - 落实

记录几段核心代码，用以日后回溯使用。

pinia 的封装与使用并本地持久化

import { defineStore } from 'pinia';
import pinia from '@/store/install';

const useMainStore = defineStore('main', {
  state: () => ({
    loading: false,
    token: '',
    currentScale: 0,
    userInfo: {
      username: 'zhagnsan', // 用户名
      realname: '张三', // 真实姓名
      sex: 'm', // 性别
      phone: '15227974556', // 电话
      email: '15227974559@163.com', // 邮箱
      birth: '1992-05-01', // 出生日期
      avantor: '', // 头像
    },
  }),
  getters: {
    getUsername: (state) => state.userInfo?.username,
    getToken: (state) => state.token,
    getCurrentScale: (state) => state.currentScale,
  },
});

// 数据持久化
// 1. 保存数据
const instance = useMainStore(pinia);
instance.$subscribe((_, state) => {
  localStorage.setItem(
    'login-store',
    JSON.stringify({
      ...state,
    }),
  );
});

// 2. 获取保存的数据，先判断有无，无则用先前的
const old = localStorage.getItem('login-store');
if (old) {
  instance.$state = JSON.parse(old);
}

export { useMainStore };

//  分割线---------------------------

// 使用

// 1- 更新
import { useMainStore } from '@/store';
const mainStore = useMainStore();
mainStore.$patch({
    token: '123',
    userInfo: {
      realname: loginForm.username
    },
});

// 2- 获取
import { useMainStore } from '@/store';
const mainStore = useMainStore();
const userInfo = computed(() => mainStore.userInfo);

菜单相关问题的解决方案

模块切换时，菜单同步更新

项目设计之初，已经有针对性的将菜单和模块进行绑定。在切换模块的时候同步更新菜单数据即可，并且menu的高亮规则使用 router 模式即可。

有些项目比较简单，则将 menu 数据和模块进行解耦，menu 放在一块即可。
重复点击问题

重复点击问题是经常遇到的，有两个解决方案：
- 配置router守卫，如果目的地址和当前地址一致，则 return false
- 在 menu 的点击事件中，判断如果当前高亮项和点击项一致则阻止点击事件

🛀 - 总结

当时做模板项目的时候遇到不少坑，但是现在已经记不起来了，所以就先这么的吧！

系列文章:

脚手架开发

模板项目初始化

模板项目开发规范与设计思路

layout设计与开发

login 设计与开发

CURD页面的设计与开发

监控页面的设计与开发

富文本编辑器的使用与页面设开发设计

主题切换的设计与开发并页面

水印切换的设计与开发

全屏与取消全屏

开发提效之一键生成模块(页面)

YGG-CLI-4-layout设计与开发