Merge remote-tracking branch 'origin/main'

.env.development

@@ -1,8 +1,7 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 智汇管理系统11
-
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
-# 若依管理系统/开发环境
+# 智汇管理系统/开发环境
 VITE_APP_BASE_API = 'http://192.168.1.5:8082'

.env.production

@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 智汇管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'
 
-# 若依管理系统/生产环境
+# 智汇管理系统/生产环境
 VITE_APP_BASE_API = 'http://192.168.1.5:8082'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

.env.staging

@@ -1,10 +1,10 @@
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 智汇管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'
 
-# 若依管理系统/生产环境
+# 智汇管理系统/生产环境
 VITE_APP_BASE_API = '/stage-api'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.9.1",
-  "description": "若依管理系统",
+  "description": "智汇管理系统",
   "author": "若依",
   "license": "MIT",
   "type": "module",

src/api/system/user.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import { parseStrEmpty } from "@/utils/ruoyi";
+import { parseStrEmpty } from "@/utils/manage";
 
 // 查询用户列表
 export function listUser(query) {

src/assets/styles/btn.scss

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

src/assets/styles/common.css

@@ -0,0 +1,21 @@
+
+:root {
+  --mineTable-notFinish-bg-color: #c7ffa5;
+  --mineTable-click-bg-color: #d2f0ff;
+}
+
+.el-table .success-row {
+  background-color: var(--mineTable-notFinish-bg-color) !important;
+}
+
+.el-table__body tr.current-row>td.el-table__cell {
+  background-color: var(--mineTable-click-bg-color) !important;
+}
+
+/* :deep(.el-table__body tr.hover-row>td.el-table__cell){
+  background-color: unset !important;
+}
+  
+.el-table {
+  --el-table-row-hover-bg-color: transparent;
+} */

src/assets/styles/index.scss

@@ -1,9 +1,10 @@
-@use './mixin.scss';
+@import './variables.module.scss';
-@use './transition.scss';
+@import './mixin.scss';
-@use './element-ui.scss';
+@import './transition.scss';
-@use './sidebar.scss';
+@import './element-ui.scss';
-@use './btn.scss';
+@import './sidebar.scss';
-@use './ruoyi.scss';
+@import './btn.scss';
+@import './manage.scss';
 
 body {
   height: 100%;
@@ -123,6 +124,16 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin: 24px;
+
+  .el-form{
+    .el-form-item__label{
+      color:rgba(0, 0, 0, .9);
+      font-weight: 500;
+    }
+  }
 }
 
 .components-container {

src/assets/styles/manage.scss

@@ -1,6 +1,6 @@
 /**
  * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
+ * Copyright (c) 2019 
  */
 
 /** 基础通用 **/
@@ -60,14 +60,6 @@
   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;
 }
@@ -156,16 +148,6 @@
   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,11 +1,9 @@
-@use './variables.module.scss' as vars;
-
 #app {
 
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: vars.$base-sidebar-width;
+    margin-left: $base-sidebar-width;
     position: relative;
   }
 
@@ -15,7 +13,7 @@
 
   .sidebar-container {
     transition: width 0.28s;
-    width: vars.$base-sidebar-width !important;
+    width: $base-sidebar-width !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -24,8 +22,9 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+    // box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    border-right: 1px solid #e4e4e7;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -61,7 +60,7 @@
     }
 
     .svg-icon {
-      margin-right: 10px !important;
+      margin-right: 16px;
     }
 
     .el-menu {
@@ -89,12 +88,12 @@
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: vars.$base-menu-color-active !important;
+      color: $base-menu-color-active !important;
     }
 
     & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: vars.$base-sidebar-width !important;
+      min-width: $base-sidebar-width !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -103,10 +102,10 @@
 
     & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: vars.$base-sub-menu-background;
+      background-color: $base-sub-menu-background;
 
       &:hover {
-        background-color: vars.$base-sub-menu-hover !important;
+        background-color: $base-sub-menu-hover !important;
       }
     }
   }
@@ -169,7 +168,7 @@
   }
 
   .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: vars.$base-sidebar-width !important;
+    min-width: $base-sidebar-width !important;
   }
 
   // mobile responsive
@@ -180,14 +179,14 @@
 
     .sidebar-container {
       transition: transform .28s;
-      width: vars.$base-sidebar-width !important;
+      width: $base-sidebar-width !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-(vars.$base-sidebar-width), 0, 0);
+        transform: translate3d(-$base-sidebar-width, 0, 0);
       }
     }
   }

src/assets/styles/transition.scss

@@ -6,7 +6,7 @@
   transition: opacity 0.28s;
 }
 
-.fade-enter-from,
+.fade-enter,
 .fade-leave-active {
   opacity: 0;
 }
@@ -18,7 +18,7 @@
   transition: all .5s;
 }
 
-.fade-transform-enter-from {
+.fade-transform-enter {
   opacity: 0;
   transform: translateX(-30px);
 }
@@ -34,7 +34,7 @@
   transition: all .5s;
 }
 
