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/';
上一章
第六十八章-VbenAdmin的目录结构
下一章
第七十章-VbenAdmin的assets文件夹解析