diff --git a/src/components/Form/FormFields/TagInput.vue b/src/components/Form/FormFields/TagInput.vue
index f5e2fdf8f..c39c585a0 100644
--- a/src/components/Form/FormFields/TagInput.vue
+++ b/src/components/Form/FormFields/TagInput.vue
@@ -17,7 +17,7 @@
ref="SearchInput"
v-model.trim="filterValue"
:fetch-suggestions="autocomplete"
- :placeholder="this.iPlaceholder"
+ :placeholder="iPlaceholder"
:type="inputType"
class="search-input"
@blur="focus = false"
diff --git a/src/components/Table/ListTable/TableAction/ImportDialog.vue b/src/components/Table/ListTable/TableAction/ImportDialog.vue
index 39f43e505..3558fceb6 100644
--- a/src/components/Table/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ImportDialog.vue
@@ -128,11 +128,13 @@ export default {
}
},
importTitle() {
+ let option = ''
if (this.importOption === 'create') {
- return this.$t('Import') + this.$t('Create')
+ option = this.$t('Create')
} else {
- return this.$t('Import') + this.$t('Update')
+ option = this.$t('Update')
}
+ return `${this.$t('Import')} & ${option}`
}
},
watch: {
diff --git a/src/layout/components/NavLeft/SidebarItem.vue b/src/layout/components/NavLeft/SidebarItem.vue
index cc8946bdc..e41ba2a44 100644
--- a/src/layout/components/NavLeft/SidebarItem.vue
+++ b/src/layout/components/NavLeft/SidebarItem.vue
@@ -20,25 +20,39 @@
-
+
+
+
+ {{ getItemTitle(item) }}
+
+
+
+
@@ -67,6 +81,10 @@ export default {
basePath: {
type: String,
default: ''
+ },
+ collapse: {
+ type: Boolean,
+ default: false
}
},
data() {
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index c34692907..4f06c9e9d 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -43,6 +43,7 @@
:key="route.path"
:base-path="route.path"
:item="route"
+ :collapse="isCollapse"
/>
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 0621bcc30..d5d8384fe 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -2,10 +2,6 @@
$icon-width: 14px;
$single-menu-height: 38px;
-@mixin hover_active {
- background-color: var(--menu-hover);
- color: var(--color-primary);
-}
@mixin only_active {
&:before {
@@ -18,178 +14,140 @@ $single-menu-height: 38px;
background-color: var(--menu-text-active);
}
}
+@mixin collapse-active {
+ background-color: var(--menu-hover);
+
+ &:before {
+ width: 0
+ }
+}
.el-menu {
border-right: none !important;
-}
-.left-menu.el-menu {
- .submenu-item {
- &.el-submenu-sidebar {
- margin-top: 8px;
- &.is-opened {
- .el-icon-arrow-down {
- display: none;
- }
- }
- // 有子菜单项的 title
- .el-submenu__title {
- height: 30px;
- font-size: 11px;
- cursor: default;
- font-weight: 600;
- line-height: 30px;
- letter-spacing: .07em;
- color: rgba(0, 0, 0, 0.6) !important;
+ // 通用 item 样式
+ .el-menu-item {
+ display: flex;
+ align-items: center;
+ height: $single-menu-height;
+ color: var(--color-text-primary);
+ }
- .svg-icon {
- display: none;
- }
-
- &:hover {
- background-color: #ffffff;
-
- .el-icon-arrow-down {
- display: inline;
- }
- }
- }
-
- // 子菜单项
- .el-menu--inline {
- background-color: $subMenuBg;
-
- .nest-menu {
- display: flex;
-
- .el-menu-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- height: 36px;
- padding: 19px 20px !important;
- line-height: 36px;
- min-width: 200px;
- font-size: 13px;
- letter-spacing: .03em;
-
- &:hover,
- &.is-active, {
- @include hover_active;
- }
-
- &.is-active {
- @include only_active;
- }
-
- .svg-icon {
- font-weight: 500;
- overflow: hidden;
- width: $icon-width;
- height: $icon-width;
- }
-
- span {
- padding-left: 10px;
- }
- }
- }
- }
+ .submenu-title-noDropdown.level0 {
+ span {
+ padding-left: 10px;
+ line-height: 100%;
}
- // 当前菜单样式
- &.is-active .el-submenu__title {
- color: $menuActiveText;
+ .svg-icon {
+ width: $icon-width;
+ height: $icon-width;
}
- // 没有子菜单的项
- &.submenu-title-noDropdown {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- height: $single-menu-height;
- line-height: $single-menu-height;
- min-width: 200px;
- font-size: 13px;
-
- &:hover,
- &.is-active {
- @include hover_active
- }
-
- &.is-active {
- @include only_active;
- }
-
- .svg-icon {
- //display: none;
- width: $icon-width;
- height: $icon-width;
- }
+ &.is-active {
+ background-color: var(--menu-hover);
+ @include only_active;
span {
- padding-left: 10px;
+ color: var(--color-primary);
}
}
}
- // 折叠状态下
- &.el-menu--collapse {
- width: 100% !important;
-
- .submenu-title-noDropdown,
- .submenu-title-noDropdown .el-tooltip {
- display: flex !important;
- align-items: center !important;
- min-width: 55px !important;
-
- .svg-icon {
- display: block
- }
+ .group-title {
+ // 分组的 title 样式
+ & > span {
+ padding-left: 20px;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 25px;
+ letter-spacing: .07em;
+ color: rgba(0, 0, 0, 0.6)
}
- .submenu-item {
- width: 55px;
+ .nest-menu {
+ display: flex;
+ cursor: pointer;
+
+ // 存在三级子菜单
+ .level0 {
+ min-width: 200px;
+
+ .el-submenu__title {
+ display: flex;
+ align-items: center;
+ height: $single-menu-height;
+
+ span {
+ padding-left: 10px;
+ line-height: 100%;
+ }
+ }
+
+ .el-menu--inline .nest-menu .el-menu-item {
+ height: $single-menu-height;
+
+ &.is-active {
+ @include only_active
+ }
+ }
- &.is-active {
- cursor: pointer;
- @include hover_active
}
- .el-submenu__title {
- display: flex;
- align-items: center;
- height: $single-menu-height;
-
- &:hover,
- &.is-active {
- cursor: pointer;
- @include hover_active
- }
+ // 没有三级子菜单的项
+ .level1-item {
.svg-icon {
- //display: block;
+ width: $icon-width;
+ height: $icon-width;
+ }
+
+ span {
+ // 此处若不显示给出 line-height 则默认继承 ElUI 默认 56px 行高
+ padding-left: 10px;
+ line-height: 100%;
+ color: var(--color-text-primary);
+ }
+
+ // 处于选中状态的高亮样式
+ &.is-active {
+ background-color: var(--menu-hover);
+ @include only_active;
+
+ span {
+ color: var(--color-primary);
+ }
}
}
}
}
- i.fa {
- margin-right: 10px;
- width: 13px;
- }
+ // 折叠起来的样式
+ &.el-menu--collapse {
+ // 覆盖默认 64px 宽度
+ width: 55px;
- .is-active i.fa {
- color: $menuActiveText;
- }
-}
-
-.el-menu--vertical .el-menu-item {
- display: flex;
- align-items: center;
- height: 36px;
-
- .svg-icon {
- margin-right: 15px;
+ .level0 {
+ height: $single-menu-height;
+ line-height: $single-menu-height;
+ }
+
+ .group-title {
+ & > span {
+ display: none;
+ }
+
+ .el-divider.el-divider--horizontal {
+ margin: 12px 0 !important;
+ }
+
+ .level0 {
+ min-width: 55px;
+ }
+
+ .nest-menu .level1-item {
+ line-height: $single-menu-height;
+ }
+ }
}
}