-.breadcrumb-enter-from,
+.breadcrumb-enter,
 .breadcrumb-leave-active {
   opacity: 0;
   transform: translateX(20px);
@@ -47,34 +47,3 @@
 .breadcrumb-leave-active {
   position: absolute;
 }
-
-/* 黑暗模式下过渡效果 */
-::view-transition-new(root), ::view-transition-old(root) {
-  animation: none !important;
-  backface-visibility: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.dark::view-transition-old(root) {
-  z-index: 2147483646;
-  background: var(--bg-color-dark); 
-}
-
-.dark::view-transition-new(root) {
-  z-index: 1;
-  background: var(--bg-color);
-}
-
-::view-transition-old(root) {
-  z-index: 1;
-  background: var(--bg-color);
-}
-
-::view-transition-new(root) {
-  z-index: 2147483646;
-  background: var(--bg-color-dark);
-}

src/assets/styles/variables.module.scss

@@ -90,9 +90,6 @@ html.dark {
   --el-border-color: #434343;
   --el-border-color-light: #434343;
 
-  /* primary */
-  --primary-bg: #18212b;
-
   /* 侧边栏 */
   --sidebar-bg: #141414;
   --sidebar-text: #ffffff;
@@ -130,8 +127,8 @@ html.dark {
   --splitpanes-default-bg: #141414;
 
   /* 侧边栏菜单覆盖 */
-  .sidebar-container {
+   .sidebar-container {
-    .el-menu-item:not(.is-active), .menu-title {
+    .el-menu-item, .menu-title {
       color: var(--el-text-color-regular);
     }
     & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
@@ -140,27 +137,13 @@ html.dark {
     }
   }
 
-  .topmenu-container {
-    .el-menu-item,
-    .el-sub-menu .el-sub-menu__title {
-      color: var(--el-text-color-regular) !important;
-    }
-  }
-
-  .topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title{
-    color: var(--el-text-color-regular) !important;
-  }
-
   /* 顶部栏栏菜单覆盖 */
   .el-menu--horizontal {
-    .el-menu-item, .el-sub-menu {
+    .el-menu-item {
       &:not(.is-disabled) {
         &:hover,
         &:focus {
           background-color: var(--navbar-hover) !important;
-          .el-sub-menu__title {
-            background-color: var(--navbar-hover) !important;
-          }
         }
       }
     }
@@ -190,33 +173,6 @@ html.dark {
     }
   }
 
-  /* 按钮样式覆盖 */
-  .el-button--primary.is-plain {
-    background-color: var(--primary-bg);
-    border: 1px solid var(--el-color-primary-light-2);
-    color: var(--el-color-primary-light-2);
-
-    &:hover {
-      background-color: var(--el-button-hover-bg-color);
-      border-color: var(--el-button-hover-border-color);
-      color: var(--el-button-hover-text-color);
-    }
-
-    &.is-disabled {
-      background-color: var(--link-active-bg-color);
-      border-color: var(--el-color-primary-light-3);
-      color: var(--el-color-primary-light-3);
-      opacity: 0.5;
-    }
-  }
-
-  /* primary tag 样式覆盖 */
-  .el-tag--primary {
-    background-color: var(--primary-bg);
-    border: 1px solid var(--el-border-color-light);
-    color: var(--el-color-primary);
-  }
-
   /* 表格样式覆盖 */
   .el-table {
     --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
@@ -261,11 +217,5 @@ html.dark {
     background: var(--cron-border);
   }
 
-  /* 底部版权样式覆盖 */
-  .copyright {
-    background-color: var(--el-bg-color) !important;
-    color: var(--el-text-color-regular) !important;
-    border-top: 1px solid var(--el-bg-color) !important;
-  }
 }
 

src/components/Breadcrumb/index.vue

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

src/components/Crontab/hour.vue

@@ -78,10 +78,10 @@ watch(() => props.cron.hour, value => changeRadioValue(value))
 watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
 function changeRadioValue(value) {
     if (props.cron.min === '*') {
-        emit('update', 'min', '0', 'hour')
+        emit('update', 'min', '0', 'hour');
     }
     if (props.cron.second === '*') {
-        emit('update', 'second', '0', 'hour')
+        emit('update', 'second', '0', 'hour');
     }
     if (value === '*') {
         radioValue.value = 1

src/components/Crontab/index.vue

@@ -70,46 +70,42 @@
                 <p class="title">时间表达式</p>
                 <table>
                     <thead>
-                        <tr>
+                        <th v-for="item of tabTitles" :key="item">{{item}}</th>
-                            <th v-for="item of tabTitles" :key="item">{{item}}</th>
+                        <th>Cron 表达式</th>
-                            <th>Cron 表达式</th>
-                        </tr>
                     </thead>
                     <tbody>
-                        <tr>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.second.length < 10">{{crontabValueObj.second}}</span>
-                                <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>
-                                <el-tooltip v-else :content="crontabValueObj.second" placement="top"><span>{{crontabValueObj.second}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.min.length < 10">{{crontabValueObj.min}}</span>
-                                <span v-if="crontabValueObj.min.length < 10">{{crontabValueObj.min}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.min" placement="top"><span>{{crontabValueObj.min}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.min" placement="top"><span>{{crontabValueObj.min}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.hour.length < 10">{{crontabValueObj.hour}}</span>
-                                <span v-if="crontabValueObj.hour.length < 10">{{crontabValueObj.hour}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.hour" placement="top"><span>{{crontabValueObj.hour}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.hour" placement="top"><span>{{crontabValueObj.hour}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.day.length < 10">{{crontabValueObj.day}}</span>
-                                <span v-if="crontabValueObj.day.length < 10">{{crontabValueObj.day}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.day" placement="top"><span>{{crontabValueObj.day}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.day" placement="top"><span>{{crontabValueObj.day}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.month.length < 10">{{crontabValueObj.month}}</span>
-                                <span v-if="crontabValueObj.month.length < 10">{{crontabValueObj.month}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.month" placement="top"><span>{{crontabValueObj.month}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.month" placement="top"><span>{{crontabValueObj.month}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.week.length < 10">{{crontabValueObj.week}}</span>
-                                <span v-if="crontabValueObj.week.length < 10">{{crontabValueObj.week}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.week" placement="top"><span>{{crontabValueObj.week}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.week" placement="top"><span>{{crontabValueObj.week}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <span v-if="crontabValueObj.year.length < 10">{{crontabValueObj.year}}</span>
-                                <span v-if="crontabValueObj.year.length < 10">{{crontabValueObj.year}}</span>
+                            <el-tooltip v-else :content="crontabValueObj.year" placement="top"><span>{{crontabValueObj.year}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueObj.year" placement="top"><span>{{crontabValueObj.year}}</span></el-tooltip>
+                        </td>
-                            </td>
+                        <td class="result">
-                            <td class="result">
+                            <span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
-                                <span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
+                            <el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
-                                <el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
+                        </td>
-                            </td>
-                        </tr>
                     </tbody>
                 </table>
             </div>

src/components/Crontab/result.vue

@@ -26,289 +26,289 @@ watch(() => props.ex, () => expressionChange())
 // 表达式值变化时，开始去计算结果
 function expressionChange() {
     // 计算开始-隐藏结果
-    isShow.value = false
+    isShow.value = false;
     // 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
-    let ruleArr = props.ex.split(' ')
+    let ruleArr = props.ex.split(' ');
     // 用于记录进入循环的次数
-    let nums = 0
+    let nums = 0;
     // 用于暂时存符号时间规则结果的数组
-    let resultArr = []
+    let resultArr = [];
     // 获取当前时间精确至[年、月、日、时、分、秒]
-    let nTime = new Date()
+    let nTime = new Date();
-    let nYear = nTime.getFullYear()
+    let nYear = nTime.getFullYear();
-    let nMonth = nTime.getMonth() + 1
+    let nMonth = nTime.getMonth() + 1;
-    let nDay = nTime.getDate()
+    let nDay = nTime.getDate();
-    let nHour = nTime.getHours()
+    let nHour = nTime.getHours();
-    let nMin = nTime.getMinutes()
+    let nMin = nTime.getMinutes();
-    let nSecond = nTime.getSeconds()
+    let nSecond = nTime.getSeconds();
     // 根据规则获取到近100年可能年数组、月数组等等
-    getSecondArr(ruleArr[0])
+    getSecondArr(ruleArr[0]);
-    getMinArr(ruleArr[1])
+    getMinArr(ruleArr[1]);
-    getHourArr(ruleArr[2])
+    getHourArr(ruleArr[2]);
-    getDayArr(ruleArr[3])
+    getDayArr(ruleArr[3]);
-    getMonthArr(ruleArr[4])
+    getMonthArr(ruleArr[4]);
-    getWeekArr(ruleArr[5])
+    getWeekArr(ruleArr[5]);
-    getYearArr(ruleArr[6], nYear)
+    getYearArr(ruleArr[6], nYear);
     // 将获取到的数组赋值-方便使用
-    let sDate = dateArr.value[0]
+    let sDate = dateArr.value[0];
-    let mDate = dateArr.value[1]
+    let mDate = dateArr.value[1];
-    let hDate = dateArr.value[2]
+    let hDate = dateArr.value[2];
-    let DDate = dateArr.value[3]
+    let DDate = dateArr.value[3];
-    let MDate = dateArr.value[4]
+    let MDate = dateArr.value[4];
-    let YDate = dateArr.value[5]
+    let YDate = dateArr.value[5];
     // 获取当前时间在数组中的索引
-    let sIdx = getIndex(sDate, nSecond)
+    let sIdx = getIndex(sDate, nSecond);
-    let mIdx = getIndex(mDate, nMin)
+    let mIdx = getIndex(mDate, nMin);
-    let hIdx = getIndex(hDate, nHour)
+    let hIdx = getIndex(hDate, nHour);
-    let DIdx = getIndex(DDate, nDay)
+    let DIdx = getIndex(DDate, nDay);
-    let MIdx = getIndex(MDate, nMonth)
+    let MIdx = getIndex(MDate, nMonth);
-    let YIdx = getIndex(YDate, nYear)
+    let YIdx = getIndex(YDate, nYear);
     // 重置月日时分秒的函数(后面用的比较多)
     const resetSecond = function () {
-        sIdx = 0
+        sIdx = 0;
         nSecond = sDate[sIdx]
     }
     const resetMin = function () {
-        mIdx = 0
+        mIdx = 0;
         nMin = mDate[mIdx]
-        resetSecond()
+        resetSecond();
     }
     const resetHour = function () {
-        hIdx = 0
+        hIdx = 0;
         nHour = hDate[hIdx]
-        resetMin()
+        resetMin();
     }
     const resetDay = function () {
-        DIdx = 0
+        DIdx = 0;
         nDay = DDate[DIdx]
-        resetHour()
+        resetHour();
     }
     const resetMonth = function () {
-        MIdx = 0
+        MIdx = 0;
         nMonth = MDate[MIdx]
-        resetDay()
+        resetDay();
     }
     // 如果当前年份不为数组中当前值
     if (nYear !== YDate[YIdx]) {
-        resetMonth()
+        resetMonth();
     }
     // 如果当前月份不为数组中当前值
     if (nMonth !== MDate[MIdx]) {
-        resetDay()
+        resetDay();
     }
     // 如果当前“日”不为数组中当前值
     if (nDay !== DDate[DIdx]) {
-        resetHour()
+        resetHour();
     }
     // 如果当前“时”不为数组中当前值
     if (nHour !== hDate[hIdx]) {
-        resetMin()
+        resetMin();
     }
     // 如果当前“分”不为数组中当前值
     if (nMin !== mDate[mIdx]) {
-        resetSecond()
+        resetSecond();
     }
     // 循环年份数组
     goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
-        let YY = YDate[Yi]
+        let YY = YDate[Yi];
         // 如果到达最大值时
         if (nMonth > MDate[MDate.length - 1]) {
-            resetMonth()
+            resetMonth();
-            continue
+            continue;
         }
         // 循环月份数组
         goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
             // 赋值、方便后面运算
             let MM = MDate[Mi];
-            MM = MM < 10 ? '0' + MM : MM
+            MM = MM < 10 ? '0' + MM : MM;
             // 如果到达最大值时
             if (nDay > DDate[DDate.length - 1]) {
-                resetDay()
+                resetDay();
                 if (Mi === MDate.length - 1) {
-                    resetMonth()
+                    resetMonth();
-                    continue goYear
+                    continue goYear;
                 }
-                continue
+                continue;
             }
             // 循环日期数组
             goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
                 // 赋值、方便后面运算
-                let DD = DDate[Di]
+                let DD = DDate[Di];
-                let thisDD = DD < 10 ? '0' + DD : DD
+                let thisDD = DD < 10 ? '0' + DD : DD;
                 // 如果到达最大值时
                 if (nHour > hDate[hDate.length - 1]) {
-                    resetHour()
+                    resetHour();
                     if (Di === DDate.length - 1) {
-                        resetDay()
+                        resetDay();
                         if (Mi === MDate.length - 1) {
-                            resetMonth()
+                            resetMonth();
-                            continue goYear
+                            continue goYear;
                         }
-                        continue goMonth
+                        continue goMonth;
                     }
-                    continue
+                    continue;
                 }
                 // 判断日期的合法性，不合法的话也是跳出当前循环
                 if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true && dayRule.value !== 'workDay' && dayRule.value !== 'lastWeek' && dayRule.value !== 'lastDay') {
-                    resetDay()
+                    resetDay();
-                    continue goMonth
+                    continue goMonth;
                 }
                 // 如果日期规则中有值时
                 if (dayRule.value === 'lastDay') {
                     // 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
                     if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
                         while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
-                            DD--
+                            DD--;
-                            thisDD = DD < 10 ? '0' + DD : DD
+                            thisDD = DD < 10 ? '0' + DD : DD;
                         }
                     }
                 } else if (dayRule.value === 'workDay') {
                     // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
                     if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
                         while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
-                            DD--
+                            DD--;
-                            thisDD = DD < 10 ? '0' + DD : DD
+                            thisDD = DD < 10 ? '0' + DD : DD;
                         }
                     }
                     // 获取达到条件的日期是星期X
-                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
                     // 当星期日时
                     if (thisWeek === 1) {
                         // 先找下一个日，并判断是否为月底
-                        DD++
+                        DD++;
-                        thisDD = DD < 10 ? '0' + DD : DD
+                        thisDD = DD < 10 ? '0' + DD : DD;
                         // 判断下一日已经不是合法日期
                         if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
-                            DD -= 3
+                            DD -= 3;
                         }
                     } else if (thisWeek === 7) {
                         // 当星期6时只需判断不是1号就可进行操作
                         if (dayRuleSup.value !== 1) {
-                            DD--
+                            DD--;
                         } else {
-                            DD += 2
+                            DD += 2;
                         }
                     }
                 } else if (dayRule.value === 'weekDay') {
                     // 如果指定了是星期几
                     // 获取当前日期是属于星期几
-                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
                     // 校验当前星期是否在星期池（dayRuleSup）中
                     if (dayRuleSup.value.indexOf(thisWeek) < 0) {
                         // 如果到达最大值时
                         if (Di === DDate.length - 1) {
-                            resetDay()
+                            resetDay();
                             if (Mi === MDate.length - 1) {
-                                resetMonth()
+                                resetMonth();
-                                continue goYear
+                                continue goYear;
                             }
-                            continue goMonth
+                            continue goMonth;
                         }
-                        continue
+                        continue;
                     }
                 } else if (dayRule.value === 'assWeek') {
                     // 如果指定了是第几周的星期几
                     // 获取每月1号是属于星期几
-                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
                     if (dayRuleSup.value[1] >= thisWeek) {
-                        DD = (dayRuleSup.value[0] - 1) * 7 + dayRuleSup.value[1] - thisWeek + 1
+                        DD = (dayRuleSup.value[0] - 1) * 7 + dayRuleSup.value[1] - thisWeek + 1;
                     } else {
-                        DD = dayRuleSup.value[0] * 7 + dayRuleSup.value[1] - thisWeek + 1
+                        DD = dayRuleSup.value[0] * 7 + dayRuleSup.value[1] - thisWeek + 1;
                     }
                 } else if (dayRule.value === 'lastWeek') {
                     // 如果指定了每月最后一个星期几
                     // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
                     if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
                         while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
-                            DD--
+                            DD--;
-                            thisDD = DD < 10 ? '0' + DD : DD
+                            thisDD = DD < 10 ? '0' + DD : DD;
                         }
                     }
                     // 获取月末最后一天是星期几
-                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
                     // 找到要求中最近的那个星期几
                     if (dayRuleSup.value < thisWeek) {
-                        DD -= thisWeek - dayRuleSup.value
+                        DD -= thisWeek - dayRuleSup.value;
                     } else if (dayRuleSup.value > thisWeek) {
                         DD -= 7 - (dayRuleSup.value - thisWeek)
                     }
                 }
                 // 判断时间值是否小于10置换成“05”这种格式
-                DD = DD < 10 ? '0' + DD : DD
+                DD = DD < 10 ? '0' + DD : DD;
                 // 循环“时”数组
                 goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
                     let hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi]
                     // 如果到达最大值时
                     if (nMin > mDate[mDate.length - 1]) {
-                        resetMin()
+                        resetMin();
                         if (hi === hDate.length - 1) {
-                            resetHour()
+                            resetHour();
                             if (Di === DDate.length - 1) {
-                                resetDay()
+                                resetDay();
                                 if (Mi === MDate.length - 1) {
-                                    resetMonth()
+                                    resetMonth();
-                                    continue goYear
+                                    continue goYear;
                                 }
-                                continue goMonth
+                                continue goMonth;
                             }
-                            continue goDay
+                            continue goDay;
                         }
-                        continue
+                        continue;
                     }
                     // 循环"分"数组
                     goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
-                        let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi]
+                        let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi];
                         // 如果到达最大值时
                         if (nSecond > sDate[sDate.length - 1]) {
-                            resetSecond()
+                            resetSecond();
                             if (mi === mDate.length - 1) {
-                                resetMin()
+                                resetMin();
                                 if (hi === hDate.length - 1) {
-                                    resetHour()
+                                    resetHour();
                                     if (Di === DDate.length - 1) {
-                                        resetDay()
+                                        resetDay();
                                         if (Mi === MDate.length - 1) {
-                                            resetMonth()
+                                            resetMonth();
-                                            continue goYear
+                                            continue goYear;
                                         }
-                                        continue goMonth
+                                        continue goMonth;
                                     }
-                                    continue goDay
+                                    continue goDay;
                                 }
-                                continue goHour
+                                continue goHour;
                             }
-                            continue
+                            continue;
                         }
                         // 循环"秒"数组
                         goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
-                            let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si]
+                            let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si];
                             // 添加当前时间（时间合法性在日期循环时已经判断）
                             if (MM !== '00' && DD !== '00') {
                                 resultArr.push(YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss)
-                                nums++
+                                nums++;
                             }
                             // 如果条数满了就退出循环
-                            if (nums === 5) break goYear
+                            if (nums === 5) break goYear;
                             // 如果到达最大值时
                             if (si === sDate.length - 1) {
-                                resetSecond()
+                                resetSecond();
                                 if (mi === mDate.length - 1) {
-                                    resetMin()
+                                    resetMin();
                                     if (hi === hDate.length - 1) {
-                                        resetHour()
+                                        resetHour();
                                         if (Di === DDate.length - 1) {
-                                            resetDay()
+                                            resetDay();
                                             if (Mi === MDate.length - 1) {
-                                                resetMonth()
+                                                resetMonth();
-                                                continue goYear
+                                                continue goYear;
                                             }
-                                            continue goMonth
+                                            continue goMonth;
                                         }
-                                        continue goDay
+                                        continue goDay;
                                     }
-                                    continue goHour
+                                    continue goHour;
                                 }
-                                continue goMin
+                                continue goMin;
                             }
                         } //goSecond
                     } //goMin
@@ -318,31 +318,31 @@ function expressionChange() {
     }
     // 判断100年内的结果条数
     if (resultArr.length === 0) {
-        resultList.value = ['没有达到条件的结果！']
+        resultList.value = ['没有达到条件的结果！'];
     } else {
-        resultList.value = resultArr
+        resultList.value = resultArr;
         if (resultArr.length !== 5) {
             resultList.value.push('最近100年内只有上面' + resultArr.length + '条结果！')
         }
     }
     // 计算完成-显示结果
-    isShow.value = true
+    isShow.value = true;
 }
 // 用于计算某位数字在数组中的索引
 function getIndex(arr, value) {
     if (value <= arr[0] || value > arr[arr.length - 1]) {
-        return 0
+        return 0;
     } else {
         for (let i = 0; i < arr.length - 1; i++) {
             if (value > arr[i] && value <= arr[i + 1]) {
-                return i + 1
+                return i + 1;
             }
         }
     }
 }
 // 获取"年"数组
 function getYearArr(rule, year) {
-    dateArr.value[5] = getOrderArr(year, year + 100)
+    dateArr.value[5] = getOrderArr(year, year + 100);
     if (rule !== undefined) {
         if (rule.indexOf('-') >= 0) {
             dateArr.value[5] = getCycleArr(rule, year + 100, false)
@@ -355,7 +355,7 @@ function getYearArr(rule, year) {
 }
 // 获取"月"数组
 function getMonthArr(rule) {
-    dateArr.value[4] = getOrderArr(1, 12)
+    dateArr.value[4] = getOrderArr(1, 12);
     if (rule.indexOf('-') >= 0) {
         dateArr.value[4] = getCycleArr(rule, 12, false)
     } else if (rule.indexOf('/') >= 0) {
@@ -369,58 +369,58 @@ function getWeekArr(rule) {
     // 只有当日期规则的两个值均为“”时则表达日期是有选项的
     if (dayRule.value === '' && dayRuleSup.value === '') {
         if (rule.indexOf('-') >= 0) {
-            dayRule.value = 'weekDay'
+            dayRule.value = 'weekDay';
             dayRuleSup.value = getCycleArr(rule, 7, false)
         } else if (rule.indexOf('#') >= 0) {
-            dayRule.value = 'assWeek'
+            dayRule.value = 'assWeek';
-            let matchRule = rule.match(/[0-9]{1}/g)
+            let matchRule = rule.match(/[0-9]{1}/g);
-            dayRuleSup.value = [Number(matchRule[1]), Number(matchRule[0])]
+            dayRuleSup.value = [Number(matchRule[1]), Number(matchRule[0])];
-            dateArr.value[3] = [1]
+            dateArr.value[3] = [1];
             if (dayRuleSup.value[1] === 7) {
-                dayRuleSup.value[1] = 0
+                dayRuleSup.value[1] = 0;
             }
         } else if (rule.indexOf('L') >= 0) {
-            dayRule.value = 'lastWeek'
+            dayRule.value = 'lastWeek';
-            dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
+            dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0]);
-            dateArr.value[3] = [31]
+            dateArr.value[3] = [31];
             if (dayRuleSup.value === 7) {
-                dayRuleSup.value = 0
+                dayRuleSup.value = 0;
             }
         } else if (rule !== '*' && rule !== '?') {
-            dayRule.value = 'weekDay'
+            dayRule.value = 'weekDay';
             dayRuleSup.value = getAssignArr(rule)
         }
     }
 }
 // 获取"日"数组-少量为日期规则
 function getDayArr(rule) {
-    dateArr.value[3] = getOrderArr(1, 31)
+    dateArr.value[3] = getOrderArr(1, 31);
-    dayRule.value = ''
+    dayRule.value = '';
-    dayRuleSup.value = ''
+    dayRuleSup.value = '';
     if (rule.indexOf('-') >= 0) {
         dateArr.value[3] = getCycleArr(rule, 31, false)
-        dayRuleSup.value = 'null'
+        dayRuleSup.value = 'null';
     } else if (rule.indexOf('/') >= 0) {
         dateArr.value[3] = getAverageArr(rule, 31)
-        dayRuleSup.value = 'null'
+        dayRuleSup.value = 'null';
     } else if (rule.indexOf('W') >= 0) {
-        dayRule.value = 'workDay'
+        dayRule.value = 'workDay';
-        dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
+        dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0]);
-        dateArr.value[3] = [dayRuleSup.value]
+        dateArr.value[3] = [dayRuleSup.value];
     } else if (rule.indexOf('L') >= 0) {
-        dayRule.value = 'lastDay'
+        dayRule.value = 'lastDay';
-        dayRuleSup.value = 'null'
+        dayRuleSup.value = 'null';
-        dateArr.value[3] = [31]
+        dateArr.value[3] = [31];
     } else if (rule !== '*' && rule !== '?') {
         dateArr.value[3] = getAssignArr(rule)
-        dayRuleSup.value = 'null'
+        dayRuleSup.value = 'null';
     } else if (rule === '*') {
-        dayRuleSup.value = 'null'
+        dayRuleSup.value = 'null';
     }
 }
 // 获取"时"数组
 function getHourArr(rule) {
-    dateArr.value[2] = getOrderArr(0, 23)
+    dateArr.value[2] = getOrderArr(0, 23);
     if (rule.indexOf('-') >= 0) {
         dateArr.value[2] = getCycleArr(rule, 24, true)
     } else if (rule.indexOf('/') >= 0) {
@@ -431,7 +431,7 @@ function getHourArr(rule) {
 }
 // 获取"分"数组
 function getMinArr(rule) {
-    dateArr.value[1] = getOrderArr(0, 59)
+    dateArr.value[1] = getOrderArr(0, 59);
     if (rule.indexOf('-') >= 0) {
         dateArr.value[1] = getCycleArr(rule, 60, true)
     } else if (rule.indexOf('/') >= 0) {
@@ -442,7 +442,7 @@ function getMinArr(rule) {
 }
 // 获取"秒"数组
 function getSecondArr(rule) {
-    dateArr.value[0] = getOrderArr(0, 59)
+    dateArr.value[0] = getOrderArr(0, 59);
     if (rule.indexOf('-') >= 0) {
         dateArr.value[0] = getCycleArr(rule, 60, true)
     } else if (rule.indexOf('/') >= 0) {
@@ -453,86 +453,86 @@ function getSecondArr(rule) {
 }
 // 根据传进来的min-max返回一个顺序的数组
 function getOrderArr(min, max) {
-    let arr = []
+    let arr = [];
     for (let i = min; i <= max; i++) {
-        arr.push(i)
+        arr.push(i);
     }
-    return arr
+    return arr;
 }
 // 根据规则中指定的零散值返回一个数组
 function getAssignArr(rule) {
-    let arr = []
+    let arr = [];
-    let assiginArr = rule.split(',')
+    let assiginArr = rule.split(',');
     for (let i = 0; i < assiginArr.length; i++) {
         arr[i] = Number(assiginArr[i])
     }
     arr.sort(compare)
-    return arr
+    return arr;
 }
 // 根据一定算术规则计算返回一个数组
 function getAverageArr(rule, limit) {
-    let arr = []
+    let arr = [];
-    let agArr = rule.split('/')
+    let agArr = rule.split('/');
-    let min = Number(agArr[0])
+    let min = Number(agArr[0]);
-    let step = Number(agArr[1])
+    let step = Number(agArr[1]);
     while (min <= limit) {
-        arr.push(min)
+        arr.push(min);
-        min += step
+        min += step;
     }
-    return arr
+    return arr;
 }
 // 根据规则返回一个具有周期性的数组
 function getCycleArr(rule, limit, status) {
     // status--表示是否从0开始（则从1开始）
-    let arr = []
+    let arr = [];
-    let cycleArr = rule.split('-')
+    let cycleArr = rule.split('-');
-    let min = Number(cycleArr[0])
+    let min = Number(cycleArr[0]);
-    let max = Number(cycleArr[1])
+    let max = Number(cycleArr[1]);
     if (min > max) {
-        max += limit
+        max += limit;
     }
     for (let i = min; i <= max; i++) {
-        let add = 0
+        let add = 0;
         if (status === false && i % limit === 0) {
-            add = limit
+            add = limit;
         }
         arr.push(Math.round(i % limit + add))
     }
     arr.sort(compare)
-    return arr
+    return arr;
 }
 // 比较数字大小（用于Array.sort）
 function compare(value1, value2) {
     if (value2 - value1 > 0) {
-        return -1
+        return -1;
     } else {
-        return 1
+        return 1;
     }
 }
 // 格式化日期格式如：2017-9-19 18:04:33
 function formatDate(value, type) {
     // 计算日期相关值
-    let time = typeof value == 'number' ? new Date(value) : value
+    let time = typeof value == 'number' ? new Date(value) : value;
-    let Y = time.getFullYear()
+    let Y = time.getFullYear();
-    let M = time.getMonth() + 1
+    let M = time.getMonth() + 1;
-    let D = time.getDate()
+    let D = time.getDate();
-    let h = time.getHours()
+    let h = time.getHours();
-    let m = time.getMinutes()
+    let m = time.getMinutes();
-    let s = time.getSeconds()
+    let s = time.getSeconds();
-    let week = time.getDay()
+    let week = time.getDay();
     // 如果传递了type的话
     if (type === undefined) {
-        return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
+        return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
     } else if (type === 'week') {
         // 在quartz中 1为星期日
-        return week + 1
+        return week + 1;
     }
 }
 // 检查日期是否存在
 function checkDate(value) {
-    let time = new Date(value)
+    let time = new Date(value);
     let format = formatDate(time)
-    return value === format
+    return value === format;
 }
 onMounted(() => {
     expressionChange()

src/components/Crontab/year.vue

@@ -61,24 +61,22 @@ const props = defineProps({
         }
     }
 })
-
+const fullYear = ref(0)
-const fullYear = Number(new Date().getFullYear())
+const maxFullYear = ref(0)
-const maxFullYear = fullYear + 10
 const radioValue = ref(1)
-const cycle01 = ref(fullYear)
+const cycle01 = ref(0)
-const cycle02 = ref(fullYear + 1)
+const cycle02 = ref(0)
-const average01 = ref(fullYear)
+const average01 = ref(0)
 const average02 = ref(1)
 const checkboxList = ref([])
-const checkCopy = ref([fullYear])
+const checkCopy = ref([])
-
 const cycleTotal = computed(() => {
-    cycle01.value = props.check(cycle01.value, fullYear, maxFullYear - 1)
+    cycle01.value = props.check(cycle01.value, fullYear.value, maxFullYear.value - 1)
-    cycle02.value = props.check(cycle02.value, cycle01.value + 1, maxFullYear)
+    cycle02.value = props.check(cycle02.value, cycle01.value + 1, maxFullYear.value)
     return cycle01.value + '-' + cycle02.value
 })
 const averageTotal = computed(() => {
-    average01.value = props.check(average01.value, fullYear, maxFullYear - 1)
+    average01.value = props.check(average01.value, fullYear.value, maxFullYear.value - 1)
     average02.value = props.check(average02.value, 1, 10)
     return average01.value + '/' + average02.value
 })
@@ -99,8 +97,8 @@ function changeRadioValue(value) {
         radioValue.value = 3
     } else if (value.indexOf("/") > -1) {
         const indexArr = value.split('/')
-        average01.value = Number(indexArr[0])
+        average01.value = Number(indexArr[1])
-        average02.value = Number(indexArr[1])
+        average02.value = Number(indexArr[0])
         radioValue.value = 4
     } else {
         checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]
@@ -131,6 +129,14 @@ function onRadioChange() {
             break
     }
 }
+onMounted(() => {
+    fullYear.value = Number(new Date().getFullYear())
+    maxFullYear.value = fullYear.value + 10
+    cycle01.value = fullYear.value
+    cycle02.value = cycle01.value + 1
+    average01.value = fullYear.value
+    checkCopy.value = [fullYear.value]
+})
 </script>
 
 <style lang="scss" scoped>

src/components/DictTag/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-for="(item, index) in options">
-      <template v-if="isValueMatch(item.value)">
+      <template v-if="values.includes(item.value)">
         <span
           v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
           :key="item.value"
@@ -26,7 +26,7 @@
 
 <script setup>
 // 记录未匹配的项
-const unmatchArray = ref([])
+const unmatchArray = ref([]);
 
 const props = defineProps({
   // 数据
@@ -45,38 +45,33 @@ const props = defineProps({
     type: String,
     default: ",",
   }
-})
+});
 
 const values = computed(() => {
-  if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
+  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);
-  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
+});
-})
 
 const unmatch = computed(() => {
-  unmatchArray.value = []
+  unmatchArray.value = [];
   // 没有value不显示
   if (props.value === null || typeof props.value === 'undefined' || props.value === '' || !Array.isArray(props.options) || props.options.length === 0) return false
   // 传入值为数组
   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
     }
   })
   return unmatch // 返回标志的值
-})
+});
 
 function handleArray(array) {
-  if (array.length === 0) return ""
+  if (array.length === 0) return "";
   return array.reduce((pre, cur) => {
-    return pre + " " + cur
+    return pre + " " + cur;
-  })
+  });
-}
-
-function isValueMatch(itemValue) {
-  return values.value.some(val => val == itemValue)
 }
 </script>
 

src/components/Editor/index.vue

@@ -27,18 +27,17 @@
 </template>
 
 <script setup>
-import axios from 'axios'
+import { QuillEditor } from "@vueup/vue-quill";
-import { QuillEditor } from "@vueup/vue-quill"
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import "@vueup/vue-quill/dist/vue-quill.snow.css"
+import { getToken } from "@/utils/auth";
-import { getToken } from "@/utils/auth"
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 
-const quillEditorRef = ref()
+const quillEditorRef = ref();
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload") // 上传的图片服务器地址
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
 const headers = ref({
   Authorization: "Bearer " + getToken()
-})
+});
 
 const props = defineProps({
   /* 编辑器的内容 */
@@ -69,8 +68,12 @@ const props = defineProps({
   type: {
     type: String,
     default: "url",
+  },
+  showToolbar:{
+    type: Boolean,
+    default: true,
   }
-})
+});
 
 const options = ref({
   theme: "snow",
@@ -91,62 +94,74 @@ const options = ref({
       ["link", "image", "video"]                      // 链接、图片、视频
     ],
   },
-  placeholder: "请输入内容",
+  placeholder: "",
   readOnly: props.readOnly
-})
+});
 
 const styles = computed(() => {
-  let style = {}
+  let style = {};
   if (props.minHeight) {
-    style.minHeight = `${props.minHeight}px`
+    style.minHeight = `${props.minHeight}px`;
   }
   if (props.height) {
-    style.height = `${props.height}px`
+    style.height = `${props.height}px`;
   }
-  return style
+  return style;
-})
+});
 
