项目配置
FiveAdmin 提供了统一的配置入口，本章节介绍 FiveAdmin 环境、功能及外观的配置方式。
环境配置
// .env 所有环境都被加载
// 应用标题，会被应用到浏览器标签标题、应用LOGO标题、[登录页面标题]
VITE_APP_TITLE = FiveAdmin
// 缓存前缀，建议修改
VITE_APP_STORAGE_PREFIX = FIVE__ADMIN__
// 默认首页路径
VITE_APP_HOME_PATH = /home
// 开启mock数据，关闭时需要自行对接后台接口
VITE_USE_MOCK = true
// 默认请求超时时长
VITE_REQUEST_TIMEOUT = 10000
// .env.development 开发环境下被加载
// 端口号
VITE_APP_PORT = 9999
// axios 默认 BASE 路径
VITE_APP_BASE_URL = /api
// 本地开发代理，可配置多个
VITE_DEV_PROXY = {"/api":"http://localhost:9090","/upload":"http://localhost:8080/upload"}
// .env.production 生产环境下被加载
// axios 默认 BASE 路径
VITE_APP_BASE_URL = /api
提示
接入后端时如果不考虑跨域问题，可以这么配置
VITE_APP_BASE_URL = http://localhost:8080
VITE_DEV_PROXY = {}
应用配置
功能配置
// /src/appConfig.js
export default {
// 默认语言。'zh-cn' 中文简体 | 'zh-tw' 中文繁体 | 'en' 英文
defaultLanguage: 'zh-cn',
// elementplus全局组件尺寸。'default' 默认 | 'large' 大 | 'small' 小
elementSize: 'default',
// ----------------------------------------布局配置--------------------------------------------------
// 布局风格。
// 'default' 默认(暂未实现) | 'singleAside' 单侧栏(经典) | 'doubleAside' 双侧栏 |
// 'crosswise' 横向上下布局 | 'mixture' 混合导航布局
layoutType: 'singleAside',
// ----------------------------------------LOGO--------------------------------------------------
// 显示 logo
showLogo: true,
// ----------------------------------------侧栏菜单--------------------------------------------------
// 侧栏是否折叠
menuIsCollapse: false,
// 是否只保持一个子菜单的展开
subMenuUniqueOpened: true,
// 是否永远显示主菜单标题，双侧栏布局有效
isMainMenuShowTitle: true,
// 启用侧栏折叠动画
enableCollapseTransition: true,
// ----------------------------------------tabs 标签页--------------------------------------------------
// 是否使用多标签页
isTabs: true,
// 标签显示图标
tabsIcon: true,
// 始终保持一个 tab 固定不可关闭
// 当所有路由的 meta.fixedTab 不为 true 时，始终保持唯一一个 tab 不可关闭
tabsOneFiexd: true,
// tabs风格。'card' 风格一 | 'border-card' 风格二 | '' 风格三
tabsType: 'card',
// ----------------------------------------过渡动画--------------------------------------------------
// 是否启用页面切换动画
isTransition: true,
// 页面切换动画。'fade' 渐变 | 'scale' 缩放 | 'slide' 滑动
transitionName: 'fade',
// ----------------------------------------页脚--------------------------------------------------
// 是否显示页脚
showFooter: false,
// 页脚显示的文本内容,可以使用多语言文本
footerText: 'Copyright © 2023 xxxx 拥有所有版权',
// ----------------------------------------其它设置--------------------------------------------------
// 是否开启主界面回到顶部
enableBacktop: true,
// 开启灰色模式
enableGray: false,
// 开启色弱模式
enableColorWeakness: false,
// ----------------------------------------固定配置（不在应用配置中出现）--------------------------------------------------
// 路由来源。 'frontend' 前端 | 'backend' 后端 | 'mixture' 前后端都加载
routeSource: 'frontend',
// 动态 html 标题
dynamicTitle: true,
}
注意
其中 defaultLanguage、elementSize 配置会被缓存到浏览器 localStorage，如果这两个配置修改后不生效请删除 localStorage 中的缓存数据。
外观配置
// /src/assets/styles/common/theme.scss
// 默认
:root {
// -----------------------tabs-----------------------------
--fv-tabs-height:30px; // tabs 高度
--fv-tabs-bg-color:#F4F4F4; // tabs 背景颜色
// -----------------------主界面-----------------------------
// 主界面背景颜色
--fv-main-bg-color:#F4F4F4;
// -----------------------顶栏-----------------------------
--fv-header-height:52px; // 顶栏高度
--fv-header-bg-color:#433C68; // 顶栏背景颜色
--fv-header-text-color:#fff; // 顶栏内容颜色
// -----------------------侧栏-----------------------------
--fv-side-bg-color:#312845; // 侧栏背景颜色
--fv-main-menu-width:75px; // 侧栏主菜单宽度
--fv-menu-width:200px; // 侧栏菜单宽度
// -----------------------菜单-----------------------------
--fv-menu-text-color:#ffffff; // 菜单内容颜色
// --fv-menu-active-bg-color: #b8d8f6; // 激活项的菜单背景颜色
--fv-menu-active-color: var(--el-color-primary); // 激活项的菜单文本颜色
--fv-menu-hover-bg-color: #18122C; // 鼠标移入菜单背景颜色
--fv-menu-inline-bg-color:#211b2e; // 子菜单展开背景颜色
--fv-menu-item-height: 60px; // 侧栏菜单项高度（包括双侧栏布局的主菜单项）
--fv-menu-item-font-size: var(--el-font-size-base); // 菜单字体尺寸
// -----------------------LOGO标题-----------------------------
--fv-logo-bg-color:#312845; // LOGO背景
--fv-logo-title-color:#ffffff; //标题颜色
// -----------------------页脚-----------------------------
--fv-footer-heigth:26px; // 页脚高度
--fv-footer-bg-color:#433C68; // 页脚背景颜色
--fv-footer-text-color:#909399; // 页脚文本颜色
--fv-footer-font-size:14px; // 页脚字体尺寸
// -----------------------工具栏-----------------------------
--fv-tools-hover-bg-color:rgba(5, 106, 247, 0.103); // 鼠标移入背景
}
// 暗黑模式
html.dark{
// -----------------------tabs-----------------------------
--fv-tabs-bg-color:#141414; // tabs 背景颜色
// -----------------------主界面-----------------------------
// 主界面背景颜色
--fv-main-bg-color:#1F1F1F;
// -----------------------顶栏-----------------------------
--fv-header-bg-color:#191919; // 顶栏背景颜色
--fv-header-text-color:#CFD3DC; // 顶栏内容颜色
// -----------------------侧栏-----------------------------
--fv-side-bg-color:#191919; // 侧栏背景颜色
// -----------------------菜单-----------------------------
--fv-menu-text-color:#CFD3DC; // 菜单内容颜色
// --fv-menu-active-bg-color: #b8d8f6; // 激活项的菜单背景颜色
--fv-menu-active-color: var(--el-color-primary); // 激活项的菜单文本颜色
--fv-menu-hover-bg-color: #000; // 鼠标移入菜单背景颜色
--fv-menu-inline-bg-color:#080808; // 子菜单展开背景颜色
--fv-menu-item-font-size: var(--el-font-size-base); // 菜单字体尺寸
// -----------------------LOGO标题-----------------------------
--fv-logo-bg-color:#191919; // LOGO背景
--fv-logo-title-color:#CFD3DC; //标题颜色
// -----------------------页脚-----------------------------
--fv-footer-bg-color:#191919; // 页脚背景颜色
--fv-footer-text-color:#CFD3DC; // 页脚文本颜色
// -----------------------工具栏-----------------------------
--fv-tools-hover-bg-color:rgba(5, 106, 247, 0.103); // 鼠标移入背景
}