Merge branch 'master' of gitee.com:y_project/RuoYi-Cloud into dev

Signed-off-by: 中科嘉迪 <14620481+zhongke-jiadi@user.noreply.gitee.com>

ruoyi-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "3.6.5",
+  "version": "3.6.7",
   "description": "若依管理系统",
   "author": "若依",
   "license": "MIT",

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -130,6 +130,16 @@
   border-radius: 4px;
 }
 
+/* horizontal el menu */
+.el-menu--horizontal .el-menu-item .svg-icon + span,
+.el-menu--horizontal .el-submenu__title .svg-icon + span {
+  margin-left: 3px;
+}
+
+.el-menu--horizontal .el-menu--popup {
+  min-width: 120px !important;
+}
+
 @media (max-width: 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
     display: none !important;

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -61,7 +61,7 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 10px !important;
     }
 
     .el-menu {
@@ -116,15 +116,17 @@
       margin-left: 54px;
     }
 
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
+    .el-menu:not(.el-menu--horizontal) {
+      .submenu-title-noDropdown {
         padding: 0 !important;
+        position: relative;
 
-        .svg-icon {
-          margin-left: 20px;
+        .el-tooltip {
+          padding: 0 !important;
+
+          .svg-icon {
+            margin-left: 20px;
+          }
         }
       }
     }

ruoyi-ui/src/components/Breadcrumb/index.vue

@@ -94,7 +94,6 @@ export default {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
   .no-redirect {
     color: #97a8be;
     cursor: text;

ruoyi-ui/src/components/DictTag/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-for="(item, index) in options">
-      <template v-if="values.includes(item.value)">
+      <template v-if="isValueMatch(item.value)">
         <span
           v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)"
           :key="item.value"
@@ -36,7 +36,6 @@ export default {
       default: null,
     },
     value: [Number, String, Array],
-    // 当未找到匹配的数据时，显示value
     showValue: {
       type: Boolean,
       default: true,
@@ -54,6 +53,7 @@ export default {
   computed: {
     values() {
       if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
+      if (typeof this.value === 'number' || typeof this.value === 'boolean') return [this.value]
       return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
     },
     unmatch() {
@@ -63,14 +63,18 @@ export default {
       // 传入值为数组
       let unmatch = false // 添加一个标志来判断是否有未匹配项
       this.values.forEach(item => {
-        if (!this.options.some(v => v.value === item)) {
+        if (!this.options.some(v => v.value == item)) {
           this.unmatchArray.push(item)
           unmatch = true // 如果有未匹配项，将标志设置为true
         }
       })
       return unmatch // 返回标志的值
     },
-
+  },
+  methods: {
+    isValueMatch(itemValue) {
+      return this.values.some(val => val == itemValue)
+    }
   },
   filters: {
     handleArray(array) {

ruoyi-ui/src/components/RightToolbar/index.vue

@@ -7,7 +7,7 @@
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
         <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="Object.keys(columns).length > 0">
         <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
         <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
           <el-button size="mini" circle icon="el-icon-menu" />
@@ -17,9 +17,9 @@
               <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 列展示 </el-checkbox>
             </el-dropdown-item>
             <div class="check-line"></div>
-            <template v-for="item in columns">
-              <el-dropdown-item :key="item.key">
-                <el-checkbox v-model="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+            <template v-for="(item, key) in columns">
+              <el-dropdown-item :key="key">
+                <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
               </el-dropdown-item>
             </template>
           </el-dropdown-menu>
@@ -30,12 +30,13 @@
       <el-transfer
         :titles="['显示', '隐藏']"
         v-model="value"
-        :data="columns"
+        :data="transferData"
         @change="dataChange"
       ></el-transfer>
     </el-dialog>
   </div>
 </template>
+
 <script>
 export default {
   name: "RightToolbar",
@@ -55,9 +56,10 @@ export default {
       type: Boolean,
       default: true
     },
-    /* 显隐列信息 */
+    /* 显隐列信息（数组格式、对象格式） */
     columns: {
-      type: Array
+      type: [Array, Object],
+      default: () => ({})
     },
     /* 是否显示检索图标 */
     search: {
@@ -85,21 +87,36 @@ export default {
     },
     isChecked: {
       get() {
-        return this.columns.every((col) => col.visible)
+        return Array.isArray(this.columns) ? this.columns.every((col) => col.visible) : Object.values(this.columns).every((col) => col.visible)
       },
       set() {}
     },
     isIndeterminate() {
-      return this.columns.some((col) => col.visible) && !this.isChecked
+      return Array.isArray(this.columns) ? this.columns.some((col) => col.visible) && !this.isChecked : Object.values(this.columns).some((col) => col.visible) && !this.isChecked
+    },
+    transferData() {
+      if (Array.isArray(this.columns)) {
+        return this.columns.map((item, index) => ({ key: index, label: item.label }))
+      } else {
+        return Object.keys(this.columns).map((key, index) => ({ key: index, label: this.columns[key].label }))
+      }
     }
   },
   created() {
     if (this.showColumnsType == 'transfer') {
-      // 显隐列初始默认隐藏列
-      for (let item in this.columns) {
-        if (this.columns[item].visible === false) {
-          this.value.push(parseInt(item))
+      // transfer穿梭显隐列初始默认隐藏列
+      if (Array.isArray(this.columns)) {
+        for (let item in this.columns) {
+          if (this.columns[item].visible === false) {
+            this.value.push(parseInt(item))
+          }
         }
+      } else {
+        Object.keys(this.columns).forEach((key, index) => {
+          if (this.columns[key].visible === false) {
+            this.value.push(index)
+          }
+        })
       }
     }
   },
@@ -114,9 +131,15 @@ export default {
     },
     // 右侧列表元素变化
     dataChange(data) {
-      for (let item in this.columns) {
-        const key = this.columns[item].key
-        this.columns[item].visible = !data.includes(key)
+      if (Array.isArray(this.columns)) {
+        for (let item in this.columns) {
+          const key = this.columns[item].key
+          this.columns[item].visible = !data.includes(key)
+        }
+      } else {
+        Object.keys(this.columns).forEach((key, index) => {
+          this.columns[key].visible = !data.includes(index)
+        })
       }
     },
     // 打开显隐列dialog
@@ -124,17 +147,26 @@ export default {
       this.open = true
     },
     // 单勾选
-    checkboxChange(event, label) {
-      this.columns.filter(item => item.label == label)[0].visible = event
+    checkboxChange(event, key) {
+      if (Array.isArray(this.columns)) {
+        this.columns.filter(item => item.key == key)[0].visible = event
+      } else {
+        this.columns[key].visible = event
+      }
     },
     // 切换全选/反选
     toggleCheckAll() {
       const newValue = !this.isChecked
-      this.columns.forEach((col) => (col.visible = newValue))
+      if (Array.isArray(this.columns)) {
+        this.columns.forEach((col) => (col.visible = newValue))
+      } else {
+        Object.values(this.columns).forEach((col) => (col.visible = newValue))
+      }
     }
   },
 }
 </script>
+
 <style lang="scss" scoped>
 ::v-deep .el-transfer__button {
   border-radius: 50%;

ruoyi-ui/src/components/TopNav/index.vue

@@ -162,7 +162,7 @@ export default {
         this.$store.dispatch('app/toggleSideBarHide', true)
       }
     }
-  },
+  }
 }
 </script>
 
@@ -171,7 +171,7 @@ export default {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #303133 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
@@ -186,7 +186,7 @@ export default {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #303133 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }

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)
       }
@@ -52,7 +54,18 @@ export default {
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  height: calc(100vh - 50px);
+  min-height: 0px;
+}
+
+.app-main:has(.copyright) {
+  padding-bottom: 36px;
+}
+
+.fixed-header + .app-main {
+  margin-top: 50px;
 }
 
 .hasTagsView {
@@ -62,19 +75,47 @@ export default {
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    margin-top: 84px;
+    height: calc(100vh - 84px);
+    min-height: 0px;
+  }
+}
+
+/* 移动端fixed-header优化 */
+@media screen and (max-width: 991px) {
+  .fixed-header + .app-main {
+    padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
+    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
+    overscroll-behavior-y: none;
+  }
+
+  .hasTagsView .fixed-header + .app-main {
+    padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
+    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
+    overscroll-behavior-y: none;
+  }
+}
+
+@supports (-webkit-touch-callout: none) {
+  @media screen and (max-width: 991px) {
+    .fixed-header + .app-main {
+      padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
+      padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
+      height: calc(100svh - 50px);
+      height: calc(100dvh - 50px);
+    }
+
+    .hasTagsView .fixed-header + .app-main {
+      padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
+      padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
+      height: calc(100svh - 84px);
+      height: calc(100dvh - 84px);
+    }
   }
 }
 </style>
 
 <style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 6px;
-  }
-}
-
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;

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/Navbar.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="'nav' + navType">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
-
+    <breadcrumb v-if="navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="navType == 2" id="topmenu-container" class="topmenu-container" />
+    <template v-if="navType == 3">
+      <logo v-show="showLogo" :collapse="false"></logo>
+      <top-bar id="topbar-container" class="topbar-container" />
+    </template>
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
@@ -34,15 +37,14 @@
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
+          <el-dropdown-item @click.native="setLayout" v-if="setting">
+            <span>布局设置</span>
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-
-      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
-        <svg-icon icon-class="more-up" />
-      </div>
     </div>
   </div>
 </template>
@@ -51,6 +53,8 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
+import TopBar from './TopBar'
+import Logo from './Sidebar/Logo'
 import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
@@ -62,7 +66,9 @@ export default {
   emits: ['setLayout'],
   components: {
     Breadcrumb,
+    Logo,
     TopNav,
+    TopBar,
     Hamburger,
     Screenfull,
     SizeSelect,
@@ -82,9 +88,14 @@ export default {
         return this.$store.state.settings.showSettings
       }
     },
-    topNav: {
+    navType: {
       get() {
-        return this.$store.state.settings.topNav
+        return this.$store.state.settings.navType
+      }
+    },
+    showLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
       }
     }
   },
@@ -111,20 +122,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.navbar.nav3 {
+  .hamburger-container {
+    display: none !important;
+  }
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  display: flex;
+  align-items: center;
+  // padding: 0 8px;
+  box-sizing: border-box;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
-    float: left;
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color:transparent;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 8px;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -132,7 +156,7 @@ export default {
   }
 
   .breadcrumb-container {
-    float: left;
+    flex-shrink: 0;
   }
 
   .topmenu-container {
@@ -140,15 +164,26 @@ export default {
     left: 50px;
   }
 
+  .topbar-container {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 8px;
+  }
+
   .errLog-container {
     display: inline-block;
     vertical-align: top;
   }
 
   .right-menu {
-    float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
 
     &:focus {
       outline: none;
@@ -178,6 +213,7 @@ export default {
 
       .avatar-wrapper {
         margin-top: 10px;
+        right: 8px;
         position: relative;
 
         .user-avatar {
@@ -190,6 +226,7 @@ export default {
         .user-nickname{
           position: relative;
           bottom: 10px;
+          left: 2px;
           font-size: 14px;
           font-weight: bold;
         }

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

@@ -1,8 +1,29 @@
 <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">
+          <div class="setting-drawer-title">
+            <h3 class="drawer-title">菜单导航设置</h3>
+          </div>
+          <div class="nav-wrap">
+            <el-tooltip content="左侧菜单" placement="bottom">
+              <div class="item left" @click="handleNavType(1)" :style="{'--theme': theme}" :class="{ activeItem: navType == 1 }">
+                <b></b><b></b>
+              </div>
+            </el-tooltip>
+
+            <el-tooltip content="混合菜单" placement="bottom">
+              <div class="item mix" @click="handleNavType(2)" :style="{'--theme': theme}" :class="{ activeItem: navType == 2 }">
+                <b></b><b></b>
+              </div>
+            </el-tooltip>
+            <el-tooltip content="顶部菜单" placement="bottom">
+              <div class="item top" @click="handleNavType(3)" :style="{'--theme': theme}" :class="{ activeItem: navType == 3 }">
+                <b></b><b></b>
+              </div>
+            </el-tooltip>
+          </div>
           <div class="setting-drawer-title">
             <h3 class="drawer-title">主题风格设置</h3>
           </div>
@@ -40,13 +61,13 @@
         <h3 class="drawer-title">系统布局配置</h3>
 
         <div class="drawer-item">
-          <span>开启 TopNav</span>
-          <el-switch v-model="topNav" class="drawer-switch" />
+          <span>开启 Tags-Views</span>
+          <el-switch v-model="tagsView" class="drawer-switch" />
         </div>
 
         <div class="drawer-item">
-          <span>开启 Tags-Views</span>
-          <el-switch v-model="tagsView" class="drawer-switch" />
+          <span>显示页签图标</span>
+          <el-switch v-model="tagsIcon" :disabled="!tagsView" class="drawer-switch" />
         </div>
 
         <div class="drawer-item">
@@ -64,6 +85,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>
@@ -83,6 +109,7 @@ export default {
     return {
       theme: this.$store.state.settings.theme,
       sideTheme: this.$store.state.settings.sideTheme,
+      navType: this.$store.state.settings.navType,
       showSettings: false
     }
   },
@@ -98,21 +125,6 @@ export default {
         })
       }
     },
-    topNav: {
-      get() {
-        return this.$store.state.settings.topNav
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'topNav',
-          value: val
-        })
-        if (!val) {
-          this.$store.dispatch('app/toggleSideBarHide', false)
-          this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes)
-        }
-      }
-    },
     tagsView: {
       get() {
         return this.$store.state.settings.tagsView
@@ -124,6 +136,17 @@ export default {
         })
       }
     },
+    tagsIcon: {
+      get() {
+        return this.$store.state.settings.tagsIcon
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsIcon',
+          value: val
+        })
+      }
+    },
     sidebarLogo: {
       get() {
         return this.$store.state.settings.sidebarLogo
@@ -147,6 +170,36 @@ 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
+        })
+      }
+    }
+  },
+  watch: {
+    navType: {
+      handler(val) {
+        if (val == 1) {
+          this.$store.dispatch("app/toggleSideBarHide", false)
+        }
+        if (val == 2) {
+        }
+        if (val == 3) {
+          this.$store.dispatch("app/toggleSideBarHide", true)
+        }
+        if ([1, 3].includes(val)) {
+          this.$store.commit("SET_SIDEBAR_ROUTERS",this.$store.state.permission.defaultRoutes)
+        }
+      },
+      immediate: true,
+      deep: true
+    }
   },
   methods: {
     themeChange(val) {
@@ -163,6 +216,13 @@ export default {
       })
       this.sideTheme = val
     },
+    handleNavType(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'navType',
+        value: val
+      })
+      this.navType = val
+    },
     openSetting() {
       this.showSettings = true
     },