-const content = ref("")
+const content = ref("");
 watch(() => props.modelValue, (v) => {
   if (v !== content.value) {
-    content.value = v == undefined ? "<p></p>" : v
+    content.value = v == undefined ? "<p></p>" : v;
   }
-}, { immediate: true })
+}, { immediate: true });
+watch(() => props.readOnly, (v) => {
+  if(props.readOnly){
+    options.value.readOnly = true
+  }
+  
+}, { immediate: true });
+watch(() => props.showToolbar, (v) => {
+  if(!props.showToolbar){
+    options.value.modules.toolbar = false
+  }
+  
+}, { immediate: true });
 
 // 如果设置了上传地址则自定义图片上传事件
 onMounted(() => {
-  if (props.type == 'url') {
+  if (props.type == 'url' && props.showToolbar) {
-    let quill = quillEditorRef.value.getQuill()
+    let quill = quillEditorRef.value.getQuill();
-    let toolbar = quill.getModule("toolbar")
+    let toolbar = quill.getModule("toolbar");
     toolbar.addHandler("image", (value) => {
       if (value) {
-        proxy.$refs.uploadRef.click()
+        proxy.$refs.uploadRef.click();
       } else {
-        quill.format("image", false)
+        quill.format("image", false);
       }
-    })
+    });
-    quill.root.addEventListener('paste', handlePasteCapture, true)
   }
-})
+  
+});
 
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
-  const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]
+  const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
-  const isJPG = type.includes(file.type)
+  const isJPG = type.includes(file.type);
   //检验文件格式
   if (!isJPG) {
-    proxy.$modal.msgError(`图片格式错误!`)
+    proxy.$modal.msgError(`图片格式错误!`);
-    return false
+    return false;
   }
   // 校检文件大小
   if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-      return false
+      return false;
     }
   }
-  return true
+  return true;
 }
 
 // 上传成功处理
@@ -154,44 +169,21 @@ function handleUploadSuccess(res, file) {
   // 如果上传成功
   if (res.code == 200) {
     // 获取富文本实例
-    let quill = toRaw(quillEditorRef.value).getQuill()
+    let quill = toRaw(quillEditorRef.value).getQuill();
     // 获取光标位置
-    let length = quill.selection.savedRange.index
+    let length = quill.selection.savedRange.index;
     // 插入图片，res.url为服务器返回的图片链接地址
-    quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName)
+    quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
     // 调整光标到最后
-    quill.setSelection(length + 1)
+    quill.setSelection(length + 1);
   } else {
-    proxy.$modal.msgError("图片插入失败")
+    proxy.$modal.msgError("图片插入失败");
   }
 }
 
 // 上传失败处理
 function handleUploadError() {
-  proxy.$modal.msgError("图片插入失败")
+  proxy.$modal.msgError("图片插入失败");
-}
-
-// 复制粘贴图片处理
-function handlePasteCapture(e) {
-  const clipboard = e.clipboardData || window.clipboardData
-  if (clipboard && clipboard.items) {
-    for (let i = 0; i < clipboard.items.length; i++) {
-      const item = clipboard.items[i]
-      if (item.type.indexOf('image') !== -1) {
-        e.preventDefault()
-        const file = item.getAsFile()
-        insertImage(file)
-      }
-    }
-  }
-}
-
-function insertImage(file) {
-  const formData = new FormData()
-  formData.append("file", file)
-  axios.post(uploadUrl.value, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: headers.value.Authorization } }).then(res => {
-    handleUploadSuccess(res.data)
-  })
 }
 </script>
 

src/components/FileUpload/index.vue

@@ -5,7 +5,6 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :data="data"
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
@@ -27,13 +26,13 @@
       的文件
     </div>
     <!-- 文件列表 -->
-    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;删除</el-link>
+          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>
         </div>
       </li>
     </transition-group>
@@ -41,20 +40,10 @@
 </template>
 
 <script setup>
-import { getToken } from "@/utils/auth"
+import { getToken } from "@/utils/auth";
-import Sortable from 'sortablejs'
 
 const props = defineProps({
   modelValue: [String, Object, Array],
-  // 上传接口地址
-  action: {
-    type: String,
-    default: "/common/upload"
-  },
-  // 上传携带的参数
-  data: {
-    type: Object
-  },
   // 数量限制
   limit: {
     type: Number,
@@ -79,114 +68,108 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
-  },
-  // 拖动排序
-  drag: {
-    type: Boolean,
-    default: true
   }
-})
+});
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
-const emit = defineEmits()
+const emit = defineEmits();
-const number = ref(0)
+const number = ref(0);
-const uploadList = ref([])
+const uploadList = ref([]);
-const baseUrl = import.meta.env.VITE_APP_BASE_API
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传文件服务器地址
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() })
+const headers = ref({ Authorization: "Bearer " + getToken() });
-const fileList = ref([])
+const fileList = ref([]);
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
-)
+);
 
 watch(() => props.modelValue, val => {
   if (val) {
-    let temp = 1
+    let temp = 1;
     // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(',')
+    const list = Array.isArray(val) ? val : props.modelValue.split(',');
     // 然后将数组转为对象数组
     fileList.value = list.map(item => {
       if (typeof item === "string") {
-        item = { name: item, url: item }
+        item = { name: item, url: item };
       }
-      item.uid = item.uid || new Date().getTime() + temp++
+      item.uid = item.uid || new Date().getTime() + temp++;
-      return item
+      return item;
-    })
+    });
   } else {
-    fileList.value = []
+    fileList.value = [];
-    return []
+    return [];
   }
