页面布局优化

src/assets/styles/variables.module.scss

@@ -13,7 +13,7 @@ $panGreen: #30b08f;
   --base-text-color-rgba: rgba(0, 0, 0, 0.85);
   --base-sidebar-width: 220px;
   --el-aside-width: 220px;
-  --base-footer-height: 40px;
+  --base-footer-height: 30px;
   --base-tags-height: 34px;
   --base-header-height: 50px;
 }
@@ -25,6 +25,7 @@ $panGreen: #30b08f;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
   --el-text-color-primary: #e5eaf3;
+  --el-menu-text-color: var(--el-text-color-primary);
 }
 html.dark {
   /* custom dark bg color */

src/layout/components/Settings/index.vue

@@ -54,7 +54,7 @@
       </span>
     </div>
     <div class="drawer-item">
-      <span>显示底部栏</span>
+      <span>open {{ $t('layout.bottomBar') }}</span>
       <span class="comp-style">
         <el-switch v-model="showFooter" class="drawer-switch" />
       </span>

src/layout/index.vue

@@ -149,6 +149,9 @@ function setLayout() {
   line-height: var(--base-footer-height);
   text-align: center;
   color: #ccc;
+  font-size: 14px;
+  border-top: 1px solid #e7eaec;
+  letter-spacing: 0.1rem;
 }
 .hasTagsView {
   // .app-main {

src/settings.js

@@ -56,4 +56,8 @@ export default {
    * 版权信息
    */
   copyright: 'Copyright ©2022 <a target="_black" href="http://www.izhaorui.cn">izhaorui.cn</a> All Rights Reserved.',
+  /**
+   * 是否显示底部栏
+   */
+  showFooter: true
 }

src/store/modules/settings.js

@@ -1,7 +1,7 @@
 import defaultSettings from '@/settings'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 
-const { sideTheme, theme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
+const { sideTheme, theme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, showFooter } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
@@ -14,7 +14,7 @@ const state = {
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
   dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
-  showFooter: storageSetting.showFooter === undefined ? true : storageSetting.showFooter
+  showFooter: storageSetting.showFooter === undefined ? showFooter : storageSetting.showFooter
 }
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {

src/views/index.vue

@@ -34,7 +34,7 @@
     </el-row>
     <el-row :gutter="20">
       <el-col :lg="16" :sm="24">
-        <h2>ZRAdmin.NET {{ $t('layout.BackstageManagement') }}</h2>
+        <h2>ZRAdmin.NET {{ $t('layout.backstageManagement') }}</h2>
         <p>
           ZRAdmin.NET借鉴了很多开源项目的优点，让你开发Web管理系统更简单，所以我也把它给开源了（前端
           <code>vue页面</code>主要参考若依，在此表示感谢.)