@@ -174,11 +234,13 @@ export default {
       this.$cache.local.set(
         "layout-setting",
         `{
-            "topNav":${this.topNav},
+            "navType":${this.navType},
             "tagsView":${this.tagsView},
+            "tagsIcon":${this.tagsIcon},
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
             "dynamicTitle":${this.dynamicTitle},
+            "footerVisible":${this.footerVisible},
             "sideTheme":"${this.sideTheme}",
             "theme":"${this.theme}"
           }`
@@ -195,70 +257,133 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .setting-drawer-content {
-    .setting-drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
-      font-weight: bold;
-    }
+.setting-drawer-content {
+  .setting-drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: bold;
+  }
 
-    .setting-drawer-block-checbox {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      margin-top: 10px;
-      margin-bottom: 20px;
+  .setting-drawer-block-checbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
 
-      .setting-drawer-block-checbox-item {
-        position: relative;
-        margin-right: 16px;
-        border-radius: 2px;
-        cursor: pointer;
+    .setting-drawer-block-checbox-item {
+      position: relative;
+      margin-right: 16px;
+      border-radius: 2px;
+      cursor: pointer;
 
-        img {
-          width: 48px;
-          height: 48px;
-        }
+      img {
+        width: 48px;
+        height: 48px;
+      }
 
-        .setting-drawer-block-checbox-selectIcon {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
-          padding-top: 15px;
-          padding-left: 24px;
-          color: #1890ff;
-          font-weight: 700;
-          font-size: 14px;
-        }
+      .setting-drawer-block-checbox-selectIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: 15px;
+        padding-left: 24px;
+        color: #1890ff;
+        font-weight: 700;
+        font-size: 14px;
       }
     }
   }
+}
 
-  .drawer-container {
-    padding: 20px;
+.drawer-container {
+  padding: 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
     font-size: 14px;
-    line-height: 1.5;
-    word-wrap: break-word;
+    line-height: 22px;
+  }
 
-    .drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+
+// 导航模式
+.nav-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .activeItem {
+    border: 2px solid #{'var(--theme)'} !important;
+  }
+
+  .item {
+    position: relative;
+    margin-right: 16px;
+    cursor: pointer;
+    width: 56px;
+    height: 48px;
+    border-radius: 4px;
+    background: #f0f2f5;
+    border: 2px solid transparent;
+  }
+
+  .left {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #fff;
     }
-
-    .drawer-item {
-      color: rgba(0, 0, 0, .65);
-      font-size: 14px;
-      padding: 12px 0;
-    }
-
-    .drawer-switch {
-      float: right
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 100%;
+      top: 0;
+      border-radius: 4px 0 0 4px;
     }
   }
+  .mix {
+    b:first-child {
+      border-radius: 4px 4px 0 0;
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+    }
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 70%;
+      border-radius: 0 0 0 4px;
+    }
+  }
+  .top {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+      border-radius: 4px 4px 0 0;
+    }
+  }
+}
 </style>

ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' && navType !== 3 ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
@@ -31,6 +31,9 @@ export default {
     },
     sideTheme() {
       return this.$store.state.settings.sideTheme
+    },
+    navType() {
+      return this.$store.state.settings.navType
     }
   },
   data() {
@@ -54,7 +57,6 @@ export default {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
   height: 50px;
   line-height: 50px;
   background: #2b2f3a;

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

@@ -5,7 +5,7 @@
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
-        :class="isActive(tag)?'active':''"
+        :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
@@ -13,6 +13,7 @@
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
@@ -52,6 +53,9 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme
+    },
+    tagsIcon() {
+      return this.$store.state.settings.tagsIcon
     }
   },
   watch: {
@@ -277,6 +281,11 @@ export default {
       }
     }
   }