-},{ deep: true, immediate: true })
+},{ deep: true, immediate: true });
 
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
   // 校检文件类型
   if (props.fileType.length) {
-    const fileName = file.name.split('.')
+    const fileName = file.name.split('.');
-    const fileExt = fileName[fileName.length - 1]
+    const fileExt = fileName[fileName.length - 1];
-    const isTypeOk = props.fileType.indexOf(fileExt) >= 0
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
     if (!isTypeOk) {
-      proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`)
+      proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`);
-      return false
+      return false;
     }
   }
   // 校检文件名是否包含特殊字符
   if (file.name.includes(',')) {
-    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
+    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!');
-    return false
+    return false;
   }
   // 校检文件大小
   if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-      return false
+      return false;
     }
   }
-  proxy.$modal.loading("正在上传文件，请稍候...")
+  proxy.$modal.loading("正在上传文件，请稍候...");
-  number.value++
+  number.value++;
-  return true
+  return true;
 }
 
 // 文件个数超出
 function handleExceed() {
-  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
 }
 
 // 上传失败
 function handleUploadError(err) {
-  proxy.$modal.msgError("上传文件失败")
+  proxy.$modal.msgError("上传文件失败");
-  proxy.$modal.closeLoading()
 }
 
 // 上传成功回调
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName })
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
-    uploadedSuccessfully()
+    uploadedSuccessfully();
   } else {
-    number.value--
+    number.value--;
-    proxy.$modal.closeLoading()
+    proxy.$modal.closeLoading();
-    proxy.$modal.msgError(res.msg)
+    proxy.$modal.msgError(res.msg);
-    proxy.$refs.fileUpload.handleRemove(file)
+    proxy.$refs.fileUpload.handleRemove(file);
-    uploadedSuccessfully()
+    uploadedSuccessfully();
   }
 }
 
 // 删除文件
 function handleDelete(index) {
-  fileList.value.splice(index, 1)
+  fileList.value.splice(index, 1);
-  emit("update:modelValue", listToString(fileList.value))
+  emit("update:modelValue", listToString(fileList.value));
 }
 
 // 上传结束处理
 function uploadedSuccessfully() {
   if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
-    uploadList.value = []
+    uploadList.value = [];
-    number.value = 0
+    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value))
+    emit("update:modelValue", listToString(fileList.value));
-    proxy.$modal.closeLoading()
+    proxy.$modal.closeLoading();
   }
 }
 
@@ -194,46 +177,26 @@ function uploadedSuccessfully() {
 function getFileName(name) {
   // 如果是url那么取最后的名字 如果不是直接返回
   if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1)
+    return name.slice(name.lastIndexOf("/") + 1);
   } else {
-    return name
+    return name;
   }
 }
 
 // 对象转成指定字符串分隔
 function listToString(list, separator) {
-  let strs = ""
+  let strs = "";
-  separator = separator || ","
+  separator = separator || ",";
   for (let i in list) {
     if (list[i].url) {
-      strs += list[i].url + separator
+      strs += list[i].url + separator;
     }
   }
-  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+  return strs != '' ? strs.substr(0, strs.length - 1) : '';
 }
-
-// 初始化拖拽排序
-onMounted(() => {
-  if (props.drag && !props.disabled) {
-    nextTick(() => {
-      const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
-      Sortable.create(element, {
-        ghostClass: 'file-upload-darg',
-        onEnd: (evt) => {
-          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
-          fileList.value.splice(evt.newIndex, 0, movedItem)
-          emit('update:modelValue', listToString(fileList.value))
-        }
-      })
-    })
-  }
-})
 </script>
+
 <style scoped lang="scss">
-.file-upload-darg {
-  opacity: 0.5;
-  background: #c8ebfb;
-}
 .upload-file-uploader {
   margin-bottom: 5px;
 }
@@ -242,7 +205,6 @@ onMounted(() => {
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
-  transition: none !important;
 }
 .upload-file-list .ele-upload-list__item-content {
   display: flex;

src/components/Hamburger/index.vue

@@ -24,7 +24,7 @@ defineProps({
 
 const emit = defineEmits()
 const toggleClick = () => {
-  emit('toggleClick')
+  emit('toggleClick');
 }
 </script>
 

src/components/HeaderSearch/index.vue

@@ -1,93 +1,58 @@
 <template>
-  <div class="header-search">
+  <div :class="{ 'show': show }" class="header-search">
     <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
-    <el-dialog
+    <el-select
-      v-model="show"
+      ref="headerSearchSelectRef"
-      width="600"
+      v-model="search"
-      @close="close"
+      :remote-method="querySearch"
-      :show-close="false"
+      filterable
-      append-to-body
+      default-first-option
+      remote
+      placeholder="Search"
+      class="header-search-select"
+      @change="change"
     >
-      <el-input
+      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
-        v-model="search"
+    </el-select>
-        ref="headerSearchSelectRef"
-        size="large"
-        @input="querySearch"
-        prefix-icon="Search"
-        placeholder="菜单搜索，支持标题、URL模糊查询"
-        clearable
-        @keyup.enter="selectActiveResult"
-        @keydown.up.prevent="navigateResult('up')"
-        @keydown.down.prevent="navigateResult('down')"
-      >
-      </el-input>
-
-      <div class="result-wrap">
-        <el-scrollbar>
-          <div class="search-item" tabindex="1" v-for="(item, index) in options" :key="item.path" :style="activeStyle(index)" @mouseenter="activeIndex = index" @mouseleave="activeIndex = -1">
-            <div class="left">
-              <svg-icon class="menu-icon" :icon-class="item.icon" />
-            </div>
-            <div class="search-info" @click="change(item)">
-              <div class="menu-title">
-                {{ item.title.join(" / ") }}
-              </div>
-              <div class="menu-path">
-                {{ item.path }}
-              </div>
-            </div>
-            <svg-icon icon-class="enter" v-show="index === activeIndex"/>
-          </div>
-        </el-scrollbar>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import Fuse from 'fuse.js'
-import { getNormalPath } from '@/utils/ruoyi'
+import { getNormalPath } from '@/utils/manage'
 import { isHttp } from '@/utils/validate'
-import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 
-const search = ref('')
+const search = ref('');
-const options = ref([])
+const options = ref([]);
-const searchPool = ref([])
+const searchPool = ref([]);
-const activeIndex = ref(-1)
+const show = ref(false);
-const show = ref(false)
+const fuse = ref(undefined);
-const fuse = ref(undefined)
+const headerSearchSelectRef = ref(null);
-const headerSearchSelectRef = ref(null)
+const router = useRouter();
-const router = useRouter()
+const routes = computed(() => usePermissionStore().defaultRoutes);
-const theme = computed(() => useSettingsStore().theme)
-const routes = computed(() => usePermissionStore().defaultRoutes)
 
 function click() {
   show.value = !show.value
   if (show.value) {
     headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
-    options.value = searchPool.value
   }
-}
+};
-
 function close() {
   headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
-  search.value = ''
   options.value = []
   show.value = false
-  activeIndex.value = -1
 }
-
 function change(val) {
-  const path = val.path
+  const path = val.path;
-  const query = val.query
+  const query = val.query;
   if (isHttp(path)) {
     // http(s):// 路径新窗口打开
-    const pindex = path.indexOf("http")
+    const pindex = path.indexOf("http");
-    window.open(path.substr(pindex, path.length), "_blank")
+    window.open(path.substr(pindex, path.length), "_blank");
   } else {
     if (query) {
-      router.push({ path: path, query: JSON.parse(query) })
+      router.push({ path: path, query: JSON.parse(query) });
     } else {
       router.push(path)
     }
@@ -99,7 +64,6 @@ function change(val) {
     show.value = false
   })
 }
-
 function initFuse(list) {
   fuse.value = new Fuse(list, {
     shouldSort: true,
@@ -116,7 +80,6 @@ function initFuse(list) {
     }]
   })
 }
-
 // Filter out the routes that can be displayed in the sidebar
 // And generate the internationalized title
 function generateRoutes(routes, basePath = '', prefixTitle = []) {
@@ -125,17 +88,16 @@ function generateRoutes(routes, basePath = '', prefixTitle = []) {
   for (const r of routes) {
     // skip hidden router
     if (r.hidden) { continue }
-    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path
+    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
     const data = {
       path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-      title: [...prefixTitle],
+      title: [...prefixTitle]
-      icon: ''
     }
 
     if (r.meta && r.meta.title) {
       data.title = [...data.title, r.meta.title]
-      data.icon = r.meta.icon
+
-      if (r.redirect !== "noRedirect") {
+      if (r.redirect !== 'noRedirect') {
         // only push the routes with title
         // special case: need to exclude parent router without redirect
         res.push(data)
@@ -155,42 +117,30 @@ function generateRoutes(routes, basePath = '', prefixTitle = []) {
   }
   return res
 }
-
 function querySearch(query) {
-  activeIndex.value = -1
   if (query !== '') {
-    options.value = fuse.value.search(query).map((item) => item.item) ?? searchPool.value
+    options.value = fuse.value.search(query)
   } else {
-    options.value = searchPool.value
+    options.value = []
-  }
-}
-
-function activeStyle(index) {
-  if (index !== activeIndex.value) return {}
-  return {
-    "background-color": theme.value,
-    "color": "#fff"
-  }
-}
-
-function navigateResult(direction) {
-  if (direction === "up") {
-    activeIndex.value = activeIndex.value <= 0 ? options.value.length - 1 : activeIndex.value - 1
-  } else if (direction === "down") {
-    activeIndex.value = activeIndex.value >= options.value.length - 1 ? 0 : activeIndex.value + 1
-  }
-}
-
-function selectActiveResult() {
-  if (options.value.length > 0 && activeIndex.value >= 0) {
-    change(options.value[activeIndex.value])
   }
 }
 
 onMounted(() => {
+  searchPool.value = generateRoutes(routes.value);
+})
+
+watchEffect(() => {
   searchPool.value = generateRoutes(routes.value)
 })
 
+watch(show, (value) => {
+  if (value) {
+    document.body.addEventListener('click', close)
+  } else {
+    document.body.removeEventListener('click', close)
+  }
+})
+
 watch(searchPool, (list) => {
   initFuse(list)
 })
@@ -198,55 +148,40 @@ watch(searchPool, (list) => {
 
 <style lang='scss' scoped>
 .header-search {
+  font-size: 0 !important;
+
   .search-icon {
     cursor: pointer;
     font-size: 18px;
     vertical-align: middle;
   }
-}
 
-.result-wrap {	
+  .header-search-select {
-  height: 280px;
+    font-size: 18px;
-  margin: 6px 0;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
 
-  .search-item {
+    :deep(.el-input__inner) {
-    display: flex;
+      border-radius: 0;
-    height: 48px;
+      border: 0;
-    align-items: center;
+      padding-left: 0;
-    padding-right: 10px;
+      padding-right: 0;
-
+      box-shadow: none !important;
-    .left {
+      border-bottom: 1px solid #d9d9d9;
-      width: 60px;
+      vertical-align: middle;
-      text-align: center;
-
-      .menu-icon {
-        width: 18px;
-        height: 18px;
-      }
-    }
-
-    .search-info {
-      padding-left: 5px;
-      margin-top: 10px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      flex: 1;
-
-      .menu-title,
-      .menu-path {
-        height: 20px;
-      }
-      .menu-path {
-        color: #ccc;
-        font-size: 10px;
-      }
     }
   }
 
-  .search-item:hover {
+  &.show {
-    cursor: pointer;
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
   }
 }
 </style>

src/components/IconSelect/index.vue

@@ -30,11 +30,11 @@ const props = defineProps({
   activeIcon: {
     type: String
   }
-})
+});
 
-const iconName = ref('')
+const iconName = ref('');
-const iconList = ref(icons)
+const iconList = ref(icons);
-const emit = defineEmits(['selected'])
+const emit = defineEmits(['selected']);
 
 function filterIcons() {
   iconList.value = icons

src/components/IconSelect/requireIcons.js

@@ -1,8 +1,8 @@
 let icons = []
-const modules = import.meta.glob('./../../assets/icons/svg/*.svg')
+const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
 for (const path in modules) {
-  const p = path.split('assets/icons/svg/')[1].split('.svg')[0]
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
-  icons.push(p)
+  icons.push(p);
 }
 
 export default icons

src/components/ImagePreview/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { isExternal } from "@/utils/validate"
+import { isExternal } from "@/utils/validate";
 
 const props = defineProps({
   src: {
@@ -30,41 +30,41 @@ const props = defineProps({
     type: [Number, String],
     default: ""
   }
-})
+});
 
 const realSrc = computed(() => {
   if (!props.src) {
-    return
+    return;
   }
-  let real_src = props.src.split(",")[0]
+  let real_src = props.src.split(",")[0];
   if (isExternal(real_src)) {
-    return real_src
+    return real_src;
   }
-  return import.meta.env.VITE_APP_BASE_API + real_src
+  return import.meta.env.VITE_APP_BASE_API + real_src;
-})
+});
 
 const realSrcList = computed(() => {
   if (!props.src) {
-    return
+    return;
   }
-  let real_src_list = props.src.split(",")
+  let real_src_list = props.src.split(",");
-  let srcList = []
+  let srcList = [];
   real_src_list.forEach(item => {
     if (isExternal(item)) {
-      return srcList.push(item)
+      return srcList.push(item);
     }
-    return srcList.push(import.meta.env.VITE_APP_BASE_API + item)
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
-  })
+  });
-  return srcList
+  return srcList;
-})
+});
 
 const realWidth = computed(() =>
   typeof props.width == "string" ? props.width : `${props.width}px`
-)
+);
 
 const realHeight = computed(() =>
   typeof props.height == "string" ? props.height : `${props.height}px`
-)
+);
 </script>
 
 <style lang="scss" scoped>

src/components/ImageUpload/index.vue

@@ -2,12 +2,10 @@
   <div class="component-upload-image">
     <el-upload
       multiple
-      :disabled="disabled"
       :action="uploadImgUrl"
       list-type="picture-card"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
-      :data="data"
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
@@ -22,7 +20,7 @@
       <el-icon class="avatar-uploader-icon"><plus /></el-icon>
     </el-upload>
     <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip && !disabled">
+    <div class="el-upload__tip" v-if="showTip">
       请上传
       <template v-if="fileSize">
         大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -48,202 +46,166 @@
 </template>
 
 <script setup>
-import { getToken } from "@/utils/auth"
+import { getToken } from "@/utils/auth";
-import { isExternal } from "@/utils/validate"
+import { isExternal } from "@/utils/validate";
-import Sortable from 'sortablejs'
 
 const props = defineProps({
   modelValue: [String, Object, Array],
-  // 上传接口地址
-  action: {
-    type: String,
-    default: "/common/upload"
-  },
-  // 上传携带的参数
-  data: {
-    type: Object
-  },
   // 图片数量限制
   limit: {
     type: Number,
-    default: 5
+    default: 5,
   },
   // 大小限制(MB)
   fileSize: {
     type: Number,
-    default: 5
+    default: 5,
   },
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["png", "jpg", "jpeg"]
+    default: () => ["png", "jpg", "jpeg"],
   },
   // 是否显示提示
   isShowTip: {
     type: Boolean,
     default: true
   },
-  // 禁用组件（仅查看图片）
+});
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 拖动排序
-  drag: {
-    type: Boolean,
-    default: true
-  }
-})
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
-const emit = defineEmits()
+const emit = defineEmits();
-const number = ref(0)
+const number = ref(0);
-const uploadList = ref([])
+const uploadList = ref([]);
-const dialogImageUrl = ref("")
+const dialogImageUrl = ref("");
-const dialogVisible = ref(false)
+const dialogVisible = ref(false);
-const baseUrl = import.meta.env.VITE_APP_BASE_API
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传的图片服务器地址
+const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() })
+const headers = ref({ Authorization: "Bearer " + getToken() });
-const fileList = ref([])
+const fileList = ref([]);
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
-)
+);
 
 watch(() => props.modelValue, val => {
   if (val) {
     // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(",")
+    const list = Array.isArray(val) ? val : props.modelValue.split(",");
     // 然后将数组转为对象数组
     fileList.value = list.map(item => {
       if (typeof item === "string") {
         if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
-          item = { name: baseUrl + item, url: baseUrl + item }
+          item = { name: baseUrl + item, url: baseUrl + item };
         } else {
-          item = { name: item, url: item }
+          item = { name: item, url: item };
         }
       }
-      return item
+      return item;
-    })
+    });
   } else {
-    fileList.value = []
+    fileList.value = [];
-    return []
+    return [];
   }
