布局构建

介绍

Teek 在完成页面渲染的期间，进行了很多的逻辑处理，那么如果要想二次开发 Teek，则必须了解 Teek 的构建流程，这样才能根据需求切入源码，进行二次开发。

布局路由

Teek 除了有路由的初始化构建流程，还有布局的构建流程，布局的构建流程是以静态路由开始。

布局路由是 Teek 的核心路由，它不需要进行权限管控，所以放在了静态路由里：

export const staticRoutes: RouterConfigRaw[] = [
  {
    path: "/",
    name: LAYOUT_NAME,
    component: () => import("@/layout/index.vue"),
    redirect: HOME_URL,
    children: [],
  },
];

staticRoutes 里的路由将随着 main.ts 初始化而初始化，优先级高于路由的 beforeEach，也就是布局构建的初始化快于路由构建的初始化，这也就是为什么路由构建的初始化里能看到权限路由都注册到布局路由的子路由。

布局组件

在上面的 布局路由 了解到布局组件的入口组件是 src/layout/index.vue，该文件内容（截取部分）：

<template>
  <component :is="LayoutComponents[layoutMode]" />
</template>

<script setup lang="ts">
import type { Component } from "vue";
import { watch } from "vue";
import { storeToRefs } from "pinia";
import { LayoutModeEnum } from "@/common/enums/appEnum";
import { useSettingStore } from "@/pinia";
import LayoutVertical from "./layout-vertical/index.vue";
import LayoutClassic from "./layout-classic/index.vue";
import LayoutHorizontal from "./layout-horizontal/index.vue";
import LayoutColumns from "./layout-columns/index.vue";
import LayoutMixins from "./layout-mixins/index.vue";
import LayoutIFrame from "./layout-iframe/index.vue";

import "./base-layout.scss";

defineOptions({ name: "Layout" });

// 布局组件
const LayoutComponents: Record<string, Component> = {
  [LayoutModeEnum.Vertical]: LayoutVertical,
  [LayoutModeEnum.Classic]: LayoutClassic,
  [LayoutModeEnum.Horizontal]: LayoutHorizontal,
  [LayoutModeEnum.Columns]: LayoutColumns,
  [LayoutModeEnum.Mixins]: LayoutMixins,
  [LayoutModeEnum.IFrame]: LayoutIFrame,
};

const settingStore = useSettingStore();
const { layoutMode } = storeToRefs(settingStore);
</script>

可以看到，入口组件引用了 6 种布局，分别为

• 纵向布局：src/layout/layout-vertical/index.vue
• 经典布局：src/layout/layout-classic/index.vue
• 横向布局：src/layout/layout-horizontal/index.vue
• 分栏布局：src/layout/layout-columns/index.vue
• 混合布局：src/layout/layout-mixins/index.vue
• 子系统布局：src/layout/layout-iframe/index.vue

通过 component 标签来动态切换对应的布局。

Teek 的布局组件有顶部栏、菜单栏、标签栏、内容区，位于 src/layout/components 下的 header、menu、tab-nav、page-content 里。

所以进入任意一个布局里都可以看到这些布局组件。

如果你需要修改源码，自行去对应的布局组件修改即可。