+
+  .tags-view-item.active.has-icon::before {
+    content: none !important;
+  }
+
   .contextmenu {
     margin: 0;
     background: #fff;

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

@@ -0,0 +1,98 @@
+<template>
+  <el-menu class="topbar-menu" :default-active="activeMenu" :active-text-color="theme" mode="horizontal">
+    <sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" />
+
+    <el-submenu index="more" class="el-submenu__hide-arrow" v-if="moreRoutes.length > 0">
+      <template slot="title">更多菜单</template>
+      <sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import SidebarItem from '../Sidebar/SidebarItem'
+
+export default {
+  components: { SidebarItem },
+  data() {
+    return {
+      // 顶部栏初始数
+      visibleNumber: 5
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    },
+    topMenus() {
+      return this.$store.state.permission.sidebarRouters.filter((f) => !f.hidden).slice(0, this.visibleNumber)
+    },
+    moreRoutes() {
+      const sidebarRouters = this.$store.state.permission.sidebarRouters;
+      return sidebarRouters.filter((f) => !f.hidden).slice(this.visibleNumber, sidebarRouters.length - this.visibleNumber)
+    },
+    // 默认激活的菜单
+    activeMenu() {
+      const { meta, path } = this.$route
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.setVisibleNumber)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setVisibleNumber)
+  },
+  mounted() {
+    this.setVisibleNumber()
+  },
+  methods: {
+    // 根据宽度计算设置显示栏数
+    setVisibleNumber() {
+      const width = document.body.getBoundingClientRect().width / 3
+      this.visibleNumber = parseInt(width / 85)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* menu item */
+.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  padding: 0 10px !important;
+}
+
+.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
+  background-color: #f5f7fa !important;
+}
+
+/* submenu item */
+.topbar-menu.el-menu--horizontal > .el-submenu .el-submenu__title {
+  float: left;
+  height: 47px !important;
+  line-height: 50px !important;
+  color: #303133;
+  margin: 0 15px !important;
+}
+
+/* topbar more arrow */ 
+.topbar-menu .el-submenu .el-submenu__icon-arrow {
+  position: static;
+  vertical-align: middle;
+  margin-left: 8px;
+  margin-top: 0px;
+}
+
+/* menu__title el-menu-item */
+.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  height: 55px;
+}
+
+.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
+  color: #303133;
+}
+</style>
+

