添加底部版权信息及开关

RuoYi

2025-05-24 706c3bb69b7b4edb364e3db4ee4d095fe0af81be

添加底部版权信息及开关

 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

@@ -51,6 +53,10 @@
  overflow: hidden;

}



.app-main:has(.copyright) {

  padding-bottom: 36px;

}



.fixed-header + .app-main {

  padding-top: 50px;

}


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

New file
@@ -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">

@@ -67,6 +67,11 @@
        <div class="drawer-item">

          <span>动态标题</span>

          <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/>

@@ -163,6 +168,17 @@
        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 @@
            "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 @@
  /**

   * 是否显示动态标题

   */

  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 @@
  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 }) => {