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; + } + } } }