ruoyi-ui/src/layout/index.vue

@@ -77,6 +77,11 @@ export default {
     }
   }
 
+  .main-container:has(.fixed-header) {
+    height: 100vh;
+    overflow: hidden;
+  }
+
   .drawer-bg {
     background: #000;
     opacity: 0.3;

ruoyi-ui/src/settings.js

@@ -10,24 +10,29 @@ module.exports = {
   sideTheme: 'theme-dark',
 
   /**
-   * 是否系统布局配置
+   * 系统布局配置
    */
   showSettings: true,
 
   /**
-   * 是否显示顶部导航
+   * 菜单导航模式 1、纯左侧 2、混合（左侧+顶部） 3、纯顶部
    */
-  topNav: false,
+  navType: 1,
 
   /**
    * 是否显示 tagsView
    */
   tagsView: true,
+  
+  /**
+   * 显示页签图标
+   */
+  tagsIcon: false,
 
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo
@@ -40,10 +45,12 @@ module.exports = {
   dynamicTitle: false,
 
   /**
-   * @type {string | array} 'production' | ['production', 'development']
-   * @description Need show err logs component.
-   * The default is only used in the production env
-   * If you want to also use it in dev, you can pass ['production', 'development']
+   * 是否显示底部版权
    */
-  errorLog: 'production'
+  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, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
+const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
@@ -9,17 +9,23 @@ const state = {
   theme: storageSetting.theme || '#409EFF',
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
-  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
+  navType: storageSetting.navType === undefined ? navType : storageSetting.navType,
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+  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 }) => {
     if (state.hasOwnProperty(key)) {
       state[key] = value
     }
+  },
+  SET_TITLE: (state, title) => {
+    state.title = title
   }
 }
 
@@ -30,7 +36,7 @@ const actions = {
   },
   // 设置网页标题
   setTitle({ commit }, title) {
-    state.title = title
+    commit('SET_TITLE', title)
     useDynamicTitle()
   }
 }

