第六十九章-VbenAdmin的setting文件夹解析

1.说明

本章解析src\settings文件夹下的代码，这部分代码也可以直接拷贝。看看注解就可以了，这个文件夹的作用是为项目提供一些默认设置的，比如表格组件的默认分页参数，项目布局的默认设置等等。

2.componentSetting.ts

项目组件的默认设置。

src\settings\componentSetting.ts

// Used to configure the general configuration of some components without modifying the components

// import type { SorterResult } from '../components/Table';

export default {
  // basic-table setting
  // 基础表格设置
  table: {
    // Form interface request general configuration
    // support xxx.xxx.xxx
    // 通用接口字段设置
    fetchSetting: {
      // The field name of the current page passed to the background
      // 传递到后台的当前页的字段名
      pageField: 'page',
      // The number field name of each page displayed in the background
      // 显示在后台的每页的数字字段名称
      sizeField: 'pageSize',
      // Field name of the form data returned by the interface
      // 接口返回的表单数据的字段名
      listField: 'items',
      // Total number of tables returned by the interface field name
      // 接口字段名返回的表总数
      totalField: 'total',
    },
    // Number of pages that can be selected
    // 可选的每页显示条数;
    pageSizeOptions: ['10', '50', '80', '100'],
    // Default display quantity on one page
    // 默认的每页显示条数
    defaultPageSize: 10,
    // Custom general sort function
    // 默认的排序方法
    // ↓这里先注释掉
    // defaultSortFn: (sortInfo: SorterResult) => {
    //   const { field, order } = sortInfo;
    //   return {
    //     // The sort field passed to the backend you
    //     field,
    //     // Sorting method passed to the background asc/desc
    //     order,
    //  };
    // },
    // Custom general filter function
    // 默认的过滤方法
    defaultFilterFn: (data: Partial<Recordable<string[]>>) => {
      return data;
    },
  },
  // scrollbar setting
  // 滚动条设置
  scrollbar: {
    // Whether to use native scroll bar
    // 是否使用本机滚动条
    // After opening, the menu, modal, drawer will change the pop-up scroll bar to native
    // 打开后，菜单、模式、抽屉将弹出滚动条更改为本机
    // src\components\Scrollbar\src\index.vue中使用了
    // 一个控制样式的
    native: false,
  },
};

3.designSetting.ts

主题可选颜色的设置、全局class的前缀。

src\settings\designSetting.ts

// 全局样式前缀
export default {
  prefixCls: 'vben',
};

// 系统主题
// app theme preset color
export const APP_PRESET_COLOR_LIST: string[] = [
  '#0960bd',
  '#0084f4',
  '#009688',
  '#536dfe',
  '#ff5c93',
  '#ee4f12',
  '#0096c7',
  '#9c27b0',
  '#ff9800',
];

// 顶部主题色
// header preset color
export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
  '#ffffff',
  '#009688',
  '#5172DC',
  '#018ffb',
  '#409eff',
  '#e74c3c',
  '#24292e',
  '#394664',
  '#001529',
  '#383f45',
];

// 菜单主题色
// sider preset color
export const SIDE_BAR_BG_COLOR_LIST: string[] = [
  '#001529',
  '#273352',
  '#ffffff',
  '#191b24',
  '#191a23',
  '#304156',
  '#001628',
  '#28333E',
  '#344058',
  '#383f45',
];

4.encryptionSetting.ts

加密设置

src\settings\encryptionSetting.ts

import { isDevMode } from '/@/utils/env';

// 默认内存存活时间
// System default cache time, in seconds
export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;

// 加密key和偏移量
// aes encryption key
export const cacheCipher = {
  key: '_11111000001111@',
  iv: '@11111000001111_',
};

// Whether the system cache is encrypted using aes
// 系统缓存是否使用aes加密。
// 生产环境加密
export const enableStorageEncryption = !isDevMode();

5.localeSetting.ts

国际化设置

src\settings\localeSetting.ts

// import type { DropMenu } from '/@/components/Dropdown/src/types';
import type { LocaleSetting, LocaleType } from '/#/config';

// 国际化的Key
export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: 'zh_CN',
  EN_US: 'en',
};

