CRMEB v4 前端配置說明

業(yè)務(wù)配置

除了 setting.env.js 配置外，還有另外一個配置，即src/setting.js配置，基本上絕大部分的配置都在這個文件里完成。使用者可根據(jù)自己的 UI 習(xí)慣來修改不同的配置，從而實現(xiàn)不同的布局效果。

詳細的配置介紹如下：

基礎(chǔ)配置

• titleSuffix：網(wǎng)頁標題的后綴，配置后，每個頁面的標題都會帶有后綴，比如 “業(yè)務(wù)配置 - iView Admin Pro”，為空則不顯示后綴
• routerMode：路由模式，可選值為 history 或 hash，默認為history
• 2.2.0routerBase：應(yīng)用的基路徑。例如，如果整個單頁應(yīng)用服務(wù)在 /app/ 下，然后 routerBase 就應(yīng)該設(shè)為 ‘/app/‘。默認為/
• showProgressBar：頁面切換時，是否顯示模擬的進度條，默認為true
• apiBaseURL：統(tǒng)一的接口請求地址，可根據(jù)當前環(huán)境配置不同的值
• modalDuration：接口請求返回錯誤時，彈窗的持續(xù)時間，單位：秒，默認3
• errorModalType：接口請求返回錯誤時，彈窗的類型，可選值為 Message 或 Notice，默認Message
• cookiesExpires：Cookies 默認保存時間，單位：天，默認1

多語言配置1.2.0

• i18n：
  • default：默認語言，默認為簡體中文，值為zh-CN
  • auto：是否根據(jù)用戶電腦配置自動設(shè)置語言（僅第一次有效），默認false

布局配置

• menuSideWidth：側(cè)邊菜單寬度，單位 px，不可動態(tài)修改，如若修改，需同時修改src/styles/setting.less文件的 @menuSideWidth 且數(shù)值保持一致，默認256

• layout：布局配置，如下：
  • siderTheme：側(cè)邊欄風格，可選值為 dark 或 light，默認dark
  • headerTheme：頂欄風格，可選值為 light、dark 或 primary，默認light
  • headerStick：頂欄是否置頂，開啟后頂欄會覆蓋在側(cè)邊欄之上，需開啟 headerFix，默認false，建議在有頂級菜單時使用
  • tabs：是否開啟多 Tabs 頁簽，默認true
  • showTabsIcon：多 Tabs 頁簽是否顯示圖標，開啟 tabs 時有效，默認true
  • tabsFix：是否固定多 Tabs 多頁簽，開啟 tabs 時有效，默認true
  • 2.2.0tabsReload：再次點擊 Tabs 當前頁簽時，是否重載當前頁面，默認false
  • siderFix：是否固定側(cè)邊欄，默認true
  • headerFix：是否固定頂欄，默認true
  • headerHide：是否在下滑時隱藏頂欄，需開啟 headerFix，如果開啟了 tabsFix，Tabs 也會被隱藏，默認false
  • headerMenu：是否顯示頂部菜單欄，一般來說，側(cè)邊的菜單欄足以滿足大部分業(yè)務(wù)，如需動態(tài)切換側(cè)邊欄，可開啟此選項啟用頂部一級菜單，此時側(cè)邊欄將作為二級菜單，默認false
  • menuAccordion：側(cè)邊菜單欄是否開啟手風琴模式，默認true
  • showSiderCollapse：是否顯示折疊側(cè)邊欄按鈕，移動端下會自動強制開啟，默認true
  • menuCollapse：側(cè)邊菜單欄是否默認折起，默認false
  • 2.2.0menuSiderReload：再次點擊當前側(cè)邊菜單時，是否重載當前頁面，默認false
  • 2.2.0menuHeaderReload：再次點擊當前頂部菜單時，是否重載當前頁面，默認false
  • 1.2.0showCollapseMenuTitle：側(cè)邊菜單折起時，是否在子菜單前顯示父級菜單名稱，默認false
  • 1.2.0showReload：是否顯示重載按鈕，默認true
  • showSearch：是否顯示搜索，默認true
  • showNotice：是否顯示通知，默認true
  • showFullscreen：是否顯示全屏，默認true
  • showMobileLogo：在手機訪問時，是否在頂部顯示小尺寸 logo，默認true
  • showBreadcrumb：是否顯示全局面包屑，開啟 headerMenu 時不可用（如若在開啟 headerMenu 時顯示，可以在頁面中的 PageHeader 使用該組件）
  • showBreadcrumbIcon：全局面包屑是否顯示圖標，開啟 showBreadcrumb 時有效，默認false
  • showLog：是否顯示日志入口，開啟與否，不影響日志記錄，如不希望用戶看到可關(guān)閉，默認true
  • 1.2.0showI18n：是否顯示多語言切換按鈕，默認true
  • enableSetting：是否支持動態(tài)修改布局配置，移動端下會自動強制關(guān)閉，此功能主要用于開發(fā)階段實時預(yù)覽各種布局效果，建議在生產(chǎn)環(huán)境關(guān)閉，默認true
  • logoutConfirm：退出登錄時，是否二次確認，默認true

多頁 Tabs

• page：配置如下：
  • opened：默認打開的頁簽，默認[]

功能配置

• 2.1.0sameRouteForceUpdate：相同路由，不同參數(shù)間進行切換，是否強力更新，默認為false。

說明：由于 vue-router 限制，相同路由，不同參數(shù)，進行切換時，組件并不是重新加載，而是共享，這會導(dǎo)致切換時，數(shù)據(jù)狀態(tài)并沒有重置。開啟該選項后，在兩個相同路由，不同參數(shù)間切換時，頁面會重載。
說明：使用該功能，該頁面在路由配置時，必須設(shè)置name字段。

• 1.3.0dynamicSiderMenu：是否使用動態(tài)側(cè)邊菜單，默認為false。

說明：框架默認是在main.js中獲取本地側(cè)邊菜單的，開啟該選項，則認為是從服務(wù)端動態(tài)獲取側(cè)邊菜單，系統(tǒng)將不再主動獲取本地菜單，而相關(guān)菜單獲取邏輯，需開發(fā)者自己完成。詳見文檔基礎(chǔ)功能-添加菜單。

其中，絕大部分布局配置都支持動態(tài)配置并實時更新效果。