ruoyi-ui/src/utils/generator/drawingDefault.js

@@ -1,29 +1,37 @@
-export default [
-  {
-    layout: 'colFormItem',
-    tagIcon: 'input',
-    label: '手机号',
-    vModel: 'mobile',
-    formId: 6,
-    tag: 'el-input',
-    placeholder: '请输入手机号',
-    defaultValue: '',
-    span: 24,
-    style: { width: '100%' },
-    clearable: true,
-    prepend: '',
-    append: '',
-    'prefix-icon': 'el-icon-mobile',
-    'suffix-icon': '',
-    maxlength: 11,
-    'show-word-limit': true,
-    readonly: false,
-    disabled: false,
-    required: true,
-    changeTag: true,
-    regList: [{
-      pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
-      message: '手机号格式错误'
-    }]
+export const drawingDefaultValue = []
+
+export function initDrawingDefaultValue() {
+  if (drawingDefaultValue.length === 0) {
+    drawingDefaultValue.push({
+      layout: 'colFormItem',
+      tagIcon: 'input',
+      label: '手机号',
+      vModel: 'mobile',
+      formId: 6,
+      tag: 'el-input',
+      placeholder: '请输入手机号',
+      defaultValue: '',
+      span: 24,
+      style: {width: '100%'},
+      clearable: true,
+      prepend: '',
+      append: '',
+      'prefix-icon': 'el-icon-mobile',
+      'suffix-icon': '',
+      maxlength: 11,
+      'show-word-limit': true,
+      readonly: false,
+      disabled: false,
+      required: true,
+      changeTag: true,
+      regList: [{
+        pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+        message: '手机号格式错误'
+      }]
+    })
   }
-]
+}
+
+export function cleanDrawingDefaultValue() {
+  drawingDefaultValue.splice(0, drawingDefaultValue.length)
+}

ruoyi-ui/src/views/login.vue

@@ -56,7 +56,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      <span>{{ footerContent }}</span>
     </div>
   </div>
 </template>
@@ -65,12 +65,14 @@
 import { getCodeImg } from "@/api/login"
 import Cookies from "js-cookie"
 import { encrypt, decrypt } from '@/utils/jsencrypt'
+import defaultSettings from '@/settings'
 
 export default {
   name: "Login",
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
+      footerContent: defaultSettings.footerContent,
       codeUrl: "",
       loginForm: {
         username: "admin",
@@ -156,7 +158,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .login {
   display: flex;
   justify-content: center;

ruoyi-ui/src/views/register.vue

@@ -61,13 +61,14 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      <span>{{ footerContent }}</span>
     </div>
   </div>
 </template>
 
 <script>
 import { getCodeImg, register } from "@/api/login"
+import defaultSettings from '@/settings'
 
 export default {
   name: "Register",
@@ -81,6 +82,7 @@ export default {
     }
     return {
       title: process.env.VUE_APP_TITLE,
+      footerContent: defaultSettings.footerContent,
       codeUrl: "",
       registerForm: {
         username: "",
@@ -147,7 +149,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .register {
   display: flex;
   justify-content: center;

ruoyi-ui/src/views/system/user/index.vue

@@ -58,17 +58,17 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
-              <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
+              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
+              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
+              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
+              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
+              <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
                 <template slot-scope="scope">
                   <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
                 </template>
               </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
                 <template slot-scope="scope">
                   <span>{{ parseTime(scope.row.createTime) }}</span>
                 </template>
@@ -277,15 +277,15 @@ export default {
         deptId: undefined
       },
       // 列信息
-      columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true }
-      ],
+      columns: {
+        userId: { label: '用户编号', visible: true },
+        userName: { label: '用户名称', visible: true },
+        nickName: { label: '用户昵称', visible: true },
+        deptName: { label: '部门', visible: true },
+        phonenumber: { label: '手机号码', visible: true },
+        status: { label: '状态', visible: true },
+        createTime: { label: '创建时间', visible: true }
+      },
       // 表单校验
       rules: {
         userName: [
@@ -546,6 +546,11 @@ export default {
     },
     // 提交上传文件
     submitFileForm() {
+      const file = this.$refs.upload.uploadFiles
+      if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {
+        this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
+        return
+      }
       this.$refs.upload.submit()
     }
   }

ruoyi-ui/src/views/tool/build/index.vue

@@ -146,13 +146,14 @@ import { beautifierConf, titleCase } from '@/utils/index'
 import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
-import drawingDefault from '@/utils/generator/drawingDefault'
+import { drawingDefaultValue, initDrawingDefaultValue, cleanDrawingDefaultValue } from '@/utils/generator/drawingDefault'
 import logo from '@/assets/logo/logo.png'
 import CodeTypeDialog from './CodeTypeDialog'
 import DraggableItem from './DraggableItem'
 
 let oldActiveId
 let tempActiveData
+let clipboard = null
 
 export default {
   components: {
@@ -171,17 +172,20 @@ export default {
       selectComponents,
       layoutComponents,
       labelWidth: 100,
-      drawingList: drawingDefault,
+      drawingList: drawingDefaultValue,
       drawingData: {},
-      activeId: drawingDefault[0].formId,
+      activeId: drawingDefaultValue[0].formId,
       drawerVisible: false,
       formData: {},
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0]
+      activeData: drawingDefaultValue[0]
     }
   },
+  beforeCreate() {
+    initDrawingDefaultValue()
+  },
   created() {
     // 防止 firefox 下 拖拽 会新打卡一个选项卡
     document.body.ondrop = event => {
@@ -208,7 +212,7 @@ export default {
     }
   },
   mounted() {
-    const clipboard = new ClipboardJS('#copyNode', {
+    clipboard = new ClipboardJS('#copyNode', {
       text: trigger => {
         const codeStr = this.generateCode()
         this.$notify({
@@ -223,6 +227,9 @@ export default {
       this.$message.error('代码复制失败')
     })
   },
+  beforeDestroy() {
+    clipboard.destroy()
+  },
   methods: {
     activeFormItem(element) {
       this.activeData = element
@@ -284,6 +291,7 @@ export default {
       this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
         () => {
           this.drawingList = []
+          cleanDrawingDefaultValue()
         }
       )
     },

ruoyi-ui/src/views/tool/gen/index.vue

@@ -253,7 +253,8 @@ export default {
           this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
         })
       } else {
-        this.$download.zip("/code/gen/batchGenCode?tables=" + tableNames, "ruoyi.zip")
+        const zipName = Array.isArray(tableNames) ? "ruoyi.zip" : tableNames + ".zip"
+        this.$download.zip("/code/gen/batchGenCode?tables=" + tableNames, zipName)
       }
     },
     /** 同步数据库操作 */