11 布局全局配置 - udo-bit/naive_admin_pro GitHub Wiki

目标

创建全局默认的布局配置文件
配置开发环境与生产环境的布局配置

创建全局默认配置

为了方便我们修改我们的一些通用配置项，我们需要创建一个用来管理全局配置的文件夹，来管理我们所有的全局配置项。

创建文件夹

我们在src目录下创建一个config文件夹用于存放当前项目中所有的全局配置项。

创建布局全局配置项

然后我们在项目中创建一个用于控制布局的全局配置文件layout-theme.ts

export const layoutThemeConfig = {}

项目全局状态管理

接下来我们所有与全局配置相关的配置项，全部都放到我们的pinia中进行管理状态。在stores目录中创建一个app.ts用于管理当前项目中的所有的全局状态。

import { layoutThemeConfig } from '~/config/layout-theme'

const useAppStore = defineStore('app', () => {
  const layout = reactive(layoutThemeConfig)

  return {
    layout,
  }
})

export {
  useAppStore,
}

生产与开发

一般情况下，我们在生产环境中，我们配置了布局以后，当我们刷新页面的时候。还是会保持当前的布局模式，所以我们需要对布局做一个持久化保存。在开发环境中，为了方便我们定位问题和调试代码，我们一般是不需要做持久化的；所以我们要根据环境变量来区分开发环境和生产环境。

创建可组合式的api文件夹

首先我们先创建一个可组合式的api的文件夹。在src目录下创建一个compsables的文件夹，用于存放我们的组合式API。我们来实现一个全局配置布局持久化保存的组合式api，在composables下创建一个layout-theme.ts的文件，我们使用vueuse中提供的创建全局状态管理的函数以及，useStorage实现持久化保存的功能。

import { layoutThemeConfig } from '~/config/layout-theme'
export const useLayoutTheme = createGlobalState(() => useStorage('layout-theme', layoutThemeConfig))

改造app.ts

最终我们在app.ts中做如下的改造：

import { layoutThemeConfig } from '~/config/layout-theme'

const useAppStore = defineStore('app', () => {
  // 判断当前是不是在开发环境中，如果是在开发环境中那么我们直接使用默认的配置即可。
  const defaultLayout = import.meta.env.DEV ? layoutThemeConfig : useLayoutTheme()
  const layout = reactive(unref(defaultLayout))

  return {
    layout,
  }
})

export {
  useAppStore,
}

编写类型

接下来我们来编写一下布局类型，我们在config/layout-theme.ts中编写我们的类型如下：

export interface LayoutTheme {
  title?: string
  layout: 'mix' | 'side' | 'top'
  headerHeight: number
}

export const layoutThemeConfig: LayoutTheme = {
  title: 'Naive Admin Pro',
  layout: 'mix',
  headerHeight: 48,
}

后续我们在开发中将会不断地扩展其中的类型。