添加底部版权信息及开关

ruoyi-ui/src/layout/components/AppMain.vue

@@ -6,15 +6,17 @@
       </keep-alive>
     </transition>
     <iframe-toggle />
+    <copyright />
   </section>
 </template>
 
 <script>
+import copyright from "./Copyright/index"
 import iframeToggle from "./IframeToggle/index"
 
 export default {
   name: 'AppMain',
-  components: { iframeToggle },
+  components: { iframeToggle, copyright },
   computed: {
     cachedViews() {
       return this.$store.state.tagsView.cachedViews
@@ -33,7 +35,7 @@ export default {
   },
   methods: {
     addIframe() {
-      const {name} = this.$route
+      const { name } = this.$route
       if (name && this.$route.meta.link) {
         this.$store.dispatch('tagsView/addIframeView', this.$route)
       }
@@ -51,6 +53,10 @@ export default {
   overflow: hidden;
 }
 
+.app-main:has(.copyright) {
+  padding-bottom: 36px;
+}
+
 .fixed-header + .app-main {
   padding-top: 50px;
 }

ruoyi-ui/src/layout/components/Copyright/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <footer v-if="visible" class="copyright">
+    <span>{{ content }}</span>
+  </footer>
+</template>
+
+<script>
+export default {
+  computed: {
+    visible() {
+      return this.$store.state.settings.footerVisible
+    },
+    content() {
+      return this.$store.state.settings.footerContent
+    }
+  }
+}
+</script>
+
+<style scoped>
+.copyright {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 36px;
+  padding: 10px 20px;
+  text-align: right;
+  background-color: #f8f8f8;
+  color: #666;
+  font-size: 14px;
+  border-top: 1px solid #e7e7e7;
+  z-index: 999;
+}
+</style>

ruoyi-ui/src/layout/components/Settings/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer size="280px" :visible="showSettings" :with-header="false" :append-to-body="true" :before-close="closeSetting">
+  <el-drawer size="280px" :visible="showSettings" :with-header="false" :append-to-body="true" :before-close="closeSetting" :lock-scroll="false">
     <div class="drawer-container">
       <div>
         <div class="setting-drawer-content">
@@ -69,6 +69,11 @@
           <el-switch v-model="dynamicTitle" class="drawer-switch" />
         </div>
 
+        <div class="drawer-item">
+          <span>底部版权</span>
+          <el-switch v-model="footerVisible" class="drawer-switch" />
+        </div>
+
         <el-divider/>
 
         <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
@@ -163,6 +168,17 @@ export default {
         this.$store.dispatch('settings/setTitle', this.$store.state.settings.title)
       }
     },
+    footerVisible: {
+      get() {
+        return this.$store.state.settings.footerVisible
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'footerVisible',
+          value: val
+        })
+      }
+    }
   },
   methods: {
     themeChange(val) {
@@ -196,6 +212,7 @@ export default {
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
             "dynamicTitle":${this.dynamicTitle},
+            "footerVisible":${this.footerVisible},
             "sideTheme":"${this.sideTheme}",
             "theme":"${this.theme}"
           }`

ruoyi-ui/src/settings.js

@@ -42,5 +42,15 @@ module.exports = {
   /**
    * 是否显示动态标题
    */
-  dynamicTitle: false
+  dynamicTitle: false,
+
+  /**
+   * 是否显示底部版权
+   */
+  footerVisible: false,
+
+  /**
+   * 底部版权文本内容
+   */
+  footerContent: 'Copyright © 2018-2025 RuoYi. All Rights Reserved.'
 }

ruoyi-ui/src/store/modules/settings.js

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