优化topbar顶部菜单样式

README.md

@@ -1,11 +1,11 @@
 <p align="center">
 	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
 </p>
-<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.9.0</h1>
+<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.9.1</h1>
 <h4 align="center">基于SpringBoot+Vue3前后端分离的Java快速开发框架</h4>
 <p align="center">
 	<a href="https://gitee.com/y_project/RuoYi-Vue/stargazers"><img src="https://gitee.com/y_project/RuoYi-Vue/badge/star.svg?theme=dark"></a>
-	<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.9.0-brightgreen.svg"></a>
+	<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.9.1-brightgreen.svg"></a>
 	<a href="https://gitee.com/y_project/RuoYi-Vue/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
 </p>
 
@@ -105,4 +105,4 @@ yarn dev
 
 ## 若依前后端分离交流群
 
-QQ群： [![加入QQ群](https://img.shields.io/badge/已满-937441-blue.svg)](https://jq.qq.com/?_wv=1027&k=5bVB1og) [![加入QQ群](https://img.shields.io/badge/已满-887144332-blue.svg)](https://jq.qq.com/?_wv=1027&k=5eiA4DH) [![加入QQ群](https://img.shields.io/badge/已满-180251782-blue.svg)](https://jq.qq.com/?_wv=1027&k=5AxMKlC) [![加入QQ群](https://img.shields.io/badge/已满-104180207-blue.svg)](https://jq.qq.com/?_wv=1027&k=51G72yr) [![加入QQ群](https://img.shields.io/badge/已满-186866453-blue.svg)](https://jq.qq.com/?_wv=1027&k=VvjN2nvu) [![加入QQ群](https://img.shields.io/badge/已满-201396349-blue.svg)](https://jq.qq.com/?_wv=1027&k=5vYAqA05) [![加入QQ群](https://img.shields.io/badge/已满-101456076-blue.svg)](https://jq.qq.com/?_wv=1027&k=kOIINEb5) [![加入QQ群](https://img.shields.io/badge/已满-101539465-blue.svg)](https://jq.qq.com/?_wv=1027&k=UKtX5jhs) [![加入QQ群](https://img.shields.io/badge/已满-264312783-blue.svg)](https://jq.qq.com/?_wv=1027&k=EI9an8lJ) [![加入QQ群](https://img.shields.io/badge/已满-167385320-blue.svg)](https://jq.qq.com/?_wv=1027&k=SWCtLnMz) [![加入QQ群](https://img.shields.io/badge/已满-104748341-blue.svg)](https://jq.qq.com/?_wv=1027&k=96Dkdq0k) [![加入QQ群](https://img.shields.io/badge/已满-160110482-blue.svg)](https://jq.qq.com/?_wv=1027&k=0fsNiYZt) [![加入QQ群](https://img.shields.io/badge/已满-170801498-blue.svg)](https://jq.qq.com/?_wv=1027&k=7xw4xUG1) [![加入QQ群](https://img.shields.io/badge/已满-108482800-blue.svg)](https://jq.qq.com/?_wv=1027&k=eCx8eyoJ) [![加入QQ群](https://img.shields.io/badge/已满-101046199-blue.svg)](https://jq.qq.com/?_wv=1027&k=SpyH2875) [![加入QQ群](https://img.shields.io/badge/已满-136919097-blue.svg)](https://jq.qq.com/?_wv=1027&k=tKEt51dz) [![加入QQ群](https://img.shields.io/badge/已满-143961921-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=0vBbSb0ztbBgVtn3kJS-Q4HUNYwip89G&authKey=8irq5PhutrZmWIvsUsklBxhj57l%2F1nOZqjzigkXZVoZE451GG4JHPOqW7AW6cf0T&noverify=0&group_code=143961921) [![加入QQ群](https://img.shields.io/badge/已满-174951577-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=ZFAPAbp09S2ltvwrJzp7wGlbopsc0rwi&authKey=HB2cxpxP2yspk%2Bo3WKTBfktRCccVkU26cgi5B16u0KcAYrVu7sBaE7XSEqmMdFQp&noverify=0&group_code=174951577) [![加入QQ群](https://img.shields.io/badge/已满-161281055-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Fn2aF5IHpwsy8j6VlalNJK6qbwFLFHat&authKey=uyIT%2B97x2AXj3odyXpsSpVaPMC%2Bidw0LxG5MAtEqlrcBcWJUA%2FeS43rsF1Tg7IRJ&noverify=0&group_code=161281055) [![加入QQ群](https://img.shields.io/badge/已满-138988063-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=XIzkm_mV2xTsUtFxo63bmicYoDBA6Ifm&authKey=dDW%2F4qsmw3x9govoZY9w%2FoWAoC4wbHqGal%2BbqLzoS6VBarU8EBptIgPKN%2FviyC8j&noverify=0&group_code=138988063) [![加入QQ群](https://img.shields.io/badge/已满-151450850-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=DkugnCg68PevlycJSKSwjhFqfIgrWWwR&authKey=pR1Pa5lPIeGF%2FFtIk6d%2FGB5qFi0EdvyErtpQXULzo03zbhopBHLWcuqdpwY241R%2F&noverify=0&group_code=151450850) [![加入QQ群](https://img.shields.io/badge/已满-224622315-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=F58bgRa-Dp-rsQJThiJqIYv8t4-lWfXh&authKey=UmUs4CVG5OPA1whvsa4uSespOvyd8%2FAr9olEGaWAfdLmfKQk%2FVBp2YU3u2xXXt76&noverify=0&group_code=224622315) [![加入QQ群](https://img.shields.io/badge/已满-287842588-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Nxb2EQ5qozWa218Wbs7zgBnjLSNk_tVT&authKey=obBKXj6SBKgrFTJZx0AqQnIYbNOvBB2kmgwWvGhzxR67RoRr84%2Bus5OadzMcdJl5&noverify=0&group_code=287842588) [![加入QQ群](https://img.shields.io/badge/已满-187944233-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=numtK1M_I4eVd2Gvg8qtbuL8JgX42qNh&authKey=giV9XWMaFZTY%2FqPlmWbkB9g3fi0Ev5CwEtT9Tgei0oUlFFCQLDp4ozWRiVIzubIm&noverify=0&group_code=187944233) [![加入QQ群](https://img.shields.io/badge/228578329-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=G6r5KGCaa3pqdbUSXNIgYloyb8e0_L0D&authKey=4w8tF1eGW7%2FedWn%2FHAypQksdrML%2BDHolQSx7094Agm7Luakj9EbfPnSTxSi2T1LQ&noverify=0&group_code=228578329) 点击按钮入群。
+QQ群： [![加入QQ群](https://img.shields.io/badge/已满-937441-blue.svg)](https://jq.qq.com/?_wv=1027&k=5bVB1og) [![加入QQ群](https://img.shields.io/badge/已满-887144332-blue.svg)](https://jq.qq.com/?_wv=1027&k=5eiA4DH) [![加入QQ群](https://img.shields.io/badge/已满-180251782-blue.svg)](https://jq.qq.com/?_wv=1027&k=5AxMKlC) [![加入QQ群](https://img.shields.io/badge/已满-104180207-blue.svg)](https://jq.qq.com/?_wv=1027&k=51G72yr) [![加入QQ群](https://img.shields.io/badge/已满-186866453-blue.svg)](https://jq.qq.com/?_wv=1027&k=VvjN2nvu) [![加入QQ群](https://img.shields.io/badge/已满-201396349-blue.svg)](https://jq.qq.com/?_wv=1027&k=5vYAqA05) [![加入QQ群](https://img.shields.io/badge/已满-101456076-blue.svg)](https://jq.qq.com/?_wv=1027&k=kOIINEb5) [![加入QQ群](https://img.shields.io/badge/已满-101539465-blue.svg)](https://jq.qq.com/?_wv=1027&k=UKtX5jhs) [![加入QQ群](https://img.shields.io/badge/已满-264312783-blue.svg)](https://jq.qq.com/?_wv=1027&k=EI9an8lJ) [![加入QQ群](https://img.shields.io/badge/已满-167385320-blue.svg)](https://jq.qq.com/?_wv=1027&k=SWCtLnMz) [![加入QQ群](https://img.shields.io/badge/已满-104748341-blue.svg)](https://jq.qq.com/?_wv=1027&k=96Dkdq0k) [![加入QQ群](https://img.shields.io/badge/已满-160110482-blue.svg)](https://jq.qq.com/?_wv=1027&k=0fsNiYZt) [![加入QQ群](https://img.shields.io/badge/已满-170801498-blue.svg)](https://jq.qq.com/?_wv=1027&k=7xw4xUG1) [![加入QQ群](https://img.shields.io/badge/已满-108482800-blue.svg)](https://jq.qq.com/?_wv=1027&k=eCx8eyoJ) [![加入QQ群](https://img.shields.io/badge/已满-101046199-blue.svg)](https://jq.qq.com/?_wv=1027&k=SpyH2875) [![加入QQ群](https://img.shields.io/badge/已满-136919097-blue.svg)](https://jq.qq.com/?_wv=1027&k=tKEt51dz) [![加入QQ群](https://img.shields.io/badge/已满-143961921-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=0vBbSb0ztbBgVtn3kJS-Q4HUNYwip89G&authKey=8irq5PhutrZmWIvsUsklBxhj57l%2F1nOZqjzigkXZVoZE451GG4JHPOqW7AW6cf0T&noverify=0&group_code=143961921) [![加入QQ群](https://img.shields.io/badge/已满-174951577-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=ZFAPAbp09S2ltvwrJzp7wGlbopsc0rwi&authKey=HB2cxpxP2yspk%2Bo3WKTBfktRCccVkU26cgi5B16u0KcAYrVu7sBaE7XSEqmMdFQp&noverify=0&group_code=174951577) [![加入QQ群](https://img.shields.io/badge/已满-161281055-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Fn2aF5IHpwsy8j6VlalNJK6qbwFLFHat&authKey=uyIT%2B97x2AXj3odyXpsSpVaPMC%2Bidw0LxG5MAtEqlrcBcWJUA%2FeS43rsF1Tg7IRJ&noverify=0&group_code=161281055) [![加入QQ群](https://img.shields.io/badge/已满-138988063-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=XIzkm_mV2xTsUtFxo63bmicYoDBA6Ifm&authKey=dDW%2F4qsmw3x9govoZY9w%2FoWAoC4wbHqGal%2BbqLzoS6VBarU8EBptIgPKN%2FviyC8j&noverify=0&group_code=138988063) [![加入QQ群](https://img.shields.io/badge/已满-151450850-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=DkugnCg68PevlycJSKSwjhFqfIgrWWwR&authKey=pR1Pa5lPIeGF%2FFtIk6d%2FGB5qFi0EdvyErtpQXULzo03zbhopBHLWcuqdpwY241R%2F&noverify=0&group_code=151450850) [![加入QQ群](https://img.shields.io/badge/已满-224622315-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=F58bgRa-Dp-rsQJThiJqIYv8t4-lWfXh&authKey=UmUs4CVG5OPA1whvsa4uSespOvyd8%2FAr9olEGaWAfdLmfKQk%2FVBp2YU3u2xXXt76&noverify=0&group_code=224622315) [![加入QQ群](https://img.shields.io/badge/已满-287842588-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Nxb2EQ5qozWa218Wbs7zgBnjLSNk_tVT&authKey=obBKXj6SBKgrFTJZx0AqQnIYbNOvBB2kmgwWvGhzxR67RoRr84%2Bus5OadzMcdJl5&noverify=0&group_code=287842588) [![加入QQ群](https://img.shields.io/badge/已满-187944233-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=numtK1M_I4eVd2Gvg8qtbuL8JgX42qNh&authKey=giV9XWMaFZTY%2FqPlmWbkB9g3fi0Ev5CwEtT9Tgei0oUlFFCQLDp4ozWRiVIzubIm&noverify=0&group_code=187944233) [![加入QQ群](https://img.shields.io/badge/已满-228578329-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=G6r5KGCaa3pqdbUSXNIgYloyb8e0_L0D&authKey=4w8tF1eGW7%2FedWn%2FHAypQksdrML%2BDHolQSx7094Agm7Luakj9EbfPnSTxSi2T1LQ&noverify=0&group_code=228578329) [![加入QQ群](https://img.shields.io/badge/已满-191164766-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=GsOo-OLz53J8y_9TPoO6XXSGNRTgbFxA&authKey=R7Uy%2Feq%2BZsoKNqHvRKhiXpypW7DAogoWapOawUGHokJSBIBIre2%2FoiAZeZBSLuBc&noverify=0&group_code=191164766) [![加入QQ群](https://img.shields.io/badge/174569686-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=PmYavuzsOthVqfdAPbo4uAeIbu7Ttjgc&authKey=p52l8%2FXa4PS1JcEmS3VccKSwOPJUZ1ZfQ69MEKzbrooNUljRtlKjvsXf04bxNp3G&noverify=0&group_code=174569686) 点击按钮入群。

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="/favicon.ico">
-  <title>若依管理系统</title>
+  <title>%VITE_APP_TITLE%</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "若依管理系统",
   "author": "若依",
   "license": "MIT",
@@ -18,30 +18,30 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "10.11.0",
+    "@vueuse/core": "13.3.0",
-    "axios": "0.28.1",
+    "axios": "1.9.0",
     "clipboard": "2.0.11",
-    "echarts": "5.5.1",
+    "echarts": "5.6.0",
-    "element-plus": "2.7.6",
+    "element-plus": "2.10.7",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
+    "pinia": "3.0.2",
-    "splitpanes": "3.1.5",
+    "splitpanes": "4.0.4",
-    "vue": "3.4.31",
+    "vue": "3.5.16",
     "vue-cropper": "1.1.1",
-    "vue-router": "4.4.0",
+    "vue-router": "4.5.1",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "5.0.5",
+    "@vitejs/plugin-vue": "5.2.4",
-    "sass": "1.77.5",
+    "sass-embedded": "1.89.1",
-    "unplugin-auto-import": "0.17.6",
+    "unplugin-auto-import": "0.18.6",
     "unplugin-vue-setup-extend-plus": "1.0.1",
-    "vite": "5.3.2",
+    "vite": "6.3.5",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1"
   },

src/assets/styles/btn.scss

@@ -1,4 +1,4 @@
-@import './variables.module.scss';
+@use './variables.module.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;

src/assets/styles/index.scss

@@ -1,10 +1,9 @@
-@import './variables.module.scss';
+@use './mixin.scss';
-@import './mixin.scss';
+@use './transition.scss';
-@import './transition.scss';
+@use './element-ui.scss';
-@import './element-ui.scss';
+@use './sidebar.scss';
-@import './sidebar.scss';
+@use './btn.scss';
-@import './btn.scss';
+@use './ruoyi.scss';
-@import './ruoyi.scss';
 
 body {
   height: 100%;

src/assets/styles/ruoyi.scss

@@ -60,6 +60,14 @@
   color: inherit;
 }
 
+.el-form--inline {
+  .el-form-item {
+    .el-input, .el-cascader, .el-select, .el-autocomplete {
+      width: 200px;
+    }
+  }
+}
+
 .el-form .el-form-item__label {
   font-weight: 700;
 }
@@ -148,6 +156,16 @@
   width: inherit;
 }
 
+/* horizontal el menu */
+.el-menu--horizontal .el-menu-item .svg-icon + span,
+.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
+  margin-left: 3px;
+}
+
+.el-menu--horizontal .el-menu--popup {
+  min-width: 120px !important;
+}
+
 /** 表格更多操作下拉样式 */
 .el-table .el-dropdown-link {
   cursor: pointer;

src/assets/styles/sidebar.scss

@@ -1,9 +1,11 @@
+@use './variables.module.scss' as vars;
+
 #app {
 
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: $base-sidebar-width;
+    margin-left: vars.$base-sidebar-width;
     position: relative;
   }
 
@@ -13,7 +15,7 @@
 
   .sidebar-container {
     transition: width 0.28s;
-    width: $base-sidebar-width !important;
+    width: vars.$base-sidebar-width !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -59,7 +61,7 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 10px !important;
     }
 
     .el-menu {
@@ -87,12 +89,12 @@
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+      color: vars.$base-menu-color-active !important;
     }
 
     & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
+      min-width: vars.$base-sidebar-width !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -101,10 +103,10 @@
 
     & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background;
+      background-color: vars.$base-sub-menu-background;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: vars.$base-sub-menu-hover !important;
       }
     }
   }