export const localeSetting: LocaleSetting = {
  // 展示语言切换按钮
  showPicker: true,
  // Locale
  // 默认本地语言
  locale: LOCALE.ZH_CN,
  // Default locale
  // 默认失败后的语言
  fallback: LOCALE.ZH_CN,
  // available Locales
  // 支持的语言
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

// locale list
// 语言列表
// 先注释掉
// export const localeList: DropMenu[] = [
//   {
//     text: '简体中文',
//     event: LOCALE.ZH_CN,
//   },
//   {
//     text: 'English',
//     event: LOCALE.EN_US,
//   },
// ];

6.projectSetting.ts

项目布局的设置

这个直接参考type\config.d.ts文件即可。

src\settings\projectSetting.ts

import type { ProjectConfig } from '/#/config';
import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
import { CacheTypeEnum } from '/@/enums/cacheEnum';
import {
  ContentEnum,
  PermissionModeEnum,
  ThemeEnum,
  RouterTransitionEnum,
  SettingButtonPositionEnum,
} from '/@/enums/appEnum';
import { primaryColor, themeMode } from '../../build/config/themeConfig';

// ! You need to clear the browser cache after the change
// 参考types\config.d.ts
const setting: ProjectConfig = {
  // Whether to show the configuration button
  showSettingButton: true,

  // `Settings` button position
  settingButtonPosition: SettingButtonPositionEnum.AUTO,

  // Permission mode
  permissionMode: PermissionModeEnum.ROLE,

  // Permission-related cache is stored in sessionStorage or localStorage
  permissionCacheType: CacheTypeEnum.SESSION,

  // color
  themeColor: primaryColor,

  // TODO dark theme
  themeMode: themeMode,

  // Website gray mode, open for possible mourning dates
  grayMode: false,

  // Color Weakness Mode
  colorWeak: false,

  // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
  fullContent: false,

  // content mode
  contentMode: ContentEnum.FULL,

  // Whether to display the logo
  showLogo: true,

  // Whether to show footer
  showFooter: false,

  // Header configuration
  headerSetting: {
    // header bg color
    bgColor: '#ffffff',
    // Fixed at the top
    fixed: true,
    // Whether to show top
    show: true,
    // theme
    theme: ThemeEnum.LIGHT,
    // Whether to enable the lock screen function
    useLockPage: true,

    // Whether to show the full screen button
    showFullScreen: true,
    // Whether to show the document button
    showDoc: true,
    // Whether to show the notification button
    showNotice: true,
    // Whether to display the menu search
    showSearch: true,
  },

  // Menu configuration
  menuSetting: {
    // sidebar menu bg color
    bgColor: '#001529',
    //  Whether to fix the left menu
    fixed: true,
    // Menu collapse
    collapsed: false,
    // Whether to display the menu name when folding the menu
    collapsedShowTitle: false,
    // Whether it can be dragged
    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
    canDrag: false,
    // Whether to show no dom
    show: true,
    // Whether to show dom
    hidden: false,
    // Menu width
    menuWidth: 210,
    // Menu mode
    mode: MenuModeEnum.INLINE,
    // Menu type
    type: MenuTypeEnum.SIDEBAR,
    // Menu theme
    theme: ThemeEnum.DARK,
    // Split menu
    split: false,
    // Top menu layout
    topMenuAlign: 'center',
    // Fold trigger position
    trigger: TriggerEnum.HEADER,
    // Turn on accordion mode, only show a menu
    accordion: true,
    // Switch page to close menu
    closeMixSidebarOnChange: false,
    // Module opening method ‘click’ |'hover'
    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
    // Fixed expanded menu
    mixSideFixed: false,
  },

  // Multi-label
  multiTabsSetting: {
    // Turn on
    show: true,
    // Is it possible to drag and drop sorting tabs
    canDrag: true,
    // Turn on quick actions
    showQuick: true,

    // Whether to show the refresh button
    showRedo: true,
    // Whether to show the collapse button
    showFold: true,
  },

  // Transition Setting
  transitionSetting: {
    //  Whether to open the page switching animation
    // The disabled state will also disable pageLoadinng
    enable: true,

    // Route basic switching animation
    basicTransition: RouterTransitionEnum.FADE_SIDE,

    // Whether to open page switching loading
    // Only open when enable=true
    openPageLoading: true,

    // Whether to open the top progress bar
    openNProgress: false,
  },

  // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
  openKeepAlive: true,

  // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
  lockTime: 0,

  // Whether to show breadcrumbs
  showBreadCrumb: true,

  // Whether to show the breadcrumb icon
  showBreadCrumbIcon: false,

  // Use error-handler-plugin
  useErrorHandle: false,

  // Whether to open back to top
  useOpenBackTop: true,

  //  Is it possible to embed iframe pages
  canEmbedIFramePage: true,

  // Whether to delete unclosed messages and notify when switching the interface
  closeMessageOnSwitch: true,

  // Whether to cancel the http request that has been sent but not responded when switching the interface.
  // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
  removeAllHttpPending: false,
};

export default setting;

7.siteSetting.ts

网站的一些URL设置，不重要。

src\settings\siteSetting.ts

// github repo url
export const GITHUB_URL = 'https://github.com/anncwb/vue-vben-admin';
// vue-vben-admin-next-doc
export const DOC_URL = 'https://vvbin.cn/doc-next/';
// site url
export const SITE_URL = 'https://vvbin.cn/next/';