-},{ deep: true, immediate: true })
+},{ deep: true, immediate: true });
 
 // 上传前loading加载
 function handleBeforeUpload(file) {
-  let isImg = false
+  let isImg = false;
   if (props.fileType.length) {
-    let fileExtension = ""
+    let fileExtension = "";
     if (file.name.lastIndexOf(".") > -1) {
-      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1)
+      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
     }
     isImg = props.fileType.some(type => {
-      if (file.type.indexOf(type) > -1) return true
+      if (file.type.indexOf(type) > -1) return true;
-      if (fileExtension && fileExtension.indexOf(type) > -1) return true
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-      return false
+      return false;
-    })
+    });
   } else {
-    isImg = file.type.indexOf("image") > -1
+    isImg = file.type.indexOf("image") > -1;
   }
   if (!isImg) {
-    proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`)
+    proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`);
-    return false
+    return false;
   }
   if (file.name.includes(',')) {
-    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
+    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!');
-    return false
+    return false;
   }
   if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
+      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
-      return false
+      return false;
     }
   }
-  proxy.$modal.loading("正在上传图片，请稍候...")
+  proxy.$modal.loading("正在上传图片，请稍候...");
-  number.value++
+  number.value++;
 }
 
 // 文件个数超出
 function handleExceed() {
-  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
 }
 
 // 上传成功回调
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName })
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
-    uploadedSuccessfully()
+    uploadedSuccessfully();
   } else {
-    number.value--
+    number.value--;
-    proxy.$modal.closeLoading()
+    proxy.$modal.closeLoading();
-    proxy.$modal.msgError(res.msg)
+    proxy.$modal.msgError(res.msg);
-    proxy.$refs.imageUpload.handleRemove(file)
+    proxy.$refs.imageUpload.handleRemove(file);
-    uploadedSuccessfully()
+    uploadedSuccessfully();
   }
 }
 
 // 删除图片
 function handleDelete(file) {
-  const findex = fileList.value.map(f => f.name).indexOf(file.name)
+  const findex = fileList.value.map(f => f.name).indexOf(file.name);
   if (findex > -1 && uploadList.value.length === number.value) {
-    fileList.value.splice(findex, 1)
+    fileList.value.splice(findex, 1);
-    emit("update:modelValue", listToString(fileList.value))
+    emit("update:modelValue", listToString(fileList.value));
-    return false
+    return false;
   }
 }
 
 // 上传结束处理
 function uploadedSuccessfully() {
   if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
-    uploadList.value = []
+    uploadList.value = [];
-    number.value = 0
+    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value))
+    emit("update:modelValue", listToString(fileList.value));
-    proxy.$modal.closeLoading()
+    proxy.$modal.closeLoading();
   }
 }
 
 // 上传失败
 function handleUploadError() {
-  proxy.$modal.msgError("上传图片失败")
+  proxy.$modal.msgError("上传图片失败");
-  proxy.$modal.closeLoading()
+  proxy.$modal.closeLoading();
 }
 
 // 预览
 function handlePictureCardPreview(file) {
-  dialogImageUrl.value = file.url
+  dialogImageUrl.value = file.url;
-  dialogVisible.value = true
+  dialogVisible.value = true;
 }
 
 // 对象转成指定字符串分隔
 function listToString(list, separator) {
-  let strs = ""
+  let strs = "";
-  separator = separator || ","
+  separator = separator || ",";
   for (let i in list) {
     if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
-      strs += list[i].url.replace(baseUrl, "") + separator
+      strs += list[i].url.replace(baseUrl, "") + separator;
     }
   }
-  return strs != "" ? strs.substr(0, strs.length - 1) : ""
+  return strs != "" ? strs.substr(0, strs.length - 1) : "";
 }
-
-// 初始化拖拽排序
-onMounted(() => {
-  if (props.drag && !props.disabled) {
-    nextTick(() => {
-      const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
-      Sortable.create(element, {
-        onEnd: (evt) => {
-          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
-          fileList.value.splice(evt.newIndex, 0, movedItem)
-          emit('update:modelValue', listToString(fileList.value))
-        }
-      })
-    })
-  }
-})
 </script>
 
 <style scoped lang="scss">
