From 2df12cfc4885a525333ddc809642ed5a677a6f53 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Fri, 28 Apr 2023 11:02:45 +0800
Subject: [PATCH 1/3] =?UTF-8?q?improve:=20=E9=98=B4=E5=BD=B1=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/navBars/breadcrumb/setings.vue |   9 +-
 template/admin/src/theme/element.scss         | 283 +++++++++++++++---
 template/admin/src/theme/iview.scss           | 259 +++-------------
 3 files changed, 291 insertions(+), 260 deletions(-)

diff --git a/template/admin/src/layout/navBars/breadcrumb/setings.vue b/template/admin/src/layout/navBars/breadcrumb/setings.vue
index ff2feb44a..af0dbd4ec 100644
--- a/template/admin/src/layout/navBars/breadcrumb/setings.vue
+++ b/template/admin/src/layout/navBars/breadcrumb/setings.vue
@@ -592,7 +592,14 @@ export default {
   },
 };
 </script>
-
+<style>
+.v-modal {
+  opacity: 0.5;
+  background-color: rgba(0, 0, 0, 0.3);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(5px);
+}
+</style>
 <style scoped lang="scss">
 .w10 {
   width: 10px;
diff --git a/template/admin/src/theme/element.scss b/template/admin/src/theme/element.scss
index 79c2cfca4..9a996e589 100644
--- a/template/admin/src/theme/element.scss
+++ b/template/admin/src/theme/element.scss
@@ -1,61 +1,264 @@
 /* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）
 ------------------------------- */
-
-.ivu-btn-primary {
-  background-color: var(--prev-color-primary) !important;
-  border-color: var(--prev-color-primary) !important;
+.el-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.el-scrollbar__wrap {
+  overflow: auto !important;
+  overflow-x: hidden !important;
+  max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
+}
+.el-select-dropdown .el-scrollbar__wrap {
+  overflow-x: scroll !important;
+}
+.el-select-dropdown__wrap {
+  max-height: 274px !important; /*修复Select 选择器高度问题*/
+}
+.el-autocomplete-suggestion__wrap {
+  max-height: 280px !important;
 }
 
-// tab 标签
-.ivu-tabs-nav .ivu-tabs-tab-active {
-  color: var(--prev-color-primary);
+/* Button 按钮
+------------------------------- */
+// 第三方字体图标大小
+.el-button i.iconfont,
+.el-button i.fa {
+  font-size: 14px !important;
+  margin-right: 5px;
+}
+.el-button--medium i.iconfont,
+.el-button--medium i.fa {
+  font-size: 14px !important;
+  margin-right: 5px;
+}
+.el-button--small i.iconfont,
+.el-button--small i.fa {
+  font-size: 12px !important;
+  margin-right: 5px;
+}
+.el-button--mini i.iconfont,
+.el-button--mini i.fa {
+  font-size: 12px !important;
+  margin-right: 5px;
 }
 
-.ivu-tabs-ink-bar {
-  background-color: var(--prev-color-primary);
+/* Dialog 对话框
+------------------------------- */
+.el-overlay,
+.el-dialog__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .el-dialog {
+    margin: 0 auto !important;
+    .el-dialog__body {
+      padding: 20px !important;
+    }
+  }
 }
-.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
-  color: var(--prev-color-primary);
+.el-dialog__body {
+  max-height: calc(90vh - 111px) !important;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-// 单选卡
-.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
-  border-color: var(--prev-color-primary);
+/* Alert 警告
+------------------------------- */
+.el-alert--warning.is-light {
+  border: 1px solid rgba(230, 162, 60, 0.3) !important;
 }
-.ivu-radio-group-button .ivu-radio-wrapper-checked {
-  color: var(--prev-color-primary);
+.el-alert--success.is-light {
+  border: 1px solid rgba(103, 194, 58, 0.3) !important;
+}
+.el-alert--info.is-light {
+  border: 1px solid rgba(144, 147, 153, 0.3) !important;
+}
+.el-alert--error.is-light {
+  border: 1px solid rgba(245, 108, 108, 0.3) !important;
 }
 
-// input
-.ivu-input-search {
-  background-color: var(--prev-color-primary) !important;
-  border-color: var(--prev-color-primary) !important;
+/* Table 表格
+------------------------------- */
+.el-table-column--selection {
+  .el-checkbox {
+    margin-right: unset !important;
+  }
+}
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  z-index: 99 !important;
 }
 
-// radio
-.ivu-radio-checked .ivu-radio-inner {
-  border-color: var(--prev-color-primary);
-}
-.ivu-radio-inner:after {
-  background-color: var(--prev-color-primary);
+/* 下拉选择器/时间选择器滚动条
+------------------------------- */
+.el-select-dropdown .el-scrollbar__wrap,
+.el-picker-panel .el-scrollbar__wrap {
+  overflow-x: scroll !important;
 }
 
-//cheakbox
-.ivu-checkbox-checked .ivu-checkbox-inner {
-  background-color: var(--prev-color-primary);
-  border-color: var(--prev-color-primary);
+/* NavMenu 导航菜单
+------------------------------- */
+// 默认样式修改
+.el-menu {
+  border-right: none !important;
 }
-//switch
-.ivu-switch-checked {
-  background-color: var(--prev-color-primary);
-  border-color: var(--prev-color-primary);
+.el-menu-item,
+.el-submenu__title {
+  height: 50px !important;
+  line-height: 50px !important;
+  color: var(--prev-bg-menuBarColor) !important;
+  transition: none !important;
+}
+// horizontal 水平方向时
+.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 3px solid !important;
+  border-bottom-color: var(--prev-color-primary) !important;
+  // color: var(--prev-color-primary) !important;
+}
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
+.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
+.el-menu--horizontal .el-menu .el-menu-item.is-active,
+.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+  color: var(--prev-MenuActiveColor) !important;
+}
+.el-menu.el-menu--horizontal {
+  border-bottom: none !important;
+}
+.el-menu--horizontal > .el-menu-item,
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  padding: 0 14px;
+  color: var(--prev-bg-topBarColor) !important;
+}
+// 外部链接时
+.el-menu-item a,
+.el-menu-item a:hover,
+.el-menu-item i,
+.el-submenu__title i {
+  color: var(--prev-bg-menuBarColor) !important;
+  text-decoration: none;
+  margin-right: 8px;
+}
+.el-menu-item a {
+  width: 86%;
+  display: inline-block;
+}
+// 默认 hover 时
+.el-menu-item:hover,
+.el-submenu__title:hover {
+  color: var(--prev-MenuActiveColor) !important;
+  background-color: var(--prev-bg-menu-hover-ba-color) !important;
+  i {
+    color: var(--prev-MenuActiveColor) !important;
+  }
+}
+// 鼠标 hover 时颜色
+.el-menu-hover-bg-color {
+  background-color: var(--prev-bg-menu-hover-ba-color) !important;
+}
+// 高亮时
+.el-menu-item.is-active {
+  color: var(--prev-MenuActiveColor) !important;
+  //   background-color: var(--prev-bg-menu-hover-ba-color) !important;
+  .el-submenu__title i {
+    color: var(--prev-MenuActiveColor) !important;
+  }
 }
 
-// page
-.ivu-page-item-active {
-  border-color: var(--prev-color-primary);
+.el-menu-item.is-active,
+.el-sub-menu.is-active .el-sub-menu__title,
+.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
+  @extend .el-menu-hover-bg-color;
 }
-.ivu-page-item-active a,
-.ivu-page-item-active:hover a {
-  color: var(--prev-color-primary);
+.el-menu-item:hover {
+  @extend .el-menu-hover-bg-color;
+}
+
+.el-active-extend {
+  color: #ffffff !important;
+  //   background-color: var(--prev-color-primary) !important;
+  //   background-color: var(--prev-bg-menu-hover-ba-color) !important;
+
+  i {
+    color: #ffffff !important;
+  }
+}
+.columns-round {
+  .el-menu-item {
+    margin: 0 5px;
+    border-radius: 5px;
+  }
+  .el-submenu {
+    border-radius: 5px;
+    .el-submenu__title {
+      margin: 0 5px;
+    }
+    .el-submenu__title:hover {
+      border-radius: 5px;
+    }
+  }
+  .el-submenu .el-menu-item {
+    min-width: min-content !important;
+    width: 94%;
+  }
+  .el-submenu .el-menu-item {
+    padding: 0 30px !important;
+  }
+}
+
+#add-is-active {
+  //   @extend .el-active-extend;
+  //   &:hover {
+  //     @extend .el-active-extend;
+  //   }
+}
+// 菜单收起时且是a链接
+.is-dark a {
+  color: #ffffff !important;
+  text-decoration: none;
+}
+// 菜单收起时鼠标经过背景颜色/字体颜色
+.el-menu--vertical {
+  background: var(--prev-bg-menuBar) !important;
+}
+.el-menu--horizontal {
+  .el-menu {
+    background: var(--prev-bg-topBar) !important;
+  }
+  .el-menu-item,
+  .el-submenu__title {
+    color: var(--prev-bg-topBarColor) !important;
+  }
+}
+// 第三方图标字体间距/大小设置
+.el-menu-item .iconfont,
+.el-submenu .iconfont,
+.el-menu-item .fa,
+.el-submenu__title .fa {
+  font-size: 14px !important;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  width: 24px;
+  text-align: center;
+}
+// element plus 本身字体图标
+.el-submenu [class^='el-icon-'],
+.el-menu-item [class^='el-icon-'] {
+  font-size: 14px !important;
+}
+// 去掉离开浏览器时，菜单的默认高亮
+.el-menu-item:focus {
+  //   background-color: transparent !important;
+}
+
+/* Alert 警告
+------------------------------- */
+.el-alert__title {
+  word-break: break-all;
 }
diff --git a/template/admin/src/theme/iview.scss b/template/admin/src/theme/iview.scss
index a7cce51c4..79c2cfca4 100644
--- a/template/admin/src/theme/iview.scss
+++ b/template/admin/src/theme/iview.scss
@@ -1,240 +1,61 @@
 /* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）
 ------------------------------- */
-.el-scrollbar {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-}
-.el-scrollbar__wrap {
-  overflow: auto !important;
-  overflow-x: hidden !important;
-  max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
-}
-.el-select-dropdown .el-scrollbar__wrap {
-  overflow-x: scroll !important;
-}
-.el-select-dropdown__wrap {
-  max-height: 274px !important; /*修复Select 选择器高度问题*/
-}
-.el-autocomplete-suggestion__wrap {
-  max-height: 280px !important;
+
+.ivu-btn-primary {
+  background-color: var(--prev-color-primary) !important;
+  border-color: var(--prev-color-primary) !important;
 }
 
-/* Button 按钮
-------------------------------- */
-// 第三方字体图标大小
-.el-button i.iconfont,
-.el-button i.fa {
-  font-size: 14px !important;
-  margin-right: 5px;
-}
-.el-button--medium i.iconfont,
-.el-button--medium i.fa {
-  font-size: 14px !important;
-  margin-right: 5px;
-}
-.el-button--small i.iconfont,
-.el-button--small i.fa {
-  font-size: 12px !important;
-  margin-right: 5px;
-}
-.el-button--mini i.iconfont,
-.el-button--mini i.fa {
-  font-size: 12px !important;
-  margin-right: 5px;
+// tab 标签
+.ivu-tabs-nav .ivu-tabs-tab-active {
+  color: var(--prev-color-primary);
 }
 
-/* Dialog 对话框
-------------------------------- */
-.el-overlay,
-.el-dialog__wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .el-dialog {
-    margin: 0 auto !important;
-    .el-dialog__body {
-      padding: 20px !important;
-    }
-  }
+.ivu-tabs-ink-bar {
+  background-color: var(--prev-color-primary);
 }
-.el-dialog__body {
-  max-height: calc(90vh - 111px) !important;
-  overflow-y: auto;
-  overflow-x: hidden;
+.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
+  color: var(--prev-color-primary);
 }
 
-/* Alert 警告
-------------------------------- */
-.el-alert--warning.is-light {
-  border: 1px solid rgba(230, 162, 60, 0.3) !important;
+// 单选卡
+.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
+  border-color: var(--prev-color-primary);
 }
-.el-alert--success.is-light {
-  border: 1px solid rgba(103, 194, 58, 0.3) !important;
-}
-.el-alert--info.is-light {
-  border: 1px solid rgba(144, 147, 153, 0.3) !important;
-}
-.el-alert--error.is-light {
-  border: 1px solid rgba(245, 108, 108, 0.3) !important;
+.ivu-radio-group-button .ivu-radio-wrapper-checked {
+  color: var(--prev-color-primary);
 }
 
-/* Table 表格
-------------------------------- */
-.el-table-column--selection {
-  .el-checkbox {
-    margin-right: unset !important;
-  }
-}
-.el-table::before,
-.el-table--group::after,
-.el-table--border::after {
-  z-index: 99 !important;
+// input
+.ivu-input-search {
+  background-color: var(--prev-color-primary) !important;
+  border-color: var(--prev-color-primary) !important;
 }
 
-/* 下拉选择器/时间选择器滚动条
-------------------------------- */
-.el-select-dropdown .el-scrollbar__wrap,
-.el-picker-panel .el-scrollbar__wrap {
-  overflow-x: scroll !important;
+// radio
+.ivu-radio-checked .ivu-radio-inner {
+  border-color: var(--prev-color-primary);
+}
+.ivu-radio-inner:after {
+  background-color: var(--prev-color-primary);
 }
 
-/* NavMenu 导航菜单
-------------------------------- */
-// 默认样式修改
-.el-menu {
-  border-right: none !important;
+//cheakbox
+.ivu-checkbox-checked .ivu-checkbox-inner {
+  background-color: var(--prev-color-primary);
+  border-color: var(--prev-color-primary);
 }
-.el-menu-item,
-.el-submenu__title {
-  height: 50px !important;
-  line-height: 50px !important;
-  color: var(--prev-bg-menuBarColor) !important;
-  transition: none !important;
-}
-// horizontal 水平方向时
-.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 3px solid !important;
-  border-bottom-color: var(--prev-color-primary) !important;
-  // color: var(--prev-color-primary) !important;
-}
-.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
-.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
-.el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
-  color: var(--prev-MenuActiveColor) !important;
-}
-.el-menu.el-menu--horizontal {
-  border-bottom: none !important;
-}
-.el-menu--horizontal > .el-menu-item,
-.el-menu--horizontal > .el-submenu .el-submenu__title {
-  padding: 0 14px;
-  color: var(--prev-bg-topBarColor) !important;
-}
-// 外部链接时
-.el-menu-item a,
-.el-menu-item a:hover,
-.el-menu-item i,
-.el-submenu__title i {
-  color: var(--prev-bg-menuBarColor) !important;
-  text-decoration: none;
-  margin-right: 8px;
-}
-.el-menu-item a {
-  width: 86%;
-  display: inline-block;
-}
-// 默认 hover 时
-.el-menu-item:hover,
-.el-submenu__title:hover {
-  color: var(--prev-MenuActiveColor) !important;
-  background-color: var(--prev-bg-menu-hover-ba-color) !important;
-  i {
-    color: var(--prev-MenuActiveColor) !important;
-  }
-}
-// 鼠标 hover 时颜色
-.el-menu-hover-bg-color {
-  background-color: var(--prev-bg-menu-hover-ba-color) !important;
-}
-// 高亮时
-.el-menu-item.is-active {
-  color: var(--prev-MenuActiveColor) !important;
-  //   background-color: var(--prev-bg-menu-hover-ba-color) !important;
-  .el-submenu__title i {
-    color: var(--prev-MenuActiveColor) !important;
-  }
-}
-.el-menu-item.is-active,
-.el-sub-menu.is-active .el-sub-menu__title,
-.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
-  @extend .el-menu-hover-bg-color;
-}
-.el-menu-item:hover {
-  @extend .el-menu-hover-bg-color;
+//switch
+.ivu-switch-checked {
+  background-color: var(--prev-color-primary);
+  border-color: var(--prev-color-primary);
 }
 
-.el-active-extend {
-  color: #ffffff !important;
-  //   background-color: var(--prev-color-primary) !important;
-  //   background-color: var(--prev-bg-menu-hover-ba-color) !important;
-
-  i {
-    color: #ffffff !important;
-  }
+// page
+.ivu-page-item-active {
+  border-color: var(--prev-color-primary);
 }
-#add-is-active {
-  //   @extend .el-active-extend;
-  //   &:hover {
-  //     @extend .el-active-extend;
-  //   }
-}
-// 菜单收起时且是a链接
-.is-dark a {
-  color: #ffffff !important;
-  text-decoration: none;
-}
-// 菜单收起时鼠标经过背景颜色/字体颜色
-.el-menu--vertical {
-  background: var(--prev-bg-menuBar) !important;
-}
-.el-menu--horizontal {
-  .el-menu {
-    background: var(--prev-bg-topBar) !important;
-  }
-  .el-menu-item,
-  .el-submenu__title {
-    color: var(--prev-bg-topBarColor) !important;
-  }
-}
-// 第三方图标字体间距/大小设置
-.el-menu-item .iconfont,
-.el-submenu .iconfont,
-.el-menu-item .fa,
-.el-submenu__title .fa {
-  font-size: 14px !important;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 5px;
-  width: 24px;
-  text-align: center;
-}
-// element plus 本身字体图标
-.el-submenu [class^='el-icon-'],
-.el-menu-item [class^='el-icon-'] {
-  font-size: 14px !important;
-}
-// 去掉离开浏览器时，菜单的默认高亮
-.el-menu-item:focus {
-  //   background-color: transparent !important;
-}
-
-/* Alert 警告
-------------------------------- */
-.el-alert__title {
-  word-break: break-all;
+.ivu-page-item-active a,
+.ivu-page-item-active:hover a {
+  color: var(--prev-color-primary);
 }

From 33766f1eb90137f8acbcdf9cd22578761a135577 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Fri, 28 Apr 2023 11:05:35 +0800
Subject: [PATCH 2/3] =?UTF-8?q?improve:=20=E8=8F=9C=E5=8D=95=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 template/admin/src/i18n/lang/zh-cn.js                    | 2 +-
 template/admin/src/layout/navBars/breadcrumb/setings.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/template/admin/src/i18n/lang/zh-cn.js b/template/admin/src/i18n/lang/zh-cn.js
index f37a50c02..a9f5439fb 100644
--- a/template/admin/src/i18n/lang/zh-cn.js
+++ b/template/admin/src/i18n/lang/zh-cn.js
@@ -136,7 +136,7 @@ export default {
     fiveTagsStyle: '历史菜单风格',
     themeStyle: '主题',
     fiveAnimation: '主页面切换动画',
-    fiveColumnsAsideStyle: '分栏高亮风格',
+    fiveColumnsAsideStyle: '菜单高亮风格',
     fiveColumnsAsideLayout: '分栏布局风格',
     sixTitle: '布局切换',
     sixDefaults: '默认',
diff --git a/template/admin/src/layout/navBars/breadcrumb/setings.vue b/template/admin/src/layout/navBars/breadcrumb/setings.vue
index af0dbd4ec..a3c740ae6 100644
--- a/template/admin/src/layout/navBars/breadcrumb/setings.vue
+++ b/template/admin/src/layout/navBars/breadcrumb/setings.vue
@@ -275,7 +275,7 @@
             </el-radio-group>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15" v-if="getThemeConfig.layout === 'columns'">
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-radio-group v-model="getThemeConfig.columnsAsideStyle" size="mini" @change="setLocalThemeConfig">

From 1c94f64a4cabac55119ee9ff1067ad3d80027351 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Fri, 28 Apr 2023 11:07:18 +0800
Subject: [PATCH 3/3] =?UTF-8?q?style:=20=E6=8A=BD=E5=B1=89=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 template/admin/src/layout/navBars/breadcrumb/setings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/admin/src/layout/navBars/breadcrumb/setings.vue b/template/admin/src/layout/navBars/breadcrumb/setings.vue
index a3c740ae6..b2283e2ef 100644
--- a/template/admin/src/layout/navBars/breadcrumb/setings.vue
+++ b/template/admin/src/layout/navBars/breadcrumb/setings.vue
@@ -593,7 +593,7 @@ export default {
 };
 </script>
 <style>
-.v-modal {
+body .v-modal {
   opacity: 0.5;
   background-color: rgba(0, 0, 0, 0.3);
   -webkit-backdrop-filter: blur(3px);