@@ -167,7 +169,7 @@
   }
 
   .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $base-sidebar-width !important;
+    min-width: vars.$base-sidebar-width !important;
   }
 
   // mobile responsive
@@ -178,14 +180,14 @@
 
     .sidebar-container {
       transition: transform .28s;
-      width: $base-sidebar-width !important;
+      width: vars.$base-sidebar-width !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$base-sidebar-width, 0, 0);
+        transform: translate3d(-(vars.$base-sidebar-width), 0, 0);
       }
     }
   }

src/assets/styles/transition.scss

@@ -6,7 +6,7 @@
   transition: opacity 0.28s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-active {
   opacity: 0;
 }
@@ -18,7 +18,7 @@
   transition: all .5s;
 }
 
-.fade-transform-enter {
+.fade-transform-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
@@ -34,7 +34,7 @@
   transition: all .5s;
 }
 
-.breadcrumb-enter,
+.breadcrumb-enter-from,
 .breadcrumb-leave-active {
   opacity: 0;
   transform: translateX(20px);

src/components/Breadcrumb/index.vue

@@ -88,7 +88,6 @@ getBreadcrumb()
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
 
   .no-redirect {
     color: #97a8be;

src/components/Crontab/index.vue

@@ -70,10 +70,13 @@
                 <p class="title">时间表达式</p>
                 <table>
                     <thead>
+                        <tr>
                             <th v-for="item of tabTitles" :key="item">{{item}}</th>
                             <th>Cron 表达式</th>
+                        </tr>
                     </thead>
                     <tbody>
+                        <tr>
                             <td>
                                 <span v-if="crontabValueObj.second.length < 10">{{crontabValueObj.second}}</span>
                                 <el-tooltip v-else :content="crontabValueObj.second" placement="top"><span>{{crontabValueObj.second}}</span></el-tooltip>
@@ -106,6 +109,7 @@
                                 <span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
                                 <el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
                             </td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

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.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
           :key="item.value"
@@ -49,6 +49,7 @@ const props = defineProps({
 
 const values = computed(() => {
   if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
+  if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value]
   return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
 })
 
@@ -59,7 +60,7 @@ const unmatch = computed(() => {
   // 传入值为数组
   let unmatch = false // 添加一个标志来判断是否有未匹配项
   values.value.forEach(item => {
-    if (!props.options.some(v => v.value === item)) {
+    if (!props.options.some(v => v.value == item)) {
       unmatchArray.value.push(item)
       unmatch = true // 如果有未匹配项，将标志设置为true
     }
@@ -73,6 +74,10 @@ function handleArray(array) {
     return pre + " " + cur
   })
 }
+
+function isValueMatch(itemValue) {
+  return this.values.some(val => val == itemValue)
+}
 </script>
 
 <style scoped>

src/components/RightToolbar/index.vue

@@ -7,7 +7,7 @@
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
         <el-button circle 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 circle 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 circle icon="Menu" />
@@ -18,9 +18,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" :key="item.key">
+              <template v-for="(item, key) in columns" :key="item.key">
                 <el-dropdown-item>
-                  <el-checkbox v-model="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+                  <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
@@ -32,7 +32,7 @@
       <el-transfer
         :titles="['显示', '隐藏']"
         v-model="value"
-        :data="columns"
+        :data="transferData"
         @change="dataChange"
       ></el-transfer>
     </el-dialog>
@@ -46,9 +46,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
-  /* 显隐列信息 */
+  /* 显隐列信息（数组格式、对象格式） */
   columns: {
-    type: Array
+    type: [Array, Object],
+    default: () => ({})
   },
   /* 是否显示检索图标 */
   search: {
@@ -86,10 +87,11 @@ const style = computed(() => {
 
 // 是否全选/半选 状态
 const isChecked = computed({
-  get: () => props.columns.every(col => col.visible),
+  get: () => Array.isArray(props.columns) ? props.columns.every(col => col.visible) : Object.values(props.columns).every((col) => col.visible),
   set: () => {}
 })
-const isIndeterminate = computed(() => props.columns.some((col) => col.visible) && !isChecked.value)
+const isIndeterminate = computed(() => Array.isArray(props.columns) ? props.columns.some((col) => col.visible) && !isChecked.value : Object.values(props.columns).some((col) => col.visible) && !isChecked.value)
+const transferData = computed(() => Array.isArray(props.columns) ? props.columns.map((item, index) => ({ key: index, label: item.label })) : Object.keys(props.columns).map((key, index) => ({ key: index, label: props.columns[key].label })))
 
 // 搜索
 function toggleSearch() {
@@ -103,10 +105,16 @@ function refresh() {
 
 // 右侧列表元素变化
 function dataChange(data) {
+  if (Array.isArray(props.columns)) {
     for (let item in props.columns) {
       const key = props.columns[item].key
       props.columns[item].visible = !data.includes(key)
     }
+  } else {
+    Object.keys(props.columns).forEach((key, index) => {
+      props.columns[key].visible = !data.includes(index)
+    })
+  }
 }
 
 // 打开显隐列dialog
@@ -114,24 +122,40 @@ function showColumn() {
   open.value = true
 }
 
-if (props.showColumnsType == 'transfer') {
+if (props.showColumnsType == "transfer") {
-  // 显隐列初始默认隐藏列
+  // transfer穿梭显隐列初始默认隐藏列
+  if (Array.isArray(props.columns)) {
     for (let item in props.columns) {
       if (props.columns[item].visible === false) {
         value.value.push(parseInt(item))
       }
     }
+  } else {
+    Object.keys(props.columns).forEach((key, index) => {
+      if (props.columns[key].visible === false) {
+        value.value.push(index)
+      }
+    })
+  }
 }
 
 // 单勾选
-function checkboxChange(event, label) {
+function checkboxChange(event, key) {
-  props.columns.filter(item => item.label == label)[0].visible = event
+  if (Array.isArray(props.columns)) {
+    props.columns.filter(item => item.key == key)[0].visible = event
+  } else {
+    props.columns[key].visible = event
+  }
 }
 
 // 切换全选/反选
 function toggleCheckAll() {
   const newValue = !isChecked.value
+  if (Array.isArray(props.columns)) {
     props.columns.forEach((col) => (col.visible = newValue))
+  } else {
+    Object.values(props.columns).forEach((col) => (col.visible = newValue))
+  }
 }
 </script>
 

src/components/TopNav/index.vue

@@ -175,7 +175,7 @@ onMounted(() => {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #303133 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
@@ -190,7 +190,7 @@ onMounted(() => {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #999093 !important;
+  color: #303133 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
@@ -212,6 +212,4 @@ onMounted(() => {
   margin-left: 8px;
   margin-top: 0px;
 }
-
-
 </style>

src/layout/components/AppMain.vue

@@ -44,12 +44,19 @@ function addIframe() {
   overflow: hidden;
 }
 
+.fixed-header + .app-main {
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  height: calc(100vh - 50px);
+  min-height: 0px;
+}
+
 .app-main:has(.copyright) {
   padding-bottom: 36px;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  margin-top: 50px;
 }
 
 .hasTagsView {
@@ -59,19 +66,47 @@ function addIframe() {
   }
 
   .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;
@@ -86,4 +121,3 @@ function addIframe() {
   border-radius: 3px;
 }
 </style>
-

src/layout/components/Navbar.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="'nav' + settingsStore.navType">
     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+    <top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
+    <template v-if="settingsStore.navType == 3">
+      <logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
+      <top-bar id="topbar-container" class="topbar-container" />
+    </template>
 
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
@@ -40,15 +44,15 @@
             <router-link to="/user/profile">
               <el-dropdown-item>个人中心</el-dropdown-item>
             </router-link>
+            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+                <span>布局设置</span>
+              </el-dropdown-item>
             <el-dropdown-item divided command="logout">
               <span>退出登录</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
-        <svg-icon icon-class="more-up" />
-      </div>
     </div>
   </div>
 </template>
@@ -57,6 +61,8 @@
 import { ElMessageBox } from 'element-plus'
 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'
@@ -111,20 +117,33 @@ function toggleTheme() {
 </script>
 
 <style lang='scss' scoped>
+.navbar.nav3 {
+  .hamburger-container {
+    display: none !important;
+  }
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: var(--navbar-bg);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.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 0.3s;
     -webkit-tap-highlight-color: transparent;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 8px;
 
     &:hover {
       background: rgba(0, 0, 0, 0.025);
@@ -132,7 +151,7 @@ function toggleTheme() {
   }
 
   .breadcrumb-container {
-    float: left;
+    flex-shrink: 0;
   }
 
   .topmenu-container {
@@ -140,16 +159,26 @@ function toggleTheme() {
     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;
@@ -192,19 +221,20 @@ function toggleTheme() {
 
       .avatar-wrapper {
         margin-top: 10px;
-        right: 5px;
+        right: 8px;
         position: relative;
 
         .user-avatar {
           cursor: pointer;
           width: 30px;
           height: 30px;
+          margin-right: 8px;
           border-radius: 50%;
         }
 
         .user-nickname{
           position: relative;
-          left: 5px;
+          left: 0px;
           bottom: 10px;
           font-size: 14px;
           font-weight: bold;

src/layout/components/Settings/index.vue

@@ -1,5 +1,26 @@
 <template>
   <el-drawer v-model="showSettings" :withHeader="false" :lock-scroll="false" direction="rtl" size="300px">
+    <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)" :class="{ activeItem: navType == 1 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+
+      <el-tooltip content="混合菜单" placement="bottom">
+        <div class="item mix" @click="handleNavType(2)" :class="{ activeItem: navType == 2 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+      <el-tooltip content="顶部菜单" placement="bottom">
+        <div class="item top" @click="handleNavType(3)" :class="{ activeItem: navType == 3 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+    </div>
     <div class="setting-drawer-title">
       <h3 class="drawer-title">主题风格设置</h3>
     </div>
@@ -35,13 +56,6 @@
 
     <h3 class="drawer-title">系统布局配置</h3>
 
-    <div class="drawer-item">
-      <span>开启 TopNav</span>
-      <span class="comp-style">
-        <el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
-      </span>
-    </div>
-
     <div class="drawer-item">
       <span>开启 Tags-Views</span>
       <span class="comp-style">
@@ -103,19 +117,12 @@ const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 const showSettings = ref(false)
+const navType = ref(settingsStore.navType)
 const theme = ref(settingsStore.theme)
 const sideTheme = ref(settingsStore.sideTheme)
 const storeSettings = computed(() => settingsStore)
 const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
 
-/** 是否需要topnav */
-function topNavChange(val) {
-  if (!val) {
-    appStore.toggleSideBarHide(false)
-    permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
-  }
-}
-
 /** 是否需要dynamicTitle */
 function dynamicTitleChange() {
   useSettingsStore().setTitle(useSettingsStore().title)
@@ -131,10 +138,34 @@ function handleTheme(val) {
   sideTheme.value = val
 }
 
+function handleNavType(val) {
+  settingsStore.navType = val
+  navType.value = val
+}
+
+/** 菜单导航设置 */
+watch(() => navType, val => {
+  if (val.value == 1) {
+    appStore.sidebar.opened = true
+    appStore.toggleSideBarHide(false)
+  }
+  if (val.value == 2) {
+    appStore.sidebar.opened = true
+  }
+  if (val.value == 3) {
+    appStore.sidebar.opened = false
+    appStore.toggleSideBarHide(true)
+  }
+  if ([1, 3].includes(val.value)) {
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
+  }
+  }, { immediate: true, deep: true }
+)
+
 function saveSetting() {
   proxy.$modal.loading("正在保存到本地，请稍候...")
   let layoutSetting = {
-    "topNav": storeSettings.value.topNav,
+    "navType": storeSettings.value.navType,
     "tagsView": storeSettings.value.tagsView,
     "tagsIcon": storeSettings.value.tagsIcon,
     "fixedHeader": storeSettings.value.fixedHeader,
@@ -218,4 +249,67 @@ defineExpose({
     margin: -3px 8px 0px 0px;
   }
 }
+
+// 导航模式
+.nav-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .activeItem {
+    border: 2px solid var(--el-color-primary) !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;
+    }
+    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>

src/layout/components/Sidebar/Logo.vue

@@ -34,6 +34,9 @@ const getLogoBackground = computed(() => {
   if (settingsStore.isDark) {
     return 'var(--sidebar-bg)'
   }
+  if (settingsStore.navType == 3) {
+    return variables.menuLightBg
+  }
   return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
 })
 
@@ -42,13 +45,14 @@ const getLogoTextColor = computed(() => {
   if (settingsStore.isDark) {
     return 'var(--sidebar-text)'
   }
+  if (settingsStore.navType == 3) {
+    return variables.menuLightText
+  }
   return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
 })
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/variables.module.scss';
-
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
@@ -60,7 +64,6 @@ const getLogoTextColor = computed(() => {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
   height: 50px;
   line-height: 50px;
   background: v-bind(getLogoBackground);

src/layout/components/TopBar/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-menu class="topbar-menu" :ellipsis="false" :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-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
+      <template #title>
+        <span>更多菜单</span>
+      </template>
+      <sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import SidebarItem from '../Sidebar/SidebarItem'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
+
+const route = useRoute()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
+
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const theme = computed(() => settingsStore.theme)
+const device = computed(() => appStore.device)
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+
+const visibleNumber = ref(5)
+const topMenus = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
+})
+const moreRoutes = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value, sidebarRouters.value.length - visibleNumber.value)
+})
+function setVisibleNumber() {
+  const width = document.body.getBoundingClientRect().width / 3
+  visibleNumber.value = parseInt(width / 85)
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber)
+})
+
+onMounted(() => {
+  setVisibleNumber()
+})
+</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;
+}
+
+.topbar-menu.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #303133 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+
+.el-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
+  color: v-bind(theme);
+}
+
+/* sub-menu item */
+.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+  float: left;
+  line-height: 50px !important;
+  color: #303133 !important;
+  margin: 0 15px -3px!important;
+}
+
+/* topbar more arrow */
+.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
+  position: static;
+  margin-left: 8px;
+  margin-top: 0px;
+  display: block !important;
+}
+
+/* menu__title el-menu-item */
+.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  height: 60px;
+}
+</style>

src/layout/index.vue

@@ -64,11 +64,11 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
+@use "@/assets/styles/mixin.scss" as mix;
-  @import "@/assets/styles/variables.module.scss";
+@use "@/assets/styles/variables.module.scss" as vars;
 
 .app-wrapper {
-  @include clearfix;
+  @include mix.clearfix;
   position: relative;
   height: 100%;
   width: 100%;
@@ -79,6 +79,11 @@ function setLayout() {
   }
 }
 
+.main-container:has(.fixed-header) {
+  height: 100vh;
+  overflow: hidden;
+}
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;
@@ -94,7 +99,7 @@ function setLayout() {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$base-sidebar-width});
+  width: calc(100% - #{vars.$base-sidebar-width});
   transition: width 0.28s;
 }
 

src/settings.js

@@ -15,9 +15,9 @@ export default {
   showSettings: true,
 
   /**
-   * 是否显示顶部导航
+   * 菜单导航模式 1、纯左侧 2、混合（左侧+顶部） 3、纯顶部
    */
-  topNav: false,
+  navType: 1,
 
   /**
    * 是否显示 tagsView
@@ -32,7 +32,7 @@ export default {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo

src/store/modules/settings.js

@@ -5,7 +5,7 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
-const { sideTheme, showSettings, topNav, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
+const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 
@@ -17,7 +17,7 @@ const useSettingsStore = defineStore(
       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,

src/utils/generator/drawingDefalut.js

@@ -1,29 +0,0 @@
-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': 'Cellphone',
-    '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: '手机号格式错误'
-    }]
-  }
-]

src/utils/generator/drawingDefault.js

@@ -0,0 +1,37 @@
+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': 'Cellphone',
+      '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)
+}

src/views/index.vue

@@ -87,7 +87,8 @@
               <s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s> <s> 满108482800 </s> 
               <s> 满101046199 </s> <s> 满136919097 </s> <s> 满143961921 </s> <s> 满174951577 </s> 
               <s> 满161281055 </s> <s> 满138988063 </s> <s> 满151450850 </s> <s> 满224622315 </s>
-              <s> 满287842588 </s> <s> 满187944233 </s> <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=G6r5KGCaa3pqdbUSXNIgYloyb8e0_L0D&authKey=4w8tF1eGW7%2FedWn%2FHAypQksdrML%2BDHolQSx7094Agm7Luakj9EbfPnSTxSi2T1LQ&noverify=0&group_code=228578329" target="_blank">228578329</a>
+              <s> 满287842588 </s> <s> 满187944233 </s> <s> 满228578329 </s> <s> 满191164766 </s>
+              <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=EeCBXu51I1zPWRia2uskpjDRx6VrbnFN&authKey=Xm8yDxk0%2FyYGI11oxhXaQnTn4K7UwCk7Kn2MZTh3P1JxLctollAkyeySjnaILDkb&noverify=0&group_code=174569686" target="_blank">174569686</a>
             </p>
             <p>
               <i class="el-icon-chat-dot-round"></i> 微信：<a
@@ -113,6 +114,42 @@
             </div>
           </template>
           <el-collapse accordion>
+            <el-collapse-item title="v3.9.1 - 2025-12-18">
+              <ol>
+                <li>支持防盗链功能</li>
+                <li>菜单导航设置支持纯顶部</li>
+                <li>使用yauaa代替bitwalker</li>
+                <li>用户头像更换后移除旧头像文件</li>
+                <li>支持Excel导出对象的多个子列表</li>
+                <li>升级oshi到最新版本6.9.1</li>
+                <li>升级druid到最新版本1.2.27</li>
+                <li>升级fastjson到最新版2.0.60</li>
+                <li>升级spring-security到5.7.14</li>
+                <li>升级tomcat到最新版本9.0.112</li>
+                <li>升级commons.io到最新版本2.21.0</li>
+                <li>用户导入添加验证提示</li>
+                <li>显示列信息支持对象格式</li>
+                <li>忽略用户密码字段的JSON序列化</li>
+                <li>网页标题设置新增SET_TITLE方法</li>
+                <li>自动识别json对象白名单配置范围缩小</li>
+                <li>登录/注册页面底部版权信息修改为读取配置</li>
+                <li>修复用户归属部门无法修改为空问题</li>
+                <li>修复固定头部时出现的导航栏偏移问题</li>
+                <li>修复v3时间控件between选择后清空报错问题</li>
+                <li>修复comboReadDict属性下多个sheet出现的报错</li>
+                <li>修复表单构建移除所有控件后切换路由回来空白问题</li>
+                <li>优化布局设置显示</li>
+                <li>优化字典组件值宽松匹配</li>
+                <li>优化获取字典类型值的方法</li>
+                <li>优化生成代码下载的zip文件名</li>
+                <li>优化日志记录参数拼装提升效率</li>
+                <li>优化导入文件检查标题行不能为空</li>
+                <li>优化表单构建关闭页签销毁复制插件</li>
+                <li>优化Excel统计行数值的单元格样式显示</li>
+                <li>优化数据权限控制逻辑，放开permission限制</li>
+                <li>其他细节优化</li>
+              </ol>
+            </el-collapse-item>
             <el-collapse-item title="v3.9.0 - 2025-05-28">
               <ol>
                 <li>优化菜单搜索查询页</li>
@@ -1058,7 +1095,7 @@
 </template>
 
 <script setup name="Index">
-const version = ref('3.9.0')
+const version = ref('3.9.1')
 
 function goTarget(url) {
   window.open(url, '__blank')

src/views/login.vue

@@ -59,7 +59,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      <span>{{ footerContent }}</span>
     </div>
   </div>
 </template>
@@ -69,8 +69,10 @@ import { getCodeImg } from "@/api/login"
 import Cookies from "js-cookie"
 import { encrypt, decrypt } from "@/utils/jsencrypt"
 import useUserStore from '@/store/modules/user'
+import defaultSettings from '@/settings'
 
 const title = import.meta.env.VITE_APP_TITLE
+const footerContent = defaultSettings.footerContent
 const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()

src/views/monitor/operlog/index.vue

@@ -166,7 +166,7 @@
                   <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
                </el-col>
                <el-col :span="24">
-                  <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
+                  <el-form-item label="请求参数：" style="word-break: break-all; white-space: pre-wrap;">{{ form.operParam }}</el-form-item>
                </el-col>
                <el-col :span="24">
                   <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>

src/views/register.vue

@@ -70,7 +70,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      <span>{{ footerContent }}</span>
     </div>
   </div>
 </template>
@@ -78,8 +78,10 @@
 <script setup>
 import { ElMessageBox } from "element-plus"
 import { getCodeImg, register } from "@/api/login"
+import defaultSettings from '@/settings'
 
 const title = import.meta.env.VITE_APP_TITLE
+const footerContent = defaultSettings.footerContent
 const router = useRouter()
 const { proxy } = getCurrentInstance()
 

src/views/system/user/index.vue

@@ -58,12 +58,12 @@
 
             <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="userId" prop="userId" v-if="columns.userId.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="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[2].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[3].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[4].visible" width="120" />
+              <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[5].visible">
+              <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
                 <template #default="scope">
                   <el-switch
                     v-model="scope.row.status"
@@ -73,7 +73,7 @@
                   ></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 #default="scope">
                   <span>{{ parseTime(scope.row.createTime) }}</span>
                 </template>
@@ -112,7 +112,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="归属部门" prop="deptId">
-              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
+              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
             </el-form-item>
           </el-col>
         </el-row>
@@ -190,7 +190,7 @@
 
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
-      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-change="handleFileChange" :on-remove="handleFileRemove" :auto-upload="false" drag>
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <template #tip>
@@ -257,15 +257,15 @@ const upload = reactive({
   url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
 })
 // 列显隐信息
-const columns = ref([
+const columns = ref({
-  { key: 0, label: `用户编号`, visible: true },
+  userId: { label: '用户编号', visible: true },
-  { key: 1, label: `用户名称`, visible: true },
+  userName: { label: '用户名称', visible: true },
-  { key: 2, label: `用户昵称`, visible: true },
+  nickName: { label: '用户昵称', visible: true },
-  { key: 3, label: `部门`, visible: true },
+  deptName: { label: '部门', visible: true },
-  { key: 4, label: `手机号码`, visible: true },
+  phonenumber: { label: '手机号码', visible: true },
-  { key: 5, label: `状态`, visible: true },
+  status: { label: '状态', visible: true },
-  { key: 6, label: `创建时间`, visible: true }
+  createTime: { label: '创建时间', visible: true }
-])
+})
 
 const data = reactive({
   form: {},
@@ -432,6 +432,7 @@ function handleSelectionChange(selection) {
 function handleImport() {
   upload.title = "用户导入"
   upload.open = true
+  upload.selectedFile = null
 }
 
 /** 下载模板操作 */
@@ -445,6 +446,16 @@ const handleFileUploadProgress = (event, file, fileList) => {
   upload.isUploading = true
 }
 
+/** 文件选择处理 */
+const handleFileChange = (file, fileList) => {
+  upload.selectedFile = file
+}
+
+/** 文件删除处理 */
+const handleFileRemove = (file, fileList) => {
+  upload.selectedFile = null
+}
+
 /** 文件上传成功处理 */
 const handleFileSuccess = (response, file, fileList) => {
   upload.open = false
@@ -456,6 +467,11 @@ const handleFileSuccess = (response, file, fileList) => {
 
 /** 提交上传文件 */
 function submitFileForm() {
+  const file = upload.selectedFile
+  if (!file || file.length === 0 || !file.name.toLowerCase().endsWith('.xls') && !file.name.toLowerCase().endsWith('.xlsx')) {
+    proxy.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
+    return
+  }
   proxy.$refs["uploadRef"].submit()
 }
 

src/views/tool/build/index.vue

@@ -102,7 +102,7 @@ import beautifier from 'js-beautify'
 import logo from '@/assets/logo/logo.png'
 import { inputComponents, selectComponents, layoutComponents, formConf as formConfData } from '@/utils/generator/config'
 import { beautifierConf } from '@/utils/index'
-import drawingDefalut from '@/utils/generator/drawingDefalut'
+import { drawingDefaultValue, initDrawingDefaultValue, cleanDrawingDefaultValue } from '@/utils/generator/drawingDefault'
 import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
@@ -113,14 +113,16 @@ import RightPanel from './RightPanel'
 import CodeTypeDialog from './CodeTypeDialog'
 import { onMounted, watch } from 'vue'
 
-const drawingList = ref(drawingDefalut)
+initDrawingDefaultValue()
+
+const drawingList = ref(drawingDefaultValue)
 const { proxy } = getCurrentInstance()
 const dialogVisible = ref(false)
 const showFileName = ref(false)
 const operationType = ref('')
 const idGlobal = ref(100)
-const activeData = ref(drawingDefalut[0])
+const activeData = ref(drawingDefaultValue[0])
-const activeId = ref(drawingDefalut[0].formId)
+const activeId = ref(drawingDefaultValue[0].formId)
 const generateConf = ref(null)
 const formData = ref({})
 const formConf = ref(formConfData)
@@ -145,6 +147,7 @@ function empty() {
   proxy.$modal.confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(() => {
       idGlobal.value = 100
       drawingList.value = []
+      cleanDrawingDefaultValue()
     }
   )
 }
@@ -292,8 +295,9 @@ watch(activeId, (val) => {
   oldActiveId = val
 }, { immediate: true })
 
+let clipboard = null
 onMounted(() => {
-  const clipboard = new ClipboardJS('#copyNode', {
+  clipboard = new ClipboardJS('#copyNode', {
     text: trigger => {
       const codeStr = generateCode()
       ElNotification({ title: '成功', message: '代码已复制到剪切板，可粘贴。', type: 'success' })
@@ -304,6 +308,9 @@ onMounted(() => {
     proxy.$modal.msgError('代码复制失败')
   })
 })
+onUnmounted(() => {
+  clipboard.destroy()
+})
 </script>
 
 <style lang='scss'>

src/views/tool/gen/editTable.vue

@@ -40,22 +40,22 @@
 
           <el-table-column label="插入" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+              <el-checkbox true-value="1" false-value="0" v-model="scope.row.isInsert"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="编辑" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+              <el-checkbox true-value="1" false-value="0" v-model="scope.row.isEdit"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="列表" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+              <el-checkbox true-value="1" false-value="0" v-model="scope.row.isList"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="查询" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+              <el-checkbox true-value="1" false-value="0" v-model="scope.row.isQuery"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="查询方式" min-width="10%">
@@ -74,7 +74,7 @@
           </el-table-column>
           <el-table-column label="必填" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+              <el-checkbox true-value="1" false-value="0" v-model="scope.row.isRequired"></el-checkbox>
             </template>
           </el-table-column>
           <el-table-column label="显示类型" min-width="12%">

src/views/tool/gen/index.vue

@@ -224,7 +224,8 @@ function handleGenTable(row) {
       proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
     })
   } else {
-    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi.zip")
+    const zipName = Array.isArray(tbNames) ? "ruoyi.zip" : tbNames + ".zip"
+    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, zipName)
   }
 }