@@ -251,8 +213,4 @@ onMounted(() => {
 :deep(.hide .el-upload--picture-card) {
     display: none;
 }
-
-:deep(.el-upload.el-upload--picture-card.is-disabled) {
-  display: none !important;
-} 
 </style>

src/components/Pagination/index.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits()
+const emit = defineEmits();
 const currentPage = computed({
   get() {
     return props.page
@@ -76,7 +76,6 @@ const pageSize = computed({
     emit('update:limit', val)
   }
 })
-
 function handleSizeChange(val) {
   if (currentPage.value * val > props.total) {
     currentPage.value = 1
@@ -86,13 +85,13 @@ function handleSizeChange(val) {
     scrollTo(0, 800)
   }
 }
-
 function handleCurrentChange(val) {
   emit('pagination', { page: val, limit: pageSize.value })
   if (props.autoScroll) {
     scrollTo(0, 800)
   }
 }
+
 </script>
 
 <style scoped>

src/components/RightToolbar/index.vue

@@ -7,20 +7,15 @@
       <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="Object.keys(columns).length > 0">
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
         <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" />
           <template #dropdown>
             <el-dropdown-menu>
-              <!-- 全选/反选 按钮 -->
+              <template v-for="item in columns" :key="item.key">
-              <el-dropdown-item>
-                <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 列展示 </el-checkbox>
-              </el-dropdown-item>
-              <div class="check-line"></div>
-              <template v-for="(item, key) in columns" :key="item.key">
                 <el-dropdown-item>
-                  <el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
+                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
@@ -32,7 +27,7 @@
       <el-transfer
         :titles="['显示', '隐藏']"
         v-model="value"
-        :data="transferData"
+        :data="columns"
         @change="dataChange"
       ></el-transfer>
     </el-dialog>
@@ -44,119 +39,83 @@ const props = defineProps({
   /* 是否显示检索条件 */
   showSearch: {
     type: Boolean,
-    default: true
+    default: true,
   },
-  /* 显隐列信息（数组格式、对象格式） */
+  /* 显隐列信息 */
   columns: {
-    type: [Array, Object],
+    type: Array,
-    default: () => ({})
   },
   /* 是否显示检索图标 */
   search: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /* 显隐列类型（transfer穿梭框、checkbox复选框） */
   showColumnsType: {
     type: String,
-    default: "checkbox"
+    default: "checkbox",
   },
   /* 右外边距 */
   gutter: {
     type: Number,
-    default: 10
+    default: 10,
   },
 })
 
-const emits = defineEmits(['update:showSearch', 'queryTable'])
+const emits = defineEmits(['update:showSearch', 'queryTable']);
 
 // 显隐数据
-const value = ref([])
+const value = ref([]);
 // 弹出层标题
-const title = ref("显示/隐藏")
+const title = ref("显示/隐藏");
 // 是否显示弹出层
-const open = ref(false)
+const open = ref(false);
 
 const style = computed(() => {
-  const ret = {}
+  const ret = {};
   if (props.gutter) {
-    ret.marginRight = `${props.gutter / 2}px`
+    ret.marginRight = `${props.gutter / 2}px`;
   }
-  return ret
+  return ret;
-})
+});
-
-// 是否全选/半选 状态
-const isChecked = computed({
-  get: () => Array.isArray(props.columns) ? props.columns.every(col => col.visible) : Object.values(props.columns).every((col) => col.visible),
-  set: () => {}
-})
-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() {
-  emits("update:showSearch", !props.showSearch)
+  emits("update:showSearch", !props.showSearch);
 }
 
 // 刷新
 function refresh() {
-  emits("queryTable")
+  emits("queryTable");
 }
 
 // 右侧列表元素变化
 function dataChange(data) {
-  if (Array.isArray(props.columns)) {
+  for (let item in props.columns) {
-    for (let item in props.columns) {
+    const key = props.columns[item].key;
-      const key = props.columns[item].key
+    props.columns[item].visible = !data.includes(key);
-      props.columns[item].visible = !data.includes(key)
-    }
-  } else {
-    Object.keys(props.columns).forEach((key, index) => {
-      props.columns[key].visible = !data.includes(index)
-    })
   }
 }
 
 // 打开显隐列dialog
 function showColumn() {
-  open.value = true
+  open.value = true;
 }
 
-if (props.showColumnsType == "transfer") {
+if (props.showColumnsType == 'transfer') {
-  // transfer穿梭显隐列初始默认隐藏列
+  // 显隐列初始默认隐藏列
-  if (Array.isArray(props.columns)) {
+  for (let item in props.columns) {
-    for (let item in props.columns) {
+    if (props.columns[item].visible === false) {
-      if (props.columns[item].visible === false) {
+      value.value.push(parseInt(item));
-        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, key) {
+function checkboxChange(event, label) {
-  if (Array.isArray(props.columns)) {
+  props.columns.filter(item => item.label == label)[0].visible = event;
-    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>
 
 <style lang='scss' scoped>
@@ -172,10 +131,4 @@ function toggleCheckAll() {
   line-height: 30px;
   padding: 0 17px;
 }
-.check-line {
-  width: 90%;
-  height: 1px;
-  background-color: #ccc;
-  margin: 3px auto;
-}
 </style>

src/components/RuoYi/Doc/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <svg-icon icon-class="question" @click="goto" />
-  </div>
-</template>
-
-<script setup>
-const url = ref('http://doc.ruoyi.vip/ruoyi-vue')
-
-function goto() {
-  window.open(url.value)
-}
-</script>

src/components/RuoYi/Git/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <svg-icon icon-class="github" @click="goto" />
-  </div>
-</template>
-
-<script setup>
-const url = ref('https://gitee.com/y_project/RuoYi-Vue')
-
-function goto() {
-  window.open(url.value)
-}
-</script>

src/components/Screenfull/index.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { useFullscreen } from '@vueuse/core'
 
-const { isFullscreen, enter, exit, toggle } = useFullscreen()
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
 </script>
 
 <style lang='scss' scoped>

src/components/SizeSelect/index.vue

@@ -16,23 +16,23 @@
 </template>
 
 <script setup>
-import useAppStore from "@/store/modules/app"
+import useAppStore from "@/store/modules/app";
 
-const appStore = useAppStore()
+const appStore = useAppStore();
-const size = computed(() => appStore.size)
+const size = computed(() => appStore.size);
-const route = useRoute()
+const route = useRoute();
-const router = useRouter()
+const router = useRouter();
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 const sizeOptions = ref([
   { label: "较大", value: "large" },
   { label: "默认", value: "default" },
   { label: "稍小", value: "small" },
-])
+]);
 
 function handleSetSize(size) {
-  proxy.$modal.loading("正在设置布局大小，请稍候...")
+  proxy.$modal.loading("正在设置布局大小，请稍候...");
-  appStore.setSize(size)
+  appStore.setSize(size);
-  setTimeout("window.location.reload()", 1000)
+  setTimeout("window.location.reload()", 1000);
 }
 </script>
 

src/components/SvgIcon/svgicon.js

@@ -1,10 +1,10 @@
 import * as components from '@element-plus/icons-vue'
 
 export default {
-  install: (app) => {
+    install: (app) => {
-    for (const key in components) {
+        for (const key in components) {
-      const componentConfig = components[key]
+            const componentConfig = components[key];
-      app.component(componentConfig.name, componentConfig)
+            app.component(componentConfig.name, componentConfig);
-    }
+        }
-  }
+    },
-}
+};

src/components/TopNav/index.vue

@@ -40,127 +40,126 @@ import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 
 // 顶部栏初始数
-const visibleNumber = ref(null)
+const visibleNumber = ref(null);
 // 当前激活菜单的 index
-const currentIndex = ref(null)
+const currentIndex = ref(null);
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile']
+const hideList = ['/index', '/user/profile'];
 
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
-const route = useRoute()
+const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 
 // 主题颜色
-const theme = computed(() => settingsStore.theme)
+const theme = computed(() => settingsStore.theme);
 // 所有的路由信息
-const routers = computed(() => permissionStore.topbarRouters)
+const routers = computed(() => permissionStore.topbarRouters);
 
 // 顶部显示菜单
 const topMenus = computed(() => {
-  let topMenus = []
+  let topMenus = [];
   routers.value.map((menu) => {
     if (menu.hidden !== true) {
       // 兼容顶部栏一级菜单内部跳转
-      if (menu.path === '/' && menu.children) {
+      if (menu.path === "/") {
-          topMenus.push(menu.children[0])
+          topMenus.push(menu.children[0]);
       } else {
-          topMenus.push(menu)
+          topMenus.push(menu);
       }
     }
   })
-  return topMenus
+  return topMenus;
 })
 
 // 设置子路由
 const childrenMenus = computed(() => {
-  let childrenMenus = []
+  let childrenMenus = [];
   routers.value.map((router) => {
     for (let item in router.children) {
       if (router.children[item].parentPath === undefined) {
         if(router.path === "/") {
-          router.children[item].path = "/" + router.children[item].path
+          router.children[item].path = "/" + router.children[item].path;
         } else {
           if(!isHttp(router.children[item].path)) {
-            router.children[item].path = router.path + "/" + router.children[item].path
+            router.children[item].path = router.path + "/" + router.children[item].path;
           }
         }
-        router.children[item].parentPath = router.path
+        router.children[item].parentPath = router.path;
       }
-      childrenMenus.push(router.children[item])
+      childrenMenus.push(router.children[item]);
     }
   })
-  return constantRoutes.concat(childrenMenus)
+  return constantRoutes.concat(childrenMenus);
 })
 
 // 默认激活的菜单
 const activeMenu = computed(() => {
-  const path = route.path
+  const path = route.path;
-  let activePath = path
+  let activePath = path;
   if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
-    const tmpPath = path.substring(1, path.length)
+    const tmpPath = path.substring(1, path.length);
     if (!route.meta.link) {
-      activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
+      activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-      appStore.toggleSideBarHide(false)
+      appStore.toggleSideBarHide(false);
     }
   } else if(!route.children) {
-    activePath = path
+    activePath = path;
-    appStore.toggleSideBarHide(true)
+    appStore.toggleSideBarHide(true);
   }
-  activeRoutes(activePath)
+  activeRoutes(activePath);
-  return activePath
+  return activePath;
 })
 
 function setVisibleNumber() {
-  const width = document.body.getBoundingClientRect().width / 3
+  const width = document.body.getBoundingClientRect().width / 3;
-  visibleNumber.value = parseInt(width / 85)
+  visibleNumber.value = parseInt(width / 85);
 }
 
 function handleSelect(key, keyPath) {
-  currentIndex.value = key
+  currentIndex.value = key;
-  const route = routers.value.find(item => item.path === key)
+  const route = routers.value.find(item => item.path === key);
   if (isHttp(key)) {
     // http(s):// 路径新窗口打开
-    window.open(key, "_blank")
+    window.open(key, "_blank");
   } else if (!route || !route.children) {
     // 没有子路由路径内部打开
-    const routeMenu = childrenMenus.value.find(item => item.path === key)
+    const routeMenu = childrenMenus.value.find(item => item.path === key);
     if (routeMenu && routeMenu.query) {
-      let query = JSON.parse(routeMenu.query)
+      let query = JSON.parse(routeMenu.query);
-      router.push({ path: key, query: query })
+      router.push({ path: key, query: query });
     } else {
-      router.push({ path: key })
+      router.push({ path: key });
     }
-    appStore.toggleSideBarHide(true)
+    appStore.toggleSideBarHide(true);
   } else {
     // 显示左侧联动菜单
-    activeRoutes(key)
+    activeRoutes(key);
-    appStore.toggleSideBarHide(false)
+    appStore.toggleSideBarHide(false);
   }
 }
 
 function activeRoutes(key) {
-  let routes = []
+  let routes = [];
   if (childrenMenus.value && childrenMenus.value.length > 0) {
     childrenMenus.value.map((item) => {
       if (key == item.parentPath || (key == "index" && "" == item.path)) {
-        routes.push(item)
+        routes.push(item);
       }
-    })
+    });
   }
   if(routes.length > 0) {
-    permissionStore.setSidebarRouters(routes)
+    permissionStore.setSidebarRouters(routes);
   } else {
-    appStore.toggleSideBarHide(true)
+    appStore.toggleSideBarHide(true);
   }
-  return routes
+  return routes;
 }
 
 onMounted(() => {
   window.addEventListener('resize', setVisibleNumber)
 })
-
 onBeforeUnmount(() => {
   window.removeEventListener('resize', setVisibleNumber)
 })
@@ -175,7 +174,7 @@ onMounted(() => {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #303133 !important;
+  color: #999093 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
@@ -190,7 +189,7 @@ onMounted(() => {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
-  color: #303133 !important;
+  color: #999093 !important;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
@@ -212,4 +211,6 @@ onMounted(() => {
   margin-left: 8px;
   margin-top: 0px;
 }
+
+
 </style>

src/components/iFrame/index.vue

@@ -22,10 +22,10 @@ const url = computed(() => props.src)
 
 onMounted(() => {
   setTimeout(() => {
-    loading.value = false
+    loading.value = false;
-  }, 300)
+  }, 300);
   window.onresize = function temp() {
-    height.value = document.documentElement.clientHeight - 94.5 + "px;"
+    height.value = document.documentElement.clientHeight - 94.5 + "px;";
-  }
+  };
 })
 </script>

src/layout/components/AppMain.vue

@@ -8,12 +8,10 @@
       </transition>
     </router-view>
     <iframe-toggle />
-    <copyright />
   </section>
 </template>
 
 <script setup>
-import copyright from "./Copyright/index"
 import iframeToggle from "./IframeToggle/index"
 import useTagsViewStore from '@/store/modules/tagsView'
 
@@ -24,7 +22,7 @@ onMounted(() => {
   addIframe()
 })
 
-watchEffect(() => {
+watch((route) => {
   addIframe()
 })
 
@@ -42,21 +40,11 @@ function addIframe() {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: #eeeeee;
 }
 
 .fixed-header + .app-main {
-  overflow-y: auto;
+  padding-top: 50px;
-  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 {
@@ -66,47 +54,19 @@ function addIframe() {
   }
 
   .fixed-header + .app-main {
-    margin-top: 84px;
+    padding-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;
@@ -121,3 +81,4 @@ function addIframe() {
   border-radius: 3px;
 }
 </style>
+

src/layout/components/Copyright/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <footer v-if="visible" class="copyright">
-    <span>{{ content }}</span>
-  </footer>
-</template>
-
-<script setup>
-import useSettingsStore from '@/store/modules/settings'
-
-const settingsStore = useSettingsStore()
-
-const visible = computed(() => settingsStore.footerVisible)
-const content = computed(() => settingsStore.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>

src/layout/components/IframeToggle/index.vue

@@ -9,17 +9,17 @@
 </template>
 
 <script setup>
-import InnerLink from "../InnerLink/index"
+import InnerLink from "../InnerLink/index";
-import useTagsViewStore from "@/store/modules/tagsView"
+import useTagsViewStore from "@/store/modules/tagsView";
 
-const route = useRoute()
+const route = useRoute();
-const tagsViewStore = useTagsViewStore()
+const tagsViewStore = useTagsViewStore();
 
 function iframeUrl(url, query) {
   if (Object.keys(query).length > 0) {
-    let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&")
+    let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
-    return url + "?" + params
+    return url + "?" + params;
   }
-  return url
+  return url;
 }
 </script>

src/layout/components/InnerLink/index.vue

@@ -1,10 +1,9 @@
 <template>
-  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
+  <div :style="'height:' + height">
     <iframe
       :id="iframeId"
       style="width: 100%; height: 100%"
       :src="src"
-      ref="iframeRef"
       frameborder="no"
     ></iframe>
   </div>
@@ -19,17 +18,7 @@ const props = defineProps({
   iframeId: {
     type: String
   }
-})
+});
 
-const loading = ref(true)
+const height = ref(document.documentElement.clientHeight - 94.5 + "px");
-const height = ref(document.documentElement.clientHeight - 94.5 + 'px')
-const iframeRef = ref(null)
-
-onMounted(() => {
-  if (iframeRef.value) {
-    iframeRef.value.onload = () => {
-      loading.value = false
-    }
-  }
-})
 </script>

src/layout/components/Navbar.vue

@@ -1,25 +1,13 @@
 <template>
-  <div class="navbar" :class="'nav' + settingsStore.navType">
+  <div class="navbar">
     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
+    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
+    <top-nav v-if="settingsStore.topNav" 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'">
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="主题模式" effect="dark" placement="bottom">
@@ -33,26 +21,27 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
-
+      <div class="avatar-container">
-      <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
+          <div class="avatar-wrapper">
-          <img :src="userStore.avatar" class="user-avatar" />
+            <img :src="userStore.avatar" class="user-avatar" />
-          <span class="user-nickname"> {{ userStore.nickName }} </span>
+            <el-icon><caret-bottom /></el-icon>
-        </div>
+          </div>
-        <template #dropdown>
+          <template #dropdown>
-          <el-dropdown-menu>
+            <el-dropdown-menu>
-            <router-link to="/user/profile">
+              <router-link to="/user/profile">
-              <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
+              </router-link>
-            <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                 <span>布局设置</span>
               </el-dropdown-item>
-            <el-dropdown-item divided command="logout">
+              <el-dropdown-item divided command="logout">
-              <span>退出登录</span>
+                <span>退出登录</span>
-            </el-dropdown-item>
+              </el-dropdown-item>
-          </el-dropdown-menu>
+            </el-dropdown-menu>
-        </template>
+          </template>
-      </el-dropdown>
+        </el-dropdown>
+      </div>
     </div>
   </div>
 </template>
@@ -61,14 +50,10 @@
 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'
 import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
@@ -84,13 +69,13 @@ function toggleSideBar() {
 function handleCommand(command) {
   switch (command) {
     case "setLayout":
-      setLayout()
+      setLayout();
-      break
+      break;
     case "logout":
-      logout()
+      logout();
-      break
+      break;
     default:
-      break
+      break;
   }
 }
 
@@ -101,85 +86,36 @@ function logout() {
     type: 'warning'
   }).then(() => {
     userStore.logOut().then(() => {
-      location.href = '/index'
+      location.href = '/index';
     })
-  }).catch(() => { })
+  }).catch(() => { });
 }
 
 const emits = defineEmits(['setLayout'])
 function setLayout() {
-  emits('setLayout')
+  emits('setLayout');
 }
 
-async function toggleTheme(event) {
+function toggleTheme() {
-  const x = event?.clientX || window.innerWidth / 2
+  settingsStore.toggleTheme()
-  const y = event?.clientY || window.innerHeight / 2
-  const wasDark = settingsStore.isDark
-
-  const isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  const isSupported = document.startViewTransition && !isReducedMotion
-
-  if (!isSupported) {
-    settingsStore.toggleTheme()
-    return
-  }
-
-  try {
-    const transition = document.startViewTransition(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 10))
-      settingsStore.toggleTheme()
-      await nextTick()
-    })
-    await transition.ready
-
-    const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
-    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-    document.documentElement.animate(
-      {
-        clipPath: !wasDark ? [...clipPath].reverse() : clipPath
-      }, {
-        duration: 650,
-        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-        fill: "forwards",
-        pseudoElement: !wasDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
-      }
-    )
-    await transition.finished
-  } catch (error) {
-    console.warn("View transition failed, falling back to immediate toggle:", error)
-    settingsStore.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);
@@ -187,7 +123,7 @@ async function toggleTheme(event) {
   }
 
   .breadcrumb-container {
-    flex-shrink: 0;
+    float: left;
   }
 
   .topmenu-container {
@@ -195,26 +131,16 @@ async function toggleTheme(event) {
     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;
@@ -225,7 +151,7 @@ async function toggleTheme(event) {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: var(--navbar-text);
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -252,28 +178,17 @@ async function toggleTheme(event) {
     }
 
     .avatar-container {
-      margin-right: 0px;
+      margin-right: 40px;
-      padding-right: 0px;
 
       .avatar-wrapper {
-        margin-top: 10px;
+        margin-top: 5px;
-        right: 8px;
         position: relative;
 
         .user-avatar {
           cursor: pointer;
-          width: 30px;
+          width: 40px;
-          height: 30px;
+          height: 40px;
-          margin-right: 8px;
+          border-radius: 10px;
-          border-radius: 50%;
-        }
-
-        .user-nickname{
-          position: relative;
-          left: 0px;
-          bottom: 10px;
-          font-size: 14px;
-          font-weight: bold;
         }
 
         i {

src/layout/components/Settings/index.vue

@@ -1,26 +1,5 @@
 <template>
-  <el-drawer v-model="showSettings" :withHeader="false" :lock-scroll="false" direction="rtl" size="300px">
+  <el-drawer v-model="showSettings" :withHeader="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>
@@ -57,16 +36,16 @@
     <h3 class="drawer-title">系统布局配置</h3>
 
     <div class="drawer-item">
-      <span>开启 Tags-Views</span>
+      <span>开启 TopNav</span>
       <span class="comp-style">
-        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+        <el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>显示页签图标</span>
+      <span>开启 Tags-Views</span>
       <span class="comp-style">
-        <el-switch v-model="settingsStore.tagsIcon" :disabled="!settingsStore.tagsView" class="drawer-switch" />
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
       </span>
     </div>
 
@@ -87,14 +66,7 @@
     <div class="drawer-item">
       <span>动态标题</span>
       <span class="comp-style">
-        <el-switch v-model="settingsStore.dynamicTitle" @change="dynamicTitleChange" class="drawer-switch" />
+        <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" />
-      </span>
-    </div>
-
-    <div class="drawer-item">
-      <span>底部版权</span>
-      <span class="comp-style">
-        <el-switch v-model="settingsStore.footerVisible" class="drawer-switch" />
       </span>
     </div>
 
@@ -107,90 +79,70 @@
 </template>
 
 <script setup>
+import variables from '@/assets/styles/variables.module.scss'
+import axios from 'axios'
+import { ElLoading, ElMessage } from 'element-plus'
+import { useDynamicTitle } from '@/utils/dynamicTitle'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 import { handleThemeStyle } from '@/utils/theme'
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
-const showSettings = ref(false)
+const showSettings = ref(false);
-const navType = ref(settingsStore.navType)
+const theme = ref(settingsStore.theme);
-const theme = ref(settingsStore.theme)
+const sideTheme = ref(settingsStore.sideTheme);
-const sideTheme = ref(settingsStore.sideTheme)
+const storeSettings = computed(() => settingsStore);
-const storeSettings = computed(() => settingsStore)
+const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
-const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
 
-/** 是否需要dynamicTitle */
+/** 是否需要topnav */
-function dynamicTitleChange() {
+function topNavChange(val) {
-  useSettingsStore().setTitle(useSettingsStore().title)
+  if (!val) {
+    appStore.toggleSideBarHide(false);
+    permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
+  }
 }
 
 function themeChange(val) {
-  settingsStore.theme = val
+  settingsStore.theme = val;
-  handleThemeStyle(val)
+  handleThemeStyle(val);
 }
 
 function handleTheme(val) {
-  settingsStore.sideTheme = val
+  settingsStore.sideTheme = val;
-  sideTheme.value = 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("正在保存到本地，请稍候...")
+  proxy.$modal.loading("正在保存到本地，请稍候...");
   let layoutSetting = {
-    "navType": storeSettings.value.navType,
+    "topNav": storeSettings.value.topNav,
     "tagsView": storeSettings.value.tagsView,
-    "tagsIcon": storeSettings.value.tagsIcon,
     "fixedHeader": storeSettings.value.fixedHeader,
     "sidebarLogo": storeSettings.value.sidebarLogo,
     "dynamicTitle": storeSettings.value.dynamicTitle,
-    "footerVisible": storeSettings.value.footerVisible,
     "sideTheme": storeSettings.value.sideTheme,
     "theme": storeSettings.value.theme
-  }
+  };
-  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting))
+  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
   setTimeout(proxy.$modal.closeLoading(), 1000)
 }
 
 function resetSetting() {
-  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...")
+  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
   localStorage.removeItem("layout-setting")
   setTimeout("window.location.reload()", 1000)
 }
 
 function openSetting() {
-  showSettings.value = true
+  showSettings.value = true;
 }
 
 defineExpose({
-  openSetting
+  openSetting,
 })
 </script>
 
@@ -249,67 +201,4 @@ 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

@@ -25,34 +25,30 @@ defineProps({
   }
 })
 
-const title = import.meta.env.VITE_APP_TITLE
+const title = import.meta.env.VITE_APP_TITLE;
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
-const sideTheme = computed(() => settingsStore.sideTheme)
+const sideTheme = computed(() => settingsStore.sideTheme);
 
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
+    return 'var(--sidebar-bg)';
   }
-  if (settingsStore.navType == 3) {
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
-    return variables.menuLightBg
+});
-  }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
-})
 
 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return 'var(--sidebar-text)';
   }
-  if (settingsStore.navType == 3) {
+  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
-    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;
 }
@@ -64,6 +60,7 @@ const getLogoTextColor = computed(() => {
 
 .sidebar-logo-container {
   position: relative;
+  width: 100%;
   height: 50px;
   line-height: 50px;
   background: v-bind(getLogoBackground);

src/layout/components/Sidebar/SidebarItem.vue

@@ -30,7 +30,7 @@
 <script setup>
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link'
-import { getNormalPath } from '@/utils/ruoyi'
+import { getNormalPath } from '@/utils/manage'
 
 const props = defineProps({
   // route object
@@ -48,11 +48,11 @@ const props = defineProps({
   }
 })
 
-const onlyOneChild = ref({})
+const onlyOneChild = ref({});
 
 function hasOneShowingChild(children = [], parent) {
   if (!children) {
-    children = []
+    children = [];
   }
   const showingChildren = children.filter(item => {
     if (item.hidden) {
@@ -74,7 +74,7 @@ function hasOneShowingChild(children = [], parent) {
   }
 
   return false
-}
+};
 
 function resolvePath(routePath, routeQuery) {
   if (isExternal(routePath)) {
@@ -84,7 +84,7 @@ function resolvePath(routePath, routeQuery) {
     return props.basePath
   }
   if (routeQuery) {
-    let query = JSON.parse(routeQuery)
+    let query = JSON.parse(routeQuery);
     return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
   }
   return getNormalPath(props.basePath + '/' + routePath)
@@ -92,9 +92,9 @@ function resolvePath(routePath, routeQuery) {
 
 function hasTitle(title){
   if (title.length > 5) {
-    return title
+    return title;
   } else {
-    return ""
+    return "";
   }
 }
 </script>

src/layout/components/Sidebar/index.vue

@@ -32,40 +32,40 @@ import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 
-const route = useRoute()
+const route = useRoute();
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 
-const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
-const showLogo = computed(() => settingsStore.sidebarLogo)
+const showLogo = computed(() => settingsStore.sidebarLogo);
-const sideTheme = computed(() => settingsStore.sideTheme)
+const sideTheme = computed(() => settingsStore.sideTheme);
-const theme = computed(() => settingsStore.theme)
+const theme = computed(() => settingsStore.theme);
-const isCollapse = computed(() => !appStore.sidebar.opened)
+const isCollapse = computed(() => !appStore.sidebar.opened);
 
 // 获取菜单背景色
 const getMenuBackground = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
+    return 'var(--sidebar-bg)';
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
-})
+});
 
 // 获取菜单文字颜色
 const getMenuTextColor = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return 'var(--sidebar-text)';
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
+  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText;
-})
+});
 
 const activeMenu = computed(() => {
-  const { meta, path } = route
+  const { meta, path } = route;
   if (meta.activeMenu) {
-    return meta.activeMenu
+    return meta.activeMenu;
   }
-  return path
+  return path;
-})
+});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/TagsView/ScrollPane.vue

@@ -12,10 +12,10 @@
 <script setup>
 import useTagsViewStore from '@/store/modules/tagsView'
 
-const tagAndTagSpacing = ref(4)
+const tagAndTagSpacing = ref(4);
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
 
-const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef)
+const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
 
 onMounted(() => {
   scrollWrapper.value.addEventListener('scroll', emitScroll, true)
@@ -27,7 +27,7 @@ onBeforeUnmount(() => {
 
 function handleScroll(e) {
   const eventDelta = e.wheelDelta || -e.deltaY * 40
-  const $scrollWrapper = scrollWrapper.value
+  const $scrollWrapper = scrollWrapper.value;
   $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
 }
 
@@ -37,12 +37,12 @@ const emitScroll = () => {
 }
 
 const tagsViewStore = useTagsViewStore()
-const visitedViews = computed(() => tagsViewStore.visitedViews)
+const visitedViews = computed(() => tagsViewStore.visitedViews);
 
 function moveToTarget(currentTag) {
   const $container = proxy.$refs.scrollContainer.$el
   const $containerWidth = $container.offsetWidth
-  const $scrollWrapper = scrollWrapper.value
+  const $scrollWrapper = scrollWrapper.value;
 
   let firstTag = null
   let lastTag = null
@@ -58,17 +58,17 @@ function moveToTarget(currentTag) {
   } else if (lastTag === currentTag) {
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
   } else {
-    const tagListDom = document.getElementsByClassName('tags-view-item')
+    const tagListDom = document.getElementsByClassName('tags-view-item');
     const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
     let prevTag = null
     let nextTag = null
     for (const k in tagListDom) {
       if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
         if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
-          prevTag = tagListDom[k]
+          prevTag = tagListDom[k];
         }
         if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
-          nextTag = tagListDom[k]
+          nextTag = tagListDom[k];
         }
       }
     }

src/layout/components/TagsView/index.vue

@@ -1,23 +1,42 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
+      <div
         v-for="tag in visitedViews"
         :key="tag.path"
-        :data-path="tag.path"
+        class="tags-view-box"
-        :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        class="tags-view-item"
-        :style="activeStyle(tag)"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
       >
-        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
+        <svg
-        {{ tag.title }}
+          class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          height="7"
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+          width="7"
-        </span>
+          :style="activeFill(tag)"
-      </router-link>
+        >
+          <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
+        </svg>
+        <router-link
+          :data-path="tag.path"
+          :class="isActive(tag) ? 'active' : ''"
+          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+          class="tags-view-item"
+          :style="activeStyle(tag)"
+          @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+          @contextmenu.prevent="openMenu(tag, $event)"
+        >
+          {{ tag.title }}
+          <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+            <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+          </span>
+        </router-link>
+        <svg
+          class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
+          height="7"
+          width="7"
+          :style="activeFill(tag)"
+        >
+          <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
+        </svg>
+      </div>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">
@@ -44,26 +63,25 @@
 
 <script setup>
 import ScrollPane from './ScrollPane'
-import { getNormalPath } from '@/utils/ruoyi'
+import { getNormalPath } from '@/utils/manage'
 import useTagsViewStore from '@/store/modules/tagsView'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 
-const visible = ref(false)
+const visible = ref(false);
-const top = ref(0)
+const top = ref(0);
-const left = ref(0)
+const left = ref(0);
-const selectedTag = ref({})
+const selectedTag = ref({});
-const affixTags = ref([])
+const affixTags = ref([]);
-const scrollPaneRef = ref(null)
+const scrollPaneRef = ref(null);
 
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
-const route = useRoute()
+const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 
-const visitedViews = computed(() => useTagsViewStore().visitedViews)
+const visitedViews = computed(() => useTagsViewStore().visitedViews);
-const routes = computed(() => usePermissionStore().routes)
+const routes = computed(() => usePermissionStore().routes);
-const theme = computed(() => useSettingsStore().theme)
+const theme = computed(() => useSettingsStore().theme);
-const tagsIcon = computed(() => useSettingsStore().tagsIcon)
 
 watch(route, () => {
   addTags()
@@ -88,11 +106,18 @@ function isActive(r) {
 }
 
 function activeStyle(tag) {
-  if (!isActive(tag)) return {}
+  if (!isActive(tag)) return {};
   return {
     "background-color": theme.value,
     "border-color": theme.value
-  }
+  };
+}
+
+function activeFill(tag) {
+  if (!isActive(tag)) return {};
+  return {
+    "fill": theme.value,
+  };
 }
 
 function isAffix(tag) {
@@ -138,8 +163,8 @@ function filterAffixTags(routes, basePath = '') {
 }
 
 function initTags() {
-  const res = filterAffixTags(routes.value)
+  const res = filterAffixTags(routes.value);
-  affixTags.value = res
+  affixTags.value = res;
   for (const tag of res) {
     // Must have tag name
     if (tag.name) {
@@ -159,7 +184,7 @@ function moveToCurrentTag() {
   nextTick(() => {
     for (const r of visitedViews.value) {
       if (r.path === route.path) {
-        scrollPaneRef.value.moveToTarget(r)
+        scrollPaneRef.value.moveToTarget(r);
         // when query is different then update
         if (r.fullPath !== route.fullPath) {
           useTagsViewStore().updateVisitedView(route)
@@ -170,9 +195,9 @@ function moveToCurrentTag() {
 }
 
 function refreshSelectedTag(view) {
-  proxy.$tab.refreshPage(view)
+  proxy.$tab.refreshPage(view);
   if (route.meta.link) {
-    useTagsViewStore().delIframeView(route)
+    useTagsViewStore().delIframeView(route);
   }
 }
 
@@ -201,7 +226,7 @@ function closeLeftTags() {
 }
 
 function closeOthersTags() {
-  router.push(selectedTag.value).catch(() => { })
+  router.push(selectedTag.value).catch(() => { });
   proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
     moveToCurrentTag()
   })
@@ -268,20 +293,14 @@ function handleScroll() {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
 
   .tags-view-wrapper {
-    .tags-view-item {
+    .tags-view-box{
       display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid var(--tags-item-border, #d8dce5);
-      color: var(--tags-item-text, #495060);
-      background: var(--tags-item-bg, #fff);
-      padding: 0 8px;
-      font-size: 12px;
       margin-left: 5px;
-      margin-top: 4px;
 
+      .tabs-chrome__background-before,.tabs-chrome__background-after{
+        vertical-align: bottom;
+        fill: var(--tags-item-bg, #fff);
+      }
       &:first-of-type {
         margin-left: 15px;
       }
@@ -289,11 +308,27 @@ function handleScroll() {
       &:last-of-type {
         margin-right: 15px;
       }
+    }
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      // border: 1px solid var(--tags-item-border, #d8dce5);
+      color: var(--tags-item-text, #495060);
+      background: var(--tags-item-bg, #fff);
+      padding: 0 8px;
+      font-size: 12px;
+      margin-top: 7px;
+
+      
 
       &.active {
         background-color: #42b983;
         color: #fff;
         border-color: #42b983;
+        border-radius: 4px 4px 0 0;
 
         &::before {
           content: '';
@@ -309,10 +344,6 @@ function handleScroll() {
     }
   }
 
-  .tags-view-item.active.has-icon::before {
-    content: none !important;
-  }
-
   .contextmenu {
     margin: 0;
     background: var(--el-bg-color-overlay, #fff);

src/layout/components/TopBar/index.vue

@@ -1,99 +0,0 @@
-<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

@@ -17,16 +17,18 @@
 import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { AppMain, Navbar, Settings, TagsView } from './components'
+import defaultSettings from '@/settings'
+
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 
 const settingsStore = useSettingsStore()
-const theme = computed(() => settingsStore.theme)
+const theme = computed(() => settingsStore.theme);
-const sideTheme = computed(() => settingsStore.sideTheme)
+const sideTheme = computed(() => settingsStore.sideTheme);
-const sidebar = computed(() => useAppStore().sidebar)
+const sidebar = computed(() => useAppStore().sidebar);
-const device = computed(() => useAppStore().device)
+const device = computed(() => useAppStore().device);
-const needTagsView = computed(() => settingsStore.tagsView)
+const needTagsView = computed(() => settingsStore.tagsView);
-const fixedHeader = computed(() => settingsStore.fixedHeader)
+const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
@@ -35,8 +37,8 @@ const classObj = computed(() => ({
   mobile: device.value === 'mobile'
 }))
 
-const { width, height } = useWindowSize()
+const { width, height } = useWindowSize();
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watch(() => device.value, () => {
   if (device.value === 'mobile' && sidebar.value.opened) {
@@ -57,18 +59,18 @@ function handleClickOutside() {
   useAppStore().closeSideBar({ withoutAnimation: false })
 }
 
-const settingRef = ref(null)
+const settingRef = ref(null);
 function setLayout() {
-  settingRef.value.openSetting()
+  settingRef.value.openSetting();
 }
 </script>
 
 <style lang="scss" scoped>
-@use "@/assets/styles/mixin.scss" as mix;
+  @import "@/assets/styles/mixin.scss";
-@use "@/assets/styles/variables.module.scss" as vars;
+  @import "@/assets/styles/variables.module.scss";
 
 .app-wrapper {
-  @include mix.clearfix;
+  @include clearfix;
   position: relative;
   height: 100%;
   width: 100%;
@@ -79,11 +81,6 @@ function setLayout() {
   }
 }
 
-.main-container:has(.fixed-header) {
-  height: 100vh;
-  overflow: hidden;
-}
-
 .drawer-bg {
   background: #000;
   opacity: 0.3;
@@ -99,7 +96,7 @@ function setLayout() {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{vars.$base-sidebar-width});
+  width: calc(100% - #{$base-sidebar-width});
   transition: width 0.28s;
 }
 

src/main.js

@@ -27,7 +27,7 @@ import './permission' // permission control
 
 import { useDict } from '@/utils/dict'
 import { getConfigKey } from "@/api/system/config"
-import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
+import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/manage'
 
 // 分页组件
 import Pagination from '@/components/Pagination'

src/plugins/download.js

@@ -3,7 +3,7 @@ import { ElLoading, ElMessage } from 'element-plus'
 import { saveAs } from 'file-saver'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { blobValidate } from '@/utils/ruoyi'
+import { blobValidate } from '@/utils/manage'
 
 const baseURL = import.meta.env.VITE_APP_BASE_API
 let downloadLoadingInstance

src/settings.js

@@ -3,11 +3,15 @@ export default {
    * 网页标题
    */
   title: import.meta.env.VITE_APP_TITLE,
+  /**
+   * 顶部标题
+   */
+  topNav: true,
 
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
 
   /**
    * 是否系统布局配置

src/store/modules/settings.js

@@ -5,7 +5,7 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
-const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
+const { sideTheme, showSettings, navType, tagsView,topNav, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 
@@ -14,6 +14,7 @@ const useSettingsStore = defineStore(
   {
     state: () => ({
       title: '',
+      topNav: storageSetting.topNav ===undefined ? topNav:storageSetting.topNav,
       theme: storageSetting.theme || '#409EFF',
       sideTheme: storageSetting.sideTheme || sideTheme,
       showSettings: showSettings,

src/utils/auth.js

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const userIdKey = 'Admin-UserId'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -13,3 +14,9 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+export function setUserId(userId){
+  return Cookies.set(userIdKey, userId)
+}
+export function getUserId(){
+  return Cookies.get(userIdKey)
+}

src/utils/dict.js

@@ -5,20 +5,20 @@ import { getDicts } from '@/api/system/dict/data'
  * 获取字典数据
  */
 export function useDict(...args) {
-  const res = ref({})
+  const res = ref({});
   return (() => {
     args.forEach((dictType, index) => {
-      res.value[dictType] = []
+      res.value[dictType] = [];
-      const dicts = useDictStore().getDict(dictType)
+      const dicts = useDictStore().getDict(dictType);
       if (dicts) {
-        res.value[dictType] = dicts
+        res.value[dictType] = dicts;
       } else {
         getDicts(dictType).then(resp => {
           res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
-          useDictStore().setDict(dictType, res.value[dictType])
+          useDictStore().setDict(dictType, res.value[dictType]);
         })
       }
     })
-    return toRefs(res.value)
+    return toRefs(res.value);
   })()
 }

src/utils/dynamicTitle.js

@@ -1,3 +1,4 @@
+import store from '@/store'
 import defaultSettings from '@/settings'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -5,10 +6,10 @@ import useSettingsStore from '@/store/modules/settings'
  * 动态修改标题
  */
 export function useDynamicTitle() {
-  const settingsStore = useSettingsStore()
+  const settingsStore = useSettingsStore();
   if (settingsStore.dynamicTitle) {
-    document.title = settingsStore.title + ' - ' + defaultSettings.title
+    document.title = settingsStore.title + ' - ' + defaultSettings.title;
   } else {
-    document.title = defaultSettings.title
+    document.title = defaultSettings.title;
   }
 }

src/utils/generator/drawingDefalut.js

@@ -0,0 +1,29 @@
+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

@@ -1,37 +0,0 @@
-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/utils/generator/html.js

@@ -318,7 +318,7 @@ function buildElRadioGroupChild(conf) {
   if (conf.options && conf.options.length) {
     const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio'
     const border = conf.border ? 'border' : ''
-    children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :value="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
+    children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
   }
   return children.join('\n')
 }
@@ -328,7 +328,7 @@ function buildElCheckboxGroupChild(conf) {
   if (conf.options && conf.options.length) {
     const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
     const border = conf.border ? 'border' : ''
-    children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :value="item.label" :disabled="item.disabled" ${border} />`)
+    children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
   }
   return children.join('\n')
 }

src/utils/index.js

@@ -1,10 +1,10 @@
-import { parseTime } from './ruoyi'
+import { parseTime } from './manage'
 
 /**
  * 表格时间格式化
  */
 export function formatDate(cellValue) {
-  if (cellValue == null || cellValue == "") return ""
+  if (cellValue == null || cellValue == "") return "";
   var date = new Date(cellValue) 
   var year = date.getFullYear()
   var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1

src/utils/manage.js

@@ -1,6 +1,6 @@
 /**
  * 通用js方法封装处理
- * Copyright (c) 2019 ruoyi
+ * Copyright (c) 2019 
  */
 
 // 日期格式化
@@ -16,7 +16,7 @@ export function parseTime(time, pattern) {
     if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
       time = parseInt(time)
     } else if (typeof time === 'string') {
-      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '')
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
     }
     if ((typeof time === 'number') && (time.toString().length === 10)) {
       time = time * 1000
@@ -47,89 +47,89 @@ export function parseTime(time, pattern) {
 // 表单重置
 export function resetForm(refName) {
   if (this.$refs[refName]) {
-    this.$refs[refName].resetFields()
+    this.$refs[refName].resetFields();
   }
 }
 
 // 添加日期范围
 export function addDateRange(params, dateRange, propName) {
-  let search = params
+  let search = params;
-  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
+  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
-  dateRange = Array.isArray(dateRange) ? dateRange : []
+  dateRange = Array.isArray(dateRange) ? dateRange : [];
   if (typeof (propName) === 'undefined') {
-    search.params['beginTime'] = dateRange[0]
+    search.params['beginTime'] = dateRange[0];
-    search.params['endTime'] = dateRange[1]
+    search.params['endTime'] = dateRange[1];
   } else {
-    search.params['begin' + propName] = dateRange[0]
+    search.params['begin' + propName] = dateRange[0];
-    search.params['end' + propName] = dateRange[1]
+    search.params['end' + propName] = dateRange[1];
   }
-  return search
+  return search;
 }
 
 // 回显数据字典
 export function selectDictLabel(datas, value) {
   if (value === undefined) {
-    return ""
+    return "";
   }
-  var actions = []
+  var actions = [];
   Object.keys(datas).some((key) => {
     if (datas[key].value == ('' + value)) {
-      actions.push(datas[key].label)
+      actions.push(datas[key].label);
-      return true
+      return true;
     }
   })
   if (actions.length === 0) {
-    actions.push(value)
+    actions.push(value);
   }
-  return actions.join('')
+  return actions.join('');
 }
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
   if (value === undefined || value.length ===0) {
-    return ""
+    return "";
   }
   if (Array.isArray(value)) {
-    value = value.join(",")
+    value = value.join(",");
   }
-  var actions = []
+  var actions = [];
-  var currentSeparator = undefined === separator ? "," : separator
+  var currentSeparator = undefined === separator ? "," : separator;
-  var temp = value.split(currentSeparator)
+  var temp = value.split(currentSeparator);
   Object.keys(value.split(currentSeparator)).some((val) => {
-    var match = false
+    var match = false;
     Object.keys(datas).some((key) => {
       if (datas[key].value == ('' + temp[val])) {
-        actions.push(datas[key].label + currentSeparator)
+        actions.push(datas[key].label + currentSeparator);
-        match = true
+        match = true;
       }
     })
     if (!match) {
-      actions.push(temp[val] + currentSeparator)
+      actions.push(temp[val] + currentSeparator);
     }
   })
-  return actions.join('').substring(0, actions.join('').length - 1)
+  return actions.join('').substring(0, actions.join('').length - 1);
 }
 
 // 字符串格式化(%s )
 export function sprintf(str) {
-  var args = arguments, flag = true, i = 1
+  var args = arguments, flag = true, i = 1;
   str = str.replace(/%s/g, function () {
-    var arg = args[i++]
+    var arg = args[i++];
     if (typeof arg === 'undefined') {
-      flag = false
+      flag = false;
-      return ''
+      return '';
     }
-    return arg
+    return arg;
-  })
+  });
-  return flag ? str : ''
+  return flag ? str : '';
 }
 
 // 转换字符串，undefined,null等转化为""
 export function parseStrEmpty(str) {
   if (!str || str == "undefined" || str == "null") {
-    return ""
+    return "";
   }
-  return str
+  return str;
 }
 
 // 数据合并
@@ -137,16 +137,16 @@ export function mergeRecursive(source, target) {
   for (var p in target) {
     try {
       if (target[p].constructor == Object) {
-        source[p] = mergeRecursive(source[p], target[p])
+        source[p] = mergeRecursive(source[p], target[p]);
       } else {
-        source[p] = target[p]
+        source[p] = target[p];
       }
     } catch (e) {
-      source[p] = target[p]
+      source[p] = target[p];
     }
   }
-  return source
+  return source;
-}
+};
 
 /**
  * 构造树型结构数据
@@ -160,15 +160,15 @@ export function handleTree(data, id, parentId, children) {
     id: id || 'id',
     parentId: parentId || 'parentId',
     childrenList: children || 'children'
-  }
+  };
 
-  var childrenListMap = {}
+  var childrenListMap = {};
-  var tree = []
+  var tree = [];
   for (let d of data) {
-    let id = d[config.id]
+    let id = d[config.id];
-    childrenListMap[id] = d
+    childrenListMap[id] = d;
     if (!d[config.childrenList]) {
-      d[config.childrenList] = []
+      d[config.childrenList] = [];
     }
   }
 
@@ -176,12 +176,12 @@ export function handleTree(data, id, parentId, children) {
     let parentId = d[config.parentId]
     let parentObj = childrenListMap[parentId]
     if (!parentObj) {
-      tree.push(d)
+      tree.push(d);
     } else {
       parentObj[config.childrenList].push(d)
     }
   }
-  return tree
+  return tree;
 }
 
 /**
@@ -191,19 +191,19 @@ export function handleTree(data, id, parentId, children) {
 export function tansParams(params) {
   let result = ''
   for (const propName of Object.keys(params)) {
-    const value = params[propName]
+    const value = params[propName];
-    var part = encodeURIComponent(propName) + "="
+    var part = encodeURIComponent(propName) + "=";
     if (value !== null && value !== "" && typeof (value) !== "undefined") {
       if (typeof value === 'object') {
         for (const key of Object.keys(value)) {
           if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
-            let params = propName + '[' + key + ']'
+            let params = propName + '[' + key + ']';
-            var subPart = encodeURIComponent(params) + "="
+            var subPart = encodeURIComponent(params) + "=";
-            result += subPart + encodeURIComponent(value[key]) + "&"
+            result += subPart + encodeURIComponent(value[key]) + "&";
           }
         }
       } else {
-        result += part + encodeURIComponent(value) + "&"
+        result += part + encodeURIComponent(value) + "&";
       }
     }
   }
@@ -214,7 +214,7 @@ export function tansParams(params) {
 export function getNormalPath(p) {
   if (p.length === 0 || !p || p == 'undefined') {
     return p
-  }
+  };
   let res = p.replace('//', '/')
   if (res[res.length - 1] === '/') {
     return res.slice(0, res.length - 1)

src/utils/permission.js

@@ -9,7 +9,7 @@ export function checkPermi(value) {
   if (value && value instanceof Array && value.length > 0) {
     const permissions = useUserStore().permissions
     const permissionDatas = value
-    const all_permission = "*:*:*"
+    const all_permission = "*:*:*";
 
     const hasPermission = permissions.some(permission => {
       return all_permission === permission || permissionDatas.includes(permission)
@@ -34,7 +34,7 @@ export function checkRole(value) {
   if (value && value instanceof Array && value.length > 0) {
     const roles = useUserStore().roles
     const permissionRoles = value
-    const super_admin = "admin"
+    const super_admin = "admin";
 
     const hasRole = roles.some(role => {
       return super_admin === role || permissionRoles.includes(role)

src/utils/request.js

@@ -2,14 +2,14 @@ import axios from 'axios'
 import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from '@/utils/ruoyi'
+import { tansParams, blobValidate } from '@/utils/manage'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 import useUserStore from '@/store/modules/user'
 
-let downloadLoadingInstance
+let downloadLoadingInstance;
 // 是否显示重新登录
-export let isRelogin = { show: false }
+export let isRelogin = { show: false };
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 100000
 })
 
 // request拦截器
@@ -29,12 +29,15 @@ service.interceptors.request.use(config => {
   if (getToken() && !isToken) {
     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
+  if(config.isUpload){
+    config.headers['Content-Type'] = 'multipart/form-data'
+  }
   // get请求映射params参数
   if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params)
+    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1)
+    url = url.slice(0, -1);
-    config.params = {}
+    config.params = {};
-    config.url = url
+    config.url = url;
   }
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
     const requestObj = {
@@ -42,22 +45,22 @@ service.interceptors.request.use(config => {
       data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
       time: new Date().getTime()
     }
-    const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
+    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
-    const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
+    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
     if (requestSize >= limitSize) {
       console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-      return config
+      return config;
     }
     const sessionObj = cache.session.getJSON('sessionObj')
     if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
       cache.session.setJSON('sessionObj', requestObj)
     } else {
-      const s_url = sessionObj.url                // 请求地址
+      const s_url = sessionObj.url;                // 请求地址
-      const s_data = sessionObj.data              // 请求数据
+      const s_data = sessionObj.data;              // 请求数据
-      const s_time = sessionObj.time              // 请求时间
+      const s_time = sessionObj.time;              // 请求时间
-      const interval = 1000                       // 间隔时间(ms)，小于此时间视为重复提交
+      const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交'
+        const message = '数据正在处理，请勿重复提交';
         console.warn(`[${s_url}]: ` + message)
         return Promise.reject(new Error(message))
       } else {
@@ -74,7 +77,7 @@ service.interceptors.request.use(config => {
 // 响应拦截器
 service.interceptors.response.use(res => {
     // 未设置状态码则默认成功状态
-    const code = res.data.code || 200
+    const code = res.data.code || 200;
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     // 二进制数据则直接返回
@@ -83,15 +86,15 @@ service.interceptors.response.use(res => {
     }
     if (code === 401) {
       if (!isRelogin.show) {
-        isRelogin.show = true
+        isRelogin.show = true;
         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false
+          isRelogin.show = false;
           useUserStore().logOut().then(() => {
-            location.href = '/index'
+            location.href = '/index';
           })
       }).catch(() => {
-        isRelogin.show = false
+        isRelogin.show = false;
-      })
+      });
     }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
@@ -109,13 +112,13 @@ service.interceptors.response.use(res => {
   },
   error => {
     console.log('err' + error)
-    let { message } = error
+    let { message } = error;
     if (message == "Network Error") {
-      message = "后端接口连接异常"
+      message = "后端接口连接异常";
     } else if (message.includes("timeout")) {
-      message = "系统接口请求超时"
+      message = "系统接口请求超时";
     } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常"
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
     return Promise.reject(error)
@@ -131,21 +134,21 @@ export function download(url, params, filename, config) {
     responseType: 'blob',
     ...config
   }).then(async (data) => {
-    const isBlob = blobValidate(data)
+    const isBlob = blobValidate(data);
     if (isBlob) {
       const blob = new Blob([data])
       saveAs(blob, filename)
     } else {
-      const resText = await data.text()
+      const resText = await data.text();
-      const rspObj = JSON.parse(resText)
+      const rspObj = JSON.parse(resText);
       const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      ElMessage.error(errMsg)
+      ElMessage.error(errMsg);
     }
-    downloadLoadingInstance.close()
+    downloadLoadingInstance.close();
   }).catch((r) => {
     console.error(r)
     ElMessage.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close()
+    downloadLoadingInstance.close();
   })
 }
 

src/utils/tableHelper.js

@@ -0,0 +1,4 @@
+export const tableInfoRowClick = (row, ref) => {
+  console.log(row, ref);
+  ref.setCurrentRow(row);
+};

src/views/index.vue

@@ -4,7 +4,7 @@
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>若依后台管理框架</h2>
         <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了智汇管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>

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