|
|
|
|
@ -1,5 +1,8 @@
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
import store from '../store/'
|
|
|
|
|
// 导入 Vue 框架，这是整个 Vue 项目的核心库，用于创建 Vue 实例、组件以及使用 Vue 提供的各种功能、指令、插件等，后续代码中的相关操作都依赖于这个导入的 Vue 库。
|
|
|
|
|
import Vue from 'vue';
|
|
|
|
|
// 导入项目中的 Vuex 状态管理库的 store 实例，通常 store 用于存储整个应用的共享状态数据，并且可以通过提交 mutations 等方式来修改这些状态数据，这里导入的 store 会在后续代码中用于更新相关的配置状态。
|
|
|
|
|
import store from '../store/';
|
|
|
|
|
// 从 '../store/mutation-types' 文件中导入一系列常量，这些常量大概率是用于标识 Vuex store 中不同的 mutation 类型名称，方便在代码中清晰、统一地调用相应的 mutation 来更新状态，每个常量都对应着特定的功能配置相关的状态修改操作，比如主题切换、布局模式改变等。
|
|
|
|
|
import {
|
|
|
|
|
ACCESS_TOKEN,
|
|
|
|
|
DEFAULT_COLOR,
|
|
|
|
|
@ -12,21 +15,45 @@ import {
|
|
|
|
|
DEFAULT_FIXED_SIDEMENU,
|
|
|
|
|
DEFAULT_CONTENT_WIDTH_TYPE,
|
|
|
|
|
DEFAULT_MULTI_TAB
|
|
|
|
|
} from '../store/mutation-types'
|
|
|
|
|
import config from '../config/defaultSettings'
|
|
|
|
|
} from '../store/mutation-types';
|
|
|
|
|
// 导入项目的默认配置对象 'config'，这个对象中包含了如导航菜单主题（navTheme）、页面布局（layout）、头部是否固定（fixedHeader）等各种默认的配置项，后续代码会根据本地存储中的数据与这些默认配置进行对比和设置，以此来初始化应用的各项配置状态。
|
|
|
|
|
import config from '../config/defaultSettings';
|
|
|
|
|
|
|
|
|
|
// 定义一个名为 'Initializer' 的函数，从命名推测它的作用是用于初始化应用的一些配置相关的状态数据，可能在应用启动阶段被调用，确保各项配置按照预期进行设置。
|
|
|
|
|
export default function Initializer () {
|
|
|
|
|
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
|
|
|
|
|
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
|
|
|
|
|
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
|
|
|
|
|
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
|
|
|
|
|
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
|
|
|
|
|
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
|
|
|
|
|
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
|
|
|
|
|
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
|
|
|
|
|
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
|
|
|
|
|
store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
|
|
|
|
|
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
|
|
|
|
|
// 通过调用 store 的 'commit' 方法提交一个名为 'SET_SIDEBAR_TYPE' 的 mutation，用于设置侧边栏类型（SIDEBAR_TYPE）的状态值。
|
|
|
|
|
// 这里使用 'Vue.ls.get' 方法从本地存储（可能是通过 Vue 相关的存储插件实现的本地存储操作）中获取对应键（SIDEBAR_TYPE）的值，如果获取不到，则使用默认值 'true'，然后将获取到的值作为参数传递给 mutation，以此来更新侧边栏类型的状态。
|
|
|
|
|
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true));
|
|
|
|
|
// 提交名为 'TOGGLE_THEME' 的 mutation，用于切换应用的主题（如亮色主题、暗色主题等）。
|
|
|
|
|
// 从本地存储中获取键为 'DEFAULT_THEME' 的值，如果不存在则使用配置文件（config）中定义的默认主题（config.navTheme），再将获取到的值传递给 mutation 来更新主题相关的状态。
|
|
|
|
|
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme));
|
|
|
|
|
// 提交 'TOGGLE_LAYOUT_MODE' mutation，用于切换页面布局模式（例如侧边栏布局、顶部菜单布局等不同的布局形式）。
|
|
|
|
|
// 从本地存储获取 'DEFAULT_LAYOUT_MODE' 的值，若不存在则取配置文件里的默认布局（config.layout），接着将该值传入 mutation 来更新布局模式的状态。
|
|
|
|
|
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout));
|
|
|
|
|
// 提交 'TOGGLE_FIXED_HEADER' mutation，用于控制页面头部是否固定显示（例如在页面滚动时头部是否始终保持在顶部可见）。
|
|
|
|
|
// 通过 'Vue.ls.get' 获取本地存储中 'DEFAULT_FIXED_HEADER' 的值，若没有则采用配置里的默认设置（config.fixedHeader），再以此值来更新头部固定相关的状态。
|
|
|
|
|
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader));
|
|
|
|
|
// 提交 'TOGGLE_FIXED_SIDERBAR' mutation，目的是控制侧边栏是否固定（即在页面滚动时侧边栏是否保持在固定位置可见）。
|
|
|
|
|
// 从本地存储获取 'DEFAULT_FIXED_SIDEMENU' 的值，不存在时使用配置中的默认值（config.fixSiderbar），并将该值用于更新侧边栏固定相关的状态。
|
|
|
|
|
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar));
|
|
|
|
|
// 提交 'TOGGLE_CONTENT_WIDTH' mutation，用于切换页面内容区域的宽度模式（比如固定宽度或者自适应宽度等）。
|
|
|
|
|
// 先从本地存储获取 'DEFAULT_CONTENT_WIDTH_TYPE' 的值，若获取不到则使用配置里的默认宽度设置（config.contentWidth），随后用该值去更新内容宽度相关的状态。
|
|
|
|
|
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth));
|
|
|
|
|
// 提交 'TOGGLE_FIXED_HEADER_HIDDEN' mutation，用于控制页面头部是否自动隐藏（例如当页面滚动到一定程度时头部自动隐藏起来以增加可视空间）。
|
|
|
|
|
// 使用 'Vue.ls.get' 拿到本地存储中 'DEFAULT_FIXED_HEADER_HIDDEN' 的值，若缺失就用配置里的默认设置（config.autoHideHeader），再用这个值更新头部自动隐藏相关的状态。
|
|
|
|
|
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader));
|
|
|
|
|
// 提交 'TOGGLE_WEAK' mutation，可能用于切换是否开启针对色弱用户的颜色辅助模式（比如调整页面颜色显示以便色弱人群更好地查看内容）。
|
|
|
|
|
// 从本地存储获取 'DEFAULT_COLOR_WEAK' 的值，没有的话就取配置中的默认值（config.colorWeak），最后用该值来更新颜色辅助模式相关的状态。
|
|
|
|
|
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak));
|
|
|
|
|
// 提交 'TOGGLE_COLOR' mutation，大概是用于切换应用的主色调之类的颜色相关设置（例如按钮颜色、重要提示颜色等与主色调相关的元素颜色）。
|
|
|
|
|
// 通过 'Vue.ls.get' 从本地存储获取 'DEFAULT_COLOR' 的值，若不存在则采用配置里的默认主色调（config.primaryColor），再把该值传递给 mutation 来更新颜色相关的状态。
|
|
|
|
|
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor));
|
|
|
|
|
// 提交 'TOGGLE_MULTI_TAB' mutation，可能用于控制是否启用多标签页功能（允许用户同时打开多个页面标签进行切换浏览等操作）。
|
|
|
|
|
// 从本地存储获取 'DEFAULT_MULTI_TAB' 的值，若取不到就用配置里的默认设置（config.multiTab），然后用此值更新多标签页相关的状态。
|
|
|
|
|
store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab));
|
|
|
|
|
// 提交 'SET_TOKEN' mutation，用于设置访问令牌（ACCESS_TOKEN）相关的状态值，从本地存储获取对应的令牌值（如果有），并将其传递给 mutation 来更新令牌相关的状态，令牌通常用于用户认证、接口访问授权等方面的功能。
|
|
|
|
|
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN));
|
|
|
|
|
|
|
|
|
|
// last step
|
|
|
|
|
// 这里的注释 'last step' 可能表示这是初始化配置相关操作的最后一步，不过目前代码中没有进一步的具体操作体现，如果还有后续需要在初始化完成后执行的逻辑，可以添加在这之后。
|
|
|
|
|
}
|
